/* ============================================================
   Landing page — "prospectus" editorial redesign.
   Serif display (Fraunces) + ivory headlines on the ink-navy base,
   hairline rules instead of card clutter, auto-numbered sections,
   ledger-style rows. The look of an annual letter, not a startup
   template. Shares base tokens with styles.css; everything here is
   scoped to the logged-out landing view.
   ============================================================ */

.landing{
  max-width:none;padding:0;counter-reset:secn;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --ivory:#f3eddd;
  --hair:var(--border);
}
.lwrap{max-width:1120px;margin:0 auto;padding:0 28px;}

/* Smooth anchor scrolling only while the landing page is on screen
   (auth.js toggles the class) so app navigation keeps instant jumps. */
html.landingActive{scroll-behavior:smooth;}
.landing section[id]{scroll-margin-top:86px;}

/* ---- masthead: one editorial row, hairline underneath ---- */
.lnav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--hair);}
.lnavRow{display:flex;align-items:center;justify-content:space-between;gap:18px;height:64px;}
.lbrand{display:flex;align-items:center;gap:10px;flex:none;}
/* The wordmark IS the logo now -- no letter-tile beside it. Set in the same
   Fraunces serif as the hero with the gold gradient clipped into the letters,
   so the name itself carries the brand rather than a box carrying the name.
   Wide tracking + uppercase reads as an engraved masthead, not body text. */
/* Polished-metal wordmark. The flat three-stop --grad read as a solid colour
   at display size; this is a multi-stop gradient with a bright champagne band
   running through it, which is what makes gold look like metal rather than
   yellow. Weight drops to 600 because Fraunces at 27px in 700 gets heavy --
   the lighter cut is what reads "engraved" instead of "bold". */
.wordmark{font-family:var(--serif);font-optical-sizing:auto;font-size:27px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;line-height:1;
  background:linear-gradient(100deg,
    #8a6420 0%, #c9992f 14%, #f2dc9e 30%, #ffffff 38%, #f2dc9e 46%,
    #d4a13f 58%, #a87c28 74%, #e8c86f 88%, #c9992f 100%);
  background-size:260% 100%;background-position:120% 50%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* Two shadows doing different jobs: a tight dark one presses the letters
     into the surface, a wide gold one makes them glow against it. */
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.45)) drop-shadow(0 0 16px rgba(212,161,63,.28));
  padding-right:.24em; /* trailing tracking would clip the last letter's gradient */
  animation:wordmarkSheen 6s cubic-bezier(.45,0,.25,1) infinite;}

/* Draws the eye the way a blink would, without literally blinking: a
   highlight sweeps across the letters once, then the mark sits still for the
   rest of the cycle. Most of the timeline is deliberately the resting state,
   so it reads as an occasional catch of light rather than flashing. */
@keyframes wordmarkSheen{
  0%   {background-position:120% 50%;}
  28%  {background-position:-60% 50%;}
  100% {background-position:-60% 50%;}
}
/* Honour a user's motion preference -- an animation that exists to attract
   attention is exactly the kind people turn off. Rests on the lit position
   so the mark still looks its best when still. */
@media(prefers-reduced-motion:reduce){
  .wordmark{animation:none;background-position:50% 50%;}
}
.lnavLinks{display:flex;align-items:center;gap:30px;flex:1;justify-content:center;}
.lnavLinks a{color:var(--muted);text-decoration:none;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;position:relative;padding-bottom:2px;}
.lnavLinks a::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--grad);border-radius:2px;transition:right .18s ease;}
.lnavLinks a:hover{color:var(--text);}
.lnavLinks a:hover::after{right:0;}
.lnavActions{display:flex;align-items:center;gap:10px;flex:none;}
@media(max-width:900px){.lnavLinks{display:none;}}
/* Below ~560px the brand row plus the three action controls used to overflow
   into horizontal page scroll. The old fix hid the wordmark and left the
   letter-tile -- but the tile is gone and the wordmark IS the brand now, so
   it must stay visible: shrink its size and tracking instead. */
@media(max-width:560px){
  .lnavRow{gap:10px;}
  .lbrand .wordmark{font-size:19px;letter-spacing:.18em;padding-right:.18em;}
  .lnavActions{gap:6px;}
  .lnavActions .btn{padding:8px 11px;font-size:12px;}
  .langToggle button{padding:4px 7px;font-size:10px;}
}

