/* Elada homepage. Every value comes from the Elada brand book (tokens.json): Stone (light) and Abyss (dark). */
/* Brand fonts, served from this site (latin subset, from Google Fonts, SIL Open Font License). */
@font-face{font-family:"Rethink Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/rethink-sans-latin.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/geist-mono-latin.woff2) format("woff2")}
:root{
  --surface:#eceae5; --surface-raised:#f7f6f3; --line:#d6d3cc;
  --ink:#061224; --ink-muted:#4f5866; --mark:#a3a6ac;
  --depth:#367e84; --on-depth:#ffffff; --depth-ink:#2a6469; --foam:#def6f6;
  --signal:#ff6e42; --on-signal:#061224;
  --shadow-float:0 8px 24px -8px #0612242e;
  --focus-ring:0 0 0 2px #eceae5, 0 0 0 4px #2a6469;
  --logo-ink:#061224; --logo-depth:#367e84; --lens-shadow:#0612242e;
  --sans:"Rethink Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-20:80px;
  --radius-sm:4px; --radius-md:8px; --radius-full:9999px;
  color-scheme:light;
}
/* Abyss. The logo switches to the all-white one-colour version on dark grounds. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface:#061224; --surface-raised:#0e1d31; --line:#1f3047;
    --ink:#eceeea; --ink-muted:#a3acb8; --mark:#4a4f57;
    --depth:#5fb0b6; --on-depth:#061224; --depth-ink:#7cc6cb; --foam:#0f2a2e;
    --signal:#ff7a52;
    --shadow-float:0 8px 24px -8px #000000b3;
    --focus-ring:0 0 0 2px #061224, 0 0 0 4px #7cc6cb;
    --logo-ink:#ffffff; --logo-depth:#ffffff; --lens-shadow:#000000b3;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --surface:#061224; --surface-raised:#0e1d31; --line:#1f3047;
  --ink:#eceeea; --ink-muted:#a3acb8; --mark:#4a4f57;
  --depth:#5fb0b6; --on-depth:#061224; --depth-ink:#7cc6cb; --foam:#0f2a2e;
  --signal:#ff7a52;
  --shadow-float:0 8px 24px -8px #000000b3;
  --focus-ring:0 0 0 2px #061224, 0 0 0 4px #7cc6cb;
  --logo-ink:#ffffff; --logo-depth:#ffffff; --lens-shadow:#000000b3;
  color-scheme:dark;
}

/* ---------------------------------------------------------------- Base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--surface);color:var(--ink);font:400 16px/24px var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:var(--depth-ink);text-underline-offset:3px}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid transparent;box-shadow:var(--focus-ring)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--space-4);top:-48px;z-index:40;padding:var(--space-2) var(--space-4);background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-sm)}
.skip:focus{top:var(--space-2)}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.l-ink{fill:var(--logo-ink)}
.l-depth{fill:var(--logo-depth)}
.ic{display:block;width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ic-star{display:inline-block;width:14px;height:14px;margin:0 0 0 2px;vertical-align:-2px;fill:currentColor;stroke:none}

/* ---------------------------------------------------------------- Type (brand styles only) */
.display{font-size:64px;line-height:64px;font-weight:600;letter-spacing:-.03em}
.h1{font-size:40px;line-height:44px;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
.h3{font-size:18px;line-height:28px;font-weight:600}
.lead{font-size:18px;line-height:28px}
.label{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.data{font-family:var(--mono);font-size:14px;line-height:20px;font-weight:400;font-variant-numeric:tabular-nums}
.muted{color:var(--ink-muted)}
.ink{color:var(--ink)}
.nw{white-space:nowrap}

/* ---------------------------------------------------------------- Layout: one 1104 px column */
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--space-12)}
.sec{padding-top:var(--space-20)}
.sec-in{padding-top:var(--space-20);border-top:1px solid var(--line)}
.sec-head{display:grid;gap:var(--space-3);max-width:720px}
.sec-head .h1 + p{margin-top:20px}
.sec-lede{color:var(--ink);text-wrap:pretty}
.sec-lede b{font-weight:600}
.sec-sub{color:var(--ink-muted)}

/* ---------------------------------------------------------------- Buttons: fully round, one primary per view */
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 var(--space-6);border:1px solid var(--line);border-radius:var(--radius-full);
  background:var(--surface-raised);color:var(--ink);font:600 16px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;transition:border-color .2s ease}
.btn:hover{border-color:var(--ink-muted)}
.btn-primary{background:var(--depth);border-color:var(--depth);color:var(--on-depth)}
.btn-primary:hover{border-color:var(--depth-ink)}
.btn-lg{height:48px;padding:0 var(--space-8)}
.btn-sm{height:40px;padding:0 var(--space-4)}
/* the secondary action: a text link; the arrow says it opens another site */
.tlink{display:inline-flex;align-items:center;gap:var(--space-1);min-height:44px;color:var(--depth-ink);text-decoration:underline;text-underline-offset:3px}
.tlink:hover{color:var(--ink)}

/* ---------------------------------------------------------------- Nav */
.nav{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:var(--space-8);height:64px}
.nav-logo{display:block;flex:none;padding:3px 0;margin-left:-9px;line-height:0}
.nav-logo svg{display:block;width:116px;height:auto}
.nav-links{display:flex;gap:var(--space-6);margin-left:auto}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-muted);text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.nav-actions{display:flex;align-items:center;gap:var(--space-4)}
.nav-signin{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.nav-signin:hover{text-decoration:underline}
.nav-cta{position:relative;transition:background-color .15s ease,border-color .15s ease,color .15s ease}  /* short, so a stuck nav never shows a half-filled, disabled-looking button */
.nav-cta::after{content:"";position:absolute;inset:-3px 0}

/* ---------------------------------------------------------------- 1. Hero head */
.hero{padding-top:40px}
.hero-head{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-head .display{margin-top:0;text-wrap:balance}
.hero-head .lead{margin-top:var(--space-8);max-width:768px;color:var(--ink);text-wrap:balance}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--space-3) var(--space-6);margin-top:var(--space-6)}

/* ---------------------------------------------------------------- 1. Hero stage: the conveyor
   Top to bottom (768 px and up): the rail (state labels, the readout chip, and from 1024 px Pause), then the cards.
   Back to front: answer track (right of the line), ad track (left of
   it), the line canvas (the band and the pixel spray, drawn by home.js), the line and the rail. Card sizes for 768 px
   and up are set in the Update 2 block at the end of this file. */
