/* Support Rescue demo. Page styles on top of /kh-system.css (the shared KH Labs design system).
   Outcome colours: resolved = green, right handoff = white, needless handoff = hairline outline,
   false resolution and missed escalation = red (fail states only, the system --bad). */
.muted{color:var(--mute)}
code,pre{font-family:var(--mono)}

/* section heads: title left, lead right */
.k-head{align-items:start}
.k-head h2{max-width:20ch}
.k-head .k-lead{margin-top:var(--sp2)}
.kick{font:500 var(--t-xs)/1 var(--mono);color:var(--mute)}
.k-section > .wrap > .k-head + *{margin-top:var(--sp7)}


/* hero */
.hero{padding:clamp(44px,7vh,84px) 0 clamp(64px,9vh,104px)}
.hero__top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--sp7);align-items:end}
.hero h1{max-width:16ch;font-size:clamp(34px,3.9vw,52px);line-height:1.05}
.h1-b{color:var(--mute)}
.hero__aside p{max-width:44ch;color:var(--soft);font-size:17px;line-height:1.55}
.hero__aside p + p{margin-top:var(--sp3)}
.hero__aside p b{color:var(--ink);font-weight:500}
.hero__aside .k-acts{margin-top:var(--sp5)}
.hero__con{margin-top:clamp(36px,5vh,56px)}
.hx{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.hx > .k-pane{padding:var(--sp5)}
.hx > .k-pane + .k-pane{border-left:1px solid var(--line)}
.k-bar .mk{font-size:14px;color:var(--dim)}
.k-bar .p,.k-bar .hs,.run{line-height:16px}
.run{font:600 var(--t-xs)/1 var(--mono);letter-spacing:.04em;color:var(--soft)}
.ph{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp3);margin-bottom:var(--sp3);font:500 var(--t-xs)/16px var(--mono);color:var(--mute)}
.ph b{color:var(--ink);font-weight:500}
.stream{display:grid;grid-template-columns:repeat(26,minmax(0,1fr));gap:4px}
.stream i{display:block;aspect-ratio:1;border-radius:4px;background:var(--line);transition:background .25s,box-shadow .25s,transform .25s}
.stream i[data-o="resolved"]{background:var(--ok)}
.stream i[data-o="handoff_ok"]{background:#ededed}
.stream i[data-o="handoff_unneeded"]{background:transparent;box-shadow:inset 0 0 0 2px var(--line3)}
.stream i[data-o="missed_escalation"]{background:transparent;box-shadow:inset 0 0 0 2px var(--bad)}
.stream i[data-o="false_resolution"]{background:var(--bad)}
.stream i.flip{transform:scale(1.35)}
.board-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp4) var(--sp5);margin-top:var(--sp5)}
.legend{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--sp2) var(--sp4);font-size:var(--t-xs);color:var(--soft)}
.legend li{display:inline-flex;align-items:center;gap:8px}
.legend b{font:500 var(--t-xs)/1 var(--mono);color:var(--ink)}
.k{display:inline-block;width:10px;height:10px;flex:none;border-radius:3px;background:var(--line)}
.k-resolved{background:var(--ok)}
.k-handoff_ok{background:#ededed}
.k-handoff_unneeded{background:transparent;box-shadow:inset 0 0 0 2px var(--line3)}
.k-missed_escalation{background:transparent;box-shadow:inset 0 0 0 2px var(--bad)}
.k-false_resolution{background:var(--bad)}
.k-b{background:rgb(255 255 255 / .32)}
.k-a{background:var(--ink)}

/* chip row (buttons carry .k-chip from the design system) */
.seg{display:flex;flex-wrap:wrap;gap:var(--sp2)}
.seg button span{margin-left:2px;font:400 var(--t-xs)/1 var(--mono);color:var(--mute)}
.seg button[aria-pressed="true"] span{color:#000}

/* hero metrics */
.mets .m__l{display:flex;justify-content:space-between;gap:var(--sp3);font:400 var(--t-xs)/16px var(--mono);color:var(--mute)}
.m__v{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--sp3);margin-top:var(--sp2)}
.m__v b{font-weight:500;font-size:48px;letter-spacing:-.04em;line-height:1}
.m__v span{font:400 var(--t-xs)/16px var(--mono);color:var(--dim)}
.m__v.sm b{font-size:24px;line-height:32px}
.meter{position:relative;height:6px;margin-top:var(--sp4);border-radius:var(--r-pill);background:var(--line)}
.meter i{position:absolute;inset:0;border-radius:inherit;background:var(--ok);transform-origin:0 50%;transition:transform .12s linear}
.meter s{position:absolute;top:-5px;bottom:-5px;left:74%;width:1px;background:var(--mute)}
.m__foot{display:flex;justify-content:space-between;gap:var(--sp3);margin-top:var(--sp2);font:400 var(--t-xs)/1.3 var(--mono);color:var(--dim)}
.m2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp5) var(--sp4);margin-top:var(--sp5);padding:var(--sp4) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tk__ft{margin-top:var(--sp4);font:400 var(--t-xs)/1.5 var(--mono);color:var(--mute)}
.tk__ft a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line3);text-underline-offset:3px}
.tk__ft a:hover{text-decoration-color:currentColor}

