/* ==========================================================================
   Northloam design tokens. Brand/tokens.css, Pine Ledge, locked July 2026.
   Square corners. No shadows. Nothing between 1px and 2px.
   ========================================================================== */
:root {
  --nl-pine:        #1D3A31;
  --nl-pine-deep:   #142A23;
  --nl-cream:       #F0ECE1;
  --nl-cream-warm:  #E7E2D4;
  --nl-lichen:      #626C67;
  /* Lichen is AA on cream (4.61) but only 4.20 on cream-warm. This darker step
     keeps secondary text at AA inside .nl-field-warm. Same hue, one notch down. */
  --nl-lichen-warm: #5B6460;
  --nl-placeholder: #717774;
  --nl-brass:       #C39842;
  --nl-brass-ink:   #81642C;
  --nl-line:        #D9D3C4;
  --nl-line-dark:   #33534A;
  --nl-on-pine:     #F0ECE1;
  --nl-on-brass:    #1D3A31;
  --nl-muted-pine:  #A9B6AF;
  --nl-good:        #3F6B4A;
  --nl-bad:         #8E3B2A;

  --nl-font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --nl-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nl-font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  --nl-size-display: clamp(2rem, 1.25rem + 3vw, 3.25rem);
  --nl-size-h2:      clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --nl-size-h3:      1.125rem;
  --nl-size-small:   0.8125rem;

  --nl-track-display: -0.015em;
  --nl-track-wordmark: 0.13em;
  --nl-track-eyebrow:  0.14em;

  --nl-1: 0.25rem;  --nl-2: 0.5rem;   --nl-3: 0.75rem;  --nl-4: 1rem;
  --nl-6: 1.5rem;   --nl-8: 2rem;     --nl-12: 3rem;    --nl-16: 4rem;
  --nl-24: 6rem;

  --nl-hairline: 1px;
  --nl-rule:     2px;
  --nl-measure: 62ch;
  --nl-page:    1140px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--nl-cream);
  color: var(--nl-pine);
  font-family: var(--nl-font-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .nl-eyebrow, .nl-wordmark, .nl-btn { font-family: var(--nl-font-display); }
h1 { font-size: var(--nl-size-display); line-height: 1.08; letter-spacing: var(--nl-track-display);
     font-weight: 600; margin: 0; text-wrap: balance; }
h2 { font-size: var(--nl-size-h2); line-height: 1.2; font-weight: 600; margin: 0; text-wrap: balance; }
h3 { font-size: var(--nl-size-h3); line-height: 1.3; font-weight: 600; margin: 0; }
p  { max-width: var(--nl-measure); margin: 0 0 var(--nl-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--nl-pine); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--nl-brass-ink); }

/* Focus: visible, square, never removed. Pine on light fields (10.45:1),
   brass on pine fields (4.64:1). Brass on cream is only 2.25:1, which fails
   the 3:1 WCAG 2.2 non-text minimum, so it is not used as a ring on cream. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: var(--nl-rule) solid var(--nl-pine);
  outline-offset: 3px;
}
.nl-field-pine a:focus-visible, .nl-field-pine button:focus-visible,
.nl-field-pine input:focus-visible, .nl-field-pine textarea:focus-visible,
.nl-field-pine summary:focus-visible {
  outline-color: var(--nl-brass);
}
/* The form panel is a cream card sitting inside a pine section. */
.form-panel a:focus-visible, .form-panel button:focus-visible,
.form-panel input:focus-visible, .form-panel textarea:focus-visible {
  outline-color: var(--nl-pine);
}

.skip-link {
  position: absolute; left: var(--nl-4); top: -100px; z-index: 100;
  background: var(--nl-pine); color: var(--nl-on-pine);
  padding: var(--nl-3) var(--nl-4); text-decoration: none;
  font-family: var(--nl-font-display); font-size: var(--nl-size-small); font-weight: 600;
}
.skip-link:focus { top: var(--nl-4); color: var(--nl-on-pine); }

