/* ===========================================================================
   Alerra.ai — shared page shell.

   Extends the landing page's design language rather than restating it: the
   tokens below are the landing page's own, plus the few this application layer
   needs (mono stack, cyan, surface elevations). index.html is untouched apart
   from its nav links, and keeps its inline styles.
   ========================================================================= */

:root{
  color-scheme:dark;
  /* -- inherited from the landing page, unchanged ------------------------ */
  --void:#0a0e0d;
  --ink:#e6f0ec;
  --dim:#75847e;
  --mint:#65f2c2;
  --gold:#ffbd59;
  --mark-green:#2ee6a8;
  --mark-red:#ff4f5e;
  --mark-yellow:#ffc93c;       /* the "A." mark only, never a risk state */
  --line:rgba(120,150,140,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-cut:cubic-bezier(.65,0,.2,1);

  /* -- added for the application pages ----------------------------------- */
  --cyan:#5ad6ff;              /* used sparingly: queries and relationships */
  --surface:#0d1211;           /* panel ground */
  --surface-2:#111817;         /* raised panel */
  --surface-3:#070b0a;         /* inset: inputs, code, wells */
  --line-strong:rgba(120,150,140,.3);
  --dim-2:#5c6862;

  --mono:'SFMono-Regular',ui-monospace,'JetBrains Mono','Menlo',Consolas,monospace;

  --risk-low:var(--mark-green);
  --risk-med:var(--gold);
  --risk-high:var(--mark-red);

  --nav-h:66px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{background:var(--void);color:var(--ink);
  font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5;
  /* the landing page sets overflow:hidden for its intro; these pages scroll */
  min-height:100dvh;overflow-x:hidden}
::selection{background:var(--mint);color:var(--void)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
img{max-width:100%}
[hidden]{display:none!important}

:focus-visible{outline:2px solid var(--mark-green);outline-offset:3px;border-radius:2px}

/* The page ground: a near-black with a very slow grid, so large dark areas
   have structure without anything reading as decoration. */
.page-ground{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 50% -10%,rgba(46,230,168,.05),transparent 70%),
    radial-gradient(760px 520px at 88% 8%,rgba(90,214,255,.035),transparent 72%),
    linear-gradient(transparent 0,transparent calc(100% - 1px),rgba(120,150,140,.045) 100%) 0 0/100% 46px,
    linear-gradient(90deg,transparent 0,transparent calc(100% - 1px),rgba(120,150,140,.045) 100%) 0 0/46px 100%;
}

.wrap{width:min(1280px,100% - clamp(32px,6vw,96px));margin-inline:auto;position:relative;z-index:1}

/* ---------- navigation ---------- */
/* Same brand mark and link treatment as the landing page, made sticky and
   given an active state. */
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:20px;height:var(--nav-h);
  padding-inline:clamp(20px,4vw,52px);
  background:rgba(10,14,13,.78);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.nav .brand{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto}
.nav .brand svg{width:28px;height:28px}
.nav .brand .wm{font-weight:800;font-size:16.5px;letter-spacing:-.02em}
.nav .brand .wm .g{color:var(--mark-green)}
.nav .brand .wm .ry{color:var(--mark-yellow)}
.nav .brand .wm .r{color:var(--mark-red)}
.nav .brand .wm .w{color:#fff}

/* The positioning line, beside the wordmark. It is decoration for a reader who
   already has the page, so it is aria-hidden and the first thing to go when
   the bar gets tight. */
.nav-tagline{display:flex;gap:.55em;flex:0 0 auto;margin-left:14px;
  padding-left:14px;border-left:1px solid var(--line);
  font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;white-space:nowrap}
.nav-tagline .w{color:var(--ink)}
.nav-tagline .c{color:var(--cyan)}
.nav-tagline .y{color:var(--gold)}
.nav-tagline .m{color:var(--mint)}
@media (max-width:1320px){.nav-tagline{display:none}}
.nav-links{display:flex;align-items:center;gap:clamp(11px,1.5vw,22px);
  font-size:13px;font-weight:500;color:var(--dim);white-space:nowrap}
.nav-links a{position:relative;padding:6px 0;transition:color .18s}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{content:'';position:absolute;left:0;right:0;bottom:-2px;
  height:2px;background:var(--mark-green)}
.nav-links .nav-cta{background:var(--mark-green);color:#03120b;border-radius:4px;
  padding:10px 20px;font-size:13px;font-weight:700;white-space:nowrap;
  transition:filter .18s,translate .18s,box-shadow .18s}
.nav-cta:hover{filter:brightness(1.08);translate:0 -1px;
  box-shadow:0 8px 24px -10px rgba(46,230,168,.6)}
.nav-burger{display:none;width:38px;height:38px;place-items:center;
  border:1px solid var(--line);border-radius:5px}
@media (max-width:1060px){
  .nav-burger{display:grid}
  .nav-links{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;
    align-items:stretch;gap:0;background:rgba(10,14,13,.97);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);padding:8px 0;font-size:15px}
  .nav-links a{padding:14px clamp(20px,4vw,52px)}
  .nav-links a[aria-current="page"]::after{left:clamp(20px,4vw,52px);right:auto;width:22px;bottom:8px}
  .nav-links .nav-cta{margin:10px clamp(20px,4vw,52px);text-align:center}
  .nav-links[data-open="false"]{display:none}
}

/* ---------- typography ---------- */
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--dim);font-family:var(--mono)}
.h1{font-size:clamp(34px,6.2vw,76px);font-weight:800;letter-spacing:-.035em;line-height:.98}
.h2{font-size:clamp(25px,3.5vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.h3{font-size:clamp(17px,1.9vw,23px);font-weight:700;letter-spacing:-.02em}
.lede{font-size:clamp(15px,1.55vw,19px);color:var(--dim);max-width:62ch;line-height:1.62}
.muted{color:var(--dim)}
.mono{font-family:var(--mono);font-variant-ligatures:none}
.g{color:var(--mark-green)} .r{color:var(--mark-red)} .c{color:var(--cyan)} .y{color:var(--gold)}

section{position:relative;z-index:1;padding-block:clamp(56px,8vh,110px)}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(28px,4vh,52px)}

/* ---------- surfaces ---------- */
/* Squared-off panels with thin borders, not rounded SaaS cards. */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:6px}
.panel-2{background:var(--surface-2);border:1px solid var(--line);border-radius:6px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;border-bottom:1px solid var(--line)}
.panel-body{padding:16px}

