/* Phone layout: keep the invitation and its actions comfortable at thumb reach. */
.mobile-dock{display:none}
@media(max-width:760px){
  html{scroll-padding-bottom:100px}
  body{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  button,a{touch-action:manipulation}
  .header{height:72px}
  .hero{padding-top:30px;overflow:visible}
  .hero .eyebrow{font-size:9px;margin-bottom:18px;letter-spacing:.9px}
  .hero h1{font-size:clamp(38px,10.5vw,60px);letter-spacing:-2.5px;margin-bottom:18px}
  .hero .lead{font-size:16px;line-height:1.6;margin-bottom:22px}
  .hero-actions{gap:20px}
  .hero-actions .button{min-height:52px;font-size:15px;padding:15px 22px}
  .tabletop{width:100%;height:clamp(266px,73vw,330px);max-width:420px;margin:24px auto 8px;transform:none;perspective:none}
  .birthday-card{width:clamp(152px,43vw,188px);height:clamp(218px,61.5vw,269px);left:24%;top:8px;padding:15px;border-radius:12px}
  .card-top,.card-bottom{font-size:16px;line-height:1}
  .card-top span,.card-bottom span{font-size:21px}
  .card-bottom{position:absolute;left:15px;right:15px;bottom:15px}
  .card-center{position:absolute;inset:42px 10px;height:auto;justify-content:center}
  .card-center>span{font-size:9px;letter-spacing:4px}
  .card-center strong{font-size:clamp(70px,21vw,91px);letter-spacing:-8px;line-height:1.2;margin-left:-4px}
  .card-center small{font-size:6px;letter-spacing:.7px;white-space:nowrap;margin-top:7px}
  .back-card{width:clamp(150px,42vw,183px);height:clamp(214px,60vw,261px);top:22px;left:13%;padding:22px 8px;border-width:7px;border-radius:12px}
  .back-card>span{font-size:7px;letter-spacing:2.5px}
  .back-star{font-size:105px;line-height:1.5}
  .hero-die{width:65px;height:65px;top:auto;bottom:24px;left:14%}
  .hero-die .die-front{border-radius:11px;padding:11px;gap:5px}
  .hero-die .die-top{width:62px;height:23px;top:-14px;left:9px;border-radius:9px 7px 0 0}
  .hero-die .die-side{width:19px;height:61px;top:-5px;right:-16px;border-radius:0 9px 9px 0}
  .cocktail{width:103px;height:144px;right:0;top:62px}
  .round-sticker{width:82px;height:82px;font-size:7px;right:0;top:auto;bottom:9px}
  .round-sticker span{font-size:8px}
  .card-shadow{width:225px;height:25px;top:auto;bottom:30px;left:18%;filter:blur(12px)}
  .orbit{width:100%;height:100%;inset:0}
  .scene-caption{display:none}
  .hero-bottom{padding-bottom:18px;min-height:46px;align-self:stretch;gap:16px}
  .hero-bottom>span{font-size:8px;max-width:180px;line-height:1.6}
  .hero-bottom a{min-height:44px;font-size:12px}
  .plan-section{padding-top:54px}
  .plan-row{grid-template-columns:24px minmax(0,1fr) 50px;column-gap:10px;row-gap:8px}
  .plan-row p{font-size:15px;line-height:1.65;grid-column:2/-1;padding-right:0}
  .plan-row p br{display:none}
  .row-art{grid-row:1;grid-column:3;width:46px;height:46px;align-self:center}
  .cards-mini{transform:scale(.5);transform-origin:0 0}
  .glass-mini{height:42px}
  .star-mini{font-size:50px;transform:none}
  .little-star{font-size:60px;top:65px}
  .roll-inner p:last-child{font-size:15px;line-height:1.65;min-height:50px;max-width:none}
  .roll-button{width:100%;justify-content:center;gap:24px;margin-top:20px;padding:17px;background:#ffffff26;border:1px solid #33234430;border-radius:18px;font-size:16px;min-height:98px}
  .details-intro>p:last-child,.details-grid p{font-size:15px;line-height:1.65}
  .detail-label{font-size:11px}
  .bring{padding:23px 20px;gap:14px}
  .bring p{font-size:14px;line-height:1.65}
  .bring-star{font-size:34px}
  .final-inner p:not(.eyebrow){font-size:15px;line-height:1.65}
  .final-inner p br{display:none}
  .final-inner .button{width:100%;max-width:360px;min-height:58px}
  .footer>a{min-height:44px;display:inline-flex;align-items:center}
  .footer>span{font-size:9px;line-height:1.6}
  .mobile-dock:not([hidden]){display:flex;position:fixed;inset:auto 0 0;z-index:10;align-items:center;gap:16px;padding:12px max(20px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -4px 24px #3323440d}
  .mobile-dock>a{font-size:14px;white-space:nowrap;display:flex;align-items:center;min-height:48px;padding-inline:4px}
  .mobile-dock .button{flex:1;min-height:50px;padding:14px 20px;gap:12px;font-size:15px}
  body.modal-open .mobile-dock{display:none}
  dialog{width:100%;max-width:100%;margin:0;position:fixed;inset:auto 0 var(--keyboard-offset,0px);max-height:calc(var(--visual-viewport-height,100dvh) - 12px);border-radius:24px 24px 0 0;padding:27px 24px max(24px,env(safe-area-inset-bottom,0px));overscroll-behavior:contain;scroll-padding-block:20px;-webkit-overflow-scrolling:touch}
  dialog .dialog-star{font-size:35px}
  dialog .dialog-star+.eyebrow{margin-top:12px;font-size:9px}
  dialog>p:not(.eyebrow){font-size:15px;line-height:1.55;margin-bottom:20px}
  .dialog-close{width:48px;height:48px;top:10px;right:12px;border-radius:50%;background:var(--paper)}
  label{font-size:14px;margin-top:16px}
  label span{font-size:12px}
  input,textarea{font-size:16px;min-height:52px;padding:14px;scroll-margin-block:20px}
  textarea{line-height:1.6}
  form .button,#reply-panel .button{font-size:16px;min-height:56px;margin-top:22px}
  .text-button{min-height:48px;font-size:15px}
  .copy-status{font-size:14px;line-height:1.55}
  .privacy-note{font-size:12px}
}
@media(max-width:370px){
  .hero h1{font-size:clamp(34px,10.5vw,39px);letter-spacing:-2px}
  .hand-note{display:none}
  .tabletop{height:260px;margin-top:22px}
  .birthday-card{left:22%}
  .cocktail{width:85px;right:4px}
  .round-sticker{width:72px;height:72px;font-size:6px}
  .hero-bottom>span{max-width:148px}
  .hero-bottom a{font-size:11px}
  .mobile-dock:not([hidden]){padding-inline:16px;gap:12px}
  .mobile-dock>a{font-size:13px}
  dialog{padding-inline:20px}
}
@media(prefers-reduced-motion:reduce){
  .tabletop,.tabletop *{animation:none!important}
}