/* ==========================================================================
   Life Insurance IQ — Auth surface ("Warm Slab")
   --------------------------------------------------------------------------
   Loaded ONLY by App\Modules\Auth\Views\layout (login, forgot, reset).

   Two panels, firmly divided. The left is the coloured slab: the reference's
   yellow-falling-to-cream ground, carrying the artwork and the promise. The
   right is a plain white sheet carrying nothing but the form. The seam is the
   one flourish — the white sheet has a rounded leading edge and lies *over*
   the slab, so the division reads as two materials rather than two fills.

   Two hard rules:
     1. The page never scrolls. The shell is exactly one viewport tall.
     2. The artwork is the largest thing that still honours rule 1, so it is
        sized by a height ladder rather than a fixed scale.

   Everything is namespaced .iqa-. Overrides of shared .iq- primitives are
   scoped under .iqa-shell so nothing leaks into the app.
   ========================================================================== */

.iqa-shell {
  --iqa-ink:        #171508;
  --iqa-ink-soft:   #413B26;

  --iqa-brand:      #FDDF1A;
  --iqa-brand-deep: #F0C200;
  --iqa-peach:      #FFE3B4;
  --iqa-peach-deep: #F9B84D;
  --iqa-amber:      #C96F12;

  --iqa-paper:      #FFFFFF;
  --iqa-line:       #E8E3D2;
  --iqa-field:      #FCFBF6;
  --iqa-muted:      #6E6855;

  /* Warm shadows. A neutral gray shadow on a yellow ground reads as dirt. */
  --iqa-float:   0 30px 56px -20px rgba(96,72,0,.36), 0 8px 16px -8px rgba(96,72,0,.14);
  --iqa-float-2: 0 16px 32px -14px rgba(96,72,0,.26), 0 3px 8px -3px rgba(96,72,0,.10);
  --iqa-pop:     0 12px 24px -8px rgba(40,30,0,.45);

  --iqa-r-card: 34px;
  --iqa-r-tile: 25px;
  --iqa-r-fld:  15px;
  --iqa-seam:   44px;

  /* Exactly one viewport. dvh so mobile browser chrome is accounted for. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;

  display: grid;
  grid-template-columns: 1.1fr .9fr;
  font-family: var(--font-ui);
  background: var(--iqa-paper);
}

/* ==========================================================================
   1. The slab (left) — colour, artwork, promise
   ========================================================================== */

.iqa-stage {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: clamp(1.4rem, 3.2vh, 2.75rem) clamp(1.5rem, 3vw, 3rem);
  display: flex;
  flex-direction: column;
  min-height: 0;

  /* The reference ground: saturated overhead, falling to cream. */
  background:
    radial-gradient(62% 46% at 84% 4%, rgba(255,255,255,.5) 0%, transparent 72%),
    linear-gradient(166deg,
      #FFD60A  0%,
      #FFE04A 18%,
      #FFEA86 36%,
      #FFF3BE 56%,
      #FFF9DD 76%,
      #FFFCEC 100%);
}

/* Grain keeps a large flat gradient from banding. */
.iqa-grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
}

/* A white bloom behind the stack: on a yellow ground the yellow cards need
   something lighter behind them or they sink into it. */
.iqa-stage::before {
  content: '';
  position: absolute;
  width: 46rem;
  height: 46rem;
  left: 48%;
  top: 48%;
  translate: -50% -50%;
  background: radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(255,255,255,.36) 46%, transparent 72%);
  pointer-events: none;
}

/* Lift real content above the bloom and the grain. The grain is excluded by
   name: it is absolutely positioned, and a blanket `> *` would reset it into
   the flex flow, where a 100%-sized SVG shoves everything else down. */
.iqa-stage > :not(.iqa-grain) { position: relative; z-index: 1; }

/* -------- brand lockup -------- */

.iqa-brandmark {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--iqa-ink);
  flex: none;
  align-self: flex-start;
}
.iqa-brandmark:hover { text-decoration: none; }

.iqa-brandmark-word {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 40;
  font-size: clamp(.95rem, 1.1vw, 1.12rem);
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--iqa-ink);
}
.iqa-brandmark-word em {
  font-style: normal;
  /* Inverted: a yellow chip on a yellow ground would vanish. */
  background: var(--iqa-ink);
  color: var(--iqa-brand);
  border-radius: 6px;
  padding: 0 .28em;
  margin-left: .12em;
  box-decoration-break: clone;
}

/* -------- the scene -------- */

.iqa-scene {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: clamp(.4rem, 1.4vh, 1.5rem) 0;
}

