/* ============================================================================
VOXIE DESIGN SYSTEM — core tokens
Pulled from the Figma Design Guide (2024-05) and the @voxie/frontend-components
Tailwind v4 configuration. These are the primitives — import this file and
reference the vars; do not hand-roll new colors.
============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
/* Inter variable — uploaded brand file */
/* Font Awesome 7 Pro — uploaded */
:root {
/* ----------------------------------------------------------------
COLOR — sky (brand primary). Values from tailwind.css @theme.
---------------------------------------------------------------- */
--sky-50: #f0fbff;
--sky-100: #e0f6fe;
--sky-200: #b9ebfe; /* pill background */
--sky-300: #73d8fc;
--sky-400: #3dc4f5; /* "hero box" blue */
--sky-500: #14abe0; /* ★ brand primary */
--sky-600: #018bc6;
--sky-700: #00699e;
--sky-800: #085582;
--sky-900: #05476b; /* shadow tint */
/* ----------------------------------------------------------------
COLOR — slate (neutral ladder)
---------------------------------------------------------------- */
--slate-50: #f8fafc;
--slate-100: #f1f5f9;
--slate-200: #e2e8f0;
--slate-300: #cbd5e1;
--slate-400: #94a3b8;
--slate-500: #64748b;
--slate-600: #475569;
--slate-700: #334155;
--slate-800: #1e293b;
--slate-900: #0f172a;
/* ----------------------------------------------------------------
COLOR — accents (used sparingly — CTAs on marketing, semantics)
---------------------------------------------------------------- */
--amber-300: #fcd34d; /* marketing CTA */
--amber-400: #fbbf24;
--teal-300: #5eead4; /* success */
--teal-400: #2dd4bf;
--rose-300: #fda4af; /* danger */
--rose-400: #fb7185;
--violet-500:#8b5cf6;
/* Voxie brand-ink used for marketing headline text */
--ink-navy: #2e314f;
--ink-deep: #05476b;
/* ----------------------------------------------------------------
SEMANTIC TOKENS (match Figma 04-03 "Color Tokens")
---------------------------------------------------------------- */
--color-primary: var(--sky-500);
--color-secondary: var(--slate-600);
--color-muted-dark: var(--slate-300);
--color-muted: var(--slate-200);
--color-muted-light: var(--slate-100);
--color-info: var(--amber-300);
--color-danger: var(--rose-300);
--color-success: var(--teal-300);
--bg: #ffffff;
--bg-subtle: var(--slate-50);
--bg-muted: var(--slate-100);
--border: var(--slate-200);
--border-subtle: var(--slate-100);
--text-primary: var(--slate-800); /* Slate 800 */
--text-secondary: var(--slate-500); /* Slate 500 */
--text-muted: var(--slate-400);
--text-link: var(--sky-700); /* Sky 700 */
--text-on-primary: #000000; /* primary buttons use black text */
/* ----------------------------------------------------------------
TYPE
Inter is primary; Open Sans used sparingly on the marketing site.
---------------------------------------------------------------- */
--font-sans: Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-marketing: Inter, ui-sans-serif, system-ui, sans-serif;
--font-caps: 'Open Sans', Inter, sans-serif; /* caps nav labels on voxie.com */
/* Type scale — Tailwind-aligned (the Figma explicitly says "see tailwind docs") */
--text-xs: 0.75rem; /* 12 / 16 */
--text-sm: 0.875rem; /* 14 / 20 */
--text-base: 1rem; /* 16 / 24 ← body default */
--text-lg: 1.125rem; /* 18 / 28 */
--text-xl: 1.25rem; /* 20 / 28 */
--text-2xl: 1.5rem; /* 24 / 32 */
--text-3xl: 1.875rem; /* 30 / 36 ← section title */
--text-4xl: 2.25rem; /* 36 / 40 */
--text-5xl: 3rem; /* 48 / 48 */
--text-6xl: 3.75rem; /* 60 / 60 ← display */
--leading-tight: 1.02; /* display */
--leading-snug: 1.25; /* tabular */
--leading-body: 1.5; /* body */
--tracking-caps: 0.05em; /* all-caps kicker */
/* ----------------------------------------------------------------
RADII (Tailwind v4 overrides from frontend-components)
---------------------------------------------------------------- */
--radius-sm: 0.375rem; /* 6px */
--radius: 0.5rem; /* 8px */
--radius-md: 0.625rem; /* 10px */
--radius-lg: 0.75rem; /* 12px */
--radius-xl: 0.875rem; /* 14px */
--radius-2xl: 1.125rem; /* 18px */
--radius-3xl: 1.5rem; /* 24px — deck/card shell */
--radius-full: 9999px;
/* ----------------------------------------------------------------
SHADOW — ALL tinted with sky-900 / blue-900 (Figma 06-03)
---------------------------------------------------------------- */
--shadow-xs: 0 1px 2px 0 rgba(30, 58, 138, 0.08);
--shadow-sm: 0 1px 3px 0 rgba(5, 71, 107, 0.15), 0 1px 2px 0 rgba(5, 71, 107, 0.07);
--shadow: 0 4px 6px -1px rgba(5, 71, 107, 0.12), 0 2px 4px -1px rgba(5, 71, 107, 0.08);
--shadow-md: 0 10px 15px -3px rgba(5, 71, 107, 0.12), 0 4px 6px -2px rgba(5, 71, 107, 0.10);
--shadow-lg: 0 20px 25px -5px rgba(5, 71, 107, 0.15), 0 10px 10px -5px rgba(5, 71, 107, 0.08);
--shadow-xl: 0 25px 50px -12px rgba(5, 71, 107, 0.35);
/* hero-art glow: 0 8px 26px 0 rgba(63,105,169,0.16) */
--shadow-glass: 0 8px 26px 0 rgba(63, 105, 169, 0.16);
/* ----------------------------------------------------------------
SPACING — Tailwind default (4px base)
---------------------------------------------------------------- */
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
--space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
--space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
/* ----------------------------------------------------------------
MOTION — all transitions are subtle, short, and eased.
---------------------------------------------------------------- */
--ease-default: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
--ease-spring: cubic-bezier(0, 1.3, 0.3, 1); /* @kind other */
--dur-fast: 150ms; /* @kind other */
--dur-base: 250ms; /* @kind other */
--dur-slow: 500ms; /* @kind other */
}
/* ============================================================================
SEMANTIC ELEMENT DEFAULTS
============================================================================ */
html { font-family: var(--font-sans); color: var(--text-primary); -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--bg); font-size: var(--text-base); line-height: var(--leading-body); }
/* Display / Marketing hero — Inter ExtraBold, tight leading */
.voxie-display,
h1.voxie-hero {
font-family: var(--font-marketing);
font-weight: 800;
font-size: var(--text-6xl);
line-height: var(--leading-tight);
letter-spacing: -0.01em;
color: var(--ink-navy);
text-wrap: balance;
}
/* App / product h1 — 30px ExtraBold (Figma section titles use this) */
h1, .voxie-h1 {
font-family: var(--font-sans);
font-weight: 800;
font-size: var(--text-3xl);
line-height: 2.25rem;
letter-spacing: -0.005em;
color: var(--text-primary);
margin: 0 0 var(--space-4);
}
h2, .voxie-h2 {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--text-2xl);
line-height: 2rem;
color: var(--text-primary);
margin: 0 0 var(--space-3);
}
h3, .voxie-h3 {
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--text-lg);
line-height: 1.75rem;
color: var(--text-primary);
margin: 0 0 var(--space-2);
}
/* Body copy — 16/24, slate-500 when secondary */
p, .voxie-body {
font-size: var(--text-base);
line-height: 1.5rem;
color: var(--text-secondary);
margin: 0 0 var(--space-4);
text-wrap: pretty;
max-width: 70ch; /* 45–70 chars per line */
}
/* Small / caption */
.voxie-small { font-size: var(--text-xs); line-height: 1rem; color: var(--text-secondary); }
/* ALL-CAPS LABEL — needs extra letter-spacing per Figma 02-03 */
.voxie-eyebrow {
font-weight: 700;
font-size: var(--text-sm);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--text-secondary);
}
/* Tabular data — tighter line height */
.voxie-tabular {
font-family: var(--font-sans);
line-height: 1.25;
font-variant-numeric: tabular-nums;
}
a, .voxie-link {
color: var(--text-link);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-default);
}
a:hover { color: var(--sky-800); text-decoration: underline; }
code, .voxie-mono {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
font-size: 0.9em;
background: var(--slate-100);
padding: 0.1em 0.35em;
border-radius: var(--radius-sm);
color: var(--slate-800);
}
/* ============================================================================
UTILITY CLASSES OFTEN NEEDED
============================================================================ */
.voxie-card {
background: var(--bg);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-sm);
}
.voxie-card-elevated {
background: var(--bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.voxie-surface-subtle {
background: var(--slate-50);
border: 1px solid var(--slate-100);
}
/* Frosted glass — the Voxie signature (floating cards over sky-400 blocks) */
.voxie-glass {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-glass);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--slate-50);color:var(--slate-800);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:var(--sky-700);text-decoration:none}a:hover{color:var(--sky-800)}
.wrap{max-width:1440px;margin:0 auto;padding:0 48px}
.nav{background:#fff;border-bottom:1px solid var(--slate-200);position:sticky;top:0;z-index:90}
.nav .wrap{display:flex;align-items:center;gap:18px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.nav .brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav .brand img{height:20px;display:block}
.nav .brand span{font-size:12.5px;font-weight:600;color:var(--slate-500);white-space:nowrap}
.nav .stamp{margin-left:auto;font-size:12px;color:var(--slate-400);white-space:nowrap}
.tabs{display:flex;gap:4px;background:#fff;border:1px solid var(--slate-200);border-radius:999px;padding:4px}
.tabs button{border:0;background:transparent;border-radius:999px;padding:7px 16px;font:inherit;font-size:13px;font-weight:700;color:var(--slate-600);cursor:pointer;display:flex;align-items:center;gap:8px}
.tabs button[aria-pressed=true]{background:var(--sky-500);color:#fff}
.tabs button span{font-weight:600;opacity:.55}
.hero{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;padding:22px 0 16px;border-bottom:1px solid var(--slate-200)}
.hero h1{font-size:30px;line-height:1.15;letter-spacing:-.02em;font-weight:800;color:var(--ink-navy);margin:0}
.hero p{font-size:13.5px;line-height:1.45;color:var(--slate-500);margin:0;max-width:50ch}
.controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 0 14px}
.seg{display:flex;gap:4px;background:#fff;border:1px solid var(--slate-200);border-radius:999px;padding:4px}
.seg button{border:0;background:transparent;border-radius:999px;padding:6px 14px;font:inherit;font-size:12.5px;font-weight:700;color:var(--slate-600);cursor:pointer;white-space:nowrap}
.seg button[aria-pressed=true]{background:var(--sky-500);color:#fff}
select.chip{appearance:none;background:#fff;border:1px solid var(--slate-200);border-radius:999px;padding:8px 30px 8px 14px;font:inherit;font-size:12.5px;font-weight:600;color:var(--slate-600);cursor:pointer;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center;background-size:10px 6px}
select.chip.on{background-color:var(--sky-100);border-color:var(--sky-400);color:var(--sky-800)}
.count{margin-left:auto;font-size:12.5px;color:var(--slate-400)}
.legend{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:20px;font-size:12.5px;color:var(--slate-500)}
.pill{display:inline-flex;align-items:center;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:700;white-space:nowrap}
.pill.success{background:#ccfbef;color:#0f766e}.pill.primary{background:var(--sky-100);color:var(--sky-800)}
.pill.warning{background:#fef3c7;color:#92400e}.pill.danger{background:#ffe4e9;color:#be123c}.pill.muted{background:var(--slate-100);color:var(--slate-500)}
.bsec{margin-bottom:52px}
.bsec>h2{font-size:28px;font-weight:800;letter-spacing:-.02em;margin:0}
.bsec>header{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.bsec>header p{margin:0 0 5px;font-size:13.5px;color:var(--slate-500)}
.bsec>header .n{margin-left:auto;font-size:13px;font-weight:600;color:var(--slate-400);padding-bottom:5px}
table.mx{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-sm)}
table.mx th{background:var(--slate-50);border-bottom:1px solid var(--slate-200);text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--slate-400);padding:11px 12px;box-sizing:border-box}
tr.band td{background:var(--sky-50);border-bottom:1px solid var(--slate-100);padding:8px 20px}
tr.band b{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;font-weight:700;color:var(--sky-800)}
tr.band span{font-size:11.5px;color:var(--sky-700);margin-left:9px}
tr.it{border-bottom:1px solid var(--slate-100);cursor:pointer}
tr.it:hover{background:var(--sky-50)}
tr.it td{padding:13px 12px;vertical-align:top;box-sizing:border-box}
tr.it .idc{padding-left:16px}
tr.it .ref{display:block;font-family:ui-monospace,Menlo,monospace;font-size:10px;font-weight:700;color:var(--slate-300);margin-top:5px}
tr.it h3{font-size:14px;font-weight:700;line-height:1.35;margin:0;color:var(--slate-800);text-wrap:pretty}
tr.it .cost{font-size:12.5px;line-height:1.45;color:var(--slate-500);text-wrap:pretty}
tr.it .sol{font-size:12.5px;line-height:1.45;color:var(--slate-700);text-wrap:pretty}
tr.it .door{font-size:11.5px;font-weight:600;color:var(--sky-700);margin-top:6px}
tr.it .eng{display:flex;gap:4px;flex-wrap:wrap}
tr.it .eff{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;font-weight:700;color:var(--slate-700)}
tr.it .arw{text-align:right;padding-right:16px;color:var(--slate-300)}
.empty{background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius-2xl);box-shadow:var(--shadow-sm);text-align:center;padding:56px 32px;margin-bottom:52px}
.empty h3{font-size:15px;font-weight:700;color:var(--slate-600);margin:0 0 8px}
.empty p{font-size:13px;color:var(--slate-500);max-width:46ch;margin:0 auto 14px;line-height:1.5}
.empty button{border:0;background:var(--sky-500);color:#fff;border-radius:999px;padding:9px 18px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.pcards{display:flex;gap:10px;flex-wrap:wrap;padding:18px 0 40px}
.pcard{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius-xl);padding:13px 18px;min-width:260px;box-shadow:var(--shadow-xs)}
.pcard .ic{width:30px;height:30px;border-radius:9px;background:var(--slate-100);color:var(--slate-400);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.pcard b{font-size:13.5px;font-weight:700;color:var(--slate-800);display:block}
.pcard small{font-size:12px;color:var(--slate-500)}
.dwrap{display:none}
body[data-view=detail] .dwrap.on{display:block}
body[data-view=detail] .ixwrap{display:none}
.dbar{background:rgba(255,255,255,.9);border-bottom:1px solid var(--slate-200);position:sticky;top:57px;z-index:80}
.dbar .wrap{display:flex;align-items:center;gap:16px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.dbar .back,.dbar .pn{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--slate-200);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--slate-600);cursor:pointer}
.dbar .back:hover,.dbar .pn:hover{border-color:var(--sky-300);color:var(--sky-700)}
.dbar .meta{font-size:13px;color:var(--slate-400)}
.dbar .r{margin-left:auto;display:flex;gap:8px}
.dt{max-width:1180px;margin:0 auto;padding:40px 48px 90px}
.dt .tagrow{display:flex;align-items:center;gap:9px;margin-bottom:16px;flex-wrap:wrap}
.dt h1{font-size:38px;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--ink-navy);margin:0 0 32px;max-width:32ch;text-wrap:pretty}
.dt .g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px;margin-bottom:22px}
.dt>.ds{margin-top:22px}
.box{background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius-2xl);padding:26px}
.box.sol{border-color:var(--sky-200);box-shadow:var(--shadow-md)}
.box.q{border-color:rgba(251,191,36,.45);background:rgba(252,211,77,.1)}
.lbl{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-400);margin-bottom:14px}
.box.sol .lbl{color:var(--sky-600)}
.box p{margin:0 0 16px;font-size:15px;line-height:1.55;color:var(--slate-700);text-wrap:pretty}
.box .sh{font-size:20px;font-weight:700;line-height:1.32;color:var(--slate-800);margin:0 0 20px;text-wrap:pretty}
.box blockquote{margin:0;padding:4px 0 4px 16px;border-left:3px solid var(--sky-200);font-style:italic;font-size:14.5px;line-height:1.5;color:var(--slate-600)}
.box blockquote cite{display:block;font-style:normal;font-size:12px;font-weight:600;color:var(--slate-400);margin-top:7px}
.box ol{margin:0;padding:0;counter-reset:m}
.box ol li{list-style:none;counter-increment:m;position:relative;padding-left:36px;margin-bottom:14px;font-size:14.5px;line-height:1.5;color:var(--slate-600);text-wrap:pretty}
.box ol li::before{content:counter(m);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:999px;background:var(--sky-100);color:var(--sky-800);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-bottom:22px}
.g3 .box{padding:22px}
.g3 .h{font-size:15px;font-weight:700;color:var(--slate-800);margin:0 0 6px}
.g3 .s{font-size:13px;line-height:1.45;color:var(--slate-500);margin:0}
.rel{display:flex;flex-wrap:wrap;gap:8px}
.rel a{font-family:ui-monospace,Menlo,monospace;font-size:12px;font-weight:700;color:var(--sky-800);background:var(--sky-100);border-radius:999px;padding:4px 11px}
.qs{margin:0;padding:0}
.qs li{list-style:none;font-size:13.5px;line-height:1.5;color:var(--slate-700);padding-left:17px;position:relative;margin-bottom:10px}
.qs li::before{content:"?";position:absolute;left:0;font-weight:800;color:#b45309}
.ds{background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius-3xl);padding:30px}
.ds .t{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.ds .t h2{font-size:18px;font-weight:700;color:var(--slate-800);margin:0}
.ds .n{font-size:14px;line-height:1.5;color:var(--slate-500);margin:0 0 22px;max-width:72ch}
.frame{border:2px dashed var(--slate-200);border-radius:var(--radius-2xl);background:var(--slate-50);padding:44px 32px;text-align:center}
.frame b{display:block;font-size:15px;font-weight:600;color:var(--slate-500);margin-bottom:6px}
.frame small{font-size:13px;color:var(--slate-400)}
@media(max-width:1100px){.wrap{padding:0 22px}.dt{padding:32px 22px 70px}.dt .g2,.g3{grid-template-columns:1fr}th.sm,td.sm{display:none}}
/* proto */
.tabs2{display:flex;gap:3px;flex-wrap:wrap;background:var(--slate-50);border-radius:999px;padding:4px}
.tabs2 a,.tabs2 span{border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--slate-600);white-space:nowrap}
.tabs2 a:hover{background:#fff}.tabs2 a.on{background:var(--sky-500);color:#fff}
.tabs2 span{color:var(--slate-300);cursor:default}
.ctx{background:var(--sky-50);border-bottom:1px solid var(--sky-200)}
.ctx .wrap{padding:11px 48px;font-size:13px;color:var(--slate-600)}
.kiosk{background:#e2e8f0;min-height:70vh}
.kbar{display:flex;align-items:center;gap:14px;background:#fff;padding:0 20px;flex-wrap:wrap}
.kb-l{display:flex;align-items:center;gap:11px;padding:14px 0}.kb-l img{height:30px}.kb-l b{font-size:16.5px;font-weight:600}
.kb-n{display:flex;gap:4px;overflow-x:auto}
.kb-n span{display:flex;align-items:center;gap:8px;padding:14px 12px 11px;border-bottom:4px solid transparent;font-size:13.5px;font-weight:500;white-space:nowrap}
.kb-n span.on{border-bottom-color:var(--sky-500)}.kb-n i{font-size:12px;color:var(--slate-500)}
.kb-x{margin-left:auto;background:#2c3a4b;color:#fff;border-radius:9px;padding:9px 14px;font-size:12.5px;font-weight:700;white-space:nowrap}
.kbody{padding:26px 30px 34px}
.khead .bk{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;margin-bottom:10px}
.kt{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.kt h1{font-size:34px;font-weight:800;letter-spacing:-.025em;margin:0}
.kacts{margin-left:auto;display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;gap:9px;border:0;border-radius:9px;padding:10px 16px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.btn.g{background:#ccd6e2;color:var(--slate-700)}.btn.s{background:var(--sky-300);color:var(--slate-800)}
.btn.w{background:#fff;border:1px solid var(--slate-200);color:var(--slate-600)}.btn.w.on{background:var(--sky-500);border-color:var(--sky-500);color:#fff}
.btn.p{background:var(--sky-300);color:var(--slate-800)}
.kmain{display:flex;gap:34px;align-items:flex-start}
.kmain aside{width:172px;flex-shrink:0;display:grid;gap:14px;padding-top:8px}
.kmain aside span{font-size:14.5px;font-weight:700;white-space:nowrap}
.kmain aside span.on{color:var(--sky-600)}
.kcol{flex:1;min-width:0}
.ghead{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.ghead h2{font-size:28px;font-weight:800;letter-spacing:-.02em;margin:0}
.ghead .gr{margin-left:auto;position:relative}
.tools{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:12px}
.srch{display:flex;align-items:center;gap:10px;background:#fff;border-radius:var(--radius-lg);padding:10px 14px;width:320px;box-shadow:var(--shadow-xs)}
.srch input{border:0;outline:none;font:inherit;font-size:13px;width:100%;background:transparent}
.lnk{border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--slate-500);cursor:pointer;padding:8px 4px}
.lnk.d{color:#cbd5e1;margin-left:auto}
.cnt{margin-left:auto;font-size:12.5px;color:var(--slate-500)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.bulk{background:#0f3f56;border-radius:var(--radius-xl);padding:12px 14px 12px 18px;margin-bottom:14px;display:flex;align-items:center;gap:13px;flex-wrap:wrap;box-shadow:var(--shadow-md)}
.bulk>b{font-size:14px;color:#fff;white-space:nowrap}
.ba{display:flex;gap:8px;flex-wrap:wrap}
.ab{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);color:#fff;border-radius:9px;padding:8px 13px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.ab.p{background:var(--sky-300);border-color:var(--sky-300);color:var(--slate-800)}
.noselect{display:flex;align-items:center;gap:13px;background:#e6ebf2;border:1px dashed #b3c1d1;border-radius:var(--radius-lg);padding:11px 16px;margin-bottom:14px;font-size:12.5px;font-weight:600;color:var(--slate-500)}
.noselect small{margin-left:auto;font-weight:400;color:var(--slate-400)}
.scroll{overflow-x:auto;padding-bottom:6px;margin-top:22px}
.kcol>.bulk,.kcol>.noselect{margin-bottom:0}
.kcol>.chips{margin-bottom:0}
.kcol>.foot2{margin-top:22px}
table.gt{border-collapse:separate;border-spacing:0 9px;width:100%;min-width:1796px}
table.gt th{text-align:left;font-size:11.5px;font-weight:500;color:var(--slate-500);padding:0 10px 9px;white-space:nowrap;cursor:pointer;box-sizing:border-box}
table.gt th.key{font-weight:700;color:var(--sky-700)}
table.gt th i{font-size:9px;opacity:.3}table.gt th.srt{color:var(--sky-700);font-weight:800}table.gt th.srt i{opacity:1}
table.gt td{background:#fff;padding:14px 10px;font-size:12.5px;color:var(--slate-600);vertical-align:middle;box-sizing:border-box}
table.gt td:first-child{border-radius:var(--radius-xl) 0 0 var(--radius-xl);padding-left:18px}
table.gt td:last-child{border-radius:0 var(--radius-xl) var(--radius-xl) 0;text-align:right;padding-right:18px}
table.gt tr[data-ext]{cursor:pointer}
table.gt tr[data-ext]:hover td{background:var(--sky-50)}
table.gt tr.setup td{background:#fff5f6}
.hid{display:none}
.cb{display:inline-block;width:17px;height:17px;border-radius:5px;border:1px solid var(--slate-300);background:#fff;vertical-align:middle}
.cb.on{background:var(--sky-500);border-color:var(--sky-500);position:relative}
.cb.on::after{content:"✓";position:absolute;inset:0;color:#fff;font-size:10px;line-height:15px;text-align:center}
.gn{font-size:13.5px;font-weight:700;color:var(--slate-800)}
.ow,.nm{font-size:12.5px;font-weight:600;color:var(--slate-800);display:block}
.ow.bad,.bad{color:#be123c}
td small{display:block;font-size:11px;color:var(--slate-400);margin-top:2px}
.cn{display:block;font-size:12.5px;color:var(--slate-700)}
.rd{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;white-space:nowrap}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:middle}
.tk{font-size:15px;font-weight:800}
.mut{color:var(--slate-400)}
.mini{display:inline-block;background:#fff;border:1px solid var(--slate-200);border-radius:8px;padding:5px 10px;font-size:11.5px;font-weight:600;color:var(--slate-700);margin-left:6px}
tr.note td{background:#fffbeb!important;border-radius:var(--radius-lg)!important;padding:10px 15px!important}
tr.note div{display:flex;gap:11px;font-size:12.5px;line-height:1.45;color:#78350f;max-width:940px}
tr.note i{color:#b45309;font-size:11px;margin-top:3px}
.foot2{display:flex;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap}
.foot2 small{font-size:12px;color:var(--slate-500);display:flex;align-items:center;gap:7px}
.foot2 small.r{margin-left:auto}
.picker{position:absolute;right:0;top:44px;width:290px;background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);z-index:60;overflow:hidden}
.ghead .gr .picker{right:0}
.ph{padding:14px 16px 12px;border-bottom:1px solid var(--slate-100)}
.ph b{font-size:13.5px;font-weight:800;display:block}
.ph small{font-size:11.5px;color:var(--slate-500);line-height:1.4;display:block;margin-top:3px}
.pl{max-height:340px;overflow-y:auto;padding:8px}
.pg span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--slate-400);padding:8px 8px 6px}
.pg label{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;font-size:13px;color:var(--slate-700);cursor:pointer}
.pg label:hover{background:var(--sky-50)}.pg label.lk{opacity:.55;cursor:default}
.pg i{margin-left:auto;font-size:9px;color:var(--slate-300)}
.pf{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--slate-50);border-top:1px solid var(--slate-100)}
.pf small{margin-left:auto;font-size:11.5px;color:var(--slate-400)}
.modal{position:fixed;inset:0;background:rgba(15,40,61,.5);display:none;align-items:flex-start;justify-content:center;padding:56px 24px;overflow:auto;z-index:120}
.modal.on{display:flex}
.sheet{background:#fff;border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);width:100%;max-width:640px;display:flex;flex-direction:column;max-height:84vh;overflow:hidden}
.mh{display:flex;align-items:flex-start;gap:14px;padding:22px 26px 17px;border-bottom:1px solid var(--slate-100)}
.mh b{font-size:18px;font-weight:800;letter-spacing:-.01em;display:block}
.mh small{font-size:12.5px;color:var(--slate-500);display:block;margin-top:4px}
.x{margin-left:auto;width:29px;height:29px;border-radius:8px;border:1px solid var(--slate-200);background:#fff;color:var(--slate-500);cursor:pointer;font-size:13px;flex-shrink:0}
.mb{padding:22px 26px;overflow-y:auto;flex:1}
.mf{display:flex;align-items:center;gap:11px;padding:16px 26px;background:var(--slate-50);border-top:1px solid var(--slate-100)}
.mf small{font-size:12px;color:var(--slate-500)}.mf div{margin-left:auto;display:flex;gap:9px}
.lbl2{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--slate-400);margin:18px 0 10px}
.mb .lbl2:first-child{margin-top:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{border-radius:var(--radius-xl);padding:16px 18px}
.stat b{display:block;font-size:28px;font-weight:800;line-height:1}
.stat span{font-size:13px;font-weight:600;margin-top:5px;display:block}
.stat.ok{background:#ecfdf7;border:1px solid #99e6cf}.stat.ok b,.stat.ok span{color:#0f766e}
.stat.no{background:#fff1f3;border:1px solid #fda4b4}.stat.no b,.stat.no span{color:#be123c}
.opts{display:flex;gap:7px;flex-wrap:wrap}
.opt{border:1px solid var(--slate-200);background:#fff;border-radius:999px;padding:8px 14px;font:inherit;font-size:12.5px;font-weight:600;color:var(--slate-600);cursor:pointer}
.opt.on{background:var(--sky-500);border-color:var(--sky-500);color:#fff}
.reasons{display:grid;gap:8px}
.reasons div{display:flex;align-items:center;gap:12px;border:1px solid var(--slate-200);border-radius:var(--radius-lg);padding:12px 15px;font-size:13.5px;color:var(--slate-700)}
.reasons i{color:var(--slate-400);font-size:13px;width:16px}
.reasons b{margin-left:auto;font-size:13px;font-weight:700;color:var(--slate-800)}
.note2,.tip{display:flex;gap:11px;border-radius:var(--radius-lg);padding:13px 15px;font-size:12.5px;line-height:1.5;margin-top:12px}
.note2{background:var(--slate-50);color:var(--slate-600)}
.tip{background:var(--sky-50);border:1px solid var(--sky-200);color:var(--slate-600)}
.tip i,.note2 i{color:var(--sky-700);margin-top:2px}
.attrs{display:grid;gap:6px}
.attrs div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:8px;background:var(--slate-50);border-radius:var(--radius-lg);padding:10px 13px;font-size:13px}
.attrs b{font-weight:600;color:var(--slate-700)}
.tmpl{display:grid;gap:8px;margin-bottom:16px}
.tr{display:flex;align-items:center;gap:12px;border:1px solid var(--slate-200);background:#fff;border-radius:var(--radius-lg);padding:12px 15px;font:inherit;text-align:left;cursor:pointer;width:100%}
.tr.on{border-color:var(--sky-400);background:var(--sky-50)}
.rad{width:15px;height:15px;border-radius:50%;border:1px solid var(--slate-300);background:#fff;flex-shrink:0}
.tr.on .rad{background:var(--sky-500);border-color:var(--sky-500)}
.tr b{font-size:13.5px;font-weight:700;color:var(--slate-800);display:block}
.tr small{font-size:12px;color:var(--slate-500);display:block;margin-top:2px}
.tr .pill{margin-left:auto}
.bd{font-size:14.5px;line-height:1.55;color:var(--slate-700);margin:0 0 18px}
.done{text-align:center;padding:20px 0}
.done i{color:#0f766e;font-size:26px}
.done b{display:block;font-size:17px;font-weight:800;margin:12px 0 8px}
.done p{font-size:13.5px;line-height:1.55;color:var(--slate-500);margin:0 auto;max-width:52ch}
.walk{display:flex;align-items:center;gap:9px;padding:13px 22px;background:#0f3f56;flex-wrap:wrap}
.walk>b{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#7dd3fc}
.wb{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#e2e8f0;border-radius:9px;padding:7px 13px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.wb.on{background:var(--sky-300);border-color:var(--sky-300);color:var(--slate-800)}
.walk small{margin-left:auto;font-size:12px;color:#94a3b8}
@media(max-width:1100px){.ctx .wrap{padding:11px 22px}.kbody{padding:20px}.two{grid-template-columns:1fr}}
.pcard.on{cursor:pointer;transition:box-shadow 250ms var(--ease-default),border-color 250ms var(--ease-default),transform 250ms var(--ease-default)}
.pcard.on:hover{border-color:var(--sky-300);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.pcard.on .ic{background:var(--sky-100);color:var(--sky-700)}
.pcard .go{margin-left:auto;color:var(--slate-300);font-size:11px}
.pcard.on:hover .go{color:var(--sky-600)}
.pcard.off{opacity:.6}
.pcard.off .pill{margin-left:auto}
.frame.lnk2{display:block;border:2px solid var(--sky-300);background:var(--sky-50);text-decoration:none;transition:border-color 250ms var(--ease-default),box-shadow 250ms var(--ease-default),transform 250ms var(--ease-default)}
.frame.lnk2:hover{border-color:var(--sky-500);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.frame.lnk2 b{color:var(--sky-800)}
.frame.lnk2 small{color:var(--sky-700)}
/* team creation */
.tcbody{padding:30px 24px 40px;display:flex;flex-direction:column;align-items:center}
.tcbody>.tccol,.tcbody>.tcfoot{width:100%;max-width:560px}
.tch{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:16px}
.tch i{color:var(--slate-700);font-size:17px}
.tch h1{font-size:25px;font-weight:800;letter-spacing:-.02em;margin:0}
.sb{border:0;background:transparent;border-radius:999px;padding:7px 15px;font:inherit;font-size:12.5px;font-weight:500;color:var(--slate-500);cursor:pointer;display:flex;align-items:center;gap:7px;white-space:nowrap}
.stepper{display:flex;gap:2px;justify-content:center;flex-wrap:wrap;background:#edf1f6;border-radius:999px;padding:5px;width:max-content;max-width:100%;margin:0 auto 26px}
.sb.on{background:#fff;color:var(--sky-700);font-weight:700}
.sb i,.sb svg{display:none}
.sb.dn{display:flex}
.sb.dn::before{content:"\2713";color:#0f766e;font-weight:700;font-size:11px;margin-right:2px}
.tccol{display:grid;gap:22px;align-content:start}
.tccol .pane{display:grid;gap:22px;align-content:start}
.tccol .pane>.card,.tccol .pane>.dark{margin:0}
.card{background:#fbfcfd;border-radius:var(--radius-2xl);padding:24px 26px;box-shadow:var(--shadow-sm);display:grid;gap:14px}
.card label{display:block;font-size:13.5px;font-weight:700;color:var(--slate-800)}
.lrow label{margin:0}
.lrow>div{min-width:0}
.card label.big{font-size:15px;font-weight:800}
.fg{display:grid;gap:8px}
.two2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card input{box-sizing:border-box;width:100%;border:1px solid var(--slate-300);border-radius:var(--radius-lg);padding:12px 14px;font:inherit;font-size:14px;color:var(--slate-800);outline:none;background:#fff}
.fake{display:flex;align-items:center;background:#fff;border:1px solid var(--slate-300);border-radius:var(--radius-lg);padding:12px 14px;font-size:14px;color:var(--slate-800)}
.fake i{margin-left:auto;font-size:10px;color:var(--slate-500)}
.fake.mut{color:var(--slate-400)}
.lrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.help{font-size:12px;line-height:1.5;color:var(--slate-500)}
.help.r{margin-left:auto}
.help.good{color:#0f766e}.help.bad{color:#be123c}
.ref2{font-size:11.5px;font-weight:700;color:var(--slate-400);margin-left:auto}
.inp{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--slate-300);border-radius:var(--radius-lg);padding:0 14px}
.inp input{border:0!important;padding:12px 0!important}
.inp.ok{border-color:#99e6cf}.inp.no{border-color:#fda4b4}
.inp.ok i{color:#0f766e}.inp.no i{color:#be123c}
.inp .suf{font-size:14px;color:var(--slate-400)}
.urlrow{display:flex;gap:8px}.urlrow .inp{flex:1}
.tg{margin-left:auto;display:flex;background:var(--sky-300);border-radius:999px;padding:3px;cursor:pointer}
.tg span{border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.9)}
.tg span.on{background:#fff;color:var(--slate-700)}
.profs{display:grid;gap:10px}
.pf2{display:flex;align-items:flex-start;gap:12px;text-align:left;border:1px solid var(--slate-200);background:#fff;border-radius:var(--radius-xl);padding:16px 18px;font:inherit;cursor:pointer;width:100%}
.pf2.on{border-color:var(--sky-400);background:var(--sky-50)}
.pf2 .rad{margin-top:3px}
.pf2.on .rad{background:var(--sky-500);border-color:var(--sky-500)}
.pf2>div{flex:1;min-width:0}
.pf2 b{font-size:14px;font-weight:700;color:var(--slate-800);display:block}
.pf2 small{font-size:12.5px;line-height:1.5;color:var(--slate-500);display:block;margin-top:5px}
.pf2 em{font-size:11.5px;font-style:normal;color:var(--slate-400);white-space:nowrap;flex-shrink:0}
.setrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.setrow span{font-size:11px;font-weight:600;color:var(--slate-500);background:var(--slate-50);border-radius:999px;padding:3px 10px}
.pf2.on .setrow span{background:#fff;color:var(--sky-800)}
.warn{display:flex;gap:11px;background:#fff5f6;border:1px solid #fda4b4;border-radius:var(--radius-lg);padding:13px 16px;font-size:12.5px;line-height:1.5;color:#9f1239}
.warn i{color:#be123c;margin-top:2px}
.resolved{display:grid;gap:8px}
.resolved>div{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius-lg);padding:12px 15px}
.resolved b{font-size:13px;font-weight:600;color:var(--slate-800);display:block}
.resolved small{font-size:11.5px;color:var(--slate-400);display:block;margin-top:2px}
.resolved em{margin-left:auto;font-style:normal;font-size:13px;font-weight:700;color:var(--slate-800);white-space:nowrap}
.resolved em.mut{color:var(--slate-400)}
.seeds{display:grid;gap:10px}
.sd{display:flex;align-items:flex-start;gap:13px;text-align:left;border:1px solid var(--slate-200);background:#fff;border-radius:var(--radius-xl);padding:15px 17px;font:inherit;cursor:pointer;width:100%}
.sd.on{border-color:var(--sky-200);background:var(--sky-50)}
.ck{width:18px;height:18px;border-radius:5px;border:1px solid var(--slate-300);background:#fff;flex-shrink:0;margin-top:1px;position:relative}
.sd.on .ck{background:var(--sky-500);border-color:var(--sky-500)}
.sd.on .ck::after{content:"✓";position:absolute;inset:0;color:#fff;font-size:10px;line-height:16px;text-align:center}
.sd b{font-size:13.5px;font-weight:700;color:var(--slate-800)}
.sd .ref2{margin-left:6px}
.chk{display:grid;gap:7px}
.cr{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius-lg);padding:12px 15px;font:inherit;cursor:pointer;text-align:left;width:100%}
.cr:hover{border-color:var(--sky-300)}
.cr.bad{border-color:#fcd34d}
.cr i{color:#0f766e;font-size:13px;width:15px;flex-shrink:0}
.cr.bad i{color:#b45309}
.cr b{font-size:13px;font-weight:600;color:var(--slate-800)}
.cr span{margin-left:auto;font-size:12.5px;color:#0f766e;white-space:nowrap}
.cr.bad span{color:#b45309}
.cr small{font-size:11px;font-weight:700;color:var(--slate-300);flex-shrink:0}
.dark{background:#0f3f56;border-radius:var(--radius-2xl);padding:24px 26px}
.dark b{font-size:13px;font-weight:800;color:#7dd3fc;display:block;margin-bottom:12px}
.dark ul{margin:0;padding:0;display:grid;gap:9px}
.dark li{list-style:none;font-size:13px;line-height:1.5;color:#e2e8f0;padding-left:22px;position:relative}
.dark li::before{content:"✓";position:absolute;left:0;color:var(--sky-300);font-weight:700}
.tcfoot{position:sticky;bottom:0;background:transparent;border-top:0;padding:14px 0;margin-top:26px;display:flex;gap:12px}
.btn.wide{flex:1;justify-content:center}
/* number intake */
.kiosk.light{background:var(--slate-50)}
.nibody{padding:30px 24px 40px}
.nih{text-align:center;margin-bottom:26px}
.nih h1{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px}
.nih p{font-size:14px;color:var(--slate-500);margin:0}
.nibody .pane,.nibody .tcfoot{max-width:600px;margin-left:auto;margin-right:auto}
.nibody .pane{display:grid;gap:22px;align-content:start}
.branches{display:grid;gap:10px}
.br{display:flex;align-items:flex-start;gap:14px;text-align:left;border:1px solid var(--slate-200);background:#fff;border-radius:var(--radius-xl);padding:16px 18px;font:inherit;cursor:pointer;width:100%}
.br.on{border-color:var(--sky-400);background:var(--sky-50)}
.br>i{width:34px;height:34px;border-radius:10px;background:var(--slate-100);color:var(--slate-500);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.br.on>i{background:var(--sky-500);color:#fff}
.br b{font-size:14px;font-weight:700;color:var(--slate-800);display:block}
.br small{font-size:12.5px;line-height:1.5;color:var(--slate-500);display:block;margin-top:4px}
.three{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
.mono{font-family:ui-monospace,Menlo,monospace}
.checking{display:flex;align-items:center;gap:10px;background:var(--slate-50);border-radius:var(--radius-lg);padding:13px 15px;font-size:13px;color:var(--slate-500)}
.checking i{animation:sp 1s linear infinite;color:var(--sky-600)}
@keyframes sp{to{transform:rotate(360deg)}}
.dupe,.vd{border-radius:var(--radius-xl);padding:18px 20px;display:grid;gap:14px}
.dupe.ok,.vd.ok{background:#ecfdf7;border:1px solid #99e6cf}
.dupe.warn,.vd.warn{background:#fffbeb;border:1px solid #fcd34d}
.dupe.bad,.vd.bad{background:#fff5f6;border:1px solid #fda4b4}
.dupe.info{background:var(--sky-50);border:1px solid var(--sky-200)}
.dh{display:flex;gap:13px}
.dh>i{font-size:17px;margin-top:2px;flex-shrink:0}
.dupe.ok .dh>i,.vd.ok .dh>i{color:#0f766e}
.dupe.warn .dh>i,.vd.warn .dh>i{color:#b45309}
.dupe.bad .dh>i,.vd.bad .dh>i{color:#be123c}
.dupe.info .dh>i{color:var(--sky-700)}
.dh>div>b:first-child{font-size:15px;font-weight:700;color:var(--slate-800);display:block;margin-bottom:5px}
.dh p b{display:inline;font-weight:700;color:var(--slate-800)}
.dh p{font-size:13px;line-height:1.55;color:var(--slate-600);margin:0}
.dm{display:grid;gap:8px}
.dm>div{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius-lg);padding:13px 15px}
.dm b{font-size:13.5px;font-weight:700;color:var(--slate-800)}
.dm .why{display:block;font-size:12.5px;color:var(--slate-500);margin-top:4px}
.dm>div>button,.dm>div>span{margin-left:auto;flex-shrink:0}
.da{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.df{font-size:12px;line-height:1.55;color:var(--slate-500);padding-top:13px;border-top:1px solid rgba(0,0,0,.07)}
.numbers{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:9px}
.nm2{border:1px solid var(--slate-200);background:#fff;border-radius:var(--radius-lg);padding:13px 15px;font:inherit;font-size:13.5px;font-weight:600;color:var(--slate-700);cursor:pointer;font-family:ui-monospace,Menlo,monospace}
.nm2.on{border-color:var(--sky-400);background:var(--sky-50);color:var(--sky-800)}
.done2{text-align:center;padding:34px 26px}
.done2>i{color:#0f766e;font-size:28px}
.done2 b{display:block;font-size:19px;font-weight:800;margin:14px 0 9px}
.done2 p{font-size:13.5px;line-height:1.55;color:var(--slate-500);margin:0 auto;max-width:52ch}
.blocked{max-width:600px;margin:10px auto 0;font-size:12.5px;color:#b45309;text-align:center}
.btn.off{opacity:.5}
/* terms + registration */
[hidden]{display:none!important}
.kcol .pane{display:grid;gap:22px;align-content:start}
.kcol .pane>.card,.kcol .pane>.warn,.kcol .pane>.dark,.kcol .pane>section{margin-bottom:0}
.kcol .pane>.two3{margin-bottom:0}
.kcol>.ghead{margin-bottom:18px}
.kcol>.lead{margin-bottom:22px}
.kcol>.ptabs{margin-bottom:24px}
.docs+.warn{margin-top:22px}
.dhead{margin-bottom:0}
.warn.amber{background:#fffbeb;border-color:#fcd34d;color:#78350f}
.warn.amber i{color:#b45309}
.card.focus{border:2px solid var(--sky-400)}
.card.bad2{border:1px solid #fda4b4}
.card textarea{box-sizing:border-box;width:100%;border:1px solid var(--slate-300);border-radius:var(--radius-lg);padding:12px 14px;font:inherit;font-size:13px;line-height:1.55;color:var(--slate-700);outline:none;background:#fff;resize:vertical}
.dhead,.chead,.qhead,.rhead{display:grid;gap:12px;padding:0 20px 10px;font-size:11.5px;font-weight:500;color:var(--slate-500)}
.dhead span.key,.chead span.key,.qhead span.key,.rhead span.key{font-weight:700;color:var(--sky-700)}
.dhead{grid-template-columns:minmax(0,1.5fr) 118px minmax(0,1fr) 170px 130px 190px}
.docs{display:grid;gap:10px}
.drow{display:grid;grid-template-columns:minmax(0,1.5fr) 118px minmax(0,1fr) 170px 130px 190px;gap:12px;align-items:center;background:#fff;border:1px solid transparent;border-radius:var(--radius-xl);padding:17px 20px;box-shadow:var(--shadow-xs)}
.drow.legacy{border-color:var(--slate-200)}
.drow b{font-size:14px;font-weight:700;color:var(--slate-800);display:block}
.drow small{font-size:12px;color:var(--slate-400);display:block;margin-top:3px}
.drow .mut{font-size:13px;color:var(--slate-600)}
.tgt{display:flex;align-items:flex-start;gap:9px}
.tgt>i{color:var(--sky-700);font-size:11px;margin-top:3px}
.tgt b{font-size:13px;font-weight:600;color:var(--sky-700)}
.dacts{display:flex;gap:7px;justify-content:flex-end}
.dacts .btn{padding:8px 12px;font-size:12px}
.picker2{border:1px solid var(--slate-200);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.p2h{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--slate-100)}
.p2h input{flex:1;border:0;outline:none;font:inherit;font-size:13px;background:transparent}
.p2h b{font-size:12px;color:var(--sky-700);white-space:nowrap}
.p2l{max-height:210px;overflow-y:auto}
.p2r{display:flex;align-items:center;gap:11px;padding:11px 14px;border:0;border-bottom:1px solid var(--slate-100);background:#fff;font:inherit;width:100%;text-align:left;cursor:pointer}
.p2r.on{background:var(--sky-50)}
.p2r>b{font-size:13px;font-weight:600;color:var(--slate-800)}
.p2r .lock{margin-left:auto;font-size:11.5px;font-weight:600;color:#b45309}
.p2r .pill{margin-left:auto}
.p2r .lock+.pill{margin-left:9px}
.cov{display:grid;gap:8px}
.cov>div{display:flex;align-items:center;gap:11px;border:1px solid;border-radius:var(--radius-md);padding:11px 14px}
.cov span{font-size:12.5px;color:var(--slate-700)}
.cov b{margin-left:auto;font-size:14px;font-weight:800}
.cal{border:1px solid var(--slate-200);border-radius:var(--radius-lg);padding:14px;background:#fff}
.calh{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.calh b{flex:1;text-align:center;font-size:13.5px;font-weight:700}
.calh i{color:var(--slate-400);font-size:11px}
.cal .dn,.cal .dg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .dn span{text-align:center;font-size:11.5px;font-weight:600;color:var(--slate-400)}
.cal .dg{margin-top:6px}
.dc{border:1px solid var(--slate-200);background:#fff;border-radius:8px;padding:8px 0;font:inherit;font-size:12.5px;color:var(--slate-700);cursor:pointer}
.dc.on{background:var(--sky-100);border-color:var(--sky-400);color:var(--sky-800);font-weight:800}
.dc.off{background:var(--slate-50);border-color:transparent;color:var(--slate-300);cursor:default}
.times{display:flex;gap:12px;border:1px solid var(--slate-200);border-radius:var(--radius-lg);padding:14px;background:#fff}
.hrs{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.mns{width:132px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.tb{border:1px solid var(--slate-200);background:#fff;border-radius:7px;padding:7px 0;font:inherit;font-size:12px;font-weight:600;color:var(--slate-700);cursor:pointer}
.tb.on{background:var(--sky-200);border-color:var(--sky-400);color:var(--sky-800)}
.cvh{margin-bottom:20px}
.cvh h3{display:inline-block;font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 12px 0 0}
.cvh p{font-size:13.5px;color:var(--slate-500);margin:10px 0 0;max-width:74ch;line-height:1.5}
.stats4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
.stats4>div{background:#fff;border:1px solid;border-radius:var(--radius-xl);padding:17px 19px;box-shadow:var(--shadow-xs)}
.stats4 b{font-size:26px;font-weight:800;line-height:1;display:block}
.stats4 small{font-size:12.5px;font-weight:600;color:var(--slate-600);margin-top:6px;display:block;line-height:1.4}
.cvrows{display:grid;gap:10px}
.cvrows>div{background:#fff;border:1px solid var(--slate-200);border-left:3px solid;border-radius:var(--radius-xl);padding:17px 20px;box-shadow:var(--shadow-xs)}
.cvrows b{font-size:14.5px;font-weight:700;color:var(--slate-800)}
.cvrows small.r{margin-left:auto;font-size:13px;font-weight:700;color:var(--slate-600)}
.cvrows p{font-size:13px;line-height:1.55;color:var(--slate-500);margin:8px 0 0}
.mtabs{display:flex;gap:4px;background:#ccd6e2;border-radius:var(--radius-lg);padding:5px;margin:6px 26px 16px}
.mt{flex:1;border:0;background:transparent;border-radius:9px;padding:9px 12px;font:inherit;font-size:13px;font-weight:600;color:var(--slate-700);cursor:pointer}
.mt.on{background:#fff;box-shadow:var(--shadow-xs)}
.ar{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius-xl);padding:14px 16px;margin-bottom:9px}
.ar b{font-size:14px;font-weight:700;color:var(--slate-800);display:block}
.ar small{font-size:12.5px;color:var(--slate-600);display:block;margin-top:3px}
.ar small.em{color:var(--sky-700)}
.ar small.bad{color:#be123c}
.ar .when,.ar .pill{margin-left:auto;white-space:nowrap}
.lead{font-size:13.5px;line-height:1.5;color:var(--slate-500);margin:0 0 20px;max-width:88ch}
.ptabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.pt{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid transparent;border-radius:999px;padding:8px 15px;font:inherit;font-size:12.5px;font-weight:700;color:var(--slate-600);cursor:pointer;white-space:nowrap}
.pt.on{background:var(--sky-500);border-color:var(--sky-500);color:#fff}
.two3{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.ladder{display:flex;gap:8px}
.ladder>div{flex:1}
.ladder span{display:block;height:4px;border-radius:999px;margin-bottom:6px}
.ladder small{font-size:10.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bfields{display:grid;gap:0}
.bfields>div{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--slate-100)}
.bfields span{font-size:12.5px;color:var(--slate-500);min-width:132px}
.bfields b{font-size:13px;font-weight:600;color:var(--slate-800)}
.lockbtn{margin-left:auto;display:flex;align-items:center;gap:7px;border:0;background:none;font:inherit;font-size:11.5px;font-weight:700;color:#b45309;cursor:pointer}
.lockbtn i{font-size:9px}
.vets{display:grid;gap:8px}
.vets>div{display:flex;align-items:center;gap:11px;border:1px solid var(--slate-200);border-radius:var(--radius-lg);padding:11px 14px}
.vets b{font-size:12px;color:var(--slate-700)}
.vets small{font-size:12px;color:var(--slate-500)}
.chead{grid-template-columns:minmax(0,1.2fr) 110px 128px minmax(0,1.6fr) 82px}
.crows{display:grid;gap:9px}
.crow{display:grid;grid-template-columns:minmax(0,1.2fr) 110px 128px minmax(0,1.6fr) 82px;gap:12px;align-items:center;background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius-xl);padding:15px 18px}
.crow.bad{background:#fff9fa;border-color:#fda4b4}
.crow b{font-size:13.5px;font-weight:700;color:var(--slate-800);display:block}
.crow small{font-size:11px;color:var(--slate-400);display:block;margin-top:3px}
.mnos{display:flex;gap:6px;flex-wrap:wrap}
.mnos span{display:flex;align-items:center;gap:6px;border:1px solid;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:700;white-space:nowrap}
.mnos i{width:6px;height:6px;border-radius:50%;display:block}
.mnos em{font-style:normal;font-size:10.5px;opacity:.75;font-weight:500}
.num2{font-size:13px;font-weight:700;color:var(--slate-600)}
.fbk{display:grid;gap:8px}
.fbk>div{display:flex;align-items:center;gap:13px;background:#fff5f6;border:1px solid #fda4b4;border-radius:var(--radius-lg);padding:13px 15px}
.fbk b{font-size:10.5px;font-weight:700;color:#be123c;background:#fff;border-radius:5px;padding:3px 8px;flex-shrink:0}
.fbk span{font-size:12.5px;line-height:1.5;color:#9f1239}
.fbk .btn{margin-left:auto;flex-shrink:0;font-size:12px;padding:8px 12px}
.qhead{grid-template-columns:minmax(190px,1.1fr) repeat(5,minmax(0,1fr)) 92px;gap:10px}
.qrows{display:grid;gap:8px}
.qrow{display:grid;grid-template-columns:minmax(190px,1.1fr) repeat(5,minmax(0,1fr)) 92px;gap:10px;align-items:center;background:#fff;border:1px solid var(--sky-200);border-radius:var(--radius-lg);padding:13px 16px}
.qrow.off{background:var(--slate-50);border-color:var(--slate-200)}
.qrow>div>b{font-size:13px;font-weight:700;color:var(--slate-800);display:block}
.qrow>div>small{font-size:11px;color:var(--slate-400);display:block;margin-top:3px}
.qc b{font-size:13px;font-weight:700;color:var(--slate-800)}
.qc b.mut{color:var(--slate-400)}
.qc small{font-size:10.5px;color:var(--slate-400);display:block;margin-top:2px}
.fee{font-size:12.5px;font-weight:600;color:var(--slate-600)}
.sflag{display:flex;gap:11px;background:#fff5f6;border:1px solid #fda4b4;border-radius:var(--radius-md);padding:11px 13px;margin-top:7px}
.sflag b{font-size:10px;font-weight:700;color:#be123c;background:#fff;border-radius:5px;padding:3px 7px;flex-shrink:0;white-space:nowrap}
.sflag span{font-size:12px;line-height:1.5;color:#9f1239}
.rules{display:grid;gap:8px}
.rules>div{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius-lg);padding:11px 14px}
.rules i{font-size:11px;width:14px}
.rules b{font-size:10.5px;font-weight:700;color:var(--slate-500);flex-shrink:0}
.rules span{font-size:12.5px;color:var(--slate-700)}
.steps2{margin:0;padding:0;counter-reset:s2;display:grid;gap:12px}
.steps2 li{list-style:none;counter-increment:s2;position:relative;padding-left:38px}
.steps2 li::before{content:counter(s2);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:999px;background:var(--sky-100);color:var(--sky-800);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.steps2 b{font-size:13.5px;font-weight:700;color:var(--slate-800);display:block}
.steps2 span{font-size:12.5px;line-height:1.5;color:var(--slate-500);display:block;margin-top:4px}
.rhead{grid-template-columns:minmax(140px,1fr) minmax(190px,1.2fr) 104px 124px minmax(0,1.1fr);gap:10px}
.rrows{display:grid;gap:8px}
.rrows>div{display:grid;grid-template-columns:minmax(140px,1fr) minmax(190px,1.2fr) 104px 124px minmax(0,1.1fr);gap:10px;align-items:center;background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius-lg);padding:14px 16px}
.rrows>div.bad{background:#fff5f6;border-color:#fda4b4}
.rrows>div>b{font-size:13px;font-weight:700;color:var(--slate-800)}
.rrows>div>div span{font-size:12.5px;color:var(--slate-700);display:block}
.rrows>div>div small{font-size:11.5px;font-weight:700;display:block;margin-top:3px}
.verd{font-size:12px;line-height:1.45;color:var(--slate-500)}
.bad .verd{color:#be123c;font-weight:700}
.arrows li::before{content:"→"}
.mh.bad3{background:#fff5f6;border-bottom-color:#fda4b4}
.mh.bad3>i{color:#be123c;font-size:18px;margin-top:2px}
.warns{margin:0 0 18px;padding:0;display:grid;gap:10px}
.warns li{list-style:none;display:flex;gap:11px;font-size:13px;line-height:1.55;color:var(--slate-700)}
.warns i{color:#be123c;font-size:11px;margin-top:4px;width:14px;flex-shrink:0}
.sm2{font-size:12px;display:flex;align-items:center;gap:7px}
a.pill{text-decoration:none}
.pill.r{margin-left:auto}
@media(max-width:1200px){.two3,.stats4{grid-template-columns:1fr 1fr}}
/* Font Awesome kit swaps for