/* ───────────────────────────────────────────────────────────────
   Sitehouse — authentication pages
   A pixel-locked composition reconstructed from a 1464×949 reference
   frame: falcon footage on the left, a glass card on the right.

   Every number below is calibrated, not approximate. The deliberate
   asymmetries are load-bearing — the two headline lines differ in size
   and tracking, the OR rules differ by a pixel, the two inputs differ in
   fill, height, border and padding, and --login-padl is negative to
   optically centre the Login label against its trailing arrow.

   Three modes, all driven by assets/auth.js:
     land     two columns, card interior scaled from the reference
     tabport  photo becomes a masthead, card interior goes fluid
     phone    real document flow, nothing viewport-scaled
   ─────────────────────────────────────────────────────────────── */

:root {
  --W:1464; --H:949; --photoW:836; --paneW:628; --cardW:613; --cardH:922;

  --badge-fs:13.60px; --badge-fw:400; --badge-ls:-0.163px; --badge-gap:10px; --badge-dy:0px; --badge-ws:0px;
  --badge-left:34px; --badge-top:684px;
  --hl-lh:1; --hl-wght:578;
  --hl1-fs:69.14px; --hl1-ls:-1.936px; --hl1-ws:0px; --hl1-left:33.00px; --hl1-top:750.02px;
  --hl2-fs:68.95px; --hl2-ls:-1.931px; --hl2-left:32.00px; --hl2-top:831.01px;
  --h1-top:65.00px; --h1-fs:42.55px; --h1-ls:-2.553px; --h1-ws:1.300px; --h1-wght:584;
  --sub-top:120.00px; --sub-fs:20.41px; --sub-ls:-0.245px; --sub-ws:-2.000px; --sub-fw:400; --sub-fwb:700;
  --fieldpad:19px;
  --eph-fs:15.68px; --eph-ls:-0.188px; --eph-left:17.0px; --eph-fw:400; --eph-ws:0px;
  --pph-fs:17.29px; --pph-ls:-0.698px; --pph-left:18px; --pph-fw:400;
  --login-fs:16.38px; --login-fw:400; --login-ls:0.200px; --login-gap:10px; --login-dy:0.00px; --login-padl:-12.00px;
  --arrow-w:13.2px;
  --div-top:477px; --or-fs:11.5px; --or-fw:700; --or-ls:0.8px; --or-dy:2.00px; --or-dx:0.00px;
  --or-line-l:205px; --or-line-r:204px;
  --g-gap:17px; --g-icon:18.5px;
  --gt-fs:18.10px; --gt-fw:400; --gt-ls:-0.217px; --gt-ws:-1.000px; --gt-dy:1.00px;
  --bt-top:611.00px; --bt-fs:16.37px; --bt-fw:400; --bt-ls:-0.196px; --bt-ws:-2.060px; --bt-fwb:700; --bt-uo:3px;
  --card-shadow:1px 10px 14px rgba(10,14,20,0.14), 0 1px 3px rgba(10,14,20,0.05);
  --cs:1;

  --ink:#000;          --h1-color:#2c3343;   --sub-grey:#797979;
  --badge-bg:#2f2a27;  --ph:#606060;         --or:#5a5a5b;
  --gtext:#232424;     --bottom:#0a0a0a;
  --btn1:#283139;      --btn2:#293340;
  --inputFill:#fafafa; --inputBorder:#acacae; --pwFill:#f9f9f9;
  --gBorder:#c8c8ca;   --divider:#b1b1b2;     --page:#fefefe;
}

html, body { height:100%; background:var(--page); }
body.auth {
  margin:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
  overflow:hidden;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  color:var(--ink);
}

[hidden] { display:none !important; }

.stage { position:fixed; inset:0; overflow:hidden; }

/* ── Photo column ──────────────────────────────────────────── */
.photo { position:absolute; left:0; top:0; height:100%; width:57.1038%; overflow:hidden; background:#0d1014; }
.photo-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:100% 50%;
  display:block; -webkit-user-drag:none;
}
.photo-img--wide { display:none; }

.scrim { display:none; position:absolute; inset:0; pointer-events:none; }

.home-mark {
  position:absolute; left:34px; top:30px; z-index:3;
  display:inline-flex; align-items:center; gap:9px;
  color:#fff; text-decoration:none;
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
}
.home-mark i { width:11px; height:11px; border-radius:3px; background:rgb(var(--c-accent, 201 32 39)); display:block; }
.home-mark:hover { text-decoration:underline; text-underline-offset:4px; }
body.stacked .home-mark { left:20px; top:16px; font-size:14px; }

.hero {
  position:absolute; left:0; bottom:0; width:836px; height:949px;
  transform-origin:left bottom; pointer-events:none;
}
.hero > * { pointer-events:auto; }

