/* LIVE BY MORNING — site styles. Values come from ../tokens.css. One typeface, two colours, one image. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@view-transition{navigation:auto}
::view-transition-old(root){animation:220ms var(--lbm-ease) both vt-out}
::view-transition-new(root){animation:320ms var(--lbm-ease) both vt-in}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
body{margin:0;background:var(--lbm-paper);color:var(--lbm-ink);font-family:var(--lbm-sans);font-size:clamp(17px,1.6vw,19px);line-height:1.5;font-feature-settings:"ss01","cv11","tnum"}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .2s}
a:hover{text-decoration-color:transparent}
img{display:block;max-width:100%}
h1,h2,h3,p,ol,ul,dl,figure{margin:0}
::placeholder{color:var(--lbm-ink-soft);opacity:.8}
:focus-visible{outline:2px solid var(--lbm-ink);outline-offset:3px}

/* type roles (Inter only) */
.promise-a{font-weight:500;letter-spacing:-.02em}
.promise-b{font-weight:800;letter-spacing:-.045em}
.stamp{font-weight:800;letter-spacing:-.03em;font-size:20px;line-height:1}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--lbm-ink-soft);margin-bottom:28px}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;padding:18px var(--lbm-gutter);position:absolute;inset:0 0 auto 0;z-index:3;color:var(--lbm-paper);animation:fade-down 1s var(--lbm-ease) both .6s}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;letter-spacing:-.01em;font-size:17px}
.mark{width:22px;height:22px;fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linecap:square}
.mark path:first-child{stroke:none}
@keyframes fade-down{from{opacity:0;transform:translateY(-6px)}}

/* ============ the sky: night, then the dawn rises once ============ */
.sky{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;background:var(--lbm-night);color:var(--lbm-paper);padding:calc(56px + 4vh) var(--lbm-gutter) 6vh;display:grid;align-items:center}
.dawn{position:absolute;inset:0;z-index:-3;background:var(--lbm-sky);background-repeat:no-repeat;background-size:100% 260%;background-position:0 0;opacity:1;animation:skyrise var(--lbm-dawn-time) cubic-bezier(.35,.4,.25,1) both .2s}
@keyframes skyrise{from{background-size:100% 260%}to{background-size:100% 100%}}
@keyframes dawn{to{opacity:1}}
.sun{position:absolute;z-index:-2;left:50%;bottom:-1px;width:min(70vmin,520px);aspect-ratio:1;border-radius:50%;background:var(--lbm-paper);opacity:.96;transform:translate(-50%,100%);animation:sunrise var(--lbm-dawn-time) cubic-bezier(.35,.4,.25,1) both .6s;mix-blend-mode:soft-light}
.sun::before{content:"";position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle,rgba(255,215,140,.55) 0%,rgba(255,215,140,0) 60%);animation:glow var(--lbm-dawn-time) var(--lbm-ease) both .4s}
@keyframes glow{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.dawn::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(255,215,140,.35));opacity:0;animation:dawn var(--lbm-dawn-time) var(--lbm-ease) both 1s}
@keyframes sunrise{to{transform:translate(-50%,30%)}}
@media(min-width:960px){@keyframes sunrise{to{transform:translate(-50%,42%)}}}
.horizon{position:absolute;z-index:-1;left:0;right:0;bottom:0;height:1px;background:var(--lbm-paper);opacity:.5;transform:scaleX(0);transform-origin:left;animation:draw 1.6s var(--lbm-ease) both 1.2s}
@keyframes draw{to{transform:scaleX(1)}}
.sky-grid{display:grid;gap:28px;max-width:1200px;width:100%;margin:0 auto;align-content:center}
@media(min-width:960px){.sky-grid{grid-template-columns:1.1fr .9fr;align-items:center;gap:72px}.sky .ask{justify-self:end}}
.promise{display:grid;gap:.04em;max-width:10ch;line-height:.98;font-size:clamp(40px,7.6vw,104px)}
.promise>span{animation:rise 1.1s var(--lbm-ease) both}
.promise-a{animation-delay:.5s}
.promise-b{animation-delay:.75s}
@keyframes rise{from{opacity:0;transform:translateY(.35em)}}
.ask{display:grid;gap:14px;width:100%;max-width:480px;color:var(--lbm-ink);background:var(--lbm-paper);padding:clamp(18px,3vw,32px);animation:rise 1.1s var(--lbm-ease) both 1.1s}
.ask-lead{font-size:clamp(16px,1.4vw,18px);max-width:40ch;margin-bottom:4px;font-weight:500;letter-spacing:-.01em}
.field{display:grid;gap:6px;position:relative}
.field>span:first-child{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.field input,.field select,.field textarea{font:inherit;font-size:17px;color:var(--lbm-ink);background:var(--lbm-paper);border:1px solid var(--lbm-ink);border-radius:var(--lbm-radius);padding:14px 16px;width:100%;outline:none;transition:box-shadow .2s var(--lbm-ease),transform .2s var(--lbm-ease)}
.ask .field input{background:#fff0}
.field input:focus,.field textarea:focus{box-shadow:inset 0 -3px 0 var(--lbm-ink)}
.go{position:relative;overflow:hidden;isolation:isolate;font:inherit;font-size:17px;font-weight:600;color:var(--lbm-paper);background:var(--lbm-ink);border:1px solid var(--lbm-ink);border-radius:var(--lbm-radius);padding:16px 24px;cursor:pointer;text-align:center;text-decoration:none;display:block;width:100%;letter-spacing:-.01em;min-height:56px;transition:color .25s var(--lbm-ease)}
.go::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--lbm-paper-deep);transform:translateY(101%);transition:transform .35s var(--lbm-ease)}
.go:hover,.go:focus-visible{color:var(--lbm-ink)}
.go:hover::before,.go:focus-visible::before{transform:translateY(0)}
.go span{position:relative}
.ask-fine{font-size:13px;color:var(--lbm-ink-soft)}

