/* ============================================================================
   NEXUSBODY · commerce.css · program detail pages, start/checkout, sticky CTAs
   ----------------------------------------------------------------------------
   NEW FILE. Loaded AFTER styles.css on the pages that need it. Nothing in
   styles.css is edited. Every value references the brand tokens defined in
   styles.css :root (--navy, --porcelain, --line, and the type scale), so the
   commerce surfaces read as one system with the rest of the site.

   Scope map:
     .pdp-*      program detail page (hero, sections, illustrated app phone,
                 tier selector, start CTAs)
     .co-*       start / checkout page (order summary, trial framing, capture,
                 payment, interim trial-provisioning state)
     .nb-mcta    the sticky mobile call-to-action bar (all commerce + pass pages)
     .closer-cta / .btn-inverse-line  the dual-CTA block added to page closers
   ============================================================================ */

/* ============================================================================
   0 · SHARED · closer dual-CTA + sticky mobile CTA bar
   ============================================================================ */

/* two CTAs in a page closer (primary quiz + a relevant secondary), centered */
.closer-cta{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap}

/* a secondary button that reads on the dark closer background */
.btn-inverse-line{background:transparent;color:var(--porcelain);border-color:rgba(247,245,240,.55)}
.btn-inverse-line:hover{background:rgba(247,245,240,.10);border-color:var(--porcelain)}

