/* TUNAI for agents: /agents and /agents/dashboard. Ported from design/mockups/web-final/agents.html and agents-keys.html (2026-10-17). */
.ahero{background:#111827;color:#F3F0E7;padding:72px 0 80px;border-bottom:1.5px solid var(--rule);overflow:hidden}
.ahero .mono{color:#A7AEBC}
.ahero .grid{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center}
.ahero mark{background:var(--lime);color:#111827;padding:0 .06em}
.ahero .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.ahero .btn.ghost{color:#F3F0E7;box-shadow:inset 0 0 0 1.5px #A7AEBC}
.chat{background:#0B1019;border:1.5px solid #3A4152;box-shadow:10px 10px 0 var(--cobalt);font:500 .88rem/1.55 var(--f-m);color:#F3F0E7}
.chat .bar2{display:flex;gap:8px;align-items:center;padding:10px 14px;border-bottom:1.5px solid #3A4152;color:#A7AEBC;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.chat .bar2 i{width:9px;height:9px;background:#3A4152;display:block}
.chat .body{padding:18px 18px 22px;display:grid;gap:14px}
.chat .u{color:#DFFF68}.chat .u::before{content:"> ";color:#A7AEBC}
.chat .tool{border:1.5px solid #3A4152;padding:8px 12px;color:#A7AEBC}.chat .tool b{color:#8FA4FF;font-weight:600}
.chat .a{color:#F3F0E7}.chat .a a{color:#FF8A80}
.keyrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:34px;font:500 .72rem var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:#A7AEBC}
.keyrow span{border:1.5px solid #3A4152;padding:6px 10px}
.code{position:relative;background:#111827;color:#F3F0E7;border:1.5px solid #111827;box-shadow:8px 8px 0 var(--cobalt);padding:20px 22px;font:500 .9rem/1.6 var(--f-m);overflow:auto;white-space:pre}
.code .c{color:#7C8699}.code .k{color:#DFFF68}
.copy{position:absolute;top:10px;right:10px;font:700 .68rem var(--f-m);letter-spacing:.09em;text-transform:uppercase;background:var(--lime);color:#111827;border:0;padding:8px 12px;cursor:pointer;min-height:36px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:34px}
.steps .card b.n{font:900 3rem/1 var(--f-d);font-stretch:62%;color:var(--cobalt);display:block}
.pane[hidden]{display:none}
.toollist{border:1.5px solid var(--rule);background:var(--base)}
.toolrow{display:grid;grid-template-columns:230px 1fr 130px;gap:20px;align-items:start;padding:16px 22px;border-bottom:1px solid var(--soft)}
.toolrow:last-child{border:0}
.toolrow code{font:600 .9rem var(--f-m);color:var(--cobalt)}
.toolrow .s{color:var(--ink2);font-size:.92rem}
.ex{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ex .card{display:grid;gap:12px;align-content:start}
.ex .q{font:700 1.15rem/1.3 var(--f-d)}
.ex .q::before{content:"You: ";color:var(--coral)}
.ex .r{font-size:.95rem;border-left:4px solid var(--cobalt);padding-left:14px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{display:flex;flex-direction:column;gap:12px}
.plan.hi{background:var(--lime);color:#111827;box-shadow:var(--shadow)}
.plan.hi .mono,.plan.hi .muted{color:#111827}
.plan ul{list-style:none;display:grid;gap:8px;font-size:.95rem}
.plan li::before{content:"";display:inline-block;width:9px;height:9px;background:var(--cobalt);margin-right:10px}
.plan.hi li::before{background:#111827}
.plan .big-num{font-size:3.4rem}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.faq details{border-bottom:1.5px solid var(--rule);padding:18px 0}
.faq summary{font:700 1.1rem var(--f-d);cursor:pointer;min-height:44px;display:flex;align-items:center}
.faq p{margin-top:8px;max-width:44em;color:var(--ink2)}
.final{background:var(--cobalt);color:#fff;padding:80px 0;text-align:left}
.final .btn{background:var(--lime);color:#111827}
@media(max-width:1000px){.ahero .grid,.steps,.ex,.plans,.trust{grid-template-columns:1fr}.toolrow{grid-template-columns:1fr;gap:6px}.ahero .ag{display:none}}
.dash{display:grid;grid-template-columns:7fr 5fr;gap:28px;align-items:start}
.reveal{background:var(--lime);color:#111827;border:1.5px solid #111827;box-shadow:var(--shadow);padding:24px}
.reveal .mono{color:#111827}
.keybox{display:flex;gap:10px;margin:14px 0;flex-wrap:wrap}
.keybox code{flex:1 1 280px;background:#111827;color:var(--lime);padding:14px 16px;font:600 .95rem var(--f-m);overflow-wrap:anywhere}
.keybox button{background:#111827;color:var(--lime);border:0;padding:0 18px;min-height:48px;font:700 .72rem var(--f-m);letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
.krow{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--soft)}
.krow:last-child{border:0}
.krow code{font:600 .88rem var(--f-m)}
.krow .s{color:var(--ink2);font-size:.86rem}
.krow .acts{display:flex;gap:8px;flex-wrap:wrap}
.use{display:grid;gap:14px}
.meter{display:grid;grid-template-columns:150px 1fr 90px;gap:14px;align-items:center;font-size:.92rem}
.meter .tr{height:14px;background:var(--sand);position:relative}
.meter .tr i{position:absolute;inset:0 auto 0 0;background:var(--cobalt)}
.meter .tr i.warn{background:var(--amber)}
.meter .v{font:600 .8rem var(--f-m);text-align:right}
.upsell{background:var(--lav);padding:22px;border:1.5px solid var(--rule)}
@media(max-width:700px){.krow{grid-template-columns:1fr}}
@media(max-width:1000px){.dash{grid-template-columns:1fr}.meter{grid-template-columns:1fr}.meter .v{text-align:left}}

.pane[hidden],[hidden]{display:none!important}
.chat .a{white-space:normal}
.btn.lime{background:var(--lime);color:#111827}
.plan ul{margin:0;padding:0}
@media(max-width:700px){.krow{grid-template-columns:1fr}}
.ahero .grid>*,.steps>*,.ex>*,.plans>*,.trust>*,.dash>*{min-width:0}
.code,.toollist,.card{max-width:100%}
.ahero h1{overflow-wrap:anywhere}
@media(max-width:700px){.ahero{padding:44px 0 56px}.ahero h1{font-size:clamp(2.6rem,13vw,4rem)}.code{font-size:.78rem}}