/* ReelTicker public site. Look and motion: docs/sites/aivideo/DESIGN.md and prototype.html v4
   (a widescreen edit bay you browse like a streaming app). Colours are tokens only; motion moves
   transform and opacity only. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/bricolage-grotesque-latin.woff2) format("woff2-variations"),url(/fonts/bricolage-grotesque-latin.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}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/figtree-latin.woff2) format("woff2-variations"),url(/fonts/figtree-latin.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}

:root{
  --bg:#0c0a0f; --surface:#1c1922; --surface-2:#27222e; --line:#2f2a37; --rim:#423c4b; --edge:#7f7989; --fg:#f5f1f6; --mut:#c8c3d0;
  --accent:#ff5c7a; --accent-ink:#ffffff; --glow:rgba(255,92,122,.35); --mk-ink:#14101a;
  --up:#ff8a7a; --up-bg:rgba(255,138,122,.16);
  --down:#5fe0bf; --down-bg:rgba(95,224,191,.15);
  --new:#9db8ff; --new-bg:rgba(157,184,255,.16);
  --deal:#ffc861; --deal-bg:rgba(255,200,97,.16);
  --film:#050407;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --sans:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:18px;
  --gut:clamp(16px,3.6vw,56px);
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f5f3f7; --surface:#ffffff; --surface-2:#ece8f0; --line:#ddd7e3; --rim:transparent; --edge:#766f80; --fg:#17131c; --mut:#544e5e;
  --accent:#d92f55; --accent-ink:#ffffff; --glow:rgba(224,54,90,.22); --mk-ink:#ffffff;
  --up:#b02e1c; --up-bg:rgba(198,59,42,.1);
  --down:#08704f; --down-bg:rgba(12,143,111,.1);
  --new:#3557c4; --new-bg:rgba(53,87,196,.1);
  --deal:#8f5a00; --deal-bg:rgba(168,106,0,.12);
  --film:#17131c;
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font:1rem/1.55 var(--sans);margin:0;font-variant-numeric:tabular-nums}
a{color:inherit}
.wrap{max-width:1680px;margin:0 auto;padding-inline:var(--gut)}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.02em}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--fg);color:var(--bg);padding:12px 16px;border-radius:999px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.9'/></svg>")}
/* tool logos (src/site/art.ts logoHtml): every mark in the same rounded-square tile, corner radius
   22% of the tile, padding 12%, the mark fitted (object-fit: contain), never cropped. --tile is the
   icon's own background, or a neutral chip; a monogram is the letter on the brand colour. */
.logo-chip{display:inline-grid;place-items:center;box-sizing:border-box;flex:none;width:var(--s,24px);height:var(--s,24px);padding:calc(var(--s,24px)*.12);margin-right:.4em;border-radius:calc(var(--s,24px)*.22);background:var(--tile,#fff);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 4px 14px rgba(0,0,0,.35);overflow:hidden;vertical-align:middle;position:relative;top:-.06em}
.logo-chip img{display:block;width:100%;height:100%;object-fit:contain}
.logo-chip.mono{color:#fff;font:800 calc(var(--s,24px)*.5)/1 var(--display);letter-spacing:0}
/* the logo is the card picture: placed centred-left, the glow of art() centred behind it */
.art-logo{line-height:0}
.art-logo .logo-chip{margin:0;top:0}
.tile-art{--gx:44px;--gy:47%;--gr:150px}
.tile-art .art-logo{position:absolute;left:16px;top:calc(47% - 28px)}
.poster{--gx:30px;--gy:28px;--gr:130px}
.deal{--gx:36px;--gy:calc(100% - 64px);--gr:150px}
.tool-hero{--gx:calc(clamp(22px,3vw,40px) + 44px);--gy:calc(100% - clamp(200px,20vw,240px));--gr:240px}
.tool-hero .hero-top{display:flex;align-items:center;gap:16px;margin-bottom:16px}
/* the standout fact beside the logo (src/site/model.ts standoutText) */
.art-fact{display:inline-block;width:fit-content;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.42);color:#fff;font:700 .813rem/1.25 var(--sans);letter-spacing:0}
.tile-art .art-fact{position:absolute;left:84px;top:47%;transform:translateY(-50%);max-width:calc(100% - 96px)}
.tool-hero .art-fact{font-size:.938rem;padding:7px 14px}
.small{font-size:.844rem;color:var(--mut)}
.empty{color:var(--mut);margin:0;padding:18px 0}

/* header */
.sentinel{position:absolute;top:0;width:1px;height:8px;visibility:hidden}
header.top{position:sticky;top:0;z-index:10;padding-top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--bg) 84%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){header.top{background:var(--bg)}}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;min-height:44px}
.logo b{font:800 1.44rem/1 var(--display);letter-spacing:-.03em}
header.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);opacity:0;transition:opacity .2s}
header.top.scrolled::after{opacity:1}
nav.main{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none;min-width:0}
nav.main::-webkit-scrollbar{display:none}
nav.main a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:600;font-size:.906rem;padding:8px 13px;border-radius:999px;color:var(--mut);white-space:nowrap}
nav.main a[aria-current]{color:var(--fg);background:var(--surface-2)}
.theme{all:unset;box-sizing:border-box;cursor:pointer;flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:999px;color:var(--mut);transition:transform .12s}
.theme:active{transform:scale(.95)}
.theme:focus-visible{outline:3px solid var(--accent)}
.theme .i-moon{display:none}
:root[data-theme="light"] .theme .i-sun{display:none}
:root[data-theme="light"] .theme .i-moon{display:block}
html:not(.js) .theme{display:none}

