:root {
  --surface: #f7f2ea;
  --cream: #fff4c8;
  --card: #ffffff;
  --soft: #f0ebe6;
  --ink: #28223f;
  --muted: #817b8c;
  --faint: #aaa5b2;
  --teal: #3dbda7;
  --teal-dark: #238a78;
  --amber: #f3b340;
  --orange: #f47e42;
  --coral: #e84d4d;
  --blue: #6b82ff;
  --shadow: 0 22px 70px rgba(40, 34, 63, 0.12);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 16px;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(ellipse 38% 22% at 72% 48%, rgba(252, 200, 165, 0.78), rgba(252, 200, 165, 0.38) 35%, rgba(252, 200, 165, 0) 72%),
    var(--surface);
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: fixed;
  z-index: 20;
  top: 18px;
  left: 50%;
  display: flex;
  width: min(1120px, calc(100% - 32px));
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 12px 10px 14px;
  border: 1px solid rgba(40, 34, 63, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 48px rgba(40, 34, 63, 0.08);
  backdrop-filter: blur(20px);
  transform: translateX(-50%);
}

.brand,
.nav,
.hero-actions,
.window-top {
  display: flex;
  align-items: center;
}

.brand {
  gap: 9px;
  font-size: 18px;
  font-weight: 900;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: rgba(61, 189, 167, 0.12);
}

.brand-mark.small {
  width: 30px;
  height: 30px;
}

.brand-mark img {
  display: block;
  width: 32px;
  height: auto;
}

.brand-mark.small img {
  width: 24px;
}

.nav {
  gap: 22px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--ink);
}

.nav-cta,
.primary-button,
.secondary-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 900;
}

.nav-cta {
  min-height: 38px;
  padding: 0 16px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
}

.hero {
  overflow: hidden;
  padding: 120px 24px 96px;
  background:
    linear-gradient(180deg, transparent 0%, transparent 60%, var(--surface) 100%),
    linear-gradient(140deg, rgba(255, 244, 200, 0.98) 0%, rgba(195, 237, 218, 0.84) 42%, rgba(248, 243, 235, 0.98) 74%),
    var(--surface);
}

.hero-grid {
  display: grid;
  width: min(1120px, 100%);
  margin: 0 auto;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.9fr);
  gap: clamp(36px, 6vw, 78px);
  align-items: center;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.hero-logo {
  display: grid;
  width: 94px;
  height: 94px;
  margin-bottom: 18px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: 0 24px 70px rgba(88, 46, 18, 0.10);
}

