/* === Mobile responsive — Lemonade IT deck === */

/* -- Tablet (<=1024) -- */
@media(max-width:1024px){
  .slide{padding:40px 32px 40px}
  h1{font-size:56px}
  h2{font-size:36px;margin-bottom:16px}
  .title{padding:48px 32px;gap:28px}
  .title h1{font-size:56px}
  .title .tb-word{height:64px}
  .title .tb-mark{height:52px}
  .stat .big{font-size:48px}
  .grid3,.grid4,.adoptGrid{grid-template-columns:1fr 1fr}
  .pipeline{grid-template-columns:repeat(3,1fr)}
  .archWrap{grid-template-columns:1fr;gap:12px}
  .archArrow{transform:rotate(90deg);height:24px}
  .split{grid-template-columns:1fr;gap:24px}
  .hookwrap{grid-template-columns:1fr;gap:28px}
  .driftwrap{grid-template-columns:1fr;gap:20px}
  .benchWrap{grid-template-columns:1fr;gap:20px}
  .epGrid{grid-template-columns:1fr 1fr;gap:8px}
  .breakWrap{padding:0 24px}
  .breakWrap h2{font-size:44px}
  .sb{width:140px;padding:8px 6px}
  .whyGrid{grid-template-columns:1fr}
  .dim{grid-template-columns:120px 1fr 44px;gap:8px}
  .queryBar{padding:12px 16px}
  .qText{font-size:16px}
}

/* -- Phone (<=680) -- */
@media(max-width:680px){
  .slide{padding:24px 18px 80px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .slide::after{left:auto;right:18px;bottom:14px;font-size:11px}
  h1{font-size:36px;letter-spacing:-.03em}
  h2{font-size:26px;margin-bottom:12px}
  h3{font-size:17px}
  p{font-size:15px}
  .eyebrow{font-size:10px;letter-spacing:.16em;margin-bottom:10px}
  .title{padding:32px 20px;gap:20px}
  .title h1{font-size:36px}
  .title .tb-mark{height:44px}
  .title .tb-word{height:52px}
  .grid2,.grid3,.grid4,.split,.adoptGrid,.pipeline,
  .hookwrap,.driftwrap,.benchWrap,.whyGrid,.epGrid{
    grid-template-columns:1fr !important;gap:14px}
  .archWrap{grid-template-columns:1fr !important;gap:10px}
  .archArrow{transform:rotate(90deg);height:20px;font-size:22px}
  .archCol{padding:16px}
  .archItem,.archFeature{padding:10px 12px;font-size:13px}
  .card{padding:18px;gap:10px;border-radius:14px}
  .card h3{font-size:17px}
  .card p{font-size:13px}
  .stat .big{font-size:36px}
  .stat .lbl{font-size:12px}
  .breakWrap{padding:0 12px;gap:18px}
  .breakWrap h2{font-size:32px !important}
  .breakMark{width:48px}
  .breakWord{height:48px}
  .badge{font-size:11px;padding:10px 14px}
  .step{padding:14px 12px}
  .step:not(:last-child):after,.step:not(:last-child):before{display:none}
  .dim{grid-template-columns:1fr;gap:4px}
  .dim .dl{font-size:12px}
  .dim .dv{font-size:11px}
  .queryBar{flex-direction:column;gap:8px;padding:10px 14px}
  .whyCard{padding:18px}
  .adoptCol{padding:16px}
  .adoptCol h3{font-size:15px}
  .acLede{font-size:12px}
  .acList li{font-size:12px}
  .ep{padding:10px}
  .ep-path{font-size:10px}
  .ep-code{font-size:9px;padding:6px 8px}
  .sb{display:none}
  .shotFrame{border-radius:10px}
  .shotUrl{margin:0 8px;font-size:9px}
  .docCard{padding:20px;min-height:auto}
  .benchCard{padding:20px}
  .benchCard .delta{font-size:22px}
  .bar .lbl{width:60px;font-size:10px}
  .curveCard{padding:20px}
  .curve{height:180px}
  .slide .title-brand{gap:12px}
  .foundersProof{grid-template-columns:1fr !important;grid-template-rows:auto !important}
}

/* -- Gate mobile -- */
@media(max-width:680px){
  #gate{padding:24px}
  #gate img{height:36px}
  #gate h2{font-size:20px}
  #gate input{font-size:15px;padding:12px 16px}
  #gate button{font-size:14px;padding:12px 20px}
}

/* -- Nav mobile -- */
@media(max-width:680px){
  #nav{padding:8px 16px;gap:10px;bottom:16px}
  #nav button{min-width:44px;min-height:44px;font-size:20px;padding:0;border-radius:50%;background:var(--rule);display:flex;align-items:center;justify-content:center}
  #nav span{font-size:11px}
  #count{font-size:11px}
}