/* floframes landing — page styles on top of assets/ds.css. Layout uses container queries on .lp. */
body{margin:0;background:var(--bg)}
a{color:inherit}a:hover{color:var(--accent)}

/* Layout responds to the page's own width (container queries), so it works in any frame or device. */
.lp{container:lp / inline-size;font-family:var(--font);color:var(--ink);background:var(--bg);overflow-x:clip}
.lp *{min-width:0}
.lp-wrap{max-width:1200px;margin:0 auto;padding-inline:clamp(20px,4cqi,48px)}
.lp-sec{padding-block:clamp(64px,10cqi,136px)}
.lp-eyebrow{display:block;font:var(--weight-medium) var(--text-2xs)/1.2 var(--font-mono);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.lp-h2{font-size:clamp(32px,4.6cqi,56px);line-height:1.05;letter-spacing:var(--tracking-title);font-weight:var(--weight-emphasis);margin:0}
.lp-lead{font-size:clamp(16px,1.5cqi,18px);line-height:var(--leading-relaxed);color:var(--muted);margin-top:18px;max-width:52ch}

/* Nav */
.lp-nav{position:sticky;top:0;z-index:10;background:var(--surface-veil);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.lp-nav .lp-wrap{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.lp-nav nav{display:flex;align-items:center;gap:6px;font-size:var(--text-md)}
.lp-nav nav > a:not(.button){color:var(--muted);padding:8px 12px;border-radius:var(--radius-sm)}
.lp-nav nav > a:not(.button):hover{color:var(--ink);background:var(--subtle)}
.lp-nav .button{margin-left:8px}

/* Hero */
.lp-hero{position:relative;background:var(--gradient-hero)}
.lp-hero .lp-wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4cqi,64px);align-items:center;padding-block:clamp(48px,8cqi,112px) clamp(56px,8cqi,104px)}
.lp-note{display:inline-flex;max-width:100%;text-align:left;gap:10px;align-items:center;font-size:var(--text-sm);color:var(--accent-ink);background:var(--surface);border:1px solid var(--accent-line);border-radius:999px;padding:5px 14px 5px 6px;box-shadow:var(--shadow-xs)}
.lp-note > span{white-space:nowrap;flex:none;font:var(--weight-medium) var(--text-2xs) var(--font-mono);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;background:var(--accent-soft);color:var(--accent);padding:3px 8px;border-radius:999px}
.lp-h1{font-size:clamp(42px,6.4cqi,82px);line-height:1.02;letter-spacing:var(--tracking-display);font-weight:var(--weight-semibold);margin:24px 0 20px}
.lp-h1 em{font-style:normal;color:var(--accent)}
.lp-hero-copy{font-size:clamp(16px,1.55cqi,19px);line-height:var(--leading-relaxed);color:var(--muted);max-width:50ch}
.lp-fine{font:var(--text-2xs)/1.7 var(--font-mono);color:var(--muted-soft);margin-top:14px}
.lp-art-hero{width:100%;height:auto;display:block;overflow:visible}

/* Waitlist form */
.lp-form{display:flex;gap:6px;width:100%;max-width:480px;margin-top:32px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow);transition:border-color var(--duration-fast),box-shadow var(--duration-fast)}
.lp-form:focus-within{border-color:var(--accent);box-shadow:var(--shadow),0 0 0 3px var(--accent-soft)}
.lp-form.invalid{border-color:var(--error);box-shadow:var(--shadow),0 0 0 3px var(--error-soft)}
.lp-form .lp-input{flex:1 1 auto;min-width:0;border:0 !important;box-shadow:none !important;background:transparent !important;font-size:var(--text-base) !important;min-height:var(--control-height-lg) !important;padding:0 10px !important}
.lp-form .lp-input:focus-visible{outline:none}
.lp-form .button{flex:none}
.lp-msg{max-width:480px;margin-top:10px;font-size:var(--text-sm);color:var(--error);padding-left:8px}
.lp-result{max-width:480px;margin-top:32px;text-align:left}
.lp-spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--on-accent-track);border-top-color:var(--on-accent);animation:lp-spin .8s linear infinite}

