/* ══════════════════════════════════════════════════════════
   AskVio — v2 brand tokens
   ══════════════════════════════════════════════════════════ */

:root {
  /* Surfaces */
  --paper: #f7f8fa;
  --paper-deep: #eef1f5;
  --surface: #ffffff;
  --surface-2: #fbfcfd;
  --surface-3: #f3f5f8;

  /* Text */
  --ink: #14161a;
  --ink-soft: #464e5c;
  --muted: #6b7280;
  --faint: #6b7280;
  --faint-soft: #6b7280;
  --hairline: #e6e9ee;
  --hairline-soft: #eff1f5;
  --divider: #e6e9ee;

  /* Accent — one calm blue */
  --pine: #2e6be6;
  --pine-deep: #1d4fbf;
  --pine-mid: #4d84ec;
  --pine-soft: #eef3fd;
  --pine-softer: #f6f9fe;

  /* Semantic data ramps */
  --clay: #5925dc;
  --clay-soft: #f4f3ff;
  --ochre: #b54708;
  --ochre-soft: #fffaeb;
  --alert: #b42318;
  --alert-soft: #fef3f2;
  --green: #067647;
  --green-soft: #ecfdf3;

  /* Dark section */
  --dark: #101419;
  --dark-2: #171c22;
  --dark-3: #202832;
  --dark-hair: rgba(255,255,255,0.08);
  --dark-hair-2: rgba(255,255,255,0.13);
  --on-dark: #e8ebef;
  --on-dark-muted: #a2abb8;
  --on-dark-faint: #8d959f;

  /* Shadows */
  --sh-1: 0 1px 2px rgba(20,22,26,0.03);
  --sh-2: 0 1px 2px rgba(20,22,26,0.04), 0 8px 20px -6px rgba(20,22,26,0.07);
  --sh-3: 0 1px 2px rgba(20,22,26,0.04), 0 24px 56px -16px rgba(20,22,26,0.12);
  --sh-key: 0 1px 2px rgba(20,22,26,0.16);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,0.6);
  --sh-inset-dark: inset 0 1px 0 rgba(255,255,255,0.05);

  /* Radii */
  --r-2xl: 16px;
  --r-xl: 12px;
  --r-lg: 10px;
  --r-md: 8px;
  --r-sm: 6px;
  --r-xs: 5px;

  --ease: cubic-bezier(0.32,0.72,0,1);
  --ease-out: cubic-bezier(0.16,1,0.3,1);

  --shell: 1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Geist',-apple-system,'Segoe UI',sans-serif;font-optical-sizing:auto;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-numeric:tabular-nums}

.grain{display:none}

.display{font-size:clamp(2.55rem,5.2vw,4.4rem);font-weight:500;line-height:1;letter-spacing:-0.04em;margin:0;text-wrap:balance}
.h2{font-size:clamp(1.85rem,3.1vw,2.8rem);font-weight:500;line-height:1.08;letter-spacing:-0.032em;margin:0;text-wrap:balance}
.h3{font-size:1.12rem;font-weight:550;line-height:1.3;letter-spacing:-0.014em;margin:0}
.lede{font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.64;color:var(--ink-soft);margin:0;max-width:62ch;text-wrap:pretty}
.body{font-size:0.95rem;line-height:1.68;color:var(--muted);margin:0;max-width:64ch;text-wrap:pretty}
.mono{font-family:'Geist Mono',ui-monospace,monospace;font-feature-settings:'tnum' 1}

.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--pine-deep);background:var(--pine-soft);border:1px solid var(--pine-soft);padding:5px 11px;border-radius:999px;width:fit-content}
.eyebrow.bare{background:none;border:none;padding:0;color:var(--muted)}
.eyebrow.on-dark{background:rgba(255,255,255,0.06);border-color:var(--dark-hair-2);color:#9dbcf5}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 clamp(20px,4vw,44px)}
section{padding:clamp(76px,9vw,132px) 0 clamp(84px,9.6vw,144px)}

.bezel{background:var(--surface-3);border:1px solid var(--hairline);border-radius:var(--r-2xl);padding:6px}
.bezel>.core{background:var(--surface);border:1px solid var(--hairline-soft);border-radius:calc(var(--r-2xl) - 6px);box-shadow:var(--sh-2);overflow:hidden}
.bezel.dark{background:rgba(255,255,255,0.05);border-color:var(--dark-hair)}
.bezel.dark>.core{background:var(--dark-2);border-color:var(--dark-hair);box-shadow:var(--sh-inset-dark)}

.btn{display:inline-flex;align-items:center;gap:10px;padding:8px 8px 8px 18px;border-radius:var(--r-md);border:1px solid transparent;font-family:inherit;font-size:0.93rem;font-weight:500;letter-spacing:-0.008em;cursor:pointer;text-decoration:none;background:var(--ink);color:#fff;box-shadow:var(--sh-key);transition:transform 0.45s var(--ease),background 0.45s var(--ease)}
.btn:hover{background:#2b2f38;color:#fff}
.btn:active{transform:scale(0.98)}
.btn:focus-visible{outline:2px solid var(--pine);outline-offset:3px}
.btn .cap{width:26px;height:26px;border-radius:var(--r-sm);background:rgba(255,255,255,0.13);display:grid;place-items:center;font-size:13px;flex-shrink:0;transition:transform 0.45s var(--ease),background 0.45s var(--ease)}
.btn:hover .cap{transform:translate(2px,-1px);background:rgba(255,255,255,0.2)}

.btn.ghost{background:var(--surface);color:var(--ink-soft);border-color:var(--hairline);box-shadow:var(--sh-1)}
.btn.ghost:hover{background:var(--surface-3);color:var(--ink);border-color:#d7dce4}
.btn.ghost .cap{background:var(--surface-3);color:var(--muted)}
.btn.ghost:hover .cap{background:var(--paper-deep)}

.btn.on-dark{background:#fff;color:var(--ink);box-shadow:none}
.btn.on-dark:hover{background:#eef1f5;color:var(--ink)}
.btn.on-dark .cap{background:rgba(20,22,26,0.08)}

.btn.sm{font-size:0.86rem;padding:6px 6px 6px 14px;gap:8px}
.btn.sm .cap{width:23px;height:23px;font-size:11px;border-radius:var(--r-xs)}

.tlink{display:inline-flex;align-items:center;gap:7px;font-size:0.91rem;color:var(--muted);text-decoration:none;transition:color 0.4s var(--ease),gap 0.4s var(--ease)}
.tlink:hover{color:var(--ink);gap:11px}

a{color:var(--pine);text-decoration:none;transition:color 0.35s var(--ease)}
a:hover{color:var(--pine-deep)}

.brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:0.98rem;letter-spacing:-0.02em;color:var(--ink);text-decoration:none;flex-shrink:0}
.brand:hover{color:var(--ink)}
.mark{width:25px;height:25px;object-fit:contain;flex-shrink:0}

.rv{opacity:0;transform:translateY(14px);transition:opacity 0.72s var(--ease-out),transform 0.72s var(--ease-out)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-md) 0}
.skip:focus{left:0;color:#fff}

.rule{height:1px;background:var(--hairline);border:none;margin:0}
.tnum{font-variant-numeric:tabular-nums}