:root {
  --paper:#f0fdfa;
  --ink:#0f172a;
  --muted:#475569;
  --accent:#0d9488;
  --line:#ccfbf1;
  --soft:#f0fdfa;
  --white:#fff;
  --radius:14px;
  color-scheme:light;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px;
}

body {
  margin:0;
  background:linear-gradient(150deg, #f0fdfa 0%, #ccfbf1 55%, #f8fafc 100%);
  color:var(--ink);
  font-family:"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}

button,input {
  font:inherit;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:default;
}

a {
  color:#0f766e;
  text-underline-offset:4px;
}

a:hover {
  color:#115e59;
}

button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #0f766e;
  outline-offset:5px;
}

h1,h2,h3,p {
  margin:0;
}

button {
  color:inherit;
}

::selection {
  background:#99f6e4;
  color:var(--ink);
}

[hidden] {
  display:none!important;
}

.wrap {
  max-width:1192px;
  padding:0 36px;
  margin:0 auto;
}

.skip-link {
  position:absolute;
  z-index:5;
  top:8px;
  left:12px;
  background:var(--white);
  padding:12px;
  transform:translateY(-180%);
}

.skip-link:focus {
  transform:translateY(0);
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.site-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:30px 0;
}

.brand-link {
  display:inline-flex;
  gap:10px;
  align-items:center;
  text-decoration:none;
  color:var(--ink);
}

.logo {
  display:flex;
  justify-content:center;
  align-items:center;
  flex:none;
  width:35px;
  height:35px;
  background:var(--accent);
  border-radius:10px;
}

.logo svg {
  width:22px;
  height:22px;
}

.brand {
  font-size:23px;
  font-weight:750;
  letter-spacing:-1px;
  color:var(--ink);
}

.brand-dot {
  color:#14b8a6;
}

.site-head nav {
  display:flex;
  align-items:center;
  gap:30px;
  font-size:14px;
  font-weight:550;
}

.site-head nav a {
  color:var(--ink);
  text-decoration:none;
}

.site-head nav a:hover {
  text-decoration:underline;
}

.nav-install {
  border:1px solid #99d5ce;
  border-radius:7px;
  padding:9px 15px;
}

.nav-install:hover {
  background:var(--soft);
}

.nav-install span {
  margin-left:9px;
}

.hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:54px;
  align-items:center;
  padding:65px 0 83px;
}

.eyebrow {
  font-size:11px;
  font-weight:650;
  letter-spacing:1.4px;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:9px;
  line-height:1.6;
  color:#0f766e;
}

.little-tab {
  width:14px;
  height:12px;
  border:1.5px solid var(--accent);
  border-top-width:4px;
  border-radius:3px;
  display:inline-block;
}

.hero h1 {
  font-size:clamp(48px,5.6vw,73px);
  line-height:1.07;
  letter-spacing:-3.4px;
  font-weight:650;
  margin:24px 0;
}

.hero h1 em {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  color:#0f766e;
  letter-spacing:-3px;
}

.sub {
  font-size:17px;
  line-height:1.75;
  color:var(--muted);
  max-width:400px;
}

.hero-action {
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:29px;
}

.hero-action>span {
  font-size:12px;
  color:var(--muted);
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  border:1px solid var(--accent);
  border-radius:7px;
  padding:14px 21px;
  background:#0f766e;
  color:white;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  transition:background .15s,transform .15s;
}

.button:hover {
  background:#115e59;
  color:white;
  transform:translateY(-2px);
}

.button span {
  font-size:18px;
  font-weight:400;
}

.release-note {
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--muted);
  font-size:11px;
  text-decoration:none;
  margin-top:25px;
}

.release-note:hover {
  color:#0f766e;
  text-decoration:underline;
}

.new-label {
  padding:2px 7px;
  border:1px solid #99d5ce;
  border-radius:4px;
  color:#0f766e;
  font-size:10px;
}

.how-section {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:95px;
  padding:72px 0 88px;
  border-top:1px solid var(--line);
}

.section-intro h2,.reassurance h2 {
  font-size:35px;
  line-height:1.2;
  letter-spacing:-1.4px;
  font-weight:600;
  margin:17px 0;
}

