/* =========================================================================
   Custom App Development — page redesign (Packet CA-R1)
   Self-contained, page-scoped (.cad-*). Re-skinned to the Midnight Operator
   palette (navy #0A1A3F + electric lime #E8B400) with Anybody display.
   Does NOT touch the shared ca-*.css primitives (used by custom-websites.html).
   ========================================================================= */

:root {
  --cad-display:    "Anybody", "Inter Tight", var(--font-display);
  --cad-surface:    #0A1A3F;
  --cad-surface-2:  #0E2150;
  --cad-card:       #122348;
  --cad-card-2:     #16294F;
  --cad-line:       rgba(255, 255, 255, 0.10);
  --cad-line-soft:  rgba(255, 255, 255, 0.07);
  --cad-fg:         #F8F9FB;
  --cad-fg-soft:    rgba(255, 255, 255, 0.78);
  --cad-fg-mute:    rgba(255, 255, 255, 0.55);
}

/* ---- Section rhythm ----------------------------------------------------- */
.cad-section { position: relative; isolation: isolate; background: var(--cad-surface); color: var(--cad-fg); }
.cad-section--alt { background: var(--cad-surface-2); }
.cad-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(72px, 9vw, 120px) var(--container-pad);
}
.cad-section + .cad-section { border-top: 1px solid var(--cad-line-soft); }

/* ---- Shared text atoms -------------------------------------------------- */
.cad-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 22px 0;
  color: var(--color-accent);
  font-family: var(--font-body); font-weight: 600;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
}
.cad-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--color-accent); }
.cad-eyebrow--center { justify-content: center; }

.cad-lead {
  margin: 20px 0 0 0;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.65; color: var(--cad-fg-soft); max-width: 56ch;
}

/* ---- Buttons ------------------------------------------------------------ */
.cad-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  border: 1px solid transparent; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 220ms var(--ease-out-soft), box-shadow 220ms var(--ease-out-soft),
    background 220ms var(--ease-out-soft), color 220ms var(--ease-out-soft), border-color 220ms var(--ease-out-soft);
}
.cad-btn svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform 220ms var(--ease-out-soft); }
.cad-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.cad-btn--primary { background: var(--color-accent); color: var(--color-primary); }
.cad-btn--primary:hover { background: var(--color-accent-dark); transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(232, 180, 0, 0.42); }
.cad-btn--primary:hover svg { transform: translateX(3px); }
.cad-btn--ghost { background: transparent; color: var(--cad-fg); border-color: rgba(255, 255, 255, 0.22); }
.cad-btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }
.cad-btn--ghost:hover svg { transform: translateX(3px); }

/* ===== 1 — HERO ========================================================== */
.cad-hero { position: relative; overflow: hidden; isolation: isolate; }
.cad-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(1100px 560px at 82% 18%, rgba(232, 180, 0, 0.10), transparent 68%),
    radial-gradient(900px 520px at 6% 92%, rgba(255, 255, 255, 0.03), transparent 70%);
}
.cad-hero__inner {
  position: relative; z-index: 1;
  max-width: var(--container-max); margin: 0 auto;
  padding: clamp(120px, 13vw, 150px) var(--container-pad) 0;
}
.cad-hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center;
  gap: clamp(40px, 6vw, 80px); padding-bottom: clamp(56px, 7vw, 88px);
}
.cad-hero__title {
  margin: 0; font-family: var(--cad-display); font-weight: 800;
  font-size: clamp(42px, 6.2vw, 76px); line-height: 1.0; letter-spacing: -0.03em;
  color: var(--cad-fg); text-wrap: balance;
}
.cad-hero__subtitle {
  margin: 14px 0 0 0; font-family: var(--cad-display); font-style: italic; font-weight: 700;
  font-size: clamp(22px, 2.8vw, 34px); line-height: 1.12; letter-spacing: -0.01em; color: var(--color-accent);
}
.cad-hero__sub {
  margin: 26px 0 0 0; font-family: var(--font-body);
  font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; color: var(--cad-fg-soft); max-width: 52ch;
}
.cad-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 34px 0 0 0; }
.cad-hero__cta-sub { margin: 14px 0 0 0; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--cad-fg-mute); letter-spacing: 0.01em; }
.cad-hero__trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 22px 0 0 0;
  font-family: var(--font-body); font-size: 13px; color: var(--cad-fg-mute);
}
.cad-hero__trust::before { content: ""; width: 26px; height: 1px; background: var(--cad-line); }
.cad-hero__trust strong { color: var(--cad-fg); font-weight: 600; }

