/* ============================================================================
   /team-report/ page styles (v8). Linked only from site/team-report/index.html.
   Layout and figure marks only, built from ka.css tokens. No new colors.
   ========================================================================== */

/* ---------- hero: one column; the search lives in the figure module below ---------- */
.team-hero.hero.page{padding-top:clamp(116px,13vh,148px);padding-bottom:30px}
.team-hero h1{max-width:21ch;margin-bottom:18px}
.team-hero.hero.page .sub{margin-bottom:10px;max-width:64ch}
.team-hero .more{font-size:var(--fs-ui)}
#request{scroll-margin-top:0}
@media (max-width:600px){.team-hero h1{margin-bottom:16px}.team-hero.hero.page{padding-bottom:28px}}

/* ---------- Find your hospital (combobox) ---------- */
.find-label{display:block;font:600 var(--fs-xl)/1.25 var(--disp);letter-spacing:-.01em;color:var(--ink);margin-bottom:12px}
.find-box{position:relative}
.find-ico{position:absolute;left:15px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--mut);pointer-events:none}
.find-box input{display:block;width:100%;height:54px;padding:0 50px 0 44px;font:400 17px/1.2 var(--sans);color:var(--ink);background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--r-sm);-webkit-appearance:none;appearance:none;text-overflow:ellipsis;transition:border-color var(--dur-hover) var(--ease-ui)}
.find-box input::placeholder{color:var(--mut);opacity:1}
.find-box input::-webkit-search-cancel-button{display:none}
.find-box input:focus{border-color:var(--blue2)}
.find-box input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.find-box input:hover{border-color:var(--blue2)}}
.find-box input:disabled{background:var(--bg)}
.find-x{position:absolute;right:4px;top:50%;width:46px;height:46px;margin-top:-23px;display:grid;place-items:center;padding:0;border:0;border-radius:10px;background:none;color:var(--mut);cursor:pointer;-webkit-tap-highlight-color:transparent}
.find-x:hover{color:var(--ink)}
.find-x:active{background:var(--tint)}
.find-x svg{width:13px;height:13px}
@media (max-width:959px){.find-ico{left:calc(var(--fig-pad) + 15px)}.find-x{right:calc(var(--fig-pad) + 4px)}}
.find-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;max-height:min(372px,58vh);overflow-y:auto;overscroll-behavior:contain;list-style:none;margin:0;padding:6px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);box-shadow:var(--sh-hover)}
@media (max-width:959px){.find-list{left:var(--fig-pad);right:var(--fig-pad);top:calc(100% - 2px)}}
.find-list [role=option]{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:54px;padding:8px 12px;border-radius:9px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.find-list [role=option][aria-selected=true]{background:var(--tint-2)}
@media (hover:hover) and (pointer:fine){.find-list [role=option]:hover{background:var(--tint)}}
.find-list [role=option]:active{background:var(--tint-2)}
.o-n{font:500 var(--fs-ui)/1.3 var(--sans);color:var(--ink)}
.o-n mark{background:none;color:var(--blue);font-weight:700}
.o-m{font-size:var(--fs-sm);line-height:1.35;color:var(--mut)}
.o-note{padding:10px 12px;font-size:var(--fs-sm);line-height:1.45;color:var(--mut)}
.find-hint{margin-top:10px;font-size:var(--fs-sm);line-height:1.5;color:var(--mut)}
.find-try{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.find-try>span{font-size:var(--fs-sm);color:var(--mut)}
.find-try button{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink);font:500 var(--fs-sm)/1.2 var(--sans);cursor:pointer;transition:border-color var(--dur-hover) var(--ease-ui),background-color var(--dur-press) var(--ease-ui);-webkit-tap-highlight-color:transparent}
.find-try button:hover{border-color:var(--blue2);color:var(--blue)}
.find-try button:active{background:var(--tint)}
@media (max-width:959px){.find-try{margin-top:8px}}
@media (max-width:600px){.find-try button{min-height:44px}}
html:not(.js) .find-box,html:not(.js) .find-try,html:not(.js) .find-hint,html:not(.js) .ro-empty,html:not(.js) .tm-key{display:none}
.find-nojs{font-size:var(--fs-ui)}

/* ---------- selected-hospital readout ---------- */
.ro,.ro-empty{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.ro-name{font:600 var(--fs-xl)/1.25 var(--disp);letter-spacing:-.01em;color:var(--ink)}
.ro-meta{display:block;margin-top:3px;font:400 var(--fs-sm)/1.4 var(--sans);letter-spacing:0;color:var(--mut)}
.ro-label{margin-top:14px;font:700 var(--fs-xs)/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.ro-empty .ro-label{margin-top:0}
.ro-list{list-style:none;padding:0;margin:6px 0 0}
.ro-list li{display:grid;grid-template-columns:minmax(0,1fr) auto 6.4rem;column-gap:12px;align-items:baseline;padding:6px 0;border-top:1px solid var(--line);font-size:var(--fs-ui);line-height:1.4}
.ro-empty .ro-list li{grid-template-columns:minmax(0,1fr) auto}
.ro-c{color:var(--body)}
.ro-v{display:inline-flex;align-items:center;justify-content:flex-end;gap:7px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ro-v i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--blue2)}
.ro-v i.o{background:var(--warm)}
.ro-empty .ro-v i{width:3px;height:13px;border-radius:1px;background:var(--ink)}
.ro-n{min-width:3.2ch;text-align:right}
.ro-m{text-align:right;font-size:var(--fs-sm);color:var(--mut);font-variant-numeric:tabular-nums}
.ro-na{grid-column:2/-1;text-align:right;font-size:var(--fs-sm);color:var(--mut)}
.ro-note{margin-top:10px;font-size:var(--fs-sm);line-height:1.5;color:var(--mut)}
.ro-sum,.ro-ins,.ro-ins-s{margin-top:10px;font-size:var(--fs-sm);line-height:1.5;color:var(--body)}
.ro-sum b,.ro-ins b,.ro-ins-s b{color:var(--ink)}
/* the spinal fusion code-change note and the estimate line: small print under what they qualify */
.ro-sx,.ro-est{margin-top:8px;font-size:13px;line-height:1.45;color:var(--mut)}
.ro-acts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:14px}
.ro-acts .more{font-size:var(--fs-sm)}
/* the sentence under the list says in words where the hospital stands: the surgery furthest right of
   hospitals with the same mix of cases, and what it leaves for after the stay. Beside the chart
   (960px+) the full sentence shows; the docked phone readout shows the one-line version (.ro-ins-s,
   hidden from screen readers) and keeps the full one, the money line's second half and the estimate
   line for screen readers */
.tm-ro .ro-ins{margin-top:10px;padding-left:10px;border-left:2px solid var(--blue2)}
.ro-ins-s{display:none}
@media (max-width:959px){
  .tm-ro :is(.ro-ins,.ro-risk,.ro-est,.ro-sx,.ro-long){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .tm-ro .ro-ins-s{display:block;margin-top:4px;padding-left:9px;border-left:2px solid var(--blue2);line-height:1.4}
}
/* under 960px the readout docks above the chart, so it stays short: the name, the episodes and
   dollars line and the report button. The chart already labels the hospital's five values, so
   the list stays for screen readers only. */
@media (max-width:959px){
  .ro{margin-top:4px;padding-top:4px;border-top:0}
  .ro-name{font-size:var(--fs-lg)}
  .ro-meta{margin-top:1px}
  .tm-ro :is(.ro-label,.ro-list){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .ro-sum{margin-top:4px}

  .ro-empty{display:none}
  .ro-acts{margin-top:10px}
  .ro-acts .btn{width:auto;min-height:44px;padding:0 18px;font-size:var(--fs-sm)}
  .ro-acts .more{display:none}
}
@media (max-width:600px){
  .ro-list li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"c v" "m v";row-gap:1px;align-items:center}
  .ro-c{grid-area:c}
  .ro-v{grid-area:v}
  .ro-m{grid-area:m;text-align:left;font-size:13px}
  .ro-na{grid-area:v;grid-column:auto}
}

/* ---------- the figure module: find, readout and chart in one view ----------
   960px and up: a grid. Left, a sticky panel with the search and the readout; right, the title,
   the key and the chart, which fills what is left of --tm-h (the viewport less the header, so
   the whole module fits on one laptop screen). Below 960px: one column; the search bar and the
   readout dock under the header while the chart is on screen, and the chart is sized so all
   five rows fit under them. team.js draws the chart to whatever box the plot gets here. */
.team-fig{--fig-pad:clamp(18px,3vw,32px);padding:var(--fig-pad)}
.tm-head .datafig-title{max-width:34ch}
.tm-key{margin:14px 0 0}
.tm .fig-plot{margin-top:6px}
.tm-side{position:relative;z-index:3}
@media (min-width:960px){
  .team-fig{--tm-h:clamp(500px,calc(100svh - var(--hdr-h) - 44px),720px)}
  .tm{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"side head" "side key" "side plot";column-gap:clamp(24px,3vw,36px);min-height:var(--tm-h)}
  .tm-head{grid-area:head}
  .tm-key{grid-area:key}
  .tm .fig-plot{grid-area:plot}
  .tm-side{grid-area:side;position:sticky;top:calc(var(--hdr-h) + 16px);align-self:start;min-height:var(--tm-h);padding:16px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r)}
  .tm-side .find-label{font-size:var(--fs-lg);margin-bottom:10px}
  /* the match list may run wider than the panel, over the chart */
  .tm-side .find-list{right:auto;width:max(100%,24rem)}
  /* one line per surgery in the panel: name, value, median */
  .tm-side .ro-list li{grid-template-columns:minmax(0,1fr) auto auto;column-gap:10px;padding:5px 0;font-size:var(--fs-sm)}
  /* after a pick the filled-in box says what it is; the label stays for screen readers */
  .tm.has-sel .tm-side .find-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  /* a long name, a code-change note and the three sentences can outgrow a short laptop screen: the
     readout then scrolls on its own instead of pushing the chart down (the search box stays outside
     the scroller, so its match list can still spill over the chart) */
  .tm-side{display:flex;flex-direction:column;max-height:var(--tm-h)}
  .tm-side .tm-ro{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  .tm-side .ro{flex:0 1 auto;min-height:0;display:flex;flex-direction:column}
  .tm-side .ro-body{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .tm-side .ro-acts{flex:none}
  /* short laptop screens (1366x768, 1280x800): tighter spacing so the longest readouts still fit */
  @media (max-height:820px){
    .tm-side{padding:12px 14px}
    .tm-side .ro-list li{padding:3px 0}
    .tm-side :is(.ro,.ro-empty){margin-top:8px;padding-top:8px}
    .tm-side .ro-label{margin-top:6px}
    .tm-side :is(.ro-sx,.ro-est){margin-top:5px}
    .tm-side .ro-ins{margin-top:8px}
    .tm-side .ro-sum{margin-top:6px}
    .tm-side .ro-acts{margin-top:8px}
    .tm-side .ro-name{font-size:var(--fs-lg)}
    .tm-side :is(.ro-sx,.ro-est){font-size:12.5px;line-height:1.4}
  }
  .tm-side .ro-acts{flex-wrap:nowrap}
  .tm-side .ro-acts .btn{flex:none;min-height:44px;padding:0 16px;font-size:var(--fs-sm)}
  .tm-side .ro-m{font-size:13px}
  /* the readout beside the chart: a little tighter, so a long name and the insight line still fit */
  .tm-side :is(.ro,.ro-empty){margin-top:12px;padding-top:10px}
  .tm-side .ro-label{margin-top:10px}
  .tm-side .ro-sum{margin-top:8px}
  .tm-side .ro-acts{margin-top:12px}
}
@media (max-width:959px){
  .tm{display:flex;flex-direction:column}
  .tm-side,.tm-find{display:contents}
  /* the search comes first, then the chart's title; the readout appears (docked) once a hospital is picked */
  .tm-find>*{order:-1}
  .tm-head{margin:22px 0 12px}
  .tm:not(.has-sel) .tm-ro{display:none}
  .find-label{font-size:var(--fs-lg);margin-bottom:6px}
  /* the search bar docks under the header, the readout under it, both full card width */
  .find-box{position:sticky;top:var(--hdr-h);z-index:6;margin-inline:calc(-1 * var(--fig-pad));padding:8px var(--fig-pad);background:var(--surface)}
  /* docked, the field already sits under the header: focusing it should not nudge the page */
  .find-box input{scroll-margin-top:-24px}
  .tm-ro{position:sticky;top:calc(var(--hdr-h) + 70px);z-index:5;margin-inline:calc(-1 * var(--fig-pad));padding:0 var(--fig-pad) 12px;background:var(--surface);border-bottom:1px solid var(--line)}
  .find-hint{margin:2px 0 4px}
}
@media (max-width:600px){
  .team-fig{--fig-pad:14px;margin-inline:-10px;padding-top:16px;padding-bottom:18px}
}
/* the hint and the examples help before a pick; after one, the readout needs the room */
.tm.has-sel :is(.find-hint,.find-try){display:none}

/* ---------- Fig. 1 marks ---------- */
.fig-key{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:0;margin:16px 0 0;font-size:var(--fs-sm);line-height:1.4;color:var(--body)}
.fig-key li{display:inline-flex;align-items:center;gap:8px}
.fig-key .k-wide{flex-basis:100%;color:var(--ink)}
.k-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--mut);opacity:.55}
.k-dot.o{background:var(--warm);opacity:.9}
.k-tick{flex:none;width:3px;height:13px;border-radius:1px;background:var(--ink)}
.k-tgt{flex:none;width:9px;height:18px;background:linear-gradient(90deg,transparent 4px,var(--ink) 4px,var(--ink) 5.5px,transparent 5.5px)}
.k-sel{flex:none;width:12px;height:12px;border-radius:50%;background:var(--blue2);box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--blue2)}
.fig-plot{position:relative;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.fig-plot svg.pointing{cursor:pointer}
/* the plot box is sized here and the chart is drawn to fill it (team.js), so nothing shifts when
   the script arrives; the svg sits on top of the box, out of the flow */
html.js .fig-plot svg{position:absolute;left:0;top:0}
@media (max-width:959px){html.js .tm .fig-plot{height:clamp(300px,calc(100svh - var(--hdr-h) - 404px),480px)}}
@media (min-width:960px){html.js .tm .fig-plot{min-height:300px}}
.fig-plot text{font-family:var(--sans);font-size:12px;fill:var(--mut);font-variant-numeric:tabular-nums}
.fig-plot .rn{font-family:var(--disp);font-weight:600;font-size:15px;fill:var(--ink);letter-spacing:-.01em}
.fig-plot .lab text{paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.fig-plot .rs{font-size:12.5px}
.fig-plot .rn .rs{font-family:var(--sans);font-weight:500;fill:var(--mut);letter-spacing:0}
.fig-plot .ri{fill:var(--ink)}
.fig-plot .wd{fill:var(--warm)}
.fig-plot .gl{stroke:var(--line);stroke-width:1}
.fig-plot .rl{stroke:var(--line);stroke-width:1}
.fig-plot .rl.edge{stroke:var(--line-2)}
.fig-plot .zone{fill:var(--warm);fill-opacity:.07}
.fig-plot .tgt{stroke:var(--ink);stroke-width:1.25}
.fig-plot .dir{fill:var(--body)}
.fig-plot .dir.o{fill:var(--warm)}
.fig-plot .t100{fill:var(--ink);font-weight:600}
.fig-plot .axt{fill:var(--mut)}
.fig-plot .medh{stroke:var(--surface);stroke-width:6;stroke-linecap:round;stroke-opacity:.9}
.fig-plot .med{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.fig-plot .d{fill:var(--mut);fill-opacity:.55;transition:fill-opacity var(--dur-ui) var(--ease-ui)}
.fig-plot .d.o{fill:var(--warm);fill-opacity:.95;stroke:var(--surface);stroke-width:1.5}
.fig-plot svg.dim .d{fill-opacity:.2}
.fig-plot svg.dim .d.o{fill-opacity:.55}
/* the build (team.js): marks wait here only when the plot starts below the fold; GSAP takes over */
.fig-plot svg.pre :is(.db,.mr,.zone,.tgt,.ov,.ovl){opacity:0}
.fig-plot .ping{fill:none;stroke:var(--blue2);stroke-width:2;pointer-events:none}
.fig-plot .pl{fill:none;stroke:var(--blue2);stroke-width:1.5;stroke-opacity:.45;stroke-linejoin:round}
.fig-plot .sd{fill:var(--blue2);stroke:var(--surface);stroke-width:2}
.fig-plot .vl{fill:var(--ink);font-weight:700;font-size:13px;paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.fig-plot .na{fill:var(--mut);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.fig-plot .hv{fill:none;stroke:var(--blue2);stroke-width:1.5}
.fig-plot .hr{fill:none;stroke:var(--ink);stroke-width:1.5}
.fig-plot .tip rect{fill:var(--surface);stroke:var(--line-2);stroke-width:1;filter:drop-shadow(0 8px 18px rgb(10 21 40/.14))}
.fig-plot .tip .t1{fill:var(--ink);font-weight:600;font-size:13.5px}
.fig-plot .tip .t2{fill:var(--mut);font-size:12.5px}
.fig-plot .tip .t3{fill:var(--ink);font-weight:700;font-size:15px}
.fig-plot .tip .t3 tspan{fill:var(--mut);font-weight:400;font-size:12.5px}
@media (prefers-reduced-motion:reduce){.fig-plot svg.pre :is(.db,.mr,.zone,.tgt,.ov,.ovl){opacity:1}}
@media (max-width:600px){
  .fig-key{gap:2px 14px;font-size:12.5px;line-height:1.45}
  .fig-key li{gap:6px}
  .fig-plot .rn{font-size:14px}
  .fig-plot .rs{font-size:12px}
}
.fig-nojs{font-size:var(--fs-ui)}
html:not(.js) .fig-plot svg{display:none}
.team-fig .datafig-cap{margin-top:22px}
/* how to read the chart: four short blocks, two across from 760px */
.team-cap .cap-k{font:700 var(--fs-xs)/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.team-cap .cap-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 36px;margin-top:12px}
.team-cap h4{font:600 var(--fs-ui)/1.35 var(--disp);letter-spacing:-.01em;color:var(--ink);margin:0 0 4px}
.team-cap .cap-grid p{max-width:62ch}
@media (max-width:759px){.team-cap .cap-grid{grid-template-columns:1fr;gap:14px}}
.team-fig .table-wrap{max-height:none}
.team-fig table.data td.num,.team-fig table.data th.num{white-space:nowrap}

/* ---------- three insight beats ---------- */
.beats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:36px}
.beat{display:flex;flex-direction:column;padding:clamp(20px,2.4vw,28px)}
.beat h3{font-size:var(--fs-xl);margin-bottom:10px}
.beat p{font-size:var(--fs-ui)}
.beat p+p{margin-top:10px}
.beat-viz{padding-top:20px}
.beat-viz svg{display:block;width:100%;max-width:340px;height:auto;overflow:visible}
.beat-src{margin-top:auto;padding-top:12px;font-size:13px;line-height:1.5;color:var(--mut)}
@media (max-width:959px){.beats{grid-template-columns:1fr;gap:14px}.beat-viz{padding-top:18px}}
.bv text{font-family:var(--sans);font-size:12px;fill:var(--body);font-variant-numeric:tabular-nums}
.bv .b-ink{fill:var(--ink);font-weight:600}
.bv .b-mut{fill:var(--mut)}
.bv .b-on{fill:var(--surface);font-weight:600}
.bv .b-a{fill:var(--blue2)}
.bv .b-b{fill:var(--tint);stroke:var(--tint-line);stroke-width:1}
.bv .b-line{stroke:var(--ink);stroke-width:1.25;fill:none}
.bv .b-risk{fill:var(--warm);fill-opacity:.12;stroke:var(--warm);stroke-opacity:.55;stroke-width:1}
.bv .b-safe{fill:var(--tint-2);stroke:var(--tint-line);stroke-width:1}

/* ---------- the free report and the request form ---------- */
.report-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,29rem);grid-template-areas:"head form" "body form";column-gap:56px;align-items:start}
.report-head{grid-area:head}
.report-body{grid-area:body;margin-top:24px}
.report-grid>.form-card{grid-area:form}
@media (max-width:959px){.report-grid{grid-template-columns:1fr;grid-template-areas:"head" "form" "body"}.report-grid>.form-card{margin-top:24px}.report-body{margin-top:32px}}
.report-body .checks{gap:12px}
.report-body .checks b{color:var(--ink)}
a.card.sample{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:center;margin-top:28px;padding:14px;color:inherit;text-decoration:none}
.sample img{display:block;width:120px;height:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.sample-t{display:block;font:600 var(--fs-lg)/1.3 var(--disp);letter-spacing:-.01em;color:var(--ink)}
.sample-d{display:block;margin-top:4px;font-size:var(--fs-sm);line-height:1.5;color:var(--body)}
.sample-go{display:inline-flex;margin-top:8px;font:600 var(--fs-sm) var(--sans);color:var(--blue)}
.report-body .muted{margin-top:16px;font-size:var(--fs-sm)}
.form-card h3{font-size:var(--fs-xl);margin-bottom:6px}
.form-card .form-lede{font-size:var(--fs-sm);color:var(--body);margin-bottom:16px}
.req-pre{margin-bottom:14px;padding:10px 14px;background:var(--tint);border:1px solid var(--tint-line);border-radius:var(--r-sm);font-size:var(--fs-sm);line-height:1.5;color:var(--body)}
.req-pre b{color:var(--ink)}
.req-fine{margin-top:12px;font-size:13px;line-height:1.5;color:var(--mut)}
.req-err{padding:12px 14px;border:1px solid var(--line-2);border-left:3px solid var(--warm);border-radius:var(--r-sm);background:var(--surface);font-size:var(--fs-sm);color:var(--ink)}
.req-ok:focus{outline:none}
.req-ok .ok{font-size:var(--fs-ui)}
.req-ok h3{margin-top:22px}
.req-ok p{font-size:var(--fs-ui)}
.req-ok .btn{margin-top:14px}
.form .btn.block{margin-top:4px}

/* ---------- next step ---------- */
.next-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px;align-items:start;margin-top:32px}
.next-grid .tier{margin:0}
.next-grid .tier .btn{align-self:stretch}
.next-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.next-acts .btn{margin:0}
.next-side{display:grid;gap:16px}
.next-side .who{max-width:none}
@media (max-width:860px){.next-grid{grid-template-columns:1fr}}

/* share rows (ka-share.js, kind research): in the hero, and after the questions */
.team-share{margin-top:14px}
.team-share-end{margin-top:28px}