/* Stylesheets formerly pulled in here via @import are now loaded as parallel
   <link> tags in the document head (see renderHead in the renderer) so they
   download concurrently instead of in a render-blocking serial waterfall.
   Cascade order is preserved by the order of those <link> tags. */

/* Horizon Ledger — unified Payrovia design system
   Typography: load via <link> in HTML head (see assets/templates/head-fonts.html). */

/* Horizon tokens are aliased onto the Payrovia product-led system so the whole
   site shares one palette + type. Values map --hz-* -> the new navy/blue/teal set. */
:root {
  --hz-ink: #0c1a2e;
  --hz-ink-muted: #5b6b7f;
  --hz-paper: #ffffff;
  --hz-paper-2: #f5f7fb;
  --hz-border: rgba(12, 26, 46, 0.12);
  --hz-sky: #2563eb;
  --hz-sky-deep: #1d4ed8;
  --hz-warm: #1acea0;
  --hz-ledger-bg: #08172e;
  --hz-ledger-ink: #e2e8f0;
  --hz-accent: #2563eb;
  --hz-font-display: "Hanken Grotesk", system-ui, sans-serif;
  --hz-font-ui: "Hanken Grotesk", system-ui, sans-serif;
  --hz-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --hz-radius: 12px;
  --hz-radius-lg: 20px;
  --hz-section: clamp(64px, 8vw, 96px);
  --hz-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hz-container: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--hz-font-ui);
  font-size: 17px;
  line-height: 1.65;
  color: var(--hz-ink);
  background: var(--hz-paper);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background: url("/assets/svg/horizon-grain.svg");
  z-index: 9999;
}

/* One unified action color site-wide. Country locale is carried by flags and
   local payroll terms, not by re-theming the whole brand per market. */
body[data-country] { --hz-accent: var(--hz-sky); }

.hz-display { font-family: var(--hz-font-display); letter-spacing: -0.03em; line-height: 1.08; }
.hz-mono { font-family: var(--hz-font-mono); font-feature-settings: "tnum"; }
.hz-container { width: 100%; max-width: var(--hz-container); margin: 0 auto; padding: 0 24px; }
.hz-section { padding: var(--hz-section) 0; }
.hz-section--alt { background: var(--hz-paper-2); }
.hz-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hz-ink-muted);
  margin: 0 0 16px;
}
.hz-lead { font-size: 1.15rem; color: var(--hz-ink-muted); max-width: 68ch; margin: 0 0 24px; }

/* Trust bar */
.hz-trust {
  background: var(--hz-ink);
  color: #cbd5e1;
  font-size: 13px;
  padding: 8px 24px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
}
.hz-trust a { color: var(--hz-sky); font-weight: 600; text-decoration: none; }
.hz-trust a:hover { text-decoration: underline; }

/* Buttons */
.hz-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s var(--hz-ease), box-shadow 0.2s var(--hz-ease);
}
.hz-btn--primary { background: var(--hz-accent, var(--hz-sky)); color: #fff; }
.hz-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px color-mix(in srgb, var(--hz-accent, var(--hz-sky)) 25%, transparent); }
.hz-btn--ghost { background: transparent; border-color: var(--hz-border); color: var(--hz-ink); }
.hz-btn--ghost:hover { border-color: var(--hz-ink-muted); }
.hz-btn--lg { padding: 14px 28px; font-size: 16px; }

