/* Studium waitlist page. Tokens live on :root; layout tokens switch at 767px. */
@font-face{font-family:'Instrument Sans';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/InstrumentSans-Regular.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/InstrumentSans-Medium.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/InstrumentSans-SemiBold.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/InstrumentSans-Bold.woff2) format('woff2')}

:root{
  color-scheme:light;
  /* theme tokens (light) */
  --bg:#FFFFFF;--text:#111111;--text2:#4F4F4F;--fill:#F2F2F2;--hair:#EBEBEB;--accent:#C94F1C;--card:#1C1C1E;--frame:#111111;--island-edge:transparent;
  /* layout tokens (desktop) */
  --pad:0 120px;--head-h:88px;--hero-cols:minmax(0,1fr) 380px;--hero-gap:64px;--hero-pad:56px 0 112px;
  --h1:84px;--sub:20px;--sub-gap:24px;--form-max:480px;--form-dir:row;--ph-just:flex-end;
  --ph-w:359px;--ph-h:777px;--ph-s:.92;--sec:112px 0;--feat-cols:repeat(3,minmax(0,1fr));--feat-gap:32px;
  --detail-cols:minmax(0,5fr) minmax(0,7fr);--detail-gap:64px;--h2:48px;--la-s:.86;
  --cta-pad:128px 0;--h2-cta:64px;--foot-dir:row;--foot-align:center;
  --num:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',sans-serif;
  --num-text:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){color-scheme:dark;--bg:#000000;--text:#F5F5F5;--text2:#ABABAB;--fill:#1C1C1E;--hair:#262628;--accent:#DA5D29;--card:#2C2C2E;--frame:#2A2A2A;--island-edge:rgba(255,255,255,.1)}
}
:root[data-theme="dark"]{color-scheme:dark;--bg:#000000;--text:#F5F5F5;--text2:#ABABAB;--fill:#1C1C1E;--hair:#262628;--accent:#DA5D29;--card:#2C2C2E;--frame:#2A2A2A;--island-edge:rgba(255,255,255,.1)}
@media (max-width:767px){
  :root{
    --pad:0 24px;--head-h:64px;--hero-cols:minmax(0,1fr);--hero-gap:56px;--hero-pad:32px 0 72px;
    --h1:52px;--sub:17px;--sub-gap:16px;--form-max:none;--form-dir:column;--ph-just:center;
    --ph-w:320px;--ph-h:693px;--ph-s:.82;--sec:72px 0;--feat-cols:minmax(0,1fr);--feat-gap:56px;
    --detail-cols:minmax(0,1fr);--detail-gap:32px;--h2:34px;--la-s:.8;
    --cta-pad:88px 0;--h2-cta:40px;--foot-dir:column;--foot-align:flex-start;
  }
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Instrument Sans',sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
a:hover{opacity:.6}
button{font:inherit;border:0;margin:0}
h1,h2,h3,p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none !important}

.wrap{max-width:1440px;margin:0 auto;padding:var(--pad)}

/* header */
.site-header{height:var(--head-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.nav-cta{font-size:15px;line-height:20px;font-weight:500;color:var(--text2)}

/* hero */
.hero{display:grid;grid-template-columns:var(--hero-cols);gap:var(--hero-gap);align-items:center;padding:var(--hero-pad)}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.hero h1{font-size:var(--h1);line-height:1;font-weight:700;letter-spacing:-.035em;text-wrap:balance}
.hero .sub{margin-top:var(--sub-gap);max-width:460px;font-size:var(--sub);line-height:1.45;color:var(--text2);text-wrap:pretty}
.form-slot{margin-top:40px;width:100%;display:flex;flex-direction:column;align-items:flex-start}
.hero-phone{display:flex;justify-content:var(--ph-just);min-width:0}
.hero-phone .phone{position:relative;flex:none;width:var(--ph-w);height:var(--ph-h)}

/* phone screenshots: crops are 510x994 css px; the 390x844 screen sits 60px in from each top/left edge */
.phone img{position:absolute;display:block;max-width:none;height:auto;
  width:calc(510px * var(--s));left:calc(-60px * var(--s));top:calc(-60px * var(--s))}
.hero-phone .phone{--s:var(--ph-s)}
/* live status-bar clock, positioned in phone coordinates (34px in, 54px tall) and scaled with the phone */
.status-time{position:absolute;left:calc(34px * var(--s));top:0;height:calc(54px * var(--s));display:flex;align-items:center;z-index:2;
  font:600 calc(16px * var(--s)) -apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--text);pointer-events:none}
/* live short date in the idle Today screen's top-left (phone coords: 24px in, 64px down, 13/18 text2) */
.screen-date{position:absolute;left:calc(24px * var(--s));top:calc(67px * var(--s));height:calc(18px * var(--s));display:flex;align-items:center;z-index:2;
  font-size:calc(13px * var(--s));color:var(--text2);white-space:nowrap;pointer-events:none}
.panel .phone{--s:.72;position:relative;flex:none;width:281px;height:608px;margin-top:48px}

/* waitlist form */
.wl{width:100%;max-width:var(--form-max);display:flex;flex-direction:column;gap:10px}
.wl-row{display:flex;flex-direction:var(--form-dir);gap:8px}
.wl-field{flex:1 1 auto;min-width:0;height:56px;min-height:56px;border-radius:12px;background:var(--fill);display:flex;align-items:center;padding:0 16px;transition:box-shadow .15s ease}
.wl-field:focus-within{box-shadow:inset 0 0 0 1.5px var(--text)}
.wl-field.is-error,.wl-field.is-error:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent)}
.wl-field input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:inherit;font-size:17px;text-align:left;color:var(--text);-webkit-appearance:none;appearance:none}
.wl-field input::placeholder{color:var(--text2);opacity:1}
.wl-btn{flex:none;height:56px;padding:0 24px;border-radius:12px;background:var(--accent);color:#FFFFFF;font-size:17px;font-weight:600;cursor:pointer;user-select:none;-webkit-user-select:none;white-space:nowrap;transition:filter .15s ease,opacity .1s ease,transform .1s ease}
.wl-btn:hover:not(:disabled){filter:brightness(.92)}
.wl-btn:active:not(:disabled){opacity:.8;transform:scale(.98)}
.wl-btn:disabled{opacity:.4;cursor:not-allowed}
.wl-btn:focus-visible,.wl-reset:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.wl-note{font-size:13px;line-height:18px;color:var(--text2)}
.wl-err{font-size:13px;line-height:18px;color:var(--text)}

/* success */
.wl-done{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;animation:wl-fade .25s ease-out}
@keyframes wl-fade{from{opacity:0}to{opacity:1}}
.wl-done-row{min-height:56px;display:flex;align-items:center;gap:14px}
.wl-check{width:32px;height:32px;flex:none;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center}
.wl-check path{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wl-done-text{min-width:0;display:flex;flex-direction:column;gap:2px}
.wl-done-title{font-size:17px;line-height:22px;font-weight:600}
.wl-done-sub{font-size:15px;line-height:20px;color:var(--text2);overflow-wrap:anywhere}
.wl-reset{background:transparent;padding:0;font-size:13px;line-height:18px;color:var(--text2);cursor:pointer}
.wl-reset:active{opacity:.6}

/* sections */
.section{border-top:1px solid var(--hair);padding:var(--sec)}
.features{display:grid;grid-template-columns:var(--feat-cols);gap:var(--feat-gap)}
.feature{display:flex;flex-direction:column;gap:20px;min-width:0}
.panel{height:400px;border-radius:24px;background:var(--fill);overflow:hidden;display:flex;justify-content:center}
.feature-text{display:flex;flex-direction:column;gap:6px}
.feature-title{font-size:22px;line-height:28px;font-weight:700}
.feature-body{font-size:17px;line-height:24px;color:var(--text2);text-wrap:pretty}

.detail{display:grid;grid-template-columns:var(--detail-cols);gap:var(--detail-gap);align-items:center}
.detail-copy{display:flex;flex-direction:column;gap:16px;min-width:0}
.caps{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;color:var(--text2)}
.detail h2{font-size:var(--h2);line-height:1.08;font-weight:700;letter-spacing:-.025em;text-wrap:balance}
.detail p{max-width:420px;font-size:17px;line-height:26px;color:var(--text2);text-wrap:pretty}

/* live activity panel */
.la-wrap{display:flex;justify-content:center}
.la-stage{position:relative;flex:none;width:calc(390px * var(--la-s));height:calc(844px * var(--la-s))}
.la-phone{position:absolute;left:0;top:0;width:390px;height:844px;transform:scale(var(--la-s));transform-origin:0 0;border-radius:52px;overflow:hidden;background:var(--bg);color:var(--text);box-shadow:0 0 0 10px var(--frame),0 30px 60px rgba(0,0,0,.25)}
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);height:37px;min-width:232px;padding:0 14px;border-radius:19px;background:#000000;color:#F5F5F5;box-shadow:0 0 0 1px var(--island-edge);display:flex;align-items:center;justify-content:space-between;gap:24px}
.island-name{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.island-time{font-family:var(--num-text);font-variant-numeric:tabular-nums;font-size:15px;font-weight:500}
.lock-top{position:absolute;top:84px;left:0;right:0;display:flex;flex-direction:column;align-items:center}
.la-date{font-size:17px;line-height:22px;font-weight:600}
.la-clock{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:96px;line-height:1;font-weight:300;letter-spacing:-.03em}
.la-card{position:absolute;left:16px;right:16px;bottom:96px;border-radius:24px;background:var(--card);color:#F5F5F5;padding:16px 20px;display:flex;align-items:center;gap:16px}
.la-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.la-app{display:flex;align-items:center;gap:8px;font-size:13px;line-height:18px;font-weight:600}
.la-timer{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:44px;line-height:48px;font-weight:300;letter-spacing:-.02em}
.home-bar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:var(--text)}
.la-meta{font-size:13px;line-height:18px;color:#ABABAB}
.ring{position:relative;flex:none;width:56px;height:56px}
.ring svg{position:absolute;inset:0}
.ring circle{fill:none;stroke:#3A3A3C;stroke-width:3}
.ring-dot{position:absolute;inset:0;transition:transform 1s linear}
.ring-dot span{position:absolute;left:24px;top:-1px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
@media (prefers-reduced-motion:reduce){.ring-dot{transition:none}.wl-done{animation:none}}

/* closing CTA */
.cta{padding:var(--cta-pad);display:flex;flex-direction:column;align-items:center;text-align:center}
.cta h2{font-size:var(--h2-cta);line-height:1.05;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.cta .sub{margin-top:16px;max-width:420px;font-size:17px;line-height:26px;color:var(--text2);text-wrap:pretty}
.cta .form-slot{align-items:center}

/* footer */
.site-footer{border-top:1px solid var(--hair);padding:32px 0 40px;display:flex;flex-direction:var(--foot-dir);justify-content:space-between;align-items:var(--foot-align);gap:16px}
.foot-brand{display:flex;align-items:baseline;gap:12px}
.foot-logo{font-size:17px;line-height:22px;font-weight:700;letter-spacing:-.02em}
.foot-copy{font-size:13px;line-height:18px;color:var(--text2)}
.foot-links{display:flex;gap:24px;font-size:13px;line-height:18px;color:var(--text2)}

/* text pages (privacy, contact) */
.doc{padding:var(--doc-pad);max-width:640px}
.doc h1{font-size:var(--h2);line-height:1.08;font-weight:700;letter-spacing:-.025em;text-wrap:balance}
.doc .lede{margin-top:16px;font-size:17px;line-height:26px;color:var(--text2);text-wrap:pretty}
.doc .meta{margin-top:12px;font-size:13px;line-height:18px;color:var(--text2)}
.doc section{margin-top:48px}
.doc h2{font-size:22px;line-height:28px;font-weight:700}
.doc p{margin-top:12px;font-size:17px;line-height:26px;color:var(--text2);text-wrap:pretty}
.doc ul{margin:12px 0 0;padding-left:22px;font-size:17px;line-height:26px;color:var(--text2)}
.doc li+li{margin-top:6px}
.doc a.inline{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair)}
.doc .form-slot{margin-top:24px}
.wl.contact{max-width:480px}
.wl-area{height:auto;min-height:140px;align-items:flex-start;padding:14px 16px}
.wl-area textarea{flex:1;min-width:0;width:100%;min-height:112px;border:0;outline:0;background:transparent;font:inherit;font-size:17px;line-height:24px;color:var(--text);resize:vertical;-webkit-appearance:none;appearance:none}
.wl-area textarea::placeholder{color:var(--text2);opacity:1}
.wl.contact .wl-btn{align-self:flex-start}
:root{--doc-pad:56px 0 128px}
@media (max-width:767px){:root{--doc-pad:32px 0 88px}}

/* scroll focus: the section nearest the viewport centre sits at full size, neighbours shrink and fade */
.has-focus .section{will-change:transform,opacity;transform-origin:50% 50%}

/* header right side: theme toggle + join link */
.header-right{display:flex;align-items:center;gap:20px}
.theme-toggle{width:44px;height:44px;margin:0 -13px 0 0;padding:0;border-radius:50%;background:transparent;color:var(--text2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:color .15s ease,opacity .1s ease}
.theme-toggle:hover{color:var(--text)}
.theme-toggle:active{opacity:.6}
.theme-toggle:focus-visible{outline:1.5px solid var(--text);outline-offset:2px}
.theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none}
}