/* scorecard */
.sc-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--sp8)}
.metrics{border-top:1px solid var(--line2)}
.metrics .m{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px var(--sp5);padding:var(--sp4) 0;border-bottom:1px solid var(--line)}
.m-name{font-weight:500;font-size:var(--t-base)}
.m-def{grid-column:1;font-size:var(--t-sm);color:var(--mute);max-width:46ch}
.m-vals{grid-column:2;grid-row:1 / span 2;display:flex;align-items:baseline;gap:var(--sp2);font-variant-numeric:tabular-nums;white-space:nowrap}
.m-b{font-size:var(--t-lg);color:var(--mute)}
.m-a{font-size:28px;font-weight:500;letter-spacing:-.03em}
.m-a small,.m-b small{font-size:max(.6em,13px);margin-left:1px}
.m-arrow{color:var(--dim)}
.m.good .m-a{color:var(--ok)}
.m.bad .m-a{color:var(--bad)}
.m-bars{grid-column:1 / -1;display:grid;gap:4px;margin-top:var(--sp2)}
.mbar{display:block;height:4px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.mbar i{display:block;height:100%;width:0;border-radius:inherit;transition:width 1s var(--out)}
.mbar.b i{background:rgb(255 255 255 / .32)}
.mbar.a i{background:var(--ink)}
.m.good .mbar.a i{background:var(--ok)}
.int-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp3);padding-bottom:var(--sp4);border-bottom:1px solid var(--line2)}
.int-head h3{font-size:var(--t-base)}
.int-key{display:inline-flex;align-items:center;gap:var(--sp2);font:400 var(--t-xs)/1 var(--mono);color:var(--mute)}
.int-key .k-a{margin-left:var(--sp2)}
.irow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 128px;gap:var(--sp4);align-items:center;padding:var(--sp4) 0;border-bottom:1px solid var(--line)}
.iname{font-size:var(--t-md)}
.iname span{display:block;margin-top:2px;font:400 var(--t-xs)/1.4 var(--mono);color:var(--dim)}
.irow .bars{display:grid;gap:4px}
.iv{font:400 var(--t-sm)/1 var(--mono);color:var(--mute);white-space:nowrap;text-align:right}
.iv b{color:var(--ink);font-weight:500}
.int-note{margin-top:var(--sp4);font-size:var(--t-sm);color:var(--mute)}
.outcome-bar{margin-top:var(--sp7);display:grid;gap:var(--sp3)}
.ob-row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--sp4);align-items:center;font:400 var(--t-xs)/1 var(--mono);color:var(--mute)}
.ob-key{margin-left:80px;gap:var(--sp2) var(--sp4);font-size:var(--t-sm)}
.ob{display:flex;height:32px;gap:2px}
.ob i{display:flex;align-items:center;justify-content:center;width:0;padding:8px 12px;border-radius:4px;font:500 var(--t-xs)/1 var(--mono);font-style:normal;color:#000;overflow:hidden;transition:width 1s var(--out)}
.ob i[data-o="resolved"]{background:var(--ok)}
.ob i[data-o="handoff_ok"]{background:#ededed}
.ob i[data-o="handoff_unneeded"]{background:transparent;box-shadow:inset 0 0 0 1px var(--line3);color:var(--ink)}
.ob i[data-o="missed_escalation"]{background:transparent;box-shadow:inset 0 0 0 2px var(--bad);color:var(--bad)}
.ob i[data-o="false_resolution"]{background:var(--bad)}
.context{margin-top:var(--sp6);max-width:54ch;font-size:var(--t-sm);color:var(--mute)}
.context a{color:var(--soft);text-decoration:underline;text-decoration-color:var(--line3);text-underline-offset:3px;transition:text-decoration-color var(--t-fast)}
.context a:hover{text-decoration-color:currentColor}

/* ticket explorer */
.ex-bar{display:flex;flex-wrap:wrap;gap:var(--sp3);align-items:center}
.sel{display:block}
.ex-bar .k-select{width:auto;height:32px;min-height:32px;border-radius:var(--r-pill);padding:0 36px 0 14px;font:500 14px/32px var(--sans);cursor:pointer;background-color:#000;background-position:right 12px center}
.sel option{background:#000}
.ex-body{display:grid;grid-template-columns:320px minmax(0,1fr);margin-top:var(--sp4);min-height:620px}
.t-list{list-style:none;margin:0;padding:var(--sp2);max-height:820px;overflow:auto;border-right:1px solid var(--line);scrollbar-width:thin}
.t-list li + li{margin-top:2px}
.t-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px var(--sp3);width:100%;padding:var(--sp3) var(--sp4);border-radius:var(--r3);text-align:left;transition:background-color var(--t-fast),transform .2s var(--out)}
.t-item:hover{background:var(--hover)}
.t-item:active{transform:scale(.99)}
.t-item[aria-current="true"]{box-shadow:inset 0 0 0 1px var(--line3)}
.t-item:focus-visible,.kb-item:focus-visible{outline-offset:-2px;border-radius:var(--r3)}
.t-pair{grid-row:span 2;display:flex;gap:4px;padding-top:5px}
.t-sub{font-size:var(--t-md);line-height:1.35}
.t-meta{font:400 var(--t-xs)/1.3 var(--mono);color:var(--dim)}
.t-empty{padding:var(--sp4);color:var(--mute)}
.t-view{min-width:0;padding:var(--sp5) var(--sp6) var(--sp6)}
.tv-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp3) var(--sp4);align-items:baseline}
.tv-head h3{font-size:var(--t-2xl);letter-spacing:-.02em}
.tv-tags{display:flex;flex-wrap:wrap;gap:var(--sp2)}
.msg{margin:var(--sp4) 0 0;padding:var(--sp4) 0;border-bottom:1px solid var(--line);font-size:var(--t-base);line-height:1.5;white-space:pre-wrap}
.msg .from{display:block;margin-bottom:var(--sp2);font:400 var(--t-xs)/1.4 var(--mono);color:var(--dim);white-space:normal}
.truth{display:grid;grid-template-columns:minmax(0,1fr);margin-top:0}
.truth > div{padding:var(--sp4) 0;border-bottom:1px solid var(--line);font-size:var(--t-md);color:var(--soft)}
.truth h4{margin-bottom:var(--sp3);font:500 var(--t-xs)/1 var(--mono);color:var(--mute)}
.truth dl{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);gap:4px var(--sp4);margin:0;font:400 var(--t-xs)/1.45 var(--mono)}
.truth dt{color:var(--dim)}
.truth dd{margin:0;color:var(--soft);overflow-wrap:anywhere}
.replies{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--sp4)}
.rep{min-width:0;padding:var(--sp2) var(--sp5) var(--sp2) 0}
.rep + .rep{padding:var(--sp2) var(--sp2) var(--sp2) var(--sp5);border-left:1px solid var(--line)}
.rep-h{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp3);font-size:var(--t-sm)}
.rep-h b{font-weight:500}
.rep-txt{margin-top:var(--sp3);font-size:var(--t-md);line-height:1.5;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.rep-txt mark{padding:0 2px;border-radius:4px;background:rgb(255 97 102 / .18);color:var(--bad)}
.handoff-chip{display:inline-block;margin-top:var(--sp2);font:500 var(--t-xs)/1 var(--mono);color:var(--soft)}
.why{display:grid;gap:var(--sp3);margin-top:var(--sp4);padding-top:var(--sp3);border-top:1px solid var(--line);font-size:var(--t-sm);color:var(--soft)}
.why .lab{display:block;margin-bottom:var(--sp2);font:500 var(--t-xs)/1 var(--mono);color:var(--mute)}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:4px;font:400 var(--t-xs)/1.4 var(--mono)}
.checks li{display:flex;gap:var(--sp2);flex-wrap:wrap;color:var(--soft)}
.checks li::before{content:"pass";color:var(--ok);min-width:3.4em}
.checks li.f::before{content:"fail";color:var(--bad)}
.checks code{color:var(--bad);overflow-wrap:anywhere}
.trace{list-style:none;margin:0;padding:0;display:grid;gap:4px;font:400 var(--t-xs)/1.45 var(--mono);color:var(--soft)}
.trace li{position:relative;padding-left:var(--sp4);overflow-wrap:anywhere}
.trace li::before{content:"";position:absolute;left:2px;top:7px;width:5px;height:5px;border-radius:50%;background:var(--dim)}
.trace b{color:var(--ink);font-weight:500}
.trace span{color:var(--dim)}

