:root {
  --primary: #2E7D62;
  --primary-mid: #4CAF81;
  --primary-light: #7CCBA2;
  --surface: #CFEAD6;
  --surface-soft: #EAF4ED;
  --background: #F2F7F3;
  --text-dark: #1A3A2E;
  --text-mid: #2E7D62;
  --bezel: #14231B;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--background);
  color: var(--text-dark);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow-x: hidden;
}
::selection { background: var(--surface); }
img { max-width: 100%; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 560px) { .wrap { padding: 0 20px; } }

/* ── Nav ─────────────────────────────────────────── */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 20px; padding-bottom: 20px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-dark); }
.brand img { width: 38px; height: 38px; object-fit: contain; }
.brand span { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.topbar nav { display: flex; align-items: center; gap: 32px; }
.topbar nav a.link { text-decoration: none; color: var(--text-mid); font-size: 15px; font-weight: 500; }
.topbar nav a.link:hover, .topbar nav a.link.active { color: var(--text-dark); }
.btn-pill { text-decoration: none; background: var(--primary); color: #FFFFFF; font-size: 15px; font-weight: 600; padding: 11px 24px; border-radius: 30px; white-space: nowrap; }
.btn-pill:hover { background: #256a52; }
@media (max-width: 860px) {
  .topbar nav a.link { display: none; }
  .topbar nav a.feedback-link-mobile { display: inline-block; font-size: 14px; }
  .topbar nav { gap: 14px; }
  .btn-pill { font-size: 13px; padding: 9px 16px; }
}
@media (max-width: 400px) {
  .brand span { font-size: 18px; }
  .topbar { gap: 10px; }
  .topbar nav { gap: 10px; }
  .btn-pill { font-size: 12px; padding: 8px 12px; }
  .topbar nav a.feedback-link-mobile { font-size: 12.5px; }
}

/* ── Hero ────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding-top: 56px; padding-bottom: 96px; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; }
.hero-copy h1 { margin: 0; font-size: 54px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.hero-copy p.lead { margin: 0; font-size: 18px; line-height: 1.65; font-weight: 300; color: var(--text-mid); max-width: 44ch; text-wrap: pretty; }
.hero-ctas { display: flex; align-items: center; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--primary); color: #FFFFFF; text-decoration: none; font-size: 16px; font-weight: 600; padding: 15px 30px; border-radius: 30px; }
.btn-primary:hover { background: #256a52; }
.btn-ghost { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: var(--text-dark); text-decoration: none; font-size: 16px; font-weight: 500; padding: 14px 28px; border-radius: 30px; border: 1.5px solid rgba(26, 58, 46, 0.25); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.hero-note { margin: 4px 0 0; font-size: 13px; font-weight: 400; color: rgba(26, 58, 46, 0.55); }
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 560px; }
.hero-circle-lg { position: absolute; width: 480px; height: 480px; border-radius: 50%; background: var(--surface); opacity: 0.55; }
.hero-circle-sm { position: absolute; width: 340px; height: 340px; border-radius: 50%; background: var(--primary-light); opacity: 0.18; transform: translate(120px, -110px); }
.phone { position: relative; width: 296px; background: var(--bezel); border-radius: 46px; padding: 10px; box-shadow: 0 40px 80px -24px rgba(26, 58, 46, 0.35); }
.phone img { display: block; width: 100%; border-radius: 37px; }
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 24px; text-align: center; padding-top: 32px; padding-bottom: 64px; }
  .hero-copy { align-items: center; }
  .hero-ctas { justify-content: center; }
  .hero-visual { min-height: 0; margin-top: 24px; }
  .hero-circle-sm { transform: translate(60px, -80px); }
}
@media (max-width: 560px) {
  .hero-copy h1 { font-size: 36px; }
  .hero-copy p.lead { font-size: 16px; }
  .hero-circle-lg { width: 340px; height: 340px; }
  .phone { width: 250px; }
}

/* ── Page hero (subpages) ───────────────────────────── */
.page-hero { padding-top: 48px; padding-bottom: 64px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-mid); }
.breadcrumb a { color: var(--text-mid); text-decoration: none; }
.breadcrumb a:hover { color: var(--text-dark); }
.page-hero .kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mid); }
.page-hero h1 { margin: 0; font-size: 44px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; max-width: 20ch; text-wrap: balance; }
.page-hero p.lead { margin: 0; font-size: 17px; line-height: 1.65; font-weight: 300; color: var(--text-mid); max-width: 60ch; text-wrap: pretty; }
@media (max-width: 560px) { .page-hero h1 { font-size: 30px; } }

