@font-face{font-family:Archivo;src:url(/fonts/archivo-v1.woff2) format("woff2");font-weight:600 720;font-stretch:100% 112%;font-display:swap}
@font-face{font-family:ArchivoD;src:local("Arial Bold"),local("Arial-BoldMT"),local("Arial"),local("Roboto"),local("Helvetica Neue");font-weight:700;size-adjust:111%;ascent-override:79.1%;descent-override:18.9%;line-gap-override:0%}
@font-face{font-family:ArchivoH;src:local("Arial Bold"),local("Arial-BoldMT"),local("Arial"),local("Roboto"),local("Helvetica Neue");font-weight:700;size-adjust:107%;ascent-override:82.1%;descent-override:19.6%;line-gap-override:0%}
@font-face{font-family:ArchivoS;src:local("Arial Bold"),local("Arial-BoldMT"),local("Arial"),local("Roboto"),local("Helvetica Neue");font-weight:700;size-adjust:103%;ascent-override:85.2%;descent-override:20.4%;line-gap-override:0%}
:root{
/* Route map world (owner's choice, 2026-11-01): near-white ground, the out-line orange, the back-line violet, teal for arrival. */
--ground:#fbfbf9;--surface:#fff;--sunk:#f2f3f1;--ink:#101418;--ink-2:#535a63;--line:#7f8790;--hair:#e3e5e2;
--out:#c4400c;--out-draw:#e8521e;--out-ink:#fff;--out-tint:#fdeee7;--back:#6b4fd8;--back-tint:#efebfd;--arrive:#0b7a72;--arrive-tint:#e3f3f1;
--alert:#b3261e;--alert-tint:#fbe9e7;--code:#f2f3f1;--shadow:0 1px 2px rgba(16,20,24,.06),0 8px 24px -12px rgba(16,20,24,.18);
--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
--r:10px;--r-panel:14px;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
--ground:#0f1216;--surface:#171b21;--sunk:#12161b;--ink:#eef1f4;--ink-2:#a3abb5;--line:#6f7883;--hair:#2a3038;
--out:#ff7a45;--out-draw:#ff7a45;--out-ink:#0f1216;--out-tint:#3a2116;--back:#9b85ff;--back-tint:#25204a;--arrive:#3cc7bb;--arrive-tint:#12332f;
--alert:#ff7a6e;--alert-tint:#3a1d1a;--code:#1d2228;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);color-scheme:dark}}
:root[data-theme=dark]{
--ground:#0f1216;--surface:#171b21;--sunk:#12161b;--ink:#eef1f4;--ink-2:#a3abb5;--line:#6f7883;--hair:#2a3038;
--out:#ff7a45;--out-draw:#ff7a45;--out-ink:#0f1216;--out-tint:#3a2116;--back:#9b85ff;--back-tint:#25204a;--arrive:#3cc7bb;--arrive-tint:#12332f;
--alert:#ff7a6e;--alert-tint:#3a1d1a;--code:#1d2228;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);color-scheme:dark}
/* Headings: Archivo at weight 700 (owner's choice, 2026-11-01); everything people read or type stays on the system sans. */
:root{--disp:Archivo,ArchivoD,var(--sans);--head:Archivo,ArchivoH,var(--sans);--sub:Archivo,ArchivoS,var(--sans)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--ground);color:var(--ink);font:400 1rem/1.5 var(--sans);
min-height:100vh;display:flex;flex-direction:column;accent-color:var(--out);caret-color:var(--back)}
@view-transition{navigation:auto}
::selection{background:var(--back-tint);color:var(--ink)}
h1,h2,h3{text-wrap:balance;margin:0}
p,li{text-wrap:pretty}
p{margin:0}
a{color:var(--ink);text-underline-offset:.2em;text-decoration-thickness:1px;text-decoration-color:var(--ink-2)}
@media (hover:hover){a:hover{text-decoration-thickness:2px;text-decoration-color:var(--back)}}
:focus-visible{outline:2px solid var(--back);outline-offset:2px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-100px;z-index:10;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);padding:12px 16px;border-radius:var(--r);font-weight:600}
.skip:focus{top:8px}
html.js .nojs{display:none!important}
html:not(.js) .js-only{display:none!important}
[hidden]{display:none!important}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wait-line,.clock,.count,.digits,.num{font-variant-numeric:tabular-nums}

/* header band: white, one hairline, the route-stop wordmark */
.band{background:var(--surface);border-bottom:1px solid var(--hair)}
.band-in{max-width:1360px;margin:0 auto;padding:0 16px;height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px}
@media (min-width:768px){.band-in{height:64px;padding:0 32px}}
.wm{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;color:var(--ink);font:700 1.25rem/1 var(--head);font-stretch:108%;letter-spacing:-.025em}
.wm svg{width:30px;height:30px;flex:none;overflow:visible}
.wm .wm-out{stroke:var(--out-draw)}
.wm .wm-back{stroke:var(--back)}
.wm .wm-stop{fill:var(--surface);stroke:var(--ink)}
.acct{position:relative}
.acct>summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border-radius:50%}
.acct>summary::-webkit-details-marker{display:none}
.acct .ini{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--sunk);color:var(--ink);border:1px solid var(--line);font-weight:650}
.menu{position:absolute;right:0;top:calc(100% + 6px);z-index:5;min-width:208px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-panel);box-shadow:var(--shadow);padding:6px;margin:0;list-style:none}
.menu a,.menu button{display:flex;align-items:center;width:100%;min-height:48px;padding:0 12px;font:inherit;color:var(--ink);background:none;border:0;border-radius:8px;text-align:left;text-decoration:none;cursor:pointer}
@media (hover:hover){.menu a:hover,.menu button:hover{background:var(--sunk)}}

