/* ==========================================================================
   Proconomy design system v2
   Brand tokens from Proconomy_Visual_Identity_and_Digital_Design_Direction.docx.
   Typographic and compositional approach informed by an analysis of zip.com:
   large light-weight display type with tight negative tracking, generous
   whitespace, full-bleed gradient hero, translucent mega menu, and product
   proof expressed as realistic interface mockups rather than boxed text.
   No Zip code, colour, copy, asset or motion timing is reused.
   ========================================================================== */

:root {
  /* brand — unchanged, approved */
  --navy: #1b3a5c;
  --navy-deep: #122a44;
  --navy-soft: #23496f;
  --navy-night: #0a1a2c;
  --green: #58b947;
  --green-dark: #3b8a2e;
  --green-deeper: #2f6e25;
  --green-tint: #eff8ec;
  --green-line: #d7ecd0;

  --ink: #151515;
  --ink-2: #2c3238;
  --muted: #5c6672;
  --faint: #8b94a1;
  --line: #e6e9ee;
  --line-soft: #eef1f5;
  --bg: #ffffff;
  --bg-alt: #f7f9fb;
  --bg-warm: #f5f4f2;
  --bg-cool: #f1f5f9;
  --hover: #f4f7f5;

  --success-bg: #eff8ec;
  --warning-bg: #fef4e3;
  --warning-text: #9a6608;
  --risk-bg: #fdecea;
  --risk-text: #b4402f;
  --info-bg: #eaf1f8;
  --info-text: #1b3a5c;

  /* type — light weight, tight tracking, large scale */
  --font-sans:
    'Instrument Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;

  --fs-mega: clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem); /* up to 76px */
  --fs-display: clamp(2.375rem, 1.5rem + 3.5vw, 4rem); /* up to 64px */
  --fs-h1: clamp(2.125rem, 1.45rem + 2.7vw, 3.375rem); /* up to 54px */
  --fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem); /* up to 42px */
  --fs-h3: clamp(1.1875rem, 1.08rem + 0.5vw, 1.4375rem);
  --fs-h4: 1.0625rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-xxs: 0.75rem;

  --tracking-mega: -0.035em;
  --tracking-display: -0.03em;
  --tracking-h: -0.024em;

  --container: 1240px;
  --container-wide: 1400px;
  --container-narrow: 780px;
  --radius-xs: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;

  --shadow-xs: 0 1px 2px rgba(18, 42, 68, 0.06);
  --shadow-sm: 0 2px 6px -1px rgba(18, 42, 68, 0.08), 0 1px 2px rgba(18, 42, 68, 0.05);
  --shadow-md: 0 12px 28px -14px rgba(18, 42, 68, 0.24);
  --shadow-lg: 0 32px 64px -32px rgba(18, 42, 68, 0.3);
  --shadow-xl: 0 48px 90px -40px rgba(10, 26, 44, 0.42);
  --focus: 0 0 0 3px #fff, 0 0 0 5px var(--green-dark);

  --header-h: 78px;
  --bar-h: 48px;

  --t-fast: 140ms;
  --t: 240ms;
  --t-slow: 520ms;
  --t-story: 700ms;
  --ease: cubic-bezier(0.22, 0.8, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (max-width: 960px) {
  :root {
    --header-h: 66px;
  }
}

/* ------------------------------------------------------------------ base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--navy-deep);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: var(--tracking-h);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
}
h2 {
  font-size: var(--fs-h2);
  letter-spacing: var(--tracking-display);
  line-height: 1.08;
}
h3 {
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
h4 {
  font-size: var(--fs-h4);
  font-weight: 500;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--navy);
  text-decoration: none;
}

a:hover {
  color: var(--green-deeper);
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--green-line);
  color: var(--navy-deep);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 400;
  background: var(--navy-deep);
  color: #fff;
  padding: 14px 24px;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 500;
}

.skip-link:focus {
  left: 0;
  color: #fff;
}

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

/* ------------------------------------------------------------- structure */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 32px;
}

.wrap-wide {
  max-width: var(--container-wide);
}

.wrap-narrow {
  max-width: var(--container-narrow);
}

@media (max-width: 960px) {
  .wrap {
    padding-inline: 22px;
  }
}

@media (max-width: 540px) {
  .wrap {
    padding-inline: 18px;
  }
}

.sec {
  padding-block: 84px;
  position: relative;
}

@media (min-width: 961px) {
  .sec {
    padding-block: 116px;
  }
}

