/* Nonprofit AI Capacity Cohort landing (/dcf) - Delaware Community Foundation x Tapp.
 *
 * PARTNER-AUTHORED stylesheet. Not the TappHQ design system and not subject to
 * it: the rules below are the partner's own, carried over from the static page
 * that used to be served from public/marketing/dcf/index.html. Edit the
 * partner's design here, not in src/.
 *
 * Four mechanical changes from the partner original, and only these:
 *
 * 1. SCOPED under `.dcf`. Every selector is prefixed `.dcf ` (`:root` and `body`
 *    became `.dcf`, the page wrapper). The page now renders inside the root
 *    layout, which also renders the consent banner and toasts; unscoped,
 *    `*{padding:0;margin:0;border-radius:0}`, `a{...}` and the --navy/--ink
 *    custom properties would restyle them. `html` stays global (font
 *    smoothing, smooth scroll, overflow clip) - it styles nothing of ours.
 * 2. LAYERED `marketing`, the slot landing.css uses (globals.css:9). After
 *    `base`, so the partner rules beat Tailwind preflight on its own markup;
 *    before `utilities`, so the banner's own classes beat anything here. The
 *    order statement is repeated first so this file cannot define a different
 *    order if it ever loads before globals.css.
 * 3. FONTS are the app's self-hosted IBM Plex Sans and Montserrat (the same
 *    families the partner requested from Google Fonts), so the page makes no
 *    third-party request before the visitor answers the consent banner.
 * 4. One preflight undo (link underline), next to the body rule below.
 *
 * Guard: src/app/dcf/__tests__/page.test.tsx (scoping, layer, no third-party URL).
 */
@layer theme, base, marketing, components, utilities;