/* ---- hero: left-aligned editorial statement over ledger-ruled paper ---- */
.hero{position:relative;padding:96px 0 64px;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:-120px 0 auto 0;height:520px;pointer-events:none;
  background:radial-gradient(720px 340px at 24% 30%,#a87d411c,transparent 70%),
             radial-gradient(520px 280px at 80% 10%,#d4a13f10,transparent 70%);}
/* Faint horizontal ledger rules fading out down the hero: the texture of an
   accounting journal, not a tech-grid. Cheap (one gradient), and it reads
   subliminally rather than decoratively. */
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(180deg,transparent 0 35px,var(--hair) 35px 36px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 78%);}
/* Staggered editorial entrance: each hero element settles in reading order.
   CSS-only, quick enough to never feel like a loading screen. */
@keyframes heroRise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.hero h1{animation:heroRise .6s cubic-bezier(.22,.8,.3,1) .08s both;}
.hero .heroTag{animation:heroRise .6s cubic-bezier(.22,.8,.3,1) .16s both;}
.hero .heroPunch{animation:heroRise .6s cubic-bezier(.22,.8,.3,1) .24s both;}
.hero .heroCta{animation:heroRise .6s cubic-bezier(.22,.8,.3,1) .32s both;}
.hero .heroNote{animation:heroRise .6s cubic-bezier(.22,.8,.3,1) .38s both;}
.hero .heroStats{animation:heroRise .7s cubic-bezier(.22,.8,.3,1) .46s both;}
@media(prefers-reduced-motion:reduce){
  .hero h1,.hero .heroTag,.hero .heroPunch,.hero .heroCta,.hero .heroNote,.hero .heroStats{animation:none;}
}
.hero>.lwrap{position:relative;}
.kicker{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin-bottom:30px;}
.kicker::before{content:'';width:34px;height:1px;background:var(--accent);}
.hero h1{font-family:var(--serif);font-optical-sizing:auto;
  font-size:clamp(44px,7.2vw,84px);font-weight:560;line-height:1.02;letter-spacing:-.015em;
  color:var(--ivory);margin:0 0 26px;max-width:15ch;text-wrap:balance;
  text-shadow:0 0 34px rgba(234,231,218,.10);}
.hero h1 .g{font-style:italic;font-weight:500;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em;
  /* drop-shadow (not text-shadow) so the glow follows the gradient-clipped
     glyphs instead of painting a flat box behind transparent text. */
  filter:drop-shadow(0 0 14px rgba(201,154,53,.24));}
/* Hero copy is centered (by request): every block centers itself and the
   kicker/CTA/note rows center their flex content. The stat band below
   stays full-width and left-ruled. */
.hero h1{margin-left:auto;margin-right:auto;text-align:center;}
/* Two separate <p> tags, each pinned to ONE line -- no wrapping, no orphaned
   words. No max-width so the text is never squeezed, and the font scales with
   the viewport so the longer second line still fits on small screens. The two
   lines sit close (one thought), then a real gap before the gold punch line
   so the two blocks read as separate beats. */
.heroTag{font-family:var(--serif);font-style:italic;font-size:clamp(13px,2.5vw,22px);
  text-transform:uppercase;color:var(--ivory);opacity:.92;text-align:center;
  margin:0 auto 6px;line-height:1.5;white-space:nowrap;}
/* Below ~700px the sentence cannot fit on one line at any readable size --
   nowrap clipped it mid-word ("...RESEARCHING YO"). Wrapping wins over the
   one-line rule here: the rule exists to make the hero scan well, and
   truncated text does the opposite. text-wrap:balance keeps the wrapped
   lines even instead of leaving one orphaned word. */
@media(max-width:700px){
  .heroTag{white-space:normal;text-wrap:balance;max-width:26ch;font-size:clamp(15px,4.2vw,20px);}
}
/* Targeted with the adjacent-sibling selector, NOT :last-of-type -- the gold
   punch line below is also a <p>, so it is the last-of-type and the second
   tag line never matched. */
.heroTag + .heroTag{margin-bottom:34px;}
/* "100x" is the number that sells the sentence -- bigger than the words
   around it and inked in the gold gradient so it lands first. */
.heroTag .x100{font-size:1.5em;font-weight:600;line-height:1;vertical-align:-.06em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 10px rgba(201,154,53,.25));}
/* The hero's three gold phrases get the wordmark's polished-metal treatment
   and the same sweeping highlight: "Value Investor", "one click", "100x".
   These are the words the eye should land on, and a catch of light does that
   without the page moving.

   Staggered delays rather than firing together -- three simultaneous flashes
   read as a glitch, while a short cascade reads as light travelling down the
   page. The h1 leads because it is read first. */
.hero h1 .g,
.heroTag .x100{
  background:linear-gradient(100deg,
    #8a6420 0%, #c9992f 14%, #f2dc9e 30%, #ffffff 38%, #f2dc9e 46%,
    #d4a13f 58%, #a87c28 74%, #e8c86f 88%, #c9992f 100%);
  background-size:260% 100%;background-position:120% 50%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:wordmarkSheen 6s cubic-bezier(.45,0,.25,1) infinite;}
.hero h1 .g{animation-delay:.2s;}
.heroTag:nth-of-type(1) .x100{animation-delay:.7s;}
.heroTag:nth-of-type(2) .x100{animation-delay:1.1s;}
@media(prefers-reduced-motion:reduce){
  .hero h1 .g,.heroTag .x100{animation:none;background-position:50% 50%;}
}

/* The value-prop punch line: sans-serif and bold where heroTag above it is
   serif and italic, so it reads as a distinct, harder statement -- gold
   gradient text, uppercase, tight tracking, a whisper of glow (not a title,
   so it sits outside the h1-h4 uppercase rule and opts in deliberately). */
.heroPunch{font-family:inherit;font-weight:800;font-size:clamp(17px,2.4vw,22px);
  text-transform:uppercase;letter-spacing:.07em;text-align:center;margin:0 auto 30px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 10px rgba(201,154,53,.22));}
.heroCta{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:26px;justify-content:center;}
.heroCta>div{align-items:center !important;}
.heroNote{justify-content:center;}
.btnLg{padding:15px 30px;font-size:15px;border-radius:8px;font-weight:700;border:none;cursor:pointer;
  white-space:nowrap;font-family:inherit;transition:transform .14s ease,filter .14s ease,border-color .14s ease,color .14s ease;}
.btnLg.primary{background:var(--grad);color:var(--on-grad);box-shadow:0 8px 26px #a87d4140;}
.btnLg.primary:hover{filter:brightness(1.08);transform:translateY(-1px);}
.btnLg.ghost{background:transparent;color:var(--muted);border:1px solid var(--hair);}
.btnLg.ghost:hover{border-color:var(--accent);color:var(--accent);}
.heroNote{font-size:12px;color:var(--muted-dim);display:flex;gap:22px;flex-wrap:wrap;}
.heroNote span{display:flex;align-items:center;gap:7px;}
.heroNote span::before{content:'✓';color:var(--green);font-weight:800;}

/* Data strip: hairline-ruled figures, an FT-style stat band. */
.heroStats{display:flex;margin-top:52px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  background:none;border-left:none;border-right:none;border-radius:0;max-width:none;overflow:visible;flex-wrap:wrap;}
.heroStats .hs{flex:1;min-width:170px;padding:22px 26px 22px 0;text-align:left;border-right:1px solid var(--hair);position:relative;}
.heroStats .hs+.hs{padding-left:26px;}
.heroStats .hs:last-child{border-right:none;padding-right:0;}
/* Gradient tick riding the top hairline of each cell -- a small note of the
   brand mix so the band reads designed, not just ruled. */
.heroStats .hs::before{content:'';position:absolute;top:-1px;left:0;width:34px;height:3px;background:var(--grad);border-radius:0 0 2px 2px;}
.heroStats .hs+.hs::before{left:26px;}
/* Figures carry the emerald->teal ink instead of flat ivory -- the numbers
   are the point of this band, so they get the brand color. */
.heroStats .hs .n{font-family:var(--serif);font-size:42px;font-weight:640;letter-spacing:-.01em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.heroStats .hs .l{font-size:10.5px;color:var(--muted);margin-top:5px;line-height:1.45;
  text-transform:uppercase;letter-spacing:.07em;font-weight:600;}

/* ---- question marquee: plain editorial text, slash-separated ---- */
.qMarqueeWrap{padding:30px 0 40px;overflow:hidden;}
.qMarqueeLabel{text-align:left;max-width:1120px;margin:0 auto 18px;padding:0 28px;
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:var(--muted-dim);}
.qMarquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.qMarquee+.qMarquee{margin-top:14px;}
.qTrack{display:inline-flex;gap:0;white-space:nowrap;width:max-content;animation:qScroll 52s linear infinite;}
.qMarquee.reverse .qTrack{animation-direction:reverse;animation-duration:60s;}
.qMarquee:hover .qTrack{animation-play-state:paused;}
.qTrack span{display:inline-block;background:none;border:none;padding:0 0;margin-right:14px;
  font-family:var(--serif);font-style:italic;font-size:18px;font-weight:400;color:var(--ivory);opacity:.82;}
.qTrack span::after{content:'/';margin-left:14px;color:var(--accent);font-style:normal;opacity:.55;}
.qTrack span:hover{color:var(--ivory);}
@keyframes qScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---- generic section: hairline top, left-aligned numbered head ---- */
.sec{padding:88px 0;border-top:1px solid var(--hair);}
.secHead{text-align:left;max-width:680px;margin:0 0 48px;}
.secEyebrow{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.2em;
  color:var(--accent);background:none;-webkit-background-clip:initial;background-clip:initial;margin-bottom:16px;}
.sec .secEyebrow::before{counter-increment:secn;content:counter(secn,decimal-leading-zero) ' / ';color:var(--muted-dim);}
.secHead h2{font-family:var(--serif);font-size:clamp(28px,3.8vw,42px);letter-spacing:-.01em;
  font-weight:560;margin:0 0 14px;line-height:1.12;color:var(--ivory);
  text-shadow:0 0 26px rgba(234,231,218,.09),0 0 56px rgba(201,154,53,.07);}
.secHead p{color:var(--muted);font-size:15.5px;line-height:1.7;margin:0;}

/* ---- the problem: two ruled columns ---- */
/* Two verdict cards instead of a flat ruled split. The "with" card is
   deliberately the winner of the layout: brand-gradient frame, soft glow,
   chip-style checks. The "without" side stays quiet and recedes. */
.compareGrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch;}
@media(max-width:760px){.compareGrid{grid-template-columns:1fr;}}
.compareCol{padding:26px 28px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--hair);}
/* Gradient frame drawn with a two-layer background (panel fill clipped to
   padding-box over the gradient clipped to border-box). */
.compareCol.good{border:1px solid transparent;
  background:linear-gradient(var(--panel2),var(--panel2)) padding-box,var(--grad) border-box;
  box-shadow:0 18px 44px -18px #a87d4140;}
.compareLabel{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px;
  display:flex;align-items:center;gap:10px;}
.compareCol.bad .compareLabel{color:var(--red);}
.compareCol.good .compareLabel{color:var(--accent);}
.compareCol.good .compareLabel::after{content:'';flex:1;height:2px;background:var(--grad);opacity:.5;border-radius:2px;}
.compareCol ul{list-style:none;margin:0;padding:0;}
.compareCol li{padding:13px 0;border-top:1px solid var(--hair);font-size:14px;line-height:1.6;color:var(--muted);
  padding-left:34px;position:relative;}
.compareCol li::before{position:absolute;left:0;top:14px;font-weight:800;width:22px;height:22px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;font-size:12px;}
.compareCol.bad li::before{content:'✗';color:var(--red);background:#e0684f14;border:1px solid #e0684f2e;}
.compareCol.good li::before{content:'✓';color:var(--on-grad);background:var(--grad);box-shadow:0 3px 8px -2px #a87d4166;}
.compareCol.good li{color:var(--text);}

/* ---- product plate ---- */
.previewWrap{position:relative;padding:8px 0 84px;}
.plateCap{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--muted-dim);
  margin-bottom:14px;}
.plateCap span{color:var(--accent);}
.browser{max-width:1000px;margin:0;background:var(--panel);border:1px solid var(--hair);
  border-radius:12px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4),0 0 90px #a87d4112;}
.browserBar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--panel2);
  border-bottom:1px solid var(--hair);}
.browserBar i{width:10px;height:10px;border-radius:50%;flex:none;}
.browserBar i:nth-child(1){background:#ff5f57;}
.browserBar i:nth-child(2){background:#febc2e;}
.browserBar i:nth-child(3){background:#28c840;}
.browserBar .url{margin-left:10px;font-size:11.5px;color:var(--muted-dim);background:var(--bg);
  border:1px solid var(--hair);border-radius:5px;padding:3px 12px;font-style:normal;}
.browserBody{padding:20px;display:grid;grid-template-columns:1.35fr 1fr;gap:16px;}
@media(max-width:720px){.browserBody{grid-template-columns:1fr;}}

.pvCard{background:var(--panel2);border:1px solid var(--hair);border-radius:10px;padding:14px;}
.pvHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.pvTitle{font-weight:700;font-size:13.5px;}
.pvTag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);
  background:var(--accent-soft);border-radius:5px;padding:3px 8px;white-space:nowrap;}
.pvStats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
.pvStat{background:var(--panel);border:1px solid var(--hair);border-radius:8px;padding:9px 10px;}
.pvStat .v{font-size:15px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.pvStat .l{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:2px;}
.pvChg{font-size:10.5px;font-weight:800;color:var(--green);background:#2ecc7122;border-radius:20px;
  padding:2px 7px;vertical-align:2px;margin-left:2px;}
.pvSpark{height:58px;width:100%;display:block;}
.pvRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--hair);font-size:12.5px;}
.pvRow:last-child{border-bottom:none;}
.pvRow .q{color:var(--muted);flex:1;}
.pvPill{font-size:10.5px;font-weight:800;border-radius:20px;padding:2px 9px;flex:none;}
.pvPill.yes{color:var(--green);background:#2ecc7122;}
.pvPill.part{color:var(--amber);background:#f5a62322;}
.pvPill.no{color:var(--red);background:#ff6b6b22;}

.ringWrap{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.ring{width:74px;height:74px;flex:none;}
.ring circle{fill:none;stroke-width:8;}
.ring .track{stroke:var(--hair);}
.ring .bar{stroke:url(#ringGrad);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;
  animation:ringFill 1.3s cubic-bezier(.22,.8,.3,1) .35s both;}
@keyframes ringFill{from{stroke-dashoffset:264;}to{stroke-dashoffset:66;}}
.ringMeta .n{font-size:22px;font-weight:800;letter-spacing:-.03em;}
.ringMeta .l{font-size:11px;color:var(--muted);margin-top:2px;}

.pvWide{grid-column:1/-1;}
.pvSignal{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.pvSignalNum{display:flex;align-items:center;gap:12px;flex:none;}
.pvSignalNum .n{font-family:var(--serif);font-size:42px;font-weight:560;letter-spacing:-.02em;line-height:1;
  color:var(--ivory);}
.pvSignalNum .l{font-size:11.5px;font-weight:700;color:var(--text);line-height:1.35;}
.pvSignalMeter{flex:1;min-width:200px;}
.meterTrack{position:relative;height:8px;border-radius:4px;
  background:linear-gradient(90deg,#ff6b6b,#f5a623 45%,#2ecc71);opacity:.9;}
.meterMark{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;
  background:var(--text);border:3px solid var(--panel2);box-shadow:0 0 0 2px var(--text);}
.meterEnds{display:flex;justify-content:space-between;font-size:10px;color:var(--muted-dim);margin-top:7px;}
.pvSignalParts{display:flex;gap:8px;flex-wrap:wrap;flex-basis:100%;}
.pvSignalParts span{font-size:10.5px;color:var(--muted);background:var(--panel);border:1px solid var(--hair);
  border-radius:999px;padding:4px 11px;font-weight:600;}
.pvSignalParts b{color:var(--accent);}

/* ---- trust strip: one quiet row, same note-language as .heroNote but
   plainer (no checkmarks -- this is provenance, not a benefits list). ---- */
.trustStrip{padding:0 0 64px;}
.trustStripRow{display:flex;justify-content:center;align-items:center;gap:0;flex-wrap:wrap;
  font-size:12px;color:var(--muted-dim);}
.trustStripRow span{padding:0 14px;position:relative;}
.trustStripRow span:first-child{padding-left:0;}
.trustStripRow span:not(:first-child)::before{content:'\00b7';position:absolute;left:-2px;color:var(--muted-dim);font-weight:800;opacity:.6;}
@media(max-width:640px){
  .trustStrip{padding:0 0 40px;}
  .trustStripRow{gap:8px 0;font-size:11px;}
  .trustStripRow span{padding:0 10px;}
}

/* ---- how it works: ruled steps with ghost serif numerals ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;counter-reset:step;}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:0;}}
.step{background:none;border:none;border-radius:0;padding:22px 0 0;position:relative;border-top:1px solid var(--hair);}
@media(max-width:820px){.step{padding-bottom:22px;}}
/* Step numerals in the brand gradient with an emerald glow -- these were
   near-invisible ghost figures before; now they lead each step. */
.step::before{counter-increment:step;content:'0' counter(step);
  width:auto;height:auto;border-radius:0;border:none;display:block;
  font-family:var(--serif);font-size:52px;font-weight:560;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 12px rgba(201,154,53,.26));
  margin-bottom:16px;-webkit-text-stroke:0;}
.step h3{margin:0 0 9px;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--text);}
.step p{margin:0;color:var(--muted);font-size:14px;line-height:1.65;}

/* ---- mid CTA ---- */
.midCta{padding:0 0 88px;}
.midCtaBar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border:1px solid var(--hair);border-radius:12px;padding:20px 26px;background:var(--panel);}
.midCtaBar span{font-size:14.5px;color:var(--text);font-weight:600;font-family:var(--serif);font-size:17px;}

/* ---- what you get: hairline ledger rows, two columns ---- */
.features{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;}
@media(max-width:760px){.features{grid-template-columns:1fr;}}
.feat{background:none;border:none;border-radius:0;padding:22px 0;border-top:1px solid var(--hair);
  transition:none;display:grid;grid-template-columns:56px 1fr;gap:4px 0;}
.feat:hover{border-color:var(--hair);transform:none;}
.feat:hover h3{color:var(--accent);}
/* Pictogram chips on the brand gradient -- an icon that says what the
   feature IS beats a row number nobody reads. SVGs inline in the markup,
   stroke:currentColor so this one rule colors all six. */
.feat .ico{width:40px;height:40px;border-radius:11px;background:var(--grad);border:none;
  color:var(--on-grad);display:flex;align-items:center;justify-content:center;
  margin-bottom:0;grid-row:1/3;box-shadow:0 6px 16px -6px #a87d4166;}
.feat .ico svg{width:21px;height:21px;display:block;}
.feat:hover .ico{filter:brightness(1.1);}
.feat h3{margin:0 0 5px;font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.01em;
  transition:color .14s ease;}
.feat p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6;grid-column:2;}

/* ---- the method: framework chips + the Buffett pull-quote ----
   The per-classic cards that used to sit above the quote were removed by
   request (no bulleted "classics" list, no per-book blurbs). What replaced
   them is deliberately quieter: a wrapping row of small chips that read as
   proof of computation (author + what's actually computed live), not as
   marketing copy -- kept to ~2-3 rows so it doesn't compete with the quote. */
.methodChipsLabel{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted-dim);margin:36px 0 14px;}
.methodChips{display:flex;flex-wrap:wrap;gap:10px;}
.methodChip{display:flex;align-items:baseline;gap:7px;background:var(--panel);border:1px solid var(--hair);
  border-radius:9px;padding:9px 14px;font-size:12.5px;line-height:1.4;white-space:nowrap;}
.methodChip strong{color:var(--analysis);font-weight:800;flex:none;}
.methodChip span{color:var(--muted);font-weight:500;}
@media(max-width:760px){
  .methodChip{white-space:normal;}
}
/* Both children are <span>s in the markup, so the quote text itself must be
   targeted with :first-child -- otherwise the tiny uppercase attribution
   style swallows the quote and it renders as dim micro-caps. */
.quoteLine{text-align:center;margin-top:64px;}
.quoteLine span:first-child{display:block;font-family:var(--serif);font-style:italic;
  font-size:clamp(24px,3.6vw,36px);font-weight:500;letter-spacing:0;line-height:1.35;
  color:var(--analysis);text-shadow:0 0 28px rgba(212,161,63,.22),0 0 64px rgba(212,161,63,.10);
  text-transform:none;}
.quoteLine span:last-child{display:block;margin-top:16px;font-family:'Inter',sans-serif;font-style:normal;
  font-size:11.5px;font-weight:800;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;}
/* A short gold rule under the attribution closes the quote like a signature. */
.quoteLine span:last-child::after{content:'';display:block;width:44px;height:2px;margin:16px auto 0;
  background:var(--analysis);opacity:.6;border-radius:2px;}

/* ---- comparison table ---- */
/* The wrap still scrolls on narrow screens -- a five-column comparison cannot
   honestly fit on a phone -- but the DEFAULT scrollbar rendered as a bright
   light bar across the bottom of a dark card, which read as a rendering fault
   rather than a control. Styled to match the surface, and hidden entirely
   when there is nothing to scroll. */
/* Still scrollable on narrow screens -- a five-column comparison cannot
   honestly fit a phone -- but the BAR itself is hidden. The browser default
   drew a bright light strip across the bottom of a dark card, which read as a
   rendering fault rather than a control. Content still scrolls by wheel,
   trackpad, touch and keyboard; only the chrome is gone. */
.vsTableWrap{overflow-x:auto;border:1px solid var(--hair);border-radius:14px;background:var(--panel);box-shadow:var(--shadow-md);
  scrollbar-width:none;-ms-overflow-style:none;}
.vsTableWrap::-webkit-scrollbar{display:none;}

.vsTable{width:100%;border-collapse:collapse;font-size:13.5px;}
/* 14px side padding, not the original 18: the type stays full size but the
   four invisible pixels per column edge are what let all five columns fit
   the card with zero overflow instead of eight pixels of hidden scroll. */
.vsTable th,.vsTable td{padding:14px 14px;text-align:left;border-bottom:1px solid var(--hair);
  /* Middle, not baseline: cells mix a bare phrase with a badge-plus-phrase,
     and baseline alignment let the two sit on visibly different lines. */
  vertical-align:middle;}
.vsTable th:first-child,.vsTable td:first-child{padding-left:18px;}
.vsTable th:last-child,.vsTable td:last-child{padding-right:18px;}
.vsTable tbody tr:last-child td{border-bottom:none;}
.vsTable thead th{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800;
  background:var(--panel2);}
.vsTable tbody tr{transition:background .12s ease;}
.vsTable tbody tr:hover{background:rgba(255,255,255,.03);}
/* Same 3% alpha as before -- only the wash's hue follows the light ramp out
   of the green-grey family into the warm neutral one. */
:root[data-theme="light"] .vsTable tbody tr:hover{background:rgba(46,36,20,.03);}
/* Row labels read as the questions being asked -- a shade brighter than the
   competitor answers so the eye enters each row from the left. */
.vsTable td:first-child{color:var(--text);font-weight:700;width:20%;}
/* Percentages rather than pixel minimums: the four comparison columns share
   the remaining width evenly and shrink with the viewport, instead of each
   insisting on 120px and pushing the table into a scroll. */
.vsTable td:not(:first-child),.vsTable th:not(:first-child){width:20%;}
/* Below the point where five columns genuinely stop fitting, restore a
   minimum so cells stay readable and let the (now dark) scrollbar do its job. */
@media(max-width:820px){
  .vsTable{min-width:680px;}
  .vsTable td:first-child{width:auto;min-width:140px;}
  .vsTable td:not(:first-child),.vsTable th:not(:first-child){width:auto;min-width:112px;}
}
/* Gentle zebra striping: six rows of mixed prose and badges need a guide for
   the eye to track across five columns. Barely-there on purpose. */
.vsTable tbody tr:nth-child(even) td{background:rgba(255,255,255,.016);}
:root[data-theme="light"] .vsTable tbody tr:nth-child(even) td{background:rgba(46,36,20,.025);}

/* The product's own column is the visual winner of the table, treated as a
   lit card running through it: a warm gradient fill that fades down the
   column, gold hairlines on both flanks, ivory text, and a gradient top bar
   on the header like a lit tab. Inset shadows rather than borders because
   table cells collapse borders unpredictably across engines. */
.vsTable .hl{color:var(--ivory);font-weight:600;
  background:linear-gradient(180deg,rgba(212,161,63,.13),rgba(212,161,63,.05));
  box-shadow:inset 1px 0 0 rgba(212,161,63,.28),inset -1px 0 0 rgba(212,161,63,.28);}
/* Zebra must not wash out the champion column's own fill. */
.vsTable tbody tr:nth-child(even) td.hl{background:linear-gradient(180deg,rgba(212,161,63,.15),rgba(212,161,63,.07));}
.vsTable tbody tr:hover td.hl{background:linear-gradient(180deg,rgba(212,161,63,.19),rgba(212,161,63,.10));}
.vsTable thead th.hl{color:var(--accent);position:relative;overflow:hidden;
  font-family:var(--serif);font-size:13px;font-weight:700;letter-spacing:.16em;
  background:var(--grad) top/100% 3px no-repeat,
             linear-gradient(180deg,rgba(212,161,63,.18),rgba(212,161,63,.08));
  box-shadow:inset 1px 0 0 rgba(212,161,63,.4),inset -1px 0 0 rgba(212,161,63,.4);
  text-shadow:0 0 14px rgba(212,161,63,.35);}
/* The same catch-of-light that sweeps the wordmark, swept across the CORVA
   header cell -- one brand behaviour everywhere the name appears. An overlay
   layer rather than background-clip:text, because this cell needs its fill
   AND the sweep. Delayed so it fires after the hero's cascade. */
.vsTable thead th.hl::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 34%,rgba(242,220,158,.22) 46%,
             rgba(255,255,255,.34) 50%,rgba(242,220,158,.22) 54%,transparent 66%);
  background-size:260% 100%;background-position:120% 50%;
  animation:wordmarkSheen 6s cubic-bezier(.45,0,.25,1) 1.6s infinite;}
@media(prefers-reduced-motion:reduce){.vsTable thead th.hl::after{animation:none;opacity:0;}}
/* Close the lit column with a gold hairline along its bottom edge. */
.vsTable tbody tr:last-child td.hl{box-shadow:inset 1px 0 0 rgba(212,161,63,.28),
  inset -1px 0 0 rgba(212,161,63,.28),inset 0 -1px 0 rgba(212,161,63,.35);}
/* Chip-style verdict marks -- scannable at a glance instead of bare glyphs. */
/* vertical-align:middle, not a hand-tuned -4px nudge: the pixel offset was
   calibrated against one font size and drifted the badge off the text's
   centre line as soon as anything around it changed. middle stays correct
   at any size. */
.vsTable .yes,.vsTable .no{display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:6px;font-weight:800;font-size:11px;margin-right:7px;
  vertical-align:middle;flex:none;}
/* The label beside a badge sits on the same centre line. */
.vsTable td > .yes + span,.vsTable td > .no + span{vertical-align:middle;}
.vsTable .yes{color:var(--on-grad);background:var(--grad);box-shadow:0 2px 8px -1px #d4a13f66;}
/* The crosses are deliberately quiet -- a competitor lacking a feature is
   background information, and six loud red boxes were competing with the
   gold ticks the eye should land on. Outline only, small, low-contrast. */
.vsTable .no{color:#e0684f;opacity:.45;background:transparent;border:1px solid #e0684f3a;
  width:16px;height:16px;font-size:9px;}

/* ---- reviews: social proof right before the pricing ask ----
   One larger "hero" quote (gradient-frame card, matching .priceCard.featured's
   border trick) sits above a 2-up grid of standard cards. Avatars are
   initials on the brand gradient rather than photos -- placeholder-safe and
   consistent with the .mark/.feat .ico treatment used elsewhere. Decorative
   quote glyphs are the serif display face (matches hero/quoteLine), never
   the sans body face, so they read as typographic flourish, not content. */
/* Paged card track: three across on desktop, arrows page by one viewport.
   Scroll-snap rather than transform paging, so swipe, trackpad and keyboard
   all still work if the arrow script never runs. */
.reviewsGrid{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 40px)/3);
  gap:20px;margin-top:22px;align-items:stretch;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:4px;scrollbar-width:none;}
.reviewsGrid::-webkit-scrollbar{display:none;}
.reviewsGrid > .reviewCard{scroll-snap-align:start;}
/* Arrows flank the card track, vertically centred, rather than sitting above
   it -- they read as "there is more this way" exactly where the cards run out.
   The wrapper is the positioning context; padding keeps them clear of the
   cards on narrow screens instead of overlapping the text. */
/* The arrows live in a gutter either side of the track rather than floating
   over it -- overlapping the cards was covering the first and last words of
   every row. The track is inset by exactly the gutter, so nothing can sit
   underneath an arrow. */
.carouselWrap{position:relative;padding:0 62px;}
.carouselArrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;}
.carouselArrow--prev{left:0;}
.carouselArrow--next{right:0;}
.carouselArrow{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:50%;border:1px solid var(--accent);background:var(--grad);color:var(--on-grad);
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.75),0 0 0 5px var(--bg);}
.carouselArrow svg{stroke-width:2.6;}
.carouselArrow:hover:not(:disabled){transform:translateY(-50%) scale(1.08);
  box-shadow:0 10px 30px -8px rgba(0,0,0,.8),0 0 0 5px var(--bg),0 0 22px -4px #a87d4188;}
.carouselArrow:active:not(:disabled){transform:translateY(-50%) scale(.96);}
.carouselArrow:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
/* Disabled = the end of the track. Still clearly a button, clearly inert. */
.carouselArrow:disabled{background:var(--panel2);color:var(--muted-dim);
  border-color:var(--hair);opacity:.55;cursor:default;box-shadow:0 0 0 5px var(--bg);}
@media(max-width:900px){.carouselWrap{padding:0 52px;}}
/* On a phone the gutter would eat the cards; swipe is the natural control
   there, so the arrows step out of the way entirely. */
@media(max-width:640px){.carouselWrap{padding:0;}.carouselArrow{display:none;}}
@media(max-width:900px){.reviewsGrid{grid-auto-columns:calc((100% - 20px)/2);}}
@media(max-width:640px){.reviewsGrid{grid-auto-columns:86%;}}
.reviewFeatured{position:relative;overflow:hidden;border:1px solid transparent;border-radius:16px;
  background:linear-gradient(180deg,var(--panel2) 0%,var(--panel) 30%) padding-box,var(--grad) border-box;
  padding:36px 38px 28px;box-shadow:0 18px 44px -18px rgba(0,0,0,.5),0 0 46px -10px #a87d4128;}
.reviewCard{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--hair);
  border-radius:14px;padding:26px 26px 22px;display:flex;flex-direction:column;height:100%;
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;}
.reviewCard:hover{border-color:var(--accent);transform:translateY(-3px);
  box-shadow:0 16px 34px -18px rgba(0,0,0,.5),0 0 0 1px var(--accent-soft);}
.reviewQuoteMark{position:absolute;top:6px;left:20px;font-family:var(--serif);font-size:60px;font-weight:600;
  line-height:1;color:var(--accent);opacity:.2;pointer-events:none;z-index:0;}
.reviewFeatured .reviewQuoteMark{font-size:92px;top:2px;left:26px;}
.reviewFeaturedQuote{position:relative;z-index:1;font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(19px,2.3vw,25px);line-height:1.62;color:var(--ivory);
  /* Clear of the oversized quote mark above and the attribution below --
     this is the line people actually read, so it gets the room. */
  margin:44px 0 40px;max-width:64ch;}
.reviewQuote{position:relative;z-index:1;flex:1;font-size:14px;line-height:1.7;color:var(--muted);margin:32px 0 22px;}
.reviewMeta{position:relative;z-index:1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.reviewAvatar{flex:none;width:38px;height:38px;border-radius:50%;background:var(--grad);color:var(--on-grad);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;letter-spacing:.02em;
  box-shadow:0 4px 12px -3px #a87d4166;}
.reviewMetaText{display:flex;flex-direction:column;gap:1px;}
.reviewName{font-size:13px;font-weight:700;color:var(--text);}
.reviewRole{font-size:11.5px;color:var(--muted-dim);}
.reviewVerified{display:inline-flex;align-items:center;gap:5px;margin-left:auto;white-space:nowrap;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);
  background:var(--accent-soft);border-radius:999px;padding:4px 10px 4px 9px;}

/* ---- pricing: quiet, ruled, serif numerals ----
   Four tiers now (Free/Starter/Plus/Pro): 4-up desktop, 2x2 at ~900px,
   1-col at 560px. No max-width cap (unlike the old 2-card layout) so the
   row uses the full .lwrap measure; CSS Grid's default row-stretch keeps
   every card in a row the same height without extra alignment rules. */
.pricingLede{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--muted);
  margin:-8px 0 26px;}
.pricingDefine{display:flex;flex-direction:column;gap:5px;max-width:720px;
  background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:8px;
  padding:15px 20px;margin:0 0 34px;}
.pricingDefine strong{display:block;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;color:var(--accent);}
.pricingDefine span{font-size:13.5px;line-height:1.65;color:var(--text);}
.pricingGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:none;margin:0;}
/* 2x2 cards are roughly twice as wide as the 4-up desktop layout, so the
   headline figure can afford to grow back up before the 1-col phone rules
   (further below) take over sizing. */
