/* ===========================================================================
   BELLIO — THE DOORS.

   Welcome, sign in, join, apply, connect. The same plaster, ink and cognac as
   the inside of the club, and the same shapes: a niche under an arched head,
   capsule fields, circular seals. Nothing here is a box.

   Shares its tokens with bellio-ui.css but stands alone, because a door is
   opened before any of the app's scripts load.
   =========================================================================== */
:root{
  --plaster:#F4F0E9; --plaster-2:#EDE7DD; --niche:#FFFDFA; --shade:#E7E0D4;
  --ink:#241F1C; --ink-2:#5E554E; --ink-3:#8E847A; --ink-4:#B6ADA2;
  --cognac:#A85D2E; --cognac-2:#8A4A23; --cognac-sf:#F7E9DD; --olive:#5F6B45;
  --ln:#E2DACD; --ln-2:#D2C8B7;
  --u:"Jost",-apple-system,"Segoe UI",sans-serif;
  --e:cubic-bezier(.22,.72,.28,1);
  --sp:linear(0,.009 1.6%,.035 3.3%,.142 6.9%,.317 10.9%,.704 18.5%,.892 22.4%,
    1.022 26.1%,1.077 28.3%,1.107 30.6%,1.112 33.2%,1.095 36.1%,1.061 39.5%,
    .988 46.1%,.965 49.2%,.953 52.9%,.954 57.3%,.966 62.2%,1.001 72.4%,1.014 79.3%,1.001 94.1%,1);
  --cast:0 2px 4px rgba(60,46,32,.04), 0 18px 40px -20px rgba(60,46,32,.22);
  --cast-2:0 4px 10px rgba(60,46,32,.06), 0 40px 70px -26px rgba(60,46,32,.3);
  --cast-3:0 8px 20px rgba(60,46,32,.1), 0 60px 110px -30px rgba(60,46,32,.4);
  --arch:999px 999px 36px 36px / 46% 46% 36px 36px;
  --arch-sm:999px 999px 24px 24px / 50% 50% 24px 24px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--plaster);color:var(--ink);font-family:var(--u);font-size:15.5px;
  line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;overflow-x:hidden;min-height:100vh}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
ul{list-style:none}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
::selection{background:var(--cognac-sf)}
:focus-visible{outline:1.5px solid var(--cognac);outline-offset:3px;border-radius:999px}
.num{font-variant-numeric:tabular-nums}
.caps{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}

body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70vw 50vw at 84% -14%,rgba(168,93,46,.12),transparent 62%),
    radial-gradient(56vw 44vw at 6% 8%,rgba(95,107,69,.1),transparent 58%),
    radial-gradient(80vw 54vw at 50% 112%,rgba(237,231,221,.9),transparent 64%)}

/* --------------------------------------------------------------- the frame */
.door{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;padding:34px 20px 48px}
.door .mark{display:flex;align-items:center;gap:11px;margin-bottom:auto}
.door .mark .seal{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--cognac);color:var(--niche);font-size:17px;font-weight:500;
  box-shadow:0 6px 16px -6px rgba(168,93,46,.75)}
.door .mark .wd{font-size:23px;font-weight:400;letter-spacing:.01em}

.panel{width:100%;max-width:520px;margin:44px 0;text-align:center}
.panel.wide{max-width:620px}
.panel .k{color:var(--ink-3);margin-bottom:18px}
.panel h1{font-size:clamp(34px,5.4vw,56px);font-weight:300;line-height:1.12;letter-spacing:-.018em}
.panel h1 em{font-style:italic;color:var(--cognac)}
.panel .rule{width:54px;height:1px;background:var(--ln-2);margin:26px auto}
.panel .sub{color:var(--ink-2);font-weight:300;font-size:17px;line-height:1.7;max-width:40ch;
  margin-inline:auto}
.panel .sub b{font-weight:400;color:var(--ink)}

/* the niche a form sits in */
.leaf{background:var(--niche);border-radius:var(--arch-sm);box-shadow:var(--cast-2);
  padding:40px 32px 32px;text-align:left;margin-top:34px}
.leaf h2{font-size:25px;font-weight:300;text-align:center}
.leaf .lead{color:var(--ink-3);font-weight:300;font-size:14.5px;text-align:center;margin-top:8px}

