/* ==========================================================================
   JACKPOTS — INTERNAL PORTAL AUTHENTICATION
   ==========================================================================
   ONE screen for every authentication step of every internal portal:

     Merchant / Admin / Super Admin  ×  Login · Forgot · Reset · Done

   All fifteen combinations render this shell. Only the card's contents and
   three strings — title, subtitle, and which `portal` value goes to
   /api/auth/login — ever differ. Markup comes from assets/js/jp-login.js.

   THE COMPOSITION IS A FULL-BLEED PHOTOGRAPH WITH A FLOATING CARD.
   Not two solid columns: the image spans the entire viewport, the left-hand
   copy sits ON it, and the login card floats over the right-hand third with the
   photograph still visible above, below and to the right of it. Getting this
   wrong is the difference between "looks like the reference" and "looks like a
   different page with the same words".

   THE ARTWORK IS A PHOTOGRAPH AND IT SHIPS AT ITS FULL FRAME.
   `--jpl-bg` points at assets/images/login-collage.jpg — 1536×1024, the whole
   collage: Burj Al Arab, Burj Khalifa, Eiffel Tower, Taj Mahal, the cruise
   liner, the cliffside village, the mountains and the resort. It is 3:2, which
   is close enough to a desktop viewport that `cover` crops a few dozen pixels
   instead of magnifying one building.

   An earlier release had to crop a 350px band out of a flattened mockup,
   because the only file available had the logo, heading and login card baked
   into its pixels — everything below that band was unusable. If this file is
   ever replaced again, replace it with a plate that has NO interface painted
   on it, or that crop-and-magnify problem comes straight back.

   HOW IT COEXISTS WITH THE PORTAL SHEETS
   Admin and Super Admin already load admin.css / super-admin.css and then
   jp-ds.css, all of which style bare `input`, `.btn` and friends. Everything
   here is namespaced `jpl-` and the link tag MUST come after jp-ds.css: several
   rules tie on specificity with it (`.jpl-field input` vs `input[type=email]`),
   so source order is what decides them.

   THE SHELL IS FLEX, NOT GRID, AND THAT IS LOAD-BEARING.
   admin.js shows the login with `adminAuthShell.style.display = 'flex'`. An
   inline style beats any stylesheet, so a grid shell would be silently
   overridden to flex and collapse.
   ========================================================================== */

/* THIS SHEET MUST CARRY ITS OWN RESET. partner-login.html, forgot-password.html
   and reset-password.html load NOTHING else — no main.css, no admin.css, no
   partner-portal.css — so the UA's default `body{margin:8px}` survived and drew
   a white border down all four sides of a full-bleed photograph. It also forced
   a scrollbar: 8px top + 8px bottom on top of a `min-height:100vh` shell can
   never fit in 100vh.

   Harmless on admin/ and super-admin/, which already set `*{margin:0}` in
   admin.css — this restates that value rather than changing it. Scoping it to
   `body:has(.jpl)` would be tidier but pointless for a value every portal sheet
   already agrees on. */
html,body{margin:0;}