/* full-screen hero (DESIGN.md 首屏): the first screen below the header, edge to edge, the film
   strip on its bottom edge. --hdr is the header's height (two rows on phones). */
:root{--hdr:64px}
.hero{display:flex;flex-direction:column;min-height:calc(100vh - var(--hdr) - env(safe-area-inset-top,0px));min-height:calc(100svh - var(--hdr) - env(safe-area-inset-top,0px))}
.screen{position:relative;flex:1 0 auto;display:flex;align-items:center;overflow:hidden;background:var(--film);isolation:isolate;color:#fff}
.glow{position:absolute;inset:0;z-index:-2;background:#120c18;overflow:hidden}
.glow i{position:absolute;width:90%;aspect-ratio:1;border-radius:50%;mix-blend-mode:screen;opacity:.9;will-change:transform;animation:drift 22s ease-in-out infinite alternate}
.glow i:nth-child(1){left:35%;top:-45%;background:radial-gradient(closest-side,rgba(255,92,122,.55),transparent)}
.glow i:nth-child(2){left:55%;top:20%;background:radial-gradient(closest-side,rgba(122,92,255,.55),transparent);animation-duration:27s;animation-direction:alternate-reverse}
.glow i:nth-child(3){left:15%;top:45%;background:radial-gradient(closest-side,rgba(255,190,90,.45),transparent);animation-duration:31s}
.glow i:nth-child(4){left:-30%;top:-50%;background:radial-gradient(closest-side,rgba(60,200,255,.45),transparent);animation-duration:25s;animation-direction:alternate-reverse}
@keyframes drift{from{transform:translate3d(-6%,-4%,0) scale(1)}to{transform:translate3d(8%,6%,0) scale(1.12)}}
.screen.off .glow i{animation-play-state:paused}
.screen::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,6,12,.78) 0%,rgba(8,6,12,.3) 60%,rgba(8,6,12,.1) 100%)}
.vf{position:absolute;inset:clamp(12px,2vw,28px);pointer-events:none;z-index:1;opacity:.6;
  background:
   linear-gradient(#fff,#fff) top left/24px 2px no-repeat,linear-gradient(#fff,#fff) top left/2px 24px no-repeat,
   linear-gradient(#fff,#fff) top right/24px 2px no-repeat,linear-gradient(#fff,#fff) top right/2px 24px no-repeat,
   linear-gradient(#fff,#fff) bottom left/24px 2px no-repeat,linear-gradient(#fff,#fff) bottom left/2px 24px no-repeat,
   linear-gradient(#fff,#fff) bottom right/24px 2px no-repeat,linear-gradient(#fff,#fff) bottom right/2px 24px no-repeat}
.screen-in{position:relative;z-index:2;width:100%;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:clamp(28px,4vw,80px);padding:clamp(48px,8vh,112px) calc(var(--gut) + clamp(12px,2.4vw,40px))}
.pill{display:inline-flex;align-items:center;gap:8px;font:600 .813rem/1.2 var(--sans);padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;text-decoration:none}
a.pill{min-height:44px;box-sizing:border-box}
.live{width:8px;height:8px;border-radius:50%;background:#ff5c7a;box-shadow:0 0 0 4px rgba(255,92,122,.3);flex:none}
.screen h1{font-size:clamp(2.5rem,5.2vw,5.5rem);line-height:.95;font-weight:800;margin-top:18px;max-width:13ch}
.screen p{font-size:clamp(1rem,1.3vw,1.25rem);opacity:.88;margin:18px 0 0;max-width:46ch}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:9px;font:700 .938rem/1.1 var(--sans);padding:14px 20px;min-height:44px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;transition:transform .12s}
.btn:active{transform:translateY(1px)}
.btn .arr,.row-head a .arr,.more .arr{display:inline-block;transition:transform .2s var(--ease-out)}
.btn.play{background:#fff;color:#14101a}
.btn.ghost{background:rgba(255,255,255,.16);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@keyframes land{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.screen-in .pill{animation:land .6s var(--ease-out) .04s both}
.screen h1{animation:land .6s var(--ease-out) .1s both}
.screen p{animation:land .6s var(--ease-out) .18s both}
.btns{animation:land .6s var(--ease-out) .26s both}
.stats .sstat{animation:land .6s var(--ease-out) both;animation-delay:calc(.34s + var(--i,0)*.07s)}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;justify-self:end;width:min(100%,480px)}
.sstat{display:block;color:#fff;text-decoration:none;background:rgba(0,0,0,.34);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:16px 18px;min-width:0;transition:transform .2s var(--ease-out)}
.sstat:active{transform:translateY(1px)}
.sstat b{display:block;font:800 clamp(1.875rem,3vw,3rem)/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.sstat b small{font-size:.5em;letter-spacing:0;opacity:.85}
.sstat span{display:block;margin-top:6px;font-size:.844rem;line-height:1.3;opacity:.86}
.sstat.u b{color:#ff9a8c}.sstat.d b{color:#7cf0d2}.sstat.n b{color:#b6caff}.sstat.k b{color:#ffd27f}

/* film strip crawl: this week's changes, then deals, cheapest plans and free allowances */
.strip{--up:#ff8a7a;--up-bg:rgba(255,138,122,.16);--down:#5fe0bf;--down-bg:rgba(95,224,191,.15);--new:#9db8ff;--new-bg:rgba(157,184,255,.16);--deal:#ffc861;--deal-bg:rgba(255,200,97,.16);--mut:#c8c3d0;--surface-2:#27222e;position:relative;flex:none;background:var(--film);padding-block:12px;overflow:hidden}
.strip::before,.strip::after{content:"";position:absolute;left:0;right:0;height:5px;background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(255,255,255,.22) 9px 17px,transparent 17px 22px);border-radius:2px}
.strip::before{top:5px}.strip::after{bottom:5px}
.crawl-in{display:flex;width:max-content;animation:crawl var(--dur,80s) linear infinite}
.crawl-set{display:flex}
.strip:focus-within .crawl-in,.strip.off .crawl-in{animation-play-state:paused}
@media (hover:hover){.strip:hover .crawl-in{animation-play-state:paused}}
.ci{display:inline-flex;align-items:center;gap:9px;padding:4px 22px;min-height:44px;border-right:1px solid rgba(255,255,255,.12);color:#f5f1f6;font-size:.906rem;white-space:nowrap;text-decoration:none}
.ci b{font-family:var(--display);font-weight:700}
@keyframes crawl{to{transform:translateX(-50%)}}

/* leaders row: the first of each measure (src/site/model.ts leadersOf) */
.leaders{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.leader{background:var(--surface);border-radius:var(--r);padding:18px 20px 20px;display:grid;gap:10px;align-content:start;min-width:0;text-decoration:none;color:var(--fg);transition:transform .2s var(--ease-out)}
.leader:active{transform:scale(.985)}
.ld-k{color:var(--mut);font-weight:600;font-size:.875rem}
.ld-v{font:800 clamp(1.75rem,2.6vw,2.5rem)/1 var(--display);letter-spacing:-.02em;overflow-wrap:anywhere}
.ld-v small{font:500 .875rem var(--sans);color:var(--mut);letter-spacing:0}
.ld-t{display:flex;align-items:center;font-weight:700;min-width:0}
.ld-t>span:last-child{min-width:0;overflow-wrap:anywhere}
.ld-t small{display:block;font-weight:500;color:var(--mut);font-size:.875rem}

/* surface cards: a quiet 1px rim (--rim) so they stand off the page; picture cards (posters,
   deals) keep their art edge */
.leader,.tile,.timeline,.tbl-wrap,.cv,.card,.log li,.quiet a,.ua,.notice{border:1px solid var(--rim)}

section{padding-block:36px}
.row-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin-bottom:16px}
.row-head h2{font-size:clamp(1.625rem,2.6vw,2.375rem);font-weight:800}
.row-head>a,.row-head>span,.more{color:var(--mut);font-weight:600;font-size:.906rem;text-decoration:none}
.row-head>a,.more{display:inline-flex;align-items:center;gap:4px;min-height:44px}
@media (hover:hover){
  nav.main a:hover,.row-head>a:hover,.more:hover,.quiet a:hover{color:var(--fg)}
  .poster:hover,.tile:hover,.deal:hover{transform:translateY(-3px);box-shadow:0 14px 36px -18px var(--glow)}
  .poster:hover::after,.deal:hover::after,.tile:hover .tile-art::after{opacity:.6}
  .row-head>a:hover .arr,.more:hover .arr{transform:translateX(3px)}
  .btn:hover .arr{transform:translate(2px,-2px)}
  .btn.play:hover .arr{transform:translateX(3px)}
  .sstat:hover,.leader:hover{transform:translateY(-3px)}
  .leader:hover{box-shadow:0 14px 36px -18px var(--glow)}
  .mk:hover{transform:scale(1.08)}
}

/* week timeline */
.timeline{background:var(--surface);border-radius:var(--r);padding:16px 18px 12px;margin-bottom:18px}
/* one track, the six day boundaries drawn in --edge (>= 3:1 against the track, also where the
   played tint is strongest), above the tint and below the markers */
.tl-track{position:relative;height:64px;border-radius:10px;background:var(--surface-2)}
.tl-track::after{content:"";position:absolute;top:0;bottom:0;left:0;width:calc(600%/7 + 1px);pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/6 - 2px),var(--edge) calc(100%/6 - 2px) calc(100%/6))}
.tl-days{display:grid;grid-template-columns:repeat(7,1fr);margin-top:8px;font-size:.875rem;font-weight:500;color:var(--mut)}
.tl-days span{padding-left:8px}
.tl-days .today{color:var(--fg);font-weight:700}
.mk{position:absolute;width:30px;height:30px;translate:-50% -50%;transition:transform .15s var(--ease-out);border-radius:9px;background:var(--c);text-decoration:none;display:grid;place-items:center;color:var(--mk-ink);font:800 .813rem/1 var(--display);box-shadow:0 6px 16px -6px var(--c);z-index:1}
/* an ended deal: outline only, quieter than a real change */
.mk.q{background:var(--surface-2);color:var(--mut);box-shadow:inset 0 0 0 2px var(--mut)}
.mk:active{transform:scale(.94)}
.played{position:absolute;left:0;top:0;bottom:0;width:calc(100% - 100%/14);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 10%,transparent));border-radius:10px;transform-origin:left;pointer-events:none}
.js .timeline:not(.in) .played{transform:scaleX(0)}
.timeline.in .played{transition:transform .6s var(--ease-out)}
.js .timeline:not(.in) .playhead{opacity:0}
.timeline.in .playhead{transition:opacity .3s .5s}
@keyframes drop{from{opacity:0;transform:translateY(-14px) scale(.7)}to{opacity:1;transform:none}}
.js .timeline:not(.in) .mk{opacity:0}
.timeline.in .mk{animation:drop .45s var(--ease-out) backwards;animation-delay:calc(.15s + var(--i,0)*.07s)}
.playhead{position:absolute;z-index:1;top:-6px;bottom:-6px;right:calc(100%/14);width:2px;background:var(--accent);border-radius:2px}
.playhead::before{content:"";position:absolute;top:-4px;left:-5px;width:12px;height:10px;background:var(--accent);clip-path:polygon(0 0,100% 0,50% 100%)}

/* ended deals under the week rail: one line each, no picture */
.quiet{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.quiet a{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;min-height:44px;padding:8px 16px;border-radius:14px;background:var(--surface);color:var(--mut);font-size:.906rem;font-weight:500;text-decoration:none}
.quiet b{display:inline-flex;align-items:center;color:var(--fg);font:700 .938rem/1.2 var(--display)}
.quiet .logo-chip{margin-right:8px;top:0}
.q-sub{min-width:0}
.q-when{margin-left:auto;white-space:nowrap}

/* rails */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*16px)/4);gap:16px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory;scrollbar-width:thin;overscroll-behavior-x:contain;border-radius:var(--r)}
.rail>*{scroll-snap-align:start}
.poster{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:18px;color:#fff;background:var(--art);text-decoration:none;isolation:isolate;transition:transform .2s var(--ease-out)}
.poster::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.66) 100%);transition:opacity .2s}
.poster:active,.tile:active,.deal:active{transform:scale(.985)}
.poster.hl,.poster:target{box-shadow:0 0 0 3px var(--accent)}
.poster .top-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.poster .name{font:800 .938rem/1 var(--display)}
.poster h3{font-size:clamp(1.313rem,1.7vw,1.75rem);line-height:1.08;font-weight:800;overflow-wrap:anywhere}
.poster .meta{font-size:.875rem;font-weight:500;margin-top:6px}
.tag{display:inline-flex;align-items:center;gap:6px;font:700 .813rem/1 var(--sans);padding:7px 10px;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:rgba(0,0,0,.45);color:#fff;white-space:nowrap}
.tag i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.badge{display:inline-flex;align-items:center;font:700 .813rem/1 var(--sans);padding:5px 8px;border-radius:999px;background:var(--b);color:var(--c);white-space:nowrap}

/* tools as clips */
.filters{display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;max-width:100%;padding:4px}
.filters::-webkit-scrollbar{display:none}
html:not(.js) .filters{display:none}
.fp{all:unset;box-sizing:border-box;cursor:pointer;font:600 .875rem/1 var(--sans);padding:10px 15px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px;background:var(--surface);color:var(--mut);white-space:nowrap}
.fp[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.fp,.toggle button{transition:transform .12s}
.fp:active,.toggle button:active{transform:scale(.96)}
.fp:focus-visible,.toggle button:focus-visible{outline:3px solid var(--accent)}
.sort{font:600 .875rem var(--sans);background:var(--surface);color:var(--fg);border:0;border-radius:999px;padding:10px 34px 10px 14px;min-height:44px;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.tile{background:var(--surface);border-radius:var(--r);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .2s var(--ease-out)}
.tile[hidden]{display:none}
.tile-art{aspect-ratio:16/9;background:var(--art);position:relative;display:flex;align-items:flex-end;padding:12px;isolation:isolate}
.tile-art::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.5));transition:opacity .2s}
.tile-art b{font:800 1.438rem/1 var(--display);color:#fff;letter-spacing:-.02em;overflow-wrap:anywhere;padding-right:8px}
.tile-art .tag{position:absolute;top:10px;left:10px}
.scrub{height:3px;background:color-mix(in srgb,var(--fg) 12%,transparent)}
.scrub i{display:block;height:100%;background:var(--accent)}
.tile-body{padding:14px 16px 16px;display:grid;gap:10px}
.price{font:800 1.688rem/1.05 var(--display);letter-spacing:-.02em}
.price small{font:500 .813rem var(--sans);color:var(--mut);letter-spacing:0}
.facts{display:grid;gap:5px;font-size:.844rem;color:var(--mut)}
.facts span{display:flex;justify-content:space-between;gap:10px}
.facts b{color:var(--fg);font-weight:600;text-align:right}
.check{font-size:.781rem;color:var(--mut);display:flex;gap:6px;align-items:center}
.check i{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
/* stale or gone: the picture greys, the logo above it keeps its colours */
.tile.stale .tile-art .grain,.tile.gone .tile-art .grain{background:#808080;mix-blend-mode:saturation;opacity:.85}
.tile.stale .price,.tile.stale .facts b{color:var(--mut)}
.tile-row{display:none} /* the phone layout of a tile, see the 600px block */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* deals */
.deal{border-radius:var(--r);padding:20px 22px 22px;background:var(--art);color:#fff;position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:6px;min-height:clamp(210px,15vw,250px);min-width:0;justify-content:flex-end;text-decoration:none;transition:transform .2s var(--ease-out)}
.deal::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(200deg,rgba(0,0,0,0) 20%,rgba(0,0,0,.66));transition:opacity .2s}
.deal-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:auto;padding-bottom:14px}
.deal h3{font-size:1.875rem;font-weight:800;line-height:1;overflow-wrap:anywhere}
.deal p{margin:0;opacity:.92;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.also{font-size:.844rem;margin-top:4px;padding-top:8px;border-top:1px solid rgba(255,255,255,.18)}
.also ul{list-style:none;margin:2px 0 0;padding:0;opacity:.88}
.also li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}

/* china */
.cvg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cv{background:var(--surface);border-radius:var(--r);padding:20px;display:grid;gap:12px;min-width:0;align-content:start}
.cv h3{font-size:1.375rem;font-weight:800}
.cv h3 a,.cv small a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.cv small a{text-decoration:underline;text-underline-offset:3px}
.cv small{color:var(--mut)}
.bar{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:.875rem}
.bar .b{height:12px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.bar .b i{display:block;height:100%;border-radius:999px;background:var(--fg);transform-origin:left}
.bar.cn .b i{background:var(--accent)}
.bar b small{color:var(--mut);font-weight:500}
.diff{font-weight:700}
.models p{margin:4px 0;font-size:.875rem}

/* inner pages */
.page-head{padding-top:28px}
.page-head h1{font-size:clamp(2.25rem,5vw,4rem);font-weight:800;line-height:1}
.lede{color:var(--mut);font-size:1.063rem;margin:12px 0 0;max-width:70ch}
.crumbs{display:flex;gap:8px;align-items:center;font-size:.875rem;color:var(--mut);margin:10px 0}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.prose{max-width:820px;margin-inline:0}
.prose section{padding-block:18px}
.prose h2{font-size:1.625rem;font-weight:800;margin-bottom:8px}
.prose p,.prose li{color:var(--fg);max-width:70ch}
.prose li{margin:6px 0}
.ua{font-size:.875rem;background:var(--surface);border-radius:12px;padding:12px 14px;overflow-wrap:anywhere}
.plain-list{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.plain-list li{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.plain-list a,.inline-list a{display:inline-flex;align-items:center;min-height:44px}
.inline-list{margin:0;line-height:2}

/* tables (comparison only, DESIGN.md) */
.tbl-wrap{background:var(--surface);border-radius:var(--r);padding:6px 18px}
.tbl{width:100%;border-collapse:collapse;font-size:.938rem}
.tbl th,.tbl td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child>*{border-bottom:0}
.tbl thead th{color:var(--mut);font-weight:600;font-size:.844rem}
.tbl tbody th a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display);font-weight:800;font-size:1.063rem;text-decoration:none}
.tbl tr.stale td,.tbl tr.stale th{color:var(--mut)}

/* change log */
.days{display:grid;gap:8px;margin-top:12px}
.day{padding-block:12px}
.day h2{font-size:1.375rem;font-weight:800;margin-bottom:10px}
.day[hidden]{display:none}
.log{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.log li{background:var(--surface);border-radius:14px;padding:14px 16px;scroll-margin-top:90px}
.log li[hidden]{display:none}
.log li:target{box-shadow:0 0 0 3px var(--accent)}
.log-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.log-top a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-family:var(--display)}
.log p{margin:2px 0 0}
.log q,.story q{display:block;margin-top:6px;font-size:.813rem;color:var(--mut);font-style:italic;quotes:"\201C" "\201D"}

/* tool page */
.tool-hero{position:relative;border-radius:24px;overflow:hidden;background:var(--art);color:#fff;isolation:isolate;aspect-ratio:3.2/1;min-height:240px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:clamp(22px,3vw,40px);flex-wrap:wrap}
.tool-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.6))}
.tool-hero h1{font-size:clamp(2.5rem,5vw,4.5rem);font-weight:800;line-height:.95;margin-top:12px;overflow-wrap:anywhere}
.tool-hero p{margin:8px 0 0;opacity:.92}
.visit{display:grid;gap:8px;justify-items:start;max-width:320px}
.disc{font-size:.781rem;opacity:.9}
.answer{font-size:1.063rem;max-width:80ch;margin:18px 0 0}
.notice{margin:12px 0 0;padding:12px 16px;border-radius:14px;background:var(--surface-2);color:var(--fg);max-width:80ch}
.tool-cols{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px;margin-top:18px}
.tool-side{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
.card{background:var(--surface);border-radius:var(--r);padding:22px;min-width:0}
.card h2{font-size:1.313rem;font-weight:800}
.card h2.mt{margin-top:26px}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.big{font:800 1.5rem/1.15 var(--display);margin:10px 0 8px}
.toggle{display:inline-flex;background:var(--surface-2);border-radius:999px;padding:4px;flex-wrap:wrap}
.toggle button{all:unset;box-sizing:border-box;cursor:pointer;font:700 .875rem/1 var(--sans);padding:9px 15px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px;color:var(--mut)}
.toggle button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
html:not(.js) .toggle{display:none}
.js .bill:not(.on){display:none}
.js .bill-h{display:none}
.bill-h{font-size:1rem;margin-top:16px;color:var(--mut)}
.plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:16px}
.plan{background:var(--surface-2);border-radius:14px;padding:16px;display:grid;gap:4px;align-content:start}
.plan .pn{font-weight:700}
.plan .pp{font:800 1.75rem/1.05 var(--display);letter-spacing:-.02em}
.plan .pp small{font:500 .813rem var(--sans);color:var(--mut);letter-spacing:0}
.plan s{color:var(--mut);font-size:.813rem}
.plan .intro{color:var(--deal);font-size:.844rem;font-weight:600}
.plan .cr{font-size:.844rem;color:var(--mut)}
.costs{display:grid;gap:8px;margin-top:14px}
.cost{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;background:var(--surface-2);border-radius:12px;padding:11px 14px;font-size:.906rem}
.cost small{color:var(--mut);display:block;font-size:.781rem}
.cost .v{font-weight:700}
details.more{margin-top:8px}
details.more summary{cursor:pointer;color:var(--mut);font-weight:600;min-height:44px;display:flex;align-items:center}
.story{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px;position:relative}
.story::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--line)}
.story li{display:grid;grid-template-columns:12px minmax(0,1fr);gap:14px;position:relative}
.story li>i{width:12px;height:12px;border-radius:4px;background:var(--c);margin-top:5px;box-shadow:0 0 0 4px var(--b)}
.story .when{font-size:.813rem;color:var(--mut)}
.story p{margin:2px 0 0}
.deals-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.deals-list li{display:grid;gap:2px}
.chips{list-style:none;margin:12px 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chips li{background:var(--surface-2);border-radius:999px;padding:6px 11px;font-size:.844rem;font-weight:600}
.how{margin-top:18px}
.how p{max-width:80ch;color:var(--fg)}
/* questions on tool and comparison pages */
.faq{margin-top:18px}
.faq .qa{padding-top:16px}
.faq h3{font:700 1.063rem/1.3 var(--sans)}
.faq p{margin:6px 0 0;max-width:80ch;color:var(--fg)}
/* comparison table: the item column stays narrow, the tools share the rest */
.tbl.cmp th[scope="row"]{color:var(--mut);font-weight:600}
@media (min-width:601px){.tbl.cmp th[scope="row"]{width:22%}.tbl.cmp td{width:39%}.cmp-plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tbl.cmp thead th a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display);font-weight:800;font-size:1.063rem;color:var(--fg);text-decoration:none}

footer{padding-block:34px 44px;padding-bottom:max(44px,env(safe-area-inset-bottom));color:var(--mut);font-size:.875rem}
footer .wrap>div{display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:24px}
footer .wrap>div>span{max-width:70ch}
nav.foot{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:12px}
nav.foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--fg);text-decoration:none;font-weight:600}

