/* ==============================================================
   AUREX — portal/auth-final.css
   AUTHORITATIVE SIGN-IN SURFACE LAYER.

   Loaded AFTER styles.css and portal/mobile-final.css, so it wins
   on source order. Targets only the five elements rendered by
   portalClientLoginGate() (portal/shared/bootstrap.js:371-388).

   Icons are drawn with CSS pseudo-elements and masks, so no markup,
   handler, href or auth behaviour changes.
   ============================================================== */

.portal-body .portal-cinematic-entry {
  --axa-ink: #f3f7fb;
  --axa-ink-2: rgba(198, 216, 236, 0.9);
  --axa-ink-3: rgba(150, 176, 208, 0.78);
  --axa-line: rgba(150, 184, 218, 0.18);
  --axa-cyan: #55b6e0;
  --axa-glass: rgba(255, 255, 255, 0.04);
}

/* ==========================================================
   STEP 2 — PRIMARY SIGN IN
   Deep blue foundation, cyan illumination from the upper edge,
   translucent cyan border, inner highlight, controlled shadow.
   ========================================================== */
.portal-body .portal-cinematic-entry .portal-login-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  border-radius: 12px;
  border: 1px solid rgba(110, 200, 236, 0.42);
  background:
    linear-gradient(180deg, rgba(96, 190, 232, 0.30), rgba(96, 190, 232, 0) 46%),
    linear-gradient(180deg, #1d5f8c, #123f61);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 620;
  letter-spacing: 0.02em;
  box-shadow:
    0 10px 24px -14px rgba(18, 63, 97, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 160ms ease,
              border-color 160ms ease;
}
/* Refined arrow on the right */
.portal-body .portal-cinematic-entry .portal-login-submit::after {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h13M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h13M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-body .portal-cinematic-entry .portal-login-submit:hover {
  transform: translateY(-1px);
  border-color: rgba(130, 214, 245, 0.62);
  box-shadow:
    0 14px 30px -14px rgba(24, 84, 126, 0.98),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.portal-body .portal-cinematic-entry .portal-login-submit:hover::after { transform: translateX(3px); }
.portal-body .portal-cinematic-entry .portal-login-submit:active { transform: scale(0.985); }
.portal-body .portal-cinematic-entry .portal-login-submit:focus-visible {
  outline: 2px solid rgba(110, 214, 245, 0.85);
  outline-offset: 3px;
}
.portal-body .portal-cinematic-entry .portal-login-submit[aria-busy="true"] {
  opacity: 0.78;
  pointer-events: none;
}
.portal-body .portal-cinematic-entry .portal-login-submit[aria-busy="true"]::after { display: none; }

/* ==========================================================
   STEP 3 — SECONDARY ACTION ROW
   Two real surfaces instead of two blue text links.
   ========================================================== */
.portal-body .portal-cinematic-entry .pce-login-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  border: 0;
  font-size: inherit;
}
/* The middle separator dot the markup emits is not needed here */
.portal-body .portal-cinematic-entry .pce-login-links > span { display: none; }

.portal-body .portal-cinematic-entry .pce-login-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--axa-line);
  background: var(--axa-glass);
  color: var(--axa-ink-2);
  font-size: 0.85rem;
  font-weight: 560;
  text-align: center;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.portal-body .portal-cinematic-entry .pce-login-links a:hover {
  border-color: rgba(85, 182, 224, 0.55);
  background: rgba(85, 182, 224, 0.09);
  color: var(--axa-ink);
}
.portal-body .portal-cinematic-entry .pce-login-links a:active { transform: scale(0.988); }
.portal-body .portal-cinematic-entry .pce-login-links a:focus-visible {
  outline: 2px solid rgba(110, 214, 245, 0.8);
  outline-offset: 2px;
}
/* Line icons */
.portal-body .portal-cinematic-entry .pce-login-links a::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
/* key */
.portal-body .portal-cinematic-entry .pce-login-links a:first-of-type::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='8' r='4.5'/><path d='M11.2 11.2 20 20M17 17l2-2M14 14l2-2'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='8' r='4.5'/><path d='M11.2 11.2 20 20M17 17l2-2M14 14l2-2'/></svg>");
}
/* user-plus */
.portal-body .portal-cinematic-entry .pce-login-links a:last-of-type::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='7.5' r='3.5'/><path d='M3 20v-1.5A4.5 4.5 0 0 1 7.5 14h3A4.5 4.5 0 0 1 15 18.5V20M18 8v6M15 11h6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='7.5' r='3.5'/><path d='M3 20v-1.5A4.5 4.5 0 0 1 7.5 14h3A4.5 4.5 0 0 1 15 18.5V20M18 8v6M15 11h6'/></svg>");
}

