/* ============================================================
   Webify — Trade Presence page PROTOTYPE layer
   ------------------------------------------------------------
   Loaded last, only by /trade-presence/ and /ar/trade-presence/,
   AFTER css/prototype.css. It deliberately reuses the homepage
   prototype's frame vocabulary (.showcase, .stage__browser,
   .stage__chrome, .stage__url, .stage__screens, .stage__phone)
   so the two pages cannot drift apart; everything new here is
   the drawn demo site (.msite), the stale social page (.osite),
   the price band, the audience marks, the feature groups and
   the tier progression.

   The demo business is INVENTED — Marsa Marble & Granite. It is
   drawn in HTML/CSS rather than screenshotted because no real
   screenshots can exist for a company that does not exist, and
   because a drawn site translates into Arabic and mirrors to RTL
   for free.

   Logical properties throughout — no physical left/right.
   ============================================================ */

/* ============================================================
   0. Shared bits
   ============================================================ */

/* A self-contained browser frame. .stage__browser bleeds off the
   page edge in the hero; this one is closed on all four sides for
   the before/after panels. Chrome parts are the homepage's. */
.frame {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 48px -24px rgba(2, 7, 37, 0.26), 0 2px 6px rgba(2, 7, 37, 0.05);
}

/* The drawn screens sit in the same aspect box the homepage uses. */
.screen-crop {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--surface);
}
.screen-crop > * { position: absolute; inset: 0; }

/* The drawn sites size themselves from their frame. The container has to
   be the WRAPPER — an element cannot query its own inline-size, and a
   self-referencing cqw silently falls back to the viewport. */
/* .stage__phone and .ba__phone carry this in prototype.css, next to the
   device they belong to — the homepage phone needs it too. */
.screen-crop,
.stage__screen { container-type: inline-size; container-name: screen; }

/* ============================================================
   1. MSITE — the drawn Marsa Marble site
   ------------------------------------------------------------
   One markup, three sizes. Every length inside is in `em`, and
   the root em is driven by the container's own width, so the
   same site renders in a wide hero frame, a half-width
   before/after panel and a phone without a second copy.
   ============================================================ */

.msite {
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  background: var(--surface);
  font-family: var(--font-body);
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* Floor keeps the smallest phone legible; ceiling stops the
     hero frame from looking like a zoomed-in wireframe. */
  font-size: clamp(0.5rem, 2.15cqw, 1rem);
  line-height: 1.45;
  color: #2b3341;
  text-align: start;
  /* The single column is `auto`, so a nowrap row inside it (the bar's logo,
     the footer's phone number) can size the column WIDER than the frame —
     every row then inherits that width and the inline END clips, which in
     Arabic is the readable edge. minmax(0,1fr) caps the column at the frame
     and lets overflow:hidden crop the row instead of the whole site. */
  grid-template-columns: minmax(0, 1fr);
}
[lang="ar"] .msite, .msite[dir="rtl"] { font-family: var(--font-arabic); }

/* ---- The demo brand's own palette. Deliberately NOT Webify's
   tokens: this is a different company's website, and if it wore
   Webify's brand colours it would read as a Webify screen. ---- */
.msite {
  --m-ink:    #23303f;
  --m-body:   #5a6675;
  --m-line:   #e4e2dd;
  --m-cream:  #f6f3ee;
  --m-deep:   #1f3446;   /* Marsa navy */
  --m-stone:  #a8825b;   /* quarried sand */
}

/* ---- Top bar ---- */
.msite__bar {
  display: flex;
  align-items: center;
  gap: 1.1em;
  padding: 0.85em 1.3em;
  border-block-end: 1px solid var(--m-line);
  background: var(--surface);
}
.msite__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  font-size: 0.95em;
  letter-spacing: 0.02em;
  color: var(--m-deep);
  white-space: nowrap;
}
.msite__mark { inline-size: 1.35em; block-size: 1.35em; flex: none; }
.msite__nav {
  display: flex;
  gap: 1.05em;
  font-size: 0.72em;
  color: var(--m-body);
  margin-inline-start: auto;
}
.msite__nav b { color: var(--m-deep); font-weight: 600; }
.msite__lang {
  flex: none;
  padding: 0.3em 0.7em;
  border: 1px solid var(--m-line);
  border-radius: 999px;
  font-size: 0.68em;
  font-weight: 600;
  color: var(--m-deep);
}
/* Narrow panels: the nav is the first thing a real responsive
   site drops, so the miniature drops it too. */
@container screen (max-width: 22rem) {
  .msite__nav { display: none; }
}

