/* ============================================================================
 * responsive.css — UENI marketing site responsive layer (v2)
 * ----------------------------------------------------------------------------
 * Loaded AFTER tokens.css + base.css on every *.html page. Originals are
 * never touched; this file is purely additive and uses !important inside
 * @media queries so it can override the inline grids the React pages emit
 * WITHOUT changing their desktop values (the queries only apply below the
 * breakpoint). Mirrors the mobile-first conventions already proven in
 * plumbers.css / boutiques.css (560 / 720 / 900 / 960 / 1000px breakpoints).
 *
 * Utility classes (added to grid containers in the v2 scripts/pages):
 *   .r-cards     uniform card row → 3/4-up desktop, 2-up tablet, 1-up phone
 *   .r-cards-2   2-up desktop → 1-up phone
 *   .r-split     asymmetric 2-col (hero/feature/cta) → stacks at 900px
 *   .r-split-md  asymmetric 2-col → stacks at 768px
 *   .r-stack-textfirst   when a split stacks, force the copy column first
 *   .r-tablewrap horizontal-scroll wrapper for dense data tables
 * ============================================================================ */

/* ---------------------------------------------------------------------------
 * 1 · Card grids — reflow uniform card rows. Desktop value (inline) is left
 *     intact; these only engage below the breakpoint.
 * ------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .r-cards    { grid-template-columns: repeat(2, 1fr) !important; }
  .r-cards-4  { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .r-cards    { grid-template-columns: 1fr !important; }
  .r-cards-4  { grid-template-columns: 1fr !important; }
  .r-cards-2  { grid-template-columns: 1fr !important; }
}

/* Logo / integration-icon grids (e.g. concierge "tracking tools" + "chat tools").
   Desktop column count comes from each grid's inline grid-template; below the
   breakpoints we reflow to a tidy 2-up with smaller icons + labels instead of a
   single tall one-per-row column. */
