@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/figtree.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/archivo.woff2) format('woff2')}

:root{
  color-scheme:light;
  --paper:#f5ead8;--card:#f9f4ed;--sand:#ebddc5;--sand-strong:#e4d4b8;
  --ink:#201e1d;--ink-body:#4a443d;--ink-muted:#6f6659;--line:rgba(32,30,29,.09);
  --clay:#c67139;--clay-strong:#b2622d;--rust:#8c491a;--sage:#7a8a5e;--sage-ink:#56633f;
  --night:#201e1d;--night-field:#2e2a27;--night-ink:#f5ead8;--night-body:#d6cab6;--night-muted:#b5a993;--ember:#e08a52;
  --header-h:68px;
  --shadow-card:0 1px 2px rgba(46,43,37,.06),0 20px 50px rgba(46,43,37,.1);
  --ease-out:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Figtree',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:var(--rust);text-decoration:none}
a:hover{color:var(--clay)}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
input{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
::selection{background:rgba(198,113,57,.22)}
:focus-visible{outline:3px solid var(--sage-ink);outline-offset:3px;border-radius:6px}
.epilogue :focus-visible,.site-footer :focus-visible{outline-color:var(--ember)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:12px;left:12px;z-index:60;padding:10px 16px;border-radius:999px;background:var(--card);color:var(--ink);font-weight:700;transform:translateY(-200%)}
.skip-link:focus{transform:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}

.button{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border-radius:999px;background:var(--clay);color:var(--card);font-size:14px;font-weight:700;white-space:nowrap;transition:background 160ms ease}
.button:hover{background:var(--clay-strong);color:var(--card)}
.button-quiet{background:var(--sand);color:var(--ink-body);font-weight:600}
.button-quiet:hover{background:var(--sand-strong);color:var(--ink-body)}

/* Header */
.site-header{position:sticky;top:0;z-index:40;background:rgba(245,234,216,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(32,30,29,.07)}
.site-header-inner{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo img{width:auto;height:40px}
.site-nav{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:600}
.nav-link{color:var(--ink-body)}

/* Hero */
.hero{min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));padding-top:56px;padding-bottom:64px;display:flex;flex-direction:column;justify-content:center;gap:44px}
.hero h1{max-width:1020px;font-weight:850;font-size:clamp(42px,5.8vw,86px);line-height:.96;letter-spacing:-.05em;text-wrap:balance}
.hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px 48px}
.message-card{flex:1 1 580px;min-width:0;max-width:760px;padding:24px 28px 22px;border-radius:28px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:18px}
.message-from{display:flex;align-items:center;gap:12px}
.avatar{width:46px;height:46px;flex-shrink:0;border-radius:15px;overflow:hidden;background:var(--sand)}
.avatar img{width:66px;height:66px;max-width:none;margin:-2px 0 0 -10px}
.message-meta{display:flex;flex-direction:column;gap:2px}
.message-name{font-size:16px;font-weight:800;letter-spacing:-.01em}
.message-to{font-size:13px;font-weight:600;color:var(--ink-muted)}
.message{font-weight:750;font-size:clamp(22px,2.3vw,31px);line-height:1.24;letter-spacing:-.03em}
.message strong{font-weight:inherit;color:var(--rust)}
.message-close{margin-top:.35em;color:var(--clay)}
.message .w{transition:color 260ms ease}
.message.is-typing .w:not(.is-on){color:rgba(32,30,29,.1)}
.message-foot{min-height:40px}
.message-actions,.message-reply{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.message-actions{opacity:0;transition:opacity 500ms ease}
.message-actions.is-shown{opacity:1}
.message-reply:focus{outline:none}
.bubble{padding:10px 16px;font-size:14px;font-weight:600}
.bubble-you{border-radius:20px 20px 6px 20px;background:var(--clay);color:var(--card)}
.bubble-dunsly{border-radius:6px 20px 20px 20px;background:var(--sand)}
.hero-side{flex:1 1 340px;max-width:440px;display:flex;flex-direction:column;gap:22px}
.lede{font-size:18px;line-height:1.55;color:var(--ink-body);text-wrap:pretty}

/* Waitlist */
.waitlist{display:flex;flex-direction:column;gap:12px}
.waitlist-form{display:flex;flex-direction:column;gap:10px}
.waitlist-field{display:flex;gap:8px;padding:6px;border-radius:999px;background:var(--card);border:1px solid rgba(32,30,29,.1);box-shadow:0 1px 2px rgba(46,43,37,.06),0 12px 32px rgba(46,43,37,.08)}
.waitlist-field:focus-within{border-color:var(--clay)}
.waitlist-field input{flex:1;min-width:0;height:46px;padding:0 18px;border:0;background:transparent;outline:none;font-size:15px}
.waitlist-field input::placeholder{color:#8a8072}
.waitlist-field .button{height:46px;padding:0 22px;font-size:15px}
.waitlist-field .button:disabled{opacity:.7;cursor:progress}
.waitlist-error{padding:0 18px;font-size:14px;font-weight:600;color:#9a3d12}
.waitlist-joined{padding:14px 20px;border-radius:24px;background:rgba(122,138,94,.2);color:#3f4a2e;font-size:15px;font-weight:600}
.waitlist-joined:focus{outline:none}
.waitlist-note{padding:0 18px;font-size:13px;line-height:1.5;color:var(--ink-muted)}
.waitlist-note a{text-decoration:underline;text-underline-offset:3px}
.noscript-note{margin:0;padding:12px 28px;background:var(--sand);text-align:center;font-size:14px;font-weight:600}

/* Story */
.story{position:relative;background:var(--sand)}
.has-js .story{height:320vh}
.story-sticky{padding:72px 0}
.has-js .story-sticky{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));min-height:560px;padding:0;display:flex;align-items:center}
.story-inner{width:100%;display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.story-copy{flex:1 1 320px;max-width:400px}
/* Phases share one grid cell, so the box is always as tall as the longest. */
.phases{display:grid;gap:40px}
.has-js .phase{grid-area:1/1;opacity:0;transform:translateY(18px);transition:opacity 500ms ease,transform 500ms var(--ease-out);pointer-events:none}
.has-js .phase.is-past{transform:translateY(-18px)}
.has-js .phase.is-active{opacity:1;transform:none;pointer-events:auto}
.kicker{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted)}
.kicker-num{font-family:'Archivo',sans-serif;letter-spacing:0;color:var(--clay)}
.phase h3{margin-top:14px;font-weight:850;font-size:clamp(34px,3.8vw,52px);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.phase p{margin-top:18px;font-size:17px;line-height:1.6;color:var(--ink-body);text-wrap:pretty}
.story-butler{width:170px;margin:8px 0 0 -10px;opacity:0;transform:translateY(30px);transition:opacity 500ms ease,transform 600ms var(--ease-out)}
.story-butler.is-shown{opacity:1;transform:none}
.board-wrap{flex:2 1 560px;min-width:0}
.board-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:16px}
.board-title{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.board-count{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:600;color:var(--ink-muted)}
.board-count-num{font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:-.03em;font-size:32px;line-height:1;font-variant-numeric:tabular-nums;color:var(--clay-strong);transition:color 300ms ease}
.board-count-num.is-clear{color:var(--sage-ink)}
.board{container:board/inline-size;position:relative;padding:18px;border-radius:28px;background:var(--paper);border:1px solid rgba(32,30,29,.08)}
.board-inner{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.board-col{display:none}
.board-progress{margin-top:14px;height:4px;border-radius:999px;background:rgba(32,30,29,.08);overflow:hidden}
.board-progress-bar{width:0;height:100%;border-radius:999px;background:var(--clay)}

/*
 * Board geometry: landing.js gives each chip and column header its column
 * (--col, or --pair-col/--pair-row for two columns), its slot, its scattered
 * spot (--mx %, --my px, --tilt deg) and stacking (--z) once; scrolling only
 * toggles .is-sorted. The static grid above is the no-JS fallback.
 */
.has-js .board-inner{display:block;position:relative;height:294px;--w:23.5%;--step:25.5%;--row-gap:0px;--label-gap:30px;--pitch:56px;--scatter:1}
.has-js .board-col,.has-js .chip{--x:var(--col);--r:0;position:absolute;width:var(--w)}
.has-js .board-col{display:flex;left:calc(var(--x) * var(--step));top:calc(var(--r) * var(--row-gap));align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);white-space:nowrap;opacity:0;transition:opacity 400ms ease}
.has-js .has-sorted .board-col{opacity:1}
.has-js .chip{left:calc(var(--mx) * (100% - var(--w)) / 76.5);top:calc(var(--my) * var(--scatter) * 1px);transform:rotate(calc(var(--tilt) * 1deg));z-index:var(--z);transition:left 750ms var(--ease-out),top 750ms var(--ease-out),transform 750ms var(--ease-out),box-shadow 400ms ease}
.has-js .chip.is-sorted{left:calc(var(--x) * var(--step));top:calc(var(--r) * var(--row-gap) + var(--label-gap) + var(--slot) * var(--pitch));transform:rotate(0deg);z-index:1}
.board-col::before{content:'';width:8px;height:8px;flex-shrink:0;border-radius:999px;background:var(--tone-dot)}
.chip{container-type:inline-size;display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:0 6px 18px rgba(46,43,37,.12);--tone-dot:#a19786;--tone-tint:rgba(161,151,134,.18)}
.chip.is-sorted{box-shadow:0 1px 2px rgba(46,43,37,.05)}
.chip-icon{width:28px;height:28px;flex-shrink:0;border-radius:9px;background:var(--tone-tint);display:flex;align-items:center;justify-content:center;transition:background 400ms ease}
.chip-icon::after{content:'';width:9px;height:9px;border-radius:999px;background:var(--tone-dot);transition:background 400ms ease}
.chip-text{flex:1;min-width:0;display:flex;flex-direction:column}
.chip-name,.chip-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-name{font-size:13px;font-weight:650}
.chip-label{font-size:11.5px;font-weight:600;color:var(--clay-strong)}
.chip.is-sorted .chip-label{color:var(--ink-muted)}
.chip-amt{font-family:'Archivo',sans-serif;font-weight:600;letter-spacing:-.02em;font-size:12.5px;color:var(--rust);white-space:nowrap}
[data-tone=sage]{--tone-dot:var(--sage-ink);--tone-tint:rgba(122,138,94,.2)}
[data-tone=clay]{--tone-dot:var(--clay-strong);--tone-tint:rgba(198,113,57,.18)}
[data-tone=ochre]{--tone-dot:#8a6a28;--tone-tint:rgba(178,138,60,.2)}
[data-tone=slate]{--tone-dot:#4f6167;--tone-tint:rgba(107,128,135,.2)}
@container (max-width:200px){.chip-amt{display:none}}
/* Narrow boards: two stacked pairs of columns and one-line chips keep the sticky stage within a phone screen. */
@container board (max-width:639.98px){
  .has-js .board-inner{height:310px;--w:48.5%;--step:51.5%;--row-gap:142px;--label-gap:20px;--pitch:38px;--scatter:calc(276 / 252)}
  .has-js .board-col,.has-js .chip{--x:var(--pair-col);--r:var(--pair-row)}
  .chip{gap:7px;padding:6px 8px;border-radius:12px}
  .chip-icon{width:20px;height:20px;border-radius:7px}
  .chip-icon::after{width:7px;height:7px}
  .chip-label{display:none}
  .chip-name{font-size:12.5px}
  .has-js .board-col{font-size:10px;letter-spacing:.1em}
}

/* Shared section type */
.section-intro{max-width:780px}
.section-intro-narrow{max-width:640px}
.section-intro h2{margin-top:14px;font-weight:850;font-size:clamp(36px,4.6vw,66px);line-height:.98;letter-spacing:-.05em;text-wrap:balance}
.section-intro-narrow h2{font-size:clamp(36px,4.2vw,58px);line-height:1;letter-spacing:-.045em}

/* Done list */
.done-section{padding-top:140px}
.done-grid{margin-top:52px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:16px}
.list-card{padding:30px;border-radius:28px;border:1px solid rgba(32,30,29,.14)}
.list-card-dunsly{background:var(--card);border-color:var(--line);box-shadow:var(--shadow-card)}
.list-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:24px}
.list-card-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800}
.list-card-title img{width:24px;height:24px;border-radius:7px}
.list-card-time{font-family:'Archivo',sans-serif;font-weight:600;font-size:14px;color:var(--rust);white-space:nowrap}
.list-card-time-done{color:var(--sage-ink)}
.task-list{margin:20px 0 0;padding:0;list-style:none}
.task{display:flex;gap:14px;align-items:center;padding:15px 0;border-top:1px solid rgba(32,30,29,.08)}
.task::before{content:'';width:22px;height:22px;flex-shrink:0;border-radius:7px;border:2px solid rgba(32,30,29,.25);display:inline-flex;align-items:center;justify-content:center;color:var(--card);font-size:12px;font-weight:900;transform:scale(.9);transition:all 350ms cubic-bezier(.3,1.6,.5,1)}
.task-text{flex:1;min-width:0;font-size:16px;line-height:1.4;font-weight:600;text-decoration-color:rgba(32,30,29,.35);transition:color 400ms ease}
.task-when{font-size:12.5px;font-weight:600;color:var(--sage-ink);white-space:nowrap;opacity:0;transition:opacity 400ms ease}
.task.is-done::before{content:'✓';content:'✓'/'';background:var(--sage);border-color:var(--sage);transform:none}
.task.is-done .task-text{color:var(--ink-muted);text-decoration-line:line-through}
.task.is-done .task-when{opacity:1}

/* How it works */
.how-section{padding-top:130px;padding-bottom:140px}
.steps{margin:52px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.step{position:relative;overflow:hidden;min-height:260px;padding:28px;border-radius:28px;background:var(--sand);display:flex;flex-direction:column;gap:14px}
.step-num{font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;color:var(--rust)}
.step h3{font-weight:800;font-size:26px;letter-spacing:-.035em;line-height:1.1}
.step p{font-size:15.5px;line-height:1.55;color:var(--ink-body);text-wrap:pretty}
.step .step-note{margin-top:auto;padding-top:16px;border-top:1px solid rgba(32,30,29,.14);font-size:14px;line-height:1.5;font-weight:650;color:var(--ink)}
.step-feature{background:var(--clay);color:var(--card)}
.step-feature .step-num{color:#fbe3cf}
.step-feature p{max-width:260px;color:#fbeee2}
.step-butler{position:absolute;right:-24px;bottom:-36px;width:150px}

/* Epilogue + waitlist on dark */
.epilogue{position:relative;overflow:hidden;background:var(--night);color:var(--night-ink)}
.epilogue-inner{padding-top:140px;padding-bottom:120px;display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.epilogue-copy{flex:1 1 520px;min-width:0}
.epilogue .kicker{color:var(--night-muted)}
.epilogue .kicker-num{color:var(--ember)}
.epilogue h2{margin-top:16px;font-weight:850;font-size:clamp(44px,6vw,88px);line-height:.96;letter-spacing:-.05em;text-wrap:balance}
.epilogue-lede{margin-top:22px;max-width:500px;font-size:18px;line-height:1.55;color:var(--night-body);text-wrap:pretty}
.epilogue .waitlist{margin-top:32px;max-width:500px}
.epilogue .waitlist-field{background:var(--night-field);border-color:rgba(245,234,216,.14);box-shadow:none}
.epilogue .waitlist-field:focus-within{border-color:var(--ember)}
.epilogue .waitlist-field input{color:var(--night-ink)}
.epilogue .waitlist-field input::placeholder{color:#9b907f}
.epilogue .waitlist-field .button:hover{background:#d27b42}
.epilogue .waitlist-error{color:#f2a77a}
.epilogue .waitlist-joined{background:rgba(122,138,94,.28);color:#dfe6cf}
.epilogue .waitlist-note{color:var(--night-muted)}
.epilogue .waitlist-note a{color:var(--night-ink)}
.epilogue-art{position:relative;flex:0 1 400px;min-width:240px}
.epilogue-art::before{content:'';position:absolute;inset:10% 6% 2%;border-radius:999px;background:rgba(198,113,57,.22)}
.epilogue-art img{position:relative;width:100%}

/* Footer */
.site-footer{background:var(--night);color:var(--night-muted)}
.site-footer-inner{padding-top:28px;padding-bottom:28px;border-top:1px solid rgba(245,234,216,.1);display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:13px}
.site-footer nav{display:flex;gap:22px}
.site-footer a{color:var(--night-muted)}
.site-footer a:hover{color:var(--night-ink)}

/* Scroll reveal: landing.js hides only content that starts below the fold. */
.has-js [data-reveal]{transition:opacity 900ms var(--ease-out),transform 900ms var(--ease-out)}
.reveal-pending{opacity:0;transform:translateY(32px)}

@media (max-width:999px){
  .has-js .story-sticky{height:auto;min-height:0;padding:24px 0 28px;align-items:flex-start}
  .story-inner{gap:20px}
  .story-copy{max-width:100%;flex-basis:100%}
  .story-butler{display:none}
  .board-wrap{flex-basis:100%}
}
/* Short screens keep the sorting board in view by dropping the supporting paragraph. */
@media (max-width:999px) and (max-height:720px){
  .has-js .phase p{display:none}
}
@media (max-width:639px){
  :root{--header-h:60px}
  .wrap{padding:0 16px}
  .logo img{height:34px}
  .nav-link{display:none}
  .hero{padding-top:36px;padding-bottom:48px;gap:32px}
  .message-card{padding:20px 20px 18px;border-radius:24px}
  .waitlist-field .button{padding:0 16px}
  .phase h3{font-size:28px}
  .phase p{margin-top:12px;font-size:15px;line-height:1.5}
  .board-head{margin-bottom:10px}
  .board-count-num{font-size:26px}
  .board{padding:12px;border-radius:22px}
  .done-section{padding-top:96px}
  .done-grid{margin-top:36px}
  .list-card{padding:22px}
  .how-section{padding-top:96px;padding-bottom:96px}
  .steps{margin-top:36px}
  .epilogue-inner{padding-top:96px;padding-bottom:80px}
  .epilogue-art{min-width:0;flex-basis:280px;margin:0 auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important}
}