/* fonts (fix pack 5): self-hosted variable woff2 (SIL Open Font License), latin preloaded in <head>.
   font-display:optional — the browser uses the web font if it is ready at first paint, otherwise the
   fallback for this page view. Either way text never re-flows after first paint. */
@font-face{font-family:"Geist";font-style:normal;font-weight:300 500;font-display:optional;src:url(/assets/fonts/geist-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:300 500;font-display:optional;src:url(/assets/fonts/geist-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:optional;src:url(/assets/fonts/jetbrains-mono-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:optional;src:url(/assets/fonts/jetbrains-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --mint:#68D2BA; --mint-deep:#2FA98F;
  --ink:#07090B; --ink-2:#0C1013; --ink-3:#131A1E; --paper:#F7F9F8; --mist:#EEF2F0;
  --text:#EDF2F0; --text-2:#9AA7A2; --text-3:#7C8985;
  --line:rgba(237,242,240,.10); --line-strong:rgba(237,242,240,.22);
  --bg:var(--ink); --surface:var(--ink-2); --surface-2:var(--ink-3); --tile:#0E1214; --link:var(--mint);
  --sans:"Geist","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(16px,5vw,72px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit;background:none;border:0;padding:0}

::selection{background:var(--mint);color:var(--ink)}

#sky,#web{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#web{z-index:1}

/* cursor (ruling 86, amended): the operating system draws it, recoloured soft mint with a thin
   dark edge (CW mint-arrow style 1), so it never lags. Sharp 1x and 2x images, plain fallbacks. */
html{cursor:url(/assets/cursor-arrow.png?v=12) 3 2,auto;cursor:-webkit-image-set(url(/assets/cursor-arrow.png?v=12) 1x,url(/assets/cursor-arrow@2x.png?v=12) 2x) 3 2,auto;cursor:image-set(url(/assets/cursor-arrow.png?v=12) 1x,url(/assets/cursor-arrow@2x.png?v=12) 2x) 3 2,auto}
a[href],button,[role="button"],label[for],summary,.chip,.route-card{cursor:url(/assets/cursor-hand.png?v=12) 9 3,pointer;cursor:-webkit-image-set(url(/assets/cursor-hand.png?v=12) 1x,url(/assets/cursor-hand@2x.png?v=12) 2x) 9 3,pointer;cursor:image-set(url(/assets/cursor-hand.png?v=12) 1x,url(/assets/cursor-hand@2x.png?v=12) 2x) 9 3,pointer}
button:disabled{cursor:url(/assets/cursor-arrow.png?v=12) 3 2,auto;cursor:-webkit-image-set(url(/assets/cursor-arrow.png?v=12) 1x,url(/assets/cursor-arrow@2x.png?v=12) 2x) 3 2,auto;cursor:image-set(url(/assets/cursor-arrow.png?v=12) 1x,url(/assets/cursor-arrow@2x.png?v=12) 2x) 3 2,auto}
input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),textarea{cursor:text}

/* chrome */
.site{position:relative;z-index:2;min-height:100%;display:flex;flex-direction:column}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--gutter);border-bottom:1px solid transparent;transition:background .4s,border-color .4s}
.nav.frost{background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--line)}
/* phone menu open: no filter on the nav, so the fixed menu is sized to the viewport. A swipe on the menu
   does not scroll the page behind it (touch-action, not an overflow lock: body has overflow-x:hidden, so
   html overflow:hidden would make body the scroller and reset the page to the top). Phone widths only. */
@media (max-width:820px){.nav.menu-open{backdrop-filter:none;-webkit-backdrop-filter:none}.links.open{touch-action:none;overscroll-behavior:contain}}
.brand{display:flex;align-items:center;gap:12px}
.tile{width:36px;height:36px;border-radius:8px;background:#0B0D0E;display:grid;place-items:center;flex:none;box-shadow:0 0 0 1px rgba(128,231,210,.12)}
.tile svg{width:21px;height:21px;display:block}
.brand .wm{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.links{display:flex;gap:2px}
.links a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);padding:10px 13px;border-radius:999px;transition:color .25s;position:relative}
.links a:hover,.links a[aria-current]{color:var(--text)}
.links a[aria-current]::after{content:"";position:absolute;left:13px;right:13px;bottom:6px;height:1px;background:var(--mint)}
.menu{display:none;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:10px 14px;border:1px solid var(--line-strong);border-radius:999px;position:relative;z-index:31}
@media (max-width:820px){.links{display:none}.links.open{display:flex;position:fixed;inset:0;z-index:30;flex-direction:column;justify-content:center;align-items:center;gap:8px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(20px)}.links.open a{font-size:16px;padding:14px 20px}.menu{display:inline-block}}

/* buttons */
.b{position:relative;display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;font-weight:500;font-size:14px;border:1px solid var(--line-strong);color:var(--text);overflow:hidden;transition:transform .12s var(--ease),border-color .3s,box-shadow .3s;will-change:transform;isolation:isolate;font-family:var(--mono);letter-spacing:.04em}
.b .sheen{position:absolute;inset:-1px;border-radius:inherit;background:radial-gradient(110px 110px at var(--mx,50%) var(--my,50%),rgba(104,210,186,.32),transparent 60%);opacity:0;transition:opacity .3s;z-index:-1}
.b:hover .sheen{opacity:1}
.b.pri{background:var(--mint);color:var(--ink);border-color:var(--mint)}
.b.pri .sheen{background:radial-gradient(110px 110px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.45),transparent 60%)}
.b.pri:hover{box-shadow:0 8px 30px rgba(104,210,186,.28)}
.b:active,.b.down{transform:scale(.965)}
.b:focus-visible,.links a:focus-visible,.doors a:focus-visible,.chip:focus-visible,.menu:focus-visible,.x:focus-visible,.send:focus-visible,.back:focus-visible,.brand:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:999px}
.door:focus-within{outline:none}
.ar{display:inline-block;transition:transform .3s var(--ease)}
.b:hover .ar{transform:translateX(4px)}

