/* ==========================================================================
   VNYX IT — homepage
   ========================================================================== */

/* ---------- Hero: the one 3D moment ---------- */
.hero3d {
  --hero-light: 0;
  --hero-fg: color-mix(in srgb, var(--ink) calc(var(--hero-light) * 100%), var(--night-text));
  --hero-muted: color-mix(in srgb, var(--graphite) calc(var(--hero-light) * 100%), var(--night-muted));
  height: 430vh;
  background: var(--night);
  color: var(--hero-fg);
}
.hero3d.is-lite { height: 360vh; }
.hero3d__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s var(--ease-out); }
.hero3d.is-drawn .hero3d__canvas { opacity: 1; }
/* Phone poster: the first 3D frame as a 4 KB still, replaced by the live scene once it has drawn */
.hero3d__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; pointer-events: none; transition: opacity 0.6s var(--ease-out); }
.hero3d.is-drawn .hero3d__poster, .hero3d.no-webgl .hero3d__poster { opacity: 0; }
@media (min-width: 768px) { .hero3d__poster { display: none; } }
/* Until the scene has drawn (or without JS), only the first sheet of copy shows; the scene drives the rest */
.hero3d:not(.is-drawn) .hero3d__step:not([data-step="0"]) { opacity: 0; visibility: hidden; }
.hero3d__fallback { position: absolute; inset: 0; display: none; }
.hero3d__fallback img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.hero3d__fallback::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--night) 20%, rgba(10,12,15,.3)); }

.hero3d__copy { position: absolute; inset: 0; display: grid; padding-top: var(--nav-h); pointer-events: none; }
.hero3d__step { grid-area: 1 / 1; align-self: center; max-width: 600px; pointer-events: auto; will-change: opacity, transform; }
.hero3d__step[data-step="1"] { max-width: 520px; }
.hero3d__step[data-step="2"] { align-self: end; margin-bottom: 120px; max-width: 470px; }
.hero3d__step .label { color: var(--hero-muted); }
.hero3d__step .lede { color: var(--hero-muted); margin-top: 1.4rem; }
.hero3d__step .display { color: var(--hero-fg); }
.hero3d__step .display em { color: var(--amber); }
.hero3d__step[data-step="2"] .h2 em { color: var(--cobalt); }
.hero3d__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero3d .btn--ghost { --b-fg: var(--hero-fg); --b-bd: color-mix(in srgb, var(--hero-fg) 30%, transparent); }
.hero3d__hint { margin-top: 2.2rem; display: inline-flex; align-items: center; gap: 0.7rem; color: var(--hero-muted); }
.hero3d__hint i { width: 1px; height: 34px; background: currentColor; position: relative; overflow: hidden; display: inline-block; }
.hero3d__hint i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--amber); animation: drip 1.8s var(--ease-in-out) infinite; }
@keyframes drip { to { top: 100%; } }

.plan-card {
  background: rgba(248, 246, 240, 0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--rule-strong); padding: 1.4rem 1.5rem; color: var(--ink); border-radius: var(--radius);
}
.plan-card .h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.plan-card p { color: var(--ink-2); margin-top: 0.8rem; }
.plan-card .btn--ghost { --b-fg: var(--ink); --b-bd: var(--rule-strong); }

.hero3d__hud {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--gutter) 22px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
  font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hero-muted);
  pointer-events: none;
}
.hero3d__phases { display: flex; gap: 1.6rem; }
.hero3d__phases span { display: inline-flex; align-items: center; gap: 0.5rem; opacity: 0.45; transition: opacity 0.4s, color 0.4s; }
.hero3d__phases span::before { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; transition: background 0.4s; }
.hero3d__phases span.is-on { opacity: 1; color: var(--hero-fg); }
.hero3d__phases span.is-on::before { background: currentColor; }
.hero3d__meter { flex: 1; max-width: 340px; height: 1px; background: color-mix(in srgb, var(--hero-fg) 18%, transparent); position: relative; margin-bottom: 4px; }
.hero3d__meter i { position: absolute; inset: 0; background: var(--hero-fg); transform-origin: 0 50%; transform: scaleX(0); }
.hero3d__sheetinfo { text-align: right; line-height: 1.6; }

