/* ============================================================================
   NorthGrid — css/ng-brand.css
   AUDIT 2026-09-21 BW: New file. The single stylesheet for every public page on
   northgridtracking.com, built to the 2026 NorthGrid Brand Guidelines (ARM
   Creative, Round 02). Replaces option-a.css, option-b.css, plans.css,
   form-feedback.css, styles.css and northgrid.css. The dark theme is retired.

   BRAND RULES THIS FILE ENFORCES (guideline page in brackets)
     Palette [Brand Colors]      Pine #273B1A, Sage #859E85, Amber #FFB83B,
                                 Copper #AB4F1C, Chalk #EAE6DD, Onyx #221F20.
                                 Onyx is #221F20 per the swatch files and the
                                 color sheet; the guideline page prints #221F1F
                                 (typo, flagged to ARM).
     Hierarchy [Color Hierarchy] Chalk ~38%, Onyx ~23%, Amber ~12%, Pine ~12%,
                                 Sage ~7%, Copper ~7%. Chalk is the page, Onyx is
                                 ink + footer + ticker, Pine and Amber carry the
                                 two feature bands, Sage and Copper are accents.
     Headline [Typography]       Rockwell Nova Regular, kerning -20 (-0.02em).
     Subhead                     Host Grotesk SemiBold, kerning -20.
     Body                        Host Grotesk Regular, kerning 0.
     Eyebrow + button text       Host Grotesk Regular, kerning 50 (0.05em), caps.
     Buttons                     Outline (Onyx), Pine fill, Amber fill.
     Motif                       Amber bracket around eyebrows [slide "Built
                                 for"], rounded tile strip on dark bands [cover
                                 and closing slides], tile shape with a square
                                 top-right corner [Patterns].
     Status                      Success #7DBA84, Warning #FFB83B, Danger #DA2C38.

   ACCESSIBILITY (WCAG 2.2 AA; measured ratios in brackets)
     - Body text only in pairs that pass 4.5:1: Onyx on Chalk [13.1], Onyx on
       white [16.3], Chalk on Pine [9.8], Chalk on Onyx [13.1], Onyx on Amber
       [9.5], Amber on Pine [7.1], Amber on Onyx [9.5], Pine on Chalk [9.8].
     - NEVER as text: Amber on Chalk/white [1.4/1.7], Sage on Chalk/white
       [2.3/2.9], Success green on light [1.8-2.3].
     - Copper as text only at display size (>= 24px) or on white [5.4]; Copper
       on Chalk is 4.36:1, which fails AA for body text even though the
       guideline page lists it as AAA.
     - Derived neutrals (not in the palette, needed for AA secondary text):
         --ng-ink-2   #5C5856  muted text on light surfaces  [5.65 on Chalk]
         --ng-line-ui #7A756E  form borders (1.4.11, 3:1)     [4.57 on white]
         --ng-on-dark-2 #B7B2A6 muted text on Onyx            [7.73]
         --ng-on-pine-2 #D8D3C8 muted text on Pine            [8.15]
         --ng-danger-ink #B32430 error text on light           [5.25 on Chalk]
     - Visible focus on everything, reduced motion honored, 44px+ targets.

   ROCKWELL NOVA LICENSING
     The TTF in ARM's package is Microsoft's Office build; its license covers
     display and print, not web embedding. Until NorthGrid holds a Monotype web
     license, the @font-face below uses local() only: visitors with Rockwell
     Nova or Rockwell installed (most Windows + Office machines, and macOS,
     which ships Rockwell) see the brand face; everyone else gets the fallback
     stack. When the web license is bought, add the url() line marked LICENSED.
   ========================================================================== */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Host Grotesk';
  src: url('/fonts/HostGrotesk-Variable-latin.woff2') format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Host Grotesk';
  src: url('/fonts/HostGrotesk-Italic-Variable-latin.woff2') format('woff2');
  font-weight: 300 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'NG Display';
  src: local('Rockwell Nova'), local('RockwellNova'), local('Rockwell Nova Regular'),
       local('RockwellNova-Regular'), local('Rockwell'), local('Rockwell-Regular');
       /* LICENSED: url('/fonts/RockwellNova-Regular.woff2') format('woff2'); */
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  --ng-pine:   #273B1A;
  --ng-sage:   #859E85;
  --ng-amber:  #FFB83B;
  --ng-copper: #AB4F1C;
  --ng-chalk:  #EAE6DD;
  --ng-onyx:   #221F20;
  --ng-white:  #FFFFFF;
  --ng-chalk-50: #F5F3EE;             /* tint used inside ARM's Pattern 3 */

  --ng-success: #7DBA84;
  --ng-warning: #FFB83B;
  --ng-danger:  #DA2C38;

  --ng-ink:        var(--ng-onyx);
  --ng-ink-2:      #5C5856;
  --ng-line:       #D6D1C5;           /* decorative dividers only */
  --ng-line-ui:    #7A756E;           /* borders that identify a control */
  --ng-on-dark:    var(--ng-chalk);
  --ng-on-dark-2:  #B7B2A6;
  --ng-on-pine-2:  #D8D3C8;
  --ng-danger-ink: #B32430;
  --ng-success-ink:#2F6B37;

  --ng-font-display: 'NG Display', 'Rockwell Nova', Rockwell, 'Roboto Slab', 'Zilla Slab', Georgia, 'Times New Roman', serif;
  --ng-font-body:    'Host Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ng-track-display: -0.02em;
  --ng-track-caps:     0.05em;

  --ng-nav-h: 76px;
  --ng-wrap: 1200px;
  --ng-gutter: max(5vw, 20px);
  --ng-radius: 12px;
  --ng-radius-btn: 10px;
  --ng-ease: 0.2s ease;
  --ng-shadow: 0 1px 2px rgba(34,31,32,0.06), 0 18px 40px -24px rgba(34,31,32,0.35);

  --ng-bracket-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 600'%3E%3Cg fill='%23FFB83B'%3E%3Cpath d='M231.53,61.41H61.54v172.1L0,239.65V92.12C0,42.04,40.05,1.29,89.93.03l2.38-.03h145.38l-6.16,61.41Z'/%3E%3Cpath d='M61.54,368.95v169.64h172.45l6.15,61.41H92.31C42.13,600,1.29,560.03.03,510.26l-.03-2.38v-145.08l61.54,6.14Z'/%3E%3C/g%3E%3C/svg%3E");
  --ng-bracket-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='360 0 240 600'%3E%3Cg fill='%23FFB83B'%3E%3Cpath d='M368.47,538.59h169.99v-172.1l61.54-6.14v147.53c0,50.08-40.05,90.83-89.93,92.09l-2.38.03h-145.38l6.16-61.41Z'/%3E%3Cpolygon points='362.31 0 368.47 61.42 538.46 61.42 538.46 233.51 600 239.65 600 0 362.31 0'/%3E%3C/g%3E%3C/svg%3E");
  --ng-bracket:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='%23FFB83B'%3E%3Cpath d='M231.53,61.41H61.54v172.1L0,239.65V92.12C0,42.04,40.05,1.29,89.93.03l2.38-.03h145.38l-6.16,61.41Z'/%3E%3Cpath d='M61.54,368.95v169.64h172.45l6.15,61.41H92.31C42.13,600,1.29,560.03.03,510.26l-.03-2.38v-145.08l61.54,6.14Z'/%3E%3Cpath d='M368.47,538.59h169.99v-172.1l61.54-6.14v147.53c0,50.08-40.05,90.83-89.93,92.09l-2.38.03h-145.38l6.16-61.41Z'/%3E%3Cpolygon points='362.31 0 368.47 61.42 538.46 61.42 538.46 233.51 600 239.65 600 0 362.31 0'/%3E%3C/g%3E%3C/svg%3E");
  --ng-tile-pine:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M17.0,6.0 H58.0 V47.0 Q58.0,58.0 47.0,58.0 H17.0 Q6.0,58.0 6.0,47.0 V17.0 Q6.0,6.0 17.0,6.0 Z' fill='rgba%28255,255,255,0.075%29'/%3E%3C/svg%3E");
  --ng-tile-chalk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M17.0,6.0 H58.0 V47.0 Q58.0,58.0 47.0,58.0 H17.0 Q6.0,58.0 6.0,47.0 V17.0 Q6.0,6.0 17.0,6.0 Z' fill='%23F5F3EE'/%3E%3C/svg%3E");
  --ng-tile-amber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M17.0,6.0 H58.0 V47.0 Q58.0,58.0 47.0,58.0 H17.0 Q6.0,58.0 6.0,47.0 V17.0 Q6.0,6.0 17.0,6.0 Z' fill='rgba%2834,31,32,0.07%29'/%3E%3C/svg%3E");
}

