/* The Ladder · PUBLIC landing page. Sells the transformation. Colours from the theme, layout fixed. */
html[data-kind="public"] body{overflow:auto;height:auto}
.lp{display:block}
.lp-want{margin-left:2px}
.btn.big{font-size:17px;padding:15px 28px}
.btn.huge{font-size:clamp(18px,2vw,24px);padding:20px 40px;margin:8px 0 18px}

/* hero */
.lp-hero{position:relative;min-height:calc(100vh - var(--sky));display:flex;align-items:center;overflow:hidden;isolation:isolate;padding:60px max(24px,6vw)}
.lp-hero-bg{position:absolute;inset:-4%;z-index:-2;background:center/cover no-repeat,var(--c-bg);animation:drift 40s ease-in-out infinite alternate}
.lp-hero-veil{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,color-mix(in oklab,var(--c-bg) 94%,transparent) 0%,color-mix(in oklab,var(--c-bg) 78%,transparent) 38%,color-mix(in oklab,var(--c-bg) 10%,transparent) 72%),
  linear-gradient(0deg,var(--c-bg) 0%,transparent 30%)}
.lp-hero-copy{max-width:780px}
.lp-hero .display{font-size:clamp(52px,8vw,124px)}
.lp-hero .lede{font-size:clamp(18px,1.6vw,23px);max-width:58ch}
.lp-hero .lede b{color:var(--c-bright)}
.lp-proof{display:flex;gap:10px 26px;flex-wrap:wrap;margin-top:8px;color:var(--ink2);font-size:15px}
.lp-proof b{color:var(--c-accent);font-weight:700}
.lp-scroll{position:absolute;left:50%;bottom:26px;width:26px;height:42px;border:2px solid var(--glass-line);border-radius:14px;transform:translateX(-50%)}
.lp-scroll span{position:absolute;left:50%;top:8px;width:4px;height:8px;border-radius:2px;background:var(--c-accent);transform:translateX(-50%);animation:wheel 1.8s infinite}
@keyframes wheel{to{transform:translate(-50%,14px);opacity:0}}

/* sections */
.lp-section{max-width:var(--max);margin:0 auto;padding:110px 24px 20px}
.lp-h2{font:700 clamp(36px,4.6vw,68px)/1.02 var(--sans);letter-spacing:-.03em;margin:12px 0 18px}
.lp-h2.big{font-size:clamp(44px,6vw,92px)}
.lp-center{text-align:center;max-width:900px;margin:0 auto 46px}
.lp-center .eyebrow{justify-content:center}
.lede.center{margin-left:auto;margin-right:auto}
.lp-split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.lp-split.reverse>:first-child{order:0}

.lp-pains{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.lp-pains li{display:flex;gap:18px;align-items:center;padding:18px 22px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-line);font-size:18px;backdrop-filter:blur(10px)}
.lp-pains span{font:700 14px var(--mono);color:var(--c-red);opacity:.85}

/* benefits */
.lp-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.lp-benefit{position:relative;border-radius:22px;overflow:hidden;min-height:360px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid var(--glass-line);box-shadow:var(--glow);isolation:isolate;transition:transform .35s,box-shadow .35s}
.lp-benefit:hover{transform:translateY(-6px);box-shadow:0 30px 70px -30px var(--c-magenta)}
.lb-art{position:absolute;inset:0;z-index:-2;background:var(--art) center/cover no-repeat;transition:transform .8s}
.lp-benefit:hover .lb-art{transform:scale(1.08)}
.lp-benefit::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,color-mix(in oklab,var(--c-bg) 96%,transparent) 0%,color-mix(in oklab,var(--c-bg) 70%,transparent) 45%,transparent 80%)}
.lb-body{padding:24px 26px}
.lb-body h3{font:700 28px/1.1 var(--sans);margin:0 0 8px;letter-spacing:-.01em}
.lb-body p{margin:0;color:var(--ink2);font-size:16px;line-height:1.55}

/* moves */
.lp-moves{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:m;position:relative}
.lp-moves::before{content:"";position:absolute;left:4%;right:4%;top:44px;height:2px;background:var(--grad);opacity:.5}
.lp-move{position:relative;padding:26px 24px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(12px)}
.lm-n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--grad);color:var(--c-bg);font:700 15px var(--mono);box-shadow:0 0 24px -4px var(--c-magenta);margin-bottom:16px}
.lp-move h3{font:700 22px/1.2 var(--sans);margin:0 0 8px}
.lp-move p{margin:0;color:var(--ink2);line-height:1.55}

