/* ==========================================================================
   CTA blocks, approved draft (/cta-draft.html) applied to the live site.
   Loaded right after kit.css. Every value is a kit token or a literal the
   kit uses for the same job (white alphas on dark). No glows, no coloured
   shadows. Light version on white/paper sections, dark version on dark ones:
     #closing            dark  (all pages, black band before the footer)
     #trust .tr-proc     light (/trust)
     #about .ab-cta      light (/about)
     #insights-sec .nl   light (/insights)
     #start .fp-a        light (home pricing, /pricing)
     #book .bf-alt       light (/book)
     #home .ctas/.cta-note dark (home hero)
     #stickyCta          both: site.js sets .is-light after the surface under it
   Ids in the selectors on purpose: they must beat kit.css's
   #view-home :is(...,#readout) CTA card rule (specificity 2,0,0).
   ========================================================================== */

/* ---------- 01 Closing band · dark ---------- */
#view-home #closing{background:linear-gradient(180deg,var(--c-ink),var(--c-black))}
/* After a dark section (/how-it-works) the band stays on plain black: no ink step */
body[data-page="how-it-works"] #view-home #closing{background:var(--c-black)}
/* /sectors now ends on the white sdl-b band, so its closing band takes the normal ink-to-black fade */
#view-home #closing::before,#view-home #closing::after{display:none}
#view-home #closing .closing-main{gap:var(--hero-gap)}
#view-home #closing .bigeyes{width:52px;height:auto;margin-bottom:4px}
#view-home #closing h2.h2{max-width:var(--head-title-w);font-family:var(--font-h);font-size:var(--t-section);font-weight:800;line-height:1.1;letter-spacing:-.025em;color:var(--c-white);text-wrap:balance}
#view-home #closing h2.h2 em{display:inline;font-style:normal;color:inherit;background:none;-webkit-text-fill-color:currentColor}
#view-home #closing .lede{max-width:var(--head-lede-w);font-size:var(--t-lede);line-height:1.7;color:rgba(255,255,255,.68);text-wrap:pretty}
#view-home #closing .ctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--hero-gap) var(--card-p-l);margin-top:var(--hero-gap)}
#view-home #closing .closing-rule{width:1px;height:44px;background:rgba(255,255,255,.1)}
@media (min-width:761px){#view-home #closing h2.h2 em{display:inline-block}}
@media (max-width:640px){
  #view-home #closing .closing-rule{display:none}
  #view-home #closing .ctas{flex-direction:column;max-width:none;width:auto}
}

/* ---------- 02/03/04 In-page CTA cards · light (08 card, 29 CTA, 31 line only) ---------- */
#view-home :is(#trust,#about,#insights-sec) .cta-card{
  --fg:var(--c-ink);--muted:var(--c-body);--faint:var(--c-gray);--line:var(--c-rule);--peri:var(--c-primary);
  min-width:0;border-radius:var(--card-r-l);padding:var(--card-p-l);background:var(--c-white);box-shadow:var(--card-line-white);color:var(--fg)}
#view-home :is(#trust,#about,#insights-sec) .cta-card::before,#view-home :is(#trust,#about,#insights-sec) .cta-card::after{display:none}
#view-home :is(#trust,#about,#insights-sec) .cta-card .head{display:grid;gap:var(--ct-gap);justify-items:start;align-content:start;margin:0;max-width:none}
#view-home :is(#trust,#about,#insights-sec) .cta-card .eyebrow{margin:0;font-family:var(--mono);font-size:var(--t-eyebrow);font-weight:500;line-height:1.5;letter-spacing:.2em;text-transform:uppercase;color:var(--c-primary)}
#view-home :is(#trust,#about,#insights-sec) .cta-card :is(h2,.h2){margin:0;max-width:var(--head-title-w);font-family:var(--font-h);font-size:var(--t-sub);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--c-ink);text-wrap:balance}
#view-home :is(#trust,#about,#insights-sec) .cta-card .lede{margin:4px 0 0;max-width:var(--head-lede-w);font-family:var(--font);font-size:var(--t-prose);line-height:1.65;color:var(--c-body);text-wrap:pretty}
#view-home :is(#trust,#about,#insights-sec) .cta-card .btn.btn-lg{height:44px;padding:0 20px;font-size:var(--t-button)}
#view-home :is(#trust,#about,#insights-sec) .cta-card .btn .ic{width:var(--ct-ic-inline);height:var(--ct-ic-inline)}