/* Nav */
.hz-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 245, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hz-border);
  transition: box-shadow 0.2s var(--hz-ease);
}
.hz-nav.is-scrolled { box-shadow: 0 4px 24px rgba(12,18,34,0.06); }
.hz-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--hz-container);
  margin: 0 auto;
  padding: 14px 24px;
}
.hz-nav__brand img { height: 28px; width: auto; display: block; }
.hz-nav__links { display: flex; align-items: center; gap: 28px; }
.hz-nav__link {
  color: var(--hz-ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.hz-nav__link:hover { color: var(--hz-sky-deep); }
.hz-nav__cta { display: flex; align-items: center; gap: 12px; }
.hz-nav__login { color: var(--hz-ink-muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.hz-nav__toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}

/* Country / language switcher (country-page header dropdown).
   Migrated here from the deprecated styles.css so every country page — which
   loads horizon.css but NOT styles.css — actually receives these rules. Without
   them the .lang-switcher__panel renders fully expanded inline and breaks the
   header. Tokens remapped onto the Horizon system (--hz-ink / --hz-ink-muted /
   --hz-font-mono); the prior --slate-*/--ink/--font-mono refs were unresolved
   on country pages. */
.lang-switcher {
  position: relative;
}
.lang-switcher__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hz-ink-muted);
  cursor: pointer;
  text-decoration: none;
  transition:
    background 150ms ease,
    border-color 150ms ease;
}
.lang-switcher__trigger:hover {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.16);
}
.lang-switcher__trigger svg {
  width: 10px;
  height: 10px;
  transition: transform 180ms ease;
}
.lang-switcher.is-open .lang-switcher__trigger svg {
  transform: rotate(180deg);
}
.lang-switcher__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 320px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.14);
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  z-index: 950;
}
.lang-switcher.is-open .lang-switcher__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.lang-switcher__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--hz-ink);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 120ms ease;
}
.lang-switcher__item:hover {
  background: rgba(20, 184, 166, 0.08);
  color: var(--hz-ink);
}
.lang-switcher__item .fi,
.lang-switcher__trigger .fi {
  height: 14px;
  width: 20px;
  border-radius: 2px;
  flex-shrink: 0;
}
.country-bar__flag .fi {
  height: 18px;
  width: 24px;
  border-radius: 2px;
}
.lang-switcher__item--active {
  background: rgba(20, 184, 166, 0.06);
  font-weight: 600;
  color: var(--hz-ink);
}
.lang-switcher__item .name {
  flex: 1;
}
.lang-switcher__item .lang {
  font-size: 11px;
  color: var(--hz-ink-muted);
  font-family: var(--hz-font-mono);
}
.lang-switcher__divider {
  grid-column: 1/-1;
  height: 1px;
  background: rgba(15, 23, 42, 0.08);
  margin: 6px 0;
}
.lang-switcher__global {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--hz-ink-muted);
  font-size: 13px;
  background: rgba(15, 23, 42, 0.04);
}
@media (max-width: 540px) {
  .lang-switcher__panel {
    min-width: 280px;
    right: 0;
    grid-template-columns: 1fr;
  }
  /* The country nav keeps its CTA row visible on phones (links collapse into the
     hamburger). Compact the country switcher to flag + chevron and drop the
     redundant brand country label (the switcher flag already shows it) so the
     header row fits narrow viewports instead of overflowing horizontally.
     The base .hz-nav__inner uses gap:24px + padding:24px, which forces
     brand(136) + toggle(40) + cta(148) + gaps (~372px) past a 342px content
     area at 390px — tighten both so the row packs cleanly. */
  .lang-switcher__trigger > span:not(.fi) { display: none; }
  .lang-switcher__trigger { padding: 6px 8px; }
  .hz-nav--country .hz-nav__country { display: none; }
  .hz-nav__inner { gap: 12px; padding-left: 16px; padding-right: 16px; }
}

/* Small phones (Galaxy/Pixel-class ~360px): tighten further and shrink the
   wordmark one notch so logo + menu + country switcher + Start all stay visible. */
@media (max-width: 360px) {
  .hz-nav__inner { gap: 6px; padding-left: 12px; padding-right: 12px; }
  .hz-nav__cta { gap: 8px; }
  .hz-nav__brand img { height: 23px; }
}

/* Tiniest screens (~320px, legacy SE): pack the row at minimum spacing with a
   smaller mark so nothing overflows. No functionality is dropped. */