.hero-logo img {
  display: block;
  width: 76px;
  height: auto;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

h1 {
  max-width: 820px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(52px, 6.6vw, 92px);
  line-height: 0.98;
  font-weight: 900;
  letter-spacing: -0.015em;
}

.hero-subtitle {
  max-width: 540px;
  margin: 20px 0 0;
  color: rgba(40, 34, 63, 0.7);
  font-size: clamp(17px, 1.6vw, 19px);
  font-weight: 600;
  line-height: 1.4;
}

.hero-actions {
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
}

/* Two-line CTA cluster under the hero button. The first line is
   the offer ("$4.99 · pay once") with the figure in ink colour so
   the eye lands on the price first. The second line is a calm
   reassurance, kept muted so it reads as supporting context rather
   than another headline. */
.hero-price {
  width: 100%;
  margin: 14px 0 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.hero-price-sep {
  margin: 0 6px;
  color: var(--muted);
  font-weight: 700;
  opacity: 0.6;
}

.hero-price-label {
  color: var(--muted);
  font-weight: 700;
}

.hero-fineprint {
  width: 100%;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.primary-button {
  padding: 0 24px;
  background: var(--teal);
  color: #fff;
  box-shadow: 0 16px 34px rgba(35, 138, 120, 0.24);
}

.secondary-button {
  padding: 0 22px;
  border: 0;
  background: rgba(61, 189, 167, 0.18);
  color: var(--teal-dark);
}

.secondary-button:hover {
  background: rgba(61, 189, 167, 0.28);
}

.hero-facts {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.hero-facts span {
  padding: 7px 10px;
  border: 1px solid rgba(40, 34, 63, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  color: rgba(40, 34, 63, 0.68);
  font-size: 12px;
  font-weight: 900;
}

.trust-row {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 32px 0 8px;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-trust li {
  position: relative;
  padding: 5px 12px 5px 26px;
  border: 1px solid rgba(40, 34, 63, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: rgba(40, 34, 63, 0.7);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.005em;
}

.hero-trust li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  transform: translateY(-50%);
  opacity: 0.85;
}

.hero-stage {
  position: relative;
  z-index: 2;
  justify-self: center;
  width: min(480px, 94vw);
}

.menubar-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 0;
  padding: 6px 14px;
  border-radius: 12px 12px 0 0;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(40, 34, 63, 0.07);
  border-bottom: 0;
  box-shadow: 0 -2px 12px rgba(40, 34, 63, 0.04);
  backdrop-filter: blur(14px);
}

.mb-system {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: rgba(40, 34, 63, 0.16);
}

.mb-spacer {
  flex: 1;
}

.mb-app {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.mb-app-active {
  background: rgba(61, 189, 167, 0.22);
}

.mb-app img {
  display: block;
}

.mb-time {
  color: rgba(40, 34, 63, 0.62);
  font-size: 11px;
  font-weight: 800;
  font-feature-settings: "tnum";
}

.hero-stage .app-window {
  position: relative;
}


.menu-pill {
  position: absolute;
  z-index: 4;
  top: -18px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 40px rgba(40, 34, 63, 0.13);
  transform: translateX(-50%);
}

.menu-pill img {
  display: block;
}

.menu-pill strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.fresh-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

.app-window {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(40, 34, 63, 0.07);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78)),
    var(--card);
  box-shadow: var(--shadow);
}

.window-top {
  justify-content: space-between;
  gap: 12px;
}

.window-top strong {
  font-size: 15px;
  font-weight: 900;
}

.window-top span,
.read-label,
.metric-row span,
.mini-section h3 {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.perch-read {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 10px 18px;
  text-align: left;
}

.bird-orbit {
  display: grid;
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  place-items: center;
  border-radius: 50%;
  background: rgba(61, 189, 167, 0.14);
}

.bird-orbit img {
  display: block;
}

.perch-read h2 {
  margin-bottom: 6px;
  font-size: 24px;
  line-height: 1.08;
  font-weight: 900;
}

.perch-read p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
}

.metric-stack,
.mini-section {
  padding: 18px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 14px 40px rgba(40, 34, 63, 0.08);
}

.metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.metric-row + .metric-row {
  padding-top: 15px;
  border-top: 1px solid rgba(40, 34, 63, 0.07);
}

.metric-row strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 40px;
  line-height: 0.95;
  font-weight: 900;
}

.metric-row strong span {
  color: var(--muted);
  font-size: 20px;
}

.metric-row em,
.app-tiles em,
.country-row strong,
.review-copy {
  display: block;
  font-style: normal;
  font-weight: 900;
}

.metric-row em {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
}

.metric-row em.positive {
  background: rgba(26, 181, 116, 0.13);
  color: #16805a;
}

.metric-row em.neutral {
  background: rgba(40, 34, 63, 0.08);
  color: var(--muted);
}

.sparkline {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Wrapper is exactly the SVG's bounds (44px tall) so the dot's coordinates
   line up cleanly with the SVG viewBox. Margin moved off the sparkline and
   onto the wrapper. */
.sparkline-wrap {
  position: relative;
  height: 44px;
  margin: 12px 0 4px;
}

.sparkline-end {
  position: absolute;
  right: 0;
  /* y=12.8 in the 44-unit viewBox = 12.8px from the wrapper top. */
  top: 12.8px;
  transform: translate(50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
}

.app-tiles,
.mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.app-tiles article {
  padding: 16px;
  border-radius: 18px;
  background: var(--soft);
}

.app-icon {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.app-icon.teal {
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
}

.app-icon.blue {
  background: linear-gradient(135deg, var(--blue), #9aa7ff);
}

.app-tiles strong {
  display: block;
  font-size: 16px;
  font-weight: 900;
}

.app-tiles em {
  margin-top: 3px;
  color: var(--teal-dark);
  font-size: 12px;
}

.mini-section {
  box-shadow: none;
  background: rgba(255, 255, 255, 0.78);
}

.section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.mini-section h3 {
  margin: 0;
  color: var(--ink);
}

.mini-pill {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(40, 34, 63, 0.06);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.country-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid rgba(40, 34, 63, 0.07);
}

.country-row span {
  color: var(--muted);
  font-weight: 900;
}

.review-stars {
  margin: 15px 0 0;
  color: var(--orange);
  font-size: 20px;
  letter-spacing: 1px;
}

.review-copy {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.mock-footer {
  display: flex;
  justify-content: space-between;
  margin: 10px -18px -18px;
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(40, 34, 63, 0.08);
  background: rgba(255, 255, 255, 0.62);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.period-pill {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(40, 34, 63, 0.06);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.gear {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(40, 34, 63, 0.06);
}

.read-label em.mood-good,
.mood-good {
  color: var(--teal-dark);
  font-style: normal;
  font-weight: 900;
}

.metric-row.single {
  border-top: none;
  padding-top: 0;
}

.mock-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.mock-cell {
  padding: 12px 14px;
  border: 1px solid rgba(40, 34, 63, 0.07);
  border-radius: 14px;
  background: var(--soft);
}

.mock-cell span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mock-cell strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
}

.mock-cell em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

.mock-cell em.tone-good {
  color: var(--teal-dark);
}

.section {
  position: relative;
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 82px 0;
  scroll-margin-top: 118px;
  isolation: isolate;
}

/* Belt-and-braces: anchor jumps to elements that aren't .section
   (e.g. #top on <main>, #join on the hero actions row) would otherwise
   clip behind the floating sticky header. Apply the same offset to
   every id-bearing scroll target so any future anchor link Just Works. */
[id]:not(html):not(body) {
  scroll-margin-top: 118px;
}

/* "More than sales": three feature tiles below the hero.
   Surfaces the moat features (review pings, store funnel, weekly digest)
   that the older site copy didn't mention. Sits above the Setup section
   so visitors see what the app does before they read how to set it up. */
.more-than-sales {
  padding-top: 56px;
  padding-bottom: 24px;
}

.more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.more-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(40, 34, 63, 0.06);
  box-shadow: 0 12px 32px rgba(40, 34, 63, 0.04);
}

.more-tile h3 {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.more-tile p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

.more-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(61, 189, 167, 0.13);
  color: var(--teal-dark);
}

.more-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

@media (max-width: 900px) {
  .more-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.section.has-wash::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;
}

.section.wash-amber::before {
  background:
    linear-gradient(180deg, var(--surface) 0%, transparent 22%, transparent 78%, var(--surface) 100%),
    linear-gradient(140deg, rgba(248, 243, 235, 0.4) 0%, rgba(243, 179, 64, 0.32) 45%, rgba(248, 243, 235, 0.4) 78%);
}

.section.wash-blue::before {
  background:
    linear-gradient(180deg, var(--surface) 0%, transparent 22%, transparent 78%, var(--surface) 100%),
    linear-gradient(140deg, rgba(248, 243, 235, 0.4) 0%, rgba(107, 130, 255, 0.26) 45%, rgba(248, 243, 235, 0.4) 78%);
}

.section.wash-coral::before {
  background:
    linear-gradient(180deg, var(--surface) 0%, transparent 22%, transparent 78%, var(--surface) 100%),
    linear-gradient(140deg, rgba(248, 243, 235, 0.4) 0%, rgba(244, 126, 66, 0.28) 45%, rgba(248, 243, 235, 0.4) 78%);
}

.section.wash-teal::before {
  background:
    linear-gradient(180deg, var(--surface) 0%, transparent 22%, transparent 78%, var(--surface) 100%),
    linear-gradient(140deg, rgba(248, 243, 235, 0.4) 0%, rgba(61, 189, 167, 0.32) 45%, rgba(248, 243, 235, 0.4) 78%);
}

.section.wash-peach::before {
  background:
    linear-gradient(180deg, transparent 0%, transparent 60%, var(--surface) 100%),
    linear-gradient(220deg, rgba(255, 244, 200, 0.98) 0%, rgba(252, 200, 165, 0.84) 42%, rgba(248, 243, 235, 0.98) 74%);
}

.full-bleed-wash {
  position: relative;
  width: 100%;
  padding: 160px 0 140px;
}

.full-bleed-wash.wash-peach-bleed {
  background:
    linear-gradient(180deg, var(--surface) 0%, rgba(247, 242, 234, 0) 8%, rgba(247, 242, 234, 0) 92%, var(--surface) 100%),
    radial-gradient(ellipse 70% 130% at 72% 50%, rgba(252, 200, 165, 0.92) 0%, rgba(252, 200, 165, 0.6) 30%, rgba(252, 200, 165, 0) 75%),
    radial-gradient(ellipse 95% 150% at 65% 50%, rgba(255, 244, 200, 0.45) 0%, rgba(255, 244, 200, 0) 70%),
    var(--surface);
}

.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

.intro > div {
  max-width: 820px;
}

.intro > p {
  max-width: 720px;
  margin: 0;
}

.section h2 {
  margin-bottom: 0;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  font-weight: 900;
}

.section > p,
.split-section p,
.detail-panel p {
  color: var(--muted);
  font-size: 21px;
  line-height: 1.45;
  font-weight: 600;
}

.signal-section {
  padding-top: 36px;
}

.section-heading {
  max-width: 760px;
}

.signal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}

.signal-grid article {
  min-height: 210px;
  padding: 22px;
  border: 1px solid rgba(40, 34, 63, 0.06);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 18px 40px rgba(40, 34, 63, 0.06);
}

.card-icon {
  display: block;
  width: 42px;
  height: 42px;
  margin-bottom: 34px;
  border-radius: 14px;
}

.card-icon.revenue {
  background: linear-gradient(135deg, var(--teal), #91ddcc);
}

.card-icon.reviews {
  background: linear-gradient(135deg, var(--orange), #ffd09a);
}

.card-icon.release {
  background: linear-gradient(135deg, var(--blue), #cbd3ff);
}

.card-icon.refunds {
  background: linear-gradient(135deg, var(--coral), #ffb0a5);
}

.signal-grid h3 {
  margin-bottom: 10px;
  font-size: 24px;
  line-height: 1.08;
}

.signal-grid p,
.feature-card p,
.detail-list p,
.faq-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.42;
  font-weight: 600;
}

.feature-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-top: 0;
}

.feature-card {
  padding: 22px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 44px rgba(40, 34, 63, 0.06);
}

.feature-icon {
  display: block;
  width: 46px;
  height: 30px;
  margin-bottom: 34px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 72% 50%, #fff 0 4px, transparent 4.5px),
    var(--teal);
}

.feature-icon.amber {
  background:
    radial-gradient(circle at 30% 50%, #fff 0 4px, transparent 4.5px),
    var(--amber);
}

.feature-icon.coral {
  background:
    radial-gradient(circle at 50% 50%, #fff 0 4px, transparent 4.5px),
    var(--coral);
}

.feature-card h3 {
  margin-bottom: 9px;
  font-size: 24px;
}

.detail-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.9fr);
  gap: 16px;
  align-items: stretch;
  padding-top: 18px;
}

.detail-panel,
.detail-list {
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 44px rgba(40, 34, 63, 0.06);
}

.detail-panel {
  display: flex;
  min-height: 390px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px;
  background:
    linear-gradient(135deg, rgba(61, 189, 167, 0.18), rgba(243, 179, 64, 0.13)),
    rgba(255, 255, 255, 0.72);
}

.detail-panel p:last-child {
  margin-bottom: 0;
}

.detail-list {
  padding: 8px 28px;
}

.detail-list article {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  padding: 26px 0;
}

.detail-list article + article {
  border-top: 1px solid rgba(40, 34, 63, 0.08);
}

.detail-list span {
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 900;
}

.detail-list h3 {
  margin-bottom: 7px;
  font-size: 24px;
}

.split-section {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(300px, 0.75fr);
  gap: 54px;
  align-items: center;
}

.settings-preview {
  margin: 0;
  padding: 18px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: var(--shadow);
}

.settings-preview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.faq-section {
  padding-top: 42px;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}

.faq-grid article {
  min-height: 190px;
  padding: 26px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 18px 44px rgba(40, 34, 63, 0.05);
}

.faq-grid h3 {
  margin-bottom: 10px;
  font-size: 23px;
  line-height: 1.12;
}

.day-section .section-heading {
  margin-bottom: 36px;
}

.day-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.day-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid rgba(40, 34, 63, 0.06);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 44px rgba(40, 34, 63, 0.06);
}

.day-time-pill {
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(40, 34, 63, 0.06);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.day-mock {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(40, 34, 63, 0.05);
  border-radius: 14px;
  background: rgba(248, 243, 235, 0.55);
}

.day-mock-bird {
  display: grid;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
}

.mood-bg-good {
  background: rgba(61, 189, 167, 0.18);
}

.mood-bg-warn {
  background: rgba(244, 126, 66, 0.18);
}

.mood-bg-soft {
  background: rgba(123, 139, 255, 0.18);
}

.day-mock-bird img {
  display: block;
}

.day-mock-eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}

.day-mock-eyebrow em {
  font-style: normal;
  font-weight: 900;
}

.day-mock-line {
  margin: 0;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.3;
}

.day-action {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
}

.setup-section {
  padding-top: 60px;
  padding-bottom: 60px;
}

.setup-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 36px 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: setup;
}

.setup-step {
  position: relative;
  padding: 28px 24px;
  border: 1px solid rgba(40, 34, 63, 0.07);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 40px rgba(40, 34, 63, 0.05);
  text-align: center;
}

.setup-step .step-num {
  display: grid;
  width: 36px;
  height: 36px;
  margin: 0 auto 14px;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.setup-step h3 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 900;
}

.setup-step p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
}

.setup-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.support-section {
  padding-top: 60px;
  padding-bottom: 80px;
}

.support-form {
  max-width: 720px;
  margin: 32px auto 0;
}

.support-form .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.support-form label {
  display: block;
  margin-bottom: 14px;
}

.support-form label.full {
  display: block;
}

.support-form span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.support-form input,
.support-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(40, 34, 63, 0.10);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.support-form input:focus,
.support-form textarea:focus {
  border-color: var(--teal);
  background: rgba(255, 255, 255, 0.98);
}

.support-form textarea {
  min-height: 120px;
  resize: vertical;
}

.support-form .form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.support-form .primary-button {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
}

.form-fine-print {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

/* Inline status pill that JS reveals after a successful or failed
   submission. The form keeps its layout; this just appears underneath
   the action row. Two tonal variants so the visitor knows immediately
   whether their note made it through. */
.form-status {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.form-status.is-success {
  background: rgba(61, 189, 167, 0.14);
  color: var(--teal-dark);
}

.form-status.is-error {
  background: rgba(232, 77, 77, 0.12);
  color: var(--coral);
}

.form-fine-print a {
  color: var(--teal-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.section-heading .lede {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
}

.closing {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 92px 24px 112px;
  text-align: center;
}

.closing::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 50% 55%, rgba(61, 189, 167, 0.2), transparent 75%);
  pointer-events: none;
}

.closing > * {
  position: relative;
  z-index: 1;
}

.closing img {
  margin-bottom: 18px;
}

.closing h2 {
  max-width: 760px;
  margin-bottom: 28px;
}

.closing-fineprint {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.site-footer {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 0 0 38px;
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 26px;
  border-top: 1px solid rgba(40, 34, 63, 0.09);
}

.footer-brand,
.footer-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-brand {
  font-weight: 900;
}

.footer-brand-text {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.2;
}

.footer-brand-text strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
}

.footer-brand-text span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.docs-page {
  background:
    radial-gradient(ellipse 70% 30% at 80% 12%, rgba(61, 189, 167, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 28% at 20% 78%, rgba(243, 179, 64, 0.10), transparent 60%),
    var(--surface);
}

.doc-main {
  display: block;
  width: min(880px, calc(100% - 40px));
  margin: 0 auto;
  padding: 80px 0 96px;
}

.docs-page.with-header .doc-main {
  padding-top: 130px;
}

.doc-head {
  margin-bottom: 36px;
}

.doc-head h1 {
  margin-top: 8px;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.doc-lede {
  margin-top: 18px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.doc section {
  padding: 28px 0;
  border-top: 1px solid rgba(40, 34, 63, 0.08);
}

.doc section:first-of-type {
  border-top: 0;
  padding-top: 12px;
}

.doc h2 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.005em;
}

.doc p {
  margin: 0 0 14px;
  color: rgba(40, 34, 63, 0.78);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 600;
}

.doc p:last-child {
  margin-bottom: 0;
}

.doc ul {
  margin: 0 0 14px;
  padding: 0 0 0 20px;
  color: rgba(40, 34, 63, 0.78);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 600;
}

.doc li {
  margin-bottom: 8px;
}

.doc a {
  color: var(--teal-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.doc strong {
  color: var(--ink);
  font-weight: 900;
}

.doc section.doc-step,
.doc section.doc-card {
  position: relative;
  margin: 64px -64px;
  padding: 64px 88px 56px;
  border: 1.5px solid rgba(40, 34, 63, 0.07);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.78));
  box-shadow: 0 28px 60px rgba(40, 34, 63, 0.08);
}

.doc section.doc-card:nth-of-type(odd) {
  background:
    radial-gradient(ellipse 60% 80% at 110% 0%, rgba(255, 244, 200, 0.5), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.78));
}

.doc section.doc-step,
.doc-step + .doc-step {
  border-top: 1.5px solid rgba(40, 34, 63, 0.07);
}

.doc-step .step-marker {
  position: absolute;
  top: -32px;
  left: 44px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  font-feature-settings: "tnum";
  box-shadow:
    0 14px 30px rgba(35, 138, 120, 0.4),
    0 2px 6px rgba(35, 138, 120, 0.22);
}

.doc-step h2 {
  margin-top: 12px;
  margin-bottom: 22px;
  font-size: 26px;
}

.doc-step:nth-child(odd) {
  background:
    radial-gradient(ellipse 60% 80% at 110% 0%, rgba(255, 244, 200, 0.5), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.78));
}

.doc-step:nth-child(even) {
  background:
    radial-gradient(ellipse 60% 80% at -10% 0%, rgba(195, 237, 218, 0.5), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.78));
}

.bird-bubble {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 40px -16px 44px;
  padding: 0;
}

.bird-bubble.right {
  flex-direction: row-reverse;
  justify-content: flex-end;
  margin-left: 40px;
  margin-right: -28px;
}

.bird-bubble.left {
  margin-right: 40px;
  margin-left: -28px;
}

.bird-bubble img {
  flex-shrink: 0;
  display: block;
  width: 56px;
  height: 49px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(40, 34, 63, 0.12));
  transition: transform 0.3s ease;
  --bird-tilt: -8deg;
  --bird-flip: 1;
  transform: scaleX(var(--bird-flip)) rotate(var(--bird-tilt));
}

.bird-bubble.left img {
  --bird-flip: -1;
}

.bird-bubble.tilt-1 img { --bird-tilt: -14deg; }
.bird-bubble.tilt-2 img { --bird-tilt: 10deg; }
.bird-bubble.tilt-3 img { --bird-tilt: -20deg; }
.bird-bubble.tilt-4 img { --bird-tilt: 6deg; }
.bird-bubble.tilt-5 img { --bird-tilt: -12deg; }

.bird-bubble .bubble {
  position: relative;
  max-width: 480px;
  padding: 18px 24px;
  border: 1.5px solid rgba(40, 34, 63, 0.08);
  border-radius: 26px;
  background: #fff;
  box-shadow:
    0 14px 34px rgba(40, 34, 63, 0.08),
    0 2px 6px rgba(40, 34, 63, 0.05);
}

.doc section .bird-bubble.corner-tr,
.bird-bubble.corner-tr {
  position: absolute;
  top: 32px;
  right: 32px;
  margin: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 18px;
}

.bird-bubble.corner-tr .bubble {
  max-width: 320px;
}

.doc section.doc-card:has(.corner-tr) {
  padding-right: 380px;
}

.bird-bubble.perched {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: fit-content;
  max-width: 460px;
  margin: 32px 0 48px auto;
  padding: 0;
}

.bird-bubble.perched > img {
  width: 64px;
  height: 56px;
  margin-left: 36px;
  margin-bottom: -10px;
  position: relative;
  z-index: 2;
}

.bird-bubble.perched .bubble {
  margin: 0;
  transform: none;
}

.bird-bubble.perched .bubble::before {
  display: none;
}

.bird-bubble.perched .bubble {
  margin: 0;
  transform: none;
}

.bird-bubble.perched .bubble::before {
  display: none;
}

.bird-bubble .bubble::before {
  content: "";
  position: absolute;
  bottom: 22px;
  left: -10px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-left: 1.5px solid rgba(40, 34, 63, 0.08);
  border-bottom: 1.5px solid rgba(40, 34, 63, 0.08);
  transform: rotate(45deg);
}

.bird-bubble.right .bubble::before {
  left: auto;
  right: -10px;
  border-left: 0;
  border-bottom: 0;
  border-top: 1.5px solid rgba(40, 34, 63, 0.08);
  border-right: 1.5px solid rgba(40, 34, 63, 0.08);
  transform: rotate(45deg);
}

.bird-bubble .bubble p {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 700;
}

@media (max-width: 700px) {
  .bird-bubble,
  .bird-bubble.left,
  .bird-bubble.right {
    margin-left: 0;
    margin-right: 0;
  }
  .bird-bubble img {
    width: 48px;
    height: 42px;
  }
  .doc-step {
    margin: 40px 0;
    padding: 36px 24px 28px;
  }
  .doc-step .step-marker {
    left: 24px;
    width: 52px;
    height: 52px;
    font-size: 22px;
    top: -26px;
  }
}

.footer-nav {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.footer-copy {
  margin: 18px 0 0;
  color: var(--faint);
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-logo,
  h1,
  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions,
  .hero-facts {
    justify-content: center;
  }

  .intro,
  .split-section,
  .detail-section {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Justify the intro paragraph on mobile only. Centred body text on
     a phone reads as ragged and hard to scan; justification gives
     both edges a clean line. Heading stays centred via the parent
     rule. hyphens: auto keeps the gaps even, since the html lang is
     en-AU the system can hyphenate correctly. */
  .intro > p {
    text-align: justify;
    hyphens: auto;
  }

  .signal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-strip {
    grid-template-columns: 1fr;
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }

  .support-form .form-grid {
    grid-template-columns: 1fr;
  }

  .day-grid {
    grid-template-columns: 1fr;
  }

  .setup-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .site-header {
    top: 10px;
    width: calc(100% - 20px);
    padding: 8px 8px 8px 12px;
    gap: 12px;
  }

  /* Hide the secondary nav links on mobile but keep the CTA visible:
     it's the whole reason the header is sticky. We just tighten the
     button so it fits next to the brand inside the pill. */
  .nav {
    display: none;
  }

  .nav-cta {
    min-height: 34px;
    padding: 0 13px;
    font-size: 13px;
    flex-shrink: 0;
  }

  .site-header .brand {
    /* Truncate gracefully if a longer brand string ever lands here. */
    min-width: 0;
    font-size: 16px;
  }

  .site-header .brand-mark {
    width: 32px;
    height: 32px;
  }

  .site-header .brand-mark img {
    width: 26px;
  }

  .hero {
    padding: 98px 14px 52px;
  }

  .hero-logo {
    width: 82px;
    height: 82px;
  }

  .hero-logo img {
    width: 66px;
  }

  /* Center the hero CTA cluster on mobile so the button sizes to its
     content rather than stretching across the viewport. Full-bleed
     buttons read as overdone on a phone, especially at $4.99 where
     the price line below already centers the rest of the cluster. */
  .hero-actions {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }

  .hero-facts {
    align-items: stretch;
    flex-direction: column;
  }

  .primary-button,
  .secondary-button {
    width: auto;
  }

  .app-window {
    padding: 12px;
    border-radius: 26px;
  }

  .perch-read {
    align-items: flex-start;
    gap: 12px;
  }

  .bird-orbit {
    width: 62px;
    height: 62px;
  }

  .perch-read h2 {
    font-size: 22px;
  }

  .metric-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .metric-row strong {
    font-size: 34px;
  }

  .metric-row strong span {
    font-size: 16px;
  }

  .app-tiles,
  .mini-grid {
    grid-template-columns: 1fr;
  }

  .detail-panel {
    min-height: 300px;
    padding: 26px;
  }

  .detail-list {
    padding: 4px 22px;
  }

  .detail-list article {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .section {
    width: min(100% - 28px, 1120px);
    padding: 62px 0;
  }

  .signal-grid {
    grid-template-columns: 1fr;
  }

  .footer-row,
  .footer-nav {
    align-items: flex-start;
    flex-direction: column;
  }
}