/* ============================================================
   Webify — homepage redesign PROTOTYPE layer
   ------------------------------------------------------------
   Loaded last, only by index.html. Everything here is scoped to
   the two redesigned sections (.showcase, .shopdemo) plus the
   cart drawer they share, so removing this one <link> restores
   the previous homepage exactly.

   Logical properties throughout — no physical left/right — so
   /ar/ mirrors without a retrofit. rtl.css handles only glyph
   direction, as it already does elsewhere.
   ============================================================ */

:root {
  /* ALIASES ONLY. These five names used to carry their own recipes
     here, again in prototype-work.css, and a third time under --ct-*
     in prototype-contact.css -- three sources of truth for one
     palette, which is how the site ended up with #f0f0fa and #f0f1f7
     as two names for the same intended colour. The recipes now live
     once in tokens.css; these map the old local names onto them so
     the several hundred call sites in this file need no edit. */
  --ground-a:      var(--ground);
  --ground-b:      var(--ground-tint);
  --ground-b-deep: var(--ground-deep);
  --rule:          var(--ground-rule);

  /* Exponential ease-out: fast departure, long settle. */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------
   Browser surfaces — the parts we did not draw
   ------------------------------------------------------------ */
::selection { background: var(--brand-accent); color: var(--brand-on-accent); }

:where(.showcase, .shopdemo, .cart) :focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

.showcase, .shopdemo { caret-color: var(--brand-accent); }

/* Tabular figures wherever money or counts are shown. */
.shop__price, .cart-line__price, .cart__subtotal-value, .cart__badge {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   1. SHOWCASE — the hero
   ============================================================ */

.showcase {
  position: relative;
  background: var(--ground-a);
  color: var(--text-body);
  overflow-x: clip;
  padding-block: var(--section-pad) var(--section-pad-lg);
  /* Two washes at a few percent — enough that the white is lit rather
     than flat, far too faint to read as a colour. */
  background-image:
    radial-gradient(55vw 42vw at 84% 26%, color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent 64%),
    radial-gradient(46vw 34vw at -4% -8%, color-mix(in srgb, var(--brand-primary) 8%, transparent), transparent 68%);
}

.showcase__inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  /* Start edge lines up with .container; end edge runs to the
     viewport so the screen is cut by the page, not framed by it. */
  padding-inline-start: max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
  padding-inline-end: 0;
  align-items: center;
}

@media (min-width: 64rem) {
  .showcase__inner {
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  }
}

.showcase__copy {
  padding-inline-end: var(--container-pad);
  max-width: 34rem;
}

.showcase__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--h-page);
  line-height: var(--h-page-leading);
  letter-spacing: var(--h-page-track);
  color: var(--text-strong);
  text-wrap: balance;
  margin: 0;
}

/* site.js splits the headline into words and carries .accent down onto
   each one, so the emphasis must stay inline — a display:block here
   would turn every word into its own line. */
.showcase__title .accent { color: var(--brand-primary); }

.showcase__lead {
  margin-block-start: var(--space-lg);
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 32ch;
}

.showcase__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-xl);
}

/* Facts read as one caption line, not three stat blocks. */
.showcase__facts {
  display: block;
  margin-block-start: clamp(2rem, 4vw, 2.75rem);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--rule);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
}
.showcase__facts span { display: block; }
.showcase__facts strong { color: var(--text-strong); font-weight: 600; }

/* ---- The stage: browser + phone ---- */

.showcase__stage {
  position: relative;
  margin: 0;
  padding-inline-end: 0;
}

.stage__device { position: relative; }

.stage__browser {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-inline-end: 0;
  border-start-start-radius: var(--radius-lg);
  border-end-start-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 32px 64px -28px rgba(2, 7, 37, 0.28), 0 2px 6px rgba(2, 7, 37, 0.05);
}

.stage__chrome {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.7rem var(--space-md);
  border-block-end: 1px solid var(--rule);
  background: var(--surface-muted);
}
.stage__dots { display: flex; gap: 0.35rem; flex: none; }
.stage__dots i {
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: var(--radius-full);
  background: var(--color-gray-300);
}
.stage__url {
  flex: 1;
  min-inline-size: 0;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stage__url b { color: var(--text-strong); font-weight: 500; }

.stage__screens {
  position: relative;
  aspect-ratio: 1600 / 1000;
  background: var(--surface-muted);
}
.stage__screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 700ms var(--ease-out-expo), transform 900ms var(--ease-out-expo);
}
.stage__screen img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.stage__screen.is-active { opacity: 1; transform: none; }

/* ---- The device ----
   A modern iPhone: a polished rail around a screen that runs almost to
   the edge, a Dynamic Island floating over the top of it, and the side
   button on the outer edge. Drawn, so it mirrors and rescales for free.

   This lives in the shared layer because three places use the same
   device: the homepage phone (a screenshot), and — via the Trade layer —
   the product-page hero phone and the before/after panel, which put a
   drawn site in the screen instead of an <img>. Change the device here
   and all three move together; prototype-trade.css only resizes it. */
.stage__phone,
.ba__phone {
  /* The drawn sites and the status strip size themselves from the frame's
     own width. The container has to be the WRAPPER — an element cannot
     query its own inline-size — so it lives on the device, not the screen.
     Moved here from prototype-trade.css when the homepage phone gained a
     status bar and needed the same cqw base. */
  container-type: inline-size;
  container-name: screen;
  padding: 0.22rem;
  border-radius: 1.5rem;
  background:
    linear-gradient(148deg, #6f7386 0%, #2a2d40 22%, #1b1d2c 55%, #383b4e 82%, #6b6f82 100%);
  box-shadow:
    0 28px 50px -22px rgba(2, 7, 37, 0.55),
    0 3px 8px rgba(2, 7, 37, 0.28),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.42);
  overflow: visible;
}
/* Dynamic Island. inset-inline: 0 + margin-inline: auto centres it without
   a translate, so it needs no RTL special case. */
.stage__phone::before,
.ba__phone::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset-block-start: 0.62rem;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: 32%;
  block-size: 0.44rem;
  border-radius: var(--radius-full);
  background: #07080e;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
}
/* Side button, on the outer edge — inline-end, so it swaps sides in RTL
   exactly as the device does. */
