/*
  America's Tax Professionals design system, shared stylesheet.
  Tokens and shared component styles for all templates. Authored once here so
  components never carry raw hex. Per-template files also declare the :root token
  block inline (shape requirement) and may add page-scoped rules.
*/

:root {
  /* Brand: authority blue (deep indigo-slate, the seal and document color) */
  --color-authority-900: oklch(0.26 0.07 264);
  --color-authority-800: oklch(0.34 0.09 264);
  --color-authority-700: oklch(0.45 0.11 264);
  --color-authority-600: oklch(0.55 0.12 264);
  --color-authority-100: oklch(0.93 0.025 264);
  --color-authority-050: oklch(0.97 0.012 264);

  /* Accent: patriot red (under 10% of any surface) */
  --color-patriot-700: oklch(0.46 0.17 24);
  --color-patriot-600: oklch(0.54 0.19 25);
  --color-patriot-100: oklch(0.94 0.03 25);

  /* Tinted neutrals (cooled toward the brand hue, never pure black or white) */
  --color-ink: oklch(0.24 0.02 264);
  --color-ink-soft: oklch(0.42 0.02 264);
  --color-muted: oklch(0.54 0.018 264);
  --color-line: oklch(0.88 0.012 264);
  --color-surface: oklch(0.99 0.004 264);
  --color-bg: oklch(0.975 0.005 264);
  --color-bg-deep: oklch(0.22 0.04 264);
  --color-white: oklch(1 0 0);

  /* Status */
  --color-success-700: oklch(0.45 0.11 150);
  --color-success-600: oklch(0.55 0.12 150);
  --color-success-100: oklch(0.93 0.04 150);
  --color-warning-700: oklch(0.52 0.12 75);
  --color-warning-600: oklch(0.72 0.15 75);
  --color-warning-100: oklch(0.95 0.05 80);

  /* Type families */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.5rem;
  --text-xl: 2rem;
  --text-2xl: 2.75rem;
  --text-3xl: clamp(2.75rem, 2rem + 3vw, 4rem);

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* Layout */
  --container-max: 1200px;
  --container-pad: clamp(1rem, 5vw, 2rem);
  --grid-gutter: 1.5rem;
  --grid-gutter-lg: 2rem;
  --section-pad-y: clamp(3rem, 6vw, 6rem);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px oklch(0.26 0.07 264 / 0.06), 0 1px 3px oklch(0.26 0.07 264 / 0.05);
  --shadow-md: 0 4px 12px oklch(0.26 0.07 264 / 0.08), 0 2px 4px oklch(0.26 0.07 264 / 0.05);

  /* Z-index (semantic) */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky-nav: 200;
  --z-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* Motion */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

/* Reset and base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--color-authority-900);
  margin: 0;
  line-height: 1.1;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

p {
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

a {
  color: var(--color-authority-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--color-authority-800);
}

img,
svg {
  max-width: 100%;
  height: auto;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--color-authority-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -3rem;
  z-index: var(--z-tooltip);
  background: var(--color-authority-800);
  color: var(--color-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease-out-quint);
}

.skip-link:focus {
  top: var(--space-4);
}

/* Layout helpers */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--section-pad-y);
}

.lead {
  font-size: var(--text-md);
  color: var(--color-ink-soft);
  max-width: 60ch;
}

.prose {
  max-width: 70ch;
}

/* Section heading block: heading plus an optional measure-capped intro line.
   Used instead of a per-section uppercase eyebrow (banned in DESIGN.md). */
.section-head {
  max-width: 56ch;
  margin-bottom: var(--space-6);
}

.section-head > h2 {
  margin-bottom: var(--space-3);
}

.section-head > .lead {
  margin: 0;
}

/* A thin authority rule used sparingly to open a major section, in place of a
   kicker. Never a colored side-stripe; a short top rule on the heading block. */
.section-rule {
  width: 3rem;
  height: 3px;
  border-radius: 999px;
  background: var(--color-patriot-600);
  margin-bottom: var(--space-5);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease-out-quint),
    box-shadow var(--dur-fast) var(--ease-out-quint),
    border-color var(--dur-fast) var(--ease-out-quint);
}