/* ==========================================================
   STEP 4 — STATUS BECOMES A SYSTEM LINE, NOT AN INPUT
   The value stays exactly whatever status.syncStatus renders.
   ========================================================== */
.portal-body .portal-cinematic-entry .portal-entry-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--axa-ink-3);
}
.portal-body .portal-cinematic-entry .portal-entry-status::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #5ad6a8;
  box-shadow: 0 0 8px rgba(90, 214, 168, 0.7);
}
.portal-body .portal-cinematic-entry .portal-entry-status.is-error {
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid rgba(255, 118, 132, 0.36);
  background: rgba(255, 118, 132, 0.09);
  color: #ffc6cd;
}
.portal-body .portal-cinematic-entry .portal-entry-status.is-error::before { background: #ff7684; box-shadow: none; }

/* ==========================================================
   STEP 5 — SECURITY STRIP
   ========================================================== */
.portal-body .portal-cinematic-entry .pce-trust {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--axa-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.022);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--axa-ink-3);
}
/* shield */
.portal-body .portal-cinematic-entry .pce-trust::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background-color: #5ad6a8;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 5 5.6v5.6c0 4 2.9 7.2 7 8.6 4.1-1.4 7-4.6 7-8.6V5.6z'/><path d='m9.2 11.8 1.9 1.9 3.7-3.8'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 5 5.6v5.6c0 4 2.9 7.2 7 8.6 4.1-1.4 7-4.6 7-8.6V5.6z'/><path d='m9.2 11.8 1.9 1.9 3.7-3.8'/></svg>") center / contain no-repeat;
}
/* The decorative dot the markup emits is replaced by the shield */
.portal-body .portal-cinematic-entry .pce-trust-dot { display: none; }

/* ==========================================================
   STEP 6 — SUPPORT + ACCOUNT SETUP AS REAL CTAs
   ========================================================== */
.portal-body .portal-cinematic-entry .pce-actions {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
}
.portal-body .portal-cinematic-entry .pce-actions a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 50px;
  padding: 0 16px;
  border-radius: 11px;
  border: 1px solid var(--axa-line);
  background: rgba(255, 255, 255, 0.028);
  color: var(--axa-ink-2);
  font-size: 0.88rem;
  font-weight: 560;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.portal-body .portal-cinematic-entry .pce-actions a::after {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h13M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h13M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-body .portal-cinematic-entry .pce-actions a:hover {
  border-color: rgba(85, 182, 224, 0.5);
  background: rgba(85, 182, 224, 0.08);
  color: var(--axa-ink);
}
.portal-body .portal-cinematic-entry .pce-actions a:hover::after { transform: translateX(3px); }
.portal-body .portal-cinematic-entry .pce-actions a:active { transform: scale(0.99); }
.portal-body .portal-cinematic-entry .pce-actions a:focus-visible {
  outline: 2px solid rgba(110, 214, 245, 0.8);
  outline-offset: 2px;
}
/* "Explore account setup" is the account-creation path: cyan outline */
.portal-body .portal-cinematic-entry .pce-actions a:last-of-type {
  border-color: rgba(85, 182, 224, 0.45);
  background: rgba(85, 182, 224, 0.07);
  color: #cfeaf8;
  font-weight: 600;
}
.portal-body .portal-cinematic-entry .pce-actions a:last-of-type:hover {
  border-color: rgba(110, 214, 245, 0.75);
  background: rgba(85, 182, 224, 0.14);
  color: #ffffff;
}
/* The inline lead-in reads as the row's supporting line */
.portal-body .portal-cinematic-entry .pce-help-lead {
  display: block;
  margin-bottom: 1px;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--axa-ink-3);
}

