:root{
 --paper:#fff;--mist:#f3f3f5;--ink:#0b0b0c;--slate:#6e6e73;--petal:#ec7adb;--hair:#e6e6e9;
 --sans:"Geist",system-ui,-apple-system,sans-serif;--mono:"Geist Mono",ui-monospace,monospace;
 --t-display:clamp(2.75rem,1.7rem + 4.3vw,5.25rem);
 --t-h2:clamp(2.125rem,1.6rem + 2.2vw,3.5rem);
 --t-h3:clamp(1.3125rem,1.2rem + .48vw,1.625rem);
 --t-lead:clamp(1.125rem,1.05rem + .29vw,1.3125rem);
 --t-body:clamp(1rem,.977rem + .095vw,1.0625rem);
 --t-small:clamp(.8125rem,.79rem + .095vw,.875rem);
 --pad:clamp(4rem,2.5rem + 6.1vw,8rem);
 --ease-brand:cubic-bezier(.2,.7,.2,1);--ease-out:cubic-bezier(.23,1,.32,1);--ease-reveal:cubic-bezier(.22,1,.36,1);
 --spring:linear(0 0%,.037 3.125%,.118 6.25%,.223 9.375%,.339 12.5%,.453 15.625%,.566 18.75%,.662 21.875%,.744 25%,.814 28.125%,.87 31.25%,.914 34.375%,.949 37.5%,.974 40.625%,.992 43.75%,1.004 46.875%,1.013 50%,1.017 53.125%,1.019 56.25%,1.019 59.375%,1.018 62.5%,1.016 65.625%,1.014 68.75%,1.012 71.875%,1.009 75%,1.007 78.125%,1.006 81.25%,1.004 84.375%,1.003 87.5%,1.002 90.625%,1.001 93.75%,1.001 96.875%,1 100%);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-body)/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-weight:500;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;z-index:100}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px rgb(236 122 219/.35)}