.stage__phone::after,
.ba__phone::after {
  content: "";
  position: absolute;
  inset-inline-end: -0.06rem;
  inset-block-start: 27%;
  inline-size: 0.08rem;
  block-size: 13%;
  border-radius: var(--radius-full);
  background: linear-gradient(#7c8093, #3c3f52);
}

/* ---- Placement ----
   One geometry for every page. The phone hangs off the frame's bottom
   START corner, out in the gutter between the copy column and the
   full-bleed frame, so it overlaps the frame's own padding rather than
   its content. The homepage used to sit it at -1.75rem, which buried
   three quarters of the device inside the browser frame. */
.stage__phone {
  position: absolute;
  inline-size: clamp(7.5rem, 7.5vw, 9rem);
  inset-block-end: -9rem;
  /* Stacked layout: the frame is full-bleed, so there is no gutter to
     move out into and a deeper offset pushes the device off the
     viewport edge. Measured at 768: -3rem put 17px of it off-screen. */
  inset-inline-start: -0.75rem;
  display: none;
}
@media (min-width: 48rem) { .stage__phone { display: block; } }
/* From the two-column breakpoint there is a real gutter between the copy
   and the frame; the phone moves out into it. */
@media (min-width: 64rem) {
  .stage__phone { inset-inline-start: clamp(-6rem, -4.5vw, -3rem); }
}
/* Just above the two-column breakpoint the frame is at its shortest while
   the phone is still at its size floor, and the tallest drawn screen —
   Trade Presence's product grid — reaches down to meet it.

   The clearance has to hold WITHOUT the intro animation, too: intro-panel
   ends on translateY(18px) and `both` retains it, so with motion enabled the
   phone renders 18px lower than its own box. Under prefers-reduced-motion
   the whole animation block is skipped, the transform never lands, and the
   phone sits 18px higher — which is where it grazed the grid. Measured at
   1024 with reduced motion: -10rem left a 7px overlap, -11rem clears by 9. */
@media (min-width: 64rem) and (max-width: 70rem) {
  .stage__phone { inset-block-end: -11rem; }
}

/* ---- The screen, when a screenshot fills it (the homepage) ----
   19.5:9 is the modern ratio, and the House of Havana capture is shot at
   it (858x1860).

   Two rows: the status strip a real phone keeps under the Dynamic Island,
   then the screenshot. Without a strip the island landed squarely on the
   site's own logo. This used to be a blank 7% band painted in the
   screenshot's own background; it now carries the same 9:41 / signal /
   Wi-Fi / battery row the drawn phones on the product pages carry, so all
   three devices read as one phone.

   The em base is .msite's own root em, so the strip renders at the same
   size here as it does there, and the ground is sampled off the
   screenshot's top row so the site reads as running up under the status
   bar rather than starting below a grey inset. */
.stage__phone-screen {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  aspect-ratio: 9 / 19.5;
  border-radius: 1.3rem;
  overflow: hidden;
  background: #ebe9da;
  font-size: clamp(0.5rem, 9cqw, 0.8rem);
  /* House of Havana's own ink, not the demo brand's navy. */
  --m-ink: #3d332a;
}
.stage__phone-screen > .msite__status { background: transparent; }
.stage__phone-screen > picture {
  display: block;
  min-block-size: 0;
  overflow: hidden;
}
.stage__phone img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ---- The status bar ----
   The island floats over the top of the screen, so whatever fills the
   screen needs the strip a real phone puts there. Shared by all three
   devices; moved here from prototype-trade.css when the homepage phone
   started using it. Phone renderings only — the hero frame never gets one.
   --m-ink is the drawn site's own ink where there is one, and falls back
   to the demo navy elsewhere. */
.msite__status {
  display: flex;
  align-items: center;
  padding: 0.75em 1.15em 0.15em;
  font-size: 0.72em;
  font-weight: 600;
  color: var(--m-ink, #23303f);
  background: var(--surface);
  font-variant-numeric: tabular-nums;
}
.msite__status-end { margin-inline-start: auto; display: flex; align-items: center; gap: 0.35em; }
.msite__status i { display: block; }
/* Signal: four ascending bars, drawn as one gradient. */
.msite__sig {
  inline-size: 1.05em;
  block-size: 0.72em;
  background:
    linear-gradient(var(--m-ink, #23303f) 0 0) 0    100% / 18% 40% no-repeat,
    linear-gradient(var(--m-ink, #23303f) 0 0) 30%  100% / 18% 60% no-repeat,
    linear-gradient(var(--m-ink, #23303f) 0 0) 62%  100% / 18% 82% no-repeat,
    linear-gradient(var(--m-ink, #23303f) 0 0) 100% 100% / 18% 100% no-repeat;
}
/* Wi-Fi: a filled wedge is close enough at 7px and needs no arcs. */
.msite__wifi {
  inline-size: 0.8em;
  block-size: 0.62em;
  background: var(--m-ink, #23303f);
  clip-path: polygon(50% 100%, 0 28%, 20% 12%, 50% 0, 80% 12%, 100% 28%);
}
.msite__batt {
  inline-size: 1.15em;
  block-size: 0.6em;
  border: 1px solid color-mix(in srgb, var(--m-ink, #23303f) 45%, transparent);
  border-radius: 0.18em;
  padding: 0.08em;
  background:
    linear-gradient(var(--m-ink, #23303f) 0 0) content-box 0 0 / 72% 100% no-repeat;
}

/* ---- Flow nav: names the screens, and drives them ---- */

.stage__flow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  align-items: baseline;
  max-width: 46rem;
  margin-block-start: var(--space-lg);
  padding-inline-end: var(--container-pad);
  /* Clears the phone, which hangs below the frame from 48rem up. */
  padding-inline-start: 0;
  list-style: none;
}
.stage__flow-label {
  flex: 0 0 100%;
  margin-block-end: var(--space-2xs);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stage__flow button {
  position: relative;
  padding-block-end: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  transition: color var(--transition-base);
}
.stage__flow button::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  background: var(--brand-accent);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform var(--transition-base) var(--ease-out-expo);
}
.stage__flow button:hover { color: var(--text-strong); }
.stage__flow [aria-current="true"] { color: var(--text-strong); }
.stage__flow [aria-current="true"]::after { transform: scaleX(1); }

.stage__credit {
  max-width: 42rem;
  margin-block-start: var(--space-sm);
  padding-inline-end: var(--container-pad);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.stage__credit a { color: var(--text-strong); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.stage__credit a:hover { color: var(--link-hover); }

/* The credit sits in the same column and the phone runs down the same
   gutter, so it takes the same clearance — which also aligns it with the
   flow list's label instead of hanging 6.5rem to its left. */
@media (min-width: 48rem) {
  .stage__flow,
  .stage__credit { padding-inline-start: 6.5rem; }
  /* The clearance is padding, so the box grows by the same amount and the
     text column keeps the measure it had before the phone moved into the
     gutter. Without this the homepage's fifth flow item wrapped. */
  .stage__flow   { max-width: calc(46rem + 6.5rem); }
  .stage__credit { max-width: calc(42rem + 6.5rem); }
}
/* In the stacked range the phone reaches ~107px inside the full-bleed
   frame, and 6.5rem of clearance is no longer enough for the flow list. */
@media (min-width: 48rem) and (max-width: 63.999rem) {
  .stage__flow,
  .stage__credit { padding-inline-start: 7.5rem; }
  .stage__flow   { max-width: calc(46rem + 7.5rem); }
  .stage__credit { max-width: calc(42rem + 7.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .stage__screen { transition: none; }
}

/* ============================================================
   2. SHOPDEMO — a working store on the homepage
   ============================================================ */

.shopdemo {
  background: var(--ground-b);
  color: var(--text-strong);
  padding-block: var(--section-pad-lg);
}

.shopdemo__inner {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 64rem) {
  .shopdemo__inner { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); }
  .shopdemo__copy { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-lg)); }
}

.shopdemo__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--h-feature);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  text-wrap: balance;
  margin: 0;
}
.shopdemo__text {
  margin-block-start: var(--space-md);
  color: var(--muted-on-tint);
  max-width: 34ch;
  line-height: var(--leading-body);
}
.shopdemo__text + .shopdemo__text { margin-block-start: var(--space-md); }
.shopdemo__text strong { color: var(--text-strong); }

/* ---- The store window ---- */

.shop {
  container-type: inline-size;
  background: var(--color-white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px -34px rgba(5, 7, 38, 0.32);
}

.shop__bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-md) var(--space-lg);
  border-block-end: 1px solid var(--rule);
  background: var(--ground-b);
}
.shop__brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  flex: 1;
  min-inline-size: 0;
}
.shop__brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.shop__brand-note {
  font-size: var(--fs-xs);
  color: var(--muted-on-tint);
}

.shop__cart {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: background var(--transition-base);
}
.shop__cart:hover { background: var(--brand-primary-light); color: var(--color-white); }
.shop__cart svg { inline-size: 1.05em; block-size: 1.05em; }
.cart__badge {
  min-inline-size: 1.35em;
  padding-inline: 0.35em;
  border-radius: var(--radius-full);
  background: var(--brand-accent);
  color: var(--brand-on-accent);
  font-size: var(--fs-xs);
  line-height: 1.35em;
  text-align: center;
}

.shop__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg) 0;
}
.shop__filter {
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted-on-tint);
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}
.shop__filter:hover { color: var(--text-strong); box-shadow: inset 0 0 0 1px rgba(2, 7, 37, 0.3); }
.shop__filter[aria-pressed="true"] {
  background: var(--brand-primary);
  color: var(--color-white);
  box-shadow: none;
}

.shop__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
  background: var(--rule);
  border-block-start: 1px solid var(--rule);
}

.shop__item {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  padding: var(--space-md);
}
.shop__media {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin-block-end: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--ground-b-deep);
}
.shop__media img {
  inline-size: auto;
  block-size: 86%;
  transition: transform 500ms var(--ease-out-expo);
}
.shop__item:hover .shop__media img { transform: translateY(-4px) scale(1.02); }

.shop__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--text-strong);
  margin: 0;
}
.shop__spec {
  margin-block-start: 0.15rem;
  min-block-size: 2.9em;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--muted-on-tint);
}
.shop__price {
  margin-block-start: var(--space-xs);
  margin-block-end: var(--space-md);
  font-weight: 600;
  color: var(--text-strong);
}
.shop__add {
  margin-block-start: auto;
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--brand-primary);
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}
.shop__add:hover {
  background: var(--brand-accent);
  color: var(--brand-on-accent);
  box-shadow: none;
}
.shop__add[data-added] {
  background: var(--brand-primary);
  color: var(--color-white);
  box-shadow: none;
}

.shop__foot {
  padding: var(--space-md) var(--space-lg);
  border-block-start: 1px solid var(--rule);
  background: var(--ground-b);
  font-size: var(--fs-xs);
  color: var(--muted-on-tint);
}

/* ============================================================
   3. CART DRAWER — shipped component, styled for this page
   ============================================================ */

.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(2, 7, 37, 0.42);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.cart-overlay.is-open { opacity: 1; visibility: visible; }

.cart {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: calc(var(--z-overlay) + 1);
  inline-size: min(26rem, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  box-shadow: -30px 0 60px -30px rgba(2, 7, 37, 0.35);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 460ms var(--ease-out-expo), visibility 460ms;
}
[dir="rtl"] .cart { transform: translateX(-100%); }
.cart.is-open { transform: none; visibility: visible; }

.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-block-end: 1px solid var(--rule);
}
.cart__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.cart__close {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  color: var(--muted-on-tint);
  transition: background var(--transition-base), color var(--transition-base);
}
.cart__close:hover { background: var(--ground-b); color: var(--text-strong); }
.cart__close svg { inline-size: 1.15rem; block-size: 1.15rem; }

.cart__items { flex: 1; overflow-y: auto; padding: var(--space-lg); }
.cart-empty { color: var(--muted-on-tint); font-size: var(--fs-sm); }

.cart-line {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: var(--space-md);
  align-items: center;
  padding-block: var(--space-md);
}
.cart-line + .cart-line { border-block-start: 1px solid var(--rule); }
.cart-line__img {
  inline-size: 3.5rem;
  block-size: 3.5rem;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--ground-b-deep);
  padding: 0.25rem;
}
.cart-line__name { font-weight: 600; color: var(--text-strong); font-size: var(--fs-sm); margin: 0; }
.cart-line__price { font-size: var(--fs-sm); color: var(--muted-on-tint); margin: 0.1rem 0 0; }
.cart-line__remove {
  margin-block-start: 0.2rem;
  font-size: var(--fs-xs);
  color: var(--muted-on-tint);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.cart-line__remove:hover { color: var(--danger); }
.cart-line__qty {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.cart-line__qty button {
  inline-size: 1.85rem;
  block-size: 1.85rem;
  border-radius: var(--radius-full);
  color: var(--text-strong);
  font-size: var(--fs-base);
  line-height: 1;
}
.cart-line__qty button:hover { background: var(--ground-b); }
.cart-line__qty span { min-inline-size: 1.25rem; text-align: center; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

.cart__foot { padding: var(--space-lg); border-block-start: 1px solid var(--rule); background: var(--ground-b); }
.cart__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-block-end: var(--space-md);
  font-size: var(--fs-sm);
  color: var(--muted-on-tint);
}
.cart__subtotal-value { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 700; color: var(--text-strong); }
.cart__foot .btn--primary:disabled { opacity: 0.45; box-shadow: none; }
.cart__foot .btn--primary:disabled:hover { transform: none; background: var(--brand-accent); }
.cart__note { margin-block-start: var(--space-sm); font-size: var(--fs-xs); color: var(--muted-on-tint); text-align: center; }

/* ============================================================
   4. LOAD MOTION — follows webify.css's intro vocabulary
   ------------------------------------------------------------
   Same gating rule as that file: inside prefers-reduced-motion:
   no-preference there are animations, outside it there are no
   animation declarations at all. intro-rise / intro-fade /
   intro-line are declared there; keyframe names are global.

   One authored moment carries this section — the screen changing
   inside the frame. The load intro only assembles the parts.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* The frame arrives like a screen switching on: a wipe from the
     reading edge, not a fade. clip-path has no logical form, so RTL
     gets its own keyframes — the same trade webify.css makes. */
  @keyframes stage-on {
    from { clip-path: inset(0 100% 0 0); opacity: 0.4; }
    to   { clip-path: inset(-40%); opacity: 1; }
  }
  @keyframes stage-on-rtl {
    from { clip-path: inset(0 0 0 100%); opacity: 0.4; }
    to   { clip-path: inset(-40%); opacity: 1; }
  }

  .showcase__title .line-mask__inner {
    animation: intro-line 820ms var(--intro-ease)
               calc(120ms + var(--intro-i, 0) * 90ms) both;
  }
  .showcase__lead    { animation: intro-rise var(--intro-dur) var(--intro-ease) 340ms both; }
  .showcase__actions { animation: intro-rise var(--intro-dur) var(--intro-ease) 440ms both; }
  .showcase__facts   { animation: intro-fade var(--intro-dur) var(--intro-ease) 620ms both; }

  /* On .stage__browser, not .stage__device: the phone hangs outside the
     device box and a retained clip-path would cut it off. The end state
     insets outward so the frame's drop shadow survives the fill. */
  .stage__browser {
    animation: stage-on 1100ms var(--intro-ease) 260ms both;
  }
  html[dir="rtl"] .stage__browser { animation-name: stage-on-rtl; }
  .stage__phone { animation: intro-panel var(--intro-dur) var(--intro-ease) 860ms both; }

  .stage__flow,
  .stage__credit { animation: intro-fade var(--intro-dur) var(--intro-ease) 900ms both; }
}

/* ============================================================
   5. FIXES FROM THE FIRST INSPECTION PASS
   ============================================================ */

/* ---- The store sizes itself against its own column, not the
        viewport: the shop sits in a narrow grid track on desktop
        and full width on a phone, so a media query would be
        measuring the wrong box. ---- */
@container (min-width: 20rem) {
  .shop__grid { grid-template-columns: 1fr 1fr; }
}
@container (min-width: 34rem) {
  .shop__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Phone clearance for the flow list ---- */
@media (min-width: 48rem) {
  .stage__flow { margin-block-start: clamp(2.75rem, 4vw, 3.25rem); }
}

/* The brand lockup and the cart button fight for one row in a phone-width
   store; below 26rem the name takes its own line rather than breaking. */
@container (max-width: 26rem) {
  .shop__brand { flex-direction: column; align-items: flex-start; gap: 0; }
  .shop__brand-name { white-space: nowrap; }
  .shop__bar { gap: var(--space-sm); }
}

/* ============================================================
   7. THE DEMO CHECKOUT
   ------------------------------------------------------------
   Lives inside the same store frame, so the visitor watches one
   shop move from catalogue to payment rather than jumping to a
   separate page. It takes the full container width while it is
   open — a checkout crammed into a third of the page proves
   nothing about whether we can build one.
   ============================================================ */

/* While checking out, the sales copy is hidden by shop-demo.js and the
   grid collapses to a single full-width column. The class lands on the
   section, which is what carries data-shop. */
.shopdemo.is-checkout .shopdemo__inner { grid-template-columns: minmax(0, 1fr); }

/* .shop__cart, .shop__back and the reveal boxes all set a display, which
   outranks the UA sheet's [hidden] rule. Scoped to the two prototype
   sections rather than set globally. */
.showcase [hidden],
.shopdemo [hidden] { display: none !important; }

.shop__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--brand-primary);
  box-shadow: inset 0 0 0 1px var(--rule);
  background: var(--surface);
  transition: box-shadow var(--transition-base), background var(--transition-base);
}
.shop__back:hover { background: var(--ground-b); box-shadow: inset 0 0 0 1px var(--brand-primary); }
.shop__back svg { inline-size: 1em; block-size: 1em; }

/* ---- Progress ---- */

.ck__progress {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  border-block-end: 1px solid var(--rule);
  background: var(--ground-b);
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted-on-tint);
}
.ck__progress li { display: flex; align-items: center; gap: var(--space-xs); }
.ck__progress-num {
  display: grid;
  place-items: center;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.ck__progress [aria-current="step"] { color: var(--text-strong); }
.ck__progress [aria-current="step"] .ck__progress-num {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  box-shadow: none;
}
.ck__progress .is-done { color: var(--text-strong); }
.ck__progress .is-done .ck__progress-num {
  background: color-mix(in srgb, var(--success) 16%, var(--surface));
  color: var(--success);
  box-shadow: none;
}

/* ---- Two columns: the form, and what it is buying ---- */

.ck {
  display: grid;
  gap: 0;
  align-items: stretch;
}
@container (min-width: 44rem) {
  .ck { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
  .ck__summary { border-inline-start: 1px solid var(--rule); border-block-start: 0 !important; }
}

.ck__main { padding: var(--space-xl) var(--space-lg); }
.ck__panel { max-width: 38rem; }
.ck__panel[hidden] { display: none; }

.ck__grid-2 { grid-template-columns: 1fr; }
@container (min-width: 32rem) {
  .ck__grid-2 { grid-template-columns: 1fr 1fr; }
}

.ck__hint {
  margin-block-start: var(--space-xs);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--muted-on-tint);
}

.ck__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-xl);
}
.ck__actions--center { justify-content: center; }