/* ---- Screen: home ---- */
.msite__hero {
  display: grid;
  gap: 1.4em;
  align-content: space-between;
  padding: 1.6em 1.3em 1.3em;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(168, 130, 91, 0.14), transparent 62%),
    var(--m-cream);
}
.msite__eyebrow {
  font-size: 0.62em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--m-stone);
  font-weight: 600;
}
.msite__h1 {
  margin: 0.5em 0 0;
  font-family: var(--font-heading);
  font-size: 1.65em;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--m-deep);
  max-inline-size: 14ch;
}
[dir="rtl"] .msite__h1 { font-family: var(--font-arabic); letter-spacing: 0; }
.msite__sub {
  margin: 0.7em 0 0;
  font-size: 0.76em;
  color: var(--m-body);
  max-inline-size: 34ch;
}
.msite__cta { display: flex; gap: 0.55em; margin-block-start: 1.1em; flex-wrap: wrap; }
.msite__btn {
  padding: 0.6em 1.05em;
  border-radius: 0.4em;
  font-size: 0.7em;
  font-weight: 600;
  background: var(--m-deep);
  color: #fff;
  white-space: nowrap;
}
.msite__btn--wa {
  background: #1faa54;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}
.msite__btn--wa svg { inline-size: 1.1em; block-size: 1.1em; }
.msite__btn--ghost { background: transparent; color: var(--m-deep); box-shadow: inset 0 0 0 1px rgba(31, 52, 70, 0.28); }

/* ---- Stone swatches. Marble drawn with layered gradients:
   a base tone, two veins at a shallow angle, one soft bloom. ---- */
.msite__stones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65em; }
.msite__stone { display: grid; gap: 0.45em; }
.msite__swatch {
  block-size: 6em;
  border-radius: 0.35em;
  border: 1px solid rgba(35, 48, 63, 0.08);
  background-color: var(--tone, #e9dfd1);
  background-image:
    linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, 0.55) 40%, transparent 43%),
    linear-gradient(96deg, transparent 62%, rgba(255, 255, 255, 0.4) 64%, transparent 68%),
    linear-gradient(112deg, transparent 20%, rgba(0, 0, 0, 0.09) 22%, transparent 25%),
    radial-gradient(70% 90% at 20% 15%, rgba(255, 255, 255, 0.5), transparent 70%);
}
.msite__stone span { font-size: 0.62em; color: var(--m-body); }
.msite__stone b { display: block; font-size: 0.68em; font-weight: 600; color: var(--m-ink); }

/* ---- The footer strip: the last thing in the frame, and where a
   real site repeats the contact route ---- */
.msite__foot {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.75em 1.3em;
  border-block-start: 1px solid var(--m-line);
  background: var(--surface);
  font-size: 0.6em;
  color: var(--m-body);
}
.msite__foot b { color: var(--m-ink); font-weight: 600; }
.msite__foot-end { margin-inline-start: auto; display: flex; gap: 0.6em; align-items: center; }
@container screen (max-width: 22rem) { .msite__foot-sec { display: none; } }

/* ---- Screen: products ---- */
.msite__page {
  padding: 1.2em 1.3em;
  display: grid;
  gap: 1em;
  align-content: start;
  /* Same min-content trap as .msite itself: an unbreakable run inside —
     "sales@marsamarble.com" in the contact aside — sized this column wider
     than the phone and pushed every row past the screen's inline end. */
  grid-template-columns: minmax(0, 1fr);
}
.msite__ph {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.05em;
  color: var(--m-deep);
}
[dir="rtl"] .msite__ph { font-family: var(--font-arabic); }
.msite__filters { display: flex; gap: 0.4em; flex-wrap: wrap; }
.msite__chip {
  padding: 0.35em 0.75em;
  border-radius: 999px;
  font-size: 0.62em;
  color: var(--m-body);
  box-shadow: inset 0 0 0 1px var(--m-line);
}
.msite__chip--on { background: var(--m-deep); color: #fff; box-shadow: none; font-weight: 600; }
.msite__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7em; }
@container screen (max-width: 22rem) {
  .msite__grid { grid-template-columns: repeat(2, 1fr); }
}
.msite__card { display: grid; gap: 0.4em; }
.msite__card .msite__swatch { block-size: 4.4em; }
.msite__card b { font-size: 0.68em; font-weight: 600; color: var(--m-ink); }
.msite__card span { font-size: 0.6em; color: var(--m-body); }

/* ---- Screen: about / credibility ---- */
.msite__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7em; }
.msite__fact {
  padding: 0.85em;
  border-radius: 0.4em;
  background: var(--m-cream);
  border: 1px solid var(--m-line);
}
.msite__fact b {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.15em;
  color: var(--m-deep);
  line-height: 1.1;
}
[dir="rtl"] .msite__fact b { font-family: var(--font-arabic); }
.msite__fact span { font-size: 0.6em; color: var(--m-body); }
.msite__rows { display: grid; gap: 0.5em; }
.msite__row {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.68em;
  color: var(--m-body);
  padding-block-end: 0.5em;
  border-block-end: 1px solid var(--m-line);
}
.msite__row svg { inline-size: 1em; block-size: 1em; flex: none; color: var(--m-stone); }

