@import url('/dashboard/tokens.css?v=20260929b');   /* design system — bump v= when tokens.css changes */
@import url('/dashboard/components.css?v=20260828e');   /* shared components — bump v= when it changes */
/* ══════════════════════════════════════════════════════════════════════════
   prereg.css — Pre-registration gate + gated signup pages.
   Self-contained: brand font, tokens, reset, gate layout, signup-form layout.

   TWO LAYOUTS LIVE HERE, deliberately:
     .gate / .story / .action  — the gate (pre-open and intake-full). Current design.
     #web_login / .reg-open    — the signup form shown once registration opens.
   The open-state page has not had its design pass yet, so it keeps the older
   shell. Both read the same approved copy from prereg.go — see the compliance
   note there before changing any words.
   ══════════════════════════════════════════════════════════════════════════ */

/* Brand font and the colour ramps now live in tokens.css, imported above. */

/* ── Page-local tokens ── */
:root{
	--prereg-navy:var(--color-navy);
	--prereg-black:var(--color-font);   /* "circle black" */
	--prereg-action-bg:#0C2032;   /* deeper navy — separates the action side */
	--prereg-orange:var(--color-orange);
	--prereg-orange-hover:#FF7433;
	--prereg-cream:var(--color-cream);
	--prereg-sand:var(--sand-400);

	--prereg-tx:#FFFFFF;
	--prereg-tx-70:rgba(255,255,255,.72);
	--prereg-tx-55:rgba(255,255,255,.55);
	--prereg-tx-40:rgba(255,255,255,.42);

	--prereg-stroke:rgba(255,255,255,.11);
	--prereg-gradient-hero:radial-gradient(circle at 32% 116%,#6B3D2A 0%,#4A2E22 18%,#2D2A22 38%,#1B3544 60%,#10293C 84%);

	--prereg-sans:var(--font-sans);

	/* retained for the open-state signup form */
	--prereg-font:var(--color-cream);
	--prereg-text-secondary:rgba(255,255,255,0.5);
	--prereg-text-dim:rgba(255,255,255,0.4);
	--prereg-surface:rgba(255,255,255,0.08);
	--prereg-border:rgba(255,255,255,0.15);
	--prereg-border-focus:rgba(255,136,76,0.5);
	--prereg-radius:16px;
	--prereg-bg:var(--color-navy);
	--prereg-shadow-card:0 2px 8px rgba(0,0,0,0.3);
	--prereg-banner-accent:#FFE2CF;
}

/* ── Base reset (from mockup) ── */
*,*::before,*::after{box-sizing:border-box;}
html{height:100%;}
body{
	font-family:var(--prereg-sans);
	color:var(--prereg-font);
	background:var(--prereg-bg);
	margin:0;
	min-height:100%;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	/* Override login.css body flex centering — prereg uses split layout */
	display:block !important;
	align-items:unset !important;
	justify-content:unset !important;
}
a{color:var(--prereg-orange);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;display:block;}
/* Override login.css constraining containers — not used in prereg layout */
.login-logo{display:none !important;}
#loginbox__,#loginbox_,#loginbox{max-width:none !important;margin:0 !important;padding:0 !important;background:transparent !important;border-radius:0 !important;box-shadow:none !important;}

/* ══════════════════════════════════════════════════════════════════════════
   SPLIT LAYOUT — ids from site/style.css:25-56, mirrored verbatim
   ══════════════════════════════════════════════════════════════════════════ */
#web_login{display:flex;min-height:100vh;overflow-x:hidden;}
#web_login_banner,#web_login_form{display:flex;flex-direction:column;min-height:0;}
#web_login_banner{
	flex:0 0 44%;width:44%;position:relative;overflow:hidden;
	justify-content:space-between;
	padding:48px 52px;
	/* ── THE GRADIENT — site/style.css:55, unchanged ── */
	background:radial-gradient(120% 90% at 12% 8%,#FF9A5E 0%,#FF7A3C 26%,#E85C2B 50%,#1E3B52 100%);
	color:#fff;
}
#web_login_form{
	flex:1;align-items:center;justify-content:center;
	padding:60px 24px 40px;overflow-y:auto;
	background:var(--prereg-bg);
}

/* .glow — site/style.css:32. Pure CSS, no SVG. */
.glow{
	position:absolute;top:-160px;left:-120px;width:420px;height:420px;
	border-radius:50%;
	background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%);
	pointer-events:none;
}

