/* Sistema visual de Gia (extraído del prototipo design/demo/gia-demo.html).
   Blanco, negro y grises; verde/ámbar/rojo solo para estados. */
/* Layout: app shell — top bar, role-based sidebar, scanned UI panels with hairline borders (light only, per request) */
/* Geist y Geist Mono servidas desde static/fonts (OFL, ver static/fonts/OFL.txt; copiadas de Google Fonts, v5/v6).
   Son variables: un archivo por subconjunto sirve para todos los pesos. base.html precarga los dos «latin». */
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/geist-latin-ext.49215a3bccae.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/geist-latin.f4634c3bc1fa.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/geist-mono-latin-ext.a27466d06912.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/geist-mono-latin.cd5b25781181.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Respaldo con las medidas de Geist (Arial ajustado): mientras llega la fuente de Google el texto ocupa lo mismo
   y no salta al cambiar (CLS). Medido contra Geist (ascendente 101, descendente 29 por 100px): ancho 101.85% en
   regular y 101.77% en negrita (Geist 650 contra Arial Bold). La negrita necesita su propia cara: si no, el navegador
   engrosa Arial regular sin ensancharla y los títulos caben en menos renglones. */
@font-face{font-family:"Geist Fallback";font-weight:100 549;src:local("Arial"),local("ArialMT");size-adjust:101.85%;ascent-override:99.16%;descent-override:28.47%;line-gap-override:0%}
@font-face{font-family:"Geist Fallback";font-weight:550 900;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:101.77%;ascent-override:99.24%;descent-override:28.5%;line-gap-override:0%}
:root{
  color-scheme: light;
  --bg:#F5F5F5; --surface:#FFFFFF; --sunk:#EFEFEF; --line:#E3E3E3; --line-2:#CDCDCD;
  --fg:#111111; --fg-2:#444444; --muted:#757575;
  --accent:#111111; --accent-2:#3A3A3A; --accent-soft:#EEEEEE; --accent-line:#D4D4D4;
  --ok:#2C8A57; --ok-soft:#E5F3EB; --warn:#B07415; --warn-soft:#FBF0DC; --bad:#BF4338; --bad-soft:#FBE8E5;
  --chat:#ECECEC; --chat-me:#DADADA; --chat-them:#FFFFFF;
  --font:"Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r:10px; --r-sm:7px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,h4{margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
.mono{font-family:var(--mono)}
.lbl{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* shell */
.app{display:grid;grid-template-rows:auto 1fr;min-height:100%}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;display:flex;align-items:center;gap:16px;padding:10px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px;letter-spacing:-.02em}
.brand .mark{width:26px;height:26px;border-radius:7px;background:var(--accent);display:grid;place-items:center;color:#fff}
.brand .wm{height:19px;width:auto;display:block;fill:currentColor}
.gi{width:16px;height:auto;flex:none;fill:currentColor;stroke:none!important}
.jevtag .gi{width:13px}
.callout .gi{margin-top:3px}
.brand small{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--muted);letter-spacing:.04em}
.seg{display:inline-flex;background:var(--sunk);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;padding:6px 12px;border-radius:6px;font-size:13px;color:var(--fg-2);white-space:nowrap}
.seg button.on{background:var(--surface);color:var(--fg);box-shadow:0 1px 2px rgba(20,22,28,.08),0 0 0 1px var(--line)}
.top .sp{flex:1}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:var(--surface);padding:7px 13px;border-radius:8px;font-size:13px;font-weight:500;white-space:nowrap;transition:background .15s,border-color .15s}
.btn:hover{background:var(--sunk)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.pri:hover{background:var(--accent-2)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--sunk)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.who{display:flex;align-items:center;gap:9px;font-size:13px}
.who b{font-weight:600;display:block;line-height:1.2}
.who span{color:var(--muted);font-size:12px}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:600;flex:none;letter-spacing:.02em}
.av.lg{width:52px;height:52px;font-size:17px}
.av.sm{width:24px;height:24px;font-size:10px}

.body{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:0}
.side{border-right:1px solid var(--line);background:var(--surface);padding:16px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:57px;height:calc(100vh - 57px);overflow:auto}
.side .grp{margin:12px 10px 6px}
.nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;border:0;background:transparent;text-align:left;width:100%;color:var(--fg-2);font-size:13.5px}
.nav:hover{background:var(--sunk);color:var(--fg)}
.nav.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav .ct{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted)}
.side .foot{margin-top:auto;border:1px solid var(--line);border-radius:var(--r);padding:12px;display:grid;gap:8px;font-size:12.5px}
.meter{height:5px;border-radius:9px;background:var(--sunk);overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent);border-radius:9px}

