*{box-sizing:border-box}

/* Display face: Poppins SemiBold, replacing Archivo Black.
   Archivo Black was only ever a substitution (see _ds tokens/fonts.css) — CKP
   supplied no binaries — so this is a swap, not a break with the brand.
   Everything display-typed already routes through --font-display: h1-h4 in the
   _ds base tokens, 32 inline uses in the _ds bundle, and 38 rules below. That
   makes this block the single switch; reverting is this block plus the <link>
   in the HTML head.
   Only Poppins 600 is loaded, so a rule asking for 400 still gets SemiBold, and
   font-synthesis-weight:none stops the browser faux-bolding a 700 back up.
   Poppins is wider and rounder than Archivo Black, so the tracking opens up
   from -.035em (tuned for a heavy grotesque) to -.02em. */
:root{
  --font-display:'Poppins',system-ui,sans-serif;
  --weight-display:600;
  --tracking-display:-.02em;
}
*{font-synthesis-weight:none}
/* An author display rule beats the UA stylesheet's [hidden]{display:none}, so any
   flex/grid utility silently un-hides an element marked hidden. The form's two
   steps use .stack-16, which is display:flex — without this both rendered at once. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--gray-700);font-family:'Archivo',system-ui,sans-serif;font-size:17.5px;font-weight:450;line-height:1.68;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--navy-500);text-decoration:none;border-bottom:2px solid var(--navy-200);transition:color 120ms cubic-bezier(.22,.9,.28,1),border-color 120ms cubic-bezier(.22,.9,.28,1)}
a:hover{color:var(--ckp-crimson);border-color:var(--crimson-200)}
::selection{background:var(--ckp-crimson);color:#fff}
.wrap{max-width:1280px;margin:0 auto;padding:0 56px;width:100%}
.wrap--narrow{max-width:980px}
.sec{padding:104px 0}
.sec--sm{padding:72px 0}
.rule-t{border-top:3px solid var(--ink)}
.rule-b{border-bottom:3px solid var(--ink)}
/* Poppins SemiBold sits lighter and rounder than Archivo Black, so the leading
   opens from .92-.98 to ~1 — a heavy grotesque can carry near-solid leading,
   a geometric semibold reads cramped at it. Sizes are unchanged. */
.disp{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;line-height:1;letter-spacing:var(--tracking-display);color:var(--ink);margin:0;text-wrap:balance}
.h1{font-size:clamp(40px,4.6vw,68px);line-height:1}
.h2{font-size:clamp(28px,2.7vw,40px);line-height:1.04;letter-spacing:-.018em}
.h3{font-size:22px;line-height:1.18;letter-spacing:-.012em}
.tint{color:var(--ckp-crimson)}
.tint-navy{color:var(--ckp-navy)}
.on-dark{color:#fff}
.eyebrow{font-family:var(--font-display);font-size:12px;text-transform:uppercase;letter-spacing:.16em;line-height:1.4;margin:0}
.eyebrow-block{display:inline-block;background:var(--ink);color:#fff;padding:10px 14px;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:3px}
.chips span{background:var(--ink);color:#fff;padding:10px 14px;font-family:var(--font-display);font-size:12px;text-transform:uppercase;letter-spacing:.16em;line-height:1.3}
.eyebrow-out{display:inline-block;border:2px solid var(--ink);color:var(--ink);padding:7px 12px;white-space:nowrap}
.lede{font-size:22px;line-height:1.46;letter-spacing:-.012em;color:var(--ink);font-weight:500;margin:0}
.body{font-size:17.5px;line-height:1.72;color:var(--gray-700);font-weight:450;margin:0}
.body+.body{margin-top:20px}
.measure{max-width:56ch}
.measure-sm{max-width:46ch}
.muted-on-crimson{color:rgba(255,255,255,.88)}
.strong-ink{color:var(--ink);font-weight:600}
.mono-fig{font-variant-numeric:tabular-nums}
.rgrid{display:grid;gap:3px;background:var(--ink);border:3px solid var(--ink)}
.rgrid>*{background:var(--paper)}
.stack-8{display:flex;flex-direction:column;gap:8px}
.stack-12{display:flex;flex-direction:column;gap:12px}
.stack-16{display:flex;flex-direction:column;gap:16px}
.stack-24{display:flex;flex-direction:column;gap:24px}
.stack-32{display:flex;flex-direction:column;gap:32px}
/* A section label belongs to the headline under it. At a flat 32px it sat
   equidistant from the headline and the body copy and read as a third floating
   element, so pull it in to ~18px and let the full 32px do the headline-to-body
   work. Only the Badge lands here as a bare first-child span. */
.stack-32>span:first-child{margin-bottom:-14px}
.row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* header */
.hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:3px solid var(--ink)}
a[href="#register"]{white-space:nowrap}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px}
.hdr-brand{display:flex;align-items:center;gap:12px}
.hdr-brand img{width:38px;height:38px}
.hdr-name{font-family:var(--font-display);font-size:15px;letter-spacing:-.01em;color:var(--ink);text-transform:uppercase;line-height:1}
.hdr-sub{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--gray-500);font-weight:600;margin-top:4px}
.hdr-meta{display:flex;align-items:center;gap:20px}
/* the sm Button is 38px tall; on a touch screen that is under the 44px minimum */
.hdr-meta a[href="#register"]{min-height:44px;display:inline-flex;align-items:center}
/* hero */
.hero{background:var(--ckp-crimson);border-bottom:3px solid var(--ink)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:3px;background:var(--ink)}
/* Grid and flex items default to min-width:auto, which refuses to shrink below
   the intrinsic minimum width of their content. A <select> takes that minimum
   from its longest <option>, and the longest here — "Not confident at all — I
   need help understanding the requirements" — measures 507px. On a 360px phone
   that one string propagated up through the form and the hero column and pushed
   the whole document 23px wider than the screen, which is what was causing the
   page to scroll sideways. */