/* banner content — .bhead / .bmid / .feats from site/style.css:41-50 */
.bhead{position:relative;z-index:2;}
.bhead img{height:34px;width:auto;}
.bmid{position:relative;z-index:2;max-width:470px;}
.bmid h2{
	margin:0 0 16px;font-size:38px;line-height:1.12;font-weight:650;
	letter-spacing:-.02em;color:#fff;text-wrap:balance;
}
.bmid h2 em{font-style:normal;color:var(--prereg-banner-accent);}
.lede{margin:0;font-size:16px;line-height:1.55;color:rgba(255,255,255,.86);}
.feats{
	position:relative;z-index:2;display:flex;flex-direction:column;gap:13px;
	margin:0;padding:0;list-style:none;
}
.feats li{display:flex;align-items:center;gap:12px;font-size:14.5px;color:rgba(255,255,255,.9);}
.feats .dot{
	flex:0 0 28px;height:28px;border-radius:50%;
	background:rgba(255,255,255,.14);position:relative;
}
.feats .dot::after{
	content:"";position:absolute;left:50%;top:50%;
	width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
	border-radius:50%;background:#fff;opacity:.85;
}

/* ── Gate banner: headline, three blocks, disclaimer ──
   .feats above is still used by the open signup form's banner; .bblocks below
   replaces it on the gate, where each item is a short title plus one line. */
.bmid h1{
	margin:0 0 16px;font-size:38px;line-height:1.12;font-weight:650;
	letter-spacing:-.02em;color:#fff;text-wrap:balance;
}
.bmid h1 em{font-style:normal;color:var(--prereg-banner-accent);}
.bblocks{
	position:relative;z-index:2;display:flex;flex-direction:column;gap:16px;
	margin:0;padding:0;list-style:none;
}
.bblocks li{display:flex;align-items:flex-start;gap:12px;}
.bblocks .dot{
	flex:0 0 28px;height:28px;border-radius:50%;margin-top:1px;
	background:rgba(255,255,255,.14);position:relative;
}
.bblocks .dot::after{
	content:"";position:absolute;left:50%;top:50%;
	width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
	border-radius:50%;background:#fff;opacity:.85;
}
.bblocks .btxt{display:block;font-size:14px;line-height:1.5;color:rgba(255,255,255,.82);}
.bblocks .btxt strong{display:block;font-size:14.5px;font-weight:650;color:#fff;margin-bottom:2px;}
/* Required on any gate screen showing a price. Must stay visible at every width. */
.bdisc{
	position:relative;z-index:2;margin:22px 0 0;max-width:460px;
	font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.62);
}

/* ── Remaining-places badge (shown on open signup form) ── */
.reg-open-avail {
	display: flex;
	align-items: baseline;
	gap: 9px;
	flex-wrap: wrap;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-left: 3px solid #FF884C;
	border-radius: 16px;
	padding: 13px 16px;
	margin: 0 0 24px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.5);
}
.reg-open-avail strong {
	color: #F4F1E2;
	font-weight: 650;
	font-size: 16px;
}

/* ══════════════════════════════════════════════════════════════════════════
   THE GATE — .story (left, the case) + .action (right, the one thing to do).
   Used by both gated states; only the copy differs.
   ══════════════════════════════════════════════════════════════════════════ */
/* Form first, story second — the member came here to fill something in. The
   DOM order stays story-then-action so the markup reads top to bottom on a
   phone; `order` does the swap only once there are two columns. */
.gate{min-height:100dvh;display:grid;grid-template-columns:1fr 1.18fr;}
.action{order:1;}
.story{order:2;}

/* ── Left: story ── */
.story{
	position:relative;overflow:hidden;
	/* Sky photograph, with the gradient kept underneath as the colour the panel
	   falls back to while the image loads or if it ever fails. */
	background:var(--prereg-gradient-hero);
	background-image:url('/images/circle-skybg.jpg');
	background-size:cover;background-position:center;background-repeat:no-repeat;
	background-color:var(--color-navy);
	color:var(--prereg-tx);
	display:flex;flex-direction:column;
	padding:44px clamp(28px,4.4vw,64px) 40px;
}
.story > *{position:relative;z-index:2;}
/* Externalised asset — the draw animation lives inside the SVG file. */
.story-rings{
	position:absolute;top:38%;right:-180px;transform:translateY(-50%);
	width:560px;height:560px;z-index:1;pointer-events:none;max-width:none;
}
.story-logo{width:120px;height:auto;display:block;}
/* Auto margins top and bottom centre the whole text block in the space the
   logo leaves; the mobile rule below reverts to normal flow. */