/* ---------- the synthetic-data badge ---------- */
/* Used everywhere a number or event could be mistaken for production data.
   Deliberately conspicuous rather than tucked away. */
.demo-badge{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(255,189,89,.34);background:rgba(255,189,89,.07);
  border-radius:3px;padding:4px 9px;white-space:nowrap}
.demo-badge::before{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--gold);flex:0 0 auto;animation:pulse-dot 2.6s ease-in-out infinite}
.demo-badge.static::before{animation:none}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.35}}

.live-badge{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mark-green);
  border:1px solid rgba(46,230,168,.3);background:rgba(46,230,168,.06);
  border-radius:3px;padding:4px 9px;white-space:nowrap}
.live-badge::before{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--mark-green);animation:pulse-dot 1.8s ease-in-out infinite}

/* ---------- chips, pills, tags ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);border-radius:3px;padding:3px 8px}
.chip.on-green{color:var(--mark-green);border-color:rgba(46,230,168,.3)}
.chip.on-red{color:var(--mark-red);border-color:rgba(255,79,94,.3)}
.chip.on-cyan{color:var(--cyan);border-color:rgba(90,214,255,.3)}

/* ---------- code / JSON ---------- */
.code{font-family:var(--mono);font-size:12.5px;line-height:1.65;
  background:var(--surface-3);border:1px solid var(--line);border-radius:5px;
  padding:14px 15px;overflow-x:auto;white-space:pre;color:var(--ink)}
.code .k{color:var(--cyan)}
.code .s{color:var(--mark-green)}
.code .n{color:var(--gold)}
.code .p{color:var(--dim-2)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--line-strong);border-radius:4px;padding:10px 16px;
  font-size:13px;font-weight:600;color:var(--ink);background:var(--surface-2);
  transition:border-color .18s,background .18s,color .18s,translate .18s}
.btn:hover{border-color:var(--mark-green);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--mark-green);color:#03120b;border-color:transparent;font-weight:700}
.btn-primary:hover{filter:brightness(1.08);translate:0 -1px;color:#03120b}
.btn-ghost{background:transparent}
.btn-sm{padding:6px 11px;font-size:12px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding-block:38px;position:relative;z-index:1;
  font-size:12.5px;color:var(--dim-2)}
.foot-in{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
.foot a:hover{color:var(--ink)}
.foot .disclaimer{max-width:66ch;line-height:1.6;font-size:11.5px}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

/* Screen-reader-only, for the graph's accessible mirror. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}