.sec-sm {
  padding-block: 60px;
}
.sec-xs {
  padding-block: 40px;
}

.bg-alt {
  background: var(--bg-alt);
}
.bg-warm {
  background: var(--bg-warm);
}
.bg-cool {
  background: var(--bg-cool);
}
.bg-tint {
  background: var(--green-tint);
}

.bg-navy {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.82);
  position: relative;
  overflow: hidden;
}

.bg-navy h1,
.bg-navy h2,
.bg-navy h3,
.bg-navy h4 {
  color: #fff;
}

.bg-navy a {
  color: #fff;
}

.bg-navy::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(88, 185, 71, 0.16), transparent 62%),
    radial-gradient(50% 70% at 90% 100%, rgba(35, 73, 111, 0.6), transparent 60%);
  pointer-events: none;
}

.bg-navy > * {
  position: relative;
}

/* grids */

.grid {
  display: grid;
  gap: 24px;
}
.g2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.g3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.g4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1040px) {
  .g4,
  .g3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .g2,
  .g3,
  .g4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.split-top {
  align-items: start;
}

.split-40 {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.split-60 {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
}

@media (max-width: 980px) {
  .split,
  .split-40,
  .split-60 {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

/* ------------------------------------------------------------------ type */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-deeper);
  margin-bottom: 20px;
}

.eyebrow::before {
  content: '';
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--green);
  flex: none;
}

.bg-navy .eyebrow {
  color: var(--green);
}

.mega-type {
  font-size: var(--fs-mega);
  letter-spacing: var(--tracking-mega);
  line-height: 0.98;
  font-weight: 400;
}

.display {
  font-size: var(--fs-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.02;
  font-weight: 400;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 62ch;
  letter-spacing: -0.005em;
}

.bg-navy .lead {
  color: rgba(255, 255, 255, 0.8);
}

.body {
  color: var(--ink-2);
  max-width: 68ch;
}

.muted {
  color: var(--muted);
}
.sm {
  font-size: var(--fs-sm);
}
.xs {
  font-size: var(--fs-xs);
}
.xxs {
  font-size: var(--fs-xxs);
}
.mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0;
}

.bg-navy .muted {
  color: rgba(255, 255, 255, 0.66);
}

.prose {
  max-width: 68ch;
}
.prose > * + * {
  margin-top: 18px;
}
.prose h2 {
  margin-top: 52px;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
}
.prose h3 {
  margin-top: 36px;
}
.prose p {
  color: var(--ink-2);
}

.sec-head {
  max-width: 780px;
  margin-bottom: 56px;
}

.sec-head p {
  margin-top: 20px;
}

.sec-head-wide {
  max-width: 900px;
}

/* lists */

.ticks li {
  position: relative;
  padding-left: 30px;
  color: var(--ink-2);
}

.ticks li + li {
  margin-top: 12px;
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.44em;
  width: 13px;
  height: 7px;
  border-left: 1.8px solid var(--green-deeper);
  border-bottom: 1.8px solid var(--green-deeper);
  transform: rotate(-45deg);
}

.bg-navy .ticks li {
  color: rgba(255, 255, 255, 0.82);
}
.bg-navy .ticks li::before {
  border-color: var(--green);
}

.numbered {
  counter-reset: step;
}

.numbered > li {
  counter-increment: step;
  position: relative;
  padding-left: 52px;
  color: var(--ink-2);
  min-height: 34px;
}

.numbered > li + li {
  margin-top: 22px;
}

.numbered > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -2px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy-deep);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.bg-navy .numbered > li::before {
  background: var(--green-deeper);
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 13px 24px;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--t) var(--ease),
    border-color var(--t) var(--ease),
    color var(--t) var(--ease),
    transform var(--t-fast) var(--ease),
    box-shadow var(--t) var(--ease);
}

/* MOBILE OVERFLOW GUARD, added at pre-launch review.
   .btn sets white-space: nowrap, which is right on desktop — a CTA that wraps
   mid-phrase looks broken. But it means any label longer than the viewport
   silently widens the whole DOCUMENT rather than the button, so the page
   scrolls sideways and nothing in the markup looks wrong. That is exactly how
   a 48-character label on /events/ pushed that page to 455px inside a 390px
   phone: no element reported as overflowing its parent, the document just got
   wider.
   Below 560px, let them wrap. A two-line button is survivable; a page that
   scrolls sideways on a phone is not. */
@media (max-width: 560px) {
  .btn {
    white-space: normal;
  }
}