/* ── Reset + base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; scroll-padding-top: calc(var(--ng-nav-h) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: var(--ng-font-body); font-size: 1.0625rem; font-weight: 400;
  line-height: 1.65; color: var(--ng-ink); background: var(--ng-chalk);
  overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
ul[role="list"], ol[role="list"] { list-style: none; }
a { color: inherit; }
p a, li a, dd a, td a, .legal-wrap a, .legal-note a, .form-group a {
  color: var(--ng-pine); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px;
}
p a:hover, li a:hover, .legal-wrap a:hover { text-decoration-thickness: 2px; }
strong, b { font-weight: 600; }
sup { font-size: 0.7em; line-height: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ── Accessibility utilities ───────────────────────────────────────────── */
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 2000;
  background: var(--ng-onyx); color: var(--ng-chalk); padding: 12px 18px; border-radius: 8px;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--ng-pine); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .site-footer :focus-visible, .ticker-section :focus-visible { outline-color: var(--ng-amber); }
.band-amber :focus-visible { outline-color: var(--ng-onyx); }
main:focus { outline: none; }

/* Scroll-reveal: one orchestrated moment in the page hero only. Everything
   else is static, which is calmer and never leaves content invisible when
   JavaScript fails. html.js is set by an inline script in site_header.php. */
.js .hero [data-reveal], .js .plans-hero [data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .hero [data-reveal].revealed, .js .plans-hero [data-reveal].revealed { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-delay="3"] { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js .hero [data-reveal], .js .plans-hero [data-reveal] { opacity: 1; transform: none; }
}

/* ── Type ──────────────────────────────────────────────────────────────── */
h1, h2, .section-h2, .display {
  font-family: var(--ng-font-display); font-weight: 400;
  letter-spacing: var(--ng-track-display); line-height: 1.08; color: var(--ng-ink);
  text-wrap: balance;
}
h3, h4, .subhead {
  font-family: var(--ng-font-body); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.3; color: var(--ng-ink);
}
.section-h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); margin-bottom: 20px; max-width: 22ch; }
.section-lead { font-size: 1.125rem; color: var(--ng-ink-2); max-width: 62ch; line-height: 1.7; margin-bottom: 48px; }
.section-lead.tight, .offers-intro .section-lead { margin-bottom: 0; }
p { max-width: 70ch; }

/* Eyebrow, framed by the brand bracket [guideline slide "Built for"] */
.section-label, .eyebrow-text {
  display: inline-flex; align-items: center; gap: 0.9em;
  font-family: var(--ng-font-body); font-weight: 400; font-size: 0.875rem;
  letter-spacing: var(--ng-track-caps); text-transform: uppercase; line-height: 1.35;
  color: var(--ng-ink-2); margin-bottom: 20px; padding: 0.55em 0;
}
.section-label::before, .section-label::after,
.eyebrow-text::before, .eyebrow-text::after {
  content: ''; flex: none; width: 0.9em; align-self: stretch;
  background: var(--ng-bracket-l) no-repeat left center / contain;
}
.section-label::after, .eyebrow-text::after { background-image: var(--ng-bracket-r); background-position: right center; }
.on-dark .section-label, .on-dark .eyebrow-text { color: var(--ng-on-pine-2); }
.band-amber .section-label { color: var(--ng-onyx); }
.band-amber .section-label::before, .band-amber .section-label::after { filter: brightness(0) opacity(0.85); }