.nl-eyebrow {
  font-size: var(--nl-size-small); font-weight: 600;
  letter-spacing: var(--nl-track-eyebrow); text-transform: uppercase;
  color: var(--nl-lichen); margin: 0 0 var(--nl-4);
}
.nl-muted  { color: var(--nl-lichen); }
.nl-accent { color: var(--nl-brass-ink); }
.nl-num    { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.nl-wordmark {
  display: inline-block; line-height: 1; white-space: nowrap;
  text-transform: uppercase; letter-spacing: var(--nl-track-wordmark);
  font-weight: 600; text-decoration: none; color: inherit;
}
.nl-wordmark span { font-weight: 400; }

/* ---- Buttons ---- */
.nl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--nl-2);
  min-height: 44px; padding: 0.75rem 1.25rem; border: 0;
  background: var(--nl-brass); color: var(--nl-on-brass);
  font-family: var(--nl-font-display);
  font-size: var(--nl-size-small); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background 120ms linear, transform 120ms linear;
}
.nl-btn:hover { background: #B48A36; color: var(--nl-on-brass); }
.nl-btn:active { transform: translateY(1px); }
.nl-btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.nl-btn--ghost { background: transparent; color: var(--nl-pine); box-shadow: inset 0 0 0 1px var(--nl-pine); }
.nl-btn--ghost:hover { background: var(--nl-cream-warm); color: var(--nl-pine); }
.nl-btn--lg { min-height: 52px; padding: 0.9rem 1.75rem; font-size: 0.875rem; }
@media (prefers-reduced-motion: reduce) { .nl-btn { transition: none; } .nl-btn:active { transform: none; } }

/* ---- Fields ---- */
.nl-field-pine { background: var(--nl-pine); color: var(--nl-on-pine); }
.nl-field-pine .nl-muted { color: var(--nl-muted-pine); }
.nl-field-pine .nl-eyebrow { color: var(--nl-muted-pine); }
.nl-field-pine a { color: var(--nl-on-pine); }
.nl-field-pine a:hover { color: var(--nl-brass); }
.nl-field-warm { background: var(--nl-cream-warm); }
.nl-field-warm .nl-muted,
.nl-field-warm .nl-eyebrow,
.nl-field-warm .mappack .rk,
.nl-field-warm .mappack .rev { color: var(--nl-lichen-warm); }

hr { border: 0; height: var(--nl-hairline); background: var(--nl-line); margin: 0; }

/* ==========================================================================
   Layout
   ========================================================================== */
.wrap { max-width: var(--nl-page); margin: 0 auto; padding: 0 var(--nl-6); }
section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-head { margin-bottom: var(--nl-8); max-width: 46ch; }
.section-head h2 { margin-bottom: var(--nl-3); }

/* ---- Header ---- */
.site-header {
  border-bottom: var(--nl-hairline) solid var(--nl-line);
  position: sticky; top: 0; z-index: 20;
  background: var(--nl-cream);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--nl-6); padding-top: var(--nl-3); padding-bottom: var(--nl-3);
}
.site-header .nl-wordmark { font-size: 1.0625rem; }
.nav { display: flex; align-items: center; gap: var(--nl-6); }
.navlink {
  font-size: var(--nl-size-small); text-decoration: none; color: var(--nl-lichen);
  letter-spacing: 0.02em; padding: var(--nl-2) 0;
  border-bottom: var(--nl-rule) solid transparent;
}
.navlink:hover { color: var(--nl-pine); border-bottom-color: var(--nl-brass); }

/* ---- Hero ---- */
.hero { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
              gap: var(--nl-12); align-items: start; }
.hero h1 { max-width: 15ch; }
.hero .sub { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); margin-top: var(--nl-6); max-width: 48ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--nl-3); margin-top: var(--nl-8); align-items: center; }
.cta-note { font-size: var(--nl-size-small); color: var(--nl-lichen); margin-top: var(--nl-4); }

