/* ============================================================
   MarketResearchly - responsive layer for the public pages
   (homepage, features, methodology, pricing, about, contact,
   signup, login). Loaded by includes/header.php on every page
   that is not a logged-in app page.

   The site was built desktop-only (a fixed 1200px minimum width);
   header.php now drops that minimum on these pages and this file
   reflows them. Breakpoints:
     1100px  small laptops    (tighter type, fewer columns)
      900px  tablets          (mobile menu, most grids stack)
      600px  phones           (single column, compact type)

   Every selector here starts with `html `: this file loads in <head>,
   but each page links its own stylesheet (about.css, contact.css,
   pages.css, auth.css) later in the body, and an equally specific
   later rule wins. The extra `html` makes these small-screen rules
   win over the page rules they adjust.
   ============================================================ */

/* ---------- shrinkable grids ----------
   A grid column sized 1fr will not shrink below its widest content
   (a long email address, a form row, a label), which pushed cards past
   the screen edge on phones. Below desktop every page grid gets
   columns that can shrink, and their items may shrink with them. */
@media (max-width: 1100px) {
  html .ab-story-grid > *, html .ab-ent-grid > *, html .ab-principle-grid > *,
  html .ct-grid > *, html .ct-row > *, html .pg-split > *, html .pg-engine > *, html .pg-feat-grid > *,
  html .pg-src-grid > *, html .pg-out-grid > *, html .pg-checks > *, html .au-grid > *, html .au-row > *,
  html .pg-rule span, html .hm-tour-grid > *, html .hm-story-grid > *, html .hm-stories-head > * { min-width: 0; }
}

/* ---------- mobile menu (markup in header.php, behaviour in nav.js) ---------- */
html .nav-toggle { display: none; }
html .nav-mobile[hidden] { display: none; }

@media (max-width: 900px) {
  html .site-nav-in { height: 70px; padding: 0 18px; }
  html .site-nav-links, html .site-nav-right { display: none; }
  html .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 11px; border-radius: 12px; cursor: pointer;
    background: rgba(255, 255, 255, .72); border: 1px solid rgba(22, 22, 24, .1);
  }
  html .nav-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--mr-ink); transition: transform .25s ease, opacity .2s ease; }
  html .site-nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  html .site-nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
  html .site-nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  html .nav-mobile {
    display: flex; flex-direction: column; padding: 8px 18px 20px;
    background: rgba(246, 240, 233, .97);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(22, 22, 24, .08);
    box-shadow: 0 18px 40px rgba(60, 50, 42, .1);
  }
  html .nav-mobile-link {
    padding: 14px 4px; font-size: 17px; font-weight: 500; color: var(--mr-ink);
    border-bottom: 1px solid rgba(22, 22, 24, .07);
  }
  html .nav-mobile-link.current { color: var(--mr-accent); }
  html .nav-mobile-btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 16px; }
  html .nav-mobile-btns .pill { font-size: 15px; padding: 12px 10px; }
  /* homepage: its nav scrolls away over the film, so the open menu
     sits over the film as a card */
  html .home-video .nav-mobile { border-radius: 0 0 20px 20px; }

  /* announcement bar wraps instead of overflowing */
  html .site-bar-in { height: auto; padding: 9px 16px; flex-wrap: wrap; gap: 6px 10px; font-size: 12.5px; text-align: center; }

  /* footer */
  html .site-footer { padding: 64px 20px 44px; }
  html .site-footer-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 24px; }
  html .site-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  html .site-bar .sep { display: none; }
  html .site-footer-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ============================================================
   HOMEPAGE (home.css + home-video.css)
   ============================================================ */
