/* ==========================================================
   Showfer mobile layout. Phones only: every rule
   is inside this media query, so desktop and tablet are untouched.
   ========================================================== */
.m-menu-btn,.m-sheet,.m-sticky{display:none}

@media (max-width:640px){

  /* ---------- Header: logo · Log in · Sign up · menu ---------- */
  .nav .wrap{height:56px;gap:8px}
  .brand img{height:28px;width:auto}
  .brand span{font-size:20px}
  .nav-right{gap:2px}
  .nav-right .theme-toggle,.nav-right .lang-select{display:none}
  .nav-right a:not(.btn-black){display:inline-flex !important;padding:8px 10px;font-size:14px;font-weight:600}
  .nav-right .btn-black{padding:8px 14px !important;font-size:14px;border-radius:999px}
  .m-menu-btn{display:grid;place-items:center;width:40px;height:40px;margin-left:2px;border:0;border-radius:999px;background:transparent;color:inherit;cursor:pointer}
  .m-menu-btn svg{width:22px;height:22px}

  /* full-screen menu sheet */
  .m-sheet{display:flex;flex-direction:column;position:fixed;inset:0;z-index:100;background:var(--bg,#fff);color:var(--ink,#0B1533);padding:calc(env(safe-area-inset-top,0px) + 12px) 20px calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateY(-100%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.9,.3,1),visibility 0s .3s}
  .m-sheet.open{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.9,.3,1)}
  .m-sheet-top{display:flex;justify-content:space-between;align-items:center;height:44px}
  .m-sheet-top b{font-size:20px;letter-spacing:-.03em}
  .m-sheet-close{width:40px;height:40px;border:0;border-radius:999px;background:var(--gray,#F2F5FB);color:inherit;font-size:22px;line-height:1;cursor:pointer}
  .m-sheet nav{display:grid;margin-top:16px}
  .m-sheet nav a{display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-size:24px;font-weight:700;letter-spacing:-.02em;text-decoration:none;color:inherit;border-bottom:1px solid var(--line,#E0E6F1)}
  .m-sheet nav a::after{content:"\2192";font-weight:400;opacity:.5}
  .m-sheet-actions{margin-top:auto;display:grid;gap:10px}
  .m-sheet-actions a{display:flex;justify-content:center;padding:15px;border-radius:12px;font-weight:700;text-decoration:none}
  .m-sheet-actions .primary{background:var(--blue,#2563FF);color:#fff}
  .m-sheet-actions .secondary{background:var(--gray,#F2F5FB);color:inherit}
  .m-sheet-theme{display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-size:15px;font-weight:600;border:0;background:none;color:inherit;width:100%;cursor:pointer}
  .m-sheet-langs{display:flex;gap:8px;padding:14px 0;flex-wrap:wrap}
  .m-sheet-langs .lang-opt{border:1px solid var(--line,#E0E6F1);background:none;color:inherit;font:600 13px var(--f, inherit);padding:7px 14px;border-radius:999px;cursor:pointer}
  .m-sheet-langs .lang-opt.active{background:var(--ink,#0B1533);color:var(--bg,#fff);border-color:var(--ink,#0B1533)}
  body.m-lock{overflow:hidden}

  /* ---------- Hero: headline + form first, globe as a compact card ---------- */
  .hero{padding-block:20px 28px}
  .hero-grid{gap:24px}
  .tabs{margin-bottom:18px}
  .tabs button{padding:10px 2px;margin-right:18px;font-size:15px}
  .hero h1{font-size:36px;line-height:1.05;letter-spacing:-.035em}
  .hero .lede{font-size:16px;margin-top:10px}
  .form{margin-top:20px;gap:8px}
  .field input,.field select{padding:13px 12px 13px 40px;font-size:16px}
  .form-actions{gap:14px;margin-top:6px}
  .form-actions .btn{padding:13px 20px}
  .map-card{height:300px !important;aspect-ratio:auto !important;border-radius:14px}
  .map-card .legend,.map-card .hint{display:none}
  .map-card .online{top:10px;left:10px;font-size:12px;padding:6px 10px}
  .map-card .trip{left:10px;right:10px;top:auto;bottom:10px;width:auto;padding:10px 12px;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px}
  .map-card .trip .k{grid-column:2;grid-row:1 / span 2;flex-direction:column;align-items:flex-end;gap:2px}
  .map-card .trip .what{margin:0;font-size:14px;grid-column:1}
  .map-card .trip .where{font-size:12px;grid-column:1}
  .map-card .trip .steps{display:none}
  .city-label{font-size:10px;padding:3px 7px}

  /* ---------- Section rhythm ---------- */
  section.band{padding-block:40px}
  .sec-title{font-size:26px;line-height:1.15}
  .sec-sub{font-size:16px}

  /* ---------- Tasks: suggestion tiles, 3 across ---------- */
  #tasks{padding-top:8px !important}
  #tasks .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
  #tasks .card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;padding:12px 6px 12px;border-radius:12px;text-align:center;min-height:0}
  #tasks .card > div{display:contents}
  #tasks .card h3{font-size:13px;line-height:1.2;font-weight:600;letter-spacing:0;order:2}
  #tasks .card p{display:none}
  #tasks .card .btn{position:absolute;inset:0;margin:0;padding:0;background:none;border-radius:12px;font-size:0;color:transparent}
  #tasks .card .art{width:52px;height:52px;order:1}

  /* ---------- Feature rows: copy first, then a trimmed visual ---------- */
  .feature + .feature{margin-top:48px}
  .feature h2{font-size:30px;line-height:1.08}
  .feature p{font-size:16px;margin-top:10px}
  .feature .form-actions{margin-top:18px}
  .feature .visual{order:2 !important;margin-top:20px;padding:16px;min-height:0;border-radius:14px}
  .v-earn .phone{width:min(100%,270px)}
  .s-earn .sheet{height:250px}
  .toast{font-size:12px;padding:8px 12px;top:8px}
  .float-chip{display:none}
  .v-del{gap:10px}
  .cal{padding:12px}
  .radar{min-height:160px}
  .checkin{width:100%}

  /* ---------- Earnings ---------- */
  .ctrl{margin-top:20px;gap:20px}
  .earn{gap:24px}
  .stub-body{padding:4px 16px 16px}
  .stub-head{padding:14px 16px}

  /* ---------- Sign-up cards ---------- */
  .split{gap:10px;margin-top:20px}
  .split a{min-height:0;padding:20px;align-items:center}
  .split h3{font-size:20px}
  .split p{font-size:14px}

  /* ---------- Footer: collapsible groups ---------- */
  footer .wrap{padding-block:36px calc(36px + env(safe-area-inset-bottom,0px))}
  .foot-top{gap:0}
  .foot-top > div:first-child{padding-bottom:20px}
  .foot-top > div + div{border-top:1px solid rgba(255,255,255,.12)}
  .foot-top h4{display:flex;justify-content:space-between;align-items:center;margin:0;padding:16px 0;cursor:pointer}
  .foot-top h4::after{content:"+";font-weight:400;font-size:20px;opacity:.7}
  .foot-top .open h4::after{content:"\2212"}
  .foot-top > div + div ul{display:none;padding-bottom:16px}
  .foot-top .open ul{display:grid}
  .foot-bot{margin-top:20px}

  /* ---------- Sticky bottom call to action ---------- */
  .m-sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--bg,#fff);border-top:1px solid var(--line,#E0E6F1);transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.9,.3,1)}
  .m-sticky.show{transform:none}
  .m-sticky a{display:flex;justify-content:center;padding:14px;border-radius:12px;background:var(--blue,#2563FF);color:#fff;font-weight:700;font-size:16px;text-decoration:none}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){
  .m-sheet,.m-sticky{transition:none}
}