/* capsule fields */
.field{display:block;margin-top:16px}
.field > span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);padding:0 22px 7px}
.field input,.field select,.field textarea{display:block;width:100%;height:56px;padding:0 22px;
  border-radius:999px;background:var(--plaster);font-size:16px;font-weight:300;outline:0;
  color:var(--ink);transition:box-shadow .3s var(--e),background .3s var(--e)}
.field textarea{height:auto;min-height:124px;border-radius:26px;padding:17px 22px;resize:none;
  line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{background:var(--niche);
  box-shadow:var(--cast),inset 0 0 0 1.5px var(--cognac-sf)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-4)}

/* the actions */
.actions{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:13px}
.cta,.btn-go,button.cta{display:inline-flex;align-items:center;justify-content:center;gap:11px;
  width:100%;max-width:400px;height:58px;padding:0 28px;border-radius:999px;background:var(--ink);
  color:var(--niche);font-size:16px;font-weight:400;letter-spacing:.01em;
  box-shadow:var(--cast);transition:background .3s var(--e),transform .4s var(--sp),box-shadow .4s var(--e)}
.cta:hover,.btn-go:hover{background:var(--cognac);transform:translateY(-2px);box-shadow:var(--cast-2)}
.cta svg{width:19px;height:19px}
.cta2{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;
  max-width:400px;height:58px;padding:0 24px;border-radius:999px;background:var(--niche);
  color:var(--ink-2);font-size:14.5px;font-weight:400;box-shadow:var(--cast);
  transition:transform .4s var(--sp),box-shadow .4s var(--e),color .3s var(--e)}
.cta2:hover{transform:translateY(-2px);box-shadow:var(--cast-2);color:var(--ink)}
.cta2 img{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none}
.places{font-size:13px;color:var(--ink-3);font-weight:300}
.places b{color:var(--cognac);font-weight:500}
.signin{font-size:14.5px;color:var(--ink-3);font-weight:300;margin-top:4px}
.signin a{color:var(--cognac);border-bottom:1px solid transparent}
.signin a:hover{border-bottom-color:var(--cognac)}
.terms{font-size:12.5px;color:var(--ink-4);font-weight:300;max-width:38ch;line-height:1.65;
  margin-top:10px}
.terms a{color:var(--ink-3);border-bottom:1px solid var(--ln-2)}
.terms a:hover{color:var(--cognac)}

/* the virtues, as three circles */
.virtues{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;margin-top:62px}
.virtue{width:168px;text-align:center}
.virtue .o{width:66px;height:66px;border-radius:50%;background:var(--niche);box-shadow:var(--cast);
  display:grid;place-items:center;margin:0 auto 15px;color:var(--cognac);
  transition:transform .5s var(--sp),box-shadow .5s var(--e)}
.virtue:hover .o{transform:translateY(-5px);box-shadow:var(--cast-2)}
.virtue .o svg{width:25px;height:25px}
.virtue .n{font-size:16px;font-weight:400}
.virtue .d{font-size:13.5px;color:var(--ink-3);font-weight:300;margin-top:5px;line-height:1.55}

.door .foot{margin-top:auto;padding-top:48px;text-align:center;color:var(--ink-4);font-size:13px}
.door .foot a:hover{color:var(--cognac)}

/* a line of trouble, said plainly */
.note{margin-top:16px;padding:14px 22px;border-radius:26px;background:var(--cognac-sf);
  color:var(--cognac-2);font-size:14px;font-weight:300;text-align:center}
.note.good{background:rgba(95,107,69,.13);color:var(--olive)}

/* the entrance */
.st{opacity:0;transform:translateY(18px);animation:rise .9s var(--sp) forwards}
.st1{animation-delay:.05s}.st2{animation-delay:.13s}.st3{animation-delay:.21s}
.st4{animation-delay:.3s}.st5{animation-delay:.39s}.st6{animation-delay:.47s}
.st7{animation-delay:.55s}.st8{animation-delay:.63s}
@keyframes rise{to{opacity:1;transform:none}}
html.reg-wait .actions{visibility:hidden}

