/* ==========================================================================
   Freedom Mobile · Sign-in Onboarding
   Desktop prototype — HTML/CSS/JS
   Design tokens sourced from the Okta redesign Figma file.
   ========================================================================== */

/* ---------- Fonts: Ambra Sans Text ---------- */
@font-face {
  font-family: "Ambra Sans Text";
  src: url("assets/fonts/Ambra-Sans-Text-Book.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ambra Sans Text";
  src: url("assets/fonts/Ambra-Sans-Text-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ambra Sans Text";
  src: url("assets/fonts/Ambra-Sans-Text-Medium.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --color-primary:        #DB5C05;
  --color-primary-hover:  #B84900;
  --color-primary-soft:   #FDF3EC;
  --color-accent-bar:     #EE7C22;

  /* Neutral */
  --color-black:          #000000;
  --color-ink:            #1A1A1A;
  --color-text:           #333333;
  --color-text-muted:     #666666;
  --color-text-placeholder:#9B9B9B;
  --color-line:           #D8D8D8;
  --color-line-strong:    #B8B8B8;
  --color-surface:        #FFFFFF;
  --color-bg:             #F5F5F5;

  /* Semantic */
  --color-error:          #C0392B;
  --color-error-bg:       #FDECEC;
  --color-error-border:   #EFB4B0;
  --color-link:           #0068D8;
  --color-success:        #1E8E3E;

  /* Spacing (8px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-hover: 0 2px 6px rgba(0,0,0,0.08), 0 12px 28px rgba(0,0,0,0.10);

  /* Layout */
  --container-max: 1280px;
  --nav-height: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Ambra Sans Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
button {
  font-family: inherit; font-size: inherit; color: inherit;
  background: none; border: none; cursor: pointer; padding: 0;
}
a { color: inherit; text-decoration: none; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* ---------- View machinery ---------- */
.view { display: none; min-height: 100vh; flex-direction: column; }
.view.is-active { display: flex; }

/* ---------- Icon helper ---------- */
svg { display: inline-block; vertical-align: middle; }
.icon-inline { width: 1em; height: 1em; }

/* ==========================================================================
   Top utility strip (black bar)
   ========================================================================== */
.brand-strip {
  background: var(--color-black);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 400;
}
.brand-strip__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 8px 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
}
.brand-strip__region-btn {
  color: #FFFFFF;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}
.brand-strip__region-btn:hover { background: rgba(255,255,255,0.1); }
.brand-strip__links { display: flex; gap: 24px; }
.brand-strip__link { color: #FFFFFF; }
.brand-strip__link:hover { text-decoration: underline; }

/* ==========================================================================
   Main site navigation (white)
   ========================================================================== */
.site-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}
.site-nav__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 48px;
}
.site-nav__logo { flex-shrink: 0; display: flex; align-items: center; }
.site-nav__main {
  display: flex;
  gap: 40px;
  flex: 1;
  justify-content: center;
}
.site-nav__link {
  font-size: 17px;
  font-weight: 400;
  color: var(--color-ink);
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s;
}
.site-nav__link:hover { border-bottom-color: var(--color-primary); }
.site-nav__account {
  color: var(--color-ink);
  font-size: 17px;
  font-weight: 400;
}
.site-nav__account:hover { color: var(--color-primary); }

/* Hamburger toggle — hidden on desktop, shown on mobile via media query */
.site-nav__toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  border-radius: 6px;
  transition: background-color 0.15s;
}
.site-nav__toggle:hover { background: var(--color-bg); }
.site-nav__toggle svg { width: 26px; height: 26px; }

/* ==========================================================================
   Minimal header (mini-nav): logo + "Back to sign in" button
   ========================================================================== */
.mini-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}
.mini-nav__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ==========================================================================
   Brand header (logo only, used on the sign-in landing)
   ========================================================================== */
.brand-header {
  background: var(--color-bg);
}
.brand-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 24px 40px 12px;
  display: flex;
  align-items: center;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 32px;
  border-radius: var(--radius-md);
  transition: background-color 0.15s, color 0.15s, transform 0.05s;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }

.btn--pill { border-radius: var(--radius-pill); }
.btn--sm { padding: 10px 22px; font-size: 15px; }
.btn--block { display: flex; width: 100%; }

.btn--primary {
  background: var(--color-primary);
  color: #FFFFFF;
}
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--primary:disabled {
  background: #E8E1DC;
  color: #A88F80;
  cursor: not-allowed;
}

.btn--text {
  background: transparent;
  color: var(--color-text-muted);
  padding: 10px 16px;
}
.btn--text:hover { color: var(--color-ink); }

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.btn--outline:hover {
  background: var(--color-primary-soft);
}

/* ==========================================================================
   Page layout (below the nav)
   ========================================================================== */
.page {
  flex: 1;
  padding: 40px 32px 64px;
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ==========================================================================
   Progress stepper
   ========================================================================== */
.stepper {
  list-style: none;
  padding: 0;
  margin: 0 0 48px;
  display: flex;
  align-items: center;
  gap: 0;
}
.stepper__step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  color: var(--color-text-muted);
  font-size: 17px;
  font-weight: 400;
  position: relative;
}
.stepper__step + .stepper__step::before {
  content: "";
  position: absolute;
  left: -80px;
  top: 50%;
  width: 80px;
  height: 1px;
  background: var(--color-line);
}
.stepper__step:not(:last-child) { margin-right: 80px; }
.stepper__marker {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--color-line-strong);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.stepper__step.is-active {
  color: var(--color-ink);
  font-weight: 600;
}
.stepper__step.is-active .stepper__marker {
  border-color: var(--color-ink);
  background: var(--color-ink);
}
.stepper__step.is-active .stepper__marker::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
}
.stepper__step.is-complete {
  color: var(--color-success);
  font-weight: 600;
}
.stepper__step.is-complete .stepper__marker {
  border-color: var(--color-success);
  background: var(--color-success);
  color: #FFFFFF;
}
.stepper__check {
  width: 14px; height: 14px;
  color: #FFFFFF;
}

