:root {
  --ink: #1b1830;
  --muted: #5d5b70;
  --blue: #6633ff;
  --blue-soft: #eeeaff;
  --tint: #f2effa;
  --coral: #d97b69;
  --line: rgba(27, 24, 48, .13);
  --shell: 1280px;
  --pad: 32px;
  --section-pad: 72px;
  --radius: 18px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #fff; font: 500 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: transparent; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, ol { margin: 0; }
ol { padding: 0; list-style: none; }
em { color: var(--blue); font-style: normal; font-weight: 700; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 8px 14px; border-radius: 8px; color: #fff; background: var(--ink); transform: translateY(-140%); transition: transform .2s; }
.skip-link:focus { transform: none; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.shell { width: min(100%, var(--shell)); padding-inline: var(--pad); margin-inline: auto; }

/* navigation */
.nav { position: sticky; z-index: 20; top: 0; height: 67px; padding-top: 8px; border-bottom: 1px solid rgba(27,24,48,.07); background: rgba(242,239,250,.92); backdrop-filter: blur(16px); }
.nav-inner { height: 59px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-ring { display: grid; place-items: center; width: 46px; height: 46px; padding: 5px; border: 2px solid rgba(27,24,48,.12); border-radius: 50%; background: #fff; }
.logo-ring img { width: 100%; height: 100%; object-fit: contain; }
.logo-stack { display: grid; gap: 0; line-height: 1.1; }
.logo-word { font-size: 23px; font-weight: 600; letter-spacing: -.035em; }
.logo-tagline { color: #8e8a9e; font-size: 9px; letter-spacing: .13em; }
.nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; margin-right: auto; color: var(--muted); font-size: 14px; }
.nav-links a, .mobile-menu a { display: inline-flex; align-items: baseline; gap: 7px; }
.nav-links small, .mobile-menu small { color: #9b97aa; font-size: 10px; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.store-links { display: flex; align-items: center; gap: 12px; }
.store-links--small { gap: 8px; }
.store-badge { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 5px 12px 6px 9px; border: 1px solid #65606a; border-radius: 7px; background: #050507; color: #fff; text-align: left; line-height: 1; transition: transform .2s var(--ease), box-shadow .2s; }
.store-badge:hover { box-shadow: 0 5px 0 rgba(27,24,48,.18); transform: translateY(-2px); }
.store-badge svg { flex: none; width: 29px; height: 30px; fill: currentColor; }
.store-badge span { display: grid; gap: 3px; }
.store-badge small { font-size: 9px; white-space: nowrap; }
.store-badge strong { font-size: 21px; font-weight: 500; letter-spacing: -.6px; white-space: nowrap; }
.store-links--small .store-badge { height: 30px; min-width: 0; padding: 3px 7px 4px 6px; border-radius: 4px; gap: 4px; }
.store-links--small .store-badge svg { width: 18px; height: 18px; }
.store-links--small .store-badge small { font-size: 5.5px; }
.store-links--small .store-badge strong { font-size: 13px; }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 10px; }
.menu-toggle span { display: block; height: 2px; margin: 5px 0; border-radius: 9px; background: var(--ink); }
.mobile-menu { display: none; }

/* shared section primitives */
.section-head { position: relative; z-index: 1; max-width: 704px; }
.section-head.centered { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: 46px; line-height: 1.12; font-weight: 600; letter-spacing: -.035em; }
.section-head p { margin-top: 18px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.reveal { opacity: 1; transform: none; }
.phone { position: relative; overflow: hidden; border: 8px solid #252335; border-radius: 38px; background: #fff; box-shadow: 0 20px 40px rgba(27,24,48,.2), 0 5px 12px rgba(27,24,48,.15); aspect-ratio: 390 / 810; }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone::before { content: ""; position: absolute; top: 10px; left: 50%; width: 34%; height: 23px; transform: translateX(-50%); border-radius: 30px; background: #14131b; z-index: 2; }

/* hero */
.hero { position: relative; min-height: max(740px, calc(100svh - 66px)); overflow: hidden; background: #fff; }
.hero-aurora { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 12% 20%, rgba(82,238,192,.7), transparent 32%), radial-gradient(ellipse at 57% 8%, rgba(174,97,255,.65), transparent 34%), radial-gradient(ellipse at 92% 38%, rgba(40,202,224,.5), transparent 35%), linear-gradient(115deg, #d6fff1 0%, #b5dfff 30%, #6b79db 58%, #233272 100%); }
.hero-aurora::before, .hero-aurora::after { content: ""; position: absolute; inset: 0; }
.hero-aurora::before { opacity: .6; background: repeating-linear-gradient(90deg, transparent 0 8%, rgba(255,255,255,.13) 9% 11%, transparent 13% 20%); filter: blur(30px); }
.hero-aurora::after { top: 52%; background: linear-gradient(180deg, transparent, #fff 82%); }
.hero-aurora i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px #fff; opacity: .8; }
.hero-aurora i:nth-child(1) { top: 13%; left: 45%; }
.hero-aurora i:nth-child(2) { top: 29%; right: 13%; width: 4px; height: 4px; }
.hero-aurora i:nth-child(3) { top: 9%; right: 29%; width: 5px; height: 5px; }
.hero-stars { position: absolute; top: 8%; right: 10%; color: #fff; font-size: 28px; opacity: .85; }
.hero-grid { position: relative; z-index: 1; min-height: max(740px, calc(100svh - 66px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; padding-block: 48px; }
.hero-copy { align-self: center; }
.eyebrow-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border: 1px solid rgba(27,24,48,.1); border-radius: 999px; background: rgba(255,255,255,.92); color: var(--muted); font-size: 13px; box-shadow: 0 2px 5px rgba(27,24,48,.08); }
.eyebrow-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(217,123,105,.13); }
.hero h1 { max-width: 560px; margin-top: 30px; font-size: 66px; line-height: 1.15; font-weight: 600; letter-spacing: -.035em; }
.hero h1 em { color: var(--blue); text-decoration: underline; text-decoration-color: rgba(102,51,255,.35); text-decoration-thickness: 4px; text-underline-offset: 12px; }
.hero-ending { font-size: .94em; }
.hero-cta-row { display: flex; align-items: center; gap: 20px; margin-top: 34px; }
.learn-more { display: none; color: var(--muted); font-size: 14px; }
.learn-more span { display: inline-block; margin-left: 6px; color: var(--blue); transition: transform .2s; }
.learn-more:hover span { transform: translateY(4px); }
.hero-note { margin-top: 28px; color: var(--ink); font-size: 24px; line-height: 1.6; letter-spacing: -.035em; word-break: keep-all; }
.hero-note strong { font-weight: 700; color: var(--blue); text-decoration: underline; text-decoration-color: rgba(102,51,255,.35); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.hero-visual-stack { position: relative; min-height: 700px; }
.hero-spotlight { position: absolute; display: block; }
.hero-spotlight--brand { right: 270px; bottom: 90px; z-index: 2; }
.hero-spotlight--phone { top: 92px; right: 0; z-index: 3; }
.spotlight-head { display: none; }
.brand-stage { position: relative; width: 330px; height: 360px; }
.brand-halo { position: absolute; inset: 35px 0 0; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.7), transparent 65%); }
.brand-object { position: absolute; inset: 29px 20px 28px; display: grid; place-items: center; border: 2px solid rgba(27,24,48,.08); border-radius: 28px; background: #fff; box-shadow: 0 22px 40px rgba(27,24,48,.2); transform: rotate(-9deg); }
.brand-object img { width: 86%; height: 86%; object-fit: contain; }
.floating-note { position: absolute; z-index: 2; padding: 8px 13px; border: 1px solid rgba(27,24,48,.1); border-radius: 999px; background: #fff; color: var(--muted); font-size: 11px; white-space: nowrap; box-shadow: 0 6px 12px rgba(27,24,48,.12); }
.floating-note b { color: var(--blue); margin-right: 4px; }
.note-one { top: -70px; left: -20px; transform: rotate(-3deg); }
.note-two { right: 28px; top: -5px; bottom: auto; transform: rotate(3deg); }
.hero-phone { width: 282px; height: 580px; border-radius: 55px; border-width: 6px; transform: rotate(4deg); }
.hero-phone::before { top: 12px; width: 42%; height: 31px; }

/* relatable */
.relatable-section { min-height: 1148px; padding-block: var(--section-pad); background: var(--tint); }
.polaroid-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; padding: 20px 12px 12px; margin: 44px auto 0; }
.polaroid { position: relative; width: 100%; max-width: 320px; justify-self: center; padding: 14px 14px 76px; background: #fffefa; box-shadow: 0 10px 28px rgba(27,24,48,.1), 0 2px 8px rgba(27,24,48,.05); transform: rotate(-1.5deg); transition: transform .3s var(--ease); }
.polaroid:nth-child(2n) { transform: rotate(1.8deg); }
.polaroid:nth-child(3n) { transform: rotate(-.5deg); }
.scene { width: 100%; aspect-ratio: 1; background-image: url('/assets/care-stories.png'); background-size: 300% 200%; background-repeat: no-repeat; }
.scene-0 { background-position: 0 0; }
.scene-1 { background-position: 50% 0; }
.scene-2 { background-position: 100% 0; }
.scene-3 { background-position: 0 100%; }
.scene-4 { background-position: 50% 100%; }
.scene-5 { background-position: 100% 100%; }
.polaroid figcaption { position: absolute; bottom: 26px; left: 14px; right: 14px; font-size: 16px; line-height: 1.4; letter-spacing: -.03em; word-break: keep-all; }
.polaroid-tag { position: absolute; bottom: 8px; right: 14px; color: #b66051; font-size: 9px; letter-spacing: .03em; }

/* rhythm chart */
.gap-section { min-height: 831px; padding-block: var(--section-pad); background: #fff; }
.rhythm-card { max-width: 1080px; margin: 24px auto 0; padding: 24px; border: 1px solid rgba(27,24,48,.1); border-radius: 22px; background: #fff; box-shadow: 0 12px 25px rgba(27,24,48,.08); }
.rhythm-tabs { display: flex; justify-content: center; gap: 4px; padding: 4px; border-radius: 999px; background: #f5f4f8; }
.rhythm-tabs button { flex: 1; padding: 8px 12px; color: var(--muted); font-size: 12px; border-radius: 999px; white-space: nowrap; }
.rhythm-tabs button[aria-selected="true"] { color: #fff; background: var(--ink); box-shadow: 0 3px 8px #24173518; }
.rhythm-chart { position: relative; padding: 27px 42px 0; }
.rhythm-chart svg { width: 100%; height: 280px; }
.chart-axis { position: absolute; top: 24px; left: 13px; color: var(--muted); font-size: 12px; }
.chart-grid { fill: none; stroke: rgba(27,24,48,.1); stroke-width: 1; }
.chart-guide { fill: none; stroke: #d4c9ea; stroke-width: 2; }
.chart-history { fill: none; stroke: var(--coral); stroke-width: 2.6; transition: d .4s; }
.chart-area { fill: url(#chart-fill); }
.chart-future { fill: none; stroke: var(--blue); stroke-width: 4; }
.chart-marker { stroke: var(--blue); stroke-width: 1; stroke-dasharray: 5 5; }
.rhythm-chart text { fill: var(--coral); font-size: 13px; }
.chart-x { display: flex; justify-content: space-between; margin: -15px 22px 0 52px; color: var(--muted); font-size: 12px; }
.chart-legend { display: flex; justify-content: center; gap: 26px; margin-top: 16px; color: var(--muted); font-size: 12px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; background: var(--coral); vertical-align: -1px; }
.chart-legend span:nth-child(2) i { background: #bbc0d1; }
.chart-legend span:nth-child(3) i { background: var(--blue); }
.chart-caption { text-align: center; margin-top: 14px; color: var(--muted); font-size: 11px; }
.chart-caption small { display: block; margin-top: 3px; }
.chart-caption small { color: #9692a2; font-size: 11px; }

/* categories */
.categories-section { min-height: 931px; padding-block: var(--section-pad); background: var(--tint); }
.feature-stage { display: grid; grid-template-columns: 1fr 440px; gap: 32px; align-items: center; margin-top: 28px; }
.feature-tiles { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; padding: 24px; min-height: 520px; background: #ffffff6b; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 10px 24px #2417350c; }
.feature-tile { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 18px; min-width: 0; padding: 24px 8px 18px; border: 1px solid rgba(27,24,48,.1); border-radius: 16px; background: rgba(255,255,255,.8); color: var(--muted); font-size: 12px; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.feature-tile:hover, .feature-tile[aria-pressed="true"] { border-color: var(--blue); color: var(--blue); box-shadow: 0 8px 16px rgba(102,51,255,.13); transform: translateY(-4px); }
.feature-icon { display: grid; place-items: center; width: 72px; height: 86px; margin-top: 16px; border-radius: 28px; background: var(--blue-soft); box-shadow: inset 0 0 0 2px #ffffff85, 0 6px 8px #2919470d; transform: rotate(-6deg); }
.feature-icon svg, .feature-mobile-board svg { width: 43px; height: 43px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.feature-panel { position: relative; min-height: 520px; display: grid; place-items: center; }
.handwritten { position: absolute; top: -45px; left: 9px; color: var(--coral); font: 600 20px/1.2 "Segoe Print", cursive; transform: rotate(-5deg); }
.feature-polaroid { width: 365px; max-width: 365px; transform: rotate(3deg); }
.feature-panel > .handwritten { top: -4px; left: auto; right: 28px; font-size: 16px; }
.feature-polaroid .scene { aspect-ratio: 1; }
.feature-mobile-board { display: none; }

/* future */
.future-section { min-height:691px; padding-block:var(--section-pad); background:#fff; }
.future-section .section-head { max-width:640px; }
.future-stairs { display:grid; grid-template-columns:repeat(6,1fr); align-items:end; gap:6px; max-width:1080px; padding:0 18px 12px 0; margin:112px auto 0; }
.future-stairs li { position:relative; height:120px; margin:8px 8px 0 0; padding:26px 16px 15px; background:linear-gradient(#fdfcff,#ece7f5); border:1px solid #dad2e8; border-radius:0 0 0 10px; box-shadow:0 14px 24px #271a351a; }
.future-stairs li:nth-child(2){height:155px}.future-stairs li:nth-child(3){height:190px}.future-stairs li:nth-child(4){height:225px}.future-stairs li:nth-child(5){height:260px}.future-stairs li:nth-child(6){height:295px;background:linear-gradient(#db907e,#c57563);color:#fff}
.future-stairs li::after{content:"";position:absolute;right:-8px;top:0;bottom:0;width:8px;transform:skewY(-45deg);transform-origin:0 0;background:#c9c0d9}
.future-stairs li::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px;background:#faf7ff;transform:skewX(-45deg);transform-origin:bottom left;border:1px solid #dad2e8}
.future-stairs li:last-child::after{background:#a95d4b}.future-stairs li:last-child::before{background:#e7ad9f}
.step-icon{position:absolute;top:-68px;left:50%;width:56px;height:56px;transform:translateX(-50%);fill:#f0eaff;stroke:var(--blue);stroke-width:1.6;filter:drop-shadow(0 4px 2px #422a7017)}
.future-stairs li:last-child .step-icon{stroke:var(--coral);fill:#fff1ed}.step-label{display:block;font-size:11px;color:#8d849b;margin-bottom:10px}.future-stairs strong{font-size:16px;line-height:1.55;font-weight:500}.future-stairs li:last-child .step-label{color:#fff9}
.mobile-br{display:none}
@media(hover:hover){.polaroid:hover{transform:rotate(0) translateY(-8px);z-index:5}.how-step:hover>.phone{transform:translateY(-5px)}.phone{transition:transform .3s}}
/* how it works */
.hqw-section { min-height: 3464px; padding-block: var(--section-pad); background: var(--tint); }
.how-steps { position: relative; margin: 52px auto 0; }
.how-steps::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(27,24,48,.17); }
.how-step { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 116px minmax(0,1fr); align-items: center; min-height: 750px; padding-block: 60px; }
.how-visual { grid-area: 1 / 1; width: 100%; min-width: 0; min-height: 630px; display: flex; align-items: center; justify-content: center; }
.how-visual > .phone { width: 302px; }
.how-visual .phone img { object-fit: contain; background: #f4f2ee; }
.how-visual > .phone--timeline { width: 264px; aspect-ratio: 390 / 930; }
.how-step--flip > .how-visual { grid-area: 1 / 3; }
.how-step--flip .how-copy { grid-area: 1 / 1; text-align: right; padding: 0 28px 0 0; justify-self: end; }
.how-copy { grid-area: 1 / 3; padding-left: 28px; max-width: 480px; min-width: 0; }
.how-copy h3, .how-copy p { word-break: keep-all; }
.how-number { grid-area: 1 / 2; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #b8a0f4; border-radius: 50%; background: #fff; color: var(--blue); font-size: 20px; justify-self: center; box-shadow: 0 0 0 6px #6633ff08; }
.how-step--flip .how-number { color: var(--coral); border-color: #eab2a6; }
.how-copy h3 { font-size: 32px; line-height: 1.25; letter-spacing: -.04em; }
.how-copy p { margin-top: 17px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.how-copy .handwritten { position: static; display: block; margin-bottom: 14px; }
.phone--device { background: #fff; }
.device-screen-top { display: flex; align-items: center; gap: 6px; height: 48px; padding: 8px; border-bottom: 1px solid var(--line); font-size: 10px; }
.device-screen-top img { width: 24px; height: 24px; }.device-screen-top small { display: block; color: #8e8a9e; font-size: 6px; }
.phone--device > img { width: 100%; height: auto; object-fit: contain; }.device-screen-bottom { padding: 15px; font-size: 14px; }.device-screen-bottom svg { width: 20px; height: 20px; fill: none; stroke: var(--blue); stroke-width: 1.6; }
.how-mobile { display: none; }
.has-js .how-mobile { display: none; }

/* comparison */
.checklist-section { min-height: 991px; padding-block: var(--section-pad); background: #fff; }
.comparison-tabs { display: none; justify-content: center; gap: 6px; margin: 42px auto 18px; }
.comparison-tabs button { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 13px; }
.comparison-tabs button[aria-selected="true"] { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.comparison-wrap { margin-top: 36px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
th, td { padding: 10px 10px; border-bottom: 1px solid var(--line); text-align: center; }
thead th { background: transparent; font-weight: 500; height: 65px; }.comparison-label { width: 30%; }.comparison-brand { width: 14%; background: #f2edff; }
thead th:nth-child(2) { color: var(--blue); }.comparison-brand + col ~ col { width: 13.75%; }
tbody th { font-weight: 500; text-align: left; }.yes { color: var(--blue); font-size: 19px; }.partial { color: var(--coral); font-size: 20px; }.no { color: #aaa6b2; font-size: 19px; }
thead img { width: 24px; height: 24px; margin-inline: auto; object-fit: contain; }
.comparison-legend { margin-top: 15px; color: var(--muted); text-align: left; font-size: 11px; }.comparison-legend span { margin-left: 14px; }
.comparison-summary { display: none; align-items: center; gap: 12px; justify-content: center; margin-top: 18px; color: var(--ink); }.comparison-summary img { width: 44px; height: 44px; }.comparison-summary p { font-size: 15px; }
.comparison-note { margin-top: 22px; color: #94909f; text-align: left; font-size: 11px; line-height: 1.6; }

/* footer and dialog */
.footer { min-height: 119px; padding-block: 24px 34px; background: var(--tint); border-top: 1px solid var(--line); }
.footer-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; color: var(--muted); font-size: 13px; }.footer-brand { display: flex; align-items: center; gap: 8px; }.footer-brand img { width: 28px; height: 28px; }.footer-group { display: grid; gap: 10px; }.footer-group > p { color: var(--ink); font-size: 12px; font-weight: 650; }.footer-group nav { display: flex; gap: 16px; }.footer-symbols { display: flex; gap: 12px; }.footer-symbols svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
dialog { width: min(420px, calc(100% - 32px)); padding: 38px 28px 30px; border: 0; border-radius: 24px; color: var(--ink); text-align: center; box-shadow: 0 24px 80px rgba(27,24,48,.25); }.dialog-close { position: absolute; top: 12px; right: 16px; color: #8c8899; font-size: 26px; }.dialog-eyebrow { display: block; margin-top: 18px; color: var(--coral); font-size: 10px; letter-spacing: .12em; }.dialog-action { display: inline-flex; gap: 8px; margin-top: 20px; padding: 12px 18px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 14px; }dialog::backdrop { background: rgba(27,24,48,.35); backdrop-filter: blur(3px); }

/* Tablet retains the split hero; cards become two columns and a horizontal rail. */
@media(min-width:768px) and (max-width:1279px){
  :root{--pad:32px}
  .hero-grid{gap:28px}.hero h1{font-size:clamp(42px,4.5vw,55px)}.hero-visual-stack{min-height:580px}
  .hero-phone{width:226px;height:464px;border-radius:42px}.hero-phone::before{height:25px;top:10px}
  .hero-spotlight--phone{top:65px}.hero-spotlight--brand{right:226px;bottom:64px}.brand-stage{width:250px;height:285px}.brand-object{inset:25px 10px;border-radius:42px}
  .note-one{top:-35px;left:-5px;font-size:8px}.note-two{top:20px;right:-5px;font-size:8px}
  .nav-links{gap:18px}.nav-links a{font-size:12px}
  .future-stairs{grid-template-columns:repeat(3,1fr);gap:50px 24px;padding:0;margin-top:70px}.future-stairs li:nth-child(n){height:auto;min-height:154px;margin:0;border-radius:18px;padding:35px 22px 20px}.future-stairs li::before,.future-stairs li::after{display:none}.future-stairs .step-icon{top:-30px;width:50px;height:50px}
  .how-step{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);min-height:710px}.how-visual{min-height:580px}.how-visual>.phone{width:clamp(244px,24vw,302px)}.how-visual>.phone--timeline{width:240px}.how-copy h3{font-size:28px}.how-copy p br{display:none}
  .footer-inner{flex-wrap:wrap;row-gap:30px}.footer-brand{flex-basis:100%}
}
@media(min-width:768px) and (max-width:1023px){
  .hero-grid{grid-template-columns:minmax(0,.88fr) minmax(0,.72fr);gap:24px}.hero-visual-stack{min-height:480px}.hero h1{font-size:42px}
  .hero-phone{width:180px;height:370px;border-radius:35px}.hero-phone::before{height:18px;top:8px}.hero-spotlight--phone{top:65px}.hero-spotlight--brand{right:166px;bottom:54px}.brand-stage{width:200px;height:240px}.brand-object{border-radius:32px}
  .note-one{top:-20px;left:-10px}.note-two{top:20px;right:-10px}.hero-copy .store-badge{height:42px;padding-inline:8px;gap:5px}.hero-copy .store-badge strong{font-size:17px}.hero-copy .store-badge small{font-size:7px}.hero-copy .store-badge svg{width:23px}
  .nav .store-links{display:none}.nav-links{margin-right:0}.polaroid-board{grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:24px}.relatable-section{min-height:0}
  .feature-stage{display:none}.feature-mobile-board{display:flex;gap:20px;overflow-x:auto;padding:15px 0 40px;margin-top:35px;scroll-snap-type:x mandatory}.feature-mobile-board .polaroid{flex:0 0 280px;scroll-snap-align:start}.feature-mobile-board .scene{position:relative}.feature-mobile-board svg{position:absolute;bottom:12px;right:12px;background:white;padding:8px;border-radius:12px;color:var(--blue)}
  .categories-section{min-height:0}.how-copy{padding-left:8px}.how-step--flip .how-copy{padding-right:8px}.how-copy h3{font-size:25px}
}
@media(max-width:767px){
  :root{--pad:16px;--section-pad:48px}body{font-size:16px}.mobile-br{display:block}.desktop-br{display:none}
  .nav{height:60px;padding-top:0}.nav-inner{height:60px}.logo-ring{width:45px;height:45px}.logo-word{font-size:22px}.logo-tagline,.nav-links,.nav-actions .store-links{display:none}.nav-actions{margin-left:auto}.menu-toggle{display:block}
  .mobile-menu{position:absolute;top:59px;right:0;left:0;display:grid;gap:14px;padding:20px 16px 24px;border-bottom:1px solid var(--line);background:#f2effafa;box-shadow:0 12px 20px #1b183019}.mobile-menu button{padding-top:4px;color:var(--blue);text-align:left}
  .section-head h2{font-size:32px;line-height:1.12}.section-head p{margin-top:14px;font-size:15px;line-height:1.7;word-break:keep-all}.section-head p br{display:none}
  .hero{min-height:0;overflow:visible;background:#fff}.hero-aurora{display:none}.hero-grid{min-height:0;display:block;padding-block:48px 0}.hero-copy{padding-bottom:48px}
  .eyebrow-chip{padding:9px 12px;font-size:12px}.hero h1{margin-top:18px;font-size:40px;line-height:1.12;letter-spacing:-.045em}.hero h1 em{font-size:.94em;text-underline-offset:7px;text-decoration-thickness:3px;white-space:nowrap}.hero-ending{font-size:.9em;word-break:keep-all}
  .hero-cta-row{display:block;margin-top:26px}.hero-cta-row .store-links{display:flex;gap:12px}.hero-cta-row .store-badge{flex:1;min-width:0;height:52px;justify-content:center;padding:5px 8px}.hero-cta-row .store-badge strong{font-size:23px}.hero-cta-row .store-badge small{font-size:9px}.hero-cta-row .store-badge svg{width:28px;height:32px}
  .learn-more{display:block;margin-top:18px;padding:11px;border:1px solid #ded8e9;border-radius:9px;box-shadow:0 2px #d3ccdf;text-align:center;font-size:16px;font-weight:600}.learn-more span{display:none}.hero-note{margin-top:24px;font-size:18px;line-height:1.7;word-break:keep-all}
  .hero-visual-stack{display:none}
  .spotlight-head{display:block;position:relative;z-index:1;text-align:center}.spotlight-head h2{font-size:32px;line-height:1.12;letter-spacing:-.04em;font-weight:600}.spotlight-head p{margin-top:16px;color:var(--muted);font-size:16px;line-height:1.65}.brand-stage{width:min(100%,400px);height:375px;margin:28px auto 0}.brand-halo{inset:auto;bottom:0;left:6%;width:88%;aspect-ratio:1;background:var(--blue);border-radius:50%}.brand-object{inset:50px 35px 30px;border-radius:22%}.floating-note{font-size:9px}.note-one{top:30px;left:auto;right:0}.note-two{right:auto;left:0;top:auto;bottom:18px}.hero-phone{width:293px;height:603px;margin:28px auto 0;transform:none}
  .relatable-section{min-height:596px}.polaroid-board,.feature-mobile-board{display:flex;align-items:stretch;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin-top:24px;padding:8px 16px 24px;margin-inline:-16px;scrollbar-width:none;overscroll-behavior-x:contain}.polaroid-board::-webkit-scrollbar,.feature-mobile-board::-webkit-scrollbar{display:none}.polaroid-board .polaroid,.feature-mobile-board .polaroid{flex:0 0 min(280px,calc(100vw - 72px));max-width:none;scroll-snap-align:start}.polaroid{padding:14px 14px 76px}.polaroid figcaption{font-size:15px;bottom:26px}.polaroid-tag{bottom:8px;right:14px;left:auto;font-size:9px}
  .gap-section{min-height:744px}.rhythm-card{margin-top:28px;padding:0;border:0;box-shadow:none}.rhythm-tabs{justify-content:flex-start;overflow-x:auto;scrollbar-width:none}.rhythm-tabs button{flex:0 0 auto;padding:9px 12px;font-size:11px;min-height:38px}.rhythm-chart{padding:30px 0 0}.rhythm-chart svg{height:250px}.chart-axis{left:16px;font-size:10px}.chart-x{margin:-8px 4px 0 20px;font-size:10px}.chart-legend{flex-wrap:wrap;gap:8px 12px;margin-top:24px;font-size:9px}.chart-caption{margin-top:20px;font-size:11px;line-height:1.8}.chart-caption small{font-size:9px}
  .categories-section{min-height:610px}.feature-stage{display:none}.feature-mobile-board .polaroid{padding-bottom:86px}.feature-mobile-board .polaroid figcaption{bottom:29px;font-size:14px}.feature-mobile-board .scene{position:relative}.feature-mobile-board .scene svg{position:absolute;right:12px;bottom:12px;width:38px;height:38px;padding:6px;border-radius:12px;background:#fff;color:var(--blue)}
  .future-section{min-height:1107px}.future-stairs{display:flex;flex-direction:column;align-items:stretch;gap:41px;margin-top:56px;padding:0;position:relative;max-width:420px}.future-stairs::before{content:"";position:absolute;width:2px;left:50%;top:20px;bottom:20px;background:linear-gradient(#cabcf3,#e3beb4)}
  .future-stairs li:nth-child(n){width:100%;height:auto;min-height:0;margin:0;border:1px solid var(--line);text-align:center;background:linear-gradient(#fefcff,#f4f0fa);border-radius:18px;padding:36px 16px 18px;box-shadow:0 1px 3px #2413370d}.future-stairs li:nth-child(6){background:linear-gradient(#e1a292,#d28370);color:white}.future-stairs li::before,.future-stairs li::after{display:none}.future-stairs strong{font-size:15px}.future-stairs strong br{display:none}.step-icon{top:-28px;width:48px;height:48px}.step-label{font-size:10px;margin-bottom:5px}
  .hqw-section{min-height:0;padding:48px 0}.hqw-section>.shell{padding:0}.hqw-head{padding-inline:16px}.how-steps{margin:30px 16px 0}.how-steps::before{display:none}.how-step{display:flex;flex-direction:column;gap:24px;padding:30px 0;min-height:0}.how-copy,.how-step--flip .how-copy{text-align:center;padding:0}.how-visual{min-height:0}.how-visual>.phone{width:248px}.how-visual>.phone--timeline{width:226px}
  .has-js .hqw-section{padding:0}.has-js .hqw-head,.has-js .how-steps{display:none}.has-js .how-mobile{display:block}.how-mobile{height:500svh}.how-mobile-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:76px 16px 20px;overflow:hidden}.how-mobile-title{text-align:center;min-height:100px;padding-bottom:15px}.mobile-step-label{display:block;color:#928aa8;font-size:10px;letter-spacing:1.5px;margin-bottom:12px}.how-mobile-title h3{font-size:25px;line-height:1.3;letter-spacing:-.035em}.mobile-how-visual{display:flex;align-items:center;justify-content:center;flex:1;width:100%;min-height:0;max-height:550px}.how-intro{display:flex;flex-direction:column;align-items:center;text-align:center}.how-intro img{width:200px;height:200px;object-fit:contain;border-radius:44px;padding:14px;background:#fff;box-shadow:0 20px 50px #6633ff20;transform:rotate(-7deg);margin-bottom:28px}.how-intro span{font-size:28px;font-weight:600;letter-spacing:-1px}.how-intro p{color:var(--muted);font-size:13px;margin-top:8px}.mobile-how-visual .phone{width:min(248px,calc((100svh - 265px)*.49));height:auto;max-height:100%;border-width:7px;border-radius:34px}.mobile-how-visual .phone::before{top:7px;height:20px}.mobile-how-visual .phone img{aspect-ratio:390/810;object-fit:cover;object-position:top}.how-progress{display:flex;width:220px;gap:8px;margin-top:20px}.how-progress button{flex:1;height:24px;padding:0;position:relative}.how-progress button::before{content:"";position:absolute;left:0;right:0;top:10px;height:4px;background:#dcd3ec;border-radius:3px}.how-progress button[aria-current=step]::before{background:var(--blue)}.scroll-cue{font-size:10px;color:#928aa8;margin-top:8px}
  .checklist-section{min-height:1081px}.comparison-tabs{display:flex;gap:4px;justify-content:flex-start;background:#f6f3fa;border-radius:999px;padding:4px;margin:26px 0 22px}.comparison-tabs button{flex:1;padding:9px 3px;font-size:11px;white-space:nowrap;border:0}.comparison-tabs button[aria-selected=true]{background:var(--ink);color:white}.comparison-wrap{margin:0;border:0;border-radius:0;overflow:visible}.comparison-wrap table{font-size:12px}.comparison-label{width:60%}.comparison-brand{width:20%;background:transparent}.comparison-wrap th,.comparison-wrap td{padding:10px 6px;height:58px}.comparison-wrap thead th{height:56px;font-size:10px;white-space:nowrap}.comparison-wrap thead th:nth-child(2){font-size:9px}.comparison-wrap thead img{width:20px;height:20px;margin:0 auto 4px}.comparison-wrap tbody th{padding-left:0;font-size:12px;line-height:1.5}.comparison-wrap [data-column]:not([data-active]){display:none}.comparison-wrap col:nth-child(n+3){display:none}.comparison-legend{text-align:center;font-size:10px;margin-top:16px}.comparison-legend span{margin-left:8px}.comparison-summary{display:flex;align-items:center;justify-content:flex-start;border:1px solid var(--line);background:var(--tint);border-radius:14px;padding:14px;margin-top:14px}.comparison-summary img{flex:none;border-radius:12px}.comparison-summary p{font-size:12px;line-height:1.6}.comparison-note{font-size:10px;line-height:1.8;margin-top:18px}
  .footer{min-height:533px;padding:40px 0 32px}.footer-inner{display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center;font-size:12px}.footer-brand{order:4;font-size:10px;white-space:normal}.footer-group>p{font-size:11px;margin-bottom:5px}.footer-symbols{justify-content:center;gap:24px}.footer-symbols svg{width:21px;height:21px}.footer nav{gap:22px;font-size:12px}.footer .store-links{gap:10px}.footer .store-badge{height:39px;padding-inline:9px}.footer .store-badge svg{width:24px;height:25px}.footer .store-badge small{font-size:7px}.footer .store-badge strong{font-size:17px}
}
@media(max-width:374px){.hero h1{font-size:34px}.hero-cta-row .store-badge strong{font-size:19px}.hero-cta-row .store-badge small{font-size:7px}.hero-cta-row .store-links{gap:8px}.brand-stage{height:340px}.floating-note{font-size:8px}.hero-phone{width:270px;height:556px}.how-mobile-title h3{font-size:22px}.how-mobile-sticky{padding-top:68px}.mobile-step-label{margin-bottom:6px}.how-mobile-title{min-height:85px}.logo-word{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.how-mobile{height:auto}.how-mobile-sticky{position:relative;top:auto;min-height:720px;height:auto}.mobile-how-visual{min-height:480px}.mobile-how-visual .phone{width:230px}.scroll-cue{display:none}}

/* Problem statements are the primary captions, not decorative tags. */
.polaroid-board .polaroid { padding: 14px 14px 22px; }
.polaroid-board figcaption { position: static; margin-top: 18px; }
.problem-title { display: block; color: var(--ink); font-size: 18px; line-height: 1.4; font-weight: 700; letter-spacing: -.04em; word-break: keep-all; }
.problem-detail { display: block; margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.7; word-break: keep-all; }

/* A compact device and a phone remain distinct, connected by a two-way sync cue. */
.device-sync { --pair-phone: 236px; --pair-device: 150px; display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.sync-status { display: flex; justify-content: center; align-items: center; gap: 8px; max-width: 100%; padding: 9px 14px; color: var(--blue); background: #e8e0ff; border: 1px solid #cbb9ff; border-radius: 999px; font-size: 12px; font-weight: 600; text-align: center; word-break: keep-all; }
.sync-status > span { font-size: 22px; line-height: 1; }
.sync-pair { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; }
.sync-unit { display: flex; flex: none; flex-direction: column; align-items: center; gap: 16px; }
.sync-unit figcaption { color: var(--muted); font-size: 12px; letter-spacing: -.02em; }
.compact-device { width: var(--pair-device); aspect-ratio: 320 / 480; padding: 3px; overflow: hidden; border: 7px solid #363340; border-radius: 18px; background: #f4f2ee; box-shadow: 0 15px 25px #24173526, 0 3px 0 #171522; }
.compact-device img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.device-sync .phone { width: var(--pair-phone); border-width: 6px; border-radius: 34px; }
.device-sync .phone::before { width: 36%; height: 20px; top: 8px; }
.device-sync .phone img { object-fit: contain; background: #f4f2ee; }
.sync-bridge { flex: none; width: 26px; color: var(--blue); margin-bottom: 35px; }
.sync-bridge svg { width: 100%; height: auto; }
@media (min-width:768px) and (max-width:1023px) {
  .device-sync { --pair-phone: 152px; --pair-device: 98px; gap: 20px; }
  .sync-pair { gap: 8px; }
  .sync-bridge { width: 20px; }
  .sync-status { font-size: 10px; padding: 8px; }
  .device-sync .phone { border-width: 5px; border-radius: 25px; }
  .device-sync .phone::before { height: 13px; top: 6px; }
  .hero-note { font-size: 19px; }
}
@media (max-width:767px) {
  .polaroid-board figcaption { margin-top: 16px; }
  .problem-title { font-size: 17px; }
  .problem-detail { font-size: 13px; }
  .device-sync { --pair-phone: clamp(144px,46vw,186px); --pair-device: clamp(88px,27vw,110px); gap: 24px; width: 100%; }
  .sync-pair { gap: 10px; }
  .sync-status { font-size: 10px; padding: 8px 10px; }
  .sync-status > span { font-size: 18px; }
  .sync-bridge { width: 18px; }
  .sync-unit { gap: 12px; }
  .sync-unit figcaption { font-size: 10px; }
  .compact-device { border-width: 5px; padding: 2px; border-radius: 14px; }
  .mobile-how-visual > .phone--timeline { width: min(226px,calc((100svh - 265px)*.415)); aspect-ratio: 390 / 930; }
  .mobile-how-visual > .phone--timeline img { aspect-ratio: auto; height: 100%; object-fit: contain; background: #f4f2ee; }
  .mobile-device-sync .phone { width: var(--pair-phone); max-height: none; height: auto; border-width: 5px; border-radius: 27px; }
  .mobile-device-sync .phone::before { height: 15px; top: 7px; }
  .mobile-device-sync .phone img { aspect-ratio: auto; height: 100%; object-fit: contain; }
}
@media (max-width:374px) {
  .hero-note { font-size: 16px; }
}

/* Horizontal product flow: preserve every source screen's native device ratio. */
.phone { aspect-ratio: 780 / 1546; }
.phone--timeline { aspect-ratio: 780 / 1840; }
.phone img,
.how-visual .phone img,
.device-sync .phone img { object-fit: cover; }
.hero-phone { height: auto; }
.hero-template {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  aspect-ratio: 1290 / 2796;
}
.hero-template::before { display: none; }
.hero-template img { width: 100%; height: 100%; object-fit: contain; }

@media (min-width:768px) {
  .hqw-section { min-height: 0; }
  .how-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 32px);
    max-width: 1200px;
    margin-top: 58px;
  }
  .how-steps::before {
    top: 24px;
    right: 12.5%;
    bottom: auto;
    left: 12.5%;
    width: auto;
    height: 1px;
  }
  .how-step,
  .how-step--flip {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    padding: 0;
    text-align: center;
  }
  .how-number,
  .how-step--flip .how-number {
    position: relative;
    z-index: 1;
    flex: none;
    color: var(--blue);
    border-color: #b8a0f4;
  }
  .how-visual,
  .how-step--flip > .how-visual {
    flex: none;
    grid-area: auto;
    width: 100%;
    min-height: 0;
    height: clamp(292px, 27vw, 390px);
    margin-top: 24px;
  }
  .how-step--record .how-visual > .phone { width: clamp(120px, 12.5vw, 182px); }
  .how-template {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
  }
  .how-step--today .how-visual > .phone,
  .how-step--week .how-visual > .phone { width: clamp(104px, 10.7vw, 156px); }
  .how-step--sync .device-sync {
    --pair-phone: clamp(68px, 7.5vw, 108px);
    --pair-device: clamp(46px, 4.9vw, 70px);
    gap: 14px;
  }
  .how-step--sync .sync-status {
    padding: 7px 9px;
    font-size: clamp(9px, .8vw, 11px);
  }
  .how-step--sync .sync-status > span { font-size: 16px; }
  .how-step--sync .sync-pair { gap: 6px; }
  .how-step--sync .sync-unit { gap: 8px; }
  .how-step--sync .sync-unit figcaption { font-size: 10px; }
  .how-step--sync .compact-device { border-width: 4px; border-radius: 11px; }
  .how-step--sync .device-sync .phone { border-width: 4px; border-radius: 20px; }
  .how-step--sync .device-sync .phone::before { top: 5px; height: 10px; }
  .how-step--sync .sync-bridge { width: 16px; margin-bottom: 22px; }
  .how-copy,
  .how-step--flip .how-copy {
    grid-area: auto;
    max-width: 260px;
    padding: 0;
    text-align: center;
  }
  .how-copy h3 { font-size: clamp(21px, 2.1vw, 28px); }
  .how-copy p { margin-top: 11px; font-size: clamp(13px, 1.1vw, 15px); line-height: 1.6; }
}

@media (max-width:767px) {
  .mobile-how-visual .phone:not(.phone--timeline) img { aspect-ratio: auto; object-fit: cover; }
  .mobile-device-sync .phone img { object-fit: cover; }
  .mobile-how-visual .phone.phone--template {
    width: min(268px, calc((100svh - 265px) * .46));
    max-height: 100%;
    aspect-ratio: 1290 / 2796;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .mobile-how-visual .phone.phone--template::before { display: none; }
  .mobile-how-visual .phone.phone--template img { object-fit: contain; }
}

/* Care narrative: four everyday difficulties and four hopeful counterparts. */
.section-head h2 { word-break: keep-all; }
main > section { scroll-margin-top: 78px; }
.relatable-section { min-height: 0; }
.polaroid-board { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; gap: 42px; }
.polaroid-board .polaroid { max-width: 390px; }
.care-scene { background-image: url('/assets/care-difficulties.png'); background-size: 200% 200%; }
.relief-scene { background-image: url('/assets/care-relief.png'); }
.care-scene-0 { background-position: 0 0; }
.care-scene-1 { background-position: 100% 0; }
.care-scene-2 { background-position: 0 100%; }
.care-scene-3 { background-position: 100% 100%; }
.gap-section { min-height: 0; }
.record-preview { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; padding: 54px 32px 36px; }
.record-eyebrow { color: var(--coral); font-size: 13px; }
.record-answer h3 { margin-top: 12px; font-size: 26px; letter-spacing: -.04em; word-break: keep-all; }
#record-value { margin-top: 20px; color: var(--blue); font-size: 28px; font-weight: 650; letter-spacing: -.035em; word-break: keep-all; }
#record-value span { display: block; font-size: 20px; }
#record-detail { margin-top: 14px; color: var(--muted); font-size: 15px; word-break: keep-all; }
.record-example { display: block; margin-top: 24px; color: var(--muted); font-size: 11px; }
.record-timeline { display: grid; gap: 0; }
.record-timeline li { display: grid; grid-template-columns: 44px 16px 1fr; gap: 16px; position: relative; padding: 20px 0; }
.record-timeline li:not(:last-child)::after { content: ''; position: absolute; top: 32px; bottom: -32px; left: 67px; width: 1px; background: #d9cdef; }
.record-timeline time { color: var(--muted); font-size: 13px; }
.record-dot { width: 12px; height: 12px; margin-top: 5px; border: 3px solid white; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px #d9cdef; z-index: 1; }
.record-timeline strong { display: block; font-size: 16px; font-weight: 600; }
.record-timeline div > span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.record-note { padding: 20px 16px 4px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; text-align: center; word-break: keep-all; }
.feature-polaroid { padding-bottom: 96px; }
.feature-polaroid figcaption { bottom: 32px; }
.future-section .section-head { max-width: 760px; }
.vision-label { display: inline-block; margin-bottom: 22px; padding: 7px 14px; border-radius: 30px; background: var(--blue-soft); color: var(--blue); font-size: 12px; }
.resolution-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 48px; }
.resolution-card { overflow: hidden; border: 1px solid #e8deee; border-radius: 18px; background: #faf7fc; }
.resolution-card figcaption { padding: 22px 18px 24px; word-break: keep-all; }
.resolution-card strong { display: block; font-size: 18px; line-height: 1.5; letter-spacing: -.035em; }
.resolution-card figcaption > span { display: block; margin-top: 12px; color: var(--muted); font-size: 12px; }
.future-feeling { margin-top: 48px; text-align: center; color: var(--blue); font-size: 26px; font-weight: 600; word-break: keep-all; letter-spacing: -.035em; }
.vision-note { margin: 18px auto 0; max-width: 700px; color: var(--muted); font-size: 12px; text-align: center; word-break: keep-all; }
.checklist-section { min-height: 0; }
.care-comparison { font-size: 16px; }
.care-comparison th, .care-comparison td { padding: 30px 22px; line-height: 1.7; word-break: keep-all; }
.care-comparison thead th { background: #faf8fc; font-size: 13px; }
.care-comparison th:first-child { width: 22%; }
.care-comparison thead th:nth-child(2) { color: var(--muted); }
.care-comparison td:nth-child(2) { color: var(--muted); }
.care-comparison th:last-child, .care-comparison td:last-child { background: #f4efff; }
.care-comparison td strong { color: var(--blue); font-weight: 600; }
.care-comparison tbody tr:last-child > * { border-bottom: 0; }
.closing-cta { margin-top: 32px; text-align: center; }
.closing-cta p { margin-top: 12px; font-size: 12px; color: var(--muted); }
.closing-section { padding-block: 96px 110px; background: #fff; }
.brand-promise { text-align: center; word-break: keep-all; }
.brand-promise img { margin: 0 auto 30px; }
.brand-promise p { color: var(--muted); font-size: 22px; }
.brand-promise strong { display: block; margin-top: 18px; color: var(--blue); font-size: 38px; font-weight: 600; letter-spacing: -.04em; }
@media (min-width:768px) and (max-width:1023px) {
  .resolution-board { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; margin-inline: auto; }
  .record-preview { gap: 24px; padding-inline: 16px; }
  .polaroid-board { gap: 28px; padding-inline: 12px; }
}
@media (max-width:767px) {
  .polaroid-board { gap: 18px; }
  .polaroid-board .polaroid { max-width: none; }
  .record-preview { grid-template-columns: 1fr; gap: 18px; padding: 30px 20px 20px; margin-top: 16px; border-radius: 18px; background: #f8f5fc; }
  .record-answer h3 { font-size: 23px; }
  #record-value { font-size: 25px; }
  #record-detail { min-height: 48px; font-size: 14px; }
  .record-timeline { border-top: 1px solid var(--line); padding-top: 10px; }
  .record-note { border: 0; padding-inline: 8px; }
  .future-section { min-height: 0; }
  .resolution-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
  .resolution-card { border-radius: 12px; }
  .resolution-card figcaption { padding: 16px 12px; }
  .resolution-card strong { font-size: 16px; line-height: 1.55; }
  .resolution-card strong br { display: none; }
  .resolution-card figcaption > span { font-size: 12px; }
  .future-feeling { margin-top: 38px; font-size: 23px; }
  .vision-note { font-size: 11px; line-height: 1.8; }
  .vision-note br { display: none; }
  .comparison-wrap { margin-top: 30px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .care-comparison th, .care-comparison td { padding: 18px 10px; height: auto; font-size: 12px; }
  .care-comparison tbody th { padding-left: 10px; font-size: 12px; }
  .care-comparison thead th, .care-comparison thead th:nth-child(2) { padding: 16px 8px; height: auto; font-size: 11px; white-space: normal; }
  .care-comparison th:first-child { width: 22%; }
  .care-comparison td br { display: none; }
  .closing-section { padding-block: 64px 78px; }
  .brand-promise img { width: 192px; height: 192px; }
  .brand-promise { padding: 0; }
  .brand-promise p { font-size: 18px; line-height: 1.8; }
  .brand-promise strong { font-size: 30px; line-height: 1.5; }
}