/* ==========================================================
   STEP 8 — SPACING AT PHONE WIDTH
   ========================================================== */
@media (max-width: 560px) {
  .portal-body .portal-cinematic-entry { padding-left: 16px; padding-right: 16px; }
  .portal-body .portal-cinematic-entry .pce-form label { margin-bottom: 16px; }
  .portal-body .portal-cinematic-entry .pce-form { margin-bottom: 0; }
}
@media (max-width: 380px) {
  .portal-body .portal-cinematic-entry .pce-login-links { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .portal-body .portal-cinematic-entry .portal-login-submit,
  .portal-body .portal-cinematic-entry .portal-login-submit::after,
  .portal-body .portal-cinematic-entry .pce-login-links a,
  .portal-body .portal-cinematic-entry .pce-actions a,
  .portal-body .portal-cinematic-entry .pce-actions a::after { transition: none; }
}

/* Sign-in mark — Variant C, applied as a mask because bootstrap.js
   (which renders that screen) is off-limits. Same geometry as every
   other surface. */
.portal-body .portal-cinematic-entry .pce-brand-mark > svg { display: none; }
.portal-body .portal-cinematic-entry .pce-brand-mark {
  width: 30px; height: 30px; display: block; flex: 0 0 auto;
  background-color: #f4f8fb;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='black'><rect x='13.4' y='3' width='5.2' height='5.5'/><rect x='10.2' y='10' width='4.6' height='5.5'/><rect x='17.2' y='10' width='4.6' height='5.5'/><rect x='7' y='17' width='6.7' height='5.5'/><rect x='18.3' y='17' width='6.7' height='5.5'/><rect x='3.8' y='24' width='8.8' height='5.5'/><rect x='19.4' y='24' width='8.8' height='5.5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='black'><rect x='13.4' y='3' width='5.2' height='5.5'/><rect x='10.2' y='10' width='4.6' height='5.5'/><rect x='17.2' y='10' width='4.6' height='5.5'/><rect x='7' y='17' width='6.7' height='5.5'/><rect x='18.3' y='17' width='6.7' height='5.5'/><rect x='3.8' y='24' width='8.8' height='5.5'/><rect x='19.4' y='24' width='8.8' height='5.5'/></svg>") center / contain no-repeat;
}

/* Sign-in: bootstrap.js still emits a mark span; it is hidden and the
   wordmark carries the identity. */
.portal-body .portal-cinematic-entry .pce-brand-mark { display: none; }
.portal-body .portal-cinematic-entry .pce-brand { gap: 0; }
.portal-body .portal-cinematic-entry .pce-brand-word {
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  line-height: 1;
  color: #f6f9fc;
}

/* ==============================================================
   WORDMARK — CINEMATIC ENTRANCE (sign-in)
   The wordmark sits alone here, so it can afford the tracking
   resolve: letters start tight and spread into final position as
   the blur clears. That animates letter-spacing, which reflows —
   acceptable on an isolated element, avoided in the topbar where
   it would push the controls.
   ============================================================== */
.portal-body .portal-cinematic-entry .pce-brand-word {
  position: relative;
  display: inline-block;
  animation: axWordResolve 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}
/* One pass of light across the letterforms */
.portal-body .portal-cinematic-entry .pce-brand-word::after {
  content: "AUREX";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 34%,
    rgba(255, 255, 255, 0.85) 48%,
    transparent 62%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: axWordSheen 1400ms cubic-bezier(0.4, 0, 0.2, 1) 760ms both;
}

@keyframes axWordResolve {
  from { opacity: 0; letter-spacing: 0.08em; filter: blur(5px); transform: translateY(4px); }
  60%  { opacity: 1; filter: blur(0); }
  to   { opacity: 1; letter-spacing: 0.26em; filter: blur(0); transform: none; }
}
@keyframes axWordSheen {
  from { background-position: 130% 0; opacity: 1; }
  to   { background-position: -30% 0; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-body .portal-cinematic-entry .pce-brand-word,
  .portal-body .portal-cinematic-entry .pce-brand-word::after { animation: none; }
  .portal-body .portal-cinematic-entry .pce-brand-word::after { content: none; }
}

/* ==============================================================
   SIGN-IN SIGNATURE — matching shape, colour and type
   ============================================================== */
.portal-body .portal-cinematic-entry {
  --ax-cyan: #55b6e0;
  --ax-edge: rgba(150, 210, 235, 0.42);
}

/* Corner notch, echoing the portal surfaces */
.portal-body .portal-cinematic-entry .pce-heading {
  position: relative;
}
.portal-body .portal-cinematic-entry .pce-heading::after {
  content: "";
  position: absolute;
  top: -4px;
  right: 0;
  width: 18px;
  height: 18px;
  pointer-events: none;
  border-top: 1.5px solid var(--ax-edge);
  border-right: 1.5px solid var(--ax-edge);
  border-top-right-radius: 4px;
  opacity: 0.5;
  animation: axNotchIn 520ms cubic-bezier(0.22, 1, 0.36, 1) 520ms both;
}

/* Type: sharper headline, engineered figures in the form */
.portal-body .portal-cinematic-entry .pce-heading h1 {
  letter-spacing: -0.028em;
  font-feature-settings: "ss01" 1;
}
.portal-body .portal-cinematic-entry .pce-form input {
  font-variant-numeric: tabular-nums slashed-zero;
  font-variant-caps: normal;
  text-transform: none;
  letter-spacing: 0.01em;
}
/* Field labels pick up the small-caps voice */
.portal-body .portal-cinematic-entry .pce-form label {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.09em;
  font-weight: 640;
  font-size: 0.94rem;
}

/* Movement: the field itself responds, not just its border */
.portal-body .portal-cinematic-entry .pce-form input {
  transition: border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 180ms ease,
              box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-body .portal-cinematic-entry .pce-form input:focus {
  transform: translateY(-1px);
}
.portal-body .portal-cinematic-entry .pce-form label:focus-within {
  color: #dff0fa;
}

@keyframes axNotchIn { from { opacity: 0; transform: translate(4px, -4px); } to { opacity: 0.5; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .portal-body .portal-cinematic-entry .pce-heading::after { animation: none; opacity: 0.5; }
  .portal-body .portal-cinematic-entry .pce-form input { transition: none; }
  .portal-body .portal-cinematic-entry .pce-form input:focus { transform: none; }
}

/* ==============================================================
   PASS 2 — LOGIN AMBIENT + ENTRANCE
   Selectors read from portalClientLoginGate() (bootstrap.js:361-392):
     .portal-cinematic-entry  root
     .pce-shell / .pce-access / .pce-access-inner
     .pce-brand / .pce-heading / .pce-form
     .primary-button.portal-login-submit
     .pce-login-links / .pce-trust / .pce-actions
   ============================================================== */

/* ---- §8 ONE ambient feature: a slow architectural contour field.
        background-position only — no blur, no shadow, no layout. ---- */
.portal-body .portal-cinematic-entry {
  position: relative;
  isolation: isolate;
}
.portal-body .portal-cinematic-entry::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(58% 44% at 22% 14%, rgba(74, 168, 216, 0.11), transparent 64%),
    linear-gradient(rgba(150, 184, 218, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 184, 218, 0.035) 1px, transparent 1px);
  background-size: auto, 68px 68px, 68px 68px;
  -webkit-mask-image: radial-gradient(78% 62% at 42% 34%, #000 0%, transparent 82%);
  mask-image: radial-gradient(78% 62% at 42% 34%, #000 0%, transparent 82%);
  animation: axLoginField 30s linear infinite;
}
@keyframes axLoginField {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 0 0, 68px 68px, 68px 68px; }
}

/* ---- §4-style entrance, 60ms stagger, ~520ms total ---- */
.portal-body .portal-cinematic-entry .pce-brand   { animation: axEntryUp 320ms cubic-bezier(0.22,1,0.36,1) 40ms both; }
.portal-body .portal-cinematic-entry .pce-heading { animation: axEntryUp 320ms cubic-bezier(0.22,1,0.36,1) 100ms both; }
.portal-body .portal-cinematic-entry .pce-form    { animation: axEntryUp 320ms cubic-bezier(0.22,1,0.36,1) 160ms both; }
.portal-body .portal-cinematic-entry .pce-login-links { animation: axEntryUp 320ms cubic-bezier(0.22,1,0.36,1) 220ms both; }
.portal-body .portal-cinematic-entry .pce-trust,
.portal-body .portal-cinematic-entry .pce-actions { animation: axEntryUp 320ms cubic-bezier(0.22,1,0.36,1) 280ms both; }

@keyframes axEntryUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .portal-body .portal-cinematic-entry::before { animation: none; }
  .portal-body .portal-cinematic-entry .pce-brand,
  .portal-body .portal-cinematic-entry .pce-heading,
  .portal-body .portal-cinematic-entry .pce-form,
  .portal-body .portal-cinematic-entry .pce-login-links,
  .portal-body .portal-cinematic-entry .pce-trust,
  .portal-body .portal-cinematic-entry .pce-actions { animation: none; }
}

/* ==============================================================
   SIGN-IN DESKTOP REPAIR
   Measured at 1440: .pce-shell 452 -> .pce-access 260 ->
   .pce-access-inner 130 -> form 90 -> inputs 90. Each level is a
   grid inheriting a multi-track desktop template, so every nesting
   halved the usable width and the secondary links collided at 40px.
   Collapse the inner levels to one column; .pce-shell already has
   the approved 452px max-width. Mobile (<=560px) is untouched.
   ============================================================== */
@media (min-width: 561px) {
  /* .pce-shell was a TWO-column grid (260px + 192px) inside a 452px
     card, so the form only ever got the first track; the inner levels
     then lost another ~130px and ~40px to horizontal padding. */
  .portal-body .portal-cinematic-entry .pce-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    width: min(460px, calc(100% - 48px));
    max-width: 460px;
    margin-inline: auto;
  }
  .portal-body .portal-cinematic-entry .pce-shell > * { grid-area: auto; min-width: 0; }
  .portal-body .portal-cinematic-entry .pce-access { padding-left: 24px; padding-right: 24px; }
  .portal-body .portal-cinematic-entry .pce-access-inner { padding-left: 0; padding-right: 0; }
  .portal-body .portal-cinematic-entry .pce-access,
  .portal-body .portal-cinematic-entry .pce-access-inner,
  .portal-body .portal-cinematic-entry .portal-auth-form {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    grid-auto-flow: row;
    width: 100%;
    min-width: 0;
  }
  .portal-body .portal-cinematic-entry .pce-access > *,
  .portal-body .portal-cinematic-entry .pce-access-inner > *,
  .portal-body .portal-cinematic-entry .portal-auth-form > * { grid-area: auto; min-width: 0; }
  .portal-body .portal-cinematic-entry .portal-auth-form label { display: block; width: 100%; }
  .portal-body .portal-cinematic-entry .portal-auth-form input {
    width: 100%; box-sizing: border-box; min-height: 46px;
  }
  .portal-body .portal-cinematic-entry .portal-auth-form button[type="submit"],
  .portal-body .portal-cinematic-entry .pce-access .primary-button { width: 100%; min-height: 48px; }
  /* Password assistance / Create client account were 40px and colliding */
  .portal-body .portal-cinematic-entry .pce-access-links,
  .portal-body .portal-cinematic-entry .pce-access-inner > div:has(> a + a) {
    display: flex; flex-wrap: wrap; gap: 10px 18px; width: 100%;
  }
  .portal-body .portal-cinematic-entry .pce-access-inner a { white-space: nowrap; }
}