@media (max-width:600px){
  /* Design's mobile type scale: 20px root so the app's rem-based text reads larger */
  html{ font-size:20px !important; }
  /* Hero = biggest (main page title) */
  h1.text-gray-900 span{ font-size:clamp(2rem,8vw,3.3rem) !important; line-height:0.98 !important; }
  h1.text-gray-900{
    font-size:50px !important; line-height:0.98 !important; font-weight:500 !important;
    letter-spacing:-.025em !important; text-align:left !important; color:#141a28 !important; white-space:normal !important;
  }
  /* Section + pillar titles = consistent, smaller than hero */
  .cubes-h2, .tmon-h2, .sec6c-title, .news-h2, .faq-h2,
  #pga-caps-mobile .ch2, section.ct h2 {
    font-size:34px !important; line-height:1.18 !important; font-weight:600 !important;
    letter-spacing:-.015em !important; text-align:left !important; color:#141a28 !important; white-space:normal !important;
  }
  #pga-caps-mobile .ptitle{ font-size:28px !important; line-height:1.2 !important; font-weight:600 !important; letter-spacing:-.01em !important; }
  .faq-q{ font-size:16px !important; font-weight:500 !important; line-height:1.4 !important; letter-spacing:-.005em !important; padding:12px 2px !important; }
  .faq-a, .faq-a p, .faq-a *{ font-size:15.5px !important; line-height:1.55 !important; }
  /* kill the Safari <summary> disclosure marker that indents the open FAQ question */
  .faq-q, details.faq-item > summary{ list-style:none !important; }
  .faq-q::-webkit-details-marker, details.faq-item > summary::-webkit-details-marker{ display:none !important; }
  .faq-q::marker, details.faq-item > summary::marker{ display:none !important; content:"" !important; }
  /* no entrance/indent animation on the FAQ (mobile) — items sit flush-left, static */
  .faq-item, .faq-list .reveal, .faq-q{ transform:none !important; animation:none !important; opacity:1 !important; filter:none !important; }
  .faq-q{ text-indent:0 !important; padding-left:2px !important; }
  .faq-q > span:first-child{ margin-left:0 !important; text-indent:0 !important; padding-left:0 !important; }
  section.ct .reveal-2{ font-size:15.5px !important; line-height:1.55 !important; }
  /* bump original body-copy so overall text reads larger on mobile */
  .sec6c-sub, .news-sub{ font-size:18px !important; line-height:1.5 !important; }
  .sec6c-detail-desc{ font-size:17px !important; line-height:1.55 !important; }
  .news-ex{ font-size:16px !important; }
  .ct-note{ font-size:13.5px !important; }
  .tmon-quote, .tmon-card p{ font-size:16.5px !important; line-height:1.55 !important; }
  section.cubes-sec{ display:none !important; }
  .ct-card{ background:transparent !important; box-shadow:none !important; border:none !important; border-radius:0 !important; padding:0 !important; }
  .ct-card.pga-expect{
    background:#fff !important; border:1px solid #e8e9ee !important; border-radius:8px !important;
    padding:28px 24px !important;
    box-shadow:0 1px 2px rgba(20,26,40,.04),0 18px 44px rgba(20,26,40,.07) !important;
  }
  .pga-expect > a{
    display:flex !important; width:-webkit-fit-content !important; width:fit-content !important;
    margin:30px auto 0 !important; font-size:15px !important; padding:12px 11px 12px 22px !important;
  }
  .pga-expect > a > span{ width:26px !important; height:26px !important; font-size:14px !important; }
  section.tmon{ padding:44px 0 48px !important; min-height:100vh !important; display:flex !important; flex-direction:column !important; justify-content:center !important; }
  .tmon-track{ overflow-x:auto !important; scroll-snap-type:none !important; -webkit-overflow-scrolling:touch; animation:none !important; transform:none !important; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 10px); mask-image:linear-gradient(to right, transparent 0, #000 10px); }
  .tmon-track::-webkit-scrollbar{ display:none; }
  .tmon-marquee{ animation:none !important; }
  .tmon-card{ scroll-snap-align:start; }
  /* tighten gap between 'See reviews' and the cards */
  .tmon-head{ margin-bottom:20px !important; }
  .tmon-marquee{ padding-top:12px !important; padding-bottom:22px !important; }
  /* first review card fully in view */
  .tmon-track{ padding-left:22px !important; }
  /* remove the separating line before the capabilities section */
  #pga-caps-mobile{ border-top:none !important; padding-top:64px !important; }
  /* align footer logo mark with column headings */
  .ft-logo{ margin-left:-16px !important; }

  img[class*="-ml-2"][class*="w-auto"]{ height:46px !important; width:auto !important; }
  a.pga-btn{ min-height:46px; }
  [class*="rounded-[4px]"][class~="bg-white"]{ min-height:44px !important; font-size:16px !important; justify-content:flex-start !important; align-self:flex-start !important; width:-webkit-fit-content !important; width:fit-content !important; max-width:100% !important; }
  section.ct .pga-btn{ display:none !important; }
  /* menu CTA match hero/floater */
  [class*="z-50"][class*="pointer-events-auto"] a.pga-btn{ position:relative !important; justify-content:center !important; padding:12px 20px !important; }
  [class*="z-50"][class*="pointer-events-auto"] a.pga-btn > span:first-child{ font-size:13px !important; font-weight:400 !important; }
  [class*="z-50"][class*="pointer-events-auto"] a.pga-btn > span:last-child{ position:absolute !important; right:8px !important; top:50% !important; transform:translateY(-50%) !important; height:28px !important; width:28px !important; }
  /* plain close X (no bg/border) */
  [class*="pointer-events-auto"][class*="z-50"] button[class*="bg-gray-900"][class*="rounded-full"]{ background:transparent !important; border:none !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; color:#141a28 !important; }
  /* remove the frosted-glass nav pill on mobile — leave only the hamburger */
  [class*="justify-between"][class*="rounded-full"][class*="p-[5px]"]{
    background:transparent !important; border:none !important; box-shadow:none !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  /* hamburger toggle -> white circle with dark icon (never black) */
  button[class*="bg-gray-900"][class*="rounded-full"][class*="md:hidden"]{ background:#ffffff !important; color:#141a28 !important; box-shadow:0 2px 12px rgba(20,26,40,.12) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  button[class*="bg-gray-900"][class*="rounded-full"][class*="md:hidden"] svg{ color:#141a28 !important; stroke:#141a28 !important; }
  button[class*="bg-gray-900"][class*="rounded-full"][class*="md:hidden"] svg line,
  button[class*="bg-gray-900"][class*="rounded-full"][class*="md:hidden"] svg path{ stroke:#141a28 !important; color:#141a28 !important; }
  /* hero: marketplace badge on top, book button below — nudged a bit lower */
  [class*="mt-8"][class*="flex-col"][class*="sm:flex-row"]{ flex-direction:column-reverse !important; margin-top:22px !important; }
  /* the app's hero button / dock morph is dead (small-styles.css hides both);
     the real mobile floater is #pg-home-dock in index.astro */
  a.pga-btn.pga-btn-docked{
    position:fixed !important; left:50% !important; right:auto !important; bottom:16px !important;
    transform:translateX(-50%) !important; width:240px !important; max-width:240px !important;
    margin:0 !important; z-index:2147483000 !important; box-shadow:0 14px 32px rgba(30,58,138,.34) !important;
    transition:width .28s ease !important;
  }
  [class*="rounded-[4px]"][class~="bg-white"] [class~="bg-gray-900"]{ font-size:13px !important; }
  /* Compact contact form: pair short fields into 2 columns */
  .ct-form{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:16px 14px !important; align-items:start; }
  .ct-form > *{ grid-column:1 / -1 !important; }
  .ct-form > *:nth-child(1), .ct-form > *:nth-child(2),
  .ct-form > *:nth-child(5), .ct-form > *:nth-child(6){ grid-column:auto !important; }
  .ct-field input, .ct-field select{ width:100% !important; }
  /* hero order: title first, marketplace badge below (Ben, 2026-07-15 — the
     design's original badge-above-title order dated from when the hero logo
     sat above it; with the logo in the nav bar now, title leads) */
  .hero-in{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; padding-bottom:150px !important; }
  .hero-in > h1{ order:1; }
  .hero-in > [class*="mt-8"][class*="flex-col"]{ order:2; margin-top:22px !important; margin-bottom:0 !important; }

}