.jpl{
  /* The `?v=` matters more here than on a script. This file gets REPLACED — a
     better plate, a seasonal shot — at a URL that never changes, and a browser
     (or Caddy) holding the old bytes shows the previous artwork with no way for
     anyone to tell why. Bump this whenever the file is swapped. */
  --jpl-bg:url('../images/login-collage.jpg?v=20260803b');
  --jpl-navy-deep:#04162B;
  --jpl-navy:#0A2540;
  --jpl-gold:#E0A32E;
  --jpl-gold-lt:#F0C462;
  --jpl-gold-dk:#B8801A;
  --jpl-ink:#12263F;
  --jpl-muted:#64748B;
  --jpl-line:#E2E8F0;
  --jpl-ease:cubic-bezier(.4,0,.2,1);

  position:relative;
  display:flex;
  align-items:stretch;
  min-height:100vh;
  width:100%;

  /* `padding:0` IS LOAD-BEARING — do not delete it as redundant. The element is
     `class="partner-auth-shell jpl"`, and admin.css / super-admin.css still
     carry the pre-redesign `.partner-auth-shell{ padding:24px; ... }`. Equal
     specificity means source order decides, and jp-login.css loads last, so
     every property it names wins — but a property it does NOT name is simply
     inherited from the old rule. Padding was the one nobody named, so 48px of
     it leaked into Admin and Super Admin alone, pushing a `min-height:100vh`
     shell 6px past the viewport and putting a scrollbar on a page designed to
     fit exactly. The merchant pages never showed it: they load no other sheet.

     The same rule also sets `align-items:center` and a navy gradient
     `background`; both ARE named above, which is why only padding escaped. */
  padding:0;

  font-family:'Montserrat', system-ui, -apple-system, sans-serif;
  color:var(--jpl-ink);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;

  /* THE PHOTOGRAPH, FULL BLEED, AND NOTHING LAYERED UNDER IT.
     There was a gradient beneath this as a stand-in while the file was missing;
     it has been removed on request. `background-color` stays because every
     image background needs one — it is what paints during the fetch and behind
     the transparent edges of a JPEG that is not a perfect 16:9 — but it is a
     flat navy, not a substitute picture.

     THE URL IS RELATIVE TO THIS STYLESHEET, NOT TO THE PAGE. That is what lets
     the same rule serve partner-login.html at the site root and admin/ and
     super-admin/ one directory down: `../images/` resolves against
     assets/css/, so every page gets assets/images/login-collage.jpg. Do not
     "fix" it to a page-relative path. */
  background-color:var(--jpl-navy-deep);
  background-image:var(--jpl-bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.jpl *{box-sizing:border-box;}
.jpl img{max-width:100%;}
.jpl button{cursor:pointer; font-family:inherit;}
.jpl a{text-decoration:none;}

/* Left-weighted scrim. The reference is dark enough on the left to carry white
   text and essentially untouched on the right, where the card provides its own
   contrast — so this fades out by ~58% rather than dimming the whole frame.
   Kept soft: the brief rules out making the page darker than the reference. */
.jpl::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(96deg, rgba(4,18,35,0.80) 0%, rgba(4,18,35,0.52) 26%, rgba(4,18,35,0.16) 46%, rgba(4,18,35,0) 62%),
    linear-gradient(180deg, rgba(4,18,35,0.34) 0%, rgba(4,18,35,0) 22%, rgba(4,18,35,0) 62%, rgba(4,18,35,0.44) 100%);
}

/* ======================================================= left: the overlay
   A transparent zone, NOT a panel. The photograph behind it is the page's own
   background; giving this its own colour is what turns a collage into a
   two-column layout. */
.jpl-art{
  position:relative; z-index:1;
  flex:0 1 58%; min-width:0;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:38px 40px 30px;
}

/* The mark is square (606×600), so height is the only dial and the width follows.
   At 78px it read as a favicon against a 46px headline; 108px is roughly the
   headline's cap-height x2 and holds the top-left corner properly. The art
   column is ~890px wide at 1536, so ~109px of width costs nothing, and the art
   side is never the height constraint (~490px against the card's ~724px) — the
   logo can grow without touching the one-screen fit. */
.jpl-logo{height:108px; width:auto; object-fit:contain; align-self:flex-start;}

.jpl-copy{max-width:600px; margin-top:auto; padding-bottom:26px;}
.jpl-welcome{
  font-size:clamp(30px,3.05vw,46px); font-weight:700; line-height:1.16;
  letter-spacing:-0.015em; color:#fff; margin:0;
  text-shadow:0 2px 18px rgba(4,18,35,0.42);
}
.jpl-welcome span{display:block; color:var(--jpl-gold-lt);}
.jpl-rule{
  width:64px; height:3px; border-radius:2px; margin:20px 0 18px;
  background:var(--jpl-gold-lt); opacity:.95;
}
.jpl-tag{
  font-size:clamp(14px,1.15vw,17px); font-weight:500; color:rgba(255,255,255,0.93);
  margin:0; text-shadow:0 1px 12px rgba(4,18,35,0.42);
}
.jpl-tag-sub{
  font-size:clamp(12.5px,0.95vw,14.5px); color:rgba(255,255,255,0.74);
  margin:6px 0 0; text-shadow:0 1px 12px rgba(4,18,35,0.42);
}

/* The dark glass strip. Five items, evenly distributed — "Buses" is not in the
   set, and the row is `flex` with equal-basis items so removing it leaves no
   gap behind. */
.jpl-services{
  display:flex; align-self:flex-start; margin-top:30px;
  border-radius:16px; overflow:hidden;
  background:rgba(9,22,40,0.56);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  backdrop-filter:blur(16px) saturate(130%);
  border:1px solid rgba(255,255,255,0.13);
  box-shadow:0 12px 34px -14px rgba(0,0,0,0.55);
}
.jpl-service{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:17px 22px; min-width:96px;
  font-size:12.5px; font-weight:500; color:rgba(255,255,255,0.92); white-space:nowrap;
}
.jpl-service + .jpl-service{box-shadow:inset 1px 0 0 rgba(255,255,255,0.10);}
.jpl-service svg{width:23px; height:23px; fill:none; stroke:var(--jpl-gold-lt); stroke-width:1.6;}

.jpl-trust{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px 15px;
  font-size:13px; color:rgba(255,255,255,0.86); margin:0;
  text-shadow:0 1px 10px rgba(4,18,35,0.5);
}
.jpl-trust span{display:inline-flex; align-items:center; gap:8px;}
.jpl-trust svg{width:16px; height:16px; fill:none; stroke:var(--jpl-gold-lt); stroke-width:1.7;}
.jpl-trust i{width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,0.5);}

