@font-face{font-family:Mir;src:url(fonts/miriam.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:PlexHe;src:url(fonts/plex-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:PlexHe;src:url(fonts/plex-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:PlexHe;src:url(fonts/plex-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Arch;src:url(fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  --o:#F25C1B; --k:#0E0E0D; --w:#F5F4F0; --g:#77746E; --k2:#1A1A18; --k3:#2A2926;
  --pad:clamp(20px,5vw,84px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--k);color:var(--w);font:400 18px/1.55 PlexHe,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button,input{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:30;background:var(--w);color:var(--k);padding:10px 14px;font-weight:600}
.skip:focus{top:12px}
.num{font-family:Arch,PlexHe,sans-serif;font-variant-numeric:tabular-nums;font-stretch:88%}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* the caret: the only mark */
.caret{display:inline-block;width:.075em;height:.92em;background:var(--o);margin-inline-start:.06em;vertical-align:-.1em;font-style:normal}
.blink .caret,.caret.blink{animation:blink 1.06s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:20;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);background:var(--o);color:var(--k);transition:color .35s var(--ease),background-color .35s var(--ease)}
.nav[data-t=k]{background:var(--k);color:var(--w)}
.nav[data-t=w]{background:var(--w);color:var(--k)}
.wm{display:inline-flex;align-items:flex-end;text-decoration:none;font:700 26px/1 Mir;letter-spacing:-.035em}
.wm .caret{height:.95em;background:var(--k)}
.nav[data-t=k] .wm .caret,.nav[data-t=w] .wm .caret{background:var(--o)}
.nav-cta{font:600 15px/1 PlexHe;text-decoration:none;padding:11px 0;border-bottom:1.5px solid currentColor}

/* buttons: all sharp */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px;font:600 18px/1 PlexHe;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-dark{background:var(--k);color:var(--w)}
.btn-dark:hover{background:var(--k3)}
.btn-orange{background:var(--o);color:var(--k)}
.btn-orange:hover{background:var(--w)}

/* HERO */
.hero{min-height:100dvh;background:var(--o);color:var(--k);display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:clamp(24px,5vw,80px);padding:96px var(--pad) 56px;position:relative;overflow:hidden}
.hero h1{font:700 clamp(44px,6.6vw,104px)/1.0 Mir;letter-spacing:-.03em;max-width:12ch}
.hero h1 .h1-b{display:block;font-weight:400;font-size:.5em;line-height:1.15;letter-spacing:-.015em;margin-top:.55em}
.lede{font:400 clamp(18px,1.5vw,22px)/1.5 PlexHe;max-width:34ch;margin:clamp(24px,3vw,40px) 0 32px}
.inbox{align-self:center;justify-self:stretch;max-width:440px;width:100%;background:var(--k);color:var(--w);font-family:PlexHe;box-shadow:0 30px 80px -30px #5a1f05}
.inbox-head{display:flex;justify-content:space-between;align-items:baseline;padding:18px 20px 14px;font:600 15px/1 PlexHe;border-bottom:1px solid #ffffff1a}
.inbox-count{font-size:15px;color:var(--o);font-weight:600}
.inbox-list{list-style:none;height:420px;overflow:hidden;position:relative}
.inbox-list li .ch{font:500 11px/1 PlexHe;font-style:normal;color:var(--o);margin-inline-start:8px;letter-spacing:.02em}
.inbox-list li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:14px 20px;border-bottom:1px solid #ffffff10;animation:slidein .5s var(--ease) both}
.inbox-list b{font:600 16px/1.2 PlexHe}
.inbox-list .t{font-size:13px;color:var(--g);text-align:left}
.inbox-list .p{font-size:14px;color:#b9b6ae;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox-list .u{justify-self:end;min-width:22px;height:22px;padding:0 6px;background:var(--o);color:var(--k);font:600 12px/22px Arch;text-align:center}
@keyframes slidein{from{transform:translateY(-100%);opacity:0}}

/* HOW */
.how{background:var(--k);color:var(--w);padding:clamp(80px,12vw,160px) var(--pad) 0}
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,110px);max-width:1360px;margin:0 auto}
.stage{position:sticky;top:0;height:100dvh;display:flex;align-items:center;order:2}
.beats{order:1;padding-bottom:6dvh}
.beat{min-height:90dvh;display:flex;flex-direction:column;justify-content:center;opacity:.22;transition:opacity .6s var(--ease)}
.beat.on{opacity:1}
.beat h3{font:700 clamp(40px,5.4vw,84px)/1.02 Mir;letter-spacing:-.03em}
.beat p{font-size:clamp(17px,1.4vw,20px);color:#c9c6be;max-width:36ch;margin-top:22px}
.beat.on h3::after{content:"";display:inline-block;width:.075em;height:.85em;background:var(--o);margin-inline-start:.08em;vertical-align:-.06em;animation:blink 1.06s steps(1) infinite}

.chat{width:100%;max-width:480px;margin-inline:auto;background:var(--k2);border:1px solid #ffffff14;display:flex;flex-direction:column;height:min(540px,72dvh)}
.chat-head{display:flex;gap:12px;align-items:baseline;padding:18px 22px;border-bottom:1px solid #ffffff12}
.chat-name{font:600 17px/1 PlexHe}
.chat-sub{font-size:13px;color:var(--g)}
.chat-body{flex:1;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:18px 22px}
.msg{max-width:80%;padding:10px 14px;font:400 16px/1.4 PlexHe;animation:pop .45s var(--ease) both;position:relative}
.msg.her{align-self:flex-start;background:var(--k3);color:var(--w)}
.msg.me{align-self:flex-end;background:var(--w);color:var(--k)}
.msg.draft{align-self:flex-end;background:transparent;color:var(--w);outline:1.5px dashed var(--o);outline-offset:-1.5px}
.msg .k{display:block;font:600 11px/1 PlexHe;color:var(--o);margin-bottom:6px;letter-spacing:.02em}
.msg mark{background:none;color:inherit;box-shadow:inset 0 -.42em 0 #F25C1B66}
.msg .meta{display:block;font:500 11px/1 PlexHe;color:var(--g);margin-top:6px;text-align:left}
.msg.me .meta{color:#6d6a63}
.learn-n{align-self:center;font:500 13px/1 PlexHe;color:var(--g);margin:6px 0 2px}
.learn-n .num{color:var(--o);font-size:14px}
.typing{align-self:flex-end;display:flex;gap:5px;padding:14px 16px;background:var(--w);animation:pop .3s var(--ease) both}
.typing i{width:7px;height:7px;background:var(--k);opacity:.3;animation:dot 1.1s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes dot{30%{opacity:1;transform:translateY(-3px)}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}}
.chat-actions{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #ffffff12;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.chat:not(.ask) .chat-actions{opacity:0;transform:translateY(8px)}
.act{background:none;border:0;padding:18px 0;font:600 16px/1 PlexHe;cursor:default}
.act-send{background:var(--o);color:var(--k);transition:transform .15s var(--ease),background-color .2s}
.act-send.press{transform:scale(.96);background:var(--w)}
.act-edit{color:var(--w)}

/* FILE */
.file-sec{background:var(--w);color:var(--k);padding:clamp(96px,13vw,180px) var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px);align-items:center;margin-top:clamp(80px,10vw,140px)}
.file-sec h2{font:700 clamp(52px,8vw,128px)/.98 Mir;letter-spacing:-.035em}
.file-copy p{font-size:clamp(18px,1.5vw,21px);max-width:34ch;margin-top:28px;color:#3c3a36}
.file{background:#fff;border:1.5px solid var(--k);max-width:520px;width:100%;justify-self:center;box-shadow:14px 14px 0 var(--o)}
.file-head{display:flex;justify-content:space-between;align-items:baseline;padding:20px 24px;border-bottom:1.5px solid var(--k)}
.file-name{font:700 30px/1 Mir;letter-spacing:-.02em}
.file-no{font-size:15px;color:var(--g)}
.file-notes{list-style:none;padding:10px 24px}
.file-notes li{padding:13px 0;font:500 17px/1.4 PlexHe;border-bottom:1px dashed #0e0e0d33;min-height:1.4em}
.file-notes li:last-child{border-bottom:0}
.file-draft{background:var(--k);color:var(--w);padding:18px 24px;font:400 18px/1.4 PlexHe;display:flex;flex-direction:column;gap:6px;min-height:92px}
.file-draft-k{font:600 12px/1 PlexHe;color:var(--o)}

/* RULES */
.rules{background:var(--o);color:var(--k);padding:clamp(80px,12vw,170px) var(--pad)}
.rule-list{list-style:none;max-width:1360px;margin:0 auto}
.rule-list li{font:700 clamp(36px,6.4vw,104px)/1.02 Mir;letter-spacing:-.035em;padding:clamp(18px,2.6vw,36px) 0;border-top:2px solid var(--k)}
.rule-list li:last-child{border-bottom:2px solid var(--k)}
.rule-list li span:last-child{font-weight:400}
.rule-list li span{display:inline-block}

/* JOIN */
.join{background:var(--k);color:var(--w);padding:clamp(96px,13vw,180px) var(--pad) clamp(80px,10vw,140px);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,110px);align-items:start;scroll-margin-top:0}
.join h2{font:700 clamp(48px,7.4vw,120px)/1 Mir;letter-spacing:-.035em}
.join h2 .join-b{display:block;color:var(--o);margin-top:.12em}
.join-copy p{font-size:clamp(18px,1.5vw,21px);color:#c9c6be;max-width:34ch;margin-top:30px}
.form{display:flex;flex-direction:column;gap:22px;max-width:480px;width:100%;padding-top:10px}
[hidden]{display:none!important}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font:600 15px/1 PlexHe;color:var(--w)}
.field small{font-weight:400;color:#a9a69e}
.field input{height:56px;padding:0 16px;background:var(--k2);border:1.5px solid #ffffff3d;border-radius:0;color:var(--w);font-size:17px;transition:border-color .2s}
.field input:hover{border-color:#ffffff70}
.field input:focus{outline:none;border-color:var(--o);box-shadow:0 0 0 3px #F25C1B40}
.field input[aria-invalid=true]{border-color:#ff8a5c}
.err,.form-err{font-size:14px;color:#ff9b73;min-height:0}
.form-err:empty{display:none}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn{width:100%;margin-top:6px}
.form .btn[disabled]{opacity:.7;cursor:progress}
.privacy{font-size:14px;line-height:1.55;color:#a9a69e}
.privacy a{color:var(--w)}
.done{max-width:480px;padding-top:10px;outline:none}
.done-t{font:700 clamp(36px,4.4vw,64px)/1.05 Mir;letter-spacing:-.03em}
.done-s{color:#c9c6be;margin-top:18px}

/* FOOT */
.foot{background:var(--k);color:var(--w);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding:48px var(--pad) calc(40px + env(safe-area-inset-bottom));border-top:1px solid #ffffff1a}
.wm-lg{font-size:clamp(56px,9vw,140px)}
.wm-lg .caret{background:var(--o)}
.foot-r{display:flex;flex-direction:column;align-items:flex-end;gap:10px;font-size:15px}
.foot-mail{font:500 18px/1 PlexHe;text-decoration:none;border-bottom:1.5px solid var(--o);padding-bottom:4px}
.foot-c{color:var(--g)}

/* reveal on enter */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rule-list .rv{transform:translateY(.4em)}

/* mobile */
@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:92px;gap:40px;min-height:auto}
  .hero h1{max-width:none}
  .inbox{max-width:none}
  .inbox-list{height:300px}
  .how{padding-top:72px}
  .how-grid{grid-template-columns:1fr;gap:0}
  .stage{order:0;top:64px;height:auto;padding:12px 0 16px;z-index:2;background:var(--k)}
  .chat{height:40dvh;max-width:none}
  .beats{padding-bottom:0}
  .beat{min-height:0;justify-content:flex-start;padding:28px 0 56px} /* phones: text height only, no dead black under the pinned chat */
  .file-sec,.join{grid-template-columns:1fr}
  .file{box-shadow:8px 8px 0 var(--o)}
  .foot-r{align-items:flex-start}
}
@media (max-width:420px){
  .btn{width:100%}
  .nav-cta{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .beat{opacity:1}
}