@media (max-width: 330px) {
  .hz-nav__inner { gap: 2px; padding-left: 10px; padding-right: 10px; }
  .hz-nav__cta { gap: 6px; }
  .hz-nav__toggle { padding: 6px; }
  .hz-nav__brand img { height: 20px; }
}

/* Hero */
.hz-hero { position: relative; overflow: hidden; }
.hz-hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(14,165,233,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.hz-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.hz-hero__copy > * {
  animation: hz-hero-stagger 0.6s var(--hz-ease) both;
}
.hz-hero__copy > *:nth-child(1) { animation-delay: 0.05s; }
.hz-hero__copy > *:nth-child(2) { animation-delay: 0.12s; }
.hz-hero__copy > *:nth-child(3) { animation-delay: 0.19s; }
.hz-hero__copy > *:nth-child(4) { animation-delay: 0.26s; }
.hz-hero__copy > *:nth-child(5) { animation-delay: 0.33s; }
.hz-hero__copy h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin: 0 0 20px; }
.hz-hero__copy h1 em { font-style: italic; color: var(--hz-sky-deep); }
.hz-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.hz-hero__checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hz-hero__checks li {
  font-size: 15px;
  color: var(--hz-ink-muted);
  padding-left: 24px;
  position: relative;
}
.hz-hero__checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--hz-sky);
  font-weight: 700;
}

/* Engine proof panel */
.hz-proof {
  background: var(--hz-ledger-bg);
  color: var(--hz-ledger-ink);
  border-radius: var(--hz-radius-lg);
  overflow: hidden;
  box-shadow: 0 32px 64px -24px rgba(12,18,34,0.45);
}
.hz-proof__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #334155;
  font-size: 13px;
}
.hz-proof__badge {
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(14,165,233,0.15);
  color: #7dd3fc;
  text-transform: uppercase;
}
.hz-proof__tabs { display: flex; gap: 0; border-bottom: 1px solid #334155; }
.hz-proof__tab {
  flex: 1;
  padding: 10px;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-family: var(--hz-font-ui);
}
.hz-proof__tab[aria-selected="true"] { color: #f1f5f9; border-bottom-color: var(--hz-sky); }
.hz-proof__panel { display: none; padding: 16px 18px; font-size: 13px; }
.hz-proof__panel.is-active { display: block; }
.hz-proof__title { font-family: var(--hz-font-mono); font-size: 11px; color: #94a3b8; margin-bottom: 12px; }
.hz-proof__row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(51,65,85,0.5);
  font-family: var(--hz-font-mono);
  font-size: 12px;
}
.hz-proof__row:last-child { border-bottom: none; font-weight: 600; color: #f1f5f9; }
.hz-proof__disclaimer {
  padding: 10px 18px;
  font-size: 11px;
  color: #94a3b8;
  border-top: 1px solid #334155;
  background: #0a0f1a;
}
.hz-proof__sim-label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fbbf24;
  font-weight: 600;
}

/* Statutory chips */
.hz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.hz-chip {
  font-family: var(--hz-font-mono);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--hz-border);
  background: var(--hz-paper-2);
  color: var(--hz-ink-muted);
}
body[data-country] .hz-chip { border-color: color-mix(in srgb, var(--hz-accent) 35%, var(--hz-border)); }

/* Country hero */
.hz-country-hero {
  padding: clamp(48px, 6vw, 72px) 0;
  border-bottom: 1px solid var(--hz-border);
}
body[data-country] .hz-country-hero {
  border-left: 4px solid var(--hz-accent, var(--hz-sky));
}
.hz-country-hero__inner { max-width: 720px; }
.hz-country-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0 0 16px; }

/* Section headers */
.hz-section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.hz-section-head h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0 0 12px; }
.hz-section-head p { color: var(--hz-ink-muted); margin: 0; }