.stage{margin-top:var(--space-6);background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.scan{--scan-x:50%;position:relative;height:464px;overflow:hidden;contain:layout paint;-webkit-user-select:none;user-select:none}
.scan-layer{position:absolute;inset:0}
.scan-ad{clip-path:inset(0 calc(100% - var(--scan-x)) 0 0)}
.scan-ans{clip-path:inset(0 0 0 var(--scan-x))}
.scan-track{position:absolute;left:0;top:56px;display:flex;gap:48px;will-change:transform}
.scan-fx{position:absolute;top:0;left:0;width:0;height:100%;pointer-events:none;z-index:2}
/* the line stays in the layout with a real top and height (never display:none): home.js reads its box for the band's
   height and sets it to opacity 0, because the canvas draws the line; its top sits under the rail labels, so the band
   and spray (clipped to its height) stay off them */
.scan-line{position:absolute;top:40px;height:416px;left:var(--scan-x);width:2px;margin-left:-1px;background:var(--depth);pointer-events:none;z-index:1}

/* rail: y 0-48, symmetric about the line; the two states in body type so they read before the logos do */
.rail-l,.rail-r{position:absolute;top:10px;font-size:18px;line-height:28px;font-weight:600;letter-spacing:0;white-space:nowrap}  /* body-lg 18/28 */
.rail-l{color:var(--ink-muted)}  /* the start of the story in ink-muted, the AI side in depth ink: the eye moves toward the side the headline sells */
.rail-r{color:var(--depth-ink)}
.scan-tg{display:none}
.rail-l,.rail-r,.readout,.scan-tg{z-index:3}  /* over the line canvas (2) and the line (1) */
.rail-l{right:calc(100% - var(--scan-x) + 32px);text-align:right}
.rail-r{left:calc(var(--scan-x) + 32px);text-align:left}
.readout{display:none;position:absolute;top:10px;left:var(--scan-x);transform:translateX(-50%);align-items:center;gap:var(--space-2);height:28px;max-width:336px;
  padding:0 var(--space-3);border-radius:var(--radius-sm);background:var(--foam);color:var(--depth-ink);white-space:nowrap}
.ro-plate{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:var(--radius-sm);background:#fff}
.ro-plate img{display:block;width:16px;height:16px;object-fit:contain}
.ro-t{display:flex;min-width:0;white-space:nowrap}
.ro-n{overflow:hidden;text-overflow:ellipsis}
.readout .ro-sf{margin:0 -2px 0 0}
.ro-e{flex:none}
/* Pause pills (the conveyor's, and the platform tabs' while they step on their own) */
.pill{position:relative;flex:none;display:inline-flex;align-items:center;gap:var(--space-2);height:32px;padding:0 14px 0 12px;
  border:1px solid var(--line);border-radius:var(--radius-full);background:var(--surface-raised);color:var(--ink-muted);font:400 14px/20px var(--sans);white-space:nowrap;cursor:pointer}
.pill[hidden]{display:none}
.pill:hover{color:var(--ink);border-color:var(--ink-muted)}
.pill::after{content:"";position:absolute;inset:-7px -4px}
/* Pause row under the stage, below 1024 px; from 1024 px Pause moves up into the rail and this row closes */
.scan-foot{display:flex;align-items:center;justify-content:flex-end;padding-top:var(--space-3);padding-bottom:var(--space-4)}

/* surface logos: where an ad ran (Google for AI Mode and AI Overviews, ChatGPT, Alexa), at text size before the name */
.sf{display:inline-block;flex:none;width:16px;height:16px;margin-right:6px;vertical-align:-3px}
.sc-eng .sf,.nv-top .sf,.same-src .sf,.close-marks .sf{margin:0}
/* ChatGPT: the knot alone in ink (its interface shows it this way), drawn through a mask so it follows Stone and Abyss */
.sf-cg{display:block;width:20px;height:20px;background:var(--ink);-webkit-mask:url(surfaces/chatgpt-mark.svg) center/contain no-repeat;mask:url(surfaces/chatgpt-mark.svg) center/contain no-repeat}
/* the ChatGPT mark is a filled tile, the G and the Alexa ring are bare glyphs: the tile sits 2 px smaller (1 px each
   side) with a 4 px corner, so the three read at one optical size and the tile never looks like an app badge */
img.sf[src$="chatgpt.svg"]{width:14px;height:14px;margin:1px 7px 1px 1px;border-radius:3px}
.sc-eng img.sf[src$="chatgpt.svg"],.nv-top img.sf[src$="chatgpt.svg"]{width:20px;height:20px;margin:0;border-radius:4px}  /* card headers: all four marks at 20 px */
.same-src img.sf[src$="chatgpt.svg"],.close-marks img.sf[src$="chatgpt.svg"]{margin:1px}
.readout img.ro-sf[src$="chatgpt.svg"]{margin:1px -1px 1px 1px}
/* ready for the readout to show the bare knot (home.js SURFACE map -> surfaces/chatgpt-mark.svg): ink in Stone, light in Abyss */
.readout img.ro-sf[src$="chatgpt-mark.svg"]{margin:0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) img.ro-sf[src$="chatgpt-mark.svg"]{filter:invert(1)}}
:root[data-theme="dark"] img.ro-sf[src$="chatgpt-mark.svg"]{filter:invert(1)}

/* cards: 544 x 384 */
.sc{flex:none;display:flex;flex-direction:column;width:544px;height:384px;padding:var(--space-6);border-radius:var(--radius-sm);overflow:hidden;text-align:left}
.sc-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);height:32px;min-width:0}
.lgp{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-sm);background:#fff}
.lgp img{display:block;width:24px;height:24px;object-fit:contain}
.lgp.s{width:24px;height:24px}
.lgp.s img{width:18px;height:18px}
.lgp.l{width:40px;height:40px;border:1px solid var(--line)}
.ph{display:grid;place-items:center;overflow:hidden;background:#fff;border-radius:var(--radius-sm)}
.ph img{display:block;object-fit:contain}

/* the ad as it ran: no Elada frame around it (no box in a box). The format's name sits on the card's top padding and
   under it the white specimen of the real ad is the only frame, as tall as the ad itself, in its surface's own look
   (white, #dadce0 hairline, 8 px, Google's link blue on a text ad). It is someone else's ad, so it stays white in Abyss,
   as on Google; its stars stay ink. The card's ground is the stage's own surface (not transparent), so the line
   canvas reads the stage colour off it where the ad breaks up. */
.sc-ad{--nv-ink:#061224;--nv-muted:#4f5866;--nv-line:#dadce0;justify-content:flex-start;background:var(--surface);border:1px solid transparent;color:var(--ink)}
.sc-ad .gt,.sc-ad .gs,.sc-ad .az{margin:0;padding:var(--space-4);border:1px solid var(--nv-line);border-radius:var(--radius-md);background:#fff;color:var(--nv-ink)}
/* the label row stays on the card's top padding and the specimen starts 12 px under it, as on a results page */
.nv-top{flex:none;display:flex;align-items:center;gap:var(--space-2);height:20px;margin-bottom:var(--space-3);min-width:0;font-size:14px;line-height:20px;color:var(--ink-muted);white-space:nowrap}
.nv-top .sf{width:20px;height:20px}
.nv-sf{overflow:hidden;text-overflow:ellipsis;font-weight:500}
/* the format as people know it: "Google Ads · Search ad", "Google Ads · Shopping ad", "Amazon · Sponsored product";
   Google's bold "Sponsored" label then opens the ad itself */
.nv-k{flex:none}
.nv-k::before{content:"\00b7";margin-right:var(--space-2);color:var(--ink-muted)}
.nv-sp{display:block;font-size:14px;line-height:20px;font-weight:600;color:var(--nv-ink)}
.gt .nv-sp{margin-bottom:var(--space-2)}
.gs-b .nv-sp{margin-bottom:var(--space-1)}
.nv-fav{display:block;flex:none;width:16px;height:16px;border-radius:2px;object-fit:contain}
.stars{position:relative;display:inline-block;flex:none;width:70px;height:14px;margin:0 2px 0 6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon fill='%23dadce0' points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E") 0 0/14px 14px repeat-x}
.stars::before{content:"";position:absolute;top:0;bottom:0;left:0;width:calc(var(--r) / 5 * 100%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon fill='%23061224' points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E") 0 0/14px 14px repeat-x}
/* The header row sits on the card's padding, on the same line as the answer card's top row across the line. Every
   specimen (Shopping, search, Amazon) starts 12 px under it, as on a results page, so all three share one rhythm. */
/* Google AI Mode product ad: a Shopping card (photo in a soft grey well, two-line title, bold price, store, rating).
   The photo leads, as on Google Shopping: on the left it is the last part of the card to reach the line, so it is still
   whole when the same photo comes out in the answer's tile across the line. */
.gs{flex:none;display:grid;grid-template-columns:232px minmax(0,1fr);gap:var(--space-6);align-items:center;min-height:0}
.gs .ph{order:0}
.sc-ad .ph{width:232px;height:232px;border-radius:0;background:#fff}  /* the product shot on the card's white, as on Google Shopping: no inner grey tile */
.sc-ad .ph img{width:100%;height:100%;object-fit:contain;object-position:center;mix-blend-mode:multiply}
.gs-b{display:flex;flex-direction:column;min-width:0}
.gs-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:16px;line-height:24px}
.gs-p{margin-top:var(--space-2);font-size:18px;line-height:24px;font-weight:600}
.gs-st{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);font-size:14px;line-height:20px;color:var(--nv-muted);white-space:nowrap;overflow:hidden}
.gs-r{display:flex;align-items:center;margin-top:var(--space-1);font-size:14px;line-height:20px;color:var(--nv-muted);white-space:nowrap}
/* Google text ad: favicon, advertiser (and its display domain when recorded), blue headline, grey description */
.gt{flex:none;display:flex;flex-direction:column;min-height:0}
.gt-by{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.gt-fav{flex:none;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--nv-line);border-radius:50%;background:#fff}
.gt-fav .nv-fav{width:18px;height:18px}
.gt-who{display:grid;min-width:0;font-size:14px;line-height:20px;white-space:nowrap}
.gt-d{font-size:12px;line-height:16px;color:var(--nv-muted)}
.gt-h{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin-top:var(--space-2);padding-bottom:2px;font-size:20px;line-height:28px;color:#1a0dab}  /* Google's own headline size, so the old ad is never louder than the underlined phrase across the line */
.gt-d2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;margin-top:var(--space-2);font-size:15px;line-height:22px;color:var(--nv-muted)}
/* Alexa for Shopping: an Amazon-style listing (brand, title, rating and reviews, price with raised cents) */
.az{flex:none;display:flex;flex-direction:column;min-height:0}
.az-sp{margin-bottom:var(--space-1);font-size:12px;line-height:16px;color:var(--nv-muted)}
.az-brand{font-size:14px;line-height:20px;color:var(--nv-muted)}
.az-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin-top:var(--space-1);font-size:16px;line-height:24px;color:var(--nv-ink)}  /* Amazon's result-title size */
.az-r{display:flex;align-items:center;margin-top:var(--space-2);font-size:14px;line-height:20px;color:var(--nv-muted);white-space:nowrap}
.az-p{margin-top:var(--space-3);font-size:28px;line-height:32px;letter-spacing:-.01em}
.az-s,.az-c{position:relative;top:-.9em;font-size:13px;line-height:0;letter-spacing:0}
.az-c{margin-left:1px}
.az-dot{font-size:0}

/* the same ad inside the AI answer: a quiet answer card, the sponsored phrase marked with the AdToken bar */
.sc-ans{background:var(--surface-raised);border:1px solid var(--line);color:var(--ink)}
.sc-ans .sc-top{height:20px;flex-direction:row;justify-content:space-between}  /* the engine sits top left, the date top right, in every state */
.sc-eng{display:flex;align-items:center;gap:var(--space-2);min-width:0;font-size:14px;line-height:20px;font-weight:500;color:var(--ink-muted);white-space:nowrap}
.sc-eng img{display:block;flex:none;width:20px;height:20px}
.sc-date{flex:none;color:var(--ink-muted)}
/* the corners never move: the surface logo always leads its label on both faces (spec section 2), whatever side of
   the line or the screen a card is on */
/* its date stays hidden while its left edge is behind the line, up to the frame its surface mark shows whole (home.js sets
   .is-hdr, desktop belt only), then fades in over 200 ms, so the header reads "engine · date" at once */
.scan-ans .sc-ans .sc-date{transition:opacity .2s ease-out}
.scan-ans .sc-ans.is-hdr .sc-date{opacity:0}
.nt .sc-ans .sc-date{transition:none}
/* phones: the parked answer's engine (mark and name) hides while the sweeping line is over it or within 13 px left of it
   (home.js sets .is-eng-cut, phones only), then fades in whole over 200 ms */
.scan-ans .sc-ans .sc-eng{transition:opacity .2s ease-out}
.scan-ans .sc-ans.is-eng-cut .sc-eng{opacity:0}
.nt .sc-ans .sc-eng{transition:none}
.sc-q{flex:none;align-self:flex-end;max-width:80%;margin-top:var(--space-4);padding:10px var(--space-4);border:0;border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font:400 14px/20px var(--mono);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}  /* the user's turn sits on the right, as in a chat, so the question comes out of the line before its answer. The same bubble as .cg-ask (40 px tall, radius 8, no hairline); the prompt keeps the brand's data voice (AdToken: prompts in mono) */
.sc-lead,.sc-say{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;margin-top:var(--space-4);font-size:18px;line-height:28px;color:var(--ink-muted)}
.sc-lead{-webkit-line-clamp:2}
.sc-say{-webkit-line-clamp:6;padding-bottom:2px}
.tile{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:var(--space-4);align-items:center;margin-top:var(--space-4)}
.tile .ph{width:96px;height:96px;border:1px solid var(--line)}
.tile .ph img{width:80px;height:80px}
.tile-b{grid-column:1;grid-row:1;min-width:0}
.tile .ph{grid-column:2;grid-row:1}
.tile-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;padding-bottom:2px;font-weight:600;color:var(--ink)}
.tile-m{margin-top:var(--space-1);color:var(--ink-muted)}
.sc-adh{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:var(--space-3);padding-bottom:2px;font-size:18px;line-height:28px;font-weight:600;color:var(--ink)}
.sc-adb{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:var(--space-1);color:var(--ink-muted)}
/* Alexa for Shopping: the brand's sponsored prompt, as the chip the shopper taps, then Alexa's answer */
.ax-chip{flex:none;display:flex;flex-wrap:wrap;align-items:baseline;align-self:flex-start;gap:0 var(--space-2);max-width:100%;margin-top:var(--space-3);
  padding:6px var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.ax-l{font-size:12px;line-height:16px;font-weight:600;color:var(--ink-muted);white-space:nowrap}
.ax-t{min-width:0;font-size:14px;line-height:20px;color:var(--ink)}
.sc-alexa .sc-say{margin-top:var(--space-3);-webkit-line-clamp:5}
/* ChatGPT: the prompt in a chat bubble on the right, the answer's first line, then the sponsored card (advertiser and
   "Sponsored", the title, the body, the photo) */
.cg-ask{flex:none;align-self:flex-end;max-width:80%;margin-top:var(--space-4);padding:10px var(--space-4);border-radius:var(--radius-md);background:var(--surface);
  color:var(--ink);font:400 14px/20px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}  /* the same bubble as .sc-q on every surface: the prompt in the brand's data voice (AdToken README) */
.cg-l{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;flex:none;margin-top:var(--space-4);font-size:18px;line-height:28px;color:var(--ink-muted)}
.cg-ad{flex:none;display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:var(--space-4);align-items:center;margin-top:var(--space-3);padding:var(--space-4);
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-raised)}
.cg-b{min-width:0}
.cg-t,.cg-d{overflow-wrap:anywhere}
.cg-by{display:flex;align-items:center;gap:var(--space-2);min-width:0;font-size:14px;line-height:20px;color:var(--ink-muted);white-space:nowrap}
.cg-by img{display:block;flex:none;width:16px;height:16px;border-radius:2px;object-fit:contain}
/* logos/att.webp is trimmed to its mark (20 x 26, opaque white): keep its 16 px white square in the byline */
.cg-by img[src="logos/att.webp"]{background:#fff}
.cg-sp::before{content:"\00b7";margin-right:var(--space-2)}
.cg-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:var(--space-2);padding-bottom:2px;color:var(--ink)}
.cg-d{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:var(--space-1);font-size:14px;line-height:20px;color:var(--ink-muted)}
/* loop 11: the ad photo whole on a white tile with a hairline, as the AI Mode product thumbs, so a wide marketing shot
   (Hisense UR8) is never cropped through its wordmark; square photos fill the tile as before */
.cg-ad .ph{width:104px;height:104px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff}
.cg-ad .ph img{width:100%;height:100%;object-fit:contain;object-position:center;border-radius:0}
.sc-meta{display:flex;align-items:center;gap:0;margin-top:0;padding-top:var(--space-3);font:400 14px/20px var(--sans);font-variant-numeric:normal;color:var(--ink-muted);white-space:nowrap}  /* "Sponsored · Nike" in the sans, like the other advertiser lines */
.sc-meta img{display:block;flex:none;width:16px;height:16px;margin-right:var(--space-2);padding:1px;border-radius:4px;background:#fff;box-shadow:0 0 0 1px var(--line);object-fit:contain}
.sc-meta .sep{margin:0 var(--space-2)}  /* "Sponsored · Nike": 8 px each side of the dot, the same rhythm as the ChatGPT byline */
/* AdToken: ink, weight 600, a 3 px depth bar about 5 px under the baseline. The phrase lights up in foam as it comes
   out of the line (the ad is found), then the foam fades while the bar draws left to right (the gradient only paints a
   solid bar). */
.tok{color:var(--ink);font-weight:600;padding-bottom:3px;background:linear-gradient(var(--depth),var(--depth)) left bottom/0% 3px no-repeat;
  -webkit-box-decoration-break:slice;box-decoration-break:slice;transition:background-size .9s cubic-bezier(.2,.7,.2,1),background-color .3s ease,color .3s ease}
.on .tok{background-size:100% 3px}
.nt .tok{transition:none}

/* ---------------------------------------------------------------- 2. Public ad libraries */
.libs{padding-top:var(--space-12)}
.libs-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);margin-bottom:var(--space-4)}
.libs-sub{font-size:14px;line-height:20px;color:var(--ink-muted)}
/* the Alexa cell is a little wider so alexaforshoppingadlibrary.com fits on one line at 14 px mono */
.lib-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.09fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lib-row li{min-width:0}
.lib-row li+li{border-left:1px solid var(--line)}
.lib-row a{position:relative;display:flex;flex-direction:column;height:100%;padding:var(--space-6);color:var(--ink);text-decoration:none;transition:background-color .2s ease}
.lib-row a:hover{background:var(--foam)}
.lib-mark{display:block;width:56px;height:56px}
.lib-name{margin-top:var(--space-4);font-size:18px;line-height:28px;font-weight:600}
.lib-sfx{display:none}
.lib-dom{color:var(--depth-ink);white-space:nowrap}
.lib-proof{color:var(--ink-muted)}
.lib-go{position:absolute;top:var(--space-6);right:var(--space-6);color:var(--ink-muted);transition:color .2s ease,transform .2s ease}
.lib-row a:hover .lib-go{color:var(--depth-ink);transform:translate(2px,-2px)}

/* ---------------------------------------------------------------- 4. Advertisers: one answer that carried three rival
   carriers' ads (photos, titles and prices as recorded), then the ledger of other advertisers */
.same{margin-top:var(--space-12);padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-raised)}
.same-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-1) var(--space-6);padding-bottom:var(--space-4);border-bottom:1px solid var(--line)}
.same-q{color:var(--ink)}
.same-src{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--ink-muted)}
.same-src img{display:block;width:16px;height:16px}
.same-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.same-ad{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--space-4);align-items:start;min-width:0;padding:var(--space-6) var(--space-6) 0}
.same-ad:first-child{padding-left:0}
.same-ad:last-child{padding-right:0}
.same-ad+.same-ad{border-left:1px solid var(--line)}
.same-ad .ph{width:96px;height:96px;border:1px solid var(--line)}
.same-ad .ph img{width:80px;height:80px}
.same-b{min-width:0}
.same-n{display:flex;align-items:center;gap:var(--space-2);font-weight:600}
.same-n .lgp{width:28px;height:28px;border:1px solid var(--line)}
.same-n .lgp img{width:20px;height:20px}
.same-t{margin-top:var(--space-2);text-wrap:pretty}
.same-p{margin-top:var(--space-2);color:var(--ink)}
.ledger{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--space-6);margin-top:var(--space-8);border-bottom:1px solid var(--line)}
.adv{position:relative;isolation:isolate;display:flex;align-items:center;gap:var(--space-3);min-width:0;height:64px;border-top:1px solid var(--line)}
.adv::before{content:"";position:absolute;inset:0 calc(-1 * var(--space-2));z-index:-1;border-radius:var(--radius-sm);transition:background-color .15s ease}
.adv-t{flex:1;display:grid;min-width:0}
.adv-n{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adv-q{color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adv-same{position:absolute;top:10px;right:0;padding-left:var(--space-2);color:var(--depth-ink);opacity:0;transition:opacity .15s ease}
.ledger:has([data-pair="w2"]:hover) [data-pair="w2"]::before,.ledger:has([data-pair="w2"]:focus) [data-pair="w2"]::before{background:var(--foam)}
.ledger:has([data-pair="w2"]:hover) [data-pair="w2"] .adv-same{opacity:1;background:var(--foam)}
.sec-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-6);margin-top:var(--space-8)}

