/* ============================================================
   VERAPATH — Marketing-site design foundation (light)
   Source: Claude Design handoff (design_handoff_light_site/assets/verapath.css).
   Tokens + fonts verified against the Verapath brand styleguide.

   Loaded ONLY on the public marketing pages (via WebsiteLayout) — never on
   the customer/admin portal. Defines the brand families "Serrif" / "Season Sans"
   reusing the self-hosted woff files already in /fonts (verapath-fonts.css
   declares those same files under per-weight family names; this file groups
   them into the two families the design tokens reference).
   ============================================================ */

/* ---------- Fonts (reuse existing /fonts woff files) ---------- */
@font-face{
  font-family:"Serrif";
  src:url("/fonts/serrif-regular.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Serrif";
  src:url("/fonts/serrif-medium.woff") format("woff");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Serrif";
  src:url("/fonts/serrif-regular-italic.woff") format("woff");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Season Sans";
  src:url("/fonts/season-sans-regular.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Season Sans";
  src:url("/fonts/season-sans-regular-italic.woff") format("woff");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Season Sans";
  src:url("/fonts/season-sans-semibold.woff") format("woff");
  font-weight:650; font-style:normal; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* core brand */
  --forest:#223029;        /* primary ink / dark surfaces */
  --forest-2:#1a241f;      /* deeper */
  --forest-3:#0f1612;      /* near-black green */
  --lime:#a3e96b;          /* signature accent */
  --green:#0ea665;         /* secondary action green */
  --ink:#3b3b33;           /* body text on light */

  /* paper / neutrals */
  --paper:#f8f8f3;         /* warm white page bg */
  --paper-2:#f1e9e2;       /* warm beige block */
  --paper-3:#f8f4f0;       /* lighter warm */
  --line:#e0e3e2;          /* hairline on light */
  --line-soft:#3b3b3322;   /* hairline tint */
  --mute:#909893;          /* muted text */
  --mute-2:#b9c0be;

  /* tints */
  --mint:#daf4dd;
  --mint-2:#edfaee;
  --violet:#bca9f1;
  --violet-2:#e5daf4;
  --violet-3:#f1edfa;
  --coral:#f9574d;

  /* on dark */
  --on-dark:#f8f8f3;
  --on-dark-mute:#b9c0be;
  --on-dark-line:#ffffff1f;

  /* type */
  --serif:"Serrif","Iowan Old Style","Times New Roman",serif;
  --sans:"Season Sans","Helvetica Neue",Arial,sans-serif;

  /* fluid type scale */
  --t-display: clamp(3rem, 1.2rem + 6.2vw, 7rem);
  --t-h1:      clamp(2.4rem, 1.2rem + 4vw, 4.6rem);
  --t-h2:      clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);
  --t-h3:      clamp(1.35rem, 1rem + 1.2vw, 1.9rem);
  --t-lead:    clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem);
  --t-body:    1.0625rem;
  --t-small:   0.875rem;
  --t-eyebrow: 0.78rem;

  /* spacing rhythm */
  --shell: min(92vw, 1240px);
  --radius:18px;
  --radius-lg:28px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.44,0,.56,1);
}

/* ---------- Resets / base (scoped to .B marketing wrapper) ---------- */
.B *,.B *::before,.B *::after{box-sizing:border-box}
.B{font-family:var(--sans);font-size:var(--t-body);line-height:1.55;color:var(--ink);background:var(--paper);
  font-feature-settings:"ss01","cv09","cv03","cv04","cv11";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.B h1,.B h2,.B h3,.B h4,.B p,.B figure{margin:0}
.B a{color:inherit;text-decoration:none}
.B img{display:block;max-width:100%}
.B button{font-family:inherit}

/* ---------- Shared type helpers ---------- */
.B .serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.04}
.B .eyebrow{font-family:var(--sans);font-weight:650;font-size:var(--t-eyebrow);letter-spacing:.18em;text-transform:uppercase}
.B .lead{font-size:var(--t-lead);line-height:1.5;color:color-mix(in srgb,var(--ink) 78%,transparent)}

/* italic emphasis in headlines uses the serif italic — a brand signature */
.B .serif em, .B .ital{font-style:italic;font-family:var(--serif)}

/* ---------- Buttons ---------- */
.B .btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--sans);font-weight:650;white-space:nowrap;
  font-size:.98rem;letter-spacing:.005em;padding:.85em 1.35em;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  will-change:transform}
.B .btn:hover{transform:translateY(-2px)}
.B .btn-lime{background:var(--lime);color:var(--forest)}
.B .btn-lime:hover{background:#b6f184}
.B .btn-forest{background:var(--forest);color:var(--on-dark)}
.B .btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.B .btn-ghost-dark{background:transparent;border-color:var(--on-dark-line);color:var(--on-dark)}
.B .btn .arr{transition:transform .35s var(--ease)}
.B .btn:hover .arr{transform:translateX(4px)}

/* ---------- Reveal - one-shot entrance animation ----------
   Two things have to be true at once, and an earlier attempt at this got the
   second one by sacrificing the first:

   1. The content must be VISIBLE at first paint. These elements include the
      whole above-the-fold hero - the h1, the sub, the CTA row, the tagline -
      so gating them on hydration left the hero blank for the ~0.5-0.7s the
      circuit takes to connect in production, which read as the page redrawing
      itself a beat after load.
   2. The animation must not play TWICE. When the circuit connects Blazor
      discards the prerendered DOM and re-renders, so .reveal elements become
      brand new nodes and a plain CSS animation replays on them.

   So: animate normally from first paint - nothing is hidden and nothing waits
   on JavaScript - and instead stop the REPLACEMENTS from replaying, by
   stamping .vp-drawn onto the nodes as the swap lands (see
   wwwroot/Verapath.Website.lib.module.js). Stamped nodes render at their
   natural end state, so the entrance animation is truncated at the swap rather
   than restarted. Nodes arriving later via enhanced navigation are never
   stamped, so those pages still animate once on arrival.

   Note there is deliberately no JS-dependent gate here: if the initializer
   never runs, the worst case is the old double-draw, never blank content. */
.B .reveal{animation:vp-reveal .9s var(--ease) both}
.B .reveal.vp-drawn{animation:none}
@keyframes vp-reveal{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .B .reveal{animation:none}
  html{scroll-behavior:auto}
}
}
}