@media(max-width:900px){
  .pricingGrid{grid-template-columns:1fr 1fr;}
  .priceAmount{font-size:40px;}
  .pricePerReport{font-size:22px;}
}
@media(max-width:560px){.pricingGrid{grid-template-columns:1fr;}}
/* Dimensional pricing cards: layered shadows give real depth, and the
   featured tier sits visibly closer to the viewer -- gradient frame,
   gold glow, and a slight lift that deepens on hover. */
.priceCard{position:relative;background:linear-gradient(180deg,var(--panel2) 0%,var(--panel) 26%);
  border:1px solid var(--hair);border-radius:14px;
  padding:26px 22px 24px;display:flex;flex-direction:column;
  box-shadow:0 2px 4px rgba(0,0,0,.18),0 14px 34px -14px rgba(0,0,0,.5);
  transition:border-color .16s ease,transform .18s ease,box-shadow .18s ease;}
.priceCard:hover{border-color:var(--muted-dim);transform:translateY(-4px);
  box-shadow:0 4px 8px rgba(0,0,0,.2),0 26px 54px -18px rgba(0,0,0,.6);}
.priceCard.featured{border:1px solid transparent;transform:translateY(-6px) scale(1.015);
  background:linear-gradient(180deg,var(--panel2) 0%,var(--panel) 26%) padding-box,var(--grad) border-box;
  box-shadow:0 2px 6px rgba(0,0,0,.22),0 22px 60px -16px rgba(0,0,0,.55),0 0 42px -6px #d8ab4738;}
.priceCard.featured:hover{transform:translateY(-9px) scale(1.015);
  box-shadow:0 4px 10px rgba(0,0,0,.24),0 30px 70px -18px rgba(0,0,0,.62),0 0 56px -4px #d8ab474d;}
.priceCard.featured .priceAmount{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(201,154,53,.26));}
.priceBadge{box-shadow:0 6px 16px -4px #a87d4188;}
.priceBadge{position:absolute;top:-11px;left:26px;transform:none;background:var(--grad);color:var(--on-grad);
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:4px;white-space:nowrap;}
.priceName{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:12px;}
.priceAmount{font-family:var(--serif);font-size:32px;font-weight:560;letter-spacing:-.01em;color:var(--ivory);margin-bottom:2px;}
.priceUnit{font-size:13px;font-weight:600;color:var(--muted);margin-left:4px;font-family:'Inter',sans-serif;}
.priceMonthly{font-size:12px;color:var(--muted);margin:-2px 0 12px;}
/* Per-report price: the "story" number for the three paid tiers -- how
   little one AI-researched company actually costs once you divide the
   monthly price by the quota. Large serif so it reads as the headline
   figure, not a footnote. */
.pricePerReport{font-family:var(--serif);font-size:19px;font-weight:560;letter-spacing:-.005em;
  color:var(--ivory);margin:0 0 12px;}
.pricePerReport .u{font-family:'Inter',sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);margin-left:5px;}
.priceCard.featured .pricePerReport{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
/* The report count is the ONLY thing separating the three paid tiers, so it
   is the second-biggest element on the card after the price -- a number the
   eye can compare across four cards in one pass (1 / 10 / 30 / 50), instead
   of a sentence each card asks you to read. Gold gradient ties it to the
   brand; tabular numerals keep the digits optically aligned card to card. */
.priceReports{display:flex;align-items:center;gap:11px;margin:12px 0 16px;
  padding:11px 13px;border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);}
.priceReports .n{font-family:var(--serif);font-size:40px;font-weight:600;line-height:.95;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;flex:none;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 12px rgba(212,161,63,.25));}
.priceReports .u{font-size:12px;line-height:1.35;color:var(--muted);font-weight:600;}
/* The free card's "1" is a different kind of one -- a single trial, not a
   monthly allowance -- so it is deliberately quieter than the paid counts. */