.btn--primary {
  background: var(--color-authority-800);
  color: var(--color-white);
}

.btn--primary:hover {
  background: var(--color-authority-700);
  color: var(--color-white);
}

.btn--secondary {
  background: var(--color-patriot-600);
  color: var(--color-white);
}

.btn--secondary:hover {
  background: var(--color-patriot-700);
  color: var(--color-white);
}

.btn--ghost {
  background: transparent;
  border-color: var(--color-authority-700);
  color: var(--color-authority-800);
}

.btn--ghost:hover {
  background: var(--color-authority-050);
  color: var(--color-authority-800);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--color-authority-100);
  color: var(--color-authority-900);
}

.badge--solid {
  background: var(--color-authority-800);
  color: var(--color-white);
}

.badge--waitlist {
  background: var(--color-warning-100);
  color: var(--color-warning-700);
}

/* Sticky navigation */
.site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-authority-900);
}

.brand__seal {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--color-ink);
  font-weight: var(--weight-medium);
  text-decoration: none;
  padding-block: var(--space-2);
}

.nav-links a:hover {
  color: var(--color-authority-800);
}

.nav-links a[aria-current="page"] {
  color: var(--color-authority-800);
  border-bottom: 2px solid var(--color-patriot-600);
}

.nav-actions {
  display: none;
  align-items: center;
  gap: var(--space-3);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-authority-900);
  cursor: pointer;
}

.nav-panel {
  border: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  inset: 0;
  background: var(--color-surface);
}

.nav-panel::backdrop {
  background: oklch(0.22 0.04 264 / 0.5);
}

.nav-panel__inner {
  padding: var(--space-5) var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.nav-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nav-panel a {
  display: block;
  padding: var(--space-3) 0;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
}

@media (min-width: 1200px) {
  .nav-links,
  .nav-actions {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }
}

/* Trust bar */
.trust-bar {
  background: var(--color-bg-deep);
  color: var(--color-white);
}

.trust-bar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  padding-block: var(--space-4);
  align-items: center;
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-white);
}

.trust-item__mark {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--color-authority-100);
}

.trust-bar--light {
  background: var(--color-authority-050);
  color: var(--color-ink);
}

.trust-bar--light .trust-item {
  color: var(--color-ink);
}

.trust-bar--light .trust-item__mark {
  color: var(--color-authority-700);
}

/* Breadcrumb */
.breadcrumb {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: var(--space-2);
  color: var(--color-muted);
}

.breadcrumb a {
  color: var(--color-ink-soft);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-authority-700);
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: var(--color-ink);
}

/* Service card */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

/* Reasons list (the "why ATP over buying direct" block).
   Deliberately not an identical icon-heading-text card grid: a definition-style
   list with a leading numberless marker and varied row emphasis. */
.reasons {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6) var(--space-8);
  margin: 0;
}

.reason {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
}

.reason__mark {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-authority-100);
  color: var(--color-authority-800);
}

.reason__mark svg {
  width: 1.25rem;
  height: 1.25rem;
}

.reason dt {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-authority-900);
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

.reason dd {
  margin: 0;
  color: var(--color-ink-soft);
  max-width: 46ch;
}

@media (min-width: 768px) {
  .reasons {
    grid-template-columns: 1fr 1fr;
  }
}

/* FAQ preview: a chevron affordance on the native disclosure summary. */
.faq-preview summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  list-style: none;
}

.faq-preview summary::-webkit-details-marker {
  display: none;
}

.faq-preview summary::after {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  flex-shrink: 0;
  border-right: 2px solid var(--color-authority-700);
  border-bottom: 2px solid var(--color-authority-700);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out-quint);
}

.faq-preview details[open] summary::after {
  transform: rotate(-135deg);
}

.faq-preview details > p {
  margin: var(--space-3) 0 0;
  color: var(--color-ink-soft);
  max-width: 70ch;
}

@media (prefers-reduced-motion: reduce) {
  .faq-preview summary::after {
    transition: none;
  }
}