/* page */
main{flex:1;width:100%;max-width:720px;margin:0 auto;padding:24px 16px 64px}
main.wide{max-width:1200px}
main.narrow{max-width:472px}
.tab-body{max-width:656px}
@media (min-width:768px){main{padding:40px 32px 96px}main.narrow{padding-top:64px}}
.sheet{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-panel);box-shadow:var(--shadow)}
.pad{padding:20px}
@media (min-width:768px){.pad{padding:28px}}
.h1{font:700 1.75rem/1.15 var(--head);font-stretch:108%;letter-spacing:-.03em;overflow-wrap:anywhere}
@media (min-width:768px){.h1{font-size:2rem}}
.h2{font:700 1.25rem/1.35 var(--sub);font-stretch:104%;letter-spacing:-.02em}
.lead{margin-top:12px;color:var(--ink)}
.meta{color:var(--ink-2);font-size:.875rem;line-height:1.43}
.stack>*+*{margin-top:24px}
.stack-s>*+*{margin-top:12px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.between{justify-content:space-between}
.end{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.end .btn{order:2}
@media (max-width:767px){.end .btn{width:100%}.end{flex-direction:column-reverse;align-items:stretch;text-align:center}}

/* buttons: primary orange fill, secondary outlined, danger red-outlined */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px;border-radius:var(--r);border:1px solid var(--line);font:600 1rem/1.25 var(--sans);text-decoration:none;cursor:pointer;background:var(--surface);color:var(--ink);text-align:center;transition:transform .15s cubic-bezier(.16,1,.3,1)}
.btn.primary{background:var(--out);color:var(--out-ink);border-color:var(--out)}
.btn.danger{border-color:var(--alert);color:var(--alert)}
.btn.big{min-height:52px;width:100%}
.btn[aria-disabled=true]{opacity:.7;cursor:progress}
@media (hover:hover){.btn:hover{filter:brightness(.94);text-decoration:none}.btn.danger:hover{background:var(--alert-tint);filter:none}}
.btn:active{filter:brightness(.9);transform:translateY(1px)}
.link{background:none;border:0;padding:12px 0;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:.2em;cursor:pointer;min-height:44px;display:inline-flex;align-items:center}

/* panels (ruled boxes are gone): white, a hairline, a soft shadow, 14 px corners */
.boxes{display:flex;flex-direction:column;gap:16px}
.box{border:1px solid var(--hair);border-radius:var(--r-panel);box-shadow:var(--shadow);background:var(--surface);margin:0;padding:20px;min-width:0}
@media (min-width:768px){.box{padding:28px}}
fieldset.box{display:block}
.box legend,.box .legend{width:100%;padding:0;margin:0 0 16px;display:flex;gap:10px;align-items:baseline;font:700 1.125rem/1.35 var(--sub);font-stretch:104%;letter-spacing:-.02em}
.box legend{float:left}
.box legend+*{clear:both}
.field{display:flex;flex-direction:column;gap:8px}
.field+.field{margin-top:24px}
label,.label{font-weight:600}
.hint{color:var(--ink-2);font-size:.875rem;line-height:1.43}
input[type=text],input[type=url],input[type=password],input[type=number],input:not([type]),textarea,select{width:100%;font:400 1rem/1.5 var(--sans);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 14px;min-height:48px;caret-color:var(--back)}
textarea{min-height:104px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--back)}
::placeholder{color:var(--ink-2);opacity:1}
[aria-invalid=true]{border-color:var(--alert);box-shadow:0 0 0 1px var(--alert)}
[aria-invalid=true]:focus-visible{outline:2px solid var(--back);outline-offset:2px}
.ferr{display:flex;gap:8px;align-items:flex-start;background:var(--alert-tint);color:var(--ink);padding:8px 12px;border-radius:8px;font-size:.875rem;line-height:1.43}
.ferr .icon{color:var(--alert);width:18px;height:18px;margin-top:1px}
.count{align-self:flex-end;color:var(--ink-2);font-size:.875rem}
.count.over{color:var(--ink);font-weight:650;background:var(--alert-tint);padding:2px 8px;border-radius:6px}
.opts{display:grid;gap:8px}
.opt{position:relative;display:flex;align-items:center;gap:12px;min-height:48px;padding:12px 16px;cursor:pointer;font-weight:600;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.opts.two{grid-template-columns:1fr 1fr}
@media (max-width:420px){.opts.two{grid-template-columns:1fr}}
.opt input[type=radio]{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opt-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.opt .mins{position:relative;z-index:2;width:5.5rem;min-height:44px;padding:6px 10px;font-weight:400}
.opt .dot{width:20px;height:20px;border:2px solid var(--line);border-radius:50%;flex:none;display:grid;place-items:center;background:var(--surface)}
.opt:has(input:checked){background:var(--out-tint);border-color:var(--out);box-shadow:inset 0 0 0 1px var(--out)}
.opt:has(input:checked) .dot{border-color:var(--out)}
.opt:has(input:checked) .dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--out)}
.opt:has(input:focus-visible){outline:2px solid var(--back);outline-offset:2px;z-index:1}
@media (hover:hover){.opt:hover{border-color:var(--ink-2)}}
.photo-check{display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer;font-weight:600}
.photo-check input{width:24px;height:24px;flex:none;margin:0;cursor:pointer;accent-color:var(--arrive)}
.photo-check:has(input:focus-visible){outline:2px solid var(--back);outline-offset:2px;border-radius:var(--r)}
.colour{display:flex;gap:12px;align-items:center}
.colour input[type=color]{width:48px;height:48px;padding:3px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);cursor:pointer;flex:none}
.colour input[type=text]{max-width:10rem;font-family:var(--mono)}
.swatches{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.sw{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);cursor:pointer;padding:0;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgb(255 255 255/.24)}
.sw .icon{width:20px;height:20px;stroke-width:3;visibility:hidden}
.sw[aria-checked=true]{box-shadow:inset 0 0 0 1px rgb(255 255 255/.24),0 0 0 3px var(--surface),0 0 0 5px var(--back)}
.sw[aria-checked=true] .icon{visibility:visible}
.sw:focus-visible{outline-offset:8px}
/* a folded group: a quiet outlined row; the panels inside it are panels, never cards in a card */
details.more{margin-top:16px}
details.more>summary{cursor:pointer;min-height:52px;display:flex;align-items:center;padding:12px 16px;font-weight:600;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
details.more[open]>summary{margin-bottom:16px}

/* status pills: a stop dot and the words; teal arrived, neutral waiting, alert a problem. Never colour alone. */
.state{display:inline-flex;align-items:center;gap:8px;font:600 .875rem/1.4 var(--sans);color:var(--ink);cursor:default;max-width:100%;overflow-wrap:anywhere;padding:4px 12px 4px 10px;border:1px solid var(--hair);border-radius:18px;background:var(--sunk);vertical-align:middle}
.state>span:last-child{min-width:0}
.state .dot{flex:none;width:12px;height:12px;border-radius:50%;border:3px solid var(--ink);background:var(--surface)}
.state.ok{background:var(--arrive-tint);border-color:var(--arrive)}
.state.ok .dot{background:var(--arrive);border-color:var(--arrive)}
.state.alert{background:var(--alert-tint);border-color:var(--alert)}
.state.alert .icon{flex:none;width:16px;height:16px;color:var(--alert)}
.state.wait{color:var(--ink-2)}
.state.wait .dot{border-color:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){.state.wait .dot{animation:breathe 2.4s ease-in-out 2}}
@keyframes breathe{50%{opacity:.35}}
@keyframes land{from{transform:scale(1.04);opacity:0}}

/* notices and toasts */
.note{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--hair);border-radius:12px;padding:12px 16px;background:var(--surface);box-shadow:var(--shadow);color:var(--ink)}
.note>.icon{margin-top:2px;color:var(--back)}
.note.toast>.icon{color:var(--arrive)}
.note.alert{background:var(--alert-tint);border-color:var(--alert);box-shadow:none}
.note.alert>.icon{color:var(--alert)}
.note .grow{flex:1;min-width:0}
.note a.dismiss{flex:none;min-height:44px;margin:-12px -8px -12px 0;padding:0 8px;display:inline-flex;align-items:center}
@media (prefers-reduced-motion:no-preference){.toast{animation:up .25s cubic-bezier(.16,1,.3,1)}}
@keyframes up{from{opacity:0;transform:translateY(6px)}}
.errsum{border:1px solid var(--alert);border-radius:12px;background:var(--alert-tint);padding:16px}
.errsum:focus{outline:2px solid var(--back);outline-offset:2px}
.errsum ul{margin:8px 0 0;padding-left:20px}
.errsum li{padding:2px 0}
.errsum h2{display:flex;gap:10px;align-items:center;font:700 1rem/1.5 var(--sub);font-stretch:104%}
.errsum h2 .icon{color:var(--alert)}

/* site header and tabs: an underline row with an orange current bar */
.site-head{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
@media (max-width:767px){.site-head{gap:6px;margin-bottom:16px}.site-head .h1{font-size:1.5rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.tab-lead{margin:0;max-width:40rem}
.asked{font-weight:600;color:var(--ink)}
.start-promise{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.start-promise li{display:flex;gap:10px;align-items:flex-start}
.start-promise .icon{flex:none;width:20px;height:20px;margin-top:2px;color:var(--arrive);stroke-width:2.5}
.steps-anchor{scroll-margin-top:16px}
.steps-anchor:focus{outline:none}
.head-link{color:inherit;text-decoration:none}
@media (hover:hover){.head-link:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}}
.today-n{font-weight:650}
.today-wait.late strong{color:var(--alert)}
.tabs{display:flex;border-bottom:1px solid var(--hair);margin:0 0 24px;padding:0;list-style:none;gap:4px}
.tabs li{flex:1}
@media (min-width:768px){.tabs li{flex:none}}
/* narrow phones: each tab is as wide as its word ("Answering" is the longest), never an equal fifth it spills out of */
@media (max-width:400px){.tabs{gap:0}.tabs li{flex:1 1 auto;min-width:0}.tabs a{padding:12px 3px;text-align:center;letter-spacing:-.02em}}
@media (max-width:359px){.tabs a{font-size:.9375rem}}
.tabs a{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px 8px;text-decoration:none;font-weight:600;color:var(--ink-2)}
@media (min-width:768px){.tabs a{padding:12px 20px}}
.tabs a[aria-current=page]{color:var(--ink)}
.tabs a[aria-current=page]::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--out-draw)}
@media (hover:hover){.tabs a:not([aria-current]):hover{color:var(--ink);text-decoration:none;background:var(--sunk);border-radius:8px 8px 0 0}}
/* the second row under the Answering tab: a quiet segmented row, 44px tall, that fits 320px without scrolling */
.subnav{margin:-8px 0 24px;max-width:656px}
.subnav ul{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:4px;list-style:none;background:var(--sunk);border:1px solid var(--hair);border-radius:calc(var(--r) + 4px)}
.subnav li{flex:1 1 0;min-width:0}
.subnav a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;border-radius:var(--r);text-decoration:none;font-weight:600;color:var(--ink-2);text-align:center}
@media (max-width:400px){.subnav a{padding:0 8px;font-size:.9375rem}}
.subnav a[aria-current=page]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
@media (hover:hover){.subnav a:not([aria-current]):hover{color:var(--ink);text-decoration:none}}

/* wizard rail: four stops on a route line; done stops teal with a check, the current one orange with a ring,
   the line fills orange up to it and draws the last segment when a step completes */
.rail{display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 8px;padding:0;list-style:none}
.rail li{position:relative;display:flex;min-width:0}
.rail li>a,.rail li>span{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:44px;padding:4px 2px 8px;text-decoration:none;font-weight:600;font-size:.9375rem;line-height:1.25;text-align:center;color:var(--ink-2)}
.rail a{color:var(--ink)}
.rail [aria-current=step]{color:var(--ink);font-weight:700}
.rail .num{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;border:3px solid var(--line);background:var(--surface);color:var(--ink-2);font:700 .8125rem/1 var(--sans);flex:none}
.rail li.done .num{background:var(--arrive);border-color:var(--arrive);color:var(--surface)}
.rail [aria-current=step] .num{background:var(--out);border-color:var(--out);color:var(--out-ink);box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--out-draw)}
.rail .icon{width:16px;height:16px;stroke-width:3}
.rail .nm{overflow-wrap:anywhere;text-wrap:balance}
.rail .seg{position:absolute;z-index:0;top:16px;left:calc(50% + 16px);width:calc(100% - 32px);height:4px;overflow:visible}
.rail .seg line{stroke-width:4;fill:none;stroke-dasharray:1}
.rail .seg .trk{stroke:var(--hair);stroke-dashoffset:0}
.rail .seg .fill{stroke:var(--out-draw);stroke-dashoffset:0}
.rail .seg .fill.todo{stroke-dashoffset:1}
@media (prefers-reduced-motion:no-preference){.rail .seg .fill.draw{animation:segdraw .35s cubic-bezier(.16,1,.3,1) .1s backwards}}
@keyframes segdraw{from{stroke-dashoffset:1}}
.rail-now{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:767px){.rail li>a,.rail li>span{font-size:1rem}}