.priceReports.free{background:transparent;border-color:var(--hair);}
.priceReports.free .n{font-size:32px;background:none;-webkit-background-clip:initial;
  background-clip:initial;color:var(--muted);filter:none;}

.priceDesc{margin:0 0 18px;color:var(--muted);font-size:13.5px;line-height:1.6;}
/* "Who it's for" + cross-tier parity note -- both sit between the price and
   the feature list on the three PAID cards only (Free has neither). Kept as
   plain small text rather than new pill/badge widgets so three extra lines
   don't compete visually with .priceBadge on the featured card. */
.priceFor{margin:-8px 0 14px;color:var(--muted);font-size:12px;font-style:italic;}
.priceParity{margin:0 0 18px;padding:7px 10px;background:var(--accent-soft);
  border-left:2px solid var(--accent);border-radius:6px;color:var(--text);
  font-size:11px;font-weight:600;line-height:1.5;font-style:normal;}
.priceFeatures{list-style:none;margin:0 0 20px;padding:0;flex:1;}
.priceFeatures li{position:relative;padding:9px 0 9px 22px;font-size:13px;line-height:1.5;color:var(--text);
  border-top:1px solid var(--hair);}
.priceFeatures li:first-child{border-top:none;}
.priceFeatures li::before{content:'✓';position:absolute;left:0;top:9px;color:var(--accent);font-weight:800;}
.priceNote{text-align:center;margin-top:10px;font-size:12px;color:var(--muted);}
/* Extra-report top-up box, on all three paid cards now (was Pro-only).
   Reuses the app's existing track/fill bar convention (see .chkBar /
   .targetTrack in styles.css: track on --panel3, fill in the brand gradient)
   so the "price steps down" story stays in the established visual language
   instead of inventing a new widget. Starter genuinely has a sliding rate as
   the top-up grows, so it gets the row/bar treatment; Plus and Pro are flat
   per report, so their box is just the label plus one .ladderExamples line --
   a bar chart with a single, unchanging bar would misrepresent a flat rate
   as if it were a step. */
