@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#101612; --paper:#eeeee6; --lime:#d5ff70; --muted:#a3aca4; --line:#ffffff26; font-family:'DM Sans',sans-serif; color:var(--paper); background:var(--ink); font-synthesis:none }
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:25px }
body { margin:0 }
a { color:inherit; text-decoration:none }
button,input { font:inherit }
button,a,input { -webkit-tap-highlight-color:transparent }
button { color:var(--paper); background:transparent; border:0; cursor:pointer }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid var(--lime); outline-offset:5px }
header { height:96px; position:absolute; z-index:10; top:0; width:100%; padding:0 5%; display:flex; align-items:center; justify-content:space-between }
.wordmark { font-size:29px; letter-spacing:-1.3px; font-weight:700; display:inline-flex; align-items:center; white-space:nowrap }
.wordmark span { font-weight:400 }
.wordmark small { font-size:10px; letter-spacing:0; color:var(--lime); border:1px solid #d5ff7060; border-radius:3px; padding:3px 4px; margin-left:8px; align-self:flex-start; margin-top:5px }
nav { display:flex; align-items:center; gap:32px; font-size:13px }
nav a { padding:14px 0 }
.nav-cta { border-bottom:1px solid #ffffff60 }
.nav-cta span { margin-left:25px; color:var(--lime) }
.hero { position:relative; min-height:700px; height:100svh; max-height:1120px; overflow:hidden; background:#131711 }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% center }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,#0c110ce8 0%,#0c110c55 43%,transparent 72%),linear-gradient(0deg,#101612 0,transparent 22%,transparent 78%,#10161266) }
.hero-copy { position:relative; z-index:2; padding:clamp(150px,20svh,235px) 0 110px 5%; width:68% }
.eyebrow,.section-label,.small,small,.stage-caption,.hero-bottom { font-size:10px; letter-spacing:1.5px; font-weight:500 }
.eyebrow { line-height:1.7; display:flex; align-items:center; gap:9px }
.status-dot { display:inline-block; width:5px; height:5px; flex-shrink:0; border-radius:50%; background:var(--lime) }
h1,h2,h3,p { margin:0 }
h1,h2,h3 { font-family:Manrope,sans-serif }
.hero h1 { font-size:clamp(62px,7.6vw,120px); line-height:1.1; letter-spacing:-.075em; font-weight:500; margin:20px 0 32px }
.hero h1 sup { font-size:.23em; letter-spacing:-.02em; margin-left:.35em; vertical-align:top; display:inline-block; padding-top:.45em; color:var(--lime) }
.hero h2 { font-size:clamp(39px,4.8vw,73px); line-height:1.08; letter-spacing:-.055em }
em { font-style:normal; color:var(--lime) }
.intro { font-size:16px; color:#c8cec3; line-height:1.65; margin:25px 0 }
.button { display:inline-flex; gap:40px; align-items:center; justify-content:space-between; min-height:54px; border-radius:3px; padding:16px 24px; border:0; font-size:13px; font-weight:600; transition:background .2s,transform .2s }
.button:hover { transform:translateY(-3px); background:#e5ffad }
.lime { background:var(--lime); color:var(--ink) }
.hero-bottom { position:absolute; z-index:3; bottom:0; left:5%; right:5%; border-top:1px solid var(--line); height:70px; display:flex; justify-content:space-between; align-items:center; font-size:9px; color:#c4cabc; letter-spacing:1.4px }
.hero-bottom a { min-height:44px; display:flex; align-items:center }
.hero-bottom a span { margin-left:24px; color:var(--lime); font-size:18px }
.section { padding:85px 7% }
.section-label { display:flex; justify-content:space-between; gap:20px; letter-spacing:1px; margin-bottom:65px; color:var(--muted) }
h2 { font-size:clamp(37px,4.2vw,64px); line-height:1.15; font-weight:500; letter-spacing:-.055em }
h3 { font-size:23px; letter-spacing:-1px; font-weight:500 }
.studio { padding-bottom:24px }
.studio-grid { display:grid; grid-template-columns:.95fr 1.05fr; align-items:center; gap:40px }
.studio .editorial p { font-size:15px; line-height:1.8; color:var(--muted); max-width:310px; margin-top:25px }
.studio .editorial .preview-invite { color:var(--lime); margin-top:40px; font-size:12px }
.preview-invite span { padding-left:14px }
.stage-wrap { position:relative; height:560px; background:radial-gradient(ellipse at 50% 70%,#26321f,#121a12 65%); overflow:hidden }
#stage { position:absolute; inset:20px 0 65px; touch-action:pan-y }
#stage canvas { width:100%; height:100%; display:block }
.stage-caption { position:absolute; top:22px; left:24px; right:24px; display:flex; justify-content:space-between; gap:20px; font-size:8px; color:#bbc7ad; letter-spacing:1px; pointer-events:none }
.stage-caption span:last-child { color:var(--muted) }
.stage-controls { position:absolute; bottom:20px; left:24px; right:24px; display:flex; gap:20px; align-items:center; justify-content:space-between }
.stage-controls[hidden] { display:none }
#motion { border:1px solid #ffffff40; border-radius:50%; width:44px; height:44px; flex-shrink:0 }
.angles { display:flex; border-bottom:1px solid #ffffff30 }
.angles button { padding:15px 13px; font-size:12px; color:#b7c2ae; min-height:44px; border-bottom:1px solid transparent }
.angles button[aria-pressed=true] { color:var(--lime); border-color:var(--lime) }
.count { font-size:11px; white-space:nowrap; color:var(--muted) }
.count b { font-size:21px; color:var(--paper); font-weight:400; padding-right:5px }
.concept-note { color:var(--muted); font-size:10px; text-align:right; line-height:1.7; margin-top:16px }
.preview-fallback { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:25px; text-align:center }
.preview-fallback>span { color:var(--lime); font-size:45px }
.preview-fallback p { font-size:30px; line-height:1.3 }
.preview-fallback small { color:var(--muted); font-size:10px }
.practice { background:var(--paper); color:var(--ink); margin-top:60px }
.practice .section-label { color:#626e59 }
.practice>.editorial { display:flex; justify-content:space-between; align-items:flex-end; gap:50px }
.practice .editorial h2 span { color:#737d66 }
.practice .editorial>p { font-size:15px; line-height:1.8; max-width:285px; color:#586252 }
.practice-flow { display:grid; grid-template-columns:repeat(3,1fr); gap:45px; padding:0; margin:60px 0 0; list-style:none }
.practice-flow li { border-top:1px solid #10161238; padding-top:24px }
.practice-flow li>span { font-size:11px; color:#69745e; display:block; margin-bottom:36px }
.practice-flow p { font-size:14px; line-height:1.8; color:#586252; max-width:280px; margin-top:17px }
.privacy-note { border-top:1px solid #10161226; margin-top:55px; padding-top:24px; display:flex; gap:22px; align-items:baseline; max-width:650px }
.privacy-note>span { color:#647452; font-size:24px }
.privacy-note p { font-size:12px; line-height:1.8; color:#586252 }
.privacy-note strong { color:var(--ink); font-weight:600 }
.notes { background:#1b241c }
.notes .section-label { margin-bottom:40px }
.note-row { display:grid; grid-template-columns:40px 1fr 150px; align-items:center; gap:30px; padding:32px 0; border-top:1px solid var(--line) }
.note-row>span { font-size:10px; color:var(--muted) }
.note-row>span:last-child { text-align:right; color:var(--lime); font-size:9px; letter-spacing:1px }
.note-row h3 { transition:color .2s,transform .2s }
.note-row:hover h3 { color:var(--lime); transform:translateX(7px) }
.signup { text-align:center; padding-bottom:85px }
.signup .section-label { text-align:left }
.signup>.eyebrow { justify-content:center; font-size:9px; color:var(--muted); margin:10px 0 24px }
.signup h2 { font-size:clamp(45px,6vw,85px) }
.signup>p:not(.eyebrow):not(.small):not(.email-note) { color:var(--muted); max-width:440px; line-height:1.8; font-size:14px; margin:23px auto 30px }
.signup .small { font-size:10px; color:var(--muted); line-height:1.7; letter-spacing:0; margin-top:24px }
.email-note { font-size:11px; color:var(--muted); margin-top:18px }
.email-note a { text-decoration:underline; text-underline-offset:3px }
.faq { padding-top:0; max-width:1000px; margin:auto }
.faq h2 { font-size:32px; margin-bottom:30px }
details { border-top:1px solid var(--line); padding:15px 0 }
summary { cursor:pointer; font-size:15px; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:25px; min-height:44px }
summary:after { content:'+'; color:var(--lime) }
summary::-webkit-details-marker { display:none }
details[open] summary:after { content:'−' }
details p { color:var(--muted); font-size:13px; line-height:1.9; max-width:670px; margin:10px 0 }
footer { border-top:1px solid var(--line); padding:30px 5%; display:flex; justify-content:space-between; align-items:center; gap:25px }
footer .wordmark { font-size:25px }
footer div { display:flex; gap:25px; font-size:11px; color:var(--muted) }
footer div a { display:flex; align-items:center; min-height:44px }
footer p { font-size:10px; color:var(--muted) }
.skip { position:absolute; left:10px; top:-70px; z-index:20; background:var(--lime); color:var(--ink); padding:14px }
.skip:focus { top:8px }
.hero-copy>* { animation:enter .8s both }
.hero-copy h1 { animation-delay:.08s }
.hero-copy h2 { animation-delay:.16s }
.hero-copy .intro { animation-delay:.24s }
.hero-copy .button { animation-delay:.32s }
@keyframes enter { from { opacity:0; transform:translateY(18px) } to { opacity:1; transform:translateY(0) } }
.reveal { opacity:0; transform:translateY(25px); transition:opacity .6s,transform .6s }
.reveal.seen { opacity:1; transform:none }
.article header { position:relative; border-bottom:1px solid var(--line) }
.article main { padding:65px 7% 90px; max-width:980px; margin:auto }
.article h1 { font-size:clamp(40px,6vw,70px); line-height:1.1; letter-spacing:-.055em; font-weight:500; margin:20px 0 25px }
.article .lead { font-size:20px; color:#bdc6b5; line-height:1.7; margin-bottom:45px }
.article h2 { font-size:29px; margin:40px 0 18px }
.article main p,.article main li { color:#b9c2b2; line-height:1.9; font-size:16px }
.article main p { margin:14px 0 }
.article main a { text-decoration:underline; text-underline-offset:5px; color:var(--lime) }
.article .article-cta { border-top:1px solid var(--line); margin-top:50px; padding-top:25px }
.article main ol { padding-left:23px }
.article main li { padding:6px 0 }
.article main .eyebrow { font-size:10px }
@media(min-width:1700px) { .hero-copy { padding-top:23svh } }
@media(max-width:1000px) {
  nav { gap:20px }
  .hero { min-height:680px }
  .hero-copy { width:74% }
  .hero h1 { font-size:8.8vw }
  .hero h2 { font-size:6vw }
  .hero-image { object-position:69% center }
  .section { padding:65px 6% }
  .studio { padding-bottom:24px }
  .studio-grid { gap:25px }
  .stage-wrap { height:480px }
  .stage-caption { left:15px; right:15px; font-size:7px }
  .stage-controls { left:15px; right:15px; gap:10px }
  .angles button { padding:15px 9px }
  .count { display:none }
  .practice-flow { gap:30px }
  .note-row h3 { font-size:21px }
  .note-row { grid-template-columns:25px 1fr 110px; gap:20px }
}
@media(max-width:650px) {
  header { height:76px; padding:0 6% }
  .wordmark { font-size:25px }
  .wordmark small { font-size:8px; margin-top:4px; margin-left:6px }
  nav>a:not(.nav-cta) { display:none }
  nav .nav-cta { font-size:11px }
  nav .nav-cta span { margin-left:8px }
  .hero { height:100svh; min-height:680px; max-height:1000px }
  .hero-image { object-position:77% center }
  .hero-shade { background:linear-gradient(0deg,#101612 0%,#101612c9 34%,#10161211 78%,#10161266 100%) }
  .hero-copy { position:absolute; bottom:92px; left:0; width:100%; padding:0 6% }
  .hero h1 { font-size:clamp(43px,10.8vw,66px); letter-spacing:-.07em; margin:16px 0 20px }
  .hero h2 { font-size:48px; line-height:1.04 }
  .eyebrow { font-size:7px; letter-spacing:.9px }
  .intro { font-size:14px; margin:19px 0 }
  .hero .button { min-height:49px; padding:14px 20px; font-size:12px }
  .hero-bottom { left:6%; right:6%; height:65px; font-size:7px; letter-spacing:.8px }
  .hero-bottom a span { margin-left:9px }
  .section { padding:55px 6% }
  .section-label { margin-bottom:40px; font-size:8px; line-height:1.7 }
  .section-label span:last-child { text-align:right; max-width:155px }
  h2 { font-size:36px }
  .studio-grid { grid-template-columns:1fr; gap:30px }
  .studio .editorial p { font-size:14px; max-width:330px; margin-top:20px }
  .studio .editorial .preview-invite { margin-top:22px }
  .stage-wrap { height:490px; margin:0 -6.82% }
  #stage { inset:20px 0 65px }
  .stage-caption,.stage-controls { left:6%; right:6% }
  .stage-caption { font-size:7px }
  .count { display:block }
  .angles button { padding:15px 13px }
  .concept-note { text-align:left; font-size:9px }
  .studio { padding-bottom:0 }
  .practice { margin-top:45px }
  .practice>.editorial { display:block }
  .practice .editorial>p { max-width:100%; margin-top:23px; font-size:14px }
  .practice-flow { grid-template-columns:1fr; margin-top:35px; gap:30px }
  .practice-flow li { display:grid; grid-template-columns:25px 1fr; gap:18px }
  .practice-flow li>span { padding-top:5px; margin:0 }
  .practice-flow h3 { font-size:23px }
  .practice-flow p { max-width:100%; font-size:13px; margin-top:12px }
  .privacy-note { margin-top:35px; gap:15px }
  .note-row { grid-template-columns:20px 1fr; gap:15px }
  .note-row h3 { font-size:21px }
  .note-row>span:last-child { grid-column:2; text-align:left; margin-top:2px }
  .signup h2 { font-size:47px }
  .signup>.eyebrow { font-size:8px }
  .faq { padding-top:0 }
  .faq h2 { font-size:29px }
  summary { font-size:14px }
  footer { flex-direction:column; align-items:flex-start; padding:30px 6%; gap:10px }
  footer div { gap:22px; font-size:11px }
  footer p { margin-top:5px }
  .article main { padding-top:35px }
  .article h1 { font-size:43px }
  .article .lead { font-size:18px }
  .article nav { display:none }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*:before,*:after { animation:none!important; transition:none!important }
  .reveal { opacity:1; transform:none }
}