/* XpressCoupon V127 — critical mobile, stability and accessibility fixes */

/* Prevent any grid/flex child from expanding the page beyond the viewport. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

:where(main, section, article, aside, header, footer, nav, div, ul, li, form, fieldset) {
  min-width: 0;
}

:where(h1, h2, h3, h4, h5, h6, p, a, button, span, strong, small, label) {
  overflow-wrap: break-word;
}

img,
video,
iframe,
svg,
canvas {
  max-width: 100%;
}

table {
  max-width: 100%;
}

/* Main homepage hero: the previous `1fr` mobile track used the min-content
   width of the long eyebrow, making the content about 400px wide on a 360px
   viewport. `minmax(0,1fr)` is the required containment track. */
.hero__grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

.hero__copy,
.hero__visual,
.hero__cta,
.hero__trust,
.hero__sub,
.xc-sale-countdown,
.xc-countdown-copy,
.xc-countdown-units,
.xc-countdown-actions {
  width: 100%;
  max-width: 100% !important;
  min-width: 0;
}

.hero__copy .eyebrow,
.hero__copy .pill,
.xc-countdown-kicker,
.xc-countdown-window,
.xc-ext-chip,
.xc-ext-eyebrow,
.xc-ext-storeline {
  max-width: 100%;
  white-space: normal;
  flex-wrap: wrap;
}

.btn,
.xc-ext-install-btn,
.xc-ext-secondary-btn,
.xc-mini-btn,
.xc-sale-alert__cta {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}

/* Keep the extension top bar intrinsically responsive at every width. */
.xc-ext-topbar__inner > *,
.xc-ext-inline-card__grid > *,
.xc-ext-prefooter__grid > *,
.xc-ext-codes-card__grid > * {
  min-width: 0;
  max-width: 100%;
}