/* ---- Screen: contact / enquiry ---- */
.msite__form { display: grid; gap: 0.55em; }
.msite__field {
  block-size: 2.1em;
  border-radius: 0.35em;
  border: 1px solid var(--m-line);
  background: var(--surface);
  display: flex;
  align-items: center;
  padding-inline: 0.7em;
  font-size: 0.68em;
  color: #93a0ae;
}
.msite__field--area { block-size: 3.6em; align-items: flex-start; padding-block-start: 0.6em; }
.msite__two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55em; }
.msite__aside {
  padding: 0.9em;
  border-radius: 0.4em;
  background: var(--m-cream);
  border: 1px solid var(--m-line);
  display: grid;
  gap: 0.5em;
  align-content: start;
}
.msite__contact-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.9em; }
@container screen (max-width: 22rem) {
  .msite__contact-split { grid-template-columns: 1fr; }
  .msite__facts { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Phone rendering of the same site ----
   Shared by every product page: the device below, and the drawn site
   inside it running at a root em large enough to be READ rather than
   just recognised. A bigger em means proportionally less of the page
   fits, which is fine — the phone crops by design either way. */
/* Two class names, deliberately: page layers add their own root-em rule on
   a single class (.msite--pro sets a desktop size), and at equal specificity
   the later stylesheet would win and hand the phone a desktop root em. */
.msite.msite--phone { font-size: clamp(0.5rem, 9cqw, 0.8rem); }
/* At phone width the bar and footer's nowrap runs no longer fit their
   gutters — tighten them rather than let the inline end clip, which in
   Arabic is the readable edge. */
.msite--phone .msite__bar,
.msite--phone .msite__foot { padding-inline: 0.8em; gap: 0.45em; }
.msite--phone .msite__logo { font-size: 0.85em; min-inline-size: 0; }
.msite--phone .msite__foot-end { gap: 0.4em; }
/* At phone width an email address is wider than the screen; let it break
   rather than clip, since it is the one row a buyer would actually read. */
.msite--phone .msite__row { overflow-wrap: anywhere; }
.msite--phone .msite__nav { display: none; }
.msite--phone .msite__stones { grid-template-columns: repeat(2, 1fr); }
.msite--phone .msite__hero { padding: 1.1em 0.9em; gap: 0.9em; }

/* Display type has to come down on a phone or the headline eats the screen
   and the call to action falls below the fold — which on this page is the
   whole point of showing a phone at all. Measured: at the desktop 1.65em
   the H1 ran to five lines and pushed both buttons out of view. */
.msite--phone .msite__h1 { font-size: 1.2em; max-inline-size: none; }
.msite--phone .msite__eyebrow { font-size: 0.56em; letter-spacing: 0.12em; }
.msite--phone .msite__sub { font-size: 0.68em; max-inline-size: none; }
.msite--phone .msite__cta { margin-block-start: 0.85em; gap: 0.45em; }

/* ---- The device ----
   The rail, the Dynamic Island and the side button now live in
   prototype.css, so the homepage phone and these two share one device.
   What is left here is what differs: the before/after panel is a smaller
   copy, and both of these put a drawn site in the screen where the
   homepage puts an <img>. */
.ba__panel--after .ba__phone { padding: 0.18rem; border-radius: 1.15rem; }
.ba__panel--after .ba__phone::before { inset-block-start: 0.48rem; block-size: 0.34rem; }

/* The screen, when a drawn site fills it rather than a screenshot. Same
   19.5:9 and same radius the shared layer gives .stage__phone img. */
.showcase--product .stage__phone > .msite--phone,
.ba__panel--after .ba__phone > .msite--phone {
  position: relative;
  z-index: 1;
  aspect-ratio: 9 / 19.5;
  block-size: auto;
  border-radius: 1.3rem;
}
.ba__panel--after .ba__phone > .msite--phone { border-radius: 1rem; }

/* The status bar itself now lives in prototype.css: all three devices —
   the homepage screenshot phone included — draw the same strip.

   A phone frame has four rows, not three, once the strip is there. Without
   this the bar takes the 1fr and stretches whenever the drawn page is
   short enough to leave free space. */
.msite:has(> .msite__status) { grid-template-rows: auto auto 1fr auto; }

/* Two fields side by side are unreadable at phone width — real builds
   stack them, and so does the drawing. */
.msite--phone .msite__two { grid-template-columns: 1fr; }

/* A field is a fixed-height box, and at phone width its placeholder is
   longer than the box — the text was escaping the outline. Clip it the way
   a real input does, and stop pairing fields side by side. */
.msite--phone .msite__field:not(.msite__field--area) {
  display: block;
  line-height: 2.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The after-panel phone was hung 2rem BELOW its wrapper, which put the
   device on top of the caption once it grew — so it is pinned flush to
   the wrapper instead, and the wrapper reserves the overhang. Measured:
   the caption was losing its last four words. */
.ba__panel--after .ba__phone {
  inline-size: clamp(4.75rem, 19%, 7.5rem);
  inset-block-end: 0;
}

/* ============================================================
   2. OSITE — the stale social page (the "before")
   ------------------------------------------------------------
   A generic social profile, drawn from scratch: no platform
   wordmark, logo or exact brand colour is reproduced. The point
   is the pattern (a page instead of a site), not the platform.
   ============================================================ */

.osite {
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  background: #eceff3;
  font-family: var(--font-body);
  font-size: clamp(0.5rem, 2.15cqw, 1rem);
  line-height: 1.45;
  color: #46505e;
  text-align: start;
  --o-chrome: #46618f;
}
[lang="ar"] .osite, .osite[dir="rtl"] { font-family: var(--font-arabic); }

.osite__bar {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.6em 1em;
  background: var(--o-chrome);
  color: #fff;
}
.osite__glyph {
  inline-size: 1.5em;
  block-size: 1.5em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  flex: none;
}
.osite__search {
  flex: 1;
  block-size: 1.5em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  max-inline-size: 12em;
}
.osite__avatar-top {
  inline-size: 1.5em;
  block-size: 1.5em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  flex: none;
  margin-inline-start: auto;
}

/* Cover: a stretched, over-compressed photo — the classic. */
.osite__cover {
  block-size: 5.5em;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 3px),
    linear-gradient(150deg, #b9a78e, #8d7a63 55%, #6f6151);
  position: relative;
}
.osite__pfp {
  position: absolute;
  inset-block-end: -1.6em;
  inset-inline-start: 1.1em;
  inline-size: 3.4em;
  block-size: 3.4em;
  border-radius: 50%;
  border: 0.22em solid #fff;
  background: #cfc7bb;
  display: grid;
  place-items: center;
  font-size: 1em;
  font-weight: 700;
  color: #7c7264;
  overflow: hidden;
}
.osite__id { padding: 2.1em 1.1em 0.8em; background: #fff; }
.osite__name {
  margin: 0;
  font-size: 0.95em;
  font-weight: 700;
  color: #1c2430;
}
.osite__meta { font-size: 0.64em; color: #7c8794; margin-block-start: 0.2em; }
.osite__tabs {
  display: flex;
  gap: 1.1em;
  padding: 0.6em 1.1em 0;
  background: #fff;
  border-block-end: 1px solid #dfe3e8;
  font-size: 0.64em;
  color: #7c8794;
}
.osite__tabs b { color: var(--o-chrome); font-weight: 600; padding-block-end: 0.5em; box-shadow: inset 0 -2px 0 var(--o-chrome); }

.osite__feed { padding: 0.8em 1.1em; display: grid; gap: 0.7em; }
.osite__post { background: #fff; border-radius: 0.4em; padding: 0.8em; border: 1px solid #e2e6ea; }
.osite__post-head { display: flex; align-items: center; gap: 0.5em; }
.osite__post-head i {
  inline-size: 1.6em;
  block-size: 1.6em;
  border-radius: 50%;
  background: #cfc7bb;
  flex: none;
}
.osite__post-head b { font-size: 0.66em; color: #1c2430; }
.osite__stamp { font-size: 0.58em; color: #98a2ae; }
.osite__post p { margin: 0.55em 0 0; font-size: 0.66em; color: #46505e; }
.osite__post-img {
  margin-block-start: 0.6em;
  block-size: 6.2em;
  border-radius: 0.3em;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 3px),
    linear-gradient(120deg, #d9d2c6, #b6ab99);
}
/* The number typed into a caption, which is where it lives when
   there is no site to put it on. */
.osite__inline-num { color: #1c2430; font-weight: 600; }

@container screen (max-width: 22rem) {
  .osite__feed > :nth-child(n + 2) { display: none; }
}

/* ============================================================
   3. HERO — product page variant of .showcase
   ============================================================ */

/* Same role as .section__eyebrow, so the same four kicker tokens. It
   differs only in being a block with more space beneath it. */
.showcase--product .showcase__eyebrow {
  display: block;
  font-size: var(--kicker-size);
  letter-spacing: var(--kicker-track);
  text-transform: uppercase;
  color: var(--kicker-color);
  font-weight: var(--kicker-weight);
  margin-block-end: var(--space-sm);
}
/* The per-page H1 bump is gone: --h-page IS 3.9rem now, because these
   three pages were the ones already on-scale and the token was not. */
[dir="rtl"] .showcase--product .showcase__title { letter-spacing: 0; }

/* The demo-brand disclosure. Never let a visitor mistake the
   illustration for a client. */
.stage__demo-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--brand-accent) 16%, var(--surface));
  /* accent-dark alone is 4.06:1 on this cream at 12-13px; 80% of it toward
     black clears 4.5:1 and stays gold. */
  color: color-mix(in srgb, var(--brand-accent-dark) 80%, #000);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.stage__chrome .stage__demo-tag { flex: none; }

/* Placement — the phone's offsets, the flow list's clearance and the
   just-above-two-column tweak all moved to prototype.css, unprefixed:
   the homepage now uses the same geometry these pages do. */

/* ============================================================
   4. PRICE BAND — what used to be the hero card
   ------------------------------------------------------------
   Not a card. The figure is the loudest thing on the band, the
   three scope facts sit beside it on one rule, and the discovery
   note closes it. Full-bleed rule, no box.
   ============================================================ */

.priceband { background: var(--ground-b); border-block: 1px solid var(--rule); }
.priceband__inner {
  display: grid;
  gap: var(--space-lg) var(--space-2xl);
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
  align-items: center;
}
@media (min-width: 56rem) {
  .priceband__inner { grid-template-columns: auto 1fr auto; }
}
.priceband__price { display: grid; gap: 0.15rem; }
/* A price LABEL, not a section kicker -- it stays muted rather than
   gold so it does not compete with the figure beside it. It takes the
   kicker's size and tracking so the two agree typographically. */
.priceband__label {
  font-size: var(--kicker-size);
  letter-spacing: var(--kicker-track);
  text-transform: uppercase;
  color: var(--muted-on-tint);
  font-weight: 600;
}
.priceband__value {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
[dir="rtl"] .priceband__value { font-family: var(--font-arabic); letter-spacing: 0; }

.priceband__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
  padding-inline-start: 0;
  list-style: none;
  margin: 0;
}
@media (min-width: 56rem) {
  .priceband__facts {
    padding-inline-start: var(--space-2xl);
    border-inline-start: 1px solid var(--rule);
  }
}
.priceband__fact { display: grid; gap: 0.1rem; }
.priceband__fact b {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.2;
}
.priceband__fact span { font-size: var(--fs-xs); color: var(--muted-on-tint); }

.priceband__note {
  font-size: var(--fs-sm);
  color: var(--muted-on-tint);
  max-inline-size: 22rem;
  margin: 0;
}
.priceband__note strong { color: var(--text-strong); font-weight: 600; }

/* ============================================================
   5. BEFORE / AFTER
   ============================================================ */

.ba__grid { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
@media (min-width: 64rem) {
  .ba__grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* min-inline-size:0 because a grid item's automatic minimum is its
   min-content, and the frame's chrome carries a nowrap URL — measured at
   320px, "wadiequipment.com/contact" alone contributed 188px and forced the
   whole panel to 341px inside a 288px track. Zeroing the floor lets the
   track win; the URL pill then truncates the way it is already styled to. */
.ba__panel {
  margin: 0;
  display: grid;
  gap: var(--space-md);
  align-content: start;
  min-inline-size: 0;
  /* And its own children are grid items with the same automatic minimum —
     the frame would still take 341px inside a 288px panel. Cap the column. */
  grid-template-columns: minmax(0, 1fr);
}

.ba__label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
}
.ba__label::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--rule);
}
.ba__panel--after .ba__label { color: var(--brand-accent-dark); }

.ba__frame { position: relative; }
/* Reserve the phone's overhang so it never lands on the caption below.
   3rem, not 2.25rem: the device is a 19.5:9 iPhone now and the phone is
   pinned flush to this box rather than hanging 2rem under it. */
@media (min-width: 30rem) {
  .ba__panel--after .ba__frame { padding-block-end: 3rem; }
}
/* The "before" sits back: desaturated and slightly recessed, so the
   pair reads as a progression rather than two equal options. */
.ba__panel--before .frame {
  box-shadow: 0 12px 28px -20px rgba(2, 7, 37, 0.3);
}
.ba__panel--after .frame {
  box-shadow: 0 30px 60px -28px rgba(2, 7, 37, 0.32), 0 2px 6px rgba(2, 7, 37, 0.05);
}

.ba__caption {
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text-body);
  margin: 0;
}
.ba__caption strong { color: var(--text-strong); font-weight: 600; }

.ba__notes { display: grid; gap: var(--space-xs); list-style: none; padding: 0; margin: 0; }
.ba__notes li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: start;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-body);
}
.ba__notes svg { inline-size: 1.05rem; block-size: 1.05rem; margin-block-start: 0.15rem; }
.ba__notes--bad svg { color: var(--danger); }
.ba__notes--good svg { color: var(--success); }

/* The phone that hangs off the "after" frame, so mobile-first is
   shown rather than claimed. */
.ba__phone {
  position: absolute;
  inset-block-end: -2rem;
  inset-inline-end: 0.9rem;
  inline-size: clamp(4.5rem, 16%, 6.5rem);
  padding: 0.3rem;
  border-radius: 1.1rem;
  background: #2b2f45;
  box-shadow: 0 20px 40px -16px rgba(2, 7, 37, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  display: none;
}
.ba__phone > * { display: block; }
@media (min-width: 30rem) { .ba__phone { display: block; } }

@media (prefers-reduced-motion: reduce) {
  .frame, .ba__panel--before .frame { transition: none; }
}

/* ---- Phone: the pair becomes one panel at a time ----
   Stacked, "after" begins a full screen below the end of "before", so the
   one thing the section exists to say — the same company, twice — is never
   on screen at once. Side by side in a snapping track it is one swipe.

   The track rules are written out here rather than left to prototype.css's
   shared [data-carousel] block, so a product page scrolls correctly even
   where that block is absent. The values are that block's own; main.js
   still supplies the arrows and dots on top. */
@media (max-width: 47.999rem) {
  .ba__grid[data-carousel] {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: var(--space-md);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }
  .ba__grid[data-carousel]::-webkit-scrollbar { display: none; }
  .ba__grid[data-carousel] > .ba__panel { scroll-snap-align: start; }
  /* Panel two starts outside the viewport horizontally, so the reveal
     observer fires mid-transition on a swipe. Inside the track they are
     simply visible from the start. */
  .ba__grid[data-carousel] > .reveal { opacity: 1; transform: none; }

  .ba__swipe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin: 0 0 var(--space-sm);
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--text-muted);
    transition: opacity var(--transition-base), visibility var(--transition-base);
  }
  .ba__swipe svg {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    flex: none;
    color: var(--brand-primary);
  }
  /* Spent once you are on "after". main.js inserts .carousel-nav directly
     before the track, which is what the sibling selector is reading; with
     no nav — JS off — the hint simply stays, and so does the scrolling. */
  .ba__swipe:has(+ .carousel-nav [data-dir="1"]:disabled) {
    opacity: 0;
    visibility: hidden;
  }
}
/* Above the carousel breakpoint the two panels are both on screen and the
   hint would be telling a visitor to do something that does nothing. */
@media (min-width: 48rem) { .ba__swipe { display: none; } }

/* translate, not transform: rtl.css mirrors the arrow with
   transform: scaleX(-1), and an animated transform would overwrite it. */
@media (max-width: 47.999rem) and (prefers-reduced-motion: no-preference) {
  .ba__swipe svg { animation: ba-nudge 2.1s ease-in-out infinite; }
  [dir="rtl"] .ba__swipe svg { animation-name: ba-nudge-rtl; }
}
@keyframes ba-nudge {
  0%, 55%, 100% { translate: 0; }
  27% { translate: 0.3rem; }
}
@keyframes ba-nudge-rtl {
  0%, 55%, 100% { translate: 0; }
  27% { translate: -0.3rem; }
}

/* ============================================================
   6. AUDIENCE — who it's for
   ------------------------------------------------------------
   Four marks rather than two paragraphs. Each mark is drawn on
   the same 24-grid with one accent-filled shape, so they read as
   a set rather than as stock icons picked one at a time.
   ============================================================ */

.audience {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .audience { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .audience { grid-template-columns: repeat(4, 1fr); } }

.aud {
  display: grid;
  /* mark / title / text (flexes) / moment — so the moment's rule lands on
     the same line in every card regardless of how long the text runs. */
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.aud:hover {
  transform: translateY(var(--lift-hover-y));
  border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--border));
  box-shadow: var(--lift-hover-shadow);
}

.aud__mark {
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: var(--brand-wash);
  color: var(--brand-primary);
  margin-block-end: var(--space-2xs);
}
.aud__mark svg { inline-size: 1.6rem; block-size: 1.6rem; }
/* The accent-filled shape in each mark — the one part that is solid. */
.aud__mark .fill { fill: var(--brand-accent); stroke: none; }

.aud__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-strong);
  margin: 0;
  line-height: 1.25;
}
[dir="rtl"] .aud__title { font-family: var(--font-arabic); }
.aud__text { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted); margin: 0; }

/* The moment the website actually earns its money, per audience. */
.aud__moment {
  margin: 0;
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--border);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-body);
}
.aud__moment b { color: var(--brand-accent-dark); font-weight: 600; display: block; }

