:root {
  --paper: #F6F6F3;
  --surface: #FFFFFF;
  --ink: #14161B;
  --soft: rgba(20, 22, 27, 0.64);
  --faint: rgba(20, 22, 27, 0.4);
  --hair: rgba(20, 22, 27, 0.13);
  --coral: #F2613F;
  --hi: #2F7D55;
  --mid: #C28A1A;
  --lo: #B5483A;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --pop: cubic-bezier(0.3, 1.5, 0.5, 1);
  --gut: clamp(18px, 3.4vw, 56px);
  --wrap: 1280px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; width: 100%; height: auto; }
ol, ul { list-style: none; }
::selection { background: var(--ink); color: var(--paper); }
.mono { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.num { font-family: var(--mono); font-size: 11.5px; color: var(--soft); letter-spacing: 0.04em; }

/* ---------- mark ---------- */
.mark { display: inline-flex; align-items: center; gap: 10px; }
.glyph { display: inline-grid; grid-template-columns: repeat(4, 5px); gap: 3px; }
.glyph i { width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }
.word { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 24px; letter-spacing: -0.025em; line-height: 1; }
.mark:hover .glyph i { animation: drop 0.7s var(--pop) both; animation-delay: calc(var(--r) * 70ms); }
@keyframes drop { 0% { transform: translateY(-5px); } }

/* ---------- top ---------- */
.top { max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding: 22px var(--gut) 0; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 3; }
.top nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); font-size: 14.5px; }
.top nav a:not(.pill) { position: relative; padding: 4px 0; }
.top nav a:not(.pill)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--out); }
.top nav a:not(.pill):hover::after { transform: scaleX(1); transform-origin: left; }
.pill { padding: 9px 16px; border-radius: 4px; background: var(--ink); color: #fff; font-weight: 500; transition: transform 0.4s var(--out); }
.pill:hover { transform: translateY(-2px); }

main { max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(30px, 5vw, 80px); align-items: center; padding: clamp(50px, 10vh, 120px) 0 clamp(50px, 9vh, 100px); }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.hero h1 { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: clamp(44px, 5.5vw, 76px); line-height: 0.95; letter-spacing: -0.035em; margin-top: 22px; }
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
[data-split] .w > span { display: inline-block; transform: translateY(108%); transition: transform 1.1s var(--out); transition-delay: calc(var(--i) * 60ms + 80ms); }
[data-split].in .w > span { transform: none; }
.lede { margin-top: clamp(22px, 3.6vh, 34px); max-width: 30em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--soft); }
.hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-top: clamp(26px, 4.4vh, 40px); }
.btn { display: inline-flex; align-items: center; gap: 14px; padding: 7px 7px 7px 22px; border-radius: 4px; background: var(--ink); color: #fff; font-weight: 600; font-size: 15.5px; transition: transform 0.4s var(--out); }
.btn i { width: 36px; height: 36px; border-radius: 3px; background: var(--coral); position: relative; transition: transform 0.6s var(--out); }
.btn i::before { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; background: #fff; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12h17M14 5.5l6.5 6.5-6.5 6.5'/%3E%3C/svg%3E"); }
.btn:hover i { transform: translateX(4px); }
.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: 0.5; pointer-events: none; }
.text-link { font-size: 15px; font-weight: 500; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }

/* the sieve: applicants as dots, sorted by fit */
.sieve { border: 1px solid var(--hair); border-radius: 4px; background: var(--surface); padding: 18px 20px 16px; }
.sieve-top, .sieve-foot { display: flex; justify-content: space-between; align-items: center; }
.sieve-top { padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.sieve-foot { padding-top: 14px; border-top: 1px solid var(--hair); }
.sieve-field { position: relative; height: 300px; margin: 6px 0; transition: height 0.4s; }
.sieve-field .d { position: absolute; left: 0; top: 0; width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; border-radius: 50%; background: #D5D5D0; transition: transform 1.1s var(--out), background-color 0.6s; will-change: transform; }
.sieve-field.sorted .d.hi { background: var(--hi); }
.sieve-field.sorted .d.mid { background: var(--mid); }
.sieve-field.sorted .d.lo { background: var(--lo); }
.sieve-field .band { position: absolute; left: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); opacity: 0; transition: opacity 0.6s 0.7s; display: flex; gap: 10px; }
.sieve-field .band b { color: var(--ink); font-weight: 500; }
.sieve-field.sorted .band { opacity: 1; }
.sift-btn { font-size: 13.5px; font-weight: 600; padding: 8px 14px; border: 1px solid var(--ink); border-radius: 4px; transition: background 0.3s, color 0.3s, transform 0.4s var(--pop); }
.sift-btn:hover { background: var(--ink); color: #fff; }
.sift-btn:active { transform: scale(0.95); }

/* ---------- proof ---------- */
.proof { display: grid; grid-template-columns: 1fr 3fr; gap: 20px; padding: 26px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair); }
.proof-more { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.55; color: var(--soft, rgba(20,22,27,.68)); max-width: 36em; margin-top: 14px; }
.proof-line + .proof-more { margin-top: 22px; }
.proof-line { font-family: var(--display); font-stretch: 112%; font-weight: 500; font-size: clamp(20px, 2.3vw, 34px); line-height: 1.2; letter-spacing: -0.025em; max-width: 26em; }

/* ---------- sections ---------- */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--ink); }
.sec-head h2 { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: clamp(30px, 3.6vw, 54px); letter-spacing: -0.035em; line-height: 1; }
.how, .try, .pages, .waitlist { padding-top: clamp(90px, 16vh, 180px); scroll-margin-top: -50px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); }
.steps li { padding: 26px clamp(18px, 2.4vw, 36px) 30px 0; border-right: 1px solid var(--hair); }
.steps li + li { padding-left: clamp(18px, 2.4vw, 36px); }
.steps li:last-child { border-right: 0; }
.steps h3, .points h3 { font-family: var(--display); font-stretch: 112%; font-weight: 600; font-size: clamp(20px, 1.9vw, 27px); letter-spacing: -0.025em; line-height: 1.1; margin-top: 22px; }
.steps p, .points p { color: var(--soft); margin-top: 10px; font-size: 15.5px; max-width: 26em; }
.dots { display: grid; grid-template-columns: repeat(10, 9px); gap: 4px; margin-top: 26px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: #DCDCD7; transition: background-color 0.3s, transform 0.5s var(--pop); transform: scale(0.6); }
.dots i.on { background: var(--coral); transform: none; }
.dots.big { grid-template-columns: repeat(10, 16px); gap: 7px; margin: 0; }
.dots.big i { width: 16px; height: 16px; }

.stage { margin-top: clamp(26px, 4vw, 50px); border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px var(--hair), 0 50px 90px -50px rgba(20, 22, 27, 0.35); background: var(--paper); }
.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 50px); margin-top: clamp(34px, 5vw, 60px); }
.points li { border-top: 1px solid var(--hair); }

