/* ============================================================================
   aux.css: shared auxiliary-page system (2026-06-16)
   The "pop-up over the blurred homepage" treatment for the non-home pages
   (pricing, resources, about, contact, compare, articles, legal, referral,
   release-notes). Pairs with js/aux.js, which injects the chrome (blurred
   backdrop, close button, scroll hint, folder tabs) and tracks the tab trail.

   Load order on each aux page:  partials.css → site.css → aux.css → page <style>
   Body must carry:  class="is-aux"  data-aux-label="Pricing"
   Page content must be wrapped in:  <main class="aux-content"> … </main>
   ========================================================================== */

/* ---- Fonts (the homepage typeface, the loudest part of the disconnect) ---- */
@font-face{font-family:'Noi Grotesk';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/NoiGroteskTrial-Light.woff2') format('woff2')}
@font-face{font-family:'Noi Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/NoiGroteskTrial-Regular.woff2') format('woff2')}
@font-face{font-family:'Noi Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/NoiGroteskTrial-Medium.woff2') format('woff2')}
@font-face{font-family:'Noi Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/NoiGroteskTrial-Semibold.woff2') format('woff2')}
@font-face{font-family:'Noi Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/NoiGroteskTrial-Bold.woff2') format('woff2')}

:root{
  /* shared with home-v2 (same values) */
  --aux-lime:#c6f04f;
  --aux-green:#1a6b3d;
  --aux-green-deep:#0f4f2c;
  --aux-heading:#0A0A0A;
  --aux-body:#5C6C6D;
  --aux-panel:#F3F6FB;
  --aux-border:#D9DEDE;
  --aux-bg:#fbfaf6;                 /* the folder / sheet (warm cream) */
  --aux-max:1312px;
  --aux-gutter:clamp(22px,3.5vw,56px);
  /* the pop-up motif */
  --aux-substrate:#0e0f0c;          /* dark behind everything */
  --aux-slant:26px;                 /* folder-tab diagonal end */
}

/* ---- is-aux base: dark substrate + Noi Grotesk + hide the shared chrome ---- */
body.is-aux{
  margin:0;background:var(--aux-substrate);color:var(--aux-body);
  font-family:'Noi Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;
}
/* the folder tabs + close replace the nav; the homepage "underneath" carries it */
body.is-aux #md-main-header,
body.is-aux .md-header,
body.is-aux [data-include="header"]{display:none !important}
/* the shared footer renders BELOW the sheet: lift it above the fixed blurred
   backdrop (position:fixed; z-index:0), which would otherwise paint over the
   static footer and let the backdrop bleed through it */
body.is-aux footer,
body.is-aux [data-include="footer"]{position:relative;z-index:10}
/* Headings use the site typeface (overrides the partials Stack-Sans !important).
   Do NOT force colour/spacing here: pages style their own headings, including
   LIGHT text on their dark CTA bands. Forcing dark made those invisible. */
body.is-aux h1,body.is-aux h2,body.is-aux h3,body.is-aux h4{
  font-family:'Noi Grotesk',-apple-system,BlinkMacSystemFont,system-ui,sans-serif !important;
}

/* ---- Blurred homepage, lying underneath ---- */
.aux-home-under{
  position:fixed;inset:0;z-index:0;
  /* fallback colour ≈ the blurred backdrop's top tone, so a cold load never
     flashes the near-black substrate before the (40KB) webp paints */
  background:#232524 url('/img/aux-home-bg.webp') center top / cover no-repeat;
  filter:blur(9px) brightness(.9) saturate(1.06);transform:scale(1.05);
}
.aux-home-under::after{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(8,12,9,.32),rgba(8,12,9,.18) 45%,rgba(8,12,9,.28))}

/* ---- Close: PINNED (fixed), but sits on the cream sheet not the backdrop.
   At load it rests just inside the sheet's top-right; once scrolled past the
   dark gap (cream fills the viewport) it glides up to the top-right corner.
   Aligned to the content column. ---- */