/* ── Buttons [Typography: button text + three button styles] ───────────── */
.btn-primary, .btn-secondary, .btn-accent, .btn-login {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 13px 28px; border-radius: var(--ng-radius-btn);
  font-family: var(--ng-font-body); font-size: 0.9375rem; font-weight: 400;
  letter-spacing: var(--ng-track-caps); text-transform: uppercase; line-height: 1.2;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: background-color var(--ng-ease), color var(--ng-ease), border-color var(--ng-ease), transform var(--ng-ease);
}
.btn-primary svg, .btn-accent svg { flex: none; }
.btn-primary { background: var(--ng-pine); color: var(--ng-chalk); }
.btn-primary:hover { background: #1C2B12; }
.btn-accent  { background: var(--ng-amber); color: var(--ng-onyx); }
.btn-accent:hover { background: #F2A61F; }
.btn-secondary { background: transparent; color: var(--ng-onyx); border-color: var(--ng-onyx); }
.btn-secondary:hover { background: var(--ng-onyx); color: var(--ng-chalk); }
.btn-primary:active, .btn-accent:active, .btn-secondary:active { transform: translateY(1px); }
button[disabled] { opacity: 0.6; cursor: progress; }
/* On dark bands the primary action switches to Amber (Onyx text, 9.5:1). */
.on-dark .btn-primary { background: var(--ng-amber); color: var(--ng-onyx); }
.on-dark .btn-primary:hover { background: #F2A61F; }
.on-dark .btn-secondary { color: var(--ng-chalk); border-color: var(--ng-chalk); }
.on-dark .btn-secondary:hover { background: var(--ng-chalk); color: var(--ng-onyx); }
.band-amber .btn-secondary { color: var(--ng-onyx); border-color: var(--ng-onyx); }

/* ── Layout ────────────────────────────────────────────────────────────── */
section { padding: clamp(64px, 4rem + 4vw, 120px) var(--ng-gutter); }
.section-inner, .nav-inner, .footer-inner, .hero-inner, .plans-hero-inner, .trust-inner {
  width: 100%; max-width: var(--ng-wrap); margin-inline: auto;
}

/* ── Header / nav ──────────────────────────────────────────────────────── */
.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 1000; height: var(--ng-nav-h);
  display: flex; align-items: center; padding: 0 var(--ng-gutter);
  background: rgba(234,230,221,0.92); backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--ng-ease), border-color var(--ng-ease);
}
.site-nav.scrolled { background: var(--ng-chalk); border-color: var(--ng-line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
/* Logo height 40px: bracket height 22.6px, so the brand clear space (one
   bracket height on every side of the bracket-and-wordmark row) fits in the
   76px bar. Do not shrink --ng-nav-h without shrinking the logo. */
.nav-logo { display: inline-flex; flex: none; border-radius: 4px; }
.nav-logo img { height: 40px; width: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 32px); list-style: none; }
.nav-links a:not(.btn-login) {
  position: relative; font-size: 0.9375rem; font-weight: 400; color: var(--ng-ink);
  text-decoration: none; padding: 10px 0;
}
.nav-links a:not(.btn-login)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 3px; border-radius: 2px;
  background: var(--ng-amber); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease;
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.btn-login { min-height: 44px; padding: 10px 22px; background: var(--ng-onyx); color: var(--ng-chalk); }
.btn-login:hover { background: var(--ng-pine); }
.menu-toggle {
  display: none; align-items: center; justify-content: center; width: 48px; height: 48px;
  background: none; border: 0; color: var(--ng-ink); cursor: pointer; border-radius: 8px;
}

/* ── Home hero [Typography slide is this hero, verbatim] ───────────────── */
.hero {
  position: relative; overflow: hidden; display: flex; align-items: center;
  padding: calc(var(--ng-nav-h) + 56px) var(--ng-gutter) clamp(56px, 6vw, 88px);
  background: var(--ng-chalk);
}
.hero::before {           /* ARM Pattern 3 (chalk tiles), right half, fading out */
  content: ''; position: absolute; inset: 0 0 45% 45%;
  background: var(--ng-tile-chalk) repeat top left / 72px 72px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%);
          mask-image: linear-gradient(90deg, transparent, #000 35%);
  opacity: 0.65; pointer-events: none;
}
/* AUDIT 2026-09-22 BW: hero is now headline | copy on one row and the real
   dashboard screenshot full width below it, so the UI is legible. */
.hero-inner {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: 1.05fr 0.95fr; grid-template-areas: "head copy" "shot shot";
  column-gap: clamp(40px, 6vw, 88px); row-gap: clamp(40px, 5vw, 64px); align-items: end;
}
.hero-head { grid-area: head; }
.hero-content { grid-area: copy; padding-bottom: 6px; }
.hero-panel-wrap { grid-area: shot; }
.hero-panel-wrap img { width: 100%; height: auto; }
.hero-eyebrow { margin-bottom: 8px; }
.eyebrow-line { display: none; }  /* retired divider; the bracket replaces it */
.hero h1 { font-size: clamp(2.75rem, 1.6rem + 4.4vw, 5rem); line-height: 1.02; margin-bottom: 0; max-width: 17ch; }
.hero h1 .h1-main { display: block; }
.hero h1 .h1-sub {
  display: block; margin-top: 22px; font-family: var(--ng-font-body); font-weight: 600;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); letter-spacing: -0.02em; line-height: 1.3; max-width: none;
}
.hero-sub { font-size: 1.125rem; color: var(--ng-ink); max-width: 52ch; margin-bottom: 28px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.ng-dashboard-shot, .ng-ops-shot {
  border-radius: 14px; overflow: hidden; background: var(--ng-white); border: 1px solid var(--ng-line);
  box-shadow: 0 1px 2px rgba(34,31,32,0.08), 0 28px 60px -30px rgba(34,31,32,0.45);
}

/* ── Trust strip ───────────────────────────────────────────────────────── */
.trust-strip { background: var(--ng-white); border-block: 1px solid var(--ng-line); padding: 32px var(--ng-gutter); }
.trust-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; }
.trust-item { display: flex; align-items: center; gap: 14px; padding-right: 16px; border-right: 1px solid var(--ng-line); }
.trust-item:last-child { border-right: 0; }
.trust-icon {
  flex: none; width: 46px; height: 46px; border-radius: 10px 2px 10px 10px;  /* brand tile corner */
  display: grid; place-items: center; background: var(--ng-pine); color: var(--ng-amber);
}
.trust-text { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; letter-spacing: -0.01em; }

/* ── What we offer ─────────────────────────────────────────────────────── */
.offers { background: var(--ng-chalk-50); }
.offers-intro { margin-bottom: 52px; }
.offers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; }
.offer-card {
  display: flex; flex-direction: column; background: var(--ng-white); border: 1px solid var(--ng-line);
  border-radius: var(--ng-radius); padding: 34px 30px 30px;
}
.offer-num {                                  /* Copper at display size on white [5.4:1] */
  font-family: var(--ng-font-display); font-size: 2.5rem; line-height: 1; color: var(--ng-copper);
  letter-spacing: var(--ng-track-display); margin-bottom: 22px;
}
.offer-card h3 { font-size: 1.25rem; margin-bottom: 12px; }
.offer-card p { color: var(--ng-ink-2); font-size: 1rem; }
.offer-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px;
  font-weight: 600; font-size: 0.9375rem; color: var(--ng-pine); text-decoration: none;
}
.offer-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* ── Ticker (decorative, aria-hidden in markup) ────────────────────────── */
.ticker-section { background: var(--ng-onyx); overflow: hidden; padding: 0; }
.ticker-track { display: flex; width: max-content; animation: ng-ticker 40s linear infinite; }
.ticker-item {
  display: flex; align-items: center; gap: 32px; padding: 18px 32px 18px 0; white-space: nowrap;
  font-size: 0.875rem; letter-spacing: var(--ng-track-caps); text-transform: uppercase; color: var(--ng-on-dark-2);
}
.ticker-item::after { content: ''; width: 12px; height: 12px; background: var(--ng-bracket) no-repeat center / contain; }
@keyframes ng-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }

/* ── Feature sections ──────────────────────────────────────────────────── */
.feature-section { background: var(--ng-chalk); }
.feature-section.alt { background: var(--ng-chalk-50); }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.feature-grid.flip .feature-text { order: 2; }
.feature-text > p { color: var(--ng-ink-2); font-size: 1.0625rem; }
.feature-list { list-style: none; margin-top: 28px; display: grid; gap: 14px; }
.feature-list li {
  display: flex; gap: 14px; align-items: flex-start; padding-bottom: 14px;
  border-bottom: 1px solid var(--ng-line); font-size: 1rem;
}
.feature-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.list-check {
  flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 7px 2px 7px 7px;
  display: grid; place-items: center; background: var(--ng-pine); color: var(--ng-amber);
}
.feature-img-wrap { position: relative; }

/* ── Why NorthGrid — Pine band with the tile strip ─────────────────────── */
.why {
  background: var(--ng-tile-pine) repeat-x var(--ng-gutter) 32px / 64px 64px, var(--ng-pine);
  padding-top: calc(clamp(64px, 4rem + 4vw, 120px) + 56px); color: var(--ng-chalk);
}
.why .section-h2 { color: var(--ng-chalk); }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.why-body { color: var(--ng-on-pine-2); font-size: 1.0625rem; margin-bottom: 20px; }
.why-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; list-style: none; }
.why-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(234,230,221,0.16); border-radius: var(--ng-radius); padding: 26px 22px; }
.why-card-icon { color: var(--ng-amber); margin-bottom: 14px; }
.why-card h3 { color: var(--ng-chalk); font-size: 1rem; margin-bottom: 6px; }
.why-card p { color: var(--ng-on-pine-2); font-size: 0.9375rem; line-height: 1.6; }

/* ── CTA — Amber band (Onyx text, 9.5:1) ───────────────────────────────── */
.cta-section { background: var(--ng-tile-amber) repeat-x center 32px / 64px 64px, var(--ng-amber); padding-top: calc(clamp(64px, 4rem + 4vw, 120px) + 40px); }
.cta-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.cta-inner .section-h2 { margin-inline: auto; }
.cta-inner p { margin: 0 auto 36px; font-size: 1.125rem; color: var(--ng-onyx); }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ── Home FAQ ──────────────────────────────────────────────────────────── */
.home-faq { background: var(--ng-chalk-50); }