.story-mid{margin-block:auto;padding-top:0;}
.story h1{
	font-weight:500;font-size:clamp(30px,3.4vw,42px);line-height:1.08;letter-spacing:-.022em;
	color:var(--prereg-tx);text-wrap:balance;margin:0 0 22px;max-width:460px;
}
/* Second line carries the promise — kept in the brand sans, separated from the
   date claim above it by colour: the same orange as the call to action. */
.story h1 .story-turn{
	display:block;font-family:var(--prereg-sans);font-style:normal;font-weight:500;
	letter-spacing:-.01em;color:var(--prereg-orange);margin-top:2px;
}
/* Shares the headline's 460px measure so the two read as one block. */
.story-sub{
	color:var(--prereg-tx-70);font-size:17px;line-height:1.55;max-width:460px;margin:0 0 8px;
}

.story-blocks{margin:30px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px;}
.story-blocks li{padding:16px 0 15px 26px;position:relative;border-top:1px solid var(--prereg-stroke);}
.story-blocks li:first-child{border-top:0;}
.story-blocks li::before{
	content:"";position:absolute;left:2px;top:22px;width:8px;height:8px;
	border-radius:50%;background:var(--prereg-orange);
}
.story-blocks h3{font-weight:500;font-size:18px;color:var(--prereg-tx);margin:0 0 4px;letter-spacing:-.008em;}
.story-blocks p{color:var(--prereg-tx-55);font-size:14.5px;line-height:1.5;max-width:46ch;margin:0;}
.story-blocks .story-amt{color:var(--prereg-tx-70);}

/* Mandatory wherever a price is shown. Must stay legible at every width. */
.story-disc{margin:34px 0 0;color:var(--prereg-tx-40);font-size:12px;line-height:1.6;max-width:52ch;}

/* ── Right: action ── */
.action{
	/* Cream pane, matching the login screen. Everything inside reads its colour
	   from these tokens, so re-pointing them here re-themes the whole column and
	   the twenty-odd rules below are untouched. */
	--prereg-action-bg:var(--color-cream);
	--prereg-tx:var(--color-font);
	--prereg-tx-70:#6B6560;
	--prereg-tx-55:#6B6560;
	--prereg-tx-40:var(--cream-500);
	--prereg-stroke:var(--cream-300);

	background:var(--prereg-action-bg);border-left:1px solid var(--prereg-stroke);
	display:flex;align-items:center;justify-content:center;
	padding:56px clamp(28px,3.6vw,56px);
}
/* The few places that hard-code a white wash for the dark pane. */
.action-card .lfinp,
.action-card .sso_button{background:var(--color-surface);}
.action-card .sso_button:hover{background:var(--cream-200);}
.action-card #signup-error,.action-card #loginerror{color:var(--color-font);}
.action-card{width:100%;max-width:360px;}
/* The brand mark sits above the heading here, as it does on login. */
/* Centred above the form: the mark and the heading share an axis, the fields
   below stay left-aligned. */
.action-logo{display:block;width:318px;max-width:100%;height:auto;margin:0 auto 26px;}
.action h2{
	font-weight:500;font-size:17px;line-height:1.3;letter-spacing:-.005em;
	color:var(--prereg-tx);text-wrap:balance;margin:0 0 14px;text-align:center;
}
.action-say{color:var(--prereg-tx-70);font-size:15px;line-height:1.6;margin:0 0 26px;}

/* The single action on the page. An <a>, so the global link colour and
   underline are undone. */
.action-btn{
	display:flex;align-items:center;justify-content:center;width:100%;
	background:var(--prereg-orange);color:var(--prereg-black);
	font-family:inherit;font-weight: 500;font-size:13.5px;
	letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
	padding:16px 24px;border:none;border-radius:14px;cursor:pointer;
	box-shadow:none;
	transition:opacity .15s ease;
}
.action-btn:hover{opacity:.9;color:var(--prereg-black);text-decoration:none;}
.action-btn:active{opacity:.8;}
.action-signin{
	margin:24px 0 0;padding-top:22px;border-top:1px solid var(--prereg-stroke);
	font-size:14px;color:var(--prereg-tx-55);
}
.action-signin a{color:var(--prereg-tx);text-decoration:underline;text-underline-offset:2px;}
/* The legal pair sits under the sign-in line, quieter than it. */
.action-legal{
	margin:10px 0 0;font-size:12.5px;color:var(--prereg-tx-55);
}
.action-legal a{color:var(--prereg-tx-70);text-decoration:underline;text-underline-offset:2px;}
.action-legal a:hover{color:var(--orange-600);}
.action-legal .sep{margin:0 .5em;}