/* ---- Phone: one card at a time, on a five-second cycle ----
   Used by two sections. Stacked, "who it's for" is four screens and
   "what's included" is six, and a visitor who does not see themselves in
   the first card has no reason to reach the last. In a track they all
   pass in front of them.

   Each section is gated at ITS OWN breakpoint, not the site's 48rem one:
   the audience grid goes 2x2 at 40rem and the includes grid at 46rem, and
   from there up there is nothing to fix. The track is CSS alone, so it
   swipes with no JS; .is-live is js/cycle.js saying the cycle and the
   picker are running, and it is only ever set when the track really does
   scroll — which is why the chrome below needs no media query of its own. */
@media (max-width: 39.999rem) {
  [data-cycle] .audience {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: var(--space-md);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }
}
@media (max-width: 45.999rem) {
  [data-cycle] .inc {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: var(--space-md);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }
}
[data-cycle] [data-cycle-track]::-webkit-scrollbar { display: none; }
[data-cycle] [data-cycle-track] > * { scroll-snap-align: start; }
/* Cards past the first start outside the viewport horizontally, so the
   reveal observer catches them mid-transition on a swipe. */
[data-cycle].is-live [data-cycle-track] > .reveal { opacity: 1; transform: none; }
/* The lift is a pointer affordance. On a touch track the hover state
   sticks to the card you last dragged, which reads as a stuck card. */