@layer marketing {

/* The page wrapper fills the viewport; the body behind it (visible only in the
   strip the consent banner reserves at the bottom) matches the page. */
body:has(.dcf) { background: #ffffff; }

/* Undo the one Tailwind preflight reset that shows on this markup: preflight
   sets `a { text-decoration: inherit }`, which strips the browser underline the
   partner's inline links ("See key dates", "tapphq.com") were drawn with.
   `revert` returns to the browser default; zero specificity, so every partner
   rule that sets text-decoration (buttons) still wins. Measured: without this
   line those three links were the only pixels differing from the static page. */
:where(.dcf) a { text-decoration: revert; }

/* ---------- Primitives ---------- */
.dcf {
  /* Palette sampled from preferred mockup 2I-revised-light-1440-full (Drive 18vBS4LH3E2mXOtgC_ebq02GbZgsKPaNl) */
  --dcf-slate: #1B2A41;
  --dcf-sage: #6c926c;
  --dcf-teal: #0094c1;
  --dcf-teal-deep: #00788e;
  --dcf-sky: #77b7d7;
  --dcf-gold: #f9c037;
  --dcf-cream: #fff8e8;
  --navy: #1B2A41; /* DCF slate for LP (was Joe #1B2A41) */
  --navy-joe: #1B2A41;
  --navy-deep: #121F30;
  --accent-cta: #0094c1;
  --accent-hl: #0094c1; /* v8: one accent role */
  --accent-sec: #00788e;
  --lime: #0094c1; /* v6 Opt B: CTA teal (neon+gold retired) */
  --lime-dark: #00788e; /* secondary marker */
  --cream: #ffffff; /* LP white; soft cream available as --dcf-cream */
  --plate: #F4EFE4;
  --ink: #14181F;
  --white: #FFFFFF;

  --font-display: var(--font-ibm-plex-sans), 'IBM Plex Sans', system-ui, sans-serif;
  --font-body: var(--font-montserrat), 'Montserrat', system-ui, sans-serif;

  --space-in: 12px;
  --space-group: 24px;
  --space-block: 48px;
  --space-section: clamp(72px, 9vw, 128px);
  --gutter: clamp(20px, 5vw, 72px);
  --col-gap: clamp(40px, 6vw, 96px);
  --cut: 0px;
  --max: 1296px;
  --stripe: 8px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --logo-h: 72px;
}

/* ---------- Semantic tokens (light only) ---------- */
.dcf {
  color-scheme: light;
  --color-bg-page: #ffffff;
  --color-bg-hero: var(--navy);
  --color-bg-band: var(--white);
  --color-bg-raised: var(--white);
  --color-text: var(--ink);
  --color-text-secondary: #3A4557;
  --color-text-accent-large: var(--dcf-teal-deep);
  --color-rule: rgba(20, 24, 31, 0.16);
  --color-rule-strong: var(--navy);
  --color-marker: var(--dcf-teal-deep);
  --color-focus: var(--navy);

  --color-field: var(--navy);
  --color-on-field: var(--white);
  --color-on-field-secondary: rgba(240, 240, 232, 0.86);
  --color-field-rule: rgba(240, 240, 232, 0.22);
}

/* ---------- Base ---------- */
.dcf *, .dcf *::before, .dcf *::after { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.dcf {
  background: var(--color-bg-page); color: var(--color-text);
  font-family: var(--font-body); font-size: 18px; line-height: 1.6;
  overflow-x: clip; overflow-wrap: break-word; min-height: 100dvh;
}
.dcf h1, .dcf h2, .dcf h3 { font-family: var(--font-display); font-weight: 700; text-wrap: balance; letter-spacing: -0.02em; }
.dcf p { text-wrap: pretty; }
.dcf img { display: block; max-width: 100%; }
.dcf a { color: inherit; text-underline-position: from-font; text-decoration-skip-ink: auto; text-decoration-thickness: 2px; }
.dcf .num { font-variant-numeric: tabular-nums; }
.dcf .wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.dcf [id] { scroll-margin-top: 24px; }
.dcf :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.dcf .on-field :focus-visible { outline-color: var(--dcf-sky); }

.dcf .skip {
  position: absolute; inset-inline-start: 16px; inset-block-start: -80px; z-index: 50;
  background: var(--navy); color: var(--white); font-family: var(--font-display); font-weight: 700;
  font-size: 16px; padding: 12px 18px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none;
}
.dcf .skip:focus-visible { inset-block-start: 16px; }

/* ---------- Logos (DCF then Tapp; preferred mark shows FULL icon+TAPP) ---------- */
.dcf .logo { display: block; flex: none; }
.dcf .logo--dcf img { height: var(--logo-h); width: auto; }
.dcf .logo--tapp { height: calc(var(--logo-h) * 0.92); width: auto; overflow: visible; opacity: 0.96; }
.dcf .logo--tapp img {
  height: 100%; width: auto; max-width: none;
  margin: 0; display: block;
}
.dcf .logos { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); flex-wrap: nowrap; flex-direction: row; }
.dcf .logos__x { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1; color: var(--color-text-secondary); opacity: 0.7; }

/* ---------- Buttons ---------- */
.dcf .cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-in) 16px; margin-block-start: var(--space-group); }
.dcf .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding-block: 14px; padding-inline: 26px;
  font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.2;
  text-decoration: none; border: 2px solid transparent; box-sizing: border-box;
  transition: background-color 180ms ease-out, color 180ms ease-out, box-shadow 180ms ease-out, scale 200ms ease-out;
}
.dcf .btn__arrow { align-self: center; }
.dcf .btn:active { scale: 0.97; }
.dcf .btn__arrow { width: 18px; height: 18px; flex: none; }
.dcf .btn--lime { background: var(--accent-cta); color: #ffffff; box-shadow: 6px 6px 0 0 var(--navy); }
.dcf .btn--navy { background: var(--navy); color: var(--white); }
@media (hover: hover) {
  .dcf .btn--lime:hover { box-shadow: 3px 3px 0 0 var(--navy); }
  .dcf .btn--navy:hover { background: var(--navy-deep); }
}

.dcf .square { display: inline-block; width: 14px; height: 14px; background: var(--color-marker); flex: none; }
.dcf .on-field .square { background: var(--dcf-sky); }

/* ---------- Section scaffolding ---------- */
.dcf section { position: relative; }
.dcf .plain { padding-block: var(--space-section); }
.dcf .band { background: var(--color-bg-band); }
.dcf .h2 { font-size: clamp(34px, 2.2rem + 1.4vw, 56px); line-height: 1.06; max-width: 20ch; color: var(--color-text); }
.dcf .body { max-width: 62ch; }
.dcf .body p + p { margin-block-start: var(--space-in); }
.dcf .checklist { list-style: none; display: grid; gap: var(--space-in); }
.dcf .checklist li { display: grid; grid-template-columns: 18px 1fr; gap: 14px; align-items: start; }
.dcf .checklist .square { margin-block-start: 7px; }

/* ---------- Photo plates: one stripe language, one mid-page aspect ---------- */
.dcf .photo { position: relative; margin: 0; background: var(--navy); }
.dcf .photo img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
/* v8: no lime/teal top-stripe; S1 uses offset teal frame via box-shadow */
.dcf .photo::before { content: none; }
.dcf .row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-block) var(--col-gap); align-items: center;
}
.dcf .row .photo { aspect-ratio: 3 / 2; box-shadow: -12px -12px 0 0 #0094c1; margin-inline-start: 12px; margin-block-start: 12px; }
.dcf .row .photo::before, .dcf .shot::before { content: none !important; }
@media (min-width: 1081px) {
  /* photo matches its text column height: shared width, shared gutter, matched heights */
  .dcf .row { align-items: stretch; }
  .dcf .row .photo { aspect-ratio: auto; min-height: 360px; height: 100%; }
  .dcf .row__text { align-self: center; padding-block: 8px; }
}
.dcf .row--flip .photo { order: 2; }
.dcf .row__text > * + * { margin-block-start: var(--space-group); }

/* ---------- HERO (light) ---------- */
.dcf .hero {
  position: relative; isolation: isolate;
  background: var(--color-bg-hero); color: var(--color-text);
  padding-block: 24px calc(var(--space-section) + 16px);
}
/* soft sky slash: closes the hero on a diagonal (v6 Opt B) */
.dcf .hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset-inline: 0; inset-block-end: 0; height: calc(var(--cut) + 18px);
  background: var(--accent-hl);
  clip-path: none;
}
.dcf .hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset-inline: 0; inset-block-end: 0; height: calc(var(--cut) + 18px);
  background: var(--color-bg-page);
  clip-path: none;
}
.dcf .bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block-end: 20px; border-block-end: 1px solid var(--color-rule);
}
.dcf .bar__meta { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--color-text-secondary); }
.dcf .hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 28px clamp(32px, 3.5vw, 56px); align-items: start;
  padding-block-start: clamp(24px, 3vw, 40px);
}
.dcf .hero__copy {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0;
}
/* v8: S1-style outlined program badge (no skew); text = Nonprofit AI Capacity Cohort */
.dcf .badge-cf {
  display: inline-flex; align-items: center; gap: 8px;
  margin-block-start: 14px;
  border: 1.5px solid rgba(255,255,255,.85);
  padding: 6px 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; line-height: 1.25;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: #ffffff; background: transparent;
  max-width: min(100%, 320px); white-space: normal; text-wrap: balance;
}
.dcf .badge-cf__sq {
  display: inline-block; width: 10px; height: 10px; flex: none;
  background: #0094c1;
}
.dcf .kicker { display: none; } /* retired skewed parallelogram */
.dcf .hero h1 {
  margin-block-start: 16px;
  font-size: clamp(34px, 0.85rem + 2.6vw, 52px);
  line-height: 1.14; letter-spacing: -0.03em;
  max-width: 19ch; color: var(--ink);
}
/* v8 highlight: mid-band clone for body; hero uses solid teal block like S1 */
.dcf .hl, .dcf .h2 .accent, .dcf .foundations .accent {
  display: inline;
  padding: 0.05em 0.12em;
  margin: 0;
  line-height: inherit;
  color: #14181F;
  background-color: transparent;
  background-image: linear-gradient(
    transparent 12%,
    #0094c1 12%,
    #0094c1 88%,
    transparent 88%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.dcf .hero h1 { line-height: 1.28; }
.dcf .hero h1 .hl {
  display: inline;
  color: #ffffff;
  background-color: #0094c1;
  background-image: none;
  padding: 0.08em 0.14em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.dcf .hero__sub { margin-block-start: 16px; font-size: clamp(17px, 0.95rem + 0.25vw, 19px); line-height: 1.45; color: var(--color-text-secondary); max-width: 46ch; }
.dcf .hero__line {
  margin-block-start: 16px;
  display: flex; gap: 12px; align-items: baseline;
  font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.35; color: var(--navy);
}
.dcf .hero__line .square { translate: 0 1px; }
.dcf .hero .cta { margin-block-start: 18px; }
.dcf .hero__contact { margin-block-start: 10px; }
.dcf .hold {
  grid-column: 1 / -1;
  margin-block-start: 8px; padding-block-start: 16px;
  border-block-start: 1px solid var(--color-rule);
  font-size: 16px; line-height: 1.55; color: var(--color-text-secondary); max-width: 72ch;
}
.dcf .hold strong { color: var(--ink); font-weight: 600; }
.dcf .hold a { font-weight: 600; color: var(--navy); display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle; }

.dcf .hero__visual {
  display: grid; grid-template-rows: auto auto;
  gap: 16px; padding-block-start: 2px; align-content: start;
  width: 100%;
}
.dcf .hero__photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-height: 640px;
  /* S1: teal frame sits behind, shifted up/left */
  box-shadow: -14px -14px 0 0 #0094c1;
  margin-inline-start: 14px;
  margin-block-start: 14px;
}
.dcf .hero__photo img { object-position: 45% 35%; }
.dcf .chips {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-in); list-style: none; margin-block-start: 0;
  width: calc(100% - 16px);
}
.dcf .chips .chip { width: 100%; justify-content: flex-start; white-space: normal; }
.dcf .chip {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  padding: 8px 14px; border: 2px solid var(--color-rule); color: var(--ink); background: var(--white);
}
.dcf .chip .square { width: 10px; height: 10px; }
.dcf .chip--lead {
  background: var(--lime);
  border-color: var(--navy);
  color: var(--navy);
}
.dcf .chip--lead .square { background: var(--navy); }

@media (prefers-reduced-motion: no-preference) {
  .dcf .hero__photo { animation: plate-in 900ms var(--ease-out) both; animation-delay: 160ms; }
  .dcf .badge-cf, .dcf .hero h1, .dcf .hero__sub, .dcf .hero__line, .dcf .hero .cta { animation: rise 760ms var(--ease-out) both; }
  .dcf .badge-cf { animation-delay: 40ms; }
  .dcf .hero h1 { animation-delay: 100ms; }
  .dcf .hero__sub { animation-delay: 170ms; }
  .dcf .hero__line, .dcf .hero .cta { animation-delay: 230ms; }
}
@keyframes plate-in { from { opacity: 0.001; translate: 20px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes rise { from { opacity: 0.001; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

/* ---------- Readiness ---------- */
.dcf .readiness { padding-block-start: calc(var(--space-section) - 16px); }

/* ---------- Why (white band) ---------- */
.dcf .why .big {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 1.05rem + 0.8vw, 30px);
  line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); max-width: 34ch;
}
.dcf .why .big + p { color: var(--color-text-secondary); max-width: 56ch; }

/* ---------- What selected receive ---------- */
.dcf .manifest {
  list-style: none; margin-block-start: var(--space-block);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block-start: 3px solid var(--color-rule-strong);
  padding-inline-start: 0;
  counter-reset: none;
}
.dcf .manifest > li { list-style: none; }
.dcf .manifest > li::marker, .dcf .manifest > li::before { content: none !important; display: none !important; }
.dcf .manifest li {
  padding: 28px 28px 36px 0; border-block-end: 1px solid var(--color-rule);
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-in) 16px; align-content: start;
}
.dcf .manifest li:nth-child(3n+2), .dcf .manifest li:nth-child(3n) { padding-inline-start: 28px; border-inline-start: 1px solid var(--color-rule); }
.dcf .seatno {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 2px solid var(--color-marker); color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums;
}
.dcf .manifest h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; align-self: center; }
.dcf .manifest p { grid-column: 2; font-size: 17px; color: var(--color-text-secondary); }
.dcf .manifest li.final {
  grid-column: 1 / -1; padding: 28px 32px; border: 0; margin-block-start: var(--space-group);
  background: var(--lime); color: var(--ink);
  clip-path: none;
}
.dcf .manifest li.final h3 { font-size: 26px; }
.dcf .manifest li.final p { color: var(--ink); font-size: 19px; font-weight: 500; }
.dcf .manifest li.final .seatno { background: var(--ink); border-color: var(--ink); color: var(--accent-cta); }

/* ---------- Platform: the one navy accent band ---------- */
.dcf .field {
  background: var(--color-field); color: var(--color-on-field);
  padding-block: calc(var(--space-section) + var(--cut)) calc(var(--space-section) + var(--cut));
  /* Top + bottom diagonal seams (mockup navy<->cream language); layout unchanged */
  clip-path: none;
  margin-block: 0;
}
.dcf .field .h2 { color: var(--white); }
.dcf .platform__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-block) var(--col-gap); align-items: start; }
.dcf .head-block > * + * { margin-block-start: var(--space-group); }
.dcf .platform .body p { color: var(--color-on-field-secondary); }
.dcf .platform .body p.name { color: var(--white); font-size: 21px; font-family: var(--font-display); font-weight: 600; line-height: 1.45; }
.dcf .platform .name strong { color: var(--dcf-sky); font-weight: 700; }
.dcf .shot { margin: 0; border: 2px solid var(--color-field-rule); background: var(--navy-deep); position: relative; }
.dcf .shot::before { content: none; }
.dcf .shot__chrome { display: flex; align-items: center; gap: 14px; padding: 14px 14px 10px; border-block-end: 2px solid var(--color-field-rule); background: var(--navy); }
.dcf .shot__dots { display: flex; gap: 6px; }
.dcf .shot__dots span { width: 10px; height: 10px; background: rgba(240, 240, 232, 0.35); }
.dcf .shot__url { flex: 1; min-width: 0; padding: 4px 12px; font-size: 16px; color: var(--color-on-field-secondary); background: var(--navy-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcf .shot__stage {
  aspect-ratio: 16 / 10; display: grid; place-items: center; text-align: center;
  margin: 14px; border: 2px dashed var(--dcf-teal);
  background: repeating-linear-gradient(135deg, transparent 0 22px, rgba(0, 148, 193, 0.07) 22px 44px);
}
.dcf .shot__label { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1rem + 0.5vw, 24px); color: var(--white); padding: 12px; }
.dcf .shot__label small { display: block; margin-block-start: 6px; font-family: var(--font-body); font-weight: 500; font-size: 16px; color: var(--color-on-field-secondary); }
.dcf .shot figcaption { padding: 0 14px 14px; font-size: 16px; color: var(--color-on-field-secondary); }
.dcf .guided { padding-block-start: var(--space-group); border-block-start: 1px solid var(--color-field-rule); color: var(--color-on-field-secondary); }
.dcf .guided strong { color: var(--white); font-weight: 600; }
.dcf .more a { display: inline-flex; align-items: center; min-height: 44px; color: var(--dcf-teal); font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.dcf .platform__list { margin-block-start: var(--space-block); padding-block-start: var(--space-group); border-block-start: 3px solid var(--dcf-teal); }
.dcf .platform__list h3 { font-size: 22px; margin-block-end: var(--space-group); }
.dcf .platform__list .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-in) var(--space-block); }