.step{display:grid;gap:14px}
.step[hidden]{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ask-err{font-size:14px;color:var(--lbm-ink);font-weight:500}
.go:disabled{opacity:.6;cursor:wait}

/* ============ sections and reveals ============ */
main>section:not(.sky){padding:clamp(56px,9vw,120px) var(--lbm-gutter);max-width:1200px;margin:0 auto;position:relative}
main>section:not(.sky)::before{content:"";position:absolute;left:var(--lbm-gutter);right:var(--lbm-gutter);top:0;height:1px;background:var(--lbm-ink);opacity:.14;transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--lbm-ease)}
.reveal.in::before{transform:scaleX(1)}
.reveal>*{opacity:0;transform:translateY(18px);transition:opacity .8s var(--lbm-ease),transform .8s var(--lbm-ease)}
.reveal.in>*{opacity:1;transform:none}
.reveal.in>*:nth-child(2){transition-delay:.1s}.reveal.in>*:nth-child(3){transition-delay:.2s}.reveal.in>*:nth-child(4){transition-delay:.3s}

/* sites we have built: a full-bleed strip of phones, each slowly scrolling its site */
.built{padding-left:0!important;padding-right:0!important;max-width:none!important}
.built .eyebrow,.built-next{padding:0 var(--lbm-gutter);max-width:1200px;margin-left:auto;margin-right:auto}
.built::before{left:var(--lbm-gutter);right:var(--lbm-gutter)}
.strip{overflow:hidden;width:100%;padding:16px 0 56px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;gap:clamp(18px,3vw,36px);width:max-content;padding:0 var(--lbm-gutter)}
.track.loop{animation:marquee 70s linear infinite}
.strip:hover .track.loop{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.ph{display:grid;gap:12px;justify-items:start;flex:none;transform:translateY(var(--o))}
.ph-screen{width:clamp(200px,24vw,260px);aspect-ratio:390/760;border:1px solid var(--lbm-ink);background:var(--lbm-paper-deep);overflow:hidden;position:relative}
.ph-screen img{width:100%;height:auto;animation:peek var(--d) ease-in-out infinite alternate}
@keyframes peek{from{transform:translateY(0)}to{transform:translateY(calc(-100% + 100cqh))}}
.ph-screen{container-type:size}
.ph-live iframe{width:390px;height:760px;border:0;transform:scale(calc(clamp(200px,24vw,260px) / 390px));transform-origin:top left;pointer-events:none;display:block}
.ph figcaption{font-size:13px;color:var(--lbm-ink-soft)}
.built-next{display:grid;gap:20px;margin-top:40px}
.built-next p{font-size:clamp(22px,2.6vw,32px);font-weight:600;letter-spacing:-.025em;line-height:1.1;max-width:22ch}
.built .reveal>*{transition-delay:0s}

/* how it works: the day line */
.day{position:relative;height:56px;margin:0 0 20px}
.day-line{position:absolute;left:0;right:0;top:28px;height:1px;background:var(--lbm-ink);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--lbm-ease) .2s}
.day-sun{position:absolute;top:19px;left:0;width:18px;height:18px;border-radius:50%;background:var(--lbm-ink);transition:left 1.6s var(--lbm-ease) .2s;margin-left:-9px}
.reveal.in .day-line{transform:scaleX(1)}
.reveal.in .day-sun{left:100%}
.day-t{position:absolute;top:40px;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--lbm-ink-soft)}
.day-t-0{left:0}.day-t-1{left:50%;transform:translateX(-50%)}.day-t-2{right:0}
.steps{list-style:none;padding:0;display:grid}
.steps li{display:grid;grid-template-columns:56px 1fr;gap:12px;padding:24px 0;border-top:1px solid var(--lbm-line)}
.steps li:last-child{border-bottom:1px solid var(--lbm-line)}
.steps .n{font-size:13px;font-weight:600;letter-spacing:.1em;padding-top:8px;color:var(--lbm-ink-soft)}
.steps b{display:block;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;line-height:1.15;margin-bottom:6px;font-weight:600}
.steps p{max-width:52ch;color:var(--lbm-ink-soft)}

