/* Phone layout for the storefront. Desktop is unchanged: everything below is inside
   the 700px query except the three elements that exist only for phones. */
.hero-stats,.buybar{display:none}

@media (max-width:700px){
  /* Header: brand and buy button on one row, the four links on the next. */
  header.shell{flex-wrap:wrap;justify-content:flex-start;gap:8px 16px;min-height:0;padding-top:10px;padding-bottom:10px}
  header.shell .brand{order:0;flex:1 1 auto;font-size:26px}
  header.shell nav{display:contents}
  header.shell nav .button.small{order:1;min-height:40px;padding:8px 14px;font-size:14px;border-radius:12px}
  header.shell::after{content:"";order:2;flex-basis:100%;height:0}
  header.shell nav>a:not(.button){order:3;display:inline;font-size:14px}

  /* Hero: the proof sits under the headline instead of 1,500px further down. */
  .hero{padding-top:18px;gap:6px}
  .hero h1{font-size:38px;letter-spacing:-.02em;margin-bottom:16px}
  .hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:0 0 18px}
  .hero-stats li{background:var(--lavender);border-radius:14px;padding:10px 6px 9px;font-size:13px;line-height:1.25;text-align:center}
  .hero-stats li:last-child{background:var(--yellow)}
  .hero-stats b{display:block;font:700 21px/1.1 Fredoka,'DM Sans',sans-serif;letter-spacing:-.01em}
  .hero .lead{font-size:17px;margin-bottom:0}
  .hero .lead+p{display:none}
  .hero .actions{margin:18px 0 14px}
  .hero .actions .button{flex:1 1 100%}
  .hero ul.ticks li{font-size:14px}
  .product-figure img{max-height:230px;width:auto;margin:0 auto}
  .product-figure figcaption{font-size:12px;margin-top:8px}

  .proof{padding:22px 20px;gap:12px}
  .proof strong{font-size:30px}
  .section{padding:40px 0}
  .section-title{margin-bottom:20px}
  .section-title h2,h2{font-size:30px}

  /* Curriculum: swipe through the four cards instead of scrolling past four screens. */
  .curriculum{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;
    scroll-snap-type:x mandatory;gap:12px;margin-inline:-18px;padding:0 18px 12px;scroll-padding-inline:18px;overscroll-behavior-x:contain}
  .curriculum article{scroll-snap-align:start}

  .purchase{padding:24px 20px}
  .price{font-size:56px}

  /* A buy button always in reach; it steps aside when a real one is on screen. */
  .buybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--ink);color:#fff9e9;font-size:15px;
    box-shadow:0 -6px 20px rgb(41 32 64 / .18);transition:transform .2s ease}
  .buybar b{font:700 20px Fredoka,'DM Sans',sans-serif;color:var(--yellow);margin-right:4px}
  .buybar .button.small{min-height:42px;padding:8px 18px}
  .buybar--away{transform:translateY(110%)}
  body:has(.buybar){padding-bottom:72px}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){.buybar{transition:none}}

/* Every page: thumb-sized targets and forms that fill the screen. */
.phone-only{display:none}
@media (max-width:700px){
  .phone-only{display:inline-flex}
  a.phone-only{width:100%;margin:6px 0 18px}
  header.shell{column-gap:14px}
  header.shell nav>a:not(.button){padding:11px 0;min-width:44px}
  footer.shell{padding-top:22px}
  footer.shell div{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;width:100%}
  footer.shell div a{display:block;padding:11px 0;font-size:15px}
  details{padding:0}
  details summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:12px 0;list-style:none}
  details summary::-webkit-details-marker{display:none}
  details summary::after{content:"+";font:700 24px/1 Fredoka,'DM Sans',sans-serif;color:var(--orange);flex:none}
  details[open] summary::after{content:"\2212"}
  details p{margin-top:0;padding-bottom:14px}
  main a:not(.button):not(:is(p,li,td,th,figcaption,.note,h1,h2,h3,label) a){display:inline-block;padding-block:10px}
  input[type=checkbox]{width:22px;height:22px;flex:none}
  label.check{display:block;position:relative;padding:6px 0 6px 34px}
  label.check input[type=checkbox]{position:absolute;left:0;top:6px;margin:0}
  input:not([type=checkbox]):not([type=hidden]),select,textarea{min-height:48px;font-size:16px}
  form button,form .button{width:100%;min-height:50px}
  .formbox,.document{margin-top:20px}
  .document h1,.formbox h1{font-size:34px}
  .metrics,.metrics.four{grid-template-columns:1fr 1fr;gap:10px}
  .metrics>div{padding:14px}
  .metrics strong{font-size:26px}
  .helpgrid article{padding:20px}
  main small{font-size:12px}
}