/* ==========================================================================
   Off Hours — Shared Site Stylesheet
   Single source of truth for design tokens, type scale, buttons, section
   shell, the rainbow-topper card pattern, the FAQ accordion, the footer, and
   the top nav (banner + full-bleed mega-menu + mobile hamburger).

   Scope discipline: this file holds what is GENUINELY shared across page
   types. Hero/product-specific layout, decorative SVG viz components, and
   page-unique sections stay in each page's local <style> block. Don't add
   page-specific rules here; that's how the old duplication happened in the
   first place.

   The nav itself is NOT edited per-page. Its markup lives once in
   partials/nav.html and is written into every page by scripts/stamp_nav.py —
   to change the nav, edit the partial and re-run that script, don't hand-edit
   the <nav> block inside a page. This file only carries the CSS; nav.js
   carries the behavior (dropdown, mobile burger, --nav-h measurement).

   llm-info.html is intentionally excluded from this system. It reuses the
   token NAMES --ink/--line for a different, plain-text AI-crawler palette —
   do not link this file there. Auth pages (login.html, signup.html) and
   lead-magnet pages (get/*.html, trial/index.html) intentionally use a
   stripped-down or entirely separate nav and are NOT part of the nav.html
   rollout — that's a deliberate design choice, not an oversight.
   ========================================================================== */

:root{
  /* ---- surfaces & text ---- */
  --cream:#F5F1E8;
  --cream-deep:#EDE6D5;
  --paper:#FAF7EE;
  --ink:#0F2A1E;
  --ink-soft:#3D5448;
  --ink-faint:#6B7E73;
  --line:rgba(15,42,30,0.08);
  --line-mid:rgba(15,42,30,0.14);
  --line-strong:rgba(15,42,30,0.22);

  /* ---- brand action color ---- */
  --moss:#1a4d3a;
  --moss-bright:#2C6E52;
  --moss-tint:rgba(26,77,58,0.08);

  /* ---- rule-type / pastel accents ---- */
  --peach:#FFD4B8;
  --peach-deep:#F7B894;
  --butter:#F5E6A8;
  --butter-deep:#EAD173;
  --sky:#CDE1E8;
  --sky-deep:#A9CBD6;
  --mint:#C9E2B8;
  --mint-deep:#A8CE8F;
  --coral:#FF8A66;
  --lilac:#D4C8E8;
  --rose:#F2C8D2;

  /* ---- signature rainbow gradient: thin underlines + 3-4px card toppers
     only, never a background fill ---- */
  --rainbow: linear-gradient(90deg, var(--coral) 0%, var(--peach-deep) 20%, var(--butter-deep) 40%, var(--mint-deep) 62%, var(--sky-deep) 82%, var(--lilac) 100%);
  --topper-h:4px;
  --ul-thickness:clamp(2px,0.045em,8px);
  --ul-offset:0.186em;

  /* ---- type ---- */
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'Space Mono',monospace;

  /* ---- layout ---- */
  /* Side gutter on every page container. Verified consistent across every
     .stage/.hero/section.block on the site already — this just names what
     was already true, so nobody has to rediscover "28px" from scratch. */
  --gutter:28px;
  /* Canonical page container width. Confirmed 1480px sitewide except
     agency-plan.html (a deliberately narrower 1200px used consistently
     across that whole page, not drift) and contact.html (1100px on the
     content but 1480px on its own footer — a real same-page mismatch). */
  --container-w:1480px;
  /* Height of the fixed banner + nav stack. A static value ONLY as a
     no-JS/first-paint fallback — nav.js measures the real rendered height
     (the banner wraps to 2 lines on narrow screens, so this isn't a
     constant) and overrides this via inline style on <html> on load and
     resize. Never hand-edit this number expecting it to matter; edit the
     banner/nav markup and let nav.js remeasure. */
  --nav-h:115px;

  /* ---- spacing scale ----
     Named vertical-rhythm steps, snapped to values already in real use
     across the site (section.block padding was 80/90/100/110px across
     different pages before this; --space-9 is the value the homepage
     rebuild settled on). This intentionally does NOT try to force every
     padding/margin in the codebase onto these nine steps — component-level
     numbers that are precisely tuned against something else (e.g. FAQ
     details padding against the icon circle's size) stay as authored
     one-offs. The scale exists for the small set of values that genuinely
     repeat: major-section padding, section-head spacing, CTA block rhythm. */
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:40px;
  --space-6:56px;
  --space-7:72px;
  --space-8:90px;
  --space-9:110px;
}

/* ============== RESET + BASE ============== */
*{margin:0;padding:0;box-sizing:border-box;}
/* clip on the root (not just body) so decorative blur blobs can't create a
   horizontal scroll. body-only clip propagates to the viewport and leaves the
   page wider than the window. Fixed on 6 pages this session; canonical here
   so it doesn't have to be independently rediscovered per page again. */