[data-cycle].is-live .aud:hover { transform: none; box-shadow: none; }

/* Both are JS's to show: with the script absent the track is still a
   plain scroller, but a picker whose buttons do nothing is worse than
   no picker. */
.cycle__meter, .cycle__pick { display: none; }
[data-cycle].is-live .cycle__meter,
[data-cycle].is-live .cycle__pick { display: block; }

.cycle__meter {
  block-size: 2px;
  margin-block-start: var(--space-md);
  border-radius: var(--radius-full);
  background: var(--rule);
  overflow: hidden;
  transition: opacity var(--transition-base);
}
/* Spent once a visitor has said which card is theirs — the section is
   holding still, so a bar counting down to a move would be lying. Opacity
   rather than display, so the row below does not jump up. */
[data-cycle].is-picked .cycle__meter { opacity: 0; }
.cycle__meter > i {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  border-radius: inherit;
  background: var(--brand-primary);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
/* transform-origin is physical, and the bar has to fill from the side the
   reader starts on. */
[dir="rtl"] .cycle__meter > i { transform-origin: 100% 50%; }

.cycle__pick { margin-block-start: var(--space-lg); }
.cycle__pick-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 var(--space-sm);
}
.cycle__picks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.cyclepick {
  inline-size: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: start;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-body);
  transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base);
}
/* No font-family here on purpose: .cyclepick__name inherits the body face,
   which base.css already swaps to the Arabic one. Naming --font-heading
   would render Arabic in Outfit, which has no Arabic glyphs. */