/* ====================================================== right: the card zone
   Transparent, so the photograph runs behind and around the card exactly as it
   does in the reference. */
/* THE CARD COLUMN IS WHAT DECIDES WHETHER THE PAGE FITS IN ONE SCREEN.
   The art column only needs ~487px; this one stacks card + footer and came to
   926px against a 900px viewport, so the page scrolled by exactly the excess.

   The three vertical values below are therefore `clamp(floor, vh, current)`,
   not smaller fixed numbers: they hold the original spacing on tall displays
   and give back ~34px by 900px tall, which is what buys the fit. Every `vh`
   coefficient is under the ratio of its own maximum (34px is 3.8vh at 900px,
   so 2.7vh is what actually compresses there) — raise one above that ratio and
   it silently pins to the max and stops doing anything.

   Horizontal padding is untouched; only height was ever the problem. */
.jpl-side{
  position:relative; z-index:1;
  flex:1 1 42%; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(16px,2.7vh,34px) 42px clamp(12px,2vh,26px);
}
.jpl-side-inner{width:100%; max-width:620px;}

/* ---------------------------------------------------------------- the card
   Primarily white, floating, generous radius. The glass is deliberately faint —
   about 4% — so it reads as a white card that happens to sit on a photograph,
   which is what the reference shows. Anything stronger and the labels start
   competing with the sky behind them. */
.jpl-card{
  background:rgba(255,255,255,0.96);
  -webkit-backdrop-filter:blur(22px) saturate(125%);
  backdrop-filter:blur(22px) saturate(125%);
  border:1px solid rgba(255,255,255,0.55);
  border-radius:26px;
  padding:clamp(30px,4.2vh,44px) 52px clamp(28px,3.9vh,40px);
  box-shadow:
    0 2px 6px rgba(4,18,35,0.06),
    0 20px 44px -14px rgba(4,18,35,0.26),
    0 54px 96px -38px rgba(4,18,35,0.42);
}

/* EVERY VERTICAL VALUE FROM HERE DOWN IS `clamp(floor, vh, design)`.
   The card carries ~724px of content, so on a short viewport it is the card —
   not the shell — that overflows. There was already a `@media (max-width:1400px)`
   block compressing for NARROW screens and nothing at all for SHORT ones, which
   is the case that actually bites: Windows display scaling at 125% turns a
   1920×1080 monitor into a 1536×736 CSS viewport, and 736px is where a login
   form stops fitting.

   Ornament gives way before content. The avatar, the diamond rule and the two
   divider margins shed the most; inputs stop at 46px (still a comfortable
   target) and the type never drops below 26px. Above ~1000px tall every value
   is back at its design number, so the roomy look is unchanged where there is
   room for it. */
.jpl-avatar{
  width:clamp(52px,7.6vh,82px); height:clamp(52px,7.6vh,82px);
  margin:0 auto clamp(12px,2.1vh,24px); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #EDF1F6;
  box-shadow:0 4px 14px -4px rgba(18,38,63,0.14);
}
.jpl-avatar svg{width:clamp(24px,3.4vh,36px); height:clamp(24px,3.4vh,36px); fill:none; stroke:var(--jpl-gold); stroke-width:1.6;}

.jpl-title{
  font-size:clamp(26px,3.6vh,34px); font-weight:700; text-align:center; letter-spacing:-0.02em;
  color:var(--jpl-navy); margin:0; line-height:1.15;
}
.jpl-sub{
  font-size:15.5px; color:var(--jpl-muted); text-align:center; margin:12px 0 0;
  line-height:1.5;
}