/* gallery of full pages; each one scrolls inside its frame */
.gallery { overscroll-behavior-x: contain; --bleed: calc(max(0px, (100vw - var(--wrap)) / 2 - var(--gut)) + var(--gut)); display: flex; gap: clamp(16px, 2vw, 30px); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding: 36px var(--bleed) 30px 2px; margin: 0 calc(var(--bleed) * -1) 0 -2px; }
.gallery::-webkit-scrollbar { display: none; }
.gallery.gliding { scroll-snap-type: none; }
.page { flex: 0 0 min(72vw, 820px); scroll-snap-align: start; margin: 0; position: relative; }
.page .frame { height: clamp(380px, 46vw, 600px); overflow: auto; overscroll-behavior: auto; scrollbar-width: none; border-radius: 6px; background: var(--paper); box-shadow: 0 0 0 1px var(--hair), 0 40px 70px -40px rgba(20, 22, 27, 0.35); }
.page .frame::-webkit-scrollbar { display: none; }
.page .frame img { transition: width 0.5s var(--out); }
.page.zoomed .frame { overscroll-behavior-x: contain; }
.page.zoomed .frame img { width: 190%; max-width: none; }
.page figcaption { display: flex; gap: 14px; align-items: baseline; margin-top: 14px; font-size: 15px; color: var(--soft); }
.zoomb { position: absolute; right: 14px; top: 14px; z-index: 2; padding: 8px 14px; border-radius: 4px; background: rgba(20, 22, 27, 0.9); color: #fff; font-size: 12.5px; font-weight: 600; }
.gallery-nav { display: flex; gap: 10px; }
.gallery-nav button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--ink); border-radius: 4px; font-size: 16px; transition: background 0.3s, color 0.3s, opacity 0.3s; }
.gallery-nav button:hover:not(:disabled) { background: var(--ink); color: #fff; }
.gallery-nav button:disabled { opacity: 0.25; cursor: default; }

/* ---------- waiting list ---------- */
.wl { padding-top: clamp(30px, 5vw, 60px); max-width: 880px; transition: opacity 0.5s, transform 0.7s var(--out); }
.wl.gone { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.wl-say { font-family: var(--display); font-stretch: 112%; font-weight: 500; font-size: clamp(22px, 2.5vw, 36px); line-height: 1.18; letter-spacing: -0.028em; max-width: 22em; }
.wl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(20px, 3vw, 44px); margin-top: clamp(30px, 5vw, 54px); }
.wl-grid label, .wl-pick { display: block; padding: 16px 0 0; }
.wl-grid label > span, .wl-pick > span { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.wl-grid input[type="text"], .wl-grid input[type="email"] { width: 100%; font: 500 20px/1.3 var(--sans); color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 8px 0 12px; outline: none; transition: border-color 0.3s, box-shadow 0.3s; }
.wl-grid input:focus { box-shadow: 0 1px 0 var(--ink); }
.wl-grid label.bad input { border-bottom-color: var(--lo); box-shadow: 0 1px 0 var(--lo); }
.picks { display: flex; gap: 8px; padding-top: 10px; }
.picks label { padding: 0; cursor: pointer; }
.picks input { position: absolute; opacity: 0; pointer-events: none; }
.picks label span { display: inline-block; font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); padding: 8px 16px; border: 1px solid var(--ink); border-radius: 4px; transition: background 0.3s, color 0.3s, transform 0.4s var(--pop); }
.picks input:checked + span { background: var(--ink); color: #fff; }
.picks label:active span { transform: scale(0.95); }
.picks input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wl-send { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px; margin-top: 36px; }
.wl-note { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.wl-done { padding-top: clamp(40px, 6vw, 70px); }
.wl-done-t { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: clamp(34px, 4.6vw, 64px); letter-spacing: -0.035em; line-height: 1; margin-top: 30px; }
.wl-done-s { color: var(--soft); margin-top: 12px; }

/* ---------- footer ---------- */
.foot { max-width: calc(var(--wrap) + var(--gut) * 2); margin: clamp(110px, 18vh, 200px) auto 0; padding: 22px var(--gut) 34px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--hair); }

/* ---------- reveal ---------- */
.js .rise { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--out), transform 1.1s var(--out); }
.js .rise.in { opacity: 1; transform: none; }
.steps .rise:nth-child(2), .points .rise:nth-child(2), .gallery .rise:nth-child(2) { transition-delay: 0.09s; }
.steps .rise:nth-child(3), .points .rise:nth-child(3), .gallery .rise:nth-child(3) { transition-delay: 0.18s; }

@media (max-width: 860px) {
  body { font-size: 16px; }
  .top nav a:not(.pill) { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 44px; }
  .hero h1 { font-size: clamp(42px, 12.4vw, 72px); }
  .proof { grid-template-columns: 1fr; gap: 8px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .steps, .points { grid-template-columns: 1fr; }
  .steps li, .steps li + li { padding: 22px 0 26px; border-right: 0; border-bottom: 1px solid var(--hair); }
  .stage { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .stage .demo { min-width: 760px; }
  .try .sec-head .mono::after { content: " Swipe sideways to see it all."; }
  .page { flex-basis: 86vw; }
  .page .frame { height: 62vh; }
  .page.zoomed .frame img { width: 300%; }
  .wl-grid { grid-template-columns: 1fr; }
  .foot { flex-direction: column; gap: 14px; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation: none !important; }
}

/* ---------- arrows: drawn as thin lines, never as text characters (phones turn those into emoji) ---------- */
.arr { display: inline-block; width: 0.82em; height: 0.82em; vertical-align: -0.06em; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; flex: none; }
.arr.e { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12h17M14 5.5l6.5 6.5-6.5 6.5'/%3E%3C/svg%3E"); }
.arr.w { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12h-17M10 5.5L3.5 12l6.5 6.5'/%3E%3C/svg%3E"); }
.arr.ne { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18L18 6M8.5 6H18v9.5'/%3E%3C/svg%3E"); }