/* sticky mobile CTA: fixed to the bottom on small screens, hidden on desktop */
.nb-mcta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:none;align-items:center;justify-content:space-between;gap:14px;
  background:var(--navy-deep);color:var(--porcelain);
  padding:11px 16px;
  border-top:var(--hairline-width) solid rgba(174,180,192,.28);
  box-shadow:0 -10px 26px -14px rgba(15,22,42,.55);
  padding-bottom:calc(11px + env(safe-area-inset-bottom, 0px));
}
.nb-mcta-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.nb-mcta-k{font-size:10px;font-weight:var(--weight-semibold);letter-spacing:1.4px;text-transform:uppercase;color:var(--slate-light)}
.nb-mcta-tier{font-size:14px;font-weight:var(--weight-semibold);color:var(--porcelain);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb-mcta-btn{
  flex:none;background:var(--porcelain);color:var(--navy);
  font-family:var(--font-body);font-size:14px;font-weight:var(--weight-semibold);
  text-decoration:none;text-align:center;white-space:nowrap;
  padding:12px 18px;border-radius:4px;border:var(--hairline-width) solid transparent;
  transition:background .15s ease;
}
.nb-mcta-btn:hover{background:var(--paper)}
@media (max-width:900px){
  .nb-mcta{display:flex}
  /* keep the fixed bar from covering the last line of the footer */
  body:has(.nb-mcta){padding-bottom:74px}
}

/* ============================================================================
   1 · PROGRAM DETAIL PAGE · hero
   ============================================================================ */
.pdp-hero{padding:88px 0 60px}
.pdp-hero .wrap-editorial{padding-left:24px;padding-right:24px}
.pdp-arc{
  display:inline-block;
  font-size:11px;font-weight:var(--weight-semibold);
  letter-spacing:1.8px;text-transform:uppercase;color:var(--navy);
  border:var(--hairline-width) solid var(--line);border-radius:999px;
  padding:6px 14px;background:var(--paper);margin-bottom:22px;
}
.pdp-name{
  font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;
  font-size:clamp(2.4rem,6vw,4.25rem);letter-spacing:.05em;line-height:1.04;color:var(--navy);
  margin-bottom:18px;
}
.pdp-promise{
  font-family:var(--font-editorial);font-weight:var(--weight-editorial);
  font-size:clamp(1.375rem,2.6vw,1.9rem);line-height:1.3;color:var(--navy);
  max-width:26ch;margin-bottom:16px;
}
.pdp-builds{
  font-size:13px;font-weight:var(--weight-semibold);letter-spacing:.4px;
  color:var(--slate);text-transform:none;margin-bottom:32px;
}
.pdp-hero-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.pdp-hero-note{margin-top:14px}

/* section rhythm on the PDP reuses .section / .wrap / .section-head from
   styles.css. these are the PDP-specific content blocks. */
.pdp-what-body{
  font-family:var(--font-editorial);font-size:clamp(1.25rem,2.2vw,1.5rem);
  line-height:1.5;color:var(--navy);max-width:40ch;
}
.pdp-section-note{margin-top:20px}

/* weekly structure preview: honest generic shape of a week, numbered */
.pdp-weekly-list{list-style:none;border-top:var(--hairline-width) solid var(--line);max-width:760px}
.pdp-weekly-list li{
  display:flex;gap:22px;align-items:baseline;
  padding:22px 0;border-bottom:var(--hairline-width) solid var(--line);
}
.pdp-wk-num{
  font-family:var(--font-display);font-weight:var(--weight-display);color:var(--slate);
  font-size:1.125rem;min-width:2.4ch;letter-spacing:.04em;
}
.pdp-wk-text{font-size:1.0625rem;color:var(--navy);line-height:1.4}

/* who it is for */
.pdp-whofor-body{font-size:1.0625rem;color:var(--slate);line-height:1.65;max-width:56ch}
.pdp-fit{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:24px;max-width:52ch}
.pdp-fit li{position:relative;padding-left:24px;color:var(--navy);font-size:.9375rem;line-height:1.5}
.pdp-fit li::before{
  content:"";position:absolute;left:0;top:8px;width:8px;height:8px;
  border:1.5px solid var(--navy);border-radius:1px;
}

/* ============================================================================
   2 · PROGRAM DETAIL PAGE · the illustrated app phone
   ----------------------------------------------------------------------------
   Replicates the homepage device component with fully scoped .pdp-* classes,
   so the PDP phone is self-contained (no dependency on the homepage rules).
   ============================================================================ */
.pdp-app{display:flex;flex-direction:column;align-items:center;gap:20px}
.pdp-phone{--dw:300px;width:var(--dw);max-width:100%;margin:0 auto}
.pdp-phone-frame{
  position:relative;aspect-ratio:9 / 19.3;
  background:linear-gradient(155deg,#2b3a5f 0%,#1b2745 46%,#141d36 100%);
  border-radius:46px;padding:11px;
  box-shadow:
    0 34px 70px -26px rgba(15,22,42,.55),
    0 4px 14px -6px rgba(15,22,42,.4),
    0 0 0 1px rgba(30,43,77,.18),
    0 0 0 6px rgba(30,43,77,.06);
}
.pdp-phone-island{
  position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:34%;height:22px;background:linear-gradient(#0c142a,#0b1024);border-radius:14px;z-index:4;
}
.pdp-phone-screen{
  position:relative;height:100%;background:var(--porcelain);
  border-radius:35px;overflow:hidden;
}
.pdp-scr{height:100%;display:flex;flex-direction:column;padding:40px 20px 20px;gap:13px;color:var(--navy)}
.pdp-scr-status{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:var(--weight-semibold);opacity:.62;letter-spacing:.02em}
.pdp-scr-bat{width:22px;height:11px;border:1.5px solid var(--navy);border-radius:3px;position:relative}
.pdp-scr-bat::after{content:"";position:absolute;top:2px;bottom:2px;left:2px;width:11px;background:var(--navy);border-radius:1px}
.pdp-scr-k{font-family:var(--font-body);font-size:10px;font-weight:var(--weight-semibold);letter-spacing:1.8px;text-transform:uppercase;color:var(--slate)}
.pdp-scr-goal{display:flex;flex-direction:column;gap:5px;border-bottom:var(--hairline-width) solid var(--line);padding-bottom:12px}
.pdp-scr-goal strong{font-family:var(--font-editorial);font-weight:var(--weight-editorial);font-size:20px;line-height:1.05}
.pdp-gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:15px 6px;padding:4px 0}
.pdp-gauge{display:flex;flex-direction:column;align-items:center;gap:7px}
.pdp-gauge-face{position:relative;width:47px;height:47px}
.pdp-gauge-face svg{position:absolute;inset:0;width:100%;height:100%}
.pdp-num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:var(--weight-display);font-size:13px;color:var(--navy);letter-spacing:.02em;
}
.pdp-gauge-name{font-size:8.5px;letter-spacing:.4px;color:var(--slate);text-transform:uppercase;font-weight:var(--weight-semibold);text-align:center;line-height:1}
.pdp-g-track{fill:none;stroke:var(--line);stroke-width:3}
.pdp-g-arc{
  fill:none;stroke:var(--navy);stroke-width:3.2;stroke-linecap:round;
  --circ:107;stroke-dasharray:var(--circ);stroke-dashoffset:calc(var(--circ) - var(--fill));
}
/* reveal-driven fill, matching the homepage grammar (site.js adds .js + .in) */
.js .reveal:not(.in) .pdp-g-arc{stroke-dashoffset:var(--circ)}
.js .reveal .pdp-g-arc{transition:stroke-dashoffset 1s cubic-bezier(.22,.61,.36,1)}
.pdp-scr-session{margin-top:auto;background:var(--highlight);border-radius:13px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.pdp-ss-title{font-size:14px;font-weight:var(--weight-semibold)}
.pdp-ss-sub{font-size:11px;color:var(--slate)}
.pdp-app-cap{text-align:center;max-width:34ch}

/* ============================================================================
   3 · PROGRAM DETAIL PAGE · tier selector (the cart moment) + start CTAs
   ============================================================================ */
.pdp-choose-note{
  border:var(--hairline-width) solid var(--line);border-radius:var(--radius-max);
  padding:20px 24px;margin-bottom:24px;background:var(--paper);
}
.pdp-choose-note .kicker{display:block;margin-bottom:8px;color:var(--navy)}
.pdp-choose-note p{color:var(--slate);font-size:.9375rem}

.pdp-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.pdp-tier{
  position:relative;display:flex;gap:14px;align-items:flex-start;text-align:left;
  background:var(--paper);border:var(--hairline-width) solid var(--line);border-radius:var(--radius-max);
  padding:24px 22px;cursor:pointer;width:100%;
  font-family:var(--font-body);color:var(--navy);
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.pdp-tier:hover{border-color:var(--navy)}
.pdp-tier.selected{border-color:var(--navy);background:var(--highlight);box-shadow:0 0 0 1px var(--navy)}
.pdp-tier-radio{
  width:20px;height:20px;border:1.5px solid var(--slate-light);border-radius:50%;
  flex-shrink:0;margin-top:3px;position:relative;transition:border-color .15s ease;
}
.pdp-tier.selected .pdp-tier-radio{border-color:var(--navy)}
.pdp-tier.selected .pdp-tier-radio::after{content:"";position:absolute;inset:3px;background:var(--navy);border-radius:50%}
.pdp-tier-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.pdp-tier-tag{
  align-self:flex-start;font-size:10px;font-weight:var(--weight-semibold);
  letter-spacing:1.6px;text-transform:uppercase;color:var(--navy);
  background:var(--paper);border:var(--hairline-width) solid var(--navy);border-radius:3px;padding:3px 8px;margin-bottom:2px;
}
.pdp-tier.selected .pdp-tier-tag{background:var(--porcelain)}
.pdp-tier-name{font-size:1.0625rem;font-weight:var(--weight-semibold)}
.pdp-tier-price{font-size:1.5rem;font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;line-height:1.1}
.pdp-tier-price span{font-size:.8125rem;font-weight:var(--weight-body);color:var(--slate)}
.pdp-tier-perday{font-size:.8125rem;color:var(--slate)}
.pdp-tier-adds{font-size:.875rem;color:var(--slate);line-height:1.5}
.pdp-tier-alt{font-size:.8125rem;color:var(--slate);font-style:italic;margin-top:2px}
@media (max-width:820px){.pdp-tiers{grid-template-columns:1fr}}

.pdp-start{margin-top:32px}
.pdp-start-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.pdp-start-or{font-size:13px;color:var(--slate);font-weight:var(--weight-medium)}
.pdp-start-note{margin-top:16px;max-width:60ch}
.pdp-start-note a{color:var(--navy)}
@media (max-width:520px){
  .pdp-hero-cta .btn,.pdp-start-cta .btn{width:100%;text-align:center}
  .pdp-start-or{width:100%;text-align:center}
}

/* ============================================================================
   4 · START / CHECKOUT PAGE
   ============================================================================ */
.co-hero{padding:72px 0 8px}
.co-hero .wrap-editorial{padding-left:24px;padding-right:24px}
.co-hero .kicker{display:block;margin-bottom:16px}
.co-hero h1{margin-bottom:16px}
.co-hero .co-sub{color:var(--slate);max-width:52ch;font-size:1.0625rem}

.checkout{padding:40px 0 96px}
.co-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start;max-width:1000px;margin:0 auto}
@media (max-width:860px){.co-grid{grid-template-columns:1fr;gap:28px}}

.co-panel{
  background:var(--paper);border:var(--hairline-width) solid var(--line);
  border-radius:var(--radius-max);padding:clamp(24px,3vw,36px);
}
.co-panel > .kicker{display:block;margin-bottom:20px;color:var(--navy)}

/* order summary rows */
.co-line{
  display:flex;justify-content:space-between;gap:20px;align-items:flex-start;
  padding:18px 0;border-bottom:var(--hairline-width) solid var(--line);
}
.co-line:first-of-type{padding-top:0}
.co-line-main{display:flex;flex-direction:column;gap:5px;min-width:0}
.co-line-k{font-size:10px;font-weight:var(--weight-semibold);letter-spacing:1.8px;text-transform:uppercase;color:var(--slate)}
.co-line-title{font-size:1.125rem;font-weight:var(--weight-semibold);color:var(--navy)}
.co-line-sub{font-size:.875rem;color:var(--slate)}
.co-line-sub.builds{font-weight:var(--weight-medium)}
.co-line-price{text-align:right;white-space:nowrap}
.co-line-price .amt{font-size:1.5rem;font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;color:var(--navy);display:block;line-height:1.1}
.co-line-price .per{font-size:.8125rem;color:var(--slate)}
.co-view-link{font-size:.8125rem;margin-top:2px}
.co-program-note,.co-program-note[hidden]{}
.co-program-note{margin-top:14px}

/* trial framing block */
.co-trial{
  margin-top:22px;background:var(--highlight);border-radius:var(--radius-max);
  padding:22px 24px;
}
.co-trial-head{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px;
}
.co-trial-amt{font-family:var(--font-display);font-weight:var(--weight-display);font-size:1.375rem;color:var(--navy);letter-spacing:.02em}
.co-trial-then{font-size:.9375rem;color:var(--slate)}
.co-charge-line{font-size:.875rem;color:var(--navy);line-height:1.55}

/* what happens next */
.co-next{margin-top:26px}
.co-next > .kicker{display:block;margin-bottom:16px;color:var(--navy)}
.co-next ol{list-style:none;counter-reset:conext;display:flex;flex-direction:column;gap:16px}
.co-next li{position:relative;padding-left:44px;color:var(--slate);font-size:.9375rem;line-height:1.55}
.co-next li::before{
  counter-increment:conext;content:counter(conext);
  position:absolute;left:0;top:-2px;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:var(--weight-display);font-size:.875rem;color:var(--navy);
  border:var(--hairline-width) solid var(--navy);border-radius:50%;
}

/* capture + payment */
.co-fields{display:flex;flex-direction:column;gap:16px;margin-bottom:8px}
.co-fields label{display:block;font-size:13px;font-weight:var(--weight-semibold);margin-bottom:7px;color:var(--navy)}
.co-fields input{
  width:100%;font-family:var(--font-body);font-size:16px;color:var(--navy);
  background:var(--paper);border:var(--hairline-width) solid var(--line);
  border-radius:4px;padding:14px 15px;transition:border-color .15s ease;
}
.co-fields input:focus{outline:none;border-color:var(--navy)}
.co-error{color:var(--navy);font-weight:var(--weight-medium);min-height:1.2em;margin:4px 0 0}
.co-pay-btn{margin-top:18px}
.co-charge-note{margin-top:14px}
.co-compliance{margin-top:18px;border-top:var(--hairline-width) solid var(--line);padding-top:16px}

/* interim trial-provisioning state (shown instead of a fake charge) */
.co-interim{
  border:var(--hairline-width) solid var(--navy);border-radius:var(--radius-max);
  padding:clamp(24px,3vw,32px);background:var(--highlight);
}
.co-interim .kicker{display:block;margin-bottom:14px;color:var(--navy)}
.co-interim h3{font-family:var(--font-editorial);font-weight:var(--weight-editorial);font-size:1.5rem;color:var(--navy);margin-bottom:12px;line-height:1.2}
.co-interim p{color:var(--slate);font-size:.9375rem;line-height:1.6;margin-bottom:12px}
.co-interim .co-interim-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:6px}

/* ============================================================================
   5 · PROGRAMS INDEX · the persona cards become links to the PDPs
   ----------------------------------------------------------------------------
   .pcard is styled in styles.css; these rules only add the link affordance so
   the whole card is a single, keyboard-reachable link to its program page.
   ============================================================================ */
a.pcard{text-decoration:none;color:inherit;transition:border-color .15s ease,box-shadow .15s ease}
a.pcard:hover{border-color:var(--navy)}
a.pcard:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.pcard-go{
  margin-top:auto;padding-top:4px;
  font-size:.8125rem;font-weight:var(--weight-semibold);letter-spacing:.3px;
  color:var(--navy);display:inline-flex;align-items:center;gap:6px;
}
.pcard-go .arr{transition:transform .15s ease}
a.pcard:hover .pcard-go{gap:9px}
a.pcard:hover .pcard-go .arr{transform:translateX(3px)}