/* Layout concept: a quiet letter that turns into a live demo. Serif statements on ivory,
   real app clips in phone frames, one emerald band at a time, lots of air. */
:root{
  --emerald:#0E4D45; --emerald-deep:#0A3A34; --emerald-soft:#E3ECE8;
  --ivory:#FAF7F0; --paper:#FFFDF8; --rose:#F2D0CB; --rose-soft:#F8E6E2;
  --gold:#D4AE52; --gold-ink:#8A6A1E;
  --ink:#16302C; --sage:#4B6B66; --line:#E6DFD0;
  --display:"Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body:"DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --step--1:clamp(.84rem,.8rem + .15vw,.92rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.08rem);
  --step-1:clamp(1.18rem,1.08rem + .45vw,1.4rem);
  --step-2:clamp(1.6rem,1.3rem + 1.3vw,2.3rem);
  --step-3:clamp(2.1rem,1.6rem + 2.4vw,3.5rem);
  --step-4:clamp(2.6rem,1.8rem + 3.8vw,5rem);
  --wrap:1180px; --gutter:clamp(18px,4vw,40px);
  --r:22px; --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--body);font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
h1,h2{font-family:var(--display);letter-spacing:-.01em;line-height:1.04}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-family:var(--body);font-weight:600;font-size:var(--step-1);line-height:1.3}
h1 em,h2 em{font-style:italic;color:var(--emerald)}
p{margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:760px}
.measure{max-width:62ch}
.stack{display:flex;flex-direction:column;gap:20px}
.stack-sm{display:flex;flex-direction:column;gap:10px}
.eyebrow{font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}
.lead{font-size:var(--step-1);line-height:1.5;color:var(--sage)}
.muted{color:var(--sage)}
.small{font-size:var(--step--1)}
.center{text-align:center;margin-inline:auto}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--emerald);color:var(--ivory);padding:8px 14px;border-radius:999px;z-index:100}
.skip:focus{left:12px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:999px;font:600 .98rem/1 var(--body);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .25s var(--ease),background .25s,box-shadow .25s,color .25s}
.btn-primary{background:var(--emerald);color:var(--ivory)}
.btn-primary:hover{background:var(--emerald-deep);transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(14,77,69,.6)}
.btn-ghost{border-color:currentColor;color:var(--emerald);background:transparent}
.btn-ghost:hover{background:var(--emerald);color:var(--ivory);border-color:var(--emerald)}
.btn-gold{background:var(--gold);color:var(--emerald-deep)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(212,174,82,.8)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.textlink{color:var(--emerald);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--gold);padding-bottom:1px}
.textlink:hover{border-color:var(--emerald)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--ivory) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;height:70px}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--display);font-size:1.6rem;color:var(--emerald);text-decoration:none;flex:none}
.logo svg{flex:none}
nav.main{display:flex;gap:2px;margin-left:auto}
nav.main a{text-decoration:none;font-size:.93rem;padding:8px 12px;border-radius:999px;color:var(--ink);transition:background .2s}
nav.main a:hover{background:var(--emerald-soft)}
nav.main a[aria-current="page"]{color:var(--emerald);font-weight:600}
.top .actions{display:flex;gap:8px;align-items:center}
.top .btn{padding:11px 18px;font-size:.92rem}
.menu-btn{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;border-radius:12px;cursor:pointer;color:var(--emerald)}
.menu-btn span{display:block;width:22px;height:2px;background:currentColor;margin:5px auto;transition:transform .3s var(--ease),opacity .2s}
.menu-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){opacity:0}
.menu-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{display:none}
@media (max-width:980px){
  nav.main,.top .actions{display:none}
  .menu-btn{display:block}
  .drawer{display:block;position:fixed;inset:70px 0 auto 0;background:var(--ivory);border-bottom:1px solid var(--line);padding:12px var(--gutter) 28px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .25s,transform .3s var(--ease);max-height:calc(100dvh - 70px);overflow:auto}
  .menu-open .drawer{opacity:1;transform:none;pointer-events:auto}
  .drawer a{display:block;text-decoration:none;font-family:var(--display);font-size:1.9rem;padding:8px 0;color:var(--emerald)}
  .drawer .btn-row{margin-top:16px}
  .drawer .btn{font-family:var(--body);font-size:1rem}
}

