/* ============================================================
   FOCUS REPORT — Brand System
   Editorial + clinical · data-journalism
   ============================================================ */

:root{
  /* --- Brand neutrals (the brand stays here) --- */
  --paper:      #FFFFFF;   /* bright white */
  --paper-2:    #FFFFFF;   /* sunk panel */
  --fog:        #d8d3c8;   /* hairline fill */
  --ink:        #1A1916;   /* warm near-black */
  --ink-2:      #44423B;   /* secondary text */
  --graphite:   #75726A;   /* muted label */

  /* --- Signature: Focus Amber (the highlighter) --- */
  --amber:      #FFD479;
  --amber-deep: #B5870F;
  --amber-wash: #F6E4BC;

  /* --- Data language (ONLY in data viz, never brand) --- */
  --data-red:   #E57281;
  --data-red-2: #E8A2AA;
  --data-blue:  #2F6CAE;
  --data-blue-2:#a9d4f0;
  --data-neutral:#8f8c87;

  /* --- Dark-UI neutrals (chrome surfaces on the dark hub; approved) ---
     The gray base beneath tinted boxes (e.g. Account "Your details").
     Kept neutral; only the accent WASH over it changes per box. */
  --steel-950:  #2a2a2a;   /* deepest panel / sunk */
  --steel-900:  #34353f;   /* base surface */
  --steel-800:  #34353F;   /* raised surface — the gray base of tinted boxes */
  --steel-line: rgba(244,242,235,.16);  /* hairline on dark */

  --line:       rgba(26,25,22,.14);
  --line-2:     rgba(26,25,22,.28);

  /* type */
  --display: 'Archivo Expanded','Archivo',system-ui,sans-serif;
  --sans:    'Archivo',system-ui,sans-serif;
  --mono:    'IBM Plex Mono',ui-monospace,monospace;

  --maxw: 1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- homepage intro mark ---------- */
#frIntro{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  background:#10131a;
  color:var(--amber);
  pointer-events:none;
  opacity:1;
  animation:frIntroFade 3s cubic-bezier(.16,1,.3,1) forwards;
}
#frIntro::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,212,121,.18), transparent 34%),
    linear-gradient(180deg, #171a22 0%, #0b0d12 100%);
}
.fr-intro-mark{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  transform:scale(.84);
  animation:frIntroSettle 1.08s cubic-bezier(.16,1,.3,1) forwards;
}
.fr-intro-mark svg{
  width:116px;
  height:116px;
  filter:drop-shadow(0 0 22px rgba(255,212,121,.28));
}
.fr-intro-corners path{
  stroke-dasharray:60;
  stroke-dashoffset:60;
  animation:frIntroDraw .72s cubic-bezier(.2,.7,.2,1) forwards;
}
.fr-intro-corners path:nth-child(2){animation-delay:.07s}
.fr-intro-corners path:nth-child(3){animation-delay:.14s}
.fr-intro-corners path:nth-child(4){animation-delay:.21s}
.fr-intro-dot{
  opacity:0;
  transform:scale(.2);
  transform-origin:60px 60px;
  animation:frIntroDot .58s cubic-bezier(.16,1,.3,1) .36s forwards;
}
.fr-intro-mark span{
  font-family:var(--display);
  font-weight:800;
  font-size:20px;
  letter-spacing:.02em;
  color:var(--paper);
  opacity:0;
  transform:translateY(8px);
  animation:frIntroWord .52s ease .58s forwards;
}
body.fr-intro-done #frIntro{
  opacity:0;
}
@keyframes frIntroDraw{to{stroke-dashoffset:0}}
@keyframes frIntroDot{
  0%{opacity:0;transform:scale(.2)}
  70%{opacity:1;transform:scale(1.22)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes frIntroWord{to{opacity:1;transform:none}}
@keyframes frIntroSettle{
  0%{transform:scale(.84)}
  65%{transform:scale(1.04)}
  100%{transform:scale(1)}
}
@keyframes frIntroFade{
  0%,82%{opacity:1}
  100%{opacity:0;visibility:hidden}
}
@media (prefers-reduced-motion: reduce){
  #frIntro{animation:frIntroFade .35s ease forwards}
  .fr-intro-mark,.fr-intro-corners path,.fr-intro-dot,.fr-intro-mark span{animation:none;opacity:1;transform:none;stroke-dashoffset:0}
}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
section{padding:120px 0;border-top:1px solid var(--line)}
.sec-head{
  display:flex;align-items:baseline;gap:22px;
  margin-bottom:54px;flex-wrap:wrap;
}
.sec-title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(30px,4.4vw,56px);line-height:.98;
  letter-spacing:-.01em;margin:0;flex:1 1 320px;
  text-wrap:balance;
}
.sec-lead{
  font-size:19px;color:var(--ink-2);max-width:62ch;
  margin:0 0 46px;line-height:1.5;text-wrap:pretty;
}

/* ---------- THE FOCUS FRAME device (corner brackets) ---------- */
.ff{position:relative}
.ff > .c{
  position:absolute;width:var(--ff-len,18px);height:var(--ff-len,18px);
  border:0 solid var(--ff-col,var(--ink));pointer-events:none;z-index:3;
}
.ff > .c.tl{top:var(--ff-off,10px);left:var(--ff-off,10px);
  border-top-width:var(--ff-w,2.5px);border-left-width:var(--ff-w,2.5px)}
.ff > .c.tr{top:var(--ff-off,10px);right:var(--ff-off,10px);
  border-top-width:var(--ff-w,2.5px);border-right-width:var(--ff-w,2.5px)}
.ff > .c.bl{bottom:var(--ff-off,10px);left:var(--ff-off,10px);
  border-bottom-width:var(--ff-w,2.5px);border-left-width:var(--ff-w,2.5px)}
.ff > .c.br{bottom:var(--ff-off,10px);right:var(--ff-off,10px);
  border-bottom-width:var(--ff-w,2.5px);border-right-width:var(--ff-w,2.5px)}
.ff--amber{--ff-col:var(--amber-deep)}

h1,h2,h3,h4{margin:0}

@media(max-width:880px){
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
  .wrap{padding:0 22px}
  section{padding:84px 0}
}

/* ============================================================
   CANON — Type floor & contrast (approved, data-report pages)
   • Hard floor 12px. Nothing meaningful below it; 12px reserved
     for genuinely decorative / micro captions only.
   • Labels & data captions: 13px minimum, bold.
   • Body / descriptive copy: 15px.
   • Section headers: >= 24px.
   • Contrast: do NOT use --graphite for any text under ~16px.
     Small text uses --ink-2 (brighter) or --ink; --graphite only
     for large or genuinely tertiary marks. Significant category
     labels read in bright --ink, never dim gray.
   ============================================================ */

/* ============================================================
   CANON — Disclosure carets & dropdowns (approved)
   • A disclosure/dropdown caret renders ~1.5x its row's text size
     (never inherits body size). Reference: 19px caret on a ~12.5px row.
   • On a full-width dropdown row, the caret sits immediately to the
     RIGHT of its label (label + caret centered as a group), NOT
     pushed to the far edge.
   ============================================================ */

/* ============================================================
   CANON — Light theme (approved)
   The page ships dark by default; `body.light` is the sanctioned
   light counterpart. Toggle lives to the right of search; choice
   persists in localStorage. Amber stays the signature in both;
   red/blue remain the data language. These are the canonical
   light-mode token values:
   ============================================================ */
body.light{
  --paper:#F4F2EB; --ink:#1A1916; --ink-2:#4A4842; --graphite:#7C7970;
  --fog:#d8d3c8; --line:rgba(26,25,22,.13); --line-2:rgba(26,25,22,.26);
  --amber:#B5870F; --amber-deep:#B5870F; --amber-wash:rgba(181,135,15,.20);
  --data-red:#E57281; --data-blue:#2F6CAE; --data-red-2:#E8A2AA; --data-blue-2:#9DB8D6;
  --card:#FFFFFF; --sunk:#FFFFFF; --card-2:#FFFFFF;
}

/* ============================================================
   CANON — Portraits (approved)
   ALL official photography renders as a single duotone treatment
   (warm grayscale), inside the Focus Frame, object-fit:cover.
   Never full-color glamour shots — document, not headshot.
   ============================================================ */
.portrait-duotone{
  filter:grayscale(1) sepia(.22) contrast(1.06) brightness(1.02);
  object-fit:cover;
}

/* ============================================================
   THE FOCUS REPORT — Homepage (sales) · ON CANON
   Built on brand.css tokens. Editorial + clinical data-journalism.
   Light "paper" editorial bands alternate with dark "report" bands
   (steel neutrals per canon — never invented navy). Amber is the
   signature; blue/red are the data language only.
   ============================================================ */

:root{
  /* dark "report" surfaces — canon steel neutrals */
  --report-1:#34353f;     /* steel-900 */
  --report-0:#2a2a2a;     /* steel-950 */
  --report-2:#34353F;     /* steel-800 raised */
  --report-bg:linear-gradient(180deg,#2D2E37 0%,#212229 100%);
  --on-dark:#F4F2EB;
  --on-dark-2:rgba(244,242,235,.64);
  --on-dark-3:rgba(244,242,235,.40);
  --dark-line:rgba(244,242,235,.14);
  --dark-line-2:rgba(244,242,235,.24);
}

/* page never shows a horizontal scrollbar from framed media.
   Clip stays on html only — clip on body as well breaks smooth
   anchor scrolling in Chrome and Safari. */
html{overflow-x:clip;}
body{background:var(--report-0);}

/* brand.css sets section{padding:120px 0;border-top} — reset for our band system */
.band{border-top:none;padding:0;}
.band .wrap{padding-top:104px;padding-bottom:104px;}
.band--paper{background:var(--paper);color:var(--ink);}
.band--report{background:var(--report-bg);color:var(--on-dark);}

/* shared emphasis word in a heading — Archivo Expanded, amber (NEVER serif/italic per canon) */

/* eyebrow / kicker — mono amber, canon */
.eyebrow{
  font-family:var(--mono);font-weight:600;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--amber-deep);
  display:flex;align-items:center;gap:12px;margin:0 0 20px;
}
.band--report .eyebrow{color:var(--amber);}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.4;max-width:120px;}
.eyebrow.center{justify-content:center;}
.eyebrow.center::before{content:"";flex:1;height:1px;background:currentColor;opacity:.4;max-width:120px;}
.contact .eyebrow{font-size:17px;}
.mvmt .eyebrow{font-size:18.3px;}