.cad-hero__visual {
  position: relative; aspect-ratio: 5 / 6; border-radius: 24px; border: 1px solid var(--cad-line);
  background:
    radial-gradient(120% 90% at 78% 14%, rgba(232, 180, 0, 0.18), transparent 60%),
    linear-gradient(155deg, #15306b 0%, #0b1c43 55%, #071230 100%);
  overflow: hidden; box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.85);
}
.cad-hero__visual::before {
  content: ""; position: absolute; inset: 0; opacity: 0.6;
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 100% at 30% 70%, #000 35%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 30% 70%, #000 35%, transparent 78%);
}
/* Service photo fills the framed visual box (mirrors .wwd-card__media on services.html) */
.cad-hero__img {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: scale(1.02); transform-origin: center;
  transition: transform 700ms var(--ease-out-soft);
}
.cad-hero__visual:hover .cad-hero__img { transform: scale(1.06); }
/* Navy duotone scrim — brand cohesion + keeps the chip legible (UI-UX §1 contrast) */
.cad-hero__visual::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(150deg, rgba(7, 18, 48, 0.12) 0%, rgba(7, 18, 48, 0.30) 48%, rgba(7, 18, 48, 0.80) 100%),
    radial-gradient(120% 90% at 50% 0%, rgba(232, 180, 0, 0.12), transparent 55%);
}
.cad-hero__orb {
  position: absolute; z-index: 2; width: 60%; aspect-ratio: 1; top: -16%; right: -12%; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 180, 0, 0.30), rgba(232, 180, 0, 0) 66%);
  filter: blur(8px); mix-blend-mode: screen; pointer-events: none;
}
.cad-hero__chip {
  position: absolute; z-index: 4; left: 26px; bottom: 26px;
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 999px;
  background: rgba(8, 18, 44, 0.82); border: 1px solid rgba(232, 180, 0, 0.30);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.9);
  font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--cad-fg); letter-spacing: 0.01em;
}
.cad-hero__chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px rgba(232, 180, 0, 0.18); }
.cad-hero__bracket { position: absolute; z-index: 4; width: 34px; height: 34px; border: 2px solid rgba(232, 180, 0, 0.8); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)); }
.cad-hero__bracket--tl { top: 22px; left: 22px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.cad-hero__bracket--br { right: 22px; top: 22px; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }

.cad-hero__stats { position: relative; z-index: 1; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.cad-hero__stats-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
  padding: 38px 0; border-top: 1px solid var(--cad-line); border-bottom: 1px solid var(--cad-line);
}
.cad-stat { position: relative; padding: 0 8px; }
.cad-stat + .cad-stat::before { content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 1px; background: var(--cad-line-soft); }
.cad-stat__num { display: block; font-family: var(--cad-display); font-weight: 800; font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: -0.02em; color: var(--cad-fg); }
.cad-stat__num em { font-style: normal; color: var(--color-accent); }
.cad-stat__label { display: block; margin-top: 8px; font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: var(--cad-fg-mute); max-width: 22ch; }

/* ===== 2 — POSITIONING STATEMENT ======================================== */
/* Rich-gold feature band — dark-on-gold inversion (no white text) */
.cad-manifesto { background: var(--color-band); background: var(--gold-band); color: var(--color-ink); }
.cad-section + .cad-manifesto,
.cad-manifesto + .cad-section { border-top-color: rgba(15, 20, 25, 0.12); }
.cad-manifesto .cad-inner { max-width: 1000px; text-align: center; }
.cad-manifesto__rule { width: 56px; height: 3px; margin: 0 auto 30px; border-radius: 2px; background: var(--color-ink); }
.cad-manifesto__title {
  margin: 0 auto; max-width: 16ch; font-family: var(--cad-display); font-weight: 800;
  font-size: clamp(30px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -0.025em; color: var(--color-ink); text-wrap: balance;
}
.cad-manifesto__title em { font-style: italic; color: #0A1A3F; }
.cad-manifesto__body { margin: 36px auto 0; max-width: 720px; display: flex; flex-direction: column; gap: 20px; }
.cad-manifesto__body p { margin: 0; font-family: var(--font-body); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.72; color: rgba(15, 20, 25, 0.82); }

/* ===== Split layout (sticky label + content) ============================ */
.cad-split { display: grid; grid-template-columns: 340px 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.cad-split__label { position: sticky; top: 104px; }
.cad-split__heading {
  margin: 0; font-family: var(--cad-display); font-weight: 800;
  font-size: clamp(28px, 3.4vw, 42px); line-height: 1.07; letter-spacing: -0.02em; color: var(--cad-fg); text-wrap: balance;
}
/* drop the gold "different?" marker onto its own line beneath "development",
   hugging the word instead of bleeding into the body column */
.cad-split__heading .vh-mark { display: block; width: fit-content; margin-top: 0.12em; }
.cad-split__note { margin: 22px 0 0 0; font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--cad-fg-soft); max-width: 34ch; }

/* ===== 3 — ENGAGEMENT TIERS ============================================= */
/* Elevated cards (cosmetic upgrade — copy unchanged): hover lift + lime glow,
   a dominant "most popular" tier, and one inline next-step CTA each. */
.cad-tiers__list { display: grid; gap: 18px; }
.cad-tier {
  position: relative; padding: 28px 30px;
  border: 1px solid var(--cad-line); border-radius: 18px; background: var(--cad-card);
  transition: transform 240ms var(--ease-out-soft), border-color 240ms var(--ease-out-soft), box-shadow 240ms var(--ease-out-soft);
}
.cad-tier:first-child { padding-top: 28px; border-top: 1px solid var(--cad-line); }
.cad-tier:hover { transform: translateY(-3px); border-color: rgba(232, 180, 0, 0.35); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.8); }
.cad-tier--popular {
  border-color: rgba(232, 180, 0, 0.45);
  background: linear-gradient(180deg, rgba(232, 180, 0, 0.06), var(--cad-card) 60%);
  box-shadow: 0 0 0 1px rgba(232, 180, 0, 0.18), 0 30px 60px -34px rgba(0, 0, 0, 0.85);
}
.cad-tier--popular:hover { box-shadow: 0 0 0 1px rgba(232, 180, 0, 0.3), 0 34px 64px -32px rgba(0, 0, 0, 0.9); }
.cad-tier__flag {
  position: absolute; top: -11px; right: 24px;
  font-family: var(--font-body); font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-primary); background: var(--color-accent); padding: 5px 11px; border-radius: 999px;
  box-shadow: 0 8px 18px -8px rgba(232, 180, 0, 0.6);
}
.cad-tier__cta {
  display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0 0; min-height: 44px;
  font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--color-accent); text-decoration: none;
}
.cad-tier__cta svg { width: 15px; height: 15px; flex: 0 0 auto; transition: transform 200ms var(--ease-out-soft); }
.cad-tier__cta:hover svg { transform: translateX(3px); }
.cad-tier__cta:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 6px; }
.cad-tier__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.cad-tier__name { margin: 0; font-family: var(--cad-display); font-weight: 800; font-size: clamp(21px, 2vw, 26px); letter-spacing: -0.01em; color: var(--cad-fg); }
.cad-tier__price { font-family: var(--cad-display); font-weight: 800; font-size: clamp(20px, 1.9vw, 24px); letter-spacing: -0.01em; color: var(--color-accent); }
.cad-tier__pitch { margin: 10px 0 0 0; font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--cad-fg); }
.cad-tier__body { margin: 10px 0 0 0; font-family: var(--font-body); font-size: 15.5px; line-height: 1.65; color: var(--cad-fg-soft); max-width: 64ch; }
.cad-tier__meta { margin: 16px 0 0 0; display: flex; flex-wrap: wrap; gap: 8px 10px; font-family: var(--font-body); font-size: 12.5px; }
.cad-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--cad-line); background: rgba(255, 255, 255, 0.03); color: var(--cad-fg-soft); letter-spacing: 0.01em; }
.cad-chip strong { color: var(--cad-fg); font-weight: 600; }
.cad-chip--lime { border-color: rgba(232, 180, 0, 0.32); color: var(--color-accent); }

