/* CJI site kit: the shared layout pieces every page uses, whatever its brand colours. Loaded after each page's own <style>.
   Standard page order: header (one button) > hero with the capture card > proof/demo > how it works > offer > trust > end CTA > footer.
   Rules and copy: CAPTURE_UI_KIT.md. Behaviour: /hub.js. Colours come from the page's own tokens (--surface, --line, --ink, --navy...). */

/* ---- capture card: the one sign-up box, in the hero of every page ---- */
.capture{background:var(--surface,#fff);color:var(--ink,inherit);border:1px solid var(--line,rgba(0,0,0,.16));border-radius:14px;padding:20px;display:grid;gap:12px;min-width:0;align-content:start;scroll-margin-top:84px}
@media (min-width:821px){.capture.capture{padding:24px}}
.capture.capture{padding:20px}
main>.capture,.form-card.capture{max-width:560px}
.capture>h2,.capture>h3,.capture>div>h2,.capture>div>h3{font-size:1.25rem;line-height:1.2;margin:0}
.capture p{margin:0}
.capture .capture-sub{font-size:.95rem;opacity:.85}
.capture form{display:grid;gap:14px;background:none;border:0;border-radius:0;padding:0;max-width:none;min-width:0}
.capture label:not(.check):not(.tick){display:grid;gap:6px;font-weight:600;font-size:.95rem}
.capture input:not([type=checkbox]):not([type=hidden]),.capture select,.capture textarea{font:inherit;font-weight:400;font-size:16px;width:100%;min-height:48px;padding:11px 12px;border-radius:8px;border:1.5px solid color-mix(in srgb,currentColor 45%,transparent);background:var(--bg,#fff);color:var(--ink,#111)}
.capture textarea{min-height:84px;resize:vertical}
.capture input.hub-digits{font-size:1.5rem}
.capture button[type=submit]{width:100%;min-height:48px;border-radius:8px;justify-content:center;justify-self:stretch;font-weight:700;font-size:1rem}
.capture .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}
.capture .capture-done{display:grid;gap:10px}
.capture .capture-done:focus{outline:none}
.capture .capture-next a,.capture-next a{font-weight:700}
/* on a dark card (navy), text follows the card and fields stay light */
.capture.dark{background:var(--navy,#181E2E);color:var(--on-navy,#fff);border-color:transparent;--hub-ok:#9be0b0;--hub-err:#ffb3ab}
.capture.dark label,.capture.dark h2,.capture.dark h3,.capture.dark p{color:var(--on-navy,#fff)}
.capture.dark input:not([type=checkbox]),.capture.dark select,.capture.dark textarea{background:var(--surface,#fff);color:var(--ink,#111);border-color:color-mix(in srgb,var(--on-navy,#fff) 55%,transparent)}
.capture.dark input.hub-digits{background:transparent;color:var(--on-navy,#fff)}

/* ---- end-of-page CTA: one line and one button that jumps back to the capture card ---- */
.end-cta{display:grid;gap:14px;justify-items:start}
.end-cta h2{margin:0}
.end-cta p{margin:0;max-width:40em}
.end-cta .btn{min-height:48px}

/* ---- footer strip: the same three doors on every page ---- */
.doors{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;margin:0;font-size:.9rem}
.doors a{display:inline-flex;align-items:center;min-height:44px}
[hidden]{display:none!important}

/* ---- phone: the capture card comes straight after the headline and lede; proof points and extra links follow it ---- */
@media (max-width:820px){
  .hero .wrap{display:flex;flex-direction:column;gap:20px}
  .hero .hero-copy{display:contents}
  .hero .hero-copy>*{margin-block:0}
  .hero .capture{order:1}
  .hero .facts,.hero .points,.hero .fine,.hero .ctas,.hero .cta-row,.hero .follow{order:2}
}
/* ---- header: brand and button stay on one line each on small phones ---- */
header .btn{white-space:nowrap}
@media (max-width:480px){header .brand span,header .brand small{display:none}}
details:not(.hub-more)>summary{padding-block:10px;cursor:pointer}

/* ---- two-column hero for pages whose hero is not inside ".hero .wrap" (same proportions) ---- */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,56px);align-items:start}
@media (max-width:820px){.hero-grid{display:flex;flex-direction:column;gap:20px}}

/* ---- touch targets: links in the header, footer strip and footer are at least 44px tall ---- */
header a, footer a, .doors a, .capture-next a, .capture a.more { display:inline-flex; align-items:center; min-height:44px; }