/*
 * Slidestory landing. Full-width bands, each on its own ground, so the sections read as separate scenes:
 * hero (open sky) > studio (tray) > why (deep ink) > demo (pale blue) > how (paper) > trust (white) > end (ultramarine).
 */
:root { --inv-bg: #0E1530; --inv-fg: #F2F4FA; --inv-dim: rgba(242, 244, 250, .24); --inv-line: rgba(242, 244, 250, .16); }
@media (prefers-color-scheme: dark) { :root { --inv-bg: #19236A; --inv-fg: #EEF1FC; --inv-dim: rgba(238, 241, 252, .26); --inv-line: rgba(238, 241, 252, .18); } }
html { scroll-padding-top: 68px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { padding-bottom: 0; }
.wrap { width: min(1120px, 100% - 2 * var(--gut)); margin-inline: auto; }
.band { position: relative; padding-block: clamp(56px, 9vw, 120px); }
.band-head { display: grid; gap: 10px; max-width: 60ch; }
.band-head h2 .ln { display: block; }
.band-head h2 { font: 700 clamp(30px, 4.6vw, 54px)/1.03 var(--display); font-variation-settings: "wdth" 92; letter-spacing: -.03em; text-wrap: balance; }
.band-head p { color: var(--ink-2); font-size: clamp(16px, 1.7vw, 18.5px); text-wrap: pretty; }
body[data-compact] .landing-only, body[data-compact] .studio-head { display: none !important; }

/* top bar */
.topbar { position: sticky; top: 0; z-index: 50; transition: background .3s, box-shadow .3s; }
.topbar.scrolled { background: color-mix(in srgb, var(--paper) 93%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.bar { padding-block: 12px; column-gap: 24px; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { padding: 9px 14px; border-radius: 999px; font: 600 14.5px/1 var(--sans); color: var(--ink-2); text-decoration: none; transition: background .2s, color .2s; }
.nav a:hover { background: var(--sunk); color: var(--ink); }
@media (max-width: 760px) { .nav { display: none; } .topbar { position: static; } html { scroll-padding-top: 14px; } }

/* hero: open sky over the aurora */
.hero { display: block; padding: clamp(32px, 7vw, 92px) 0 clamp(48px, 7vw, 96px); }
body[data-compact] .hero { padding: 20px 0 26px; }
.hero h1 { font-size: clamp(36px, 6.4vw, 80px); max-width: none; }
body[data-compact] .hero h1 { font-size: clamp(28px, 4vw, 46px); }
.hero h1 .ln { display: block; }
.hero h1 .ln:first-child { animation: forget 1.2s 1.7s var(--ease) forwards; }
@keyframes forget { to { color: color-mix(in srgb, var(--ink) 30%, transparent); } }
.hero-extra > div { gap: clamp(20px, 3vw, 30px); }
.lede { max-width: 58ch; margin-top: clamp(14px, 2.4vw, 26px); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; animation: rise .8s .65s var(--ease) both; }
.hero-cta .more { font: 600 15.5px/1 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 6px; text-decoration-thickness: 2px; transition: text-decoration-color .2s; }
.hero-cta .more:hover { text-decoration-color: var(--accent); }
.hero .art { margin-top: clamp(6px, 2vw, 22px); }

/* studio: a tray the working cards sit on */
.studio { background: var(--sunk); border-block: 1px solid var(--line); padding-block: clamp(40px, 6vw, 84px); }
body[data-compact] .studio { padding-block: 22px 40px; border-top-color: transparent; }
.studio .wrap { display: grid; gap: clamp(20px, 3vw, 32px); }

/* why: deep ink, a sentence that lights up as you read */
.why { background: var(--inv-bg); color: var(--inv-fg); overflow: hidden; }
.why::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(56% 56% at 90% 0%, rgba(125, 146, 255, .26), transparent 70%), radial-gradient(40% 44% at 0% 100%, rgba(255, 216, 74, .09), transparent 70%); }
.why .wrap { position: relative; display: grid; gap: clamp(40px, 7vw, 84px); }
.scrub { font: 600 clamp(25px, 3.9vw, 48px)/1.18 var(--display); font-variation-settings: "wdth" 94; letter-spacing: -.025em; max-width: 31em; text-wrap: pretty; }
.js .scrub .sw { color: var(--inv-dim); transition: color .45s var(--ease); }
.js .scrub .sw.lit { color: var(--inv-fg); }
.scrub mark { color: inherit; background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 94% / 0% .14em; padding: 0 0 .05em; border-radius: 0; transition: background-size .9s var(--ease); }
.scrub mark.on, html:not(.js) .scrub mark { background-size: 100% .14em; }
.contrast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 28px); }
.cx { display: grid; gap: 14px; align-content: start; padding: clamp(12px, 1.8vw, 20px); border-radius: 24px; background: rgba(255, 255, 255, .06); border: 1px solid var(--inv-line); }
.cx[data-k="story"] { background: rgba(255, 255, 255, .1); border-color: color-mix(in srgb, var(--mark) 55%, transparent); }
.cx svg { width: 100%; height: auto; border-radius: 14px; }
.cx figcaption { display: grid; gap: 2px; padding: 0 4px 4px; font: 700 clamp(17px, 1.9vw, 21px)/1.25 var(--display); letter-spacing: -.01em; }
.cx figcaption span { font: 400 15px/1.4 var(--sans); letter-spacing: 0; color: color-mix(in srgb, var(--inv-fg) 68%, transparent); }
.js .cx .b { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .9s var(--ease); transition-delay: calc(var(--k) * 70ms + 200ms); }
.js .cx.in .b { transform: none; }
.js .cx .callout { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .4s, transform .5s cubic-bezier(.3, 1.5, .5, 1) 1.15s; }
.js .cx.in .callout { opacity: 1; transform: none; }

/* demo: pale blue, one slide that changes its mind */
.demo { background: var(--accent-soft); }
.demo .wrap { display: grid; gap: clamp(24px, 4vw, 40px); }

/* how: paper, a thread that draws as you scroll */
.how { background: var(--paper); }
.how .wrap { display: grid; gap: clamp(36px, 6vw, 64px); }
.steps { --p: 0; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3.4vw, 48px); padding-top: 60px; }
.steps::before, .steps::after { content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 4px; border-radius: 2px; }
.steps::before { background: var(--line-2); }
.steps::after { background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p)); }
.step { position: relative; display: grid; gap: 10px; align-content: start; }
.node { position: absolute; top: -60px; left: 0; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); border: 3px solid var(--line-2); font: 700 15px/1 var(--display); color: var(--muted); transition: background .35s, border-color .35s, color .35s, transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.step.on .node { background: var(--mark); border-color: var(--ink); color: var(--mark-ink); transform: scale(1.14); }
.step h3 { font: 700 clamp(21px, 2.2vw, 26px)/1.15 var(--display); letter-spacing: -.02em; }
.step p { color: var(--ink-2); font-size: 16px; text-wrap: pretty; max-width: 36ch; }
.js .step h3, .js .step p { opacity: .42; transition: opacity .5s; }
.js .step.on h3, .js .step.on p { opacity: 1; }

/* trust: white, three plain promises with the real badges */
.trust { background: var(--surface); }
.trust .wrap { display: grid; gap: clamp(28px, 4.4vw, 48px); }
.proofs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 24px); }
.proof { display: grid; gap: 12px; align-content: start; padding: clamp(18px, 2.4vw, 28px); border-radius: 24px; background: var(--paper); border: 1px solid var(--line); }
.proof .tags { display: flex; flex-wrap: wrap; gap: 8px; min-height: 78px; align-content: flex-start; align-items: flex-start; }
.proof h3 { font: 700 clamp(20px, 2vw, 23px)/1.2 var(--display); letter-spacing: -.015em; }
.proof p { color: var(--ink-2); font-size: 15.5px; text-wrap: pretty; }
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 120ms); }
.js .rv.in { opacity: 1; transform: none; }
.js .proof .cbadge, .js .proof .tchip { opacity: 0; transform: scale(1.3) rotate(-4deg); transition: opacity .3s calc(var(--i, 0) * 120ms + 450ms), transform .5s cubic-bezier(.3, 1.5, .5, 1) calc(var(--i, 0) * 120ms + 450ms); }
.js .proof.in .cbadge, .js .proof.in .tchip { opacity: 1; transform: none; }