.hero3d__callouts, .hero3d__labels { position: absolute; inset: 0; pointer-events: none; }
.callout { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.callout__dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--amber); box-shadow: 0 0 0 4px rgba(233,138,44,.15); }
.callout__dot::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--amber); }
.callout__line { position: absolute; left: 4px; top: -4px; width: 58px; height: 1px; background: rgba(236,233,225,.5); transform-origin: 0 0; transform: rotate(-38deg); }
.callout__tag {
  position: absolute; left: 48px; top: -64px; white-space: nowrap; display: grid; gap: 2px;
  font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--night-text);
  padding: 0.45rem 0.65rem; border: 1px solid rgba(236,233,225,.18); background: rgba(10,12,15,.72); border-radius: 2px;
}
.callout__tag small { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.callout--left .callout__line { left: auto; right: 4px; transform-origin: 100% 0; transform: rotate(38deg); }
.callout--left .callout__tag { left: auto; right: 48px; }

.room-label {
  position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 1px; opacity: 0; text-align: center;
  color: var(--ink); will-change: transform, opacity;
}
.room-label__no { font-family: var(--f-mono); font-size: 0.6875rem; color: var(--cobalt); letter-spacing: 0.12em; }
.room-label b { font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; background: var(--paper); padding: 0.1rem 0.4rem; }
.room-label small { font-size: 0.6875rem; color: var(--graphite); background: rgba(242,239,230,.8); padding: 0 0.3rem; }

/* Static (reduced motion) and no-WebGL modes */
.hero3d.is-static .room-label__no { color: var(--cobalt-ink); background: var(--paper); padding: 0 0.3rem; }
.hero3d.is-static .room-label small { color: var(--ink-2); background: var(--paper); }
.compare__tags .tag--rust { color: color-mix(in srgb, var(--rust) 75%, var(--ink)); }
.hero3d.is-static { height: auto; background: var(--paper); --hero-light: 1; }
.hero3d.is-static .hero3d__stage { position: relative; height: auto; display: grid; }
.hero3d.is-static .hero3d__canvas { position: relative; height: 62vh; order: 2; }
.hero3d.is-static .hero3d__copy { position: relative; display: grid; gap: 3rem; padding-block: calc(var(--nav-h) + 2rem) 2rem; }
.hero3d.is-static .hero3d__step { grid-area: auto; align-self: start; margin: 0; }
.hero3d.is-static .hero3d__step .display em { color: var(--cobalt); }
.hero3d.is-static .hero3d__hud, .hero3d.is-static .hero3d__callouts, .hero3d.is-static .hero3d__hint { display: none; }
.hero3d.no-webgl { height: auto; }
.hero3d.no-webgl .hero3d__stage { position: relative; height: 100svh; }
.hero3d.no-webgl .hero3d__fallback { display: block; }
.hero3d.no-webgl .hero3d__step:not([data-step="0"]), .hero3d.no-webgl .hero3d__hud { display: none; }

/* ---------- Sheet A-01: existing condition ---------- */
.existing { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.fig { grid-column: 1 / span 7; position: sticky; top: calc(var(--nav-h) + 2rem); }
.fig__frame { position: relative; border: 1px solid var(--rule-strong); padding: 10px; background: var(--card); }
.fig__frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(0.85) contrast(1.02); }
.fig__cap { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.7rem; }
.pin {
  position: absolute; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--rust); color: #fff; font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500;
  box-shadow: 0 0 0 5px rgba(177, 74, 22, 0.25); transform: translate(-50%, -50%);
  animation: pinpulse 2.6s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes pinpulse { 50% { box-shadow: 0 0 0 10px rgba(177, 74, 22, 0.06); } }
.notes { grid-column: 8 / span 5; }
.notes .label { margin-bottom: 1.1rem; }
.note { display: grid; grid-template-columns: 30px 1fr; gap: 0.9rem; padding: 1.05rem 0; border-top: 1px solid var(--rule); }
.note:last-child { border-bottom: 1px solid var(--rule); }
.note__no { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--rust); color: var(--rust); display: grid; place-items: center; font-family: var(--f-mono); font-size: 0.6875rem; }
.note b { display: block; font-weight: 600; line-height: 1.35; }
.note div > span { color: var(--graphite); font-size: 0.925rem; line-height: 1.55; display: block; margin-top: 0.25rem; }

/* ---------- Sheet A-02: the map (compare) ---------- */
.map-sheet { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.map-steps { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 0; }
.map-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--rule); }
.map-steps li:last-child { border-bottom: 1px solid var(--rule); }
.map-steps .num { font-size: 0.8rem; color: var(--cobalt); padding-top: 0.2rem; }
.map-steps b { display: block; font-weight: 600; }
.map-steps span { color: var(--graphite); font-size: 0.95rem; }