.btn .ar {
  transition: transform var(--t) var(--ease);
  display: inline-block;
}

.btn:hover .ar {
  transform: translateX(4px);
}

/* Variants are written as .btn.btn-x rather than .btn-x deliberately.
   A single class scores (0,1,0) and loses to an ancestor rule such as
   `.bg-navy a { color: #fff }`, which scores (0,1,1). That is what made the
   label on a white button invisible against a white background until the
   pointer entered it — the :hover rule scored high enough to win, the resting
   rule did not. Doubling the class puts every variant at (0,2,0) so a button
   always paints its own colours whatever it sits inside. */

.btn.btn-primary {
  background: var(--navy-deep);
  color: #fff;
  border-color: var(--navy-deep);
}

.btn.btn-primary:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn.btn-green {
  background: var(--green-deeper);
  color: #fff;
  border-color: var(--green-deeper);
}

.btn.btn-green:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(47, 110, 37, 0.6);
}

.btn.btn-light {
  background: #fff;
  color: var(--navy-deep);
  border-color: #fff;
}

.btn.btn-light:hover {
  background: #fff;
  color: var(--navy-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.btn.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
  transform: translateY(-2px);
}

.btn.btn-outline {
  background: transparent;
  color: var(--navy-deep);
  border-color: #d2d9e1;
}

.btn.btn-outline:hover {
  background: #fff;
  border-color: var(--navy-soft);
  color: var(--navy-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* On a dark ground an outline button inverts, or it would be navy on navy. */
.bg-navy .btn.btn-outline,
.cta-band .btn.btn-outline,
.hero .btn.btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.bg-navy .btn.btn-outline:hover,
.cta-band .btn.btn-outline:hover,
.hero .btn.btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

.btn-lg {
  padding: 15px 28px;
  font-size: var(--fs-body);
}

.btn-sm {
  padding: 9px 16px;
  font-size: var(--fs-xs);
}

.btn-block {
  width: 100%;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.alink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--navy);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition:
    color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

.alink .ar {
  transition: transform var(--t) var(--ease);
}

.alink:hover {
  color: var(--green-deeper);
  border-bottom-color: var(--green);
}

.alink:hover .ar {
  transform: translateX(4px);
}

.bg-navy .alink {
  color: #fff;
}
.bg-navy .alink:hover {
  border-bottom-color: var(--green);
}

/* ----------------------------------------------------------------- cards */

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition:
    border-color var(--t) var(--ease),
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    background-color var(--t) var(--ease);
}

.card h3 {
  margin-bottom: 10px;
}

.card p {
  color: var(--muted);
  font-size: var(--fs-sm);
}

a.card {
  display: block;
  color: inherit;
}

a.card:hover {
  border-color: #cdd6e0;
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  color: inherit;
}

a.card:hover h3 {
  color: var(--green-deeper);
}

.card-warm {
  background: var(--bg-warm);
  border-color: transparent;
}
.card-alt {
  background: var(--bg-alt);
  border-color: transparent;
}
.card-tint {
  background: var(--green-tint);
  border-color: var(--green-line);
}
.card-lg {
  padding: 36px;
  border-radius: var(--radius-xl);
}

.bg-navy .card {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(6px);
}

.bg-navy .card p {
  color: rgba(255, 255, 255, 0.7);
}

.bg-navy a.card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.bg-navy a.card:hover h3 {
  color: var(--green);
}

.kicker {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-deeper);
  margin-bottom: 12px;
}

.bg-navy .kicker {
  color: var(--green);
}

/* card with icon */

.icon-box {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--info-bg);
  color: var(--navy);
  margin-bottom: 18px;
  flex: none;
  transition:
    background-color var(--t) var(--ease),
    color var(--t) var(--ease);
}

.icon-box svg {
  width: 20px;
  height: 20px;
}

a.card:hover .icon-box {
  background: var(--green-tint);
  color: var(--green-deeper);
}

.bg-navy .icon-box {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ----------------------------------------------------------------- chips */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: var(--fs-xxs);
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  white-space: nowrap;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}