/* ---------------------------------------------------------------- 3. Platform: tabs over one product frame */
#platform{padding-top:0}
#platform .sec-in{border-top:0}
.tabs-wrap{position:relative;margin-top:var(--space-12)}
/* Pause sits at the end of the header's last line (the 24 px sub line, 48 px above the tabs) */
.tab-pause{position:absolute;right:0;bottom:calc(100% + 44px)}
.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.tab{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:var(--space-4) 0 0;border:0;border-top:3px solid var(--line);background:none;text-align:left;cursor:pointer}
.tab-l{color:var(--ink-muted)}
.tab-h{margin-top:var(--space-1);font-size:18px;line-height:28px;font-weight:600;color:var(--ink-muted)}
.tab-d{margin-top:var(--space-1);color:var(--ink-muted);text-wrap:pretty}
.tab:hover .tab-h{color:var(--ink)}
.tab[aria-selected="true"]{border-top-color:var(--depth)}
.tab[aria-selected="true"] .tab-l{color:var(--depth-ink)}
.tab[aria-selected="true"] .tab-h{color:var(--ink)}
.tab::after{content:"";position:absolute;left:0;top:-3px;width:0;height:3px;background:var(--depth)}
.tab.run[aria-selected]{border-top-color:var(--line)}
.tab.run::after{animation:tabfill 7s linear forwards}
.tabs.held .tab.run::after{animation-play-state:paused}
@keyframes tabfill{to{width:100%}}
.panel{margin-top:var(--space-6)}
.panel[hidden]{display:none}
.panel:focus-visible{box-shadow:none}
.panel:focus-visible .frame{box-shadow:var(--focus-ring)}
.pn-intro{display:none}
.frame{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-raised)}
.frame-bar{display:flex;align-items:center;gap:var(--space-2);height:48px;padding:0 var(--space-6);border-bottom:1px solid var(--line);background:var(--surface)}
.sym{display:block;flex:none;width:16px;height:16px}
.frame-src{margin-left:auto;padding-left:var(--space-4);color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame-body{min-height:488px}
.f-buy,.f-scale{display:grid;grid-template-columns:280px minmax(0,1fr)}
.f-buy .f-col{justify-content:flex-start;gap:var(--space-8)}
.f-col{display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-8);border-right:1px solid var(--line)}
.f-main{min-width:0;padding:var(--space-8)}
/* Buy */
.keys{display:flex;gap:var(--space-4);color:var(--ink-muted)}
.keys span{display:inline-flex;align-items:center;gap:var(--space-2)}
.key{display:inline-block;width:12px;height:12px;border-radius:var(--radius-sm)}
.key-a,.split-a{background:var(--depth)}
.key-b,.split-b{background:var(--ink-muted)}
.fsplit{display:grid;gap:var(--space-2)}
.fs-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);font-weight:600}
.fs-top .data{color:var(--ink-muted);white-space:nowrap}
.sfl{white-space:nowrap}
@media (min-width: 1024px){.f-buy .f-col{padding-left:var(--space-6);padding-right:var(--space-6)}}
.split{display:flex;gap:2px;height:24px;border-radius:var(--radius-sm);overflow:hidden}
.units{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--space-4);border-top:1px solid var(--line)}
.unit{display:flex;flex-direction:column;min-width:0;padding:var(--space-6) var(--space-6) var(--space-6) 0}
.unit:nth-child(even){padding:var(--space-6) 0 var(--space-6) var(--space-6)}
.unit:nth-child(odd){border-right:1px solid var(--line)}
.unit:nth-child(-n+2){border-bottom:1px solid var(--line)}
.u-top{color:var(--ink-muted)}
.u-sf{margin:0 6px 0 0}  /* the surface logo leads the label: "[G] Product · Google AI Mode" */
.u-brand{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);font-weight:600}
.u-brand .lgp{border:1px solid var(--line)}
.u-prod{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--space-3);align-items:center;margin-top:var(--space-2)}
.u-prod .ph{width:72px;height:72px;border:1px solid var(--line)}
.u-prod .ph img{width:60px;height:60px}
/* the recorded formats show their titles, descriptions and prompts in full, word for word */
.u-t{font-weight:600}
.u-p{color:var(--ink)}
.u-r{color:var(--ink-muted)}
.u-text{margin-top:var(--space-2)}
.u-h{font-size:18px;line-height:28px;font-weight:600}
.u-d{margin-top:var(--space-1);color:var(--ink-muted)}
.u-q{margin-top:auto;padding-top:var(--space-2);color:var(--ink-muted)}
/* Measure: the ads explorer */
.app-body{display:grid;grid-template-columns:168px minmax(0,1fr)}
.app-side{display:grid;align-content:start;gap:2px;padding:var(--space-4) var(--space-3);border-right:1px solid var(--line);background:var(--surface)}
.side-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--ink-muted)}
.side-item.on{background:var(--foam);color:var(--depth-ink);font-weight:600}
.app-main{min-width:0}
.app-tools{display:flex;gap:var(--space-2);padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--line)}
.search{flex:1;display:flex;align-items:center;gap:var(--space-2);min-width:0;height:36px;padding:0 var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink-muted);white-space:nowrap;overflow:hidden}
.pick{display:flex;align-items:center;gap:var(--space-2);height:36px;padding:0 var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);white-space:nowrap}
.pick .ic{color:var(--ink-muted)}
.app-grid{display:grid;grid-template-columns:minmax(0,1fr) 256px}
.table-wrap{min-width:0;overflow:hidden;border-right:1px solid var(--line)}
.tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.tbl th{padding:var(--space-3);border-bottom:1px solid var(--line);text-align:left;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.tbl td{padding:var(--space-3);border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.tbl th:first-child,.tbl td:first-child{padding-left:var(--space-6)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl th.c-adv{width:168px}
.tbl th.c-sf{width:152px}
.tbl th.c-dt{width:128px}
.tbl td.c-pr,.tbl td.c-dt{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums}
.tbl td.c-pr{color:var(--ink-muted)}
.tbl tr.hl td{background:var(--foam);color:var(--depth-ink)}
.c-adv{font-weight:600}
.lg{display:inline-block;width:20px;height:20px;margin-right:var(--space-2);border-radius:var(--radius-sm);background:#fff;object-fit:contain;vertical-align:middle}
.lg-txt{display:inline-grid;place-items:center;font-size:12px;line-height:1;color:var(--ink-muted);background:var(--surface);border:1px solid var(--line)}
.c-adv span{vertical-align:middle}
.tag{font:400 14px/20px var(--sans);color:var(--ink-muted);white-space:nowrap}
.tbl tr.hl .tag{color:var(--depth-ink)}
.app-detail{display:grid;align-content:start;gap:var(--space-3);padding:var(--space-6)}
.detail-head{display:flex;align-items:center;gap:var(--space-1)}
.detail-head .lg{width:28px;height:28px;border:1px solid var(--line)}
.detail-name{font-size:18px;line-height:28px;font-weight:600}
.detail-ad{font-size:18px;line-height:28px}
.adtoken{font-weight:600;padding-bottom:3px;background:linear-gradient(var(--depth),var(--depth)) left bottom/100% 3px no-repeat}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3) var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line)}
.meta dt{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.meta dd{margin-top:2px}
/* Scale */
.cbars{display:grid;gap:var(--space-8)}
.cbars li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2) var(--space-3);align-items:baseline}
.cbars .bar{grid-column:1 / -1}
.cb-lead{grid-column:1 / -1;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{display:block;height:12px;overflow:hidden;border-radius:var(--radius-sm);background:var(--line)}
.bar i{display:block;height:100%;border-radius:var(--radius-sm);background:var(--depth)}
.lboard{margin-top:var(--space-3)}
.lboard li{display:grid;grid-template-columns:16px 32px 80px minmax(48px,1fr) 28px auto;align-items:center;gap:var(--space-3);height:56px;border-top:1px solid var(--line)}
.lboard li:first-child{border-top:0}
.lboard .lgp{border:1px solid var(--line)}
.lb-rank{color:var(--ink-muted)}
.lb-n{font-weight:600;white-space:nowrap}
.lb-c{text-align:right}
.lb-th{display:flex;gap:var(--space-2)}
.thumb{display:grid;place-items:center;width:40px;height:40px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff}
.thumb img{display:block;width:32px;height:32px;object-fit:contain}
/* one logo tile everywhere: a white plate; favicons that carry their own coloured square sit inset like the rest */
.lgp.full img{border-radius:2px}
.lgp.l.full img{width:28px;height:28px}

/* ---------------------------------------------------------------- 5. FAQ */
.faq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-6)}
.faq-grid .sec-head{align-content:start}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;font-size:18px;line-height:28px;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover .plus{color:var(--ink)}
.plus{color:var(--ink-muted);transition:transform .2s ease}
.faq details[open] .plus{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;color:var(--ink-muted)}

