/* AIS Trail panel: signed-out pages (sign up, log in, check email, verify result, forgot/reset password, errors).
   Loaded only by templates/auth_base.html; the signed-in dashboard keeps app.css and is not affected by this file.
   Matches the marketing site (aistrail.com): pure black page with film grain, #0f0f0f cards (radius 20px), teal accent
   rgb(43,255,234), headings in Bespoke Serif 500, text and UI in Inter. Fonts, logo and grain tile are self-hosted
   under /static/. No inline scripts (CSP); app.js only adds the show/hide password button, auth-aside.js only animates the
   decorative glass panes on the left. Paragraphs have no max-width: the card and the aside set the measure. */

/* ------------------------------------------------------------ fonts (same files as the site, renamed) */
@font-face { font-family: "Inter"; src: url("fonts/inter-500-latin.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500-latin-ext.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500-cyrillic-ext.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500-cyrillic.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500-greek-ext.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap;
  unicode-range: U+1F00-1FFF; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500-greek.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap;
  unicode-range: U+0370-03FF; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500-vietnamese.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; }
/* Inter 600 (buttons, <strong>): the site loads this weight from Google Fonts; here it is self-hosted so the panel makes no
   third-party request. Subset of Inter 3.019 SemiBold (SIL OFL 1.1, licence kept in the font's name table) to the latin range */
@font-face { font-family: "Inter"; src: url("fonts/inter-600-latin.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bespoke Serif"; src: url("fonts/bespoke-serif-500.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
/* metric-matched fallbacks while the web fonts load (as on the site): no layout shift on swap */
@font-face { font-family: "Inter Placeholder"; src: local("Arial"); ascent-override: 89.79%; descent-override: 22.36%; line-gap-override: 0%; size-adjust: 107.89%; }
@font-face { font-family: "Bespoke Serif Placeholder"; src: local("Times New Roman"); ascent-override: 86.11%; descent-override: 23.02%; line-gap-override: 7.67%; size-adjust: 117.29%; }

/* ------------------------------------------------------------ tokens */
:root {
  color-scheme: dark;
  --bg: #000; --card: #0f0f0f; --field: #0a0a0a; --field-focus: #121212;
  --line: rgba(255, 255, 255, .06); --line-2: rgba(255, 255, 255, .1);
  /* control outlines: at least 3:1 on the grainy card (WCAG 1.4.11; measured 3.2:1 field, 3.5:1 checkbox), brighter on hover; focus stays teal */
  --line-field: rgba(255, 255, 255, .38); --line-check: rgba(255, 255, 255, .4); --line-field-hover: rgba(255, 255, 255, .5);
  --text: #fff; --text-2: rgba(255, 255, 255, .8); --text-3: rgba(255, 255, 255, .62);
  --acc: rgb(43, 255, 234); --acc-rgb: 43, 255, 234; --acc-hover: rgb(128, 255, 242);
  --ink: rgb(5, 5, 5);
  --err: rgb(255, 143, 135); --err-rgb: 255, 107, 97;
  --warn: rgb(255, 200, 112); --warn-rgb: 255, 184, 77;
  --sans: Inter, "Inter Placeholder", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Bespoke Serif", "Bespoke Serif Placeholder", Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.44, 0, .56, 1);
  --grain: url("grain.png");
  --r-card: 20px; --r-field: 12px;
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
/* Inter 500 and 600 are self-hosted; no faux bold for other weights (font-synthesis: style) */
body { position: relative; min-height: 100vh; min-height: 100dvh; margin: 0; min-width: 320px; background: var(--bg); color: var(--text-2);
  font: 500 15px/1.55 var(--sans); font-synthesis: style; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* film grain over the black page, as on the site (tile 153.5px, 15%); covers the whole document, not just the viewport */
body::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--grain) center top / 153.5px auto repeat; opacity: .15; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(var(--acc-rgb), .6); text-decoration-thickness: 1px;
  text-underline-offset: 3px; transition: color .15s var(--ease); }
a:hover { color: var(--acc); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
b, strong { color: var(--text); font-weight: 600; }
p { margin: 0 0 .8em; }
p:last-child { margin-bottom: 0; }
h1 { margin: 0; color: var(--text); font: 500 36px/1.15 var(--serif); letter-spacing: -.02em; }
.muted { color: var(--text-3); }
.small { font-size: 14px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; }

/* ------------------------------------------------------------ layout: glass-layers panel | form */
.auth-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh; min-height: 100dvh; }
.auth-aside { position: sticky; top: 16px; align-self: start; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  height: calc(100vh - 32px); height: calc(100dvh - 32px); min-height: 560px; margin: 16px 0 16px 16px; padding: 32px 40px 40px;
  border-radius: var(--r-card); background: #000; }
/* grain over the panel, like the site's cards */
.auth-aside::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--grain) center top / 153.5px auto repeat; opacity: .12; }
.auth-aside::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--line); }
.auth-logo { position: relative; z-index: 4; order: 0; align-self: flex-start; display: block; border-radius: 8px; text-decoration: none; }
.auth-logo img { display: block; width: auto; height: 40px; }
.auth-pitch { position: relative; z-index: 4; order: 2; }
.auth-eyebrow { display: inline-block; margin: 0 0 18px; padding: 6px 14px; border-radius: 999px;
  background: rgba(var(--acc-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), .2); color: var(--acc); font: 500 14px/1.2 var(--sans); }
.auth-pitch-title { margin: 0 0 24px; color: var(--text); font: 500 clamp(34px, 3.1vw, 46px)/1.12 var(--serif); letter-spacing: -.02em; }
.auth-points { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; color: var(--text-2); font: 500 15px/1.45 var(--sans); }
.auth-points li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; }
.auth-points svg { width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: var(--acc); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ the glass layers (decorative, aria-hidden)
   The logo's mark, blown up: three translucent glass panes in the logo's oblique angle (skewY -24deg), stacked in depth,
   with a dotted trail that pierces each pane at a reported position. The trail runs behind the next pane, so the frosted
   glass (backdrop-filter) blurs the part of it that is "inside"; the last position is bright with a halo.
   Geometry lives in a 1000 x 800 design space (the SVG viewBox); .glass is that space, sized from the free area between
   the logo and the pitch (a size container), so everything below is in % of it or in --u (one design unit).
   auth-aside.js adds a slow parallax drift and a light travelling along the trail (compositor-only transforms); without it,
   or with reduced motion, this is the still frame. */
/* the art box spans the panel's full width and runs from its top edge (behind the logo) down to the pitch */
.aside-art { position: relative; z-index: 1; order: 1; flex: 1 1 0; min-height: 0; margin: -104px -40px 0; container-type: size; pointer-events: none; }
/* --u: fit the stack's 665 x 579 box (plus room for the glow) into the art box. Spare height goes 60% above, 40% below
   (top = 60cqh - 398u), and the back pane's top edge must stay clear of the logo: that edge rises .4452 per unit to the
   right, so its height at the logo's right end (x = 196px, clear below y = 90px; --clear = 90 + .4452 * 196) bounds --u
   by (60cqh + 22.26cqw - --clear) / 347 */
.aside-art { --clear: 177px; }
.glass { --u: min(calc(100cqw / 740), calc(100cqh / 680), calc((60cqh + 22.26cqw - var(--clear)) / 347));
  position: absolute; width: calc(var(--u) * 1000); height: calc(var(--u) * 800);
  left: calc(50cqw - var(--u) * 445); top: calc(60cqh - var(--u) * 398); }
.glass-layer { position: absolute; inset: 0; transform-origin: 0 0; }
.glass-layer svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* ambient light behind the stack */
.glass-amb { position: absolute; inset: 0;
  background: radial-gradient(closest-side, rgba(0, 133, 119, .30), rgba(0, 102, 92, .10) 50%, rgba(0, 23, 20, 0) 100%) 55% 52% / 78% 84% no-repeat,
              radial-gradient(closest-side, rgba(43, 255, 234, .12), rgba(43, 255, 234, 0)) 64% 66% / 40% 40% no-repeat; }

/* the panes: rounded rectangles skewed like the logo's. Glass = a tinted gradient (dark at the lower left, lit at the upper
   right, as in the logo), a frosted backdrop, a rim light and a soft inner glow */
.pane { position: absolute; transform: skewY(-24deg); transform-origin: 0 0; border-radius: calc(var(--u) * 30);
  -webkit-backdrop-filter: blur(calc(var(--u) * 7)); backdrop-filter: blur(calc(var(--u) * 7)); }
.pane::before, .pane::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
/* rim: brightest along the top and right edges */
.pane::after { padding: calc(var(--u) * 1.8);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* a soft specular sweep across the glass */
.pane::before { background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .06) 46%, rgba(255, 255, 255, .015) 58%, rgba(255, 255, 255, 0) 70%); }
.pane-1 { left: 11%; top: 25%; width: 30%; height: 37.5%;
  background: linear-gradient(28deg, rgba(0, 18, 26, .72) 0%, rgba(4, 64, 84, .55) 45%, rgba(34, 150, 180, .55) 100%);
  box-shadow: inset 0 0 calc(var(--u) * 30) rgba(70, 200, 235, .16), calc(var(--u) * 3) calc(var(--u) * 2.6) 0 rgba(90, 200, 230, .22), 0 calc(var(--u) * 24) calc(var(--u) * 70) rgba(0, 0, 0, .6); }
