/* ============================================================================
   OCEAN EXPORTS — Login · "Boarding-pass tear line"
   Bold Asymmetric / High-Contrast Blocking. Depends on theme.css tokens.
     50% charcoal marquee  |  thick red centre line + logo badge  |  50% white stub
   ============================================================================ */

:root {
  --ai-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --ai-mono:    "Space Mono", ui-monospace, "SFMono-Regular", monospace;
}

html, body { height: 100%; }
body.no-shell { min-height: 100vh; background: var(--surface-dark); line-height: 1.5; }
::selection { background: var(--brand); color: #fff; }
button { font-family: inherit; cursor: pointer; }

/* ── Board shell ─────────────────────────────────────────────────────────── */
.board {
  position: relative;
  display: grid;
  grid-template-columns: 56% 44%;   /* 56% marquee / 44% sign-in */
  min-height: 100vh;
  background: var(--surface-light);
}
/* full-page looping video backdrop; dark scrim (::before) sits above it for contrast.
   The still poster image sits directly behind the video and stays visible until the
   video has buffered enough to play through — then the video fades in over it. */
.board__bg, .board__poster,
.otpboard__bg, .otpboard__poster {
  position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: fill; pointer-events: none; border: 0;
}
.board::before {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,10,0.16), rgba(10,10,10,0.30));
}
.board > * { position: relative; z-index: 2; }
/* higher specificity than `.board > *` so the poster + video stay fixed full-screen
   backdrops instead of being pulled into the board grid as cells */
.board > .board__bg, .board > .board__poster,
.otpboard > .otpboard__bg, .otpboard > .otpboard__poster {
  position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: fill; background: #0b0b0b; pointer-events: none; border: 0;
}
/* video starts hidden (poster shows through), fades in once fully loaded */
.board__bg, .otpboard__bg { opacity: 0; transition: opacity .7s ease; }
.board__bg.is-ready, .otpboard__bg.is-ready { opacity: 1; }

/* Reduced-motion → skip the video entirely; the still poster image stays. */
@media (prefers-reduced-motion: reduce) {
  .board__bg, .otpboard__bg { display: none; }
}

/* ============================================================================
   LEFT — departure marquee (charcoal). Top / centred middle / pinned footer.
   ============================================================================ */
.board__marquee {
  position: relative; overflow: hidden;
  /* translucent so the ocean backdrop shows through this half (lightly darkened) */
  background: linear-gradient(rgba(12,12,12,0.08), rgba(12,12,12,0.20));
  color: var(--text-on-dark);
  display: flex; flex-direction: column;
  padding: 3rem 3.5rem;
}
.marquee__grid {
  position: absolute; inset: 0; opacity: .45; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at 20% 40%, #000 25%, transparent 78%);
          mask-image: radial-gradient(ellipse at 20% 40%, #000 25%, transparent 78%);
}
.board__marquee > * { position: relative; z-index: 1; }

/* everything from logo → cards is one vertically-centred, left-aligned group */
.marquee__body {
  flex: 1; width: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}

/* brand lockup + "By AJ Worldwide" caption */
.brandmark { display: flex; align-items: center; gap: 15px; margin-bottom: 1.9rem; }
.brandmark__logo { width: 54px; height: 54px; object-fit: contain; border-radius: var(--radius);
  box-shadow: 0 8px 22px rgba(224,26,34,0.25); }
.brandmark__wm { display: flex; flex-direction: column; line-height: 1.02; }
.brandmark__name { font-family: var(--ai-display); font-size: 30px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.brandmark__name b { font-weight: 700; color: var(--brand); }
.brandmark__by { font-size: 10px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-muted-dark); margin-top: 8px; }

/* status pill */
.pill { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 1.7rem;
  padding: 7px 15px; border-radius: 100px;
  background: rgba(224,26,34,0.08); border: 1px solid rgba(224,26,34,0.28); }
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 8px rgba(224,26,34,0.9); animation: pill-pulse 2s ease-in-out infinite; }
.pill span:not(.pill__dot) { font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #ff9297; }
@keyframes pill-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* headline — sentence case, accent phrase in red */
.marquee__headline {
  font-family: var(--ai-display); font-weight: 700;
  font-size: 48px; line-height: 1.1;
  letter-spacing: -0.02em; color: #fff; margin: 0; width: 100%;
}
.marquee__headline em { font-style: normal; color: var(--brand); }
.marquee__lede { margin: 1.15rem 0 0; max-width: 100%; font-size: 14.5px;
  line-height: 1.7; color: var(--text-muted-dark); }

/* card grid — full width, 2×2, horizontal icon-chip layout */
.cards { list-style: none; margin: 2.4rem 0 0; padding: 0; width: 100%;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.card { display: flex; align-items: center; gap: 14px; padding: 15px 16px;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px; backdrop-filter: blur(3px);
  transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.card:hover { transform: translateY(-3px); border-color: rgba(224,26,34,0.55);
  background: rgba(0,0,0,0.68); }
.card__icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--radius);
  display: grid; place-items: center; color: var(--brand);
  background: rgba(224,26,34,0.12); border: 1px solid rgba(224,26,34,0.30); }
.card__icon svg { width: 20px; height: 20px; }
.card__text { display: flex; flex-direction: column; }
.card__text strong { font-size: 13.5px; font-weight: 700; color: #fff; }
.card__text small  { font-size: 11px; color: var(--text-muted-dark); line-height: 1.4; margin-top: 2px; }

/* pinned footer, bottom-left */
.marquee__foot { color: rgba(255,255,255,0.42); }
.marquee__foot p { margin: 0; font-size: 11px; letter-spacing: .01em; }
.marquee__credit { margin-top: 5px !important; font-size: 10.5px; color: rgba(255,255,255,0.34); }
.marquee__credit b { color: rgba(255,255,255,0.62); font-weight: 700; }

/* ============================================================================
   SEAM — thick solid continuous red line + logo badge on the centre divide
   ============================================================================ */
/* vertical red line removed — the badge (its child) stays as the centre anchor */
.board__seam {
  position: absolute; top: 0; bottom: 0; left: 56%; transform: translateX(-50%);
  width: 0; z-index: 5; background: transparent; box-shadow: none;
}
.board__badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 6; width: 68px; height: 68px; border-radius: 50%;
  background: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 4px var(--brand), 0 12px 30px rgba(0,0,0,0.35);
}
.board__badge img { width: 35px; height: 35px; object-fit: contain; }

/* ============================================================================
   RIGHT — sign-in stub. Modern floating-label fields.
   ============================================================================ */
/* right pane is solid white (covers the backdrop on this half) */
.board__stub {
  background: var(--surface-light); color: var(--text-on-light);
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 2.5rem;
}
.stub { width: 100%; max-width: 384px; }

.stub__eyebrow { display: inline-block; font-family: var(--ai-mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  background: var(--brand); padding: 4px 11px; }
.stub__title { font-family: var(--ai-display); font-weight: 700; font-size: 1.9rem;
  letter-spacing: -0.02em; color: var(--text-on-light); margin: 1.15rem 0 .4rem; }
.stub__sub { font-family: var(--ai-mono); font-weight: 400; font-size: 13px; color: var(--text-muted-light); margin: 0; }

.stub__error { margin-top: 1.5rem; display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; font-family: var(--ai-mono); font-weight: 400; font-size: 12.5px;
  background: var(--brand-tint); border-left: 3px solid var(--brand); color: var(--brand-active); }
/* display:flex above would defeat the [hidden] attribute — restore it */
.stub__error[hidden], .stub__ok[hidden] { display: none; }
.stub__error svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--brand); }

/* input — label above the box, icon inside, visible placeholder.
   NOTE: wrapper is .formfield (not .field) to avoid colliding with the
   global .field input style in theme.css, which added an outer border. */
