/* Phone layouts share the desktop content, with their own composition. */
@media screen and (max-width:760px){
  .website-header{min-height:65px;padding:10px 24px;gap:0}
  .website-header .brand{width:128px}
  .hero{grid-template-rows:auto 1fr}
  .hero-main{
    min-block-size:calc(100svh - 65px);
    min-block-size:calc(100dvh - 65px);
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto minmax(240px,1fr) auto auto;
    grid-template-areas:"headline" "intro" "product" "actions" "stores";
    gap:14px;
    padding:20px 24px 24px;
  }
  .hero-copy{display:contents}
  .hero-copy>.eyebrow{display:none}
  .hero-copy h1{grid-area:headline;font-size:46px;line-height:1.04;letter-spacing:-.055em;margin:0}
  .hero-copy>.lead{grid-area:intro;font-size:17px;line-height:1.5;margin:0;max-width:34ch}
  .hero-copy>.actions{grid-area:actions;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;margin:0;align-items:center}
  .hero-copy .button{width:100%;font-size:16px;min-height:50px}
  .hero-copy .text-link{font-size:16px;gap:10px}
  .hero-copy>.store-availability{grid-area:stores;margin:0}
  .hero-copy .store-availability>p{font-size:14px;line-height:1.5}
  .hero-copy .store-badges{margin-top:8px}
  .hero-device-product{grid-area:product;align-self:stretch;min-height:0;padding:0!important;background:transparent}
  .phone-demo{position:relative;display:flex;flex-direction:column;height:100%;max-width:560px;min-height:0}
  .demo-kicker{display:none}
  .demo-stage{flex:1 0 auto;min-height:0;height:auto;aspect-ratio:1}
  .demo-caption{flex:none;font-size:16px;line-height:1.5;min-height:24px;margin-top:8px;max-width:300px;width:100%;align-self:center}
  .demo-controls{position:absolute;top:0;right:0;margin:0;min-height:44px;z-index:6}
  .demo-control-row button{font-size:14px;min-height:44px}

  .work-section,.tiers-section{padding:24px}
  .work-section{padding-block:20px}
  .section-copy h2,.eyez-content h2,.tiers-heading h2{font-size:36px;line-height:1.1;letter-spacing:-.045em}
  .section-copy>.lead,.eyez-content>.lead{font-size:17px;line-height:1.55;margin-top:16px}
  .work-stage{padding-top:16px;gap:20px}
  .capture-top h3{font-size:22px}
  .capture-footer{gap:12px}
  .capture-footer .text-link{font-size:16px}
  .eyez-content{padding:24px}
  .eyez-content h2{margin:14px 0 18px}
  .search-example{margin-top:20px}
  .sample-label{margin-bottom:8px}
  .query-choices{gap:8px}
  .query-choices button{font-size:14px;min-height:46px}
  .sample-report{margin-top:18px;padding:18px 0}
  .report-totals{margin-top:18px}
  .export-line{margin-top:18px}
  .section-fineprint{margin-top:14px}

  .tiers-section>.section-label{display:none}
  .tiers-content{margin:auto 0;padding:0}
  .tiers-heading h2{margin-top:12px}
  .billing-control{margin-top:22px;gap:12px}
  .tier-picker{margin-top:22px}
  .tier-picker button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:11px 6px;font-size:16px}
  .tier-picker button>span{display:inline;font-size:14px;margin:0}
  /* All three panels occupy one grid cell. Hidden panels still size the cell
     to the longest plan, so switching tabs never moves the following content.
     It can grow with narrower screens and text zoom without clipping copy. */
  .tier-basics{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch}
  .tier-basics article,.tier-basics article+article{
    grid-area:1/1;display:flex;visibility:hidden;pointer-events:none;
    padding:20px 0;min-width:0;
  }
  .tier-basics article.is-active{visibility:visible;pointer-events:auto}
  .tier-kicker{min-height:30px;align-items:center;align-content:center}
  .tier-billing{min-height:3.2em}
  .tier-basics h3{margin:10px 0 12px}
  .tier-basics ul{line-height:1.5;gap:10px;margin:18px 0 0}
  .tiers-bottom{margin-top:18px;gap:16px}
  .tiers-bottom>.button{width:100%}

  .closing-section{padding:24px}
  .closing-content{padding:40px 0}
  .closing-content h2{font-size:40px;line-height:1.1;margin:18px 0 22px}
  .closing-content>.lead{font-size:18px;line-height:1.55}
  .closing-content .actions{gap:14px;margin-top:26px}
  .closing-content .button{width:100%}
  .closing-content .actions>.text-link{min-height:44px}
  .closing-content .store-availability{margin-top:22px}
  .closing-help{font-size:16px;gap:12px}
  .screen-footer{padding:28px 24px;gap:30px}
  .footer-columns nav a{font-size:16px;min-height:44px}
}
@media screen and (max-width:370px){
  .hero-main{padding-inline:20px;gap:12px}
  .hero-copy h1{font-size:42px}
  .hero-copy>.actions{gap:12px}
  .hero-copy .text-link{font-size:15px;gap:6px}
  .hero-copy .button{padding-inline:14px;gap:14px}
  .hero-copy .store-badges{gap:12px}
  .section-copy h2,.eyez-content h2,.tiers-heading h2{font-size:34px}
  .closing-content h2{font-size:38px}
}
@media screen and (min-width:600px) and (max-width:760px) and (max-height:500px){
  .hero-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto;grid-template-areas:"headline product" "intro product" "actions product" "stores product";column-gap:28px}
  .hero-copy h1{font-size:38px}
  .hero-copy>.actions{gap:12px}
  .hero-device-product{min-height:290px}
}