/* guidevi.com. Source template for site/assets/site.css (Tools/site/generate.py adds tones and position classes).
   Tokens: docs/design/tokenlar.md section 1; site rules: docs/design/site.md. No inline styles anywhere (CSP style-src self). */
@font-face { font-family: "Newsreader"; src: url(/assets/fonts/newsreader.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;
  --bg: #F6F3EC; --surface: #EDE9E0; --raised: #E3DED3;
  --text: #1B1916; --text2: rgb(27 25 22 / .72); --text3: rgb(27 25 22 / .64); --hair: rgb(27 25 22 / .12);
  --accent: #8F5100; --on-accent: #FFFFFF; --focus: #1B1916; --on-focus: #F6F3EC;
  --track: rgb(27 25 22 / .10); --critical: #A8321F;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  --serif: "Newsreader", ui-serif, Georgia, serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --w: 980px; --wide: 1180px; --gutter: 22px;
  --nav-h: 52px;
  --t-brick-f:#F3E1DC;--t-brick-l:#7A2E22;--t-tobacco-f:#F3E6D6;--t-tobacco-l:#6C421B;--t-olive-f:#E3EBD7;--t-olive-l:#3A531D;--t-pine-f:#DAEBE2;--t-pine-l:#1C553E;--t-teal-f:#D8EAEB;--t-teal-l:#1B5256;--t-steel-f:#DCE5EF;--t-steel-l:#24476E;--t-indigo-f:#E1E1F1;--t-indigo-l:#353A80;--t-violet-f:#EADFF0;--t-violet-l:#5A3478;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131210; --surface: #1D1B18; --raised: #292621;
    --text: #F2EEE6; --text2: rgb(242 238 230 / .64); --text3: rgb(242 238 230 / .52); --hair: rgb(242 238 230 / .12);
    --accent: #FFB23E; --on-accent: #131210; --focus: #F2EEE6; --on-focus: #131210;
    --track: rgb(242 238 230 / .14); --critical: #FF7A66;
    --t-brick-f:#4A2622;--t-brick-l:#F2C4BA;--t-tobacco-f:#4A3320;--t-tobacco-l:#F0CFA8;--t-olive-f:#2F3D22;--t-olive-l:#CFE0B0;--t-pine-f:#1F3F33;--t-pine-l:#B3E0CB;--t-teal-f:#1D3C40;--t-teal-l:#AEDDE0;--t-steel-f:#223549;--t-steel-l:#BBD3EE;--t-indigo-f:#2A2C4E;--t-indigo-l:#C7C9F2;--t-violet-f:#3A2748;--t-violet-l:#DCC5EE;
  }
}
/* Apple TV sections are always charcoal: tvOS has one appearance. */
.stage {
  color-scheme: dark;
  --bg: #131210; --surface: #1D1B18; --raised: #292621;
  --text: #F2EEE6; --text2: rgb(242 238 230 / .64); --text3: rgb(242 238 230 / .52); --hair: rgb(242 238 230 / .12);
  --accent: #FFB23E; --on-accent: #131210; --focus: #F2EEE6; --on-focus: #131210;
  --track: rgb(242 238 230 / .14); --critical: #FF7A66;
  --t-brick-f:#4A2622;--t-brick-l:#F2C4BA;--t-tobacco-f:#4A3320;--t-tobacco-l:#F0CFA8;--t-olive-f:#2F3D22;--t-olive-l:#CFE0B0;--t-pine-f:#1F3F33;--t-pine-l:#B3E0CB;--t-teal-f:#1D3C40;--t-teal-l:#AEDDE0;--t-steel-f:#223549;--t-steel-l:#BBD3EE;--t-indigo-f:#2A2C4E;--t-indigo-l:#C7C9F2;--t-violet-f:#3A2748;--t-violet-l:#DCC5EE;
  background: var(--bg); color: var(--text);
}
@media (prefers-contrast: more) {
  :root { --text2: rgb(27 25 22 / .84); --text3: rgb(27 25 22 / .72); --hair: rgb(27 25 22 / .26); --accent: #7A4500; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --text2: rgb(242 238 230 / .82); --text3: rgb(242 238 230 / .68); --hair: rgb(242 238 230 / .26); --accent: #FFC266; }
}
@media (prefers-contrast: more) { .stage { --text2: rgb(242 238 230 / .82); --text3: rgb(242 238 230 / .68); --hair: rgb(242 238 230 / .26); --accent: #FFC266; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.53 var(--sans); letter-spacing: -.022em; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 0; z-index: 20; background: var(--text); color: var(--bg); padding: 10px 16px; }
.skip:focus { left: 8px; top: 8px; }
.wrap { width: min(var(--w), 100% - 2 * var(--gutter)); margin-inline: auto; }
.narrow { width: min(760px, 100% - 2 * var(--gutter)); }
.c { text-align: center; }
p { margin: 0 0 1em; }

/* Type. Serif only for display; everything else is the system font. */
.d1, .d2, .say, .num, .big3, .brand span { font-family: var(--serif); font-optical-sizing: auto; letter-spacing: 0; }
.d1 { font-size: clamp(3rem, 7.2vw, 6rem); font-weight: 600; line-height: 1.02; letter-spacing: -.022em; margin: 0 0 .3em; text-wrap: balance; }
.d2 { font-size: clamp(2.5rem, 5.2vw, 4rem); font-weight: 600; line-height: 1.06; letter-spacing: -.018em; margin: 0 0 .4em; text-wrap: balance; }
.eyebrow { font-size: 1.0625rem; font-weight: 600; color: var(--text2); margin: 0 0 .6em; letter-spacing: -.01em; }
.lead { font-size: clamp(1.1875rem, 1.65vw, 1.5rem); line-height: 1.42; color: var(--text2); max-width: 36em; margin: 0 0 1em; letter-spacing: -.012em; text-wrap: pretty; }
.c .lead { margin-inline: auto; }
h3 { font-size: 1.3125rem; font-weight: 600; line-height: 1.24; letter-spacing: -.016em; margin: 0 0 .45em; }
.fine { font-size: .875rem; line-height: 1.45; color: var(--text3); letter-spacing: -.008em; }
.tab, .num, .health, dd, .g-num, .ph-num, .tv-clock, .g-t, .g-flag, .g-sub, .ph-left, .mg-next, .pl-meta { font-variant-numeric: tabular-nums lining-nums; }

/* Buttons. One filled button per view; "coming soon" is a label, not a button. */
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 980px; background: var(--accent); color: var(--on-accent); font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em; transition: background-color 150ms ease, transform 100ms var(--ease-out); }
.btn:hover { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: color-mix(in srgb, var(--accent) 86%, var(--text)); } }
.btn:active { transform: scale(.97); }
.btn-s { min-height: 28px; padding: 0 12px; font-size: .8125rem; font-weight: 600; }
.soon { font-size: 1.0625rem; color: var(--text2); }
.ctas { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: center; margin-top: 30px; }
/* Apple's badge artwork, unmodified: black (preferred) in both themes, 48 px tall (minimum 40). */
.badge-link { display: inline-flex; border-radius: 9px; }
.store-badge { display: block; height: 48px; width: auto; }
.more { font-size: 1.0625rem; }
.more::after { content: " ›"; }

/* Local nav: the only translucent layer on the site (navigation layer, as in the app). */
.lnav { position: sticky; top: 0; z-index: 10; height: var(--nav-h); background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hair); }
@media (prefers-reduced-transparency: reduce) { .lnav { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.lnav-in { width: min(var(--w), 100% - 2 * var(--gutter)); margin-inline: auto; height: 100%; display: flex; align-items: center; gap: 22px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); margin-right: auto; }
.brand:hover { text-decoration: none; }
.brand span { font-size: 1.3125rem; font-weight: 600; }
.mark { width: 28px; height: 28px; flex: none; }
.m-bg { fill: #131210; } .m-rows { fill: #F2EEE6; fill-opacity: .16; } .m-g { fill: #F2EEE6; } .m-bar { fill: #FFB23E; }
@media (prefers-color-scheme: dark) { .lnav .m-bg { stroke: rgb(242 238 230 / .16); stroke-width: 16; } }
.lnav-links { display: flex; gap: 22px; }
.lnav-links a, .lang { font-size: .8125rem; color: var(--text2); letter-spacing: -.005em; }
.lnav-links a:hover, .lang:hover { color: var(--text); text-decoration: none; }
.lnav-menu { display: none; position: relative; }
.lnav-menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; margin-right: -12px; }
.lnav-menu summary::-webkit-details-marker { display: none; }
.lnav-menu svg { width: 18px; height: 18px; fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease-out); }
.lnav-menu[open] svg { transform: rotate(180deg); }
.lnav-sheet { position: fixed; left: 0; right: 0; top: var(--nav-h); background: var(--bg); border-bottom: 1px solid var(--hair); padding: 8px var(--gutter) 20px; display: grid; }
.lnav-sheet a[aria-current="page"] { font-weight: 600; }
.lnav-sheet a { color: var(--text); font-size: 1.0625rem; padding: 12px 0; border-bottom: 1px solid var(--hair); }

