/* =========================================================================
   Certified Team Leader — direct-response landing
   Builds on colors_and_type.css + styles.css (tokens, .btn, .wrap, .eyebrow,
   .h-sec, .lead, .faq, .section--navy/--ink/--wash).
   ========================================================================= */

/* ---------- Trust microcopy / legal clarity ---------- */
.legal-note {
  display: flex; gap: 12px; align-items: flex-start;
  border-left: 3px solid var(--lead-accent);
  background: var(--lead-accent-tint);
  padding: 14px 18px; font-size: 13.5px; line-height: 1.55; color: var(--cp-fg-2);
  max-width: 70ch;
}
.legal-note svg { width: 17px; height: 17px; color: var(--lead-accent-deep); flex-shrink: 0; margin-top: 2px; }
.section--navy .legal-note, .section--ink .legal-note { color: rgba(255,255,255,0.78); background: rgba(239,160,46,0.10); }
.legal-note strong { color: var(--lead-ink); font-weight: 700; }
.section--navy .legal-note strong, .section--ink .legal-note strong { color: #fff; }

/* ---------- Hero ---------- */
.ctl-hero { background: radial-gradient(120% 90% at 100% 0%, #053150 0%, var(--lead-navy) 58%); color: #fff; padding: 132px 0 72px; position: relative; overflow: hidden; }
.ctl-hero__grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 56px; align-items: center; }
.ctl-hero__product {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--cp-font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--lead-accent);
  border: 1px solid rgba(239,160,46,0.4); padding: 9px 16px; border-radius: 999px; margin-bottom: 26px;
}
.ctl-hero__title { font-family: var(--cp-font-display); font-weight: 900; font-size: clamp(38px, calc(5.4vw * var(--lead-scale)), 76px); line-height: 0.98; letter-spacing: -0.025em; margin: 0 0 22px; text-wrap: balance; color: #fff; }
.ctl-hero__title .accent { color: var(--lead-accent); }
.ctl-hero__sub { font-size: clamp(17px,1.4vw,20px); line-height: 1.55; color: rgba(255,255,255,0.78); max-width: 50ch; margin: 0 0 28px; }
.ctl-hero__bullets { list-style: none; padding: 0; margin: 0 0 34px; display: flex; flex-direction: column; gap: 13px; }
.ctl-hero__bullets li { display: flex; gap: 13px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: rgba(255,255,255,0.9); }
.ctl-hero__bullets svg { width: 20px; height: 20px; color: var(--lead-accent); flex-shrink: 0; margin-top: 1px; }
.ctl-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.ctl-hero__micro { font-size: 13px; color: rgba(255,255,255,0.55); }

/* System diagram */
.ctl-sys { position: relative; display: flex; align-items: center; justify-content: center; min-height: 380px; }
.ctl-sys__svg { width: 100%; max-width: 420px; }
.ctl-sys__node { fill: rgba(255,255,255,0.05); stroke: rgba(255,255,255,0.25); stroke-width: 1.5; }
.ctl-sys__hub { fill: var(--lead-accent); stroke: none; }
.ctl-sys__line { stroke: rgba(255,255,255,0.22); stroke-width: 1.5; }
.ctl-sys__lbl { font-family: var(--cp-font-body); font-size: 11px; fill: rgba(255,255,255,0.6); font-weight: 600; }
.ctl-sys__hublbl { font-family: var(--cp-font-display); font-weight: 900; font-size: 15px; fill: var(--lead-navy); }
.ctl-badge {
  position: absolute; right: -6px; bottom: 4px; background: var(--lead-navy);
  border: 1.5px solid var(--lead-accent); padding: 14px 18px; max-width: 220px; box-shadow: 0 16px 44px rgba(0,0,0,0.4);
}
.ctl-badge b { display: block; font-family: var(--cp-font-display); font-weight: 900; font-size: 12px; letter-spacing: 0.1em; color: var(--lead-accent); text-transform: uppercase; margin-bottom: 5px; }
.ctl-badge span { font-size: 12px; line-height: 1.4; color: rgba(255,255,255,0.8); }

/* ---------- Sticky CTA ---------- */
.ctl-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: rgba(4,29,48,0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(239,160,46,0.4); color: #fff;
  transform: translateY(110%); transition: transform 0.4s var(--cp-ease-out);
}
.ctl-sticky.is-on { transform: none; }
.ctl-sticky__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; }
.ctl-sticky__txt { font-family: var(--cp-font-display); font-weight: 800; font-size: 15px; letter-spacing: -0.01em; }
.ctl-sticky__txt span { display: block; font-family: var(--cp-font-body); font-weight: 500; font-size: 12.5px; color: rgba(255,255,255,0.6); letter-spacing: 0; margin-top: 2px; }
.ctl-sticky__actions { display: flex; gap: 12px; flex-shrink: 0; }

/* ---------- Signal box (problem) ---------- */
.signal { border: 1px solid var(--cp-border); background: #fff; padding: 32px 34px 34px; margin-top: 40px; }
.signal__l { font-family: var(--cp-font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lead-accent-deep); margin: 0 0 20px; }
.signal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 36px; }
.signal__row { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; color: var(--lead-ink); }
.signal__row svg { width: 18px; height: 18px; color: var(--lead-accent-deep); flex-shrink: 0; margin-top: 2px; }

/* ---------- Stacked contrast lines (problem/agitation) ---------- */
.contrast { display: flex; flex-direction: column; gap: 2px; margin: 36px 0; max-width: 60ch; }
.contrast__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.12); }
.contrast__row:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.contrast__a { text-align: right; color: rgba(255,255,255,0.55); font-size: 16px; }
.contrast__arrow { color: var(--lead-accent); }
.contrast__arrow svg { width: 20px; height: 20px; display: block; }
.contrast__b { color: #fff; font-size: 16px; font-weight: 600; }

/* ---------- Mechanism (4 steps) ---------- */
.mech { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--lead-ink); }
.mech__step { padding: 30px 26px 34px 0; border-right: 1px solid var(--cp-border); position: relative; }
.mech__step:last-child { border-right: none; padding-right: 0; }
.mech__n { display: flex; align-items: center; gap: 12px; font-family: var(--cp-font-display); font-weight: 900; font-size: 13px; color: var(--lead-accent-deep); letter-spacing: 0.06em; margin-bottom: 18px; }
.mech__n b { width: 34px; height: 34px; border: 1.5px solid var(--lead-accent); color: var(--lead-accent-deep); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.mech__n::after { content: ""; flex: 1; height: 1px; background: var(--cp-border); }
.mech__h { font-family: var(--cp-font-display); font-weight: 900; font-size: 22px; color: var(--lead-ink); margin: 0 0 10px; letter-spacing: -0.01em; }
.mech__p { font-size: 14.5px; line-height: 1.55; color: var(--cp-fg-2); margin: 0; max-width: 32ch; }

/* ---------- Module cards ---------- */
.mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--cp-border); border: 1px solid var(--cp-border); }
.modc { background: #fff; padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 14px; }
.modc__top { display: flex; align-items: baseline; gap: 12px; }
.modc__code { font-family: var(--cp-font-display); font-weight: 900; font-size: 13px; color: var(--lead-accent-deep); letter-spacing: 0.06em; }
.modc__title { font-family: var(--cp-font-display); font-weight: 800; font-size: 19px; color: var(--lead-ink); line-height: 1.15; letter-spacing: -0.01em; }
.modc__facets { display: flex; flex-direction: column; gap: 11px; margin-top: 2px; }
.modc__facet { }
.modc__facet dt { font-family: var(--cp-font-display); font-weight: 800; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lead-accent-deep); margin-bottom: 3px; }
.modc__facet dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--cp-fg-2); }
.modc__facet dd strong { color: var(--lead-ink); font-weight: 600; }