/* site list: clean rows, one stop dot per site */
.sites{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:var(--r-panel);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.site{position:relative;padding:16px;display:grid;grid-template-columns:auto 1fr auto;gap:6px 14px;align-items:center}
.site+.site{border-top:1px solid var(--hair)}
@media (min-width:768px){.site{padding:20px 24px}}
.stop{width:20px;height:20px;border-radius:50%;border:4px solid var(--ink);background:var(--surface);flex:none}
.stop.live{background:var(--arrive);border-color:var(--arrive)}
.stop.alert{background:var(--alert);border-color:var(--alert)}
.stop.wait{border-color:var(--ink-2)}
.site .stop{grid-column:1;grid-row:1}
.site h2{grid-column:2;grid-row:1}
.site h2 a{text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.site h2 a::after{content:"";position:absolute;inset:0}
.site h2 a:focus-visible{outline:0}
.site:has(h2 a:focus-visible){outline:2px solid var(--back);outline-offset:-2px}
@media (hover:hover){.site:hover{background:var(--ground)}}
.site .go{grid-column:3;grid-row:1;display:grid;place-items:center;font:400 1.75rem/1 var(--sans);color:var(--ink-2);align-self:center}
.head-state{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.plan-start{font-weight:600}
.site .status{grid-column:2/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;color:var(--ink-2);overflow-wrap:anywhere}
.site .status a{position:relative;z-index:1;color:var(--ink)}
/* the status pill is one line (its dates are short); only a very narrow phone may wrap it, never the text beside it */
.site .status:not(.pills) .state{flex:none;white-space:nowrap;overflow-wrap:normal}
@media (max-width:359px){.site .status:not(.pills) .state{flex:0 1 auto;white-space:normal;overflow-wrap:anywhere}}
.site .where{min-width:0}
.site .row-note{grid-column:2/-1;position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:space-between;margin-top:6px;padding:12px 16px;background:var(--out-tint);border-radius:12px}
.site .row-note.alert{background:var(--alert-tint)}
.site .row-note p{flex:1 1 16rem}
.list-head{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.attn{display:flex;gap:10px;align-items:center;font-weight:600}
.attn .icon{color:var(--alert)}
.attn a{min-height:44px;display:inline-flex;align-items:center}
.links{list-style:none;margin:0;padding:0}
.links li+li{border-top:1px solid var(--hair)}
.links a{display:flex;align-items:center;min-height:48px;font-weight:600}
.links a>span,.site .row-note p,.attn a{min-width:0;overflow-wrap:anywhere}
fieldset.bare{border:0;margin:0;padding:0;min-width:0;position:relative}
.remove-box{margin-top:32px}
/* a box placed straight in a .stack keeps the stack's gap (.box resets margins) */
.stack>.box+*,.stack>*+.box{margin-top:24px}
@media (max-width:767px){.list-head .btn{width:100%}}

/* snippet and steps */
.snippet{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:var(--r);background:var(--code);overflow:hidden}
.snippet code{flex:1;min-width:0;white-space:normal;overflow-wrap:anywhere;word-break:break-all;padding:12px 14px;font:400 .9375rem/1.6 var(--mono);display:flex;align-items:center}
.snippet .btn{border-radius:0;border-width:0 0 0 1px;min-height:48px;flex:none}
.steps{margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:28px 1fr;gap:12px;padding:12px 0}
.steps li+li{border-top:1px solid var(--hair)}
.steps li>*{min-width:0}
.steps li::before{content:counter(s);width:28px;height:28px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--ink);background:var(--surface);font:700 .8125rem/1 var(--sans);font-variant-numeric:tabular-nums}
.platforms{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;list-style:none;margin:0;padding:0}
@media (min-width:768px){.platforms{grid-template-columns:repeat(3,1fr)}}
.platforms a{display:flex;align-items:center;min-height:48px;padding:8px 14px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;font-weight:600;background:var(--surface)}
.platforms a[aria-current=true]{background:var(--out-tint);border-color:var(--out);box-shadow:inset 0 0 0 1px var(--out)}
@media (hover:hover){.platforms a:not([aria-current]):hover{border-color:var(--ink-2)}}
.origins{list-style:none;margin:0 0 16px;padding:0}
.origins li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 0;border-bottom:1px solid var(--hair);overflow-wrap:anywhere}
.origins form{flex:none}
.origins .btn,.row-actions .btn{min-height:44px}
.row-actions{display:flex;gap:16px;flex:none;align-items:center}

/* look tab and wizard step 2: the form beside the live preview in a soft device-like frame */
.split{display:flex;flex-direction:column;gap:24px}
.pv{border:1px solid var(--hair);border-radius:24px;background:var(--sunk);padding:12px;box-shadow:var(--shadow)}
.pv-frame{display:block;width:100%;height:360px;border:1px solid var(--line);border-radius:14px;background:var(--ground)}
.pv-frame:focus{outline:2px solid var(--back);outline-offset:2px}
.pv-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:12px 4px 4px}
.pv-ground{border:0;margin:0;padding:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pv-ground legend{float:left;margin-right:8px;font-weight:600;color:var(--ink)}
.pv-ground .opts{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.pv-ground .opt{min-height:44px;padding:8px 12px;border:0;border-radius:0}
.pv-ground .opt+.opt{border-left:1px solid var(--line)}
.pv-ground .opt:has(input:checked){box-shadow:none}
.pv-cap{padding:4px 4px 4px}
.still{position:relative;padding:16px;height:360px;background:var(--ground);overflow:hidden;border:1px solid var(--line);border-radius:14px}
.still .mock{height:100%;background:repeating-linear-gradient(to bottom,var(--hair) 0 12px,transparent 12px 32px);background-size:70% 100%;background-repeat:no-repeat;opacity:.7}
.still .launch{position:absolute;right:16px;bottom:16px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center}
.still.left .launch{right:auto;left:16px}
.actbar{margin-top:24px;display:flex;gap:12px;align-items:center;justify-content:flex-end}
.after-bar{margin-top:12px}
.pv-open{gap:10px}
.dotl{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;border:1px solid var(--line)}
.pv-close{display:none}
@media (max-width:1279px){
/* the fields come first; the preview is a sheet she opens from the bar, and the frame stays mounted meanwhile */
html:not(.js) .split>.pv{order:2}
html.js .pv{position:fixed;left:0;right:0;bottom:0;z-index:40;max-height:88vh;overflow:auto;border-radius:24px 24px 0 0;border-width:1px 0 0;visibility:hidden;transform:translateY(100%);box-shadow:0 -8px 32px rgb(0 0 0/.25)}
html.js .pv.open{visibility:visible;transform:none}
@media (prefers-reduced-motion:no-preference){html.js .pv{transition:transform .3s cubic-bezier(.16,1,.3,1),visibility 0s linear .3s}html.js .pv.open{transition:transform .3s cubic-bezier(.16,1,.3,1),visibility 0s}}
html.pv-on body{overflow:hidden}
.pv-close{display:inline-flex}
.pv-bar{position:sticky;top:0;background:var(--sunk);z-index:1;padding-top:4px}
html.js .pv .pv-frame{height:min(560px,calc(88vh - 140px))}
.actbar{position:sticky;bottom:0;z-index:5;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-panel);box-shadow:var(--shadow);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));justify-content:stretch}
.actbar>*{flex:1}
.actbar .btn{width:auto}
html:not(.js) .actbar{justify-content:flex-end}
}
@media (max-width:767px){.actbar{margin-left:-16px;margin-right:-16px;border-width:1px 0 0;border-radius:0}}
@media (min-width:1280px){
.actbar .pv-open{display:none}
main.wide .split{flex-direction:row;align-items:flex-start}
main.wide .split>.form{flex:7;min-width:0}
main.wide .split>.pv{flex:5;position:sticky;top:16px;max-width:420px;max-height:calc(100vh - 32px);overflow:auto}
.pv-frame,.still{height:min(560px,calc(100vh - 160px));min-height:400px}
}

/* waiting (login, first message, payment): a route dot travels a short line, beside the counted words */
.wait-box{display:flex;flex-direction:column;gap:16px}
.route-wait{display:inline-block;position:relative;flex:none;width:72px;height:14px;vertical-align:middle}
.route-wait::before{content:"";position:absolute;left:0;right:0;top:5px;height:4px;border-radius:2px;background:var(--hair)}
.route-wait .rw-dot{position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--surface);border:3px solid var(--out-draw);transform:translateX(29px)}
@media (prefers-reduced-motion:no-preference){.route-wait .rw-dot{animation:ride 1.8s cubic-bezier(.45,0,.25,1) 2}}
@keyframes ride{0%{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(58px);opacity:0}}
.wait-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.code-check{font:650 1.125rem/1.4 var(--sans)}
.digits{display:flex;gap:8px;margin-top:8px}
.code-hint{display:block;margin-top:8px;font-weight:400}
.digits span{display:inline-grid;place-items:center;width:40px;height:48px;border:2px solid var(--ink);background:var(--surface);color:var(--ink);font:700 1.375rem/1 var(--mono);border-radius:var(--r)}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.checks li>span{display:flex;align-items:center;gap:10px;min-height:28px}
.checks li>span>span:last-child{min-width:0;overflow-wrap:anywhere}
.checks .todo{color:var(--ink-2)}
.checks .done{font-weight:600}
.box-tick{flex:none;width:22px;height:22px;border:3px solid var(--ink-2);border-radius:50%;display:grid;place-items:center;background:var(--surface)}
.done .box-tick{border-color:var(--arrive);background:var(--arrive);color:var(--surface)}
.box-tick .icon{width:14px;height:14px;stroke-width:3.5}

