/* ===========================================================================
   SWAYA — signed-out pages  (v3)

   The component layer for every page a person meets before they sign in: sign
   in, create account, the demo door and the privacy notice. Loads on top of
   swaya-tokens.css, which is where the palette, type and shadows live.
   =========================================================================== */

/* ================================================================= stage ==
   An aurora over deep navy. Three layers, in paint order:

     .stage          the ground — navy, and nothing else
     .stage::before  the colour — five soft fields in the product's own hues,
                     laid off-centre and drifting on a very slow cycle
     .stage::after   the finish — a grain to stop the gradients banding, and a
                     vignette that pulls the corners down so the card is the
                     brightest thing on screen

   Still no particles, no lines and no scenery: the interest is in the light,
   which is what makes a background feel deep rather than decorated. It is all
   gradients and one transform, so there is nothing to download and the
   compositor carries the movement without a repaint. The whole thing stops
   under prefers-reduced-motion. */
.stage{
  min-height:100dvh; position:relative; isolation:isolate;
  background:linear-gradient(168deg,#08131F 0%,#0B1B2D 38%,#0E2136 68%,#132C48 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}
/* The colour. Inset past the edges so the fields can drift without ever
   showing a seam, and blurred so they read as light rather than as shapes. */
.stage::before{
  content:""; position:fixed; inset:-25%; z-index:var(--z-bg); pointer-events:none;
  background:
    radial-gradient(30vmax 26vmax at 14% 18%, rgba(56,174,234,.62), transparent 62%),
    radial-gradient(26vmax 24vmax at 80% 14%, rgba(140,122,224,.42), transparent 62%),
    radial-gradient(34vmax 27vmax at 90% 68%, rgba(46,109,158,.62), transparent 64%),
    radial-gradient(30vmax 25vmax at 26% 86%, rgba(46,158,123,.30), transparent 62%),
    radial-gradient(26vmax 22vmax at 54% 46%, rgba(137,207,240,.22), transparent 64%);
  filter:blur(26px);
  animation:aurora 52s ease-in-out infinite;
}
/* The finish: a vignette, and nothing else. A grain layer went in here first
   and came straight back out — at any opacity strong enough to be worth having
   it read as a grey veil over the colour, which is the opposite of the point. */
.stage::after{
  content:""; position:fixed; inset:0; z-index:var(--z-bg); pointer-events:none;
  background:radial-gradient(148vmax 104vmax at 50% 46%, transparent 26%, rgba(4,10,18,.66) 100%);
}
@keyframes aurora{
  0%,100%{transform:translate3d(0,0,0)   scale(1)}
  33%    {transform:translate3d(2.5%,-2%,0) scale(1.09)}
  66%    {transform:translate3d(-2%,2.5%,0) scale(1.05)}
}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes nudge{
  10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)}}
@keyframes authOutNext{to{opacity:0;transform:translateX(-18px) scale(.985)}}
@keyframes authInNext{from{opacity:0;transform:translateX(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes authOutBack{to{opacity:0;transform:translateX(18px) scale(.985)}}
@keyframes authInBack{from{opacity:0;transform:translateX(-18px) scale(.985)}to{opacity:1;transform:none}}

/* ================================================================== card ==
   One card, centred, and nothing beside it. The marketing column that used to
   sit on the left was the taller-shorter-column problem in permanent residence
   — and a person at a sign-in screen is not there to read a pitch. The page is
   now the logo, the card, and one line of small print.

   Everything decorative that is left is in the role switcher below, which is
   the only thing on the page anybody actually interacts with before typing. */
.auth{
  position:relative; z-index:var(--z-body);
  min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:clamp(14px,2.6vh,36px) 20px;
  gap:14px;
}
/* The one effect on the page: a pool of light under the card, so a white
   rectangle reads as lit rather than pasted onto the navy. */
.auth::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; top:50%; width:min(920px,150%); aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(87,184,232,.20),transparent 70%);
}
.auth-logo{flex:none;display:block}
.auth-logo img{width:132px;max-height:34px;object-fit:contain;display:block;
  filter:drop-shadow(0 6px 22px rgba(11,27,45,.5))}

.auth-card{
  width:min(448px,100%);
  padding:clamp(18px,2.3vw,22px);
  border-radius:var(--r-xl);
  background:var(--paper);
  box-shadow:var(--sh-4), inset 0 1px 0 rgba(255,255,255,.7),
             0 0 0 1px rgba(255,255,255,.10);
  animation:rise .45s var(--ease) both;
}

.auth-foot{
  flex:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  font-size:11.5px;color:var(--on-dark-3);text-align:center;
}
.auth-foot .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;flex:none}
.auth-foot a{color:var(--on-dark-3);text-decoration:none;border-bottom:1px solid transparent}
.auth-foot a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.4)}