.volumeLadder{margin:14px 0 4px;padding:11px 12px 9px;background:var(--panel3);border-radius:8px;}
.ladderLabel{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted-dim);margin-bottom:8px;}
.ladderRow{display:grid;grid-template-columns:36px 1fr 38px;align-items:center;gap:8px;}
.ladderRow+.ladderRow{margin-top:6px;}
.ladderRange{font-size:10px;color:var(--muted-dim);font-variant-numeric:tabular-nums;white-space:nowrap;}
.ladderBar{position:relative;height:6px;border-radius:99px;background:var(--panel2);overflow:hidden;}
.ladderBar::before{content:'';position:absolute;inset:0;width:var(--w);background:var(--grad);border-radius:99px;}
.ladderPrice{font-size:11px;font-weight:700;color:var(--text);text-align:right;font-variant-numeric:tabular-nums;}
.ladderExamples{font-size:10.5px;line-height:1.55;color:var(--muted-dim);margin:9px 0 16px;}
.pricingPullquote{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ivory);
  text-align:center;max-width:520px;margin:40px auto 0;line-height:1.5;}

/* ---- FAQ: hairline list ---- */
.faqList{max-width:760px;}
.faqItem{background:none;border:none;border-radius:0;padding:0;border-top:1px solid var(--hair);}
.faqItem:last-child{border-bottom:1px solid var(--hair);}
.faqItem summary{padding:19px 0;cursor:pointer;font-weight:700;font-size:15px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--text);}
.faqItem summary::-webkit-details-marker{display:none;}
.faqItem summary::after{content:'+';font-family:var(--serif);font-size:22px;font-weight:400;color:var(--accent);
  flex:none;transition:transform .15s ease;}
