:root{
  --bg:#F2EAE4; --paper:#FBF7F3; --paper-2:#F7F0EA; --ink:#2B2926; --ink-2:#5F5A54; --ink-3:#6B665F;
  --line:#D9CFC7; --line-2:rgba(242,234,228,.88); --rose:#B87E7E; --rose-2:#C98F8F; --wine:#8A4F4F; --wine-ink:#6E3B3B;
  --ok:#4F6B55; --ok-bg:#E4EBE2; --warn:#8A6A2F; --warn-bg:#F3E8D2; --alert:#8A4F4F; --alert-bg:#F2DEDA;
  --display:"Cormorant Garamond", Georgia, serif; --body:"Jost", system-ui, sans-serif;
  --r:4px; --r-lg:10px; --shadow:0 1px 2px rgba(43,41,38,.06), 0 8px 24px -12px rgba(43,41,38,.18);
  --t-xs:clamp(.72rem,.7rem + .1vw,.78rem); --t-sm:clamp(.84rem,.82rem + .1vw,.9rem); --t-base:clamp(.98rem,.95rem + .15vw,1.06rem);
  --t-lg:clamp(1.15rem,1.05rem + .4vw,1.35rem); --t-xl:clamp(1.6rem,1.3rem + 1.2vw,2.3rem); --t-2xl:clamp(2.2rem,1.6rem + 2.6vw,3.8rem);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:var(--t-base);line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--wine)} a:hover{color:var(--rose)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1rem,3vw,2rem)}
.eyebrow{font-size:var(--t-xs);letter-spacing:.28em;text-transform:uppercase;color:var(--wine);font-weight:500}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.05;margin:0;letter-spacing:-.01em}
h1{font-size:var(--t-2xl)} h2{font-size:var(--t-xl)} h3{font-size:var(--t-lg);line-height:1.2}
h1 em,h2 em{color:var(--wine);font-style:italic}
p{margin:0 0 1em} .muted{color:var(--ink-2)} .tiny{font-size:var(--t-xs);color:var(--ink-3)} .small{font-size:var(--t-sm)}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(242,234,228,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:1.5rem;min-height:68px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.brand svg{width:38px;height:38px;color:var(--wine)}
.brand b{display:block;font-family:var(--display);font-weight:500;font-size:1.15rem;letter-spacing:.12em;line-height:1}
.brand small{display:block;font-size:.62rem;letter-spacing:.32em;color:var(--ink-2);margin-top:3px}
.tabs{display:flex;gap:.25rem;margin-left:auto;flex-wrap:wrap}
.tab{background:none;border:0;padding:.55rem .85rem;font-size:var(--t-sm);letter-spacing:.04em;color:var(--ink-2);cursor:pointer;border-radius:var(--r);position:relative}
.tab[aria-current="page"]{color:var(--ink)}
.tab[aria-current="page"]::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.25rem;height:1px;background:var(--wine)}
.tab:hover{color:var(--ink)}

.view{display:none;padding:clamp(2rem,5vw,4rem) 0 5rem} .view.active{display:block}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--ink);background:transparent;padding:.85rem 1.4rem;font-size:var(--t-sm);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border-radius:0;transition:all .2s var(--ease);text-decoration:none;color:var(--ink)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.primary{background:var(--rose);border-color:var(--rose);color:#2B2926}
.btn.primary:hover{background:var(--wine);border-color:var(--wine);color:var(--paper)}
.btn:disabled{opacity:.4;cursor:not-allowed;background:transparent;color:var(--ink)}
.btn.ghost{border-color:transparent;padding-left:.2rem;padding-right:.2rem}
.btn.ghost:hover{background:none;color:var(--wine)}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,4rem);align-items:end;margin-bottom:clamp(2rem,5vw,3.5rem)}
.hero p.lead{font-size:var(--t-lg);color:var(--ink-2);max-width:36ch;margin-top:1.2rem;font-weight:300;line-height:1.5}
.hero-card{background:var(--paper);border:1px solid var(--line);padding:1.25rem;box-shadow:var(--shadow)}
.hero-card img{aspect-ratio:4/3;object-fit:cover;filter:saturate(.7) sepia(.12);margin-bottom:1rem}
.cred{display:grid;grid-template-columns:1fr auto;gap:.35rem 1rem;font-size:var(--t-sm);border-top:1px solid var(--line);padding-top:.8rem}
.cred span:nth-child(even){font-family:var(--display);font-size:1.05rem;text-align:right}
.hero-actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:1.8rem}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
.stat-row div{background:var(--paper-2);padding:1rem}
.stat-row b{font-family:var(--display);font-size:2rem;font-weight:500;display:block;line-height:1;color:var(--wine)}
.stat-row span{font-size:var(--t-xs);color:var(--ink-2)}

