/* =====================================================================
   / : the summary. Every class is prefixed home-.
   Story: hero (the aim, what this is not), in short (stat bars, six findings),
   one pump two metals (animated field maps), how it was done (passes and models),
   the nine chapters, how much to trust it, what comes next.
   Field maps: amber = pushed one way, crimson = the other, dark = passing the
   centre of the swing, purple = empty site, brightness = amplitude.
   ===================================================================== */

.page-home { --home-ni: var(--amber); --home-pd: var(--crimson-ink); }

/* ---------- shared band furniture ---------- */
.home-band { position: relative; padding-block: clamp(64px, 7vw, 112px); }
.home-head { max-width: 1100px; margin-bottom: clamp(36px, 4.6vw, 64px); }
.home-h2 { font: 400 clamp(44px, 7vw, 120px)/0.9 var(--font-display); letter-spacing: var(--track-display); text-wrap: balance; max-width: 12em; }
.home-h3 { font: 400 clamp(34px, 4.4vw, 68px)/0.94 var(--font-display); letter-spacing: var(--track-display); text-wrap: balance; }
.home-lead { font: 400 var(--fs-lead)/1.4 var(--font-text); color: var(--ink-2); max-width: 46ch; margin-top: clamp(22px, 2.6vw, 36px); letter-spacing: -0.012em; text-wrap: pretty; }
@media (min-width: 1000px) {
  .home-head--split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 96px); align-items: end; max-width: none; }
  .home-head--split .kicker { grid-column: 1 / -1; }
  .home-head--split .home-lead, .home-head--split .home-how__text { margin-top: 0; padding-bottom: 0.35em; }
}
.home-deeper { margin-top: clamp(40px, 5vw, 64px); max-width: 880px; }
.home-deeper .deeper { border-bottom: 1px solid var(--line); }
.home-tag { display: inline-block; font: 500 10px/1 var(--font-mono); color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 50%, transparent); border-radius: 3px; padding: 3px 4px 2px; margin-left: 4px; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: 0.2em; white-space: nowrap; }

/* =====================================================================
   HERO
   ===================================================================== */