html{scroll-behavior:smooth;overflow-x:clip;}
body{
  background:var(--cream);color:var(--ink);
  font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.5;letter-spacing:-0.01em;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
::selection{background:var(--ink);color:var(--cream);}
img{max-width:100%;display:block;}

/* ============== ATMOSPHERE (decorative, non-interactive layers) ============== */
.grid-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at 50% 30%,rgba(0,0,0,0.8),transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,rgba(0,0,0,0.8),transparent 85%);
}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.3;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.iridescence{position:absolute;top:12%;right:0;width:55%;height:75%;z-index:0;pointer-events:none;filter:blur(90px);opacity:0.7;animation:oh-float 22s ease-in-out infinite alternate;}
.iridescence::before,.iridescence::after{content:"";position:absolute;border-radius:50%;}
.iridescence::before{top:0;left:20%;width:60%;height:70%;background:radial-gradient(circle,var(--peach),transparent 70%);}
.iridescence::after{bottom:0;right:0;width:70%;height:60%;background:radial-gradient(circle,var(--butter),transparent 70%);}
.iridescence-b{position:absolute;top:30%;left:-8%;width:45%;height:60%;z-index:0;filter:blur(90px);opacity:0.5;pointer-events:none;background:radial-gradient(circle,var(--sky),transparent 65%);animation:oh-float 26s ease-in-out infinite alternate-reverse;}
.iridescence-c{position:absolute;top:55%;right:25%;width:28%;height:35%;z-index:0;filter:blur(70px);opacity:0.5;pointer-events:none;background:radial-gradient(circle,var(--mint),transparent 65%);animation:oh-float 28s ease-in-out infinite alternate;}
@keyframes oh-float{from{transform:translate(0,0) scale(1);}to{transform:translate(40px,-30px) scale(1.08);}}
@keyframes oh-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.65;transform:scale(0.85);}}

/* floating ambient orbs (heavier atmosphere, used sparingly) */
.orb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;}
.orb-1{width:500px;height:500px;top:30%;left:-12%;background:radial-gradient(circle,var(--sky),transparent 65%);filter:blur(90px);opacity:0.35;animation:oh-float-orb 28s ease-in-out infinite alternate;}
.orb-2{width:420px;height:420px;top:55%;right:-10%;background:radial-gradient(circle,var(--lilac),transparent 65%);filter:blur(80px);opacity:0.3;animation:oh-float-orb 34s ease-in-out infinite alternate-reverse;}
.orb-3{width:360px;height:360px;top:78%;left:25%;background:radial-gradient(circle,var(--peach),transparent 65%);filter:blur(85px);opacity:0.3;animation:oh-float-orb 22s ease-in-out infinite alternate;}
@keyframes oh-float-orb{from{transform:translate(0,0) scale(1);}to{transform:translate(30px,-25px) scale(1.08);}}

@media (prefers-reduced-motion:reduce){.orb,.iridescence,.iridescence-b,.iridescence-c{animation:none;}}

/* ============== TYPE SCALE ==============
   Two canonical H1 treatments, since the site genuinely has two hero shapes:
   .h1-statement  — full-width single-column "big statement" hero (about,
                    blog post hero, standalone landing pages)
   .hero-title    — two-column hero with a graphic on the right (homepage,
                    the four rule-type product pages). Matches the exact
                    values tuned during the homepage rebuild.
   Both take an inner .accent/.accent-word span for the rainbow underline. */
.h1-statement{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(48px,7.5vw,104px);line-height:0.94;letter-spacing:-0.045em;
  color:var(--ink);
}
.hero-title,.hero-grid .hero-h1{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(46px,5.6vw,80px);line-height:0.98;letter-spacing:-0.042em;
  color:var(--ink);
}
@media (max-width:600px){
  .hero-title,.hero-grid .hero-h1{font-size:clamp(46px,11.5vw,60px);line-height:1.02;}
}
.h1-statement .line,.hero-title .line,.hero-grid .hero-h1 .line{display:block;}

/* H2 / section headline. Canonical value is the homepage's — the most
   recently, deliberately tuned of the several sizes this drifted to. */
.section-title{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(44px,6.5vw,92px);line-height:0.94;letter-spacing:-0.045em;
  color:var(--ink);max-width:1100px;
}
.section-title .accent{color:var(--moss);}

/* New reusable utilities — nothing in the current markup used these class
   names before, so adding them is additive, not a rename. Reach for these on
   new cards/sections instead of hand-rolling another one-off heading size. */
