/* Phones. The pages are written for a desktop; on a phone each one does one job (the app page gets the beta invite, the desk page shows the video and
   the price, the carriers page picks a door) and the rest is folded behind a tap. Every rule that changes how a page looks sits inside the phone query
   below (640px and narrower), so desktop and tablet are exactly as they were. The only rules outside it hide the phone-only parts again above 640px.
   Hero padding, h2 sizes and a few buttons are inline style="" attributes on the pages, so some phone rules use !important to beat them. */

@media (min-width:641px){
  .m-only,.m-toggle{display:none!important;}
  .m-fold{display:contents;} /* the wrapper draws nothing: its children lay out as if it were not there */
}

@media (max-width:640px){
  /* ---- the pieces every page uses ---- */
  .m-only{display:block;}
  .m-hide{display:none!important;}
  html.js .m-fold:not(.is-open){display:none!important;}
  .m-toggle{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin:16px 0 0;padding:0 14px;box-sizing:border-box;
    font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:14px;letter-spacing:.05em;text-transform:uppercase;
    color:var(--color-accent);background:transparent;border:1px solid color-mix(in srgb,var(--color-accent) 55%,transparent);border-radius:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .m-toggle:active{background:color-mix(in srgb,var(--color-accent) 16%,transparent);}
  .m-toggle[aria-expanded="true"]{background:color-mix(in srgb,var(--color-accent) 10%,transparent);}
  .m-toggle:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
  .m-fold.is-open{margin-top:16px;}

  /* ---- reading size and touch size ---- */
  body{font-size:16px;}
  .input,select.input,textarea.input{font-size:16px!important;min-height:44px;} /* under 16px, iPhone Safari zooms the page when a field is tapped */
  textarea.input{min-height:96px;}
  .btn{min-height:44px;}
  .field label{font-size:12px;}
  .form-note,.fine{font-size:13px;}

  /* ---- the top: the doors strip is the navigation; the header is the brand and the one button ---- */
  .nav-links{display:none!important;}
  .nav{flex-wrap:nowrap!important;gap:12px!important;padding:8px 16px!important;}
  .nav-brand{margin:0 auto 0 0!important;font-size:18px!important;}
  .site-header .btn{min-height:44px;padding:0 14px;font-size:14px;white-space:nowrap;}

  /* ---- every section: less air ---- */
  section.wrap,section > .wrap,main.wrap{padding:36px 20px 40px!important;}
  .hero > .wrap{padding:28px 20px 30px!important;}
  .wedge > .wrap{padding:22px 20px!important;}
  .wrap > h2.card-h{font-size:26px!important;line-height:1.1;}
  .wrap > hr.hr,.wrap > hr{margin-bottom:18px!important;}
  .m-split{gap:22px!important;}
  .footer-inner{padding:28px 20px!important;}

  /* ---- hero ---- */
  .hero h1{font-size:38px!important;line-height:1.05!important;}
  .hero .lede{font-size:16px!important;line-height:1.55!important;margin-top:16px!important;}
  .hero-ctas{margin-top:20px!important;gap:10px!important;}
  .hero-ctas .btn{flex:1 1 100%;min-height:48px;padding:0 16px!important;font-size:15px!important;}
  .hero-grid .vslot{max-width:190px;margin:22px auto 0;}
  .hero .fine{margin-top:14px!important;}

  /* the app page's hero: the invite form is the first thing under the headline */
  .m-beta{margin-top:20px;}
  .m-beta label{display:block;margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,#eef4fa 78%,transparent);}
  .m-beta .input{margin:0 0 10px;background:rgba(10,12,15,.78);}
  .m-beta .btn{width:100%;min-height:48px;font-size:16px;}

  /* ---- founder blocks: a small photo, the statement behind a tap ---- */
  .founder{grid-template-columns:1fr!important;gap:14px!important;margin-bottom:20px!important;}
  .founder-photo{max-width:96px!important;}
  .founder-name{font-size:24px;}
  .founder-role{margin:4px 0 12px;}

  /* ---- the app page: the clips are one swipeable row, still posters until tapped ---- */
  .leak-intro{font-size:17px;margin-bottom:18px;}
  .leak-close{font-size:17px;margin-top:22px;}
  .screen-grid{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:20px;-webkit-overflow-scrolling:touch;
    margin:0 -20px;padding:0 20px 10px;scrollbar-width:none;}
  .screen-grid::-webkit-scrollbar{display:none;}
  .screen-grid > .screen-card{flex:0 0 78%;min-width:0;scroll-snap-align:start;display:block!important;}
  .screen-grid .vslot{max-width:none;margin:0;}
  .screen-card:not(.soon) .screen-body p,.screen-card.feature .auto-main p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
  .screen-card.feature .vslot{max-width:none!important;margin:0!important;}
  .screen-card.soon .screen-body{display:flex!important;flex-direction:column;}
  .screen-card.soon .screen-body > *{grid-column:auto!important;grid-row:auto!important;}
  .screen-card.soon .soon-art{width:calc(100% + 40px)!important;margin:-20px -20px 0!important;border-right:0!important;}

  /* pricing cards: closer together */
  .price-grid{gap:12px!important;}
  .price-card{padding:18px!important;}
  .price-card .price{font-size:34px;margin-top:10px;}
  .price-card ul{margin-top:12px;gap:8px;}
  .price-card .price-cta{margin-top:16px;}
  /* the app page's three cards: the trial's two bullets repeat its title, and the Read link is one tap away in the doors strip */
  .price-grid > .price-card.no-corner:first-child ul{display:none;}
  .price-grid > .price-card.no-corner:last-child li:nth-child(2){display:none;}

  /* ---- the desk page: the monitor drawing becomes a plain poster card with a big play button ---- */
  .dmon{padding:0;background:none;border-radius:0;box-shadow:none;}
  .dmon::after,.dslot-stand,.dslot-base{display:none;}
  .dmon-screen{aspect-ratio:auto;height:220px;border-radius:0;border:1px solid color-mix(in srgb,var(--color-accent) 45%,var(--color-divider));}
  .dslot-open svg{left:50%;top:50%;right:auto;bottom:auto;width:64px;height:64px;padding:16px;transform:translate(-50%,-50%);}
  .m-share{margin-top:10px;}
  .inc-grid{gap:0!important;}
  .inc h3{font-size:17px;}

  /* ---- the carriers page: the four steps swipe like the app clips ---- */
  .how-grid{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:20px;-webkit-overflow-scrolling:touch;
    margin:0 -20px;padding:0 20px 10px;scrollbar-width:none;}
  .how-grid::-webkit-scrollbar{display:none;}
  .how-grid > *{flex:0 0 78%;min-width:0;scroll-snap-align:start;}
  .lede.hero-in + .paths{margin-top:20px;}

  /* ---- forms ---- */
  .intake-form{padding:18px!important;}
  .field{margin-bottom:14px;}
}