.home-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(calc(100svh - var(--header-h) - 3px), 980px);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: #0b0509;
}
.home-hero--noimg { background: radial-gradient(60% 80% at 76% 50%, rgba(235, 91, 0, 0.45), rgba(100, 13, 95, 0.45) 45%, #0b0509 80%); }
.home-hero__media { position: absolute; inset: 0; z-index: -1; }
.home-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; filter: brightness(0.8) saturate(1.05); }
.home-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 5, 9, 0.92) 0%, rgba(11, 5, 9, 0.72) 30%, rgba(11, 5, 9, 0.2) 52%, rgba(11, 5, 9, 0) 66%),
    linear-gradient(180deg, rgba(25, 25, 25, 0) 58%, var(--bg) 100%);
}
.home-hero .illus-tag { left: auto; right: var(--gutter); bottom: auto; top: 18px; }
.home-hero__head { position: relative; padding-top: clamp(56px, 9vh, 120px); }
.home-hero__body { position: relative; padding-bottom: clamp(40px, 6vh, 80px); }
.home-hero__title { font: 400 clamp(52px, 8.6vw, 156px)/0.86 var(--font-display); letter-spacing: var(--track-display); margin: 0 0 0 -0.04em; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45); }
.home-hero__line { display: block; }
.home-hero__line--accent { color: var(--amber); }
.home-hero__lead { font: 400 clamp(19px, 1.5vw, 24px)/1.42 var(--font-text); color: var(--ink-2); max-width: 40ch; margin-top: clamp(26px, 3.2vw, 44px); letter-spacing: -0.01em; text-wrap: pretty; text-shadow: 0 1px 24px rgba(0, 0, 0, 0.6); }
.home-hero__lead strong { color: var(--ink); font-weight: 400; }
.home-hero__not { max-width: 62ch; margin-top: 18px; padding: 10px 0 10px 14px; border-left: 2px solid var(--crimson); font: 400 13px/1.6 var(--font-mono); color: var(--ink-2); }
.home-hero__notk { color: var(--crimson-ink); text-transform: uppercase; font-weight: 500; margin-right: 6px; }
.home-hero__ctas { margin-top: clamp(24px, 2.8vw, 36px); }
.home-hero__depth { margin-top: clamp(24px, 3vw, 36px); }
.home-hero__depth .depth-legend { margin: 0; font-size: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .js .home-hero__line, .js .home-hero .kicker, .js .home-hero__lead, .js .home-hero__not, .js .home-hero__ctas { animation: homeRise 1s var(--ease-out) both; }
  .js .home-hero .kicker { animation-delay: 0.05s; }
  .js .home-hero__line:nth-child(1) { animation-delay: 0.12s; }
  .js .home-hero__line:nth-child(2) { animation-delay: 0.22s; }
  .js .home-hero__line:nth-child(3) { animation-delay: 0.42s; }
  .js .home-hero__lead { animation-delay: 0.58s; }
  .js .home-hero__not { animation-delay: 0.68s; }
  .js .home-hero__ctas { animation-delay: 0.78s; }
  .js .home-hero__img { animation: homeFade 1.6s var(--ease-out) both; }
}
@keyframes homeRise { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: none; } }
@keyframes homeFade { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

/* phones: the photograph on top, headline over its dark lower edge, text below */
@media (max-width: 760px) {
  .home-hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; min-height: 0; background: var(--bg); }
  .home-hero__media { position: relative; grid-row: 1; grid-column: 1; aspect-ratio: 4 / 4.4; z-index: 0; }
  .home-hero__img { object-position: 74% 50%; filter: brightness(0.85) saturate(1.05); }
  .home-hero__scrim { background: linear-gradient(180deg, rgba(11, 5, 9, 0.35) 0%, rgba(11, 5, 9, 0) 30%, rgba(25, 25, 25, 0.55) 62%, var(--bg) 100%); }
  .home-hero__head { grid-row: 1; grid-column: 1; align-self: end; z-index: 1; padding-top: 0; padding-bottom: 4px; }
  .home-hero__body { grid-row: 2; grid-column: 1; padding-top: 0; padding-bottom: 40px; }
  .home-hero .kicker { font-size: 11.5px; letter-spacing: 0; margin-bottom: 14px; }
  .home-hero__title { font-size: clamp(48px, 14vw, 84px); }
  .home-hero .illus-tag { top: 12px; right: auto; left: 12px; }
  .home-hero__lead { margin-top: 22px; }
  .home-hero__ctas .btn { flex: 1 1 auto; justify-content: space-between; }
}

/* =====================================================================
   IN SHORT: stat bars, then six findings
   ===================================================================== */