.formfield { margin-top: 1.4rem; }
.formfield__label { display: block; font-family: var(--ai-mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted-light); margin-bottom: 8px; }
.formfield__box { position: relative; }
.formfield__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.formfield__icon svg { width: 18px; height: 18px; color: var(--text-muted-light); transition: color .18s ease; }
.formfield__box input {
  width: 100%; height: 46px; padding: 0 44px 0 48px;
  border: 1.5px solid var(--border-light); border-radius: 8px; background: #fff;
  font-family: inherit; font-size: 15px; color: var(--text-on-light); outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.formfield__box input::placeholder { color: #b3b3b3; }
.formfield__box input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.formfield__box:focus-within .formfield__icon svg { color: var(--brand); }
.formfield__toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 4px; display: flex; }
.formfield__toggle svg { width: 18px; height: 18px; color: var(--text-muted-light); transition: color .18s ease; }
.formfield__toggle:hover svg { color: var(--brand); }
.formfield__hint { display: block; margin-top: 6px; font-size: 11.5px; font-style: normal; color: var(--brand); }

/* keep the input white during browser autofill (no grey/blue wash) */
.formfield__box input:-webkit-autofill,
.formfield__box input:-webkit-autofill:hover,
.formfield__box input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset; box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: var(--text-on-light);
  caret-color: var(--text-on-light);
}

.stub__submit { margin-top: 1.85rem; width: 100%; display: flex; align-items: center;
  justify-content: center; gap: 8px; padding: 15px 18px;
  border: 0; border-radius: var(--radius); background: var(--brand); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 700;
  transition: background-color .15s ease, transform .1s ease; }
.stub__submit:hover  { background: var(--brand-hover); }
.stub__submit:active { background: var(--brand-active); transform: translateY(1px); }
.stub__submit:disabled { background: var(--disabled-light); cursor: progress; }
.stub__submit svg { width: 17px; height: 17px; transition: transform .2s ease; }
.stub__submit:hover svg { transform: translateX(3px); }
.stub__submit.is-loading svg { animation: stub-spin .8s linear infinite; }
@keyframes stub-spin { to { transform: rotate(360deg); } }

.stub__note { margin-top: 1.5rem; text-align: center; font-family: var(--ai-mono); font-weight: 400; font-size: 11.5px; color: var(--text-muted-light); }

/* ── In-page view switching (sign in ⇄ forgot-password flow) ────────────── */
.stubviews .view { display: none; }
.stubviews .view.is-active { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .stubviews .view.is-active { animation: view-in .35s ease-out both; }
  @keyframes view-in { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
}

.accent { color: var(--brand); }

/* step indicator */
.stepbar { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; }
.stepbar i { width: 28px; height: 3px; border-radius: 3px; background: var(--border-light); transition: all .35s ease; }
.stepbar i.is-active { background: var(--brand); width: 36px; }
.stepbar i.is-done { background: rgba(224,26,34,0.35); }

/* back link */
.backlink { display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 6px 10px 6px 4px; margin-bottom: 14px;
  border-radius: 6px; font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--text-muted-light); transition: color .18s ease, background .18s ease; }
.backlink:hover { color: var(--brand); background: var(--brand-tint); }
.backlink svg { width: 14px; height: 14px; }

/* divider + secondary action (Forgot Password) */
.stub__divider { display: flex; align-items: center; gap: 12px; margin: 1.4rem 0 1.1rem; }
.stub__divider::before, .stub__divider::after { content: ''; flex: 1; height: 1px; background: var(--border-light); }
.stub__divider span { font-family: var(--ai-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted-light); }
.stub__alt { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border-radius: 8px; background: #fff;
  border: 1.5px solid var(--border-light); color: var(--text-muted-light);
  font-family: var(--ai-mono); font-size: 12.5px; font-weight: 400;
  transition: border-color .18s ease, color .18s ease, background .18s ease; }
.stub__alt:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.stub__alt svg { width: 15px; height: 15px; }

/* plain inputs (no left icon) in the reset flow */
.formfield__box--plain input { padding-left: 16px; }

/* success view */
.success-box { text-align: center; padding: 14px 0 4px; }
.success-box__icon { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 12px;
  display: grid; place-items: center; color: #16a34a;
  background: rgba(22,163,74,0.1); border: 1px solid rgba(22,163,74,0.25); }
.success-box__icon svg { width: 20px; height: 20px; }
.success-box h3 { font-family: var(--ai-display); font-size: 1.4rem; font-weight: 700;
  color: var(--text-on-light); margin: 0 0 8px; }
.success-box p { font-size: 13.5px; color: var(--text-muted-light); line-height: 1.6; margin: 0 0 10px; }

/* ── Entrance (respects reduced-motion) ─────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .marquee__mid, .stub { animation: board-rise .6s cubic-bezier(.4,0,.2,1) both; }
  .stub { animation-delay: .1s; }
  @keyframes board-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ============================================================================
   VERIFY OTP — centered white stub over the same ocean backdrop
   ============================================================================ */
.otpboard {
  position: relative; min-height: 100vh;
  display: grid; place-items: center; padding: 2rem 1.25rem;
}
.otpboard::before {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,10,0.24), rgba(10,10,10,0.40));
}
.otpboard > .otpboard__bg { z-index: 0; }
.otpcard {
  position: relative; z-index: 2;
  width: 100%; max-width: 420px;
  background: var(--surface-light); color: var(--text-on-light);
  border-radius: 14px; padding: 3.4rem 2.5rem 2.25rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
@media (prefers-reduced-motion: no-preference) {
  .otpcard { animation: board-rise .6s cubic-bezier(.4,0,.2,1) both; }
}
.otpcard__badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 4px var(--brand), 0 12px 30px rgba(0,0,0,0.35);
}
.otpcard__badge img { width: 33px; height: 33px; object-fit: contain; }
.otpcard .stub__title { margin-top: 1rem; }
.otpcard__email { color: var(--brand); font-weight: 700; }
/* dev mode only — the code itself, since nothing was emailed */
.otpcard__devcode {
  margin: 12px 0 0; padding: 12px 16px; text-align: center;
  font-family: var(--ai-mono); font-size: 28px; font-weight: 700; letter-spacing: .3em;
  color: var(--brand); background: var(--brand-tint); border: 1px dashed var(--brand);
  border-radius: var(--radius); user-select: all;
}

