/* Sconce site, "Evening in" (site refresh 2026-09-27, sconce.css v2; v1 2026-09-27, v2 the same day: production dialect, no card stagger).
   A dim living room at dusk: the wall lamp this app is named after, and the television beside it
   playing a collection the way Sconce's own TV screen does (fit, over a blurred and dimmed copy
   of the same photograph; the fade, cut, slide and zoom are the receiver's own numbers from
   site/cast/index.html, which this file never touches). The real app sits in front.

   Rules this file keeps:
   - Text never sits on the room or on a moving picture: the hero copy is on its own pane
     (desktop) or on the page ground (phones), every other block on a solid surface.
   - Motion is optional polish. Nothing animates without JS (so the Pause motion chip is always
     there when anything moves), nothing animates under prefers-reduced-motion (html.rm), and
     html.paused (the chip) stops every loop. The TV only runs while it is on screen.
   - Colours are tokens below; the contrast proof is tools/contrast-manifest.json in the site repo,
     run through the site-kit contrast.py. Change a colour, run it.
   - The cast receiver (site/cast/) shares nothing with this file. style.css stays as it was. */

@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/newsreader-display.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-display-italic.woff2) format("woff2")}
@property --glow{syntax:"<color>";inherits:true;initial-value:#6aa8a1}

:root{
  --bg:#08090C;          /* page ground, the app's darkness */
  --panel:#121319;       /* surface */
  --panel2:#171820;      /* raised surface */
  --line:#262620;        /* hairline */
  --line2:#3A352B;       /* control outline */
  --ink:#FAF5EC;         /* headings */
  --text:#ECE7DE;        /* body, warm off-white */
  --text2:#CFC8BA;       /* secondary body */
  --dim:#A8A193;         /* small print */
  --accent:#E8A33D;      /* the sconce's own light */
  --mist:#F0B65C;        /* links, italics, focus */
  --cool:#8FA7BD;        /* the video half */
  --onaccent:#1A1206;    /* text on the amber button */
  --navh:56px;
  --pad:clamp(16px,4.2vw,40px);
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
[id]{scroll-margin-top:calc(var(--navh) + 12px)}
body{background:var(--bg);color:var(--text);font:16px/1.62 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:var(--mist);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#FFD394}
strong{color:var(--ink);font-weight:650}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--pad)}

/* focus: a light ring with a dark halo, so it reads over the amber button, the badges and the room */
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--mist);outline-offset:3px;border-radius:6px;box-shadow:0 0 0 5px rgba(8,9,12,.92)}
.skip{position:absolute;left:-999px;top:8px;z-index:90;background:var(--ink);color:#08090C;padding:.7em 1.1em;border-radius:10px;font-weight:650;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.skip:focus{left:8px}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--navh);background:rgba(8,9,12,.8);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);border-bottom:1px solid rgba(58,53,43,.0);transition:background .3s,border-color .3s}
.nav.scrolled,html:not(.js) .nav{background:rgba(8,9,12,.92);border-bottom-color:rgba(58,53,43,.9)}
.navin{max-width:1240px;margin:0 auto;height:100%;padding:0 12px;display:flex;align-items:center;gap:8px}
.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);min-height:44px;padding-right:4px}
.logo-s{width:30px;height:30px;flex:none}
.brand .glow{opacity:.8;transition:opacity .45s}
.brand:hover .glow{opacity:1}
.wordmark{font-weight:600;font-size:.82rem;letter-spacing:.3em}
.navlinks{display:none}
.getbtn{margin-left:auto;display:inline-flex;align-items:center;min-height:38px;padding:0 13px;border-radius:999px;background:var(--accent);color:var(--onaccent);font-weight:700;font-size:.84rem;text-decoration:none;white-space:nowrap}
.getbtn:hover{background:#F4B557;color:var(--onaccent)}
.navmenu{position:relative}
.navmenu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border-radius:999px;border:1px solid var(--line2);color:var(--text);font-size:.84rem;background:rgba(18,19,25,.7)}
.navmenu summary::-webkit-details-marker{display:none}
.navmenu summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.navmenu[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.navmenu nav{position:absolute;right:0;top:calc(100% + 10px);min-width:210px;background:#121319;border:1px solid var(--line2);border-radius:16px;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.navmenu nav a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;color:var(--text);text-decoration:none}
.navmenu nav a:hover{background:#1c1d24;color:var(--ink)}
@media (min-width:370px){.navin{padding:0 16px;gap:10px}.wordmark{font-size:.9rem;letter-spacing:.38em}.getbtn{padding:0 16px;font-size:.88rem}}
@media (min-width:820px){
  .navlinks{display:flex;gap:4px;margin-left:auto}
  .navlinks a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:999px;color:var(--text2);text-decoration:none;font-size:.92rem}
  .navlinks a:hover{color:var(--ink);background:rgba(255,255,255,.04)}
  .getbtn{margin-left:8px}
  .navmenu{display:none}
}

/* ---------- hero: the room ---------- */
.hero{position:relative;background:var(--bg)}
.scenebox{position:relative;overflow:hidden}
.scene{position:relative;width:100%;aspect-ratio:920/800;
  --tvx:26.848%;--tvy:27.875%;--tvw:56.957%;--tvh:33.625%;--lx:18.25%;--ly:31.92%}
.room,.room img{position:absolute;inset:0;width:100%;height:100%}
.room img{object-fit:cover}
.scenebox::after{content:"";position:absolute;inset:auto 0 0 0;height:22%;background:linear-gradient(to bottom,rgba(8,9,12,0),var(--bg));z-index:3;pointer-events:none}
.lampglow{position:absolute;left:var(--lx);top:var(--ly);width:44%;aspect-ratio:1;translate:-50% -50%;z-index:1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,181,96,.34),rgba(255,152,64,.12) 46%,rgba(255,140,50,0) 72%);mix-blend-mode:screen;opacity:.7}
.tvglow{position:absolute;z-index:1;pointer-events:none;left:calc(var(--tvx) - var(--tvw)*.32);top:calc(var(--tvy) - var(--tvh)*.5);width:calc(var(--tvw)*1.64);height:calc(var(--tvh)*2);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--glow) 42%,transparent),transparent);mix-blend-mode:screen;opacity:.5;transition:--glow 1.8s ease}

