/**
 * Riftmana Home Sections
 *
 * Styles for [riftmana_hero] and [riftmana_promo]. Loaded by inc/home-sections.php
 * only on a page that contains one of those shortcodes, so nothing here leaks
 * onto the rest of the site.
 *
 * Everything is prefixed .rm-home- to stay clear of Blocksy and the deck builder.
 */

:root {
  --rmh-bg:      #16171a;
  --rmh-surf:    #1e2024;
  --rmh-line:    #31353b;
  --rmh-text:    #f1f2f4;
  --rmh-muted:   #99a1aa;
  --rmh-dim:     #6f767e;
  --rmh-gold:    #d4af37;
  --rmh-gold-hi: #f0cc5e;
  --rmh-blurple: #5865f2;
  --rmh-rail:    1450px;
}

/* The shortcodes sit inside Blocksy's container but the bands run edge to edge.
   overflow-x:clip on body stops the 100vw breakout from adding a horizontal
   scrollbar; clip (unlike hidden) does not break the sticky header. */
body {
  overflow-x: clip;
}

/* The sections carry the .alignfull class, which is how core's
   `.is-layout-constrained > :where(:not(.alignfull))` rule is opted out of —
   that rule caps width at --wp--style--global--content-size (1450px) and forces
   `margin-inline: auto !important`. Opting out is cleaner than fighting the
   !important. The vw maths below then does the actual edge-to-edge breakout. */
.rm-home {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  font-family: inherit;
}

/* Blocksy pads the content area with --theme-content-vertical-spacing (60px by
   default) via [data-vertical-spacing]. A full-bleed first band should meet the
   header instead, so cancel exactly that much — and only when it is applied, so
   changing the Customizer value keeps this correct. */
[data-vertical-spacing*="top"] .rm-home:first-child {
  margin-top: calc(var(--theme-content-vertical-spacing, 0px) * -1);
}

.rm-home *,
.rm-home *::before,
.rm-home *::after {
  box-sizing: border-box;
}

.rm-home-rail {
  max-width: var(--rmh-rail);
  margin: 0 auto;
  padding-inline: 28px;
}

.rm-home h1,
.rm-home h2 {
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.rm-home a {
  text-decoration: none;
}

/* Blocksy recolours every <a> on hover via --theme-link-hover-color (#009fd4).
   These links are brand badges and tiles that own their colour language, so
   neutralise the variable locally rather than chasing it per component. */
.rm-home a:hover,
.rm-home a:focus-visible {
  --theme-link-hover-color: currentColor;
}

.rm-home :focus-visible {
  outline: 2px solid var(--rmh-gold-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   1) Hero
   ========================================================================== */

.rm-home-hero {
  position: relative;
  overflow: hidden;
  background: #101114;
  border-bottom: 1px solid var(--rmh-line);
}

.rm-home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 430px at 74% 46%, rgba(212, 175, 55, 0.17), transparent 68%),
    radial-gradient(700px 380px at 20% 30%, rgba(70, 120, 220, 0.12), transparent 70%);
}

.rm-home-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
  gap: clamp(28px, 3vw, 44px);
  align-items: center;
  /* No min-height: the fan already sets the floor, and forcing 500px just
     padded empty space above and below it. */
  padding-top: clamp(18px, 2vw, 25px);
  padding-bottom: clamp(18px, 2vw, 25px);
}

.rm-home-eyebrow {
  margin: 0 0 clamp(11px, 1.4vw, 16px);
  font-size: clamp(10.5px, 1vw, 12px);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rmh-gold);
}

.rm-home-h1 {
  font-size: clamp(26px, 4.6vw, 54px);
  font-weight: 800;
  color: var(--rmh-text);
}

/* --- hero brand lockup ---------------------------------------------------
   The column is ~750px wide next to a 400px-tall fan; the brand at 54px was
   filling 8% of that width, which is what read as "empty". It is the size that
   was wrong, not the number of words.

   Every selector leads with .rm-home on purpose: the base `.rm-home h1` rule is
   (0,1,1), so a bare .rm-home-h1-lockup at (0,1,0) would silently lose. */

.rm-home .rm-home-h1-lockup {
  display: block;
  margin: 0;
  line-height: 1;
  letter-spacing: normal;
  text-wrap: wrap;
}