/* ── The signup form, when it is the action ──
   Scoped under .action-card so these win over login.css without touching it.
   IDs and the .lfinp / .passtoggle hooks are kept: signup.js drives the form
   by id, and the password toggle is wired inline. ── */
.action-card.is-form{max-width:400px;}
/* Every field carries a real label. It is not painted — the placeholder is the
   visible affordance — but it is what a screen reader announces and part of what
   a password manager reads when deciding which field is which. */
.field-label{
	position:absolute;width:1px;height:1px;padding:0;margin:-1px;
	overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.action-eyebrow{
	font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
	color:var(--prereg-orange);margin:0 0 10px;
}
.action-count{
	font-size:13.5px;color:var(--prereg-tx-55);margin:0 0 24px;
}
.action-count strong{color:var(--prereg-tx);font-weight:500;}

.action-form{display:flex;flex-direction:column;gap:12px;margin:0;}
.action-row{display:flex;gap:12px;}
.action-row .action-field{flex:1;min-width:0;}
.action-card .lfinp{
	width:100%;font-family:inherit;
	/* Same field as the login screen: 48px tall, 16px radius, hairline border,
	   white fill. See .lfinp in login.css. */
	background:var(--color-surface);border:1px solid var(--prereg-stroke);
	border-radius:16px;color:var(--prereg-tx);padding:14px 16px;
	height:48px;line-height:20px;font-size:14px;
	transition:border-color .15s ease,background .15s ease;
	/* Unconditional, and !important: Chrome's UA sheet paints an edited or
	   previewed password suggestion with `color: black !important`, which an
	   author `color` cannot beat at any specificity. -webkit-text-fill-color
	   wins the glyph regardless of `color`, so the field can never fall back
	   to the UA colour — whatever autofill state Chrome believes it is in. */
	-webkit-text-fill-color:var(--prereg-tx) !important;
}
/* The placeholder inherits -webkit-text-fill-color from the input in Chrome,
   so it has to restate its own or it would paint at full white. */
.action-card .lfinp::placeholder{
	color:var(--prereg-tx-40);-webkit-text-fill-color:var(--prereg-tx-40);
}
.action-card .lfinp:focus{
	outline:none;border-color:rgba(255,136,76,.55);background:var(--color-surface);
}
.field-error{
	font-size:12.5px;line-height:1.45;color:var(--warning,#C45C4A);margin:6px 2px 0;display:none;
}
.field-error.is-shown{display:block;}
.action-card .lfinp.is-invalid{
	border-color:rgba(255,124,92,.6);background:rgba(255,124,92,.07);
}

/* Autofill. Chrome paints its own background — a pale yellow on a dark form — and
   it cannot be set with `background`. Two things are needed together:
     · an opaque inset shadow, the only thing that covers the painted background;
     · a transition long enough never to arrive, because Chrome *animates* the
       background in, and a newer engine will win that repaint otherwise.
   !important because the autofill styling is applied at a higher level than an
   author rule of the same specificity. var(--color-surface) is this field's own colour
   flattened, measured from the rendered page — the shadow has to be opaque.
   Each pseudo-class gets its own rule: an engine that does not recognise one
   would throw away the entire group. */
.action-card .lfinp:-webkit-autofill,
.action-card .lfinp:-webkit-autofill:hover,
.action-card .lfinp:-webkit-autofill:focus,
.action-card .lfinp:-webkit-autofill:active{
	-webkit-text-fill-color:var(--prereg-tx) !important;
	-webkit-box-shadow:0 0 0 1000px var(--color-surface) inset !important;
	box-shadow:0 0 0 1000px var(--color-surface) inset !important;
	background-color:var(--color-surface) !important;
	background-image:none !important;
	caret-color:var(--prereg-tx);
	transition:background-color 600000s 0s,color 600000s 0s;
}
.action-card .lfinp:-webkit-autofill:focus{border-color:rgba(255,136,76,.55);}
.action-card .lfinp:autofill,
.action-card .lfinp:autofill:hover,
.action-card .lfinp:autofill:focus{
	-webkit-text-fill-color:var(--prereg-tx) !important;
	box-shadow:0 0 0 1000px var(--color-surface) inset !important;
	background-color:var(--color-surface) !important;
	caret-color:var(--prereg-tx);
	transition:background-color 600000s 0s,color 600000s 0s;
}
.action-card .lfinp:-internal-autofill-selected{
	-webkit-text-fill-color:var(--prereg-tx) !important;
	-webkit-box-shadow:0 0 0 1000px var(--color-surface) inset !important;
	box-shadow:0 0 0 1000px var(--color-surface) inset !important;
	background-color:var(--color-surface) !important;
}
/* The state Chrome leaves a suggested password in while it is only offered,
   and the state the confirm field lands in after the offered password is
   edited. Its own rule — an engine that does not know the selector would
   discard the whole group. */
.action-card .lfinp:-internal-autofill-previewed{
	-webkit-text-fill-color:var(--prereg-tx) !important;
	-webkit-box-shadow:0 0 0 1000px var(--color-surface) inset !important;
	box-shadow:0 0 0 1000px var(--color-surface) inset !important;
	background-color:var(--color-surface) !important;
}

.action-pass{position:relative;}
.action-pass .lfinp{padding-right:46px;}
.action-card .passtoggle{
	position:absolute;right:15px;top:50%;transform:translateY(-50%);
	width:20px;height:auto;opacity:.45;cursor:pointer;transition:opacity .15s ease;
}
.action-card .passtoggle:hover{opacity:.8;}
.action-card .signup-passwarn,
.action-card .signup-passstrength,
.action-card .signup-confirmwarn{
	font-size:12.5px;line-height:1.45;color:var(--prereg-tx-55);margin:6px 2px 0;
}
.action-card #signup-error,.action-card #loginerror{
	background:rgba(255,136,76,.12);border:1px solid rgba(255,136,76,.3);
	border-radius:12px;color:var(--color-font); /* was --prereg-cream: cream text on a peach tint was unreadable (2026-09-01 screenshot) */
	font-size:13.5px;line-height:1.5;padding:12px 14px;margin:0 0 16px;
}
.action-form .action-btn{margin-top:0;}

/* Third-party sign-in. Secondary to the primary action above it. */
.action-card #sso_buttons{
	/* The 20px padding-top comes from login.css and stacked on top of this
	   margin — together they left ~42px under the button. */
	margin-top:12px;padding-top:0;text-align:center;font-size:13px;color:var(--prereg-tx-55);
}
.action-card .sso_row{display:flex;gap:12px;margin-top:14px;}
.action-card .sso_button{
	flex:1;display:flex;align-items:center;justify-content:center;
	background:rgba(255,255,255,.06);border:1px solid var(--prereg-stroke);
	border-radius:14px;color:var(--prereg-tx);text-decoration:none;
	font-family:inherit;font-size:14px;padding:13px 12px;
	transition:background .15s ease,border-color .15s ease;
}
.action-card .sso_button:hover{
	background:rgba(255,255,255,.1);border-color:var(--prereg-stroke-2,rgba(255,255,255,.16));
	text-decoration:none;color:var(--prereg-tx);
}
/* Turnstile renders in a cross-origin iframe, so its colors are fixed —
   round the corners and paint a panel-colored ring over the widget's
   own white edge (no border look). pointer-events stays clickable. */
.action-card .cf-turnstile{
	position:relative;margin:0;
	overflow:hidden;border-radius:14px;line-height:0;
}
.action-card .cf-turnstile::after{
	content:"";position:absolute;inset:0;
	border:4px solid var(--prereg-action-bg,#0C2032);
	border-radius:14px;pointer-events:none;
}

/* ── Entrance motion ── */
/* Entrance motion is for copy only — never put .rise on an <img>: an image
   under a transform animation can drop out of the paint, and the brand mark
   gains nothing from moving. */
.rise{opacity:0;transform:translateY(14px);animation:prereg-rise .7s cubic-bezier(.16,1,.3,1) forwards;}
.rise-d1{animation-delay:.05s}.rise-d2{animation-delay:.13s}
.rise-d3{animation-delay:.21s}.rise-d4{animation-delay:.30s}
@keyframes prereg-rise{to{opacity:1;transform:none;}}

/* ── Wave availability display ── */
.reg-open-visit {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-left: 3px solid rgba(255, 255, 255, 0.4);
	border-radius: 16px;
	padding: 15px 17px 13px;
	margin: 22px 0;
}
.reg-open-visit-head {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	margin-bottom: 11px;
}
.reg-open-visit-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.reg-open-visit-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding-left: 20px;
	position: relative;
	margin-bottom: 8px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.5);
}
.reg-open-visit-row::before {
	content: "";
	position: absolute;
	left: 1px;
	top: 0.5em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.reg-open-visit-dates {
	flex: 1 1 auto;
	min-width: 0;
}
.reg-open-visit-status {
	flex: 0 0 auto;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.reg-open-visit-row.is-full {
	color: rgba(255, 255, 255, 0.4);
}
.reg-open-visit-row.is-full .reg-open-visit-status {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.reg-open-visit-foot {
	margin: 12px 0 0;
	padding-top: 11px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.4);
}
.reg-open-visit-foot strong {
	color: rgba(255, 255, 255, 0.5);
	font-weight: 600;
}

/* ── Full registration email capture ── */
/* ══════════════════════════════════════════════════════════════════════════
   OPEN REGISTRATION — .reg-open wraps the signup form
   ══════════════════════════════════════════════════════════════════════════ */
.reg-open{width:100%;max-width:420px;}
.reg-open-eyebrow{
	display:inline-block;
	font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
	color:var(--prereg-orange);
	background:rgba(255,136,76,.12);
	border:1px solid rgba(255,136,76,.25);
	border-radius:999px;
	padding:5px 12px;margin-bottom:18px;
}
/* .signup-title restyled for prereg panel — same class, different context */
.reg-open .signup-title{
	font-size:30px;line-height:1.18;font-weight:650;letter-spacing:-.015em;
	color:var(--prereg-cream);margin:0 0 16px;
	white-space:nowrap;
}

/* ── Form elements inside .reg-open on navy background ── */
#web_login_form .lfinp{
	width:100%;
	background:var(--prereg-surface);
	border:1px solid var(--prereg-border);
	border-radius:var(--prereg-radius);
	color:var(--prereg-font);
	font-size:15px;
	padding:13px 16px;
	font-family:inherit;
}
#web_login_form .lfinp::placeholder{color:var(--prereg-text-dim);}
#web_login_form .lfinp:focus{outline:none;border-color:var(--prereg-border-focus);}
#web_login_form .passtoggle{
	position:absolute;right:14px;top:50%;transform:translateY(-50%);
	width:20px;height:20px;cursor:pointer;
	filter:brightness(0) invert(1) opacity(0.45);
}
#web_login_form .passtoggle:hover{filter:brightness(0) invert(1) opacity(0.9);}
#web_login_form .loginbutton_{
	width:100%;
	background:var(--prereg-orange);color: var(--prereg-black);
	font-size:14px;font-weight: 500;font-family:inherit;
	padding:14px 32px;border:none;border-radius:var(--prereg-radius);
	cursor:pointer;transition:opacity 150ms;
	text-transform:uppercase;letter-spacing:.08em;text-align:center;
	-webkit-appearance:none;
}
#web_login_form .loginbutton_:hover{opacity:.9;}
#web_login_form .loginbutton_:focus-visible{outline:2px solid var(--prereg-cream);outline-offset:2px;}
#web_login_form .signup-row{display:flex;gap:12px;}
#web_login_form .signup-field{margin-bottom:12px;flex:1;min-width:0;}
#web_login_form .signup-row .signup-field{margin-bottom:12px;}
#web_login_form #signupform{margin:0;padding:0;}
#web_login_form #sso_buttons{
	padding-top:20px;text-align:center;
	border-top:solid 1px var(--prereg-border);
	margin-top:20px;
}
#web_login_form #sso_buttons > div:first-child{
	color:var(--prereg-text-secondary);font-size:12px;margin-bottom:10px;
}
#web_login_form .sso_row{display:flex;gap:12px;}
#web_login_form .sso_button{
	display:inline-flex;align-items:center;justify-content:center;
	flex:1;padding:12px 20px;
	background:var(--prereg-surface);
	border:1px solid var(--prereg-border);
	border-radius:var(--prereg-radius);
	color:var(--prereg-font);font-size:14px;font-weight:500;
	cursor:pointer;text-decoration:none;
	transition:background 150ms,border-color 150ms;
}
#web_login_form .sso_button:hover{
	background:rgba(255,255,255,.15);
	border-color:var(--prereg-text-secondary);
	text-decoration:none;color:var(--prereg-font);
}
#web_login_form .login-signup-link{
	margin-top:22px;padding-top:18px;
	border-top:1px solid var(--prereg-border);
	font-size:13px;color:var(--prereg-text-secondary);text-align:center;
}
#web_login_form .login-signup-link a{color:var(--prereg-orange);}
#web_login_form #loginerror{
	background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);
	border-radius:var(--prereg-radius);padding:12px 16px;margin-bottom:16px;
	color:#ff8a8a;font-size:14px;
}
#web_login_form .signup-passwarn,
#web_login_form .signup-confirmwarn{color:var(--prereg-text-secondary);font-size:12px;}
#web_login_form .mk-turnstile{
	border:1px dashed var(--prereg-border);
	border-radius:var(--prereg-radius);
	padding:14px 16px;margin-bottom:14px;
	font-size:12px;color:var(--prereg-text-dim);text-align:center;
}