/* end: ultramarine, the logo's thread across the band */
.end { background: var(--accent); color: var(--accent-ink); text-align: center; overflow: hidden; padding-block: clamp(72px, 11vw, 140px); }
.end .wrap { position: relative; display: grid; gap: 22px; justify-items: center; }
.end h2 { font: 700 clamp(36px, 6.4vw, 80px)/1 var(--display); font-variation-settings: "wdth" 90; letter-spacing: -.035em; max-width: 14ch; text-wrap: balance; }
.end p { font-size: clamp(16px, 1.8vw, 19px); max-width: 46ch; opacity: .88; text-wrap: pretty; }
.end .cta { background: var(--mark); color: var(--mark-ink); margin-top: 6px; }
.end .cta .gem { background: var(--ink); color: var(--paper); }
.end-thread { position: absolute; left: 0; right: 0; top: 50%; width: 100%; height: 70%; transform: translateY(-50%); pointer-events: none; opacity: .5; }
.end-thread path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease); }
.end-thread circle { fill: var(--mark); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .6s cubic-bezier(.3, 1.5, .5, 1) 1.8s; }
.end.in .end-thread path { stroke-dashoffset: 0; }
.end.in .end-thread circle { transform: none; }
html:not(.js) .end-thread path { stroke-dashoffset: 0; }
html:not(.js) .end-thread circle { transform: none; }

/* footer */
.foot-band { padding-block: 32px 120px; }

@media (max-width: 900px) {
  .proofs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .contrast { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 64px; gap: 34px; }
  .steps::before, .steps::after { left: 17px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; }
  .steps::after { transform-origin: 50% 0; transform: scaleY(var(--p)); }
  .node { top: 0; left: -64px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .ln:first-child { color: color-mix(in srgb, var(--ink) 30%, transparent); }
  .js .rv, .js .cx .b, .js .cx .callout, .js .proof .cbadge, .js .proof .tchip { opacity: 1; transform: none; }
}