.form-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:13px}
.form-head .t{flex:1;min-width:0}
.form-head h2{margin:0;font:600 20px/1.25 var(--head);letter-spacing:-.022em}
/* The subtitle is the chosen role's own description, so it changes as the
   switcher moves. Held at two lines: a heading that resizes as you click
   around is a heading that shoves the form under your cursor. */
.form-head p{margin:7px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted);
  text-wrap:pretty;min-height:2.5em}
.form-head p.swap-in{animation:fadeUp .34s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* language toggle — a real 2-state control, not two links */
.lang{display:flex;flex:none;padding:3px;gap:2px;border-radius:10px;
  background:var(--paper-3);border:1px solid var(--line)}
.lang button{border:0;background:transparent;cursor:pointer;border-radius:7px;
  min-width:38px;min-height:30px;padding:0 9px;
  font:500 11px var(--mono);letter-spacing:.04em;color:var(--muted);
  transition:background var(--fast),color var(--fast),box-shadow var(--fast)}
.lang button:hover:not([aria-pressed="true"]){color:var(--navy);background:rgba(22,50,79,.06)}
.lang button[aria-pressed="true"]{background:var(--paper);color:var(--navy);
  box-shadow:var(--sh-1);font-weight:600}

/* ------------------------------------------------------------ role picker --
   The one thing on this page worth animating. Four radios, drawn as a
   segmented control with a thumb that slides between them: the selection
   moves rather than teleports, which is the difference between a control that
   responds and four boxes that blink.

   The slide is pure CSS — `:has()` reads which radio is checked and drives one
   transform, so it works with the keyboard, with the browser's own form
   restore, and with the script switched off entirely. No JS drives the
   movement; JS only rewrites the two strings that describe the choice. */
.section-label{display:block;font:500 10px var(--mono);letter-spacing:.13em;
  color:var(--faint);margin:0 0 9px}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0}

.roles{
  position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  padding:5px; border-radius:15px;
  background:var(--paper-2); border:1px solid var(--line);
  box-shadow:inset 0 1px 2px rgba(22,50,79,.05);
}
/* the thumb */
.role-glide{
  position:absolute; z-index:0; pointer-events:none;
  top:5px; bottom:5px; inset-inline-start:5px;
  width:calc((100% - 10px) / 4);
  border-radius:11px; background:var(--paper);
  box-shadow:0 1px 2px rgba(14,33,54,.10), 0 6px 16px rgba(22,50,79,.13);
  /* a touch of overshoot, so it arrives with weight instead of easing to a
     polite stop */
  transition:transform .34s cubic-bezier(.34,1.32,.5,1), box-shadow var(--med);
}
/* One rule per seat. Four is few enough to write out, and writing them out is
   what keeps the movement in CSS instead of in a script. */