/* ---------------------------------------------------------------- 6. Close: an Abyss end card with the white logo */
.close{padding:var(--space-20) 0}
.close-card{--ink:#eceeea;--ink-muted:#a3acb8;--depth:#5fb0b6;--on-depth:#061224;--depth-ink:#7cc6cb;--line:#1f3047;--surface-raised:#0e1d31;--logo-ink:#fff;--logo-depth:#fff;
  --focus-ring:0 0 0 2px #061224,0 0 0 4px #7cc6cb;
  padding:var(--space-20) var(--space-12);border:1px solid #1f3047;border-radius:var(--radius-md);background:#061224;color:var(--ink);text-align:center}
.lockup{display:flex;flex-direction:column;align-items:center}
.close-logo{display:block;width:200px;height:auto}
.close-tag{margin-top:var(--space-6);font-size:40px;line-height:44px;font-weight:600;letter-spacing:-.025em;color:#eceeea}
.close-sub{margin-top:var(--space-3);font-size:18px;line-height:28px;color:var(--ink-muted)}
.close-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--space-3) var(--space-6);margin-top:var(--space-8)}
.close-marks{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3) var(--space-6);margin-top:var(--space-8)}
.close-marks li{display:flex;align-items:center;gap:var(--space-2);font-size:14px;line-height:20px;color:#a3acb8}
.close-marks .sf{width:20px;height:20px}

/* ---------------------------------------------------------------- Footer */
.foot{padding-bottom:var(--space-6)}
.foot-box{padding-top:40px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-8)}
.foot-brand{display:grid;gap:var(--space-3);align-content:start}
.foot-logo{display:block;width:116px;height:auto;margin-left:-9px}
.foot-grid nav{display:grid;align-content:start}
.foot-grid nav .label{margin-bottom:var(--space-2)}
.foot-grid nav a{display:flex;align-items:center;min-height:28px;color:var(--ink-muted);text-decoration:none}
.foot-grid nav a:hover{color:var(--ink)}
.foot-base{margin-top:var(--space-8);padding-top:var(--space-4);border-top:1px solid var(--line);font-size:14px;line-height:20px}

