@font-face { font-family: "Space Grotesk"; src: url("/assets/space-grotesk-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/space-grotesk-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/space-grotesk-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("/assets/sora-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --ink: #17242a;
  --muted: #4f5f65;
  --accent: #16736e;
  --accent-dark: #0b514d;
  --accent-light: #5ed0c6;
  --navy: #071f28;
  --navy-light: #0d2e38;
  --paper: #ffffff;
  --surface: #f2f5f4;
  --line: #c7d0cd;
  --line-strong: #788984;
  --white: #ffffff;
  --focus: #ffbf47;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size-adjust: from-font;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-synthesis: none;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--paper); }
a { color: var(--accent-dark); text-underline-offset: .18em; }
a:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
h1, h2 { font-family: "Sora", "Space Grotesk", sans-serif; font-size-adjust: from-font; font-weight: 700; text-wrap: balance; }
p, li { text-wrap: pretty; }
main, footer { width: min(70rem, calc(100% - 2rem)); margin-inline: auto; }
.home { width: 100%; max-width: none; }
.section-shell, .hero-shell { width: min(72rem, calc(100% - 2rem)); margin-inline: auto; }
.eyebrow, .section-label { margin: 0; color: var(--accent); font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }

.marketing-hero { background: var(--navy); color: var(--white); }
.hero-shell { display: grid; grid-template-columns: minmax(18rem, .82fr) minmax(28rem, 1.18fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; padding-block: clamp(4rem, 7vw, 6.25rem); }
.hero-copy { min-width: 0; }
.hero .eyebrow { color: var(--accent-light); }
.hero h1 { max-width: 12ch; margin: .75rem 0 1.15rem; font-size: clamp(3rem, 5.4vw, 5rem); line-height: .98; letter-spacing: -.045em; }
.lede { max-width: 35rem; margin: 0; color: #d4e2e5; font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 1.75rem; }
.actions a, .closing-actions > a { display: inline-flex; min-block-size: 3rem; align-items: center; justify-content: center; padding: .72rem 1.3rem; border: 2px solid currentColor; border-radius: .2rem; text-align: center; text-decoration: none; font-weight: 700; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
.hero-utility { margin: .75rem 0 0; font-size: .88rem; }
.hero-utility a { color: #c8d8dc; font-weight: 700; }
.hero-utility a:hover { color: var(--white); }
.primary { border-color: var(--accent-light) !important; background: var(--accent-light); color: var(--navy); }
.primary:hover { border-color: var(--white) !important; background: var(--white); }
.secondary { border-color: #9ab0b6 !important; color: var(--white); }
.secondary:hover { border-color: var(--white) !important; background: rgb(255 255 255 / 8%); }
.hero-visual { min-width: 0; margin: 0; border: 0; background: #06161b; }
.system-graphic { display: block; width: 100%; height: auto; aspect-ratio: 760 / 520; }
.hero-visual figcaption { padding: .75rem 1rem; border-top: 1px solid #36505a; color: #b8c9cd; font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; }
.graphic-frame { fill: #06161b; stroke: #36505a; }
.graphic-grid { fill: url(#system-grid); opacity: .72; }
.grid-line { fill: none; stroke: #12333c; stroke-width: 1; }
.window-dot { fill: #5ed0c6; }
.dot-two { opacity: .65; }
.dot-three { opacity: .35; }
.graphic-kicker, .graphic-status, .node-label, .node-detail, .protocol-text { font-family: "Space Grotesk", "Segoe UI", sans-serif; }
.graphic-kicker, .graphic-status { fill: #b8c9cd; font-size: 11px; font-weight: 700; letter-spacing: 1.3px; }
.graphic-status { fill: #5ed0c6; text-anchor: end; }
.signal-line { fill: none; stroke: #5ed0c6; stroke-width: 2; stroke-dasharray: 7 9; }
.signal-line-faint { opacity: .18; }
.endpoint-box { fill: #0b2630; stroke: #4a626b; stroke-width: 1.5; }
.endpoint-screen { fill: #07191f; stroke: #1e4853; }
.interface-line { fill: #50666c; }
.interface-line-short { opacity: .55; }
.encrypted-field, .destination-field { fill: #103842; stroke: #5ed0c6; stroke-width: 1.5; }
.endpoint-port { fill: #5ed0c6; stroke: #071f28; stroke-width: 4; }
.relay-hex { fill: #103842; stroke: #5ed0c6; stroke-width: 1.5; }
.envelope { fill: none; stroke: #ffffff; stroke-width: 2; }
.browser-bar, .field-cursor { fill: none; stroke: #4a626b; stroke-width: 1.5; }
.field-cursor { stroke: #ffffff; stroke-width: 2; }
.browser-dot { fill: #5ed0c6; opacity: .65; }
.node-label { fill: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.node-detail { fill: #7fa1a9; font-size: 10px; letter-spacing: .8px; }
.node-label-centered, .node-detail-centered { text-anchor: middle; }
.protocol-bar { fill: #36505a; }
.protocol-text { fill: #7fa1a9; font-size: 10px; font-weight: 700; letter-spacing: .7px; }

.home .section { padding-block: clamp(3.5rem, 6vw, 5rem); border-bottom: 1px solid var(--line); }
.home .section h2 { margin: .55rem 0 .9rem; font-size: clamp(2.15rem, 3.6vw, 3.35rem); line-height: 1.08; letter-spacing: -.035em; }
.risk-section .section-shell { display: grid; grid-template-columns: minmax(16rem, .68fr) minmax(0, 1.32fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.section-heading > p:last-child { max-width: 34rem; margin: 0; color: var(--muted); font-size: 1rem; }
.risk-grid { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; border: 1px solid var(--line); list-style: none; }
.risk-grid li { min-width: 0; padding: 1.35rem; }
.risk-grid li + li { border-inline-start: 1px solid var(--line); }
.risk-grid li:nth-child(3) { border-inline-start: 0; }
.risk-grid li:nth-child(n + 3) { border-top: 1px solid var(--line); }
.risk-icon { display: block; width: 1.65rem; height: 1.65rem; margin-block-end: .85rem; }
.risk-grid h3 { margin: 0 0 .55rem; font-family: "Sora", "Space Grotesk", sans-serif; font-size: 1rem; line-height: 1.3; }
.risk-grid p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }

.privacy-panel { border-bottom: 0 !important; background: var(--navy); color: var(--white); }
.privacy-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(24rem, .88fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.privacy-panel .section-label { color: var(--accent-light); }
.privacy-panel h2 { max-width: 17ch; color: var(--white); }
.privacy-copy > p:not(.section-label) { max-width: 44rem; margin: 0; color: #c8d8dc; font-size: 1rem; }
.cryptography-list { display: grid; min-inline-size: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 1.4rem; border: 1px solid #4faaa2; background: var(--accent-dark); list-style: none; }
.cryptography-list li { display: grid; min-inline-size: 0; gap: .2rem; align-content: center; justify-items: center; padding-inline: .75rem; text-align: center; }
.cryptography-list li + li { border-inline-start: 1px solid rgb(197 239 235 / 28%); }
.cryptography-list strong { color: var(--white); font-family: "Sora", "Space Grotesk", sans-serif; font-size: clamp(.8rem, 1.15vw, 1rem); letter-spacing: -.025em; line-height: 1.2; white-space: nowrap; }
.cryptography-list small { color: #b8dcd8; font-size: .58rem; font-weight: 700; letter-spacing: .055em; line-height: 1.35; text-transform: uppercase; text-wrap: balance; }

.closing-cta { display: grid; width: min(72rem, calc(100% - 2rem)); grid-template-columns: minmax(18rem, 1.25fr) minmax(18rem, .75fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); margin-inline: auto; padding-block: clamp(2.75rem, 5vw, 4rem); }
.closing-label { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.dev-badge { display: inline-flex; align-items: center; padding: .22rem .55rem; border-radius: 999px; background: #1d4ed8; color: var(--white); font-size: .68rem; font-weight: 700; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase; }
.closing-cta h2 { max-width: 19ch; margin: .45rem 0 0; font-family: "Sora", "Space Grotesk", sans-serif; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -.035em; }
.closing-actions { display: grid; min-inline-size: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.closing-actions .primary { background: var(--accent); border-color: var(--accent) !important; color: var(--white); }
.closing-actions .primary:hover { background: var(--accent-dark); border-color: var(--accent-dark) !important; }
.closing-actions .secondary { border-color: var(--accent) !important; color: var(--accent-dark); }
.closing-actions .secondary:hover { background: var(--surface); }
.development-build { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .76rem; text-align: center; }
.release-checksum { grid-column: 1 / -1; max-inline-size: 36rem; margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.4; text-align: start; }
.release-checksum span, .release-checksum code { display: block; }
.release-checksum span { font-weight: 700; }
.release-checksum code { padding: 0; background: transparent; font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace; font-size: .62rem; letter-spacing: -.015em; overflow-wrap: anywhere; }

.section { padding: clamp(3.5rem, 7vw, 6rem) 0; border-bottom: 1px solid var(--line); }
.section h2 { max-width: 24ch; margin: .35rem 0 2rem; font-size: clamp(2rem, 4.5vw, 3.45rem); line-height: 1.1; letter-spacing: -.02em; }
.fine { color: var(--muted); font-size: .86rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 7vw, 6rem); }
.split > div > p:last-child, .boundary > p:last-child { max-width: 48rem; color: var(--muted); }
.facts { margin: 0; border-top: 1px solid var(--line); }
.facts div { padding: 1rem; border-bottom: 1px solid var(--line); }
.facts div:nth-child(odd) { background: var(--surface); }
.facts dt { color: var(--ink); font-weight: 700; }
.facts dd { margin: .2rem 0 0; color: var(--muted); }
.boundary { display: grid; grid-template-columns: 1fr 1.3fr; column-gap: clamp(2rem, 7vw, 6rem); }
.boundary .section-label { grid-column: 1 / -1; }
code { padding: .1em .3em; border-radius: .15rem; background: var(--surface); font-size: .9em; }
footer { display: grid; justify-items: center; gap: .65rem; padding: 2rem 0 3rem; color: var(--muted); font-size: .82rem; text-align: center; }
.footer-copy { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem .4rem; margin: 0; text-wrap: balance; }
.footer-copy span { white-space: nowrap; }
footer nav { display: flex; flex: 0 0 auto; gap: 1rem; }
.document { max-width: 70rem; }
.document-header { max-width: 55rem; padding: clamp(3.5rem, 8vw, 7rem) 0 3rem; }
.document-header h1 { margin: .5rem 0 1.25rem; font-size: clamp(2.6rem, 6vw, 5.1rem); line-height: 1.02; letter-spacing: -.03em; }
.revision { margin-top: 1.5rem; color: var(--muted); font-size: .85rem; }
.support-document { width: min(72rem, calc(100% - 2rem)); max-width: none; }
.support-header { max-width: 48rem; padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.support-header h1 { font-size: clamp(2.5rem, 5.5vw, 4.4rem); }
.support-header .lede { color: var(--muted); }
.support-layout { display: grid; grid-template-columns: minmax(13rem, .42fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 4.5rem); align-items: start; padding-block-end: clamp(3rem, 6vw, 5rem); }
.support-aside { position: sticky; top: calc(5rem + env(safe-area-inset-top)); padding-block-start: .25rem; }
.support-aside h2, .support-contact h2 { margin: .35rem 0 .75rem; font-size: clamp(1.55rem, 3vw, 2rem); line-height: 1.15; }
.support-aside > p:not(.section-label, .revision) { margin: 0 0 1.15rem; color: var(--muted); }
.support-test-link { display: inline-flex; min-block-size: 2.75rem; align-items: center; justify-content: center; padding: .55rem .9rem; border: 2px solid var(--accent); background: var(--accent); color: var(--white); text-decoration: none; font-weight: 700; }
.support-test-link:hover { border-color: var(--accent-dark); background: var(--accent-dark); }
.support-faq, .support-faq .faq-list { min-width: 0; max-width: none; }
.support-faq .faq-list { border-top-color: var(--line-strong); }
.support-faq .faq-list summary { padding: 1.15rem .25rem; font-size: 1.03rem; }
.support-faq .faq-answer { padding: 0 1.5rem 1.25rem .25rem; }
.support-contact { display: grid; grid-template-columns: minmax(13rem, .42fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 4.5rem); padding-block: clamp(2.5rem, 5vw, 3.5rem); border-block: 1px solid var(--line); }
.support-contact p { max-width: 44rem; margin: 0; }
.support-contact p + p { margin-block-start: .65rem; }
.technical-list { max-width: 55rem; margin: 0; padding-left: 1.4rem; }
.technical-list li + li { margin-top: 1rem; }
.faq-list { max-width: 55rem; margin: 0; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { padding: 1rem .35rem; cursor: pointer; font-weight: 700; }
.faq-list summary::marker { color: var(--accent-dark); }
.faq-list summary:hover, .faq-list details[open] summary { color: var(--accent-dark); }
.faq-list summary:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }
.faq-answer { max-width: 75ch; padding: 0 1.5rem 1.1rem; color: var(--muted); }
.faq-answer > :first-child { margin-top: 0; }
.faq-answer > :last-child { margin-bottom: 0; }
.faq-answer li + li { margin-top: .55rem; }
.anchor-target { display: block; scroll-margin-top: calc(4.5rem + env(safe-area-inset-top)); }
.table-wrap { max-width: 100%; overflow-x: auto; }
caption { padding: 0 0 .75rem; color: var(--muted); text-align: left; font-weight: 700; }
.measure { max-width: 55rem; color: var(--muted); }
.callout { margin-top: 3rem; padding-inline: clamp(1.25rem, 4vw, 3rem); border: 1px solid var(--line); background: var(--surface); }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: .85rem; border: 1px solid var(--line); vertical-align: top; }
th { background: #e3e9e7; }
tbody tr:nth-child(even) { background: var(--surface); }

@media (max-width: 900px) {
  .hero-shell { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { width: min(40rem, 100%); margin-inline: auto; }
  .hero h1, .lede { margin-inline: auto; }
  .actions { justify-content: center; }
  .hero-visual { width: min(46rem, 100%); margin-inline: auto; }
  .risk-section .section-shell { grid-template-columns: 1fr; gap: 2rem; }
  .section-heading { max-width: 38rem; }
  .privacy-layout { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 760px) {
  .hero-shell { gap: 2.5rem; padding-block: 3rem; }
  .hero h1 { font-size: clamp(2.65rem, 12vw, 4rem); }
  .actions { display: grid; width: min(100%, 28rem); margin-inline: auto; }
  .actions a, .closing-actions > a { width: 100%; }
  .hero-visual figcaption { font-size: .68rem; }
  .home .section { padding-block: 3.25rem; }
  .home .section h2 { font-size: 2.15rem; }
  .risk-grid { grid-template-columns: 1fr 1fr; }
  .risk-grid li { padding: 1.25rem; }
  .risk-grid li + li { border-inline-start: 0; }
  .risk-grid li:nth-child(even) { border-inline-start: 1px solid var(--line); }
  .risk-grid li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .split, .boundary { grid-template-columns: 1fr; }
  .closing-cta { grid-template-columns: 1fr; gap: 1.75rem; padding-block: 3.25rem; }
  .closing-actions { width: min(100%, 28rem); grid-template-columns: 1fr; }
  .development-build { grid-column: 1; }
  .release-checksum { grid-column: 1; }
  .facts { margin-top: 2rem; }
  .support-layout, .support-contact { grid-template-columns: 1fr; gap: 1.5rem; }
  .support-aside { position: static; padding: 1.25rem; border: 1px solid var(--line); background: var(--surface); }
  .support-aside .revision { margin-block-end: 0; }
  .support-faq .faq-answer { padding-inline-end: .5rem; }
  .footer-copy { display: grid; gap: .1rem; }
  footer nav { justify-content: center; }
  .table-wrap { margin-inline: -1rem; padding-inline: 1rem; }
}

@media (max-width: 420px) {
  .risk-grid { grid-template-columns: 1fr; }
  .risk-grid li:nth-child(even) { border-inline-start: 0; }
  .risk-grid li:nth-child(n + 2) { border-top: 1px solid var(--line); }
  .cryptography-list { padding: 1.15rem .45rem; }
  .cryptography-list li { padding-inline: .35rem; }
  .cryptography-list strong { font-size: .69rem; }
  .cryptography-list small { font-size: .49rem; letter-spacing: .025em; }
  .release-checksum code { font-size: .55rem; }
}

@media (pointer: coarse) {
  .site-support, .actions a, .closing-actions > a { min-block-size: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .actions a, .closing-actions > a { transition: none; }
}

@supports not (font-size-adjust: from-font) {
  :root { line-height: 1.6; }
  h1, h2 { line-height: 1.1; }
}