/* Mindsheep Labs, labs-v2. Theme tokens and the page's own markup.
   The engine (scrollcraft.css / .js) is never edited. */

:root {
  --sc-canvas:      #0B0D12;
  --sc-surface:     #12151C;
  --sc-ink:         #EEF1F5;
  --sc-ink-soft:    #9AA3B2;
  --sc-accent:      #06B6D4;
  --sc-accent-ink:  #06121A;
  --sc-font-display: "Outfit", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist", system-ui, sans-serif;
  --sc-shadow-color: 222 40% 3%;
  --sc-leading-body: 1.66;
}
.sc-display { font-weight: 600; }
.sc-body, .sc-lede { letter-spacing: 0.002em; }
.sc-label { font-weight: 500; letter-spacing: 0.12em; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --------------------------------------------------------------- paper --
   The inverted ground. Used by the homepage close and the story-page ends. */
.paper {
  --sc-canvas: #F3F1EC; --sc-surface: #FFFFFF;
  --sc-ink: #14161B; --sc-ink-soft: #5B6270;
  --sc-accent: #0E7490; --sc-accent-ink: #F3F1EC;
  background: var(--sc-canvas); color: var(--sc-ink);
}

/* ---------------------------------------------------------------- links --
   One link style on the whole site: ink, cyan underline. */
a.u { color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--sc-accent); text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; transition: color 140ms var(--sc-ease-out); }
a.u:hover { color: var(--sc-accent); }
.btn { display: inline-block; appearance: none; border: 1px solid transparent; border-radius: var(--sc-r-sm); padding: 0.8rem 1.3rem; min-height: 44px; font-weight: 500; font-family: var(--sc-font-text); font-size: var(--sc-t-base); line-height: 1.2; cursor: pointer; text-decoration: none; transition: transform var(--sc-d-fast) var(--sc-ease-out), background var(--sc-d-fast) var(--sc-ease-out), opacity var(--sc-d-fast) var(--sc-ease-out); }
.btn:active { transform: translateY(1px); }
.btn--accent { background: var(--sc-accent); color: var(--sc-accent-ink); }
.btn--accent:hover { background: color-mix(in oklab, var(--sc-accent) 88%, white); }
.btn--ghost { background: transparent; color: var(--sc-ink); border-color: var(--sc-hairline-strong); }
.btn--ghost:hover { background: color-mix(in oklab, var(--sc-ink) 8%, transparent); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* --------------------------------------------------------------- layout -- */
.plate { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.measure { max-width: var(--sc-measure); }

/* =================================================================== HOME == */

/* ---------------------------------------------------------------- hero ---
   Typographic poster: the sentence is the imagery. Four elements, no more. */
.hero { min-height: 100svh; display: flex; align-items: flex-end; padding-block: var(--sc-8) var(--sc-9); }
.hero__mark { height: 38px; width: auto; margin-bottom: var(--sc-9); display: block; }
.hero h1 { margin: 0; font-family: var(--sc-font-display); font-weight: 600; line-height: var(--sc-leading-none); letter-spacing: var(--sc-track-tight); text-wrap: balance; }
.hero h1 .l1 { display: block; font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); color: var(--sc-ink); margin-bottom: 0.18em; max-width: 22ch; }
.hero h1 .l2 { display: block; font-size: clamp(3.2rem, 1.4rem + 8vw, 8.6rem); max-width: 10ch; }
.hero__sub { margin: var(--sc-6) 0 0; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink-soft); max-width: 40ch; }
.hero__cta { margin-top: var(--sc-7); display: flex; align-items: center; gap: var(--sc-6); flex-wrap: wrap; }
@media (max-width: 700px) {
  .hero { padding-block: var(--sc-6) var(--sc-8); }
  .hero__mark { height: 30px; margin-bottom: var(--sc-8); }
  .hero__sub { font-size: var(--sc-t-base); }
}

/* ------------------------------------------------------------- five ways --
   A ledger, not cards. Each row is one link. */
.ways { padding-block: var(--sc-section); background: color-mix(in oklab, #0D1017 40%, transparent); }
.ways h2 { margin: 0 0 var(--sc-7); }
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline-strong); }
.ledger li { border-bottom: 1px solid var(--sc-hairline); }
.ledger a { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: var(--sc-5); align-items: baseline; padding: var(--sc-5) 0; color: inherit; text-decoration: none; transition: padding-left 180ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .ledger a:hover { padding-left: var(--sc-3); } .ledger a:hover .ledger__go { color: var(--sc-accent); } }
.ledger__n { font-family: var(--sc-font-display); font-weight: 500; color: var(--sc-accent); font-size: var(--sc-t-sm); font-variant-numeric: tabular-nums; padding-top: 0.5em; }
.ledger__body { display: block; }
.ledger__t { display: block; margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); line-height: 1.12; text-wrap: balance; }
.ledger__p { display: block; margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); max-width: 52ch; }
.ledger__go { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); white-space: nowrap; transition: color 140ms var(--sc-ease-out); }
@media (max-width: 700px) {
  .ledger a { grid-template-columns: 2.4rem 1fr; }
  .ledger__go { grid-column: 2; }
}

/* --------------------------------------------------------------- the plan --
   The peak. Pinned. Five steps, alternating sides of a spine. The connectors
   are SVG paths measured from the real frames and drawn from --sc-p. */