.h3{font-family:var(--font-display);font-weight:500;font-size:clamp(26px,2.6vw,36px);line-height:1.08;letter-spacing:-0.03em;color:var(--ink);}
.h4{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,1.8vw,24px);line-height:1.15;letter-spacing:-0.025em;color:var(--ink);}
.h5{font-family:var(--font-display);font-weight:500;font-size:18px;line-height:1.2;letter-spacing:-0.02em;color:var(--ink);}

/* NOTE on .accent/.accent-word: NOT a universal rule here on purpose. Some
   headings underline the accent word with the rainbow gradient (hero H1,
   .cta-head), others just recolor it (.section-title). A bare `.accent{}`
   mixin would apply background-image to both indiscriminately since CSS
   resolves per-property, not per-rule, and `.section-title .accent{color:...}`
   alone wouldn't be enough to cancel it. Each heading keeps its own accent
   rule (page-local for now, or here when the heading itself is centralized —
   see .cta-head .accent and .section-title .accent below). */

/* ============== BUTTONS ==============
   Canonical is the arrow-circle pill, used on 25 of 27 pages already. */
.btn-primary{
  display:inline-flex;align-items:center;gap:14px;
  padding:18px 12px 18px 26px;background:var(--moss);color:var(--cream);
  text-decoration:none;border-radius:999px;
  font-family:var(--font-body);font-weight:500;font-size:16px;letter-spacing:-0.015em;
  transition:transform 0.3s cubic-bezier(0.2,0.8,0.2,1),box-shadow 0.3s,background 0.3s;
  border:none;cursor:pointer;
}
.btn-primary .arr-circle{width:30px;height:30px;border-radius:50%;background:var(--cream);display:grid;place-items:center;color:var(--moss);font-size:12px;transition:transform 0.35s cubic-bezier(0.2,0.8,0.2,1),background 0.3s;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(26,77,58,0.25);background:var(--moss-bright);}
.btn-primary:hover .arr-circle{transform:rotate(-45deg);background:var(--butter);}
.btn-primary.sm{padding:12px 8px 12px 20px;font-size:14px;}
.btn-primary.sm .arr-circle{width:24px;height:24px;font-size:10px;}

/* Inverted pill, for dark bands (agency band, dark CTA blocks). Was
   previously applied with inline styles on individual buttons, which outrank
   :hover rules and silently killed the entire hover treatment. */
.btn-primary.invert{background:var(--cream);color:var(--ink);}
.btn-primary.invert .arr-circle{background:var(--ink);color:var(--cream);}
.btn-primary.invert:hover{background:var(--paper);box-shadow:0 16px 40px rgba(0,0,0,0.28);}
.btn-primary.invert:hover .arr-circle{background:var(--butter);color:var(--ink);}

.btn-ghost{display:inline-flex;align-items:center;gap:10px;padding:14px 4px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;letter-spacing:-0.01em;font-family:var(--font-body);position:relative;transition:gap 0.25s;}
.btn-ghost:hover{gap:14px;}

.btn-outline{display:inline-flex;align-items:center;gap:12px;padding:14px 22px;border-radius:999px;background:transparent;color:var(--ink);border:1px solid var(--ink);text-decoration:none;font-family:var(--font-body);font-weight:500;font-size:15px;letter-spacing:-0.01em;transition:background 0.25s,color 0.25s,gap 0.25s;cursor:pointer;}
.btn-outline:hover{background:var(--ink);color:var(--cream);gap:16px;}

/* ============== SECTION SHELL ============== */
section.block{position:relative;z-index:2;padding:var(--space-9) var(--gutter);max-width:var(--container-w);margin:0 auto;}
.section-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-6);}
.section-head.centered{align-items:center;}
.section-head.centered .section-title{text-align:center;margin-left:auto;margin-right:auto;}
.section-head.centered .section-intro{text-align:center;margin-left:auto;margin-right:auto;}
.section-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line-mid);font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);width:fit-content;text-transform:uppercase;letter-spacing:0.04em;}
.section-tag .num{width:18px;height:18px;border-radius:50%;background:var(--moss);color:var(--cream);display:grid;place-items:center;font-size:9px;font-weight:700;letter-spacing:0;}

/* ============== RAINBOW-TOPPER CARD PATTERN ==============
   Was reimplemented under 23 different page-specific selector names for the
   exact same 6 declarations. Apply this class alongside any card that wants
   the topper, instead of writing a new ::before per component. */
.rainbow-topper{position:relative;overflow:hidden;}
.rainbow-topper::before{
  content:"";position:absolute;top:0;left:0;right:0;height:var(--topper-h);
  background:var(--rainbow);border-radius:inherit;
  border-bottom-left-radius:0;border-bottom-right-radius:0;
  z-index:2;
}

/* ============== CTA BLOCK (color-pastel card, used for section-closing CTAs) ============== */
.cta-block{
  position:relative;z-index:2;margin-top:var(--space-6);border-radius:28px;overflow:hidden;
  padding:var(--space-6) 48px;display:grid;grid-template-columns:1.4fr auto;gap:var(--space-5);align-items:center;
  background:var(--mint);transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
.cta-block:hover{transform:translateY(-3px);}
.cta-block.peach{background:var(--peach);}
.cta-block.butter{background:var(--butter);}
.cta-block.sky{background:var(--sky);}
.cta-block.lilac{background:var(--lilac);}
.cta-block.rose{background:var(--rose);}
.cta-block.mint{background:var(--mint);}
.cta-block.ink{background:var(--ink);color:var(--cream);}
@media (max-width:820px){.cta-block{grid-template-columns:1fr;padding:var(--space-5) 32px;gap:28px;}}
.cta-head{font-family:var(--font-display);font-weight:500;font-size:clamp(32px,4.5vw,56px);line-height:0.98;letter-spacing:-0.04em;color:var(--ink);padding-bottom:0.22em;}
.cta-block.ink .cta-head{color:var(--cream);}
.cta-head .accent{color:var(--moss);display:inline;background-image:var(--rainbow);background-repeat:no-repeat;background-size:100% var(--ul-thickness);background-position:0 calc(100% - var(--ul-offset));padding-bottom:0;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.cta-block.ink .cta-head .accent{color:var(--butter);}
.cta-sub{margin-top:14px;font-size:17px;line-height:1.5;color:var(--ink-soft);max-width:540px;}
.cta-block.ink .cta-sub{color:rgba(245,241,232,0.75);}
.cta-note{margin-top:16px;font-family:var(--font-mono);font-weight:400;font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-faint);}
.cta-block .btn-primary{padding:20px 16px 20px 30px;font-size:17px;}
.cta-block .btn-primary .arr-circle{width:34px;height:34px;font-size:13px;}
.cta-block.ink .btn-primary{background:var(--butter);color:var(--ink);}
.cta-block.ink .btn-primary .arr-circle{background:var(--ink);color:var(--butter);}
.cta-block.ink .btn-primary:hover{background:var(--cream);}
.cta-block.ink .btn-primary:hover .arr-circle{background:var(--moss);color:var(--butter);}

/* ============== FAQ ACCORDION ==============
   Rounded-card layout: a centered header sits above a narrow (770px),
   vertically-stacked column of individually-carded questions. Replaces the
   old full-width divider list. Canonical scoping stays `.faq details`/
   `.faq summary` — bare element selectors (details{}/summary{}) apply to
   ANY <details> on the page, a real specificity risk if a page ever adds an
   unrelated collapsible. Icon interaction (circle, plus rotates to an
   accent-colored cross on open) is unchanged from the prior design, just
   resized to sit inside the card. */
.faq{display:flex;flex-direction:column;gap:14px;max-width:770px;margin:0 auto;}
.faq details{
  background:var(--paper);border:1px solid var(--line-mid);border-radius:18px;
  padding:26px 32px;transition:border-color 0.25s;
}
.faq details[open]{border-color:var(--line-strong);}
.faq summary{
  font-family:var(--font-display);font-weight:500;font-size:clamp(16px,1.6vw,18px);
  letter-spacing:-0.02em;line-height:1.3;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  transition:color 0.2s;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";flex-shrink:0;
  width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);
  background:
    linear-gradient(var(--ink-soft),var(--ink-soft)) center/12px 1.5px no-repeat,
    linear-gradient(var(--ink-soft),var(--ink-soft)) center/1.5px 12px no-repeat;
  transition:transform 0.3s,border-color 0.3s;
}
.faq details[open] summary::after{
  transform:rotate(45deg);
  background:linear-gradient(var(--moss),var(--moss)) center/12px 1.5px no-repeat;
  border-color:var(--moss);
}
.faq details[open] summary{color:var(--moss);}
.faq-answer{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:15px;line-height:1.65;}
.faq-answer b{color:var(--ink);}
.faq-answer a{color:var(--moss);text-underline-offset:2px;}

/* ============== BRAND MARK (used in both nav and footer) ============== */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);}
.brand-mark{
  width:32px;height:32px;border-radius:9px;background:var(--moss);color:var(--cream);
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:-0.04em;
  position:relative;overflow:hidden;
  transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
.brand-mark::after{content:"";position:absolute;top:8px;right:8px;width:5px;height:5px;border-radius:50%;background:var(--butter-deep);box-shadow:0 0 6px var(--butter);}
.brand:hover .brand-mark{transform:rotate(-6deg) scale(1.05);}
.brand-name{font-family:var(--font-display);font-weight:500;font-size:18px;letter-spacing:-0.03em;}

/* ============== FOOTER ============== */
.site-footer{position:relative;z-index:2;background:var(--ink);color:var(--cream);padding:80px 28px 32px;}
.footer-inner{max-width:1480px;margin:0 auto;}
.footer-top{display:grid;grid-template-columns:0.85fr 1.6fr;gap:56px;padding-bottom:48px;}
@media (max-width:900px){.footer-top{grid-template-columns:1fr;gap:40px;}}
.footer-brand{display:flex;flex-direction:column;gap:18px;max-width:320px;}
.footer-brand .brand-mark{background:var(--cream);color:var(--moss);}
.footer-brand .brand-mark::after{background:var(--coral);box-shadow:0 0 6px var(--coral);}
.footer-brand-name{font-family:var(--font-display);font-weight:500;font-size:18px;letter-spacing:-0.03em;display:flex;align-items:center;gap:11px;color:var(--cream);}
.footer-tagline{font-family:var(--font-display);font-weight:400;font-size:16px;line-height:1.5;color:rgba(245,241,232,0.7);max-width:300px;letter-spacing:-0.015em;}
.footer-status{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;color:rgba(245,241,232,0.65);text-transform:uppercase;letter-spacing:0.06em;padding:6px 12px;border-radius:999px;background:rgba(245,241,232,0.06);width:fit-content;}
.footer-status .dot{width:6px;height:6px;border-radius:50%;background:var(--mint-deep);box-shadow:0 0 6px var(--mint-deep);animation:oh-pulse 2.2s ease-in-out infinite;}

/* Newsletter form, added to the footer-brand column. */
.footer-newsletter{display:flex;flex-direction:column;gap:12px;margin-top:6px;}
.footer-newsletter-label{font-family:var(--font-mono);font-size:11px;font-weight:400;color:rgba(245,241,232,0.5);text-transform:uppercase;letter-spacing:0.06em;}
.footer-newsletter-field{position:relative;max-width:280px;}
.footer-newsletter-field input{width:100%;height:44px;padding:0 44px 0 14px;border-radius:10px;border:1px solid rgba(245,241,232,0.16);background:rgba(245,241,232,0.06);color:var(--cream);font-family:var(--font-body);font-size:14px;}
.footer-newsletter-field input::placeholder{color:rgba(245,241,232,0.4);}
.footer-newsletter-field input:focus{outline:none;border-color:var(--cream);}
.footer-newsletter-field button{position:absolute;top:0;right:0;height:44px;width:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--cream);cursor:pointer;padding:0;}
.footer-newsletter-note{font-family:var(--font-body);font-size:12px;line-height:1.5;color:rgba(245,241,232,0.4);max-width:280px;}

/* Nav link columns, packed into the right side of footer-top as a wrapping row. */
.footer-nav-cols{display:flex;flex-wrap:wrap;gap:40px 56px;}
.footer-col-head{font-family:var(--font-mono);font-size:10px;color:rgba(245,241,232,0.5);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:18px;}
.footer-col a{display:block;padding:6px 0;color:var(--cream);text-decoration:none;font-size:14px;font-family:var(--font-body);transition:color 0.2s;}
.footer-col a:hover{color:var(--butter);}

/* Bordered bottom tile: socials + copyright on the left, legal links on the right. */
.footer-bottom{padding:28px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;border-top:1px solid rgba(245,241,232,0.12);border-bottom:1px solid rgba(245,241,232,0.12);font-family:var(--font-mono);font-size:11px;color:rgba(245,241,232,0.5);text-transform:uppercase;letter-spacing:0.06em;}
.footer-bottom-left{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
@media (max-width:600px){.footer-bottom{flex-direction:column;align-items:flex-start;}}
.footer-socials{display:flex;gap:10px;}
.footer-socials a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(245,241,232,0.08);color:rgba(245,241,232,0.7);text-decoration:none;transition:background 0.25s,color 0.25s,transform 0.25s;}
.footer-socials a:hover{background:var(--butter);color:var(--ink);transform:translateY(-1px);}
.footer-socials a svg{display:block;}
.footer-bottom-links{display:flex;gap:24px;flex-wrap:wrap;}
.footer-bottom-links a{color:rgba(245,241,232,0.5);text-decoration:none;transition:color 0.2s;}
.footer-bottom-links a:hover{color:var(--butter);}
.footer-legal{margin-top:32px;font-size:11px;color:rgba(245,241,232,0.4);line-height:1.6;max-width:900px;font-family:var(--font-body);}

/* ============== NAV (banner + mega-menu + mobile hamburger) ==============
   Markup: partials/nav.html, stamped into every page by scripts/stamp_nav.py.
   Behavior: nav.js. This file only has the CSS. */
.nav-wrap{position:fixed;top:0;left:0;right:0;z-index:50;}
.banner-master{padding:4px;}
.banner{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  border-radius:16px;background:var(--mint);padding:9px 14px;text-align:center;
}
.banner-text,.banner a{
  font-family:var(--font-mono);font-weight:400;font-size:11px;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--ink);
}
.banner a{text-decoration:underline;text-underline-offset:3px;}
.nav{
  position:relative;
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  background:rgba(245,241,232,0.78);
}
.nav-inner{max-width:var(--container-w);margin:0 auto;padding:0 var(--gutter);}
.nav-container{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;
  padding:14px 0;border-bottom:1px solid var(--line-mid);
}
.nav-links{display:flex;gap:30px;justify-self:center;}
.nav-links > a{
  color:var(--ink);text-decoration:none;font-size:14px;font-weight:450;
  letter-spacing:-0.01em;position:relative;padding:4px 0;font-family:var(--font-body);
}
.nav-links > a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 0.3s cubic-bezier(0.2,0.8,0.2,1);
}
.nav-links > a:hover::after{transform:scaleX(1);}
/* current-page state, set by nav.js from location.pathname — not hand-marked
   per page, so the partial stays identical everywhere. */
.nav-links > a.active{color:var(--moss);}
.nav-links > a.active::after{transform:scaleX(1);background:var(--moss);}
.nav-cta{
  font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:-0.01em;
  padding:11px 20px;border-radius:999px;
  background:var(--moss);color:var(--cream);text-decoration:none;
  transition:transform 0.25s,background 0.25s,box-shadow 0.3s;
  display:inline-flex;align-items:center;gap:8px;
}
.nav-cta .dot{width:6px;height:6px;border-radius:50%;background:var(--butter-deep);box-shadow:0 0 6px var(--butter);}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 25px rgba(26,77,58,0.2);background:var(--ink);}
.nav-right{display:flex;align-items:center;gap:20px;justify-self:end;}
.nav-login{
  font-family:var(--font-body);font-size:14px;font-weight:450;letter-spacing:-0.01em;
  color:var(--ink);text-decoration:none;padding:4px 0;position:relative;
}
.nav-login::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 0.3s cubic-bezier(0.2,0.8,0.2,1);
}
.nav-login:hover::after{transform:scaleX(1);}
@media (max-width:820px){
  .nav-links{display:none;}
  .nav-inner{padding:0 18px;}
  .nav-container{grid-template-columns:1fr auto;gap:16px;padding:12px 0;}
}
@media (max-width:480px){
  .nav-inner{padding:0 16px;}
  .nav-right{gap:12px;}
  .nav-cta{padding:10px 16px;font-size:13px;gap:7px;}
  .banner{padding:8px 12px;gap:8px;}
  .banner-text,.banner a{font-size:10px;letter-spacing:0.05em;}
}

/* mega-menu - replaces the plain "Rules" nav link */
/* static so the panel below can resolve its absolute position against .nav and
   span the full viewport width instead of floating as a narrow card */
.nav-dropdown{position:static;}
.nav-dropdown-trigger{
  display:inline-flex;align-items:center;gap:5px;
  background:none;border:none;cursor:pointer;
  color:var(--ink);font-size:14px;font-weight:450;letter-spacing:-0.01em;
  font-family:var(--font-body);padding:4px 0;position:relative;
  /* above the panel's z-index:60, so if the hover bridge below ever overlaps
     the trigger's own box, the trigger still wins hit-testing and stays
     clickable. Hover works either way since both are .nav-dropdown
     descendants, but only the trigger has the click-to-toggle handler. */
  z-index:61;
}
.nav-dropdown-trigger::after{
  content:"";position:absolute;left:0;right:14px;bottom:0;height:1.5px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 0.3s cubic-bezier(0.2,0.8,0.2,1);
}
.nav-dropdown:hover .nav-dropdown-trigger::after,
.nav-dropdown.open .nav-dropdown-trigger::after{transform:scaleX(1);}
.nav-dropdown-chevron{
  width:9px;height:9px;flex-shrink:0;
  transition:transform 0.3s cubic-bezier(0.2,0.8,0.2,1);
}
.nav-dropdown:hover .nav-dropdown-chevron,
.nav-dropdown.open .nav-dropdown-chevron{transform:rotate(180deg);}
.nav-dropdown-panel{
  position:absolute;top:100%;left:0;right:0;
  background:var(--paper);
  box-shadow:0 30px 60px rgba(15,42,30,0.12);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);
  transition:opacity 0.22s cubic-bezier(0.2,0.8,0.2,1),transform 0.22s cubic-bezier(0.2,0.8,0.2,1),visibility 0.22s;
  z-index:60;
}
/* Bridges the dead zone between the trigger and the panel so hover survives
   the trip between them. Two bugs stacked here, verified with
   elementFromPoint at every point along the real path, not just by toggling
   the .open class: (1) the trigger sits vertically centered in a taller nav
   row, so the real gap (trigger bottom to nav bottom, where the panel
   starts) measured 26px, not the ~8px this bridge covered; (2) the bridge
   inherits pointer-events:none from the closed panel, so the instant the
   mouse left the trigger, :hover dropped, the panel (and its bridge) reverted
   to pointer-events:none, and the bridge became un-hoverable at the exact
   moment it needed to catch the cursor. pointer-events:auto here breaks that
   loop — the bridge is hoverable even while the panel it belongs to is
   otherwise closed. visibility:hidden on the closed panel is a SECOND,
   independent way an element drops out of hit-testing (separate from
   pointer-events) — pseudo-elements inherit it from their host, so the
   bridge needed its own visibility:visible too, or pointer-events:auto alone
   did nothing. Confirmed both were required with elementFromPoint, not by
   assuming either fix alone was sufficient. */
/* The bridge must only be hoverable while the dropdown is ALREADY hovered or
   open. The previous unconditional pointer-events:auto made this invisible
   full-nav-width strip permanently hot, and because it is a .nav-dropdown
   descendant, grazing it from any neighboring nav link (it sits 30px under
   the whole row, directly beneath "Blog") opened the Rules mega menu — the
   flickering half-open panel reported as the nav "doing a weird fidgety
   thing". Gated on :hover/.open, hit-testing still chains frame-to-frame on
   the trip from trigger to panel (the standard submenu-bridge pattern), but
   a cold pointer entering the strip passes straight through. */
.nav-dropdown-panel::before{
  content:"";position:absolute;left:0;right:0;top:-30px;height:30px;
  pointer-events:none;
}
.nav-dropdown:hover .nav-dropdown-panel::before,
.nav-dropdown.open .nav-dropdown-panel::before{
  pointer-events:auto;visibility:visible;
}
/* closes the sheet with the brand rule instead of a grey hairline. this is the
   sanctioned rainbow use (a thin rule), not a background fill. */
.nav-dropdown-panel::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:var(--topper-h);
  background:var(--rainbow);
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown.open .nav-dropdown-panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
}
.mega-inner{
  max-width:var(--container-w);margin:0 auto;padding:34px var(--gutter) 8px;
  display:grid;grid-template-columns:1.45fr 340px auto;gap:48px;align-items:start;
}
/* the "always on" column was 1fr, so on iPad-landscape widths (1194-1366px,
   above the 1180px breakpoint below but well short of --container-w) it
   stretched the Spend Alerts card far past its content, reading as a dead
   gap before the promo card. A fixed width lets the rule-types column (which
   can actually use extra room) absorb any leftover space instead. */
