:root {
    --ink: #090d0c;
    --surface: #0e1412;
    --surface2: #15201b;
    --line: #29372f;
    --volt: #c7ff4a;
    --mint: #43e6c2;
    --text: #f2f7f4;
    --muted: #8fa198;
    --paper: #edf2ef;
    --dark: #142019;
    --shadow: 0 24px 80px rgba(0, 0, 0, .28)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font: 16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
}

a {
    color: inherit
}

.shell {
    width: min(1180px, calc(100% - 40px));
    margin: auto
}

.nav {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    background: rgba(9, 13, 12, .86);
    backdrop-filter: blur(16px)
}

.navin {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .08em
}

.brand img {
    width: 34px;
    height: 34px
}

.navlinks {
    display: flex;
    align-items: center;
    gap: 22px
}

.navlinks a {
    text-decoration: none;
    color: var(--muted);
    font-size: .92rem
}

.navlinks a:hover {
    color: var(--text)
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 11px;
    border: 1px solid var(--line);
    text-decoration: none;
    font-weight: 750
}

.btn.primary {
    background: var(--volt);
    color: #10170e;
    border-color: var(--volt)
}

.btn.secondary {
    background: #111a16
}

.hero {
    padding: 92px 0 72px
}

.eyebrow {
    color: var(--mint);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-weight: 800;
    font-size: .76rem
}

.hero h1 {
    font-size: clamp(3.1rem, 7vw, 6.7rem);
    line-height: .93;
    letter-spacing: -.06em;
    margin: 14px 0 24px;
    max-width: 980px
}

.hero h1 span {
    color: var(--volt)
}

.lead {
    font-size: clamp(1.05rem, 2vw, 1.32rem);
    color: #b6c4bd;
    max-width: 760px
}

.cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 32px
}

.micro {
    margin-top: 16px;
    color: #74857c;
    font-size: .84rem
}

.product {
    margin: 28px 0 92px;
    border: 1px solid var(--line);
    background: #111815;
    border-radius: 24px;
    padding: 16px;
    box-shadow: var(--shadow)
}

.fakebar {
    height: 48px;
    border-bottom: 1px solid #2a3731;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #516058
}

.fakeurl {
    margin-left: 8px;
    color: #738178;
    font: 12px ui-monospace, SFMono-Regular, Menlo, monospace
}

.workspace {
    display: grid;
    grid-template-columns: 210px 1fr;
    min-height: 520px
}

.side {
    padding: 20px 14px;
    border-right: 1px solid #2a3731
}

.side h3 {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #7f9187
}

.sideitem {
    height: 36px;
    border-radius: 8px;
    margin: 8px 0;
    background: #18231e;
    border: 1px solid #26372f
}

.sideitem.active {
    border-color: rgba(199, 255, 74, .7);
    box-shadow: inset 3px 0 0 var(--volt)
}

.canvas {
    padding: 30px;
    background-color: #e8eeeb;
    background-image: linear-gradient(rgba(26, 45, 35, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 45, 35, .06) 1px, transparent 1px);
    background-size: 24px 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(170px, 1fr));
    gap: 18px;
    align-items: start
}

.device {
    background: white;
    border: 1px solid #d6ded9;
    border-radius: 17px;
    padding: 10px;
    box-shadow: 0 10px 22px rgba(26, 44, 35, .12)
}

.device .title {
    color: #152019;
    font-size: .8rem;
    font-weight: 800
}

.device .size {
    color: #7a8b82;
    font: 11px ui-monospace, SFMono-Regular, monospace;
    margin-bottom: 10px
}

.screen {
    background: #0c1110;
    border-radius: 11px;
    aspect-ratio: 390/720;
    position: relative;
    overflow: hidden
}

.desktop .screen {
    aspect-ratio: 16/10
}

.screen:before {
    content: "";
    position: absolute;
    inset: 12% 9%;
    border-radius: 9px;
    background: linear-gradient(#18221e 0 18%, transparent 18% 24%, #141d1a 24% 36%, transparent 36% 43%, #15201c 43% 61%, transparent 61% 68%, #15201c 68%)
}

.desktop {
    grid-column: span 2
}

.section {
    padding: 88px 0
}

.section.alt {
    background: #0c1210;
    border-block: 1px solid #1e2b25
}

.section h2 {
    font-size: clamp(2.1rem, 4vw, 3.8rem);
    line-height: 1.03;
    letter-spacing: -.045em;
    margin: 10px 0 16px;
    text-wrap: balance;
}

.sectionintro {
    color: #9caf9f;
    max-width: 730px;
    text-wrap: balance;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 36px
}

.card {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface)
}

