/* ============================================================================
   continON Partner Portal — the entry experience.

   The account chooser (Home/InitialView), the company welcome (Home/Home) and
   the individual account pages (sign in, register, password) are standalone
   pages (Layout = null). They load this file and nothing else, and they are
   drawn in the continON website's light material, the calm page every content
   route on continon.com is set on: Inter, white, ink type, and one line of
   continON teal with a soft dawn of mint rising off it. The one dark thing is
   the arch: a window onto the world of the website's module films.

   Values mirror the website (Web/src/styles.scss light tokens, ui/hero-line)
   so the portal and continon.com read as one product. Teal splits its roles
   the way the website's does: #1bb28a is light (lines, glows, points),
   teal-600 is large accent type, teal-700 carries white type and links.
   Motion is transform and opacity only; micro-interactions run 160–280 ms;
   reduced motion is still.
   ========================================================================= */

/* ------------------------------------------------------------------ font */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../../fonts/inter/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../../fonts/inter/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens
   Contrast on white: ink 18.2:1 · text 16.5 · muted 5.9 · faint 5.1 (4.7 on
   the mist panel) · teal-700 5.1 (white on it 5.1) · teal-600 3.6, so it is
   used only for large type · error 6.6. */
:root {
  --pe-teal: #1bb28a;
  --pe-teal-rgb: 27 178 138;
  --pe-teal-50: #eafaf4;
  --pe-teal-100: #cbf1e3;
  --pe-teal-600: #149a76;
  --pe-teal-700: #0f7d60;
  --pe-teal-700-rgb: 15 125 96;
  --pe-teal-750: #0c6a52;
  --pe-ink-rgb: 12 22 32;

  --pe-bg: #ffffff;
  --pe-navy-50: #eef2f6;
  --pe-ink: #0c1620;
  --pe-text: #14202c;
  --pe-muted: #566677;
  --pe-faint: #626f80;
  --pe-hair: #e4e9ef;
  --pe-hair-strong: #d3dbe4;
  /* A field's edge: 3.6:1 on white, so a field is findable (WCAG 1.4.11), a
     shade calmer than the website's navy-400. */
  --pe-control: #78899a;
  --pe-control-hover: #5b6b7c;
  --pe-focus: var(--pe-teal-600);
  --pe-error: #b42318;
  --pe-error-rgb: 180 35 24;

  /* Elevation on white: a hairline of shadow close in, a long soft one under. */
  --pe-shadow-card: 0 1px 2px rgb(var(--pe-ink-rgb) / .04), 0 18px 40px -20px rgb(var(--pe-ink-rgb) / .16);
  --pe-shadow-lift: 0 2px 6px rgb(var(--pe-ink-rgb) / .05), 0 30px 60px -24px rgb(var(--pe-ink-rgb) / .22);

  --pe-font: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --pe-gutter: clamp(1rem, .5rem + 3vw, 2.5rem);

  --pe-ease: cubic-bezier(.22, .61, .36, 1);
  --pe-ease-out: cubic-bezier(.16, 1, .3, 1);
  --pe-spring: cubic-bezier(.2, .9, .25, 1.15);
  --pe-d1: .16s;
  --pe-d2: .28s;

  color-scheme: light;
}

/* ----------------------------------------------------------------- base */
.pe, .pe *, .pe *::before, .pe *::after { box-sizing: border-box; }
html:has(> body.pe) { background: var(--pe-bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.pe {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--pe-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--pe-text);
  background: var(--pe-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.pe ::selection { background: var(--pe-teal-100); color: var(--pe-ink); }
/* Zero specificity, so every link class below sets its own colour. */
:where(.pe) a { color: inherit; }
.pe :focus { outline: none; }
.pe :focus-visible { outline: 2px solid var(--pe-focus); outline-offset: 3px; }
.pe [hidden] { display: none !important; }
.pe-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ bar */
.pe-bar {
  position: absolute; z-index: 20; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(1.1rem, .8rem + 1vw, 1.75rem) var(--pe-gutter);
}
.pe-brand { display: inline-flex; border-radius: 8px; line-height: 0; }
.pe-brand img { display: block; height: 26px; width: auto; }

/* ------------------------------------------------------------- buttons
   The website's calls to action: a full pill, the filled teal with white
   type, or a quiet outline on frosted white; a lift on a spring. */
.pe-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .74rem 1.4rem;
  border: 1px solid transparent; border-radius: 999px;
  font: 600 .95rem/1 var(--pe-font); letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--pe-d1) var(--pe-ease), border-color var(--pe-d1) var(--pe-ease),
    color var(--pe-d1) var(--pe-ease), box-shadow var(--pe-d2) var(--pe-ease), transform .45s var(--pe-spring);
}
.pe-btn svg { width: 16px; height: 16px; flex: none; transition: transform var(--pe-d2) var(--pe-spring); }
.pe-btn:hover { transform: translateY(-1px); }
.pe-btn:hover svg { transform: translateX(3px); }
.pe-btn:active { transform: translateY(0) scale(.98); transition-duration: .12s; }
.pe-btn-primary {
  background: var(--pe-teal-700); color: #fff;
  box-shadow: 0 12px 26px -14px rgb(var(--pe-teal-700-rgb) / .75), inset 0 1px 0 rgb(255 255 255 / .16);
}
.pe-btn-primary:hover { background: var(--pe-teal-750); box-shadow: 0 16px 32px -14px rgb(var(--pe-teal-700-rgb) / .8), inset 0 1px 0 rgb(255 255 255 / .16); }
.pe-btn-glass {
  background: rgb(255 255 255 / .72); border-color: var(--pe-hair-strong); color: var(--pe-ink);
  box-shadow: 0 1px 2px rgb(var(--pe-ink-rgb) / .04);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pe-btn-glass:hover { border-color: var(--pe-teal-700); color: var(--pe-teal-700); }
.pe-btn-lg { min-height: 52px; padding: .95rem 1.7rem; font-size: 1.02rem; }

/* ------------------------------------------------------------ the page */
.pe-page {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
}
/* Faint light at the edges of the field. Decorative. */
.pe-atmos { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.pe-glow { position: absolute; display: block; border-radius: 50%; }
.pe-glow-l {
  left: -26vw; top: 30%; width: 64vw; aspect-ratio: 1.3;
  background: radial-gradient(closest-side, rgb(var(--pe-teal-rgb) / .1), rgb(var(--pe-teal-rgb) / .03) 55%, transparent);
}
.pe-glow-r {
  right: -26vw; top: 16%; width: 60vw; aspect-ratio: 1.3;
  background: radial-gradient(closest-side, rgb(30 116 136 / .07), rgb(30 116 136 / .02) 55%, transparent);
}

.pe-stage {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(clamp(4.5rem, 3rem + 6svh, 7rem) + 2rem) var(--pe-gutter) 0;
}
.pe-kicker {
  margin: 0 0 clamp(.9rem, .5rem + 1svh, 1.3rem); padding-left: .22em;
  font-size: .76rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--pe-faint);
}
.pe-h1 {
  margin: 0; max-width: 18ch;
  font-size: clamp(2.3rem, min(4.9vw, 7.4svh), 5.1rem);
  font-weight: 600; line-height: 1.03; letter-spacing: -.036em;
  color: var(--pe-ink); text-wrap: balance;
}
.pe-accent { color: var(--pe-teal-600); }
.pe-l2 { display: block; }
.pe-lede {
  margin: clamp(.9rem, .6rem + 1svh, 1.3rem) auto 0; max-width: 34em;
  font-size: clamp(1rem, .94rem + .3vw, 1.18rem); line-height: 1.55;
  color: var(--pe-muted); text-wrap: balance;
}
.pe-ctas {
  display: flex; justify-content: center; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-top: clamp(1.4rem, 1rem + 1.4svh, 2rem);
}
.pe-note { margin: .95rem 0 0; font-size: .86rem; color: var(--pe-faint); }

.pe-foot {
  position: relative; z-index: 3;
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .35rem 1.25rem;
  padding: 1.4rem var(--pe-gutter) 1.6rem;
  font-size: .78rem; color: var(--pe-faint);
}
.pe-foot a { color: var(--pe-muted); text-decoration: none; border-radius: 4px; transition: color var(--pe-d1) var(--pe-ease); }
.pe-foot a:hover { color: var(--pe-ink); }
.pe-foot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--pe-hair-strong); }

