/* =========================================================
   LockIN — thank-you, VIP and legal pages
   Builds on styles.css: same tokens, materials and motion.
   ========================================================= */

/* ---------- Nav (sub pages) ---------- */
.nav-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 999px;
  font-size: .9375rem; font-weight: 550; color: var(--ink-2); text-decoration: none;
  transition: color var(--dur-fast), background-color var(--dur-fast);
}
.nav-back:hover { color: var(--ink); background: rgba(28,23,20,.06); }
.nav-back .i { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
.nav-back:hover .i { transform: translateX(-3px); }

/* ---------- Hero ---------- */
.sub-hero {
  position: relative; overflow: clip;
  padding: calc(var(--nav-h) + clamp(28px, 5vw, 56px)) 0 clamp(64px, 9vw, 112px);
}
.sub-hero::before { /* morning light from the window, like the hero photo */
  content: ""; position: absolute; inset: -20% -30% auto 30%; height: 90%; pointer-events: none;
  background: radial-gradient(50% 50% at 60% 40%, rgba(255, 214, 168, .45), rgba(255, 214, 168, 0) 70%);
}
.sub-hero > .container { position: relative; }
.sub-head { max-width: 780px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.eyebrow .i-ok { width: 16px; height: 16px; color: #2F6B3A; stroke-width: 2.4; }
.sub-title { font-size: clamp(2.4rem, 6.2vw, 4.4rem); font-weight: 800; letter-spacing: -0.045em; line-height: .98; }
.sub-title .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.sub-title .line > span { display: inline-block; }
.sub-title em { font-size: 1.1em; letter-spacing: -0.02em; }
.sub-lede { margin-top: 20px; max-width: 46ch; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); color: var(--ink-2); }
.sub-lede strong { color: var(--ink); }

/* Inbox reminder (double opt-in) */
.inbox-note {
  display: flex; gap: 14px; align-items: flex-start; max-width: 600px; margin-top: 26px; padding: 14px 18px; border-radius: 16px;
  background: rgba(251, 247, 241, .8); box-shadow: inset 0 0 0 1px var(--line);
  font-size: .9375rem; line-height: 1.5; color: var(--ink-2); text-align: left;
}
.inbox-note strong { color: var(--ink); }
.inbox-note .i { color: var(--copper-text); margin-top: 1px; }

/* ---------- Journey: the board's 0–100% line, used as a step indicator ---------- */
.journey { --at: 0; position: relative; max-width: 560px; margin: 0 auto clamp(28px, 4vw, 44px); }
.j-track { position: absolute; top: 10px; left: calc(100% / 6); right: calc(100% / 6); height: 3px; border-radius: 3px; background: #2C2622; }
.j-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--copper); transform-origin: left; transform: scaleX(var(--at)); transition: transform 1400ms var(--ease-out); }
.j-knob { /* the mover spans the track; the knob sits on its right edge */
  position: absolute; inset: 0; z-index: 2; transform: translateX(calc((var(--at) - 1) * 100%)); transition: transform 1400ms var(--ease-out);
}
.j-knob::after {
  content: ""; position: absolute; right: -12px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FAD6B4 0%, #D8925F 24%, #A95B2F 58%, #6C3418 100%);
  box-shadow: 0 4px 8px rgba(50,25,8,.4), inset 0 -2px 3px rgba(0,0,0,.25), inset 0 2px 2px rgba(255,232,205,.55);
}
.j-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); }
.j-step { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.j-dot { position: relative; z-index: 1; width: 14px; height: 14px; margin-top: 4.5px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px #2C2622; }
.j-step.is-done .j-dot { background: var(--copper); box-shadow: none; }
.j-lbl { font-size: .8125rem; font-weight: 600; line-height: 1.3; color: var(--ink-3); }
.j-step.is-done .j-lbl { color: var(--ink-2); }
.j-step.is-current .j-lbl { color: var(--ink); font-weight: 700; }

/* ---------- Offer: VIP pass + checkout card ---------- */
.offer { display: grid; gap: 32px; margin-top: clamp(36px, 5vw, 60px); }
@media (min-width: 900px) { .offer { grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 5vw, 72px); align-items: center; } }

.pass-stage { --rx: 0deg; --ry: 0deg; --gx: 50%; container-type: inline-size; perspective: 1200px; width: min(100%, 560px); justify-self: center; }
.pass {
  position: relative; padding: 7% 6% 8%; border-radius: 4cqi;
  background-color: #94512D;
  background-image: var(--noise), radial-gradient(120% 90% at 28% 18%, rgba(255, 214, 178, .26), transparent 58%), linear-gradient(160deg, #AB633B 0%, #8E4C29 58%, #723A1C 100%);
  background-size: 140px, auto, auto;
  box-shadow: 0 40px 70px -40px rgba(60, 30, 10, .6), 0 12px 24px -16px rgba(60, 30, 10, .4), inset 0 1px 0 rgba(255, 220, 190, .25);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
}
.pass::before { content: ""; position: absolute; inset: 1.8cqi; border-radius: 2.6cqi; border: 1.5px dashed rgba(246, 208, 170, .5); pointer-events: none; }
.pass-ring {
  position: absolute; top: -3.4cqi; z-index: 3; width: 4.4cqi; height: 7.4cqi; border-radius: 30% / 22%;
  background: linear-gradient(90deg, #6E3518 0%, #C98256 30%, #F5C59E 48%, #B86B3E 68%, #6E3518 100%);
  box-shadow: 0 4px 8px rgba(60, 30, 10, .35);
}
.pass-ring-l { left: 20%; } .pass-ring-r { right: 20%; }

.pass-card {
  position: relative; padding: 5cqi 6cqi 5.4cqi; border-radius: 2.4cqi; background: #FFFEFB;
  box-shadow: 0 0 0 .9cqi rgba(255,255,255,.8), 0 0 0 1.2cqi rgba(150,140,130,.4), 0 1.6cqi 2.8cqi rgba(60,40,20,.3);
}
.pass-card::after { /* acrylic sleeve gloss */
  content: ""; position: absolute; inset: -.9cqi; border-radius: 3cqi; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 60%, rgba(255,255,255,.3) 70%, rgba(255,255,255,0) 80%);
}
.pass-glare { /* light that follows the tilt */
  position: absolute; inset: -.9cqi; border-radius: 3cqi; pointer-events: none; z-index: 2;
  background: radial-gradient(40% 60% at var(--gx) 20%, rgba(255, 246, 230, .55), rgba(255, 246, 230, 0) 70%);
  mix-blend-mode: soft-light;
}
.pass-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4cqi; }
.pass-mark { font-weight: 700; font-stretch: 125%; font-size: 2.8cqi; letter-spacing: .42em; color: #2C2622; }
.pass-badge {
  padding: .9cqi 2.6cqi .9cqi 3.1cqi; border-radius: 99px; font-weight: 800; font-size: 2.6cqi; letter-spacing: .3em; color: #fff;
  background: radial-gradient(circle at 30% 25%, #E9A877 0%, #B86B3E 50%, #8A4520 100%);
  box-shadow: inset 0 .3cqi .3cqi rgba(255,232,205,.5), 0 .6cqi 1.2cqi rgba(110,53,24,.35);
}
.pass-row { padding: 2.4cqi 0 1.2cqi; border-bottom: .3cqi solid #E8DFD3; }
.pass-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.pass-card .f-lbl { font-size: 2.3cqi; }
.pass-card .f-hand { font-size: 5.8cqi; padding-left: 3cqi; margin-top: .4cqi; white-space: normal; }
.pass-stamp {
  position: absolute; right: 5cqi; top: 14cqi; z-index: 1;
  padding: 1.2cqi 2.6cqi 1cqi; border: .7cqi solid var(--copper-text); border-radius: 1.6cqi;
  font-weight: 800; font-stretch: 112%; font-size: 4cqi; line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: var(--copper-text);
  transform: rotate(-11deg); opacity: .88; mix-blend-mode: multiply;
}

.offer-card {
  padding: clamp(24px, 4vw, 40px); border-radius: 28px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -50px rgba(60,35,15,.45);
}
.offer-kicker { font-size: .8125rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--copper-text); }
.offer-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: clamp(3.4rem, 7vw, 4.4rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.offer-price small { font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.offer-card .perks { margin-top: 24px; }
.offer-card .perks strong { font-weight: 700; }
.offer-btn { width: 100%; margin-top: 28px; }
.offer-btn .i { transition: transform var(--dur) var(--ease-out); }
.offer-btn:hover .i { transform: translateX(4px); }
.offer-fine { margin-top: 14px; font-size: .8125rem; line-height: 1.6; color: var(--ink-3); text-align: center; }
.offer-fine .i { display: inline-block; width: 15px; height: 15px; margin-right: 4px; vertical-align: -2px; }
.offer-fine a { margin-left: 4px; white-space: nowrap; }
.offer-fine a, .next-list a, .legal-body a, .faq-body a { color: var(--copper-text); font-weight: 600; text-underline-offset: 3px; }

/* VIP page: countdown + calendar */
.launch-box .countdown-label { font-size: 1.0625rem; }
.cal { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.cal-label { font-weight: 650; margin-bottom: 12px; }
.cal-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.cal-btns .btn { flex: 1 1 180px; }
.cal-fine { margin-top: 12px; font-size: .8125rem; color: var(--ink-3); }
.launch-box .live-note { margin-bottom: 4px; }

/* ---------- Launch list vs VIP ---------- */
.compare-sec { background: var(--paper-2); }
.compare { border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -48px rgba(60,35,15,.45); overflow: hidden; }
.cmp-row { display: grid; grid-template-columns: 1fr 1fr; }
.cmp-row > * { padding: 14px 18px; }
.cmp-row + .cmp-row { border-top: 1px solid var(--line); }
.cmp-row [role="rowheader"] { grid-column: 1 / -1; padding-bottom: 0; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.cmp-row [role="cell"] { font-size: .9375rem; color: var(--ink-2); }
.cmp-head > :first-child { display: none; }
.cmp-head > * { font-weight: 750; font-size: 1.0625rem; color: var(--ink); }
.cmp-vip { background: rgba(184, 107, 62, .08); color: var(--ink) !important; }
.cmp-vip strong { color: var(--copper-text); font-weight: 750; }
.cmp-head small { margin-left: 6px; padding: 2px 8px; border-radius: 99px; background: var(--copper-text); color: #fff; font-size: .75rem; font-weight: 700; vertical-align: 2px; }
@media (min-width: 720px) {
  .cmp-row { grid-template-columns: .8fr 1fr 1fr; align-items: stretch; }
  .cmp-row > * { padding: 20px 24px; }
  .cmp-row [role="rowheader"] { grid-column: auto; padding-bottom: 20px; align-self: center; }
  .cmp-head > :first-child { display: block; }
  .cmp-row [role="cell"] { font-size: 1rem; }
}

/* ---------- Kickstarter follow band ---------- */
.ks-band { position: relative; overflow: hidden; padding-block: clamp(64px, 9vw, 112px); background: var(--ink); color: var(--paper); }
.ks-band::before { content: ""; position: absolute; inset: -40% -10% auto 40%; height: 160%; background: radial-gradient(50% 50% at 50% 50%, rgba(217,145,95,.22), transparent 70%); pointer-events: none; }
.ks-inner { position: relative; display: grid; gap: 28px; }
@media (min-width: 900px) { .ks-inner { grid-template-columns: 1fr auto; gap: 64px; align-items: center; } }
.ks-band h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.ks-band p:not(.kicker) { margin-top: 14px; max-width: 52ch; color: var(--on-night-2); font-size: 1.0625rem; }
.kicker-light { color: var(--copper-light); }
.ks-band :focus-visible { outline-color: var(--copper-light); }
.ks-band .btn { justify-self: start; }

/* ---------- What happens next ---------- */
.next-grid { display: grid; gap: 8px; }
@media (min-width: 980px) { .next-grid { grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; } .next-grid .section-head { position: sticky; top: calc(var(--nav-h) + 40px); } }
.next-list { border-top: 1px solid var(--line); }
.next-list li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 24px 4px; border-bottom: 1px solid var(--line); }
.next-list .note-num { font-size: 1.625rem; padding-top: 2px; }
.next-list strong { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; }
.next-list p { margin-top: 6px; color: var(--ink-2); max-width: 56ch; }

/* ---------- Legal pages ---------- */
.legal { padding: calc(var(--nav-h) + clamp(36px, 6vw, 72px)) 0 clamp(80px, 10vw, 128px); }
.legal-grid { display: grid; gap: 32px; }
.legal-head h1 { font-size: clamp(2.4rem, 5.4vw, 3.8rem); font-weight: 800; letter-spacing: -0.045em; }
.legal-updated { margin-top: 12px; font-size: .9375rem; color: var(--ink-3); }
.legal-summary { margin-top: 24px; max-width: 68ch; padding: 18px 22px; border-radius: 16px; background: var(--surface); box-shadow: inset 3px 0 0 var(--copper), inset 0 0 0 1px var(--line); font-size: 1.0625rem; }
.legal-toc { align-self: start; padding: 18px 20px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.legal-toc p { margin-bottom: 8px; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.legal-toc ol { counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a { display: flex; align-items: center; gap: 10px; min-height: 36px; color: var(--ink-2); text-decoration: none; font-size: .9375rem; font-weight: 550; }
.legal-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-serif); font-style: italic; font-size: 1.0625rem; color: var(--copper-text); }
.legal-toc a:hover { color: var(--ink); }
.legal-body { max-width: 68ch; }
.legal-body h2 { margin: 48px 0 14px; font-size: 1.5rem; letter-spacing: -0.02em; scroll-margin-top: calc(var(--nav-h) + 24px); }
.legal-body > h2:first-child { margin-top: 0; }
.legal-body p + p, .legal-body ul + p, .legal-body p + ul { margin-top: 14px; }
.legal-body ul { list-style: disc; padding-left: 1.2em; }
.legal-body li + li { margin-top: 8px; }
.legal-body li::marker { color: var(--copper); }
.legal-body, .legal-body li { color: var(--ink-2); }
.legal-body strong { color: var(--ink); }
@media (min-width: 980px) {
  .legal-grid { grid-template-columns: 240px minmax(0, 68ch); column-gap: 80px; row-gap: 48px; }
  .legal-head { grid-column: 1 / -1; }
  .legal-toc { position: sticky; top: calc(var(--nav-h) + 32px); padding: 0; box-shadow: none; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .sub-title .line > span { animation: line-up 1100ms var(--ease-out) both; animation-delay: calc(var(--d, 0) * 110ms + 300ms); }
  .pass-stamp { animation: stamp 700ms var(--ease-spring) 1500ms both; }
  @media (pointer: coarse) { .pass { animation: float 7s var(--ease-in-out) infinite; } }
}
@keyframes stamp {
  0% { opacity: 0; transform: rotate(-4deg) scale(2.2); }
  60% { opacity: .95; }
  100% { opacity: .88; transform: rotate(-11deg) scale(1); }
}
@keyframes float { 0%, 100% { transform: rotateX(4deg) rotateY(-6deg); } 50% { transform: rotateX(-3deg) rotateY(5deg) translateY(-6px); } }

/* ---------- Kickstarter page ---------- */
.eb-strong { font-weight: 700; color: var(--ink); }
.ks-hero { padding-bottom: clamp(40px, 6vw, 72px); }
.ks-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: 30px; }

.ks-how { background: var(--paper); padding-top: clamp(40px, 6vw, 72px); }
.ks-steps { display: grid; gap: 16px; counter-reset: none; }
@media (min-width: 860px) { .ks-steps { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.ks-step {
  position: relative; padding: 28px 28px 30px; border-radius: var(--r-lg); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.ks-step:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line), 0 24px 40px -28px rgba(60,35,15,.4); }
.ks-step-num { position: absolute; right: 24px; top: 20px; font-family: var(--font-serif); font-style: italic; font-size: 2.4rem; line-height: 1; color: rgba(150, 73, 31, .35); }
.ks-step-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 14px; background: rgba(184, 107, 62, .12); color: var(--copper-text); }
.ks-step-icon .i { width: 24px; height: 24px; }
.ks-step h3, .ks-reasons h3 { font-size: 1.3125rem; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 10px; }
.ks-step p, .ks-reasons p { color: var(--ink-2); }
/* a line joins the steps on wide screens */
@media (min-width: 860px) {
  .ks-step + .ks-step::before { content: ""; position: absolute; left: -20px; top: 51px; width: 20px; height: 2px; background: var(--copper); opacity: .5; }
}

/* All-or-nothing demo */
.ks-demo-sec { background: var(--paper-2); }
.ks-demo-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .ks-demo-grid { grid-template-columns: .9fr 1.1fr; gap: 72px; } }
.ks-demo-copy h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.ks-demo {
  padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: linear-gradient(180deg, #F9F2E7 0%, #EFE4D3 100%);
  box-shadow: 0 30px 60px -40px rgba(60, 35, 15, .55), inset 0 2px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(150, 120, 90, .2);
  transition: box-shadow 500ms var(--ease-out);
}
.ks-demo.is-funded { box-shadow: 0 30px 70px -36px rgba(184, 107, 62, .7), inset 0 2px 0 rgba(255,255,255,.9), inset 0 0 0 1.5px rgba(184, 107, 62, .55); }
.ks-meter-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ks-meter-pct { font-size: clamp(3rem, 7vw, 4.4rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; transition: color var(--dur) var(--ease-out); }
.ks-demo.is-funded .ks-meter-pct { color: var(--copper-text); }
.ks-meter-lbl { font-weight: 600; color: var(--ink-2); }
.ks-track { position: relative; margin-top: 26px; }
.ks-goal { position: absolute; left: calc(16px + (100% - 32px) * .6667); top: -18px; bottom: -6px; width: 0; pointer-events: none; }
.ks-goal::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 0; border-left: 2px dashed var(--ink-2); }
.ks-goal span { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); font-size: .6875rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.ks-track .range { position: relative; }
.ks-scale { position: relative; height: 18px; margin-top: 4px; font-size: .75rem; font-weight: 650; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ks-scale span { position: absolute; transform: translateX(-50%); }
.ks-scale span:nth-child(1) { left: 16px; }
.ks-scale span:nth-child(2) { left: calc(16px + (100% - 32px) * .6667); }
.ks-scale span:nth-child(3) { left: calc(100% - 16px); }
.ks-outcome { margin-top: 26px; }
.ks-result {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; background: rgba(255, 254, 251, .8);
  box-shadow: inset 0 0 0 1px var(--line); transition: background-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.ks-result strong { display: block; font-size: 1.125rem; margin-bottom: 4px; }
.ks-result p { color: var(--ink-2); font-size: .9375rem; }
.ks-result-icon { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--paper-2); color: var(--ink-2); transition: background-color 400ms var(--ease-out), color 400ms, transform 500ms var(--ease-spring); }
.ks-result-icon .i { position: absolute; transition: opacity 250ms, transform 400ms var(--ease-spring); }
.ks-result-icon .i-yes { opacity: 0; transform: scale(.4); stroke-width: 2.6; }
.ks-result.is-close .ks-result-icon { background: rgba(184, 107, 62, .16); color: var(--copper-text); }
.ks-result.is-funded { background: #FFFEFB; box-shadow: inset 0 0 0 1.5px rgba(47, 107, 58, .45); }
.ks-result.is-funded strong { color: #2F6B3A; }
.ks-result.is-funded .ks-result-icon { background: #2F6B3A; color: #fff; transform: scale(1.08); }
.ks-result.is-funded .i-wait { opacity: 0; transform: scale(.4); }
.ks-result.is-funded .i-yes { opacity: 1; transform: none; }

/* Reasons */
.ks-why { background: var(--paper); }
.ks-reasons { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .ks-reasons { grid-template-columns: repeat(2, 1fr); column-gap: 56px; } }
.ks-reasons li { display: grid; grid-template-columns: 56px 1fr; column-gap: 8px; padding: 28px 4px; border-bottom: 1px solid var(--line); }
.ks-reasons h3, .ks-reasons p { grid-column: 2; }
.ks-r-num { grid-row: span 2; font-family: var(--font-serif); font-style: italic; font-size: 1.75rem; line-height: 1.1; color: var(--copper-text); }

/* Honest bit + timeline */
.ks-honest { background: var(--paper-2); }
.ks-honest-inner { display: grid; gap: 40px; align-items: start; }
@media (min-width: 980px) { .ks-honest-inner { grid-template-columns: 1fr 1fr; gap: 64px; } }
.ks-note-card { padding: clamp(26px, 4vw, 44px); border-radius: 28px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -48px rgba(60,35,15,.45); }
.ks-note-card h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.ks-note-card > p:not(.kicker) { margin-top: 16px; color: var(--ink-2); }
.road-steps { position: relative; display: grid; gap: 4px; padding-left: 4px; }
.road-steps::before { content: ""; position: absolute; left: 14px; top: 16px; bottom: 16px; width: 2px; background: linear-gradient(var(--copper) 0 14%, #2C2622 14%); border-radius: 2px; }
.road-steps li { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 18px; padding: 12px 0; }
.road-dot { position: relative; z-index: 1; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--paper-2); box-shadow: inset 0 0 0 2px #2C2622; }
.road-steps li.is-current .road-dot {
  background: radial-gradient(circle at 36% 30%, #FAD6B4 0%, #D8925F 24%, #A95B2F 58%, #6C3418 100%); box-shadow: 0 4px 8px rgba(50,25,8,.35);
}
.road-steps li.is-current .road-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(184, 107, 62, .6); }
@media (prefers-reduced-motion: no-preference) { .road-steps li.is-current .road-dot::after { animation: hs-ripple 2.6s var(--ease-out) infinite; } }
.road-steps strong { display: block; font-size: 1.125rem; }
.road-steps span:not(.road-dot) { display: block; margin-top: 2px; font-size: .9375rem; color: var(--ink-2); }

.final-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- 404 ---------- */
.nf { min-height: calc(100svh - 90px); display: flex; align-items: center; }
.nf > .container { width: 100%; }
.nf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }