/* ==========================================================
   site-chrome.css — shared header + drawer + footer chrome
   ----------------------------------------------------------
   Extracted verbatim from crispsign-brand-site/styles.css so the
   builder hubs render an IDENTICAL header (hamburger + wordmark +
   right-side account cluster) and footer (dark navy 5-column) as
   the marketing site. Any change to the canonical chrome should be
   mirrored here.

   All rules are self-contained and hoist their own CSS variables
   under :root so a hub HTML file only needs to import this ONE
   stylesheet before the page CSS to pick up the full chrome.

   Layout depends on 'Space Grotesk' + 'Inter' being loaded — every
   hub already imports them from Google Fonts, so we don't duplicate
   the @import here.
   ========================================================== */

:root {
  --cream: #FAF7F2;
  --navy: #0A1226;
  --navy-deep: #050912;
  /* v2 rebrand: Signal Red replaces Signal Orange. Variable names kept
     for backward compat across the stylesheet. */
  --orange: #E81820;
  --orange-night: #FF4D55;
  --signal-red: #E81820;
  --ink-muted: #5C6273;
  --border: #E5DFD3;
  --halo-warm: #FFF5E0;

  --bg: var(--cream);
  --surface: #ffffff;
  --text: var(--navy);
  --text-muted: var(--ink-muted);

  --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --text-xs: 0.78rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.4rem, 2.4vw, 1.875rem);
  --text-2xl: clamp(2rem, 4vw, 3rem);
  --text-hero: clamp(2.2rem, 4.5vw, 3.8rem);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --container: 1240px;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(10,18,38,0.06), 0 2px 8px rgba(10,18,38,0.04);
  --shadow: 0 4px 12px rgba(10,18,38,0.08), 0 12px 32px rgba(10,18,38,0.10);
  --shadow-lg: 0 12px 28px rgba(10,18,38,0.16), 0 32px 64px rgba(10,18,38,0.18);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --header-h: 0px;
}

/* ==========================================================
   Reset
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; margin: 0; line-height: 1.1; }

.floating-menu-btn {
  position: fixed;
  top: clamp(var(--space-4), 2vw, var(--space-6));
  left: clamp(var(--space-4), 2vw, var(--space-6));
  z-index: 200;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(5, 9, 18, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.floating-menu-btn:hover {
  background: rgba(5, 9, 18, 0.6);
  border-color: rgba(255, 255, 255, 0.25);
}
.floating-menu-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--cream);
}

/* Slim side drawer nav — replaces full-screen overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(5, 9, 18, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.nav-overlay[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}
.nav-overlay[hidden] { display: none; }

.nav-overlay-drawer {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: min(320px, 88vw);
  background: #0A1226;
  color: var(--cream);
  transform: translateX(-100%);
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 28px);
  box-shadow: 4px 0 24px rgba(0,0,0,0.32);
  overflow-y: auto;
}
.nav-overlay[data-open="true"] .nav-overlay-drawer {
  transform: translateX(0);
}

.nav-overlay-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--cream);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms ease;
  z-index: 2;
}
.nav-overlay-close:hover { background: rgba(255, 255, 255, 0.08); }

.nav-overlay-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  padding-right: 60px; /* leave room for close button */
}
.nav-overlay-logo img { height: 26px; width: auto; }

.nav-overlay-links {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
}
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nav-group-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.5);
  margin: 0 0 2px;
  padding: 0;
}
.nav-overlay-links a {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 6px 0;
  border-radius: 6px;
  transition: color 200ms ease, transform 200ms ease;
  display: inline-block;
}
.nav-overlay-links a:hover,
.nav-overlay-links a:focus-visible {
  color: #E81820;
  transform: translateX(3px);
}
.nav-overlay-links .nav-overlay-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 999px;
  background: #E81820;
  color: #fff;
  font-weight: 600;
  margin-top: 6px;
  transition: background 200ms ease;
}
.nav-overlay-links .nav-overlay-cta:hover {
  background: #C11319;
  color: #fff;
  transform: none;
}

/* ==========================================================
   Header account controls (fixed top-right, like the builders)
   ----------------------------------------------------------
   A persistent Sign in / My Account cluster in the right-hand
   header zone, mirroring the builder apps. The CrispSign hero
   logo stays the home link; these controls sit above it in the
   same top band. Static links only — the brand site is a static
   site and cannot read the cross-origin app session, so both
   controls are always shown (see scripts/account-controls.test.mjs).
   ========================================================== */
.account-controls {
  position: fixed;
  top: clamp(var(--space-4), 2vw, var(--space-6));
  right: clamp(var(--space-4), 2vw, var(--space-6));
  z-index: 200;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.account-controls a,
.account-controls button {
  /* Neutralize native <button> defaults so buttons match <a>-styled pills
     when both are used in .account-controls (e.g. builder pages where the
     cart is a <button id="panelHeaderCart"> that opens a local drawer). */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;

  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.account-controls .account-signin {
  color: var(--cream);
  background: rgba(5, 9, 18, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.account-controls .account-signin:hover {
  background: rgba(5, 9, 18, 0.6);
  border-color: rgba(255, 255, 255, 0.3);
}
.account-controls .account-phone {
  color: var(--navy, #0A1226);
  background: #FFFFFF;
  border: 1px solid rgba(10, 18, 38, 0.14);
  box-shadow: 0 8px 22px rgba(10, 18, 38, 0.10);
}
.account-controls .account-phone:hover {
  background: var(--cream, #FAF7F2);
  border-color: rgba(10, 18, 38, 0.22);
}
.account-controls .account-cart {
  position: relative;
  width: 40px;
  min-width: 40px;
  padding: 0;
  justify-content: center;
  color: var(--navy, #0A1226);
  background: #FFFFFF;
  border: 1px solid rgba(10, 18, 38, 0.14);
  box-shadow: 0 8px 22px rgba(10, 18, 38, 0.10);
}
.account-controls .account-cart:hover {
  background: var(--cream, #FAF7F2);
  border-color: rgba(10, 18, 38, 0.22);
}
.account-controls .account-cart svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.account-cart-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--signal-red, #E81820);
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  font-family: var(--font-display, system-ui);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 5px 12px rgba(232, 24, 32, 0.28);
}
.account-cart-count[hidden] {
  display: none;
}
/* My Account is a utility/secondary control — navy, not red. */
.account-controls .account-portal {
  color: var(--cream);
  background: var(--navy);
  border: 1px solid var(--navy);
}
.account-controls .account-portal:hover {
  background: var(--navy-deep);
  color: var(--cream);
  border-color: var(--navy-deep);
}
/* Primary sitewide CTA — the forward-conversion action. Red pill, always visible. */
.account-controls .account-cta {
  color: var(--cream);
  background: var(--signal-red, #E81820);
  border: 1px solid var(--signal-red, #E81820);
  box-shadow: 0 2px 10px rgba(232, 24, 32, 0.24);
}
.account-controls .account-cta:hover {
  background: #C11319;
  border-color: #C11319;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(232, 24, 32, 0.34);
}
@media (max-width: 600px) {
  .floating-menu-btn {
    top: 10px;
    left: 10px;
    width: 42px;
    height: 42px;
  }
  .account-controls {
    top: 10px;
    right: 10px;
    gap: 6px;
  }
  .account-controls .account-cta,
  .account-controls .account-phone {
    display: none;
  }
  .account-controls a {
    height: 36px;
    padding: 0 12px;
    font-size: var(--text-xs);
  }
  .account-controls .account-cart {
    width: 36px;
    min-width: 36px;
    padding: 0;
  }
}
@media (max-width: 480px) {
  .account-controls { top: 10px; right: 10px; }
  .account-controls a {
    height: 34px;
    padding: 0 10px;
  }
  .account-controls .account-portal {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .account-controls .account-cart {
    width: 34px;
    min-width: 34px;
  }
  .account-controls .account-cart svg {
    width: 16px;
    height: 16px;
  }
}

/* ==========================================================
   Buttons
   ========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--orange);
  color: var(--cream);
}
.legal-logo {
  position: fixed;
  /* Vertical center alignment with the hamburger:
     Hamburger uses top: clamp(var(--space-4), 2vw, var(--space-6))
     (~24px desktop) and is 48px tall — center sits at y = top + 24.
     The logo wrapper is 72px tall to match the sitewide Gallery
     template, so pull its top up by (72-48)/2 = 12px so both share a
     horizontal centerline. Same math on mobile: 56 vs 48 = 4px. */
  top: calc(clamp(var(--space-4), 2vw, var(--space-6)) - 12px);
  /* Hamburger sits at left: clamp(16px, 2vw, 24px) and is 48px wide, so its
     right edge tracks 2vw + 48px. Offset the logo by a further ~20px so it
     keeps a comfortable gap from the button at every width. */
  left: clamp(84px, calc(2vw + 68px), 92px);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  height: 72px;
  text-decoration: none;
  transition: opacity 200ms ease;
}
.legal-logo:hover { opacity: 0.8; }
.legal-logo img {
  display: block;
  /* Sitewide chrome brand-mark size: 72px on desktop, 56px on mobile.
     Matches the Gallery-style header used across crispsign.com and
     builder.crispsign.com so every user-facing page shares one header. */
  height: 72px;
  width: auto;
}
@media (max-width: 600px) {
  /* Mobile chrome: hamburger shrinks to 42x42 at top:10, left:10, so
     center is at y=31. Logo image is now 32px tall (wrapper 42px) so
     it fits between the hamburger and the .account-controls cluster
     without overlapping. Center math: (wrapper 42 - hamburger 42)/2 = 0
     => wrapper top = 10px. */
  .legal-logo {
    top: 10px;
    height: 42px;
    left: 60px; /* hamburger ends at ~52; give it an 8px gap */
  }
  .legal-logo img { height: 32px; }
}
@media (max-width: 480px) {
  /* Very narrow phones: further shrink the wordmark so it never runs
     into the account cluster (cart + Sign in + My Account). At 480px:
     hamburger ends at ~52, account cluster starts around ~170. That
     leaves ~110px for the wordmark. At 26px height the image is
     26 * (3000/795) ≈ 98px wide — fits with a small buffer. */
  .legal-logo img { height: 26px; }
}
@media (max-width: 380px) {
  /* Smallest phones: hide the wordmark entirely rather than crowd the
     account cluster. Hamburger + Sign in / My Account remain. */
  .legal-logo { display: none; }
}
.hero-eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.site-footer {
  background: var(--navy-deep);
  color: rgba(250, 247, 242, 0.6);
  padding: var(--space-16) 0 var(--space-8);
  position: relative;
  overflow: hidden;
}
.footer-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 14vw, 12rem);
  letter-spacing: -0.06em;
  color: rgba(250, 247, 242, 0.07);
  line-height: 0.85;
  margin-bottom: var(--space-8);
  user-select: none;
  padding: 0 var(--space-6);
}
@media (min-width: 768px) { .footer-wordmark { padding: 0 var(--space-8); } }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  padding: var(--space-8) var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  max-width: var(--container);
  margin: 0 auto;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(5, 1fr); gap: var(--space-10); padding: var(--space-8) var(--space-8); }
}
@media (min-width: 768px) and (max-width: 1080px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
}
.footer-grid a, .footer-grid span {
  display: block;
  padding: 4px 0;
  font-size: var(--text-sm);
  color: rgba(250, 247, 242, 0.7);
}
.footer-grid a:hover { color: var(--orange-night); }

/* Follow column: icon + label rows (each on own line) */
.footer-follow .footer-social {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 4px 0 !important;
  color: rgba(250, 247, 242, 0.7);
  text-decoration: none;
  transition: color 0.15s ease;
  width: fit-content;
}
.footer-follow .footer-social svg { flex-shrink: 0; opacity: 0.9; }
.footer-follow .footer-social:hover { color: var(--orange-night); }
.footer-follow .footer-social:hover svg { opacity: 1; }
.footer-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.45);
  font-weight: 700;
  margin: 0 0 var(--space-3);
}
.footer-fineprint {
  margin: var(--space-8) auto 0;
  font-size: var(--text-xs);
  color: rgba(250, 247, 242, 0.4);
  text-align: left;
  padding: 0 var(--space-6);
  max-width: var(--container);
}
@media (min-width: 768px) { .footer-fineprint { padding: 0 var(--space-8); } }
.footer-fineprint em {
  color: var(--orange);
  font-style: italic;
  font-weight: 600;
}

/* ==========================================================
   Reduced motion
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .highlight-box { transition: opacity 0.2s; }
}

/* Brand names stay mixed-case even inside uppercase labels */
.line-eyebrow .brand,
.detail-num .brand,
.section-eyebrow .brand,
.hero-eyebrow .brand,
.footer-eyebrow .brand {
  text-transform: none;
  letter-spacing: 0.02em;
}

/* ===========================================
   PRODUCT PAGES (crispbeacon, crisplobby, crispauto, contact)
   =========================================== */

/* Hero-mark variant for use on light/cream product page heroes.
   Drop-shadow soft so the navy lockup reads cleanly on cream. */
.hero-mark--solid {
  filter: drop-shadow(0 1px 2px rgba(10,18,38,0.12));
}

/* ---------- Product hero ---------- */
.product-hero {
  position: relative;
  background: var(--cream);
  padding: clamp(120px, 14vw, 180px) 0 var(--space-20);
  overflow: hidden;
}
.product-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 960px) {
  .product-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-16);
  }
}
.product-hero-copy { max-width: 60ch; }
.product-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 var(--space-6);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.product-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--orange);
}
.product-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 5.25rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--navy);
  margin: 0 0 var(--space-6);
}
.product-tagline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  font-style: italic;
  color: var(--ink-muted);
  margin: 0 0 var(--space-4);
}

/* .legal-logo--on-dark — white-knockout variant for dark heros */
.legal-logo--on-dark img {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}

/* Container helper (used by the footer) */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
@media (min-width: 768px) {
  .container { padding: 0 var(--space-8); }
}