/* Hallmark · redesign: Bento Grid · tone: enterprise-authoritative · anchor hue: 35 (coral, retained) — tokens in tokens.css */

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; overflow-wrap: anywhere; min-width: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }

.container { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }

/* ── Nav · N1b three-section, frost on scroll ─────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: var(--z-sticky);
  background: color-mix(in oklch, var(--color-paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: var(--rule-hair) solid var(--color-rule-soft);
  transition: border-color var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out);
}
.nav.is-scrolled {
  border-bottom-color: var(--color-rule);
  box-shadow: 0 6px 22px -18px oklch(21% 0.015 45 / 0.5);
}
.nav__inner {
  max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter);
  height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.nav__brand {
  justify-self: start; text-decoration: none;
  font-family: var(--font-wordmark); font-weight: 700; font-size: 1.3rem;
  letter-spacing: -0.03em; color: var(--color-ink);
}
.nav__center { justify-self: center; display: flex; gap: var(--space-2xs); }
.nav__link {
  padding: 0.45rem 0.8rem; border-radius: var(--radius-btn);
  font-size: 0.9rem; font-weight: 500; color: var(--color-neutral);
  text-decoration: none; white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.nav__link:hover { color: var(--color-ink); background: var(--color-paper-2); }
.nav__right { justify-self: end; display: flex; align-items: center; gap: var(--space-sm); }

/* ── Products mega-menu ───────────────────────────────────────────────────── */
.nav__has-mega { position: static; }
.nav__megabtn {
  display: inline-flex; align-items: center; gap: 0.3rem; border: none; cursor: pointer;
  background: none; font-family: var(--font-body);
}
.nav__caret { font-size: 0.7em; transition: transform var(--dur-micro) var(--ease-out); }
.nav__has-mega[data-open="true"] .nav__caret { transform: rotate(180deg); }
.nav__has-mega[data-open="true"] .nav__megabtn { color: var(--color-ink); background: var(--color-paper-2); }
.mm {
  position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%) translateY(-6px);
  width: min(72rem, calc(100vw - 2rem));
  background: var(--color-card); border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-tile); box-shadow: 0 24px 60px -34px oklch(21% 0.02 45 / 0.5);
  padding: var(--space-lg); opacity: 0; visibility: hidden; pointer-events: none;
  max-height: min(72vh, 40rem); overflow-y: auto;
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility var(--dur-short);
  z-index: var(--z-sticky);
}
.nav__has-mega[data-open="true"] .mm { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mm__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); }
.mm__h { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.02em; color: var(--color-neutral); margin-bottom: var(--space-2xs); }
.mm__col a { display: block; text-decoration: none; padding: 0.4rem 0; border-radius: 4px; }
.mm__col a b { display: block; font-size: 0.92rem; font-weight: 600; color: var(--color-ink); letter-spacing: -0.01em; }
.mm__col a span { display: block; font-size: 0.8rem; color: var(--color-neutral); line-height: 1.35; }
.mm__col a:hover b { color: var(--color-accent-deep); }
.mm__all { display: inline-block; margin-top: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-soft); font-size: 0.9rem; font-weight: 600; color: var(--color-accent-deep); text-decoration: none; }
.nav__link.is-active { color: var(--color-ink); background: var(--color-paper-2); }