/* ---- pages ---- */
main{flex:1;display:flex;flex-direction:column}
.page{display:flex;flex:1;flex-direction:column;animation:vin .3s var(--ease)}
.page.enter{animation:vin .3s var(--ease)}
@keyframes vin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* HOME = the entrance */
.enter-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px var(--gutter) 120px;gap:28px;min-height:calc(100svh - 70px)}
.mark{width:96px;height:96px;border-radius:22px;background:#0B0D0E;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(104,210,186,.14),0 0 60px rgba(104,210,186,.12);animation:breathe 6s ease-in-out infinite;position:relative}
.mark svg{width:54px;height:54px}
.mark::after{content:"";position:absolute;inset:-14px;border-radius:32px;border:1px solid rgba(104,210,186,.10);animation:ring 6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);box-shadow:0 0 0 1px rgba(104,210,186,.14),0 0 40px rgba(104,210,186,.08)}50%{transform:scale(1.03);box-shadow:0 0 0 1px rgba(104,210,186,.22),0 0 80px rgba(104,210,186,.18)}}
@keyframes ring{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
.term{font-family:var(--mono);font-size:clamp(16px,1.7vw,21px);letter-spacing:.02em;color:var(--text);min-height:1.4em;display:flex;flex-direction:column;align-items:center;gap:6px}
.term .l{white-space:pre-wrap}
/* fix pack 5: the typed line holds its line height from first paint and spans the full width with
   its text centred, so the box itself never moves while letters arrive (the text still grows from the middle) */
#t1{min-height:1lh;align-self:stretch;text-align:center}
.term{align-self:stretch}
.term .l2{color:var(--text-2);font-size:.85em}
.term .c{display:none}
@keyframes blink{50%{opacity:0}}

.door{display:flex;align-items:center;gap:8px;width:min(560px,100%);padding:6px 6px 6px 18px;border-radius:999px;background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--line-strong);backdrop-filter:blur(10px);transition:border-color .3s,box-shadow .3s}
.door:focus-within{border-color:var(--mint);box-shadow:0 0 0 4px rgba(104,210,186,.12)}
.door{position:relative}
.door .caret{position:absolute;left:18px;top:50%;width:1.5px;height:17px;margin-top:-8px;background:var(--mint);border-radius:1px;animation:breathe-caret 1.6s ease-in-out infinite;pointer-events:none;opacity:.45;box-shadow:0 0 8px rgba(104,210,186,.35)}
@keyframes breathe-caret{0%,100%{opacity:.12}50%{opacity:.5}}
.door:focus-within .caret,.door.filled .caret{display:none}
.door .ghost{position:absolute;left:26px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:15px;pointer-events:none;white-space:nowrap;overflow:hidden;max-width:calc(100% - 90px)}
.door input::placeholder{color:transparent}
.door:focus-within .ghost,.door.filled .ghost{display:none!important}
.door input{flex:1;min-width:0;font-size:15px;padding:10px 0 10px 8px;outline:none;color:var(--text);caret-color:var(--mint)}
.door .send{width:40px;height:40px;border-radius:50%;background:var(--mint);color:var(--ink);display:grid;place-items:center;flex:none;transition:transform .12s var(--ease)}
.door .send:active{transform:scale(.92)}
.door .send svg{width:16px;height:16px}
.doors{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.doors a{padding:9px 14px;border-radius:999px;color:var(--text-2);border:1px solid transparent;transition:color .25s,border-color .25s}
.doors a:hover{color:var(--text);border-color:var(--line-strong)}
.doors .dot{color:var(--text-3);padding:9px 2px}
.strap{position:absolute;left:0;right:0;bottom:calc(84px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;gap:22px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);padding:0 var(--gutter);flex-wrap:wrap;text-align:center}
.strap b{font-weight:400;color:var(--text-2)}
.doors{order:4}
.door{order:3}


/* inner pages: short, quiet */
.inner{padding:clamp(56px,9vh,110px) var(--gutter) 140px;max-width:1120px;width:100%;margin:0 auto}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--link);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}
.inner h1{font-weight:400;letter-spacing:-.03em;line-height:1.08;margin:18px 0 0;font-size:clamp(30px,3.8vw,52px);max-width:20ch;text-wrap:balance}
.inner .lead{margin:18px 0 0;max-width:56ch;color:var(--text-2);font-weight:300;font-size:clamp(16px,1.2vw,18px)}
.inner .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.rows{margin-top:56px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:200px 1fr;gap:16px 40px;padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline}
.row .k{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.row p{margin:0;color:var(--text-2);font-weight:300;max-width:60ch}
.row p b{font-weight:500;color:var(--text)}
@media (max-width:700px){.row{grid-template-columns:1fr;gap:8px}}
.inner.wide{max-width:1240px}
.lab{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:44px}
@media (max-width:1000px){.lab{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.lab{grid-template-columns:1fr}}
.nodates{margin:44px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.log{margin-top:64px;max-width:720px}
.log .eyebrow{margin-bottom:14px}
.le{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--line);align-items:baseline}
.le:last-child{border-bottom:1px solid var(--line)}
.lm{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.lt2{color:var(--text-2);font-weight:300}
.lt{position:relative;border-radius:18px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .45s var(--ease),border-color .4s;max-width:100%}
.lt:hover{border-color:var(--line-strong)}
.lt .vis{position:relative;height:160px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 40%,transparent)}
.lt canvas{position:absolute;inset:0;width:100%;height:100%}
.lt .t{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 18px 18px}
.lt h3{margin:0;font-weight:500;font-size:18px;letter-spacing:-.02em}
.lt p{margin:4px 0 0;color:var(--text-2);font-size:14px;font-weight:300}
.lt .st{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);white-space:nowrap;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--bg) 60%,transparent)}
/* intake: one question at a time */
.intake{margin-top:64px;padding:28px 26px 26px;border-radius:20px;background:color-mix(in srgb,var(--surface) 90%,transparent);border:1px solid var(--line);max-width:680px}
.intake .top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}
.intake .top .eyebrow{color:var(--text-2)}
.intake .top .eyebrow::before{background:var(--mint);box-shadow:0 0 10px var(--mint)}
.dots{display:flex;gap:6px}
.dots i{width:18px;height:2px;border-radius:2px;background:var(--line-strong);transition:background .3s}
.dots i.on{background:var(--mint)}
.step{display:none;flex-direction:column;gap:16px}
.step.on{display:flex;animation:vin .45s var(--ease)}
.step.on.still{animation:none}
.step .q{margin:0;font-weight:400;font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;line-height:1.25;text-wrap:balance}
.step .hint{margin:-6px 0 0;color:var(--text-3);font-size:14px;font-weight:300}
.field{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 16px;border-radius:14px;border:1px solid var(--line-strong);background:color-mix(in srgb,var(--bg) 60%,transparent);transition:border-color .3s,box-shadow .3s}
.field:focus-within{border-color:var(--mint);box-shadow:0 0 0 4px rgba(104,210,186,.12)}
.field input,.field textarea{flex:1;min-width:0;font-size:15px;padding:10px 0;outline:none;color:var(--text);resize:none;line-height:1.5}
.field textarea{padding:12px 0;min-height:66px}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:9px 13px;border-radius:999px;border:1px solid var(--line-strong);color:var(--text-2);transition:border-color .25s,color .25s,background .25s}
.chip[aria-pressed="true"]{background:var(--mint);color:var(--ink);border-color:var(--mint)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.step .nav2{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px}
.step .back{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);padding:8px 0}
.step .back:hover{color:var(--text)}
.intake .done{display:none;flex-direction:column;gap:10px;align-items:flex-start}
.intake .done.on{display:flex;animation:vin .45s var(--ease)}
.intake .done h3{margin:0;font-weight:400;font-size:22px;letter-spacing:-.02em}
.intake .done p{margin:0;color:var(--text-2);font-weight:300}
.price{margin-top:44px;padding:22px 24px;border-radius:16px;border:1px dashed var(--line-strong);color:var(--text-2);font-weight:300;max-width:60ch}
.price b{font-weight:500;color:var(--text)}
.contact .door{margin-top:30px}
.x{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);color:var(--text-2);transition:color .25s,border-color .25s,transform .12s var(--ease)}
.x svg{width:14px;height:14px}
.x:hover{color:var(--text);border-color:var(--mint)}
.x:active{transform:scale(.94)}
.foot .r{display:flex;align-items:center;gap:16px}
.strap .x{margin-left:6px}
.foot{padding:24px var(--gutter) calc(96px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;color:var(--text-3);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.foot .est{margin-left:12px}
.foot .est b{font-weight:400;color:var(--text-2)}
.page.home .enter-wrap{min-height:0}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,10px);z-index:49;font-family:var(--mono);font-size:12px;color:#C8D6D1;background:rgba(12,16,19,.9);border:1px solid rgba(237,242,240,.16);padding:10px 14px;border-radius:12px;opacity:0;transition:opacity .4s,transform .4s var(--ease);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* hover answer (ruling 86): buttons get a mint border and a soft 4px mint glow; links get brighter
   text and a mint underline. Magnetic movement and press states are unchanged. */
.b:hover,.door .send:hover,.chip:hover,.snd button:hover,.x:hover,.route-card:hover,.doors a:hover{border-color:var(--mint);box-shadow:0 0 0 4px rgba(104,210,186,.12)}
.b.pri:hover{box-shadow:0 0 0 4px rgba(104,210,186,.12),0 8px 30px rgba(104,210,186,.28)}
.links a:hover,.pv-link:hover,.step .back:hover,.route-back:hover,.reply .back:hover{color:var(--text);text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:1px;text-underline-offset:5px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* honeypot (bots only) */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0}
/* click sound toggle (off until the visitor turns it on) */
.snd{display:inline-flex;align-items:center;gap:4px}
.snd .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);padding:0 6px 0 0}
.snd button{font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:6px 10px;border-radius:999px;color:var(--text-2);border:1px solid transparent;transition:background .25s,color .25s,border-color .25s}
.snd button:hover{color:var(--text);border-color:var(--line-strong)}
.snd button[aria-pressed="true"]{background:rgba(104,210,186,.10);border-color:rgba(104,210,186,.35);color:var(--mint)}
.snd button:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.strap .snd{margin-left:6px}
.foot .snd{margin-left:8px}