.badge {
  position:absolute; left:var(--badge-left); top:var(--badge-top);
  display:inline-flex; align-items:center; gap:var(--badge-gap);
  height:37px; padding:0 16px 0 19px;
  border-radius:999px; background:var(--badge-bg);
  -webkit-backdrop-filter:blur(7px) saturate(120%); backdrop-filter:blur(7px) saturate(120%);
  box-shadow:0 1px 2px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.14);
  color:#fff; white-space:nowrap;
  font-size:var(--badge-fs); font-weight:var(--badge-fw);
  letter-spacing:var(--badge-ls); word-spacing:var(--badge-ws);
}
.badge svg { position:relative; top:-1px; width:17px; height:16.27px; flex:none; }
.badge span { transform:translateY(var(--badge-dy)); }

.hl {
  position:absolute; white-space:nowrap;
  font-family:'Outfit','Inter',sans-serif;
  font-variation-settings:'wght' var(--hl-wght);
  line-height:var(--hl-lh); color:var(--ink);
}
#hl1 { left:var(--hl1-left); top:var(--hl1-top); font-size:var(--hl1-fs); letter-spacing:var(--hl1-ls); word-spacing:var(--hl1-ws); }
#hl2 { left:var(--hl2-left); top:var(--hl2-top); font-size:var(--hl2-fs); letter-spacing:var(--hl2-ls); }

/* ── Pane and card ─────────────────────────────────────────── */
.pane { position:absolute; left:57.1038%; right:0; top:0; bottom:0; }

.card {
  position:absolute; left:1px; top:14px; width:613px; height:922px;
  border-radius:26px; overflow:hidden;
  background:rgba(254,254,254,.90);
  -webkit-backdrop-filter:blur(28px) saturate(160%); backdrop-filter:blur(28px) saturate(160%);
  border:1px solid rgba(0,0,0,.036);
  box-shadow:var(--card-shadow);
}
.card-in { position:absolute; left:0; top:0; width:613px; height:922px; transform-origin:left top; }

[data-step] { position:absolute; inset:0; }
[data-step][hidden] { display:none !important; }

.col { position:absolute; left:62px; width:488px; }
.center { text-align:center; }

#h1, .step-h1 {
  top:var(--h1-top); margin:0;
  font-family:'Outfit','Inter',sans-serif;
  font-variation-settings:'wght' var(--h1-wght);
  font-size:var(--h1-fs); letter-spacing:var(--h1-ls); word-spacing:var(--h1-ws);
  line-height:1; color:var(--h1-color);
}
#sub, .step-sub {
  top:var(--sub-top); margin:0;
  font-size:var(--sub-fs); font-weight:var(--sub-fw);
  letter-spacing:var(--sub-ls); word-spacing:var(--sub-ws);
  color:var(--sub-grey); line-height:1.35;
}
#sub b, .step-sub b { font-weight:var(--sub-fwb); color:var(--sub-grey); }

.field {
  position:absolute; left:62px; width:489px;
  display:flex; align-items:center; border-radius:12px;
  padding:0 var(--fieldpad); box-sizing:border-box;
}
.field input {
  width:100%; border:0; background:transparent; outline:none;
  color:var(--ink); font-family:inherit;
}
.field input::placeholder { color:var(--ph); opacity:1; }

.field--box { background:var(--inputFill); border:1.5px solid var(--inputBorder); }

#email { top:203px; height:61px; background:var(--inputFill); border:1.5px solid var(--inputBorder); padding-left:var(--eph-left); }
#email input { font-size:var(--eph-fs); font-weight:var(--eph-fw); letter-spacing:var(--eph-ls); word-spacing:var(--eph-ws); }

#pw { top:273.5px; height:59px; background:var(--pwFill); border:0; padding-left:var(--pph-left); }
#pw input { font-size:var(--pph-fs); font-weight:var(--pph-fw); letter-spacing:var(--pph-ls); }

#loginBtn, .btn-primary-pill {
  position:absolute; left:62px; top:366px; width:489px; height:65.5px;
  border:0; border-radius:999px; cursor:pointer;
  background:linear-gradient(180deg,var(--btn1) 0%,var(--btn2) 100%);
  color:#fff; display:flex; align-items:center; justify-content:center;
  gap:var(--login-gap); padding-left:var(--login-padl); padding-right:4px;
  box-shadow:0 8px 20px rgba(18,26,34,.16), 0 2px 5px rgba(18,26,34,.10);
  font-family:inherit; font-size:var(--login-fs); font-weight:var(--login-fw); letter-spacing:var(--login-ls);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, filter .18s ease;
}
#loginBtn span, .btn-primary-pill span { transform:translateY(var(--login-dy)); }
#loginBtn svg, .btn-primary-pill svg { width:var(--arrow-w); height:auto; flex:none; }
#loginBtn:hover, .btn-primary-pill:hover { filter:brightness(1.12); }
#loginBtn:active, .btn-primary-pill:active { transform:translateY(1px); }

.divider {
  position:absolute; left:63px; top:var(--div-top); width:487px;
  display:flex; align-items:center; justify-content:center;
}
.divider i { height:1.5px; background:var(--divider); display:block; }
.divider i:first-child { flex:0 0 var(--or-line-l); }
.divider i:last-child  { flex:0 0 var(--or-line-r); }
.divider b {
  flex:1 1 auto; text-align:center; color:var(--or);
  font-size:var(--or-fs); font-weight:var(--or-fw); letter-spacing:var(--or-ls);
  transform:translate(var(--or-dx),var(--or-dy));
}

#gBtn {
  position:absolute; left:62px; top:535px; width:489px; height:59.5px;
  display:flex; align-items:center; justify-content:center; gap:var(--g-gap);
  border:1.5px solid var(--gBorder); border-radius:999px;
  background:rgba(255,255,255,.92); box-shadow:0 1px 2px rgba(0,0,0,.03);
  cursor:pointer; font-family:inherit; color:var(--gtext);
  font-size:var(--gt-fs); font-weight:var(--gt-fw);
  letter-spacing:var(--gt-ls); word-spacing:var(--gt-ws);
  transition:background .18s ease, box-shadow .18s ease, transform .18s cubic-bezier(.2,.7,.3,1);
}
#gBtn svg { width:var(--g-icon); height:var(--g-icon); flex:none; }
#gBtn span { transform:translateY(var(--gt-dy)); }
#gBtn:hover { background:#fff; box-shadow:0 3px 10px rgba(0,0,0,.07); }
#gBtn:active { transform:translateY(1px); }

#bottom {
  position:absolute; left:62px; width:489px; top:var(--bt-top); margin:0; text-align:center;
  font-size:var(--bt-fs); font-weight:var(--bt-fw);
  letter-spacing:var(--bt-ls); word-spacing:var(--bt-ws); color:var(--bottom);
}
#bottom a {
  color:#000; font-weight:var(--bt-fwb);
  text-decoration:underline; text-underline-offset:var(--bt-uo); text-decoration-thickness:2px;
}

/* Auxiliary rows the real product needs and the reference frame did not:
   inline errors, the forgot links, and the demo notice. They speak the
   same measure and sit on the same 62px column. */
#codeField { top:203px; height:61px; background:var(--inputFill); border:1.5px solid var(--inputBorder); padding-left:var(--eph-left); }
#codeField input {
  width:100%; text-align:center;
  font-size:26px; font-weight:600; letter-spacing:.34em; text-indent:.34em;
  font-variant-numeric:tabular-nums;
}
.rowlinks { position:absolute; left:62px; width:489px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.rowlinks a { font-size:14px; font-weight:700; color:#000; text-decoration:underline; text-underline-offset:3px; }
.rowlinks a:hover { text-decoration-thickness:2px; }
.linkbtn { background:none; border:0; padding:0; cursor:pointer; font-family:inherit; font-size:14px; font-weight:700; color:#000; text-decoration:underline; text-underline-offset:3px; }

/* The three things that sit at the foot of the card — the account line,
   the forgot links and the demo notice. In the reference frame each has
   its own absolute coordinate, so here the wrapper is display:contents and
   changes nothing. In the fluid modes it becomes the flex column that
   stacks them, which is the only way three items of unknown height can
   share a card foot without colliding. */
.botcluster { display:contents; }

.aux { position:absolute; left:62px; width:489px; font-size:13.5px; line-height:1.5; color:var(--sub-grey); }
.aux a { color:#000; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.auth-err {
  position:absolute; left:62px; width:489px; margin:0;
  font-size:13.5px; font-weight:600; line-height:1.45; color:#b3261e;
}
.auth-err[hidden] { display:none; }

:focus-visible { outline:2px solid #2b6cb0; outline-offset:2px; }

@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }

.cred-step .rowlinks { top:664px; }
.cred-step .aux { top:716px; }

/* Passwordless: one field instead of two, so the rest of the column
   comes up to close the gap the password box used to fill. Scoped by
   class, never by id — the tablet and phone blocks below override on
   class specificity and an id here would strand this at desktop
   coordinates. */
.cred-step--nopw #loginBtn { top:300px; }
.cred-step--nopw .auth-err { top:274px; }
.cred-step--nopw .divider { top:412px; }
.cred-step--nopw #gBtn { top:470px; }
.cred-step--nopw #bottom { top:548px; }
.cred-step--nopw .rowlinks { top:598px; }
.cred-step--nopw .aux { top:642px; }

.code-step .btn-primary-pill { top:300px; }
.code-step .auth-err { top:274px; }
.code-step .rowlinks { top:382px; }
.code-step .aux { top:436px; }

/* ── Mode B — tablet portrait ──────────────────────────────── */
body.tabport .photo-img--tall { display:none; }
body.tabport .photo-img--wide { display:block; object-position:50% 50%; }
body.tabport .hero {
  position:absolute; left:0; right:0; bottom:var(--tp-hero-b); width:auto; height:auto;
  transform:none;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--tp-hero-gap);
  padding:0 var(--tp-side);
}
body.tabport .badge {
  position:static; height:calc(37px * var(--badge-k));
  padding:0 calc(16px * var(--badge-k)) 0 calc(19px * var(--badge-k));
  font-size:calc(var(--badge-fs) * var(--badge-k));
  gap:calc(var(--badge-gap) * var(--badge-k));
}
body.tabport .badge svg { width:calc(17px * var(--badge-k)); height:calc(16.27px * var(--badge-k)); }
body.tabport .hl-wrap { max-width:var(--tp-hl-measure); }
body.tabport #hl1, body.tabport #hl2 {
  position:static; left:auto; top:auto; display:inline; white-space:normal;
  font-size:var(--tp-hero-fs); line-height:var(--tp-hero-lh);
  letter-spacing:calc(var(--hl1-ls) / var(--hl1-fs) * var(--tp-hero-fs));
  word-spacing:normal;
}
/* ── Flow interior ─────────────────────────────────────────────
   The reference frame lays the card out on absolute coordinates, which
   is exact for the two fields login carries. Signup carries seven and
   the password reset carries four steps; on a tablet even login gains
   the forgot links and the demo notice. Any of those overflow a fixed
   composition, so those cases switch the interior to flow.

   One rule set serves both: auth.js adds .card-in--flow for tablet
   portrait, and the pages that can never fit declare it in markup. The
   --tp-* vars are only set in tablet portrait, so the fallbacks are the
   reference sizes and the same rules cover both. */
.card-in--flow {
  position:absolute; inset:0; width:auto; height:auto; transform:none !important;
  overflow-y:auto; overscroll-behavior:contain;
}
.card-in--flow [data-step] {
  position:static; inset:auto;
  display:flex; flex-direction:column; justify-content:center;
  min-height:100%; box-sizing:border-box;
  padding:var(--tp-pad,52px) var(--tp-pad,62px) calc(var(--tp-pad,52px) * 0.8);
}
.card-in--flow [data-step] > *,
.card-in--flow #h1, .card-in--flow .step-h1,
.card-in--flow #sub, .card-in--flow .step-sub,
.card-in--flow #email, .card-in--flow #pw, .card-in--flow #codeField,
.card-in--flow #loginBtn, .card-in--flow #verifyBtn, .card-in--flow #gBtn,
.card-in--flow #bottom {
  position:static; left:auto; top:auto; right:auto; bottom:auto;
  width:100%; box-sizing:border-box;
}
.card-in--flow #h1, .card-in--flow .step-h1 {
  font-size:var(--tp-h1-fs,var(--h1-fs)); margin:0 0 10px; text-align:center;
  letter-spacing:calc(var(--h1-ls) / var(--h1-fs) * var(--tp-h1-fs,var(--h1-fs)));
}
.card-in--flow #sub, .card-in--flow .step-sub {
  font-size:var(--tp-sub-fs,var(--sub-fs)); margin:0 0 24px; text-align:center; word-spacing:normal;
  letter-spacing:calc(var(--sub-ls) / var(--sub-fs) * var(--tp-sub-fs,var(--sub-fs)));
}
.card-in--flow .field {
  position:static; left:auto; top:auto; width:100%; box-sizing:border-box;
  height:var(--tp-em-h,58px); border-radius:var(--tp-em-r,12px);
  padding:0 var(--tp-eph-pad,18px); margin:0 0 13px;
}
.card-in--flow .field input { font-size:var(--tp-eph-fs,16px); }
.card-in--flow #loginBtn, .card-in--flow .btn-primary-pill {
  height:var(--tp-btn-h,62px); font-size:var(--tp-btn-fs,var(--login-fs));
  gap:var(--tp-btn-gap,var(--login-gap)); padding-left:0; margin:10px 0 0;
}
.card-in--flow #loginBtn svg, .card-in--flow .btn-primary-pill svg { width:var(--tp-arrow,var(--arrow-w)); }
.card-in--flow .divider { position:static; width:100%; margin:24px 0; }
.card-in--flow .divider i { height:var(--tp-div-h,1.5px); flex:1 1 auto; }
.card-in--flow .divider b { flex:0 0 auto; padding:0 var(--tp-or-pad,18px); font-size:var(--tp-or-fs,var(--or-fs)); }
.card-in--flow #gBtn {
  height:var(--tp-g-h,58px); font-size:var(--tp-gt-fs,var(--gt-fs));
  gap:var(--tp-g-gap,var(--g-gap)); word-spacing:normal;
}
.card-in--flow #gBtn svg { width:var(--tp-g-icon,var(--g-icon)); height:var(--tp-g-icon,var(--g-icon)); }
.card-in--flow #bottom { font-size:var(--tp-bt-fs,var(--bt-fs)); word-spacing:normal; margin:0; }
.card-in--flow .rowlinks { position:static; width:100%; }
.card-in--flow .aux, .card-in--flow .auth-err { position:static; width:100%; margin:0; }
.card-in--flow .botcluster { display:flex; flex-direction:column; gap:12px; width:100%; position:static; margin:22px 0 0; }
.card-in--flow .aux { font-size:12.75px; line-height:1.5; }

/* Two fields side by side where the measure allows — signup only. */
.card-in--flow .pair { display:flex; gap:13px; width:100%; margin:0 0 13px; }
.card-in--flow .pair .field { margin:0; }
.card-in--flow .pair > * { flex:1 1 0; min-width:0; }
.card-in--flow .checkline {
  display:flex; align-items:flex-start; gap:10px; margin:4px 0 0;
  font-size:13.5px; line-height:1.5; color:var(--sub-grey);
}
.card-in--flow .checkline input { width:17px; height:17px; margin:1px 0 0; flex:none; accent-color:var(--btn1); }
.card-in--flow .checkline a { color:#000; font-weight:700; text-decoration:underline; text-underline-offset:3px; }


body.tabport .botcluster > *,
body.tabport .botcluster #bottom {
  position:static; left:auto; top:auto; right:auto; bottom:auto; width:100%;
}
body.tabport .botcluster .aux { font-size:12.5px; line-height:1.45; }