.pane-1::after { background: linear-gradient(200deg, rgba(160, 235, 255, .8), rgba(60, 190, 225, .3) 32%, rgba(60, 190, 225, .06) 68%, rgba(60, 190, 225, .2)); }
.pane-2 { left: 28%; top: 32.75%; width: 31%; height: 38.75%;
  background: linear-gradient(28deg, rgba(0, 30, 30, .72) 0%, rgba(0, 120, 116, .5) 42%, rgba(30, 230, 220, .58) 100%);
  box-shadow: inset 0 0 calc(var(--u) * 34) rgba(43, 255, 234, .2), calc(var(--u) * 3) calc(var(--u) * 2.6) 0 rgba(43, 255, 234, .28), 0 calc(var(--u) * 24) calc(var(--u) * 70) rgba(0, 0, 0, .55); }
.pane-2::after { background: linear-gradient(200deg, rgba(200, 255, 250, .95), rgba(43, 255, 234, .4) 32%, rgba(43, 255, 234, .08) 68%, rgba(43, 255, 234, .26)); }
.pane-3 { left: 45.5%; top: 40.6%; width: 32%; height: 40%;
  background: linear-gradient(28deg, rgba(0, 46, 42, .62) 0%, rgba(14, 140, 126, .42) 36%, rgba(80, 240, 220, .42) 70%, rgba(200, 255, 247, .62) 100%);
  box-shadow: inset 0 0 calc(var(--u) * 40) rgba(170, 255, 245, .22), calc(var(--u) * 3) calc(var(--u) * 2.6) 0 rgba(170, 255, 245, .34), 0 calc(var(--u) * 28) calc(var(--u) * 80) rgba(0, 0, 0, .5); }
