/* Beig Foundation · design language, sign in and gated shell.
   Dark first. Near black ground, glass card, gold marks on dark, Mughal Green marks on light.
   Times Now for titles, Moderat Extended for labels and numerals, Le Monde Journal for prose. */

@font-face{font-family:'Times Now';font-weight:300;src:url("/assets/fonts/TimesNow-SemiLight.woff2") format("woff2");font-display:swap}
@font-face{font-family:'Moderat Extended';font-weight:400;src:url("/assets/fonts/Moderat-Extended-Regular.woff2") format("woff2");font-display:swap}
@font-face{font-family:'Moderat Extended';font-weight:500;src:url("/assets/fonts/Moderat-Extended-Medium.woff2") format("woff2");font-display:swap}
@font-face{font-family:'Le Monde Journal Std';font-weight:400;src:url("/assets/fonts/Le-Monde-Journal-Std-Regular.woff2") format("woff2");font-display:swap}

:root{
  color-scheme:dark;
  --gold:#E39F22; --mughal:#002D1F; --royal:#991C30; --imperial:#131A36; --obsidian:#131313; --ivory:#E5DFD8;
  --ground:#0B0B0C;
  --orb-a:rgba(227,159,34,.13); --orb-b:rgba(0,45,31,.55); --orb-c:rgba(19,26,54,.55);
  --glass:rgba(255,255,255,.065); --glass-2:rgba(255,255,255,.095); --glass-hi-soft:rgba(255,255,255,.035);
  --glass-border:rgba(255,255,255,.10); --glass-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
  --ink:#F2EEE8; --ink-soft:rgba(242,238,232,.74); --ink-micro:rgba(242,238,232,.50);
  --hair:rgba(255,255,255,.08); --hair-gold:rgba(227,159,34,.45);
  --field:rgba(255,255,255,.05); --field-focus:rgba(255,255,255,.09);
  --safe:#35B37A; --alert:#E06C7A;
  --logo:#E39F22; --seal:#E39F22;
  --serif:'Times Now','Cormorant Garamond','Times New Roman',Georgia,serif;
  --body:'Le Monde Journal Std','EB Garamond',Georgia,serif;
  --sans:'Moderat Extended','Helvetica Neue',Arial,sans-serif;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --ground:#F4F1EC;
    --orb-a:rgba(227,159,34,.18); --orb-b:rgba(0,45,31,.09); --orb-c:rgba(19,26,54,.07);
    --glass:rgba(255,255,255,.62); --glass-2:rgba(255,255,255,.80); --glass-hi-soft:rgba(255,255,255,.55);
    --glass-border:rgba(255,255,255,.85); --glass-shadow:0 24px 60px rgba(19,19,19,.08), inset 0 1px 0 rgba(255,255,255,.9);
    --ink:#131313; --ink-soft:rgba(19,19,19,.74); --ink-micro:rgba(19,19,19,.50);
    --hair:rgba(19,19,19,.08); --hair-gold:rgba(122,80,7,.45);
    --field:rgba(19,19,19,.04); --field-focus:rgba(255,255,255,.9);
    --safe:#1C6B45; --alert:#991C30;
    --logo:#002D1F; --seal:#7A5007;
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --ground:#F4F1EC;
  --orb-a:rgba(227,159,34,.18); --orb-b:rgba(0,45,31,.09); --orb-c:rgba(19,26,54,.07);
  --glass:rgba(255,255,255,.62); --glass-2:rgba(255,255,255,.80); --glass-hi-soft:rgba(255,255,255,.55);
  --glass-border:rgba(255,255,255,.85); --glass-shadow:0 24px 60px rgba(19,19,19,.08), inset 0 1px 0 rgba(255,255,255,.9);
  --ink:#131313; --ink-soft:rgba(19,19,19,.74); --ink-micro:rgba(19,19,19,.50);
  --hair:rgba(19,19,19,.08); --hair-gold:rgba(122,80,7,.45);
  --field:rgba(19,19,19,.04); --field-focus:rgba(255,255,255,.9);
  --safe:#1C6B45; --alert:#991C30;
  --logo:#002D1F; --seal:#7A5007;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh;padding:0 16px}
svg{display:block}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.mark svg, .brand svg{width:100%;height:100%;fill:var(--logo);fill-rule:evenodd}

/* ambient: radial gradients only, never filter:blur */
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%}
.orb.a{width:70vmax;height:70vmax;left:-20vmax;top:-30vmax;background:radial-gradient(closest-side,var(--orb-a),transparent 70%)}
.orb.b{width:80vmax;height:80vmax;right:-30vmax;bottom:-40vmax;background:radial-gradient(closest-side,var(--orb-b),transparent 70%)}
.orb.c{width:60vmax;height:60vmax;left:30vmax;bottom:-30vmax;background:radial-gradient(closest-side,var(--orb-c),transparent 70%)}

/* glass: static on cards (no backdrop-filter, so nothing re blurs when content changes) */
.glass{isolation:isolate;background:linear-gradient(180deg,var(--glass-hi-soft),transparent 38%),var(--glass);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:26px}

.stage{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 0}
.card{width:100%;max-width:440px;padding:40px 40px 28px;position:relative}
.head{text-align:center}
.mark{display:block;width:60px;height:60px;margin:0 auto;color:var(--logo)}
.micro{font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-micro);margin:18px 0 0}
.title{font-family:var(--serif);font-weight:300;font-size:40px;line-height:1.05;letter-spacing:-.01em;margin:10px 0 0;color:var(--ink)}
.head::after{content:"";display:block;width:56px;height:1px;background:var(--hair-gold);margin:22px auto 0}