.plan { background: transparent; }
.plan .sc-stage { display: grid; align-items: center; }
.plan__wrap { display: grid; gap: var(--sc-6); }
.plan__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-5); flex-wrap: wrap; }
.plan__head h2 { margin: 0; }
.plan__head p { margin: 0; color: var(--sc-ink-soft); max-width: 40ch; }
.chart { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--sc-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .chart { grid-template-columns: 1fr 4rem 1fr; column-gap: 0; row-gap: var(--sc-4); } }
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.chart path { --r: clamp(0, (var(--sc-p, 0) - var(--at)) / 0.09, 1); fill: none; stroke: var(--sc-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--r)); transition: none; }
.chart path.head { stroke-dasharray: none; stroke-dashoffset: 0; opacity: clamp(0, (var(--r) - 0.85) / 0.15, 1); }
.chart path.settled { stroke: var(--sc-ink-soft); }
.step { --r: clamp(0, (var(--sc-p, 0) - var(--at)) / 0.09, 1);
  position: relative; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm); padding: var(--sc-3) var(--sc-5);
  background: color-mix(in oklab, var(--sc-canvas) 94%, transparent);
  opacity: calc(0.16 + 0.84 * var(--r)); transform: translate3d(0, calc((1 - var(--r)) * 10px), 0);
  display: grid; grid-template-columns: 2.2rem 1fr; gap: var(--sc-4); align-items: start; }
@media (min-width: 900px) {
  .step:nth-child(odd)  { grid-column: 1; }
  .step:nth-child(even) { grid-column: 3; }
  .step:nth-child(2) { grid-row: 2; } .step:nth-child(3) { grid-row: 3; } .step:nth-child(4) { grid-row: 4; } .step:nth-child(5) { grid-row: 5; }
}
.step.is-on { border-color: var(--sc-accent); box-shadow: var(--sc-e2), var(--sc-edge); }
.step.is-done { border-color: var(--sc-hairline-strong); }
.step__n { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm); color: var(--sc-accent); border: 1px solid currentColor; border-radius: 999px; width: 2rem; height: 2rem; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.step.is-done .step__n { color: var(--sc-ink-soft); }
.step h3 { margin: 0 0 var(--sc-1); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); line-height: 1.15; }
.step p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; max-width: 44ch; }
.step b { color: var(--sc-ink); font-weight: 500; }
.plan__cta { --r: clamp(0, (var(--sc-p, 0) - 0.86) / 0.08, 1); opacity: var(--r); transform: translate3d(0, calc((1 - var(--r)) * 10px), 0); display: flex; gap: var(--sc-5); align-items: center; flex-wrap: wrap; align-self: center; padding: var(--sc-3) 0; }
@media (min-width: 900px) { .plan__cta { grid-column: 3; grid-row: 5; padding-left: var(--sc-6); } }
@media (max-height: 820px) and (min-width: 900px) { .plan__wrap { gap: var(--sc-4); } .step { padding-block: var(--sc-3); } .chart { row-gap: var(--sc-3); } .plan__head p { display: none; } }
/* Phones: only the open step shows its text. Earlier steps keep their title,
   so the whole plan still stands at the end, and the text can be full size. */
@media (max-width: 899px) {
  .plan__head p { display: none; }
  .step { padding: var(--sc-4) var(--sc-4); align-items: start; }
  .step__n { margin-top: 0.1em; }
  .step h3 { font-size: var(--sc-t-lg); margin: 0; }
  .step p { font-size: var(--sc-t-base); line-height: 1.5; }
  .step__body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 240ms var(--sc-ease-out), opacity 200ms var(--sc-ease-out); }
  .step__body > p { overflow: hidden; min-height: 0; }
  .step.is-on .step__body { grid-template-rows: 1fr; opacity: 1; }
  .step.is-on .step__body > p { padding-top: var(--sc-2); }
  .step.is-done { opacity: 0.72; }
}
@media (max-width: 700px) { .plan__head h2 { font-size: var(--sc-t-xl); } .chart { gap: var(--sc-3); } }
@media (prefers-reduced-motion: reduce) and (max-width: 899px) { .step__body { grid-template-rows: 1fr; opacity: 1; transition: none; } }
@media (prefers-reduced-motion: reduce) {
  .step, .plan__cta { --r: 1; transform: none; }
  .chart path { stroke-dashoffset: 0; }
}

/* ---------------------------------------------------------------- close --
   The inversion. Smallest type on the site. CTA as an underlined link. */
.close { min-height: 78svh; display: flex; align-items: center; padding-block: var(--sc-9); }
.close__in { display: grid; gap: var(--sc-5); max-width: 58ch; font-size: var(--sc-t-sm); line-height: 1.7; }
.close__in p { margin: 0; color: var(--sc-ink-soft); }
.close__in .lead { color: var(--sc-ink); font-size: var(--sc-t-lg); line-height: 1.4; }
.close__in .rule { color: var(--sc-ink); }
.close__mark { height: 26px; width: auto; filter: invert(1) brightness(0.12); }
.close__nav { display: flex; gap: var(--sc-4) var(--sc-5); flex-wrap: wrap; font-size: var(--sc-t-xs); padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); }
.close__nav a { color: var(--sc-ink-soft); text-decoration: none; }
.close__nav a:hover { color: var(--sc-ink); }
.close small { display: block; color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }

/* ============================================================ STORY PAGES == */
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-5); padding-block: var(--sc-5); }
.top__mark { height: 28px; width: auto; display: block; }
.top a.u { font-size: var(--sc-t-sm); }
@media (prefers-reduced-motion: reduce) { :root { --g: 1; } }