/* ---------- How to apply ---------- */
.dcf .split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-block) var(--col-gap); align-items: start; }
.dcf .areas { list-style: none; margin-block-start: var(--space-block); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); }
.dcf .areas li { display: grid; grid-template-columns: 18px 1fr; gap: 16px; padding-block: 20px; border-block-start: 1px solid var(--color-rule); }
.dcf .areas .square { margin-block-start: 8px; }
.dcf .areas strong { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.3; color: var(--ink); }
.dcf .areas .desc { color: var(--color-text-secondary); font-size: 18px; }
.dcf .foundations { margin-block-start: var(--space-block); font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 1.1rem + 0.8vw, 30px); line-height: 1.3; max-width: 40ch; color: var(--ink); }

/* ---------- How to apply: 1-2-3 steps (CHECK-style) ---------- */
.dcf .how-steps {
  list-style: none;
  margin: var(--space-block) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-group) var(--col-gap);
  max-width: 1100px;
}
.dcf .how-steps li {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 12px;
  padding: 24px;
  background: var(--color-bg-raised);
  border-block-start: 4px solid var(--dcf-teal);
}
.dcf .how-steps .stepno {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  color: #ffffff; background: var(--dcf-teal);
}
.dcf .how-steps h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 1rem + 0.5vw, 24px); line-height: 1.25; color: var(--ink);
  margin: 0;
}
.dcf .how-steps p {
  margin: 0; color: var(--color-text-secondary); font-size: 17px; line-height: 1.5;
}
.dcf .how-ack {
  margin-block-start: var(--space-group);
  max-width: 70ch;
  font-size: 17px; line-height: 1.55; color: var(--color-text-secondary);
}
.dcf .how-ack strong { color: var(--ink); font-weight: 600; }
.dcf .apply-lede { max-width: 70ch; margin-block-end: 0; }
@media (max-width: 860px) {
  .dcf .how-steps { grid-template-columns: 1fr; }
}


