/* ============================================================
   Corp.Vellum — marketing site (production static build)
   Self-contained: design tokens + component styles in one file.
   Tokens ported 1:1 from the binding Corp.Vellum Design System.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* base / backgrounds */
  --cv-black:#0A0A0B; --cv-navy:#0F172B; --cv-navy-deep:#0B1220; --cv-blue-well:#0F2A5C;
  /* orange */
  --cv-orange:#FE9A00; --cv-orange-hot:#F05100; --cv-orange-deep:#BB4D00; --cv-amber:#F99C00; --cv-amber-bright:#FCBB00;
  /* blue */
  --cv-blue:#3B9EFF; --cv-blue-light:#63B3FF;
  /* text */
  --cv-text:#FAFAFA; --cv-text-muted:#A1A1AA; --cv-text-dim:#71717B; --cv-text-ink:#17171A;
  /* glass */
  --cv-glass-fill:rgba(255,255,255,0.05); --cv-glass-fill-strong:rgba(255,255,255,0.08);
  --cv-glass-border:rgba(255,255,255,0.10); --cv-glass-border-strong:rgba(255,255,255,0.16);
  --cv-hairline:rgba(255,255,255,0.06);
  /* gradients */
  --grad-orange:linear-gradient(135deg,#FE9A00 0%,#BB4D00 100%);
  --grad-orange-hot:linear-gradient(135deg,#FCBB00 0%,#F05100 100%);
  --grad-blue:linear-gradient(135deg,#3B9EFF 0%,#0F2A5C 100%);
  --fw-semibold:600;
  --grad-cta:linear-gradient(100deg,#FCBB00 0%,#FE9A00 40%,#3B9EFF 100%);
  --grad-heading:linear-gradient(100deg,#FCBB00 0%,#FE9A00 45%,#63B3FF 100%);
  --grad-hero-corner:radial-gradient(72% 82% at 6% 6%,#FE9A00 0%,#BB4D00 22%,#0F2A5C 58%,#070B14 100%);
  --grad-hero-curtain:linear-gradient(90deg,#0F2A5C 0%,#14213F 32%,#33241F 54%,#BB4D00 80%,#FE9A00 100%);
  --grad-cinema:radial-gradient(120% 90% at 70% 20%,rgba(254,154,0,0.22) 0%,rgba(254,154,0,0.05) 28%,rgba(15,42,92,0.55) 62%,var(--cv-black) 100%);
  --glow-orange:radial-gradient(closest-side,rgba(254,154,0,0.55),rgba(254,154,0,0) 100%);
  /* typography */
  --font-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --font-sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --text-display:clamp(3rem,7vw,5.5rem); --text-h1:clamp(2.25rem,4.5vw,3.5rem);
  --text-h2:clamp(1.75rem,3vw,2.5rem); --text-h3:1.5rem; --text-h4:1.25rem;
  --text-lg:1.125rem; --text-base:1rem; --text-sm:0.875rem; --text-xs:0.75rem;
  --lh-tight:1.05; --lh-snug:1.2; --tracking-tight:-0.03em; --tracking-snug:-0.015em;
  /* layout */
  --container-max:1200px; --container-narrow:720px;
  --gutter:clamp(20px,5vw,64px); --section-y:clamp(64px,10vw,160px);
  /* effects */
  --radius-xs:6px; --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-xl:32px; --radius-pill:999px;
  --blur-glass:18px; --blur-glass-strong:32px;
  --shadow-float:0 32px 80px -24px rgba(0,0,0,0.7);
  --sheen-top:inset 0 1px 0 rgba(255,255,255,0.12);
  --glow-orange-sm:0 0 24px -2px rgba(254,154,0,0.45);
  --glow-orange-md:0 8px 40px -6px rgba(254,154,0,0.5);
  --glow-orange-lg:0 12px 70px -8px rgba(254,154,0,0.55);
  --glow-blue-sm:0 0 24px -2px rgba(59,158,255,0.4);
  --glow-blue-md:0 8px 44px -6px rgba(59,158,255,0.45);
  --ease-out:cubic-bezier(0.22,1,0.36,1); --dur-fast:140ms; --dur-base:240ms;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--cv-black)}
body{font-family:var(--font-sans);color:var(--cv-text);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:var(--cv-blue)}
a:hover{color:var(--cv-blue-light)}
img{display:block}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,0.6)}

/* ---- layout helpers ---- */
.container{max-width:var(--container-max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.narrow{max-width:var(--container-narrow);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section-y{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.hairline-top{border-top:1px solid var(--cv-hairline)}
.grad-word{background:var(--grad-heading);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---- logo / wordmark ---- */
/* Wordmark — canonical Corp.Vellum Design System Logo spec (components/brand/Logo.jsx).
   The "." between the two words is the signature orange orb on the baseline.
   Same treatment for the umbrella brand and every extension name ({AI}.Vellum). */
.logo{display:inline-flex;align-items:baseline;font-family:var(--font-display);font-weight:var(--fw-semibold);
  letter-spacing:-0.02em;color:var(--cv-text);text-decoration:none;line-height:1;white-space:nowrap}
.logo .dot{display:inline-block;width:0.3em;height:0.3em;border-radius:999px;
  background:var(--grad-orange-hot);margin:0 0.05em 0 calc(0.1em + 2px)}
.logo--sm{font-size:20px}
.logo--md{font-size:22px}
.logo--product{font-size:15px}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--gutter);background:rgba(10,10,11,0.55);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--cv-hairline)}
.nav-right{display:flex;align-items:center;gap:28px}
.nav-links{display:flex;gap:24px}
.nav-links a{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--cv-text-muted);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
.nav-links a:hover{color:var(--cv-text)}
.nav-links a.active{color:var(--cv-text)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;cursor:pointer;
  font-family:var(--font-sans);font-weight:500;text-decoration:none;border-radius:var(--radius-sm);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),filter var(--dur-fast) var(--ease-out);
  white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn--sm{padding:8px 14px;font-size:var(--text-sm)}
.btn--md{padding:11px 18px;font-size:var(--text-base)}
.btn--lg{padding:15px 22px;font-size:var(--text-base)}
.btn--primary{background:var(--grad-cta);color:#0B0B0D;box-shadow:var(--glow-orange-sm)}
.btn--primary:hover{transform:translateY(-1px);box-shadow:var(--glow-orange-md)}
.btn--warm{background:var(--grad-orange);color:#1A0E00;box-shadow:var(--glow-orange-sm)}
.btn--warm:hover{transform:translateY(-1px);box-shadow:var(--glow-orange-md)}
.btn--cool{background:var(--grad-blue);color:var(--cv-text);box-shadow:var(--glow-blue-sm)}
.btn--cool:hover{transform:translateY(-1px);box-shadow:var(--glow-blue-md)}
/* Readable hover for every button: white text + micro shadow (overrides the global a:hover blue). */
.btn:hover{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.45)}
.btn:active{transform:scale(0.985)}

/* ---- badges ---- */
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--radius-pill);
  border:1px solid;font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:0.1em;line-height:1}
.badge .bdot{width:6px;height:6px;border-radius:999px}
.badge--orange{color:var(--cv-amber-bright);border-color:rgba(254,154,0,0.4);background:rgba(254,154,0,0.08)}
.badge--orange .bdot{background:var(--cv-orange);box-shadow:0 0 8px var(--cv-orange)}
.badge--blue{color:var(--cv-blue-light);border-color:rgba(59,158,255,0.4);background:rgba(59,158,255,0.08)}
.badge--blue .bdot{background:var(--cv-blue);box-shadow:0 0 8px var(--cv-blue)}
.badge--neutral{color:var(--cv-text-dim);border-color:var(--cv-glass-border);background:var(--cv-glass-fill)}
.badge--neutral .bdot{background:var(--cv-text-dim)}

/* ---- glass cards ---- */
.glass{background:var(--cv-glass-fill);border:1px solid var(--cv-glass-border);border-radius:var(--radius-lg);
  padding:28px;backdrop-filter:blur(var(--blur-glass));-webkit-backdrop-filter:blur(var(--blur-glass));
  box-shadow:var(--sheen-top)}
.glass--strong{background:var(--cv-glass-fill-strong);border-color:var(--cv-glass-border-strong)}
.glass--glow-orange{box-shadow:var(--glow-orange-md),var(--sheen-top)}
.glass--glow-blue{box-shadow:var(--glow-blue-md),var(--sheen-top)}
.glass--md{border-radius:var(--radius-md);padding:20px 24px}
.icon-tile{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;
  background:var(--cv-glass-fill-strong);border:1px solid var(--cv-glass-border);color:var(--cv-blue-light);margin-bottom:18px}
.icon-tile svg{width:22px;height:22px}
.icon-tile--orange{background:var(--grad-orange);border:none;color:#1A0E00}

/* ---- typography blocks ---- */
.eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:0.14em;color:var(--cv-text-dim)}
.h1{font-family:var(--font-display);font-weight:600;font-size:var(--text-h1);line-height:var(--lh-tight);letter-spacing:var(--tracking-tight);margin:0}
.h1--display{font-size:var(--text-display)}
.h2{font-family:var(--font-display);font-weight:600;font-size:var(--text-h2);letter-spacing:var(--tracking-snug);line-height:var(--lh-snug);margin:0}
.h3{font-family:var(--font-display);font-weight:600;font-size:var(--text-h4);color:var(--cv-text);margin:0 0 8px}
.lead{font-size:var(--text-lg);line-height:1.55;color:var(--cv-text-muted)}
.card-p{margin:0;font-size:var(--text-sm);line-height:1.55;color:var(--cv-text-muted)}
.mono-strip{display:flex;gap:24px;font-family:var(--font-mono);font-size:var(--text-xs);color:#fff;text-transform:uppercase;letter-spacing:0.1em;flex-wrap:wrap}

/* ---- grids ---- */
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.stack{display:flex;flex-direction:column}

/* ---- inputs ---- */
.field-label{display:block;font-size:var(--text-sm);font-weight:500;color:var(--cv-text-muted);margin-bottom:8px}
.field{width:100%;padding:12px 14px;background:var(--cv-glass-fill);border:1px solid var(--cv-glass-border);
  border-radius:var(--radius-sm);color:#fff;font-family:var(--font-sans);font-size:var(--text-base);
  line-height:1.5;outline:none;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.field:focus{border-color:rgba(254,154,0,0.55);box-shadow:var(--glow-orange-sm)}
textarea.field{resize:vertical}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:var(--cv-black)}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right}
.hero-veil-side{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,11,0.85) 0%,rgba(10,10,11,0.4) 38%,transparent 68%)}
.hero-veil-flat{position:absolute;inset:0;background:rgba(10,10,11,0.45)}
.hero-veil-bottom{position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(0deg,var(--cv-black),transparent)}
.hero-inner{position:relative;z-index:1}

/* ---- footer ---- */
.footer{background:var(--cv-black);border-top:1px solid var(--cv-hairline)}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;padding:56px var(--gutter) 40px;max-width:var(--container-max);margin:0 auto}
.footer-tag{font-family:var(--font-sans);font-size:13px;color:var(--cv-text-dim);max-width:260px;margin:16px 0 0;line-height:1.55}
.footer-col-h{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.12em;color:var(--cv-text-dim);margin-bottom:14px}
.footer-col a{display:block;font-family:var(--font-sans);font-size:14px;color:var(--cv-text-muted);text-decoration:none;margin-bottom:10px;transition:color var(--dur-fast) var(--ease-out)}
.footer-col a:hover{color:var(--cv-text)}
.footer-bottom{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter) 40px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--font-mono);font-size:11px;color:var(--cv-text-dim)}