.rm-home .rm-home-wordmark {
  display: block;
  font-size: clamp(34px, 6vw, 76px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.045em;
  white-space: nowrap;
  color: #fff;
}

/* A vertical ramp rather than flat gold: at this size flat colour reads as a
   swatch, and it keeps the wordmark distinct from the flat-gold CTA below it --
   same hue, different surface. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .rm-home .rm-home-wordmark {
    background-image: linear-gradient(176deg,
      #ffffff 2%, #eef2f6 26%, #cfd6de 58%, #aab4c0 84%, #8e98a5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 clamp(16px, 2.2vw, 34px) rgba(255, 255, 255, 0.16));
  }
}

.rm-home .rm-home-tagline {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.3vw, 20px);
  margin-top: clamp(9px, 1.1vw, 16px);
  font-size: clamp(11.5px, 1.1vw, 15px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c3c9d0;
}

.rm-home .rm-home-tagline-t {
  flex: 0 1 auto;
  text-wrap: balance;
}

/* Carries the eye across the leftover column width, so the tagline reads as a
   measured baseline instead of a sentence that failed to fill the space. 2px,
   because a hairline vanishes next to 152px type. */
.rm-home .rm-home-tagline-rule {
  flex: 1 1 0;
  min-width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(212, 175, 55, 0.85), rgba(212, 175, 55, 0.10) 62%, rgba(212, 175, 55, 0));
}

.rm-home-sub {
  margin: 18px 0 32px;
  max-width: 46ch;
  font-size: 18px;
  line-height: 1.55;
  color: #c3c9d0;
}

.rm-home-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.rm-home-h1 + .rm-home-cta {
  margin-top: clamp(18px, 2vw, 26px);
}

.rm-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}

/* Matches the .button--gold treatment already used in the deck builder:
   gold ground, near-black label. */
.rm-home-btn-pri {
  background: var(--rmh-gold);
  color: #111;
}

.rm-home-btn-pri:hover,
.rm-home-btn-pri:focus-visible {
  background: var(--rmh-gold-hi);
  color: #111;
}

/* Quick links: solid orange, matching the buttons already on the site. Gold
   stays the single primary action so the row does not compete with it. */
.rm-home-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.rm-home-quick a {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 6px;
  background: #ff6900;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.16s;
}

.rm-home-quick a:hover,
.rm-home-quick a:focus-visible {
  background: #e65c00;
  color: #fff;
  animation: rmHomeShake 0.6s ease;
}

.rm-home-btn-pri:hover {
  animation: rmHomeShake 0.6s ease;
}

/* Hung off our own class rather than a Gutenberg preset colour class, so
   recolouring a button in the editor cannot silently kill the animation. */
@keyframes rmHomeShake {
  0%   { transform: translateY(0)    rotate(0deg); }
  20%  { transform: translateY(-4px) rotate(-2deg); }
  40%  { transform: translateY(-2px) rotate(2deg); }
  60%  { transform: translateY(-4px) rotate(-1deg); }
  80%  { transform: translateY(-2px) rotate(1deg); }
  100% { transform: translateY(0)    rotate(0deg); }
}

.rm-home-btn-sec {
  background: rgba(255, 255, 255, 0.05);
  border-color: #454a51;
  color: #eef0f2;
}

.rm-home-btn-sec:hover,
.rm-home-btn-sec:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  border-color: #6d747c;
  color: #fff;
}

/* --- card fan --- */

/* --rmh-fw drives both the card size and how far the outer cards sit from
   centre. Because the offsets are multiples of it, the fan shrinks as one
   object and the outer cards can never be clipped by a narrow viewport. */
.rm-home-fan {
  --rmh-fw: clamp(70px, 23.2vw, 200px);
  position: relative;
  height: calc(var(--rmh-fw) * 2);
}

.rm-home-fan-card {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: var(--rmh-fw);
  height: calc(var(--rmh-fw) * 1.4);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.62);
  transition: transform 0.3s;
}

.rm-home-fan-1 { transform: translate(-50%, -50%) translateX(calc(var(--rmh-fw) * -1.16)) rotate(-16deg) scale(0.86); }
.rm-home-fan-2 { transform: translate(-50%, -50%) translateX(calc(var(--rmh-fw) * -0.61)) rotate(-8deg)  scale(0.94); }
.rm-home-fan-3 {
  transform: translate(-50%, -50%) scale(1.06);
  z-index: 3;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.7);
}
.rm-home-fan-4 { transform: translate(-50%, -50%) translateX(calc(var(--rmh-fw) * 0.61)) rotate(8deg)  scale(0.94); }
.rm-home-fan-5 { transform: translate(-50%, -50%) translateX(calc(var(--rmh-fw) * 1.16)) rotate(16deg) scale(0.86); }