/* sections */
section{padding-block:clamp(72px,10vw,136px)}
.tight{padding-block:clamp(48px,7vw,88px)}
.band{background:var(--emerald);color:var(--ivory)}
.band .eyebrow{color:var(--gold)}
.band .lead,.band .muted{color:#CFE0DB}
.band h2 em,.band h1 em{color:var(--gold)}
.band .btn-ghost{color:var(--ivory)}
.band .btn-ghost:hover{background:var(--ivory);color:var(--emerald);border-color:var(--ivory)}
.rose{background:var(--rose-soft)}
.paper{background:var(--paper)}
.sec-head{display:flex;flex-direction:column;gap:18px;max-width:820px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head.center{align-items:center;text-align:center}

/* reveal motion (content is visible at rest; JS adds .rv only when motion is allowed) */
.rv .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv .reveal.in{opacity:1;transform:none}
.rv .reveal.d1{transition-delay:.08s}.rv .reveal.d2{transition-delay:.16s}.rv .reveal.d3{transition-delay:.24s}.rv .reveal.d4{transition-delay:.32s}

/* phone frame */
.phone{position:relative;width:min(100%,var(--pw,290px));aspect-ratio:432/850;border-radius:42px;background:#0D1F1C;padding:9px;box-shadow:0 40px 70px -40px rgba(14,58,52,.55),0 2px 0 rgba(255,255,255,.06) inset;margin-inline:auto;flex:none}
.phone::after{content:"";position:absolute;top:16px;left:50%;width:64px;height:7px;border-radius:9px;background:#0D1F1C;transform:translateX(-50%);z-index:2;box-shadow:0 0 0 2px rgba(255,255,255,.04)}
.phone .scr{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:var(--ivory)}
.phone video,.phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.phone .scr::before{content:"";display:block;height:22px;background:var(--emerald);position:absolute;inset:0 0 auto 0;z-index:1;opacity:0}
.tag{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:.8rem;font-weight:600;color:var(--emerald)}
.tag.gold{background:#FBF1D9;border-color:#EAD39A;color:var(--gold-ink)}
.mock-note{font-size:.78rem;color:var(--sage);text-align:center}

/* hero */
.hero{padding-block:clamp(40px,6vw,88px) clamp(56px,8vw,110px)}
.hero .grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,80px);align-items:center}
.hero h1{font-size:clamp(2.5rem,1.6rem + 4vw,4.9rem)}
.hero .moment{font-size:.95rem;color:var(--sage)}
.hero .moment b{color:var(--emerald);font-weight:600}
.qs{display:flex;flex-wrap:wrap;gap:10px}
.qs span{padding:9px 15px;border-radius:999px;background:var(--paper);border:1px dashed #D9CDB3;font-size:.93rem;color:var(--ink)}
.rv .qs span{opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv .qs.in span{opacity:1;transform:none}
.why{display:flex;flex-direction:column;gap:18px;padding:24px;border-radius:22px;background:var(--emerald-soft);border:1px solid #CFDDD7}
.why-h{font-family:var(--display);font-size:var(--step-1);line-height:1.3;color:var(--emerald)}
.unsent{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
.msg{display:flex;flex-direction:column;gap:8px;min-width:0}
.msg .b{align-self:flex-start;max-width:100%;padding:10px 14px;border-radius:16px 16px 16px 4px;background:#FFFFFF;border:1.5px solid #B9CEC6;font-size:.95rem;line-height:1.4;color:var(--ink);box-shadow:0 10px 20px -16px rgba(14,58,52,.55);position:relative}
.msg .b s{text-decoration-line:line-through;text-decoration-color:rgba(176,69,58,.45);text-decoration-thickness:1px;color:var(--ink)}
.msg .b::after{content:"Typed · Deleted";display:block;margin-top:4px;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#B0453A}
.msg.sent .b{background:var(--emerald);border-color:var(--emerald);color:var(--ivory);font-weight:500}
.msg.sent .b::after{content:"Sent ✓✓";color:#9FD3C1}
.msg .r{font-size:.9rem;line-height:1.45;color:#3E5C57;padding-left:4px}
.msg .r b{color:var(--ink);font-weight:600}
.rv .why .msg{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv .why.in .msg{opacity:1;transform:none}
.rv .why.in .msg:nth-child(2){transition-delay:.12s}.rv .why.in .msg:nth-child(3){transition-delay:.24s}.rv .why.in .msg:nth-child(4){transition-delay:.36s}.rv .why.in .msg:nth-child(5){transition-delay:.48s}.rv .why.in .msg:nth-child(6){transition-delay:.6s}
@media (max-width:560px){.unsent{grid-template-columns:1fr}}
.turn{font-family:var(--display);font-size:var(--step-2);line-height:1.15;color:var(--emerald)}
.turn em{color:var(--gold-ink)}
.fine{font-size:.86rem;color:var(--sage)}
.hero-visual{position:sticky;top:110px;align-self:start;display:grid;place-items:center;padding-block:10px;margin-top:40px}
@media (max-width:900px){.hero-visual{position:relative;top:0;margin-top:0}}
.hero-visual .halo{position:absolute;inset:8% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(242,208,203,.85),rgba(242,208,203,0));z-index:0}
.hero-visual .phone{--pw:300px;z-index:1}
.float{position:absolute;z-index:2;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:10px 14px;font-size:.84rem;box-shadow:0 18px 30px -22px rgba(22,48,44,.45);max-width:220px;line-height:1.35}
.float b{display:block;color:var(--emerald)}
.float.f1{top:14%;left:-2%}
.float.f2{bottom:16%;right:-4%}
@media (prefers-reduced-motion:no-preference){.float{animation:bob 6s ease-in-out infinite}.float.f2{animation-delay:-3s}}
@keyframes bob{50%{transform:translateY(-8px)}}
@media (max-width:900px){.hero .grid{grid-template-columns:1fr}.hero-visual .phone{--pw:260px}.float.f1{left:0}.float.f2{right:0}}

/* answer: you and them */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,56px);align-items:start;max-width:880px;margin-inline:auto}
.duo figure{margin:0;display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center}
.duo .phone{--pw:280px}
.duo figcaption{display:flex;flex-direction:column;gap:6px;max-width:300px}
.duo figcaption b{font-family:var(--display);font-weight:400;font-size:1.7rem;color:var(--emerald)}
.duo .arrow{display:none}
@media (max-width:640px){.duo{grid-template-columns:1fr}.duo .phone{--pw:250px}}
.clock{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--display);font-size:var(--step-2);color:var(--emerald)}

/* scenes carousel */
.scroller{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,360px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gutter) 22px;margin-inline:calc(var(--gutter) * -1);scrollbar-width:thin;overscroll-behavior-x:contain}
.scene{scroll-snap-align:start;background:var(--paper);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--line)}
.scene .when{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.scene h3{font-family:var(--display);font-weight:400;font-size:1.75rem;line-height:1.12;color:var(--emerald)}
.scene p{color:var(--sage);font-size:.98rem}
.scroll-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.arrows{display:flex;gap:8px}
.arrows button{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--emerald);background:transparent;color:var(--emerald);font-size:1.1rem;cursor:pointer;transition:background .2s,color .2s}
.arrows button:hover{background:var(--emerald);color:var(--ivory)}

/* truths list */
.truths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;border-top:1px solid var(--line)}
.truth{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;padding:26px 0;border-bottom:1px solid var(--line)}
.truth .n{font-family:var(--display);font-size:1.5rem;color:var(--gold-ink);line-height:1.1;grid-row:span 3}
.truth h3{font-family:var(--display);font-weight:400;font-size:1.65rem;color:var(--emerald)}
.truth .feel{font-style:italic;color:var(--sage)}
.truth .fix{font-size:.96rem}
.truth .fix b{color:var(--emerald)}
@media (max-width:760px){.truths{grid-template-columns:1fr}}

/* broken journey */
.journey{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:8px}
.jstep{padding:22px 18px;border-radius:18px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px;min-width:0}
.jstep b{font-family:var(--display);font-weight:400;font-size:1.5rem;color:var(--emerald)}
.jstep span{font-size:.92rem;color:var(--sage)}
.jstep.gap{background:transparent;border:1.5px dashed #CDBF9F}
.jstep.gap b{color:var(--gold-ink)}
@media (max-width:860px){.journey{grid-template-columns:repeat(2,minmax(0,1fr))}.jstep.gap{grid-column:span 2}}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips span,.chips a{padding:9px 16px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:.93rem;text-decoration:none;color:var(--ink)}
.chips a:hover{border-color:var(--emerald);color:var(--emerald)}

/* scrollytelling steps */
.steps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,6vw,90px)}
.step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;gap:16px;padding-block:24px;opacity:.38;transition:opacity .5s var(--ease)}
.step.active{opacity:1}
.step .k{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.step h3{font-family:var(--display);font-weight:400;font-size:var(--step-3);line-height:1.04;color:var(--ivory)}
.step p{color:#CFE0DB;font-size:var(--step-1);line-height:1.5;max-width:46ch}
.step .m-phone{display:none}
.stage{position:sticky;top:calc(50vh - 290px);height:580px;display:grid;place-items:center}
.stage .phone{--pw:295px;position:absolute;inset:0;margin:auto;height:fit-content;opacity:0;transform:scale(.96) translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.stage .phone.on{opacity:1;transform:none}
.stage .badge{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);z-index:3;white-space:nowrap}
.mini-pair{display:flex;gap:12px;justify-content:center}
.mini-pair .phone{--pw:200px}
@media (max-width:900px){
  .steps{grid-template-columns:1fr}
  .stage{display:none}
  .step{min-height:0;opacity:1;padding-block:28px;border-top:1px solid rgba(255,255,255,.12)}
  .step .m-phone{display:block;margin-top:14px}
  .step .m-phone .phone{--pw:250px}
}

/* three views */
.views{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);align-items:start}
.view{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.view .phone{--pw:270px}
.view .who{display:flex;flex-direction:column;gap:6px;max-width:300px}
.view .who b{font-family:var(--display);font-weight:400;font-size:1.65rem;color:var(--emerald);line-height:1.1}
.view .who span{color:var(--sage);font-size:.96rem}
@media (max-width:860px){.views{grid-template-columns:1fr;gap:56px}}

/* two-column feature rows */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:center}
.split.flip > :first-child{order:2}
@media (max-width:860px){.split,.split.flip{grid-template-columns:1fr}.split.flip > :first-child{order:0}}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.ticks li{position:relative;padding-left:30px}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,var(--gold) 0 35%,transparent 36%);border:1.5px solid var(--gold)}
.ticks b{color:var(--emerald)}
.band .ticks b{color:var(--ivory)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
@media (max-width:760px){.two{grid-template-columns:1fr}}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:18px;min-width:0}
.panel h3{font-family:var(--display);font-weight:400;font-size:2rem;color:var(--emerald)}

/* phone rows */
.phones{display:grid;grid-template-columns:repeat(2,minmax(0,230px));gap:clamp(14px,2vw,24px);justify-content:center;align-items:start}
.phones .phone{--pw:230px}
.phones figure{margin:0;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;min-width:0}
.phones figure .phone{width:100%}
.phones figcaption{font-size:.9rem;color:var(--sage)}

/* quote */
blockquote.big{margin:0;font-family:var(--display);font-size:var(--step-3);line-height:1.08;color:inherit;text-wrap:balance}
.founder{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,56px);align-items:center}
.avatar{width:clamp(120px,16vw,180px);aspect-ratio:1;border-radius:50%;background:var(--rose);display:grid;place-items:center;font-family:var(--display);font-size:3.4rem;color:var(--emerald);box-shadow:0 0 0 6px var(--ivory),0 0 0 7.5px var(--gold);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
@media (max-width:640px){.founder{grid-template-columns:1fr}}

/* join */
.join-box{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:860px){.join-box{grid-template-columns:1fr}}
form.f{display:flex;flex-direction:column;gap:12px}
.f label{font-size:.84rem;font-weight:600}
.f input,.f textarea,.f select{width:100%;font:inherit;font-size:1rem;padding:14px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink)}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--emerald)}
.band .f input{border-color:transparent}
.band .f label{color:var(--ivory)}
.f .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:520px){.f .row{grid-template-columns:1fr}}
.f .err{color:#9B2C2C;font-size:.88rem}
.band .f .err{color:#FFD6CF}
.f .ok{font-family:var(--display);font-size:1.6rem;color:var(--emerald)}
.band .f .ok{color:var(--gold)}

/* page heads */
.page-head{padding-block:clamp(48px,8vw,104px) clamp(28px,4vw,56px)}
.page-head h1{font-size:var(--step-4);max-width:16ch}
.page-head .lead{max-width:56ch}

/* how page rows */
.howrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,90px);align-items:center;padding-block:clamp(36px,5vw,64px);border-top:1px solid var(--line)}