/* what we changed */
.ch-gap,.ch-kb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--sp8);margin-top:var(--sp8);align-items:stretch}

.k-section > .wrap > .k-head + .ch-gap{margin-top:var(--sp7)}
.ch-act,.ch-route{margin-top:var(--sp8)}
.ch-gap h3,.ch-kb h3,.ch-route h3,.ch-act > h3{font-size:var(--t-2xl)}
.ch-kb h3,.ch-route h3,.ch-act > h3{display:flex;align-items:center;gap:var(--sp3)}
h3 .kick{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 9px;flex:none;border-radius:var(--r-pill);color:var(--soft);box-shadow:inset 0 0 0 1px var(--line2)}
.ch-gap p.muted,.ch-kb p.muted{margin-top:var(--sp3);font-size:var(--t-base)}
.ch-gap > div,.ch-kb > div:first-child{display:flex;flex-direction:column;min-height:0}
.causes{display:grid;gap:var(--sp4);margin-top:var(--sp5)}
.cause{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px var(--sp3);font-size:var(--t-md)}
.cause b{font:500 var(--t-md)/1 var(--mono)}
.cause .mbar{grid-column:1 / -1}
.cause .mbar i{background:var(--bad)}
.cause small{grid-column:1 / -1;font-size:var(--t-sm);color:var(--mute)}
.gap-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2);height:0;min-height:100%;overflow:auto;scrollbar-width:thin}
.gap-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--sp4);padding:var(--sp3) 0;border-bottom:1px solid var(--line)}
.gl-n{font-size:var(--t-md)}
.gl-c{grid-column:1;font:400 var(--t-xs)/1.4 var(--mono);color:var(--dim)}
.gl-f{grid-column:2;grid-row:1 / span 2;align-self:center;font:500 var(--t-md)/1 var(--mono);color:var(--bad)}
.gl-f span{font-weight:400;color:var(--dim);font-size:var(--t-xs)}
.kb-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--sp5);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kb-stats div{padding:var(--sp4) 0}
.kb-stats div + div{padding-left:var(--sp4);border-left:1px solid var(--line)}
.kb-stats b{display:block;font-weight:500;font-size:28px;letter-spacing:-.03em;line-height:1.2}
.kb-stats span{font-size:var(--t-sm);color:var(--mute)}
.kb-list{list-style:none;margin:var(--sp5) 0 0;padding:0;border-top:1px solid var(--line2);flex:none}
.kb-item{display:flex;justify-content:space-between;gap:var(--sp3);width:100%;padding:6px var(--sp3);text-align:left;font-size:var(--t-md);border-bottom:1px solid var(--line);transition:background-color var(--t-fast)}
.kb-item:hover{background:var(--hover)}
.kb-item:active{background:var(--hover)}
.kb-item[aria-current="true"]{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line3);border-radius:var(--r3)}
.kind{font:400 var(--t-xs)/1.6 var(--mono);color:var(--mute);white-space:nowrap}
.kind-added{color:var(--ok)}
.kb-diff{min-width:0;padding:var(--sp5) var(--sp6) var(--sp6)}
.kd-h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp3);flex-wrap:wrap}
.kd-h h4{font-weight:500;font-size:var(--t-lg)}
.kd-pol{font:400 var(--t-xs)/1 var(--mono);color:var(--dim)}
.kd-lab{margin-top:var(--sp4);font:500 var(--t-xs)/1 var(--mono);color:var(--mute)}
.kd-old{display:grid;margin-top:var(--sp2)}
.kd-old div{padding:var(--sp3) 0;border-bottom:1px solid var(--line);font-size:var(--t-sm);color:var(--soft);line-height:1.5}
.kd-old .t{display:flex;justify-content:space-between;gap:var(--sp3);flex-wrap:wrap;margin-bottom:var(--sp2);padding:0;background:none;font:400 var(--t-xs)/1.3 var(--mono);color:var(--dim)}
.kd-old .d{display:block;margin-top:var(--sp2);padding:0;background:none;font:500 var(--t-xs)/1.4 var(--mono);color:var(--bad)}
.diff{margin-top:var(--sp2);padding:var(--sp2) 0 0;font-size:var(--t-md);line-height:1.6;color:var(--soft);white-space:pre-wrap;overflow-wrap:anywhere}
.diff del{color:var(--dim);text-decoration:line-through}
.diff ins{color:var(--ok);text-decoration:none;border-radius:3px;background:rgb(111 207 151 / .1)}
.kd-rem{margin-top:var(--sp4);font-size:var(--t-sm);color:var(--mute)}
.actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:var(--sp5)}
.act{display:flex;flex-direction:column;gap:var(--sp3);padding:var(--sp6);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line2)}
.act header{display:flex;justify-content:space-between;align-items:center;gap:var(--sp3)}
.act code{font:500 var(--t-md)/1 var(--mono);color:var(--ink)}
.act header span{font:400 var(--t-xs)/1 var(--mono);color:var(--dim)}
.act p{font-size:var(--t-md);color:var(--soft);max-width:56ch}
.act p b{color:var(--ink);font-weight:500}
.sig{margin:auto 0 0;padding:var(--sp3) 0 0;font:400 var(--t-xs)/1.5 var(--mono);color:var(--mute);white-space:pre-wrap;overflow-wrap:anywhere}
.gate{display:grid;gap:var(--sp2);margin-top:auto}
.gate-row{display:grid;grid-template-columns:56px minmax(16px,1fr) auto;gap:var(--sp3);align-items:center}
.g-amt{font:500 var(--t-sm)/1 var(--mono)}
.g-line{height:1px;background:var(--line2)}
.g-line.hot{background:var(--acc)}
.route-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--sp7);align-items:start}
.route-head p.muted{max-width:50ch;font-size:var(--t-base)}
.routes{list-style:none;margin:var(--sp5) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp3) var(--gap)}
.routes li{display:flex;flex-direction:column;gap:6px;min-width:0;padding:var(--sp4) var(--sp5);border-radius:var(--r2);box-shadow:inset 0 0 0 1px var(--line2)}
.routes code{font:500 var(--t-sm)/1.3 var(--mono);color:var(--ink)}
.routes span{font-size:var(--t-md)}
.routes small{font:400 var(--t-xs)/1.45 var(--mono);color:var(--dim);overflow-wrap:anywhere}