/* privacy link in the footer and the entrance strap (ruling 75) */
.pv-link{color:inherit;text-decoration:none;transition:color .25s}
.pv-link:hover{color:var(--text)}
.pv-link:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:4px}
.inner .lead .ext{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.inner .lead .ext:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:4px}

/* "Other" chip reveals a plain text box (fix pack, Tracy 2026-09-22) */
.otherbox{display:none;margin-top:-4px}
.otherbox.on{display:flex}

/* a refused send says so on the page instead of only opening a mail draft (ruling 78 wording) */
.sendstate{display:none;margin:12px 0 0;font-size:15px;font-weight:400;line-height:1.5}
.sendstate.on{display:block}
.sendstate.bad{color:var(--text-2)}
.sendstate.ok{color:var(--mint)}
.sendstate a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.sendstate a:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:4px}

/* home box routing (ruling 83) */
.route,.reply{width:min(560px,100%);display:none;flex-direction:column;gap:14px;text-align:left}
.route.on,.reply.on{display:flex;animation:vin .4s var(--ease)}
.route-echo{margin:0;color:var(--text-2);font-weight:300;font-size:15px;line-height:1.5;padding:12px 16px;border-radius:14px;background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--line)}
.route-q,.reply-q{margin:0;font-weight:400;font-size:clamp(18px,1.8vw,22px);letter-spacing:-.02em;text-align:center}
.route-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:560px){.route-cards{grid-template-columns:1fr}}
.route-card{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;padding:14px 16px;border-radius:14px;border:1px solid var(--line-strong);background:color-mix(in srgb,var(--surface) 55%,transparent);transition:border-color .25s,background .25s,transform .12s var(--ease)}
.route-card:hover{border-color:var(--mint);background:color-mix(in srgb,var(--surface) 80%,transparent)}
.route-card:active{transform:scale(.985)}
.route-card:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.route-card b{font-weight:500;font-size:15px;color:var(--text)}
.route-card span{font-weight:300;font-size:13px;color:var(--text-2);line-height:1.45}
.route-back{align-self:center;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);padding:8px 12px}
.route-back:hover{color:var(--text)}
.route-back:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:999px}
.reply .nav2{display:flex;justify-content:space-between;align-items:center;gap:12px}
.reply .back{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);padding:8px 0}
.reply .back:hover{color:var(--text)}
.b[disabled],.send[disabled]{opacity:.55;pointer-events:none}
/* ---- fix pack 6: phones (kept last so it wins over earlier rules). Desktop is unchanged: every rule below is scoped to narrow screens
   or touch pointers. No copy changes. ---- */