/* Map-pack illustration */
.mappack { border: var(--nl-rule) solid var(--nl-pine); background: var(--nl-cream); margin: 0; }
.mappack-bar {
  background: var(--nl-pine); color: var(--nl-on-pine);
  font-family: var(--nl-font-mono); font-size: 0.75rem; letter-spacing: 0.02em;
  padding: var(--nl-3) var(--nl-4);
}
.mappack ol { list-style: none; margin: 0; padding: 0; }
.mappack li {
  display: flex; align-items: baseline; gap: var(--nl-3);
  padding: var(--nl-4);
  border-bottom: var(--nl-hairline) solid var(--nl-line);
  font-size: 0.9375rem;
}
.mappack li:last-child { border-bottom: 0; }
.mappack .rk { font-family: var(--nl-font-display); font-weight: 600; color: var(--nl-lichen);
               font-variant-numeric: tabular-nums; min-width: 1.25em; }
.mappack .biz { flex: 1; }
.mappack .rev { font-size: var(--nl-size-small); color: var(--nl-lichen); font-variant-numeric: tabular-nums; }
.mappack .is-you { background: var(--nl-brass); color: var(--nl-on-brass); }
.mappack .is-you .rk, .mappack .is-you .rev { color: var(--nl-on-brass); }
.mappack .is-you .biz { font-weight: 600; }
.mappack figcaption {
  border-top: var(--nl-rule) solid var(--nl-pine);
  padding: var(--nl-3) var(--nl-4);
  font-size: var(--nl-size-small); color: var(--nl-lichen);
}

/* ---- Proof strip ---- */
.proof { padding: var(--nl-6) 0; border-top: var(--nl-hairline) solid var(--nl-line);
         border-bottom: var(--nl-hairline) solid var(--nl-line); }
.proof ul { list-style: none; margin: 0; padding: 0;
            display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--nl-6); }
.proof li { font-size: var(--nl-size-small); border-left: var(--nl-rule) solid var(--nl-brass);
            padding-left: var(--nl-3); line-height: 1.45; }
.proof strong { display: block; font-family: var(--nl-font-display); font-weight: 600;
                font-size: 0.9375rem; }

/* ---- Definition / answer block ---- */
.answer {
  border-left: var(--nl-rule) solid var(--nl-brass);
  padding-left: var(--nl-6);
  font-size: 1.0625rem;
  max-width: 58ch;
}

/* ---- Services ---- */
.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--nl-12) var(--nl-8); }
.service { border-top: var(--nl-rule) solid var(--nl-pine); padding-top: var(--nl-4); }
.service h3 { margin-bottom: var(--nl-2); }
.service p { max-width: 46ch; }
.service .idx { font-size: var(--nl-size-small); color: var(--nl-brass-ink);
                font-family: var(--nl-font-display); font-weight: 600; letter-spacing: 0.06em;
                display: block; margin-bottom: var(--nl-1); font-variant-numeric: tabular-nums; }

/* ---- Steps ---- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--nl-8) var(--nl-6);
         counter-reset: step; list-style: none; margin: 0; padding: 0; }
.step { border-top: var(--nl-rule) solid var(--nl-line-dark); padding-top: var(--nl-4); }
.step .num { font-family: var(--nl-font-display); font-weight: 600; font-size: 1.875rem;
             color: var(--nl-brass); line-height: 1; display: block; margin-bottom: var(--nl-3);
             font-variant-numeric: tabular-nums; }
.step h3 { margin-bottom: var(--nl-2); }
.step p { font-size: 0.9375rem; max-width: none; }

/* ---- Two column ---- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nl-12); }
.two-col p { max-width: 48ch; }

/* ---- Fit ---- */
.fit-card { border-top: var(--nl-rule) solid var(--nl-pine); padding-top: var(--nl-4); }
.fit-card.is-not { border-top-color: var(--nl-line); }
.fit-card h3 { margin-bottom: var(--nl-3); }
.fit-card ul { margin: 0; padding: 0; list-style: none; }
.fit-card li { margin-bottom: var(--nl-3); max-width: 46ch; padding-left: var(--nl-6); position: relative; }
.fit-card li::before {
  content: ""; position: absolute; left: 0; top: 0.66em;
  width: 14px; height: var(--nl-rule); background: var(--nl-brass);
}
.fit-card.is-not li::before { background: var(--nl-lichen); }