/* ── Sections shared ─────────────────────────────── */
.section-head { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.section-head h2 { margin: 0; font-size: 34px; font-weight: 600; letter-spacing: -0.01em; }
.section-head p { margin: 0; font-size: 16px; font-weight: 300; color: var(--text-mid); max-width: 56ch; }
.section-head.left { align-items: flex-start; text-align: left; }
@media (max-width: 560px) { .section-head h2 { font-size: 27px; } }

/* ── Article body (long-form subpage content) ───────── */
.article { padding-top: 24px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 20px; max-width: 74ch; margin: 0 auto; }
.article h2 { margin: 40px 0 4px; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.article h2:first-child { margin-top: 0; }
.article h3 { margin: 24px 0 2px; font-size: 18px; font-weight: 600; }
.article p { margin: 0; font-size: 15.5px; line-height: 1.75; font-weight: 300; color: var(--text-mid); text-wrap: pretty; }
.article ul, .article ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.article li { font-size: 15.5px; line-height: 1.7; font-weight: 300; color: var(--text-mid); }
.article strong { color: var(--text-dark); font-weight: 600; }
.article .callout { background: #FFFFFF; border-radius: 18px; padding: 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.article .callout p { color: var(--text-dark); }

/* ── FAQ ─────────────────────────────────────────── */
.faq { padding-top: 24px; padding-bottom: 88px; }
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: #FFFFFF; border-radius: 18px; padding: 22px 26px; }
.faq-item summary { cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--text-mid); flex-shrink: 0; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; font-weight: 300; color: var(--text-mid); }

/* ── Teaser cards (homepage condensed sections) ─────── */
.teaser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.teaser-card { background: #FFFFFF; border-radius: 20px; padding: 30px 28px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; }
.teaser-card .icon { width: 44px; height: 44px; border-radius: 13px; background: var(--surface-soft); display: flex; align-items: center; justify-content: center; }
.teaser-card h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--text-dark); }
.teaser-card p { margin: 0; font-size: 14.5px; line-height: 1.6; font-weight: 300; color: var(--text-mid); }
.teaser-card .learn-more { margin-top: auto; font-size: 13.5px; font-weight: 600; color: var(--primary); }

/* ── Features ────────────────────────────────────── */
.features { padding-top: 24px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 44px; }
.feature-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.feature-card { width: 352px; background: #FFFFFF; border-radius: 20px; padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; }
.feature-card .icon { width: 48px; height: 48px; border-radius: 14px; background: var(--surface-soft); display: flex; align-items: center; justify-content: center; }
.feature-card h3 { margin: 0; font-size: 18px; font-weight: 600; }
.feature-card p { margin: 0; font-size: 14.5px; line-height: 1.6; font-weight: 300; color: var(--text-mid); }
@media (max-width: 560px) { .feature-card { width: 100%; } }

/* ── How it works ────────────────────────────────── */
.how { padding-bottom: 96px; }
.how-panel { background: #FFFFFF; border-radius: 28px; padding: 56px 52px; display: grid; grid-template-columns: 1.1fr 1fr 0.9fr; gap: 44px; align-items: center; }
.how-steps { display: flex; flex-direction: column; gap: 30px; }
.how-steps h2 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.01em; }
.how-step { display: flex; gap: 16px; }
.how-step .num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; color: #FFFFFF; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.how-step h3 { margin: 0; font-size: 16px; font-weight: 600; }
.how-step p { margin: 0; font-size: 14px; line-height: 1.6; font-weight: 300; color: var(--text-mid); }
.how-step > div { display: flex; flex-direction: column; gap: 4px; }
.how-visual { display: flex; align-items: center; justify-content: center; position: relative; min-height: 340px; padding: 12px 0; }
.how-circle-lg { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: var(--surface-soft); }
.how-circle-sm { position: absolute; width: 214px; height: 214px; border-radius: 50%; background: var(--surface); }
.phone-sm { position: relative; width: 216px; background: var(--bezel); border-radius: 34px; padding: 8px; box-shadow: 0 30px 60px -20px rgba(26, 58, 46, 0.35); }
.phone-sm img { display: block; width: 100%; border-radius: 27px; }
.how-cards { display: flex; flex-direction: column; gap: 14px; }
.how-card { background: var(--background); border-radius: 18px; padding: 18px 20px; display: flex; align-items: center; gap: 14px; }
.how-card .icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.how-card b { font-size: 15px; font-weight: 600; display: block; }
.how-card span.sub { font-size: 12.5px; font-weight: 300; color: var(--text-mid); }
@media (max-width: 1060px) {
  .how-panel { grid-template-columns: 1fr 1fr; padding: 44px 36px; }
  .how-visual { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 720px) {
  .how-panel { grid-template-columns: 1fr; padding: 36px 24px; }
  .how-visual { grid-column: auto; }
}

/* ── Screens ─────────────────────────────────────── */
.screens { padding-bottom: 96px; display: flex; flex-direction: column; gap: 48px; }
.screen-row { display: flex; justify-content: center; align-items: flex-start; gap: 48px; flex-wrap: wrap; }
.screen-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; width: 264px; }
.screen-fig .phone-frame { width: 100%; background: var(--bezel); border-radius: 38px; padding: 9px; box-shadow: 0 30px 60px -24px rgba(26, 58, 46, 0.3); }
.screen-fig img { display: block; width: 100%; border-radius: 30px; }
.screen-fig figcaption { display: flex; flex-direction: column; gap: 3px; text-align: center; }
.screen-fig b { font-size: 16px; font-weight: 600; }
.screen-fig span { font-size: 13.5px; font-weight: 300; line-height: 1.55; color: var(--text-mid); }

/* ── Premium ─────────────────────────────────────── */
.premium { padding-top: 24px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 44px; }
.premium .kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mid); }
.premium-cta { display: flex; justify-content: center; }

