/* Colours and type sizes here are measured off the reference render
   (pemo-business-account, 3204x4892): the mock card is 70.4% of the panel
   width there, so everything inside it is expressed as a fraction of that
   width and rebuilt in em against --pemo-mock-unit.
   Spacing deliberately does NOT match the reference — its density read as
   cramped at panel size, so the paddings, row heights and the partner lockup
   are opened up from it. Type sizes are still the reference's. */
   :root {
    --pemo-color-plate-photo: #eeedf4;
    --pemo-color-plate-gradient: linear-gradient(157deg, #f4f4f8 0%, #efeef5 32%, #eae7f0 66%, #e4dfe8 100%);
    --pemo-color-ink: #222529;
    --pemo-color-ink-secondary: #62666a;
    --pemo-color-ink-muted: #8f8aa9;
    --pemo-color-surface: #ffffff;
    --pemo-color-surface-subtle: #f3f6fc;
    --pemo-color-hairline: #dbdbe8;
    --pemo-color-brand: #00a4d7;
    --pemo-color-credit: #339970;
    --pemo-color-tint-deposit: #d7eff4;
    --pemo-color-icon-deposit: #008492;
    --pemo-color-tint-vendor: #f7ead9;
    --pemo-color-icon-vendor: #995c02;
    --pemo-color-tint-card: #e2eafd;
    --pemo-color-icon-card: #003bd3;
  
    --pemo-font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  
    --pemo-weight-regular: 400;
    --pemo-weight-medium: 500;
    --pemo-weight-semibold: 600;
  
    --pemo-space-0: 0px;
    --pemo-space-3: 12px;
    --pemo-space-10: 40px;
  
    --pemo-shadow-md: 0px 5px 20px 5px rgba(0, 0, 0, .12);
  
    /* Fluid mock sizing, same trick as the signup card: the whole composition is
       authored against ONE length, --pemo-mock-unit, set as the font-size on
       .login-panel__mock, and every measurement below is em against it. The
       headline and subhead read it through calc() so the copy scales with the
       card exactly as it does in the reference.
  
         10px    floor   = 285x284; below this the amounts stop being legible,
                           so a panel shorter than ~410px clips instead
         2.61vw          = holds the mock at ~74% of the panel's width
         2.15vh          = the vertical budget. The whole column is ~40 units
                           tall (card 27.9 + copy 7.6 + gap 4.7) plus ~50px of
                           fixed padding and hairlines, so (H-50)/40 is the unit
                           that just fits; 2.15vh sits under that with margin.
                           Deriving it from the budget rather than from a share
                           of the height keeps a short, wide panel from pinning
                           the mock to its floor.
         22px    ceiling = 627x624, where it stops growing
  
       min() takes whichever of width or height is the binding constraint.
       vw/vh here are this iframe's own box, not the host page's. */
    --pemo-mock-unit: clamp(10px, min(2.61vw, 2.15vh), 22px);
  
    /* Copy. Ratios to the mock unit, measured off the reference: the headline is
       190.5 reference px against a 2256px card, i.e. 2.28 of the unit. */
    --pemo-text-headline: calc(var(--pemo-mock-unit) * 2.28);
    --pemo-text-subhead: calc(var(--pemo-mock-unit) * 1.16);
    /* Reference gap from subhead baseline to card top is 4.73 units; the vh cap
       lets a short panel close it up rather than clipping. */
    --pemo-space-copy-mock: min(calc(var(--pemo-mock-unit) * 4.73), 7vh);
  
    /* em against --pemo-mock-unit — every use site inherits that font-size from
       .login-panel__mock, so these stay in proportion. */
    --pemo-size-mock-w: 28.5em;               /* 456 at unit 16 */
    --pemo-size-mock-radius: .8em;
    --pemo-size-mock-pad: 1.05em;
    --pemo-size-mock-header-pad: 1em;
    --pemo-size-mock-badge: 2.4em;
    --pemo-size-mock-badge-radius: .7em;
    /* calc, not em: this token is consumed inside the pill, whose own font-size
       is smaller than the unit — an em here would resolve against that instead
       and render the lockup at a third of its intended size. */
    --pemo-size-mock-logo-h: calc(var(--pemo-mock-unit) * 1.45);
    --pemo-size-mock-row-icon: 1.95em;
    --pemo-size-mock-row-pad: .85em;
    --pemo-size-mock-activity-pad: .75em;
    --pemo-size-mock-action-h: 2.25em;
    --pemo-size-mock-action-radius: .45em;
    --pemo-text-mock-title: .99em;
    --pemo-text-mock-amount: 2.07em;
    --pemo-text-mock-label: .68em;
    --pemo-text-mock-activity: .72em;
    --pemo-text-mock-row: .73em;
    --pemo-text-mock-row-amount: .77em;
    --pemo-text-mock-powered: .68em;
    --pemo-text-mock-action: .73em;
  }
  
  * { box-sizing: border-box; }
  
  html {
    height: 100%;
    margin: 0;
    background: var(--pemo-color-plate-photo);
  }
  
  body {
    height: 100%;
    margin: 0;
    background: var(--pemo-color-plate-photo);
    background-image: var(--pemo-color-plate-gradient);
    font-family: var(--pemo-font-sans);
  }
  
  .login-panel {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
  }
  
  .login-panel__content {
    display: flex;
    min-height: var(--pemo-space-0);
    flex: 1 1 0%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--pemo-space-copy-mock);
    /* Scales with panel height: the mock bottoms out at its floor, so on a short
       panel the frame has to give way, or the column overflows the hidden
       overflow and clips the headline. */
    padding: clamp(var(--pemo-space-3), 4vh, var(--pemo-space-10));
  }
  
  /* ---------- copy ---------- */
  
  .login-panel__copy {
    text-align: center;
  }
  
  .login-panel__headline {
    font-size: var(--pemo-text-headline);
    line-height: 1.18;
    font-weight: var(--pemo-weight-semibold);
    letter-spacing: -.2px;
    color: var(--pemo-color-ink);
    /* em against the headline's own size — 14.2 holds the reference's two-line
       break ("…from a single" / "Pemo Business Account"), which needs 13.3. */
    max-width: 14.2em;
    margin: 0 auto;
  }
  
  .login-panel__subhead {
    margin: .55em auto 0;
    font-size: var(--pemo-text-subhead);
    line-height: 1.35;
    font-weight: var(--pemo-weight-regular);
    letter-spacing: .1px;
    color: var(--pemo-color-ink-secondary);
    max-width: 20em;
  }
  
  /* ---------- account mock ---------- */
  
  .login-panel__mock {
    /* Not for text — this is the mock's base unit, which every em above reads. */
    font-size: var(--pemo-mock-unit);
    width: var(--pemo-size-mock-w);
    max-width: 100%;
    flex-shrink: 0;
    border-radius: var(--pemo-size-mock-radius);
    background: var(--pemo-color-surface);
    box-shadow: var(--pemo-shadow-md);
    overflow: hidden;
    animation: pemo-mock-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  
  .login-panel__mock-header {
    display: flex;
    align-items: center;
    gap: .85em;
    padding: var(--pemo-size-mock-header-pad) var(--pemo-size-mock-pad);
    background: var(--pemo-color-surface-subtle);
    border-bottom: 1px solid var(--pemo-color-hairline);
  }
  
  .login-panel__mock-badge {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    height: var(--pemo-size-mock-badge);
    width: var(--pemo-size-mock-badge);
    border-radius: var(--pemo-size-mock-badge-radius);
    background: var(--pemo-color-brand);
    color: var(--pemo-color-surface);
  }
  
  .login-panel__mock-badge svg {
    height: 52%;
    width: 52%;
  }
  
  .login-panel__mock-title {
    font-size: var(--pemo-text-mock-title);
    font-weight: var(--pemo-weight-semibold);
    line-height: 1.2;
    letter-spacing: -.1px;
    color: var(--pemo-color-ink);
  }
  
  .login-panel__mock-powered {
    display: flex;
    align-items: center;
    gap: .5em;
    margin-left: auto;
    flex-shrink: 0;
    border: 1px solid var(--pemo-color-hairline);
    border-radius: 999px;
    background: var(--pemo-color-surface);
    padding: calc(var(--pemo-mock-unit) * .3) calc(var(--pemo-mock-unit) * .45);
    font-size: var(--pemo-text-mock-powered);
    font-weight: var(--pemo-weight-medium);
    line-height: 1;
    color: var(--pemo-color-ink-secondary);
    white-space: nowrap;
  }
  
  .login-panel__mock-partner {
    display: block;
    height: var(--pemo-size-mock-logo-h);
    width: auto;
    flex-shrink: 0;
  }
  
  /* ---------- balance ---------- */
  
  .login-panel__mock-balance {
    /* Asymmetric like the reference — label sits lower than the buttons close —
       but opened out from its 1.4/1 to give the balance room to breathe. */
    padding: 1.5em var(--pemo-size-mock-pad) 1.25em;
    border-bottom: 1px solid var(--pemo-color-hairline);
    /* Column gap rather than margins on the children: an em margin on the
       amount would resolve against its own 2.07em type, making the
       label/amount gap twice the amount/buttons one. */
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
  
  .login-panel__mock-label {
    display: block;
    font-size: var(--pemo-text-mock-label);
    font-weight: var(--pemo-weight-medium);
    line-height: 1.2;
    letter-spacing: .2px;
    color: var(--pemo-color-ink-muted);
  }
  
  .login-panel__mock-amount {
    display: flex;
    align-items: center;
    gap: .28em;
    font-size: var(--pemo-text-mock-amount);
    font-weight: var(--pemo-weight-semibold);
    line-height: 1.15;
    letter-spacing: -.5px;
    color: var(--pemo-color-ink);
  }
  
  .login-panel__mock-actions {
    display: flex;
    align-items: center;
    gap: .7em;
  }
  
  /* Spans, not buttons: the host iframe is sandboxed to allow-scripts only, so
     nothing here can navigate or submit. Keeping them unfocusable stops the
     panel handing the user a dead tab stop next to the login form. */
  .login-panel__mock-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45em;
    height: var(--pemo-size-mock-action-h);
    padding: 0 1.1em;
    border-radius: var(--pemo-size-mock-action-radius);
    font-size: var(--pemo-text-mock-action);
    line-height: 1;
    white-space: nowrap;
    user-select: none;
  }
  
  .login-panel__mock-action svg {
    height: 1.15em;
    width: 1.15em;
    flex-shrink: 0;
  }
  
  .login-panel__mock-action--primary {
    background: var(--pemo-color-brand);
    color: var(--pemo-color-surface);
    font-weight: var(--pemo-weight-semibold);
  }
  
  .login-panel__mock-action--secondary {
    background: var(--pemo-color-surface);
    border: 1px solid var(--pemo-color-hairline);
    color: var(--pemo-color-ink);
    font-weight: var(--pemo-weight-medium);
  }
  
  /* ---------- recent activity ---------- */
  
  .login-panel__mock-activity-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pemo-size-mock-pad);
    padding: var(--pemo-size-mock-activity-pad) var(--pemo-size-mock-pad);
    border-bottom: 1px solid var(--pemo-color-hairline);
  }
  
  .login-panel__mock-activity-title {
    font-size: var(--pemo-text-mock-activity);
    font-weight: var(--pemo-weight-semibold);
    line-height: 1.2;
    color: var(--pemo-color-ink);
  }
  
  .login-panel__mock-rows {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .login-panel__mock-row {
    display: flex;
    align-items: center;
    gap: .95em;
    padding: var(--pemo-size-mock-row-pad) var(--pemo-size-mock-pad);
    animation: pemo-mock-row-in 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  
  .login-panel__mock-row + .login-panel__mock-row {
    border-top: 1px solid var(--pemo-color-hairline);
  }
  
  .login-panel__mock-row:nth-child(1) { animation-delay: 420ms; }
  .login-panel__mock-row:nth-child(2) { animation-delay: 540ms; }
  .login-panel__mock-row:nth-child(3) { animation-delay: 660ms; }
  
  .login-panel__mock-row-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    height: var(--pemo-size-mock-row-icon);
    width: var(--pemo-size-mock-row-icon);
    border-radius: 999px;
  }
  
  /* Per-icon, because the reference draws the three at different optical sizes
     (ink of 36% / 48% / 52% of the circle) and each glyph fills its own viewBox
     differently. These land each one on its reference ink size. */
  .login-panel__mock-row-icon svg {
    height: 45%;
    width: 45%;
  }
  
  .login-panel__mock-row-icon--deposit svg,
  .login-panel__mock-row-icon--vendor svg {
    height: 68%;
    width: 68%;
  }
  
  .login-panel__mock-row-icon--card svg {
    height: 61%;
    width: 61%;
  }
  
  .login-panel__mock-row-icon--deposit {
    background: var(--pemo-color-tint-deposit);
    color: var(--pemo-color-icon-deposit);
  }
  
  .login-panel__mock-row-icon--vendor {
    background: var(--pemo-color-tint-vendor);
    color: var(--pemo-color-icon-vendor);
  }
  
  .login-panel__mock-row-icon--card {
    background: var(--pemo-color-tint-card);
    color: var(--pemo-color-icon-card);
  }
  
  .login-panel__mock-row-name {
    font-size: var(--pemo-text-mock-row);
    font-weight: var(--pemo-weight-medium);
    line-height: 1.3;
    color: var(--pemo-color-ink);
  }
  
  .login-panel__mock-row-amount {
    display: inline-flex;
    align-items: center;
    gap: .22em;
    margin-left: auto;
    flex-shrink: 0;
    font-size: var(--pemo-text-mock-row-amount);
    font-weight: var(--pemo-weight-semibold);
    line-height: 1.3;
    white-space: nowrap;
    color: var(--pemo-color-ink);
  }
  
  .login-panel__mock-row-amount--credit {
    color: var(--pemo-color-credit);
  }
  
  /* The AED glyph is a symbol, so it takes its size from the text around it.
     Both axes are set explicitly — the viewBox is square, and width:auto on a
     <use>d symbol resolves to the 300px default rather than to the height. */
  .login-panel__aed {
    height: .92em;
    width: .92em;
    flex-shrink: 0;
  }
  
  .login-panel__icon-defs {
    position: absolute;
    height: 0;
    width: 0;
    overflow: hidden;
  }
  
  @keyframes pemo-mock-rise {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  @keyframes pemo-mock-row-in {
    from { transform: translateY(6px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .login-panel__mock,
    .login-panel__mock-row { animation: none; }
  }