.pane-3::after { background: linear-gradient(200deg, #fff, rgba(190, 255, 248, .55) 32%, rgba(43, 255, 234, .12) 68%, rgba(43, 255, 234, .32)); }

/* the trail: a hairline plus round dots, glowing */
.seg-glow { fill: none; stroke: rgba(var(--acc-rgb), .22); stroke-width: 9; stroke-linecap: round; }
.seg-line { fill: none; stroke: rgba(var(--acc-rgb), .4); stroke-width: 1.2; }
.seg-dots { fill: none; stroke: rgb(170, 255, 246); stroke-width: 4.2; stroke-linecap: round; stroke-dasharray: 0 12; }
.glass-seg svg { filter: drop-shadow(0 0 calc(var(--u) * 4) rgba(var(--acc-rgb), .8)); }
.glass-seg[data-seg="0"] svg { -webkit-mask: linear-gradient(90deg, transparent 0%, #000 16%); mask: linear-gradient(90deg, transparent 0%, #000 16%); }

/* reported positions where the trail pierces each pane; the last one is bright with a halo */
.pos { position: absolute; width: calc(var(--u) * 16); height: calc(var(--u) * 16); margin: calc(var(--u) * -8) 0 0 calc(var(--u) * -8); border-radius: 50%; }
.pos-1 { left: 18.2%; top: 38.25%; background: #fff; box-shadow: 0 0 0 calc(var(--u) * 4) rgba(255, 255, 255, .12), 0 0 calc(var(--u) * 18) rgba(var(--acc-rgb), .7); }
.pos-2 { left: 37.3%; top: 48.5%; background: var(--acc); box-shadow: 0 0 0 calc(var(--u) * 4) rgba(var(--acc-rgb), .16), 0 0 calc(var(--u) * 22) rgba(var(--acc-rgb), .85); }
.pos-3 { left: 62.1%; top: 57%; width: calc(var(--u) * 26); height: calc(var(--u) * 26); margin: calc(var(--u) * -13) 0 0 calc(var(--u) * -13);
  background: radial-gradient(circle at 40% 38%, #fff 0 35%, rgb(200, 255, 250) 70%, rgb(140, 255, 242));
  box-shadow: 0 0 0 calc(var(--u) * 5) rgba(200, 255, 250, .18), 0 0 calc(var(--u) * 26) rgba(var(--acc-rgb), .95), 0 0 calc(var(--u) * 60) rgba(var(--acc-rgb), .45); }
.pos-halo, .pos-ping { position: absolute; left: 62.1%; top: 57%; border-radius: 50%; }
.pos-halo { opacity: .8; width: calc(var(--u) * 220); height: calc(var(--u) * 220); margin: calc(var(--u) * -110) 0 0 calc(var(--u) * -110);
  background: radial-gradient(closest-side, rgba(var(--acc-rgb), .32), rgba(var(--acc-rgb), .1) 45%, rgba(var(--acc-rgb), 0)); }
.pos-ping { width: calc(var(--u) * 90); height: calc(var(--u) * 90); margin: calc(var(--u) * -45) 0 0 calc(var(--u) * -45);
  box-shadow: inset 0 0 0 calc(var(--u) * 1.5) rgba(var(--acc-rgb), .6), 0 0 calc(var(--u) * 8) rgba(var(--acc-rgb), .35); opacity: 0;
  transform: skewY(-24deg); }
/* the travelling light (positioned and moved by auth-aside.js; hidden without it). Its head is the right end, which
   sits on the transform origin, so the script only translates, rotates and stretches it */
.spark { position: absolute; left: 0; top: 0; width: calc(var(--u) * 110); height: calc(var(--u) * 5); margin: calc(var(--u) * -2.5) 0 0 calc(var(--u) * -110);
  transform-origin: 100% 50%; border-radius: 99px; opacity: 0;
  background: linear-gradient(90deg, rgba(var(--acc-rgb), 0), rgba(var(--acc-rgb), .5) 55%, rgba(200, 255, 250, .95) 90%, #fff);
  box-shadow: 0 0 calc(var(--u) * 14) rgba(var(--acc-rgb), .85); }

.auth-main { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 48px 32px 28px; }
.auth-card { position: relative; isolation: isolate; width: 100%; max-width: 440px; margin-block: auto; padding: 40px;
  border-radius: var(--r-card); background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 30px 80px -30px rgba(0, 0, 0, .75);
  overflow-wrap: anywhere; }
.auth-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--grain) center top / 153.5px auto repeat; opacity: .15; }
.auth-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 32px; font: 500 14px/1.2 var(--sans); }
.auth-foot a { color: var(--text-3); text-decoration: none; }
.auth-foot a:hover { color: var(--text); text-decoration: underline; text-decoration-color: rgba(var(--acc-rgb), .6); }

/* ------------------------------------------------------------ card content */
.auth-head { margin-bottom: 28px; }
.auth-head h1, .auth-state h1 { margin-bottom: 10px; }
.auth-sub { margin: 0; color: var(--text-2); }
.auth-switch { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--line-2); text-align: center; color: var(--text-3); }

.auth-state { margin-bottom: 28px; }
.auth-state p { color: var(--text-2); }
.auth-state p.muted { color: var(--text-3); }
.state-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 24px; border-radius: 16px;
  background: rgba(var(--acc-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), .2); color: var(--acc); }
.state-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.state-aside { display: inline-block; max-width: 100%; margin-bottom: 14px; padding: 5px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font-size: 14px; }
.state-code { display: inline-block; margin: 0 0 18px; padding: 5px 9px; border-radius: 6px; background: rgba(var(--acc-rgb), .16);
  color: var(--acc); font: 600 12px/1 var(--mono); letter-spacing: .04em; }

/* ------------------------------------------------------------ forms */
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label { color: var(--text); font: 500 14px/1.3 var(--sans); }
.optional { margin-left: 4px; color: var(--text-3); font-size: 13px; }
.field-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
/* "Forgot password?" sits under the field, right-aligned: what you see matches the tab order (field, Show, link, Log in) */
.field-with-link > .field-link { justify-self: end; }
.field-link { color: var(--text-2); font-size: 14px; line-height: 1.3; text-decoration: none; }
.field-link:hover { color: var(--text); text-decoration: underline; }
input:not([type="checkbox"]):not([type="hidden"]) { width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--line-field);
  border-radius: var(--r-field); background: var(--field); color: var(--text); caret-color: var(--acc);
  font: 500 16px/1.4 var(--sans); /* 16px: no zoom-on-focus on iOS */
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease); }
input::placeholder { color: var(--text-3); }
input:not([type="checkbox"]):hover { border-color: var(--line-field-hover); }
input:not([type="checkbox"]):focus { outline: none; border-color: rgba(var(--acc-rgb), .85); background-color: var(--field-focus);
  box-shadow: 0 0 0 3px rgba(var(--acc-rgb), .18); }
