/* Round 16 (2026-09-02 17:1x) — ONE MATERIAL. Round-15 verdict (design director + CRO): S4 read as four icon columns on cream with
   hairlines that died before the curve; S4–S6 were a cream second world after the ink S1–S3. Now: S4 is ONE drawn run on the ink
   ground — four solid marks at rising weight joined by a 2px run that ends inside the amber compounding curve (the one focal point),
   captions under the marks, no headings-as-cards; founder and closer sit on the same ink as S1–S3. Every element's own motion ≤ .3s
   (Power Design #15); sequences keep their stagger so they still read at human pace. */

/* S4 — the run */
.method { background: var(--ink); background-image: none; color: var(--cream); border-bottom: 1px solid rgba(244, 239, 229, .12); }
.method::before { display: none; }
.method .eyebrow { color: var(--amber); }
.method .section-title { color: var(--cream); }
.method .section-lede { color: rgba(244, 239, 229, .72); }
.method-inner { padding-top: 96px; padding-bottom: 96px; }
.method-head { margin-bottom: 56px; }

.run { position: relative; }
.run-figure { margin: 0; color: var(--cream); }
.run-figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.run-figure .run-phone { display: none; }
/* captions start under each mark's left edge (mark lefts 106 / 404 / 688 / 982 of 1200) */
.run-captions { list-style: none; margin: 28px 0 0; padding: 0 0 0 8.83%; display: grid; grid-template-columns: 24.83% 23.67% 24.5% minmax(0, 1fr); gap: 0 24px; }
.run-captions li { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.run-name { font: 400 21px/1.2 var(--serif); letter-spacing: -.01em; color: var(--cream); }
.run-note { font-size: 16px; line-height: 1.55; color: rgba(244, 239, 229, .7); max-width: 18em; }

/* arrival: figure settles .3s; marks .26s each, .1s apart; the run line draws .3s; the curve draws .3s, its fill lands .3s — each element ≤ .3s, the artefact reads over ~1.2s */
.run-figure { opacity: 0; transform: translateY(8px); transition: opacity .3s ease-out, transform .3s ease-out; }
.run-mark { opacity: 0; transition: opacity .26s ease-out; }
.run-mark.m1 { transition-delay: .1s; }
.run-mark.m2 { transition-delay: .2s; }
.run-mark.m3 { transition-delay: .3s; }
.run-mark.m4 { transition-delay: .4s; }
.run-line, .run-curve { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s ease-out; }
.run-line { transition-delay: .5s; }
.run-curve { transition-delay: .8s; }
.run-curve-fill { opacity: 0; transition: opacity .3s ease .95s; }
.run-captions { opacity: 0; transform: translateY(6px); transition: opacity .3s ease-out .45s, transform .3s ease-out .45s; }
.run.is-in .run-figure, .run.is-in .run-mark, .run.is-in .run-captions { opacity: 1; transform: none; }
.run.is-in .run-line, .run.is-in .run-curve { stroke-dashoffset: 0; }
.run.is-in .run-curve-fill { opacity: .34; }
@media (prefers-reduced-motion: reduce) {
  .run-figure, .run-mark, .run-captions { opacity: 1 !important; transform: none !important; transition: none !important; }
  .run-curve-fill { opacity: .34 !important; transition: none !important; }
  .run-line, .run-curve { stroke-dashoffset: 0 !important; transition: none !important; }
}
@media (max-width: 700px) {
  .run-figure .run-wide { display: none; }
  .run-figure .run-phone { display: block; }
  .run-captions { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 28px; padding: 0; }
  .run-captions li { gap: 6px; }
  .run-name { font-size: 20px; }
  .run-note { max-width: none; }
  .method-inner { padding-top: 72px; padding-bottom: 72px; }
  .method-head { margin-bottom: 40px; }
}

/* S5 — founder on the same ink */
.founder { background: var(--ink-soft); color: var(--cream); border-bottom: 1px solid rgba(244, 239, 229, .12); }
.founder::after { display: none; }
.founder .eyebrow { color: var(--amber); }
.founder .section-title { color: var(--cream); }
.founder-body { color: rgba(244, 239, 229, .78); }
.founder-signoff { color: var(--amber); }
.founder-block { border: 0; }
.founder-photo img { border-color: rgba(244, 239, 229, .22); }
.founder-plate { background: var(--cream); color: var(--ink); }
.podcast-inline { color: var(--cream); border-bottom-color: rgba(244, 239, 229, .35); }
.podcast-inline span:first-child { color: var(--amber); }

/* S6 — closer on the same ink */
.final { background: var(--ink-deep); background-image: none; color: var(--cream); }
.final-route { display: none; }
.final .cta-kicker { color: var(--amber); }
.final h2 { color: var(--cream); }
.final-body { color: rgba(244, 239, 229, .74); }
.email-fallback { color: rgba(244, 239, 229, .6); }
.email-fallback a { color: var(--cream); border-bottom-color: var(--amber); }

/* S3 — each element's own motion ≤ .3s; the beats (before → after → key → note) keep their stagger */
.promise-explainer .seg { transition-duration: .28s; }
.promise-explainer .person { transition-duration: .24s; }
.promise-explainer .explainer-head, .promise-explainer .explainer-key { transition-duration: .3s, .3s; }
.promise-explainer .explainer-note { transition-duration: .3s; }

/* Round 17 (2026-09-02 17:3x) — the run is a labelled RISING line, not icons. Round-16 verdict: the lens/blocks/people
   read as generic process glyphs, the 2px line read as a hairline that stopped before the amber, empty ink above, captions
   doing the drawing's work. Now: three solid discs of rising weight sit ON a climbing 2px line that runs INTO the amber
   compounding curve and ends inside it (drawn on top of the amber stroke); the curve is the one focal point (≥1.5× the
   largest disc); four names only under the marks; section height tight to the figure. */
.method-inner { padding-top: 80px; padding-bottom: 72px; }
.method-head { margin-bottom: 40px; }
.run-figure svg { overflow: visible; }
.run-captions { margin-top: 20px; padding-left: 9.9%; grid-template-columns: 25% 25% 25% minmax(0, 1fr); gap: 0 16px; }
.run-captions .run-name { font: 400 18px/1.25 var(--serif); color: rgba(244, 239, 229, .82); letter-spacing: 0; }
.run-captions li:nth-child(4) .run-name { color: var(--amber); }
.run-captions li:nth-child(1) { transform: translateX(-2.4%); }
@media (max-width: 700px) {
  .method-inner { padding-top: 64px; padding-bottom: 64px; }
  .method-head { margin-bottom: 28px; }
  .run-captions { margin-top: 16px; padding: 0; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .run-captions li { transform: none; }
  .run-captions .run-name { font-size: 17px; }
}

/* Round 18 (2026-09-02 17:5x) — words and drawing in ONE group. Round-17 verdict: S4 a vacant field, a 2px sparkline whose
   stroke "does not enter" the amber, a token wedge, headline and run not in proximity; S6 a centered island; rail marks dim.
   Now at ≥941: two columns — eyebrow/title/lede stacked left, the run drawn big on the right, bottoms aligned; the cream
   line continues along the curve's own path under a 9px amber stroke and shows as a cream core inside the amber for ~60px;
   the gain wedge between curve and trend is filled .34 (≥2× the largest disc); names centred under the marks. Phone: the
   figure rises into the lede's right side (no dead band). S6 padding 96/104. Rail marks full opacity. */
@media (min-width: 941px) {
  .method-inner { display: grid; grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr); gap: 0 56px; align-items: end; padding-top: 88px; padding-bottom: 80px; }
  .method-head { display: block; margin: 0; max-width: 480px; padding-bottom: 6px; }
  .method-head .section-lede { margin: 22px 0 0; }
  .run { grid-column: 2; }
  .run-captions { margin-top: 16px; padding: 0; grid-template-columns: repeat(4, 1fr); gap: 0 12px; }
  .run-captions li { transform: none; align-items: center; text-align: center; }
}
@media (min-width: 701px) and (max-width: 940px) {
  .run-captions { padding-left: 0; grid-template-columns: repeat(4, 1fr); }
  .run-captions li { transform: none; text-align: center; align-items: center; }
}
.run-core { opacity: 0; transition: opacity .3s ease .95s; }
.run.is-in .run-core { opacity: .85; }
@media (prefers-reduced-motion: reduce) { .run-core { opacity: .85 !important; transition: none !important; } }
@media (max-width: 700px) {
  .method-head { margin-bottom: 0; }
  .run { margin-top: -30px; }
  .run-captions { margin-top: 14px; }
}
.final-inner { padding-top: 96px; padding-bottom: 104px; }
.tool-list img { opacity: 1; }