.section-intro>p:not(.eyebrow),.reassurance p:not(.eyebrow) {
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:20px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid #5bb8ae;
  padding-bottom:5px;
  margin-top:24px;
  background:none;
  border-top:none;
  border-left:none;
  border-right:none;
}

.text-link:hover {
  color:#115e59;
  border-bottom-color:#115e59;
}

.feature-row {
  display:flex;
  gap:20px;
  padding:25px 0;
  border-bottom:1px solid var(--line);
}

.feature-row:first-child {
  padding-top:0;
}

.feature-row:last-child {
  border-bottom:0;
  padding-bottom:0;
}

.feature-number {
  font-size:11px;
  color:#64748b;
  padding-top:5px;
}

.feature-row h3 {
  font-size:17px;
  letter-spacing:-.4px;
  font-weight:600;
  margin-bottom:9px;
}

.feature-row p {
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
  max-width:390px;
}

.feature-symbol {
  margin-left:auto;
  font-size:27px;
  color:#0d9488;
  flex:none;
  width:32px;
  text-align:center;
}

.popular-feature {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  background:#0f766e;
  color:#ffffff;
  padding:49px 50px 52px;
  border-radius:16px;
}

.popular-feature .eyebrow {
  color:#ccfbf1;
  font-size:9px;
  letter-spacing:.7px;
  gap:10px;
}

.light-label {
  border:1px solid #5cb8af;
  padding:3px 7px;
  border-radius:4px;
}

.popular-copy h2 {
  font-size:40px;
  font-weight:500;
  line-height:1.13;
  letter-spacing:-1.4px;
  margin:22px 0 18px;
}

.popular-copy>p:not(.eyebrow) {
  font-size:14px;
  line-height:1.8;
  color:#e2f6f3;
  max-width:370px;
}

.light-link {
  color:#ffffff;
  border-bottom-color:#5cb8af;
  font-size:12px;
}

.light-link:hover {
  color:white;
  border-bottom-color:white;
}

.reassurance {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:start;
  padding:78px 0 76px;
}

.reassurance h2 {
  font-size:29px;
  margin:14px 0 0;
}

.reassurance .text-link {
  margin-top:17px;
}

.closing {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:42px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
}

.closing h2 {
  font-size:27px;
  font-weight:550;
  letter-spacing:-1px;
  margin-bottom:8px;
}

.closing p {
  font-size:13px;
  color:var(--muted);
}

.site-foot {
  display:flex;
  align-items:center;
  gap:25px;
  padding:35px 0;
  font-size:11px;
  color:var(--muted);
}

.site-foot .brand {
  font-size:19px;
}

.site-foot nav {
  margin-left:auto;
  display:flex;
  gap:22px;
}

.site-foot a {
  color:var(--muted);
  text-decoration:none;
}

.site-foot a:hover {
  color:#0f766e;
  text-decoration:underline;
}

.document-page {
  line-height:1.75;
}

.document-page .site-head {
  max-width:880px;
  margin:auto;
  padding:30px 36px;
}

.back-home {
  font-size:13px;
  text-decoration:none;
}

.document-page .wrap {
  max-width:880px;
  padding-bottom:24px;
}

.card-wrap {
  background:white;
  border:1px solid var(--line);
  border-radius:14px;
  padding:46px 52px;
  margin-top:16px;
}

.card-wrap h1 {
  font-size:43px;
  letter-spacing:-1.7px;
  line-height:1.2;
  margin:0 0 14px;
  font-weight:600;
}

.card-wrap .lede {
  color:var(--muted);
  font-size:17px;
  margin-bottom:35px;
}

.card-wrap h2 {
  font-size:23px;
  letter-spacing:-.5px;
  margin:38px 0 13px;
  font-weight:600;
}

.card-wrap h3 {
  font-size:16px;
  margin:25px 0 7px;
  font-weight:650;
  line-height:1.55;
}

.card-wrap p,.card-wrap li {
  font-size:14px;
  color:#334155;
}

.card-wrap p+p {
  margin-top:15px;
}

.card-wrap li {
  margin:7px 0;
}

.card-wrap ul {
  padding-left:21px;
}