/* ---- family rows (home) ---- */
.family-row{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-radius:var(--radius-md);background:var(--cv-glass-fill);border:1px solid var(--cv-glass-border);text-decoration:none;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.family-row:hover{transform:translateY(-4px);border-color:var(--cv-glass-border-strong);
  box-shadow:-26px 24px 48px -16px rgba(254,154,0,0.85),26px 24px 48px -16px rgba(59,158,255,0.8),var(--sheen-top)}
.family-left{display:flex;align-items:center;gap:14px}
.family-icon{width:48px;height:48px;border-radius:12px;flex-shrink:0;display:block}
.family-sub{font-family:var(--font-sans);font-size:13px;color:var(--cv-text-muted);margin-top:6px}

/* ---- details / FAQ ---- */
details.faq{background:var(--cv-glass-fill);border:1px solid var(--cv-glass-border);border-radius:var(--radius-md);padding:18px 24px}
details.faq summary{cursor:pointer;font-weight:600;font-size:var(--text-base);list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq p{margin:12px 0 0;font-size:var(--text-sm);line-height:1.65;color:var(--cv-text-muted)}

/* ---- privacy definition rows ---- */
.def-row{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start;padding-bottom:28px;border-bottom:1px solid var(--cv-hairline)}
.def-row:last-child{border-bottom:none;padding-bottom:0}
.def-label{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.12em;color:var(--cv-text-dim);text-transform:uppercase;padding-top:4px}
.def-row p{margin:0;font-size:var(--text-base);line-height:1.65;color:var(--cv-text-muted)}

/* ---- responsive ---- */
@media (max-width:900px){
  .hero-2col{grid-template-columns:1fr !important}
  .hero-portal{display:none}
  .grid-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .def-row{grid-template-columns:1fr;gap:8px}
  .ctable{font-size:13px}
  .ctable th,.ctable td{padding:12px 10px}
  .tiles{grid-template-columns:1fr 1fr}
}

/* ============================================================
   Additions for the full ТЗ tree (query / compare / blog / service)
   ============================================================ */

/* breadcrumbs */
.crumbs{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.06em;color:var(--cv-text-dim);text-transform:uppercase}
.crumbs a{color:var(--cv-text-dim);text-decoration:none}
.crumbs a:hover{color:var(--cv-text-muted)}
.crumbs .sep{margin:0 8px;opacity:.6}

/* text hero (query/compare/blog/service pages) */
.thero{position:relative;overflow:hidden;border-bottom:1px solid var(--cv-hairline)}
.thero .hero-bg img{object-position:center right}
.thero-inner{position:relative;z-index:1;padding-top:clamp(48px,7vw,104px);padding-bottom:clamp(36px,5vw,64px)}
.meta-line{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.06em;color:var(--cv-text-dim)}

/* trust strip (no invented numbers — qualitative until store metrics exist) */
.trust{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--cv-text-muted)}
.trust .star{color:var(--cv-amber-bright)}

/* answer capsule — self-contained 40–60 word answer for AI extraction */
.capsule{background:var(--cv-glass-fill);border:1px solid var(--cv-glass-border);border-left:3px solid var(--cv-orange);
  border-radius:var(--radius-md);padding:18px 22px;font-size:var(--text-base);line-height:1.6;color:var(--cv-text)}

/* numbered steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:640px){.steps{grid-template-columns:1fr}}
.step .n{font-family:var(--font-mono);font-size:var(--text-h3);color:var(--cv-amber-bright);margin-bottom:10px}

/* comparison table */
.ctable{width:100%;border-collapse:collapse;font-family:var(--font-sans);font-size:var(--text-sm);
  background:var(--cv-glass-fill);border:1px solid var(--cv-glass-border);border-radius:var(--radius-md);overflow:hidden}
.ctable th,.ctable td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--cv-hairline);vertical-align:top}
.ctable thead th{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--cv-text-dim);font-weight:600}
.ctable tbody tr:last-child td{border-bottom:none}
.ctable .col-us{color:var(--cv-text);background:rgba(254,154,0,0.06)}
.ctable thead .col-us{color:var(--cv-amber-bright);background:rgba(254,154,0,0.10)}
.ctable td:first-child{color:var(--cv-text-muted);font-weight:500}
.yes{color:var(--cv-amber-bright)}
.no{color:var(--cv-text-dim)}