.iqa-stack {
  position: relative;
  width: 510px;
  height: 570px;
  /* `zoom`, not `transform: scale`: scale is paint-only, so the stack would
     keep reserving 570px and push the headline past the fold. zoom shrinks
     the layout box, which is what keeps this page inside one screen. */
  zoom: var(--iqa-zoom, 1);
}

/* Lead cards — the reference's product tiles, carrying a real record. */
.iqa-lead {
  position: absolute;
  border-radius: var(--iqa-r-card);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--iqa-float);
  rotate: var(--rot);
  will-change: transform, opacity;
}

.iqa-lead--a {
  left: 16px; top: 20px;
  width: 300px; height: 354px;
  --rot: -5deg;
  z-index: 3;
  background: linear-gradient(152deg, #FFF6B8 0%, var(--iqa-brand) 46%, var(--iqa-brand-deep) 100%);
}
.iqa-lead--b {
  left: 196px; top: 200px;
  width: 288px; height: 340px;
  --rot: 6deg;
  z-index: 2;
  background: linear-gradient(152deg, #FFF0DA 0%, var(--iqa-peach) 34%, var(--iqa-peach-deep) 100%);
}

/* The "photo" panel: frosted inset holding the illustration. */
.iqa-lead-tile {
  border-radius: var(--iqa-r-tile);
  background: linear-gradient(160deg, rgba(255,255,255,.84), rgba(255,255,255,.46));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  display: grid;
  place-items: center;
  padding: .6rem;
  flex: 1;
  min-height: 0;
}
.iqa-lead-tile svg { width: 100%; height: 100%; max-height: 152px; }

.iqa-lead-name {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 32;
  font-size: 1.26rem;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.016em;
  color: var(--iqa-ink);
  margin: .85rem 0 .16rem;
}
.iqa-lead-meta {
  font-size: .82rem;
  font-weight: 500;
  color: rgba(23,21,8,.64);
}

.iqa-lead-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .7rem;
  margin-top: .85rem;
}
.iqa-lead-score-k {
  display: block;
  font-family: var(--font-mono);
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: rgba(23,21,8,.58);
  margin-bottom: .1rem;
}
.iqa-lead-score-v {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 40, 'opsz' 36;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--iqa-ink);
}
.iqa-lead-score-v sub {
  font-family: var(--font-ui);
  font-size: .64rem;
  font-weight: 600;
  bottom: 0;
  opacity: .5;
}

/* Ink pill — the reference's black Add-To-Cart, doing our job. */
.iqa-pill {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  background: var(--iqa-ink);
  color: #fff;
  border-radius: 999px;
  padding: .62rem 1rem;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--iqa-pop);
}
.iqa-pill svg { width: 12px; height: 12px; flex: none; }

/* Floating circular badges that break the card bounds. */
.iqa-badge {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  z-index: 5;
  box-shadow: var(--iqa-pop);
}
.iqa-badge--shield {
  width: 66px; height: 66px;
  left: 359px; top: 95px;
  background: var(--iqa-ink);
}
/* White rather than brand yellow: a yellow disc on a yellow ground would
   read as a hole, and it echoes the white chip across the composition. */
.iqa-badge--spark {
  width: 58px; height: 58px;
  left: 11px; top: 401px;
  background: var(--iqa-paper);
}
.iqa-badge svg { width: 28px; height: 28px; }
.iqa-badge--spark svg { width: 25px; height: 25px; }

/* Small floating chip, top-right — the reference's category pills. */
.iqa-chip {
  position: absolute;
  left: 292px; top: 0;
  z-index: 4;
  rotate: 4deg;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--iqa-paper);
  border-radius: 999px;
  padding: .52rem .9rem .52rem .56rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--iqa-ink);
  white-space: nowrap;
  box-shadow: var(--iqa-float-2);
}
.iqa-chip-dot {
  width: 23px; height: 23px;
  border-radius: 50%;
  background: var(--iqa-brand);
  display: grid; place-items: center;
  flex: none;
}
.iqa-chip-dot svg { width: 12px; height: 12px; }

/* Hand-drawn connectors, laid over the negative space. */
.iqa-arrows {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}

/* -------- headline -------- */

.iqa-pitch { max-width: 27rem; flex: none; }

.iqa-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 500;
  color: var(--iqa-amber);
  margin-bottom: clamp(.4rem, 1vh, .9rem);
}
.iqa-eyebrow::before {
  content: '';
  width: 22px; height: 2px;
  background: var(--iqa-amber);
  border-radius: 2px;
}