/* ---- FAQ ---- */
.faq { display: grid; gap: var(--nl-8); max-width: 68ch; }
.faq-item { border-top: var(--nl-hairline) solid var(--nl-line); padding-top: var(--nl-4); }
.faq-item h3 { margin-bottom: var(--nl-2); }
.faq-item p { max-width: 58ch; }

/* ---- Audit form ---- */
.audit .wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--nl-12); align-items: start; }
.audit h2 { font-size: var(--nl-size-display); line-height: 1.08; letter-spacing: var(--nl-track-display); }
.audit .lede { margin-top: var(--nl-6); max-width: 42ch; }
.audit ul.gets { list-style: none; margin: var(--nl-8) 0 0; padding: 0; }
.audit ul.gets li { padding-left: var(--nl-6); position: relative; margin-bottom: var(--nl-3);
                    font-size: 0.9375rem; max-width: 40ch; }
.audit ul.gets li::before { content: ""; position: absolute; left: 0; top: 0.66em;
                            width: 14px; height: var(--nl-rule); background: var(--nl-brass); }

.form-panel { background: var(--nl-cream); color: var(--nl-pine); padding: var(--nl-8); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nl-4) var(--nl-4); }
.f { display: flex; flex-direction: column; gap: var(--nl-1); }
.f--full { grid-column: 1 / -1; }
.f label { font-family: var(--nl-font-display); font-size: var(--nl-size-small); font-weight: 600;
           letter-spacing: 0.02em; }
.f .opt { font-weight: 400; color: var(--nl-lichen); letter-spacing: 0; }
.f input, .f textarea {
  font-family: var(--nl-font-body); font-size: 1rem; color: var(--nl-pine);
  background: #FFFFFF; border: var(--nl-hairline) solid var(--nl-pine);
  border-radius: 0; padding: 0.7rem 0.75rem; min-height: 44px; width: 100%;
}
.f textarea { min-height: 88px; resize: vertical; }
.f input::placeholder, .f textarea::placeholder { color: var(--nl-placeholder); opacity: 1; }
.f input[aria-invalid="true"], .f textarea[aria-invalid="true"] { border-color: var(--nl-bad); border-width: var(--nl-rule); }
.f .err { font-size: var(--nl-size-small); color: var(--nl-bad); min-height: 0; }
.f .err:empty { display: none; }
.form-foot { margin-top: var(--nl-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--nl-4); }
.form-foot .fine { font-size: var(--nl-size-small); color: var(--nl-lichen); max-width: 34ch; margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin-top: var(--nl-4); font-size: 0.9375rem; }
.form-status[data-state="error"] { color: var(--nl-bad); }
.form-success { display: none; }
.form-panel.is-sent .form-body { display: none; }
.form-panel.is-sent .form-success { display: block; }
.form-success h3 { margin-bottom: var(--nl-3); }
.form-success .tick { display: block; width: 40px; height: var(--nl-rule);
                      background: var(--nl-brass); margin-bottom: var(--nl-4); }

/* ---- Footer ---- */
.site-footer { padding: var(--nl-12) 0 var(--nl-8); }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--nl-8); }
.site-footer .nl-wordmark { font-size: 1rem; }
.site-footer .tag { font-size: 0.9375rem; margin-top: var(--nl-3); }
.site-footer h2 { font-size: var(--nl-size-small); text-transform: uppercase;
                  letter-spacing: var(--nl-track-eyebrow); color: var(--nl-muted-pine);
                  margin-bottom: var(--nl-4); font-weight: 600; }
.site-footer ul { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.site-footer li { margin-bottom: var(--nl-2); }
.site-footer .legal { margin-top: var(--nl-12); padding-top: var(--nl-4);
                      border-top: var(--nl-hairline) solid var(--nl-line-dark);
                      display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--nl-4);
                      font-size: var(--nl-size-small); }
.site-footer .legal p { margin: 0; }