/* hub tiles (home: links to every query page) */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.tile{display:block;padding:18px 20px;border-radius:var(--radius-md);background:var(--cv-glass-fill);border:1px solid var(--cv-glass-border);text-decoration:none;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.tile:hover{transform:translateY(-4px);border-color:var(--cv-glass-border-strong);box-shadow:-26px 22px 46px -16px rgba(254,154,0,0.85),26px 22px 46px -16px rgba(59,158,255,0.8),var(--sheen-top)}
.tile .tile-h{font-family:var(--font-display);font-weight:600;font-size:var(--text-base);color:var(--cv-text);margin:0 0 4px}
.tile .tile-p{margin:0;font-size:13px;color:var(--cv-text-muted);line-height:1.5}

/* article prose (blog) */
.prose{max-width:var(--container-narrow)}
.prose p{font-size:var(--text-base);line-height:1.7;color:var(--cv-text-muted);margin:0 0 18px}
.prose h2{font-family:var(--font-display);font-weight:600;font-size:var(--text-h3);color:var(--cv-text);letter-spacing:var(--tracking-snug);margin:36px 0 12px}
.prose ul{margin:0 0 18px;padding-left:20px;color:var(--cv-text-muted);line-height:1.7}
.prose li{margin-bottom:8px}
.prose a{color:var(--cv-blue)}

/* generic section heading block */
.sec-head{max-width:640px;margin-bottom:clamp(32px,5vw,56px)}
.sec-head .h2{margin-top:14px}

/* install band (centered CTA reused across pages) */
.band{text-align:center}
.band .h2{margin-bottom:12px}
.band p{margin:0 0 28px;font-size:var(--text-base);color:var(--cv-text-muted)}

/* survey (uninstall) */
.survey label{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--cv-glass-border);border-radius:var(--radius-sm);background:var(--cv-glass-fill);cursor:pointer;font-size:var(--text-sm);color:var(--cv-text-muted);margin-bottom:10px}
.survey label:hover{border-color:var(--cv-glass-border-strong);color:var(--cv-text)}
.survey input[type=radio]{accent-color:var(--cv-orange)}