.rm-home-fan:hover .rm-home-fan-3 {
  transform: translate(-50%, -50%) scale(1.12);
}

/* ==========================================================================
   2) Promo band — app / Metafy / Discord
   ========================================================================== */

.rm-home-promo {
  position: relative;
  overflow: hidden;
  padding: 54px 0;
  background: var(--rmh-bg);
}

.rm-home-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.016) 0 2px,
    transparent 2px 9px
  );
}

.rm-home-promo-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.62fr 1fr;
  gap: 20px;
}

.rm-home-promo-stack {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
}

.rm-home-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rmh-line);
  border-radius: 14px;
  background: var(--rmh-surf);
  transition: transform 0.2s, border-color 0.2s;
}

.rm-home-tile:hover {
  transform: translateY(-4px);
}

.rm-home-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: background 0.25s;
}

.rm-home-h2 {
  margin-bottom: clamp(8px, 1vw, 11px);
  font-size: clamp(18px, 4.4vw, 29px);
  font-weight: 800;
  color: var(--rmh-text);
}

.rm-home-tile-text {
  margin: 0 0 clamp(16px, 2vw, 22px);
  max-width: 46ch;
  font-size: clamp(13.5px, 1.25vw, 15.5px);
  line-height: 1.55;
  color: #adb6c0;
}

.rm-home-kicker {
  display: inline-flex;
  align-items: center;
  margin: 0 0 15px;
  padding: 5px 11px;
  border: 1px solid rgba(56, 132, 232, 0.4);
  border-radius: 999px;
  background: rgba(56, 132, 232, 0.16);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8fc0f5;
}

/* --- app tile --- */

/* Named areas rather than source order: on phones the copy runs full width and
   the store badges move up beside a single smaller frame, which is the
   difference between this tile being ~420px tall and ~660px. */
.rm-home-tile-app {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "copy   phone"
    "stores phone";
  gap: 0 26px;
  align-items: center;
  padding: 34px 0 34px 36px;
  background: linear-gradient(112deg, #1c2733 0%, #191b20 58%);
}

.rm-home-tile-app:hover {
  border-color: #3d6ea8;
}

.rm-home-tile-app .rm-home-glow {
  background: radial-gradient(560px 300px at 82% 50%, rgba(56, 132, 232, 0.24), transparent 66%);
}

.rm-home-tile-app:hover .rm-home-glow {
  background: radial-gradient(560px 300px at 82% 50%, rgba(56, 132, 232, 0.34), transparent 66%);
}

.rm-home-app-copy { grid-area: copy;   position: relative; z-index: 2; }
.rm-home-stores   { grid-area: stores; }
.rm-home-phones   { grid-area: phone;  }

.rm-home-feats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.4vw, 18px);
  margin: 0 0 clamp(16px, 2vw, 24px);
  padding: 0;
  list-style: none;
  font-size: clamp(12.5px, 1.2vw, 13.5px);
  color: #9aa4ae;
}

.rm-home-feats li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.rm-home-feats svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  fill: #5fa8ea;
}

/* --- store buttons --- */

.rm-home-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Fixed basis rather than flex-grow: both badges stay identical whether one or
   two are rendered, instead of each sizing to its own label. */
.rm-home-store {
  flex: 0 0 205px;
}

.rm-home-store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px 9px 16px;
  border: 1px solid #3a4048;
  border-radius: 9px;
  background: #0a0b0d;
  color: var(--rmh-text);
  white-space: nowrap;
  transition: background 0.16s, border-color 0.16s;
}

.rm-home-store:hover,
.rm-home-store:focus-visible {
  background: #111318;
  border-color: #6a737d;
  color: var(--rmh-text);
}