/* price */
.price-grid{display:grid;gap:32px;grid-template-columns:1fr;align-items:end}
@media(min-width:760px){.price-grid{grid-template-columns:auto 1fr;gap:64px}}
.price-big{display:flex;align-items:baseline;gap:10px;line-height:.9}
.price-big .was{font-size:clamp(22px,2.6vw,32px);font-weight:500;color:var(--lbm-ink-soft);text-decoration:line-through;text-decoration-thickness:1px}
.kv s{color:var(--lbm-ink-soft);font-weight:400;margin-right:6px}
.price-big .num{font-size:clamp(96px,14vw,160px);font-weight:800;letter-spacing:-.06em;min-width:2.2ch}
.price-big .cur{font-size:clamp(20px,2.4vw,28px);font-weight:500;letter-spacing:.02em;color:var(--lbm-ink-soft)}
.price-calc{display:grid}
.price-calc div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--lbm-line)}
.price-calc div:last-child{border-bottom:1px solid var(--lbm-line)}
.price-calc dt{font-weight:500}
.price-calc dd{margin:0;color:var(--lbm-ink-soft);text-align:right}
.price-notes{margin-top:32px;display:grid;gap:12px;max-width:60ch;color:var(--lbm-ink-soft)}
.price-notes b{color:var(--lbm-ink);font-weight:600}

/* faq */
.faq details{border-top:1px solid var(--lbm-line)}
.faq details:last-of-type{border-bottom:1px solid var(--lbm-line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:500;font-size:clamp(17px,1.8vw,20px);display:flex;justify-content:space-between;gap:16px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;color:var(--lbm-ink-soft);transition:transform .3s var(--lbm-ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;max-width:56ch;color:var(--lbm-ink-soft);animation:rise .5s var(--lbm-ease) both}

/* closing */
.again{display:grid;gap:28px}
.again .promise-b{font-size:clamp(44px,8vw,96px);line-height:.95}
.go-link{max-width:520px}

/* footer */
.foot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:32px var(--lbm-gutter) 48px;border-top:1px solid var(--lbm-line);font-size:14px;color:var(--lbm-ink-soft);flex-wrap:wrap;max-width:1200px;margin:0 auto}
.foot .stamp{color:var(--lbm-ink)}

/* ============ inner pages (sent, claim, done) ============ */
.page{min-height:100svh;display:grid;grid-template-rows:auto 1fr}
.page .top{position:static;color:var(--lbm-ink);animation:none}
.page-body{padding:clamp(24px,6vw,72px) var(--lbm-gutter) 96px;max-width:620px;width:100%;margin:0 auto;display:grid;gap:28px;align-content:start}
.page-body>*{animation:rise .8s var(--lbm-ease) both}
.page-body>*:nth-child(2){animation-delay:.08s}.page-body>*:nth-child(3){animation-delay:.16s}.page-body>*:nth-child(4){animation-delay:.24s}.page-body>*:nth-child(5){animation-delay:.32s}
.page h1{font-weight:500;letter-spacing:-.025em;line-height:1.02;font-size:clamp(34px,5.4vw,56px)}
.page h1 .promise-b{display:block;font-size:clamp(44px,7vw,80px)}
.page p{max-width:52ch}
.page .muted{color:var(--lbm-ink-soft)}
.kv{display:grid}
.kv div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--lbm-line)}
.kv div:last-child{border-bottom:1px solid var(--lbm-line)}
.kv dt{color:var(--lbm-ink-soft)}
.kv dd{margin:0;text-align:right;font-weight:500;white-space:nowrap}
.kv .total dd,.kv .total dt{font-weight:600;color:var(--lbm-ink);font-size:1.15em}
.band{position:relative;overflow:hidden;background:var(--lbm-sky);color:var(--lbm-paper);padding:28px var(--lbm-gutter);margin:0 calc(-1 * var(--lbm-gutter))}
.band .promise-b{font-size:clamp(40px,6vw,64px);line-height:1}
.form{display:grid;gap:16px}
.hint{font-size:14px;color:var(--lbm-ink-soft);text-transform:none;letter-spacing:0;font-weight:400}
.ok{display:none}
.form.sent .form-live{display:none}
.form.sent .ok{display:grid;gap:12px;animation:rise .5s var(--lbm-ease) both}
.drop{border:1px dashed var(--lbm-ink);padding:22px 16px;text-align:center;color:var(--lbm-ink-soft);font-size:15px}
.clock{display:grid;gap:6px}
.clock .t{font-size:clamp(40px,6vw,56px);font-weight:800;letter-spacing:-.05em;line-height:1}
.clock .u{color:var(--lbm-ink-soft)}
.clock .u b{color:var(--lbm-ink);font-weight:600}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;transition-duration:0s!important}
  .reveal>*{opacity:1;transform:none}.reveal::before{transform:scaleX(1)}.reveal .day-line{transform:scaleX(1)}.reveal .day-sun{left:100%}.track{animation:none;overflow-x:auto}.ph-screen img{animation:none}
}