.roles:has(.role:nth-of-type(1) input:checked) .role-glide{transform:translateX(0)}
.roles:has(.role:nth-of-type(2) input:checked) .role-glide{transform:translateX(100%)}
.roles:has(.role:nth-of-type(3) input:checked) .role-glide{transform:translateX(200%)}
.roles:has(.role:nth-of-type(4) input:checked) .role-glide{transform:translateX(300%)}
html[dir="rtl"] .roles:has(.role:nth-of-type(2) input:checked) .role-glide{transform:translateX(-100%)}
html[dir="rtl"] .roles:has(.role:nth-of-type(3) input:checked) .role-glide{transform:translateX(-200%)}
html[dir="rtl"] .roles:has(.role:nth-of-type(4) input:checked) .role-glide{transform:translateX(-300%)}
/* The thumb picks up a hairline of the chosen role's own colour. */
.roles:has(.role:nth-of-type(1) input:checked) .role-glide{box-shadow:0 1px 2px rgba(14,33,54,.10),0 6px 16px rgba(22,50,79,.13),inset 0 0 0 1.5px #BFDCF2}
.roles:has(.role:nth-of-type(2) input:checked) .role-glide{box-shadow:0 1px 2px rgba(14,33,54,.10),0 6px 16px rgba(22,50,79,.13),inset 0 0 0 1.5px #B9E3CE}
.roles:has(.role:nth-of-type(3) input:checked) .role-glide{box-shadow:0 1px 2px rgba(14,33,54,.10),0 6px 16px rgba(22,50,79,.13),inset 0 0 0 1.5px #D3C7EE}
.roles:has(.role:nth-of-type(4) input:checked) .role-glide{box-shadow:0 1px 2px rgba(14,33,54,.10),0 6px 16px rgba(22,50,79,.13),inset 0 0 0 1.5px #F0DCA8}

.role{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:7px 3px; min-height:52px; border-radius:11px; cursor:pointer;
  transition:transform var(--fast);
}
.role input{position:absolute;opacity:0;width:0;height:0}
.role .mark{
  width:27px;height:27px;flex:none;border-radius:8px;display:grid;place-items:center;
  color:var(--navy);
  /* Unchosen seats hold their tint back so the row reads as one control and
     not as four competing badges; the chosen one comes up to full. */
  filter:saturate(.35) opacity(.7);
  transition:filter var(--med),transform .34s cubic-bezier(.34,1.32,.5,1),
             box-shadow var(--med);
}
.role .mark svg{width:15px;height:15px}
.role b{max-width:100%;font-size:11.5px;font-weight:500;color:var(--muted);
  letter-spacing:-.01em;line-height:1.2;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color var(--fast),font-weight var(--fast)}
.role:hover .mark{filter:saturate(.7) opacity(.9)}
.role:hover b{color:var(--text-2)}
.role:has(input:checked) .mark{
  filter:none; transform:translateY(-1px) scale(1.06);
  box-shadow:0 3px 9px rgba(22,50,79,.16), inset 0 0 0 1px rgba(255,255,255,.75);
}
.role:has(input:checked) b{color:var(--navy);font-weight:600}
.role:has(input:focus-visible){outline:2px solid var(--sky-deep);outline-offset:3px;
  border-radius:11px}
.role:active{transform:scale(.97)}

@media (prefers-reduced-motion:reduce){
  .role-glide{transition:none}
}

/* ---------------------------------------------------------------- fields -- */
.divider{height:1px;background:var(--line);margin:13px 0}
.field{display:flex;flex-direction:column;gap:7px}
.field + .field{margin-top:10px}
.field-top{display:flex;align-items:baseline;gap:10px}
.field-top label{flex:1;font:500 10px var(--mono);letter-spacing:.13em;color:var(--faint)}
.field-top a{font-size:11.5px;color:var(--steel);text-decoration:none;font-weight:500;
  padding:6px 2px;margin:-6px -2px;border-radius:6px}
.field-top a:hover{text-decoration:underline}

.input-wrap{position:relative;display:flex}
.input{
  flex:1;min-width:0;min-height:43px;padding:11px 14px;
  border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--paper);font-size:14px;color:var(--text);outline:none;
  transition:border-color var(--fast),box-shadow var(--fast),background var(--fast);
}
.input::placeholder{color:#9DAEBD}
.input:hover:not(:focus){border-color:#BACEDE}
.input:focus{border-color:var(--sky-deep);box-shadow:0 0 0 4px rgba(87,184,232,.16)}
.input[type=password],.input[data-pw]{padding-inline-end:46px}
/* the reveal button lives inside the box, so it needs the room */
.peek{
  position:absolute;inset-inline-end:5px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border:0;border-radius:var(--r-xs);background:transparent;
  cursor:pointer;color:var(--faint);display:grid;place-items:center;
  transition:color var(--fast),background var(--fast);
}
.peek:hover{color:var(--navy);background:rgba(22,50,79,.06)}

.assist{font-size:11px;line-height:1.5;color:var(--muted);margin-top:2px;min-height:0}
.assist.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em}
.assist.ok{color:var(--mint)} .assist.bad{color:var(--coral)}
.warn{display:none;align-items:center;gap:6px;font-size:11px;color:#8A6A16;
  margin-top:2px}
.warn.on{display:flex}
.warn svg{width:12px;height:12px;flex:none}

/* password strength — four bars, because a single word is not a measurement */
.meter{display:flex;gap:4px;margin-top:8px}
.meter i{flex:1;height:3px;border-radius:2px;background:var(--line-2);
  transition:background var(--med)}
.meter i.on-1{background:var(--coral)}
.meter i.on-2{background:var(--amber)}
.meter i.on-3{background:var(--sky-deep)}
.meter i.on-4{background:var(--mint)}

/* checkbox */
.check{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:12.5px;
  color:var(--text-2);margin-top:9px;user-select:none}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{width:18px;height:18px;flex:none;border-radius:6px;border:1.5px solid var(--line-2);
  background:var(--paper);display:grid;place-items:center;color:#fff;
  transition:background var(--fast),border-color var(--fast)}
.check .box svg{width:11px;height:11px;opacity:0;transition:opacity .12s}
.check:has(input:checked) .box{background:var(--navy);border-color:var(--navy)}
.check:has(input:checked) .box svg{opacity:1}
.check:has(input:focus-visible) .box{outline:2px solid var(--sky-deep);outline-offset:2px}

/* --------------------------------------------------------------- buttons -- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  min-height:45px;padding:12px 18px;border:0;border-radius:var(--r-sm);cursor:pointer;
  font-family:var(--font);font-size:14px;font-weight:600;letter-spacing:-.005em;
  text-decoration:none;
  transition:background var(--med),box-shadow var(--med),transform .1s var(--ease),
             border-color var(--fast),color var(--fast);
}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{cursor:progress;opacity:.7}
.btn svg{flex:none}

.btn-primary{
  color:#fff;
  background:linear-gradient(135deg,#16324F 0%,#24506F 46%,#2E6D9E 100%);
  background-size:170% 170%; background-position:0% 50%;
  box-shadow:0 1px 2px rgba(14,33,54,.2),0 12px 26px rgba(22,50,79,.28);
}
.btn-primary:hover:not(:disabled){background-position:100% 50%;
  box-shadow:0 1px 2px rgba(14,33,54,.2),0 16px 34px rgba(22,50,79,.34)}
.btn-secondary{
  background:var(--paper);color:var(--navy);
  border:1.5px solid var(--line-2);box-shadow:var(--sh-1);min-height:43px;font-size:12.5px;
}
.btn-secondary:hover:not(:disabled){border-color:var(--sky-deep);background:var(--paper-2)}
/* the admin route stops being a footnote once Admin is the chosen role */
.btn-secondary.promoted{
  background:linear-gradient(135deg,rgba(137,207,240,.24),rgba(196,183,242,.18));
  border-color:rgba(87,184,232,.6);box-shadow:0 6px 18px rgba(46,109,158,.14);
}
.btn .spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none}
.btn[data-busy="1"] .spin{display:block}
.btn[data-busy="1"] .arrow{display:none}

.or{display:flex;align-items:center;gap:12px;margin:8px 0 6px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.or span{font:500 9.5px var(--mono);letter-spacing:.14em;color:var(--faint)}

/* ------------------------------------------------------------- Face ID ----
   Every administrator but the main one signs in by face, and nobody else can.
   So it is a quiet line until Admin is the chosen seat, and a real button the
   moment it is — the card answering the switcher rather than carrying a
   full-weight control that three roles out of four cannot use. */
.auth-card:not([data-role="admin"]) .or{display:none}
.auth-card:not([data-role="admin"]) #btn-faceid{
  min-height:34px; margin-top:10px; font-size:11.5px; font-weight:500;
  color:var(--muted); background:transparent; border-color:transparent;
  box-shadow:none;
}
.auth-card:not([data-role="admin"]) #btn-faceid:hover{
  color:var(--navy); background:var(--paper-2); border-color:var(--line);
}
.auth-card:not([data-role="admin"]) #btn-faceid svg{opacity:.6}
#btn-faceid{transition:min-height var(--med),background var(--med),
            border-color var(--med),color var(--fast),box-shadow var(--med),
            font-size var(--med)}

/* -------------------------------------------------------------- demo tile --
   The only way in for somebody who has not been given an account, which is
   everybody looking at this for the first time. Tinted rather than outlined so
   it reads as an invitation and not as a third credential prompt. */
.tile{
  display:flex;align-items:center;gap:11px;margin-top:6px;padding:7px 12px;
  border-radius:var(--r-sm);text-decoration:none;cursor:pointer;
  background:linear-gradient(135deg,rgba(137,207,240,.22),rgba(168,224,206,.16));
  border:1px solid rgba(87,184,232,.38);
  transition:background var(--med),border-color var(--fast),box-shadow var(--med),transform .1s;
}
.tile:hover{background:linear-gradient(135deg,rgba(137,207,240,.36),rgba(168,224,206,.26));
  border-color:rgba(87,184,232,.72);box-shadow:0 8px 22px rgba(46,109,158,.16)}
.tile:active{transform:translateY(1px)}
.tile .ic{width:28px;height:28px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.8);color:var(--navy);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)}
.tile .txt{flex:1;min-width:0}
.tile .txt b{display:block;font-size:13px;font-weight:600;color:var(--navy)}
.tile .txt span{display:block;font-size:11.5px;line-height:1.45;color:var(--text-2);margin-top:3px}
.tile .go{flex:none;color:var(--steel)}
html[dir="rtl"] .tile .go{transform:scaleX(-1)}