.rm-home-store-ic {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.rm-home-store-apple {
  fill: #f1f2f4;
}

.rm-home-store-t {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #a5acb4;
}

.rm-home-store-n {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* --- phone --- */

/* --rmh-pw sizes both frames and the overlap between them, so they scale with
   the space available instead of overflowing and being clipped by the tile. */
.rm-home-phones {
  --rmh-pw: clamp(238px, 20.5vw, 308px);
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  align-self: end;
}

.rm-home-phone {
  position: relative;
  flex: 0 0 auto;
  width: var(--rmh-pw);
  aspect-ratio: 5 / 8;
  margin-bottom: calc(var(--rmh-pw) * -0.135); /* sits flush with the tile edge */
  overflow: hidden;
  border: 7px solid #2b3038;
  border-right: none;
  border-bottom: none;
  border-radius: 26px 0 0 0;
  background: #0d0f12;
  box-shadow: -16px 20px 44px rgba(0, 0, 0, 0.6);
}

/* Second screen: smaller and lifted, so the front one stays the hero. */
.rm-home-phone-back {
  width: calc(var(--rmh-pw) * 0.82);
  margin-right: calc(var(--rmh-pw) * -0.46);
  margin-bottom: calc(var(--rmh-pw) * 0.055);
  border-bottom: 7px solid #2b3038;
  border-radius: 22px 0 0 22px;
  opacity: 0.85;
  filter: saturate(0.9);
}

.rm-home-tile-app:hover .rm-home-phone-back {
  opacity: 1;
  filter: none;
}

/* object-fit means any screenshot ratio crops cleanly from the top. */
.rm-home-phone-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* --- Metafy + Discord tiles --- */

.rm-home-tile-sm {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 26px;
}

.rm-home-tile-ic {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 13px;
}

.rm-home-tile-ic svg {
  width: 27px;
  height: 27px;
}

/* A black-on-transparent logo recoloured via its alpha channel, so the real
   brand mark can be used without re-exporting it for the dark theme. */
.rm-home-mark {
  display: block;
  width: 28px;
  height: 28px;
  -webkit-mask: var(--rm-home-mark) center / contain no-repeat;
          mask: var(--rm-home-mark) center / contain no-repeat;
}

.rm-home-tile-txt {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.rm-home-tile-n {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18.5px;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.rm-home-arw {
  font-size: 15px;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.2s, transform 0.2s;
}

.rm-home-tile-sm:hover .rm-home-arw,
.rm-home-tile-sm:focus-visible .rm-home-arw {
  opacity: 1;
  transform: translateX(0);
}

.rm-home-tile-d {
  display: block;
  margin-top: 3px;
  font-size: 13.8px;
  color: var(--rmh-muted);
}

/* Supporters is the gold one and leads the stack: see what you get, then pay,
   then chat. Two gold tiles side by side would just compete. */
.rm-home-tile-sup {
  background: linear-gradient(108deg, #332a15 0%, #1f2024 64%);
  border-color: rgba(212, 175, 55, 0.34);
}
.rm-home-tile-sup:hover { border-color: var(--rmh-gold); }
.rm-home-tile-sup .rm-home-glow {
  background: radial-gradient(320px 210px at 14% 50%, rgba(212, 175, 55, 0.3), transparent 70%);
}
.rm-home-tile-sup:hover .rm-home-glow {
  background: radial-gradient(320px 210px at 14% 50%, rgba(212, 175, 55, 0.46), transparent 70%);
}
.rm-home-tile-sup .rm-home-tile-ic {
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid rgba(212, 175, 55, 0.55);
}
.rm-home-tile-sup .rm-home-tile-ic svg { fill: var(--rmh-gold-hi); }
.rm-home-tile-sup .rm-home-tile-n      { color: #f7ecc9; }

/* Overlapping supporter faces: the page itself is a wall of avatars, so the
   tile shows the real thing rather than a generic icon. */
.rm-home-avs {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 auto;
}
.rm-home-avs i,
.rm-home-avs b {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin-left: -13px;
  border: 2px solid #2a2519;
  border-radius: 50%;
}
.rm-home-avs i {
  background-size: cover;
  background-position: 50% 20%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.rm-home-avs i:first-child { margin-left: 0; }
.rm-home-avs b {
  display: grid;
  place-items: center;
  background: rgba(212, 175, 55, 0.22);
  color: var(--rmh-gold-hi);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.rm-home-tile-metafy {
  background: linear-gradient(108deg, #24242a 0%, #1d1e21 62%);
}
.rm-home-tile-metafy:hover { border-color: var(--rmh-gold); }
.rm-home-tile-metafy .rm-home-glow {
  background: radial-gradient(300px 200px at 14% 50%, rgba(255, 255, 255, 0.06), transparent 70%);
}
.rm-home-tile-metafy:hover .rm-home-glow {
  background: radial-gradient(300px 200px at 14% 50%, rgba(212, 175, 55, 0.22), transparent 70%);
}
.rm-home-tile-metafy .rm-home-tile-ic {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid #4a5058;
}
.rm-home-tile-metafy .rm-home-tile-ic svg  { fill: #c9ccd0; }
.rm-home-tile-metafy .rm-home-mark         { background-color: #c9ccd0; }
.rm-home-tile-metafy .rm-home-tile-n     { color: #e6e8ea; }

.rm-home-tile-discord {
  background: linear-gradient(108deg, #1e2140 0%, #1c1d22 62%);
}
.rm-home-tile-discord:hover { border-color: var(--rmh-blurple); }
.rm-home-tile-discord .rm-home-glow {
  background: radial-gradient(300px 200px at 14% 50%, rgba(88, 101, 242, 0.24), transparent 70%);
}
.rm-home-tile-discord:hover .rm-home-glow {
  background: radial-gradient(300px 200px at 14% 50%, rgba(88, 101, 242, 0.38), transparent 70%);
}
.rm-home-tile-discord .rm-home-tile-ic {
  background: rgba(88, 101, 242, 0.18);
  border: 1px solid rgba(88, 101, 242, 0.46);
}
.rm-home-tile-discord .rm-home-tile-ic svg { fill: #98a1fb; }
.rm-home-tile-discord .rm-home-tile-n     { color: #dde0fe; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Below this the promo grid drops to one column, so the app tile gets WIDER,
   not narrower -- it keeps the side-by-side layout rather than stacking. */
@media (max-width: 1100px) {
  .rm-home-promo-grid { grid-template-columns: 1fr; }
  .rm-home-tile-app   { padding: 30px 0 34px 30px; }
}

@media (max-width: 900px) {
  .rm-home-hero-inner {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 22px;
    padding-top: 22px;
    padding-bottom: 38px;
  }
  .rm-home-fan { --rmh-fw: clamp(70px, 23.2vw, 150px); order: -1; }
}

/* Phones: the copy runs full width, then the badges sit in a column beside a
   single frame. The body paragraph is dropped -- at this width it pushed the
   store buttons below the fold for the sake of a sentence the feature list
   already covers. */
@media (max-width: 700px) {
  /* Keep the desktop areas: the frame spans both rows, so it runs the full
     height of the tile. Giving copy its own full-width row left the top-right
     corner empty and pushed everything else down. No right padding either, so
     the frame meets the tile edge the way it does on desktop. */
  .rm-home-tile-app {
    gap: 16px 14px;
    padding: 26px 0 0 20px;
  }
  /* Both repeat what the screenshot already shows, and here they cost the
     vertical space the heading and the buttons need. */
  .rm-home-tile-text,
  .rm-home-feats { display: none; }

  .rm-home-h2 { text-wrap: balance; }

  .rm-home-stores {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 9px;
  }
  .rm-home-store  { flex: 0 0 auto; width: 100%; }
  /* The left column only has to hold the badges (~129px); anything beyond
     that is dead space, so the frame takes it. */
  .rm-home-phones { --rmh-pw: clamp(120px, 42vw, 240px); }
  .rm-home-phone-back { display: none; }
}

@media (max-width: 600px) {
  .rm-home-rail    { padding-inline: 18px; }
  .rm-home-tile-sm { padding: 16px 18px; gap: 13px; }
  .rm-home-avs i,
  .rm-home-avs b   { width: 34px; height: 34px; margin-left: -11px; }

  /* Both CTAs stay on one line down to the narrowest phones. */
  .rm-home .rm-home-h1-lockup    { text-align: center; }
  .rm-home .rm-home-tagline      { justify-content: center; letter-spacing: 0.05em; }
  .rm-home .rm-home-tagline-rule { display: none; }
  .rm-home-cta   { gap: 8px; flex-wrap: nowrap; justify-content: center; }
  .rm-home-quick { justify-content: center; gap: 7px; margin-top: 13px; }
  .rm-home-quick a { padding: 7px 12px; font-size: 12.5px; }
  .rm-home-h1 + .rm-home-cta { margin-top: 20px; }
  .rm-home-btn { padding: 11px 14px; font-size: 13.5px; white-space: nowrap; }

  /* The badge column is narrow here, so the badge itself has to give. */
  .rm-home-store    { padding: 8px 12px; gap: 9px; }
  .rm-home-store-ic { width: 18px; height: 18px; }
  .rm-home-store-n  { font-size: 14px; }
  .rm-home-store-t  { font-size: 8.5px; }
}

/* Smallest phones: the badge needs ~129px to stay readable, so cap the frame
   rather than let the button overflow its column. */
@media (max-width: 380px) {
  .rm-home-store    { padding: 8px 10px; gap: 7px; }
  .rm-home-store-ic { width: 16px; height: 16px; }
  .rm-home-store-n  { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .rm-home *,
  .rm-home *::before,
  .rm-home *::after {
    transition: none !important;
    animation: none !important;
  }
}