/* ClearBasis site design system — extracted 1:1 from the design prototype
   (Build Bible §08 tokens). Shared by every static page; page-specific styles
   stay inline in their page. Production responsive ladder = prototype
   thresholds minus its 252px viewer sidebar. */
:root{
  --ink:#0F1A2B; --paper:#FAFAF7; --surface:#FFFFFF; --surface2:#F1F2ED;
  --accent:#1B7A5A; --accent-pressed:#146147; --warn:#B7791F; --danger:#B3402E;
  --info:#2C5FA8; --text2:#4A5568; --border:#E2E4DC;
  --r-input:6px; --r-card:10px; --r-modal:16px;
  --sh-card:0 1px 3px rgba(15,26,43,.08); --sh-modal:0 8px 30px rgba(15,26,43,.16);
  --sans:Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:16px;line-height:1.6}
h1,h2,h3,h4{line-height:1.25}
.display{font-size:clamp(33px,4.6vw,44px);font-weight:600;letter-spacing:-.01em}
h1,.h1{font-size:clamp(27px,3.6vw,32px);font-weight:600}
h2,.h2{font-size:clamp(21px,2.7vw,24px);font-weight:600}
h3,.h3{font-size:18px;font-weight:500}
.small{font-size:14px}.caption{font-size:12px;font-weight:500}
.t2{color:var(--text2)} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent-pressed)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.ic{vertical-align:-3.5px;flex:none}

.btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-input);padding:10px 18px;
  font-size:15px;font-weight:500;border:1px solid transparent;cursor:pointer;font-family:inherit;
  transition:background-color .18s ease-out,color .18s ease-out,border-color .18s ease-out,transform .12s ease-out}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-pressed)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary[disabled]{background:var(--surface2);color:var(--text2);cursor:not-allowed}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost{background:transparent;color:var(--accent)}