/* ---------- the television (shared by the hero and the looks simulator) ---------- */
.tv{position:absolute;left:var(--tvx);top:var(--tvy);width:var(--tvw);height:var(--tvh);z-index:2;background:#000;overflow:hidden;container-type:size;--fade:800ms;border-radius:3px}
.tv::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 70%,rgba(255,255,255,.03) 100%)}
.tv::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border:clamp(2px,1cqw,7px) solid #070708;border-bottom-width:clamp(3px,1.4cqw,9px);border-radius:3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.stage{position:absolute;inset:0;opacity:0;z-index:1;transition:opacity var(--fade) ease,transform var(--fade) ease;transform:none;background:#000;will-change:opacity,transform}
.stage.on{opacity:1;transform:none;z-index:2}
.stage.prep{transition:none;opacity:0}
.stage.out{z-index:1}
.tv[data-trans=cut]{--fade:0ms}
.tv[data-trans=slide] .stage.prep{transform:translateX(6%)}
.tv[data-trans=slide] .stage.out{transform:translateX(-6%)}
.tv[data-trans=zoom] .stage.prep{transform:scale(1.06)}
.tv[data-trans=zoom] .stage.out{transform:scale(1)}
/* the shipped free look: the photo, blurred and dimmed, behind itself (receiver: blur 34px on a
   1920 px panel = 1.77% of the width, brightness .38, saturate .9, scale 1.14) */
.stage .fill{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;filter:blur(1.77cqw) brightness(.38) saturate(.9);transform:scale(1.14);transition:background-color .4s}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:padding .4s}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 45%,rgba(0,0,0,.74) 100%)}
.p-village{background-image:url(../shots/tv/village-640.webp)}
.p-puppy{background-image:url(../shots/tv/puppy-640.webp)}

