/* Phone layouts share the desktop content, with their own composition. */
.screen.hero{grid-template-rows:1fr;min-block-size:calc(var(--landing-screen-height,100lvh) - var(--public-header-height,69px))}
.hero-copy>.store-availability{margin-top:28px}
.screen{min-block-size:var(--landing-screen-height,100lvh)}
.hero-account-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:8px 14px;margin-top:26px;inline-size:max-content;max-inline-size:100%}
.hero-account-links>.button{justify-content:center;min-width:0;min-height:50px;padding:13px 12px;font-size:16px;font-weight:600;text-decoration:none}
.hero-signup-note{grid-column:1;align-self:center;margin:0;font-size:16px;font-weight:500;line-height:1.5;color:var(--muted)}
.hero-verification-link{grid-column:2;display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:4px 0;font-size:14px;font-weight:500;line-height:1.4;text-align:center;color:var(--green);text-decoration:underline;text-underline-offset:3px}
.hero-verification-link:hover{color:#185737}
.hero-login{color:var(--green);background:transparent;border-color:#87a28e}
.hero-login:hover{background:#e8efe4;border-color:var(--green)}
.closing-section{display:flex;flex-direction:column;padding:0;background:#e7e7df;isolation:isolate}
.closing-visual{position:relative;isolation:isolate;flex:1;display:flex;flex-direction:column;min-width:0;padding-bottom:max(320px,calc(var(--landing-screen-height,100lvh)*.42))}
.closing-overlay{position:relative;z-index:1;padding:28px clamp(24px,4.6vw,88px) 20px;background:rgb(31 107 69 / 91%)}
.closing-overlay .section-label,.closing-overlay .closing-note{color:var(--cream)}
.closing-overlay>.closing-content{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:clamp(40px,8vw,150px);margin:0;padding:24px 0 0;min-width:0}
.closing-content>:not(.closing-trust){grid-column:1}
.closing-content h2{font-size:clamp(40px,4vw,68px);margin:0 0 18px}
.closing-content>.lead{color:var(--cream)}
.closing-content .actions{margin-top:24px}
.closing-photo{position:absolute;inset:0;z-index:0;overflow:hidden;margin:0}
.closing-photo>img{position:absolute;bottom:0;left:0;width:100%;height:auto;min-height:400px;object-fit:cover;object-position:center bottom}
.closing-content>.closing-note{margin-top:24px}
.closing-trust{grid-column:2;grid-row:1/5;align-self:center;max-width:600px;min-width:0;margin:0;color:var(--cream)}
.closing-contact{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin:0;min-block-size:76px;padding:14px clamp(24px,4.6vw,88px);border-top:1px solid #b7d1b487;background:#174c32;color:var(--cream)}
.closing-contact>p{font-size:16px;line-height:1.6}
.closing-contact>.closing-help{align-self:auto;min-height:44px;font-size:16px;font-weight:600;color:var(--cream)}
@media screen and (max-width:760px){
  .website-header{min-height:65px;padding:10px 24px;gap:0}
  .website-header .brand{width:128px}
  .hero-main{
    min-block-size:calc(100svh - 65px);
    min-block-size:calc(var(--landing-screen-height,100lvh) - 65px);
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(240px,1fr) auto;
    grid-template-areas:"headline" "intro" "accounts" "product" "stores";
    gap:12px;
    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>.hero-account-links{grid-area:accounts;justify-self:start;margin:2px 0 0;gap:8px 12px}
  .hero-copy>.store-availability{grid-area:stores;margin:20px 0 0}
  .hero-copy .store-availability>p{font-size:14px;line-height:1.5}
  .hero-copy .store-badges{margin-top:8px}
  .hero-copy .store-platforms{column-gap:12px;max-width:calc(100vw - 140px)}
  .hero-copy .store-platform{gap:8px}
  .hero-copy .store-platform>img{width:32px;height:32px}
  .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:0;max-width:300px;width:100%;align-self:center}
  .demo-progress{display:block;flex:none;width:120px;max-width:45%;height:2px;margin:8px auto 0;border-radius:2px;overflow:hidden;background:#b8cbb9}
  .demo-progress>span{display:block;width:100%;height:100%;background:#1f6b45;transform:scaleX(1);transform-origin:left center}
  .demo-controls{position:static;margin:4px auto 0;min-height:44px;z-index:6}
  .demo-control-row{justify-content:center}
  .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}
  .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;flex-direction:column;align-items:center;justify-content:center;gap:3px;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-visual{padding-bottom:320px}
  .closing-photo>img{object-position:62% bottom}
  .closing-overlay{padding:24px}
  .closing-overlay>.closing-content{grid-template-columns:minmax(0,1fr);padding:24px 0 0}
  .closing-trust{grid-column:1;grid-row:auto;margin-top:26px}
  .closing-content h2{font-size:40px;line-height:1.1;margin:0 0 18px}
  .closing-content>.lead{font-size:18px;line-height:1.55}
  .closing-content .actions{flex-direction:row;align-items:center;gap:10px 24px;margin-top:24px}
  .closing-content .button{width:auto;justify-content:center;min-height:48px;padding:12px 18px}
  .closing-content .actions>.text-link{min-height:44px}
  .closing-content>.closing-note{font-size:16px;margin-top:22px}
  .closing-contact>p{font-size:15px}
  .closing-contact>.closing-help{font-size:16px}
  .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 .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" "accounts product" "stores product";column-gap:28px}
  .hero-copy h1{font-size:38px}
  .hero-device-product{min-height:290px}
}