/* Voza: one stylesheet for the site, the dashboard and the administration.
   The look comes from the Strata template: a dark background with a grid, glass panels,
   violet buttons and cyan accents. The landing hero keeps the template's canvas, whose sizes
   follow the viewport height (--u); everything else uses ordinary responsive sizes. */

:root{
  --bg:#0d0c11; --ink:#fff; --nav:#b9b8bb; --muted:#d3d3d7; --soft:#9d9ca3;
  --ai:#9ff0ec; --kick:#bdf7ee; --logos:#bcbcbf;
  --violet:linear-gradient(135deg,#4d19b1,#6f5adc);
  --line:rgba(255,255,255,.12); --line-strong:rgba(255,255,255,.2);
  --ok:#8cf0b4; --warn:#ffd88a; --danger:#ff9d9d;
  --radius:18px;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"DM Sans",Inter,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:clamp(16px,5vw,40px);
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:380;-webkit-font-smoothing:antialiased}
body{min-height:100vh;overflow-x:hidden;position:relative;line-height:1.5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;background-position:center top}
a{color:inherit;text-decoration:none}
svg{display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0}
b,strong{font-weight:600}
:focus-visible{outline:2px solid var(--ai);outline-offset:2px}
::selection{background:rgba(111,90,220,.6)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.glass{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px) brightness(1.15) saturate(.8);-webkit-backdrop-filter:blur(8px) brightness(1.15) saturate(.8);
  box-shadow:inset 0 0 24px rgba(255,255,255,.04)}
.gradient-text{background:linear-gradient(90deg,#fff 40%,#8d8c96 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.soft{color:var(--soft)}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}
.link{color:var(--ai)}
.link:hover{text-decoration:underline}

/* ---------- Brand ---------- */
/* The hand-drawn «voza» and «API» in spaced capitals. --b is the type size the brand stands in for: the wordmark's
   letters are .72 of it tall (its 42 units of drawing), and «API» is half of it, raised by the round letters'
   overshoot (one unit) so it sits on the flat letters' baseline. «API»'s box keeps to its capitals and drops the
   tracking after the last letter, so bars centre the drawing and the focus ring hugs it. */
.brand{--b:28px;display:inline-flex;align-items:baseline;gap:calc(var(--b)*.3);color:var(--ink)}
.wordmark{flex:none;width:calc(var(--b)*.72*155/42);height:calc(var(--b)*.72)}
.brand-api{position:relative;top:calc(var(--b)*-.72/42);margin-right:-.16em;font-size:calc(var(--b)*.5);font-weight:600;line-height:.73;letter-spacing:.16em;color:var(--ai)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:999px;
  border:1px solid transparent;font-size:15px;font-weight:500;line-height:1;color:#fff;white-space:nowrap;cursor:pointer;
  transition:transform .15s,box-shadow .2s,background-color .2s,border-color .2s}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--violet);box-shadow:0 8px 32px rgba(93,50,200,.4),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:hover{box-shadow:0 10px 40px rgba(93,50,200,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-glass{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
.btn-glass:hover{background:rgba(255,255,255,.08)}
.btn-danger{border-color:rgba(255,157,157,.4);color:var(--danger)}
.btn-danger:hover{background:rgba(255,157,157,.08)}
.btn-sm{height:34px;padding:0 14px;font-size:14px}
.btn-block{width:100%}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff;cursor:pointer}
.icon-btn svg{width:18px;height:18px}

/* ---------- Forms ---------- */
.form{display:grid;gap:18px}
.field{display:grid;align-content:start;gap:7px}
.field label,.label{font-size:14px;font-weight:500;color:var(--muted)}
.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.label-row a{font-size:13.5px}
.input,.field input,.field select,.field textarea{width:100%;height:46px;padding:0 14px;border-radius:12px;font-size:15px;color:#fff;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);transition:border-color .2s,box-shadow .2s}
.field textarea{height:auto;min-height:110px;padding:12px 14px;line-height:1.5;resize:vertical}
select.input,.field select{appearance:none;padding-right:40px;background-repeat:no-repeat;background-position:right 14px center;background-size:12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23b9b8bb' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E")}
option{background:#17151f;color:#fff}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ai);box-shadow:0 0 0 3px rgba(159,240,236,.15)}
.field .is-invalid{border-color:rgba(255,157,157,.7)}
.field input[readonly]{color:var(--soft);background:rgba(255,255,255,.02)}
.field-hint{font-size:13px;color:var(--soft)}
.field-error{font-size:13px;color:var(--danger)}
.check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);cursor:pointer}
.check input{width:18px;height:18px;accent-color:#6f5adc}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
@media (max-width:640px){.form-row{grid-template-columns:1fr}}

/* ---------- Feedback ---------- */
.alert{padding:14px 16px;border:1px solid;border-radius:12px;font-size:14.5px;line-height:1.55}
.alert-ok{background:rgba(140,240,180,.07);border-color:rgba(140,240,180,.3);color:#d8fbe6}
.alert-warn{background:rgba(255,216,138,.07);border-color:rgba(255,216,138,.32);color:#ffedcc}
.alert-danger{background:rgba(255,157,157,.07);border-color:rgba(255,157,157,.35);color:#ffe0e0}
.alert-info{background:rgba(159,240,236,.06);border-color:rgba(159,240,236,.28);color:#dcfbf9}
.alert a{text-decoration:underline}
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border:1px solid;border-radius:999px;font-size:12.5px;font-weight:500;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-trial{color:var(--ai);border-color:rgba(159,240,236,.35);background:rgba(159,240,236,.06)}
.badge-active{color:var(--ok);border-color:rgba(140,240,180,.35);background:rgba(140,240,180,.06)}
.badge-suspended,.badge-expired{color:var(--danger);border-color:rgba(255,157,157,.38);background:rgba(255,157,157,.06)}
.badge-muted{color:var(--soft);border-color:var(--line)}

/* ---------- Panels, tables, code ---------- */
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.card{border-radius:var(--radius);padding:24px}
.card h2{font-family:var(--display);font-size:20px;font-weight:500;letter-spacing:-.01em}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.card-head p{margin-top:4px;color:var(--soft);font-size:14.5px}
.empty{padding:28px 0 8px;text-align:center;color:var(--soft);font-size:15px}
.table-wrap{overflow-x:auto;margin:0 -24px;padding:0 24px}
.table{width:100%;border-collapse:collapse;font-size:14.5px}
.table th{padding:0 12px 10px;text-align:left;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);white-space:nowrap}
.table td{padding:14px 12px;border-top:1px solid var(--line);vertical-align:middle}
.table th:first-child,.table td:first-child{padding-left:0}
.table th:last-child,.table td:last-child{padding-right:0;text-align:right}
.table td small{display:block;color:var(--soft);font-size:13px}
/* On phones, a .table-stack shows each row as a small card, with the column name before each value. */
@media (max-width:640px){
  .table-stack thead{display:none}
  .table-stack,.table-stack tbody,.table-stack tr{display:block}
  .table-stack tr{padding:12px 0;border-top:1px solid var(--line)}
  .table-stack td,.table-stack td:first-child,.table-stack td:last-child{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:4px 0;border:0;text-align:right}
  .table-stack td::before{content:attr(data-label);color:var(--soft);font-size:13px;text-align:left}
  .table-stack td:last-child{justify-content:flex-start;padding-top:10px}
  .table-stack td:last-child::before{content:none}
}
.dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 24px;font-size:14.5px}
.dl dt{color:var(--soft)}
.dl dd{overflow-wrap:anywhere}
code{font-family:var(--mono);font-size:.92em}
:not(pre)>code{padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}
.code{padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.38);
  font-family:var(--mono);font-size:13.5px;line-height:1.65;color:#e7e6ea;overflow-x:auto;tab-size:2}
.code .k{color:#c9bcff}
.code .s{color:#a6f3dc}
.code .c{color:#7f7e88}
.code .n{color:#ffd6a5}
.secret{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border:1px dashed rgba(159,240,236,.5);border-radius:12px;background:rgba(0,0,0,.4)}
.secret code{flex:1;min-width:0;padding:0;border:0;background:none;color:var(--ai);font-size:14px;overflow-wrap:anywhere}

/* ---------- Menus (landing, docs) ---------- */
.menu-btn{display:none}
.menu{display:none;position:absolute;top:100%;left:var(--gutter);right:var(--gutter);z-index:30;flex-direction:column;padding:12px;border-radius:20px;background:rgba(20,18,28,.92)}
.menu.open{display:flex}
.menu a{padding:14px 12px;border-radius:12px;color:var(--nav);font-size:16px}
.menu a:hover{background:rgba(255,255,255,.06);color:#fff}

/* ---------- Landing hero (the Strata canvas) ---------- */
/* The canvas follows the viewport height, and its width when the window is narrower than the design. */
.landing{--u:max(.468px,min(calc(100vh / 1455),calc((100vw - 20px) / 2048)));--f:clamp(.55px,.449px + .0284vw,.76px);background-size:calc(96*var(--u)) calc(96*var(--u))}
@supports (height:100dvh){.landing{--u:max(.468px,min(calc(100dvh / 1455),calc((100vw - 20px) / 2048)))}}
.hero-header{position:absolute;top:0;left:0;right:0;z-index:20;width:min(100%,calc(2048*var(--u)));height:calc(148*var(--u));margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;padding:0 calc(150*var(--u))}
.hero-header .brand{--b:calc(52*var(--u))}
.hero-nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:calc(48*var(--u));font-size:calc(26*var(--u));color:var(--nav)}
.hero-nav a,.hero-right a{white-space:nowrap;transition:color .2s}
.hero-nav a:hover,.hero-right .login:hover{color:#fff}
.hero-right{display:flex;align-items:center;gap:calc(40*var(--u));font-size:calc(26*var(--u));color:var(--nav)}
.hero-right .pill{display:inline-grid;place-items:center;width:calc(250*var(--u));height:calc(63*var(--u));border-radius:999px;color:#fff}
.hero-stage{position:relative;width:calc(2048*var(--u));height:calc(1455*var(--u));margin:0 auto}
.hero-stage>*,.hero-art,.hero-card{position:absolute}
/* The template's vignette, as wide as the viewport and as tall as the hero. */
.hero-stage::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,transparent 30%,var(--bg) 100%)}
.hero-hl{z-index:2;left:calc(150*var(--u));top:calc(290*var(--u));font-family:var(--display);font-weight:380;
  font-size:calc(104*var(--u));line-height:calc(122*var(--u));letter-spacing:-.025em}
.hero-hl .ln{display:block;overflow:hidden;white-space:nowrap;height:calc(122*var(--u))}
.hero-hl .ln span{display:block;padding-right:.1em;background:linear-gradient(90deg,#fff 40%,#8d8c96 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{z-index:2;left:calc(150*var(--u));top:calc(700*var(--u));width:calc(880*var(--u));font-size:calc(29.5*var(--u));line-height:1.5;color:var(--muted);font-weight:340}
.hero-btns{z-index:2;left:calc(150*var(--u));top:calc(850*var(--u));display:flex;gap:calc(22*var(--u))}
.hero-btn{display:grid;place-items:center;height:calc(85*var(--u));padding:0 calc(46*var(--u));border-radius:999px;font-size:calc(27*var(--u));font-weight:500;color:#fff;white-space:nowrap}
.hero-btn.primary{background:var(--violet);box-shadow:0 calc(8*var(--u)) calc(40*var(--u)) rgba(93,50,200,.45),inset 0 1px 0 rgba(255,255,255,.25)}
.hero-btn.glass:hover{background:rgba(255,255,255,.06)}
.hero-stats{z-index:2;left:calc(150*var(--u));top:calc(1030*var(--u));display:flex;align-items:center}
.hero-stat{padding:0 calc(52*var(--u))}
.hero-stat:first-child{padding-left:0}
.hero-stat+.hero-stat{border-left:1px solid rgba(255,255,255,.18)}
.hero-stat b{display:block;font:380 calc(50*var(--u))/1.1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.hero-stat span{display:block;margin-top:calc(8*var(--u));font-size:calc(25*var(--u));color:var(--nav);white-space:nowrap}
.hero-art{z-index:1;left:calc(990*var(--u));top:calc(140*var(--u));width:calc(1120*var(--u));height:calc(1120*var(--u));
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 38%,transparent 69%);mask-image:radial-gradient(circle at 50% 50%,#000 38%,transparent 69%)}
.hero-card{z-index:5;width:calc(451*var(--u));height:calc(201*var(--u));display:flex;gap:calc(18*var(--u));padding:calc(22*var(--u)) calc(18*var(--u));border-radius:calc(18*var(--u))}
.hero-card .ic{flex:none;display:grid;place-items:center;width:calc(63*var(--u));height:calc(63*var(--u));border-radius:calc(14*var(--u));background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
.hero-card .ic svg{width:60%;height:60%}
.hero-card small{display:block;margin-top:calc(4*var(--u));font-size:calc(22*var(--u));font-weight:500;color:var(--kick);letter-spacing:.04em}
.hero-card p{margin-top:calc(12*var(--u));font-size:calc(24*var(--u));line-height:1.32;font-weight:420;white-space:nowrap}
.c1{left:calc(1010*var(--u));top:calc(360*var(--u))}
.c2{left:calc(1590*var(--u));top:calc(900*var(--u))}
.hero-logos{z-index:5;left:0;right:0;top:calc(1318*var(--u));display:flex;justify-content:center;align-items:center;gap:calc(100*var(--u));
  font-family:var(--display);font-size:calc(44*var(--u));color:var(--logos)}
.hero-logos .lbl{font-family:var(--sans);font-size:calc(21*var(--u));letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.hero-logos .a,.hero-logos .n{font-weight:600;font-style:italic}
.hero-logos .l{font-weight:400;letter-spacing:.14em}
.hero-logos .h{font-weight:700;font-style:italic;letter-spacing:.04em}

/* The template's video, with its poster behind it; the video hides for people who prefer less motion. */
.hero-art video,.hero-art img{display:block;width:100%;height:100%;object-fit:cover}
.hero-art img{position:absolute;inset:0;z-index:-1}
@media (prefers-reduced-motion:reduce){.hero-art video{display:none}}

/* Hidden until the entrance animation runs. */
.intro [data-in]{opacity:0}

/* The canvas becomes a single column on portrait, short and narrow screens. */
@media (max-aspect-ratio:6/5),(max-height:539px),(max-width:1100px){
  .landing{--u:var(--f)}
  .hero-header{position:relative;width:100%;height:auto;padding:calc(36*var(--u)) var(--gutter)}
  .hero-nav,.hero-right .login,.hero-right .pill{display:none}
  .hero-header .brand{--b:calc(52*var(--u)*1.3)}
  .hero-header .menu-btn{display:grid}
  .hero-stage{width:100%;height:auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(12px,4vh,40px) var(--gutter) 40px}
  .hero-stage>*{position:static}
  .hero-hl{font-size:min(calc(104*var(--u)),9.4vw);line-height:1.17}
  .hero-hl .ln{height:1.17em}
  .hero-sub{width:min(100%,calc(800*var(--u)*1.2));margin-top:24px;font-size:max(16px,calc(29.5*var(--u)))}
  .hero-btns{margin-top:28px;flex-wrap:wrap;justify-content:center}
  .hero-btn{height:max(52px,calc(85*var(--u)));padding:0 max(28px,calc(46*var(--u)));font-size:max(16px,calc(27*var(--u)))}
  .hero-stats{margin-top:36px;flex-wrap:wrap;justify-content:center;row-gap:16px}
  .hero-stat{padding:0 clamp(10px,3vw,28px)}
  .hero-stat:last-child{padding-right:0}
  .hero-stat b{font-size:max(24px,calc(50*var(--u)))}
  .hero-stat span{font-size:max(12.5px,calc(23*var(--u)))}
  .flowart{position:relative;width:min(100%,640px);aspect-ratio:1;margin-top:24px}
  .hero-art{position:absolute;inset:0;width:100%;height:100%}
  .hero-card{position:absolute;width:min(64%,calc(451*var(--u)*1.35));height:auto;min-height:calc(201*var(--u)*1.2);padding:14px;gap:12px;text-align:left}
  .hero-card .ic{width:max(40px,calc(63*var(--u)));height:max(40px,calc(63*var(--u)))}
  .hero-card small{font-size:max(11px,calc(22*var(--u)))}
  .hero-card p{font-size:max(13px,calc(24*var(--u)));white-space:normal}
  .hero-card p br{display:none}
  .c1{left:0;top:10%}
  .c2{right:0;left:auto;top:auto;bottom:8%}
  .hero-logos{margin-top:20px;flex-wrap:wrap;gap:10px 28px;font-size:max(20px,calc(44*var(--u)))}
  .hero-logos .lbl{flex-basis:100%;font-size:12px}
}
@media (min-aspect-ratio:6/5) and (min-height:540px) and (min-width:1101px){.flowart{display:contents}}

/* ---------- Landing sections ---------- */
.section{position:relative;z-index:1;padding:clamp(80px,11vw,140px) var(--gutter) 0;scroll-margin-top:12px}
.wrap{max-width:1120px;margin:0 auto}
.section-head{max-width:720px}
.section-head.center{margin:0 auto;text-align:center}
.kicker{display:inline-block;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--kick)}
.h2{margin-top:14px;font-family:var(--display);font-weight:380;font-size:clamp(32px,4.2vw,54px);line-height:1.08;letter-spacing:-.028em;
  background:linear-gradient(90deg,#fff 40%,#8d8c96 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin-top:18px;font-size:clamp(16px,1.35vw,18.5px);line-height:1.6;color:var(--muted);font-weight:340}
.steps,.features{margin-top:48px;display:grid;gap:18px}
.steps{grid-template-columns:repeat(4,minmax(0,1fr))}
.features{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Voice agents on the landing only; the dashboard keeps its shared components unchanged. */
.landing .agent-eyebrow{z-index:2;left:calc(150*var(--u));top:calc(225*var(--u));font-size:calc(24*var(--u))}
.landing .agent-overview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.landing .agent-docs{margin-top:28px;gap:16px}
.landing .agent-contract{padding:clamp(22px,3vw,36px);border-radius:var(--radius)}
.landing .agent-contract-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid var(--line)}
.landing .agent-contract-head .kicker{font-size:11px;letter-spacing:.1em}
.landing .agent-contract-part{padding:22px 0 0}
.landing .agent-contract-label{font-family:var(--display);font-size:24px;font-weight:500;letter-spacing:-.02em}
.landing .agent-contract-part p{margin-top:6px;color:var(--muted);font-size:15px}
.landing .agent-contract-part small{display:block;margin-top:6px;color:var(--soft);font-size:13px;line-height:1.6}
.landing .agent-contract-link{display:flex;align-items:center;gap:16px;margin-top:22px;color:var(--ai);font-size:13px}
.landing .agent-contract-link>span:first-child{display:grid;place-items:center;width:28px;height:40px;border-left:1px solid var(--line-strong);font-size:22px}
.landing .agent-contract-link>span:last-child{display:flex;flex-wrap:wrap;gap:8px}
.landing .agent-contract-voza{padding:22px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--violet)}
.landing .agent-contract-voza .brand{--b:32px;width:max-content}
.landing .agent-contract-voza small{color:var(--muted)}
.landing .agent-capabilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.landing .agent-capabilities article{padding:28px;border-radius:var(--radius)}
.landing .agent-capabilities .kicker{font-size:11px}
.landing .agent-capabilities h3{margin-top:16px;font-family:var(--display);font-size:23px;font-weight:450;line-height:1.2;letter-spacing:-.02em}
.landing .agent-capabilities p{margin-top:12px;font-size:15px;line-height:1.65;color:var(--soft)}
.landing .agent-cost-note{margin-top:22px;padding:18px 22px;border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--muted);font-size:15px;line-height:1.6}
@media (max-aspect-ratio:6/5),(max-height:539px),(max-width:1100px){
  .landing .agent-eyebrow{margin-bottom:18px;font-size:12px}
}
@media (max-width:980px){
  .landing .agent-overview{grid-template-columns:1fr}
  .landing .agent-capabilities{grid-template-columns:1fr}
}

/* ---------- Bento cards ----------
   The Figma kit's «Bento Card» (641 × 641): a 641 × 461 illustration above the text, in Voza's violet (--bento) where
   the kit has orange. The illustrations keep the Figma measurements: --k is one Figma pixel at the card's width, and each
   piece (.b) sits at --x/--y from the frame's centre, with its size (--w, --h), rotation (--r) and flip (--s). */
.bento{--bento:#6f5adc;--bento-ink:#a898ff;display:flex;flex-direction:column;overflow:hidden;border-radius:20px;
  background:#080c0d;border:1px solid rgba(255,255,255,.08)}
/* As in Figma, the illustration runs on behind the text, down to the 641 × 641 card's edge (180 of 461 below it). */
.bento-art{--k:calc(100cqw / 641);position:relative;aspect-ratio:641/461;container-type:inline-size;clip-path:inset(0 0 -39.05% 0);user-select:none}
.bento-art::after{content:"";position:absolute;top:100%;left:0;right:0;height:39.05%;background:linear-gradient(rgba(8,12,13,0),#080c0d)}
.bento-art img{max-width:none}
.bento-art .b{position:absolute;left:calc(50% + var(--x,0) * var(--k));top:calc(50% + var(--y,0) * var(--k));
  width:calc(var(--w) * var(--k));height:calc(var(--h,var(--w)) * var(--k));translate:-50% -50%;rotate:var(--r,0deg);scale:var(--s,1)}
.bento-art .b-cipher{position:absolute;left:50%;top:calc(50% + var(--y) * var(--k));width:calc(582 * var(--k));translate:-50% 0;
  font-size:calc(23.05 * var(--k));line-height:1.5;letter-spacing:-.02em;text-align:center;white-space:pre;
  color:transparent;-webkit-background-clip:text;background-clip:text;opacity:var(--o);
  background-image:radial-gradient(closest-side,rgba(138,138,138,.4) 43%,rgba(78,79,79,.4) 62%,rgba(47,49,50,.4) 71%,rgba(17,19,20,.4) 81%)}
.bento-art .b-cipher.wide{background-image:radial-gradient(closest-side,rgba(138,138,138,.4) 65%,rgba(78,79,79,.4) 83%,rgba(47,49,50,.4) 91%,rgba(17,19,20,.4))}
.bento-art .b-fade{position:absolute;inset:calc(289 * var(--k)) calc(-1.18 * var(--k)) calc(-125.28 * var(--k)) calc(1 * var(--k));
  background:linear-gradient(rgba(15,20,20,0),#0f1314 30.9%,#070b0d)}
.bento-art .b-dots{border-radius:50%;opacity:var(--o,.5);
  background:radial-gradient(circle,#979797 max(.5px,calc(1 * var(--k))),transparent max(.8px,calc(1.4 * var(--k)))) 50% 50%/calc(18.09 * var(--k)) calc(18.09 * var(--k));
  -webkit-mask:radial-gradient(closest-side,#000,transparent 63%);mask:radial-gradient(closest-side,#000,transparent 63%)}
.bento-art .b-dots.halo{-webkit-mask:radial-gradient(closest-side,transparent,#000 34%,transparent);mask:radial-gradient(closest-side,transparent,#000 34%,transparent)}
.bento-art .b-ring{border-radius:50%;opacity:var(--o,.5);border:calc(var(--bw,2.166) * var(--k)) solid rgba(255,255,255,var(--ba,.4));
  background:linear-gradient(rgba(255,255,255,var(--ga,.05)),rgba(255,255,255,0))}
.bento-art .b-blur{-webkit-backdrop-filter:blur(calc(18 * var(--k)));backdrop-filter:blur(calc(18 * var(--k)))}
.bento-art .b-arc{border-radius:50%;border:calc(1.663 * var(--k)) solid var(--bento);
  background:linear-gradient(rgba(49,49,49,.1),rgba(14,18,19,.03) 63.9%);box-shadow:inset 0 calc(3.3 * var(--k)) calc(20 * var(--k)) rgba(255,255,255,.1)}
.bento-art .b-disc{border-radius:50%;background:#030708;border:calc(1.853 * var(--k)) solid rgba(255,255,255,var(--ba,.16));
  box-shadow:0 0 0 calc(11.1 * var(--k)) rgba(0,0,0,.25),inset 0 0 calc(3.7 * var(--k)) rgba(255,255,255,.25)}
.bento-art .b-hole{border-radius:50%;background:#030708;
  box-shadow:0 0 calc(var(--blur,96) * var(--k)) calc(var(--spread,90) * var(--k)) rgba(8,8,8,.5),inset 0 0 calc(3.3 * var(--k)) rgba(255,255,255,.25)}
.bento-art .b-tile{border-radius:calc(20.4 * var(--k));border:calc(var(--bw,2.19) * var(--k)) solid rgba(255,255,255,.1);
  background:linear-gradient(#1e1e1e,#0e1213);box-shadow:inset 0 calc(2.16 * var(--k)) calc(13 * var(--k)) rgba(255,255,255,.1)}
.bento-art .b-chip{background:linear-gradient(#373737,#0e1213);box-shadow:inset 0 calc(3 * var(--k)) calc(17.8 * var(--k)) rgba(255,255,255,.1)}
.bento-art .b-glass{border:calc(1.457 * var(--k)) solid rgba(255,255,255,.5);background:linear-gradient(#0e1213 45.7%,rgba(14,18,19,.2));
  box-shadow:0 calc(7.2 * var(--k)) calc(32 * var(--k)) rgba(0,0,0,.25),inset 0 calc(2.9 * var(--k)) calc(17.5 * var(--k)) rgba(255,255,255,.1)}
.bento-art .b-accent{border:calc(var(--bw,1.5) * var(--k)) solid var(--bento)}
.bento-art .b-node{display:grid;place-items:center;border-radius:50%;border:calc(var(--bw,1.5) * var(--k)) solid rgba(255,255,255,.22);
  background:linear-gradient(#0e1213 53.5%,rgba(14,18,19,.2));box-shadow:inset 0 calc(3.5 * var(--k)) calc(21 * var(--k)) rgba(255,255,255,.1);color:#e4e4e7}
.bento-art .b-field{border-radius:calc(var(--rad,18) * var(--k));border:calc(1.668 * var(--k)) solid rgba(255,255,255,.6);background:#030708;
  box-shadow:0 0 0 calc(var(--ring,10) * var(--k)) rgba(0,0,0,.25),inset 0 0 calc(3.3 * var(--k)) rgba(255,255,255,.25)}
.bento-art .b-frame{border-radius:calc(20.15 * var(--k));border:calc(12 * var(--k)) solid rgba(255,255,255,.04);background:rgba(6,10,10,.5);
  -webkit-backdrop-filter:blur(calc(25 * var(--k)));backdrop-filter:blur(calc(25 * var(--k)));box-shadow:inset 0 0 calc(2.8 * var(--k)) rgba(255,255,255,.25)}
.bento-art .b-card,.bento-art .b-orb{display:grid;place-items:center;overflow:hidden;color:#fff;background:linear-gradient(var(--bento) 17.8%,#fff);
  border:calc(var(--ob,1.7) * var(--k)) solid #fff}
.bento-art .b-card{border-radius:calc(13.43 * var(--k));box-shadow:inset 0 calc(17.4 * var(--k)) calc(104.6 * var(--k)) rgba(255,255,255,.1)}
.bento-art .b-orb{border-radius:50%;box-shadow:inset 0 calc(3.4 * var(--k)) calc(20.5 * var(--k)) rgba(255,255,255,.1)}
.bento-art .b-round{border-radius:50%}
.bento-art .b-capsule{border-radius:999px}
.bento-art .b-center{display:grid;place-items:center}
.bento-art .b-pill{display:flex;align-items:center;justify-content:center;gap:calc(var(--gap,9) * var(--k));padding:0 calc(var(--px,16) * var(--k));width:max-content;
  border-radius:999px;white-space:nowrap;color:#fff;font-size:max(9px,calc(var(--f,18) * var(--k)));line-height:1.5}
.bento-art .b-code{font-family:var(--mono);color:#6b6b6b}
.bento-art .b-code b{margin-left:.6ch;font-weight:500;color:var(--bento-ink)}
.bento-art .b-label{display:grid;place-items:center;border-radius:calc(7 * var(--k));color:#8a8a8a;font-size:max(8px,calc(16 * var(--k)));line-height:1.5}
.bento-art .b-dot{width:calc(9 * var(--k));height:calc(9 * var(--k));border-radius:50%;background:radial-gradient(#fff,var(--bento) 80%);
  box-shadow:0 0 0 calc(3 * var(--k)) rgba(255,255,255,.1)}
.bento-art .b-spot{border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.8),var(--bento) 82%);
  box-shadow:0 0 0 calc(16 * var(--k)) rgba(255,255,255,.1)}
.bento-art .b-tag{display:flex;align-items:center;padding:0 calc(14 * var(--k));width:max-content;border-radius:999px;color:#fff;font-size:max(8px,calc(var(--f) * var(--k)));white-space:nowrap}
.bento-art .b-tag.blue{background:radial-gradient(130% 150% at 33% 25%,#8bafff,#0050ff)}
.bento-art .b-tag.green{background:radial-gradient(130% 150% at 33% 25%,#98c5b1,#007843)}
.bento-art .b-grid{display:flex;flex-direction:column;align-items:center;gap:calc(16 * var(--k))}
.bento-art .b-grid div{display:flex;gap:calc(16 * var(--k))}
.bento-art .b-grid span{display:grid;place-items:center;width:calc(72 * var(--k));height:calc(72 * var(--k));border-radius:calc(16 * var(--k));
  border:calc(2.19 * var(--k)) solid rgba(255,255,255,.1);background:linear-gradient(#1e1e1e,#0e1213);
  box-shadow:inset 0 calc(2.16 * var(--k)) calc(13 * var(--k)) rgba(255,255,255,.1);color:#fff}
.bento-art .b-grid .b-ico{opacity:.3}
.bento-art .b-vignette{border-radius:999px;background:radial-gradient(closest-side,rgba(8,12,13,0),#080c0d)}
.bento-art .b-url{display:flex;align-items:center;justify-content:space-between;padding-left:calc(24 * var(--k));overflow:hidden;
  color:#fff;font-size:max(8.5px,calc(17.93 * var(--k)));white-space:nowrap}
.bento-art .b-send{display:grid;place-items:center;flex:none;width:calc(51 * var(--k));height:calc(51 * var(--k));margin-right:calc(4.3 * var(--k));
  border-radius:50%;border:calc(.8 * var(--k)) solid rgba(255,255,255,.6);color:#fff;background:linear-gradient(var(--bento) 17.8%,#fff)}
.bento-art .b-clock{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2 * var(--k))}
.bento-art .b-clock b{font-family:var(--display);font-size:calc(48 * var(--k));font-weight:500;line-height:1.3;letter-spacing:-.02em}
.bento-art .b-clock span{display:flex;align-items:center;gap:calc(5 * var(--k));font-size:calc(14 * var(--k));line-height:1.5}
.bento-art .b-clock b,.bento-art .b-clock em{font-style:normal;color:transparent;background:linear-gradient(#fff 57.6%,rgba(255,255,255,.1));
  -webkit-background-clip:text;background-clip:text}
.bento-art .b-ico{flex:none;width:calc(var(--i) * var(--k));height:calc(var(--i) * var(--k));
  -webkit-mask:linear-gradient(#000,rgba(0,0,0,.12));mask:linear-gradient(#000,rgba(0,0,0,.12))}
.bento-art .b-size{flex:none;width:calc(var(--i) * var(--k));height:calc(var(--i) * var(--k))}
.bento-body{position:relative;display:flex;flex:1;flex-direction:column;gap:10px;padding:4px 24px 26px}
.bento-body .n{font-family:var(--display);font-size:15px;color:var(--ai);letter-spacing:.06em}
.bento-body h3{font-size:18px;font-weight:500;letter-spacing:-.01em}
.bento-body p{color:var(--soft);font-size:15px;line-height:1.6}
@media (max-width:1100px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){.steps,.features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps,.features{grid-template-columns:1fr}}
.dev{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
@media (max-width:980px){.dev{grid-template-columns:1fr;gap:36px}}
.ticks{margin-top:24px;display:grid;gap:12px}
.ticks li{list-style:none;display:flex;gap:12px;color:var(--muted);font-size:15.5px;line-height:1.55}
.ticks li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;border:1px solid rgba(159,240,236,.4);
  background:rgba(159,240,236,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%239ff0ec' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5'/%3E%3C/svg%3E") center/11px no-repeat}
.window{border-radius:20px;overflow:hidden}
.window-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.window-bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.window-bar span{margin-left:8px;font-family:var(--mono);font-size:13px;color:var(--soft)}
.window .code{border:0;border-radius:0;background:rgba(0,0,0,.3)}
.window .code+.window-bar{border-top:1px solid var(--line)}
.plans{max-width:880px;margin:48px auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.plan{display:flex;flex-direction:column;padding:32px 28px;border-radius:22px}
.plan.featured{border-color:rgba(143,123,255,.55);box-shadow:inset 0 0 40px rgba(111,90,220,.18),0 0 60px rgba(111,90,220,.15)}
.plan h3{font-size:20px;font-weight:500}
.plan .price{margin-top:14px;font-family:var(--display);font-size:40px;font-weight:380;letter-spacing:-.02em}
.plan .desc{margin-top:6px;color:var(--soft);font-size:15px}
.plan .ticks{margin:24px 0 28px}
.plan .btn{margin-top:auto}
@media (max-width:760px){.plans{grid-template-columns:1fr}}
.faq{max-width:820px;margin:40px auto 0;display:grid;gap:12px}
.faq details{padding:0 22px;border-radius:16px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-size:16.5px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:24px;font-weight:300;line-height:1;color:var(--ai);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;color:var(--soft);font-size:15.5px;line-height:1.65}
.cta{position:relative;overflow:hidden;margin-top:clamp(80px,11vw,140px);padding:clamp(40px,6vw,72px) clamp(24px,5vw,64px);border-radius:28px;text-align:center}
.cta::before{content:"";position:absolute;inset:-60% 10% auto;height:140%;pointer-events:none;background:radial-gradient(ellipse at center,rgba(111,90,220,.32),transparent 60%)}
.cta>*{position:relative}
.cta .h2{margin-top:0}
.cta .actions{margin-top:28px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* ---------- Site top bar (docs) and footer ---------- */
.topbar{position:relative;z-index:20;max-width:1200px;height:76px;margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px}
.topnav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:28px;font-size:15px;color:var(--nav)}
.topnav a:hover,.topnav a[aria-current="page"]{color:#fff}
.top-actions{display:flex;align-items:center;gap:20px;font-size:15px;color:var(--nav)}
.top-actions .login:hover{color:#fff}
@media (max-width:860px){
  .topnav,.top-actions .login,.top-actions .btn{display:none}
  .topbar .menu-btn{display:grid}
}
.footer{position:relative;z-index:1;margin-top:clamp(80px,10vw,120px);padding:40px var(--gutter) 48px;border-top:1px solid var(--line)}
.footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px 48px;flex-wrap:wrap}
.footer nav{display:flex;gap:24px;flex-wrap:wrap;font-size:14.5px;color:var(--nav)}
.footer nav a:hover{color:#fff}
.footer .legal{flex-basis:100%;font-size:13px;line-height:1.6;color:var(--soft)}
/* ---------- Language ---------- */
.locales{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:13.5px;color:var(--soft)}
.footer nav.locales{gap:4px 14px;font-size:13.5px;color:var(--soft)}
.locales a{padding:2px 0;border-bottom:1px solid transparent}
.locales a:hover{color:#fff}
.locales a[aria-current]{color:#fff;border-bottom-color:var(--ai)}
.auth > .locales,.side-foot .locales{justify-content:center}
.side-foot .locales{gap:4px 10px;font-size:12.5px}

/* ---------- Documentation ---------- */
.docs{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:40px var(--gutter) 0;display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px}
.toc{position:sticky;top:24px;align-self:start;display:grid;gap:2px;font-size:14.5px}
.toc a{padding:6px 10px;border-radius:8px;color:var(--nav)}
.toc a:hover{background:rgba(255,255,255,.05);color:#fff}
.toc .label{padding:14px 10px 4px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.prose{max-width:760px}
.prose h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,4vw,46px);line-height:1.1;letter-spacing:-.025em}
.prose h2{margin-top:56px;font-family:var(--display);font-weight:450;font-size:26px;letter-spacing:-.015em;scroll-margin-top:24px}
.prose h3{margin-top:28px;font-size:17px;font-weight:600}
.prose p,.prose li{color:var(--muted);font-size:15.5px;line-height:1.7}
.prose p{margin-top:14px}
.prose ul{margin-top:12px;padding-left:20px;display:grid;gap:6px}
.prose .code,.prose .alert{margin-top:16px}
.prose table{width:100%;margin-top:16px;border-collapse:collapse;font-size:14.5px}
.prose th,.prose td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{color:var(--soft);font-size:13px;font-weight:500}
.prose td{color:var(--muted)}
.endpoint{display:flex;align-items:center;gap:10px;margin-top:16px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.04);font-family:var(--mono);font-size:14.5px;overflow-x:auto}
.method{padding:3px 8px;border-radius:6px;background:rgba(140,240,180,.14);color:var(--ok);font-size:12px;font-weight:700}
.method.post{background:rgba(159,240,236,.12);color:var(--ai)}
.method.delete{background:rgba(255,157,157,.12);color:var(--danger)}
.method.put{background:rgba(255,216,138,.12);color:var(--warn)}
@media (max-width:860px){
  .docs{grid-template-columns:minmax(0,1fr);gap:24px}
  .toc{position:static;display:flex;flex-wrap:wrap}
  .toc .label{display:none}
}

/* ---------- Sign-in pages and error pages ---------- */
.auth{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:40px var(--gutter)}
.auth > .brand{--b:34px}
.auth::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 30%,rgba(111,90,220,.2),transparent 60%)}
.auth>*{position:relative}
.auth-card{width:min(100%,440px);padding:32px;border-radius:22px}
.auth-card h1{font-family:var(--display);font-size:28px;font-weight:400;letter-spacing:-.02em;line-height:1.2}
.auth-card .sub{margin-top:6px;color:var(--soft);font-size:15px}
.auth-card .form,.auth-card .alert{margin-top:24px}
.auth-social{display:grid;gap:10px;margin-top:24px}
.auth-social .btn svg{width:20px;height:20px;flex:none}
.auth-divider{display:flex;align-items:center;gap:14px;margin-top:24px;color:var(--soft);font-size:13px}
.auth-divider::before,.auth-divider::after{content:"";height:1px;flex:1;background:var(--line)}
.auth-foot{font-size:14.5px;color:var(--soft);text-align:center}
.error-code{font-family:var(--display);font-size:72px;font-weight:380;line-height:1;letter-spacing:-.03em}

/* ---------- Dashboard and administration ---------- */
.shell{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:28px;padding:24px 16px;border-width:0 1px 0 0;border-radius:0;background:rgba(13,12,17,.65)}
.sidebar .brand{align-self:flex-start;margin:0 8px}
.side-nav{display:grid;gap:4px}
.side-nav a{display:flex;align-items:center;gap:12px;height:42px;padding:0 12px;border-radius:10px;color:var(--nav);font-size:15px;transition:background-color .15s,color .15s}
.side-nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.side-nav a[aria-current="page"]{background:rgba(111,90,220,.2);color:#fff;box-shadow:inset 2px 0 0 #8f7bff}
.side-nav svg{flex:none;width:18px;height:18px;opacity:.85}
.side-label{padding:14px 12px 4px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.side-foot{margin-top:auto;display:grid;gap:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)}
.who{min-width:0;font-size:14px;line-height:1.35}
.who b,.who span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who b{font-weight:500}
.who span{color:var(--soft);font-size:13px}
.main{min-width:0;display:flex;flex-direction:column}
.mobilebar{display:none}
.content{width:100%;max-width:1040px;margin:0 auto;padding:40px var(--gutter) 64px}
.content>.alert{margin-bottom:20px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.page-head h1{font-family:var(--display);font-weight:400;font-size:clamp(28px,3vw,36px);line-height:1.15;letter-spacing:-.025em}
.page-head p{margin-top:6px;color:var(--soft)}
.head-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.back{display:inline-flex;margin-bottom:10px;font-size:14px;color:var(--soft)}
.back:hover{color:#fff}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .mobilebar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:12px var(--gutter);
    border-bottom:1px solid var(--line);background:rgba(13,12,17,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .sidebar{position:fixed;inset:0 auto 0 0;z-index:40;width:min(84vw,300px);background:#121118;transform:translateX(-100%);transition:transform .25s ease}
  .sidebar.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.55)}
  .content{padding-top:28px}
}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:760px){.grid-2{grid-template-columns:1fr}}
.limits{display:flex;flex-wrap:wrap;gap:16px 36px;margin-top:20px}
.limit b{display:block;font-family:var(--display);font-size:30px;font-weight:400;letter-spacing:-.02em}
.limit b small{font-size:18px;color:var(--soft)}
.limit span{font-size:13.5px;color:var(--soft)}
.checklist{display:grid;gap:20px}
.checklist li{list-style:none;display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;align-items:start}
.checklist .num{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line-strong);border-radius:50%;font-size:14px;font-weight:600;color:var(--muted)}
.checklist .done .num{border-color:rgba(140,240,180,.45);background:rgba(140,240,180,.12);color:var(--ok)}
.checklist h3{font-size:16px;font-weight:500}
.checklist p{margin-top:2px;color:var(--soft);font-size:14.5px}
.checklist .code,.checklist .btn{margin-top:12px}
.toolbar{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.toolbar .input{height:42px;width:auto;flex:1 1 220px;max-width:340px}
.toolbar select.input{flex:0 1 200px}
.pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;font-size:14px;color:var(--soft)}
.pagination nav{display:flex;gap:8px}

/* ---------- QR codes (dashboard and the public page) ---------- */
.qr-layout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:36px;align-items:center}
.qr-layout h2{margin-bottom:16px}
@media (max-width:640px){.qr-layout{grid-template-columns:minmax(0,1fr);justify-items:center}}
.qr-code{display:grid;justify-items:center;gap:12px}
.qr-box{width:min(100%,264px);aspect-ratio:1}
.qr-box img{display:block;width:100%;height:100%;padding:12px;border-radius:16px;background:#fff}
.qr-empty{display:grid;place-items:center;width:100%;height:100%;border:1px dashed var(--line-strong);border-radius:16px;background:rgba(255,255,255,.02)}
.spinner{width:28px;height:28px;border:2px solid rgba(255,255,255,.15);border-top-color:var(--ai);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}
.qr-status{font-size:14px;color:var(--soft);text-align:center}
.qr-steps{display:grid;gap:10px;padding-left:20px;color:var(--muted);font-size:15px;line-height:1.55}
.qr-hint{margin-top:14px}
.qr-done{display:none;text-align:center}
[data-state="connected"] .qr-done{display:block}
[data-state="connected"] .qr-pending{display:none}
.qr-card .qr-code{margin:24px 0}
.done-icon{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 16px;border:1px solid rgba(140,240,180,.45);border-radius:50%;background:rgba(140,240,180,.12);color:var(--ok);font-size:26px}
.reveal summary{margin-top:16px;color:var(--ai);font-size:14px;cursor:pointer}
.reveal .secret{margin-top:10px}

/* Planos e cobrança */
.badge-canceled{color:var(--danger);border-color:rgba(255,157,157,.38);background:rgba(255,157,157,.06)}
.card-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.fine{margin-top:18px;color:var(--soft);font-size:13.5px;line-height:1.6}
.fine a{color:var(--ai)}
.btn.is-static{cursor:default;opacity:.7}
.btn.is-static:hover{background:rgba(255,255,255,.04)}
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03)}
.seg a{padding:7px 14px;border-radius:999px;color:var(--soft);font-size:13.5px;white-space:nowrap}
.seg a:hover{color:var(--ink)}
.seg a[aria-current]{background:rgba(255,255,255,.1);color:var(--ink)}
.plans.plans-3{max-width:1080px;grid-template-columns:repeat(3,minmax(0,1fr))}
.card .plans{margin-top:0}
.plan .price small{margin-left:4px;font-size:15px;color:var(--soft);letter-spacing:0}
.plan form{margin-top:auto}
.plans-note{margin-top:24px;text-align:center;color:var(--soft);font-size:15px;line-height:1.6}
.plans-note a{color:var(--ai)}
@media (max-width:980px){.plans.plans-3{grid-template-columns:1fr;max-width:520px}}
/* Páginas legais */
.prose a{color:var(--ai)}
.toc a[aria-current]{background:rgba(255,255,255,.06);color:#fff}
.legal-text .updated{margin-top:40px;color:var(--soft);font-size:13.5px}
.terms-check{align-items:flex-start;line-height:1.55}
.terms-check input{margin-top:2px;flex:none}
.terms-check a{color:var(--ai);text-decoration:underline}
@media (max-width:560px){.seg{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:14px}.seg a{white-space:normal;text-align:center;border-radius:10px;padding:8px 10px}}
/* Números oficiais */
.official-steps{display:grid;gap:6px;margin-top:12px;padding-left:20px;list-style:decimal}
.official-new summary{margin-top:20px}
/* Documentação: códigos longos quebram nas tabelas; no telemóvel, cada tabela rola sozinha */
.prose td code{overflow-wrap:anywhere}
@media (max-width:640px){.prose table{display:block;overflow-x:auto}}
/* Equipe */
.row-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
/* Verificação em duas etapas */
.two-factor-setup{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start}
.two-factor-qr svg{display:block;width:200px;height:200px;border-radius:14px}
.two-factor-key{display:inline-block;margin-top:4px;letter-spacing:.06em;overflow-wrap:anywhere}
.recovery-codes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:14px 0 18px}
.recovery-codes code{display:block;padding:8px 10px;text-align:center;letter-spacing:.04em}
@media (max-width:640px){.two-factor-setup{grid-template-columns:1fr;justify-items:center}.two-factor-setup > div{width:100%}}
/* Status */
.status-page{position:relative;z-index:1;padding:48px 0 72px}
.status-page .wrap{max-width:760px}
.status-page h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,4vw,46px);letter-spacing:-.025em}
.status-summary{margin:14px 0 24px;font-size:17px}
.status-summary.is-operational{color:var(--ok)}
.status-summary.is-degraded{color:var(--warn)}
.status-summary.is-down{color:var(--danger)}
.status-list{list-style:none;padding:0;display:grid}
.status-list li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.status-list li:last-child{border-bottom:0}
.status-list p{margin-top:4px;color:var(--soft);font-size:14px}

/* The number's agent and browser microphone test. */
.number-agent-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
.number-agent-layout .field-hint{margin:16px 0}
.number-agent-test{border-left:1px solid var(--line);padding-left:32px;min-width:0}
.number-agent-test h3{margin:0 0 8px}
.number-agent-test [hidden]{display:none}
.number-agent-status{margin:20px 0 12px;color:var(--ink)}
.number-agent-test output{font-variant-numeric:tabular-nums;color:var(--soft)}
@media(max-width:800px){.number-agent-layout{grid-template-columns:minmax(0,1fr);gap:24px}.number-agent-test{border-left:0;border-top:1px solid var(--line);padding:24px 0 0}}

@media(max-width:540px){.number-agent-layout .dl{grid-template-columns:minmax(0,1fr);gap:4px}.number-agent-layout .dl dd{margin-bottom:12px}}