/* ============================================================================
   proyeet — MOBILE stylesheet
   ----------------------------------------------------------------------------
   Loaded with:  <link rel="stylesheet" href="/assets/css/mobile.css"
                       media="(max-width: 860px)">
   Everything here applies ONLY on phones / narrow screens. Because of the
   media attribute the rules are plain CSS — no @media wrappers needed. Edit
   this file to change how the site looks on mobile, and nothing else.
   ============================================================================ */

/* Tighter page gutters on small screens. */
:root{ --gutter:16px; }

/* ---- Nav: hide the inline links, keep brand + primary CTA ---- */
.nav-links{display:none}
.nav-inner{height:60px;gap:10px}
.nav .brand{font-size:1.35rem}
.nav-cta .btn-ghost{display:none}          /* keep only the primary action */
.nav-cta .btn{min-height:42px;padding:0 14px;font-size:.86rem;white-space:nowrap}
.nav-cta .btn .material-symbols-rounded{font-size:18px}

/* ---- Hero ---- */
.hero{padding:44px 0 34px}
.hero h1{font-size:clamp(2.1rem,9vw,2.9rem);max-width:18ch}
.hero .sub{font-size:1.02rem;margin-top:18px}
.hero .cta-row{margin-top:26px}
.hero .cta-row .btn{flex:1;min-width:0}     /* buttons share the row full-width */
.trust{gap:14px 20px;margin-top:28px}
.trust .t{font-size:.88rem}

/* ---- Sections ---- */
.section{padding:46px 0}
.sec-head{margin-bottom:30px}
.steps{grid-template-columns:1fr;gap:14px}
.features{grid-template-columns:1fr;gap:14px}
.cta-band{padding:38px 22px}

/* ---- Facts / comparison ---- */
.facts.two{grid-template-columns:1fr}
.vs{font-size:.86rem}
.vs th,.vs td{padding:11px 8px}

/* ---- Footer stacks ---- */
.foot .foot-inner{flex-direction:column;align-items:flex-start;gap:14px}
.foot .links{gap:14px}

/* ---- Focused columns (auth, fund page) get full width on phones ---- */
.wrap.narrow{max-width:100%}

/* ---- Legacy hero fallback ---- */
.stage .cta-col{max-width:100%}