/* ── Dashboard prereg membership card ── */
.dash-prereg-card {
	border: 2px solid #FF884C !important;
	background: rgba(255, 136, 76, 0.08) !important;
}
.dash-prereg-card .dash-priority-label {
	color: #FF884C !important;
}

/* ── Responsive — breakpoint at 840px matches site/style.css:147 ── */
@media screen and (max-width:840px){
	#web_login{flex-direction:column;min-height:0;height:auto;}
	#web_login_banner,#web_login_form{display:block;}
	#web_login_banner{flex:none;width:100%;padding:34px 30px 40px;min-height:0;}
	#web_login_form{width:100%;padding:34px 24px 48px;min-height:0;}
	.bmid h2{font-size:29px;}
	.bmid{margin:24px 0 0;}
	.feats{display:none;}
	.bblocks{margin:22px 0 0;}
	.bdisc{margin:18px 0 0;max-width:none;}
	.reg-open{max-width:none;}
	.reg-open .signup-title{font-size:26px;}
}
@media screen and (max-width:480px){
	#web_login_banner{padding:28px 22px 34px;}
	#web_login_form{padding:28px 22px 40px;}
	.bmid h2{font-size:25px;}
	.bmid h1{font-size:25px;}
	.reg-open .signup-title{font-size:23px;}
	#web_login_form .signup-row{flex-direction:column;gap:0;}
}
@media screen and (max-width:360px){
	.reg-open .signup-title{font-size:20px;}
}
@media (max-height:520px) and (orientation:landscape){
	#web_login_banner{padding:26px 30px;}
	#web_login_form{padding:26px 24px;}
	.bmid h2{font-size:26px;}
	.feats{display:none;}
}
/* ── Gate, stacked. The action leads: on a phone the heading and the one
      button belong above the fold, with the case for joining below them. ── */