/* calculator */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.calc-in{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp4);align-content:start;margin:0;padding:var(--sp6);border-right:1px solid var(--line)}
.calc-in label{display:grid;gap:var(--sp2);font-size:var(--t-sm);font-weight:500;color:var(--soft)}
.calc-in input{width:100%;height:44px;padding:0 14px;border:1px solid var(--line2);border-radius:12px;background:#000;font:400 15.5px/1.4 var(--sans);color:var(--ink);caret-color:#fff;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.calc-in input:hover{border-color:var(--line3)}
.calc-in input:focus{outline:0;border-color:#fff;box-shadow:0 0 0 3px rgb(255 255 255 / .12)}
.calc-in input[aria-invalid="true"]{border-color:var(--bad)}
.pre,.post{position:relative;display:block;font:400 var(--t-base)/1 var(--mono);color:var(--mute)}
.pre .u,.post .u{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none}
.pre .u{left:14px}
.pre input{padding-left:32px}
.post .u{right:14px}
.post input{padding-right:36px}
.c-note{grid-column:1 / -1;margin:0;font-size:var(--t-sm);color:var(--dim)}
.calc-out{display:flex;flex-direction:column;justify-content:center;padding:var(--sp6)}
.formula{margin:0;font:400 var(--t-xs)/1.7 var(--mono);color:var(--mute)}
.formula var{font-style:normal;color:var(--ink)}
.c-res{display:flex;align-items:baseline;gap:var(--sp3);margin:var(--sp5) 0 0}
.c-v{font-weight:600;font-size:clamp(40px,4vw,56px);letter-spacing:-.05em;line-height:1}
.c-u{font:400 var(--t-sm)/1 var(--mono);color:var(--mute)}
.c-sub{margin:var(--sp3) 0 0;font-size:var(--t-md);color:var(--soft)}

/* how we measured */
.meas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp7);border-top:1px solid var(--line2)}
.meas li{padding:var(--sp4) 0;border-bottom:1px solid var(--line);font-size:var(--t-base);color:var(--soft)}
.meas b{color:var(--ink);font-weight:500}
.runmeta{margin-top:var(--sp5);max-width:78ch;font:400 var(--t-xs)/1.6 var(--mono);color:var(--dim);overflow-wrap:anywhere}