/* ---- Express checkout ---- */

.ck__express { display: grid; gap: var(--space-sm); }

.btn-pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  inline-size: 100%;
  min-block-size: 3rem;
  border-radius: var(--radius-md);
  background: #000;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-lg);
  transition: opacity var(--transition-base);
}
.btn-pay:hover { opacity: 0.86; color: #fff; }
.btn-pay svg { inline-size: 1.15em; block-size: 1.15em; }
.btn-pay:disabled { opacity: 0.6; }
.btn-pay.is-busy span::after {
  content: "";
  display: inline-block;
  inline-size: 0.9em;
  block-size: 0.9em;
  margin-inline-start: 0.5em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: var(--radius-full);
  animation: ck-spin 620ms linear infinite;
}
@keyframes ck-spin { to { transform: rotate(1turn); } }

.ck__express-note {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--muted-on-tint);
}

.ck__or {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-block: var(--space-lg);
  font-size: var(--fs-sm);
  color: var(--muted-on-tint);
}
.ck__or::before,
.ck__or::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--rule);
}

/* ---- Tabs ---- */

.ck__tabs {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.25rem;
  margin-block-end: var(--space-lg);
  border-radius: var(--radius-full);
  background: var(--ground-b);
}
.ck__tab {
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--muted-on-tint);
  transition: background var(--transition-base), color var(--transition-base);
}
.ck__tab:hover { color: var(--text-strong); }
.ck__tab[aria-selected="true"] { background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-sm); }

