/* Landing-page sections and CSS-only illustration; no external images, fonts, or tracking. */
.hero { display: grid; grid-template-columns: 1.12fr 1fr; gap: 50px; padding-block: 78px 84px; align-items: center; }
h1 { font-size: clamp(42px, 4.7vw, 62px); line-height: 1.3; font-weight: 650; }
h1 span { color: #64816b; }
.hero-description { color: var(--muted); font-size: 17px; margin-top: 28px; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; margin-top: 36px; }
.hero-note { font-size: 12px; color: var(--muted); margin-top: 25px; }
.hero-art { min-height: 475px; position: relative; background: #e6ecdf; border-radius: 180px 180px 20px 20px; display: flex; align-items: center; justify-content: center; isolation: isolate; overflow: hidden; }
.art-orbit { position: absolute; border: 1px solid #cbd6c0; border-radius: 50%; width: 360px; height: 360px; z-index: -1; }
.orbit-one { transform: rotate(-28deg) scaleX(1.15) scaleY(.8); }
.orbit-two { transform: rotate(30deg) scaleX(.9) scaleY(1.18); }
.little-star { position: absolute; right: 38px; top: 43px; color: #bd704d; font-size: 50px; }
.record-paper { width: 274px; background: #fffefa; padding: 28px 27px 20px; border-radius: 7px; transform: rotate(-6deg) translate(-9px,-25px); box-shadow: 0 16px 36px #304b2c13; }
.paper-top { display: flex; justify-content: space-between; align-items: center; font-size: 20px; font-weight: 650; }
.paper-sun { color: #b67c3c; font-size: 27px; }
.paper-date { font-size: 12px; color: #75816f; }
.voice-line { height: 64px; display: flex; gap: 4px; align-items: center; margin-top: 12px; }
.voice-line i { width: 5px; height: 10px; border-radius: 8px; background: #94a68c; }
.voice-line i:nth-child(3n) { height: 36px; }.voice-line i:nth-child(4n) { height: 24px; }.voice-line i:nth-child(5n) { height: 48px; }
.paper-quote { font-size: 23px; font-weight: 550; line-height: 1.6; letter-spacing: -.04em; }
.paper-divider { border-top: 1px dashed #d5dacc; margin-top: 25px; }
.paper-confirm { font-size: 11px; margin-top: 14px; color: #617561; }.paper-confirm span { margin-right: 8px; }
.family-note { position: absolute; bottom: 82px; right: 14px; display: flex; align-items: center; gap: 13px; background: #fff6e7; border: 1px solid #ecdfc5; padding: 18px 25px 18px 17px; border-radius: 12px; transform: rotate(4deg); box-shadow: 0 10px 25px #304b2c0d; }
.note-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #a55c41; background: #efd5bd; font-size: 25px; }.family-note small { color: #796d55; font-size: 10px; }.family-note p { font-size: 17px; font-weight: 600; }
.hero-art figcaption { position: absolute; bottom: 17px; text-align: center; width: 90%; color: #596952; font-size: 10px; line-height: 1.7; }
.principles-strip { border-block: 1px solid var(--line); }.principles-strip > div { display: flex; justify-content: space-around; padding-block: 24px; }.principles-strip p { font-size: 14px; }.principles-strip span { font-size: 10px; color: #8a705b; margin-right: 18px; }
#how .section-heading { display: grid; grid-template-columns: 1fr 1fr; column-gap: 70px; }#how .section-heading .eyebrow { grid-column: 1/-1; }#how .section-heading > p:last-child { margin-top: 8px; align-self: center; }
.steps { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; margin: 54px 0 0; }.step-number { font-size: 11px; font-weight: 600; color: #69785f; }.steps h3 { font-size: 21px; margin: 23px 0 12px; }.steps p { color: var(--muted); font-size: 15px; line-height: 1.9; }
.step-art { height: 166px; margin-top: 18px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; }.note-art { background: #edf0e5; flex-direction: column; gap: 9px; }.note-art span { width: 77%; border-bottom: 1px solid #d3dac8; padding-bottom: 5px; }.note-art .writing-line { width: 32%; align-self: flex-start; margin-left: 11.5%; }.review-art { background: #f5ebdf; gap: 10px; flex-wrap: wrap; align-content: center; }.review-art .review-tag { background: #e7dac8; color: #6a5e4b; padding: 3px 13px; border-radius: 5px; font-size: 11px; }.review-art b { display: grid; place-items: center; flex-basis: 100%; font-size: 30px; margin-top: 10px; font-weight: 400; color: #936e44; }.share-art { background: #e9eded; gap: 14px; }.share-art span { width: 55px; height: 55px; background: #fffefa; border-radius: 50%; display: grid; place-items: center; }.share-art i { font-style: normal; color: #678578; }
.sharing-section { background: #eaf0e7; padding-block: 95px; }.sharing-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 85px; align-items: center; }.sharing-copy > p:not(.eyebrow) { margin-top: 28px; color: #566b58; }.sharing-copy .small-copy { margin-top: 16px; }.demo-instruction { display: flex; gap: 16px; margin-top: 35px; align-items: center; }.demo-instruction > span { font-size: 35px; color: #7d926e; }.demo-instruction p { font-size: 13px; }
.demo { background: #fffefa; border: 1px solid #d5decf; border-radius: 14px; padding: 29px; box-shadow: 0 20px 55px #304b2c08; }.demo-heading { display: flex; justify-content: space-between; align-items: center; }.demo-label { font-size: 12px; color: #69785f; }.demo-controls { display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 8px; background: #f0f2eb; gap: 5px; margin-top: 20px; }.demo-controls button { min-height: 44px; border: 0; border-radius: 5px; background: transparent; font-size: 14px; color: #60725e; }.demo-controls button[aria-pressed="true"] { background: white; color: #234e3b; box-shadow: 0 2px 7px #1a37130d; font-weight: 650; }
.share-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; margin: 24px 0; cursor: pointer; font-size: 14px; }.control-hint { display: block; font-size: 10px; color: #778071; }.share-control input { position: absolute; opacity: 0; width: 46px; height: 30px; right: 0; margin: 0; }.switch-track { flex-shrink: 0; width: 46px; height: 28px; background: #a0a89c; border-radius: 20px; pointer-events: none; padding: 4px; }.switch-track::after { content: ""; display: block; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform .16s; }.share-control input:checked + .switch-track { background: var(--green); }.share-control input:checked + .switch-track::after { transform: translateX(18px); }.share-control input:focus-visible + .switch-track { outline: 3px solid #ac4d2d; outline-offset: 5px; }
.demo-content { min-height: 306px; }.demo-summary { font-size: 14px; margin-bottom: 15px; }.demo-summary strong { float: right; }.demo-record { border: 1px solid #e1e6dc; border-radius: 8px; padding: 17px; margin-top: 12px; }.demo-record > div { display: flex; justify-content: space-between; align-items: center; }.category { background: #edf1e6; color: #4e674c; padding: 1px 8px; border-radius: 4px; font-size: 10px; }.record-time { font-size: 10px; color: #75816f; }.demo-record h3 { font-size: 15px; margin-top: 12px; letter-spacing: -.025em; font-weight: 550; }.demo-record p { font-size: 10px; margin-top: 10px; color: #527152; }.private-record { background: #f8f8f3; }.private-record p { color: #798071; }.demo-footnote { font-size: 10px; color: #697660; margin-top: 20px; text-align: center; }.demo-empty { text-align: center; padding: 30px 10px; color: #60725e; }.demo-empty > span { font-size: 35px; }.demo-empty h3 { font-size: 17px; margin: 14px 0 9px; }.demo-empty p { font-size: 13px; }
.promise-section { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; }.promise-list article { display: flex; gap: 25px; padding-block: 27px; border-bottom: 1px solid var(--line); }.promise-list article:first-child { padding-top: 0; }.promise-list article > span { font-size: 11px; color: #99755b; margin-top: 7px; }.promise-list p { color: var(--muted); font-size: 15px; margin-top: 10px; }.promise-list h3 { font-size: 21px; }
.testing { display: grid; grid-template-columns: 1.2fr 1fr; gap: 55px; background: var(--green); border-radius: 12px; color: #fbfbef; padding: 60px; }.testing .eyebrow { color: #b6cbb2; }.testing h2 { font-size: 36px; }.testing p { color: #d9e2d3; font-size: 14px; line-height: 1.9; margin-top: 20px; }.testing-status { border-left: 1px solid #527465; padding-left: 50px; align-self: center; }.status-pill { font-size: 10px; border: 1px solid #799181; border-radius: 30px; padding: 5px 12px; }.testing-status h3 { font-size: 25px; margin-top: 20px; }.testing-status p { font-size: 13px; margin-top: 10px; }.status-rule { border-top: 1px solid #527465; margin: 22px 0 15px; }
.faq { display: grid; grid-template-columns: .8fr 1.4fr; gap: 80px; }.faq details { border-bottom: 1px solid var(--line); }.faq summary { font-size: 17px; cursor: pointer; padding: 24px 30px 24px 0; position: relative; list-style: none; }.faq summary::-webkit-details-marker { display: none; }.faq summary::after { content: "+"; position: absolute; right: 5px; color: #6b7d62; }.faq details[open] summary::after { content: "−"; }.faq details p { color: var(--muted); font-size: 15px; padding: 0 25px 24px 0; }
@media (max-width: 1050px) { .hero { gap: 30px; } .hero-art { min-height: 450px; } .art-orbit { width: 290px; height: 330px; }.record-paper { width: 245px; }.family-note { right: 5px; padding: 13px; }.sharing-layout { gap: 45px; }.steps { gap: 25px; }.steps h3 { font-size: 19px; } }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; padding-top: 50px; gap: 45px; }.hero-copy { max-width: 560px; }.hero-art { min-height: 440px; width: min(100%,460px); justify-self: center; }.record-paper { width: 270px; }.family-note { right: 15px; }.hero-description { font-size: 16px; }#how .section-heading { display: block; }#how .section-heading > p:last-child { margin-top: 22px; }.steps { grid-template-columns: 1fr; gap: 40px; }.step-art { height: 150px; }.steps h3 { font-size: 23px; }.sharing-layout, .promise-section, .testing, .faq { grid-template-columns: 1fr; gap: 40px; }.sharing-copy h2 br:nth-child(2) { display: none; }.sharing-section { padding-block: 65px; }.demo-instruction { margin-top: 20px; }.testing { padding: 35px 28px; }.testing-status { border-left: none; padding-left: 0; border-top: 1px solid #527465; padding-top: 32px; }.principles-strip > div { flex-direction: column; gap: 10px; padding-block: 20px; }.principles-strip p { font-size: 13px; }.promise-list article:first-child { padding-top: 0; } }
@media (max-width: 380px) { h1 { font-size: 38px; }.hero-art { min-height: 420px; }.record-paper { width: 235px; }.art-orbit { width: 245px; height: 300px; }.family-note { right: 4px; }.family-note p { font-size: 15px; }.little-star { right: 17px; }.demo { padding: 20px; }.demo-controls button { font-size: 13px; }.demo-record h3 { font-size: 14px; }.desktop-break { display: none; } }