.chip-agent {
  background: var(--info-bg);
  border-color: #cfdff0;
  color: #1b3a5c;
}
.chip-ok {
  background: var(--success-bg);
  border-color: var(--green-line);
  color: var(--green-deeper);
}
.chip-review {
  background: var(--warning-bg);
  border-color: #f3dfba;
  color: var(--warning-text);
}
.chip-block {
  background: var(--risk-bg);
  border-color: #f4cdc7;
  color: var(--risk-text);
}
.chip-neutral {
  background: var(--bg-alt);
  border-color: var(--line);
  color: var(--muted);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

a.chip:hover {
  border-color: var(--navy-soft);
  color: var(--navy-deep);
}

/* -------------------------------------------------------- answer / quote */

.answer {
  border-left: 2px solid var(--green);
  padding: 4px 0 4px 24px;
  max-width: 70ch;
}

.answer-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green-deeper);
  margin-bottom: 10px;
}

.answer p {
  font-size: var(--fs-lead);
  color: var(--ink-2);
  line-height: 1.5;
  letter-spacing: -0.006em;
}

.pull {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--navy-deep);
  font-weight: 400;
  max-width: 24ch;
}

/* ---------------------------------------------------------------- tables */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 620px;
}

table.data th,
table.data td {
  text-align: left;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-2);
}

table.data thead th {
  background: var(--bg-alt);
  color: var(--navy-deep);
  font-weight: 600;
  font-size: var(--fs-xxs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

table.data tbody tr:last-child td,
table.data tbody tr:last-child th {
  border-bottom: 0;
}

table.data tbody th {
  font-weight: 500;
  color: var(--navy-deep);
}

table.data tbody tr {
  transition: background-color var(--t-fast) var(--ease);
}

table.data tbody tr:hover {
  background: var(--bg-alt);
}

.table-note {
  margin-top: 14px;
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* ------------------------------------------------------------ accordions */

.acc {
  border-top: 1px solid var(--line);
}

.acc-item {
  border-bottom: 1px solid var(--line);
}

.acc-trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
  background: none;
  border: 0;
  padding: 26px 4px;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--navy-deep);
  cursor: pointer;
  transition: color var(--t) var(--ease);
}

.acc-trigger:hover {
  color: var(--green-deeper);
}

.acc-icon {
  flex: none;
  width: 22px;
  height: 22px;
  position: relative;
  margin-top: 3px;
}

.acc-icon::before,
.acc-icon::after {
  content: '';
  position: absolute;
  background: var(--green-deeper);
  border-radius: 2px;
  transition: transform var(--t) var(--ease-io);
}

.acc-icon::before {
  left: 2px;
  right: 2px;
  top: 10px;
  height: 1.8px;
}

.acc-icon::after {
  top: 2px;
  bottom: 2px;
  left: 10px;
  width: 1.8px;
}

.acc-trigger[aria-expanded='true'] .acc-icon::after {
  transform: scaleY(0);
}

.acc-panel {
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) var(--ease-io);
}

.acc-panel[data-open='true'] {
  grid-template-rows: 1fr;
}

.acc-panel > div {
  overflow: hidden;
}

.acc-panel p {
  padding: 0 60px 28px 4px;
  color: var(--ink-2);
  max-width: 76ch;
}

/* ------------------------------------------------------------------ tabs */

.tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 44px;
  padding: 5px;
  background: var(--bg-alt);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
}

.tab {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--t) var(--ease),
    color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}

.tab:hover {
  color: var(--navy-deep);
}

.tab[aria-selected='true'] {
  background: #fff;
  color: var(--navy-deep);
  box-shadow: var(--shadow-sm);
}

.tabpanel[hidden] {
  display: none;
}

.tabpanel {
  animation: panelIn var(--t-slow) var(--ease) both;
}

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

/* --------------------------------------------------------------- reveals */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--t-story) var(--ease),
    transform var(--t-story) var(--ease);
  will-change: opacity, transform;
}

[data-reveal].in {
  opacity: 1;
  transform: none;
}

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--t-story) var(--ease),
    transform var(--t-story) var(--ease);
}

[data-reveal-stagger].in > * {
  opacity: 1;
  transform: none;
}

[data-reveal-stagger].in > *:nth-child(1) {
  transition-delay: 0ms;
}
[data-reveal-stagger].in > *:nth-child(2) {
  transition-delay: 70ms;
}
[data-reveal-stagger].in > *:nth-child(3) {
  transition-delay: 140ms;
}
[data-reveal-stagger].in > *:nth-child(4) {
  transition-delay: 210ms;
}
[data-reveal-stagger].in > *:nth-child(5) {
  transition-delay: 280ms;
}
[data-reveal-stagger].in > *:nth-child(6) {
  transition-delay: 350ms;
}
[data-reveal-stagger].in > *:nth-child(7) {
  transition-delay: 420ms;
}
[data-reveal-stagger].in > *:nth-child(8) {
  transition-delay: 490ms;
}