/* ── Footer sitemap (Ft — sub-page footer) ────────────────────────────────── */
.foot { padding: var(--space-3xl) 0 var(--space-xl); background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule); }
.foot__grid { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: var(--space-xl) var(--space-lg); }
.foot__brandcol .wordmark { font-family: var(--font-wordmark); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.03em; color: var(--color-ink); }
.foot__tag { margin: var(--space-sm) 0 var(--space-md); font-size: 0.9rem; color: var(--color-muted); max-width: 22ch; }
.fs__col { display: flex; flex-direction: column; gap: 0.35rem; }
.fs__h { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); margin-bottom: var(--space-2xs); }
.fs__col a { font-size: 0.86rem; color: var(--color-neutral); text-decoration: none; }
.fs__col a:hover { color: var(--color-accent-deep); }
.foot__meta { margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); display: flex; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.foot__meta .muted { font-size: var(--text-sm); color: var(--color-neutral); }
.foot__meta a { color: var(--color-neutral); text-decoration: none; }
.foot__meta a:hover { color: var(--color-ink); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.6rem 1.4rem; border-radius: var(--radius-btn);
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer; border: none;
  transition: background-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.btn--fill { background: var(--color-ink); color: var(--color-on-ink); box-shadow: 0 1px 2px oklch(21% 0.015 45 / 0.16); }
.btn--fill:hover { background: var(--color-ink-hover); transform: translateY(-1px); }
.btn--fill:active { transform: translateY(0); }
.btn--outline { background: var(--color-card); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-rule); }
.btn--outline:hover { box-shadow: inset 0 0 0 1px var(--color-neutral); transform: translateY(-1px); }
.btn--outline:active { transform: translateY(0); }
.btn--text { background: none; color: var(--color-neutral); padding-inline: 0.6rem; }
.btn--text:hover { color: var(--color-ink); }

/* ── Hero · centered display in a fixed-height band (Bento macro) ─────── */
.hero { padding: calc(64px + var(--space-3xl)) 0 var(--space-2xl); text-align: center; }
.hero__title {
  font-family: var(--font-display); font-size: var(--text-display);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.06;
  max-width: 17ch; margin-inline: auto;
}
.hero__title em { font-style: normal; color: var(--color-accent-deep); }
.hero__lede {
  margin: var(--space-lg) auto 0; max-width: 58ch;
  font-size: var(--text-md); line-height: 1.55; color: var(--color-muted);
}
.hero__cta { margin-top: var(--space-xl); display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }
.hero__note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-neutral); }

.reveal { opacity: 0; transform: translateY(8px); animation: reveal var(--dur-long) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes reveal { to { opacity: 1; transform: none; } }

.hero__shot { margin: var(--space-2xl) auto 0; max-width: 64rem; }
.hero__shot img {
  display: block; width: 100%; height: auto;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-tile);
  box-shadow: 0 1px 0 var(--color-rule-soft), 0 30px 60px -40px oklch(21% 0.02 45 / 0.4);
}

/* ── Credential strip · the category's compliance bar, but honest ─────────── */
.creds {
  margin: var(--space-xl) auto 0; max-width: 64rem;
  border-top: var(--rule-hair) solid var(--color-rule-soft);
  border-bottom: var(--rule-hair) solid var(--color-rule-soft);
  padding: var(--space-md) 0;
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-md) var(--space-lg); flex-wrap: wrap;
}
.creds__label {
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-neutral);
}
.creds__list { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.creds__list span {
  font-size: 0.9rem; font-weight: 600; color: var(--color-ink);
  white-space: nowrap;
}
.creds__list span + span::before {
  content: ""; display: inline-block; width: 5px; height: 5px; margin-right: var(--space-md);
  background: var(--color-accent); border-radius: 1px; vertical-align: middle;
}

/* ── Journey cards ────────────────────────────────────────────────────── */
.journeys { padding-block: var(--space-xl) var(--space-lg); }
.journeys__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.journey {
  display: flex; flex-direction: column; gap: var(--space-xs);
  padding: var(--space-lg); text-decoration: none;
  background: var(--color-card); border: var(--rule-hair) solid var(--color-rule-soft);
  border-radius: var(--radius-tile);
  transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.journey:hover { border-color: var(--color-neutral); transform: translateY(-1px); }
.journey h3 { font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em; }
.journey p { font-size: 0.95rem; color: var(--color-muted); line-height: 1.55; }
.journey__go { margin-top: auto; padding-top: var(--space-xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-deep); white-space: nowrap; }

/* ── Regulated ───────────────────────────────────────────────────────── */
.regulated { padding-block: var(--space-3xl); background: var(--color-paper-2); }
.regulated .flow__head h2 { max-width: 24ch; }
.reg__shot { margin: var(--space-2xl) 0 0; }
.reg__shot img {
  display: block; width: 100%; height: auto; max-width: 62rem;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-tile);
}
.reg__shot figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-neutral); max-width: 60ch; }
.reg__grid { margin-top: var(--space-2xl); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); }
.reg__col { border-top: 2px solid var(--color-rule); padding-top: var(--space-md); }
.reg__col h3 { font-size: var(--text-md); font-weight: 600; }
.reg__col p { margin-top: var(--space-xs); font-size: 0.95rem; color: var(--color-muted); line-height: 1.55; }

