@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-700.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
:root {
  font-family:Manrope,Arial,sans-serif;font-synthesis:none;color:#181818;background:#fff;
  --muted:#626262;--line:#dedede;
  --gutter:max(6vw,calc((100vw - 1408px)/2));--header-height:104px;
  --text-small:12px;--text-meta:14px;--text-button:14px;--text-label:12px;
}
* {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:35px}
body {margin:0}
a {color:inherit;text-decoration:none}
button {font:inherit}
button,a {-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible {outline:2px solid #171717;outline-offset:6px}
::selection {color:white;background:#333}
.skip-link {position:fixed;top:12px;left:12px;z-index:10;padding:12px;background:white;transform:translateY(-160%)}
.skip-link:focus {transform:none}
.site-header,.section,footer {padding-inline:var(--gutter)}
.site-header {height:var(--header-height);position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo {display:block;flex:none;line-height:0;width:154px}
/* The supplied artwork starts at x=1.6 in its 106-unit viewBox. Align the ink, not the SVG whitespace. */
.logo img {width:154px;height:auto;display:block;margin-left:calc(-154px * 1.6 / 106)}
.header-product {font-size:var(--text-meta);font-weight:400;color:var(--muted)}
main {width:100%;margin:0}
.hero {position:relative;min-height:calc(100svh - var(--header-height));padding:65px var(--gutter) 100px;display:flex;align-items:center;isolation:isolate}
.hero-copy {position:relative;z-index:1;width:100%;text-align:left}
h1,h2,h3,p {margin-top:0}
.hero h1 {font-size:var(--hero-title-size);font-weight:700;letter-spacing:-.065em;line-height:1.08;margin:0 0 36px}
.hero-description {font-size:var(--hero-subtitle-size);font-weight:400;line-height:1.4;letter-spacing:-.035em;max-width:1250px;margin:0;color:#626262}
.particle-art {position:absolute;z-index:0;inset:calc(-1 * var(--header-height)) 0 0;pointer-events:none;overflow:hidden}
.particle-art canvas,.static-art {position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.particle-art canvas {opacity:0}
.particle-art.ready canvas {opacity:1}
.particle-art.ready .static-art {visibility:hidden}
/* The continuous particle field has no text-avoidance mask. */
.static-art {opacity:.18}
.eyebrow {font-size:var(--text-label);font-weight:600;letter-spacing:1.7px;line-height:1.6;text-transform:uppercase;margin:0 0 34px;display:flex;align-items:center;gap:10px}
h2 {font-size:clamp(34px,3.4vw,50px);letter-spacing:-.05em;line-height:1.16;font-weight:600;margin-bottom:0}
h3 {font-size:18px;letter-spacing:-.5px;font-weight:600;line-height:1.4;margin-bottom:15px}
p {line-height:1.85;color:var(--muted);font-size:14px}
.section {padding-block:112px}
.features,.privacy {display:grid;grid-template-columns:.95fr 1.5fr;gap:70px}
.section-heading .eyebrow {color:#707070;margin-bottom:23px}
.feature-grid {display:grid;grid-template-columns:1fr 1fr;gap:55px}
.feature {border-top:1px solid var(--line);padding-top:27px}
.feature p {margin-bottom:0;font-size:13px}
.feature-mark {height:32px;width:32px;display:block;margin-bottom:35px;object-fit:contain}
.how {background:#f6f6f6}
.steps {display:grid;grid-template-columns:repeat(3,1fr);gap:55px;list-style:none;padding:0;margin:65px 0 0}
.steps li {border-top:1px solid #d3d3d3;padding-top:25px}
.steps li>span {font-size:var(--text-meta);font-weight:400;color:#707070}
.steps p {font-size:20px;line-height:1.6;letter-spacing:-.5px;color:#252525;max-width:280px;margin:40px 0 0}
.privacy {align-items:start;border-top:1px solid var(--line)}
.privacy-copy p {font-size:13px;font-weight:400;line-height:1.85;margin:0 0 24px}
.privacy-copy p:last-child {margin-bottom:0}
.privacy-copy a {text-decoration:underline;text-underline-offset:4px}
.privacy-copy a:hover {color:#181818}
.download {display:grid;grid-template-columns:1.2fr 1fr;gap:120px;align-items:start}
.download h2 {margin-bottom:28px}
.download .eyebrow {margin-bottom:24px;color:#707070}
.download-copy>p:not(.eyebrow) {max-width:470px;font-size:13px}
.download-copy .open-source {margin:22px 0 0;color:#707070}
.download-actions {display:flex;flex-direction:column;gap:12px;min-width:0}
.button {width:100%;padding:20px 23px;font-size:var(--text-button);font-weight:600;line-height:1.5;display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid #1b1b1b;border-radius:2px;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.button-icon {width:20px;height:20px;flex:none;object-fit:contain}
.primary {background:#1b1b1b;color:white}
.primary .button-icon {filter:invert(1)}
.primary:hover {background:#393939}
.secondary {background:white;color:#222;border-color:#ccc}
.secondary:hover {background:#f3f3f3;border-color:#777}
.button:active {transform:translateY(2px)}
.download-status {font-size:var(--text-small);font-weight:400;line-height:1.7;margin:4px 0 0;min-height:21px;color:#707070}
footer {border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:36px}
footer .logo,footer .logo img {width:122px}
footer .logo img {margin-left:calc(-122px * 1.6 / 106)}
footer>span {font-size:var(--text-small);font-weight:400;color:#707070}
.reveal.entered {animation:enter .7s ease both}
@keyframes enter {from{opacity:.2;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px) {
  .hero {padding-block:65px 90px}
  .features,.privacy {gap:40px;grid-template-columns:1fr 1.4fr}
  .feature-grid {gap:35px}
  .section {padding-block:85px}
  .download {gap:50px}
  .steps {gap:30px}
  .steps p {font-size:18px}
}
@media(max-width:600px) {
  :root {--gutter:7vw;--header-height:82px;--text-small:12px;--text-meta:12px;--text-label:11px;--text-button:12px}
  .site-header {gap:16px}
  .logo,.logo img {width:132px}
  .logo img {margin-left:calc(-132px * 1.6 / 106)}
  .hero {padding-block:42px 70px}
  .hero h1 {line-height:1.13;margin-bottom:26px}
  .hero-description {line-height:1.5;letter-spacing:-.025em}
  .eyebrow {margin-bottom:24px}
  .section {padding-block:70px}
  .features,.privacy {display:block}
  .section-heading {margin-bottom:42px}
  .feature-grid {gap:36px 24px}
  .feature {padding-top:20px}
  .feature-mark {margin-bottom:23px}
  h3 {font-size:16px;line-height:1.4}
  .feature p {font-size:12px}
  .steps {grid-template-columns:1fr;margin-top:0;gap:25px}
  .steps li {display:grid;grid-template-columns:36px 1fr;gap:18px;padding-top:25px}
  .steps p {font-size:18px;margin:0;max-width:none}
  .steps li>span {padding-top:5px}
  .privacy-copy p {font-size:12px}
  .download {grid-template-columns:1fr;gap:32px}
  .button {padding:17px 18px}
  footer {padding-block:28px}
  footer .logo,footer .logo img {width:100px}
  footer .logo img {margin-left:calc(-100px * 1.6 / 106)}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*:before,*:after {animation:none!important;transition:none!important}
}

/* One cross-device ratio, 80% of the shared section-heading size.
   Integer fallbacks also preserve the rounded ratio on older browsers. */
:root {--section-title-size:34px;--download-title-size:27px}
@media(min-width:1001px) {
  :root {--section-title-size:45px;--download-title-size:36px}
  @supports(font-size:round(nearest,1px,1px)) {
    :root {--section-title-size:round(nearest,clamp(31px,3.06vw,45px),1px)}
  }
}
@media(max-width:600px) {
  :root {--section-title-size:30px;--download-title-size:24px}
}
#features-title,#privacy-title,#how-title {font-size:var(--section-title-size)}
#download-title {font-size:var(--download-title-size)}
@supports(font-size:round(nearest,1px,1px)) {
  #download-title {font-size:round(nearest,calc(var(--section-title-size) * .80),1px)}
}

/* Shared footer navigation: wrap gracefully without squeezing the copyright. */
footer {flex-wrap:wrap}
.footer-policy {font-size:var(--text-small);color:var(--muted);text-decoration:underline;text-underline-offset:4px;margin-left:auto}
footer>span {white-space:nowrap}
@media(max-width:600px) {footer>span {flex-basis:100%}}


/* Hero ratios measured at 1920 CSS px: R=45, H=73, S=26.
   Both derive from the unchanged reference size and round to whole pixels. */

:root {--hero-title-size:55px;--hero-subtitle-size:20px}
@media(min-width:1001px) {:root {--hero-title-size:73px;--hero-subtitle-size:26px}}
@media(max-width:600px) {:root {--hero-title-size:49px;--hero-subtitle-size:17px}}
@supports(font-size:round(nearest,1px,1px)) {
  :root {--hero-title-size:round(nearest,calc(var(--section-title-size) * 73 / 45),1px);--hero-subtitle-size:round(nearest,calc(var(--section-title-size) * 26 / 45),1px)}
}