@media screen and (max-width:860px){
	.gate{grid-template-columns:1fr;}
	/* align-items is the cross axis here — flex-start keeps the card at the top
	   of the panel rather than vertically centred. justify-content stays centred:
	   it is the horizontal axis, and left-aligning it stranded the card against
	   the left edge on every viewport wider than the card's own cap. */
	.action{
		order:-1;background:var(--prereg-action-bg);border-left:0;
		align-items:flex-start;justify-content:center;padding:38px 24px 34px;
	}
	.action-card{max-width:520px;}
	.action-logo{display:block;}
	.action h2{font-size:18px;}
	.story{order:1;padding:36px 24px 42px;border-top:0;}
	.story-logo{display:none;}
	/* Same 520px column as the action card, centred, so the two stacked panels
	   share one measure instead of the story running the full width while the
	   form sits in a narrower centred block. */
	.story-mid{margin-block:0;padding-top:0;width:100%;max-width:520px;margin-inline:auto;}
	.story h1{font-size:30px;}
	.story-rings{top:24%;right:-235px;width:430px;height:430px;opacity:.5;}
}
@media screen and (max-width:400px){
	.action h2{font-size:23px;}
	.story h1{font-size:26px;}
}
/* First/Last name stack on any phone in portrait, not just the narrow ones.
   The old threshold was 400px, which left the two-up row on a 430px iPhone —
   two 200px fields side by side, and the right-hand one the first thing to go
   out of view if anything widens the layout. 480px is still narrower than any
   tablet. */