.step{display:none;margin-top:26px}
.step.is-on{display:block}
.lead{font-size:16px;line-height:1.55;color:var(--ink-soft);margin:0 0 20px;text-align:center}
.lead b{font-weight:400;color:var(--ink)}

.field{display:block;position:relative;margin-bottom:14px}
.field .label{position:absolute;left:18px;top:11px;font-family:var(--sans);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-micro);pointer-events:none}
.field input{width:100%;font:inherit;font-family:var(--sans);font-size:17px;color:var(--ink);background:var(--field);border:1px solid var(--glass-border);border-radius:16px;padding:30px 18px 13px;outline:none;transition:border-color .2s,background .2s;appearance:none;-webkit-appearance:none}
.field input::placeholder{color:var(--ink-micro);opacity:.7}
.field input:focus{border-color:var(--hair-gold);background:var(--field-focus)}
.field.code input{font-size:30px;letter-spacing:.32em;text-align:center;padding:32px 18px 14px;font-variant-numeric:tabular-nums}
.field.code .label{left:0;right:0;text-align:center}
.field input:invalid:not(:placeholder-shown){border-color:var(--glass-border)}

.btn{position:relative;width:100%;font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--ground);background:var(--ink);border:0;border-radius:16px;padding:19px 18px;cursor:pointer;transition:transform .12s,opacity .2s}
.btn:hover{opacity:.92}
.btn:active{transform:scale(.99)}
.btn[disabled]{opacity:.55;cursor:default}
.btn.google{display:flex;align-items:center;justify-content:center;gap:12px;text-decoration:none;background:var(--glass-2);color:var(--ink);border:1px solid var(--glass-border);padding:17px 18px}
.btn.google svg{width:18px;height:18px;flex:none}
.btn.google:hover{opacity:1;background:var(--field-focus)}
.or{display:flex;align-items:center;gap:14px;margin:18px 0 16px;font-family:var(--sans);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-micro)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--hair)}
.btn .spin{display:none;position:absolute;right:18px;top:50%;width:16px;height:16px;margin-top:-8px;border:2px solid var(--ground);border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
.btn.busy .spin{display:block}
.btn.busy span{opacity:.6}
@keyframes spin{to{transform:rotate(360deg)}}

.hint{min-height:22px;margin:14px 0 0;font-family:var(--sans);font-size:12px;letter-spacing:.02em;color:var(--ink-micro);text-align:center;line-height:1.5}
.hint.err{color:var(--alert)}
.hint.ok{color:var(--safe)}

.links{display:flex;justify-content:space-between;gap:12px;margin-top:10px;flex-wrap:wrap}
.link{font-family:var(--sans);font-size:11px;letter-spacing:.06em;color:var(--ink-soft);background:none;border:0;padding:8px 0;cursor:pointer;text-decoration:none;border-bottom:1px solid transparent}
.link:hover{border-bottom-color:var(--hair-gold)}
.link[disabled]{color:var(--ink-micro);cursor:default;border-bottom-color:transparent}

.foot{margin-top:28px;padding-top:18px;border-top:1px solid var(--hair);text-align:center}
.foot p{margin:0;font-family:var(--sans);font-size:10px;letter-spacing:.06em;line-height:1.7;color:var(--ink-micro)}
.colophon{text-align:center;font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-micro);margin:0 0 22px}
.colophon a{color:inherit;text-decoration:none}
.colophon a:hover{color:var(--ink-soft)}

/* gated shell */
.nav{position:sticky;top:12px;z-index:5;margin:12px auto 0;max-width:1100px;width:100%;display:flex;align-items:center;gap:16px;padding:12px 18px;border-radius:20px;background:var(--glass-2);border:1px solid var(--glass-border);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:var(--glass-shadow)}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand svg{width:44px;height:44px;flex:none}
.brand .t{font-family:var(--serif);font-weight:300;font-size:22px;line-height:1;white-space:nowrap;color:var(--ink)}
.grow{flex:1}
.seal{width:40px;height:40px;border-radius:50%;border:1px solid var(--hair-gold);display:grid;place-items:center;color:var(--seal);font-family:var(--sans);font-size:11px;letter-spacing:.08em;flex:none}
.signout{font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);background:var(--glass);border:1px solid var(--glass-border);border-radius:999px;padding:11px 16px;cursor:pointer;white-space:nowrap}
.signout:hover{color:var(--ink)}
.wrap{max-width:1100px;width:100%;margin:0 auto;padding:56px 0 64px;flex:1}
.sentence{font-family:var(--serif);font-weight:300;font-size:clamp(34px,5vw,60px);line-height:1.08;letter-spacing:-.01em;margin:0 0 14px;color:var(--ink)}
.sentence em{font-style:normal;color:var(--gold)}
.sub{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-micro);margin:0 0 40px}
.panel{padding:30px 32px;max-width:640px}
.panel h2{font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-micro);margin:0 0 14px;font-weight:400}
.panel p{margin:0 0 12px;color:var(--ink-soft);font-size:16px;line-height:1.6}
.panel p:last-child{margin:0}
footer.site{max-width:1100px;width:100%;margin:0 auto;padding:0 0 28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--sans);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-micro)}

@media (max-width:760px){
  .card{padding:34px 22px 22px}
  .title{font-size:34px}
  .field.code input{font-size:26px;letter-spacing:.26em}
  .nav{position:static;margin-top:10px}
  .brand .t{font-size:19px}
  .wrap{padding:36px 0 48px}
  .panel{padding:24px 20px}
}
@media (prefers-reduced-motion: reduce){ .btn .spin{animation:none} .btn,.field input{transition:none} }