.card b {
    display: block;
    margin-bottom: 8px
}

.card p {
    margin: 0;
    color: #94a69c;
    font-size: .93rem;
    text-wrap: balance;
}

.num {
    font: 700 12px ui-monospace, SFMono-Regular, monospace;
    color: var(--volt);
    margin-bottom: 16px
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 34px
}

.step {
    border-top: 1px solid #3a4a42;
    padding-top: 20px;
}

.step strong {
    display: block;
    font-size: 1.15rem
}

.step p {
    color: #8fa198;
    text-wrap: balance;
    margin-top: 1px;
}

.privacybox {
    padding: 34px;
    border-radius: 20px;
    background: linear-gradient(135deg, #14221b, #0d1511);
    border: 1px solid #304238;
    display: grid;
    grid-template-columns: 1.4fr .6fr;
    gap: 30px;
    align-items: center
}

.privacybox ul {
    color: #9fb0a7
}

.footer {
    padding: 42px 0;
    border-top: 1px solid #1e2b25;
    color: #83948c
}

.footerin {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap
}

.footer a {
    color: #a9bbb1;
    text-decoration: none;
    margin-right: 16px
}

.legal {
    padding: 72px 0
}

.legal article {
    max-width: 820px
}

.legal h1 {
    font-size: 3rem;
    letter-spacing: -.04em;
    margin: 1px;
}

.legal h2 {
    margin-top: 34px
}

.legal p,
.legal li {
    color: #b2c0b9
}

.notice {
    padding: 14px 16px;
    border: 1px solid #34463c;
    border-radius: 11px;
    background: #101914;
    color: #adbbb4
}

.faq details {
    border-bottom: 1px solid #25332c;
    padding: 18px 0
}

.faq summary {
    cursor: pointer;
    font-weight: 750
}

.faq p {
    color: #9caf9f
}

.tag {
    display: inline-block;
    padding: 5px 9px;
    border: 1px solid #304138;
    border-radius: 999px;
    color: #a6b8ae;
    font-size: .78rem
}

@media(max-width:820px) {
    .navlinks a:not(.btn) {
        display: none
    }

    .workspace {
        grid-template-columns: 1fr
    }

    .side {
        display: none
    }

    .canvas {
        grid-template-columns: 1fr 1fr;
        padding: 16px
    }

    .desktop {
        grid-column: span 2
    }

    .grid,
    .steps {
        grid-template-columns: 1fr
    }

    .privacybox {
        grid-template-columns: 1fr
    }

    .hero {
        padding-top: 62px
    }

    .hero h1 {
        font-size: 3.7rem
    }
}

@media(max-width:520px) {
    .shell {
        width: min(100% - 24px, 1180px)
    }

    .canvas {
        grid-template-columns: 1fr
    }

    .desktop {
        grid-column: auto
    }

    .hero h1 {
        font-size: 3rem
    }

    .product {
        padding: 8px
    }

    .navin {
        height: 62px
    }
}
/* Public launch refinements */
.legal-lead{font-size:1.08rem;color:#9caf9f;max-width:720px;margin:-8px 0 28px}.integrated-panel{position:relative;overflow:hidden}.integrated-panel:before{content:"";position:absolute;inset:auto -80px -90px auto;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(67,230,194,.12),transparent 68%);pointer-events:none}.checklist{list-style:none;padding:0;margin:0;display:grid;gap:12px}.checklist li{position:relative;padding-left:28px;color:#b4c2ba}.checklist li:before{content:"✓";position:absolute;left:0;top:0;color:var(--volt);font-weight:900}.cta.compact{margin-top:24px}.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}.support-card{display:flex;gap:16px;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--surface);min-width:0;align-items:center;}.support-card strong{display:block;margin-bottom:6px}.support-card p{margin:0 0 12px;color:#94a69c;font-size:.92rem}.support-card a{color:var(--mint);text-decoration:none;font-weight:750;font-size:.9rem}.support-card a:hover{text-decoration:underline}.support-icon{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:10px;border:1px solid #34473c;background:#132019;color:var(--volt);font-weight:900}.launch-panel{display:flex;align-items:center;justify-content:space-between;gap:40px}.launch-panel h2{max-width:720px}.btn.big{min-height:52px;padding-inline:24px;white-space:nowrap}.release-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-top:42px;padding-bottom:16px;border-bottom:1px solid var(--line)}.release-head h2{margin:8px 0 0}.release-head time{color:var(--muted);font:700 .8rem ui-monospace,SFMono-Regular,Menlo,monospace;padding-top:12px}.release-badge{display:inline-flex;padding:4px 9px;border:1px solid rgba(199,255,74,.34);border-radius:999px;background:rgba(199,255,74,.08);color:var(--volt);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.release-list{display:grid;gap:8px;margin-top:22px}.replace-box{display:grid;gap:7px;margin:26px 0;padding:18px;border:1px solid #745f25;border-radius:14px;background:rgba(255,200,87,.07)}.replace-box strong{color:#ffd673}.replace-box span{display:block;width:fit-content;max-width:100%;padding:4px 8px;border-radius:6px;background:#181b17;color:#ffd673;font:700 .78rem ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}.report-block{margin-top:46px;padding-top:34px;border-top:1px solid var(--line)}.report-block h2{margin-top:8px}.report-block ul{display:grid;gap:6px}.privacy-link{display:inline-block;margin-top:10px;color:var(--mint);font-size:.88rem;text-decoration:none}.privacy-link:hover{text-decoration:underline}

/* 404 */
.error-page{min-height:100vh;display:flex;flex-direction:column}.error-main{flex:1;display:flex;align-items:center;padding:72px 0}.error-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:54px;align-items:center}.error-copy h1{font-size:clamp(3.4rem,7vw,6rem);line-height:.92;letter-spacing:-.06em;margin:12px 0 24px}.error-copy h1 span{color:var(--volt)}.error-copy p{max-width:520px;color:#a7b6ae;font-size:1.08rem;text-wrap:balance;}.error-workspace{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#111815;box-shadow:var(--shadow)}.error-workspace .fakebar{padding-inline:16px}.error-canvas{min-height:430px;padding:28px;background-color:#e8eeeb;background-image:linear-gradient(rgba(26,45,35,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(26,45,35,.06) 1px,transparent 1px);background-size:24px 24px;display:grid;grid-template-columns:.72fr .95fr;gap:18px;align-items:start}.error-device{background:#fff;border:1px solid #d6ded9;border-radius:16px;padding:10px;box-shadow:0 10px 22px rgba(26,44,35,.12);min-width:0}.error-device .title{color:#152019;font-size:.77rem;font-weight:800}.error-device .size{color:#7a8b82;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;margin-bottom:9px}.error-screen{min-height:236px;border-radius:10px;background:#0b100e;color:#eaf1ed;display:grid;place-content:center;text-align:center;padding:16px}.error-screen b{display:block;color:var(--volt);font-size:3rem;line-height:1;font-weight:850;letter-spacing:-.05em}.error-screen span{display:block;margin-top:8px;color:#7e9087;font:10px ui-monospace,SFMono-Regular,Menlo,monospace}.tablet-mini .error-screen{min-height:300px}.desktop-mini{grid-column:1/-1;width:82%;justify-self:end}.desktop-mini .error-screen{min-height:150px}

@media(max-width:920px){.support-grid{grid-template-columns:1fr}.launch-panel{align-items:flex-start;flex-direction:column}.error-layout{grid-template-columns:1fr;gap:34px}.error-main{padding-top:52px}.error-workspace{max-width:720px;width:100%}}
@media(max-width:820px){.navlinks a:not(.btn){display:none}.support-grid{grid-template-columns:1fr}.release-head{align-items:flex-start}.privacybox.integrated-panel{grid-template-columns:1fr}.launch-panel{gap:18px}}
@media(max-width:560px){.error-canvas{grid-template-columns:1fr;padding:16px}.desktop-mini{grid-column:auto;width:100%}.tablet-mini .error-screen,.error-screen{min-height:190px}.error-copy h1{font-size:3.2rem}.release-head{display:block}.release-head time{display:block}.replace-box{padding:14px}.btn.big{width:100%}}