/* Page under the inlined hero. Spacing uses the 4px token set. */
@font-face{font-family:"Martian Grotesk";src:url("../fonts/MartianGrotesk-VF.woff2") format("woff2");font-weight:100 1000;font-stretch:75% 200%;font-display:swap}
@font-face{font-family:"Onest";src:url("../fonts/Onest-VF.woff2") format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Onest Fallback";src:local("Arial");size-adjust:104%;ascent-override:92%;descent-override:22%;line-gap-override:0%}

:root{
 --c-abyss:#060F1C;
 --c-ground:#0A1626;
 --c-mass:#0E1D31;
 --c-mask:#0C1A2C;
 --c-line:#22344B;
 --c-line-ui:#6F86A0;
 --c-text:#E6EDF5;
 --c-text-2:#A9B8C9;
 --c-mint:#A8E6C4;
 --c-mint-ink:#06231A;
 --f-display:"Martian Grotesk",ui-sans-serif,system-ui,sans-serif;
 --f-text:"Onest","Onest Fallback",ui-sans-serif,system-ui,sans-serif;
 --ease-out:cubic-bezier(.16,1,.3,1);
}

html,body{margin:0;height:auto;overflow-x:hidden;overflow-y:auto;background:var(--c-ground);color:var(--c-text)}
body{font:400 16px/1.6 var(--f-text);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;letter-spacing:-.003em}
a{color:inherit}
.hero{position:relative;height:100svh;overflow:visible;background:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--c-ground),0 0 0 4px var(--c-mint)}

/* The fold keeps one filled Sign in. The nav Sign in and the hero mic are quiet. */
.nav-links .btn-ghost{
 display:inline-flex;align-items:center;justify-content:center;
 background:transparent;border-color:transparent;color:var(--c-text);
 min-height:48px;padding:0 8px;
 font-weight:500;font-size:15px;
 text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px;
 text-decoration-color:var(--c-line-ui);
 box-shadow:none;
}
.nav-links .btn-ghost::after{display:none}
.nav-links .btn-ghost:hover{box-shadow:none;text-decoration-color:var(--c-mint)}
.room .mic{background:var(--c-ground);color:var(--c-text);box-shadow:inset 0 0 0 1px var(--c-line-ui)}

/* First screen. Mint is the Sign in fill, the live dot, and the ridge crest. */
.hero .brand path{stroke:var(--c-text)}
.hero .room.on .live{border-color:var(--c-line-ui);color:var(--c-text)}
.hero .room.on .live i{background:var(--c-mint)}
.hero .room.on .host{border-color:var(--c-line-ui)}
.hero .room:hover{box-shadow:inset 0 0 0 1px var(--c-line-ui)}
.hero .voice span{background:var(--c-text)}
.hero #seat{background:var(--c-line-ui)}
.crest-pass{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;pointer-events:none}
@media (max-width:699px){
 .hero #seat{display:none}
}

.tlink{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;font-weight:500;font-size:15px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px;text-decoration-color:var(--c-line-ui)}
.tlink:hover{text-decoration-color:var(--c-mint)}
.brand{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font:500 15px/1 var(--f-display);font-stretch:106%;letter-spacing:-.01em;min-width:48px;min-height:48px;color:var(--c-text)}
.brand svg{width:22px;height:22px}
nav.top{display:flex;align-items:center;justify-content:space-between;padding:16px 48px}
.nav-links{display:flex;align-items:center;gap:8px}

.descent{position:relative;background:var(--c-mass)}
.interior{position:absolute;z-index:1;left:0;top:0;width:100%;height:calc(100% + 128px);transform:translateY(-128px);display:block;pointer-events:none}
.spine{position:absolute;z-index:2;width:1px;background:rgba(168,230,196,.4);pointer-events:none}
.spur{position:absolute;z-index:2;height:1px;background:rgba(168,230,196,.4);pointer-events:none}

.prose h2{
 margin:0 0 8px;
 font-family:var(--f-display);font-weight:500;font-stretch:106%;
 font-variation-settings:"wdth" 106,"wght" 500;
 font-size:28px;line-height:1.15;letter-spacing:-.02em;
}
.prose p{margin:0;max-width:36ch;color:var(--c-text);font-size:16px;line-height:1.45}

.beat{position:relative;z-index:3}

