@font-face{font-family:"Overpass";font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/overpass-400.f835f9c7e1.woff2) format("woff2")}
@font-face{font-family:"Overpass";font-style:normal;font-display:swap;font-weight:600;src:url(/assets/fonts/overpass-600.34c3c4df94.woff2) format("woff2")}
@font-face{font-family:"Overpass";font-style:normal;font-display:swap;font-weight:700;src:url(/assets/fonts/overpass-700.6a855eb539.woff2) format("woff2")}
@font-face{font-family:"Overpass";font-style:normal;font-display:swap;font-weight:800;src:url(/assets/fonts/overpass-800.8f91d294b3.woff2) format("woff2")}
@font-face{font-family:"Overpass Mono";font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/overpass-mono-500.fdc83dadff.woff2) format("woff2")}
@font-face{font-family:"Overpass Mono";font-style:normal;font-display:swap;font-weight:700;src:url(/assets/fonts/overpass-mono-700.b2365d25d7.woff2) format("woff2")}

:root {
  --ground:      #f5f7f4;   
  --surface:     #ffffff;
  --line:        #d3d9d4;
  --ink:         #1d2925;   
  --ink-muted:   #56625d;
  --ink-faint:   #8a958f;   
  --on-ink:      #f5f7f4;
  --ready:       #2a6a3b;   
  --ready-wash:  #e3eedd;
  --unverified:  #b8261b;   
  --unverified-wash: #f8e4e1;
  --focus:       #1d2925;
  --font-voice: "Overpass", system-ui, sans-serif;
  --font-typed: "Overpass Mono", ui-monospace, monospace;
  --t-handle:  700 clamp(28px, 7.4vw, 44px)/1.1 var(--font-typed);  
  --t-title:   700 28px/34px var(--font-voice);
  --t-heading: 700 19px/26px var(--font-voice);
  --t-body:    400 17px/26px var(--font-voice);
  --t-meta:    400 15px/22px var(--font-voice);
  --t-typed:   500 16px/24px var(--font-typed);    
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --r-control: 4px;   
  --r-panel: 8px;     
  --gutter: 16px;     
  --column: 34rem;    
  --page-max: 1120px;
  --tap: 48px;
}
@media (min-width: 768px) { :root { --gutter: 32px; --t-title: 700 34px/40px var(--font-voice); } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #151b19; --surface: #1c2421; --line: #2f3a36;
    --ink: #e5eae6; --ink-muted: #a3aea9; --ink-faint: #6c7873; --on-ink: #151b19;
    --ready: #7fbf8a; --ready-wash: #1e2f24; --unverified: #f0857a; --unverified-wash: #3a1f1c; --focus: #e5eae6;
  }
}
:root[data-theme="dark"] {
  --ground: #151b19; --surface: #1c2421; --line: #2f3a36;
  --ink: #e5eae6; --ink-muted: #a3aea9; --ink-faint: #6c7873; --on-ink: #151b19;
  --ready: #7fbf8a; --ready-wash: #1e2f24; --unverified: #f0857a; --unverified-wash: #3a1f1c; --focus: #e5eae6;
}
@media print { :root { --ground: #fff; --surface: #fff; --ink: #000; --ink-muted: #333; --line: #999; } }


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: var(--t-body); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 3px; }
[hidden] { display: none !important; }
.meta { font: var(--t-meta); color: var(--ink-muted); }
.typed { font: var(--t-typed); white-space: nowrap; }
.title { font: var(--t-title); }
.heading { font: var(--t-heading); }
.stack { display: flex; flex-direction: column; gap: var(--s-5); }
.stack-sm { display: flex; flex-direction: column; gap: var(--s-3); }
.bar { padding-inline: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))); }
.bar.wide { padding-inline: var(--gutter); }
.bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 56px; border-bottom: 1px solid var(--line); }
.wordmark { font: 800 18px/24px var(--font-voice); letter-spacing: -0.01em; text-decoration: none; }
.bar .step-count { font: var(--t-meta); color: var(--ink-muted); }
.flow-grid { max-width: var(--page-max); margin: 0 auto; padding: var(--s-5) var(--gutter) var(--s-8); }
.step { max-width: var(--column); display: flex; flex-direction: column; gap: var(--s-5); }
.steps { display: none; }
@media (min-width: 1024px) {
  .bar .step-count { display: none; }
  .flow-grid { display: grid; grid-template-columns: 13rem var(--column); column-gap: var(--s-8); padding-top: var(--s-7); }
  .steps { display: block; }
}
.steps ol { display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: 24px 1fr; gap: var(--s-2); align-items: baseline; padding: var(--s-2) 0 var(--s-2) var(--s-4); margin-left: -1px; border-left: 2px solid transparent; font: var(--t-meta); color: var(--ink-muted); }
.steps li .n { font: 500 15px/22px var(--font-voice); font-variant-numeric: tabular-nums; }
.steps li[aria-current="step"] { border-left-color: var(--ink); color: var(--ink); font-weight: 700; }
.steps li.done .n { visibility: hidden; position: relative; }
.steps li.done .n::after { content: ""; visibility: visible; position: absolute; left: 2px; top: 3px; width: 5px; height: 10px; border: solid var(--ink-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-5); border-radius: var(--r-control); border: 1px solid var(--ink); background: var(--ink); color: var(--on-ink); font: 700 17px/24px var(--font-voice); text-decoration: none; cursor: pointer; }
.btn-outline { background: transparent; color: var(--ink); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--ink-muted); font-weight: 600; padding: 0 var(--s-3); }
.btn-block { width: 100%; }
.btn:focus-visible, input:focus-visible, .choice:focus-within, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.actions { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
@media (min-width: 768px) { .actions { flex-direction: row; align-items: center; } .actions .btn-block { width: auto; } }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field > label, .field > .label { font: 600 15px/22px var(--font-voice); }
.field input[type=text], .field input[type=email], .field input[type=date], .field input[type=number], .field select { min-height: var(--tap); padding: 0 var(--s-3); border: 1px solid var(--ink-muted); border-radius: var(--r-control); background: var(--surface); font: var(--t-body); width: 100%; }
.field textarea { min-height: 96px; padding: var(--s-3); border: 1px solid var(--ink-muted); border-radius: var(--r-control); background: var(--surface); font: var(--t-body); width: 100%; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input.code-input { min-height: var(--tap); padding: 0 var(--s-3); border: 1px solid var(--ink-muted); border-radius: var(--r-control); background: var(--surface); font: 700 20px/28px var(--font-typed); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; width: 100%; }
.code-row { display: flex; flex-direction: column; gap: var(--s-2); }
@media (min-width: 768px) { .code-row { flex-direction: row; align-items: center; } .field input.code-input { width: 10rem; } }
.field .hint { font: var(--t-meta); color: var(--ink-muted); }
.field > label .opt { font-weight: 400; color: var(--ink-muted); }
.hint { color: var(--ink-muted); }
.error { font: 600 15px/22px var(--font-voice); color: var(--unverified); }
.pair-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.check { display: grid; grid-template-columns: 24px 1fr; gap: var(--s-3); align-items: start; font: var(--t-meta); color: var(--ink); cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); }
fieldset.choices { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.choices legend { padding: 0; margin-bottom: var(--s-3); }
.choices { display: flex; flex-direction: column; gap: var(--s-3); }
.choice { display: grid; grid-template-columns: 24px 1fr auto; gap: var(--s-1) var(--s-3); align-items: baseline; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); cursor: pointer; }
.choice input { grid-row: 1 / span 2; width: 20px; height: 20px; margin: 0; accent-color: var(--ink); align-self: center; }
.choice .what { font: var(--t-heading); }
.choice .price { font: var(--t-heading); text-align: right; }
.choice .detail { grid-column: 2 / span 2; font: var(--t-meta); color: var(--ink-muted); }
.choice:has(input:not([hidden]):checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choices.ruled { gap: 0; }
.choices.ruled .choice:first-of-type { border-top: 1px solid var(--line); }
.choices.ruled .choice { grid-template-columns: 24px 1fr; align-items: center; min-height: var(--tap); padding: var(--s-2) 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.choices.ruled .choice input { grid-row: auto; }
.choices.ruled .choice .what { font: var(--t-body); }
.choices.ruled .choice:has(input:checked) { box-shadow: none; }
.choices.ruled .choice:has(input:checked) .what { font-weight: 700; }
.state { display: grid; grid-template-columns: 24px 1fr; gap: var(--s-1) var(--s-3); align-items: start; padding: var(--s-4); border-radius: var(--r-panel); border-left: 4px solid; }
.state svg { width: 24px; height: 24px; margin-top: 1px; }
.state b { font: var(--t-heading); }
.state p, .state .state-act { grid-column: 2; font: var(--t-meta); color: var(--ink); max-width: 40rem; }
.state .state-act { margin-top: var(--s-2); }
.state.unverified { background: var(--unverified-wash); border-color: var(--unverified); }
.state.unverified b, .state.unverified svg { color: var(--unverified); }
.state.ready { background: var(--ready-wash); border-color: var(--ready); }
.state.ready b, .state.ready svg { color: var(--ready); }
.state.paused { background: var(--surface); border-color: var(--ink-muted); }
.handle { padding: var(--s-6) 0 var(--s-5); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.handle .name { display: block; font: var(--t-handle); letter-spacing: -0.02em; animation: name-in 900ms cubic-bezier(.2,.7,.2,1) both; }
.handle .domain { display: block; font: var(--t-typed); color: var(--ink-muted); margin-top: var(--s-1); }
@keyframes name-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.handle-inline { font: 700 20px/28px var(--font-typed); overflow-wrap: anywhere; }
.handle-inline .nb, .card-paper .addr .nb { white-space: nowrap; }
.rows { border-top: 1px solid var(--line); }
.rows > div { display: grid; grid-template-columns: 7rem 1fr; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font: var(--t-meta); }
.rows > div > b { font-weight: 600; color: var(--ink); }
.code { font: var(--t-handle); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.wait { display: grid; grid-template-columns: 8px 1fr; gap: var(--s-3); align-items: baseline; font: var(--t-meta); color: var(--ink-muted); }
.wait i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-muted); animation: breathe 2.4s ease-in-out infinite; transform: translateY(-1px); }
@keyframes breathe { 50% { opacity: .25; } }
.ready-mark { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6) 0 var(--s-5); border-top: 2px solid var(--ready); }
.ready-mark svg { width: 56px; height: 56px; color: var(--ready); }
.ready-mark .title { color: var(--ready); }
.ready-mark svg path { stroke-dasharray: 40; animation: tick 600ms 150ms cubic-bezier(.3,.7,.3,1) both; }
@keyframes tick { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
.received { border-left: 2px solid var(--line); padding: var(--s-1) 0 var(--s-1) var(--s-4); }
.received .msg { font: var(--t-typed); white-space: normal; margin-top: var(--s-1); }
.section { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.stats { display: grid; gap: var(--s-1); } 
.section .actions { margin-top: var(--s-1); }
.segmented { display: inline-flex; border: 1px solid var(--ink-muted); border-radius: var(--r-control); padding: 2px; align-self: flex-start; }
.segmented button { min-height: 44px; min-width: 96px; padding: 0 var(--s-4); border: 0; border-radius: 2px; background: transparent; font: 600 15px/22px var(--font-voice); color: var(--ink-muted); cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.segmented.numbers button { min-width: 56px; }
.segmented.two-line { display: inline-grid; grid-template-columns: 1fr 1fr; }
.segmented.two-line button { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s-2) var(--s-4); text-align: left; }
.segmented.two-line .ex { font: 400 15px/22px var(--font-voice); white-space: nowrap; }
.account-grid { max-width: var(--page-max); margin: 0 auto; padding: var(--s-5) var(--gutter) var(--s-8); display: flex; flex-direction: column; gap: var(--s-6); }
.account-cols { display: grid; gap: var(--s-6); }
.account-cols > * { min-width: 0; } 
@media (min-width: 1024px) {
  .account-grid { padding-top: var(--s-7); }
  .account-cols { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); align-items: start; }
  .account-cols > .stack { gap: var(--s-6); }
}
.pins { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pin-row { display: grid; grid-template-columns: 24px 1fr; gap: var(--s-2) var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.pin-row .pin-glyph { width: 16px; height: 22px; justify-self: center; }
.pin-row .pin-glyph path { fill: var(--ink); }
.pin-row .pin-glyph circle { fill: var(--ground); }
.pin-row input[type=text] { min-height: 44px; padding: 0 var(--s-3); border: 1px solid var(--ink-muted); border-radius: var(--r-control); background: var(--surface); font: var(--t-typed); width: 100%; }
.pin-row .pin-more { grid-column: 2; display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.map { height: 320px; border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; background: var(--surface); }
.flow-grid.with-map { max-width: none; position: relative; }
@media (min-width: 1024px) {
  .flow-grid.with-map { grid-template-columns: 13rem 28rem; min-height: calc(100vh - 56px); }
  .with-map .map-wrap { position: absolute; top: var(--s-7); right: var(--gutter); bottom: var(--s-7); left: calc(var(--gutter) + 13rem + 28rem + 2 * var(--s-8)); }
  .with-map .map-wrap .map { height: 100%; max-height: calc(100vh - 56px - 2 * var(--s-7)); position: sticky; top: var(--s-5); }
}
.map-pin { width: 18px; height: 18px; border-radius: 50%; background: #1d2925; border: 3px solid #fff; box-shadow: 0 0 0 1px #1d2925; cursor: pointer; }
.map-label { font: 700 13px/16px var(--font-typed); background: #fff; color: #1d2925; padding: 2px 6px; border-radius: 2px; border: 1px solid #1d2925; white-space: nowrap; transform: translateY(-30px); }
.card-paper { width: 100%; max-width: 456px; background: #fff; color: #000; border: 1px solid #999; padding: var(--s-5); font: 400 14px/20px var(--font-voice); }
.card-paper .wordmark { font-size: 15px; }
.card-paper .addr { font: 700 20px/26px var(--font-typed); margin: var(--s-2) 0 var(--s-4); overflow-wrap: anywhere; }
.card-paper h3 { font: 700 14px/20px var(--font-voice); margin: var(--s-4) 0 var(--s-2); }
.card-paper dl { display: flex; flex-direction: column; }
.card-paper dt:not(:first-child) { margin-top: var(--s-2); }
.card-paper dt { font: 500 14px/20px var(--font-typed); }
.card-paper dd { margin: 0; color: #333; }
.card-paper dl.inline { display: grid; grid-template-columns: minmax(0, max-content) 1fr; gap: var(--s-1) var(--s-4); }
.card-paper dl.inline dt { overflow-wrap: anywhere; }
.card-paper dl.inline dt { margin-top: 0; }
.card-paper .rule { border-top: 1px solid #999; margin-top: var(--s-4); padding-top: var(--s-3); }
@media print {
  body { background: #fff; }
  body * { visibility: hidden; }
  .card-paper, .card-paper * { visibility: visible; }
  .card-paper { position: absolute; left: 0; top: 0; border: 1px solid #000; max-width: 4.25in; }
}
.trip-list { border-top: 1px solid var(--line); }
.trip-row { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.trip-row:last-child { border-bottom: 0; }
.trip-row .what { display: flex; flex-direction: column; }
.trip-row .what b { font: 600 17px/26px var(--font-voice); }
.trip-row .kept { font-weight: 600; color: var(--ink); }
.row-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.row-acts .btn-quiet { padding: 0 var(--s-2); }
.row-acts > .btn-quiet:first-child { margin-inline-start: calc(-1 * var(--s-2)); }
.trip-confirm { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); background: var(--surface); border: 1px solid var(--ink-muted); border-radius: var(--r-panel); }
.trip-confirm p { font: var(--t-meta); }
@media (min-width: 768px) {
  .trip-row { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-4); }
  .trip-row.confirming { flex-direction: column; align-items: stretch; }
  .trip-row .what { flex: 1 1 0; min-width: 0; }
  .row-acts { flex: none; flex-wrap: nowrap; }
}
.sched-list { border-top: 1px solid var(--line); }
.sched-row { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.sched-row .what, .preset .what { display: flex; flex-direction: column; min-width: 0; }
.sched-row .what b, .preset .what b { font: 600 17px/26px var(--font-voice); overflow-wrap: anywhere; }
.preset { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.preset .btn { align-self: flex-start; }
.sched-edit { display: flex; flex-direction: column; gap: var(--s-4); margin: var(--s-3) 0; padding: var(--s-4); background: var(--surface); border: 1px solid var(--ink-muted); border-radius: var(--r-panel); }
.sched-edit .field input[type=time] { min-height: var(--tap); padding: 0 var(--s-3); border: 1px solid var(--ink-muted); border-radius: var(--r-control); background: var(--surface); font: var(--t-body); color: var(--ink); max-width: 12rem; color-scheme: light dark; }
.sched-edit .row-acts { gap: var(--s-2); }
.days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.days button { min-height: var(--tap); padding: 0 var(--s-2); border: 1px solid var(--ink-muted); border-radius: var(--r-control); background: transparent; font: 600 15px/22px var(--font-voice); color: var(--ink-muted); white-space: nowrap; cursor: pointer; }
.days button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
@media (min-width: 768px) {
  .sched-row, .preset { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-4); }
  .sched-row .what, .preset .what { flex: 1 1 0; }
  .sched-row .row-acts { flex: none; flex-wrap: nowrap; }
  .preset .btn { align-self: center; }
}
.page-pad { padding: var(--s-6) max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))) var(--s-8); }
.mail-meta { font: var(--t-meta); color: var(--ink-muted); display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-1) var(--s-3); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.mail-meta b { color: var(--ink); font-weight: 600; }
.mail { max-width: 34rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: var(--s-6) var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.mail .foot { font: var(--t-meta); color: var(--ink-muted); border-top: 1px solid var(--line); padding-top: var(--s-4); }
.option { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.option .btn { align-self: flex-start; }
.option .btn-quiet { padding-left: 0; }
@media (max-width: 767px) { .option .btn:not(.btn-quiet) { align-self: stretch; } }
.proto { max-width: var(--page-max); margin: 0 auto var(--s-6); padding: var(--s-3) var(--gutter); display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; border-top: 1px dashed var(--line); font: var(--t-meta); color: var(--ink-muted); }
.proto a { padding: var(--s-1) var(--s-2); border-radius: 2px; }
.proto a[aria-current="true"] { background: var(--ink); color: var(--on-ink); text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .handle .name, .wait i, .ready-mark svg path { animation: none; }
}


:root { --t-display: 700 clamp(40px, 5.4vw, 64px)/1.04 var(--font-voice); --site-max: 1120px; }
html { scroll-behavior: smooth; scroll-padding-top: var(--s-5); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.wrap { max-width: var(--site-max); margin: 0 auto; padding-inline: var(--gutter); }
.measure { max-width: var(--column); }
.display { font: var(--t-display); letter-spacing: -0.02em; text-wrap: balance; }
.lede { font: 400 19px/30px var(--font-voice); max-width: 36rem; }
.typed-inline { font: var(--t-typed); }
.site-bar { border-bottom: 1px solid var(--line); }
.site-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 56px; }
.site-bar nav { display: flex; align-items: center; gap: var(--s-1); }
.site-bar nav a { font: 600 15px/22px var(--font-voice); color: var(--ink-muted); text-decoration: none; padding: var(--s-3) var(--s-2); }
.site-bar nav a:hover, .site-bar nav a[aria-current="page"] { color: var(--ink); }
.site-bar nav .wide { display: none; }
@media (min-width: 768px) { .site-bar nav .wide { display: inline; } .site-bar nav { gap: var(--s-3); } }
.band { border-top: 1px solid var(--line); padding-block: var(--s-7); }
@media (min-width: 1024px) { .band { padding-block: var(--s-8); } }
.band-head { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-6); max-width: var(--column); }
.hero { padding-block: var(--s-6) var(--s-7); display: grid; gap: var(--s-7); align-items: start; }
.hero-words { display: flex; flex-direction: column; gap: var(--s-5); }
.hero-words .actions { margin-top: 0; }
@media (min-width: 1024px) { .hero { grid-template-columns: minmax(0, 1fr) 27rem; column-gap: var(--s-8); padding-block: var(--s-8); } .hero-words { padding-top: var(--s-6); } }
.sat { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.sat-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.sat-head b { font: var(--t-heading); }
.sat-head .meta { font: var(--t-meta); color: var(--ink-muted); }
.sat-body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); min-height: 26rem; }
.msg-out, .msg-in { display: flex; flex-direction: column; gap: var(--s-1); max-width: 88%; }
.msg-out { align-self: flex-end; align-items: flex-end; }
.msg-in { align-self: flex-start; }
.bubble { font: 500 15px/23px var(--font-typed); padding: var(--s-3) var(--s-4); border-radius: var(--r-panel); overflow-wrap: break-word; }
.msg-out .bubble { background: var(--ink); color: var(--on-ink); }
.msg-in .bubble { background: var(--ground); border: 1px solid var(--line); }
.when { font: var(--t-meta); color: var(--ink-muted); }
.sched-tag { font: var(--t-meta); color: var(--ink-muted); align-self: center; }
.sat-wait { display: grid; grid-template-columns: 8px 1fr; gap: var(--s-3); align-items: baseline; font: var(--t-meta); color: var(--ink-muted); }
.sat-wait i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-muted); animation: breathe 2.4s ease-in-out infinite; transform: translateY(-1px); }
.arrive { animation: arrive 420ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.demo { display: flex; flex-direction: column; gap: var(--s-3); }
.picks { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.picks button { min-height: 40px; padding: 0 var(--s-3); border: 1px solid var(--ink-muted); border-radius: var(--r-control); background: transparent; font: 600 15px/22px var(--font-voice); color: var(--ink-muted); cursor: pointer; }
.picks button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.demo-foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.demo-foot .btn-quiet { min-height: 40px; padding: 0 var(--s-2); }
.js .thread[hidden] { display: none; }
.js .sat-body { height: clamp(14rem, calc(60svh - 3.5rem), 30rem); min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.js .sat-body > :first-child { margin-top: auto; }
.js .sat-body:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.no-js-sep { border: 0; border-top: 1px dashed var(--line); margin: 0; }
.js .no-js-sep { display: none; }
.things { display: flex; flex-direction: column; gap: var(--s-7); }
.thing { display: grid; gap: var(--s-5); align-items: start; }
.thing-words { display: flex; flex-direction: column; gap: var(--s-3); max-width: var(--column); }
@media (min-width: 1024px) { .thing { grid-template-columns: minmax(0, 1fr) 27rem; column-gap: var(--s-8); } .things { gap: var(--s-8); } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); }
.panel .q { font: var(--t-typed); }
.elev { display: grid; grid-template-columns: 56px 1fr; gap: var(--s-4); }
.elev-scale { position: relative; height: 176px; border-left: 2px solid var(--ink); margin-left: 8px; }
.elev-mark { position: absolute; left: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); }
.elev-mark.you { background: var(--ink); }
.elev-rows { display: flex; flex-direction: column; justify-content: space-between; height: 176px; }
.elev-row b { display: block; font: var(--t-heading); }
.elev-row span { font: var(--t-meta); color: var(--ink-muted); }
.elev-row .reading { font: 700 17px/24px var(--font-voice); color: var(--ink); }
.elev-one { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-top: 2px solid var(--ink); }
.elev-tick { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); flex: none; }
.elev-one b { font: var(--t-heading); }
.pinmap { position: relative; aspect-ratio: 16 / 10; background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-control); overflow: hidden; }
.pinmap svg.ground { position: absolute; inset: 0; width: 100%; height: 100%; }
.pinmap .lake { fill: var(--line); }
.pinmap .river { fill: none; stroke: var(--line); stroke-width: 3; }
.pinmap .track { fill: none; stroke: var(--ink-muted); stroke-width: 1.5; stroke-dasharray: 4 5; }
.mpin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mpin span { font: 700 13px/16px var(--font-typed); background: var(--surface); color: var(--ink); padding: 2px 6px; border-radius: 2px; border: 1px solid var(--ink); white-space: nowrap; }
.mpin i { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--ink); }
.mpin.asked i { box-shadow: 0 0 0 1px var(--ink), 0 0 0 6px var(--ground), 0 0 0 8px var(--ink); }
.ask { align-self: flex-start; min-height: 44px; padding: var(--s-2) var(--s-4); text-align: left; border: 1px solid var(--ink); border-radius: var(--r-control); background: var(--ink); color: var(--on-ink); font: 500 15px/22px var(--font-typed); cursor: pointer; }
.ask[aria-pressed="true"] { background: transparent; color: var(--ink); }
.len-msgs { display: flex; flex-direction: column; gap: var(--s-2); }
.len-msgs .bubble { background: var(--ground); border: 1px solid var(--line); }
.len-msgs .bubble.first { border-color: var(--ink); }
.steps-row { display: grid; gap: var(--s-7); counter-reset: step; }
@media (min-width: 1024px) { .steps-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }
.step-card { display: flex; flex-direction: column; gap: var(--s-4); }
.step-card .n { font: 700 15px/22px var(--font-voice); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.step-card .shot { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: var(--s-4); min-height: 11rem; display: flex; flex-direction: column; justify-content: center; gap: var(--s-3); }
.step-card .handle { padding: var(--s-4) 0 var(--s-3); }
.step-card .handle .name { font: 700 32px/1.1 var(--font-typed); }
.step-card .pin-row { padding: var(--s-2) 0; }
.step-card .pin-row b { font: var(--t-typed); }
.facts { border-top: 1px solid var(--line); max-width: 44rem; }
.facts li { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); display: grid; gap: var(--s-1); }
.facts b { font: var(--t-heading); }
.facts span { color: var(--ink-muted); }
.faq { border-top: 1px solid var(--line); max-width: 44rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 24px; gap: var(--s-3); align-items: center; min-height: var(--tap); padding: var(--s-3) 0; font: 600 17px/26px var(--font-voice); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 10px; height: 10px; border: solid var(--ink-muted); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); justify-self: center; }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details > div { padding: 0 0 var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); max-width: var(--column); }
.plans { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .plans { grid-template-columns: 1fr 1fr; max-width: 46rem; } }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.plan .price { font: 700 34px/40px var(--font-voice); letter-spacing: -0.01em; }
.plan .price small { font: var(--t-meta); color: var(--ink-muted); letter-spacing: 0; }
.plan ul { display: flex; flex-direction: column; gap: var(--s-2); }
.plan li { position: relative; padding-left: var(--s-4); font: var(--t-meta); }
.plan li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.summary-line { font: 700 24px/32px var(--font-voice); max-width: 40rem; }
.author { font: 400 19px/30px var(--font-voice); max-width: 36rem; }
.site-foot { border-top: 1px solid var(--line); padding-block: var(--s-6) var(--s-7); }
.site-foot .wrap { display: flex; flex-direction: column; gap: var(--s-3); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); }
.site-foot a { font: var(--t-meta); color: var(--ink); }
.site-foot p { font: var(--t-meta); color: var(--ink-muted); }
.doc { padding-block: var(--s-6) var(--s-8); }
.doc-body { max-width: 40rem; display: flex; flex-direction: column; gap: var(--s-4); }
.doc-body h2 { font: var(--t-heading); margin-top: var(--s-5); }
.doc-body h3 { font: 600 17px/26px var(--font-voice); margin-top: var(--s-3); }
.doc-body ul { list-style: disc; padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.doc-body .number { font: var(--t-typed); white-space: nowrap; }
.doc-body form { display: flex; flex-direction: column; gap: var(--s-4); }
.doc-body input[type=tel] { min-height: var(--tap); padding: 0 var(--s-3); border: 1px solid var(--ink-muted); border-radius: var(--r-control); background: var(--surface); font: var(--t-body); width: 100%; max-width: 20rem; }
@media (prefers-reduced-motion: reduce) { .arrive { animation: none; } .sat-wait i { animation: none; } }
.proto-note { font: var(--t-meta); color: var(--ink-muted); border: 1px dashed var(--ink-muted); border-radius: var(--r-control); padding: var(--s-2) var(--s-3); }


#result { font: var(--t-meta); display: none; }
#result.ok { color: var(--ready); display: block; }
#result.err { color: var(--unverified); display: block; }
.doc-body .table-scroll { overflow-x: auto; }
.doc-body table { width: 100%; border-collapse: collapse; font: var(--t-meta); }
.doc-body th, .doc-body td { font: var(--t-meta); text-align: left; vertical-align: top; padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--line); }
.doc-body th { font-weight: 600; }
.js .off { visibility: hidden; }
.js .thread:not(.on), .js .thread > .off { display: none; }
html:not(.js) .len-stack > .off { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.len-stack { display: grid; grid-template-columns: minmax(0, 1fr); }
.len-stack > .len-msgs { grid-area: 1 / 1; }