/* ---- Choice rows: delivery methods, payment methods ---- */

.ck__choices { border: 0; padding: 0; margin: 0 0 var(--space-lg); }
.ck__choices legend { margin-block-end: var(--space-xs); }

.ck__choice {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--rule);
  cursor: pointer;
  transition: box-shadow var(--transition-base), background var(--transition-base);
}
.ck__choice + .ck__choice { margin-block-start: var(--space-xs); }
.ck__choice:hover { background: var(--ground-b); }
.ck__choice:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--brand-primary);
  background: var(--ground-b);
}
.ck__choice:has(input:focus-visible) { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.ck__choice input { accent-color: var(--brand-primary); inline-size: 1.05rem; block-size: 1.05rem; flex: none; }
.ck__choice-body { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; }
.ck__choice-name { font-weight: 600; color: var(--text-strong); font-size: var(--fs-sm); }
.ck__choice-note { font-size: var(--fs-xs); color: var(--muted-on-tint); line-height: 1.45; }
.ck__choice-price { font-weight: 600; color: var(--text-strong); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

.ck__reveal[hidden] { display: none; }

/* ---- The one thing on this page that must not be mistaken for real ---- */

.ck__demo-warning {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  margin-block-end: var(--space-lg);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-body);
}
.ck__demo-warning svg { inline-size: 1.25rem; block-size: 1.25rem; flex: none; color: var(--danger); }

/* ---- Pay button busy state ---- */

.btn.is-busy { opacity: 0.75; }

/* ---- Confirmation ---- */

.ck__done { max-width: 32rem; text-align: center; margin-inline: auto; padding-block: var(--space-xl); }
.ck__done-mark {
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  margin: 0 auto var(--space-md);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--success) 14%, var(--surface));
  color: var(--success);
  animation: ck-pop 520ms var(--ease-out-expo) both;
}
.ck__done-mark svg { inline-size: 1.5rem; block-size: 1.5rem; }
.ck__done-title { font-size: var(--fs-2xl); margin: 0; }
.ck__done-ref {
  margin-block-start: var(--space-2xs);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--muted-on-tint);
}
.ck__done-text {
  margin-block-start: var(--space-md);
  line-height: var(--leading-body);
  color: var(--text-body);
}
.ck__done-text strong { color: var(--text-strong); }
@keyframes ck-pop {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ck__done-mark { animation: none; }
  .btn-pay.is-busy span::after { animation-duration: 1.6s; }
}

/* ---- Order summary rail ---- */

.ck__summary {
  padding: var(--space-xl) var(--space-lg);
  border-block-start: 1px solid var(--rule);
  background: var(--ground-b);
}
.ck__summary-title {
  font-size: var(--fs-base);
  margin: 0 0 var(--space-md);
}
.ck__lines { list-style: none; margin: 0; padding: 0; }
.ck__line {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
}
.ck__line + .ck__line { border-block-start: 1px solid var(--rule); }
.ck__line-img {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--ground-b-deep);
  padding: 0.15rem;
  flex: none;
}
.ck__line-name { flex: 1; font-size: var(--fs-sm); color: var(--text-strong); line-height: 1.35; }
.ck__line-qty { display: block; font-size: var(--fs-xs); color: var(--muted-on-tint); font-variant-numeric: tabular-nums; }
.ck__line-price { font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }

.ck__totals {
  margin: var(--space-md) 0 0;
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--rule);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.ck__totals > div { display: flex; justify-content: space-between; gap: var(--space-md); }
.ck__totals > div + div { margin-block-start: var(--space-xs); }
.ck__totals dt { color: var(--muted-on-tint); }
.ck__totals dd { margin: 0; color: var(--text-strong); }
.ck__totals-grand {
  margin-block-start: var(--space-sm) !important;
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--rule);
  font-size: var(--fs-base);
}
.ck__totals-grand dt { color: var(--text-strong); font-weight: 600; }
.ck__totals-grand dd { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-lg); }

.ck__support {
  display: flex;
  gap: var(--space-xs);
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--rule);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--muted-on-tint);
}
.ck__support svg { inline-size: 1rem; block-size: 1rem; flex: none; color: #128c7e; }

/* Advancing a step scrolls the store back into view; the sticky header
   would otherwise cover the top of the panel that just opened. */
.shopdemo { scroll-margin-block-start: calc(var(--header-h) + 1rem); }

/* components.css focuses fields with a gold border and glow. Gold is
   2.42:1 on white, under the 3:1 a non-text indicator needs, so inside
   the checkout the focus state uses the brand blue instead. The library
   has the same problem on every other form on the site. */
.shopdemo .field__control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 20%, transparent);
}