/* ── Mode C — phone ──────────────────────────────────────────
   Keyed on the media query, not on the class auth.js adds, so the phone
   layout is what a JS-disabled handset gets too. The .stacked class is
   still set — the engine uses it to know which video to run — but no
   layout depends on it. */
@media (max-width:699px) {
body.auth {
  --mobile-hero-h:clamp(244px,34svh,304px);
  height:auto; min-height:100%; overflow-y:auto; overflow-x:hidden; background:#fff;
}
body.auth .stage { position:relative; inset:auto; display:flex; flex-direction:column; min-height:100svh; overflow:visible; }
body.auth .photo {
  position:relative; left:auto; top:auto;
  width:100%; height:var(--mobile-hero-h); flex:none;
}
body.auth .photo-img--tall { display:none; }
body.auth .photo-img--wide { display:block; object-position:64% 48%; transform:scale(1.015); }
body.auth .scrim {
  display:block;
  background:linear-gradient(180deg,rgba(7,10,13,.02) 18%,rgba(7,10,13,.12) 48%,rgba(7,10,13,.78) 100%);
}
body.auth .hero {
  position:absolute; left:0; right:0; bottom:0; top:auto; width:auto; height:auto;
  transform:none; display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  /* The card rides 28px up over the photo, so the copy has to clear that
     much before its own breathing room or the last line is cut. */
  padding:0 20px 42px;
}
body.auth .badge {
  position:static; height:31px; padding:0 12px; font-size:11px; gap:7px;
  background:rgba(24,27,30,.82); box-shadow:0 4px 16px rgba(0,0,0,.18);
}
body.auth .badge svg { width:13px; height:12.4px; }
body.auth .hl-wrap { display:flex; flex-direction:column; }
body.auth #hl1, body.auth #hl2 {
  position:static; left:auto; top:auto; white-space:normal; color:#fff;
  font-size:clamp(30px,8.8vw,38px); letter-spacing:-.035em; line-height:.96;
  word-spacing:normal; text-shadow:0 2px 18px rgba(0,0,0,.32);
}
body.auth .pane { position:relative; left:auto; right:auto; top:auto; bottom:auto; flex:1 1 auto; display:flex; }
body.auth .card {
  position:relative; left:auto; top:auto; width:100%; height:auto;
  margin:-28px 0 0; border-radius:28px 28px 0 0;
  background:#fff; border:0; box-shadow:0 -10px 28px rgba(20,28,36,.10);
  min-height:calc(100svh - var(--mobile-hero-h) + 28px);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
body.auth .card-in {
  position:relative; left:auto; top:auto; width:100%; height:auto; transform:none;
  max-width:500px; margin:0 auto;
  padding:36px clamp(24px,7vw,38px) max(30px,env(safe-area-inset-bottom));
  box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center;
}
body.auth [data-step] { position:static; inset:auto; display:flex; flex-direction:column; }

/* Everything the base composition pins by id has to be released by id —
   a class selector here loses to #loginBtn no matter how many classes it
   stacks up. This is the one place the mode blocks must speak ids. */
body.auth #h1,
body.auth #sub,
body.auth #email,
body.auth #pw,
body.auth #codeField,
body.auth #loginBtn,
body.auth #verifyBtn,
body.auth #gBtn,
body.auth #bottom {
  position:static; left:auto; top:auto; right:auto; bottom:auto; width:100%;
}
body.auth .card-in > *,
body.auth [data-step] > * { position:static; left:auto; top:auto; width:100%; box-sizing:border-box; }
body.auth .botcluster { display:flex; flex-direction:column; gap:14px; width:100%; }
body.auth .botcluster > *,
body.auth .botcluster #bottom { position:static; left:auto; top:auto; width:100%; margin:0; }
body.auth .botcluster { margin:22px 0 0; }
body.auth .rowlinks { margin:0; }
body.auth #codeField input { font-size:24px; }
body.auth #h1, body.auth .step-h1 { font-size:clamp(31px,8.8vw,38px); letter-spacing:-.03em; margin:0 0 10px; }
body.auth #sub, body.auth .step-sub { font-size:15px; letter-spacing:0; word-spacing:0; margin:0 0 22px; line-height:1.5; }
body.auth .field,
body.auth #email,
body.auth #pw,
body.auth #codeField {
  position:static; left:auto; top:auto;
  height:56px; margin:0 0 12px; padding:0 16px; border-radius:12px;
}
/* 16px exactly, and it has to be said at id specificity: #email input
   and #pw input carry their own sizes from the reference frame, and
   anything under 16px makes iOS zoom the page on focus. */
