@font-face {
  font-family: Geist;
  src: url('/assets/fonts/geist-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #112e2b;
  --muted: #48615e;
  --teal: #0b7a75;
  --teal-dark: #075c58;
  --pale: #c9eee8;
  --rule: #c9d9d6;
  --night: #102e2b;
  font-family: Geist, system-ui, sans-serif;
  color: var(--ink);
  background: #fff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  scrollbar-color: var(--teal) #e3efec;
  caret-color: var(--teal);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 108px; }
body { margin: 0; min-width: 280px; }
main { overflow: clip; }
img { display: block; max-width: 100%; height: auto; }
figure, p, h1, h2, h3, dl, dd, fieldset { margin: 0; }
a { color: inherit; text-underline-offset: .25em; text-decoration-thickness: 1px; }
button, input { font: inherit; }
a, summary, label { -webkit-tap-highlight-color: #b9e7df; }
[hidden] { display: none !important; }
::selection { background: var(--teal); color: #fff; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 5px; }
h1, h2, h3 { text-wrap: balance; font-weight: 550; }
h1, h2 { letter-spacing: -.035em; }
h2 { font-size: clamp(2rem, 3.6vw, 3.5rem); line-height: 1.08; }
p, dd { text-wrap: pretty; }
svg { flex: 0 0 auto; }
.page-width { width: min(100% - 96px, 1320px); margin-inline: auto; }
.section-space { padding-block: 128px; }
.section-body { font-size: 1.125rem; line-height: 1.65; color: var(--muted); max-width: 65ch; }
.section-note { font-size: .9rem; line-height: 1.65; color: var(--muted); max-width: 75ch; }
.skip-link { position: fixed; top: 12px; left: 20px; z-index: 20; padding: 14px 20px; background: var(--ink); color: #fff; transform: translateY(-170%); }
.skip-link:focus { transform: translateY(0); }

.site-header { background: #fff; border-bottom: 1px solid var(--rule); }
.header-inner { min-height: 88px; display: flex; align-items: center; gap: 40px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 1.2rem; font-weight: 650; letter-spacing: -.03em; text-decoration: none; }
.brand img { border-radius: 9px; }
.header-inner nav { margin-left: auto; display: flex; align-items: center; gap: 30px; }
.header-inner nav a, .language-switch a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; text-decoration: none; }
.header-inner nav a:hover, .language-switch a:hover { text-decoration: underline; }
.language-switch { display: flex; align-items: center; gap: 12px; flex-shrink: 0; font-size: .8rem; }
.language-switch > span:first-child { font-weight: 650; }
.language-divider { height: 18px; border-left: 1px solid var(--rule); }
.language-switch a { font-size: .8rem; color: var(--muted); }

.hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-block: 54px 36px; }
.hero-copy { padding-block: 24px; }
.hero h1 { max-width: 13ch; font-size: clamp(3rem, 6.1vw, 5.5rem); line-height: 1.02; }
.hero h1 span { display: block; }
.hero h1 span:last-child { color: var(--teal); }
.hero-body { font-size: 1.2rem; line-height: 1.6; color: var(--muted); max-width: 42ch; margin-top: 28px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 32px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 22px; min-height: 56px; padding: 16px 22px; border-radius: 8px; text-decoration: none; font-size: .95rem; font-weight: 600; line-height: 1.4; transition: background-color 180ms ease-out; }
.button svg, .text-link svg { transition: transform 240ms cubic-bezier(.16, 1, .3, 1); }
.button:hover svg, .text-link:hover svg { transform: translateX(4px); }
.button-primary { background: var(--teal); color: #fff; }
.button-primary:hover { background: var(--teal-dark); }
.button-light { background: #fff; color: var(--ink); }
.button-light:hover { background: var(--pale); }
.text-link { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: .95rem; font-weight: 550; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.availability { margin-top: 24px; font-size: .8rem; line-height: 1.55; color: var(--muted); }
.independence { max-width: 51ch; margin-top: 24px; font-size: .78rem; line-height: 1.55; color: var(--muted); }
.hero-stage { position: relative; min-height: 650px; background: var(--teal); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 35px 28px 24px; overflow: hidden; }
.stage-word { position: absolute; top: 27px; left: 22px; font-size: clamp(2rem, 3.8vw, 3.8rem); line-height: 1; letter-spacing: -.04em; font-weight: 550; color: #fff; user-select: none; }
.native-capture { position: relative; width: 244px; border-radius: 23px; box-shadow: 12px 22px 36px #053b395e; transform: rotate(-4deg); margin-top: 14px; }
.hero-stage figcaption { position: relative; align-self: stretch; display: grid; gap: 7px; color: #fff; font-size: .75rem; line-height: 1.55; padding-top: 27px; }
.hero-stage figcaption span:last-child { color: #fff; max-width: 62ch; font-size: .7rem; }

.section-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 88px; align-items: start; }
.capabilities { margin-top: 64px; border-top: 1px solid var(--rule); }
.capabilities > div { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; border-bottom: 1px solid var(--rule); padding-block: 27px; }
.capabilities dt { font-size: 1.6rem; letter-spacing: -.025em; font-weight: 550; }
.capabilities dd { font-size: 1.025rem; color: var(--muted); line-height: 1.65; max-width: 65ch; }
.product-section > .section-note { margin-top: 24px; margin-left: auto; }

.preview-section { background: var(--night); color: #fff; }
.preview-section ::selection { background: var(--pale); color: var(--ink); }
.preview-section :focus-visible { outline-color: #8ce1d7; }
.preview-intro { display: grid; grid-template-columns: 1fr 1.05fr; gap: 92px; }
.preview-intro .section-body { color: #d0e3de; }
.preview-disclosure { margin-top: 18px; color: #a7cdc5; font-size: .82rem; line-height: 1.6; }
.preview-workspace { max-width: 960px; margin: 52px auto 0; }
.preview-controls { border: 0; padding: 0; margin-bottom: 25px; display: flex; flex-wrap: wrap; gap: 10px; }
.preview-controls legend { margin-bottom: 15px; color: #c3ddd6; font-size: .85rem; }
.preview-controls label { position: relative; display: inline-flex; cursor: pointer; }
.preview-controls input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.preview-controls span { display: inline-flex; align-items: center; min-height: 48px; border: 1px solid #618e84; border-radius: 8px; padding: 11px 20px; font-size: .9rem; color: #e0eeea; transition: background-color 180ms ease-out; }
.preview-controls label:hover span { background: #214c43; }
.preview-controls input:checked + span { background: var(--pale); color: var(--ink); border-color: var(--pale); }
.preview-controls input:focus-visible { outline: none; }
.preview-controls input:focus-visible + span { outline: 3px solid #8ce1d7; outline-offset: 5px; }
.request-panel { background: #fff; color: var(--ink); border-radius: 14px; padding: 36px; min-height: 470px; }
.request-heading { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding-bottom: 24px; }
.request-heading h3 { font-size: 1.4rem; line-height: 1.35; letter-spacing: -.025em; }
.request-state { color: #075c58; background: #ddf2ec; font-size: .75rem; padding: 7px 9px; border-radius: 4px; font-weight: 600; white-space: nowrap; }
.request-state-blocked { background: #ffe9cd; color: #76400d; }
.request-context { display: flex; flex-wrap: wrap; column-gap: 64px; row-gap: 15px; border-block: 1px solid var(--rule); padding-block: 20px; }
.request-context dt, .request-label { color: var(--muted); font-size: .78rem; line-height: 1.5; }
.request-context dd { margin-top: 5px; font-size: .9rem; line-height: 1.5; }
.request-label { margin-top: 24px; margin-bottom: 9px; }
.request-line { display: flex; align-items: start; gap: 15px; font-size: .85rem; line-height: 1.7; }
.request-line code { overflow-wrap: anywhere; }
.request-method { color: var(--teal-dark); font-weight: 650; font-variant-numeric: tabular-nums; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.request-body { font-size: .82rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; color: #29463f; margin: 0; min-height: 24px; }
.request-outcome { border-top: 1px solid var(--rule); padding-top: 20px; margin-top: 24px; color: var(--muted); font-size: .85rem; line-height: 1.65; max-width: 85ch; }
.preview-caveat { max-width: 85ch; margin: 25px auto 0; color: #b6d7cf; font-size: .8rem; line-height: 1.7; }
.no-js-note { margin-top: 20px; color: #b6d7cf; font-size: .8rem; line-height: 1.6; }

.trust-section { display: grid; grid-template-columns: 1fr 1.05fr; gap: 112px; }
.trust-intro .section-body { margin-top: 26px; }
.trust-intro .text-link { margin-top: 24px; color: var(--teal-dark); }
.trust-list > div { padding-block: 26px; border-bottom: 1px solid var(--rule); }
.trust-list > div:first-child { border-top: 1px solid var(--rule); }
.trust-list dt { font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.4; }
.trust-list dd { margin-top: 12px; font-size: 1rem; color: var(--muted); line-height: 1.7; }

.widget-section { display: grid; grid-template-columns: .95fr 1fr; align-items: center; column-gap: 112px; background: var(--pale); padding: 52px 64px; }
.widget-stage { display: flex; flex-direction: column; align-items: center; }
.widget-stage img { width: 206px; border-radius: 22px; box-shadow: 12px 20px 30px #16584c25; }
.widget-stage figcaption { margin-top: 24px; font-size: .73rem; color: #315a51; line-height: 1.6; text-align: center; max-width: 38ch; }
.widget-copy h2 { font-size: clamp(2rem, 3.3vw, 3rem); }
.widget-copy .section-body { margin-top: 24px; color: #264e46; }
.widget-copy .section-note { margin-top: 24px; color: #315a51; }

.faq-section { display: grid; grid-template-columns: .85fr 1.2fr; gap: 112px; }
.faq-section h2 { max-width: 13ch; }
.faq-list { border-top: 1px solid var(--rule); }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list summary { position: relative; list-style: none; padding: 24px 40px 24px 0; font-size: 1.05rem; line-height: 1.5; font-weight: 550; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before, .faq-list summary::after { content: ''; position: absolute; right: 5px; top: calc(50% - 1px); background: var(--teal); width: 14px; height: 1.5px; }
.faq-list summary::after { transform: rotate(90deg); }
.faq-list details[open] summary::after { transform: rotate(0deg); }
.faq-list summary:hover { color: var(--teal-dark); }
.faq-list details p { font-size: .95rem; color: var(--muted); line-height: 1.7; padding: 0 30px 26px 0; max-width: 70ch; }
.closing-section { background: var(--teal); color: #fff; padding-block: 72px; }
.closing-section > div { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 64px; }
.closing-section h2 { font-size: clamp(2rem, 4vw, 3.8rem); }
.closing-section p { max-width: 58ch; margin-top: 22px; font-size: 1.05rem; line-height: 1.6; color: #fff; }
.closing-section :focus-visible { outline-color: #fff; }
.closing-section .closing-status { grid-column: 1 / -1; margin-top: 32px; padding-top: 24px; border-top: 1px solid #70b7ab; max-width: none; font-size: .8rem; }
.site-footer { padding-block: 50px 35px; display: grid; grid-template-columns: 1fr auto; column-gap: 40px; row-gap: 30px; }
.footer-brand { font-size: 1.2rem; font-weight: 650; letter-spacing: -.03em; text-decoration: none; }
.site-footer p { color: var(--muted); font-size: .85rem; line-height: 1.6; margin-top: 8px; }
.footer-links { display: flex; align-items: start; gap: 28px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: .85rem; }
.site-footer .footer-disclaimer { grid-column: 1 / -1; font-size: .72rem; margin-top: 0; }

.privacy-content { padding-block: 88px 112px; }
.privacy-content article { max-width: 790px; margin-inline: auto; }
.privacy-content h1 { font-size: clamp(2.5rem, 5vw, 4.8rem); line-height: 1.08; max-width: 16ch; }
.privacy-intro { font-size: 1.2rem; color: var(--muted); line-height: 1.65; margin-top: 30px; }
.privacy-content section { margin-top: 48px; }
.privacy-content h2 { font-size: 1.6rem; line-height: 1.3; margin-bottom: 14px; }
.privacy-content section p { font-size: 1rem; color: var(--muted); line-height: 1.8; }
.privacy-content article > .text-link { margin-top: 30px; color: var(--teal-dark); }
.privacy-back { margin-top: 48px; }
.privacy-page .site-footer { border-top: 1px solid var(--rule); }

@media (min-width: 1550px) {
  .hero { padding-block: 72px 36px; }
  .hero-stage { min-height: 700px; }
  .native-capture { width: 264px; }
}

@media (max-width: 1120px) {
  .page-width { width: calc(100% - 64px); }
  .hero { gap: 32px; }
  .hero h1 { font-size: clamp(2.7rem, 5.7vw, 4.25rem); }
  .hero-actions { gap: 12px 22px; }
  .hero-stage { min-height: 610px; }
  .native-capture { width: 225px; }
  .section-intro, .preview-intro, .trust-section, .faq-section { gap: 56px; }
  .widget-section { gap: 56px; padding: 48px; }
}

@media (max-width: 820px) {
  .page-width { width: calc(100% - 48px); }
  .header-inner { min-height: 76px; gap: 22px; }
  .brand { font-size: 1.05rem; gap: 9px; }
  .brand img { width: 32px; height: 32px; }
  .header-inner nav { gap: 18px; }
  .header-inner nav .nav-secondary { display: none; }
  .section-space { padding-block: 88px; }
  .hero { grid-template-columns: 1fr; gap: 36px; padding-top: 32px; }
  .hero-copy { max-width: 650px; padding-block: 0; }
  .hero h1 { font-size: clamp(3.2rem, 8.7vw, 4.9rem); max-width: none; }
  .hero-body { max-width: 49ch; font-size: 1.125rem; margin-top: 24px; }
  .hero-actions { margin-top: 26px; gap: 16px 24px; }
  .availability { margin-top: 18px; }
  .independence { margin-top: 14px; max-width: 64ch; }
  .hero-stage { min-height: 650px; padding-top: 35px; }
  .native-capture { width: 244px; }
  .stage-word { font-size: 3.4rem; }
  .hero-stage figcaption { max-width: 510px; margin-inline: auto; }
  .section-intro, .preview-intro { grid-template-columns: 1fr; gap: 28px; }
  .capabilities { margin-top: 40px; }
  .capabilities > div { grid-template-columns: .75fr 1.25fr; gap: 32px; }
  .capabilities dt { font-size: 1.35rem; }
  .product-section > .section-note { margin-left: 0; }
  .trust-section { grid-template-columns: 1fr; gap: 40px; }
  .trust-intro { max-width: 650px; }
  .trust-list { display: grid; grid-template-columns: 1fr; }
  .widget-section { grid-template-columns: .7fr 1fr; gap: 36px; padding: 36px; }
  .widget-stage img { width: 175px; }
  .widget-copy h2 { font-size: 2.1rem; }
  .widget-copy .section-body { font-size: 1rem; }
  .faq-section { grid-template-columns: 1fr; gap: 40px; }
  .faq-section h2 { max-width: 20ch; }
  .closing-section { padding-block: 56px; }
  .closing-section > div { gap: 26px; }
  .closing-section h2 { font-size: 2.5rem; }
  .closing-section p { font-size: 1rem; }
}

@media (max-width: 560px) {
  .header-inner { gap: 12px; justify-content: space-between; }
  .header-inner nav { display: none; }
  .brand { font-size: 1rem; }
  .language-switch { gap: 9px; }
  .language-switch a { min-width: 44px; justify-content: center; }
  .hero { padding-top: 36px; gap: 30px; }
  .hero h1 { font-size: clamp(2.45rem, 11.3vw, 3.7rem); line-height: 1.05; }
  .hero-body { font-size: 1.06rem; line-height: 1.6; }
  .hero-actions { gap: 8px 20px; }
  .button { min-height: 54px; padding: 15px 18px; font-size: .9rem; gap: 18px; }
  .hero-actions .text-link { font-size: .85rem; }
  .hero-stage { min-height: 625px; padding: 35px 24px 22px; }
  .stage-word { font-size: clamp(1.8rem, 9vw, 3rem); top: 22px; left: 20px; }
  .native-capture { width: 225px; margin-top: 15px; border-radius: 21px; }
  .hero-stage figcaption { padding-top: 24px; font-size: .72rem; }
  .hero-stage figcaption span:last-child { font-size: .67rem; }
  .section-space { padding-block: 72px; }
  h2 { font-size: 2.05rem; }
  .section-body { font-size: 1.025rem; line-height: 1.7; }
  .capabilities > div { grid-template-columns: 1fr; gap: 10px; padding-block: 23px; }
  .capabilities dt { font-size: 1.3rem; }
  .capabilities dd { font-size: .96rem; }
  .preview-workspace { margin-top: 32px; }
  .preview-controls { gap: 8px; }
  .preview-controls span { font-size: .8rem; padding: 10px 12px; }
  .preview-controls legend { font-size: .8rem; }
  .request-panel { padding: 23px 20px; min-height: 520px; }
  .request-heading { gap: 12px; padding-bottom: 20px; }
  .request-heading h3 { font-size: 1.2rem; }
  .request-context { column-gap: 24px; }
  .request-context dd { font-size: .82rem; }
  .request-line { gap: 10px; font-size: .73rem; }
  .request-body { font-size: .72rem; }
  .request-outcome { font-size: .8rem; }
  .preview-caveat { font-size: .75rem; }
  .trust-list dt { font-size: 1.08rem; }
  .trust-list dd { font-size: .95rem; }
  .widget-section { grid-template-columns: 1fr; padding: 36px 24px; gap: 35px; }
  .widget-copy { grid-row: 1; }
  .widget-copy h2 { font-size: 2rem; }
  .widget-stage img { width: 206px; }
  .widget-stage figcaption { max-width: 42ch; }
  .faq-list summary { font-size: .98rem; }
  .faq-list details p { padding-right: 8px; font-size: .9rem; }
  .closing-section > div { grid-template-columns: 1fr; justify-items: start; gap: 28px; }
  .closing-section h2 { font-size: 2.4rem; }
  .closing-section p { margin-top: 18px; }
  .closing-section .closing-status { margin-top: 0; }
  .site-footer { grid-template-columns: 1fr; gap: 18px; padding-block: 36px 28px; }
  .footer-links { gap: 26px; }
  .privacy-content { padding-block: 52px 72px; }
  .privacy-content h1 { font-size: 2.8rem; }
  .privacy-intro { font-size: 1.06rem; margin-top: 24px; }
  .privacy-content h2 { font-size: 1.45rem; }
  .privacy-content section p { font-size: .95rem; }
}

@media (max-width: 360px) {
  .page-width { width: calc(100% - 40px); }
  .brand { font-size: .94rem; gap: 7px; }
  .brand img { width: 29px; height: 29px; }
  .language-switch { gap: 6px; }
  .language-switch a { font-size: .73rem; }
  .hero h1 { font-size: 2.4rem; }
  .hero-stage { padding-inline: 18px; }
  .native-capture { width: 210px; }
  .preview-controls span { padding-inline: 9px; font-size: .73rem; }
  .request-panel { padding-inline: 16px; }
  .widget-section { padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .native-capture { transform: none; }
  .button:hover svg, .text-link:hover svg { transform: none; }
}