/* ===== 4 — WHAT MAKES US DIFFERENT ====================================== */
.cad-diff__intro { margin: 0 0 28px 0; font-family: var(--font-body); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; color: var(--cad-fg-soft); max-width: 60ch; }
.cad-diff__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cad-diff__item { display: grid; grid-template-columns: 28px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--cad-line); }
.cad-diff__item:first-child { border-top: 0; }
.cad-diff__arrow { margin-top: 3px; width: 22px; height: 22px; color: var(--color-accent); }
.cad-diff__arrow svg { width: 100%; height: 100%; display: block; }
.cad-diff__lead { margin: 0; font-family: var(--cad-display); font-weight: 700; font-size: clamp(17px, 1.5vw, 20px); letter-spacing: -0.01em; color: var(--cad-fg); }
.cad-diff__text { margin: 8px 0 0 0; font-family: var(--font-body); font-size: 15.5px; line-height: 1.65; color: var(--cad-fg-soft); max-width: 64ch; }

/* ===== 3b — SERVICES / FULL RANGE (numbered, premium cards) =============
   Elevated cards that echo the .cad-tier treatment directly above (hover lift +
   gold glow, gold-stroke number that fills on hover) so the two sections share a
   visual rhythm. Single column, as in the reference design. */
.cad-services__cta { margin-top: 30px; }
.cad-services__list { display: grid; gap: 18px; }
.cad-svc {
  position: relative;
  display: grid; grid-template-columns: 56px 1fr; gap: 8px 22px; align-items: start;
  padding: 28px 30px;
  border: 1px solid var(--cad-line); border-radius: 18px; background: var(--cad-card);
  transition: transform 240ms var(--ease-out-soft), border-color 240ms var(--ease-out-soft), box-shadow 240ms var(--ease-out-soft);
}
.cad-svc:hover { transform: translateY(-3px); border-color: rgba(232, 180, 0, 0.35); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.8); }
.cad-svc__num {
  grid-row: 1 / span 2; align-self: start;
  margin: 0; font-family: var(--cad-display); font-weight: 800;
  font-size: clamp(30px, 3vw, 42px); line-height: 1; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(232, 180, 0, 0.6);
  transition: color 240ms var(--ease-out-soft);
}
.cad-svc:hover .cad-svc__num { color: rgba(232, 180, 0, 0.16); }
.cad-svc__main { grid-column: 2; }
.cad-svc__title { margin: 2px 0 0 0; font-family: var(--cad-display); font-weight: 800; font-size: clamp(20px, 1.9vw, 25px); letter-spacing: -0.01em; color: var(--cad-fg); }
.cad-svc__body { margin: 10px 0 0 0; font-family: var(--font-body); font-size: 15.5px; line-height: 1.68; color: var(--cad-fg-soft); max-width: 66ch; }
.cad-svc__deliver { margin: 16px 0 0 0; padding-top: 14px; border-top: 1px solid var(--cad-line); font-family: var(--font-body); font-size: 14.5px; line-height: 1.6; color: var(--cad-fg-mute); max-width: 66ch; }
.cad-svc__deliver strong { color: var(--color-accent); font-weight: 600; }