/* ── Contact ───────────────────────────────────────────────────────────── */
.contact-section { background: var(--ng-chalk); }
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.contact-info > p { color: var(--ng-ink-2); margin-bottom: 28px; }
.contact-list { list-style: none; display: grid; gap: 12px; font-style: normal; }
.contact-detail { display: flex; align-items: center; gap: 12px; font-size: 1rem; }
.contact-detail svg { flex: none; color: var(--ng-copper); }
.contact-detail a { text-decoration: none; }
.contact-detail a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.contact-note { color: var(--ng-ink-2); font-size: 0.875rem; }
.plan-ack {
  border-left: 4px solid var(--ng-amber); background: var(--ng-white); border-radius: 0 10px 10px 0;
  padding: 14px 18px; margin: 4px 0 26px; font-size: 0.9875rem; line-height: 1.6;
}
.contact-form {
  display: flex; flex-direction: column; gap: 18px;
  background: var(--ng-white); border: 1px solid var(--ng-line); border-radius: var(--ng-radius);
  padding: clamp(22px, 3vw, 36px); box-shadow: var(--ng-shadow);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group > label { font-size: 0.9375rem; font-weight: 600; color: var(--ng-ink); }
.form-group .optional { font-weight: 400; color: var(--ng-ink-2); }
.form-group input:not([type="checkbox"]), .form-group textarea, .form-group select {
  width: 100%; min-height: 48px; background: var(--ng-white); color: var(--ng-ink);
  border: 1.5px solid var(--ng-line-ui); border-radius: 8px; padding: 12px 14px; font-size: 1rem;
  transition: border-color var(--ng-ease), box-shadow var(--ng-ease);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none; border-color: var(--ng-pine); box-shadow: 0 0 0 3px rgba(39,59,26,0.25);
}
.form-group textarea { min-height: 140px; resize: vertical; }
.form-group select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23221F20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
::placeholder { color: #7A756E; opacity: 1; }
.consent-label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-weight: 400 !important; line-height: 1.55; }
.consent-label input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--ng-pine); }
.consent-text { font-size: 0.9rem; color: var(--ng-ink-2); }
.contact-form button[type="submit"] { align-self: stretch; }

/* Form feedback (main.js injects .form-feedback, .field-error) */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.75s linear infinite; transform-origin: center; }
.form-feedback { display: none; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 10px; font-size: 0.96rem; line-height: 1.55; }
.form-feedback__icon { flex: none; margin-top: 1px; }
.form-feedback__text { flex: 1; }
.form-feedback a { color: inherit; font-weight: 600; text-decoration: underline; }
.form-feedback--success { background: rgba(125,186,132,0.18); border: 1.5px solid var(--ng-success); color: var(--ng-onyx); }
.form-feedback--success .form-feedback__icon { color: var(--ng-success-ink); }
.form-feedback--error { background: rgba(218,44,56,0.07); border: 1.5px solid var(--ng-danger); color: var(--ng-onyx); }
.form-feedback--error .form-feedback__icon { color: var(--ng-danger-ink); }
.form-group.has-error input, .form-group.has-error textarea, .form-group.has-error select {
  border-color: var(--ng-danger) !important; box-shadow: 0 0 0 3px rgba(218,44,56,0.15) !important;
}
.field-error { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ng-danger-ink); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Footer — Onyx ─────────────────────────────────────────────────────── */
.site-footer { background: var(--ng-onyx); color: var(--ng-chalk); padding: 64px var(--ng-gutter) 36px; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 56px; margin-bottom: 44px; }
.footer-brand img { height: 36px; width: auto; margin-bottom: 22px; }
.footer-brand p { color: var(--ng-on-dark-2); font-size: 0.9375rem; max-width: 34ch; }
.footer-h {
  font-family: var(--ng-font-body); font-size: 0.8125rem; font-weight: 400; letter-spacing: var(--ng-track-caps);
  text-transform: uppercase; color: var(--ng-on-dark-2); margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: grid; gap: 8px; }
.footer-col a, .footer-legal a { color: var(--ng-chalk); text-decoration: none; font-size: 0.9375rem; padding: 3px 0; display: inline-block; }
.footer-col a:hover, .footer-legal a:hover { text-decoration: underline; text-decoration-color: var(--ng-amber); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.footer-col address { font-style: normal; color: var(--ng-on-dark-2); font-size: 0.9375rem; line-height: 1.7; margin-top: 10px; }
.footer-tag { color: var(--ng-on-dark-2); font-size: 0.85em; }
.footer-login { margin-top: 14px; }
.footer-login a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: var(--ng-radius-btn);
  border: 1.5px solid var(--ng-chalk); letter-spacing: var(--ng-track-caps); text-transform: uppercase; font-size: 0.875rem;
}
.footer-login a:hover { background: var(--ng-chalk); color: var(--ng-onyx); text-decoration: none; }
.footer-bottom {
  border-top: 1px solid rgba(234,230,221,0.16); padding-top: 22px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.footer-copy { color: var(--ng-on-dark-2); font-size: 0.875rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 24px; list-style: none; }
.footer-legal a { font-size: 0.875rem; }

/* ── Inner-page hero (features, pricing) ───────────────────────────────── */
.plans-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--ng-nav-h) + 64px) var(--ng-gutter) 72px; background: var(--ng-chalk);
  border-bottom: 1px solid var(--ng-line);
}
.plans-hero::before {
  content: ''; position: absolute; inset: 0 0 0 50%;
  background: var(--ng-tile-chalk) repeat top left / 72px 72px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%);
  pointer-events: none;
}
/* AUDIT 2026-09-22 BW: rule for every inner page: the section directly after
   the hero never shares the hero's Chalk background. */
main > .plans-hero + section:not(.band-amber):not(.on-dark) { background: var(--ng-chalk-50); }
.plans-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(36px, 5vw, 64px); align-items: center; }
.plans-hero h1 { font-size: clamp(2.4rem, 1.5rem + 3.2vw, 4rem); margin-bottom: 22px; max-width: 16ch; }
.plans-hero .lead { font-size: 1.1875rem; color: var(--ng-ink); max-width: 56ch; line-height: 1.65; }
.plans-hero .hero-btns { margin-top: 30px; }