.cyclepick__mark {
  inline-size: 1.85rem;
  block-size: 1.85rem;
  flex: none;
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
  background: var(--brand-wash);
  color: var(--brand-primary);
  transition: background var(--transition-base), color var(--transition-base);
}
.cyclepick__mark svg { inline-size: 1.05rem; block-size: 1.05rem; }
.cyclepick__mark .fill { fill: var(--brand-accent); stroke: none; }

.cyclepick[aria-current="true"] {
  border-color: var(--brand-primary);
  background: var(--brand-wash);
  color: var(--text-strong);
}
.cyclepick[aria-current="true"] .cyclepick__mark {
  background: var(--brand-primary);
  color: var(--color-white);
}

/* The includes groups are drawn in the accent, not the primary — their
   own icons already are — so the chrome that points at them follows.
   Scoped to the section rather than themed with a variable, because this
   is the only place the two cycles differ. */
.inc-wrap .cycle__meter > i { background: var(--brand-accent-dark); }
.inc-wrap .cyclepick__mark {
  background: color-mix(in srgb, var(--brand-accent) 15%, var(--surface));
  color: var(--brand-accent-dark);
}
.inc-wrap .cyclepick[aria-current="true"] {
  border-color: var(--brand-accent-dark);
  background: color-mix(in srgb, var(--brand-accent) 12%, var(--surface));
}
.inc-wrap .cyclepick[aria-current="true"] .cyclepick__mark {
  background: var(--brand-accent-dark);
  color: var(--color-white);
}

