/* cx: checkout redesign (2026-11-04, James: "less friction and more compelling ... the terms section is hard to read,
   a lot of numbers ... highlight the 25% with a countdown ... redesign the urgency blind ... the lower-to-$2,500 error").
   One clock idiom everywhere: lime surface, navy Rink figures, Aptos bold caps labels (two type styles, per 2026-10-13).
   Lime = the time-limited part of the bonus, so the investment-bonus swatch is lime too.
   One percentage per line (James 2026-10-15). Loaded by /reg-cf/v2/ and /reg-cf/v2/checkout/. */

/* ---------- shared clock card (popup terms panel, checkout summary) ---------- */
.cxc{position:relative;display:grid;gap:10px;padding:16px 18px 15px;border-radius:16px;color:#0d1b2a;background:linear-gradient(120deg,#cfdb55 0,#dfe977 55%,#d4e05f 100%);box-shadow:0 18px 34px -24px rgba(212,224,95,.9),inset 0 1px 0 rgba(255,255,255,.5)}
.cxc[hidden],.cxm[hidden],.cxt[hidden]{display:none!important}
.cxc p,.cxm p{margin:0}
.cxc-k{display:flex;align-items:center;gap:9px;font:700 11.5px/1.2 var(--fb);letter-spacing:.09em;text-transform:uppercase}
.cxc-k b{font:inherit;letter-spacing:inherit}
.cx-dot{position:relative;flex:none;width:9px;height:9px;border-radius:50%;background:#0d1b2a}
.cx-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(13,27,42,.45);animation:cxping 2.2s ease-out infinite}
@keyframes cxping{0%{transform:scale(.55);opacity:1}80%,to{transform:scale(1.45);opacity:0}}
.cxc-t{display:flex;gap:16px;margin:2px 0 0}
.cxc-t span{position:relative;display:grid;justify-items:center;min-width:42px}
.cxc-t span+span::before{content:":";position:absolute;left:-12px;top:-1px;font:500 30px/1 var(--fh);color:rgba(13,27,42,.35)}
.cxc-t b{font:500 36px/1 var(--fh);letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.cxc-t small{margin-top:5px;font:700 11px/1 var(--fb);letter-spacing:.1em;text-transform:uppercase;color:rgba(13,27,42,.6)}
.cxc-bar{display:block;height:3px;border-radius:3px;background:rgba(13,27,42,.13);overflow:hidden}
.cxc-bar i{display:block;height:100%;width:50%;border-radius:3px;background:#0d1b2a;transition:width 1s linear}
.cxc-e{font:600 12.5px/1.4 var(--fb);color:rgba(13,27,42,.78);text-wrap:balance}
/* last 24 hours: "Last day" chip, no days unit, figures in red */
.cxc.is-last .cxc-t span:first-child,.cxm.is-last .cxm-d,.cxt.is-last .cxt-d{display:none}
.cxc.is-last .cxc-t span:nth-child(2)::before{display:none}
.cxc.is-last .cxc-t b,.cxm.is-last .cxm-t b{color:#a3201a}
.cxc.is-last .cxc-k::before,.cxm.is-last .cxm-k::before{content:"Last day";flex:none;padding:3px 7px;border-radius:6px;background:#a3201a;color:#fff;font:700 11px/1.2 var(--fb);letter-spacing:.08em}
.cxc.is-last .cx-dot,.cxm.is-last .cx-dot{display:none}

/* ---------- bonus block + parts list (dark surfaces) ---------- */
.cxb{display:grid;gap:2px}
.cxb p{margin:0}
.cxb-l{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:14px;color:#cfd6e0}
.cxb-l b{color:#fff;font-weight:700}
.cxb-l .pop-tag{margin:0}
.cxb-n{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.cxb-n b{font:500 54px/1.02 var(--fh);color:#fff;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.cxb-n small{font-size:13px;color:#9aa6b6}
.cxp{list-style:none;margin:10px 0 0;padding:0;display:grid}
.cxp li{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:10px;padding:9px 0;border-top:1px solid rgba(255,255,255,.1);font-size:14px;color:#cfd6e0}
.cxp li[hidden]{display:none}
.cxp li>i{width:10px;height:10px;border-radius:3px}
.cxp-eb>i{background:#d4e05f}
.cxp-vol>i{background:#70cddc}
.cxp-rep>i{background:#fff}
.cxp b{font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.cxp-eb b{color:#d4e05f}

/* ---------- invest page popup: "Your terms today" panel ---------- */
#start .cxs{gap:18px}
#start .cxs .ss-k{margin-bottom:-4px}
#start .cxs .ss-note{margin-top:-6px}
@media (max-width:860px){
  #start .cxs{grid-template-columns:1fr;gap:12px;padding:20px 16px 16px}
  #start .cxs .ss-k{font-size:12px;margin:0 0 16px;padding-right:52px}
  /* one ticket (James 2026-11-04, "the bonus header on step 1 could be better designed"): the countdown fills the lime
     half on one line of its own, the drain line closes it, and the total is the white lower half, so the panel reads as
     one card instead of a cramped card plus a floating number */
  #start .cxs .cxc{grid-template-columns:1fr;gap:8px;padding:12px 16px 0;border-radius:16px 16px 0 0;box-shadow:none;overflow:hidden}
  #start .cxs .cxc-k{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;font-size:11px;letter-spacing:.09em;color:rgba(13,27,42,.75)}
  #start .cxs .cxc-k b{color:#0d1b2a}
  #start .cxs .cxc-k .cx-dot{display:none}
  #start .cxs .cxc-t{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;margin:0}
  #start .cxs .cxc-t span{min-width:0}
  #start .cxs .cxc-t span+span::before{left:0;top:1px;transform:translateX(-50%);font-size:24px;color:rgba(13,27,42,.28)}
  #start .cxs .cxc-t b{font-size:32px}
  #start .cxs .cxc-t small{font-size:10.5px;letter-spacing:.09em;margin-top:6px;color:rgba(13,27,42,.55)}
  #start .cxs .cxc-bar{height:4px;margin:2px -16px 0;border-radius:0}
  #start .cxs .cxc-bar i{border-radius:0}
  #start .cxs .cxc-e{display:none}
  #start .cxs .cxc.is-last .cxc-k::before{align-self:center}
  #start .cxs .cxb{grid-template-columns:1fr auto;align-items:center;column-gap:12px}
  #start .cxs .cxb-l{font-size:13px}
  #start .cxs .cxb-n{grid-row:1/3;grid-column:2}
  #start .cxs .cxb-n b{font-size:34px}
  #start .cxs .cxb-n small,#start .cxs .cxp{display:none}
  /* only while the countdown shows; after Nov 12 the total falls back to the plain dark row above */
  #start .cxs .cxc:not([hidden])+.cxb{margin-top:-12px;padding:14px 16px;border-radius:0 0 16px 16px;background:#fff;box-shadow:0 20px 34px -22px rgba(0,0,0,.7)}
  #start .cxs .cxc:not([hidden])+.cxb .cxb-l{grid-row:1/3;align-self:center;color:#5b5670;font:700 11px/1.25 var(--fb);letter-spacing:.09em;text-transform:uppercase}
  #start .cxs .cxc:not([hidden])+.cxb .cxb-l b{color:#2d1f4a}
  #start .cxs .cxc:not([hidden])+.cxb .cxb-n b{color:#2d1f4a;font-size:32px}
}
@media (max-width:374px){
  #start .cxs .cxc-t b{font-size:27px}
  #start .cxs .cxc-t span+span::before{font-size:20px}
  #start .cxs .cxc:not([hidden])+.cxb .cxb-l{font-size:10.5px}
  #start .cxs .cxc:not([hidden])+.cxb .cxb-n b{font-size:27px;font-weight:500}
}

/* ---------- checkout: summary card ---------- */
.co-d .sumcard.cxs{gap:18px}
.co-d .sumcard.cxs .ss-k{margin-bottom:-4px}
.co-d .sumcard .sum dt small{display:block;margin-top:2px;font-size:12px;color:#9aa6b6}
.co-d .sumcard .cxp{margin-top:8px}

/* ---------- checkout: mobile countdown strip on the summary toggle ---------- */
.cxm{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;padding:11px 16px;border-radius:16px 16px 0 0;color:#0d1b2a;background:linear-gradient(110deg,#cfdb55 0,#dfe977 60%,#d4e05f 100%)}
.cxm-k{display:flex;align-items:center;gap:8px;font:700 10.5px/1.15 var(--fb);letter-spacing:.08em;text-transform:uppercase}
.cxm-k b{font:inherit;letter-spacing:inherit}
.cxm-t{font:700 11px/1 var(--fb);color:rgba(13,27,42,.62);white-space:nowrap}
.cxm-t b{font:500 19px/1 var(--fh);color:#0d1b2a;font-variant-numeric:tabular-nums;margin-left:5px}
.cxm-t b:first-child{margin-left:0}
.cxm:not([hidden])+.co-sumbar{border-top-left-radius:0!important;border-top-right-radius:0!important}
@media (min-width:1001px){.cxm{display:none!important}}

/* ---------- checkout step 2: bonus result (replaces cap box + stack bar + legend) ---------- */
.co-d .cxr{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:8px 28px;align-items:start;padding:16px 0 4px;border-top:1px solid #ece7df}
.co-d .cxr-n{display:grid;gap:2px}
.co-d .cxr-n span{font-size:14px;color:#67646d}
.co-d .cxr-n b{font:400 clamp(46px,7vw,58px)/1 var(--fh);color:#00667f;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.co-d .cxr-n small{font-size:13px;color:#67646d}
.co-d .cxp-lt{margin:0;align-self:center}
.co-d .cxp-lt li{border-top:1px solid #ece7df;color:#4c4c4c;font-size:14.5px}
.co-d .cxp-lt li:first-child{border-top:0}
.co-d .cxp-lt b{color:#2d1f4a}
.co-d .cxp-lt .cxp-eb>i{background:#b7c43a}
.co-d .cxp-lt .cxp-eb b{color:#2d1f4a}
.co-d .cxp-lt .cxp-vol>i{background:#00667f}
.co-d .cxp-lt .cxp-rep>i{background:#2d1f4a}
.co-d .cxp-lt li>span{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.cxt{display:inline-block;padding:3px 8px;border-radius:999px;background:#d4e05f;color:#0d1b2a;font:700 11px/1.2 var(--fb);font-style:normal;white-space:nowrap}
.cxt b{font-weight:700;font-variant-numeric:tabular-nums}
.cxt.is-last{background:#a3201a;color:#fff}
@media (max-width:560px){.co-d .cxr{grid-template-columns:1fr;gap:6px}}
/* desktop: the summary card beside the step already shows the bonus, so the step keeps only the next-tier nudge */
@media (min-width:1001px){.co-d .cxr{display:none}}

/* ---------- checkout step 3: Regulation CF limit (replaces the red error box) ---------- */
.co-d .limit.cxl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 14px;justify-items:stretch;align-items:start;margin-top:6px;padding:16px 18px;border-radius:16px;background:rgba(63,174,90,.08);box-shadow:inset 0 0 0 1px rgba(63,174,90,.32);font-size:15px}
.co-d .limit.cxl[hidden]{display:none}
.co-d .limit.cxl.is-over{background:#f4f1fa;box-shadow:inset 0 0 0 1px rgba(60,42,95,.2),0 14px 30px -24px rgba(45,31,74,.6)}
.cxl-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#3fae5a;color:#fff}
.cxl-ico svg{width:18px;height:18px}
.cxl-ico .i-over{display:none}
.is-over .cxl-ico{background:#3c2a5f}
.is-over .cxl-ico .i-ok{display:none}
.is-over .cxl-ico .i-over{display:block}
.cxl-b{display:grid;gap:6px;min-width:0}
.cxl-b p{margin:0}
.cxl-h{font:700 16.5px/1.3 var(--fb);color:#2d1f4a}
.cxl-p{color:#4c4c4c;line-height:1.45}
.cxl-a{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:8px}
.cxl-a[hidden]{display:none}
.co-d .cxl [data-lower]{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-height:46px;padding:0 20px;border:0;border-radius:999px;background:#2d1f4a;color:#fff;font:700 15px/1 var(--fb);box-shadow:0 10px 20px -12px rgba(45,31,74,.9);cursor:pointer}
.co-d .cxl [data-lower]:hover{background:#3c2a5f}
.co-d .cxl [data-lower][hidden]{display:none}
.co-d .cxl [data-lower] svg{flex:none;width:15px;height:15px;margin-left:8px}
.cxl-edit{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:0 0;color:#00667f;font:700 14.5px/1.2 var(--fb);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cxl-edit[hidden]{display:none}
.cxl-bonus{display:inline-flex;align-items:center;gap:8px;justify-self:start;margin-top:4px!important;padding:6px 11px;border-radius:10px;background:rgba(212,224,95,.38);color:#2d1f4a;font-size:14px;font-weight:600}
.cxl-bonus:empty{display:none!important}
@media (max-width:560px){.co-d .limit.cxl{grid-template-columns:1fr;padding:16px}.cxl-ico{width:30px;height:30px}.co-d .cxl [data-lower]{width:100%;justify-content:center}}

@media (prefers-reduced-motion:reduce){.cx-dot::after{animation:none;opacity:0}}

/* 320-374px: the checkout summary card's content box is ~224px, so the clock steps down to fit (QA 2026-11-04) */
@media (max-width:374px){
  .co-d .sumcard.cxs .cxc{padding:14px 14px 13px}
  .co-d .sumcard.cxs .cxc-t{gap:12px}
  .co-d .sumcard.cxs .cxc-t span{min-width:34px}
  .co-d .sumcard.cxs .cxc-t span+span::before{left:-9px;font-size:24px}
  .co-d .sumcard.cxs .cxc-t b{font-size:29px}
}

/* ---------- option 3, popup step 1 (James 2026-11-04, "Build option 3"): the investor's total bonus leads, at one large
   size, and the countdown runs on one lime line under it. One label style, one hero number, one body size. ---------- */
#start .cxs .cxb{display:block;padding:18px 18px 16px;border-radius:16px;background:#fff;color:#2d1f4a;box-shadow:0 20px 34px -22px rgba(0,0,0,.7)}
#start .cxs .cxb-l{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;font:700 11.5px/1.25 var(--fb);letter-spacing:.09em;text-transform:uppercase;color:#6a6480}
#start .cxs .cxb-l b{color:#6a6480;font-weight:700}
#start .cxs .cxb-n{display:flex;align-items:flex-end;flex-wrap:nowrap;gap:12px;margin:8px 0 14px;grid-row:auto;grid-column:auto}
#start .cxs .cxb-n b{font:500 60px/.9 var(--fh);color:#2d1f4a;letter-spacing:-.015em}
#start .cxs .cxb-n small{display:block;max-width:9.5em;padding-bottom:3px;font:500 14px/1.3 var(--fb);color:#6a6480}
#start .cxs .cxc{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;margin:0;padding:11px 12px;border-radius:10px;background:#d4e05f;box-shadow:none;overflow:visible}
#start .cxs .cxc-k{display:block;margin:0;font:500 14.5px/1.25 var(--fb);letter-spacing:0;text-transform:none;color:#0d1b2a}
#start .cxs .cxc-k b{font:inherit;font-weight:800;color:#0d1b2a}
#start .cxs .cxc-t{display:flex;gap:5px;margin:0;white-space:nowrap}
#start .cxs .cxc-t span{display:inline;min-width:0}
#start .cxs .cxc-t span+span::before{content:none}
#start .cxs .cxc-t b{font:800 14.5px/1.25 var(--fb);letter-spacing:0;color:#0d1b2a;font-variant-numeric:tabular-nums}
#start .cxs .cxc-t span:nth-child(1) b::after{content:"d"}
#start .cxs .cxc-t span:nth-child(2) b::after{content:"h"}
#start .cxs .cxc-t span:nth-child(3) b::after{content:"m"}
#start .cxs .cxc-t span:nth-child(4) b::after{content:"s"}
#start .cxs .cxc-t small{display:none}
#start .cxs .cxc.is-last .cxc-t b{color:#a3201a}
#start .cxs .cxc.is-last .cxc-t span:first-child{display:none}
#start .cxs .cxc.is-last .cxc-k::before{display:inline-block;margin-right:8px;vertical-align:1px}
#start .cxs .cxp{display:grid;margin:12px 0 0}
#start .cxs .cxp li{color:#5b5670;border-top-color:#ece9f2}
#start .cxs .cxp b,#start .cxs .cxp-eb b{color:#2d1f4a}
#start .cxs .cxp-eb>i{background:#c3d04a}
#start .cxs .cxp-rep>i{background:#2d1f4a}
@media (max-width:860px){
  #start .cxs{gap:10px}
  #start .cxs .ss-k{margin-bottom:12px}
  #start .cxs .cxb{padding:14px 14px 10px}
  #start .cxs .cxb-n{margin:6px 0 10px}
  #start .cxs .cxb-n b{font-size:52px}
  #start .cxs .cxc{padding:9px 12px}
  #start .cxs .cxp{margin-top:6px}
  #start .cxs .cxp li{padding:7px 0;font-size:14px}
  #start .cxs .cxp li:first-child{border-top:0}
  /* the parts sit side by side so the breakdown costs one row, keeping step 1's Continue on screen at 390x844 */
  #start .cxs .cxp{display:flex;flex-wrap:wrap;gap:0 18px}
  #start .cxs .cxp li{grid-template-columns:9px auto auto;justify-content:start;gap:7px;border-top:0;font-size:14px}
  #start .cxs .cxp li[hidden]{display:none}
  #start .cxs .cxp li>i{width:9px;height:9px}
}
@media (max-width:374px){
  #start .cxs .cxb-n b{font-size:48px}
  #start .cxs .cxp{display:grid;gap:0}
  #start .cxs .cxp li{grid-template-columns:9px 1fr auto;padding:5px 0}
  #start .cxs .cxc-k,#start .cxs .cxc-t b{font-size:13.5px}
}

/* the total sits with its parts (James 2026-11-04, "the 31% needs to be presented with the breakdown"): 31% on the left,
   the bonuses that make it up stacked beside it, the valuation cap under both, then the countdown line. */
#start .cxs .cxb-n{display:flex;align-items:center;gap:16px;margin:8px 0 0}
#start .cxs .cxb-n b{font-size:56px}
#start .cxs .cxb-n .cxp{display:grid;gap:3px;flex:1;min-width:0;margin:0;padding:2px 0 2px 16px;border-left:1px solid #e4e0ec}
#start .cxs .cxb-n .cxp li{display:grid;grid-template-columns:9px 1fr auto;gap:8px;padding:2px 0;border:0;font-size:14px;color:#5b5670}
#start .cxs .cxb-n .cxp li[hidden]{display:none}
#start .cxs .cxb-n .cxp li>i{width:9px;height:9px}
#start .cxs .cxb-n .cxp b{font:700 14px/1.3 var(--fb);color:#2d1f4a}
#start .cxs .cxb-cap{margin:8px 0 12px;font:500 13px/1.3 var(--fb);color:#6a6480}
@media (max-width:860px){#start .cxs .cxb-n{margin-top:6px}#start .cxs .cxb-n b{font-size:52px}#start .cxs .cxb-cap{margin:6px 0 10px}}
@media (max-width:374px){
  #start .cxs .cxb-n{display:grid;gap:8px}
  #start .cxs .cxb-n b{font-size:48px}
  #start .cxs .cxb-n .cxp{padding:8px 0 0;border-left:0;border-top:1px solid #e4e0ec}
}

/* phones show the days left, not the running clock (James 2026-11-04, "I prefer 8 days left on mobile rather than the countdown"); desktop keeps the clock */
#start .cxs .cxc-dd{display:none;margin:0;font:800 14.5px/1.25 var(--fb);color:#0d1b2a}
#start .cxs .cxc.is-last .cxc-dd{color:#a3201a}
@media (max-width:760px){
  #start .cxs .cxc-t,#start .cxs .cxc-in{display:none}
  #start .cxs .cxc-dd{display:block}
}
@media (max-width:374px){#start .cxs .cxc-dd{font-size:13.5px}}

/* narrow card (the desktop aside is 293px, James 2026-11-04 "formatting needs to be fixed"): the parts sit in full-width rows under
   the 31%, and the clock gets a line of its own at a size that reads as the countdown, instead of wrapping by accident */
#start .cxs .cxb{container-type:inline-size}
@container (max-width:300px){
  #start .cxs .cxb-n{display:block}
  #start .cxs .cxb-n b{display:block;font-size:60px}
  #start .cxs .cxb-n .cxp{display:grid;gap:0;margin:0;padding:0;border:0}
  #start .cxs .cxb-n .cxp{margin-top:10px}
  #start .cxs .cxb-n .cxp li{padding:8px 0;border-top:1px solid #ece9f2;font-size:14.5px}
  #start .cxs .cxb-cap{margin:10px 0 14px}
  #start .cxs .cxc{display:grid;gap:3px;padding:11px 14px 12px}
  #start .cxs .cxc-k{font-size:13.5px}
  #start .cxs .cxc-t{gap:9px}
  #start .cxs .cxc-t b{font:500 21px/1.15 var(--fh);letter-spacing:-.005em}
}
/* small phones keep "25% bonus · 8 days left" on one row (the clock is hidden there) */
@media (max-width:760px){@container (max-width:300px){#start .cxs .cxc{display:flex;justify-content:space-between;padding:9px 12px}}}
/* phones lead with the days, like the bar (James 2026-11-04, "in the yellow bar, I want 8 days left..."): "8 days left for the 25% bonus" */
#start .cxs .cxc-for{display:none}
@media (max-width:760px){
  #start .cxs .cxc,#start .cxs .cxc.cxc{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:baseline;gap:7px}
  #start .cxs .cxc-dd{order:-1;font:800 15px/1.25 var(--fb)}
  #start .cxs .cxc-k{font-weight:500}
  #start .cxs .cxc-k b{font-weight:500}
  #start .cxs .cxc-for{display:inline}
  #start .cxs .cxc.is-last .cxc-k::before{display:none}
}
@media (max-width:760px){@container (max-width:300px){#start .cxs .cxc{justify-content:flex-start}}}
@media (max-width:374px){#start .cxs .cxc-dd{font-size:14px}#start .cxs .cxc-k{font-size:13.5px}}
/* phones add the deadline under the days (James 2026-11-04, "in the yellow bar also add the Expires 11/12 at midnight PST") */
#start .cxs .cxc-lab{display:none;margin:0;font:500 13px/1.25 var(--fb);color:rgba(13,27,42,.7)}
@media (max-width:760px){
  #start .cxs .cxc,#start .cxs .cxc.cxc{flex-wrap:wrap;row-gap:2px;padding:9px 12px 10px}
  #start .cxs .cxc-lab{display:block;flex-basis:100%;order:1}
}
@media (max-width:760px){@container (max-width:300px){#start .cxs .cxc{flex-wrap:wrap}}}
@media (max-width:374px){#start .cxs .cxc-lab{font-size:12.5px}}
/* phones: win back the deadline line's height so Continue stays on screen at 375x812 */
@media (max-width:760px){
  #start .cxs .cxb{padding:12px 14px 12px}
  #start .cxs .cxb-n{margin-top:4px}
  #start .cxs .cxb-n b{font-size:48px}
  #start .cxs .cxb-cap{margin:4px 0 8px}
  #start .cxs .cxc,#start .cxs .cxc.cxc{padding:8px 12px 9px}
}
@media (max-width:760px){#start .cxs .cxc,#start .cxs .cxc.cxc{row-gap:0;padding:7px 12px 8px}#start .cxs .cxb-cap{margin:3px 0 7px}#start .cxs .cxb{padding-bottom:10px}}

/* step 1 wait state (see cx.js): the Continue button becomes the loading bar. A darker band fills it from the left
   (eases toward 92% over ~6s, so a slow answer still shows movement), the arrow turns into a spinner. */
#start [type=submit]{position:relative;overflow:hidden;isolation:isolate}
#start [type=submit]::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(13,27,42,.13);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
#start [type=submit].is-wait{cursor:progress;opacity:1;filter:none}
#start [type=submit].is-wait::before{animation:cxfill 6s cubic-bezier(.12,.7,.25,1) forwards}
@keyframes cxfill{0%{transform:scaleX(0)}12%{transform:scaleX(.38)}100%{transform:scaleX(.92)}}
#start [type=submit].is-wait .ico{display:none}
#start [type=submit].is-wait::after{content:"";flex:none;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:cxspin .7s linear infinite}
@keyframes cxspin{to{transform:rotate(360deg)}}
#start .cx-sr{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){#start [type=submit].is-wait::before{animation:none;transform:scaleX(.6)}#start [type=submit].is-wait::after{animation-duration:1.6s}}