/* wizard */
.wizard{display:grid;grid-template-columns:250px 1fr;gap:0;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);min-height:560px}
.spine{border-right:1px solid var(--line);padding:1.25rem 0;background:linear-gradient(90deg,var(--paper-2),var(--paper))}
.spine-inner{position:sticky;top:84px}
.spine-head{padding:0 1.25rem 1rem;border-bottom:1px solid var(--line);margin-bottom:.5rem}
.spine-head b{font-family:var(--display);font-size:2.6rem;font-weight:500;line-height:1;color:var(--wine);display:block;transition:transform .3s var(--ease)}
.spine-head b.bump{transform:scale(1.12)}
.steps{list-style:none;margin:0;padding:0}
.steps li button{width:100%;text-align:left;background:none;border:0;padding:.7rem 1.25rem .7rem 1.25rem;display:grid;grid-template-columns:auto 1fr;gap:.2rem .75rem;cursor:pointer;border-left:3px solid transparent;color:var(--ink-3)}
.steps li button:disabled{cursor:default}
.steps .n{font-size:.68rem;letter-spacing:.2em;padding-top:.2rem}
.steps .l{font-size:var(--t-sm)}
.steps .v{grid-column:2;font-size:var(--t-xs);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.steps li.done button{color:var(--ink)}
.steps li.current button{border-left-color:var(--wine);color:var(--ink);background:var(--paper)}
.steps li.current .n{color:var(--wine)}
.stage{padding:clamp(1.25rem,3vw,2.5rem);display:flex;flex-direction:column}
.stage-body{flex:1;animation:rise .35s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.stage h2{margin-bottom:.4rem}
.stage .intro{color:var(--ink-2);max-width:60ch;margin-bottom:1.5rem}
.voice{display:inline-block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);padding:.15rem .5rem;margin-bottom:.8rem}
.stage-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--line)}