/* Vector art */
.v-card{fill:var(--surface);stroke:var(--line);stroke-width:1}
.v-line{fill:var(--line)}
.v-subtle{fill:var(--subtle)}
.v-ink{fill:var(--ink)}
.v-accent{fill:var(--accent)}
.v-soft{fill:var(--accent-soft)}
.v-wash{fill:var(--accent-wash);stroke:var(--accent-line)}
.v-two{fill:var(--accent-2)}
.v-aink{fill:var(--accent-ink)}
.v-surface{fill:var(--surface)}
.v-stroke{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.v-orbit{fill:none;stroke:var(--accent-line-strong);stroke-width:1.5;stroke-dasharray:3 9;animation:lp-dash 3s linear infinite}
.v-mono{font:500 15px var(--font-mono);fill:var(--accent-ink);letter-spacing:.06em}
.v-shadow{filter:drop-shadow(0 14px 22px oklch(0.245 0.006 165 / 0.12)) drop-shadow(0 2px 4px oklch(0.245 0.006 165 / 0.06))}
.v-float{transform-box:fill-box;transform-origin:center;animation:lp-float 7s ease-in-out infinite}
.v-float.d2{animation-delay:-2.3s;animation-duration:8s}
.v-float.d3{animation-delay:-4.6s;animation-duration:9s}
.v-progress{transform-box:fill-box;transform-origin:0 50%;animation:lp-progress 6s linear infinite}
.v-chip{fill:var(--surface);stroke:var(--accent-line);animation:lp-chip 6s linear infinite}
.v-chip.c2{animation-delay:2s}.v-chip.c3{animation-delay:4s}
.v-bar{transform-box:fill-box;transform-origin:center;animation:lp-wave 1.4s ease-in-out infinite alternate}
.v-play{transform-box:fill-box;transform-origin:center;animation:lp-pulse 3s ease-in-out infinite}

/* Steps */
.lp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(36px,5cqi,64px)}
.lp-step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.lp-step-art{background:var(--gradient-card);border-bottom:1px solid var(--line);aspect-ratio:16/10;display:grid;place-items:center}
.lp-step-art svg{width:100%;height:100%;display:block}
.lp-step-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.lp-step-body h3{font-size:var(--text-xl);font-weight:var(--weight-emphasis);letter-spacing:var(--tracking-h2);margin:0}
.lp-step-body p{font-size:var(--text-md);line-height:var(--leading-relaxed)}
.lp-step-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font:var(--weight-medium) var(--text-xs) var(--font-mono);color:var(--accent)}
.v-fan-l{transform-box:fill-box;transform-origin:50% 100%;animation:lp-fan-l 5s ease-in-out infinite}
.v-fan-r{transform-box:fill-box;transform-origin:50% 100%;animation:lp-fan-r 5s ease-in-out infinite}
.v-draw{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:320;animation:lp-draw 5s ease-in-out infinite}
.v-node{transform-box:fill-box;transform-origin:center;animation:lp-node 5s ease-in-out infinite}

/* Feature splits */
.lp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6cqi,88px);align-items:center}
.lp-split.flip > :first-child{order:2}
.lp-art{border-radius:var(--radius-xl);border:1px solid var(--line);background:var(--gradient-card);overflow:hidden;aspect-ratio:13/10}
.lp-art svg{width:100%;height:100%;display:block}
.lp-checks{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px;font-size:var(--text-md)}
.lp-checks li{display:flex;gap:12px;align-items:baseline}
.lp-checks li::before{content:"✓";flex:none;width:18px;height:18px;display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:999px;transform:translateY(2px)}
.v-cursor{animation:lp-cursor 7s ease-in-out infinite}
.v-ring{fill:none;stroke:var(--accent);stroke-width:2;animation:lp-ring 7s ease-in-out infinite}
.v-tag{animation:lp-ring 7s ease-in-out infinite}
.v-shrink{transform-box:fill-box;transform-origin:0 50%;animation:lp-shrink 7s ease-in-out infinite}
.v-bubble{transform-box:fill-box;transform-origin:100% 100%;animation:lp-bubble 7s ease-in-out infinite}
.v-undo-top{animation:lp-undo 6s ease-in-out infinite}
.v-undo-arc{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:160;animation:lp-arc 6s ease-in-out infinite}
.v-rev{font:500 13px var(--font-mono);fill:var(--muted)}

/* Ticker */
.lp-made{text-align:center}
.lp-ticker{display:inline-block;height:1.1em;overflow:hidden;vertical-align:bottom;color:var(--accent)}
.lp-ticker > span{display:flex;flex-direction:column;animation:lp-tick 12s cubic-bezier(.7,0,.2,1) infinite}
.lp-ticker > span > span{height:1.1em;line-height:1.1em;white-space:nowrap}
.lp-uses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(36px,5cqi,56px);border-top:1px solid var(--line);text-align:left}
.lp-uses > div{padding:22px 20px 0 0}
.lp-uses span{font:var(--weight-medium) var(--text-2xs) var(--font-mono);color:var(--accent);letter-spacing:.08em}
.lp-uses h3{font-size:var(--text-lg);font-weight:var(--weight-emphasis);margin:10px 0 6px}
.lp-uses p{font-size:var(--text-md);line-height:var(--leading-relaxed)}

