/* Trex IPTV - trex-iptv.app - "Cinema" theme with the "Daylight" plan cards.
   site.css = tokens, base, shell (header, menu, footer, icons), buttons, shared components, plan cards, home page.
   Loaded on every page; pages.css and shop.css add to it (render_document 'styles' option). Mobile first.
   Strict CSP: no inline styles anywhere. Class reference and rules for colleagues: design/THEME-GUIDE.md.
   Breakpoints: 600 tablet, 900 inline nav, 1024 desktop hero, 1080 four-up grids. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-latin-v25.woff2) 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}
/* "Archivo Fallback": the system sans (Arial, or its metric twins) with Archivo's vertical metrics and its glyphs scaled
   to Archivo's width at each stretch the site uses (measured in Chrome: text 103% = 101% of Arial, bold 99.5%; display
   faces at 62-91% = 90.5% of Arial Bold, 92-99% = 93%). Text laid out in it before the woff2 arrives keeps its line
   count, so the swap does not move the page (font-display: swap stays). Nothing is downloaded for these faces. */
@font-face{font-family:"Archivo Fallback";font-weight:100 550;font-stretch:100% 125%;src:local("Arial"),local("Liberation Sans"),local("Roboto");size-adjust:101%;ascent-override:88%;descent-override:21%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";font-weight:551 900;font-stretch:100% 125%;src:local("Arial Bold"),local("Liberation Sans Bold"),local("Roboto Bold");size-adjust:99.5%;ascent-override:88%;descent-override:21%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";font-weight:100 900;font-stretch:92% 99%;src:local("Arial Bold"),local("Liberation Sans Bold"),local("Roboto Bold");size-adjust:93%;ascent-override:88%;descent-override:21%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";font-weight:100 900;font-stretch:62% 91%;src:local("Arial Bold"),local("Liberation Sans Bold"),local("Roboto Bold");size-adjust:90.5%;ascent-override:88%;descent-override:21%;line-gap-override:0%}

/* ---------- tokens ---------- */
:root{
  /* surfaces: midnight ink, never flat black */
  --ink-0:#03060d;--ink-1:#060b17;--ink-2:#0a1222;--ink-3:#0f192d;--ink-4:#17243f;--navy:#06274f;
  /* text on ink: headings, body, small labels (all AA on every ink surface) */
  --text:#f2f5fb;--text-2:#c5cee0;--text-3:#95a2bd;
  /* the one accent, sampled from the wordmark; amber is its glow */
  --gold-1:#fde2a7;--gold-2:#fbd07d;--gold-3:#d79e51;--gold-ink:#1b1204;--amber:#e59744;
  /* secondary light, sampled from the television */
  --blue-1:#b9d6f2;--blue-2:#85bae4;--blue-3:#2f7bd6;
  --ok:#7fd9a3;--bad:#ff9a8f;
  --line:rgba(150,180,235,.14);--line-2:rgba(150,180,235,.26);--gold-line:rgba(251,208,125,.4);
  /* the light stage (plan cards): warm sand, white cards, dark ink */
  --sand:#ece5d5;--paper:#fff;--s-ink:#15130f;--s-ink-2:#47433a;--s-ink-3:#676154;--s-line:#ddd5c1;--s-line-2:#b3a98f;--s-gold:#f0b23a;--s-gold-ink:#7a4f00;--s-wash:#fbefd0;
  --font:"Archivo","Archivo Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r-sm:10px;--r-md:14px;--r-lg:22px;--r-xl:28px;
  --wrap:1200px;--gut:20px;--head-h:72px;--stage-gap:clamp(8px,1.2vw,16px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --glass:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:92px;background:var(--ink-1);color-scheme:dark;overflow-x:hidden}
body{margin:0;font:400 1rem/1.65 var(--font);font-stretch:103%;letter-spacing:0;color:var(--text-2);background:var(--ink-1);-webkit-font-smoothing:antialiased;overflow-x:clip}
main{display:block;counter-reset:sec}
:where(h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote,fieldset,legend){margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
fieldset{border:0;min-width:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
p{text-wrap:pretty}
:where(p,li,dd,td,label,figcaption) a{color:var(--gold-2);text-decoration:underline;text-decoration-color:rgba(251,208,125,.5);text-underline-offset:3px}
:where(p,li,dd,td,label,figcaption) a:hover{color:var(--gold-1);text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:6px}
::selection{background:rgba(251,208,125,.3);color:#fff}
h1,h2,h3,legend{color:var(--text);font-weight:800;font-stretch:86%;line-height:1.08;letter-spacing:0;text-wrap:balance}
h1{font-size:clamp(2rem,1.3rem + 3.3vw,3.15rem)}
h2{font-size:clamp(1.65rem,1.25rem + 1.9vw,2.5rem)}
h3{font-size:1.125rem;font-weight:700;font-stretch:94%;line-height:1.25}
code{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;font-size:.88em}
.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}
.narrow{max-width:640px;padding-block:56px}
.narrow>*+*{margin-top:16px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico-sm{width:18px;height:18px;stroke-width:1.9}
.sr,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.is-hidden{display:none}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:10px;background:var(--gold-2);color:var(--gold-ink);font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.lead{font-size:1.0625rem;line-height:1.6;color:#d6ddec}

/* ---------- buttons: .btn (gold) | .btn-ghost (outline) | .btn-sm .btn-lg .btn-block | .is-off ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:8px 24px;border:0;border-radius:var(--r-md);background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 42%,var(--gold-3));color:var(--gold-ink);font:700 1rem/1.15 var(--font);font-stretch:96%;text-align:center;text-decoration:none;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(110,62,0,.4),0 12px 30px -12px rgba(229,151,68,.7);transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s,background-color .2s}
.btn .ico{width:18px;height:18px;stroke-width:2;transition:transform .2s var(--ease)}
.btn:hover{color:var(--gold-ink);transform:translateY(-2px);filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(110,62,0,.4),0 18px 40px -12px rgba(229,151,68,.85)}
.btn:hover .ico{transform:translateX(3px)}
.btn:active{transform:translateY(0);filter:brightness(.97)}
.btn-ghost{background:rgba(10,18,34,.62);color:var(--text);box-shadow:inset 0 0 0 1.5px rgba(251,208,125,.58),inset 0 1px 0 rgba(255,255,255,.08)}
.btn-ghost:hover{color:#fff;background:rgba(251,208,125,.14);filter:none;box-shadow:inset 0 0 0 1.5px var(--gold-2)}
.btn-sm{min-height:38px;padding:6px 16px;border-radius:11px;font-size:.9375rem}
.btn-lg{min-height:58px;padding:10px 28px;font-size:1.0625rem}
.btn-block{width:100%}
.btn[disabled],.btn.is-off{opacity:.55;cursor:not-allowed;transform:none;filter:none}
.cta-row{display:grid;gap:10px}
@media (min-width:480px){.cta-row{display:flex;flex-wrap:wrap;gap:12px}}

/* ---------- header: floating glass bar (the page's only backdrop-filter) ---------- */
.site-header{position:sticky;top:0;z-index:60;height:var(--head-h);padding-top:10px;pointer-events:none}
.head-row{pointer-events:auto;position:relative;display:flex;align-items:center;gap:8px;height:52px;padding:0 7px 0 9px;border:1px solid var(--line);border-radius:17px;background:rgba(7,13,27,.74);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 34px -16px rgba(0,0,0,.8)}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-right:auto;color:var(--text);text-decoration:none;font:800 1.1875rem/1 var(--font);font-stretch:88%;letter-spacing:.01em;white-space:nowrap}
.brand-mark{display:block;flex:none;width:34px;height:34px;background:url(/favicon-96x96.png) center/cover no-repeat;border-radius:9px;box-shadow:0 4px 14px -4px rgba(229,151,68,.7)}
.brand-accent{color:var(--gold-2)}
/* phones: the menu button and the Order button are 44px tap targets inside the 52px bar */
.head-cta{min-height:44px}
.nav-toggle{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:rgba(255,255,255,.08);color:var(--text);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line-2)}
.nav-toggle .ico{grid-area:1/1;width:20px;height:20px;stroke-width:1.9}
.nav-toggle .ico-close,.is-open .nav-toggle .ico-open{display:none}
.is-open .nav-toggle .ico-close{display:block}
.is-open .nav-toggle{color:var(--gold-2);box-shadow:inset 0 0 0 1px var(--gold-line)}
/* phones: the six links are a sheet under the bar, opened by the button (site.js); nojs.css shows them without it */
.main-nav{display:none;position:absolute;top:calc(100% + 8px);left:-1px;right:-1px;padding:10px;border:1px solid var(--line-2);border-radius:20px;background:#080e1d;box-shadow:0 30px 80px -20px #000,inset 0 1px 0 rgba(255,255,255,.07)}
.is-open .main-nav{display:block;animation:sheet .22s var(--ease)}
@keyframes sheet{from{opacity:0;transform:translateY(-8px)}}
.main-nav ul{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.main-nav a{display:flex;align-items:center;min-height:50px;padding:0 16px;border-radius:12px;background:rgba(255,255,255,.05);color:var(--text);text-decoration:none;font:650 1.0625rem/1 var(--font);font-stretch:92%}
.main-nav a:hover{color:#fff;background:rgba(255,255,255,.09)}
.main-nav a[aria-current=page]{color:var(--gold-2);box-shadow:inset 0 0 0 1px var(--gold-line)}
@media (max-width:359px){:root{--gut:12px}.brand{gap:8px;font-size:1.0625rem}.brand-mark{width:30px;height:30px}}
@media (min-width:600px){:root{--gut:32px}}
@media (min-width:900px){
  .head-row{height:56px;padding:0 9px 0 12px;gap:14px}
  .head-cta{min-height:38px}
  .nav-toggle{display:none}
  .main-nav,.is-open .main-nav{display:block;position:static;padding:0;border:0;border-radius:0;background:none;box-shadow:none;animation:none}
  .main-nav ul{display:flex;gap:2px}
  .main-nav a{min-height:36px;padding:0 13px;border-radius:10px;background:none;color:var(--text-2);font-size:.9375rem;font-weight:550;font-stretch:100%}
  .main-nav a:hover{color:var(--text);background:rgba(255,255,255,.07)}
  .main-nav a[aria-current=page]{color:var(--gold-2);box-shadow:none;background:rgba(251,208,125,.09)}
}

/* ---------- footer ---------- */
.site-footer{position:relative;overflow:hidden;padding:48px 0 28px;background:var(--ink-0);font-size:.9375rem}
.site-footer::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--gold-3) 22%,var(--blue-3) 70%,transparent);opacity:.7}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 20px}
.foot-brand{grid-column:1/-1}
.foot-brand .brand{font-size:1.375rem}
.foot-brand .brand-mark{width:42px;height:42px}
.foot-title{margin-bottom:12px;color:var(--text-3);font:700 .6875rem/1 var(--font);font-stretch:108%;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.foot-nav li a{display:inline-block;padding:10px 0;color:var(--text-2);text-decoration:none}
.foot-nav li a:hover{color:var(--gold-2)}
.foot-mark{margin-top:40px;font:900 clamp(4.4rem,23vw,17rem)/.8 var(--font);font-stretch:62%;text-transform:uppercase;white-space:nowrap;text-align:center;word-spacing:.12em;color:transparent;-webkit-text-stroke:1.5px rgba(251,208,125,.62);-webkit-mask-image:linear-gradient(180deg,#000 25%,transparent 98%);mask-image:linear-gradient(180deg,#000 25%,transparent 98%);-webkit-user-select:none;user-select:none}
.foot-base{padding-top:20px;border-top:1px solid var(--line);color:var(--text-3);font-size:.8125rem}
@media (min-width:760px){.foot-grid{grid-template-columns:2fr 1fr 1fr}.foot-brand{grid-column:auto}}

/* ---------- section bands and heads ----------
   .band (ink) | .band--tint (navy wash + hairline) | .band--navy (blue light) | .band--deep | .band--stage (holds a .stage) */
.band{position:relative;padding:clamp(42px,5.6vw,80px) 0}
.band--tint{background:linear-gradient(180deg,var(--ink-2),#080f1e);box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}
.band--navy{background:radial-gradient(70% 90% at 88% 0%,rgba(47,123,214,.2),transparent 70%),linear-gradient(180deg,#081b36,var(--ink-2));box-shadow:inset 0 1px 0 var(--line-2),inset 0 -1px 0 var(--line)}
.band--deep{background:var(--ink-0)}
.band--stage{padding:var(--stage-gap) 0}
.idx{display:flex;align-items:center;margin-bottom:14px;color:var(--gold-2);font:700 .75rem/1 var(--font);font-stretch:110%;letter-spacing:.16em;text-transform:uppercase}
.idx::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);padding-right:40px;margin-right:10px;color:var(--text);letter-spacing:.08em;background:linear-gradient(var(--line-2),var(--line-2)) right center/30px 1px no-repeat}
/* a section without a kicker label shows the plain number: no rule hanging in the air */
.idx:empty::before{padding-right:0;margin-right:0;background:none}
.sec-head{max-width:46rem;margin-bottom:clamp(26px,4vw,44px)}
.sec-intro{max-width:40rem;margin-top:16px;font-size:1.0625rem}
@media (min-width:960px){
  .sec-head--row,.sec-head--faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px 64px;align-items:start;max-width:none}
  .sec-head--row{align-items:end}
  .sec-head--row>.sec-intro{margin:0 0 4px}
}
:where(.prose,.block,.tile,.brief)>*+*{margin-top:1rem}
.prose>h2+p{margin-top:20px}
.prose>p{max-width:68ch}
.prose .big{font-size:clamp(1.125rem,1rem + .55vw,1.3125rem);line-height:1.55;color:var(--text)}
.split,.trio{display:grid;gap:36px}
@media (min-width:940px){
  .split{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:72px;align-items:center}
  .split--flip>:first-child{order:2}
  .trio{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:28px 72px;align-items:start}
  .trio>:nth-child(2){grid-column:2;grid-row:1/span 2}
}

/* ---------- shared components ---------- */
/* checked list (ul.list) and numbered list (ol.list) */
.list{display:grid;gap:10px}
.list li{position:relative;padding-left:30px}
ul.list li::before{content:"";position:absolute;left:4px;top:.5em;width:12px;height:7px;border:solid var(--gold-2);border-width:0 0 2px 2px;transform:rotate(-45deg)}
ol.list{counter-reset:li}
ol.list li{counter-increment:li;padding-left:40px}
ol.list li::before{content:counter(li);position:absolute;left:0;top:.1em;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font:700 .8125rem/1 var(--font);color:var(--gold-2);box-shadow:inset 0 0 0 1px var(--gold-line)}
/* tile: the glass card; a leading .ico becomes a chip. .tile--blue = television-blue light */
.tile,.brief{position:relative;overflow:hidden;isolation:isolate;padding:24px 22px 26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.tile>.ico:first-child,.brief>.ico:first-child,.choice>.ico:first-child,.review-none>.ico:first-child{box-sizing:content-box;width:22px;height:22px;padding:11px;margin-bottom:18px;border-radius:13px;color:var(--gold-2);background:rgba(251,208,125,.09);box-shadow:inset 0 0 0 1px rgba(251,208,125,.26)}
.tile--blue>.ico:first-child,.brief--blue>.ico:first-child{color:var(--blue-2);background:rgba(133,186,228,.1);box-shadow:inset 0 0 0 1px rgba(133,186,228,.28)}
.tile::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(70% 90% at 100% 0%,rgba(251,208,125,.07),transparent 60%)}
.tile--blue::after{background:radial-gradient(70% 90% at 100% 0%,rgba(47,123,214,.18),transparent 62%)}
.tile h2,.brief h2{font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem)}
.duo{display:grid;gap:14px}
@media (min-width:720px){.tile,.brief{padding:30px 30px 32px}}
@media (min-width:900px){.duo{grid-template-columns:minmax(0,9fr) minmax(0,11fr)}.duo--even{grid-template-columns:1fr 1fr}.duo--brief{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
/* card: plain raised panel (forms, summaries) */
.card{padding:22px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
@media (min-width:620px){.card{padding:28px}}
/* callout: one highlighted paragraph with an icon */
.callout{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;margin-top:26px;padding:20px;border:1px solid var(--line);border-left:2px solid var(--gold-2);border-radius:6px var(--r-lg) var(--r-lg) 6px;background:linear-gradient(90deg,rgba(251,208,125,.07),rgba(255,255,255,.02) 55%)}
.callout .ico{color:var(--gold-2);margin-top:2px}
@media (min-width:1000px){.callout{padding:24px 28px}}
/* notices: .notice (neutral, gold) | .alert (problem) | .alert.ok (success) */
.notice,.alert{margin:16px 0;padding:14px 18px;border:1px solid rgba(255,154,143,.45);border-radius:var(--r-md);background:rgba(255,154,143,.09);color:#ffd9d3}
.notice{border-color:var(--gold-line);background:rgba(251,208,125,.08);color:var(--gold-1)}
.alert.ok{border-color:rgba(127,217,163,.45);background:rgba(127,217,163,.09);color:#cdf3dc}
/* tables: wrap any table in .table-wrap */
.table-wrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(255,255,255,.02)}
table{width:100%;border-collapse:collapse;font-size:.9688rem}
caption{caption-side:bottom;padding:10px 16px;text-align:left;color:var(--text-3);font-size:.875rem}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
thead th{background:var(--ink-3);color:var(--text-3);font:700 .75rem/1.3 var(--font);font-stretch:108%;letter-spacing:.1em;text-transform:uppercase}
tbody th{color:var(--text);font-weight:650}
tbody tr:last-child>*{border-bottom:0}
/* question / answer card (home FAQ, /faq, /plans) */
.qa{padding:20px 20px 22px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(255,255,255,.03)}
.qa h3{color:var(--text)}
.qa p{margin-top:10px}
.qa:target{border-color:var(--gold-line);background:rgba(251,208,125,.05)}
.faq{display:grid;gap:12px}
/* breadcrumbs + inner page head (works as .page-head.wrap or .page-head > .wrap) */
.page-head{position:relative;isolation:isolate;padding:clamp(18px,3.6vw,40px) 0 clamp(24px,3.6vw,40px)}
.page-head::before{content:"";position:absolute;z-index:-1;top:calc(var(--head-h)*-1);bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:radial-gradient(60% 130% at 0% 0%,rgba(6,39,79,.8),transparent 70%),radial-gradient(40% 120% at 100% 0%,rgba(229,151,68,.1),transparent 70%),linear-gradient(180deg,var(--ink-2),var(--ink-1));box-shadow:inset 0 -1px 0 var(--line)}
.page-head h1{max-width:19em}
.page-head .lead{max-width:44em;margin-top:14px}
.crumbs{margin-bottom:16px;font-size:.875rem;color:var(--text-3)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 8px}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line-2)}
.crumbs a{color:var(--text-2);text-decoration:none}
.crumbs a:hover{color:var(--gold-2)}
.crumbs [aria-current]{color:var(--gold-2)}
/* default content page: .content > section.block (h2, text, lists, component) */
.content{padding-bottom:clamp(36px,6vw,72px)}
.block{padding:clamp(28px,4vw,46px) 0;border-top:1px solid var(--line)}
.content>.block:first-child{border-top:0}
.block>h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.05rem)}
.block>:where(h2,p,ul,ol,.faq,.callout,.notice,.alert){max-width:46rem}
.block>.stage,.block>.table-wrap,.block>figure{margin-top:24px}
.media img{width:100%;border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--line-2),0 40px 80px -40px #000}
/* related pages: link tiles */
.related{padding:clamp(34px,5vw,56px) 0}
.content>.related{border-top:1px solid var(--line);padding-bottom:0}
.related h2{font-size:1.25rem}
.related ul{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.related li{flex:1 1 250px}
.related a{display:flex;align-items:center;justify-content:space-between;gap:12px;height:100%;min-height:54px;padding:8px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(255,255,255,.03);color:var(--text);text-decoration:none;font-weight:550;transition:border-color .2s,background-color .2s}
/* the link text is the page's own anchor wording; only its first letter is drawn as a capital (the text is unchanged) */
.related__t{display:block;min-width:0}
.related__t::first-letter{text-transform:uppercase}
.related a::after{content:"";flex:none;width:8px;height:8px;border:solid var(--gold-2);border-width:1.8px 1.8px 0 0;transform:rotate(45deg);transition:transform .2s var(--ease)}
.related a:hover{border-color:var(--gold-line);background:rgba(251,208,125,.06);color:var(--text)}
.related a:hover::after{transform:translateX(3px) rotate(45deg)}
/* closing call-to-action band */
.cta-band{padding:0 0 clamp(48px,7vw,84px)}
.cta-band__in{display:grid;gap:22px;padding:clamp(26px,4.4vw,48px);border:1px solid var(--gold-line);border-radius:var(--r-xl);background:radial-gradient(120% 160% at 100% 0%,rgba(229,151,68,.22),transparent 55%),radial-gradient(90% 140% at 0% 100%,rgba(47,123,214,.24),transparent 60%),var(--ink-3)}
.cta-band__line{color:var(--text);font:800 clamp(1.5rem,1.1rem + 1.9vw,2.4rem)/1.1 var(--font);font-stretch:86%;text-wrap:balance}
@media (min-width:900px){.cta-band__in{grid-template-columns:1fr auto;align-items:center}}

/* ---------- the light stage and the plan cards ("Daylight" pricing inside Cinema) ----------
   .stage.stage--sand = warm sand panel with large corners on the dark page. Home: .band--stage > .stage > .wrap >
   .stage-head + .plans-wrap. Elsewhere component_price_table() prints .stage.stage--inline > .plans-wrap. */
.stage{position:relative;width:min(100% - var(--stage-gap)*2,1560px);margin-inline:auto;border-radius:clamp(22px,3.2vw,40px)}
.band--stage>.stage{padding-block:clamp(42px,5.6vw,80px) clamp(34px,4.4vw,60px)}
.stage--inline{width:auto;padding:clamp(14px,2.6vw,28px);border-radius:var(--r-xl)}
.stage--sand{background:var(--sand);color:var(--s-ink-2);color-scheme:light}
.stage--sand :where(h2,h3){color:var(--s-ink)}
.stage--sand :where(p,li) a{color:var(--s-gold-ink);text-decoration-color:currentColor}
.stage--sand :focus-visible{outline-color:var(--s-ink)}
.stage--sand .idx{color:var(--s-gold-ink)}
.stage--sand .idx::before{color:var(--s-ink);background-image:linear-gradient(var(--s-line-2),var(--s-line-2))}
.stage--sand .btn-ghost{background:var(--paper);color:var(--s-ink);box-shadow:inset 0 0 0 1.5px var(--s-ink)}
.stage--sand .btn-ghost:hover{background:var(--s-ink);color:#fff;box-shadow:inset 0 0 0 1.5px var(--s-ink)}
.stage--sand .notice{border-color:var(--s-line-2);background:var(--s-wash);color:var(--s-ink)}
.stage-head{display:grid;gap:18px 48px;margin-bottom:clamp(26px,4vw,46px)}
.stage-intro p{max-width:66ch}
.stage-intro p+p{margin-top:14px}
.stage-intro .lede{color:var(--s-ink);font-size:clamp(1.0625rem,1rem + .45vw,1.25rem);line-height:1.5}
@media (min-width:960px){.stage-head{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start}}
.plans{display:grid;gap:12px}
.plan{position:relative;display:grid;grid-template-columns:1fr auto;column-gap:12px;align-content:start;grid-template-areas:"title title" "month cost" "unit cost" "meter meter" "feats feats" "btn btn";padding:16px 16px 16px;border:1px solid var(--s-line);border-radius:var(--r-lg);background:var(--paper);color:var(--s-ink-2);box-shadow:0 1px 2px rgba(21,19,15,.05),0 10px 26px -14px rgba(21,19,15,.18);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.plan-title{grid-area:title;align-self:center;color:var(--s-ink);font-size:1.1875rem;font-weight:750;font-stretch:92%}
.plan-flag{position:absolute;top:15px;right:16px;padding:5px 10px 4px;border:1px solid var(--s-line-2);border-radius:99px;background:var(--paper);color:var(--s-ink-2);font:700 .6875rem/1 var(--font);font-stretch:105%;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.plan-cost{grid-area:cost;align-self:center;justify-self:end;position:relative;color:var(--s-ink);font-weight:800;font-stretch:80%;font-variant-numeric:tabular-nums;line-height:.86}
.plan-cost__v{display:flex;align-items:flex-start}
.plan-cost .amt{font-size:3.25rem;letter-spacing:-.02em}
.plan-cost .cur,.plan-cost .cents{margin-top:3px;font-size:1.25rem;font-weight:750;line-height:1}
.plan-cost .cur{margin-right:2px}
.plan-month{grid-area:month;align-self:end;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:10px;font-size:.9375rem}
.plan-per{color:var(--s-ink);font-weight:750}
.plan-pill{padding:4px 9px 3px;border-radius:99px;background:var(--s-wash);color:var(--s-gold-ink);font:700 .75rem/1.1 var(--font);white-space:nowrap}
.plan-unit{grid-area:unit;margin-top:3px;font-size:.8125rem;color:var(--s-ink-3)}
.plan-meter{grid-area:meter;display:block;width:100%;height:4px;margin-top:14px;border-radius:4px}
.pm-track{fill:var(--s-line)}
.pm-fill{fill:var(--s-gold)}
.plan-feats{grid-area:feats;display:grid;gap:4px;align-content:start;margin:14px 0;font-size:.9063rem;line-height:1.4}
.plan-feats li{position:relative;padding-left:24px}
.plan-feats li::before{content:"";position:absolute;left:2px;top:.36em;width:11px;height:6px;border:solid var(--s-gold-ink);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.plan>.btn{grid-area:btn;min-height:46px;padding-inline:14px;white-space:nowrap}
.plan.is-featured{background:var(--ink-2);border-color:var(--ink-2);color:#c9d0de;box-shadow:0 2px 4px rgba(21,19,15,.1),0 26px 52px -22px rgba(21,19,15,.55)}
.is-featured .plan-title,.is-featured .plan-cost,.is-featured .plan-per{color:#fff}
.is-featured .plan-cost .cur{color:var(--gold-2)}
.is-featured .plan-unit{color:#a9b3c7}
.is-featured .pm-track{fill:rgba(255,255,255,.16)}
.is-featured .pm-fill{fill:var(--gold-2)}
.is-featured .plan-feats li::before{border-color:var(--gold-2)}
.is-featured .plan-flag{border-color:transparent;background:linear-gradient(180deg,var(--gold-1),var(--gold-2));color:var(--gold-ink)}
.is-featured .plan-pill{background:rgba(251,208,125,.16);color:var(--gold-1)}
.is-featured :focus-visible{outline-color:var(--gold-2)}
.stage--sand .is-featured .btn.is-off{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.plans-note{margin-top:16px;font-size:.875rem;color:var(--s-ink-3)}
@media (max-width:399px){
  .stage--sand>.wrap{width:calc(100% - 28px)}
  .plan-cost .amt{font-size:3rem}
}
@media (max-width:359px){
  .plan{padding:14px 12px}
  .plan-cost .amt{font-size:2.75rem}
  .plan-feats{font-size:.8125rem}
  .plan-feats li{padding-left:20px}
  .plan-feats li::before{left:1px}
}
@media (min-width:600px){
  .plans{grid-template-columns:repeat(2,1fr);gap:16px 14px}
  .plan{grid-template-columns:1fr;grid-template-areas:"title" "cost" "unit" "month" "meter" "feats" "btn";grid-template-rows:auto auto auto auto 18px 1fr auto;padding:26px 22px 22px}
  .plan-flag{left:20px;right:auto;top:0;transform:translateY(-50%)}
  .plan-cost{justify-self:start;margin-top:16px}
  .plan-cost .amt{font-size:3.75rem}
  .plan-unit{margin-top:10px}
  .plan-month{margin-top:16px;min-height:26px}
  .plan-feats{gap:8px;margin:18px 0 22px}
  .plan>.btn{min-height:50px}
}
@media (min-width:900px){.plans--3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1080px){
  .plans{grid-template-columns:repeat(4,1fr);gap:16px}
  .plans--3{grid-template-columns:repeat(3,1fr)}
  .plans--5{grid-template-columns:repeat(5,1fr)}
  .plan:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(21,19,15,.06),0 26px 52px -22px rgba(21,19,15,.34)}
  .plan.is-featured{margin-block:-12px;padding-block:38px 34px}
}

/* ---------- home: hero ----------
   The art (16:9) is placed by its own width (--art-w), so every offset is a fraction of the picture: the gold
   wordmark ends at 54.4% of its height, the tagline painted into it starts at 57.2%. Phones: the left half
   (T-rex + wordmark), the copy starts right under the wordmark. Tablets: the whole picture, copy on its faded foot.
   Desktops: copy on a scrim under the wordmark, television wall and devices stay visible on the right. */
.hero{--art-w:190vw;--art-x:-4.6vw;--art-y:46px;position:relative;isolation:isolate;overflow:hidden;margin-top:calc(var(--head-h)*-1);padding:calc(var(--art-y) + var(--art-w)*.5625*.602) 0 30px;background:var(--ink-1)}
.hero-art{position:absolute;z-index:-1;top:var(--art-y);left:var(--art-x);width:var(--art-w);aspect-ratio:16/9}
.hero-art picture,.hero-art img{display:block;width:100%;height:100%}
.hero-art img{object-fit:cover}
.hero-art::before,.hero-art::after{content:"";position:absolute;inset:0 0 -2px;pointer-events:none}
.hero-art::before{background:linear-gradient(180deg,transparent 54.7%,var(--ink-1) 57%)}
.hero-art::after{background:linear-gradient(180deg,rgba(6,11,23,.5),transparent 16%)}
.hero h1{max-width:15.5em;text-shadow:0 2px 24px rgba(3,6,13,.7)}
.hero .lead{max-width:37em;margin-top:16px}
.hero .cta-row{margin-top:24px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:.9063rem;color:var(--text-2)}
.hero-meta li{display:flex;align-items:center;gap:8px}
.hero-meta .ico{width:17px;height:17px;color:var(--gold-2);stroke-width:1.8}
@media (min-width:600px){
  .hero{--art-w:100vw;--art-x:0px;--art-y:34px;padding-top:calc(var(--art-y) + var(--art-w)*.5625*.87);padding-bottom:36px}
  .hero-art::before{background:linear-gradient(180deg,transparent 64%,var(--ink-1) 92%)}
  .hero-art::after{background:linear-gradient(180deg,var(--ink-1),transparent 14%)}
  .hero h1{max-width:19em}
}
@media (min-width:1024px){
  .hero{--art-w:min(100vw,150vh,1600px);--art-x:calc(max(var(--gut),(100vw - var(--wrap))/2) - var(--art-w)*.05);--art-y:0px;padding-top:calc(var(--art-w)*.5625*.602);padding-bottom:0}
  .hero-art{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 93%,transparent)}
  .hero-art::before{background:linear-gradient(180deg,transparent 54.7%,var(--ink-1) 57%);-webkit-mask-image:linear-gradient(90deg,#000 46.5%,transparent 55%);mask-image:linear-gradient(90deg,#000 46.5%,transparent 55%)}
  .hero-art::after{background:radial-gradient(11% 9% at 49.5% 59.5%,var(--ink-1) 25%,transparent),linear-gradient(180deg,rgba(6,11,23,.5),transparent 15%,transparent 66%,var(--ink-1) 99%)}
  .hero h1,.hero .lead{max-width:calc(var(--art-w)*.43)}
  .hero h1{font-size:clamp(2.2rem,calc(var(--art-w)*.036),3.15rem)}
  .hero .lead{text-shadow:0 1px 14px rgba(3,6,13,.8)}
  .hero-meta{margin-top:40px;padding:20px 0 22px;gap:10px 36px;font-size:.9375rem}
}
/* short desktop viewports (1366x650, 1280x620 laptops): the art is sized by the height, so the copy column is
   uncoupled from it (a readable measure instead of a 5-line lead), the art a little smaller, the gaps tighter -
   and the buttons stay in view */
@media (min-width:1024px) and (max-height:720px){
  .hero{--art-w:min(100vw,140vh,1600px)}
  .hero h1{max-width:max(calc(var(--art-w)*.43),10.5em)}
  .hero .lead{max-width:max(calc(var(--art-w)*.43),31em);margin-top:12px}
  .hero .cta-row{margin-top:18px}
  .hero-meta{margin-top:28px}
}
/* "plays on": straight text strip under the hero */
.plays{border-block:1px solid var(--line);background:var(--ink-0)}
.plays__in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding-block:14px}
.plays__k{flex:none;color:var(--gold-2);font:700 .75rem/1 var(--font);font-stretch:110%;letter-spacing:.16em;text-transform:uppercase}
.plays__list{display:flex;flex-wrap:wrap;gap:6px;color:var(--text-2);font-size:.875rem;font-weight:600;line-height:1.2}
.plays__list li{padding:6px 11px;border:1px solid var(--line);border-radius:99px}
@media (min-width:1080px){
  .plays__in{flex-wrap:nowrap;padding-block:18px}
  .plays__list{flex:1;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:0;font-size:.9375rem}
  .plays__list li{display:flex;align-items:center;padding:0;border:0;white-space:nowrap}
  .plays__list li+li::before{content:"";width:4px;height:4px;margin-right:clamp(10px,1.6vw,26px);border-radius:50%;background:var(--gold-3);opacity:.7}
}

/* ---------- home: sections ---------- */
/* features: one ruled sheet of eight cells */
.feature-grid{display:grid;gap:1px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--line);overflow:hidden}
.feature{display:grid;grid-template-columns:40px 1fr;gap:10px 14px;align-content:start;padding:18px 18px 20px;background:#080e1c}
.feature .ico{box-sizing:border-box;width:40px;height:40px;padding:9px;border-radius:12px;color:var(--gold-2);background:rgba(251,208,125,.09);box-shadow:inset 0 0 0 1px rgba(251,208,125,.26)}
.feature:nth-child(even) .ico{color:var(--blue-2);background:rgba(133,186,228,.1);box-shadow:inset 0 0 0 1px rgba(133,186,228,.28)}
.feature h3{align-self:center;font-size:1.1875rem;font-stretch:90%}
.feature p{grid-column:1/-1}
@media (min-width:640px){.feature-grid{grid-template-columns:1fr 1fr}.feature{padding:24px 22px 26px}}
@media (min-width:1080px){
  .feature-grid{grid-template-columns:repeat(4,1fr)}
  .feature{grid-template-columns:1fr;gap:0;padding:28px 24px 30px}
  .feature .ico{width:44px;height:44px;padding:10px;border-radius:13px;margin-bottom:20px}
  .feature h3{margin-bottom:8px}
}
/* art crops beside sections (figure.screen > .screen__frame > img). tv = the television screen, devices = right half */
.screen{position:relative}
.screen::before{content:"";position:absolute;inset:10% 2% -3%;background:radial-gradient(closest-side,rgba(47,123,214,.5),transparent);filter:blur(30px)}
.screen__frame{position:relative;overflow:hidden;border-radius:var(--r-xl);box-shadow:0 0 0 1px var(--line-2),0 40px 80px -40px #000}
.screen__frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);pointer-events:none}
.screen--tv .screen__frame{aspect-ratio:7/5}
.screen--tv img{width:220%;max-width:none;margin:-5% 0 0 -119%}
.screen--tv .screen__frame::after{background:linear-gradient(180deg,transparent 74%,rgba(6,11,23,.55))}
.screen--devices .screen__frame{aspect-ratio:4/3}
.screen--devices img{width:189%;max-width:none;margin:-32% 0 0 -89%}
.screen--devices .screen__frame::after{background:linear-gradient(180deg,transparent 62%,rgba(6,11,23,.6))}
@media (min-width:940px){
  .screen--devices .screen__frame{aspect-ratio:5/6}
  .screen--devices img{width:100%;height:100%;margin:0;object-fit:cover;object-position:100% 50%}
}
/* steps: numbered timeline, a five-column strip on wide screens */
.steps{counter-reset:step;display:grid}
.steps li{counter-increment:step;position:relative;padding:2px 0 26px 66px;color:var(--text)}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:-4px;width:48px;font:800 2.25rem/1 var(--font);font-stretch:72%;color:var(--gold-2)}
.steps li::after{content:"";position:absolute;left:20px;top:40px;bottom:6px;width:1px;background:linear-gradient(180deg,var(--gold-line),rgba(251,208,125,.06))}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
@media (min-width:1000px){
  .steps{grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass);overflow:hidden}
  .steps li{padding:92px 24px 30px}
  .steps li+li{border-left:1px solid var(--line)}
  .steps li::before{left:24px;top:26px;width:auto;font-size:3.25rem}
  .steps li::after{left:auto;right:24px;top:52px;bottom:auto;width:26px;height:1px;background:var(--gold-line)}
  .steps+.callout{margin-top:16px}
}
/* three choices: label cards */
.choices{display:grid;gap:14px}
.choice{padding:24px 22px 26px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:rgba(6,11,23,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.choice:nth-child(2)>.ico:first-child{color:var(--blue-2);background:rgba(133,186,228,.1);box-shadow:inset 0 0 0 1px rgba(133,186,228,.28)}
.choice__label{display:block;margin-bottom:8px;color:var(--text);font:800 1.375rem/1.1 var(--font);font-stretch:86%}
/* the three columns are shared in proportion to the three texts (about 215, 250 and 120 characters), so the cards
   end on about the same line and none is left half empty */
@media (min-width:900px){.choices{grid-template-columns:minmax(0,4.4fr) minmax(0,5fr) minmax(0,3.1fr)}.choice{padding:30px 28px 32px}}
/* devices */
.device-grid{display:grid;gap:10px;margin-block:22px}
.device-grid li{display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(255,255,255,.035);color:var(--text);line-height:1.4}
.device-grid .ico{color:var(--blue-2)}
@media (min-width:560px){.device-grid{grid-template-columns:1fr 1fr}}
@media (min-width:940px) and (max-width:1199px){.device-grid{grid-template-columns:1fr}}
/* gallery: the brand pictures as real <img> in framed cards (figure.shot > img + figcaption). Phones and tablets:
   the lead picture full width, the other four two to a row. From 1000px every picture is one equal card
   (three then two, five in a row from 1200px), so no picture competes with the hero. Captions are always visible,
   nothing is cropped. */
.band--gallery{background:radial-gradient(60% 46% at 50% 0%,rgba(47,123,214,.16),transparent 72%),var(--ink-0);box-shadow:inset 0 1px 0 var(--line)}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shot{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--ink-2);box-shadow:0 30px 70px -44px #000}
.shot img{width:100%;background:var(--ink-3)}
.shot figcaption{flex:1;padding:10px 12px 12px;border-top:1px solid var(--line);color:var(--text-2);font-size:.8125rem;line-height:1.45}
.shot--lead{grid-column:1/-1;border-radius:var(--r-lg)}
.shot--lead figcaption{padding:13px 16px 15px;color:var(--text);font-size:.9375rem;line-height:1.5}
@media (min-width:600px){.gallery{gap:16px}.shot{border-radius:var(--r-lg)}.shot figcaption{padding:13px 16px 15px;font-size:.9375rem;line-height:1.5}}
@media (min-width:1000px){
  .gallery{grid-template-columns:repeat(6,1fr);gap:14px}
  .shot,.shot--lead{grid-column:span 2;border-radius:var(--r-lg)}
  .shot:nth-child(n+4){grid-column:span 3}
  .shot--lead figcaption{color:var(--text-2);font-size:.9375rem}
}
@media (min-width:1200px){.gallery{grid-template-columns:repeat(5,1fr)}.shot,.shot--lead,.shot:nth-child(n+4){grid-column:auto}.shot figcaption{padding:12px 14px 14px;font-size:.875rem;line-height:1.45}}
/* the letter */
.letter{position:relative;border:1px solid var(--line-2);border-radius:var(--r-lg);background:linear-gradient(180deg,#131e37,#0b1324);box-shadow:0 40px 90px -50px rgba(47,123,214,.9),inset 0 1px 0 rgba(255,255,255,.08)}
.letter__head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px dashed var(--line-2);color:var(--text);font:700 .75rem/1 var(--font);font-stretch:110%;letter-spacing:.16em;text-transform:uppercase}
.letter__head .ico{width:20px;height:20px;color:var(--gold-2)}
.letter__head::after{content:"";margin-left:auto;width:34px;height:8px;border-radius:8px;background:linear-gradient(90deg,var(--gold-2) 0 8px,transparent 8px 13px,rgba(255,255,255,.2) 13px 21px,transparent 21px 26px,rgba(255,255,255,.2) 26px)}
.letter__list{padding:4px 20px 8px}
.letter__list li{display:grid;grid-template-columns:24px 1fr;gap:16px;padding:16px 0;color:var(--text)}
.letter__list li+li{border-top:1px solid var(--line)}
.letter__list .ico{color:var(--blue-2);margin-top:1px}
.trio>.callout{margin-top:0}
/* paying: statement panel */
.statement{display:grid;border:1px solid var(--line-2);border-radius:var(--r-lg);background:linear-gradient(115deg,rgba(6,39,79,.7),rgba(255,255,255,.02) 62%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.statement__cell{padding:24px 22px 26px}
.statement__cell+.statement__cell{border-top:1px solid var(--line)}
.statement__cell>.ico{width:28px;height:28px;margin-bottom:16px;color:var(--gold-2)}
.statement__cell+.statement__cell>.ico{color:var(--blue-2)}
.statement__cell:first-child p{color:var(--text)}
.fx{display:flex;align-items:center;gap:10px;margin-top:22px;color:var(--blue-2)}
.fx span{padding:9px 12px 8px;border-radius:10px;font:800 .8125rem/1 var(--font);letter-spacing:.1em;color:var(--text);background:rgba(133,186,228,.1);box-shadow:inset 0 0 0 1px rgba(133,186,228,.28)}
.fx .ico{width:18px;height:18px}
@media (min-width:900px){
  .statement{grid-template-columns:7fr 5fr}
  .statement__cell{padding:38px 40px 40px}
  .statement__cell+.statement__cell{border-top:0;border-left:1px solid var(--line)}
}
/* plain facts: the ledger */
.fact-list{counter-reset:fact;border-top:1px solid var(--line-2)}
.fact-list li{counter-increment:fact;position:relative;display:grid;gap:6px;padding:20px 0 20px 52px;border-bottom:1px solid var(--line)}
.fact-list li::before{content:counter(fact,decimal-leading-zero);position:absolute;left:0;top:19px;font:800 1.5rem/1.15 var(--font);font-stretch:74%;color:var(--gold-2)}
.fact__lead{color:var(--text);font-size:1.0625rem;font-weight:650;line-height:1.45}
@media (min-width:960px){
  .fact-list li{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:10px 64px;align-items:baseline;padding:24px 0}
  .fact-list li::before{top:23px}
  .fact__lead{padding-left:60px}
  .fact-list .is-single{grid-template-columns:1fr}
}
/* reviews: cards when there are reviews, one calm panel while there are none */
.review-grid{display:grid;gap:14px}
.review{display:grid;gap:14px;align-content:start;padding:24px 22px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:rgba(6,11,23,.6)}
.review>.ico{color:var(--gold-2)}
.review blockquote{color:var(--text)}
.review__by{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.9063rem;color:var(--text-3)}
.review__name{color:var(--text);font-weight:650}
.review-none{padding:24px 22px 26px;border:1px dashed var(--line-2);border-radius:var(--r-lg);background:rgba(6,11,23,.55)}
.review-none p{color:var(--text)}
.review-none__go{margin-top:20px}
@media (min-width:720px){.review-grid{grid-template-columns:1fr 1fr}}
@media (min-width:960px){
  .reviews-none{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}
  .reviews-none .sec-head{margin:0}
  .review-none{padding:32px 34px 34px}
  .review-grid{grid-template-columns:repeat(3,1fr)}
}
/* FAQ groups: everything visible; two columns of cards and a jump list on wide screens */
.faq-jump{display:none}
.faq-grid{display:grid}
.faq-grid>.sec-head{margin-bottom:26px}
@media (max-width:719px){
  /* phones: a ruled list instead of boxes, so the long answers get the full width */
  .faq-grid .qa{padding:20px 0 22px;border-width:1px 0 0;border-radius:0;background:none}
  .faq-grid .qa:last-child{padding-bottom:0}
}
@media (min-width:720px){.faq-grid{gap:12px}}
@media (min-width:960px){
  .faq-jump{display:block;padding:20px 24px 22px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(255,255,255,.025)}
  .faq-jump ol{columns:2;column-gap:28px;font-size:.9375rem;line-height:1.4}
  .faq-jump li{break-inside:avoid;padding:5px 0 5px 18px;position:relative}
  .faq-jump li::before{content:"";position:absolute;left:0;top:.85em;width:6px;height:6px;border:solid var(--gold-2);border-width:1.6px 1.6px 0 0;transform:rotate(45deg)}
  .faq-jump a{color:var(--text-2);text-decoration:none}
  .faq-jump a:hover{color:var(--gold-1);text-decoration:underline}
  .faq-grid{grid-template-columns:1fr 1fr;gap:16px}
  .faq-grid>.sec-head{margin:0;padding-right:40px;align-self:center}
  .faq-grid .qa{padding:26px 28px 28px}
  .faq-grid .qa h3{font-size:1.25rem}
}
/* terms / privacy in brief */
.brief{display:flex;flex-direction:column;background:var(--ink-2)}
.brief>*{flex:none}
.brief>*+*{margin-top:1rem}
.brief>.idx,.brief>h2{margin-top:0}
.brief__intro{color:var(--text)}
.brief .list{margin-top:20px}
.brief .brief__more{margin-top:auto;padding-top:26px}
.brief__more .btn{width:100%}
@media (max-width:599px){.brief{padding:22px 18px 22px}.brief .list li{padding-left:26px}.brief .list li::before{left:2px}}
@media (min-width:600px){.brief__more .btn{width:auto}}
.related-wrap .related{padding-top:0}

/* ---------- preferences ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .btn:hover,.plan:hover{transform:none}
}
@media (forced-colors:active){
  .btn,.plan,.tile,.card,.qa,.choice,.feature,.nav-toggle{border:1px solid ButtonText}
  .brand-mark{forced-color-adjust:none}
  .foot-mark{display:none}
  .wa-float{border:1px solid ButtonText}
}

/* Floating WhatsApp button (every page, owner request 2026-10-06): fixed pill bottom-right, pulsing ring, label
   unfolds on hover or keyboard focus. Sits under the sticky header (z 60) and above page content. */
.wa-float{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:55;display:inline-flex;align-items:center;height:56px;border-radius:999px;background:#25d366;color:#062b16;text-decoration:none;font:700 .95rem/1 var(--font);isolation:isolate;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.7),inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 rgba(0,0,0,.25);transition:transform .2s var(--ease),background .2s ease;animation:wa-in .6s var(--ease) .9s both}
.wa-float__ico{width:28px;height:28px;margin:0 14px;stroke:none;fill:currentColor}
.wa-float__label{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .35s var(--ease),opacity .25s ease,padding .35s var(--ease)}
.wa-float:hover,.wa-float:focus-visible{background:#2ee272;color:#04210f;transform:translateY(-2px)}
.wa-float:hover .wa-float__label,.wa-float:focus-visible .wa-float__label{max-width:130px;opacity:1;padding-right:20px}
.wa-float:focus-visible{outline:2px solid #fff;outline-offset:3px}
.wa-float__ring{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(37,211,102,.5);animation:wa-pulse 2.6s ease-out 1.6s infinite}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(1.6);opacity:0}}
@keyframes wa-in{from{opacity:0;transform:translateY(24px) scale(.85)}}
@media (max-width:599px){.wa-float{height:52px}.wa-float__ico{width:26px;height:26px;margin:0 13px}.wa-float:hover .wa-float__label{max-width:0;padding-right:0;opacity:0}}
@media (prefers-reduced-motion:reduce){.wa-float{animation:none;transition:none}.wa-float__ring{display:none}.wa-float__label{transition:none}}
@media print{.wa-float{display:none}}