/* Forside (/) — split hero with a blue stage that bleeds off the right edge,
   an annotated alert, a typographic route index, the #gratis-fund lanes and
   a full-bleed blue closer. Uses tokens and components from site.css. */

/* Hero ------------------------------------------------------------------ */
.hero{position:relative;overflow:hidden;padding-top:clamp(1rem,.2rem + 3.4vw,3.5rem)}
.hero__grid{display:grid;gap:var(--space-l)}
.hero__title{font-size:clamp(3rem,1.4rem + 4.6vw,5.5rem);line-height:.96;letter-spacing:-.055em}
.hero__title span{display:block}
.hero__title em{font-style:normal;color:var(--blue)}
.hero__copy .lede{margin-top:var(--space-m)}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-s) var(--space-l);margin-top:var(--space-l)}
.hero__copy .fine{margin-top:var(--space-xs)}
.hero__spec{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin:var(--space-m) 0 0;padding:var(--space-s) 0 0;border-top:1px solid var(--line);font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
.hero__spec li{display:flex;align-items:center;gap:.5rem}
@media (max-width:479px){.hero__spec{gap:.4rem .85rem;font-size:.875rem}.hero__spec li{gap:.4rem}}
.hero__spec li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}

.hero__stage{position:relative;isolation:isolate;margin-inline:calc(var(--gutter) * -1);padding:var(--space-l) var(--gutter) var(--space-l)}
.hero__slab{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--blue)}
.hero__slab .loop-deco{--loop-size:620px;--loop-color:rgba(255,254,250,.08);right:-230px;bottom:-110px}
.hero__mock{max-width:540px;margin-inline:auto}
/* The typical-price field is a full-width row in Discord (inline: false) */
.dc-embed__fields .dc-field--wide{grid-column:1/-1}
/* Discord's small grey subtext line ("-# …"): what the typical price rests on */
.dc-subtext{display:block;margin-top:.15rem;font-size:.75rem;line-height:1.35}
.hero__mock .mock-note{color:var(--blue-pale)}
/* Phones: one alert, not two, so the next section is a short scroll away */
@media (max-width:599px){
  .hero__stage{padding-block:var(--space-m)}
  .hero__mock .dc-msg:first-child,.hero__mock .dc-divider{display:none}
  .hero__mock .dc-embed__image{max-height:180px}
  .hero__mock .dc-embed__image img{height:180px;object-fit:cover}
}

@media (min-width:1000px){
  .hero{padding-bottom:0}
  .hero__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:stretch}
  .hero__copy{grid-column:1/span 6;align-self:start;padding-block:var(--space-xl) var(--space-l)}
  .hero__stage{grid-column:7/-1;display:grid;align-content:center;margin:0 calc(-1 * (var(--gutter) + max(0px,(100vw - var(--wrap)) / 2))) 0 0;padding:var(--space-xl) var(--gutter) var(--space-xl) 0}
  .hero__mock .dc-embed__image{max-height:210px}
  .hero__mock .dc-embed__image img{height:210px;object-fit:cover}
  .hero__slab{left:var(--space-2xl);border-radius:var(--r-xl) 0 0 var(--r-xl)}
  .hero__mock{margin:0;max-width:600px}
  .hero__mock .mock-note{padding-left:calc(var(--space-2xl) + var(--space-s))}
}
@media (min-width:1100px){.hero__mock{max-width:640px}}

/* Anatomy: one alert with numbered parts -------------------------------- */
.anatomy__grid{display:grid;gap:var(--space-xl)}
.anatomy__intro h2{max-width:13em}
.anatomy__mock .dc{max-width:520px}
.anatomy__mock .dc__feed{padding:var(--space-m) var(--space-s)}
.anatomy__mock .dc-embed__title .anno,.anatomy__mock .dc-embed__desc .anno,.anatomy__mock dt .anno{margin-left:.4rem}
.anatomy__mock .dc-embed__image .anno{position:absolute;left:.6rem;top:.6rem}
.anatomy__after{padding:var(--space-m);border-radius:var(--r-l);background:var(--paper)}
.anatomy__after p+p{margin-top:var(--space-2xs)}
@media (min-width:960px){
  .anatomy__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);row-gap:var(--space-xl);align-items:start}
  .anatomy__intro{grid-column:1/span 9}
  .anatomy__mock{grid-column:1/span 6;grid-row:2/span 2}
  .anno-list{grid-column:8/span 5;grid-row:2}
  .anatomy__after{grid-column:8/span 5;grid-row:3}
}