/* footer */
.foot{border-top:1px solid var(--hair);background:var(--surface)}
.foot-in{max-width:1360px;margin:0 auto;padding:24px 16px 32px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;font-size:.875rem;color:var(--ink-2)}
@media (min-width:768px){.foot-in{padding:24px 32px 32px}}
.foot a{color:var(--ink);min-height:44px;display:inline-flex;align-items:center}
.foot-in a{min-width:44px}
.theme-pick{border:0;margin:0;padding:0;display:flex;gap:8px;align-items:center}
.theme-pick legend{float:left;margin-right:8px;font-weight:600;color:var(--ink)}
.theme-pick .opts{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.theme-pick .opt{min-height:44px;padding:8px 12px;font-size:.875rem;border:0;border-radius:0}
.theme-pick .opt+.opt{border-left:1px solid var(--line)}

/* error pages */
.err-page{text-align:left}

/* login: one centred panel, a small route above the one action */
.il{display:block;width:100%;max-width:320px;height:auto;margin:0 auto}
.il path{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.il .il-out{stroke:var(--out-draw)}
.il .il-back{stroke:var(--back)}
.il circle{fill:var(--surface);stroke:var(--ink);stroke-width:4}
.il circle.il-arrive{fill:var(--arrive);stroke:var(--arrive)}
.il path{stroke-dasharray:1}
@media (prefers-reduced-motion:no-preference){
.il .il-out{animation:ildraw 1s cubic-bezier(.16,1,.3,1) .1s backwards}
.il .il-back{animation:ildraw 1s cubic-bezier(.16,1,.3,1) .7s backwards}
.il circle.il-arrive{animation:ilpop .4s cubic-bezier(.16,1,.3,1) .9s backwards;transform-box:fill-box;transform-origin:center}
}
@keyframes ildraw{from{stroke-dashoffset:1}}
@keyframes ilpop{from{transform:scale(.4);opacity:0}}

/* tap targets: a link that stands alone is at least 44 px tall (section 13) */
.tap{display:inline-flex;align-items:center;min-height:44px;max-width:100%;overflow-wrap:anywhere}
.inl{padding:12px 6px;margin:-12px -6px}
/* harden: an address or name with no spaces (a 100-character one included) wraps instead of pushing the page sideways */
main{overflow-wrap:break-word}
main strong,main code:not(.snippet code),.hint,main .btn{overflow-wrap:anywhere}
main .btn{max-width:100%}
.end>a:not(.btn),.row>a:not(.btn),.note a{display:inline-flex;align-items:center;min-height:44px}
.btn.small{min-height:44px;padding:8px 16px}
.btn:disabled{cursor:not-allowed;background:var(--sunk);color:var(--ink-2);border-color:var(--line);filter:none}
.quiet{color:var(--ink-2)}
.end .quiet{order:3}
/* reading measure: never wider than about 70 characters */
main p,main .prose li,main .steps li{max-width:70ch}
.desk-only{display:none}
@media (pointer:fine) and (min-width:1024px){.desk-only{display:block}}
.group-h{font:700 1rem/1.5 var(--sub);font-stretch:104%;letter-spacing:-.015em;margin:0 0 12px}
details.more-pl>summary{cursor:pointer;display:inline-flex;align-items:center;gap:12px;min-height:44px;font-weight:600;list-style:none}
/* a folded group says it opens: a chevron that turns (display:flex hides the browser's own marker) */
details.more>summary,details.more-pl>summary{list-style:none;gap:12px}
details.more>summary::-webkit-details-marker,details.more-pl>summary::-webkit-details-marker{display:none}
details.more>summary::before,details.more-pl>summary::before{content:"";width:8px;height:8px;flex:none;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(-45deg);transition:transform .2s cubic-bezier(.16,1,.3,1);margin:0 4px 0 2px}
details.more[open]>summary::before,details.more-pl[open]>summary::before{transform:rotate(45deg)}
details.more-pl[open]>summary{margin-bottom:8px}
main>.stack>.sites,main .stack>h1+ul{margin-top:24px}

/* wizard step 4: the one waiting moment, and "It works" */
.test-card{border:1px solid var(--hair);border-radius:var(--r-panel);box-shadow:var(--shadow);background:var(--surface);padding:24px 20px;display:flex;flex-direction:column;gap:16px}
@media (min-width:768px){.test-card{padding:36px}}
.route-status{align-self:flex-start;display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;font:700 clamp(1.125rem,1rem + .8vw,1.375rem)/1.3 var(--sub);font-stretch:104%;letter-spacing:-.02em}
.route-status .clock{font-variant-numeric:tabular-nums;white-space:nowrap}
.route-status.done{gap:12px}
.route-status .tick{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--arrive);color:var(--surface);flex:none}
.route-status .tick .icon{width:20px;height:20px;stroke-width:3.5}
.test-card.done{background:var(--arrive-tint);border-color:var(--arrive)}
@media (prefers-reduced-motion:no-preference){.land .route-status,.route-status.land{animation:land .35s cubic-bezier(.16,1,.3,1)}}

/* phones: everything people read is at least 16 px */
/* D20, the admin area (docs/design-app.md section 9.4): tiles, the weekly table, facts, actions. */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
.tiles .tile:nth-child(odd):last-child{grid-column:1/-1}
/* Revised 2026-11-06 (critique): the column count comes from the tile count (tileColumns), so no row holds one tile. */
@media (min-width:768px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}.tiles.c1{grid-template-columns:minmax(0,1fr)}.tiles.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.tiles.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.tiles.c5{grid-template-columns:repeat(5,minmax(0,1fr))}.tiles .tile:nth-child(odd):last-child{grid-column:auto}}
.tile{display:flex;flex-direction:column-reverse;gap:4px;padding:16px;border:1px solid var(--hair);border-radius:12px;background:var(--surface);box-shadow:var(--shadow);min-width:0}
.tile dt{color:var(--ink-2);font-size:.875rem;line-height:1.43;overflow-wrap:anywhere}
.tile dt a{min-height:44px;display:inline-flex;align-items:center;margin:-12px 0}
.tile dd{margin:0;font:700 1.75rem/1.15 var(--head);font-stretch:108%;letter-spacing:-.02em;overflow-wrap:anywhere}
.num{font-variant-numeric:tabular-nums}
.weeks-box{padding:8px 16px}
@media (min-width:768px){.weeks-box{padding:12px 28px}}
.weeks{width:100%;border-collapse:collapse;font-size:1rem}
.weeks th,.weeks td{text-align:left;padding:10px 8px 10px 0;border-bottom:1px solid var(--hair);vertical-align:middle;font-weight:400}
.weeks thead th{color:var(--ink-2);font-size:.875rem;font-weight:600}
.weeks tbody tr:last-child>*{border-bottom:0}
.weeks th[scope=row]{white-space:nowrap}
.weeks td{width:38%}
.weeks td .num{display:inline-block;min-width:2.5ch;margin-right:8px}
.bar{display:inline-block;height:8px;border-radius:4px;background:var(--ink-2);vertical-align:middle;max-width:calc(100% - 3.5ch)}
.facts{display:grid;grid-template-columns:1fr;gap:8px;margin:0}
.stack-s>.facts{margin-top:16px}
@media (min-width:560px){.facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}}
.facts>div{min-width:0}
.facts dt{color:var(--ink-2);font-size:.875rem;line-height:1.43}
.facts dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.label{font:600 1rem/1.4 var(--sans)}
.box h3.label{margin-top:8px;padding-top:16px;border-top:1px solid var(--hair)}
.trial-acts{display:flex;flex-direction:column;gap:8px}
.trial-acts .btn{width:100%}
@media (min-width:768px){.trial-acts{flex-direction:row;flex-wrap:wrap}.trial-acts .btn{width:auto}}
.acts{display:flex;flex-direction:column}
.act{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--hair)}
.act:first-child{border-top:0;padding-top:0}
.act:last-child{padding-bottom:0}
@media (max-width:767px){.act .btn{width:100%}}
.log{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.log li{padding:12px 0;border-bottom:1px solid var(--hair);overflow-wrap:anywhere}
.filters{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.filters a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--hair);border-radius:22px;background:var(--surface);text-decoration:none;font-weight:600;color:var(--ink-2)}
.filters a[aria-current=page]{border-color:var(--out);background:var(--out-tint);color:var(--ink)}
@media (hover:hover){.filters a:not([aria-current]):hover{color:var(--ink);border-color:var(--ink-2)}}
.find{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.find .field{flex:1 1 16rem;margin:0}
.find .btn{flex:none}
@media (max-width:767px){.find .btn{width:100%}}
.site .pills{gap:8px}
input.short{max-width:8rem}
.note.frozen{margin-bottom:24px}
@media (max-width:767px){.meta,.hint,.ferr,.count,.foot-in,.snippet code,.theme-pick .opt,.state{font-size:1rem;line-height:1.5}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}@view-transition{navigation:none}}
@media (forced-colors:active){
.btn.primary{background:Canvas;color:CanvasText;border:2px solid CanvasText}
.rail [aria-current=step] .num,.opt:has(input:checked),.platforms a[aria-current=true]{background:Highlight;color:HighlightText;forced-color-adjust:none}
.tabs a[aria-current=page]::after{background:Highlight;forced-color-adjust:none}
.subnav a[aria-current=page]{background:Highlight;color:HighlightText;forced-color-adjust:none}
:focus-visible{outline-color:Highlight}
.state,.box,.sheet,.note,.errsum,.test-card,.sites,.pv,.menu{border-color:CanvasText}
.stop,.box-tick,.route-wait .rw-dot{border-color:CanvasText}
.stop.live,.stop.alert{background:CanvasText;forced-color-adjust:none}
.il path,.rail .seg .fill{stroke:CanvasText}
.rail .seg .trk{stroke:GrayText}
.sw[aria-checked=true]{forced-color-adjust:none;box-shadow:0 0 0 3px Canvas,0 0 0 6px Highlight}
.btn:disabled{color:GrayText;border-color:GrayText}
.tile,.filters a{border-color:CanvasText}
.filters a[aria-current=page]{background:Highlight;color:HighlightText;forced-color-adjust:none}
.bar{background:CanvasText;forced-color-adjust:none}
}