@media (max-width:1180px){.mega-inner{grid-template-columns:1.4fr 1fr;gap:36px;}.mega-promo{display:none;}}
/* bordered pill section labels, one per region */
.mega-label{
  display:inline-block;margin-bottom:18px;
  border:1px solid var(--line-mid);border-radius:24px;padding:7px 14px;
  font-family:var(--font-mono);font-weight:400;font-size:10.5px;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);
}
.mega-rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
.nav-dropdown-item{
  display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border-radius:16px;
  text-decoration:none;color:var(--ink);
}
.nav-dropdown-swatch{
  width:36px;height:36px;border-radius:11px;flex-shrink:0;margin-top:1px;
  display:grid;place-items:center;
}
.nav-dropdown-swatch svg{width:16px;height:16px;stroke:var(--ink);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.nav-dropdown-item.c1 .nav-dropdown-swatch{background:var(--peach);}
.nav-dropdown-item.c2 .nav-dropdown-swatch{background:var(--butter);}
.nav-dropdown-item.c3 .nav-dropdown-swatch{background:var(--sky);}
.nav-dropdown-item.c4 .nav-dropdown-swatch{background:var(--mint);}
.nav-dropdown-item-title{
  display:block;font-family:var(--font-display);font-weight:500;font-size:14.5px;
  letter-spacing:-0.02em;color:var(--ink);margin-bottom:3px;
}
.nav-dropdown-item-desc{display:block;font-size:12.5px;line-height:1.4;color:var(--ink-soft);}
.nav-dropdown-band{
  display:flex;align-items:flex-start;gap:12px;padding:16px;border-radius:16px;
  background:var(--cream);border:1px dashed var(--line-mid);
  text-decoration:none;color:var(--ink);
}
.nav-dropdown-band .nav-dropdown-band-pill{margin-left:0;margin-top:10px;align-self:flex-start;}
.nav-dropdown-band > span:nth-child(2){flex:1;}
.nav-dropdown-band .nav-dropdown-swatch{background:rgba(26,77,58,0.08);}
.nav-dropdown-band-pill{
  margin-left:auto;flex-shrink:0;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;
  color:var(--moss);border:1px solid var(--moss);border-radius:999px;padding:4px 10px;
  white-space:nowrap;
}
/* full-bleed band so the strip reads as a closing shelf rather than leftover
   space under the columns */
.nav-dropdown-footer{
  background:var(--cream);border-top:1px solid var(--line);
}
.nav-dropdown-footer-inner{
  max-width:var(--container-w);margin:0 auto;padding:15px var(--gutter) 19px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.nav-dropdown-footer-text{font-size:12px;color:var(--ink-faint);font-family:var(--font-mono);letter-spacing:0.02em;}
/* promo card, third region of the sheet */
.mega-promo{text-decoration:none;color:var(--ink);display:block;width:280px;}
.mega-promo-card{
  position:relative;overflow:hidden;border-radius:16px;background:var(--cream);
  border:1px solid var(--line-mid);height:150px;padding:22px 18px 0;
  display:flex;align-items:flex-end;gap:5px;
}
.mega-promo-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:var(--topper-h);
  background:var(--rainbow);border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0;
}
.mega-promo-bar{flex:1;border-radius:3px 3px 0 0;background:var(--mint-deep);}
.mega-promo-bar.dead{background:var(--coral);opacity:0.85;}
.mega-promo-title{
  display:block;margin-top:14px;font-family:var(--font-display);font-weight:500;font-size:15px;
  letter-spacing:-0.02em;line-height:1.25;
}
.mega-promo-link{
  margin-top:7px;font-size:12.5px;color:var(--moss);font-weight:500;
  display:flex;align-items:center;gap:5px;transition:gap 0.25s;
}
.mega-promo:hover .mega-promo-link{gap:9px;}
@media (max-width:820px){.nav-dropdown-panel{display:none;}}

/* mobile nav */
.nav-burger{display:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--line-mid);background:var(--paper);cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;}
.nav-burger svg{width:18px;height:18px;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;fill:none;}
@media (max-width:820px){.nav-burger{display:inline-flex;}.nav-right .nav-login{display:none;}}
.mobile-nav{position:fixed;top:var(--nav-h);left:0;right:0;z-index:49;background:var(--paper);border-bottom:1px solid var(--line-mid);box-shadow:0 30px 60px rgba(15,42,30,0.14);padding:10px 22px 24px;display:none;flex-direction:column;max-height:calc(100vh - var(--nav-h) - 10px);overflow:auto;}
.mobile-nav.open{display:flex;}
.mobile-nav a{padding:13px 6px;text-decoration:none;color:var(--ink);font-size:16px;font-weight:500;font-family:var(--font-body);border-bottom:1px solid var(--line);}
.mobile-nav a:last-of-type{border-bottom:none;}
.mn-eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint);padding:16px 6px 6px;}
.mobile-nav .mn-cta{margin-top:16px;border-bottom:none;display:inline-flex;align-self:flex-start;}
.mobile-nav a.mn-cta{color:var(--cream);font-size:16px;font-weight:500;padding:16px 14px 16px 26px;border-bottom:none;display:inline-flex;align-items:center;gap:12px;}
/* the four rule cards + Spend Alerts band reuse the mega-menu's own item/band
   styling (same swatches, same "included free" pill) instead of a plain link
   list, so the panel opens with the same visual hierarchy as desktop's mega
   menu: four compact rule rows, then the always-on band, then the CTA. Both
   classes need their border-bottom and padding re-declared here at
   .mobile-nav's own specificity, same as .mn-cta already does below, since
   the bare `.mobile-nav a` rule above would otherwise win and flatten them
   back into plain list rows. */
.mobile-nav a.nav-dropdown-item,
.mobile-nav a.nav-dropdown-band{border-bottom:none;padding:12px 6px;}
.mobile-nav .nav-dropdown-band{margin-top:6px;}
@media (min-width:821px){.mobile-nav{display:none !important;}}

/* ============== REVEAL-ON-SCROLL ============== */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 0.9s cubic-bezier(0.2,0.7,0.3,1),transform 0.9s cubic-bezier(0.2,0.7,0.3,1);}
.reveal.in{opacity:1;transform:translateY(0);}

/* ============== ACCESSIBILITY BASELINE ============== */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--cream);padding:12px 20px;border-radius:0 0 12px 0;font-family:var(--font-body);font-size:14px;text-decoration:none;}
.skip-link:focus{left:0;}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--moss);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important;}}