input:not([type="checkbox"]):user-invalid { border-color: rgba(var(--err-rgb), .75); }
input:not([type="checkbox"]):user-invalid:focus { box-shadow: 0 0 0 3px rgba(var(--err-rgb), .22); }
/* browser autofill keeps the dark field */
input:-webkit-autofill, input:-webkit-autofill:hover { -webkit-text-fill-color: var(--text); caret-color: var(--acc);
  box-shadow: 0 0 0 1000px var(--field) inset; transition: background-color 600000s 0s; }
input:-webkit-autofill:focus { box-shadow: 0 0 0 1000px var(--field-focus) inset, 0 0 0 3px rgba(var(--acc-rgb), .18); }
.hint { margin: 0; color: var(--text-3); font-size: 13.5px; }

/* show/hide password (app.js un-hides the button; without JS the field is a plain password input) */
.pw-wrap { position: relative; }
.pw-wrap.has-toggle input { padding-right: 76px; }
.pw-toggle { position: absolute; top: 7px; right: 7px; bottom: 7px; min-width: 56px; padding: 0 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text-2); font: 500 13.5px/1 var(--sans); cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease); }
.pw-toggle:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
.pw-toggle:focus-visible { outline-offset: 0; }

.check-field { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--text-2);
  font-size: 14px; line-height: 1.5; cursor: pointer; }