/* ---------------------------------------------------------- demo flip --
   Sign-in and the demo door are two faces of the same task. Keeping them in
   one physical card removes the old intermediate page without making the
   choice feel like a modal or a second site. */
.auth-card-stage{
  width:min(448px,100%);perspective:1300px;animation:rise .45s var(--ease) both;
  /* One duration, and the half-turn read off it rather than typed again. The
     faces below swap at --flip-half, so the swap and the rotation cannot fall
     out of step the way .36s and .72s already did once. */
  --flip:.6s;
  --flip-half:calc(var(--flip) / 2);
  /* Symmetric about (.5,.5) — x2 = 1-x1, y2 = 1-y1 — which is what puts 50%
     of the rotation at 50% of the time and makes --flip-half the edge-on
     half-turn. Keep that property or the swap stops being invisible. */
  --flip-ease:cubic-bezier(.72,0,.28,1);
}
.auth-card-stage.auth-nav-out-next,.auth-card.auth-nav-out-next{animation:authOutNext .2s var(--ease) both}
.auth-card-stage.auth-nav-out-back,.auth-card.auth-nav-out-back{animation:authOutBack .2s var(--ease) both}
.auth-card-stage.auth-nav-in-next,.auth-card.auth-nav-in-next{animation:authInNext .28s var(--ease) both}
.auth-card-stage.auth-nav-in-back,.auth-card.auth-nav-in-back{animation:authInBack .28s var(--ease) both}
.auth-card-flipper{display:grid;transform-style:preserve-3d;
  transition:transform var(--flip) var(--flip-ease)}