/* Cards & grid */
.hz-grid { display: grid; gap: 20px; }
.hz-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hz-grid--4 { grid-template-columns: repeat(4, 1fr); }
.hz-grid--countries { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.hz-card {
  background: #fff;
  border: 1px solid var(--hz-border);
  border-radius: var(--hz-radius);
  padding: 24px;
  transition: border-color 0.2s var(--hz-ease), box-shadow 0.2s var(--hz-ease);
}
.hz-card:hover { border-color: var(--hz-sky); box-shadow: 0 8px 32px rgba(12,18,34,0.06); }
.hz-card--link { text-decoration: none; color: inherit; display: block; }
.hz-card__flag { font-size: 24px; margin-bottom: 12px; }
.hz-card h3 { font-size: 1.1rem; margin: 0 0 8px; font-family: var(--hz-font-display); }
.hz-card p { font-size: 14px; color: var(--hz-ink-muted); margin: 0; line-height: 1.5; }
.hz-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hz-card__tag {
  font-family: var(--hz-font-mono);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--hz-paper-2);
  color: var(--hz-ink-muted);
}

/* Steps */
.hz-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.hz-step { position: relative; padding-top: 40px; }
.hz-step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--hz-ink);
  color: #fff;
  font-family: var(--hz-font-mono);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hz-step h3 { font-size: 1rem; margin: 0 0 8px; }
.hz-step p { font-size: 14px; color: var(--hz-ink-muted); margin: 0; }

/* Pricing */
.hz-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hz-price-card {
  background: #fff;
  border: 1px solid var(--hz-border);
  border-radius: var(--hz-radius-lg);
  padding: 32px 28px;
}
.hz-price-card--featured { border-color: var(--hz-sky); box-shadow: 0 16px 48px rgba(14,165,233,0.12); }
.hz-price-card h3 { font-family: var(--hz-font-display); font-size: 1.3rem; margin: 0 0 8px; }
.hz-price-card .hz-price {
  font-family: var(--hz-font-mono);
  font-size: 2rem;
  font-weight: 600;
  margin: 16px 0;
}
.hz-price-card .hz-price span { font-size: 14px; color: var(--hz-ink-muted); font-weight: 400; }
.hz-price-card ul { list-style: none; padding: 0; margin: 20px 0; }
.hz-price-card li {
  font-size: 14px;
  padding: 6px 0 6px 20px;
  position: relative;
  color: var(--hz-ink-muted);
}
.hz-price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--hz-sky); }

