:root {
  color-scheme: light;
  --green: #193a28;
  --green-mid: #416f49;
  --olive: #9ab36f;
  --cream: #fffdf7;
  --paper: #f7f8f1;
  --peach: #ffeadc;
  --yellow: #ffd16a;
  --brown: #493328;
  --muted: #5e6a61;
  --line: #e1e6da;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--green); font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid #8fac62; outline-offset: 4px; border-radius: 4px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
.container { width: min(100% - 56px, 1200px); margin-inline: auto; }
.eyebrow { color: #55805c; font-size: 12px; font-weight: 800; letter-spacing: .13em; line-height: 1.5; text-transform: uppercase; }

.site-header { border-bottom: 1px solid var(--line); background: var(--cream); }
.header-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 22px; font-weight: 800; letter-spacing: -.055em; white-space: nowrap; }
.brand img { width: 37px; height: 37px; border-radius: 9px; }
.header-right, .header-nav { display: flex; align-items: center; }
.header-right { gap: 31px; }
.header-nav { gap: 28px; color: #395740; font-size: 13px; font-weight: 700; }
.header-nav a { transition: color .2s ease; }
.header-nav a:hover { color: #84a45b; }
.header-nav .nav-download { padding: 10px 15px; border: 1px solid #a8bba6; border-radius: 9px; }
.header-nav .nav-download:hover { color: var(--green); background: #e8efda; }

.hero { min-height: 640px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(30px, 5vw, 80px); padding-block: 64px 80px; }
.hero-copy { min-width: 0; }
.hero-copy .eyebrow { margin-bottom: 20px; }
.hero h1 { max-width: 700px; margin: 0 0 24px; font-size: clamp(46px, 5.6vw, 80px); font-weight: 800; line-height: 1.06; letter-spacing: -.045em; }
.hero h1 mark { padding: 0 .035em; color: var(--green); background-color: transparent; background-image: linear-gradient(#c9dda6, #c9dda6); background-repeat: no-repeat; background-position: left center; background-size: 0% 82%; box-decoration-break: clone; -webkit-box-decoration-break: clone; animation: marker-sweep 1.2s .25s cubic-bezier(.25, .7, .2, 1) forwards; }
@keyframes marker-sweep { to { background-size: 100% 82%; } }
.hero-points { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.hero-points li { padding: 7px 13px; border: 1px solid #d5e0c9; border-radius: 999px; background: #f3f7e9; color: #47684d; font-size: 13px; font-weight: 700; }
.hero-art { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 40px 34px; border-radius: 40px; background: linear-gradient(160deg, #e8f0da, #fff0c8); }
.art-read, .art-quote { border: 1px solid rgba(35, 67, 43, .08); border-radius: 26px; background: #fffdf7; box-shadow: 0 16px 36px rgba(35, 67, 43, .1); }
.art-read { display: flex; align-items: center; gap: 22px; padding: 22px; }
.art-cover { position: relative; display: flex; flex: none; flex-direction: column; justify-content: space-between; width: 104px; height: 148px; padding: 14px 12px; border-radius: 8px 14px 14px 8px; background: #214530; color: #fffdf2; box-shadow: inset 6px 0 0 rgba(255, 255, 255, .08), 0 8px 18px rgba(33, 69, 48, .28); }
.art-cover b { font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 400; line-height: 1.1; }
.art-leaf { color: #f9ce70; font-size: 30px; }
.art-read-info { min-width: 0; flex: 1; }
.art-read-info small { display: block; color: #6f7f72; font-size: 13px; font-weight: 600; }
.art-read-info strong { display: block; margin: 4px 0 14px; font-size: 24px; font-weight: 800; letter-spacing: -.035em; }
.art-bar { height: 8px; margin-bottom: 9px; overflow: hidden; border-radius: 99px; background: #e4eadc; }
.art-bar span { display: block; width: 62%; height: 100%; border-radius: inherit; background: #69915c; }
.art-quote { position: relative; margin-left: 34px; padding: 24px 28px 26px; background: #fff; }
.art-mark { position: absolute; top: 4px; left: 18px; color: #c9dda6; font: 700 64px/1 Georgia, serif; }
.art-quote p { position: relative; padding-top: 18px; color: var(--green); font: 400 clamp(20px, 2vw, 25px)/1.4 Georgia, "Times New Roman", serif; }
.art-quote mark { background: linear-gradient(transparent 55%, #ffd16a 55%); color: inherit; }
.art-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.art-chips span { padding: 9px 15px; border-radius: 999px; background: #fffdf7; box-shadow: 0 6px 16px rgba(35, 67, 43, .08); color: #355b3c; font-size: 14px; font-weight: 700; }
.art-streak { background: #ffe8d9 !important; color: #7a4a2a !important; }
.hero-description { max-width: 840px; color: #5a6c5f; font-size: clamp(20px, 2vw, 24px); line-height: 1.55; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 19px; margin-top: 35px; }
.button { min-height: 55px; display: inline-flex; align-items: center; justify-content: center; gap: 21px; padding: 14px 22px; border-radius: 10px; background: var(--green-mid); color: #fff; font-size: 15px; font-weight: 800; transition: background .2s ease, transform .2s ease; }
.button:hover { background: #315c3b; transform: translateY(-2px); }
.button span { font-size: 19px; line-height: 1; font-weight: 500; }

.feature-section { padding-block: 100px 112px; border-top: 1px solid var(--line); }
.section-heading { max-width: 810px; margin-bottom: 47px; }
.section-heading h2, .screenshots-heading h2, .journal-layout h2, .habit-layout h2, .closing h2 { font-weight: 800; letter-spacing: -.045em; line-height: 1.15; }
.section-heading h2 { font-size: clamp(43px, 4.5vw, 61px); }
.section-heading p:not(.eyebrow) { margin-top: 17px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.feature-card { position: relative; min-height: 292px; display: flex; flex-direction: column; overflow: hidden; padding: 29px; border-radius: 19px; background: #e9f1df; transition: box-shadow .25s ease, transform .25s ease, opacity .55s ease, translate .55s ease; }
.feature-card:nth-child(2) { background: #ffebde; }
.feature-card:nth-child(3) { background: #fff0c8; }
.feature-card::after { content: ""; position: absolute; right: 0; bottom: 0; width: 29px; height: 29px; background: linear-gradient(135deg, rgba(255,255,255,0) 50%, rgba(255,255,255,.82) 50%); opacity: 0; transform: translate(5px, 5px); transition: opacity .25s ease, transform .25s ease; }
.feature-card:hover { box-shadow: 0 15px 35px rgba(37, 64, 38, .1); transform: translateY(-4px) rotate(-.35deg); }
.feature-card:hover::after { opacity: 1; transform: translate(0, 0); }
.feature-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.feature-index { color: #567c59; font-size: 13px; font-weight: 800; }
.feature-icon { width: 49px; height: 49px; display: inline-grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.55); color: #365e3c; font: 400 29px/1 "Material Symbols Rounded"; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; transition: transform .3s ease; }
.feature-card:hover .feature-icon, .habit-card:hover .habit-icon { transform: rotate(-8deg) scale(1.08); }
.feature-card > div:last-child { margin-top: auto; }
.feature-card h3 { font-size: clamp(27px, 2.65vw, 35px); font-weight: 800; letter-spacing: -.06em; line-height: 1.14; }
.feature-card p { margin-top: 13px; color: #4f6252; font-size: 15px; line-height: 1.63; }

.screenshots-section { padding-block: 101px 108px; background: #eaf1e4; color: var(--green); }
.screenshots-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 37px; }
.screenshots-heading .eyebrow { color: #5a8058; }
.screenshots-heading h2 { margin-top: 12px; font-size: clamp(42px, 4.4vw, 60px); }
.gallery-controls { display: flex; align-items: center; gap: 9px; padding-bottom: 4px; }
.gallery-controls button { width: 43px; height: 43px; border: 1px solid #a8bba6; border-radius: 50%; background: var(--cream); color: var(--green); font: inherit; font-size: 20px; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.gallery-controls button:hover:not(:disabled) { background: #d4e3c2; transform: translateY(-2px); }
.gallery-controls button:disabled { opacity: .4; cursor: default; }
.gallery-frame { padding: 24px 24px 22px; border: 1px solid #dce6d4; border-radius: 27px; background: #fffdf7; box-shadow: 0 18px 45px rgba(35, 67, 43, .06); }
.screenshot-track { width: 100%; display: flex; gap: 17px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.screenshot-track::-webkit-scrollbar { display: none; }
.screenshot-track img { width: clamp(255px, 26vw, 320px); height: auto; flex: none; align-self: flex-start; border: 1px solid #e9e8dd; border-radius: 14px; box-shadow: 0 8px 25px rgba(40, 62, 39, .09); scroll-snap-align: start; }
.gallery-progress { height: 4px; margin-top: 22px; border-radius: 100px; background: #e4eadc; overflow: hidden; }
.gallery-progress span { display: block; width: 18%; height: 100%; border-radius: inherit; background: #69915c; transform: translateX(0); transition: transform .2s ease; }

.journal-section { padding-block: 114px; background: var(--paper); border-top: 1px solid var(--line); }
.journal-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .94fr); align-items: center; gap: clamp(55px, 8vw, 120px); }
.journal-layout h2 { max-width: 620px; margin: 0 0 24px; font-size: clamp(43px, 4.4vw, 59px); }
.journal-layout p:not(.eyebrow) { max-width: 560px; color: #506652; font-size: 17px; line-height: 1.7; }
.journal-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #b7c9b3; }
.journal-list li { display: grid; grid-template-columns: 34px 1fr; gap: 15px; padding: 26px 0; border-bottom: 1px solid #b7c9b3; font-size: 19px; font-weight: 700; line-height: 1.5; letter-spacing: -.025em; transition: opacity .55s ease, translate .55s ease, padding-left .25s ease; }
.journal-list li:hover { padding-left: 10px; }
.journal-list span { color: #668b63; font-size: 13px; font-weight: 800; }

.habit-section { padding-block: 110px 125px; }
.habit-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); align-items: end; gap: 55px; }
.habit-layout h2 { max-width: 600px; font-size: clamp(43px, 4.4vw, 60px); }
.habit-copy { padding-bottom: 4px; color: #596c5d; font-size: 17px; line-height: 1.7; }
.habit-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 30px; margin-top: 64px; padding: 48px 42px; border-radius: 34px; background: #fff1c7; overflow: hidden; }
.habit-card { position: relative; min-height: 190px; padding: 27px 31px; border: 1px solid rgba(37,67,45,.1); border-radius: 28px; background: #1e3e2a; color: #fffdf4; box-shadow: 0 8px 0 rgba(35,53,30,.08), 0 15px 25px rgba(35,53,30,.08); transform: rotate(-3deg); transition: transform .3s ease, box-shadow .3s ease, opacity .55s ease, translate .55s ease; }
.habit-card:nth-child(2) { top: 21px; background: #f9c95f; color: #483720; transform: rotate(4deg); }
.habit-card:nth-child(3) { left: 13px; background: #f2f6eb; color: var(--green); transform: rotate(3deg); }
.habit-card:nth-child(4) { top: 17px; background: #ffe8d9; color: #4a342b; transform: rotate(-4deg); }
.habit-card:hover { z-index: 1; box-shadow: 0 16px 30px rgba(35,53,30,.16); transform: rotate(0deg) translateY(-5px); }
.habit-icon { display: inline-grid; width: 46px; height: 46px; margin-bottom: 22px; place-items: center; color: currentColor; font: 400 41px/1 "Material Symbols Rounded"; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 40; transition: transform .3s ease; }
.habit-card h3 { font-size: clamp(22px, 2.1vw, 29px); font-weight: 800; letter-spacing: -.045em; }
.habit-card p { max-width: 440px; margin-top: 11px; color: currentColor; opacity: .75; font-size: 15px; line-height: 1.55; }

.reveal-ready .feature-card, .reveal-ready .journal-list li, .reveal-ready .habit-card { opacity: 0; translate: 0 20px; }
.reveal-ready .feature-card.is-visible, .reveal-ready .journal-list li.is-visible, .reveal-ready .habit-card.is-visible { opacity: 1; translate: 0 0; }
.reveal-ready .feature-card:nth-child(2), .reveal-ready .journal-list li:nth-child(2), .reveal-ready .habit-card:nth-child(2) { transition-delay: .07s; }
.reveal-ready .feature-card:nth-child(3), .reveal-ready .journal-list li:nth-child(3), .reveal-ready .habit-card:nth-child(3) { transition-delay: .14s; }
.reveal-ready .habit-card:nth-child(4) { transition-delay: .21s; }

.closing { padding-block: 106px 109px; background: #214530; color: #fffdf2; }
.closing-inner { display: flex; flex-direction: column; align-items: flex-start; }
.closing h2 { max-width: 940px; font-size: clamp(47px, 5.4vw, 76px); }
.closing h2 { letter-spacing: -.045em; }
.closing h2 em { color: #f9ce70; font-style: normal; }
.closing p:not(.eyebrow) { max-width: 660px; margin-top: 26px; color: #d4e1cc; font-size: 17px; line-height: 1.6; }
.closing .button { flex: none; white-space: nowrap; background: var(--yellow); color: var(--brown); }
.closing .button { margin-top: 33px; }
.closing .button:hover { background: #ffe09b; }

@media (max-width: 900px) {
  .header-nav { gap: 14px; }
  .header-right { gap: 16px; }
  .hero { min-height: 0; grid-template-columns: 1fr; padding-block: 56px 60px; }
  .hero-art { width: min(100%, 560px); margin-inline: auto; }
  .hero h1 { font-size: clamp(50px, 8vw, 68px); }
  .closing h2 { font-size: clamp(46px, 5.5vw, 62px); }
}
@media (max-width: 700px) {
  .container { width: min(100% - 36px, 540px); }
  .header-inner { min-height: 72px; }
  .brand { font-size: 20px; }
  .brand img { width: 34px; height: 34px; }
  .header-nav .nav-download { padding: 9px 11px; font-size: 12px; }
  .header-nav .nav-link { display: none; }
  .hero { padding-block: 44px 60px; }
  .hero h1 { font-size: clamp(42px, 11vw, 58px); }
  .hero-art { padding: 24px 16px; border-radius: 30px; }
  .art-read { gap: 16px; padding: 16px; }
  .art-cover { width: 84px; height: 120px; }
  .art-quote { margin-left: 12px; padding: 20px 22px 22px; }
  .hero-description { font-size: 16px; }
  .feature-section, .journal-section, .habit-section { padding-block: 80px; }
  .section-heading { margin-bottom: 36px; }
  .feature-grid, .habit-layout, .journal-layout { grid-template-columns: 1fr; }
  .feature-grid { gap: 12px; }
  .feature-card { min-height: 224px; }
  .screenshots-section { padding-block: 78px 82px; }
  .screenshots-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .gallery-controls { padding-bottom: 0; }
  .gallery-frame { padding: 15px 15px 18px; border-radius: 21px; }
  .screenshot-track img { width: min(72vw, 290px); }
  .journal-layout, .habit-layout { gap: 38px; }
  .journal-list li { font-size: 17px; }
  .habit-cards { grid-template-columns: 1fr; gap: 10px; margin-top: 40px; padding: 35px 27px 47px; }
  .habit-card { min-height: 160px; padding: 22px 25px; }
  .habit-card:nth-child(2) { top: 0; left: 7%; }
  .habit-card:nth-child(3) { left: -2%; }
  .habit-card:nth-child(4) { top: 0; left: 5%; }
  .habit-icon { width: 39px; height: 39px; margin-bottom: 14px; }
  .closing { padding-block: 77px 83px; }
}
@media (max-width: 380px) {
  .header-right { gap: 10px; }
  .header-nav .nav-download { font-size: 11px; }
  .habit-cards { padding-inline: 18px; }
  .habit-card:nth-child(2), .habit-card:nth-child(4) { left: 2%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero h1 mark { animation: none; background-size: 100% 82%; }
  .button, .header-nav a, .gallery-controls button, .feature-card, .feature-card::after, .journal-list li, .habit-card, .feature-icon, .habit-icon, .gallery-progress span { transition: none; }
}