/* Hairline with a gold diamond — the one ornament on the card. */
.jpl-div{display:flex; align-items:center; gap:14px; margin:clamp(10px,2.2vh,26px) 0 clamp(12px,2.5vh,30px);}
.jpl-div::before, .jpl-div::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, rgba(224,163,46,0.55), transparent);
}
.jpl-div i{
  width:8px; height:8px; flex:none; background:var(--jpl-gold);
  transform:rotate(45deg); border-radius:1.5px;
}

/* ------------------------------------------------------------------ fields */
.jpl-field{margin-bottom:clamp(11px,1.8vh,20px);}
.jpl-field > label{
  display:block; font-size:14px; font-weight:600; color:#334155; margin-bottom:clamp(5px,1.1vh,9px);
}
.jpl-input{position:relative; display:flex; align-items:center;}
.jpl-input > svg{
  position:absolute; left:18px; width:20px; height:20px; pointer-events:none;
  fill:none; stroke:#94A3B8; stroke-width:1.7; transition:stroke .18s var(--jpl-ease);
}
.jpl-field input{
  width:100%; height:clamp(46px,5.9vh,56px); padding:0 18px 0 52px;
  border:1px solid var(--jpl-line); border-radius:12px;
  background:#fff; color:var(--jpl-ink); font-size:15px; font-family:inherit;
  transition:border-color .18s var(--jpl-ease), box-shadow .18s var(--jpl-ease);
}
.jpl-field input::placeholder{color:#94A3B8;}
.jpl-field input:focus{
  outline:none; border-color:var(--jpl-gold);
  box-shadow:0 0 0 3.5px rgba(224,163,46,0.15);
}
.jpl-input:focus-within > svg{stroke:var(--jpl-gold);}
.jpl-has-eye input{padding-right:54px;}
.jpl-eye{
  position:absolute; right:10px; background:none; border:0; padding:10px;
  display:flex; border-radius:9px; color:#94A3B8;
}
.jpl-eye:hover{color:var(--jpl-navy);}
.jpl-eye svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7;}

/* The second factor is the same field with wider tracking, not a different
   looking screen. */
.jpl-otp input{
  padding-left:18px; text-align:center;
  font-size:22px; font-weight:700; letter-spacing:.45em;
}
.jpl-otp input::placeholder{letter-spacing:.32em;}