/* small helper */
.mt-sm{margin-top:14px}.mt-md{margin-top:24px}.muted{color:var(--cv-text-muted)}
.link-row{display:flex;gap:18px;flex-wrap:wrap;font-size:var(--text-sm)}
.updated{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--cv-text-dim);letter-spacing:.06em}

/* Home "What it does" hub: fixed 3-up (3 + 3), collapses on smaller screens */
.tiles--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.tiles--3{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.tiles--3{grid-template-columns:1fr}}

/* Secondary-page hero: brighten the small elements (breadcrumbs, badge, meta)
   and add a soft shadow so they stay legible over the cinematic image. */
.thero .crumbs,.thero .crumbs a{color:rgba(255,255,255,0.80);text-shadow:0 1px 3px rgba(0,0,0,0.6)}
.thero .crumbs a:hover{color:#fff}
.thero .crumbs .sep{color:rgba(255,255,255,0.55)}
.thero .meta-line{color:rgba(255,255,255,0.82);text-shadow:0 1px 3px rgba(0,0,0,0.6)}
.thero .badge{text-shadow:0 1px 2px rgba(0,0,0,0.45)}
.thero .badge--neutral{color:rgba(255,255,255,0.88);border-color:rgba(255,255,255,0.30);background:rgba(255,255,255,0.10)}
.thero .lead{color:rgba(255,255,255,0.90)}

/* Icon chip inside hub/index tiles */
.tile-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--cv-glass-fill-strong);border:1px solid var(--cv-glass-border);color:var(--cv-blue-light);margin-bottom:12px}
.tile-ic svg{width:18px;height:18px}