:root{--ease:cubic-bezier(.16,1,.3,1);--sp:40px;--h2:clamp(1.5rem,1.25rem + 1vw,2.125rem);--sy:calc(var(--h2) * .575);
--tg-bg:#dfe7ee;--tg-bub:#fff;--tg-ink:#101418;--tg-sub:#56606b;--tg-name:#1d6fa5;--tg-key:rgba(16,20,24,.07)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--tg-bg:#0e1621;--tg-bub:#182533;--tg-ink:#eef1f4;--tg-sub:#9aa7b4;--tg-name:#6ab3f3;--tg-key:rgba(255,255,255,.08)}}
:root[data-theme=dark]{--tg-bg:#0e1621;--tg-bub:#182533;--tg-ink:#eef1f4;--tg-sub:#9aa7b4;--tg-name:#6ab3f3;--tg-key:rgba(255,255,255,.08)}
@media (min-width:768px){:root{--sp:56px}}
@media (min-width:1280px){:root{--sp:72px}}
html{scroll-padding-top:88px}
.in .out-only,html:not(.in) .in-only{display:none!important}

/* frame */
.wrap{width:100%;max-width:1360px;margin:0 auto;padding:0 16px}
@media (min-width:768px){.wrap{padding:0 32px}}
main.mk{max-width:none;padding:0;flex:1}
/* the page change keeps the header still and moves only what is under it */
.mk-head{position:sticky;top:0;z-index:20;margin:0;display:block;view-transition-name:site-head}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* header */
.mk-head .band-in{gap:12px}
.wm{font-family:var(--head);font-weight:700;font-stretch:108%;letter-spacing:-.025em;font-size:1.25rem}
.wm.big{font-size:1.5rem}
.wm.big svg{width:34px;height:34px}
.nav{display:flex;align-items:center;gap:4px}
.nav>ul{display:none;list-style:none;margin:0;padding:0;gap:2px}
.nav>ul a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r);text-decoration:none;font-weight:600;color:var(--ink-2)}
@media (hover:hover){.nav>ul a:hover{color:var(--ink);background:var(--sunk)}}
.nav>ul a[aria-current=page]{color:var(--ink)}
.nav>ul a[aria-current=page]::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:3px;border-radius:2px;background:var(--out-draw)}
.nav .btn{min-height:44px;padding:8px 18px;margin-left:8px;white-space:nowrap}
.menu-d{position:static}
.menu-d>summary{list-style:none;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r);font-weight:600;background:var(--surface);color:var(--ink)}
.menu-d>summary::-webkit-details-marker{display:none}
.menu-d[open]>summary{background:var(--sunk)}
/* the open list hangs from the sticky header, not from the button, so it starts 16px in from the screen's right edge */
.menu-d ul{position:absolute;right:16px;top:calc(100% + 8px);width:min(320px,calc(100vw - 32px));list-style:none;margin:0;padding:6px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-panel);box-shadow:var(--shadow);display:block}
.menu-d li+li{margin-top:2px}
.menu-d a{display:flex;align-items:center;min-height:48px;padding:0 12px;border-radius:8px;text-decoration:none;font-weight:600}
.menu-d a[aria-current=page]{background:var(--out-tint)}
@media (hover:hover){.menu-d a:hover{background:var(--sunk)}}
@media (min-width:768px){.nav>ul{display:flex}.menu-d{display:none}}
@media (max-width:479px){.nav .btn{padding:8px 14px;margin-left:4px}.menu-d>summary{padding:0 12px}}
/* phones: where the page's own Start free is in the first screen, the header leaves it out; elsewhere the button stays
   and from 380 to 479px "Menu" keeps only its icon (the word stays for screen readers), so both fit inside the 16px edge */
@media (max-width:767px){.hero-cta .nav>.btn{display:none}}
@media (min-width:380px) and (max-width:479px){.mk-head:not(.hero-cta) .menu-d>summary{width:44px;padding:0;justify-content:center}.mk-head:not(.hero-cta) .menu-d>summary span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:379px){.nav .btn{display:none}}

/* type */
.display,.page-h1,.h2s,.h3s{font-family:var(--head);font-weight:700;font-stretch:108%;letter-spacing:-.03em;overflow-wrap:break-word}
.display{font-family:var(--disp);font-weight:720;font-stretch:112%;font-size:clamp(2.25rem,1rem + 5vw,4.75rem);line-height:1;letter-spacing:-.035em;max-width:16ch}
.page-h1{font-size:clamp(2rem,1.5rem + 2vw,3.25rem);line-height:1.08;max-width:22ch}
.h2s{font-family:var(--sub);font-stretch:104%;font-weight:680;font-size:var(--h2);line-height:1.15;display:flex;gap:14px;align-items:flex-start;letter-spacing:-.025em}
.h2s .num{flex:none;min-width:0;height:auto;border:0;transform:none;display:inline-block;font:600 .8em/1.4 var(--sans);letter-spacing:0;color:var(--ink-2);margin-top:.2em}
.h3s{font-family:var(--sub);font-stretch:104%;font-size:clamp(1.375rem,1.2rem + .6vw,1.625rem);line-height:1.25}
.lead-l{font-size:1.125rem;line-height:1.56;max-width:36rem;color:var(--ink)}
.prose{max-width:40rem;font-size:1.0625rem;line-height:1.6}
.prose>*+*{margin-top:16px}
.prose h2{margin-top:56px}
.prose>h2:first-child{margin-top:0}
.prose h3{margin-top:32px;font:650 1.25rem/1.4 var(--sans)}
.prose ul,.prose ol{padding-left:22px;margin-bottom:0}
.prose li+li{margin-top:6px}
.prose li::marker{color:var(--ink-2)}
.prose a,.lead-l a,.stack-s a:not(.btn):not(.tap){text-decoration-color:var(--back);text-decoration-thickness:2px}
.prose a:not(.btn){padding:4px 0}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;margin:24px 0 0}
.shots img{width:100%;height:auto;border:1px solid var(--hair);border-radius:var(--r-panel);box-shadow:var(--shadow);display:block}
.shots figcaption{grid-column:1/-1}
code{font-family:var(--mono);font-size:.9em;background:var(--code);padding:1px 6px;border-radius:6px;overflow-wrap:anywhere}
.snippet code{background:none;padding:12px 14px;border-radius:0;overflow-wrap:normal}
.meta a{color:var(--ink)}

/* sections */
.sec{padding:var(--sp) 0}
.sec+.sec{border-top:1px solid var(--hair)}
.sec-h{position:relative;margin-bottom:24px;display:flex;flex-direction:column;gap:12px}
@media (min-width:768px){.sec-h{margin-bottom:32px}}
.page-top{padding:32px 0 40px;display:flex;flex-direction:column;gap:16px}
@media (min-width:768px){.page-top{padding:48px 0 56px}}