/* inputs */
.field{display:grid;gap:.4rem;margin-bottom:1.2rem}
.field label,.label{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
select,input[type=text],input[type=email],textarea{background:var(--paper);border:1px solid var(--line-2);padding:.8rem .9rem;border-radius:0;width:100%}
select:focus,input:focus,textarea:focus{border-color:var(--wine);outline:none}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.6rem}
.choice{border:1px solid var(--line);background:var(--paper);padding:.85rem 1rem;text-align:left;cursor:pointer;transition:all .18s var(--ease);display:grid;gap:.15rem}
.choice:hover{border-color:var(--ink-3)}
.choice[aria-pressed="true"]{border-color:var(--wine);background:#F2EAE4;box-shadow:inset 3px 0 0 var(--wine)}
.choice b{font-weight:500} .choice small{color:var(--ink-2);font-size:var(--t-xs)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{border:1px solid var(--line-2);background:var(--paper);padding:.45rem .8rem;font-size:var(--t-sm);cursor:pointer;border-radius:999px;transition:all .15s var(--ease)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip.locked{background:var(--paper-2);color:var(--ink-2);cursor:default;border-style:dashed}
.chip.auto{background:#F2EAE4;border-color:var(--rose-2);color:var(--wine-ink);cursor:default}
.menu-group{border-top:1px solid var(--line);padding:1rem 0}
.menu-group:first-child{border-top:0;padding-top:0}
.menu-group header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.6rem}
.menu-group h3{font-size:1.15rem}
.linkish{background:none;border:0;color:var(--wine);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:0}

/* state signal card */
.signal{margin-top:1.25rem;border:1px solid var(--line);background:var(--paper-2);padding:1.25rem;animation:rise .3s var(--ease)}
.signal .row{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.8rem}
.tag{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:.22rem .55rem;border:1px solid var(--line-2);color:var(--ink-2);background:var(--paper)}
.tag.accent{border-color:var(--wine);color:var(--wine)} .tag.ok{border-color:var(--ok);color:var(--ok)} .tag.warn{border-color:var(--warn);color:var(--warn)}
.signal q{display:block;font-family:var(--display);font-size:1.35rem;line-height:1.25;quotes:none;margin-bottom:.5rem}

/* audit */
.audit-item{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:start;padding:1rem 0;border-top:1px solid var(--line)}
.audit-item:first-child{border-top:0}
.audit-item .num{font-family:var(--display);font-size:1.4rem;color:var(--ink-3);line-height:1}
.audit-item p{margin:0}
.yn{display:flex;border:1px solid var(--line-2)}
.yn button{background:var(--paper);border:0;padding:.45rem .9rem;cursor:pointer;font-size:var(--t-sm)}
.yn button+button{border-left:1px solid var(--line-2)}
.yn button[aria-pressed="true"][data-v="yes"]{background:var(--ok-bg);color:var(--ok)}
.yn button[aria-pressed="true"][data-v="no"]{background:var(--alert-bg);color:var(--wine-ink)}
.finding{font-size:var(--t-xs);color:var(--wine-ink);margin-top:.35rem !important;display:none}
.audit-item.no .finding{display:block}

/* results */
.result-head{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:end;margin-bottom:1.5rem}
.meter{min-width:220px}
.meter .bar{height:6px;background:var(--line);position:relative;margin:.4rem 0}
.meter .bar i{position:absolute;inset:0 auto 0 0;background:var(--wine);transition:width .6s var(--ease)}
.meter b{font-family:var(--display);font-size:2.2rem;font-weight:500;line-height:1}
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}
.panel{border:1px solid var(--line);background:var(--paper);padding:1.25rem}
.panel h3{margin-bottom:.8rem}
.flags{display:grid;gap:.6rem}
.flag{border-left:3px solid var(--line-2);padding:.55rem .8rem;background:var(--paper-2)}
.flag.alert{border-left-color:var(--wine);background:var(--alert-bg)}
.flag.warn{border-left-color:var(--warn);background:var(--warn-bg)}
.flag.ok{border-left-color:var(--ok);background:var(--ok-bg)}
.flag b{display:block;font-weight:500;font-size:var(--t-sm)}
.flag span{font-size:var(--t-sm);color:var(--ink-2)}
.flag .src{font-size:.7rem;color:var(--ink-3);display:block;margin-top:.2rem}
.toc{list-style:none;margin:0;padding:0;counter-reset:tab;columns:2 320px;column-gap:2rem}
.toc li{break-inside:avoid}
.toc li{display:grid;grid-template-columns:3.2rem 1fr;gap:.5rem;padding:.45rem 0;border-bottom:1px dotted var(--line-2);font-size:var(--t-sm)}
.toc li::before{counter-increment:tab;content:"TAB " counter(tab, decimal-leading-zero);font-size:.62rem;letter-spacing:.14em;color:var(--wine);padding-top:.2rem}
.toc li.sec{display:block;break-after:avoid;border:0;padding:.9rem 0 .2rem;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.toc li.sec::before{content:none;counter-increment:none}
.offer{border:1px solid var(--ink);background:var(--paper);padding:1.5rem;position:relative}
.offer .eyebrow{margin-bottom:.4rem;display:block}
.offer h3{font-size:1.7rem}
.offer .price{font-family:var(--display);font-size:1.4rem;color:var(--wine);margin:.3rem 0 .6rem}
.offer ul{margin:.6rem 0 1rem;padding:0;list-style:none}
.offer li{padding:.3rem 0 .3rem 1.2rem;position:relative;font-size:var(--t-sm)}
.offer li::before{content:"—";position:absolute;left:0;color:var(--ink-3)}
.why{font-size:var(--t-sm);background:var(--paper-2);padding:.7rem .9rem;border-left:2px solid var(--rose);margin-bottom:1rem}
.also{margin-top:1rem;display:grid;gap:.4rem}
.also div{display:flex;justify-content:space-between;gap:1rem;font-size:var(--t-sm);border-bottom:1px dotted var(--line-2);padding:.3rem 0}
.kudos{font-family:var(--display);font-style:italic;font-size:1.35rem;line-height:1.35;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.25rem 0;margin:1.75rem 0}
.send{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.send .full{grid-column:1/-1}
.confirm{display:none;border:1px solid var(--ok);background:var(--ok-bg);padding:1rem 1.2rem;margin-top:1rem}
.confirm.show{display:block;animation:rise .3s var(--ease)}
.next-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:.8rem}
.next-steps div{font-size:var(--t-sm)}
.next-steps b{display:block;font-family:var(--display);font-size:1.15rem;font-weight:500}

/* generic sections */
.section{margin-top:clamp(2.5rem,6vw,4.5rem)}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:end;margin-bottom:1.5rem}
.section-head p{color:var(--ink-2);margin:0}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--line);background:var(--paper)}
.flow > div{padding:1.1rem;border-right:1px solid var(--line);position:relative}
.flow > div:last-child{border-right:0}
.flow .n{font-size:.66rem;letter-spacing:.22em;color:var(--wine)}
.flow h3{font-size:1.35rem;margin:.2rem 0 .1rem}
.flow .job{font-size:var(--t-xs);color:var(--ink-2);margin-bottom:.7rem;display:block}
.flow ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.flow li{font-size:var(--t-sm);background:var(--paper-2);padding:.45rem .6rem;border:1px solid var(--line)}
.flow li small{display:block;color:var(--ink-3);font-size:.72rem}
table{width:100%;border-collapse:collapse;background:var(--paper);font-size:var(--t-sm)}
th,td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);font-weight:500;background:var(--paper-2)}
td code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;background:var(--paper-2);padding:.05rem .3rem}
.table-wrap{overflow-x:auto;border:1px solid var(--line)}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.card{border:1px solid var(--line);background:var(--paper);padding:1.2rem}
.card h3{margin-bottom:.5rem}
.card ul{margin:0;padding-left:1.1rem;font-size:var(--t-sm)} .card li{margin:.3rem 0}
pre.payload{background:#2B2926;color:#F2EAE4;padding:1rem;font-size:.76rem;overflow:auto;max-height:380px;margin:0;border-radius:var(--r)}
.pill{display:inline-block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:.15rem .5rem;border-radius:999px;background:var(--paper-2);border:1px solid var(--line-2);white-space:nowrap}
.pill.hot{background:var(--alert-bg);border-color:var(--wine);color:var(--wine-ink)}
.pill.warm{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.pill.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.vs td:nth-child(2){background:rgba(184,126,126,.12)}
.cite{font-size:.72rem;color:var(--ink-3)} .cite a{color:var(--ink-2)}
.drift td:first-child{font-weight:500}
.foot{border-top:1px solid var(--line);padding:2rem 0;font-size:var(--t-xs);color:var(--ink-3)}
.foot .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;font-size:var(--t-sm);opacity:0;transition:all .25s var(--ease);pointer-events:none;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%)}
.kw-banner{display:none;border:1px solid var(--rose-2);background:#F2EAE4;padding:.8rem 1rem;margin-bottom:1.25rem;font-size:var(--t-sm)}
.kw-banner.show{display:block}

@media (max-width:900px){
  .hero,.res-grid,.section-head,.cols2{grid-template-columns:1fr}
  .cols3,.next-steps{grid-template-columns:1fr}
  .wizard{grid-template-columns:1fr}
  .spine{border-right:0;border-bottom:1px solid var(--line);padding:.75rem 0}
  .spine-head{display:flex;align-items:baseline;gap:.6rem;padding-bottom:.6rem}
  .spine-head b{font-size:1.8rem}
  .steps{display:flex;overflow-x:auto}
  .steps li button{border-left:0;border-bottom:3px solid transparent;grid-template-columns:auto;padding:.5rem .8rem}
  .steps li.current button{border-bottom-color:var(--wine)}
  .steps .v{display:none}
  .flow{grid-template-columns:1fr}
  .flow > div{border-right:0;border-bottom:1px solid var(--line)}
  .result-head{grid-template-columns:1fr}
  .send{grid-template-columns:1fr}
  .tabs{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap}
  .top .wrap{flex-wrap:wrap;padding-top:.5rem;padding-bottom:.25rem;gap:.25rem}
  .audit-item{grid-template-columns:auto 1fr}
  .audit-item .yn{grid-column:2}
  .stat-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}
@media (max-width:900px){.spine-inner{position:static}}
.tab{white-space:nowrap}
.also div span:last-child{white-space:nowrap}
@media (max-width:900px){
  .steps .l{white-space:nowrap}
  .hero-card img{aspect-ratio:16/9}
  .hero{align-items:start}
}

/* ---------- state manual generator ---------- */
.mg-grid{align-items:start}
.mg-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.mg-logo{display:flex;gap:1rem;align-items:center}
.mg-logo-prev{width:180px;height:82px;flex:none;border:1px dashed var(--line-2);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:.3rem}
.mg-logo-prev img{max-width:100%;max-height:100%;object-fit:contain}
.mg-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.4rem}
.mg-states{max-height:340px;overflow:auto;padding:.1rem}
.mg-states .chip b{font-weight:500;color:var(--wine);margin-right:.35rem;font-size:.75rem;letter-spacing:.06em}
.mg-states .chip[aria-pressed="true"] b{color:var(--rose-2)}
.mg-bar{height:4px;background:var(--line);margin-top:1rem;display:none}
.mg-bar>div{height:100%;width:0;background:var(--wine);transition:width .25s var(--ease)}
.mg-rv h4{font-family:var(--body);font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--wine);font-weight:500;margin:1.4rem 0 .4rem}
.mg-rv ul,.mg-rv ol{margin:0;padding-left:1.2rem;font-size:var(--t-sm)} .mg-rv li{margin:.3rem 0}
.mg-rv a{word-break:break-word}
.mg-meta{display:grid;grid-template-columns:180px 1fr;gap:.35rem 1rem;font-size:var(--t-sm)}
.mg-meta dt{color:var(--ink-3);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;padding-top:.15rem}
.mg-meta dd{margin:0}
.log-ok{color:var(--ok)} .log-err{color:var(--wine)}
@media(max-width:760px){.mg-row,.mg-meta{grid-template-columns:1fr}.mg-logo{flex-direction:column;align-items:flex-start}}

.brand-logo{height:46px;width:auto;display:block}
@media(max-width:900px){.brand-logo{height:38px}}
a.tab{text-decoration:none}