/* Route index: three big typographic rows ------------------------------- */
.routes__title{font-size:var(--fs-h3);margin-bottom:var(--space-m)}
.routes__list{border-top:2px solid var(--ink)}
.route{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem var(--space-m);align-items:center;padding-block:var(--space-l);border-bottom:1px solid var(--line-strong);color:var(--ink);text-decoration:none}
.route__fig{grid-column:1;font-size:clamp(2.5rem,1.7rem + 3vw,4.75rem);font-weight:700;line-height:.95;letter-spacing:-.05em;color:var(--blue)}
.route__fig small{font-size:.42em;font-weight:700;letter-spacing:-.02em}
.route__body{grid-column:1}
.route__title{display:block;font-size:var(--fs-h3);font-weight:700;line-height:1.15;letter-spacing:-.03em}
.route__text{display:block;max-width:36em;margin-top:.3rem;color:var(--muted)}
.route__arrow{grid-column:2;grid-row:1/span 2;font-size:1.75rem;line-height:1;transition:transform .25s var(--ease)}
.route:hover .route__title{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.route:hover .route__arrow{transform:translateX(6px)}
.route:focus-visible{outline-offset:-3px}
@media (min-width:800px){
  .route{grid-template-columns:minmax(0,3fr) minmax(0,7fr) auto;column-gap:var(--grid-gap)}
  .route__fig{grid-column:1}
  .route__body{grid-column:2;grid-row:1}
  .route__arrow{grid-column:3;grid-row:1}
}

/* #gratis-fund teaser with two time lanes ------------------------------- */
.teaser{border-radius:var(--r-xl);padding:var(--space-l) var(--space-m)}
.teaser__grid{display:grid;gap:var(--space-xl)}
.teaser h2{font-size:clamp(1.75rem,1.3rem + 2vw,2.75rem)}
.teaser h2 .channel{font-size:.86em;letter-spacing:-.04em}
.teaser__copy p{margin-top:var(--space-s);max-width:30em}
.teaser__copy .btn{margin-top:var(--space-l)}
.lanes{padding:var(--space-m) var(--space-s) var(--space-s);border-radius:var(--r-l);background:var(--cream)}
.lanes__row{display:grid;grid-template-columns:6.25rem minmax(0,1fr);gap:var(--space-xs);align-items:center;padding-block:.9rem;border-bottom:1px dashed var(--line)}
.lanes__label{font-size:var(--fs-xs);line-height:1.3;color:var(--muted)}
.lanes__label strong{display:block;color:var(--ink);font-weight:600}
.lanes__track{position:relative;height:30px;list-style:none;margin:0 8px;padding:0}
.lanes__track::before{content:"";position:absolute;left:-8px;right:-8px;top:50%;border-top:2px solid var(--line)}
.lanes__dot{position:absolute;top:50%;left:calc(var(--t) * 1%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--blue)}
.lanes__dot--shared{box-shadow:0 0 0 3px var(--cream),0 0 0 5px var(--mint)}
.lanes__dot--free{width:16px;height:16px;margin:-8px 0 0 -8px;background:var(--mint);box-shadow:inset 0 0 0 2px var(--ink)}
.lanes__lag{position:absolute;top:-1.15rem;left:calc(var(--t) * 1%);transform:translateX(-50%);font-family:var(--font-mono);font-size:.6875rem;color:var(--ink);white-space:nowrap}
.lanes__axis{display:flex;justify-content:space-between;margin:.6rem 0 0 calc(6.25rem + var(--space-xs));font-family:var(--font-mono);font-size:.6875rem;color:var(--muted)}
.lanes figcaption{margin-top:var(--space-s);font-size:var(--fs-xs);color:var(--muted)}
@media (max-width:559px){
  .lanes__row{grid-template-columns:minmax(0,1fr);gap:.35rem}
  .lanes__label strong{display:inline;margin-right:.4em}
  .lanes__row+.lanes__row .lanes__track{margin-top:1rem}
  .lanes__axis{margin-left:0}
  .lanes__axis span:nth-child(even){visibility:hidden}
}
@media (min-width:800px){
  .teaser{padding:var(--space-2xl) var(--space-xl)}
  .teaser__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:var(--space-2xl);align-items:center}
  .lanes{padding:var(--space-l) var(--space-m) var(--space-m)}
  .lanes__row{grid-template-columns:7.5rem minmax(0,1fr)}
  .lanes__axis{margin-left:calc(7.5rem + var(--space-xs))}
}

/* Closer ---------------------------------------------------------------- */
.closer{position:relative;overflow:hidden;isolation:isolate;padding-block:var(--section)}
.closer .loop-deco{--loop-size:min(980px,150vw);--loop-color:rgba(255,254,250,.07);right:-22%;bottom:-40%;z-index:-1}
.closer h2{font-size:var(--fs-h1);max-width:11em}
.closer__text{max-width:32em;margin-top:var(--space-m);font-size:var(--fs-lead);line-height:1.5}
.closer .cluster{--cluster:var(--space-s) var(--space-l);margin-top:var(--space-xl)}
.closer .fine{margin-top:var(--space-s)}