.faqItem[open] summary::after{transform:rotate(45deg);}
.faqItem p{margin:0 0 20px;color:var(--muted);font-size:14px;line-height:1.7;max-width:64ch;}

/* ---- final CTA: a closing statement, not a box ---- */
.ctaBox{background:none;border:none;border-radius:0;padding:20px 0 10px;text-align:center;}
.ctaBox h2{font-family:var(--serif);font-size:clamp(30px,4.4vw,48px);letter-spacing:-.01em;font-weight:560;
  margin:0 0 16px;line-height:1.12;color:var(--ivory);
  text-shadow:0 0 26px rgba(234,231,218,.09),0 0 56px rgba(201,154,53,.07);}
.ctaBox p{color:var(--muted);font-size:15.5px;max-width:52ch;margin:0 auto 30px;line-height:1.7;}

/* ---- two-voice color: emerald leads, old gold answers ----
   Alternating section eyebrows and the pull-quote pick up the gold so a
   long scroll breathes in two hues instead of one, while CTAs and links
   stay exclusively emerald (one action color, always). */
.sec:nth-of-type(even) .secEyebrow{color:var(--analysis);}
.sec:nth-of-type(even) .secEyebrow::after{background:var(--analysis);}
.kicker{color:var(--analysis);}
.kicker::before{background:var(--analysis);}
.quoteLine{color:var(--analysis);}
/* Stat figures are gradient-clipped (transparent color), so hover shifts
   would have no visible effect -- brighten instead. */
