/* Areti Health — shared site foundation.
 *
 * Every page used to carry its own copy of the design tokens plus its own
 * header/footer CSS, because the pages were pasted into Elementor standalone
 * and genuinely could not share a stylesheet. That constraint died with the
 * move to S3 + CloudFront: the pages are served from our own bucket now, so
 * the chrome lives here once. scripts/sync_tokens.py keeps the legacy inline
 * :root blocks honest until they are removed page by page.
 *
 * Token values are copied from design-system/tokens/ — that directory is the
 * source of truth; do not edit values here.
 */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&family=Mulish:wght@300;400;600;700&display=swap");

:root{
  --areti-violet:#7C29C4; --areti-blue:#2730B9; --areti-navy:#02162F;
  --areti-violet-bright:#8B28DA; --areti-indigo:#3E2FCA;
  --gradient-brand:linear-gradient(0deg,var(--areti-indigo) 0%,var(--areti-violet-bright) 100%);
  --gradient-brand-diagonal:linear-gradient(135deg,var(--areti-violet-bright) 0%,var(--areti-indigo) 100%);
  --gradient-mark:linear-gradient(170deg,#8B28DA 0%,#8420D2 38%,#3E2FCA 100%);
  --areti-sage:#A2C4BF; --areti-ice:#D4EEF7; --areti-blush:#FEE9E1; --areti-forest:#142616;
  --areti-amber:#FBB221; --areti-teal:#3EE5C9; --areti-magenta:#D63087;
  --navy-950:#010D1D; --navy-900:#02162F; --navy-800:#0E3159; --navy-700:#1B4374;
  --navy-600:#3C5F8C; --navy-500:#6B84A4; --navy-400:#93A6BE; --navy-300:#BECAD9;
  --navy-200:#DDE4EC; --navy-100:#EDF1F6; --navy-050:#F6F8FB; --white:#FFFFFF;
  --violet-700:#5B1B93; --violet-600:#7C29C4; --violet-500:#9450D2;
  --violet-300:#C6A6E9; --violet-100:#EEE4F9; --violet-050:#F7F2FD;

  --text-strong:var(--navy-900); --text-body:var(--navy-800); --text-muted:var(--navy-500);
  --text-inverse:var(--white); --text-inverse-muted:rgba(255,255,255,.72);
  --text-accent:var(--areti-violet); --text-link:var(--areti-violet); --text-link-hover:var(--violet-700);
  --surface-page:var(--white); --surface-sunken:var(--navy-050); --surface-card:var(--white);
  --surface-ink:var(--navy-900); --surface-ink-deep:var(--navy-950); --surface-accent-soft:var(--violet-050);
  --border-subtle:var(--navy-200); --border-strong:var(--navy-300); --border-inverse:rgba(255,255,255,.18);
  --accent:var(--areti-violet); --accent-hover:var(--violet-700); --accent-soft:var(--violet-100);
  --focus-ring:rgba(139,40,218,.38);

  --font-display:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --font-body:"Poppins","Helvetica Neue",Arial,sans-serif;
  --font-text:"Mulish","Helvetica Neue",Arial,sans-serif;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600;
  --weight-bold:700; --weight-extrabold:800;
  --leading-tight:1.05; --leading-snug:1.18; --leading-normal:1.45; --leading-relaxed:1.65;
  --tracking-display:-0.03em; --tracking-heading:-0.02em; --tracking-eyebrow:0.14em;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;
  --space-24:96px; --space-32:128px;
  --section-padding-y:var(--space-32); --container-max:1200px; --container-gutter:var(--space-6);
  --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --radius-pill:999px;

  --shadow-xs:0 1px 2px rgba(8,36,68,.06);
  --shadow-sm:0 2px 8px rgba(8,36,68,.07);
  --shadow-md:0 10px 24px -8px rgba(8,36,68,.14);
  --shadow-lg:0 24px 56px -20px rgba(8,36,68,.22);
  --shadow-accent:0 14px 30px -12px rgba(139,40,218,.45);
  --blur-glass:saturate(140%) blur(14px);

  --duration-fast:120ms; --duration-base:200ms; --duration-slow:360ms;
  --ease-standard:cubic-bezier(.2,.7,.3,1); --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ── Brand chrome: the header logo ───────────────────────────────────────── */
/* The mark used to be drawn in CSS (a gradient square with a letter in it) on
 * 21 of 26 pages, which meant the site never actually showed its own logo. */
/* flex-shrink squeezed the lockup to a sliver once the burger joined the row. */
.areti-logo{display:inline-flex;align-items:center;gap:0;line-height:0;flex:0 0 auto;min-width:0}
.areti-logo img{flex:0 0 auto}
.areti-logo img{display:block;height:34px;width:auto}
.areti-logo--footer img{height:32px}
.areti-logo--sm img{height:28px}
.areti-logo--lg img{height:44px}
@media (max-width:600px){.areti-logo img{height:28px}}

/* ── Eyebrow ─────────────────────────────────────────────────────────────── */
.a-eyebrow{font-family:var(--font-display);font-size:12px;font-weight:var(--weight-bold);
  text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--text-muted)}
.a-eyebrow.on-dark{color:var(--areti-teal)}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.a-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-body);font-size:16px;font-weight:var(--weight-semibold);
  padding:14px 26px;border-radius:var(--radius-pill);border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform var(--duration-fast) var(--ease-standard),
  box-shadow var(--duration-base) var(--ease-standard),background-color var(--duration-base) var(--ease-standard)}