/* ===== 6 — STARTUP TYPES ================================================ */
.cad-type { padding: 30px 0; border-top: 1px solid var(--cad-line); transition: border-top-color 200ms var(--ease-out-soft); }
.cad-type:first-child { padding-top: 0; border-top: 0; }
.cad-type:hover { border-top-color: rgba(232, 180, 0, 0.4); }
.cad-type__name { margin: 0 0 14px 0; font-family: var(--cad-display); font-weight: 800; font-size: clamp(20px, 1.9vw, 25px); letter-spacing: -0.01em; color: var(--cad-fg); }
.cad-type__row { margin: 0 0 10px 0; font-family: var(--font-body); font-size: 15.5px; line-height: 1.65; color: var(--cad-fg-soft); max-width: 70ch; }
.cad-type__row strong { color: var(--cad-fg); font-weight: 600; }
.cad-type__row:last-child { margin-bottom: 0; }

/* ===== 7 — PRICING ====================================================== */
.cad-pricing__head { max-width: 720px; margin: 0 0 40px 0; }
.cad-pricing__panel { border: 1px solid var(--cad-line); border-radius: 22px; background: var(--cad-card); overflow: hidden; }
.cad-price { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr 1.4fr; align-items: center; gap: 18px 28px; padding: 28px 32px; border-top: 1px solid var(--cad-line); transition: background 220ms var(--ease-out-soft); }
.cad-price:first-child { border-top: 0; }
.cad-price:hover { background: var(--cad-card-2); }
.cad-price--popular { background: rgba(232, 180, 0, 0.05); box-shadow: inset 0 0 0 1px rgba(232, 180, 0, 0.18); }
.cad-price__name { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--cad-display); font-weight: 800; font-size: clamp(19px, 1.7vw, 23px); letter-spacing: -0.01em; color: var(--cad-fg); }
.cad-price__badge { font-family: var(--font-body); font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); background: var(--color-accent); padding: 4px 9px; border-radius: 999px; }
.cad-price__amount { font-family: var(--cad-display); font-weight: 800; font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -0.01em; color: var(--color-accent); }
.cad-price__amount span { display: block; font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.02em; color: var(--cad-fg-mute); }
.cad-price__desc { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--cad-fg-soft); }
.cad-pricing__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin-top: 24px; }
.cad-pricing__note { padding: 22px 24px; border: 1px solid var(--cad-line); border-radius: 16px; background: rgba(255, 255, 255, 0.02); }
.cad-pricing__note h3 { margin: 0 0 10px 0; font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.cad-pricing__note p { margin: 0; font-family: var(--font-body); font-size: 14.5px; line-height: 1.65; color: var(--cad-fg-soft); }
.cad-pricing__cta { margin: 30px 0 0 0; display: flex; justify-content: center; }

/* ===== 8 — FAQ ========================================================== */
.cad-faq__head { max-width: 760px; margin: 0 0 44px 0; }
.cad-faq__title { margin: 0; font-family: var(--cad-display); font-weight: 800; font-size: clamp(30px, 4vw, 50px); line-height: 1.04; letter-spacing: -0.025em; color: var(--cad-fg); text-wrap: balance; }
.cad-faq__title em { font-style: italic; color: var(--color-accent); }
.cad-faq__list { border-top: 1px solid var(--cad-line); }
.cad-faq__item { border-bottom: 1px solid var(--cad-line); }
.cad-faq__trigger {
  appearance: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 6px; background: transparent; border: 0; text-align: left; cursor: pointer;
  font-family: var(--cad-display); font-weight: 700; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.35; letter-spacing: -0.005em;
  color: var(--cad-fg); transition: color 200ms var(--ease-out-soft);
}
.cad-faq__trigger:hover { color: var(--color-accent); }
.cad-faq__trigger:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 6px; }
.cad-faq__chev { flex: 0 0 auto; width: 22px; height: 22px; color: var(--color-accent); transition: transform 220ms var(--ease-out-soft); }
.cad-faq__chev svg { width: 100%; height: 100%; display: block; }
.cad-faq__item.is-open .cad-faq__chev { transform: rotate(180deg); }
.cad-faq__panel { overflow: hidden; max-height: 0; transition: max-height 220ms var(--ease-out-soft); }
.cad-faq__answer { margin: 0; padding: 0 6px 28px 6px; font-family: var(--font-body); font-size: 16px; line-height: 1.68; color: var(--cad-fg-soft); max-width: 74ch; }
.cad-faq__footnote { margin: 30px 6px 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: 0.04em; color: var(--cad-fg-mute); }

