/* veox.ai shared theme.
 *
 * The two flagship pages — index.html and jain.html — carry their own inline <style> because each
 * is dominated by CSS that only it uses (a canvas hero, a benchmark dial, a comparison ladder).
 * Everything that is *shell* rather than *page* lives here: the tokens, the nav, the footer, the
 * buttons, the type scale. The secondary pages are nothing but shell plus prose, so they load this
 * file and add nothing.
 *
 * The rule that keeps the site coherent: a value that appears on more than one page is a token
 * here, and the flagship pages copy these token values verbatim. If you change a colour, change it
 * in all three places or the shell will drift away from the pages it wraps.
 */

:root{
  --ink:#08090B; --surface:#0E1013; --surface-2:#14171B;
  --line:#1E2329; --line-2:#2B323A;
  --text:#E9E7E3; --dim:#868D96; --dimmer:#565D66;
  --hot:#FF8A2B; --hot-2:#FFC062; --hot-wash:rgba(255,138,43,.10);
  --cold:#5C7C99; --cold-wash:rgba(92,124,153,.12);
  --display:'Archivo',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --gut:clamp(20px,5vw,64px); --max:1280px;
  --evo:cubic-bezier(.12,.78,.24,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--body);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--hot);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.band{padding:clamp(84px,11vw,148px) 0;position:relative}
.band+.band{border-top:1px solid var(--line)}

/* ================= TYPE ================= */
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dimmer);display:flex;align-items:center;gap:12px;margin:0 0 24px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line);max-width:110px}
h1{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,5.4vw,4.2rem);
  line-height:.98;letter-spacing:-.043em;margin:0}
h2{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3vw,2.3rem);
  line-height:1.08;letter-spacing:-.03em;margin:52px 0 16px;max-width:24ch}
h3{font-family:var(--display);font-weight:600;font-size:1.16rem;letter-spacing:-.014em;margin:0 0 9px}
.lede{font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--dim);max-width:58ch;margin:0}
.hot{color:var(--hot)}

/* ================= NAV ================= */
.nav{position:sticky;top:0;z-index:60;background:rgba(8,9,11,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:8px;height:62px}
.brand{display:inline-flex;align-items:center;text-decoration:none;margin-right:30px}
.brand img{height:22px;width:auto;display:block}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dimmer);margin-right:22px}
.nav-links{display:flex;align-items:center;gap:4px;flex:1}
.nav-links a{font-size:.86rem;color:var(--dim);text-decoration:none;padding:7px 11px;
  border-radius:5px;transition:color .15s}
.nav-links a:hover{color:var(--text)}
/* The nav partial is identical on every page; the page names itself and the matching link lights.
   Doing it in CSS keeps the shared markup shared. */
body[data-page="security"] .nav-links a[href="/security.html"],
body[data-page="privacy"]  .nav-links a[href="/privacy.html"],
body[data-page="terms"]    .nav-links a[href="/terms.html"],
body[data-page="contact"]  .nav-links a[href="/contact.html"],
/* Every page under /docs/ sets data-page="docs", so the nav link lights for the whole section
   rather than only its index. */
body[data-page="docs"]     .nav-links a[href="/docs/"]{color:var(--text)}
.nav-links a.flagship{color:var(--text);font-weight:500}
.nav-links a.flagship::before{content:"";display:inline-block;width:5px;height:5px;
  border-radius:50%;background:var(--hot);margin-right:7px;vertical-align:middle}
/* Primary-outline: the hero already carries a solid .btn-hot, and a second filled button riding
   along in a sticky nav competes with it. Outlined here, filled on hover -- same colour, same
   weight, one clear primary per screen. Padding is 1px tighter than the filled button was because
   the border now contributes that pixel; the outer box is unchanged. */
.nav-cta{font-size:.86rem;font-weight:500;text-decoration:none;padding:7px 14px;
  border:1px solid var(--hot);border-radius:6px;background:transparent;color:var(--hot);
  white-space:nowrap;transition:background .16s,color .16s}
