/* Newcomer Copilot — editorial draft stylesheet
   Palette: warm ivory paper, deep evergreen ink, one restrained burnt-coral accent.
   Type: large editorial serif (Fraunces when present locally, serif fallbacks otherwise)
         paired with a clean sans. No remote fonts, no CDN, no external JS.
   Legacy class names (.card .msg .row .composer .chips .item .pill .badge .warn …)
   are preserved so ask.html / checklist.html / pay.html keep working unchanged. */

:root{
  --bg:#F6F3E9;
  --paper:#FFFCF4;
  --card:#FFFCF4;
  --ink:#173F35;
  --ink2:#2E5348;
  --mute:#52695F;
  --brand:#AD4936;
  --brand2:#8D3729;
  --line:#DED5C3;
  --soft:#F2E5DA;
  --ok:#1E6A49;
  --okbg:#E9F1EB;
  --warn:#8A5A12;
  --warnbg:#FBF3DF;
  --r:4px;
  --serif:"Fraunces","Fraunces 72","Recoleta","Playfair Display","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:"Avenir Next","Avenir","Segoe UI Variable Text","Segoe UI","Helvetica Neue","Nimbus Sans",Helvetica,sans-serif;
  --step--1:clamp(.82rem,.8rem + .12vw,.9rem);
  --step-0:clamp(1rem,.97rem + .16vw,1.08rem);
  --step-1:clamp(1.1rem,1.02rem + .42vw,1.3rem);
  --step-2:clamp(1.3rem,1.15rem + .8vw,1.7rem);
  --step-3:clamp(1.65rem,1.35rem + 1.5vw,2.5rem);
  --step-4:clamp(2.2rem,1.5rem + 3.6vw,4.2rem);
  --gap-s:clamp(.7rem,.55rem + .6vw,1.1rem);
  --gap-m:clamp(1.4rem,1rem + 1.6vw,2.3rem);
  --gap-l:clamp(2.6rem,1.6rem + 4.2vw,5.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:var(--step-0)/1.62 var(--sans);
  font-synthesis-weight:none;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto}

/* ---------- links & focus ---------- */
a{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--brand2)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:.5rem;top:.5rem;z-index:50;background:var(--ink);color:var(--paper);padding:.6rem .9rem;text-decoration:none}