/* One-line diagram in the pricing hero (colors driven from here) */
.oneline { width: 100%; height: auto; display: block; }
.oneline .bus  { stroke: var(--ng-onyx); stroke-width: 4; }
.oneline .wire { stroke: var(--ng-line-ui); stroke-width: 2.5; }
.oneline .brk  { stroke: var(--ng-onyx); stroke-width: 2.5; fill: none; }
.oneline .node { fill: var(--ng-white); stroke: var(--ng-pine); stroke-width: 2.5; }
.oneline .node.hi { stroke: var(--ng-amber); stroke-width: 3.5; }
.oneline .star { fill: var(--ng-amber); }
.oneline text  { font-family: var(--ng-font-body); font-weight: 600; fill: var(--ng-ink); font-size: 14px; }
.oneline text.sub { font-weight: 400; fill: var(--ng-ink-2); font-size: 11px; }

/* Billing toggle drawn as a breaker switch */
.billing { display: flex; align-items: center; gap: 16px; margin-top: 30px; flex-wrap: wrap; border: 0; }
.breaker { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; background: var(--ng-white); border: 1.5px solid var(--ng-line-ui); border-radius: 12px; padding: 4px; user-select: none; }
.breaker input { position: absolute; opacity: 0; pointer-events: none; }
.breaker label { position: relative; z-index: 1; min-height: 44px; display: grid; place-items: center; padding: 8px 22px; border-radius: 8px; font-weight: 600; font-size: 0.9375rem; cursor: pointer; color: var(--ng-ink); transition: color 0.18s ease; }
.breaker .knob { position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); background: var(--ng-pine); border-radius: 8px; transition: transform 0.22s cubic-bezier(0.4,0,0.2,1); }
.breaker.annual .knob { transform: translateX(100%); }
.breaker:not(.annual) label[for="bill-m"], .breaker.annual label[for="bill-a"] { color: var(--ng-chalk); }
.breaker:has(input:focus-visible) { outline: 3px solid var(--ng-pine); outline-offset: 3px; }
.save-pill { background: var(--ng-amber); color: var(--ng-onyx); font-weight: 600; font-size: 0.875rem; border-radius: 999px; padding: 6px 14px; }

/* Plan cards */
.plans-section { background: var(--ng-chalk-50); }
.plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--ng-white); border: 1px solid var(--ng-line); border-radius: var(--ng-radius); padding: 32px 24px 26px; box-shadow: var(--ng-shadow); }
.plan.featured { border: 2px solid var(--ng-pine); }
.plan .flag { position: absolute; top: -14px; left: 22px; background: var(--ng-pine); color: var(--ng-chalk); font-size: 0.75rem; letter-spacing: var(--ng-track-caps); text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.plan .flag.alt { background: var(--ng-onyx); }
.plan h3 { font-family: var(--ng-font-display); font-weight: 400; letter-spacing: var(--ng-track-display); font-size: 1.875rem; margin-bottom: 6px; }
.plan .for { color: var(--ng-ink-2); font-size: 0.9375rem; line-height: 1.55; min-height: 3.1em; margin-bottom: 18px; }
.price { display: flex; align-items: baseline; gap: 6px; }
.price .amt { font-family: var(--ng-font-display); font-size: 2.75rem; line-height: 1; letter-spacing: var(--ng-track-display); }
.price .per { color: var(--ng-ink-2); }
.price-note { color: var(--ng-ink-2); font-size: 0.875rem; line-height: 1.5; min-height: 2.7em; margin: 10px 0 18px; }
.cap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 0; margin-bottom: 18px; border-block: 1px solid var(--ng-line); }
.cap div { font-size: 0.875rem; color: var(--ng-ink-2); }
.cap strong { display: block; font-size: 1.1875rem; font-weight: 600; color: var(--ng-ink); letter-spacing: -0.01em; }
.plan ul { list-style: none; margin: 0 0 24px; }
.plan li { position: relative; padding: 5px 0 5px 28px; font-size: 0.9375rem; line-height: 1.5; }
.plan li::before { content: ''; position: absolute; left: 2px; top: 11px; width: 13px; height: 7px; border-left: 2.5px solid var(--ng-pine); border-bottom: 2.5px solid var(--ng-pine); transform: rotate(-45deg); }
.plan li.plus { font-weight: 600; padding-left: 0; color: var(--ng-ink-2); }
.plan li.plus::before { display: none; }
.plan .cta { margin-top: auto; }
.plan .cta .btn-primary, .plan .cta .btn-secondary { width: 100%; }
.plan .fine { font-size: 0.8125rem; color: var(--ng-ink-2); margin-top: 12px; }

.promo { margin-top: 40px; padding: 26px 28px; border: 2px dashed var(--ng-copper); border-radius: var(--ng-radius); background: var(--ng-white); display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; }
.promo .tag { font-family: var(--ng-font-display); font-size: 1.5rem; letter-spacing: var(--ng-track-display); color: var(--ng-copper); }
.promo p { color: var(--ng-ink-2); }
.promo p strong { color: var(--ng-ink); }

