/* ==================================================================
   Gateway (Login / Sign Up) — kwizzbit/gateway (whole-file segment)
   Faithful slice of /HTML/gateway.html. Globals (reset/body/font-face/:root)
   dropped; tokens canonical (theme.json). Full-bleed via the .kwb-segment wrapper.
   ================================================================== */

.gateway {
  --cream:#FCF0E6; --ink:#1D0B09; --coral:#FF3623; --white:#FFFFFF;
  --field-bg:#EEDED0; --field-border:#D7BAAF; --form-label:#473833;
  --placeholder:#7E6E67; --nav-ink:#473833; --body-soft:#33221F;
  --font-display:'Roobert Semimono',ui-monospace,monospace;
  --font-body:'Roobert',system-ui,sans-serif;
  --ease-out:cubic-bezier(0.22,1,0.36,1);
}

.gateway { display:flex; flex-direction:column; min-height:100dvh; width:100%; overflow:hidden; }

/* ── FORM PANEL ── */
.gateway__form-panel { width:100%; background:var(--wp--preset--color--cream); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:1.5rem 1.25rem 2.5rem; position:relative; z-index:2; height:50dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; flex-shrink:0; }

/* ── TABLET ── */
@media (min-width:641px) and (max-width:1023px) {
  .gateway { flex-direction:row; height:100vh; overflow:hidden; }
  .gateway__form-panel { width:50%; height:100vh; overflow-y:auto; padding:2rem 1.5rem; justify-content:center; flex-shrink:0; }
  .gateway__form-inner { max-width:360px; }
}

/* ── DESKTOP ── */
@media (min-width:1024px) {
  .gateway { flex-direction:row; height:100vh; overflow:hidden; }
  .gateway__form-panel { width:50%; height:100vh; overflow-y:auto; padding:3rem 2.5rem; justify-content:center; flex-shrink:0; }
  .gateway__hero { flex:1; }
}

.gateway__form-inner { width:100%; max-width:356px; display:flex; flex-direction:column; align-items:center; transition:opacity 0.2s var(--wp--custom--motion--ease-out); opacity:0; transform:translateY(32px); will-change:transform, opacity; }
.gateway__form-inner.is-ready { animation:form-lift-in 0.7s cubic-bezier(0.22,1,0.36,1) both; }

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

/* Gateway's own loader — a cream cover that gateway.js holds until the quiz-card
   images have decoded, then fades, revealing the form lift + full backdrop at
   once. Separate from the shared #kwb-loader (skipped on no-chrome) so the
   glob-loaded page-loader.js never dismisses it on its own clock. Reuses the
   .kwb-loader__bit pulsing dots. */
.gw-loader { position:fixed; inset:0; background:var(--wp--preset--color--cream); z-index:99999; display:flex; align-items:center; justify-content:center; gap:6px; pointer-events:none; transition:opacity 0.4s var(--wp--custom--motion--ease-out, cubic-bezier(0.22,1,0.36,1)); }
.gw-loader.is-hidden { opacity:0; }
/* Self-contained loader dots. #gw-loader reuses the .kwb-loader__bit markup but
   on the no-chrome /login page page-loader.css is NOT enqueued, so its dot rules
   are absent and the dots render 0x0/invisible over a blank cream cover. Duplicate
   them here so the gateway loader is truly standalone. */