.auth-card-stage.demo-open .auth-card-flipper{transform:rotateY(180deg)}
html[dir="rtl"] .auth-card-stage.demo-open .auth-card-flipper{transform:rotateY(-180deg)}
/* Both faces share one grid cell, and centred is the only alignment that lets
   them share a centre. The demo face is the shorter of the two by about the
   height of the password block, so anchoring it to the top meant the card lost
   that much off its bottom edge in a single frame at the half-turn — and since
   the page centres the stage, the whole card lurched upward at the same
   instant. Read as a second, separate flip with a gap in front of it. Centred,
   the two faces turn about the same axis and the swap is a change of face and
   nothing else. */
.auth-card-face{grid-area:1/1;width:100%;align-self:center;animation:none;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  /* backface-visibility alone does not hold. A descendant that gets its own
     compositing layer is painted on its own terms, and the role marks carry a
     filter, so the sign-in role row came through the demo card mirrored and
     landed on top of the demo's own labels. Take the face that is turned away
     out of painting altogether, at the half-turn, where the card is edge-on
     and neither face is on screen to see it happen. Both faces are scheduled
     off the same --flip-half, so they turn over in one style recalc and there
     is no frame with neither of them on screen. */
  transition:visibility 0s linear var(--flip-half)}
.auth-card-back{transform:rotateY(180deg);pointer-events:none;visibility:hidden}
html[dir="rtl"] .auth-card-back{transform:rotateY(-180deg)}
.auth-card-stage.demo-open .auth-card-front{pointer-events:none;visibility:hidden}
.auth-card-stage.demo-open .auth-card-back{pointer-events:auto;visibility:visible}
/* Landing on the demo face from a /login?demo=1 link, where the page is
   already playing its own entry animation and a flip on top of it is two
   motions for one arrival. */