/* pricing */
.offer{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--sp8);align-items:stretch}
.offer__card{padding:var(--sp6)}
.offer__p{margin:0;font-weight:600;font-size:40px;letter-spacing:-.045em;line-height:1;color:var(--ink)}
.tiers{display:grid;grid-template-columns:1fr 1fr;padding-bottom:var(--sp5);border-bottom:1px solid var(--line)}
.tiers > div{padding:var(--sp2) 0}
.tiers > div + div{padding:var(--sp2) 0 var(--sp2) var(--sp5);border-left:1px solid var(--line)}
.tier__n{margin:var(--sp3) 0 0;font-weight:500;font-size:var(--t-lg)}
.tier__d{margin:var(--sp2) 0 0;max-width:30ch;font-size:var(--t-sm);color:var(--mute)}
.offer__card h3{margin-top:var(--sp5);font-size:var(--t-2xl)}
.incl{list-style:none;margin:var(--sp4) 0 0;padding:0;display:grid;gap:var(--sp3);font-size:var(--t-md);color:var(--soft)}
.incl li{display:flex;gap:var(--sp3)}
.incl svg{width:14px;height:14px;flex:none;margin-top:5px;color:var(--ink)}
.side{display:flex;flex-direction:column}
.side h3{font:500 var(--t-xs)/1 var(--mono);color:var(--mute)}
.side ul{list-style:none;margin:var(--sp3) 0 0;padding:0;border-top:1px solid var(--line2)}
.side li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--sp4);padding:var(--sp4) 0;border-bottom:1px solid var(--line)}
.side li b{font-weight:500;font-size:var(--t-base)}
.side li span{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.side li em{grid-column:1 / -1;font-style:normal;font-size:var(--t-sm);color:var(--mute)}
.guar1{display:flex;gap:var(--sp3);margin:var(--sp5) 0 0;padding:var(--sp4);border-radius:var(--r2);font-size:var(--t-md);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.guar1 svg{width:14px;height:14px;flex:none;margin-top:5px;color:var(--ok)}
.side .k-acts{margin-top:auto;padding-top:var(--sp5)}
.side .fine{margin:var(--sp4) 0 0;font-size:var(--t-sm);color:var(--mute)}
.side .fine a{color:var(--soft);text-decoration:underline;text-decoration-color:var(--line3);text-underline-offset:3px;transition:text-decoration-color var(--t-fast)}
.side .fine a:hover{text-decoration-color:currentColor}

/* 404 */
.nf{min-height:calc(100vh - var(--nav-h) - 240px);display:flex;align-items:center;padding:var(--sp9) 0}
.nf__box{max-width:640px;padding:var(--sp7)}
.nf .kick{display:block;margin-bottom:var(--sp4)}
.nf h1{font-size:clamp(40px,6vw,64px)}
.nf p{margin-top:var(--sp4);max-width:46ch;color:var(--soft)}

@media (max-width:1180px){.hero__top{grid-template-columns:minmax(0,1fr);gap:var(--sp5)}}
@media (max-width:1080px){
  .hero{padding:clamp(44px,7vh,84px) 0 clamp(64px,9vh,104px)}
  .hx,.sc-grid,.ch-gap,.ch-kb,.calc,.offer,.route-head{grid-template-columns:minmax(0,1fr)}

  .route-head{gap:var(--sp3)}
  .gap-list{height:auto;min-height:0;max-height:560px}
  .kb-list{max-height:430px;overflow:auto;scrollbar-width:thin}
  .kb-item{padding:10px var(--sp3)}
  .hx > .k-pane + .k-pane{border-left:0;border-top:1px solid var(--line)}
  .sc-grid,.ch-gap,.ch-kb,.offer{gap:var(--sp6)}
  .calc-in{border-right:0;border-bottom:1px solid var(--line)}
  .actions{grid-template-columns:minmax(0,1fr)}
  .ex-body{grid-template-columns:260px minmax(0,1fr)}
}
@media (max-width:820px){
  .ex-body{grid-template-columns:minmax(0,1fr)}
  .t-list{max-height:300px;border-right:0;border-bottom:1px solid var(--line)}
  .replies{grid-template-columns:minmax(0,1fr);gap:var(--sp5)}
  .rep,.rep + .rep{padding:var(--sp1) 0}
  .rep + .rep{padding-top:var(--sp5);border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:720px){
  .act{padding:var(--sp5)}
  .hero{padding:var(--sp6) 0 var(--sp7)}
  .hero h1{font-size:clamp(34px,9.6vw,44px)}
  .hero__aside p{font-size:var(--t-base)}
  .hx > .k-pane{padding:var(--sp4) 14px var(--sp5)}
  .stream{grid-template-columns:repeat(16,minmax(0,1fr));gap:3px}
  .hs2{display:none}
  .m__v b{font-size:40px}
  .mets > .m__l{flex-direction:column;gap:0}
  .board-foot .seg{width:100%}
  .board-foot .seg button{flex:1}
  .metrics .m{grid-template-columns:minmax(0,1fr)}
  .m-vals{grid-column:1;grid-row:auto}
  .irow{grid-template-columns:minmax(0,1fr) auto}
  .irow .bars{grid-column:1 / -1;grid-row:2}
  .t-view{padding:var(--sp4) 14px var(--sp5)}
  .truth dl{grid-template-columns:96px minmax(0,1fr)}
  .kb-diff{padding:var(--sp4) 14px var(--sp5)}
  .calc-in{grid-template-columns:minmax(0,1fr);padding:var(--sp5)}
  .calc-out{padding:var(--sp5)}
  .routes{grid-template-columns:minmax(0,1fr)}
  .kb-stats div{padding:var(--sp3) 0}
  .kb-stats div + div{padding-left:var(--sp3)}
  .ob-row{grid-template-columns:48px minmax(0,1fr)}
  .ob-key{margin-left:0}
  .meas{grid-template-columns:minmax(0,1fr)}
  .tiers{grid-template-columns:minmax(0,1fr);gap:var(--sp5)}
  .tiers > div + div{padding:var(--sp5) 0 0;border-left:0;border-top:1px solid var(--line)}
  .offer__card{padding:var(--sp5)}
  .k-bar{flex-wrap:wrap;gap:6px 10px;padding:12px 14px;white-space:normal}
  .k-bar .hs{display:none}
  .k-bar .sp{display:none}
  .k-bar .run{margin-left:auto}
  .k-acts .btn{flex:1 1 100%;height:50px}
  .k-section > .wrap > .k-head + *{margin-top:var(--sp6)}
  .nf__box{padding:var(--sp5)}
}

/* round 3 publish: how we got here */
.set-note{margin-top:var(--sp4);max-width:54ch;font:400 var(--t-xs)/1.6 var(--mono);color:var(--mute)}
.set-note a,.rd-ft a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line3);text-underline-offset:3px}
.set-note a:hover,.rd-ft a:hover{text-decoration-color:currentColor}
.rounds{padding:var(--sp6)}
.rd-t th,.rd-t td{padding:var(--sp4) var(--sp4) var(--sp4) 0;text-align:left;vertical-align:top}
.rd-t thead th{padding-top:0}
.rd-t th{font-weight:500}
.rd-t tbody th{color:var(--ink);white-space:nowrap}
.rd-t td{color:var(--soft)}
.rd-t small{display:block;margin-top:2px;font:400 var(--t-xs)/1.4 var(--mono);color:var(--mute);white-space:normal}
.rd-t td.num{white-space:nowrap;color:var(--ink)}
.rd-t tbody tr:hover{background:transparent}
.rd-t tbody th{border-bottom:1px solid var(--line)}
.rd-t tbody tr:last-child th{border-bottom:0}
.rd-ft{margin-top:var(--sp4);font-size:var(--t-sm);color:var(--mute);max-width:56ch}
.rd-ft a{white-space:nowrap}
.rd-ft .ar{display:inline-block;width:12px;height:12px;margin-left:6px;vertical-align:-1px}
.ft-doc{max-width:960px}
.ft-doc > p,.ft-doc > ul{max-width:58ch}
.ft-doc h1{font-size:var(--t-3xl,clamp(2rem,4vw,3rem));line-height:1.1;margin:0 0 var(--sp5)}
.ft-doc h2{font-size:var(--t-xl,1.5rem);margin:var(--sp7) 0 var(--sp4)}
.ft-doc p,.ft-doc li{color:var(--soft);line-height:1.6}
.ft-doc ul{padding-left:1.2em}
.ft-doc .rounds{padding:var(--sp5);margin:var(--sp5) 0}
.ft-doc .rd-t td,.ft-doc .rd-t th{font-size:var(--t-sm)}
.ft-doc .rd-t thead th{white-space:normal}
.ft-doc .rd-t tbody th{white-space:normal}
@media (min-width:721px){.ft-doc .rd-t tbody th{width:160px}.ft-doc .rd-t td:nth-child(2){min-width:240px}.ft-doc .rd-t td.num{white-space:nowrap}}
@media (max-width:720px){
  .rounds{padding:var(--sp5)}
  .rd-t,.rd-t tbody,.rd-t tr,.rd-t th,.rd-t td{display:block}
  .rd-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rd-t tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--sp4);padding:var(--sp4) 0;border-bottom:1px solid var(--line)}
  .rd-t tbody tr:last-child{border-bottom:0}
  .rd-t th,.rd-t td{border:0 !important;padding:0}
  .rd-t tbody th{grid-column:1/-1;margin-bottom:var(--sp2)}
  .rd-t td:nth-child(2){grid-column:1/-1;margin-bottom:var(--sp3)}
  .rd-t td.num{white-space:normal}
  .rd-t td.num::before{content:attr(data-l);display:block;font:400 var(--t-xs)/1.4 var(--mono);color:var(--dim)}
}