/* 96px between sections below 1200 (64+32). 160px from 1200 (128+32 or 96+64). */
.beat-meet{padding:64px 0 32px}
.meet-col{width:min(840px,calc(100% - 32px));margin-top:32px}
.meet-col .prose{margin:0 0 24px}
.meet{
 margin:0;
 background:var(--c-abyss);
 border:1px solid var(--c-line);
 border-radius:12px;
 opacity:1;
 transform:none;
}
.js .meet.risen{animation:rise 600ms var(--ease-out)}
@keyframes rise{from{transform:translateY(16px)}to{transform:none}}
.meet-bar{position:relative;height:64px}
.meet-meta{position:absolute;top:0;left:0;height:64px;display:flex;align-items:center;gap:16px}
.meet-live{display:inline-flex;align-items:center;gap:24px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--c-mint);font:500 13px/1 var(--f-text);letter-spacing:.04em;color:var(--c-mint)}
.meet-live i{width:8px;height:8px;border-radius:999px;background:var(--c-mint)}
.meet-when{font:400 13px/1 var(--f-text);color:var(--c-text-2)}
.meet-stage{
 height:320px;margin:0 16px;
 display:grid;grid-template-columns:160px 1fr 240px;column-gap:24px;align-items:end;
 padding:24px;border-radius:8px;background:#04101D;border:1px solid var(--c-line);
}
.meet-host,.meet-you{
 display:flex;align-items:flex-end;padding:16px;border-radius:8px;
 font:500 16px/1 var(--f-text);color:var(--c-text);
}
.meet-host{height:240px;background:#2A4A68;border:1px solid var(--c-mint)}
.meet-you{height:96px;background:var(--c-ground);border:1px solid var(--c-line)}
.wave{display:flex;align-items:center;justify-content:center;gap:8px;height:128px}
.wave i{display:block;width:4px;border-radius:999px;background:var(--c-mint);transform-origin:center;animation:voice 1100ms var(--ease-out) infinite}
.wave i:nth-child(1){height:24px}
.wave i:nth-child(2){height:64px;animation-delay:120ms}
.wave i:nth-child(3){height:32px;animation-delay:240ms}
.wave i:nth-child(4){height:96px;animation-delay:80ms}
.wave i:nth-child(5){height:48px;animation-delay:200ms}
.wave i:nth-child(6){height:24px;animation-delay:160ms}
@keyframes voice{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.meet-dock{display:flex;gap:16px;padding:16px}
.meet-mic,.meet-cam{width:48px;height:48px;border-radius:8px;display:grid;place-items:center;background:var(--c-ground);color:var(--c-text);border:1px solid var(--c-line-ui)}
.meet-mic svg,.meet-cam svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Between meetings: card on one side of the line, words on the other. */
.beat-day{padding:64px 16px 32px;min-height:0}
.habit-card{
 width:min(480px,100%);
 background:var(--c-abyss);
 border:1px solid var(--c-line);
 border-radius:12px;
 position:relative;
 overflow:hidden;
}
.ticks{margin:0;padding:0 8px;display:flex;flex-direction:column}
.tick{
 display:flex;align-items:center;gap:16px;
 min-height:64px;width:100%;padding:0 8px;
 color:var(--c-text);text-align:left;
 font-size:16px;line-height:1.3;
}
.tick svg{width:32px;height:32px;flex:none}
.tick .ring{fill:none;stroke:var(--c-line-ui);stroke-width:1.5}
.tick .chk{fill:none;stroke:var(--c-mint);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.tick[aria-pressed="true"] .ring{stroke:var(--c-mint)}
.tick[aria-pressed="true"] .chk{opacity:1}
.day-ridge{display:block;width:100%;height:128px}

/* The line lands on a low horizon. One filled Sign in. */
.beat-end{padding:64px 0 32px;min-height:0}
.horizon{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none}
.end-copy{position:relative;z-index:2;width:max-content;max-width:calc(100% - 32px);padding:0 0 96px;text-align:center}
.keep{
 margin:0 0 24px;
 font-family:var(--f-display);font-weight:500;font-stretch:106%;
 font-variation-settings:"wdth" 106,"wght" 500;
 font-size:40px;line-height:1.12;letter-spacing:-.022em;
}
.fill{
 display:inline-flex;align-items:center;justify-content:center;
 min-height:48px;padding:0 24px;border-radius:8px;
 background:var(--c-mint);color:var(--c-mint-ink);
 text-decoration:none;font:500 15px/1 var(--f-text);
}
.textlink{
 display:inline-flex;align-items:center;min-height:48px;min-width:48px;padding:0 8px;
 color:var(--c-text);text-decoration:underline;text-decoration-thickness:1px;
 text-underline-offset:8px;text-decoration-color:var(--c-line-ui);
 font:500 15px/1 var(--f-text);
}
.textlink:hover{text-decoration-color:var(--c-mint)}
.site-foot{
 position:relative;z-index:3;
 display:flex;align-items:center;gap:16px;
 min-height:96px;padding:32px 48px;
 background:var(--c-mass);
}
.mark{
 display:inline-flex;align-items:center;gap:8px;min-height:48px;
 text-decoration:none;font:500 15px/1 var(--f-display);font-stretch:106%;
 font-variation-settings:"wdth" 106,"wght" 500;letter-spacing:-.01em;color:var(--c-text);
}
.mark svg{width:24px;height:24px}
.foot-links{margin-left:auto;display:flex;align-items:center;gap:8px}

/* About. The ridge bleeds off the right edge. The footer matches the ground. */
.about-page{background:var(--c-ground);min-height:100vh;display:flex;flex-direction:column}
.about-page .site-foot{background:var(--c-ground);border-top:1px solid var(--c-line)}
.about-main{
 flex:1;
 display:grid;
 grid-template-columns:minmax(0,36rem) 1fr;
 column-gap:48px;
 padding:64px 0 96px 48px;
 align-items:center;
}
.about-main h1{
 margin:0;
 max-width:16em;
 font-family:var(--f-display);font-weight:500;font-stretch:106%;
 font-variation-settings:"wdth" 106,"wght" 500;
 font-size:40px;line-height:1.15;letter-spacing:-.02em;
}
.about-copy{display:flex;flex-direction:column;gap:24px;margin-top:48px;max-width:42ch}
.about-bit{display:flex;flex-direction:column;gap:8px}
.about-kicker{margin:0;font:500 13px/1.3 var(--f-text);color:var(--c-text-2);letter-spacing:.04em}
.about-copy p{margin:0;font-size:16px;line-height:1.5}
.about-copy p.about-kicker{font-size:13px;line-height:1.3}
.about-ridge{position:relative;height:440px;margin:0;pointer-events:none;overflow:visible}
.about-ridge canvas{position:absolute;left:0;top:0;width:100%;height:440px;display:block}
.about-page .site-foot{border-top:0}
.about-page .site-foot::before{
 content:"";position:absolute;top:0;left:0;width:100vw;height:1px;background:var(--c-line);
}

@media (min-width:1200px){
 .beat-meet{padding:128px 0 64px}
 .beat-day{padding:96px 48px 64px}
 .beat-end{padding:96px 0 48px}
}
@media (max-width:1199px){
 nav.top{padding:8px 16px}
 .keep{font-size:28px}
 .site-foot{padding:24px 16px}
 .about-main{grid-template-columns:1fr;padding:48px 0 64px 16px;align-items:start}
 .about-main h1{font-size:28px}
 .about-ridge{height:240px;margin-top:32px}
 .about-ridge canvas{left:0;width:calc(100% + 64px);height:240px}
}
@media (max-width:699px){
 .beat-day{display:flex;flex-direction:column;padding-left:64px}
 .beat-day .prose{order:1}
 .habit-card{order:2}
 .beat-end{padding-left:64px}
 .site-foot{padding-left:64px}
}
@media (max-width:599px){
 .meet-bar{height:96px}
 .meet-meta{height:auto;flex-direction:column;align-items:flex-start;gap:4px;padding-top:12px}
 .meet-stage{height:auto;grid-template-columns:1fr;row-gap:16px;align-items:stretch}
 .meet-host{height:128px;order:1}
 .wave{height:64px;order:2}
 .meet-you{height:64px;order:3}
}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .meet,.js .meet.risen{opacity:1;transform:none;animation:none}
}
html.reduced .meet,html.reduced.js .meet.risen{opacity:1;transform:none;animation:none}
html.reduced .wave i{animation:none}
html.reduced .day-ridge .bed{transition:none}