/* subscribe.css: page-scoped styles moved out of subscribe.html on 2026-09-05, verbatim. tokens.css wins. */
  /* AeroEdge -- Subscription. Tokens (:root + [data-theme]) live in /css/tokens.css.
     Geometry: radius 0, hairline --rule, no shadows/glows/gradients (design system). */
  *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
  html { height:100%; }
  body {
    background:var(--bg); color:var(--text); font-family:'Barlow',sans-serif;
    min-height:100vh; display:flex; align-items:flex-start; justify-content:center;
    padding:48px 24px; transition:background .35s ease, color .35s ease;
  }
  /* margin:auto vertically centers the card when it fits the viewport, but lets it top-align and the
     page scroll when it is taller than the viewport (so the top is never clipped above the origin). */
  .card {
    background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
    padding:42px 38px 32px; width:100%; max-width:940px; text-align:center; margin:auto;
    animation:rise .5s cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
  .logo-plate {
    background:var(--logo-plate); border-radius:var(--radius); padding:var(--logo-pad,0);
    transition:background .35s ease, padding .35s ease; display:inline-block; margin-bottom:18px;
  }
  .logo-img { display:block; width:220px; max-width:100%; height:auto; }
  .logo-fallback {
    display:none; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:var(--fs-6);
    color:var(--text); letter-spacing:.02em;
  }
  .logo-fallback span { color:var(--cyan); }
  /* kicker -- the one signature device per page (skill §3) */
  .kicker {
    font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:var(--fs-2);
    letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); margin-bottom:6px;
  }
  h1 {
    font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:var(--fs-7); line-height:1;
    text-transform:uppercase; letter-spacing:.02em; color:var(--text);
  }
  p.lead { font-size:var(--fs-3); color:var(--text); line-height:1.6; margin-top:10px; margin-bottom:26px; }
  .error {
    background:color-mix(in srgb,var(--danger) 12%,transparent);
    border:1px solid color-mix(in srgb,var(--danger) 34%,transparent); border-radius:var(--radius);
    color:var(--danger); font-size:var(--fs-3); padding:11px 13px; margin-bottom:16px; display:none; text-align:left;
  }
  .step-label {
    font-family:'Barlow Condensed',sans-serif; font-size:var(--fs-2); font-weight:600;
    text-transform:uppercase; letter-spacing:.12em; color:var(--dim); margin-bottom:14px;
    text-align:left; display:flex; align-items:center; gap:10px;
  }
  .step-label::after { content:""; flex:1; height:1px; background:var(--rule); }
  .plans { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px; text-align:left; }
  .plan {
    position:relative; border:1px solid var(--rule); border-radius:var(--radius); padding:16px 16px 14px;
    cursor:pointer; transition:border-color .15s, background .15s; background:var(--surface2);
  }
  .plan.selected { border-color:var(--cyan); background:var(--cy-field); }
  .plan.selected::after {
    content:"✓"; position:absolute; top:10px; right:12px; width:18px; height:18px; border-radius:50%;
    background:var(--cyan); color:var(--on-accent); font-size:var(--fs-1); font-weight:700;
    display:flex; align-items:center; justify-content:center;
  }
  .plan input { position:absolute; opacity:0; pointer-events:none; }
  .plan-name {
    font-family:'Barlow Condensed',sans-serif; font-size:var(--fs-2); font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted); margin-bottom:6px;
  }
  .plan-price { font-family:'Barlow Condensed',sans-serif; font-size:var(--fs-6); font-weight:800; color:var(--text); line-height:1; }
  .plan-price sub { font-size:var(--fs-3); font-weight:500; color:var(--muted); vertical-align:baseline; }
  /* measured/selected chip -- cyan field, hairline cyan rule (skill §5) */
  .plan-badge {
    display:inline-block; background:var(--cy-field); border:1px solid var(--cy-rule); color:var(--cyan);
    font-family:'Barlow Condensed',sans-serif; font-size:var(--fs-1); font-weight:600; letter-spacing:.04em;
    padding:2px 8px; border-radius:var(--radius); margin-top:8px; text-transform:uppercase;
  }
  /* Free: continue without a subscription. Full-width band below the paid pair; muted "no card"
     sub (not the cyan discount badge) so it reads as a peer option, not a cheaper tier. */
  .free-band { position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface2); padding:16px 18px; cursor:pointer; transition:border-color .15s, background .15s; margin-bottom:22px; text-align:left; }
  .free-band:hover { border-color:var(--cyan); }
  .free-band .fb-name { font-family:'Barlow Condensed',sans-serif; font-size:var(--fs-2); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
  .free-band .fb-price { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:var(--fs-6); color:var(--text); line-height:1; white-space:nowrap; }
  .free-band .fb-price sub { font-size:var(--fs-2); font-weight:500; color:var(--muted); vertical-align:baseline; }
  .free-band .scope { font-size:var(--fs-2); color:var(--muted); line-height:1.5; }
  .free-band .withhold { font-size:var(--fs-1); color:var(--dim); line-height:1.5; margin-top:6px; }
  .free-band .withhold b { color:var(--muted); font-weight:600; }
  .free-band .fb-pick { font-family:'Barlow Condensed',sans-serif; font-size:var(--fs-2); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--cyan); border:1px solid var(--cy-rule); padding:9px 16px; white-space:nowrap; }
  @media (max-width:540px) { .free-band { grid-template-columns:1fr; } .free-band .fb-pick { justify-self:start; } }
  /* ONE solid primary per page -- the Subscribe submit */
  .btn {
    width:100%; background:var(--btn-bg); color:var(--btn-text); border:1px solid var(--btn-bg);
    border-radius:var(--radius); font-family:'Barlow Condensed',sans-serif; font-size:var(--fs-4);
    font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:14px; cursor:pointer;
    transition:opacity .15s;
  }
  .btn:hover:not(:disabled) { opacity:.88; }
  .btn:disabled { opacity:.5; cursor:not-allowed; }
  /* Secondary (coupon Apply): outlined, so the ONE solid primary stays the Subscribe submit. */
  .btn.ghost { background:transparent; color:var(--text); border-color:var(--rule); }
  .btn.ghost:hover:not(:disabled) { opacity:1; color:var(--cyan); border-color:var(--cyan); }
  .logout { margin-top:18px; font-size:var(--fs-3); color:var(--muted); }
  .logout a { color:var(--steel); text-decoration:underline; cursor:pointer; }
  .logout a:hover { color:var(--cyan); }
  .theme-toggle {
    position:fixed; top:20px; right:20px; z-index:3; display:inline-flex; align-items:center; gap:8px;
    background:var(--surface); border:1px solid var(--rule); color:var(--muted); border-radius:var(--radius);
    padding:8px 14px; font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:var(--fs-2);
    letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:color .15s, border-color .15s;
  }
  .theme-toggle:hover { color:var(--cyan); border-color:var(--cyan); }
  .theme-toggle svg { width:15px; height:15px; }
  @media (max-width:460px) { .card { padding:34px 22px 28px; } .plans { grid-template-columns:1fr; } }

  /* ---- Coaching pricing grid (scoped: ctg-*) ---- */
  .ctg-toggle {
    display:inline-flex; align-items:center; gap:0; margin:0 auto 18px; padding:4px;
    background:var(--surface2); border:1px solid var(--rule); border-radius:var(--radius);
  }
  .ctg-toggle button {
    appearance:none; border:none; background:transparent; cursor:pointer;
    font-family:'Barlow Condensed',sans-serif; font-size:var(--fs-3); font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted); padding:7px 16px; border-radius:var(--radius);
    transition:background .15s, color .15s;
  }
  .ctg-toggle button.active { background:var(--cyan); color:var(--on-accent); }
  .ctg-toggle-wrap { text-align:center; }
  .ctg-hint {
    display:inline-block; margin-left:8px; font-size:var(--fs-1); color:var(--green); font-weight:600;
    vertical-align:middle;
  }
  .ctg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px; align-items:stretch; }
  .ctg-card {
    position:relative; display:flex; flex-direction:column; text-align:left;
    border:1px solid var(--rule); border-radius:var(--radius); padding:20px 16px 18px; background:var(--surface2);
    transition:border-color .15s, background .15s;
  }
  .ctg-badge {
    position:absolute; top:-10px; left:50%; transform:translateX(-50%);
    background:var(--cyan); color:var(--on-accent);
    font-family:'Barlow Condensed',sans-serif; font-size:var(--fs-1); font-weight:700; letter-spacing:.12em;
    text-transform:uppercase; padding:3px 12px; border-radius:var(--radius); white-space:nowrap;
  }
  .ctg-label {
    font-family:'Barlow Condensed',sans-serif; font-size:var(--fs-4); font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; color:var(--text); margin-bottom:4px;
  }
  .ctg-blurb { font-size:var(--fs-1); color:var(--muted); line-height:1.4; min-height:32px; margin-bottom:12px; }
  .ctg-price {
    font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:var(--fs-6); color:var(--text); line-height:1;
  }
  .ctg-price .ctg-suffix { font-size:var(--fs-3); font-weight:500; color:var(--muted); }
  .ctg-billed { font-size:var(--fs-1); color:var(--muted); margin-top:4px; margin-bottom:12px; }
  .trial-note {
    text-align:center; font-size:var(--fs-3); color:var(--text); margin:0 0 18px;
    padding:10px; border:1px dashed var(--rule); border-radius:var(--radius);
  }
  .trial-note span { color:var(--green); font-weight:600; }
  .ctg-feats { list-style:none; margin:0 0 16px; padding:0; flex:1; }
  .ctg-feats li {
    position:relative; padding-left:20px; font-size:var(--fs-2); color:var(--text); line-height:1.4; margin-bottom:7px;
  }
  .ctg-feats li::before {
    content:"✓"; position:absolute; left:0; top:0; color:var(--cyan); font-weight:700; font-size:var(--fs-2);
  }
  /* per-tier CTA = outlined cyan (.btn.cy); the recommended tier fills cyan to signify */
  .ctg-cta {
    width:100%; border-radius:var(--radius); padding:11px;
    font-family:'Barlow Condensed',sans-serif; font-size:var(--fs-3); font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; cursor:pointer; transition:background .15s, color .15s, opacity .15s;
    border:1px solid var(--cyan); background:none; color:var(--cyan); margin-top:auto;
  }
  .ctg-cta:hover { background:var(--cyan); color:var(--on-accent); }
  .ctg-cta:disabled { opacity:.5; cursor:not-allowed; }
  .ctg-card.popular .ctg-cta { background:var(--cyan); color:var(--on-accent); border-color:var(--cyan); }
  /* What both paid plans include. Reuses the coach-tier .ctg-feats list, so the athlete block and
     the professional grid read as one page. MUST sit AFTER .ctg-feats: both are single-class
     selectors, so the later rule wins, and register.html had the same code the other way round
     until 2026-08-30, which silently spaced the same list differently on the two pages.
     The lead-in is a plain muted LABEL, not a second uppercase device: .step-label above it
     already structures the page, and a sub-heading louder than its own section heading is the
     kicker-inflation defect in design skill section 9.2. */
  .prem-lead { text-align:left; font-size:var(--fs-2); color:var(--muted); margin-bottom:8px; }
  .prem-feats { margin:0 0 22px; text-align:left; }
  .narrow-col { max-width:430px; margin-left:auto; margin-right:auto; }
  #coach-section { max-width:860px; margin-left:auto; margin-right:auto; }
  /* Coupon: a proper always-visible box (not a hidden-behind-a-toggle text link), so an athlete
     with a code sees it before reaching the paid Subscribe CTA below. */
  .coupon-box { text-align:left; border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface2); padding:16px 18px; margin-bottom:22px; }
  .coupon-box .cb-label { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:var(--fs-3); letter-spacing:.04em; text-transform:uppercase; color:var(--text); margin-bottom:4px; }
  .coupon-box .cb-sub { font-size:var(--fs-2); color:var(--muted); line-height:1.4; margin-bottom:12px; }
  .coupon-row { display:flex; gap:8px; }
  @media (max-width:600px) {
    .ctg-grid { grid-template-columns:1fr; }
    .card { padding:34px 22px 28px; }
    /* 44px minimum touch target, same rule and breakpoint as sessions.html and register.html.
       Measured on a 375px viewport: theme 33, Monthly/Yearly 30, the three tier CTAs 40, the
       coupon field 39, Apply 39. min-height only, so desktop is untouched. */
    .ctg-toggle button { min-height:44px; }
    .ctg-cta { min-height:44px; }
    #coupon-btn { min-height:44px; }
  }
  /* Current-plan banner. Additive only: it NEVER hides the pricing grid, because a wrong read of
     /billing/status must not be able to block a legitimate purchase or upgrade. Worst case is a
     banner that should not be there, not a customer who cannot pay. */
  /* Neutral surface + hairline, NOT the cyan field: design §4 reserves cyan for the measured
     value, the active phase and the selected state. "You already have a plan" is a state
     notification, not a measured number, so it takes the same neutral panel treatment as any
     other informational block and spends no cyan. */
  .cur-plan {
    display:none; border:1px solid var(--rule); background:var(--surface2);
    border-radius:var(--radius); padding:14px 16px; margin-bottom:18px; text-align:left;
  }
  .cur-plan .cp-h {
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:var(--fs-3);
    letter-spacing:.04em; text-transform:uppercase; color:var(--text); margin-bottom:4px;
  }
  .cur-plan .cp-b { font-size:var(--fs-2); color:var(--text); line-height:1.5; }
  .cur-plan a { color:var(--steel); font-weight:600; }