/* ChapterRoots — single-theme navy world; paper cards; brass lineage rail.
   Tokens first; every color below derives from them. */
:root {
  --ground: #131a2c;
  --ground-2: #1a2340;
  --paper: #f5f1e6;
  --paper-2: #fdfaf2;
  --ink: #20283f;
  --ink-soft: #5a617a;
  --on-navy: #eee9db;
  --on-navy-soft: #a9a795;
  --gold: #c8a24a;
  --gold-soft: #e2c987;
  --gold-ink: #856419;   /* gold dark enough to be readable TEXT on paper (4.8:1) */
  --line-navy: #2a3452;
  --line-paper: #ddd5bf;
  --shell: 1080px;
  --rail-x: 26px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--on-navy);
  font-family: "Public Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: Newsreader, Georgia, serif; font-weight: 600; line-height: 1.12; margin: 0; text-wrap: balance; }
h4 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
p { margin: 0; }
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 22px; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-navy); }
.top-in { display: flex; align-items: center; gap: 26px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand-mark { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 14px 0 -4px var(--gold), 0 -14px 0 -4px var(--gold); }
.brand-name { font-family: Newsreader, Georgia, serif; font-size: 21px; letter-spacing: .2px; }
.brand-name b { color: var(--gold-soft); font-weight: 600; }
.top-nav { display: flex; gap: 22px; font-size: 14.5px; }
.top-nav a { text-decoration: none; color: var(--on-navy-soft); }
.top-nav a:hover { color: var(--gold-soft); }
@media (max-width: 800px) { .top-nav { display: none; } }

/* ---------- buttons ---------- */
.btn { display: inline-block; font-weight: 700; font-size: 15.5px; text-decoration: none; border-radius: 10px; padding: 13px 22px; }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-gold { background: var(--gold); color: #17202f; }
.btn-gold:hover { background: var(--gold-soft); }
.btn-line { border: 1.5px solid var(--gold); color: var(--gold-soft); }
.btn-line:hover { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.band-paper .btn-line, .price-card .btn-line { color: var(--ink); border-color: var(--gold); }
a:focus-visible, summary:focus-visible { outline: 2.5px solid var(--gold-soft); outline-offset: 3px; border-radius: 6px; }

/* ---------- lineage rail (the signature) ---------- */
.rail-scope { position: relative; }
.rail { position: absolute; left: var(--rail-x); top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--gold) 0 0) no-repeat; background-size: 100% 100%; opacity: .55; }
.band-paper .rail { opacity: .5; }
.rail::before { content: ""; position: absolute; left: 50%; top: 84px; width: 12px; height: 12px; border-radius: 50%; transform: translateX(-50%); background: var(--gold); }
.rail-hero { animation: grow 1.1s cubic-bezier(.6,.05,.3,1) both; transform-origin: top; }
@keyframes grow { from { background-size: 100% 0%; } to { background-size: 100% 100%; } }
/* the branch moment behind the tree screenshot */
/* 40px, not 90px: the branch must stay inside the rail gutter (68px at desktop, 46px on
   phones) or its stroke is painted straight across the body copy beside it. */
.rail-branch::after { content: ""; position: absolute; left: 0; top: 340px; width: 40px; height: 90px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); border-bottom-left-radius: 44px; opacity: .8; transform: translateX(1px); }
.rail-end { bottom: 40%; }
.rail-end::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; border-radius: 50%; transform: translateX(-50%); background: var(--gold); }
.node-head, .hero-copy, .feature-hero, .feature-grid, .own-grid, .price-row, .steps, .faq, .tour-cta, .included, .price-model, .vs-wrap, .founder { margin-left: 72px; }
@media (max-width: 700px) {
  :root { --rail-x: 10px; }
  .node-head, .hero-copy, .feature-hero, .feature-grid, .own-grid, .price-row, .steps, .faq, .tour-cta, .included, .price-model, .vs-wrap, .founder { margin-left: 34px; }
}