/* ---------- the phone in front (the real app) ---------- */
.phone{position:absolute;z-index:4;right:5%;bottom:5%;width:21%;aspect-ratio:360/640;rotate:-3deg;padding:2.2%;border-radius:15%/8.4%;background:#0c0c0e;
  box-shadow:0 0 0 1px rgba(255,214,160,.16),0 24px 44px rgba(0,0,0,.7),-14px -6px 40px -12px rgba(232,163,61,.35)}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:13%/7.3%}

/* ---------- hero copy ---------- */
.hero-copy{position:relative;z-index:5;padding:2px var(--pad) 10px}
.hero h1{font-family:var(--display);font-weight:430;font-size:clamp(2.2rem,9.6vw,3.3rem);line-height:1.02;letter-spacing:-.012em;color:var(--ink);margin-top:12px;font-optical-sizing:auto}
.hero h1 em{font-style:italic;color:var(--mist);font-weight:400}
.lede{margin-top:12px;color:var(--text2);font-size:1.02rem;line-height:1.5;max-width:31rem}
.pillars{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pillars li{border:1px solid rgba(240,182,92,.3);background:rgba(240,182,92,.07);color:#EBDFC8;font-size:.8rem;padding:4px 11px;border-radius:999px;white-space:nowrap}
.store-row{display:flex;align-items:center;flex-wrap:wrap;gap:2px 4px;margin-top:12px}
.store-row a{display:inline-flex;border-radius:10px}
.play-badge{height:64px;width:auto}
.tf-badge{height:43px;width:auto;margin:0 0 0 2px}
.scene-note{position:relative;z-index:5;margin:12px var(--pad) 0;color:var(--dim);font-size:.76rem;line-height:1.4}
@media (max-width:349.98px){.wordmark{display:none}}
@media (max-width:599.98px){.motion .mw{display:none}}
@media (max-width:359px){.play-badge{height:56px}.tf-badge{height:37.6px}.hero h1{font-size:2.05rem}}

/* tablets: the wide room across the top, the copy under it */
@media (min-width:600px) and (max-width:899.98px){
  .scene{aspect-ratio:1920/1005;--tvx:55.029%;--tvy:33.862%;--tvw:25.586%;--tvh:25.093%;--lx:51.17%;--ly:36.88%}
  .lampglow{width:24%}
  .phone{right:auto;left:40%;bottom:6%;width:auto;height:46%}
  .hero-copy{max-width:640px;margin:0 auto;padding-top:4px}
  .scene-note{max-width:640px;margin:12px auto 0;padding:0 var(--pad)}
  .play-badge{height:72px}.tf-badge{height:48.4px}
}

/* desktop: the room fills the hero ("cover" done by hand so the TV rectangle stays exact) and the
   copy floats on its own pane on the left, where the wall is empty */
@media (min-width:900px){
  .hero{height:clamp(620px,100svh,1000px);container-type:size;overflow:hidden;
    --S:max(100cqw,191.04cqh);--L:min(0px,calc(97cqw - .81*var(--S)));--gut:max(28px,calc((100cqw - 1240px)/2));--pw:min(34rem,42cqw)}
  .scenebox{position:absolute;inset:0;overflow:visible}
  .scenebox::after{height:16%}
  .scene{position:absolute;width:var(--S);left:var(--L);top:calc(100cqh - var(--S)/1.9104);aspect-ratio:1920/1005;
    --tvx:55.029%;--tvy:33.862%;--tvw:25.586%;--tvh:25.093%;--lx:51.17%;--ly:36.88%}
  .lampglow{width:22%}
  .phone{right:auto;bottom:4cqh;height:min(41cqh,24cqw);width:auto;left:max(calc(var(--L) + .41*var(--S)),calc(var(--gut) + var(--pw) + 28px))}
  .hero-copy{position:absolute;z-index:6;left:var(--gut);top:calc(50% + var(--navh)/2);translate:0 -50%;width:var(--pw);margin:0;
    padding:clamp(22px,2.4cqw,36px) clamp(22px,2.4cqw,38px);background:rgba(9,10,13,.86);border:1px solid rgba(240,182,92,.18);border-radius:28px;
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 30px 70px rgba(0,0,0,.45)}
  .hero h1{font-size:clamp(2.6rem,4.6cqw,4.4rem);margin-top:0}
  .lede{font-size:1.1rem}
  .play-badge{height:76px}.tf-badge{height:51px}
  .scene-note{position:absolute;left:var(--gut);bottom:16px;margin:0;padding:5px 12px;border-radius:999px;background:rgba(8,9,12,.86)}
}

/* ---------- sections ---------- */
main > section{padding:clamp(56px,8vw,100px) 0}
main > section.hero{padding:0}
.kicker{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mist);font-weight:650}
h2{font-family:var(--display);font-weight:440;font-size:clamp(1.95rem,5.4vw,3.2rem);line-height:1.08;letter-spacing:-.01em;color:var(--ink);margin-top:10px;max-width:22ch}
h3{color:var(--ink)}
.intro{margin-top:14px;max-width:38rem;color:var(--text2);font-size:1.06rem;line-height:1.6}
.caption{margin-top:14px;color:var(--dim);font-size:.84rem}

/* the promo cards */
.cards{background:radial-gradient(70% 60% at 50% 0%,rgba(232,163,61,.08),transparent 70%)}
.cardstrip{margin-top:28px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);padding:6px var(--pad) 18px;scrollbar-width:thin;scrollbar-color:#3A352B transparent}
.cardstrip:focus-visible,.shotstrip:focus-visible{outline-offset:-4px}
.cardrow{display:flex;gap:16px;width:max-content}
.card{flex:0 0 auto;width:min(80vw,380px);scroll-snap-align:start}
.card img{width:100%;height:auto;border-radius:22px;border:1px solid rgba(240,182,92,.14);box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 80px -30px rgba(232,163,61,.35);background:#101116}
@media (min-width:960px){
  .cardstrip{overflow:visible;padding:6px var(--pad) 8px}
  .cardrow{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;width:auto;max-width:1120px;margin:0 auto}
  .card{width:auto}
  .cards .caption{margin-top:20px}
}

/* the two tiers */
.tiers{display:grid;gap:16px;margin-top:30px}
.tier{border-radius:24px;padding:22px;background:linear-gradient(165deg,#15161C,#0F1014);border:1px solid var(--line)}
.tier.photos{box-shadow:inset 0 3px 0 rgba(232,163,61,.8)}
.tier.videos{box-shadow:inset 0 3px 0 rgba(143,167,189,.8)}
.tdia{width:100%;height:auto;max-width:360px;margin-bottom:14px}
.tier h3{font-family:var(--display);font-weight:500;font-size:1.5rem}
.tier p{margin-top:8px;color:var(--text2)}
.tier .verdict{margin-top:14px;color:var(--ink);font-weight:600;padding-left:12px;border-left:3px solid var(--accent)}
.tier.videos .verdict{border-left-color:var(--cool)}
.join{margin-top:22px;max-width:44rem;color:var(--text2)}
@media (min-width:760px){.tiers{grid-template-columns:1fr 1fr;gap:22px}.tier{padding:28px}}
.d-tv{fill:#0B0B0D;stroke:#5A5243;stroke-width:2}
.d-pic{fill:#16202A}
.photos .d-pic{fill:#3B2A1A}
.d-sun{fill:#E8A33D;opacity:.85}
.d-ph{fill:#101115;stroke:#7A705E;stroke-width:2}
.d-phs{fill:#1C1D24}
.d-phs.dim{fill:#09090B}
.d-lock{fill:none;stroke:#F0B65C;stroke-width:2.2;stroke-linejoin:round}
.d-link{fill:none;stroke:#5A5243;stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round}
.d-play{fill:#8FA7BD}
.d-stream{fill:none;stroke:#8FA7BD;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1 10}
html.js.enh .d-stream{animation:flow 1.2s linear infinite}
html.js.enh .photos .d-pic{animation:turn 12s ease-in-out infinite}
html.js.enh .photos .d-sun{animation:turnsun 12s ease-in-out infinite}
@keyframes flow{to{stroke-dashoffset:-22}}
@keyframes turn{0%,28%{fill:#3B2A1A}36%,62%{fill:#1C2E33}70%,94%{fill:#2E2230}100%{fill:#3B2A1A}}
@keyframes turnsun{0%,28%{fill:#E8A33D}36%,62%{fill:#6FA7A0}70%,94%{fill:#C27964}100%{fill:#E8A33D}}

/* the looks simulator */
.looks-sec{background:linear-gradient(180deg,transparent,rgba(18,19,25,.55) 30%,transparent)}
.sim{margin-top:30px;display:grid;gap:22px;align-items:start}
.simtv-wrap{position:relative;padding:10px 10px 0}
.sim-tv{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:16/9;border-radius:6px;box-shadow:0 0 0 1px #1a1a1d,0 30px 70px rgba(0,0,0,.6),0 0 120px -40px color-mix(in srgb,var(--glow) 70%,transparent);transition:box-shadow 1.2s}
.tvfoot{width:22%;height:10px;margin:0 auto;border-radius:0 0 8px 8px;background:linear-gradient(#141416,#0b0b0c)}
.simctl{display:grid;gap:18px}
.chips{border:0;display:flex;flex-wrap:wrap;gap:8px}
.chips legend{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);font-weight:650;margin-bottom:10px;padding:0}
.chip{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 14px;border:1px solid var(--line2);border-radius:999px;background:#111217;color:var(--text);font-size:.92rem;cursor:pointer;transition:border-color .2s,background .2s}
.chip:hover{border-color:#6A6050}
.chip input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.chip:has(input:checked){border-color:var(--accent);background:rgba(232,163,61,.14);color:var(--ink)}
.chip:has(input:checked)::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.chip:has(input:focus-visible){outline:2px solid var(--mist);outline-offset:3px;box-shadow:0 0 0 5px rgba(8,9,12,.92)}
.tag{font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:#2C2720;color:#EBCB91}
.tag.free{background:#1B2A1F;color:#A5D9AE}
.switch{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;color:var(--text)}
.switch input{position:absolute;left:0;top:50%;translate:0 -50%;width:44px;height:28px;opacity:0;margin:0;cursor:pointer}
.switch small{display:block;color:var(--dim);font-size:.8rem}
.knob{flex:none;width:44px;height:26px;border-radius:999px;background:#1C1D24;border:1px solid #7A705E;position:relative;transition:background .2s,border-color .2s}
.knob::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#CFC8BA;transition:translate .2s}
.switch input:checked + .knob{background:var(--accent);border-color:var(--accent)}
.switch input:checked + .knob::after{translate:18px 0;background:#1A1206}
.switch input:focus-visible + .knob{outline:2px solid var(--mist);outline-offset:3px;box-shadow:0 0 0 5px rgba(8,9,12,.92)}
.simnote{color:var(--dim);font-size:.9rem}
.linkbtn{font:inherit;color:var(--mist);background:none;border:0;border-bottom:1px solid rgba(240,182,92,.6);cursor:pointer;padding:6px 0 2px;margin-left:6px;min-height:24px}
.linkbtn:hover{color:#FFD394}
html:not(.js) .needs-js{display:none}
/* the looks, keyed on the radios so they work with no script at all (TvLooks.kt values) */
.sim:has(#lk-gallery:checked) .sim-tv{--bd:#F2EFE9;--matte:4cqmin}
.sim:has(#lk-warmblack:checked) .sim-tv{--bd:#0B0A08;--matte:3cqmin}
.sim:has(#lk-slate:checked) .sim-tv{--bd:#1B1E24;--matte:3cqmin}
.sim:has(#lk-linen:checked) .sim-tv{--bd:#E6DFD2;--matte:5cqmin}
.sim:has(:is(#lk-gallery,#lk-warmblack,#lk-slate,#lk-linen):checked) .sim-tv .fill{background-image:none!important;background-color:var(--bd);filter:none;transform:none}
.sim:has(:is(#lk-gallery,#lk-warmblack,#lk-slate,#lk-linen):checked) .sim-tv .stage img{padding:var(--matte)}
.sim:has(#lk-vignette:checked) .sim-tv .fill{filter:blur(1.77cqw) brightness(.22) saturate(.85)}
.sim:has(#lk-vignette:checked) .sim-tv .stage::after{opacity:1}
.sim:has(#lk-fill:checked) .sim-tv .stage img{object-fit:cover;padding:0}
.sim:has(#lk-fill:checked) .sim-tv .fill{display:none}
@media (min-width:900px){.sim{grid-template-columns:1.45fr 1fr;gap:36px}.simtv-wrap{padding:0}}

/* facts */
.facts{display:grid;gap:12px;margin-top:34px}
.fact{padding:20px 22px;border-radius:18px;background:rgba(18,19,25,.78);border:1px solid var(--line)}
.fact h3{font-family:var(--display);font-weight:500;font-size:1.25rem;line-height:1.2}
.fact p{margin-top:6px;color:var(--text2);font-size:.96rem}
@media (min-width:700px){.facts{grid-template-columns:1fr 1fr;gap:16px}}
@media (min-width:820px){.facts.three{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.facts{grid-template-columns:repeat(4,1fr)}.facts.three{grid-template-columns:repeat(3,1fr)}}
@media (max-width:699.98px){.fact{padding:16px 18px}.facts{gap:10px}}

/* the six real screens */
.shotstrip{margin-top:30px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);padding:6px var(--pad) 16px;scrollbar-width:thin;scrollbar-color:#3A352B transparent}
.shotrow{display:flex;gap:14px;width:max-content}
.shotrow figure{width:min(56vw,230px);scroll-snap-align:start}
.shotrow img{width:100%;height:auto;border-radius:16px;border:1px solid var(--line);box-shadow:0 14px 34px rgba(0,0,0,.55)}
.shotrow figcaption{margin-top:8px;font-size:.82rem;line-height:1.4;color:var(--dim)}
@media (min-width:1100px){.shotstrip{overflow:visible}.shotrow{display:grid;grid-template-columns:repeat(6,1fr);width:auto;max-width:1120px;margin:0 auto}.shotrow figure{width:auto}}

/* the film */
.promo{margin-top:26px}
.promo video{width:100%;height:auto;aspect-ratio:16/9;background:#000;border-radius:20px;border:1px solid var(--line);box-shadow:0 26px 60px rgba(0,0,0,.55)}
.promo .note{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:baseline;margin-top:12px;color:var(--dim);font-size:.86rem}
.promo .note a{display:inline-flex;align-items:center;min-height:24px}

/* quiet by design */
.quiet{display:grid;gap:18px;margin-top:30px}
.netpair{padding:24px;border-radius:24px;background:linear-gradient(160deg,rgba(232,163,61,.11),rgba(18,19,25,.92) 55%);border:1px solid rgba(232,163,61,.26)}
.netpair .big{font-family:var(--display);font-size:clamp(1.3rem,3.4vw,1.6rem);line-height:1.28;color:var(--ink)}
.netpair p{margin-top:12px;color:var(--text2)}
.netpair .fine{font-size:.9rem;color:var(--dim)}
.notlist{padding:24px;border-radius:24px;background:#101116;border:1px solid var(--line)}
.notlist .lead{color:var(--text2)}
.nots{list-style:none;margin-top:12px;display:grid;gap:4px}
.nots li{position:relative;padding:6px 0 6px 22px;color:var(--text);border-bottom:1px solid rgba(38,38,32,.8)}
.nots li:last-child{border-bottom:0}
.nots li::before{content:"";position:absolute;left:2px;top:50%;width:10px;height:2px;background:var(--accent);border-radius:2px}
.airplay{margin-top:24px;max-width:52rem;color:var(--text2)}
@media (min-width:900px){.quiet{grid-template-columns:1.1fr 1fr;gap:22px}.netpair,.notlist{padding:30px}}

/* free and Pro */
.plans{display:grid;gap:16px;margin-top:30px}
.plan{padding:26px;border-radius:26px;background:#111217;border:1px solid var(--line)}
.plan.pro{background:radial-gradient(120% 90% at 100% 0%,rgba(232,163,61,.18),transparent 60%),#14120F;border-color:rgba(232,163,61,.45)}
.plan h3{font-family:var(--display);font-weight:500;font-size:1.7rem;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.plan h3 small{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);font-weight:650}
.plan ul{list-style:none;margin-top:14px;display:grid;gap:8px}
.plan li{position:relative;padding-left:20px;color:var(--text)}
.plan li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.plan:not(.pro) li::before{background:#CFC8BA}
.plan-note{margin-top:16px;color:var(--text2);font-size:.95rem}
@media (min-width:820px){.plans{grid-template-columns:1fr 1fr;gap:22px}.plan{padding:32px}}

/* get */
.getbox{text-align:center;padding:44px 20px;border-radius:32px;background:radial-gradient(80% 120% at 50% 0%,rgba(232,163,61,.22),transparent 65%),#101116;border:1px solid rgba(232,163,61,.3)}
.getlamp{width:60px;height:60px;margin:0 auto}
.getbox h2{margin:6px auto 0}
.getbox p{max-width:34rem;margin:14px auto 0;color:var(--text2)}
.getbox .store-row{justify-content:center;margin-top:20px}
.getbox .fine{font-size:.9rem;color:var(--dim);margin-top:16px}
@media (min-width:600px){.getbox .play-badge{height:76px}.getbox .tf-badge{height:51px}}

/* footer */
.foot{border-top:1px solid var(--line);padding:34px 0 88px;color:var(--dim);font-size:.9rem}
.foot .family{color:var(--text2);max-width:44rem}
.footlinks{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:16px}
.footlinks a{display:inline-flex;align-items:center;min-height:40px;padding:0 10px;margin-left:-10px;margin-right:6px;color:var(--text2);text-decoration:none;border-radius:8px}
.footlinks a:hover{color:var(--ink);text-decoration:underline}
.foot .co{margin-top:12px}
.foot .co a,.foot .family a{color:var(--text2)}
.legal-note{margin-top:10px;color:var(--dim);font-size:.8rem;line-height:1.5}

/* the Pause motion chip */
.motion{position:fixed;right:12px;bottom:12px;z-index:60;font:inherit;font-size:.7rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--text);background:rgba(8,9,12,.92);border:1px solid rgba(240,182,92,.55);border-radius:999px;padding:0 14px;min-height:38px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.motion::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--mist)}
.motion[aria-pressed="true"]{border-color:var(--mist);color:var(--ink)}
.motion[aria-pressed="true"]::before{background:var(--mist)}
html.rm .motion,html:not(.js) .motion{display:none}

/* ---------- motion (only with script, never under reduced motion, stopped by the chip) ---------- */
html.js.enh .lampglow{animation:breathe 9s ease-in-out infinite alternate}
@keyframes breathe{0%{opacity:.62}22%{opacity:.8}41%{opacity:.7}63%{opacity:.88}81%{opacity:.74}100%{opacity:.84}}
html.paused *,html.paused *::before,html.paused *::after{animation-play-state:paused!important}
@supports (animation-timeline:view()){
  @media (min-width:900px){
    html.js.enh .scene{transform-origin:67.8% 46.4%;animation:pushin linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes pushin{to{transform:scale(1.08)}}
  }
}
/* reveals: the hidden state only exists with script, motion allowed, and before the failsafe */
.rv{transition:opacity .8s ease,transform .9s var(--ease);transition-delay:var(--d,0s)}
html.js.enh:not(.failsafe) .rv:not(.in){opacity:0;transform:translateY(20px)}
.cardrow .card:nth-child(2),.tiers .tier:nth-child(2),.quiet .notlist,.plans .plan:nth-child(2){--d:.12s}
.cardrow .card:nth-child(3){--d:.24s}
.facts .fact:nth-child(2){--d:.08s}.facts .fact:nth-child(3){--d:.16s}.facts .fact:nth-child(4){--d:.24s}
html.rm{scroll-behavior:auto}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important}}