/* Phone layouts: prioritize navigation, readable cards, and comfortable touch controls. */
@media (max-width:760px){
  html{scroll-padding-top:132px;-webkit-text-size-adjust:100%}
  body{overflow-wrap:break-word}
  .wrap{width:calc(100% - 36px)}
  .header{position:sticky;top:0;z-index:20;width:100%;height:auto;display:grid;grid-template-columns:1fr auto;gap:10px 16px;padding:12px 18px 10px;background:#fff;border-bottom:1px solid var(--line)}
  .header .logo{font-size:34px;line-height:1;min-height:44px;letter-spacing:-2px}
  .header>.button{min-height:44px;font-size:.875rem;padding:10px 14px;gap:10px}
  .header nav{grid-column:1/-1;grid-row:2;display:flex;justify-content:space-between;gap:6px}
  .header nav a{display:flex;justify-content:center;align-items:center;flex:1;min-height:44px;padding:8px 6px;border-radius:7px;background:#f3f7ff;color:#385886;font-size:.875rem}
  .hero{padding-top:32px;padding-bottom:36px;gap:30px}
  .hero-copy{max-width:none;min-width:0}
  .eyebrow{font-size:.75rem;line-height:1.5;letter-spacing:1.2px}
  .hero h1{font-size:clamp(3.2rem,13.5vw,4.4rem);letter-spacing:-.06em;line-height:1.02;margin:19px 0 20px}
  .headline-spark{width:32px;height:32px;right:8%;top:8px}
  .hero-copy>p{font-size:1rem;line-height:1.65;margin:0;color:#566680}
  .hero-copy>p br{display:none}
  .hero-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;margin:24px 0 16px}
  .hero-actions>.button{font-size:.9375rem;min-height:52px;gap:12px;padding:13px 15px}
  .starting{font-size:.875rem;line-height:1.5;color:#63738d}
  .hero-note{font-size:.8125rem;line-height:1.5;color:#63738d;align-items:flex-start}
  .hero-note svg{margin-top:2px}
  .hero-demo{width:100%;max-width:440px;transform:none;padding:16px 16px 20px;border-radius:16px}
  .demo-caption{font-size:.6875rem;letter-spacing:1px;padding-bottom:14px}
  .browser-card{transform:none;box-shadow:4px 5px 0 #cddaff}
  .browser-bar{padding:12px 10px;font-size:.625rem}
  .gift-preview{padding:23px 18px 20px;min-height:0}
  .mini-label{font-size:.6875rem;letter-spacing:1px;line-height:1.5}
  .preview-icon{margin:15px auto 9px;width:30px;height:30px}
  .gift-preview h2{font-size:2.375rem;letter-spacing:-1.5px}
  .gift-preview p{font-size:.875rem;max-width:255px;margin-bottom:18px;color:#63738d}
  .gift-preview .button{min-height:48px;width:100%;font-size:.875rem;justify-content:space-between;padding:12px 16px}
  .preview-footer{font-size:.625rem;letter-spacing:1px;margin-top:17px}
  .floating-tag,.try-note{display:none}
  .ticker{padding:14px 0}
  .ticker>div{animation:none;font-size:.75rem;gap:24px}
  .gifts-section,.pricing-section{padding-top:40px;padding-bottom:40px}
  .section-heading{margin-bottom:24px}
  .section-heading h2,.examples-section .section-heading h2,.faq-intro h2{font-size:clamp(1.75rem,7.5vw,2.125rem);letter-spacing:-1px;line-height:1.15}
  .section-heading>p,.examples-heading-note{font-size:1rem;line-height:1.6;color:#63738d}
  .section-heading>p br{display:none}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .category-card{min-width:0}
  .template-details{padding:17px}
  .template-title-row{min-height:0;margin-bottom:0;gap:12px;align-items:center}
  .template-title-row>div{min-width:0}
  .template-title-row .category-icon{width:40px;height:40px}
  .template-title-row .category-icon svg{width:22px;height:22px}
  .template-title-row h3{font-size:1.125rem;line-height:1.3;margin:0 0 5px}
  .template-title-row p{font-size:.875rem;line-height:1.5;color:#63738d}
  .template-title-row .template-button{flex-basis:40px;width:40px;height:40px;min-height:40px;padding:0;border-radius:9px}
  .custom-strip{display:grid;grid-template-columns:32px minmax(0,1fr);padding:22px 18px;gap:12px}
  .custom-strip h3{font-size:1.0625rem;line-height:1.45}
  .custom-strip p{font-size:.9375rem;line-height:1.6;color:#63738d}
  .custom-strip .text-button{grid-column:1/-1;min-height:48px;width:100%;justify-content:space-between;margin:4px 0 0;padding:12px 14px;border:1px solid #bad0f4;border-radius:7px;font-size:.9375rem;background:#fff}
  .examples-section{padding-bottom:40px}
  .examples-section .section-heading{gap:18px}
  .gallery-controls>span{font-size:.75rem;color:#63738d;letter-spacing:.8px}
  .gallery-controls button,.example-open{min-width:48px;min-height:48px}
  .example-track{width:calc(100% + 36px);margin-left:-18px;padding:6px 18px 20px;gap:16px;scroll-padding-inline:18px;scroll-snap-type:x proximity}
  .example-card{flex:0 0 min(80vw,310px)}
  .portrait-preview{height:auto;min-height:460px;padding:18px 20px;overflow:visible}
  .portrait-content{gap:14px;padding:20px 0}
  .portrait-kicker{font-size:.6875rem;letter-spacing:1px}
  .portrait-headline,.example-birthday .portrait-headline{font-size:2rem;line-height:1.08;letter-spacing:-1.5px}
  .portrait-note{font-size:.875rem;line-height:1.6;max-width:none;color:#63738d}
  .portrait-cta{font-size:.8125rem;min-height:44px;width:100%;padding:10px;gap:8px}
  .portrait-signoff{font-size:.625rem;line-height:1.5;letter-spacing:.7px}
  .example-chapters .example-chapters,.example-archive .example-archive,.example-scratch .example-scratch{font-size:.75rem;line-height:1.5}
  .example-countdown small{font-size:.625rem;letter-spacing:.4px}
  .example-caption{padding-top:14px;align-items:center}
  .example-caption h3{font-size:1.125rem}
  .example-caption p{font-size:.875rem;color:#63738d}
  .steps{gap:26px;margin-top:26px}
  .steps article{padding-left:47px;min-width:0}
  .steps h3{font-size:1.125rem;line-height:1.4}
  .steps p{font-size:1rem;line-height:1.65;color:#63738d}
  .steps p br{display:none}
  .price-card{padding:24px 21px}
  .plan-top{font-size:.6875rem;line-height:1.6;letter-spacing:1px;gap:12px}
  .price-card h3{font-size:1.625rem;line-height:1.2}
  .price-card>p,.price-card li{font-size:1rem;line-height:1.55}
  .price-card li{align-items:flex-start;gap:9px}
  .price-card li svg{margin-top:4px}
  .price{font-size:2.625rem;letter-spacing:-1.5px}
  .price>span,.price small{font-size:.875rem}
  .price-card .button{min-height:52px;font-size:.9375rem;padding:13px 15px;gap:12px}
  .price-note{font-size:.8125rem;line-height:1.7;color:#63738d}
  .faq-section{padding-top:40px;padding-bottom:40px;gap:18px}
  .faq-intro>p{font-size:1rem;color:#63738d;line-height:1.6}
  .faq-list summary{font-size:1.0625rem;min-height:64px;line-height:1.4;gap:18px}
  .faq-list details p{font-size:1rem;line-height:1.7;margin-right:0;color:#63738d}
  footer{display:grid;grid-template-columns:1fr auto;gap:16px;padding-bottom:max(28px,env(safe-area-inset-bottom));padding-top:25px}
  footer p{grid-row:2;grid-column:1/-1;text-align:left;width:auto;font-size:.875rem;margin:0;color:#63738d}
  footer>span{font-size:.8125rem;width:auto;color:#63738d}
  body:has(dialog[open]){overflow:hidden}
  dialog{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:none;max-height:90vh;max-height:90dvh;overflow-y:auto;overscroll-behavior:contain;border-radius:22px 22px 0 0;padding:28px 22px max(24px,env(safe-area-inset-bottom));border-bottom:0}
  .close-dialog{width:48px;height:48px;top:10px;right:10px;padding:8px;background:#f0f5ff;border-radius:50%;color:#506584;z-index:1}
  dialog>.eyebrow{min-height:38px;padding:0 42px;font-size:.6875rem;line-height:1.5}
  dialog h2{font-size:1.875rem;line-height:1.2}
  dialog>p{font-size:1rem;color:#63738d}
  .dialog-icon{margin-top:18px}
  .dialog-bottom>.button,.experience button{min-height:48px;font-size:1rem}
  .dialog-note{font-size:.8125rem!important;line-height:1.6}
  .brief{font-size:1rem;min-height:140px;padding:14px;line-height:1.6}
  .experience{font-size:1rem;padding:22px 16px}
}
@media(max-width:540px){
  .category-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .template-thumbnail{aspect-ratio:1.9}
  .template-thumbnail img{object-fit:cover}
}
@media(max-width:359px){
  .hero-actions{grid-template-columns:1fr;gap:12px}
  .starting{display:flex;gap:5px;justify-content:center}
  .starting br{display:none}
  .headline-spark{width:26px;height:26px;right:0}
  .header{gap:8px}
  .header>.button{padding:10px;font-size:.8125rem}
  .example-card{flex-basis:85vw}
}
@media(hover:none){
  .button:hover,.category-card:hover,.portrait-preview:hover{transform:none;box-shadow:none}
  .category-card:hover .template-thumbnail img{transform:none}
  button,a,summary{touch-action:manipulation}
}