/* ============================================================
   8. THE STAGE ON A PHONE
   ------------------------------------------------------------
   Below 48rem the flow list used to wrap the five screen names
   into three stacked rows, and the device was hidden outright.
   Both are fixed here rather than in the rules above, so the
   desktop geometry those rules describe stays readable.
   ============================================================ */
@media (max-width: 47.999rem) {

  /* ---- Flow nav: one horizontal strip that scrolls ----
     display:block, not flex: the label needs its own line above the
     names, and a single flex row cannot both break after the label
     and keep the rest of the items on one unwrapped line. Inline-block
     items in a nowrap block do exactly that. */
  .stage__flow {
    display: block;
    white-space: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    /* The active item's underline sits on the content edge; without
       this it is the first thing an overflow scroller clips. */
    padding-block-end: 0.3rem;
  }
  .stage__flow::-webkit-scrollbar { display: none; }
  /* The single-column grid sizes its track from max-content, and a
     nowrap strip's max-content is the whole unwrapped row — 950px at
     393. Without this the entire hero column stretches to fit it. */
  .showcase__inner { grid-template-columns: minmax(0, 1fr); }

  /* No scroll-snap here: Chrome resolves an initial snap on layout and
     landed the Lead Engine strip 134px in, with its first name already
     scrolled off. The cycle positions the strip itself. */
  .stage__flow > li { display: inline-block; }
  .stage__flow > li + li { margin-inline-start: var(--space-lg); }
  /* The label is the first item, so the rule above would indent the
     first name away from the label it sits under. */
  .stage__flow-label + li { margin-inline-start: 0; }
  /* Trailing breathing room at the scroll end. The list's own
     padding-inline-end sits outside the scrollable content, so the last
     name would otherwise stop hard against the viewport edge. */
  .stage__flow > li:last-child { padding-inline-end: var(--container-pad); }
  /* Its own line, and pinned to the start of the scrollport: the cycle
     advances on its own, so without this the section's own label slides
     out of view while nobody is touching the page. */
  .stage__flow > .stage__flow-label {
    display: block;
    position: sticky;
    inset-inline-start: 0;
  }

  /* ---- The device, back on ----
     Same idea as the desktop stage — hung off the frame's bottom start
     corner — but it stops just short of the flow list rather than
     dropping past it, so the names below keep the full width to scroll
     in. Scoped away from .showcase--product, whose phone holds a drawn
     site sized against the wider frame it was designed in.

     REAL GEOMETRY. Every number below is an iPhone 15 measurement
     divided by the body width, so one variable — --dev-w — drives the
     whole drawing and it stays a real phone at any size:

       body        71.6 x 147.6mm      -> 1 : 2.061
       screen      1179 x 2556 @460ppi -> 65.1 x 141.1mm, 19.5:9
       rail        (71.6 - 65.1) / 2   -> 3.25mm  = 0.0454 W
       screen r.   55pt                -> 9.11mm  = 0.1272 W
       body r.     55pt + rail         -> 12.36mm = 0.1726 W
       island      125 x 36.67pt       -> 20.7 x 6.07mm, 11pt from the top

     The body ratio is not set anywhere: a 19.5:9 screen inside a rail of
     0.0454 W comes out at 1 : 2.0607 on its own, which is the phone to
     within a tenth of a millimetre.

     Percentages resolve against the PADDING box — the screen — so the
     body-relative figures above are converted to screen-relative ones
     where they are used (screen height is 1.970 W, body height 2.061 W). */
  .showcase .stage__phone {
    /* 5rem, less the 20%. */
    --dev-w: 4rem;
    display: block;
    inline-size: var(--dev-w);
    inset-inline-start: -0.5rem;
    inset-block-end: -1.25rem;
    padding: calc(var(--dev-w) * 0.0454);
    border-radius: calc(var(--dev-w) * 0.1726);
  }
  /* The screen is a screenshot on the homepage and a drawn site on the
     product pages; prototype-trade.css and prototype-ops.css give those
     the same 1.3rem radius the homepage screen used to carry, and both
     load after this file — hence the doubled class, which buys the one
     step of specificity needed to make the radius proportional here too. */
  .showcase .stage__phone-screen,
  .showcase--product .stage__phone > .msite--phone.msite,
  .showcase--product .stage__phone > .app--phone.app {
    border-radius: calc(var(--dev-w) * 0.1272);
  }
  /* The strip is 9cqw of a device that is now 64px wide, and the 0.5rem
     floor was holding it at an 8px em — a status bar a fifth of the phone
     wide. The floor drops so it scales with the device. Homepage only: the
     drawn sites size their whole page off this em, not just the strip. */
  .showcase:not(.showcase--product) .stage__phone-screen {
    font-size: clamp(0.34rem, 9cqw, 0.8rem);
  }
  /* The drawn sites have the same floor for the same reason, and it
     matters more there: their whole page is sized off this em, so a floor
     that holds at 8px on a 58px screen renders the hero ~40% larger than
     the same device shows on desktop and crops the headline mid-word.
     Below the floor the cqw term takes over and the phone renders the
     page at exactly the proportions the desktop device does. Two classes
     plus the device, to outrank the page layers that load after this
     file and set the desktop root em. */
  .showcase--product .stage__phone > .msite.msite--phone {
    font-size: clamp(0.34rem, 9cqw, 0.8rem);
  }
  .showcase--product .stage__phone > .app.app--phone {
    font-size: clamp(0.3rem, 8.2cqw, 0.75rem);
  }

  /* The island moves onto the screen, which frees the device's own
     ::before for the buttons on the far rail. It is inside the screen on
     a real phone too, so the screen's overflow clip is no loss. Both
     drawn screens are position:relative already, and both pseudos on them
     were unused. */
  .showcase .stage__phone-screen::before,
  .showcase--product .stage__phone > .msite--phone::before,
  .showcase--product .stage__phone > .app--phone::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset-block-start: calc(var(--dev-w) * 0.0254);
    inset-inline: 0;
    margin-inline: auto;
    inline-size: 31.8%;
    block-size: calc(var(--dev-w) * 0.0848);
    border-radius: var(--radius-full);
    background: #07080e;
  }

  /* Side button, inline-end — the power button, right side on a real
     phone, and inset-inline-end puts it on the correct side in Arabic. */
  .showcase .stage__phone::after {
    inset-inline-end: calc(var(--dev-w) * -0.012);
    inset-block-start: 29.1%;
    inline-size: max(1px, calc(var(--dev-w) * 0.014));
    block-size: 15.2%;
  }

  /* Action button and the two volume keys, on the opposite rail. One
     strip exactly one button wide, with the three keys painted into it
     as background layers: the layers need no horizontal placement, so
     the whole thing mirrors on inset-inline-start alone.
     Y positions are top / (100% - height), because background-position
     percentages resolve against the leftover space. */
  .showcase .stage__phone::before {
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--dev-w) * -0.012);
    inset-inline-end: auto;
    margin-inline: 0;
    inline-size: max(1px, calc(var(--dev-w) * 0.014));
    block-size: auto;
    border-radius: 0;
    box-shadow: none;
    background: none;
    background-image:
      linear-gradient(#7c8093, #3c3f52),
      linear-gradient(#7c8093, #3c3f52),
      linear-gradient(#7c8093, #3c3f52);
    background-size: 100% 4.7%, 100% 7.84%, 100% 7.84%;
    background-position: 0 23.9%, 0 32.7%, 0 43.4%;
    background-repeat: no-repeat;
  }

  /* 20px of the device hangs below the frame, and the list's own gap is
     24px. A little more of a gap so it does not graze the label. */
  .showcase .stage__flow { margin-block-start: 2.25rem; }

  /* ---- The store: one row of coffees, scrolled sideways ----
     Two columns of four is two rows on a phone, and the second row is
     most of a screen tall. One row that scrolls costs a third of the
     height and shows the range is longer than the window.

     grid-template-columns: none is doing real work — the container
     queries in section 5 set 1fr 1fr and repeat(4, 1fr), and those are
     container rules, so nothing about a narrow viewport switches them
     off on its own. */
  .shop__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    /* Narrow enough that a third card shows at the edge — two that fit
       exactly would read as a row of two that happens to be cut. */
    grid-auto-columns: 9.75rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
  }
  .shop__item { scroll-snap-align: start; }
  .shop__grid::-webkit-scrollbar { display: none; }
  /* The filter hides items with display:none, which takes them out of
     the row cleanly — the 1px gaps that draw the hairlines between
     cards close up with them. */

  /* ---- The cart drawer: half the viewport, not all of it ----
     min(26rem, 100vw) meant the whole screen on a phone, which reads as
     a page rather than a panel — the store it slides over disappears.
     At half that the store stays visible behind it, and the three-column
     line (thumbnail | details | stepper) has to become two: the stepper
     drops under the name instead of squeezing it to nothing. */
  .cart { inline-size: 50vw; }
  .cart__head,
  .cart__items,
  .cart__foot { padding: var(--space-md); }

  .cart-line {
    grid-template-columns: 2.5rem 1fr;
    gap: var(--space-sm);
    align-items: start;
  }
  .cart-line__img { inline-size: 2.5rem; block-size: 2.5rem; }
  .cart-line__qty {
    grid-column: 2;
    justify-self: start;
    margin-block-start: var(--space-xs);
  }
  .cart-line__qty button { inline-size: 1.6rem; block-size: 1.6rem; }
  /* space-between with nothing between them: at 320 the label and the
     figure meet in the middle of the foot. */
  .cart__subtotal { gap: var(--space-xs); }

  /* ---- Card rows: one card per screen ----
     Used twice on this page, on the three packages and on the work
     grid; both are a .grid--3 of cards that stack into a column of
     screen-tall blocks on a phone.

     Stacked, the three cards are about four screens of scrolling before
     the comparison table, and a visitor who stops at the first one never
     learns the other two exist. One card at a time, moved with a button,
     puts them side by side as a choice.

     grid-auto-columns: 100% is the whole track — which is the container's
     content box — so a card is exactly as wide as the page's own text
     column and the gutters left and right of it are the container's,
     equal by construction. */
  [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;
    /* .tier__flag ('Most chosen') is translated up through the card's top
       edge, and overflow-x: auto computes overflow-y to auto — without the
       room it would be clipped in half. */
    padding-block-start: 0.85rem;
    margin-block-start: -0.85rem;
  }
  [data-carousel]::-webkit-scrollbar { display: none; }
  [data-carousel] > * { scroll-snap-align: start; }
  /* The cards reveal on scroll, and cards 2 and 3 start outside the
     viewport horizontally. The observer does fire when they are scrolled
     in, but the first one arrives mid-transition; inside the track they
     are simply visible from the start. */
  [data-carousel] > .reveal { opacity: 1; transform: none; }

  .carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-block-end: var(--space-lg);
  }
  .carousel-nav[hidden] { display: none; }
  .carousel-nav__arrow {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--brand-primary);
    color: var(--color-white);
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--brand-primary) 80%, transparent);
    transition: background var(--transition-base), opacity var(--transition-base);
  }
  .carousel-nav__arrow svg { inline-size: 1.25rem; block-size: 1.25rem; }
  /* Disabled rather than hidden: a control that disappears at the ends
     reads as a bug, and the pair keeps the row centred either way. */
  .carousel-nav__arrow:disabled {
    background: transparent;
    color: var(--text-muted);
    box-shadow: inset 0 0 0 1px var(--rule);
  }
  .carousel-nav__dots { display: flex; align-items: center; gap: 0; }
  /* The button is the 24x24 hit area WCAG 2.5.8 asks for; ::before is the
     visible dot, the same 8px (22px when current) it always was. */
  .carousel-nav__dot {
    display: grid;
    place-items: center;
    min-inline-size: 1.5rem;
    block-size: 1.5rem;
    padding: 0;
    border-radius: var(--radius-full);
    background: none;
  }
  .carousel-nav__dot::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--text-muted) 40%, transparent);
    transition: background var(--transition-base), inline-size var(--transition-base);
  }
  .carousel-nav__dot[aria-current="true"] { min-inline-size: 1.85rem; }
  .carousel-nav__dot[aria-current="true"]::before {
    inline-size: 1.35rem;
    background: var(--brand-primary);
  }

  /* ---- Comparison table: the label column stays put ----
     The table is 52rem wide and the wrapper scrolls, so on a phone you
     read "2-3 weeks" with the row it belongs to already off the screen.
     The first column freezes to the start edge and the packages scroll
     under it.

     Scoped away from .compare--stack, which is the tier pages' answer to
     the same table — there the head is hidden and each row becomes its
     own card, so there is no column to freeze. */
  /* Free scrolling leaves a package half past the frozen column; snapping
     lands each one flush against it. scroll-padding is the frozen
     column's own width, or a snapped column would stop underneath it. */
  .compare-wrap:not(.compare--stack) {
    scroll-snap-type: inline proximity;
    scroll-padding-inline-start: 9rem;
  }
  .compare-wrap:not(.compare--stack) .compare thead th:not(:first-child) {
    scroll-snap-align: start;
  }
  .compare-wrap:not(.compare--stack) .compare thead th:first-child,
  .compare-wrap:not(.compare--stack) .compare tbody th {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    /* The cells are transparent over the section's tint, so the frozen
       column has to paint that same tint itself or the packages would
       scroll visibly through it. */
    background: var(--ground-tint);
  }
  .compare-wrap:not(.compare--stack) .compare thead th:first-child {
    z-index: 2;
    background: var(--surface-muted);
  }
  /* border-collapse gives the divider to whichever cell wins the border
     conflict, and a sticky cell leaves its collapsed border behind when
     it moves. Drawn on the cell instead, it travels with it. */
  .compare-wrap:not(.compare--stack) .compare th:first-child::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: 1px;
    background: var(--border);
  }
  /* 13rem of frozen column on a 361px table leaves too little for the
     package beside it, and the labels can wrap now that they are not
     competing with three columns for width.

     The package column is sized to the space actually left beside the
     frozen labels, and the table to three of those plus the labels —
     rather than the shared 52rem, whose thirds came out 229px wide in a
     215px gap, so 14px of every package column was unreachable: hidden
     under the labels at one end of the scroll and past the edge at the
     other. That is what cut "and" off the end of the Digital Operations
     line. The wrapper is the container's content box, less its own two
     border pixels. */
  .compare-wrap:not(.compare--stack) .compare {
    --cmp-label: 9rem;
    --cmp-col: calc(100vw - 2 * var(--container-pad) - 2px - var(--cmp-label));
    min-inline-size: calc(var(--cmp-label) + 3 * var(--cmp-col));
  }
  .compare-wrap:not(.compare--stack) .compare thead th:first-child {
    inline-size: var(--cmp-label);
  }
  .compare-wrap:not(.compare--stack) .compare thead th:not(:first-child) {
    inline-size: var(--cmp-col);
  }
  /* Both header rows stop nowrapping. "Digital Operations" is wider than
     a 142px column at 320, and a nowrapped head cell drags the whole
     table 10px past the width its columns declare — which is enough to
     leave the last package sitting under the frozen labels at the end of
     the scroll, exactly the clipping this was meant to remove. */
  .compare-wrap:not(.compare--stack) .compare tbody th,
  .compare-wrap:not(.compare--stack) .compare thead th { white-space: normal; }
  .compare-wrap:not(.compare--stack) .compare th,
  .compare-wrap:not(.compare--stack) .compare td { padding: var(--space-md); }
}