/* ============================================================
   7. INCLUDED — grouped, with a drawn snippet per group
   ============================================================ */

.inc {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .inc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .inc { grid-template-columns: repeat(3, 1fr); } }

.inc__group {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.inc__head { display: flex; align-items: center; gap: var(--space-sm); }
.inc__icon {
  inline-size: 2.1rem;
  block-size: 2.1rem;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  flex: none;
  background: color-mix(in srgb, var(--brand-accent) 15%, var(--surface));
  color: var(--brand-accent-dark);
}
.inc__icon svg { inline-size: 1.15rem; block-size: 1.15rem; }
.inc__title {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-strong);
  margin: 0;
}
[dir="rtl"] .inc__title { font-family: var(--font-arabic); }

.inc__list { display: grid; gap: var(--space-xs); list-style: none; padding: 0; margin: 0; }
.inc__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs);
  align-items: start;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-body);
}
.inc__list svg {
  inline-size: 1rem;
  block-size: 1rem;
  margin-block-start: 0.2rem;
  color: var(--success);
}

/* ---- The snippet: a scrap of real interface per group, drawn the
   same way the demo site is, so the page holds one visual language ---- */
.snip {
  align-self: end;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-muted);
  padding: var(--space-sm);
  overflow: hidden;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* pages: five page shapes, the range the package covers */
.snip__pages { display: flex; gap: 0.3rem; align-items: flex-end; }
.snip__pages i {
  flex: 1;
  block-size: 2.2rem;
  border-radius: 0.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  position: relative;
}
.snip__pages i::before {
  content: "";
  position: absolute;
  inset-block-start: 0.3rem;
  inset-inline: 0.3rem;
  block-size: 0.22rem;
  border-radius: 1px;
  background: color-mix(in srgb, var(--brand-primary) 30%, transparent);
}
.snip__pages i:first-child { background: var(--brand-wash); }

/* bilingual: the switcher, showing both directions at once */
.snip__lang { display: flex; gap: 0.35rem; }
.snip__lang span {
  flex: 1;
  padding: 0.4rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.7rem;
  text-align: center;
}
.snip__lang .on {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  border-color: var(--brand-primary);
  font-weight: 600;
}

/* lead capture: two fields and the two routes out */
.snip__form { display: grid; gap: 0.3rem; }
.snip__form i {
  block-size: 1.1rem;
  border-radius: 0.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
}
.snip__routes { display: flex; gap: 0.3rem; margin-block-start: 0.15rem; }
.snip__routes span {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: #fff;
  background: var(--brand-primary);
}
.snip__routes .wa { background: #1faa54; }

/* mobile: a phone beside a desktop edge, same site */
.snip__mobile { display: flex; align-items: flex-end; gap: 0.4rem; }
.snip__mobile .ph {
  inline-size: 1.5rem;
  block-size: 2.6rem;
  border-radius: 0.35rem;
  border: 2px solid var(--brand-primary);
  background: var(--surface);
  flex: none;
}
.snip__mobile .dt {
  flex: 1;
  block-size: 2rem;
  border-radius: 0.25rem 0.25rem 0 0;
  border: 1px solid var(--border);
  border-block-end: 0;
  background: var(--surface);
}

/* after launch: six months, marked off */
.snip__months { display: flex; gap: 0.25rem; }
.snip__months i {
  flex: 1;
  block-size: 1.6rem;
  border-radius: 0.2rem;
  background: color-mix(in srgb, var(--success) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border));
}

/* found: a search result that is yours, in both scripts */
.snip__serp { display: grid; gap: 0.25rem; }
.snip__serp b {
  font-size: 0.7rem;
  color: var(--brand-primary);
  font-weight: 600;
}
.snip__serp i {
  block-size: 0.3rem;
  border-radius: 1px;
  background: var(--border);
}
.snip__serp i:last-child { inline-size: 60%; }

