:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  --ink: #1d1d1f;
  --secondary: #6e6e73;
  --green: #087e50;
  --line: #e8ebe9;
  color: var(--ink);
  background: #fff;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid #168957; outline-offset: 5px; }
.site-header {
  max-width: 1080px;
  min-height: 88px;
  margin: auto;
  padding: 22px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark { display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 600; letter-spacing: -.6px; }
.wordmark img { width: 30px; height: 30px; }
.header-link { font-size: 14px; font-weight: 500; color: var(--green); }
.header-link span { margin-left: 5px; }
.header-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero { max-width: 1000px; margin: auto; padding: 48px 28px 52px; text-align: center; }
h1 {
  margin: 0;
  font-size: clamp(3.5rem, 7.4vw, 5.75rem);
  line-height: 1.04;
  letter-spacing: -.065em;
  font-weight: 650;
}
h1 span { color: var(--green); }
.intro { font-size: 20px; line-height: 1.45; letter-spacing: -.4px; color: var(--secondary); margin: 22px auto 40px; }
.demo {
  max-width: 760px;
  margin: 0 auto;
  padding: 25px 28px 28px;
  text-align: left;
  background: #fff;
  border: 1px solid #e1e7e3;
  border-radius: 24px;
  box-shadow: 0 4px 8px -4px #15291d08, 0 24px 64px -24px #15291d1c;
}
.demo-topline, .result-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.demo-topline > span, .result-header > span:first-child { font-size: 14px; font-weight: 550; letter-spacing: -.15px; }
.demo-topline > span { color: var(--secondary); }
.example-picker { display: flex; padding: 3px; gap: 1px; background: #f3f5f4; border-radius: 9px; }
.example-picker button { border: 0; background: transparent; border-radius: 6px; padding: 6px 11px; font-size: 14px; color: #666e69; }
.example-picker button.selected { background: #fff; box-shadow: 0 1px 4px #162b211a; color: var(--ink); }
.example-picker button:hover:not(.selected) { color: var(--ink); background: #e9eeeb; }
.source-url, .result-url { font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; font-size: 14px; overflow-wrap: anywhere; }
.source-url { min-height: 85px; padding: 21px 0 0; line-height: 2; color: #333e37; }
.tracking { color: #7b847f; background: #f1f3f2; padding: 3px 0; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: opacity .45s, filter .45s; }
.cleaning-lane { display: flex; align-items: center; gap: 18px; margin: 16px 0 22px; }
.lane-line { height: 1px; background: var(--line); flex: 1; }
.clean-button { display: flex; align-items: center; gap: 9px; border: 1px solid #dfe7e2; background: #fff; border-radius: 11px; padding: 8px 12px 8px 8px; font-size: 14px; font-weight: 500; transition: background .2s, border-color .2s; }
.clean-button:hover { background: #f5faf7; border-color: #bad2c3; }
.clean-button img { width: 26px; height: 26px; }
.clean-arrow { color: #688473; margin-left: 7px; }
.result { padding: 19px 20px; background: #effaf3; border-radius: 13px; transition: background .45s; }
.result-header > span:first-child { color: #16613a; }
.result-status { font-size: 12px; color: #398155; line-height: 1.4; }
.result-status > span { margin-right: 4px; }
.result-url { padding-top: 12px; color: #195d36; line-height: 1.65; }
.demo.cleaning .tracking { opacity: 0; filter: blur(3px); }
.demo.cleaning .result { background: #e3f6ea; }
.download { margin: 36px 0 0; scroll-margin-top: 32px; }
.download-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 23px; color: #fff; background: var(--green); border-radius: 100px; font-size: 16px; font-weight: 500; letter-spacing: -.2px; transition: background .2s; }
.download-button:hover { background: #096c46; }
.download-button svg { width: 16px; height: 19px; margin-top: -2px; }
.download-note { margin: 13px 0 0; font-size: 12px; color: var(--secondary); line-height: 1.6; }
.download-note span { margin: 0 5px; }
.preview-note { margin: 5px 0 0; color: #787e7a; font-size: 12px; line-height: 1.6; }
.preview-note button { border: 0; background: none; font-size: inherit; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
footer { max-width: 1016px; margin: auto; border-top: 1px solid var(--line); padding: 22px 0 27px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #777d79; font-size: 12px; }
footer nav { display: flex; gap: 25px; }
footer button { padding: 0; border: 0; background: none; font-size: 12px; }
footer button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
dialog { background: #fff; color: var(--ink); max-width: 470px; width: calc(100% - 32px); padding: 32px; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 24px 80px #10201826; }
dialog::backdrop { background: #14211938; backdrop-filter: blur(5px); }
dialog h2 { font-size: 26px; font-weight: 600; letter-spacing: -.8px; margin: 4px 24px 20px 0; line-height: 1.15; }
dialog p { font-size: 16px; color: var(--secondary); line-height: 1.55; }
.close-dialog { position: absolute; top: 15px; right: 16px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: #f1f3f2; font-size: 23px; line-height: 1; color: #6e7671; }
@media (min-width: 1440px) and (min-height: 900px) { .hero { padding-top: 68px; padding-bottom: 64px; } .intro { margin-bottom: 46px; } }
@media (max-width: 1080px) { footer { margin-left: 32px; margin-right: 32px; } }
@media (max-width: 600px) {
  .site-header { min-height: 76px; padding: 20px 23px; }
  .wordmark { font-size: 18px; }
  .hero { padding: 37px 18px 36px; }
  h1 { font-size: clamp(3.1rem, 12vw, 4rem); }
  .intro { font-size: 17px; letter-spacing: -.3px; line-height: 1.5; margin: 19px 0 30px; }
  .demo { padding: 20px 16px 17px; border-radius: 20px; }
  .demo-topline { gap: 14px; flex-wrap: wrap; }
  .example-picker { margin-left: auto; }
  .example-picker button { font-size: 13px; padding: 6px 8px; }
  .source-url, .result-url { font-size: 13px; }
  .source-url { min-height: 104px; padding-top: 18px; }
  .cleaning-lane { gap: 12px; margin: 14px 0 19px; }
  .result { padding: 16px 14px; }
  .result-header { flex-wrap: wrap; gap: 5px 12px; }
  .result-status { font-size: 12px; }
  .download { margin-top: 30px; }
  footer { margin: 0 24px; padding: 21px 0 25px; }
  footer nav { gap: 19px; }
}
@media (max-width: 370px) { .demo-topline { flex-direction: column; align-items: flex-start; } .example-picker { margin-left: 0; } .intro { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (prefers-contrast: more) { :root { --secondary: #424945; --line: #abb5ae; } .tracking, .preview-note, footer { color: #424945; } .demo { border-color: #889b90; } }

/* The page and store images share the app's restrained green and native type. */
.hero { max-width: 1120px; padding-top: 34px; }
.intro { margin-bottom: 24px; }
.availability { margin-bottom: 42px; }
.download-button:disabled { opacity: 1; cursor: default; background: var(--green); border: 0; font: inherit; font-weight: 500; }
.download-note { font-size: 14px; }
.product-stage { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 46px; align-items: center; max-width: 1040px; margin: auto; }
.demo { width: 100%; }
.native-preview { margin: 0; text-align: center; }
.native-preview img { width: 300px; height: auto; display: block; border: 1px solid #e1e7e3; border-radius: 16px; box-shadow: 0 20px 60px -20px #15291d33; }
.native-preview figcaption { margin-top: 12px; font-size: 14px; color: var(--secondary); }
.mac-menu-bar { display: flex; justify-content: flex-end; gap: 20px; padding: 9px 16px; margin-bottom: 9px; border-radius: 10px; background: #f3f5f4; font-size: 12px; }
.mac-menu-bar span:first-child { margin-right: auto; font-weight: 600; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px; text-align: left; margin: 56px auto 0; max-width: 1000px; }
.features h2 { font-size: 20px; letter-spacing: -.5px; font-weight: 600; margin: 0 0 10px; }
.features p { font-size: 16px; line-height: 1.6; color: var(--secondary); margin: 0; }
.privacy-note { max-width: 650px; margin: 36px auto 0; color: var(--secondary); font-size: 14px; line-height: 1.6; }
.privacy-note a, .document a:not(.wordmark):not(.header-link) { text-decoration: underline; text-underline-offset: 3px; color: var(--green); }
footer { font-size: 14px; }
footer a:hover { color: var(--ink); text-decoration: underline; }
.document { max-width: 760px; padding: 48px 28px 72px; margin: auto; }
.document h1 { font-size: clamp(2.5rem, 6vw, 3.5rem); letter-spacing: -.045em; }
.document .updated { font-size: 14px; margin: 18px 0 36px; }
.document h2 { font-size: 22px; margin: 32px 0 12px; letter-spacing: -.4px; }
.document p, .document li { font-size: 16px; line-height: 1.7; color: #515957; }
.document li { margin-bottom: 10px; }
.document .contact-card { padding: 24px; margin-top: 36px; background: #effaf3; border-radius: 16px; }
.document .contact-card h2 { margin-top: 0; }
@media (max-width: 850px) { .product-stage { grid-template-columns: 1fr; gap: 30px; max-width: 650px; } .native-preview { display: none; } .features { gap: 25px; } }
@media (max-width: 600px) { .hero { padding-top: 30px; } .features { grid-template-columns: 1fr; gap: 25px; margin-top: 38px; } .availability { margin-bottom: 30px; } .example-picker button, .source-url, .result-url { font-size: 14px; } .document { padding: 32px 22px 48px; } footer { flex-wrap: wrap; } }

.site-header { min-height: 72px; padding-top: 18px; padding-bottom: 18px; }
.hero { padding-top: 24px; }
h1 { font-size: clamp(3.5rem, 7.4vw, 5.125rem); }
.intro { font-size: 18px; margin: 18px auto 28px; }
.product-stage { grid-template-columns: minmax(0, 1fr) 260px; }
.native-preview img { width: 260px; }
.availability { margin-top: 30px; margin-bottom: 0; }
@media (max-width: 850px) { .product-stage { grid-template-columns: 1fr; } }