/* motion: reveal on scroll (IntersectionObserver in site.js), fail-safe in the head script */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.js [data-reveal]:not(.in){opacity:0}
.js [data-reveal].in{animation:rise .55s var(--ease-out) backwards;animation-delay:calc(var(--d,0)*70ms)}
@keyframes swap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.swap>*{animation:swap .28s var(--ease-out) both;animation-delay:calc(var(--i,0)*40ms)}
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{opacity:1!important;animation:none!important}
  .js .timeline .mk,.js .timeline .playhead{opacity:1!important;animation:none!important}
  .js .timeline .played{transform:none!important;transition:none!important}
  .screen-in .pill,.screen h1,.screen p,.btns,.stats .sstat,.swap>*,.glow i{animation:none!important}
  .sstat,.leader{transition:none!important}
  .sstat:hover,.leader:hover,.sstat:active,.leader:active{transform:none!important}
  .btn,.btn .arr,.fp,.toggle button,.theme,.mk,.deal,.arr,.poster,.tile,header.top::after{transition:none!important}
  .poster:hover,.tile:hover,.deal:hover,.poster:active,.tile:active,.deal:active,.btn:active,.fp:active,.toggle button:active,.theme:active,.mk:hover,.mk:active{transform:none!important}
  .crawl-in{animation:none}.strip{overflow-x:auto}.crawl-set[aria-hidden]{display:none}
}
/* laptop */
@media (max-width:1200px){
  .rail{grid-auto-columns:calc((100% - 2*16px)/3)}
  .cvg{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* tablet */
@media (max-width:900px){
  .screen-in{grid-template-columns:1fr;align-content:center;gap:36px}
  .stats{justify-self:start;width:min(100%,560px)}
  .screen h1{font-size:clamp(2.5rem,7vw,4rem)}
  .leaders{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail{grid-auto-columns:calc((100% - 16px)/2)}
  .tool-cols,.tool-side{grid-template-columns:1fr}
  .tool-hero{aspect-ratio:auto;min-height:260px}
}
/* phone: the screen goes vertical */
@media (max-width:600px){
  .top .wrap{flex-wrap:wrap;gap:0 12px;padding-block:6px}
  .theme{margin-left:auto}
  nav.main{margin-left:0;width:100%;order:3}
  :root{--hdr:100px}
  .screen-in{padding:32px calc(var(--gut) + 12px);gap:24px}
  .screen::before{background:linear-gradient(180deg,rgba(8,6,12,.25) 0%,rgba(8,6,12,.72) 100%)}
  .screen h1{font-size:clamp(2.125rem,9.6vw,2.75rem);margin-top:14px}
  .screen p{font-size:.969rem;margin-top:12px}
  .btns{margin-top:20px;gap:10px}
  .btn{padding:12px 16px;font-size:.906rem}
  .stats{gap:10px}
  .sstat{padding:12px 14px}
  .sstat b{font-size:clamp(1.5rem,7.4vw,1.875rem)}
  .sstat span{margin-top:4px;font-size:.781rem}
  .leaders{gap:10px}
  .leader{padding:14px 14px 16px;gap:8px}
  .ld-v{font-size:1.5rem}
  .rail{grid-auto-columns:84%}
  .timeline{padding:14px 12px 10px}
  .tl-track{height:92px}
  .mk{width:24px;height:24px;font-size:.688rem;border-radius:7px}
  .tl-days{font-size:.875rem}
  .tl-days span{padding-left:4px}
  .grid,.cvg,.plans{grid-template-columns:1fr}
  /* tool grids: one row per tool (thumb, name and change, price, free tier, status dot). Scoped to
     .rows so a page cached before this markup existed keeps its cards. */
  .grid.rows{gap:8px}
  .rows .tile{flex-direction:row;align-items:center;gap:12px;padding:8px 12px 8px 8px;border-radius:14px}
  .rows .tile-art{flex:none;width:96px;padding:0;border-radius:10px;overflow:hidden}
  .rows .tile-art{--gx:50%;--gy:50%;--gr:64px}
  .rows .tile-art .art-logo{left:50%;top:50%;transform:translate(-50%,-50%)}
  .rows .art-logo .logo-chip{--s:40px!important}
  .rows .tile-art>b,.rows .tile-art>.tag,.rows .tile-art>.art-fact,.rows .scrub,.rows .tile-body{display:none}
  .rows .tile-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:center;gap:6px 8px;flex:1;min-width:0}
  .tr-name{min-width:0;font:800 1.063rem/1.15 var(--display);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tr-meta{grid-column:1/-1;display:flex;flex-wrap:nowrap;align-items:center;gap:4px 10px;font-size:.844rem;color:var(--mut);min-width:0}
  .tr-price{flex:none;font:800 1rem/1 var(--display);color:var(--fg);white-space:nowrap}
  .tr-price small{font:500 .781rem var(--sans);color:var(--mut);letter-spacing:0}
  .tr-free{flex:none;color:var(--down);font-weight:600;white-space:nowrap}
  .tr-fact{flex:none;color:var(--fg);font-weight:700;white-space:nowrap}
  .tr-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c);margin-left:auto}
  .rows .tile.stale .tr-price{color:var(--mut)}
  .row-head{align-items:flex-start;flex-direction:column}
  .filters{width:100%}
  .tbl-wrap{padding:4px 14px}
  .tbl thead{display:none}
  .tbl tr{display:grid;gap:2px;padding:10px 0;border-bottom:1px solid var(--line)}
  .tbl tr:last-child{border-bottom:0}
  .tbl th,.tbl td{display:block;padding:2px 0;border:0}
  .tbl td[data-l]::before{content:attr(data-l) ": ";color:var(--mut);font-size:.813rem}
  .cost{grid-template-columns:minmax(0,1fr) auto}
  .cost .v{grid-column:2}
  .visit{max-width:none}
}