/* ============================================================
   THE HOMEPAGE HERO — a website, taken apart.
   Opens as ONE flat page. It tilts into an isometric view and
   breaks into its layers (the site on top, five capability
   layers under it). A track below walks through the twenty
   features without end; the layer a feature belongs to has its
   NAME highlighted. Hover a card to stop; scroll or use the
   arrows to browse by hand.
   ============================================================ */

@property --hstack-gap { syntax: "<length>"; inherits: true; initial-value: 0px; }

.hstack {
  /* ONE colour for every layer's highlight, chip and outline. */
  --c-foundations: var(--brand-primary);
  --c-found: var(--brand-primary);
  --c-convert: var(--brand-primary);
  --c-sell: var(--brand-primary);
  --c-measure: var(--brand-primary);
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
  padding-inline-end: var(--container-pad);
  min-inline-size: 0;
}

/* ---- The scene ---- */
.hstack__scene {
  position: relative;
  block-size: clamp(22rem, 36vw, 28rem);
  perspective: 2200px;
  display: grid;
  place-items: center;
}
.hstack__stack {
  --iso: translateX(-16%) translateY(68%) rotateX(58deg) rotateZ(-38deg);
  position: relative;
  inline-size: clamp(13rem, 21vw, 17rem);
  aspect-ratio: 1.55;
  transform-style: preserve-3d;
  transform: var(--iso);
  transition: transform 1300ms var(--ease), --hstack-gap 1300ms var(--ease) 250ms;
}
html[dir="rtl"] .hstack__stack { --iso: translateX(16%) translateY(68%) rotateX(58deg) rotateZ(38deg); }
.hstack.is-open .hstack__stack { --hstack-gap: clamp(2.8rem, 4.6vw, 3.8rem); }