.card-wrap code {
  overflow-wrap:anywhere;
}

.card-wrap .date,.card-wrap .updated {
  font-size:12px;
  color:var(--muted);
}

.release {
  padding-bottom:15px;
  border-bottom:1px solid var(--line);
}

.release:last-child {
  border-bottom:none;
}

.release h2 {
  margin-bottom:3px;
}

.document-page .site-foot {
  gap:20px;
  flex-wrap:wrap;
}

@media(min-width:1400px) {
  .hero {
    padding-top:85px;
    padding-bottom:100px;
  }
}

@media(max-width:1000px) {
  .hero {
    gap:30px;
  }
  .hero h1 {
    font-size:58px;
    letter-spacing:-2.6px;
  }
  .hero h1 em {
    letter-spacing:-2px;
  }

  .how-section {
    gap:50px;
  }
  .popular-feature {
    padding:38px;
    gap:30px;
  }

  .reassurance {
    gap:50px;
  }

  .hero-action {
    gap:12px;
  }
  .hero-action>span {
    font-size:10px;
  }
}

@media(max-width:760px) {
  .wrap {
    padding:0 24px;
  }
  .site-head {
    padding:22px 0;
  }
  .site-head nav {
    gap:18px;
    font-size:12px;
  }
  .site-head nav>a:first-child {
    display:none;
  }
  .nav-install {
    padding:8px 11px;
  }
  .brand {
    font-size:21px;
  }
  .hero {
    grid-template-columns:1fr;
    padding:43px 0 54px;
    gap:42px;
  }
  .hero-copy {
    max-width:510px;
  }
  .hero h1 {
    font-size:60px;
    line-height:1.05;
    margin:20px 0;
  }
  .desktop-break {
    display:none;
  }
  .sub {
    max-width:440px;
    font-size:16px;
  }
  .hero-action>span {
    font-size:12px;
  }

  .how-section {
    grid-template-columns:1fr;
    gap:34px;
    padding:48px 0;
  }
  .section-intro h2 {
    font-size:33px;
  }
  .section-intro>p:not(.eyebrow) {
    max-width:440px;
  }
  .feature-row {
    padding:23px 0;
  }
  .feature-row p {
    max-width:none;
    font-size:14px;
  }
  .feature-list {
    max-width:560px;
  }
  .popular-feature {
    grid-template-columns:1fr;
    gap:32px;
    padding:32px;
  }
  .popular-copy h2 {
    font-size:37px;
  }
  .popular-copy>p:not(.eyebrow) {
    max-width:none;
  }

  .reassurance {
    grid-template-columns:1fr;
    gap:20px;
    padding:48px 0;
  }
  .reassurance h2 {
    font-size:29px;
  }
  .closing {
    align-items:start;
    flex-direction:column;
    padding:32px 0;
  }
  .closing h2 {
    font-size:26px;
  }
  .site-foot {
    flex-wrap:wrap;
    gap:15px;
  }
  .site-foot nav {
    margin:3px 0 0;
    width:100%;
    gap:26px;
  }
  .footer-credit {
    margin-left:auto;
  }
  .document-page .site-head {
    padding:22px 24px;
  }
  .card-wrap {
    padding:28px 24px;
  }
  .card-wrap h1 {
    font-size:36px;
  }
  .card-wrap .lede {
    font-size:15px;
  }
  .card-wrap h2 {
    font-size:22px;
  }
  .document-page .site-foot {
    gap:16px;
    font-size:12px;
  }
}

@media(max-width:390px) {
  .wrap {
    padding:0 18px;
  }
  .hero h1 {
    font-size:52px;
    letter-spacing:-2.5px;
  }
  .hero-action {
    gap:13px;
  }

  .popular-feature {
    padding:26px 22px;
  }
  .popular-feature .eyebrow {
    font-size:8px;
    gap:7px;
  }
  .popular-copy h2 {
    font-size:33px;
  }

  .feature-row {
    gap:13px;
  }
  .feature-symbol {
    width:24px;
  }
  .card-wrap {
    padding:24px 20px;
  }
  .site-head nav {
    gap:12px;
  }
  .site-head nav>a:nth-child(2) {
    display:none;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
  }
}