/* ---------- Dates (white band) ---------- */
.dcf .timeline { list-style: none; margin-block-start: var(--space-block); border-block-start: 3px solid var(--navy); }
.dcf .timeline li {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-in) var(--space-block);
  padding-block: 22px; border-block-end: 1px solid var(--color-rule);
}
.dcf .timeline .when { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 1.1rem + 0.6vw, 28px); line-height: 1.2; color: var(--navy); font-variant-numeric: tabular-nums; }
.dcf .timeline .what { color: var(--color-text-secondary); font-size: 18px; align-self: center; }
.dcf .timeline .what strong { color: var(--ink); font-weight: 600; }
.dcf .timeline li.kick {
  background: var(--accent-cta); border: 0; padding-inline: 24px; margin-inline: -24px;
  clip-path: none;
}
.dcf .timeline li.kick .when, .dcf .timeline li.kick .what, .dcf .timeline li.kick .what strong { color: #ffffff; }

.dcf .notice {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-in) 14px;
  margin-block-start: var(--space-block); padding: 20px 24px;
  background: var(--color-bg-page); border-inline-start: 6px solid var(--dcf-teal);
  font-size: 17px; line-height: 1.6; color: var(--color-text-secondary); max-width: 72ch;
}
.dcf .notice .square { margin-block-start: 7px; }
.dcf .notice strong { color: var(--ink); font-weight: 600; }

/* ---------- Who should apply ---------- */
.dcf .who .row { margin-block-start: var(--space-block); align-items: start; }
.dcf .who h3 { font-size: 24px; }
.dcf .who .checklist li { font-size: 19px; }
.dcf .who .commit { color: var(--color-text-secondary); }
.dcf .roles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-group) var(--col-gap); margin-block-start: var(--space-block); }
.dcf .roles__title { grid-column: 1 / -1; font-size: 24px; }
.dcf .role { padding: 24px; background: var(--color-bg-raised); border-block-start: 4px solid var(--color-marker); }
.dcf .role p { color: var(--color-text-secondary); }
.dcf .role strong { display: block; margin-block-end: 8px; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--ink); }

