@font-face{font-family:"Archivo";src:url(fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"DM Sans";src:url(fonts/dmsans.woff2) format("woff2");font-weight:100 1000;font-display:swap}
:root{
  --teal:#213F3C;--deep:#142826;--ivory:#F5F2EB;--paper:#FBFAF7;--sage:#C9D3CB;--mist:#E8ECE7;
  --ink:#1D2B29;--muted:#6B7B78;--line:rgba(33,63,60,.12);
  --display:"Archivo",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --body:"DM Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --ease:cubic-bezier(.25,.1,.25,1);--spring:cubic-bezier(.2,.9,.25,1.05);
  --r-xl:32px;--r-lg:24px;--r-md:18px;--wrap:min(1120px,100% - 44px)
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ivory);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.47;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{width:var(--wrap);margin-inline:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:99;background:#fff;padding:8px 14px;border-radius:99px}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(245,242,235,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-color:var(--line)}
.nav-in{height:56px;display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center;color:var(--teal);text-decoration:none}
.logo img{height:17px;width:auto}
.nav .links{display:flex;gap:26px;margin-left:auto;font-size:14px}
.nav .links a{text-decoration:none;color:var(--ink);opacity:.8;transition:opacity .2s}
.nav .links a:hover,.nav .links a[aria-current]{opacity:1}
.nav .links a[aria-current]{font-weight:600}
@media(max-width:760px){.nav .links{display:none}.nav .pill{margin-left:auto}}

/* type */
.eyebrow{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0}
.display{font-family:var(--display);font-weight:700;font-size:clamp(44px,7.4vw,92px);line-height:1.02;letter-spacing:-.045em;color:var(--teal)}
.headline{font-family:var(--display);font-weight:700;font-size:clamp(32px,4.6vw,56px);line-height:1.05;letter-spacing:-.04em;color:var(--teal)}
.sub{font-size:clamp(18px,1.9vw,21px);line-height:1.42;color:var(--muted);max-width:640px}
.center{text-align:center;margin-inline:auto}

/* pills */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;transition:transform .25s var(--spring),background .2s,box-shadow .2s}
.pill:active{transform:scale(.96)}
.pill-sm{height:34px;padding:0 16px;font-size:14px}
.pill-teal{background:var(--teal);color:var(--ivory)}.pill-teal:hover{background:#2b524e}
.pill-ghost{box-shadow:inset 0 0 0 1.5px var(--line);color:var(--teal)}.pill-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--teal)}
.pill-light{background:var(--ivory);color:var(--teal)}
.more{color:var(--teal);font-weight:600;text-decoration:none;font-size:16px;display:inline-flex;align-items:center;gap:4px}
.more::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);margin-left:2px;transition:transform .25s var(--spring)}
.more:hover::after{transform:translateX(3px) rotate(45deg)}

/* segmented */
.seg{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:rgba(33,63,60,.07)}
.seg button{position:relative;z-index:1;height:36px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);transition:color .25s}
.seg button[aria-selected="true"]{color:var(--teal)}
.seg .knob{position:absolute;top:4px;bottom:4px;left:0;border-radius:999px;background:#fff;box-shadow:0 2px 10px rgba(20,40,38,.12);transition:transform .45s var(--spring),width .45s var(--spring)}
.seg.dark{background:rgba(255,255,255,.1)}.seg.dark button{color:rgba(245,242,235,.7)}.seg.dark button[aria-selected="true"]{color:var(--teal)}

/* status chip */
.st{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:99px;font-size:12.5px;font-weight:600;letter-spacing:0;white-space:nowrap}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st-live{background:#E3F1E6;color:#1F7A3D}
.st-live::before{box-shadow:0 0 0 0 rgba(31,122,61,.5);animation:ping 2s infinite}
.st-dev{background:#FFF1D9;color:#9A5B00}
.st-hold{background:var(--mist);color:var(--muted)}
.st-chosen{background:var(--teal);color:var(--ivory)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(31,122,61,.45)}70%{box-shadow:0 0 0 7px rgba(31,122,61,0)}100%{box-shadow:0 0 0 0 rgba(31,122,61,0)}}

/* live frames */
.browser{position:relative;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 1px 0 rgba(20,40,38,.04),0 24px 60px -24px rgba(20,40,38,.35);border:1px solid rgba(20,40,38,.08)}
.browser .bar{height:26px;display:flex;align-items:center;gap:6px;padding:0 11px;background:#F1F2F0;border-bottom:1px solid rgba(20,40,38,.06)}
.browser .bar i{width:8px;height:8px;border-radius:50%;background:#D5D9D6}
.browser .bar span{margin-left:10px;flex:1;height:16px;border-radius:6px;background:#fff;font-size:10.5px;line-height:16px;color:var(--muted);padding:0 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:240px}
.vp{position:relative;overflow:hidden;background:var(--poster,#e9ece8)}
.vp .poster{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:700;font-size:clamp(22px,3vw,34px);letter-spacing:-.03em;background:radial-gradient(120% 120% at 20% 10%,var(--accent,rgba(255,255,255,.2)),transparent 60%),var(--poster,#213F3C);transition:opacity .6s var(--ease)}
.vp .poster small{display:block;font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:0;opacity:.7;text-align:center;margin-top:6px}
.vp.ready .poster{opacity:0;pointer-events:none}
.vp iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;background:#fff}
.vp.thumb iframe{pointer-events:none}
.phone{position:relative;border-radius:34px;padding:9px;background:#111;box-shadow:0 30px 60px -24px rgba(20,40,38,.5)}
.phone .vp{border-radius:26px}
.phone::before{content:"";position:absolute;top:15px;left:50%;width:30%;height:16px;transform:translateX(-50%);background:#111;border-radius:99px;z-index:2}

/* sheet / dialog */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(20,40,38,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .35s}
.scrim.open{opacity:1;pointer-events:auto}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{scroll-behavior:auto!important}.st-live::before{animation:none}}

/* footer */
.foot{padding:28px 0 40px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
.foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot a{text-decoration:none;margin-left:18px}.foot a:hover{color:var(--teal)}
.foot nav a:first-child{margin-left:0}