/* FAQ */
.hz-faq { max-width: 720px; margin: 0 auto; }
.hz-faq__item { border-bottom: 1px solid var(--hz-border); }
.hz-faq__q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 0;
  font-family: var(--hz-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--hz-ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hz-faq__q::after { content: "+"; font-size: 1.2rem; color: var(--hz-ink-muted); }
.hz-faq__item.is-open .hz-faq__q::after { content: "−"; }
.hz-faq__a {
  display: none;
  padding: 0 0 20px;
  color: var(--hz-ink-muted);
  font-size: 15px;
  line-height: 1.6;
}
.hz-faq__item.is-open .hz-faq__a { display: block; }

/* CTA band */
.hz-cta-band {
  background: var(--hz-ink);
  color: #e2e8f0;
  text-align: center;
  padding: 64px 24px;
  border-radius: var(--hz-radius-lg);
}
.hz-cta-band h2 { font-family: var(--hz-font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 12px; color: #fff; }
.hz-cta-band p { color: #94a3b8; max-width: 520px; margin: 0 auto 24px; }

/* Footer */
.hz-footer {
  background: var(--hz-ink);
  color: #94a3b8;
  padding: 48px 0 32px;
  font-size: 14px;
}
.hz-footer__grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 40px;
}
.hz-footer__brand img { height: 24px; margin-bottom: 12px; }
.hz-footer h4 { color: #e2e8f0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 16px; }
.hz-footer ul { list-style: none; padding: 0; margin: 0; }
.hz-footer li { margin-bottom: 8px; }
.hz-footer a { color: #94a3b8; text-decoration: none; }
.hz-footer a:hover { color: var(--hz-sky); }
.hz-footer__bottom {
  border-top: 1px solid #1e293b;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
}

/* Compare table */
.hz-compare__caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 12px;
  font-size: 13px;
  color: var(--hz-ink-muted);
}
.hz-footnote {
  font-size: 12px;
  color: var(--hz-ink-muted);
  margin-top: 16px;
}
.hz-list--muted {
  font-size: 14px;
  color: var(--hz-ink-muted);
  padding-left: 18px;
}
.hz-card--highlight {
  margin-top: 24px;
  border-color: var(--hz-sky);
}
.hz-nav--country .hz-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Clean layout helpers (no inline styles) */
.hz-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: center;
  margin-top: 12px;
  font-size: 13px;
  color: var(--hz-ink-muted);
}
.hz-pill-row span {
  white-space: nowrap;
}
.hz-mono-demo {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  margin: 0;
  background: #020307;
  padding: 10px;
  border-radius: 5px;
  color: #cbd5e1;
  white-space: pre-wrap;
}
.hz-demo-ctas {
  margin: 12px 0 8px;
  gap: 8px;
}
.hz-preview-controls {
  margin-top: 12px;
  font-size: 13px;
}
.hz-preview-controls .hz-num {
  width: 7em;
  padding: 2px 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  border: 1px solid var(--hz-border);
  background: #fff;
}
.hz-center { text-align: center; }
.hz-mono-small { margin-top:8px; font-family:var(--font-mono); font-size:12px; }
.hz-nav__country {
  font-size: 13px;
  font-weight: 600;
  color: var(--hz-ink-muted);
  white-space: nowrap;
}
.hz-compare-wrap { overflow-x: auto; }
.hz-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.hz-compare th, .hz-compare td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--hz-border);
  text-align: left;
}
.hz-compare th { background: var(--hz-paper-2); font-weight: 600; }
.hz-compare .is-us { background: rgba(14,165,233,0.06); font-weight: 600; }
.hz-compare-yes { color: #059669; font-weight: 600; }
.hz-compare-no { color: #94a3b8; }
.hz-compare-partial { color: var(--hz-warm); }

/* Country bar (legacy compat) */
.country-bar {
  background: var(--hz-ink);
  color: #cbd5e1;
  font-size: 13px;
  padding: 6px 0;
}
.country-bar__inner {
  max-width: var(--hz-container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.country-bar a { color: var(--hz-sky); text-decoration: none; font-weight: 500; }
.country-bar__flag { margin-right: 6px; }

/* Reveal */
[data-reveal], [data-reveal-stagger] { opacity: 1; transform: none; }
.js-reveal [data-reveal]:not(.is-visible),
.js-reveal [data-reveal-stagger]:not(.is-visible) { opacity: 0; transform: translateY(12px); transition: opacity 0.4s var(--hz-ease), transform 0.4s var(--hz-ease); }
[data-reveal].is-visible, [data-reveal-stagger].is-visible { opacity: 1; transform: none; }

/* Sub-hero for inner pages */
.hz-subhero { padding: 48px 0 32px; border-bottom: 1px solid var(--hz-border); }
.hz-subhero h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0 0 16px; }

/* Legal pages */
.legal {
  padding: 72px 0 96px;
  max-width: 800px;
  margin: 0 auto;
}
.legal__meta {
  margin: 0 0 12px;
  color: var(--hz-ink-muted);
  font-size: 14px;
  font-weight: 600;
}
.legal h1 {
  margin: 0 0 24px;
  font-family: var(--hz-font-display);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  line-height: 1.08;
}
.legal h2 {
  margin: 48px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hz-border);
  font-size: 1.4rem;
  line-height: 1.25;
}
.legal h3 {
  margin: 28px 0 8px;
  font-size: 1.1rem;
  line-height: 1.3;
}
.legal p,
.legal li {
  color: var(--hz-ink-muted);
  font-size: 16px;
  line-height: 1.75;
}
.legal ul {
  padding-left: 22px;
}
.legal a {
  color: var(--hz-sky-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* PH subtree slim nav */
.hz-ph-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-bottom: 1px solid var(--hz-border);
  background: rgba(250,248,245,0.95);
  position: sticky;
  top: 0;
  z-index: 50;
}
.hz-ph-nav a { text-decoration: none; color: var(--hz-ink); font-weight: 500; font-size: 14px; }
.hz-ph-nav__actions { display: flex; gap: 16px; align-items: center; }
.story-card__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hz-ink-muted);
  background: var(--hz-paper-2);
  border: 1px solid var(--hz-border);
  border-radius: 4px;
  padding: 4px 8px;
  margin-bottom: 12px;
}

/* Skip link */
.hz-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--hz-ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.hz-skip:focus { left: 0; }

/* Focus visible */
a:focus-visible,
button:focus-visible,
.hz-btn:focus-visible,
.hz-nav__link:focus-visible,
.hz-proof__tab:focus-visible,
.hz-faq__q:focus-visible,
.hz-card--link:focus-visible {
  outline: 2px solid var(--hz-sky-deep);
  outline-offset: 2px;
}

@media (max-width: 960px) {
  .hz-hero__grid { grid-template-columns: 1fr; }
  .hz-grid--3, .hz-grid--4, .hz-pricing, .hz-steps { grid-template-columns: 1fr; }
  .hz-footer__grid { grid-template-columns: 1fr 1fr; }
  .hz-nav { position: relative; }
  .hz-nav__inner { flex-wrap: wrap; }
  .hz-nav__links, .hz-nav__cta .hz-nav__login { display: none; }
  .hz-nav.is-open .hz-nav__links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--hz-paper);
    padding: 20px 24px;
    border-bottom: 1px solid var(--hz-border);
    gap: 16px;
  }
  .hz-nav.is-open .hz-nav__cta {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    min-width: 0;
    padding: 0 0 4px;
  }
  .hz-nav.is-open .hz-nav__cta .hz-nav__login { display: inline-flex; }
  .hz-nav__toggle { display: block; }
  .hz-compare thead { display: none; }
  .hz-compare tr {
    display: block;
    margin-bottom: 20px;
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius);
    padding: 12px;
  }
  .hz-compare td, .hz-compare th {
    display: block;
    border: none;
    padding: 6px 0;
  }
  .hz-compare td::before {
    content: attr(data-label);
    font-weight: 600;
    display: block;
    font-size: 12px;
    color: var(--hz-ink-muted);
    margin-bottom: 2px;
  }
}

@media (max-width: 600px) {
  .hz-footer__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hz-ph-nav { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hz-ph-nav__actions { flex-wrap: wrap; width: 100%; }
}

.hz-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
.hz-cta-band__actions .hz-btn--ghost {
  color: #e2e8f0;
  border-color: #334155;
}
.hz-decision-list {
  max-width: 680px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.8;
  color: var(--hz-ink-muted);
}
.hz-text-center { text-align: center; }
.hz-text-muted { color: var(--hz-ink-muted); }
.hz-text-sm { font-size: 13px; }
.hz-text-xs { font-size: 12px; }
.hz-mt-lg { margin-top: 32px; }
.hz-mt-md { margin-top: 24px; }
.hz-mt-sm { margin-top: 12px; }
.hz-card--center { margin-top: 24px; text-align: center; }
.hz-proof__disclaimer--footer {
  margin-top: 16px;
  background: transparent;
  border: none;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hz-btn, .hz-proof__tab, [data-reveal] { transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}