/* Comparison tables */
.compare-section { background: var(--ng-chalk); }
.table-wrap { overflow-x: auto; border: 1px solid var(--ng-line); border-radius: var(--ng-radius); background: var(--ng-white); }
.table-wrap:focus-visible { outline-offset: 2px; }
table.compare { width: 100%; border-collapse: collapse; min-width: 840px; }
.compare caption { text-align: left; }
.compare th, .compare td { padding: 12px 16px; border-bottom: 1px solid #ECE8E0; vertical-align: top; }
.compare thead th { font-family: var(--ng-font-display); font-weight: 400; letter-spacing: var(--ng-track-display); font-size: 1.25rem; text-align: center; border-bottom: 2px solid var(--ng-line); }
.compare thead th.feat { text-align: left; width: 34%; font-family: var(--ng-font-body); font-weight: 600; font-size: 1rem; letter-spacing: 0; }
.compare thead th .p { display: block; font-family: var(--ng-font-body); font-size: 0.8125rem; letter-spacing: 0; color: var(--ng-ink-2); }
.compare td { text-align: center; font-size: 0.9375rem; }
.compare th.feat[scope="row"], .compare td.feat { text-align: left; font-weight: 600; font-size: 0.9375rem; }
.compare .feat span { display: block; font-weight: 400; color: var(--ng-ink-2); font-size: 0.8125rem; }
.compare tr.group th, .compare tr.group td { background: var(--ng-chalk-50); text-align: left; font-family: var(--ng-font-display); font-weight: 400; font-size: 1.0625rem; letter-spacing: var(--ng-track-display); padding: 10px 16px; }
.compare th.hi, .compare td.hi { background: rgba(255,184,59,0.13); }
.compare .yes { display: inline-block; width: 18px; height: 18px; position: relative; }
.compare .yes::before { content: ''; position: absolute; left: 3px; top: 3px; width: 11px; height: 6px; border-left: 2.5px solid var(--ng-pine); border-bottom: 2.5px solid var(--ng-pine); transform: rotate(-45deg); }
.compare .no { color: var(--ng-ink-2); }

/* Add-ons */
.addons-section { background: var(--ng-chalk-50); }
.addons { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.addon-list { background: var(--ng-white); border: 1px solid var(--ng-line); border-radius: var(--ng-radius); overflow: hidden; }
.addon-list h3 { font-family: var(--ng-font-display); font-weight: 400; letter-spacing: var(--ng-track-display); font-size: 1.375rem; padding: 16px 20px; background: var(--ng-chalk); border-bottom: 1px solid var(--ng-line); }
.addon-list .row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; padding: 14px 20px; border-bottom: 1px solid #ECE8E0; }
.addon-list .row:last-child { border-bottom: 0; }
.addon-list dt { font-weight: 600; }
.addon-list dt span { display: block; font-weight: 400; color: var(--ng-ink-2); font-size: 0.875rem; line-height: 1.5; }
.addon-list dd { font-weight: 600; white-space: nowrap; text-align: right; }
.addon-list dd span { display: block; font-weight: 400; color: var(--ng-ink-2); font-size: 0.8125rem; }

/* Onboarding */
.onboarding-section { background: var(--ng-chalk); }
.onb { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; list-style: none; }
.onb > li { background: var(--ng-white); border: 1px solid var(--ng-line); border-radius: var(--ng-radius); padding: 22px; }
.onb h3 { font-size: 0.8125rem; font-weight: 400; letter-spacing: var(--ng-track-caps); text-transform: uppercase; color: var(--ng-ink-2); margin-bottom: 6px; }
.onb .big { font-family: var(--ng-font-display); font-size: 1.75rem; letter-spacing: var(--ng-track-display); }
.onb p { color: var(--ng-ink-2); font-size: 0.9375rem; margin-top: 4px; }

/* FAQ (pricing + home) */
.faq-section { background: var(--ng-chalk-50); }
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--ng-line); }
.faq summary { cursor: pointer; list-style: none; position: relative; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; padding: 18px 48px 18px 0; border-radius: 4px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(var(--ng-pine),var(--ng-pine)) center/14px 2px no-repeat, linear-gradient(var(--ng-pine),var(--ng-pine)) center/2px 14px no-repeat; }
.faq details[open] summary::after { background: linear-gradient(var(--ng-pine),var(--ng-pine)) center/14px 2px no-repeat; }
.faq details > p, .faq details > div { color: var(--ng-ink-2); line-height: 1.75; padding-bottom: 18px; }
.legal-note { color: var(--ng-ink-2); font-size: 0.875rem; margin-top: 22px; max-width: 72ch; }

/* Features page */
/* AUDIT 2026-09-22 BW: swapped so the first section under the Chalk page hero
   is Chalk-50, never the same color as the hero (sequence now alternates
   hero Chalk > Chalk-50 > Chalk > Chalk-50 ...). */
.feat-section { background: var(--ng-chalk-50); }
.feat-section.alt { background: var(--ng-chalk); }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; }
.feat { background: var(--ng-white); border: 1px solid var(--ng-line); border-radius: var(--ng-radius); padding: 28px 26px; }
.feat .ico { width: 46px; height: 46px; border-radius: 10px 2px 10px 10px; background: var(--ng-pine); display: grid; place-items: center; margin-bottom: 18px; }
.feat .ico svg { width: 22px; height: 22px; stroke: var(--ng-amber); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feat h3 { font-size: 1.1875rem; margin-bottom: 10px; }
.feat ul { list-style: disc; padding-left: 18px; }
.feat li { color: var(--ng-ink-2); font-size: 0.9375rem; line-height: 1.55; margin: 6px 0; }
.feat li::marker { color: var(--ng-copper); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 64px); align-items: center; }
.split.rev .art { order: -1; }
.split .section-lead { margin-bottom: 20px; }
.split ul { list-style: disc; padding-left: 20px; }
.split li { color: var(--ng-ink-2); line-height: 1.6; margin: 8px 0; }
.split li::marker { color: var(--ng-copper); }
.art img { width: 100%; border-radius: var(--ng-radius); }
.art-slot { aspect-ratio: 4/3; border: 2px dashed var(--ng-line-ui); border-radius: var(--ng-radius); background: var(--ng-chalk-50); display: grid; place-items: center; text-align: center; color: var(--ng-ink-2); padding: 24px; }
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; list-style: none; }
.steps > li { background: var(--ng-white); border: 1px solid var(--ng-line); border-radius: var(--ng-radius); padding: 22px 20px; }
.steps > li::before { counter-increment: s; content: counter(s); display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px 2px 9px 9px; background: var(--ng-pine); color: var(--ng-chalk); font-family: var(--ng-font-display); font-size: 1.125rem; margin-bottom: 14px; }
.steps h3 { font-size: 1rem; margin-bottom: 4px; }
.steps p { color: var(--ng-ink-2); font-size: 0.9375rem; line-height: 1.55; }
.after-steps { margin-top: 30px; }
.callout { border-left: 4px solid var(--ng-amber); background: var(--ng-white); border-radius: 0 var(--ng-radius) var(--ng-radius) 0; padding: 18px 22px; margin-top: 28px; max-width: 880px; color: var(--ng-ink-2); line-height: 1.65; font-size: 0.975rem; }
.callout strong { color: var(--ng-ink); }
.plans-section .section-lead, .compare-section .section-lead, .addons-section .section-lead,
.onboarding-section .section-lead, .feat-section .section-lead { margin-bottom: 40px; }