.home-short { padding-top: clamp(72px, 8vw, 128px); }
.home-short__bars { padding-inline: clamp(8px, 1vw, 14px); }
.home-finds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 3.4vw, 56px) clamp(20px, 2.6vw, 44px); margin-top: clamp(56px, 6.4vw, 96px); }
.home-find { display: flex; flex-direction: column; border-top: 3px solid var(--c, var(--amber)); padding-top: 18px; min-width: 0; }
.home-find__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-find__n { font: 400 clamp(34px, 3vw, 48px)/0.85 var(--font-display); letter-spacing: -0.06em; color: var(--c, var(--amber)); }
.home-find__tag { font: 500 11.5px/1.3 var(--font-mono); color: var(--ink-3); text-transform: uppercase; text-align: right; }
.home-find__claim { font: 400 clamp(22px, 1.9vw, 30px)/1.06 var(--font-display); letter-spacing: -0.03em; margin-top: 18px; text-wrap: balance; }
.home-find__body { font: 400 15.5px/1.6 var(--font-text); color: var(--ink-2); margin-top: 12px; max-width: 48ch; text-wrap: pretty; }
.home-find__body b { color: var(--ink); font-weight: 400; font-family: var(--font-mono); font-size: 0.92em; }
.home-find__links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: auto; padding-top: 16px; }
.home-find__links a { font: 500 12.5px/1.3 var(--font-mono); color: var(--ink); text-decoration: none; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--c, var(--amber)) 55%, transparent); transition: border-color 0.2s, color 0.2s; }
.home-find__links a:hover { color: var(--amber); border-bottom-color: var(--c, var(--amber)); }
@media (max-width: 1100px) { .home-finds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .home-finds { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* =====================================================================
   ONE PUMP, TWO METALS
   ===================================================================== */
.home-two__grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); grid-template-rows: auto 1fr; gap: 0 clamp(32px, 4.4vw, 80px); align-items: start; }
.home-two__text { grid-column: 1; grid-row: 1; }
.home-two__fig { grid-column: 2; grid-row: 1 / span 2; }
.home-two__more { grid-column: 1; grid-row: 2; }
.home-two__p { font: 400 clamp(17px, 1.3vw, 19px)/1.55 var(--font-text); color: var(--ink-2); margin-top: 18px; max-width: 44ch; text-wrap: pretty; }
.home-two__text .home-h3 { margin-top: 2px; }
.home-two__key { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 8px 22px; margin-top: 26px; font: 400 12px/1.3 var(--font-mono); color: var(--ink-2); }
.home-two__ki { display: inline-flex; align-items: center; gap: 8px; }
.home-two__sw { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; }
.home-two__sw--a { background: var(--amber); }
.home-two__sw--c { background: var(--crimson); }
.home-two__sw--d { background: var(--bg-raise-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.home-two__sw--v { width: 6px; height: 6px; margin-inline: 2.5px; background: var(--purple-ink); }
.home-two__keynote { font: 400 12px/1.55 var(--font-mono); color: var(--ink-3); margin-top: 12px; max-width: 44ch; }
.home-two__more { margin-top: clamp(28px, 3vw, 44px); }
.home-two__more .deeper { border-bottom: 1px solid var(--line); }

.home-two__fig { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, 0.015); min-width: 0; }
.home-two__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 500 12px/1.3 var(--font-mono); text-transform: uppercase; color: var(--ink); }
.home-two__tag { color: var(--amber); }
.home-two__play { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px/1 var(--font-mono); text-transform: uppercase; color: var(--ink-2); padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 3px; transition: color 0.2s, border-color 0.2s; }
.home-two__play::before { content: ""; width: 8px; height: 9px; background: currentColor; clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.home-two__play[aria-pressed="false"]::before { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.home-two__play:hover { color: var(--ink); border-color: var(--amber); }
.home-two__play[hidden] { display: none; }
.home-two__maps { display: flex; align-items: flex-start; gap: clamp(16px, 2vw, 28px); padding: 18px 16px 4px; }
.home-two__panel { min-width: 0; }
.home-two__panel--ni { flex: var(--wa) 1 0; }
.home-two__panel--pd { flex: var(--wb) 1 0; }
.home-two__pk { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 400 12px/1.4 var(--font-mono); color: var(--ink-3); margin-bottom: 10px; }
.home-two__mat { display: inline-block; font: 600 12px/1 var(--font-mono); padding: 4px 6px 3px; border-radius: 3px; }
.home-two__mat--ni { background: var(--amber); color: var(--on-amber); }
.home-two__mat--pd { background: var(--crimson); color: #fff; }
.home-two__map { position: relative; aspect-ratio: var(--ar, 1 / 1); background: #0b0b0b; border-radius: 2px; overflow: hidden; }
.home-two__map canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.home-two__scale { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 400 11px/1 var(--font-mono); color: var(--ink-3); }
.home-two__scale span { display: block; height: 6px; border: 1px solid var(--ink-3); border-top: 0; flex: none; }
.home-two__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.home-two__nums dt { order: 2; font: 500 10.5px/1.3 var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 6px; }
.home-two__nums dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 2px; margin: 0; font: 400 clamp(22px, 2vw, 32px)/1 var(--font-display); letter-spacing: -0.04em; color: var(--ink); white-space: nowrap; }
.home-two__nums div { display: flex; flex-direction: column; min-width: 0; }
.home-two__read { min-height: 1.5em; padding: 10px 16px 0; font: 400 12px/1.5 var(--font-mono); color: var(--ink-3); }
.home-two__read b { color: var(--ink); font-weight: 500; }
.home-two__noscript { padding: 10px 16px 0; font: 400 12px/1.5 var(--font-mono); color: var(--ink-3); }
/* without JavaScript the maps cannot be drawn: keep the numbers, drop the empty frames */
.no-js .home-two__map, .no-js .home-two__scale, .no-js .home-two__read { display: none; }
.no-js .home-two__nums { margin-top: 0; }
.home-two__cap { padding: 14px 16px 16px; margin-top: 10px; border-top: 1px solid var(--line); font: 400 12px/1.65 var(--font-mono); color: var(--ink-3); }
.home-two__cap b { color: var(--ink); font-weight: 500; }
.home-two__cap .chip { margin-left: 4px; }
@media (max-width: 1100px) {
  .home-two__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .home-two__text, .home-two__fig, .home-two__more { grid-column: 1; grid-row: auto; }
  .home-two__fig { margin-top: 32px; }
  .home-two__p, .home-two__keynote { max-width: 60ch; }
}
@media (max-width: 560px) {
  .home-two__maps { flex-direction: column; align-items: stretch; gap: 22px; padding-inline: 12px; }
  .home-two__panel--pd { width: calc(var(--wb) / var(--wa) * 100%); }
  .home-two__panel--ni, .home-two__panel--pd { flex: none; }
  .home-two__bar, .home-two__read, .home-two__cap, .home-two__noscript { padding-inline: 12px; }
  .home-two__key { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* =====================================================================
   HOW IT WAS DONE: readouts and the pass staircase
   ===================================================================== */
.home-how__text { max-width: 54ch; }
@media (min-width: 1000px) { .home-how .home-head--split { align-items: start; } }
.home-how__text p { font: 400 clamp(16px, 1.2vw, 18px)/1.6 var(--font-text); color: var(--ink-2); text-wrap: pretty; }
.home-how__text p + p { margin-top: 14px; }
@media (max-width: 999px) { .home-how__text { margin-top: 24px; } }

.home-how__readouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 clamp(48px, 5.6vw, 80px); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); }
.home-how__readouts li { display: flex; flex-direction: column; gap: 6px; padding: 20px clamp(12px, 1.6vw, 24px) 22px 0; }
.home-how__readouts li + li { padding-left: clamp(12px, 1.6vw, 24px); border-left: 1px solid var(--line); }
.home-how__rk { font: 500 11.5px/1.3 var(--font-mono); color: var(--amber); text-transform: uppercase; }
.home-how__rv { font: 400 clamp(46px, 5vw, 84px)/0.9 var(--font-display); letter-spacing: var(--track-display); font-weight: 400; }
.home-how__rv span { color: var(--ink-3); margin: 0 0.06em; }
.home-how__rn { font: 400 12.5px/1.5 var(--font-mono); color: var(--ink-3); max-width: 30ch; }
@media (max-width: 860px) {
  .home-how__readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-how__readouts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .home-how__readouts li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

.home-pass { margin: 0; }
.home-pass__label { font: 500 12px/1.4 var(--font-mono); color: var(--ink-2); text-transform: uppercase; margin-bottom: 18px; }
.home-pass { --unit: clamp(22px, 2.6vw, 40px); }
.home-pass__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 0 3px; }
.home-pass__col { --pc: var(--amber); display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; }
.home-pass__col--orange { --pc: var(--orange); }
.home-pass__col--crimson { --pc: var(--crimson); }
.home-pass__col--purple { --pc: var(--purple); }
/* steps share one baseline: each is taller by one unit and starts one unit higher */
.home-pass__step { display: flex; align-items: flex-end; height: calc(54px + var(--i) * var(--unit)); margin-top: calc((3 - var(--i)) * var(--unit)); padding: 0 12px 8px; background: var(--pc); color: #fff; }
.home-pass__col--amber .home-pass__step, .home-pass__col--orange .home-pass__step { color: var(--on-amber); }
.home-pass__step b { font: 400 clamp(28px, 2.6vw, 42px)/0.9 var(--font-display); letter-spacing: -0.05em; }
.home-pass__k { font: 500 11.5px/1.3 var(--font-mono); text-transform: uppercase; color: var(--ink-2); margin-top: 14px; padding-right: 12px; }
.home-pass__col--purple .home-pass__k { color: var(--purple-ink); }
.home-pass__col--amber .home-pass__k { color: var(--amber-ink); }
.home-pass__col--orange .home-pass__k { color: var(--orange-ink); }
.home-pass__col--crimson .home-pass__k { color: var(--crimson-ink); }
.home-pass__t { font: 400 clamp(18px, 1.5vw, 23px)/1.12 var(--font-display); letter-spacing: -0.025em; margin-top: 8px; padding-right: 12px; text-wrap: balance; }
.home-pass__tool { font: 400 12px/1.5 var(--font-mono); color: var(--ink-3); margin-top: 6px; padding-right: 12px; }
.home-pass__models { display: grid; gap: 6px; margin-top: 14px; padding-right: 12px; }
.home-pass__models a, .home-pass__extra { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px 10px; border: 1px solid var(--line-2); border-left: 3px solid var(--pc); border-radius: 3px; text-decoration: none; background: rgba(0, 0, 0, 0.12); transition: border-color 0.2s, background 0.2s; }
.home-pass__models a:hover { border-color: var(--pc); background: rgba(255, 255, 255, 0.03); }
.home-pass__col--purple .home-pass__models a, .home-pass__col--purple .home-pass__extra { border-left-color: var(--purple-ink); }
.home-pass__col--purple .home-pass__models a:hover { border-color: var(--purple-ink); }
.home-pass__mn { font: 500 11px/1.2 var(--font-mono); color: var(--ink-3); text-transform: uppercase; }
.home-pass__mt { font: 400 15px/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
.home-pass__extra { border-style: dashed; border-left-style: solid; background: none; }
.home-pass__extra .home-pass__mt { font: 400 12px/1.45 var(--font-mono); color: var(--ink-2); letter-spacing: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .home-pass .home-pass__step { transform: scaleY(0.05); transform-origin: bottom; }
  .js .home-pass.is-in .home-pass__step { transform: none; transition: transform 0.9s var(--ease-out); transition-delay: calc(var(--i) * 0.12s + 0.15s); }
}
@media (max-width: 860px) {
  .home-pass__cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .home-pass__col { display: grid; grid-template-columns: minmax(0, 1fr); }
  .home-pass__step { margin-top: 0; height: 44px; width: calc(25% + var(--i) * 25%); min-width: 64px; padding-bottom: 6px; }
  .home-pass__step b { font-size: 28px; }
  .home-pass__k, .home-pass__t, .home-pass__tool, .home-pass__models { padding-right: 0; }
  .home-pass__models { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .js .home-pass .home-pass__step { transform: scaleX(0.05); transform-origin: left; }
}

/* =====================================================================
   THE CHAPTERS
   ===================================================================== */
.home-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 2.6vw, 40px) clamp(16px, 2vw, 32px); }
.home-card { --cc: var(--amber); min-width: 0; }
.home-card--orange { --cc: var(--orange); }
.home-card--crimson { --cc: var(--crimson); }
.home-card--purple { --cc: var(--purple-ink); }
.home-card__a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; background: var(--bg-raise); border-top: 3px solid var(--cc); border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; transition: background 0.25s, transform 0.3s var(--ease); }
.home-card__a:hover { background: var(--bg-raise-2); }
.home-card__media { position: relative; display: block; aspect-ratio: 16 / 8; overflow: hidden; background: linear-gradient(135deg, var(--purple), var(--crimson) 60%, var(--orange)); }
.home-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; filter: brightness(0.85); transition: transform 0.6s var(--ease), filter 0.3s; }
.home-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(32, 32, 32, 0) 55%, var(--bg-raise) 100%); transition: opacity 0.25s; }
.home-card__a:hover .home-card__media img { transform: scale(1.04); filter: brightness(1); }
.home-card__a:hover .home-card__media::after { opacity: 0.6; }
.home-card__body { position: relative; display: flex; flex-direction: column; flex: 1; padding: 4px clamp(16px, 1.6vw, 24px) 22px; }
.home-card__num { font: 400 clamp(40px, 3.4vw, 56px)/0.85 var(--font-display); letter-spacing: -0.06em; color: var(--cc); margin-top: -0.42em; position: relative; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5); }
.home-card__t { display: block; font: 400 clamp(21px, 1.7vw, 27px)/1.08 var(--font-display); letter-spacing: -0.03em; margin-top: 14px; text-wrap: balance; }
.home-card__s { display: block; font: 400 15px/1.5 var(--font-text); color: var(--ink-2); margin-top: 10px; text-wrap: pretty; }
.home-card__find { display: block; font: 400 12.5px/1.55 var(--font-mono); color: var(--ink-3); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.home-card__fk { color: var(--cc); text-transform: uppercase; font-weight: 500; }
.home-card__go { margin-top: auto; padding-top: 16px; font: 400 24px/1 var(--font-display); color: var(--cc); transition: transform 0.25s var(--ease); align-self: flex-start; }
.home-card__a:hover .home-card__go { transform: translateX(6px); }
.home-card__a:hover .home-card__t { color: var(--amber); }
.home-card__a:focus-visible { outline-offset: 4px; }
@media (max-width: 1100px) { .home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .home-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* phones: thumbnail as a narrow strip on the left, text beside it */
  .home-card__a { display: grid; grid-template-columns: 84px minmax(0, 1fr); border-top: 0; border-left: 3px solid var(--cc); border-radius: 0 var(--radius) var(--radius) 0; }
  .home-card__media { aspect-ratio: auto; height: 100%; min-height: 100%; }
  .home-card__media::after { background: linear-gradient(90deg, rgba(32, 32, 32, 0) 50%, var(--bg-raise) 100%); }
  .home-card__body { padding: 16px 16px 16px 14px; }
  .home-card__num { margin-top: 0; font-size: 30px; }
  .home-card__t { margin-top: 8px; font-size: 20px; }
  .home-card__s { font-size: 14px; margin-top: 6px; }
  .home-card__find { font-size: 12px; margin-top: 10px; padding-top: 10px; }
  .home-card__go { display: none; }
}

/* =====================================================================
   HOW MUCH TO TRUST IT
   ===================================================================== */
.home-trust__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 44px); }
.home-trust__col { --tc: var(--amber); border-top: 3px solid var(--tc); padding-top: 18px; min-width: 0; }
.home-trust__col--cond { --tc: var(--orange); }
.home-trust__col--extra { --tc: var(--crimson); }
.home-trust__k { display: flex; align-items: center; gap: 10px; font: 400 clamp(30px, 2.8vw, 44px)/1 var(--font-display); letter-spacing: -0.04em; }
.home-trust__pips { display: inline-grid; grid-template-columns: repeat(3, 8px); gap: 3px; }
.home-trust__pips i { display: block; height: 8px; background: var(--tc); }
.home-trust__col--cond .home-trust__pips i:nth-child(3) { opacity: 0.22; }
.home-trust__col--extra .home-trust__pips i:nth-child(n + 2) { opacity: 0.22; }
.home-trust__def { font: 400 12.5px/1.55 var(--font-mono); color: var(--ink-3); margin-top: 10px; }
.home-trust__list { margin-top: 18px; border-bottom: 1px solid var(--line); }
.home-trust__list li { padding: 14px 0; border-top: 1px solid var(--line); font: 400 15.5px/1.55 var(--font-text); color: var(--ink-2); text-wrap: pretty; }
.home-trust__list b { color: var(--ink); font-weight: 700; }
@media (max-width: 960px) { .home-trust__cols { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

.home-caveat { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 8px clamp(24px, 4vw, 72px); margin-top: clamp(48px, 6vw, 88px); padding: clamp(22px, 2.6vw, 40px); border: 1px solid color-mix(in srgb, var(--purple-ink) 50%, transparent); border-left: 3px solid var(--purple-ink); background: rgba(100, 13, 95, 0.14); border-radius: 0 var(--radius) var(--radius) 0; }
.home-caveat__k { grid-column: 1 / -1; font: 500 12px/1.3 var(--font-mono); color: var(--purple-ink); text-transform: uppercase; }
.home-caveat__h { font: 400 clamp(26px, 2.6vw, 42px)/1.02 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; }
.home-caveat__p { font: 400 16px/1.6 var(--font-text); color: var(--ink-2); max-width: 60ch; text-wrap: pretty; }
.home-caveat__go { grid-column: 2; }
.home-caveat__go a { display: inline-flex; gap: 8px; font: 500 13px/1.3 var(--font-mono); color: var(--ink); text-decoration: none; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--purple-ink) 70%, transparent); }
.home-caveat__go a:hover { color: var(--amber); border-bottom-color: var(--amber); }
@media (max-width: 860px) {
  .home-caveat { grid-template-columns: minmax(0, 1fr); }
  .home-caveat__go { grid-column: 1; margin-top: 6px; }
}