/* Weight contrast in one line — the reference's "Your Favorite **Treats**". */
.iqa-headline {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 110;
  font-size: clamp(1.65rem, 1.9vw + .55vh, 2.8rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.028em;
  color: var(--iqa-ink);
  margin: 0 0 clamp(.4rem, .9vh, .8rem);
}
/* Brand swipe under the emphasised words. Painted as the element's own
   background so it sits behind the glyphs without a stacking-context fight. */
.iqa-headline strong {
  font-weight: 700;
  background: linear-gradient(var(--iqa-brand), var(--iqa-brand)) no-repeat 0 86% / 100% .28em;
  /* Keeps the phrase on one line, so the swipe is a single stroke rather
     than two orphaned fragments. */
  white-space: nowrap;
}

.iqa-sub {
  font-size: clamp(.8rem, .9vw, .88rem);
  line-height: 1.6;
  color: var(--iqa-ink-soft);
  margin: 0;
  max-width: 38ch;
}

/* ==========================================================================
   2. The sheet (right) — nothing but the form
   ========================================================================== */

.iqa-panel {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vh, 2.5rem) clamp(1.5rem, 3.4vw, 3.5rem);
  min-height: 0;
  overflow: hidden;

  background: var(--iqa-paper);
  /* The seam: the sheet lies over the slab with a rounded leading edge, so
     the partition reads as two materials meeting, not two fills abutting. */
  border-radius: var(--iqa-seam) 0 0 var(--iqa-seam);
  margin-left: calc(var(--iqa-seam) * -1);
  box-shadow: -34px 0 64px -32px rgba(96,72,0,.3);
}

.iqa-form { width: 100%; max-width: 376px; }

.iqa-form-mark { display: none; margin-bottom: 1.4rem; }

.iqa-kicker {
  font-family: var(--font-mono);
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 500;
  color: var(--iqa-amber);
  margin-bottom: .5rem;
}
.iqa-title {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 55, 'WONK' 1, 'opsz' 72;
  font-size: clamp(1.6rem, 1.2vw + .8vh, 2.1rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--iqa-ink);
  margin: 0 0 .45rem;
}
.iqa-lede {
  font-size: .85rem;
  line-height: 1.55;
  color: var(--iqa-muted);
  margin: 0 0 clamp(1rem, 2.4vh, 1.8rem);
}

/* -------- fields -------- */

.iqa-shell .iq-field { margin-bottom: clamp(.7rem, 1.5vh, 1.05rem); }

.iqa-shell .iq-field-label {
  display: block;
  margin-bottom: .4rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--iqa-ink-soft);
  min-height: 0;
}