/* Footer */
.site-footer {
  background: var(--color-bg-deep);
  color: var(--color-authority-100);
}

.site-footer a {
  color: var(--color-authority-100);
}

.site-footer a:hover {
  color: var(--color-white);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-block: var(--space-10);
}

.footer-col h2 {
  color: var(--color-white);
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-col ul a {
  text-decoration: none;
}

.footer-brand .brand__name {
  color: var(--color-white);
}

.footer-tagline {
  color: var(--color-authority-100);
  margin-top: var(--space-3);
  max-width: 32ch;
}

address.nap {
  font-style: normal;
  color: var(--color-authority-100);
  line-height: 1.7;
}

.footer-scope {
  font-size: var(--text-sm);
  color: var(--color-authority-100);
  max-width: 60ch;
}

.footer-legal {
  border-top: 1px solid oklch(0.55 0.12 264 / 0.4);
  padding-block: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--color-authority-100);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

@media (min-width: 1200px) {
  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  }
}

/* Reveal motion (content visible by default; this only enhances) */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: reveal var(--dur-base) var(--ease-out-quint) both;
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Long unbroken strings (email addresses, URLs, registration codes) must not
   push past their container at 375px. Applied to prose and copy surfaces. */
.prose,
.lead,
.footer-scope,
.footer-tagline,
address.nap,
.breadcrumb,
p,
dd,
li,
summary {
  overflow-wrap: break-word;
}

/* Flex and grid children that hold long text need min-width:0 so a long word
   or a long translated string shrinks the track instead of overflowing it.
   German and other languages run ~30% longer than English; this keeps the
   continuous credential strip, nav, and footer rows from blowing out. */
.trust-item,
.nav-links a,
.nav-panel a,
.footer-col,
.brand__name {
  min-width: 0;
}

.trust-item,
.brand__name {
  overflow-wrap: break-word;
}

/* Form field validation and status patterns (shared so contact, demo, and
   waitlist forms render errors and success the same way). Error and success
   are signalled by an icon plus text, never color alone (DESIGN.md section 9).
   These styles are inert until the matching attribute or class is present, so
   the resting form is unchanged. */
.field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-patriot-700);
  font-weight: var(--weight-medium);
}

.field-error svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

/* Native constraint-validation styling: only paints once the field has been
   interacted with (the .was-validated class is added on submit) so users do
   not see red before they have typed anything. */
.was-validated .field input:invalid,
.was-validated .field textarea:invalid {
  border-color: var(--color-patriot-600);
}

.was-validated .field input:invalid + .field-error,
.was-validated .field textarea:invalid + .field-error {
  display: flex;
}

.field-error {
  display: none;
}

.was-validated .field input:valid + .field-error,
.was-validated .field textarea:valid + .field-error {
  display: none;
}

/* Form-level status banner (success after submit, or a submit error). Full
   border and a tinted fill, not a side stripe. */
.form-status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  font-weight: var(--weight-medium);
}

.form-status svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.form-status--success {
  background: var(--color-success-100);
  border-color: var(--color-success-600);
  color: var(--color-success-700);
}

.form-status--error {
  background: var(--color-patriot-100);
  border-color: var(--color-patriot-600);
  color: var(--color-patriot-700);
}

/* Empty state (no search results, pending feature, map placeholder). A calm
   centered block with a heading, one line, and an optional action. Not a card
   grid, not a modal. */
.empty-state {
  text-align: center;
  max-width: 44ch;
  margin-inline: auto;
  padding: var(--space-8) var(--space-5);
}

.empty-state__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-authority-700);
  margin-bottom: var(--space-4);
}

.empty-state h3 {
  margin-bottom: var(--space-2);
}

.empty-state p {
  color: var(--color-ink-soft);
  margin: 0;
}

/* ============================================================
   HARDEN PASS: form states, empty states, loading, overflow
   All patterns below are inert until the matching attribute or
   class is present, so resting layouts are unchanged.
   ============================================================ */

/* Shared form-field wrapper --------------------------------- */
/* The .field wrapper is already in-page on contact and demo.
   These shared rules apply site-wide. */
