:root {
  color-scheme: light;
  --background: #f7f3ea;
  --surface: #ffffff;
  --surface-soft: #edf8f5;
  --text: #17333b;
  --heading: #102b33;
  --muted: #5d7176;
  --accent: #08aeb9;
  --accent-dark: #087d87;
  --accent-soft: #dff5f2;
  --orange: #ff8a2b;
  --orange-soft: #fff0df;
  --blue: #267dc4;
  --blue-soft: #e8f2fb;
  --border: #dbe5e3;
  --shadow: 0 24px 70px rgba(18, 63, 74, .13);
  --content-width: 1180px;
  --reading-width: 780px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-size: 17px;
  line-height: 1.65;
}

a { color: var(--accent-dark); }
a:hover { text-decoration-thickness: 2px; }
img { display: block; max-width: 100%; }

.site-header {
  position: relative;
  z-index: 20;
  background: rgba(247, 243, 234, .92);
  border-bottom: 1px solid rgba(23, 51, 59, .09);
  backdrop-filter: blur(18px);
}

.header-inner,
.landing-main,
.footer-inner {
  width: min(calc(100% - 40px), var(--content-width));
  margin: 0 auto;
}

body:not(.home) main {
  width: min(calc(100% - 32px), var(--reading-width));
  margin: 0 auto;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--heading);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  text-decoration: none;
}

.brand-mark {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  box-shadow: 0 8px 20px rgba(8, 24, 67, .22);
  object-fit: cover;
}

nav { display: flex; flex-wrap: wrap; gap: 24px; }
nav a { color: var(--muted); font-size: 14px; font-weight: 700; text-decoration: none; }
nav a:hover, nav a[aria-current="page"] { color: var(--accent-dark); }

main { padding: 48px 0 72px; }
.landing-main { padding: 0; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  align-items: center;
  min-height: 720px;
  gap: 64px;
  padding: 70px 0 80px;
}

.hero::before {
  position: absolute;
  z-index: -1;
  top: -240px;
  right: -280px;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 174, 96, .46) 0, rgba(255, 209, 157, .18) 47%, rgba(247, 243, 234, 0) 70%);
  content: "";
}

.eyebrow {
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

h1, h2, h3 { color: var(--heading); line-height: 1.12; }
h1 { margin: 14px 0 22px; font-size: clamp(45px, 6.2vw, 76px); letter-spacing: -.055em; }
h1 span { color: var(--accent-dark); }
h2 { margin: 10px 0 14px; font-size: clamp(32px, 4vw, 52px); letter-spacing: -.035em; }
h3 { margin: 14px 0 8px; font-size: 22px; letter-spacing: -.02em; }
p, li { max-width: 72ch; }
.lede { color: var(--muted); font-size: clamp(19px, 2.2vw, 23px); line-height: 1.55; }
.updated { color: var(--muted); font-size: 14px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 10px; }
.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 16px;
  font-weight: 800;
  text-decoration: none;
}
.button-primary { background: var(--heading); box-shadow: 0 14px 28px rgba(16, 43, 51, .18); color: white; }
.button-secondary { border: 1px solid var(--border); background: rgba(255, 255, 255, .64); color: var(--heading); }
.button:hover { transform: translateY(-1px); text-decoration: none; }

.launch-note { margin: 0 0 22px; color: var(--accent-dark); font-size: 14px; font-weight: 750; }

.benefit-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 15px; }
.benefit-list li { display: flex; align-items: center; gap: 10px; }
.benefit-list span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); font-size: 12px; font-weight: 900; }