@media (max-width: 900px) { .r-logos { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 600px) {
  .r-logos { grid-template-columns: repeat(2, 1fr) !important; gap: 28px 18px !important; }
  .r-logos > div > img { max-width: 72px !important; }
  .r-logos > div > div { font-size: 15px !important; margin-top: 10px !important; line-height: 1.25 !important; }
}

/* About-us history timeline. Desktop is a centered, alternating two-side layout
   (inline grid "1fr auto 1fr" + an absolute centre line). On phones the centred
   layout breaks (the shared .r-split collapse fought the explicit grid-column /
   grid-row placement and rows overlapped), so the timeline rows use their own
   .tl-row class and reflow here into a single left rail: the line + dots sit on
   the left, and each entry's card + image stack full-width beside it. */
@media (max-width: 768px) {
  .tl { padding: 0 !important; }
  .tl-line { left: 8px !important; transform: none !important; }
  .tl-row { display: block !important; position: relative; padding-left: 34px; margin-bottom: 24px; }
  .tl-row > div:first-child { text-align: left !important; }
  .tl-row > img { margin-top: 14px !important; max-width: 320px; }
  .tl-row > :last-child { position: absolute !important; left: 1px !important; top: 24px !important; }
}

/* ---------------------------------------------------------------------------
 * 2 · Asymmetric two-column "split" sections (hero, feature, CTA, ROI, FAQ).
 *     Collapse to a single column and tighten the (often huge) desktop gap.
 * ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* minmax(0,1fr) (not 1fr) so a wide child like a full-width range slider can't
     blow the column past the viewport; min-width:0 lets the items actually shrink */
  .r-split { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
  .r-split > * { min-width: 0 !important; }
  .r-stack-textfirst > .r-copy   { order: -1 !important; }
  .r-stack-textfirst > .r-media  { order: 1 !important; }
  /* Zigzag feature rows: when stacked, the image should sit ABOVE the text it
     relates to. These rows alternate via inline `order` on desktop, which would
     otherwise leave the reversed rows text-first on mobile. We pin the image
     (the aspect-ratio'd media block) first. Heros opt out via .r-stack-textfirst
     so their headline + CTA still lead. */
  .r-split:not(.r-stack-textfirst) > [style*="aspect-ratio"] { order: -1 !important; }
}
@media (max-width: 768px) {
  .r-split-md { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* Square/photo hero art shouldn't dominate once stacked. */
@media (max-width: 900px) {
  .r-hero-art { max-width: 460px !important; margin: 0 auto !important; aspect-ratio: 4 / 3 !important; }
}
@media (max-width: 560px) {
  .r-hero-art { aspect-ratio: 1 / 1 !important; }
}

/* ---------------------------------------------------------------------------
 * 3 · Dense data tables (pricing matrix, vs-competitor matrix, home compare).
 *     These lose meaning if stacked, so wrap in a horizontal-scroll region
 *     with a sensible min-width and a soft edge-fade affordance.
 * ------------------------------------------------------------------------- */
.r-tablewrap { width: 100%; }
/* Mimic the live get.ueni.com comparison table: on small screens the matrix
   SHRINKS to fit the viewport instead of forcing a 720px-wide horizontal scroll
   (which pushed columns 3-4 clean off-screen and read as "broken"). The grids
   are fr-based, so cancelling the scroll min-width lets the columns reflow to
   fit; on phones we also compact the inline cell padding + typography so 4-5
   narrow columns stay aligned and legible, exactly like the reference table. */
@media (max-width: 860px) {
  .r-tablewrap { overflow: hidden !important; }
  .r-tablewrap > * { min-width: 0 !important; }
}
@media (max-width: 560px) {
  /* cells are the second-level divs (row grid > cell); compact them */
  .r-tablewrap > div > div {
    padding: 12px 5px !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
  }
  /* the feature-label column gets a touch more left breathing room + a heavier
     weight for readability (weight stays here so it can't flatten the bold plan
     headers / values in the other cells) */
  .r-tablewrap > div > div:first-child {
    padding-left: 12px !important;
    padding-right: 7px !important;
    font-weight: 500 !important;
  }
  /* the inline font-sizes live on nested spans/divs, so force them to inherit
     the compact cell size (icons use width/height, so they stay unaffected) */
  .r-tablewrap > div > div * { font-size: inherit !important; }
  /* the header UENI logo has a fixed inline height (22-26px) that overflows a
     narrow phone column, so scale it to fit; tighten the vs-competitor logo box */
  .r-tablewrap .brand-logo { height: 13px !important; width: auto !important; }
  .cmp-ueni-box { padding: 7px 10px !important; }
}

/* Pricing plan cards: 4-up → 2-up → 1-up. */
@media (max-width: 1000px) { .r-plans { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px)  { .r-plans { grid-template-columns: 1fr !important; } }

/* ---------------------------------------------------------------------------
 * 3b · Footer. The base grid is a fixed 5-column row (1.4fr 1fr 1fr 1fr 1fr)
 *      with a 48px gap and NO breakpoint, so on a phone the columns' min-content
 *      plus ~192px of gaps force it ~780px wide and all but the first column get
 *      clipped off-screen. Reflow it: brand block full-width, link columns 2-up,
 *      then single column on the narrowest screens.
 * ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 28px !important;
  }
  .site-footer__inner > .site-footer__col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .site-footer { padding-top: 56px !important; }
  .site-footer__bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}
@media (max-width: 440px) {
  .site-footer__inner { grid-template-columns: 1fr !important; gap: 28px !important; }
}

/* ---------------------------------------------------------------------------
 * 4 · Mobile navigation drawer. Desktop (>=960px) is untouched: the inline
 *     nav row + CTA show, the burger + drawer are hidden. Below 960px the row
 *     and desktop CTA hide and a hamburger reveals a full-height drawer.
 * ------------------------------------------------------------------------- */
.site-header__burger { display: none; }
.site-header__login-m { display: none; }

@media (max-width: 960px) {
  .site-header__nav,
  .site-header__cta { display: none !important; }

  /* text-only Login beside the hamburger on mobile (desktop uses the CTA Login).
     margin-left:auto groups it with the burger at the right, logo stays left. */
  .site-header__login-m {
    display: inline-flex; align-items: center;
    margin-left: auto; margin-right: 4px;
    min-height: 44px; padding: 0 8px;
    font-family: var(--font-display); font-weight: 600; font-size: 14px;
    color: var(--ink-1);
  }
  .site-header__login-m:hover { color: var(--brand-orange); }

  .site-header__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink-1);
    cursor: pointer;
    flex: 0 0 auto;
  }
  .site-header__burger:hover { background: var(--surface-off); }
}

/* Drawer shell — full-height sheet sliding from the right. */
.mnav { position: fixed; inset: 0; z-index: 120; display: none; }
.mnav.open { display: block; }
.mnav__scrim {
  position: absolute; inset: 0;
  background: rgba(15, 17, 18, 0.5);
  opacity: 0; transition: opacity 0.22s ease;
}
.mnav.open .mnav__scrim { opacity: 1; }
.mnav__sheet {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 88vw);
  background: var(--surface);
  box-shadow: -12px 0 40px rgba(0,0,0,0.18);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mnav.open .mnav__sheet { transform: translateX(0); }

.mnav__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; background: var(--surface); z-index: 2;
}
.mnav__close {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink-1); cursor: pointer;
}
.mnav__close:hover { background: var(--surface-off); }

.mnav__body { padding: 8px 12px 16px; flex: 1 1 auto; }