/* -------------------------------------------------------- the horizon
   One pixel of continON teal, strongest at the centre, fading to nothing at
   the ends. A dawn of mint rises off it, and through the dawn hangs the
   partner veil — fine vertical threads, the boundary the website's Partner
   Portal film is built around: the place where the organization and its
   partners meet. Below it, a little reflected light. */
.pe-horizon { position: relative; z-index: 0; width: 100%; height: 0; pointer-events: none; }
.pe-dawn {
  position: absolute; left: 50%; bottom: 0;
  width: min(124vw, 1900px); height: min(60svh, 600px); margin-left: calc(min(124vw, 1900px) / -2);
  background: radial-gradient(ellipse 50% 100% at 50% 100%,
    rgb(var(--pe-teal-rgb) / .2), rgb(var(--pe-teal-rgb) / .08) 36%, rgb(var(--pe-teal-rgb) / .025) 60%, transparent 76%);
  transform-origin: 50% 100%;
  animation: pe-light-rise 1.9s var(--pe-ease-out) .35s backwards;
}
.pe-veil {
  position: absolute; left: 50%; bottom: 0; overflow: hidden;
  width: min(112vw, 1700px); height: min(54svh, 540px); margin-left: calc(min(112vw, 1700px) / -2);
  -webkit-mask-image: radial-gradient(ellipse 47% 100% at 50% 100%, #000 0%, rgb(0 0 0 / .62) 34%, rgb(0 0 0 / .18) 58%, transparent 76%);
          mask-image: radial-gradient(ellipse 47% 100% at 50% 100%, #000 0%, rgb(0 0 0 / .62) 34%, rgb(0 0 0 / .18) 58%, transparent 76%);
  transform-origin: 50% 100%;
  animation: pe-light-rise 2.4s var(--pe-ease-out) .6s backwards;
}
/* Two layers of threads at different pitches, drifting apart very slowly: the
   veil seems to breathe. One period per loop, so the drift never jumps. */
.pe-veil i { position: absolute; top: 0; bottom: 0; left: -64px; right: -64px; display: block; will-change: transform; }
.pe-veil i:nth-child(1) {
  background: repeating-linear-gradient(90deg,
    transparent 0 11px, rgb(var(--pe-teal-700-rgb) / .1) 11px 12px, transparent 12px 23px, rgb(var(--pe-teal-700-rgb) / .04) 23px 24px);
  animation: pe-drift-a 28s linear infinite;
}
.pe-veil i:nth-child(2) {
  background: repeating-linear-gradient(90deg,
    transparent 0 17px, rgb(var(--pe-teal-700-rgb) / .045) 17px 18px, transparent 18px 37px, rgb(var(--pe-teal-rgb) / .12) 37px 38px);
  animation: pe-drift-b 44s linear infinite;
}
.pe-reflect {
  position: absolute; left: 50%; top: 0;
  width: min(96vw, 1500px); height: 220px; margin-left: calc(min(96vw, 1500px) / -2);
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgb(var(--pe-teal-rgb) / .1), rgb(var(--pe-teal-rgb) / .025) 45%, transparent 75%);
  animation: pe-fade 1.6s var(--pe-ease-out) .6s backwards;
}
.pe-rule {
  position: absolute; left: 4%; right: 4%; top: -.5px; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--pe-teal-rgb) / .3) 8%, rgb(var(--pe-teal-rgb) / .65) 25%,
    rgb(var(--pe-teal-rgb) / .9) 40%, var(--pe-teal) 50%, rgb(var(--pe-teal-rgb) / .9) 60%,
    rgb(var(--pe-teal-rgb) / .65) 75%, rgb(var(--pe-teal-rgb) / .3) 92%, transparent);
  animation: pe-draw 1.25s var(--pe-ease-out) .2s backwards;
}
.pe-shine {
  position: absolute; left: 50%; top: -11px; width: 56vw; height: 22px; margin-left: -28vw;
  background: radial-gradient(closest-side, rgb(var(--pe-teal-rgb) / .3), rgb(var(--pe-teal-rgb) / .08) 50%, transparent);
  animation: pe-fade 1.4s var(--pe-ease-out) .5s backwards;
}
/* The signal: a point of light that runs the line once on arrival. The track
   is the line's own span; translateX(100%) is exactly its far end. */
.pe-signal-track { position: absolute; left: 8%; right: 8%; top: 0; height: 0; }
.pe-signal {
  position: absolute; left: 0; top: -2.5px; width: 100%; height: 5px; margin-left: -70px;
  background: radial-gradient(closest-side, var(--pe-teal), rgb(var(--pe-teal-rgb) / .45) 45%, transparent) no-repeat 0 50% / 140px 5px;
  opacity: 0;
  animation: pe-signal 4.2s linear 1.3s both;
}

/* The states hung under the line: a point, a short guide, a name. */
.pe-states {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(86vw, 1000px); margin: 0 auto; padding: 0; list-style: none;
}
.pe-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 .5rem; }
.pe-node {
  position: relative; display: block; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--pe-teal);
  box-shadow: 0 0 0 3px rgb(var(--pe-teal-rgb) / .18), 0 0 10px 2px rgb(var(--pe-teal-rgb) / .3);
  animation: pe-fade .8s var(--pe-ease-out) 1s backwards;
}
.pe-node::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--pe-teal-rgb) / .55), transparent);
  opacity: .16;
  animation: pe-ping 1.6s var(--pe-ease-out) var(--ping, 2.5s) backwards;
}
.pe-guide {
  display: block; width: 1px; height: 26px; margin-top: 8px;
  background: linear-gradient(180deg, rgb(var(--pe-teal-rgb) / .55), rgb(var(--pe-teal-rgb) / 0));
  animation: pe-fade .8s var(--pe-ease-out) 1.1s backwards;
}
.pe-state-name { margin-top: 8px; font-size: .86rem; font-weight: 600; letter-spacing: -.005em; color: var(--pe-ink); }
.pe-state-text { margin-top: .3rem; max-width: 17em; font-size: .8rem; line-height: 1.45; color: var(--pe-muted); text-wrap: balance; }
.pe-state .pe-state-name, .pe-state .pe-state-text { animation: pe-rise .7s var(--pe-ease-out) 1.25s backwards; }

/* ----------------------------------------------- entrance choreography
   Fill "backwards" only: after the entrance the element is back on its own
   styles, so hover transforms still apply. */
.pe-rise { animation: pe-rise .72s var(--pe-ease-out) var(--d, 0s) backwards; }

@keyframes pe-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes pe-fade { from { opacity: 0; } }
@keyframes pe-draw { from { opacity: 0; transform: scaleX(.05); } }
@keyframes pe-light-rise { from { opacity: 0; transform: scaleY(.55); } }
@keyframes pe-drift-a { to { transform: translateX(-24px); } }
@keyframes pe-drift-b { to { transform: translateX(38px); } }
@keyframes pe-signal {
  0% { opacity: 0; transform: translateX(0); }
  7% { opacity: 1; }
  93% { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}
@keyframes pe-ping {
  0% { opacity: .16; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.5); }
  100% { opacity: .16; transform: scale(1); }
}

/* ------------------------------------------- moving between the pages
   The entry pages are separate documents. Where the browser can (Chrome,
   Edge, Safari), the navigation is carried instead of blanked: the logo stays
   where it is, the next page settles in, and the Individual card opens into
   the sign-in panel. Elsewhere, and with reduced motion, it simply navigates.
   The pages behind the sign-in do not take part. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.pe-brand { view-transition-name: pe-brand; }
.pe-form-side { view-transition-name: pe-panel; }
::view-transition-group(*) { animation-duration: .6s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(root) { animation: pe-vt-out .24s var(--pe-ease) both; }
::view-transition-new(root) { animation: pe-vt-in .52s var(--pe-ease-out) .08s both; }
/* The card and the panel are both white: the card grows into the panel, its
   face giving way to the form as it opens. */
::view-transition-old(pe-panel), ::view-transition-new(pe-panel) { height: 100%; object-fit: cover; object-position: 50% 0; }
::view-transition-old(pe-panel) { animation: pe-vt-out .14s var(--pe-ease) both; }
::view-transition-new(pe-panel) { animation: pe-vt-in .42s var(--pe-ease-out) .16s both; }
@keyframes pe-vt-out { to { opacity: 0; } }
@keyframes pe-vt-in { from { opacity: 0; transform: translateY(10px); } }

/* ======================================================= account chooser */
.pe-choose { width: 100%; position: relative; margin-top: clamp(2rem, 1rem + 4svh, 3.5rem); }
/* The two choices stand on the line, the dawn rising behind their glass. */
.pe-choose .pe-horizon { position: absolute; left: 0; right: 0; top: 76%; }
.pe-choice {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(2, minmax(0, 368px)); justify-content: center;
  gap: clamp(1rem, .6rem + 1vw, 1.5rem);
}
.pe-card {
  --mx: 50%; --my: 0%;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  min-height: clamp(232px, 30svh, 288px); padding: 1.75rem;
  border: 1px solid var(--pe-hair); border-radius: 26px;
  color: var(--pe-ink); text-decoration: none;
  background: rgb(255 255 255 / .8);
  box-shadow: var(--pe-shadow-card);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  -webkit-tap-highlight-color: transparent;
  transition: transform .5s var(--pe-spring), border-color var(--pe-d2) var(--pe-ease), box-shadow var(--pe-d2) var(--pe-ease);
}
/* A light that follows the pointer across the glass. */
.pe-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgb(var(--pe-teal-rgb) / .11), rgb(var(--pe-teal-rgb) / .035) 40%, transparent 65%);
  opacity: 0; transition: opacity var(--pe-d2) var(--pe-ease);
}
.pe-card:hover, .pe-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgb(var(--pe-teal-rgb) / .55);
  box-shadow: var(--pe-shadow-lift), 0 0 0 1px rgb(var(--pe-teal-rgb) / .12);
}
.pe-card:hover::before, .pe-card:focus-visible::before { opacity: 1; }
.pe-card:active { transform: translateY(-1px) scale(.99); transition-duration: .14s; }
.pe-card:focus-visible { outline-offset: 4px; }
.pe-card-icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
  background: var(--pe-teal-50); border: 1px solid var(--pe-teal-100); color: var(--pe-teal-700);
  transition: background-color var(--pe-d2) var(--pe-ease), transform .5s var(--pe-spring);
}
.pe-card-icon svg { width: 26px; height: 26px; }
.pe-card:hover .pe-card-icon { background: var(--pe-teal-100); transform: scale(1.05); }
.pe-card-title { display: block; margin-top: 1.35rem; font-size: 1.55rem; font-weight: 600; line-height: 1.15; letter-spacing: -.024em; }
.pe-card-text { display: block; margin-top: .5rem; font-size: .95rem; line-height: 1.5; color: var(--pe-muted); }
.pe-card-go {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: 1.4rem;
  font-size: .92rem; font-weight: 600; color: var(--pe-teal-700);
}
.pe-card-go svg { width: 16px; height: 16px; transition: transform var(--pe-d2) var(--pe-spring); }
.pe-card:hover .pe-card-go svg { transform: translateX(4px); }
/* The icons come alive under the pointer: the building's windows light up
   floor by floor; the person is confirmed with a small badge. */
.pe-card-icon svg { overflow: visible; }
.pe-ico-win { stroke-dasharray: 1; transition: stroke var(--pe-d2) var(--pe-ease); }
.pe-card:is(:hover, :focus-visible) .pe-ico-win {
  stroke: var(--pe-teal);
  animation: pe-ico-draw .42s var(--pe-ease-out) calc(var(--i) * 90ms) backwards;
}
@keyframes pe-ico-draw { from { stroke-dashoffset: 1; } }
.pe-ico-badge {
  opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center;
  transition: opacity .2s var(--pe-ease), transform .5s var(--pe-spring);
}
.pe-ico-badge circle { fill: var(--pe-teal-700); stroke: var(--pe-teal-100); }
.pe-card:is(:hover, :focus-visible) .pe-ico-badge { opacity: 1; transform: none; transition-delay: .06s; }
/* The way you came in last time, remembered on this device. */
.pe-card-last {
  display: inline-flex; align-items: center; gap: .35rem; margin-left: .55rem; padding: .28rem .58rem;
  border: 1px solid var(--pe-teal-100); border-radius: 999px; background: var(--pe-teal-50);
  color: var(--pe-teal-700); font-size: .7rem; font-weight: 600; line-height: 1; letter-spacing: .01em;
  vertical-align: .32em;
  animation: pe-pop .5s var(--pe-spring) .7s backwards;
}
.pe-card-last::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pe-teal); }
.pe-card.is-last { border-color: rgb(var(--pe-teal-rgb) / .38); }
/* The line answers the pointer: a pool of light gathers on it under the card
   you are on. Cards are 368px wide with a 24px gap, centred. */
.pe-pool {
  position: absolute; top: -34px; width: 620px; height: 68px; margin-left: -310px;
  background: radial-gradient(closest-side, rgb(var(--pe-teal-rgb) / .34), rgb(var(--pe-teal-rgb) / .08) 55%, transparent);
  opacity: 0; transform: scaleX(.6);
  transition: opacity .45s var(--pe-ease), transform .8s var(--pe-spring);
}
.pe-pool-l { left: calc(50% - 196px); }
.pe-pool-r { left: calc(50% + 196px); }
.pe-choose:has(.pe-card:first-child:is(:hover, :focus-visible)) .pe-pool-l,
.pe-choose:has(.pe-card:last-child:is(:hover, :focus-visible)) .pe-pool-r { opacity: 1; transform: none; }
.pe-choose + .pe-note { position: relative; z-index: 2; margin-top: clamp(1.4rem, 1rem + 1.5svh, 2.1rem); }
/* The chooser is one composition, centred in the screen between the bar and
   the footer, with room below the cards for the reflected light. */
.pe-stage-center {
  justify-content: center;
  padding-top: calc(clamp(4.5rem, 3rem + 6svh, 7rem) + .5rem);
  padding-bottom: clamp(3rem, 1rem + 8svh, 6rem);
}

/* ========================================================= company welcome */
.pe-welcome .pe-stage { padding-bottom: 0; }
.pe-welcome-line { position: relative; width: 100%; margin-top: max(3.25rem, 11svh); }
.pe-welcome-line .pe-states { padding-bottom: clamp(1.5rem, 1rem + 3svh, 3rem); }
.pe-welcome .pe-ctas + .pe-note { margin-top: 1.1rem; }
/* A glance at what waits inside: two notes of frosted white at the edges of
   the field, the kind the portal sends you. Illustrations, not data; they
   drift a little against the pointer, the far one more than the near. */
.pe-glances { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pe-glance {
  position: absolute; display: flex; align-items: center; gap: .7rem;
  padding: .7rem 1.05rem .7rem .7rem; border-radius: 16px; white-space: nowrap;
  background: rgb(255 255 255 / .86); border: 1px solid rgb(var(--pe-ink-rgb) / .06);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 1px 2px rgb(var(--pe-ink-rgb) / .04), 0 26px 50px -26px rgb(var(--pe-ink-rgb) / .3);
  transform: translate3d(calc(var(--px, 0) * var(--k) * -1px), calc(var(--py, 0) * var(--k) * -1px), 0);
  transition: transform 1.1s var(--pe-ease-out);
  animation: pe-rise .9s var(--pe-ease-out) var(--d) backwards, pe-float 8s ease-in-out var(--fd, 0s) infinite alternate;
}
.pe-glance-a { left: max(3vw, calc(50% - 650px)); top: 31%; --k: 16; --d: 1.15s; }
.pe-glance-b { right: max(3vw, calc(50% - 650px)); top: 50%; --k: 26; --d: 1.35s; --fd: -4s; }
.pe-glance .pe-chip-t { font-size: .84rem; }
.pe-glance .pe-chip-s { font-size: .74rem; }
.pe-glance-steps { display: flex; gap: 3px; margin-top: .4rem; }
.pe-glance-steps i { width: 18px; height: 3px; border-radius: 2px; background: var(--pe-hair-strong); }
.pe-glance-steps i.is-done { background: var(--pe-teal); }

/* ====================================================== individual sign-in
   A split screen: the continON world framed in an arch on a pale mint panel
   (a portal, literally), the sign-in on white beside it. */
.pe-split {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  min-height: 100vh; min-height: 100svh;
}
.pe-visual {
  --arch-w: min(clamp(250px, 24vw, 410px), calc((100svh - 13rem) * .6));
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #f4f9f6, #eaf3ee);
  border-right: 1px solid var(--pe-hair);
}
/* A halo of mint behind the arch, as if the window lit the panel. */
.pe-visual::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(44% 38% at 50% 52%, rgb(var(--pe-teal-rgb) / .22), rgb(var(--pe-teal-rgb) / .06) 55%, transparent 75%),
    radial-gradient(60% 50% at 0% 100%, rgb(30 116 136 / .07), transparent 70%);
}
.pe-portal { position: relative; flex: 1; display: grid; place-items: center; min-height: 0; padding: 5.5rem 0 4.5rem; }
/* The film is the website's dusk; on a light page it is a window at dusk, not
   a hole: a pale frame around it, and its blacks lifted into deep teal. */
.pe-arch {
  position: relative; z-index: 2;
  width: var(--arch-w); aspect-ratio: 3 / 5; border-radius: 999px; overflow: hidden;
  background: #0d3b32;
  box-shadow: 0 0 0 7px rgb(255 255 255 / .72), 0 0 0 8px rgb(var(--pe-ink-rgb) / .06),
    0 60px 110px -50px rgb(var(--pe-teal-700-rgb) / .55), 0 34px 70px -36px rgb(var(--pe-ink-rgb) / .35);
  transform: translateZ(0);
  animation: pe-arch-in 1.4s var(--pe-ease-out) .1s backwards;
}
.pe-arch img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 64% 0%;
  transform: scale(1.32); transform-origin: 62% 26%;
}
/* Screen blending: black becomes this teal, light stays light. */
.pe-arch::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, #0a2f29, #0f4438);
  mix-blend-mode: screen;
}
/* Glass edge and a floor of light, so the frame reads as an opening. */
.pe-arch::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(70% 28% at 50% 100%, rgb(var(--pe-teal-rgb) / .3), transparent 70%),
    linear-gradient(180deg, rgb(255 255 255 / .08), transparent 22%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), inset 0 1px 0 rgb(255 255 255 / .22);
}
@keyframes pe-arch-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }

/* The orbit: one thin ring around the arch. Its far half passes behind the
   arch and its near half in front; a node of light travels it. */
.pe-orbit {
  position: absolute; left: 50%; top: 50%; z-index: 1; pointer-events: none;
  width: calc(var(--arch-w) * 2.15); height: auto; aspect-ratio: 10 / 7;
  transform: translate(-50%, -50%); overflow: visible;
}
.pe-orbit-front { z-index: 3; }
.pe-orbit path {
  fill: none; stroke: rgb(var(--pe-ink-rgb) / .16); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  animation: pe-orbit-draw 1.8s var(--pe-ease-out) .5s backwards;
}
.pe-orbit .pe-orbit-node { fill: var(--pe-teal); }
.pe-orbit .pe-orbit-halo { fill: rgb(var(--pe-teal-rgb) / .22); }
@keyframes pe-orbit-draw { from { stroke-dashoffset: 1; } }

/* Small points of teal around the portal. */
.pe-spark {
  position: absolute; z-index: 3; width: 7px; height: 7px; border-radius: 50%;
  background: var(--pe-teal);
  box-shadow: 0 0 0 4px rgb(var(--pe-teal-rgb) / .16), 0 0 14px 2px rgb(var(--pe-teal-rgb) / .35);
  animation: pe-fade 1s var(--pe-ease-out) 1.2s backwards, pe-twinkle 4.8s ease-in-out 2.2s infinite;
}
.pe-spark-1 { left: calc(50% - var(--arch-w) * .78); top: 32%; }
.pe-spark-2 { left: calc(50% + var(--arch-w) * .66); top: 70%; width: 5px; height: 5px; animation-delay: 1.4s, 3.4s; }
.pe-spark-3 { left: calc(50% + var(--arch-w) * .8); top: 76%; width: 4px; height: 4px; animation-delay: 1.6s, 1.2s; }
@keyframes pe-twinkle { 50% { opacity: .35; transform: scale(.7); } }

/* Two quiet notes of frosted white: what an individual does here. */
.pe-chip {
  position: absolute; z-index: 4;
  display: flex; align-items: center; gap: .7rem;
  padding: .62rem 1rem .62rem .62rem; border-radius: 16px;
  background: rgb(255 255 255 / .86); border: 1px solid rgb(var(--pe-ink-rgb) / .06);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 1px 2px rgb(var(--pe-ink-rgb) / .04), 0 22px 44px -22px rgb(var(--pe-ink-rgb) / .3);
  white-space: nowrap;
  animation: pe-rise .8s var(--pe-ease-out) var(--d, 1.4s) backwards, pe-float 7s ease-in-out var(--fd, 0s) infinite alternate;
}
.pe-chip-ico {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  background: var(--pe-teal-50); color: var(--pe-teal-700);
}
.pe-chip-ico svg { width: 16px; height: 16px; }
.pe-chip-t { display: block; font-size: .8rem; font-weight: 600; line-height: 1.25; color: var(--pe-ink); }
.pe-chip-s { display: block; font-size: .72rem; line-height: 1.3; color: var(--pe-muted); }
.pe-chip-a { top: calc(50% - var(--arch-w) * .62); left: calc(50% + var(--arch-w) * .3); --d: 1.5s; }
.pe-chip-b { top: calc(50% + var(--arch-w) * .5); right: calc(50% + var(--arch-w) * .26); --d: 1.75s; --fd: -3.5s; }
.pe-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0a526; box-shadow: 0 0 0 4px rgb(224 165 38 / .2); }
/* translate (not transform) so the float composes with the entrance. */
@keyframes pe-float { from { translate: 0 0; } to { translate: 0 -8px; } }

/* ------------------------------------------------- the film in the arch
   partner-film-player.js plays the website's Partner Portal film on a canvas
   over the poster (its opening frame) and dissolves back into it between
   runs. While it plays, the quiet cards give way to the film's chapters. */
.pe-film {
  position: absolute; left: 0; top: 0; z-index: 1; display: block; width: 100%; height: 100%;
  transform-origin: 0 0; will-change: transform;
  opacity: 0; transition: opacity 1.1s var(--pe-ease);
}
.pe-film.is-on { opacity: 1; }
.pe-chip-static { transition: opacity .5s var(--pe-ease), visibility 0s linear .5s; }
.pe-visual.is-film .pe-chip-static { opacity: 0; visibility: hidden; }
.pe-cue { display: none; }
.pe-visual.is-film .pe-cue { display: flex; }
.pe-chip.pe-cue {
  animation: none; opacity: 0; transform: translateY(10px) scale(.97);
  transition: opacity .45s var(--pe-ease), transform .7s var(--pe-spring);
}
.pe-chip.pe-cue.is-on { opacity: 1; transform: none; }
.pe-chip-badges i { display: inline-block; width: 6px; height: 6px; margin: 0 .3rem 0 .45rem; border-radius: 50%; vertical-align: 1px; }
.pe-chip-badges i:first-child { margin-left: 0; }
.pe-chip-badges .is-paid { background: #1f9d63; }
.pe-chip-badges .is-overdue { background: #d1453b; }
.pe-chip-badges .is-open { background: #e0a526; }
/* One line under the arch, said while the camera travels. */
.pe-caption {
  position: absolute; z-index: 4; left: 0; right: 0; top: calc(50% + var(--arch-w) * .833 + 1.6rem);
  justify-content: center; margin: 0; padding: 0 var(--pe-gutter);
  font-size: .95rem; font-weight: 500; letter-spacing: -.01em; color: var(--pe-muted);
  opacity: 0; transform: translateY(8px);
  transition: opacity .6s var(--pe-ease), transform .8s var(--pe-ease-out);
}
.pe-caption.is-on { opacity: 1; transform: none; }

.pe-visual-foot {
  position: relative; z-index: 5;
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .35rem 1.1rem;
  padding: 0 var(--pe-gutter) 1.6rem;
  font-size: .76rem; color: var(--pe-faint);
}
.pe-visual-foot a { color: var(--pe-muted); text-decoration: none; border-radius: 4px; transition: color var(--pe-d1) var(--pe-ease); }
.pe-visual-foot a:hover { color: var(--pe-ink); }

/* -------------------------------------------------------- the form side */
.pe-form-side {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6rem var(--pe-gutter) 3rem;
  background: var(--pe-bg);
}
.pe-form-bar { display: none; }
.pe-form-wrap { width: 100%; max-width: 404px; }
.pe-greet {
  margin: 0; font-size: clamp(2rem, 1.55rem + 1.3vw, 2.6rem);
  font-weight: 600; line-height: 1.06; letter-spacing: -.034em; color: var(--pe-ink);
}
.pe-greet-sub { margin: .7rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--pe-muted); }

.pe-form { margin-top: 2.2rem; }
.pe-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.pe-field { position: relative; }
.pe-field + .pe-field { margin-top: 1rem; }
.pe-field-ico {
  position: absolute; left: 1.05rem; top: 29px; z-index: 1; width: 18px; height: 18px; margin-top: -9px;
  color: var(--pe-faint); pointer-events: none; transition: color var(--pe-d1) var(--pe-ease);
}
.pe-input {
  display: block; width: 100%; height: 58px; margin: 0;
  padding: 1.32rem 1rem .42rem 2.95rem;
  border: 1px solid var(--pe-control); border-radius: 14px;
  background: #fff; color: var(--pe-ink); caret-color: var(--pe-teal-700);
  font: 500 1rem/1.2 var(--pe-font); letter-spacing: -.005em;
  -webkit-appearance: none; appearance: none; outline: none;
  transition: border-color var(--pe-d1) var(--pe-ease), background-color var(--pe-d1) var(--pe-ease), box-shadow var(--pe-d2) var(--pe-ease);
}
.pe-input-pw { padding-right: 3.4rem; }
.pe-input::placeholder { color: transparent; }
.pe-input:hover { border-color: var(--pe-control-hover); }
.pe-input:focus { border-color: var(--pe-teal-700); box-shadow: 0 0 0 4px rgb(var(--pe-teal-rgb) / .18); }
/* A field's own border and glow are its focus ring; no second outline. */
.pe .pe-input:focus-visible { outline: none; }
.pe-field:focus-within .pe-field-ico { color: var(--pe-teal-700); }
/* Autofill keeps the field's own colours. */
.pe-input:-webkit-autofill, .pe-input:-webkit-autofill:hover, .pe-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--pe-ink); caret-color: var(--pe-ink);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 9999s ease-out 0s, border-color var(--pe-d1) var(--pe-ease);
}
/* The label sits in the field and floats up once the field is in use. */
.pe-label {
  position: absolute; left: 2.95rem; top: 29px; z-index: 1;
  font-size: 1rem; line-height: 1; color: var(--pe-faint);
  transform: translateY(-50%); transform-origin: 0 50%;
  pointer-events: none; white-space: nowrap;
  transition: transform .22s var(--pe-ease-out), color var(--pe-d1) var(--pe-ease);
}
.pe-input:focus ~ .pe-label,
.pe-input:not(:placeholder-shown) ~ .pe-label,
.pe-input:-webkit-autofill ~ .pe-label { transform: translateY(calc(-50% - 11px)) scale(.76); }
.pe-input:focus ~ .pe-label { color: var(--pe-teal-700); }

.pe-eye {
  position: absolute; right: .45rem; top: 29px; z-index: 2; width: 42px; height: 42px; margin-top: -21px;
  display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--pe-faint); cursor: pointer;
  transition: color var(--pe-d1) var(--pe-ease), background-color var(--pe-d1) var(--pe-ease);
}
.pe-eye:hover { color: var(--pe-ink); background: var(--pe-navy-50); }
.pe-eye svg { width: 19px; height: 19px; }
.pe-eye .pe-eye-off, .pe-eye[aria-pressed='true'] .pe-eye-on { display: none; }
.pe-eye[aria-pressed='true'] .pe-eye-off { display: block; }

/* Errors: said once, next to the field, in words. */
.pe-field.is-invalid .pe-input { border-color: var(--pe-error); box-shadow: 0 0 0 4px rgb(var(--pe-error-rgb) / .1); }
.pe-field.is-invalid .pe-field-ico, .pe-field.is-invalid .pe-label { color: var(--pe-error); }
.pe-error {
  display: flex; align-items: flex-start; gap: .45rem; margin: .55rem 0 0 .15rem;
  font-size: .85rem; line-height: 1.4; color: var(--pe-error);
  animation: pe-error-in .22s var(--pe-ease-out);
}
.pe-error svg { flex: none; width: 15px; height: 15px; margin-top: 1px; }
@keyframes pe-error-in { from { opacity: 0; transform: translateY(-4px); } }
.pe-shake { animation: pe-shake .4s cubic-bezier(.36, .07, .19, .97); }
@keyframes pe-shake {
  20% { transform: translateX(-6px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(2px); }
}

.pe-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.15rem; font-size: .92rem;
}
.pe-check { position: relative; display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; color: var(--pe-text); user-select: none; }
.pe-check input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.pe-check-box {
  display: grid; place-items: center; width: 18px; height: 18px; flex: none;
  border: 1.5px solid var(--pe-control); border-radius: 5px; background: #fff;
  transition: background-color var(--pe-d1) var(--pe-ease), border-color var(--pe-d1) var(--pe-ease), transform .3s var(--pe-spring);
}
.pe-check-box svg { width: 12px; height: 12px; }
.pe-check-box path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset .2s var(--pe-ease-out); }
.pe-check:hover .pe-check-box { border-color: var(--pe-control-hover); }
.pe-check input:checked + .pe-check-box { background: var(--pe-teal-700); border-color: var(--pe-teal-700); }
.pe-check input:checked + .pe-check-box path { stroke-dashoffset: 0; }
.pe-check input:active + .pe-check-box { transform: scale(.9); }
.pe-check input:focus-visible + .pe-check-box { outline: 2px solid var(--pe-focus); outline-offset: 3px; }

.pe-link {
  color: var(--pe-teal-700); font-weight: 500; text-decoration: none; border-radius: 4px;
  text-underline-offset: 3px; transition: color var(--pe-d1) var(--pe-ease);
}
.pe-link:hover { color: var(--pe-teal-750); text-decoration: underline; }