.heroStats .hs:hover .n{filter:brightness(1.12);transition:filter .2s ease;}

/* ---- footer ---- */
.lfoot{border-top:1px solid var(--hair);padding:40px 0 48px;}
.lfootCols{display:flex;gap:64px;flex-wrap:wrap;margin-bottom:30px;}
.lfootBrand{max-width:260px;}
.lfootBrand .brandLine{display:flex;align-items:center;}
.lfootBrand .wordmark{font-size:15px;letter-spacing:.22em;padding-right:.22em;}
.lfootTag{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--muted);margin:12px 0 0;line-height:1.5;}
.lfootCol{display:flex;flex-direction:column;gap:10px;}
.lfootHead{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:3px;}
.lfootCol a{color:var(--muted-dim);text-decoration:none;font-size:12.5px;font-weight:600;}
.lfootCol a:hover{color:var(--text);}
.lfoot .disclaimer{font-size:11.5px;color:var(--muted-dim);max-width:70ch;line-height:1.7;
  border-top:1px solid var(--hair);padding-top:22px;}

/* ---- Apple-style pacing: generous air, product as centerpiece ---- */
.sec{padding:112px 0;}
.hero{padding:118px 0 72px;}
.hero h1{font-size:clamp(46px,7.6vw,92px);}
.previewWrap{padding:8px 0 112px;}
.browser{margin:0 auto;max-width:1040px;}
.plateCap{max-width:1040px;margin:0 auto 14px;}

/* Sticky buy-bar: hidden above the viewport until the hero scrolls away,
   then slides down over the masthead (auth.js toggles .show). */
.stickyCta{position:fixed;top:0;left:0;right:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair);transform:translateY(-100%);
  transition:transform .32s cubic-bezier(.3,.7,.3,1);}
.stickyCta.show{transform:translateY(0);}
.stickyCtaRow{display:flex;align-items:center;gap:16px;height:54px;}
/* Same polished-metal mark as the masthead, smaller. Inherits the sheen so
   the brand behaves identically wherever it appears -- a logo that animates
   in one place and not another reads as a bug. */
.scName{font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  background:linear-gradient(100deg,
    #8a6420 0%, #c9992f 14%, #f2dc9e 30%, #ffffff 38%, #f2dc9e 46%,
    #d4a13f 58%, #a87c28 74%, #e8c86f 88%, #c9992f 100%);
  background-size:260% 100%;background-position:120% 50%;
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.22em;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.45));
  animation:wordmarkSheen 6s cubic-bezier(.45,0,.25,1) infinite;}
@media(prefers-reduced-motion:reduce){.scName{animation:none;background-position:50% 50%;}}
.scNote{flex:1;font-size:12px;color:var(--muted-dim);}
@media(max-width:560px){.scNote{display:none;}.scName{flex:1;}}

/* ---- scroll-reveal (added by auth.js only when JS runs) ---- */
.willReveal{opacity:0;transform:translateY(18px) scale(.99);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.8,.3,1);}
.willReveal.revealed{opacity:1;transform:none;}
.browser.willReveal{transform:translateY(30px) scale(.97);}
.browser.willReveal.revealed{transform:none;}
@media(prefers-reduced-motion:reduce){
  html.landingActive{scroll-behavior:auto;}
  .willReveal{opacity:1;transform:none;transition:none;}
  .qTrack{animation:none;}
  .ring .bar{animation:none;}
}

/* ---- mobile typography pass (PHONES ONLY -- desktop is untouched) ----
   At 375px the desktop treatment fell apart: an 84px-scale serif headline
   wrapping twice, uppercase italic body lines with jumbo inline words
   breaking the line rhythm, wide letter-spacing on wrapped text, and stat
   numerals sized for a 1400px canvas. Everything here re-tunes size,
   tracking and line air so wrapped uppercase text reads calmly. */