/* Sections */
.band { padding-block: clamp(88px, 11vw, 150px); }
.band.cont { padding-top: clamp(16px, 3vw, 40px); }
.hero { padding-top: clamp(56px, 7vw, 92px); padding-bottom: 40px; overflow: hidden; }
.appicon { width: 112px; height: 112px; margin: 0 auto 22px; border-radius: 22.37%; }
.hero .d1 { margin-top: 4px; }
.hero-devices { position: relative; width: min(var(--wide), 100% - 2 * var(--gutter)); margin: clamp(48px, 6vw, 80px) auto 0; padding-bottom: 7%; }
.hero-tv { width: 90%; }
/* Percentage padding resolves against the parent, not the phone: 3% of the phone = 22% × 3%. */
.hero-phone { position: absolute; right: 0; bottom: 0; width: 22%; z-index: 2; }
.phone.hero-phone { padding: .66%; }
.hero .fine { margin-top: 28px; }
.statement { padding-block: clamp(80px, 10vw, 140px); }
.say { font-size: clamp(1.75rem, 3.3vw, 2.75rem); font-weight: 500; line-height: 1.2; letter-spacing: -.012em; margin: 0; max-width: 24em; text-wrap: pretty; }
.say span { color: var(--text3); }
.wide { width: min(var(--wide), 100% - 2 * var(--gutter)); margin: clamp(48px, 6vw, 72px) auto 0; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: clamp(56px, 7vw, 88px); }
.trio p { color: var(--text2); margin: 0; }
.trio-c { text-align: center; }
.big3 { font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 600; line-height: 1.1; color: var(--text) !important; margin: 0 0 .3em !important; }
.split { display: grid; grid-template-columns: 1fr minmax(0, 340px); gap: clamp(40px, 8vw, 120px); align-items: center; }
.split.rev { grid-template-columns: 1fr minmax(0, 320px); }
.split-dev { margin: 0; }
.split .d2 { font-size: clamp(2.25rem, 4.2vw, 3.5rem); }
.split-dev figcaption { margin-top: 14px; text-align: center; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: clamp(64px, 8vw, 104px); }
.stat { border-top: 1px solid var(--hair); padding-top: 26px; }
.stat p { color: var(--text2); margin: 0; max-width: 20em; }
.num { white-space: nowrap; font-size: clamp(2.75rem, 4.6vw, 4rem); font-weight: 600; line-height: 1; color: var(--text) !important; margin: 0 0 14px !important; }
.health { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 500; color: var(--text) !important; background: var(--surface); border-radius: 10px; padding: 10px 14px; margin: 6px 0 20px !important; line-height: 1.3; }
.dot { width: 8px; height: 8px; border-radius: 4px; background: var(--accent); flex: none; }
sup a { font-size: .7em; }
.privacy { background: var(--surface); }
.privacy .more { display: inline-block; margin-top: 56px; }