/* 02 Row: copy left, one action on the copy's last line */
#view-home #trust .cta-card--row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--ct-gap-l) calc(var(--card-p-l) * 2)}
@media (max-width:760px){#view-home #trust .cta-card--row{grid-template-columns:1fr;align-items:start}#view-home #trust .cta-card--row>.btn{justify-self:start}}

/* 03 Stack: copy, then the two actions */
#view-home #about .cta-card--stack{display:grid;gap:var(--card-p-m);align-content:start}
#view-home #about .ab-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hero-gap) var(--card-p-m);margin:0}

/* 04 Newsletter: copy left, inline form right (16 forms) */
#view-home #insights-sec .nl{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:var(--ct-gap-l) calc(var(--card-p-l) * 2)}
#view-home #insights-sec .nl .nlf{display:block;min-width:0}
#view-home #insights-sec .nl .f-inline{background:var(--c-paper);border-color:var(--c-rule)}
#view-home #insights-sec .nl .f-inline__input{height:44px;padding-block:0;color:var(--c-ink)}
#view-home #insights-sec .nl .f-inline>.btn{height:44px}
#view-home #insights-sec .nl .nlok{margin:var(--ct-gap) 0 0;font-size:var(--t-note);color:var(--ok)}
@media (max-width:980px){#view-home #insights-sec .nl{grid-template-columns:1fr;align-items:start}}

/* ---------- 07 Row CTA · light (31 row type) ---------- */
#view-home #start .fp-a{gap:var(--hero-gap) var(--card-p-m)}
#view-home #start .fp-a>div{display:grid;gap:4px}
#view-home #start .fp-a p{margin:0}
#view-home #start .fp-a strong{font-weight:700}
#view-home #start .fp-a .btn.btn-lg{padding:0 20px;font-size:var(--t-button)}

/* ---------- 08 Link boxes · light (31 link type, ring arrow) ---------- */
#view-home #book .bf-alt{display:grid;gap:12px}
#view-home #book .bf-alt a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--hero-gap);padding:var(--card-p-s) var(--card-p-m);border-radius:var(--card-r-m);background:var(--c-white);box-shadow:var(--card-line-white);color:var(--c-ink);transition:box-shadow .2s}
#view-home #book .bf-alt .bf-alt__c{display:block;min-width:0}
#view-home #book .bf-alt b{display:block;font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;line-height:1.4;letter-spacing:-.01em;color:var(--c-ink)}
#view-home #book .bf-alt .bf-alt__c>span{display:block;font-family:var(--font);font-size:var(--t-prose);font-weight:400;line-height:1.5;color:var(--c-body)}
#view-home #book .bf-alt .btn-go__ring{display:flex;width:2rem;height:2rem;gap:0;border:1px solid var(--c-rule);color:var(--c-ink)}
#view-home #book .bf-alt .btn-go__ring .ic{width:14px;height:14px}
#view-home #book .bf-alt a:hover{background:var(--c-white);box-shadow:0 0 0 1px var(--c-primary)}
#view-home #book .bf-alt a:hover .btn-go__ring{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-white)}
#view-home #book .bf-alt a:hover .btn-go__ring svg{transform:rotate(0)}

/* ---------- 09 Hero actions · dark (white + outline, note row) ---------- */
#view-home #home .ctas{gap:12px var(--card-p-m)}
#view-home #home .cta-note{gap:var(--ct-gap) var(--card-p-m);font-family:var(--font);font-size:var(--t-note);line-height:1.5;color:rgba(255,255,255,.68)}
#view-home #home .cta-note span{gap:var(--ct-gap)}
#view-home #home .cta-note .ic{width:var(--ct-ic-inline);height:var(--ct-ic-inline);color:var(--c-signal)}

/* ---------- 10 Sticky bar · dark glass by default, light on light surfaces ---------- */
#stickyCta .sc-in{gap:12px;padding:8px 8px 8px var(--card-p-m);border-radius:999px;background:rgba(255,255,255,.05);box-shadow:0 0 0 1px rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:background-color .2s,box-shadow .2s}
#stickyCta .sc-t{gap:2px;line-height:1.4}
#stickyCta .sc-t b{font-family:var(--font-h);font-size:var(--t-lede);font-weight:700;line-height:1.4;letter-spacing:-.01em;color:var(--c-white)}
#stickyCta .sc-t em{font-family:var(--font);font-size:var(--t-note);line-height:1.5;color:rgba(255,255,255,.5)}
#stickyCta .sc-free{flex:none;white-space:nowrap}
#stickyCta .sc-x{flex:none;display:grid;place-items:center;width:32px;height:32px;font-size:var(--t-row);color:var(--c-white);background:rgba(255,255,255,.1)}
#stickyCta.is-light .sc-in{background:var(--c-white);box-shadow:var(--card-line-white),var(--card-shadow-white)}
#stickyCta.is-light .sc-t b{color:var(--c-ink)}
#stickyCta.is-light .sc-t em{color:var(--c-gray)}
#stickyCta.is-light .sc-x{color:var(--c-gray);background:var(--c-paper)}
@media (max-width:640px){
  #stickyCta .sc-in{padding:6px}
  #stickyCta .sc-t,#stickyCta .sc-free{display:none}
  #stickyCta .sc-in .sc-go{flex:1}
}

/* ---------- 06 Readout offer card (#readout) · light (home pricing, /pricing: both on white) ----------
   Draft .cx-offer: white card, two columns split by a rule; left = eyebrow, title, price (--t-big), guarantee under a
   top rule; right = list (accent dots) and the .btn-dark under it. */
#view-home #readout{--fg:var(--c-ink);--muted:var(--c-body);--faint:var(--c-gray);--line:var(--c-rule);--peri:var(--c-primary);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto;gap:var(--card-p-m) calc(var(--card-p-l) * 2);align-items:stretch;
  padding:var(--card-p-l);border-radius:var(--card-r-l);background:var(--c-white);color:var(--c-ink);box-shadow:var(--card-line-white)}
#view-home #readout::before,#view-home #readout::after{display:none}
#view-home #readout .hook-l{grid-column:1;grid-row:1/3;display:flex;flex-direction:column;gap:var(--hero-gap)}
#view-home #readout .hook-l .head{margin:0;gap:8px}
#view-home #readout .hook-l .eyebrow{color:var(--c-primary)}
#view-home #readout .head :is(h2,h3),#view-home #readout .head h3>*{margin:0;font-family:var(--font-h);font-size:var(--t-sub);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--c-ink)}
#view-home #readout .hook-pr{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px var(--ct-gap);font-family:var(--font-h);font-size:var(--t-big);font-weight:800;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--c-ink)}
#view-home #readout .hook-pr small{font-family:var(--font);font-size:var(--t-note);font-weight:400;letter-spacing:0;color:var(--c-body)}
#view-home #readout .hook-g{display:flex;gap:12px;margin:auto 0 0;padding-top:var(--card-p-m);border-top:1px solid var(--c-rule);max-width:none;font-size:var(--t-prose);line-height:1.6;color:var(--c-body)}
#view-home #readout .hook-g svg{flex:none;width:var(--ct-ic-inline);height:var(--ct-ic-inline);margin-top:4px;color:var(--c-primary)}
#view-home #readout .hook-list{grid-column:2;grid-row:1;align-self:start;display:grid;gap:12px;margin:0 0 0 calc(var(--card-p-l) * -1);padding:0 0 0 calc(var(--card-p-l) * 2);box-shadow:inset 1px 0 0 var(--c-rule)}
#view-home #readout .hook-list li{display:flex;gap:12px;font-size:var(--t-prose);line-height:1.6;color:var(--c-body)}
#view-home #readout .hook-list li::before{content:"";flex:0 0 6px;height:6px;margin-top:9px;border-radius:50%;background:var(--c-primary)}
#view-home #readout .hook-cta{grid-column:2;grid-row:2;align-self:end;justify-self:start;margin-left:var(--card-p-l);height:44px;padding:0 20px;font-size:var(--t-button)}
@media (max-width:980px){
  #view-home #readout{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  #view-home #readout :is(.hook-l,.hook-list,.hook-cta){grid-column:1;grid-row:auto}
  #view-home #readout .hook-list{margin:0;padding:var(--card-p-m) 0 0;box-shadow:inset 0 1px 0 var(--c-rule)}
  #view-home #readout .hook-cta{margin-left:0}
}

/* ---------- 07b Assessment + terms (#addons .fineprint) · light, same build as 06 Readout offer card ----------
   One white card split by a rule: left = icon, title, copy, then the action; right = plan terms with accent dots. */
#view-home #start .fineprint{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 calc(var(--card-p-l) * 2);align-items:stretch;
  padding:var(--card-p-l);border-radius:var(--card-r-l);background:var(--c-white);box-shadow:var(--card-line-white)}