/* ── Legal pages ───────────────────────────────────────────────────────── */
.legal-wrap { max-width: 860px; margin: 0 auto; padding: calc(var(--ng-nav-h) + 64px) 24px 96px; }
.legal-wrap h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); margin-bottom: 12px; }
.legal-meta { color: var(--ng-ink-2); font-size: 0.9375rem; margin-bottom: 36px; }
.legal-wrap h2 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); margin: 44px 0 14px; scroll-margin-top: calc(var(--ng-nav-h) + 20px); }
.legal-wrap.terms h2 { padding-top: 18px; border-top: 1px solid var(--ng-line); }
.legal-wrap h3 { font-size: 1.0625rem; margin: 26px 0 8px; }
.legal-wrap p, .legal-wrap li { line-height: 1.75; }
.legal-wrap p { margin: 0 0 14px; }
.legal-wrap ul, .legal-list { margin: 0 0 18px 22px; }
.legal-wrap li { margin-bottom: 8px; }
.legal-wrap li::marker { color: var(--ng-copper); }
.legal-clause { margin: 0 0 12px; }
.legal-callout, .legal-allcaps { border-left: 4px solid var(--ng-pine); background: var(--ng-white); padding: 16px 20px; margin: 22px 0; border-radius: 0 10px 10px 0; }
.legal-allcaps { font-size: 0.9375rem; }
.legal-quote { border: 1.5px dashed var(--ng-line-ui); background: var(--ng-white); border-radius: 10px; padding: 14px 18px; margin: 16px 0; font-style: italic; }
.legal-contact { background: var(--ng-white); border: 1px solid var(--ng-line); border-radius: var(--ng-radius); padding: 20px 24px; margin-top: 14px; line-height: 1.8; font-style: normal; }
.legal-related { margin: 0 0 30px; font-size: 0.9375rem; color: var(--ng-ink-2); }
.legal-toc { background: var(--ng-white); border: 1px solid var(--ng-line); border-radius: var(--ng-radius); padding: 22px 26px; margin: 0 0 44px; }
.legal-toc h2 { border: 0 !important; padding: 0 !important; margin: 0 0 12px !important; font-size: 1.25rem !important; }
.legal-toc ol { margin: 0 0 0 20px; }
.legal-toc li { margin-bottom: 6px; line-height: 1.5; }
.legal-table-wrap { overflow-x: auto; margin: 18px 0 8px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 520px; background: var(--ng-white); }
.legal-table th, .legal-table td { border: 1px solid var(--ng-line); padding: 10px 12px; text-align: left; vertical-align: top; line-height: 1.6; }
.legal-table th { background: var(--ng-pine); color: var(--ng-chalk); font-weight: 600; }
.legal-table tbody tr:nth-child(odd) { background: var(--ng-chalk-50); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .plans-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  .hero-inner, .plans-hero-inner, .feature-grid, .why-grid, .contact-grid, .split { grid-template-columns: 1fr; }
  .hero-inner { grid-template-areas: "head" "copy" "shot"; row-gap: 28px; }
  .feature-grid.flip .feature-text { order: 0; }
  .split.rev .art { order: 0; }
  .hero { min-height: 0; }
  .hero::before, .plans-hero::before { inset: 0 0 0 30%; opacity: 0.7; }
  .trust-inner { grid-template-columns: 1fr 1fr; }
  .trust-item:nth-child(2) { border-right: 0; }
  .offers-grid, .feat-grid { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .onb { grid-template-columns: 1fr 1fr; }
  .promo { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .addons { grid-template-columns: 1fr; }
  .nav-links {
    position: fixed; top: var(--ng-nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ng-chalk); padding: 8px var(--ng-gutter) 24px; border-bottom: 3px solid var(--ng-amber);
    box-shadow: 0 16px 30px -18px rgba(34,31,32,0.4);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .nav-links.open { visibility: visible; opacity: 1; transform: none; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s; }
  .nav-links a:not(.btn-login) { display: block; padding: 14px 0; border-bottom: 1px solid var(--ng-line); }
  .nav-links a:not(.btn-login)::after { display: none; }
  .nav-links a[aria-current="page"] { font-weight: 600; box-shadow: inset 4px 0 0 var(--ng-amber); padding-left: 14px; }
  .btn-login { margin-top: 16px; width: 100%; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 640px) {
  :root { --ng-nav-h: 68px; }
  .nav-logo img { height: 34px; }
  .trust-inner, .offers-grid, .feat-grid, .why-cards, .form-row, .plans-grid, .steps, .onb, .footer-top { grid-template-columns: 1fr; }
  .trust-item { border-right: 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .hero-btns > a, .cta-actions > a { width: 100%; }
  .legal-wrap { padding: calc(var(--ng-nav-h) + 40px) 18px 72px; }
}
.onb > li, .plans-grid > *, .steps > li, .feat-grid > *, .addons > * { min-width: 0; }

@media print {
  .site-nav, .ticker-section, .cta-section, .skip-link, .menu-toggle { display: none !important; }
  body { background: #fff; }
  .legal-wrap { padding-top: 0; }
}