/* ── Comparison ──────────────────────────────────────────────────────── */
.compare { padding-block: var(--space-3xl) var(--space-xl); }
.compare__title { font-family: var(--font-display); font-size: var(--text-display-s); font-weight: 700; letter-spacing: -0.025em; max-width: 24ch; }
.compare__scroll { margin-top: var(--space-xl); overflow-x: auto; }
.compare__table { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: 0.95rem; }
.compare__table th, .compare__table td { text-align: left; padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-soft); }
.compare__table thead th { font-size: var(--text-sm); font-weight: 600; color: var(--color-neutral); }
.compare__table td:first-child { font-weight: 600; color: var(--color-ink); }
.compare__table td { color: var(--color-muted); }
.compare__table .is-us { color: var(--color-ink); font-weight: 600; background: var(--color-card); }
.compare__table thead .is-us { color: var(--color-accent-deep); }

/* ── Bento · F1, 7 tiles, mosaic, hairline-all ────────────────────────── */
.bento-wrap { padding-block: var(--space-xl) var(--space-3xl); }
.bento {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(11rem, auto); gap: var(--space-md);
}
.cell {
  background: var(--color-card);
  border: var(--rule-hair) solid var(--color-rule-soft);
  border-radius: var(--radius-tile);
  padding: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.span-2x2 { grid-column: span 2; grid-row: span 2; }
.span-2x1 { grid-column: span 2; }
.cell h3 {
  font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: var(--space-xs);
}
.cell h3::before { content: ""; width: 8px; height: 8px; background: var(--color-accent); border-radius: 2px; flex: none; }
.cell p { font-size: 0.95rem; color: var(--color-muted); line-height: 1.55; max-width: 52ch; }
.cell .fine { font-size: var(--text-sm); color: var(--color-neutral); margin-top: auto; }

/* Tier-A CSS art: the order-flow strip inside the Sales tile */
.flowstrip { margin-top: auto; display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.flowstrip span {
  font-size: var(--text-sm); font-weight: 500; color: var(--color-muted);
  background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-soft);
  border-radius: 6px; padding: 0.3rem 0.6rem; white-space: nowrap;
}
.flowstrip span.is-lit { color: var(--color-accent-deep); border-color: var(--color-accent-deep); background: var(--color-card); }
.flowstrip i { font-style: normal; color: var(--color-rule); flex: none; }

/* ── Flow · F4 step sequence, horizontal, 1.0-style ordinals ──────────── */
.flow { padding-block: var(--space-3xl); background: var(--color-paper-2); }
.flow__head { max-width: 40ch; }
.flow__head h2 { font-family: var(--font-display); font-size: var(--text-display-s); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; }
.flow__head p { margin-top: var(--space-md); color: var(--color-muted); max-width: 52ch; }
.flow__steps {
  margin-top: var(--space-2xl); display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg);
}
.step { border-top: 2px solid var(--color-rule); padding-top: var(--space-md); }
.step b { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-deep); font-variant-numeric: tabular-nums; }
.step h3 { margin-top: var(--space-2xs); font-size: var(--text-md); font-weight: 600; }
.step p { margin-top: var(--space-xs); font-size: 0.95rem; color: var(--color-muted); }