/* ---------- buttons ---------- */
.band--report .btn--ghost{border-color:var(--dark-line-2);color:var(--on-dark);}
.band--report .btn--ghost:hover{border-color:var(--amber);color:var(--amber);}

/* ============================================================
   TOPBAR  (sits over the dark hero)
   ============================================================ */
.topbar{position:sticky;top:0;z-index:100;background:var(--report-0);border-bottom:1px solid var(--dark-line);}
.topbar-in{max-width:var(--maxw);margin:0 auto;padding:13px 40px;display:flex;align-items:center;justify-content:space-between;}
.topbar .brand-lock{
  display:flex;align-items:center;gap:12px;text-decoration:none;
  font-family:'Archivo Expanded','Archivo',sans-serif;font-weight:800;
  letter-spacing:-.01em;font-size:25px;line-height:1;color:var(--on-dark);white-space:nowrap;
}
.topbar .brand-lock svg{width:34px;height:34px;flex-shrink:0;color:var(--amber);}

/* ---------- brand mark draw-in ----------
   A relay, not a bloom: each corner draws in 320ms and hands off to the next
   190ms later, so only one is in motion at a time and the mark sweeps
   clockwise. The dot fades in at 880ms, once the last corner has landed —
   it is the closing beat, not part of the draw. The wordmark stays put.
   Stagger is deliberately 59% of the draw duration; shortening it makes the
   four corners overlap and read as a fade-up instead of a sweep.
   .is-done pins the finished state so a throttled run can't strand a
   half-drawn logo. */
.topbar .brand-lock svg path,
.fr-logo-lockup svg path{stroke-dasharray:60;stroke-dashoffset:60;}
.topbar .brand-lock svg circle,
.fr-logo-lockup svg circle{opacity:0;}

.topbar .brand-lock.is-in svg path,
.fr-logo-lockup.is-in svg path{animation:frIntroDraw 320ms ease-out both;}
.topbar .brand-lock.is-in svg path:nth-of-type(2),
.fr-logo-lockup.is-in svg path:nth-of-type(2){animation-delay:190ms;}
.topbar .brand-lock.is-in svg path:nth-of-type(3),
.fr-logo-lockup.is-in svg path:nth-of-type(3){animation-delay:380ms;}
.topbar .brand-lock.is-in svg path:nth-of-type(4),
.fr-logo-lockup.is-in svg path:nth-of-type(4){animation-delay:570ms;}
.topbar .brand-lock.is-in svg circle,
.fr-logo-lockup.is-in svg circle{animation:frMarkDot 380ms ease-out 880ms both;}
@keyframes frMarkDot{from{opacity:0}to{opacity:1}}