/* ---------- typographic base ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;color:var(--ink);letter-spacing:-.015em;text-wrap:balance}
h1{font-size:var(--step-4);line-height:1.02;margin:0 0 var(--gap-s);letter-spacing:-.03em}
h2{font-size:var(--step-3);line-height:1.1;margin:0 0 var(--gap-s)}
h3{font-size:var(--step-1);line-height:1.25;margin:0 0 .4rem}
p{margin:0 0 .9em;max-width:66ch}
.lead{font-size:var(--step-1);line-height:1.5;color:var(--ink2);max-width:54ch}
.mute{color:var(--mute)}
.small,.mute.small{font-size:var(--step--1)}
.kicker{font:600 var(--step--1)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin:0 0 .8rem}
.figure-label{font:600 var(--step--1)/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
hr.rule{border:0;border-top:1px solid var(--line);margin:var(--gap-m) 0}

/* ---------- shell ---------- */
header.site{position:sticky;top:0;z-index:20;background:color-mix(in oklab,var(--bg) 92%,white);border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(6px)){header.site{background:color-mix(in oklab,var(--bg) 82%,transparent);backdrop-filter:blur(8px)}}
header.site .in{max-width:76rem;margin:auto;padding:.7rem clamp(1rem,4vw,2.5rem);display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.4rem}
.logo{font-family:var(--serif);font-size:1.15rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.logo .dot{color:var(--brand)}
.logo:hover{color:var(--ink);text-decoration:none}
nav.site{margin-left:auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.15rem}
nav.site a{font:500 var(--step--1)/1.6 var(--sans);color:var(--ink2);text-decoration:none;padding:.15rem 0;border-bottom:1px solid transparent}
nav.site a:hover{color:var(--brand);border-bottom-color:var(--brand)}
nav.site a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
nav.site a.cta{color:var(--brand);font-weight:600;border-bottom:1px solid var(--brand)}
@media (max-width:640px){
  header.site .in{padding:.6rem .9rem}
  nav.site{margin-left:0;width:100%;gap:.35rem .9rem}
  nav.site a{font-size:.83rem}
}

main{max-width:76rem;margin:auto;padding:var(--gap-m) clamp(1rem,4vw,2.5rem) var(--gap-l)}
section{margin:0 0 var(--gap-l)}
footer.site{border-top:1px solid var(--line);max-width:76rem;margin:auto;padding:var(--gap-m) clamp(1rem,4vw,2.5rem) 3.5rem;font-size:var(--step--1);line-height:1.6;color:var(--mute)}
footer.site p{max-width:78ch}
footer.site b{color:var(--ink2)}
.footlinks{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:0 0 1rem;padding:0;list-style:none}

/* ---------- buttons (legacy .btn / button) ---------- */
button,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:600 var(--step-0)/1 var(--sans);
  background:var(--brand);color:var(--paper);border:1px solid var(--brand);
  padding:.85rem 1.35rem;border-radius:var(--r);cursor:pointer;text-decoration:none;
  transition:background .18s cubic-bezier(.2,.7,.3,1),color .18s,border-color .18s,transform .18s
}
button:hover,.btn:hover{background:var(--brand2);border-color:var(--brand2);color:var(--paper);text-decoration:none}
button:active,.btn:active{transform:translateY(1px)}
button[disabled]{opacity:.55;cursor:default}
.btn.ghost,button.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover,button.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.quiet{background:transparent;color:var(--brand);border-color:transparent;padding-left:0;padding-right:0;text-decoration:underline;text-underline-offset:.25em}
.btn.quiet:hover{background:transparent;color:var(--brand2)}
.actions{display:flex;flex-wrap:wrap;gap:var(--gap-s);align-items:center;margin:var(--gap-s) 0 0}

/* ---------- forms ---------- */
label{display:block;font:600 var(--step--1)/1.4 var(--sans);color:var(--ink2);margin:0 0 .35rem;letter-spacing:.01em}
input,select,textarea{
  width:100%;padding:.75rem .85rem;font:var(--step-0)/1.4 var(--sans);
  color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r)
}
input:hover,select:hover,textarea:hover{border-color:var(--ink2)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.field{margin:0 0 var(--gap-s)}
.hint{font-size:var(--step--1);color:var(--mute);margin:.3rem 0 0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-s)}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-s)}
@media (max-width:720px){.row,.row3{grid-template-columns:1fr}}

/* ---------- panels (legacy .card, restrained: hairline, no shadow, no gradient) ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.1rem,2.4vw,1.8rem);margin:var(--gap-s) 0}
.card > :last-child{margin-bottom:0}
.panel-inset{background:color-mix(in oklab,var(--bg) 60%,var(--paper));border:1px solid var(--line);padding:clamp(1rem,2.2vw,1.5rem)}
.accent-edge{border-top:3px solid var(--brand)}

/* ---------- hero (asymmetric) ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:var(--gap-m) var(--gap-l);align-items:start;padding:var(--gap-m) 0 0}
.hero .hero-aside{margin-top:clamp(0rem,2.5vw,3.2rem)}
@media (max-width:900px){.hero{grid-template-columns:1fr}.hero .hero-aside{margin-top:0}}
.eyebrow{display:block;font:600 var(--step--1)/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin:0 0 var(--gap-s)}
.hero h1 em{font-style:italic;color:var(--brand)}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;margin:var(--gap-m) 0 0;padding:0;font-size:var(--step--1);color:var(--ink2)}
.trust li{position:relative;padding-left:.95rem}
.trust li::before{content:"";position:absolute;left:0;top:.62em;width:.42rem;height:.42rem;background:var(--brand);border-radius:50%}

/* ---------- numbered use cases (editorial, not a card grid) ---------- */
.numbered{list-style:none;counter-reset:n;margin:var(--gap-m) 0 0;padding:0;max-width:62rem}
.numbered > li{
  counter-increment:n;border-top:1px solid var(--line);
  display:grid;grid-template-columns:4.75rem minmax(0,1fr);gap:0 var(--gap-s);
  padding:var(--gap-s) 0
}
.numbered > li::before{
  content:counter(n,decimal-leading-zero);
  font-family:var(--serif);font-size:var(--step-2);line-height:1;color:var(--brand);
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.02em
}
.numbered h3{margin:0 0 .25rem}
.numbered p{margin:0;color:var(--ink2);max-width:58ch}
@media (max-width:520px){.numbered > li{grid-template-columns:3.1rem minmax(0,1fr)}.numbered > li::before{font-size:var(--step-1)}}
.numbered a.qlink{display:block;color:inherit;text-decoration:none;border-radius:var(--r)}
.numbered a.qlink:hover h3,.numbered a.qlink:focus-visible h3{color:var(--brand);text-decoration:underline;text-underline-offset:.18em}