/* your climb */
.lp-art-frame{aspect-ratio:1/1;border-radius:28px;background:center/cover no-repeat,var(--c-raised);box-shadow:var(--glow),0 40px 100px -50px var(--c-magenta)}
.lp-checks{list-style:none;padding:0;margin:14px 0 0}
.lp-checks li{position:relative;padding:12px 0 12px 38px;font-size:17px;border-top:1px solid var(--glass-line)}
.lp-checks li:first-child{border-top:none}
.lp-checks li::before{content:"✓";position:absolute;left:0;top:10px;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:color-mix(in oklab,var(--c-green) 22%,transparent);color:var(--c-green);font-weight:700}

/* what it is not */
.lp-nots{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.lp-not{padding:26px;border-radius:20px;border:1px dashed var(--glass-line);text-align:center}
.lp-not s{display:block;font:600 22px var(--sans);color:var(--ink3);text-decoration-color:var(--c-red);text-decoration-thickness:3px;margin-bottom:8px}
.lp-not span{color:var(--ink);font-size:16px}

/* investment */
.lp-invest{max-width:880px;margin:0 auto;padding:44px 48px;text-align:left;border-color:color-mix(in oklab,var(--c-yellow) 35%,transparent);box-shadow:0 0 0 1px color-mix(in oklab,var(--c-yellow) 15%,transparent),0 30px 90px -50px var(--c-yellow)}
.lp-invest .lede{max-width:none}

/* final CTA */
.lp-final{position:relative;margin:110px auto 0;min-height:78vh;display:grid;place-items:center;overflow:hidden;isolation:isolate;padding:80px 24px;text-align:center}
.lp-final-bg{position:absolute;inset:0;z-index:-2;background:center/cover no-repeat,var(--c-bg)}
.lp-final-veil{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at center,color-mix(in oklab,var(--c-bg) 55%,transparent) 0%,color-mix(in oklab,var(--c-bg) 92%,transparent) 70%),linear-gradient(0deg,var(--c-bg),transparent 30%,transparent 70%,var(--c-bg))}
.lp-final-copy{max-width:820px}
.lp-final-copy .eyebrow{justify-content:center}
.lp-final .display.sm{font-size:clamp(46px,7vw,104px)}
.lp-email{display:flex;gap:10px;align-items:center;justify-content:center;color:var(--ink2);font-size:15px}
.lp-copy{font:600 16px var(--mono);color:var(--ink);background:var(--glass);border:1px solid var(--glass-line);border-radius:999px;padding:9px 16px;cursor:pointer}
.lp-copy:hover{border-color:var(--c-accent)}
.lp-copy i{font-style:normal;color:var(--c-accent);margin-left:6px}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.lp-benefit.reveal:nth-child(2),.lp-move.reveal:nth-child(2),.lp-not.reveal:nth-child(2){transition-delay:.08s}
.lp-benefit.reveal:nth-child(3),.lp-move.reveal:nth-child(3),.lp-not.reveal:nth-child(3){transition-delay:.16s}
.lp-benefit.reveal:nth-child(4),.lp-move.reveal:nth-child(4),.lp-not.reveal:nth-child(4){transition-delay:.24s}
.lp-benefit.reveal:nth-child(5){transition-delay:.32s}
.lp-benefit.reveal:nth-child(6){transition-delay:.4s}

@media (max-width:1100px){
  .lp-benefits{grid-template-columns:repeat(2,1fr)}
  .lp-moves{grid-template-columns:repeat(2,1fr)}
  .lp-moves::before{display:none}
  .lp-nots{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .lp-split{grid-template-columns:1fr;gap:30px}
  .lp-benefits,.lp-moves,.lp-nots{grid-template-columns:1fr}
  .lp-section{padding-top:70px}
  .lp-invest{padding:28px 24px}
  .lp-want,.skybar .btn.sm:not(.lp-want){padding:6px 10px;font-size:12px}
  html[data-kind="public"] .skybar .member{display:none}
}
@media (max-width:520px){
  html[data-kind="public"] .skybar .lp-want{display:none}
}

/* the spine line: one plain sentence under the headline */
.lp-spine{font-weight:700;color:var(--c-bright);margin:0 0 8px;font-size:clamp(19px,1.9vw,26px)}

/* secondary: hiring Fred. Smaller and quieter than the DIY button above it, on purpose */
.lp-new{margin:10px 0 0;color:var(--ink2);font-size:15px}
.lp-new a{color:var(--c-accent);font-weight:600}
.lp-signin{margin-top:4px;font-size:14px}
.lp-hire{max-width:640px;margin:38px auto 0;padding:22px 28px;text-align:center;border-radius:18px}
.lp-hire .eyebrow{justify-content:center}
.lp-hire p{margin:10px 0 16px;color:var(--ink2);font-size:15px;line-height:1.55}
.lp-hire .lp-email{margin-top:12px}

/* Fred's idea under 'Then it takes off': the first project is the recipe, not the goal */
.lp-move .lp-note{margin:12px 0 0;color:var(--c-bright);font-weight:600;line-height:1.5}