/* ===== 9 — FINAL CTA (lime banner) ====================================== */
.cad-cta .cad-inner { padding-block: clamp(56px, 7vw, 88px); }
.cad-cta__card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px 40px; padding: clamp(34px, 4.5vw, 56px); border-radius: 26px; background: var(--color-accent); color: var(--color-primary); box-shadow: 0 40px 80px -42px rgba(232, 180, 0, 0.5); }
.cad-cta__title { margin: 0; font-family: var(--cad-display); font-weight: 800; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.02; letter-spacing: -0.025em; color: var(--color-primary); text-wrap: balance; }
.cad-cta__title em { font-style: italic; }
.cad-cta__sub { margin: 14px 0 0 0; font-family: var(--font-body); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: rgba(10, 26, 63, 0.78); max-width: 54ch; }
.cad-cta__btn { display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 20px; background: var(--color-primary); color: var(--color-accent); text-decoration: none; flex: 0 0 auto; transition: transform 240ms var(--ease-out-soft), box-shadow 240ms var(--ease-out-soft); }
.cad-cta__btn svg { width: 30px; height: 30px; transition: transform 240ms var(--ease-out-soft); }
.cad-cta__btn:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -14px rgba(10, 26, 63, 0.6); }
.cad-cta__btn:hover svg { transform: translate(3px, -3px); }
.cad-cta__btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; }
.cad-cta__note { margin: 18px 0 0 0; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: rgba(10, 26, 63, 0.66); letter-spacing: 0.01em; }