/* ---------------------------------------------------------------- Abyss: the end card */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .close-card{background:#0e1d31}
}
:root[data-theme="dark"] .close-card{background:#0e1d31}
/* the phone readout's advertiser favicon keeps a small white plate on Abyss, so dark favicons stay visible */
@media (max-width: 767px) and (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ro-plate{background:#fff;border-radius:2px}
}
@media (max-width: 767px){
  :root[data-theme="dark"] .ro-plate{background:#fff;border-radius:2px}
}
/* the Amazon mark is a black "a" over an orange smile: on Abyss it sits on a small white plate, so the "a" stays visible */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .nv-top img.sf[src$="amazon.svg"],:root:not([data-theme="light"]) img.ro-sf[src$="amazon.svg"]{padding:2px;border-radius:4px;background:#fff}
}
:root[data-theme="dark"] .nv-top img.sf[src$="amazon.svg"],:root[data-theme="dark"] img.ro-sf[src$="amazon.svg"]{padding:2px;border-radius:4px;background:#fff}

/* Abyss: the native specimen stays white, as it looks on Google (spec); the light values above apply in both themes */

/* ---------------------------------------------------------------- 1440 and wider: cards 592 x 392, as tall as the
   tallest answer, so no answer card carries an empty band and the whole stage fits a 900 px screen. The photo plate is
   216 px (the Shopping text sits centred on it at Google's tile density), and the answer's product tile is 120 px. The tile's photo
   sits at its right edge, so it comes out of the line while the ad's big photo is still whole on the left. */
@media (min-width: 1440px){
  .scan{height:472px}
  .scan-track{gap:56px}
  .sc{width:592px;height:392px}
  .scan-line{height:424px}
  .gs{grid-template-columns:216px minmax(0,1fr)}
  .sc-ad .ph{width:216px;height:216px}
  .tile{grid-template-columns:minmax(0,1fr) 120px}
  .tile .ph{width:120px;height:120px}
  .tile .ph img{width:104px;height:104px}
  .tile-t{-webkit-line-clamp:3}
  .sc-lead{-webkit-line-clamp:3}
}
@media (min-width: 1680px) and (min-height: 1000px){
  .scan{height:496px}
  .scan-track{gap:64px}
  .sc{width:640px;height:416px}
  .scan-line{height:448px}
}
/* 1280 and up, screens taller than 800 px: the search ad's description one step up */
@media (min-width: 1280px) and (min-height: 801px){
  .gt-d2{font-size:16px;line-height:24px}
}
/* 1280-1439: the answer's product tile at 120 px */
@media (min-width: 1280px) and (max-width: 1439px){
  .tile{grid-template-columns:minmax(0,1fr) 120px}
  .tile .ph{width:120px;height:120px}
  .tile .ph img{width:104px;height:104px}
}
/* the three platform panels share one height from 1024 px, so a switch never moves the page (Buy is tallest: 634 px
   with the app's sidebar, 654 px without it below 1200). The recorded formats show their titles, descriptions and
   prompts in full. The charts start under their labels; in Scale the five advertiser rows share the frame's height,
   each with four of its product photos at 48 px. */
@media (min-width: 1024px){
  .frame-body{min-height:654px}
  .f-buy .split{height:32px}
  .f-scale .f-main{display:flex;flex-direction:column}
  .lboard{flex:1;display:grid;grid-auto-rows:minmax(64px,1fr)}
  .lboard li{height:auto}
  .thumb{width:48px;height:48px}
  .thumb img{width:40px;height:40px}
  /* the conveyor's Pause sits in the rail, right of the answer label, on the first screen with the motion */
  .stage{position:relative}
  .scan-foot{padding-top:0;padding-bottom:0}
  .scan-foot .scan-pause{position:absolute;top:8px;right:var(--space-6)}
}
@media (min-width: 1200px){
  .frame-body{min-height:634px}
  /* belt loop 3: the rail reads "Ads today | Ads inside AI" at the line, Pause on the grid's right edge. The foot row is
     laid over the rail's 8-40 px band at the grid's width; it lets the pointer through to the stage except on Pause. */
  .scan-foot{position:absolute;top:8px;left:0;right:0;z-index:3;height:32px;pointer-events:none}
  .scan-foot .scan-pause{position:static;pointer-events:auto}
}
/* laptop screens up to 880 px tall: a tighter hero head, so the whole cards and the underlined answer show on the
   first screen (the headline keeps its 32 px to the lead) */
@media (min-width: 1024px) and (max-height: 880px){
  .hero{padding-top:var(--space-8)}
  .cta-row{margin-top:var(--space-4)}
  .stage{margin-top:var(--space-4)}
}

/* ---------------------------------------------------------------- 1024-1279: cards 452 x 352 */
@media (max-width: 1279px){
  .scan{height:432px}
  .scan-track{gap:40px}
  .sc{width:452px;height:352px}
  .scan-line{height:384px}
  .gs{grid-template-columns:184px minmax(0,1fr);gap:var(--space-4)}
  .sc-ad .ph{width:184px;height:184px}
  .gs-t{font-size:16px;line-height:24px}
  .gs-p{font-size:18px;line-height:24px}
  .gt-h{font-size:20px;line-height:26px}
  .az-p{font-size:24px;line-height:28px}
  .sc-lead,.sc-say{font-size:16px;line-height:24px}
  .tile{grid-template-columns:minmax(0,1fr) 80px}
  .tile .ph{width:80px;height:80px}
  .tile .ph img{width:64px;height:64px}
}
/* short laptop screens (1280 x 720, 1366 x 768): shorter cards, so the native price and the underlined phrase in the
   answer both sit above the fold. The headline keeps 64/64 and its 32 px to the lead. */
@media (min-width: 1024px) and (max-height: 800px){
  .hero{padding-top:28px}  /* the headline about 30 px under the nav, not 17; the 12 px comes back from the CTA gap */
  .cta-row{margin-top:var(--space-3)}
  .stage{margin-top:var(--space-3)}
  .scan{height:368px}
  .scan-track{top:48px}
  .sc{height:304px}
  .scan-line{height:320px}
  .sc-ad .ph{width:152px;height:152px}
  .gs{grid-template-columns:152px minmax(0,1fr)}
  .sc-say{-webkit-line-clamp:4}
  .gt-d2{-webkit-line-clamp:3}
  .az-p{font-size:24px;line-height:28px}
  .sc-ad .gt,.sc-ad .gs,.sc-ad .az{padding:var(--space-3)}
  .gt .nv-sp{margin-bottom:var(--space-1)}
  .sc-q,.sc-lead,.sc-say,.tile{margin-top:var(--space-3)}
}
@media (min-width: 1280px) and (max-height: 800px){
  .tile{grid-template-columns:minmax(0,1fr) 112px}
  .tile .ph{width:112px;height:112px}
  .tile .ph img{width:96px;height:96px}
  .tile-t{-webkit-line-clamp:3}
}

/* ---------------------------------------------------------------- below 1200: the libraries go 2 x 2 so every domain fits */
@media (max-width: 1199px){
  .same-ad{grid-template-columns:minmax(0,1fr)}
  .ledger{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ledger li:nth-child(n+25){display:none}
  .lib-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lib-row li:nth-child(3){border-left:0}
  .lib-row li:nth-child(n+3){border-top:1px solid var(--line)}
  .app-body{grid-template-columns:minmax(0,1fr)}
  .app-side{display:none}
}

/* ---------------------------------------------------------------- 768-1023: cards 352 x 320 */
@media (max-width: 1023px){
  .scan{height:400px}
  .scan-track{gap:32px}
  .sc{width:352px;height:320px;padding:var(--space-4)}
  .scan-line{height:352px}
  .gs{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2);margin-top:0}
  .gs .ph{order:0}
  .sc-ad .ph{width:100%;height:104px;flex:none}
  .gs-t{font-size:16px;line-height:24px}
  .gs-p{margin-top:var(--space-1);font-size:18px;line-height:24px}
  .gs-st{margin-top:var(--space-1)}
  .gs-r{margin-top:2px}
  .gt,.az{margin-top:0}
  .gt-h{font-size:18px;line-height:24px}
  .gt-d2{-webkit-line-clamp:3;font-size:14px;line-height:20px}
  .az-p{font-size:24px;line-height:28px}
  .sc-q{margin-top:var(--space-3)}
  .sc-lead,.sc-say,.tile{margin-top:var(--space-3)}
  .tile{grid-template-columns:minmax(0,1fr) 72px;gap:var(--space-3)}
  .tile .ph{width:72px;height:72px}
  .tile .ph img{width:60px;height:60px}
  .f-buy,.f-scale{grid-template-columns:minmax(0,1fr)}
  .f-col{border-right:0;border-bottom:1px solid var(--line)}
  .f-buy .f-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-12)}
  .f-buy .keys,.f-buy .f-col > .label{grid-column:1 / -1}
  .app-grid{grid-template-columns:minmax(0,1fr)}
  .table-wrap{border-right:0;border-bottom:1px solid var(--line)}
  .faq-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
}


/* ---------------------------------------------------------------- 900 and below */
@media (max-width: 1024px){
  .foot-grid nav a{min-height:44px}
}
@media (max-width: 900px){
  .wrap{padding:0 var(--space-4)}
  .nav-links{display:none}
  .nav-actions{margin-left:auto}
  .nav-signin{display:inline-flex;align-items:center;min-height:44px;font-size:14px;line-height:20px}
  .foot-grid{grid-template-columns:1fr 1fr}
}

/* ---------------------------------------------------------------- 767 and below: park the card, sweep the line */
@media (max-width: 767px){
  .lib-row a{padding:var(--space-4)}
  .scan{height:532px}
  .scan-track{top:88px;left:0;gap:24px}
  .sc{width:min(342px,calc(100vw - 48px));height:420px;padding:var(--space-4)}
  /* the readout is a plain label line above the toggle, not a chip */
  .readout{display:flex;top:8px;left:50%;height:24px;max-width:calc(100% - 32px);padding:0;background:none;color:var(--ink-muted);font:400 12px/16px var(--mono)}
  .ro-plate{width:16px;height:16px;background:none}
  /* the two states named above the card are a toggle: the one on screen is selected; a tap parks the line there */
  .rail-l,.rail-r{display:none}
  /* plain labels, not a boxed control: the side on screen in depth ink with a 2 px depth bar 4 px under its text */
  .scan-tg{position:absolute;top:36px;left:50%;transform:translateX(-50%);display:flex;gap:var(--space-4);white-space:nowrap}
  .scan-tg button{position:relative;height:40px;padding:0 var(--space-1);border:0;border-radius:0;background:none;color:var(--ink-muted);font:600 16px/24px var(--sans);cursor:pointer;transition:color .2s ease}
  .scan-tg button::before{content:"";position:absolute;left:var(--space-1);right:var(--space-1);top:36px;height:2px;background:transparent;transition:background-color .2s ease}
  .scan-tg button::after{content:"";position:absolute;inset:-2px -8px}  /* 44 px tap targets that meet between the two labels */
  .scan-tg button:hover,.scan-tg button[aria-pressed="true"]{color:var(--ink)}
  /* teal always means the AI side, as on desktop: "Ads inside AI" stays depth ink; the side on screen gets the bar */
  .scan-tg button[data-v="ans"]{color:var(--depth-ink)}
  .scan-tg button[aria-pressed="true"]::before{background:var(--depth)}
  .scan-line{top:80px;height:436px}
  /* Google's mobile Shopping tile: a 112 px square photo on the card's white, left, with title, price, store and
     rating beside it (no grey band, no letterbox); the same size as the answer's product tile across the line */
  .gs{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--space-3);align-items:start}
  .sc-ad .ph{width:112px;height:112px;background:#fff}
  .sc-ad .ph img{width:100%;height:100%;object-fit:contain;object-position:center}
  .gs-p{font-size:20px;line-height:28px}
  .gt-h{font-size:20px;line-height:26px;-webkit-line-clamp:4}
  .gt-d2{-webkit-line-clamp:5;font-size:15px;line-height:22px}
  .az-p{font-size:28px;line-height:32px}
  .sc-lead{-webkit-line-clamp:3}
  .sc-say{-webkit-line-clamp:8}
  /* the answer's product tile at 112 px, so the photo matches the ad's across the line; four title lines beside it */
  .tile{grid-template-columns:minmax(0,1fr) 112px;gap:var(--space-3)}
  .tile .ph{width:112px;height:112px}
  .tile .ph img{width:96px;height:96px}
  .tile-t{-webkit-line-clamp:4}
  /* the three carriers stack */
  .same-row{grid-template-columns:minmax(0,1fr)}
  .same-ad,.same-ad:first-child,.same-ad:last-child{grid-template-columns:72px minmax(0,1fr);padding:var(--space-4) 0}
  .same-ad+.same-ad{border-left:0;border-top:1px solid var(--line)}
  .same-ad:last-child{padding-bottom:0}
  .same-ad .ph{width:72px;height:72px}
  .same-ad .ph img{width:60px;height:60px}
}


/* ---------------------------------------------------------------- 600 and below */
@media (max-width: 600px){
  .sec,.sec-in{padding-top:var(--space-12)}
  .h1{font-size:28px;line-height:32px;letter-spacing:-.02em}
  .hero{padding-top:32px}
  .hero-head .display{font-size:40px;line-height:44px;letter-spacing:-.025em}
  .hero-head .lead{margin-top:var(--space-4)}
  .cta-row{flex-direction:column;align-items:stretch;gap:var(--space-1);width:100%}
  .cta-row .tlink{justify-content:center}
  .stage{margin-top:var(--space-4)}
  .libs{padding-top:var(--space-12)}
  .libs-head{flex-direction:column;align-items:flex-start;gap:var(--space-1)}
  .lib-row a{padding:var(--space-4)}
  .lib-mark{width:40px;height:40px}
  .lib-name{margin-top:var(--space-3);font-size:16px;line-height:24px}
  .lib-dom,.lib-go{display:none}
  /* a library's ad count and its dates take one line each, so no line ends on a middle dot */
  .same{margin-top:var(--space-8);padding:var(--space-4)}
  .ledger{grid-template-columns:minmax(0,1fr);margin-top:var(--space-6)}
  .ledger li:nth-child(n+7){display:none}
  .lgp.l{width:36px;height:36px}
  .adv{gap:var(--space-2)}
  .adv::before{inset:0}
  .tabs-wrap{margin-top:var(--space-8)}
  .tabs{gap:var(--space-2)}
  .tab{justify-content:center;align-items:center;min-height:44px;padding:0;border:1px solid var(--line);border-radius:var(--radius-full)}
  .tab[aria-selected="true"]{background:var(--foam);border-color:var(--foam)}
  .tab-l{font-size:14px;line-height:20px;letter-spacing:0;text-transform:none}
  .tab::after{display:none}
  .tab-h,.tab-d{display:none}
  .pn-intro{display:block;margin-bottom:var(--space-4)}
  .frame-bar{padding:0 var(--space-4)}
  .frame-src{display:none}
  .frame-body{min-height:0}
  .f-col,.f-main{padding:var(--space-6) var(--space-4)}
  .units{grid-template-columns:minmax(0,1fr)}
  .f-buy .f-col{grid-template-columns:minmax(0,1fr)}
  .unit:nth-child(2),.unit:nth-child(3){display:none}
  .unit,.unit:nth-child(even){padding:var(--space-4) 0}
  .unit:nth-child(odd){border-right:0}
  .app-tools{padding:var(--space-3) var(--space-4)}
  .pick,.app-detail{display:none}
  .table-wrap{border-bottom:0}
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block}
  .tbl tr{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line)}
  .tbl tbody tr:last-child,.tbl tbody tr:nth-child(6){border-bottom:0}
  .tbl tbody tr:nth-child(n+7){display:none}
  .tbl td,.tbl th:first-child,.tbl td:first-child{padding:0;border:0}
  .tbl td.c-sf,.tbl td.c-dt{display:none}
  .tbl tr.hl{background:var(--foam)}
  .lboard li{grid-template-columns:16px 32px minmax(0,1fr) 28px auto;row-gap:0}
  .lboard .bar{display:none}
  .thumb:nth-child(n+3){display:none}
  .close-card{padding:var(--space-12) var(--space-6)}
  .close-logo{width:160px}
  .close-tag{font-size:28px;line-height:32px;letter-spacing:-.02em}
  .close-cta{flex-direction:column;align-items:stretch}
  .close-cta .tlink{justify-content:center}
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--space-8) var(--space-4)}
  .foot-brand{grid-column:1 / -1}
}
/* phones up to 480 px: a tighter hero head (spacing only, every word stays), so the first card's whole photo and its
   "Sponsored" line show on a 390 x 844 first screen */
@media (max-width: 480px){
  .hero{padding-top:var(--space-4)}
  .hero-head .lead{margin-top:var(--space-3)}
  .cta-row{margin-top:20px}
  .stage{margin-top:var(--space-2)}
}
@media (max-width: 360px){
  .nav-in{gap:var(--space-3)}
  .nav-logo{padding:5px 0;margin-left:-8px}
  .nav-logo svg{width:100px}
  .nav-actions{gap:var(--space-3)}
  .nav-cta{padding:0 var(--space-3)}
}

/* ---------------------------------------------------------------- Cookie banner (the shared /ph-consent.js, live host only)
   "body" outranks the banner's own injected styles: a raised card in the bottom-right corner, clear of the hero's line,
   with Accept and Reject at equal weight and no teal, so "Get started" stays the one primary button. */
body .phc-banner{left:auto;right:16px;bottom:16px;max-width:400px;margin:0;padding:16px;border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--surface-raised);color:var(--ink);box-shadow:var(--shadow-float);font:400 14px/20px var(--sans)}
body .phc-banner p{margin:0 0 12px;color:var(--ink-muted)}
body .phc-banner a{color:var(--depth-ink)}
body .phc-row button{height:36px;padding:0 16px;border:1px solid var(--line);border-radius:var(--radius-full);background:var(--surface);color:var(--ink);font:600 14px/1 var(--sans)}
body .phc-row button:hover{border-color:var(--ink-muted)}
/* from 1024 px it docks bottom left, over the ad side, so it never covers an underlined phrase on the answer side */
@media (min-width: 1024px){
  body .phc-banner{left:16px;right:auto}
}
@media (max-width: 600px){
  body .phc-banner{left:16px;right:16px;max-width:none}
}