/* Tiles: content on surface, no glass. */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
.tile { background: var(--surface); border-radius: 28px; padding: 36px; }
.tile-k { font-family: var(--serif); font-size: 2.25rem; font-weight: 600; line-height: 1.1; color: var(--text) !important; margin: 0 0 28px !important; font-variant-numeric: lining-nums; }
.tile-k span { font-size: .6em; }
.tile p { color: var(--text2); margin: 0 0 .6em; }
.tile.span2 { grid-column: span 2; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.qr-scene { text-align: center; }
.qr-plate { background: #FFFFFF; border-radius: 18px; padding: 14px; width: 176px; box-shadow: 0 0 0 1px var(--hair); }
.qr { width: 100%; display: block; } .qr rect { fill: #131210; } .qr .qr-bg { fill: #FFFFFF; }
.qr-cap { display: block; font-size: .875rem; color: var(--text2); margin-top: 12px; }
.si-big { display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 0; min-width: 300px; font-size: 1.0625rem; }
.si-big dt, .si-big dd { padding: 10px 0; border-bottom: 1px solid var(--hair); margin: 0; }
.si-big dt { color: var(--text2); } .si-big dd { text-align: right; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 36px 0 20px; }
.compare ul { list-style: none; margin: 0; padding: 0; }
.compare li { padding: 11px 0; border-top: 1px solid var(--hair); color: var(--text2); }
/* Screen slot: a real screenshot (<picture>) replaces the drawn UI inside the same frame. */
.screen-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top; }

.plat { margin-top: 56px; }
.plat-ipad { width: 76%; margin-inline: auto; }
.ipadui .tv-tabs { --u: calc(100cqw / 1500); }

/* FAQ: native disclosure, no script. */
.qa { border-bottom: 1px solid var(--hair); }
.qa:first-of-type { border-top: 1px solid var(--hair); margin-top: 28px; }
.qa summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; font-size: 1.1875rem; font-weight: 600; letter-spacing: -.016em; position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 1.6px solid var(--text2); border-bottom: 1.6px solid var(--text2); transform: rotate(45deg); transition: transform 200ms var(--ease-out); }
.qa[open] summary::after { transform: translateY(5px) rotate(225deg); }
.qa p { color: var(--text2); max-width: 38em; margin: -4px 0 0; padding-bottom: 24px; }

.closing { padding-block: clamp(96px, 12vw, 160px); }

/* Footer */
.foot { background: var(--surface); color: var(--text2); font-size: .75rem; line-height: 1.5; letter-spacing: -.004em; padding: 22px 0 34px; }
.foot-note { margin: 0 0 .8em; color: var(--text3); }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; border-top: 1px solid var(--hair); margin-top: 18px; padding-top: 22px; }
.foot h3 { font-size: .75rem; font-weight: 600; color: var(--text); margin: 0 0 8px; letter-spacing: -.004em; }
.foot-cols a { display: block; color: var(--text2); padding: 3px 0; }
.foot-cols a:hover { color: var(--text); }
.foot-lang a[aria-current] { color: var(--text); font-weight: 600; }
.foot-legal { border-top: 1px solid var(--hair); margin: 22px 0 0; padding-top: 16px; color: var(--text3); }