.hero-visual { position: relative; min-height: 620px; }
.sun-orb { position: absolute; top: 26px; right: 24px; width: 360px; height: 360px; border-radius: 50%; background: linear-gradient(145deg, #ff9a3e, #ffbd72); box-shadow: 0 35px 80px rgba(234, 118, 25, .2); }
.phone {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  border: 9px solid #16353d;
  border-radius: 54px;
  background: #edf0f5;
  box-shadow: 0 35px 90px rgba(16, 43, 51, .28);
}
.phone-hero { top: 36px; right: 70px; width: 315px; height: 612px; transform: rotate(2deg); }
.phone-top { position: absolute; z-index: 5; top: 10px; left: 50%; width: 94px; height: 24px; transform: translateX(-50%); border-radius: 20px; background: #102b33; }
.phone-screen { position: absolute; inset: 0; overflow: hidden; background: #f4f4f8; }
.phone-screen img { width: 100%; max-width: none; }
.crop-today img { transform: translateY(-7.8%); }

.floating-note { position: absolute; z-index: 6; width: 202px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 18px; background: rgba(255, 255, 255, .91); box-shadow: 0 16px 40px rgba(16, 43, 51, .14); backdrop-filter: blur(12px); }
.floating-note strong, .floating-note span { display: block; }
.floating-note strong { color: var(--heading); font-size: 15px; }
.floating-note span { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.note-solo { top: 112px; left: 2px; }
.note-private { right: 0; bottom: 26px; }

.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid rgba(23, 51, 59, .1);
  border-radius: 26px;
  background: var(--heading);
  box-shadow: var(--shadow);
  color: white;
}
.trust-strip div { padding: 26px 28px; }
.trust-strip div + div { border-left: 1px solid rgba(255, 255, 255, .14); }
.trust-strip strong, .trust-strip span { display: block; }
.trust-strip strong { font-size: 17px; }
.trust-strip span { margin-top: 4px; color: rgba(255, 255, 255, .68); font-size: 14px; line-height: 1.45; }

.solo-path-section, .story-section, .preview-section, .pricing-section, .faq-section, .legal-section { padding: 112px 0 20px; }
.section-heading { max-width: 780px; }
.section-heading p { color: var(--muted); font-size: 18px; }

.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.path-card { position: relative; min-height: 270px; padding: 30px; border: 1px solid var(--border); border-radius: 28px; background: rgba(255, 255, 255, .74); box-shadow: 0 14px 35px rgba(16, 43, 51, .05); }
.path-card-accent { border-color: rgba(8, 174, 185, .28); background: var(--accent-soft); }
.path-number { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; background: var(--heading); color: white; font-size: 15px; font-weight: 900; }
.path-card p { margin: 0; color: var(--muted); font-size: 16px; }
.roadmap-note { margin: 20px 0 0; padding: 17px 20px; border-radius: 17px; background: var(--orange-soft); color: var(--muted); font-size: 14px; }
.roadmap-note strong { color: var(--heading); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.feature-card { min-height: 285px; padding: 30px; border-radius: 28px; }
.feature-card p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.feature-teal { background: var(--accent-soft); }
.feature-orange { background: var(--orange-soft); }
.feature-blue { background: var(--blue-soft); }
.feature-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 17px; background: rgba(255, 255, 255, .72); color: var(--accent-dark); font-size: 25px; box-shadow: 0 8px 24px rgba(16, 43, 51, .08); }
.feature-orange .feature-icon { color: #c65b08; }
.feature-blue .feature-icon { color: var(--blue); }

.preview-section { margin-top: 95px; padding: 94px 34px 48px; border-radius: 46px; background: linear-gradient(145deg, #143b44, #0c272f); color: white; }
.preview-heading { margin: 0 auto 48px; text-align: center; }
.preview-heading .eyebrow { color: #79ddd8; }
.preview-heading h2 { color: white; }
.preview-heading p { margin-right: auto; margin-left: auto; color: rgba(255, 255, 255, .67); }
.screenshot-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 20px; }
.screen-card { margin: 0; padding: 10px; border-radius: 34px; background: rgba(255, 255, 255, .09); }
.featured-screen { transform: translateY(-24px); background: rgba(255, 255, 255, .16); }
.shot-frame { position: relative; overflow: hidden; height: 485px; border: 6px solid rgba(255, 255, 255, .85); border-radius: 27px; background: #f3f3f8; box-shadow: 0 24px 55px rgba(0, 0, 0, .25); }
.shot-frame img { width: 100%; max-width: none; transform: translateY(-7.5%); }
.shot-calendar img { transform: translateY(-9%); }
.shot-today img { transform: translateY(-8.5%); }
.shot-expenses img { transform: translateY(-8%); }
.screen-card figcaption { display: block; padding: 17px 12px 15px; }
.screen-card figcaption strong, .screen-card figcaption span { display: block; }
.screen-card figcaption strong { color: white; font-size: 16px; }
.screen-card figcaption span { margin-top: 3px; color: rgba(255, 255, 255, .62); font-size: 13px; line-height: 1.4; }

.message-free-section { display: grid; grid-template-columns: 1fr 260px; align-items: center; gap: 80px; margin: 112px 0 0; padding: 70px 76px; overflow: hidden; border-radius: 40px; background: linear-gradient(135deg, #fff0df, #ffe2c3); }
.message-free-copy p { color: var(--muted); font-size: 18px; }
.message-free-badge { display: grid; width: 220px; height: 220px; align-content: center; justify-items: center; border: 2px solid rgba(255, 255, 255, .8); border-radius: 50%; background: rgba(255, 255, 255, .64); box-shadow: 0 24px 60px rgba(186, 86, 10, .13); color: var(--heading); text-align: center; transform: rotate(3deg); }
.message-free-badge span { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 12px; border-radius: 50%; background: var(--accent); color: white; font-weight: 900; }
.message-free-badge strong { font-size: 20px; line-height: 1.2; }

.pricing-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .78fr); align-items: center; gap: 72px; }
.pricing-copy > p { color: var(--muted); font-size: 18px; }
.pricing-copy .pricing-fineprint { margin-top: 24px; font-size: 13px; line-height: 1.55; }
.price-card { padding: 36px; border-radius: 34px; background: var(--heading); box-shadow: var(--shadow); color: white; }
.price-label { color: #8ce4df; font-size: 13px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.price { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 20px; }
.price strong { color: white; font-size: clamp(48px, 6vw, 68px); line-height: 1; letter-spacing: -.05em; }
.price span { color: rgba(255, 255, 255, .65); font-size: 15px; }
.price-list { display: grid; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; color: rgba(255, 255, 255, .76); font-size: 15px; }
.price-list li { position: relative; padding-left: 25px; }
.price-list li::before { position: absolute; left: 0; color: #79ddd8; content: "✓"; font-weight: 900; }
.price-card .button { width: 100%; background: white; color: var(--heading); }

.faq-section { padding-bottom: 26px; }
.faq-list { display: grid; gap: 12px; max-width: 900px; margin-top: 38px; }
.faq-list details { border: 1px solid var(--border); border-radius: 20px; background: rgba(255, 255, 255, .74); }
.faq-list summary { position: relative; padding: 21px 58px 21px 24px; color: var(--heading); font-size: 17px; font-weight: 800; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; top: 50%; right: 24px; color: var(--accent-dark); content: "+"; font-size: 24px; transform: translateY(-50%); }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { margin: -2px 24px 23px; color: var(--muted); font-size: 16px; }

.launch-cta { display: flex; align-items: center; justify-content: space-between; gap: 52px; margin-top: 92px; padding: 46px 52px; border-radius: 32px; background: linear-gradient(135deg, var(--heading), #174c55); box-shadow: var(--shadow); color: white; }
.launch-cta-copy { max-width: 720px; }
.launch-cta .eyebrow { color: #8ce4df; }
.launch-cta h2 { margin: 6px 0 10px; color: white; font-size: clamp(30px, 4vw, 46px); }
.launch-cta p { margin: 0; color: rgba(255, 255, 255, .72); font-size: 17px; }
.launch-cta .button { flex: 0 0 auto; min-width: 210px; background: white; color: var(--heading); }

.legal-section { padding-bottom: 90px; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.card { position: relative; display: block; min-height: 190px; padding: 26px; border: 1px solid var(--border); border-radius: 24px; background: rgba(255, 255, 255, .76); box-shadow: 0 14px 35px rgba(16, 43, 51, .06); color: var(--text); text-decoration: none; }
.card:hover { border-color: rgba(8, 174, 185, .5); transform: translateY(-2px); text-decoration: none; }
.card strong, .card span { display: block; }
.card strong { margin-bottom: 8px; color: var(--heading); font-size: 19px; }
.card span { color: var(--muted); font-size: 15px; }
.card b { position: absolute; right: 24px; bottom: 20px; color: var(--accent-dark); font-size: 22px; }
.notice { padding: 18px 20px; border-left: 4px solid var(--accent); border-radius: 14px; background: var(--accent-soft); }

footer { border-top: 1px solid rgba(23, 51, 59, .1); background: var(--heading); color: rgba(255, 255, 255, .67); font-size: 14px; }
.footer-inner { display: flex; justify-content: space-between; gap: 30px; padding: 34px 0 42px; }
.footer-inner p { margin: 0; }
.footer-inner strong { color: white; }
.footer-inner a { color: #8ce4df; }
.footer-links { text-align: center; }

body:not(.home) main { padding-top: 54px; }
body:not(.home) h1 { font-size: clamp(38px, 7vw, 54px); }
body:not(.home) h2 { margin-top: 42px; font-size: 26px; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 72px; }
  .hero-copy { max-width: 760px; }
  .hero-visual { width: min(100%, 560px); margin: -10px auto 0; }
  .path-grid { grid-template-columns: 1fr; }
  .path-card { min-height: auto; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: auto; }
  .screenshot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .shot-frame { height: 410px; }
  .screen-card { padding: 7px; }
  .screen-card figcaption { padding: 14px 8px; }
  .message-free-section { gap: 35px; padding: 56px 46px; }
  .pricing-section { grid-template-columns: 1fr; gap: 38px; }
  .launch-cta { align-items: flex-start; flex-direction: column; gap: 26px; }
}

@media (max-width: 720px) {
  .header-inner { align-items: flex-start; flex-direction: column; gap: 13px; padding: 17px 0; }
  nav { gap: 20px; }
  .hero { min-height: auto; gap: 32px; padding: 54px 0 64px; }
  .hero-visual { min-height: 540px; }
  .sun-orb { right: 0; width: 300px; height: 300px; }
  .phone-hero { top: 20px; right: 50%; width: 270px; height: 525px; transform: translateX(50%) rotate(1.5deg); }
  .floating-note { width: 168px; }
  .note-solo { top: 80px; left: -8px; }
  .note-private { right: -8px; bottom: 5px; }
  .trust-strip { grid-template-columns: 1fr; }
  .trust-strip div + div { border-top: 1px solid rgba(255, 255, 255, .14); border-left: 0; }
  .solo-path-section, .story-section, .pricing-section, .faq-section, .legal-section { padding-top: 82px; }
  .preview-section { margin: 76px -4px 0; padding: 68px 18px 34px; border-radius: 34px; }
  .screenshot-grid { grid-template-columns: 1fr; gap: 18px; }
  .featured-screen { transform: none; }
  .screen-card { width: min(100%, 390px); margin: 0 auto; padding: 10px; }
  .shot-frame { height: 590px; }
  .message-free-section { grid-template-columns: 1fr; margin-top: 76px; padding: 44px 28px; text-align: left; }
  .message-free-badge { width: 180px; height: 180px; margin: 0 auto; }
  .price-card { padding: 30px 26px; }
  .launch-cta { margin-top: 72px; padding: 38px 28px; }
  .launch-cta .button { width: 100%; }
  .card-grid { grid-template-columns: 1fr; }
  .card { min-height: 150px; }
  .footer-inner { flex-direction: column; }
}

@media (max-width: 430px) {
  .header-inner, .landing-main, .footer-inner { width: min(calc(100% - 28px), var(--content-width)); }
  h1 { font-size: 47px; }
  .hero-actions .button { width: 100%; }
  .benefit-list { font-size: 14px; }
  .hero-visual { min-height: 500px; }
  .phone-hero { width: 246px; height: 480px; }
  .floating-note { width: 150px; padding: 12px; }
  .floating-note span { font-size: 11px; }
  .note-private { right: -4px; }
  .shot-frame { height: 535px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button:hover, .card:hover { transform: none; }
}