/* ============================================================================
   MF Analyser — the landing page
   ----------------------------------------------------------------------------
   The same shape InvestVerdict's landing has — a big hero, the tools in one
   place, the four steps, why it can be trusted, then pricing — but every word
   and every figure on it is about mutual funds, and the page is light.

   Light, not white. A page of pure white with white cards on it has nothing to
   separate one from the other, so the ground is a soft warm neutral and the
   cards sit on top of it in white. The navy and the gold come from the logo.

   Rules this file follows:
     · only transform and opacity are animated — they skip layout and paint
     · entrances use ease-out, because the first frame is the one being watched
     · anything seen often is fast (under 300ms); only the scroll reveals, which
       each happen once, are allowed to take longer
     · every hover is behind a pointer query, so a tap on a phone does not leave
       an element stuck in its hover state
     · all of it stops under prefers-reduced-motion

   Loaded after landing.css, so it only has to win on what it names.
   ========================================================================== */

:root{
  /* InvestVerdict's own values, copied from its landing stylesheet so the two
     sites read as one house. Navy for the ground, gold for anything that is
     meant to be noticed, warm off-white for the words. */
  --bg:   #05111f;
  --bg2:  #081929;
  --bg3:  #0c2038;
  --card: #0c2038;

  --a:    #c9982a;
  --a2:   #e8b84b;
  --gold: #c9982a;

  --t1: #e4dfd0;
  --t2: #7a8799;
  --t3: #576576;

  --green:#10b981;
  --red:  #ef4444;

  --line: rgba(228,223,208,.08);
  --line-strong: rgba(201,152,42,.18);

  --glass-bg: rgba(12,32,56,.55);
  --glass-border: rgba(201,152,42,.18);
  --glass-shadow: 0 30px 80px -30px rgba(0,0,0,.7);

  --grad: linear-gradient(135deg,#c9982a 0%,#e8b84b 100%);

  --out: cubic-bezier(.23,1,.32,1);
  --in-out: cubic-bezier(.77,0,.175,1);
}

html, body{
  background:
    radial-gradient(1100px 640px at 82% -12%, rgba(201,152,42,.13), transparent 60%),
    radial-gradient(900px 600px at 2% 8%, rgba(16,41,74,.6), transparent 55%),
    #05111f !important;
  background-attachment: fixed !important;
  color: var(--t1);
}
::selection{ background: rgba(232,184,75,.35); color:#05111f }

/* the faint grid that keeps a light page from reading as empty */
.bg-grid{
  background-image:
    linear-gradient(rgba(228,223,208,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(228,223,208,.05) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(1000px 700px at 50% 0%, #000 25%, transparent 76%);
}

/* ══ the headline ═════════════════════════════════════════════════════════
   The gold half of the headline once painted as a solid block. The cause was
   this file's own `background:` shorthand, which quietly resets background-clip
   to border-box — the gradient filled the box and the transparent letters
   vanished behind it. The clip has to carry the same weight as the shorthand
   that reset it, which is why these are marked important. */
.grad-text, .gradient-text{
  background: linear-gradient(100deg,#e8b84b 0%,#c9982a 50%,#f0cb6a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.hero-copy h1{
  font-family:'DM Sans',system-ui,sans-serif;
  font-weight:700; letter-spacing:-.035em; line-height:1.04;
  font-size:clamp(38px,5.4vw,74px);
  color:var(--t1);
}
.hero-copy .sub{ color:var(--t2); font-size:clamp(15.5px,1.5vw,19px); line-height:1.65 }
.eyebrow, .eyebrow.gold{ color:#e8b84b !important; letter-spacing:.18em; font-size:12px; font-weight:600 }

/* ══ entrance ═════════════════════════════════════════════════════════════
   60ms apart. Longer and the page feels slow; shorter and the eye reads it as
   one movement and the order is wasted. */
@keyframes riseIn{ from{ opacity:0; transform:translate3d(0,14px,0) } to{ opacity:1; transform:none } }
.hero-copy > *{ opacity:0; animation: riseIn 620ms var(--out) forwards }
.hero-copy > *:nth-child(1){ animation-delay: 60ms }
.hero-copy > *:nth-child(2){ animation-delay: 120ms }
.hero-copy > *:nth-child(3){ animation-delay: 180ms }
.hero-copy > *:nth-child(4){ animation-delay: 240ms }
.hero-copy > *:nth-child(5){ animation-delay: 300ms }
.hero-dash{ opacity:0; animation: riseIn 760ms var(--out) 220ms forwards }

.hero{ position:relative }
.hero::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:min(760px,86vw); aspect-ratio:1; right:-8%; top:-14%;
  background: radial-gradient(circle, rgba(201,152,42,.22), transparent 62%);
  filter: blur(34px);
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform:scale(1) translate3d(0,0,0); opacity:.8 }
  50%    { transform:scale(1.09) translate3d(0,-16px,0); opacity:1 }
}
.hero-grid, .hero-copy, .hero-dash{ position:relative; z-index:1 }

/* ══ panels ═══════════════════════════════════════════════════════════════ */
.glass, .mock, .dash-card, .pop-card, .why-card, .price-card, .cat-card,
.test-card, .feature, .step, .faq-item, .stat, .live-pill{
  background: rgba(12,32,56,.55);
  border:1px solid var(--line-strong);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.price-card.pro{
  border-color: rgba(201,152,42,.45);
  background: linear-gradient(180deg, rgba(201,152,42,.10), rgba(12,32,56,.6));
  box-shadow: 0 30px 80px -30px rgba(201,152,42,.4);
}

/* Lift on hover, but only where there is a real pointer. On a phone this would
   fire on tap and leave the card raised until something else is touched. */
@media (hover:hover) and (pointer:fine){
  .pop-card, .why-card, .cat-card, .price-card, .test-card, .feature, .step{
    transition: transform 220ms var(--out), border-color 220ms ease, box-shadow 220ms ease;
  }
  .pop-card:hover, .why-card:hover, .cat-card:hover, .test-card:hover, .step:hover{
    transform: translate3d(0,-3px,0);
    border-color: rgba(201,152,42,.4);
    box-shadow: 0 34px 90px -30px rgba(0,0,0,.85);
  }
  .price-card:hover{ transform: translate3d(0,-4px,0); border-color: var(--line-strong) }
}

/* ══ buttons ══════════════════════════════════════════════════════════════
   A press has to be felt. 160ms is long enough to read as movement and short
   enough that it never delays the click. */
.btn{ transition: transform 160ms var(--out), box-shadow 200ms ease, filter 200ms ease }
.btn:active{ transform: scale(.97) }
.btn-primary{
  background: linear-gradient(135deg,#c9982a,#e8b84b);
  color:#05111f; border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 1px 0 rgba(255,255,255,.32) inset, 0 14px 36px -12px rgba(201,152,42,.5);
  font-weight:700;
}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{ transform: translate3d(0,-1px,0); filter:brightness(1.04);
    box-shadow: 0 1px 0 rgba(255,255,255,.36) inset, 0 18px 44px -12px rgba(201,152,42,.6) }
}
.btn-primary:active{ transform: scale(.97) }
.btn-ghost{ background: rgba(228,223,208,.05); color:var(--t1); border:1px solid var(--line) }
@media (hover:hover) and (pointer:fine){
  .btn-ghost:hover{ background: rgba(201,152,42,.12); border-color: rgba(201,152,42,.5); transform: translate3d(0,-1px,0); color:var(--t1) }
}
.btn-ghost:active{ transform: scale(.97) }

/* ══ header ═══════════════════════════════════════════════════════════════
   The same bar as every other page — same five tabs, same search, same account
   button — and now the same white, because this page is light too. */
.chrome{
  background: rgba(5,17,31,.86) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
  box-shadow: 0 1px 0 rgba(16,42,80,.03), 0 10px 26px -22px rgba(16,42,80,.5);
}
.chrome-brand, .chrome-brand .name, .chrome-brand .name *{ color:#fff !important }
.chrome-brand img{ height:30px; width:auto; display:block }
.chrome .chrome-tab{ color:var(--t2) !important }
.chrome .chrome-tab:hover{ color:var(--t1) !important }
.chrome .chrome-tab.active{ color:#fff !important; font-weight:600 }
.chrome .chrome-tab.active::after{
  background: linear-gradient(90deg,#c9982a,#e8b84b) !important;
  height:3px; border-radius:3px 3px 0 0;
}
.chrome .chrome-date, .chrome [data-acc-date]{ color:var(--t3) !important }
.chrome-btn{
  background: linear-gradient(180deg,#e8b84b,#c9982a) !important;
  border:1px solid rgba(255,255,255,.18) !important; color:#05111f !important; font-weight:700;
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 10px 24px -10px rgba(201,152,42,.6);
  transition: transform 160ms var(--out), filter 200ms ease;
}
.chrome-btn:active{ transform: scale(.97) }
@media (hover:hover) and (pointer:fine){ .chrome-btn:hover{ filter:brightness(1.06); color:#05111f !important } }
.chrome-avatar{
  background: linear-gradient(135deg,#e8b84b,#c9982a) !important;
  color:#05111f !important; border:1px solid rgba(255,255,255,.16) !important;
}
.chrome-search svg{ color:#8ea0ba }
#mfQ{ background: rgba(228,223,208,.07); border:1px solid var(--line); color:var(--t1) }
#mfQ::placeholder{ color:var(--t3) }
#mfQ:focus{ background: rgba(228,223,208,.12); border-color: rgba(201,152,42,.55);
  box-shadow: 0 0 0 3px rgba(201,152,42,.2) }
.mfh-res{ background:#0c2038; border-color:var(--line-strong); box-shadow: 0 30px 70px -24px rgba(0,0,0,.85) }
.mfh-res a{ color:var(--t1); border-top-color:var(--line) }
.mfh-res a:hover, .mfh-res a.on{ background: rgba(201,152,42,.10) }
.mfh-res .rgrp, .mfh-res .rempty, .mfh-res .rn span{ color:var(--t3) }
.mfh-res .ri{ background: rgba(201,152,42,.14); color:#e8b84b }
.mfh-res .rn b{ color:var(--t1) } .mfh-res .rv{ color:#c3d0e0 }
.mfh-burger span{ background:var(--t1) }
@media (max-width:900px){
  .chrome .chrome-tabs{ background:#0b1a2c; box-shadow: 0 16px 32px rgba(0,0,0,.35) }
  .chrome .chrome-tab{ border-bottom:1px solid var(--line) }
}

/* ══ scroll reveals ═══════════════════════════════════════════════════════
   Shortened from 700ms and 26px: the distance was far enough that a section was
   still arriving when the eye reached it. */
.reveal{
  opacity:0; transform: translate3d(0,18px,0);
  transition: opacity 560ms var(--out), transform 560ms var(--out);
  will-change: transform, opacity;
}
.reveal.in{ opacity:1; transform:none; will-change:auto }
.reveal.d1{ transition-delay:.06s } .reveal.d2{ transition-delay:.12s }
.reveal.d3{ transition-delay:.18s } .reveal.d4{ transition-delay:.24s }

/* ══ small pieces ═════════════════════════════════════════════════════════ */
h1,h2,h3,h4,h5{ color:var(--t1) }
p, li{ color:var(--t2) }
.stats-band, .trust-strip, .stats-strip{ color:var(--t2) }
.num, .big, .v, .amt, .chart-val{ color:var(--t1) }
.lbl, .k, .meta, .desc, .cat, .role, .url{ color:var(--t3) }
.pos, .fund-cagr{ color:var(--green) } .neg{ color:var(--red) }
.tag, .price-badge, .rank-cat{ background: rgba(201,152,42,.12); color:#e8b84b; border:1px solid rgba(201,152,42,.28) }
.stars, .star{ color:#e8b84b }
.link-arrow{ color:#e8b84b; transition: color 160ms ease }
.link-arrow .arrow{ display:inline-block; transition: transform 200ms var(--out) }
@media (hover:hover) and (pointer:fine){ .link-arrow:hover .arrow{ transform: translateX(4px) } }
.bar-track{ background: rgba(228,223,208,.08) }
.bar-fill{ background: linear-gradient(90deg,#c9982a,#e8b84b) }
.swatch{ box-shadow: 0 0 0 1px rgba(255,255,255,.14) }
.live-dot{ background:var(--green); animation: ping 1.8s ease-out infinite }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(10,125,87,.45) } 70%{ box-shadow:0 0 0 8px rgba(10,125,87,0) } 100%{ box-shadow:0 0 0 0 rgba(10,125,87,0) } }
.step-num{ background: linear-gradient(135deg,#c9982a,#e8b84b); color:#05111f; font-weight:700 }
.step-connector{ background: linear-gradient(90deg, rgba(201,152,42,.5), rgba(201,152,42,.06)) }
.pop-logo{ box-shadow: 0 2px 10px rgba(0,0,0,.45) }

/* a question opening is movement on screen, not an entrance, so it gets the
   in-out curve */
.faq-item{ background: rgba(12,32,56,.4) }
.faq-item[open]{ border-color: rgba(201,152,42,.4) }
.faq-item summary{ color:var(--t1) }
.faq-item .ans{ color:var(--t2) }
.faq-item .plus::before, .faq-item .plus::after{ background:#e8b84b }

/* ══ footer ═══════════════════════════════════════════════════════════════ */
.footer{ border-top:1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(5,17,31,.9)) }
.footer a{ color:var(--t2); transition: color 160ms ease }
@media (hover:hover) and (pointer:fine){ .footer a:hover{ color:#e8b84b } }
.footer h4, .footer-col h4{ color:var(--t3) }
.footer-brand p{ color:var(--t2) }
.footer-news input{ background: rgba(228,223,208,.06); border:1px solid var(--line); color:var(--t1) }
.footer-news input::placeholder{ color:var(--t3) }
.footer-bottom{ color:var(--t3); border-top-color:var(--line) }
.footer-social a{ border:1px solid var(--line); background: rgba(228,223,208,.04) }

::-webkit-scrollbar-thumb{ background: rgba(228,223,208,.18) }
::-webkit-scrollbar-thumb:hover{ background: rgba(228,223,208,.3) }

/* ══ reduced motion ═══════════════════════════════════════════════════════
   Not "no animation" — the opacity changes still help you follow the page.
   What goes is everything that moves. */
@media (prefers-reduced-motion: reduce){
  .hero-copy > *, .hero-dash{ opacity:1; animation:none }
  .hero::before{ animation:none }
  .live-dot{ animation:none }
  .reveal{ transform:none; transition: opacity 200ms ease }
  .btn:active, .btn-primary:active, .btn-ghost:active, .chrome-btn:active{ transform:none }
  .pop-card:hover, .why-card:hover, .cat-card:hover, .test-card:hover,
  .step:hover, .price-card:hover, .btn-primary:hover, .btn-ghost:hover{ transform:none }
}

/* ── the last few things that were drawn for a navy page ─────────────────── */

/* The live-date pill was navy-on-navy by design. On a light page it was the one
   dark rectangle left, floating with nothing around it. */
.mf-datebar-in{
  background:#0e1c2f; border:1px solid rgba(255,255,255,.14); color:#c3d0e0;
}
.mf-datebar-in i{ background: var(--green) }

/* A link inside a paragraph was pale gold — it measured 1.4 against the page,
   so the words were there and could not be read. Gold that carries text has to
   be darker than gold that fills a button. */
.prose a, .lead a, .desc a, p a:not(.btn):not(.chrome-tab):not(.link-arrow){
  color:#e8b84b; font-weight:600;
}
@media (hover:hover) and (pointer:fine){
  .prose a:hover, .lead a:hover, .desc a:hover, p a:not(.btn):hover{ color:#f0cb6a }
}

/* ══ spacing ══════════════════════════════════════════════════════════════
   The hero carried 150px of top padding. That was right when the header was
   transparent and the hero ran underneath it — the padding was clearing the bar.
   The header is solid now and sits above the content, so those 150px were being
   added to the 64px bar and the 37px date strip: 191px of nothing between the
   logo and the first line of the page.

   These values assume a header that takes its own space. They also tighten the
   gap between sections, which at 64px top and 64px bottom was stacking to 128px
   — a whole empty screen on a phone between one block and the next. */
.hero{ padding-top: 44px; padding-bottom: 52px }
.hero-ctas{ margin-top: 30px }
.hero-copy .sub{ margin-top: 18px }
.wrap.stats-band{ margin-top: 26px }

.section{ padding-top: 44px; padding-bottom: 44px }
.section-head{ margin-bottom: 22px }

@media (min-width: 900px){
  .hero{ padding-top: 68px; padding-bottom: 76px }
  .hero-ctas{ margin-top: 34px }
  .section{ padding-top: 64px; padding-bottom: 64px }
  .wrap.stats-band{ margin-top: 36px }
}

/* Cards were drawn with the generous padding a dark page can carry. On a light
   ground the same padding reads as slack, so it comes in a little. */
.pop-card, .why-card, .cat-card, .test-card, .feature, .step{ padding: 20px }
.price-card{ padding: 26px 22px }
@media (min-width: 900px){
  .pop-card, .why-card, .cat-card, .test-card, .feature, .step{ padding: 24px }
  .price-card{ padding: 30px 26px }
}

/* the footer had the same double gap between its own blocks */
.footer{ padding-top: 52px; padding-bottom: 32px; margin-top: 56px }
.footer-top{ gap: 32px }
@media (min-width: 900px){
  .footer{ padding-top: 64px; margin-top: 72px }
  .footer-top{ gap: 40px }
}

/* ══════════════════════════════════════════════════════════════════════════
   ADDED: the wider page, and the sections that were not here before
   ────────────────────────────────────────────────────────────────────────── */

/* The page sat in a 1240px column, which on a normal desktop left roughly a
   third of the screen empty down both sides. Wider column, and a gutter that
   stops growing once there is enough of it. Prose keeps its own 820px cap, so
   paragraphs stay readable — only the grids get the extra room. */
:root{
  --maxw: 1440px;
  --gutter: clamp(18px, 3vw, 40px);
}

/* ── fund houses ───────────────────────────────────────────────────────── */
.amc-grid{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(228px, 1fr));
}
.amc-chip{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 15px; border-radius:12px;
  background:var(--glass-bg); border:1px solid var(--line);
  color:var(--t1); text-decoration:none; font-size:14px; line-height:1.3;
  transition:border-color .18s var(--out), transform .18s var(--out), background .18s var(--out);
}
.amc-chip .an{ font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.amc-chip .ac{
  flex:none; font-family:var(--mono,ui-monospace,monospace); font-size:11.5px;
  color:var(--a2); background:rgba(201,152,42,.11); border:1px solid var(--line-strong);
  border-radius:999px; padding:2px 8px;
}
@media (hover:hover) and (pointer:fine){
  .amc-chip:hover{ border-color:var(--line-strong); transform:translateY(-2px); background:rgba(12,32,56,.8) }
}
.amc-chip:active{ transform:scale(.98) }

.grid-more{ margin-top:18px; text-align:center }
.grid-more a{ color:var(--a2); font-size:14.5px; font-weight:500; text-decoration:none }
.grid-more a:hover{ text-decoration:underline }

/* ── Direct vs Regular ─────────────────────────────────────────────────── */
.dvr-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)) }
.dvr-card{ padding:26px 26px 24px; border-radius:16px; border:1px solid var(--line); position:relative }
.dvr-card h3{ font-family:var(--display,inherit); font-size:19px; margin:14px 0 10px; color:var(--t1); letter-spacing:-.01em }
.dvr-card p{ color:var(--t2); font-size:15px; line-height:1.62; margin:0 }
.dvr-card ul{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:9px }
.dvr-card li{ color:var(--t2); font-size:14px; padding-left:20px; position:relative; line-height:1.5 }
.dvr-card li::before{ content:"—"; position:absolute; left:0; color:var(--a); opacity:.8 }
.dvr-tag{
  display:inline-block; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  font-weight:600; padding:4px 10px; border-radius:999px;
  color:var(--t2); background:rgba(228,223,208,.06); border:1px solid var(--line);
}
.dvr-tag.good{ color:#0c2038; background:linear-gradient(135deg,#e8b84b,#c9982a); border-color:transparent }

.dvr-note{
  margin-top:18px; padding:26px 28px; border-radius:16px;
  background:var(--glass-bg); border:1px solid var(--line-strong);
}
.dvr-note h3{ font-family:var(--display,inherit); font-size:18px; margin:0 0 10px; color:var(--t1) }
.dvr-note p{ color:var(--t2); font-size:15px; line-height:1.62; margin:0 }
.dvr-math{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); margin:18px 0 }
.dm{
  display:flex; flex-direction:column; gap:5px; padding:14px 16px; border-radius:12px;
  background:rgba(228,223,208,.035); border:1px solid var(--line);
}
.dm .dk{ font-size:12.5px; color:var(--t3); letter-spacing:.01em }
.dm .dv{ font-family:var(--mono,ui-monospace,monospace); font-size:21px; color:var(--t1); font-weight:600 }
.dm.hi{ border-color:var(--line-strong); background:rgba(201,152,42,.08) }
.dm.hi .dv{ color:var(--a2) }
.dvr-note .fine{ font-size:13px; color:var(--t3); line-height:1.6 }

/* ── the four-step data flow ───────────────────────────────────────────── */
.flow-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  counter-reset:none;
}
.flow-step{
  position:relative; padding:24px 22px 22px; border-radius:16px;
  background:var(--glass-bg); border:1px solid var(--line);
}
.flow-step .fs-n{
  display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  font-family:var(--mono,ui-monospace,monospace); font-size:14px; font-weight:600;
  color:#0c2038; background:linear-gradient(135deg,#e8b84b,#c9982a);
}
.flow-step h3{ font-family:var(--display,inherit); font-size:17px; margin:14px 0 9px; color:var(--t1) }
.flow-step p{ color:var(--t2); font-size:14.5px; line-height:1.6; margin:0 }
/* the line joining one step to the next, on wide screens only */
@media (min-width:1040px){
  .flow-step::after{
    content:""; position:absolute; top:41px; right:-16px; width:16px; height:1px;
    background:linear-gradient(90deg,var(--line-strong),transparent);
  }
  .flow-step:last-child::after{ display:none }
}

/* ── glossary ──────────────────────────────────────────────────────────── */
.gloss-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(272px,1fr)) }
.gloss{
  padding:20px 20px 18px; border-radius:14px;
  background:rgba(228,223,208,.028); border:1px solid var(--line);
  transition:border-color .18s var(--out);
}
.gloss h3{
  font-family:var(--mono,ui-monospace,monospace); font-size:13px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--a2); margin:0 0 9px;
}
.gloss p{ color:var(--t2); font-size:14.5px; line-height:1.62; margin:0 }
@media (hover:hover) and (pointer:fine){ .gloss:hover{ border-color:var(--line-strong) } }

/* ── plans ─────────────────────────────────────────────────────────────── */
.price-grid-3{ grid-template-columns:repeat(auto-fit, minmax(290px,1fr)) }

.plan-table-wrap{ margin-top:26px; overflow-x:auto; border-radius:16px; border:1px solid var(--line) }
.plan-table{ width:100%; border-collapse:collapse; min-width:620px; background:var(--glass-bg) }
.plan-table caption{
  caption-side:top; text-align:left; padding:18px 22px 14px;
  font-family:var(--display,inherit); font-size:17px; color:var(--t1); letter-spacing:-.01em;
}
.plan-table th, .plan-table td{
  padding:13px 18px; font-size:14.5px; text-align:center;
  border-top:1px solid var(--line);
}
.plan-table thead th{
  font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--t3);
  font-weight:600; background:rgba(228,223,208,.035);
}
.plan-table thead th:first-child, .plan-table tbody th{ text-align:left }
.plan-table tbody th{ color:var(--t1); font-weight:500 }
.plan-table td{ color:var(--t2) }
.plan-table td.y{ color:var(--a2); font-weight:600 }
.plan-table td.n{ color:var(--t3) }
.plan-table tbody tr:nth-child(odd) td, .plan-table tbody tr:nth-child(odd) th{ background:rgba(228,223,208,.018) }

.plan-notes{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); margin-top:22px }
.pn{ padding:20px 22px; border-radius:14px; background:rgba(228,223,208,.028); border:1px solid var(--line) }
.pn h3{ font-family:var(--display,inherit); font-size:16px; margin:0 0 9px; color:var(--t1) }
.pn p{ color:var(--t2); font-size:14.5px; line-height:1.62; margin:0 }
.pn a{ color:var(--a2) }

@media (prefers-reduced-motion: reduce){
  .amc-chip, .gloss{ transition:none }
  .amc-chip:hover{ transform:none }
}


/* ── the decorative orbs were pushing the page sideways ──────────────────
   .bg-fx is fixed, but its absolutely-positioned children reached past the
   right edge and gave the document 62px of horizontal scroll. Clipping the
   layer costs nothing: it is three blurred circles behind everything. */
.bg-fx{ overflow:hidden }

/* ── the contents rail beside the long read ─────────────────────────────── */
.toc-rail{ display:none }
@media (min-width:1140px){
  #learn{ display:grid; grid-template-columns:minmax(0,1fr) 296px; gap:56px; align-items:start }
  #learn > .prose{ max-width:860px; min-width:0 }
  .toc-rail{ display:flex; flex-direction:column; gap:14px; position:sticky; top:92px }
}
.toc-box{
  padding:20px 20px 18px; border-radius:14px;
  background:var(--glass-bg); border:1px solid var(--line);
}
.toc-box h4{
  margin:0 0 12px; font-family:var(--mono,ui-monospace,monospace);
  font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--t3); font-weight:600;
}
.toc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px }
.toc-list a{
  display:block; padding:6px 10px; border-radius:8px; text-decoration:none;
  font-size:13.5px; line-height:1.45; color:var(--t2);
  border-left:2px solid transparent;
  transition:color .16s var(--out), background .16s var(--out), border-color .16s var(--out);
}
@media (hover:hover) and (pointer:fine){
  .toc-list a:hover{ color:var(--t1); background:rgba(228,223,208,.05) }
}
.toc-list a.here{ color:var(--a2); border-left-color:var(--a); background:rgba(201,152,42,.08) }
.toc-jump .toc-list a{ color:var(--t2) }
@media (prefers-reduced-motion: reduce){ .toc-list a{ transition:none } }

/* The hero's glow effects paint a few dozen pixels past the right edge, which
   was enough to give the whole page a horizontal scrollbar. overflow-x:clip
   stops the scroll without making <html> a scroll container, so the sticky
   header and the contents rail keep working; overflow-x:hidden would have
   broken both. */
html{ overflow-x:clip }


/* ── three plans, one line ───────────────────────────────────────────────
   .price-grid is capped at 880px and split into two columns, which was right
   when there were two plans and left the third sitting alone on a second row,
   each card 430px wide and looking oversized. Three equal columns, a wider
   cap, and slightly tighter cards so all three read as one row. */
.price-grid-3{
  grid-template-columns:repeat(3, minmax(0,1fr));
  max-width:1140px;
  gap:18px;
}
.price-grid-3 .price-card{ padding:26px 24px 24px }
.price-grid-3 .price-card .plan{ font-size:18px }
.price-grid-3 .price-card .amt{ font-size:32px; margin:12px 0 4px }
.price-grid-3 .price-card .amt small{ font-size:13.5px }
.price-grid-3 .price-card .desc{ font-size:14px }
.price-grid-3 .price-feats li{ font-size:13.5px }
.price-grid-3 .price-badge{ top:18px; right:18px; font-size:10px; padding:3px 8px }

/* two across on a tablet, one on a phone */
@media (max-width:1040px){
  .price-grid-3{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:760px }
}
@media (max-width:680px){
  .price-grid-3{ grid-template-columns:1fr; max-width:420px }
}

/* ══ Browse by category / by fund house — compact ══════════════════════════
   These two sit at the top of the page now, ahead of the feature list, and
   the point of them is to be stepped over quickly on the way into a category.
   At full size the pair ran to about 1,400px and pushed everything else below
   two screens. Everything here is scoped to those two sections, so the rest of
   the page keeps the spacing it was designed with. */
#categories.section, #fund-houses.section{ padding-top:30px; padding-bottom:30px }
#categories .section-head, #fund-houses .section-head{ margin-bottom:14px }
#categories .section-head p, #fund-houses .section-head p{
  font-size:14px; line-height:1.5; max-width:62ch;
}
#categories .section-head h2, #fund-houses .section-head h2{ margin-bottom:4px }

/* More per row, and each one shorter. A category card carries a name and a
   count — it never needed the height of a feature card. */
#categories .cat-grid{
  gap:8px;
  grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
}
#categories .cat-card{ padding:11px 13px; border-radius:10px }
#categories .cat-card .nm{ font-size:14px; line-height:1.3 }
#categories .cat-card .meta{ margin-top:5px; font-size:11.5px }

#fund-houses .amc-grid{
  gap:7px;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
}
#fund-houses .amc-chip{ padding:8px 11px; border-radius:9px; font-size:13px }
#fund-houses .amc-chip .ac{ font-size:10.5px; padding:1px 6px }

#categories .grid-more{ margin-top:12px }

@media (min-width: 900px){
  #categories.section, #fund-houses.section{ padding-top:38px; padding-bottom:38px }
  #categories .cat-card{ padding:12px 14px }
}

/* ══ coverage strip — compact ══════════════════════════════════════════════
   Six figures where there were four, and the boxes come in so the row fills
   its width instead of leaving air between four wide cells. Sized so it reads
   as one strip of facts rather than six cards. */
.stats-strip{
  display:grid; gap:1px;
  grid-template-columns:repeat(6, 1fr);
  padding:0; overflow:hidden;
}
.stats-strip .stat{
  padding:14px 12px; text-align:center; min-width:0;
  background:rgba(12,32,56,.35);
}
.stats-strip .stat .num{
  font-size:clamp(18px, 2.1vw, 25px); line-height:1.1;
  letter-spacing:-.02em; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.stats-strip .stat .lbl{
  font-size:11px; margin-top:5px; line-height:1.3;
  letter-spacing:.04em; text-transform:uppercase; opacity:.78;
}
@media (max-width: 900px){
  .stats-strip{ grid-template-columns:repeat(3, 1fr) }
}
@media (max-width: 520px){
  .stats-strip{ grid-template-columns:repeat(2, 1fr) }
  .stats-strip .stat{ padding:12px 9px }
  .stats-strip .stat .lbl{ font-size:10px }
}

/* ══ hero facts card ═══════════════════════════════════════════════════════
   The card used to hold a chart drawn from random numbers. It holds figures
   from the filings now, so it is typography rather than a drawing. */
.fact-hero{
  padding:16px 2px 14px; border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:4px;
}
.fact-big{
  font-family:var(--display, inherit);
  font-size:clamp(28px, 4vw, 38px); line-height:1.02;
  letter-spacing:-.02em; color:var(--t1);
  font-variant-numeric:tabular-nums;
}
.fact-sub{
  margin-top:7px; font-size:13px; line-height:1.5; color:var(--t2); max-width:44ch;
}
/* The rows carry two lines of label now, so they need room the single-line
   version did not. */
.dash-card .fund-row{ align-items:flex-start; padding:11px 2px }
.dash-card .fund-row .fund-name{ line-height:1.35; padding-right:12px }
.dash-card .fund-row .fund-name small{
  display:block; margin-top:3px; font-size:11.5px; line-height:1.45;
  color:var(--t3, var(--t2)); opacity:.82; font-weight:400;
}
.dash-card .fund-row .fund-cagr{
  flex:none; font-variant-numeric:tabular-nums; white-space:nowrap;
  font-size:15px; align-self:center;
}

/* ══ hero: four small pictures of the filings ══════════════════════════════
   Marks are thin, gaps are real gaps, and every series is labelled as well as
   coloured — colour alone never carries identity. */
.viz-grid{ display:grid; gap:14px; grid-template-columns:1fr 1fr; margin-top:14px }
.viz{ margin:0; min-width:0 }
.viz.span2{ grid-column:1 / -1 }
.viz figcaption{
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--t2); opacity:.8; margin-bottom:9px; font-weight:600;
}

/* donut */
.viz-donut svg{ width:100%; max-width:118px; height:auto; display:block; margin:0 auto }
.viz-mid{ fill:var(--t1); font-size:22px; font-weight:700; font-variant-numeric:tabular-nums }
.viz-mids{ fill:var(--t2); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase }

/* one stacked bar */
.viz-stack{
  display:flex; gap:2px; height:15px; border-radius:4px; overflow:hidden; margin:22px 0 0;
}
.viz-stack span{ display:block; height:100%; border-radius:2px }

/* keys */
.viz-key{ list-style:none; margin:11px 0 0; padding:0; display:grid; gap:4px }
.viz-key.wide{ grid-template-columns:1fr 1fr; gap:4px 10px }
.viz-key li{
  display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--t2);
  min-width:0;
}
.viz-key li i{ width:8px; height:8px; border-radius:2px; flex:none }
.viz-key li b{
  margin-left:auto; color:var(--t1); font-weight:600;
  font-variant-numeric:tabular-nums; flex:none;
}

/* side bars */
.viz-bars{ display:grid; gap:7px }
.viz-bar{ display:grid; grid-template-columns:minmax(0,1fr) 84px auto; gap:9px; align-items:center }
.viz-bar .bl{
  font-size:11.5px; color:var(--t2); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.viz-bar .bt{ height:7px; background:rgba(255,255,255,.07); border-radius:4px; overflow:hidden }
.viz-bar .bt i{ display:block; height:100%; border-radius:4px }
.viz-bar .bv{
  font-size:11.5px; color:var(--t1); font-weight:600;
  font-variant-numeric:tabular-nums;
}
.viz-note{ margin:10px 0 0; font-size:11px; color:var(--t2); opacity:.72 }

@media (max-width: 520px){
  .viz-grid{ grid-template-columns:1fr }
  .viz-key.wide{ grid-template-columns:1fr }
}

/* ══ hero: nearer the header, and wider so it is shorter ═══════════════════
   The section opened 68px below the header and gave the card a 0.95fr column,
   which made a tall narrow panel with the four pictures stacked two deep.
   More width for the card means the same content in fewer rows. */
.hero{ padding-top:22px; padding-bottom:40px }
@media (min-width: 900px){
  .hero{ padding-top:30px; padding-bottom:48px }
  /* the card takes the larger share now, not the smaller one */
  .hero-grid{ grid-template-columns:0.92fr 1.08fr; gap:42px }
}
@media (min-width: 1200px){
  .hero-grid{ grid-template-columns:0.86fr 1.14fr; gap:48px }
}

/* With the extra width the donut and the concentration bar sit beside each
   other comfortably, and the sector bars run the full width underneath —
   three rows become two. */
@media (min-width: 900px){
  .viz-grid{ grid-template-columns:0.9fr 1.1fr; gap:16px 20px }
  .viz-donut svg{ max-width:104px }
  .viz-bar{ grid-template-columns:minmax(0,1fr) 120px auto }
}

/* The eyebrow above the headline was carrying the old top spacing too. */
.hero .eyebrow{ margin-top:0 }

/* ══ feature list and the card grids under it — tightened ══════════════════
   The feature section alone ran to 3,534px: four blocks of 634–873px each,
   separated by up to 110px of air, on a screen 768px tall. That is four and a
   half screens of scrolling to read four points. Nothing is removed here —
   the type comes down a step, the padding comes in, and the gaps between
   blocks stop being larger than the blocks' own padding. */

.feature{
  gap:clamp(22px, 3vw, 46px);
  margin-bottom:clamp(26px, 3.4vw, 52px);
  padding:14px;
  align-items:center;
}
@media (min-width: 900px){
  .feature{ padding:16px }
}
.feat-icon{
  width:40px; height:40px; border-radius:11px; margin-bottom:14px;
}
.feat-icon svg{ width:20px; height:20px }
.feature-text h3{ font-size:clamp(20px, 2.2vw, 27px); line-height:1.16 }
.feature-text p{ font-size:15px; line-height:1.6; margin:11px 0 15px; max-width:46ch }
.feat-tags{ gap:6px; margin-bottom:16px }
.feat-tags .tag{ font-size:11px; padding:4px 9px; border-radius:7px }
.mock{ padding:13px }

/* the two card grids below it */
.why-grid{ gap:12px }
.why-card{ padding:16px 17px }
.why-card h3{ font-size:16px; margin-top:8px }
.why-card p{ font-size:14px; line-height:1.55; margin-top:6px }
.why-emoji{ font-size:20px; line-height:1 }

/* the sections' own top and bottom */
#features.section{ padding-top:34px; padding-bottom:34px }
@media (min-width: 900px){
  #features.section{ padding-top:44px; padding-bottom:44px }
}

/* ══ the product mock-ups inside the feature blocks ════════════════════════
   These panels, not the words beside them, were setting each block's height —
   265, 339, 471 and 253px against about 240px of text. They are illustrations
   of a screen, so they can be read at a smaller size without losing what they
   are showing. */
.mock-bar{ padding:6px 9px; margin:-4px -4px 10px }
.mock-bar .url{ font-size:10px }
.mock-bar .d{ width:7px; height:7px }

/* compare panel */
.cmp-head, .cmp-row{ padding:6px 8px; font-size:11.5px }
.cmp-head{ font-size:10px; letter-spacing:.06em }
.cmp-row .swatch{ width:7px; height:7px }

/* category bars panel */
.rank-cat{ gap:5px; margin-bottom:9px }
.rank-cat .c{ font-size:10.5px; padding:3px 8px }
.bar-row{ gap:8px; padding:4px 0; font-size:11.5px }
.bar-row .bar-track{ height:6px }

/* the fund-detail panel — the tallest of the four */
.det-tabs{ gap:5px; margin-bottom:9px }
.det-tabs .t{ font-size:10.5px; padding:3px 8px }
.det-stats{ gap:8px }
.det-stat{ padding:9px 10px }
.det-stat .k{ font-size:9.5px; letter-spacing:.06em }
.det-stat .v{ font-size:15px; margin-top:3px }
.heat{ gap:2px }
.heat .cell{ border-radius:2px }

/* whatever the fourth panel is built from, the same idea */
.mock .glass, .mock .row{ padding:8px 10px }

/* The calendar-style grid in the fund-detail mock had 72px-tall cells — 36 of
   them, 219px of the panel's height, to show a pattern that reads perfectly
   well at a third of that. */
.heat .cell{ height:20px; min-height:0 }
.heat{ gap:3px }

/* The social icons are marked hidden until there are accounts to point them
   at. The attribute alone does not win here — the footer sets display on them,
   and a plain [hidden] loses to any display rule. */
footer a[hidden]{ display:none !important }