@media screen and (max-width:480px){
	.action-row{flex-direction:column;gap:12px;}
}

@media (prefers-reduced-motion:reduce){
	.rise{animation:none;opacity:1;transform:none;}
	*{transition:none !important;}
}
/* ── Terms of Service consent on the signup form ──────────────────────────
   The row sits directly above the submit button, because that is where a
   person looks last before committing. The link opens in a new tab so a
   half-filled form is never lost to reading the terms. */
/* Reads its colour from the pane's tokens, so it follows the cream retheme
   instead of staying white on white. */
.signup-consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 4px 2px 0; font-size: 13px; line-height: 1.5;
  color: var(--prereg-tx-70); cursor: pointer;
}
.signup-consent input {
  margin-top: 2px; flex: none; width: 16px; height: 16px;
  accent-color: #FF884C; cursor: pointer;
}
.signup-consent a { color: var(--prereg-tx); text-decoration: underline; text-underline-offset: 2px; }
.signup-consent a:hover { color: var(--orange-600); }
.signup-consent input:focus-visible { outline: 2px solid #FF884C; outline-offset: 2px; }

/* ── Terms of Service page ────────────────────────────────────────────────
   Same ground as the gate, but a reading measure rather than a two-panel
   layout: this page is prose and nothing else. */
.legal { min-height: 100vh; padding: 32px 20px 80px; }
.legal-inner { max-width: 720px; margin: 0 auto; }
.legal-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: rgba(255,255,255,0.72);
  text-decoration: none; margin-bottom: 28px;
}
.legal-back:hover { color: #fff; }
.legal-back-ic {
  width: 16px; height: 16px; display: block;
  filter: brightness(0) invert(1); opacity: 0.72;
}
.legal-h1 { font-size: 32px; font-weight: 500; letter-spacing: -0.02em; margin: 0; color: #fff; }
.legal-updated { font-size: 13px; color: rgba(255,255,255,0.55); margin: 8px 0 0; }
.legal-body { margin-top: 32px; }
.legal-sec { margin-bottom: 28px; }
.legal-h2 { font-size: 17px; font-weight: 500; margin: 0 0 8px; color: #fff; }
.legal-num { color: #FF884C; margin-right: 6px; }
.legal-body p { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.78); margin: 0 0 12px; }
.legal-pending {
  margin-top: 32px; border: 1px solid rgba(255,136,76,0.4);
  background: rgba(255,136,76,0.08); border-radius: 14px; padding: 20px;
}
.legal-pending b { display: block; font-size: 16px; font-weight: 500; color: #fff; margin-bottom: 8px; }
.legal-pending p { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.78); margin: 0; }
.legal-pending a { color: #FF884C; }
.legal-note { font-size: 13px; color: rgba(255,255,255,0.55); margin-top: 20px; }

@media (min-width: 768px) {
  .legal { padding: 56px 32px 100px; }
  .legal-h1 { font-size: 40px; }
}

/* The promotions-and-updates row sits under the Terms row, sharing its object.
   Spacing only — everything else is inherited from .signup-consent above. */
.signup-consent-marketing { margin-top: 10px; }

/* ── iOS: stop the zoom-on-focus ──────────────────────────────────────────
   Same defect and same fix as in login.css — mobile Safari zooms in when a
   focused input's text is under 16px, and the right-hand field of a two-up
   row ends up outside the viewport. Touch pointers only; the desktop card
   keeps its 14px. Field height is unchanged. */
@media (pointer: coarse) {
  .action-card .lfinp,
  .action-card input,
  .action-card select,
  .action-card textarea,
  #web_login_form .lfinp {
    font-size: 16px;
  }
}

/* The same notice on the gated signup layout, which reads its colours from the
   pane's tokens rather than login.css's. */
.action-card .sso-terms-note { color: var(--prereg-tx-70); }
.action-card .sso-terms-note a { color: var(--prereg-tx); }
.action-card .sso-terms-note a:hover { color: var(--orange-600); }

/* The show-password eye on the signup card: login.css turns .passtoggle white for the dark
   sign-in page, so here it was invisible on cream and only flashed when Safari's autofill tinted
   the field (Pavel, 2026-09-27). Dark icon, above the field, clickable. */
.action-card .passtoggle { filter: none; z-index: 2; pointer-events: auto; opacity: .55; }
.action-card .passtoggle:hover { filter: none; opacity: .9; }