main{padding-block:24px 64px;padding-inline:28px;min-width:0}
.wrap{max-width:1240px;margin:0 auto;display:grid;gap:20px}
.ph{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.ph h1{font-size:24px;font-weight:650;letter-spacing:-.02em}
.ph p{color:var(--muted);margin-top:4px;max-width:70ch}
.ph .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.crumb{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;border:0;background:none;padding:0}
.crumb:hover{color:var(--fg)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.card > .hd{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.card > .hd h3{font-size:14px;font-weight:600}
.card > .hd .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.card > .bd{padding:16px}
.g{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-73{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.kpi{padding:16px;display:grid;gap:6px}
.kpi .v{font-size:28px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .d{font-size:12px;font-family:var(--mono)}
.up{color:var(--ok)} .dn{color:var(--bad)}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;padding:2px 8px;border-radius:99px;white-space:nowrap;border:1px solid transparent}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.ac{background:var(--accent-soft);color:var(--accent)}
.pill.nt{background:var(--sunk);color:var(--fg-2);border-color:var(--line)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}

table.t{width:100%;border-collapse:collapse;font-size:13px}
.t th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:10px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.t td{padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.t tr:last-child td{border-bottom:0}
.t tr.click{cursor:pointer}
.t tr.click:hover td{background:#FAFAFC}
.tw{overflow-x:auto}
.cell-who{display:flex;align-items:center;gap:10px;min-width:180px}
.cell-who b{font-weight:600;display:block}
.cell-who span{font-size:12px;color:var(--muted)}

.score{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
.sc-hi{color:var(--ok)} .sc-mid{color:var(--warn)} .sc-lo{color:var(--bad)}

.bars{display:grid;gap:12px}
.bar{display:grid;grid-template-columns:120px minmax(0,1fr) 44px;gap:12px;align-items:center;font-size:13px}
.bar .tr{height:8px;background:var(--sunk);border-radius:9px;overflow:hidden}
.bar .tr i{display:block;height:100%;border-radius:9px;background:var(--accent)}
.bar .v{font-family:var(--mono);font-size:12px;text-align:right}

.list{display:grid}
.li{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:0}
.li .tx{min-width:0;flex:1}
.li .tx b{font-weight:600}
.li .tx p{color:var(--muted);font-size:12.5px;margin-top:2px}

.chipset{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line-2);background:var(--surface);border-radius:99px;padding:5px 11px;font-size:12.5px;color:var(--fg-2)}
.chip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:500}

.field{display:grid;gap:6px}
.field label{font-size:12.5px;font-weight:500;color:var(--fg-2)}
.field .hint{font-size:12px;color:var(--muted)}
.in, .ta, .sel{width:100%;border:1px solid var(--line-2);background:var(--surface);border-radius:8px;padding:8px 11px;font-size:13.5px}
.ta{resize:vertical;min-height:72px;line-height:1.45}
.in:focus,.ta:focus,.sel:focus{outline:2px solid var(--accent-line);border-color:var(--accent)}
.rng{display:grid;grid-template-columns:110px minmax(0,1fr) 36px;gap:10px;align-items:center;font-size:13px}
.rng input{accent-color:var(--accent);width:100%}
.tags{display:grid;gap:6px}
.tag-row{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#FBFBFD;font-size:13px}
.tag-row .x{margin-left:auto;border:0;background:none;color:var(--muted);padding:2px}

/* client cards */
.cl{padding:16px;display:grid;gap:12px;cursor:pointer;transition:border-color .15s, box-shadow .15s;text-align:left}
.cl:hover{border-color:var(--line-2);box-shadow:0 2px 10px rgba(20,22,28,.05)}
.cl .top-r{display:flex;gap:12px;align-items:center}
.cl h4{font-size:15px;font-weight:600}
.cl .arq{font-size:12.5px;color:var(--accent);font-weight:500}
.cl p{font-size:13px;color:var(--fg-2)}
.cl .meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.cl .meta b{color:var(--fg);font-family:var(--mono);font-weight:500}

/* scenario cards */
.esc{padding:16px;display:grid;gap:10px}
.esc h4{font-size:15px;font-weight:600}
.esc .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.esc dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0;font-size:13px}
.esc dt{color:var(--muted)}
.esc dd{margin:0}

/* transcript (result) */
.res-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;align-items:start}
.trans{display:grid;gap:10px;padding:16px;max-height:640px;overflow:auto}
.msg{max-width:88%;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--surface);display:grid;gap:4px;transition:box-shadow .3s,border-color .3s}
.msg.me{margin-left:auto;background:#FBFBFD}
.msg .mh{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600}
.msg .mh .bar-ac{width:2px;height:13px;border-radius:2px;background:var(--line-2)}
.msg.me .mh .bar-ac{background:var(--accent)}
.msg .mh .tm{margin-left:auto;font-family:var(--mono);font-weight:400;color:var(--muted);font-size:11.5px}
.ai{font-family:var(--mono);font-size:9.5px;font-weight:500;border:1px solid var(--line-2);border-radius:4px;padding:0 4px;color:var(--fg-2);letter-spacing:.04em}
.msg .tx{font-size:14px}
.msg.flash{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.note{display:flex;gap:7px;align-items:flex-start;font-size:12px;color:var(--fg-2);border-top:1px dashed var(--line);padding-top:6px;margin-top:2px}
.note .dot{margin-top:5px}
mark{background:var(--warn-soft);color:inherit;border-radius:2px;padding:0 1px}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:8px;padding:6px 10px;min-width:0;flex:1;max-width:240px;color:var(--muted)}
.search input{border:0;outline:0;background:transparent;min-width:0;width:100%;font-size:13px;color:var(--fg)}

.ring{position:relative;width:64px;height:64px;flex:none}
.ring svg{width:64px;height:64px;transform:rotate(-90deg)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:16px;font-weight:500}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding:0 12px;overflow-x:auto}
.tab{border:0;background:none;padding:12px 10px;font-size:13.5px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tab.on{color:var(--fg);border-bottom-color:var(--fg);font-weight:500}
.crit-row{display:flex;align-items:center;gap:8px;padding:14px 12px 4px}
.crit-sc{display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;flex:1;min-width:0;padding:2px}
.crit-sc::-webkit-scrollbar{display:none}
.cchip{flex:none;display:flex;gap:9px;align-items:flex-start;width:168px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:10px 11px;font-size:13px;line-height:1.3}
.cchip.on{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg)}
.arrow{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);display:grid;place-items:center;flex:none}
.st-ic{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex:none}
.st-ic svg{width:11px;height:11px;stroke-width:2.6}
.st-ok{background:var(--ok);color:#fff}
.st-partial{background:var(--warn);color:#fff}
.st-fail{background:var(--bad);color:#fff}
.cdet{padding:12px 16px 18px;display:grid;gap:12px}
.cdet h4{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600}
.jevbox{border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:10px;background:#FCFCFE}
.jevtag{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--accent)}
.jevtag svg{width:13px;height:13px;fill:var(--accent);stroke:var(--accent)}
.jevbox h5{font-size:15px;margin:0;font-weight:600}
.jevbox ol{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--fg-2)}
.jevbox .verdict{font-weight:500;color:var(--fg)}
.coach{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;gap:12px;background:var(--surface)}
.coach .ic{color:var(--warn);margin-top:2px}
.stage-pts{display:grid}
.stage-pts .sp-r{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.stage-pts .sp-r:last-child{border-bottom:0}
.stage-pts .sp-r .v{margin-left:auto;font-family:var(--mono);color:var(--fg-2)}
.hidden-list{display:grid;gap:8px}
.hidden-list .h{display:flex;align-items:center;gap:10px;font-size:13.5px;padding:9px 11px;border:1px solid var(--line);border-radius:8px}
.hidden-list .h.found{background:var(--ok-soft);border-color:transparent}
.hidden-list .h.lost{background:#FFF;border-style:dashed}

/* sala */
.sala{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.chat{display:grid;grid-template-rows:auto 1fr auto;height:calc(100vh - 200px);min-height:540px;overflow:hidden}
.chat-hd{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.chat-hd .nm b{display:block;font-weight:600}
.chat-hd .nm span{font-size:12px;color:var(--muted)}
.chat-hd .nm span.typing{color:var(--ok)}
.chat-hd .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.timer{font-family:var(--mono);font-size:13px;padding:5px 9px;border-radius:7px;background:var(--sunk);border:1px solid var(--line)}
.goal{display:flex;gap:8px;align-items:center;padding:8px 16px;background:var(--accent-soft);color:var(--accent);font-size:12.5px;border-bottom:1px solid var(--accent-line)}
.feed{background:var(--chat);overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:6px;background-image:radial-gradient(rgba(0,0,0,.05) 1px,transparent 1px);background-size:16px 16px}
.bub{max-width:78%;padding:7px 10px 6px;border-radius:9px;font-size:14px;line-height:1.4;position:relative;box-shadow:0 1px 1px rgba(20,22,28,.08);white-space:pre-wrap;overflow-wrap:anywhere}
.bub.them{background:var(--chat-them);align-self:flex-start;border-top-left-radius:3px}
.bub.me{background:var(--chat-me);align-self:flex-end;border-top-right-radius:3px}
.bub .tm{font-family:var(--mono);font-size:10px;color:var(--muted);float:right;margin:6px 0 -2px 10px}
.bub .sem{position:absolute;left:-14px;top:9px;width:8px;height:8px;border-radius:50%}
.bub .rw{position:absolute;left:-40px;top:2px;border:0;background:var(--surface);border:1px solid var(--line);border-radius:6px;width:24px;height:22px;display:none;place-items:center;color:var(--fg-2)}
.bub.me:hover .rw{display:grid}
.bub.me.has-sem{margin-right:0}
.daychip{align-self:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;background:rgba(255,255,255,.85);border-radius:6px;padding:3px 8px;color:var(--muted);margin:4px 0 8px}
.sysmsg{align-self:center;font-size:12.5px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 12px;color:var(--fg-2);margin:8px 0;text-align:center}
.typing-b{align-self:flex-start;background:var(--chat-them);border-radius:9px;padding:9px 12px;display:flex;gap:4px}
.typing-b i{width:6px;height:6px;border-radius:50%;background:#9AA0AC;animation:bl 1.2s infinite}
.typing-b i:nth-child(2){animation-delay:.2s}.typing-b i:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,80%,100%{opacity:.3}40%{opacity:1}}
.comp{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--surface);align-items:flex-end}
.comp textarea{flex:1;min-width:0;border:1px solid var(--line-2);border-radius:20px;padding:9px 14px;resize:none;height:42px;max-height:120px;font-size:14px;line-height:1.4}
.comp textarea:focus{outline:2px solid var(--accent-line);border-color:var(--accent)}
.send{width:42px;height:42px;border-radius:50%;border:0;background:var(--fg);color:#fff;display:grid;place-items:center;flex:none}
.send svg{width:18px;height:18px}
.help-btn{height:42px;border-radius:21px;border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;gap:6px;padding:0 13px;font-weight:600;font-size:13px;flex:none}
.help-btn svg{fill:var(--accent)}
.help-btn[disabled]{opacity:.4;cursor:not-allowed}
.jev{display:grid;gap:12px;position:sticky;top:76px}
.jev .card{padding:14px}
.jev-hd{display:flex;align-items:center;gap:9px}
.jev-hd .mark{width:28px;height:28px;border-radius:8px;background:var(--accent);display:grid;place-items:center}
.jev-hd .mark .gi{width:16px;fill:#fff}
.jev-hd b{font-weight:650}
.jev-hd span{font-size:12px;color:var(--muted);display:block}
.stepper{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:10px}
.stepper div{display:grid;gap:5px;font-size:10.5px;color:var(--muted);text-align:center}
.stepper div i{height:4px;border-radius:4px;background:var(--line)}
.stepper div.done i{background:var(--accent)}
.stepper div.cur i{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.stepper div.cur{color:var(--accent);font-weight:600}
.therm{display:grid;gap:8px;margin-top:4px}
.therm-track{height:10px;border-radius:9px;background:linear-gradient(90deg,#DADADA,#A6A6A6 45%,var(--ok));position:relative}
.therm-track i{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--surface);border:2px solid var(--fg);transform:translate(-50%,-50%);transition:left .6s cubic-bezier(.3,.8,.3,1)}
.therm-lbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.mini{display:grid;grid-template-columns:76px minmax(0,1fr) 30px;gap:8px;align-items:center;font-size:12.5px;margin-top:8px}
.mini .tr{height:6px;border-radius:9px;background:var(--sunk);overflow:hidden}
.mini .tr i{display:block;height:100%;border-radius:9px;transition:width .6s}
.mini .v{font-family:var(--mono);font-size:11.5px;text-align:right}
.read{font-size:13px;color:var(--fg-2);margin-top:6px}
.jfeed{display:grid;gap:8px;max-height:260px;overflow:auto}
.jn{display:flex;gap:8px;font-size:12.5px;line-height:1.4;padding:8px 10px;border-radius:8px;background:var(--sunk)}
.jn .dot{margin-top:5px}
.jn.g{background:var(--ok-soft)} .jn.a{background:var(--warn-soft)} .jn.r{background:var(--bad-soft)}
.sugs{display:grid;gap:8px}
.sug{text-align:left;border:1px solid var(--accent-line);background:var(--surface);border-radius:9px;padding:10px 11px;font-size:13px;display:grid;gap:4px}
.sug:hover{background:var(--accent-soft)}
.sug small{font-family:var(--mono);font-size:10.5px;color:var(--accent);letter-spacing:.04em;text-transform:uppercase}
.exam{font-size:13px;color:var(--fg-2);display:flex;gap:10px;align-items:flex-start}

/* misc */
.drop{border:1.5px dashed var(--line-2);border-radius:var(--r);padding:36px 20px;display:grid;place-items:center;gap:10px;text-align:center;background:#FBFBFD}
.drop svg.i{width:28px;height:28px;color:var(--accent)}
.steps-an{display:grid;gap:10px}
.steps-an div{display:flex;gap:10px;align-items:center;font-size:13.5px;color:var(--muted)}
.steps-an div.done{color:var(--fg)}
.steps-an div.done .st-ic{background:var(--ok);color:#fff}
.steps-an .st-ic{background:var(--sunk);border:1px solid var(--line-2)}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--accent-line);border-top-color:var(--accent);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.freq{display:grid;grid-template-columns:minmax(0,1fr) 120px 40px;gap:10px;align-items:center;font-size:13px;padding:7px 0}
.freq .tr{height:6px;background:var(--sunk);border-radius:9px;overflow:hidden}
.freq .tr i{display:block;height:100%;background:var(--accent)}
.freq .v{font-family:var(--mono);font-size:12px;text-align:right}
.quote{border-left:2px solid var(--accent-line);padding:4px 12px;font-size:13.5px;color:var(--fg-2)}
.badge{border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:8px;justify-items:start;background:var(--surface)}
.badge .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.badge.lock{background:#FAFAFB}
.badge.lock .ic{background:var(--sunk);color:var(--muted)}
.badge b{font-size:14px}
.badge p{font-size:12.5px;color:var(--muted)}
.stage-acc{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.stage-acc summary{list-style:none;display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer}
.stage-acc summary::-webkit-details-marker{display:none}
.stage-acc summary .n{font-family:var(--mono);font-size:12px;color:var(--muted);width:22px}
.stage-acc summary h4{font-size:15px;font-weight:600}
.stage-acc summary .r{margin-left:auto;display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12.5px}
.stage-acc[open] summary{border-bottom:1px solid var(--line)}
.stage-body{padding:16px;display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.crit-ed{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.crit-ed:last-child{border-bottom:0}
.crit-ed .w{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted)}
.sw{position:relative;width:32px;height:18px;flex:none}
.sw input{opacity:0;width:0;height:0;position:absolute}
.sw span{position:absolute;inset:0;border-radius:9px;background:var(--line-2);transition:background .2s}
.sw span::after{content:"";position:absolute;width:14px;height:14px;left:2px;top:2px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.sw input:checked + span{background:var(--accent)}
.sw input:checked + span::after{transform:translateX(14px)}
.ul{margin:0;padding-left:18px;display:grid;gap:5px;font-size:13.5px;color:var(--fg-2)}
.empty{padding:24px;text-align:center;color:var(--muted)}
.callout{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);background:var(--accent-soft);border:1px solid var(--accent-line);font-size:13.5px;color:var(--fg)}
.callout svg{fill:var(--accent);stroke:var(--accent);margin-top:2px}
.callout b{color:var(--accent)}
.radio-card{display:flex;gap:12px;padding:14px;border:1px solid var(--line-2);border-radius:var(--r);cursor:pointer;align-items:flex-start}
.radio-card.on{border-color:var(--accent);background:var(--accent-soft)}
.radio-card input{accent-color:var(--accent);margin-top:3px}
.radio-card b{display:block}
.radio-card span{font-size:12.5px;color:var(--muted)}
.mode-card{border:1px solid var(--line-2);border-radius:var(--r);padding:12px 14px;text-align:left;background:var(--surface);display:grid;gap:4px}
.mode-card b{font-size:13.5px}
.mode-card span{font-size:12px;color:var(--muted)}
.mode-card.on{border-color:var(--accent);background:var(--accent-soft)}
.mode-card.on b{color:var(--accent)}
.cmt{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.cmt:last-child{border-bottom:0}
.cmt .tx{flex:1;min-width:0}
.cmt .tx b{font-size:13px}
.cmt .tx span{font-size:11.5px;color:var(--muted);font-family:var(--mono);margin-left:6px}
.cmt .tx p{font-size:13.5px;margin-top:3px;color:var(--fg-2)}

/* modal & toast */
.modal-bg{position:fixed;inset:0;background:rgba(20,22,28,.4);z-index:80;display:grid;place-items:center;padding:16px}
.modal{background:var(--surface);border-radius:12px;width:min(520px,100%);max-height:90vh;overflow:auto;box-shadow:0 20px 50px rgba(20,22,28,.25)}
.modal .hd{display:flex;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.modal .hd h3{font-size:16px}
.modal .hd button{margin-left:auto}
.modal .bd{padding:18px;display:grid;gap:14px}
.modal .ft{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid var(--line)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:#fff;padding:10px 16px;border-radius:9px;font-size:13.5px;z-index:120;display:flex;gap:8px;align-items:center;box-shadow:0 8px 24px rgba(0,0,0,.2);animation:tin .25s ease}
@keyframes tin{from{opacity:0;transform:translate(-50%,8px)}}

/* tour */
.tour-hole{position:fixed;z-index:200;border-radius:12px;box-shadow:0 0 0 9999px rgba(0,0,0,.55);pointer-events:none;transition:all .35s cubic-bezier(.3,.8,.3,1)}
.tour-hole.center{width:0;height:0;left:50%;top:50%}
.tour-card{position:fixed;z-index:201;width:min(360px,calc(100vw - 32px));background:var(--surface);border-radius:12px;padding:18px;box-shadow:0 18px 50px rgba(0,0,0,.3);display:grid;gap:10px;transition:top .35s,left .35s}
.tour-card .ct{display:flex;align-items:center;gap:8px}
.tour-card h4{font-size:16px;font-weight:650}
.tour-card p{font-size:13.5px;color:var(--fg-2)}
.tour-card .nav-t{display:flex;gap:8px;align-items:center;margin-top:4px}
.tour-card .prog{height:3px;background:var(--sunk);border-radius:3px;overflow:hidden}
.tour-card .prog i{display:block;height:100%;background:var(--accent);transition:width .3s}
.tour-block{position:fixed;inset:0;z-index:199}

.jbadge{display:inline-flex;gap:6px;align-items:center;font-family:var(--mono);font-size:11px;border:1px solid var(--line-2);border-radius:6px;padding:2px 7px;color:var(--fg-2);white-space:nowrap;background:var(--surface)}
.jline{display:flex;gap:6px;flex-wrap:wrap}
.jrow{display:flex;gap:8px;align-items:baseline;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--line)}
.jrow:last-child{border-bottom:0}
.jrow .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);width:46px;flex:none}
.jrow .v2{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--fg-2)}
.noul{display:grid;grid-template-columns:minmax(0,1fr) 48px 34px;gap:8px;align-items:center;font-size:12px;padding:3px 0}
.noul .tr{height:5px;background:var(--sunk);border-radius:9px;overflow:hidden}
.noul .tr i{display:block;height:100%;border-radius:9px}
.noul .v{font-family:var(--mono);font-size:11px;text-align:right}
.jjson{font-family:var(--mono);font-size:11px;line-height:1.5;background:var(--sunk);border:1px solid var(--line);padding:10px;border-radius:8px;overflow:auto;max-height:220px;margin:8px 0 0;white-space:pre}
.jfoot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:8px}
.lowc{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;padding:9px 11px;border-radius:8px;background:var(--warn-soft);color:var(--fg-2)}
.arch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.arch > div{border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:6px;align-content:start}
.arch > div.jv{border-color:var(--fg)}
.arch b{font-size:14px}
.arch p{font-size:12.5px;color:var(--muted)}
@media (max-width:860px){.arch{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sala{grid-template-columns:minmax(0,1fr)}
  .jev{position:static}
  .res-grid{grid-template-columns:minmax(0,1fr)}
  .g-73{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .body{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px 12px}
  .side .grp,.side .foot{display:none}
  .nav{width:auto;white-space:nowrap}
  .nav .ct{display:none}
  main{padding-inline:16px}
  .g2,.g3{grid-template-columns:minmax(0,1fr)}
  .top{flex-wrap:wrap;padding:10px 16px}
  .who span,.who b{display:none}
  .stage-body{grid-template-columns:minmax(0,1fr)}
  .chat{height:70vh}
}
@media (max-width:520px){
  .g4{grid-template-columns:minmax(0,1fr)}
  .bar{grid-template-columns:92px minmax(0,1fr) 38px}
  .brand small{display:none}
  .seg button{padding:6px 9px}
}
/* ---------- public site ---------- */
.site{background:var(--surface);min-height:100%}
.snav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.snav .sin{max-width:1180px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:18px}
.snav .logo{border:0;background:none;padding:0;display:flex;align-items:center;gap:9px;color:var(--fg)}
.snav .logo .wm{height:21px}
.snav .logo small{font-family:var(--mono);font-size:11px;color:var(--muted)}
.snav .links{display:flex;gap:2px}
.snav .links button{border:0;background:none;padding:8px 10px;color:var(--fg-2);font-size:14px;border-radius:7px}
.snav .links button:hover{background:var(--sunk);color:var(--fg)}
.snav .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.btn.lg{padding:12px 20px;font-size:15px;border-radius:10px}
.sec{max-width:1180px;margin:0 auto;padding-block:96px;padding-inline:20px;scroll-margin-top:60px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;padding-block:72px 96px}
.hero h1{font-size:clamp(38px,5.2vw,66px);line-height:1.02;letter-spacing:-.045em;font-weight:650;margin-top:16px}
.hero .lead{font-size:18px;line-height:1.55;color:var(--fg-2);max-width:52ch;margin-top:22px}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.hero .fine{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:13px;color:var(--muted)}
.hero .fine span{display:inline-flex;gap:6px;align-items:center}
.mock{border:1px solid var(--line);border-radius:18px;background:var(--sunk);padding:18px;display:grid;gap:10px;box-shadow:0 40px 70px -40px rgba(0,0,0,.35);min-width:0}
.mock-hd{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:13px}
.mock-hd b{display:block;font-size:14px}
.mock-hd span{color:var(--muted);font-size:12px}
.mb{max-width:84%;padding:9px 12px;border-radius:12px;font-size:14px;line-height:1.4;background:#fff;border:1px solid var(--line);overflow-wrap:anywhere}
.mb.v{margin-left:auto;background:var(--fg);color:#fff;border-color:var(--fg)}
.mnote{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;padding:9px 11px;border-radius:10px;background:#fff;border:1px dashed var(--line-2);color:var(--fg-2)}
.mnote .gi{margin-top:2px}
.mjev{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.mock-ft{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;flex-wrap:wrap}
.mock-ft .big{font-family:var(--mono);font-size:22px;font-weight:500}
.mock > *{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
.mock > *:nth-child(2){animation-delay:.1s}.mock > *:nth-child(3){animation-delay:.3s}.mock > *:nth-child(4){animation-delay:.45s}.mock > *:nth-child(5){animation-delay:.65s}.mock > *:nth-child(6){animation-delay:.8s}.mock > *:nth-child(7){animation-delay:.95s}.mock > *:nth-child(8){animation-delay:1.1s}
@keyframes rise{from{opacity:.001;transform:translateY(6px)}}
.statement{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statement .sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;padding-block:72px}
.sec-h{display:grid;gap:14px;max-width:660px;margin-bottom:44px}
.sec h2{font-size:clamp(28px,3.4vw,44px);line-height:1.08;letter-spacing:-.035em;font-weight:650}
.sec .sub{font-size:17px;line-height:1.55;color:var(--fg-2)}
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.st3{border-top:2px solid var(--fg);padding-top:20px;display:grid;gap:10px;align-content:start}
.st3 .n{font-family:var(--mono);font-size:12px;color:var(--muted)}
.st3 h3{font-size:19px;font-weight:600;letter-spacing:-.015em}
.st3 p{color:var(--fg-2);font-size:15px;line-height:1.55}
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.feat > div{padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:10px;align-content:start}
.feat .fi{width:36px;height:36px;border-radius:9px;background:var(--sunk);display:grid;place-items:center}
.feat .fi svg.i{width:18px;height:18px}
.feat h3{font-size:16px;font-weight:600}
.feat p{color:var(--fg-2);font-size:14px;line-height:1.55}
.band{background:#111;color:#F2F2F2}
.band .sec h2{color:#fff}
.band .sub{color:#B5B5B5}
.duo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#2E2E2E;border:1px solid #2E2E2E;border-radius:14px;overflow:hidden}
.duo > div{background:#151515;padding:28px;display:grid;gap:12px;align-content:start}
.duo .tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8A8A8A}
.duo h3{font-size:22px;font-weight:650;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;color:#fff}
.duo h3 .gi{width:26px;fill:#fff}
.duo p{color:#C4C4C4;font-size:14.5px;line-height:1.55}
.duo ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:13.5px;color:#D6D6D6}
.duo li{display:flex;gap:8px;align-items:flex-start}
.duo li svg.i{color:#8A8A8A;margin-top:2px}
.duo code{font-family:var(--mono);font-size:12px;background:#222;border:1px solid #333;border-radius:5px;padding:1px 6px;color:#E6E6E6}
.show{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;align-items:start}
.who-row{display:flex;gap:8px;flex-wrap:wrap}
.who-row span{border:1px solid var(--line-2);border-radius:99px;padding:8px 14px;font-size:14px;color:var(--fg-2);background:var(--surface)}
.price-ctl{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px;align-items:center}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.plan{border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:18px;background:var(--surface)}
.plan.hl{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg)}
.plan .top{display:flex;align-items:center;gap:8px}
.plan h3{font-size:18px;font-weight:650}
.plan .desc{color:var(--muted);font-size:14px;min-height:42px}
.plan .price{font-size:42px;font-weight:650;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1}
.plan .per{font-size:13px;color:var(--muted);margin-top:6px}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:9px;font-size:14px}
.plan li{display:flex;gap:9px;align-items:flex-start}
.plan li svg.i{color:var(--ok);margin-top:2px}
.plan .btn{justify-content:center;margin-top:auto}
.pnote{margin-top:20px;font-size:13.5px;color:var(--fg-2);display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--sunk)}
.faq{display:grid;max-width:820px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;font-size:16.5px;font-weight:550;display:flex;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg.i{margin-left:auto;transition:transform .2s;flex:none}
.faq details[open] summary svg.i{transform:rotate(180deg)}
.faq details p{padding:0 0 20px;color:var(--fg-2);font-size:15px;line-height:1.6;max-width:68ch}
.final{text-align:left;display:grid;gap:18px;justify-items:start}
.sfoot{border-top:1px solid var(--line)}
.sfoot .sin{max-width:1180px;margin:0 auto;padding:28px 20px;display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--muted)}
.sfoot .wm{height:16px;fill:var(--fg)}
.sfoot button{border:0;background:none;padding:0;color:var(--muted);font-size:13px;text-decoration:underline;text-underline-offset:3px}
/* checkout */
.chk{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;max-width:1100px;margin:0 auto;padding-block:36px 80px;padding-inline:20px;align-items:start}
.chk h1{font-size:28px;letter-spacing:-.03em;font-weight:650}
.fs{border:1px solid var(--line);border-radius:12px;padding:20px;display:grid;gap:14px;background:var(--surface)}
.fs > h3{font-size:15px;font-weight:600;display:flex;align-items:center;gap:10px}
.fs > h3 .n{font-family:var(--mono);font-size:11px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--fg-2)}
.fg2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fg3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
.err{font-size:12px;color:var(--bad)}
.in.bad{border-color:var(--bad)}
.stepper-n{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.stepper-n button{border:0;background:var(--sunk);width:34px;height:34px;font-size:16px}
.stepper-n span{min-width:44px;text-align:center;font-family:var(--mono)}
.sum{position:sticky;top:80px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:22px;display:grid;gap:4px}
.sum h3{font-size:16px;font-weight:600;margin-bottom:8px}
.sr{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:6px 0;color:var(--fg-2)}
.sr b{color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.sr.tot{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-size:17px;color:var(--fg);font-weight:650}
.sr.tot b{font-weight:650}
.demo-b{display:flex;gap:10px;align-items:flex-start;font-size:13px;padding:12px 14px;border-radius:10px;background:var(--warn-soft);color:#6B4A0E}
.paytabs{display:flex;gap:8px}
.paytabs button{flex:1;border:1px solid var(--line-2);background:var(--surface);border-radius:9px;padding:11px;font-size:14px;display:flex;gap:8px;align-items:center;justify-content:center}
.paytabs button.on{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg);font-weight:600}
.chkbox{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--fg-2)}
.chkbox input{accent-color:var(--fg);margin-top:3px}
.thanks{max-width:620px;margin:0 auto;padding-block:56px 80px;padding-inline:20px;display:grid;gap:20px}
.thanks .ok-ic{width:52px;height:52px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center}
.thanks .ok-ic svg.i{width:26px;height:26px;stroke-width:2.2}
.thanks h1{font-size:32px;letter-spacing:-.03em;font-weight:650}
.nxt{display:grid;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.nxt > div{display:flex;gap:14px;padding:18px;border-bottom:1px solid var(--line);align-items:flex-start}
.nxt > div:last-child{border-bottom:0}
.nxt .n{font-family:var(--mono);font-size:12px;width:26px;height:26px;border-radius:50%;background:var(--fg);color:#fff;display:grid;place-items:center;flex:none}
.nxt .n.off{background:var(--sunk);color:var(--fg-2);border:1px solid var(--line-2)}
.nxt b{display:block;margin-bottom:3px}
.nxt p{font-size:13.5px;color:var(--muted)}
.clabe{font-family:var(--mono);font-size:20px;letter-spacing:.06em;padding:14px;border:1px dashed var(--line-2);border-radius:10px;text-align:center;background:var(--sunk)}
.pw{position:relative}
.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);font-size:12px;padding:4px 6px}
.lnk{border:0;background:none;padding:0;color:var(--fg);text-decoration:underline;text-underline-offset:3px;font-size:13px}
@media (max-width:960px){
 .hero,.statement .sec,.show,.chk{grid-template-columns:minmax(0,1fr)}
 .steps3,.plans,.duo{grid-template-columns:minmax(0,1fr)}
 .feat{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sum{position:static}
 .snav .links{display:none}
}
@media (max-width:600px){
 .feat{grid-template-columns:minmax(0,1fr)}
 .fg2,.fg3{grid-template-columns:minmax(0,1fr)}
 .sec{padding-block:64px}
 .snav .logo small{display:none}
 .snav .r .btn.ghost{display:none}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}