.nav-cta:hover{background:var(--hot);color:#1A0D00}
/* .nav-links carries flex:1, so hiding it also removes what pushed the CTA to the right edge --
   which left the button sitting against the wordmark. margin-left:auto restores it. */
@media(max-width:940px){.nav-links{display:none}.nav-cta{margin-left:auto}}

/* ================= CONTROLS ================= */
.btn{display:inline-flex;align-items:center;gap:9px;font-size:.95rem;font-weight:500;
  padding:13px 22px;border-radius:7px;text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:all .16s;font-family:var(--body)}
.btn-hot{background:var(--hot);color:#1A0D00}
.btn-hot:hover{background:var(--hot-2)}
.btn-ghost{border-color:var(--line-2);color:var(--text);background:none}
.btn-ghost:hover{border-color:var(--dim);background:rgba(255,255,255,.02)}
.btn[disabled]{opacity:.5;cursor:default}
.chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;padding:5px 10px;
  border:1px solid var(--line);border-radius:4px;color:var(--dim);white-space:nowrap}

/* ================= DOCUMENT PAGES ================= */
/* A masthead rather than the canvas hero: these pages are read, not landed on. */
.doc-head{padding:clamp(56px,8vw,96px) 0 clamp(34px,4vw,48px);border-bottom:1px solid var(--line)}
.doc{padding:clamp(40px,6vw,72px) 0 clamp(80px,10vw,120px)}
.doc .wrap{max-width:min(78ch,var(--max))}
.doc p,.doc li{color:var(--dim);font-size:1rem}
.doc p{margin:0 0 16px;max-width:70ch}
.doc strong{color:var(--text);font-weight:600}
.doc a{color:var(--hot)}
.doc h2:first-of-type{margin-top:0}
.doc ul,.doc ol{margin:0 0 20px;padding-left:20px;display:flex;flex-direction:column;gap:9px}

.note{border:1px solid var(--line-2);border-left:2px solid var(--hot);border-radius:0 9px 9px 0;
  background:var(--hot-wash);padding:20px 24px;margin:28px 0}
.note p{margin:0;color:var(--text)}

/* ================= DOCS =================
   Docs are namespaced by product: /docs/ is a hub and every page below it lives under
   /docs/<product>/. That costs nothing today with one product and saves a round of redirects and
   dead inbound links the first time there are two. The sidebar is per-product, so each product
   ships its own partial rather than one shared file growing a conditional per product. */
/* Written as `.doc .wrap.docs-wrap` to outweigh `.doc .wrap`'s 78ch prose measure. A docs page is
   a sidebar plus prose and needs the full width; the prose column inside it stays readable because
   the grid, not the wrap, decides how wide the text gets. */
.doc .wrap.docs-wrap{max-width:var(--max)}
.docs-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(28px,5vw,64px);
  align-items:start}
.docs-side{position:sticky;top:86px}
.docs-side-k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dimmer);margin-bottom:14px}
.docs-side ul{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:2px}
.docs-side li{margin:0}
.docs-side a{display:block;font-size:.9rem;color:var(--dim);text-decoration:none;
  padding:6px 11px;border-radius:5px;border-left:2px solid transparent}
.docs-side a:hover{color:var(--text);background:var(--surface)}
/* The current page marks itself with aria-current, which is also what a screen reader announces --
   one attribute, not a class that has to agree with a separate accessibility hook. */
.docs-side a[aria-current="page"]{color:var(--text);border-left-color:var(--hot);
  background:var(--surface)}

/* ---- Docs honour the reader's light/dark preference; the rest of the site does not ----
   Marketing pages are art-directed dark and stay that way. Docs are read for twenty minutes at a
   time, often on a bright screen, so the reading surface follows the operating system instead.

   This works by re-declaring the palette tokens on the docs regions rather than by rewriting any
   rule: custom properties inherit, so every existing `var(--text)` / `var(--line)` inside these
   two elements picks up the light value with no second copy of the CSS to keep in step. The nav
   and footer sit outside them and stay dark, which frames the page deliberately rather than by
   accident.

   --hot is darkened here. The brand orange is tuned for a near-black ground and only reaches
   about 2.2:1 on white, which is unreadable body-link contrast; #B4530A clears 4.5:1. It is the
   same hue, and it is only ever seen against the light surface.

   A page opts in with <body data-theme="auto">, rather than the stylesheet listing which pages
   adapt. Long-form reading pages want this and art-directed marketing pages do not, and that is a
   property of the page, so the page is where it should be declared -- a new one joins by adding an
   attribute, not by editing a selector here that someone has to remember exists. */
@media(prefers-color-scheme:light){
  body[data-theme="auto"] .doc-head,
  body[data-theme="auto"] .doc{
    --ink:#FFFFFF; --surface:#F6F7F8; --surface-2:#EDEFF1;
    --line:#E3E6EA; --line-2:#CBD1D8;
    --text:#12151A; --dim:#4C535B; --dimmer:#767D86;
    --hot:#B4530A; --hot-2:#8F4108; --hot-wash:rgba(180,83,10,.07);
    --cold:#3D6280; --cold-wash:rgba(61,98,128,.10);
    background:var(--ink);
    color:var(--text);
    /* Tells the browser to draw scrollbars and any form control in the light scheme too --
       otherwise a dark scrollbar runs down the edge of a white page. */
    color-scheme:light;
  }
  /* The header's bottom rule is the seam between the dark nav and the light body; without this it
     inherits the dark hairline and reads as a smudge. */
  body[data-theme="auto"] .doc-head{border-bottom-color:var(--line)}
}

.crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dimmer);margin:0 0 18px}
.crumbs a{color:var(--dimmer);text-decoration:none}
.crumbs a:hover{color:var(--dim)}
.crumbs span{margin:0 7px;opacity:.6}