/* ---------- Portfolio ---------- */
.pf__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.pf__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid rgba(255,255,255,0.16); }
.pf__item { display: flex; gap: 13px; align-items: center; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.1); border-right: 1px solid rgba(255,255,255,0.1); font-size: 14.5px; color: rgba(255,255,255,0.9); line-height: 1.35; }
.pf__item:nth-child(2n) { border-right: none; }
.pf__item svg { width: 18px; height: 18px; color: var(--lead-accent); flex-shrink: 0; }

/* ---------- Comparison table ---------- */
.cmp { width: 100%; border-collapse: collapse; margin-top: 8px; }
.cmp th, .cmp td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--cp-border); }
.cmp thead th { font-family: var(--cp-font-display); font-weight: 800; font-size: 14px; letter-spacing: -0.01em; color: var(--cp-fg-3); border-bottom: 2px solid var(--cp-border); vertical-align: bottom; }
.cmp thead th.is-hi { color: var(--lead-ink); font-size: 16px; }
.cmp thead th.is-hi small { display: block; font-family: var(--cp-font-body); font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lead-accent-deep); margin-bottom: 6px; }
.cmp tbody th { text-align: left; font-family: var(--cp-font-body); font-weight: 600; font-size: 15px; color: var(--lead-ink); }
.cmp td.is-hi { background: var(--lead-accent-tint); }
.cmp .yes { color: var(--lead-accent-deep); }
.cmp .no { color: var(--cp-gray-400); }
.cmp svg { width: 20px; height: 20px; display: inline-block; vertical-align: middle; }
.cmp tbody tr:last-child td, .cmp tbody tr:last-child th { border-bottom: none; }
.cmp .is-hi-col { }

