/* Third refinement: readable scenes, responsive photographs and tactile controls. */
:root { --ease: cubic-bezier(.22,.8,.24,1); }
.hero-media { animation-duration: 1.4s; }
.hero h1 { text-wrap: balance; }
.hero h1 span { animation-duration: 1.05s; animation-delay: .25s; }
.hero h1 span+span { animation-delay: .45s; }
.hero-copy>p { animation-delay: .6s; }
.hero-copy>.btn.control-ready { animation-delay: .75s; }
.section h2 { text-wrap: balance; }
.intro p,.representative p { max-width: 36em; }
.audience-panel>img { border-radius: 5px 100px 5px 5px; }
#audience-panel-1>img { border-radius: 100px 5px 5px 5px; }
#audience-panel-2>img { object-fit: contain; background: radial-gradient(ellipse at center,#fff,#e8e8de); }
.journey-picture { box-shadow: 15px 18px 0 #d8dccd77; }
.service:nth-child(2) .photo,.service:nth-child(3) .photo { border-radius: 4px 64px 4px 4px; }
.service:nth-child(1) .photo,.service:nth-child(4) .photo { border-radius: 4px 4px 64px 4px; }
.service h3 { margin-top: 18px; }
.daily-goals { background: radial-gradient(ellipse at top left,#e5eada66,transparent 70%); }
.home-voice-photo { border-radius: 4px 60px 4px 4px; }
.voice-grid { gap: 26px; }
.voice p { line-height: 1.95; }
.review-feature figcaption { border-left: 2px solid #bc8397; padding-left: 26px; }
.faq-group { scroll-margin-top: 80px; }

button,summary { min-height: 44px; }
.sound,.menu-toggle,.copy-check,.audience-tabs button,.journey-tabs button,.faq summary,.page-guide a,.faq-jumps a {
  box-shadow: 0 3px 0 #18392b20,0 5px 12px #193d2908;
  transition: translate .16s,scale .16s,box-shadow .16s,background .25s;
}
.sound,.menu-toggle { background: linear-gradient(135deg,#fff9,#e9ecdf66); }
.sound { border-radius: 5px 13px 5px 13px; padding: 7px 11px; }
.audience-tabs button,.journey-tabs button { border-radius: 5px 18px 5px 5px; }
.page-guide a { padding: 5px 10px; border-radius: 5px; }
.faq summary { padding-left: 12px; padding-right: 12px; }
.check { box-shadow: 0 4px 0 #0d271d99,0 9px 16px #0d271d22; }
.check-number { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; width: 30px; }
.check-number .scene-icon { width: 28px; height: 28px; }
.check-number small { font-size: 10px; line-height: 1; }
.check[aria-pressed=true] .check-number { color: #a23b60; }
.check-picked { animation: choiceSettles .5s var(--ease); }
.result-next { display: inline-block; font-size: 11px; border-bottom: 1px solid #edc5d166; color: #f7dbe6; margin: 0 0 10px; }
.result-preview.is-updated { animation: resultArrives .45s var(--ease); }
.result-preview img { height: 180px; }
.check-result .text-link { gap: 10px; }
.copy-check:disabled { opacity: .45; box-shadow: none; cursor: default; }
button.pressed:not(:disabled),summary.pressed,a.pressed:not(.btn) {
  translate: 0 3px; scale: .985;
  box-shadow: 0 1px 0 #17392b30,inset 0 2px 6px #102d282b;
}
a:focus-visible,button:focus-visible,summary:focus-visible { outline: 3px solid #bd567a; outline-offset: 5px; }
.button-petal { background: linear-gradient(145deg,#fff5e8,var(--petal-tone,#edb8cb)); }
.button-petal[data-style="1"],.button-petal[data-style="4"] { border-radius: 50%; width: 11px; height: 11px; }
.check-result:focus { outline: 2px solid #efc7d8; outline-offset: 5px; }
.control-await:focus-visible { opacity: 1; }
@keyframes choiceSettles { 0%{filter:brightness(1.25)} 100%{filter:brightness(1)} }
@keyframes resultArrives { from{opacity:.4;translate:0 12px} to{opacity:1;translate:0 0} }

@media (max-width:1000px) {
  .page-guide { gap: 8px; }
  .result-preview img { width:110px; }
}
@media (max-width:700px) {
  .hero { height:auto; min-height: min(790px,max(660px,calc(100svh - 74px))); max-height:none; }
  .hero-copy { min-height: min(790px,max(660px,calc(100svh - 74px))); height:auto; padding: 240px 6% 88px; }
  .hero h1 { font-size:clamp(33px,9.2vw,48px); line-height:1.48; letter-spacing:.015em; }
  .hero-copy>p { font-size:14px; margin:15px 0 20px; }
  .hero .eyebrow { margin-bottom:12px; font-size:11px; letter-spacing:.04em; }
  .hero-side { top:20px; right:16px; }
  .hero-media img:first-child { object-position:43% 22%; }
  .hero:after { background:linear-gradient(0deg,#143c30 0%,#143c30eb 29%,#143c3066 60%,transparent 86%); }
  .hero-bottom { left:6%; right:6%; gap:10px; flex-wrap:wrap; }
  .hero-bottom span { letter-spacing:.02em; }
  .hero-copy .btn { width:100%; justify-content:center; }
  .section h2 { font-size:clamp(25px,6.9vw,31px); line-height:1.7; }
  .page-guide { padding:8px 4%; gap:8px; }
  .page-guide a { min-height:44px; padding:5px 10px; }
  .check-local-status { top:61px; }
  .check { padding:15px 12px; gap:11px; font-size:14px; line-height:1.7; }
  .check-layout { gap:22px; }
  .check-local-status a { min-height:36px; display:flex; align-items:center; }
  .result-preview { grid-template-columns:100px minmax(0,1fr); }
  .result-preview img { width:100px; height:170px; }
  .result-preview h3 { font-size:20px; }
  .result-next { font-size:10px; }
  .check-result>.btn { width:100%; justify-content:center; }
  .check-result>#reset-check { display:block; margin:15px 0 0!important; }
  .audience-tabs { gap:7px; }
  .audience-tabs button { padding:12px 5px; font-size:13px; line-height:1.6; }
  .audience-tabs .scene-icon { width:25px; height:25px; }
  .journey-picture { box-shadow:8px 10px 0 #d8dccd77; margin-right:8px; }
  .journey-picture img { height:270px; }
  .journey-copy { padding-top:8px; }
  .service-grid { gap:30px 16px; }
  .service h3 { font-size:21px; }
  .service p { font-size:14px; line-height:1.9; }
  .review-feature figcaption { padding-left:18px; }
  .faq summary { font-size:15px; line-height:1.8; }
  .contact .phone { font-size:clamp(26px,7.6vw,35px); }
  footer a { display:inline-flex; align-items:center; min-height:44px; }
  .mobile-cta a { min-height:46px; }
}
@media (max-width:380px) {
  .hero-copy { padding-left:5%; padding-right:5%; }
  .hero h1 { font-size:32px; }
  .hero .eyebrow { font-size:10px; }
  .brand b { font-size:20px; }
  .nav { gap:6px; }
  .sound { padding:6px; }
  .service-grid { grid-template-columns:1fr; }
  .service .photo { aspect-ratio:1.45; }
  .result-preview { grid-template-columns:1fr; }
  .result-preview img { width:100%; height:180px; }
}
@media (prefers-reduced-motion:reduce) {
  .control-await { opacity:1; }
  .button-petal { display:none; }
  .check-picked,.result-preview.is-updated { animation:none; }
}