/* =====================================================================
   WHAT COMES NEXT
   ===================================================================== */
.home-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.home-step { display: flex; flex-direction: column; border-top: 3px solid var(--c, var(--amber)); padding-top: 18px; min-width: 0; }
.home-step__k { display: flex; align-items: center; gap: 12px; font: 500 11.5px/1.3 var(--font-mono); color: var(--ink-3); text-transform: uppercase; }
.home-step__n { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--c, var(--amber)); color: var(--on-amber); font: 600 13px/1 var(--font-mono); }
.home-step:nth-child(3) .home-step__n { color: #fff; }
.home-step__t { font: 400 clamp(24px, 2.2vw, 36px)/1.02 var(--font-display); letter-spacing: -0.035em; margin-top: 16px; text-wrap: balance; }
.home-step__p { font: 400 15.5px/1.6 var(--font-text); color: var(--ink-2); margin-top: 12px; max-width: 46ch; text-wrap: pretty; }
.home-step__go { margin-top: auto; padding-top: 16px; }
.home-step__go a { font: 500 12.5px/1.3 var(--font-mono); color: var(--ink); text-decoration: none; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--c, var(--amber)) 60%, transparent); }
.home-step__go a:hover { color: var(--amber); }
@media (max-width: 900px) { .home-steps { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

.home-close { margin-top: clamp(56px, 7vw, 104px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line-2); }
.home-close__t { font: 400 clamp(26px, 3vw, 46px)/1.04 var(--font-display); letter-spacing: -0.035em; max-width: 24ch; text-wrap: balance; }
.home-close__row { margin-top: clamp(22px, 2.6vw, 32px); }
@media (max-width: 560px) { .home-close__row .btn { flex: 1 1 100%; justify-content: space-between; } }