/* ==========================================================================
   Form card (centered content card for Create Account, Verify Email, Link Services)
   ========================================================================== */
.form-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-card);
}
.form-card__title {
  font-size: 28px;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0 0 12px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.form-card__intro {
  font-size: 15px;
  color: var(--color-text-muted);
  margin: 0 0 28px;
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}
.form-card__intro-bar {
  position: absolute;
  left: 0; top: 3px; bottom: 3px;
  width: 3px;
  background: var(--color-accent-bar);
  border-radius: 2px;
}
.form-card--success { text-align: center; padding-top: 48px; }
.form-card--success .form-card__intro { padding-left: 0; text-align: left; }
.form-card--success .form-card__intro-bar { display: none; }
.form-card__title--centered { text-align: center; }
.form-card__body-text {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.5;
  margin: 12px 0 28px;
  padding: 0 12px;
}

.success-icon {
  width: 72px; height: 72px;
  color: var(--color-success);
  margin: 0 auto 24px;
}
.success-icon svg { width: 100%; height: 100%; }
.success-icon--large {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(30, 142, 62, 0.12);
  padding: 22px;
  margin: 0 auto 24px;
}
.success-icon--large svg { width: 100%; height: 100%; }

/* ==========================================================================
   Form + fields
   ========================================================================== */
.form { display: flex; flex-direction: column; gap: 16px; }

.field {
  display: block;
  position: relative;
}
.field__control {
  position: relative;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field__control:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(219, 92, 5, 0.08);
}
.field__label {
  position: absolute;
  top: 10px;
  left: 16px;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted);
  pointer-events: none;
  transition: color 0.15s;
  z-index: 1;
}
.field__control:focus-within .field__label { color: var(--color-primary); }

.field__input {
  width: 100%;
  padding: 26px 44px 10px 16px;
  border: 0;
  background: transparent;
  font-size: 16px;
  color: var(--color-ink);
  outline: none;
  border-radius: var(--radius-md);
  min-height: 62px;
}
.field__input::placeholder {
  color: var(--color-text-placeholder);
  opacity: 1;
}

/* Only reveal placeholder text when the label is a floating label - our
   labels always float, so we keep placeholder subtle when input is empty. */
.field__input:placeholder-shown + .field__clear,
.field__input:placeholder-shown + .field__toggle { color: var(--color-text-muted); }

.field__clear,
.field__toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}
.field__clear svg,
.field__toggle svg { width: 20px; height: 20px; }
.field__clear:hover,
.field__toggle:hover { color: var(--color-ink); }

/* Show clear button only when there's input */
.field__input:placeholder-shown ~ .field__clear { display: none; }

/* Invalid state — text turns red, control gets red border.
   Applied dynamically via app.js: `.field--error` on the .field wrapper. */
.field--error .field__control {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08);
}
.field--error .field__input { color: var(--color-error); }
.field--error .field__label { color: var(--color-error); }

/* ==========================================================================
   Password requirements accordion
   ========================================================================== */
.requirements {
  border-top: 1px solid var(--color-line);
  padding-top: 12px;
  margin-top: -4px;
}
.requirements__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  color: var(--color-ink);
  padding: 6px 0;
}
.requirements__summary::-webkit-details-marker { display: none; }
.requirements__chevron {
  width: 20px; height: 20px;
  color: var(--color-primary);
  transition: transform 0.2s;
}
.requirements[open] .requirements__chevron { transform: rotate(180deg); }
.requirements__list {
  list-style: none;
  padding: 8px 0 0;
  margin: 0;
  font-size: 14px;
  color: var(--color-text-muted);
}
.requirements__list li {
  padding: 4px 0 4px 24px;
  position: relative;
  transition: color 0.15s;
}
.requirements__list li::before {
  content: "○";
  position: absolute;
  left: 4px;
  color: var(--color-line-strong);
  font-size: 12px;
}
.requirements__list li.is-met {
  color: var(--color-success);
}
.requirements__list li.is-met::before {
  content: "✓";
  color: var(--color-success);
  font-weight: 700;
}