.iqa-shell .iq-input {
  width: 100%;
  height: clamp(46px, 5.6vh, 52px);
  padding: 0 1rem;
  border: 1.5px solid var(--iqa-line);
  border-radius: var(--iqa-r-fld);
  background: var(--iqa-field);
  font-family: var(--font-ui);
  font-size: .9rem;
  font-weight: 500;
  color: var(--iqa-ink);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.iqa-shell .iq-input::placeholder { color: #A8A396; font-weight: 400; }
.iqa-shell .iq-input:hover:not(:focus) { border-color: #D8D3C2; }
.iqa-shell .iq-input:focus {
  outline: none;
  background: var(--iqa-paper);
  border-color: var(--iqa-ink);
  box-shadow: 0 0 0 4px rgba(253,223,26,.46);
}

.iqa-hint {
  margin: .4rem 0 0;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--iqa-muted);
}

/* Password field with a reveal control. */
.iqa-pw { position: relative; }
.iqa-pw .iq-input { padding-right: 3rem; }
.iqa-pw-eye {
  position: absolute;
  right: .4rem;
  top: 50%;
  translate: 0 -50%;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  color: var(--iqa-muted);
  transition: color .15s ease, background .15s ease;
}
.iqa-pw-eye:hover { color: var(--iqa-ink); background: #F3F1EA; }
.iqa-pw-eye:focus-visible { outline: 2px solid var(--iqa-ink); outline-offset: 1px; }
.iqa-pw-eye svg { width: 17px; height: 17px; }

/* -------- remember / forgot row -------- */

.iqa-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: .2rem 0 clamp(.9rem, 2.2vh, 1.5rem);
}

.iqa-check {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--iqa-ink-soft);
  cursor: pointer;
  user-select: none;
}
.iqa-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.iqa-check-box {
  width: 19px; height: 19px;
  border: 1.5px solid #D8D3C2;
  border-radius: 6px;
  background: var(--iqa-field);
  display: grid;
  place-items: center;
  flex: none;
  transition: background .16s ease, border-color .16s ease;
}
.iqa-check-box svg {
  width: 11px; height: 11px;
  opacity: 0;
  scale: .5;
  transition: opacity .16s ease, scale .16s cubic-bezier(.34,1.56,.64,1);
}
.iqa-check input:checked + .iqa-check-box {
  background: var(--iqa-brand);
  border-color: var(--iqa-brand-deep);
}
.iqa-check input:checked + .iqa-check-box svg { opacity: 1; scale: 1; }
.iqa-check input:focus-visible + .iqa-check-box { box-shadow: 0 0 0 3px rgba(253,223,26,.55); }

.iqa-link {
  font-size: .8rem;
  font-weight: 600;
  color: var(--iqa-ink);
  text-decoration: none;
  background-image: linear-gradient(var(--iqa-brand), var(--iqa-brand));
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .2s ease;
}
.iqa-link:hover { text-decoration: none; color: var(--iqa-ink); background-size: 100% 42%; }

/* -------- submit -------- */

.iqa-submit {
  width: 100%;
  height: clamp(48px, 5.8vh, 54px);
  border: 0;
  border-radius: 999px;
  background: var(--iqa-ink);
  color: #fff;
  font-family: var(--font-ui);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  box-shadow: 0 12px 24px -10px rgba(40,30,0,.55);
  transition: transform .2s cubic-bezier(.34,1.3,.64,1), box-shadow .2s ease, background .2s ease;
}
.iqa-submit:hover {
  background: #000;
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -12px rgba(40,30,0,.62);
}
.iqa-submit:active { transform: translateY(0); }
.iqa-submit:focus-visible { outline: 2px solid var(--iqa-ink); outline-offset: 3px; }
.iqa-submit svg { width: 15px; height: 15px; transition: translate .22s cubic-bezier(.34,1.3,.64,1); }
.iqa-submit:hover svg { translate: 3px 0; }

.iqa-note {
  margin: clamp(.8rem, 1.8vh, 1.4rem) 0 0;
  text-align: center;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--iqa-muted);
}

/* -------- alerts -------- */