.a-btn:hover{text-decoration:none;transform:translateY(-1px)}
.a-btn--primary{background:var(--gradient-brand-diagonal);color:#fff;box-shadow:var(--shadow-accent)}
.a-btn--primary:hover{color:#fff}
.a-btn--ghost{background:transparent;color:var(--text-strong);border-color:var(--border-strong)}
.a-btn--ghost.on-dark{color:#fff;border-color:var(--border-inverse)}
.a-btn--ghost.on-dark:hover{background:rgba(255,255,255,.08);color:#fff}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.a-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-gutter)}
.a-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Mobile navigation ──────────────────────────────────────────────────────
   21 pages carried `.nav-items{display:none}` inside their mobile media query
   and shipped no hamburger, so on a phone the entire menu simply vanished:
   the header offered Login and Book a demo, and the only way to reach any
   other page was the footer, at the bottom of a 10,000px document.

   The rule is stripped from the pages by scripts/apply_site_chrome.py and the
   behaviour lives here instead, once. The panel is a plain toggle: no
   transition on display, so it cannot be left half-open, and it closes on
   Escape and on any link inside it. */
.nav-burger{display:none;position:relative;width:42px;height:42px;padding:0;border:0;
  background:transparent;cursor:pointer;border-radius:10px;margin-left:auto;
  /* A <button> does not inherit colour -- the UA sets `buttontext`, which made
     the bars black on the dark hero, i.e. invisible. And in a flex row it was
     shrinking to 22px, which collapsed the absolutely-positioned bars to 1px. */
  color:inherit;flex:0 0 42px}
.nav-burger span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;
  background:currentColor;transition:transform .22s var(--ease-standard),opacity .16s linear}
.nav-burger span:nth-child(1){top:14px}
.nav-burger span:nth-child(2){top:20px}
.nav-burger span:nth-child(3){top:26px}
.nav-burger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* The panel carries its own Login for phones. Above the breakpoint the
   header CTA shows it, so the panel copy must not double it up. */
.nav .nav-items .item.nav-login{display:none}

@media (max-width:900px){
  .nav{position:relative;flex-wrap:nowrap;gap:10px}
  /* Logo left, everything else right, in DOM order: burger then the CTA.
     Reordering with `order` put the burger past the CTA and pushed the row
     wider than the viewport, which clipped "Book a demo" off the edge. */
  .nav-burger{margin-left:0}
  .areti-logo{margin-right:auto}
  /* 375px cannot hold logo + burger + Login + CTA. Login is reachable from the
     menu panel and the footer; the booking CTA is the one that must survive. */
  .nav .nav-cta a.btn-on-glass{display:none}
  .nav .nav-items .item.nav-login{display:block}
  .nav[data-enhanced="true"] .nav-burger{display:block}
  /* "Book a demo" was wrapping onto three lines and making the header 80px tall. */
  .nav .btn,.nav a.btn,.nav .nav-cta a{white-space:nowrap;padding:9px 14px;font-size:13.5px}
  .nav[data-open="true"] .nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav[data-open="true"] .nav-burger span:nth-child(2){opacity:0}
  .nav[data-open="true"] .nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* The panel, not the row. Overrides whatever the page's own .nav-items said,
     because apply_site_chrome.py removes the page's display:none first. */
  .nav[data-enhanced="true"] .nav-items{display:none}
  .nav .nav-items{position:absolute;top:calc(100% + 14px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;z-index:60;
    background:#02162F;border:1px solid rgba(255,255,255,.14);border-radius:16px;
    padding:8px 18px 14px;max-height:72vh;overflow-y:auto;
    box-shadow:0 30px 70px -24px rgba(0,0,0,.7)}
  .nav[data-enhanced="true"][data-open="true"] .nav-items{display:flex}
  .nav .nav-items .item{display:block;padding:14px 0 10px;color:#fff;
    font-family:var(--font-display);font-weight:700;font-size:15px;
    border-bottom:1px solid rgba(255,255,255,.09)}
  .nav .nav-items .item:last-child{border-bottom:0}
  /* Dropdowns are hover panels on desktop; on a phone there is no hover, so
     they are simply expanded in place. */
  .nav .nav-items .item.has-dd>.dd,
  .nav .nav-items .dd{position:static;display:block;opacity:1;visibility:visible;
    transform:none;background:transparent;border:0;box-shadow:none;
    padding:2px 0 8px;min-width:0;width:auto;margin:0;inset:auto}
  .nav .nav-items .dd-item{display:block;padding:9px 0 9px 12px;color:rgba(255,255,255,.80);
    font-family:var(--font-body);font-weight:400;font-size:14px;border:0}
  .nav .nav-items .dd-item b{font-weight:600;color:#fff;font-size:14px}
  .nav .nav-items .dd-item span{display:block;font-size:12px;color:rgba(255,255,255,.55)}
}

/* At 375px the header row is logo + burger + CTA and it was still 8px too wide,
   which clipped the booking button against the right edge. */
@media (max-width:430px){
  .nav{gap:6px}
  .nav-burger{flex:0 0 36px;width:36px}
  .nav-burger span{left:8px;right:8px}
  .nav .btn,.nav a.btn,.nav .nav-cta a{padding:8px 12px;font-size:12.5px}
  .areti-logo img{height:25px}
}