.aux-close{
  position:fixed;top:144px;z-index:60;
  right:max(var(--aux-gutter), calc((100% - var(--aux-max)) / 2 + var(--aux-gutter)));
  width:44px;height:44px;border-radius:999px;border:1px solid var(--aux-border);cursor:pointer;
  background:#fff;color:#0a0a0a;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(10,30,20,.10);
  transition:top .35s cubic-bezier(.4,0,.2,1),transform .2s,box-shadow .2s}
.aux-close:hover{transform:scale(1.06);box-shadow:0 9px 24px rgba(10,30,20,.16)}
.aux-close svg{width:19px;height:19px}
body.is-aux.aux-scrolled .aux-close{top:18px}
@media(max-width:560px){.aux-close{top:128px}}

/* ---- Scroll-up hint (top centre) ---- */
.aux-hint{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:55;
  display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;
  color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5);
  animation:auxHintPulse 2.4s ease-in-out infinite;transition:opacity .35s ease}
.aux-hint svg{width:22px;height:22px;animation:auxHintBob 2.4s ease-in-out infinite}
.aux-hint span{font-size:13px;font-weight:500}
@keyframes auxHintPulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes auxHintBob{0%,100%{transform:translateY(2px)}50%{transform:translateY(-3px)}}
body.is-aux.aux-scrolled .aux-hint{opacity:0;pointer-events:none}

/* ---- Folder + sheet ---- */
/* fill:backwards (not both) so no transform lingers after the slide; a
   lingering transform would make nested position:fixed overlays mis-position */
.aux-shell{position:relative;z-index:10;padding:80px 0 0;will-change:transform;animation:auxIn .55s cubic-bezier(.16,.84,.24,1) backwards}
/* open: slide up from the bottom of the screen, over the home */
@keyframes auxIn{from{transform:translateY(100vh)}to{transform:translateY(0)}}
/* aux → aux: the folder is already open, so don't replay the full 100vh slide
   on every click, a quick settle. (body.aux-from-aux set by aux.js when the
   referrer was another aux page.) The big slide is kept for the home→aux entrance. */