/* ----------------------------------------------------------- breadcrumbs */

.crumbs {
  padding-top: 26px;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.crumbs li + li::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--faint);
  margin-right: 9px;
  vertical-align: middle;
}

.crumbs a {
  color: var(--muted);
}

.crumbs a:hover {
  color: var(--navy);
}

/* ----------------------------------------------------------------- forms */

.field {
  display: grid;
  gap: 7px;
}

.field label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy-deep);
}

.field .hint {
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* The required marker sits inline with the label text, joined to the last word
   by a non-breaking space in the markup. `display: inline` is stated rather
   than assumed so no future rule elsewhere can promote it to a block and drop
   it onto its own line. */
.field .req {
  display: inline;
  color: var(--risk-text);
  white-space: nowrap;
}

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
  background: #fff;
  border: 1px solid #d5dbe3;
  border-radius: var(--radius);
  padding: 13px 15px;
  width: 100%;
  transition:
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: #b6c0cc;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--navy-soft);
}

.field.bad input,
.field.bad select,
.field.bad textarea {
  border-color: var(--risk-text);
  background: #fffafa;
}

.field .err {
  display: none;
  font-size: var(--fs-xs);
  color: var(--risk-text);
  font-weight: 500;
}

.field.bad .err {
  display: block;
}

.check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.check input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--green-deeper);
}

.check label {
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.form-grid .span2 {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.status {
  border-radius: var(--radius);
  padding: 15px 18px;
  font-size: var(--fs-sm);
  font-weight: 500;
}

.status.err {
  background: var(--risk-bg);
  color: var(--risk-text);
}
.status.ok {
  background: var(--success-bg);
  color: var(--green-deeper);
}
.status.pending {
  background: var(--info-bg);
  color: var(--navy);
}

.err-summary {
  border: 1px solid #f4cdc7;
  background: var(--risk-bg);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
}

.err-summary h2 {
  font-size: 1.0625rem;
  color: var(--risk-text);
  margin-bottom: 10px;
}

.err-summary ul {
  list-style: disc;
  padding-left: 22px;
  font-size: var(--fs-sm);
}

.err-summary a {
  color: var(--risk-text);
}

/* ------------------------------------------------------- reduced motion */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .cta-band,
  .no-print {
    display: none !important;
  }
  body {
    color: #000;
  }
}

/* Punchy one-line subhead under a product H1 (Zip's pattern: the benefit line
   sits under the product name rather than becoming the headline itself). */
.hero-line {
  margin-top: 20px;
  font-size: clamp(1.19rem, 1.05rem + 0.7vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--green-deeper);
  font-weight: 400;
  max-width: 26ch;
}

.num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--green-deeper);
  margin-bottom: 14px;
}

.bg-navy .num {
  color: var(--green);
}

/* Progressive disclosure for optional form fields. */
.disclose {
  margin-top: 18px;
  background: none;
  border: 0;
  border-bottom: 1px dashed #cbd3dc;
  padding: 6px 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.disclose::after {
  content: '+';
  font-size: 15px;
  line-height: 1;
  color: var(--green-deeper);
}

.disclose[aria-expanded='true']::after {
  content: '–';
}

.disclose:hover {
  color: var(--green-deeper);
  border-bottom-color: var(--green);
}

.form-note {
  margin-top: 12px;
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

.form-note + .form-note {
  margin-top: 6px;
}

.form-note a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-note a:hover {
  color: var(--navy-deep);
}

/* Two-beat section heading: plain first beat, bolded payoff, then a subhead
   that carries the substance. Decoded from jaggaer.com — see
   docs/competitor-research.md section 10. */

.sec-head h2 b {
  font-weight: 500;
  color: var(--green-deeper);
}

.bg-navy .sec-head h2 b,
.cta-band .sec-head h2 b {
  color: var(--green);
}

.sec-sub {
  margin-top: 14px;
  font-size: var(--fs-lead);
  color: var(--muted);
  line-height: 1.5;
  max-width: 62ch;
}

.bg-navy .sec-sub {
  color: rgba(255, 255, 255, 0.72);
}

.eyebrow-trail i {
  font-style: normal;
  opacity: 0.45;
  margin-inline: 2px;
}

/* H1 second beat, matching the section heading system. */
h1.display b {
  font-weight: 400;
  color: var(--green-deeper);
  display: block;
}

.hero h1 b,
.phero h1 b {
  color: var(--green-deeper);
}

.hero h1 b { color: var(--green); }