.check-field input { -webkit-appearance: none; appearance: none; display: grid; place-content: center; width: 18px; height: 18px; margin: 2px 0 0;
  border: 1px solid var(--line-check); border-radius: 5px; background: var(--field); cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.check-field input::before { content: ""; width: 12px; height: 12px; background: var(--ink); transform: scale(0); transition: transform .12s var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.check-field input:hover { border-color: var(--line-field-hover); }
.check-field input:checked { border-color: var(--acc); background: var(--acc); }
.check-field input:checked::before { transform: scale(1); }
.check-field input:user-invalid { border-color: rgba(var(--err-rgb), .8); }
@media (forced-colors: active) { .check-field input { -webkit-appearance: auto; appearance: auto; } .check-field input::before { display: none; } }

/* ------------------------------------------------------------ buttons: teal pill like the site's "Try Now" */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border: 0;
  border-radius: 32px; font: 600 16px/1.2 var(--sans); letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--acc); color: var(--ink); }
.btn-primary:hover { background: var(--acc-hover); color: var(--ink); }
/* the site's hover arrow: slides in next to the label */
.btn-primary::after { content: ""; flex: none; width: 0; height: 19px; margin-left: -8px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") left center / 19px 19px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") left center / 19px 19px no-repeat;
  transition: width .1s var(--ease), margin-left .1s var(--ease); }
