/* TV Studio chrome: self-hosted type, the header, the footer, the real iPhone frame and the reduced-motion play button.
   Shared by the homes (with home.css), the guides (with site.css), privacy, terms and /get. Every class is s- prefixed so it
   never meets the older site.css rules. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 900;font-stretch:62% 100%;font-display:swap;src:url(../fonts/archivo-upright-latin.woff2?v=be4d0f2179) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 900;font-stretch:62% 100%;font-display:swap;src:url(../fonts/archivo-upright-latin-ext.woff2?v=1d83c55037) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:italic;font-weight:700 900;font-stretch:100% 110%;font-display:swap;src:url(../fonts/archivo-italic-latin.woff2?v=6c8801fe98) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:italic;font-weight:700 900;font-stretch:100% 110%;font-display:swap;src:url(../fonts/archivo-italic-latin-ext.woff2?v=960d8a9d52) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cairo";font-style:normal;font-weight:700 800;font-display:swap;src:url(../fonts/cairo-arabic.woff2?v=4233697bf4) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
/* Noto Sans JP, cut to the glyphs the site letters (build_home.py writes the subset and fails the build when one is missing) */
@font-face{font-family:"Noto Sans JP";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/noto-sans-jp-cue-800.woff2?v=0019675834) format("woff2");unicode-range:U+3000-30FF,U+3400-9FFF,U+FF00-FFEF}
@font-face{font-family:"Noto Sans JP";font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/noto-sans-jp-cue-900.woff2?v=f3b87ecafe) format("woff2");unicode-range:U+3000-30FF,U+3400-9FFF,U+FF00-FFEF}