.compare { position: relative; border: 1px solid var(--rule-strong); background: var(--card); padding: 12px; box-shadow: 0 40px 80px -60px rgba(21,24,29,.6); }
.compare__view { position: relative; aspect-ratio: 16 / 11; overflow: hidden; --x: 52%; background: var(--paper); }
.compare__layer { position: absolute; inset: 0; }
.compare__layer svg { width: 100%; height: 100%; }
.compare__layer .cmp-mob { display: none; }
@media (max-width: 720px) {
  .compare { padding: 8px; margin-inline: calc(-1 * var(--gutter) + 6px); }
  .compare__view { aspect-ratio: 4 / 5; }
  .compare__layer .cmp-mob { display: block; }
  .compare__layer .cmp-desk { display: none; }
}
.compare__layer--after { clip-path: inset(0 0 0 var(--x)); }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 1px; background: var(--ink); pointer-events: none; }
.compare__handle::after {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper);
  font-family: var(--f-mono); font-size: 0.85rem; letter-spacing: -0.05em; box-shadow: 0 10px 24px -8px rgba(21,24,29,.6);
}
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.compare__range:focus-visible + .compare__handle::after { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.compare__tags { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; pointer-events: none; }
.compare__block { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule-strong); margin-top: 12px; }
.compare__block > div { padding: 0.8rem 0.9rem; border-right: 1px solid var(--rule); }
.compare__block > div:last-child { border-right: 0; }
.compare__block small { display: block; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); }
.compare__block b { font-family: var(--f-display); font-variation-settings: "opsz" 36; font-weight: 500; font-size: 1.2rem; }