@media (max-width:600px){
  .door{padding:22px 16px 36px}
  .leaf{padding:30px 20px 24px;border-radius:28px}
  .virtues{gap:18px}
  .virtue{width:140px}
}
@media (prefers-reduced-motion:reduce){
  .st{opacity:1;transform:none;animation:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ===========================================================================
   THE DOORS, AS THEY ARE BUILT.

   Sign in, join, apply and connect carry real auth wiring — their markup is
   addressed by id and by class from scripts that must not be touched. So the
   markup stays exactly where it is and every one of its names is given the
   arch language here. One closed list of selectors, all four pages, checked
   on screen one at a time.
   =========================================================================== */

/* the painted backdrop those pages ship is replaced by plaster */
.canvas,.glow,.vig,.grain{display:none!important}

/* ---- the frame ---- */
.loginwrap,.suwrap,.wrap{position:relative;z-index:2;min-height:100vh;display:flex;
  flex-direction:column;align-items:center;justify-content:center;padding:84px 20px 56px}
.logincard,.sucard,[data-page="apply"] .panel{width:100%;max-width:520px;background:var(--niche);
  border-radius:var(--arch-sm);box-shadow:var(--cast-2);padding:44px 34px 32px;text-align:center;
  border:0}
.sucard{max-width:560px}
[data-page="apply"] .panel{max-width:600px;text-align:left;padding:40px 34px 34px}

.loginback,.su-back,.backlink,.editlink,.mfa-back{position:fixed;left:22px;top:22px;z-index:9;
  display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 22px 0 16px;
  border-radius:999px;background:var(--niche);box-shadow:var(--cast);color:var(--ink-2);
  font-size:14px;transition:transform .35s var(--sp),box-shadow .35s var(--e)}
.loginback:hover,.su-back:hover,.backlink:hover{transform:translateX(-3px);box-shadow:var(--cast-2)}
.mfa-back,.editlink{position:static;margin:14px auto 0;display:inline-flex;background:none;
  box-shadow:none;color:var(--ink-3);height:auto;padding:6px 0}
.mfa-back:hover,.editlink:hover{color:var(--cognac)}

/* ---- the wordmark and the type ---- */
.logincard .mark,.panel .mark,.su-h,.loginsub,.login-eyebrow,.su-sub,.eyebrow,.sub{
  font-family:var(--u)}
.logincard .mark,.panel .mark{font-size:25px;font-weight:400;letter-spacing:.01em;color:var(--ink);
  margin-bottom:6px}
.th{display:none}
.login-eyebrow,.eyebrow,.su-label,.k{font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-top:10px}
.loginsub,.su-sub,.sub{color:var(--ink-3);font-weight:300;font-size:15px;line-height:1.65;
  margin-top:10px;margin-bottom:22px}
.su-h{font-size:26px;font-weight:300;letter-spacing:-.01em;margin-top:14px;color:var(--ink)}
.su-hint,.fine,.su-terms,.su-foot,.loginfoot,.pricenote,.su-invited{font-size:13px;
  color:var(--ink-3);font-weight:300;line-height:1.6}
.loginfoot,.su-foot{margin-top:20px}
.loginfoot a,.su-foot a,.su-terms a,.fine a,.su-hint a{color:var(--cognac)}
.loginfoot a:hover,.su-foot a:hover{border-bottom:1px solid var(--cognac)}

/* ---- capsule fields ---- */
.loginfield-wrap,.fwrap,.su-pwwrap{position:relative;margin-top:14px}
.loginfield,.field input,.field select,.field textarea,.su-handle,
input[type="text"],input[type="email"],input[type="password"],input[type="tel"],textarea,select{
  display:block;width:100%;height:56px;padding:0 22px;border-radius:999px;background:var(--plaster);
  font-size:16px;font-weight:300;font-style:normal;outline:0;color:var(--ink);border:0;
  font-family:var(--u);transition:box-shadow .3s var(--e),background .3s var(--e)}
textarea{height:auto;min-height:118px;border-radius:26px;padding:16px 22px;resize:none;line-height:1.6}
.loginfield:focus,.field input:focus,textarea:focus,select:focus,
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus{
  background:var(--niche);box-shadow:var(--cast),inset 0 0 0 1.5px var(--cognac-sf)}
.loginfield::placeholder,input::placeholder,textarea::placeholder{color:var(--ink-4);
  font-family:var(--u);font-style:normal}
.loginfield-wrap > i,.fwrap > i,.su-pweye{position:absolute;right:22px;top:50%;
  transform:translateY(-50%);color:var(--ink-4);font-size:18px;pointer-events:none}
.su-pweye{pointer-events:auto;cursor:pointer}
.su-pweye:hover{color:var(--cognac)}
.loginfield-wrap > i + .loginfield,.loginfield{padding-right:54px}
.flabel,.field > span,.su-label{display:block;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);padding:0 22px 7px;text-align:left}

/* ---- buttons ---- */
.loginbtn,.submit,.su-next,.fin{display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;height:58px;margin-top:20px;padding:0 26px;border-radius:999px;background:var(--ink);
  color:var(--niche);font-size:16px;font-weight:400;border:0;box-shadow:var(--cast);
  transition:background .3s var(--e),transform .4s var(--sp),box-shadow .4s var(--e)}
.loginbtn:hover,.submit:hover,.su-next:hover,.fin:hover{background:var(--cognac);
  transform:translateY(-2px);box-shadow:var(--cast-2)}
.loginbtn[disabled],.submit[disabled],.su-next[disabled]{opacity:.62;transform:none}
.welbtn{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;height:54px;
  margin-top:10px;padding:0 22px;border-radius:999px;background:var(--niche);color:var(--ink-2);
  font-size:14.5px;border:0;box-shadow:var(--cast);
  transition:transform .4s var(--sp),box-shadow .4s var(--e),color .3s var(--e)}
.welbtn:hover{transform:translateY(-2px);box-shadow:var(--cast-2);color:var(--ink)}
.welbtn .ld-logo,.ld img,.ldhero img.ld-logo{width:24px;height:24px;border-radius:50%;
  object-fit:cover;flex:none}
a.ld{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;height:54px;
  margin-top:10px;padding:0 22px;border-radius:999px;background:var(--niche);color:var(--ink-2);
  font-size:14.5px;box-shadow:var(--cast);
  transition:transform .4s var(--sp),box-shadow .4s var(--e),color .3s var(--e)}
a.ld:hover{transform:translateY(-2px);box-shadow:var(--cast-2);color:var(--ink)}
.divr{display:flex;align-items:center;gap:14px;margin:24px 0 4px;color:var(--ink-4);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.divr::before,.divr::after{content:"";flex:1;height:1px;background:var(--ln)}
.login-alt{margin-top:4px}
.login-or{display:flex;align-items:center;gap:14px;margin:24px 0 4px;color:var(--ink-4);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.login-or::before,.login-or::after{content:"";flex:1;height:1px;background:var(--ln)}
.login-or span{padding:0}

/* ---- a line of trouble ---- */
.login-err,.su-err,.mfa-err,.imp-line{display:none;align-items:center;gap:9px;margin-top:14px;
  padding:13px 20px;border-radius:26px;background:var(--cognac-sf);color:var(--cognac-2);
  font-size:14px;font-weight:300;text-align:left}
.login-err.show,.su-err.show,.mfa-err.show,.imp-line.show,.su-err[style*="block"],
.login-err[style*="block"]{display:flex}

/* ---- the six-digit code ---- */
.mfa-codes{display:flex;gap:9px;justify-content:center;margin-top:20px}
.mfa-codes input{width:54px;height:64px;padding:0;text-align:center;font-size:24px;font-weight:400;
  border-radius:22px;background:var(--plaster);letter-spacing:0}
.mfa-hint{display:flex;align-items:center;gap:10px;justify-content:center;color:var(--ink-3);
  font-size:14px;font-weight:300;margin-top:6px}
.su-hint{display:block;color:var(--ink-3);font-size:13px;font-weight:300;margin-top:8px;
  line-height:1.6}
.su-hint a{color:var(--cognac)}
.mfa-seal,.seal,.su-seal{width:64px;height:64px;border-radius:50%;background:var(--cognac-sf);
  color:var(--cognac);display:grid;place-items:center;margin:0 auto 4px;font-size:26px}

/* ---- joining, step by step ---- */
.su-steps{display:flex;gap:7px;justify-content:center;margin-bottom:24px}
.su-steps .v,.su-steps > span{width:34px;height:4px;border-radius:999px;background:var(--shade);
  transition:background .4s var(--e)}
.su-steps .on,.su-steps .v.on{background:var(--cognac)}
.su-pane{text-align:left}
.su-nav{display:flex;gap:10px;align-items:center;margin-top:20px}
.su-nav .su-next{margin-top:0}
.su-ava,.pv-ava{width:104px;height:104px;border-radius:50%;object-fit:cover;margin:0 auto 14px;
  box-shadow:var(--cast);background:var(--shade)}
.su-done{text-align:center}
.su-handle{text-align:center}

/* ---- the interests, as capsules ---- */
.ichips,.pv-chips,.opt{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.ichip,.pv-chips span,.opt label,.opt .tick{display:inline-flex;align-items:center;gap:8px;height:42px;
  padding:0 20px;border-radius:999px;background:var(--plaster);color:var(--ink-2);font-size:14px;
  cursor:pointer;border:0;transition:background .3s var(--e),color .3s var(--e),transform .35s var(--sp)}
.ichip:hover,.opt label:hover{transform:translateY(-2px)}
.ichip.on,.opt input:checked + label{background:var(--ink);color:var(--niche)}
.ichip-count{font-size:13px;color:var(--ink-3);margin-top:10px;display:block}
.pv-chips span{background:var(--cognac-sf);color:var(--cognac-2);cursor:default}

/* ---- the imported profile ---- */
.ldhero{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:16px}
.ldhero img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.pv-card{border-radius:var(--arch-sm);overflow:hidden;background:var(--niche);box-shadow:var(--cast);
  margin-top:18px;text-align:left}
.pv-ban{height:120px;background:var(--shade);object-fit:cover;width:100%}
.pv-body{padding:0 22px 22px}
.pv-ava{margin:-52px 0 12px;border:4px solid var(--niche)}
.pv-name{font-size:21px;font-weight:400;display:flex;align-items:center;gap:8px}
.pv-handle,.pv-meta{font-size:13.5px;color:var(--ink-3);font-weight:300}
.pv-bio{font-size:15px;color:var(--ink-2);font-weight:300;margin-top:10px;line-height:1.65}
.pv-sync{display:flex;align-items:center;gap:9px;justify-content:center;margin-top:16px;
  color:var(--ink-3);font-size:13.5px}
.vf{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;
  background:var(--cognac);color:#fff;font-size:10px}

/* ---- the spinner ---- */
.spinner,.importing .ti-loader-2,.ti-loader-2{animation:spin 1s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- the wheel (date of birth) ---- */
.wheel{position:relative;height:190px;overflow:hidden;border-radius:26px;background:var(--plaster);
  margin-top:14px}
.wheel-band{position:absolute;left:10px;right:10px;top:50%;height:46px;transform:translateY(-50%);
  border-radius:999px;background:var(--niche);box-shadow:var(--cast);pointer-events:none}
.wheelpick{position:relative;z-index:2;display:flex;height:100%}
.wpad,.wi{text-align:center}
.wi{height:46px;line-height:46px;font-size:17px;font-weight:300;color:var(--ink-3);
  scroll-snap-align:center}
.wi.on{color:var(--ink);font-weight:400}

/* ---- two across ---- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.field{display:block;margin-top:16px}
.done{text-align:center}
.su-invited,.at,.mon,.ring,.pick{font-family:var(--u)}

@media (max-width:600px){
  .loginwrap,.suwrap,.wrap{padding:76px 16px 40px}
  .logincard,.sucard,.panel{padding:32px 20px 24px;border-radius:28px}
  .mfa-codes input{width:44px;height:56px;font-size:21px}
}

/* joining: the chip at the head of each pane, the handle, the agreement */
.su-badge{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;
  border-radius:999px;background:var(--cognac-sf);color:var(--cognac-2);font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;margin:0 auto 14px}
.su-pane{display:flex;flex-direction:column}
.su-pane:not(.on){display:none}
.su-badge,.su-h,.su-sub{align-self:center;text-align:center}
.su-handle{position:relative;margin-top:14px}
.su-handle .at{position:absolute;left:22px;top:50%;transform:translateY(-50%);color:var(--ink-4);
  font-size:16px;font-weight:300;pointer-events:none}
.su-handle .loginfield{padding-left:40px}
.su-invited{display:flex;align-items:center;gap:13px;padding:14px 20px;border-radius:999px;
  background:var(--plaster);margin-top:16px;text-align:left}
.su-invited .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  margin:0;padding:0}
.su-invited .v{font-size:15px;font-weight:400;color:var(--ink)}
.su-invited i{color:var(--cognac);font-size:19px}
.su-terms{display:flex;align-items:flex-start;gap:12px;margin-top:18px;font-size:13.5px;
  color:var(--ink-3);font-weight:300;line-height:1.6;text-align:left;cursor:pointer}
.su-terms input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:24px;height:24px;
  border-radius:50%;background:var(--plaster);flex:none;margin-top:1px;position:relative;
  cursor:pointer;transition:background .3s var(--e)}
.su-terms input[type="checkbox"]:checked{background:var(--olive)}
.su-terms input[type="checkbox"]:checked::after{content:"";position:absolute;left:8px;top:4px;
  width:6px;height:11px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}
.su-terms a{color:var(--cognac)}
.su-pweye{z-index:3}
.su-steps{align-self:center}

/* Those pages carry inline colours from the old palette. Alias the old token
   names onto the new ones so an inline style:var(--gold) still resolves. */
:root{--mut:#5E554E;--faint:#8E847A;--txt:#241F1C;--gold:#A85D2E;--gold2:#8A4A23;
  --gold-soft:#F7E9DD;--gold-deep:#8A4A23;--amber:#A85D2E;--paper:#F4F0E9;--surface:#FFFDFA;
  --hair:#E2DACD;--cta1:#241F1C;--cta2:#A85D2E;--ctatext:#FFFDFA;--serif:var(--u);--sans:var(--u)}
.ldhero > div{text-align:left}
.ldhero b{display:block;font-size:16px;font-weight:500;color:var(--ink)}
.ldhero span{display:block;font-size:13px;color:var(--ink-3);font-weight:300}

/* In the Bellio iPhone app, the welcome page is the app's first screen: one
   still screen with the mark at the top and the panel in the middle. The
   website's three virtues and footer (below the fold on a phone) stay on the
   website; the terms and privacy links are in the panel. */
.in-app .door .virtues,.in-app .door .foot{display:none}
.in-app .door{min-height:100vh;min-height:100dvh;padding:28px 20px 34px}
.in-app .door .mark{margin-bottom:0}
.in-app .door .panel{margin:auto 0}
/* the smallest iPhones: the same screen, a little tighter, still without a scroll */
@media (max-height:700px){
  .in-app .door{padding:18px 18px 22px}
  .in-app .door .panel .k{margin-bottom:12px}
  .in-app .door .panel{padding-top:10px;padding-bottom:6px}
  .in-app .door .panel h1{font-size:31px}
  .in-app .door .panel .rule{margin:16px auto}
  .in-app .door .panel .sub{font-size:15.5px;line-height:1.55}
  .in-app .door .actions{margin-top:20px;gap:10px}
}

/* the Bellio mark on the door pages: the arch and B, as the app icon */
.door .mark .seal{background:url(assets/bellio-arch.svg) center/contain no-repeat;border:0;border-radius:0;
  box-shadow:none;color:transparent;font-size:0;overflow:hidden;width:30px;height:38px}

/* date of birth on the first step (7 Oct 2026): three capsules in a row */
.su-doblbl{margin-top:18px}
.su-dob{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:8px}
.su-dob .loginfield{padding:0 10px;text-align:center;color:var(--ink);letter-spacing:.04em}
.su-dob .loginfield::placeholder{color:var(--ink-4);letter-spacing:0}
/* A sign-up error shows whenever it has words in it. signup.html only ever
   sets the text, and .su-err is display:none until .show — so every sign-up
   error ("Passwords don't match", "places are closed", a bad invitation…)
   was invisible and Continue simply seemed to do nothing (found 7 Oct 2026). */
.su-err:not(:empty){display:flex}

/* Sign-up, "Add a profile photo" (7 Oct 2026). .su-ava above is the round
   avatar IMAGE; here the same class wraps the camera circle and its label, so
   the wrapper itself became a small beige circle with its contents spilling
   out. The wrapper is a column; the circle is .ring; the label is .pick. */
div.su-ava{width:auto;height:auto;border-radius:0;box-shadow:none;background:none;
  display:flex;flex-direction:column;align-items:center;gap:12px;margin:22px auto 6px}
.su-ava .ring{width:116px;height:116px;border-radius:50%;background:var(--shade);box-shadow:var(--cast);
  display:grid;place-items:center;overflow:hidden;cursor:pointer;color:var(--cognac);font-size:30px;
  transition:transform .4s var(--sp),box-shadow .4s var(--e)}
.su-ava .ring:hover{transform:translateY(-2px)}
.su-ava .ring img{width:100%;height:100%;object-fit:cover;display:block}
.su-ava .pick{font-size:14.5px;color:var(--cognac);cursor:pointer}
.su-ava .pick:hover{text-decoration:underline}

/* No scroll bars anywhere in Bellio (Danny, 8 Oct 2026) — it all still scrolls. */
html,body,*{scrollbar-width:none}
::-webkit-scrollbar{width:0;height:0;display:none}

/* Room for a thumb on the way in: Sign in and Join free are about 40px to press. */
.signin a,.loginfoot a,.su-foot a{display:inline-block;padding:10px 4px;margin:-10px -4px}