/* ---- Motion ---- */
.js .reveal { opacity: 0; transform: translateY(12px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity 420ms ease-out, transform 420ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal.in { transition: none; }
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .hero .wrap, .audit .wrap, .two-col { grid-template-columns: 1fr; gap: var(--nl-8); }
  .hero h1 { max-width: 18ch; }
  .services { gap: var(--nl-8); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .services, .proof ul { grid-template-columns: repeat(2, 1fr); }
  .navlink { display: none; }
  .form-panel { padding: var(--nl-6); }
}
@media (max-width: 520px) {
  .services, .proof ul, .steps, .form-grid, .site-footer .cols { grid-template-columns: 1fr; }
  .wrap { padding: 0 var(--nl-4); }
  .site-header .wrap { gap: var(--nl-3); }
  .cta-row .nl-btn { width: 100%; }
}
@media print {
  .site-header, .audit form, .reveal { position: static; opacity: 1; transform: none; }
  body { background: #fff; }
}

/* ==========================================================================
   MULTI-PAGE ADDITIONS. Added when the one-pager was split, July 2026.
   Same rules apply: square corners, no shadows, nothing between 1px and 2px.
   ========================================================================== */

/* ---- Nav: current page + mobile disclosure ---- */
.navlink[aria-current="page"] { color: var(--nl-pine); border-bottom-color: var(--nl-brass); }

.nav-toggle {
  display: none;
  align-items: center; gap: var(--nl-2);
  min-height: 44px; padding: var(--nl-2) var(--nl-3);
  background: transparent; border: var(--nl-hairline) solid var(--nl-pine);
  color: var(--nl-pine); cursor: pointer;
  font-family: var(--nl-font-display); font-size: var(--nl-size-small);
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.nav-toggle .bars { display: block; width: 16px; height: var(--nl-rule);
                    background: currentColor; position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after {
  content: ""; position: absolute; left: 0; width: 16px; height: var(--nl-rule);
  background: currentColor;
}
.nav-toggle .bars::before { top: -5px; }
.nav-toggle .bars::after  { top: 5px; }

/* ---- Interior page header ---- */
.page-hero { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2rem, 4vw, 3rem);
             border-bottom: var(--nl-hairline) solid var(--nl-line); }
.page-hero h1 { max-width: 20ch; }
.page-hero .lede { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
                   margin-top: var(--nl-6); max-width: 52ch; }
.nl-field-pine.page-hero { border-bottom: 0; }

/* ---- Breadcrumbs ---- */
.crumbs { font-size: var(--nl-size-small); color: var(--nl-lichen); margin-bottom: var(--nl-6); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--nl-2); }
.crumbs li::after { content: "/"; margin-left: var(--nl-2); color: var(--nl-line); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--nl-lichen); }
.crumbs a:hover { color: var(--nl-pine); }
.crumbs [aria-current="page"] { color: var(--nl-pine); }

/* ---- Pricing tiers ----
   Three plain cards. Deliberately no badge, no checkmark matrix, no
   crossed-out prices. Per northloam-retainer-pricing-strategy.md section 9. */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nl-6); align-items: start; }
.tier { border: var(--nl-hairline) solid var(--nl-line); background: transparent;
        padding: var(--nl-6); display: flex; flex-direction: column; height: 100%; }
