.hero {
  background-image: linear-gradient(90deg, rgba(8,23,19,.94) 0%, rgba(8,23,19,.62) 39%, rgba(8,23,19,.08) 69%), url('/assets/hero-commercial-v2.jpg');
  background-position: center;
}

.hero-content { max-width: 1280px; }
.hero-content > p { max-width: 660px; }
.hero-proof { background: rgba(13,53,45,.78); border: 0; padding: 16px 20px; backdrop-filter: blur(10px); }
.intent-section { padding-bottom: 70px; }
.intent-grid { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); }
.intent-item { min-height: 310px; padding: 34px; display: flex; flex-direction: column; border-right: 1px solid var(--line); transition: .25s; }
.intent-item:last-child { border-right: 0; }
.intent-item:hover { background: var(--paper); }
.intent-item > span { color: var(--coral); font-size: 13px; font-weight: 700; text-transform: uppercase; }
.intent-item h3 { margin: auto 0 14px; font: 600 34px/1.05 "Newsreader",serif; }
.intent-item p { color: var(--muted); }
.intent-item strong { color: var(--forest); margin-top: 15px; }

.product-journey { background: #e6ede8; }
.journey-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.journey-tab { border: 1px solid #b9c8c0; background: transparent; padding: 10px 15px; cursor: pointer; color: var(--forest); }
.journey-tab.active { color: #fff; background: var(--forest); }
.journey-stage { min-height: 510px; display: grid; grid-template-columns: .82fr 1.18fr; background: var(--forest-2); color: #fff; }
.journey-copy { padding: 65px; display: flex; flex-direction: column; justify-content: center; }
.journey-copy > span { color: #f1a794; font-size: 13px; text-transform: uppercase; font-weight: 700; }
.journey-copy h3 { font: 600 42px/1.08 "Newsreader",serif; margin: 18px 0; }
.journey-copy p { color: #c9d5d0; }
.permission-note { border-top: 1px solid rgba(255,255,255,.25); margin-top: 32px; padding-top: 18px; font-size: 14px; }
.chronicle-preview { margin: 42px; background: #fbf8f1; color: var(--ink); padding: 36px 42px; box-shadow: 0 25px 55px rgba(0,0,0,.25); }
.preview-bar { display: flex; justify-content: space-between; font-size: 13px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.audio-wave { height: 80px; display: flex; align-items: center; gap: 8px; margin-top: 25px; }
.audio-wave i { display: block; width: 5px; height: 30px; background: var(--coral); border-radius: 2px; }
.audio-wave i:nth-child(2n) { height: 55px; }.audio-wave i:nth-child(3n) { height: 72px; }
.preview-label { color: var(--muted); font-size: 13px; }
.chronicle-preview h4 { font: 600 38px/1.05 "Newsreader",serif; margin: 20px 0 12px; }
.memory-tags { display: flex; gap: 8px; margin-top: 30px; flex-wrap: wrap; }
.memory-tags span { border: 1px solid var(--line); padding: 5px 10px; font-size: 12px; }

.book-detail { display: grid; grid-template-columns: 1.25fr .75fr; gap: 70px; align-items: center; }
.book-spread { min-height: 490px; display: grid; grid-template-columns: 1fr 1fr; perspective: 1200px; filter: drop-shadow(0 28px 26px rgba(38,32,22,.22)); }
.book-page { position: relative; background: #fffdf8; padding: 48px 38px; border-right: 1px solid #d6d0c2; transform: rotateY(4deg); }
.book-page-right { border: 0; transform: rotateY(-4deg); }
.book-page small { font-size: 9px; letter-spacing: 1.3px; color: var(--muted); }
.book-page h3 { font: 600 30px/1.05 "Newsreader",serif; }
.book-page p { font: 500 14px/1.65 "Newsreader",serif; }
.book-photo { height: 180px; background: url('/assets/family-hero.jpg') center/cover; filter: saturate(.8); }
.book-page blockquote { font: 600 33px/1.18 "Newsreader",serif; margin: 40px 0; }
.mini-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini-photos span { height: 150px; background: url('/assets/testimonial.jpg') center 30%/cover; }
.mini-photos span+span { background-image: url('/assets/story-book.jpg'); }
.page-no { position: absolute; bottom: 18px; font-size: 11px; color: var(--muted); }
.book-spec h2 { font: 600 48px/1.02 "Newsreader",serif; }
.book-spec dl div { display: grid; grid-template-columns: 100px 1fr; border-top: 1px solid var(--line); padding: 12px 0; }
.book-spec dt { font-weight: 700; }.book-spec dd { margin: 0; color: var(--muted); }

.trust-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); }
.trust-grid article { padding: 32px 28px 20px 0; }
.trust-grid article+article { border-left: 1px solid var(--line); padding-left: 28px; }
.trust-grid strong { color: var(--coral); font-size: 12px; }
.trust-grid h3 { font: 600 27px/1.1 "Newsreader",serif; }
.trust-grid p { color: var(--muted); }
.faq-list { max-width: 920px; }
.faq-list details { border-top: 1px solid rgba(255,255,255,.25); padding: 22px 0; }
.faq-list summary { display: flex; justify-content: space-between; list-style: none; cursor: pointer; font: 600 26px "Newsreader",serif; }
.faq-list summary span { color: #f1a794; }
.faq-list p { max-width: 720px; color: #c9d5d0; }
.role-table { border: 1px solid var(--line); overflow-x: auto; }
.role-row { min-width: 760px; display: grid; grid-template-columns: 1.5fr repeat(4,1fr); border-top: 1px solid var(--line); }
.role-row:first-child { border-top: 0; }.role-row span,.role-row strong { padding: 18px; }
.role-head { background: var(--forest); color: #fff; font-weight: 700; }
.center-note { text-align: center; max-width: 760px; margin: 35px auto 0; color: var(--muted); }
.policy-callout { margin-top: 55px; padding: 28px; border-left: 4px solid var(--coral); background: var(--paper); }
.policy-content { max-width: 900px; }.policy-content article { border-top: 1px solid var(--line); padding: 28px 0; }
.policy-content h2 { font: 600 32px "Newsreader",serif; }.policy-content p { color: var(--muted); }
.sample-page { padding-top: 100px; padding-bottom: 100px; }
.contact-channels { background: #f1f4f1; }
.contact-grid { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid #cad3cd; background: #fff; }
.contact-grid>a { min-height: 310px; display: flex; flex-direction: column; padding: 34px; border-right: 1px solid #cad3cd; transition: .2s; }
.contact-grid>a:last-child { border-right: 0; }.contact-grid>a:hover { background: var(--paper); }
.contact-grid span { color: var(--coral); font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.contact-grid h3 { font: 600 30px/1.08 "Newsreader",serif; margin: auto 0 12px; }
.contact-grid p { color: var(--muted); font-size: 14px; }.contact-grid strong { color: var(--forest); font-size: 13px; margin-top: 18px; overflow-wrap: anywhere; }
.support-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 70px 80px; }
.faq-category>.eyebrow { display: block; margin-bottom: 15px; }.light-faq details { border-color: var(--line); }.light-faq summary { color: var(--ink); font-size: 22px; }.light-faq p { color: var(--muted); }

.client-showcase { background: #fff; }
.client-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; }
.client-copy { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; }
.client-tabs { border-top: 1px solid var(--line); }
.client-tab { width: 100%; display: grid; grid-template-columns: 42px 1fr; text-align: left; padding: 17px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-weight: 600; }
.client-tab span { color: var(--coral); font-size: 12px; }
.client-tab.active { color: var(--forest); font-size: 19px; }
.client-detail { margin-top: 55px; max-width: 520px; }
.client-detail > span { color: var(--coral); font-size: 11px; font-weight: 700; letter-spacing: 1.6px; }
.client-detail h3 { font: 600 39px/1.08 "Newsreader",serif; margin: 15px 0; }
.client-detail p { color: var(--muted); }
.app-device { width: min(430px,100%); height: 780px; margin: auto; position: relative; overflow: hidden; border: 9px solid #292521; border-radius: 42px; background: #fbf6ee; box-shadow: 0 35px 70px rgba(38,30,24,.22); color: #29241f; }
.app-status { height: 38px; padding: 12px 22px 0; display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; }
.app-screen { height: 650px; overflow: hidden; padding: 10px 19px 30px; }
.app-top { display: flex; justify-content: space-between; align-items: center; }
.app-top small,.app-top b { display: block; }.app-top small { color: #81756b; font-size: 10px; }.app-top b { font: 700 21px "Newsreader",serif; }
.app-top button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: #eee3d8; color: #744d35; font-weight: 700; }
.app-progress,.interview-progress,.book-progress { height: 6px; background: #e7dbcf; margin: 13px 0 18px; overflow: hidden; border-radius: 4px; }
.app-progress i,.interview-progress i,.book-progress i { display: block; height: 100%; width: 67%; background: #986642; }
.app-screen>h3 { font: 600 29px/1.08 "Newsreader",serif; margin: 14px 0 18px; }
.quick-actions { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.quick-actions span { display: grid; place-items: center; height: 62px; border-radius: 15px; background: #eee3d8; color: #986642; font-size: 20px; }
.quick-actions span:first-child { color: #fff; background: #986642; }
.quick-actions small { display: block; font-size: 9px; color: inherit; }
.app-year { color: #986642; font-size: 10px; font-weight: 800; margin: 22px 0 10px; border-bottom: 1px solid #e3d7cc; padding-bottom: 8px; }
.app-story { display: flex; gap: 11px; background: #fff; border: 1px solid #eadfd5; border-radius: 17px; padding: 12px; margin-bottom: 10px; }
.story-thumb { width: 58px; height: 58px; border-radius: 13px; display: grid; place-items: center; color: #fff; flex: none; }.story-thumb.coral { background: #b57a57; }.story-thumb.green { background: #486453; }
.app-story b,.app-story small,.app-story em { display: block; }.app-story b { font-size: 13px; }.app-story small { color: #83786e; font-size: 9px; }.app-story em { color: #986642; font-size: 9px; font-style: normal; margin-top: 8px; font-weight: 700; }
.app-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 78px; display: grid; grid-template-columns: repeat(5,1fr); align-items: center; background: rgba(255,255,255,.97); border-top: 1px solid #e6dbd0; }
.app-nav span { text-align: center; color: #8d8177; font-size: 18px; }.app-nav small { display: block; font-size: 8px; }.app-nav .app-record { width: 47px; height: 47px; padding-top: 7px; margin: -25px auto 0; border-radius: 50%; background: #986642; color: #fff; }
.scan-banner { margin: 22px 0 15px; background: #986642; color: #fff; padding: 14px; border-radius: 15px; }.scan-banner strong,.scan-banner span { display: block; }.scan-banner strong { font-size: 12px; }.scan-banner span { font-size: 9px; opacity: .8; }
.album-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.album-grid article { font-size: 10px; }.album-grid b,.album-grid small { display: block; }.album-grid small { color: #81756b; }.album-img { height: 112px; border-radius: 15px; background: url('/assets/family-hero.jpg') center/cover; }.album-img.two { background-image: url('/assets/story-book.jpg'); }.album-img.three { background-image: url('/assets/memory-film.jpg'); }.album-img.four { background-image: url('/assets/testimonial.jpg'); }
.interview-orb { width: 80px; height: 80px; display: grid; place-items: center; margin: 38px auto 24px; border-radius: 28px; background: #ead7c3; color: #875b3b; font-size: 32px; }.interview-question { font: 600 26px/1.15 "Newsreader",serif; text-align: center; }.answer-box { margin: 25px 0; padding: 17px; border: 1px solid #dfd2c6; border-radius: 16px; background: #fff; color: #6f655d; font: 500 14px/1.5 "Newsreader",serif; }.answer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.answer-actions button,.app-primary { min-height: 44px; border: 0; border-radius: 12px; background: #986642; color: #fff; font-size: 11px; font-weight: 700; }.answer-actions button+button { background: transparent; color: #986642; border: 1px solid #cdb6a5; }.saved-note { display: block; text-align: center; color: #81756b; }
.current-book { display: flex; gap: 18px; align-items: center; margin-top: 28px; }.current-book>span { width: 98px; height: 135px; display: grid; place-items: center; background: #315746; color: #fff; font: 600 27px "Newsreader",serif; box-shadow: 0 12px 20px rgba(40,50,43,.18); }.current-book small,.current-book b,.current-book em { display: block; }.current-book small { font-size: 8px; color: #81756b; }.current-book b { font: 600 24px "Newsreader",serif; }.current-book em { color: #986642; font-size: 10px; font-style: normal; }.book-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 15px; }.book-metrics span { background: #eee3d8; padding: 10px; text-align: center; font-size: 8px; }.book-metrics b { display: block; font-size: 17px; }.app-primary { width: 100%; }.version-row { display: flex; justify-content: space-between; border-top: 1px solid #e3d7cc; padding: 13px 0; font-size: 10px; }.version-row:first-of-type { margin-top: 25px; }.version-row strong { color: #56725f; }

@media(max-width:1100px){
  .desktop-nav { gap: 15px; }.book-detail { grid-template-columns: 1fr; }.trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid article:nth-child(3) { border-left: 0; }.journey-stage { grid-template-columns: 1fr; }.client-layout { gap: 40px; }
}
@media(max-width:760px){
  .hero { background-position: 61% center; }.intent-grid { grid-template-columns: 1fr; }.intent-item { min-height: 240px; border-right: 0; border-bottom: 1px solid var(--line); }
  .journey-copy { padding: 38px 25px; }.chronicle-preview { margin: 0 15px 22px; padding: 25px 20px; }.journey-tabs { margin-top: 20px; }
  .book-spread { min-height: 390px; }.book-page { padding: 25px 18px; }.book-page h3 { font-size: 22px; }.book-photo { height: 130px; }.book-page blockquote { font-size: 24px; }.mini-photos span { height: 110px; }
  .trust-grid { grid-template-columns: 1fr; }.trust-grid article+article { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }.book-spec h2 { font-size: 40px; }
  .client-layout { grid-template-columns: 1fr; }.client-copy { display: block; }.client-detail { margin: 35px 0 45px; }.app-device { height: 740px; }.app-screen { height: 610px; }
  .contact-grid,.support-faq { grid-template-columns: 1fr; }.contact-grid>a { min-height: 245px; border-right: 0; border-bottom: 1px solid #cad3cd; }.contact-grid>a:last-child { border-bottom: 0; }.support-faq { gap: 50px; }
}