@media(max-width:640px){
  .hero h1{font-size:clamp(30px,9vw,38px);line-height:1.12;letter-spacing:0;margin-bottom:18px;}
  .heroTag{font-size:14.5px;line-height:1.75;letter-spacing:.02em;max-width:30ch;margin-bottom:2px;}
  .heroTag + .heroTag{margin-bottom:22px;}
  /* Jumbo inline words ("ONE CLICK", "100X") at 1.5em wreck wrapped line
     rhythm on a phone -- keep the emphasis, shrink the jump. */
  .heroTag .x100{font-size:1.18em;}
  .heroPunch{font-size:13.5px;letter-spacing:.05em;line-height:1.7;max-width:30ch;margin-bottom:24px;}
  .heroCta{gap:10px;}
  .btnLg{padding:13px 22px;font-size:14px;}
  .heroNote{gap:10px 18px;font-size:11.5px;}
  .heroStats{margin-top:36px;}
  .heroStats .hs{min-width:130px;padding:16px 14px 16px 0;}
  .heroStats .hs .n{font-size:30px;}
  .heroStats .hs .l{font-size:9.5px;letter-spacing:.05em;}
  .qMarqueeLabel{font-size:9.5px;letter-spacing:.12em;}
  .qTrack span{font-size:14.5px;}
  .secHead{margin-bottom:32px;}
  .secHead h2{font-size:clamp(21px,6.4vw,26px);line-height:1.22;}
  .secHead p{font-size:14px;line-height:1.7;}
  .secEyebrow{font-size:10px;letter-spacing:.14em;}
  .quoteLine span:first-child{font-size:clamp(18px,5.6vw,22px);line-height:1.45;}
  .methodChipsLabel{font-size:9.5px;letter-spacing:.1em;margin:26px 0 12px;}
  .methodChips{gap:8px;}
  .methodChip{padding:8px 12px;font-size:11.5px;white-space:normal;}
  .compareCol{padding:20px 18px 10px;}
  .compareCol li{font-size:13px;line-height:1.65;}
  .feat h3{font-size:14px;}
  .feat p{font-size:13px;line-height:1.65;}
  .step h3{font-size:14.5px;}
  .step p{font-size:13px;line-height:1.65;}
  .step::before{font-size:40px;}
  .reviewFeatured{padding:26px 22px 22px;}
  .reviewFeaturedQuote{font-size:17px;line-height:1.62;margin:30px 0 28px;}
  .reviewCard{padding:20px 20px 18px;}
  .reviewQuote{font-size:13px;margin:26px 0 18px;}
  .reviewQuoteMark{font-size:46px;top:4px;left:14px;}
  .reviewFeatured .reviewQuoteMark{font-size:68px;left:18px;}
  .priceAmount{font-size:38px;}
  .priceFeatures li{font-size:12.5px;line-height:1.6;}
  .ctaBox h2{font-size:clamp(24px,7vw,30px);line-height:1.2;}
  .pricingLede{font-size:14.5px;}
  .pricingDefine{padding:13px 16px;}
  .pricingPullquote{font-size:17px;margin-top:32px;}
}

/* ---------------------------------------------------------------------------
   Phone hero: one line per line, never split.

   The two blocks above let the hero wrap on a phone, which is why the headline
   and both tag lines each broke across two lines. Wrapping was originally
   restored because a fixed nowrap font size clipped the text mid-word -- so the
   fix here is not nowrap alone, it is nowrap PLUS a viewport-scaled size, so
   the line shrinks to fit instead of overflowing.

   Measured single-line widths, and the width each needs per 1px of font-size:
     h1      "HI, VALUE INVESTOR"     327px @ 33.8px  ->  9.68 px per font-px
     heroTag "YOU ARE ONE CLICK..."   401px @ 14.5px  -> 27.66 px per font-px
     heroTag "100X COMPANY WITH..."   404px @ 14.5px  -> 27.86 px per font-px

   So the size that exactly fits is (available width / those ratios). The
   divisors below are set ABOVE the exact ratio, which buys slack -- a plain vw
   coefficient was measured overflowing the viewport by 8px at 320px, because
   .lwrap's 28px gutters make the real budget 100vw-56px, not 100vw-32px.
   The hero gutter is pulled to 16px here (scoped to .hero only, so the rest of
   the landing page keeps its 28px) purely to buy back width for the type:
   without it the tag lines drop to ~9px on a 320px phone, which is too small
   to read even though it technically fits. max-width has to be cleared too --
   the 26ch/30ch caps were the actual thing forcing the break. */
@media(max-width:700px){
  .hero .lwrap{padding-left:16px;padding-right:16px;}
  .hero h1{
    white-space:nowrap;
    font-size:min(38px,calc((100vw - 32px) / 10.3));
    max-width:none;
    letter-spacing:0;
  }
  .heroTag{
    white-space:nowrap;
    text-wrap:nowrap;
    font-size:min(14.5px,calc((100vw - 32px) / 29));
    max-width:none;
    letter-spacing:.02em;
  }
  /* Emphasis ratio held at the measured value -- raising it re-widens the line
     and is what would push it back onto two lines. */
  .heroTag .x100{font-size:1.18em;}
}


/* ---- Review star ratings ---- */
/* Top-right, opposite the oversized quote mark -- side by side they collided,
   since the mark is absolutely positioned over the card's top-left corner.
   Unfilled stars stay visible so 4 of 5 reads as four rather than as a short
   ambiguous row. */
.reviewStars{position:relative;z-index:1;display:flex;justify-content:flex-end;
  gap:3px;margin:0 0 14px;}
.reviewStars .rStar{position:relative;display:inline-flex;color:var(--hair);line-height:0;}
.reviewStars .rStar svg{width:13px;height:13px;fill:currentColor;display:block;}
.reviewStars .rStar.on{color:var(--accent);}
/* Half: a gold copy clipped to the left half, laid over the grey base. */
.reviewStars .rStar.half > .rStarFill{position:absolute;top:0;left:0;width:50%;
  overflow:hidden;color:var(--accent);line-height:0;}
.reviewFeatured .reviewStars{justify-content:flex-start;margin:0 0 4px;gap:4px;}
.reviewFeatured .reviewStars .rStar svg{width:16px;height:16px;}

/* ---- What's in the report: 18 sections in four groups ---- */
/* Grouped exactly as the report's own navigation is, so the page and the
   product teach the same shape. The tier badge sits on the group, not on each
   item, because plans unlock whole groups. */
.rsGroups{display:flex;flex-direction:column;gap:34px;margin-top:28px;}
.rsGroup{border:1px solid var(--hair);border-radius:16px;padding:22px 26px 8px;
  background:linear-gradient(180deg,var(--panel2) 0%,transparent 60%);}
.rsGroupHead{display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  padding-bottom:14px;border-bottom:1px solid var(--hair);}
.rsGroupName{margin:0;font-family:var(--display-font);font-size:17px;font-weight:800;
  letter-spacing:-.015em;color:var(--accent);}
.rsGroupSub{flex:1 0 100%;margin:2px 0 0;font-size:12.5px;color:var(--muted-dim);}
.rsList{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 34px;}
.rsItem{display:flex;gap:15px;padding:16px 0;border-bottom:1px solid color-mix(in srgb,var(--hair) 55%,transparent);}
.rsNum{flex:none;width:30px;font-family:var(--serif);font-style:italic;font-size:17px;
  font-weight:600;color:var(--accent);line-height:1.5;opacity:.8;}
.rsBody{min-width:0;}
.rsTitle{margin:0 0 6px;font-family:var(--display-font);font-size:15.5px;font-weight:800;
  letter-spacing:-.012em;color:var(--text);}
.rsText{margin:0;font-size:13.5px;line-height:1.72;color:var(--muted);}
.rsTier{flex:none;padding:3px 9px;border-radius:999px;font-size:9.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;border:1px solid transparent;}
.rsTier--starter{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);
  border-color:color-mix(in srgb,var(--accent) 32%,transparent);}
.rsTier--plus{color:#7fd1a6;background:rgba(127,209,166,.10);border-color:rgba(127,209,166,.32);}
.rsTier--pro{color:#e2b3ff;background:rgba(226,179,255,.10);border-color:rgba(226,179,255,.32);}
@media(max-width:860px){
  .rsGroup{padding:20px 18px 6px;}
  .rsList{grid-template-columns:1fr;gap:0;}
  .rsItem{padding:15px 0;gap:12px;}
  .rsNum{width:24px;font-size:15px;}
}

/* ---- Brand mark (from corva-logo/README.md) ----
   The raven mark sits before the wordmark. Inline SVG so it inherits the same
   drop-shadow the wordmark carries and needs no extra request. Sizes follow
   the kit's rule: mark height = 1.08 x wordmark font-size. */
.lbrand,.brandLine{display:flex;align-items:center;gap:12px;}
.brandMark{flex:none;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.45)) drop-shadow(0 0 12px rgba(212,161,63,.30));}
@media(max-width:560px){.lbrand .brandMark{width:29px;height:21px;}}
.brandLine{gap:9px;}