/* ── Compare table (Premium) ─────────────────────── */
.compare { padding-top: 8px; padding-bottom: 96px; }
.compare-table { width: 100%; border-collapse: collapse; background: #FFFFFF; border-radius: 20px; overflow: hidden; }
.compare-table th, .compare-table td { padding: 16px 22px; text-align: left; font-size: 14.5px; }
.compare-table thead th { background: var(--surface-soft); font-weight: 600; color: var(--text-dark); }
.compare-table thead th:not(:first-child) { text-align: center; }
.compare-table tbody td:not(:first-child) { text-align: center; }
.compare-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--surface-soft); }
.compare-table td:first-child { font-weight: 500; color: var(--text-dark); }
.compare-table .yes { color: var(--primary); font-weight: 600; }
.compare-table .no { color: rgba(26, 58, 46, 0.3); }
@media (max-width: 640px) { .compare-table { font-size: 13px; } .compare-table th, .compare-table td { padding: 12px 10px; } }

/* ── Privacy ─────────────────────────────────────── */
.privacy { background: #FFFFFF; padding: 88px 0; }
.privacy-inner { display: flex; flex-direction: column; gap: 44px; }
.privacy-head { display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin: 0 auto; text-align: center; align-items: center; }
.privacy-head .kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mid); }
.privacy-head h2 { margin: 0; font-size: 34px; font-weight: 600; letter-spacing: -0.01em; }
.privacy-head p { margin: 0; font-size: 16px; line-height: 1.7; font-weight: 300; color: var(--text-mid); text-wrap: pretty; }
.privacy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.privacy-card { background: var(--surface-soft); border-radius: 20px; padding: 30px 28px; display: flex; flex-direction: column; gap: 10px; }
.privacy-card .icon { width: 40px; height: 40px; border-radius: 12px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.privacy-card h3 { margin: 0; font-size: 17px; font-weight: 600; }
.privacy-card p { margin: 0; font-size: 14.5px; line-height: 1.65; font-weight: 300; color: var(--text-mid); }
@media (max-width: 860px) { .privacy-grid { grid-template-columns: 1fr; } .privacy-head h2 { font-size: 27px; } }

/* ── Science ─────────────────────────────────────── */
.science { background: #E6F1E9; padding: 88px 0; }
.science-inner { display: flex; flex-direction: column; gap: 44px; }
.science-head { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.science-head .kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mid); }
.science-head h2 { margin: 0; font-size: 34px; font-weight: 600; letter-spacing: -0.01em; }
.science-head p { margin: 0; font-size: 16px; line-height: 1.7; font-weight: 300; color: var(--text-mid); text-wrap: pretty; }
.science-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.science-card { background: rgba(255, 255, 255, 0.75); border-radius: 20px; padding: 30px 28px; display: flex; flex-direction: column; gap: 10px; }
.science-card h3 { margin: 0; font-size: 17px; font-weight: 600; }
.science-card p { margin: 0; font-size: 14.5px; line-height: 1.65; font-weight: 300; color: var(--text-mid); }
@media (max-width: 860px) { .science-grid { grid-template-columns: 1fr; } .science-head h2 { font-size: 27px; } }

/* ── Feedback ────────────────────────────────────── */
.feedback { padding-top: 24px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 32px; }
.feedback-form { position: relative; max-width: 640px; margin: 0 auto; width: 100%; background: #FFFFFF; border-radius: 24px; padding: 36px; display: flex; flex-direction: column; gap: 18px; }
.feedback-row { display: flex; gap: 18px; min-width: 0; }
.feedback-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.feedback-field input, .feedback-field textarea, .feedback-file-row { width: 100%; box-sizing: border-box; }
.feedback-field label { font-size: 13px; font-weight: 500; color: var(--text-dark); }
.feedback-field label span { font-weight: 300; color: var(--text-mid); }
.feedback-field input, .feedback-field textarea { font-family: inherit; font-size: 14.5px; color: var(--text-dark); background: var(--surface-soft); border: 1.5px solid var(--surface); border-radius: 12px; padding: 12px 14px; resize: vertical; }
.feedback-field input:focus, .feedback-field textarea:focus { outline: none; border-color: var(--primary); }
.feedback-file-input-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.feedback-file-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.feedback-file-btn { font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--primary); background: var(--surface-soft); border: 1.5px solid var(--surface); border-radius: 10px; padding: 9px 16px; cursor: pointer; }
.feedback-file-btn:hover { border-color: var(--primary); }
.feedback-file-name { font-size: 12.5px; font-weight: 300; color: var(--text-mid); }
.feedback-file-name.err { color: #C0392B; }
.feedback-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.feedback-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.feedback-actions .btn-primary { border: none; cursor: pointer; font-family: inherit; }
.feedback-actions .btn-primary:disabled { opacity: 0.6; cursor: default; }
.feedback-status { font-size: 13.5px; font-weight: 400; }
.feedback-status.ok { color: var(--primary); }
.feedback-status.err { color: #C0392B; }
@media (max-width: 560px) { .feedback-form { padding: 24px; } .feedback-row { flex-direction: column; gap: 14px; } }

/* ── Download CTA ────────────────────────────────── */
.download { padding-top: 96px; padding-bottom: 72px; }
.cta-band { background: linear-gradient(135deg, var(--primary-mid), var(--primary)); border-radius: 28px; padding: 60px 56px; display: flex; align-items: center; justify-content: space-between; gap: 44px; flex-wrap: wrap; }
.cta-copy { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.cta-copy h2 { margin: 0; font-size: 34px; font-weight: 600; letter-spacing: -0.01em; color: #FFFFFF; text-wrap: balance; }
.cta-copy p { margin: 0; font-size: 16px; line-height: 1.65; font-weight: 300; color: rgba(255, 255, 255, 0.85); }
.cta-right { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta-icon { width: 92px; height: 92px; border-radius: 24px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 40px -16px rgba(20, 45, 35, 0.45); }
.cta-icon img { width: 62px; height: 62px; object-fit: contain; }
.badges { display: flex; flex-direction: column; gap: 12px; }
.badge-play { display: inline-flex; align-items: center; gap: 12px; background: var(--bezel); color: #FFFFFF; text-decoration: none; padding: 10px 22px; border-radius: 13px; }
.badge-play:hover { background: #0d1811; }
.badge-play .lines { display: flex; flex-direction: column; line-height: 1.2; }
.badge-play .tiny { font-size: 10px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; }
.badge-play .big { font-size: 17px; font-weight: 600; }
.badge-soon { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.85); padding: 10px 22px; border-radius: 13px; font-size: 13.5px; font-weight: 500; }
@media (max-width: 720px) {
  .cta-band { padding: 40px 28px; }
  .cta-copy h2 { font-size: 27px; }
}

/* ── Footer ──────────────────────────────────────── */
footer { padding-bottom: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; gap: 8px; }
.foot-brand img { width: 24px; height: 24px; object-fit: contain; }
.foot-brand b { font-size: 14px; font-weight: 500; }
.foot-brand span { font-size: 13px; font-weight: 300; color: rgba(26, 58, 46, 0.5); }
.foot-links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.foot-links a { text-decoration: none; font-size: 13px; font-weight: 400; color: rgba(26, 58, 46, 0.6); }
.foot-links a:hover { color: var(--text-mid); }
.foot-links span { font-size: 13px; font-weight: 300; color: rgba(26, 58, 46, 0.5); }