/* Citelx — the AI-shift pillar page.

   The page ships its own design system and renders inside the site header and
   footer, so two things had to be true: its bare a/h1/h2/h3/p rules must not
   reach the chrome, and its class names must not collide with the theme's.

   Bare element rules are scoped under .pv2. Four classes are RENAMED instead
   (.btn .btns .eyebrow .sub -> .pvbtn .pvbtns .pveyebrow .pvsub) because
   scoping alone would not have saved .sub: main.css styles it as a nav
   dropdown — absolute, hidden until hover — and any page element keeping that
   name would have vanished regardless of specificity. */


/* ============================================================
   BRAND
   Replace the ONE value on --accent with your brand color.
   Everything that marks "your store / the winner" uses it.
   ============================================================ */
:root{
  --accent:      #5B39F5;   /* ← your brand color goes here */
  --accent-ink:  #ffffff;   /* text that sits on the accent  */
  --accent-tint: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 34%, transparent);

  --paper:  #F6F5F2;
  --card:   #FFFFFF;
  --ink:    #16171C;
  --ink-2:  #4C4F59;
  --ink-3:  #8A8D96;
  --line:   #E5E3DC;
  --line-2: #D7D4CB;

  /* authentic period SERP colors */
  --serp-link:  #1a0dab;
  --serp-url:   #0b7a2f;
  --serp-text:  #3c4043;
  --serp-vlink: #6a1b9a;

  --shell: 1180px;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