.hero-grid>*,.final-grid>*,.formcard{min-width:0}
.formcard select{min-width:0;max-width:100%}
.hero-l{background:var(--ckp-crimson);padding:64px 64px 60px 0;display:flex;flex-direction:column;justify-content:space-between}
.hero-r{background:var(--ckp-crimson);padding:64px 0 60px 56px}
.hero-r-in{max-width:460px}
.hero h1{font-size:clamp(38px,4vw,60px);max-width:19ch}
/* deliberate rhythm: chips sit tight to the headline, then a rule opens a clear
   gap before the body copy, so the H1 is never competing with a paragraph */
.hero-stack{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.hero-stack .chips{margin-bottom:2px}
.hero-copy{max-width:46ch;padding-top:26px;margin-top:4px;position:relative}
.hero-copy:before{content:'';position:absolute;top:0;left:0;width:76px;height:4px;background:var(--ink)}
.hero-lede{margin:0;font-size:clamp(17.5px,1.45vw,19.5px);line-height:1.55;color:#fff;font-weight:500;letter-spacing:-.005em}
.hero-sub{margin:14px 0 0;font-size:clamp(14.5px,1.15vw,16px);line-height:1.55;color:rgba(255,255,255,.82);font-weight:450}
.hero-act{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.hero-act-note{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.82);letter-spacing:.01em;max-width:19ch;line-height:1.4}
.hero h1 .lead,.final h2 .lead{display:block;color:#fff;font-size:.54em;letter-spacing:-.025em;margin-bottom:.16em}
.hero-facts{display:flex;flex-wrap:wrap;gap:0 18px;align-items:center;margin-top:36px;padding-top:22px;border-top:2px solid rgba(255,255,255,.4)}
.hero-facts span{font-size:14px;font-weight:600;color:rgba(255,255,255,.9);display:flex;align-items:center;gap:18px;white-space:nowrap}
.hero-facts span:not(:last-child):after{content:'';width:5px;height:5px;background:var(--ink)}
/* countdown */
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;background:var(--ink);border:3px solid var(--ink)}
.cd-cell{background:#fff;padding:12px 6px;text-align:center}
.cd-n{font-family:var(--font-display);font-size:30px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.cd-l{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-500);font-weight:700;margin-top:7px}
.seats{border:2px solid var(--ink);background:#fff;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.seats-top{display:flex;justify-content:space-between;align-items:baseline}
.seats-n{font-family:var(--font-display);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.seats-n b{color:var(--ckp-crimson);font-weight:400}
.seat-meter{display:grid;grid-template-columns:repeat(40,1fr);gap:2px}
.seat-meter i{height:10px;background:var(--gray-200)}
.seat-meter i.on{background:var(--ckp-crimson)}
/* form */
.formcard{border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:#fff;padding:0;overflow:hidden}
.hero-r .formcard{box-shadow:8px 8px 0 var(--ink)}
.form-head{background:var(--ink);padding:15px 22px;display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.form-title{font-family:var(--font-display);font-size:18px;text-transform:uppercase;letter-spacing:-.015em;color:#fff;margin:0;line-height:1}
.form-when{margin:0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--crimson-200);white-space:nowrap}
.form-body{padding:22px}
/* the design system's Input stacks label over field with an 8px gap; 12px between
   fields is enough separation once every label is uppercase and set in the display face */
.fstack{display:flex;flex-direction:column;gap:12px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.form-foot{margin-top:20px;padding-top:16px;border-top:2px solid var(--gray-200);display:flex;flex-direction:column;gap:10px}
.form-note{font-size:13px;color:var(--gray-500);line-height:1.45;margin:0;text-align:center}
/* two-step progress */
.fsteps{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.fstep-bars{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.fstep-bars i{height:5px;background:var(--gray-200)}
.fstep-bars i.on{background:var(--ckp-crimson)}
.fstep-label{font-family:var(--font-display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-500)}
.fback{background:none;border:0;padding:4px 0;cursor:pointer;font-family:'Archivo',sans-serif;font-size:13.5px;font-weight:600;color:var(--gray-500);text-decoration:underline;text-underline-offset:3px}
.fback:hover{color:var(--ckp-crimson)}
.form-err{margin:16px 0 0;padding:12px 14px;background:var(--danger-bg);border-left:4px solid var(--danger);color:var(--danger);font-size:14px;font-weight:600;line-height:1.45}
/* multi-select chips — square, ink-bordered, crimson when picked */
.chipset{border:0;margin:0;padding:0;min-width:0}
.chipset legend{padding:0;font-family:var(--font-display);font-size:12px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink);line-height:1.4}
.chipset legend span{display:block;margin-top:3px;font-family:'Archivo',sans-serif;font-size:11px;letter-spacing:.06em;color:var(--gray-500);text-transform:none}
.chipwrap{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{font:inherit;font-size:12.5px;line-height:1.3;font-weight:500;text-align:left;min-height:44px;padding:10px 11px;cursor:pointer;background:#fff;color:var(--gray-700);border:2px solid var(--gray-300);transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--ckp-crimson);border-color:var(--ckp-crimson);color:#fff}
.embed-slot{border:2px dashed var(--gray-300);padding:20px;text-align:center;font-size:13px;color:var(--gray-500)}
/* trust */
.trust{display:grid;grid-template-columns:auto 1fr;align-items:start}
.trust-badge{display:flex;align-items:center;align-self:stretch;padding:24px 36px 24px 0;border-right:1px solid var(--gray-200)}
/* xero-platinum-partner.svg is the official "Platinum capsule" badge from the
   Xero DAM, vector and 5.8 KB against the 35 KB of the raster it replaced.
   The cyan variant is deliberate: this badge renders twice, here on paper and
   again on the ink footer, and the capsule carries its own fill so one file
   serves both. The whiteout variant would disappear against this strip. */
.trust-badge img{width:150px;height:auto}
.trust-list{display:grid;grid-template-columns:repeat(6,1fr);margin:0;padding:0}
.trust-list li{list-style:none;padding:24px 18px;border-right:1px solid var(--gray-200);display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.trust-list li:last-child{border-right:0;padding-right:0}
.trust-list li:before{content:'';width:18px;height:3px;background:var(--ckp-crimson);flex:none}
.trust-list li span{font-family:var(--font-display);font-size:12.5px;line-height:1.42;letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.trust-list li em{font-style:normal;color:var(--ckp-crimson)}
.connect{display:grid;grid-template-columns:minmax(200px,290px) 1fr;align-items:center}
.cn-src{display:flex;flex-direction:column}
.cn-src>span{position:relative;padding:22px 34px 22px 0;border-bottom:1px solid rgba(255,255,255,.2);font-family:var(--font-display);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.cn-src>span:last-child{border-bottom:0}
.cn-src>span:after{content:'';position:absolute;right:0;top:50%;width:34px;height:2px;background:var(--ckp-crimson)}
.cn-msg{border-left:2px solid var(--ckp-crimson);padding:10px 0 10px 48px}
.cn-msg p{margin:0;max-width:46ch;font-size:19px;line-height:1.62;color:rgba(255,255,255,.82)}
.cn-msg b{display:block;margin-top:20px;color:#fff;font-family:var(--font-display);font-weight:400;font-size:23px;line-height:1.24;letter-spacing:-.025em;max-width:22ch}
/* quote */
.quote{background:var(--ink);color:#fff;padding:56px 64px;position:relative}
.quote p{font-family:var(--font-display);font-size:clamp(24px,2.5vw,36px);line-height:1.12;letter-spacing:-.025em;margin:0;color:#fff;max-width:20ch}
.quote-tag{position:absolute;top:0;right:0;background:var(--ckp-crimson);color:#fff;padding:10px 16px}
/* question band */
.qband{background:var(--ink);padding:22px 0}
.qrow{display:grid;grid-template-columns:88px 1fr;gap:24px;align-items:baseline;padding:32px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.qrow:last-child{border-bottom:0}
.qrow .n{font-family:var(--font-display);font-size:13px;letter-spacing:.16em;color:var(--ckp-crimson)}
.qrow .q{font-family:var(--font-display);font-size:clamp(26px,3.1vw,46px);line-height:1;letter-spacing:-.035em;color:#fff;text-transform:uppercase;margin:0}
/* coverage — three covered zones with two visible, hatched gaps between them */
.cover{border:3px solid var(--ink);background:#fff}
.cover-row{display:grid;grid-template-columns:1fr 58px 1fr 58px 1fr}
.cov{padding:32px 28px 26px;display:flex;flex-direction:column;gap:12px}
.cov-who{font-family:var(--font-display);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);line-height:1.3}
.cov p{margin:0;font-size:16.5px;line-height:1.5;color:var(--gray-700);flex:1}
.cov-tag{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gray-500);display:flex;align-items:center;gap:8px}
.cov-tag:before{content:'';width:14px;height:3px;background:var(--gray-300)}
.cov-gap{background:repeating-linear-gradient(135deg,var(--crimson-50) 0 7px,#fff 7px 14px);border-left:2px dashed var(--ckp-crimson);border-right:2px dashed var(--ckp-crimson);display:grid;place-items:center}
.cov-gap span{font-family:var(--font-display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ckp-crimson);writing-mode:vertical-rl;transform:rotate(180deg)}
.cover-foot{background:var(--ckp-crimson);border-top:3px solid var(--ink);padding:28px 32px;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
.cf-label{font-family:var(--font-display);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#fff;width:15ch;line-height:1.4}
.cover-foot ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cover-foot li{color:#fff;font-size:16px;line-height:1.45;font-weight:500;padding-left:16px;border-left:2px solid rgba(255,255,255,.55)}
/* compliance clock — the deadlines that start on incorporation day */
.clock-head{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.clock-head p{margin:0;font-size:16.5px;color:var(--gray-700);line-height:1.5}
.clock{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;background:var(--ink);border:3px solid var(--ink)}
.clock>div{background:#fff;padding:24px 22px;display:flex;flex-direction:column;gap:12px}
.clock .when{font-family:var(--font-display);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ckp-crimson)}
.clock p{margin:0;font-size:15.5px;line-height:1.5;color:var(--gray-700)}
/* payoff — what the reader personally gets out of the hour */
.payoff{border-left:5px solid var(--ckp-crimson);padding:6px 0 6px 26px;display:flex;flex-direction:column;gap:8px}
.payoff b{font-family:var(--font-display);font-weight:400;font-size:clamp(19px,1.9vw,25px);line-height:1.28;letter-spacing:-.02em;color:var(--ink);max-width:26ch}
.payoff span{font-size:16px;color:var(--gray-500)}
/* merge — three sources converging into one connected view */
.merge{display:flex;flex-direction:column}
.merge-top{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.msrc{border:2px solid rgba(255,255,255,.28);border-top:3px solid var(--ckp-crimson);padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px;background:rgba(255,255,255,.03)}
.msrc-n{font-family:var(--font-display);font-size:11px;letter-spacing:.2em;color:var(--ckp-crimson)}
.msrc-t{font-family:var(--font-display);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#fff;line-height:1.3}
.msrc-d{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.62)}
.merge-svg{display:block;width:100%;height:70px;fill:none;stroke:var(--ckp-crimson);stroke-width:2}
.merge-into{position:relative;margin:0 auto;width:min(760px,100%);background:var(--ckp-crimson);border:3px solid #fff;box-shadow:10px 10px 0 rgba(255,255,255,.14);padding:38px 44px;display:flex;flex-direction:column;gap:14px;text-align:center;align-items:center}
.mi-eyebrow{font-family:var(--font-display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.mi-label{margin:0;font-family:var(--font-display);font-size:clamp(28px,3.4vw,46px);text-transform:uppercase;letter-spacing:-.035em;color:#fff;line-height:.96}
.mi-body{margin:0;color:rgba(255,255,255,.9);font-size:17px;line-height:1.55;max-width:46ch}
.mi-sig{margin:6px 0 0;padding-top:18px;border-top:2px solid rgba(255,255,255,.35);width:100%;font-family:var(--font-display);font-size:clamp(16px,1.5vw,20px);line-height:1.3;letter-spacing:-.02em;color:#fff}
/* handovers */
.hand{display:grid;grid-template-columns:repeat(3,1fr);border-top:3px solid var(--ink)}
.hand>div{padding:30px 40px 0 0;display:flex;flex-direction:column;gap:18px;border-right:1px solid var(--gray-200)}
.hand>div+div{padding-left:40px}
.hand>div:last-child{border-right:0;padding-right:0}
.hand .role{font-family:var(--font-display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ckp-crimson)}
.hand p{margin:0;font-size:18px;line-height:1.5;color:var(--ink);font-weight:500;max-width:30ch}
/* ledger */
.ledger{width:100%;border-collapse:collapse;border:3px solid var(--ink)}
.ledger th{background:var(--ink);color:#fff;font-family:var(--font-display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-align:left;padding:16px 24px}
.ledger td{border-top:2px solid var(--ink);padding:22px 24px;font-size:17px;line-height:1.5;vertical-align:top;color:var(--gray-700)}
/* the consequence column is the point of this table — let it carry the weight */
.ledger td:first-child{color:var(--gray-700);font-weight:450;width:42%;border-right:2px solid var(--ink)}
.ledger td:last-child{background:var(--crimson-50);color:var(--ink);font-weight:600;font-size:17.5px}
.ledger tr:hover td:first-child{background:var(--gray-100)}
/* decisions */
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:var(--ink);border:3px solid var(--ink)}
.dcell{background:#fff;padding:36px 32px;display:flex;flex-direction:column;gap:14px;min-height:270px}
.dcell .num{font-family:var(--font-display);font-size:13px;letter-spacing:.1em;color:var(--ckp-crimson)}
.dcell h3{margin:0;font-family:var(--font-display);font-size:19px;line-height:1.2;letter-spacing:-.02em;color:var(--ink);text-transform:none;max-width:22ch}
.dcell p{margin:0;font-size:16px;line-height:1.62;font-weight:450}
.dcell--em{background:var(--ckp-crimson)}
.dcell--em .num{color:var(--ink)}
.dcell--em h3{color:#fff}
.dcell--em p{color:rgba(255,255,255,.9)}
/* jeremy */
.jgrid{display:grid;grid-template-columns:.82fr 1.18fr;gap:64px;align-items:start}
.jphoto{border:3px solid var(--ink);box-shadow:12px 12px 0 var(--ckp-crimson);background:var(--gray-100)}
/* height:auto is required — the height="1080" attribute (there for CLS) otherwise
   acts as a presentational height and the aspect-ratio never applies.
   4/5 crops the empty lower third of the frame so the photo finishes level with
   the credentials beside it; object-position keeps the face anchored. */
.jphoto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 12%}
.jname{font-family:var(--font-display);font-size:30px;letter-spacing:-.03em;text-transform:uppercase;color:var(--ink);margin:0;line-height:1}
.jrole{font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ckp-crimson);margin:8px 0 0}
.creds{list-style:none;margin:0;padding:0;border-top:1px solid var(--gray-200)}
.creds li{border-bottom:1px solid var(--gray-200);padding:15px 0 15px 30px;position:relative;font-size:16.5px;line-height:1.5;color:var(--ink)}
.creds li:before{content:'';position:absolute;left:0;top:23px;width:14px;height:3px;background:var(--ckp-crimson)}
/* videos — portrait 9:16 stage that plays inline, with a thumbnail strip to switch */
.vwrap{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:64px;align-items:start}
.vstage{position:relative;aspect-ratio:9/16;border:3px solid var(--ink);box-shadow:var(--shadow-block);background:var(--ink);overflow:hidden}
.vstage iframe{width:100%;height:100%;border:0;display:block}
.vposter{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.vposter img{width:100%;height:100%;object-fit:cover}
.vside{display:flex;flex-direction:column;gap:20px;padding-top:4px}
.vstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:8px;max-width:520px}
.vthumb{position:relative;aspect-ratio:9/16;padding:0;border:3px solid var(--ink);background:var(--gray-100);overflow:hidden;cursor:pointer;transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}
.vthumb:hover{transform:var(--press-shift)}
.vthumb.on{border-color:var(--ckp-crimson);box-shadow:var(--shadow-block-crimson)}
.vplay{position:absolute;left:14px;bottom:14px;width:46px;height:46px;background:var(--ckp-crimson);border:3px solid var(--ink);display:grid;place-items:center;z-index:2;pointer-events:none}
.vplay:after{content:'';border-left:13px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px}
.vcta{margin-top:36px;padding-top:28px;border-top:3px solid var(--ink);display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.vcta-stat{margin:0;font-size:17px;line-height:1.5;color:var(--gray-700);max-width:34ch}
.vcta-stat b{font-family:var(--font-display);font-weight:400;font-size:24px;color:var(--ckp-crimson);letter-spacing:-.02em}
.vplay--sm{left:50%;bottom:50%;transform:translate(-50%,50%);width:24px;height:24px;border-width:2px}
.vplay--sm:after{border-left:7px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
/* faq */
.faq{border-top:3px solid var(--ink)}
.faq-item{border-bottom:3px solid var(--ink)}
.faq-q{width:100%;background:none;border:0;text-align:left;display:flex;align-items:flex-start;justify-content:space-between;gap:32px;padding:28px 0;cursor:pointer;font-family:var(--font-display);font-size:20px;line-height:1.24;letter-spacing:-.02em;color:var(--ink);transition:color 120ms cubic-bezier(.22,.9,.28,1)}
.faq-q:hover{color:var(--ckp-crimson)}
.faq-q i{font-style:normal;font-size:26px;line-height:1;color:var(--ckp-crimson);flex:none;transition:transform 180ms cubic-bezier(.22,.9,.28,1)}
.faq-item.open .faq-q i{transform:rotate(45deg)}
.faq-a{overflow:hidden;max-height:0;transition:max-height 180ms cubic-bezier(.22,.9,.28,1)}
.faq-a p{margin:0;padding:0 0 30px;max-width:64ch;font-size:17.5px;line-height:1.68}
/* final */
.final{background:var(--ckp-crimson);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.final-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:start}
/* left column: eyebrow, two-tone display headline, fact box, seat counts, payoff.
   Ink carries the emphasis half of the headline — on crimson it reads harder than
   white and keeps the section to the two brand colours.
   Spacing is set per-gap rather than one flat gap, so the block reads as four
   groups (label / headline / facts / closing) instead of five evenly spaced
   strangers. */
.final-left{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.final-eyebrow{font-family:var(--font-display);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);line-height:1.3}
/* The two halves were 32px against 60px — a 1.9x jump that read as two unrelated
   headlines stacked. Same type ramp as the rest of the page now: a 1.45 step, one
   tracking value, one leading value, and measures within 3ch of each other so the
   two blocks rag alike and land as a single shape. */
.final-h2{margin:20px 0 0;display:flex;flex-direction:column;gap:8px;text-transform:uppercase}
.fh-a{color:#fff;font-size:clamp(24px,2.6vw,36px);line-height:1.02;letter-spacing:var(--tracking-display);max-width:20ch}
.fh-b{color:var(--ink);font-size:clamp(34px,3.8vw,52px);line-height:1.02;letter-spacing:var(--tracking-display);max-width:17ch}
/* The four facts were a 13.5px inline row that disappeared against the crimson.
   Boxed on paper with the ink rules and hard shadow the rest of the page uses:
   2x2 so the time string keeps its own line instead of wrapping in a 4-up. */
/* Uneven columns on purpose: column 1 carries the time string, which is 25
   characters against the 16 of the date, so an even 2-up wraps it and leaves
   "Free" and "Online" swimming in space. */
.final-facts{margin-top:32px;width:100%;max-width:560px;display:grid;grid-template-columns:1.35fr 1fr;gap:3px;background:var(--ink);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.ff-cell{background:#fff;padding:15px 18px;display:flex;flex-direction:column;gap:7px;min-width:0}
.ff-l{font-family:var(--font-display);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-500);line-height:1}
.ff-v{font-family:var(--font-display);font-size:clamp(15px,1.35vw,17.5px);letter-spacing:-.01em;color:var(--ink);line-height:1.2}
/* Was 13.5px body weight — the scarcity numbers are the reason this block exists,
   so they now run at display size with the numerals in ink. */
.final-seats{margin-top:22px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 30px}
/* Not flex on the span: a flex container makes each text node its own item, so
   "23" and "of 40 seats left" would sit a gap apart mid-sentence. */
.final-seats span{font-family:var(--font-display);font-size:clamp(16px,1.5vw,19px);letter-spacing:-.01em;color:#fff;line-height:1.2;white-space:nowrap}
.final-seats b{font-weight:inherit;color:var(--ink)}
.fs-live i{display:inline-block;width:10px;height:10px;background:var(--ink);margin-right:10px}
.final-note{margin:34px 0 0;font-family:var(--font-display);font-size:clamp(17px,1.7vw,22px);line-height:1.36;letter-spacing:var(--tracking-display);color:#fff;max-width:26ch}
.final-small{margin:16px 0 0;max-width:46ch;font-size:15px;line-height:1.6;color:rgba(255,255,255,.82)}
.final-line{display:flex;flex-wrap:wrap;gap:0 18px;align-items:center;border-top:2px solid rgba(255,255,255,.4);border-bottom:2px solid rgba(255,255,255,.4);padding:16px 0;margin-top:36px}
.final-line span{font-size:14px;font-weight:600;color:#fff;display:flex;align-items:center;gap:18px;white-space:nowrap}
.final-line span:not(:last-child):after{content:'';width:5px;height:5px;background:var(--ink)}
/* footer */
.ftr{background:var(--ink);color:rgba(255,255,255,.72);padding:72px 0 40px;font-size:15px}
/* inline footer links sit inside running text, so they get padding rather than a
   min-height, which would break the line box */
.ftr a{display:inline-block;padding:5px 0}
.ftr-grid{display:grid;grid-template-columns:auto 1fr auto;gap:56px;align-items:start}
/* The capsule is 3.7:1 against the old two-circle badge's 2:1, so it needs more
   width to keep the same optical weight in the column. */
.ftr-badge{width:190px}
.ftr-badge img{width:100%;height:auto}
.ftr a{color:#fff;border-bottom-color:rgba(255,255,255,.35)}
.ftr a:hover{color:var(--crimson-200);border-bottom-color:var(--crimson-200)}
.ftr-name{font-family:var(--font-display);color:#fff;text-transform:uppercase;font-size:15px;letter-spacing:.02em;margin:0 0 12px}
.ftr-bottom{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18);display:flex;justify-content:space-between;gap:24px;font-size:13px;flex-wrap:wrap}
/* sticky cta */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink);border-top:3px solid var(--ckp-crimson);transform:translateY(102%);transition:transform 180ms cubic-bezier(.22,.9,.28,1)}
.sticky.show{transform:none}
/* padding-block, not the shorthand — the shorthand would reset .wrap's gutters,
   which share this element, and push the bar's content to the screen edge */
.sticky-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:14px}
.sticky-txt{font-family:var(--font-display);color:#fff;font-size:15px;text-transform:uppercase;letter-spacing:-.01em;line-height:1.2}
.sticky-sub{font-size:13px;color:rgba(255,255,255,.72);font-weight:600;letter-spacing:.04em;margin-top:4px;text-transform:uppercase;font-family:'Archivo',sans-serif}
/* reveal */
.rv{opacity:0;transform:translateY(12px);transition:opacity 320ms cubic-bezier(.22,.9,.28,1),transform 320ms cubic-bezier(.22,.9,.28,1)}
.rv.in{opacity:1;transform:none}
/* lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(14,18,51,.72);display:grid;place-items:center;padding:40px}
.lb-in{height:min(82vh,760px);aspect-ratio:9/16;max-width:92vw;border:3px solid var(--ink);background:#000;position:relative}
.lb-x{position:absolute;top:-3px;right:-3px;transform:translateY(-100%);background:var(--ckp-crimson);color:#fff;border:3px solid var(--ink);font-size:20px;line-height:1;width:44px;height:44px;cursor:pointer;font-family:var(--font-display)}
/* thank you */
.ty{min-height:100vh;background:var(--ckp-crimson);display:grid;place-items:center;padding:80px 24px}
.ty-card{background:#fff;border:3px solid var(--ink);box-shadow:12px 12px 0 var(--ink);max-width:760px;width:100%;padding:56px}
.ty-step{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.ty-step b{font-family:var(--font-display);font-size:13px;letter-spacing:.1em;color:#fff;background:var(--ink);padding:6px 10px;font-weight:400}
@media (max-width:1180px){
.trust-list{grid-template-columns:repeat(3,1fr)}
.trust-list li{padding:18px 13px}
.trust-list li span{font-size:11.5px;letter-spacing:.02em;line-height:1.4}
.trust-badge{padding-right:26px}
.trust-badge img{width:100px}
.wrap{padding:0 40px}
.hero-l{padding:56px 44px 52px 0}
.hero-r{padding:56px 0 52px 40px}
.hero h1{font-size:clamp(34px,4.6vw,52px)}
.dgrid{grid-template-columns:repeat(2,1fr)}
.connect{grid-template-columns:minmax(180px,240px) 1fr}
.cn-msg{padding-left:32px}
.jgrid{gap:44px}
}
@media (max-width:860px){
.wrap{padding:0 32px}
.sec{padding:72px 0}
/* header: on a phone there is only room for the mark, the name and the CTA */
.hdr-in{height:62px;gap:12px}
.hdr-brand{gap:9px}
.hdr-brand img{width:30px;height:30px}
.hdr-name{font-size:13px;white-space:nowrap}
.hdr-sub,.hdr-meta .eyebrow{display:none}
.hero-grid,.jgrid,.final-grid{grid-template-columns:1fr;gap:3px}
/* Section 01/02/03 two-column grids set grid-template-columns inline from JSX,
   so collapsing them on mobile needs !important to win over the inline style. */
.s1-grid,.s2-grid,.s3-grid{grid-template-columns:1fr!important;gap:32px!important}
.hero-top{padding:48px 0 36px}
.hero-l{padding:48px 0 44px}
.connect{grid-template-columns:1fr;gap:32px}
.cn-src>span{padding:16px 0}
.cn-src>span:after{display:none}
.cn-msg{border-left:0;border-top:2px solid var(--ckp-crimson);padding:28px 0 0}
.trust{grid-template-columns:1fr;gap:0}
.trust-list{grid-template-columns:repeat(2,1fr)}
.trust-badge{align-self:start;border-right:0;border-bottom:1px solid var(--gray-200);padding:18px 0}
.trust-list li{padding:18px 16px 18px 0;border-right:0;border-bottom:1px solid var(--gray-200)}
.trust-list li span{font-size:12px}
.hand{grid-template-columns:1fr}
.hand>div,.hand>div+div{padding:24px 0 0;border-right:0;border-top:1px solid var(--gray-200)}
.hero-r{padding:40px 0 48px}
.jgrid,.final-grid{gap:44px;background:none}
.jphoto{max-width:380px}
.dgrid,.qband,.hand,.clock{grid-template-columns:1fr}
.dcell{min-height:auto}
/* coverage: stack the zones, turn the vertical gaps into horizontal hatched bands */
.cover-row{grid-template-columns:1fr}
.cov-gap{height:46px;border:0;border-top:2px dashed var(--ckp-crimson);border-bottom:2px dashed var(--ckp-crimson)}
.cov-gap span{writing-mode:horizontal-tb;transform:none}
.cover-foot{grid-template-columns:1fr;gap:22px;padding:26px 24px}
.cf-label{max-width:none}
.cover-foot ul{grid-template-columns:1fr;gap:14px}
.merge-top{grid-template-columns:1fr;gap:14px}
/* stacked sources: the three-way converge makes no sense, so drop one clean line */
.merge-svg{display:none}
.merge-into{margin-top:36px;padding:30px 24px;box-shadow:6px 6px 0 rgba(255,255,255,.14)}
.merge-into:before{content:'';position:absolute;left:50%;top:-36px;width:2px;height:36px;background:var(--ckp-crimson);transform:translateX(-50%)}
.vwrap{grid-template-columns:1fr;gap:36px}
.vstage{max-width:340px}
.vstrip{max-width:none}
.ftr-grid{grid-template-columns:1fr;gap:32px}
.quote{padding:36px 28px}
}
@media (max-width:560px){
/* 32px gutters waste a phone screen; and the header only has room for mark + CTA */
.wrap{padding:0 20px}
.hdr-name{display:none}
/* the sticky bar's full date line wraps to five lines on a phone — the countdown
   and the seat count are the parts that actually drive the click */
.sticky-txt{display:none}
.sticky-sub{margin-top:0;font-size:11.5px;letter-spacing:.02em}
.sticky-in{padding-block:11px;gap:14px}
.sticky-in>a{flex:none}
.s-min,.s-of{display:none}
/* the 88px number gutter is desktop rhythm; on a phone it just steals width */
.qrow{grid-template-columns:34px 1fr;gap:14px;padding:24px 0}
.vstrip{gap:8px}
.quote{padding:30px 22px}
.cov{padding:26px 22px 22px}
.cover-foot{padding:24px 22px}
.merge-into{padding:24px 22px}

/* The date line is nowrap so it stays on one line beside the card title on a
   desktop. On a phone it needs 313px in a 270px head, and .formcard clips its
   overflow, so it was being cut mid-word — "(GMT+8) · ONL". Let it wrap. */
.form-when{white-space:normal;line-height:1.45}
.form-head{gap:4px 14px}

/* The note is capped at 19ch so it can sit beside the button on a desktop. Once
   the button goes full-width above it, that cap only forces a ragged two-line
   break in the middle of a sentence. */
.hero-act-note{max-width:none}

/* The sticky CTA is position:fixed, so it sits on top of the document rather
   than in it, and was permanently covering the last 34px of the footer — the
   webinar date line could not be read at any scroll position. Clear its height
   plus a little breathing room. */
.ftr{padding-bottom:104px}

/* The email never fits beside the phone number on a phone, so it wraps and
   leaves the separator stranded at the end of the line. Drop the separator and
   give the address its own line instead. */
.ftr-sep{display:none}
.ftr .ftr-mail{display:block} /* .ftr a already sets inline-block, so match its specificity */
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}.rv{opacity:1;transform:none}}