/* ---------- steps (legacy .steps/.step, restyled without dark circles) ---------- */
.steps{counter-reset:s;margin:0;padding:0}
.step{counter-increment:s;display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:0 var(--gap-s);padding:var(--gap-s) 0;border-top:1px solid var(--line)}
.step:first-child{border-top:0;padding-top:0}
.step::before{content:counter(s);font-family:var(--serif);font-size:var(--step-1);line-height:1.2;color:var(--brand)}

/* ---------- definition rows (pricing, comparisons — no card grid) ---------- */
.deflist{margin:var(--gap-m) 0 0;border-top:1px solid var(--line)}
.defrow{display:grid;grid-template-columns:minmax(9rem,14rem) minmax(0,1fr);gap:.3rem var(--gap-m);padding:var(--gap-s) 0;border-bottom:1px solid var(--line);align-items:start}
.defrow dt{font-family:var(--serif);font-size:var(--step-1);color:var(--ink)}
.defrow dd{margin:0;color:var(--ink2)}
@media (max-width:620px){.defrow{grid-template-columns:1fr}}
.amount{font-family:var(--serif);font-size:var(--step-3);line-height:1;letter-spacing:-.03em;color:var(--ink);display:block}
.amount .unit{font-family:var(--sans);font-size:var(--step--1);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);display:block;margin-top:.5rem}
.plainlist{list-style:none;margin:.6rem 0 0;padding:0}
.plainlist li{position:relative;padding:.3rem 0 .3rem 1.1rem;color:var(--ink2)}
.plainlist li::before{content:"";position:absolute;left:0;top:.95em;width:.5rem;height:1px;background:var(--brand)}