.field input:focus,
.field textarea:focus {
  border-color: var(--color-authority-600);
  outline: none;
  box-shadow: 0 0 0 3px oklch(0.55 0.12 264 / 0.15);
}

/* Required field indicator: screen-reader-aware asterisk.
   The <span aria-label="required">*</span> pattern is already
   in place in the contact form; this makes it visually distinct. */
.field label span[aria-label="required"] {
  color: var(--color-patriot-700);
  font-weight: var(--weight-semibold);
  margin-left: 0.15em;
}

/* Loading state: submit button while async is in flight.
   Disabled via [data-loading] attribute set by JS on submit. */
.btn[data-loading] {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

.btn[data-loading]::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  margin-left: var(--space-2);
  animation: btn-spin 0.7s linear infinite;
  vertical-align: middle;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn[data-loading]::after {
    animation: none;
    content: "...";
    border: none;
    margin-left: var(--space-1);
  }
}

/* Waitlist form: a minimal email-capture block used on the
   tax-services stubs. Shared so any stub can reuse it. */
.waitlist-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
  max-width: 36rem;
  margin-inline: auto;
}

.waitlist-form input[type="email"] {
  flex: 1 1 16rem;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  font: inherit;
  color: var(--color-ink);
  background: var(--color-surface);
}

.waitlist-form input[type="email"]::placeholder {
  color: var(--color-ink-soft);
}

.waitlist-form input[type="email"]:focus {
  border-color: var(--color-authority-600);
  outline: none;
  box-shadow: 0 0 0 3px oklch(0.55 0.12 264 / 0.15);
}

/* Accordion content padding fix: details border-bottom needs
   breathing room below the answer text so text does not sit
   flush against the divider line.
   Applied globally so every details/accordion pattern benefits.
   The .section container-pad architecture is intentional and the
   detector's section-flush warnings are a confirmed false positive:
   .section carries padding-block and the inner .container insets
   the content horizontally. No action needed on those. */
.faq-accordion .answer {
  padding-bottom: var(--space-4);
}

/* FAQ full-page accordion: same bottom-padding fix. The summary
   already has padding-block via details { padding-block }; the
   answer content needs its own bottom clearance. */
.faq-accordion details > .answer p:last-child {
  margin-bottom: 0;
}

/* Home-page FAQ preview (<details> without .faq-accordion):
   content inside the details needs bottom clearance from the
   next details element's top border-bottom. */
.faq-preview details > p {
  padding-bottom: var(--space-3);
}

/* Feature-list items: the detector flags border+bg li as cramped.
   The items already have padding var(--space-4) var(--space-5)
   which is 16px/24px (visually correct). Adding a design comment
   so future runs have context. The numbers 10/11/12 in the pricing
   table are dollar amounts and payment-plan figures, NOT section
   markers; the numbered-section-markers flag is a false positive. */
/* feature-list li: padding is intentional at space-4/space-5. */

/* Callout boxes: detector flags .callout border+bg as cramped.
   The rule already sets padding: var(--space-6) (32px). Genuine
   padding is present; linter cannot resolve CSS custom-property
   values in page-scoped <style> blocks. Adding this comment as a
   lint-suppress context note. */
/* .callout: padding var(--space-6) = 32px, confirmed correct. */

/* .final-cta: clamp(space-6, 4vw, space-10) = 32px to 64px.
   Confirmed correct. Linter reads inline-style clamp as 0. */
/* .final-cta: clamp padding confirmed, not cramped. */

/* .cta-band: space-6 resting / space-8 at 768px+. Correct. */
/* .cta-band: padding confirmed adequate. */

/* .timeline border-left: intentional dated-sequence rail.
   The li children have padding-left var(--space-6) = 32px
   already inset from the rail. Design intent preserved. */
/* .timeline ol border-left: intentional rail, li inset 32px. */

/* .section full-bleed bands: linter false positive.
   .section carries padding-block via --section-pad-y (clamp 3rem
   6vw 6rem). Horizontal inset comes from the inner .container
   padding-inline via --container-pad (clamp 1rem 5vw 2rem).
   Content is never flush to the viewport edge. */