/* ---------- Target (2 blocks) ---------- */
.tgt { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tgt__card { border: 1px solid var(--cp-border); background: #fff; padding: 34px 34px 36px; display: flex; flex-direction: column; }
.tgt__card--biz { background: var(--lead-navy); color: #fff; border-color: var(--lead-navy); }
.tgt__tag { font-family: var(--cp-font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lead-accent-deep); margin: 0 0 16px; }
.tgt__card--biz .tgt__tag { color: var(--lead-accent); }
.tgt__h { font-family: var(--cp-font-display); font-weight: 900; font-size: 24px; letter-spacing: -0.01em; margin: 0 0 18px; color: var(--lead-ink); }
.tgt__card--biz .tgt__h { color: #fff; }
.tgt__roles { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.tgt__roles li { font-size: 13px; font-weight: 600; color: var(--cp-fg-2); border: 1px solid var(--cp-border); padding: 6px 12px; }
.tgt__card--biz .tgt__roles li { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.22); }
.tgt__benefit { font-size: 15.5px; line-height: 1.5; color: var(--cp-fg-2); margin: 0 0 24px; border-left: 3px solid var(--lead-accent); padding-left: 16px; }
.tgt__card--biz .tgt__benefit { color: rgba(255,255,255,0.82); }
.tgt__benefit strong { color: var(--lead-ink); font-weight: 700; }
.tgt__card--biz .tgt__benefit strong { color: #fff; }
.tgt__card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Outcomes ---------- */
.outc { columns: 2; column-gap: 48px; list-style: none; padding: 0; margin: 0; max-width: 1000px; }
.outc li { display: flex; gap: 13px; align-items: flex-start; break-inside: avoid; padding: 11px 0; font-size: 16px; line-height: 1.45; color: var(--cp-fg-1); border-bottom: 1px solid var(--cp-border); }
.outc li svg { width: 19px; height: 19px; color: var(--lead-accent-deep); flex-shrink: 0; margin-top: 2px; }

/* ---------- Offer cards ---------- */
.offer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.offc { border: 1px solid var(--cp-border); background: #fff; display: flex; flex-direction: column; padding: 32px 30px 34px; position: relative; }
.offc--hi { border: 2px solid var(--lead-accent); box-shadow: var(--cp-shadow-3); }
.offc__flag { position: absolute; top: 0; right: 24px; transform: translateY(-50%); background: var(--lead-accent); color: var(--lead-navy); font-family: var(--cp-font-display); font-weight: 800; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 14px; }
.offc__name { font-family: var(--cp-font-display); font-weight: 900; font-size: 24px; letter-spacing: -0.01em; color: var(--lead-ink); margin: 0 0 6px; }
.offc__for { font-size: 14px; color: var(--cp-fg-3); margin: 0 0 22px; }
.offc__list { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 11px; }
.offc__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; color: var(--cp-fg-2); }
.offc__list li svg { width: 17px; height: 17px; color: var(--lead-accent-deep); flex-shrink: 0; margin-top: 2px; }
.offc .btn { margin-top: auto; width: 100%; justify-content: center; }

/* ---------- Proof pillars ---------- */
.pillars5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.16); border-left: 1px solid rgba(255,255,255,0.16); }
.pill5 { padding: 28px 24px 30px; border-right: 1px solid rgba(255,255,255,0.16); border-bottom: 1px solid rgba(255,255,255,0.16); }
.pill5__ico { width: 38px; height: 38px; color: var(--lead-accent); margin-bottom: 16px; }
.pill5__ico svg { width: 100%; height: 100%; }
.pill5__h { font-family: var(--cp-font-display); font-weight: 800; font-size: 16px; color: #fff; margin: 0 0 8px; line-height: 1.2; }
.pill5__p { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.66); margin: 0; }
.founding { margin-top: 36px; border: 1px dashed rgba(239,160,46,0.5); background: rgba(239,160,46,0.08); padding: 26px 30px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.founding__l { font-family: var(--cp-font-display); font-weight: 900; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lead-accent); }
.founding p { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,0.85); flex: 1; min-width: 280px; }

/* ---------- Forms (final) ---------- */
.cf__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: start; }
.cf__toggle { display: flex; gap: 0; border: 1px solid rgba(255,255,255,0.2); margin-bottom: 22px; }
.cf__toggle button { flex: 1; background: none; border: none; cursor: pointer; padding: 14px 16px; font-family: var(--cp-font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; color: rgba(255,255,255,0.6); transition: background var(--cp-dur-fast), color var(--cp-dur-fast); }
.cf__toggle button.is-on { background: var(--lead-accent); color: var(--lead-navy); }
.cf__form { display: none; flex-direction: column; gap: 13px; }
.cf__form.is-on { display: flex; }
.cf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.cf__field label { display: block; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7); margin-bottom: 6px; letter-spacing: 0.03em; }
.cf__field input, .cf__field select { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.2); padding: 13px 15px; color: #fff; font-family: var(--cp-font-body); font-size: 14px; border-radius: 0; }
.cf__field input::placeholder { color: rgba(255,255,255,0.4); }
.cf__field input:focus, .cf__field select:focus { outline: none; border-color: var(--lead-accent); }
.cf__field select option { color: #000; }
.cf__micro { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.5; margin: 4px 0 0; }
.cf__success { display: none; border-left: 3px solid var(--lead-accent); background: rgba(239,160,46,0.12); padding: 16px 18px; font-size: 14px; color: #fff; }
.cf__points { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 13px; }
.cf__points li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: rgba(255,255,255,0.85); line-height: 1.4; }
.cf__points li svg { width: 19px; height: 19px; color: var(--lead-accent); flex-shrink: 0; margin-top: 1px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .ctl-hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .ctl-sys { min-height: 300px; }
  .mech { grid-template-columns: 1fr 1fr; }
  .mech__step:nth-child(2) { border-right: none; }
  .mods { grid-template-columns: 1fr 1fr; }
  .pf__grid { grid-template-columns: 1fr; gap: 32px; }
  .tgt { grid-template-columns: 1fr; }
  .offer { grid-template-columns: 1fr; }
  .pillars5 { grid-template-columns: 1fr 1fr; }
  .cf__grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 680px) {
  .ctl-hero { padding: 112px 0 56px; }
  .signal__grid { grid-template-columns: 1fr; }
  .contrast__row { grid-template-columns: 1fr; gap: 6px; text-align: left; }
  .contrast__a { text-align: left; }
  .contrast__arrow { display: none; }
  .mech { grid-template-columns: 1fr; }
  .mech__step { border-right: none; padding-right: 0; }
  .mods { grid-template-columns: 1fr; }
  .pf__list { grid-template-columns: 1fr; }
  .pf__item:nth-child(2n) { border-right: 1px solid rgba(255,255,255,0.1); }
  .outc { columns: 1; }
  .pillars5 { grid-template-columns: 1fr; }
  .cf__row { grid-template-columns: 1fr; }
  .cmp { font-size: 13px; }
  .cmp th, .cmp td { padding: 12px 8px; }
  .ctl-sticky__txt span { display: none; }
  .ctl-badge { position: static; margin-top: 20px; max-width: none; }
}