/* Beta colour theme: teal and aqua instead of brass (consultant feedback). Overrides the tokens in ../site.css. */
:root{
  --bg:#06131a; --bg-2:#0a1b23; --panel:#0d212b; --panel-2:#112a36; --line:#173544; --line-2:#21485a;
  --ink:#e6f4f6; --muted:#8fb0ba; --dim:#64868f;
  --seal:#2dd4bf; --seal-ink:#032a26; --seal-soft:rgba(45,212,191,.13);
  --ok:#6bd88f; --ok-soft:rgba(107,216,143,.13); --info:#38bdf8; --info-soft:rgba(56,189,248,.13);
  --glow:rgba(34,211,238,.20);
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#f4fafb; --bg-2:#e8f4f6; --panel:#ffffff; --panel-2:#eff8fa; --line:#d3e6ea; --line-2:#b9d6dc;
  --ink:#06222b; --muted:#4a6670; --dim:#6f8a93;
  --seal:#0b7a80; --seal-ink:#ffffff; --seal-soft:rgba(11,122,128,.10);
  --ok:#17803d; --ok-soft:rgba(23,128,61,.10); --info:#0369a1; --info-soft:rgba(3,105,161,.09);
  --glow:rgba(14,165,183,.14) }}
:root[data-theme="light"]{
  --bg:#f4fafb; --bg-2:#e8f4f6; --panel:#ffffff; --panel-2:#eff8fa; --line:#d3e6ea; --line-2:#b9d6dc;
  --ink:#06222b; --muted:#4a6670; --dim:#6f8a93;
  --seal:#0b7a80; --seal-ink:#ffffff; --seal-soft:rgba(11,122,128,.10);
  --ok:#17803d; --ok-soft:rgba(23,128,61,.10); --info:#0369a1; --info-soft:rgba(3,105,161,.09);
  --glow:rgba(14,165,183,.14) }
