/* ============================================================
   BY ANY MEANS GTA · Enrollment funnel (enroll.html)
   3 steps: Your info -> Choose plan -> Sign + pay.
   Brand: black / gold / white, Anton + Inter Tight, sharp edges.
   Reuses global .btn / .container / .eyebrow from site.css.
   ============================================================ */

.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('../gta-assets/microscope.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; }

/* Plan cards */
.en-plan-grid { display: grid; gap: 14px; }
.en-plan { text-align: left; color: var(--fg); background: var(--bg-deep); border: 1px solid var(--border-neutral); padding: 20px 22px; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s, background .15s; display: flex; align-items: flex-start; gap: 16px; }
.en-plan__title { color: var(--fg); }
.en-plan:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.en-plan.is-on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: linear-gradient(180deg, rgba(226,221,159,.07), transparent 60%); }
.en-plan__body { flex: 1; min-width: 0; }
/* Square select indicator (sharp-edge brand, not a circle). */
.en-plan__check { width: 22px; height: 22px; border: 2px solid var(--border-neutral); flex: none; margin-top: 3px; position: relative; transition: border-color .15s, background .15s; }
.en-plan:hover .en-plan__check { border-color: var(--gold); }
.en-plan.is-on .en-plan__check { background: var(--gold); border-color: var(--gold); }
.en-plan.is-on .en-plan__check::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--black); font-size: 13px; font-weight: 800; }
.en-plan__cta { display: inline-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:hover .en-plan__cta { color: var(--gold); }
.en-plan.is-on .en-plan__cta { color: var(--gold); }
.en-plan__title { font-family: var(--font-display); font-size: 22px; text-transform: uppercase; line-height: 1; }
.en-plan__term { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-subtle); margin-top: 6px; }
.en-plan__incl { font-size: 13px; color: var(--fg-muted); margin-top: 9px; max-width: 320px; }
.en-plan__price { text-align: right; white-space: nowrap; }
.en-plan__breakdown { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; color: var(--fg-muted); line-height: 1.5; margin-top: 8px; }
.en-plan__amt { font-family: var(--font-display); font-size: 30px; color: var(--gold); line-height: 1; }
.en-plan__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; }

/* Actions */
.en-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; }
.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; }
  /* Plan card: check + body on row 1, price wraps to its own row, left-aligned
     under the body (so the big number + tax read naturally on a phone). */
  .en-plan { flex-wrap: wrap; padding: 18px; }
  .en-plan__price { width: 100%; text-align: left; margin-top: 8px; padding-left: 38px; }
  .en-plan__amt { font-size: 27px; }
  .en-plan__incl { max-width: none; }
  /* 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 { padding: 24px 26px; }
  .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); }