#view-home #start .fineprint .fp-a{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;gap:var(--card-p-m) var(--card-p-m);align-items:start;padding:0;border-radius:0;background:none;box-shadow:none}
#view-home #start .fineprint .fp-a>.btn{grid-column:2;align-self:end;justify-self:start;height:44px;padding:0 20px;font-size:var(--t-button)}
#view-home #start .fineprint .fp-a h3,#view-home #start .fineprint .fp-a h3>b{font-size:var(--t-sub);font-weight:800;line-height:1.2;letter-spacing:-.02em}
#view-home #start .fineprint .fp-t{display:grid;gap:12px;align-content:center;margin:0 0 0 calc(var(--card-p-l) * -1);padding:0 0 0 calc(var(--card-p-l) * 2);border-radius:0;background:none;box-shadow:inset 1px 0 0 var(--c-rule)}
#view-home #start .fineprint .fp-t li{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-prose);line-height:1.6;color:var(--c-body)}
#view-home #start .fineprint .fp-t li::before{flex:0 0 6px;width:6px;height:6px;margin-top:9px;border-radius:50%;background:var(--c-primary)}
@media (max-width:980px){
  #view-home #start .fineprint{grid-template-columns:minmax(0,1fr)}
  #view-home #start .fineprint .fp-t{margin:var(--card-p-m) 0 0;padding:var(--card-p-m) 0 0;box-shadow:inset 0 1px 0 var(--c-rule)}
}