* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px}
body {
  margin:0;
  font-family:"Segoe UI",Arial,sans-serif;
  color:#173c42;
  background:#fbfaf6;
  font-size:17px;
  line-height:1.65}
a {
  color:inherit;
  text-decoration-thickness:1px;
  text-underline-offset:5px}
a:hover {
  color:#27786b}
a:focus-visible,summary:focus-visible {
  outline:3px solid #b85b2e;
  outline-offset:5px}
h1,h2,h3,p {
  margin-top:0}
h1,h2,h3 {
  line-height:1.08;
  letter-spacing:-.045em}
h1 {
  font-size:clamp(3.3rem,5.5vw,5.5rem);
  font-weight:500;
  margin-bottom:28px}
h2 {
  font-size:clamp(2.35rem,3.5vw,3.8rem);
  font-weight:500;
  margin-bottom:24px}
h3 {
  font-size:1.65rem;
  font-weight:550;
  line-height:1.2}
p {
  color:#536c6e}
em {
  font-family:Georgia,serif;
  font-weight:400;
  color:#35786c}
img {
  max-width:100%;
  height:auto}
hr {
  border:0;
  border-top:1px solid #d4dfd9;
  margin:32px 0}
.container {
  width:min(1280px,90%);
  margin-inline:auto}
.narrow {
  max-width:760px}
.header {
  position:sticky;
  top:0;
  z-index:10;
  background:#fbfaf6f5;
  border-bottom:1px solid #dde4de}
.header-inner {
  height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px}
.brand {
  display:inline-flex;
  align-items:center}
.desktop-nav {
  display:flex;
  align-items:center;
  gap:38px;
  font-size:15px;
  font-weight:600}
.desktop-nav a:not(.button) {
  text-decoration:none}
.desktop-nav a[aria-current=page] {
  text-decoration:underline}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  background:#123b42;
  color:#fff;
  padding:17px 24px;
  border-radius:7px;
  text-decoration:none;
  font-size:15px;
  font-weight:650;
  line-height:1.45;
  transition:background .15s}
.button:hover {
  background:#245d60;
  color:white}
.button.small {
  padding:12px 20px}
.button.light {
  background:#d8f0df;
  color:#123b42}
.button.light:hover {
  background:white}
.text-link {
  font-size:15px;
  font-weight:600}
.actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  margin:30px 0}
.caption {
  font-size:13px;
  color:#697d7c}
.eyebrow {
  font-size:11px;
  letter-spacing:.16em;
  font-weight:700;
  color:#376d63;
  margin-bottom:27px}
.dot {
  display:inline-block;
  width:7px;
  height:7px;
  background:#62947d;
  border-radius:50%;
  margin-right:7px}
.lead {
  font-size:20px;
  line-height:1.65}
.hero {
  padding:75px 0 85px;
  overflow:hidden}
.hero-grid {
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:45px;
  align-items:center}
.hero .caption {
  margin:24px 0 0}
.product-scene {
  position:relative;
  padding:20px 0 60px 10px;
  isolation:isolate}
.product-scene:before {
  content:"";
  position:absolute;
  inset:50px -90px 10px 30px;
  border-radius:50% 50% 20% 30%;
  background:#e4ece0;
  z-index:-1;
  transform:rotate(-8deg)}
.scene-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  letter-spacing:.14em;
  font-weight:650;
  padding:0 20px 16px}
.scene-label span:last-child {
  font-size:35px}
.workspace-preview {
  background:white;
  border:1px solid #d7e1dc;
  border-radius:12px;
  box-shadow:0 24px 60px #17423816;
  transform:rotate(-2deg);
  overflow:hidden}
.preview-bar {
  padding:15px;
  display:flex;
  gap:18px;
  align-items:center;
  border-bottom:1px solid #e6ebe7;
  font-size:9px;
  color:#647c78}
.preview-bar>span:nth-child(2) {
  flex:1}
.avatar {
  padding:7px;
  background:#e9eee4;
  border-radius:50%;
  font-size:10px}
.preview-body {
  display:flex}
.preview-side {
  width:48px;
  border-right:1px solid #e6ebe7;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  padding-top:22px;
  font-size:17px;
  color:#88a399}
.preview-side b {
  color:#225349}
.preview-content {
  padding:26px 22px 20px;
  flex:1;
  min-width:0}
.preview-heading {
  display:flex;
  justify-content:space-between;
  align-items:center}
.preview-heading small {
  font-size:8px;
  letter-spacing:.14em}
.preview-heading h2 {
  font-size:28px;
  line-height:1.15;
  margin:8px 0 22px}
.pill {
  font-size:10px;
  border-radius:20px;
  background:#edf5eb;
  padding:5px 9px;
  white-space:nowrap;
  display:inline-block;
  color:#386546}
.pill.outline {
  background:#f8f8f4;
  color:#6b7668;
  border:1px solid #dfe5da}
.mini-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:24px}
.mini-stats>div {
  padding:12px;
  background:#f7f8f4;
  border-radius:5px;
  display:flex;
  flex-direction:column}
.mini-stats strong {
  font-size:25px;
  font-weight:500;
  line-height:1.3}
.mini-stats span {
  font-size:9px;
  color:#60766c}
.preview-section {
  display:flex;
  justify-content:space-between;
  font-size:11px;
  padding-bottom:12px}
.preview-section span {
  color:#718178;
  font-size:9px}
.visit-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 0;
  border-top:1px solid #e6ebe7;
  font-size:9px}
.visit-row time {
  font-size:10px}
.visit-row div {
  flex:1}
.visit-row b,.visit-row small {
  display:block}
.visit-row small {
  color:#708175;
  margin-top:4px}
.visit-dot {
  width:7px;
  height:7px;
  background:#4c9276;
  border-radius:50%}
.visit-dot.pale {
  background:#c3cdb5}
.preview-note {
  background:#eef4e9;
  border-radius:4px;
  padding:10px;
  font-size:9px;
  margin-top:10px}
.preview-note span {
  margin-right:8px}
.floating-note {
  position:absolute;
  right:-10px;
  bottom:18px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:20px 26px;
  background:#f4e9d7;
  box-shadow:0 10px 25px #173c4212;
  border:1px solid #e8dcc9;
  border-radius:8px;
  transform:rotate(3deg);
  font-size:16px;
  line-height:1.3}
.floating-note small {
  display:block;
  font-size:10px;
  margin-top:8px;
  color:#717466}
.note-icon {
  font-size:30px}
.illustration-note {
  font-size:9px;
  position:absolute;
  bottom:-15px;
  left:20px}
.principle-strip {
  border-block:1px solid #dce4dc;
  background:#f1f3eb}
.principle-strip .container {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-block:24px;
  font-size:14px;
  color:#607268}
.section {
  padding-top:95px;
  padding-bottom:95px}
.section-heading {
  max-width:730px;
  margin-bottom:52px}
.section-heading>p:last-child {
  max-width:650px}
.editorial-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:50px}
.editorial-grid article {
  border-top:1px solid #becfc3;
  padding-top:26px}
.number {
  font-size:10px;
  letter-spacing:.15em;
  display:block;
  color:#738b76;
  margin-bottom:28px}
.editorial-grid h3 {
  font-size:28px}
.editorial-grid p {
  font-size:16px}
.dark-section {
  background:#123b42;
  color:#f7f7ec;
  padding:85px 0}
.dark-section p {
  color:#c3d6d1}
.dark-section em {
  color:#a8d2ad}
.dark-section .eyebrow {
  color:#a2ccb9}
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:start}
.steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  list-style:none;
  padding:0;
  margin:0}
.steps li {
  border-top:1px solid #c8d7ca;
  padding-top:20px}
.steps li>span {
  font-size:12px;
  color:#7c917f;
  display:block;
  margin-bottom:25px}
.steps h3 {
  font-size:26px}
.steps p {
  font-size:15px}
.callout {
  background:#e9eedf;
  padding:55px 65px;
  border-radius:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  margin-bottom:90px}
.callout h2 {
  font-size:44px}
.callout p:last-child {
  margin:0}
.callout .button {
  flex-shrink:0}
footer {
  background:#f2f2ea;
  padding:55px 0 22px;
  border-top:1px solid #dce3d8}
.footer-top {
  display:grid;
  grid-template-columns:2fr 1fr 1.2fr;
  gap:35px;
  font-size:14px}
.footer-top strong {
  display:block;
  font-size:12px;
  margin-bottom:18px}
.footer-top>div>a:not(.brand) {
  display:block;
  margin:9px 0;
  text-decoration:none}
.footer-top p {
  font-size:14px;
  margin-top:16px}
.footer-bottom {
  border-top:1px solid #d9e0d4;
  margin-top:40px;
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:11px;
  color:#6d7b70}
.page-intro {
  padding:80px 0 65px}
.page-intro h1 {
  max-width:1000px}
.anchor-nav {
  display:flex;
  gap:30px;
  flex-wrap:wrap;
  margin-top:40px;
  font-size:14px}
.muted {
  background:#f0f3e9}
.feature-list article {
  border-top:1px solid #cbd9cb;
  padding:24px 0 12px}
.feature-list h3 {
  font-size:24px}
.feature-list p {
  font-size:16px}
.faqs {
  max-width:900px;
  margin-top:35px}
.faqs details {
  border-top:1px solid #ccd8ce;
  padding:20px 0}
.faqs summary {
  font-weight:600;
  cursor:pointer}
.faqs p {
  padding-top:18px;
  margin-bottom:0}
.pricing-panel,.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  margin-bottom:90px}
.pricing-panel {
  border:1px solid #cedbce;
  border-radius:12px;
  padding:60px;
  background:#f1f4e9}
.pricing-panel .pill {
  margin-bottom:25px;
  background:#dce9d5}
.pricing-panel h3 {
  font-size:25px}
.check-list {
  padding-left:20px}
.check-list li {
  padding:8px 0}
.contact-card {
  background:#e8efdf;
  border-radius:12px;
  padding:45px}
.contact-card .eyebrow {
  display:block}
.email-link {
  font-size:clamp(20px,2.6vw,31px);
  overflow-wrap:anywhere}
.contact-card p {
  font-size:14px;
  margin-top:35px}
.contact-guide {
  padding:15px 0}
.contact-guide li {
  margin-bottom:14px}
.contact-guide h3 {
  font-size:25px}
.prose {
  max-width:850px;
  padding-bottom:80px}
.prose h2 {
  font-size:28px;
  margin:35px 0 18px}
.mobile-nav {
  display:none}
.skip {
  position:fixed;
  top:-100px;
  left:15px;
  background:#fff;
  padding:12px;
  z-index:100}
.skip:focus {
  top:10px}

@media(max-width:1050px) {
  .hero-grid {
  gap:25px}
.hero h1 {
  font-size:64px}
.preview-content {
  padding:20px 12px}
.preview-side {
  width:32px}
.visit-row {
  gap:5px}
.visit-row .pill {
  font-size:8px}
.split {
  gap:50px}
.editorial-grid {
  gap:25px}
.desktop-nav {
  gap:25px}
.floating-note {
  right:0}
.pricing-panel {
  padding:40px;
  gap:35px}
}

@media(max-width:800px) {
  .header-inner {
  height:78px}
.desktop-nav {
  display:none}
.mobile-nav {
  display:block}
.mobile-nav summary {
  cursor:pointer;
  font-size:15px}
.mobile-nav nav {
  position:absolute;
  left:0;
  right:0;
  top:77px;
  background:#fbfaf6;
  padding:20px 5%;
  box-shadow:0 12px 18px #123b4215}
.mobile-nav nav a {
  display:block;
  padding:12px}
.hero {
  padding:50px 0}
.hero-grid {
  grid-template-columns:1fr;
  gap:45px}
.hero h1 {
  font-size:clamp(52px,9vw,76px)}
.hero-copy {
  max-width:620px}
.product-scene {
  max-width:620px;
  width:100%;
  margin:auto}
.preview-content {
  padding:28px}
.preview-side {
  width:48px}
.visit-row {
  gap:10px}
.visit-row .pill {
  font-size:10px}
.principle-strip .container {
  display:grid;
  grid-template-columns:1fr 1fr;
  font-size:12px}
.section {
  padding-block:60px}
.editorial-grid,.split,.pricing-panel,.contact-grid {
  grid-template-columns:1fr;
  gap:35px}
.editorial-grid article {
  max-width:600px}
.steps {
  grid-template-columns:1fr 1fr}
.callout {
  padding:35px;
  display:block;
  margin-bottom:60px}
.callout .button {
  margin-top:25px}
.footer-top {
  grid-template-columns:1fr 1fr}
.footer-top>div:first-child {
  grid-column:1/-1}
.footer-bottom {
  flex-direction:column;
  gap:6px}
.page-intro {
  padding-top:55px}
.dark-section {
  padding:60px 0}
.pricing-panel {
  margin-bottom:0}
.contact-grid {
  margin-bottom:60px}
.contact-card {
  padding:30px}
}

@media(max-width:420px) {
  .preview-bar {
  gap:8px;
  padding:12px 8px}
.preview-bar>span:nth-child(2) {
  font-size:8px}
.preview-content {
  padding:18px 10px}
.preview-side {
  width:25px}
.preview-heading h2 {
  font-size:25px}
.mini-stats {
  gap:5px}
.mini-stats>div {
  padding:8px}
.visit-row {
  gap:5px}
.visit-row .pill {
  font-size:7px;
  padding:4px}
.floating-note {
  padding:16px;
  font-size:14px}
.steps {
  gap:20px}
.steps h3 {
  font-size:23px}
.callout h2 {
  font-size:35px}
.pricing-panel {
  padding:28px}
.header .brand img {
  width:155px}
}

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