/* panels and the grids of them */
.panel{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-panel);box-shadow:var(--shadow);padding:20px}
@media (min-width:768px){.panel{padding:28px}}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:768px){.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cell{min-width:0;display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-panel);box-shadow:var(--shadow);padding:20px}
@media (min-width:768px){.cell{padding:24px}}
.cell .legend,.cell h3{font:650 1.125rem/1.35 var(--sans);letter-spacing:-.01em}
.points{gap:28px 40px}
.who-list{list-style:none;margin:0;padding:0}
.who-q{font:600 1.0625rem/1.45 var(--sans);color:var(--ink)}
.worth{font-weight:600;color:var(--ink)}
.founding{color:var(--ink)}
.points .cell{background:none;border:0;border-top:1px solid var(--hair);border-radius:0;box-shadow:none;padding:16px 0 0}
@media (min-width:768px) and (max-width:1099px){.points.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
.example{display:inline-flex;align-items:center;gap:8px;font:600 .875rem/1.43 var(--sans);color:var(--ink-2)}
.check{list-style:none;margin:0;padding:0}
.check li{display:flex;gap:12px;align-items:flex-start;padding:10px 0}
.check li+li{border-top:1px solid var(--hair)}
.check .icon{margin-top:2px;color:var(--arrive);stroke-width:2.5}
.check.no .icon{color:var(--ink-2)}

/* hero */
.hero{padding:24px 0 16px}
@media (min-width:768px){.hero{padding:32px 0 24px}}
.hero .wrap{position:relative}
.hero .lead-l{margin-top:12px;max-width:42rem}
.signed-out{margin-bottom:16px}
.turn form{display:flex;flex-direction:column;gap:10px}
.hero .turn{margin-top:16px;max-width:40rem}
.turn .field-row{display:flex;flex-direction:column;gap:10px}
@media (min-width:600px){.turn .field-row{flex-direction:row;align-items:stretch}.turn .field-row input{flex:1;max-width:30rem}.turn .field-row .btn{flex:none;padding-inline:28px}}
.turn input{min-width:0}
.turn.with-still>.still-w{display:none}
@media (min-width:1400px){.turn.with-still>.still-w{display:flex;position:absolute;right:32px;top:8px}}
.try{display:flex;gap:8px;align-items:flex-start;color:var(--ink);margin-top:8px}
.try .icon{transform:rotate(90deg);flex:none;margin-top:2px;color:var(--back)}
@media (min-width:1024px){.try .icon{transform:rotate(45deg)}}

/* the route map: one question's trip, out in orange and back in violet */
.rmap{margin-top:12px}
.rm-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.band-ex{display:inline-flex;align-items:center;gap:10px;padding:5px 14px;border:1px solid var(--hair);border-radius:999px;background:var(--surface);font:600 .875rem/1.4 var(--sans);color:var(--ink-2)}
.band-ex span+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--line);margin-right:10px;vertical-align:middle}
.hero-grid{position:relative;margin-top:4px;max-width:34rem}
.rm-svg{display:none}
.rm-stops{list-style:none;margin:0;padding:0}
.rm-stops>li{position:relative;display:block;padding:0 0 36px 60px;min-height:28px}
.rm-stops>li.rm-2{padding-bottom:84px}
.rm-stops>li.rm-3{padding-left:92px}
.rm-stops .rm-3 .disc{left:32px}
.rm-2::before,.rm-2::after{content:"";position:absolute;left:10px;top:14px;width:8px;height:46px;border-radius:4px;transform-origin:50% 4px;rotate:-45deg;background:var(--hair)}
.rm-2::after{background:var(--back)}
.rm-stops>li:last-child{padding-bottom:0}
.rm-stops .disc{position:absolute;left:0;top:0;z-index:1;width:28px;height:28px;border:5px solid var(--ink);border-radius:50%;background:var(--surface);display:grid;place-items:center;color:var(--ink)}
.rm-stops .rm-2 .disc{width:44px;height:44px;left:-8px;top:-8px}
.disc svg{width:18px;height:18px}
.rm-2 .disc::after,.rm-3 .disc::after{content:"";position:absolute;inset:-5px;border:5px solid var(--arrive);border-radius:50%}
.disc .pulse{position:absolute;inset:-5px;border:3px solid var(--arrive);border-radius:50%;opacity:0;pointer-events:none}
.rm-name{font:700 1.0625rem/28px var(--sans);letter-spacing:-.01em}
.rm-meta{font-size:.875rem;line-height:1.4;color:var(--ink-2)}
.rm-say{display:inline-block;margin-top:12px;padding:10px 16px;background:var(--surface);border:1px solid var(--hair);border-radius:12px;box-shadow:var(--shadow);font-weight:600;max-width:100%}
.vline{position:absolute;left:10px;top:14px;bottom:-14px;width:8px;border-radius:4px;background:var(--hair)}
.vline::before{content:"";position:absolute;inset:0;border-radius:4px;background:var(--out-draw);transform-origin:top}
.rm-2 .vline{left:42px;top:46px;bottom:-98px}
@media (max-width:1179px){.rm-stops>li.rm-3{padding-top:84px}.rm-stops .rm-3 .disc{top:84px}.rm-3 .rm-say{position:absolute;left:92px;top:0;right:0;margin:0;width:fit-content;max-width:calc(100% - 92px)}}
.rm-2 .vline::before{background:var(--back)}
.vline i{position:absolute;inset:0;opacity:0}
.vline i::after{content:"";position:absolute;left:50%;bottom:0;width:16px;height:16px;margin:0 0 -8px -8px;border-radius:50%;background:var(--ink);border:3px solid var(--surface)}
.rm-ghost,.rm-line{fill:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.rm-ghost{stroke:var(--hair)}
.rm-line{stroke-dasharray:1 1;stroke-dashoffset:0}
.rm-out{stroke:var(--out-draw)}
.rm-back{stroke:var(--back)}
@supports (offset-path:path("M0 0")){
.rm-dot{fill:var(--ink);stroke:var(--surface);stroke-width:3;opacity:0;offset-rotate:0deg}
.rm-dot.o{offset-path:path("M60 88H1172")}
.rm-dot.b{offset-path:path("M1172 88L1064 196H60")}
}
@supports not (offset-path:path("M0 0")){.rm-dot{display:none}}
@media (min-width:1180px){
.hero-grid{max-width:none;margin-top:4px;aspect-ratio:1200/240}
.rm-svg{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vline,.rm-2::before,.rm-2::after{display:none}
.rm-stops>li,.rm-stops>li.rm-2,.rm-stops>li.rm-3{position:static;padding:0;min-height:0}
.rm-stops .disc,.rm-stops .rm-2 .disc,.rm-stops .rm-3 .disc{left:var(--x);top:var(--y);translate:-50% -50%}
.rm-1{--x:5%;--y:36.67%}
.rm-2{--x:97.67%;--y:36.67%}
.rm-3{--x:5%;--y:81.67%}
.rm-t{position:absolute}
.rm-1 .rm-t{left:calc(var(--x) - 14px);bottom:calc(100% - var(--y) + 22px)}
.rm-2 .rm-t{right:0;bottom:calc(100% - var(--y) + 32px);white-space:nowrap;text-align:right}
.rm-3 .rm-t{left:calc(var(--x) - 14px);top:calc(var(--y) + 18px)}
.rm-say{position:absolute;left:14%;top:var(--y);translate:0 -50%;margin:0;white-space:nowrap}
}
/* the sequence, about 3 s: orange line out with its dot, Telegram pulses in teal, violet line back with its dot, the site shows in teal */
@media (prefers-reduced-motion:no-preference){
.rm-out{animation:rm-draw 1s var(--ease) .25s both}
.rm-back{animation:rm-draw 1s var(--ease) 1.75s both}
.rm-dot.o{animation:rm-ride 1s var(--ease) .25s both}
.rm-dot.b{animation:rm-ride 1s var(--ease) 1.75s both}
.vline::before{animation:rm-vdraw 1s var(--ease) .25s both}
.rm-2 .vline::before{animation-delay:2s;animation-duration:.75s}
.rm-2::after{animation:rm-bend .25s var(--ease) 1.75s both}
.vline i{animation:rm-vride 1s var(--ease) .25s both}
.rm-2 .vline i{animation-delay:2s;animation-duration:.75s}
.rm-2 .disc::after{animation:rm-in .3s var(--ease) 1.2s both}
.rm-3 .disc::after{animation:rm-in .3s var(--ease) 2.75s both}
.rm-2 .pulse{animation:rm-pulse .8s var(--ease) 1.2s forwards}
}
@keyframes rm-draw{from{stroke-dashoffset:1}}
@keyframes rm-ride{0%{offset-distance:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes rm-bend{from{transform:scaleY(0)}}
@keyframes rm-vdraw{from{transform:scaleY(0)}}
@keyframes rm-vride{0%{transform:translateY(-100%);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:none;opacity:0}}
@keyframes rm-in{from{opacity:0}}
@keyframes rm-pulse{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2)}}
@media (prefers-reduced-motion:reduce){.hero-grid *,.hero-grid *::before,.hero-grid *::after{animation:none!important}}

/* the route runs down the home page: each section is a stop, and the line draws as you scroll */
.journey{--pad:16px;--off:10px;--g:26px;position:relative}
@media (min-width:768px){.journey{--pad:32px;--off:14px;--g:34px}}
.journey>.sec{position:relative;border-top:0}
.journey .wrap{padding-left:calc(var(--pad) + var(--off) + var(--g))}
.journey>.sec::before,.journey>.sec::after{content:"";position:absolute;top:-1px;bottom:-1px;left:calc(max(0px,(100% - 1360px) / 2) + var(--pad) + var(--off) - 4px);width:8px;border-radius:0;background:var(--hair)}
.journey>.sec::after{background:var(--out-draw);transform-origin:top}
.journey>.sec:first-child::before,.journey>.sec:first-child::after{top:calc(var(--sp) + var(--sy));border-radius:4px 4px 0 0}
.journey>.sec:last-child::before,.journey>.sec:last-child::after{bottom:auto;height:calc(var(--sp) + var(--sy) + 1px);border-radius:0 0 4px 4px}
.journey .sec-h::before{content:"";position:absolute;left:calc(-1 * var(--g) - 10px);top:calc(var(--sy) - 10px);width:20px;height:20px;border-radius:50%;background:var(--surface);border:4px solid var(--ink);z-index:1}
.journey>.sec:last-child .sec-h::before{border-color:var(--arrive);background:var(--arrive-tint)}
.rsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:32px}
.rsteps li{position:relative;display:flex;flex-direction:column;gap:8px;max-width:40rem}
.rsteps .n{position:absolute;left:calc(-1 * var(--g) - 15px);top:-1px;z-index:1;width:30px;height:30px;border-radius:50%;background:var(--surface);border:4px solid var(--ink);display:grid;place-items:center;font:700 .8125rem/1 var(--sans);font-variant-numeric:tabular-nums}
.rsteps .h3s{font-size:1.375rem}
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
.journey>.sec::after{animation:route linear both;animation-timeline:view();animation-range:entry 40% cover 60%}
}}
@keyframes route{from{transform:scaleY(0)}}
@media (prefers-reduced-motion:reduce){.journey>.sec::after{animation:none!important}}

/* a wide screen gives the setup steps a partner: the real chat, in the visitor's light or dark */
.shot{display:none;margin:0}
.shot img{width:100%;height:auto;display:block;border:1px solid var(--hair);border-radius:var(--r-panel);box-shadow:var(--shadow)}
/* One screenshot per theme; as specific as .shot img, which would otherwise show both. */
.shot img.shot-d{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .shot img.shot-l{display:none}:root:not([data-theme=light]) .shot img.shot-d{display:block}}
:root[data-theme=dark] .shot img.shot-l{display:none}
:root[data-theme=dark] .shot img.shot-d{display:block}
.try-route{display:none}
.try-route path{fill:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.try-route .to{stroke:var(--out-draw)}
.try-route .tb{stroke:var(--back)}
.try-route .ts{fill:var(--surface);stroke:var(--ink);stroke-width:5}
.try-route .ta{stroke:var(--arrive)}
.try-route .tp{fill:var(--ink);stroke:none}
@media (min-width:1280px){
.rsplit{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:64px;align-items:start}
.shot{display:block}
.panel.turn{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;align-items:center}
.try-route{display:block;width:100%;height:auto}
}

/* the Telegram message, as a card */
.tg{background:var(--tg-bg);border:1px solid var(--hair);border-radius:var(--r-panel);box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:6px;color:var(--tg-ink);max-width:28rem}
.tg .bub{background:var(--tg-bub);border-radius:14px 14px 14px 4px;padding:10px 14px;display:flex;flex-direction:column;gap:4px;line-height:1.45;box-shadow:0 1px 1px rgba(16,20,24,.08)}
.tg .who{font-weight:650;color:var(--tg-name)}
.tg .pg{color:var(--tg-sub);font-size:.875rem}
.tg .kb{background:var(--tg-key);border-radius:10px;text-align:center;padding:10px;font-weight:600;font-size:.9375rem;color:var(--tg-ink)}
.split2{display:grid;gap:32px}
.split2 .sec-h{margin-bottom:0}
@media (min-width:900px){.split2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:48px}}

