/* Landing page. Section rhythm, the WeChat phone mock-up, notes, gallery and the ribbon motif. */
#landing-view{overflow-x:clip}
.section{max-width:1240px;margin:0 auto;padding:128px 40px 0}
.section-head{max-width:640px}
.section-head.centered{margin-inline:auto;text-align:center}
.section-head h2{font-size:clamp(32px,4vw,46px);line-height:1.3;margin:10px 0 16px;text-wrap:balance}
.section-head>p,.section-head>div>p:not(.kicker){font-size:17px;line-height:1.9;color:var(--ink-soft);max-width:34em}
.section-head.centered>p{margin-inline:auto}
.kicker{display:inline-flex;align-items:center;gap:10px;font:500 16px/1.4 var(--display);color:var(--ribbon-deep);letter-spacing:.08em}
.kicker:before{content:"";width:26px;height:3px;border-radius:3px;background:var(--ribbon)}
.section-head.centered .kicker:after{content:"";width:26px;height:3px;border-radius:3px;background:var(--ribbon)}
.fine-print{font-size:13px;line-height:1.8;color:var(--muted)}
.section p,.closing p,.hero-lead{text-wrap:pretty}

/* Hero */
.hero{max-width:1240px;margin:0 auto;padding:40px 40px 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:32px;align-items:center}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;font:500 17px/1.4 var(--display);color:var(--ribbon-deep);letter-spacing:.06em;margin-bottom:22px}
.hero-kicker svg{width:26px;height:26px;color:var(--ribbon)}
.hero h1{font-size:clamp(44px,5.4vw,72px);line-height:1.24;letter-spacing:.01em;margin-bottom:26px}
.hero h1 em{position:relative;font-style:normal;white-space:nowrap}
.hero h1 em:after{content:"";position:absolute;left:-4%;right:-6%;bottom:-.06em;height:.34em;z-index:-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M4 15C40 8 80 6 120 9C150 11 176 15 196 12' stroke='%236FA6D3' stroke-width='7' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.hero-copy{position:relative;z-index:1}
.hero-lead{font-size:19px;line-height:1.85;color:var(--ink-soft);max-width:24em}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:34px}
.hero-facts{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:22px;font-size:14px;color:var(--muted)}
.hero-facts span+span:before{content:"·";margin:0 10px;color:var(--line-strong);font-weight:700}
.hero-stage{position:relative;height:640px;width:100%;max-width:600px;justify-self:end}
.hero-portrait{position:absolute;right:0;bottom:0;width:380px;height:560px}
.hero-portrait:before{content:"";position:absolute;inset:auto 0 0;height:470px;border-radius:190px 190px 32px 32px;background:radial-gradient(120% 80% at 50% 0%,#fbe9dc 0%,var(--apricot-wash) 60%,#f3d6c4 100%)}
.hero-portrait picture,.hero-portrait img{position:absolute;left:0;bottom:0;width:100%;height:auto}
.hero-portrait img{border-radius:0 0 32px 32px}
.hero-ribbon{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;z-index:0}
.hero-ribbon path,.ribbon-divider path{fill:none;stroke:var(--ribbon);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.hero-ribbon path{opacity:.6}
.phone-hero{position:absolute;left:0;bottom:6px;width:288px;z-index:2}
.motion-ok .hero-portrait img{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* WeChat phone mock-up. Sized in container units so it scales as one piece. */
.phone{position:relative;container-type:inline-size;aspect-ratio:300/622;width:300px;flex:none}
.phone-screen{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;background:#EDEDED;border:2.6cqw solid #2B221D;border-radius:13cqw;box-shadow:inset 0 0 0 .5cqw #4a3d35,0 40px 70px -34px #3a2a2273,0 16px 30px -18px #3a2a2240;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei","Segoe UI",sans-serif;color:#191919;-webkit-font-smoothing:antialiased}
.phone-tag{position:absolute;z-index:3;top:-3.4cqw;right:9cqw;padding:.8cqw 3cqw;font:500 max(11px,3.7cqw)/1.5 var(--display);color:#6f4b12;background:var(--butter);border-radius:1.2cqw;box-shadow:0 4px 10px -6px #3a2a2259;transform:rotate(3deg)}
.wx-status{position:relative;flex:none;height:10.6cqw;display:flex;align-items:center;justify-content:space-between;padding:1.8cqw 6.6cqw 0 8cqw;font:600 4.3cqw/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.wx-island{position:absolute;left:50%;top:2.2cqw;width:23cqw;height:6.4cqw;border-radius:4cqw;background:#111;transform:translateX(-50%)}
.wx-status-icons{display:flex;align-items:center;gap:1.4cqw}
.wx-status-icons svg{height:3.5cqw;width:auto}
.wx-status-icons svg:last-child{height:3.9cqw}
.wx-nav{flex:none;height:12cqw;display:grid;grid-template-columns:14cqw 1fr 14cqw;align-items:center;padding:0 3cqw;border-bottom:1px solid #00000010}
.wx-back svg{width:2.9cqw;height:4.9cqw}
.wx-title{text-align:center;font-size:max(12px,4.9cqw);font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-more{justify-self:end}.wx-more svg{width:5.4cqw;height:auto}
.wx-body{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;padding:3.4cqw 3.6cqw 5cqw}
.wx-body::-webkit-scrollbar{display:none}
.wx-thread{display:flex;flex-direction:column;gap:4.2cqw;transition:opacity .5s}
.is-fading .wx-thread{opacity:0}
.wx-time{align-self:center;margin:1cqw 0 .4cqw;font-size:max(10px,3.5cqw);line-height:1.4;color:#999}
.wx-row{display:flex;align-items:flex-start;gap:2.6cqw}
.wx-me{justify-content:flex-end}
.wx-avatar{width:11.2cqw;height:11.2cqw;border-radius:1.6cqw;flex:none;object-fit:cover;background:var(--apricot-wash)}
.wx-avatar-me{background:linear-gradient(160deg,#cfe1ef,#8fb9dc 45%,#5f93c3)}
.wx-bubble{position:relative;max-width:62cqw;padding:2.4cqw 3.2cqw;border-radius:1.6cqw;background:#fff;font-size:max(11.5px,4.6cqw);line-height:1.45;word-break:break-word}
.wx-bubble:before{content:"";position:absolute;top:3.7cqw;width:0;height:0;border-top:1.5cqw solid transparent;border-bottom:1.5cqw solid transparent}
.wx-her .wx-bubble:before{left:-1.6cqw;border-right:1.7cqw solid #fff}
.wx-me .wx-bubble{background:#95EC69}
.wx-me .wx-bubble:before{right:-1.6cqw;border-left:1.7cqw solid #95EC69}
.wx-photo{position:relative;display:block;width:34cqw;aspect-ratio:3/4;border-radius:1.6cqw;overflow:hidden;background:linear-gradient(180deg,#8e8fc0 0%,#c79bbd 28%,#f0a98f 55%,#f7c48f 70%,#ed9a72 100%)}
.wx-photo:before{content:"";position:absolute;left:50%;top:56%;width:11cqw;height:11cqw;border-radius:50%;background:radial-gradient(circle,#fff4d6 0%,#ffd9a0 45%,#ffd9a000 72%);transform:translate(-50%,-50%)}
.wx-photo i{position:absolute;left:0;right:0;bottom:0;height:34%;background:#463a4e;clip-path:polygon(0 52%,8% 52%,8% 30%,16% 30%,16% 44%,24% 44%,24% 14%,33% 14%,33% 40%,42% 40%,42% 26%,50% 26%,50% 50%,60% 50%,60% 6%,68% 6%,68% 36%,78% 36%,78% 22%,86% 22%,86% 48%,100% 48%,100% 100%,0 100%)}
.wx-input{flex:none;display:flex;align-items:center;gap:2.4cqw;padding:2.2cqw 3cqw 7.4cqw;background:#F7F7F7;border-top:1px solid #00000010;color:#191919}
.wx-input svg{width:7.4cqw;height:7.4cqw;flex:none}
.wx-field{flex:1;height:9cqw;border-radius:1.4cqw;background:#fff}
.wx-home{position:absolute;left:50%;bottom:1.8cqw;width:34cqw;height:1.2cqw;border-radius:1cqw;background:#111;transform:translateX(-50%)}
.is-new{animation:wx-in .26s cubic-bezier(.2,.8,.2,1)}
@keyframes wx-in{from{opacity:0;transform:translateY(1.6cqw) scale(.98)}to{opacity:1;transform:none}}

/* Chat scenes */
.chat-demo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:72px;align-items:center}
.chat-side{max-width:520px}
.chat-side .section-head{margin-bottom:34px}
.scene-tabs{display:flex;flex-wrap:wrap;gap:10px}
.scene-tabs [role=tab]{min-height:44px;padding:9px 20px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--card);color:var(--ink-soft);font-size:15px;font-weight:600;transition:background-color .2s,border-color .2s,color .2s}
.scene-tabs [role=tab]:hover{border-color:var(--apricot);color:var(--ink)}
.scene-tabs [aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.scene-tabs [aria-selected=true]:hover{color:var(--paper);border-color:var(--ink)}
.scene-caption{margin-top:30px;padding-left:18px;border-left:3px solid var(--apricot);font:500 23px/1.6 var(--display);color:var(--ink);min-height:2em}
.chat-side .fine-print{margin-top:18px}
.phone-section{width:clamp(270px,26vw,312px)}

/* Ribbon divider */
.ribbon-divider{max-width:1240px;margin:72px auto -40px;padding:0 40px}
.ribbon-divider svg{display:block;width:100%;height:auto;overflow:visible}
.ribbon-divider path{stroke-width:2.6;opacity:.75}
.motion-ok [data-draw] path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s cubic-bezier(.45,.05,.2,1)}
.motion-ok [data-draw].is-in path{stroke-dashoffset:0}

/* Proactive care */
.care-layout{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"timeline phone" "restraint phone";column-gap:64px;row-gap:28px;margin-top:44px;align-items:start}
.care-layout .phone{grid-area:phone;align-self:center}
.care-timeline{grid-area:timeline;list-style:none;margin:0;padding:0 0 0 28px;position:relative;display:grid;gap:14px}
.care-timeline:before{content:"";position:absolute;left:7px;top:18px;bottom:18px;border-left:2px dashed #b9d3e9}
.care-timeline li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 16px;padding:16px 20px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm)}
.care-timeline li:before{content:"";position:absolute;left:-27px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--paper);border:3px solid var(--ribbon)}
.care-timeline .said{font-size:15px;color:var(--ink-soft)}
.care-timeline .when{grid-row:span 2;align-self:center;justify-self:end;padding:4px 12px;border-radius:999px;background:var(--mist);color:var(--ribbon-deep);font-size:13px;font-weight:600;white-space:nowrap}
.care-timeline .her{font:500 20px/1.5 var(--display);color:var(--apricot-deep)}
.restraint{grid-area:restraint;padding:24px 26px;border-radius:22px;background:var(--apricot-soft);border:1px solid #f1dfd1}
.restraint h3{font:500 22px/1.4 var(--display);margin-bottom:12px}
.restraint ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.restraint li{position:relative;padding-left:26px;font-size:15px;line-height:1.75;color:var(--ink-soft)}
.restraint li:before{content:"";position:absolute;left:3px;top:.62em;width:9px;height:9px;border-radius:50%;border:2.5px solid var(--apricot);background:var(--card)}

/* Memory notes */
.memory-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.memory-promise{margin-top:28px;padding:18px 20px;border-radius:18px;background:var(--card);border:1px dashed var(--line-strong);font-size:15px;line-height:1.8;color:var(--ink-soft)}
.memory-promise strong{display:block;font:500 19px/1.5 var(--display);color:var(--ink);margin-bottom:2px}
.notes{list-style:none;margin:0;padding:24px 8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px}
.note{position:relative;padding:30px 20px 22px;border-radius:6px 6px 18px 6px;font:500 21px/1.5 var(--display);color:var(--ink);box-shadow:0 14px 24px -18px #3a2a2266,0 2px 4px #3a2a2210;transform:rotate(var(--tilt,0deg))}
.note:before{content:"";position:absolute;top:-9px;left:50%;width:64px;height:20px;margin-left:-32px;background:#ffffffa6;border:1px solid #3a2a2212;transform:rotate(-3deg)}
.note-tag{display:block;margin-bottom:6px;font:600 12px/1.4 var(--sans);letter-spacing:.06em;color:var(--muted)}
.note-a{background:var(--butter);--tilt:-2.2deg}
.note-b{background:var(--mist);--tilt:1.8deg;margin-top:26px}
.note-c{background:var(--apricot-wash);--tilt:1.4deg}
.note-d{background:var(--card);--tilt:-1.6deg;margin-top:26px}
.note-e{background:#EAF2E4;--tilt:-1deg;grid-column:1/-1;justify-self:center;width:min(100%,300px)}

/* A day with Kizuna */
.day-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none}
.gallery-arrows{display:flex;gap:10px;flex:none}
.round-button{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--card);color:var(--ink);font-size:18px;transition:background-color .2s,border-color .2s,opacity .2s}
.round-button:hover:not(:disabled){border-color:var(--apricot);background:#fff}
.round-button:disabled{opacity:.35}
.gallery{display:flex;gap:20px;list-style:none;margin:36px 0 0;padding:4px 0 22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.gallery::-webkit-scrollbar{display:none}
.gallery li{flex:0 0 300px;scroll-snap-align:start}
.gallery figure{margin:0}
.gallery img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:22px;background:var(--surface);box-shadow:var(--shadow-sm)}
.gallery figcaption{padding:16px 6px 0}
.gallery time{display:block;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--ribbon-deep)}
.gallery q{display:block;margin-top:4px;font:500 19px/1.55 var(--display);color:var(--ink);quotes:"「" "」"}
.day-note{margin-top:6px}
.twin{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:56px;align-items:center;margin-top:72px;padding:40px 48px 0;border-radius:32px;background:linear-gradient(160deg,var(--mist),#f3f7fb 60%,var(--paper));overflow:hidden}
.twin-art{position:relative;align-self:end}
.twin-art img{width:100%;height:auto;display:block}
.twin-copy{padding-bottom:40px}
.twin-copy h3{font:500 clamp(28px,3.4vw,40px)/1.3 var(--display);margin-bottom:14px}
.twin-copy p{font-size:17px;line-height:1.9;color:var(--ink-soft);max-width:26em}
.twin-faces{display:flex;align-items:center;gap:14px;margin-top:24px;font:500 17px var(--display);color:var(--muted)}
.twin-faces img{width:56px;height:56px;border-radius:50%;box-shadow:0 0 0 3px var(--card)}

/* Three steps */
.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;position:relative}
.steps li{position:relative;padding:28px 26px 30px;border-radius:24px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);text-align:center}
.steps img{height:200px;width:auto;margin:-8px auto 10px}
.step-no{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--apricot);color:#2B1B13;font-weight:700;font-size:14px;margin-bottom:10px}
.steps h3{font:500 24px/1.4 var(--display);margin-bottom:8px}
.steps p{font-size:15px;line-height:1.8;color:var(--ink-soft)}
.meet-action{display:flex;justify-content:center;margin-top:36px}

/* Promises */
.promises{list-style:none;margin:48px auto 0;padding:0;max-width:980px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.promises li{position:relative;padding:26px 28px 26px 76px;border-radius:22px;background:var(--card);border:1px solid var(--line)}
.promises li:before{content:"";position:absolute;left:24px;top:28px;width:34px;height:34px;border-radius:50%;background:var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='14 14 72 72' fill='none'%3E%3Cpath d='M22 78C30 70 45 58 46 42C47 28 42 20 34 21C25 22 21 34 26 49C30 62 37 71 45 71C53 71 63 61 66 53C68 46 61 42 56 46C50 51 50 65 58 70C66 75 77 69 84 59' stroke='%232F6A9A' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/20px}
.promises h3{font:500 21px/1.45 var(--display);margin-bottom:6px}
.promises p{font-size:15px;line-height:1.8;color:var(--ink-soft)}

/* FAQ */
.faq-section{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.faq-list details{border-bottom:1px dashed var(--line-strong)}
.faq-list details:first-child{border-top:1px dashed var(--line-strong)}
.faq-list summary{list-style:none;cursor:pointer;position:relative;padding:20px 44px 20px 0;font-size:17px;font-weight:600;line-height:1.6}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .25s}
.faq-list details[open] summary:after{transform:rotate(225deg);margin-top:-2px}
.faq-list summary:hover{color:var(--apricot-deep)}
.faq-list details p{padding:0 36px 22px 0;font-size:15px;line-height:1.95;color:var(--ink-soft)}
.faq-list a{color:var(--apricot-deep);text-decoration:underline;text-underline-offset:3px}

/* Closing and footer */
.closing{max-width:1160px;margin:128px auto 0;padding:56px 32px 60px;text-align:center;border-radius:36px;background:radial-gradient(120% 90% at 50% 0%,#fdf0e6 0%,var(--apricot-wash) 70%);position:relative;overflow:hidden}
.closing-art{width:150px;height:auto;margin:0 auto 8px}
.closing h2{font-size:clamp(30px,3.8vw,44px);line-height:1.45}
.closing p{margin:12px 0 28px;font-size:17px;color:var(--ink-soft)}
.site-footer{max-width:1240px;margin:0 auto;padding:44px 40px 40px;display:flex;align-items:center;flex-wrap:wrap;gap:16px 36px}
.site-footer nav{display:flex;gap:24px;font-size:14px;color:var(--ink-soft)}
.site-footer nav a:hover{color:var(--apricot-deep)}
.footer-copyright{margin-left:auto;font-size:13px;color:var(--muted)}

/* Reveal on scroll */
.motion-ok [data-reveal]:not(.is-in){opacity:0;transform:translateY(22px)}
.motion-ok [data-reveal]{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.motion-ok .note[data-reveal]:not(.is-in){transform:translateY(22px) rotate(var(--tilt,0deg))}
.motion-ok li[data-reveal]:nth-child(2){transition-delay:.08s}
.motion-ok li[data-reveal]:nth-child(3){transition-delay:.16s}
.motion-ok li[data-reveal]:nth-child(4){transition-delay:.24s}
.motion-ok li[data-reveal]:nth-child(5){transition-delay:.32s}

/* Tablet */
@media(max-width:1100px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,520px)}
  .hero-stage{height:580px}
  .hero-portrait{width:330px;height:500px}.hero-portrait:before{height:420px;border-radius:165px 165px 28px 28px}
  .phone-hero{width:262px}
  .care-layout{column-gap:40px}
}
@media(max-width:960px){
  .hero{grid-template-columns:1fr;gap:28px;padding-top:36px;text-align:center}
  .hero-copy{max-width:600px;margin:0 auto}
  .hero-lead{margin-inline:auto}
  .hero-actions,.hero-facts{justify-content:center}
  .hero-stage{justify-self:center;width:560px;max-width:100%;height:600px}
  .chat-demo{grid-template-columns:1fr;justify-items:center;gap:32px}
  .chat-side{max-width:600px;text-align:center}
  .chat-side .section-head{margin-inline:auto}
  .chat-side .section-head>p{margin-inline:auto}
  .scene-tabs{justify-content:center}
  .scene-caption{display:inline-block;border-left:0;padding-left:0;border-bottom:3px solid var(--apricot);padding-bottom:6px}
  .care-layout{grid-template-columns:1fr;grid-template-areas:"timeline" "phone" "restraint";justify-items:center}
  .care-timeline,.restraint{width:100%;max-width:600px}
  .memory-layout{grid-template-columns:1fr;gap:28px}
  .notes{max-width:600px;margin:0 auto}
  .twin{grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:32px;padding:32px 32px 0}
  .faq-section{grid-template-columns:1fr;gap:20px}
}

/* Phone */
@media(max-width:720px){
  .section{padding:84px 20px 0}
  .section-head>p,.section-head>div>p:not(.kicker){font-size:16px}
  .hero{padding:28px 20px 8px;gap:20px}
  .hero-kicker{font-size:15px;margin-bottom:14px}
  .hero h1{font-size:clamp(32px,9.6vw,44px);margin-bottom:16px}
  .hero-lead{font-size:16px;max-width:21em}
  .hero-actions{margin-top:24px;gap:10px}
  .hero-actions .button{flex:1 1 auto;min-width:0}
  .hero-actions .button-ghost{flex-basis:100%}
  .hero-facts{font-size:13px;margin-top:16px}
  .hero-facts span+span:before{margin:0 7px}
  .hero-stage{width:100%;max-width:400px;height:auto;aspect-ratio:350/450}
  .phone-hero{width:66%;bottom:0}
  .hero-portrait{width:54%;height:auto;aspect-ratio:380/560;right:-2%;bottom:auto;top:0}
  .hero-portrait:before{height:84%;border-radius:999px 999px 24px 24px}
  .hero-portrait img{border-radius:0 0 24px 24px}
  .chat-demo{margin-top:28px}
  .scene-tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:0 -20px;padding:2px 20px 6px;scrollbar-width:none}
  .scene-tabs::-webkit-scrollbar{display:none}
  .scene-tabs [role=tab]{flex:none;padding:8px 17px;font-size:14px}
  .scene-caption{font-size:19px;margin-top:20px}
  .phone-section{width:min(300px,82vw)}
  .ribbon-divider{margin:44px auto -24px;padding:0 20px}
  .care-layout{margin-top:28px;row-gap:24px}
  .care-timeline{padding-left:22px}
  .care-timeline:before{left:5px}
  .care-timeline li{grid-template-columns:1fr;padding:14px 16px}
  .care-timeline li:before{left:-23px}
  .care-timeline .when{grid-row:auto;justify-self:start;order:-1;font-size:12px;padding:2px 10px}
  .care-timeline .her{font-size:18px}
  .restraint{padding:20px}
  .notes{gap:18px 14px;padding:16px 4px}
  .note{padding:26px 14px 16px;font-size:18px}
  .note-b,.note-d{margin-top:18px}
  .day-head{display:block}
  .gallery-arrows{display:none}
  .gallery{margin:26px -20px 0;padding:4px 20px 18px;scroll-padding:0 20px;gap:14px}
  .gallery li{flex-basis:min(72vw,300px)}
  .gallery q{font-size:17px}
  .twin{grid-template-columns:1fr;gap:8px;margin-top:52px;padding:28px 22px 0;border-radius:26px;text-align:center}
  .twin-copy{padding-bottom:0}
  .twin-copy p{margin-inline:auto;font-size:16px}
  .twin-faces{justify-content:center}
  .twin-art{order:2;width:min(260px,74%);margin:12px auto 0}
  .steps{grid-template-columns:1fr;gap:14px;margin-top:32px}
  .steps li{display:grid;grid-template-columns:84px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:16px;align-items:center;padding:18px 18px 18px 14px;text-align:left}
  .steps img{grid-row:1/4;height:120px;margin:0 auto}
  .step-no{width:26px;height:26px;font-size:13px;margin-bottom:2px}
  .steps h3{font-size:21px;margin-bottom:2px}
  .steps p{font-size:14px}
  .promises{grid-template-columns:1fr;gap:12px;margin-top:32px}
  .promises li{padding:20px 20px 20px 66px}
  .promises li:before{left:18px;top:22px}
  .promises h3{font-size:19px}
  .faq-list summary{font-size:16px;padding-block:18px}
  .faq-list details p{padding-right:4px;font-size:14px}
  .closing{margin:84px 16px 0;padding:40px 20px 44px;border-radius:28px}
  .closing-art{width:120px}
  .closing p{font-size:16px}
  .site-footer{flex-direction:column;align-items:flex-start;gap:14px;padding:36px 22px 40px}
  .footer-copyright{margin-left:0}
}
@media(max-width:360px){
  .hero-actions .button{padding-inline:16px;font-size:15px}
  .hero-facts{font-size:12px}
  .hero-facts span+span:before{margin:0 5px}
  .note{font-size:17px}
  .scene-caption{font-size:18px}
}