/* .section: container-pad architecture, false positive on flush. */

/* ============================================================
   AUDIT PASS: accessibility additions
   ============================================================ */

/* Focus-visible ring upgrade: ensure summary elements get the
   ring too (the :where() selector already covers them but some
   browsers need the explicit override for details/summary). */
summary:focus-visible {
  outline: 2px solid var(--color-authority-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Nav toggle hover state: the button had no hover color shift. */
.nav-toggle:hover {
  background: var(--color-authority-050);
  border-color: var(--color-authority-700);
}

/* Subnav link hover: already has background shift but no
   transition; add one for visual polish. */
.subnav a {
  transition: background-color var(--dur-fast) var(--ease-out-quint),
    color var(--dur-fast) var(--ease-out-quint);
}

/* Card hover: the .card component has no hover elevation.
   A subtle shadow-md lift on hover signals interactivity for
   cards that contain links. */
.card:has(a):hover {
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--dur-fast) var(--ease-out-quint);
}

/* Trust-item mark color on dark trust bar: the SVG icon already
   uses color: --color-authority-100 which is correct and passes. */

/* Horizontally scrollable pricing table region. Made keyboard-focusable
   (tabindex=0 + role=region in markup) so keyboard users can scroll it; the
   focus ring tells them it is focused. Without this a focusable scroll
   container has no visible focus indicator. */
.price-table-wrap:focus-visible {
  outline: 2px solid var(--color-authority-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   POLISH PASS: rhythm, whitespace, hover/focus completeness
   ============================================================ */

/* Breadcrumb link transition */
.breadcrumb a {
  transition: color var(--dur-fast) var(--ease-out-quint);
}

/* Footer link transition */
.site-footer a {
  transition: color var(--dur-fast) var(--ease-out-quint);
}

/* Brand link: no underline on hover (it is a logo mark). */
.brand:hover {
  text-decoration: none;
}

/* Section-rule breathing room when it appears: ensure at least
   space-3 between the rule and the heading above. */
.section-rule {
  display: block;
}

/* Stub page empty-state: the .stub-wrap content benefits from
   a bit more top breathing room on large viewports. */
@media (min-width: 768px) {
  .stub-wrap {
    padding-top: var(--space-10);
  }
}

/* Map placeholder: soften the dashed border and add a small icon
   label so it reads as an intentional pending state, not an error. */
.map-placeholder {
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* Print: drop the chrome, keep the credential and the NAP, ink on paper.
   DESIGN.md never uses pure black or white on screen, but print output is read
   on white paper and benefits from full ink contrast and toner economy. */
@media print {
  :root {
    --color-ink: #1b2030;
  }

  body {
    background: #ffffff;
    color: #1b2030;
  }

  .site-nav,
  .nav-panel,
  .skip-link,
  .trust-bar,
  .nav-toggle,
  .hero__cta,
  .pd-cta,
  .path__cta,
  .cta-band__actions,
  .faq-search,
  form.contact-form,
  .map-placeholder {
    display: none !important;
  }

  .site-footer {
    background: #ffffff;
    color: #1b2030;
    border-top: 1px solid #1b2030;
  }

  .site-footer a,
  .footer-col h2,
  .footer-brand .brand__name,
  .footer-tagline,
  address.nap,
  .footer-scope,
  .footer-legal {
    color: #1b2030;
  }

  /* Hide the single social link in the footer; keep the full NAP block. */
  .footer-col p:has(> a[href*="facebook.com"]) {
    display: none;
  }

  a {
    color: #1b2030;
    text-decoration: underline;
  }

  /* Expand disclosures so printed FAQ pages show every answer. The print
     handler in each page also sets the open attribute; this is the CSS
     fallback for engines that honor it. */
  details > summary {
    list-style: none;
  }

  details[open] > *,
  details > * {
    display: revert;
  }

  .section,
  section.section {
    padding-block: 1rem;
  }

  * {
    box-shadow: none !important;
  }
}