/* ============================================================================
   refine-v148.css — Claude design optimization pass (2026-07-20)
   Top-of-cascade refinement layer. Loaded LAST on every public page.
   Each block is one scoped round. Do not fold earlier layers into this file;
   this only overrides, never replaces. Preserve Talktide green #3ab15d.
   ============================================================================ */

/* --- R1 — Footer navigation legibility -------------------------------------
   Bug: .fcol links computed to inline-block, so short adjacent links packed
   onto one row and read as a single garbled label ("SMS MMS RCS Voice",
   "Financial Services New Retail", "Mobile Internet Food & Beverage").
   Fix: each footer nav link is its own line item on every page.            */
footer.site .foot-top .fcol a {
  display: block !important;
  width: fit-content;
  max-width: 100%;
}

/* --- R2 — Footer brand logo legibility on green ----------------------------
   Bug: logo-talktide-official-web.png is a green icon + black wordmark. On the
   solid-green footer the icon disappears and black-on-green is off-brand.
   Fix: reverse the lockup to a clean white silhouette (standard footer logo). */
footer.site .foot-brand .fb img {
  filter: brightness(0) invert(1);
  opacity: .96;
}

/* --- R4 — Footer social icon sizing ----------------------------------------
   Bug: the Tabler glyphs computed to 9px inside 38px buttons, reading as faint
   specks. Fix: size them to the button (18px) for a clear, tappable mark.     */
footer.site .foot-social a i.ti {
  font-size: 18px !important;
  line-height: 1;
}

/* --- R6 — Journey demo link wrap -------------------------------------------
   Bug: the mock SMS link broke mid-token ("http" / "s://prb.to/abc123") because
   the bubble wraps anywhere. Fix: break only at word boundaries so the short
   link stays intact and reads like a real message.                           */
.flow .bubble .lk {
  overflow-wrap: break-word;
  word-break: normal;
}

/* --- R8 — Consistent branded focus ring on header controls -----------------
   Bug: header nav links fell back to the UA near-black focus outline while
   every other control uses the Talktide-green ring. Fix: unify the keyboard
   focus affordance across the header.                                        */
header .brand:focus-visible,
header #site-nav a:focus-visible,
header .nav-toggle:focus-visible,
header .lang-btn:focus-visible,
header .lang-menu button:focus-visible {
  outline: 3px solid rgba(49, 173, 91, .55);
  outline-offset: 2px;
  border-radius: 8px;
}

/* --- R10 — Process step numbers ---------------------------------------------
   Bug: the "1 / 2 / 3" digits in .pn exist in markup but a later rule painted
   them var(--tt-brand) green — the same green as the disc — so the step markers
   rendered as blank dots and lost their sequence meaning. Fix: white digits.  */
.proc .pstep .pn {
  color: #fff !important;
}

/* --- R11 — Contact Sales in the mobile menu --------------------------------
   Bug: on mobile the header "Contact Sales" button AND the .mobile-nav-contact
   link were both display:none (conflicting media rules resolved to hidden), so
   the primary conversion CTA was entirely absent from mobile navigation. Fix:
   surface it as a prominent action at the foot of the open mobile menu.       */
@media (max-width: 860px) {
  header.site nav.open .mobile-nav-contact {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 13px 18px;
    border-radius: 12px;
    background: var(--g, #3ab15d) !important;
    color: #fff !important;
    font-weight: 700;
    text-align: center;
  }
}