.docs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:18px;
  margin:0 0 12px;padding:0;list-style:none}
.docs-card{display:block;border:1px solid var(--line);border-radius:11px;padding:24px 26px;
  text-decoration:none;background:var(--surface);transition:border-color .16s}
a.docs-card:hover{border-color:var(--hot)}
.docs-card h3{margin:0 0 7px;color:var(--text)}
.docs-card p{margin:0;font-size:.92rem;color:var(--dim)}
/* Products that do not have docs yet still appear, greyed and unlinked. A visible gap is a
   roadmap; an invisible one reads as though the product does not exist. */
.docs-card.soon{opacity:.5}
.docs-card.soon h3::after{content:"Soon";font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--hot);border:1px solid var(--line-2);
  border-radius:3px;padding:2px 6px;margin-left:9px;vertical-align:middle}

@media(max-width:860px){
  .docs-layout{grid-template-columns:1fr;gap:30px}
  .docs-side{position:static;border-bottom:1px solid var(--line);padding-bottom:18px}
  /* Only the last group loses its margin. Zeroing every list ran the next group's heading straight
     into the item above it. */
  .docs-side ul:last-of-type{margin-bottom:0}}

.scroll-x{overflow-x:auto;margin:0 0 24px}
table{border-collapse:collapse;width:100%;min-width:460px;
  border:1px solid var(--line);border-radius:9px}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);font-size:.93rem}
tr:last-child th,tr:last-child td{border-bottom:0}
th{color:var(--text);font-weight:500;width:32%;background:var(--surface);
  border-right:1px solid var(--line)}
td{color:var(--dim)}

/* Numbered walkthrough, styled like the ledger rows on the home page. */
.steps{list-style:none;counter-reset:step;padding:0;margin:0 0 28px;
  border-top:1px solid var(--line)}
/* The number is positioned, not a grid column. It was a two-column grid, which works only while
   every item is one unbroken run of text: in a grid each child element is its own item, so a step
   containing a link became <a> in column two and the text after it in column one of the next row.
   Indenting past an absolutely positioned counter keeps the item a normal block, so links, bold
   and anything else inline flow the way they read. */
.steps li{counter-increment:step;position:relative;padding:20px 0 20px 62px;
  border-bottom:1px solid var(--line)}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:24px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--hot)}
.steps p{margin:0}

/* ================= FORM ================= */
.lead{display:flex;flex-direction:column;gap:20px;max-width:56ch;margin:0 0 32px}
.lead label{display:flex;flex-direction:column;gap:8px;font-size:.86rem;color:var(--dim);
  font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.lead input[type=email],.lead input[type=text],.lead textarea{
  font:inherit;font-family:var(--body);text-transform:none;letter-spacing:normal;
  color:var(--text);background:var(--surface);border:1px solid var(--line-2);
  border-radius:7px;padding:12px 14px;width:100%}
.lead textarea{min-height:120px;resize:vertical}
.lead input:focus,.lead textarea:focus{outline:none;border-color:var(--hot)}
.lead .consent{flex-direction:row;align-items:flex-start;gap:11px;text-transform:none;
  letter-spacing:normal;font-family:var(--body);font-size:.9rem;line-height:1.55}
.lead .consent input{margin-top:5px;accent-color:var(--hot);flex:0 0 auto}
.submit{align-self:flex-start;font-size:.95rem;font-weight:500;padding:13px 26px;border:0;
  border-radius:7px;background:var(--hot);color:#1A0D00;font-family:var(--body);cursor:pointer}
.submit:hover{background:var(--hot-2)}
.submit[disabled]{opacity:.55;cursor:default}
.form-status{font-family:var(--mono);font-size:12.5px;color:var(--dim);margin:0;min-height:1.2em}
.form-status[data-state="error"]{color:var(--hot-2)}

/* ================= FOOTER ================= */
footer{border-top:1px solid var(--line);padding:44px 0 56px;background:var(--surface)}
.foot-brand img{height:26px;width:auto;display:block;margin-bottom:14px}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.foot-k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dimmer);margin-bottom:14px}
.foot-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot-list a{font-size:.88rem;color:var(--dim);text-decoration:none}
.foot-list a:hover{color:var(--text)}
.foot-bot{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;color:var(--dimmer)}
.foot-bot a{color:inherit;text-decoration:none}
.foot-bot a:hover{color:var(--dim)}
/* Phone: one centred column. Two columns paired the four groups off arbitrarily, which reads as a
   relationship between them that is not there, and at that width neither column was wide enough
   for its labels. justify-items centres each group's box, text-align centres the lines in it, and
   the logo needs margin-inline because it is a block narrower than the box it sits in. .foot-bot
   is centred to match rather than sitting flush left under a centred stack. */
@media(max-width:760px){
  .foot-grid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:30px}
  .foot-brand img{margin-inline:auto}
  .foot-bot{justify-content:center;text-align:center}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}