.jpl-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin:6px 0 clamp(13px,2.6vh,26px);
}
.jpl-remember{
  display:flex; align-items:center; gap:10px;
  font-size:14.5px; color:#475569; cursor:pointer; user-select:none;
}
.jpl-remember input{
  width:18px; height:18px; accent-color:var(--jpl-gold); cursor:pointer;
}
.jpl-forgot{font-size:14.5px; font-weight:500; color:#2563EB;}
.jpl-forgot:hover{color:var(--jpl-gold-dk); text-decoration:underline;}

/* ------------------------------------------------------------------ button */
.jpl-btn{
  width:100%; height:clamp(50px,6.4vh,60px);
  display:flex; align-items:center; justify-content:center; gap:12px;
  border:0; border-radius:12px;
  font-size:18px; font-weight:600; letter-spacing:.005em; color:#fff;
  background:linear-gradient(180deg, #E7AE3A 0%, #D79A22 52%, #C98A12 100%);
  box-shadow:0 10px 24px -10px rgba(201,138,18,0.75), 0 2px 5px rgba(4,18,35,0.10);
  transition:transform .18s var(--jpl-ease), box-shadow .22s var(--jpl-ease), filter .18s var(--jpl-ease);
}
.jpl-btn svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2;}
.jpl-btn:hover:not(:disabled){
  transform:translateY(-1.5px); filter:brightness(1.04);
  box-shadow:0 16px 32px -12px rgba(201,138,18,0.82), 0 4px 10px rgba(4,18,35,0.12);
}
.jpl-btn:active:not(:disabled){transform:translateY(0);}
.jpl-btn:disabled{opacity:.6; cursor:not-allowed;}
.jpl-btn-ghost{
  height:auto; padding:13px 16px; margin-top:6px;
  background:none; box-shadow:none; color:var(--jpl-muted);
  font-size:14.5px; font-weight:500;
}
.jpl-btn-ghost:hover:not(:disabled){
  transform:none; filter:none; box-shadow:none; color:var(--jpl-navy);
}

.jpl-msg{margin-top:18px; font-size:14px; line-height:1.55; text-align:center;}
.jpl-msg:empty{display:none;}
.jpl-msg.err{color:#B3261E;}
.jpl-msg.ok{color:#0F7B4F;}

/* `.msg` is styled too, and that is not belt-and-braces — it is required.
   admin-auth.js and super-admin-auth.js write `msg.className = 'msg error'`,
   which REPLACES the class list, so any jpl- class put on those elements in the
   markup is gone the first time a login fails. */
.jpl .msg{margin-top:18px; font-size:14px; line-height:1.55; text-align:center; color:var(--jpl-muted);}
.jpl .msg:empty{display:none;}
.jpl .msg.error{color:#B3261E;}
.jpl .msg.success{color:#0F7B4F;}

.jpl-or{
  display:flex; align-items:center; gap:18px; margin:clamp(13px,2.4vh,28px) 0 clamp(11px,1.9vh,22px);
  font-size:13.5px; font-weight:500; color:#94A3B8;
}
.jpl-or::before, .jpl-or::after{content:''; flex:1; height:1px; background:var(--jpl-line);}

/* ----------------------------------------------------------------- support */
.jpl-support{
  display:flex; align-items:center; gap:16px;
  padding:clamp(13px,2.2vh,20px) 22px; border-radius:14px;
  background:#FBFCFE; border:1px solid #EDF1F6;
}
.jpl-support-ico{
  width:44px; height:44px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#FDF6E7; color:var(--jpl-gold-dk);
}
.jpl-support-ico svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7;}
.jpl-support-txt{flex:1; min-width:0;}
.jpl-support-txt b{display:block; font-size:15px; font-weight:600; color:var(--jpl-navy);}
.jpl-support-txt span{font-size:13.5px; color:var(--jpl-muted);}
.jpl-support a{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:14.5px; font-weight:500; color:#2563EB;
}
.jpl-support a:hover{color:var(--jpl-gold-dk);}
.jpl-support a svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2;}

/* Sits on the photograph, under the card — not inside it. */
.jpl-foot{
  margin-top:clamp(12px,1.9vh,22px); text-align:center; font-size:13.5px;
  color:rgba(255,255,255,0.82); line-height:1.7;
  text-shadow:0 1px 10px rgba(4,18,35,0.55);
}
.jpl-foot a{font-weight:500; color:rgba(255,255,255,0.92);}
.jpl-foot a:hover{color:#fff; text-decoration:underline;}

/* ------------------------------------------------------------------ steps
   The stepper markup stays in the DOM because admin-auth.js and
   super-admin-auth.js drive it (`#…AuthStepper .auth-step-dot`, toggling
   `active`/`done`). Hidden rather than removed: deleting it would mean editing
   authentication JS, which the brief forbids. */
.jpl .auth-stepper{display:none;}
.jpl .auth-step{display:none;}
.jpl .auth-step.active{display:block;}

/* Success state — the tick replaces the avatar, inside the same card. */
.jpl-avatar.is-done{background:#ECFDF3; border-color:#BBF7D0;}
.jpl-avatar.is-done svg{stroke:#0F7B4F;}

/* -------------------------------------------------------------- responsive */
/* THE WIDTH QUERIES MUST STAY CLAMPED TOO, or they cancel the height work.
   These re-declare the very properties compressed above, and a media query that
   matches wins on source order — so plain `padding:38px` here would restore the
   full height on every window under 1400px wide and undo the fit at, say,
   1366×768. Each keeps its own narrower maximum and compresses on the same vh
   ramp, so the two axes compose instead of fighting. */
@media (max-width:1400px){
  .jpl-card{padding:clamp(26px,4.2vh,38px) 40px clamp(24px,3.9vh,34px);}
  .jpl-title{font-size:clamp(25px,3.6vh,30px);}
  .jpl-avatar{
    width:clamp(50px,7.6vh,72px); height:clamp(50px,7.6vh,72px);
    margin-bottom:clamp(11px,2.1vh,20px);
  }
  .jpl-side-inner{max-width:560px;}
}
@media (max-width:1180px){
  .jpl-art{flex-basis:52%; padding:30px 30px 26px;}
  .jpl-side{flex-basis:48%; padding:clamp(14px,2.7vh,26px) 28px clamp(11px,2vh,22px);}
  .jpl-logo{height:86px;}
  .jpl-service{padding:14px 15px; min-width:80px; font-size:11.5px;}
  .jpl-card{padding:clamp(22px,4.2vh,32px) 32px clamp(21px,3.9vh,30px);}
  .jpl-field input{height:clamp(44px,5.9vh,52px);}
  .jpl-btn{height:clamp(48px,6.2vh,56px); font-size:17px;}
}
/* ======================================================== stacked / touch
   THE BREAKPOINT IS NOT WIDTH-ALONE, AND THAT MATTERS.
   `max-width:900px` misses phone landscape: an iPhone 14 Pro Max on its side is
   932×430, so it cleared the 900px bar and got the two-column DESKTOP layout in
   a 430px-tall window — 286px of overflow with the card's bottom 203px below
   the fold. The height term catches every phone landscape (844×390, 932×430,
   926×428) while `max-width:1200px` keeps a merely short desktop window on the
   side-by-side design it is wide enough for. */
@media (max-width:900px), (max-height:560px) and (max-width:1200px){
  /* `svh` = the viewport with mobile browser chrome SHOWN, so the shell is
     sized for the worst case and nothing hides behind Safari's toolbar. Chosen
     over `dvh`, which changes as that toolbar retracts and would reflow the
     card mid-scroll. Browsers without `svh` ignore this and keep the 100vh
     above — a free fallback. */
  .jpl{flex-direction:column; overflow:auto; min-height:100svh;}
  .jpl-art{flex:none; min-height:300px; padding:22px 22px 24px;}
  .jpl-logo{height:74px;}
  .jpl-welcome{font-size:29px;}
  .jpl-rule{margin:14px 0 12px;}
  .jpl-services{display:none;}
  .jpl-trust{display:none;}
  .jpl-side{flex:1 1 auto; padding:24px 20px 34px;}
  .jpl-side-inner{max-width:520px;}

  /* EVERY `vh` CLAMP IS RETIRED HERE, DELIBERATELY. Those exist so the desktop
     card fits one screen; stacked, the page scrolls by design, so compressing
     against viewport height only cramps a card the reader will scroll anyway —
     and worst on the small phones that can least afford it. Fixed, comfortable
     sizes instead. */
  .jpl-card{padding:28px 24px 26px;}
  .jpl-avatar{width:66px; height:66px; margin-bottom:16px;}
  .jpl-avatar svg{width:30px; height:30px;}
  .jpl-title{font-size:27px;}
  .jpl-div{margin:18px 0 20px;}
  .jpl-field{margin-bottom:16px;}
  .jpl-field > label{margin-bottom:8px;}
  /* 16px IS A FUNCTIONAL THRESHOLD, NOT A TASTE CALL: iOS Safari zooms the
     whole page when a focused input is under 16px, and the reader has to pinch
     back out to see the form again. It was 15px. */
  .jpl-field input{height:52px; font-size:16px;}
  .jpl-row{margin:6px 0 20px;}
  .jpl-btn{height:54px;}
  .jpl-or{margin:20px 0 16px;}
  .jpl-support{padding:16px;}
  .jpl-foot{margin-top:16px;}
}

/* Phone landscape has width to spare and almost no height, so the photo band
   is what should yield — not the form. */
@media (max-height:560px) and (min-width:560px){
  .jpl-art{min-height:170px; padding:16px 22px 18px;}
  .jpl-logo{height:60px;}
  .jpl-welcome{font-size:25px;}
}

/* The support row is icon + text + a `white-space:nowrap` link. Below ~560px
   the link's un-shrinkable width starves the flexible text column: it measured
   0px wide at 320px, which is what turned "We're here to assist you" into a
   four-line sliver 160px tall. Giving the link its own full-width row frees the
   text and turns the link into a proper touch target at the same time. */
@media (max-width:560px){
  .jpl-support{flex-wrap:wrap; gap:12px 14px;}
  .jpl-support-txt{flex:1 1 140px;}
  .jpl-support a{
    flex:1 0 100%; justify-content:center;
    padding:11px 14px; border-radius:10px;
    background:#F1F5F9; border:1px solid #E2E8F0;
  }
}

@media (max-width:420px){
  .jpl-art{min-height:230px; padding:16px 16px 18px;}
  .jpl-logo{height:60px;}
  .jpl-welcome{font-size:25px;}
  .jpl-card{padding:24px 18px 22px; border-radius:20px;}
  .jpl-title{font-size:25px;}
  .jpl-sub{font-size:14px;}
  .jpl-avatar{width:62px; height:62px;}
  .jpl-side{padding:18px 13px 28px;}
  .jpl-row{gap:10px;}
}
@media (prefers-reduced-motion:reduce){
  .jpl-btn{transition:none;}
  .jpl-btn:hover:not(:disabled){transform:none;}
}