/* ==========================================================================
   Dropdown — custom select (delivery method, MFA phone picker)
   Uses a <button> + <ul> pattern with JS toggling `.is-open` on the wrapper.
   ========================================================================== */
.dropdown {
  position: relative;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dropdown.is-open,
.dropdown:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(219, 92, 5, 0.08);
}
.dropdown__toggle {
  width: 100%;
  min-height: 62px;
  padding: 10px 44px 10px 16px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-ink);
  display: block;
  position: relative;
  border-radius: var(--radius-md);
}
.dropdown__label {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 2px;
  font-weight: 400;
}
.dropdown.is-open .dropdown__label,
.dropdown.has-value .dropdown__label { color: var(--color-primary); }
.dropdown__value {
  display: block;
  font-size: 16px;
  color: var(--color-ink);
  min-height: 22px;
  line-height: 1.4;
}
.dropdown__chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  color: var(--color-primary);
  transition: transform 0.2s;
  pointer-events: none;
}
.dropdown.is-open .dropdown__chevron { transform: translateY(-50%) rotate(180deg); }

.dropdown__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px 0;
  background: var(--color-surface);
  list-style: none;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  z-index: 30;
  max-height: 240px;
  overflow-y: auto;
  display: none;
}
.dropdown.is-open .dropdown__menu { display: block; }
.dropdown__option {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 16px;
  color: var(--color-ink);
  transition: background-color 0.1s;
}
.dropdown__option:hover,
.dropdown__option[aria-selected="true"] {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

/* ==========================================================================
   Factor picker (MFA method selection: Email / SMS)
   Radio inputs are visually hidden; the .factor-option__frame receives the
   visual state. The whole label is a clickable card with icon + copy + check.
   ========================================================================== */
.factor-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.factor-option {
  display: block;
  position: relative;
  cursor: pointer;
}
.factor-option__input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.factor-option__frame {
  display: grid;
  grid-template-columns: 44px 1fr 24px;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-md);
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.factor-option:hover .factor-option__frame { border-color: var(--color-line-strong); }
.factor-option__input:focus-visible + .factor-option__frame {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(219, 92, 5, 0.12);
}
.factor-option__input:checked + .factor-option__frame {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
.factor-option__icon {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  background: rgba(219, 92, 5, 0.10);
  border-radius: 10px;
}
.factor-option__icon svg { width: 24px; height: 24px; }
.factor-option__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.factor-option__title { font-size: 17px; font-weight: 600; color: var(--color-ink); }
.factor-option__desc { font-size: 14px; color: var(--color-text-muted); line-height: 1.4; }
.factor-option__check {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.15s, transform 0.15s;
}
.factor-option__check svg { width: 14px; height: 14px; }
.factor-option__input:checked + .factor-option__frame .factor-option__check {
  opacity: 1;
  transform: scale(1);
}

/* SMS sub-panel — revealed when SMS is chosen */
.mfa-sms-panel {
  margin-top: 4px;
  animation: mfa-sms-fade-in 0.22s ease-out;
}
.mfa-sms-panel[hidden] { display: none; }
@keyframes mfa-sms-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Info card — blue-tinted summary block (Link services success)
   ========================================================================== */
.info-card {
  background: #E7F0FA;
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 16px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.info-card__line {
  margin: 0;
  font-size: 15px;
  color: var(--color-ink);
}
.info-card__label { color: var(--color-text-muted); }

/* ==========================================================================
   Form banner — dynamic validation messages shown above a form.
   Matches the visual treatment of the error UI reference (Image 2 in
   the design brief): warning icon on the left, red-tinted background,
   red border, then message text and blue action links below.
   ========================================================================== */
.form-banner {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  animation: form-banner-in 0.22s ease-out;
}
.form-banner[hidden] { display: none; }
.form-banner--success {
  background: #E9F6EE;
  border-color: #B7DFC1;
}
.form-banner__icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: var(--color-error);
  margin-top: 1px;
}
.form-banner--success .form-banner__icon { color: var(--color-success); }
.form-banner__body { flex: 1; min-width: 0; }
.form-banner__text {
  margin: 0;
  font-size: 14px;
  color: var(--color-error);
  line-height: 1.5;
}
.form-banner--success .form-banner__text { color: var(--color-success); }
.form-banner__list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--color-error);
  line-height: 1.55;
}
.form-banner__list li { margin: 2px 0; }
.form-banner__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  font-size: 14px;
}
.form-banner__link {
  color: var(--color-link);
  font-weight: 600;
  cursor: pointer;
}
.form-banner__link:hover { text-decoration: underline; }
.form-banner__sep { color: var(--color-line-strong); }

@keyframes form-banner-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Resend link (Verify Email)
   ========================================================================== */
.resend {
  font-size: 14px;
  color: var(--color-ink);
  margin: -4px 0 12px;
}
.resend__link {
  color: var(--color-link);
  font-weight: 600;
  margin-left: 4px;
}
.resend__link:hover { text-decoration: underline; }

/* ==========================================================================
   Form-links (below inputs, e.g. Forgot PIN / Sign in with username)
   ========================================================================== */
