/* ============================================================
   ENROLLMENT FUNNEL - shared layout (enroll.html)
   3 steps: Your info -> Choose plan -> Sign + pay.
   Reuses global .btn / .container / .eyebrow from site.css.

   LAYOUT AND GEOMETRY ONLY. Every colour, font and edge comes from the
   academy's own cascade (system/core.css -> brands/<brand>/theme.css ->
   clients/<slug>/theme.css) via custom properties, so no academy is named
   here. The one per-academy ASSET, the header mark, is a build token
   filled from clients/<slug>/client.json.
   Extracted from BAM GTA's live enroll page.
   ============================================================ */

.en-wrap { min-height: 100vh; background: var(--bg); color: var(--fg); padding-bottom: 80px; }

/* Header (slim, matches free-trial) */
.en-head { border-bottom: 1px solid var(--border-neutral); background: var(--bg-deep); }
.en-head__in { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.en-head__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--fg); }
.en-head__mark { width: 38px; height: 38px; background: url('../assets/bam-mark.png') center/contain no-repeat; flex: none; }
.en-head__word { font-family: var(--font-display); font-size: 21px; letter-spacing: .02em; text-transform: uppercase; color: var(--white); line-height: 1; }
.en-head__word b { color: var(--gold); font-weight: 400; }
.en-head__phone { font-family: var(--font-body); font-size: 14px; color: var(--fg-subtle); text-decoration: none; }
.en-head__phone:hover { color: var(--gold); }

/* Title block */
/* Funnel content lives in a centered column so desktop doesn't leave the card
   stuck to the left with empty space on the right. */
.en-top { padding: 44px 0 8px; max-width: 720px; margin-left: auto; margin-right: auto; }
/* Page + confirmation headlines use the canonical .ds-h1 (gold <em>). */
.en-sub { color: var(--fg-subtle); font-size: 15px; margin-top: 10px; max-width: 560px; }