.snav,.sfoot{--s-ink:#0B0A12;--s-lime:#C6F432;--s-m:clamp(16px, 2.2vw, 32px);font-family:"Archivo",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
[lang="ar"] .snav,[lang="ar"] .sfoot{font-family:-apple-system,"SF Arabic","Geeza Pro","Cairo","Archivo",system-ui,sans-serif}
[lang="ja"] .snav,[lang="ja"] .sfoot{font-family:"Archivo","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif}
.snav a,.sfoot a{color:inherit}
.snav :focus-visible,.sfoot :focus-visible{outline:3px solid var(--s-lime);outline-offset:3px;border-radius:0}
.sfoot :focus-visible{outline-color:var(--s-ink)}

/* ---------- header ---------- */
.snav{position:absolute;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--s-m);color:#fff;background:transparent}
.s-mark{display:flex;align-items:center;min-height:44px;width:78px;flex:none}
.s-mark svg{display:block;width:100%;height:auto}
.snav ul{display:flex;align-items:center;gap:clamp(6px,1.4vw,24px);margin:0;padding:0;list-style:none}
.s-link{display:inline-flex;align-items:center;min-height:44px;padding-inline:6px;font-weight:500;font-size:16px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.22em;text-decoration-thickness:.08em;transition:text-decoration-color 220ms ease}
@media (hover:hover) and (pointer:fine){.s-link:hover{text-decoration-color:currentColor}}
.s-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 1.2em;border-radius:0;background:var(--s-lime);color:var(--s-ink)!important;font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap;transition:transform 160ms cubic-bezier(.16,1,.3,1),background-color 220ms ease}
.s-btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.s-btn:hover{background:#fff}}
.s-langs{position:relative}
.s-langs summary{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding-inline:6px;font-weight:500;font-size:16px;cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
.s-langs summary::-webkit-details-marker{display:none}
.s-globe{width:18px;height:18px;flex:none}
.s-chev{width:11px;height:11px;flex:none;transition:transform 200ms ease}
.s-langs details[open] .s-chev{transform:rotate(180deg)}
.s-lcode{display:none}
.snav .s-lmenu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;display:block;min-width:200px;margin:0;padding:6px 0;list-style:none;background:var(--s-ink);color:#fff;border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.s-lmenu a{display:flex;align-items:center;min-height:44px;padding-inline:15px 18px;border-inline-start:3px solid transparent;font-size:16px;font-weight:500;text-decoration:none;white-space:nowrap}
.s-lmenu a[aria-current]{color:var(--s-lime);border-inline-start-color:var(--s-lime)}
@media (hover:hover) and (pointer:fine){.s-lmenu a:hover{background:rgba(255,255,255,.08)}}
.s-lmenu :focus-visible{outline-offset:-3px}
@media (max-width:1100px){.snav .s-sec{display:none}}
@media (max-width:760px){.s-lname{display:none}.s-lcode{display:inline}}
@media (max-width:760px){.snav{padding:12px var(--s-m)}.s-mark{width:64px}}

/* ---------- footer ---------- */
.sfoot{position:relative;background:var(--s-lime);color:var(--s-ink);overflow:hidden;display:flex;flex-direction:column;padding-top:clamp(72px,8vw,120px)}
.s-wrap{padding-inline:var(--s-m)}
.s-top{display:flex;flex-direction:column;gap:32px}
.s-display{font-family:"Archivo",sans-serif;font-style:italic;font-weight:900;letter-spacing:-0.02em;word-spacing:.05em;line-height:.95;margin:0;font-size:clamp(2.25rem,1.2rem + 4.4vw,5.5rem);max-width:20ch;text-wrap:balance}
[lang="ar"] .s-display{font-family:"Cairo","Archivo",sans-serif;font-style:normal;font-weight:800;letter-spacing:0;word-spacing:0;line-height:1.25}
[lang="ja"] .s-display{font-family:"Noto Sans JP","Hiragino Sans",sans-serif;font-style:normal;letter-spacing:0;word-spacing:0;line-height:1.2;word-break:auto-phrase;line-break:strict}
.s-go{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.s-badge{display:inline-block;transition:transform 160ms cubic-bezier(.16,1,.3,1),opacity 220ms ease}
.s-badge img{display:block;height:60px;width:auto}
.s-badge:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.s-badge:hover{opacity:.86}}
.s-qr{display:inline-flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}
.s-qr img{display:block;width:60px;height:60px;background:#fff;padding:4px}
.s-qr b{display:block;font-weight:700}
.s-qr small{display:block;font-size:14px}
.sfoot nav{margin-top:clamp(44px,5vw,68px)}
.sfoot nav ul{list-style:none;margin:0;padding:0;columns:4 200px;column-gap:20px;font-weight:600}
.sfoot nav li{break-inside:avoid}
.sfoot nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.22em;transition:text-decoration-color 220ms ease}
@media (hover:hover) and (pointer:fine){.sfoot nav a:hover{text-decoration-color:currentColor}}
.s-credits{margin:0;padding-top:40px;font-size:14px;line-height:1.5;max-width:80ch}
.s-credits a{text-decoration:underline;text-underline-offset:.2em}
.s-legal{display:flex;justify-content:space-between;gap:8px 32px;flex-wrap:wrap;font-size:14px;font-weight:600;padding-top:16px;padding-bottom:18px}
.s-legal ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.s-tm{direction:ltr}
.s-name{width:100%;padding-inline:var(--s-m);margin-bottom:-9vw;direction:ltr}
.s-name svg{display:block;width:100%;height:auto}
@media (max-width:760px){.s-qr{display:none}.sfoot nav ul{columns:2}.s-badge img{height:52px}.s-legal{flex-direction:column}.s-name{margin-bottom:-10vw}.s-display{font-size:clamp(1.75rem,8.2vw,2.25rem)}}

/* ---------- the iPhone frame (Apple's bezel, screen window 1320x2868 at 75,66 of 1470x3000) ---------- */
.s-phone{position:relative;display:block;aspect-ratio:1470/3000}
.s-phone .s-screen{position:absolute;left:5.102%;top:2.2%;width:89.796%;height:95.6%;overflow:hidden;background:#000;display:block;-webkit-mask:url(mask.png?v=eff9fa8ec2) 0 0/100% 100% no-repeat;mask:url(mask.png?v=eff9fa8ec2) 0 0/100% 100% no-repeat}
.s-phone .s-screen img,.s-phone .s-screen video{display:block;width:100%;height:100%;object-fit:cover}
.s-phone .s-bezel{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ---------- Reduce Motion: no film plays by itself; each one gets a 44 pt play/pause button ---------- */
.s-play{display:none}
@media (prefers-reduced-motion: reduce){
  .s-play{display:grid;place-items:center;position:absolute;z-index:4;inset-inline-end:8%;bottom:6%;width:44px;height:44px;border:0;border-radius:0;padding:0;background:var(--s-lime,#C6F432);color:#0B0A12;cursor:pointer}
  .s-play svg{width:18px;height:18px}
  .s-play .s-i-pause{display:none}
  .s-play[aria-pressed="true"] .s-i-pause{display:block}
  .s-play[aria-pressed="true"] .s-i-play{display:none}
}