.btn-lg{padding:13px 24px;font-size:16px}.btn-sm{padding:6px 12px;font-size:13px}
a.btn{color:#fff}a.btn-secondary,a.btn-ghost{color:var(--ink)}a.btn-ghost{color:var(--accent)}
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:500;line-height:1.45}
.badge-ok{background:#E5F2EC;color:var(--accent)}
.badge-warn{background:#F7EEDD;color:var(--warn)}
.badge-danger{background:#F6E5E1;color:var(--danger)}
.badge-mut{background:var(--surface2);color:var(--text2)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--sh-card);transition:box-shadow .18s ease-out}
.input{width:100%;border:1px solid var(--border);border-radius:var(--r-input);padding:10px 12px;font:inherit;font-size:15px;background:#fff}
.err{font-size:13px;color:var(--danger);margin-top:5px}
table.dt{width:100%;border-collapse:collapse;font-size:14px;display:block;overflow-x:auto;max-width:100%}
table.dt tbody{display:table;width:100%}
table.dt th{background:var(--surface2);text-align:left;padding:9px 12px;font-size:12px;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text2);border-bottom:1px solid var(--border)}
table.dt td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
table.dt td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
table.dt tr:nth-child(even){background:#FCFCFA}
.prog{height:8px;background:var(--surface2);border-radius:999px;overflow:hidden}
.prog>div{height:100%;background:var(--accent);border-radius:999px;transition:width .6s ease-out}
.skel{background:linear-gradient(90deg,var(--surface2) 25%,#E7E9E1 37%,var(--surface2) 63%);
  background-size:400% 100%;border-radius:6px;height:14px;animation:shimmer 1.4s ease infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@keyframes settle{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.settle>*{animation:settle .5s ease-out backwards}
.settle>*:nth-child(1){animation-delay:.06s}.settle>*:nth-child(2){animation-delay:.14s}
.settle>*:nth-child(3){animation-delay:.22s}.settle>*:nth-child(4){animation-delay:.34s}
.settle>*:nth-child(5){animation-delay:.46s}
.settle tbody tr{animation:settle .5s ease-out backwards}
.settle tbody tr:nth-child(1){animation-delay:.06s}.settle tbody tr:nth-child(2){animation-delay:.14s}
.settle tbody tr:nth-child(3){animation-delay:.22s}.settle tbody tr:nth-child(4){animation-delay:.34s}
.settle tbody tr:nth-child(5){animation-delay:.46s}
@media(prefers-reduced-motion:reduce){.settle>*,.settle tbody tr,.skel{animation:none}.btn,.card{transition:none}}
.steps{display:flex;gap:0;font-size:13px;color:var(--text2);margin-bottom:26px;flex-wrap:wrap}
.steps span{display:flex;align-items:center;gap:6px;padding:0 14px 0 0}
.steps .n{width:22px;height:22px;border-radius:50%;background:var(--surface2);display:inline-flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:600;line-height:1;flex:none}
.steps .done .n{background:var(--accent);color:#fff}.steps .cur{color:var(--ink);font-weight:600}
.steps .cur .n{background:var(--ink);color:#fff}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.grid2>*,.grid3>*,.hero-split>*{min-width:0}
.grid2>.card,.grid3>.card{padding:24px;display:flex;flex-direction:column}
.grid2>.card>.btn:last-child,.grid3>.card>.btn:last-child,
.grid2>.card>button:last-child,.grid3>.card>button:last-child{margin-top:auto;align-self:flex-start}
.grid2>.card>.caption:last-child,.grid3>.card>.caption:last-child{margin-top:auto;padding-top:10px}
.kpi{padding:16px 18px}
.kpi .v{font-size:26px;font-weight:600;font-family:var(--mono)}
.kpi .l{font-size:13px;color:var(--text2)}
.hero-split{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center}
.pricecard{padding:24px;display:flex;flex-direction:column;gap:8px}
.pricecard .p{font-size:34px;font-weight:600;font-family:var(--mono)}
.pricecard ul{list-style:none;font-size:14px;color:var(--text2)}
.pricecard li{padding:4px 0 4px 24px;position:relative}
.pricecard li::before{content:"✓";position:absolute;left:2px;color:var(--accent);font-weight:700}
.faq details{border-bottom:1px solid var(--border);padding:14px 0}
.faq summary{font-weight:500;cursor:pointer;font-size:16px}
.faq p{color:var(--text2);font-size:15px;padding-top:8px;max-width:760px}

/* marketing shell */
.mnav{display:flex;align-items:center;gap:26px;padding:16px 40px;background:rgba(250,250,247,.97);
  border-bottom:1px solid var(--border);font-size:15px;font-weight:500}
.mnav .links{display:flex;gap:22px;flex:1}
.mnav a{color:var(--ink);white-space:nowrap} .mnav a:hover{color:var(--accent)}
.mnav .btn{white-space:nowrap}
.mnav a.btn-primary{color:#fff}
.mnav .btn-ghost{color:var(--accent)}
.mwrap{padding:0 40px 56px;max-width:1200px;margin:0 auto}
.msec{padding-top:52px}
.urgency{background:var(--ink);color:#E8EDF4;font-size:13px;padding:8px 40px;display:flex;gap:18px;align-items:center;justify-content:center}
.urgency b{color:#D99A33}
.footer{border-top:1px solid var(--border);background:var(--surface2);padding:36px 40px;font-size:13px;color:var(--text2)}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;max-width:1200px;margin:0 auto}
.footer .cols>*{min-width:0}
.footer h4{font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;color:var(--ink)}
.footer a{display:block;color:var(--text2);padding:2px 0}

/* language & country dropdown (assets/lang.js) */
.langmenu{position:fixed;z-index:200;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);box-shadow:var(--sh-modal);padding:8px;min-width:280px;max-width:360px;
  max-height:70vh;overflow-y:auto}
.langmenu-h{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--text2);
  font-weight:600;padding:8px 10px 4px}
.langmenu-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:7px 10px;border-radius:8px;font-size:14px}
.langmenu-row:hover{background:var(--surface2)}
.langmenu-pills{display:inline-flex;gap:4px;flex:none}
.langmenu-pills a{display:inline-flex;padding:2px 9px;border-radius:999px;font-size:12px;
  font-weight:600;color:var(--accent);border:1px solid var(--border)}
.langmenu-pills a:hover{border-color:var(--accent)}
.langmenu-pills a.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Production responsive ladder: ≤1300 language label compacts · ≤1160 links
   row wraps · ≤960 grids stack · ≤750 nav folds to CTA · ≤640 tight mobile */
@media(min-width:961px){.btn{white-space:nowrap}}
@media(max-width:1300px){.langsel-label{display:none}}
@media(max-width:1160px){
  .mnav{gap:10px 14px;padding:12px 20px;flex-wrap:wrap}
  .mnav .links{gap:2px 8px;font-size:14px;flex-wrap:wrap;flex-basis:100%;order:3}
  .mnav .links a{padding:8px 6px}   /* ≥38px tap height when links wrap on touch */
}
@media(max-width:960px){
  .footer a{padding:7px 0}          /* touch-size footer links */
  .grid3,.grid2,.hero-split{grid-template-columns:1fr}
  .footer .cols{grid-template-columns:1fr 1fr}
  .mwrap{padding:0 24px 44px}
  .msec{padding-top:40px}
  .hero-split{gap:26px}
}
@media(max-width:750px){
  .mnav{padding:12px 16px;gap:10px}
  .mnav .links{display:none}
  .mnav>a:not(.btn):not(.brand){display:none}
  .mnav .btn{margin-left:auto;padding:8px 14px;font-size:14px}
  .mwrap{padding:0 18px 36px}
  .msec{padding-top:32px}
  .btn-lg{width:100%;justify-content:center}
  .steps{font-size:12px;gap:4px 0}
  .footer{padding:26px 18px}
  .kpi .v{font-size:23px}
  .pricecard .p{font-size:29px}
  .urgency{font-size:11px;padding:7px 12px;gap:6px;flex-wrap:wrap;text-align:center;line-height:1.5}
}
@media(max-width:640px){
  .footer .cols{grid-template-columns:1fr}
  .mwrap{padding:0 16px 32px}
}

/* button that looks like an inline link (real links never carry href="#") */
.linklike{background:none;border:0;padding:8px 4px;margin:-8px -4px;font:inherit;
  color:var(--accent);cursor:pointer;text-decoration:none}
.linklike:hover{color:var(--accent-pressed)}
/* inline citation links get a touch-friendly hit area without layout shift */
.card .caption a{display:inline-block;padding:5px 0;margin:-5px 0}