/* resting state once the run is over */
.topbar .brand-lock.is-done svg path,
.fr-logo-lockup.is-done svg path{animation:none;stroke-dashoffset:0;}
.topbar .brand-lock.is-done svg circle,
.fr-logo-lockup.is-done svg circle{animation:none;opacity:1;}

@media(prefers-reduced-motion:reduce){
  .topbar .brand-lock svg path,.fr-logo-lockup svg path{stroke-dashoffset:0!important;}
  .topbar .brand-lock svg circle,.fr-logo-lockup svg circle{opacity:1!important;}
}
.topbar .brand-lock:hover{opacity:.85;}
.topbar .auth{display:flex;align-items:center;gap:0;}
.topbar .auth a{
  font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--on-dark);text-decoration:none;
  padding:10px 18px;border:1px solid var(--dark-line-2);
  transition:background .16s,color .16s,border-color .16s;
}
.topbar .auth a.signin{border-radius:5px 0 0 5px;border-right:none;}
.topbar .auth a.explore{border-radius:0 5px 5px 0;background:var(--amber);color:#231a09;border-color:var(--amber);}
.topbar .auth a.signin:hover{background:rgba(244,242,235,.08);}
.topbar .auth a.explore:hover{background:#F0B53F;border-color:#F0B53F;}

/* ============================================================
   1 · HERO  (dark report band)
   ============================================================ */
.hero{position:relative;overflow:hidden;}
.hero::before{ /* faint amber glow top-left + frame motif */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 12% 0%,rgba(255,212,121,.10) 0%,transparent 60%);
}
.hero .wrap{position:relative;padding-top:64px;padding-bottom:96px;
  display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center;}
.hero-copy{max-width:600px;}
.hero-copy .eyebrow{font-size:18px;letter-spacing:.01em;white-space:nowrap;}
.hero-copy .eyebrow::after{display:none;}
.hero h1{
  font-family:var(--display);font-weight:800;color:var(--on-dark);
  font-size:clamp(40px,5.4vw,68px);line-height:.98;letter-spacing:-.025em;
  margin:0 0 22px;text-wrap:balance;
}
.hero h1 em{font-style:italic;color:var(--amber);}
.hero-sub{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(19px,2vw,23px);line-height:1.5;color:var(--on-dark);
  margin:0 0 34px;max-width:46ch;text-wrap:pretty;
}

/* framed laptop */
.hero-media{position:relative;}
.hero-media .ff{--ff-len:26px;--ff-w:2.5px;--ff-off:-14px;}
.hero-media img{
  width:100%;height:auto;display:block;border-radius:6px;
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.5));
}
.hero-media .badge{
  position:absolute;left:-18px;bottom:30px;z-index:4;
  background:var(--report-2);border:1px solid var(--dark-line-2);border-left:3px solid var(--amber);
  border-radius:5px;padding:12px 16px;box-shadow:0 18px 40px -16px rgba(0,0,0,.7);
}
.hero-media .badge .n{font-family:var(--display);font-weight:800;font-size:30px;line-height:1;color:var(--amber);}
.hero-media .badge .l{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-2);margin-top:4px;}

/* ============================================================
   2 · FOCUS REPORT SPOTLIGHT (paper)
   Content and layout carried over from the Project Shift
   original; gold/ink tokens are this site's own.
   ============================================================ */
/* the phone meets the dark band below it flush, so this band carries no
   bottom padding and the media column runs to the foot of the wrap */
.spotlight .wrap{display:block;padding-top:76px;padding-bottom:0;}
/* the media column takes close to half the row so the phone can run large */
.fr-spot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:56px;align-items:end;}
.fr-copy{padding-bottom:76px;}

.fr-logo-lockup{
  display:flex;align-items:center;gap:14px;margin-bottom:22px;
  color:var(--ink);font-family:var(--display);font-weight:800;
  font-size:clamp(33px,4.2vw,47px);letter-spacing:-.01em;line-height:1;
}
.fr-logo-lockup svg{width:1.35em;height:1.35em;flex:none;color:var(--amber-deep);}
.fr-lockup-name{white-space:nowrap;}

.fr-eyebrow-vert{
  font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:.01em;
  color:var(--ink);line-height:1.45;margin-bottom:36px;
}
.fr-eyebrow-italic{font-style:italic;color:var(--amber-deep);}

.fr-copy p{color:var(--ink-2);font-size:16.5px;line-height:1.72;margin:0 0 20px;}
.fr-copy p:last-child{margin-bottom:0;}

.fr-media--stack{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;}
.fr-mockup{max-width:100%;height:auto;display:block;}
/* runs a touch past its column so the phone reads 25% larger than the column allows */
.fr-mockup--mobile{width:107%;max-width:none;margin-bottom:-1px;}

/* ============================================================
   3 · PROOF / methodology  (dark report band)
   ============================================================ */