/* ---- 12 Nov hostile-review fixes ---- */
.nw{white-space:nowrap}
.btn--p:focus-visible{outline:2px solid #fff;outline-offset:3px}
.menu a[aria-current="page"] b::after{white-space:nowrap}

/* hero: result first, demo-store note above the fold at every width, H1 top-aligned */
.hero__top{align-items:start}
.demo-note{display:inline-flex;align-items:center;gap:8px;margin:0 0 var(--sp4);font:400 var(--t-xs)/1.45 var(--mono);color:var(--mute)}
.demo-note::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--mute)}
.hero__aside p.hero__result{color:var(--soft)}
.hero__aside p a,.meas a,.nf p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line3);text-underline-offset:3px;transition:text-decoration-color var(--t-fast)}
.hero__aside p a:hover,.meas a:hover,.nf p a:hover{text-decoration-color:currentColor}
.tk__ft{transition:opacity .3s var(--out)}
.tk__ft.is-off{opacity:0}
#board[data-phase="before"] .meter i{background:var(--mute)}

/* outcome colours: needless handoff gets its own mid-grey fill, distinct from an undealt square */
.stream i[data-o="handoff_unneeded"],.k-handoff_unneeded{background:#7a7a7a;box-shadow:none}
.ob i[data-o="handoff_unneeded"]{background:#7a7a7a;box-shadow:none;color:#000}
/* one "after" colour: green in the intent bars too */
.irow .mbar.a i,.int-key .k-a{background:var(--ok)}
.iname span.nw{display:inline;margin:0;font:inherit;color:inherit}

/* ticket explorer */
.k-chip:disabled{opacity:.4;cursor:default;pointer-events:none}
.t-view .t-empty{margin:0;padding:var(--sp4) 0}
.tr-d summary{display:inline-flex;align-items:baseline;gap:var(--sp2);cursor:pointer;font:500 var(--t-xs)/1.4 var(--mono);color:var(--mute);list-style:none}
.tr-d summary::-webkit-details-marker{display:none}
.tr-d summary::before{content:"+";width:1ch;color:var(--ink)}
.tr-d[open] summary::before{content:"−"}
.tr-d summary span{color:var(--dim);font-weight:400}
.tr-d summary:hover{color:var(--ink)}
.tr-d .trace{margin-top:var(--sp2)}

/* what we changed */
.act header b{font-weight:500;font-size:var(--t-base);color:var(--ink)}
.gap-list{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 64px),transparent)}
.gap-list.at-end{-webkit-mask-image:none;mask-image:none}
.kb-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.kb-diff{align-self:start}
.routes li{gap:var(--sp2)}
.routes .r-l{font-size:var(--t-md);color:var(--soft)}
.routes .r-k{display:block;margin-bottom:2px;font:500 var(--t-xs)/1.3 var(--mono);color:var(--mute)}
.routes li .r-l:first-child{color:var(--ink)}
.more{display:none}

