@font-face{font-family:Archivo;src:url(/fonts/archivo-latin-wght-normal.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2');font-weight:600 700;font-display:swap}
:root{
  --ink:#111a1f;--mute:#5d646b;--paper:#f4f5f2;--card:#fff;--line:#d6dbd8;--soft:#e8ebe7;
  --accent:#f2bf2e;--accent-text:#8a5f00;--accent-ink:#111a1f;--ok:#2d7a4f;--shadow:0 1px 2px rgba(17,26,31,.06),0 8px 24px rgba(17,26,31,.07);
  --r:16px;--gut:16px;--display:Archivo,"Helvetica Neue",Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{--ink:#f2ede2;--mute:#9aa3ad;--paper:#111a1f;--card:#151c20;--line:#2c343e;--soft:#1c252b;--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);--ok:#5fc08a;--accent-text:#f2bf2e}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--display);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.1;font-weight:800}
h1{font-size:clamp(30px,8vw,46px);font-weight:750}
h2{font-size:20px;font-weight:700}
h3{font-size:16px;font-weight:650}
p{margin:0}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mute{color:var(--mute)}.small{font-size:14px}.tiny{font-size:12.5px}
.wrap{max-width:720px;margin:0 auto;padding:0 var(--gut)}
.wide{max-width:1040px}

/* ---------- top bar + tabs */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.top .wrap{display:flex;align-items:center;gap:12px;height:56px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.28em;font-size:13px;text-decoration:none}
.brand .markline{width:34px;height:12px;flex:none}

.top .sp{flex:1}
.who{font-size:14px;color:var(--mute)}
.tabs{display:none}
@media (min-width:760px){.tabs{display:flex;gap:4px}.tabs a{padding:8px 14px;border-radius:99px;text-decoration:none;font-weight:600;font-size:15px}.tabs a[aria-current=page]{background:var(--ink);color:var(--paper)}}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.bar a{flex:1;text-align:center;padding:10px 4px 9px;text-decoration:none;font-size:12.5px;font-weight:600;color:var(--mute);min-height:56px;display:flex;flex-direction:column;align-items:center;gap:3px}
.bar a svg{width:22px;height:22px}
.bar a[aria-current=page]{color:var(--accent-text)}
@media (min-width:760px){.bar{display:none}}
main{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
@media (min-width:760px){main{padding-bottom:64px}}

/* ---------- buttons, fields, chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:99px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-weight:650;cursor:pointer;text-decoration:none;transition:transform .12s ease,background .12s ease}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.danger{background:#b3261e;border-color:#b3261e;color:#fff}
.btn.small{min-height:38px;padding:0 14px;font-size:14px;white-space:nowrap}
.btn[disabled]{opacity:.5;cursor:default;transform:none}
.field{display:block;width:100%;min-height:50px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);outline:none}
.field:focus{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent)}
textarea.field{resize:none;min-height:84px;line-height:1.4}
label.l{display:block;font-size:13px;font-weight:650;color:var(--mute);margin:14px 0 6px;letter-spacing:.02em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:border-color .12s,transform .12s}
.chip:hover{border-color:var(--ink)}.chip:active{transform:scale(.97)}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip.sm{min-height:32px;padding:0 12px;font-size:14px;font-weight:550}
.chip .x{opacity:.6;font-weight:700}
.err{color:#b3261e;font-size:14px;margin-top:10px;min-height:20px}
@media (prefers-color-scheme:dark){.err{color:#ff8a80}}

/* ---------- hero (video-ready) */
.hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:#1b1a18;border-radius:0 0 28px 28px}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero .poster{background:radial-gradient(120% 90% at 85% 0%,color-mix(in srgb,var(--accent) 70%,#1b1a18) 0,transparent 55%),radial-gradient(90% 70% at 0% 100%,#2a3f6b 0,transparent 60%),#1b1a18;animation:drift 18s ease-in-out infinite alternate;background-size:140% 140%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55))}
.hero .in{padding:calc(64px + env(safe-area-inset-top)) var(--gut) 36px;max-width:720px;margin:0 auto;min-height:44vh;display:flex;flex-direction:column;justify-content:flex-end;gap:14px}
.hero p.lead{font-size:18px;opacity:.9;max-width:34ch}
@keyframes drift{from{background-position:0% 0%}to{background-position:100% 100%}}
.rise{animation:rise .5s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero video{display:none}}

/* ---------- gate */
.gate{display:grid}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.gate .card{margin-top:-28px;position:relative}
.gate form{display:grid;gap:4px}

/* ---------- home */
.say{margin-top:22px}
.say .card{padding:14px}
.say .row{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.say .row .sp{flex:1}
.jobs{display:grid;gap:10px;margin-top:14px}
@media (min-width:760px){.jobs{grid-template-columns:repeat(3,1fr)}}
.job{text-align:left;border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:14px 16px;cursor:pointer;display:grid;gap:4px;transition:border-color .12s,transform .12s,box-shadow .12s}
.job:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow)}
.job b{font-size:15px}.job span{color:var(--mute);font-size:14px}
.sec{margin-top:30px}.sec>h2{margin-bottom:10px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:700}
.list{display:grid;gap:8px}
.item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--line);background:var(--card);border-radius:14px;text-decoration:none}
.item:hover{border-color:var(--ink)}
.item b{display:block}.item small{color:var(--mute)}
.mem{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ---------- question card */
.qcard{margin-top:26px}
.dots{display:flex;gap:6px;margin-bottom:14px}.dots i{height:4px;flex:1;border-radius:4px;background:var(--line)}.dots i.on{background:var(--accent)}
.qcard h2{font-size:clamp(24px,6vw,32px);margin-bottom:16px}
.said{padding:12px 14px;border-radius:14px;background:var(--soft);margin-bottom:18px;font-size:15px}
.assume{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}

/* ---------- making */
.making{text-align:center;padding:72px 0}
.phases{display:grid;gap:10px;max-width:320px;margin:24px auto 0;text-align:left}
.phase{display:flex;align-items:center;gap:12px;color:var(--mute)}
.phase i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:12px}
.phase.done{color:var(--ink)}.phase.done i{background:var(--ok);border-color:var(--ok);color:#fff}
.phase.run i{border-color:var(--accent);border-top-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- work */
.whead{padding:26px 0 8px}
.whead .kick{color:var(--accent-text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
.whead h1{font-size:clamp(28px,7vw,40px);margin:6px 0}
.steps{display:flex;gap:6px;overflow-x:auto;padding:10px 0 6px;scrollbar-width:none}
.steps::-webkit-scrollbar{display:none}
.step{flex:none;display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--mute);background:var(--card);text-decoration:none}
.step b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--soft)}
.step.done{color:var(--ink)}.step.done b{background:var(--ok);color:#fff}
.step.now{border-color:var(--accent);color:var(--ink)}.step.now b{background:var(--accent);color:var(--accent-ink)}
.cols{display:grid;gap:18px}
@media (min-width:900px){.cols{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}.stick{position:sticky;top:76px}}
.pieces{display:grid;gap:14px}
.piece{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden;box-shadow:var(--shadow)}
@keyframes flash{0%,35%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:var(--shadow)}}
.ph{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.ph h3{flex:1}
.badge{font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--soft);color:var(--mute)}
.badge.new{background:var(--accent);color:var(--accent-ink)}
.pb{padding:14px}
.pb iframe{width:100%;height:340px;border:0;border-radius:10px;background:var(--paper)}
.pb img.poster-img{width:100%;max-height:420px;object-fit:contain;border-radius:10px;display:block;background:#111}
.bubble{background:var(--soft);padding:12px 14px;border-radius:18px 18px 18px 6px;font-size:15px}
.ev{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line)}.ev:first-child{border-top:0}
.gear h4{margin:12px 0 4px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}.gear h4:first-child{margin-top:0}
.gear label{display:flex;gap:10px;padding:5px 0;align-items:flex-start}.gear input{margin-top:4px;accent-color:var(--accent);width:18px;height:18px}
.pf{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:0 14px 14px}
.rcpt{margin:0 14px 14px;padding:12px;background:var(--soft);border-radius:12px;font-size:13.5px;display:none}
.rcpt.open{display:block}
.rcpt dt{font-weight:700;margin-top:6px}.rcpt dd{margin:2px 0 0;color:var(--mute)}
.rcpt .chg{color:var(--ink)}
.changebar{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom));z-index:4;margin-top:16px}
@media (min-width:760px){.changebar{bottom:16px}}
.changebar form{display:flex;gap:8px;padding:8px;background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:99px;box-shadow:var(--shadow)}
.changebar .field{border:0;background:transparent;min-height:44px;padding:0 14px;box-shadow:none}
.toast{margin:10px 0 0;padding:12px 14px;border-radius:14px;background:var(--ink);color:var(--paper);font-size:14.5px}
.panel{padding:16px}
.panel h2{margin-bottom:4px}
.pv{margin-top:12px;display:grid;gap:8px}
.pv .bubble{font-size:14px}
.who2{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.who2:first-of-type{border-top:0}
.st{font-size:12px;font-weight:700;padding:2px 9px;border-radius:99px;background:var(--soft)}
.st.in{background:var(--ok);color:#fff}.st.declined,.st.withdrawn,.st.left{background:var(--line);color:var(--mute)}
.note{padding:10px 12px;border-radius:12px;background:var(--soft);font-size:14px}

/* ---------- text simulator */
.phone{max-width:420px;margin:22px auto 0;border:1px solid var(--line);border-radius:34px;background:var(--card);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;height:min(72vh,640px)}
.phone .hd{padding:14px;text-align:center;border-bottom:1px solid var(--line);font-weight:700}.phone .hd small{display:block;font-weight:500;color:var(--mute);font-size:12px}
.thread{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:82%;padding:9px 13px;border-radius:18px;font-size:15px;white-space:pre-wrap;word-wrap:break-word}
.msg.in{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:6px}
.msg.out{align-self:flex-start;background:var(--soft);border-bottom-left-radius:6px}
.msg small{display:block;opacity:.65;font-size:11px;margin-top:2px}
.phone form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.phone form .field{min-height:44px;border-radius:99px}
.sugg{display:flex;gap:6px;overflow-x:auto;padding:8px 10px 0;scrollbar-width:none}.sugg .chip{flex:none}

/* ---------- invitee, admin */
.center{max-width:560px;margin:0 auto;padding:36px var(--gut)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14.5px}
table{width:100%;border-collapse:collapse;font-size:14px}td,th{padding:6px 8px;border-top:1px solid var(--line);text-align:left}
code,.mono{font:13px ui-monospace,SFMono-Regular,Menlo,monospace}
.code{display:inline-block;padding:2px 8px;background:var(--soft);border-radius:8px;letter-spacing:.08em}

.hero.compact .in{min-height:0;padding:calc(34px + env(safe-area-inset-top)) var(--gut) 26px}
.hero.compact h1{font-size:clamp(28px,7vw,40px)}

@media (min-width:900px){.pb iframe{height:460px}}

.mono-label{font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.fine{margin-top:12px;color:var(--mute);font-size:13px}
.quiet{padding:0 14px 12px;color:var(--mute);font:12px ui-monospace,SFMono-Regular,Menlo,monospace}
.pause{position:absolute;right:14px;top:calc(12px + env(safe-area-inset-top));z-index:1;min-height:36px;padding:0 12px;border-radius:99px;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.35);color:#fff;font-size:13px;cursor:pointer}
.hero.paused .poster{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.pause{display:none}}
@media (prefers-reduced-data:reduce){.hero video{display:none}}

.piece.flash{animation:flash 2.4s ease}
.top{background:color-mix(in srgb,var(--paper) 90%,transparent)}
.hero .poster{background:radial-gradient(120% 90% at 85% 0%,color-mix(in srgb,var(--accent) 38%,#111a1f) 0,transparent 55%),radial-gradient(90% 70% at 0% 100%,#22343f 0,transparent 60%),#111a1f}
.hero::before{content:"";position:absolute;left:var(--gut);right:var(--gut);bottom:0;height:2px;background:var(--accent);opacity:.9;max-width:240px}
.rule{height:2px;width:100%;max-width:200px;position:relative;background:var(--accent);margin:10px 0 16px}
.rule:before,.rule:after{content:"";position:absolute;top:-6px;width:12px;height:12px;border:2px solid var(--ink);border-radius:50%;background:var(--paper)}
.rule:before{left:-6px}.rule:after{right:-6px}
.chip.on{background:var(--ink);color:var(--paper)}
.mono-label,.kick,.rcpt dt{font-family:var(--mono)}
.toast{position:relative;padding-right:40px}
.toast button{position:absolute;right:6px;top:6px;background:none;border:0;color:inherit;font-size:20px;cursor:pointer;min-width:32px;min-height:32px}
.cols>div:first-child{padding-bottom:24px}
main{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
@media (min-width:760px){main{padding-bottom:96px}}
.changebar form{background:var(--card)}
h1:focus,h2:focus{outline:none}

/* Powers */
.pw { margin-top: 14px; }
.pwh { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.pwf { display: block; margin: 8px 0; }
.pwgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 8px 0; }
.pwrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.pwi { margin-top: 8px; }
.pwo { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line, rgba(127,127,127,.25)); }
.pwq .pwpre { white-space: pre-wrap; word-break: break-word; font: 12.5px/1.5 ui-monospace, "IBM Plex Mono", monospace; background: rgba(127,127,127,.1); padding: 10px; border-radius: 8px; margin: 8px 0; }
.rep ol { padding-left: 20px; margin: 8px 0; }

/* ---------- page header: a small wordmark over the page title; tap the title for the sections */
.phead{position:relative;padding:calc(14px + env(safe-area-inset-top)) 0 6px}
.phead .wrap{position:relative}
.wm{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.28em;font-size:11.5px;color:var(--mute)}
.wm .markline{width:30px;height:11px;flex:none}
.ptitle-h{margin:2px 0 0;font-size:clamp(26px,7vw,34px)}
.ptitle{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:4px 0;margin:0;cursor:pointer;color:var(--ink);font:inherit;letter-spacing:-.02em;text-align:left;min-height:44px}
.ptitle .caret{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--soft);flex:none}
.ptitle .caret svg{width:11px;height:8px}
.ptitle[aria-expanded=true] .caret{transform:rotate(180deg)}
.pmenu{position:absolute;left:var(--gut);top:100%;z-index:8;min-width:230px;max-width:calc(100vw - 2 * var(--gut));background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px}
.pmenu[hidden]{display:none}
.pmenu a,.pmenu-out{display:block;width:100%;text-align:left;padding:12px 14px;border-radius:10px;text-decoration:none;font-weight:650;min-height:44px;background:none;border:0;cursor:pointer;color:var(--ink)}
.pmenu a:hover,.pmenu-out:hover{background:var(--soft)}
.pmenu a[aria-current=page]{background:var(--soft)}
.pmenu-sep{height:1px;background:var(--line);margin:6px 4px}
.pmenu-who{padding:2px 14px 4px}
.pmenu-out{color:var(--mute);font-weight:600}
/* ---------- one bottom bar, the same on every page, Scout in the middle */
.bar{justify-content:center}
.bar a{max-width:200px}
.bar a.ctr{flex:0 0 76px;position:relative;color:var(--ink)}
.bar a.ctr svg{width:26px;height:26px;padding:12px;box-sizing:content-box;border-radius:50%;background:var(--accent);color:var(--accent-ink);margin-top:-22px;box-shadow:0 6px 18px rgba(0,0,0,.22);border:3px solid var(--paper)}
.bar a.ctr span{margin-top:-1px}
.bar a.ctr[aria-current=page]{color:var(--accent-text)}
@media (min-width:760px){.bar{display:flex}main{padding-bottom:calc(110px + env(safe-area-inset-bottom))}}
.homehi{margin:14px 0 4px;color:var(--mute)}.homehi b{color:var(--ink);font-size:17px}
/* ---------- Scout's chat */
.chatwrap{padding-top:4px}
.chat{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;background:var(--card);box-shadow:var(--shadow);overflow:hidden;height:calc(100dvh - 300px);min-height:360px}
.chat .thread{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.chat form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.chat form .field{min-height:44px;border-radius:99px}
.msg{white-space:pre-wrap;word-wrap:break-word}
.msg.typing{opacity:.6}

.wm{text-decoration:none}
.appfoot{margin:28px 0 8px;text-align:center;font-size:12px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.gate .appfoot{margin-top:22px}

/* ---------- the iPhone app's look (body.tf): Michroma titles, Sora text, mono labels, a dark bar with Scout glowing in the middle */
@font-face{font-family:Michroma;src:url(/fonts/michroma-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Sora;src:url(/fonts/sora-latin-300-normal.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:Sora;src:url(/fonts/sora-latin-500-normal.woff2) format('woff2');font-weight:500 800;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');font-weight:500 800;font-display:swap}
body.tf{--paper:#F6F5F1;--ink:#141517;--card:#fff;--line:rgba(20,21,23,.1);--soft:rgba(20,21,23,.06);--mute:rgba(20,21,23,.58);
  --accent:#FFBF14;--accent-text:#7a5600;--accent-ink:#141517;--r:18px;--gut:18px;
  --display:Sora,"Helvetica Neue",Arial,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;--title:Michroma,"Helvetica Neue",Arial,sans-serif;font-weight:300}
@media (prefers-color-scheme:dark){body.tf{--paper:#141517;--ink:#F6F5F1;--card:#1F2023;--line:rgba(246,245,241,.1);--soft:rgba(246,245,241,.07);--mute:rgba(246,245,241,.58);--accent-text:#FFBF14}}
body.tf b,body.tf strong,body.tf .btn,body.tf h2,body.tf h3{font-weight:500}
body.tf h2,body.tf h3{letter-spacing:0}
body.tf .card,body.tf .item,body.tf .job,body.tf .panel{border-radius:18px;box-shadow:none}
body.tf .sec>h2{font:500 11px var(--mono);letter-spacing:.15em}
/* header: wordmark, title, chevron: centred */
body.tf .phead{text-align:center;padding-top:calc(env(safe-area-inset-top) + 12px)}
body.tf .wm{justify-content:center;font:400 10px var(--title);letter-spacing:.34em;text-transform:uppercase;color:var(--ink);opacity:.72}
body.tf .wm .markline{display:none}
body.tf .ptitle-h{margin:10px 0 0;font:400 clamp(17px,6.4vw,28px)/1.15 var(--title);text-transform:uppercase;letter-spacing:0;overflow-wrap:anywhere}
body.tf .ptitle{flex-direction:column;gap:2px;align-items:center;width:100%;justify-content:center;font:inherit;text-transform:inherit}
body.tf .ptitle .caret{background:none;width:auto;height:auto;opacity:.5;margin-top:6px}
body.tf .ptitle .caret svg{width:14px;height:9px}
body.tf .pmenu{left:50%;transform:translateX(-50%);top:calc(100% + 2px);width:min(330px,calc(100vw - 40px));max-width:none;min-width:0;padding:8px 0;border-radius:24px;border:1px solid rgba(255,255,255,.18);
  background:rgba(11,10,9,.88);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 18px 30px rgba(0,0,0,.55);text-align:left}
body.tf .pmenu::before{content:'';position:absolute;top:-3px;left:50%;width:22px;height:2px;margin-left:-11px;background:var(--accent);box-shadow:0 0 8px var(--accent)}
body.tf .pmenu a,body.tf .pmenu-out{display:flex;align-items:center;gap:14px;min-height:62px;padding:0 20px;border-radius:0;color:#fff;font:400 15px var(--title);text-transform:uppercase;letter-spacing:.12em;border-bottom:1px solid rgba(255,255,255,.08);margin:0 0 0;width:100%}
body.tf .pmenu a::before{content:'';width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18);flex:none}
body.tf .pmenu a[aria-current=page]{color:var(--accent);background:none}
body.tf .pmenu a[aria-current=page]::before{background:var(--accent)}
body.tf .pmenu a:hover,body.tf .pmenu-out:hover{background:rgba(255,255,255,.06)}
body.tf .pmenu-sep{display:none}
body.tf .pmenu-who{color:rgba(255,255,255,.5);padding:10px 20px 0;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase}
body.tf .pmenu-out{border:0;min-height:48px;font:500 11px var(--mono);letter-spacing:.15em;color:rgba(255,255,255,.62)}
body.menuopen::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:7}
/* the one bottom bar */
body.tf .bar{display:block;background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.82) 38%,rgba(0,0,0,.96) 60%,#000 100%);border:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:26px 10px calc(8px + env(safe-area-inset-bottom))}
body.tf .bar .slots{display:flex;max-width:520px;margin:0 auto;align-items:flex-end}
body.tf .bar a{flex:1;color:rgba(255,255,255,.62);font:700 8px var(--mono);letter-spacing:.15em;text-transform:uppercase;min-height:50px;gap:5px;position:relative;max-width:none;padding:6px 2px}
body.tf .bar a svg{width:22px;height:22px;stroke-width:1.5}
body.tf .bar a[aria-current=page]{color:var(--accent);text-shadow:0 0 6px rgba(255,191,20,.6)}
body.tf .bar a[aria-current=page]::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 5px var(--accent);position:absolute;bottom:-3px}
body.tf .bar a.ctr{flex:0 0 76px;align-items:center;min-height:56px}
body.tf .bar a.ctr svg{width:30px;height:30px;padding:14px;margin-top:-18px;background:radial-gradient(circle at 38% 30%,#4A3C32,#2A221D 55%,#18120E);border:2px solid var(--accent);box-shadow:0 7px 10px rgba(0,0,0,.55),inset 0 6px 8px rgba(255,220,190,.1);transition:transform .12s}
body.tf .bar a.ctr:active svg{transform:scale(.96)}
body.tf .bar a.ctr span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
body.tf .bar a.ctr[aria-current=page]::after{display:none}
body.tf .bar a.ctr[aria-current=page] svg{box-shadow:0 7px 10px rgba(0,0,0,.55),0 0 10px rgba(255,191,20,.55)}
body.tf .bar .by{text-align:center;font:500 9px var(--mono);letter-spacing:.3em;color:rgba(255,255,255,.4);margin-top:2px}
.scoutbars rect{transform-box:fill-box;transform-origin:center;animation:sb .8s ease-in-out infinite alternate}
.scoutbars rect:nth-child(2n){animation-delay:-.4s}.scoutbars rect:nth-child(3){animation-delay:-.2s}
@keyframes sb{from{transform:scaleY(.55)}to{transform:scaleY(1.15)}}
@media (prefers-reduced-motion:reduce){.scoutbars rect{animation:none}}
body.tf main{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
@media (min-width:760px){body.tf .bar{display:block}}
body.tf .hero h1{font:400 clamp(20px,6vw,32px)/1.2 var(--title);text-transform:uppercase;letter-spacing:0}
body.tf .appfoot{font:500 10px var(--mono);letter-spacing:.25em;text-transform:lowercase}

/* header motion: the name slides up and shrinks to the small label (or the reverse); transform and opacity only */
body.tf .phead.hd-up .wm{animation:hdUp .45s cubic-bezier(.2,.8,.2,1) both;transform-origin:50% 0}
body.tf .phead.hd-up .pt{animation:hdIn .45s ease-out both}
body.tf .phead.hd-down .pt{animation:hdDown .45s cubic-bezier(.2,.8,.2,1) both;transform-origin:50% 0}
@keyframes hdUp{from{transform:translateY(46px) scale(2.8);opacity:.9}to{transform:none;opacity:.72}}
@keyframes hdIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes hdDown{from{transform:translateY(-38px) scale(.36);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){body.tf .phead .wm,body.tf .phead .pt{animation:none!important}}
body.tf .phead{overflow-x:clip}
body.tf .wm{width:max-content;margin:0 auto}

/* Scout's options: one card per place, and source chips */
.opts{display:grid;gap:8px;margin:2px 0 6px;max-width:92%}
.opt{display:grid;gap:3px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.opt b{font-weight:500}.opt button{justify-self:start;margin-top:6px}
.srcs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 6px}
.srcs .chip{text-decoration:none;font-size:12px}
/* 10-4: the finish */
.tenfour{margin:18px 0 6px}
.btn.big{width:100%;min-height:72px;font:400 clamp(26px,9vw,38px) var(--title,inherit);letter-spacing:.06em;border-radius:22px}
.tenfour-done{margin:18px 0 6px}.tenfour-done h2{font:400 clamp(20px,6vw,26px) var(--title,inherit);text-transform:uppercase;letter-spacing:.02em}
.tenfour-done h2:focus{outline:none}
.facts{margin:10px 0 0;padding-left:18px;color:var(--mute)}.facts li{margin:4px 0}
.lockbadge{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:2px 8px;border-radius:99px;background:var(--soft);color:var(--mute);margin-left:4px}
.lockbadge.on{background:var(--accent);color:var(--accent-ink)}
.changebar.closed{position:static;margin-top:14px;text-align:center}
.linkbtn{background:none;border:0;color:var(--mute);font:inherit;text-decoration:underline;cursor:pointer;min-height:44px;padding:0 12px}
/* active things: a card with when it is and what is left */
.acard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px;margin:0 0 10px}
.acard.done{opacity:.78}
.ac-head{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;color:var(--ink)}
.ac-head b{font-weight:500;font-size:17px;overflow-wrap:anywhere}
.tag{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:99px;background:var(--soft);color:var(--mute);white-space:nowrap}
.tag.on{background:var(--accent);color:var(--accent-ink)}
.ac-when{margin-top:4px;color:var(--mute);font-size:14px}
.ac-list{list-style:none;margin:12px 0 0;padding:0}
.ac-list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);min-height:48px}
.ac-list .tk{width:22px;text-align:center;color:var(--mute)}.ac-list li.done .tk{color:var(--ok);font-weight:700}
.ac-list .lb{flex:1}.ac-list li.done .lb,.ac-list li.skipped .lb{color:var(--mute)}.ac-list li.done .lb{text-decoration:line-through}
.ac-act{display:flex;gap:6px;align-items:center}

/* the result page: a guided stack of bars, one open at a time */
.bars{display:grid;gap:10px;margin-top:14px}
.bstep{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.bstep.done .bs-head .tk{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.bs-head{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:0 18px;background:none;border:0;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.bs-head .tk{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font:500 13px var(--mono);flex:none}
.bs-head .lb{flex:1;font-weight:500;font-size:17px}.bstep.skipped .lb{color:var(--mute)}
.bs-head .cv{width:14px;opacity:.5;transition:transform .3s}.bstep.open .bs-head .cv{transform:rotate(180deg)}
.bs-body{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .32s ease,opacity .25s ease}
.bstep.open .bs-body{grid-template-rows:1fr;opacity:1}
.bs-in{overflow:hidden;min-height:0;padding:0 18px}.bstep.open .bs-in{padding:2px 18px 18px}
@media (prefers-reduced-motion:reduce){.bs-body,.bs-head .cv{transition:none}}
.bs-in .piece{border-radius:14px;margin-top:10px}.bs-in .panel{box-shadow:none;border:0;padding:0;background:none}

.section-empty{margin:28px 0;text-align:center}.section-empty a{color:var(--ink);font-weight:500}

/* the shared plan */
.p-who{display:flex;gap:8px;flex-wrap:wrap;min-height:44px;align-items:center}
.btn.big-tap{min-height:56px;font-size:17px;padding:0 24px}
.p-gh{margin:10px 0 4px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.p-item{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:0 12px;margin:0 0 6px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.p-item .tk{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:13px;flex:none}
.p-item.taken .tk{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.p-item .lb{flex:1}.p-item .by{font:500 12px var(--mono);color:var(--mute)}.p-item .by.add{color:var(--accent-text)}
.ac-claims{margin:8px 0 0;padding-left:18px;color:var(--mute);font-size:14px}.ac-allow{display:flex;align-items:center;gap:6px;color:var(--mute)}
.ac-share{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btn.done{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* swipe actions */
.swipe{position:relative;overflow:hidden;border-radius:18px;margin:0 0 10px}
.swipe .acard,.swipe .item{margin:0}
.sw-front{position:relative;z-index:1;transition:transform .25s ease;background:var(--paper);touch-action:pan-y}
.swipe.open .sw-front{transform:translateX(-210px)}
.sw-actions{position:absolute;top:0;right:0;bottom:0;width:210px;display:flex}
.sw-btn{flex:1;border:0;background:var(--ink);color:var(--paper);font:500 14px var(--display);cursor:pointer;min-height:56px}
.sw-btn+.sw-btn{border-left:1px solid rgba(255,255,255,.15)}.sw-btn.danger{background:#b3261e;color:#fff}
.sw-more{display:none;position:absolute;z-index:2;right:12px;bottom:8px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
@media (hover:hover) and (pointer:fine){.sw-more{display:block}}
.swipe.open .sw-more{display:none}
@media (prefers-reduced-motion:reduce){.sw-front{transition:none}}
details.report{margin-top:18px}details.report summary{cursor:pointer}