/* success note (green counterpart of .stub__error) */
.stub__ok { margin-top: 1.5rem; display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; font-size: 13px;
  background: rgba(22,163,74,0.08); border-left: 3px solid #16a34a; color: #15803d; }
.stub__ok svg { width: 17px; height: 17px; flex-shrink: 0; color: #16a34a; }

/* 6 digit boxes */
.otpdigits { display: flex; gap: 10px; justify-content: center; margin-top: 1.75rem; }
.otpdigit {
  width: 50px; height: 58px; text-align: center;
  border: 1.5px solid var(--border-light); border-radius: 8px; background: #fff;
  font-family: var(--ai-mono); font-size: 24px; font-weight: 700;
  color: var(--text-on-light); outline: none; caret-color: var(--brand);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.otpdigit:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.otpdigit.filled { border-color: var(--brand); background: var(--brand-tint); }

/* countdown + actions */
.otpcard__timer { margin: 1.15rem 0 0; text-align: center;
  font-family: var(--ai-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--text-muted-light); }
.otpcard__timer span, .otpcard__timer b { color: var(--brand); font-weight: 700; }
.otpcard__actions { margin-top: 1.4rem; display: flex; align-items: center;
  justify-content: space-between; }
.otpcard__actions a, .otpcard__actions button {
  font-size: 12px; color: var(--text-muted-light); text-decoration: none;
  background: none; border: 0; padding: 0; font-family: inherit;
  transition: color .18s ease; }
.otpcard__actions a:hover, .otpcard__actions button:hover { color: var(--brand); }
.otpcard__actions button b { color: var(--brand); font-weight: 700; }

/* ============================================================================
   MEDIA QUERIES — one block per screen width, every size spelled out.
   The rules above are the 1920px design. Each block below restates the same
   properties for that width so the login, verify-OTP and set-password pages
   keep the 1920 layout and proportions on smaller screens while staying
   readable: spacing shrinks with the screen, controls shrink less, and type
   shrinks gently with a floor (body text never under 11px, captions never
   under 7px). Tune a screen by editing the numbers in its block only.
   ============================================================================ */

/* ---- 1680 — large laptops / 1920 at 115%  (space x0.88 · controls x0.93 · type x0.94) ---- */
@media (max-width: 1680px) {
  .board__marquee { padding: 42px 49px; }
  .marquee__grid { background-size: 24.5px 24.5px; }
  .brandmark { gap: 13.1px; margin-bottom: 26.6px; }
  .brandmark__logo { width: 51px; height: 51px; }
  .brandmark__name { font-size: 28.3px; }
  .brandmark__by { font-size: 9.4px; margin-top: 7px; }
  .marquee__headline { font-size: 45.3px; }
  .marquee__lede { margin-top: 16.1px; font-size: 13.7px; }
  .cards { margin-top: 33.6px; gap: 12.2px; }
  .card { gap: 12.2px; padding: 13.1px 14px; border-radius: 10.5px; }
  .card__icon { width: 39.6px; height: 39.6px; }
  .card__icon svg { width: 18.9px; height: 18.9px; }
  .card__text strong { font-size: 12.7px; }
  .card__text small { font-size: 10.4px; margin-top: 1.8px; }
  .marquee__foot p { font-size: 10.4px; }
  .marquee__credit { font-size: 9.9px; }
  .board__badge { width: 62.9px; height: 62.9px; }
  .board__badge img { width: 33px; height: 33px; }
  .board__stub { padding: 42px 35px; }
  .stub { max-width: 355.2px; }
  .stub__eyebrow { font-size: 10.4px; padding: 3.5px 9.6px; }
  .stub__title { font-size: 28.7px; margin: 16.1px 0 5.6px; }
  .stub__sub { font-size: 12.3px; }
  .stub__error { margin-top: 21px; gap: 7.9px; padding: 9.6px 11.4px; font-size: 11.8px; }
  .stub__error svg { width: 16px; height: 16px; }
  .formfield { margin-top: 19.6px; }
  .formfield__label { font-size: 9.9px; margin-bottom: 7px; }
  .formfield__icon { left: 14px; }
  .formfield__icon svg { width: 17px; height: 17px; }
  .formfield__box input { height: 42.6px; padding: 0 38.5px 0 42px; border-radius: 7px; font-size: 14.2px; }
  .formfield__box--plain input { padding-left: 14px; }
  .formfield__toggle { right: 10.5px; padding: 3.5px; }
  .formfield__toggle svg { width: 17px; height: 17px; }
  .formfield__hint { margin-top: 5.2px; font-size: 10.9px; }
  .stub__submit { margin-top: 25.9px; gap: 7px; padding: 13.9px 16.7px; font-size: 14.2px; }
  .stub__submit svg { width: 16px; height: 16px; }
  .stub__note { margin-top: 21px; font-size: 10.9px; }
  .stepbar { gap: 5.2px; margin-bottom: 17.5px; }
  .stepbar i { width: 25.9px; }
  .stepbar i.is-active { width: 33.3px; }
  .backlink { gap: 5.2px; padding: 5.2px 8.8px 5.2px 3.5px; margin-bottom: 12.2px; border-radius: 5.2px; font-size: 11.3px; }
  .backlink svg { width: 13.2px; height: 13.2px; }
  .stub__divider { gap: 10.5px; margin: 19.6px 0 15.4px; }
  .stub__divider span { font-size: 9.4px; }
  .stub__alt { gap: 7px; padding: 11.1px 14.8px; border-radius: 7px; font-size: 11.8px; }
  .stub__alt svg { width: 14.2px; height: 14.2px; }
  .success-box { padding: 12.2px 0 3.5px; }
  .success-box__icon { width: 43.4px; height: 43.4px; margin-bottom: 12.2px; border-radius: 10.5px; }
  .success-box__icon svg { width: 18.9px; height: 18.9px; }
  .success-box h3 { font-size: 21.1px; margin-bottom: 7px; }
  .success-box p { font-size: 12.7px; margin-bottom: 8.8px; }
  .otpboard { padding: 28px 17.5px; }
  .otpcard { max-width: 388.5px; border-radius: 12.2px; padding: 47.6px 35px 31.5px; }
  .otpcard__badge { width: 59.2px; height: 59.2px; }
  .otpcard__badge img { width: 31.1px; height: 31.1px; }
  .otpcard .stub__title { margin-top: 14px; }
  .otpcard__devcode { margin-top: 10.5px; padding: 10.5px 14px; font-size: 26.4px; }
  .stub__ok { margin-top: 21px; gap: 7.9px; padding: 9.6px 11.4px; font-size: 12.3px; }
  .stub__ok svg { width: 16px; height: 16px; }
  .otpdigits { gap: 8.8px; margin-top: 24.5px; }
  .otpdigit { width: 46.2px; height: 53.7px; border-radius: 7px; font-size: 22.7px; }
  .otpcard__timer { margin-top: 16.1px; font-size: 10.4px; }
  .otpcard__actions { margin-top: 19.6px; }
  .otpcard__actions a, .otpcard__actions button { font-size: 11.3px; }
}

/* ---- 1536 — 1920 at 125%  (space x0.80 · controls x0.88 · type x0.91) ---- */
@media (max-width: 1536px) {
  .board__marquee { padding: 38.4px 44.8px; }
  .marquee__grid { background-size: 22.4px 22.4px; }
  .brandmark { gap: 12px; margin-bottom: 24.3px; }
  .brandmark__logo { width: 49.1px; height: 49.1px; }
  .brandmark__name { font-size: 27.3px; }
  .brandmark__by { font-size: 9.1px; margin-top: 6.4px; }
  .marquee__headline { font-size: 43.7px; }
  .marquee__lede { margin-top: 14.7px; font-size: 13.2px; }
  .cards { margin-top: 30.7px; gap: 11.2px; }
  .card { gap: 11.2px; padding: 12px 12.8px; border-radius: 9.6px; }
  .card__icon { width: 38.2px; height: 38.2px; }
  .card__icon svg { width: 18.2px; height: 18.2px; }
  .card__text strong { font-size: 12.3px; }
  .card__text small { font-size: 10px; margin-top: 1.6px; }
  .marquee__foot p { font-size: 10px; }
  .marquee__credit { font-size: 9.6px; }
  .board__badge { width: 59.8px; height: 59.8px; }
  .board__badge img { width: 31.9px; height: 31.9px; }
  .board__stub { padding: 38.4px 32px; }
  .stub { max-width: 337.9px; }
  .stub__eyebrow { font-size: 10px; padding: 3.2px 8.8px; }
  .stub__title { font-size: 27.7px; margin: 14.7px 0 5.1px; }
  .stub__sub { font-size: 11.8px; }
  .stub__error { margin-top: 19.2px; gap: 7.2px; padding: 8.8px 10.4px; font-size: 11.4px; }
  .stub__error svg { width: 15.5px; height: 15.5px; }
  .formfield { margin-top: 17.9px; }
  .formfield__label { font-size: 9.6px; margin-bottom: 6.4px; }
  .formfield__icon { left: 12.8px; }
  .formfield__icon svg { width: 16.4px; height: 16.4px; }
  .formfield__box input { height: 40.5px; padding: 0 35.2px 0 38.4px; border-radius: 6.4px; font-size: 13.7px; }
  .formfield__box--plain input { padding-left: 12.8px; }
  .formfield__toggle { right: 9.6px; padding: 3.2px; }
  .formfield__toggle svg { width: 16.4px; height: 16.4px; }
  .formfield__hint { margin-top: 4.8px; font-size: 10.5px; }
  .stub__submit { margin-top: 23.7px; gap: 6.4px; padding: 13.2px 15.8px; font-size: 13.7px; }
  .stub__submit svg { width: 15.5px; height: 15.5px; }
  .stub__note { margin-top: 19.2px; font-size: 10.5px; }
  .stepbar { gap: 4.8px; margin-bottom: 16px; }
  .stepbar i { width: 24.6px; }
  .stepbar i.is-active { width: 31.7px; }
  .backlink { gap: 4.8px; padding: 4.8px 8px 4.8px 3.2px; margin-bottom: 11.2px; border-radius: 4.8px; font-size: 10.9px; }
  .backlink svg { width: 12.7px; height: 12.7px; }
  .stub__divider { gap: 9.6px; margin: 17.9px 0 14.1px; }
  .stub__divider span { font-size: 9.1px; }
  .stub__alt { gap: 6.4px; padding: 10.6px 14.1px; border-radius: 6.4px; font-size: 11.4px; }
  .stub__alt svg { width: 13.7px; height: 13.7px; }
  .success-box { padding: 11.2px 0 3.2px; }
  .success-box__icon { width: 41.9px; height: 41.9px; margin-bottom: 11.2px; border-radius: 9.6px; }
  .success-box__icon svg { width: 18.2px; height: 18.2px; }
  .success-box h3 { font-size: 20.4px; margin-bottom: 6.4px; }
  .success-box p { font-size: 12.3px; margin-bottom: 8px; }
  .otpboard { padding: 25.6px 16px; }
  .otpcard { max-width: 369.6px; border-radius: 11.2px; padding: 43.5px 32px 28.8px; }
  .otpcard__badge { width: 56.3px; height: 56.3px; }
  .otpcard__badge img { width: 30px; height: 30px; }
  .otpcard .stub__title { margin-top: 12.8px; }
  .otpcard__devcode { margin-top: 9.6px; padding: 9.6px 12.8px; font-size: 25.5px; }
  .stub__ok { margin-top: 19.2px; gap: 7.2px; padding: 8.8px 10.4px; font-size: 11.8px; }
  .stub__ok svg { width: 15.5px; height: 15.5px; }
  .otpdigits { gap: 8px; margin-top: 22.4px; }
  .otpdigit { width: 44px; height: 51px; border-radius: 6.4px; font-size: 21.8px; }
  .otpcard__timer { margin-top: 14.7px; font-size: 10px; }
  .otpcard__actions { margin-top: 17.9px; }
  .otpcard__actions a, .otpcard__actions button { font-size: 10.9px; }
}

/* ---- 1440 — MacBook / 1920 at 133%  (space x0.75 · controls x0.85 · type x0.89) ---- */
@media (max-width: 1440px) {
  .board__marquee { padding: 36px 42px; }
  .marquee__grid { background-size: 21px 21px; }
  .brandmark { gap: 11.2px; margin-bottom: 22.8px; }
  .brandmark__logo { width: 47.9px; height: 47.9px; }
  .brandmark__name { font-size: 26.6px; }
  .brandmark__by { font-size: 8.9px; margin-top: 6px; }
  .marquee__headline { font-size: 42.6px; }
  .marquee__lede { margin-top: 13.8px; font-size: 12.9px; }
  .cards { margin-top: 28.8px; gap: 10.5px; }
  .card { gap: 10.5px; padding: 11.2px 12px; border-radius: 9px; }
  .card__icon { width: 37.3px; height: 37.3px; }
  .card__icon svg { width: 17.8px; height: 17.8px; }
  .card__text strong { font-size: 12px; }
  .card__text small { font-size: 10px; margin-top: 1.5px; }
  .marquee__foot p { font-size: 10px; }
  .marquee__credit { font-size: 9.3px; }
  .board__badge { width: 57.8px; height: 57.8px; }
  .board__badge img { width: 31.1px; height: 31.1px; }
  .board__stub { padding: 36px 30px; }
  .stub { max-width: 326.4px; }
  .stub__eyebrow { font-size: 10px; padding: 3px 8.2px; }
  .stub__title { font-size: 27px; margin: 13.8px 0 4.8px; }
  .stub__sub { font-size: 11.5px; }
  .stub__error { margin-top: 18px; gap: 6.8px; padding: 8.2px 9.8px; font-size: 11.1px; }
  .stub__error svg { width: 15.1px; height: 15.1px; }
  .formfield { margin-top: 16.8px; }
  .formfield__label { font-size: 9.3px; margin-bottom: 6px; }
  .formfield__icon { left: 12px; }
  .formfield__icon svg { width: 16px; height: 16px; }
  .formfield__box input { height: 39.1px; padding: 0 33px 0 36px; border-radius: 6px; font-size: 13.3px; }
  .formfield__box--plain input { padding-left: 12px; }
  .formfield__toggle { right: 9px; padding: 3px; }
  .formfield__toggle svg { width: 16px; height: 16px; }
  .formfield__hint { margin-top: 4.5px; font-size: 10.2px; }
  .stub__submit { margin-top: 22.2px; gap: 6px; padding: 12.8px 15.3px; font-size: 13.3px; }
  .stub__submit svg { width: 15.1px; height: 15.1px; }
  .stub__note { margin-top: 18px; font-size: 10.2px; }
  .stepbar { gap: 4.5px; margin-bottom: 15px; }
  .stepbar i { width: 23.8px; }
  .stepbar i.is-active { width: 30.6px; }
  .backlink { gap: 4.5px; padding: 4.5px 7.5px 4.5px 3px; margin-bottom: 10.5px; border-radius: 4.5px; font-size: 10.7px; }
  .backlink svg { width: 12.4px; height: 12.4px; }
  .stub__divider { gap: 9px; margin: 16.8px 0 13.2px; }
  .stub__divider span { font-size: 8.9px; }
  .stub__alt { gap: 6px; padding: 10.2px 13.6px; border-radius: 6px; font-size: 11.1px; }
  .stub__alt svg { width: 13.3px; height: 13.3px; }
  .success-box { padding: 10.5px 0 3px; }
  .success-box__icon { width: 40.8px; height: 40.8px; margin-bottom: 10.5px; border-radius: 9px; }
  .success-box__icon svg { width: 17.8px; height: 17.8px; }
  .success-box h3 { font-size: 19.9px; margin-bottom: 6px; }
  .success-box p { font-size: 12px; margin-bottom: 7.5px; }
  .otpboard { padding: 24px 15px; }
  .otpcard { max-width: 357px; border-radius: 10.5px; padding: 40.8px 30px 27px; }
  .otpcard__badge { width: 54.4px; height: 54.4px; }
  .otpcard__badge img { width: 29.3px; height: 29.3px; }
  .otpcard .stub__title { margin-top: 12px; }
  .otpcard__devcode { margin-top: 9px; padding: 9px 12px; font-size: 24.9px; }
  .stub__ok { margin-top: 18px; gap: 6.8px; padding: 8.2px 9.8px; font-size: 11.5px; }
  .stub__ok svg { width: 15.1px; height: 15.1px; }
  .otpdigits { gap: 7.5px; margin-top: 21px; }
  .otpdigit { width: 42.5px; height: 49.3px; border-radius: 6px; font-size: 21.3px; }
  .otpcard__timer { margin-top: 13.8px; font-size: 10px; }
  .otpcard__actions { margin-top: 16.8px; }
  .otpcard__actions a, .otpcard__actions button { font-size: 10.7px; }
}

/* ---- 1366 — common 15.6" laptop  (space x0.71 · controls x0.83 · type x0.87) ---- */
@media (max-width: 1366px) {
  .board__marquee { padding: 34.1px 39.8px; }
  .marquee__grid { background-size: 19.9px 19.9px; }
  .brandmark { gap: 10.7px; margin-bottom: 21.6px; }
  .brandmark__logo { width: 47px; height: 47px; }
  .brandmark__name { font-size: 26.1px; }
  .brandmark__by { font-size: 8.7px; margin-top: 5.7px; }
  .marquee__headline { font-size: 41.8px; }
  .marquee__lede { margin-top: 13.1px; font-size: 12.6px; }
  .cards { margin-top: 27.3px; gap: 10px; }
  .card { gap: 10px; padding: 10.7px 11.4px; border-radius: 8.5px; }
  .card__icon { width: 36.5px; height: 36.5px; }
  .card__icon svg { width: 17.4px; height: 17.4px; }
  .card__text strong { font-size: 11.7px; }
  .card__text small { font-size: 10px; margin-top: 1.4px; }
  .marquee__foot p { font-size: 10px; }
  .marquee__credit { font-size: 9.1px; }
  .board__badge { width: 56.2px; height: 56.2px; }
  .board__badge img { width: 30.5px; height: 30.5px; }
  .board__stub { padding: 34.1px 28.5px; }
  .stub { max-width: 317.5px; }
  .stub__eyebrow { font-size: 10px; padding: 2.8px 7.8px; }
  .stub__title { font-size: 26.5px; margin: 13.1px 0 4.6px; }
  .stub__sub { font-size: 11.3px; }
  .stub__error { margin-top: 17.1px; gap: 6.4px; padding: 7.8px 9.2px; font-size: 10.9px; }
  .stub__error svg { width: 14.8px; height: 14.8px; }
  .formfield { margin-top: 15.9px; }
  .formfield__label { font-size: 9.1px; margin-bottom: 5.7px; }
  .formfield__icon { left: 11.4px; }
  .formfield__icon svg { width: 15.7px; height: 15.7px; }
  .formfield__box input { height: 38px; padding: 0 31.3px 0 34.1px; border-radius: 5.7px; font-size: 13.1px; }
  .formfield__box--plain input { padding-left: 11.4px; }
  .formfield__toggle { right: 8.5px; padding: 2.8px; }
  .formfield__toggle svg { width: 15.7px; height: 15.7px; }
  .formfield__hint { margin-top: 4.3px; font-size: 10px; }
  .stub__submit { margin-top: 21.1px; gap: 5.7px; padding: 12.4px 14.9px; font-size: 13.1px; }
  .stub__submit svg { width: 14.8px; height: 14.8px; }
  .stub__note { margin-top: 17.1px; font-size: 10px; }
  .stepbar { gap: 4.3px; margin-bottom: 14.2px; }
  .stepbar i { width: 23.2px; }
  .stepbar i.is-active { width: 29.8px; }
  .backlink { gap: 4.3px; padding: 4.3px 7.1px 4.3px 2.8px; margin-bottom: 10px; border-radius: 4.3px; font-size: 10.4px; }
  .backlink svg { width: 12.2px; height: 12.2px; }
  .stub__divider { gap: 8.5px; margin: 15.9px 0 12.5px; }
  .stub__divider span { font-size: 8.7px; }
  .stub__alt { gap: 5.7px; padding: 9.9px 13.2px; border-radius: 5.7px; font-size: 10.9px; }
  .stub__alt svg { width: 13.1px; height: 13.1px; }
  .success-box { padding: 10px 0 2.8px; }
  .success-box__icon { width: 40px; height: 40px; margin-bottom: 10px; border-radius: 8.5px; }
  .success-box__icon svg { width: 17.4px; height: 17.4px; }
  .success-box h3 { font-size: 19.5px; margin-bottom: 5.7px; }
  .success-box p { font-size: 11.7px; margin-bottom: 7.1px; }
  .otpboard { padding: 22.8px 14.2px; }
  .otpcard { max-width: 347.3px; border-radius: 10px; padding: 38.7px 28.5px 25.6px; }
  .otpcard__badge { width: 52.9px; height: 52.9px; }
  .otpcard__badge img { width: 28.7px; height: 28.7px; }
  .otpcard .stub__title { margin-top: 11.4px; }
  .otpcard__devcode { margin-top: 8.5px; padding: 8.5px 11.4px; font-size: 24.4px; }
  .stub__ok { margin-top: 17.1px; gap: 6.4px; padding: 7.8px 9.2px; font-size: 11.3px; }
  .stub__ok svg { width: 14.8px; height: 14.8px; }
  .otpdigits { gap: 7.1px; margin-top: 19.9px; }
  .otpdigit { width: 41.3px; height: 48px; border-radius: 5.7px; font-size: 20.9px; }
  .otpcard__timer { margin-top: 13.1px; font-size: 10px; }
  .otpcard__actions { margin-top: 15.9px; }
  .otpcard__actions a, .otpcard__actions button { font-size: 10.4px; }
}

/* ---- 1280 — 1920 at 150%  (space x0.63 · controls x0.76 · type x0.81) ---- */
@media (max-width: 1280px) {
  .board__marquee { padding: 30.4px 35.5px; }
  .marquee__grid { background-size: 17.7px 17.7px; }
  .brandmark { gap: 9.5px; margin-bottom: 19.3px; }
  .brandmark__logo { width: 43.6px; height: 43.6px; }
  .brandmark__name { font-size: 24.2px; }
  .brandmark__by { font-size: 8.1px; margin-top: 5.1px; }
  .marquee__headline { font-size: 38.8px; }
  .marquee__lede { margin-top: 11.7px; font-size: 11.7px; }
  .cards { margin-top: 24.3px; gap: 8.9px; }
  .card { gap: 8.9px; padding: 9.5px 10.1px; border-radius: 7.6px; }
  .card__icon { width: 33.9px; height: 33.9px; }
  .card__icon svg { width: 16.1px; height: 16.1px; }
  .card__text strong { font-size: 10.9px; }
  .card__text small { font-size: 10px; margin-top: 1.3px; }
  .marquee__foot p { font-size: 10px; }
  .marquee__credit { font-size: 8.5px; }
  .board__badge { width: 51.7px; height: 51.7px; }
  .board__badge img { width: 28.3px; height: 28.3px; }
  .board__stub { padding: 30.4px 25.3px; }
  .stub { max-width: 291.8px; }
  .stub__eyebrow { font-size: 10px; padding: 2.5px 7px; }
  .stub__title { font-size: 24.5px; margin: 11.7px 0 4.1px; }
  .stub__sub { font-size: 10.5px; }
  .stub__error { margin-top: 15.2px; gap: 5.7px; padding: 7px 8.2px; font-size: 10.1px; }
  .stub__error svg { width: 13.7px; height: 13.7px; }
  .formfield { margin-top: 14.2px; }
  .formfield__label { font-size: 8.5px; margin-bottom: 5.1px; }
  .formfield__icon { left: 10.1px; }
  .formfield__icon svg { width: 14.5px; height: 14.5px; }
  .formfield__box input { height: 35px; padding: 0 27.9px 0 30.4px; border-radius: 5.1px; font-size: 12.1px; }
  .formfield__box--plain input { padding-left: 10.1px; }
  .formfield__toggle { right: 7.6px; padding: 2.5px; }
  .formfield__toggle svg { width: 14.5px; height: 14.5px; }
  .formfield__hint { margin-top: 3.8px; font-size: 10px; }
  .stub__submit { margin-top: 18.7px; gap: 5.1px; padding: 11.4px 13.7px; font-size: 12.1px; }
  .stub__submit svg { width: 13.7px; height: 13.7px; }
  .stub__note { margin-top: 15.2px; font-size: 10px; }
  .stepbar { gap: 3.8px; margin-bottom: 12.7px; }
  .stepbar i { width: 21.3px; }
  .stepbar i.is-active { width: 27.4px; }
  .backlink { gap: 3.8px; padding: 3.8px 6.3px 3.8px 2.5px; margin-bottom: 8.9px; border-radius: 3.8px; font-size: 10px; }
  .backlink svg { width: 11.3px; height: 11.3px; }
  .stub__divider { gap: 7.6px; margin: 14.2px 0 11.1px; }
  .stub__divider span { font-size: 8.1px; }
  .stub__alt { gap: 5.1px; padding: 9.1px 12.2px; border-radius: 5.1px; font-size: 10.1px; }
  .stub__alt svg { width: 12.1px; height: 12.1px; }
  .success-box { padding: 8.9px 0 2.5px; }
  .success-box__icon { width: 37.1px; height: 37.1px; margin-bottom: 8.9px; border-radius: 7.6px; }
  .success-box__icon svg { width: 16.1px; height: 16.1px; }
  .success-box h3 { font-size: 18.1px; margin-bottom: 5.1px; }
  .success-box p { font-size: 10.9px; margin-bottom: 6.3px; }
  .otpboard { padding: 20.3px 12.7px; }
  .otpcard { max-width: 319.2px; border-radius: 8.9px; padding: 34.5px 25.3px 22.8px; }
  .otpcard__badge { width: 48.6px; height: 48.6px; }
  .otpcard__badge img { width: 26.6px; height: 26.6px; }
  .otpcard .stub__title { margin-top: 10.1px; }
  .otpcard__devcode { margin-top: 7.6px; padding: 7.6px 10.1px; font-size: 22.6px; }
  .stub__ok { margin-top: 15.2px; gap: 5.7px; padding: 7px 8.2px; font-size: 10.5px; }
  .stub__ok svg { width: 13.7px; height: 13.7px; }
  .otpdigits { gap: 6.3px; margin-top: 17.7px; }
  .otpdigit { width: 38px; height: 44.1px; border-radius: 5.1px; font-size: 19.4px; }
  .otpcard__timer { margin-top: 11.7px; font-size: 10px; }
  .otpcard__actions { margin-top: 14.2px; }
  .otpcard__actions a, .otpcard__actions button { font-size: 10px; }
}

/* ---- 1152  (space x0.57 · controls x0.72 · type x0.78) ---- */
@media (max-width: 1152px) {
  .board__marquee { padding: 27.4px 31.9px; }
  .marquee__grid { background-size: 16px 16px; }
  .brandmark { gap: 8.5px; margin-bottom: 17.3px; }
  .brandmark__logo { width: 42.1px; height: 42.1px; }
  .brandmark__name { font-size: 23.4px; }
  .brandmark__by { font-size: 8px; margin-top: 4.6px; }
  .marquee__headline { font-size: 37.4px; }
  .marquee__lede { margin-top: 10.5px; font-size: 11.3px; }
  .cards { margin-top: 21.9px; gap: 8px; }
  .card { gap: 8px; padding: 8.5px 9.1px; border-radius: 6.8px; }
  .card__icon { width: 32.7px; height: 32.7px; }
  .card__icon svg { width: 15.6px; height: 15.6px; }
  .card__text strong { font-size: 10.5px; }
  .card__text small { font-size: 10px; margin-top: 1.1px; }
  .marquee__foot p { font-size: 10px; }
  .marquee__credit { font-size: 8.2px; }
  .board__badge { width: 49.1px; height: 49.1px; }
  .board__badge img { width: 27.3px; height: 27.3px; }
  .board__stub { padding: 27.4px 22.8px; }
  .stub { max-width: 277.2px; }
  .stub__eyebrow { font-size: 10px; padding: 2.3px 6.3px; }
  .stub__title { font-size: 23.7px; margin: 10.5px 0 3.6px; }
  .stub__sub { font-size: 10.1px; }
  .stub__error { margin-top: 13.7px; gap: 5.1px; padding: 6.3px 7.4px; font-size: 10px; }
  .stub__error svg { width: 13.2px; height: 13.2px; }
  .formfield { margin-top: 12.8px; }
  .formfield__label { font-size: 8.2px; margin-bottom: 4.6px; }
  .formfield__icon { left: 9.1px; }
  .formfield__icon svg { width: 14px; height: 14px; }
  .formfield__box input { height: 33.2px; padding: 0 25.1px 0 27.4px; border-radius: 4.6px; font-size: 11.7px; }
  .formfield__box--plain input { padding-left: 9.1px; }
  .formfield__toggle { right: 6.8px; padding: 2.3px; }
  .formfield__toggle svg { width: 14px; height: 14px; }
  .formfield__hint { margin-top: 3.4px; font-size: 10px; }
  .stub__submit { margin-top: 16.9px; gap: 4.6px; padding: 10.8px 13px; font-size: 11.7px; }
  .stub__submit svg { width: 13.2px; height: 13.2px; }
  .stub__note { margin-top: 13.7px; font-size: 10px; }
  .stepbar { gap: 3.4px; margin-bottom: 11.4px; }
  .stepbar i { width: 20.2px; }
  .stepbar i.is-active { width: 26px; }
  .backlink { gap: 3.4px; padding: 3.4px 5.7px 3.4px 2.3px; margin-bottom: 8px; border-radius: 3.4px; font-size: 10px; }
  .backlink svg { width: 10.9px; height: 10.9px; }
  .stub__divider { gap: 6.8px; margin: 12.8px 0 10px; }
  .stub__divider span { font-size: 8px; }
  .stub__alt { gap: 4.6px; padding: 8.7px 11.6px; border-radius: 4.6px; font-size: 10px; }
  .stub__alt svg { width: 11.7px; height: 11.7px; }
  .success-box { padding: 8px 0 2.3px; }
  .success-box__icon { width: 35.8px; height: 35.8px; margin-bottom: 8px; border-radius: 6.8px; }
  .success-box__icon svg { width: 15.6px; height: 15.6px; }
  .success-box h3 { font-size: 17.4px; margin-bottom: 4.6px; }
  .success-box p { font-size: 10.5px; margin-bottom: 5.7px; }
  .otpboard { padding: 18.2px 11.4px; }
  .otpcard { max-width: 303.2px; border-radius: 8px; padding: 31px 22.8px 20.5px; }
  .otpcard__badge { width: 46.2px; height: 46.2px; }
  .otpcard__badge img { width: 25.7px; height: 25.7px; }
  .otpcard .stub__title { margin-top: 9.1px; }
  .otpcard__devcode { margin-top: 6.8px; padding: 6.8px 9.1px; font-size: 21.8px; }
  .stub__ok { margin-top: 13.7px; gap: 5.1px; padding: 6.3px 7.4px; font-size: 10.1px; }
  .stub__ok svg { width: 13.2px; height: 13.2px; }
  .otpdigits { gap: 5.7px; margin-top: 16px; }
  .otpdigit { width: 36.1px; height: 41.9px; border-radius: 4.6px; font-size: 18.7px; }
  .otpcard__timer { margin-top: 10.5px; font-size: 10px; }
  .otpcard__actions { margin-top: 12.8px; }
  .otpcard__actions a, .otpcard__actions button { font-size: 10px; }
}

/* ---- 1024 — 1920 at 175% / small laptops  (space x0.51 · controls x0.68 · type x0.75) ---- */
@media (max-width: 1024px) {
  .board__marquee { padding: 24.3px 28.4px; }
  .marquee__grid { background-size: 14.2px 14.2px; }
  .brandmark { gap: 7.6px; margin-bottom: 15.4px; }
  .brandmark__logo { width: 40.5px; height: 40.5px; }
  .brandmark__name { font-size: 22.5px; }
  .brandmark__by { font-size: 8px; margin-top: 4.1px; }
  .marquee__headline { font-size: 36px; }
  .marquee__lede { margin-top: 9.3px; font-size: 11px; }
  .cards { margin-top: 19.5px; gap: 7.1px; }
  .card { gap: 7.1px; padding: 7.6px 8.1px; border-radius: 6.1px; }
  .card__icon { width: 31.5px; height: 31.5px; }
  .card__icon svg { width: 15px; height: 15px; }
  .card__text strong { font-size: 10.1px; }
  .card__text small { font-size: 10px; margin-top: 1px; }
  .marquee__foot p { font-size: 10px; }
  .marquee__credit { font-size: 8px; }
  .board__badge { width: 46.5px; height: 46.5px; }
  .board__badge img { width: 26.3px; height: 26.3px; }
  .board__stub { padding: 24.3px 20.3px; }
  .stub { max-width: 262.7px; }
  .stub__eyebrow { font-size: 10px; padding: 2px 5.6px; }
  .stub__title { font-size: 22.8px; margin: 9.3px 0 3.2px; }
  .stub__sub { font-size: 10px; }
  .stub__error { margin-top: 12.2px; gap: 4.6px; padding: 5.6px 6.6px; font-size: 10px; }
  .stub__error svg { width: 12.8px; height: 12.8px; }
  .formfield { margin-top: 11.3px; }
  .formfield__label { font-size: 8px; margin-bottom: 4.1px; }
  .formfield__icon { left: 8.1px; }
  .formfield__icon svg { width: 13.5px; height: 13.5px; }
  .formfield__box input { height: 31.5px; padding: 0 22.3px 0 24.3px; border-radius: 4.1px; font-size: 11.3px; }
  .formfield__box--plain input { padding-left: 8.1px; }
  .formfield__toggle { right: 6.1px; padding: 2px; }
  .formfield__toggle svg { width: 13.5px; height: 13.5px; }
  .formfield__hint { margin-top: 3px; font-size: 10px; }
  .stub__submit { margin-top: 15px; gap: 4.1px; padding: 10.3px 12.3px; font-size: 11.3px; }
  .stub__submit svg { width: 12.8px; height: 12.8px; }
  .stub__note { margin-top: 12.2px; font-size: 10px; }
  .stepbar { gap: 3px; margin-bottom: 10.1px; }
  .stepbar i { width: 19.2px; }
  .stepbar i.is-active { width: 24.6px; }
  .backlink { gap: 3px; padding: 3px 5.1px 3px 2px; margin-bottom: 7.1px; border-radius: 3px; font-size: 10px; }
  .backlink svg { width: 10.5px; height: 10.5px; }
  .stub__divider { gap: 6.1px; margin: 11.3px 0 8.9px; }
  .stub__divider span { font-size: 8px; }
  .stub__alt { gap: 4.1px; padding: 8.2px 10.9px; border-radius: 4.1px; font-size: 10px; }
  .stub__alt svg { width: 11.3px; height: 11.3px; }
  .success-box { padding: 7.1px 0 2px; }
  .success-box__icon { width: 34.5px; height: 34.5px; margin-bottom: 7.1px; border-radius: 6.1px; }
  .success-box__icon svg { width: 15px; height: 15px; }
  .success-box h3 { font-size: 16.8px; margin-bottom: 4.1px; }
  .success-box p { font-size: 10.1px; margin-bottom: 5.1px; }
  .otpboard { padding: 16.2px 10.1px; }
  .otpcard { max-width: 287.3px; border-radius: 7.1px; padding: 27.6px 20.3px 18.2px; }
  .otpcard__badge { width: 43.8px; height: 43.8px; }
  .otpcard__badge img { width: 24.8px; height: 24.8px; }
  .otpcard .stub__title { margin-top: 8.1px; }
  .otpcard__devcode { margin-top: 6.1px; padding: 6.1px 8.1px; font-size: 21px; }
  .stub__ok { margin-top: 12.2px; gap: 4.6px; padding: 5.6px 6.6px; font-size: 10px; }
  .stub__ok svg { width: 12.8px; height: 12.8px; }
  .otpdigits { gap: 5.1px; margin-top: 14.2px; }
  .otpdigit { width: 34.2px; height: 39.7px; border-radius: 4.1px; font-size: 18px; }
  .otpcard__timer { margin-top: 9.3px; font-size: 10px; }
  .otpcard__actions { margin-top: 11.3px; }
  .otpcard__actions a, .otpcard__actions button { font-size: 10px; }
}

/* ---- 960 — 1920 at 200%  (space x0.47 · controls x0.66 · type x0.74) ---- */
@media (max-width: 960px) {
  .board__marquee { padding: 22.8px 26.6px; }
  .marquee__grid { background-size: 13.3px 13.3px; }
  .brandmark { gap: 7.1px; margin-bottom: 14.4px; }
  .brandmark__logo { width: 39.8px; height: 39.8px; }
  .brandmark__name { font-size: 22.1px; }
  .brandmark__by { font-size: 8px; margin-top: 3.8px; }
  .marquee__headline { font-size: 35.3px; }
  .marquee__lede { margin-top: 8.7px; font-size: 11px; }
  .cards { margin-top: 18.2px; gap: 6.6px; }
  .card { gap: 6.6px; padding: 7.1px 7.6px; border-radius: 5.7px; }
  .card__icon { width: 30.9px; height: 30.9px; }
  .card__icon svg { width: 14.7px; height: 14.7px; }
  .card__text strong { font-size: 10px; }
  .card__text small { font-size: 10px; margin-top: 0.9px; }
  .marquee__foot p { font-size: 10px; }
  .marquee__credit { font-size: 8px; }
  .board__badge { width: 45.2px; height: 45.2px; }
  .board__badge img { width: 25.8px; height: 25.8px; }
  .board__stub { padding: 22.8px 19px; }
  .stub { max-width: 255.4px; }
  .stub__eyebrow { font-size: 10px; padding: 1.9px 5.2px; }
  .stub__title { font-size: 22.4px; margin: 8.7px 0 3px; }
  .stub__sub { font-size: 10px; }
  .stub__error { margin-top: 11.4px; gap: 4.3px; padding: 5.2px 6.2px; font-size: 10px; }
  .stub__error svg { width: 12.5px; height: 12.5px; }
  .formfield { margin-top: 10.6px; }
  .formfield__label { font-size: 8px; margin-bottom: 3.8px; }
  .formfield__icon { left: 7.6px; }
  .formfield__icon svg { width: 13.3px; height: 13.3px; }
  .formfield__box input { height: 30.6px; padding: 0 20.9px 0 22.8px; border-radius: 3.8px; font-size: 11px; }
  .formfield__box--plain input { padding-left: 7.6px; }
  .formfield__toggle { right: 5.7px; padding: 1.9px; }
  .formfield__toggle svg { width: 13.3px; height: 13.3px; }
  .formfield__hint { margin-top: 2.8px; font-size: 10px; }
  .stub__submit { margin-top: 14.1px; gap: 3.8px; padding: 10px 12px; font-size: 11px; }
  .stub__submit svg { width: 12.5px; height: 12.5px; }
  .stub__note { margin-top: 11.4px; font-size: 10px; }
  .stepbar { gap: 2.8px; margin-bottom: 9.5px; }
  .stepbar i { width: 18.6px; }
  .stepbar i.is-active { width: 23.9px; }
  .backlink { gap: 2.8px; padding: 2.8px 4.8px 2.8px 1.9px; margin-bottom: 6.6px; border-radius: 2.8px; font-size: 10px; }
  .backlink svg { width: 10.3px; height: 10.3px; }
  .stub__divider { gap: 5.7px; margin: 10.6px 0 8.4px; }
  .stub__divider span { font-size: 8px; }
  .stub__alt { gap: 3.8px; padding: 8px 10.6px; border-radius: 3.8px; font-size: 10px; }
  .stub__alt svg { width: 11px; height: 11px; }
  .success-box { padding: 6.6px 0 1.9px; }
  .success-box__icon { width: 33.9px; height: 33.9px; margin-bottom: 6.6px; border-radius: 5.7px; }
  .success-box__icon svg { width: 14.7px; height: 14.7px; }
  .success-box h3 { font-size: 16.5px; margin-bottom: 3.8px; }
  .success-box p { font-size: 10px; margin-bottom: 4.8px; }
  .otpboard { padding: 15.2px 9.5px; }
  .otpcard { max-width: 279.3px; border-radius: 6.6px; padding: 25.8px 19px 17.1px; }
  .otpcard__badge { width: 42.6px; height: 42.6px; }
  .otpcard__badge img { width: 24.3px; height: 24.3px; }
  .otpcard .stub__title { margin-top: 7.6px; }
  .otpcard__devcode { margin-top: 5.7px; padding: 5.7px 7.6px; font-size: 20.6px; }
  .stub__ok { margin-top: 11.4px; gap: 4.3px; padding: 5.2px 6.2px; font-size: 10px; }
  .stub__ok svg { width: 12.5px; height: 12.5px; }
  .otpdigits { gap: 4.8px; margin-top: 13.3px; }
  .otpdigit { width: 33.2px; height: 38.6px; border-radius: 3.8px; font-size: 17.7px; }
  .otpcard__timer { margin-top: 8.7px; font-size: 10px; }
  .otpcard__actions { margin-top: 10.6px; }
  .otpcard__actions a, .otpcard__actions button { font-size: 10px; }
}

/* ---- 800  (space x0.47 · controls x0.62 · type x0.70) ---- */
@media (max-width: 800px) {
  .board__marquee { padding: 22.8px 26.6px; }
  .marquee__grid { background-size: 13.3px 13.3px; }
  .brandmark { gap: 7.1px; margin-bottom: 14.4px; }
  .brandmark__logo { width: 37.8px; height: 37.8px; }
  .brandmark__name { font-size: 21px; }
  .brandmark__by { font-size: 8px; margin-top: 3.8px; }
  .marquee__headline { font-size: 33.6px; }
  .marquee__lede { margin-top: 8.7px; font-size: 11px; }
  .cards { margin-top: 18.2px; gap: 6.6px; }
  .card { gap: 6.6px; padding: 7.1px 7.6px; border-radius: 5.7px; }
  .card__icon { width: 29.4px; height: 29.4px; }
  .card__icon svg { width: 14px; height: 14px; }
  .card__text strong { font-size: 10px; }
  .card__text small { font-size: 10px; margin-top: 0.9px; }
  .marquee__foot p { font-size: 10px; }
  .marquee__credit { font-size: 8px; }
  .board__badge { width: 42px; height: 42px; }
  .board__badge img { width: 24.5px; height: 24.5px; }
  .board__stub { padding: 22.8px 19px; }
  .stub { max-width: 237.1px; }
  .stub__eyebrow { font-size: 10px; padding: 1.9px 5.2px; }
  .stub__title { font-size: 21.3px; margin: 8.7px 0 3px; }
  .stub__sub { font-size: 10px; }
  .stub__error { margin-top: 11.4px; gap: 4.3px; padding: 5.2px 6.2px; font-size: 10px; }
  .stub__error svg { width: 11.9px; height: 11.9px; }
  .formfield { margin-top: 10.6px; }
  .formfield__label { font-size: 8px; margin-bottom: 3.8px; }
  .formfield__icon { left: 7.6px; }
  .formfield__icon svg { width: 12.6px; height: 12.6px; }
  .formfield__box input { height: 28.4px; padding: 0 20.9px 0 22.8px; border-radius: 3.8px; font-size: 11px; }
  .formfield__box--plain input { padding-left: 7.6px; }
  .formfield__toggle { right: 5.7px; padding: 1.9px; }
  .formfield__toggle svg { width: 12.6px; height: 12.6px; }
  .formfield__hint { margin-top: 2.8px; font-size: 10px; }
  .stub__submit { margin-top: 14.1px; gap: 3.8px; padding: 9.3px 11.1px; font-size: 11px; }
  .stub__submit svg { width: 11.9px; height: 11.9px; }
  .stub__note { margin-top: 11.4px; font-size: 10px; }
  .stepbar { gap: 2.8px; margin-bottom: 9.5px; }
  .stepbar i { width: 17.3px; }
  .stepbar i.is-active { width: 22.2px; }
  .backlink { gap: 2.8px; padding: 2.8px 4.8px 2.8px 1.9px; margin-bottom: 6.6px; border-radius: 2.8px; font-size: 10px; }
  .backlink svg { width: 9.8px; height: 9.8px; }
  .stub__divider { gap: 5.7px; margin: 10.6px 0 8.4px; }
  .stub__divider span { font-size: 8px; }
  .stub__alt { gap: 3.8px; padding: 7.4px 9.9px; border-radius: 3.8px; font-size: 10px; }
  .stub__alt svg { width: 10.5px; height: 10.5px; }
  .success-box { padding: 6.6px 0 1.9px; }
  .success-box__icon { width: 32.2px; height: 32.2px; margin-bottom: 6.6px; border-radius: 5.7px; }
  .success-box__icon svg { width: 14px; height: 14px; }
  .success-box h3 { font-size: 15.7px; margin-bottom: 3.8px; }
  .success-box p { font-size: 10px; margin-bottom: 4.8px; }
  .otpboard { padding: 15.2px 9.5px; }
  .otpcard { max-width: 259.3px; border-radius: 6.6px; padding: 25.8px 19px 17.1px; }
  .otpcard__badge { width: 39.5px; height: 39.5px; }
  .otpcard__badge img { width: 23.1px; height: 23.1px; }
  .otpcard .stub__title { margin-top: 7.6px; }
  .otpcard__devcode { margin-top: 5.7px; padding: 5.7px 7.6px; font-size: 19.6px; }
  .stub__ok { margin-top: 11.4px; gap: 4.3px; padding: 5.2px 6.2px; font-size: 10px; }
  .stub__ok svg { width: 11.9px; height: 11.9px; }
  .otpdigits { gap: 4.8px; margin-top: 13.3px; }
  .otpdigit { width: 30.9px; height: 35.8px; border-radius: 3.8px; font-size: 16.8px; }
  .otpcard__timer { margin-top: 8.7px; font-size: 10px; }
  .otpcard__actions { margin-top: 10.6px; }
  .otpcard__actions a, .otpcard__actions button { font-size: 10px; }
}

/* ---- 720 — smallest supported width  (space x0.47 · controls x0.59 · type x0.68) ---- */
@media (max-width: 720px) {
  .board__marquee { padding: 22.8px 26.6px; }
  .marquee__grid { background-size: 13.3px 13.3px; }
  .brandmark { gap: 7.1px; margin-bottom: 14.4px; }
  .brandmark__logo { width: 36.9px; height: 36.9px; }
  .brandmark__name { font-size: 20.5px; }
  .brandmark__by { font-size: 8px; margin-top: 3.8px; }
  .marquee__headline { font-size: 32.8px; }
  .marquee__lede { margin-top: 8.7px; font-size: 11px; }
  .cards { margin-top: 18.2px; gap: 6.6px; }
  .card { gap: 6.6px; padding: 7.1px 7.6px; border-radius: 5.7px; }
  .card__icon { width: 28.7px; height: 28.7px; }
  .card__icon svg { width: 13.7px; height: 13.7px; }
  .card__text strong { font-size: 10px; }
  .card__text small { font-size: 10px; margin-top: 0.9px; }
  .marquee__foot p { font-size: 10px; }
  .marquee__credit { font-size: 8px; }
  .board__badge { width: 40.4px; height: 40.4px; }
  .board__badge img { width: 23.9px; height: 23.9px; }
  .board__stub { padding: 22.8px 19px; }
  .stub { max-width: 228px; }
  .stub__eyebrow { font-size: 10px; padding: 1.9px 5.2px; }
  .stub__title { font-size: 20.8px; margin: 8.7px 0 3px; }
  .stub__sub { font-size: 10px; }
  .stub__error { margin-top: 11.4px; gap: 4.3px; padding: 5.2px 6.2px; font-size: 10px; }
  .stub__error svg { width: 11.6px; height: 11.6px; }
  .formfield { margin-top: 10.6px; }
  .formfield__label { font-size: 8px; margin-bottom: 3.8px; }
  .formfield__icon { left: 7.6px; }
  .formfield__icon svg { width: 12.3px; height: 12.3px; }
  .formfield__box input { height: 27.3px; padding: 0 20.9px 0 22.8px; border-radius: 3.8px; font-size: 11px; }
  .formfield__box--plain input { padding-left: 7.6px; }
  .formfield__toggle { right: 5.7px; padding: 1.9px; }
  .formfield__toggle svg { width: 12.3px; height: 12.3px; }
  .formfield__hint { margin-top: 2.8px; font-size: 10px; }
  .stub__submit { margin-top: 14.1px; gap: 3.8px; padding: 8.9px 10.7px; font-size: 11px; }
  .stub__submit svg { width: 11.6px; height: 11.6px; }
  .stub__note { margin-top: 11.4px; font-size: 10px; }
  .stepbar { gap: 2.8px; margin-bottom: 9.5px; }
  .stepbar i { width: 16.6px; }
  .stepbar i.is-active { width: 21.4px; }
  .backlink { gap: 2.8px; padding: 2.8px 4.8px 2.8px 1.9px; margin-bottom: 6.6px; border-radius: 2.8px; font-size: 10px; }
  .backlink svg { width: 9.6px; height: 9.6px; }
  .stub__divider { gap: 5.7px; margin: 10.6px 0 8.4px; }
  .stub__divider span { font-size: 8px; }
  .stub__alt { gap: 3.8px; padding: 7.1px 9.5px; border-radius: 3.8px; font-size: 10px; }
  .stub__alt svg { width: 10.2px; height: 10.2px; }
  .success-box { padding: 6.6px 0 1.9px; }
  .success-box__icon { width: 31.4px; height: 31.4px; margin-bottom: 6.6px; border-radius: 5.7px; }
  .success-box__icon svg { width: 13.7px; height: 13.7px; }
  .success-box h3 { font-size: 15.3px; margin-bottom: 3.8px; }
  .success-box p { font-size: 10px; margin-bottom: 4.8px; }
  .otpboard { padding: 15.2px 9.5px; }
  .otpcard { max-width: 249.4px; border-radius: 6.6px; padding: 25.8px 19px 17.1px; }
  .otpcard__badge { width: 38px; height: 38px; }
  .otpcard__badge img { width: 22.5px; height: 22.5px; }
  .otpcard .stub__title { margin-top: 7.6px; }
  .otpcard__devcode { margin-top: 5.7px; padding: 5.7px 7.6px; font-size: 19.1px; }
  .stub__ok { margin-top: 11.4px; gap: 4.3px; padding: 5.2px 6.2px; font-size: 10px; }
  .stub__ok svg { width: 11.6px; height: 11.6px; }
  .otpdigits { gap: 4.8px; margin-top: 13.3px; }
  .otpdigit { width: 29.7px; height: 34.4px; border-radius: 3.8px; font-size: 16.4px; }
  .otpcard__timer { margin-top: 8.7px; font-size: 10px; }
  .otpcard__actions { margin-top: 10.6px; }
  .otpcard__actions a, .otpcard__actions button { font-size: 10px; }
}

/* ---- below 720 (phones — outside the supported range): keep the 720 sizes,
        stack the two halves so the form is not squeezed into 44% of the width ---- */
@media (max-width: 719px) {
  .board { grid-template-columns: 1fr; }
  .board__seam, .board__badge { display: none; }
  .board__marquee { border-bottom: 5px solid var(--brand); }
  .stub { max-width: 100%; }
}