body.auth .field input,
body.auth #email input,
body.auth #pw input,
body.auth #codeField input { font-size:16px; letter-spacing:0; }
body.auth #loginBtn, body.auth .btn-primary-pill { height:58px; margin:10px 0 0; padding-left:0; gap:10px; font-size:16px; }
body.auth .divider { margin:22px 0; }
body.auth .divider i { flex:1 1 auto; }
body.auth .divider b { flex:0 0 auto; padding:0 14px; }
body.auth #gBtn { height:56px; font-size:15.5px; letter-spacing:0; word-spacing:0; }
body.auth #bottom { margin:22px 0 0; font-size:14px; letter-spacing:0; word-spacing:0; }
body.auth .aux { margin:14px 0 0; font-size:13.5px; }
body.auth .auth-err { margin:0 0 10px; }

/* Two fields abreast needs about 200px each before the label truncates;
   below that they stack. And a long form must start at the top — centring
   it pushes the first field off the top of a short screen. */
@media (max-width:520px) {
  .card-in--flow .pair { flex-direction:column; gap:0; margin:0; }
  .card-in--flow .pair > * { flex:0 0 auto; }
  .card-in--flow .pair .field { margin:0 0 13px; }
}
body.auth .card-in--flow { justify-content:flex-start; }

@media (max-width:370px) {
  body.auth { --mobile-hero-h:232px; }
  body.auth .hero { padding:0 16px 38px; }
  body.auth .card-in { padding-left:20px; padding-right:20px; }
  body.auth .hl { font-size:30px; }
}
@media (max-height:520px) and (orientation:landscape) {
  body.auth { --mobile-hero-h:208px; }
  body.auth .card-in { justify-content:flex-start; }
}

}

/* ── Entrance first frame ──────────────────────────────────────
   The photograph is deliberately excluded: it is the static stage and
   never animates. The class is added by a pre-paint script in <head>,
   so with JavaScript off none of this ever applies. */
.entry-pending .card,
.entry-pending .badge,
.entry-pending #hl1,
.entry-pending #hl2,
.entry-pending #h1,
.entry-pending #sub,
.entry-pending #email,
.entry-pending #pw,
.entry-pending #loginBtn,
.entry-pending .btn-primary-pill,
.entry-pending .divider,
.entry-pending #gBtn,
.entry-pending #bottom { opacity:0; will-change:transform,opacity,clip-path; }

.entry-pending .card { transform:translateY(12px) scale(.988); }
.entry-pending .badge { transform:translateY(8px); }
.entry-pending #hl1,
.entry-pending #hl2 { transform:translateY(16px); clip-path:inset(100% 0 0 0); }
.entry-pending #h1,
.entry-pending #sub { transform:translateY(10px); }
.entry-pending #email,
.entry-pending #pw,
.entry-pending #loginBtn,
.entry-pending .btn-primary-pill,
.entry-pending #gBtn { transform:translateY(8px); }
.entry-pending .divider,
.entry-pending #bottom { transform:translateY(8px); }

@media (max-width:699px) {
  .entry-pending .card { transform:translateY(14px); }
  .entry-pending #hl1,
  .entry-pending #hl2 { transform:translateY(12px); clip-path:inset(100% 0 0 0); }
}

@media (prefers-reduced-motion:reduce) {
  .entry-pending .card,
  .entry-pending .badge,
  .entry-pending #hl1,
  .entry-pending #hl2,
  .entry-pending #h1,
  .entry-pending #sub,
  .entry-pending #email,
  .entry-pending #pw,
  .entry-pending #loginBtn,
.entry-pending .btn-primary-pill,
  .entry-pending .divider,
  .entry-pending #gBtn,
  .entry-pending #bottom { opacity:1; transform:none; clip-path:none; will-change:auto; }
}


/* ═══════════════════════════════════════════════════════════════
   Signup — back control, ruled heading, country dialling picker
   ═══════════════════════════════════════════════════════════════ */

/* The card's top-left corner was empty on every size. It is now the way
   back, which is the one control a phone had no way of offering. */