/* platforms as stations on one orange line: down the page on a phone; in rows from 480 px, each row entering and leaving with a 45 degree bend */
.pgrid{display:grid;grid-template-columns:minmax(0,1fr);list-style:none;margin:0;padding:0}
.pgrid li{position:relative;min-width:0}
.pgrid li::before{content:"";position:absolute;left:9px;top:0;bottom:0;width:6px;background:var(--out-draw)}
.pgrid li:first-child::before{top:50%}
.pgrid li:last-child::before{bottom:50%}
.pgrid li::after{content:"";display:none;position:absolute;width:20px;height:6px;border-radius:3px;background:var(--out-draw);rotate:45deg}
.pgrid a{position:relative;display:flex;align-items:center;gap:8px;min-height:48px;padding:6px 8px 6px 44px;border-radius:10px;text-decoration:none;font-weight:600;overflow-wrap:break-word}
.pgrid a::before{content:"";position:absolute;left:0;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;box-sizing:border-box;background:var(--surface);border:4px solid var(--ink)}
.pgrid .pn{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-width:0}
.pgrid .icon{display:none}
.pgrid .tag{padding:0 8px;border-radius:999px;background:var(--sunk);border:1px solid var(--hair);font:600 .8125rem/1.5 var(--sans);color:var(--ink-2)}
.pgrid a[aria-current=page]::before{border-color:var(--arrive);background:var(--arrive-tint)}
@media (hover:hover){.pgrid a:hover{background:var(--sunk)}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.pgrid a::before{transition:transform .2s var(--ease)}.pgrid a:hover::before{transform:scale(1.2)}}
@media (min-width:480px){
.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 0}
.pgrid li::before,.pgrid li:first-child::before,.pgrid li:last-child::before{left:0;right:0;top:9px;bottom:auto;width:auto;height:6px}
.pgrid li:first-child::before{left:50%}
.pgrid li:last-child::before{right:50%}
.pgrid a{flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;padding:34px 8px 8px;text-align:center}
.pgrid a::before{left:50%;top:0;margin:0 0 0 -12px}
.pgrid .pn{flex-direction:column;flex-wrap:nowrap;justify-content:center;gap:4px}
}
/* Each row is its own short line, from its first station to its last: nothing hangs loose at a row's end. */
.pgrid li::after{display:none!important}
@media (min-width:480px) and (max-width:767px){
.pgrid li:nth-child(2n+1)::before{left:50%}
.pgrid li:nth-child(2n)::before{right:50%}
}
@media (min-width:768px){
.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pgrid li:nth-child(3n+1)::before{left:50%}
.pgrid li:nth-child(3n)::before{right:50%}
}
@media (min-width:1280px){
.pgrid.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.pgrid.five li:nth-child(n)::before{left:0;right:0}
.pgrid.five li:nth-child(5n+1)::before{left:50%}
.pgrid.five li:nth-child(5n)::before{right:50%}
.pgrid.five li:last-child::before{right:50%}
}
@media (min-width:768px){.pgrid:not(.five) li:last-child::before,.pgrid li:last-child::before{right:50%}}
/* The names are links, so they read as links: underlined like every other link on the page. */
.pgrid .pn>span:first-child{text-decoration:underline;text-decoration-color:var(--back);text-decoration-thickness:2px;text-underline-offset:.2em}

/* comparisons (Revised 2026-11-06, critique): the verdict leads; the table takes the width; ours beside theirs */
.verdict{font:600 1.1875rem/1.5 var(--sans);max-width:44rem;color:var(--ink)}
.cmp-notes{display:flex;flex-direction:column;gap:12px;max-width:60rem}
.cmp-contrast{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.cmp-contrast .legend{font:650 1.125rem/1.35 var(--sans);letter-spacing:-.01em;margin:0 0 6px}
.cmp-contrast .theirs{color:var(--ink)}
.cmp-end{display:flex;flex-direction:column;gap:20px}
@media (min-width:1024px){
.cmp-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 64px;align-items:end}
.verdict{font-size:1.3125rem;line-height:1.5;max-width:none;padding-bottom:6px}
.cmp .tbl{font-size:1rem}
.cmp .tbl thead th{font-size:1.0625rem}
.cmp .tbl th,.cmp .tbl td{padding:18px 24px}
.cmp .tbl tbody th{width:24%}
.cmp .tbl td.us{width:34%}
.cmp-contrast{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px}
.cmp-contrast .ours .legend{font-size:1.375rem}
.cmp-contrast .ours li{font-size:1.1875rem;padding:14px 0}
.cmp-contrast .theirs{padding-left:48px;border-left:1px solid var(--hair)}
.cmp-end .cta.big{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;row-gap:8px;align-items:center;padding:32px 40px}
.cmp-end .cta.big>.h3s,.cmp-end .cta.big>p{grid-column:1}
.cmp-end .cta.big>.btn{grid-column:2;grid-row:1/span 2;min-width:14rem}
}

/* the price, as a figure */
.price{font-family:var(--disp);font-weight:720;font-stretch:112%;font-size:clamp(3.25rem,2rem + 4vw,5rem);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.rate{display:grid;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-panel);box-shadow:var(--shadow);overflow:hidden}
.rate-fig,.rate-more{padding:24px;display:flex;flex-direction:column;gap:10px}
.rate-fig{justify-content:center}
.rate-more{border-top:1px solid var(--hair)}
@media (min-width:768px){.rate{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.rate-fig,.rate-more{padding:32px}.rate-more{border-top:0;border-left:1px solid var(--hair)}}
/* Revised 2026-11-06 (critique): Solo leads. A wider, raised card with the large figures and the one primary
   button; Team sits beside it, quieter (flat, smaller figures, the plain button). One column on a phone, Solo first. */
.plans{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:stretch}
@media (min-width:900px){.plans{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px}}
.plan{min-width:0;display:flex;flex-direction:column;gap:20px;padding:20px;background:var(--sunk);border:1px solid var(--hair);border-radius:var(--r-panel)}
.plan.pick{background:var(--surface);border:2px solid var(--ink);box-shadow:var(--shadow);padding:24px}
@media (min-width:768px){.plan{padding:28px}.plan.pick{padding:32px}}
.plan-top{display:flex;flex-direction:column;gap:6px}
.plan-rates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
@media (max-width:479px){.plan-rates{grid-template-columns:minmax(0,1fr)}}
.plan .fig{min-width:0;display:flex;flex-direction:column;gap:6px}
.plan .fig+.fig{padding-left:24px;border-left:1px solid var(--hair)}
@media (max-width:479px){.plan .fig+.fig{padding:12px 0 0;border:0;border-top:1px solid var(--hair)}}
.plan .legend{font:600 1rem/1.4 var(--sans);color:var(--ink-2)}
.plan .price{font-size:clamp(2.25rem,1.6rem + 2.4vw,3rem)}
.plan.pick .price{font-size:clamp(3.25rem,2rem + 4vw,5rem)}
.plan-go{margin-top:auto}
.plan-go .btn{width:100%}
@media (min-width:600px){.plan.pick .plan-go .btn{width:auto;min-width:14rem}}
.rate-foot{margin-top:16px;padding:20px 24px;background:var(--sunk);border:1px solid var(--hair);border-radius:var(--r-panel)}
.gets{list-style:none;margin:0;padding:0;display:grid;gap:0 32px;grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.gets.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.gets.c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gets li{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--hair)}
.gets .icon{color:var(--arrive);stroke-width:2.5;margin-top:2px}

/* the trial, as a route: each day a stop, the line running on to the next */
.timeline{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:28px}
.timeline li{position:relative;min-width:0;display:flex;flex-direction:column;gap:8px;padding-left:60px}
.timeline .legend{margin:0;display:flex;align-items:center;min-height:36px;font:650 1.0625rem/1.3 var(--sans)}
.timeline .legend .day{position:absolute;left:0;top:0;z-index:1;width:36px;height:36px;border-radius:50%;border:4px solid var(--ink);background:var(--surface);color:var(--ink);font:700 .875rem/1 var(--sans);font-variant-numeric:tabular-nums;display:inline-grid;place-items:center;flex:none}
.timeline li:not(:last-child)::before{content:"";position:absolute;left:16px;top:18px;bottom:-46px;width:4px;border-radius:2px;background:var(--out-draw)}
@media (min-width:768px){
.timeline{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.timeline li{padding-left:0}
.timeline .legend{flex-direction:column;align-items:flex-start;gap:8px}
.timeline .legend .day{position:relative}
.timeline li:not(:last-child)::before{left:18px;top:16px;bottom:auto;height:4px;width:calc(100% + 32px)}
}

/* guides: a calm reading column, a rail of contents, the start box beside */
.crumbs{font-size:.875rem;color:var(--ink-2);padding-top:16px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:6px;min-width:0;white-space:nowrap}
.crumbs li{display:flex;gap:6px;min-width:0;align-items:center}
.crumbs li:not(:last-child)::after{content:"";flex:none;width:6px;height:6px;margin-left:2px;border-top:2px solid var(--ink-2);border-right:2px solid var(--ink-2);rotate:45deg}
.crumbs li:not(:first-child):not(:last-child){overflow:hidden;text-overflow:ellipsis}
.crumbs a{color:var(--ink);display:inline-flex;align-items:center;min-height:44px}
.crumbs [aria-current]{display:inline-flex;align-items:center;min-height:44px;overflow:hidden;text-overflow:ellipsis}
.guide{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;padding-bottom:96px}
.guide .rail-l,.guide .aside{display:none}
.guide .col{max-width:40rem;width:100%;margin:0;display:flex;flex-direction:column;gap:40px;min-width:0}
@media (min-width:1280px){
.guide{grid-template-columns:minmax(0,13rem) minmax(0,40rem) minmax(0,17rem);justify-content:center;gap:56px}
.guide .rail-l,.guide .aside{display:block}
.rail-l nav,.aside .stick{position:sticky;top:96px}
.rail-l nav{max-height:calc(100vh - 120px);overflow:auto;padding:2px}
.toc-d{display:none}
}
.rail-l h2{font:650 .875rem/1.43 var(--sans);color:var(--ink-2);margin-bottom:8px}
.rail-l ul{list-style:none;margin:0;padding:0;border-left:3px solid var(--hair)}
.rail-l li{position:relative}
.rail-l a{display:flex;align-items:center;min-height:44px;padding:4px 14px;text-decoration:none;font-size:.9375rem;color:var(--ink-2)}
.rail-l a[aria-current=page]{color:var(--ink);font-weight:650}
.rail-l a[aria-current=page]::before{content:"";position:absolute;left:-9px;top:50%;width:15px;height:15px;margin-top:-7.5px;border-radius:50%;background:var(--surface);border:3.5px solid var(--out-draw)}
@media (hover:hover){.rail-l a:hover{color:var(--ink);text-decoration:underline}}
.toc-d,.faq{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-panel)}
.toc-d summary,.faq summary{cursor:pointer;display:flex;align-items:center;gap:16px;list-style:none}
.toc-d summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none}
.toc-d summary::after,.faq summary::after{content:"";flex:none;margin-left:auto;width:9px;height:9px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);rotate:45deg;translate:0 -2px}
.toc-d[open] summary::after,.faq details[open] summary::after{rotate:-135deg;translate:0 2px}
@media (prefers-reduced-motion:no-preference){.toc-d summary::after,.faq summary::after{transition:rotate .2s var(--ease),translate .2s var(--ease)}}
.toc-d summary{min-height:52px;padding:0 20px;font-weight:650}
.toc-d ul{margin:0;padding:0 20px 12px 40px}
.toc-d a{display:inline-flex;min-height:44px;align-items:center}
.faq{overflow:hidden;box-shadow:var(--shadow)}
.faq details+details{border-top:1px solid var(--hair)}
.faq summary{min-height:60px;padding:12px 20px;font-weight:650}
.faq details>div{padding:0 20px 20px;display:flex;flex-direction:column;gap:8px}