/* ---------- pills / badges / notices (legacy) ---------- */
.pill{display:inline-block;padding:.2rem .7rem;border-radius:999px;font:600 var(--step--1)/1.5 var(--sans);letter-spacing:.04em;border:1px solid var(--line);background:var(--paper);color:var(--ink2)}
.now{background:var(--soft);border-color:color-mix(in oklab,var(--brand) 35%,var(--line));color:var(--brand2)}
.later{background:transparent;color:var(--mute)}
.done{background:var(--okbg);border-color:color-mix(in oklab,var(--ok) 30%,var(--line));color:var(--ok)}
.badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--okbg);color:var(--ok);font:600 var(--step--1)/1.5 var(--sans);padding:.25rem .7rem;border-radius:999px;border:1px solid color-mix(in oklab,var(--ok) 25%,var(--line))}
.warn{background:var(--warnbg);border:1px solid color-mix(in oklab,var(--warn) 40%,var(--line));border-left-width:3px;color:#6E4810;padding:.8rem 1rem;border-radius:var(--r)}
.refusal{background:var(--soft);border:1px solid color-mix(in oklab,var(--brand) 25%,var(--line));padding:.8rem 1rem;border-radius:var(--r)}
.notice{border-left:3px solid var(--brand);padding:.2rem 0 .2rem 1rem;color:var(--ink2);max-width:62ch}
.notice strong{color:var(--ink)}

/* ---------- static example answer ---------- */
.example{border:1px solid var(--line);background:var(--paper);padding:clamp(1rem,2.2vw,1.5rem)}
.example .figure-label{display:block;margin-bottom:.8rem}
.example .msg{max-width:100%}
.example-note{font-size:var(--step--1);color:var(--mute);margin:.9rem 0 0;max-width:60ch}

/* ---------- chat (legacy .chat/.msg/.srcs/.chips/.composer/.typing) ---------- */
.chat{display:flex;flex-direction:column;gap:var(--gap-s);min-height:15rem;padding:.4rem 0}
.msg{max-width:min(80%,58ch);padding:.85rem 1.05rem;border-radius:var(--r);line-height:1.6}
.msg.user{align-self:flex-end;background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.msg.user a{color:var(--soft)}
.msg.bot{align-self:flex-start;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--brand)}
.msg.bot.refusal{background:var(--soft)}
.msg p:last-child{margin-bottom:0}
.msg .srcs{margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--line);font-size:var(--step--1)}
.msg .srcs b{display:block;font:600 var(--step--1)/1.5 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:.25rem}
.msg .srcs a{display:block;margin:.2rem 0;color:var(--ink2)}
.msg .srcs a:hover{color:var(--brand)}
.msg sup{color:var(--brand);font-weight:700;font-size:.72em;padding-left:.1em}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 .2rem}
.chips button{background:transparent;color:var(--ink2);border:1px solid var(--line);font-weight:500;font-size:var(--step--1);padding:.45rem .8rem;border-radius:999px}
.chips button:hover{background:transparent;color:var(--brand);border-color:var(--brand)}
.composer{position:sticky;bottom:0;background:var(--bg);padding:.7rem 0 .3rem}
.composer .box{display:flex;gap:.6rem;align-items:flex-end;background:var(--paper);border:1px solid var(--ink2);border-radius:var(--r);padding:.55rem}
.composer textarea{border:0;background:transparent;resize:none;padding:.45rem .5rem;min-height:2.75rem;max-height:9rem}
.composer textarea:focus{outline:none}
.composer select{width:auto;padding:.6rem .7rem}
.composer .box:focus-within{outline:2px solid var(--brand);outline-offset:1px}
.typing{display:none;align-self:flex-start;color:var(--mute);font-size:var(--step--1);padding:.35rem .9rem}
.busy .typing{display:block}
.status{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:var(--step--1);color:var(--mute)}
.phasehead{display:flex;justify-content:space-between;align-items:baseline;gap:.7rem;flex-wrap:wrap}

/* ---------- checklist items / progress (legacy) ---------- */
.item{display:flex;gap:.8rem;padding:.8rem 0;border-top:1px solid var(--line);align-items:flex-start}
.item:first-child{border-top:0}
.item input[type=checkbox]{width:1.3rem;height:1.3rem;margin:.15rem 0 0;accent-color:var(--brand);flex:0 0 1.3rem}
.item .src{font-size:var(--step--1);margin-top:.15rem}
.item.checked label{text-decoration:line-through;color:var(--mute)}
.progress{height:.4rem;background:color-mix(in oklab,var(--line) 70%,var(--bg));border-radius:999px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--brand)}
.src a{color:var(--ink2)}
.src a:hover{color:var(--brand)}

/* ---------- pricing panel (legacy .price used by home/ask) ---------- */
.price{border:1px solid var(--ink)}
.price .amt{font-family:var(--serif);font-size:var(--step-3);line-height:1;letter-spacing:-.03em}
.price ul{list-style:none;padding:0;margin:.8rem 0}
.price li{position:relative;padding:.3rem 0 .3rem 1.1rem}
.price li::before{content:"";position:absolute;left:0;top:.95em;width:.5rem;height:1px;background:var(--brand)}

