@font-face{font-family:Inter;src:url('vendor/fonts/inter-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('vendor/fonts/inter-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url('vendor/fonts/inter-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url('vendor/fonts/inter-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('vendor/fonts/space-grotesk-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('vendor/fonts/space-grotesk-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('vendor/fonts/jetbrains-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --bg:#f5f2eb;--ink:#263c33;--muted:#506158;--teal:#246354;--cyan:#315f77;--rust:#8a4a2b;
  --line:rgba(38,60,51,.18);--soft:rgba(38,60,51,.10);--card:#ffffffc7;
  --grad:linear-gradient(110deg,#246354,#315f77);--radius:18px;--shadow:0 18px 42px -32px rgba(38,60,51,.28);
  --mono:'JetBrains Mono',ui-monospace,monospace;--display:'Space Grotesk',Inter,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;background-image:radial-gradient(ellipse 850px 620px at 8% 0%,#dcece2a6,transparent 75%),radial-gradient(ellipse 800px 700px at 100% 8%,#e1e8efa0,transparent 75%)}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.03em;line-height:1.18}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--teal);text-underline-offset:4px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-80px;left:12px;z-index:1000;background:#fff;padding:12px;border-radius:10px}
.skip-link:focus{top:10px}

/* Navigation */
.site-nav{position:sticky;top:0;z-index:100;background:#1e2c28f5;backdrop-filter:blur(16px);border-bottom:1px solid #ffffff1a}
.nav-inner{max-width:1180px;padding:13px 26px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:#fff}
.brand-mark{width:38px;height:38px;display:grid;place-items:center;border:1px solid #67a18d;border-radius:11px;color:#d3f7e7;background:linear-gradient(145deg,#315b4b,#3e4659);font-family:var(--display);font-weight:700}
.brand b{display:block;font-family:var(--display);font-size:14px}
.brand small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:#b6c6bd}
.site-nav nav{display:flex;gap:9px;align-items:center}
.site-nav nav a{padding:8px 12px;font-size:12px;font-weight:500;color:#c4d1ca;text-decoration:none;border-radius:8px}
.site-nav nav a:hover{background:#ffffff14;color:#fff}
.site-nav nav .nav-active{color:#d4f6e6;background:#ffffff0d;border:1px solid #ffffff14}

main{max-width:1132px;padding:0 26px;margin:auto}

/* Step 1: the questions, centered like a search page */
.ask{min-height:calc(100svh - 65px);display:grid;place-items:center;padding:44px 0 64px}
.ask-inner{width:min(620px,100%)}
h1{font-size:clamp(40px,5.4vw,64px);font-weight:500;letter-spacing:-.05em;line-height:1.04;text-align:center}
h1 span{color:var(--teal)}
.ask-sub{max-width:520px;margin:16px auto 0;text-align:center;font-size:15px;color:var(--muted);text-wrap:balance}

/* No box around the questions: they sit on the page, separated by hairlines. */
.answers{margin-top:44px;display:block}
.question{border:0;margin:0;padding:0 0 26px;min-width:0;border-bottom:1px solid #263c3324}
.question+.question{padding-top:24px}
.question:last-of-type{border-bottom:0}
.question legend{float:left;display:flex;align-items:baseline;gap:12px;width:100%;padding:0;margin-bottom:16px;font:500 20px/1.25 var(--display);letter-spacing:-.025em;color:var(--ink)}
.question legend small{margin-left:auto;font:400 12px Inter,sans-serif;color:var(--muted);letter-spacing:0}
.q-num{flex-shrink:0;width:14px;font:400 12px var(--mono);color:var(--teal)}
.options{clear:both;display:flex;flex-wrap:wrap;gap:10px;padding-left:26px}
.option{position:relative;display:inline-flex}
.option input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.option>span{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:0 20px;border:1px solid #263c3333;border-radius:999px;background:transparent;font-size:15px;font-weight:500;color:var(--ink);transition:background .15s,border-color .15s,color .15s,transform .1s}
.option:hover>span{background:#ffffffa6;border-color:#263c3359}
.option input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.option input:focus-visible+span{outline:3px solid var(--cyan);outline-offset:3px}
.needs .option input:checked+span::before{content:'';width:6px;height:10px;margin:-3px 2px 0 -2px;border:solid #bfe7d3;border-width:0 2px 2px 0;transform:rotate(45deg)}

.answers-tools{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:-6px}
.ks-note{margin-right:auto;font-size:12px;color:var(--teal)}
.ks-note .text-button{margin-left:4px;color:var(--teal)}
.answers-foot{padding-top:18px}
.answer-summary{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.text-button{border:0;background:transparent;padding:8px 0;min-height:40px;font-size:12px;font-weight:500;color:var(--muted);text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.text-button:hover{color:var(--teal)}
/* The Show button: three tap dots, a rolling count, and the way in. */
.go{position:relative;overflow:hidden;width:100%;display:flex;align-items:center;gap:16px;min-height:62px;padding:8px 8px 8px 22px;border:0;border-radius:999px;background:var(--ink);color:#fff;white-space:nowrap;box-shadow:0 16px 30px -18px rgba(30,44,40,.9);transition:background .3s,transform .12s}
.go:hover{background:#1f322b}
.go:active{transform:scale(.98)}
.go.ready{background:var(--grad)}
.taps{display:inline-flex;align-items:center;gap:5px;height:24px;padding-right:14px;border-right:1px solid #ffffff2e}
.taps i{width:8px;height:8px;border-radius:50%;border:1.5px solid #ffffff73;transition:background .2s,border-color .2s,transform .2s}
.taps i.on{background:#bfe7d3;border-color:#bfe7d3;animation:pop .3s ease-out}
.go-text{display:inline-flex;align-items:baseline;gap:7px}
.odo{display:inline-flex;font:600 22px/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wheel{display:inline-block;height:1.1em;overflow:hidden}
.strip{display:flex;flex-direction:column;transform:translateY(calc(var(--d,0) * -1.1em));transition:transform .55s cubic-bezier(.2,.9,.25,1.15)}
.strip span{height:1.1em;line-height:1.1}
.go-noun{font-size:15px;font-weight:400;color:#ffffffcc}
.go-icon{margin-left:auto;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#ffffff1f;transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s}
.go:hover .go-icon,.go:focus-visible .go-icon{transform:translateX(3px);background:#ffffff33}
.go::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff40 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.go.shine::after{animation:shine .9s ease-out}
@keyframes shine{to{transform:translateX(120%)}}

.presets{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:30px}
.presets-label{font-size:12px;color:var(--muted);margin-right:2px}
.preset{min-height:38px;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:transparent;font-size:13px;color:var(--ink)}
.preset:hover{background:#fff;border-color:#8fb3a1}
.ask-foot{margin-top:26px;text-align:center;font-size:12px;color:var(--muted)}

/* Step 2: the list, with the answers pinned on top */
.list-bar{position:sticky;top:65px;z-index:50;display:flex;align-items:center;gap:12px;margin:0 -26px;padding:10px 26px;background:#f5f2ebf7;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--soft)}
.back{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;min-height:40px;padding:6px 14px 6px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--ink)}
.back:hover{border-color:#8fb3a1}
.back svg{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.back:hover svg{transform:translateX(-2px)}
.answer-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.chip{flex-shrink:0;padding:4px 11px;border-radius:999px;background:#e3efe6;color:#20533f;font-size:12px;font-weight:500;white-space:nowrap}
.list-count{margin-left:auto;flex-shrink:0;font:12px var(--mono);color:var(--muted)}
.button.primary{background:var(--grad);border-color:transparent;color:#fff}

/* Results */
.results{padding-top:28px}
.results-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:6px}
.results-head h2{font-size:32px}
.tools{display:flex;align-items:flex-end;gap:12px}
.ks-toggle>span{white-space:nowrap}
.ks-toggle input:checked+span{background:#e3efe6;border-color:#6f9e86;color:#20533f}
.ks-toggle input:checked+span::before{content:'✓';margin-right:5px;color:var(--teal)}
.ksn-note{margin-top:16px;padding:12px 15px;border:1px solid #c9d8cd;border-radius:12px;background:#edf3ee;font-size:12.5px;color:var(--muted);line-height:1.6}
.ksn-note b{color:var(--ink)}
.search{display:flex;flex-direction:column;gap:5px;width:min(320px,100%)}
.search label{font-size:11px;font-weight:600}
.search input{width:100%;min-height:42px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:13px}
.search input:focus{outline:2px solid var(--cyan);outline-offset:2px}

.group{padding-top:30px}
.group-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.group-head h3{display:flex;align-items:center;gap:10px;font-size:22px}
.count{display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 7px;border-radius:20px;background:#e3ebe4;font:11px var(--mono);color:var(--teal);letter-spacing:0}
.group-soon .count{background:#f3e3d8;color:var(--rust)}
.group-note{font-size:12px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:18px 18px 15px;background:var(--card);border:1px solid var(--soft);border-radius:var(--radius);box-shadow:var(--shadow)}
.card:hover{background:#fff;border-color:#adc5b7}
.card-tags{display:flex;gap:6px;flex-wrap:wrap;font:9px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--teal)}
.card-tags .tag-ks{padding:0 6px;border:1px solid #9ab6a4;border-radius:5px}
.card-tags .tag-unit{padding:0 6px;border-radius:5px;background:#e8e1f0;color:#4f3f6b}
.warning{padding:8px 11px;border-left:3px solid #b5895a;background:#f6efe6;border-radius:0 8px 8px 0;font-size:11.5px;line-height:1.5;color:#6b4a2a}
.card.is-warned{opacity:.86}
.card h4{font-size:18px;line-height:1.25;overflow-wrap:anywhere}
.card h4 a{color:var(--ink);text-decoration:none}
.card h4 a::after{content:' ↗';color:var(--teal);font-size:.8em}
.card h4 a:hover{color:var(--teal);text-decoration:underline}
.amount{font-size:13px;font-weight:600;color:var(--teal);line-height:1.45}
.who{font-size:12.5px;color:var(--muted);line-height:1.6}
.when{font-size:12px;font-weight:500;line-height:1.5}
.when::before{content:'◷ ';color:var(--teal)}
.when.urgent{color:var(--rust)}
.when.urgent::before{color:var(--rust)}
.when-closed,.when-unchecked{color:var(--muted);font-weight:400}
.when-note{font-size:11px;color:var(--muted);margin-top:-4px}
.checks{list-style:none;margin:2px 0 0;padding:9px 11px;background:#f1ebdf;border-radius:10px;display:grid;gap:5px;font-size:11.5px;line-height:1.5;color:#59492e}
.checks li{display:flex;gap:7px}
.checks li::before{content:'!';font-weight:700;color:#8a6a2b;flex-shrink:0}
.meta{margin-top:auto;padding-top:6px;font:10px var(--mono);color:var(--muted)}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 18px;border:1px solid var(--line);border-radius:10px;font-size:12px;font-weight:600;background:#fff;color:var(--ink)}
.button:hover{background:#eaf2ed}
.show-all{margin-top:14px}

.out-group{margin-top:36px;border:1px solid var(--line);border-radius:var(--radius);background:#ffffff80}
.out-group>summary{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:16px 20px;cursor:pointer;list-style:none;font:500 18px var(--display);letter-spacing:-.02em}
.out-group>summary::-webkit-details-marker{display:none}
.out-group>summary::before{content:'+';color:var(--teal);font-size:20px;width:14px}
.out-group[open]>summary::before{content:'−'}
.out-group>summary small{flex-basis:100%;padding-left:24px;font:400 12px Inter,sans-serif;color:var(--muted);letter-spacing:0}
.out-list{list-style:none;margin:0;padding:0 20px 14px 44px;display:grid;gap:0}
.out-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:14px;padding:10px 0;border-top:1px solid var(--soft);font-size:13px}
.out-list a{font-weight:500;color:var(--ink)}
.out-list .reason{color:var(--muted);font-size:12px}
.out-list .reason small{font:10px var(--mono);color:var(--teal);white-space:nowrap}

.empty-state{margin-top:24px;padding:30px 20px;text-align:center;border:1px dashed var(--line);border-radius:var(--radius)}
.empty-state p{font-size:13px;color:var(--muted);margin:8px 0 16px}
.error-note{margin-top:18px;padding:14px 16px;border:1px solid #d7b2aa;border-radius:10px;background:#f5e5df;color:#873e3e;font-size:13px}

.how{margin-top:56px;padding-top:26px;border-top:1px solid var(--line)}
.how h2{font-size:22px}
.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:14px}
.how-grid p{font-size:12.5px;color:var(--muted);line-height:1.7}
.how-grid b{display:block;margin-bottom:4px;color:var(--ink);font-size:13px}

footer{margin:46px 0 30px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}
.footer-brand{display:flex;gap:13px;align-items:center;font:700 18px var(--display);text-decoration:none;color:var(--ink)}
.footer-brand span{font:12px Inter,sans-serif}
footer>p{margin-top:10px}
footer>div{display:flex;justify-content:space-between;gap:20px;margin-top:18px}
footer>div a{text-decoration:none}

.to-top{border:0;background:none;padding:0;font:inherit;color:var(--teal);cursor:pointer}

/* Motion that answers an action: the view you open slides in, its cards rise,
   the count on the button bumps when an answer changes it. Off for reduced motion. */
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes view-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sweep{to{transform:scaleX(1)}}
.view.entering{animation:view-in .34s cubic-bezier(.2,.8,.2,1)}
.card.enter{animation:rise .34s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 45ms)}
.option:active>span{transform:scale(.96)}
.option input:checked+span{animation:pop .26s ease-out}
.results-head h2::after{content:'';display:block;width:64px;height:3px;margin-top:8px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:left}
.results-head.arrived h2::after{animation:sweep .55s cubic-bezier(.2,.8,.2,1) .1s forwards}

@media(max-width:900px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  main{padding:0 16px}
  .nav-inner{padding:12px 16px;gap:8px}
  .brand b{font-size:12px}
  .brand small{font-size:8px}
  .brand-mark{width:33px;height:33px;font-size:13px}
  .site-nav nav a{font-size:11px;padding:8px}
  .site-nav nav .nav-active{display:none}
  .ask{min-height:auto;place-items:start;padding:34px 0 24px}
  h1{font-size:40px}
  .ask-sub{font-size:14px}
  .answers{margin-top:34px}
  .question{padding-bottom:22px}
  .question+.question{padding-top:22px}
  .question legend{font-size:18px;margin-bottom:14px}
  .options{padding-left:0}
  .option>span{min-height:44px;padding:0 18px;font-size:15px}
  .answers-foot{position:sticky;bottom:0;z-index:5;margin:0 -16px;padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 64%,#f5f2eb00)}
  .presets{justify-content:flex-start}
  .presets-label{flex-basis:100%}
  .ask-foot{text-align:left}
  .list-bar{top:57px;margin:0 -16px;padding:8px 16px;gap:8px}
  .back span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .back{padding:6px 10px}
  .list-count{font-size:11px}
  .results-head{flex-direction:column;align-items:stretch}
  .results-head h2{font-size:27px}
  .tools{flex-direction:column;align-items:stretch}
  .ks-toggle{align-self:flex-start}
  .search{width:100%}
  .search input{font-size:16px}
  .cards{grid-template-columns:1fr}
  .show-all{width:100%}
  .out-list{padding:0 16px 12px}
  .out-list li{grid-template-columns:1fr;gap:2px}
  .out-group>summary small{padding-left:0}
  .how-grid{grid-template-columns:1fr;gap:14px}
}
@media(max-width:360px){
  h1{font-size:34px}
  .brand small{display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}