:root {
  color-scheme:light;
  --ink:#142c39;
  --muted:#536775;
  --blue:#1765ce;
  --teal:#06756e;
  --line:#dce5e9;
  --paper:#f5f8fa
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.65
}
a {
  color:var(--blue);
  text-underline-offset:4px
}
a:hover {
  text-decoration:underline
}
button,a {
  touch-action:manipulation
}
:focus-visible {
  outline:3px solid var(--teal);
  outline-offset:5px
}
.wrap {
  max-width:1160px;
  margin:auto;
  padding:0 28px
}
.skip {
  position:absolute;
  left:12px;
  top:-80px;
  background:white;
  padding:12px;
  z-index:10
}
.skip:focus {
  top:12px
}
.topbar {
  border-bottom:1px solid var(--line);
  background:#ffffffed
}
.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:88px
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:22px;
  font-weight:750;
  color:var(--ink);
  text-decoration:none;
  letter-spacing:-.7px
}
.brand img {
  width:42px;
  height:42px;
  border-radius:11px
}
.links {
  display:flex;
  gap:28px;
  align-items:center
}
.links a {
  font-size:14px;
  color:var(--ink);
  text-decoration:none
}
.links a:hover,.links a[aria-current=page] {
  color:var(--blue)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 23px;
  background:var(--blue);
  border-radius:12px;
  color:#fff!important;
  font-weight:650;
  text-decoration:none!important
}
.button:hover {
  background:#0c50aa
}
.eyebrow {
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:750;
  color:var(--teal)
}
h1,h2,h3 {
  line-height:1.13;
  letter-spacing:-.035em
}
h1 {
  font-size:clamp(40px,5vw,64px);
  margin:20px 0 24px;
  max-width:720px
}
h2 {
  font-size:clamp(28px,3vw,40px);
  margin:14px 0 24px
}
h3 {
  font-size:23px;
  margin:14px 0
}
p {
  margin:0 0 20px
}
.lead {
  font-size:20px;
  color:var(--muted);
  line-height:1.65;
  max-width:610px
}
.hero {
  background:radial-gradient(ellipse at 92% 30%,#e3f3f0,transparent 60%),var(--paper);
  padding:68px 0
}
.hero-grid {
  display:grid;
  grid-template-columns:1.35fr .65fr;
  align-items:center;
  gap:65px
}
.hero h1 em {
  font-style:normal;
  color:var(--blue)
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  margin-top:30px
}
.small {
  font-size:13px;
  color:var(--muted)
}
.hero .small {
  margin-top:18px
}
.preview {
  margin:0;
  text-align:center
}
.phone {
  max-width:270px;
  margin:auto;
  padding:7px;
  background:#142c39;
  border-radius:34px;
  box-shadow:0 28px 60px #16384c25
}
.phone video {
  display:block;
  width:100%;
  aspect-ratio:652/1412;
  border-radius:27px;
  background:#e8eef4;
  object-fit:contain
}
.preview figcaption {
  margin-top:15px;
  font-size:12px;
  color:var(--muted)
}
section.section {
  padding:78px 0
}
.section-intro {
  max-width:680px
}
.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:36px
}
.card {
  padding:30px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff
}
.number {
  font-size:12px;
  color:var(--teal);
  font-weight:700;
  letter-spacing:1px
}
.card p {
  font-size:16px;
  color:var(--muted);
  margin:0
}
.tint {
  background:var(--paper)
}
.gallery {
  display:flex;
  gap:22px;
  overflow-x:auto;
  padding:14px 3px 26px;
  scroll-snap-type:x mandatory;
  scrollbar-color:#8da6b7 #e5ebee
}
.gallery figure {
  flex:0 0 240px;
  margin:0;
  scroll-snap-align:start
}
.gallery img {
  display:block;
  width:100%;
  height:auto;
  border-radius:18px;
  border:1px solid var(--line)
}
.gallery figcaption {
  font-size:14px;
  margin-top:12px;
  font-weight:600
}
.privacy-strip {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:60px;
  align-items:start
}
.privacy-strip p {
  color:var(--muted)
}
.footer {
  background:#132d3b;
  color:#c5d3db;
  padding:42px 0
}
.footer-inner {
  display:flex;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap
}
.footer a {
  color:#edf4f8
}
.footer nav {
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  font-size:14px
}
.footer p {
  font-size:12px;
  margin:20px 0 0
}
.doc-head {
  background:var(--paper);
  padding:50px 0 36px;
  border-bottom:1px solid var(--line)
}
.doc-head h1 {
  font-size:clamp(36px,5vw,52px);
  margin:12px 0 18px
}
.reading {
  max-width:800px;
  margin:auto;
  padding:48px 28px 72px
}
.reading h2 {
  font-size:25px;
  margin:38px 0 16px
}
.reading h2:first-child {
  margin-top:0
}
.reading p,.reading li {
  color:#374f5d
}
.reading li {
  margin-bottom:9px
}
.reading ul {
  padding-left:23px
}
.notice {
  border-left:3px solid var(--teal);
  background:var(--paper);
  padding:20px 23px;
  border-radius:0 12px 12px 0
}
.notice p:last-child {
  margin-bottom:0
}
.toc {
  display:flex;
  gap:12px 22px;
  flex-wrap:wrap;
  font-size:14px;
  margin:22px 0 0
}
.faq {
  border-bottom:1px solid var(--line);
  padding:23px 0
}
.faq h2 {
  font-size:21px;
  margin:0 0 13px
}
.faq p:last-child {
  margin:0
}
.faq:first-child {
  padding-top:0
}
@media(max-width:760px) {
  .wrap {
  padding:0 22px
}
.nav {
  min-height:76px;
  gap:12px
}
.brand {
  font-size:20px
}
.links {
  gap:16px
}
.links .button {
  display:none
}
.hero {
  padding:42px 0
}
.hero-grid {
  grid-template-columns:1fr;
  gap:36px
}
.hero h1 {
  font-size:43px
}
.lead {
  font-size:18px
}
.phone {
  max-width:245px
}
.cards {
  grid-template-columns:1fr;
  gap:16px
}
.section.section {
  padding:52px 0
}
.privacy-strip {
  grid-template-columns:1fr;
  gap:10px
}
.gallery figure {
  flex-basis:220px
}
.footer-inner {
  display:block
}
.footer nav {
  margin-top:24px;
  gap:17px
}
.reading {
  padding:34px 22px 52px
}
.doc-head {
  padding:35px 0 28px
}
.card {
  padding:25px
}

}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

}