/* Accordion groups */
.mnav__group { border-bottom: 1px solid var(--line-soft); }
.mnav__grouphead {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 12px; min-height: 52px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: var(--ink-1); text-align: left;
}
.mnav__grouphead .mnav__chev { transition: transform 0.2s ease; color: var(--muted-1); }
.mnav__group.open .mnav__grouphead .mnav__chev { transform: rotate(180deg); }
.mnav__panel { display: none; padding: 0 12px 10px; }
.mnav__group.open .mnav__panel { display: block; }
.mnav__link {
  display: block; padding: 12px; min-height: 44px; border-radius: 10px;
  color: var(--ink-2); font-family: var(--font-body);
}
.mnav__link:hover { background: var(--surface-off); }
.mnav__link .mnav__t { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink-1); display: block; }
.mnav__link .mnav__d { font-size: 12.5px; color: var(--muted-1); margin-top: 2px; display: block; }

/* A plain (non-accordion) top-level link, e.g. Pricing */
.mnav__solo {
  display: flex; align-items: center; min-height: 52px; padding: 16px 12px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink-1);
}

/* Pinned footer: phone + login */
.mnav__foot {
  position: sticky; bottom: 0;
  margin-top: auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  display: grid; gap: 10px;
}
.mnav__phone {
  display: flex; align-items: center; gap: 10px; min-height: 48px;
  padding: 0 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink-1);
}
.mnav__phone .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success-soft); box-shadow: 0 0 0 4px rgba(36,196,158,0.18); }
.mnav__login { width: 100%; }

body.mnav-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
 * 5 · Touch / tap-target hygiene below the tablet breakpoint. Nudges the
 *     small pill buttons and category chips up to the 44px minimum.
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .ueni-page .btn { min-height: 44px; }
  .r-tap { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------------------------------------------------------------------------
 * 6 · General overflow safety + container breathing room on small screens.
 * ------------------------------------------------------------------------- */
.ueni-page { overflow-x: clip; }

/* Founder note (home hero): the inline style sits it in the top-right of the art,
   above Christine, sized for the roomy desktop column. In the cramped 2-col band
   (901-1080px) and the stacked band (561-900px) the art column is much narrower,
   so the full-width note would reach left into the office photo. Pin it inside and
   compact it (narrower + smaller type) so it clears the office photo on the left
   and stays above Christine. The <=560px block below fully re-lays-out the collage. */
@media (max-width: 1080px) {
  .hero-founder-note { top: 6% !important; right: 2% !important; width: 44% !important; font-size: 13.5px !important; }
}

/* Hero eyebrow: drop the decorative leading rule on phones so the eyebrow sits
   flush-left with the headline instead of looking like a stray bar. */
@media (max-width: 640px) { .hero-eyebrow-rule { display: none !important; } }

/* Hero stat badge: on phones it sat over the photo collage and covered the main
   image; drop it below both photos, keeping a few px overlap so it still reads
   as part of the group. */
@media (max-width: 560px) {
  /* Hero photo collage: give it portrait room so the founder note sits clearly
     ABOVE the photos (keeping the connector arrow visible, which the runtime
     hides when the note + photo are too close), and let Christine's photo be the
     larger of the two. Office shrinks to an accent; Christine dominates below. */
  .r-hero-art { aspect-ratio: auto !important; height: 470px !important; max-width: 360px !important; }
  .hero-founder-note {
    top: 0 !important; right: 0 !important; left: auto !important;
    width: 62% !important; font-size: 14px !important;
  }
  .hero-photo-office { top: 13% !important; left: 0 !important; width: 47% !important; height: 28% !important; }
  [data-founder-photo] {
    top: 28% !important; right: 2% !important; bottom: auto !important;
    width: 67% !important; height: 64% !important;
  }
  .hero-stat-badge { bottom: -9% !important; left: 4% !important; }
}

/* Done-for-you hero proof chips: a centred flex-wrap drops to an uneven 2 + 1 + 1
   on phones; pin it to a tidy 2x2 (max two rows) instead. */
@media (max-width: 560px) {
  .dfy-proofs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 16px !important;
    justify-items: start;
    max-width: 360px;
    margin: 0 auto;
  }
}
@media (max-width: 560px) {
  .container { padding-left: 18px; padding-right: 18px; }
}

/* Promo bar: drop the divider rule when it wraps on small screens. */
@media (max-width: 560px) {
  .promo-bar__rule { display: none; }
  .promo-bar__inner { gap: 10px; font-size: 13px; }
}

/* Press / "as featured in" row: let the label sit above the marquee. */
@media (max-width: 700px) {
  .r-press { grid-template-columns: 1fr !important; gap: 16px !important; }
}
/* On non-desktop the label stacks above the marquee, so center it. */
@media (max-width: 900px) {
  .r-press > .eyebrow { text-align: center !important; }
}

/* ---------------------------------------------------------------------------
 * 7 · Image performance helper. Reserves space (no CLS) for gallery shots
 *     that load lazily.
 * ------------------------------------------------------------------------- */
.r-shot {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover; object-position: center top;
  background: var(--surface-beige);
}