.pe-submit {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 54px; margin-top: 1.6rem; padding: 0; text-decoration: none;
  border: 0; border-radius: 14px; overflow: hidden;
  background: var(--pe-teal-700); color: #fff;
  font: 600 1rem/1 var(--pe-font); letter-spacing: -.005em; cursor: pointer;
  box-shadow: 0 16px 32px -18px rgb(var(--pe-teal-700-rgb) / .85), inset 0 1px 0 rgb(255 255 255 / .16);
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--pe-d1) var(--pe-ease), box-shadow var(--pe-d2) var(--pe-ease), transform .45s var(--pe-spring);
}
.pe-submit:hover { background: var(--pe-teal-750); transform: translateY(-1px); box-shadow: 0 20px 38px -16px rgb(var(--pe-teal-700-rgb) / .85), inset 0 1px 0 rgb(255 255 255 / .16); }
.pe-submit:active { transform: scale(.985); transition-duration: .12s; }
.pe-submit:focus-visible { outline-offset: 3px; }
.pe-submit-label { display: inline-flex; align-items: center; gap: .5rem; transition: opacity var(--pe-d1) var(--pe-ease), transform var(--pe-d2) var(--pe-ease-out); }
.pe-submit-label svg { width: 16px; height: 16px; transition: transform var(--pe-d2) var(--pe-spring); }
.pe-submit:hover .pe-submit-label svg { transform: translateX(3px); }
.pe-spinner {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 2px solid rgb(255 255 255 / .3); border-top-color: #fff; border-radius: 50%;
  opacity: 0; transform: scale(.6);
  transition: opacity var(--pe-d1) var(--pe-ease), transform var(--pe-d2) var(--pe-spring);
}
.pe-form.is-busy .pe-submit { cursor: progress; transform: none; }
.pe-form.is-busy .pe-submit-label { opacity: 0; transform: translateY(-6px); }
.pe-form.is-busy .pe-spinner { opacity: 1; transform: scale(1); animation: pe-spin .7s linear infinite; }
@keyframes pe-spin { to { rotate: 360deg; } }
/* Signed in: the spinner gives way to a tick drawn in white, a ring of
   light opens round the button, and only then does the portal open. */
.pe-submit-done {
  position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  opacity: 0; transform: scale(.6);
  transition: opacity var(--pe-d1) var(--pe-ease), transform .45s var(--pe-spring);
}
.pe-submit-done path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pe-form.is-done .pe-spinner { opacity: 0; animation: none; }
.pe-form.is-done .pe-submit-done { opacity: 1; transform: none; }
.pe-form.is-done .pe-submit-done path { stroke-dashoffset: 0; transition: stroke-dashoffset .34s var(--pe-ease-out) .06s; }
.pe-form.is-done .pe-submit { box-shadow: 0 0 0 6px rgb(var(--pe-teal-rgb) / .18), 0 20px 38px -16px rgb(var(--pe-teal-700-rgb) / .85); }

/* A remembered account is shown as who is signing in, as the big account
   services do; the email field stays in the form for password managers. */
.pe-account {
  display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; padding: .65rem .6rem .65rem .65rem;
  border: 1px solid var(--pe-hair); border-radius: 16px; background: #fff;
  box-shadow: 0 1px 2px rgb(var(--pe-ink-rgb) / .04);
}
.pe-avatar {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pe-teal), var(--pe-teal-700)); color: #fff;
  font-size: 1rem; font-weight: 600; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22);
}
.pe-account-id { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pe-account-label { font-size: .75rem; line-height: 1.3; color: var(--pe-faint); }
.pe-account-email { overflow: hidden; font-size: .95rem; font-weight: 600; line-height: 1.35; color: var(--pe-ink); text-overflow: ellipsis; white-space: nowrap; }
.pe-account-change { flex: none; padding: .45rem .55rem; border: 0; background: none; font: 500 .88rem/1 var(--pe-font); cursor: pointer; }
.pe-field.is-tucked {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.pe-field.is-tucked + .pe-field { margin-top: 0; }
.pe-field.pe-unfold { animation: pe-rise .45s var(--pe-ease-out); }

/* Caps Lock is said inside the password field, beside the eye, as the
   system does it: nothing under the field moves, so a click in flight lands. */
.pe-caps {
  position: absolute; right: 3.15rem; top: 29px; z-index: 2;
  display: inline-flex; align-items: center; gap: .3rem; padding: .32rem .6rem;
  border-radius: 999px; background: #fdf3e1; color: #84540f;
  font-size: .72rem; font-weight: 600; line-height: 1; letter-spacing: .01em; white-space: nowrap;
  transform: translateY(-50%); pointer-events: none;
  animation: pe-caps-in .3s var(--pe-spring);
}
.pe-caps svg { width: 12px; height: 12px; }
.pe-field:has(.pe-caps:not([hidden])) .pe-input { padding-right: 9.2rem; }
@keyframes pe-caps-in { from { opacity: 0; transform: translateY(-50%) scale(.85); } }

/* Quiet help under a field: a likely typo in the email. */
.pe-hint {
  display: flex; align-items: center; gap: .45rem; margin: .55rem 0 0 .15rem;
  font-size: .85rem; line-height: 1.4; color: var(--pe-muted);
  animation: pe-error-in .22s var(--pe-ease-out);
}
.pe-hint svg { flex: none; width: 15px; height: 15px; color: #b7791f; }
.pe-hint .pe-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }

.pe-alt { margin: 1.5rem 0 0; text-align: center; font-size: .95rem; color: var(--pe-muted); }

/* ------------------------------------------ the rest of the account family
   Register, forgot password, set a new password and their confirmations use
   the same split and the same field; these are the pieces only they need. */

/* The art panel stays put while a longer form scrolls beside it. */
.pe-split > .pe-visual { position: sticky; top: 0; align-self: start; height: 100vh; height: 100svh; }

.pe-form-wrap-wide { max-width: 540px; }
.pe-stack { display: grid; gap: 1rem; }
.pe-stack .pe-field + .pe-field { margin-top: 0; }
.pe-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pe-grid2 .pe-field + .pe-field { margin-top: 0; }
/* A field without a leading icon. */
.pe-field.is-plain .pe-input { padding-left: 1rem; }
.pe-field.is-plain .pe-label { left: 1rem; }

.pe-back {
  display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1.5rem;
  font-size: .9rem; font-weight: 500; color: var(--pe-muted); text-decoration: none; border-radius: 6px;
  transition: color var(--pe-d1) var(--pe-ease);
}
.pe-back svg { width: 16px; height: 16px; transition: transform var(--pe-d2) var(--pe-spring); }
.pe-back:hover { color: var(--pe-ink); }
.pe-back:hover svg { transform: translateX(-3px); }

/* The password rules, ticked off as they are met. */
.pe-rules { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .65rem 0 0 .15rem; padding: 0; list-style: none; font-size: .8rem; line-height: 1.3; color: var(--pe-faint); }
.pe-rules li { display: inline-flex; align-items: center; gap: .45rem; transition: color var(--pe-d1) var(--pe-ease); }
.pe-rules li::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--pe-hair-strong);
  transition: background-color var(--pe-d1) var(--pe-ease), border-color var(--pe-d1) var(--pe-ease), transform .32s var(--pe-spring);
}
.pe-rules li.is-met { color: var(--pe-teal-700); }
.pe-rules li.is-met::before {
  border-color: var(--pe-teal-700); transform: scale(1.08);
  background: var(--pe-teal-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.6l2.6 2.6L12 5.4' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* A checkbox that can carry an error (the terms). */
.pe-check-field { margin-top: 1.15rem; font-size: .92rem; }
.pe-check-field .pe-check { align-items: flex-start; line-height: 1.45; }
.pe-check-field .pe-check-box { margin-top: .1rem; }
.pe-check-field.is-invalid .pe-check-box { border-color: var(--pe-error); }

/* A quiet confirmation above a form. */
.pe-notice {
  display: flex; align-items: flex-start; gap: .7rem; margin-top: 1.4rem; padding: .85rem 1rem;
  border: 1px solid var(--pe-teal-100); border-radius: 14px;
  background: var(--pe-teal-50); color: var(--pe-ink);
  font-size: .9rem; line-height: 1.45;
  animation: pe-rise .6s var(--pe-ease-out) .25s backwards;
}
.pe-notice svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--pe-teal-700); }