/* the steps of a guide: a numbered route, each step a stop */
.stepbox ol{list-style:none;margin:0;padding:0}
.stepbox li{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px;padding:0 0 28px}
.stepbox li:last-child{padding-bottom:0}
.stepbox li:not(:last-child)::before{content:"";position:absolute;left:14px;top:16px;bottom:-16px;width:4px;border-radius:2px;background:var(--out-draw)}
.stepbox li .num{position:relative;z-index:1;width:32px;height:32px;min-width:0;border-radius:50%;border:4px solid var(--ink);background:var(--surface);color:var(--ink);font:700 .8125rem/1 var(--sans);font-variant-numeric:tabular-nums;display:grid;place-items:center;transform:none}
.stepbox li>span:last-child{padding-top:3px}
.codeblock{margin:0;border:1px solid var(--hair);border-radius:var(--r);background:var(--code);overflow-x:auto;padding:16px 18px;font:400 .875rem/1.65 var(--mono)}
.codeblock code{background:none;padding:0;overflow-wrap:normal;white-space:pre}
.note.plain{background:var(--surface)}

/* the snippet strip */
.example-line{margin:0;position:relative}
.example-line code{color:var(--ink-2);user-select:none}
.ex-tag{flex:none;align-self:stretch;display:flex;align-items:center;padding:0 14px;border-right:1px solid var(--hair);font:650 .875rem/1 var(--sans);color:var(--ink);background:var(--sunk)}

.cta{display:flex;flex-direction:column;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-panel);box-shadow:var(--shadow);padding:22px}
@media (min-width:768px){.cta{padding:26px}}
.cta.big{background:var(--out-tint)}
.draft{background:var(--out-tint);border:1px solid var(--out-draw);border-radius:var(--r);color:var(--ink);padding:10px 14px;font-weight:650}
details.dev{margin-top:16px}
details.dev>p{margin-top:8px}

/* comparisons */
.tbl-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:var(--r-panel);background:var(--surface);box-shadow:var(--shadow)}
.tbl{border-collapse:collapse;width:100%;min-width:560px;font-size:.9375rem;line-height:1.45}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--hair)}
.tbl thead th{font-weight:650;background:var(--sunk)}
.tbl tbody th{font-weight:600;width:30%}
.tbl tr:last-child>*{border-bottom:0}
.tbl td.us{background:var(--out-tint)}

/* the widget, as a still (when the live chat is not configured) */
.still-w{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:14px;padding:4px 0}
.still-w .panel{width:min(300px,100%);background:#fff;color:#161616;border-radius:20px;border:1px solid #dcdcd4;overflow:hidden;box-shadow:0 1px 2px rgb(0 0 0/.06),0 12px 32px -8px rgb(0 0 0/.18);padding:0}
.still-w .head{padding:12px 16px;font-weight:650;border-bottom:1px solid #eee;display:flex;flex-direction:column}
.still-w .head small{font-weight:400;color:#57574f;font-size:.8125rem}
.still-w .bub{margin:12px 16px 16px;padding:10px 12px;background:#f1f1ee;border-radius:14px 14px 14px 4px;font-size:.9375rem;line-height:1.4}
.still-w .launch{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#161616;color:#fff;box-shadow:0 6px 18px -2px rgb(0 0 0/.3)}
.still-w .launch svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2}

/* the live widget's colours on this site (section 2.7): the out-line orange */
signalgood-chat{--sg-accent:#c4400c;--sg-accent-ink:#fff}
signalgood-chat[data-sg-theme=dark]{--sg-accent:#ff7a45;--sg-accent-ink:#0f1216}

/* footer */
.sfoot{border-top:1px solid var(--hair);background:var(--surface);font-size:.9375rem}
.sfoot .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;padding:48px 0 32px}
@media (min-width:900px){.sfoot .cols{grid-template-columns:1.4fr repeat(3,1fr)}}
.sfoot .brand{grid-column:1/-1;display:flex;flex-direction:column;gap:12px;align-items:flex-start;color:var(--ink-2)}
@media (min-width:900px){.sfoot .brand{grid-column:auto}}
.sfoot h2{font:650 .875rem/1.43 var(--sans);color:var(--ink-2);margin-bottom:8px}
.sfoot ul{list-style:none;margin:0;padding:0}
.sfoot li+li{margin-top:4px}
.sfoot li a,.sfoot li button{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--ink);font:inherit;background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:.18em;cursor:pointer;text-align:left}
.sfoot .base{border-top:1px solid var(--hair);padding:20px 0 32px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;color:var(--ink-2);font-size:.875rem}
.sfoot .theme-pick legend{color:var(--ink)}
.sfoot .theme-pick,.sfoot .theme-pick .opts{flex-wrap:wrap}
.sfoot li a,.sfoot li button{max-width:100%;overflow-wrap:anywhere}
.sfoot .lang-pick ul{display:flex;flex-wrap:wrap;gap:0 20px}
.sfoot .lang-pick [aria-current]{font-weight:700;text-decoration:none}

/* error pages: the route that did not arrive */
.err-route{width:min(280px,100%);height:auto;display:block}
.err-route path{fill:none;stroke-width:6;stroke-linecap:round}
.err-route .e-out{stroke:var(--out-draw)}
.err-route .e-gap{stroke:var(--line);stroke-dasharray:1 12}
.err-route .e-stop{fill:var(--surface);stroke:var(--ink);stroke-width:4}
.err-route .e-end{stroke:var(--line)}
.err-tag{display:flex;gap:8px;align-items:center;font-weight:650}
.err-tag .icon{color:var(--alert)}

/* phones: everything people read is at least 16 px */
@media (max-width:767px){.tbl,.sfoot,.sfoot .base,.crumbs,.toc-d summary,.ex-tag,.example,.rail-l h2,.pgrid .tag,.codeblock,.snippet code,.tg .pg,.tg .kb,.rm-meta,.band-ex,.turn .hint,.rate-foot .meta,.sfoot .theme-pick .opt{font-size:1rem}}
/* under 768 px each row of a comparison is a small card: the row's name, then one labelled line per product */
@media (max-width:767px){
.tbl-wrap{overflow:visible;border:0;background:none;box-shadow:none;border-radius:0}
.tbl{min-width:0;display:block}
.tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tbl tbody{display:flex;flex-direction:column;gap:12px}
.tbl tr{display:block;border:1px solid var(--hair);border-radius:var(--r-panel);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.tbl tbody th,.tbl td{display:block;width:auto;border-bottom:0}
.tbl tbody th{padding:12px 14px 4px;font-weight:700}
.tbl td{padding:8px 14px}
.tbl td::before{content:attr(data-label) ": ";font-weight:650}
.tbl tr>td:last-child{padding-bottom:12px}
}
/* the orange button is full width on every page under 768 px */
@media (max-width:767px){main.mk .btn.primary,main.mk .cta .btn{width:100%}}
/* with the live chat on, the end of each page scrolls clear of the launcher: 56 px tall, 20 px off the bottom edge, and 16 px of air */
body.has-chat .sfoot{padding-bottom:92px}
/* a link or field reached with Tab scrolls into view above the launcher, not under it */
html:has(body.has-chat){scroll-padding-bottom:92px}
@media (forced-colors:active){
.rm-ghost,.rm-line{stroke:CanvasText}
.disc,.vline,.vline::before{background:Canvas;border-color:CanvasText}
.vline::before{background:CanvasText}
.pgrid li::before,.pgrid li::after{background:CanvasText}
.rate,.rate-foot,.plan,.cta,.cell,.panel,.tbl-wrap,.tbl tr,.faq,.toc-d,.rm-say{border-color:CanvasText}
.rail-l a[aria-current=page]{background:Highlight;color:HighlightText;forced-color-adjust:none}
.draft{background:Canvas;color:CanvasText;border:1px solid CanvasText}
}