.wrap{width:min(1200px,100% - 2*clamp(20px,4vw,48px));margin-inline:auto}
.narrow{max-width:720px}
.mono{font-family:var(--mono)}
.lead{font-size:var(--t-lead);line-height:1.45;letter-spacing:-.01em;color:var(--slate)}
h2{font-size:var(--t-h2);line-height:1.06;letter-spacing:-.035em}
h3{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.015em}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:500 1rem/1 var(--sans);letter-spacing:-.01em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform 140ms var(--ease-out),background-color 160ms ease}
.btn:active{transform:scale(.97)}
.btn--sm{min-height:40px;padding:0 18px;font-size:.9375rem}
@media (hover:hover) and (pointer:fine){.btn:hover{background:#2a2a2e}}
.link{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size 200ms var(--ease-out),color 160ms ease}
@media (hover:hover){.link:hover{background-size:100% 1px}}

/* nav */
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:background-color 200ms var(--ease-out),border-color 200ms var(--ease-out)}
.scrolled .nav{background:rgb(255 255 255/.8);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-color:rgb(0 0 0/.08)}
@media (prefers-reduced-transparency:reduce){.scrolled .nav{background:#fff;backdrop-filter:none}}
.nav-in{height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(1200px,100% - 2*clamp(20px,4vw,48px));margin-inline:auto}
.brand{display:flex;padding:8px 0}
.brand img{height:26px;width:auto}
.nav nav{display:flex;gap:32px;font-size:.9375rem;color:#3a3a3e}
.nav nav a{padding:6px 0}

/* hero */
.hero{padding-top:clamp(40px,6vw,88px);text-align:center;position:relative;overflow:hidden}
.hero-text{display:flex;flex-direction:column;align-items:center}
.pill{display:inline-block;background:var(--mist);border-radius:999px;padding:8px 16px;font-size:var(--t-small);color:#3a3a3e;letter-spacing:-.005em}
.display{font-size:var(--t-display);line-height:1.02;letter-spacing:-.045em;max-width:13ch;margin-top:24px}
.hero .lead{max-width:44ch;margin-top:20px}
.hero .e4{margin-top:32px;width:100%;display:flex;justify-content:center}
.capsule{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:var(--mist);border-radius:999px;padding:6px;width:min(460px,100%);border:1px solid transparent;transition:border-color 160ms ease}
.capsule:focus-within{border-color:#c9c9ce}
.capsule input{flex:1;min-width:0;height:48px;border:0;background:transparent;padding:0 8px 0 18px;font:400 1rem var(--sans);color:var(--ink);border-radius:999px}
.capsule input::placeholder{color:#8a8a8f}
.capsule input:focus-visible{outline:none;box-shadow:none}
.capsule .form-done,.capsule .form-error{flex-basis:100%;padding:10px 18px;font-size:.9375rem;text-align:left}
.capsule .form-error{color:#b42318}
.capsule.done{border-radius:24px}
.capsule.done input,.capsule.done .btn{display:none}

/* mac screen */
.mac{margin-top:clamp(48px,6vw,80px);background:#0b0b0c;border-radius:28px;padding:10px;position:relative;box-shadow:0 1px 2px rgb(0 0 0/.06),0 24px 48px rgb(0 0 0/.08)}
.screen{position:relative;border-radius:20px;overflow:hidden;background:#2a0f2e}
.mac--hero .screen{aspect-ratio:16/5.4}
.mac--hero .wall{object-position:50% 70%}
.screen::after{content:"";position:absolute;inset:0;background:rgb(20 6 22/.28);z-index:1;pointer-events:none}
.hero{padding-bottom:clamp(24px,4vw,48px)}
.show-s{display:none}
.wall{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.menubar{position:relative;z-index:2;height:30px;display:flex;justify-content:space-between;align-items:center;padding:0 14px;background:rgb(255 255 255/.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;font-size:13px;letter-spacing:.01em}
.mb-left,.mb-right{display:flex;gap:16px;align-items:center}
.mb-apple{width:11px;height:13px;background:#fff;border-radius:50% 50% 45% 45%}
.hero-notch,.stage-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:3;display:flex;justify-content:center}
.hn-pill,.sn-pill{width:180px;height:30px;background:#000;border-radius:0 0 14px 14px}
.hn-open{position:absolute;z-index:3;top:0;left:50%;translate:-50% 0;display:flex;flex-direction:column;gap:14px;width:max-content;max-width:min(540px,80vw);background:#000;color:#fff;border-radius:0 0 26px 26px;padding:40px 24px 18px 18px;text-align:left;font-size:clamp(.875rem,.8rem + .3vw,1.0625rem);line-height:1.4;transform-origin:50% 0}
.hn-flower{flex:none}
.hide-s{}

/* entrance */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes notchOpen{from{opacity:0;transform:scale(.36,.2)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.6) rotate(-30deg)}to{opacity:1;transform:none}}
.js .e1,.js .e2,.js .e3,.js .e4,.js .e5{animation:rise 700ms var(--ease-brand) both}
.js .e2{animation-delay:70ms}.js .e3{animation-delay:140ms}.js .e4{animation-delay:210ms}.js .e5{animation-delay:280ms}
.js .hn-open{animation:notchOpen 520ms var(--ease-out) 320ms both}
.js .hn-flower{animation:pop 700ms var(--spring) 700ms both}

/* reveals */
[data-reveal]{will-change:auto}

/* the workday */
.day{padding-block:var(--pad)}
.day-head{max-width:640px}
.day-head .lead{margin-top:16px}
.day-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);margin-top:clamp(48px,5vw,72px)}
.steps-wrap{position:relative;padding-left:28px}.steps{list-style:none;margin:0;padding:0}
.progress{position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--hair);border-radius:2px;overflow:hidden}
.progress span{position:absolute;inset:0;background:var(--petal);transform-origin:top;transform:scaleY(var(--p,0));transition:transform 500ms var(--ease-out)}
.step{min-height:46vh;display:flex;flex-direction:column;justify-content:center;gap:12px;position:relative;transition:opacity 300ms ease}
.step::before{content:"";position:absolute;left:-33px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#fff;border:2px solid var(--hair);transition:border-color 300ms ease,background-color 300ms ease}
.step.is-active::before,.step.is-past::before{border-color:var(--petal);background:var(--petal)}
.js .step h3{color:var(--slate);transition:color 300ms ease}
.js .step.is-active h3{color:var(--ink)}
.step-time{font-family:var(--mono);font-size:13px;letter-spacing:.01em;color:var(--slate)}
.step>p:not(.step-time){color:var(--slate);max-width:42ch}
.step-card{display:none}
.day-stage{position:relative}
.mac--stage{position:sticky;top:calc(50vh - 240px);margin-top:0;border-radius:28px;padding:10px}
.mac--stage .mb-left span:not(.mb-apple){display:none}
.mac--stage .screen{border-radius:20px;aspect-ratio:4/3;max-height:480px;width:100%}
.stage-notch{width:100%;height:100%;pointer-events:none}
.stage-notch .ncard{position:absolute;top:0;left:50%;width:min(380px,72%);margin-left:max(-190px,-36%);border-radius:0 0 28px 28px;padding-top:40px;opacity:0;transform:scale(.4,.15);transform-origin:50% 0;transition:opacity 260ms var(--ease-out),transform 420ms var(--ease-out)}
.stage-notch .ncard.is-active{opacity:1;transform:none}
.promise-chip{position:absolute;left:16px;bottom:16px;z-index:2;color:#fff;font-family:var(--mono);font-size:12px;padding:6px 12px;border-radius:999px;background:rgb(0 0 0/.55);transition:background-color 300ms ease}
.promise-chip.kept{background:var(--petal);color:var(--ink)}

/* notch cards */
.ncard{background:#000;color:#fff;border-radius:28px;padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px;text-align:left;font-size:15px;line-height:1.45}
.nc-head{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;color:#a1a1a6;letter-spacing:.01em}
.nc-say,.nc-draft{font-size:16px;color:#fff}
.nc-say u{text-decoration:none;border-bottom:1.5px solid var(--petal)}
.nc-meta{font-size:13px;color:#a1a1a6}
.nc-promise{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#fff;background:#1c1c1f;border-radius:12px;padding:10px 12px}
.nc-promise .dot{width:8px;height:8px;border-radius:50%;background:var(--petal);flex:none}
.nc-promise.kept{background:#2a1528}
.nc-actions{display:flex;gap:8px}
.nc-btn{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;background:#1c1c1f;font-size:13.5px}
.nc-btn--light{background:#fff;color:#000}
.nc-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.nc-list li{padding-left:16px;position:relative}
.nc-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:#55555a}
.nc-list li.mine::before{background:var(--petal)}
.nc-q{font-size:14px;color:#a1a1a6;align-self:flex-end;background:#1c1c1f;border-radius:14px 14px 4px 14px;padding:8px 12px;max-width:85%}
.nc-a{font-size:16px}

/* privacy */
.privacy{background:var(--ink);color:#fff;padding-block:var(--pad)}
.privacy-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.privacy .lead{color:#a1a1a6;margin-top:20px;max-width:46ch}
.kept-list{margin:40px 0 0;border-top:1px solid #2a2a2e}
.kept-list div{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid #2a2a2e}
.kept-list dt{font-weight:500}
.kept-list dd{margin:0;font-family:var(--mono);font-size:13.5px;color:#c7c7cc;display:flex;align-items:center;gap:8px}
.kept-list dd::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--petal)}
.privacy-photo{margin:0;order:-1}
.privacy-photo img{border-radius:24px;width:100%;aspect-ratio:4/5;object-fit:cover}

/* needs */
.needs{background:var(--mist);padding-block:var(--pad)}
.needs{text-align:center}
.needs-title{font-size:var(--t-h3);letter-spacing:-.015em;color:var(--slate)}
.needs-row{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(32px,6vw,96px);margin-top:32px}
.needs .big{font-size:clamp(2.25rem,1.6rem + 2.6vw,4rem);font-weight:500;letter-spacing:-.045em;line-height:1}
.needs .cap{font-family:var(--mono);font-size:14px;color:var(--slate);margin-top:12px}

/* faq */
.questions{padding-block:var(--pad)}
.faq{margin-top:40px;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font-size:var(--t-h3);font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);font-weight:500;letter-spacing:-.01em;transition:color 160ms ease}
.faq summary::-webkit-details-marker{display:none}
@media (hover:hover){.faq summary:hover{color:#3a3a3e}}
.plus{width:14px;height:14px;position:relative;flex:none}
.plus::before,.plus::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:currentColor;border-radius:2px;transition:transform 250ms var(--ease-out)}
.plus::after{transform:rotate(90deg)}
details[open] .plus::after{transform:rotate(0)}
.answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows 250ms var(--ease-out)}
details[open] .answer{grid-template-rows:1fr}
.answer>div{overflow:hidden}
.answer p{color:var(--slate);padding-bottom:22px;max-width:60ch}

/* join */
.join{padding-block:var(--pad);text-align:center;border-top:1px solid var(--hair)}
.join-in{display:flex;flex-direction:column;align-items:center}
.join h2{margin-top:24px;max-width:16ch}
.join .lead{margin-top:16px;max-width:42ch}
.join .capsule{margin-top:32px}
.maker{margin-top:40px;font-size:var(--t-small);color:var(--slate)}

/* footer */
.foot{border-top:1px solid var(--hair);padding:32px 0;font-size:var(--t-small);color:var(--slate)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.foot img{height:22px;width:auto}

/* phone */
@media (max-width:900px){
  .day-grid{grid-template-columns:1fr}
  .day-stage{display:none}
  .step{min-height:0;padding:28px 0}
  .js .step h3{color:var(--ink)}
  .step-card{display:block;margin-top:12px}
  .step::before{top:38px;margin-top:0}
  .privacy-grid{grid-template-columns:1fr}
  .privacy-photo{order:0}
  .privacy-photo img{aspect-ratio:3/2}
}
@media (max-width:720px){
  .nav nav{display:none}
  .hide-s{display:none}
  .mac--hero .screen{aspect-ratio:auto}
  .mac{border-radius:22px;padding:8px}.screen{border-radius:16px}
  .hn-pill{width:120px}
  .hn-open{padding:38px 18px 16px 14px;max-width:calc(100vw - 72px)}
  .mb-right .mono{font-size:11px}
  .show-s{display:inline}
  .mac--hero .screen{height:300px}
  .mb-left{gap:12px}
}
@media (max-width:420px){
  .capsule{flex-direction:column;border-radius:28px;padding:8px}
  .capsule input{width:100%;padding:0 14px;text-align:center}
  .capsule .btn{width:100%}
  .nav .btn--sm{padding:0 14px;font-size:.875rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important;transition-delay:0ms!important}
  
  html{scroll-behavior:auto}
}

.hn-row{display:flex;gap:14px;align-items:center}
.hn-actions{display:flex;gap:8px;padding-left:48px}
.nc-btn{height:36px!important}
.nc-meta,.nc-head{font-size:13px!important}
.step-time{font-size:13px}
@media (max-width:720px){.hn-actions{padding-left:0}.hn-open{font-size:14px}}

/* phone tap targets and readable sizes */
.btn--sm{min-height:44px}
.brand{min-height:44px;align-items:center;padding-block:9px}
#email-hero,#email-join{min-height:48px;height:48px}
@media (max-width:420px){
  .capsule input,#email-hero,#email-join{flex:0 0 auto;min-height:48px;height:48px}
  .nav .btn--sm{min-height:44px}
}
@media (max-width:720px){
  .show-s{font-size:12px}
  .mb-right .mono{font-size:12px}
  p.pill.e1,.pill{font-size:15px}
  .nc-meta,p.nc-meta{font-size:15px!important}
  .maker,p.maker{font-size:15px}
}