/* Constra landing. Wet slate grounds, warm stone for the reading sections,
   clay as the one accent (one hue, two lightnesses: one per ground family). */

@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --sc-canvas: #141C24;
  --sc-surface: #1C2731;
  --sc-ink: #F4EFE7;
  --sc-ink-soft: #AEB6BD;
  --sc-accent: #E5925C;
  --sc-accent-ink: #17140F;
  --sc-font-display: "Satoshi", "Geist", system-ui, sans-serif;
  --sc-font-text: "Geist", system-ui, sans-serif;
  --sc-font-mono: "Geist Mono", ui-monospace, monospace;
  --sc-shadow-color: 210 40% 4%;

  --clay: #A4501F;
  --clay-deep: #8A4218;
  --sand: #F2C9A8;
  --stone: #F3F0EA;
  --stone-ink: #17140F;
  --stone-soft: #5E584F;
  --slate: #22303C;
  --line-dark: rgb(244 239 231 / 0.12);
  --r: 20px;
  --r-sm: 12px;
  --bar-h: 64px;
}

html { scroll-padding-top: 0; }
body { background: var(--sc-canvas); }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.skip { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--sand); color: var(--stone-ink); padding: 0.6rem 1rem; border-radius: var(--r-sm); text-decoration: none; }
.skip:focus { top: 1rem; }