/* ===== Scroll reveal ==================================================== */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 650ms var(--ease-out-soft), transform 650ms var(--ease-out-soft); transition-delay: var(--reveal-delay, 0ms); }
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* ===== Responsive ======================================================= */
@media (max-width: 980px) {
  .cad-hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .cad-hero__visual { max-width: 460px; }
  .cad-split { grid-template-columns: 1fr; gap: 36px; }
  .cad-split__label { position: static; }
  .cad-price { grid-template-columns: 1fr auto; }
  .cad-price__desc { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .cad-hero__stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .cad-stat + .cad-stat:nth-child(odd)::before { display: none; }
  .cad-pricing__foot { grid-template-columns: 1fr; }
  .cad-cta__card { grid-template-columns: 1fr; }
  .cad-cta__btn { width: 64px; height: 64px; }
  .cad-cta__btn svg { width: 24px; height: 24px; }
}
@media (max-width: 540px) {
  .cad-hero__inner { padding-left: 18px; padding-right: 18px; }
  .cad-hero__ctas { gap: 12px; }
  .cad-btn--primary, .cad-btn--ghost { width: 100%; }
  .cad-hero__stats-grid { grid-template-columns: 1fr; gap: 22px; }
  .cad-stat + .cad-stat::before { display: none; }
  .cad-tier__top { flex-direction: column; gap: 4px; }
  .cad-svc { grid-template-columns: 1fr; gap: 6px; padding: 24px 22px; }
  .cad-svc__num { grid-row: auto; }
  .cad-svc__main { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .cad-btn, .cad-btn svg, .cad-faq__panel, .cad-faq__chev, .cad-cta__btn, .cad-cta__btn svg, .cad-price,
  .cad-tier, .cad-tier__cta svg, .cad-svc, .cad-svc__num, .cad-type { transition: none; }
  .cad-tier:hover, .cad-svc:hover { transform: none; }
  .cad-hero__img { transition: none; transform: none; }
  .cad-hero__visual:hover .cad-hero__img { transform: none; }
}

/* ============================ READABILITY (custom-apps page only) =======================
   Body/smaller text slightly larger + higher contrast. custom-apps.css is page-scoped (loaded
   only here), so this affects no other page. Raises the page text tokens + a few sizes; the
   manifesto (navy on gold) and the testimonial grid (svc-testimonials.css loads later, so use
   higher specificity) are handled explicitly. Headings, eyebrows, and the shared footer are
   left alone. Aligns with UI-UX-PRO-MAX: base 16px body, 4.5:1 contrast.
   ===================================================================================== */
:root {
  --cad-fg-soft: rgba(255, 255, 255, 0.85);   /* was 0.78 */
  --cad-fg-mute: rgba(255, 255, 255, 0.70);   /* was 0.55 */
}
.cad-lead        { font-size: clamp(17px, 1.25vw, 19px); }
.cad-hero__sub   { font-size: clamp(17px, 1.35vw, 20px); }
.cad-diff__intro { font-size: clamp(17px, 1.2vw, 19px); }
.cad-split__note,
.cad-faq__answer { font-size: 17px; }
.cad-tier__body,
.cad-diff__text,
.cad-svc__body,
.cad-type__row   { font-size: 16.5px; }
.cad-manifesto__body p { color: rgba(15, 20, 25, 0.9); }   /* navy on gold */
.st-grid .st-card__text { color: rgba(255, 255, 255, 0.86); }
.st-grid .st-card__role { color: rgba(255, 255, 255, 0.66); }

/* ===== 5 — CUSTOM BUILD (single offer; replaces the old numbered services) ====
   One focused custom-app offer instead of a 5-item menu. Reuses the sticky-label
   .cad-split layout (matches Sections 4 & 6), the shared reveal system, .cad-btn,
   .vh-mark, and the --cad-* tokens. Page-scoped; touches no other page.
   ============================================================================== */
.cad-build__main { display: flex; flex-direction: column; gap: clamp(28px, 3.5vw, 40px); }

/* Offer panel — navy elevated card with a soft gold corner glow (echoes the hero visual) */
.cad-build__panel {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid var(--cad-line); border-radius: 22px;
  background:
    radial-gradient(120% 150% at 92% 0%, rgba(232, 180, 0, 0.10), transparent 55%),
    var(--cad-card);
  box-shadow: 0 30px 64px -38px rgba(0, 0, 0, 0.85);
}
.cad-build__panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(120% 120% at 90% 0%, #000 18%, transparent 62%);
  mask-image: radial-gradient(120% 120% at 90% 0%, #000 18%, transparent 62%);
}
.cad-build__kicker {
  margin: 0; font-family: var(--font-body); font-weight: 600;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent);
}
.cad-build__statement {
  margin: 16px 0 0 0; font-family: var(--cad-display); font-weight: 800;
  font-size: clamp(27px, 3.3vw, 42px); line-height: 1.06; letter-spacing: -0.02em;
  color: var(--cad-fg); text-wrap: balance;
}
.cad-build__statement em { font-style: italic; color: var(--color-accent); }
.cad-build__support {
  margin: 20px 0 0 0; font-family: var(--font-body);
  font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.72; color: var(--cad-fg-soft); max-width: 60ch;
}

/* Inclusions — everything in ONE build (not a menu of options) */
.cad-build__incl-label {
  margin: 0; font-family: var(--font-body); font-weight: 600;
  font-size: clamp(16px, 1.15vw, 17px); line-height: 1.6; color: var(--cad-fg); max-width: 60ch;
}
.cad-build__incl {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 30px;
}
.cad-build__item { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; }
.cad-build__check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-top: 1px; flex: 0 0 auto; border-radius: 999px;
  color: var(--color-accent); background: rgba(232, 180, 0, 0.12);
  box-shadow: inset 0 0 0 1px rgba(232, 180, 0, 0.30);
}
.cad-build__check svg { width: 14px; height: 14px; display: block; }
.cad-build__text {
  margin: 0; font-family: var(--font-body); font-size: 15.5px; line-height: 1.6; color: var(--cad-fg-soft);
}
.cad-build__text strong { color: var(--cad-fg); font-weight: 700; }

/* CTA row */
.cad-build__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 4px; }
.cad-build__cta-note {
  margin: 0; max-width: 38ch; font-family: var(--font-body);
  font-size: 13px; line-height: 1.55; color: var(--cad-fg-mute); letter-spacing: 0.01em;
}

@media (max-width: 720px) {
  .cad-build__incl { grid-template-columns: 1fr; gap: 16px; }
  .cad-build__statement br.cad-build__br { display: none; }
}