.card-back {
  position:absolute; z-index:6; left:18px; top:18px;
  width:40px; height:40px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  color:#2c3343; background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.09);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  text-decoration:none; cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.card-back svg { width:19px; height:19px; }
.card-back:hover { background:#2c3343; border-color:#2c3343; color:#fff; }
.card-back:active { transform:scale(.94); }
.card-back:focus-visible { outline:2px solid var(--btn1); outline-offset:3px; }

/* "Create your account", and a line under it. */
.h1-ruled { padding-bottom:18px; border-bottom:1px solid rgba(0,0,0,.10); margin-bottom:24px !important; }

/* ── Country + number ──────────────────────────────────────────
   A quarter for the dialling code, the rest for the number. The two
   never stack: a country box on its own line reads like a question
   nobody asked. */
.pair--phone { align-items:stretch; }
.card-in--flow .pair--phone > .field--cc { flex:0 0 26%; min-width:94px; }
.card-in--flow .pair--phone > .field--cc + .field { flex:1 1 auto; }

.field--cc { position:relative; overflow:visible; padding:0 !important; }

.cc-btn {
  width:100%; height:100%; display:flex; align-items:center; gap:6px;
  padding:0 10px 0 12px; margin:0; border:0; border-radius:inherit;
  background:transparent; color:var(--ink); font:inherit; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.cc-flag { font-size:17px; line-height:1; flex:none; }
.cc-dial { font-size:16px; font-weight:600; letter-spacing:0; font-variant-numeric:tabular-nums; }
.cc-caret { width:14px; height:14px; margin-left:auto; flex:none; opacity:.5; transition:transform .18s ease; }
.field--cc.is-open { border-color:var(--btn1); }
.field--cc.is-open .cc-caret { transform:rotate(180deg); }
.cc-btn:focus-visible { outline:2px solid var(--btn1); outline-offset:2px; }

.cc-pop {
  position:absolute; z-index:60; left:0; top:calc(100% + 8px);
  width:min(322px,78vw); box-sizing:border-box;
  background:#fff; border:1px solid rgba(0,0,0,.10); border-radius:14px;
  box-shadow:0 18px 44px rgba(16,22,30,.18), 0 2px 6px rgba(16,22,30,.06);
  overflow:hidden;
}
.cc-pop[hidden] { display:none; }

.cc-search { display:flex; align-items:center; gap:9px; padding:0 13px; height:46px; border-bottom:1px solid rgba(0,0,0,.08); }
.cc-search svg { width:16px; height:16px; flex:none; color:#8a9099; }
.cc-search input {
  flex:1 1 auto; min-width:0; height:100%; border:0; outline:none; background:transparent;
  font-family:inherit; font-size:15px; color:var(--ink);
}
.cc-search input::placeholder { color:#9aa0a8; }

.cc-list { list-style:none; margin:0; padding:6px; max-height:258px; overflow-y:auto; overscroll-behavior:contain; }
.cc-list li {
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:9px; cursor:pointer;
  font-size:14.5px; line-height:1.2; color:var(--ink);
}
.cc-list li.is-active, .cc-list li:hover { background:#f1f3f6; }
.cc-list li[aria-selected="true"] { font-weight:600; }
.cc-o-flag { font-size:16px; flex:none; }
.cc-o-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cc-o-dial { flex:none; color:#6b7280; font-variant-numeric:tabular-nums; }
.cc-empty { margin:0; padding:16px 14px 18px; font-size:14px; color:#6b7280; }

/* Phones: the pair rule above stacks at 520px. The dialling code is the
   one pair that must not. */
@media (max-width:520px) {
  .card-in--flow .pair--phone { flex-direction:row; gap:10px; margin:0 0 13px; }
  .card-in--flow .pair--phone > * { flex:0 0 auto; }
  .card-in--flow .pair--phone > .field { margin:0; }
  .card-in--flow .pair--phone > .field--cc { flex:0 0 27%; min-width:90px; }
  .card-in--flow .pair--phone > .field--cc + .field { flex:1 1 auto; }
}
@media (max-width:699px) {
  body.auth .card-back { left:14px; top:14px; }
  body.auth .field--cc { padding:0 !important; }
}
@media (max-width:370px) {
  .cc-caret { display:none; }
  .cc-flag { font-size:15px; }
  .cc-dial { font-size:15px; }
  .card-in--flow .pair--phone > .field--cc { min-width:80px; }
}

/* The flow and phone rules set every .field to position:static at two
   class levels, which is more specific than .field--cc on its own. The
   dropdown needs this box as its containing block, so it says it again
   with a class to spare. */
.card-in--flow .field.field--cc,
body.auth .field.field--cc { position:relative; }

/* #email carries its own height from the reference frame, which left it
   3px taller than every other box once the form went to flow. */
.card-in--flow #email { height:var(--tp-em-h,58px); }

/* The popover hangs off the pair, not off the quarter-width box, so it
   can run the full width of the form on a phone without leaving the card. */
.card-in--flow .pair.pair--phone { position:relative; }
.cc-pop { width:min(322px,100%); }

@media (max-width:699px) {
  /* [data-step] keeps the 62px flow padding it needs on a tablet. On a
     375px screen that left 199px of usable width inside a card that is
     already padded — which is what made this form unusable on a phone. */
  body.auth .card-in--flow [data-step] { padding:0; }

  /* The back control is the one child that must stay out of the flow. */
  body.auth .card-in > .card-back {
    position:absolute; left:14px; top:14px; width:40px; height:40px;
  }
  body.auth .card-in { padding-top:66px; }
}

/* ── Consent rows ──────────────────────────────────────────────
   The old version put the text straight into a flex label, so every
   line became its own anonymous flex item and the two links wrapped
   into stacked columns. The text now lives in one span, the box is
   drawn rather than borrowed from the platform, and the whole row is
   the hit target. */
.consents { display:flex; flex-direction:column; gap:2px; margin:18px 0 0; }

.card-in--flow .checkline,
.checkline {
  display:flex; align-items:flex-start; gap:11px;
  margin:0; padding:9px 10px 9px 8px; border-radius:10px;
  font-size:13.75px; line-height:1.55; color:var(--sub-grey);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color .16s ease;
}
.checkline:hover { background:rgba(20,26,34,.035); }

/* The real input stays in the DOM for the form, the label and the
   keyboard — it is just not the thing you look at. */
.card-in--flow .checkline input,
.checkline input {
  position:absolute; width:1px; height:1px; margin:0; padding:0;
  opacity:0; pointer-events:none; overflow:hidden; clip:rect(0 0 0 0);
}

.checkline .checkbox {
  flex:none; width:19px; height:19px; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid #b4b7bd; border-radius:5.5px;
  background:#fff; color:#fff;
  transition:background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.checkline .checkbox svg { width:13px; height:13px; opacity:0; transform:scale(.6); transition:opacity .14s ease, transform .18s cubic-bezier(.2,.9,.3,1.3); }
.checkline input:checked ~ .checkbox { background:var(--btn1); border-color:var(--btn1); }
.checkline input:checked ~ .checkbox svg { opacity:1; transform:scale(1); }
.checkline input:focus-visible ~ .checkbox { outline:2px solid var(--btn1); outline-offset:2px; }
.checkline:active .checkbox { transform:scale(.92); }

.checkline-t { flex:1 1 auto; min-width:0; text-wrap:pretty; }
.card-in--flow .checkline a,
.checkline a {
  color:#2c3343; font-weight:600;
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:2.5px;
  text-decoration-color:rgba(44,51,67,.35);
  white-space:nowrap;
}
.checkline a:hover { text-decoration-color:currentColor; }

@media (max-width:370px) {
  .checkline a { white-space:normal; }
}

/* ═══════════════════════════════════════════════════════════════
   Trouble signing in
   A help page, so it opens closed: two shortcuts at the top for the
   people who already know what went wrong, and collapsed answers
   underneath for the ones who do not.
   ═══════════════════════════════════════════════════════════════ */
.tr-fast { display:flex; flex-direction:column; gap:9px; margin:0 0 26px; }
.tr-fast-a {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  min-height:56px; padding:0 16px; border-radius:12px;
  background:var(--inputFill); border:1.5px solid var(--inputBorder);
  color:var(--ink); text-decoration:none;
  font-size:15.5px; font-weight:600;
  transition:border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.tr-fast-a svg { width:19px; height:19px; flex:none; color:var(--btn1); opacity:.75; transition:transform .18s cubic-bezier(.2,.9,.3,1.2); }
.tr-fast-a:hover { border-color:var(--btn1); background:#fff; }
.tr-fast-a:hover svg { transform:translateX(3px); }
.tr-fast-a:active { transform:scale(.99); }

.tr-group {
  margin:0 0 8px; font-size:11.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#9aa0a8;
}
.tr-list { margin:0 0 26px; border-top:1px solid rgba(0,0,0,.09); }
.tr-item { border-bottom:1px solid rgba(0,0,0,.09); }

.tr-head {
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  margin:0; padding:15px 2px; border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:600; line-height:1.4;
  color:var(--h1-color); text-align:left;
  -webkit-tap-highlight-color:transparent;
}
.tr-head:hover { color:var(--btn1); }
.tr-head:focus-visible { outline:2px solid var(--btn1); outline-offset:2px; border-radius:6px; }

/* A plus that becomes a minus. Two rules, no icon font. */
.tr-head i { position:relative; flex:none; width:15px; height:15px; margin-top:3px; }
.tr-head i::before, .tr-head i::after {
  content:''; position:absolute; left:0; top:6.5px; width:15px; height:2px;
  border-radius:2px; background:currentColor; opacity:.55;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.2), opacity .18s ease;
}
.tr-head i::after { transform:rotate(90deg); }
.tr-item.is-open .tr-head i::after { transform:rotate(0deg); opacity:0; }
.tr-item.is-open .tr-head { color:var(--btn1); }

.tr-body {
  height:0; overflow:hidden;
  transition:height .28s cubic-bezier(.2,.9,.3,1);
}
.tr-body p {
  margin:0; padding:0 2px; font-size:14px; line-height:1.62; color:var(--sub-grey);
}
.tr-body p:last-child { padding-bottom:17px; }
.tr-body p + p { padding-top:11px; }
.tr-body a { color:#2c3343; font-weight:600; text-decoration:underline; text-underline-offset:2.5px; }

.tr-out { padding:20px; border-radius:14px; background:#f4f6f8; }
.tr-out-h { margin:0 0 5px; font-size:16px; font-weight:700; color:var(--h1-color); }
.tr-out-p { margin:0 0 16px; font-size:14px; line-height:1.6; color:var(--sub-grey); }
.tr-out .btn-primary-pill { position:static; width:100%; height:54px; margin:0; text-decoration:none; }

/* The body of this page is a document, not a two-field form: it must
   start at the top and scroll, never sit centred and overflow. */
body.auth #stepHelp { justify-content:flex-start; }


/* The auth pages sit the mark on the photograph, in white. */
.home-mark .brand-mark--auth { width: 1.5em; height: 1.5em; flex: none; }
.home-mark .brand-mark--auth path[stroke="currentColor"],
.home-mark .brand-mark--auth rect { color: inherit; }


/* The auth pages set the mark on the photograph, so it takes the white
   cut in both themes. */
.home-mark .brand-mark--auth {
  width: 2.52em; height: 1.5em; flex: none; display: block;
  background: url("brand/sitehouse-mark.png") center / contain no-repeat;
}