/* ---------- Sheet A-03: schedule (horizontal) ---------- */
.schedule { height: 420vh; background: var(--night); color: var(--night-text); }
.schedule__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; padding-top: calc(var(--nav-h) + 1.5rem); }
.schedule__stage > * { min-width: 0; }
.schedule__track { width: max-content; }
.schedule__head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
.schedule__track { display: flex; gap: clamp(1rem, 2vw, 1.75rem); align-items: center; padding-inline: var(--gutter); will-change: transform; }
.step-card {
  flex: none; width: min(80vw, 470px); height: min(62vh, 560px); display: grid; grid-template-rows: auto 1fr auto;
  border: 1px solid var(--night-rule); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); border-radius: var(--radius); padding: 1.4rem; position: relative;
}
.step-card__top { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.step-card__no { font-family: var(--f-display); font-variation-settings: "opsz" 144; font-weight: 300; font-size: 3.4rem; line-height: 0.9; color: rgba(236,233,225,.18); }
.step-card h3 { font-family: var(--f-display); font-variation-settings: "opsz" 48; font-weight: 400; font-size: 1.6rem; line-height: 1.1; margin-top: 0.5rem; }
.step-card p { color: var(--night-muted); font-size: 0.95rem; margin-top: 0.6rem; }
.step-card__ui { margin: 1.1rem 0; border: 1px solid var(--night-rule); border-radius: 3px; background: var(--night-2); padding: 0.9rem; font-family: var(--f-mono); font-size: 0.72rem; color: var(--night-text); overflow: hidden; display: flex; flex-direction: column; gap: 0.5rem; justify-content: center; }
.ui-row { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.45rem 0.55rem; border: 1px solid var(--night-rule); border-radius: 2px; }
.ui-row--ok { border-color: rgba(59,178,115,.35); }
.ui-row .k { color: var(--night-muted); }
.ui-ok { color: #4FC487; } .ui-warn { color: var(--amber); } .ui-blue { color: #8C99FF; }
.ui-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.ui-bar i { display: block; height: 100%; background: #8C99FF; width: var(--w, 50%); }
.ui-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.ui-split > div { padding: 0.55rem; background: rgba(140,153,255,.12); border: 1px solid rgba(140,153,255,.3); }
.ui-split > div + div { background: transparent; border-style: dashed; }
.ui-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.ui-cal span { padding: 0.3rem 0; border-radius: 2px; color: var(--night-muted); }
.ui-cal span.we { color: var(--night-text); }
.ui-cal span.sel { background: #8C99FF; color: var(--night); font-weight: 500; }
.ui-btn { align-self: flex-end; padding: 0.45rem 0.8rem; background: #8C99FF; color: var(--night); border-radius: 2px; font-weight: 500; }
.ui-diff { padding: 0.5rem; border-left: 2px solid #4FC487; background: rgba(79,196,135,.08); }
.ui-diff--rm { border-color: var(--amber); background: rgba(233,138,44,.08); }
.step-card__foot { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.step-card__foot .tag { background: transparent; border-color: var(--night-rule); color: var(--night-muted); }
.schedule__foot { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem var(--gutter) 1.5rem; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--night-muted); }
.schedule__bar { flex: 1; max-width: 420px; height: 1px; background: var(--night-rule); margin-inline: 1.5rem; position: relative; }
.schedule__bar i { position: absolute; inset: 0; background: var(--night-text); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Sheet A-04: the rule ---------- */
.rule-diagram { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0; margin-top: 1rem; }
.rule-node { border: 1px solid var(--rule-strong); background: var(--card); padding: 1.6rem; border-radius: var(--radius); position: relative; }
.rule-node .label { margin-bottom: 1rem; }
.rule-node h3 { font-family: var(--f-display); font-variation-settings: "opsz" 72; font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); line-height: 1; }
.rule-node p { margin-top: 0.8rem; color: var(--ink-2); font-size: 0.95rem; }
.rule-node--you { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rule-node--you p { color: rgba(242,239,230,.75); }
.rule-node--you .label { color: rgba(242,239,230,.6); }
.rule-link { width: clamp(28px, 5vw, 80px); position: relative; align-self: center; height: 1px; }
.rule-link svg { position: absolute; left: 0; top: -8px; width: 100%; height: 16px; overflow: visible; }
.rule-link .flow { stroke-dasharray: 4 6; animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -20; } }
.never { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 2.5rem; }
.never > div { background: var(--paper); padding: 1.2rem 1.3rem; display: grid; grid-template-columns: 22px 1fr; gap: 0.8rem; }
.never svg { color: var(--rust); margin-top: 2px; }

/* ---------- Sheet A-05: keys ---------- */
.keys { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.envelope { position: relative; aspect-ratio: 4 / 3; max-width: 520px; justify-self: center; width: 100%; }
.envelope svg { width: 100%; height: 100%; overflow: visible; }
@media (max-width: 720px) {
  .envelope { margin-inline: calc(-1 * var(--gutter)); width: calc(100% + 2 * var(--gutter)); max-width: none; }
  .envelope .env-tag { display: none; }
  .envelope textPath { font-size: 13px; letter-spacing: 0.4px; }
}
.keys-list { display: grid; gap: 0; margin-top: 2rem; }
.keys-list > div { display: grid; grid-template-columns: 140px 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--rule); }
.keys-list > div:last-child { border-bottom: 1px solid var(--rule); }
.keys-list dt { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); padding-top: 0.25rem; }
.keys-list dd { margin: 0; }

/* ---------- Sheet A-06: fees ---------- */
.fees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule-strong); border: 1px solid var(--rule-strong); }
.fee { background: var(--paper); padding: clamp(1.4rem, 2.5vw, 2.2rem); display: flex; flex-direction: column; gap: 1rem; position: relative; transition: background 0.3s; }
.fee:hover { background: var(--card); }
.fee--featured { background: var(--card); }
.fee--featured::before { content: ""; position: absolute; inset: -1px; border: 2px solid var(--cobalt); pointer-events: none; }
.fee__price { font-family: var(--f-display); font-variation-settings: "opsz" 144, "SOFT" 30; font-weight: 350; font-size: clamp(2.6rem, 2rem + 2vw, 3.8rem); line-height: 1; letter-spacing: -0.03em; }
.fee__price small { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--graphite); margin-left: 0.4rem; }
.fee .checklist { font-size: 0.93rem; }
.fee .btn { margin-top: auto; }
/* Fee schedule rows (replace tier cards) */
.fees { display: block; background: none; border: 1px solid var(--rule-strong); }
.sched__head { display: grid; grid-template-columns: 1.1fr 1.4fr 0.8fr; gap: 2rem; padding: 0.8rem 1.6rem; background: var(--paper-2); border-bottom: 1px solid var(--rule-strong); font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); }
.sched__head span:last-child { text-align: right; }
.sched__row { display: grid; grid-template-columns: 1.1fr 1.4fr 0.8fr; gap: 2rem; padding: clamp(1.4rem, 2.5vw, 2rem) 1.6rem; border-top: 1px solid var(--rule); transition: background 0.3s; }
.sched__row:first-of-type { border-top: 0; }
.sched__row:hover { background: var(--card); }
.sched__scope .h3 { margin-top: 0.5rem; }
.sched__scope p { margin-top: 0.6rem; font-size: 0.95rem; }
.sched__spec { font-size: 0.93rem; align-self: center; }
.sched__fee { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; justify-content: center; }
.sched__fee .fee__price { font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3.2rem); }
@media (max-width: 900px) {
  .sched__head { display: none; }
  .sched__row { grid-template-columns: 1fr; gap: 1.1rem; }
  .sched__fee { text-align: left; align-items: flex-start; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; }
}
.monthly { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border: 1px solid var(--rule-strong); border-top: 0; }
.monthly > div { padding: clamp(1.4rem, 2.5vw, 2.2rem); }
.monthly > div + div { border-left: 1px solid var(--rule-strong); background: var(--card); }
.calc-out { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.calc-out b { font-family: var(--f-display); font-variation-settings: "opsz" 144; font-weight: 350; font-size: clamp(2.8rem, 2rem + 3vw, 4.4rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.calc-note { min-height: 1.5em; }
.split-ledger { display: grid; grid-template-columns: 1fr 1fr; margin-top: 1.2rem; border: 1px solid var(--rule-strong); }
.split-ledger > div { padding: 0.9rem 1rem; }
.split-ledger > div + div { border-left: 1px dashed var(--rule-strong); }

/* ---------- Sheet A-07: who + figure 2 ---------- */
.who { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1px; background: var(--rule-strong); border: 1px solid var(--rule-strong); }
.who a { background: var(--paper); padding: clamp(1.4rem, 2.5vw, 2.2rem); text-decoration: none; display: flex; flex-direction: column; gap: 0.9rem; min-height: 320px; transition: background 0.3s; position: relative; }
.who a:hover { background: var(--card); }
.who a:hover .link-arrow { gap: 0.8em; }
.who a .link-arrow { margin-top: auto; align-self: flex-start; }
.who__first { background: var(--ink) !important; color: var(--paper); }
.who__first .label, .who__first p { color: rgba(242,239,230,.72); }
.who__first .link-arrow { color: #AEB8FF; border-color: rgba(174,184,255,.4); }
.who h3 { font-family: var(--f-display); font-variation-settings: "opsz" 72; font-weight: 400; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem); line-height: 1.02; }
.who p { color: var(--ink-2); font-size: 0.95rem; }

.fig2 { position: relative; height: 110vh; overflow: hidden; background: var(--paper-2); }
.fig2 img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.fig2__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(242,239,230,1) 0%, rgba(242,239,230,0) 22%, rgba(242,239,230,0) 60%, rgba(21,24,29,.55) 100%); }
.fig2__copy { position: absolute; left: 0; right: 0; bottom: clamp(2rem, 6vw, 5rem); color: #fff; }
.fig2__copy .h2 { color: #fff; max-width: 15ch; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.fig2__copy .h2 em { color: #fff; }
.fig2__cap { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; color: rgba(255,255,255,.85); }
.fig2__ring { position: absolute; border: 1.5px solid #fff; border-radius: 50%; width: clamp(130px, 14vw, 220px); aspect-ratio: 1; left: 78%; top: 34%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.6s; }
.fig2__ring.is-placed { opacity: 1; }
.fig2__ring span { position: absolute; left: 100%; top: 0; margin-left: 12px; white-space: nowrap; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(21,24,29,.6); padding: 0.35rem 0.55rem; }

/* ---------- Sheet A-08: honesty ledger ---------- */
.ledger { border: 1px solid var(--rule-strong); }
.ledger__row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.ledger__row:first-child { border-top: 0; }
.ledger__row > div { padding: 1.2rem 1.4rem; display: grid; grid-template-columns: 22px 1fr; gap: 0.8rem; align-items: start; }
.ledger__row > div + div { border-left: 1px solid var(--rule); }
.ledger__head > div { padding-block: 0.8rem; background: var(--paper-2); }
.ledger__no { color: var(--graphite); text-decoration: line-through; text-decoration-color: rgba(177,74,22,.6); }
.ledger__no + * { }
.ledger svg { margin-top: 3px; }
.ledger .ok svg { color: var(--ok); }
.ledger .bad svg { color: var(--rust); }
.ledger b { font-weight: 600; }
.ledger small { display: block; color: var(--graphite); margin-top: 0.2rem; font-size: 0.875rem; line-height: 1.5; }

/* ---------- Founder letter ---------- */
.letter { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(2rem, 5vw, 5rem); }
.letter__paper { background: var(--card); border: 1px solid var(--rule); padding: clamp(1.6rem, 4vw, 3.2rem); position: relative; box-shadow: 0 30px 60px -50px rgba(21,24,29,.6); }
.letter__paper p { font-family: var(--f-display); font-variation-settings: "opsz" 24, "SOFT" 50; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.6; color: var(--ink-2); }
.letter__paper p + p { margin-top: 1rem; }
.letter__sig { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.letter__sig svg { width: 180px; height: 60px; color: var(--cobalt); }
.letter__paper .letter__sig p { font-family: var(--f-mono); font-size: var(--t-xs); line-height: 1.5; color: var(--graphite); margin-top: 0.2rem; }
.letter__sig b { font-family: var(--f-display); font-variation-settings: "opsz" 36; font-weight: 500; font-size: 1.2rem; }

/* ---------- Final CTA ---------- */
.final { text-align: left; }
.final__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.final .display { font-size: clamp(3rem, 2rem + 5.4vw, 7rem); }
.quick { display: grid; gap: 1rem; background: var(--night-2); border: 1px solid var(--night-rule); padding: 1.6rem; border-radius: var(--radius); }
.quick .field label { color: var(--night-text); }
.quick .field input { background: var(--night); color: var(--night-text); border-color: var(--night-rule); }
.quick .field .help { color: var(--night-muted); }
.quick__people { display: flex; justify-content: space-between; align-items: baseline; }
.quick__people b { font-family: var(--f-display); font-size: 2rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.quick input[type="range"].range::-webkit-slider-runnable-track { background: linear-gradient(90deg, #8C99FF var(--fill, 30%), rgba(236,233,225,.18) var(--fill, 30%)); }
.quick input[type="range"].range::-webkit-slider-thumb { background: var(--night); border-color: #8C99FF; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .fig { grid-column: 1 / -1; position: relative; top: auto; }
  .notes { grid-column: 1 / -1; }
  .map-sheet, .keys, .letter, .final__grid { grid-template-columns: 1fr; }
  .fees { grid-template-columns: 1fr; }
  .monthly { grid-template-columns: 1fr; }
  .monthly > div + div { border-left: 0; border-top: 1px solid var(--rule-strong); }
  .who { grid-template-columns: 1fr; }
  .who a { min-height: 0; }
  .rule-diagram { grid-template-columns: 1fr; }
  .rule-link { width: 1px; height: 36px; justify-self: center; }
  .rule-link svg { transform: rotate(90deg); left: -50px; top: 10px; width: 100px; }
  .never { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .schedule { height: auto; }
  .schedule__stage { position: relative; height: auto; display: block; padding-block: 5rem 3rem; }
  .schedule__track { flex-direction: column; transform: none !important; margin-top: 2.5rem; }
  .step-card { width: 100%; height: auto; }
  .schedule__foot { display: none; }
}
.hero3d.is-portrait .hero3d__stage::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 72%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,12,15,.92) 0%, rgba(10,12,15,.78) 60%, rgba(10,12,15,0) 100%);
  opacity: calc(1 - var(--hero-light));
}
.hero3d__copy, .hero3d__hud { z-index: 2; }
@media (max-width: 720px) {
  .hero3d__step[data-step="2"] { margin-bottom: 96px; }
  .hero3d__step[data-step="0"] .btn--ghost, .hero3d__hint { display: none; }
  .hero3d__step .lede { font-size: 1.05rem; }
  .hero3d__sheetinfo { display: none; }
  .hero3d__phases { gap: 0.9rem; font-size: 0.6875rem; }
  .hero3d__meter { display: none; }
  .hero3d__step .display { font-size: clamp(2.3rem, 9.5vw, 3rem); }
  .hero3d__step[data-step="0"] { align-self: start; margin-top: 1.5rem; }
  .hero3d__step[data-step="1"] { align-self: start; margin-top: 1.5rem; }
  .callout__tag { font-size: 0.6875rem; }
  .compare__block { grid-template-columns: 1fr 1fr; }
  .compare__block > div:nth-child(2) { border-right: 0; }
  .compare__block > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .ledger__row { grid-template-columns: 1fr; }
  .ledger__row > div + div { border-left: 0; border-top: 1px dashed var(--rule); }
  .ledger__head { display: none; }
  .keys-list > div { grid-template-columns: 1fr; gap: 0.3rem; }
  .fig2 { height: 80vh; }
  .fig2__ring { display: none; }
  .split-ledger { grid-template-columns: 1fr; }
  .split-ledger > div + div { border-left: 0; border-top: 1px dashed var(--rule-strong); }
}