/* The waitlist (/waitlist): the rules its screens use, taken from the prototype app's stylesheet (light theme;
   the waitlist is light by design, Martin 10-20). Additions for the live page are at the end. */
:root { --bg: #F8F9F4; --sf: #FFFFFF; --sf2: #EEF0E9; --sf3: #E6E9E0; --ink: #35383F; --ink2: #5A5D63; --ink3: #6B6E74; --ln: #E2E4DC; --ln2: #D3D6CC; --acc: #BF8F26; --acc-h: #C99A33; --onacc: #22252B; --acctint: #F2EAD3; --acct: #35383F; --focus: #86610F; --pfill: #8F6C14; --pfill-h: #806010; --onpfill: #FFFFFF; --pborder: #8F6C14; --gold: #B5871D; --tile: #F6EEDC; --ok: #1E7A4A; --okbg: #E1F1E5; --info: #2F5BA8; --infobg: #E4ECF8; --beta: #6B45B3; --betabg: #EEE7F8; --warn: #B4461B; --warnbg: #FBE8DF; --err: #C81E1E; --band: #22252B; --onband: #F8F9F4; --log: #16171A; --onlog: #D9D5CC; --sel: #22252B; --onsel: #F8F9F4; --shadow: 0 1px 2px rgba(40,30,10,.05), 0 8px 24px -18px rgba(40,30,10,.35); --pop: 0 24px 60px -20px rgba(20,16,8,.45); --f-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; --f-first: "Poppins", "Inter", system-ui, sans-serif; --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --r: 14px; --r-sm: 10px; --bot-glyph: none; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 14px/1.5 var(--f-body); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.tnum { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.brand { display: flex; align-items: center; gap: 8px; padding: 0 8px 14px; text-align: left; border-radius: 8px; }
.brand:hover .wordmark { opacity: .8; }
.brand img { width: 30px; height: 25px; display: block; }
.wordmark { font: 700 26px/1 var(--f-first); letter-spacing: -.04em; color: var(--ink); }
.wordmark b { color: var(--gold); font-weight: 700; }
.eyebrow { font: 600 11px var(--f-body); letter-spacing: .2em; color: var(--ink2); text-transform: uppercase; }
.display { margin: 0; font: 700 clamp(34px, 4.6vw, 58px)/1.02 var(--f-display); letter-spacing: -.035em; text-wrap: balance; }
.display.md { font-size: clamp(30px, 3.6vw, 46px); }
.sub { font: 400 clamp(16px, 1.6vw, 21px)/1.45 var(--f-body); color: var(--ink2); margin: 0; }
.h2 { margin: 0; font: 700 22px/1.2 var(--f-display); letter-spacing: -.025em; text-wrap: balance; }
.h3 { margin: 0; font: 700 17px/1.25 var(--f-display); letter-spacing: -.02em; }
.muted { color: var(--ink2); }
.faint { color: var(--ink3); }
.sm { font-size: 13px; }
.xs { font-size: 12px; }
.card { background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r); }
.pad-l { padding: 22px; }
.row { display: flex; gap: 12px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 10px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.link { font: 500 13.5px var(--f-body); color: var(--ink); display: inline-flex; align-items: center; gap: 4px; text-decoration: underline; text-decoration-color: var(--ln2); text-underline-offset: 4px; }
.link:hover { text-decoration-color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 10px; font: 600 14px var(--f-body); white-space: nowrap; transition: background .15s, border-color .15s; }
.btn-p { background: var(--pfill); color: var(--onpfill); border: 1px solid var(--pborder); }
.btn-p:hover { background: var(--pfill-h); border-color: var(--pfill-h); }
.btn.lg { height: 50px; padding: 0 24px; font-size: 15.5px; border-radius: 12px; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.it { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; }
.it.sm { width: 32px; height: 32px; border-radius: 9px; }
.it.lg { width: 56px; height: 56px; border-radius: 14px; }
.t-ok { background: var(--okbg); color: var(--ok); }
.t-info { background: var(--infobg); color: var(--info); }
.t-beta { background: var(--betabg); color: var(--beta); }
.t-warn { background: var(--warnbg); color: var(--warn); }
.t-acc { background: var(--acctint); color: var(--acct); }
.t-mute { background: var(--sf2); color: var(--ink2); }
.goldc { color: var(--gold); }
textarea.in, input.in, select.in { box-sizing: border-box; max-width: 100%; width: 100%; border: 1px solid var(--ln); background: var(--sf); border-radius: 10px; padding: 10px 12px; font-size: 14px; resize: vertical; }
textarea.in:focus, input.in:focus, select.in:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); }
.firstrun { display: grid; grid-template-columns: 440px minmax(0,1fr); min-height: 100vh; }
.firstrun .left { background: var(--band); color: var(--onband); padding: 36px 40px 0; display: flex; flex-direction: column; gap: 22px; overflow: hidden; position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; }
.firstrun .left > * { flex-shrink: 0; }
.firstrun .left .bp-title { margin: 56px 0 0; font: 600 44px/1.04 var(--f-first); letter-spacing: -.04em; }
.firstrun .mtn { position: relative; margin: 8px -40px 0; height: min(440px, 48vh); flex: none; }
.firstrun .mtn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%; }
.firstrun .mtn::before { content: ""; position: absolute; inset: 0 0 auto; height: 55%; background: linear-gradient(var(--band), transparent); z-index: 1; }
.firstrun .mtn::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, var(--band)); z-index: 1; }
.firstrun .right { padding: 30px clamp(16px, 4vw, 48px) 40px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.th-d { display: none !important; }
.wl-found { display: flex; align-items: center; gap: 22px; padding: 26px 30px; border-radius: 18px; background: var(--band); color: var(--onband); }
.wl-found-ico { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--pfill); color: var(--onpfill); }
.wl-found-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wl-found-t .eyebrow { color: var(--onband); opacity: .75; }
.wl-found-t .h2 { margin: 0; font-size: 26px; color: var(--onband); }
.wl-found-t p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--onband); opacity: .85; }
.wl-found-btn { flex: none; background: var(--onband); color: var(--band); border-color: transparent; }
.wl-found-btn:hover { background: var(--sf); color: var(--band); }
@media (max-width: 860px) {
.wl-found { flex-direction: column; align-items: flex-start; }
}
.wl-pass { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); overflow: hidden; padding: 0; }
.wl-pass-l { display: flex; flex-direction: column; gap: 12px; padding: 30px 32px; }
.wl-pass-l .h2 { margin: 0; font-size: 26px; }
.wl-pass-p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink2); }
.wl-pass-link { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 6px 6px 6px 14px; border: 1px solid var(--ln2); border-radius: 14px; background: var(--bg); }
.wl-pass-link > svg { flex: none; color: var(--ink3); }
.wl-pass-link input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: 500 15px var(--f-body); color: var(--ink); }
.wl-pass-link .btn { flex: none; }
.wl-pass-r { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 30px 32px; background: var(--acctint); }
.wl-pass-amt { font: 800 56px/1 var(--f-display); letter-spacing: -.04em; color: var(--ink); }
.wl-pass-each { font-size: 15px; font-weight: 600; color: var(--ink2); }
.wl-pass-steps { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wl-pass-steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); }
.wl-pass-steps span { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--sf); border: 1px solid var(--ln2); font: 700 12px var(--f-body); color: var(--ink2); }
@media (max-width: 860px) {
.wl-pass { grid-template-columns: 1fr; }
.wl-pass-link { flex-wrap: wrap; }
.wl-pass-link input { flex-basis: 60%; }
}
.wl-head.short { min-height: 120px; padding-right: 340px; }
.wl-head.short .wl-courier { width: 400px; top: -36px; }
@media (max-width: 1100px) {
.wl-head.short { padding-right: 280px; }
.wl-head.short .wl-courier { width: 340px; }
}
@media (max-width: 860px) {
.wl-head.short { padding-right: 0; min-height: 0; }
.wl-head.short .wl-courier { width: 100%; top: auto; }
}
.wl-mail { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; padding: 14px 22px; border-radius: 18px; background: var(--sf); border: 1px solid var(--ln); box-shadow: var(--shadow); color: var(--ink); font-size: 15.5px; line-height: 1.5; }
.wl-mail-ico { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--pfill); color: var(--onpfill); }
.wl-mail-t { font: 700 18px/1.25 var(--f-display); letter-spacing: -.01em; }
.wl-mail .wl-you { overflow-wrap: anywhere; }
.wl-pick-pill { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 18px; border-radius: 99px; border: 1px solid var(--ln2); background: var(--sf); font: 600 16.5px/1.3 var(--f-body); color: var(--ink); }
.wl-pick-pill svg { flex: none; color: var(--ink2); }
.wl-pick-h { display: flex; align-items: center; gap: 16px; }
.wl-pick-h h3 { margin: 0; font: 800 clamp(21px, 1.9vw, 26px)/1.1 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.wl-pick-h .it.lg { width: 48px; height: 48px; border-radius: 14px; }
.wl-pick-h .it.lg svg { width: 24px; height: 24px; }
.wl-pick-lead { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink2); }
.firstrun.solo { grid-template-columns: minmax(0, 1fr); }
.wl-brand { align-self: flex-start; padding: 0; background: none; border: 0; cursor: pointer; }
.wl-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.wl-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.wl-ban { height: 170px; overflow: hidden; border-bottom: 1px solid var(--ln); background: var(--sf); }
.wl-ban img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.ep-upsell .wl-ban { border-bottom-color: transparent; }
.wl-card-in { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 24px 24px; }
.wl-card-in .h2 { margin: 0; font-size: 22px; }
.wl-card-in .wl-pick-pill { min-height: 0; padding: 6px 14px; font-size: 14.5px; gap: 8px; }
.wl-card-go { margin-top: auto; }
@media (max-width: 860px) {
.wl-two { grid-template-columns: minmax(0, 1fr); }
}
.bp-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; height: 34px; margin-top: 40px; padding: 0 16px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--onband); font: 600 11.5px var(--f-body); letter-spacing: .14em; text-transform: uppercase; }
.bp-pill svg { color: var(--gold); }
.firstrun .left .bp-pill + .bp-title { margin-top: 0; }
.wl-head { position: relative; padding-right: 420px; min-height: 210px; justify-content: center; }
.wl-head > :not(.wl-courier) { position: relative; z-index: 1; }
.wl-courier { position: absolute; z-index: 0; right: -40px; top: -25px; width: 560px; height: auto; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 22%, black 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, black 22%, black 86%, transparent 100%); }
@media (max-width: 1100px) {
.wl-head { padding-right: 300px; }
.wl-courier { width: 420px; }
}
@media (max-width: 860px) {
.wl-head { padding-right: 0; min-height: 0; }
.wl-courier { position: static; order: 9; width: 100%; max-width: 420px; margin: -6px 0 -10px auto; }
}
.wl-field { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--ln); border-radius: 14px; background: var(--sf); cursor: text; transition: border-color .15s, box-shadow .15s; }
.wl-field:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); }
.wl-fico { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--sf2); color: var(--ink2); }
.wl-fbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wl-flabel { font: 500 13px var(--f-body); color: var(--ink2); }
.wl-finput { width: 100%; padding: 0; border: 0; background: transparent; outline: none; font: 500 16px var(--f-body); color: var(--ink); }
.wl-finput::placeholder { color: color-mix(in srgb, var(--ink3) 45%, var(--sf)); opacity: 1; }
.wl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wl-tile { position: relative; display: flex; align-items: flex-start; gap: 14px; min-height: 96px; padding: 18px 16px; border: 1px solid var(--ln); border-radius: 14px; background: var(--sf); text-align: left; color: var(--ink); transition: border-color .15s, background-color .15s, box-shadow .15s; }
.wl-tile:hover { border-color: var(--acc); box-shadow: var(--shadow); }
.wl-tile.on { border: 1.5px solid var(--acc); background: var(--acctint); padding: 17.5px 15.5px; }
.wl-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--tile); color: var(--ink); }
.wl-tile.on .wl-ico { background: var(--pfill); color: var(--onpfill); }
.wl-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-right: 14px; }
.wl-tl { font: 700 15px/1.25 var(--f-display); letter-spacing: -.01em; }
.wl-sub { font: 400 13px/1.4 var(--f-body); color: var(--ink2); }
.wl-tick { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--pfill); color: var(--onpfill); }
@media (max-width: 1100px) {
.wl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.wl-tiles { grid-template-columns: 1fr; }
.wl-tile { min-height: 0; }
}
.wl-tile.sm { min-height: 0; padding: 14px; gap: 12px; }
.wl-tile.sm.on { padding: 13.5px; }
.wl-tile.sm .wl-ico { width: 36px; height: 36px; border-radius: 10px; }
.wl-tile.sm .wl-tl { font-size: 14px; }
.wl-tile.sm .wl-sub { font-size: 12.5px; }
.wl-tile:disabled { opacity: .5; cursor: default; }
.wl-tile:disabled:hover { border-color: var(--ln); box-shadow: none; }
.fr-tick { width: 22px; height: 22px; border-radius: 6px; background: var(--gold); color: var(--band); display: grid; place-items: center; flex: none; }
@media (max-width: 1100px) {
.firstrun { grid-template-columns: 340px minmax(0,1fr); }
}
@media (max-width: 860px) {
.firstrun { grid-template-columns: 1fr; }
.firstrun .left { padding: 22px 16px 22px; position: static; height: auto; }
.firstrun .left .bp-title { margin-top: 12px; font-size: 30px; }
.firstrun .mtn, .firstrun .hide-m { display: none; }
.firstrun .right { padding-bottom: 32px; }
}
.ep-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.ep-step { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; border: 1px solid var(--ln); font: 500 13px var(--f-body); color: var(--ink2); }
.ep-step .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--sf2); font: 600 12px var(--f-body); }
.ep-step.on { border-color: var(--acc); color: var(--ink); font-weight: 600; }
.ep-step.on .n { background: var(--pfill); color: var(--onpfill); }
.ep-step.dn .n { background: var(--ok); color: #fff; }
.ep-upsell { background: var(--acctint); border-color: transparent; }
@media (max-width: 860px) {
.ep-step:not(.on) .lb { display: none; }
}
@media (max-width: 860px) {
.g2 { grid-template-columns: 1fr; }
.hide-m { display: none !important; }
}
.tfield { display: flex; flex-direction: column; gap: 4px; }
.in.sm { padding: 7px 10px; font-size: 13.5px; }
.btn.on { border-color: var(--acc); background: var(--acctint); }


/* Live-page additions. */
.wl-col { gap: 28px; max-width: 1040px; width: 100%; margin: 0 auto; }
.bp-sub { margin: 0; font-size: 17px; line-height: 1.55; opacity: .85; }
.bp-pts { gap: 12px; }
.bp-pts .row { gap: 12px; }
.firstrun .left .brand { padding: 0; }
.firstrun .left .eyebrow { color: var(--onband); opacity: .8; }
.firstrun .left .brand img, .wl-brand img { width: auto; height: 30px; }
.wl-err { margin: 0; color: var(--err); font-weight: 600; }
.wl-soon { margin: 0; font-size: 13.5px; color: var(--ink2); }
.vx-skip { position: absolute; left: -9999px; }
.vx-skip:focus { left: 16px; top: 16px; z-index: 10; padding: 8px 14px; border-radius: 8px; background: var(--band); color: var(--onband); }