/* The finished-step pages: one mark, one sentence, one way on. */
.pe-done-icon {
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 1.6rem; border-radius: 20px;
  background: var(--pe-teal-50); border: 1px solid var(--pe-teal-100); color: var(--pe-teal-700);
  box-shadow: 0 22px 44px -24px rgb(var(--pe-teal-700-rgb) / .55);
  animation: pe-pop .6s var(--pe-spring) .05s backwards;
}
.pe-done-icon svg { width: 30px; height: 30px; }
.pe-done-icon .pe-draw { stroke-dasharray: 1; animation: pe-orbit-draw .5s var(--pe-ease-out) .4s backwards; }
@keyframes pe-pop { from { opacity: 0; transform: scale(.6); } }
.pe-form-error { margin-top: 1.1rem; }
.pe-small { margin: 1.4rem 0 0; text-align: center; font-size: .88rem; line-height: 1.5; color: var(--pe-muted); text-wrap: balance; }
.pe-privacy {
  display: flex; align-items: center; gap: .8rem;
  margin-top: 2.4rem; padding-top: 1.3rem; border-top: 1px solid var(--pe-hair);
  font-size: .8rem; line-height: 1.45; color: var(--pe-faint);
}
.pe-privacy svg { flex: none; width: 30px; height: 30px; color: var(--pe-teal-700); }
.pe-privacy strong { display: block; color: var(--pe-text); font-weight: 600; }
.pe-form-foot { display: none; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .pe-glances { display: none; }
}
@media (max-width: 1100px) and (min-width: 961px) {
  .pe-chip-b { right: calc(50% + var(--arch-w) * .12); }
  .pe-chip-a { left: calc(50% + var(--arch-w) * .18); }
}
@media (max-width: 960px) {
  .pe-split { grid-template-columns: 1fr; }
  .pe-visual, .pe-split > .pe-visual { display: none; }
  .pe-form-side {
    justify-content: flex-start; padding: 0 var(--pe-gutter) 1.5rem;
    background: radial-gradient(90% 46% at 50% 0%, rgb(var(--pe-teal-rgb) / .14), rgb(var(--pe-teal-rgb) / .04) 55%, transparent 80%), var(--pe-bg);
  }
  .pe-form-bar { display: flex; align-self: stretch; padding: 1.25rem 0 0; }
  .pe-form-wrap { margin: clamp(3rem, 12svh, 6.5rem) auto 0; }
  .pe-form-foot {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1rem;
    margin-top: auto; padding-top: 2.5rem; font-size: .76rem; color: var(--pe-faint);
  }
  .pe-form-foot a { color: var(--pe-muted); text-decoration: none; }
}
@media (max-width: 760px) {
  .pe-choice { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 440px; margin: 0 auto; }
  .pe-card { min-height: 0; padding: 1.15rem 1.15rem 1.15rem 1.15rem; flex-direction: row; align-items: center; gap: 1rem; border-radius: 22px; }
  .pe-card-icon { width: 46px; height: 46px; border-radius: 14px; flex: none; }
  .pe-card-icon svg { width: 22px; height: 22px; }
  .pe-card-body { flex: 1; min-width: 0; }
  .pe-card-title { margin-top: 0; font-size: 1.15rem; }
  .pe-card-text { margin-top: .2rem; font-size: .84rem; line-height: 1.4; }
  .pe-card-go { margin: 0; padding: 0; }
  .pe-card-go span { display: none; }
  .pe-choose .pe-horizon { top: 50%; }
  .pe-pool { display: none; }
  /* Each state becomes a row: its point of light, then name over text. */
  .pe-states { width: 100%; grid-template-columns: 1fr; gap: 1.15rem; }
  .pe-state { display: grid; grid-template-columns: 6px minmax(0, 1fr); column-gap: 1rem; align-items: start; text-align: left; padding: 0; }
  .pe-state .pe-node { grid-row: 1 / span 2; margin-top: .4rem; }
  .pe-state .pe-guide { display: none; }
  .pe-state-name { grid-column: 2; margin-top: 0; }
  .pe-state-text { grid-column: 2; max-width: none; margin-top: .15rem; }
  .pe-foot { flex-direction: column; gap: .3rem; }
  .pe-foot-sep { display: none; }
  .pe-welcome-line .pe-states { width: min(100% - 2 * var(--pe-gutter), 420px); padding-top: 2rem; }
  .pe-bar .pe-btn { min-height: 40px; padding: .6rem 1.05rem; font-size: .9rem; }
}
@media (max-width: 520px) {
  .pe-grid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1680px) {
  .pe-form-wrap { max-width: 440px; }
}
/* Short laptop screens (1366×650 and the like): the same composition,
   tightened so the footer stays in the first screen. */
@media (max-height: 720px) and (min-width: 761px) {
  .pe-card-text { font-size: .9rem; }
  .pe-card-title { margin-top: 1rem; }
  .pe-stage { padding-top: calc(clamp(4.5rem, 3rem + 6svh, 7rem) + .5rem); }
  .pe-stage-center { padding-bottom: 1.5rem; }
  .pe-welcome-line { margin-top: 2.25rem; }
  .pe-welcome-line .pe-states { padding-bottom: .75rem; }
  .pe-foot { padding-top: .9rem; padding-bottom: 1.1rem; }
  .pe-form-side { padding-top: 4.5rem; padding-bottom: 1.5rem; }
}

/* ------------------------------------------------------- reduced motion
   Every element lands on its finished frame; nothing drifts or travels. */
@media (prefers-reduced-motion: reduce) {
  .pe *, .pe *::before, .pe *::after {
    animation-duration: .001ms !important; animation-delay: 0s !important;
    animation-iteration-count: 1 !important; transition-duration: .001ms !important;
  }
  .pe-signal, .pe-orbit-mover { display: none !important; }
  .pe-glance { transform: none; }
}