@media (max-width: 900px) {
  html .hm .wrap, html .hm .wrap-wide { padding: 0 20px; }
  html .hm .d-xl { font-size: 46px; }
  html .hm .d-lg { font-size: 38px; }
  html .hm .d-md { font-size: 32px; }
  html .hm .d-sm { font-size: 28px; }
  html .hm .lede { font-size: 17px; }
  html .hm-hero { padding-top: 56px; }
  html .hm-hero .btn-row .pill { font-size: 16px; }
  html .home-video .hm-hero .sc-wrap { padding-top: 100px; }
  /* the step rail wraps instead of running off the screen */
  html .home-video .hm-marquee .label { width: auto; max-width: calc(100% - 40px); white-space: normal; text-align: center; }
  html .hm-marquee { padding-bottom: 56px; }
  /* framed film layout: hero stacks, panels get shorter */
  html .home-video .hm-hero .d-xl { font-size: 44px; }
  /* a full viewport per window is too tall on a phone; the copy is short */
  html .home-video .hv-window { min-height: 70vh; padding: 80px 20px; }
  html .home-video .hm-hero .sc-wrap { padding-top: 72px; }
  html .home-video .hv-window .body { font-size: 16px; }
  html .hm-story { padding-bottom: 70px; }
  html .home-video .hm-story { padding-top: 56px; }
  html .hm-story-card { padding: 30px 26px; }
  html .hm-story-stats { padding: 30px 26px; }
  html .hm-story-stats .v { font-size: 42px; }
  html .home-video .hm-ps { padding: 80px 0 90px; }
  html .hm-platform { padding-top: 80px; }
  html .hm-platform .d-xl { margin-bottom: 40px; }
  html .hm-core { padding: 18px; }
  html .hm-core-head { flex-wrap: wrap; }
  html .hm-channels { flex-wrap: wrap; }
  html .hm-ops { flex-wrap: wrap; gap: 12px; }
  html .hm-engine { padding: 50px 0 80px; }
  html .hm-engine-card { padding: 30px 24px; gap: 30px; }
  html .home-video .hm-tour { padding-top: 70px; }
  html .hm-tour { padding-bottom: 80px; }
  html .hm-tab { padding: 14px 4px 16px; }
  html .hm-tab .lbl { font-size: 13.5px; }
  html .home-video .hm-tabs { padding: 0 6px; }
  html .home-video .hm-tour-text { padding: 26px 22px; }
  html .hm-stories { padding: 64px 0; }
  html .hm-story-tile { flex-basis: min(372px, 82vw); }
  html .home-video .hm-cta { padding: 120px 0 90px; }
}
@media (max-width: 760px) {
  /* homepage comparison card: each row becomes a small stacked block; the
     header keeps its two column names as a legend, in cell order */
  html .home-video .hv-compare { margin-top: 36px; border-radius: 20px; }
  html .hv-cmp-hd .c-dim { display: none; }
  html .hv-cmp-hd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html .hv-cmp-hd > * { padding: 14px 20px; }
  html .hv-cmp-row { grid-template-columns: minmax(0, 1fr); }
  html .hv-cmp-row > * { padding: 10px 20px; }
  html .hv-cmp-row .c-dim { padding-top: 18px; font-size: 16px; }
  html .hv-cmp-row .c-us { padding-bottom: 18px; }
}
@media (max-width: 600px) {
  html .hm .d-xl { font-size: 38px; }
  html .hm .d-lg { font-size: 32px; }
  html .hm .d-md { font-size: 28px; }
  html .hm-tiles { grid-template-columns: minmax(0, 1fr); }
  html .home-video .hm-hero .sc-wrap { padding-top: 80px; }
  html .hm-story-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 16px; }
  html .home-video .hm-hero .d-xl { font-size: 36px; }
  html .home-video .hv-window { min-height: 62vh; padding: 64px 18px; }
  html .hm-tabs { overflow-x: auto; }
  html .hm-tab .glyph { width: 36px; height: 36px; font-size: 17px; }
}

/* ============================================================
   ABOUT (about.css)
   ============================================================ */
