@font-face{font-family:Manrope;src:url("assets/manrope-400.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url("assets/manrope-600.ttf") format("truetype");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url("assets/manrope-800.ttf") format("truetype");font-style:normal;font-weight:700 900;font-display:swap}
:root{--paper:oklch(97.6% .005 110);--ink:oklch(25% .013 120);--muted:oklch(47% .017 120);--line:oklch(84% .013 120);--lime:oklch(92% .18 119);--dark:oklch(22% .014 120);--on-dark:oklch(96% .007 119);--gutter:clamp(1.4rem,4.7vw,5rem)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:2rem}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;font-size:1rem;line-height:1.7}
::selection{background:var(--lime);color:var(--ink)}
a{color:inherit;text-decoration:none}
a,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
p,h1,h2,h3,figure{margin:0}
p{max-width:70ch}
.wrap{width:min(100% - var(--gutter)*2,1320px);margin-inline:auto}
.skip-link{position:absolute;left:1rem;top:-6rem;z-index:5;background:var(--lime);padding:1rem}
.skip-link:focus{top:1rem}
.site-header{min-height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:2rem}
.wordmark{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;font-weight:800;letter-spacing:-1.25px;font-size:1.8rem;line-height:1}
.wordmark svg{height:29px;width:29px;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linejoin:round;stroke-linecap:square;margin-right:.12rem}
.wordmark-period{margin-left:-.5rem;color:var(--muted)}
nav{display:flex;align-items:center;gap:2rem;font-size:.875rem;font-weight:600}
nav>a{padding:.5rem 0;transition:color .16s}
nav>a:hover{text-decoration:underline;text-underline-offset:6px}
nav .nav-beta{display:flex;gap:1.6rem;align-items:center;margin-left:.7rem;border:1px solid var(--ink);padding:.65rem 1rem;border-radius:3px}
.nav-beta span{font-size:1.25rem;line-height:1}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4.5rem);align-items:center;padding-top:4.6rem;padding-bottom:4.5rem}
.eyebrow{display:flex;align-items:center;gap:.65rem;font-size:.69rem;letter-spacing:.13em;font-weight:800;line-height:1.6}
.tiny-mark{display:inline-block;width:8px;height:8px;border:1.5px solid currentColor;transform:rotate(45deg)}
h1{font-size:clamp(3.8rem,6.3vw,6.4rem);line-height:1.07;letter-spacing:-.075em;font-weight:800;margin-top:2rem;margin-left:-.055em}
h1 span{color:oklch(52% .016 120)}
.hero-description{font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.75;max-width:36ch;margin-top:1.75rem;color:var(--muted)}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:2.5rem;min-height:54px;padding:.875rem 1.4rem;font-size:.9rem;font-weight:600;border-radius:3px;transition:background .2s,transform .2s}
.button-dark{background:var(--ink);color:var(--on-dark);margin-top:2.1rem}
.button-dark:hover{background:oklch(35% .02 120);transform:translateY(-2px)}
.button span{font-size:1.25rem;line-height:1}
.hero-note{margin-top:1rem;color:var(--muted);font-size:.75rem}
.trace-figure{background:var(--lime);border-radius:5px;padding:1.5rem 1.4rem .9rem;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;min-width:0;overflow:hidden}
.figure-topline{display:flex;justify-content:space-between;gap:.7rem;font-size:.6rem;letter-spacing:.1em;font-weight:800;line-height:1.8;border-bottom:1px solid oklch(50% .07 120 / .35);padding-bottom:1rem}
.trace-diagram{display:block;width:100%;height:auto;min-height:0;margin-block:.4rem;font-family:Manrope,"Segoe UI",sans-serif}
.trace-figure figcaption{display:flex;gap:.65rem;align-items:center;font-size:.61rem;line-height:1.5;border-top:1px solid oklch(50% .07 120 / .35);padding-top:.85rem;min-height:40px}
.figure-cross{font-size:1.4rem;line-height:1}
.example-label{font-size:.52rem;letter-spacing:.08em;margin-left:auto}
.principles{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:1.7rem;font-size:.875rem;font-weight:600}
.principles p{display:flex;align-items:center;gap:.75rem}
.principles p::before{content:"+";color:var(--muted);font-size:1.1rem;font-weight:400}
.workflow,.faq{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(2rem,6.5vw,7rem);padding-block:7.5rem}
h2{font-size:clamp(2.6rem,4.1vw,4.1rem);line-height:1.12;letter-spacing:-.065em;font-weight:800}
.section-intro h2{margin-top:1.7rem}
.section-intro>p:last-child:not(.eyebrow){margin-top:1.4rem;font-size:1rem;color:var(--muted);max-width:31ch}
.steps{padding:0;margin:0;list-style:none}
.steps li{display:grid;grid-template-columns:2.6rem 1fr;gap:1.1rem;border-bottom:1px solid var(--line);padding:2rem 0}
.steps li:first-child{padding-top:0}
.steps li:last-child{border-bottom:0;padding-bottom:0}
.step-number{font-size:.8rem;font-weight:600;padding-top:.35rem;color:var(--muted)}
h3{font-size:1.35rem;font-weight:800;letter-spacing:-.045em;line-height:1.3}
.steps p{font-size:.93rem;color:var(--muted);margin-top:.8rem;max-width:48ch}
.step-label{display:block;margin-top:1.05rem;font-size:.6rem;font-weight:800;letter-spacing:.11em}
.control-section{background:var(--dark);color:var(--on-dark);overflow:hidden}
.control-content{padding-top:5rem;padding-bottom:3.75rem}
.control-content>.eyebrow{color:var(--lime)}
.control-content h2{font-size:clamp(3rem,6vw,6rem);margin-top:2.2rem;letter-spacing:-.065em;line-height:1.12}
.control-content h2 span{color:var(--lime)}
.control-bottom{margin-top:3.5rem;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}
.large-mark{font-size:5rem;line-height:1;color:var(--lime)}
.control-bottom p{max-width:42ch;font-size:.97rem;color:oklch(80% .012 120);line-height:1.8}
.faq{padding-top:7rem;padding-bottom:6rem}
.faq-items{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;font-size:.98rem;font-weight:600;padding:1.5rem 0;line-height:1.5}
summary::-webkit-details-marker{display:none}
summary span{font-size:1.4rem;line-height:1;font-weight:400;transition:transform .15s}
details[open] summary span{transform:rotate(45deg)}
details p{padding:0 2rem 1.6rem 0;color:var(--muted);font-size:.93rem;line-height:1.8}
.availability{background:var(--lime);padding:3.75rem;display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;border-radius:4px}
.availability h2{font-size:clamp(2.25rem,3.8vw,3.75rem);margin-top:1.5rem}
.availability p:last-child{font-size:.95rem;line-height:1.8;margin-top:1.5rem}
.back-link{display:inline-flex;white-space:nowrap;gap:1.5rem;align-items:center;border-bottom:1px solid var(--ink);padding-block:.5rem;font-weight:600;font-size:.85rem}
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:1.75rem;min-height:150px;font-size:.75rem;color:var(--muted)}
.site-footer .wordmark{font-size:1.5rem;color:var(--ink)}
.site-footer .wordmark svg{width:24px;height:24px}
@media(min-width:1600px){.hero{padding-top:5.3rem;padding-bottom:5.3rem}}
@media(max-width:1000px){.site-header{min-height:96px}nav{gap:1.1rem}.hero{gap:2rem}.trace-figure{padding:1rem .75rem}.figure-topline{font-size:.5rem}.trace-figure figcaption{font-size:.54rem;gap:.3rem}.example-label{display:none}.hero-note{font-size:.7rem}.hero-description{font-size:1rem}.workflow,.faq{gap:3rem;padding-block:5.5rem}.availability{padding:2.5rem}.availability h2{font-size:2.7rem}.back-link{gap:.75rem}}
@media(max-width:760px){:root{--gutter:1.35rem}.site-header{min-height:87px;gap:.7rem}.wordmark{font-size:1.5rem}.wordmark svg{width:25px;height:25px}nav>a:not(.nav-beta){display:none}nav .nav-beta{margin-left:0;padding:.5rem .65rem;font-size:.75rem;gap:.75rem}.hero{grid-template-columns:1fr;padding-block:2.75rem 2rem;gap:2.3rem}.hero-copy{max-width:580px}.eyebrow{font-size:.61rem;letter-spacing:.1em}h1{font-size:clamp(3.7rem,12vw,6rem);margin-top:1.5rem;letter-spacing:-.07em}.hero-description{max-width:38ch;margin-top:1.25rem}.button-dark{margin-top:1.5rem}.hero-note{font-size:.75rem}.trace-figure{padding:1.15rem 1rem .9rem}.figure-topline{font-size:.62rem}.trace-diagram{max-height:440px}.trace-figure figcaption{font-size:.65rem}.example-label{display:block;font-size:.52rem}.principles{flex-wrap:wrap;gap:.6rem 1.25rem;padding-block:1.2rem;font-size:.75rem}.principles p{gap:.45rem}.workflow,.faq{grid-template-columns:1fr;gap:2.5rem;padding-block:4rem}.section-intro h2{margin-top:1.2rem}.section-intro p:last-child:not(.eyebrow){max-width:40ch}.steps li{grid-template-columns:1.8rem 1fr;gap:.7rem;padding-block:1.65rem}h3{font-size:1.3rem}.control-content{padding-block:3.25rem}.control-content h2{font-size:clamp(2.5rem,7.6vw,4rem);margin-top:1.5rem}.control-bottom{margin-top:2.25rem;gap:1.5rem;align-items:flex-start}.large-mark{font-size:3rem}.control-bottom p{font-size:.88rem;max-width:37ch}.faq{gap:2rem}.availability{padding:2rem 1.5rem;display:block}.availability h2{font-size:clamp(1.95rem,6.5vw,3rem)}.availability p:last-child{font-size:.85rem}.availability p:last-child br{display:none}.back-link{margin-top:1.5rem}.site-footer{flex-wrap:wrap;justify-content:flex-start;gap:1rem 2rem;padding-block:2.25rem;min-height:0}.site-footer p{display:none}.site-footer>span{margin-left:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

/* Readability pass: supporting labels remain readable on smaller screens. */
.eyebrow,.step-label,.figure-topline{font-size:.75rem}.hero-note,.principles{font-size:.875rem}.trace-figure figcaption{font-size:.75rem;flex-wrap:wrap}.example-label{font-size:.75rem}.step-label{letter-spacing:.065em}.faq-items a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:1000px){nav{gap:1rem}.hero-note{font-size:.8rem}}
@media(max-width:760px){.eyebrow,.step-label,.figure-topline{font-size:.75rem}.trace-figure figcaption{font-size:.75rem}.principles{font-size:.8rem}.nav-beta{min-height:42px}.site-footer{font-size:.8rem}}