/* =============================================================================
   National Property Response — brand tokens
   Charcoal #2B2B2E and orange #F07D1A, matching Victor's leaflet.
   Headings and body: Poppins (self-hosted). Brand strings live in js/config.js.
   ============================================================================= */

@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --npr-charcoal: #2B2B2E;
  --npr-charcoal-deep: #1A1A1C;
  --npr-charcoal-mid: #4A4A4E;
  --npr-orange: #F07D1A;
  --npr-orange-hover: #D96C12;
  --npr-orange-soft: #FDE8D4;

  /* Aliases so older navy-named rules render in charcoal/orange */
  --npr-navy: #2B2B2E;
  --npr-navy-deep: #1A1A1C;
  --npr-navy-mid: #4A4A4E;
  --npr-ink: #2B2B2E;
  --npr-ink-secondary: #5C5C60;
  --npr-ink-tertiary: #7A7A7E;
  --npr-paper: #F4F3F1;
  --npr-paper-2: #E8E6E3;
  --npr-white: #ffffff;
  --npr-accent: #F07D1A;
  --npr-accent-soft: #FDE8D4;
  --npr-focus: #F07D1A;
  --npr-check: #F07D1A;
  --npr-check-bg: #FDE8D4;
  --npr-danger: #B42318;
  --npr-success: #0E7A4A;

  --npr-line: rgba(43, 43, 46, 0.12);
  --npr-line-strong: rgba(43, 43, 46, 0.18);
  --npr-inverse-line: rgba(255, 255, 255, 0.18);
  --npr-inverse-muted: rgba(255, 255, 255, 0.84);
  --npr-scrim: rgba(26, 26, 28, 0.45);

  --npr-display-font: "Poppins", "Segoe UI", Helvetica, Arial, sans-serif;
  --npr-font: "Poppins", "Segoe UI", Helvetica, Arial, sans-serif;
  --npr-mono: ui-monospace, "Menlo", "Consolas", monospace;

  --npr-fw-regular: 400;
  --npr-fw-medium: 500;
  --npr-fw-semibold: 600;
  --npr-fw-bold: 800;

  --npr-display: clamp(2.15rem, 5.6vw, 3.85rem);
  --npr-title: clamp(1.7rem, 3.6vw, 2.55rem);
  --npr-subtitle: clamp(1.15rem, 2vw, 1.5rem);
  --npr-lead: clamp(1.05rem, 1.4vw, 1.2rem);
  --npr-body: 1.0625rem;
  --npr-small: 0.875rem;
  --npr-micro: 0.75rem;

  --npr-ls-display: -0.02em;
  --npr-ls-title: -0.015em;
  --npr-ls-tight: -0.01em;

  --npr-lh-display: 1.12;
  --npr-lh-title: 1.2;
  --npr-lh-body: 1.58;

  --npr-nav-h: 84px;
  --npr-utility-h: 48px;
  --npr-max: 1080px;
  --npr-wide: 1180px;
  --npr-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --npr-section: clamp(3.75rem, 7vw, 6rem);
  --npr-radius: 16px;
  --npr-radius-sm: 10px;
  --npr-radius-pill: 980px;

  --npr-shadow-nav: 0 1px 0 var(--npr-line);
  --npr-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --npr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 720px) {
  :root { --npr-nav-h: 72px; }
}

html[data-npr-text="90"] { font-size: 90%; }
html[data-npr-text="100"] { font-size: 100%; }
html[data-npr-text="112"] { font-size: 112.5%; }
html[data-npr-text="125"] { font-size: 125%; }

html[data-npr-contrast="on"] {
  --npr-charcoal: #111111;
  --npr-charcoal-deep: #000000;
  --npr-navy: #111111;
  --npr-navy-deep: #000000;
  --npr-ink: #000000;
  --npr-ink-secondary: #1a1a1a;
  --npr-paper: #ffffff;
  --npr-paper-2: #f2f2f2;
  --npr-orange: #C45000;
  --npr-accent: #C45000;
  --npr-line: #000000;
  --npr-line-strong: #000000;
}
html[data-npr-contrast="on"] body { background: #fff; color: #000; }
html[data-npr-contrast="on"] a { text-decoration-thickness: 2px; }
html[data-npr-contrast="on"] .card,
html[data-npr-contrast="on"] .steps-3 > li,
html[data-npr-contrast="on"] .coverage-card,
html[data-npr-contrast="on"] .trust-card,
html[data-npr-contrast="on"] .faq-list details,
html[data-npr-contrast="on"] .login-card {
  box-shadow: inset 0 0 0 2px #000;
}

/* How it works: step-by-step flow with arrows */
.flow-steps { list-style: none; margin: 2.5rem 0 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.flow-step {
  position: relative; background: #fff; border: 1px solid #e6e3df; border-radius: 16px;
  padding: 1.6rem 1.25rem 1.5rem; text-align: center;
  box-shadow: 0 8px 22px rgba(43,43,46,0.07);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.flow-step:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(43,43,46,0.12); border-color: #F07D1A; }
.flow-icon { position: relative; width: 4rem; height: 4rem; margin: 0 auto 1rem; border-radius: 50%; background: #2B2B2E; display: flex; align-items: center; justify-content: center; }
.flow-icon svg { width: 1.9rem; height: 1.9rem; fill: none; stroke: #F07D1A; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.flow-num { position: absolute; top: -0.35rem; right: -0.45rem; background: #F07D1A; color: #fff; font-family: Poppins, Arial, sans-serif; font-weight: 700; font-size: 0.72rem; line-height: 1; padding: 0.32rem 0.42rem; border-radius: 999px; border: 2px solid #fff; }
.flow-step h3 { margin: 0 0 0.45rem; font-size: 1.05rem; line-height: 1.3; color: #2B2B2E; }
.flow-step p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: #4a4a4f; }
.flow-arrow { display: flex; align-items: center; justify-content: center; height: 2.6rem; }
.flow-arrow svg { width: 2.2rem; height: 1.4rem; transform: rotate(90deg); fill: none; stroke: #F07D1A; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1100px) {
  .flow-steps { flex-direction: row; align-items: stretch; }
  .flow-step { flex: 1 1 0; min-width: 0; padding: 1.5rem 0.9rem 1.4rem; }
  .flow-arrow { flex: 0 0 2.1rem; height: auto; }
  .flow-arrow svg { transform: none; width: 1.9rem; }
}
html[data-npr-contrast="on"] .flow-step { border-color: #000; }