/* ONE PAGE first: flat, facing the reader, only the site showing. */
.hstack.is-flat .hstack__stack { transform: translateY(8%) scale(1.3); }
.hstack.is-flat .hstack__ly:not(.hstack__ly--site) { opacity: 0; }
.hstack.is-flat .hstack__lbl { opacity: 0; }

.hstack__ly {
  position: absolute;
  inset: 0;
  border-radius: 0.9rem;
  transform: translateZ(calc(var(--i) * var(--hstack-gap)));
  box-shadow: 0 0 0 1px rgba(2, 7, 37, 0.08), 0 18px 28px -18px rgba(2, 7, 37, 0.4);
  background: color-mix(in srgb, var(--c) 8%, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8%;
  padding: 6%;
  transition: opacity 700ms var(--ease) calc(var(--i) * 90ms + 300ms), box-shadow 300ms;
}
.hstack__ly--foundations { --c: var(--c-foundations); }
.hstack__ly--found { --c: var(--c-found); }
.hstack__ly--convert { --c: var(--c-convert); }
.hstack__ly--sell { --c: var(--c-sell); }
.hstack__ly--measure { --c: var(--c-measure); }
.hstack__ly--site { --c: var(--brand-primary); }
/* The layer itself only gets a thin outline — it never rises. */
.hstack__ly.is-on { box-shadow: 0 0 0 2px var(--c), 0 18px 28px -18px rgba(2, 7, 37, 0.4); }

/* ---- The site (the lid) ---- */
.hstack__ly--site {
  background: #fff;
  display: grid;
  align-content: start;
  justify-content: stretch;
  gap: 7%;
  padding: 7%;
}
.hsm-bar { display: block; block-size: 0.5rem; inline-size: 30%; border-radius: 3px; background: var(--brand-primary); }
.hsm-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 7%; }
.hsm-hero span { display: grid; gap: 0.35rem; align-content: center; }
.hsm-hero b { display: block; block-size: 0.45rem; border-radius: 3px; background: #020725; }
.hsm-hero b + b { inline-size: 70%; }
.hsm-hero em { display: block; block-size: 0.7rem; inline-size: 55%; border-radius: 99px; background: var(--brand-accent); }
.hsm-hero > i { display: block; aspect-ratio: 1.3; border-radius: 0.45rem; background: linear-gradient(135deg, #3a2fd9, #02006b); }
.hsm-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.hsm-row i { display: block; block-size: 1.6rem; border-radius: 0.35rem; background: #eef0f7; }

/* ---- Layer motifs: drawn, generic ---- */
.hstack__ly i { display: block; flex: none; }
.hsm-phone { inline-size: 12%; aspect-ratio: 0.5; border-radius: 0.4rem; border: 2px solid var(--c); }
.hsm-gauge { inline-size: 22%; aspect-ratio: 2; border-radius: 99px 99px 0 0; border: 3px solid var(--c); border-block-end: 0; position: relative; }
.hsm-gauge::after { content: ""; position: absolute; left: 50%; bottom: 0; inline-size: 2px; block-size: 70%; background: var(--c); transform-origin: bottom; transform: rotate(38deg); }
.hsm-lock { inline-size: 12%; aspect-ratio: 0.9; border-radius: 0.25rem; background: var(--c); position: relative; margin-block-start: 5%; }
.hsm-lock::before { content: ""; position: absolute; inset-inline: 22%; bottom: 88%; block-size: 55%; border: 2px solid var(--c); border-block-end: 0; border-radius: 99px 99px 0 0; }
.hsm-search { inline-size: 48%; block-size: 1.3rem; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 2px var(--c); position: relative; }
.hsm-search::after { content: ""; position: absolute; inset-inline-end: 0.5rem; top: 50%; inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; border: 2px solid var(--c); translate: 0 -60%; }
.hsm-pin { inline-size: 1.4rem; aspect-ratio: 1; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--c); }
.hsm-cta { inline-size: 26%; block-size: 1.1rem; border-radius: 99px; background: var(--c); }
.hsm-bubble { inline-size: 16%; block-size: 0.9rem; border-radius: 0.6rem 0.6rem 0.6rem 0.15rem; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.hsm-bubble--me { background: color-mix(in srgb, var(--c) 30%, #fff); border-radius: 0.6rem 0.6rem 0.15rem 0.6rem; }
.hsm-stars { inline-size: 18%; block-size: 0.7rem; background: repeating-linear-gradient(90deg, var(--brand-accent) 0 18%, transparent 18% 20%); border-radius: 2px; }
.hsm-cart { inline-size: 16%; aspect-ratio: 1.2; border: 3px solid var(--c); border-block-start: 0; border-radius: 0 0 0.4rem 0.4rem; }
.hsm-card { inline-size: 24%; aspect-ratio: 1.6; border-radius: 0.35rem; background: linear-gradient(135deg, var(--brand-accent), var(--brand-accent-dark)); }
.hsm-cash { inline-size: 20%; aspect-ratio: 2; border-radius: 0.2rem; background: color-mix(in srgb, #1f9e52 30%, #fff); box-shadow: inset 0 0 0 2px #1f9e52; }
.hsm-bars { inline-size: 30%; block-size: 2.4rem; display: flex !important; align-items: flex-end; gap: 12%; }
.hsm-bars b { flex: 1; border-radius: 2px 2px 0 0; background: var(--c); }
.hsm-bars b:nth-child(1) { block-size: 35%; } .hsm-bars b:nth-child(2) { block-size: 60%; } .hsm-bars b:nth-child(3) { block-size: 48%; } .hsm-bars b:nth-child(4) { block-size: 90%; }
.hsm-shield { inline-size: 12%; aspect-ratio: 0.85; background: var(--c); clip-path: polygon(50% 0, 100% 16%, 100% 55%, 50% 100%, 0 55%, 0 16%); }

/* ---- Layer names (placed beside each layer by the script) ----
   The highlight lives HERE: the name of the active layer, or the one
   under the mouse, turns into a filled pill in the layer's colour. */
.hstack__lbl {
  --c: var(--text-muted);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.65rem 0.2rem 0;
  border-radius: 99px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  opacity: 0;
  /* A button: pick a layer to see only its features. */
  border: 0;
  background-color: transparent;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  transition: opacity 500ms var(--ease) 900ms, color 250ms, background-color 250ms, padding 250ms;
}
.hstack__lbl:hover { color: var(--text-strong); }
.hstack__lbl:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }
.hstack__ly { cursor: pointer; }
/* Desktop: the names float beside their layers (placed by the script). */
.hstack__names { display: contents; }
html[dir="rtl"] .hstack__lbl { padding: 0.2rem 0 0.2rem 0.65rem; flex-direction: row-reverse; }
.hstack__lbl::before { content: ""; inline-size: 1.6rem; block-size: 1px; background: currentColor; opacity: 0.45; }
.hstack.is-open .hstack__lbl { opacity: 1; }
.hstack__lbl[data-hstack-lbl="foundations"] { --c: var(--c-foundations); }
.hstack__lbl[data-hstack-lbl="found"] { --c: var(--c-found); }
.hstack__lbl[data-hstack-lbl="convert"] { --c: var(--c-convert); }
.hstack__lbl[data-hstack-lbl="sell"] { --c: var(--c-sell); }
.hstack__lbl[data-hstack-lbl="measure"] { --c: var(--c-measure); }
.hstack__lbl[data-hstack-lbl="site"] { --c: var(--brand-primary); }
.hstack__lbl.is-on {
  color: #fff;
  background-color: var(--c);
  padding-inline: 0 0.75rem;
}
html[dir="rtl"] .hstack__lbl.is-on { padding-inline: 0.75rem 0; }
.hstack__lbl.is-on::before { opacity: 0; }
.hstack__lbl[aria-pressed="true"] { color: #fff; background-color: var(--c); padding-inline: 0 0.75rem; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
html[dir="rtl"] .hstack__lbl[aria-pressed="true"] { padding-inline: 0.75rem 0; }
.hstack__lbl[aria-pressed="true"]::before { opacity: 0; }

/* ---- The track: scrolls by hand, and on its own ---- */
.hstack__rail { position: relative; display: grid; gap: 0.6rem; }
/* previous · pause/play · next, under the strip, at every width. */
.hstack__controls { display: flex; justify-content: center; align-items: center; gap: 0.6rem; }
.hstack__track-wrap {
  container-type: inline-size;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  outline-offset: 4px;
  border-radius: 1rem;
}
.hstack__track-wrap::-webkit-scrollbar { display: none; }
.hstack__track {
  display: flex;
  gap: 0.9rem;
  margin: 0;
  padding: 0.3rem 0 0.8rem;
  list-style: none;
  inline-size: max-content;
}
/* Room either side so the first and last card can reach the centre. */
/* Sized from the strip's own width (it is a container) so it is right
   BEFORE the first snap: resizing it afterwards made the browser re-snap
   to the second card. Half the strip, less half a card, less the gap. */
.hstack__track::before, .hstack__track::after { content: ""; flex: none; inline-size: max(0px, calc(50cqw - 7.5rem - 0.9rem)); }
.hstack__card {
  flex: none;
  inline-size: 15rem;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(2, 7, 37, 0.08), 0 14px 30px -20px rgba(2, 7, 37, 0.35);
  scroll-snap-align: center;
  /* 0.45 dimmed the group label to 2.8:1; 0.75 keeps the depth cue and
     every line of text on an off-centre card above 4.5:1. */
  opacity: 0.75;
  scale: 0.95;
  transition: opacity 350ms var(--ease), scale 400ms var(--ease);
}
.hstack__card.is-active { opacity: 1; scale: 1; }
.hstack__grp { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 99px; font-size: 0.72rem; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); }
.hstack__grp--foundations { --c: var(--c-foundations); } .hstack__grp--found { --c: var(--c-found); } .hstack__grp--convert { --c: var(--c-convert); }
.hstack__grp--sell { --c: var(--c-sell); } .hstack__grp--measure { --c: var(--c-measure); }
/* A <p>, not an <h3> (audit P4): 20 card titles under the h1 with no h2 skipped
   a level. Weight restated because the h1-h4 rule no longer supplies it. */
.hstack__name { margin: 0.6rem 0 0; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; line-height: 1.25; color: var(--text-strong); letter-spacing: -0.01em; }
html[dir="rtl"] .hstack__name { letter-spacing: 0; }
.hstack__line { margin: 0.35rem 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-body); }

.hstack__arrow {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--text-strong);
  box-shadow: 0 0 0 1px rgba(2, 7, 37, 0.1), 0 6px 14px -8px rgba(2, 7, 37, 0.4);
  cursor: pointer;
  transition: background-color 200ms, color 200ms;
}
.hstack__arrow:hover { background: var(--brand-primary); color: #fff; }
.hstack__arrow:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }
/* Pause / play: the explicit stop control (WCAG 2.2.2) — not a hover. */
.hstack__pause .hstack__i-play { display: none; }
.hstack__pause[aria-pressed="true"] .hstack__i-pause { display: none; }
.hstack__pause[aria-pressed="true"] .hstack__i-play { display: block; }
.hstack__pause[aria-pressed="true"] { background: var(--brand-primary); color: #fff; }
.hstack__arrow svg { inline-size: 1.1rem; block-size: 1.1rem; }
.hstack__arrow--next svg { transform: scaleX(-1); }
html[dir="rtl"] .hstack__arrow--prev svg { transform: scaleX(-1); }
html[dir="rtl"] .hstack__arrow--next svg { transform: none; }

.hstack__credit { padding-inline-start: 0 !important; max-inline-size: 42rem; margin: 0; }

/* ---- Reduced motion: the stack starts open and stays still ---- */
@media (prefers-reduced-motion: reduce) {
  .hstack__stack, .hstack__ly, .hstack__lbl, .hstack__card { transition: none; }
  .hstack__card { opacity: 1; scale: 1; }
}

/* ---- Phones: a smaller stack, and the names as a chip row ---- */
@media (max-width: 47.999rem) {
  .hstack__scene { block-size: 22rem; }
  .hstack__stack,
  html[dir="rtl"] .hstack__stack { inline-size: 10.5rem; }
  .hstack__stack { --iso: translateY(62%) rotateX(58deg) rotateZ(-38deg); }
  html[dir="rtl"] .hstack__stack { --iso: translateY(62%) rotateX(58deg) rotateZ(38deg); }
  .hstack.is-open .hstack__stack { --hstack-gap: 2.3rem; }
  .hstack.is-flat .hstack__stack { transform: translateY(8%) scale(1.35); }
  /* Phone: no room beside the stack, and the tilted layers overlap under a
     finger — so the names become a row of chips under it. */
  .hstack__scene { grid-template-rows: 1fr auto; }
  .hstack__names { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; align-self: end; }
  .hstack__lbl { position: static; opacity: 1; transform: none !important; padding: 0.3rem 0.7rem; background-color: #fff; box-shadow: 0 0 0 1px var(--rule); }
  .hstack__lbl::before { display: none; }
  .hstack__lbl.is-on, .hstack__lbl[aria-pressed="true"] { padding: 0.3rem 0.7rem; }
  /* The desktop RTL rules pad one side only (for the leader line) and
     outrank the chip padding above — restore it for Arabic chips. */
  html[dir="rtl"] .hstack__lbl,
  html[dir="rtl"] .hstack__lbl.is-on,
  html[dir="rtl"] .hstack__lbl[aria-pressed="true"] { padding: 0.3rem 0.7rem; }
  .hstack.is-flat .hstack__lbl { opacity: 0; }
}

/* The narrowest phones: the English layer names wrap to a third row of
   chips, which pushed the stack 15px out of the top of the scene at 320. */
@media (max-width: 22.5rem) {
  .hstack__scene { block-size: 24rem; }
}