/* Progress */
.en-prog { display: flex; align-items: center; gap: 8px; margin: 24px auto 30px; flex-wrap: wrap; max-width: 720px; }
.en-prog__step { display: inline-flex; align-items: center; gap: 9px; opacity: .45; }
.en-prog__step.is-active, .en-prog__step.is-done { opacity: 1; }
.en-prog__dot { width: 26px; height: 26px; display: grid; place-items: center; border: 1.5px solid var(--border-neutral); font-family: var(--font-body); font-weight: 700; font-size: 13px; }
.en-prog__step.is-active .en-prog__dot { border-color: var(--gold); color: var(--gold); }
.en-prog__step.is-done .en-prog__dot { background: var(--gold); color: var(--black); border-color: var(--gold); }
.en-prog__label { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.en-prog__line { width: 34px; height: 1px; background: var(--border-neutral); }
.en-prog__line.is-done { background: var(--gold); }
/* Reached steps act as tabs you can click to jump back to. */
.en-prog__step.is-clickable { cursor: pointer; opacity: .7; transition: opacity .18s; }
.en-prog__step.is-clickable:hover { opacity: 1; }
.en-prog__step.is-clickable:hover .en-prog__dot { border-color: var(--gold); color: var(--gold); }
.en-prog__step.is-clickable:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Card */
.en-card { background: var(--surface); border: 1px solid var(--border-neutral); padding: 30px; max-width: 720px; margin-left: auto; margin-right: auto; }
/* Card headings use the canonical .ds-h3 from the design system. */
.en-card__note { color: var(--fg-subtle); font-size: 14px; margin: 8px 0 22px; }

/* Form fields */
.en-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.en-field { margin-bottom: 16px; }
.en-label { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 7px; }
.en-label .en-req { color: var(--gold); }
.en-input, .en-select, .en-textarea {
  width: 100%; background: var(--bg-deep); border: 1px solid var(--border-neutral); color: var(--fg);
  /* 16px is deliberate: iOS Safari zooms the page on focus when inputs are <16px. */
  font-family: var(--font-body); font-size: 16px; padding: 13px 13px; border-radius: 0; outline: none;
}
.en-input:focus, .en-select:focus, .en-textarea:focus { border-color: var(--gold); }
.en-input::placeholder, .en-textarea::placeholder { color: rgba(255,255,255,0.4); }
.en-textarea { min-height: 84px; resize: vertical; }
.en-input.is-error, .en-select.is-error, .en-textarea.is-error { border-color: #e07070; }
.en-select { appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23E2DD9F' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; }

/* Choose plan - two stages in one stack.

   STAGE 1 is .en-plan__head: one block per ROUTINE, and NO MONEY. The parent
   is choosing what training they want, not what they will pay, and nine prices
   on one screen turned that into arithmetic.

   STAGE 2 is .en-plan__panel: opening a block reveals that routine's own terms,
   and every price, cadence, tax line and sign-up fee lives in there.

   Same visual language as the rest of the funnel: sharp edges, gold on select,
   the square check, and no colour of its own (every value is a custom property
   from the academy's cascade). */
.en-plan-grid { display: grid; gap: 14px; }
.en-plan { background: var(--bg-deep); border: 1px solid var(--border-neutral); transition: border-color .15s, box-shadow .15s, background .15s; }
.en-plan:hover { border-color: var(--gold); }
.en-plan.is-open { border-color: var(--gold); }
.en-plan.is-picked { box-shadow: inset 0 0 0 1px var(--gold); background: linear-gradient(180deg, rgba(226,221,159,.07), transparent 60%); }

/* The block header IS the disclosure button (a real <button> carrying
   aria-expanded), so it is tabbable and Enter/Space work without help. */
.en-plan__head { width: 100%; display: flex; align-items: flex-start; gap: 16px; text-align: left; background: none; border: 0; color: var(--fg); font: inherit; padding: 20px 22px; cursor: pointer; }
.en-plan__head:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.en-plan__body { flex: 1; min-width: 0; }
.en-plan__title { display: block; font-family: var(--font-display); font-size: 22px; text-transform: uppercase; line-height: 1; color: var(--fg); }
.en-plan__incl { display: block; font-size: 13px; color: var(--fg-muted); margin-top: 9px; max-width: 420px; }
/* Block, not inline-block: this sits under copy that can wrap, and an
   inline hint ran onto the end of the last line. */
.en-plan__hint { display: block; margin-top: 14px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-subtle); transition: color .15s; }
.en-plan__head:hover .en-plan__hint { color: var(--gold); }
.en-plan.is-open .en-plan__hint { color: var(--gold); }
/* The chevron is the only thing that says "there is more inside", so it turns
   when the block opens. Square frame to match the brand's sharp edges. */
.en-plan__chev { flex: none; width: 22px; height: 22px; margin-top: 3px; position: relative; border: 2px solid var(--border-neutral); transition: transform .18s, border-color .15s; }
/* translate-then-rotate, not a margin nudge: the arrow has to stay centred in
   its box when the box itself is flipped 180deg on open. */
.en-plan__chev::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-right: 2px solid var(--fg-subtle); border-bottom: 2px solid var(--fg-subtle); transform: translate(-50%, -70%) rotate(45deg); transition: border-color .15s; }
.en-plan__head:hover .en-plan__chev, .en-plan.is-open .en-plan__chev { border-color: var(--gold); }
.en-plan__head:hover .en-plan__chev::after, .en-plan.is-open .en-plan__chev::after { border-right-color: var(--gold); border-bottom-color: var(--gold); }
.en-plan.is-open .en-plan__chev { transform: rotate(180deg); }

/* Stage 2. `hidden` is on the element itself, so a closed panel is out of the
   accessibility tree and the tab order, not merely invisible. */
.en-plan__panel { border-top: 1px solid var(--border-neutral); padding: 0 22px 20px; }
.en-plan__panel[hidden] { display: none; }
.en-plan__panel-h { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-subtle); margin: 16px 0 10px; }
.en-terms { display: grid; gap: 10px; }
.en-term { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--border-neutral); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.en-term:hover { border-color: var(--gold); }
.en-term.is-on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
/* The real radio behind .en-term__check. Transparent and click-through (the
   whole row is the label) but still focusable, so the term choice is a native
   radio group: tab in, arrow between terms. */
.en-term__radio { position: absolute; top: 16px; left: 16px; width: 20px; height: 20px; margin: 0; opacity: 0; pointer-events: none; }
.en-term__radio:focus-visible + .en-term__check { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Square select indicator (sharp-edge brand, not a circle). */
.en-term__check { flex: none; width: 20px; height: 20px; border: 2px solid var(--border-neutral); margin-top: 2px; position: relative; transition: border-color .15s, background .15s; }
.en-term:hover .en-term__check { border-color: var(--gold); }
.en-term.is-on .en-term__check { background: var(--gold); border-color: var(--gold); }
.en-term.is-on .en-term__check::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--black); font-size: 12px; font-weight: 800; }
.en-term__body { flex: 1; min-width: 0; }
.en-term__label { display: block; font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--fg); line-height: 1.3; }
/* Only rendered when a routine's terms DISAGREE on what is included - when
   they agree it is a fact about the routine and sits up in the header. */
