/* planz.ae page layout. Colours, type, radii and components come from ds.css; the app screens from app.css. */
html{scroll-padding-top:84px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--font-sans);overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3,h4,h5,h6,p{margin:0}
h1,h2,h3{font-weight:600;text-wrap:balance}
h1{font-size:clamp(44px,6vw,84px);line-height:.95;letter-spacing:-.045em}
h2{font-size:clamp(30px,3.6vw,44px);line-height:1.08;letter-spacing:-.03em}
h3{font-size:clamp(19px,1.5vw,21px);line-height:1.2;letter-spacing:-.02em}
.lede{margin-top:var(--space-4);max-width:52ch;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--ink-2)}
.wrap{width:min(1200px,calc(100% - 48px));margin-inline:auto}
.honey{position:absolute;left:-9999px;opacity:0}
[hidden]{display:none!important}

/* nav */
.pz-nav{position:fixed;top:0;left:0;right:0;z-index:20;padding-inline:max(24px,calc((100% - 1200px) / 2));border-bottom-color:transparent;transition:border-color .25s}
.pz-nav.scrolled{border-bottom-color:var(--line)}

/* hero: the group chat everyone knows, next to the promise */
.hero{padding-block:calc(68px + var(--space-7)) var(--space-8)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:var(--space-8);align-items:center}
.hero h1{max-width:12ch}
.hero .lede{max-width:40ch}
.ctas{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.hero__phone{position:relative}
.hero__phone .phone{--z:.72}
.hero h1 mark{background:linear-gradient(transparent 56%,var(--lime) 56% 90%,transparent 90%);color:inherit;padding:0 .04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* activities strip: the one marquee on the page */
.acts{padding-block:var(--space-6) var(--space-7);overflow:hidden}
.acts__lead{width:min(1200px,calc(100% - 48px));margin:0 auto var(--space-4);font:600 13px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.acts__track{display:flex;width:max-content;animation:acts 90s linear infinite}
.acts__track:hover{animation-play-state:paused}
.acts ul{display:flex;margin:0;padding:0;list-style:none}
.acts li{display:flex;align-items:center;gap:var(--space-5);padding-right:var(--space-5);font:600 clamp(26px,3vw,40px)/1.2 var(--font-sans);letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.acts__dot{width:.3em;height:.3em;border-radius:50%;background:var(--blue)}
.acts li:nth-child(3n) .acts__dot{background:var(--lime-ink)}
@keyframes acts{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.acts__track{animation:none}.lock__mark svg{transition:none}}

/* how a nudge becomes a plan: stage list on the left, one app panel on the right */
.flow{padding-block:var(--space-9)}
.flow h2{max-width:20ch}
.flow__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-7);align-items:center;margin-top:var(--space-7)}
.flow__steps{display:grid;gap:var(--space-2)}
.flow__hint{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-3) var(--space-1);font:500 14px/1 var(--font-sans);color:var(--blue-press)}
.flow__hint .pz-ic{width:18px;height:18px}
.flow__step{position:relative;display:grid;grid-template-columns:36px 1fr 24px;gap:var(--space-4);align-items:start;padding:var(--space-4) var(--space-4) var(--space-5) var(--space-5);border:0;border-radius:var(--radius-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font:inherit;color:inherit;text-align:left;cursor:pointer;transition:box-shadow .2s,transform .2s cubic-bezier(.2,.8,.2,1),background .2s}
.flow__step:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line-strong),0 10px 24px -14px rgba(9,23,50,.35)}
.flow__step:active{transform:scale(.99)}
.flow__step[aria-selected="true"]{box-shadow:inset 0 0 0 2px var(--blue-press),var(--shadow-card);transform:none}
.flow__go{align-self:center;width:24px;height:24px;display:grid;place-items:center;color:var(--ink-3);transition:transform .2s cubic-bezier(.2,.8,.2,1),color .2s}
.flow__go .pz-ic{width:18px;height:18px}
.flow__step:hover .flow__go{transform:translateX(3px);color:var(--blue-press)}
.flow__step[aria-selected="true"] .flow__go{color:var(--blue-press)}
.flow__n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue-press);font-weight:600;font-size:15px;transition:background .25s,color .25s}
.flow__step[aria-selected="true"] .flow__n{background:var(--blue-press);color:#fff}
.flow__step[data-stage="locked"][aria-selected="true"] .flow__n{background:var(--lime);color:var(--lime-ink)}
.flow__t b{display:block;font-size:19px;line-height:1.25;letter-spacing:-.02em;font-weight:600;padding-top:5px}
.flow__t span{display:block;margin-top:4px;font-size:16px;line-height:1.45;color:var(--ink-2)}
.flow__step:not([aria-selected="true"]) .flow__t span{display:none}
.flow__bar{position:absolute;left:var(--space-5);right:var(--space-5);bottom:8px;height:2px;border-radius:2px;background:var(--line);overflow:hidden;opacity:0}
.flow__bar i{display:block;height:100%;width:0;background:var(--blue-press)}
.flow.playing .flow__step[aria-selected="true"] .flow__bar{opacity:1}
.flow.playing .flow__step[aria-selected="true"] .flow__bar i{animation:flowBar 5s linear forwards}
@keyframes flowBar{to{width:100%}}
.flow__panel{position:relative;display:grid;place-items:center;padding:var(--space-7) var(--space-5);border-radius:var(--radius-lg);overflow:hidden;background:var(--blue-soft);transition:background .5s ease}
.flow__panel[data-stage="locked"]{background:var(--lime)}
.flow__panel[data-stage="chat"]{background:var(--sunk)}
.flow__sheet{grid-area:1 / 1;width:300px;max-width:100%;opacity:0;transform:translateY(24px) scale(.98);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.flow__sheet.on{opacity:1;transform:none}

/* features: tabs of three-cell bentos with app pieces */
.features{padding-block:var(--space-9);border-top:1px solid var(--line)}
.seg{display:inline-flex;gap:4px;padding:4px;margin-top:var(--space-6);border-radius:var(--radius-pill);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.seg button{border:0;background:transparent;font:500 15px/1 var(--font-sans);color:var(--ink-2);padding:12px 20px;border-radius:var(--radius-pill);cursor:pointer;transition:background .2s,color .2s}
.seg button[aria-selected="true"]{background:var(--ink);color:var(--on-ink)}
.bento{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"a b" "a c";grid-template-rows:auto auto;gap:var(--space-5);margin-top:var(--space-5)}
.cell{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:var(--space-6) var(--space-6) 0;display:flex;flex-direction:column;gap:var(--space-5)}
.cell--a{grid-area:a}
.cell--a .cell__vis{padding-bottom:var(--space-6)}.cell--b{grid-area:b}.cell--c{grid-area:c}
.tone-blue{background:var(--blue-soft)}.tone-sunk{background:var(--sunk)}.tone-lime{background:var(--lime)}.tone-surface{background:var(--surface);box-shadow:var(--shadow-card)}
.cell__txt{max-width:40ch}
.cell__txt p{margin-top:6px;font-size:16px;line-height:1.45;color:var(--ink-2)}
.cell__vis{flex:1;min-height:0;display:flex;justify-content:center;align-items:flex-start}
.cell__vis:has(.shot-crop){align-items:center;padding-bottom:var(--space-6)}
.cell .shot-screen{max-width:300px}
.cell .shot-crop{max-width:380px}

/* the lock band */
.lock{background:var(--lime);padding-block:var(--space-9)}
.lock__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--space-8);align-items:center}
.lock h2{font-size:clamp(36px,5.4vw,72px);line-height:1;letter-spacing:-.04em;max-width:14ch}
.lock .lede{grid-column:1;color:var(--ink);max-width:44ch}
.lock__mark{grid-column:2;grid-row:1 / span 2;width:clamp(120px,14vw,180px)}
.lock__mark svg{display:block;width:100%;overflow:visible}
.lock__mark svg{transform:translateY(12%) scale(.85);transition:transform .9s cubic-bezier(.34,1.6,.5,1) .15s}
.lock.locked .lock__mark svg{transform:none}

/* faq */
.faq{padding-block:var(--space-9);border-top:1px solid var(--line)}
.faq__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--space-8)}
.faq .lede a{color:var(--blue-press)}
.pz-faq{max-width:none}

