/* ============================================================
   DETAIL Miami · Enrollment funnel (enroll.html)
   3 steps: Your info -> Choose plan -> Sign + pay.
   Same layout as BAM GTA enroll.css - reuses .btn / .container / .eyebrow.
   ============================================================ */

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

/* Header */
.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:10px;text-decoration:none;color:var(--fg);}
.en-head__wordmark{font-family:var(--font-display);font-size:22px;letter-spacing:.03em;text-transform:uppercase;color:var(--white);line-height:1;}
.en-head__wordmark 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 */
.en-top{padding:44px 0 8px;max-width:720px;margin-left:auto;margin-right:auto;}
.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);}
.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;}
.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);font-family:var(--font-body);font-size:16px;padding: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;}

/* Plan picker: routine blocks, then that routine's terms.
   Mechanics ported from bam-san-jose/site/enroll.css, skinned in DETAIL's
   own tokens - every value below is a custom property from this academy's
   cascade, so the block carries no colour of its own.

   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 and sign-up fee lives in there. */
.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 DETAIL'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;}
/* One-time sign-up fee. Renders only when the offer's price row carries a
   signup_fee_cents, so a term the offer waives it on 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);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 in full gold with a pointer cursor that 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;}
.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);}
.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 */
.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);}
/* The line that IS the charge. Stacked under the plan and the fee, so the
   parent reads the parts and then the number their card will see. */
.en-pay__summary--total{border-color:var(--gold);background:linear-gradient(180deg,rgba(226,221,159,.07),transparent 60%);}
.en-pay__summary--total span{color:var(--fg);font-weight:700;}
.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;}
.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;}

/* Loading */
.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. Wrapping the price to
     its own row cost about 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;}
  .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;}
  .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;}
  .en-head__in{height:60px;}
}
@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); }