/* ---------------------------------------------------------------- mark -- */
.mark { width: 24px; height: 18px; fill: currentColor; }
.mark__brick { fill: #D9733A; }

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 3rem; padding: 0 1.35rem; border-radius: 999px;
  font: 500 0.98rem/1 var(--sc-font-text); letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap;
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--clay { background: var(--clay); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 6px 18px -8px rgb(164 80 31 / 0.7); }
.btn--ghost { color: var(--sc-ink); background: rgb(20 28 36 / 0.32); border: 1px solid rgb(244 239 231 / 0.34); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn--sm { height: 2.5rem; padding: 0 1.05rem; font-size: 0.9rem; }
.btn--lg { height: 3.5rem; padding: 0 1.9rem; font-size: 1.05rem; }
@media (hover: hover) and (pointer: fine) {
  .btn--clay:hover { background: var(--clay-deep); }
  .btn--ghost:hover { border-color: rgb(244 239 231 / 0.7); }
}

.tag {
  display: inline-flex; align-items: center; height: 1.35rem; padding: 0 0.5rem; border-radius: 999px;
  font: 500 0.68rem/1 var(--sc-font-mono); letter-spacing: 0.04em; text-transform: uppercase;
  background: rgb(164 80 31 / 0.12); color: var(--clay); vertical-align: middle;
}
.tag--dark { background: rgb(242 201 168 / 0.12); color: var(--sand); }

/* ----------------------------------------------------------------- bar -- */
.bar {
  position: fixed; z-index: 70; inset: 14px var(--sc-gutter) auto;
  height: var(--bar-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__brand {
  justify-self: start; display: inline-flex; align-items: center; gap: 0.6rem; height: 2.75rem; padding: 0 1rem 0 0.85rem;
  border-radius: 999px; color: #FBF3EA; text-decoration: none;
  font: 700 1.15rem/1 var(--sc-font-display); letter-spacing: -0.02em;
  background: rgb(18 26 34 / 0.55); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgb(244 239 231 / 0.1);
}
.rail {
  position: relative; height: 2.75rem; padding: 0 0.4rem; border-radius: 999px;
  background: rgb(18 26 34 / 0.55); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgb(244 239 231 / 0.1);
}
.rail ol { position: relative; z-index: 1; display: flex; height: 100%; align-items: center; }
.rail a {
  display: block; padding: 0.55rem 0.8rem; color: rgb(244 239 231 / 0.66); text-decoration: none;
  font: 500 0.86rem/1 var(--sc-font-text); border-radius: 999px; transition: color 160ms var(--sc-ease-out);
}
.rail a[aria-current] { color: #FBF3EA; }
@media (hover: hover) and (pointer: fine) { .rail a:hover { color: #FBF3EA; } }
/* The active segment: one full-width fill clipped down to the current link,
   so moving between links animates the clip, never the box. */
.rail__mark {
  position: absolute; inset: 4px 0; z-index: 0; pointer-events: none;
  background: rgb(244 239 231 / 0.13); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1);
  clip-path: inset(0 100% 0 0 round 999px);
  transition: clip-path 420ms var(--sc-ease-out), background-color 240ms var(--sc-ease-out);
}
@media (prefers-reduced-motion: reduce) { .rail__mark { transition: none; } }
.bar__actions { justify-self: end; display: flex; align-items: center; gap: 0.35rem; padding: 0.25rem; border-radius: 999px;
  background: rgb(18 26 34 / 0.55); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgb(244 239 231 / 0.1); }
.bar__signin { color: rgb(244 239 231 / 0.8); text-decoration: none; font: 500 0.9rem/1 var(--sc-font-text); padding: 0 0.85rem; }
@media (hover: hover) and (pointer: fine) { .bar__signin:hover { color: #FBF3EA; } }
/* Over the stone sections the pills turn to paper so they read as chrome, not smudges. */
.bar--light :is(.bar__brand, .rail, .bar__actions) { background: rgb(255 253 249 / 0.78); border-color: rgb(23 20 15 / 0.08); box-shadow: 0 8px 24px -14px rgb(40 30 20 / 0.35); }
.bar--light .bar__brand { color: var(--stone-ink); }
.bar--light .rail a { color: rgb(23 20 15 / 0.6); }
.bar--light .rail a[aria-current] { color: var(--stone-ink); }
.bar--light .rail__mark { background: rgb(23 20 15 / 0.07); box-shadow: none; }
.bar--light .bar__signin { color: rgb(23 20 15 / 0.72); }
.bar :is(.bar__brand, .rail, .bar__actions) { transition: background-color 240ms var(--sc-ease-out), border-color 240ms var(--sc-ease-out); }
@media (max-width: 1080px) { .rail { display: none; } .bar { grid-template-columns: 1fr auto; } }
@media (max-width: 520px) { .bar__signin { display: none; } .bar { inset-inline: 12px; } }

/* ---------------------------------------------------------------- hero -- */
.hero__stage {
  background: linear-gradient(180deg, #14335F 0%, #1D4A88 22%, #1F4F8F 34%);
  --mx: 0; --my: 0;
}
.plane {
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, 177.2svh); height: auto; max-width: none;
  translate: -50% -29%;
  will-change: transform;
  user-select: none; pointer-events: none;
}
.plane--sky { z-index: 1; transform-origin: 50% 60%; -webkit-mask: linear-gradient(to bottom, transparent 0, #000 14%); mask: linear-gradient(to bottom, transparent 0, #000 14%); }
.hero__glow {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(60% 30% at 82% 62%, rgb(255 150 90 / 0.18), transparent 70%);
  opacity: calc(0.6 + var(--sc-p, 0) * 0.4);
}
.hero__copy {
  position: absolute; z-index: 3; left: 50%; top: calc(var(--bar-h) + clamp(2.5rem, 7vh, 5.5rem));
  width: min(62rem, 100% - 2 * var(--sc-gutter)); translate: -50% 0;
  text-align: center; display: grid; justify-items: center; gap: 1.2rem;
  will-change: transform, opacity;
}
.hero__title {
  font: 700 clamp(2.5rem, 1.2rem + 4.2vw, 5.1rem)/0.98 var(--sc-font-display);
  letter-spacing: -0.04em; color: #FBF6EE; text-wrap: balance;
  text-shadow: 0 2px 24px rgb(10 24 48 / 0.35);
}
.hero__title em { font-style: normal; color: var(--sand); }
.hero__sub { max-width: 40ch; color: rgb(244 239 231 / 0.86); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem); line-height: 1.55; text-wrap: pretty; }
.hero__ctas { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; margin-top: 0.4rem; }
.plane--ground { z-index: 4; transform-origin: 50% 74%; }
.plane--fg-l { z-index: 5; transform-origin: 0% 100%; }
.plane--fg-r { z-index: 5; transform-origin: 100% 100%; }
.hero__note { position: absolute; z-index: 6; right: max(var(--sc-gutter), 6vw); top: 52%; width: 19rem; opacity: 0; }
.hero__floor { position: absolute; inset: auto 0 0; height: 16%; z-index: 7; background: linear-gradient(to top, #16202A, transparent); pointer-events: none; }

.note {
  padding: 0.95rem 1rem 1rem; border-radius: 22px; color: #fff;
  background: rgb(255 255 255 / 0.14); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.2);
  box-shadow: 0 24px 48px -20px rgb(0 0 0 / 0.65), inset 0 1px 0 rgb(255 255 255 / 0.18);
}
.note__head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: rgb(255 255 255 / 0.85); font-weight: 500; }
.note__icon { width: 20px; height: 20px; border-radius: 6px; background: var(--slate); display: grid; place-items: center; }
.note__icon svg { width: 11px; height: 8px; fill: #FBF3EA; }
.note__when { margin-left: auto; color: rgb(255 255 255 / 0.6); }
.note__title { margin-top: 0.6rem; font: 700 1.05rem/1.2 var(--sc-font-display); letter-spacing: -0.01em; }
.note__body { margin-top: 0.25rem; font-size: 0.82rem; color: rgb(255 255 255 / 0.74); }
.note__bar { margin-top: 0.75rem; height: 6px; border-radius: 6px; background: rgb(255 255 255 / 0.2); overflow: hidden; }
.note__bar span { display: block; height: 100%; width: 100%; background: var(--sand); transform-origin: 0 50%; transform: scaleX(var(--w)); border-radius: 6px; }

@media (prefers-reduced-motion: no-preference) {
  .plane--sky { transform: translate3d(calc(var(--mx) * -6px), calc(var(--my) * -4px + var(--sc-p) * -2vh), 0) scale(calc(1 + var(--sc-p) * 0.05)); }
  .plane--ground { transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -8px + var(--sc-p) * -3vh), 0) scale(calc(1 + var(--sc-p) * 0.2)); }
  .plane--fg-l { transform: translate3d(calc(var(--mx) * -30px + var(--sc-p) * -9vw), calc(var(--my) * -14px + var(--sc-p) * 7vh), 0) scale(calc(1 + var(--sc-p) * 0.4)); }
  .plane--fg-r { transform: translate3d(calc(var(--mx) * -30px + var(--sc-p) * 9vw), calc(var(--my) * -14px + var(--sc-p) * 7vh), 0) scale(calc(1 + var(--sc-p) * 0.4)); }
  .hero__copy { transform: translate3d(0, calc(var(--sc-p) * 14vh), 0) scale(calc(1 - var(--sc-p) * 0.06)); opacity: clamp(0, (0.72 - var(--sc-p)) / 0.36, 1); }
  .hero__note { opacity: clamp(0, (var(--sc-p) - 0.34) / 0.22, 1); transform: translate3d(calc(var(--mx) * -22px), calc((1 - clamp(0, (var(--sc-p) - 0.34) / 0.3, 1)) * 48px + var(--my) * -10px), 0); }
}
@media (prefers-reduced-motion: reduce) { .hero__note { opacity: 1; } }

@media (max-width: 860px) {
  .plane { width: 212vw; top: auto; bottom: 0; translate: -50% 6%; }
  .hero__copy { top: calc(var(--bar-h) + 2rem); gap: 1rem; }
  .hero__title { font-size: clamp(2.15rem, 1.2rem + 4.6vw, 3rem); }
  .hero__sub { font-size: 1rem; max-width: 32ch; }
  .hero__note { right: auto; left: var(--sc-gutter); top: auto; bottom: 30svh; width: min(17rem, 78vw); }
  @media (prefers-reduced-motion: no-preference) {
    .plane--ground { transform: translate3d(0, calc(var(--sc-p) * -4svh), 0) scale(calc(1 + var(--sc-p) * 0.16)); }
    .plane--fg-l { transform: translate3d(calc(var(--sc-p) * -14vw), calc(var(--sc-p) * 4svh), 0) scale(calc(1 + var(--sc-p) * 0.3)); }
    .plane--fg-r { transform: translate3d(calc(var(--sc-p) * 14vw), calc(var(--sc-p) * 4svh), 0) scale(calc(1 + var(--sc-p) * 0.3)); }
    .hero__copy { transform: translate3d(0, calc(var(--sc-p) * -6svh), 0); opacity: clamp(0, (0.6 - var(--sc-p)) / 0.3, 1); }
    .hero__note { transform: translate3d(0, calc((1 - clamp(0, (var(--sc-p) - 0.34) / 0.3, 1)) * 40px), 0); }
  }
}
@media (max-width: 860px) and (max-height: 700px) { .hero__sub { display: none; } }

/* -------------------------------------------------------------- ledger -- */
.ledger__stage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center;
  gap: clamp(2rem, 6vw, 7rem); padding: calc(var(--bar-h) + 2rem) var(--sc-gutter) 2rem;
}
.ledger__copy { display: grid; }
.ledger__copy > * { grid-area: 1 / 1; align-self: center; }
.ledger__line { font: 500 clamp(1.6rem, 1rem + 1.9vw, 2.7rem)/1.14 var(--sc-font-display); letter-spacing: -0.025em; color: var(--sc-ink); max-width: 18ch; text-wrap: balance; }
.ledger__turn { font: 700 clamp(2rem, 1.1rem + 2.8vw, 3.6rem)/1.02 var(--sc-font-display); letter-spacing: -0.035em; max-width: 14ch; text-wrap: balance; color: #FBF6EE; }

.desk { position: relative; width: min(100%, 34rem); height: min(38rem, 72svh); justify-self: center; }
.book {
  position: absolute; inset: 9% 13% auto; padding: 1.15rem 1.15rem 1rem;
  border-radius: var(--r); background: #F6F2EB; color: var(--stone-ink);
  box-shadow: 0 2px 4px rgb(5 10 16 / 0.2), 0 30px 60px -24px rgb(5 10 16 / 0.7), inset 0 1px 0 #fff;
}
.book__head { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 0.2rem 0.9rem; border-bottom: 1px solid #E5E0D7; }
.book__kicker { font: 500 0.85rem/1 var(--sc-font-text); color: var(--stone-soft); display: flex; gap: 0.5rem; align-items: center; }
.book__total { margin-top: 0.55rem; font: 700 clamp(2rem, 1.5rem + 1.4vw, 2.7rem)/1 var(--sc-font-display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.book__sub { margin-top: 0.3rem; font-size: 0.8rem; color: var(--stone-soft); }
.book__count { font: 400 0.75rem/1 var(--sc-font-mono); color: var(--stone-soft); padding-top: 0.2rem; font-variant-numeric: tabular-nums; }
.book__rows { display: grid; gap: 0.4rem; padding-top: 0.8rem; }
.slot { height: 3.1rem; border-radius: var(--r-sm); border: 1px dashed #DCD5CA; }

.scrap { position: absolute; left: 0; top: 0; z-index: 2; --t: 0; will-change: transform; }
.scrap__raw, .scrap__row { position: absolute; left: 0; top: 0; }
.scrap__raw { opacity: clamp(0, 1 - var(--t) * 1.8, 1); width: max-content; max-width: 15.5rem; box-shadow: 0 2px 4px rgb(0 0 0 / 0.18), 0 14px 30px -12px rgb(0 0 0 / 0.55); font-size: 0.86rem; line-height: 1.35; }
.scrap__row {
  inset: 0; opacity: clamp(0, var(--t) * 1.8 - 0.8, 1);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.65rem;
  padding: 0 0.75rem; border-radius: var(--r-sm); background: #fff; color: var(--stone-ink);
  box-shadow: 0 0 0 1px #E8E2D8;
  font-size: 0.86rem;
}
.row__k { font: 500 0.64rem/1 var(--sc-font-mono); letter-spacing: 0.05em; text-transform: uppercase; padding: 0.32rem 0.45rem; border-radius: 6px; background: #EFEBE4; color: var(--stone-soft); }
.row__k--adv { background: #F6E3D6; color: var(--clay); }
.row__k--paid { background: #DDF2E6; color: #0F7A47; }
.row__k--upd { background: #E2E8EE; color: var(--slate); }
.row__k--task { background: #F5EDCF; color: #6E5300; }
.row__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__a { font-weight: 500; font-variant-numeric: tabular-nums; }

.raw-chat { padding: 0.6rem 0.8rem 0.5rem; border-radius: 14px 14px 14px 4px; background: #DCF8C6; color: #14240E; }
.raw-chat b { display: block; font-size: 0.72rem; color: #2F6E2A; margin-bottom: 0.15rem; }
.raw-chat time { display: block; text-align: right; font-size: 0.66rem; color: #5B7451; }
.raw-bill { padding: 0.75rem 0.85rem; background: #FFFDF5; color: #2B2620; font-family: var(--sc-font-mono); font-size: 0.74rem; border-radius: 3px; background-image: repeating-linear-gradient(transparent 0 19px, #EEE6D3 19px 20px); }
.raw-bill b { display: block; letter-spacing: 0.08em; margin-bottom: 0.3rem; }
.raw-bill span { display: block; text-align: right; font-weight: 700; margin-top: 0.3rem; }
.raw-note { padding: 0.8rem 0.9rem; background: #F7E27A; color: #3A3007; font: 500 0.95rem/1.3 var(--sc-font-display); border-radius: 2px; }
.raw-upi { display: flex; gap: 0.6rem; align-items: center; padding: 0.7rem 0.9rem; background: #fff; color: #17140F; border-radius: 14px; }
.raw-upi i { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: #0F7A47; color: #fff; font-style: normal; font-size: 0.8rem; }
.raw-upi span { font-weight: 500; } .raw-upi small { display: block; font-weight: 400; color: #5E584F; font-size: 0.74rem; }
.raw-photo { padding: 0.35rem 0.35rem 0.5rem; background: #fff; border-radius: 6px; color: #5E584F; font: 400 0.68rem/1 var(--sc-font-mono); }
.raw-photo img { width: 8.5rem; height: 6rem; object-fit: cover; border-radius: 3px; margin-bottom: 0.4rem; }
.raw-voice { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.85rem; border-radius: 999px; background: #DCF8C6; color: #2F6E2A; font: 500 0.78rem/1 var(--sc-font-mono); }
.raw-voice i { width: 0; height: 0; border-left: 9px solid #2F6E2A; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.raw-voice .wave { width: 6.5rem; height: 16px; background: repeating-linear-gradient(90deg, #4E8E46 0 2px, transparent 2px 5px); -webkit-mask: linear-gradient(90deg, #000 0 30%, rgb(0 0 0 / 0.5) 30% 100%); mask: radial-gradient(ellipse 60% 50% at 40% 50%, #000 50%, rgb(0 0 0 / 0.45)); }

@media (max-width: 860px) {
  .ledger__stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; gap: 1.25rem; padding-top: calc(var(--bar-h) + 1.75rem); }
  .ledger__copy { min-height: 8.5rem; }
  .ledger__line { font-size: 1.45rem; max-width: 22ch; }
  .ledger__turn { font-size: 1.9rem; max-width: 16ch; }
  .desk { width: 100%; height: 100%; max-height: 32rem; }
  .book { inset: 4% 0 auto; padding: 0.9rem 0.85rem 0.8rem; }
  .slot { height: 2.6rem; }
  .scrap__raw { font-size: 0.78rem; max-width: 12.5rem; }
  .scrap__row { font-size: 0.76rem; gap: 0.45rem; padding: 0 0.55rem; }
  .raw-photo img { width: 6.5rem; height: 4.6rem; }
}

/* -------------------------------------------------------------- breath -- */
.breath { padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 3.5rem); }
.breath__line { max-width: 30ch; font: 500 clamp(1.35rem, 1rem + 1.1vw, 2rem)/1.25 var(--sc-font-display); letter-spacing: -0.02em; color: var(--sc-ink-soft); text-wrap: balance; }

/* --------------------------------------------------------------- build -- */
.build__stage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem); gap: clamp(0.75rem, 1.4vw, 1.25rem);
  padding: calc(var(--bar-h) + 1.75rem) clamp(0.75rem, 2vw, 1.75rem) clamp(0.75rem, 2vw, 1.75rem);
}
.build__photo { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; background: #1F4F8F; isolation: isolate; }
.bp { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.bp:not([data-k="0"]) { clip-path: inset(100% 0 0 0); }
@media (prefers-reduced-motion: reduce) { .bp:not([data-k="0"]) { clip-path: none; opacity: 0; } }
.build__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top right, rgb(9 14 20 / 0.86) 0%, rgb(9 14 20 / 0.5) 26%, transparent 50%); }
.build__day { position: absolute; z-index: 3; left: clamp(1rem, 2.5vw, 2.25rem); bottom: clamp(1rem, 2.5vw, 2rem); display: grid; color: #FBF6EE; }
.build__daylabel { font: 500 0.8rem/1 var(--sc-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sand); }
.build__daynum { font: 700 clamp(4.5rem, 2rem + 8vw, 9.5rem)/0.9 var(--sc-font-display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; margin: 0.15em 0 0.08em -0.04em; }
.build__phase { font: 500 clamp(1rem, 0.9rem + 0.4vw, 1.25rem)/1.2 var(--sc-font-display); color: rgb(251 246 238 / 0.92); }
.build__ticks { position: absolute; z-index: 3; top: 1.1rem; left: 1.1rem; display: flex; gap: 5px; }
.build__ticks i { width: 22px; height: 4px; border-radius: 4px; background: rgb(255 255 255 / 0.3); transition: background-color 240ms var(--sc-ease-out); }
.build__ticks i.on { background: var(--sand); }

.log {
  display: flex; flex-direction: column; min-height: 0; border-radius: var(--r); padding: 1.25rem 1.2rem 0;
  background: #1A242E; border: 1px solid var(--line-dark); box-shadow: var(--sc-edge), var(--sc-e2); overflow: hidden;
}
.log__top { display: flex; align-items: center; justify-content: space-between; }
.log__title { font: 700 1.25rem/1 var(--sc-font-display); letter-spacing: -0.02em; }
.log__budget { margin-top: 1.1rem; padding: 1rem; border-radius: 16px; background: var(--slate); }
.log__spent { font: 700 1.75rem/1 var(--sc-font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.log__spent small { font: 400 0.85rem/1 var(--sc-font-text); color: var(--sc-ink-soft); letter-spacing: 0; }
.log__bar { margin-top: 0.8rem; height: 6px; border-radius: 6px; background: rgb(255 255 255 / 0.14); overflow: hidden; }
.log__bar span { display: block; height: 100%; background: var(--sand); transform-origin: 0 50%; transform: scaleX(0.01); border-radius: 6px; }
.log__phases { margin-top: 0.7rem; font-size: 0.8rem; color: var(--sc-ink-soft); }
.log__feed {
  flex: 1; min-height: 0; margin-top: 1rem; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.5rem; overflow: hidden;
  -webkit-mask: linear-gradient(to bottom, #000 70%, transparent); mask: linear-gradient(to bottom, #000 70%, transparent);
}
.entry {
  display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.75rem; padding: 0.8rem 0.9rem; border-radius: 14px;
  background: rgb(255 255 255 / 0.04); border: 1px solid var(--line-dark);
  opacity: 0; transform: translateY(-10px) scale(0.98); transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out);
  display: none;
}
.entry.is-on { display: grid; opacity: 1; transform: none; animation: entryIn 380ms var(--sc-ease-out) both; }
@keyframes entryIn { from { opacity: 0; transform: translateY(-10px) scale(0.98); } }
.entry__day { grid-column: 1; font: 400 0.72rem/1 var(--sc-font-mono); color: var(--sand); letter-spacing: 0.04em; }
.entry__t { grid-column: 1; font: 500 0.98rem/1.25 var(--sc-font-display); }
.entry__m { grid-column: 1; font-size: 0.78rem; color: var(--sc-ink-soft); }
.entry__a { grid-column: 2; grid-row: 1 / span 3; align-self: center; font: 500 0.9rem/1 var(--sc-font-text); font-variant-numeric: tabular-nums; }
.entry:first-child { border-color: rgb(242 201 168 / 0.35); background: rgb(242 201 168 / 0.07); }
@media (prefers-reduced-motion: reduce) { .entry.is-on { animation: none; } }

@media (max-width: 860px) {
  .build__stage { grid-template-columns: 1fr; grid-template-rows: 54fr 46fr; padding: calc(var(--bar-h) + 1.25rem) 0.75rem 0.75rem; gap: 0.6rem; }
  .bp { object-position: 50% 64%; }
  .build__daynum { font-size: clamp(3.6rem, 16vw, 5rem); }
  .log { padding: 0.9rem 0.9rem 0; }
  .log__budget { margin-top: 0.7rem; padding: 0.75rem 0.85rem; }
  .log__spent { font-size: 1.35rem; }
  .log__phases { display: none; }
  .log__feed { margin-top: 0.6rem; gap: 0.4rem; }
  .entry { padding: 0.6rem 0.75rem; }
  .entry__t { font-size: 0.9rem; }
}

/* ------------------------------------------------------------- toolkit -- */
.toolkit {
  --sc-ink: var(--stone-ink); --sc-ink-soft: var(--stone-soft); --sc-accent: var(--clay); --sc-accent-ink: #fff;
  color: var(--sc-ink); background: var(--stone); position: relative; z-index: 2;
  padding: var(--sc-section) 0;
  border-radius: 28px 28px 0 0; margin-top: -1px;
}
.toolkit__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 3vw, 3rem); row-gap: clamp(2.5rem, 5vw, 4rem); }
.toolkit__intro { grid-column: 1 / span 7; }
.toolkit__title { font: 700 clamp(2.2rem, 1.3rem + 2.8vw, 4rem)/1.02 var(--sc-font-display); letter-spacing: -0.035em; text-wrap: balance; max-width: 16ch; }
.toolkit__lede { margin-top: 1.25rem; max-width: 46ch; color: var(--stone-soft); font-size: var(--sc-t-lg); line-height: 1.5; text-wrap: pretty; }
.feats { grid-column: 1 / span 7; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 3vw, 2.5rem); }
.feats li { padding: 1.35rem 0 1.6rem; border-top: 1px solid #DCD5CA; }
.feats h3 { font: 700 1.2rem/1.2 var(--sc-font-display); letter-spacing: -0.015em; }
.feats h3::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--clay); margin-right: 0.6rem; vertical-align: 0.12em; }
.feats p { margin-top: 0.5rem; color: var(--stone-soft); line-height: 1.55; max-width: 36ch; }
.toolkit__media { grid-column: 9 / span 4; grid-row: 1 / span 2; position: relative; align-self: start; }
.toolkit__photo { aspect-ratio: 4 / 5.2; border-radius: var(--r); overflow: hidden; background: #2b2a26; box-shadow: 0 30px 60px -30px rgb(40 30 20 / 0.5); }
.toolkit__photo img { width: 100%; height: 118%; object-fit: cover; margin-top: -9%; }
.acct {
  position: absolute; left: -22%; bottom: -2.5rem; width: min(19rem, 110%);
  padding: 1rem 1.1rem 0.9rem; border-radius: 18px; background: #fff; color: var(--stone-ink);
  box-shadow: 0 2px 4px rgb(40 30 20 / 0.08), 0 24px 50px -18px rgb(40 30 20 / 0.45);
}
.acct__head { display: flex; justify-content: space-between; align-items: center; font: 700 0.98rem/1 var(--sc-font-display); }
.acct dl { margin: 0.75rem 0 0; display: grid; gap: 0.45rem; }
.acct dl > div { display: flex; justify-content: space-between; font-size: 0.88rem; }
.acct dt { color: var(--stone-soft); } .acct dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; }
.acct__sum { padding-top: 0.55rem; border-top: 1px solid #E5E0D7; }
.acct__sum dt { color: var(--stone-ink); font-weight: 500; } .acct__sum dd { color: var(--clay); font: 700 1.05rem/1 var(--sc-font-display); }
@media (max-width: 960px) {
  .toolkit__intro, .feats { grid-column: 1 / -1; }
  .toolkit__media { grid-column: 1 / -1; grid-row: auto; max-width: 30rem; margin-bottom: 2.5rem; }
  .acct { left: auto; right: -0.5rem; }
}
@media (max-width: 620px) { .feats { grid-template-columns: 1fr; } .acct { right: 0; bottom: -2rem; width: 85%; } }

/* -------------------------------------------------------------- people -- */
.people__stage { display: flex; align-items: center; padding-top: var(--bar-h); }
.people__rail { gap: clamp(1rem, 2vw, 1.75rem); padding: 0 var(--sc-gutter); align-items: stretch; height: min(36rem, 74svh); }
.person { flex: 0 0 clamp(17rem, 26vw, 23rem); display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: #1C2731; border: 1px solid var(--line-dark); box-shadow: var(--sc-edge), var(--sc-e2); }
.person__photo { width: 100%; height: 48%; object-fit: cover; }
.person__body { padding: 1.25rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.person h3 { font: 700 1.6rem/1 var(--sc-font-display); letter-spacing: -0.03em; }
.person p { color: var(--sc-ink-soft); line-height: 1.5; }
.mini { margin-top: auto; display: grid; padding: 0.75rem 0.85rem; border-radius: 14px; background: var(--slate); }
.mini span { font-size: 0.74rem; color: var(--sc-ink-soft); }
.mini b { font: 700 1.05rem/1.3 var(--sc-font-display); font-variant-numeric: tabular-nums; }
.mini em { font-style: normal; font-size: 0.78rem; color: var(--sand); }
.person--intro, .person--end { background: none; border: 0; box-shadow: none; justify-content: center; gap: 1.2rem; }
.person--intro { flex-basis: clamp(18rem, 34vw, 30rem); }
.people__title { font: 700 clamp(2rem, 1.2rem + 2.4vw, 3.4rem)/1.02 var(--sc-font-display); letter-spacing: -0.035em; text-wrap: balance; }
.person--intro p { max-width: 34ch; font-size: var(--sc-t-lg); line-height: 1.45; }
.person--end { flex-basis: clamp(16rem, 24vw, 21rem); align-items: flex-start; padding-right: 2rem; }
.people__end { font: 500 clamp(1.4rem, 1rem + 1vw, 2rem)/1.15 var(--sc-font-display); letter-spacing: -0.02em; color: var(--sc-ink) !important; }
@media (prefers-reduced-motion: no-preference) {
  .people .person:not(.person--intro) { opacity: clamp(0.55, var(--sc-p) * 4 + 0.2, 1); }
}
@media (max-width: 860px) {
  .people__rail { height: min(32rem, 76svh); }
  .person { flex-basis: 78vw; }
  .person--intro { flex-basis: 84vw; }
}

/* ----------------------------------------------------------------- faq -- */
.faq {
  --sc-ink: var(--stone-ink); --sc-ink-soft: var(--stone-soft); --sc-accent: var(--clay); --sc-accent-ink: #fff;
  color: var(--sc-ink); background: var(--stone); position: relative; z-index: 2;
  padding: var(--sc-section) 0; border-radius: 28px 28px 0 0;
}
.faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); }
.faq__title { font: 700 clamp(2rem, 1.2rem + 2.2vw, 3.2rem)/1.04 var(--sc-font-display); letter-spacing: -0.035em; text-wrap: balance; max-width: 14ch; }
.faq__aside { margin-top: 1.25rem; color: var(--stone-soft); }
.faq__aside a { color: var(--clay); font-weight: 500; }
.faq__list details { border-top: 1px solid #DCD5CA; }
.faq__list details:last-child { border-bottom: 1px solid #DCD5CA; }
.faq__list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.25rem 0; font: 500 clamp(1.05rem, 1rem + 0.3vw, 1.25rem)/1.3 var(--sc-font-display); letter-spacing: -0.01em;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: "+"; flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: #EAE5DC; font: 400 1.2rem/1 var(--sc-font-text); transition: transform 200ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out); }
.faq__list details[open] summary::after { transform: rotate(45deg); background: #F6E3D6; color: var(--clay); }
.faq__list details p { padding: 0 3rem 1.35rem 0; color: var(--stone-soft); line-height: 1.6; max-width: 60ch; }
@media (max-width: 860px) { .faq__grid { grid-template-columns: 1fr; } .faq__list details p { padding-right: 0; } }

/* --------------------------------------------------------------- close -- */
.close__stage { background: #0E141A; }
.close__iris { position: absolute; inset: 0; clip-path: circle(5% at 50.6% 66%); }
@media (prefers-reduced-motion: reduce) { .close__iris { clip-path: none; } }
.close__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.close__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top right, rgb(10 15 21 / 0.92) 0%, rgb(10 15 21 / 0.7) 26%, rgb(10 15 21 / 0.2) 48%, transparent 64%); }
.close__copy { position: absolute; z-index: 2; left: var(--sc-gutter); bottom: clamp(5rem, 13vh, 8rem); max-width: min(40rem, 90vw); display: grid; gap: 1.1rem; }
.close__title { font: 700 clamp(2.4rem, 1.3rem + 3.6vw, 4.8rem)/0.98 var(--sc-font-display); letter-spacing: -0.04em; text-wrap: balance; color: #FBF6EE; }
.close__sub { max-width: 40ch; color: rgb(244 239 231 / 0.84); font-size: var(--sc-t-lg); line-height: 1.45; }
.close__docs { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.close__docs li { height: 2rem; padding: 0 0.8rem 0 0.65rem; display: inline-flex; align-items: center; gap: 0.4rem; border-radius: 999px; background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.16); font-size: 0.85rem; }
.close__docs li::before { content: ""; width: 0.7rem; height: 0.38rem; border-left: 2px solid var(--sand); border-bottom: 2px solid var(--sand); transform: rotate(-45deg) translateY(-2px); }
.close__ctas { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }
.close__hint { color: rgb(244 239 231 / 0.66); font-size: 0.88rem; }
.foot {
  position: absolute; z-index: 2; inset: auto var(--sc-gutter) 1.1rem; display: flex; gap: 1.25rem; flex-wrap: wrap;
  font-size: 0.8rem; color: rgb(244 239 231 / 0.6); padding-top: 0.9rem; border-top: 1px solid rgb(244 239 231 / 0.12);
}
.foot span { margin-right: auto; }
.foot a { color: rgb(244 239 231 / 0.75); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: #FBF6EE; text-decoration: underline; } }
@media (max-width: 860px) {
  .close__iris { inset: 0 0 auto; height: 60svh; -webkit-mask: linear-gradient(to bottom, #000 72%, transparent); mask: linear-gradient(to bottom, #000 72%, transparent); }
  .close__img { object-position: 50% 58%; }
  .close__scrim { background: linear-gradient(to top, rgb(10 15 21 / 0.96) 0%, rgb(10 15 21 / 0.8) 42%, transparent 60%); }
  .close__copy { bottom: 5.5rem; right: var(--sc-gutter); }
  .close__title { font-size: 2.4rem; }
  .close__sub { font-size: 1rem; }
  .foot { gap: 0.9rem; font-size: 0.74rem; }
  .foot span { flex-basis: 100%; }
}