/* ---------------------------------------------------------------- Reduced motion: still frames, underlines drawn */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
  .tok{background-size:100% 3px}
}

/* ---------------------------------------------------------------- Hero cards per width: the ChatGPT answer, the Alexa
   sponsored prompt and the Google Shopping ad keep every line inside the card at each card size */
@media (max-width: 1439px){
  .cg-ask,.cg-l{margin-top:var(--space-3)}
  .cg-ad{padding:var(--space-3)}
  .cg-d{-webkit-line-clamp:1}
}
@media (min-width: 1440px){
  .cg-l{-webkit-line-clamp:3}
}
@media (max-width: 1279px){
  .cg-l{font-size:16px;line-height:24px}
  .cg-ad{grid-template-columns:minmax(0,1fr) 88px;gap:var(--space-3)}
  .cg-ad .ph{width:88px;height:88px}
}
@media (min-width: 1024px) and (max-height: 800px){
  .cg-l{-webkit-line-clamp:1}
  .sc-alexa .sc-say{-webkit-line-clamp:3}
}
/* 768-1023: the Shopping ad keeps its photo beside the text, leading, as on desktop, so its rating stays inside the card */
@media (min-width: 768px) and (max-width: 1023px){
  .gs{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--space-3);align-items:start}
  .gs .ph{order:0}
  .sc-ad .ph{width:112px;height:112px}
  .sc-alexa .sc-say{-webkit-line-clamp:4}
  .sc-meta{padding-top:var(--space-1)}  /* the footer stays inside the padding when the sponsored prompt takes two lines */
  .cg-ad{grid-template-columns:minmax(0,1fr) 72px}
  .cg-ad .ph{width:72px;height:72px}
}
/* below 1024 px the product meta never breaks mid-unit or ends on a dot: price and rating on one line, the review
   count under it */
@media (max-width: 1023px){
  .tile-m .tm-sep{display:none}
  .tile-m .tm-rv{display:block}
}
@media (max-width: 767px){
  .cg-l{-webkit-line-clamp:5}
  .cg-d{-webkit-line-clamp:2}
  .sc-alexa .sc-say{-webkit-line-clamp:7}
}
/* answer text never shrinks to a cut line: each block keeps its clamped height, and short screens clamp further */
.sc-ans .sc-lead,.sc-ans .sc-say,.sc-adh,.sc-adb,.tile{flex:none}
@media (min-width: 1024px) and (max-height: 800px){
  .sc-lead{-webkit-line-clamp:1}
  .sc-adb{-webkit-line-clamp:1}
  .tile{grid-template-columns:minmax(0,1fr) 88px}
  .tile .ph{width:88px;height:88px}
  .tile .ph img{width:76px;height:76px}
  .tile-t{-webkit-line-clamp:3}
}
/* phones up to 600 px: the answer's first line and the AI Mode lead take two lines, and the ChatGPT sponsored card
   follows the answer instead of sitting at the card's foot, so it starts at the first screen's edge (390 x 844) */
@media (max-width: 600px){
  .sc-lead{-webkit-line-clamp:2}
  .sc-cg .cg-l{-webkit-line-clamp:3}
  .sc-cg .cg-ask,.sc-cg .cg-l{margin-top:var(--space-3)}
  .sc-cg .cg-ad{margin-top:var(--space-4)}
  .cg-by{flex-wrap:wrap;row-gap:0}
  .cg-by [data-f="name"]{min-width:0;white-space:normal;overflow-wrap:anywhere}
  .cg-sp{flex-basis:100%}
  .cg-sp::before{content:none}
  /* the mono readout only repeated the card's own header, so phones drop it and the toggle and card move up 28 px */
  #scan-now{display:none}
  .scan{height:484px}
  .scan-tg{top:8px}
  .scan-track{top:60px}
  .scan-line{top:52px;height:416px}
  /* the card is as tall as the tallest answer (an Alexa answer) plus 20 px, so no answer card is half empty; the
     Shopping specimen's photo and padding step down to fit it */
  .sc{height:400px}
  .sc-ad .gt,.sc-ad .gs,.sc-ad .az{padding:var(--space-3)}
}
/* multi-line sponsored phrases in the product tile: 28 px lines give each 3 px AdToken bar about 6 px of air above the
   next line, so a three-line phrase reads as one phrase, not ruled lines (tall desktop screens, where the card has room) */
@media (min-width: 1024px) and (min-height: 801px){
  .tile-t{line-height:28px}
}
/* phones up to 480 px: the answer's first line (the recorded l, whole in the DOM) takes one line, so the underlined
   phrase sits fully above a 390 x 844 fold */
@media (max-width: 480px){
  .sc-ans .sc-lead{-webkit-line-clamp:1}
}

/* ---------------------------------------------------------------- loop 7 */
/* desktop and tablet belt: each ad (format label plus white specimen) sits centred in its lane, so the space above and
   below it is equal and no bare band of stage hangs under the shorter specimens */
@media (min-width: 768px){
  /* loop 8: top-aligned, not centred. Both cards share the .sc padding and a 1 px border, so the ad's format row
     ("Google Ads · Shopping ad") sits on the answer's engine row ("Google AI Mode") straight across the line for every
     format, and the spare stage falls under the shorter specimens instead of above them */
  .sc-ad{justify-content:flex-start}
  /* the AI Mode sponsored title takes two lines on the belt (the recorded title stays whole in the DOM), like the
     Shopping title it came from, so three stacked 3 px bars never outweigh the scanner line */
  .tile-t{-webkit-line-clamp:2}
}
/* desktop and tablet belt: the white specimen is flush with the 592 px answer card across the line (no side padding
   or side border on the ad's lane); this also covers the reduced-motion still */
@media (min-width: 768px){
  .scan-ad .sc-ad{padding-left:0;padding-right:0;border-left-width:0;border-right-width:0}
}
/* phones up to 430 px: a tighter hero head (type and spacing only, every word stays), so the stage starts higher and the
   first sweep's answer side shows on a 390 x 844 first screen */
@media (max-width: 430px){
  .hero{padding-top:0}
  .hero-head .lead{font-size:16px;line-height:24px}
  .cta-row{margin-top:var(--space-4)}
  .stage{margin-top:0}
  .sc-q,.cg-ask{font-size:14px;line-height:20px}
}

/* ---------------------------------------------------------------- loop 8 */
/* desktop and tablet belt: the sponsor line ("Sponsored · Our Place") sits on the answer card's bottom padding, so a
   short answer never ends in a bare band; the cards keep their fixed sizes (home.js reads them from the page) */
@media (min-width: 768px){
  .sc-ans>.sc-meta{margin-top:auto}
}
/* phones up to 480 px: the sponsored title in the product tile takes three lines (the recorded title stays whole in the
   DOM), so the 3 px AdToken bars never outweigh the photo beside them */
@media (max-width: 480px){
  .tile-t{-webkit-line-clamp:3}
}
/* phones up to 430 px: 12 px of air between the nav's hairline and the headline */
@media (max-width: 430px){
  .hero{padding-top:var(--space-3)}
}

/* ---------------------------------------------------------------- loop 9 */
/* the sponsor line sits on the answer card's bottom padding at every width (phones too), and a ChatGPT ad card sits on
   that same line, 16 px or more under the answer's first lines, so the bottom edges of the AI side line up card to card */
.sc-ans>.sc-meta{margin-top:auto}
.sc-cg .cg-ad{margin-top:auto}
.sc-cg .cg-l{margin-bottom:var(--space-4)}
@media (min-width: 1024px) and (max-height: 800px){
  .sc-cg .cg-l{margin-bottom:var(--space-3)}  /* short laptops: the 304 px card keeps the 12 px it had above the ad */
}
/* two- and three-line specimen titles break without a one-word last line (the recorded text stays whole in the DOM) */
.gs-t,.az-t,.gt-h{text-wrap:pretty}
/* phones: the card is as tall as the tallest answer (an Alexa answer) plus about 24 px, not 120 px of bare surface under
   a short one; the stage, the line and the track keep their offsets */
@media (max-width: 767px){
  .scan{height:520px}
  .sc{height:408px}
  .scan-line{height:424px}
}
@media (max-width: 600px){
  .scan{height:476px}
  .sc{height:392px}
  .scan-line{height:408px}
}
/* ---------------------------------------------------------------- loop 10 */
/* the answer cards other than ChatGPT take their natural height, top-aligned like the specimens across the line, with the
   sponsor line 24 px under the answer (12 px margin plus its 12 px padding), so no card carries an empty band. ChatGPT
   keeps the fixed height its sponsored card is built for. */
.sc-ans:not(.sc-cg){height:auto;align-self:flex-start}
.sc-ans:not(.sc-cg)>.sc-meta{margin-top:var(--space-3)}
/* 1024-1279: the sponsor line 20 px under the answer, and the Alexa answer in four lines, so no answer outgrows the
   352 px lane */
@media (min-width: 1024px) and (max-width: 1279px) and (min-height: 801px){
  .sc-ans:not(.sc-cg)>.sc-meta{margin-top:var(--space-2)}
  .sc-alexa .sc-say{-webkit-line-clamp:4}
}
/* 1280 and up: the AI Mode lead in two lines at the 536 px card, so the product answer stays inside the 392 px lane */
@media (min-width: 1280px) and (min-height: 801px){
  .sc-lead{-webkit-line-clamp:2}
}
/* tablets (768-1023) and short laptops (1024 and up, 800 px tall or less): the cards are already full at their fixed
   height, so they keep it and the sponsor line stays on the bottom padding */
@media (min-width: 768px) and (max-width: 1023px){
  .sc-ans:not(.sc-cg){height:320px;align-self:auto}
  .sc-ans:not(.sc-cg)>.sc-meta{margin-top:auto}
  .sc-alexa .ax-chip{margin-top:var(--space-2)}  /* a two-line sponsored prompt (Timberland) keeps the sponsor line inside the padding */
}
@media (min-width: 1024px) and (max-height: 800px){
  .sc-ans:not(.sc-cg){height:304px;align-self:auto}
  .sc-ans:not(.sc-cg)>.sc-meta{margin-top:auto}
}
@media (max-width: 600px){
  .sc-ans:not(.sc-cg)>.sc-meta{margin-top:var(--space-1)}  /* 16 px on phones */
}
@media (max-width: 380px){
  .sc-alexa .sc-say{-webkit-line-clamp:6}  /* 360 px phones: the Alexa answer stays inside the 392 px card */
}
/* phones up to 600 px: the Google Shopping ad as Google's own mobile tile, the photo on the tile's white across its full
   width, then the title, price, store and rating under it */
