@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--ink:#18181A;--surface:#FAF8F3;--lime:#D6F436;--muted:#A8A8A6;--radius:16px;--body:Manrope,Arial,sans-serif;--display:Manrope,Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #708600;outline-offset:5px}
button{border:0}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--display);line-height:1.06;letter-spacing:-.045em}
button{font-weight:700}
p{color:#62625e}
.wrap{max-width:1240px;margin:auto;padding-left:44px;padding-right:44px}
.eyebrow{font-size:12px;letter-spacing:.1em;font-weight:700;line-height:1.5}
.nav{height:106px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;gap:7px;width:153px;flex-shrink:0;color:inherit}
.logo svg:first-child{width:38px;height:38px}
.logo svg:nth-child(2){width:108px;height:auto;max-height:25px}
.nav nav{display:flex;gap:28px;font-size:14px;font-weight:600}
.navcta{padding:11px 16px;border:1px solid #66666a;background:transparent;color:inherit;font-size:13px;border-radius:9px}
.navcta span{margin-left:15px}
.landing{background:#FAF8F3}
.landing .nav{background:#18181A;color:#FAF8F3;max-width:none;padding-left:max(44px,calc((100% - 1152px)/2));padding-right:max(44px,calc((100% - 1152px)/2))}
.landing main{background:#18181A;color:#FAF8F3}
.hero{padding-top:62px;padding-bottom:74px}
.landing .hero{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
.herocopy .eyebrow{color:#C5C5BE;display:flex;align-items:center;gap:10px}
.herocopy .eyebrow i{width:6px;height:6px;background:var(--lime);border-radius:100%}
.landing h1{font-size:clamp(44px,5vw,68px);font-weight:800;line-height:1.08;margin:25px 0}
.landing em{color:var(--lime);font-style:normal}
.herocopy>p{font-size:17px;color:#BABAB5;line-height:1.75}
.heroactions{display:flex;gap:12px;margin:30px 0 17px}
.primary,.secondary{padding:15px 20px;border-radius:10px;line-height:1.4;display:inline-block;min-height:50px;font-size:14px}
.primary{background:var(--lime);color:#18181A}
.primary span{margin-left:24px}
.secondary{border:1px solid #707071;color:inherit;background:transparent}
.heronote{font-size:12px;color:#A8A8A6}
.herovisual{position:relative;padding-top:40px}
.floatinglabel{font-size:10px;letter-spacing:1px;margin-bottom:18px;color:#A8A8A6}
.floatinglabel span{display:inline-block;width:16px;height:1px;background:var(--lime);vertical-align:middle;margin-right:7px}
.connection{background:#242426;color:#FAF8F3;border:1px solid #48484b;border-radius:var(--radius);padding:26px;box-shadow:0 25px 65px #00000018}
.connhead{display:flex;align-items:center;gap:12px}
.appavatar{width:42px;height:42px;background:#39393c;display:grid;place-items:center;border-radius:10px;font-weight:800}
.connhead b{display:block;font-size:17px}
.connhead small{font-size:12px;color:#B2B2AC;display:block;margin-top:2px}
.status{margin-left:auto;font-size:11px;color:var(--lime);border:1px solid #606741;border-radius:20px;padding:4px 8px}
.spend{margin:32px 0 18px}
.spend>span{font-size:12px;color:#A8A8A6;display:block;margin-bottom:5px}
.spend strong{font-size:38px;letter-spacing:-1.4px;font-weight:600}
.spend strong small{font-size:20px;color:#A8A8A6;font-weight:400}
.track{height:5px;background:#454548;border-radius:4px;overflow:hidden}
.track i{height:100%;width:24%;background:var(--lime);display:block}
.connfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;margin:18px 0}
.connfoot span{color:#A8A8A6}
.connfoot button{font-size:12px;color:#FAF8F3;background:transparent;padding:8px 0}
.lag{font-size:11px;color:#A8A8A6;border-top:1px solid #434347;padding-top:13px;line-height:1.6}
.revoked .status{color:#BDBDB7;border-color:#777}
.revoked .track i{background:#A8A8A6}
.belowcard{display:flex;gap:16px;margin:24px 0 0;padding-left:26px}
.belowcard>span{font-size:12px;color:#A8A8A6;padding-top:4px}
.belowcard p{font-size:13px;color:#A8A8A6;line-height:1.6}
.subline{border-top:1px solid #3c3c3d;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:25px;padding-bottom:28px}
.subline>span{font-size:10px;letter-spacing:1px;color:#A8A8A6}
.subline p{font-size:12px;color:#A8A8A6}
.subline a{font-size:12px}
.section{padding-top:96px;padding-bottom:86px}
.sectionhead{position:relative;margin-bottom:42px}
.sectionhead .eyebrow{color:#526900;margin-bottom:22px}
.sectionhead h2{font-size:44px;font-weight:800;line-height:1.13}
.sectionhead>p{position:absolute;right:0;bottom:3px;font-size:15px;max-width:290px}
.modegrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.mode{border:1px solid #dedbd2;border-radius:var(--radius);background:#fff;padding:34px}
.modeheading{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:800}
.modeicon{font-size:20px;background:#eeeee7;width:34px;height:34px;display:grid;place-items:center;border-radius:9px}
.modeheading small{margin-left:auto;font-size:11px;background:#F0F0E9;padding:4px 9px;border-radius:20px;font-weight:500}
.mode h3{font-size:31px;margin:30px 0 20px;line-height:1.13}
.mode p{font-size:15px;line-height:1.8;max-width:420px}
.mode ul{padding:0;list-style:none;margin:24px 0 32px;font-size:14px;line-height:2.3;color:#62625e}
.mode li:before{content:'↗';font-size:14px;margin-right:13px;color:#526900}
.textcta{display:flex;justify-content:space-between;width:100%;background:transparent;text-align:left;color:inherit;font-size:14px;border-top:1px solid #dcdcd3;padding:19px 0 0}
.vault{background:#F0F1E6}
.billing{font-size:12px;color:#686863;margin-top:22px}
.howsection{border-top:1px solid #dcd9d0;border-bottom:1px solid #dcd9d0;padding:72px 0}
.route{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #dcd9d0;padding-top:32px}
.route>div{flex:1}
.route span{font-size:10px;letter-spacing:.12em;color:#6d6d68;font-weight:700}
.route h3{font-size:21px;margin:12px 0}
.route p{font-size:14px}
.route>b{font-size:27px;color:#526900;margin:0 30px}
.support{display:flex;gap:22px;margin-top:45px;font-size:13px;align-items:center}
.support span{color:#62625e}
.support b:nth-of-type(2){margin-left:30px}
.swatches{display:flex;gap:8px;margin:26px 0}
.swatches span{width:48px;height:48px;border-radius:50%;background:#18181A;border:1px solid #ddd}
.swatches span:nth-child(2){background:#FAF8F3}
.swatches span:nth-child(3){background:#D6F436}
.swatches span:nth-child(4){background:#526900}
.stylespec{font-size:12px;line-height:1.9;color:#62625e}
.closing{background:#D6F436;padding:74px 0;color:#18181A}
.closing h2{font-size:57px;margin:25px 0 32px;font-weight:800}
.closing .primary{background:#18181A;color:#FAF8F3;margin-right:12px}
.closing .secondary{border-color:#5f6e19}
footer{display:flex;align-items:center;gap:35px;padding-top:34px!important;padding-bottom:34px!important}
footer .logo{color:#18181A}
footer .logo svg:first-child rect:first-of-type{stroke:#18181A}
footer .logo svg:first-child rect:not(:first-of-type){fill:#526900}
footer>span{font-size:13px}
footer p{font-size:11px;margin-left:auto}
.herotop{display:flex;justify-content:space-between;align-items:start}
.edition{font-size:10px;letter-spacing:.1em;line-height:1.7}
.bheadline{display:grid;grid-template-columns:1.8fr 1fr;align-items:end;gap:45px;margin:35px 0 46px}
.bintro{padding-bottom:8px}
.bintro p{font-size:19px;line-height:1.55;color:#484a43;margin-bottom:26px;max-width:330px}
.bintro .textcta{border:0;margin-top:18px;padding-top:0}
.bdiagram{display:flex;align-items:center;gap:25px;background:var(--lime);padding:34px 38px;border-radius:4px}
.diagramtitle{border-right:1px solid #8d9d37;padding-right:35px;margin-right:10px;min-width:245px}
.diagramtitle span,.diagramnode small{font-size:10px;letter-spacing:.1em}
.diagramtitle p{font-size:17px;color:#18181A;line-height:1.4;margin-top:12px}
.diagramnode{flex:1}
.diagramnode small{display:block;margin-bottom:11px}
.diagramnode b{font-size:25px;line-height:1.1;font-weight:500;letter-spacing:-.035em;display:block;font-family:var(--display)}
.diagrammark{display:flex;flex-direction:column;align-items:center;gap:11px}
.diagrammark svg{width:54px;height:54px}
.diagrammark small{font-size:8px;letter-spacing:.1em;white-space:nowrap}
.arrow{font-size:30px;margin:0 10px}
.diagramfoot{font-size:12px;margin-top:14px}
.bcontrol{background:#18181A;color:#FDFDFC;padding:64px 0}
.controlgrid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.controlgrid h2{font-size:48px;font-weight:500;line-height:1.05;margin:20px 0}
.controlgrid p{color:#BDBDB5;font-size:15px;max-width:460px}
.controlgrid .quiet{font-size:12px;margin-top:20px}
.samplelabel{font-size:10px!important;letter-spacing:.08em;margin-top:15px}
.socialline{height:1px;background:#677022;margin:5px 0 18px}
@media(min-width:1600px){
.wrap{max-width:1360px}
.landing .nav{padding-left:calc((100% - 1272px)/2);padding-right:calc((100% - 1272px)/2)}
.landing h1{font-size:76px}
}
@media(max-width:1000px){
.nav nav{gap:15px;font-size:12px}
.landing .hero{gap:28px;grid-template-columns:1.1fr 1fr}
.landing h1{font-size:49px}
.herocopy>p{font-size:15px}
.herocopy>p br{display:none}
.connection{padding:20px}
.status{font-size:9px}
.connhead small{font-size:10px}
.sectionhead>p{position:static;margin-top:20px}
.sectionhead h2{font-size:38px}
.route>b{margin:0 8px}
.diagramtitle{min-width:185px;padding-right:20px}
.bdiagram{gap:13px;padding:26px}
.bheadline{gap:25px}
.bintro p{font-size:17px}
.bintro .primary{padding:14px}
.controlgrid{gap:40px}
footer{flex-wrap:wrap}
footer p{margin-left:0}
.navcta{font-size:11px}
}
@media(max-width:740px){
.wrap{padding-left:22px;padding-right:22px}
.nav{height:83px!important}
.nav nav{display:none}
.logo{width:123px}
.logo svg:first-child{width:31px;height:31px}
.logo svg:nth-child(2){width:85px}
.landing .nav{padding-left:22px;padding-right:22px}
.navcta{font-size:11px;padding:11px}
.navcta span{margin-left:5px}
.hero{padding-top:36px;padding-bottom:40px}
.landing .hero{display:block}
.landing h1{font-size:clamp(41px,8.8vw,62px)}
.herocopy .eyebrow{font-size:10px}
.herocopy>p{font-size:16px;max-width:480px}
.heroactions{flex-wrap:wrap}
.primary,.secondary{font-size:13px;padding:15px 16px}
.herovisual{max-width:480px;margin-top:20px}
.floatinglabel{font-size:9px}
.connection{padding:23px}
.connhead small{font-size:12px}
.status{font-size:11px}
.subline{display:block;padding-top:20px;padding-bottom:25px}
.subline p{margin:8px 0}
.subline a{display:block;margin-top:8px}
.section{padding-top:55px;padding-bottom:55px}
.sectionhead{margin-bottom:30px}
.sectionhead h2{font-size:34px}
.sectionhead>p{font-size:14px}
.modegrid{grid-template-columns:1fr;gap:18px}
.mode{padding:26px}
.mode h3{font-size:29px}
.howsection{padding:48px 0}
.route{display:block}
.route>b{display:block;transform:rotate(90deg);width:25px;margin:15px 0}
.route>div{padding-bottom:8px}
.route h3{font-size:23px}
.support{flex-wrap:wrap;gap:10px 15px;margin-top:24px}
.support b:nth-of-type(2){margin-left:0}
.support span{width:65%}
.support b{width:27%}
.closing{padding:48px 0}
.closing h2{font-size:42px}
.closing .primary{margin-bottom:12px}
.closing .secondary{margin-bottom:12px}
footer{gap:20px}
footer p{font-size:11px;width:100%}
.edition{font-size:8px}
.herotop .eyebrow{font-size:10px}
.bheadline{display:block;margin:32px 0}
.bintro{margin-top:30px}
.bintro p{font-size:18px;max-width:440px}
.bintro .textcta{display:inline-block;width:auto;margin-left:18px;font-size:13px}
.bdiagram{padding:22px;gap:10px;flex-wrap:wrap}
.diagramtitle{border-right:0;border-bottom:1px solid #8d9d37;width:100%;display:flex;justify-content:space-between;padding:0 0 16px;margin:0 0 12px;align-items:center}
.diagramtitle p{margin:0;font-size:13px}
.diagramnode b{font-size:20px}
.diagramnode small{font-size:8px}
.arrow{font-size:22px;margin:0}
.diagrammark svg{width:38px;height:38px}
.diagrammark small{font-size:7px}
.diagramfoot{font-size:11px}
.controlgrid{grid-template-columns:1fr;gap:30px}
.bcontrol{padding:45px 0}
.controlgrid h2{font-size:43px}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
}
@media print{
.section,.howsection{break-inside:avoid}
}