.product-shot {
  width:100%;
  max-width:400px;
  justify-self:center;
  margin:0;
}
.product-shot img, .popular-screenshot img {
  display:block;
  width:100%;
  height:auto;
  border:1px solid #cbd5e1;
  border-radius:14px;
  box-shadow:0 24px 48px -20px rgba(15,23,42,.25);
}
.product-shot figcaption {
  color:#475569;
  font-size:11px;
  text-align:center;
  margin-top:16px;
}
.popular-feature {
  align-items:center;
}
.popular-screenshot {
  width:100%;
  max-width:310px;
  justify-self:center;
  margin:0;
}
.popular-screenshot figcaption {
  font-size:10px;
  color:#ccfbf1;
  text-align:center;
  margin-top:16px;
}
@media (max-width:760px) {
  .product-shot { max-width:380px; }
  .popular-screenshot { max-width:310px; }
}

/* Guides share the existing document layout and brand. */
.site-foot nav { flex-wrap:wrap; }
.guide-feature-link { display:inline-block; margin-top:10px; font-size:12px; }
.guide-feature-link span { margin-left:8px; }
.breadcrumbs { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); margin-bottom:24px; }
.breadcrumbs a { text-decoration:none; }
.breadcrumbs a:hover { text-decoration:underline; }
.guide-page h1 { font-size:clamp(29px,4vw,41px); line-height:1.2; }
.guide-page .guide-meta { font-size:11px; color:var(--muted); margin:0 0 20px; }
.guide-page .lede { font-size:16px; line-height:1.8; }
.guide-toc { display:flex; flex-wrap:wrap; gap:9px 19px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; font-size:12px; margin-bottom:34px; }
.guide-toc>span { width:100%; color:var(--muted); font-size:11px; font-weight:600; }
.guide-toc a { text-decoration:none; }
.guide-toc a:hover { text-decoration:underline; }
.guide-steps { padding-left:24px; }
.guide-steps li { padding-left:6px; margin:15px 0; }
.guide-steps li::marker { color:#0f766e; font-weight:650; }
.guide-shot { max-width:400px; margin:30px auto 38px; }
.guide-shot img { display:block; width:100%; height:auto; border:1px solid #e2e8f0; border-radius:10px; background:#f8fafc; }
.guide-shot figcaption { font-size:11px; line-height:1.6; color:var(--muted); margin-top:10px; }
.guide-table { overflow-x:auto; margin:20px 0; }
.guide-table table { border-collapse:collapse; width:100%; font-size:13px; line-height:1.7; }
.guide-table th, .guide-table td { border:1px solid #e2e8f0; padding:12px; text-align:left; vertical-align:top; }
.guide-table thead th { background:#f0fdfa; color:#0f766e; font-weight:600; }
.guide-table tbody th { min-width:125px; font-weight:600; }
.guide-table td { color:#475569; }
.guide-install { margin-top:38px; padding:24px; background:#f0fdfa; border:1px solid #ccfbf1; border-radius:10px; }
.guide-install .button { margin-top:18px; }
.related-guides { border-top:1px solid #e2e8f0; margin-top:36px; }
.related-guides h2 { margin-top:25px; font-size:20px; }
.guide-cards { list-style:none; padding:0!important; margin:0 0 32px; }
.guide-cards>li { margin:0; border-top:1px solid #e2e8f0; }
.guide-cards>li:last-child { border-bottom:1px solid #e2e8f0; }
.guide-cards a { display:block; padding:25px 0; text-decoration:none; }
.guide-cards a:hover h2 { text-decoration:underline; }
.guide-cards h2 { margin:0 0 10px; font-size:22px; }
.guide-cards a>span { display:inline-block; margin-top:14px; font-size:12px; font-weight:600; }
@media(max-width:390px) {
  .guide-page .card-wrap { padding:24px 18px; }
  .guide-page .lede { font-size:15px; }
  .guide-install { padding:17px; }
  .guide-install .button { font-size:12px; gap:12px; padding:12px; }
  .guide-table th,.guide-table td { padding:9px; }
  .guide-table tbody th { min-width:100px; }
}