/* 261 pass 2: desk, footer, hero video + pill, calculator, build section,
   area journey, plan sheet. Same tokens as 261.css; transform/opacity motion only. */
.ph picture{display:block;height:100%}
.mono{font-family:ui-monospace,'DM Mono',SFMono-Regular,Menlo,monospace}

/* ===== Hero video + pill button ===== */
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
html.js .hero-vid{clip-path:circle(0% at 50% 50%)}
html.js.hero-gl .hero-vid{clip-path:none}              /* the GL canvas above draws the video as its texture */
html.js.hero-css .hero-vid{animation:iris 1.4s var(--ease) forwards}
.hero-copy{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
.snd{position:absolute;z-index:3;left:var(--pad);bottom:calc(20px + env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 14px;border:1px solid var(--line-2);border-radius:999px;background:rgba(29,32,33,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px;color:var(--paper);transition:transform .12s var(--ease),border-color .3s}
.snd:hover{border-color:rgba(233,240,86,.5)}
.snd:active{transform:scale(.97)}
.snd-ic{width:20px;height:20px;overflow:visible}
.snd-ic path{fill:none;stroke:var(--paper);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.snd-m{margin-left:4px;padding-left:10px;border-left:1px solid var(--line-2);color:var(--muted);font-size:12px}
.nudge{animation:nudge .45s var(--ease)}
@keyframes nudge{30%{transform:translateX(-4px)}60%{transform:translateX(3px)}}
.toast{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));z-index:200;width:max-content;max-width:min(92vw,460px);padding:12px 16px;border:1px dashed rgba(154,168,140,.6);border-radius:12px;background:var(--surface);font-size:13px;line-height:1.45;color:var(--paper);box-shadow:0 20px 40px -20px rgba(0,0,0,.7);opacity:0;transform:translate(-50%,14px);pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (min-width:900px){.toast{bottom:32px}}


/* ===== Calculator ===== */
.calc{display:grid;gap:40px}
@media (min-width:960px){.calc{grid-template-columns:1fr 1fr;gap:72px;align-items:start}}
.cf{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:8px 16px;align-items:center;padding:16px 0;border:0;border-top:1px solid var(--line)}
.cf label:first-child,.cf legend{grid-column:1/-1;font-size:12px;letter-spacing:.06em;color:var(--muted)}
.cf legend{float:left;width:100%;margin-bottom:10px}
.cf-u{color:rgba(154,168,140,.7)}
.cf input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer}
.cf input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line-2);border-radius:2px}
.cf input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10px;border-radius:50%;background:var(--acid);border:3px solid var(--ink)}
.cf input[type=range]::-moz-range-track{height:2px;background:var(--line-2)}
.cf input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--acid);border:3px solid var(--ink)}
.cf input[type=number],.dk-field input{width:100%;min-height:44px;padding:0 12px;background:rgba(215,232,188,.05);border:1px solid rgba(215,232,188,.2);border-radius:10px;color:var(--paper);font:16px var(--sans);font-variant-numeric:tabular-nums}
.cf input[type=number]:focus,.dk-field input:focus{outline:none;border-color:rgba(233,240,86,.6)}
.cf input:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
.cf-sm{grid-template-columns:128px 1fr}
.seg{grid-column:1/-1;display:inline-flex;justify-self:start;gap:2px;padding:3px;border:1px solid var(--line-2);border-radius:999px}
.seg label{position:relative}
.seg input{position:absolute;inset:0;opacity:0;cursor:pointer}
.seg span{display:grid;place-items:center;min-height:40px;padding:0 16px;border-radius:999px;font-size:13px;color:var(--muted);transition:background-color .3s,color .3s}
.seg input:checked+span{background:var(--acid);color:var(--ink)}
.seg input:focus-visible+span{outline:2px solid var(--acid);outline-offset:2px}
.calc-m{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.calc-m dt{font-size:11px;line-height:1.35;color:var(--muted)}
.calc-m dd{display:block;margin-top:6px;font:clamp(26px,3.6vw,44px)/1 var(--serif);color:var(--paper);font-variant-numeric:tabular-nums}
.tk{animation:tk .45s var(--ease)}
@keyframes tk{from{opacity:.45;transform:translateY(5px)}}
.bars{margin-top:32px;padding-top:18px;border-top:1px solid var(--line)}
.bar{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin-top:14px;font-size:13px;color:var(--muted)}
.bar-v{color:var(--paper);font-variant-numeric:tabular-nums}
.bar-t{grid-column:1/-1;grid-row:2;height:10px;border-radius:999px;background:rgba(215,232,188,.06);overflow:hidden}
.bar-t b{display:block;height:100%;background:var(--paper);transform-origin:left;transform:scaleX(0);transition:transform .7s var(--ease)}
.bar-c .bar-t b{background:var(--acid)}

/* ===== Plan sheet ===== */
.bp-tog{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.bp .bp-lines path{stroke-width:.75}
html.js .bp .bp-lines g path{transition-delay:var(--d,0s)}
.bp .bp-com{--d:0s}
.bp .bp-lines text{font-size:12px;letter-spacing:.04em}
.bp .bp-lines .bp-sm{font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.bp .bp-lines .bp-xs{font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.bp .bp-lines .bp-dim,.bp .bp-lines .bp-grid{font-size:10px;fill:var(--text);opacity:.7}
.bp .bp-lines .bp-big{font:20px var(--serif);fill:var(--paper)}
.bp .bp-lines .bp-acid{font-size:10px;letter-spacing:.12em;text-transform:uppercase;fill:var(--acid)}
.bp .hatch{fill:url(#bpHatch);opacity:.55}
.bp-h{stroke:var(--muted);stroke-width:.6}
.bp .cut{fill:var(--ink)}
.bp-lv[hidden]{display:none}
html.js .bp .hatch{opacity:0;transition:opacity .9s var(--ease) 1s}
html.js .bp.in .hatch{opacity:.55}
.bp.rst .bp-lines path,.bp.rst .bp-lines text,.bp.rst .hatch{transition:none!important}

/* ===== How it was built ===== */
.bd{display:grid;gap:48px}
@media (min-width:960px){.bd{grid-template-columns:1.05fr .95fr;gap:72px;align-items:start}}
.bd-k{display:block;color:var(--muted);letter-spacing:.04em}
.bd-t{width:100%;border-collapse:collapse;font-size:14px}
.bd-t caption{text-align:left;padding-bottom:12px}
.bd-t th,.bd-t td{padding:12px 0;text-align:left;vertical-align:top;border-top:1px solid var(--line-2)}
.bd-t th{width:44%;padding-right:16px;font-weight:400;color:var(--muted)}
.bd-t td{color:var(--paper)}
.bd-t tr.u th,.bd-t tr.u td{border-top-style:dashed;border-top-color:rgba(154,168,140,.35)}
.bd-t tr.u td{color:var(--muted);font-style:italic}
.bd-story{margin-top:28px;font:20px/1.35 var(--serif);color:var(--muted)}
.bd-story .bd-k{font:500 10px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--acid);margin-bottom:6px}
.bd-src{margin-top:18px;font-size:12px;color:var(--muted)}

/* ===== Area journey ===== */
.jr{position:sticky;top:var(--navh);z-index:30;margin-bottom:12px;background:rgba(29,32,33,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-block:1px solid var(--line)}
.jr ol{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.jr ol::-webkit-scrollbar{display:none}
.jr a{display:block;padding:12px 10px;font-size:12px;letter-spacing:.04em;color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .3s}
.jr a b{font-weight:500;color:var(--acid);margin-right:4px}
.jr a[aria-current="step"]{color:var(--paper)}
.jr-fill{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--acid);transform-origin:left;transform:scaleX(0)}
.stage{padding-block:clamp(56px,9vw,120px)}
.stage h3{font-size:clamp(34px,4.6vw,60px);margin-top:12px}
.st-head{margin-bottom:clamp(28px,4vw,48px)}
.st-home{display:grid;gap:28px}
.st-home .ph{aspect-ratio:3/2;border-radius:3px}
.st-home p:not(.eyebrow){margin-top:16px;max-width:460px;color:var(--text);opacity:.85}
@media (min-width:900px){.st-home{grid-template-columns:1.35fr .65fr;gap:56px;align-items:end}}
.city{display:grid;gap:40px;margin-bottom:clamp(56px,8vw,96px)}
@media (min-width:960px){.city{grid-template-columns:1fr 1fr;column-gap:72px}.prox{grid-row:span 2}}
.places li{padding:16px 0;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.places b{display:block;font:400 26px/1.1 var(--serif);color:var(--paper);margin-bottom:4px}
.prox{margin:0}
.prox svg{display:block;width:100%;max-width:380px;margin-inline:auto;overflow:visible}
.px-coast{fill:none;stroke:var(--line-2);stroke-width:1}
.px-coast2{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 5}
.px-route{fill:none;stroke:var(--acid);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1}
.px-dot{fill:var(--ink);stroke:var(--acid);stroke-width:1.5}
.px-home{fill:var(--acid)}
.px-na{fill:none;stroke:var(--muted);stroke-width:1}
.px-n{fill:var(--paper);font:22px var(--serif)}
.px-s{fill:var(--muted);font:11px var(--sans)}
.px-lbl{fill:var(--muted);font:italic 13px var(--serif)}
.px-tc{fill:var(--text);opacity:.6}
.px-mid{fill:var(--paper);font:12px var(--sans);letter-spacing:.06em}
.prox figcaption{margin-top:12px;font-size:12px;color:var(--muted)}

/* ===== Desk (look of /assets/css/desk.css, inline) ===== */
.dk-grid{display:grid;gap:32px}
@media (min-width:960px){.dk-grid{grid-template-columns:1.45fr .55fr;gap:48px;align-items:start}}
.dk{position:relative;display:flex;flex-direction:column;height:min(640px,86vh);min-height:480px;background:var(--ink);border:1px solid rgba(233,240,86,.3);border-radius:20px;overflow:hidden;box-shadow:0 60px 140px -60px rgba(0,0,0,.85)}
.dk-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(215,232,188,.14)}
.dk-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 4px rgba(233,240,86,.16)}
.dk-title{flex:1;min-width:0;margin:0;font:11px/1.2 ui-monospace,'DM Mono',SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-body{flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;padding:20px 18px}
.dk-msg{max-width:88%;padding:11px 14px;border-radius:14px;font-size:15px;line-height:1.5;animation:dkIn .4s var(--ease) both}
@keyframes dkIn{from{opacity:0;transform:translateY(8px)}}
.dk-msg.bot{align-self:flex-start;background:rgba(215,232,188,.06);color:var(--text);border-bottom-left-radius:4px}
.dk-msg.bot.ask{margin-top:-4px;background:none;border:1px solid rgba(215,232,188,.14);font-size:14px;color:var(--paper)}
.dk-msg.user{align-self:flex-end;background:rgba(233,240,86,.14);color:var(--text);border-bottom-right-radius:4px}
.dk-msg .who{display:block;margin-bottom:4px;font:9px ui-monospace,'DM Mono',SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dk-typing{align-self:flex-start;display:inline-flex;gap:5px;padding:14px 16px;border-radius:14px;border-bottom-left-radius:4px;background:rgba(215,232,188,.06)}
.dk-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.25;animation:dkDot 1.2s infinite}
.dk-typing i:nth-child(2){animation-delay:.18s}.dk-typing i:nth-child(3){animation-delay:.36s}
@keyframes dkDot{30%{opacity:1}}
.dk-sug,.dk-chips{display:flex;flex-wrap:wrap;gap:8px}
.dk-chips{padding:0 18px 12px}
.dk-chip{min-height:40px;padding:0 14px;border:1.5px solid rgba(233,240,86,.4);border-radius:60px;background:transparent;font-size:13px;font-weight:500;color:var(--text);transition:background-color .2s,color .2s,transform .12s var(--ease)}
.dk-chip:hover{border-color:var(--acid)}
.dk-chip:active{transform:scale(.97)}
.dk-chip[aria-pressed="true"],.dk-chip-acid{background:var(--acid);color:var(--ink);border-color:var(--acid)}
.dk-foot{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid rgba(215,232,188,.14)}
.dk-in{flex:1;min-width:0;min-height:44px;padding:0 16px;background:rgba(215,232,188,.05);border:1px solid rgba(215,232,188,.2);border-radius:60px;color:var(--text);font:16px var(--sans)}
.dk-in:focus{outline:none;border-color:rgba(233,240,86,.5)}
.dk-send{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--acid);color:var(--ink);font-size:18px}
.dk-book{position:absolute;left:0;right:0;bottom:0;z-index:3;max-height:calc(100% - 58px);overflow-y:auto;display:grid;gap:14px;padding:20px 18px 22px;background:var(--surface);border-top:1px solid rgba(233,240,86,.35);border-radius:16px 16px 0 0;animation:dkUp .45s var(--ease) both}
.dk-book[hidden]{display:none}
@keyframes dkUp{from{transform:translateY(30px);opacity:0}}
.dk-bt{font:26px/1.1 var(--serif);color:var(--paper)}
.dk-two{display:grid;gap:12px}
@media (min-width:560px){.dk-two{grid-template-columns:1fr 1fr}}
.dk-field{display:grid;gap:6px;border:0}
.dk-field label,.dk-field legend{font:10px ui-monospace,'DM Mono',SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dk-note{font-size:13px;color:var(--muted)}
.dk-err{min-height:1.2em;font-size:13px;color:var(--acid)}
.dk-bact{display:flex;flex-wrap:wrap;gap:10px}

/* ===== Footer (revamp pattern from /assets/css/footer.css, 261 tokens inlined) ===== */

/* ===== Reduced motion: final states, no movement ===== */
@media (prefers-reduced-motion: reduce){
  html.js .hero-vid{clip-path:none!important;opacity:0}
  html.hero-css .hero-vid{animation:p2fade .6s linear forwards!important}
  @keyframes p2fade{to{opacity:1}}
  .snd,.toast,.bar-t b,.dk-chip{transition-duration:.01ms!important}
  .nudge,.tk,.dk-msg,.dk-book{animation:none!important}
  .dk-typing i{animation:none;opacity:.6}
  .toast{transform:translate(-50%,0)}
  html.js .bp .hatch{opacity:.55;transition:none}
  .px-route{stroke-dashoffset:0!important}
}