/* calculator */
.c-note.is-err{color:var(--bad)}
.c-res{flex-wrap:wrap;min-width:0}
.c-v{min-width:0;max-width:100%;overflow-wrap:anywhere}
.c-v.long{font-size:clamp(28px,3vw,40px)}
.calc-out{min-width:0}

/* pricing: one "Start here", then other offers */
.side .side__h2{margin-top:var(--sp5)}

/* fresh-tests: same left edge as the nav and footer */
.wrap.ft-doc{max-width:calc(var(--wrap) + 2 * var(--pad))}
.ft-doc > p,.ft-doc > ul{max-width:68ch}
.ft-doc > .rounds{max-width:1040px}
.ft-doc .demo-note{margin-bottom:var(--sp4)}
.ft-key{margin-top:0;font-size:var(--t-sm)}
.ft-doc p.ft-key{color:var(--mute)}
.ft-doc p.fine-print{font:400 var(--t-xs)/1.6 var(--mono);color:var(--mute)}
.ft-doc .ft-t td.num b{font-weight:600;color:var(--ink)}
@media (min-width:721px){.ft-doc .ft-t td:nth-child(2){min-width:280px}}

/* 404: card uses the full row */
.nf__box{max-width:none;width:100%}

@media (max-width:1080px){
  .hx > .k-pane.mets{order:-1;border-top:0;border-bottom:1px solid var(--line)}
  .gap-list{-webkit-mask-image:none;mask-image:none}
  .clip > li.xtra{display:none}
  .more{display:inline-flex;margin-top:var(--sp3)}
  .gap-list{max-height:none}
  .kb-list{max-height:none;overflow:visible}
}
@media (max-width:720px){
  .stream{grid-template-columns:repeat(26,minmax(0,1fr));gap:2px}
  .stream i{border-radius:2px}
  .kb-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kb-stats div:nth-child(3){padding-left:0;border-left:0}
  .kb-stats div:nth-child(n+3){border-top:1px solid var(--line)}
}
.ft-doc > ul + p,.ft-doc > p + p{margin-top:var(--sp4)}
@media (min-width:721px){#rounds .rd-t td:nth-child(2){width:58ch;padding-right:var(--sp7)}}
.more{justify-self:start;align-self:flex-start}
@media (max-width:720px){.ft-doc .ft-t tr{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- 12 Nov round-2 review fixes ---- */
/* shared footer: the legal links sit in one wrapping group (same rule as the homepage) */
.ft__ln{display:inline-flex;flex-wrap:wrap;gap:8px 24px}
/* no widowed words in body copy; the meter caption breaks evenly */
main p,main li{text-wrap:pretty}
.m__foot span{text-wrap:balance}
/* the current demo's name never splits in the Demos menu */
.menu a[aria-current="page"] b{white-space:nowrap}
/* ticket list: a fade at the bottom edge while more rows sit below */
.t-list{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 56px),transparent)}
.t-list.at-end{-webkit-mask-image:none;mask-image:none}
.t-view .t-empty p{margin:0 0 var(--sp3);color:var(--mute)}
/* KB diff follows the list while rows 11-20 are clicked */
@media (min-width:1081px){.kb-diff{position:sticky;top:calc(var(--nav-h) + 24px)}}
/* fresh-tests: run files and the engineer details */
.ft-doc p a,.ft-doc li a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line3);text-underline-offset:3px;transition:text-decoration-color var(--t-fast)}
.ft-doc p a:hover,.ft-doc li a:hover{text-decoration-color:currentColor}
.ft-doc ul.ft-files{list-style:none;padding:0;margin-top:var(--sp4);max-width:68ch;border-top:1px solid var(--line2)}
.ft-files li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px var(--sp4);padding:var(--sp3) 0;border-bottom:1px solid var(--line)}
.ft-files li span{font:400 var(--t-xs)/1.6 var(--mono);color:var(--mute)}
.ft-doc .ft-eng{margin-top:var(--sp5);max-width:68ch}
.ft-doc .ft-eng p{margin-top:var(--sp3)}
/* 404: same structure as the Agent Gateway 404 (kick, H1, a log card, actions, links) */
.nf > .wrap{width:100%}
.nf .nf__kick{display:flex;align-items:center;gap:8px}
.nf p.nf__lead{max-width:60ch}
.nf__log{max-width:760px;margin-top:var(--sp6)}
.nf__body{padding:var(--sp6);font:400 14px/1.6 var(--mono);color:var(--soft)}
.nf .nf__body p{margin:0;max-width:none;color:var(--soft)}
.nf .nf__body p + p{margin-top:6px}
.nf__body b{color:var(--ink);font-weight:500}
.nf .nf__acts{margin-top:var(--sp6)}
.nf p.nf__more{margin-top:var(--sp5)}
@media (max-width:720px){.nf__body{padding:var(--sp5) 14px}}
/* fresh-tests: reading measure under ~80 characters a line */
.ft-doc > p,.ft-doc > ul,.ft-doc ul.ft-files,.ft-doc .ft-eng{max-width:56ch}
.ft-files li span{font-size:13px}
@media (max-width:820px){.t-list:empty{display:none}}
.ft-doc > p.demo-note{max-width:none}
.ft-files li span{display:inline-block;line-height:20px}
.ft-files li{align-items:baseline}