/* ---------- hero ---------- */
.hero { padding: 84px 0 70px; background: radial-gradient(1100px 500px at 78% -10%, var(--ground-2), transparent 70%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
/* once the hero stacks, the screenshot becomes a full-width row and would sit under the rail
   (only .hero-copy carries the gutter indent), so give the figure the same indent.
   Selector must out-specify the later `.shot { margin: 0 }` — hence .hero-grid .shot-hero. */
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } .hero-grid .shot-hero { margin-left: 72px; } }
@media (max-width: 700px) { .hero-grid .shot-hero { margin-left: 34px; } }
.eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 16px; }
h1 { font-size: clamp(34px, 4.6vw, 52px); }
.hero .lede { margin: 20px 0 26px; font-size: 18px; color: var(--on-navy-soft); max-width: 56ch; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-center { justify-content: center; }
.quiet { margin-top: 16px; font-size: 13.5px; color: var(--on-navy-soft); font-style: italic; }
.band-paper .quiet { color: var(--ink-soft); }
.hero-points { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 9px; font-size: 15px; color: var(--on-navy-soft); }
.hero-points li { position: relative; padding-left: 22px; }
.hero-points li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }

/* ---------- proof bar ---------- */
.proof { border-top: 1px solid var(--line-navy); border-bottom: 1px solid var(--line-navy); background: color-mix(in srgb, var(--ground-2) 45%, transparent); padding: 30px 0; }
.proof-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.proof-item b { display: block; font-family: Newsreader, Georgia, serif; font-weight: 600; font-size: 30px; color: var(--gold-soft); margin-bottom: 4px; }
.proof-item span { font-size: 14px; color: var(--on-navy-soft); }
@media (max-width: 700px) { .proof-in { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- screenshots ---------- */
.shot { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-navy); box-shadow: 0 30px 60px -25px rgba(0,0,0,.55); background: var(--ground-2); }
.chrome { display: flex; gap: 6px; padding: 10px 12px; background: var(--ground-2); border-bottom: 1px solid var(--line-navy); }
.chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-navy); }
.chrome i:first-child { background: var(--gold); opacity: .7; }

/* ---------- bands ---------- */
.band { padding: 78px 0; }
.band-paper { background: var(--paper); color: var(--ink); }
.band-paper .shot { border-color: var(--line-paper); box-shadow: 0 26px 50px -28px rgba(32,40,63,.45); }
.band-paper .chrome { background: #ece6d4; border-color: var(--line-paper); }
.node-head { max-width: 640px; margin-bottom: 40px; }
.node-head h2 { font-size: clamp(27px, 3.4vw, 38px); }
.node-head .sub { margin-top: 10px; font-size: 16.5px; color: var(--ink-soft); }
.band:not(.band-paper) .node-head .sub { color: var(--on-navy-soft); }

/* ---------- feature tour ---------- */
.feature-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 36px; align-items: center; margin-bottom: 48px; }
/* copy-left variant: keeps the screenshot in the wide column so both tour blocks mirror */
.feature-hero-flip { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); margin-top: 46px; }
@media (max-width: 900px) { .feature-hero, .feature-hero-flip { grid-template-columns: 1fr; } }
.feature-hero-copy h3 { font-size: 24px; margin-bottom: 10px; }
.feature-hero-copy p { color: var(--ink-soft); }
.feature-grid { list-style: none; margin-top: 0; margin-bottom: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-grid li { background: var(--paper-2); border: 1px solid var(--line-paper); border-radius: 12px; padding: 18px 18px 20px; }
.feature-grid p { font-size: 14.5px; color: var(--ink-soft); }
.tour-cta { margin-top: 46px; text-align: center; }
/* desktop and phone sit side by side, never stacked — the phone used to be absolutely
   positioned over the desktop shot and covered its headline and buttons. Widths are picked so
   both render at the same height (1440x900 next to 390x844). */
.shot-pair { display: flex; align-items: center; justify-content: center; gap: 24px; max-width: 880px; margin: 0 auto 26px; }
.shot-pair img:first-child { width: 70%; border-radius: 12px; border: 1px solid var(--line-paper); box-shadow: 0 26px 50px -28px rgba(32,40,63,.45); }
.shot-pair .phone { width: 20%; border-radius: 14px; border: 3px solid var(--ink); box-shadow: 0 18px 36px -14px rgba(32,40,63,.55); }
@media (max-width: 560px) {
  .shot-pair { flex-direction: column; gap: 18px; }
  .shot-pair img:first-child { width: 100%; }
  .shot-pair .phone { width: 46%; }
}
.tour-cta p { color: var(--ink-soft); }
.link-gold { color: var(--ink); font-weight: 700; text-decoration-color: var(--gold); text-underline-offset: 3px; }
/* --gold is a fill/border tone: as text on paper it is 2.1:1, so hovering this link used to
   make it HARDER to read than at rest. --gold-ink is the same hue dark enough to read. */
.link-gold:hover { color: var(--gold-ink); }

/* ---------- ownership ---------- */
.own-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .own-grid { grid-template-columns: 1fr; } }
.own-card { border: 1px solid var(--line-navy); border-top: 3px solid var(--gold); border-radius: 12px; padding: 20px; background: color-mix(in srgb, var(--ground-2) 60%, transparent); }
.own-card p { font-size: 14.5px; color: var(--on-navy-soft); }
.band-paper .own-card { background: var(--paper-2); border-color: var(--line-paper); border-top-color: var(--gold); }
.band-paper .own-card p { color: var(--ink-soft); }