/* Principles */
.lp-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;margin-top:clamp(36px,5cqi,56px)}
.lp-principle{border-top:1px solid var(--line);padding:24px 0 36px;display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 14px;align-items:start}
.lp-principle svg{grid-row:span 2;width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lp-principle h3{font-size:var(--text-base);font-weight:var(--weight-emphasis);margin:3px 0 0}
.lp-principle p{font-size:var(--text-md);line-height:var(--leading-relaxed)}

/* FAQ */
.lp-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,6cqi,80px);align-items:start}
.lp-faq .disclosure{margin-block:0;padding-block:20px}
.lp-faq .disclosure:last-child{border-bottom:1px solid var(--line)}
.lp-faq .disclosure > summary{font-size:var(--text-base);gap:16px}
.lp-faq .disclosure p{font-size:var(--text-md);line-height:var(--leading-relaxed);max-width:58ch}

/* Final CTA */
.lp-cta{position:relative;overflow:hidden;border-radius:var(--radius-xl);background:var(--accent-wash);border:1px solid var(--accent-line);padding:clamp(56px,9cqi,112px) clamp(20px,4cqi,48px);text-align:center}
.lp-cta .lp-h2{max-width:18ch;margin-inline:auto}
.lp-cta .lp-form, .lp-cta .lp-msg, .lp-cta .lp-result{margin-inline:auto}
.lp-cta-art{position:absolute;width:clamp(120px,16cqi,220px);height:auto;pointer-events:none}
.lp-cta-art.l{left:-24px;bottom:-18px}
.lp-cta-art.r{right:-18px;top:-10px}

/* Footer */
.lp-footer{border-top:1px solid var(--line);margin-top:clamp(64px,8cqi,104px)}
.lp-footer .lp-wrap{display:flex;justify-content:space-between;gap:40px;padding-block:44px 28px}
.lp-footer-brand{display:grid;gap:10px;max-width:300px;align-content:start}
.lp-footer-brand p{font-size:var(--text-sm)}
.lp-footer-cols{display:flex;gap:64px}
.lp-footer-cols nav{display:grid;gap:10px;font-size:var(--text-sm);align-content:start}
.lp-footer-cols nav span{font:var(--weight-medium) var(--text-2xs) var(--font-mono);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--muted-soft)}
.lp-footer-cols a{color:var(--muted)}
.lp-footer-cols a:hover{color:var(--ink)}
.lp-footer-base{display:flex;justify-content:space-between;gap:16px;padding-bottom:36px;font:var(--text-2xs) var(--font-mono);color:var(--muted-soft)}