/* ---------- Device frames (drawn, generic; no Apple product imagery) ---------- */
.tv { background: #0B0A09; padding: 1.1%; border-radius: 14px; box-shadow: 0 0 0 1px #2C2925; }
.tv-screen { position: relative; isolation: isolate; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #131210; container-type: inline-size; }
.phone { background: #0B0A09; padding: 3%; border-radius: 16% / 7.4%; box-shadow: 0 0 0 1px #3A3631; }
.phone-screen { position: relative; aspect-ratio: 390 / 844; overflow: hidden; border-radius: 13.5% / 6.2%; background: var(--bg); container-type: inline-size; }
.ipad { background: #0B0A09; padding: 2.2%; border-radius: 4.6% / 6.4%; box-shadow: 0 0 0 1px #3A3631; }
.ipad-screen { position: relative; aspect-ratio: 1180 / 820; overflow: hidden; border-radius: 2.6% / 3.7%; background: var(--bg); container-type: inline-size; }
.stage .phone-screen { background: #131210; }

/* ---------- Drawn app UI (fictional content; values are the app's pt on its canvas) ---------- */
.tvui { --u: calc(100cqw / 1920); position: absolute; inset: 0; padding: calc(36 * var(--u)) calc(80 * var(--u)) 0; color: var(--text); font-family: var(--sans); letter-spacing: 0; background: var(--bg); }
.tv-tabs { display: flex; justify-content: center; gap: calc(8 * var(--u)); width: max-content; margin: 0 auto; padding: calc(8 * var(--u)); border-radius: calc(40 * var(--u)); background: color-mix(in srgb, var(--text) 7%, transparent); box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--hair); }
.tv-tabs span { font-size: calc(27 * var(--u)); font-weight: 500; color: var(--text2); padding: calc(10 * var(--u)) calc(26 * var(--u)); border-radius: calc(30 * var(--u)); }
.tv-tabs .sel { color: var(--text); background: color-mix(in srgb, var(--text) 14%, transparent); }
.tv-head { display: flex; align-items: baseline; gap: calc(28 * var(--u)); margin-top: calc(26 * var(--u)); }
.tv-clock { font-size: calc(48 * var(--u)); font-weight: 600; }
.tv-health { font-size: calc(23 * var(--u)); color: var(--text2); }
.tv-detail { display: flex; gap: calc(32 * var(--u)); align-items: center; margin-top: calc(20 * var(--u)); min-height: calc(120 * var(--u)); }
.tv-dmono { width: calc(96 * var(--u)); height: calc(96 * var(--u)); font-size: calc(40 * var(--u)); border-radius: calc(10 * var(--u)); }
.tv-dtitle { font-family: var(--serif); font-size: calc(48 * var(--u)); font-weight: 600; line-height: 1.05; margin: 0; }
.tv-dmeta { font-size: calc(25 * var(--u)); font-weight: 500; color: var(--text2); margin: calc(6 * var(--u)) 0 0; }
.tv-dsyn { font-size: calc(25 * var(--u)); color: var(--text2); margin: calc(4 * var(--u)) 0 0; }
.acc { color: var(--accent); }
.mono { display: inline-grid; place-items: center; flex: none; font-family: var(--sans); font-weight: 700; font-stretch: condensed; letter-spacing: 0; }
.guide { margin-top: calc(22 * var(--u)); --ch: calc(400 * var(--u)); --row: calc(72 * var(--u)); --gap: calc(6 * var(--u)); }
.g-ruler { display: flex; height: calc(40 * var(--u)); align-items: center; }
.g-day { width: var(--ch); flex: none; font-size: calc(23 * var(--u)); font-weight: 600; color: var(--text2); }
.g-times { position: relative; flex: 1; height: 100%; }
.g-t { position: absolute; top: 50%; transform: translateY(-50%); font-size: calc(23 * var(--u)); color: var(--text3); }
.g-flag { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 2; background: var(--accent); color: var(--on-accent); font-size: calc(23 * var(--u)); font-weight: 700; padding: calc(2 * var(--u)) calc(12 * var(--u)); border-radius: calc(20 * var(--u)); }
.g-body { position: relative; display: grid; gap: var(--gap); margin-top: calc(6 * var(--u)); }
.g-nowline-wrap { position: absolute; top: calc(-10 * var(--u)); bottom: 0; left: var(--ch); right: 0; pointer-events: none; }
.g-nowline { position: absolute; top: 0; bottom: 0; width: calc(4 * var(--u)); margin-left: calc(-2 * var(--u)); background: var(--accent); }
.g-row { display: flex; height: var(--row); }
.g-ch { width: var(--ch); flex: none; display: flex; align-items: center; gap: calc(16 * var(--u)); padding-right: calc(16 * var(--u)); }
.g-num { width: calc(56 * var(--u)); text-align: right; font-size: calc(23 * var(--u)); color: var(--text2); flex: none; }
.g-mono { width: calc(50 * var(--u)); height: calc(50 * var(--u)); font-size: calc(20 * var(--u)); border-radius: calc(8 * var(--u)); }
.g-name { font-size: calc(27 * var(--u)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-cells { position: relative; flex: 1; }
.g-cell { position: absolute; top: 0; bottom: 0; background: var(--surface); border-radius: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)); display: flex; flex-direction: column; justify-content: center; overflow: hidden; z-index: 1; }
.g-cell.clip { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.g-cell.cur { background-color: var(--raised); }
.g-title { font-size: calc(27 * var(--u)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.g-sub { font-size: calc(23 * var(--u)); color: var(--text3); white-space: nowrap; line-height: 1.2; }
.g-prog { display: block; height: calc(4 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--track); overflow: hidden; }
.g-prog > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.g-cell .g-prog { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0; } /* fill ends exactly at the now line (ilkeler.md 1-1) */
.g-cell.focus { background-color: var(--focus); color: var(--on-focus); }
.g-cell.focus .g-sub { color: color-mix(in srgb, var(--on-focus) 64%, transparent); }
.g-cell.focus .g-prog { background: color-mix(in srgb, var(--on-focus) 18%, transparent); }
.g-cell.focus .g-prog > span { background: var(--on-focus); }

/* iPad guide: same grid at iPad scale, follows the system appearance. */
.ipadui { --u: calc(100cqw / 1500); padding: calc(40 * var(--u)) calc(40 * var(--u)) 0; }
.ipadui .guide { --ch: calc(330 * var(--u)); }

/* Player with mini guide (glass panel over picture, as in the app). */
.player { padding: 0; background: #1E2030; }
.pl-picture { position: absolute; inset: 0; display: grid; place-items: center; }
.pl-label { font-size: calc(23 * var(--u)); color: rgb(255 255 255 / .40); letter-spacing: .02em; }
.pl-ghost { font-family: var(--serif); font-weight: 600; font-size: 30cqw; color: rgb(255 255 255 / .06); letter-spacing: -.04em; }
.pl-scrim { position: absolute; left: 0; right: 0; top: 0; height: 34%; background: linear-gradient(rgb(0 0 0 / .72), rgb(0 0 0 / .72) 62%, rgb(0 0 0 / 0)); }
.pl-info { position: absolute; left: calc(80 * var(--u)); top: calc(56 * var(--u)); color: #FFFFFF; }
.pl-ch { font-size: calc(25 * var(--u)); font-weight: 600; color: rgb(255 255 255 / .85); }
.pl-title { font-family: var(--serif); font-size: calc(57 * var(--u)); font-weight: 600; margin: calc(4 * var(--u)) 0; line-height: 1.1; }
.pl-meta { font-size: calc(25 * var(--u)); color: rgb(255 255 255 / .85); margin: 0; }
.acc-pic { color: #FFB23E; }
.pl-panel { position: absolute; right: calc(60 * var(--u)); bottom: calc(60 * var(--u)); width: calc(640 * var(--u)); padding: calc(16 * var(--u)); border-radius: calc(32 * var(--u)); background: rgb(19 18 16 / .80); -webkit-backdrop-filter: blur(calc(30 * var(--u))) saturate(160%); backdrop-filter: blur(calc(30 * var(--u))) saturate(160%); box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgb(242 238 230 / .14); display: grid; gap: calc(6 * var(--u)); }
.mg-row { display: flex; align-items: center; gap: calc(16 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(18 * var(--u)); }
.mg-row.sel { background: var(--focus); color: var(--on-focus); }
.mg-row.sel .g-num, .mg-row.sel .mg-prog-t, .mg-row.sel .mg-next { color: color-mix(in srgb, var(--on-focus) 64%, transparent); }
.mg-row.sel .g-prog { background: color-mix(in srgb, var(--on-focus) 18%, transparent); } .mg-row.sel .g-prog > span { background: var(--on-focus); }
.mg-mono { width: calc(64 * var(--u)); height: calc(64 * var(--u)); font-size: calc(25 * var(--u)); border-radius: calc(10 * var(--u)); }
.mg-txt { display: grid; flex: 1; min-width: 0; }
.mg-name { font-size: calc(27 * var(--u)); font-weight: 600; }
.mg-prog-t { font-size: calc(25 * var(--u)); color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-prog { margin: calc(8 * var(--u)) 0 calc(6 * var(--u)); }
.mg-next { font-size: calc(23 * var(--u)); color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* iPhone UI (390 pt canvas) */
.phui { --u: calc(100cqw / 390); position: absolute; inset: 0; color: var(--text); font-family: var(--sans); letter-spacing: -.01em; background: var(--bg); }
.ph-status { height: calc(54 * var(--u)); padding: calc(19 * var(--u)) calc(36 * var(--u)) 0; font-size: calc(17 * var(--u)); font-weight: 600; }
.ph-large { font-size: calc(34 * var(--u)); font-weight: 700; margin: calc(6 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)); letter-spacing: -.02em; }
.ph-chips { display: flex; gap: calc(8 * var(--u)); padding: 0 calc(16 * var(--u)) calc(8 * var(--u)); }
.ph-chips span { font-size: calc(15 * var(--u)); font-weight: 500; padding: calc(7 * var(--u)) calc(14 * var(--u)); border-radius: calc(17 * var(--u)); background: var(--surface); color: var(--text2); }
.ph-chips .sel { background: var(--focus); color: var(--on-focus); }
.ph-list { list-style: none; margin: 0; padding: 0; }
.ph-list li { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); position: relative; }
.ph-list li + li::before { content: ""; position: absolute; top: 0; left: calc(102 * var(--u)); right: 0; height: 1px; background: var(--hair); }
.ph-num { width: calc(30 * var(--u)); text-align: right; font-size: calc(13 * var(--u)); color: var(--text3); flex: none; }
.ph-mono { width: calc(44 * var(--u)); height: calc(44 * var(--u)); font-size: calc(17 * var(--u)); border-radius: calc(8 * var(--u)); }
.ph-txt { display: grid; flex: 1; min-width: 0; }
.ph-name { font-size: calc(17 * var(--u)); font-weight: 600; }
.ph-prog-t { font-size: calc(15 * var(--u)); color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-bar { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(5 * var(--u)); }
.ph-bar .g-prog { flex: 1; height: calc(3 * var(--u)); }
.ph-left { font-size: calc(13 * var(--u)); color: var(--text3); }
.ph-tabbar { position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); bottom: calc(26 * var(--u)); height: calc(62 * var(--u)); border-radius: calc(31 * var(--u)); display: flex; justify-content: space-around; align-items: center; background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(calc(14 * var(--u))) saturate(180%); backdrop-filter: blur(calc(14 * var(--u))) saturate(180%); box-shadow: inset 0 0 0 1px var(--hair), 0 calc(6 * var(--u)) calc(20 * var(--u)) rgb(0 0 0 / .18); }
.ph-tabbar span { font-size: calc(11 * var(--u)); font-weight: 600; color: var(--text2); padding: calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(22 * var(--u)); }
.ph-tabbar .sel { color: var(--accent); background: var(--track); }
.ph-video { margin-top: calc(4 * var(--u)); aspect-ratio: 16 / 9; background: #0B0A09; display: grid; place-items: center; overflow: hidden; }
.ph-video .pl-label { font-size: calc(23 * var(--u)); color: rgb(255 255 255 / .40); letter-spacing: .02em; }
.pl-ghost { font-size: 34cqw; }
.why { margin: calc(16 * var(--u)); padding: calc(18 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--surface); }
.why-h { font-size: calc(17 * var(--u)); font-weight: 600; margin: 0 0 calc(6 * var(--u)); display: flex; gap: calc(10 * var(--u)); align-items: flex-start; line-height: 1.3; }
.why-ic { flex: none; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: var(--critical); color: var(--bg); display: grid; place-items: center; font-size: calc(14 * var(--u)); font-weight: 800; }
.why-p { font-size: calc(15 * var(--u)); color: var(--text2); margin: 0 0 calc(14 * var(--u)) calc(32 * var(--u)); line-height: 1.35; }
.why-btns { display: flex; gap: calc(8 * var(--u)); margin-left: calc(32 * var(--u)); }
.btn-n { font-size: calc(15 * var(--u)); font-weight: 600; padding: calc(8 * var(--u)) calc(14 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--raised); }
.si { margin: calc(20 * var(--u)) calc(16 * var(--u)) 0; }
.si-h { font-size: calc(13 * var(--u)); font-weight: 600; text-transform: uppercase; letter-spacing: .075em; color: var(--text2); margin: 0 0 calc(6 * var(--u)) calc(4 * var(--u)); }
.si dl { margin: 0; display: grid; grid-template-columns: auto 1fr; background: var(--surface); border-radius: calc(12 * var(--u)); padding: 0 calc(16 * var(--u)); font-size: calc(15 * var(--u)); }
.si dt, .si dd { margin: 0; padding: calc(11 * var(--u)) 0; border-bottom: 1px solid var(--hair); }
.si dt { color: var(--text2); } .si dd { text-align: right; }
.si dt:last-of-type, .si dd:last-of-type { border-bottom: 0; }

/* ---------- Motion. Scroll-driven CSS only (production CSP has script-src 'none'). ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
    @keyframes reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
    .hero-phone { animation: rise linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
    @keyframes rise { from { transform: translateY(14%); } to { transform: none; } }
    .wide .tv, .plat-ipad { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes settle { from { transform: scale(.94); } to { transform: none; } }
  }
}

/* ---------- Inner pages: support, legal ---------- */
.page { padding-block: clamp(48px, 7vw, 88px) clamp(72px, 9vw, 120px); }
.page-head .d2 { margin-bottom: .3em; }
.mp-topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; }
.mp-topics a { display: grid; gap: 4px; padding: 22px; border-radius: 18px; background: var(--surface); color: var(--text); }
.mp-topics a:hover { text-decoration: none; background: var(--raised); }
.mp-topics b { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.016em; }
.mp-topics span { color: var(--text2); font-size: .9375rem; line-height: 1.4; }
.mp-article { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; margin-top: clamp(48px, 6vw, 72px); }
.mp-toc { position: sticky; top: calc(var(--nav-h) + 20px); align-self: start; display: grid; gap: 2px; font-size: .875rem; max-height: calc(100vh - var(--nav-h) - 40px); overflow-y: auto; }
.mp-toc p { font-weight: 600; margin: 0 0 8px; }
.mp-toc a { color: var(--text2); padding: 5px 0 5px 12px; border-left: 2px solid var(--hair); }
.mp-toc a:hover { color: var(--text); text-decoration: none; }
.prose { max-width: 680px; font-size: 1.0625rem; line-height: 1.6; }
.prose h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.018em; margin: 1.6em 0 .5em; }
.prose h2:first-child { margin-top: 0; }
.prose li { margin: .3em 0; }
.prose code { font: .9em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface); padding: 2px 6px; border-radius: 6px; }
.callout { background: var(--surface); border-radius: 18px; padding: 20px 24px; margin-top: 32px; color: var(--text2); }
.callout b { color: var(--text); }
.prose h3 { font-size: 1.1875rem; margin: 1.4em 0 .4em; }
.prose a { text-decoration: underline; text-underline-offset: .18em; }
.prose section { scroll-margin-top: calc(var(--nav-h) + 12px); }
.prose .callout { margin-top: 40px; }
.callout { background: var(--surface); border-radius: 18px; padding: 20px 24px; margin-top: 32px; color: var(--text2); }
.callout b { color: var(--text); }
.legal { max-width: 680px; margin: 0 auto; }
.legal-sum { font-size: 1.3125rem; line-height: 1.45; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 22px 0; margin: 28px 0 40px; letter-spacing: -.016em; }
.lnav a[aria-current="page"] { color: var(--text); font-weight: 600; }
.table-wrap { overflow-x: auto; margin: 1.2em 0; }
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
th, td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hair); }
th { font-weight: 600; }

/* ---------- Layout breakpoints (734 / 1068) ---------- */
@media (max-width: 1068px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile.span2 { grid-column: span 2; }
}
@media (max-width: 734px) {
  :root { --gutter: 16px; }
  .lnav-links, .lnav .lang { display: none; }
  .lnav-menu { display: block; }
  .lnav-in { gap: 14px; }
  .appicon { width: 88px; height: 88px; }
  /* Small screens: crop the TV instead of shrinking it, so the guide stays readable. */
  .hero-devices { width: 100%; overflow: clip; padding: 0 0 44% var(--gutter); }
  .hero-tv { width: 140%; }
  .hero-phone { width: 32%; right: var(--gutter); bottom: 0; }
  .phone.hero-phone { padding: .96%; }
  .tv-player { width: 150%; margin-left: -50%; }
  .wide:has(.tv-player) { width: 100%; overflow: clip; padding-right: var(--gutter); }
  .trio, .stats { grid-template-columns: 1fr; gap: 32px; }
  .split, .split.rev { grid-template-columns: 1fr; }
  .split-dev { width: 68%; margin-inline: auto; }
  .tiles { grid-template-columns: 1fr; }
  .tile.span2 { grid-column: auto; grid-template-columns: 1fr; }
  .tile { padding: 28px; min-height: 0; border-radius: 22px; }
  .si-big { min-width: 0; }
  .compare { grid-template-columns: 1fr; gap: 8px; }
  .plat-ipad { width: 100%; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .mp-topics { grid-template-columns: 1fr; }
  .mp-article { grid-template-columns: 1fr; gap: 24px; }
  .mp-toc { position: static; max-height: none; }
}

/* Drawn Premium screen (fallback for the iphone-premium slot). Plan prices are deliberately not drawn. */
.pm-title { font-family: var(--serif); font-size: calc(34 * var(--u)); font-weight: 600; margin: calc(34 * var(--u)) calc(24 * var(--u)) calc(4 * var(--u)); letter-spacing: -.01em; }
.pm-sub { font-size: calc(17 * var(--u)); color: var(--text2); margin: 0 calc(24 * var(--u)) calc(22 * var(--u)); }
.pm-list { list-style: none; margin: 0 calc(16 * var(--u)); padding: 0; background: var(--surface); border-radius: calc(16 * var(--u)); }
.pm-list li { font-size: calc(17 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)); border-top: 1px solid var(--hair); }
.pm-list li:first-child { border-top: 0; }
.pm-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--u)); margin: calc(20 * var(--u)) calc(16 * var(--u)) 0; }
.pm-plans span { font-size: calc(15 * var(--u)); font-weight: 600; text-align: center; padding: calc(16 * var(--u)) 0; border-radius: calc(14 * var(--u)); background: var(--surface); color: var(--text2); }
.pm-plans .sel { background: var(--focus); color: var(--on-focus); }
.pm-cta { margin: calc(22 * var(--u)) calc(16 * var(--u)) 0; padding: calc(15 * var(--u)) 0; border-radius: calc(26 * var(--u)); background: var(--accent); color: var(--on-accent); text-align: center; font-size: calc(17 * var(--u)); font-weight: 600; }
.pm-restore { text-align: center; font-size: calc(15 * var(--u)); color: var(--accent); margin: calc(14 * var(--u)) 0 0; }

/* generated: channel monogram tones and position classes */
.t-brick{background:var(--t-brick-f);color:var(--t-brick-l)}.t-tobacco{background:var(--t-tobacco-f);color:var(--t-tobacco-l)}.t-olive{background:var(--t-olive-f);color:var(--t-olive-l)}.t-pine{background:var(--t-pine-f);color:var(--t-pine-l)}.t-teal{background:var(--t-teal-f);color:var(--t-teal-l)}.t-steel{background:var(--t-steel-f);color:var(--t-steel-l)}.t-indigo{background:var(--t-indigo-f);color:var(--t-indigo-l)}.t-violet{background:var(--t-violet-f);color:var(--t-violet-l)}
.cw12_5{width:calc(12.5% - var(--gap))}.cw16_67{width:calc(16.67% - var(--gap))}.cw20_83{width:calc(20.83% - var(--gap))}.cw25_0{width:calc(25.0% - var(--gap))}.cw33_33{width:calc(33.33% - var(--gap))}.cw37_5{width:calc(37.5% - var(--gap))}.cw41_67{width:calc(41.67% - var(--gap))}.cw45_83{width:calc(45.83% - var(--gap))}.cw50_0{width:calc(50.0% - var(--gap))}.cw75_0{width:calc(75.0% - var(--gap))}.l0_0{left:0.0%}.l12_5{left:12.5%}.l20_83{left:20.83%}.l25_0{left:25.0%}.l33_33{left:33.33%}.l39_17{left:39.17%}.l41_67{left:41.67%}.l50_0{left:50.0%}.l54_17{left:54.17%}.l58_33{left:58.33%}.l62_5{left:62.5%}.l75_0{left:75.0%}.l83_33{left:83.33%}.l87_5{left:87.5%}.w23_33{width:23.33%}.w35_56{width:35.56%}.w37_78{width:37.78%}.w52_22{width:52.22%}.w55_0{width:55.0%}.w78_33{width:78.33%}.w94_0{width:94.0%}