/* shared brand mark path data is inlined per-page for color control */

/* ---------- mobile nav drawer (design_handoff_v8 v8-verapath.css) ---------- */
.B .navcta{display:flex;align-items:center;gap:20px}
/* Drawer-only CTAs: they live inside .navlinks and only appear once the drawer
   is open (see the 1060px block below). */
.B .drawer-cta{display:none}
.B .navburger{display:none;flex:none;width:42px;height:42px;border-radius:12px;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;padding:0;align-items:center;justify-content:center;opacity:.75;transition:opacity .25s}
.B .navburger:hover{opacity:1}
.B .navburger span{display:block;position:relative;width:18px;height:1.5px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.B .navburger span::before,.B .navburger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.B .navburger span::before{top:-6px}
.B .navburger span::after{top:6px}
.B nav[data-nav].navopen .navburger span{background:transparent}
.B nav[data-nav].navopen .navburger span::before{transform:translateY(6px) rotate(45deg)}
.B nav[data-nav].navopen .navburger span::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1060px){
  .B .navburger{display:inline-flex}
  /* Bar is reduced to brand + hamburger: the CTAs would otherwise overflow a
     phone-width bar and push the hamburger off-canvas. They reappear inside
     the drawer as .drawer-cta. */
  .B .navcta .btn{display:none}
  .B nav[data-nav]{background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(16px) saturate(1.2)}
  .B nav[data-nav] .brand,.B nav[data-nav] .brand .mk,.B nav[data-nav] .navburger{color:var(--forest)}
  .B nav[data-nav] .btn-ghost[data-login]{border-color:var(--line);color:var(--ink)}
  .B nav[data-nav].navopen .navlinks{display:flex;flex-direction:column;gap:0;position:fixed;top:76px;left:0;right:0;
    background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:14px max(20px,calc((100vw - var(--shell)) / 2)) 24px;max-height:calc(100vh - 76px);overflow-y:auto;
    box-shadow:0 30px 70px -34px rgba(34,48,41,.4);color:var(--forest);font-size:1.06rem}
  .B nav[data-nav].navopen .navlinks > a,.B nav[data-nav].navopen .navlinks .has-drop > .trg{display:block;padding:14px 2px;border-bottom:1px solid var(--line);font-weight:650;color:var(--forest)}
  .B nav[data-nav].navopen .navlinks .has-drop{position:static}
  .B nav[data-nav].navopen .navlinks .has-drop > .trg::after{float:right;margin-top:.45em}
  .B nav[data-nav].navopen .navlinks .drop{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    display:none;box-shadow:none;border:0;border-radius:0;background:transparent;min-width:0;padding:2px 0 10px;transition:none}
  .B nav[data-nav].navopen .navlinks .has-drop.open > .drop{display:flex}
  .B nav[data-nav].navopen .navlinks .drop a{padding:10px 12px;font-weight:400}
  .B nav[data-nav] .navlinks .has-drop::after{display:none}
  /* Log in / Request a demo, stacked full-width at the foot of the drawer. */
  .B nav[data-nav].navopen .navlinks .drawer-cta{display:flex;flex-direction:column;gap:10px;padding-top:18px}
  .B nav[data-nav].navopen .navlinks .drawer-cta .btn{display:inline-flex;justify-content:center;width:100%;padding:.95em 1.35em;font-size:1rem}
  .B nav[data-nav].navopen .navlinks .drawer-cta .btn-ghost{border-color:var(--line);color:var(--forest)}
  .B nav[data-nav].navopen .navlinks .drawer-cta .btn-lime{background:var(--lime);color:var(--forest)}
}

/* ---------- nav dropdown hover bridge (loaded on every page) ---------- */
.B .navlinks .has-drop::after{content:"";position:absolute;left:0;right:0;top:100%;height:22px;display:none}
.B .navlinks .has-drop:hover::after{display:block}
.B .navlinks .drop{transition-delay:.28s}
.B .navlinks .has-drop:hover .drop,.B .navlinks .has-drop:focus-within .drop{transition-delay:0s}

/* ---------- scroll-to-top button (auto-injected by vp-marketing.js) ---------- */
.B .to-top{position:fixed;right:26px;bottom:30px;z-index:80;width:52px;height:52px;border-radius:50%;border:1px solid color-mix(in srgb,var(--lime) 40%,transparent);background:var(--forest);color:var(--lime);display:grid;place-items:center;cursor:pointer;box-shadow:0 18px 40px -16px rgba(34,48,41,.6);opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);transition:opacity .35s ease,transform .35s ease,visibility .35s,background .25s,color .25s;padding:0}
.B .to-top.show{opacity:1;visibility:visible;transform:none}
.B .to-top:hover{background:var(--lime);color:var(--forest);transform:translateY(-3px)}
.B .to-top svg{width:22px;height:22px}
@media(max-width:640px){.B .to-top{right:16px;bottom:18px;width:46px;height:46px}}