body.aux-from-aux .aux-shell{animation:auxSettle .26s cubic-bezier(.16,.84,.24,1) backwards}
@keyframes auxSettle{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
/* close: quick poof (expand + fade + soft blur) */
body.is-aux.aux-leaving .aux-shell{animation:auxPoof .22s ease-in forwards}
@keyframes auxPoof{to{opacity:0;transform:scale(1.05);filter:blur(3px)}}
@media(prefers-reduced-motion:reduce){
  .aux-shell{animation:none}
  body.is-aux.aux-leaving .aux-shell{animation:none;opacity:0;transition:opacity .15s}
}
/* No FOUC: aux.js wraps the content into the sliding sheet after first paint,
   so without this the hero would flash at its normal position first. Hide the
   content at first paint and fade it in (CSS-driven, so it reveals even if the
   slide hasn't started, and never stays hidden if JS is slow). */
body.is-aux .aux-content{opacity:0;animation:auxReveal .45s ease .04s both}
@keyframes auxReveal{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){body.is-aux .aux-content{animation:none;opacity:1}}

.aux-tabrow{position:relative;z-index:3;display:flex;align-items:flex-end;
  max-width:var(--aux-max);margin:0 auto;padding:0 var(--aux-gutter)}
.aux-tab{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:46px;min-width:236px;padding:0 50px;background:var(--aux-bg);
  clip-path:polygon(var(--aux-slant) 0, calc(100% - var(--aux-slant)) 0, 100% 100%, 0 100%);
  color:var(--aux-green);font-weight:600;font-size:15px;letter-spacing:.02em;text-decoration:none;
  filter:drop-shadow(0 -5px 11px rgba(0,0,0,.22))}
.aux-tab svg{width:18px;height:18px;flex:none}
.aux-tab.inactive{height:42px;min-width:206px;background:#efe9da;color:#7e7b6f;
  filter:drop-shadow(0 -3px 8px rgba(0,0,0,.13));z-index:1}
.aux-tab.inactive:hover{background:#f4efe3;color:#5b584e}
.aux-tab.active{z-index:2}
.aux-tab.active:not(:first-child){margin-left:-30px}

.aux-sheet{position:relative;z-index:1;width:100%;background:var(--aux-bg);
  border-radius:0 0 22px 22px;box-shadow:0 -18px 50px rgba(0,0,0,.42)}
.aux-content{display:block}
.aux-wrap{max-width:var(--aux-max);margin:0 auto;padding-inline:var(--aux-gutter)}

/* ---- Content primitives (so converted pages share the look) ---- */
.is-aux .aux-content{padding:0 0 8px}
/* one consistent gap under the tab for EVERY page's first content block,
   regardless of the per-page hero padding it shipped with */
body.is-aux .aux-content > :first-child{padding-top:40px !important;margin-top:0 !important}
@media(max-width:560px){
  /* keep the first heading clear of the close button on narrow screens */
  body.is-aux .aux-content > :first-child{padding-right:56px}
  /* Tool pages (fca/at/sah/chm/pr/hal/nar) wrap ALL their content in a single
     <main>, so the rule above pads the entire column and leaves a gap down the
     right edge. Reset it there: the only content beside the fixed × close
     button is the hero eyebrow, so cap just that so it can't tuck under it. */
  body.is-aux .aux-content > main:first-child{padding-right:0}
  body.is-aux .aux-content > main .hero-eyebrow{max-width:calc(100% - 52px)}
}
.aux-brand{display:inline-block;font-family:'Stack Sans Text',system-ui,sans-serif;
  font-size:19px;font-weight:500;letter-spacing:-.02em;color:var(--aux-green);
  margin:30px 0 0;padding-inline:0}
.aux-hero{max-width:var(--aux-max);margin:0 auto;padding:14px var(--aux-gutter) 36px;text-align:left}
.aux-hero .kicker{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--aux-green);margin-bottom:14px}
.aux-hero h1{font-size:40px;max-width:22ch;color:var(--aux-heading);font-weight:500}
.aux-hero .sub{margin-top:18px;max-width:54ch;font-size:17px;color:var(--aux-body)}
.aux-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.aux-section{max-width:var(--aux-max);margin:0 auto;padding:14px var(--aux-gutter) 0}
.aux-section.last{padding-bottom:56px}

.aux-btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;
  font-size:16px;font-weight:500;cursor:pointer;border:none;font-family:inherit;text-decoration:none;
  transition:background .2s,color .25s,border-color .2s}
