@font-face {
  font-family: Manrope;
  src: url('/gottabounce/assets/Manrope.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
:root {
  --canvas: #f8faf5;
  --surface: #fff;
  --ink: #183c32;
  --muted: #52675c;
  --accent: #176944;
  --lilac: #e3dbfa;
  --peach: #ffc4a3;
  --rule: #bccdc3;
  font-family: Manrope, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
  line-height: 1.65;
  scroll-behavior: smooth;
}
* { box-sizing: border-box; }
body { margin: 0; overflow-wrap: anywhere; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: .07em; }
a:hover { text-decoration-thickness: .14em; }
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
  border-radius: 3px;
}
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 800; line-height: 1.08; letter-spacing: -.055em; }
h1 { font-size: clamp(3.25rem, 6.7vw, 6rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); }
h3 { font-size: 1.5rem; letter-spacing: -.035em; }
p { font-size: 1.0625rem; }
p + p { margin-top: 1rem; }
main, .hero-copy, .hero-showcase, .section, .prose, .feature-note > div, .maker > div { min-width: 0; }
.skip-link { position: absolute; z-index: 10; left: 1rem; top: -8rem; background: var(--ink); color: white; padding: .8rem; }
.skip-link:focus { top: 1rem; }
.site-header, .site-footer, main { max-width: 1280px; margin: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 3rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; font-weight: 800; font-size: 1.35rem; letter-spacing: -.055em; }
.brand img { border-radius: 24%; }
nav { display: flex; align-items: center; gap: 1.7rem; }
nav a { font-size: .9375rem; text-decoration: none; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.nav-cta { border: 1px solid var(--ink); border-radius: 100px; padding: .55rem 1.2rem; text-align: center; white-space: nowrap; }
.nav-cta:hover { background: var(--ink); color: var(--surface); }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 2.5rem; padding: 3.5rem 4rem 3rem; background: var(--lilac); border-radius: 2rem; margin: 0 1.5rem; }
.product-type { display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 650; margin-bottom: 1.25rem; }
.status-dot { flex: 0 0 .5rem; width: .5rem; height: .5rem; background: var(--ink); border-radius: 50%; }
.hero .lede { font-size: 1.2rem; line-height: 1.6; max-width: 29rem; margin-top: 1.65rem; }
.actions { display: flex; align-items: center; gap: .7rem 1.5rem; flex-wrap: wrap; margin: 1.8rem 0 .85rem; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 54px; max-width: 100%; padding: .9rem 1.5rem; border-radius: 100px; background: var(--ink); color: white; font-weight: 750; font-size: 1rem; line-height: 1.5; text-decoration: none; text-align: center; }
.button:hover { background: var(--accent); }
.text-link { font-weight: 700; font-size: .9375rem; min-height: 44px; display: inline-flex; align-items: center; }
.availability { font-size: .875rem; max-width: 30rem; }
.platform { font-size: .875rem; margin-top: .2rem; color: var(--muted); }
.hero-showcase { width: 100%; max-width: 398px; justify-self: end; }
.phone-pair { position: relative; width: 100%; aspect-ratio: .76; }
.phone-back { position: absolute; width: 49%; left: 0; top: 12%; }
.phone-front { position: absolute; width: 59%; right: 1.5%; top: 0; }
.app-screen { width: 100%; border-radius: 1.7rem; border: 5px solid var(--ink); background: var(--ink); }
.phone-pair .app-screen { box-shadow: 0 20px 28px #183c3224; border-width: 4px; border-radius: 1.55rem; }
.hero-showcase figcaption { font-size: .8125rem; line-height: 1.55; text-align: center; margin-top: .6rem; }
.benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 2.75rem; padding: 1.7rem 2rem; font-size: .875rem; font-weight: 700; border-bottom: 1px solid var(--rule); margin: 0 3rem; }
.benefits span::before { content: '✓'; padding-right: .5rem; }
.section { padding: 5rem 3rem; scroll-margin-top: 2rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2.5rem; margin-bottom: 2.5rem; }
.section-heading h2 { flex-shrink: 0; }
.section-heading p { max-width: 28rem; color: var(--muted); }
.use-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.use-cases article { padding-top: 1.25rem; border-top: 3px solid var(--ink); min-width: 0; }
.use-cases p { color: var(--muted); margin-top: .9rem; }
.app-section { padding-top: 1rem; }
.walkthrough { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; padding: 0; margin: 0; list-style: none; }
.walkthrough li { min-width: 0; display: flex; flex-direction: column; }
.step-title { display: flex; align-items: center; gap: .7rem; }
.step-title span { display: inline-flex; flex: 0 0 2rem; height: 2rem; border: 1px solid var(--ink); border-radius: 50%; align-items: center; justify-content: center; font-size: .875rem; font-weight: 700; }
.step-title h3 { font-size: 1.3rem; line-height: 1.2; }
.walkthrough li > p { margin: 1rem 0 1.8rem; color: var(--muted); }
.walkthrough figure { background: var(--lilac); padding: 1.8rem 2.3rem 0; border-radius: 1.5rem; overflow: hidden; margin-top: auto; }
.walkthrough li:nth-child(2) figure { background: var(--peach); }
.walkthrough li:nth-child(3) figure { background: #dceadb; }
.walkthrough .app-screen { border-radius: 1.8rem 1.8rem 0 0; border-bottom: 0; }
.caption { font-size: .875rem; color: var(--muted); line-height: 1.55; margin-top: 1.2rem; }
.feature-note { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 3.5rem; margin: 0 1.5rem; background: var(--ink); color: var(--canvas); border-radius: 1.5rem; }
.feature-note h2 { font-size: 2.3rem; letter-spacing: -.045em; }
.feature-note p { margin-top: 1rem; color: #deeadf; }
.feature-note a { display: inline-block; margin-top: 1.25rem; font-weight: 700; }
.feature-note a:focus-visible { outline-color: var(--lilac); }
.comparison-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--rule); border-radius: 1rem; background: var(--surface); overscroll-behavior-x: contain; scrollbar-color: var(--accent) var(--canvas); }
.comparison-table { width: 100%; min-width: 970px; border-collapse: collapse; table-layout: fixed; font-size: .9375rem; text-align: left; }
.comparison-table caption { text-align: left; font-weight: 750; padding: 1rem 1.25rem; border-bottom: 1px solid var(--rule); background: var(--canvas); }
.comparison-table th, .comparison-table td { padding: 1.2rem; vertical-align: top; border-bottom: 1px solid var(--rule); line-height: 1.55; }
.comparison-table th { font-weight: 750; }
.comparison-table thead th { font-size: 1.0625rem; }
.comparison-table tr:last-child > * { border-bottom: 0; }
.comparison-table thead tr > * { border-bottom: 1px solid var(--rule); }
.comparison-table th:first-child { width: 17%; }
.comparison-table .our-app { background: #edf3e9; }
.comparison-table thead .our-app { background: var(--ink); color: white; }
.comparison-table .our-app a:focus-visible { outline-color: var(--lilac); }
.table-note { display: block; font-size: .8125rem; font-weight: 500; margin-top: .35rem; }
.price-list { padding: 0; margin: 0; list-style: none; }
.price-list li + li { margin-top: .9rem; }
.price-list span, .price-list strong { display: block; }
.price-list span { font-size: .875rem; }
.comparison-hint { display: none; }
.comparison-source { font-size: .8125rem; color: var(--muted); max-width: 76rem; margin-top: 1.2rem; }
.compact { max-width: 940px; margin: auto; padding-top: 1rem; }
.faq { margin-top: 2rem; }
details { border-bottom: 1px solid var(--rule); padding: 1.1rem 0; }
summary { font-weight: 750; cursor: pointer; min-height: 44px; align-content: center; font-size: 1.0625rem; padding-right: 1rem; }
details p { margin: .6rem 0 .4rem; color: var(--muted); max-width: 46rem; }
.maker { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; border-top: 1px solid var(--rule); margin: 0 3rem; padding: 4rem 0; }
.maker-links { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; margin-top: 1.2rem; }
.maker-links a { min-height: 44px; align-content: center; font-weight: 700; }
.closing { text-align: center; padding: 3.5rem 2rem; background: var(--peach); border-radius: 1.5rem; margin: 0 1.5rem; }
.closing > img { margin: 0 auto 1.4rem; border-radius: 24%; }
.closing h2 { font-size: clamp(2.7rem, 4.4vw, 4rem); }
.closing p { margin: 1.2rem auto; }
.closing .caption { margin-bottom: 0; }
.site-footer { padding: 3rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; }
.site-footer p { width: 100%; font-size: .8125rem; color: var(--muted); }
.page-intro { max-width: 850px; padding: 4rem 3rem 2rem; margin: auto; }
.page-intro h1 { font-size: clamp(3rem, 6vw, 5rem); }
.page-intro p { margin-top: 1.3rem; color: var(--muted); }
.prose { max-width: 850px; margin: auto; padding: 0 3rem 3rem; }
.prose h2 { font-size: 1.6rem; letter-spacing: -.035em; margin: 2.5rem 0 1rem; }
.prose p, .prose li { font-size: 1.0625rem; }
.prose li + li { margin-top: .65rem; }
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose dl { display: grid; grid-template-columns: 7rem 1fr; gap: .8rem 1.5rem; margin-top: 1.7rem; }
.prose dt { font-weight: 750; }
.prose dd { margin: 0; }
.notice { background: var(--lilac); border-left: 4px solid var(--accent); padding: 1.5rem; margin: 1.7rem 0; border-radius: 0 1rem 1rem 0; }
.notice h2 { margin: 0 0 1rem; }
.notice .button { margin-top: 1rem; }
.press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; max-width: 900px; margin: 0 auto 3rem; padding: 0 3rem; }
.press-grid figcaption { margin-top: .75rem; text-align: center; font-size: .9375rem; }
@media (max-width: 1100px) {
  .hero { padding: 3rem; gap: 2rem; }
  .hero h1 { font-size: 4.8rem; }
  .hero-showcase { max-width: 340px; }
  .walkthrough, .use-cases { gap: 1.75rem; }
  .walkthrough figure { padding: 1.5rem 1.5rem 0; }
  .comparison-hint { display: block; }
}
@media (max-width: 900px) {
  .site-header { padding: 1.25rem 2rem; }
  .hero { padding: 2.5rem 2rem; gap: 1.5rem; }
  .hero h1 { font-size: 4rem; }
  .hero .lede { font-size: 1.125rem; }
  .hero-showcase { max-width: 290px; }
  .section { padding: 3.5rem 2rem; }
  .section-heading { display: block; }
  .section-heading h2 { max-width: 100%; }
  .section-heading p { margin-top: 1rem; }
  .walkthrough, .use-cases { gap: 1.5rem; }
  .walkthrough figure { padding: 1rem 1rem 0; }
  .step-title { align-items: start; }
  .app-section, .compact { padding-top: 1rem; }
  .feature-note { gap: 2rem; padding: 2.5rem; }
  .maker { margin: 0 2rem; padding: 3rem 0; }
  .site-footer { padding: 2rem; }
}
@media (max-width: 700px) {
  .site-header { padding: 1rem 20px; flex-wrap: wrap; }
  .brand { font-size: 1.2rem; }
  .brand img { width: 36px; height: 36px; }
  .site-header nav { gap: 1rem; flex: 1; justify-content: flex-end; }
  .site-header nav > a:not(.nav-cta) { display: none; }
  .nav-cta { font-size: .875rem; padding: .4rem .9rem; }
  .hero { grid-template-columns: 1fr; padding: 2.5rem 24px 2rem; margin: 0 12px; gap: 2rem; border-radius: 1.25rem; }
  .hero h1 { font-size: clamp(2.65rem, 12vw, 4.75rem); }
  .hero .lede { max-width: 34rem; }
  .actions { gap: .75rem 1.25rem; margin-top: 1.5rem; }
  .hero-showcase { width: 85%; max-width: 330px; justify-self: center; }
  .benefits { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; margin: 0 20px; padding: 1.25rem 0; font-size: .8125rem; }
  .section { padding: 3rem 24px; }
  .section-heading { margin-bottom: 2rem; }
  .use-cases { grid-template-columns: 1fr; gap: 1.75rem; }
  .use-cases article { padding-top: 1.2rem; border-top-width: 1px; }
  .use-cases h3 { font-size: 1.55rem; }
  .use-cases p { margin-top: .7rem; }
  .app-section, .compact { padding-top: .5rem; }
  .walkthrough { grid-template-columns: 1fr; gap: 2.5rem; }
  .walkthrough li { max-width: 440px; width: 100%; margin: auto; }
  .step-title { align-items: center; }
  .step-title h3 { font-size: 1.5rem; }
  .walkthrough figure { width: 100%; max-width: 320px; padding: 1.5rem 2.5rem 0; margin: 0 auto; }
  .walkthrough li > p { margin-bottom: 1.5rem; }
  .feature-note { grid-template-columns: 1fr; margin: 0 12px; padding: 2rem 24px; gap: 2.5rem; }
  .feature-note h2 { font-size: 2rem; }
  .comparison-section { padding-inline: 20px; }
  .comparison-source { font-size: .8125rem; }
  .maker { grid-template-columns: 1fr; gap: 1.5rem; margin: 0 24px; padding: 3rem 0; }
  .closing { margin: 0 12px; padding: 2.5rem 24px; }
  .site-footer { padding: 2rem 24px; }
  .site-footer nav { gap: .6rem 1.5rem; flex-wrap: wrap; }
  .page-intro { padding: 2.5rem 24px 1.75rem; }
  .prose { padding: 0 24px 2rem; }
  .prose dl { grid-template-columns: 1fr; gap: .3rem; }
  .prose dd { margin-bottom: .9rem; }
  .notice { padding: 1.25rem; }
  .press-grid { grid-template-columns: 1fr; max-width: 320px; padding: 0 24px; gap: 2rem; }
}
@media (max-width: 360px) {
  .site-header { gap: .5rem; }
  .site-header .brand { font-size: 1rem; }
  .nav-cta { padding-inline: .7rem; }
}
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } }
@media (prefers-contrast: more) { :root { --muted: #183c32; --rule: #52675c; } a { text-decoration: underline; } }