/* ---- The two honest lists that follow the groups ---- */
.caveats { display: grid; gap: var(--space-xl); }
@media (min-width: 56rem) { .caveats { grid-template-columns: 1fr 1fr; } }
.caveats h3 { font-size: var(--fs-lg); margin-block-end: var(--space-md); }

/* ============================================================
   8. TIER PROGRESSION + comparison
   ============================================================ */

/* The comparison is the page's decision point and needs to sit on the
   tint rather than muted-on-muted against the CTA that follows. The
   ground and hairline now come from the ladder in webify.css -- this
   file only adds the one selector that file cannot know about. */
.section--tint .tier__builds { color: var(--muted-on-tint); }

.progression { position: relative; }
/* A rail threading between the cards. The cards are opaque, so only the
   segments in the gaps show — which is the whole effect. */
@media (min-width: 62rem) {
  .progression::before {
    content: "";
    position: absolute;
    inset-block-start: 3.25rem;
    inset-inline: 8%;
    block-size: 2px;
    /* A dotted connector, not a gradient: gold-to-blue crosses through a
       muddy brown exactly where the second gap falls. The step badges
       carry the sequence; this only has to join them. */
    background-image: repeating-linear-gradient(to right,
      var(--color-gray-300) 0 4px, transparent 4px 9px);
    z-index: 0;
  }
}
.progression .grid { position: relative; z-index: 1; }

/* The step index, so the three read as an order rather than a menu. */
.tier__step {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-block-end: var(--space-md);
}
.tier--current .tier__step {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--brand-on-accent);
}

/* The tier you are already reading about. Marked as *where you are*, not
   as the better buy — the other two keep their full weight. */
.tier--current {
  border-color: var(--brand-accent);
  box-shadow: var(--shadow-md);
}
.tier__flag--here {
  background: var(--brand-accent);
  color: var(--brand-on-accent);
  box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--brand-accent) 60%, transparent);
}

/* "Everything in the tier before, plus —" the line that makes it a
   progression instead of three parallel columns. */
/* .tier__for reserves three lines so the chips below line up across the
   three cards — that still applies. But its bottom margin was sized to sit
   against the price block, which is gone here, so it stacks with this
   chip's own top margin and opens a hole. The chip supplies the gap. */
.progression .tier__for { margin-block-end: 0; }

.tier__builds {
  /* .tier__outcome has no top margin, so a one-sided margin here left the
     chip sitting flush on the label below it — 16px above, 0 below. Equal
     margins put the shaded run optically between the two blocks. */
  margin-block: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  font-size: var(--fs-xs);
  color: var(--text-body);
}
.tier__builds b { color: var(--text-strong); font-weight: 600; }
.tier__builds--origin {
  background: color-mix(in srgb, var(--brand-accent) 10%, transparent);
  color: var(--brand-accent-dark);
}

/* The current tier's slot in the CTA row. A faded button reads as
   disabled; this reads as "you are already looking at it". */
.tier__here {
  display: block;
  text-align: center;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-full);
  border: 1px dashed var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 9%, transparent);
  color: var(--brand-accent-dark);
  font-weight: 600;
  font-size: var(--fs-sm);
}

/* ---- The comparison table ----
   .compare is shared with the homepage and scrolls sideways below 52rem,
   which is not something a buyer can scan on a phone. This modifier
   re-lays the same table as one block per feature, each carrying the three
   tier values side by side — so comparing stays a glance, not a swipe.
   Worth porting back to the homepage when that section lands. */
@media (max-width: 51.99rem) {
  .compare--stack { border: 0; overflow: visible; }
  .compare--stack .compare { min-inline-size: 0; display: block; }
  .compare--stack thead { display: none; }
  .compare--stack tbody { display: grid; gap: var(--space-sm); }
  .compare--stack tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md) var(--space-xs);
    background: var(--surface);
  }
  .compare--stack tbody tr:hover { background: var(--surface); }
  .compare--stack tbody th {
    display: block;
    padding: 0 0 var(--space-xs);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-block-end: 1px solid var(--border);
    margin-block-end: var(--space-xs);
  }
  .compare--stack td {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: var(--space-sm);
    align-items: baseline;
    padding: 0 0 var(--space-xs);
    border: 0;
    font-size: var(--fs-sm);
  }
  .compare--stack td::before {
    content: attr(data-tier);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
  }
  /* The tier this page is about stays legible in the stack. */
  .compare--stack td[data-current] { color: var(--text-strong); font-weight: 600; }
  .compare--stack td[data-current]::before { color: var(--brand-accent-dark); }
}

/* On the wide table, tint the column this page is about. Driven by
   [data-current], not by column index: Trade Presence is column one, Lead
   Engine is column two, and Digital Operations will be column three. The
   markup already carries the attribute on the cells; the header takes it
   too so the tint runs the full height of the column. */
@media (min-width: 52rem) {
  .compare--stack .compare td[data-current],
  .compare--stack .compare th[data-current] {
    background: color-mix(in srgb, var(--brand-accent) 7%, transparent);
  }
}