:root {
  --page: #f5f0e2;
  --white: #fffdf8;
  --cream: #fbf6ea;
  --ink: #1f2f25;
  --text: #2f3e34;
  --muted: #56625a;
  --green: #2e5941;
  --green-dark: #234632;
  --green-deep: #1c3a29;
  --green-tint: #e7efdc;
  --green-line: #a9bb98;
  --line: #d9dccd;
  --accent: #a7442b;
  --accent-hover: #86341f;
  --accent-shadow: #6f2a18;
  --amber: #8a5a12;
  --amber-tint: #f7ead2;
  --on-dark: #f3eedf;
  --on-dark-muted: #c9d2c1;
  --sans: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', YuGothic, 'Yu Gothic', Meiryo, sans-serif;
  --bold: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', YuGothic, 'Yu Gothic', Meiryo, sans-serif;
  --serif: 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, serif;
  --num: 'Helvetica Neue', Arial, 'Hiragino Sans', YuGothic, 'Yu Gothic', Meiryo, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; color: var(--text); background: var(--page); font-family: var(--sans); font-size: 1rem; line-height: 1.85; -webkit-font-smoothing: antialiased; }
img { display: block; width: 100%; height: auto; }
figure, p, h1, h2, h3, dl, dd, ol, ul { margin: 0; }
p + p { margin-top: .9rem; }
h1, h2, h3, strong, summary, dt, .button, .aima-button, .band { font-family: var(--bold); }
h1, h2, h3 { color: var(--ink); font-weight: 700; word-break: keep-all; overflow-wrap: anywhere; }
h1 { font-family: var(--serif); font-size: clamp(2rem, 1rem + 4.4vw, 3.25rem); line-height: 1.35; letter-spacing: .04em; }
h2 { font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.125rem); line-height: 1.45; letter-spacing: .02em; }
h3 { font-size: clamp(1.125rem, 1rem + .5vw, 1.3125rem); line-height: 1.55; }
strong { color: var(--ink); font-weight: 700; }
.num { font-family: var(--num); font-weight: 700; letter-spacing: 0; }
a { color: var(--green-dark); text-underline-offset: .25em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.wrap { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.nowrap { white-space: nowrap; }
.skip-link { position: fixed; z-index: 20; top: .5rem; left: .5rem; padding: .5rem 1rem; background: var(--white); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.mock-bar { margin: 0; padding: .3rem 1rem; color: #4f3c22; background: #efe1c8; font-size: .875rem; text-align: center; text-wrap: balance; }

/* header */
.site-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--line); background: var(--page); }
.header-inner { min-height: 4.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: baseline; gap: .6rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand > span { font-family: Georgia, serif; font-size: 1.5rem; letter-spacing: .08em; }
.brand small { color: var(--muted); font-size: .8125rem; }
.nav-desktop { display: flex; align-items: center; gap: 1.4rem; font-size: .9375rem; }
.nav-desktop a { color: var(--text); text-decoration: none; }
.nav-desktop a:hover { color: var(--green-dark); text-decoration: underline; }
.nav-desktop .nav-cta { padding: .45rem 1.2rem; border-radius: 999px; background: var(--accent); color: #fff; font-family: var(--bold); font-weight: 700; }
.nav-desktop .nav-cta:hover { background: var(--accent-hover); color: #fff; text-decoration: none; }
.nav-mobile { display: none; position: relative; flex-shrink: 0; }
.nav-mobile summary { list-style: none; padding: .4rem 1rem; border: 1px solid var(--green); border-radius: 999px; color: var(--green-dark); font-size: .9375rem; white-space: nowrap; cursor: pointer; }
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile nav { position: absolute; right: 0; top: calc(100% + .5rem); display: grid; min-width: 12rem; padding: .5rem; border: 1px solid var(--line); border-radius: 10px; background: var(--white); box-shadow: 0 .5rem 1.5rem #1f2f2522; }
.nav-mobile nav a { padding: .6rem .8rem; color: var(--text); text-decoration: none; }

/* shared */
.band, .big-try__label { display: inline-block; padding: .35rem 1rem; border-left: 5px solid var(--green); background: var(--green-tint); color: var(--ink); font-size: .9375rem; font-weight: 700; line-height: 1.6; }
.band + h2 { margin-top: 1.1rem; }
.band--dark { border-left-color: #b8cba6; background: #ffffff14; color: var(--on-dark); }
.lead { max-width: 46rem; margin-top: 1.1rem; font-size: 1.0625rem; }
.note { margin-top: 1rem; color: var(--muted); font-size: .875rem; line-height: 1.75; }
.dots { margin-top: .6rem; padding-left: 1.2rem; }
.dots li + li { margin-top: .35rem; }
.tag { display: inline-block; padding: .05rem .7rem; border: 1px solid var(--green); border-radius: 999px; font-family: var(--bold); font-size: .8125rem; font-weight: 700; line-height: 1.7; white-space: nowrap; }
.tag--now { background: var(--green); color: #fff; }
.tag--build { background: var(--white); color: var(--green-dark); border-style: dashed; }
.button, .aima-button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.5rem; padding: .8rem 1.9rem; border-radius: 999px; background: var(--accent); box-shadow: 0 3px 0 var(--accent-shadow); color: #fff; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; text-align: center; text-decoration: none; }
.button:hover, .aima-button:hover { background: var(--accent-hover); color: #fff; }
.button:active, .aima-button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--accent-shadow); }
.button--wide { display: flex; width: 100%; margin-top: 1.4rem; }
.text-link { font-family: var(--bold); font-weight: 700; }
.fold { border-top: 1px solid var(--line); }
.fold summary { position: relative; list-style: none; padding: .9rem 2.25rem .9rem 0; color: var(--ink); font-weight: 700; line-height: 1.6; cursor: pointer; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { position: absolute; top: .75rem; right: .25rem; content: '+'; color: var(--green); font-family: var(--num); font-size: 1.35rem; line-height: 1.4; }
.fold[open] > summary::after { content: '−'; }
.fold-body { padding-bottom: 1.1rem; }

/* 1. hero */
.hero { padding-block: clamp(2rem, 5vw, 4.5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(2rem, 4vw, 3.5rem); }
.eyebrow { color: var(--green-dark); font-family: var(--bold); font-size: .9375rem; font-weight: 700; letter-spacing: .08em; }
.hero h1 { margin-top: .6rem; }
.hero-lead { margin-top: 1.4rem; color: var(--ink); font-size: clamp(1rem, .95rem + .3vw, 1.125rem); line-height: 2; }
.hero-service { margin-top: 1rem; }
.founding { display: inline-block; margin-top: 1.4rem; padding: .35rem 1rem; border-radius: 6px; background: var(--amber-tint); color: var(--amber); font-family: var(--bold); font-weight: 700; }
.founding strong { color: var(--amber); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.6rem; margin-top: 1.4rem; }
.price-line { margin-top: 1rem; color: var(--ink); font-family: var(--bold); font-weight: 700; }
.price-line .num { margin-inline: .2rem .1rem; font-size: 1.6rem; }
.price-cond { margin-left: .8rem; color: var(--muted); font-size: .875rem; font-weight: 400; }

/* log card + entries */
.log-card { padding: 1.4rem clamp(1.1rem, 3vw, 1.6rem); border: 1px solid var(--line); border-top: 6px solid var(--green); border-radius: 12px; background: var(--white); box-shadow: 0 .8rem 2rem #26382e1c; }
.log-card__title { color: var(--ink); font-family: var(--bold); font-size: 1.1875rem; font-weight: 700; }
.log-card__sub { margin-top: .1rem; color: var(--muted); font-size: .875rem; }
.log-card__more { display: inline-block; margin-top: 1rem; font-family: var(--bold); font-weight: 700; }
.entries { list-style: none; padding: 0; }
.entries--compact { margin-top: 1rem; border-top: 1px solid var(--line); }
.entries--compact .entry { padding-block: .85rem; border-bottom: 1px solid var(--line); }
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; font-size: .8125rem; line-height: 1.6; }
.entry-meta time { color: var(--green-dark); font-size: 1rem; margin-right: .2rem; }
.use { padding: 0 .55rem; border-radius: 4px; background: var(--green-tint); color: var(--green-dark); font-weight: 700; }
.ai { color: var(--muted); }
.result { padding: 0 .6rem; border-radius: 999px; font-weight: 700; }
.result--up { background: var(--green); color: #fff; }
.result--tried { border: 1px solid var(--green); color: var(--green-dark); }
.result--meh { background: var(--amber-tint); color: var(--amber); border: 1px solid #e0c18c; }
.result--now { border: 1px dashed var(--green); color: var(--green-dark); }
.entry-text { margin-top: .35rem; color: var(--ink); line-height: 1.75; }

/* sheet */
.sheet { width: min(100% - 2rem, 72rem); margin-inline: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.sheet > .section { padding: clamp(2.5rem, 5vw, 4.25rem) clamp(1.1rem, 5.5vw, 4.5rem); }
.sheet > .section + .section { border-top: 1px solid var(--line); }

/* 2. problem */
.changes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-top: 1.5rem; padding: 0; list-style: none; }
.changes li { padding: 1rem; border: 1px dashed var(--green-line); border-radius: 10px; background: var(--cream); }
.changes span { display: block; color: var(--muted); font-size: .875rem; }
.changes strong { display: block; margin-top: .2rem; color: var(--text); font-size: 1.125rem; font-weight: 500; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 2rem; margin-top: 2rem; }
.pullquote { padding: 1.4rem 1.6rem; border-left: 4px solid var(--accent); background: var(--cream); color: var(--ink); font-size: 1.125rem; line-height: 1.9; }

/* 3. cycle */
.cycle { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin-top: 1.8rem; padding: 0; list-style: none; }
.cycle li { position: relative; padding: 1.1rem 1rem 1.2rem; border-radius: 10px; background: var(--green-tint); }
.cycle li:not(:last-child)::after { position: absolute; top: 1.2rem; right: -.6rem; z-index: 1; content: '→'; color: var(--green); font-family: var(--num); font-weight: 700; }
.cycle-en { display: block; color: var(--green); font-family: var(--num); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; }
.cycle strong { display: block; font-size: 1.1875rem; }
.cycle p { margin-top: .4rem; font-size: .9375rem; line-height: 1.7; }
.cycle .tag { margin-top: .6rem; }
.cycle-note { margin-top: 1.2rem; color: var(--ink); font-family: var(--bold); font-weight: 700; }

/* 4. log */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1.8rem; }
.stats > div { padding: 1.1rem 1.2rem; border-radius: 10px; background: var(--green-tint); color: var(--text); }
.stats dt { color: var(--muted); font-size: .875rem; }
.stats dd { color: var(--ink); font-family: var(--bold); font-weight: 700; }
.stats dd .num { font-size: 2.5rem; line-height: 1.2; margin-right: .15rem; }
.stats p { margin-top: .2rem; color: var(--on-dark-muted); font-size: .875rem; }
.uses { margin-top: .9rem; color: var(--muted); font-size: .9375rem; }
.uses span { display: inline-block; margin: .2rem .4rem 0 0; padding: 0 .6rem; border-radius: 4px; background: var(--green-tint); color: var(--green-dark); font-weight: 700; }
.timeline { position: relative; margin-top: 2rem; padding-left: 1.6rem; }
.timeline::before { position: absolute; top: .4rem; bottom: .4rem; left: .45rem; width: 2px; background: var(--green-line); content: ''; }
.timeline .entry { position: relative; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.timeline .entry + .entry { margin-top: .8rem; }
.timeline .entry::before { position: absolute; top: 1.15rem; left: -1.5rem; width: .8rem; height: .8rem; border: 2px solid var(--white); border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--green-line); content: ''; }
.entry--fail { border-color: #e0c18c !important; background: #fdf6e8 !important; }
.entry--fail::before { background: var(--amber) !important; }
.entry--next { border-style: dashed !important; }
.next-box { margin-top: .7rem; padding: .7rem .9rem; border-left: 3px solid var(--green); background: var(--cream); font-size: .9375rem; }
.next-label { color: var(--green-dark); font-size: .875rem; }
.failure { margin-top: 2.2rem; padding: 1.5rem clamp(1.1rem, 3vw, 2rem); border-radius: 12px; background: var(--amber-tint); }
.failure h3 + p { margin-top: .6rem; }

/* 5. village (dark) */
.village { margin-block: clamp(2.5rem, 5vw, 4rem); padding-block: clamp(3rem, 6vw, 5rem); background: var(--green-deep); color: var(--on-dark); }
.village h2, .village h3, .village strong { color: #fff; }
.village h2 { margin-bottom: 1rem; }
.village-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 4vw, 3.5rem); }
.voices { margin-block: 1.2rem; padding: 0; list-style: none; }
.voices li { display: inline-block; margin: 0 .4rem .5rem 0; padding: .4rem .9rem; border-radius: 1rem 1rem 1rem .2rem; background: #ffffff1a; color: #fff; }
.big-number { margin-top: .4rem; color: #fff; font-family: var(--bold); font-weight: 700; }
.big-number .num { font-size: clamp(3rem, 2rem + 4vw, 4.5rem); line-height: 1.1; margin-right: .2rem; }
.big-number small { display: block; color: var(--on-dark-muted); font-size: .875rem; font-weight: 400; }
.founding-box { margin-top: 1.6rem; padding: 1.2rem 1.4rem; border: 1px solid #ffffff40; border-radius: 10px; }
.founding-box h3 + p { margin-top: .4rem; }
.village-art img { border-radius: 12px; }
.village-art figcaption { margin-top: .6rem; color: var(--on-dark-muted); font-size: .8125rem; }

/* 6. weeks */
.weeks { margin-top: 1.8rem; padding: 0; list-style: none; border-top: 2px solid var(--green); }
.weeks li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .1rem 1.2rem; padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.week { grid-row: 1 / span 2; color: var(--green); font-family: var(--bold); font-size: 1.125rem; font-weight: 700; }
.weeks strong { font-size: 1.125rem; }
.weeks p { grid-column: 2; }

/* 7. tries */
.tries { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: .8rem; margin-top: 1.8rem; padding: 0; list-style: none; }
.tries li { padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-top: 3px solid var(--green); border-radius: 8px; background: var(--cream); }
.tries strong { font-size: 1.0625rem; }
.tries p { margin-top: .3rem; font-size: .9375rem; line-height: 1.75; }

/* 8. time */
.time { margin-block: clamp(2.5rem, 5vw, 4rem); padding-block: clamp(3rem, 6vw, 4.5rem); background: var(--green-dark); color: var(--on-dark); }
.time h2, .time strong { color: #fff; }
.time-lead { max-width: 46rem; margin-top: 1rem; font-size: 1.0625rem; }
.flow { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; padding: 0; list-style: none; }
.flow li { padding: .55rem 1rem; border-radius: 999px; background: #ffffff1a; color: #fff; font-family: var(--bold); font-weight: 700; }
.flow li:not(:last-child)::after { content: ' →'; color: var(--on-dark-muted); }
.flow li:last-child { background: var(--accent); }

/* 9. offer */
.offer { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1.2rem; margin-top: 1.8rem; }
.offer-col { padding: 1.4rem clamp(1.1rem, 3vw, 1.6rem); border-radius: 12px; }
.offer-col--now { border: 2px solid var(--green); }
.offer-col--build { border: 2px dashed var(--green-line); background: var(--cream); }
.offer-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; color: var(--muted); font-size: .875rem; }
.offer-list { margin-top: .8rem; padding: 0; list-style: none; }
.offer-list > li { padding-block: .9rem; border-bottom: 1px solid var(--line); }
.offer-list > li:last-child { border-bottom: 0; }
.offer-list strong { font-size: 1.0625rem; }
.offer-list p { margin-top: .2rem; font-size: .9375rem; line-height: 1.75; }
.offer-list .fold { margin-top: .6rem; }
.lessons { padding-left: 1.6rem; font-size: .9375rem; }

/* 10. values */
.values { margin-top: 1.8rem; padding: 0; list-style: none; counter-reset: v; }
.values li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0 1rem; padding-block: .9rem; border-bottom: 1px solid var(--line); counter-increment: v; }
.values li::before { grid-row: 1 / span 2; content: counter(v, decimal-leading-zero); color: var(--green); font-family: var(--num); font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
.values strong { font-size: 1.0625rem; }
.values p { grid-column: 2; margin-top: .1rem; }
.fit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin-top: 2rem; }
.fit-col { padding: 1.3rem 1.4rem; border-radius: 10px; background: var(--green-tint); }
.fit-col--not { background: var(--cream); border: 1px solid var(--line); }

/* 11. founder */
.founder { display: grid; grid-template-columns: 14rem minmax(0, 1fr); align-items: start; gap: 2.5rem; margin-top: 1.8rem; }
.founder-photo img { border-radius: 10px; }
.founder-photo figcaption { margin-top: .6rem; line-height: 1.6; }
.founder-photo figcaption strong, .founder-photo figcaption span { display: block; }
.founder-photo figcaption span { color: var(--muted); font-size: .875rem; }
.founder-letter { max-width: 44rem; }
.proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.proof dt { color: var(--muted); font-size: .8125rem; }
.proof dd { color: var(--ink); font-family: var(--bold); font-weight: 700; }
.proof dd .num { font-size: 2rem; line-height: 1.2; margin-right: .1rem; }

/* 12. price */
.price-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; margin-top: 1.8rem; }
.price-box { padding: 1.6rem; border: 2px solid var(--green); border-radius: 12px; }
.price-label { display: inline-block; padding: .1rem .8rem; border-radius: 999px; background: var(--green); color: #fff; font-family: var(--bold); font-size: .875rem; font-weight: 700; }
.price-main { margin-top: .6rem; color: var(--ink); font-family: var(--bold); font-weight: 700; }
.price-main .num { font-size: clamp(3rem, 2.2rem + 3vw, 4rem); line-height: 1.1; }
.price-main .yen { margin-left: .2rem; font-size: 1.5rem; }
.price-main .per { display: inline-block; margin-left: .3rem; color: var(--muted); font-size: 1rem; white-space: nowrap; }
.price-includes { padding-top: .9rem; border-top: 1px solid var(--line); font-size: .9375rem; }
.terms { padding: 1.6rem; border-radius: 12px; background: var(--cream); }
.mock-note { margin-top: .6rem; color: var(--muted); font-size: .875rem; text-align: center; }
.first-try { margin-top: 2rem; padding: 1.4rem 1.6rem; border-left: 4px solid var(--accent); background: var(--cream); }
.first-try h3 + p { margin-top: .5rem; }

/* 13. faq */
.faq { margin-top: 1.6rem; border-bottom: 1px solid var(--line); }

/* 14. closing */
.closing { padding-block: clamp(3.5rem, 7vw, 6rem); text-align: center; }
.closing p { max-width: 40rem; margin-inline: auto; margin-top: 1.2rem; text-align: left; }
.closing-name { color: var(--ink); font-family: var(--serif); font-size: 1.25rem; font-weight: 700; text-align: center !important; }
.closing-name span { font-family: Georgia, serif; letter-spacing: .1em; }
.closing .button { margin-top: 1.6rem; }
.closing-sub { color: var(--muted); text-align: center !important; }

/* footer */
.site-footer { padding-block: 1.6rem; border-top: 1px solid var(--line); font-size: .875rem; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; }

/* responsive */
@media (max-width: 64rem) {
  .cycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cycle li::after { display: none; }
  .changes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 52rem) {
  .nav-desktop { display: none; }
  .nav-mobile { display: block; }
  h2, h3 { word-break: auto-phrase; overflow-wrap: break-word; line-break: strict; text-wrap: balance; }
  .hero-grid, .split, .village-grid, .offer, .fit, .price-grid, .founder { grid-template-columns: minmax(0, 1fr); }
  .founder-photo { max-width: 12rem; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stats > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .8rem; }
  .stats dd .num { font-size: 2rem; }
  .stats p { width: 100%; }
}
@media (max-width: 30rem) {
  .cycle { grid-template-columns: minmax(0, 1fr); }
  .weeks li { grid-template-columns: minmax(0, 1fr); }
  .week { grid-row: auto; font-size: 1rem; }
  .weeks p { grid-column: 1; }
  .proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .price-cond { display: block; margin-left: 0; }
  .button, .aima-button { width: 100%; padding-inline: 1rem; }
}
@media (max-width: 22rem) {
  .brand { flex-direction: column; align-items: flex-start; gap: 0; }
}
.price-grid { align-items: start; }
@media (max-width: 30rem) {
  .hero-lead br { display: none; }
}


/* v4 illustration and village details */
.villager { display: block; height: auto; user-select: none; pointer-events: none; }
.band, .big-try__label { max-width: 100%; border: 1.5px solid #352f2a; border-radius: 6px; background: #f3e8d2; color: #352f2a; transform: rotate(-.6deg); }
.band--dark { border-color: #c9d2c1; background: #ffffff14; color: #f3eedf; }
.sheet > .section + .section { position: relative; border-top: 0; }
.path-divider { position: absolute; top: -6px; left: 0; display: block; width: 100%; height: 12px; pointer-events: none; }
.hero-panorama { margin-top: 2rem; }
.hero-panorama__window { overflow: hidden; }
.hero-panorama__image { mix-blend-mode: multiply; }
.hero-panorama figcaption { margin-top: .5rem; color: var(--muted); font-size: .8125rem; text-align: right; }
.log-card { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.75rem - 1px), #ece6d6 calc(1.75rem - 1px), #ece6d6 1.75rem); }
.problem-villager { width: 120px; margin-bottom: 0; }
.cycle { --spot-size: 88px; }
.cycle .villager { width: var(--spot-size); height: var(--spot-size); margin-bottom: .65rem; object-fit: contain; object-position: bottom; transform: translateY(var(--foot-shift, 0%)); }
.cycle li:not(:last-child)::after { top: calc(var(--spot-size) + 1.8rem); }
.log-intro { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: end; gap: 1rem; }
.band + .log-intro { margin-top: 1.1rem; }
.log-villager { width: 150px; }
.failure { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 1.4rem; }
.failure-villager { width: 140px; }
.village-art__paper { padding: 12px; border-radius: 12px; background: #faf8f5; transform: rotate(.6deg); }
.village-art__paper img { border-radius: 0; }
.weeks { padding-left: 1.3rem; border-left: 2px dashed #a9bb98; }
.weeks li { position: relative; }
.weeks li::before { position: absolute; top: 1.55rem; left: -1.63rem; width: 5px; height: 5px; border-radius: 50%; background: #a9bb98; box-shadow: 6px 6px 0 #a9bb98; content: ''; }
.tries { padding: 1rem; border-radius: 12px; background: #e9dcc2; gap: 1.15rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); }
.tries li { position: relative; padding-top: 1.35rem; border-top: 1px solid var(--line); background: #fffdf8; }
.tries li::before { position: absolute; top: -5px; left: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: #9c5528; content: ''; }
.tries li:nth-child(4n + 1) { transform: rotate(-.8deg); }
.tries li:nth-child(4n + 2) { transform: rotate(.5deg); }
.tries li:nth-child(4n + 3) { transform: rotate(-.3deg); }
.tries li:nth-child(4n) { transform: rotate(.7deg); }
.offer-building { margin-top: 1rem; }
.founder-aside { margin-top: 1.2rem; padding-left: .9rem; border-left: 2px dotted #b99862; color: var(--text); }
.closing-journey { position: relative; display: flex; align-items: end; justify-content: space-between; width: min(100%, 44rem); margin: 0 auto 1.2rem; }
.closing-journey .villager { position: relative; z-index: 1; width: 140px; }
.closing-path { position: absolute; top: 60%; left: 20%; width: 60%; height: 12px; pointer-events: none; }
@media (max-width: 52rem) {
  .hero-panorama__window { aspect-ratio: 4 / 3; }
  .hero-panorama__image { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 50%; transform: scale(1.2624); }
  .problem-villager { width: 120px; }
  .cycle { --spot-size: 72px; }
  .log-intro { display: block; }
  .log-villager { display: none; }
  .failure { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
  .failure-villager { width: 110px; }
  .village-art__paper { transform: none; }
  .closing-journey .villager { width: 96px; }
}
@media (max-width: 30rem) {
  .tries { grid-template-columns: minmax(0, 1fr); }
  .tries li:nth-child(n) { transform: none; }
}


/* v5: cycle cards — villager beside the label */
.cycle { --spot-size: 76px; }
.cycle-head { display: flex; align-items: flex-end; gap: .55rem; }
.cycle .villager { flex: 0 0 var(--spot-size); width: var(--spot-size); height: var(--spot-size); margin: 0; transform: none; }
.cycle-name { min-width: 0; padding-bottom: .1rem; }
.cycle li:not(:last-child)::after { top: 2.2rem; }
.cycle p { margin-top: .6rem; }

/* v5: life section */
.life-areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1.6rem; padding: 0; list-style: none; }
.life-areas li { padding: 1.2rem 1.3rem; border: 1px solid #ffffff33; border-radius: 10px; background: #ffffff10; }
.life-areas strong { display: block; color: #fff; font-size: 1.125rem; }
.life-areas p { margin-top: .4rem; color: var(--on-dark); font-size: .9375rem; line-height: 1.8; }
.life-note { max-width: 46rem; margin-top: 1.4rem; color: var(--on-dark-muted); font-size: .875rem; }
@media (max-width: 52rem) {
  .life-areas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 30rem) {
  .cycle { --spot-size: 68px; }
}


/* v6: specified layout and new components */
.nav-desktop a { white-space: nowrap; }
@media (max-width: 64rem) {
  .nav-desktop { display: none; }
  .nav-mobile { display: block; }
}
.log-intro { position: relative; }
.log-villager { position: absolute; right: 0; bottom: 0; }
.changes li { background: transparent; }
.stats dt { color: var(--muted); }
.stats dd { color: var(--ink); }
.stats p { color: var(--text); }
.problem-context { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: start; gap: 1rem; }
.problem-copy > p:first-child { margin-top: 0; }
#first-month { margin-top: 2.5rem; }
.subband { display: inline-block; margin: 0 0 .8rem; padding: .25rem .65rem; border: 1px solid var(--line); border-radius: 6px; background: var(--cream); color: var(--ink); font-size: .8125rem; font-weight: 700; }
.try-examples { margin-top: 2.5rem; }
.life-areas .life-use { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed #ffffff40; color: var(--on-dark-muted); font-size: .875rem; }
.big-try { margin-top: 2.2rem; padding: 1.6rem clamp(1.1rem, 3vw, 2rem); border: 2px solid var(--green); border-radius: 12px; background: var(--white); }
.big-try__label { margin: 0 0 .8rem; }
.big-try__facts { margin: 1.2rem 0 0; }
.big-try__facts > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .9rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.big-try__facts dt { color: var(--green-dark); font-size: .875rem; font-weight: 700; }
.big-try__facts dd { margin: 0; }
.big-try__bridge { margin-top: 1.2rem; }
.big-try__note { margin-top: 1rem; color: var(--muted); font-size: .875rem; }
.big-number .num { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3rem); }
.founding-box { padding: 1.6rem; border: 2px solid #ffffff66; }
.founding-box h3 { font-size: 1.25rem; }
.village-values { margin-top: 2rem; }
.village-values h3, .village-values strong { color: #fff; }
.village-values ol { margin: 1rem 0 0; padding: 0; list-style: none; counter-reset: village-value; }
.village-values li { position: relative; padding: .9rem 0 .9rem 2rem; border-top: 1px solid #ffffff33; counter-increment: village-value; }
.village-values li::before { position: absolute; left: 0; top: .95rem; color: var(--on-dark-muted); font-family: Arial, sans-serif; font-size: .875rem; content: counter(village-value, decimal-leading-zero); }
.village-values li > strong, .village-values li > span { display: block; }
.village-values li > span { margin-top: .3rem; color: var(--on-dark); font-size: .9375rem; }
@supports not (word-break: auto-phrase) {
  @media (max-width: 52rem) {
    h2, h3 { word-break: keep-all; overflow-wrap: anywhere; }
  }
}
@media (max-width: 52rem) {
  .big-try__facts > div { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
}
@media (max-width: 30rem) {
  .problem-context { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .problem-villager { width: 100px; }
}


/* Claude Code review: reading groups, emphasis and village layout. */
.button, .aima-button { word-break: auto-phrase; text-wrap: balance; }
.band, .big-try__label, .founding, .changes span, .proof dt { word-break: auto-phrase; text-wrap: balance; }
.changes strong { white-space: nowrap; }
.offer { align-items: start; }
.log-context { padding: 1rem 1.2rem; border-left: 3px solid var(--green); background: var(--green-tint); color: var(--text); font-size: 1rem; line-height: 1.85; }
.subband { border: 1.5px solid #352f2a; background: #f3e8d2; color: #352f2a; transform: rotate(-.6deg); }
.big-try__bridge { padding: 1rem 1.2rem; border-left: 3px solid var(--green); background: var(--green-tint); }
.village-details { margin-top: 2rem; }
.village-details .founding-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 1rem 2rem; }
.village-details .founding-box p { margin: 0; }
.village-values ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 52rem) {
  .village-details .founding-box, .village-values ol { grid-template-columns: minmax(0, 1fr); }
  .village-values ol { gap: 0; }
}
@media (max-width: 30rem) {
  .changes { grid-template-columns: minmax(0, 1fr); }
  .changes li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1rem; padding: .8rem 1rem; }
  .changes strong { margin-top: 0; }
  .pullquote br { display: none; }
  .proof > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 22rem) {
  .sheet > .section { padding-inline: 1rem; }
  .cycle-knowledge { letter-spacing: 0; }
  #founder-title .nowrap:last-child { letter-spacing: 0; }
}


/* Production LP only: Checkout, legal links and WordPress administrator toolbar. */
.lp-checkout { margin-top: 2rem; padding: 1.6rem; border: 2px solid var(--green); border-radius: 12px; }
.lp-checkout > h3 { word-break: auto-phrase; }
.aima-checkout-form { margin-top: 1.2rem; }
.aima-consent { display: flex; align-items: flex-start; gap: .8rem; }
.aima-consent input { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; margin: .35rem 0 0; accent-color: var(--green); }
.aima-consent span { min-width: 0; word-break: auto-phrase; line-break: strict; text-wrap: pretty; }
.aima-checkout-form button { margin-top: 1.2rem; border: 0; cursor: pointer; }
.aima-checkout-form__note { margin-top: .8rem; color: var(--muted); font-size: .875rem; }
.aima-application-status { margin-top: 1rem; padding: .8rem 1rem; border-left: 3px solid var(--accent); background: var(--amber-tint); }
.lp-own-data { color: var(--text); }
.aima-form-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lp-footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.nav-desktop { gap: .85rem; }
.admin-bar .site-header { top: 32px; }
.admin-bar [id] { scroll-margin-top: 2rem; }
@media (max-width: 72rem) { .nav-desktop { display: none; } .nav-mobile { display: block; } }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }
@media (max-width: 30rem) { .lp-checkout { padding: 1rem; } }