*{box-sizing:border-box}
.pv2{scroll-behavior:smooth}
.pv2{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.pv2 h1, .pv2 h2, .pv2 h3{margin:0;font-weight:600;letter-spacing:-.02em}
.pv2 p{margin:0}
.pv2 a{color:inherit}
/* progress bar */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:100;transition:width .1s linear}
/* persistent query chip */
.pin{
  position:fixed;top:16px;right:16px;z-index:90;
  display:flex;align-items:center;gap:8px;
  padding:8px 12px 8px 14px;border-radius:999px;
  background:var(--ink);color:#fff;
  font-family:var(--mono);font-size:12.5px;
  box-shadow:0 8px 30px rgba(0,0,0,.18);
  opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .4s;
  pointer-events:none;
}
.pin.on{opacity:1;transform:translateY(0)}
.pin svg{width:13px;height:13px;opacity:.7}
.pin b{color:var(--accent);font-weight:700}
/* shell */
.shell{max-width:var(--shell);margin:0 auto;padding:0 24px}
/* ---------- HERO ---------- */
.hero{padding:120px 0 70px;position:relative}
.hero-grid{display:grid;gap:48px}
@media(min-width:960px){
.hero-grid{grid-template-columns:1.1fr .9fr;align-items:center;gap:64px}
}
.pveyebrow{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
  display:flex;align-items:center;gap:10px;margin-bottom:26px;
}
.pveyebrow::before{content:"";width:26px;height:1px;background:var(--line-2)}
.hero h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(30px,4.4vw,52px);
  line-height:1.06;
  letter-spacing:-.025em;
  max-width:19ch;
}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero .lede{
  margin-top:28px;max-width:56ch;font-size:clamp(17px,2.2vw,20px);
  color:var(--ink-2);line-height:1.55;
}
/* the demo search bar in hero */
.searchbar{
  margin-top:40px;max-width:560px;
  display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--line-2);
  border-radius:999px;padding:15px 20px;
  box-shadow:0 10px 40px -18px rgba(0,0,0,.25);
}
.searchbar .mag{width:18px;height:18px;color:var(--ink-3);flex:none}
.searchbar .q{font-family:var(--mono);font-size:16px;color:var(--ink)}
.searchbar .cursor{
  width:2px;height:19px;background:var(--accent);margin-left:1px;
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{
50%{opacity:0}}
.hero .same{
  margin-top:18px;font-family:var(--mono);font-size:12.5px;
  color:var(--ink-3);letter-spacing:.02em;
}
.scrollcue{
  margin-top:64px;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);text-decoration:none;
}
.scrollcue .arw{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;
  animation:bob 1.8s ease-in-out infinite;
}
@keyframes bob{
0%, 100%{transform:translateY(0)}
50%{transform:translateY(4px)}}
/* hero chapters index (fills the right side) */
.hero-index{
  border:1px solid var(--line);border-radius:16px;background:var(--card);
  padding:10px 10px 12px;box-shadow:0 24px 60px -40px rgba(20,23,28,.35);
}
.hero-index .cap{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);padding:12px 14px 10px;display:flex;justify-content:space-between;
}
.hero-index a{
  display:flex;align-items:baseline;gap:14px;text-decoration:none;
  padding:11px 14px;border-radius:10px;border-top:1px solid var(--line);
  transition:background .2s;
}
.hero-index a:first-of-type{border-top:0}
.hero-index a:hover{background:var(--accent-tint)}
.hero-index .yr{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--accent);width:38px;flex:none}
.hero-index .nm{font-size:14.5px;color:var(--ink);letter-spacing:-.01em}
.hero-index a:hover .nm{text-decoration:underline;text-underline-offset:2px}
.hero-index .go{margin-left:auto;color:var(--ink-3);opacity:0;transition:opacity .2s,transform .2s;transform:translateX(-4px)}
.hero-index a:hover .go{opacity:1;transform:none}
/* hero thesis visual: then vs now */
.hero-viz{border:1px solid var(--line);border-radius:18px;background:var(--card);padding:16px;box-shadow:0 34px 80px -50px rgba(20,23,28,.45)}
.viz-q{display:flex;align-items:center;gap:9px;background:var(--paper);border:1px solid var(--line-2);border-radius:999px;padding:10px 15px;font-family:var(--mono);font-size:12.5px;color:var(--ink);margin-bottom:16px}
.viz-q svg{width:14px;height:14px;color:var(--ink-3);flex:none}
.viz-lab{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px;display:flex;align-items:center;gap:8px}
.viz-lab .yr{color:var(--accent);font-weight:700}
.viz-blue{position:relative;border-radius:11px;border:1.5px solid var(--accent);background:var(--accent-tint);padding:11px 13px}
.viz-tag{position:absolute;top:-9px;right:11px;background:var(--accent);color:#fff;font-family:var(--mono);font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px}
.vb-u{font-family:var(--mono);font-size:11px;color:var(--serp-url)}
.vb-t{color:var(--serp-link);font-size:14.5px;font-weight:500;text-decoration:underline;text-underline-offset:2px;margin-top:2px}
.viz-cap{font-size:12.5px;color:var(--ink-2);margin-top:10px;line-height:1.45}
.viz-cap b{color:var(--ink);font-weight:600}
.viz-div{display:flex;align-items:center;gap:11px;margin:17px 0;color:var(--ink-3)}
.viz-div::before, .viz-div::after{content:"";height:1px;background:var(--line);flex:1}
.viz-div span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.viz-ans{border-radius:11px;border:1px solid var(--accent-line);background:linear-gradient(180deg,var(--accent-tint),transparent);padding:12px 13px}
.va-h{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
.va-h svg{width:13px;height:13px}
.va-t{font-size:12.5px;color:var(--ink);line-height:1.5}
.va-t mark{background:var(--accent-tint);color:var(--accent);font-weight:600;padding:0 3px;border-radius:3px}
.eng-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.eng{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;color:var(--ink-2);border:1px solid var(--line);border-radius:7px;padding:3px 7px;background:var(--card)}
.eng .d{width:14px;height:14px;border-radius:4px;display:grid;place-items:center;color:#fff;font-size:8px;font-weight:700;flex:none}
.eng .ok{color:var(--accent);font-weight:700}
@media(max-width:960px){
.hero-viz{margin-top:8px}}
/* ---------- TIMELINE ---------- */
.timeline{position:relative;padding:40px 0 30px}
.spine{display:none}
@media(min-width:900px){
/* 258px = center of the 44px gap between the 236px meta column and the body */
  .spine{
    display:block;position:absolute;
    left:calc((100vw - min(100vw, var(--shell)))/2 + 24px + 258px);
    top:0;bottom:0;width:2px;background:var(--line);
  }
}
.era{position:relative;padding:54px 0}
.js .era{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
}
.era.in{opacity:1;transform:none}
.era-grid{display:grid;gap:30px}
@media(min-width:900px){
.era-grid{grid-template-columns:236px 1fr;gap:44px;align-items:start}
}
/* left column: label */
.era-meta{position:relative}
.era-year{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;
  color:var(--accent);font-weight:700;
}
.era-dot{
  position:absolute;left:-30px;top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--paper);border:2px solid var(--accent);
  display:none;
}
@media(min-width:900px){
.era-dot{display:block;left:auto;right:-28px}}
.era-no{
  font-family:var(--serif);font-size:15px;color:var(--ink-3);
  margin-top:2px;font-weight:400;
}
.era h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(24px,3vw,30px);line-height:1.1;
  margin-top:14px;letter-spacing:-.02em;
}
.era p.note{margin-top:14px;color:var(--ink-2);font-size:15.5px;line-height:1.55}
@media(min-width:900px){
.era-body p.note{max-width:none}
}
.stat{
  margin-top:22px;border-left:2px solid var(--accent-line);
  padding:2px 0 2px 16px;
}
.stat b{
  display:block;font-family:var(--serif);font-weight:600;
  font-size:clamp(26px,3.4vw,34px);letter-spacing:-.02em;line-height:1.05;
}
.stat span{font-size:13px;color:var(--ink-2);display:block;margin-top:5px;line-height:1.4}
.stat cite{font-family:var(--mono);font-size:11px;color:var(--ink-3);font-style:normal;display:block;margin-top:4px}
/* status line: where your store is */
.status{
  margin-top:20px;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;
  padding:7px 12px;border-radius:8px;background:var(--card);border:1px solid var(--line);
}
.status .dot{width:7px;height:7px;border-radius:50%;flex:none}
.status.good .dot{background:#1a9e57}
.status.mid .dot{background:#d99815}
.status.bad .dot{background:#d94a3d}
.status b{color:var(--ink);font-weight:500}
/* ---------- SERP MOCKUPS ---------- */
.serp{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:0 24px 60px -34px rgba(20,23,28,.4);
  font-size:14px;
}
.serp-bar{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(var(--paper),var(--card));
}
.serp-bar .mag{width:15px;height:15px;color:var(--ink-3);flex:none}
.serp-bar .q{font-family:var(--mono);font-size:13.5px;color:var(--ink)}
.serp-bar .chrome{margin-left:auto;display:flex;gap:6px}
.serp-bar .chrome i{width:8px;height:8px;border-radius:50%;background:var(--line-2);display:block}
.serp-body{padding:18px 20px 22px}
/* tabs (universal search era) */
.serp-tabs{display:flex;gap:20px;padding:0 20px;border-bottom:1px solid var(--line);font-size:12.5px}
.serp-tabs span{padding:11px 0;color:var(--ink-3);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.serp-tabs span.act{color:var(--accent);border-color:var(--accent)}
/* classic blue link */
.result{margin-bottom:17px}
.result .u{font-family:var(--mono);font-size:12px;color:var(--serp-url);margin-bottom:2px}
.result .t{color:var(--serp-link);font-size:16px;line-height:1.25;font-weight:500;text-decoration:underline;text-underline-offset:2px}
.result.v .t{color:var(--serp-vlink)}
.result .s{color:var(--serp-text);font-size:12.5px;line-height:1.45;margin-top:3px;max-width:60ch}
/* the "you" marker */
.you{position:relative}
.you::before{
  content:"";position:absolute;left:-14px;right:-12px;top:-8px;bottom:-8px;
  border:1.5px solid var(--accent);border-radius:9px;background:var(--accent-tint);
  z-index:0;pointer-events:none;
}
.you>*{position:relative;z-index:1}
.you-tag{
  position:absolute;right:-9px;top:-9px;z-index:2;
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;
  padding:3px 7px;border-radius:6px;white-space:nowrap;
}
/* left filter rail (Froogle era) */
.rail-wrap{display:grid;grid-template-columns:132px 1fr;gap:20px}
.rail{font-size:12px}
.rail h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:700;margin:0 0 8px}
.rail ul{list-style:none;margin:0 0 16px;padding:0}
.rail li{padding:3px 0;color:var(--serp-link);border-bottom:1px dotted var(--line);font-size:12px}
.rail li .n{color:var(--ink-3);float:right}
/* product card + carousel */
.carousel{display:flex;gap:14px;overflow-x:auto;padding:14px 4px 12px;scrollbar-width:thin}
.pcard{
  flex:none;width:130px;border:1px solid var(--line);border-radius:10px;
  padding:10px;background:var(--card);
}
.pcard .thumb{height:74px;border-radius:7px;margin-bottom:8px;display:grid;place-items:center;overflow:hidden}
.pcard .thumb svg{width:38px;height:38px;opacity:.9}
.pcard .pt{font-size:11.5px;line-height:1.25;color:var(--ink);font-weight:500;height:29px;overflow:hidden}
.pcard .pp{font-size:13px;font-weight:700;margin-top:6px}
.pcard .ps{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);margin-top:2px}
.pcard .stars{color:#e8a13a;font-size:10px;margin-top:3px;letter-spacing:1px}
.pcard.ad::after{content:"Ad";font-family:var(--mono);font-size:9px;color:var(--ink-3);float:right;margin-top:-14px}
/* product grid + color swatches (Chapter 4) */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:560px){
.pgrid{grid-template-columns:repeat(2,1fr)}}
.pgrid .pcard{width:auto}
.rail .sw{display:flex;gap:7px;margin:0 0 16px}
.rail .sw i{width:17px;height:17px;border-radius:5px;display:block;border:1px solid rgba(0,0,0,.12)}
.rail .sw i.on{outline:2px solid var(--accent);outline-offset:2px}
/* ai answer box */
.ai{border:1px solid var(--accent-line);border-radius:12px;background:linear-gradient(180deg,var(--accent-tint),transparent);padding:16px 18px}
.ai .h{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;color:var(--accent);font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px}
.ai .h .spark{width:15px;height:15px}
.ai .txt{font-size:13.5px;line-height:1.55;color:var(--ink)}
.ai .txt mark{background:var(--accent-tint);color:var(--accent);font-weight:600;padding:0 2px;border-radius:3px}
.ai .cites{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:10.5px;padding:5px 9px;border-radius:7px;border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);display:flex;align-items:center;gap:5px}
.chip.you{border-color:var(--accent);color:var(--accent);font-weight:700;background:var(--accent-tint)}
.chip.you::before{display:none}
.chip i{width:12px;height:12px;border-radius:3px;background:var(--line-2);display:block}
.chip.you i{background:var(--accent)}
/* full stacked SERP modules (Chapter 6) */
.serp-mod{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--ink-3);margin:0 0 10px;letter-spacing:.03em}
.serp-mod .src-tag{color:var(--ink-2);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:10px}
.fchips{display:flex;gap:6px}
.fchips i{font-style:normal;border:1px solid var(--line-2);border-radius:999px;padding:2px 9px;font-size:10px;color:var(--ink-2)}
.serp-block{margin-top:18px}
.vthumb{position:relative}
.vthumb .play{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.vthumb .play svg{width:26px;height:26px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.45))}
.imgpack{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px}
.imgpack .tile{position:relative;flex:none;width:94px;height:94px;border-radius:9px;border:1px solid var(--line)}
.imgpack .tile.you{border:2px solid var(--accent)}
.imgpack .tile .yt{position:absolute;top:6px;left:6px;background:var(--accent);color:#fff;font-family:var(--mono);font-size:8.5px;font-weight:700;padding:2px 5px;border-radius:5px}
/* social split (final era) */
.surfaces{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:520px){
.surfaces{grid-template-columns:1fr}}
.surf{border:1px solid var(--line);border-radius:11px;padding:13px;background:var(--card);position:relative}
.surf .sh{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink);margin-bottom:9px}
.surf .sh .ic{width:16px;height:16px;border-radius:5px;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:700;flex:none}
.surf .row{font-size:11.5px;color:var(--ink-2);line-height:1.4;padding:5px 0;border-top:1px dotted var(--line)}
.surf .row:first-of-type{border-top:0}
.surf .tik{background:#010101}
.surf .pin-i{background:#e60023}
.surf .cgpt{background:#0d8f6f}
.surf .meta{background:#0866ff}
.mini-you{color:var(--accent);font-weight:600}
/* thumb gradient fills */
.g1{background:linear-gradient(135deg,#dfe7f5,#b9c9ea)}
.g2{background:linear-gradient(135deg,#e9e3f7,#cdbef0)}
.g3{background:linear-gradient(135deg,#e3efe6,#c2ddcb)}
.g4{background:linear-gradient(135deg,#f5e7dd,#ecccb4)}
.gy{background:var(--accent-tint)}
/* ---------- SHIFT / STATS SECTION ---------- */
.band{background:var(--ink);color:#EDEDEA;padding:90px 0;margin-top:40px}
.band .pveyebrow{color:#8b8e98}
.band .pveyebrow::before{background:#3a3c44}
.band h2{
  font-family:var(--serif);font-weight:500;color:#fff;
  font-size:clamp(28px,4vw,46px);line-height:1.08;letter-spacing:-.02em;max-width:20ch;
}
.band .pvsub{margin-top:20px;color:#a9abb3;max-width:62ch;font-size:16.5px}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:52px;background:#2a2c33;border:1px solid #2a2c33;border-radius:14px;overflow:hidden}
@media(max-width:860px){
.statgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){
.statgrid{grid-template-columns:1fr}}
.sg{background:var(--ink);padding:26px 22px}
.sg b{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4vw,42px);letter-spacing:-.02em;color:#fff;display:block;line-height:1}
.sg b .arrow{color:var(--accent);font-size:.62em;vertical-align:middle}
.sg p{margin-top:11px;font-size:13px;color:#b7b9c0;line-height:1.45}
.sg cite{font-family:var(--mono);font-size:10.5px;color:#75777f;font-style:normal;display:block;margin-top:9px}
/* where people search now — bars */
/* The CTA card is background:var(--ink) — #16171C. --ink-2 is #4C4F59, .pv2 a
   light-theme muted grey, which on that card is roughly 2:1 contrast and
   unreadable. White at 70% sits on the dark card the way --ink-2 sits on
   paper. */
.cta-copy{flex:1 1 380px;min-width:0}
.ctasub{margin-top:12px;max-width:46ch;font-size:15px;line-height:1.6;
  color:rgba(255,255,255,.7)}
.era-body a, .lede a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:rgba(0,0,0,.25)}
.era-body a:hover, .lede a:hover{text-decoration-color:currentColor}
.pv2 cite a{color:inherit;text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(0,0,0,.3)}
.pv2 cite a:hover{text-decoration-color:currentColor}
.wheretitle{margin-top:70px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8b8e98}
.bars{margin-top:22px;display:grid;gap:14px;max-width:640px}
.bar{display:grid;grid-template-columns:120px 1fr 46px;align-items:center;gap:14px}
.bar .lbl{font-size:13px;color:#d3d4d8}
.bar .track{height:9px;border-radius:6px;background:#2a2c33;overflow:hidden}
.bar .fill{height:100%;border-radius:6px;background:var(--accent);width:0;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.bar .val{font-family:var(--mono);font-size:12px;color:#fff;text-align:right}
.bars.in .fill{width:var(--w)}
.band cite.src{display:block;font-family:var(--mono);font-size:10.5px;color:#6b6d75;margin-top:20px;font-style:normal}
/* ---------- CLOSING ---------- */
.close{padding:96px 0 30px}
.rewards-section{padding-top:30px}
.close .pveyebrow{margin-bottom:22px}
.close h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4vw,44px);line-height:1.1;letter-spacing:-.02em;max-width:18ch}
.close .lede{margin-top:22px;max-width:58ch;color:var(--ink-2);font-size:17px}
.moves{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:44px}
@media(max-width:720px){
.moves{grid-template-columns:1fr}}
.move{border:1px solid var(--line);border-radius:13px;padding:22px;background:var(--card);transition:border-color .25s,transform .25s}
.move:hover{border-color:var(--accent-line);transform:translateY(-2px)}
.move .mi{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:700}
.move h3{font-family:var(--serif);font-weight:500;font-size:19px;margin-top:10px;letter-spacing:-.01em}
.move p{margin-top:9px;font-size:14px;color:var(--ink-2);line-height:1.5}
/* section subcaption + rewards table */
.subcap{margin-top:44px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.rewards{margin-top:18px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);box-shadow:0 24px 60px -44px rgba(20,23,28,.3)}
.rewards table{width:100%;border-collapse:collapse;font-size:14px}
.rewards th, .rewards td{text-align:left;padding:15px 18px;vertical-align:top;border-top:1px solid var(--line)}
.rewards thead th{background:var(--paper);font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:700;border-top:0}
.rewards tbody tr{transition:background .18s}
.rewards tbody tr:hover{background:var(--accent-tint)}
.rewards .surf-c{vertical-align:top}
.rewards .surf-c .b{display:inline-flex;align-items:flex-start;gap:10px;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.3}
.rewards .ico{width:23px;height:23px;border-radius:6px;display:inline-grid;place-items:center;color:#fff;font-family:var(--mono);font-size:11px;font-weight:700;flex:none;line-height:1;margin-top:1px}
.rewards td .win{color:var(--ink-2);line-height:1.5}
.rewards td .win b{color:var(--ink);font-weight:600}
.rewards td ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rewards td li{position:relative;padding-left:19px;color:var(--ink-2);line-height:1.45}
.rewards td li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:2px;background:var(--accent)}
.rewards td li b{color:var(--ink);font-weight:600}
.rewards col.c1{width:24%}
.rewards col.c2{width:76%}
@media(max-width:680px){
.rewards col{width:auto}
.rewards thead{display:none}
.rewards table, .rewards tbody, .rewards tr, .rewards td{display:block;width:100%}
.rewards tr{border-top:6px solid var(--paper)}
.rewards tr:first-child{border-top:0}
.rewards td{border-top:0;padding:4px 18px}
.rewards td.surf-c{padding-top:16px}
.rewards td:last-child{padding-bottom:16px}
.rewards td[data-label]::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:2px 0 3px}
}
.cta{
  margin-top:56px;padding:40px;border-radius:16px;
  background:var(--ink);color:#fff;
  display:flex;flex-wrap:wrap;align-items:center;gap:24px;justify-content:space-between;
}
.cta h3{font-family:var(--serif);font-weight:500;font-size:clamp(21px,3vw,27px);max-width:20ch;line-height:1.15}
.cta .pvbtns{display:flex;gap:12px;flex-wrap:wrap}
.pvbtn{
  font-family:var(--sans);font-size:14.5px;font-weight:600;text-decoration:none;
  padding:13px 22px;border-radius:999px;white-space:nowrap;transition:transform .2s,opacity .2s;
}
.pvbtn:hover{transform:translateY(-1px)}
.pvbtn.primary{background:var(--accent);color:var(--accent-ink)}
.pvbtn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28)}
.pv2 footer{padding:50px 0 70px;border-top:1px solid var(--line);margin-top:70px}
.pv2 footer .fx{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:baseline}
.pv2 footer .logo{font-family:var(--serif);font-size:18px;font-weight:600}
.pv2 footer .fx p{font-size:13px;color:var(--ink-3);max-width:44ch}
.pv2 footer .sources{margin-top:26px;font-family:var(--mono);font-size:11px;color:var(--ink-3);line-height:1.7;max-width:90ch}

@media (prefers-reduced-motion: reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.era{opacity:1;transform:none}
.bars .fill{width:var(--w)}
}
/* ============================================================
   MOBILE: the SERP mock-ups are the widest thing on the page.

   .era-body is a GRID ITEM, and a grid item's default min-width is `auto`, which means its min-content width becomes the floor of its track. The
   mock-ups inside measure ~650px, so at a 360px viewport the item stayed 649px
   wide and dragged the whole document to 673px — the horizontal scroll and the
   squeezed column. min-width:0 lets the item shrink to its track.

   Once it can shrink, the mock-ups need somewhere to go: they scroll inside
   their own frame rather than being clipped, so nothing is lost and the page
   itself never scrolls sideways.
   ============================================================ */
@media (max-width:900px){
.era-body, .era-meta{min-width:0}
/* the frame scrolls; its rounded corners still clip vertically */
  .serp{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.serp::-webkit-scrollbar{height:6px}
.serp::-webkit-scrollbar-thumb{background:rgba(20,23,28,.18);border-radius:99px}
/* rows inside keep their true width instead of collapsing into each other */
  .serp-tabs, .serp .h{min-width:max-content}
/* pills read as sentences on a narrow screen instead of one long line */
  .status{flex-wrap:wrap;max-width:100%;align-items:flex-start}
/* any remaining wide block scrolls rather than widening the page */
  .rail-wrap{min-width:0}
.wheretable, .matrix, .bars{max-width:100%;overflow-x:auto}
}
/* Belt and braces: nothing on this page should ever scroll the document
   sideways, whatever a future section adds. */
body{overflow-x:hidden}
/* The CTA on a narrow screen: three buttons at three different widths, ragged
   down the left, read as a list of links rather than one clear next step. Full
   width and evenly spaced makes the primary action obvious and the other two
   plainly secondary. */
@media (max-width:640px){
.cta{padding:28px 22px;gap:20px;text-align:left}
.cta h3{max-width:none;font-size:clamp(20px,5.4vw,24px)}
.ctasub{max-width:none;font-size:14.5px}
.pvbtns{width:100%;flex-direction:column;gap:10px}
.pvbtns .pvbtn{width:100%;text-align:center;padding:15px 22px;white-space:normal}
}