.en-term__incl { display: block; font-size: 12.5px; color: var(--fg-muted); margin-top: 6px; }
.en-term__price { text-align: right; white-space: nowrap; }
.en-term__amt { display: block; font-family: var(--font-display); font-size: 26px; color: var(--gold); line-height: 1; }
.en-term__amt small { display: block; font-family: var(--font-body); font-size: 11px; color: var(--fg-subtle); font-weight: 600; letter-spacing: .06em; margin-top: 4px; white-space: nowrap; }
.en-term__breakdown { display: block; font-family: var(--font-body); font-size: 11.5px; font-weight: 600; color: var(--fg-muted); line-height: 1.5; margin-top: 8px; }
/* One-time sign-up fee. Renders only when the offer's price row carries a
   signup_fee_cents, so an academy without one shows nothing at all. */
.en-signup-badge { display: inline-block; margin-top: 10px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-line, var(--border-neutral)); padding: 4px 8px; }

/* Announced, not drawn: what the expansion revealed, for a screen reader. */
.en-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Actions */
.en-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; }
/* A gate nobody can see is not a gate. Continue is disabled until a term is
   chosen, and it used to render in full gold with a pointer cursor - which
   reads as "this site is broken", not "choose something first". */
.en-actions .btn:disabled { opacity: .38; cursor: not-allowed; transform: none; box-shadow: none; }
.en-actions .btn:disabled:hover { transform: none; box-shadow: none; }
.en-back { background: none; border: none; color: var(--fg-subtle); font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.en-back:hover { color: var(--gold); }
.en-trust { font-size: 12px; color: var(--fg-subtle); margin-top: 14px; text-align: center; }
.en-err { color: #e98b78; font-size: 13px; margin-top: 12px; }

/* Agreement modal */
.en-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(3px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 18px; }
.en-modal { background: var(--surface); border: 1px solid var(--gold-line); width: 100%; max-width: 620px; max-height: 90vh; display: flex; flex-direction: column; }
.en-modal__head { padding: 20px 24px; border-bottom: 1px solid var(--border-neutral); }
.en-modal__h { font-family: var(--font-display); font-size: 26px; text-transform: uppercase; line-height: 1; }
.en-modal__sub { color: var(--fg-subtle); font-size: 13px; margin-top: 6px; }
/* min-height:0 is required for a flex child to actually scroll (without it the
   clause box won't scroll on mobile, so the read-gate never triggers). */
.en-modal__scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 22px 24px; flex: 1; min-height: 0; }
.en-clause-h { font-family: var(--font-body); font-weight: 700; font-size: 14px; margin: 16px 0 5px; }
.en-clause-h:first-child { margin-top: 0; }
.en-clause-p { font-size: 13.5px; color: var(--fg-muted); line-height: 1.55; }
.en-read-flag { font-size: 12px; color: var(--fg-subtle); padding: 10px 24px; border-top: 1px solid var(--border-neutral); }
.en-read-flag.is-done { color: var(--gold); }
/* Signal to scroll: gold, bold, with a bouncing arrow until they reach the end. */
.en-read-cue { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-weight: 700; letter-spacing: .02em; }
.en-read-arrow { display: inline-block; font-size: 15px; animation: en-bob 1.1s ease-in-out infinite; }
@keyframes en-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }

/* Signature pad */
.en-sig { padding: 16px 24px 22px; border-top: 1px solid var(--border-neutral); }
.en-sig__names { font-size: 13px; color: var(--fg-muted); margin-bottom: 10px; }
.en-sig__names b { color: var(--fg); }
.en-sig__pad-wrap { position: relative; border: 1px solid var(--border-neutral); background: #fff; }
.en-sig__pad { display: block; width: 100%; height: 130px; touch-action: none; cursor: crosshair; }
.en-sig__hint { position: absolute; inset: 0; display: grid; place-items: center; color: #9a9a9a; font-size: 13px; pointer-events: none; }
.en-sig__row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.en-sig__clear { background: none; border: none; color: var(--fg-subtle); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.en-sig__clear:hover { color: var(--gold); }
.en-modal__foot { padding: 16px 24px; border-top: 1px solid var(--border-neutral); display: flex; gap: 12px; justify-content: flex-end; }

/* Payment */
.en-pay__summary { background: var(--bg-deep); border: 1px solid var(--border-neutral); padding: 16px 18px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
.en-pay__summary b { font-family: var(--font-display); font-size: 22px; color: var(--gold); }
.en-pay__summary span { font-size: 13px; color: var(--fg-subtle); }
.en-payel { min-height: 40px; margin-bottom: 18px; }
.en-signed-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.en-signed-pill::before { content: ''; width: 8px; height: 8px; background: var(--gold); border-radius: 50%; }

/* Confirmation */
.en-confirm { text-align: center; padding: 60px 0 20px; }
.en-confirm__sub { color: var(--fg-muted); font-size: 16px; margin: 16px auto 0; max-width: 540px; }

/* "Set up your athlete app" card on the confirmation screen - uses the design system. */
.en-next { background: var(--surface); border: 1px solid var(--border-neutral); padding: 28px 30px; max-width: 560px; margin: 36px auto 0; text-align: left; }
.en-next__title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: 19px; line-height: 1; color: var(--gold); margin-bottom: 18px; }
.en-next__list { margin: 0; padding-left: 20px; display: grid; gap: 12px; line-height: 1.5; color: var(--fg-muted); font-size: 15px; }
.en-next__list strong { color: var(--gold); font-weight: 700; }
.en-next__cta { margin-top: 24px; }
.en-next__home { margin-top: 26px; }
.en-video-wrap { max-width: 720px; margin: 30px auto 0; }
.en-video { width: 100%; border: 1px solid var(--border-neutral); background: #000; }

/* Loading / spinner */
.en-loading { color: var(--fg-subtle); padding: 40px 0; text-align: center; }
.en-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border-neutral); border-top-color: var(--gold); border-radius: 50%; animation: en-spin 0.7s linear infinite; vertical-align: middle; }
@keyframes en-spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .en-row { grid-template-columns: 1fr; }
  .en-card { padding: 22px 18px; }
  /* Routine block: tighter gutters, and the description is free to use the
     whole width. Still no price here - stage 1 is the same on every size. */
  .en-plan__head { padding: 18px; }
  .en-plan__title { font-size: 20px; }
  .en-plan__incl { max-width: none; }
  .en-plan__panel { padding: 0 18px 18px; }
  /* Term row keeps its price ON THE RIGHT on a phone, unlike the old plan
     card. Wrapping the price to its own row cost ~50px per option, and with
     three options that is most of a screen between the parent and Continue.
     The number shrinks instead, and the label is allowed to wrap. */
  .en-term { padding: 14px; gap: 10px; }
  .en-term__price { white-space: normal; }
  .en-term__amt { font-size: 21px; white-space: nowrap; }
  .en-term__amt small { letter-spacing: .02em; }
  .en-signup-badge { letter-spacing: .02em; padding: 4px 6px; }
  /* Big thumb-friendly actions: primary full-width on top, back below. */
  .en-actions { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .en-actions .btn { width: 100%; justify-content: center; }
  .en-back { text-align: center; padding: 10px 0; }
  /* Agreement = bottom sheet with comfy padding + a taller signature pad. */
  .en-modal-overlay { align-items: flex-end; padding: 0; }
  .en-modal { max-width: none; max-height: 94vh; border-left: none; border-right: none; }
  .en-modal__head, .en-modal__scroll, .en-sig, .en-read-flag, .en-modal__foot { padding-left: 18px; padding-right: 18px; }
  .en-modal__foot { flex-direction: column-reverse; }
  .en-modal__foot .btn { width: 100%; justify-content: center; }
  .en-sig__pad { height: 150px; }
  /* Header: keep logo + name tight, let phone shrink gracefully. */
  .en-head__in { height: 60px; }
  .en-head__word { font-size: 18px; }
}

/* Desktop polish: more breathing room, bigger card, larger plan rows. */
@media (min-width: 768px) {
  .en-top { padding: 60px 0 8px; }
  .en-card { padding: 40px 44px; }
  .en-plan__head { padding: 24px 26px; }
  .en-plan__panel { padding: 0 26px 24px; }
  .en-plan__title { font-size: 24px; }
  .en-plan-grid { gap: 16px; }
  .en-modal { width: 620px; }
  .en-confirm { padding: 80px 0 40px; }
}

/* Embedded agreement document (system/agreement/*). The clause list that used
   to render inline here now lives in agreement.terms.json and is displayed by
   agreement.html, so the parent reads the same document we file. */
.en-modal__scroll--doc { padding:0; overflow:hidden; }
.en-agreement-frame { width:100%; height:52vh; min-height:320px; border:0; display:block; background:var(--bg-deep, #0A0A0A); }