@container lp (max-width: 1000px){
  .lp-steps{grid-template-columns:minmax(0,1fr)}
  .lp-step{flex-direction:row}
  .lp-step-art{flex:0 0 42%;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line)}
  .lp-uses{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .lp-principles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container lp (max-width: 850px){
  .lp-nav nav > a:not(.button){display:none}
  .lp-hero .lp-wrap{grid-template-columns:minmax(0,1fr);gap:8px}
  .lp-hero-art-box{max-width:520px;width:100%;margin:0 auto}
  .lp-split, .lp-faq{grid-template-columns:minmax(0,1fr)}
  .lp-split.flip > :first-child{order:0}
  .lp-cta-art{display:none}
}
@container lp (max-width: 600px){
  .lp-form{flex-direction:column;padding:8px}
  .lp-form .button{width:100%}
  .lp-step{flex-direction:column}
  .lp-step-art{flex:none;aspect-ratio:16/10;border-right:0;border-bottom:1px solid var(--line)}
  .lp-uses, .lp-principles{grid-template-columns:minmax(0,1fr)}
  .lp-footer .lp-wrap{flex-direction:column}
  .lp-footer-cols{gap:48px}
  .lp-footer-base{flex-direction:column;gap:6px}
  .lp-nav .button{margin-left:0}
}

@keyframes lp-spin{to{transform:rotate(360deg)}}
@keyframes lp-dash{to{stroke-dashoffset:-48}}
@keyframes lp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes lp-progress{0%{transform:scaleX(0)}90%,100%{transform:scaleX(1)}}
@keyframes lp-chip{0%,4%{fill:var(--surface)}8%,30%{fill:var(--accent-soft)}34%,100%{fill:var(--surface)}}
@keyframes lp-wave{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@keyframes lp-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes lp-fan-l{0%,15%{transform:rotate(0)}45%,85%{transform:rotate(-16deg)}100%{transform:rotate(0)}}
@keyframes lp-fan-r{0%,15%{transform:rotate(0)}45%,85%{transform:rotate(16deg)}100%{transform:rotate(0)}}
@keyframes lp-draw{0%{stroke-dashoffset:320}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-320}}
@keyframes lp-node{0%,20%{transform:scale(0)}35%,85%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes lp-cursor{0%{transform:translate(150px,120px);opacity:0}10%{opacity:1}28%{transform:translate(0,0)}32%{transform:translate(0,0) scale(.88)}36%,80%{transform:translate(0,0)}92%{transform:translate(150px,120px);opacity:1}100%{transform:translate(150px,120px);opacity:0}}
@keyframes lp-ring{0%,30%{opacity:0}36%,88%{opacity:1}94%,100%{opacity:0}}
@keyframes lp-shrink{0%,55%{transform:scaleX(1)}63%,90%{transform:scaleX(.62)}97%,100%{transform:scaleX(1)}}
@keyframes lp-bubble{0%,38%{opacity:0;transform:scale(.85)}44%,86%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(.9)}}
@keyframes lp-undo{0%,30%{transform:translate(0,0);opacity:1}48%,62%{transform:translate(70px,-70px);opacity:0}80%,100%{transform:translate(0,0);opacity:1}}
@keyframes lp-arc{0%,25%{stroke-dashoffset:160}45%,65%{stroke-dashoffset:0}85%,100%{stroke-dashoffset:160}}
@keyframes lp-tick{0%,20%{transform:translateY(0)}25%,45%{transform:translateY(-1.1em)}50%,70%{transform:translateY(-2.2em)}75%,95%{transform:translateY(-3.3em)}100%{transform:translateY(-4.4em)}}

/* Waitlist extras */
.lp-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.lp-form .button[aria-busy="true"]{opacity:.85;cursor:progress}
.lp-nav .logo:hover{color:var(--ink)}
html{scroll-padding-top:80px}

/* Document pages: privacy, terms, contact, 404 */
.lp-doc{padding-block:clamp(48px,8cqi,96px) 0}
.lp-doc .lp-wrap{max-width:760px}
.lp-doc h1{font-size:clamp(36px,5cqi,56px);line-height:1.05;letter-spacing:var(--tracking-title);font-weight:var(--weight-semibold);margin:0 0 16px}
.lp-doc .lp-updated{font:var(--text-2xs) var(--font-mono);color:var(--muted-soft)}
.lp-doc h2{font-size:var(--text-xl);font-weight:var(--weight-emphasis);letter-spacing:var(--tracking-h2);margin:44px 0 10px}
.lp-doc p, .lp-doc li{font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--muted)}
.lp-doc p + p{margin-top:12px}
.lp-doc ul{padding-left:20px;margin:10px 0 0;display:grid;gap:6px}
.lp-doc strong{color:var(--ink);font-weight:var(--weight-emphasis)}
.lp-doc a:not(.button){color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.lp-contact{display:grid;grid-template-columns:minmax(0,1fr);max-width:420px;gap:16px;margin-top:36px}
.lp-contact a.lp-contact-card{display:flex;flex-direction:column;gap:6px;padding:24px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-xs);text-decoration:none;color:var(--ink);transition:border-color var(--duration-fast),box-shadow var(--duration-base),transform var(--duration-base)}
.lp-contact a.lp-contact-card:hover{border-color:var(--accent-line-hover);box-shadow:var(--shadow);transform:translateY(-2px);color:var(--ink)}
.lp-contact strong{font-size:var(--text-lg)}
.lp-contact span{font:var(--text-sm) var(--font-mono);color:var(--accent)}
.lp-contact p{font-size:var(--text-md)}
.lp-404{text-align:center;padding-block:clamp(72px,14cqi,160px)}
.lp-404 .lp-wrap{display:grid;justify-items:center;gap:8px}
.lp-404 svg{width:min(320px,80%);height:auto;margin-bottom:16px}
@container lp (max-width: 600px){
  .lp-contact{grid-template-columns:minmax(0,1fr)}
}