/* join: the one ink band */
.join{background:var(--ink);color:var(--on-ink);padding-block:var(--space-9)}
.join__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8);align-items:center}
.join h2{color:var(--on-ink);max-width:14ch}
.join .lede{color:var(--on-ink-2)}
.join .pz-join{max-width:none}
.join .pz-btn:focus-visible{outline-color:var(--focus-on-ink)}

/* footer */
.foot{padding-block:var(--space-6);font-size:14px;color:var(--ink-2)}
.foot__grid{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6)}
.foot__grid p{margin-right:auto}
.foot nav{display:flex;gap:var(--space-5)}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink);text-decoration:underline}

/* laptops */
@media (max-width:1180px){
}
/* phones and small tablets */
@media (max-width:899px){
  .wrap{width:calc(100% - 32px)}
  .pz-nav{padding-inline:16px}
  .pz-nav__links a:not(.pz-btn){display:none}
  .hero{padding-block:calc(68px + var(--space-6)) var(--space-7)}
  .hero__grid{grid-template-columns:1fr;gap:var(--space-6)}
  .hero__phone{display:flex;justify-content:center}
  .hero__phone .phone{--z:.72}
  .ctas .pz-btn--quiet{display:none}
  .flow,.lock,.features,.faq,.join{padding-block:var(--space-8)}
  .flow__grid{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
  .flow__steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow__step{grid-template-columns:28px 1fr 16px;gap:var(--space-2);align-items:center;padding:var(--space-3)}
  .flow__go{width:16px;height:16px}
  .flow__go .pz-ic{width:14px;height:14px}
  .flow__n{width:28px;height:28px;font-size:13px}
  .flow__t b{font-size:15px;padding-top:0}
  .flow__step .flow__t span{display:none}
  .flow__bar{left:var(--space-3);right:var(--space-3);bottom:5px}
  .flow__panel{padding:var(--space-5) var(--space-3)}
  .flow__sheet{width:260px}
  .seg{display:flex}
  .seg button{flex:1;padding:12px 8px}
  .bento{grid-template-columns:1fr;grid-template-areas:"a" "b" "c";grid-template-rows:none}
  .cell{padding:var(--space-5) var(--space-5) 0}
  .cell--b,.cell--c{padding-bottom:var(--space-5)}
  .cell .shot-screen{max-width:280px}
  .cell .shot-screen{max-width:300px}
  .lock__grid{grid-template-columns:1fr;row-gap:var(--space-5)}
  .lock__mark{grid-column:1;grid-row:auto;width:88px;order:-1}
  .faq__grid,.join__grid{grid-template-columns:1fr;gap:var(--space-6)}
  .pz-join__row{flex-direction:column}
  .pz-join input{flex:none;width:100%}
  .pz-join .pz-btn{width:100%}
}