/* Graft — implements style/style-guide.md exactly.
   Base rules are shared with the design mockups; the sections marked
   "live app" carry the interactive states the static mockups didn't need. */

@font-face{font-family:'Baloo 2';font-weight:600;src:url('../fonts/Baloo_2_wght_600.woff') format('woff')}
@font-face{font-family:'Baloo 2';font-weight:700;src:url('../fonts/Baloo_2_wght_700.woff') format('woff')}
@font-face{font-family:'Inter';font-weight:400;src:url('../fonts/Inter_wght_400.woff') format('woff')}
@font-face{font-family:'Inter';font-weight:500;src:url('../fonts/Inter_wght_500.woff') format('woff')}
@font-face{font-family:'Inter';font-weight:600;src:url('../fonts/Inter_wght_600.woff') format('woff')}
@font-face{font-family:'JetBrains Mono';font-weight:400;src:url('../fonts/JetBrains_Mono_wght_400.woff') format('woff')}
@font-face{font-family:'JetBrains Mono';font-weight:500;src:url('../fonts/JetBrains_Mono_wght_500.woff') format('woff')}
@font-face{font-family:'JetBrains Mono';font-weight:700;src:url('../fonts/JetBrains_Mono_wght_700.woff') format('woff')}

:root{
  --cream:#F5F3EF; --cream-raised:#FBFAF8; --cream-sunken:#ECE9E2;
  --pine:#1E3D2F; --pine-deep:#142A20; --pine-mid:#2E5C46;
  --sage:#5A7265; --sage-faint:rgba(30,61,47,0.12);
  --amber:#E8A33D; --amber-deep:#C9882B; --umber:#9C6644;
  --cream-on-pine:#F5F3EF; --amber-on-pine:#F0B458;
  --r-card:18px; --r-field:12px; --r-term:10px;
  --shadow:0 2px 12px rgba(30,61,47,0.07);
  --mono:'JetBrains Mono',monospace; --ui:'Inter',sans-serif; --disp:'Baloo 2',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
body{background:var(--cream);color:var(--pine);font:400 15px/1.5 var(--ui);-webkit-font-smoothing:antialiased}
:focus{outline:none}
:focus-visible{box-shadow:0 0 0 2px var(--cream),0 0 0 4px var(--amber);border-radius:6px}

/* ---------- header ---------- */
.hd{display:flex;align-items:center;justify-content:space-between;height:72px;max-width:960px;margin:0 auto;padding:0 24px;position:relative;z-index:3}
.hd .wm{height:34px;display:block}
.hd .hd-right{display:flex;align-items:center;gap:20px}
.hd a.ghost{font:500 14px var(--ui);color:var(--sage);text-decoration:none}
.hd a.ghost:hover{color:var(--pine)}
.hd .gname{font:500 15px var(--mono);color:var(--pine)}

/* sticky header on the graft page (live app) */
.hd.sticky{position:sticky;top:0;background:rgba(245,243,239,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:20;max-width:none}
.hd.sticky .hd-inner{display:flex;align-items:center;justify-content:space-between;max-width:960px;margin:0 auto;width:100%}

/* ---------- landing ---------- */
.col-720{max-width:720px;margin:0 auto;padding:0 24px}
.hero h1{font:700 44px/1.15 var(--disp);letter-spacing:-0.01em;margin:48px 0 18px}
.hero .lead{font:400 17px/1.6 var(--ui);color:var(--sage);max-width:60ch}
.hero .lead .m{font:500 16px var(--mono);color:var(--pine)}
.blob{position:fixed;pointer-events:none;z-index:0}

.grafts-strip{display:flex;gap:10px;margin:26px 0 0;flex-wrap:wrap}
.grafts-strip .strip-label{font:600 11px var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--sage);align-self:center}
.gchip{display:inline-flex;align-items:center;gap:8px;font:400 13px var(--mono);color:var(--pine);background:var(--cream-raised);border:1px solid var(--sage-faint);border-radius:999px;padding:6px 14px;text-decoration:none}
.gchip .st{font-weight:700;font-size:11px;letter-spacing:.04em}
.gchip .st.live{color:var(--pine-mid)} .gchip .st.sync{color:var(--amber-deep)}
.gchip .st.fail{color:var(--umber)}

.card{background:var(--cream-raised);border:1px solid var(--sage-faint);border-radius:var(--r-card);box-shadow:var(--shadow)}
.form-card{margin-top:36px;padding:32px;position:relative;z-index:2}
.f-label{display:block;font:600 12px var(--ui);letter-spacing:.04em;text-transform:uppercase;color:var(--sage);margin:0 0 8px}
.f-field{width:100%;height:48px;border:1px solid var(--sage-faint);border-radius:var(--r-field);background:var(--cream);padding:0 16px;font:400 15px var(--mono);color:var(--pine);outline:none}
.f-field.human{font:400 16px var(--ui)}
.f-field::placeholder{color:#9aa89f}
.f-field:focus{box-shadow:0 0 0 2px var(--cream),0 0 0 4px var(--amber)}
.f-help{font:400 13px var(--ui);color:var(--sage);margin:6px 0 0}
.f-error{font:400 13px var(--ui);color:var(--umber);margin:6px 0 0}
.f-group{margin-bottom:22px}

/* key field with eye toggle (live app) */
.f-keywrap{position:relative}
.f-keywrap .f-field{padding-right:48px}
.eye{position:absolute;right:6px;top:6px;width:36px;height:36px;border:none;background:none;cursor:pointer;color:var(--sage);font:400 14px var(--mono);border-radius:8px}
.eye:hover{color:var(--pine)}

.expander{display:inline-flex;align-items:center;gap:8px;font:500 14px var(--ui);color:var(--pine-mid);margin:2px 0 24px;cursor:pointer;background:none;border:none}
.expander .plus{font-weight:600;display:inline-block;transition:transform .16s ease}
.expander.open .plus{transform:rotate(45deg)}
.docs-wrap{overflow:hidden;max-height:0;transition:max-height .16s ease}
.docs-wrap.open{max-height:130px}

.btn-primary{display:block;width:100%;height:52px;border:none;border-radius:var(--r-field);background:var(--amber);color:var(--pine-deep);font:600 19px var(--disp);cursor:pointer}
.btn-primary:hover{background:var(--amber-deep)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary .dots{font:700 19px var(--mono)}
.btn-ghost-center{display:block;margin:14px auto 0;background:none;border:none;font:500 15px var(--ui);color:var(--pine-mid);cursor:pointer}
.sample-help{font:400 13px var(--ui);color:var(--sage);text-align:center;margin-top:8px}

.honesty{margin:44px 0 0}
.honesty h3{font:600 13px var(--ui);letter-spacing:.04em;text-transform:uppercase;color:var(--sage);margin-bottom:10px}
.honesty p{max-width:64ch;color:var(--pine)}

.foot{display:flex;align-items:center;justify-content:space-between;max-width:720px;margin:64px auto 0;padding:0 24px 80px;gap:18px;flex-wrap:wrap}
.foot .spine{font:600 15px var(--disp);color:var(--pine)}
.foot .links{font:400 14px var(--ui);color:var(--sage)}
.foot .links a{color:var(--sage);text-decoration:none;margin-left:14px}

/* ---------- graft page ---------- */
.col-960{max-width:960px;margin:0 auto;padding:0 24px}
.statusbar{display:flex;align-items:center;gap:14px}
.chip{display:inline-flex;align-items:center;gap:7px;font:500 12px var(--mono);letter-spacing:.04em;border-radius:999px;padding:5px 13px;transition:opacity .18s ease;text-decoration:none;color:inherit;cursor:pointer}
.chip.thinking,.chip.reading,.chip.probing{background:none;border:1.5px solid var(--sage);color:var(--sage)}
.chip.writing,.chip.testing{background:none;border:1.5px solid var(--pine);color:var(--pine)}
.chip.deploying{background:none;border:1.5px solid var(--amber-deep);color:var(--amber-deep)}
.chip.syncing{background:var(--amber);color:var(--pine-deep);animation:pulse 2s ease-in-out infinite}
.chip.live{background:var(--pine);color:var(--cream-on-pine)}
.chip.live .dot{width:6px;height:6px;border-radius:50%;background:#7FB069}
.chip.live.pulsing{animation:pulse 2s ease-in-out infinite}
.chip.patching{background:none;border:1.5px solid var(--umber);color:var(--umber)}
.chip.failed{background:none;border:1.5px solid var(--umber);color:var(--umber)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.65}}
.clock{font:400 13px var(--mono);color:var(--sage);white-space:nowrap}
.sample-banner{display:inline-flex;align-items:center;gap:9px;background:var(--cream-sunken);color:var(--sage);font:400 13px var(--ui);border-radius:999px;padding:6px 14px;margin:6px 0 0}
.sample-banner img{height:15px}

.answer-card{padding:28px;margin-top:22px;transition:opacity .3s ease}
.answer-card.waiting{opacity:.75}
.eyebrow{display:flex;align-items:center;gap:8px;font:600 11px var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--sage)}
.eyebrow img{height:16px}
.eyebrow img.unfurl{animation:unfurl .4s ease-out both;transform-origin:bottom left}
@keyframes unfurl{from{transform:scale(.6) rotate(-12deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.q{font:500 20px/1.4 var(--ui);margin:10px 0 6px}
.a-wait{font:400 15px var(--ui);color:var(--sage)}
.a{font:600 26px/1.35 var(--ui);margin:14px 0 10px}
.a .n{font:700 25px var(--mono);color:var(--amber-deep)}
.a.fading{opacity:0;transition:opacity .3s ease}
.prov{font:400 13px var(--mono);color:var(--sage)}
.sql-link{display:block;text-align:right;font:500 13px var(--ui);color:var(--pine-mid);text-decoration:none;margin-top:6px;background:none;border:none;cursor:pointer;width:100%}
.answer-card .term{margin-top:14px}
.reask{display:flex;gap:10px;margin-top:14px}
.reask .f-field{height:42px;flex:1}
.reask button{font:500 14px var(--ui);color:var(--pine);background:none;border:1.5px solid var(--pine);border-radius:var(--r-field);padding:0 18px;cursor:pointer;white-space:nowrap}

/* feed */
.feed{padding:28px;margin-top:24px}
.stage{display:grid;grid-template-columns:22px 1fr;column-gap:16px;position:relative;padding-bottom:26px}
.stage>div{min-width:0}
.term pre{max-width:100%}
.stage:last-child{padding-bottom:2px}
.stage::before{content:'';position:absolute;left:10.5px;top:26px;bottom:4px;width:1px;background:var(--sage-faint)}
.stage:last-child::before{display:none}
.stage.appear{animation:rise .24s ease-out both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.s-ico{width:22px;height:22px;color:var(--pine)}
.s-ico svg{width:22px;height:22px;display:block}
.s-ico.active{position:relative}
.s-ico.active::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--amber);animation:pulse 2s ease-in-out infinite}
.s-ico.umber{color:var(--umber)}
.s-line{font:400 16px var(--ui);padding-top:0;overflow-wrap:anywhere}
.s-line .m{font:500 15px var(--mono)}
.s-line .m.hot{color:var(--amber-deep)}
.s-done{color:var(--pine)}
.s-sub{font:400 13px var(--ui);color:var(--sage);margin-top:4px}
.s-sub .m{font:400 12.5px var(--mono)}
.s-ellipsis{font:500 15px var(--mono)}
.stage .tsg{position:absolute;left:-86px;top:1px;width:74px;text-align:right;font:400 13px var(--mono);color:var(--sage);opacity:0;transition:opacity .15s ease}
.stage:hover .tsg{opacity:1}
.artifact{margin-top:14px}
.chips-row{display:flex;flex-wrap:wrap;gap:8px}
.echip{font:400 13px var(--mono);background:var(--cream-sunken);border-radius:8px;padding:5px 11px}
.echip b{font-weight:700}

.term{background:var(--pine-deep);border-radius:var(--r-term);overflow:hidden}
.term .tbar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid rgba(245,243,239,.08)}
.term .tname{font:400 12px var(--mono);color:rgba(245,243,239,.7)}
.term .tcopy{font:500 12px var(--ui);color:rgba(245,243,239,.55);background:none;border:none;cursor:pointer}
.term .tcopy:hover{color:rgba(245,243,239,.85)}
.term .tscroll{max-height:380px;overflow:auto;position:relative}
.term pre{padding:14px 16px;font:400 13px/1.6 var(--mono);color:rgba(245,243,239,.92);overflow-x:auto;white-space:pre}
.term .str{color:var(--amber-on-pine)} .term .com{color:#7d958a;font-style:italic} .term .kw{color:#a8c5b5}
.term .hl{background:rgba(240,180,88,.18);color:var(--amber-on-pine)}
.term .tfoot{padding:8px 14px;border-top:1px solid rgba(245,243,239,.08);font:400 12px var(--mono);color:rgba(245,243,239,.55);background:none;border-left:none;border-right:none;border-bottom:none;cursor:pointer;width:100%;text-align:left}
.term.collapsed .tscroll{max-height:120px;overflow:hidden}
.term-wrap{position:relative}
.followpill{position:absolute;right:14px;bottom:14px;font:500 12px var(--mono);background:var(--amber);color:var(--pine-deep);border:none;border-radius:999px;padding:5px 12px;cursor:pointer;box-shadow:var(--shadow)}

table.rows{width:100%;border-collapse:collapse;background:var(--cream);border:1px solid var(--sage-faint);border-radius:10px;overflow:hidden}
table.rows caption{caption-side:top;text-align:left;font:400 13px var(--ui);color:var(--sage);padding:0 0 8px}
table.rows th{font:600 11px var(--ui);letter-spacing:.04em;text-transform:uppercase;color:var(--sage);background:var(--cream-sunken);text-align:left;padding:8px 12px}
table.rows td{font:400 13px var(--mono);padding:7px 12px;border-top:1px solid var(--sage-faint);overflow-wrap:anywhere}
table.rows .null{color:#9aa89f}

.linkchip{display:inline-flex;align-items:center;gap:7px;font:400 13px var(--mono);color:var(--pine);border:1.5px solid var(--pine);border-radius:999px;padding:6px 14px;text-decoration:none}
.linkchip:hover{background:var(--pine);color:var(--cream)}

.counter{font:700 40px var(--mono);letter-spacing:.01em}
.counter.climbing{color:var(--amber-deep)}
.counter-cap{font:400 13px var(--ui);color:var(--sage);margin-top:2px}
.pertable{display:flex;gap:18px;font:400 13px var(--mono);color:var(--sage);margin-top:10px;flex-wrap:wrap}
.pertable b{color:var(--pine);font-weight:500}

.patch-rows{margin-top:8px}
.patch-row{display:grid;grid-template-columns:22px 1fr;column-gap:16px;padding:8px 0 8px 34px;position:relative}
.patch-row>*{min-width:0}
.patch-row .s-ico{color:var(--umber)}
.patch-row .att{position:absolute;left:38px;top:24px;font:500 10px var(--mono);color:var(--umber)}
.patchline{color:var(--pine);font:500 15px var(--ui);display:flex;align-items:center;gap:8px}
.patchline .leafdot{width:7px;height:7px;border-radius:50%;background:#7FB069}
.patch-expand{font:400 13px var(--ui);color:var(--sage);background:none;border:none;cursor:pointer}

.mcp-row{font:400 12px var(--mono);color:var(--sage);padding:2px 0 2px 38px}
.mcp-row .ok{color:var(--pine-mid)} .mcp-row .err{color:var(--umber)}

/* review gate (live app) */
.gate{margin-top:14px}
.gate .approve{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font:600 16px var(--disp);background:var(--amber);color:var(--pine-deep);border:none;border-radius:var(--r-field);padding:11px 22px;cursor:pointer}
.gate .approve:hover{background:var(--amber-deep)}
.gate .gate-note{font:400 13px var(--ui);color:var(--sage);margin-top:8px}

/* honest failure (live app) */
.fail-block{margin-top:6px}
.fail-block .f1{font:600 18px var(--ui);color:var(--pine)}
.fail-block .f2{font:400 15px var(--ui);color:var(--pine);margin-top:6px;max-width:64ch}
.fail-block .f3{font:400 14px var(--ui);color:var(--sage);margin-top:6px}
.fail-block .actions{display:flex;gap:12px;margin-top:14px;align-items:center}
.fail-block .retry{font:500 14px var(--ui);color:var(--pine);background:none;border:1.5px solid var(--pine);border-radius:var(--r-field);padding:9px 18px;cursor:pointer}
.fail-block .startover{font:500 14px var(--ui);color:var(--pine-mid);background:none;border:none;cursor:pointer}
.fail-creds{display:flex;gap:10px;margin-top:12px;max-width:520px}
.fail-creds .f-field{height:42px;flex:1}

/* facts + digests */
.facts{padding:24px 28px;margin-top:24px}
.facts h3,.digests h3{font:600 13px var(--ui);letter-spacing:.04em;text-transform:uppercase;color:var(--sage);margin-bottom:14px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 36px}
.frow{display:flex;justify-content:space-between;border-bottom:1px solid var(--sage-faint);padding:7px 0;gap:14px}
.frow .fl{font:400 13px var(--ui);color:var(--sage);white-space:nowrap}
.frow .fv{font:500 14px var(--mono);text-align:right;overflow-wrap:anywhere}
.facts .links{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.facts .promise{font:400 13px var(--ui);color:var(--sage);margin-top:16px}

.digests{padding:24px 28px;margin-top:24px}
.drow{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:9px 0;border-bottom:1px solid var(--sage-faint)}
.drow:last-child{border-bottom:none}
.drow .dd{font:400 13px var(--mono);color:var(--sage);padding-top:1px}
.drow .dt{font:400 15px var(--ui)}
.drow .dt .m{font:500 14px var(--mono)}
.drow .dt .upd{font:500 11px var(--mono);letter-spacing:.04em;background:var(--cream-sunken);border-radius:999px;padding:2px 9px;margin-left:8px;color:var(--pine-mid)}
.drow .dt .ricon{color:var(--umber);font:500 13px var(--mono);margin-right:6px}
.d-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 0 10px;color:var(--sage);font:400 14px var(--ui)}
.d-empty img{width:150px;opacity:.9}
.d-more{font:400 13px var(--ui);color:var(--sage);background:none;border:none;cursor:pointer;padding:9px 0 0}

.pagefoot{font:400 13px var(--ui);color:var(--sage);text-align:center;margin:42px 0 60px}
.pagefoot a{color:var(--sage)}
.pagefoot button{font:400 13px var(--ui);color:var(--sage);background:none;border:none;cursor:pointer;text-decoration:underline}

/* ---------- settings ---------- */
.set-title{font:700 32px var(--disp);margin:40px 0 6px}
.set-sub{color:var(--sage);margin-bottom:34px}
.set-gchip{font:400 13px var(--mono);background:var(--cream-sunken);border-radius:999px;padding:5px 13px;color:var(--pine)}
.group{padding:28px;margin-bottom:24px}
.group h3{font:600 13px var(--ui);letter-spacing:.04em;text-transform:uppercase;color:var(--sage);margin-bottom:18px}
.ctl{display:grid;grid-template-columns:1fr auto;gap:4px 24px;padding:16px 0;border-bottom:1px solid var(--sage-faint);align-items:center}
.ctl:last-child{border-bottom:none}
.ctl .cl{font:500 15px var(--ui)}
.ctl .ch{grid-column:1;font:400 13px var(--ui);color:var(--sage);max-width:58ch}
.ctl .ch .m{font:400 12.5px var(--mono)}
.ctl .note{grid-column:1/3;font:400 13px var(--ui);color:var(--sage)}
.toggle{width:40px;height:24px;border-radius:999px;background:var(--cream-sunken);border:1px solid var(--sage-faint);position:relative;justify-self:end;cursor:pointer;flex:none}
.toggle::after{content:'';position:absolute;top:2.5px;left:3px;width:17px;height:17px;border-radius:50%;background:var(--cream-raised);border:1.5px solid var(--pine);transition:left .15s ease,right .15s ease}
.toggle.on{background:var(--amber);border-color:var(--amber)}
.toggle.on::after{left:17px;background:var(--pine-deep);border-color:var(--pine-deep)}
.selectwrap{position:relative;justify-self:end}
.selectwrap select{appearance:none;-webkit-appearance:none;font:400 14px var(--mono);color:var(--pine);background:var(--cream);border:1px solid var(--sage-faint);border-radius:var(--r-field);padding:9px 36px 9px 14px;cursor:pointer}
.selectwrap::after{content:'⌄';position:absolute;right:13px;top:8px;color:var(--sage);pointer-events:none}
.slider{display:flex;align-items:center;gap:14px;justify-self:end}
.slider input[type=range]{appearance:none;-webkit-appearance:none;width:190px;height:4px;border-radius:2px;background:linear-gradient(to right,var(--amber) var(--fill,44%),var(--sage-faint) var(--fill,44%));cursor:pointer}
.slider input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--pine-deep);border:none}
.slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--pine-deep);border:none}
.slider .val{font:500 15px var(--mono);min-width:104px;text-align:right}
.stepper{display:flex;align-items:center;gap:14px;font:500 15px var(--mono);justify-self:end}
.stepper button{width:30px;height:30px;border:1px solid var(--sage-faint);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--sage);background:none;cursor:pointer;font:500 15px var(--mono)}
.stepper button:hover{color:var(--pine)}
.subfields{grid-column:1/3;display:flex;gap:12px;margin-top:10px;padding-left:16px;border-left:2px solid var(--pine);flex-wrap:wrap;align-items:center}
.subfields .f-field{height:42px;font-size:13.5px;flex:1;min-width:180px}
.subfields textarea.f-field{height:96px;padding:10px 16px;font:400 12.5px var(--mono);resize:vertical;min-width:100%}
.subfields .testres{font:400 13px var(--mono);color:var(--pine)}
.subfields .testres.err{color:var(--umber);font-family:var(--ui)}
.btn-outline{font:500 14px var(--ui);color:var(--pine);background:none;border:1.5px solid var(--pine);border-radius:var(--r-field);padding:9px 18px;justify-self:end;cursor:pointer}
.btn-outline.danger:hover{border-color:var(--umber);color:var(--umber)}
.btn-outline.umber{background:var(--umber);border-color:var(--umber);color:var(--cream)}
.btn-outline.umber:disabled{opacity:.45;cursor:not-allowed}
.ghostbtn{font:500 14px var(--ui);color:var(--pine-mid);background:none;border:none;justify-self:end;cursor:pointer;white-space:nowrap}
.radio-row{display:flex;gap:18px;justify-self:end;font:400 14px var(--ui)}
.radio-row .r{display:flex;align-items:center;gap:7px;cursor:pointer}
.radio-row .dotr{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--sage);flex:none}
.radio-row .dotr.sel{border-color:var(--pine-deep);box-shadow:inset 0 0 0 4px var(--cream-raised);background:var(--pine-deep)}
.mini-nav{position:fixed;left:calc(50% - 360px - 170px);top:140px;display:none;flex-direction:column;gap:10px;font:400 14px var(--ui);color:var(--sage)}
.mini-nav a{color:inherit;text-decoration:none}
.mini-nav a.on{color:var(--pine);font-weight:500}
@media(min-width:1024px){.mini-nav{display:flex}}
.confirm-well{grid-column:1/3;background:var(--cream-sunken);border-radius:var(--r-field);padding:18px;margin-top:12px}
.confirm-well p{font:400 14px var(--ui);color:var(--pine);max-width:58ch}
.confirm-well .row{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}
.confirm-well .f-field{height:42px;flex:1;min-width:200px;background:var(--cream-raised)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(10px);background:var(--pine);color:var(--cream-on-pine);font:400 14px var(--ui);border-radius:999px;padding:10px 20px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- empty state (idle revisit) ---------- */
.idle-line{display:flex;align-items:center;gap:10px;font:400 14px var(--ui);color:var(--sage)}
.idle-line img{height:18px}

/* ---------- responsive ---------- */
@media(max-width:640px){
  .col-720,.col-960{padding:0 16px}
  .form-card{padding:20px}
  .hero h1{font-size:32px}
  .blob{transform:scale(.6);transform-origin:inherit}
  .fgrid{grid-template-columns:1fr}
  .hd{padding:0 16px}
  .drow{grid-template-columns:92px 1fr}
}
@media(max-width:480px){.hero h1{font-size:32px}}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .stage.appear{animation:none}
  .chip{transition:none}
  .chip.syncing,.s-ico.active::after,.chip.live.pulsing{animation:none}
  .eyebrow img.unfurl{animation:none}
  .docs-wrap{transition:none}
  .answer-card,.a.fading{transition:none}
}