/* ── Why · short prose, left-biased ───────────────────────────────────── */
.why { padding-block: var(--space-3xl) var(--space-2xl); }
.why__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-2xl); align-items: start; }
.why h2 { font-family: var(--font-display); font-size: var(--text-display-s); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; max-width: 20ch; }
.why p { color: var(--color-muted); max-width: 58ch; }
.why__points { display: grid; gap: var(--space-lg); }
.why__points div { border-left: var(--rule-hair) solid var(--color-rule); padding-left: var(--space-md); }
.why__points b { font-weight: 600; }
.why__points p { font-size: 0.95rem; margin-top: var(--space-2xs); }

/* ── FAQ · conversational accordions ──────────────────────────────────── */
.faq { padding-block: var(--space-2xl) var(--space-3xl); }
.faq h2 { font-family: var(--font-display); font-size: var(--text-display-s); font-weight: 700; letter-spacing: -0.025em; }
.faq__list { margin-top: var(--space-xl); max-width: 46rem; }
.faq details { border-top: var(--rule-hair) solid var(--color-rule); }
.faq details:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--space-md) 0;
  font-size: var(--text-md); font-weight: 500; display: flex; justify-content: space-between; gap: var(--space-md); align-items: baseline;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--color-neutral); font-weight: 400; transition: transform var(--dur-micro) var(--ease-out); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-short) var(--ease-in-out); }
.faq details[open] .a { grid-template-rows: 1fr; }
.faq .a > div { overflow: hidden; }
.faq .a p { padding-bottom: var(--space-md); color: var(--color-muted); max-width: 60ch; }

/* ── CTA strip ────────────────────────────────────────────────────────── */
.cta { padding-block: var(--space-3xl); background: var(--color-ink); color: var(--color-on-ink); }
.cta .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
.cta p { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; max-width: 26ch; }
.cta .btn--fill { background: var(--color-on-ink); color: var(--color-ink); }
.cta .btn--fill:hover { background: oklch(100% 0 0 / 0.92); }

/* ── Footer · Ft5 statement ───────────────────────────────────────────── */
.foot-stmt { padding: var(--space-3xl) 0 var(--space-xl); }
.foot-stmt__line {
  font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; max-width: 38ch;
}
.foot-stmt__meta {
  margin-top: var(--space-xl); padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); flex-wrap: wrap;
}
.foot-stmt__meta .wordmark { font-family: var(--font-wordmark); font-weight: 600; font-size: 1.1rem; }
.foot-stmt__meta .muted { font-size: var(--text-sm); color: var(--color-neutral); }
.foot-stmt__meta a { color: var(--color-neutral); text-decoration: none; }
.foot-stmt__meta a:hover { color: var(--color-ink); text-decoration: underline; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 60rem) {
  .nav__center { justify-self: center; gap: var(--space-2xs); }
  .nav__center > a[href="/#flow"], .nav__center > a[href="/#regulated"], .nav__center > a[href="/#faq"] { display: none; }
  .mm, .nav__caret { display: none; }
  .foot__grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot__brandcol { grid-column: 1 / -1; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .journeys__grid { grid-template-columns: 1fr; }
  .reg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .span-2x2, .span-2x1 { grid-column: auto; grid-row: auto; }
  .flow__steps { grid-template-columns: 1fr; }
  .reg__grid { grid-template-columns: 1fr; }
  .hero { padding-top: calc(64px + var(--space-2xl)); }
  .creds__list { gap: var(--space-sm); }
  .creds__list span { font-size: 0.82rem; }
  .creds__list span + span::before { margin-right: var(--space-sm); }
  .nav__right .btn--text { display: none; }
  .nav__inner { display: flex; justify-content: space-between; gap: var(--space-sm); }
  .nav__brand { font-size: 1.2rem; }
  .btn { padding-inline: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { animation: reveal-reduced 150ms linear forwards; }
  @keyframes reveal-reduced { to { opacity: 1; transform: none; } }
}