/* Mobile polish for phones (main web), 2026-11-04 v6. No text changes; tablet and desktop untouched.
   Body carries .bl-m and .page-<route>; every rule lives inside the phone breakpoint.
   Help, manual, themes, contact and the footer keep their current look (ACE review).
   The approved home hero (.hero-v2, home-hero.css) is left as it is. */
@media (max-width:639.98px){

  /* ---------- Home: page rhythm and type ---------- */
  .page-home main h2,.page-home main h3{text-wrap:balance}
  .page-home main p,.page-home main li{text-wrap:pretty}
  .page-home main>section:not(.hero-v2){padding-top:3.25rem;padding-bottom:3.25rem}
  .page-home main>section#problem{padding-top:.75rem}

  /* Section headers: editorial, aligned to the reading start */
  .page-home main>section:not(.hero-v2):not(.from-gray-900)>div>.text-center:first-child{text-align:start;margin-bottom:1.75rem}
  .page-home main>section:not(.hero-v2):not(.from-gray-900)>div>.text-center:first-child>p{margin-inline:0;max-width:none;margin-top:.875rem;font-size:1.0625rem;line-height:1.55;color:#475569}
  .page-home main>section:not(.hero-v2):not(.from-gray-900)>div>.text-center:first-child>span.rounded-full{display:flex;align-items:center;gap:.625rem;width:max-content;max-width:100%;padding:0;margin-bottom:.875rem;background:none;border-radius:0;font-size:.9375rem;font-weight:700;letter-spacing:.01em;color:#2563eb}
  .page-home main>section:not(.hero-v2):not(.from-gray-900)>div>.text-center:first-child>span.rounded-full::before{content:"";flex:none;width:1.75rem;height:3px;border-radius:3px;background:currentColor}
  .page-home main>section:not(.hero-v2) h2{line-height:1.12;letter-spacing:-.025em}

  /* ---------- Problem ---------- */
  .page-home #problem>div>.text-center:first-child{margin-bottom:1.5rem}
  .page-home #problem blockquote{text-align:start;font-size:1.75rem;line-height:1.18;letter-spacing:-.02em;padding-inline-start:1rem;border-inline-start:4px solid #2563eb}
  .page-home #problem>div>p.text-center{text-align:start;margin-inline:0}
  .page-home #problem>div>p.text-slate-500{color:#475569;margin-bottom:1.5rem}
  .page-home #problem .grid{gap:.75rem}
  .page-home #problem .grid>div{background:#fff;border:1px solid #e2e8f0;border-radius:1.25rem;padding:1.125rem 1.25rem;box-shadow:0 12px 28px -20px rgba(15,23,42,.35)}
  .page-home #problem .grid h3{font-size:1.0625rem;gap:.75rem;margin-bottom:.5rem}
  .page-home #problem .grid h3>svg{width:2.5rem;height:2.5rem;padding:.55rem;border-radius:.875rem;flex:none;background:#eff6ff}
  .page-home #problem .grid>div:nth-child(1) h3>svg{background:#fef2f2}
  .page-home #problem .grid>div:nth-child(2) h3>svg{background:#fffbeb}
  .page-home #problem .grid p{font-size:1rem;color:#475569}
  .page-home #problem>div>p.mt-12{margin-top:1.75rem;color:#1e3a8a}

  /* ---------- How it works: vertical timeline ---------- */
  .page-home #how-it-works{background:linear-gradient(180deg,#eef4ff 0%,#fff 100%)}
  .page-home #how-it-works .grid.relative{gap:0}
  .page-home #how-it-works .grid.relative>div{position:relative;display:grid;grid-template-columns:3.25rem minmax(0,1fr);column-gap:1rem;text-align:start;padding-bottom:1.5rem}
  .page-home #how-it-works .grid.relative>div:last-child{padding-bottom:0}
  .page-home #how-it-works .grid.relative>div>div:first-child{grid-row:1/span 2;width:3.25rem;height:3.25rem;margin:0;font-size:1.375rem}
  .page-home #how-it-works .grid.relative>div>h3{grid-column:2;margin:.6rem 0 .35rem;font-size:1.1875rem;line-height:1.3}
  .page-home #how-it-works .grid.relative>div>p{grid-column:2;font-size:1rem;color:#475569}
  .page-home #how-it-works .grid.relative>div:not(:last-child)::before{content:"";position:absolute;inset-inline-start:calc(1.625rem - 1px);top:3.6rem;bottom:.35rem;width:2px;border-radius:2px;background:#bfdbfe}
  .page-home #how-it-works .mt-14{margin-top:2rem;background:#fff;border-color:#dbeafe;border-radius:1.25rem;padding:1.25rem}
  .page-home #how-it-works .mt-14 .text-slate-400{color:#475569}
  .page-home #how-it-works .text-center.mt-10{margin-top:1.75rem}
  .page-home #how-it-works .text-center.mt-10>a.inline-flex{display:flex;width:100%;justify-content:center;text-align:center;min-height:3.5rem;padding:.875rem 1rem;font-size:1rem;line-height:1.3;text-wrap:balance}

  /* ---------- Features: list with icon chips ---------- */
  .page-home #features .lg\:hidden.mb-8{margin-bottom:1.5rem}
  .page-home #features .space-y-4>:not([hidden])~:not([hidden]){margin-top:0}
  .page-home #features .lg\:w-3\/5>div{background:none;border:0;border-radius:0;padding:1.125rem 0;border-top:1px solid #e2e8f0}
  .page-home #features .lg\:w-3\/5>div:first-child{border-top:0;padding-top:.25rem}
  .page-home #features .lg\:w-3\/5 h3{font-size:1.1875rem;font-weight:700;line-height:1.3;gap:.875rem;margin-bottom:.35rem}
  .page-home #features .lg\:w-3\/5 h3>span{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.75rem;height:2.75rem;border-radius:.875rem;background:#eff6ff;background:color-mix(in srgb,currentColor 13%,#fff)}
  .page-home #features .lg\:w-3\/5 p{padding-inline-start:3.625rem;font-size:1rem;color:#475569}

  /* ---------- Social proof: on white ---------- */
  .page-home main>section:has(.bl-press){background:#fff}
  .page-home main>section:has(.bl-press) .grid.grid-cols-2{gap:.625rem;margin-bottom:1.75rem}
  .page-home main>section:has(.bl-press) .grid.grid-cols-2>div{padding:1.125rem .75rem;border-radius:1.125rem}
  .page-home main>section:has(.bl-press) .grid.grid-cols-2>div.bg-white{border-color:#e2e8f0}
  .page-home main>section:has(.bl-press) .grid.grid-cols-2>div.from-gray-900{background:#fffbeb;border:1px solid #fcd34d}
  .page-home main>section:has(.bl-press) .grid.grid-cols-2>div.from-gray-900 .text-white{color:#0f172a}
  .page-home main>section:has(.bl-press) .grid.grid-cols-2>div.from-gray-900 .text-amber-400{color:#b45309}
  .page-home main>section:has(.bl-press) .grid.grid-cols-2>div.from-gray-900 .text-xs{font-size:.8125rem}
  .page-home main>section:has(.bl-press) .grid.grid-cols-2>div .text-3xl{font-size:1.75rem;line-height:1.1}
  .page-home main>section:has(.bl-press) .grid.grid-cols-2>div.bg-white .text-xs{font-size:.8125rem;color:#475569}
  .page-home .bl-press{gap:.75rem;margin-bottom:.75rem}
  .page-home .bl-press-card{padding:1.25rem;border-radius:1.25rem;border-color:#e2e8f0}
  .page-home .bl-press-logo{margin-bottom:.875rem}
  .page-home .bl-founders{padding:1.25rem;border-radius:1.25rem;border-color:#e2e8f0}
  .page-home .bl-founders .text-slate-500{color:#475569}

  /* ---------- Shared: swipeable rows (reviews, use cases, guides) ---------- */
  .page-home main>section:has(.break-inside-avoid) .columns-1,
  .page-home main>section:has(.from-purple-50) .grid,
  .page-home #ratgeber .grid{display:flex;gap:.875rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:1rem;margin-inline:-1rem;padding:.25rem 1rem 1.25rem;columns:auto;scrollbar-width:none}
  .page-home main>section:has(.break-inside-avoid) .columns-1::-webkit-scrollbar,
  .page-home main>section:has(.from-purple-50) .grid::-webkit-scrollbar,
  .page-home #ratgeber .grid::-webkit-scrollbar{display:none}

  /* Reviews */
  .page-home main>section:has(.break-inside-avoid){background:#f4f7ff}
  .page-home main>section:has(.break-inside-avoid)>div>.text-center:first-child>p{font-size:.9375rem}
  .page-home main>section:has(.break-inside-avoid) .columns-1>*{flex:0 0 84%;scroll-snap-align:start;margin:0;display:flex;flex-direction:column;background:#fff;border-color:#e2e8f0;border-radius:1.25rem;padding:1.25rem;box-shadow:0 14px 30px -22px rgba(15,23,42,.45)}
  .page-home .break-inside-avoid .text-amber-400{color:#f59e0b;font-size:1rem}
  .page-home .break-inside-avoid .text-\[10px\]{font-size:.6875rem;color:#475569;background:#f1f5f9;border-radius:999px;padding:.2rem .55rem;letter-spacing:.05em}
  .page-home .break-inside-avoid>p{font-size:.9375rem;line-height:1.6;margin-bottom:.875rem}
  .page-home .break-inside-avoid>div:last-child{margin-top:auto}
  .page-home .break-inside-avoid .text-xs{font-size:.8125rem;color:#475569}
  .page-home main>section:has(.break-inside-avoid) p.mt-10{text-align:start;margin-top:.5rem}

  /* Apps suite: stacked cards */
  .page-home #apps>div>p.text-center{text-align:start;margin-bottom:1.5rem;color:#475569}
  .page-home #apps>div>div.rounded-2xl.overflow-hidden{margin-bottom:1rem;border:0;border-radius:1.5rem;box-shadow:0 18px 36px -24px rgba(15,23,42,.5)}
  .page-home #apps>div>div.rounded-2xl.overflow-hidden .md\:w-2\/5{padding:1rem 1.25rem .75rem}
  .page-home #apps>div>div.rounded-2xl.overflow-hidden .max-w-\[280px\]{max-width:200px}
  .page-home #apps>div>div.rounded-2xl.overflow-hidden .md\:w-3\/5{padding:1.125rem 1.25rem 1.25rem}
  .page-home #apps>div>div.rounded-2xl.overflow-hidden .md\:w-3\/5>p{color:#475569;font-size:.9375rem;line-height:1.55}
  .page-home #apps>div>div.rounded-2xl.overflow-hidden ul{margin-bottom:1rem}
  .page-home #apps>div>div.rounded-2xl.overflow-hidden ul>:not([hidden])~:not([hidden]){margin-top:.375rem}
  .page-home #apps>div>div.rounded-2xl.overflow-hidden li{font-size:.9375rem;color:#334155}
  .page-home #apps>div>div.rounded-2xl.overflow-hidden .md\:w-3\/5>a{display:flex;justify-content:center;width:100%;min-height:3.25rem;padding:.75rem 1rem;border-radius:1rem;background:#eff6ff;text-align:center}
  .page-home #apps .mt-12{margin-top:1rem;text-align:start;padding:1.25rem;border-radius:1.25rem}
  .page-home #apps .mt-12 .text-slate-500{color:#475569}

  /* Use cases */
  .page-home main>section:has(.from-purple-50) .grid{margin-top:0}
  .page-home main>section:has(.from-purple-50) .grid>div{flex:0 0 78%;scroll-snap-align:start;border-radius:1.25rem;padding:1.25rem}
  .page-home main>section:has(.from-purple-50) .grid h3{min-height:0;font-size:1.125rem}
  .page-home main>section:has(.from-purple-50) .grid p{font-size:.9375rem;color:#334155;margin-top:0}

  /* ---------- FAQ: cards ---------- */
  .page-home #faq{background:#f4f7ff}
  .page-home #faq .divide-y{display:grid;gap:.625rem}
  .page-home #faq .divide-y>:not([hidden])~:not([hidden]){border-top-width:0}
  .page-home #faq details{background:#fff;border:1px solid #e2e8f0;border-radius:1.125rem;padding:1rem 1.125rem;box-shadow:0 10px 24px -22px rgba(15,23,42,.5)}
  .page-home #faq summary{font-size:1.0625rem;line-height:1.35;padding-inline-end:0}
  .page-home #faq summary>span{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-inline-start:.75rem;border-radius:999px;background:#eff6ff;font-size:1.375rem;line-height:1}
  .page-home #faq summary>span.hidden{display:none}
  .page-home #faq details[open] summary>span.group-open\:hidden{display:none}
  .page-home #faq details[open] summary>span.group-open\:inline{display:inline-flex}
  .page-home #faq details p{font-size:1rem;color:#475569}
  .page-home #faq .mt-12{margin-top:1.25rem;padding:1.25rem;border-radius:1.25rem;background:#fff}
  .page-home #faq .mt-12 ul{color:#475569}

  /* Guides */
  .page-home #ratgeber .grid>a{flex:0 0 82%;scroll-snap-align:start;display:flex;flex-direction:column;padding:1.25rem;border-radius:1.25rem;border-color:#e2e8f0;box-shadow:0 14px 30px -22px rgba(15,23,42,.45)}
  .page-home #ratgeber .grid>a>span:first-child{margin-bottom:.875rem}
  .page-home #ratgeber .grid>a>p{font-size:.9375rem;color:#475569}
  .page-home #ratgeber .grid>a>span:last-child{margin-top:auto}

  /* ---------- Closing call to action ---------- */
  .page-home main>section.from-gray-900{padding-top:3.5rem;padding-bottom:3.5rem}
  .page-home main>section.from-gray-900 h2{font-size:2rem}
  .page-home main>section.from-gray-900 .mb-10{margin-bottom:1.75rem}
  .page-home main>section.from-gray-900 a.inline-flex{display:flex;width:100%;justify-content:center;text-align:center;min-height:3.5rem;padding:.875rem 1rem;font-size:1rem;line-height:1.3;text-wrap:balance}
  .page-home main>section.from-gray-900 .text-gray-500{color:#9ca3af}
  .page-home main>section.from-gray-900 p.text-sm{font-size:.9375rem}

  /* ---------- Pricing: readable review small print ---------- */
  .page-pricing .text-\[10px\]{font-size:.6875rem}
  .page-pricing .text-\[10px\].text-slate-400{color:#64748b}
  .page-pricing .pricing-review-author,.page-pricing .text-xs.text-slate-500{font-size:.8125rem}

  /* ---------- Not found page: equal full-width buttons ---------- */
  .page-404 main a.inline-flex{width:100%;justify-content:center}
}