.auth-card-stage.flip-instant .auth-card-flipper,
.auth-card-stage.flip-instant .auth-card-face{transition:none}
.tile{width:100%;font-family:var(--font);text-align:initial}
.demo-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:15px}
.demo-head .t{flex:1;min-width:0}
.demo-head h2{margin:0;font:600 20px/1.25 var(--head);letter-spacing:-.022em}
.demo-head p{margin:5px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.demo-back{width:34px;height:34px;flex:none;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);color:var(--navy);cursor:pointer;display:grid;place-items:center;
  transition:background var(--fast),border-color var(--fast),transform var(--fast)}
.demo-back:hover{background:var(--ice);border-color:var(--sky);transform:translateX(-2px)}
html[dir="rtl"] .demo-back:hover{transform:translateX(2px)}
.demo-private{display:flex;align-items:flex-start;gap:8px;margin-top:13px;color:var(--muted);
  font-size:11.5px;line-height:1.5}
.demo-private svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--mint)}
@media (prefers-reduced-motion:reduce){
  .auth-card-flipper{transition:none}
  .auth-card-face{transition:none}
  .auth-card-stage.auth-nav-out-next,.auth-card.auth-nav-out-next,
  .auth-card-stage.auth-nav-out-back,.auth-card.auth-nav-out-back,
  .auth-card-stage.auth-nav-in-next,.auth-card.auth-nav-in-next,
  .auth-card-stage.auth-nav-in-back,.auth-card.auth-nav-in-back{animation:none}
}

/* ------------------------------------------------------------------ notes -- */
.swap{margin-top:7px;text-align:center;font-size:12px;color:var(--muted)}
.swap a{color:var(--steel);font-weight:600;text-decoration:none;
  display:inline-block;padding:7px 4px;margin:-7px -4px;border-radius:6px}