.aux-btn svg{width:16px;height:16px}
.aux-btn-green{background:var(--aux-green);color:#fff}.aux-btn-green:hover{background:var(--aux-green-deep)}
.aux-btn-outline{background:transparent;color:var(--aux-green);border:1.5px solid var(--aux-green)}
.aux-btn-outline:hover{background:var(--aux-green);color:#fff}
.aux-btn-lime{position:relative;isolation:isolate;overflow:hidden;background:var(--aux-lime);color:#0a0a0a}
.aux-btn-lime::before{content:"";position:absolute;inset:0;background:#0a0a0a;z-index:-1;
  transform:translateX(-101%);transition:transform .42s cubic-bezier(.2,.75,.25,1)}
.aux-btn-lime:hover{color:#fff}.aux-btn-lime:hover::before{transform:translateX(0)}

.aux-card{background:#fff;border:1px solid var(--aux-border);border-radius:16px;padding:24px;
  box-shadow:0 18px 40px rgba(10,30,20,.06);transition:transform .2s,box-shadow .2s}
.aux-card:hover{transform:translateY(-3px);box-shadow:0 22px 46px rgba(10,30,20,.12)}
.aux-prose{max-width:760px}

.aux-foot{max-width:var(--aux-max);margin:40px auto 0;padding:24px var(--aux-gutter) 8px;
  border-top:1px solid var(--aux-border);display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;align-items:center;font-size:13px;color:var(--aux-body)}
.aux-foot a{color:var(--aux-green)}

/* Existing page heroes bake in ~9.5rem top padding to clear the old fixed
   header. The header is hidden on aux pages and the sheet provides the top
   gap, so neutralise that clearance for the known hero blocks. */
body.is-aux .pricing-hero,body.is-aux .about-hero,body.is-aux .contact-hero,
body.is-aux .compare-hero,body.is-aux .cmp-hero,body.is-aux .rh-intro,
body.is-aux .ref-hero,body.is-aux .article-hero,body.is-aux .articles-hero,
body.is-aux .legal-hero,body.is-aux .doc-hero,body.is-aux .page-hero,
body.is-aux .page-wrap{padding-top:20px !important}
/* Tool pages reuse home-v2's .hero-content, whose top padding is
   calc(var(--nav-h) + …) to clear the (now-hidden) fixed nav, strip it so the
   tool hero sits at the same ~34px gap below the tab as every other page. */
body.is-aux .hero-content{padding-top:0 !important}

/* ===== Consistent hero (header + subheaders) across every aux page ===== */
/* some pages shipped centred: left-align every hero block */
body.is-aux .hero, body.is-aux .hero-pad, body.is-aux .hero-inner,
body.is-aux .hero-content, body.is-aux .pricing-hero, body.is-aux .about-hero,
body.is-aux .contact-hero, body.is-aux .cmp-hero, body.is-aux .rh-intro,
body.is-aux .ref-hero, body.is-aux .ref-hero-inner{
  text-align:left !important; align-items:flex-start !important;
}
/* one heading scale everywhere (margins zeroed to kill margin:0 auto centring) */
body.is-aux .aux-content h1{
  font-size:clamp(30px,4.2vw,46px) !important; font-weight:500 !important;
  letter-spacing:-.02em !important; line-height:1.1 !important;
  margin-left:0 !important; margin-right:0 !important;
}
/* one eyebrow/kicker style (green pill) for the pages that carry one */
body.is-aux .eyebrow, body.is-aux .rh-eyebrow, body.is-aux .ref-eyebrow,
body.is-aux .hero-eyebrow{
  display:inline-flex !important; align-items:center; gap:7px;
  font-size:12px !important; font-weight:600 !important; letter-spacing:.1em !important;
  text-transform:uppercase !important; color:var(--aux-green) !important;
  background:#eef7d9 !important; border:none !important; border-radius:999px !important;
  padding:6px 14px !important; margin:0 0 16px !important; width:auto !important;
}
/* one lead sub-paragraph style (margins zeroed to kill margin:0 auto centring) */
body.is-aux .hero > p, body.is-aux .hero-content > p, body.is-aux .pricing-hero p,
body.is-aux .about-hero > p, body.is-aux .contact-hero .sub, body.is-aux .hero-sub,
body.is-aux .cmp-hero > p, body.is-aux .rh-intro > p, body.is-aux .ref-hero p{
  font-size:17px !important; line-height:1.55 !important; color:var(--aux-body) !important;
  max-width:58ch; margin:16px 0 0 !important;
}

/* Some pages hide content with a scroll-reveal (opacity:0 until an
   IntersectionObserver fires). The sheet is reparented + transformed before
   that observer fires, so the content never reveals. The folder slide-up is
   the entrance animation: just show .reveal content immediately on aux pages. */
body.is-aux .reveal{opacity:1 !important;transform:none !important;transition:none !important}

@media(min-width:640px){.aux-hero h1{font-size:44px}}
@media(min-width:1024px){
  .aux-shell{padding-top:80px}
  .aux-hero{padding:24px var(--aux-gutter) 48px}
  .aux-hero h1{font-size:48px}.aux-hero .sub{font-size:17px}
}
@media(min-width:1280px){.aux-hero h1{font-size:52px}}
@media(max-width:560px){
  :root{--aux-slant:20px}
  .aux-shell{padding-top:72px}
  .aux-tab{min-width:0;padding:0 30px;font-size:14px}
  .aux-tab.inactive{min-width:0;padding:0 26px}
  .aux-hero h1{font-size:30px}
}