@media (max-width: 1100px) {
  html .ab-display { font-size: 68px; }
  html .ab-story-grid { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; }
}
@media (max-width: 900px) {
  html .ab-wrap { padding: 0 20px; }
  html .ab-hero { padding: 72px 0 70px; }
  html .ab-display { font-size: 50px; }
  html .ab-lede { font-size: 17px; }
  html .ab-meta { flex-wrap: wrap; justify-content: center; border-radius: 20px; gap: 8px 14px; }
  html .ab-story { padding-bottom: 80px; }
  html .ab-story-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 44px; }
  html .ab-story-side { position: static; }
  html .ab-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; padding: 44px 16px; }
  html .ab-stat:nth-child(4) { border-left: 0; }
  html .ab-stats-sec, html .ab-principles, html .ab-enterprise { padding-bottom: 90px; }
  html .ab-h2 { font-size: 44px; }
  html .ab-h2-lg { font-size: 50px; }
  html .ab-principle-grid { grid-template-columns: minmax(0, 1fr); }
  html .ab-ent-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  html .ab-cta { padding-bottom: 100px; }
}
@media (max-width: 600px) {
  /* the kicker between its two rules has to fit on one line */
  html .ab-kicker { gap: 10px; letter-spacing: .14em; font-size: 11px; }
  html .ab-kicker .rule { width: 20px; }
  html .ab-display { font-size: 40px; }
  html .ab-pull { font-size: 28px; }
  html .ab-story-body p { font-size: 16.5px; }
  html .ab-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html .ab-stat:nth-child(4) { border-left: 1px solid rgba(255, 255, 255, .12); }
  html .ab-stat:nth-child(odd) { border-left: 0; }
  html .ab-stat:last-child { grid-column: 1 / -1; }
  html .ab-stat .v { font-size: 48px; }
  html .ab-principle { padding: 32px 26px; }
  html .ab-ent-card { padding: 30px 24px 22px; }
  html .ab-h2 { font-size: 36px; }
  html .ab-h2-lg { font-size: 40px; }
  html .ab-btns { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   CONTACT + PRICING form area (contact.css)
   ============================================================ */
@media (max-width: 1100px) {
  html .ct-grid { grid-template-columns: minmax(0, 1fr) 460px; gap: 48px; }
  html .ct-display { font-size: 54px; }
}
@media (max-width: 900px) {
  html .ct-wrap { padding: 0 20px; }
  html .ct-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-top: 56px; padding-bottom: 90px; }
  html .ct-display { font-size: 46px; max-width: none; }
  html .ct-lede, html .ct-steps, html .ct-footnote { max-width: none; }
}
@media (max-width: 600px) {
  html .ct-display { font-size: 38px; }
  html .ct-card { padding: 30px 20px 24px; border-radius: 22px; }
  html .ct-card-title { font-size: 29px; }
  html .ct-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  html .ct-steps .t { font-size: 20px; }
}

/* ============================================================
   FEATURES / METHODOLOGY / PRICING FAQ (pages.css)
   ============================================================ */
@media (max-width: 1100px) {
  html .pg-display { font-size: 68px; }
  html .pg-src-grid, html .pg-out-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .pg-engine { grid-template-columns: 280px minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 900px) {
  html .pg-wrap { padding: 0 20px; }
  html .pg-hero { padding: 72px 20px 60px; }
  html .pg-display { font-size: 50px; }
  html .pg-lede { font-size: 17px; }
  html .pg-label::before, html .pg-label::after { width: 24px; }
  html .pg-section { padding-bottom: 90px; }
  html .pg-last { padding-bottom: 110px; }
  html .pg-h2 { font-size: 42px; }
  html .pg-h2-lg { font-size: 46px; }
  html .pg-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .pg-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  html .pg-note { max-width: none; }
  html .pg-block { margin-bottom: 80px; }
  html .pg-rule span { white-space: normal; line-height: 1.5; }
  html .pg-engine { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  html .pg-stack { padding: 0; }
  html .pg-cta-dark { padding: 52px 28px; border-radius: 24px; }
  html .pg-faq { padding: 4px 24px; }
}
@media (max-width: 760px) {
  /* features comparison table: each row stacks; the header keeps its two
     column names as a legend (no new text), in the same order as the cells */
  html .pg-cmp-hd .c-dim { display: none; }
  html .pg-cmp-hd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html .pg-cmp-hd > * { padding: 14px 16px; font-size: 13px; }
  html .pg-cmp-row { grid-template-columns: minmax(0, 1fr); }
  html .pg-cmp-row > * { padding: 10px 20px; }
  html .pg-cmp-row .c-dim { padding-top: 18px; font-size: 15.5px; }
  html .pg-cmp-row .c-them { padding-bottom: 18px; }
}
@media (max-width: 600px) {
  html .pg-label { gap: 10px; letter-spacing: .14em; font-size: 11px; }
  html .pg-label::before, html .pg-label::after { width: 20px; }
  html .pg-display { font-size: 40px; }
  html .pg-h2 { font-size: 34px; }
  html .pg-h2-lg { font-size: 38px; }
  html .pg-feat-grid, html .pg-src-grid, html .pg-out-grid, html .pg-checks { grid-template-columns: minmax(0, 1fr); }
  html .pg-check-card { padding: 28px 22px; }
  html .pg-cyl { width: 210px; height: 84px; }
  html .pg .layer-row { padding: 20px 18px; }
  html .pg-layer .t { font-size: 23px; }
  html .pg-flow li { grid-template-columns: 42px minmax(0, 1fr); gap: 18px; }
  html .pg-flow .n { width: 42px; height: 42px; font-size: 17px; }
  html .pg-flow::before { left: 20.5px; }
  html .pg-flow .t { font-size: 23px; }
  html .pg-flow .hd, html .pg-layer .hd { flex-wrap: wrap; gap: 4px 12px; }
  html .pg-faq summary { font-size: 20px; }
  html .pg-btns { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   LOGIN + SIGNUP (auth.css)
   ============================================================ */
@media (max-width: 1100px) {
  html .au-grid { gap: 36px; }
  html .au-panel { padding: 44px 40px 34px; }
  html .au-display { font-size: 46px; }
  html .au-box, html .au-box-wide { width: 100%; max-width: 460px; }
}
@media (max-width: 900px) {
  html .au-grid { grid-template-columns: minmax(0, 1fr); padding: 24px 20px 90px; gap: 28px; }
  /* the form comes first on small screens; the brand panel follows */
  html .au-main { order: -1; padding: 16px 0 0; }
  html .au-box, html .au-box-wide { max-width: 560px; }
  html .au-panel { min-height: 0; }
  html .au-panel-mid { padding: 34px 0; }
}
@media (max-width: 600px) {
  html .au-title { font-size: 36px; }
  html .au-card { padding: 28px 20px 24px; border-radius: 22px; }
  html .au-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  html .au-panel { padding: 34px 24px 28px; border-radius: 24px; }
  html .au-display { font-size: 38px; }
  html .au-stats > div { padding-right: 18px; margin-right: 18px; }
  html .au-stats .v { font-size: 32px; }
  html .au-foot { line-height: 1.6; }
}