.swap a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- alerts -- */
.alert{
  display:flex;align-items:flex-start;gap:10px;margin:0 0 16px;padding:12px 14px;
  border-radius:var(--r-sm);font-size:12.5px;line-height:1.55;
  background:rgba(226,98,75,.09);border:1px solid rgba(226,98,75,.34);color:#8C2F1C;
  animation:rise .2s var(--ease);
}
.alert svg{width:15px;height:15px;flex:none;margin-top:1px}
.alert.info{background:rgba(232,178,58,.13);border-color:rgba(232,178,58,.44);color:#7A5C10}
.alert.good{background:rgba(46,158,123,.10);border-color:rgba(46,158,123,.36);color:#1C6B52}
.shake{animation:nudge .5s}

/* ----------------------------------------------------------------- modal -- */
.scrim{position:fixed;inset:0;z-index:var(--z-overlay);display:grid;place-items:center;padding:20px;
  background:rgba(11,27,45,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.scrim[hidden]{display:none}
.modal{width:min(420px,100%);border-radius:var(--r-xl);overflow:hidden;background:var(--paper);
  box-shadow:var(--sh-4);animation:rise .2s var(--ease)}
.modal-head{display:flex;align-items:center;gap:10px;padding:15px 18px;
  border-bottom:1px solid var(--line)}
.modal-head b{flex:1;font:600 14px var(--head);letter-spacing:-.015em}
.modal-head button{border:0;background:transparent;cursor:pointer;color:var(--muted);
  width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:19px;line-height:1}
.modal-head button:hover{background:var(--paper-3);color:var(--navy)}
.modal-body{position:relative;background:var(--ink)}
.modal-body video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  background:var(--ink);transform:scaleX(-1)}
.reticle{position:absolute;inset:14% 22%;border-radius:22px;pointer-events:none;
  box-shadow:0 0 0 2px rgba(137,207,240,.6),0 0 0 9999px rgba(14,33,54,.3)}
.modal-foot{padding:15px 18px;display:flex;flex-direction:column;gap:11px}
.modal-foot p{margin:0;font-size:12px;line-height:1.5;color:var(--muted);min-height:18px}

/* ================================================== wide / marketing pages ==
   The demo door and the privacy notice are not one card, so they get a page
   shell instead: a slim bar, a measured column and the same stage behind. */
.shell{position:relative;z-index:var(--z-body);width:min(1120px,100%);
  margin-inline:auto;padding:clamp(18px,3vw,34px) clamp(16px,4vw,32px) 60px}
.bar{display:flex;align-items:center;gap:16px;margin-bottom:clamp(28px,5vw,54px)}
.bar img{width:clamp(140px,13vw,180px);max-height:48px;object-fit:contain;object-position:left}
html[dir="rtl"] .bar img{object-position:right}
.bar .grow{flex:1}
.backlink{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:99px;
  font-size:12.5px;font-weight:500;text-decoration:none;color:var(--on-dark-2);
  border:1px solid var(--on-dark-line);background:rgba(255,255,255,.04);
  transition:background var(--fast),color var(--fast),border-color var(--fast)}
.backlink:hover{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(137,207,240,.4)}
html[dir="rtl"] .backlink svg{transform:scaleX(-1)}

.lede{max-width:64ch;color:var(--on-dark);display:flex;flex-direction:column;gap:18px;
  animation:rise .5s var(--ease) both}
.lede h1{margin:0;font:600 clamp(30px,4.4vw,46px)/1.14 var(--head);letter-spacing:-.03em;
  text-wrap:balance}
.lede p{margin:0;font-size:15px;line-height:1.75;color:var(--on-dark-2);text-wrap:pretty}
.lede p b{color:#fff;font-weight:600}

.figstrip{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.figstrip div{display:flex;align-items:baseline;gap:7px;padding:9px 14px;border-radius:99px;
  background:rgba(255,255,255,.05);border:1px solid var(--on-dark-line)}
.figstrip b{font:600 15px var(--head);color:#fff;font-variant-numeric:tabular-nums}
.figstrip span{font-size:11.5px;color:var(--on-dark-3)}

/* The persona cards on the demo door. Two columns rather than as many as fit:
   there are four of them, and auto-fit landed on three at laptop widths, which
   leaves one card stranded on a row of its own. */
.deck{display:grid;gap:16px;margin-top:clamp(26px,4vw,40px);
  grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){ .deck{grid-template-columns:repeat(2,minmax(0,1fr))} }
.deck-card{
  display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:var(--r-xl);
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 18px 40px rgba(8,20,34,.28);
  transition:border-color var(--med),transform var(--med),box-shadow var(--med),background var(--med);
}
.deck-card:hover{transform:translateY(-3px);background:rgba(255,255,255,.085);
  border-color:rgba(137,207,240,.42);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 26px 56px rgba(8,20,34,.4)}
.deck-top{display:flex;align-items:center;gap:12px}
.deck-top .mark{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;
  color:var(--navy);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.deck-top .mark svg{width:21px;height:21px}
.deck-top b{display:block;font:600 15px var(--head);color:#fff;letter-spacing:-.015em}
.deck-top span{display:block;font-size:12px;color:var(--on-dark-3);margin-top:2px}
.deck-card > p{margin:0;font-size:13px;line-height:1.65;color:var(--on-dark-2)}
.trylist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;
  padding-top:14px;border-top:1px solid var(--on-dark-line)}
.trylist li{display:flex;gap:9px;font-size:12px;line-height:1.5;color:var(--on-dark-2)}
.trylist svg{width:13px;height:13px;flex:none;margin-top:3px;color:var(--sky)}
.deck-card .btn{margin-top:auto}

/* a strip of facts under the deck */
.facts{display:grid;gap:14px;margin-top:clamp(26px,4vw,38px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.fact{display:flex;gap:12px;padding:16px 18px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.04);border:1px solid var(--on-dark-line)}
.fact svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--sky)}
.fact b{display:block;font-size:13px;font-weight:600;color:#fff;margin-bottom:5px}
.fact span{display:block;font-size:12px;line-height:1.6;color:var(--on-dark-3)}

/* ============================================================ light pages ==
   The privacy notice is a document, so it stops being glass and becomes
   paper: one measured column, generous leading, real headings. */
.doc-body{background:var(--paper-2);color:var(--text)}
.doc-bar{position:sticky;top:0;z-index:var(--z-sticky);
  background:rgba(255,255,255,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line)}
.doc-bar .in{width:min(1080px,100%);margin-inline:auto;display:flex;align-items:center;gap:16px;
  padding:12px clamp(16px,4vw,28px)}
.doc-bar img{width:150px;max-height:40px;object-fit:contain;object-position:left}
.doc-hero{background:linear-gradient(168deg,#0E2136,#16324F 60%,#1D4265);color:var(--on-dark);
  padding:clamp(38px,6vw,72px) 0 clamp(34px,5vw,60px)}
.doc-hero .in{width:min(1080px,100%);margin-inline:auto;padding-inline:clamp(16px,4vw,28px)}
.doc{width:min(1080px,100%);margin-inline:auto;padding:clamp(28px,5vw,52px) clamp(16px,4vw,28px) 80px;
  display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,4vw,52px);align-items:start}
.toc{position:sticky;top:76px;display:flex;flex-direction:column;gap:2px}
.toc b{font:500 10px var(--mono);letter-spacing:.13em;color:var(--faint);padding:0 10px 8px}
.toc a{display:block;padding:7px 10px;border-radius:8px;font-size:12.5px;color:var(--text-2);
  text-decoration:none;border-inline-start:2px solid transparent;
  transition:background var(--fast),color var(--fast),border-color var(--fast)}
.toc a:hover{background:var(--paper-3);color:var(--navy)}
.prose{min-width:0;max-width:72ch;font-size:14.5px;line-height:1.78;color:var(--text-2)}
.prose section + section{margin-top:38px}
.prose h2{font:600 19px/1.3 var(--head);letter-spacing:-.02em;color:var(--text);
  margin:0 0 12px;scroll-margin-top:84px}
.prose h3{font:600 14.5px/1.4 var(--head);color:var(--text);margin:22px 0 8px}
.prose p{margin:0 0 12px}
.prose ul,.prose ol{margin:0 0 12px;padding-inline-start:20px}
.prose li{margin-bottom:7px}
.prose strong{color:var(--text);font-weight:600}
.prose a{color:var(--steel);text-decoration:underline;text-underline-offset:2px}
.callout{padding:16px 18px;border-radius:var(--r-md);background:#FFFBEB;
  border:1px solid #FDE68A;color:#7A5C10;font-size:13.5px;line-height:1.7;margin:0 0 18px}
.card-plain{padding:18px 20px;border-radius:var(--r-lg);background:var(--paper);
  border:1px solid var(--line);box-shadow:var(--sh-1);margin:0 0 16px}

/* ============================================================== responsive ==
   Two breakpoints, both about the same thing: the panel stops being two
   columns and the brand half becomes a header. */
@media (max-width:900px){
    width:min(520px,100%);border-radius:var(--r-xl)}
  .doc{grid-template-columns:1fr}
  .toc{position:static;flex-direction:row;flex-wrap:wrap;gap:6px;
    padding-bottom:14px;border-bottom:1px solid var(--line)}
  .toc b{width:100%;padding:0 0 6px}
  .toc a{border:1px solid var(--line);border-radius:99px;padding:6px 12px;background:var(--paper)}
}
@media (max-width:560px){
  body{font-size:14.5px}
  .auth{padding:16px 12px;gap:12px}
  .auth-card{padding:18px 16px;border-radius:var(--r-lg)}
  .form-head h2{font-size:19px}
  .role{min-height:56px;padding:8px 2px}
  .role b{font-size:11px}
  /* 16px minimum, or iOS zooms the page on focus */
  .input{font-size:16px;min-height:50px}
  .scrim{padding:0;align-items:flex-end}
  .modal{width:100%;border-radius:var(--r-xl) var(--r-xl) 0 0}
  .deck{grid-template-columns:1fr}
}