.proof .wrap{max-width:1080px;}
.proof .sec-title{color:var(--on-dark);}
.proof .sec-title em{font-style:italic;color:var(--amber);}
.proof .sec-lead{color:#fff;}
.dims{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:8px 0 34px;}
.dim{
  background:var(--report-2);border:1px solid var(--dark-line);border-top:2px solid var(--amber);
  border-radius:6px;padding:26px 24px;
}
.dim h3{font-family:var(--display);font-weight:800;font-size:25px;letter-spacing:-.01em;color:var(--amber);margin:0 0 10px;}
.dim p{margin:0;font-size:19px;line-height:1.55;color:#fff;}
.sources{
  border:1px solid var(--dark-line);border-radius:6px;background:rgba(0,0,0,.18);
  padding:20px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
}
.sources .lab{font-family:var(--mono);font-size:16.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);}
.sources .src{font-family:var(--mono);font-size:14.8px;font-weight:600;letter-spacing:.04em;color:var(--on-dark);}
.sources .dotsep{width:4px;height:4px;border-radius:50%;background:var(--amber);opacity:.7;}
.proof-note{
  margin:26px 0 0;font-family:var(--sans);font-weight:500;
  font-size:20.7px;line-height:1.55;color:var(--on-dark);text-wrap:pretty;
}
.proof-note b{display:block;color:var(--amber);font-weight:700;}

/* ============================================================
   5 · PRICING  (paper)  — re-skinned to canon
   ============================================================ */
.pricing .plans-head{text-align:center;max-width:920px;margin:0 auto 14px;}
.pricing .plans-head .eyebrow{font-size:17px;margin:0 auto 20px;}
.pricing .plans-head h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,4vw,48px);letter-spacing:-.015em;line-height:1.04;margin:0 0 12px;}
.pricing .plans-head h2 em{font-style:normal;color:var(--amber-deep);}
.pricing .plans-head p{font-size:17px;color:var(--ink-2);line-height:1.55;margin:0 auto;max-width:none;}
.billing-toggle{display:inline-flex;margin:28px auto 0;border:1px solid var(--line-2);border-radius:5px;overflow:hidden;}
.billing-toggle button{
  background:transparent;color:var(--ink-2);font-family:var(--mono);font-weight:700;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;padding:12px 26px;border:none;cursor:pointer;transition:color .2s,background .2s;
}
.billing-toggle button.active{background:var(--amber);color:#231a09;}
.billing-save{font-family:var(--mono);font-weight:700;font-size:12px;color:var(--amber-deep);margin-left:8px;letter-spacing:.08em;}
.billing-toggle button.active .billing-save{color:#231a09;}
.pricing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#36465f;border:1px solid #36465f;border-radius:8px;overflow:hidden;margin-top:30px;}
.pricing-card{background:#12243a;padding:46px 22px 30px;position:relative;display:flex;flex-direction:column;text-align:left;color:var(--on-dark);}
.pricing-card.featured{background:#2a3a52;}
.pricing-card.featured::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--amber);}
.pricing-badge{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#231a09;background:var(--amber);padding:4px 12px;position:absolute;top:14px;left:50%;transform:translateX(-50%);white-space:nowrap;border-radius:3px;}
.pricing-badge.blue{background:var(--data-blue);color:#fff;}
.pricing-tier{font-family:var(--mono);font-weight:700;font-size:17px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:10px;}
.pricing-subtitle{font-family:var(--sans);font-weight:600;font-size:18px;color:var(--on-dark);margin-bottom:18px;line-height:1.3;min-height:66px;}
.pricing-price{font-family:var(--display);font-size:55px;font-weight:800;line-height:1;margin-bottom:0;color:var(--on-dark);letter-spacing:-.02em;}
.price-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:22px;}
.price-meta{display:flex;flex-direction:column;gap:2px;}
.pricing-price .currency{font-size:24px;vertical-align:super;font-weight:700;margin-right:3px;color:var(--amber);}
.pricing-price .free{color:var(--amber);}
.pricing-period{font-size:17px;color:#fff;margin-bottom:0;font-family:var(--mono);letter-spacing:.06em;}
.pricing-annual{font-size:17px;color:#fff;margin-bottom:0;}
.pricing-annual strong{color:var(--amber);font-weight:600;}
.annual-save{color:#5BB06E;}
.pricing-features{list-style:none;margin:16px 0 26px;padding:18px 0 0;flex-grow:1;border-top:1px solid rgba(63,167,214,.7);}
.pricing-features li{font-size:14.5px;color:var(--on-dark);padding:8px 0 8px 16px;border-bottom:1px solid var(--dark-line);position:relative;line-height:1.4;}
.pricing-features li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:5px;background:#4a9fd4;border-radius:50%;}
.pricing-features li.gold::before{background:var(--amber);}
.pricing-features li.dim{color:#fff;}
.pricing-features li.dim::before{background:var(--on-dark-3);}
.pricing-features li strong{color:var(--on-dark);font-weight:700;}
.pricing-cta{background:transparent;color:var(--on-dark);font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:15px;border:1px solid var(--dark-line-2);border-radius:4px;cursor:pointer;transition:all .2s;display:block;text-align:center;width:100%;text-decoration:none;}
.pricing-cta:hover{border-color:var(--on-dark);background:rgba(244,242,235,.06);}
.pricing-cta.primary{background:var(--data-blue);border-color:var(--data-blue);color:#fff;}
.pricing-cta.primary:hover{background:#27568b;border-color:#27568b;}
.pricing-cta.gold{background:var(--amber);border-color:var(--amber);color:#231a09;}
.pricing-cta.gold:hover{background:#F0B53F;border-color:#F0B53F;}
.plans-note{text-align:center;font-size:15.7px;font-weight:700;color:var(--graphite);margin-top:30px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;}
.plans-note a{color:var(--amber-deep);text-decoration:none;}

/* ============================================================
   6 · JOIN THE MOVEMENT  (dark report band — lit cards pop)
   ============================================================ */
.mvmt .wrap{color:var(--on-dark);}
.mvmt h2.big{font-family:var(--display);font-weight:800;font-size:clamp(32px,4.6vw,56px);line-height:1.02;letter-spacing:-.02em;margin:0 0 26px;text-wrap:balance;color:var(--on-dark);}
.mvmt h2.big em{font-style:italic;color:var(--amber);}
.mvmt .lede{font-family:var(--sans);font-weight:500;font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:#fff;max-width:none;margin:0 0 14px;text-wrap:pretty;}
.mvmt .lede b{display:block;margin-top:14px;color:var(--amber);font-weight:700;}
.cards{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.mcard{border-radius:8px;padding:32px 32px 30px;display:flex;flex-direction:column;position:relative;overflow:hidden;}
.mcard .tag{font-family:var(--mono);font-size:17.3px;letter-spacing:.2em;text-transform:uppercase;display:inline-block;margin-bottom:8px;font-weight:600;}
.mcard h3{font-family:var(--display);font-weight:800;font-size:34px;letter-spacing:-.015em;line-height:1;margin:0 0 10px;}
.mcard .pitch{font-size:16px;line-height:1.5;margin-bottom:18px;}
.mcard .rate{font-family:var(--display);font-weight:800;line-height:1;margin-bottom:4px;display:flex;align-items:baseline;gap:10px;}
.mcard .rate .pct{font-size:56px;letter-spacing:-.03em;}
.mcard .rate .for{font-family:var(--sans);font-weight:700;font-size:16px;}
.mcard .ratesub{font-size:15px;margin-bottom:22px;opacity:.9;}
.mcard ul{list-style:none;display:grid;gap:9px;margin:0 0 26px;padding:0;}
.mcard ul li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.4;}
.mcard ul li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;}
.mcard .cta{margin-top:auto;align-self:flex-start;font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:13px 24px;border-radius:5px;display:inline-flex;align-items:center;gap:9px;transition:transform .14s,filter .14s;}
.mcard .cta:hover{transform:translateY(-1px);}

/* affiliate — data-blue lit */
.mcard.affiliate{background:radial-gradient(125% 90% at 50% -12%,#3a72b0 0%,#27568b 46%,#12243a 100%);border:1px solid rgba(120,160,230,.30);box-shadow:0 30px 64px -24px rgba(12,26,57,.6),inset 0 1px 0 rgba(255,255,255,.14);}
.mcard.affiliate .tag{color:var(--amber);}
.mcard.affiliate h3,.mcard.affiliate .pitch,.mcard.affiliate .rate,.mcard.affiliate .ratesub,.mcard.affiliate ul li{color:#fff;}
.mcard.affiliate ul li::before{background:var(--amber);box-shadow:0 0 10px rgba(255,212,121,.6);}
.mcard.affiliate .cta{background:#fff;color:#14213a;}
.mcard.affiliate .cta:hover{filter:brightness(.97);}

/* ambassador — amber lit */
.mcard.ambassador{background:radial-gradient(125% 90% at 50% -12%,#FFD479 0%,#A06512 46%,#6E4711 100%);border:1px solid rgba(255,255,255,.24);box-shadow:0 30px 64px -24px rgba(90,60,12,.6),inset 0 1px 0 rgba(255,255,255,.22);}
.mcard.ambassador .tag{color:#F0CE72;}
.mcard.ambassador h3,.mcard.ambassador .pitch,.mcard.ambassador .rate,.mcard.ambassador .ratesub,.mcard.ambassador ul li{color:#FBF3E2;}
.mcard.ambassador ul li::before{background:#F0CE72;}
.mcard.ambassador ul li.plus{font-family:var(--sans);font-weight:700;padding-left:0;font-size:15.5px;}
.mcard.ambassador ul li.plus::before{display:none;}
.mcard.ambassador .cta{background:#fff;color:#231a09;}
.mcard.ambassador .cta:hover{filter:brightness(.96);}

.calc{margin-top:28px;border:1px dashed var(--dark-line-2);border-radius:6px;padding:24px 30px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.calc .ct{font-size:17.3px;line-height:1.45;color:#fff;}
.calc .ct b{font-family:var(--display);font-weight:800;color:var(--amber);font-size:19.3px;letter-spacing:-.01em;}
.calc a{font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.05em;text-decoration:none;color:var(--on-dark);border-bottom:2px solid var(--amber);padding-bottom:3px;white-space:nowrap;}
.calc a:hover{color:var(--amber);}

/* ============================================================
   7 · CONTACT  (paper)
   ============================================================ */
.contact .wrap{max-width:640px;text-align:center;}
.contact h2{display:flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--mono);font-weight:600;font-size:17px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber-deep);margin:0 0 34px;}
.contact h2::before,.contact h2::after{content:"";flex:1;height:1px;background:currentColor;opacity:.4;max-width:120px;}
.contact p.intro{font-size:16px;color:var(--amber-deep);line-height:1.55;margin:0 0 28px;}
.contact form{display:flex;flex-direction:column;gap:12px;text-align:left;}
.contact .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.contact input,.contact textarea{width:100%;padding:13px 15px;border:1px solid var(--line-2);border-radius:6px;background:var(--card,#FFFFFF);font-size:16px;color:var(--ink);font-family:var(--sans);}
.contact input::placeholder,.contact textarea::placeholder{color:var(--graphite);}
.contact textarea{resize:vertical;}
.contact button{align-self:center;margin-top:6px;height:48px;padding:0 32px;background:var(--amber);color:#231a09;border:0;border-radius:6px;font-family:var(--sans);font-size:15px;font-weight:700;cursor:pointer;transition:background .16s;}
.contact button:hover{background:#F0B53F;}

/* ============================================================
   FOOTER  (dark report band)
   ============================================================ */
.site-footer{background:var(--report-bg);color:var(--on-dark);padding:60px 40px 0;border-top:1px solid var(--dark-line);}
.foot-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;}
.foot-brand .brand-lock{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:'Archivo Expanded','Archivo',sans-serif;font-weight:800;letter-spacing:-.01em;font-size:19px;line-height:1;color:var(--on-dark);margin-bottom:16px;}
.foot-brand .brand-lock svg{width:26px;height:26px;flex-shrink:0;}
.foot-brand p{font-size:15.7px;color:var(--amber);line-height:1.6;margin:0;max-width:28ch;}
.foot-col h4{font-family:var(--mono);font-size:12.4px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin:0 0 14px;}
.foot-col a{display:block;font-size:13.6px;color:#fff;text-decoration:none;padding:5px 0;transition:color .15s;}
.foot-col a:hover{color:var(--on-dark);}
.foot-bar{max-width:1180px;margin:0 auto;padding:18px 0 26px;border-top:1px solid var(--dark-line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-family:var(--mono);font-size:13.4px;letter-spacing:.04em;color:var(--amber);}
.foot-bar a{color:var(--amber);text-decoration:none;}
.foot-bar a:hover{color:var(--on-dark);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:42px;}
  .hero-media{max-width:560px;}
  .fr-spot-grid{grid-template-columns:1fr;gap:36px;}
  .dims{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:repeat(2,1fr);}
  .cards{grid-template-columns:1fr;}
  .foot-inner{grid-template-columns:1fr 1fr;}
}
@media(max-width:620px){
  .band .wrap{padding-top:70px;padding-bottom:70px;}
  .topbar{padding:18px 22px 0;}
  .hero .wrap{padding-top:40px;padding-bottom:64px;}
  .fr-eyebrow-vert{text-align:center;width:100%;font-size:26px;line-height:1.4;}
  .pricing-grid{grid-template-columns:1fr;}
  .contact .row2{grid-template-columns:1fr;}
  .foot-inner{grid-template-columns:1fr 1fr;}
  .foot-bar{flex-direction:column;}
}

/* ============================================================
   THE FOCUS REPORT — Homepage · "How Focus works" FAQ +
   the Focus Challenge (open contests + leaderboard). ON CANON.
   ============================================================ */

/* ---------- FAQ (paper band) ---------- */
.faq-tabs{display:inline-flex;border:1px solid var(--line-2);border-radius:5px;overflow:hidden;margin-bottom:30px;}
.faq-tab{
  appearance:none;cursor:pointer;background:transparent;border:0;border-left:1px solid var(--line-2);
  padding:13px 22px;font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);transition:background .15s,color .15s;
}
.faq-tab:first-child{border-left:0;}
.faq-tab:not(.active):hover{background:var(--paper-2);}
.faq-tab.active{background:var(--amber);color:#231a09;}
.faq[hidden]{display:none;}
.qa{border-top:2.3px solid var(--line);}
.qa:last-child{border-bottom:2.3px solid var(--line);}
.qa .q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  appearance:none;background:transparent;border:0;cursor:pointer;text-align:left;padding:20px 6px;
  font-family:var(--sans);font-weight:700;font-size:18px;letter-spacing:-.005em;color:var(--ink);
}
.qa.open .q{color:var(--amber-deep);}
.qa .q::after{content:"+";flex:0 0 auto;font-family:var(--mono);font-weight:400;font-size:24px;line-height:1;color:var(--amber-deep);transition:transform .2s;}
.qa.open .q::after{content:"\2013";}
.qa .a{display:none;padding:0 6px 26px;color:var(--ink-2);font-size:15.5px;line-height:1.6;max-width:74ch;}
.qa.open .a{display:block;}
.qa .a p{margin:0 0 14px;}
.qa .a .g{color:var(--amber-deep);font-weight:700;}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:18px;padding-top:22px;border-top:1px solid var(--line);}
.stats .num{font-family:var(--display);font-weight:800;font-size:43px;line-height:1;letter-spacing:-.02em;color:var(--ink);}
.stats .lab{margin-top:6px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-deep);}
.stats .desc{margin-top:8px;font-size:14px;line-height:1.45;color:var(--ink-2);}

/* ============================================================
   THE FOCUS CHALLENGE  (dark report band)
   ============================================================ */
.challenge{
  --c-dim:var(--on-dark-2);--c-dimmer:var(--on-dark-3);
  --c-line:var(--dark-line);--c-line-2:var(--dark-line-2);
  --c-red:var(--data-red);--c-green:#5BB06E;
}
.challenge .sec-title{color:var(--on-dark);}
.challenge .sec-title em{font-style:normal;color:var(--amber);}
.challenge .wrap{padding-top:84px;padding-bottom:84px;}
.challenge .sec-head{margin-bottom:38px;}
.ch-lede{font-family:var(--sans);font-weight:500;font-size:18px;line-height:1.55;color:#fff;max-width:none;margin:0 0 48px;text-wrap:pretty;}
.ch-lede b{color:var(--amber);font-weight:700;}
.ch-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch;}
.ch-col{display:flex;flex-direction:column;gap:18px;}
.ch-col-l .lb2-panel{flex:1;display:flex;flex-direction:column;}
.ch-col-l #lb2Rows{flex:1;display:flex;flex-direction:column;}
.ch-col-l .lb2-row{flex:1;}

/* compact prize ribbon */
/* refined deep-gold prize panel (pairs with the deep-blue affiliate; not overpowering) */
.ch-prizes-strip{position:relative;overflow:hidden;background:radial-gradient(125% 120% at 50% -12%,#FFD479 0%,#A06512 52%,#6E4711 100%);border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:20px 22px 0;color:#FBF3E2;box-shadow:0 24px 50px -24px rgba(90,60,12,.6),inset 0 1px 0 rgba(255,255,255,.22);}
.ch-prizes-strip .ph{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.01em;color:#fff;margin-bottom:14px;}
.pz{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:baseline;padding:8px 0;border-top:1px solid rgba(255,255,255,.16);}
.pz:first-of-type{border-top:none;padding-top:0;}
.pz .pz-r{font-family:var(--mono);font-size:13px;font-weight:700;color:#F0CE72;letter-spacing:.06em;}
.pz .pz-w{font-size:15px;color:#FBF3E2;line-height:1.35;font-weight:500;}
.pz .pz-w .gold{color:#fff;font-weight:800;}
.pz-note{margin:16px -22px 0;padding:13px 22px;background:rgba(0,0,0,.22);font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.06em;color:#FBF3E2;text-transform:uppercase;text-align:center;}

/* right: open contests + leaderboard panels */
.ch-panel-head{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.01em;margin:0 0 6px;color:var(--on-dark);}
.ch-panel-head em{font-style:normal;color:var(--amber);}
.ch-panel{background:var(--report-2);border:1px solid var(--c-line);border-top:2px solid var(--amber);border-radius:6px;padding:16px 16px 14px;margin-bottom:0;}
.oc-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;}
.oc-title{margin:0;}
.oc-closes,.lb2-closes{
  font-family:var(--mono);font-size:13px;color:var(--on-dark);letter-spacing:.04em;
  background:rgba(255,212,121,.10);border:1px solid rgba(255,212,121,.34);border-radius:8px;padding:8px 13px;
  display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap;
}
.oc-cd,.lb2-cd{color:var(--amber);font-weight:700;font-variant-numeric:tabular-nums;}
.oc-card{background:var(--report-0);border:1px solid var(--c-line);border-left:2px solid var(--c-red);padding:14px;border-radius:5px;}
.oc-card-title{font-family:var(--display);font-weight:800;font-size:16px;line-height:1.3;margin-bottom:12px;letter-spacing:-.01em;color:var(--on-dark);}
.oc-rows{margin-bottom:12px;}
.oc-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px dotted var(--c-line);font-family:var(--mono);font-size:13px;}
.oc-row:last-child{border-bottom:none;}
.oc-row .k{letter-spacing:.14em;text-transform:uppercase;color:#fff;}
.oc-row .v{font-family:var(--sans);font-size:15.2px;font-weight:600;color:var(--amber);}
.oc-row .v.gold{color:var(--amber);}
.oc-pick-label{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:6px 0 10px;}
.oc-chips{display:flex;gap:8px;flex-wrap:wrap;}
.oc-chip{flex:1 1 0;min-width:60px;text-align:center;background:var(--report-2);border:1px solid var(--dark-line-2);border-radius:7px;padding:11px 4px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark);cursor:pointer;transition:border-color .15s,background .15s;}
.oc-chip:hover{border-color:var(--amber);background:rgba(255,212,121,.08);}
.oc-chip .ico{display:block;width:22px;height:22px;margin:0 auto 7px;color:var(--amber);}
.oc-chip .ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* leaderboard "who's winning" */
.lb2-panel{background:var(--report-2);border:1px solid var(--c-line);border-top:2px solid var(--amber);border-radius:6px;padding:14px 14px 12px;}
.lb2-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.lb2-head-l{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.lb2-period{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.01em;color:var(--amber);}
.lb2-tabs{display:flex;gap:8px;}
.lb2-tab{background:transparent;border:1px solid var(--dark-line-2);color:var(--amber);font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:9px 15px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background .15s,color .15s,border-color .15s;}
.lb2-tab .lb2-caret{font-size:9px;}
.lb2-tab.active{background:var(--amber);color:#231a09;border-color:var(--amber);}
.lb2-colhead,.lb2-row,.lb2-you{display:grid;grid-template-columns:26px 34px 1fr auto 56px 46px;gap:10px;align-items:center;}
.lb2-colhead{padding:0 12px 10px;font-family:var(--mono);font-size:13.7px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;}
.lb2-colhead .r{text-align:right;}
.lb2-row{background:var(--report-0);border:1px solid var(--c-line);border-radius:9px;padding:4px 11px;margin-bottom:5px;}
.lb2-rank{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--on-dark);text-align:center;}
.lb2-row.top1 .lb2-rank{color:var(--amber);}
.lb2-row.top2 .lb2-rank{color:#CDD3DA;}
.lb2-row.top3 .lb2-rank{color:#D59B6A;}
.lb2-ava{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:14px;color:#14213a;}
.lb2-name{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--on-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lb2-prize{font-family:var(--sans);font-size:15.2px;font-weight:600;color:var(--amber);text-align:right;line-height:1.2;}
.lb2-prize.dash{color:#fff;}
.lb2-pts{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--on-dark);text-align:right;}
.lb2-mv{font-family:var(--mono);font-size:13px;font-weight:700;text-align:right;white-space:nowrap;}
.lb2-mv .ar{font-size:14px;}
.lb2-mv.up{color:var(--c-green);}
.lb2-mv.down{color:var(--c-red);}
.lb2-mv.flat{color:#fff;}
.lb2-you{background:rgba(255,212,121,.10);border:1px solid rgba(255,212,121,.34);border-radius:9px;padding:5px 12px;margin-top:10px;}
.lb2-you .lb2-rank,.lb2-you .lb2-pts,.lb2-you .lb2-name{color:var(--amber);}
.lb2-row.youhi{background:rgba(255,212,121,.12);border-color:rgba(255,212,121,.34);}
.lb2-row.youhi .lb2-rank,.lb2-row.youhi .lb2-name,.lb2-row.youhi .lb2-pts{color:var(--amber);}
/* ---- "Who's winning" — white theme ----
   The panel flips to paper while the rest of the band stays dark, so the
   board reads as a printed standings sheet. Ink tokens replace the on-dark
   ones; amber goes deep so it holds up on white. */
.lb2-panel{background:var(--paper);border:1px solid var(--line);border-top:2px solid var(--amber-deep);}
.lb2-period{color:var(--amber-deep);}
.lb2-closes{background:rgba(181,135,15,.10);border-color:rgba(181,135,15,.34);color:var(--ink);}
.lb2-cd{color:var(--amber-deep);}
.lb2-tab{border-color:var(--line-2);color:var(--amber-deep);}
.lb2-tab:hover{background:rgba(181,135,15,.08);}
.lb2-tab.active{background:var(--amber-deep);color:var(--paper);border-color:var(--amber-deep);}
.lb2-colhead{color:var(--ink);}
.lb2-row{background:var(--paper-2);border-color:var(--line);}
.lb2-rank{color:var(--ink);}
.lb2-row.top1 .lb2-rank{color:var(--amber-deep);}
.lb2-row.top2 .lb2-rank{color:#7C8794;}
.lb2-row.top3 .lb2-rank{color:#9C6B3D;}
.lb2-name{color:var(--ink);}
.lb2-prize{color:var(--amber-deep);}
.lb2-prize.dash{color:var(--graphite);}
.lb2-pts{color:var(--ink);}
.lb2-mv.up{color:#2F7D45;}
.lb2-mv.down{color:#B23B3B;}
.lb2-mv.flat{color:var(--graphite);}
.lb2-you{background:rgba(181,135,15,.10);border-color:rgba(181,135,15,.34);}
.lb2-you .lb2-rank,.lb2-you .lb2-pts,.lb2-you .lb2-name{color:var(--amber-deep);}
.lb2-row.youhi{background:rgba(181,135,15,.10);border-color:rgba(181,135,15,.34);}
.lb2-row.youhi .lb2-rank,.lb2-row.youhi .lb2-name,.lb2-row.youhi .lb2-pts{color:var(--amber-deep);}
.lb2-youtag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(181,135,15,.85);font-weight:400;}

@media(max-width:900px){
  .ch-grid{grid-template-columns:1fr;gap:18px;}
}
@media(max-width:620px){
  .lb2-colhead,.lb2-row,.lb2-you{grid-template-columns:24px 30px 1fr auto 48px 40px;gap:7px;}
  .lb2-name{font-size:13.5px;}
  .lb2-tab{padding:7px 10px;font-size:11px;letter-spacing:.04em;}
}

/* ============ PRE-LAUNCH · non-clickable CTAs ============ */
a:not([href]){cursor:default;pointer-events:none;}

/* ============ PRE-LAUNCH · coming-soon notice ============
   A mostly-solid, slightly-translucent white panel docked to the
   right edge of the viewport, vertically centered. It carries its
   own near-opaque background and dark ink text on purpose — the
   page scrolls under it through both dark and light bands, and
   white-on-white (or white text on a glassy see-through card) was
   unreadable over the paper sections. ============================ */
#frSoon{
  position:fixed;right:0;top:50%;z-index:9998;
  width:380px;max-width:calc(100vw - 20px);
  padding:36px 34px 32px;border-radius:20px 0 0 20px;
  background:rgba(255,255,255,1);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line-2);border-right:none;
  box-shadow:-24px 24px 60px rgba(0,0,0,.28);
  opacity:0;transform:translate(24px,-50%);pointer-events:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
#frSoon.in{opacity:1;transform:translate(0,-50%);pointer-events:auto;}
#frSoon.out{opacity:0;transform:translate(10px,-50%);pointer-events:none;}
.soon-x{position:absolute;top:16px;right:16px;width:32px;height:32px;border:0;border-radius:50%;cursor:pointer;background:rgba(26,25,22,.06);color:var(--ink-2);font:400 20px/1 var(--sans);transition:background .15s ease,color .15s ease;}
.soon-x:hover{background:rgba(26,25,22,.12);color:var(--ink);}
.soon-brand{display:flex;align-items:center;gap:11px;margin:0 0 26px;font-family:var(--display);font-weight:800;letter-spacing:-.01em;font-size:21px;line-height:1;color:var(--ink);}
.soon-brand svg{width:30px;height:30px;flex-shrink:0;color:var(--ink);}
.soon-eyebrow{margin:0 0 10px;font-family:var(--mono);font-size:16px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-deep);}
.soon-text{margin:0 0 24px;font-family:var(--sans);font-size:15.5px;line-height:1.6;color:var(--ink-2);}
.soon-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.05em;color:#231a09;text-decoration:none;background:var(--amber);padding:12px 20px;border-radius:8px;transition:filter .15s ease,transform .05s ease;}
.soon-link:hover{filter:brightness(1.07);}
.soon-link:active{transform:translateY(1px);}
@media(max-width:640px){
  #frSoon{
    right:12px;left:12px;top:auto;bottom:12px;width:auto;max-width:none;
    border-radius:18px;border-right:1px solid var(--line-2);
    padding:26px 24px 24px;
    transform:translateY(18px);box-shadow:0 24px 60px rgba(0,0,0,.28);
  }
  #frSoon.in{transform:none;}
  #frSoon.out{transform:translateY(10px);}
}
@media(prefers-reduced-motion:reduce){
  #frSoon{transition:none;}
}

/* ============================================================
   9 · THE 100 — roster (dark)
   Their own official sites, in their own words. Becomes the
   internal link hub to /senators/... once those pages exist.
   ============================================================ */
/* the pointer down from the methodology band */
.jump-100{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 30px;
  font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.06em;
  color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(255,212,121,.4);
  padding-bottom:3px;transition:border-color .15s ease;
}
.jump-100:hover{border-bottom-color:var(--amber);}
.jump-100 .ar{font-size:16px;line-height:1;}

.roster .sec-head{margin-bottom:22px;}
.roster .wrap{padding-bottom:52px;}
.roster .sec-title em{font-style:italic;color:var(--amber);}
.roster-lede{font-family:var(--sans);font-weight:500;font-size:17px;line-height:1.6;color:#fff;max-width:78ch;margin:0 0 40px;text-wrap:pretty;}
.roster-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:1px;background:var(--dark-line);border:1px solid var(--dark-line);border-radius:6px;overflow:hidden;
}
.sen{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  background:var(--report-2);padding:11px 14px;text-decoration:none;
  transition:background .14s ease,color .14s ease;
}
.sen:hover{background:rgba(255,212,121,.10);}
.sen .sn{font-family:var(--sans);font-weight:600;font-size:14.5px;color:var(--on-dark);line-height:1.25;}
.sen:hover .sn{color:var(--amber);}
.sen .sm{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--amber);white-space:nowrap;}
.roster-note{margin:22px 0 0;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:#fff;}
.roster-note .g{color:var(--amber);}
@media(max-width:620px){
  .roster-grid{grid-template-columns:1fr 1fr;}
  .sen{padding:10px 11px;}
  .sen .sn{font-size:13px;}
}

/* ---------- launch signup — the page's one job ---------- */
/* .contact form sets flex-direction:column and centres the button, so these
   need the same specificity to sit the field and button on one row */
.contact .signup-form{display:flex;flex-direction:row;gap:10px;max-width:520px;margin:0 auto;text-align:left;}
.contact .signup-form button{align-self:stretch;margin-top:0;height:auto;}
.contact .signup-form input[type="email"]{
  flex:1;min-width:0;padding:15px 17px;border:1px solid var(--line-2);border-radius:6px;
  background:var(--paper-2);font-family:var(--sans);font-size:16px;color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.signup-form input[type="email"]:focus{outline:none;border-color:var(--amber-deep);box-shadow:0 0 0 3px rgba(181,135,15,.18);}
.signup-form input[type="email"]::placeholder{color:var(--graphite);}
.contact .signup-form button{
  flex:none;height:auto;padding:0 26px;background:var(--amber);color:#231a09;border:0;border-radius:6px;
  font-family:var(--sans);font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .16s;
}
.signup-form button:hover{background:#F0B53F;}
.signup-form input.hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip-path:inset(50%);overflow:hidden;}
.signup-note{margin:14px 0 0;font-size:16px;color:var(--amber-deep);line-height:1.55;}
/* the quieter second ask — a message form, not the signup */
.contact-split{display:flex;align-items:center;justify-content:center;gap:12px;margin:64px 0 20px;
  font-family:var(--mono);font-weight:600;font-size:17px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-deep);}
.contact-split::before,.contact-split::after{content:"";flex:1;height:1px;background:currentColor;opacity:.4;max-width:120px;}
@media(max-width:560px){
  .contact .signup-form{flex-direction:column;}
  .contact .signup-form button{padding:15px 26px;}
}

/* ---------- quiet way in ----------
   Reads as punctuation at the end of the footer bar until it's clicked. */
.fr-key{display:inline-flex;align-items:center;gap:8px;}
.fr-key-dot{
  background:none;border:0;padding:0 10px;cursor:pointer;line-height:0;
  color:var(--amber);transition:opacity .2s ease;opacity:.85;
}
.fr-key-dot svg{width:26px;height:26px;display:block;}
.fr-key-dot:hover{opacity:1;}
.fr-key-in{
  width:104px;padding:4px 8px;border:1px solid var(--dark-line-2);border-radius:4px;
  background:rgba(0,0,0,.25);color:var(--amber);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;text-align:center;
  outline:none;
}
.fr-key-in::placeholder{color:var(--on-dark-3);}
.fr-key-in:focus{border-color:rgba(255,212,121,.5);}
@keyframes frKeyNo{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(3px)}50%{transform:translateX(-4px)}}
.fr-key-in.no{animation:frKeyNo .38s ease;border-color:rgba(229,114,129,.7);}