.gw-loader .kwb-loader__bit{
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--coral);
	border-radius: 0;
	animation: kwb-loader-pulse 1.2s ease-in-out infinite;
}
.gw-loader .kwb-loader__bit:nth-child(2){ animation-delay: 0.2s; }
.gw-loader .kwb-loader__bit:nth-child(3){ animation-delay: 0.4s; }
@keyframes kwb-loader-pulse{
	0%, 100% { transform: scale(0.6); }
	50%      { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){
	.gw-loader .kwb-loader__bit{ animation: none; }
}

/* ── LOGO ── */
.gateway__logo { margin-bottom:0.5rem; margin-top:-6px; display:block; line-height:0; }
.gateway__logo-mark { width:38px; height:auto; display:block; transform-origin:center center; transition:transform 0.45s cubic-bezier(0.22,1,0.36,1); will-change:transform; }
.gateway__logo:hover .gateway__logo-mark, .gateway__logo:active .gateway__logo-mark { transform:rotate(-2deg); }

/* ── HEADING WRAP ── */
.gateway__heading-wrap { position:relative; width:100%; text-align:center; margin-bottom:2.5rem; }
.gateway--signup .gateway__heading-wrap { margin-bottom:3.5rem; }
.gateway__heading { font-family:var(--wp--preset--font-family--display); font-weight:400; font-size:2.125rem; line-height:1.1; letter-spacing:-0.091em; color:var(--wp--preset--color--ink); text-align:center; margin-bottom:0; }
.gateway__subhead { position:absolute; top:100%; left:0; width:100%; font-family:var(--wp--preset--font-family--body); font-weight:500; font-size:0.8125rem; line-height:1.4; color:#473531; text-align:center; padding-top:0.375rem; opacity:0; pointer-events:none; transition:opacity 0.2s var(--wp--custom--motion--ease-out); }
.gateway--login .gateway__subhead { opacity:1; pointer-events:auto; }
.gateway--signup .gateway__subhead { opacity:1; pointer-events:auto; }

/* ── GOOGLE BTN ── */
.gateway__google { width:100%; height:48px; background:var(--wp--preset--color--white); border:0.5px solid #D1C6C2; border-radius:0; display:flex; align-items:center; justify-content:center; gap:0.625rem; font-family:var(--wp--preset--font-family--body); font-weight:600; font-size:0.875rem; color:var(--wp--preset--color--ink); cursor:pointer; transition:border-color 160ms var(--wp--custom--motion--ease-out),transform 160ms var(--wp--custom--motion--ease-out); text-decoration:none; margin-top:0.5rem; }
@media (hover: hover) { .gateway__google:hover { border-color:#B0A6A1; transform:translateY(-1px); } }
.gateway__google:active { border-color:#8A6E65; transform:translateY(1px); }

/* ── DIVIDER ── */
.gateway__divider { width:100%; display:flex; align-items:center; gap:0.75rem; margin:10px 0; }
.gateway__divider::before,.gateway__divider::after { content:''; flex:1; height:0.5px; background:var(--field-border); }
.gateway__divider span { font-family:var(--wp--preset--font-family--body); font-weight:500; font-size:0.875rem; color:var(--wp--preset--color--ink); }

/* ── FIELDS ── */
.gateway__fields { width:100%; display:flex; flex-direction:column; gap:8px; }
/* ── INPUT ERROR STATE ── */
@keyframes wiggle {
  0%,100% { transform:translateX(0); }
  15%      { transform:translateX(-6px); }
  30%      { transform:translateX(6px); }
  45%      { transform:translateX(-5px); }
  60%      { transform:translateX(5px); }
  75%      { transform:translateX(-3px); }
  90%      { transform:translateX(3px); }
}
.gateway__input.is-error {
  background: #FDECEA;
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--coral);
  animation: wiggle 0.45s cubic-bezier(0.36,0.07,0.19,0.97) both;
}

/* ── LOADING DOTS ── */
@keyframes dot-pulse {
  0%,100% { transform:scale(0.6); }
  50%      { transform:scale(1); }
}
.gateway__cta-dots {
  display:none;
  align-items:center;
  gap:4px;
}
.gateway__cta-dots span {
  width:5px; height:5px;
  background:var(--wp--preset--color--white);
  border-radius:0;
  animation:dot-pulse 1.2s ease-in-out infinite;
}
.gateway__cta-dots span:nth-child(2) { animation-delay:0.2s; }
.gateway__cta-dots span:nth-child(3) { animation-delay:0.4s; }
.gateway__cta.is-loading .gateway__cta-label,
.gateway__cta.is-loading .gateway__cta-arrow { display:none; }
.gateway__cta.is-loading .gateway__cta-dots { display:flex; }
.gateway__cta.is-loading { pointer-events:none; opacity:1 !important; }

/* ── FORGOT PASSWORD STATE ── */
.gateway--forgot .gateway__heading-wrap,
.gateway--forgot .gateway__google,
.gateway--forgot .gateway__divider,
.gateway--forgot .gateway__fields,
.gateway--forgot .gateway__legal,
.gateway--forgot .gateway__forgot,
.gateway--forgot .gateway__switch { display:none; }
.gateway__forgot-sub { max-width:260px; margin-left:auto; margin-right:auto; }
.gateway--forgot .gateway__forgot-panel { display:flex; }

.gateway__forgot-panel {
  display:none;
  flex-direction:column;
  align-items:stretch;
  width:100%;
}
.gateway__forgot-back {
  display:flex;
  align-items:center;
  gap:0.375rem;
  font-family:var(--wp--preset--font-family--body);
  font-weight:600;
  font-size:0.9375rem;
  color:var(--nav-ink);
  background:none;
  border:none;
  cursor:pointer;
  padding:1.75rem 0 0;
  margin-bottom:0;
  align-self:center;
  transition:color 160ms var(--wp--custom--motion--ease-out);
  border-radius:0;
}
.gateway__forgot-back:hover { color:var(--wp--preset--color--coral); }
.gateway--forgot .gateway__trust { display:none; }
.gateway__forgot-back .back-chevron {
  display:inline-flex;
  transform:rotate(90deg);
  transform-origin:center;
}
.gateway__forgot-heading {
  font-family:var(--wp--preset--font-family--display);
  font-weight:400;
  font-size:2.125rem;
  line-height:1.1;
  letter-spacing:-0.091em;
  color:var(--wp--preset--color--ink);
  text-align:center;
  width:100%;
  margin-bottom:0.375rem;
}
.gateway__forgot-sub {
  font-family:var(--wp--preset--font-family--body);
  font-weight:500;
  font-size:0.8125rem;
  line-height:1.4;
  color:#473531;
  text-align:center;
  width:100%;
  margin-bottom:1.5rem;
}
.gateway__forgot-cta {
  width:100%;
  height:50px;
  background:linear-gradient(to right,#1D0B09,#3E1916);
  border:none;
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  font-family:var(--wp--preset--font-family--body);
  font-weight:700;
  font-size:0.875rem;
  color:var(--wp--preset--color--white);
  cursor:pointer;
  margin-top:8px;
  transition:background 160ms var(--wp--custom--motion--ease-out),transform 160ms var(--wp--custom--motion--ease-out),opacity 0.3s var(--wp--custom--motion--ease-out);
  letter-spacing:0.01em;
  opacity:0.38;
  pointer-events:none;
}
.gateway__forgot-cta.is-active { opacity:1; pointer-events:auto; }
@media (hover: hover) { .gateway__forgot-cta.is-active:hover { background:linear-gradient(to right,#0D0504,#2A100E); transform:translateY(-1px); } }
.gateway__forgot-cta.is-active:active { background:linear-gradient(to right,#0D0504,#2A100E); transform:translateY(1px); }
/* Loading state — full opacity, no pointer events */
.gateway__forgot-cta.is-loading-f { opacity:1 !important; pointer-events:none; }
.gateway__forgot-cta.is-loading-f .forgot-cta-label { display:none; }
.gateway__forgot-cta.is-loading-f .forgot-cta-dots { display:flex; }
.forgot-cta-dots { display:none; align-items:center; gap:4px; }
.forgot-cta-dots span { width:5px; height:5px; background:var(--wp--preset--color--white); border-radius:0; animation:dot-pulse 1.2s ease-in-out infinite; }
.forgot-cta-dots span:nth-child(2) { animation-delay:0.2s; }
.forgot-cta-dots span:nth-child(3) { animation-delay:0.4s; }
@keyframes badge-float {
  0%,100% { transform:translateY(0px) rotate(-2deg); }
  50%      { transform:translateY(-8px) rotate(2deg); }
}
@keyframes badge-spring-in {
  0%   { transform:scale(0) rotate(-15deg); opacity:0; }
  60%  { transform:scale(1.15) rotate(5deg); opacity:1; }
  80%  { transform:scale(0.92) rotate(-2deg); }
  100% { transform:scale(1) rotate(0deg); }
}
.gateway__forgot-badge {
  animation:badge-float 3.5s ease-in-out infinite;
  margin-bottom:0.5rem;
  align-self:center;
}
.gateway__forgot-badge img { width:64px; height:64px; display:block; }
.gateway__forgot-badge svg {
  animation:badge-spring-in 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
  display:block;
}
.gateway__forgot-sent {
  display:none;
  flex-direction:column;
  align-items:center;
  gap:0.25rem;
  text-align:center;
  padding:1rem 0 0;
}
.gateway__forgot-sent-title {
  font-family:var(--wp--preset--font-family--display);
  font-weight:400;
  font-size:1.375rem;
  letter-spacing:-0.091em;
  color:var(--wp--preset--color--ink);
}
.gateway__forgot-sent-sub {
  font-family:var(--wp--preset--font-family--body);
  font-weight:500;
  font-size:0.8125rem;
  color:#473531;
  max-width:260px;
  line-height:1.4;
}
.gateway__auth-form { width:100%; display:flex; flex-direction:column; gap:8px; }
/* Back button — always centred below CTA */

@media (max-width:1023px) {
  .gateway--forgot .gateway__forgot-panel { margin-top:0; }
  .gateway__forgot-back { margin-bottom:2rem; }
}
@media (min-width:1024px) {
  .gateway--forgot .gateway__forgot-panel { margin-top:0; }
}
.gateway__forgot {
  font-family:var(--wp--preset--font-family--body);
  font-weight:500;
  font-size:0.75rem;
  color:var(--nav-ink);
  text-align:center;
  margin-top:15px;
  margin-bottom:24px;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
}
.gateway__forgot:hover { color:var(--wp--preset--color--coral); }
.gateway--signup .gateway__forgot { display:none; }
.gateway__legal { font-family:var(--wp--preset--font-family--body); font-weight:500; font-size:0.75rem; color:var(--placeholder); text-align:center; line-height:1.5; margin-top:15px; margin-bottom:24px; max-width:260px; width:100%; margin-inline:auto; }
.gateway--login .gateway__legal { display:none; }
.gateway--signup .gateway__legal { display:block; }
.pw-hint {
  font-family:var(--wp--preset--font-family--body);
  font-weight:500;
  font-size:0.75rem;
  color:var(--placeholder);
  position:absolute;
  top:calc(100% + 0.375rem);
  left:0.125rem;
  opacity:0;
  transition:opacity 0.2s var(--wp--custom--motion--ease-out);
  pointer-events:none;
  white-space:nowrap;
}
.pw-hint.is-visible { opacity:1; }
.pw-hint.is-met { opacity:0; height:0; margin:0; overflow:hidden; }
.pw-tick {
  position:absolute;
  right:2.75rem;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  opacity:0;
  transition:opacity 0.25s var(--wp--custom--motion--ease-out), transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  transform:translateY(-50%) scale(0.6);
  pointer-events:none;
}
.pw-tick.is-met {
  opacity:1;
  transform:translateY(-50%) scale(1);
}

/* ── PASSWORD TOGGLE ── */
.gateway__field { width:100%; position:relative; }
.pw-toggle { position:absolute; right:0.75rem; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; padding:0; display:flex; align-items:center; color:var(--placeholder); transition:color 160ms var(--wp--custom--motion--ease-out); }
.pw-toggle:hover { color:var(--nav-ink); }
.pw-toggle .eye-off { display:none; }
.pw-toggle.is-visible .eye-on { display:none; }
.pw-toggle.is-visible .eye-off { display:block; }
.pw-toggle svg { width:18px; height:18px; }
.gateway__input { width:100%; height:50px; background:var(--field-bg); border:none; border-radius:0; padding:0.8125rem 0.9375rem; font-family:var(--wp--preset--font-family--body); font-weight:500; font-size:0.875rem; color:var(--wp--preset--color--ink); outline:none; transition:box-shadow 160ms var(--wp--custom--motion--ease-out); -webkit-appearance:none; display:block; }
.gateway__input::placeholder { color:#7E6E67; }
.gateway__input:focus { box-shadow:inset 0 0 0 1px var(--field-border); }
.gateway__cta:focus-visible,
.gateway__google:focus-visible,
.gateway__forgot-cta:focus-visible,
.gateway__forgot-back:focus-visible,
.gateway__forgot:focus-visible,
.pw-toggle:focus-visible,
#switchBtn:focus-visible { outline:2px solid var(--wp--preset--color--coral); outline-offset:3px; }

.pw-input-wrap { position:relative; width:100%; height:50px; }
.pw-input-wrap .gateway__input { height:100%; }
.pw-input-wrap .pw-tick { top:50%; }
.pw-input-wrap .pw-toggle { top:50%; }
.field--signup-password { padding-bottom:0; }
.field--signup-password .pw-hint {
  position:static;
  display:block;
  margin-top:0.375rem;
  padding-left:0.125rem;
}
/* Both password fields are email-first: hidden on load, slid in by gateway.js
   (revealField) once a valid-looking email is entered. Keeping the password box
   off-screen until the user engages is what stops the OS saved-password bubble
   from popping on first load — login now matches signup. */
.field--password,
.field--signup-password { display:none; opacity:0; transform:translateY(4px); transition:opacity 0.3s var(--wp--custom--motion--ease-out),transform 0.3s var(--wp--custom--motion--ease-out); }
.field--password.is-visible,
.field--signup-password.is-visible { display:block; opacity:1; transform:translateY(0); }

/* ── CTA ── */
.gateway__cta { width:100%; height:50px; background:linear-gradient(to right,#1D0B09,#3E1916); border:none; border-radius:0; display:none; align-items:center; justify-content:center; gap:0.25rem; font-family:var(--wp--preset--font-family--body); font-weight:700; font-size:0.875rem; color:var(--wp--preset--color--white); cursor:pointer; margin-top:0; transition:opacity 0.3s var(--wp--custom--motion--ease-out),transform 0.3s var(--wp--custom--motion--ease-out),background 160ms var(--wp--custom--motion--ease-out); text-decoration:none; letter-spacing:0.01em; opacity:0; transform:translateY(4px); pointer-events:none; }
.gateway__cta.is-visible { display:flex; opacity:1; transform:translateY(0); pointer-events:auto; margin-top:8px; }
@media (hover: hover) { .gateway__cta.is-visible:hover { background:linear-gradient(to right,#0D0504,#2A100E); transform:translateY(-1px); } }
.gateway__cta.is-visible:active { background:linear-gradient(to right,#0D0504,#2A100E); transform:translateY(1px); }
.gateway__cta-arrow { flex-shrink:0; margin-left:0.25rem; }

/* ── LEGAL ── */
.gateway__legal a { color:var(--nav-ink); text-decoration:underline; text-underline-offset:2px; }

/* ── SWITCH ── */
.gateway__switch { font-family:var(--wp--preset--font-family--body); font-weight:500; font-size:0.875rem; color:var(--body-soft); text-align:center; margin-top:0; cursor:pointer; }
.gateway__switch button { background:none; border:none; font-family:inherit; font-weight:inherit; font-size:inherit; color:inherit; cursor:pointer; padding:0; display:inline; }
.switch-action { font-weight:700; color:var(--wp--preset--color--ink); transition:color 160ms var(--wp--custom--motion--ease-out); }
.gateway__switch button:hover .switch-action { color:var(--wp--preset--color--coral); }

/* ── TRUST ── */
.gateway__trust { margin-top:2.5rem; display:flex; flex-direction:column; align-items:center; gap:0.875rem; }
.gateway__trust-label { font-family:var(--wp--preset--font-family--body); font-weight:600; font-size:0.8125rem; color:var(--nav-ink); }
.gateway__trust-img { width:330px; max-width:100%; height:auto; display:block; }

/* ── HERO ── */
/* ── PAGE LOADER ── */
@media (prefers-reduced-motion:reduce) {
}

/* Hero label — mobile only */
.gateway__hero-label { display:none; }
@keyframes hero-fade-in { from { opacity:0; } to { opacity:1; } }
.gateway__hero { width:100%; flex:1; position:relative; overflow:hidden; background:#E03B2B; animation:hero-fade-in 1.2s cubic-bezier(0.22,1,0.36,1) 0.1s both; }

/* ── QUIZ GRID ── */
.quiz-grid { position:absolute; display:flex; flex-direction:column; gap:16px; width:calc(100% + 80px); left:-40px; top:50%; transform:translateY(-50%); overflow:visible; }
.quiz-row { display:flex; flex-direction:row; gap:8px; flex-shrink:0; width:max-content; align-items:center; height:105px; }

@keyframes card-float { 0%,100% { transform:translateY(0px); } 50% { transform:translateY(-6px); } }
.quiz-card { animation:card-float 6s ease-in-out infinite; }
.quiz-card { width:333px; height:105px; flex-shrink:0; border-radius:0; overflow:hidden; position:relative; cursor:default; box-shadow:10px 13px 2px rgba(0,0,0,0.15); }
.quiz-card__bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.quiz-card__overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0) 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:0.75rem; }
.quiz-card__title { font-family:var(--wp--preset--font-family--body); font-weight:600; font-size:0.875rem; color:#FFFFFF; line-height:1.25; margin-bottom:0.35rem; }
.quiz-card__meta { display:flex; align-items:center; gap:0.625rem; flex-wrap:wrap; }
.quiz-card__meta-item { display:flex; align-items:center; gap:0.2rem; font-family:var(--wp--preset--font-family--body); font-weight:500; font-size:0.6875rem; color:rgba(255,255,255,0.85); white-space:nowrap; }
.quiz-card__meta-item svg { width:10px; height:10px; }

/* ── ROW STAGGER DELAYS ── */
.quiz-row:nth-child(1) { animation-delay:0s; }
.quiz-row:nth-child(2) { animation-delay:-62s; }
.quiz-row:nth-child(3) { animation-delay:-125s; }
.quiz-row:nth-child(4) { animation-delay:-31s; }
.quiz-row:nth-child(5) { animation-delay:-187s; }
.quiz-row:nth-child(6) { animation-delay:-93s; }
.quiz-row:nth-child(7) { animation-delay:-250s; }
.quiz-row:nth-child(8) { animation-delay:-156s; }
.quiz-row:nth-child(9) { animation-delay:-78s; }

/* ── MOBILE ── */
@media (max-width:640px) {
  .gateway { flex-direction:column; height:100dvh; overflow:hidden; }
  .gateway__hero {
    width:100%; height:58dvh; flex-shrink:0; flex:none; position:relative;
  }
  /* Bottom fade + text overlay on hero */
  .gateway__hero::after {
    content:'';
    position:absolute;
    left:0; right:0; bottom:0;
    height:60%;
    background:linear-gradient(to top, rgba(29,11,9,0.85) 0%, rgba(29,11,9,0.4) 60%, transparent 100%);
    pointer-events:none;
    z-index:1;
  }
  /* K + heading pinned to bottom of hero */
  .gateway__hero-label {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    position:absolute;
    bottom:1rem;
    left:1.25rem;
    right:1.25rem;
    z-index:2;
    gap:0.375rem;
  }
  .gateway__hero-label-k svg { width:20px; height:auto; filter:brightness(0) invert(1); }
  .gateway__hero-label-heading {
    font-family:'Roobert Semimono',ui-monospace,monospace;
    font-weight:400;
    font-size:1.5rem;
    line-height:1;
    letter-spacing:-0.091em;
    color:#FFFFFF;
    margin:0;
  }
  .gateway__hero-label-sub {
    font-family:'Roobert',system-ui,sans-serif;
    font-weight:500;
    font-size:0.875rem;
    line-height:1.412;
    color:rgba(255,255,255,0.85);
    margin:0;
  }
  .gateway__form-panel { flex:1; width:100%; height:auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:1.25rem 1.25rem 2.5rem; justify-content:flex-start; }
  .gateway__form-inner { max-width:100%; }
  /* Hide K and heading from form panel on mobile */
  .gateway__logo { display:none; }
  .gateway__heading-wrap { display:none; }
  /* Show hero label on mobile */
  .gateway__hero-label { display:flex; }
  .quiz-card,.quiz-card-wrap { width:200px !important; height:63px !important; }
  .quiz-row { height:63px !important; }
  .quiz-grid { gap:6px; }
  /* Scoped to .gateway (0,2,0) so it beats modes.css's unscoped .quiz-card__title
     (0,1,0, loads later alphabetically) — otherwise titles render at modes' 14px.
     0.7rem ≈ 20% smaller than the 14px they were actually showing. */
  .gateway .quiz-card__title { font-size:0.7rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:0.2rem; }
  .quiz-card__meta-item { font-size:0.4rem; gap:0.15rem; }
  .quiz-card__meta { gap:0.35rem; }
  .gateway--forgot .gateway__forgot-heading,
  .gateway--forgot .gateway__forgot-sub { display:none; }
  .gateway__forgot-panel .gateway__fields { margin-top:0; }
  /* iOS zoom prevention — 16px threshold */
  .gateway__input { font-size:16px !important; }
}

@media (min-width:641px) {
  .quiz-card__title { font-size:0.875rem; line-height:1.25; white-space:normal; overflow:visible; text-overflow:unset; }
  .quiz-card__meta-item { font-size:0.6875rem; gap:0.2rem; }
  .quiz-card__meta { gap:0.625rem; }
  .quiz-card__meta-item svg { width:10px; height:10px; }
}
.gateway__form-inner.is-transitioning { opacity:0; }