/* Avoid mobile overlays competing with the persistent navigation dock. */
@media (max-width: 860px) {
  .xc-ext-sticky {
    display: none !important;
  }

  .bot-fab {
    bottom: calc(98px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
  }

  .xc-dock {
    width: calc(100% - 24px) !important;
    max-width: 420px;
  }
}

@media (max-width: 760px) {
  :root {
    --gut: 16px;
  }

  .wrap,
  .lp-wrap,
  .ext-page-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 16px !important;
  }

  .hero {
    padding-top: 28px;
  }

  .hero h1 {
    font-size: clamp(32px, 10.5vw, 48px) !important;
    line-height: 1.03;
  }

  .hero__sub {
    font-size: 17px;
    line-height: 1.58;
  }

  .hero__cta {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 11px;
  }

  .hero__cta > *,
  .xc-countdown-actions > *,
  .xc-ext-actions > *,
  .lp-hero__actions > * {
    width: 100% !important;
  }

  .hero__trust {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 14px;
  }

  .hero__trust li {
    min-width: 0;
    align-items: flex-start;
    line-height: 1.4;
  }

  .updated,
  .lp-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100%;
    max-width: 100%;
    white-space: normal !important;
    line-height: 1.55;
  }

  .xc-ext-topbar__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
    align-items: start;
    padding-block: 14px;
  }

  .xc-ext-chip,
  .xc-ext-topbar__copy,
  .xc-ext-topbar .xc-ext-install-btn {
    width: 100%;
  }

  .xc-ext-topbar__copy {
    font-size: 14px;
    line-height: 1.55;
  }

  .xc-sale-countdown {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 16px !important;
    gap: 14px !important;
  }

  .xc-countdown-copy {
    display: grid !important;
    gap: 3px;
  }

  .xc-countdown-units {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .xc-countdown-units > span {
    min-width: 0 !important;
    padding: 10px 3px !important;
  }

  .xc-countdown-units b {
    font-size: clamp(19px, 6vw, 25px) !important;
  }

  .xc-countdown-units small {
    font-size: 9.5px !important;
    letter-spacing: .03em;
  }

  .xc-countdown-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding-right: 0 !important;
  }

  .xc-ext-inline-card,
  .xc-ext-prefooter,
  .xc-ext-codes-card,
  .article,
  .content,
  .lp-hero,
  .calendar-hub,
  .featured-sale,
  .coinsbot,
  .tool-feature {
    max-width: calc(100% - 32px) !important;
    margin-inline: auto !important;
  }

  .xc-ext-inline-card__grid,
  .xc-ext-prefooter__grid,
  .xc-ext-codes-card__grid,
  .featured-sale__inner,
  .coinsbot,
  .tool-feature,
  .about,
  .calendar-hub,
  .ext-hero__grid,
  .ext-split,
  .ext-trust-grid,
  .ext-final__box {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .xc-ext-actions {
    justify-content: stretch !important;
  }

  .footer-social,
  .foot-legal nav,
  .lp-footer__links,
  .footer-links {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .table-wrap,
  .responsive-table,
  .comparison-table,
  .coupon-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 390px) {
  :root {
    --gut: 14px;
  }

  .wrap,
  .lp-wrap,
  .ext-page-wrap {
    padding-inline: 14px !important;
  }

  .hero__trust {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .xc-countdown-units {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hero__copy .eyebrow,
  .hero__copy .pill {
    font-size: 11px;
    letter-spacing: .08em;
    line-height: 1.45;
  }

  .brand img,
  .brand .brand-logo {
    max-width: 205px;
    height: auto !important;
  }

  .xc-ext-inline-card,
  .xc-ext-prefooter,
  .xc-ext-codes-card,
  .article,
  .content,
  .lp-hero,
  .calendar-hub,
  .featured-sale,
  .coinsbot,
  .tool-feature {
    max-width: calc(100% - 28px) !important;
  }
}

/* The redirect utility has its own standalone layout and previously used a
   fixed-width card that exceeded 320–360px screens. */
body > .box {
  width: min(100% - 28px, 520px) !important;
  max-width: calc(100% - 28px) !important;
}

/* Respect reduced motion and remove non-essential transform animations from
   the first viewport, reducing main-thread work and visual instability. */
@media (prefers-reduced-motion: reduce) {
  .hero__bg .blob,
  .coin-chip,
  .mascot-orb,
  .float-card,
  .xc-hero-mini,
  .xc-hero-match {
    animation: none !important;
  }
}

.foot-heading{font-family:var(--font-display,Inter,system-ui,sans-serif);font-weight:700;line-height:1.1;letter-spacing:-.01em;margin:0 0 14px;color:inherit}
.hcar__title{font-family:var(--font-display,Inter,system-ui,sans-serif);font-weight:700;font-size:clamp(26px,3.8vw,46px);letter-spacing:-.025em;line-height:1.02;margin-top:16px;color:#fff;text-wrap:balance}

/* V127: compact generated expiry countdowns at narrow phone widths. */
.countdown{max-width:100%;min-width:0}
.countdown .cd-unit{min-width:0!important}
@media (max-width:390px){
  .countdown{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}
}
body > .box {
  box-sizing: border-box !important;
  width: min(calc(100% - 28px), 520px) !important;
  max-width: min(calc(100% - 28px), 520px) !important;
}
@media (max-width: 860px) {
  header .xc-ext-nav-link { display: none !important; }
  .foot-legal,
  .foot-legal nav,
  .lp-footer__bottom,
  .lp-footer__bottom nav,
  .footer-links {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }
  .xc-ext-footer-link {
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  .article table,
  .content table,
  main table,
  .lp-main table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  code {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}
@media (max-width: 860px) {
  .xc-ext-footer-link {
    flex: 1 0 100% !important;
    width: 100% !important;
    margin-top: 6px !important;
  }
  .xc-ext-footer-link span {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  .article table,
  .content table,
  main table,
  .lp-main table {
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .article th, .article td,
  .content th, .content td,
  main th, main td,
  .lp-main th, .lp-main td {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    padding-inline: 8px !important;
  }
}
@media (max-width: 860px) {
  .lp-footer__legal nav {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }
}
@media (max-width: 860px) {
  .hamburger { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; }
  .xc-ext-chip { min-height: 44px !important; padding-block: 6px !important; }
  .hero__copy .eyebrow,
  .hero__copy .pill { font-size: 12px !important; }
  .xc-countdown-units small,
  .cd-unit span { font-size: 12px !important; }
  .xc-dock__item,
  .xc-dock__item span { font-size: 12px !important; }
}
@media (max-width: 860px) { .xc-countdown-window { font-size: 12px !important; } }

/* ==== V129 additions ====================================================
   Merged from the parallel V128 branch. */

/* Wide tables: scroll instead of squeeze.
   The rules above force table-layout:fixed at ~292px, which crams a
   multi-column pricing table and wraps text hard. Keeping the table at its
   natural width inside a focusable scroll container preserves legibility
   and table semantics, and is the conventional responsive pattern. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;margin-block:18px}
.table-scroll:focus-visible{outline:3px solid var(--accent,#d62f22);outline-offset:2px}
.table-scroll > table{margin-block:0}
@media (max-width:768px){
  .article table,.content table,main table,.lp-main table,
  .data-table,.dtable{
    display:table !important;
    table-layout:auto !important;
    width:auto !important;
    max-width:none !important;
  }
  .table-scroll > table{min-width:520px}
}

/* Decorative hero blobs extended past the viewport (invisible behind
   overflow-x:hidden, but they still affect layout maths). */
.hero__bg{overflow:hidden !important}
.hero__bg .blob{max-width:100% !important;right:auto}

/* --- V129.1: keep .wrap centred -----------------------------------------
   .wrap supplies `margin-inline:auto`. Any later rule using a margin
   SHORTHAND with two or more values (e.g. `margin:28px 0`) silently resets
   margin-left/right to 0, so an element carrying both .wrap and a component
   class jumps to the left edge. That is what pinned the homepage extension
   card to x=0 on wide screens. Use margin-block in component rules; this
   rule is the safety net. */
.wrap, .lp-wrap, .ext-page-wrap { margin-inline: auto !important; }