.form-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin: 0 4px 8px;
}
.form-links__item {
  color: var(--color-link);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.form-links__item:hover { text-decoration: underline; }

/* ==========================================================================
   Choice cards (Customer Type view)
   ========================================================================== */
.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
  max-width: 1000px;
}
.choice-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 300px;
}
.choice-card__eyebrow {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.06em;
  margin: 0;
}
.choice-card__title {
  font-size: 26px;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
}
.choice-card__body {
  color: var(--color-text-muted);
  font-size: 16px;
  margin: 0 0 auto;
}

/* ==========================================================================
   My Account (post-onboarding landing page)
   ========================================================================== */
/* Global conditional visibility based on customer type.
   Default = existing customer (customer-only visible, new-only hidden).
   When JS adds .is-new-customer on <body>, the inverse applies. */
.new-only { display: none; }
body.is-new-customer .new-only { display: revert; }
body.is-new-customer .customer-only { display: none; }

/* Marketplace (new customer landing) */
.marketplace {
  margin-top: 8px;
}
.marketplace__title {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.marketplace__intro {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 20px;
  max-width: 680px;
}

/* Horizontal snap-scroll carousel that lets the row bleed edge-to-edge
   using negative margin + padding trick — matches the marketing look on
   both desktop and mobile. */
.marketplace__carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 4px 20px 24px;
  margin: 0 -20px;
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: 20px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.marketplace__carousel::-webkit-scrollbar { display: none; }

/* Individual catalog tile: dark kinetic-typography hero + white panel */
.explore-card {
  flex: 0 0 auto;
  width: min(86vw, 340px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.explore-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.explore-card__hero {
  background:
    radial-gradient(ellipse at 15% 20%, rgba(255,255,255,0.05), transparent 60%),
    linear-gradient(160deg, #0F1F30 0%, #04101F 100%);
  padding: 28px 26px 34px;
  min-height: 240px;
  display: flex;
  align-items: flex-start;
}
.explore-card__kicker {
  margin: 0;
  font-size: 34px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.explore-card__kicker-1 { color: var(--color-primary); }
.explore-card__kicker-2 { color: rgba(255, 255, 255, 0.45); }
.explore-card__kicker-3 { color: rgba(255, 255, 255, 0.22); }

/* Per-theme subtle tint on the hero for a touch of context */
.explore-card[data-theme="devices"] .explore-card__hero {
  background:
    radial-gradient(ellipse at 80% 30%, rgba(255,155,90,0.10), transparent 60%),
    linear-gradient(160deg, #0F1F30 0%, #04101F 100%);
}
.explore-card[data-theme="esim"] .explore-card__hero {
  background:
    radial-gradient(ellipse at 70% 25%, rgba(120,180,220,0.12), transparent 60%),
    linear-gradient(160deg, #0F2E3A 0%, #04101F 100%);
}
.explore-card[data-theme="internet"] .explore-card__hero {
  background:
    radial-gradient(ellipse at 25% 15%, rgba(219,92,5,0.18), transparent 60%),
    linear-gradient(160deg, #2A1A0F 0%, #04101F 100%);
}
.explore-card[data-theme="tv"] .explore-card__hero {
  background:
    radial-gradient(ellipse at 60% 80%, rgba(150,120,200,0.15), transparent 60%),
    linear-gradient(160deg, #1A1030 0%, #04101F 100%);
}

.explore-card__panel {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.explore-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 999px;
  background: #FFF9DB;
  color: #8A5A00;
  border: 1px solid #F5D67C;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.explore-card__badge-icon { width: 14px; height: 14px; color: #C08B00; }
.explore-card__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}
.explore-card__desc {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 8px;
  flex: 1;
}
.explore-card .btn { margin-top: auto; }


.account {
  flex: 1;
  padding: 40px 40px 64px;
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
}

.account-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
}
.account-hero__title {
  font-size: 34px;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.account-hero__number {
  font-size: 15px;
  color: var(--color-text-muted);
  margin: 0;
}

.line-picker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--color-ink);
  color: var(--color-ink);
  font-size: 17px;
  min-width: 260px;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color 0.15s;
}
.line-picker:hover { border-bottom-color: var(--color-primary); }
.line-picker__number { font-weight: 400; }
.line-picker__chevrons {
  width: 18px; height: 18px;
  color: var(--color-ink);
  flex-shrink: 0;
}

/* Tab bar */
.account-tabs {
  display: flex;
  gap: 0;
  border-bottom: 0;
  margin-bottom: 32px;
}
.account-tab {
  flex: 1;
  text-align: center;
  padding: 12px 0 14px;
  font-size: 17px;
  font-weight: 400;
  color: var(--color-text-muted);
  border-bottom: 3px solid var(--color-line);
  transition: color 0.15s, border-color 0.15s;
}
.account-tab:hover { color: var(--color-ink); }
.account-tab.is-active {
  color: var(--color-ink);
  font-weight: 600;
  border-bottom-color: var(--color-primary);
}

/* Billing card */
.billing-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr 1.5fr auto;
  gap: 40px;
  align-items: center;
  box-shadow: var(--shadow-card);
  margin-bottom: 48px;
}
.billing-card__amount { text-align: center; }
.billing-card__amount-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  margin: 0 0 4px;
}
.billing-card__amount-value {
  font-size: 42px;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.billing-card__details { display: flex; flex-direction: column; gap: 12px; }
.billing-card__row {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  font-size: 15px;
}
.billing-card__row-label { color: var(--color-ink); font-weight: 600; }
.billing-card__row-value { color: var(--color-ink); text-align: right; }
.billing-card__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 180px;
}

/* Freedom Data section */
.data-section { margin-top: 8px; }
.data-section__title {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.data-section__subtitle {
  color: var(--color-text-muted);
  font-size: 15px;
  margin: 0 0 20px;
}
.data-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  box-shadow: var(--shadow-card);
}
.data-card__main { display: flex; flex-direction: column; gap: 10px; }
.data-card__usage {
  margin: 0;
  font-size: 15px;
  color: var(--color-ink);
}
.data-card__value {
  font-size: 26px;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}
.data-card__unit { color: var(--color-ink); font-size: 15px; }
.data-card__label {
  margin: 0;
  color: var(--color-ink);
  font-size: 14px;
}
.data-card__label strong { color: var(--color-ink); font-weight: 600; }
.data-card__pct {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--color-text-muted);
}
.data-card__aside {
  border-left: 1px solid var(--color-line);
  padding-left: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 200px;
}
.data-card__link {
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.data-card__link:hover { color: var(--color-primary); }

/* Reusable progress track (used inside .data-card) */
.progress-track {
  width: 100%;
  height: 8px;
  background: #EEF0F3;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.progress-track__fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: inherit;
}

/* ==========================================================================
   Sign-in hero card (landing view)
   ========================================================================== */
.signin-hero {
  padding: 0 32px 48px;
  background: var(--color-bg);
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.signin-hero__card {
  max-width: var(--container-max);
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  margin-top: 24px;
}
.signin-hero__brand {
  background: #0F1F30;
  color: #FFFFFF;
  padding: 32px;
  position: relative;
  overflow: hidden;
  /* Grid overlap: all 4 slides drop into the same cell, only .is-active is visible. */
  display: grid;
  grid-template-areas: "slot";
}
.signin-hero__slide {
  grid-area: slot;
  display: flex;
  flex-direction: column;
  gap: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
}
.signin-hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Per-slide image containers — each variant applies its own CSS gradient.
   These are 100% CSS + inline SVG so they always load, offline included. */
.signin-hero__image {
  width: 100%;
  height: 340px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  isolation: isolate; /* ensure inner glows stay bounded */
}

.signin-hero__image--0 {
  /* Slide 1 · warm launch — hands holding a phone at sunset. */
  background:
    radial-gradient(ellipse at 32% 42%, rgba(255, 195, 140, 0.65), transparent 55%),
    radial-gradient(ellipse at 60% 65%, rgba(120, 165, 200, 0.5), transparent 60%),
    linear-gradient(135deg, #E5A57C 0%, #A66E4E 40%, #3E5A70 100%);
}
.signin-hero__image--1 {
  /* Slide 2 · security — deep midnight with a warm shield glow. */
  background:
    radial-gradient(circle at 50% 48%, rgba(219, 92, 5, 0.30), transparent 60%),
    radial-gradient(circle at 15% 20%, rgba(75, 110, 180, 0.35), transparent 55%),
    linear-gradient(135deg, #0A1932 0%, #1B2A4E 55%, #2D3B60 100%);
}
.signin-hero__image--2 {
  /* Slide 3 · biometric — cool teal with a fingerprint glow. */
  background:
    radial-gradient(circle at 55% 55%, rgba(255, 155, 90, 0.28), transparent 55%),
    radial-gradient(circle at 25% 25%, rgba(140, 200, 220, 0.35), transparent 55%),
    linear-gradient(135deg, #0F3C4C 0%, #1F5C6E 50%, #2A4A7C 100%);
}
.signin-hero__image--3 {
  /* Slide 4 · educational — warm sunset amber with soft mint. */
  background:
    radial-gradient(ellipse at 30% 40%, rgba(255, 180, 80, 0.60), transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(100, 180, 140, 0.35), transparent 60%),
    linear-gradient(135deg, #C87F3C 0%, #8E6A44 40%, #3D5A50 100%);
}

/* Inline SVG illustration centered inside slides 2-4 */
.signin-hero__illustration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.9;
}

/* Pause / Play control on the image */
.signin-hero__pause {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  transition: background 0.15s;
  z-index: 2;
}
.signin-hero__pause:hover { background: rgba(255, 255, 255, 0.32); }
.signin-hero__pause-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  height: 100%;
}
.signin-hero__pause-icon--play {
  display: none;
  position: relative;
}
.signin-hero__pause-icon--play::before {
  /* Play triangle */
  content: "";
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #FFFFFF;
  margin-left: 2px;
}
/* When slideshow is paused, show play icon (invert visibility) */
.signin-hero.is-paused .signin-hero__pause-icon--pause { display: none; }
.signin-hero.is-paused .signin-hero__pause-icon--play  { display: inline-flex; }

.signin-hero__pause-bar {
  width: 3px;
  height: 12px;
  background: #FFFFFF;
  border-radius: 1px;
  display: inline-block;
}

.signin-hero__brand-content { display: flex; flex-direction: column; gap: 12px; }
.signin-hero__eyebrow {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.14em;
}
.signin-hero__headline {
  font-size: 32px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
}
.signin-hero__accent { color: var(--color-primary); }
.signin-hero__lede {
  font-size: 14px;
  color: #C7CFD6;
  line-height: 1.55;
  margin: 4px 0 0;
}
.signin-hero__dots {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}
.signin-hero__dot {
  width: 34px;
  height: 5px;
  background: rgba(255,255,255,0.30);
  border-radius: 3px;
  padding: 0;
  border: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.signin-hero__dot:hover { background: rgba(255,255,255,0.55); }
.signin-hero__dot:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
.signin-hero__dot.is-active {
  background: var(--color-primary);
  width: 40px;
}

.signin-hero__form {
  padding: 48px 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.signin-hero__title {
  font-size: 28px;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.signin-hero__intro {
  padding-left: 14px;
  position: relative;
  margin: 0;
  font-size: 15px;
  color: var(--color-ink);
  line-height: 1.5;
}
.signin-hero__intro-bar {
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  background: var(--color-accent-bar);
  border-radius: 2px;
}
.signin-hero__intro-link {
  color: var(--color-link);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}
.signin-hero__intro-link:hover { text-decoration: underline; }

/* Inline form (email input + Continue) inside the sign-in card */
.signin-hero__inline-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* "Need help with the new sign-in?" link right under the email field.
   Anchored to the right on desktop; centered inside the mobile sheet. */
.signin-hero__help {
  margin: -12px 0 0;
  font-size: 14px;
  color: var(--color-text-muted);
  text-align: right;
  line-height: 1.5;
}
.signin-hero__help-link {
  color: var(--color-link);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  white-space: nowrap;
}
.signin-hero__help-link .icon-inline {
  color: var(--color-primary);
  width: 16px; height: 16px;
}
.signin-hero__help-link:hover { text-decoration: underline; }

/* Aux links directly under Continue: Create an account / Express Pay */
.signin-hero__aux {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: -8px;
}
.signin-hero__aux-line {
  margin: 0;
  font-size: 15px;
  color: var(--color-ink);
}
.signin-hero__aux-link {
  color: var(--color-link);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}
.signin-hero__aux-link:hover { text-decoration: underline; }

.signin-hero__footer {
  border-top: 1px solid var(--color-line);
  padding-top: 20px;
  text-align: center;
  /* Push the "Don't have a Freedom phone number?" block to the bottom
     of the form column on desktop, giving it more breathing room from
     the aux links above. On mobile inside the sheet, the media query
     resets this to a fixed spacing. */
  margin-top: auto;
}
.signin-hero__q {
  font-size: 15px;
  color: var(--color-ink);
  margin: 0 0 8px;
  font-weight: 600;
}
.signin-hero__cta-link {
  color: var(--color-link);
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.signin-hero__cta-link:hover { text-decoration: underline; }

/* ==========================================================================
   Site footer (dark)
   ========================================================================== */
.site-footer {
  background: var(--color-surface);
  /* Breathing room between the page content and the dark footer */
  margin-top: 48px;
}
.site-footer__dark {
  background: var(--color-black);
  color: #FFFFFF;
}
.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 48px 32px 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.site-footer__col { display: flex; flex-direction: column; gap: 12px; }
.site-footer__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  margin: 0 0 4px;
  color: #FFFFFF;
}
.site-footer__link {
  color: #FFFFFF;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.site-footer__link .icon-inline { color: var(--color-primary); width: 18px; height: 18px; }
.site-footer__link:hover { color: var(--color-primary); }
.site-footer__base {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 24px 32px;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-footer__social { display: flex; gap: 16px; }
.site-footer__social-link {
  color: #FFFFFF;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
}
.site-footer__social-link svg { width: 22px; height: 22px; }
.site-footer__social-link:hover { color: var(--color-primary); }
.site-footer__copyright {
  margin: 0;
  color: rgba(255,255,255,0.75);
  font-size: 13px;
}

/* ==========================================================================
   Mobile menu drawer (hamburger overlay)
   ========================================================================== */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  border: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: auto;
  cursor: pointer;
}
.mobile-menu.is-open .mobile-menu__scrim { opacity: 1; }
.mobile-menu__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 88vw);
  background: var(--color-surface);
  transform: translateX(100%);
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  box-shadow: -8px 0 24px rgba(0,0,0,0.15);
}
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }
.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-line);
}
.mobile-menu__close {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  border-radius: 6px;
}
.mobile-menu__close svg { width: 22px; height: 22px; }
.mobile-menu__close:hover { background: var(--color-bg); }
.mobile-menu__list {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
.mobile-menu__link,
.mobile-menu__foot-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  color: var(--color-ink);
  font-size: 17px;
  font-weight: 500;
  border-bottom: 1px solid var(--color-line);
}
.mobile-menu__link:last-child { border-bottom: 0; }
.mobile-menu__link:hover,
.mobile-menu__foot-link:hover { background: var(--color-bg); color: var(--color-primary); }
.mobile-menu__link .icon-inline,
.mobile-menu__foot-link .icon-inline {
  color: var(--color-primary);
  width: 20px; height: 20px;
}
.mobile-menu__foot {
  margin-top: auto;
  padding: 12px 0;
  border-top: 1px solid var(--color-line);
  background: var(--color-bg);
}
.mobile-menu__foot-link { padding: 12px 20px; font-size: 15px; }

/* Sign-in landing white-logo variant (revealed on mobile dark background) */
.brand-header__logo .logo-white { display: none; }

/* Sign-in mobile bits — hidden on desktop, revealed by mobile media query */
.signin-hero__mobile-cta { display: none; }
.signin-hero__sheet-close { display: none; }
.signin-hero__sheet-scrim { display: none; }
.signin-hero__title-suffix { display: none; }

/* ==========================================================================
   MOBILE — @media (max-width: 900px)
   Responsive adaptation of every view. Same DOM, same flow, mobile layout.
   ========================================================================== */
@media (max-width: 900px) {

  /* Prevent body scroll when mobile menu is open */
  body.is-menu-open { overflow: hidden; }

  /* ----- Nav ----- */
  .brand-strip { display: none; }
  .site-nav__inner { padding: 14px 20px; gap: 0; }
  .site-nav__main { display: none; }
  .site-nav__account { display: none; }
  .site-nav__toggle { display: inline-flex; margin-left: auto; }

  /* Mini-nav (Create Account / Verify Email) — smaller padding */
  .mini-nav__inner { padding: 14px 20px; }

  /* Brand-header (sign-in landing) — dark theme */
  .brand-header {
    background: transparent;
  }
  .brand-header__inner {
    padding: 20px 20px 0;
  }
  #view-signIn { background: #0A1932; min-height: 100vh; }
  #view-signIn .brand-header__logo .logo-black { display: none; }
  #view-signIn .brand-header__logo .logo-white { display: inline-block; }

  /* Sign-in hero — stack card, dark theme fills viewport */
  .signin-hero {
    padding: 0;
    background: transparent;
  }
  .signin-hero__card {
    grid-template-columns: 1fr;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    margin-top: 0;
  }
  /* Fill the remaining viewport now that the footer is gone,
     and pin the CTA close to the bottom edge (with iPhone safe-area). */
  .signin-hero { flex: 1; min-height: 0; }
  .signin-hero__card { min-height: 100%; }
  .signin-hero__brand {
    background: transparent;
    padding: 20px 20px calc(6px + env(safe-area-inset-bottom, 0px));
    min-height: 100%;
    grid-template-rows: 1fr auto;
    row-gap: 20px;
  }
  .signin-hero__slide {
    gap: 20px;
    align-content: start;
  }
  /* Square-shaped hero tile per the Figma mobile spec */
  .signin-hero__image {
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: 62vh;
  }
  .signin-hero__headline { font-size: 26px; line-height: 1.22; }
  .signin-hero__lede { font-size: 14px; line-height: 1.55; }
  .signin-hero__lede br { display: none; }
  .signin-hero__eyebrow { font-size: 12px; letter-spacing: 0.16em; }
  .signin-hero__dots { margin-top: 2px; }

  /* --- Mobile-only landing CTA (shown before sheet opens, state A) --- */
  /* Anchored to the bottom of the brand panel via the grid row layout,
     so the empty dark space that used to hold the footer now visually
     hosts the sign-in CTA + aux links with room to breathe. */
  .signin-hero__mobile-cta {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 4px 4px 8px;
    color: #FFFFFF;
  }
  .signin-hero__mobile-aux {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
  }
  .signin-hero__mobile-aux-link {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .signin-hero__mobile-aux-link span {
    color: #4FA9FF;
    font-weight: 600;
    margin-left: 4px;
  }
  .signin-hero__mobile-aux-link .icon-inline {
    color: var(--color-primary);
    width: 18px; height: 18px;
  }

  /* --- Mobile: reveal the title suffix "to My Freedom" --- */
  .signin-hero__title-suffix { display: inline; }

  /* --- Sheet scrim (dark backdrop behind sheet) --- */
  .signin-hero__sheet-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    border: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    z-index: 40;
    cursor: pointer;
  }
  .signin-hero.is-sheet-open .signin-hero__sheet-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  /* --- Sign-in form becomes a bottom sheet on mobile --- */
  .signin-hero__form {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    max-height: 88vh;
    overflow-y: auto;
    background: #FFFFFF;
    color: var(--color-ink);
    border-radius: 20px 20px 0 0;
    padding: 28px 20px 32px;
    box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.25);
    transform: translateY(100%);
    transition: transform 0.32s ease;
    z-index: 50;
    gap: 16px;
  }
  .signin-hero.is-sheet-open .signin-hero__form {
    transform: translateY(0);
  }
  /* Reset colors inside sheet to light theme (form has white bg) */
  .signin-hero__form .signin-hero__title { color: var(--color-ink); font-size: 24px; padding-right: 40px; }
  .signin-hero__form .signin-hero__intro { color: var(--color-ink); }
  .signin-hero__form .signin-hero__intro-link { color: var(--color-link); }
  .signin-hero__form .signin-hero__aux { text-align: center; margin-top: 4px; }
  .signin-hero__form .signin-hero__aux-line { color: var(--color-ink); font-size: 14px; }
  .signin-hero__form .signin-hero__aux-link { color: var(--color-link); }
  .signin-hero__form .signin-hero__footer {
    border-top: 1px solid var(--color-line);
    text-align: center;
    /* Reset the desktop's margin-top: auto — inside the mobile sheet
       we want normal spacing, not the "push to bottom" behavior. */
    margin-top: 12px;
  }
  .signin-hero__form .signin-hero__q { color: var(--color-ink); }
  .signin-hero__form .signin-hero__cta-link { color: var(--color-link); }

  /* Sheet close button (X in top-right corner of the sheet) */
  .signin-hero__sheet-close {
    display: inline-flex;
    position: absolute;
    top: 20px;
    right: 16px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    border-radius: 50%;
    transition: background-color 0.15s, color 0.15s;
    z-index: 2;
  }
  .signin-hero__sheet-close:hover {
    background: var(--color-bg);
    color: var(--color-ink);
  }
  .signin-hero__sheet-close svg { width: 22px; height: 22px; }

  /* Prevent body scroll when sheet is open */
  body.is-sheet-open { overflow: hidden; }

  /* ----- Page containers ----- */
  .page {
    padding: 24px 20px 40px;
  }
  .account {
    padding: 20px 16px 32px;
  }

  /* ----- Stepper — condensed vertical layout -----
     Each step becomes a stacked "marker on top, label below" column.
     Steps get equal width via flex:1. Aligning tops (flex-start)
     locks all markers to the same y-position so the connector line
     stays perfectly horizontal even when labels wrap different amounts. */
  .stepper {
    margin-bottom: 32px;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
  }
  .stepper__step {
    padding: 0;
    gap: 6px;
    font-size: 13px;
    flex-direction: column;
    text-align: center;
    flex: 1;
    min-width: 0;
  }
  .stepper__step:not(:last-child) { margin-right: 0; }
  /* Connector line: passes horizontally through the vertical center of the
     24px marker (top: 12px), spans from just past the previous marker to
     just before the current one, with a 16px breathing gap on each side. */
  .stepper__step + .stepper__step::before {
    left: calc(-50% + 16px);
    width: calc(100% - 32px);
    top: 12px;
    max-width: none;
  }
  .stepper__label {
    font-size: 12px;
    padding: 0 4px;
    line-height: 1.2;
  }

  /* ----- Form card — full width, tighter padding ----- */
  .form-card {
    padding: 28px 20px;
    max-width: 100%;
    border-radius: var(--radius-lg);
  }
  .form-card__title { font-size: 22px; }
  .form-card__intro { font-size: 14px; }

  /* ----- Choice cards — stack ----- */
  .choice-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .choice-card {
    padding: 28px 20px;
    min-height: auto;
    text-align: center;
  }
  .choice-card__title { font-size: 22px; }

  /* ----- My Account ----- */
  .account-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 24px;
  }
  .account-hero__title { font-size: 26px; }
  .line-picker { min-width: auto; width: 100%; }

  .account-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 -20px 24px;
    padding: 0 20px;
  }
  .account-tabs::-webkit-scrollbar { display: none; }
  .account-tab {
    flex: 0 0 auto;
    padding: 12px 12px 14px;
    font-size: 15px;
  }

  .billing-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 20px;
    text-align: center;
  }
  .billing-card__amount-value { font-size: 38px; }
  .billing-card__details {
    text-align: left;
    padding: 16px 0;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
  }
  .billing-card__row { justify-content: space-between; gap: 12px; }
  .billing-card__actions { min-width: 0; }

  .data-card {
    grid-template-columns: 1fr;
    padding: 24px 20px;
    gap: 20px;
  }
  .data-card__aside {
    border-left: 0;
    border-top: 1px solid var(--color-line);
    padding-left: 0;
    padding-top: 16px;
    min-width: 0;
  }

  /* ----- Site footer — hidden on mobile (per Figma) ----- */
  .site-footer { display: none; }

  /* ----- Marketplace carousel: wider tiles on mobile (+15%) ----- */
  .explore-card { width: min(99vw, 391px); }

  /* ----- Buttons - slightly larger tap targets ----- */
  .btn { min-height: 48px; padding: 12px 24px; }
  .btn--sm { min-height: 40px; padding: 8px 18px; }

  /* ----- Field labels/input paddings adjusted ----- */
  .field__input { min-height: 58px; padding: 24px 44px 8px 14px; }
  .field__label { top: 8px; left: 14px; }
}