@media (max-width: 600px){
  .gs{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-3)}
  .sc-ad .gs .ph{width:100%;height:132px}
  .sc-ad .gs .ph img{width:100%;height:132px}  /* the whole product, contained on the white, never cropped */
}
/* Abyss: an advertiser favicon in the answer's sponsor line or the ChatGPT byline sits on a plain white chip (no ring,
   no inset), so a dark square favicon (Bose) reads as a logo, not an outlined box */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sc-meta img,:root:not([data-theme="light"]) .cg-by img{padding:0;border-radius:2px;background:#fff;box-shadow:none}
}
:root[data-theme="dark"] .sc-meta img,:root[data-theme="dark"] .cg-by img{padding:0;border-radius:2px;background:#fff;box-shadow:none}

/* ---------------------------------------------------------------- loop 11 */
/* short laptops (1280 x 720, 1366 x 768): 8 px more air between the CTAs and the stage hairline, taken from the
   space above the headline, so the stage starts where it did */
@media (min-width: 1024px) and (max-height: 800px){
  .hero{padding-top:20px}
  .stage{margin-top:20px}
}
/* 1280 and up (Update 2): the belt has no opening ad to head, so "Ads today" ends 32 px left of the line, mirroring
   "Ads inside AI" 32 px right of it: the two states read as one before -> after pair across the band */
@media (min-width: 1280px){
  .rail-l{left:auto;right:calc(100% - var(--scan-x) + 32px);text-align:right}
}
/* phones up to 480 px: spacing only (every word stays), so the first ad's price and the line's first sweep sit on a
   390 x 844 first screen: the link sits on the button, the toggle, line and card move up 6 px, and Google's mobile
   Shopping photo is 112 px tall (the whole product, contained on the white) */
@media (max-width: 480px){
  .cta-row{gap:0}
  .scan{height:470px}
  .scan-tg{top:4px}
  .scan-track{top:54px}
  .scan-line{top:46px}
  .sc-ad .gs .ph{height:112px}
  .sc-ad .gs .ph img{height:112px}
}
/* 1200 and up: Pause stays the containing block of its own 44 px tap area (.pill::after). Static, the area grew to the
   whole foot row, so a click anywhere in the rail paused the belt and the page scrolled 4 px sideways at 1200-1210 */
@media (min-width: 1200px){
  .scan-foot .scan-pause{position:relative;top:auto;right:auto}
}
/* ---------------------------------------------------------------- loop 12 */
/* phones up to 480 px: Google's mobile Shopping photo at 96 px (the whole product, contained on the white; the same size
   as the product photo in the AI Mode tile across the line) and 8 px between it and the title, so the whole specimen,
   its rating row included, sits on a 390 x 844 first screen */
@media (max-width: 480px){
  .sc-ad .gs{gap:var(--space-2)}
  .sc-ad .gs .ph,.sc-ad .gs .ph img{height:96px}
}
/* every advertiser favicon in an answer's sponsor line and in the ChatGPT byline sits on the same white plate: in Stone
   with a hairline ring, in Abyss a 2 px white plate (no ring), so a dark square favicon (Bose) reads as a logo, not a hole */
.cg-by img{padding:1px;border-radius:4px;background:#fff;box-shadow:0 0 0 1px var(--line)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sc-meta img,:root:not([data-theme="light"]) .cg-by img{padding:2px;border-radius:4px;background:#fff;box-shadow:none}
}
:root[data-theme="dark"] .sc-meta img,:root[data-theme="dark"] .cg-by img{padding:2px;border-radius:4px;background:#fff;box-shadow:none}
/* phones: the AI Mode sponsored title on 28 px lines (as on tall desktops), so each 3 px AdToken bar keeps about 6 px of
   air above the next line and a three-line title reads as one underlined phrase, not a striped block */
@media (max-width: 767px){
  .tile-t{line-height:28px}
}

/* ================================================================ Update 2 (30 Oct, owner): calmer first screen,
   smaller cards. One block for the desktop and tablet hero (768 px and up); phones keep their parked card above.
   The headline gets air under the nav (80 px at 1440 x 900, 56 px or more on 745-800 px tall laptops), the head reads
   headline -> lead -> CTAs -> conveyor, and the whole conveyor sits on the first screen. Every card is one
   size per tier (--cw x --ch, no taller than 280 px), so the belt is a calm, even row; the ad side and the AI side both
   run from the line to the screen edge, as on a continuous belt. */
@media (min-width: 768px){
  .scan{--cw:340px;--ch:272px;--gap:32px;--top:56px;--below:24px;--shop:136px;--tile:72px;height:calc(var(--top) + var(--ch) + var(--below))}
  .scan-track{top:var(--top);gap:var(--gap)}
  .scan-line{top:calc(var(--top) - 12px);height:calc(var(--ch) + 24px)}  /* 12 px past the card at both ends, on every tier */
  .scan .sc{width:var(--cw);height:var(--ch);padding:var(--space-4)}
  /* the ad: its format row on the card's top padding (level with the answer's top row), the white specimen 8 px under it */
  .scan .scan-ad .sc-ad{padding:var(--space-4) 0 0}
  .scan .nv-top{margin-bottom:var(--space-2)}
  .scan .sc-ad .gt,.scan .sc-ad .gs,.scan .sc-ad .az{padding:var(--space-3)}
  /* Google Shopping: the photo leads, then title, bold price, store, rating */
  .scan .gs{display:grid;grid-template-columns:var(--shop) minmax(0,1fr);gap:var(--space-4);align-items:center}
  .scan .sc-ad .ph{width:var(--shop);height:var(--shop)}
  .scan .gs-b .nv-sp{margin-bottom:var(--space-1)}
  .scan .gs-t{font-size:15px;line-height:20px}
  .scan .gs-p{margin-top:var(--space-1);font-size:16px;line-height:24px}
  .scan .gs-st{margin-top:2px;font-size:13px;line-height:20px}
  .scan .gs-r{margin-top:0;font-size:13px;line-height:20px}
  /* Google search ad: Sponsored, favicon + name + domain, blue headline, grey description */
  .scan .gt .nv-sp{margin-bottom:var(--space-2)}
  .scan .gt-fav{width:24px;height:24px}
  .scan .gt-fav .nv-fav{width:16px;height:16px}
  .scan .gt-who{font-size:13px;line-height:18px}
  .scan .gt-h{margin-top:var(--space-2);font-size:18px;line-height:24px;-webkit-line-clamp:2}
  .scan .gt-d2{margin-top:var(--space-1);font-size:14px;line-height:20px;-webkit-line-clamp:3}
  /* Amazon listing: Sponsored, brand, title, rating, price */
  .scan .az-sp{margin-bottom:2px}
  .scan .az-brand{font-size:13px;line-height:18px}
  .scan .az-t{margin-top:2px;font-size:15px;line-height:20px;-webkit-line-clamp:3}
  .scan .az-r{margin-top:var(--space-1);font-size:13px;line-height:20px}
  .scan .az-p{margin-top:var(--space-1);font-size:24px;line-height:28px}
  /* the AI side: one height for every answer, the sponsor line (or ChatGPT's ad card) on the bottom padding */
  .scan .sc-ans,.scan .sc-ans:not(.sc-cg){height:var(--ch);align-self:auto}
  .scan .sc-q,.scan .cg-ask{max-width:100%;margin-top:var(--space-2);padding:6px var(--space-3);font-size:14px;line-height:20px}
  .scan .sc-lead,.scan .sc-say,.scan .cg-l{margin-top:var(--space-2);font-size:15px;line-height:22px}
  .scan .sc-lead{-webkit-line-clamp:2}
  .scan .sc-say{-webkit-line-clamp:4}
  .scan .sc-adh{margin-top:var(--space-2);font-size:15px;line-height:22px}
  .scan .sc-adb{margin-top:2px;font-size:14px;line-height:20px;-webkit-line-clamp:1}
  .scan .tile{grid-template-columns:minmax(0,1fr) var(--tile);gap:var(--space-3);margin-top:var(--space-2)}
  .scan .tile .ph{width:var(--tile);height:var(--tile)}
  .scan .tile .ph img{width:100%;height:100%}  /* the photo fills the tile, as ChatGPT's does: no white mat inside the hairline */
  .scan .tile-t{font-size:15px;line-height:22px;-webkit-line-clamp:2}
  .scan .tile-m{font-size:13px;line-height:20px}
  .scan .ax-chip{margin-top:var(--space-2);padding:5px var(--space-3);border-radius:var(--radius-sm)}
  .scan .sc-alexa .sc-say{margin-top:var(--space-2);-webkit-line-clamp:3}
  .scan .sc-ans>.sc-meta,.scan .sc-ans:not(.sc-cg)>.sc-meta{margin-top:auto;padding-top:var(--space-2)}
  .scan .sc-cg .cg-l{margin-bottom:var(--space-2);-webkit-line-clamp:2}
  .scan .sc-cg .cg-ad{margin-top:auto;grid-template-columns:minmax(0,1fr) var(--tile);gap:var(--space-3);padding:var(--space-2) var(--space-3)}
  /* no tile behind the photo: a landscape image sits straight on the ad card, with no white bars above and below it, and
     a logo on its own white (AT&T) keeps that white, since every cg-*.webp is opaque. Contained, never cropped */
  .scan .cg-ad .ph{width:var(--tile);height:var(--tile);border-color:transparent;background:transparent}
  .scan .cg-t{margin-top:2px;font-size:14px;line-height:20px}
  .scan .cg-d{margin-top:0;font-size:13px;line-height:20px;-webkit-line-clamp:1}
}
/* 1024 and up: cards 352 x 256 on a 32 px gap, the Shopping photo 152 px (136 px on the 240 and 232 px tall cards). Each
   side of the line is about 720 px wide at 1440, so a whole ad and a whole answer sit on their sides nearly all the time,
   at the same belt speed; at 352 px the answer's product line ("$375.00 · 4.6 · 412 reviews") still takes one line beside
   its 72 px tile */
@media (min-width: 1024px){
  .scan{--cw:352px;--gap:32px;--shop:152px}
}
/* big screens: cards 448 x 280 (the cap) */
@media (min-width: 1680px) and (min-height: 1000px){
  .scan{--cw:448px;--ch:280px;--gap:56px;--shop:184px;--tile:88px}
}
/* the hero head on laptops and up: 80 px of air under the nav, the lead 32 px under the headline, the CTAs 32 px under the
   lead, and the conveyor 40 px under the CTAs. The lead
   breaks between its two sentences: the problem on line 1, the promise (the sentence that sells) with a clean start on line 2 */
@media (min-width: 1024px){
  .hero{padding-top:80px}
  .hero-head .lead{margin-top:var(--space-8);max-width:800px;text-wrap:wrap}
  .hero-head .lead .muted{display:block}
  .cta-row{margin-top:var(--space-8)}
  .stage{margin-top:40px}
}
@media (min-width: 1024px) and (min-height: 1000px){
  .hero{padding-top:96px}
}
/* laptops 800 px tall or less (1366 x 768, 1280 x 800): 76 px of air and a slightly tighter rail; the cards stay full size */
@media (min-width: 1024px) and (max-height: 800px){
  .hero{padding-top:76px}
  .hero-head .lead{margin-top:var(--space-8)}
  .cta-row{margin-top:var(--space-6)}
  .stage{margin-top:28px}
  .scan{--top:48px;--below:20px}
}
/* 745-760 px tall (the owner's 1460 x 745 window): 72 px of air. The gaps group the head: 20 px lead,
   28 px then the CTAs (the moment of action), 28 px to the conveyor */
@media (min-width: 1024px) and (max-height: 760px){
  .hero{padding-top:72px}
  .cta-row{margin-top:28px}
  .stage{margin-top:28px}
}
/* phones up to 430 px: the headline 24 px under the nav (was 12), so it no longer sits on the nav's hairline; the stage
   moves down 12 px and the first ad's price and rating stay on a 390 x 844 first screen */
@media (max-width: 430px){
  .hero{padding-top:var(--space-6)}
}
/* tablets (768-1023, cards 340 px wide): the AI Mode lead in one line (the product tile's reviews take their own line)
   and the Alexa answer in two (a long sponsored prompt takes two lines), so every answer ends on its bottom padding */
@media (min-width: 768px) and (max-width: 1023px){
  .scan .sc-lead{-webkit-line-clamp:1}
  .scan .sc-alexa .sc-say{-webkit-line-clamp:2}
}

/* ---------------------------------------------------------------- Update 2, belt loop 1 */
/* desktop and tablet belt: the ad and its answer share one rectangle, so the band cuts one card in two instead of
   swapping a floating label and a smaller specimen for a bigger panel. The ad card is the white of the ad's own surface
   (someone else's ad, so it stays white in Abyss) with Google's #dadce0 hairline and the brand's 4 px corner; its format
   row sits on the card's 16 px top padding, level with the answer's engine row, and the specimen inside loses its own
   box (no box in a box). The format row keeps the specimen's grey on the white, in Abyss too */
@media (min-width: 768px){
  .scan .scan-ad .sc-ad{padding:var(--space-4);background:#fff;border:1px solid var(--nv-line);border-radius:var(--radius-sm)}
  .scan .sc-ad .gt,.scan .sc-ad .gs,.scan .sc-ad .az{padding:0;border:0;border-radius:0;background:transparent}
  .scan .scan-ad .nv-top{height:20px;margin-bottom:var(--space-2);color:var(--nv-muted)}
  .scan .scan-ad .nv-k::before{color:var(--nv-muted)}
  /* every specimen sits centred in the white under the format row, so a short Amazon or search ad never ends in a bare
     white band and the row's text does not jump card to card */
  .scan .scan-ad .sc-ad>.gs,.scan .scan-ad .sc-ad>.az,.scan .scan-ad .sc-ad>.gt{margin-block:auto}
  /* the answer's surface (logo and name) top right, the first part of the card out of the line, so the card at the band
     names where the ad now runs; the date top left, hidden until the card has crossed (.is-hdr, home.js) */
  .scan .scan-ans .sc-ans .sc-top{flex-direction:row-reverse}
  /* the Alexa answer's sponsored prompt on one line (the recorded prompt stays whole in the DOM), so a long one
     (Timberland) never pushes the sponsor line past the card's bottom padding on the narrower cards */
  .scan .ax-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
}
/* phones (under 768): the parked card 342 x 272 (the 280 px cap), in the belt's card language: the ad on its white card
   with the format row inside, Google Shopping side by side with a 96 px photo, and the answer at the belt's 15/22 type,
   so the whole pair (rating row and sponsor line included) sits on a 390 x 844 first screen. The stage is the track's
   top, the card and 24 px; the line runs 8 px past the card at each end */
@media (max-width: 767px){
  .scan{height:384px}
  .scan .sc{height:272px}
  .scan-line{height:288px}
  .scan .scan-ad .sc-ad{padding:var(--space-4);background:#fff;border:1px solid var(--nv-line);border-radius:var(--radius-sm)}
  .scan .sc-ad .gt,.scan .sc-ad .gs,.scan .sc-ad .az{padding:0;border:0;border-radius:0;background:transparent}
  .scan .scan-ad .nv-top{height:20px;margin-bottom:var(--space-3);color:var(--nv-muted)}
  .scan .scan-ad .nv-k::before{color:var(--nv-muted)}
  .scan .scan-ad .sc-ad>.gs,.scan .scan-ad .sc-ad>.az,.scan .scan-ad .sc-ad>.gt{margin-block:auto}
  .scan .gs{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--space-3);align-items:center}
  .scan .sc-ad .gs .ph,.scan .sc-ad .gs .ph img{width:96px;height:96px}
  .scan .gs-b .nv-sp{margin-bottom:var(--space-1)}
  .scan .gs-t{font-size:15px;line-height:20px;-webkit-line-clamp:2}
  .scan .gs-p{margin-top:var(--space-1);font-size:18px;line-height:24px}
  .scan .gs-st{margin-top:2px;font-size:13px;line-height:20px}
  .scan .gs-r{margin-top:0;font-size:13px;line-height:20px}
  .scan .gt .nv-sp{margin-bottom:var(--space-2)}
  .scan .gt-fav{width:24px;height:24px}
  .scan .gt-fav .nv-fav{width:16px;height:16px}
  .scan .gt-who{font-size:13px;line-height:18px}
  .scan .gt-h{margin-top:var(--space-2);font-size:18px;line-height:24px;-webkit-line-clamp:2}
  .scan .gt-d2{margin-top:var(--space-1);font-size:14px;line-height:20px;-webkit-line-clamp:3}
  .scan .az-sp{margin-bottom:2px}
  .scan .az-brand{font-size:13px;line-height:18px}
  .scan .az-t{margin-top:2px;font-size:15px;line-height:20px;-webkit-line-clamp:3}
  .scan .az-r{margin-top:var(--space-1);font-size:13px;line-height:20px}
  .scan .az-p{margin-top:var(--space-1);font-size:24px;line-height:28px}
  .scan .sc-q,.scan .cg-ask{max-width:100%;margin-top:var(--space-2);padding:6px var(--space-3);font-size:14px;line-height:20px}
  .scan .sc-lead,.scan .sc-say,.scan .cg-l{margin-top:var(--space-2);font-size:15px;line-height:22px}
  .scan .sc-lead,.scan .sc-ans .sc-lead{-webkit-line-clamp:2}
  .scan .sc-say{-webkit-line-clamp:4}
  .scan .sc-adh{margin-top:var(--space-2);font-size:15px;line-height:22px}
  .scan .sc-adb{margin-top:2px;font-size:14px;line-height:20px;-webkit-line-clamp:1}
  .scan .tile{grid-template-columns:minmax(0,1fr) 72px;gap:var(--space-3);margin-top:var(--space-2)}
  .scan .tile .ph{width:72px;height:72px}
  .scan .tile .ph img{width:100%;height:100%}
  .scan .tile-t{font-size:15px;line-height:22px;-webkit-line-clamp:2}
  .scan .tile-m{font-size:13px;line-height:20px}
  .scan .ax-chip{margin-top:var(--space-2);padding:5px var(--space-3);border-radius:var(--radius-sm)}
  .scan .ax-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
  .scan .sc-alexa .sc-say{margin-top:var(--space-2);-webkit-line-clamp:3}
  .scan .sc-ans>.sc-meta{margin-top:auto;padding-top:var(--space-2)}
  .scan .sc-cg .cg-ask,.scan .sc-cg .cg-l{margin-top:var(--space-2)}
  .scan .sc-cg .cg-l{margin-bottom:var(--space-2);-webkit-line-clamp:2}
  .scan .sc-cg .cg-ad{margin-top:auto;grid-template-columns:minmax(0,1fr) 72px;gap:var(--space-3);padding:var(--space-2) var(--space-3)}
  .scan .cg-ad .ph{width:72px;height:72px;border-color:transparent;background:transparent}
  .scan .cg-t{margin-top:2px;font-size:14px;line-height:20px}
  .scan .cg-d{margin-top:0;font-size:13px;line-height:20px;-webkit-line-clamp:1}
  /* the ChatGPT byline on one line ("Expedia · Sponsored"), as on the belt */
  .scan .cg-by{flex-wrap:nowrap}
  .scan .cg-by [data-f="name"]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .scan .cg-sp{flex-basis:auto}
  .scan .cg-sp::before{content:"\00b7"}
}
/* 730 px tall or less (1280 x 720): 60 px of air, the lead 20 px under the headline and even gaps, so the whole conveyor
   still ends inside the first screen */
@media (min-width: 1024px) and (max-height: 730px){
  .hero{padding-top:60px}
  .hero-head .lead{margin-top:20px}
  .cta-row{margin-top:20px}
  .stage{margin-top:var(--space-6)}
}
/* real laptop windows, 700 px tall or less (a 1366 x 768 or 1280 x 800 screen less the browser's toolbars): tighter gaps,
   so the sponsor line and the Amazon price stay on the first screen. The headline keeps its 56 px minimum */
@media (min-width: 1200px) and (max-height: 700px){
  .hero{padding-top:56px}
  .cta-row{margin-top:20px}
  .stage{margin-top:20px}
}
@media (max-width: 600px){
  .scan{height:356px}
}
@media (max-width: 480px){
  .scan{height:352px}
}

/* ---------------------------------------------------------------- Update 2, belt loop 2 */
/* the AI card's date at label size (12/16): the surface logo and name lead the top row, which is what the "Ads inside AI"
   rail promises */
.scan-ans .sc-ans .sc-date{font:400 12px/16px var(--sans)}
/* tablets 800 px tall or more: the headline gets air under the nav too (56 px; 72 px from 900 px tall), and the stage
   stays on the first screen. Shorter tablets keep 40 px because their stage already ends below the fold */
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 800px){
  .hero{padding-top:56px}
}
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 900px){
  .hero{padding-top:72px}
}
/* 1024-1199 and 800 px tall or less: the lead 20 px under the headline */
@media (min-width: 1024px) and (max-width: 1199px) and (max-height: 800px){
  .hero-head .lead{margin-top:20px}
}
/* phones up to 600 px: the conveyor follows the CTAs straight away */
@media (max-width: 600px){
  .stage{margin-top:var(--space-3)}
}
/* phones up to 430 px: the two actions share one row, which returns 44 px to the card */
@media (max-width: 430px){
  .cta-row{flex-direction:row;align-items:center;gap:var(--space-4)}
  .cta-row .btn-primary{flex:1 1 auto}
  .cta-row .tlink{flex:none;font-size:14px}
}

/* ---------------------------------------------------------------- Update 2, belt loop 3 */
/* the Amazon listing's filled stars in the orange of the Amazon mark one row above (surfaces/amazon.svg, #f90), a specimen
   colour inside someone else's ad, so this card reads as Amazon at a glance; Google's stars stay ink */
.scan .az-r .stars::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon fill='%23ff9900' points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E")}

/* ---------------------------------------------------------------- Human prompts (31 Oct, owner) */
/* the prompt is a person's whole question now: the bubble wraps and shows every word */
.sc-q,.cg-ask{max-width:100%;white-space:normal;overflow:visible;text-overflow:clip}
/* the whole prompt comes first on these cards: the AI's lead line and the product title give up lines for it */
.scan-ans .sc-ans.sc-prod .sc-lead{-webkit-line-clamp:1}
.scan-ans .sc-ans.sc-prod .tile-t{-webkit-line-clamp:2}
/* tablets and phones: the price, rating and review count stay on one line beside the photo, at label size */
@media (max-width: 1023px){
  .scan-ans .sc-ans.sc-prod .tile-m{font-size:12px;line-height:16px}
  .scan-ans .sc-ans.sc-prod .tile-m .tm-sep{display:inline}
  .scan-ans .sc-ans.sc-prod .tile-m .tm-rv{display:inline}
}
/* the smallest phones: a prompt takes a line more, so the card and the line grow with it */
@media (max-width: 360px){
  .scan{height:372px}
  .scan .sc{height:292px}
  .scan-line{height:308px}
}
@media (max-width: 340px){
  .scan{height:392px}
  .scan .sc{height:312px}
  .scan-line{height:328px}
}
/* ChatGPT cards make the same trade: the whole prompt, then one line of the answer, then the ad */
.scan-ans .sc-cg .cg-l{-webkit-line-clamp:1;margin-bottom:var(--space-1);font-size:14px;line-height:20px}
.scan-ans .sc-cg .cg-d{margin-top:0}
.scan-ans .sc-cg .cg-ad{margin-top:var(--space-1);padding:var(--space-2) var(--space-3)}