.btn-seal{background:linear-gradient(135deg,#2dd4bf,#22d3ee)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .btn-seal{background:linear-gradient(135deg,#0b7a80,#0e7490)}}
:root[data-theme="light"] .btn-seal{background:linear-gradient(135deg,#0b7a80,#0e7490)}

/* Version B additions. Loaded after ../site.css and reuses its tokens. */

/* role value cards */
.role{display:grid;gap:14px;align-content:start;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.role .who{font:500 .72rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--seal)}
.role ul{margin:0;padding-left:1.1em;display:grid;gap:8px;color:var(--muted);font-size:.95rem}
.role .ask{font:400 .82rem/1.5 var(--f-mono);color:var(--ink);background:var(--bg-2);border-left:2px solid var(--seal);border-radius:0 8px 8px 0;padding:8px 12px}

/* without / with */
.ww{display:grid;gap:14px}
.ww-row{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.ww-row>div{padding:20px 22px;display:grid;gap:6px;align-content:start;border-right:1px solid var(--line);min-width:0}
.ww-row>div:last-child{border-right:0}
.ww-row .k{font:500 .68rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.ww-row .no .k{color:var(--stop)} .ww-row .yes .k{color:var(--ok)} .ww-row .out .k{color:var(--seal)}
.ww-row p{color:var(--muted);font-size:.94rem}
.ww-row h3{font-size:1.02rem}
@media (max-width:860px){.ww-row{grid-template-columns:1fr}.ww-row>div{border-right:0;border-bottom:1px solid var(--line)}.ww-row>div:last-child{border-bottom:0}}

/* three lists */
.list3 ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.list3 li{display:grid;gap:2px;font-size:.95rem}
.list3 li b{font-weight:500}
.list3 li span{color:var(--muted)}

/* compare table tweaks */
.cmp td{white-space:normal!important}
.cmp td:first-child{color:var(--muted);font-weight:500;width:22%}
.cmp td.us{color:var(--ink)}
.cmp th.us{color:var(--seal)}
.note{font-size:.84rem;color:var(--dim);margin-top:14px;max-width:60em}

/* guided Q&A */
.qa{display:grid;grid-template-columns:280px 1fr;gap:0;border:1px solid var(--line-2);border-radius:16px;overflow:hidden;background:var(--panel)}
.qa-q{border-right:1px solid var(--line);padding:14px;display:grid;gap:6px;align-content:start;background:var(--panel-2)}
.qa-q button{all:unset;cursor:pointer;padding:10px 12px;border-radius:9px;font-size:.9rem;color:var(--muted);line-height:1.4}
.qa-q button:hover{color:var(--ink);background:var(--panel)}
.qa-q button[aria-pressed="true"]{color:var(--ink);background:var(--panel);box-shadow:inset 2px 0 0 var(--seal)}
.qa-q button:focus-visible{outline:2px solid var(--seal)}
.qa-a{padding:22px;display:grid;gap:12px;align-content:start;min-height:340px}
.qa-a .msg{max-width:100%}
@media (max-width:820px){.qa{grid-template-columns:1fr}.qa-q{border-right:0;border-bottom:1px solid var(--line)}}

/* walkthrough tabs */
.tour{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start}
.tour-steps{display:grid;gap:8px;position:sticky;top:100px}
.tour-steps button{all:unset;cursor:pointer;display:grid;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.tour-steps button .n{font:500 .68rem var(--f-mono);color:var(--seal);letter-spacing:.1em}
.tour-steps button .t{font-weight:500;font-size:.95rem}
.tour-steps button[aria-selected="true"]{border-color:var(--seal);box-shadow:0 0 0 1px var(--seal)}
.tour-steps button:focus-visible{outline:2px solid var(--seal);outline-offset:2px}
.tour-pane{display:grid;gap:18px}
.tour-pane[hidden]{display:none}
.tour-pane .why{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tour-pane .why div{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--panel)}
.tour-pane .why b{display:block;font:500 .68rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--seal);margin-bottom:4px}
.tour-pane .why p{font-size:.9rem;color:var(--muted)}
.tour-nav{display:flex;justify-content:space-between;gap:12px}
@media (max-width:900px){.tour{grid-template-columns:1fr}.tour-steps{position:static;grid-template-columns:1fr 1fr}.tour-pane .why{grid-template-columns:1fr}}
@media (max-width:480px){.tour-steps{grid-template-columns:1fr}}
.approve{border:1px solid var(--warn);background:var(--warn-soft);border-radius:12px;padding:14px;display:grid;gap:10px;font-size:.9rem}
.approve .btns{display:flex;gap:8px;flex-wrap:wrap}
.approve .btns span{border:1px solid var(--line-2);border-radius:8px;padding:5px 12px;font-size:.84rem;background:var(--panel)}
.approve .btns span.go{background:var(--seal);color:var(--seal-ink);border-color:var(--seal)}

/* 30-second strip */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.strip>div{display:grid;gap:8px;padding:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.strip .n{font:500 2rem/1 var(--f-sans);color:var(--seal);letter-spacing:-.03em}
.strip p{color:var(--muted);font-size:.95rem}
@media (max-width:820px){.strip{grid-template-columns:1fr}}

/* walkthrough v2: agents + workspace mocks */
.tag-row{display:flex;gap:6px;flex-wrap:wrap}
.tour-steps .n .lt{color:var(--info)}
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.ag{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--panel);display:grid;gap:6px;align-content:start}
.ag h3{font-size:.98rem;display:flex;align-items:center;gap:8px}
.ag p{font-size:.86rem;color:var(--muted)}
.ag .reads{font:400 .72rem/1.5 var(--f-mono);color:var(--dim)}
.ag.front{border-color:var(--seal);grid-column:1/-1}
.trace{display:grid;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.trace div{display:grid;grid-template-columns:118px 1fr auto;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);font-size:.88rem}
.trace div:last-child{border-bottom:0}
.trace .who{font:500 .68rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--seal)}
.trace .t{font:400 .72rem var(--f-mono);color:var(--dim)}
@media (max-width:600px){.trace div{grid-template-columns:1fr}.trace .t{display:none}}
.kb{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px;overflow-x:auto}
.kb .col{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:10px;display:grid;gap:8px;align-content:start;min-width:150px}
.kb .col>b{font:500 .68rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.kb .tk{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:.82rem;display:grid;gap:4px}
.kb .tk small{color:var(--dim);font-family:var(--f-mono);font-size:.68rem}
.kb .tk.late{border-color:var(--stop)}
.gantt{display:grid;gap:8px;font-size:.82rem}
.gantt .row{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center}
.gantt .track{position:relative;height:18px;background:var(--bg-2);border-radius:6px}
.gantt .bar{position:absolute;top:3px;bottom:3px;border-radius:5px;background:var(--seal)}
.gantt .bar.ok{background:var(--ok)} .gantt .bar.late{background:var(--stop)}
.gantt .today{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--info)}
.gantt .scale{display:grid;grid-template-columns:150px 1fr;gap:10px;font:400 .68rem var(--f-mono);color:var(--dim)}
.gantt .scale span:last-child{display:flex;justify-content:space-between}
@media (max-width:600px){.gantt .row,.gantt .scale{grid-template-columns:96px 1fr}}
.goal{display:grid;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.goal .top{display:flex;justify-content:space-between;gap:10px;font-size:.9rem}
.goal .meter{height:8px;border-radius:99px;background:var(--bg-2);overflow:hidden}
.goal .meter i{display:block;height:100%;background:var(--ok);border-radius:99px}
.goal .meter i.warn{background:var(--warn)}
.goal small{color:var(--dim);font-family:var(--f-mono);font-size:.7rem}
.mini3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:820px){.mini3{grid-template-columns:1fr}}
.mini3>div{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--panel);display:grid;gap:8px;align-content:start;font-size:.86rem}
.mini3 h4{font:500 .7rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--seal);margin:0}
.ts{width:100%;min-width:0;font-size:.8rem}
.ts td,.ts th{padding:6px 8px}
.ts td:first-child{white-space:normal}