/* ---------- FAQ ---------- */
.dcf .faq { padding-block-start: 0; }
.dcf .faq__list { margin-block-start: var(--space-block); border-block-start: 3px solid var(--color-rule-strong); max-width: 920px; }
.dcf .faq details { border-block-end: 1px solid var(--color-rule); }
.dcf .faq summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr 44px; gap: 16px; align-items: center;
  min-height: 64px; padding-block: 16px;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 1rem + 0.4vw, 22px); line-height: 1.3;
}
.dcf .faq summary::-webkit-details-marker { display: none; }
.dcf .faq .pm { position: relative; width: 44px; height: 44px; border: 2px solid var(--color-marker); }
.dcf .faq .pm::before, .dcf .faq .pm::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  width: 16px; height: 2px; background: var(--ink); translate: -50% -50%;
  transition: rotate 240ms var(--ease-out);
}
.dcf .faq .pm::after { rotate: 90deg; }
.dcf .faq details[open] .pm::after { rotate: 0deg; }
.dcf .faq details[open] .pm { background: var(--accent-cta); border-color: var(--accent-cta); color: #ffffff; }
.dcf .faq details[open] .pm::before, .dcf .faq details[open] .pm::after { background: var(--navy); }
@media (hover: hover) { .dcf .faq summary:hover { text-decoration: underline; text-decoration-thickness: 2px; } }
.dcf .faq .answer { padding-block-end: 24px; padding-inline-end: 60px; max-width: 70ch; color: var(--color-text-secondary); }

/* ---------- Bottom CTA (lime panel on cream) ---------- */
.dcf .final { padding-block: 0 var(--space-section); }
.dcf .final__panel {
  background: var(--lime); color: var(--ink);
  padding: clamp(32px, 5vw, 72px);
  clip-path: none;
}
.dcf .final__panel .h2 { color: var(--ink); max-width: 18ch; font-size: clamp(34px, 2.2rem + 1.8vw, 64px); }
.dcf .final__panel p { margin-block-start: var(--space-group); font-size: 20px; max-width: 52ch; font-weight: 500; }
.dcf .final__note { margin-block-start: var(--space-group); color: var(--color-text-secondary); font-size: 17px; max-width: 70ch; }

/* ---------- Footer (plate, color logos) ---------- */
.dcf .foot { background: var(--plate); color: var(--ink); padding-block: 56px 64px; border-block-start: 1px solid var(--color-rule); }
.dcf .foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-group) var(--space-block); }
.dcf .foot__contact { margin-block-start: var(--space-group); padding-block-start: var(--space-group); border-block-start: 1px solid var(--color-rule); font-size: 16px; color: var(--color-text-secondary); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  /* P1: ease leftover .field diagonal cut on tablet widths */
  .dcf .field { clip-path: none; margin-block: 0; padding-block: var(--space-section); }
  .dcf .hero__grid, .dcf .split, .dcf .platform__grid { grid-template-columns: minmax(0, 1fr); }
  /* v9: keep .row 2-col until 900px so "Capacity built to last" stays side-by-side */
  .dcf .hero__photo { aspect-ratio: 16 / 10; max-height: none; box-shadow: -10px -10px 0 0 #0094c1; margin-inline-start: 10px; margin-block-start: 10px; margin-inline-end: 0; }
  .dcf .hero__visual { grid-template-rows: auto auto; height: auto; }
  .dcf .chips { width: calc(100% - 12px); }
  .dcf .manifest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dcf .manifest li:nth-child(3n+2), .dcf .manifest li:nth-child(3n) { padding-inline-start: 0; border-inline-start: 0; }
  .dcf .manifest li:nth-child(2n) { padding-inline-start: 28px; border-inline-start: 1px solid var(--color-rule); }
  .dcf .manifest li.final { border-inline-start: 0; padding-inline-start: 32px; }
}
@media (max-width: 720px) {
  .dcf { --logo-h: 54px; }
  .dcf { font-size: 17px; }
  .dcf .bar__meta { display: none; }
  .dcf .hero__photo { aspect-ratio: 4 / 3; box-shadow: -8px -8px 0 0 #0094c1; margin-inline-start: 8px; margin-block-start: 8px; margin-inline-end: 0; }
  .dcf .chips { margin-block-start: 4px; width: calc(100% - 8px); grid-template-columns: 1fr; }
  .dcf .platform__list .checklist, .dcf .roles { grid-template-columns: minmax(0, 1fr); }
  .dcf .shot__stage { margin: 10px; }
  .dcf .manifest, .dcf .areas { grid-template-columns: minmax(0, 1fr); }
  .dcf .manifest li, .dcf .manifest li:nth-child(2n) { padding: 24px 0 28px; border-inline-start: 0; }
  /* P0 Critiquito: square cards on phone - no fixed-px polygon cuts */
  .dcf .timeline li.kick, .dcf .manifest li.final, .dcf .final__panel, .dcf .receive .cta {
    clip-path: none;
  }
  .dcf .timeline li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dcf .timeline li.kick {
    border-inline-end: 6px solid var(--navy);
    padding-inline: 16px;
    margin-inline: 0; /* stop negative bleed */
    gap: 8px;
  }
  .dcf .manifest li.final {
    padding: 24px 20px;
  }
  .dcf .final__panel {
    padding: 28px 20px 32px;
  }
  .dcf .receive .cta {
    padding: 24px 20px;
  }
  .dcf .notice { padding: 16px 18px; }
  .dcf .faq .answer { padding-inline-end: 0; }
  .dcf .btn { width: 100%; }
  .dcf .btn--lime { box-shadow: 4px 4px 0 0 var(--navy); }
}
@media (max-width: 400px) {
  .dcf { --logo-h: 46px; }
  .dcf .logos { gap: 12px; }
  .dcf .logos__x { font-size: 18px; }
}


/* === Legacy + mockup rhythm: navy hero first, alternating section--navy / section--cream === */
.dcf .hero, .dcf .section--navy { background: #1B2A41; color: #fff; }
.dcf .section--cream { background: #ffffff; color: #14181F; }
.dcf .btn--lime { background: #0094c1; color: #ffffff; }
.dcf .badge-cf { border-color: rgba(255,255,255,.85); color: #ffffff; }

.dcf .hero {
  background: var(--navy) !important;
  color: var(--white);
  position: relative;
}
.dcf .hero h1 { color: var(--white); }
.dcf .hero .hl { color: #ffffff; background-color: #0094c1; background-image: none; }
.dcf .hero__sub, .dcf .hero .bar__meta, .dcf .hero .hold { color: var(--color-on-field-secondary); }
.dcf .hero__line { color: var(--dcf-sky); }
.dcf .hero .hold strong { color: var(--white); }
.dcf .hero .hold a { color: rgba(240,240,232,0.86); }
.dcf .hero .logos__x { color: rgba(240,240,232,0.55); }
.dcf .hero .bar { border-block-end-color: var(--color-field-rule); }
.dcf .hero .chip {
  background: var(--navy-deep);
  border-color: var(--color-field-rule);
  color: var(--white);
}
.dcf .hero .chip .square { background: var(--dcf-sky); }
.dcf .hero .chip--lead {
  background: var(--accent-cta);
  border-color: transparent;
  color: #ffffff;
}
.dcf .hero .chip--lead .square { background: #ffffff; }

/* cream sections */
.dcf .section--cream, .dcf .plain.section--cream {
  background: var(--cream) !important;
  color: var(--ink);
  position: relative;
}

/* navy sections (why / platform / dates / final) */
.dcf .section--navy, .dcf .field.section--navy {
  background: var(--navy) !important;
  color: var(--white);
  position: relative;
}
.dcf .section--navy .h2 { color: var(--white); }
.dcf .section--navy.why .h2 { color: var(--dcf-sky); }
.dcf .section--navy .body p, .dcf .section--navy .big + p, .dcf .section--navy .timeline .what {
  color: var(--color-on-field-secondary);
}
.dcf .section--navy .big { color: var(--white); }
.dcf .section--navy .timeline { border-block-start-color: var(--dcf-sky); }
.dcf .section--navy .timeline li { border-block-end-color: var(--color-field-rule); }
.dcf .section--navy .timeline .when { color: var(--dcf-sky); }
.dcf .section--navy .timeline .what strong { color: var(--white); }
.dcf .section--navy .notice {
  background: rgba(247,244,236,0.06);
  color: var(--color-on-field-secondary);
}
.dcf .section--navy .notice strong { color: var(--white); }
.dcf .section--navy .square { background: var(--dcf-sky); }

/* diagonal transitions */
.dcf { --slant: clamp(40px, 5vw, 72px); }
.dcf .hero::after, .dcf .section--cream::after, .dcf .section--navy::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: var(--slant);
  z-index: 2;
  pointer-events: none;
}
/* navy closes into cream */
.dcf .hero::after, .dcf .section--navy::after {
  background: var(--cream);
  clip-path: none;
}
/* cream closes into navy */
.dcf .section--cream::after {
  background: var(--navy);
  clip-path: none;
}
.dcf .final.section--navy::after { display: none; }

.dcf .faq.section--cream::after { background: var(--navy); } /* into final navy */

/* Mobile-safe section joins (~390px phones): flatten navy<->cream diagonals to
   horizontal butts so clip-path wedges / --cut / --slant don't gap, overlap,
   jagged-edge, or overflow. Desktop diagonals unchanged. Alternating colors kept. */
@media (max-width: 768px) {
  .dcf {
    --cut: 0px;
    --slant: 0px;
  }
  /* Remove hero lime slash + cream fill and section slant wedges */
  .dcf .hero::before, .dcf .hero::after, .dcf .section--cream::after, .dcf .section--navy::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
    clip-path: none !important;
  }
  /* Navy .field bands: drop diagonal clip + pull-up margin that fights neighbors */
  .dcf .field {
    clip-path: none;
    margin-block: 0;
    padding-block: var(--space-section);
  }
  /* Belt-and-suspenders: no horizontal overflow from any residual slant */
  html, .dcf {
    overflow-x: clip;
    max-width: 100%;
  }
}


.dcf .final.section--navy { background: #1B2A41 !important; padding-block: var(--space-section); }
.dcf .final__panel {
  background: var(--accent-cta) !important;
  color: #ffffff !important;
}
.dcf .final__panel .h2, .dcf .final__panel p { color: #ffffff !important; }
.dcf .final__note { color: var(--color-on-field-secondary); }

.dcf .foot { background: var(--cream); color: var(--ink); }

/* benefits CTA strip on cream */
.dcf .receive .cta {
  margin-block-start: var(--space-block);
  padding: 28px 32px;
  background: var(--navy);
  clip-path: none;
}
.dcf .receive .cta .btn--navy {
  background: var(--accent-cta);
  color: #ffffff;
  border-color: var(--accent-cta);
}

/* P0 Critiquito cascade guard: .receive .cta desktop clip-path is defined ABOVE.
   Re-assert square cards / CTA at <=768 so mobile wins. Section joins flat above.
   P1: .field { clip-path: none } already in 768 joins block. */
@media (max-width: 768px) {
  .dcf .timeline li.kick, .dcf .manifest li.final, .dcf .final__panel, .dcf .receive .cta {
    clip-path: none !important;
  }
  .dcf .timeline li.kick {
    margin-inline: 0;
    padding-inline: 16px;
    border-inline-end: 6px solid var(--navy);
    gap: 8px;
  }
  .dcf .manifest li.final { padding: 24px 20px; }
  .dcf .final__panel { padding: 28px 20px 32px; }
  .dcf .receive .cta { padding: 24px 20px; }
}

.dcf .manifest li.final {
  background: var(--navy) !important;
  color: var(--white) !important;
}
.dcf .manifest li.final h3 { color: var(--accent-cta) !important; }
.dcf .manifest li.final p { color: rgba(247,244,236,0.9) !important; }
.dcf .manifest li.final .seatno {
  background: var(--accent-cta) !important;
  border-color: var(--accent-cta) !important;
  color: #ffffff !important;
}


/* v6 Opt B - Teal institutional */
.dcf .hero .badge-cf { border-color: rgba(255,255,255,.85); color: #ffffff; background: transparent; }
.dcf .btn--lime { background: var(--accent-cta); color: #ffffff; box-shadow: 6px 6px 0 0 var(--dcf-slate); }
.dcf .receive .seatno { border-color: var(--dcf-teal); background: var(--accent-cta); color: #ffffff; }
.dcf .chip--lead { border-color: transparent; }
.dcf a { --link-accent: var(--dcf-teal); }
.dcf .section--navy .timeline .when { color: var(--dcf-sky); }
.dcf .section--navy.why .h2 { color: var(--dcf-sky); }
.dcf .platform .name strong { color: var(--dcf-sky); }
.dcf .platform__list { border-block-start-color: var(--dcf-teal); }
.dcf .shot::before { content: none; }
.dcf .more a { color: var(--dcf-teal); }
.dcf .faq details[open] .pm { background: var(--accent-cta); border-color: var(--accent-cta); color: #ffffff; }
.dcf .bar__meta { color: rgba(240,240,232,0.72); }

/* === v7 transition kill-switch (Melissa QA) === */
.dcf .field, .dcf .field::before, .dcf .field::after, .dcf .section--navy, .dcf .section--cream, .dcf .hero, .dcf .final, .dcf .platform, .dcf .why, .dcf .dates, .dcf .on-field, .dcf .on-field::before, .dcf .on-field::after {
  clip-path: none !important;
  --cut: 0px !important;
}
.dcf .field { margin-block: 0 !important; }
.dcf .hero, .dcf .section--navy, .dcf .final.section--navy, .dcf .field.section--navy {
  background: #1B2A41 !important;
}


/* === v8 Critiquito P0 / S1-feed-v6 alignment === */
.dcf .hero .btn--lime, .dcf .btn--lime {
  background: #0094c1 !important;
  color: #ffffff !important;
  box-shadow: 6px 6px 0 0 #121F30;
}
@media (hover: hover) {
  .dcf .btn--lime:hover { box-shadow: 3px 3px 0 0 #121F30; }
}
.dcf .photo::before, .dcf .shot::before { content: none !important; }
.dcf .kicker { display: none !important; transform: none !important; }
.dcf .badge-cf { transform: none !important; }
.dcf .logos { flex-direction: row !important; }
.dcf .logo--tapp { overflow: visible !important; }
/* no skew anywhere */
.dcf .hero .badge-cf, .dcf .badge-cf__sq { transform: none !important; }
.dcf .final.section--navy, .dcf .hero, .dcf .section--navy {
  background: #1B2A41 !important;
}

/* === v9 Melissa QA: CTA label vertical center === */
.dcf .btn, .dcf .btn--lime, .dcf .btn--navy, .dcf .receive .cta .btn, .dcf .receive .cta .btn--navy, .dcf .hero .btn--lime {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-block: 14px !important;
  padding-inline: 26px !important;
  min-height: 56px;
  line-height: 1.2 !important;
  box-sizing: border-box;
}
.dcf .btn__arrow, .dcf .btn svg {
  align-self: center !important;
  display: block;
  flex: none;
}

/* === v9: side-by-side rows collapse only <=900px === */
@media (max-width: 900px) {
  .dcf .row { grid-template-columns: minmax(0, 1fr); }
}
/* Kill ghost ::after grid items (section slant leftovers / universal) that steal col 1 */
.dcf .row::before, .dcf .row::after { content: none !important; display: none !important; }
/* Desktop: text LEFT, photo RIGHT - DOM order (text then photo); no order games */
.dcf .row > .row__text { order: 0; }
.dcf .row > .photo { order: 0; }
.dcf .platform__shot {
  margin: 0;
  background: var(--navy);
  box-shadow: -12px -12px 0 0 #0094c1;
  margin-inline-start: 12px;
  margin-block-start: 12px;
  border: 0;
}
.dcf .platform__shot img {
  width: 100%; height: auto; display: block;
  object-fit: cover; object-position: top center;
}

/* === v10 Melissa QA: spacing, heads, FAQ, roles, WCAG hl === */

/* E) Teal highlights: white on solid teal (AA large text only >=24px / >=18.66px bold) */
.dcf .hl, .dcf .h2 .accent, .dcf .foundations .accent, .dcf .hero h1 .hl, .dcf .hero .hl {
  display: inline;
  color: #ffffff !important;
  background-color: #0094c1 !important;
  background-image: none !important;
  padding: 0.06em 0.15em;
  margin: 0;
  line-height: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* A/F) Heading measure + alignment */
.dcf .h2 {
  max-width: min(24ch, 100%);
  margin-block-end: var(--space-group);
}
.dcf .row__text .h2, .dcf .platform .h2, .dcf .why .h2, .dcf .head-block .h2 {
  max-width: min(24ch, 100%);
  text-align: start;
  margin-inline: 0;
}
.dcf #receive > .wrap > .h2, .dcf #dates > .wrap > .h2, .dcf #faq > .wrap > .h2, .dcf #who > .wrap > .h2, .dcf .final__panel .h2 {
  text-align: center;
  margin-inline: auto;
  max-width: min(28ch, 100%);
}
.dcf #receive > .wrap > .h2 { max-width: min(34ch, 100%); }
.dcf #faq > .wrap > .h2 { max-width: min(22ch, 100%); }
.dcf .final__panel .h2 { max-width: min(22ch, 100%); }
.dcf #apply .split > .h2 {
  max-width: min(16ch, 100%);
  text-align: start;
}
.dcf .roles__title, .dcf .platform__list h3, .dcf .who h3, .dcf .manifest h3 {
  text-align: start;
  margin-inline: 0;
  max-width: none;
}
.dcf .plain, .dcf .field, .dcf .final.section--navy {
  padding-block: var(--space-section);
}
.dcf .readiness { padding-block-start: var(--space-section); }

/* C) Kill leftover navy/cream transition bars (navy strip above FAQ) */
.dcf .hero::before, .dcf .hero::after, .dcf .section--cream::after, .dcf .section--navy::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
}
.dcf #dates { padding-block-end: calc(var(--space-section) + 12px); }
.dcf #who.section--cream {
  padding-block: var(--space-section);
  background: var(--cream) !important;
}
.dcf .faq, .dcf #faq.plain.faq {
  padding-block-start: calc(var(--space-section) + 36px);
  padding-block-end: var(--space-section);
}
.dcf #faq.plain.faq {
  border-block-start: 1px solid rgba(20, 24, 31, 0.08);
}

/* D) Role logos beside names */
.dcf .role__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: 10px;
  min-height: 36px;
}
.dcf .role__logo {
  display: block;
  flex: none;
  width: auto;
  object-fit: contain;
  object-position: left center;
}
.dcf .role__logo--dcf { height: 32px; }
.dcf .role__logo--tapp { height: 28px; }
.dcf .role .role__head strong {
  display: block;
  margin-block-end: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
}
.dcf .role > p { color: var(--color-text-secondary); }
@media (min-width: 901px) {
  .dcf .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}
.dcf .more a { color: #77b7d7; }


/* === v11 Melissa QA: CTA vertical center + flatten final + kill strips === */

/* True vertical centering on ALL CTAs (fixed height beats padding asymmetry) */
.dcf .btn, .dcf .btn--lime, .dcf .btn--navy, .dcf .receive .cta .btn, .dcf .receive .cta .btn--navy, .dcf .receive .cta .btn--lime, .dcf .hero .btn--lime, .dcf .final .btn, .dcf .final .btn--lime, .dcf .final__panel .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 26px !important;
  padding-block: 0 !important;
  padding-inline: 26px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
.dcf .btn, .dcf .btn--lime, .dcf .btn--navy, .dcf .receive .cta .btn, .dcf .hero .btn--lime, .dcf .final .btn, .dcf .final__panel .btn {
  font-family: var(--font-display), "IBM Plex Sans", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 0 !important;
}
.dcf .btn__label {
  line-height: 1 !important;
  display: inline-block;
  /* IBM Plex optical: ink sits ~1px high in flex mid; nudge down */
  transform: translateY(1px);
  margin: 0;
  padding: 0;
  font: inherit !important;
}
.dcf .btn__arrow, .dcf .btn svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  flex: none !important;
  align-self: center !important;
  margin: 0 !important;
  vertical-align: middle;
  /* keep arrow optically with nudged label */
  transform: translateY(1px);
}

/* Flatten final CTA to S1-style full navy (no teal plate) */
.dcf .final.section--navy {
  background: #1B2A41 !important;
  padding-block: var(--space-section);
}
.dcf .final__panel {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  padding: 0 !important;
  clip-path: none !important;
  text-align: center;
}
.dcf .final__panel .h2 {
  color: #ffffff !important;
  text-align: center;
  margin-inline: auto;
  max-width: min(22ch, 100%);
}
.dcf .final__panel p {
  color: rgba(247, 244, 236, 0.88) !important;
  margin-inline: auto;
  max-width: 52ch;
  text-align: center;
}
.dcf .final__panel .cta {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  flex-wrap: wrap;
  margin-inline: auto;
}
.dcf .final__panel .btn--lime, .dcf .final .btn--lime {
  background: #0094c1 !important;
  color: #ffffff !important;
  box-shadow: 6px 6px 0 0 #121F30 !important;
}
.dcf .final__note {
  color: rgba(247, 244, 236, 0.72) !important;
  text-align: center;
  margin-inline: auto;
  max-width: 70ch;
  margin-block-start: var(--space-group);
}

/* Receive CTA band: navy + teal button, centered for consistency */
.dcf .receive .cta {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  margin-block-start: var(--space-block);
  padding: 28px 32px;
  background: #1B2A41 !important;
  clip-path: none !important;
}
.dcf .receive .cta .btn--navy, .dcf .receive .cta .btn {
  background: #0094c1 !important;
  color: #ffffff !important;
  border-color: #0094c1 !important;
  box-shadow: 6px 6px 0 0 #121F30 !important;
}

/* Kill ALL leftover thin transition / stripe bars between sections */
.dcf .hero::before, .dcf .hero::after, .dcf .section--cream::before, .dcf .section--cream::after, .dcf .section--navy::before, .dcf .section--navy::after, .dcf .final::before, .dcf .final::after, .dcf .field::before, .dcf .field::after, .dcf .plain::before, .dcf .plain::after, .dcf .faq::before, .dcf .faq::after, .dcf #faq::before, .dcf #faq::after, .dcf #dates::before, .dcf #dates::after, .dcf #who::before, .dcf #who::after, .dcf .receive::before, .dcf .receive::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  background: none !important;
  border: 0 !important;
}
.dcf {
  --stripe: 0px;
  --cut: 0px;
  --slant: 0px;
}

@media (max-width: 720px) {
  .dcf .final__panel { padding: 0 !important; }
  .dcf .receive .cta { padding: 24px 20px; }
  .dcf .btn, .dcf .btn--lime, .dcf .btn--navy { width: 100%; max-height: none !important; }
}



/* === v12 Melissa QA: center readiness/why zig-zag + FAQ list === */
/*
  Diagnosis @1440:
  A) #readiness/.why .wrap.row left-biased: HubSpot/Bootstrap .row { margin-left/right: -15px }
     overrides .wrap { margin-inline: auto } -> insets -15 / 159 (hero/receive/final stay 72/72).
  B) #faq .wrap centered (72/72) but .faq__list max-width 920 with no margin-inline:auto
     -> list insets 144 / 376 while centered h2 is 520/520.
*/
/* Kill HubSpot .row negative gutters on our combined wrap+row containers */
.dcf .wrap.row, .dcf #readiness .wrap.row, .dcf .why .wrap.row {
  margin-inline: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
  max-width: var(--max);
  box-sizing: border-box;
}
/* Visual balance: keep zig-zag content in the middle like receive/hero (not full 1296 feel) */
@media (min-width: 901px) {
  .dcf #readiness .wrap.row, .dcf .why .wrap.row {
    max-width: min(1120px, 100%);
  }
}
/* FAQ accordion stack under centered title (keep question text start-aligned) */
.dcf #faq .faq__list {
  margin-inline: auto;
  width: 100%;
  max-width: 920px;
}
.dcf #faq .wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

} /* @layer marketing */