:root {
  --paper: #f2efe8;
  --paper-2: #eae6de;
  --white: #fbfaf7;
  --ink: #1e211e;
  --muted: #6f746f;
  --line: #d5d0c6;
  --green: #55735f;
  --green-soft: #dfe7df;
  --lavender: #e6e1ec;
  --sand: #ece3d7;
  --max: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
button { font: inherit; }
.wrap { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(242,239,232,.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.nav { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 680; letter-spacing: -.025em; }
.brand-mark { width: 30px; height: 30px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 3px; padding: 6px; border: 1px solid #9aa59d; border-radius: 8px; }
.brand-mark i { display:block; background: var(--green); border-radius: 2px 2px 1px 1px; }
.brand-mark i:nth-child(1){height:7px}.brand-mark i:nth-child(2){height:11px}.brand-mark i:nth-child(3){height:16px}
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { color: #555b56; text-decoration: none; font-size: 14px; }
.nav-links a:hover { color: var(--ink); }
.lang-switch { border: 1px solid #bbb6ac; border-radius: 999px; background: transparent; padding: 7px 10px; color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 650; }

.hero { padding: 96px 0 88px; border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: 1.03fr .97fr; gap: 80px; align-items: center; }
.eyebrow, .section-index, .card-label, .preview-label, .last-kicker { font-size: 12px; letter-spacing: .11em; text-transform: uppercase; font-weight: 700; }
.eyebrow { color: var(--green); margin-bottom: 24px; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
h1 { margin: 0; max-width: 720px; font-size: clamp(54px, 6.5vw, 88px); line-height: .98; letter-spacing: -.045em; }
h1 .accent { color: var(--green); font-style: italic; }
.hero-copy { max-width: 650px; margin: 30px 0 32px; color: #545a55; font-size: clamp(18px, 2vw, 21px); line-height: 1.62; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.btn { min-height: 48px; padding: 0 18px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 14px; font-weight: 650; }
.btn-primary { background: var(--ink); color: white; }
.btn-disabled { cursor: default; }
.text-link { color: var(--ink); text-underline-offset: 5px; font-size: 14px; }
.hero-note { margin: 16px 0 0; color: #868a86; font-size: 13px; }

.preview-wrap { position: relative; padding-top: 34px; }
.preview-label { position: absolute; top: 0; left: 18px; color: #777d78; }
.app-preview { width: min(430px, 100%); margin-left: auto; background: var(--white); border: 1px solid #cbc6bc; border-radius: 30px; padding: 24px; box-shadow: 0 24px 60px rgba(41,44,40,.10); }
.app-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; padding: 3px 2px 4px; }
.app-head small { display:block; color:#818680; font-size:11px; margin-bottom:3px; }
.app-head strong { font-size:21px; letter-spacing:-.025em; }
.mini-avatar { width:32px; height:32px; border-radius:50%; background:#d9c7ba; border:4px solid #f3eee8; }
.preview-card { border: 1px solid #ddd8ce; border-radius: 20px; padding: 18px; margin-top: 12px; background:#fff; }
.challenge-card { background:#f4f7f2; }
.skill-card { background:#f5f2f8; }
.day-card { background:#f7f3ee; }
.card-label { color:#7e837f; font-size:10px; }
.card-title { margin-top:7px; font-size:20px; font-weight:670; letter-spacing:-.025em; }
.challenge-line { margin-top:16px; display:flex; justify-content:space-between; color:#5f655f; font-size:13px; }
.challenge-line strong { color:var(--ink); }
.progress { height:7px; border-radius:99px; overflow:hidden; margin-top:10px; background:#dfe4de; }
.progress span { display:block; width:65%; height:100%; background:var(--green); border-radius:inherit; animation:progress-in 1s ease both; }
.streak { margin-top:12px; font-size:12px; color:#606560; }
.skill-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:17px; }
.skill-stats div { border-top:1px solid #d8d2df; padding-top:12px; }
.skill-stats strong { display:block; font-size:20px; }
.skill-stats small { display:block; margin-top:2px; color:#7b7d7c; }
.day-question { margin-top:10px; font-size:15px; line-height:1.45; font-weight:620; }
.day-options { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:14px; }
.day-options span { padding:9px 4px; border:1px solid #d9d3ca; border-radius:10px; text-align:center; font-size:11px; background:#fbfaf7; }

.section { padding: 104px 0; border-bottom: 1px solid var(--line); }
.section-title { display:grid; grid-template-columns:80px minmax(0,760px); gap:26px; margin-bottom:56px; }
.section-title.compact { margin-bottom: 0; }
.section-index { color:#8b8f8b; padding-top:10px; }
.section-title h2 { margin:0; font-size:clamp(39px,4.7vw,64px); line-height:1.06; letter-spacing:-.035em; }
.section-title p { margin:18px 0 0; color:#606660; font-size:17px; line-height:1.65; max-width:690px; }

.feature-list { border-top:1px solid var(--line); }
.feature-row { display:grid; grid-template-columns:220px 1fr 150px; gap:46px; align-items:center; min-height:210px; border-bottom:1px solid var(--line); }
.feature-name { display:flex; gap:16px; align-items:baseline; }
.feature-name > span { color:#91958f; font-size:11px; letter-spacing:.08em; }
.feature-name h3 { margin:0; font-size:33px; letter-spacing:-.03em; }
.feature-row > p { margin:0; color:#5e645f; font-size:16px; line-height:1.68; }
.metric { text-align:right; }
.metric strong { display:block; font-family:Georgia,"Times New Roman",serif; font-size:34px; font-weight:400; letter-spacing:-.03em; }
.metric span { color:#7f847f; font-size:12px; }
.days-sample { justify-self:end; width:120px; display:grid; grid-template-columns:repeat(6,1fr); gap:5px; }
.days-sample i { aspect-ratio:1; border-radius:4px; background:#c9d9cb; }
.days-sample i:nth-child(4n){background:#e2c975}.days-sample i:nth-child(7n){background:#d99b91}.days-sample i:nth-child(5n){background:#d9d8d2}

.quiet-section { background: var(--ink); color: #f5f2eb; }
.quiet-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:start; }
.quiet-section .section-index { color:#858c85; }
.quiet-copy > p { margin:0; color:#c7cbc6; font-size:19px; line-height:1.75; }
.plain-points { display:grid; grid-template-columns:1fr 1fr; margin-top:36px; border-top:1px solid #444a45; }
.plain-points span { padding:16px 0; border-bottom:1px solid #444a45; color:#eef0ec; font-size:14px; }
.plain-points span:nth-child(odd){padding-right:20px}.plain-points span:nth-child(even){padding-left:20px;border-left:1px solid #444a45}

.pro-section { background:#e9e5dc; }
.pro-panel { display:grid; grid-template-columns:.95fr 1.05fr; border:1px solid #c9c3b8; background:#f6f3ed; }
.pro-copy { padding:48px; border-right:1px solid #c9c3b8; }
.pro-copy h3 { margin:0; font-size:38px; line-height:1.13; letter-spacing:-.03em; }
.pro-copy p { margin:22px 0 0; color:#646a64; line-height:1.65; }
.pro-list { list-style:none; margin:0; padding:24px 42px; }
.pro-list li { padding:17px 0; border-bottom:1px solid #d8d2c8; font-size:15px; }
.pro-list li:last-child { border-bottom:0; }
.pro-list li::before { content:"+"; display:inline-block; width:26px; color:var(--green); font-weight:700; }

.faq-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:start; }
.faq { border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); padding:20px 0; }
.faq summary { cursor:pointer; list-style:none; font-size:17px; font-weight:620; padding-right:30px; position:relative; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:0; top:-2px; font-size:24px; font-weight:300; }
.faq details[open] summary::after { content:"−"; }
.faq p { margin:14px 40px 0 0; color:#646a64; line-height:1.65; }

.last-section { padding: 120px 0; background: var(--paper); }
.last-inner { max-width:900px; text-align:center; }
.last-kicker { color:var(--green); margin:0 0 18px; }
.last-inner h2 { margin:0 auto 34px; font-size:clamp(42px,5.2vw,70px); line-height:1.05; letter-spacing:-.04em; }

.footer { border-top:1px solid var(--line); padding:28px 0 34px; }
.footer-row { display:flex; justify-content:space-between; align-items:center; gap:24px; color:#686d68; font-size:13px; }
.footer-row > div { display:flex; gap:14px; align-items:center; }
.footer-row strong { color:var(--ink); }
.footer nav { display:flex; gap:20px; }
.footer a { text-decoration:none; }
.footer a:hover { text-decoration:underline; text-underline-offset:4px; }

.reveal { opacity:0; transform:translateY(16px); transition:opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }
@keyframes progress-in { from{width:0} to{width:65%} }
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.progress span{animation:none} }

@media (max-width: 900px) {
  .hero { padding-top:72px; }
  .hero-grid { grid-template-columns:1fr; gap:64px; }
  .app-preview { margin-inline:auto; }
  .feature-row { grid-template-columns:180px 1fr; gap:26px; padding:32px 0; }
  .feature-row .metric, .days-sample { grid-column:2; justify-self:start; text-align:left; }
  .quiet-grid, .faq-grid { grid-template-columns:1fr; gap:46px; }
  .pro-panel { grid-template-columns:1fr; }
  .pro-copy { border-right:0; border-bottom:1px solid #c9c3b8; }
}

@media (max-width: 640px) {
  .wrap { width:min(100% - 28px, var(--max)); }
  .nav { height:60px; }
  .nav-links a { display:none; }
  .nav-links { gap:10px; }
  .hero { padding:60px 0 68px; }
  h1 { font-size:clamp(46px,14vw,68px); }
  .hero-copy { font-size:17px; margin-top:24px; }
  .preview-wrap { padding-top:28px; }
  .app-preview { padding:18px; border-radius:24px; }
  .section { padding:74px 0; }
  .section-title { grid-template-columns:1fr; gap:12px; margin-bottom:38px; }
  .section-index { padding-top:0; }
  .section-title h2 { font-size:40px; }
  .feature-row { grid-template-columns:1fr; gap:16px; min-height:0; padding:28px 0; }
  .feature-row .metric, .days-sample { grid-column:auto; justify-self:start; }
  .metric { text-align:left; }
  .quiet-grid { gap:32px; }
  .plain-points { grid-template-columns:1fr; }
  .plain-points span:nth-child(even){padding-left:0;border-left:0}.plain-points span:nth-child(odd){padding-right:0}
  .pro-copy { padding:30px; }
  .pro-copy h3 { font-size:31px; }
  .pro-list { padding:18px 30px; }
  .faq-grid { gap:34px; }
  .last-section { padding:84px 0; }
  .footer-row { align-items:flex-start; flex-direction:column; }
  .footer nav { flex-wrap:wrap; }
}