.nl-field-warm .tier { border-color: #CFC8B6; }
.tier h3 { font-size: var(--nl-size-small); text-transform: uppercase;
           letter-spacing: var(--nl-track-eyebrow); color: var(--nl-lichen);
           margin-bottom: var(--nl-3); }
.nl-field-warm .tier h3 { color: var(--nl-lichen-warm); }
.tier .price { font-family: var(--nl-font-display); font-weight: 600;
               font-size: 1.75rem; line-height: 1.1; letter-spacing: var(--nl-track-display);
               font-variant-numeric: tabular-nums; display: block; margin-bottom: var(--nl-4); }
.tier .price .per { font-size: 1rem; font-weight: 400; letter-spacing: 0; }
.tier p { font-size: 0.9375rem; max-width: none; }
.tier .tier-foot { margin-top: auto; padding-top: var(--nl-6); }

.tier-note { margin-top: var(--nl-8); max-width: 62ch; font-size: 0.9375rem; }

/* ---- Add-on table ---- */
.addons { width: 100%; border-collapse: collapse; max-width: 34rem; margin-top: var(--nl-6); }
.addons caption { text-align: left; font-family: var(--nl-font-display); font-weight: 600;
                  font-size: var(--nl-size-small); text-transform: uppercase;
                  letter-spacing: var(--nl-track-eyebrow); color: var(--nl-lichen);
                  padding-bottom: var(--nl-3); }
.addons th, .addons td { text-align: left; padding: var(--nl-3) 0;
                         border-bottom: var(--nl-hairline) solid var(--nl-line);
                         font-size: 0.9375rem; }
.addons th { font-family: var(--nl-font-body); font-weight: 400; }
.addons td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.nl-field-warm .addons th, .nl-field-warm .addons td { border-bottom-color: #CFC8B6; }

/* ---- Comparison block (Angi / Thumbtack) ---- */
.compare { border-left: var(--nl-rule) solid var(--nl-brass); padding-left: var(--nl-6);
           max-width: 58ch; }
.compare .figs { list-style: none; margin: var(--nl-6) 0 0; padding: 0;
                 display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nl-6); }
.compare .figs strong { display: block; font-family: var(--nl-font-display);
                        font-weight: 600; font-size: 1.25rem;
                        font-variant-numeric: tabular-nums; }
.compare .figs span { font-size: var(--nl-size-small); color: var(--nl-lichen); }
.nl-field-pine .compare .figs span { color: var(--nl-muted-pine); }

/* ---- Blog ---- */
.blog-empty { border: var(--nl-hairline) solid var(--nl-line); padding: var(--nl-12) var(--nl-8);
              max-width: 62ch; }
.blog-empty h2 { margin-bottom: var(--nl-4); }
.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nl-8); }
.post-list li { border-top: var(--nl-rule) solid var(--nl-pine); padding-top: var(--nl-4); }
.post-list time { font-size: var(--nl-size-small); color: var(--nl-lichen);
                  font-variant-numeric: tabular-nums; display: block; margin-bottom: var(--nl-1); }
.post-list h3 { margin-bottom: var(--nl-2); }
.post-list a { text-decoration: none; }
.post-list a:hover { text-decoration: underline; }

/* ---- Closing CTA band ---- */
.cta-band { text-align: left; }
.cta-band h2 { font-size: var(--nl-size-display); line-height: 1.08;
               letter-spacing: var(--nl-track-display); max-width: 18ch; }
.cta-band p { margin-top: var(--nl-6); max-width: 46ch; }
.cta-band .cta-row { margin-top: var(--nl-8); }

/* ---- Long-form prose (privacy) ---- */
.prose { max-width: var(--nl-measure); }
.prose h2 { margin: var(--nl-12) 0 var(--nl-4); }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: var(--nl-6); margin: 0 0 var(--nl-4); }
.prose li { margin-bottom: var(--nl-2); }

/* ---- Responsive for the additions ---- */
@media (max-width: 960px) {
  .tiers { grid-template-columns: 1fr; }
  .tier { height: auto; }
}
@media (max-width: 700px) {
  /* Nav collapses to a disclosure button. Without JS the links stay visible,
     stacked under the wordmark, so navigation never depends on script. */
  .nav-toggle { display: inline-flex; }
  .site-header .wrap { flex-wrap: wrap; }
  .nav {
    flex-basis: 100%; order: 3;
    flex-direction: column; align-items: stretch; gap: 0;
    border-top: var(--nl-hairline) solid var(--nl-line);
    margin-top: var(--nl-3); padding-top: var(--nl-2);
  }
  .navlink {
    display: block; font-size: 1rem; padding: var(--nl-3) 0;
    border-bottom: var(--nl-hairline) solid var(--nl-line);
  }
  .navlink:hover, .navlink[aria-current="page"] { border-bottom-color: var(--nl-line); }
  .nav .nl-btn { margin-top: var(--nl-4); width: 100%; }
  .js .nav[hidden] { display: none; }
  .compare .figs { grid-template-columns: 1fr; gap: var(--nl-4); }
}
@media (min-width: 701px) {
  /* Never let the toggle's hidden state leak onto the desktop layout. */
  .nav[hidden] { display: flex; }
}