/* ---------- feature (legacy) ---------- */
.feature .ic{display:none}
.feature h3{font-family:var(--serif)}

/* ---------- guides ---------- */
.guide-list{list-style:none;counter-reset:g;margin:var(--gap-m) 0 0;padding:0}
.guide-list > li{counter-increment:g;border-top:1px solid var(--line);padding:var(--gap-s) 0;display:grid;grid-template-columns:4.75rem minmax(0,1fr);gap:0 var(--gap-s)}
.guide-list > li::before{content:counter(g,decimal-leading-zero);font-family:var(--serif);font-size:var(--step-2);line-height:1;color:var(--brand)}
.guide-list h3{margin:0 0 .25rem}
.guide-list h3 a{color:var(--ink);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--brand) 45%,transparent)}
.guide-list h3 a:hover{color:var(--brand)}
.guide-meta{font-size:var(--step--1);color:var(--mute);margin:.3rem 0 0}
@media (max-width:520px){.guide-list > li{grid-template-columns:3.1rem minmax(0,1fr)}.guide-list > li::before{font-size:var(--step-1)}}
.article{max-width:46rem}
.article h2{margin-top:var(--gap-m)}
.article ol.steps-plain{padding-left:1.4rem;margin:0 0 1em;color:var(--ink2)}
.article ol.steps-plain li{padding:.25rem 0}
.sourcelist{list-style:none;margin:var(--gap-s) 0 0;padding:0;font-size:var(--step--1)}
.sourcelist li{padding:.35rem 0;border-top:1px solid var(--line)}
.sourcelist .checked{color:var(--mute)}
.breadcrumb{font-size:var(--step--1);color:var(--mute);margin:0 0 var(--gap-s)}
.breadcrumb a{color:var(--ink2)}

/* ---------- share ---------- */
.share-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
button.share{background:transparent;color:var(--ink);border:1px solid var(--line);font-weight:500;padding:.6rem .95rem}
button.share:hover{background:transparent;border-color:var(--brand);color:var(--brand)}
button.share svg{width:1rem;height:1rem;flex:0 0 auto}
.share-status{font-size:var(--step--1);color:var(--ok);min-height:1.4em}
.share-status:empty{min-height:0}

/* ---------- motion: one staggered entrance, opt-out honoured ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{animation:rise .7s cubic-bezier(.16,.84,.28,1) both}
  .reveal:nth-child(2){animation-delay:.06s}
  .reveal:nth-child(3){animation-delay:.12s}
  .reveal:nth-child(4){animation-delay:.18s}
  @keyframes rise{from{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- narrow screens: nothing critical hidden ---------- */
@media (max-width:420px){
  .msg{max-width:100%}
  .composer .box{flex-wrap:wrap}
  .composer textarea{flex:1 1 100%}
  .composer select{flex:1 1 auto}
  .actions .btn,.actions button{width:100%}
}

@media print{
  header.site,nav.site,.composer,button.share{display:none}
  body{background:#fff}
}

[hidden]{display:none!important}
:target{scroll-margin-top:8rem}
main,.row>*,.composer .box>*{min-width:0}
.msg,.srcs a,.sourcelist a{overflow-wrap:anywhere}
.availability{font-size:var(--step--1);color:var(--ink2);margin:1rem 0 0;padding:.6rem 0 .6rem .8rem;border-left:2px solid var(--brand)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.key-recovery{margin-top:.7rem;width:min(25rem,100%)}
@media(max-width:720px){.composer .box{flex-wrap:wrap}.composer textarea{flex:1 1 100%}.composer select{flex:1 1 60%;max-width:calc(100% - 5rem)}.composer button{flex:0 0 auto}}
@media(max-width:420px){.btn,button{line-height:1.35;white-space:normal}.card{padding:1rem!important}}