.iqa-alert {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  border-radius: 14px;
  padding: .75rem .9rem;
  margin-bottom: 1.1rem;
  font-size: .8rem;
  line-height: 1.5;
  font-weight: 500;
}
.iqa-alert svg { width: 16px; height: 16px; flex: none; margin-top: .08rem; }
.iqa-alert--bad  { background: #FDECEA; color: #8E2B20; }
.iqa-alert--good { background: #E6F3EB; color: #1F5635; }

/* ==========================================================================
   3. Entrance — one orchestrated load, staggered
   ========================================================================== */

@keyframes iqa-rise {
  from { opacity: 0; transform: translateY(28px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes iqa-pop  { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
@keyframes iqa-draw { to { stroke-dashoffset: 0; } }
@keyframes iqa-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes iqa-drift { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }

@media (prefers-reduced-motion: no-preference) {
  /* Rotation stays on the element and the animation drives transform, so the
     two never fight over the same property. */
  .iqa-lead {
    opacity: 0;
    animation: iqa-rise .72s cubic-bezier(.22,1,.36,1) forwards,
               iqa-drift 7s ease-in-out infinite;
  }
  .iqa-lead--a { animation-delay: .1s, 1.1s; }
  .iqa-lead--b { animation-delay: .22s, 1.6s; }

  .iqa-badge, .iqa-chip { opacity: 0; animation: iqa-pop .5s cubic-bezier(.34,1.56,.64,1) forwards; }
  .iqa-badge--shield { animation-delay: .62s; }
  .iqa-badge--spark  { animation-delay: .74s; }
  .iqa-chip          { animation-delay: .5s; }

  .iqa-arrow {
    stroke-dasharray: var(--len, 160);
    stroke-dashoffset: var(--len, 160);
    animation: iqa-draw .7s cubic-bezier(.65,0,.35,1) forwards;
  }
  .iqa-arrow--1 { animation-delay: .46s; }
  .iqa-arrow--2 { animation-delay: .6s; }
  .iqa-arrowhead { opacity: 0; animation: iqa-fade .3s ease forwards; }
  .iqa-arrowhead--1 { animation-delay: 1.1s; }
  .iqa-arrowhead--2 { animation-delay: 1.24s; }

  .iqa-reveal { opacity: 0; animation: iqa-fade .62s cubic-bezier(.22,1,.36,1) forwards; }
  .iqa-reveal--1 { animation-delay: .06s; }
  .iqa-reveal--2 { animation-delay: .16s; }
  .iqa-reveal--3 { animation-delay: .26s; }
  .iqa-reveal--4 { animation-delay: .36s; }
  .iqa-reveal--5 { animation-delay: .46s; }
  .iqa-reveal--6 { animation-delay: .56s; }
}

@media (prefers-reduced-motion: reduce) {
  .iqa-arrow { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* ==========================================================================
   4. Fitting one viewport
   --------------------------------------------------------------------------
   The artwork is the only thing allowed to give way, so it is sized by a
   ladder. Height drives it: the stack is 570px tall and the copy around it
   needs roughly 0.1h + 214px, so the usable room is about 0.9h - 214.
   The ladder below tracks that, with headroom.
   ========================================================================== */

/* Narrow-but-tall windows: constrained by column width, not height. */
@media (max-width: 1280px) { .iqa-stack { --iqa-zoom: .92; } }
@media (max-width: 1140px) { .iqa-stack { --iqa-zoom: .82; } }
@media (max-width: 1000px) { .iqa-stack { --iqa-zoom: .72; } }

/* Height ladder. After the width rules so the tighter wins, and floored at
   min-width so the single-column sizing below is never overridden. */
@media (min-width: 881px) and (max-height: 900px) { .iqa-stack { --iqa-zoom: .92; } }
@media (min-width: 881px) and (max-height: 840px) { .iqa-stack { --iqa-zoom: .84; } }
@media (min-width: 881px) and (max-height: 780px) { .iqa-stack { --iqa-zoom: .76; } }
@media (min-width: 881px) and (max-height: 720px) { .iqa-stack { --iqa-zoom: .68; } }
@media (min-width: 881px) and (max-height: 660px) { .iqa-stack { --iqa-zoom: .60; } }
@media (min-width: 881px) and (max-height: 600px) { .iqa-stack { --iqa-zoom: .52; } }
@media (min-width: 881px) and (max-height: 540px) {
  .iqa-stack { --iqa-zoom: .44; }
  .iqa-sub { display: none; }
}

/* -------- single column -------- */

@media (max-width: 880px) {
  .iqa-shell {
    grid-template-columns: 1fr;
    /* Banner takes what it needs; the sheet takes the rest. */
    grid-template-rows: auto 1fr;
  }

  .iqa-stage {
    height: clamp(180px, 30vh, 290px);
    padding: clamp(.85rem, 2vh, 1.4rem) 1.35rem 0;
  }
  .iqa-stage::before { width: 28rem; height: 28rem; top: 42%; }

  .iqa-scene {
    padding: 0;
    align-items: start;
    justify-items: center;
    overflow: hidden;
    /* Fade the artwork into the crop so the band reads as composed rather
       than as a card that ran out of room. */
    -webkit-mask-image: linear-gradient(to bottom, #000 64%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 64%, transparent 100%);
  }
  .iqa-stack { --iqa-zoom: .58; }
  .iqa-pitch { display: none; }

  /* The seam turns horizontal: the sheet slides up over the banner. */
  .iqa-panel {
    border-radius: var(--iqa-seam) var(--iqa-seam) 0 0;
    margin-left: 0;
    margin-top: calc(var(--iqa-seam) * -1);
    box-shadow: 0 -30px 60px -34px rgba(96,72,0,.3);
    padding: clamp(1.4rem, 3vh, 2.2rem) 1.5rem clamp(1rem, 2.5vh, 1.75rem);
    align-items: center;
  }
  .iqa-form { max-width: 420px; }
}

@media (max-width: 560px) {
  .iqa-shell { --iqa-seam: 34px; }
  .iqa-stack { --iqa-zoom: .5; }
  .iqa-panel { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* Too short for a banner: drop it and let the form own the screen. The
   lockup moves into the sheet so the page still identifies itself. */
@media (max-width: 880px) and (max-height: 700px) {
  .iqa-stage { display: none; }
  .iqa-shell { grid-template-rows: 1fr; }
  .iqa-panel { margin-top: 0; border-radius: 0; box-shadow: none; }
  .iqa-form-mark { display: block; }
}

/* Last resort. Below this there is no honest way to fit a two-field form on
   screen, and a clipped login is worse than a scrolled one. */
@media (max-height: 460px) {
  .iqa-shell { height: auto; min-height: 100dvh; overflow: visible; }
  .iqa-panel { overflow: visible; }
}