.howrow:nth-child(even) .txt{order:2}
.howrow .txt{display:flex;flex-direction:column;gap:14px;max-width:560px}
.howrow .k{font-family:var(--display);font-size:1.4rem;color:var(--gold-ink)}
.howrow h2{font-size:var(--step-3)}
.howrow .takes{font-style:italic;color:var(--sage);border-left:2px solid var(--gold);padding-left:14px}
.howrow .vis{display:grid;grid-template-columns:repeat(2,minmax(0,250px));gap:16px;justify-content:center}
.howrow .vis .phone{width:100%}
.howrow .vis .phone{--pw:250px}
@media (max-width:860px){.howrow{grid-template-columns:1fr}.howrow:nth-child(even) .txt{order:0}.howrow .vis{justify-content:center}.howrow .vis .phone{--pw:220px}}
ol.flow{margin:0;padding:0;list-style:none;counter-reset:f;display:flex;flex-direction:column;gap:14px}
ol.flow li{counter-increment:f;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start}
ol.flow li::before{content:counter(f);width:30px;height:30px;border-radius:50%;background:var(--emerald);color:var(--ivory);display:grid;place-items:center;font-weight:600;font-size:.85rem}
.states{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.state{padding:24px 20px 24px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px;min-width:0}
.state .k{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.state b{font-family:var(--display);font-weight:400;font-size:1.5rem;color:var(--emerald)}
.state dl{margin:0;display:grid;gap:4px;font-size:.92rem}
.state dt{font-weight:600}
.state dd{margin:0 0 6px;color:var(--sage)}
@media (max-width:860px){.states{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.states{grid-template-columns:1fr}}

/* people cards */
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;border-top:1px solid var(--line)}
.person{padding:30px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.person h3{font-family:var(--display);font-weight:400;font-size:1.7rem;line-height:1.12;color:var(--emerald)}
@media (max-width:860px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.people{grid-template-columns:1fr}}

/* tables */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:.95rem}
th,td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);font-weight:600;background:var(--ivory)}
tr:last-child td{border-bottom:0}
td b{color:var(--emerald)}
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.fig b{display:block;font-family:var(--display);font-weight:400;font-size:var(--step-3);line-height:1;color:var(--gold)}
.fig span{color:#CFE0DB;font-size:.94rem}
.paper .fig b{color:var(--emerald)}
.paper .fig span{color:var(--sage)}
@media (max-width:860px){.figs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;border-top:1px solid var(--line)}
.values > div{padding:26px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.values h3{font-family:var(--display);font-weight:400;font-size:1.6rem;color:var(--emerald)}
@media (max-width:760px){.values{grid-template-columns:1fr}}

/* faq */
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-family:var(--display);font-size:1.6rem;line-height:1.2;color:var(--emerald);position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:18px;font-family:var(--body);font-size:1.6rem;color:var(--gold-ink);transition:transform .3s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 24px;color:var(--sage);max-width:62ch}

/* journal */
.feature-post{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:32px;align-items:center;padding:clamp(28px,4vw,48px);border-radius:28px;background:var(--emerald);color:var(--ivory);text-decoration:none;transition:transform .35s var(--ease)}
.feature-post:hover{transform:translateY(-4px)}
.feature-post h2{font-size:var(--step-3)}
.feature-post p{color:#CFE0DB}
.feature-post .eyebrow{color:var(--gold)}
.feature-post .rm{color:var(--gold);font-weight:600}
.feature-post svg{width:100%;max-width:240px;margin-inline:auto;display:block}
@media (max-width:760px){.feature-post{grid-template-columns:1fr}.feature-post svg{display:none}}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px;border-top:1px solid var(--line)}
.post{padding:28px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px;text-decoration:none}
.post h3{font-family:var(--display);font-weight:400;font-size:1.7rem;line-height:1.12;color:var(--emerald);transition:color .2s}
.post:hover h3{color:var(--gold-ink)}
.post .rm{font-size:.88rem;font-weight:600;color:var(--emerald)}
@media (max-width:860px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.posts{grid-template-columns:1fr}}
.jgroup{display:flex;flex-direction:column;gap:18px;margin-top:clamp(48px,6vw,80px)}
.jgroup .hd{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap}
.jgroup .hd h2{font-size:var(--step-2)}

/* article */
.article{max-width:700px;margin-inline:auto;padding-block:clamp(36px,6vw,72px) clamp(56px,8vw,100px)}
.article .back{font-size:.9rem;text-decoration:none;color:var(--sage)}
.article .back:hover{color:var(--emerald)}
.article h1{font-size:var(--step-4);margin-block:14px 12px}
.article .byline{color:var(--sage);font-size:.92rem;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:8px}
.article h2{font-size:var(--step-2);margin-top:44px;margin-bottom:6px;color:var(--emerald)}
.article h3{margin-top:24px}
.article p,.article ul,.article ol{margin-block:14px;font-size:1.08rem;line-height:1.72}
.article ul,.article ol{padding-left:22px}
.article li{margin-block:8px}
.article li b{color:var(--emerald)}
.article .toc{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px 22px;margin-block:26px}
.article .toc ol{margin:8px 0 0;color:var(--sage);font-size:1rem}
.article .howto{clear:both;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-block:22px}
.article .howto > div{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.article .howto span{width:30px;height:30px;border-radius:50%;background:var(--emerald);color:var(--ivory);display:grid;place-items:center;font-weight:600;font-size:.85rem}
.article .howto b{color:var(--emerald)}
.article .howto p{margin:0;font-size:.95rem;color:var(--sage);line-height:1.5}
@media (max-width:620px){.article .howto{grid-template-columns:1fr}}
blockquote.pull{margin:34px 0;padding-left:20px;border-left:3px solid var(--gold);font-family:var(--display);font-size:1.9rem;line-height:1.2;color:var(--emerald)}
.cta-box{background:var(--emerald);color:var(--ivory);border-radius:24px;padding:clamp(24px,4vw,36px);display:flex;flex-direction:column;gap:12px;margin-block:36px}
.cta-box h3{font-family:var(--display);font-weight:400;font-size:2rem;line-height:1.1}
.cta-box p{color:#CFE0DB!important;margin:0!important}
.related{color:var(--sage)}
.related a{color:var(--emerald)}
.article-clip{float:right;margin:6px 0 16px 28px;width:200px}
.article-clip .phone{--pw:200px}
.article-clip p{font-size:.84rem!important;color:var(--sage);text-align:center;margin:10px 0 0!important;line-height:1.4!important}
@media (max-width:700px){.article-clip{float:none;margin:20px auto}}

/* legal */
.legal{max-width:800px;margin-inline:auto;padding-inline:20px;padding-block:clamp(36px,6vw,72px) clamp(56px,8vw,100px)}
.legal h1{font-size:var(--step-3);margin-block:10px 8px}
.legal h2{font-family:var(--body);font-weight:600;font-size:1.25rem;margin-top:34px;color:var(--emerald)}
.legal p,.legal li{font-size:1rem;line-height:1.7;margin-block:10px}
.legal ul{padding-left:22px}
.draft{background:#FBF1D9;border:1px solid #EAD39A;color:var(--gold-ink);border-radius:14px;padding:12px 16px;font-size:.92rem}

/* footer */
footer{background:var(--emerald-deep);color:#CFE0DB;padding-block:72px 40px}
footer .grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
footer .logo{color:var(--ivory)}
footer h4{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:12px}
footer a{display:block;text-decoration:none;padding-block:4px;color:#CFE0DB;font-size:.95rem}
footer a:hover{color:var(--ivory)}
footer .tagline{font-family:var(--display);font-size:1.6rem;color:var(--ivory);line-height:1.2}
footer .legal-line{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:.84rem}
@media (max-width:860px){footer .grid{grid-template-columns:1fr 1fr}footer .grid > :first-child{grid-column:span 2}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* how rows inside the green band */
.band .howrow{border-top-color:rgba(255,255,255,.14)}
.band .howrow:first-child{border-top:0;padding-top:0}
.band .howrow .k{color:var(--gold)}
.band .howrow h3.h2{font-family:var(--display);font-weight:400;font-size:var(--step-3);line-height:1.04;color:var(--ivory)}
.band .howrow .lead{color:#CFE0DB}
.band .howrow .takes{color:#A9C7BF;border-left-color:var(--gold)}

.panel.dark{background:var(--emerald);border-color:var(--emerald);color:#D7E6E1;box-shadow:0 30px 50px -36px rgba(14,58,52,.7)}
.panel.dark h3{color:var(--gold)}
.panel.dark .ticks b{color:var(--ivory)}
.panel.dark .ticks li::before{border-color:var(--gold)}

.phone-in{display:flex;align-items:stretch;border-radius:14px;background:var(--paper);overflow:hidden;border:1.5px solid transparent}
.phone-in:focus-within{border-color:var(--gold)}
.phone-in span{display:grid;place-items:center;padding:0 14px;font-weight:600;color:var(--emerald);border-right:1px solid var(--line)}
.phone-in input{border:0!important;border-radius:0!important}

/* emerald cards */
.scene{background:var(--emerald);border-color:var(--emerald);box-shadow:0 24px 40px -32px rgba(14,58,52,.8)}
.scene .when{color:var(--gold)}
.scene h3{color:var(--ivory)}
.scene p{color:#CFE0DB}
.jstep{background:var(--emerald);border-color:var(--emerald)}
.jstep b{color:var(--ivory)}
.jstep span{color:#CFE0DB}
.jstep.gap{background:transparent;border:1.5px dashed var(--emerald)}
.jstep.gap b{color:var(--gold-ink)}
.jstep.gap span{color:var(--sage)}
.truths.dark{border-top:0;gap:16px}
.truths.dark .truth{background:var(--emerald);border:0;border-radius:20px;padding:24px 24px 26px;box-shadow:0 24px 40px -32px rgba(14,58,52,.8)}
.truths.dark .n{color:var(--gold)}
.truths.dark h3{color:var(--ivory)}
.truths.dark .feel{color:#B9D3CB}
.truths.dark .fix{color:#E3EEEA}
.truths.dark .fix b{color:var(--gold)}

/* emerald people cards (Who it's for) */
.people{border-top:0;gap:18px}
.person{background:var(--emerald);border:0;border-radius:20px;padding:26px 26px 28px;box-shadow:0 24px 40px -32px rgba(14,58,52,.8)}
.person .eyebrow{color:var(--gold)}
.person h3{color:var(--ivory)}
.person .muted{color:#CFE0DB}
.legal .tbl{overflow-x:auto;margin-block:16px;border:1px solid rgba(14,77,69,.15);border-radius:14px}
.legal table{border-collapse:collapse;width:100%;font-size:.94rem;min-width:520px}
.legal th,.legal td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid rgba(14,77,69,.1);line-height:1.55}
.legal th{background:rgba(14,77,69,.06);color:var(--emerald);font-weight:600}
.legal tr:last-child td{border-bottom:0}
.soon{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 9px;border-radius:999px;background:#FBF1D9;border:1px solid #EAD39A;color:var(--gold-ink);font-family:var(--body);font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;white-space:nowrap}
.logo img{display:block;height:56px;width:auto;margin-block:-6px}
footer .logo img{height:64px;margin-block:0}
@media (max-width:640px){.logo img{height:48px}}
nav.main a,.top .actions .btn{white-space:nowrap}
@media (max-width:1240px){nav.main a{padding:8px 9px;font-size:.9rem}.logo img{height:50px}}
@media (max-width:1100px){.top .wrap{gap:12px}nav.main a{padding:8px 6px;font-size:.86rem}.logo img{height:44px}.top .actions .btn{padding-inline:14px;font-size:.88rem}}
.shortname{display:flex;align-items:center;gap:18px;margin-top:6px}
.shortname img{width:112px;height:112px;flex:none}
.shortname p{display:flex;flex-direction:column;margin:0;line-height:1.1}
.shortname span{font-size:.95rem;color:#CFE0DB}
.shortname b{font-family:var(--display);font-weight:400;font-style:italic;font-size:2.6rem;color:var(--gold)}
footer .aka{margin:0;font-size:.9rem;color:#9FBDB6}
/* The idea: three acts */
.idea{background:var(--ivory)}
.act{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(28px,4vw,48px);border-top:1px solid var(--line)}
.sec-head + .act{border-top:0;padding-top:0}
.act.flip .act-txt{order:2}
.act-txt{display:flex;flex-direction:column;gap:16px}
.act-k{font-family:var(--display);font-size:1.35rem;color:var(--gold-ink)}
.pointers{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.pointers li{position:relative;padding-left:26px;font-size:1.05rem;line-height:1.55;color:var(--ink)}
.pointers li::before{content:"";position:absolute;left:2px;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px #F6EBCB}
.act-vis{display:grid;grid-template-columns:repeat(2,minmax(0,210px));gap:clamp(14px,2vw,24px);justify-content:center;align-items:start}
.act-vis.three{grid-template-columns:repeat(3,minmax(0,190px))}
.act-vis figure{margin:0;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;min-width:0}
.act-vis figure .phone{width:100%}
.act-vis figcaption{font-size:.88rem;color:var(--sage)}
.wins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(28px,4vw,44px)}
.wins div{background:var(--emerald);color:var(--ivory);border-radius:20px;padding:20px 20px 22px;display:flex;flex-direction:column;gap:6px}
.wins b{font-family:var(--display);font-weight:400;font-size:1.35rem;color:var(--gold)}
.wins span{font-size:.95rem;color:#CFE0DB;line-height:1.45}
.turn.center{text-align:center;margin-top:clamp(24px,3vw,36px)}
@media (max-width:900px){
  .act{grid-template-columns:1fr}
  .act.flip .act-txt{order:0}
  .act-vis,.act-vis.three{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;justify-content:flex-start;gap:14px;padding-bottom:6px;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter)}
  .act-vis figure{flex:0 0 62%;scroll-snap-align:center}
  .wins{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.act-txt h3{font-family:var(--display);font-weight:400;font-size:clamp(1.75rem,2.8vw,2.45rem);line-height:1.12;color:var(--ink);margin:0}
@media (max-width:900px){.act-vis figure{flex-basis:58%}}
/* moment cards: symbol in the corner */
.scene{position:relative}
.scene .ico{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:1.35rem;background:rgba(250,247,240,.1);border:1px solid rgba(212,174,82,.45)}
.scene .when{padding-right:56px}
/* five steps strip */
.steps5{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:none}
.steps5 li{background:rgba(250,247,240,.06);border:1px solid rgba(212,174,82,.3);border-radius:20px;padding:20px 18px 22px;display:flex;flex-direction:column;gap:6px;color:#CFE0DB;font-size:.95rem;line-height:1.45}
.steps5 span{font-family:var(--display);font-size:2rem;line-height:1;color:var(--gold)}
.steps5 b{font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1.15;color:var(--ivory)}
.steps5 i.soon{font-style:normal;align-self:flex-start;margin:4px 0 0}
@media (max-width:900px){.steps5{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps5{grid-template-columns:1fr}}
/* two sides, mirrored */
.mirror{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);gap:14px 0;max-width:1000px;margin-inline:auto;align-items:stretch}
.m-head{font-family:var(--display);font-size:1.6rem;padding:0 22px 6px;color:var(--emerald)}
.m-head.you{text-align:right}
.m-head.them{color:var(--gold-ink)}
.m-l,.m-r{display:flex;flex-direction:column;gap:6px;padding:20px 24px;border-radius:20px;color:var(--sage);font-size:.98rem;line-height:1.5}
.m-l{background:#fff;border:1px solid var(--line);text-align:right;border-top-right-radius:6px;border-bottom-right-radius:6px}
.m-r{background:var(--emerald);color:#CFE0DB;border-top-left-radius:6px;border-bottom-left-radius:6px}
.m-l b{color:var(--emerald);font-size:1.05rem}
.m-r b{color:var(--ivory);font-size:1.05rem}
.m-c{display:grid;place-items:center;font-size:1.5rem;position:relative}
.m-c::before{content:"";position:absolute;inset:0 50%;border-left:1px dashed #D9CBA6}
.m-c{z-index:0}
.m-c:not(:empty){text-shadow:none}
@media (max-width:760px){
  .mirror{grid-template-columns:1fr;gap:0}
  .m-head{display:none}
  .mirror>div:nth-child(3){display:none}
  .m-l{text-align:left;border-radius:20px 20px 6px 6px;margin-top:18px}
  .m-l::before{content:"You";font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
  .m-r::before{content:"Your celestials";font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
  .m-r{border-radius:6px 6px 20px 20px}
  .m-c{height:0;overflow:visible;font-size:1.2rem}
  .m-c::before{display:none}
}
.m-l .soon{align-self:flex-end;margin:2px 0 0}
.m-c span,.m-c{isolation:isolate}
.m-c::after{content:"";position:absolute;width:44px;height:44px;border-radius:50%;background:var(--paper);border:1px solid #E9DDBB;z-index:-1;top:50%;left:50%;transform:translate(-50%,-50%)}
@media (max-width:760px){.m-l .soon{align-self:flex-start}.m-c::after{display:none}}
@media (max-width:760px){.m-c{display:none}}
@media (max-width:520px){.steps5{grid-template-columns:1fr 1fr;gap:10px}.steps5 li{padding:16px 14px 18px;font-size:.88rem}.steps5 b{font-size:1.12rem}.steps5 li:last-child{grid-column:1/-1}}
section[id]{scroll-margin-top:70px}