/* rent vs. own */
.vs-wrap { overflow-x: auto; margin-top: 36px; }
.vs { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.vs th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft); padding: 10px 16px; }
.vs td { padding: 13px 16px; border-top: 1px solid var(--line-paper); color: var(--ink-soft); vertical-align: top; }
.vs .us { color: var(--ink); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.vs th.us { color: var(--ink); }

/* ---------- plans ---------- */
.price-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .price-row { grid-template-columns: 1fr; } }
.price-card { position: relative; background: var(--paper-2); border: 1px solid var(--line-paper); border-radius: 14px; padding: 24px 22px; }
.price-card-hi { border: 2px solid var(--gold); box-shadow: 0 18px 40px -22px rgba(32,40,63,.4); }
.price-label { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.price-amt { font-family: Newsreader, Georgia, serif; font-size: 40px; font-weight: 600; color: var(--ink); margin: 6px 0 14px; font-variant-numeric: tabular-nums; }
.price-amt span { font-size: 17px; color: var(--ink-soft); font-family: "Public Sans", sans-serif; font-weight: 600; }
.price-amt + .price-sub { margin: -10px 0 14px; font-size: 13.5px; color: var(--ink-soft); }
.price-card ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 7px; font-size: 14.5px; color: var(--ink-soft); }
.plans-row { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .plans-row { grid-template-columns: 1fr; } }
.plan-flag { position: absolute; top: -13px; left: 20px; background: var(--gold); color: #17202f; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
.plan-name { font-family: Newsreader, Georgia, serif; font-size: 27px; font-weight: 600; color: var(--ink); margin: 6px 0 4px; }
.plan-tag { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 14px; }
.plan-cta { margin-top: 18px; }
.included { margin-top: 36px; border-top: 1px solid var(--line-navy); padding-top: 26px; }
.incl-head { font-family: "Public Sans", sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy-soft); margin: 0 0 14px; }
.incl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 22px; font-size: 14.5px; color: var(--on-navy-soft); }
.incl li { position: relative; padding-left: 20px; }
.incl li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
@media (max-width: 760px) { .incl { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .incl { grid-template-columns: 1fr; } }
.price-model { margin-top: 26px; font-size: 15px; color: var(--on-navy-soft); max-width: 72ch; }
.price-model b { color: var(--on-navy); }

/* ---------- steps ---------- */
.steps { list-style: none; margin-top: 0; margin-bottom: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; counter-reset: step; }
/* 5 across needs ~1080px; below that a step's paragraph is squeezed to ~107px and the cards
   blow out to 470px tall. Keep this BEFORE the 900px rule so that one still wins under 900. */
@media (max-width: 1080px) { .steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.steps li { border: 1px solid var(--line-navy); border-radius: 12px; padding: 20px; background: color-mix(in srgb, var(--ground-2) 60%, transparent); }
.step-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: #17202f; font-weight: 700; margin-bottom: 12px; }
.steps p { font-size: 14.5px; color: var(--on-navy-soft); }

/* ---------- founder & founding program ---------- */
.founder { max-width: 620px; display: grid; gap: 14px; }
.founder p { font-size: 17.5px; color: var(--ink-soft); }
.founder .sig { font-family: Newsreader, Georgia, serif; font-size: 22px; color: var(--ink); }

/* ---------- faq ---------- */
.faq { max-width: 720px; display: grid; gap: 10px; }
.faq details { background: var(--paper-2); border: 1px solid var(--line-paper); border-radius: 10px; padding: 0 18px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 15px 0; list-style-position: outside; }
.faq p { padding: 0 0 16px; color: var(--ink-soft); }

/* ---------- final ---------- */
.band-final { padding: 90px 0 96px; background: radial-gradient(900px 420px at 50% 120%, var(--ground-2), transparent 70%); text-align: center; }
.final h2 { font-size: clamp(30px, 4vw, 44px); }
.final p { margin: 14px auto 26px; color: var(--on-navy-soft); max-width: 52ch; }

/* ---------- contact form ---------- */
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 620px; margin: 0 auto; text-align: left; }
@media (max-width: 620px) { .contact-form { grid-template-columns: 1fr; } }
/* align-content:end keeps every control at its natural height and on one baseline; without it
   a field whose label wraps stretches its input taller than the one beside it. */
.ff { display: grid; gap: 6px; align-content: end; }
.ff-wide { grid-column: 1 / -1; }
.ff label { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--on-navy-soft); }
.ff input, .ff textarea {
  font: inherit; color: var(--on-navy); width: 100%;
  background: color-mix(in srgb, var(--ground-2) 70%, transparent);
  border: 1px solid var(--line-navy); border-radius: 9px; padding: 11px 13px;
}
.ff input::placeholder, .ff textarea::placeholder { color: color-mix(in srgb, var(--on-navy-soft) 70%, transparent); }
.ff input:focus-visible, .ff textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.ff textarea { resize: vertical; min-height: 84px; }
.ff select {
  font: inherit; color: var(--on-navy); width: 100%;
  border: 1px solid var(--line-navy); border-radius: 9px; padding: 11px 38px 11px 13px;
  appearance: none; -webkit-appearance: none;
  background: color-mix(in srgb, var(--ground-2) 70%, transparent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23a9a795' stroke-width='2'/></svg>") no-repeat right 13px center;
}
.ff select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.opt { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .8; }
.checks-set { border: none; margin: 0; padding: 0; }
.checks-set legend { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--on-navy-soft); padding: 0; margin-bottom: 8px; }
.checks { display: flex; flex-wrap: wrap; gap: 10px 18px; }
/* .ff label (uppercase/700/tracked) also matches these at equal specificity, so
   the three shouty properties must be reset here or the options read as headings. */
.checks label { display: flex; gap: 7px; align-items: center; font-size: 14px; color: var(--on-navy-soft);
  text-transform: none; font-weight: 400; letter-spacing: 0; min-height: 40px; }
.checks input { width: 16px; height: 16px; accent-color: var(--gold); margin: 0; }
/* .final p caps this at 52ch; horizontal margins must stay auto or the capped
   block hugs the form's left edge while the button sits centered. */
.contact-form .promise { grid-column: 1 / -1; margin: 10px auto 0; font-size: 13px; color: var(--on-navy-soft); text-align: center; line-height: 1.65; }
.contact-form .btn { grid-column: 1 / -1; justify-self: center; margin-top: 4px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line-navy); padding: 22px 0; font-size: 13.5px; color: var(--on-navy-soft); }
.foot-in { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.foot-nav { display: flex; gap: 16px; }
.foot-nav a { text-decoration: none; color: var(--on-navy-soft); }
.foot-nav a:hover { color: var(--gold-soft); }

/* ---------- reveals ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .rail-hero { animation: none; }
  html { scroll-behavior: auto; }
}