.btn-primary:focus-visible::after { width: 19px; margin-left: 0; }
@media (hover: hover) { .btn-primary:hover::after { width: 19px; margin-left: 0; } }
/* secondary: the site's white pill ("Get Started") */
.btn-secondary { background: #fff; color: rgb(31, 31, 31); box-shadow: none; }
.btn-secondary:hover { background: rgba(255, 255, 255, .88); color: rgb(31, 31, 31); }
@media (forced-colors: active) { .btn { border: 1px solid ButtonText; } }

/* ------------------------------------------------------------ notices and errors */
.notice, .error { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; padding: 12px 14px; border-radius: var(--r-field);
  font: 500 14px/1.45 var(--sans); }
.notice p { margin: 0; color: inherit; }
.notice-icon { width: 8px; height: 8px; flex: none; margin-top: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.notice-ok { background: rgba(var(--acc-rgb), .07); color: var(--acc); box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), .24); }
.notice-error, .error { background: rgba(var(--err-rgb), .09); color: var(--err); box-shadow: inset 0 0 0 1px rgba(var(--err-rgb), .3); }
.notice-warn { background: rgba(var(--warn-rgb), .08); color: var(--warn); box-shadow: inset 0 0 0 1px rgba(var(--warn-rgb), .28); }
.notice-info { background: rgba(255, 255, 255, .05); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
/* decorative: the empty alt text keeps screen readers from announcing "!" (engines without alt syntax keep the first value) */
.error::before { content: "!"; content: "!" / ""; display: grid; place-items: center; width: 18px; height: 18px; flex: none; margin-top: 1px; border-radius: 50%;
  background: var(--err); color: var(--ink); font: 600 12px/1 var(--sans); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1199.98px) {
  .auth-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .auth-aside { padding: 28px 32px 32px; }
  .aside-art { --clear: 170px; margin: -100px -32px 0; }   /* logo ends at x = 188px, clear below y = 86px */
}
/* tablet and phone: the panel becomes a short banner with the logo and a compact crop of the glass stack on the right;
   the form takes the full width */
@media (max-width: 899.98px) {
  .auth-layout { display: flex; flex-direction: column; }   /* flex: the banner's top margin stays inside the page */
  .auth-aside { position: relative; top: auto; align-self: center; width: calc(100% - 32px); max-width: 440px; height: 168px; min-height: 0;
    margin: 16px 0 0; padding: 20px; }
  .aside-art { position: absolute; inset: 0; margin: 0; }
  .glass { --u: calc(100cqh / 680); left: calc(100cqw - var(--u) * 830); top: calc(50cqh - var(--u) * 352); }   /* stack at the right */
  .auth-pitch { display: none; }
  .auth-logo img { height: 34px; }
  .auth-main { flex: 1 0 auto; padding: 24px 16px 28px; }
  .auth-card { margin-block: 0; }
  .auth-foot { margin-top: 28px; }
}
@media (max-width: 479.98px) {
  .auth-card { padding: 28px 20px; }
  h1 { font-size: 30px; }
  .auth-head { margin-bottom: 24px; }
  .field-pair { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}