/* Touch: every link and button offers a 44 px target (WCAG 2.5.5 / Apple HIG), no text under 12 px,
   and form fields at 16 px so iOS Safari does not zoom the page on focus. */
@media (max-width:820px),(pointer:coarse){
  .brand{min-height:44px}
  .menu{min-height:44px;min-width:44px}
  .door .send{width:44px;height:44px}
  .door input,.field input,.field textarea{font-size:16px}
  .door input,.field input{min-height:44px}
  .door .ghost{font-size:16px;text-overflow:ellipsis;max-width:calc(100% - 82px)}
  .pv-link{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
  .x{width:44px;height:44px}
  .snd .lbl{font-size:12px}
  .snd button{font-size:12px;min-height:44px;min-width:44px;padding:6px 12px}
  .strap,.foot{font-size:12px}
  .lt .st{font-size:12px}
  .step .back,.route-back,.reply .back{min-height:44px;min-width:44px;display:inline-flex;align-items:center}
  .chip{min-height:44px;min-width:44px}
  .doors a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .doors .dot{display:inline-flex;align-items:center}
  .links a{min-height:44px;display:inline-flex;align-items:center}
  /* Home: the strap joins the flow at the foot of the page, so nothing can collide with it at any
     width or height (landscape phones included). The welcome block drops its full-screen minimum
     and takes the space the page has above the strap (.page already fills the screen under the nav). */
  .enter-wrap{min-height:0;padding-bottom:40px}
  /* the current-page underline follows the text, not the (now 44 px) link box */
  .links a[aria-current]::after{bottom:calc(50% - 13.5px)}
  .strap{position:static;order:5;padding:8px var(--gutter) calc(16px + env(safe-area-inset-bottom,0px));gap:6px 16px;align-items:center}
  .strap .x{margin-left:0}
}
/* Narrow screens: the four doors form a 2x2 grid without the dot separators; the sound
   switch takes its own centred line; the footer wraps into tidy rows. */
@media (max-width:820px){
  .enter-wrap{padding:24px var(--gutter) 24px;gap:22px}
  .strap .snd{flex-basis:100%;justify-content:center;margin:2px 0 0}
  .doors{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;width:min(360px,100%)}
  .doors .dot{display:none}
  .foot{padding:20px var(--gutter) calc(28px + env(safe-area-inset-bottom,0px));align-items:center;row-gap:8px}
  .foot .r{flex-wrap:wrap;gap:8px 14px;width:100%}
  .foot .snd{margin-left:auto}
}
/* Short phones (e.g. 320x568): tighter spacing and a smaller mark so the whole home fits the screen. */
@media (max-width:820px) and (max-height:640px){
  .enter-wrap{padding:16px var(--gutter) 12px;gap:14px}
  .mark{width:72px;height:72px;border-radius:18px}
  .mark svg{width:40px;height:40px}
  .mark::after{inset:-10px;border-radius:26px}
  .doors{gap:0 8px}
}