/* Split section header rule (founder 11-13, identical on all four demos): heading left, lead right, top-aligned so the
   lead's first line starts level with the heading's cap height. Geist metrics: ascent 1.01em, descent .30em, cap .71em.
   Cap top below the line-box top = size * ((line-height - 1.31) / 2 + .30): h2 at 1.04 -> .165em, lead 18px/1.55 -> 7.56px.
   Lead stays 18px. Below 1081px the head stacks and keeps its normal spacing. */
@media (min-width:1081px){.k-head{align-items:start}.k-head > :last-child{margin-top:calc(var(--t-h2) * .165 - 7.56px)}.k-head > div:last-child > .k-lead:first-child{margin-top:0}}
/* Same rule for the hero: the aside's first line starts level with the H1's cap height (cap top below the line-box top =
   size * ((line-height - 1.31) / 2 + .30)), after the eyebrow line above the H1. Aside lead 18px/1.55 -> 7.56px. */
/* eyebrow: the 13px/1.45 demo note in a 24.8px line box + 16px margin = 39.4px; H1 line-height 1.05 -> .17em */
@media (min-width:1181px){.hero__top{align-items:start}.hero__aside{margin-top:calc(39.4px + clamp(34px,3.9vw,52px) * .17 - 7.56px)}.hero__aside p{font-size:18px}}