/* Kilamile. Two materials: Trail (orange, contour lines) and Ledger (blue, ruled lines).
   Orange is a fill with ink on it. Text colors come from tokens so light and dark stay honest. */

:root {
  color-scheme: light dark;
  --orange: #FF8A1F;
  --ink: #0A0A0B;
  --bone: #F6F3EC;

  --bg: #F6F3EC;
  --card: #FFFFFF;
  --card2: #ECE7DC;
  --text: #0A0A0B;
  --muted: #55524C;
  --line: rgba(10, 10, 11, .16);
  --accent-text: #B04A00;
  --blue-text: #2563EB;
  --blue-text-rgb: 37, 99, 235;

  /* hero and ledger grounds swap between modes */
  --hero-bg: #FF8A1F;
  --hero-fg: #0A0A0B;
  --hero-topo: url(img/topo-ink.svg);
  --hero-l1: #0A0A0B;
  --hero-l2: #0A0A0B;
  --hero-l3: #0A0A0B;
  --hero-btn-bg: #0A0A0B;
  --hero-btn-fg: #FF8A1F;
  --ring: #0A0A0B;
  --ledger-bg: #2563EB;
  --ledger-fg: #FFFFFF;
  --ledger-sub: #FFFFFF;
  --ledger-rule: rgba(255, 255, 255, .16);
  --seam-bg: #0A0A0B;
  --seam-fg: #F6F3EC;
  --plan-topo: url(img/topo-ink.svg);

  --display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --g: clamp(16px, 3vw, 48px);
  --sec: clamp(56px, 8vw, 120px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F0E0D;
    --card: #1A1816;
    --card2: #24211E;
    --text: #F6F3EC;
    --muted: #AEA99F;
    --line: rgba(255, 255, 255, .15);
    --accent-text: #FF8A1F;
    --blue-text: #5B8DFF;
    --blue-text-rgb: 91, 141, 255;

    --hero-bg: #0F0E0D;
    --hero-fg: #F6F3EC;
    --hero-topo: url(img/topo-orange.svg);
    --hero-l1: #FF8A1F;
    --hero-l2: #8DB0FF;
    --hero-l3: #AEA99F;
    --hero-btn-bg: #FF8A1F;
    --hero-btn-fg: #0A0A0B;
    --ring: #FF8A1F;
    --ledger-bg: #0D1730;
    --ledger-fg: #F6F3EC;
    --ledger-sub: #C9D8FF;
    --ledger-rule: rgba(91, 141, 255, .2);
    --seam-bg: #F6F3EC;
    --seam-fg: #0A0A0B;
    --plan-topo: url(img/topo-orange.svg);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.5 var(--body); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
picture { display: block; }
h1, h2, h3, p, ul, ol, figure, table, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-underline-offset: .16em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blue-text); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: 84px; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--ink); color: var(--bone); padding: 12px 18px; border-radius: 12px; }
.skip:focus { top: 12px; }
.wrap { max-width: 1320px; margin-inline: auto; padding-inline: var(--g); }
.label { font: 700 12.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.big { font-family: var(--display); font-weight: 900; font-style: italic; letter-spacing: -.035em; line-height: .94; }

/* ---------- nav: one ink pill on every ground ---------- */
.site-nav { position: sticky; top: 10px; z-index: 30; margin: 10px auto 0; width: calc(100% - 2 * clamp(10px, 2vw, 32px)); max-width: 1320px; }
.home .site-nav { margin-bottom: -66px; }
.site-nav .bar { display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 8px 0 10px; border-radius: 999px; background: #0A0A0B; color: #F6F3EC; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); }
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-right: 6px; color: inherit; text-decoration: none; font: 900 italic 21px/1 var(--display); letter-spacing: -.02em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.site-nav nav { display: flex; margin-left: auto; align-items: center; }
.site-nav nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: inherit; text-decoration: none; font-weight: 600; font-size: 15px; }
.site-nav nav a:hover, .site-nav nav a[aria-current] { color: #FF8A1F; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 56px; padding: 0 28px; border-radius: 999px; font-weight: 800; font-size: 18px; text-decoration: none; white-space: nowrap; transition: transform .15s; }
.btn:active { transform: scale(.98); }
.btn-orange { background: #FF8A1F; color: #0A0A0B; }
.btn-ink { background: #0A0A0B; color: #FF8A1F; }
.btn-hero { background: var(--hero-btn-bg); color: var(--hero-btn-fg); }
.site-nav .btn { min-height: 42px; padding: 0 18px; font-size: 15px; margin-left: 6px; }
.btn .arr { transition: transform .15s; }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- hero ---------- */
.hero { position: relative; display: flex; flex-direction: column; height: clamp(640px, 100svh, 1040px); overflow: hidden; background: var(--hero-bg) var(--hero-topo) center / cover no-repeat; color: var(--hero-fg); }
.hero-main { flex: 1; min-height: 0; width: 100%; max-width: 1920px; margin-inline: auto; padding: 84px 3vw 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr); column-gap: 3vw; }
.chip { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1.5px solid currentColor; border-radius: 999px; font: 700 13px/1 var(--mono); margin-bottom: 14px; }
.hero h1 { grid-column: 1 / -1; position: relative; z-index: 1; font-size: min(11.2vw, 25vh, 210px); white-space: nowrap; margin-bottom: .14em; }
.br-p { display: none; }
.ring { position: relative; display: inline-block; width: .2em; height: .2em; margin-left: .05em; border: .052em solid var(--ring); border-radius: 50%; }
.route { position: absolute; max-width: none; overflow: visible; pointer-events: none; z-index: 0; }
.route path { fill: none; stroke: var(--ring); stroke-width: 4.6; stroke-linecap: round; }
.route-d { left: 50%; top: 50%; width: 1em; height: 7em; }
.route-p { display: none; left: 50%; top: 50%; width: 3em; height: 1em; }
.hero-side { display: flex; flex-direction: column; gap: clamp(16px, 3vh, 34px); min-height: 0; padding-bottom: 26px; position: relative; z-index: 1; }
.lead { font-size: clamp(19px, min(2vw, 3.5vh), 36px); line-height: 1.2; font-weight: 800; max-width: 26em; }
.lead span { display: block; margin-bottom: .32em; }
.lead .l1 { color: var(--hero-l1); }
.lead .l2 { color: var(--hero-l2); }
.lead .l3 { color: var(--hero-l3); font-weight: 600; }
.cta-note { margin-top: 12px; font-size: 14px; line-height: 1.4; font-weight: 600; max-width: 34em; }
.shots { --w: min(23vw, 40vh, 420px); display: flex; gap: 22px; position: relative; z-index: 2; min-height: 0; }
.shot { width: var(--w); flex: none; }
.shot + .shot { margin-top: 46px; }
.shot figcaption { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.shot img, .frame img { width: 100%; height: auto; border-radius: 22px; background: var(--card2); box-shadow: 0 0 0 1px var(--line); }
.facts { position: relative; z-index: 3; background: #0A0A0B; color: #F6F3EC; }
.facts .in { max-width: 1920px; margin-inline: auto; padding: 13px 3vw; display: flex; flex-wrap: wrap; align-items: center; gap: 4px clamp(18px, 3vw, 44px); }
.facts b { font: 900 italic clamp(16px, 1.9vw, 27px)/1.1 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.facts a { margin-left: auto; font-size: 14px; font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }

@media (prefers-reduced-motion: no-preference) {
  .route path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.5s cubic-bezier(.35, 0, .2, 1) .15s forwards; }
  .hero .ring { animation: ringpop .36s cubic-bezier(.3, 1.6, .5, 1) 1.5s backwards; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ringpop { from { transform: scale(0); } to { transform: scale(1); } }

/* ---------- plans ---------- */
.plans { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); }
.plan { padding: var(--sec) clamp(20px, 4.4vw, 76px); display: flex; flex-direction: column; }
.plan-free { background: var(--bg) var(--plan-topo) center / 1600px no-repeat; }
.plan-biz { background-color: var(--ledger-bg); color: var(--ledger-fg); background-image: repeating-linear-gradient(to bottom, transparent 0 47px, var(--ledger-rule) 47px 48px); }
.seam { background: var(--seam-bg); color: var(--seam-fg); display: flex; align-items: center; justify-content: center; }
.seam span { writing-mode: vertical-rl; font: 900 italic 22px/1 var(--display); letter-spacing: -.005em; white-space: nowrap; }
.plan .label { margin-bottom: 26px; }
.plan h2 { min-height: 2.05em; font-size: clamp(54px, 7.2vw, 118px); }
.bib-word { position: relative; z-index: 0; display: inline-block; color: #0A0A0B; padding: 0 .12em 0 .02em; }
.plan-free h2 { font-size: clamp(90px, 13vw, 216px); line-height: .9; min-height: 1.14em; }
.bib-word::before { content: ""; position: absolute; z-index: -1; inset: .05em -.06em .02em -.12em; background: #FF8A1F; transform: skewX(-10deg); border-radius: .06em; }
.plan .sub { margin-top: 22px; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.3; font-weight: 600; max-width: 24em; min-height: 2.6em; }
.plan-biz .sub { color: var(--ledger-sub); }
.rows { margin-top: 30px; counter-reset: r; }
.rows li { counter-increment: r; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); font: 800 italic clamp(21px, 2.3vw, 34px)/1.15 var(--display); letter-spacing: -.02em; }
.plan-biz .rows li { border-color: var(--ledger-sub); }
.rows li::after { content: counter(r, decimal-leading-zero); font: 700 13px/1 var(--mono); letter-spacing: .04em; }
.plan-foot { margin-top: auto; padding-top: 26px; }
.price { font: 900 italic clamp(26px, 2.9vw, 42px)/1.05 var(--display); letter-spacing: -.02em; }
.plan-foot p + p { margin-top: 8px; }
.plan-note { background: var(--card2); }
.plan-note p { padding: 20px var(--g); max-width: 1320px; margin-inline: auto; font-weight: 600; font-size: 16px; }

/* ---------- chapter bands ---------- */
.band { position: relative; padding: clamp(64px, 8vw, 116px) 0 clamp(120px, 13vw, 190px); }
.band h2 { font-size: clamp(60px, 11.4vw, 200px); }
.band .label { display: block; margin-bottom: 18px; }
.band .intro { margin-top: 20px; max-width: 34em; font-size: clamp(19px, 1.8vw, 25px); line-height: 1.28; font-weight: 700; }
.band-trail { background: #FF8A1F url(img/topo-ink.svg) center / cover no-repeat; color: #0A0A0B; }
.band-ledger { background-color: var(--ledger-bg); color: var(--ledger-fg); background-image: linear-gradient(to right, transparent calc(var(--g) * .55), var(--ledger-rule) calc(var(--g) * .55) calc(var(--g) * .55 + 1px), transparent calc(var(--g) * .55 + 1px)), repeating-linear-gradient(to bottom, transparent 0 47px, var(--ledger-rule) 47px 48px); }
.steps-wrap { margin-top: clamp(-150px, -9vw, -80px); position: relative; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step { display: flex; flex-direction: column; height: clamp(520px, 44vw, 620px); overflow: hidden; background: var(--card); border-radius: 26px; box-shadow: 0 0 0 1px var(--line); }
.step .t { padding: 24px 26px 18px; }
.step .n { display: block; color: var(--muted); }
.step h3 { font-size: clamp(44px, 4.6vw, 68px); margin: 8px 0 10px; }
.step p { font-size: 16px; line-height: 1.42; color: var(--muted); }
.step .frame { flex: 1; min-height: 0; margin: 0 22px; overflow: hidden; }
.step .frame img { border-radius: 18px 18px 0 0; }
.step-num { background: var(--ledger-bg); color: var(--ledger-fg); box-shadow: 0 0 0 1px var(--ledger-rule); }
.step-num .n, .step-num p { color: var(--ledger-sub); }
.step-num .t { flex: 1; display: flex; flex-direction: column; }
.step-num .huge { margin-top: auto; color: var(--ledger-fg); font-size: clamp(80px, 7.4vw, 118px); line-height: .86; }
.step-num .huge small { display: block; font-size: .36em; letter-spacing: -.02em; margin-top: .14em; }

.tiles { margin-top: 16px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.tile { background: var(--card); border-radius: 26px; box-shadow: 0 0 0 1px var(--line); padding: 26px; display: flex; flex-direction: column; }
.tile h3 { font-size: clamp(28px, 2.7vw, 38px); margin-bottom: 10px; }
.tile p { color: var(--muted); font-size: 16px; line-height: 1.42; }
.tile-wide { grid-column: span 6; flex-direction: row; gap: 26px; padding-bottom: 0; overflow: hidden; }
.tile-wide > div { flex: 1 1 42%; padding-bottom: 26px; }
.tile-wide .frame { flex: 1 1 58%; min-width: 0; height: 250px; overflow: hidden; }
.tile-wide .frame img { border-radius: 18px 18px 0 0; }
.tile-s { grid-column: span 3; }
.tile-watch { background: transparent; box-shadow: none; border: 2px dashed var(--accent-text); }
.tile-watch .label { color: var(--accent-text); margin-bottom: 12px; }
.tile-watch h3 { white-space: nowrap; }
.tile-watch p { color: var(--text); font-weight: 600; }
.tile-s > :last-child { margin-top: auto; }
.tile-gpx .gpx { font-size: clamp(64px, 6.6vw, 100px); margin: 18px 0 0; }
.tile-watch h3 { margin-top: auto; }
.tile-watch > :last-child { margin-top: 0; }

/* ---------- the running share block and the ledger ---------- */
.chapter { padding-bottom: var(--sec); }
.ledger-sec { padding-bottom: var(--sec); }
.ledger { margin-top: 16px; border-radius: 26px; overflow: hidden; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.ledger-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; padding: 26px 28px 14px; }
.ledger-head h3 { font-size: clamp(30px, 3vw, 44px); }
.ledger-head .label { color: var(--muted); }
.ledger table { width: 100%; border-collapse: collapse; }
.ledger th, .ledger td { text-align: left; vertical-align: top; padding: 14px 28px; border-top: 1px solid rgba(var(--blue-text-rgb), .32); }
.ledger thead th { width: 25%; padding-top: 18px; font-weight: 400; }
.ledger thead b { display: block; font: 900 italic clamp(32px, 3.9vw, 60px)/1 var(--display); letter-spacing: -.03em; color: var(--blue-text); }
.ledger thead span { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.38; color: var(--muted); }
.ledger td { font: 600 15.5px/1.35 var(--mono); }
.ledger-note { padding: 18px 28px 26px; border-top: 1px solid rgba(var(--blue-text-rgb), .32); font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.ledger-note a { color: var(--text); }

.output { margin-top: clamp(40px, 6vw, 84px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 84px); align-items: start; }
.output .frame { max-width: 400px; }
.output h3 { font-size: clamp(44px, 6vw, 92px); color: var(--blue-text); }
.output dl { margin-top: 26px; }
.output dt { padding-top: 16px; border-top: 1px solid rgba(var(--blue-text-rgb), .32); font: 800 italic clamp(22px, 2.3vw, 32px)/1.15 var(--display); letter-spacing: -.02em; }
.output dd { padding: 6px 0 16px; color: var(--muted); max-width: 36em; }
.small-note { margin-top: 10px; font-size: 15px; color: var(--muted); }
.caption { margin-top: 10px; font-size: 13px; color: var(--muted); font-family: var(--mono); }

/* ---------- trust ---------- */
.trust { background: #0A0A0B; color: #F6F3EC; padding: var(--sec) 0; border-block: 1px solid rgba(255, 255, 255, .12); }
.stack li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; padding: 12px 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.stack .big { font-size: min(10vw, 158px); white-space: nowrap; }
.stack .ann { flex: 1 1 13em; min-width: 0; font-size: 16px; line-height: 1.35; font-weight: 600; color: #C9C5BC; max-width: 24em; }
.leaves { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(28px, 5vw, 84px); }
.leaves h3 { font-size: clamp(30px, 3vw, 44px); }
.leaves li { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.leaves li b { color: #FF8A1F; }
.leaves a { color: #FF8A1F; font-weight: 700; }
.leaves p { margin-top: 14px; }

/* ---------- FAQ ---------- */
.faq { padding: var(--sec) 0; }
.faq .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(28px, 5vw, 84px); }
.faq h2 { font-size: clamp(50px, 5.4vw, 84px); }
.faq-list { border-bottom: 1px solid var(--line); }
details.q { border-top: 1px solid var(--line); }
details.q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 64px; padding: 14px 0; font-size: 19px; line-height: 1.3; font-weight: 700; }
details.q summary::-webkit-details-marker { display: none; }
details.q summary::after { content: "+"; flex: none; font: 400 28px/1 var(--body); transition: transform .15s; }
details.q[open] summary::after { transform: rotate(45deg); }
details.q p { padding: 0 34px 20px 0; max-width: 42em; color: var(--muted); line-height: 1.55; }
details.q p a { color: var(--text); }

/* ---------- final ---------- */
.final { background: #FF8A1F url(img/topo-ink.svg) center / cover no-repeat; color: #0A0A0B; padding: var(--sec) 0; }
.final h2 { font-size: clamp(60px, 11.2vw, 200px); }
.final .ring { border-color: #0A0A0B; }
.final .act { margin-top: clamp(24px, 3vw, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.final .act p { font-weight: 700; font-size: 16px; line-height: 1.35; max-width: 26em; }

/* ---------- footer ---------- */
.foot { background: #0A0A0B; color: #F6F3EC; padding: 48px 0 0; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .12); }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.foot-cols .label { color: #C9C5BC; margin-bottom: 8px; }
.foot-cols a { display: flex; align-items: center; min-height: 34px; text-decoration: none; font-weight: 600; font-size: 15px; word-break: break-word; }
.foot-cols a:hover { color: #FF8A1F; text-decoration: underline; }
.foot-legal { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 13.5px; line-height: 1.5; color: #C9C5BC; }
.foot-legal p + p { margin-top: 4px; }
.wordmark { margin-top: 26px; font-size: calc((min(100vw, 1320px) - 2 * var(--g)) / 4.12); line-height: .78; white-space: nowrap; color: #F6F3EC; height: .88em; padding-top: .08em; overflow: hidden; }
.wordmark .ring { border-color: #FF8A1F; width: .17em; height: .17em; border-width: .045em; }

/* ---------- document pages ---------- */
.page-head { padding: clamp(36px, 5vw, 64px) 0 clamp(20px, 3vw, 32px); }
.page-head h1, .doc h1 { font-size: clamp(50px, 8vw, 112px); }
.page-head .leadline { margin-top: 14px; max-width: 34em; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.4; color: var(--muted); }
.page-head .meta { margin-top: 12px; font: 600 13.5px/1.4 var(--mono); color: var(--muted); }
.doc { display: grid; grid-template-columns: 236px minmax(0, 68ch); gap: clamp(28px, 4vw, 64px); padding-bottom: var(--sec); justify-content: start; }
.toc { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 104px); overflow-y: auto; font-size: 15px; }
.toc strong { display: block; margin: 18px 0 2px; font: 700 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.toc strong:first-child { margin-top: 0; }
.toc a { display: flex; align-items: center; min-height: 32px; text-decoration: none; }
.toc a:hover { color: var(--accent-text); text-decoration: underline; }
.toc-m { display: none; }
.prose h2 { margin: 1.9em 0 .4em; font: 900 italic clamp(30px, 3.4vw, 42px)/1.04 var(--display); letter-spacing: -.025em; }
.prose h2:first-child, .prose .toc-m + h2 { margin-top: 0; }
.prose h3 { margin: 1.4em 0 .3em; font-size: 19px; font-weight: 800; line-height: 1.25; }
.prose p { margin: .7em 0; }
.prose ul, .prose ol { margin: .7em 0; padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: .42em 0; }
.prose ol > li::marker { font-weight: 800; }
.path { font-size: .92em; font-weight: 600; background: var(--card2); border-radius: 6px; padding: 1px 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.path-plain { white-space: nowrap; }
.callout { margin: 1.1em 0; padding: 14px 18px; border-left: 4px solid #FF8A1F; background: var(--card); border-radius: 0 14px 14px 0; box-shadow: 0 0 0 1px var(--line); }
.callout.biz { border-left-color: var(--blue-text); }
.tbl { width: 100%; margin: 1em 0; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-top: 1px solid var(--line); }
.tbl thead th { border-top: 0; font: 700 13px/1.3 var(--body); color: var(--muted); }
.tbl .no { width: 5.4em; font: 900 italic 24px/1.1 var(--display); color: var(--accent-text); }
.tbl .yes { width: 5.4em; font-weight: 800; }
.tbl td small { display: block; color: var(--muted); font-size: 14px; }
.who { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 22px; margin: 1em 0; }
.who > b { padding-top: 12px; border-top: 1px solid var(--line); font: 900 italic 24px/1.1 var(--display); letter-spacing: -.02em; }
.who > div { padding-top: 12px; border-top: 1px solid var(--line); padding-bottom: 10px; }
.who > div p:first-child { margin-top: 0; }

.priv-hero { margin: 24px 0 clamp(24px, 3vw, 40px); padding: clamp(26px, 4vw, 52px); border-radius: 30px; background: #0A0A0B url(img/topo-orange.svg) center / cover no-repeat; color: #F6F3EC; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.priv-hero .label { color: #FF8A1F; }
.priv-hero h1 { margin-top: 14px; max-width: 13em; font-size: clamp(40px, 6.4vw, 92px); }
.zeros { margin-top: clamp(24px, 3vw, 40px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .2); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.zeros b { display: block; font: 900 italic clamp(60px, 7vw, 100px)/.9 var(--display); color: #FF8A1F; }
.zeros span { display: block; margin-top: 8px; font-size: 15px; line-height: 1.3; font-weight: 600; max-width: 15em; }
.priv-hero .meta { margin-top: 22px; font: 600 13.5px/1.4 var(--mono); color: #C9C5BC; }

.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: clamp(32px, 4vw, 56px); }
.door { padding: 24px; border-radius: 24px; background: var(--card); box-shadow: 0 0 0 1px var(--line); border-top: 6px solid var(--line); }
.door.trail { border-top-color: #FF8A1F; }
.door.biz { border-top-color: var(--blue-text); }
.door h2 { font: 900 italic 32px/1 var(--display); letter-spacing: -.025em; margin-bottom: 10px; }
.door a { display: flex; align-items: center; min-height: 36px; font-size: 16px; }

.contact { margin: 12px 0 clamp(28px, 4vw, 48px); padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: #FF8A1F url(img/topo-ink.svg) center / cover no-repeat; color: #0A0A0B; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; align-items: center; }
.contact .addr { display: block; margin-top: 8px; font: 900 italic clamp(20px, 6vw, 38px)/1.05 var(--display); letter-spacing: -.025em; word-break: break-word; }
.contact p { margin-top: 10px; font-weight: 600; max-width: 38em; line-height: 1.4; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 clamp(28px, 4vw, 48px); }
.card { display: block; padding: 20px 22px; border-radius: 20px; background: var(--card); box-shadow: 0 0 0 1px var(--line); text-decoration: none; }
.card:hover { box-shadow: 0 0 0 2px var(--accent-text); }
.card h3 { font-size: 19px; font-weight: 800; }
.card p { margin-top: 4px; color: var(--muted); font-size: 15.5px; line-height: 1.4; }
.single { max-width: 860px; padding-bottom: var(--sec); }
.single h2 { margin: 1.5em 0 .3em; font: 900 italic clamp(30px, 3.4vw, 42px)/1.04 var(--display); letter-spacing: -.025em; }
.single .prose p { margin: .5em 0; }

.nf { padding: clamp(36px, 6vw, 84px) 0 var(--sec); }
.nf .code { font-size: clamp(130px, 30vw, 340px); line-height: .82; display: flex; align-items: center; color: var(--text); letter-spacing: -.05em; }
.nf .zero { display: inline-block; width: .66em; height: .66em; margin: 0 .03em; border: .17em solid #FF8A1F; border-radius: 50%; }
.nf h1 { margin-top: 18px; font-size: clamp(36px, 5.4vw, 68px); }
.nf p.body { margin-top: 14px; max-width: 30em; font-size: 19px; line-height: 1.45; color: var(--muted); }
.nf .btn { margin-top: 24px; }
.nf ul { margin-top: 28px; max-width: 560px; }
.nf li a { display: flex; justify-content: space-between; align-items: center; min-height: 56px; border-top: 1px solid var(--line); font-weight: 600; text-decoration: none; }
.nf li:last-child a { border-bottom: 1px solid var(--line); }
.nf li a:hover { color: var(--accent-text); }
.nf .tail { margin-top: 22px; font-size: 15px; color: var(--muted); }

/* ---------- narrow ---------- */
@media (max-width: 1020px) {
  .steps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--g)); padding: 2px var(--g) 8px; scroll-padding-inline: var(--g); }
  .step { flex: 0 0 min(78vw, 380px); scroll-snap-align: start; height: 540px; }
  .tile-wide { grid-column: 1 / -1; }
  .tile-s { grid-column: span 6; }
}

@media (max-width: 899px) {
  .site-nav .bar { height: 50px; padding: 0 5px 0 7px; }
  .home .site-nav { margin-bottom: -60px; }
  .site-nav nav a { display: none; }
  .site-nav .btn { min-height: 40px; padding: 0 15px; font-size: 14.5px; }
  .brand img { width: 30px; height: 30px; }

  .hero { height: auto; }
  .hero-main { display: block; padding: 76px 16px 0; }
  .hero h1 { font-size: 19vw; white-space: normal; }
  .br-p { display: inline; }
  .route-d { display: none; }
  .route-p { display: block; }
  .lead { font-size: 18px; line-height: 1.26; }
  .hero-side { padding-bottom: 0; }
  .hero-side .btn { width: 100%; margin-top: 12px; }
  .cta-note { margin-top: 10px; }
  .shots { --w: calc((100vw - 42px) / 2); gap: 10px; margin-top: 20px; height: 300px; overflow: hidden; margin-inline: -1px; }
  .shot + .shot { margin-top: 26px; }
  .shot img { border-radius: 16px; }
  .shot figcaption { display: block; margin-bottom: 8px; font-size: 11px; }
  .shot figcaption span { display: block; }
  .facts a { margin-left: 0; }
  .facts .in { padding-inline: 16px; }

  .plans { display: block; }
  .seam { height: 44px; }
  .seam span { writing-mode: horizontal-tb; font-size: 19px; }
  .plan { padding-block: 52px; }
  .plan h2, .plan-free h2, .plan .sub { min-height: 0; }
  .plan-free h2 { font-size: 30vw; }
  .bib-word { margin-left: .1em; }

  .band { padding-bottom: 110px; }
  .steps-wrap { margin-top: -74px; }
  .tile-s { grid-column: 1 / -1; }
  .tile-wide { flex-direction: column; gap: 14px; }
  .tile-wide > div { padding-bottom: 0; }
  .tile-wide .frame { flex: none; width: 100%; height: 230px; }

  .ledger thead { display: none; }
  .ledger-fields { display: grid !important; }
  .output { grid-template-columns: minmax(0, 1fr); }
  .output .frame { max-width: 330px; }
  .leaves, .faq .wrap { grid-template-columns: minmax(0, 1fr); }
  .stack .big { font-size: 10.7vw; }
  .stack .ann { flex-basis: 100%; }

  .zeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc { display: block; }
  .toc { display: none; }
  .toc-m { display: block; position: sticky; top: 66px; z-index: 10; margin-bottom: 22px; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
  .toc-m summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; font-weight: 700; cursor: pointer; list-style: none; }
  .toc-m summary::-webkit-details-marker { display: none; }
  .toc-m summary::after { content: "+"; font-size: 24px; font-weight: 400; }
  .toc-m[open] summary::after { content: "\2212"; }
  .toc-m .in { max-height: 60vh; overflow-y: auto; padding: 0 16px 10px; }
  .toc-m a { display: flex; align-items: center; min-height: 44px; text-decoration: none; border-top: 1px solid var(--line); }
  .toc-m strong { display: block; margin: 12px 0 4px; font: 700 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .doors { grid-template-columns: minmax(0, 1fr); }
  .door a { min-height: 44px; }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact .btn { width: 100%; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .who { grid-template-columns: minmax(0, 1fr); }
  .who > div { border-top: 0; padding-top: 0; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-cols > div:last-child { grid-column: 1 / -1; }
  .foot-cols a { min-height: 44px; }
}

/* A sample ledger becomes stacked rows on a phone: no sideways scroll. */
.ledger-fields { display: none; }
.ledger-fields div { padding: 14px 20px; border-top: 1px solid rgba(var(--blue-text-rgb), .32); }
.ledger-fields b { display: block; font: 900 italic 32px/1 var(--display); letter-spacing: -.03em; color: var(--blue-text); }
.ledger-fields span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.38; color: var(--muted); }
@media (max-width: 899px) {
  .ledger-head { padding: 22px 20px 10px; }
  .ledger table, .ledger tbody, .ledger tr, .ledger td { display: block; width: 100%; }
  .ledger tr { padding: 10px 20px; border-top: 1px solid rgba(var(--blue-text-rgb), .32); }
  .ledger td { padding: 2px 0; border: 0; font-size: 14.5px; }
  .ledger td::before { content: attr(data-f) ": "; color: var(--muted); }
  .ledger-note { padding: 16px 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media print {
  .site-nav, .foot, .toc, .toc-m, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .doc { display: block; }
  .priv-hero { background: #fff; color: #000; box-shadow: none; padding: 0; }
  .priv-hero .label, .zeros b { color: #000; }
}