/* home-v3.css — section redesign layer, generated from reference images.
   Every rule is scoped to an .rs-* section root. The theme tokens and page
   background these rules read live at the foot of this file, carried over
   when home-v2.css was retired. */


/* ====================================================================
   01-hero
   ==================================================================== */
/* ==========================================================================
   01 — Site header + hero
   Scoped entirely to .rs-header / .rs-hero. Neither root paints a background;
   the page grain on .home-v2, at the foot of this file, shows through.
   Text that sits directly on the page background uses the site's theme tokens
   (--text, --text-soft, --cyan …) so it stays legible if the light theme is on;
   anything inside the dark product window is hard-coded, because that panel is
   dark in both themes.
   ========================================================================== */

/* ---------- header ------------------------------------------------------- */

.rs-header {
  position: relative;
  z-index: 100;
  background: transparent;
}
.rs-header-shell {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
  min-height: 96px;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* The lockup artwork is blob-dominant and runs tall, so its layout box is
   clipped back with a negative bottom margin: the header strip stays slim
   while the blob paints past it, exactly as in the reference. */
.rs-header .rs-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  overflow: visible;
  line-height: 0;
  text-decoration: none;
}
.rs-header .rs-brand img {
  display: block;
  width: auto;
  height: 116px;
  margin: 0 0 -54px;
}
/* Qualified with `img` so these beat `.rs-header .rs-brand img` above, which
   is one element-selector more specific and would otherwise show both. */
.rs-header .rs-brand img.rs-brand-light { display: none; }
/* The only theme-conditional rules in this file: the dark lockup is white
   artwork and would vanish on the light paper background. */
[data-theme="light"] .rs-header .rs-brand img.rs-brand-dark { display: none; }
[data-theme="light"] .rs-header .rs-brand img.rs-brand-light { display: block; }

.rs-header .rs-nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
}
.rs-header .rs-nav a {
  color: var(--text-soft, #a7aec0);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.rs-header .rs-nav a:hover { color: var(--text, #fff); }

.rs-header .rs-header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.rs-header .rs-theme-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.16));
  border-radius: 50%;
  background: transparent;
  color: var(--text, #fff);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.rs-header .rs-theme-toggle:hover {
  border-color: rgba(63, 224, 255, 0.5);
  background: rgba(63, 224, 255, 0.07);
}
.rs-header .rs-theme-toggle svg { width: 20px; height: 20px; }

.rs-header .rs-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  background: linear-gradient(96deg, #3b82f6, #8b5cf6);
  box-shadow: 0 10px 30px rgba(93, 95, 239, 0.35);
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rs-header .rs-header-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(93, 95, 239, 0.48);
}

.rs-header .rs-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.16));
  border-radius: 12px;
  background: transparent;
  color: var(--text, #fff);
  cursor: pointer;
}
.rs-header .rs-menu-bars { display: grid; gap: 4px; width: 17px; }
.rs-header .rs-menu-bars i {
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.rs-header .rs-menu-toggle[aria-expanded="true"] .rs-menu-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.rs-header .rs-menu-toggle[aria-expanded="true"] .rs-menu-bars i:nth-child(2) { opacity: 0; }
.rs-header .rs-menu-toggle[aria-expanded="true"] .rs-menu-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.rs-header .rs-mobile-nav {
  display: none;
  flex-direction: column;
  gap: 2px;
  width: min(100% - 32px, 1280px);
  margin: 10px auto 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: linear-gradient(180deg, #11141d 0%, #0a0c12 100%);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
}
.rs-header .rs-mobile-nav[hidden] { display: none; }
.rs-header .rs-mobile-nav a {
  padding: 14px 12px;
  border-radius: 11px;
  color: #e4e8f1;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.rs-header .rs-mobile-nav a:hover { background: rgba(255, 255, 255, 0.05); }
.rs-header .rs-mobile-cta {
  margin-top: 8px;
  background: linear-gradient(96deg, #3b82f6, #8b5cf6);
  color: #fff !important;
  text-align: center;
  font-weight: 700;
}

@media (max-width: 1040px) {
  .rs-header .rs-nav { display: none; }
  .rs-header .rs-menu-toggle { display: inline-flex; }
  .rs-header .rs-mobile-nav:not([hidden]) { display: flex; }
  .rs-header-shell { justify-content: space-between; }
}
@media (max-width: 620px) {
  .rs-header-shell { width: min(100% - 32px, 1280px); min-height: 76px; gap: 10px; }
  .rs-header .rs-brand img { height: 88px; margin-bottom: -40px; }
  .rs-header .rs-header-cta { display: none; }
  .rs-header .rs-theme-toggle { width: 40px; height: 40px; }
  .rs-header .rs-menu-toggle { width: 40px; height: 40px; }
}

/* ---------- hero --------------------------------------------------------- */

.rs-hero {
  --rs-cyan: #3fe0ff;
  --rs-blue: #4d7cff;
  --rs-purple: #9d57ff;
  --rs-green: #35d08a;
  --rs-panel-line: rgba(255, 255, 255, 0.09);
  position: relative;
  padding: 22px 0 92px;
  background: transparent;
  overflow-x: clip;
  overflow-y: visible;
}
.rs-hero-shell {
  position: relative;
  z-index: 2;
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 46fr 54fr;
  align-items: center;
  gap: 60px;
}

.rs-hero .rs-hero-glow {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  filter: blur(28px);
  pointer-events: none;
}
.rs-hero .rs-hero-glow-a {
  width: 720px;
  height: 600px;
  left: -260px;
  top: -220px;
  background: radial-gradient(circle, rgba(77, 124, 255, 0.18), transparent 68%);
}
.rs-hero .rs-hero-glow-b {
  width: 780px;
  height: 720px;
  right: -280px;
  top: -60px;
  background: radial-gradient(circle, rgba(157, 87, 255, 0.16), transparent 66%);
}

.rs-hero .rs-hero-copy { position: relative; max-width: 620px; }

.rs-hero .rs-hero-badge {
  display: inline-block;
  margin: 0 0 22px;
  padding: 8px 16px;
  border: 1px solid rgba(63, 224, 255, 0.42);
  border-radius: 999px;
  background: rgba(63, 224, 255, 0.06);
  box-shadow: 0 0 26px -8px rgba(63, 224, 255, 0.5);
  color: var(--cyan, #3fe0ff);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.rs-hero h1 {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(46px, 5.2vw, 74px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--text, #fff);
}
/* Second sentence carries the signature cyan → blue → purple ramp. The tokens
   (not the -fill ones) are used deliberately: they darken on the light theme,
   where neon cyan on paper is unreadable. */
.rs-hero h1 span {
  display: block;
  background: linear-gradient(96deg, var(--cyan, #3fe0ff) 0%, var(--blue, #4d7cff) 45%, var(--purple, #9d57ff) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rs-hero .rs-hero-rule {
  display: block;
  width: 90px;
  height: 3px;
  margin: 22px 0 22px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--cyan-fill, #3fe0ff), var(--purple-fill, #9d57ff));
}

.rs-hero .rs-hero-lede {
  max-width: 470px;
  margin: 0;
  color: var(--text-soft, #a7aec0);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.62;
}

.rs-hero .rs-hero-promise {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  color: var(--cyan, #3fe0ff);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}
.rs-hero .rs-hero-promise img {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.rs-hero .rs-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}
.rs-hero .rs-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 30px;
  border-radius: 16px;
  background: linear-gradient(96deg, #3b82f6, #8b5cf6 62%, #b44ce0);
  box-shadow: 0 10px 34px rgba(93, 95, 239, 0.4), 0 0 42px -14px rgba(139, 92, 246, 0.8);
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rs-hero .rs-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(93, 95, 239, 0.5), 0 0 52px -12px rgba(139, 92, 246, 0.9);
}
.rs-hero .rs-hero-ghost {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 0 22px 0 26px;
  border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.16));
  border-radius: 16px;
  background: var(--surface, #0c0e15);
  color: var(--text, #fff);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.rs-hero .rs-hero-ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(63, 224, 255, 0.45);
}
.rs-hero .rs-hero-play {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.rs-hero .rs-hero-play svg { width: 15px; height: 15px; }

.rs-hero .rs-hero-proof {
  display: flex;
  flex-wrap: wrap;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.rs-hero .rs-hero-proof li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  color: var(--text-2, #e4e8f1);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}
.rs-hero .rs-hero-proof li:first-child { padding-left: 0; }
.rs-hero .rs-hero-proof li + li { border-left: 1px solid var(--line, rgba(255, 255, 255, 0.09)); }
.rs-hero .rs-proof-icon { flex: 0 0 auto; display: grid; place-items: center; }
.rs-hero .rs-proof-icon svg { width: 26px; height: 26px; }
.rs-hero .rs-proof-icon-blue { color: var(--blue, #4d7cff); }
.rs-hero .rs-proof-icon-indigo { color: var(--blue, #4d7cff); }
.rs-hero .rs-proof-icon-green { color: var(--green, #35d08a); }

/* The mascot stands at the foot of the copy column and is allowed to bleed a
   little past the shell's left edge, as in the reference. */
.rs-hero .rs-hero-mascot {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin: 26px 0 -18px -22px;
  pointer-events: none;
}
.rs-hero .rs-hero-mascot img {
  flex: 0 0 auto;
  width: 200px;
  height: auto;
}
.rs-hero .rs-hero-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding-bottom: 44px;
  color: var(--cyan, #3fe0ff);
}
.rs-hero .rs-hero-arrow {
  flex: 0 0 auto;
  width: 104px;
  height: 62px;
  margin-top: 18px;
}
.rs-hero .rs-hero-note-text {
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.12;
  transform: rotate(-5deg);
  transform-origin: left bottom;
}

/* ---------- the product window ------------------------------------------- */

.rs-hero .rs-hero-product { position: relative; }
/* The rim is layered box-shadow rather than a pseudo-element so it survives the
   window's own overflow:hidden (which clips the artwork corners). */
.rs-hero .rs-window {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border: 1px solid rgba(120, 178, 255, 0.42);
  border-radius: 22px;
  background: linear-gradient(150deg, #0d101a 0%, #08090f 55%, #0b0a14 100%);
  box-shadow:
    0 0 0 1px rgba(63, 224, 255, 0.14),
    0 0 34px rgba(77, 124, 255, 0.34),
    0 0 110px rgba(157, 87, 255, 0.24),
    0 34px 90px rgba(0, 0, 0, 0.55);
}

.rs-hero .rs-window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.rs-hero .rs-window-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.rs-hero .rs-window-brand img {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}
.rs-hero .rs-window-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: #e4e8f1;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rs-hero .rs-window-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #35d08a;
  box-shadow: 0 0 12px #35d08a;
}

.rs-hero .rs-window-message {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(63, 224, 255, 0.16);
  border-radius: 16px;
  background: rgba(63, 224, 255, 0.045);
}
.rs-hero .rs-window-message img { width: 58px; height: 58px; object-fit: contain; }
.rs-hero .rs-window-message strong {
  display: block;
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.rs-hero .rs-window-message p {
  margin: 5px 0 0;
  color: #b6bccd;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
}

.rs-hero .rs-window-post {
  display: grid;
  grid-template-columns: 47fr 53fr;
  gap: 14px;
  margin-top: 14px;
}

/* Recreated creative tile — no photography in the repo, so this is a CSS/SVG
   stand-in for the post artwork the reference shows. */
.rs-hero .rs-post-art {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background:
    radial-gradient(circle at 74% 22%, rgba(146, 196, 255, 0.34), transparent 52%),
    linear-gradient(158deg, #2e6fc4 0%, #1a4a92 42%, #0d2453 100%);
  color: #fff;
}
.rs-hero .rs-post-motif {
  position: absolute;
  right: -6px;
  bottom: 0;
  width: 54%;
  height: auto;
  opacity: 0.85;
  pointer-events: none;
}
.rs-hero .rs-post-eyebrow {
  position: relative;
  z-index: 1;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.rs-hero .rs-post-art strong {
  position: relative;
  z-index: 1;
  max-width: 74%;
  margin: 12px 0 10px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.rs-hero .rs-post-art p {
  position: relative;
  z-index: 1;
  max-width: 60%;
  margin: 0 0 14px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}
.rs-hero .rs-post-offer {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  padding: 7px 11px;
  border-radius: 7px;
  background: #fff;
  color: #17255a;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.rs-hero .rs-post-brand {
  position: absolute;
  left: 20px;
  bottom: 16px;
  z-index: 1;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rs-hero .rs-post-copy {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.022);
}
.rs-hero .rs-post-label {
  color: #3fe0ff;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rs-hero .rs-post-copy p {
  margin: 12px 0 14px;
  color: #e4e8f1;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.6;
}
.rs-hero .rs-post-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.rs-hero .rs-post-tags span {
  padding: 6px 10px;
  border: 1px solid rgba(63, 224, 255, 0.26);
  border-radius: 999px;
  background: rgba(63, 224, 255, 0.07);
  color: #3fe0ff;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 500;
}
.rs-hero .rs-post-channel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.03);
}
.rs-hero .rs-channel-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, #f9ce34, #ee2a7b 52%, #6228d7);
  color: #fff;
}
.rs-hero .rs-channel-mark svg { width: 18px; height: 18px; }
.rs-hero .rs-post-channel b {
  flex: 1 1 auto;
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.rs-hero .rs-channel-ready {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #35d08a;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.rs-hero .rs-channel-ready i { display: grid; place-items: center; }
.rs-hero .rs-channel-ready i svg { width: 14px; height: 14px; }
.rs-hero .rs-channel-ready em {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.6px solid currentColor;
  border-radius: 50%;
}
.rs-hero .rs-channel-ready em svg { width: 11px; height: 11px; }

/* Four-up outcome strip. Dividers use border-left so the row can drop to 2×2
   on narrow windows without stranding a rule at the end. */
.rs-hero .rs-window-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.rs-hero .rs-window-stats li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px;
}
.rs-hero .rs-window-stats li:first-child { padding-left: 0; }
.rs-hero .rs-window-stats li + li { border-left: 1px solid rgba(255, 255, 255, 0.08); }
.rs-hero .rs-stat-icon { flex: 0 0 auto; display: grid; place-items: center; }
.rs-hero .rs-stat-icon svg { width: 26px; height: 26px; }
.rs-hero .rs-stat-icon-pink { color: #fb6ed8; }
.rs-hero .rs-stat-icon-blue { color: #4d7cff; }
.rs-hero .rs-stat-icon-green { color: #35d08a; }
.rs-hero .rs-stat-icon-orange { color: #ffb45e; }
.rs-hero .rs-stat-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: #8f97ab;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.3;
}
.rs-hero .rs-stat-text b {
  color: #fff;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.rs-hero .rs-window-actions {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 12px;
  margin-top: 16px;
}
.rs-hero .rs-window-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.02);
  color: #e4e8f1;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: default;
}
.rs-hero .rs-window-approve {
  border: 0 !important;
  background: linear-gradient(96deg, #2f7ef5 0%, #6d5cf0 52%, #a13fd6 100%) !important;
  box-shadow: 0 10px 30px rgba(93, 95, 239, 0.35);
  color: #fff !important;
  font-weight: 700 !important;
}
.rs-hero .rs-window-approve svg { width: 19px; height: 19px; }

/* ---------- responsive --------------------------------------------------- */

@media (max-width: 1180px) {
  .rs-hero-shell { gap: 44px; }
  .rs-hero .rs-hero-proof li { padding: 0 14px; }
  .rs-hero .rs-hero-mascot img { width: 168px; }
  .rs-hero .rs-hero-arrow { width: 86px; }
  .rs-hero .rs-hero-note-text { font-size: 26px; }
}

@media (max-width: 900px) {
  .rs-hero { padding: 12px 0 76px; }
  .rs-hero-shell { grid-template-columns: 1fr; gap: 48px; }
  .rs-hero .rs-hero-copy { max-width: none; }
  .rs-hero .rs-hero-lede { max-width: 560px; }
  .rs-hero .rs-hero-mascot { margin-left: -10px; }
}

@media (max-width: 620px) {
  .rs-hero-shell { width: min(100% - 32px, 1280px); }
  .rs-hero h1 { font-size: clamp(40px, 12.4vw, 56px); }
  .rs-hero .rs-hero-badge { font-size: 11px; letter-spacing: 0.13em; }
  .rs-hero .rs-hero-lede { font-size: 16px; }
  .rs-hero .rs-hero-promise { font-size: 15px; }
  .rs-hero .rs-hero-actions { gap: 12px; }
  .rs-hero .rs-hero-cta,
  .rs-hero .rs-hero-ghost { flex: 1 1 100%; justify-content: center; font-size: 16px; }
  .rs-hero .rs-hero-proof { gap: 18px 0; }
  .rs-hero .rs-hero-proof li { flex: 1 1 46%; padding: 0 12px 0 0; }
  .rs-hero .rs-hero-proof li + li { border-left: 0; }
  .rs-hero .rs-hero-mascot { margin-left: -14px; }
  .rs-hero .rs-hero-mascot img { width: 146px; }
  .rs-hero .rs-hero-arrow { width: 70px; height: 46px; }
  .rs-hero .rs-hero-note { padding-bottom: 30px; }
  .rs-hero .rs-hero-note-text { font-size: 22px; }
  .rs-hero .rs-window { padding: 16px; border-radius: 20px; }
  .rs-hero .rs-window-post { grid-template-columns: 1fr; }
  .rs-hero .rs-post-art { aspect-ratio: 4 / 3; }
  .rs-hero .rs-post-art strong { max-width: 66%; }
  .rs-hero .rs-window-stats { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
  .rs-hero .rs-window-stats li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .rs-hero .rs-window-actions { grid-template-columns: 1fr; }
}

/* ---------- phone pass -------------------------------------------------- *
   Everything below is scoped to ≤620px, so the desktop composition is
   untouched. Two jobs: lift every micro-label inside the product window to
   the 11px legibility floor, and stop the recreated post tile — which is the
   one box here with a fixed aspect ratio — from colliding its own captions. */

@media (max-width: 620px) {
  /* Header. Both icon buttons are real controls, so they get a full 44px
     square; the lockup already steps down to 88px above. */
  .rs-header .rs-theme-toggle,
  .rs-header .rs-menu-toggle { width: 44px; height: 44px; }
  .rs-header .rs-header-actions { gap: 10px; }
  .rs-header .rs-mobile-nav {
    width: calc(100% - 32px);
    padding: 8px;
  }
  .rs-header .rs-mobile-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 14px;
    font-size: 16px;
  }
  .rs-header .rs-mobile-cta { justify-content: center; min-height: 52px; }

  /* Hero copy: the headline stays the loudest thing on the screen; only the
     rule under it gives back a little vertical space. */
  .rs-hero .rs-hero-rule { margin: 18px 0; }
  .rs-hero .rs-hero-lede { line-height: 1.55; }

  /* The product window's own padding is the only thing between the mock UI
     and the screen edge, so it stays generous but the inner cards tighten. */
  .rs-hero .rs-window-message { gap: 13px; padding: 14px 15px; }
  .rs-hero .rs-window-message p { font-size: 13px; }
  .rs-hero .rs-window-post { gap: 12px; }

  /* Recreated post tile. On the phone the square/4:3 box is shorter than its
     stacked captions, which pushed the offer chip on top of the brand line.
     Drop the ratio, pin the copy to the top and reserve a band at the foot
     for the absolutely positioned brand mark. */
  .rs-hero .rs-post-art {
    aspect-ratio: auto;
    min-height: 200px;
    justify-content: flex-start;
    padding: 18px 18px 46px;
  }
  /* right:-6px at desktop is a deliberate bleed; at phone width it is the
     only thing making the tile report a horizontal scroll, so it sits flush. */
  .rs-hero .rs-post-motif { right: 0; width: 46%; }
  .rs-hero .rs-post-eyebrow { font-size: 11px; letter-spacing: 0.15em; }
  .rs-hero .rs-post-art strong {
    max-width: 78%;
    margin: 10px 0 8px;
    font-size: 23px;
  }
  .rs-hero .rs-post-art p {
    max-width: 74%;
    margin-bottom: 12px;
    font-size: 12.5px;
  }
  .rs-hero .rs-post-offer { padding: 8px 12px; font-size: 11px; }
  .rs-hero .rs-post-brand { left: 18px; bottom: 14px; font-size: 11px; }

  /* Caption panel. */
  .rs-hero .rs-post-copy { padding: 16px; }
  .rs-hero .rs-post-label { font-size: 11.5px; letter-spacing: 0.14em; }
  .rs-hero .rs-post-copy p { margin: 10px 0 12px; font-size: 14px; }
  .rs-hero .rs-post-tags { gap: 6px; }
  .rs-hero .rs-post-tags span { padding: 6px 10px; font-size: 11px; }
  .rs-hero .rs-post-channel { padding: 10px 11px; gap: 9px; }
  .rs-hero .rs-post-channel b { font-size: 13.5px; }
  .rs-hero .rs-channel-ready { gap: 6px; font-size: 12.5px; }

  /* Outcome strip: already 2×2 above; here the labels come up to the floor
     and the icons give back the width that costs. */
  .rs-hero .rs-window-stats li { gap: 9px; padding: 4px 8px; }
  .rs-hero .rs-stat-icon svg { width: 22px; height: 22px; }
  .rs-hero .rs-stat-text { font-size: 11.5px; line-height: 1.25; }
  .rs-hero .rs-stat-text b { font-size: 22px; }

  .rs-hero .rs-window-actions button { min-height: 52px; font-size: 14.5px; }
}

@media (max-width: 380px) {
  /* At 360 and below the tile's copy no longer needs to clear the motif on
     the same line — the motif is small enough to sit behind it. */
  .rs-hero .rs-post-art strong { max-width: 86%; }
  .rs-hero .rs-post-art p { max-width: 82%; }
  .rs-hero .rs-window-stats li { padding: 4px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-header .rs-header-cta,
  .rs-header .rs-theme-toggle,
  .rs-header .rs-menu-bars i,
  .rs-hero .rs-hero-cta,
  .rs-hero .rs-hero-ghost { transition: none; }
  .rs-header .rs-header-cta:hover,
  .rs-hero .rs-hero-cta:hover,
  .rs-hero .rs-hero-ghost:hover { transform: none; }
}


/* ====================================================================
   02-transformation
   ==================================================================== */
/* ============================================================
   02 — The fundamental difference (transformation comparison)
   ============================================================ */

.rs-transformation {
  padding: 96px 0;
  background: transparent;
  position: relative;
}

.rs-transformation .rs-tf-shell {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}

/* ---------- heading block ---------- */

.rs-transformation .rs-tf-head {
  text-align: center;
  max-width: 940px;
  margin-inline: auto;
}

.rs-transformation .rs-tf-kicker {
  margin: 0 0 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3FE0FF;
}

.rs-transformation .rs-tf-title {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.005em;
  color: #FFFFFF;
}

.rs-transformation .rs-tf-l1 {
  display: block;
}

.rs-transformation .rs-tf-l2 {
  display: inline-block;
  position: relative;
  padding-bottom: 6px;
}

.rs-transformation .rs-tf-grad {
  background: linear-gradient(96deg, #3FE0FF 0%, #4D7CFF 45%, #9D57FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rs-transformation .rs-tf-dot {
  color: #FFFFFF;
}

.rs-transformation .rs-tf-swoosh {
  position: absolute;
  left: 38%;
  bottom: -6px;
  width: 60%;
  height: 12px;
  opacity: 0.5;
  pointer-events: none;
}

.rs-transformation .rs-tf-sub {
  margin: 20px 0 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.62;
  color: #A7AEC0;
}

/* ---------- decorative segmented switch ---------- */

.rs-transformation .rs-tf-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}

.rs-transformation .rs-tf-seg {
  display: inline-flex;
  align-items: center;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rs-transformation .rs-tf-seg-off {
  background: #14161F;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #E4E8F1;
}

.rs-transformation .rs-tf-seg-on {
  background: linear-gradient(96deg, #4D7CFF 0%, #3FE0FF 100%);
  border: 1px solid rgba(63, 224, 255, 0.4);
  color: #FFFFFF;
  box-shadow: 0 10px 30px rgba(77, 124, 255, 0.35);
}

.rs-transformation .rs-tf-vs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #090B11;
  border: 1.5px solid rgba(77, 124, 255, 0.75);
  color: #FFFFFF;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 0 24px rgba(77, 124, 255, 0.45), inset 0 0 14px rgba(77, 124, 255, 0.16);
}

/* ---------- two-card grid ---------- */

.rs-transformation .rs-tf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  margin-top: 42px;
  align-items: stretch;
}

.rs-transformation .rs-tf-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px 28px 26px;
  border-radius: 18px;
  background: linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.rs-transformation .rs-tf-cardhead {
  display: flex;
  align-items: center;
  gap: 16px;
}

.rs-transformation .rs-tf-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.rs-transformation .rs-tf-mark svg {
  width: 20px;
  height: 20px;
}

.rs-transformation .rs-tf-mark-bad {
  background: rgba(240, 82, 106, 0.1);
  border: 1.5px solid rgba(240, 82, 106, 0.55);
  color: #F0526A;
}

.rs-transformation .rs-tf-mark-good {
  background: rgba(77, 124, 255, 0.12);
  border: 1.5px solid rgba(77, 124, 255, 0.6);
  color: #4D7CFF;
}

.rs-transformation .rs-tf-cardhead-text h3 {
  margin: 0 0 5px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

.rs-transformation .rs-tf-cardhead-text p {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  color: #A7AEC0;
}

/* ---------- left card: nine-step chain ---------- */

.rs-transformation .rs-tf-chain-scroll {
  margin-top: 40px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-width: thin;
  contain: inline-size;
}

.rs-transformation .rs-tf-chain-wrap {
  position: relative;
  min-width: 540px;
  padding-top: 46px;
}

.rs-transformation .rs-tf-arcs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 46px;
  pointer-events: none;
}

.rs-transformation .rs-tf-arcs path {
  fill: none;
  stroke: #F0526A;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 5 5;
  opacity: 0.8;
  vector-effect: non-scaling-stroke;
}

.rs-transformation .rs-tf-arcs path.rs-tf-tip {
  stroke-dasharray: none;
}

.rs-transformation .rs-tf-chain {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-transformation .rs-tf-chain li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 2px;
}

.rs-transformation .rs-tf-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.02);
  color: #C3C9D6;
}

.rs-transformation .rs-tf-node svg {
  width: 21px;
  height: 21px;
}

.rs-transformation .rs-tf-nlabel {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.36;
  text-align: center;
  color: #AEB5C5;
}

.rs-transformation .rs-tf-alert {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: auto 0 0;
  margin-top: 38px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(240, 82, 106, 0.3);
  background: rgba(240, 82, 106, 0.06);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: #F0526A;
}

.rs-transformation .rs-tf-alert span {
  flex: none;
  display: inline-flex;
}

.rs-transformation .rs-tf-alert svg {
  width: 20px;
  height: 20px;
}

/* ---------- right card: three steps ---------- */

.rs-transformation .rs-tf-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  column-gap: 10px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

.rs-transformation .rs-tf-step {
  position: relative;
  padding: 32px 14px 22px;
  border-radius: 14px;
  text-align: center;
}

.rs-transformation .rs-tf-step-1 {
  border: 1px solid rgba(77, 124, 255, 0.55);
  background: linear-gradient(180deg, rgba(77, 124, 255, 0.09) 0%, rgba(77, 124, 255, 0.02) 100%);
  box-shadow: 0 0 0 1px rgba(77, 124, 255, 0.14), 0 0 40px -14px rgba(77, 124, 255, 0.7);
}

.rs-transformation .rs-tf-step-2 {
  border: 1px solid rgba(63, 224, 255, 0.5);
  background: linear-gradient(180deg, rgba(63, 224, 255, 0.08) 0%, rgba(63, 224, 255, 0.02) 100%);
  box-shadow: 0 0 0 1px rgba(63, 224, 255, 0.13), 0 0 40px -14px rgba(63, 224, 255, 0.6);
}

.rs-transformation .rs-tf-step-3 {
  border: 1px solid rgba(157, 87, 255, 0.55);
  background: linear-gradient(180deg, rgba(157, 87, 255, 0.09) 0%, rgba(157, 87, 255, 0.02) 100%);
  box-shadow: 0 0 0 1px rgba(157, 87, 255, 0.14), 0 0 40px -14px rgba(157, 87, 255, 0.7);
}

.rs-transformation .rs-tf-num {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #FFFFFF;
}

.rs-transformation .rs-tf-step-1 .rs-tf-num {
  background: #4D7CFF;
  box-shadow: 0 0 0 5px #0A0C12, 0 0 20px rgba(77, 124, 255, 0.7);
}

.rs-transformation .rs-tf-step-2 .rs-tf-num {
  background: #23A8D6;
  box-shadow: 0 0 0 5px #0A0C12, 0 0 20px rgba(63, 224, 255, 0.6);
}

.rs-transformation .rs-tf-step-3 .rs-tf-num {
  background: #9D57FF;
  box-shadow: 0 0 0 5px #0A0C12, 0 0 20px rgba(157, 87, 255, 0.7);
}

.rs-transformation .rs-tf-stepicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.rs-transformation .rs-tf-stepicon svg {
  width: 36px;
  height: 36px;
}

.rs-transformation .rs-tf-step-1 .rs-tf-stepicon { color: #4D7CFF; }
.rs-transformation .rs-tf-step-2 .rs-tf-stepicon { color: #3FE0FF; }
.rs-transformation .rs-tf-step-3 .rs-tf-stepicon { color: #9D57FF; }

.rs-transformation .rs-tf-step h4 {
  margin: 0 0 10px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.rs-transformation .rs-tf-step p {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.52;
  color: #A7AEC0;
}

.rs-transformation .rs-tf-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(122, 160, 255, 0.85);
}

.rs-transformation .rs-tf-arrow svg {
  width: 20px;
  height: 20px;
}

/* ---------- right card: mascot outro strip ---------- */

.rs-transformation .rs-tf-outro {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin: auto 0 0;
  margin-top: 26px;
  padding: 16px 24px;
  border-radius: 16px;
  border: 1px solid rgba(110, 122, 255, 0.4);
  background: linear-gradient(96deg, rgba(77, 124, 255, 0.16) 0%, rgba(157, 87, 255, 0.16) 100%);
  overflow: hidden;
}

.rs-transformation .rs-tf-mascot {
  flex: none;
  width: auto;
  height: 104px;
  margin-bottom: -18px;
  object-fit: contain;
}

.rs-transformation .rs-tf-outro-text {
  flex: 1 1 auto;
  min-width: 0;
}

.rs-transformation .rs-tf-outro-text strong {
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

.rs-transformation .rs-tf-outro-text span {
  display: block;
  margin-top: 4px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(96deg, #3FE0FF 0%, #4D7CFF 60%, #7C8CFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rs-transformation .rs-tf-sparks {
  flex: none;
  width: 56px;
  height: 36px;
  fill: rgba(255, 255, 255, 0.9);
  stroke: none;
}

/* ---------- bottom tally bar ---------- */

.rs-transformation .rs-tf-tally {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 30px;
  margin-top: 30px;
  padding: 26px 40px;
  border-radius: 18px;
  background: linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.rs-transformation .rs-tf-tally-side {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.rs-transformation .rs-tf-tally-icon {
  flex: none;
  display: inline-flex;
}

.rs-transformation .rs-tf-tally-icon svg {
  width: 46px;
  height: 46px;
}

.rs-transformation .rs-tf-tally-icon-bad { color: #F0526A; }
.rs-transformation .rs-tf-tally-icon-good { color: #4D7CFF; }

.rs-transformation .rs-tf-tally-num {
  flex: none;
  display: block;
  min-width: 78px;
}

.rs-transformation .rs-tf-tally-num b {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 46px;
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.01em;
}

.rs-transformation .rs-tf-tally-num-bad b {
  color: #F4576F;
}

.rs-transformation .rs-tf-tally-num-good b {
  background: linear-gradient(180deg, #6E9BFF 0%, #3FE0FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rs-transformation .rs-tf-tally-num small {
  display: block;
  margin-top: 2px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #E4E8F1;
}

.rs-transformation .rs-tf-tally-side p {
  margin: 0;
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 240px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  color: #E4E8F1;
}

.rs-transformation .rs-tf-vs-big {
  width: 64px;
  height: 64px;
  font-size: 15px;
  border-color: rgba(157, 87, 255, 0.75);
  box-shadow: 0 0 32px rgba(157, 87, 255, 0.5), inset 0 0 18px rgba(157, 87, 255, 0.18);
}

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .rs-transformation .rs-tf-steps {
    column-gap: 6px;
  }

  .rs-transformation .rs-tf-step {
    padding: 30px 10px 20px;
  }

  .rs-transformation .rs-tf-arrow svg {
    width: 16px;
    height: 16px;
  }

  .rs-transformation .rs-tf-tally {
    padding: 24px 26px;
    gap: 20px;
  }

  .rs-transformation .rs-tf-tally-side {
    gap: 14px;
  }

  .rs-transformation .rs-tf-tally-side p {
    padding-left: 16px;
    font-size: 15px;
  }
}

@media (max-width: 900px) {
  .rs-transformation {
    padding: 76px 0;
  }

  .rs-transformation .rs-tf-shell {
    width: min(1280px, calc(100% - 32px));
  }

  .rs-transformation .rs-tf-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .rs-transformation .rs-tf-swoosh {
    left: 32%;
    width: 66%;
  }

  .rs-transformation .rs-tf-tally {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 22px;
    padding: 26px 22px;
  }

  .rs-transformation .rs-tf-vs-big {
    width: 56px;
    height: 56px;
  }

  .rs-transformation .rs-tf-tally-side {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .rs-transformation .rs-tf-card {
    padding: 22px 18px;
  }

  .rs-transformation .rs-tf-seg {
    padding: 11px 16px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  .rs-transformation .rs-tf-vs {
    width: 40px;
    height: 40px;
    font-size: 11px;
  }

  .rs-transformation .rs-tf-switch {
    gap: 10px;
  }

  .rs-transformation .rs-tf-steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 26px;
    margin-top: 34px;
  }

  .rs-transformation .rs-tf-step {
    padding: 30px 18px 22px;
  }

  .rs-transformation .rs-tf-arrow {
    transform: rotate(90deg);
  }

  .rs-transformation .rs-tf-outro {
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
  }

  .rs-transformation .rs-tf-mascot {
    height: 82px;
  }

  .rs-transformation .rs-tf-outro-text {
    flex: 1 1 160px;
  }

  .rs-transformation .rs-tf-tally-side {
    flex-wrap: wrap;
    gap: 12px 14px;
  }

  .rs-transformation .rs-tf-tally-side p {
    flex: 1 1 100%;
    max-width: none;
    padding-left: 0;
    border-left: 0;
  }

  .rs-transformation .rs-tf-tally-icon svg {
    width: 38px;
    height: 38px;
  }

  .rs-transformation .rs-tf-tally-num b {
    font-size: 40px;
  }
}

/* ---------- phone pass (≤700) ---------- */

@media (max-width: 700px) {
  /* The switch pills had dropped to 10px. Tighter padding buys the room back
     so both pills and the VS badge still fit one line at 360; below that the
     row wraps rather than squeezing the type again. */
  .rs-transformation .rs-tf-switch {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .rs-transformation .rs-tf-seg {
    padding: 11px 13px;
    font-size: 11.5px;
    letter-spacing: 0.07em;
  }

  .rs-transformation .rs-tf-vs {
    font-size: 12px;
  }

  .rs-transformation .rs-tf-num {
    font-size: 12px;
  }

  .rs-transformation .rs-tf-card {
    padding: 22px 18px;
  }

  /* The nine-step chain is intrinsically wide: nine nodes at 58px each left the
     labels breaking into three lines. Keep the nodes at a legible width and let
     the rail scroll instead, bled to the card edges so the cut-off ninth node
     advertises the scroll. */
  .rs-transformation .rs-tf-chain-scroll {
    margin-top: 30px;
    margin-inline: -18px;
    padding-inline: 18px;
    max-width: none;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 18px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .rs-transformation .rs-tf-chain-wrap {
    min-width: 684px;
    padding-top: 42px;
  }

  .rs-transformation .rs-tf-chain li {
    scroll-snap-align: start;
    padding: 0 5px;
    gap: 10px;
  }

  .rs-transformation .rs-tf-alert {
    margin-top: 30px;
    padding: 16px;
    font-size: 15px;
  }

  /* The three decision cards stack, so the outro strip carries the card on its
     own; the loose sparkle glyph only wrapped onto a line of its own. */
  .rs-transformation .rs-tf-sparks {
    display: none;
  }

  .rs-transformation .rs-tf-outro {
    gap: 14px;
    padding: 14px 16px;
  }

  .rs-transformation .rs-tf-outro-text strong {
    font-size: 17px;
    line-height: 1.25;
  }

  .rs-transformation .rs-tf-outro-text span {
    font-size: 15px;
  }

  .rs-transformation .rs-tf-tally {
    margin-top: 22px;
    padding: 24px 18px;
  }

  .rs-transformation .rs-tf-tally-side p {
    font-size: 15px;
  }
}


/* ====================================================================
   03-intro
   ==================================================================== */
/* ==========================================================================
   03 — What is Wowly Studios? (.rs-intro)
   ========================================================================== */

.rs-intro {
  padding: 96px 0;
  background: transparent;
  position: relative;
  overflow: hidden;
  --rs-cyan: #3fe0ff;
  --rs-blue: #4d7cff;
  --rs-purple: #9d57ff;
  --rs-art: 1;
}

.rs-intro-shell {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}

/* --- top: copy + collage ------------------------------------------------- */

.rs-intro-top {
  display: grid;
  grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
  gap: 40px;
  align-items: center;
}

.rs-intro-kicker {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #dfe6f5;
}

.rs-intro-kicker span {
  color: #7fa8ff;
}

.rs-intro-kicker-rule {
  display: block;
  width: 216px;
  max-width: 60%;
  height: 2px;
  margin: 10px 0 30px;
  border-radius: 2px;
  background: linear-gradient(90deg, #3fe0ff 0%, #4d7cff 100%);
}

.rs-intro-title {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: 0.96;
  letter-spacing: -0.005em;
  color: #ffffff;
}

.rs-intro-grad {
  background: linear-gradient(96deg, #3fe0ff 0%, #4d7cff 45%, #9d57ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rs-intro-lead {
  margin: 26px 0 0;
  max-width: 34em;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.62;
  color: #d5dbe8;
}

.rs-intro-body {
  margin: 14px 0 0;
  max-width: 34em;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.62;
  color: #a7aec0;
}

/* --- collage stage ------------------------------------------------------- */

.rs-intro-stage {
  position: relative;
  justify-self: end;
  width: calc(640px * var(--rs-art));
  height: calc(540px * var(--rs-art));
  max-width: 100%;
}

.rs-intro-art {
  position: absolute;
  inset: 0;
  width: 640px;
  height: 540px;
  transform: scale(var(--rs-art));
  transform-origin: top left;
  font-family: "Inter", system-ui, sans-serif;
}

.rs-intro-thread {
  position: absolute;
  inset: 0;
  width: 640px;
  height: 540px;
  pointer-events: none;
}

/* tablet ------------------------------------------------------------------ */

.rs-intro-tablet {
  position: absolute;
  left: 46px;
  top: 4px;
  width: 546px;
  height: 376px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  padding: 14px 16px 14px 8px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(150deg, #141a26 0%, #0b0e15 55%, #090b11 100%);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: perspective(1500px) rotateY(-8deg) rotateX(4deg) rotateZ(-0.6deg);
  transform-origin: right center;
}

.rs-intro-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 2px;
}

.rs-intro-mark {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  background: linear-gradient(150deg, #3fe0ff, #4d7cff 60%, #9d57ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}

.rs-intro-railbtn {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(190, 200, 220, 0.55);
}

.rs-intro-railbtn svg {
  width: 13px;
  height: 13px;
}

.rs-intro-screen {
  min-width: 0;
  padding-left: 10px;
}

.rs-intro-month {
  margin: 2px 0 14px;
  font-size: 14px;
  font-weight: 500;
  color: #eef2fa;
}

.rs-intro-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}

.rs-intro-week span {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  font-size: 8px;
  letter-spacing: 0.1em;
  text-align: center;
  color: #6f7789;
}

.rs-intro-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.rs-intro-day {
  position: relative;
  height: 46px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  color: #8e96a8;
  padding: 3px;
}

.rs-intro-day-empty {
  border-color: transparent;
}

.rs-intro-tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.rs-intro-tile-cream {
  background: linear-gradient(150deg, #f2e6d3 0%, #cba97e 55%, #7d5f3d 100%);
}
.rs-intro-tile-sage {
  background: linear-gradient(150deg, #dff0e2 0%, #8fb79a 55%, #46654f 100%);
}
.rs-intro-tile-blue {
  background: linear-gradient(150deg, #e2eef9 0%, #94b7da 55%, #3f5f84 100%);
}
.rs-intro-tile-amber {
  background: linear-gradient(150deg, #f6d5a2 0%, #d0873c 55%, #6d3f16 100%);
}
.rs-intro-tile-plum {
  background: linear-gradient(150deg, #e7dcef 0%, #9c7fb4 55%, #4a3459 100%);
}
.rs-intro-tile-forest {
  background: linear-gradient(150deg, #b9d3ae 0%, #5a7f4c 55%, #223018 100%);
}

.rs-intro-dot {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: 1px solid rgba(10, 12, 18, 0.55);
}

.rs-intro-dot-cyan {
  background: #3fe0ff;
}
.rs-intro-dot-green {
  background: #35d08a;
}
.rs-intro-dot-amber {
  background: #ffb45e;
}
.rs-intro-dot-pink {
  background: #fb6ed8;
}
.rs-intro-dot-purple {
  background: #9d57ff;
}

/* fanned content cards ---------------------------------------------------- */

.rs-intro-post {
  position: absolute;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.95);
}

.rs-intro-post-social {
  left: 4px;
  top: 296px;
  width: 158px;
  height: 214px;
  background: #f4f5f7;
  transform: rotate(-2.2deg);
  display: flex;
  flex-direction: column;
}

.rs-intro-post-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
}

.rs-intro-avatar {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(140deg, #3fe0ff, #4d7cff);
  flex: none;
}

.rs-intro-post-head .rs-intro-bar {
  height: 5px;
  width: 60px;
  border-radius: 3px;
  background: rgba(20, 24, 34, 0.22);
}

.rs-intro-post-art {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  padding: 10px;
  background: radial-gradient(120% 90% at 50% 12%, #2c3d55 0%, #14202f 55%, #090e15 100%);
}

.rs-intro-script {
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.15;
  text-align: center;
  color: #f4f8ff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  align-self: start;
  margin-top: 8px;
}

.rs-intro-cup {
  position: absolute;
  bottom: 12px;
  left: 50%;
  width: 74px;
  transform: translateX(-50%);
}

.rs-intro-post-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  color: #202634;
}

.rs-intro-post-foot svg {
  width: 14px;
  height: 14px;
}

.rs-intro-save {
  margin-left: auto;
}

/* carousel card */

.rs-intro-post-carousel {
  left: 168px;
  top: 312px;
  width: 166px;
  height: 212px;
  transform: rotate(0.8deg);
  background: #efe6dc;
}

.rs-intro-carousel-art {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 14px 12px;
}

.rs-intro-mint {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 56px;
  background: linear-gradient(180deg, #dcefe9 0%, #b7ddd4 100%);
}

.rs-intro-bottle {
  position: absolute;
  right: 12px;
  bottom: 34px;
  width: 40px;
}

.rs-intro-carousel-copy {
  position: relative;
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  color: #17181c;
}

.rs-intro-carousel-copy span {
  display: block;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: #33343a;
}

.rs-intro-carousel-copy b {
  display: block;
  margin-top: 2px;
  font-weight: 800;
  font-size: 26px;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.rs-intro-swipe {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.rs-intro-swipe i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(23, 24, 28, 0.25);
}

.rs-intro-swipe-on {
  width: 14px !important;
  border-radius: 3px !important;
  background: rgba(23, 24, 28, 0.6) !important;
}

.rs-intro-swipe span {
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  font-size: 7px;
  letter-spacing: 0.14em;
  color: rgba(23, 24, 28, 0.55);
}

/* video card */

.rs-intro-post-video {
  left: 340px;
  top: 326px;
  width: 168px;
  height: 186px;
  transform: rotate(2deg);
  background: radial-gradient(110% 90% at 40% 30%, #3a4250 0%, #1b1f28 45%, #0a0c11 100%);
  display: grid;
  place-items: center;
}

.rs-intro-play {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #12151d;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.rs-intro-play svg {
  width: 18px;
  height: 18px;
  margin-left: 2px;
}

.rs-intro-time {
  position: absolute;
  right: 9px;
  bottom: 8px;
  font-size: 10px;
  font-weight: 600;
  color: #eef2fa;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* publish panel ----------------------------------------------------------- */

.rs-intro-publish {
  position: absolute;
  right: 0;
  top: 116px;
  width: 172px;
  padding: 14px 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, #131722 0%, #0a0d14 100%);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: perspective(1200px) rotateY(-5deg);
}

.rs-intro-publish-title {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #eef2fa;
}

.rs-intro-prow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.rs-intro-glyph {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 12px;
  color: #fff;
}

.rs-intro-glyph svg {
  width: 15px;
  height: 15px;
}

.rs-intro-glyph-ig {
  border-radius: 8px;
  background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%);
}

.rs-intro-glyph-fb {
  background: #1877f2;
  padding-bottom: 2px;
}

.rs-intro-glyph-li {
  border-radius: 7px;
  background: #0a66c2;
  font-size: 11px;
}

.rs-intro-prow .rs-intro-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
}

.rs-intro-check {
  width: 18px;
  height: 18px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(29, 78, 216, 0.35);
  border: 1px solid rgba(77, 124, 255, 0.6);
  color: #6fa8ff;
}

.rs-intro-check svg {
  width: 11px;
  height: 11px;
}

.rs-intro-publish-rule {
  display: block;
  height: 1px;
  margin: 14px 0 12px;
  background: rgba(255, 255, 255, 0.09);
}

.rs-intro-when {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b8c0d2;
  font-size: 11px;
  font-weight: 500;
}

.rs-intro-when svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: #d7deec;
}

/* --- three cards --------------------------------------------------------- */

.rs-intro-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 56px;
}

.rs-intro-card {
  position: relative;
  padding: 30px 30px 34px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #0e111a 0%, #0a0c12 100%);
  text-align: center;
}

.rs-intro-card-1 {
  --rs-acc: #3fe0ff;
}
.rs-intro-card-2 {
  --rs-acc: #4d7cff;
}
.rs-intro-card-3 {
  --rs-acc: #9d57ff;
}

.rs-intro-badge {
  position: absolute;
  left: 26px;
  top: 26px;
  min-width: 48px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--rs-acc);
  box-shadow: inset 0 0 24px -10px var(--rs-acc);
}

.rs-intro-card-1 .rs-intro-badge {
  border-color: rgba(63, 224, 255, 0.34);
  background: rgba(63, 224, 255, 0.09);
}
.rs-intro-card-2 .rs-intro-badge {
  border-color: rgba(77, 124, 255, 0.34);
  background: rgba(77, 124, 255, 0.09);
}
.rs-intro-card-3 .rs-intro-badge {
  border-color: rgba(157, 87, 255, 0.34);
  background: rgba(157, 87, 255, 0.1);
}

.rs-intro-figure {
  display: block;
  margin: 16px auto 26px;
  width: 152px;
  max-width: 100%;
}

.rs-intro-figure svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 26px rgba(20, 40, 120, 0.45));
}

.rs-intro-card-title {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.04;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
}

.rs-intro-card-rule {
  display: block;
  width: 84px;
  height: 2px;
  margin: 12px auto 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--rs-acc) 25%, var(--rs-acc) 75%, transparent);
}

.rs-intro-card p {
  margin: 0 auto;
  max-width: 22em;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #a7aec0;
}

/* --- bottom strip -------------------------------------------------------- */

.rs-intro-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 26px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #0e111a 0%, #0a0c12 100%);
}

.rs-intro-strip-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 22px 20px;
}

.rs-intro-strip-item + .rs-intro-strip-item {
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.rs-intro-chip {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.rs-intro-chip svg {
  width: 18px;
  height: 18px;
}

.rs-intro-chip-blue {
  background: rgba(77, 124, 255, 0.14);
  border: 1px solid rgba(77, 124, 255, 0.3);
  color: #6fa8ff;
}

.rs-intro-chip-purple {
  background: rgba(157, 87, 255, 0.14);
  border: 1px solid rgba(157, 87, 255, 0.3);
  color: #b78bff;
}

.rs-intro-strip-item p {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.4;
  color: #e4e8f1;
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1240px) {
  .rs-intro {
    --rs-art: 0.82;
  }
  .rs-intro-card-title {
    font-size: 27px;
  }
}

@media (max-width: 1060px) {
  .rs-intro {
    --rs-art: 0.66;
  }
  .rs-intro-cards {
    gap: 18px;
  }
  .rs-intro-card {
    padding: 26px 20px 30px;
  }
  .rs-intro-badge {
    left: 20px;
    top: 20px;
  }
  .rs-intro-strip-item {
    gap: 10px;
    padding: 20px 14px;
  }
  .rs-intro-strip-item p {
    font-size: 15px;
  }
}

@media (max-width: 900px) {
  .rs-intro {
    padding: 76px 0;
    --rs-art: 0.86;
  }
  .rs-intro-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 46px;
  }
  .rs-intro-stage {
    justify-self: center;
  }
  .rs-intro-lead,
  .rs-intro-body {
    max-width: none;
  }
  .rs-intro-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 48px;
  }
  .rs-intro-card {
    padding: 28px 24px 32px;
  }
  .rs-intro-strip {
    grid-template-columns: minmax(0, 1fr);
  }
  .rs-intro-strip-item {
    justify-content: flex-start;
    padding: 18px 22px;
  }
  .rs-intro-strip-item + .rs-intro-strip-item {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }
}

@media (max-width: 760px) {
  .rs-intro {
    --rs-art: 0.7;
  }
}

@media (max-width: 560px) {
  .rs-intro {
    --rs-art: 0.52;
  }
  .rs-intro-kicker-rule {
    max-width: 70%;
  }
  .rs-intro-lead {
    font-size: 17.5px;
  }
  .rs-intro-body {
    font-size: 16px;
  }
  .rs-intro-card-title {
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rs-intro-tablet,
  .rs-intro-publish {
    transform: none;
  }
}

/* --- phone (≤700px) ------------------------------------------------------
   The collage is a 640×540 absolutely-positioned, perspective-tilted
   composition that was fitted to narrow screens by scaling the whole thing
   down (--rs-art: 0.52 at 560px). Two problems: the tilted tablet and the
   publish panel still poked ~21px past the shell, and every label inside was
   being drawn at half its CSS size — 8px week names rendering at 4px.

   So on phones the composition is un-tilted and re-flowed: the tablet becomes
   a full-width card, and the four floating pieces below it become a plain
   2×2 grid at their natural width (~155px, within a couple of px of the
   sizes they were authored at). Nothing is scaled, so the internal type is
   real again; the only thing dropped is the dotted connector thread, which
   only makes sense when the pieces are scattered.
   ------------------------------------------------------------------------- */

@media (max-width: 700px) {
  /* copy ------------------------------------------------------------------ */
  .rs-intro-top {
    gap: 32px;
  }
  .rs-intro-kicker {
    font-size: 12px;
    letter-spacing: 0.14em;
  }
  .rs-intro-kicker-rule {
    margin: 10px 0 22px;
    max-width: 74%;
  }
  .rs-intro-lead {
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.58;
  }
  .rs-intro-body {
    font-size: 15.5px;
    line-height: 1.62;
  }

  /* stage: drop the scale-to-fit wrapper --------------------------------- */
  .rs-intro-stage {
    justify-self: stretch;
    width: 100%;
    max-width: none;
    height: auto;
  }

  .rs-intro-art {
    position: static;
    width: auto;
    height: auto;
    transform: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
    /* headroom for the small residual rotations on the cards */
    padding: 6px;
    /* keeps the four small cards near the ~160px they were drawn at,
       instead of stretching to half a 700px screen */
    max-width: 376px;
    margin-inline: auto;
  }

  .rs-intro-thread {
    display: none;
  }

  /* tablet: full-width, flat ---------------------------------------------- */
  .rs-intro-tablet {
    position: static;
    grid-column: 1 / -1;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    transform: none;
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 12px 12px 14px 4px;
    border-radius: 14px;
    box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .rs-intro-rail {
    gap: 10px;
  }
  .rs-intro-mark {
    font-size: 22px;
    margin-bottom: 6px;
  }
  .rs-intro-railbtn {
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }

  .rs-intro-screen {
    padding-left: 8px;
  }

  .rs-intro-month {
    margin: 0 0 10px;
    font-size: 13px;
  }

  /* 8px → 11px; the tighter tracking keeps SUN/WED inside a 30px cell */
  .rs-intro-week span {
    font-size: 11px;
    letter-spacing: 0.01em;
  }

  .rs-intro-week,
  .rs-intro-days {
    gap: 3px;
  }

  .rs-intro-day {
    height: 34px;
    font-size: 12px;
    border-radius: 7px;
    padding: 2px;
  }

  .rs-intro-tile {
    border-radius: 5px;
  }

  .rs-intro-dot {
    right: 2px;
    bottom: 2px;
    width: 5px;
    height: 5px;
  }

  /* the four floating pieces, now a 2×2 grid ------------------------------ */
  .rs-intro-post,
  .rs-intro-publish {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
  }

  .rs-intro-post-social {
    height: 206px;
    transform: rotate(-1.2deg);
  }
  .rs-intro-post-carousel {
    height: 206px;
    transform: rotate(1deg);
  }
  .rs-intro-post-video {
    height: 168px;
    transform: rotate(1.4deg);
  }

  .rs-intro-publish {
    transform: none;
    padding: 13px 13px 15px;
    border-radius: 14px;
  }

  .rs-intro-script {
    font-size: 19px;
  }
  .rs-intro-cup {
    width: 66px;
  }

  .rs-intro-carousel-copy span {
    font-size: 20px;
  }
  .rs-intro-carousel-copy b {
    font-size: 24px;
  }
  .rs-intro-mint {
    width: 50px;
  }

  /* 7px → 11px */
  .rs-intro-swipe span {
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  /* 10px → 11px */
  .rs-intro-time {
    font-size: 11px;
  }

  .rs-intro-publish-rule {
    margin: 12px 0 10px;
  }

  /* cards + strip ---------------------------------------------------------- */
  .rs-intro-cards {
    margin-top: 34px;
    gap: 14px;
  }

  .rs-intro-card {
    padding: 24px 20px 28px;
  }

  .rs-intro-badge {
    left: 18px;
    top: 18px;
    min-width: 44px;
    padding: 5px 9px;
    font-size: 16px;
  }

  .rs-intro-figure {
    width: 128px;
    margin: 10px auto 20px;
  }

  .rs-intro-card-title {
    font-size: 25px;
  }

  .rs-intro-card p {
    font-size: 15.5px;
  }

  .rs-intro-strip {
    margin-top: 14px;
  }

  .rs-intro-strip-item {
    gap: 12px;
    padding: 15px 18px;
  }

  .rs-intro-strip-item p {
    font-size: 15.5px;
  }
}


/* ====================================================================
   04-agent
   ==================================================================== */
/* ==========================================================================
   04 — Meet Wowly (agent section)
   ========================================================================== */

.rs-agent {
  --rs-agent-blue: #4D7CFF;
  --rs-agent-cyan: #3FE0FF;
  --rs-agent-green: #35D08A;
  padding: 104px 0;
  background: transparent;
  position: relative;
}

.rs-agent-shell {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}

.rs-agent-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.83fr) minmax(0, 1.17fr);
  gap: 70px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Left — portrait panel
   -------------------------------------------------------------------------- */

.rs-agent-portrait {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 560px;
  aspect-ratio: 100 / 166;
  padding: 18px;
  border: 1px solid rgba(77, 124, 255, 0.34);
  border-radius: 20px;
  background:
    radial-gradient(120% 78% at 50% 38%, rgba(28, 74, 160, 0.34) 0%, rgba(9, 21, 46, 0.72) 44%, rgba(4, 6, 12, 0.96) 100%),
    linear-gradient(180deg, #080d1a 0%, #05070d 100%);
  box-shadow:
    0 0 0 1px rgba(77, 124, 255, 0.1),
    0 0 60px -14px rgba(77, 124, 255, 0.55),
    0 30px 70px -40px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  isolation: isolate;
}

.rs-agent-glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 34%;
  width: 108%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 118, 234, 0.22) 0%, rgba(28, 63, 140, 0.1) 42%, rgba(0, 0, 0, 0) 68%);
  pointer-events: none;
}

.rs-agent-rings {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 40%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.rs-agent-rings i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(120, 175, 255, 0.11);
}

.rs-agent-rings i:nth-child(1) { width: 300px; height: 300px; }
.rs-agent-rings i:nth-child(2) { width: 430px; height: 430px; border-color: rgba(120, 175, 255, 0.075); }
.rs-agent-rings i:nth-child(3) { width: 570px; height: 570px; border-color: rgba(120, 175, 255, 0.05); }

.rs-agent-dots {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0.75;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(1.6px 1.6px at 14% 12%, rgba(150, 195, 255, 0.6), rgba(0, 0, 0, 0)),
    radial-gradient(1.4px 1.4px at 78% 9%, rgba(150, 195, 255, 0.45), rgba(0, 0, 0, 0)),
    radial-gradient(1.6px 1.6px at 88% 33%, rgba(150, 195, 255, 0.5), rgba(0, 0, 0, 0)),
    radial-gradient(1.3px 1.3px at 8% 44%, rgba(150, 195, 255, 0.4), rgba(0, 0, 0, 0)),
    radial-gradient(1.5px 1.5px at 26% 68%, rgba(150, 195, 255, 0.35), rgba(0, 0, 0, 0)),
    radial-gradient(1.4px 1.4px at 92% 62%, rgba(150, 195, 255, 0.4), rgba(0, 0, 0, 0)),
    radial-gradient(1.3px 1.3px at 66% 78%, rgba(150, 195, 255, 0.3), rgba(0, 0, 0, 0)),
    radial-gradient(1.5px 1.5px at 40% 21%, rgba(150, 195, 255, 0.32), rgba(0, 0, 0, 0));
}

.rs-agent-stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
  padding-bottom: 26px;
}

.rs-agent-platform {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 74%;
  height: 56px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(96, 168, 255, 0.55) 0%, rgba(58, 122, 240, 0.3) 55%, rgba(20, 60, 150, 0) 100%);
  box-shadow: 0 0 46px 12px rgba(64, 130, 255, 0.3);
  pointer-events: none;
}

.rs-agent-platform::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 42%;
  height: 2px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(120, 190, 255, 0) 0%, rgba(150, 210, 255, 0.85) 50%, rgba(120, 190, 255, 0) 100%);
  filter: blur(0.5px);
}

.rs-agent-mascot {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 430px);
  max-width: 96%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.55));
}

.rs-agent-status {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-top-color: rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  background: rgba(5, 8, 14, 0.78);
  backdrop-filter: blur(10px);
}

.rs-agent-live {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--rs-agent-green);
  box-shadow: 0 0 10px 1px rgba(53, 208, 138, 0.75);
}

.rs-agent-online {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rs-agent-green);
}

.rs-agent-divide {
  width: 1px;
  height: 15px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.16);
}

.rs-agent-task {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   Right — copy column
   -------------------------------------------------------------------------- */

.rs-agent-copy {
  min-width: 0;
}

.rs-agent-kicker {
  margin: 0 0 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #4D8BFF;
}

.rs-agent-title {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(46px, 6.5vw, 96px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.rs-agent-grad {
  background: linear-gradient(96deg, #3FE0FF 0%, #4D7CFF 55%, #5566FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rs-agent-rule {
  display: block;
  width: 74px;
  height: 1px;
  margin: 26px 0 22px;
  background: rgba(255, 255, 255, 0.2);
}

.rs-agent-lead {
  margin: 0;
  max-width: 640px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.62;
  color: #A7AEC0;
}

/* Promise box */

.rs-agent-promise {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 34px;
  padding: 22px 26px;
  border: 1px solid rgba(77, 124, 255, 0.3);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(19, 26, 45, 0.9) 0%, rgba(11, 14, 23, 0.9) 100%);
  box-shadow: 0 0 0 1px rgba(77, 124, 255, 0.07), 0 22px 50px -34px rgba(0, 0, 0, 0.9);
}

.rs-agent-badge {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, #3B82F6 0%, #4F46E5 100%);
  color: #ffffff;
  box-shadow: 0 0 24px -6px rgba(77, 124, 255, 0.85);
}

.rs-agent-promise-copy {
  min-width: 0;
}

.rs-agent-promise-copy strong {
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.rs-agent-promise-copy span {
  display: block;
  margin-top: 4px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.5;
  color: #8E96A9;
}

.rs-agent-promise-copy b {
  font-weight: 500;
  color: #4D8BFF;
}

/* Prompt chips */

.rs-agent-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.rs-agent-chip {
  flex: 1 1 auto;
  min-width: 196px;
  max-width: 268px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 17px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(14, 17, 26, 0.85) 0%, rgba(10, 12, 18, 0.85) 100%);
}

.rs-agent-chip-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(77, 124, 255, 0.28);
  border-radius: 9px;
  background: rgba(77, 124, 255, 0.12);
  color: var(--rs-agent-blue);
}

.rs-agent-chip-text {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.34;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1120px) {
  .rs-agent-grid { gap: 48px; }
  .rs-agent-portrait { min-height: 500px; }
}

@media (max-width: 900px) {
  .rs-agent { padding: 80px 0; }
  .rs-agent-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .rs-agent-portrait {
    order: -1;
    aspect-ratio: auto;
    max-width: 460px;
    min-height: 540px;
    margin-inline: auto;
  }
  .rs-agent-copy { order: 0; }
  .rs-agent-rings i:nth-child(3) { display: none; }
}

@media (max-width: 620px) {
  .rs-agent-shell { width: calc(100% - 32px); }
  .rs-agent-portrait { min-height: 460px; padding: 14px; }
  .rs-agent-promise {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
  }
  .rs-agent-promise-copy strong { font-size: 19px; }
  .rs-agent-chip {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
  }
  .rs-agent-lead { font-size: 16.5px; }
}

/* ---------- phone pass (≤700) ---------- */

@media (max-width: 700px) {
  /* The status bar had been shrunk to 9.5px to keep "Working on your next
     month" on one line. Back to the 11px floor; the bar wraps to two lines
     instead of shrinking, and the task line no longer ellipsises. */
  .rs-agent-status {
    flex-wrap: wrap;
    gap: 9px;
    row-gap: 5px;
    padding: 11px 14px;
  }

  .rs-agent-online,
  .rs-agent-task {
    font-size: 11.5px;
    letter-spacing: 0.1em;
  }

  .rs-agent-task {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.4;
  }

  /* With the bar wrapped to two lines the separator would trail the first
     line like a stray cursor. */
  .rs-agent-divide {
    display: none;
  }

  /* The orbit rings are sized for a 460px-wide panel; inside a phone-width
     frame the outer two were cut by the border rather than reading as rings. */
  .rs-agent-portrait {
    height: auto;
    min-height: 0;
  }

  .rs-agent-stage {
    min-height: 320px;
  }

  .rs-agent-rings i:nth-child(1) { width: 196px; height: 196px; }
  .rs-agent-rings i:nth-child(2) { width: 278px; height: 278px; }
  .rs-agent-glow { width: 100%; }

  /* One chip per row — the two-line chip labels have no room to share a row. */
  .rs-agent-prompts {
    gap: 10px;
  }

  .rs-agent-chip {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
    padding: 13px 15px;
  }
}


/* ====================================================================
   05-noprompt
   ==================================================================== */
/* ============================================================
   05 — No prompt engineering  (.rs-noprompt)
   ============================================================ */

.rs-noprompt {
  padding: 96px 0;
  background: transparent;
  position: relative;
  --rs-np-cyan: #3FE0FF;
  --rs-np-blue: #4D7CFF;
  --rs-np-purple: #9D57FF;
  --rs-np-line: rgba(255, 255, 255, .08);
  --rs-np-line-soft: rgba(255, 255, 255, .065);
}

.rs-noprompt .rs-noprompt-shell {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}

/* ---------- heading block ---------- */

.rs-noprompt .rs-noprompt-head {
  max-width: 900px;
}

.rs-noprompt .rs-noprompt-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--rs-np-cyan);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}

.rs-noprompt .rs-noprompt-spark {
  width: 17px;
  height: 17px;
  flex: none;
  color: #6FA8FF;
}

.rs-noprompt .rs-noprompt-title {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(40px, 4.8vw, 64px);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.005em;
  color: #FFFFFF;
  text-transform: none;
}

.rs-noprompt .rs-noprompt-plain {
  color: #FFFFFF;
}

.rs-noprompt .rs-noprompt-grad {
  background: linear-gradient(96deg, #3FE0FF 0%, #4D7CFF 45%, #9D57FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rs-noprompt .rs-noprompt-lede {
  max-width: 760px;
  margin: 22px 0 0;
  color: #A7AEC0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.62;
}

.rs-noprompt .rs-noprompt-lede + .rs-noprompt-lede {
  margin-top: 8px;
}

/* ---------- the split panel ---------- */

.rs-noprompt .rs-noprompt-panel {
  display: grid;
  grid-template-columns: 1fr 1.26fr;
  margin-top: 46px;
  border: 1px solid var(--rs-np-line);
  border-radius: 18px;
  background: linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
}

.rs-noprompt .rs-noprompt-left {
  padding: 28px 30px 30px;
  display: flex;
  flex-direction: column;
}

.rs-noprompt .rs-noprompt-right {
  position: relative;
  padding: 26px 30px 30px;
  border-left: 1px solid var(--rs-np-line-soft);
  min-width: 0;
}

/* ---------- left: header row ---------- */

.rs-noprompt .rs-noprompt-lefthead {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.rs-noprompt .rs-noprompt-headbadge {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid rgba(157, 87, 255, .3);
  background: rgba(157, 87, 255, .12);
  color: #B98BFF;
}

.rs-noprompt .rs-noprompt-headbadge svg {
  width: 20px;
  height: 20px;
}

.rs-noprompt .rs-noprompt-headlabel {
  margin: 0;
  color: #FFFFFF;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* ---------- left: the four choices ---------- */

.rs-noprompt .rs-noprompt-choices {
  display: grid;
  gap: 12px;
}

.rs-noprompt .demo-choice {
  width: 100%;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 15px 18px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
  background: #0F131C;
  color: #FFFFFF;
  text-align: left;
  cursor: pointer;
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.rs-noprompt .demo-choice:hover {
  border-color: rgba(77, 124, 255, .34);
  background: #121826;
}

.rs-noprompt .demo-choice.active {
  border-color: rgba(63, 224, 255, .55);
  background: linear-gradient(180deg, rgba(77, 124, 255, .11) 0%, rgba(63, 224, 255, .045) 100%);
  box-shadow: 0 0 0 1px rgba(77, 124, 255, .22), 0 0 42px -10px rgba(77, 124, 255, .65);
}

.rs-noprompt .rs-noprompt-ico {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
}

.rs-noprompt .rs-noprompt-ico svg {
  width: 24px;
  height: 24px;
}

.rs-noprompt .rs-noprompt-ico-purple {
  border: 1px solid rgba(157, 87, 255, .3);
  background: rgba(157, 87, 255, .13);
  color: #A97BFF;
}

.rs-noprompt .rs-noprompt-ico-blue {
  border: 1px solid rgba(77, 124, 255, .32);
  background: rgba(77, 124, 255, .13);
  color: #6E9BFF;
}

.rs-noprompt .rs-noprompt-choicetext {
  display: block;
  min-width: 0;
}

.rs-noprompt .demo-choice strong {
  display: block;
  color: #FFFFFF;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.rs-noprompt .demo-choice small {
  display: block;
  margin-top: 3px;
  color: #98A1B6;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

.rs-noprompt .rs-noprompt-check {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--rs-np-cyan);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .22s ease, transform .22s ease;
}

.rs-noprompt .rs-noprompt-check svg {
  width: 28px;
  height: 28px;
}

.rs-noprompt .demo-choice.active .rs-noprompt-check {
  opacity: 1;
  transform: scale(1);
}

/* ---------- left: handwritten annotation ---------- */

.rs-noprompt .rs-noprompt-note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 0;
  padding-left: 46px;
}

.rs-noprompt .rs-noprompt-hookarrow {
  width: 58px;
  height: 42px;
  flex: none;
  color: #4D7CFF;
}

.rs-noprompt .rs-noprompt-script {
  color: #EAF2FF;
  font-family: "Caveat", cursive;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
}

/* ---------- the relay badge straddling the divider ---------- */

.rs-noprompt .rs-noprompt-relay {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(77, 124, 255, .6);
  background: #0B1020;
  color: #FFFFFF;
  box-shadow: 0 0 0 5px #0A0C12, 0 0 30px rgba(77, 124, 255, .55);
}

.rs-noprompt .rs-noprompt-relay svg {
  width: 20px;
  height: 20px;
}

/* ---------- right: top line ---------- */

.rs-noprompt .rs-noprompt-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  color: #8E97AC;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.rs-noprompt .rs-noprompt-live {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rs-noprompt .rs-noprompt-live i {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #35D08A;
  box-shadow: 0 0 10px rgba(53, 208, 138, .9);
}

.rs-noprompt #demoFormat {
  color: #9BA4B9;
  white-space: nowrap;
}

/* ---------- right: the preview tile ---------- */

.rs-noprompt .rs-noprompt-canvas {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  aspect-ratio: 16 / 9;
  min-height: 290px;
  padding: 30px 32px;
  border-radius: 16px;
  color: #FFFFFF;
  background: linear-gradient(114deg, #6D3BE8 0%, #2D5BEF 42%, #1C7FE0 72%, #17A8CF 100%);
  transition: background .4s ease;
}

.rs-noprompt .rs-noprompt-canvas[data-theme="offer"] {
  background: linear-gradient(114deg, #6D3BE8 0%, #2D5BEF 42%, #1C7FE0 72%, #17A8CF 100%);
}

.rs-noprompt .rs-noprompt-canvas[data-theme="educate"] {
  background: linear-gradient(114deg, #1B3FCB 0%, #1268CB 45%, #0E93BE 75%, #14BFA6 100%);
}

.rs-noprompt .rs-noprompt-canvas[data-theme="festival"] {
  background: linear-gradient(114deg, #7A22CE 0%, #A03AD6 40%, #6248F0 74%, #2F6FE8 100%);
}

.rs-noprompt .rs-noprompt-canvas[data-theme="story"] {
  background: linear-gradient(114deg, #232C9E 0%, #3B44CE 42%, #2C63D8 72%, #2E8FCB 100%);
}

.rs-noprompt .rs-noprompt-dots {
  position: absolute;
  z-index: 0;
  top: 16px;
  right: 20px;
  width: 130px;
  height: 90px;
  background-image: radial-gradient(rgba(255, 255, 255, .55) 1px, transparent 1px);
  background-size: 11px 11px;
  opacity: .35;
  -webkit-mask-image: linear-gradient(205deg, #000 0%, transparent 72%);
  mask-image: linear-gradient(205deg, #000 0%, transparent 72%);
}

.rs-noprompt .rs-noprompt-scene {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 54%;
  max-width: 430px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%);
}

.rs-noprompt .rs-noprompt-badge {
  position: absolute;
  z-index: 2;
  top: 26px;
  left: 32px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  color: #FFFFFF;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rs-noprompt .rs-noprompt-headline {
  position: relative;
  z-index: 2;
  max-width: 64%;
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(32px, 3.4vw, 50px);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.008em;
  text-transform: uppercase;
  text-shadow: 0 6px 26px rgba(6, 14, 40, .3);
}

.rs-noprompt .rs-noprompt-subline {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 64%;
  margin-top: 18px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #58E7FF 0%, #6FD8FF 17%, #FFFFFF 40%, #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rs-noprompt .rs-noprompt-brand {
  position: absolute;
  z-index: 2;
  left: 32px;
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #FFFFFF;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.rs-noprompt .rs-noprompt-brandmark {
  width: 27px;
  height: 27px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #FFFFFF;
  color: #2D5BEF;
}

.rs-noprompt .rs-noprompt-brandmark svg {
  width: 16px;
  height: 16px;
}

/* ---------- right: caption + hashtags ---------- */

.rs-noprompt .rs-noprompt-caption {
  margin-top: 20px;
}

.rs-noprompt .rs-noprompt-caplabel {
  display: block;
  color: var(--rs-np-cyan);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rs-noprompt #demoCaption {
  margin: 11px 0 14px;
  color: #DDE3EF;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
}

.rs-noprompt .rs-noprompt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rs-noprompt #demoTags span {
  padding: 9px 17px;
  border: 1px solid rgba(77, 124, 255, .42);
  border-radius: 999px;
  background: rgba(77, 124, 255, .1);
  color: #7FD9FF;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

/* ---------- bottom benefit strip ---------- */

.rs-noprompt .rs-noprompt-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--rs-np-line);
  border-radius: 18px;
  background: linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
}

.rs-noprompt .rs-noprompt-strip > li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 28px;
}

.rs-noprompt .rs-noprompt-strip > li + li {
  border-left: 1px solid var(--rs-np-line-soft);
}

.rs-noprompt .rs-noprompt-stripico {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.rs-noprompt .rs-noprompt-stripico svg {
  width: 21px;
  height: 21px;
}

.rs-noprompt .rs-noprompt-stripico-blue {
  border: 1px solid rgba(77, 124, 255, .36);
  background: rgba(77, 124, 255, .09);
  color: #6E9BFF;
}

.rs-noprompt .rs-noprompt-stripico-purple {
  border: 1px solid rgba(157, 87, 255, .34);
  background: rgba(157, 87, 255, .09);
  color: #A97BFF;
}

.rs-noprompt .rs-noprompt-striptext {
  display: block;
  min-width: 0;
}

.rs-noprompt .rs-noprompt-striptext strong {
  display: block;
  color: #FFFFFF;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.rs-noprompt .rs-noprompt-striptext span {
  display: block;
  margin-top: 4px;
  color: #98A1B6;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .rs-noprompt .rs-noprompt-headline { max-width: 74%; }
  .rs-noprompt .rs-noprompt-subline { max-width: 74%; }
  .rs-noprompt .rs-noprompt-scene { width: 46%; }
}

@media (max-width: 900px) {
  .rs-noprompt { padding: 76px 0; }
  .rs-noprompt .rs-noprompt-panel { grid-template-columns: 1fr; }
  .rs-noprompt .rs-noprompt-right {
    border-left: 0;
    border-top: 1px solid var(--rs-np-line-soft);
    padding-top: 42px;
  }
  .rs-noprompt .rs-noprompt-relay {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
  }
  .rs-noprompt .rs-noprompt-strip { grid-template-columns: 1fr; }
  .rs-noprompt .rs-noprompt-strip > li + li {
    border-left: 0;
    border-top: 1px solid var(--rs-np-line-soft);
  }
  .rs-noprompt .rs-noprompt-canvas { aspect-ratio: auto; min-height: 320px; }
  .rs-noprompt .rs-noprompt-headline { max-width: 62%; font-size: clamp(32px, 6vw, 46px); }
  .rs-noprompt .rs-noprompt-subline { max-width: 62%; }
}

@media (max-width: 620px) {
  .rs-noprompt { padding: 62px 0; }
  .rs-noprompt .rs-noprompt-shell { width: calc(100% - 32px); }
  .rs-noprompt .rs-noprompt-left,
  .rs-noprompt .rs-noprompt-right { padding: 22px 18px 24px; }
  .rs-noprompt .rs-noprompt-right { padding-top: 38px; }
  .rs-noprompt .demo-choice {
    grid-template-columns: 42px minmax(0, 1fr) 26px;
    gap: 13px;
    padding: 14px 14px;
  }
  .rs-noprompt .rs-noprompt-ico { width: 42px; height: 42px; border-radius: 12px; }
  .rs-noprompt .rs-noprompt-ico svg { width: 21px; height: 21px; }
  .rs-noprompt .demo-choice strong { font-size: 15.5px; }
  .rs-noprompt .demo-choice small { font-size: 13px; }
  .rs-noprompt .rs-noprompt-check { width: 26px; height: 26px; }
  .rs-noprompt .rs-noprompt-check svg { width: 24px; height: 24px; }
  .rs-noprompt .rs-noprompt-note { padding-left: 6px; gap: 10px; }
  .rs-noprompt .rs-noprompt-hookarrow { width: 46px; height: 34px; }
  .rs-noprompt .rs-noprompt-script { font-size: 22px; }
  .rs-noprompt .rs-noprompt-canvas { min-height: 280px; padding: 24px 22px; }
  .rs-noprompt .rs-noprompt-badge { top: 20px; left: 22px; }
  .rs-noprompt .rs-noprompt-brand { left: 22px; bottom: 20px; font-size: 12px; }
  .rs-noprompt .rs-noprompt-headline { max-width: 100%; font-size: clamp(30px, 8.4vw, 40px); }
  .rs-noprompt .rs-noprompt-subline { max-width: 100%; font-size: 14px; }
  .rs-noprompt .rs-noprompt-scene { width: 62%; opacity: .55; }
  .rs-noprompt .rs-noprompt-strip > li { padding: 20px 18px; gap: 14px; }
  .rs-noprompt .rs-noprompt-topline { font-size: 10px; letter-spacing: .1em; }
}

/* ---------- phone pass ----------
   Scoped to ≤620px. Two fixes: the choice buttons drop from three tracks to
   two so the description gets the width it needs, and every mono micro-label
   comes up to the 11px floor. The JS only ever toggles `.active`, so the
   selected treatment (border, glow, revealed check) is left intact. */

@media (max-width: 620px) {
  /* Two tracks — icon + text. The confirmation check leaves the grid and
     becomes a corner badge, which is also where a thumb expects it. */
  .rs-noprompt .demo-choice {
    position: relative;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 40px 14px 14px;
  }
  .rs-noprompt .rs-noprompt-check {
    position: absolute;
    top: 50%;
    right: 11px;
    width: 24px;
    height: 24px;
    margin-top: -12px;
  }
  .rs-noprompt .rs-noprompt-check svg { width: 24px; height: 24px; }
  .rs-noprompt .demo-choice small { font-size: 13px; line-height: 1.38; }

  /* Mono labels to the floor. The top line now wraps rather than shrinking,
     so "IMAGE POST" drops under the live indicator when it has to. */
  .rs-noprompt .rs-noprompt-topline {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 14px;
    font-size: 11px;
    letter-spacing: .08em;
  }
  .rs-noprompt .rs-noprompt-kicker { font-size: 12px; letter-spacing: .14em; }
  .rs-noprompt .rs-noprompt-lede { font-size: 15.5px; }
  .rs-noprompt .rs-noprompt-headlabel { font-size: 14.5px; letter-spacing: .04em; }
  .rs-noprompt .rs-noprompt-caplabel { font-size: 11.5px; letter-spacing: .12em; }
  .rs-noprompt #demoCaption { font-size: 14.5px; }
  .rs-noprompt #demoTags span { padding: 8px 14px; font-size: 12.5px; }
  .rs-noprompt .rs-noprompt-badge { padding: 7px 12px; font-size: 11px; }
  .rs-noprompt .rs-noprompt-brand { font-size: 11.5px; }

  /* Bottom strip: three stacked rows above; tighten the type a step. */
  .rs-noprompt .rs-noprompt-striptext strong { font-size: 16px; }
  .rs-noprompt .rs-noprompt-striptext span { font-size: 14px; }
  .rs-noprompt .rs-noprompt-stripico { width: 40px; height: 40px; }
}


/* ====================================================================
   06-planning
   ==================================================================== */
/* ── 06 · Always know what comes next ─────────────────────────────── */

.rs-planning {
  padding: 96px 0;
  background: transparent;
  position: relative;
}

.rs-planning-shell {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}

.rs-planning-grid {
  display: grid;
  grid-template-columns: 42fr 58fr;
  gap: 60px;
  align-items: center;
}

/* ── left column ──────────────────────────────────────────────────── */

.rs-planning-copy {
  min-width: 0;
}

.rs-planning-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #6C8CFF;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.rs-planning-kicker svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.rs-planning-title {
  margin: 26px 0 0;
  color: #FFFFFF;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(38px, 4.4vw, 62px);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.005em;
}

.rs-planning-grad {
  background: linear-gradient(96deg, #3FE0FF 0%, #4D7CFF 45%, #9D57FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rs-planning-rule {
  display: block;
  width: 72px;
  height: 3px;
  margin: 26px 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #3FE0FF 0%, #9D57FF 100%);
}

.rs-planning-lead {
  max-width: 480px;
  margin: 30px 0 0;
  color: #A7AEC0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 400;
  line-height: 1.74;
}

.rs-planning-note {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 520px;
  margin: 44px 0 0;
  padding: 22px 26px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  background: linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
}

.rs-planning-note-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(140deg, #4D7CFF 0%, #9D57FF 100%);
  color: #FFFFFF;
  box-shadow: 0 10px 26px rgba(93, 95, 239, .35);
}

.rs-planning-note-badge svg {
  width: 24px;
  height: 24px;
}

.rs-planning-note-text {
  display: block;
  min-width: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 700;
  line-height: 1.34;
}

.rs-planning-note-text strong {
  display: block;
  color: #FFFFFF;
  font-weight: 700;
}

.rs-planning-note-text em {
  display: block;
  color: #4D8BFF;
  font-style: normal;
  font-weight: 700;
}

/* ── right column: the feed panel ─────────────────────────────────── */

.rs-planning-feed {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
  overflow: hidden;
}

.rs-planning-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 24px 0;
}

.rs-planning-feed-title {
  color: #FFFFFF;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.rs-planning-feed-week {
  color: #8C93A6;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
}

.rs-planning-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px 22px;
}

.rs-planning-card {
  --rs-acc: #4D8BFF;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 112px;
  gap: 16px;
  align-items: stretch;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: #0C0E15;
}

.rs-planning-card-featured {
  border-color: rgba(77, 139, 255, .55);
  background: linear-gradient(180deg, rgba(45, 90, 190, .16) 0%, rgba(20, 40, 90, .10) 100%);
  box-shadow: 0 0 0 1px rgba(77, 139, 255, .25), 0 0 40px -12px rgba(77, 139, 255, .5);
}

.rs-planning-card-education { --rs-acc: #2FD4B0; }
.rs-planning-card-occasion  { --rs-acc: #A874FF; }

.rs-planning-when {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

.rs-planning-day {
  color: #C4CBDC;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.rs-planning-num {
  color: #FFFFFF;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 46px;
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.01em;
}

.rs-planning-body {
  min-width: 0;
  align-self: center;
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, .08);
}

.rs-planning-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--rs-acc);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.rs-planning-tag svg {
  flex: none;
  width: 17px;
  height: 17px;
}

.rs-planning-card-title {
  margin: 10px 0 0;
  color: #FFFFFF;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -.005em;
}

.rs-planning-why {
  margin: 10px 0 0;
  color: #A7AEC0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(14px, 1.15vw, 15.5px);
  font-weight: 400;
  line-height: 1.5;
}

.rs-planning-why span {
  color: var(--rs-acc);
  font-weight: 700;
}

/* ── thumbnails (CSS/SVG stand-ins, no photography in the repo) ───── */

.rs-planning-thumb {
  position: relative;
  align-self: stretch;
  min-height: 112px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  overflow: hidden;
}

.rs-planning-thumb-art {
  display: block;
  width: 100%;
  height: 100%;
}

.rs-planning-thumb-offer {
  background: linear-gradient(165deg, #16213F 0%, #0A1024 100%);
}

.rs-planning-thumb-cap {
  position: absolute;
  left: 14%;
  top: 51%;
  color: #FFFFFF;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.rs-planning-thumb-tag {
  position: absolute;
  right: 5%;
  bottom: 20%;
  padding: 4px 7px;
  border-radius: 5px;
  background: linear-gradient(140deg, #4D8BFF 0%, #2F6BE0 100%);
  color: #FFFFFF;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  transform: rotate(-8deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
}

.rs-planning-thumb-ask {
  background: linear-gradient(160deg, #17B39A 0%, #0E8F79 55%, #0C7F6E 100%);
}

.rs-planning-thumb-festival {
  background: linear-gradient(165deg, #4A2076 0%, #7B2E86 55%, #A03A82 100%);
}

/* ── footer strip ─────────────────────────────────────────────────── */

.rs-planning-feed-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  background: rgba(0, 0, 0, .3);
  color: #8C93A6;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
}

.rs-planning-feed-foot svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: #4D8BFF;
}

.rs-planning-foot-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4D8BFF;
}

/* ── responsive ───────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .rs-planning-grid { gap: 40px; }
  .rs-planning-card { grid-template-columns: 66px minmax(0, 1fr) 96px; gap: 14px; padding: 16px; }
  .rs-planning-body { padding-left: 14px; }
  .rs-planning-num { font-size: 40px; }
}

@media (max-width: 900px) {
  .rs-planning { padding: 76px 0; }
  .rs-planning-grid { grid-template-columns: 1fr; gap: 44px; }
  .rs-planning-copy { order: 1; }
  .rs-planning-feed { order: 2; }
  .rs-planning-lead { max-width: 46ch; }
  .rs-planning-note { max-width: none; }
  .rs-planning-card { grid-template-columns: 72px minmax(0, 1fr) 104px; }
}

@media (max-width: 620px) {
  .rs-planning-shell { width: calc(100% - 32px); }
  .rs-planning-title br { display: none; }
  .rs-planning-feed-head { padding: 20px 16px 0; }
  .rs-planning-cards { padding: 16px 16px 18px; }
  .rs-planning-feed-foot { padding: 14px 16px; font-size: 13.5px; }
  .rs-planning-card { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; }
  .rs-planning-num { font-size: 34px; }
  .rs-planning-thumb { display: none; }
  .rs-planning-note { gap: 16px; padding: 18px 20px; }
}


/* ====================================================================
   07-create
   ==================================================================== */
/* ============================================================
   07 — "One app. Every content format." (rs-create)
   ============================================================ */

.rs-create {
  padding: 96px 0;
  background: transparent;
  position: relative;
  --rs-cy: #3fe0ff;
  --rs-bl: #4d7cff;
  --rs-pu: #9d57ff;
  --rs-gr: #35d08a;
  --rs-pk: #fb6ed8;
  --rs-or: #ffb45e;
  --rs-in: #7c6bff;
  --rs-mock-serif: Georgia, "Times New Roman", Times, serif;
}

.rs-create-shell {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}

/* ---------- heading block ---------- */

.rs-create-head {
  text-align: center;
  max-width: 940px;
  margin: 0 auto 46px;
}

.rs-create-kicker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: clamp(11px, 1.1vw, 13.5px);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 18px;
  line-height: 1.4;
}

.rs-create-kicker .rs-kw1 { color: #3fe0ff; }
.rs-create-kicker .rs-kw2 { color: #46bcff; }
.rs-create-kicker .rs-kw3 { color: #4d7cff; }
.rs-create-kicker .rs-kw4 { color: #7568ff; }
.rs-create-kicker .rs-kw5 { color: #9d57ff; }

.rs-create-title {
  font-family: "Barlow Condensed", "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: .96;
  letter-spacing: -.005em;
  color: #fff;
  margin: 0;
}

.rs-create-grad {
  background: linear-gradient(96deg, #3fe0ff 0%, #4d7cff 45%, #9d57ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rs-create-sub {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.25vw, 17.5px);
  line-height: 1.62;
  color: #a7aec0;
  margin: 20px auto 0;
  max-width: 640px;
}

/* ---------- format grid ---------- */

.rs-create-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.rs-fmt {
  --rs-a: 63, 224, 255;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .085);
  background: linear-gradient(180deg, #0e111a 0%, #0a0c12 100%);
  padding: 18px;
  min-width: 0;
}

.rs-fmt-carousel { --rs-a: 157, 87, 255; }
.rs-fmt-video    { --rs-a: 251, 110, 216; }
.rs-fmt-flyer    { --rs-a: 255, 180, 94; }
.rs-fmt-edu      { --rs-a: 53, 208, 138; }
.rs-fmt-story    { --rs-a: 124, 107, 255; }

.rs-fmt-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.rs-fmt-chip {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--rs-a), .12);
  border: 1px solid rgba(var(--rs-a), .32);
  color: rgb(var(--rs-a));
}

.rs-fmt-chip svg {
  width: 21px;
  height: 21px;
  display: block;
}

.rs-fmt-head h3 {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0;
}

.rs-fmt-copy {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.6;
  color: #a7aec0;
  margin: 15px 0 0;
}

.rs-fmt-eg {
  display: block;
  margin-top: auto;
  padding-top: 13px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #767e92;
}

/* ---------- shared preview tile ---------- */

.rs-create-tile {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 4 / 3;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
}

@supports (container-type: inline-size) {
  .rs-create-tile {
    container-type: inline-size;
    font-size: clamp(12px, 4.5cqw, 20px);
  }
}

/* ---------- 1. image post ---------- */

.rs-tile-image {
  background: linear-gradient(150deg, #fbfbfa 0%, #eef0ec 55%, #e3e7e1 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}

.rs-tile-image .rs-mk-copy {
  position: absolute;
  left: 7%;
  top: 7%;
  z-index: 2;
}

.rs-mk-serif {
  font-family: var(--rs-mock-serif);
  font-size: 1.28em;
  line-height: 1.14;
  color: #1f3129;
  margin: 0;
}

.rs-mk-small {
  font-family: var(--rs-mock-serif);
  font-size: .72em;
  line-height: 1.42;
  color: #33443c;
  margin: .9em 0 0;
}

.rs-mk-bottle {
  position: absolute;
  right: 3%;
  bottom: 17%;
  width: 52%;
  height: auto;
}

.rs-mk-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 15%;
  min-height: 26px;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, .07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
}

.rs-mk-bar-l {
  display: inline-flex;
  align-items: center;
  gap: 12%;
}

.rs-mk-bar svg {
  width: 1.15em;
  height: 1.15em;
  display: block;
}

.rs-mk-bar-l svg { margin-right: .55em; }
.rs-mk-bar-l svg:last-child { margin-right: 0; }

/* ---------- 2. carousel ---------- */

.rs-tile-carousel {
  background: linear-gradient(160deg, #10131c 0%, #0b0d14 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.rs-cr-slide {
  position: absolute;
  border-radius: .55em;
  overflow: hidden;
  padding: 6% 5%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

.rs-cr-a {
  left: 1.5%;
  top: 6%;
  width: 41%;
  height: 88%;
  background: linear-gradient(165deg, #dfeadf 0%, #cbdfd0 100%);
  z-index: 3;
}

.rs-cr-b {
  left: 39%;
  top: 10%;
  width: 32%;
  height: 80%;
  background: linear-gradient(165deg, #f7f4ec 0%, #efe9dd 100%);
  z-index: 2;
}

.rs-cr-c {
  left: 67.5%;
  top: 13%;
  width: 31%;
  height: 74%;
  background: linear-gradient(165deg, #f3ede2 0%, #e8dfd0 100%);
  z-index: 1;
}

.rs-cr-five {
  display: block;
  font-family: var(--rs-mock-serif);
  font-size: 2.7em;
  line-height: .9;
  color: #23372c;
}

.rs-cr-ttl {
  display: block;
  margin-top: .5em;
  font-family: var(--rs-mock-serif);
  font-size: 1.02em;
  line-height: 1.24;
  color: #23372c;
}

.rs-cr-leaf {
  position: absolute;
  right: -6%;
  top: 12%;
  width: 46%;
  height: auto;
}

.rs-cr-num {
  position: absolute;
  right: 7%;
  top: 6%;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: .58em;
  color: #8b8171;
}

.rs-cr-lbl {
  display: block;
  font-family: var(--rs-mock-serif);
  font-size: .74em;
  color: #2c2a24;
  margin-bottom: .18em;
}

.rs-cr-lbl + .rs-cr-txt { margin-bottom: 1em; }

.rs-cr-txt {
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: .58em;
  line-height: 1.38;
  color: #4b463c;
}

.rs-cr-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.rs-cr-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}

.rs-cr-dots i.rs-cr-on { background: #9d57ff; }

/* ---------- 3. video (reel) ---------- */

.rs-tile-video {
  background: linear-gradient(155deg, #4a3524 0%, #6a4a2c 42%, #2a1d12 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}

.rs-tile-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 20% 15%, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, 0) 60%);
  pointer-events: none;
}

.rs-vd-copy {
  position: absolute;
  left: 7%;
  top: 8%;
  z-index: 3;
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: .92em;
  line-height: 1.34;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

.rs-vd-bottle {
  position: absolute;
  right: 12%;
  bottom: 4%;
  width: 33%;
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5));
}

.rs-vd-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .78);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

.rs-vd-play svg {
  width: 45%;
  height: 45%;
  display: block;
  margin-left: 8%;
}

.rs-vd-brand {
  position: absolute;
  left: 7%;
  bottom: 7%;
  z-index: 4;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: .6em;
  line-height: 1.3;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

.rs-vd-time {
  position: absolute;
  right: 6%;
  bottom: 7%;
  z-index: 4;
  padding: .28em .6em;
  border-radius: .35em;
  background: rgba(10, 8, 6, .68);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: .58em;
  color: #fff;
}

/* ---------- 4. offer flyer ---------- */

.rs-tile-flyer {
  background: linear-gradient(140deg, #101116 0%, #08090c 60%, #0d0b08 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}

.rs-tile-flyer::after {
  content: "";
  position: absolute;
  right: -10%;
  top: -20%;
  width: 70%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 200, 106, .2) 0%, rgba(240, 200, 106, 0) 65%);
  pointer-events: none;
}

.rs-fl-copy {
  position: absolute;
  left: 7%;
  top: 8%;
  right: 42%;
  z-index: 3;
}

.rs-fl-kick {
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: .95em;
  line-height: 1.16;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #f0c86a;
}

.rs-fl-big {
  display: flex;
  align-items: baseline;
  margin-top: .3em;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.85em;
  line-height: 1;
  color: #f4d488;
}

.rs-fl-big em {
  font-style: normal;
  font-size: .5em;
  margin-left: .06em;
}

.rs-fl-big i {
  font-style: normal;
  font-weight: 700;
  font-size: .34em;
  letter-spacing: .04em;
  margin-left: .3em;
  color: #e6bd63;
}

.rs-fl-on {
  display: block;
  margin-top: .35em;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: .62em;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}

.rs-fl-btn {
  display: inline-block;
  margin-top: .85em;
  padding: .42em 1.1em;
  border-radius: .28em;
  background: linear-gradient(180deg, #f3ce76 0%, #d9a942 100%);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: .58em;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1a1408;
}

.rs-fl-fine {
  display: block;
  margin-top: .9em;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: .5em;
  color: #a19587;
}

.rs-fl-gift {
  position: absolute;
  right: 3%;
  bottom: 10%;
  width: 44%;
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .55));
}

/* ---------- 5. educational ---------- */

.rs-tile-edu {
  background: linear-gradient(150deg, #eef6f2 0%, #dfeee9 55%, #d3e7e4 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .09);
}

.rs-ed-copy {
  position: absolute;
  left: 6.5%;
  top: 7%;
  right: 40%;
  z-index: 3;
}

.rs-ed-kick {
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: .58em;
  color: #3b4a4a;
}

.rs-ed-big {
  display: block;
  margin-top: .35em;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.02em;
  line-height: 1.2;
  letter-spacing: -.012em;
  color: #16211f;
}

.rs-ed-sub {
  display: block;
  margin-top: .8em;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: .55em;
  line-height: 1.45;
  color: #3f4f4e;
}

.rs-ed-glass {
  position: absolute;
  right: 4%;
  bottom: 20%;
  width: 40%;
  height: auto;
  z-index: 2;
}

.rs-ed-row {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 5%;
  z-index: 4;
  display: flex;
  align-items: center;
}

.rs-ed-row span {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: .5em;
  color: #354746;
  white-space: nowrap;
  overflow: hidden;
}

.rs-ed-row span + span {
  border-left: 1px solid rgba(20, 50, 45, .16);
  padding-left: .9em;
  margin-left: .6em;
}

.rs-ed-row svg {
  width: 1.5em;
  height: 1.5em;
  flex: 0 0 auto;
  color: #4d7a6d;
}

/* ---------- 6. brand storytelling ---------- */

.rs-tile-story {
  background: linear-gradient(150deg, #e7ecf3 0%, #d7dfea 50%, #c3cddc 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .09);
}

.rs-st-copy {
  position: absolute;
  left: 6.5%;
  top: 8%;
  right: 42%;
  z-index: 3;
}

.rs-st-big {
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: .97em;
  line-height: 1.22;
  letter-spacing: -.012em;
  color: #171e2a;
}

.rs-st-sub {
  display: block;
  margin-top: .9em;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: .55em;
  line-height: 1.45;
  color: #414c5d;
}

.rs-st-fig {
  position: absolute;
  right: 2%;
  bottom: 0;
  width: 42%;
  height: auto;
  z-index: 2;
}

.rs-st-note {
  position: absolute;
  left: 6.5%;
  bottom: 7%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .5em .7em;
  border-radius: .45em;
  background: rgba(246, 249, 252, .82);
  border: 1px solid rgba(70, 120, 105, .3);
  color: #3f7f6b;
}

.rs-st-note svg {
  width: 1.5em;
  height: 1.5em;
  flex: 0 0 auto;
}

.rs-st-note em {
  font-style: normal;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: .5em;
  line-height: 1.4;
  color: #24313f;
}

/* ---------- always-included strip ---------- */

.rs-create-inc {
  margin-top: 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .085);
  background: linear-gradient(180deg, #0e111a 0%, #0a0c12 100%);
  padding: 18px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
}

.rs-inc-badge {
  display: inline-flex;
  width: 34px;
  height: 34px;
  color: #4d7cff;
}

.rs-inc-badge svg {
  width: 100%;
  height: 100%;
  display: block;
}

.rs-inc-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6f9bff;
  margin-right: 8px;
}

.rs-inc-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.rs-inc-item svg {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  display: block;
}

.rs-inc-item strong {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15.5px;
  color: #e4e8f1;
  white-space: nowrap;
}

.rs-inc-i1 svg { color: #ffb45e; }
.rs-inc-i2 svg { color: #3fe0ff; }
.rs-inc-i3 svg { color: #4d7cff; }
.rs-inc-i4 svg { color: #9d57ff; }
.rs-inc-i5 svg { color: #4d7cff; }

.rs-inc-dot {
  color: #4b5265;
  font-size: 17px;
  line-height: 1;
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .rs-create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .rs-create { padding: 76px 0; }
  .rs-create-shell { width: min(1280px, calc(100% - 40px)); }
  .rs-create-brk { display: none; }
}

@media (max-width: 760px) {
  .rs-create-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rs-create-head { margin-bottom: 34px; }
  .rs-create-inc {
    padding: 18px;
    justify-content: flex-start;
    gap: 10px 12px;
  }
  .rs-inc-dot { display: none; }
  .rs-inc-label { margin-right: 0; }
}

@media (max-width: 420px) {
  .rs-create-shell { width: calc(100% - 32px); }
  .rs-fmt { padding: 15px; }
  .rs-fmt-head h3 { font-size: 17.5px; }
}

/* ---------- phone ----------
   The grid is already one column below 760px, so on a phone each card
   owns the full ~330px of the shell and the preview tiles stop being
   miniatures. Everything below re-sets the tile type from a fixed base
   with an 11px floor on every micro-label, and buys the tiles the room
   that type needs. Nothing here applies above 700px. */

@media (max-width: 700px) {

  /* --- card frame ------------------------------------------------ */

  .rs-create-head { margin-bottom: 30px; }
  .rs-create-grid { gap: 18px; }
  .rs-fmt { padding: 16px; border-radius: 15px; }
  .rs-fmt-head { gap: 11px; margin-bottom: 14px; }
  .rs-fmt-chip { width: 36px; height: 36px; border-radius: 10px; }
  .rs-fmt-chip svg { width: 19px; height: 19px; }
  .rs-fmt-head h3 { font-size: 18px; }
  .rs-fmt-copy { font-size: 15px; line-height: 1.55; margin-top: 14px; }
  .rs-fmt-eg { font-size: 11px; letter-spacing: .1em; padding-top: 12px; }

  /* --- preview tiles ---------------------------------------------
     Base type is set in px, not in cqw: the container query made the
     tile's own font-size track the card width, so at 360px every
     em-sized label inside collapsed to 8-9px. A 16px base restores the
     desktop proportions inside a narrower box, and the tiles get a
     little more height so the larger type still fits. */

  .rs-create-tile {
    font-size: clamp(16px, 5cqw, 17px);
    aspect-ratio: 5 / 4;
    border-radius: 11px;
  }

  /* Every label that would still land under 11px at 360px gets a floor.
     The em term is kept so they still grow with the tile at 390px+. */

  .rs-mk-small    { font-size: max(11px, .72em); }
  .rs-cr-num      { font-size: max(11px, .58em); }
  .rs-vd-brand    { font-size: max(11px, .6em); }
  .rs-vd-time     { font-size: max(11px, .58em); }
  .rs-fl-big i    { font-size: max(11px, .34em); }
  .rs-fl-on       { font-size: max(11px, .62em); }
  .rs-fl-btn      { font-size: max(11px, .58em); }
  .rs-fl-fine     { font-size: max(11px, .5em); }
  .rs-ed-kick     { font-size: max(11px, .58em); }
  .rs-ed-sub      { font-size: max(11px, .55em); }
  .rs-ed-row span { font-size: max(11px, .5em); }
  .rs-st-sub      { font-size: max(11px, .55em); }
  .rs-st-note em  { font-size: max(11px, .5em); }

  /* 1 · image post — the caption column needs the width the bottle was
     taking, and the action bar grows with its now-larger icons. */
  .rs-mk-bottle { width: 46%; right: 2%; bottom: 19%; }
  .rs-mk-bar { height: 17%; min-height: 30px; }
  .rs-mk-bar svg { width: 1.05em; height: 1.05em; }

  /* 2 · carousel — at 360px three 95px slides cannot hold an 11px line,
     so the third is dropped and the two that remain keep the fanned
     offset of the reference at a legible width. */
  .rs-tile-carousel { aspect-ratio: 4 / 3; }
  .rs-cr-c { display: none; }
  .rs-cr-a { left: 2%; top: 5%; width: 43%; height: 90%; }
  .rs-cr-b { left: 42%; top: 7%; width: 56%; height: 86%; }
  .rs-cr-slide { padding: 6% 6%; }
  .rs-cr-five { font-size: 2.9em; }
  .rs-cr-ttl { font-size: 1.16em; margin-top: .45em; }
  .rs-cr-leaf { width: 38%; top: 8%; right: 0; }
  .rs-cr-num { top: 5%; right: 5%; }
  .rs-cr-lbl { font-size: max(13px, .82em); }
  .rs-cr-txt { font-size: max(12px, .62em); }
  .rs-cr-lbl + .rs-cr-txt { margin-bottom: 1.1em; }
  .rs-cr-dots { margin-top: 10px; }

  /* 3 · video */
  .rs-vd-copy { font-size: .95em; }
  .rs-vd-bottle { width: 30%; right: 10%; }
  .rs-vd-play { width: 19%; }

  /* 4 · offer flyer — the headline block is a nowrap flex row, so the
     copy column is widened to stop it pushing past the tile edge. */
  .rs-tile-flyer { aspect-ratio: 4 / 3; }
  .rs-tile-flyer::after { right: 0; width: 62%; }
  .rs-fl-copy { top: 9%; right: 38%; }
  .rs-fl-kick { font-size: 1.02em; }
  .rs-fl-big { font-size: 1.95em; flex-wrap: wrap; }
  .rs-fl-fine { margin-top: 1em; }
  .rs-fl-gift { width: 38%; right: 2%; bottom: 13%; }

  /* 5 · educational — the three benefit chips stay on one row at 11px
     only if their icons and separators tighten up. */
  .rs-ed-copy { right: 36%; }
  .rs-ed-glass { width: 34%; bottom: 24%; }
  .rs-ed-row { left: 4%; right: 4%; bottom: 4.5%; }
  .rs-ed-row span { gap: .3em; }
  .rs-ed-row svg { width: 1.15em; height: 1.15em; }
  .rs-ed-row span + span { padding-left: .55em; margin-left: .4em; }

  /* 6 · brand storytelling */
  .rs-st-copy { right: 38%; }
  .rs-st-fig { width: 39%; right: 1%; }
  .rs-st-note { padding: .45em .6em; gap: .45em; bottom: 5%; }
  .rs-st-note svg { width: 1.35em; height: 1.35em; }

  /* --- always-included strip -------------------------------------
     Desktop is one centred row of five pairs. On a phone the badge and
     label take their own line and the five pairs wrap onto the lines
     below, rather than compressing into a single squeezed row. */

  .rs-create-inc {
    margin-top: 18px;
    padding: 15px 16px 17px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px 14px;
  }

  .rs-inc-badge { width: 28px; height: 28px; flex: 0 0 auto; }

  /* Growing the label to fill the rest of the first line is what keeps
     the badge + "ALWAYS INCLUDED" pair on its own row and drops the five
     item pairs onto the lines below, instead of squeezing all seven in. */
  .rs-inc-label {
    flex: 1 1 75%;
    font-size: 12px;
    letter-spacing: .15em;
    margin-right: 0;
  }

  .rs-inc-item { flex: 0 1 auto; gap: 8px; min-width: 0; }
  .rs-inc-item svg { width: 19px; height: 19px; }

  .rs-inc-item strong {
    font-size: 14px;
    white-space: normal;
    line-height: 1.25;
  }

  .rs-inc-dot { display: none; }
}

@media (max-width: 380px) {
  /* 320-380: the tile is under 280px, so the copy columns give up a
     little more of the illustration's width rather than wrapping. */
  .rs-fl-copy { right: 34%; }
  .rs-ed-copy { right: 32%; }
  .rs-st-copy { right: 34%; }
  .rs-ed-row svg { width: 1em; height: 1em; }
  .rs-ed-row span + span { padding-left: .4em; margin-left: .3em; }
}

@media (max-width: 340px) {
  /* 320px: the last places where an 11px line no longer fits. Spacing
     gives way first; the benefit row drops its icons rather than its
     labels, because the labels are the content. */
  .rs-cr-slide { padding: 5%; }
  .rs-cr-lbl + .rs-cr-txt { margin-bottom: .7em; }
  .rs-fl-copy { top: 6%; }
  .rs-fl-kick { font-size: .92em; }
  .rs-fl-big { font-size: 1.75em; }
  .rs-fl-fine { margin-top: .6em; }
  .rs-ed-row { left: 3.5%; right: 3.5%; }
  .rs-ed-row svg { display: none; }
  .rs-ed-row span + span { padding-left: .5em; margin-left: .45em; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-create * { animation: none !important; transition: none !important; }
}


/* ====================================================================
   08-brand
   ==================================================================== */
/* ============================================================
   08 — "Your brand stays yours"
   ============================================================ */

/* Qualified with `section` on purpose: the site header's logo link is also
   `<a class="rs-brand">`, so a bare `.rs-brand` root rule lands on it and pads
   the header out to 254px tall. Only the section root may match here. */
section.rs-brand {
  padding: 96px 0;
  background: transparent;
  position: relative;
}

.rs-brand .rs-brand-shell {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}

.rs-brand .rs-brand-grid {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: 72px;
  align-items: center;
}

/* ---------- LEFT: copy ------------------------------------ */

.rs-brand .rs-brand-copy {
  min-width: 0;
}

.rs-brand .rs-brand-kicker {
  margin: 0 0 26px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5B84FF;
}

.rs-brand .rs-brand-title {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(38px, 4.4vw, 62px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.005em;
  color: #FFFFFF;
}

.rs-brand .rs-brand-line {
  display: block;
}

.rs-brand .rs-brand-grad-a,
.rs-brand .rs-brand-grad-b {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rs-brand .rs-brand-grad-a {
  background-image: linear-gradient(96deg, #3FE0FF 0%, #4D7CFF 45%, #9D57FF 100%);
}

.rs-brand .rs-brand-grad-b {
  background-image: linear-gradient(96deg, #4D7CFF 0%, #7A68FF 55%, #9D57FF 100%);
}

.rs-brand .rs-brand-hairline {
  display: block;
  width: 95px;
  height: 3px;
  margin: 32px 0 28px;
  border-radius: 999px;
  background: linear-gradient(90deg, #3FE0FF 0%, #4D7CFF 100%);
}

.rs-brand .rs-brand-lead {
  max-width: 52ch;
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.6;
  color: #D3D8E4;
}

.rs-brand .rs-brand-divider {
  display: block;
  width: 100%;
  height: 1px;
  margin: 30px 0 28px;
  background: rgba(255, 255, 255, 0.09);
}

/* sparkle note row */

.rs-brand .rs-brand-note {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.rs-brand .rs-brand-note-badge {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(157, 87, 255, 0.28);
  border-radius: 13px;
  background: rgba(157, 87, 255, 0.12);
  color: #B98CFF;
}

.rs-brand .rs-brand-note-badge svg {
  width: 24px;
  height: 24px;
  display: block;
}

.rs-brand .rs-brand-note p {
  max-width: 39ch;
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.66;
  color: #A7AEC0;
}

/* shield card */

.rs-brand .rs-brand-assure {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 32px;
  padding: 22px 26px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: linear-gradient(180deg, #11141D 0%, #0B0D14 100%);
}

.rs-brand .rs-brand-shield {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

.rs-brand .rs-brand-shield svg {
  width: 44px;
  height: 44px;
  display: block;
}

.rs-brand .rs-brand-assure-text {
  min-width: 0;
}

.rs-brand .rs-brand-assure-text h3 {
  margin: 0 0 5px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: #FFFFFF;
}

.rs-brand .rs-brand-assure-text p {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
  color: #4E9CFF;
}

/* ---------- RIGHT: brand panel ---------------------------- */

.rs-brand .rs-brand-panel {
  min-width: 0;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background: linear-gradient(180deg, #0F121B 0%, #0A0C12 100%);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
}

.rs-brand .rs-brand-identity {
  display: flex;
  align-items: center;
  gap: 20px;
}

.rs-brand .rs-brand-logo {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #F6F1E3;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.rs-brand .rs-brand-logo svg {
  width: 42px;
  height: 42px;
  display: block;
}

.rs-brand .rs-brand-identity-text {
  min-width: 0;
  flex: 1 1 auto;
}

.rs-brand .rs-brand-name {
  margin: 0 0 4px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

.rs-brand .rs-brand-traits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: #9AA2B5;
}

.rs-brand .rs-brand-traits i {
  font-style: normal;
  color: #5E6579;
}

.rs-brand .rs-brand-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid rgba(53, 208, 138, 0.55);
  border-radius: 999px;
  background: rgba(53, 208, 138, 0.09);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #35D08A;
}

.rs-brand .rs-brand-status i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #35D08A;
}

.rs-brand .rs-brand-panel-rule {
  display: block;
  width: 100%;
  height: 1px;
  margin: 26px 0 24px;
  background: rgba(255, 255, 255, 0.08);
}

.rs-brand .rs-brand-knows {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.rs-brand .rs-brand-knows-text {
  min-width: 0;
}

.rs-brand .rs-brand-knows-text h3 {
  margin: 0 0 6px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

.rs-brand .rs-brand-knows-text p {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #9AA2B5;
}

.rs-brand .rs-brand-swatches {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rs-brand .rs-brand-swatches span {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--rs-brand-swatch, #ffffff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* ---------- preview tiles --------------------------------- */

.rs-brand .rs-brand-previews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.rs-brand .rs-brand-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  padding: 1.25em;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(29, 51, 24, 0.12);
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(7px, 1.02vw, 11px);
  line-height: 1.35;
  color: #26331F;
}

.rs-brand .rs-brand-tile-a {
  background:
    radial-gradient(120% 80% at 15% 10%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(158deg, #E9F0E1 0%, #D6E4CB 55%, #C4D7B8 100%);
}

.rs-brand .rs-brand-tile-b {
  background:
    radial-gradient(110% 70% at 90% 90%, rgba(176, 205, 168, 0.5) 0%, rgba(176, 205, 168, 0) 62%),
    linear-gradient(155deg, #F6F8F1 0%, #ECF1E4 100%);
}

.rs-brand .rs-brand-tile-c {
  background:
    radial-gradient(120% 70% at 20% 8%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(160deg, #DFE9D3 0%, #CBDCBE 50%, #B9CFAC 100%);
}

.rs-brand .rs-brand-tile-head {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45em;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #22301B;
}

.rs-brand .rs-brand-tile-b .rs-brand-tile-head {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.3em;
  letter-spacing: -0.015em;
}

.rs-brand .rs-brand-tile-sub {
  position: relative;
  z-index: 2;
  margin: 2.4em 0 0;
  font-size: 1.05em;
  font-weight: 500;
  line-height: 1.5;
  color: #3B4A33;
}

.rs-brand .rs-brand-tile-label {
  position: relative;
  z-index: 2;
  margin: 0 0 0.35em;
  font-size: 1.05em;
  font-weight: 500;
  color: #3E5136;
}

.rs-brand .rs-brand-tile-cta {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-top: 1.1em;
  padding: 0.55em 1em;
  border-radius: 4px;
  background: #294A2C;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.9em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #F2F7EE;
}

.rs-brand .rs-brand-steps {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.85em;
  margin: 1.5em 0 0;
  padding: 0;
  list-style: none;
}

.rs-brand .rs-brand-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
}

.rs-brand .rs-brand-step-chip {
  flex: 0 0 auto;
  width: 2em;
  height: 2em;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #6F8551;
  color: #F4F8EC;
}

.rs-brand .rs-brand-step-chip svg {
  width: 1.15em;
  height: 1.15em;
  display: block;
}

.rs-brand .rs-brand-step-text {
  min-width: 0;
  font-size: 0.92em;
  line-height: 1.3;
  color: #5A6A50;
}

.rs-brand .rs-brand-step-text b {
  display: block;
  margin-bottom: 0.15em;
  font-size: 1.12em;
  font-weight: 700;
  color: #24301D;
}

.rs-brand .rs-brand-tile-art {
  position: absolute;
  z-index: 1;
  display: block;
}

.rs-brand .rs-brand-art-bottle {
  right: -6%;
  bottom: 0;
  width: 72%;
}

.rs-brand .rs-brand-art-leaf {
  right: -12%;
  top: 22%;
  width: 60%;
}

.rs-brand .rs-brand-art-jar {
  left: 0;
  right: 0;
  bottom: 2%;
  width: 100%;
}

/* ---------- panel footnote -------------------------------- */

.rs-brand .rs-brand-footnote {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
}

.rs-brand .rs-brand-orb {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(145deg, #8B5CF6 0%, #5A3FD6 55%, #3B2E9E 100%);
  box-shadow: 0 10px 26px -10px rgba(120, 80, 240, 0.7);
}

.rs-brand .rs-brand-orb svg {
  width: 26px;
  height: 26px;
  display: block;
}

.rs-brand .rs-brand-footnote-text {
  min-width: 0;
}

.rs-brand .rs-brand-footnote-title {
  margin: 0 0 4px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  background-image: linear-gradient(96deg, #3FE0FF 0%, #4D7CFF 55%, #7C63FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rs-brand .rs-brand-footnote-text p + p {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  color: #9AA2B5;
}

/* ---------- responsive ------------------------------------ */

@media (max-width: 1180px) {
  .rs-brand .rs-brand-grid { gap: 48px; }
  .rs-brand .rs-brand-panel { padding: 28px; }
  .rs-brand .rs-brand-logo { width: 58px; height: 58px; }
  .rs-brand .rs-brand-logo svg { width: 36px; height: 36px; }
  .rs-brand .rs-brand-name { font-size: 23px; }
}

@media (max-width: 900px) {
  .rs-brand { padding: 76px 0; }

  .rs-brand .rs-brand-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
    align-items: stretch;
  }

  .rs-brand .rs-brand-lead,
  .rs-brand .rs-brand-note p { max-width: 46ch; }

  .rs-brand .rs-brand-tile { font-size: clamp(6.5px, 2.15vw, 11px); }
}

@media (max-width: 640px) {
  .rs-brand .rs-brand-shell { width: calc(100% - 32px); }

  .rs-brand .rs-brand-panel { padding: 20px; border-radius: 14px; }

  .rs-brand .rs-brand-identity {
    flex-wrap: wrap;
    gap: 14px;
  }

  .rs-brand .rs-brand-identity-text { flex: 1 1 140px; }

  .rs-brand .rs-brand-name { font-size: 21px; }
  .rs-brand .rs-brand-traits { font-size: 14px; gap: 9px; }
  .rs-brand .rs-brand-status { padding: 7px 12px; font-size: 10px; }

  .rs-brand .rs-brand-knows { flex-wrap: wrap; gap: 16px; }
  .rs-brand .rs-brand-knows-text h3 { font-size: 19px; }
  .rs-brand .rs-brand-knows-text p { font-size: 15px; }

  .rs-brand .rs-brand-lead { font-size: 17px; }
  .rs-brand .rs-brand-note { gap: 16px; }
  .rs-brand .rs-brand-note-badge { width: 40px; height: 40px; border-radius: 11px; }
  .rs-brand .rs-brand-note-badge svg { width: 21px; height: 21px; }
  .rs-brand .rs-brand-note p { font-size: 16px; }

  .rs-brand .rs-brand-assure { gap: 16px; padding: 18px 18px; }
  .rs-brand .rs-brand-shield svg { width: 38px; height: 38px; }
  .rs-brand .rs-brand-assure-text h3 { font-size: 18px; }
  .rs-brand .rs-brand-assure-text p { font-size: 15px; }

  .rs-brand .rs-brand-footnote { gap: 14px; margin-top: 22px; }
  .rs-brand .rs-brand-orb { width: 44px; height: 44px; }
  .rs-brand .rs-brand-orb svg { width: 22px; height: 22px; }
  .rs-brand .rs-brand-footnote-title { font-size: 18px; }
  .rs-brand .rs-brand-footnote-text p + p { font-size: 15px; }
}

/* ---------- phone ------------------------------------------
   Three portrait tiles squeezed into one 360px row land at 89px
   each, which drags their type down to 7px and clips the middle
   tile mid-sentence. On a phone the row becomes a horizontal
   scroller at a legible tile width instead, and the tile type is
   set in px rather than scaled off the tile width. */

@media (max-width: 700px) {
  .rs-brand .rs-brand-status {
    padding: 8px 13px;
    font-size: 11.5px;
    letter-spacing: 0.12em;
  }

  .rs-brand .rs-brand-previews {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    margin-top: 22px;
    /* bleed to the panel's inner edges so the cut-off tile reads as scrollable */
    margin-inline: -20px;
    padding-inline: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .rs-brand .rs-brand-previews::-webkit-scrollbar { display: none; }

  .rs-brand .rs-brand-tile {
    flex: 1 0 176px;
    scroll-snap-align: start;
    /* height follows the content instead of clipping it; flex stretch
       keeps all three tiles the same height */
    aspect-ratio: auto;
    min-height: 234px;
    padding: 1.15em;
    border-radius: 9px;
    font-size: 12px;
  }

  /* keep the decorative art inside the tile's own clip box */
  .rs-brand .rs-brand-art-bottle { right: 0; width: 68%; }
  .rs-brand .rs-brand-art-leaf { right: 0; top: 26%; width: 52%; }

  .rs-brand .rs-brand-tile-sub,
  .rs-brand .rs-brand-tile-label { font-size: 12.5px; }
  .rs-brand .rs-brand-tile-cta { font-size: 11.5px; }
  .rs-brand .rs-brand-step-text { font-size: 11.5px; }
  .rs-brand .rs-brand-step-text b { font-size: 12.5px; }
}


/* ====================================================================
   09-control
   ==================================================================== */
/* ==========================================================================
   09 — "AI plans. You approve."  (.rs-control)
   ========================================================================== */

.rs-control {
  --rs-c-cyan: #3FE0FF;
  --rs-c-blue: #4D7CFF;
  --rs-c-purple: #9D57FF;
  --rs-c-green: #35D08A;
  --rs-c-text: #FFFFFF;
  --rs-c-text2: #E4E8F1;
  --rs-c-muted: #A7AEC0;
  --rs-c-faint: #767E92;
  --rs-c-line: rgba(255, 255, 255, .08);
  --rs-c-line2: rgba(255, 255, 255, .14);
  padding: 96px 0;
  background: transparent;
  position: relative;
}

.rs-control .rs-control-shell {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}

/* ---------- split heading ------------------------------------------------ */

.rs-control .rs-control-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-bottom: 52px;
}

.rs-control .rs-control-head-left { min-width: 0; }

.rs-control .rs-control-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rs-c-blue);
}

.rs-control .rs-control-kicker-star {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: #5B8CFF;
}

.rs-control .rs-control-h2 {
  margin: 0;
  font-family: "Barlow Condensed", "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: .94;
  letter-spacing: -.005em;
  color: var(--rs-c-text);
}

.rs-control .rs-control-grad {
  background: linear-gradient(96deg, #3FE0FF 0%, #4D7CFF 45%, #9D57FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rs-control .rs-control-head-right {
  min-width: 0;
  max-width: 470px;
  padding-top: 8px;
}

.rs-control .rs-control-lede {
  margin: 0 0 8px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.5;
  color: var(--rs-c-muted);
}

.rs-control .rs-control-lede b {
  font-weight: 500;
  color: var(--rs-c-text2);
}

.rs-control .rs-control-lede-strong {
  margin-bottom: 0;
  color: var(--rs-c-text);
}

.rs-control .rs-control-w-cyan { color: var(--rs-c-cyan); font-weight: 600; }
.rs-control .rs-control-w-blue { color: #5B8CFF; font-weight: 600; }
.rs-control .rs-control-w-purple { color: var(--rs-c-purple); font-weight: 600; }

.rs-control .rs-control-assure {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--rs-c-line);
}

.rs-control .rs-control-assure-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  color: #8B6BFF;
}

.rs-control .rs-control-assure-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--rs-c-muted);
}

/* ---------- three-step flow --------------------------------------------- */

.rs-control .rs-control-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr) 0 minmax(0, 1fr);
  column-gap: 13px;
  align-items: stretch;
}

.rs-control .rs-control-arrow {
  position: relative;
  z-index: 2;
  width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.rs-control .rs-control-arrow span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(77, 124, 255, .5);
  background: #090B11;
  color: var(--rs-c-blue);
  box-shadow: 0 0 26px -8px rgba(77, 124, 255, .8);
}

.rs-control .rs-control-arrow svg { width: 20px; height: 20px; }

.rs-control .rs-control-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 22px 24px;
  border-radius: 20px;
  border: 1px solid var(--rs-c-line);
  background: linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
}

.rs-control .rs-control-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}

.rs-control .rs-control-step {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .02em;
}

.rs-control .rs-control-card-title {
  margin: 0 0 4px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.rs-control .rs-control-card-sub {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.42;
  color: var(--rs-c-muted);
}

.rs-control .rs-control-card-a .rs-control-step { color: var(--rs-c-blue); box-shadow: 0 0 22px -10px rgba(77, 124, 255, .9); }
.rs-control .rs-control-card-a .rs-control-card-title { color: var(--rs-c-cyan); }
.rs-control .rs-control-card-b .rs-control-step { color: var(--rs-c-purple); box-shadow: 0 0 22px -10px rgba(157, 87, 255, .9); }
.rs-control .rs-control-card-b .rs-control-card-title { color: #B36BFF; }
.rs-control .rs-control-card-c .rs-control-step { color: var(--rs-c-cyan); box-shadow: 0 0 22px -10px rgba(63, 224, 255, .8); }
.rs-control .rs-control-card-c .rs-control-card-title { color: var(--rs-c-cyan); }

/* ---------- card 01 — idea rows ----------------------------------------- */

.rs-control .rs-control-ideas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.rs-control .rs-control-idea {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: #10131C;
}

.rs-control .rs-control-thumb {
  display: block;
  width: 76px;
  height: 76px;
  border-radius: 9px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.rs-control .rs-control-thumb-sage { background: linear-gradient(150deg, #E7EFD6 0%, #CFE0B7 55%, #B8D39C 100%); }
.rs-control .rs-control-thumb-lav { background: linear-gradient(150deg, #C9BEF0 0%, #A99BE0 60%, #9384D6 100%); }
.rs-control .rs-control-thumb-amber { background: linear-gradient(150deg, #6B3A2A 0%, #A4522E 45%, #E08B3E 100%); }

.rs-control .rs-control-art {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
}

.rs-control .rs-control-idea-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.rs-control .rs-control-idea-title {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: var(--rs-c-text);
}

.rs-control .rs-control-idea-desc {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.42;
  color: var(--rs-c-muted);
}

.rs-control .rs-control-pill {
  flex: 0 0 auto;
  display: inline-block;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.2;
  white-space: nowrap;
}

.rs-control .rs-control-pill-blue {
  background: rgba(77, 124, 255, .16);
  border-color: rgba(77, 124, 255, .34);
  color: #6E9AFF;
}

.rs-control .rs-control-pill-purple {
  background: rgba(157, 87, 255, .16);
  border-color: rgba(157, 87, 255, .34);
  color: #B37DFF;
}

.rs-control .rs-control-pill-teal {
  background: rgba(45, 212, 191, .14);
  border-color: rgba(45, 212, 191, .3);
  color: #4FD9C4;
}

.rs-control .rs-control-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .015);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  color: #6E9AFF;
}

.rs-control .rs-control-ghost svg { width: 19px; height: 19px; }

.rs-control .rs-control-ghost-plain {
  margin-top: 12px;
  color: var(--rs-c-text2);
}

/* ---------- card 02 — preview + actions ---------------------------------- */

.rs-control .rs-control-shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(125deg, #EEF3E2 0%, #E2EBD1 45%, #CFE0B9 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}

.rs-control .rs-control-shot-copy {
  position: absolute;
  inset: 0 42% 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 18px;
  z-index: 2;
}

.rs-control .rs-control-shot-title {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(19px, 2.15vw, 29px);
  line-height: 1.06;
  letter-spacing: -.01em;
  color: #17371B;
}

.rs-control .rs-control-shot-offer {
  margin-top: 8px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 1.45vw, 19px);
  line-height: 1.2;
  color: #1E4322;
}

.rs-control .rs-control-shot-sub {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(11px, 1.05vw, 14px);
  line-height: 1.32;
  color: #3B5238;
}

.rs-control .rs-control-shot-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  color: #2C4A2A;
  white-space: nowrap;
}

.rs-control .rs-control-shot-pill svg { width: 13px; height: 13px; fill: #3E6B3B; }

.rs-control .rs-control-shot-art {
  position: absolute;
  right: -2%;
  bottom: 0;
  width: 56%;
  height: 100%;
  z-index: 1;
}

.rs-control .rs-control-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 16px 0 16px;
}

.rs-control .rs-control-dots i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  font-style: normal;
}

.rs-control .rs-control-dots .rs-control-dot-on { background: var(--rs-c-purple); }

.rs-control .rs-control-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.rs-control .rs-control-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 13px 8px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: #10131C;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: var(--rs-c-text2);
  white-space: nowrap;
}

.rs-control .rs-control-chip svg { flex: 0 0 auto; width: 17px; height: 17px; }

.rs-control .rs-control-chip-go {
  border-color: rgba(53, 208, 138, .45);
  background: linear-gradient(180deg, #12874F 0%, #0B6539 100%);
  color: #FFFFFF;
  box-shadow: 0 0 30px -14px rgba(53, 208, 138, .9);
}

.rs-control .rs-control-chip-go svg { color: #8FF0BE; }

/* ---------- card 03 — post mockup + calendar ----------------------------- */

.rs-control .rs-control-exec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.rs-control .rs-control-post {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #F7F8F5;
  border: 1px solid rgba(255, 255, 255, .18);
}

.rs-control .rs-control-post-top {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
}

.rs-control .rs-control-post-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #2F7D4F;
  color: #EAF6EE;
}

.rs-control .rs-control-post-avatar svg { width: 15px; height: 15px; }

.rs-control .rs-control-post-name {
  min-width: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  color: #14181F;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-control .rs-control-post-dots {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.rs-control .rs-control-post-dots i {
  display: block;
  width: 3.5px;
  height: 3.5px;
  border-radius: 999px;
  background: #6B7280;
  font-style: normal;
}

.rs-control .rs-control-post-shot {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1.02;
  overflow: hidden;
  background: linear-gradient(125deg, #EEF3E2 0%, #E2EBD1 45%, #CFE0B9 100%);
}

.rs-control .rs-control-post-copy {
  position: absolute;
  inset: 0 45% 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 12px;
  z-index: 2;
}

.rs-control .rs-control-post-title {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1.35vw, 18px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: #17371B;
}

.rs-control .rs-control-post-offer {
  margin-top: 7px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 1.05vw, 14px);
  line-height: 1.2;
  color: #1E4322;
}

.rs-control .rs-control-post-sub {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(9.5px, .85vw, 11.5px);
  line-height: 1.3;
  color: #3B5238;
}

.rs-control .rs-control-post-art {
  position: absolute;
  right: -4%;
  bottom: 0;
  width: 62%;
  height: 100%;
  z-index: 1;
}

.rs-control .rs-control-post-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 11px;
  color: #14181F;
}

.rs-control .rs-control-post-bar svg { width: 19px; height: 19px; }
.rs-control .rs-control-post-heart { color: #F0526A; }
.rs-control .rs-control-post-save { margin-left: auto; }

.rs-control .rs-control-exec-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.rs-control .rs-control-cal {
  display: block;
  padding: 13px 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--rs-c-line);
  background: #0B0D14;
}

.rs-control .rs-control-cal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--rs-c-faint);
}

.rs-control .rs-control-cal-top svg { flex: 0 0 auto; width: 16px; height: 16px; }

.rs-control .rs-control-cal-top b {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: var(--rs-c-text);
  white-space: nowrap;
}

.rs-control .rs-control-cal-days,
.rs-control .rs-control-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.rs-control .rs-control-cal-days i {
  font-style: normal;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 22px;
  text-align: center;
  color: var(--rs-c-faint);
}

.rs-control .rs-control-cal-grid i {
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  color: var(--rs-c-text2);
}

.rs-control .rs-control-cal-grid .rs-control-cal-on {
  background: #22C55E;
  color: #06210F;
  font-weight: 700;
  box-shadow: 0 0 18px -6px rgba(34, 197, 94, .9);
}

.rs-control .rs-control-sched {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid rgba(53, 208, 138, .4);
  background: rgba(53, 208, 138, .08);
}

.rs-control .rs-control-sched-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #22C55E;
  color: #06210F;
}

.rs-control .rs-control-sched-mark svg { width: 19px; height: 19px; }

.rs-control .rs-control-sched-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rs-control .rs-control-sched-text b {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: #4ADE80;
}

.rs-control .rs-control-sched-text span {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--rs-c-muted);
}

/* ---------- bottom assurance strip --------------------------------------- */

.rs-control .rs-control-foot {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 26px;
  padding: 20px 26px;
  border-radius: 20px;
  border: 1px solid var(--rs-c-line);
  background: linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
}

.rs-control .rs-control-foot-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(120, 130, 255, .35);
  background: linear-gradient(150deg, rgba(77, 124, 255, .28) 0%, rgba(157, 87, 255, .26) 100%);
  color: #8FA9FF;
  box-shadow: 0 0 34px -12px rgba(93, 95, 239, .9);
}

.rs-control .rs-control-foot-badge svg { width: 26px; height: 26px; }

.rs-control .rs-control-foot-title {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(19px, 2.1vw, 28px);
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--rs-c-text);
}

.rs-control .rs-control-foot-note {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--rs-c-muted);
}

.rs-control .rs-control-foot-note span { color: #6E9AFF; }

.rs-control .rs-control-foot-lock {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  border: 1px solid var(--rs-c-line2);
  background: rgba(255, 255, 255, .02);
  color: #C6CBD8;
}

.rs-control .rs-control-foot-lock svg { width: 24px; height: 24px; }

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 1180px) and (min-width: 1001px) {
  .rs-control .rs-control-exec { grid-template-columns: minmax(0, 1fr); }
  .rs-control .rs-control-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-control .rs-control-idea { grid-template-columns: auto minmax(0, 1fr); }
  .rs-control .rs-control-pill { grid-column: 2; justify-self: start; }
}

@media (max-width: 1000px) {
  .rs-control { padding: 76px 0; }

  .rs-control .rs-control-flow {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
  }

  .rs-control .rs-control-arrow {
    width: auto;
    height: 0;
  }

  .rs-control .rs-control-arrow span { transform: rotate(90deg); }
}

@media (max-width: 900px) {
  .rs-control .rs-control-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    margin-bottom: 40px;
  }

  .rs-control .rs-control-head-right {
    max-width: none;
    padding-top: 0;
  }

  .rs-control .rs-control-foot {
    flex-wrap: wrap;
    gap: 16px 20px;
    padding: 20px;
  }

  .rs-control .rs-control-foot-title { flex: 1 1 100%; order: 2; }
  .rs-control .rs-control-foot-note { flex: 1 1 100%; order: 3; }
  .rs-control .rs-control-foot-lock { order: 1; }
}

@media (max-width: 620px) {
  .rs-control { padding: 64px 0; }
  .rs-control .rs-control-shell { width: calc(100% - 32px); }

  .rs-control .rs-control-card { padding: 20px 16px; }

  .rs-control .rs-control-card-head { column-gap: 13px; }
  .rs-control .rs-control-step { width: 46px; height: 46px; font-size: 17px; }
  .rs-control .rs-control-card-title { font-size: 14px; }

  .rs-control .rs-control-idea {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
  }

  .rs-control .rs-control-pill {
    grid-column: 2;
    justify-self: start;
  }

  .rs-control .rs-control-thumb { width: 64px; height: 64px; }

  .rs-control .rs-control-chips { grid-template-columns: minmax(0, 1fr); }

  .rs-control .rs-control-exec { grid-template-columns: minmax(0, 1fr); }

  .rs-control .rs-control-shot-copy { inset: 0 40% 0 0; padding: 14px; }
  .rs-control .rs-control-shot-title { font-size: 24px; }
  .rs-control .rs-control-shot-offer { font-size: 17px; }
  .rs-control .rs-control-shot-sub { font-size: 13px; }

  .rs-control .rs-control-post-title { font-size: 20px; }
  .rs-control .rs-control-post-offer { font-size: 15px; }
  .rs-control .rs-control-post-sub { font-size: 12px; }
}

/* ---------- phone --------------------------------------------------------
   The three cards already stack at =<1000 and the step-03 mockup/calendar
   split already collapses at =<620. What is left for the phone: the month
   grid needs room to breathe now that it owns the full card width, the
   day letters sit on the 11px floor, and the two mock-ups let their
   decorative bottle bleed past their own clip edge. */

@media (max-width: 700px) {
  /* --- step 03: month calendar at full card width ------------------- */
  .rs-control .rs-control-cal {
    padding: 14px 10px 12px;
  }

  .rs-control .rs-control-cal-days,
  .rs-control .rs-control-cal-grid {
    gap: 2px 1px;
  }

  .rs-control .rs-control-cal-days i {
    font-size: 12px;
    line-height: 24px;
  }

  .rs-control .rs-control-cal-grid i {
    font-size: 13px;
  }

  .rs-control .rs-control-cal-top { margin-bottom: 6px; }
  .rs-control .rs-control-cal-top b { font-size: 15px; }
  .rs-control .rs-control-cal-top svg { width: 18px; height: 18px; }

  /* --- mock-ups: keep the decorative art inside its own clip box ----- */
  .rs-control .rs-control-shot-art { right: 0; width: 54%; }
  .rs-control .rs-control-post-art { right: 0; width: 58%; }

  /* --- step 03: the post mock-up is full width here, so its type can
         sit at reading size rather than thumbnail size ----------------- */
  .rs-control .rs-control-post-name { font-size: 14px; }
  .rs-control .rs-control-post-sub { font-size: 13px; }
  .rs-control .rs-control-sched-text span { font-size: 13px; }
  .rs-control .rs-control-idea-desc { font-size: 13.5px; }
  .rs-control .rs-control-pill { font-size: 13px; }
}


/* ====================================================================
   10-month
   ==================================================================== */
/* ==========================================================================
   Section 10 — "A month of calm"  (.rs-month)
   ========================================================================== */

.rs-month {
  padding: 96px 0;
  background: transparent;
  position: relative;
  --rs-month-cyan: #21B4F7;
  --rs-month-blue: #0C87F2;
  --rs-month-purple: #8D40F2;
  --rs-month-teal: #10CFAE;
  --rs-month-green: #21B36A;
  --rs-month-amber: #F7A039;
  --rs-month-line: rgba(255, 255, 255, .085);
}

.rs-month-shell {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}

.rs-month-grid {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: 56px;
  align-items: center;
}

.rs-month-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- left column: kicker + headline ---------- */

.rs-month-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #D3D9E6;
}

.rs-month-kicker svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: #8A45F6;
}

.rs-month-title {
  margin: 20px 0 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: .96;
  letter-spacing: -.005em;
  color: #FFFFFF;
}

.rs-month-grad {
  background: linear-gradient(96deg, #3FE0FF 0%, #4D7CFF 45%, #9D57FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rs-month-rule {
  display: block;
  width: 122px;
  height: 3px;
  border-radius: 3px;
  margin: 26px 0 0;
  background: linear-gradient(90deg, #3FE0FF 0%, #4D7CFF 100%);
}

.rs-month-lead {
  margin: 22px 0 0;
  max-width: 34ch;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.62;
  color: #A7AEC0;
}

/* ---------- metrics row ---------- */

.rs-month-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 38px;
}

.rs-month-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 10px 30px;
  border: 1px solid var(--rs-month-line);
  border-radius: 14px;
  background: linear-gradient(180deg, #0B1019 0%, #06090F 100%);
  text-align: center;
}

.rs-month-metric strong {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: clamp(44px, 4.6vw, 62px);
  line-height: .88;
  letter-spacing: -.01em;
}

.rs-month-metric > svg {
  width: 34px;
  height: 34px;
  margin-top: 16px;
}

.rs-month-metric-label {
  margin-top: 18px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.28;
  color: #FFFFFF;
}

.rs-month-metric-cyan strong,
.rs-month-metric-cyan > svg { color: var(--rs-month-cyan); }
.rs-month-metric-purple strong,
.rs-month-metric-purple > svg { color: var(--rs-month-purple); }
.rs-month-metric-teal strong,
.rs-month-metric-teal > svg { color: var(--rs-month-teal); }

.rs-month-metric-link {
  display: grid;
  place-items: center;
  width: 30px;
  color: var(--rs-month-blue);
}

.rs-month-metric-link-purple { color: #8A5CF0; }

.rs-month-metric-link svg {
  width: 22px;
  height: 22px;
}

/* ---------- divider + four steps ---------- */

.rs-month-divider {
  display: block;
  height: 1px;
  margin: 30px 0 26px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
}

.rs-month-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-month-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  text-align: center;
}

.rs-month-step + .rs-month-step {
  border-left: 1px solid var(--rs-month-line);
}

.rs-month-step svg {
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
}

.rs-month-step strong {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.32;
  color: #FFFFFF;
}

.rs-month-step span {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.32;
  color: #A7AEC0;
}

.rs-month-step-blue svg { color: var(--rs-month-blue); }
.rs-month-step-purple svg { color: #9D57FF; }
.rs-month-step-teal svg { color: var(--rs-month-teal); }
.rs-month-step-amber svg { color: var(--rs-month-amber); }

/* ---------- CTA ---------- */

.rs-month-cta {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  margin-top: 40px;
  text-decoration: none;
  border-radius: 14px;
}

.rs-month-cta-badge {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(157, 87, 255, .6);
  background: radial-gradient(120% 120% at 30% 25%, rgba(157, 87, 255, .22), rgba(10, 12, 20, .9) 70%);
  box-shadow: 0 0 26px -10px rgba(157, 87, 255, .8);
}

.rs-month-cta-badge svg {
  width: 26px;
  height: 26px;
}

.rs-month-cta-line {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 13px;
}

.rs-month-cta-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, #20C9C0 0%, #4D7CFF 55%, #9D57FF 100%);
}

.rs-month-cta-text {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.1;
  color: #FFFFFF;
}

.rs-month-cta-arrow {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--rs-month-cyan);
  transition: transform .22s ease;
}

.rs-month-cta:hover .rs-month-cta-arrow { transform: translateX(5px); }

/* ---------- right column: the plan panel ---------- */

.rs-month-panel {
  padding: 24px 24px 22px;
  border: 1px solid var(--rs-month-line);
  border-radius: 18px;
  background: linear-gradient(180deg, #0C121C 0%, #070B12 100%);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
}

.rs-month-panel-head {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 22px;
}

.rs-month-panel-badge {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 14px;
  border: 1px solid rgba(77, 124, 255, .32);
  background: rgba(77, 124, 255, .12);
  color: #6D8BFF;
}

.rs-month-panel-badge svg {
  width: 26px;
  height: 26px;
}

.rs-month-panel-heading { min-width: 0; }

.rs-month-panel-heading h3 {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 25px;
  line-height: 1;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.rs-month-panel-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 9px 0 0;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.rs-month-stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.rs-month-stat svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.rs-month-stat-green { color: #2FCB80; }
.rs-month-stat-amber { color: var(--rs-month-amber); }
.rs-month-stat-dot { color: #59627A; }

.rs-month-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  margin-left: auto;
  padding: 8px 9px 8px 17px;
  border: 1px solid rgba(47, 203, 128, .5);
  border-radius: 999px;
  background: rgba(47, 203, 128, .08);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  color: #3FD68C;
  white-space: nowrap;
}

.rs-month-pill-check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--rs-month-green);
  color: #FFFFFF;
}

.rs-month-pill-check svg {
  width: 12px;
  height: 12px;
}

/* ---------- calendar ---------- */

.rs-month-cal-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.rs-month-cal { min-width: 620px; }

.rs-month-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--rs-month-line);
  margin-bottom: 14px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  color: #95A7C2;
}

.rs-month-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.rs-month-day {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 9px;
  background: #0A1525;
  overflow: hidden;
}

.rs-month-day-art {
  position: relative;
  aspect-ratio: 100 / 76;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}

.rs-month-day-num {
  position: absolute;
  top: 4px;
  left: 7px;
  z-index: 2;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  line-height: 1;
  color: #161A24;
}

.rs-month-day-cap {
  position: absolute;
  left: 7px;
  top: 21px;
  right: 30px;
  z-index: 2;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  line-height: 1.24;
  color: #161A24;
}

.rs-month-day-motif {
  position: absolute;
  right: 2px;
  bottom: 0;
  width: 46px;
  height: 46px;
  color: rgba(20, 24, 34, .3);
}

/* thumbnail hues (stand-ins for the post artwork) */
.rs-month-th-lilac  { background: linear-gradient(150deg, #D3CDF7 0%, #B3AAEE 100%); }
.rs-month-th-ice    { background: linear-gradient(150deg, #E1EDF6 0%, #C1D6E7 100%); }
.rs-month-th-cream  { background: linear-gradient(150deg, #F2EAE0 0%, #DFD0C0 100%); }
.rs-month-th-peach  { background: linear-gradient(150deg, #F8E1D2 0%, #EDC2A9 100%); }
.rs-month-th-mint   { background: linear-gradient(150deg, #DAEFE8 0%, #B5DCD2 100%); }
.rs-month-th-slate  { background: linear-gradient(150deg, #D2DAE4 0%, #ADB9C8 100%); }
.rs-month-th-amber  { background: linear-gradient(150deg, #F6E4BD 0%, #E7CB8F 100%); }
.rs-month-th-sage   { background: linear-gradient(150deg, #DBDFCB 0%, #BEC5A8 100%); }
.rs-month-th-blush  { background: linear-gradient(150deg, #F8E4E6 0%, #EEC9CA 100%); }
.rs-month-th-pink   { background: linear-gradient(150deg, #F4C3E0 0%, #E9A2CE 100%); }
.rs-month-th-rose   { background: linear-gradient(150deg, #E9A9AE 0%, #C4636F 100%); }
.rs-month-th-aqua   { background: linear-gradient(150deg, #CFEAF0 0%, #A9D6E2 100%); }
.rs-month-th-green  { background: linear-gradient(150deg, #C4D8B7 0%, #9BBB8E 100%); }
.rs-month-th-white  { background: linear-gradient(150deg, #F4F5F7 0%, #DDE1E7 100%); }

.rs-month-th-magenta { background: linear-gradient(150deg, #E27FC6 0%, #C955A9 100%); }
.rs-month-th-indigo  { background: linear-gradient(150deg, #4E56AE 0%, #333A82 100%); }
.rs-month-th-dark    { background: linear-gradient(150deg, #2B3242 0%, #141924 100%); }

.rs-month-th-magenta .rs-month-day-num,
.rs-month-th-magenta .rs-month-day-cap,
.rs-month-th-indigo .rs-month-day-num,
.rs-month-th-indigo .rs-month-day-cap,
.rs-month-th-dark .rs-month-day-num,
.rs-month-th-dark .rs-month-day-cap { color: #FFFFFF; }

.rs-month-th-magenta .rs-month-day-motif,
.rs-month-th-indigo .rs-month-day-motif,
.rs-month-th-dark .rs-month-day-motif { color: rgba(255, 255, 255, .3); }

.rs-month-th-magenta .rs-month-day-cap { font-size: 20px; letter-spacing: -.01em; }
.rs-month-th-slate .rs-month-day-cap { font-size: 15px; }

.rs-month-day-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 6px 6px 6px 8px;
}

.rs-month-day-cat {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  line-height: 1.1;
  color: #C2CAD9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-month-day-flag {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: 50%;
  color: #FFFFFF;
}

.rs-month-day-flag svg {
  width: 11px;
  height: 11px;
}

.rs-month-day-ok { background: var(--rs-month-green); }
.rs-month-day-rev { background: var(--rs-month-amber); }

/* placeholder days */
.rs-month-day-empty {
  display: block;
  position: relative;
  padding: 6px 8px;
  background: #060F1C;
  border-color: rgba(255, 255, 255, .05);
}

.rs-month-day-empty .rs-month-day-num {
  position: absolute;
  top: 7px;
  left: 8px;
  color: #4C566C;
}

.rs-month-day-todo {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.35;
  color: #5C6779;
}

.rs-month-day-wait {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: block;
  width: 17px;
  height: 17px;
  color: #5C6779;
}

.rs-month-day-wait svg {
  width: 100%;
  height: 100%;
}

/* ---------- legend ---------- */

.rs-month-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin-top: 22px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 13.5px;
  color: #C7CEDC;
}

.rs-month-legend span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.rs-month-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.rs-month-dot-green { background: #2FCB80; }
.rs-month-dot-amber { background: var(--rs-month-amber); }
.rs-month-dot-blue { background: var(--rs-month-blue); }

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .rs-month-grid { gap: 40px; }
  .rs-month-metric { padding: 20px 8px 22px; }
  .rs-month-metric-label { font-size: 15.5px; margin-top: 14px; }
  .rs-month-step strong,
  .rs-month-step span { font-size: 13px; }
  .rs-month-cta-text { font-size: 19px; }
}

@media (max-width: 1000px) {
  .rs-month { padding: 76px 0; }
  .rs-month-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .rs-month-lead { max-width: 52ch; }
  .rs-month-metrics { max-width: 620px; }
  .rs-month-steps { max-width: 620px; }
  .rs-month-panel { padding: 20px 18px 18px; }
}

@media (max-width: 640px) {
  .rs-month-shell { width: calc(100% - 32px); }
  .rs-month-metric strong { font-size: 40px; }
  .rs-month-metric > svg { width: 26px; height: 26px; }
  .rs-month-metric-label { font-size: 14px; }
  .rs-month-metric-link { width: 20px; }
  .rs-month-metric-link svg { width: 16px; height: 16px; }
  .rs-month-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
  .rs-month-step:nth-child(3) { border-left: 0; }
  .rs-month-cta { gap: 16px; }
  .rs-month-cta-text { font-size: 17px; }
  .rs-month-panel-head { flex-wrap: wrap; }
  .rs-month-pill { margin-left: 0; order: 3; width: 100%; justify-content: center; }
  .rs-month-legend { gap: 10px 20px; font-size: 12.5px; }
}

/* ---------- phone (≤700px) ----------
   Three problems solved here:
   1. the day tiles clipped their own captions (fixed art aspect-ratio +
      overflow:hidden), so the art box now grows with its text;
   2. every micro-label sat below the 11px floor;
   3. the metrics row was resolving to five ~85px tracks. */

@media (max-width: 700px) {

  /* --- metrics: three real tracks, connector arrows dropped --- */
  .rs-month-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 30px;
    max-width: none;
  }
  .rs-month-metric-link { display: none; }
  .rs-month-metric { padding: 18px 6px 20px; border-radius: 12px; }
  .rs-month-metric strong { font-size: 44px; }
  .rs-month-metric > svg { width: 24px; height: 24px; margin-top: 12px; }
  .rs-month-metric-label { margin-top: 12px; font-size: 13px; line-height: 1.3; }

  .rs-month-divider { margin: 26px 0 22px; }
  .rs-month-step strong,
  .rs-month-step span { font-size: 14px; }
  .rs-month-step svg { width: 26px; height: 26px; margin-bottom: 10px; }

  /* --- panel --- */
  .rs-month-panel { padding: 18px 16px 16px; }
  .rs-month-panel-head { gap: 12px; margin-bottom: 18px; }
  .rs-month-panel-badge { width: 44px; height: 44px; border-radius: 12px; }
  .rs-month-panel-badge svg { width: 22px; height: 22px; }
  .rs-month-panel-heading h3 { font-size: 23px; }
  .rs-month-panel-stats { font-size: 11.5px; letter-spacing: .07em; }

  /* --- calendar: legible first, then let it scroll (§3.2) ---
     Bleeds to the panel's inner edges so the cut-off column makes the
     horizontal scroll obvious. */
  .rs-month-cal-scroll {
    margin-inline: -16px;
    padding-inline: 16px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .rs-month-cal { min-width: 800px; }
  /* The per-tile sr-only labels are position:absolute against .rs-month, so
     they escaped the scroller's clip and dragged the whole page's scrollWidth
     out to the calendar's width. Contain them in their own flag. */
  .rs-month-day-flag { position: relative; }
  .rs-month-week,
  .rs-month-days { gap: 8px; }
  .rs-month-week {
    font-size: 11px;
    letter-spacing: .1em;
    padding-bottom: 11px;
    margin-bottom: 12px;
  }

  /* 35 tiles at a legible size is an absurdly long scroll, so the
     trailing "Planning in progress" placeholder row is dropped —
     the 30 planned days still read as the same component. */
  .rs-month-day-empty { display: none; }

  /* --- the clipping fix (§3.4) ---
     The art box was a fixed 100/76 ratio with overflow:hidden, and the
     caption was absolutely positioned inside it, so anything longer than
     two short lines was cut mid-line. On mobile the number and caption
     flow normally and the box grows to hold them. */
  .rs-month-day-art {
    aspect-ratio: auto;
    min-height: 84px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 26px 10px 8px;
  }
  .rs-month-day-num,
  .rs-month-day-cap { position: static; }
  .rs-month-day-num { font-size: 11.5px; }
  .rs-month-day-cap { font-size: 11.5px; line-height: 1.2; }
  .rs-month-th-magenta .rs-month-day-cap { font-size: 19px; }
  .rs-month-th-slate .rs-month-day-cap { font-size: 14px; }
  .rs-month-day-motif { width: 30px; height: 30px; right: 3px; bottom: 3px; }

  .rs-month-day-foot { padding: 7px 6px 7px 8px; }
  .rs-month-day-cat { font-size: 11.5px; }

  .rs-month-legend { gap: 10px 18px; margin-top: 18px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-month-cta-arrow { transition: none; }
}


/* ====================================================================
   11-publish
   ==================================================================== */
/* ==========================================================================
   11 — From idea to Instagram  (.rs-publish)
   ========================================================================== */

.rs-publish {
  padding: 96px 0;
  background: transparent;
  position: relative;
}

.rs-publish-shell {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}

.rs-publish-grid {
  display: grid;
  grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
  gap: 64px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   LEFT — connected-account panel
   -------------------------------------------------------------------------- */

.rs-publish-panel {
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px;
  background: linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
  box-shadow: 0 28px 70px -40px rgba(0, 0, 0, .9);
  padding: 24px 22px 22px;
}

.rs-publish-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
}

.rs-publish-ig-tile {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #FEDA75 0%, #FA7E1E 22%, #F0526A 42%, #D62976 62%, #962FBF 82%, #4F5BD5 100%);
  box-shadow: 0 8px 22px -10px rgba(214, 41, 118, .8);
}

.rs-publish-ig-tile svg {
  width: 22px;
  height: 22px;
}

.rs-publish-connected {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-right: 4px;
}

.rs-publish-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #35D08A;
  box-shadow: 0 0 0 3px rgba(53, 208, 138, .16);
}

.rs-publish-active {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #35D08A;
}

.rs-publish-panel-body {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* ---- status timeline ---- */

.rs-publish-timeline {
  list-style: none;
  margin: 0;
  padding: 4px 0 0;
}

.rs-publish-step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding-bottom: 30px;
}

.rs-publish-step:last-child {
  padding-bottom: 0;
}

.rs-publish-step::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 50px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
}

.rs-publish-step:last-child::before {
  display: none;
}

.rs-publish-step--created::before {
  background: linear-gradient(180deg, rgba(157, 87, 255, .75), rgba(77, 124, 255, .55));
}

.rs-publish-step--captioned::before {
  background: linear-gradient(180deg, rgba(77, 124, 255, .55), rgba(53, 208, 138, .55));
}

.rs-publish-step--approved::before {
  background: repeating-linear-gradient(180deg, rgba(167, 174, 192, .55) 0 6px, transparent 6px 12px);
}

.rs-publish-step--scheduled::before {
  background: repeating-linear-gradient(180deg, rgba(77, 155, 255, .9) 0 6px, transparent 6px 12px);
}

.rs-publish-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  position: relative;
  z-index: 1;
}

.rs-publish-badge svg {
  width: 22px;
  height: 22px;
}

.rs-publish-step--created .rs-publish-badge {
  background: linear-gradient(160deg, #8E5CF7 0%, #6B34D8 100%);
  box-shadow: 0 0 0 1px rgba(157, 87, 255, .5), 0 0 26px -8px rgba(157, 87, 255, .85);
}

.rs-publish-step--captioned .rs-publish-badge {
  background: linear-gradient(160deg, #2E6BF0 0%, #1B44B8 100%);
  box-shadow: 0 0 0 1px rgba(77, 124, 255, .5), 0 0 26px -8px rgba(77, 124, 255, .8);
}

.rs-publish-step--captioned .rs-publish-badge svg {
  width: 24px;
  height: 24px;
}

.rs-publish-step--approved .rs-publish-badge {
  background: linear-gradient(160deg, #1E8A63 0%, #10593F 100%);
  box-shadow: 0 0 0 1px rgba(53, 208, 138, .42), 0 0 26px -10px rgba(53, 208, 138, .7);
}

.rs-publish-step--scheduled .rs-publish-badge {
  background: linear-gradient(160deg, #21519F 0%, #14336E 100%);
  box-shadow: 0 0 0 1px rgba(77, 155, 255, .55), 0 0 28px -8px rgba(77, 155, 255, .9);
}

.rs-publish-badge--ig {
  background: linear-gradient(150deg, #FEDA75 0%, #FA7E1E 24%, #F0526A 46%, #D62976 66%, #962FBF 86%, #4F5BD5 100%);
  box-shadow: 0 0 0 1px rgba(251, 110, 216, .45), 0 0 28px -8px rgba(214, 41, 118, .9);
}

.rs-publish-step-text {
  display: block;
  padding-top: 3px;
}

.rs-publish-step-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: #FFFFFF;
}

.rs-publish-step-label--now {
  color: #4D9BFF;
}

.rs-publish-tick {
  width: 16px;
  height: 16px;
  flex: none;
}

.rs-publish-step-sub {
  display: block;
  margin-top: 6px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  color: #8E96A9;
}

/* ---- Instagram post mock-up ---- */

.rs-publish-mock {
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  background: #0B0E15;
  overflow: hidden;
}

.rs-publish-mock-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #FFFFFF;
}

.rs-publish-mock-avatar {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #E7F0FC;
  color: #1E5FBF;
}

.rs-publish-mock-avatar svg {
  width: 17px;
  height: 17px;
}

.rs-publish-mock-name {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #10233F;
  letter-spacing: -.01em;
}

.rs-publish-mock-more {
  margin-left: auto;
  width: 20px;
  height: 4px;
  background:
    radial-gradient(circle, #6B7686 55%, transparent 56%) 0 50% / 4px 4px no-repeat,
    radial-gradient(circle, #6B7686 55%, transparent 56%) 50% 50% / 4px 4px no-repeat,
    radial-gradient(circle, #6B7686 55%, transparent 56%) 100% 50% / 4px 4px no-repeat;
}

.rs-publish-creative {
  position: relative;
  aspect-ratio: 7 / 6;
  overflow: hidden;
  padding: 16px 14px;
  background: linear-gradient(135deg, #F3F8FD 0%, #E2EDF9 52%, #D3E3F6 100%);
  box-shadow: inset 0 0 0 1px rgba(30, 95, 191, .09);
}

.rs-publish-creative-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 60%;
}

.rs-publish-creative-title {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: #113A6E;
}

.rs-publish-creative-kicker {
  display: block;
  margin-top: 12px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.34;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #3C71B8;
}

.rs-publish-creative-off {
  display: block;
  margin-top: 3px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -.02em;
  color: #1B5FBF;
}

.rs-publish-creative-tag {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  color: #17457F;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.36;
}

.rs-publish-creative-tag svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.rs-publish-creative-figure {
  position: absolute;
  right: -6px;
  bottom: 14px;
  width: 44%;
  height: auto;
  z-index: 1;
}

.rs-publish-creative-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 44px;
  z-index: 1;
}

.rs-publish-mock-caption {
  padding: 14px;
}

.rs-publish-mock-caption p {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  color: #E4E8F1;
}

.rs-publish-mock-tags {
  margin-top: 10px !important;
  color: #4D9BFF !important;
}

.rs-publish-mock-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.rs-publish-mock-cell {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 9px;
  align-items: start;
  padding: 13px 12px;
  color: #4D9BFF;
}

.rs-publish-mock-cell + .rs-publish-mock-cell {
  border-left: 1px solid rgba(255, 255, 255, .08);
}

.rs-publish-mock-cell > svg,
.rs-publish-mock-cell-ig svg {
  width: 19px;
  height: 19px;
  grid-row: span 2;
  margin-top: 1px;
}

.rs-publish-mock-cell-ig {
  grid-row: span 2;
  display: block;
  margin-top: 1px;
  color: #D62976;
}

.rs-publish-mock-cell-label {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.2;
  color: #98A0B2;
}

.rs-publish-mock-cell-value {
  margin-top: 5px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.42;
  color: #E4E8F1;
}

/* ---- footer strip ---- */

.rs-publish-allset {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 0;
  padding: 15px 18px;
  border: 1px solid rgba(53, 208, 138, .3);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(53, 208, 138, .09), rgba(53, 208, 138, .025));
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: #E4E8F1;
}

.rs-publish-allset svg {
  width: 26px;
  height: 26px;
  flex: none;
  color: #35D08A;
}

/* --------------------------------------------------------------------------
   RIGHT — copy column
   -------------------------------------------------------------------------- */

.rs-publish-copy {
  min-width: 0;
}

.rs-publish-kicker {
  margin: 0 0 18px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #4D7CFF;
}

.rs-publish-title {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: .96;
  letter-spacing: -.005em;
  color: #FFFFFF;
}

.rs-publish-grad {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.rs-publish-grad--a {
  background-image: linear-gradient(96deg, #4D7CFF 0%, #7B6BFF 60%, #9D57FF 100%);
}

.rs-publish-grad--b {
  background-image: linear-gradient(96deg, #3FE0FF 0%, #4D7CFF 42%, #9D57FF 100%);
}

.rs-publish-rule {
  display: block;
  width: 116px;
  height: 4px;
  margin: 22px 0 24px;
  border-radius: 3px;
  background: linear-gradient(96deg, #3FE0FF, #4D7CFF 45%, #9D57FF);
}

.rs-publish-lead {
  margin: 0;
  max-width: 640px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.58;
  color: #A7AEC0;
}

/* ---- the four "no" items ---- */

.rs-publish-nos {
  list-style: none;
  margin: 38px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rs-publish-nos li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4px 12px;
}

.rs-publish-nos li + li {
  border-left: 1px solid rgba(255, 255, 255, .08);
}

.rs-publish-no-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(77, 124, 255, .05);
  color: #4D9BFF;
  margin-bottom: 16px;
}

.rs-publish-no-icon svg {
  width: 27px;
  height: 27px;
}

.rs-publish-nos h3 {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: #FFFFFF;
}

.rs-publish-no-sub {
  display: block;
  margin-top: 7px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: #A7AEC0;
}

/* ---- automation-control panel ---- */

.rs-publish-control {
  position: relative;
  margin-top: 40px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 26px 28px;
  border: 1px solid rgba(53, 208, 138, .4);
  border-radius: 14px;
  background:
    linear-gradient(115deg, rgba(53, 208, 138, .13) 0%, rgba(53, 208, 138, .03) 34%, rgba(53, 208, 138, 0) 62%),
    #0C0F16;
  box-shadow: 0 0 34px -20px rgba(53, 208, 138, .6);
}

.rs-publish-shield {
  display: block;
  color: #35D08A;
}

.rs-publish-shield svg {
  width: 78px;
  height: 78px;
}

.rs-publish-control-copy h3 {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.28;
  letter-spacing: -.015em;
  color: #FFFFFF;
}

.rs-publish-control-copy p {
  margin: 8px 0 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.5;
  color: #A7AEC0;
}

.rs-publish-mini {
  position: relative;
  width: 132px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: #10131C;
}

.rs-publish-mini-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rs-publish-mini-chip {
  width: 24px;
  height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, .07);
  color: rgba(231, 236, 246, .55);
}

.rs-publish-mini-chip svg {
  width: 15px;
  height: 15px;
}

.rs-publish-mini-row--ok .rs-publish-mini-chip {
  background: #22C67F;
  color: #06210F;
}

.rs-publish-mini-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.rs-publish-mini-bars i {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .1);
}

.rs-publish-mini-bars i:last-child {
  width: 62%;
  background: rgba(255, 255, 255, .06);
}

.rs-publish-mascot {
  position: absolute;
  right: -22px;
  bottom: -10px;
  width: 90px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .55));
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1160px) {
  .rs-publish-grid {
    gap: 44px;
  }

  .rs-publish-step-label {
    font-size: 17px;
  }
}

@media (max-width: 1000px) {
  .rs-publish {
    padding: 80px 0;
  }

  .rs-publish-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .rs-publish-panel {
    max-width: 720px;
  }

  .rs-publish-lead {
    max-width: none;
  }
}

@media (max-width: 780px) {
  .rs-publish-nos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }

  .rs-publish-nos li + li {
    border-left: 0;
  }

  .rs-publish-nos li:nth-child(2n) {
    border-left: 1px solid rgba(255, 255, 255, .08);
  }

  .rs-publish-control {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 20px;
  }

  .rs-publish-mini {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .rs-publish-panel-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .rs-publish-mock {
    max-width: 380px;
  }

  .rs-publish-shell {
    width: calc(100% - 32px);
  }

  .rs-publish-panel {
    padding: 20px 16px 18px;
  }
}

@media (max-width: 480px) {
  .rs-publish-control {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px 20px;
  }

  .rs-publish-mini {
    grid-column: 1;
  }

  .rs-publish-allset {
    font-size: 15px;
  }
}

/* ---------- phone pass (≤700) ---------- */

@media (max-width: 700px) {
  /* Keep the four "no" items as a 2×2 block: one per row turned a compact
     reassurance strip into four screens of scrolling. */
  .rs-publish-nos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 30px;
    row-gap: 28px;
  }

  .rs-publish-nos li {
    padding: 4px 8px;
  }

  .rs-publish-nos li + li {
    border-left: 0;
  }

  .rs-publish-nos li:nth-child(2n) {
    border-left: 1px solid rgba(255, 255, 255, .08);
  }

  .rs-publish-no-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 13px;
  }

  .rs-publish-nos h3 {
    font-size: 16px;
  }

  .rs-publish-no-sub {
    font-size: 14px;
  }

  /* The creative figure bleeds 6px past the tile it is clipped by; on a phone
     that 6px is the whole tile's horizontal overflow. Tuck it back in. */
  .rs-publish-creative-figure {
    right: 0;
  }

  /* The two micro-labels inside the post mock sat exactly on the 11px floor. */
  .rs-publish-creative-kicker,
  .rs-publish-creative-tag {
    font-size: 12px;
  }

  /* The mini mock UI hung its mascot 22px outside its own box. Anchor the
     mascot to the green panel instead, so it sits beside the mini card
     rather than overflowing it. */
  .rs-publish-mini {
    position: static;
  }

  .rs-publish-mascot {
    right: 14px;
    bottom: 12px;
    width: 82px;
  }
}


/* ====================================================================
   12-how
   ==================================================================== */
/* ============ 12 · HOW IT WORKS ============ */

.rs-how {
  padding: 96px 0;
  background: transparent;
  position: relative;
  overflow-x: clip;
}

.rs-how-shell {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}

/* ---------- heading ---------- */

.rs-how-head {
  text-align: center;
  max-width: 1000px;
  margin: 0 auto 62px;
}

.rs-how-kicker {
  margin: 0 0 16px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #4D9CFF;
  background: linear-gradient(96deg, #3FE0FF 0%, #4D7CFF 70%, #6E7BFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rs-how-title {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.005em;
  font-size: clamp(38px, 4.4vw, 62px);
  color: #FFFFFF;
  text-wrap: balance;
}

.rs-how-word {
  position: relative;
  display: inline-block;
}

.rs-how-word-grad {
  background: linear-gradient(96deg, #3FE0FF 0%, #4D7CFF 42%, #9D57FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rs-how-swoosh {
  position: absolute;
  left: 0;
  bottom: -.11em;
  width: 100%;
  height: .12em;
  min-height: 5px;
  overflow: visible;
  pointer-events: none;
}

.rs-how-sub {
  margin: 18px auto 0;
  max-width: 720px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.62;
  color: #A7AEC0;
}

/* ---------- the panel ---------- */

.rs-how-panel {
  position: relative;
  margin-top: 40px;
  padding: 58px 0 0;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .09);
  background:
    radial-gradient(130% 62% at 50% 0%, rgba(77, 124, 255, .10) 0%, rgba(77, 124, 255, 0) 62%),
    linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
}

/* ---------- step rail on the top border ---------- */

.rs-how-rail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 3;
  pointer-events: none;
}

.rs-how-line {
  position: absolute;
  top: 0;
  left: 12.5%;
  width: 75%;
  height: 2px;
  transform: translateY(-1px);
  border-radius: 2px;
  background: linear-gradient(90deg, #3FE0FF 0%, #4D7CFF 42%, #6E63FF 68%, #9D57FF 100%);
}

.rs-how-chev {
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.6px solid currentColor;
  background: #0A0C12;
  z-index: 2;
}

.rs-how-chev svg {
  width: 14px;
  height: 14px;
  color: inherit;
}

.rs-how-chev-a {
  left: 25%;
  color: #45A8FF;
  box-shadow: 0 0 16px -4px rgba(69, 168, 255, .75);
}

.rs-how-chev-b {
  left: 50%;
  color: #5D74FF;
  box-shadow: 0 0 16px -4px rgba(93, 116, 255, .75);
}

.rs-how-chev-c {
  left: 75%;
  color: #8B62FF;
  box-shadow: 0 0 16px -4px rgba(139, 98, 255, .75);
}

.rs-how-badge {
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: radial-gradient(circle at 50% 38%, #12172A 0%, #090B12 100%);
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: .02em;
  z-index: 4;
}

.rs-how-badge-1 {
  left: 12.5%;
  color: #3FE0FF;
  box-shadow: 0 0 26px -4px rgba(63, 224, 255, .7), inset 0 0 16px rgba(63, 224, 255, .16);
}

.rs-how-badge-2 {
  left: 37.5%;
  color: #4D7CFF;
  box-shadow: 0 0 26px -4px rgba(77, 124, 255, .7), inset 0 0 16px rgba(77, 124, 255, .16);
}

.rs-how-badge-3 {
  left: 62.5%;
  color: #6E63FF;
  box-shadow: 0 0 26px -4px rgba(110, 99, 255, .7), inset 0 0 16px rgba(110, 99, 255, .16);
}

.rs-how-badge-4 {
  left: 87.5%;
  color: #9D57FF;
  box-shadow: 0 0 26px -4px rgba(157, 87, 255, .7), inset 0 0 16px rgba(157, 87, 255, .16);
}

/* ---------- the four columns ---------- */

.rs-how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rs-how-step {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px 24px 32px;
}

.rs-how-step + .rs-how-step {
  border-left: 1px solid rgba(255, 255, 255, .07);
}

.rs-how-s1 { --rs-how-a: #3FE0FF; }
.rs-how-s2 { --rs-how-a: #4D7CFF; }
.rs-how-s3 { --rs-how-a: #6E63FF; }
.rs-how-s4 { --rs-how-a: #9D57FF; }

/* per-column numbered marker — only shown once the rail collapses */
.rs-how-marker {
  display: none;
  width: 42px;
  height: 42px;
  place-items: center;
  margin: 0 0 16px;
  border-radius: 50%;
  border: 2px solid var(--rs-how-a, #4D7CFF);
  background: radial-gradient(circle at 50% 38%, #12172A 0%, #090B12 100%);
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 15px;
  color: var(--rs-how-a, #4D7CFF);
  box-shadow: 0 0 22px -6px var(--rs-how-a, #4D7CFF);
}

/* ---------- shared mock-UI card ---------- */

.rs-how-mock {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 15px 14px 16px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(180deg, #10131C 0%, #0B0D14 100%);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .9);
}

.rs-how-mock p {
  margin: 0;
}

.rs-how-mock-title {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.3;
  color: #FFFFFF;
}

.rs-how-mock-sub {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.3;
  color: #E4E8F1;
}

.rs-how-mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.rs-how-mock-head-tight {
  margin-top: 14px;
  align-items: baseline;
}

.rs-how-rule {
  display: block;
  width: 100%;
  height: 1px;
  margin: 13px 0;
  background: rgba(255, 255, 255, .09);
}

.rs-how-meta {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 10.5px;
  color: #767E92;
  white-space: nowrap;
}

/* ---------- step 01 · brand profile ---------- */

.rs-how-brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.rs-how-logo {
  flex: none;
  width: 88px;
  height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
}

.rs-how-leaf {
  width: 24px;
  height: 24px;
}

.rs-how-logo-name {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .18em;
  color: #26301F;
}

.rs-how-logo-sub {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 6px;
  letter-spacing: .24em;
  color: #6C7563;
}

.rs-how-fields {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.rs-how-field {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.rs-how-field span {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 10.5px;
  line-height: 1.35;
  color: #767E92;
}

.rs-how-field b {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.35;
  color: #E4E8F1;
}

.rs-how-assets {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  min-width: 0;
}

.rs-how-sw {
  flex: 1 1 0;
  min-width: 0;
  height: 36px;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.rs-how-sw-1 { background: linear-gradient(160deg, #8FA96A 0%, #718C50 100%); }
.rs-how-sw-2 { background: linear-gradient(160deg, #B7CE8A 0%, #9DB86E 100%); }
.rs-how-sw-3 { background: linear-gradient(160deg, #F0E7D2 0%, #DCD1B6 100%); }
.rs-how-sw-4 { background: linear-gradient(160deg, #2C313B 0%, #1B1F27 100%); }

.rs-how-font {
  flex: 1.5 1 0;
  min-width: 0;
  height: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
}

.rs-how-font b {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  color: #FFFFFF;
}

.rs-how-font em {
  font-style: normal;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 9px;
  line-height: 1;
  color: #8A92A6;
}

/* ---------- step 02 · content plan calendar ---------- */

.rs-how-month {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 4px 9px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 11px;
  white-space: nowrap;
  color: #E4E8F1;
}

.rs-how-month i {
  font-style: normal;
  font-size: 13px;
  line-height: 1;
  color: #767E92;
}

.rs-how-cal {
  margin-top: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.rs-how-dow {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 215px;
  margin-bottom: 7px;
}

.rs-how-dow span {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: .08em;
  text-align: center;
  color: #767E92;
}

.rs-how-days {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  min-width: 215px;
}

.rs-how-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 46px;
  padding: 5px 3px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .028);
  text-align: center;
  overflow: hidden;
}

.rs-how-day b {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  line-height: 1;
  color: #FFFFFF;
}

.rs-how-day i {
  font-style: normal;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 8px;
  line-height: 1.24;
  color: #9AA2B5;
  overflow-wrap: anywhere;
}

.rs-how-day-off {
  border-color: rgba(255, 255, 255, .05);
  background: transparent;
}

.rs-how-day-dim b {
  color: #767E92;
}

.rs-how-ideas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: center;
  margin-top: 13px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(53, 208, 138, .3);
  background: rgba(53, 208, 138, .1);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  white-space: nowrap;
  color: #47DB9B;
}

.rs-how-ideas svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* ---------- step 03 · post preview ---------- */

.rs-how-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.rs-how-pill svg {
  width: 12px;
  height: 12px;
  flex: none;
}

.rs-how-pill-green {
  border: 1px solid rgba(53, 208, 138, .32);
  background: rgba(53, 208, 138, .13);
  color: #47DB9B;
}

.rs-how-pill-sm {
  padding: 4px 8px;
  font-size: 10px;
}

.rs-how-creative {
  position: relative;
  margin-top: 12px;
  padding: 12px 13px;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 12% 8%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(155deg, #EAE4D5 0%, #DED7C4 52%, #CDC5B0 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}

.rs-how-creative-mark {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  gap: 1px;
}

.rs-how-creative-mark svg {
  width: 15px;
  height: 15px;
}

.rs-how-creative-mark b {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 7px;
  letter-spacing: .18em;
  color: #2C3626;
}

.rs-how-creative-mark i {
  font-style: normal;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 5px;
  letter-spacing: .22em;
  color: #6C7563;
}

.rs-how-creative-head {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  max-width: 62%;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: clamp(15px, 1.75vw, 23px);
  line-height: .98;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: #23303F;
}

.rs-how-creative-art {
  position: absolute;
  right: 4px;
  bottom: 0;
  width: 46%;
  height: auto;
  z-index: 1;
}

.rs-how-tags {
  margin-top: 11px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 9.5px;
  line-height: 1.4;
  color: #8A92A6;
  overflow-wrap: anywhere;
}

.rs-how-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
}

.rs-how-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 6px;
  border-radius: 8px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.rs-how-btn svg {
  width: 13px;
  height: 13px;
  flex: none;
}

.rs-how-btn-ghost {
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .03);
  color: #E4E8F1;
}

.rs-how-btn-green {
  border: 1px solid rgba(53, 208, 138, .5);
  background: linear-gradient(96deg, #2FBE7C 0%, #35D08A 100%);
  color: #06170F;
  box-shadow: 0 8px 22px -10px rgba(53, 208, 138, .8);
}

/* ---------- step 04 · scheduled to publish ---------- */

.rs-how-platforms {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.rs-how-plat {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.rs-how-plat svg {
  width: 18px;
  height: 18px;
}

.rs-how-plat-ig {
  background:
    radial-gradient(120% 120% at 28% 108%, #FDD75E 0%, #F77737 24%, #E1306C 52%, #C13584 72%, #833AB4 92%);
}

.rs-how-plat-fb {
  background: #1877F2;
}

.rs-how-plat-li {
  background: #0A66C2;
}

.rs-how-plat-add {
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: #A7AEC0;
}

.rs-how-sched {
  display: flex;
  align-items: stretch;
  gap: 11px;
  margin-top: 13px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .028);
  min-width: 0;
}

.rs-how-thumb {
  position: relative;
  flex: none;
  width: 40%;
  max-width: 118px;
  aspect-ratio: 4 / 3;
  padding: 7px 8px;
  border-radius: 7px;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 12% 8%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(155deg, #EAE4D5 0%, #DED7C4 52%, #CDC5B0 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}

.rs-how-thumb-mark {
  position: relative;
  z-index: 2;
  display: block;
}

.rs-how-thumb-mark svg {
  width: 11px;
  height: 11px;
}

.rs-how-thumb-head {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 4px;
  max-width: 66%;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 10px;
  line-height: .98;
  text-transform: uppercase;
  color: #23303F;
}

.rs-how-thumb-art {
  position: absolute;
  right: 2px;
  bottom: 0;
  width: 44%;
  height: auto;
  z-index: 1;
}

.rs-how-sched-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.rs-how-sched-meta b {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.35;
  color: #E4E8F1;
}

.rs-how-sched-meta b + b {
  font-weight: 400;
  color: #A7AEC0;
}

.rs-how-sched-meta .rs-how-pill {
  margin-top: 4px;
}

.rs-how-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.rs-how-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  text-align: center;
}

.rs-how-stat b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: #FFFFFF;
}

.rs-how-stat i {
  font-style: normal;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 10px;
  color: #767E92;
}

.rs-how-stat-ico {
  width: 15px;
  height: 15px;
  flex: none;
}

.rs-how-stat-blue { color: #4D7CFF; }
.rs-how-stat-green { color: #35D08A; }
.rs-how-stat-orange { color: #FFB45E; }

/* ---------- per-column copy ---------- */

.rs-how-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  margin-top: 26px;
}

.rs-how-ico {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
}

.rs-how-ico svg {
  width: 32px;
  height: 32px;
}

.rs-how-ico-blue { color: #4D7CFF; }
.rs-how-ico-purple { color: #9D57FF; }

.rs-how-copy h3 {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(16.5px, 1.45vw, 20px);
  line-height: 1.22;
  letter-spacing: -.005em;
  color: #FFFFFF;
}

.rs-how-copy p {
  grid-column: 1 / -1;
  margin: 12px 0 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.58;
  color: #A7AEC0;
}

/* Columns of unequal copy length would otherwise leave the icon+title rows
   sitting at different heights. Subgrid pins every mock to one shared row and
   every copy block to the next, so the titles line up across the rail — as they
   do in the reference. The flex rules above stay as the fallback for engines
   without subgrid. Above 1100px the marker is display:none and so is not a grid
   item, which is why the row count changes with the breakpoint below. */
@supports (grid-template-rows: subgrid) {
  .rs-how-steps {
    grid-template-rows: auto auto;
  }

  .rs-how-step {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }
}

/* ---------- bottom strip ---------- */

.rs-how-strip {
  display: grid;
  grid-template-columns: minmax(0, 3.1fr) minmax(0, 4fr);
  align-items: stretch;
  margin-top: 34px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .09);
  background:
    radial-gradient(70% 130% at 12% 100%, rgba(77, 124, 255, .12) 0%, rgba(77, 124, 255, 0) 62%),
    linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
  overflow: hidden;
}

.rs-how-strip-lead {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  min-width: 0;
  padding: 20px 26px 0;
}

.rs-how-mascot {
  width: 108px;
  height: auto;
  flex: none;
  align-self: flex-end;
  margin-bottom: -2px;
  pointer-events: none;
}

.rs-how-strip-title {
  margin: 0 0 22px;
  min-width: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 1.75vw, 25px);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: #FFFFFF;
}

.rs-how-strip-title span {
  display: block;
  background: linear-gradient(96deg, #3FE0FF 0%, #4D7CFF 70%, #7C7BFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rs-how-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-left: 1px solid rgba(255, 255, 255, .07);
}

.rs-how-benefits li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-width: 0;
  padding: 26px 12px;
  text-align: center;
}

.rs-how-benefits li + li {
  border-left: 1px solid rgba(255, 255, 255, .07);
}

.rs-how-bico {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
}

.rs-how-bico svg {
  width: 32px;
  height: 32px;
}

.rs-how-bico-blue { color: #4D7CFF; }
.rs-how-bico-purple { color: #9D57FF; }
.rs-how-bico-green { color: #35D08A; }

.rs-how-btext {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  color: #E4E8F1;
}

.rs-how-btext i {
  display: block;
  font-style: normal;
}

/* ---------- responsive ---------- */

@media (max-width: 1240px) {
  .rs-how-badge {
    width: 54px;
    height: 54px;
    font-size: 18px;
  }

  .rs-how-panel {
    padding-top: 50px;
  }

  .rs-how-step {
    padding: 22px 18px 28px;
  }
}

@media (max-width: 1100px) {
  .rs-how-rail {
    display: none;
  }

  .rs-how-panel {
    margin-top: 0;
    padding-top: 0;
  }

  .rs-how-marker {
    display: inline-grid;
  }

  .rs-how-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* the marker is now a third grid item, so each step spans one more row */
  @supports (grid-template-rows: subgrid) {
    .rs-how-steps {
      grid-template-rows: auto auto auto;
    }

    .rs-how-step {
      grid-row: span 3;
    }
  }

  .rs-how-step {
    padding: 30px 26px 34px;
  }

  .rs-how-step + .rs-how-step {
    border-left: 0;
  }

  .rs-how-step:nth-child(even) {
    border-left: 1px solid rgba(255, 255, 255, .07);
  }

  .rs-how-step:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, .07);
  }

  .rs-how-mock {
    flex: 0 0 auto;
  }

  .rs-how-copy {
    margin-top: 24px;
  }

  .rs-how-creative-head {
    font-size: clamp(18px, 2.6vw, 26px);
  }

  .rs-how-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .rs-how-strip-lead {
    padding: 22px 26px 0;
  }

  .rs-how-benefits {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
  }
}

@media (max-width: 860px) {
  .rs-how-day i {
    font-size: 8.5px;
  }
}

@media (max-width: 700px) {
  .rs-how {
    padding: 76px 0;
  }

  .rs-how-shell {
    width: calc(100% - 32px);
  }

  .rs-how-head {
    margin-bottom: 44px;
  }

  .rs-how-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  /* one column now, so the side gutter can shrink and give the mock its width back */
  .rs-how-step {
    padding: 24px 16px 30px;
  }

  .rs-how-step:nth-child(even) {
    border-left: 0;
  }

  .rs-how-step + .rs-how-step {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
  }

  .rs-how-mock {
    max-width: 460px;
  }

  .rs-how-creative-head {
    font-size: 24px;
  }

  .rs-how-copy p {
    font-size: 15.5px;
  }

  .rs-how-strip-lead {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 26px 22px 0;
  }

  .rs-how-mascot {
    align-self: center;
    width: 96px;
    margin-bottom: 0;
  }

  .rs-how-strip-title {
    margin-bottom: 24px;
  }

  .rs-how-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rs-how-benefits li {
    padding: 22px 10px;
  }

  .rs-how-benefits li + li {
    border-left: 0;
  }

  .rs-how-benefits li:nth-child(even) {
    border-left: 1px solid rgba(255, 255, 255, .07);
  }

  .rs-how-benefits li:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, .07);
  }
}

@media (max-width: 420px) {
  .rs-how-brand-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .rs-how-fields {
    width: 100%;
  }

  .rs-how-sched {
    flex-direction: column;
  }

  .rs-how-thumb {
    width: 100%;
    max-width: none;
  }
}

/* ---------- phone · the mock UIs get a legible type scale ----------
   The four steps are one column below 700px, so each mock card now has the
   full width of the panel instead of a quarter of it. Everything inside was
   sized for a 280px desktop column and had been squeezed to 5–8px; below it
   is set back to a readable scale. Nothing here applies above 700px. */

@media (max-width: 700px) {
  .rs-how-title {
    font-size: clamp(34px, 9.6vw, 44px);
  }

  .rs-how-sub {
    font-size: 15.5px;
  }

  /* the rail is gone below 1100px; this is the step number in its place */
  .rs-how-marker {
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    font-size: 16px;
  }

  .rs-how-mock {
    max-width: none;
    padding: 16px 14px 17px;
  }

  .rs-how-mock-title {
    font-size: 15px;
  }

  .rs-how-mock-sub {
    font-size: 13px;
  }

  .rs-how-meta {
    font-size: 11.5px;
  }

  .rs-how-pill {
    font-size: 12px;
  }

  /* 01 · brand profile */

  .rs-how-logo {
    width: 96px;
    height: 96px;
  }

  .rs-how-leaf {
    width: 26px;
    height: 26px;
  }

  .rs-how-logo-name {
    font-size: 12.5px;
    letter-spacing: .16em;
  }

  .rs-how-logo-sub {
    font-size: 11.5px;
    letter-spacing: .1em;
  }

  .rs-how-field span {
    font-size: 12px;
  }

  .rs-how-field b {
    font-size: 14px;
  }

  .rs-how-sw,
  .rs-how-font {
    height: 42px;
  }

  .rs-how-font b {
    font-size: 14px;
  }

  .rs-how-font em {
    font-size: 11.5px;
  }

  /* 02 · content plan — the month grid is the worst offender: five columns
     inside a quarter-width card put its topic labels at 8.5px. Rather than
     scroll it (a scroller inside a card hides a third of the month with no
     visible affordance), it drops to three columns and takes the full inner
     width of the card, which is exactly what an 11px "Transformation" needs.
     All fifteen tiles stay on screen and nothing scrolls sideways. */

  .rs-how-month {
    font-size: 12px;
  }

  .rs-how-month i {
    font-size: 14px;
  }

  .rs-how-cal {
    margin-inline: -14px;
    padding-inline: 4px;
  }

  .rs-how-dow {
    min-width: 0;
    margin-bottom: 9px;
  }

  .rs-how-dow span {
    font-size: 11.5px;
    letter-spacing: .04em;
  }

  .rs-how-days {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    gap: 6px;
  }

  .rs-how-day {
    min-height: 58px;
    padding: 7px 3px;
    gap: 3px;
  }

  .rs-how-day b {
    font-size: 13px;
  }

  .rs-how-day i {
    font-size: 11.5px;
    line-height: 1.22;
    hyphens: auto;
  }

  .rs-how-ideas {
    font-size: 12px;
    padding: 7px 15px;
  }

  /* 03 · post preview */

  .rs-how-creative {
    padding: 14px 15px;
  }

  .rs-how-creative-mark svg {
    width: 20px;
    height: 20px;
  }

  /* the lockup keeps its two-line shape; both lines are held at the 11px
     floor and their tracking is retuned so they stay the same width */
  .rs-how-creative-mark b {
    font-size: 12px;
    letter-spacing: .15em;
  }

  .rs-how-creative-mark i {
    font-size: 11.5px;
    letter-spacing: .03em;
  }

  .rs-how-tags {
    font-size: 11.5px;
  }

  .rs-how-btn {
    font-size: 13px;
    padding: 10px 6px;
  }

  .rs-how-btn svg {
    width: 14px;
    height: 14px;
  }

  /* 04 · scheduled to publish */

  .rs-how-sched {
    flex-direction: row;
    padding: 11px;
    gap: 12px;
  }

  .rs-how-thumb {
    width: 46%;
    max-width: none;
    padding: 8px 9px;
  }

  .rs-how-thumb-mark svg {
    width: 14px;
    height: 14px;
  }

  .rs-how-thumb-head {
    margin-top: 5px;
    max-width: 74%;
    font-size: 11.5px;
  }

  .rs-how-sched-meta b {
    font-size: 13px;
  }

  .rs-how-pill-sm {
    font-size: 11.5px;
    padding: 5px 9px;
  }

  .rs-how-stats {
    gap: 8px;
  }

  .rs-how-stat b {
    font-size: 16px;
  }

  .rs-how-stat i {
    font-size: 11.5px;
  }

  .rs-how-stat-ico {
    width: 16px;
    height: 16px;
  }
}


/* ====================================================================
   13-industries
   ==================================================================== */
/* ==========================================================================
   Section 13 — "Made for real businesses"  (.rs-industries)
   ========================================================================== */

.rs-industries {
  padding: 96px 0;
  background: transparent;
  position: relative;
  --rs-ind-blue: #4D7CFF;
  --rs-ind-cyan: #3FE0FF;
  --rs-ind-purple: #9D57FF;
  --rs-ind-green: #35D08A;
  --rs-ind-amber: #FFB45E;
  --rs-ind-pink: #FB6ED8;
  --rs-ind-line: rgba(255, 255, 255, .085);
  --rs-ind-line-2: rgba(255, 255, 255, .14);
}

.rs-industries-shell {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}

.rs-industries-grid {
  display: grid;
  grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
  gap: 54px;
  align-items: start;
}

/* --------------------------------------------------------------------------
   Left column — kicker, headline, rule, lead, note card
   -------------------------------------------------------------------------- */

.rs-industries-left {
  min-width: 0;
  padding-top: 12px;
}

.rs-industries-kicker {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rs-ind-blue);
}

.rs-industries-title {
  margin: 22px 0 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: .96;
  letter-spacing: -.005em;
  color: #FFFFFF;
}

.rs-industries-grad {
  background: linear-gradient(96deg, #3FE0FF 0%, #4D7CFF 45%, #9D57FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rs-industries-rule {
  display: block;
  width: 118px;
  height: 3px;
  margin: 28px 0 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #3FE0FF 0%, #4D7CFF 55%, #9D57FF 100%);
}

.rs-industries-lead {
  margin: 24px 0 0;
  max-width: 36ch;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.62;
  color: #A7AEC0;
}

.rs-industries-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 34px;
  padding: 20px 22px 22px;
  border: 1px solid var(--rs-ind-line);
  border-radius: 16px;
  background: linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
  box-shadow: 0 24px 60px -44px rgba(0, 0, 0, .9);
}

.rs-industries-note-badge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(157, 87, 255, .32);
  background: radial-gradient(120% 120% at 30% 25%, rgba(157, 87, 255, .24), rgba(12, 14, 21, .9) 72%);
  color: #B78BFF;
}

.rs-industries-note-badge svg {
  width: 22px;
  height: 22px;
}

.rs-industries-note-body {
  min-width: 0;
}

.rs-industries-note-body h3 {
  margin: 2px 0 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.25;
  color: #FFFFFF;
}

.rs-industries-note-body p {
  margin: 9px 0 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.55;
  color: #A7AEC0;
}

/* --------------------------------------------------------------------------
   Right column — the industry browser mockup
   -------------------------------------------------------------------------- */

.rs-industries-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- tab cards ---------- */

.rs-industries-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.rs-industries-tab {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
  padding: 15px 18px;
  border: 1px solid var(--rs-ind-line);
  border-radius: 14px;
  background: linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
}

.rs-industries-tab-active {
  border-color: rgba(77, 124, 255, .55);
  background: linear-gradient(180deg, rgba(24, 39, 84, .78) 0%, rgba(12, 18, 38, .9) 100%);
  box-shadow: 0 0 0 1px rgba(77, 124, 255, .25), 0 0 40px -12px rgba(77, 124, 255, .5);
}

.rs-industries-tab-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
}

.rs-industries-tab-icon svg {
  width: 23px;
  height: 23px;
}

.rs-industries-i-blue {
  border: 1px solid rgba(77, 124, 255, .5);
  background: rgba(77, 124, 255, .14);
  color: #7BA3FF;
}

.rs-industries-i-pink {
  border: 1px solid rgba(219, 62, 152, .45);
  background: linear-gradient(150deg, #D93E96 0%, #A32570 100%);
  color: #FFFFFF;
}

.rs-industries-i-orange {
  border: 1px solid rgba(240, 122, 38, .45);
  background: linear-gradient(150deg, #F58A2E 0%, #D9620F 100%);
  color: #FFFFFF;
}

.rs-industries-tab-body {
  min-width: 0;
}

.rs-industries-tab-body h3 {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: #FFFFFF;
}

.rs-industries-tab-body p {
  margin: 6px 0 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.3;
  color: #A7AEC0;
}

.rs-industries-tab-body p span {
  margin: 0 3px;
  color: #6E7690;
}

.rs-industries-tab-active .rs-industries-tab-body p {
  color: #86A6FF;
}

.rs-industries-tab-active .rs-industries-tab-body p span {
  color: rgba(134, 166, 255, .6);
}

/* ---------- the big plan panel ---------- */

.rs-industries-plan {
  padding: 22px 22px 24px;
  border: 1px solid var(--rs-ind-line);
  border-radius: 18px;
  background: linear-gradient(180deg, #0E111A 0%, #080A10 100%);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
}

.rs-industries-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-bottom: 22px;
}

.rs-industries-plan-title {
  min-width: 0;
}

.rs-industries-plan-tag {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6D8BFF;
}

.rs-industries-plan-title strong {
  display: block;
  margin-top: 10px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.1;
  letter-spacing: -.012em;
  color: #FFFFFF;
}

.rs-industries-plan-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.rs-industries-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.rs-industries-stat svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.rs-industries-stat b {
  font-size: 15px;
  font-weight: 700;
}

.rs-industries-stat-ok { color: #2FCB80; }
.rs-industries-stat-wait { color: var(--rs-ind-amber); }

.rs-industries-stat-sep {
  display: block;
  width: 1px;
  height: 16px;
  flex: none;
  background: rgba(255, 255, 255, .18);
}

/* ---------- calendar ---------- */

.rs-industries-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.rs-industries-cal {
  min-width: 700px;
}

.rs-industries-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  color: #95A7C2;
}

.rs-industries-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.rs-industries-day {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 7px 7px 7px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  background: #0A0D15;
}

.rs-industries-day-num {
  display: block;
  margin: 0 0 7px 2px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1;
  color: #C9D2E2;
}

/* ---------- thumbnails (shared by calendar days and mini panels) ---------- */

.rs-industries-thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  aspect-ratio: 100 / 74;
  padding: 8px 7px;
  overflow: hidden;
  border-radius: 8px;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
}

.rs-industries-thumb svg {
  width: 34px;
  height: 34px;
  flex: none;
}

.rs-industries-thumb b {
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.16;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.rs-industries-thumb i {
  display: block;
  margin-top: 4px;
  font-family: "Inter", system-ui, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.16;
}

/* photo stand-ins — light, abstract, hue-matched to the reference */
.rs-industries-t-blue  { background: linear-gradient(150deg, #E8F3FD 0%, #BFD8F1 100%); color: #4E7FB5; }
.rs-industries-t-grey  { background: linear-gradient(150deg, #EEF0F3 0%, #C9D0D8 100%); color: #6C7480; }
.rs-industries-t-cyan  { background: linear-gradient(150deg, #DDF3FA 0%, #AEDCEE 100%); color: #3B87A4; }
.rs-industries-t-warm  { background: linear-gradient(150deg, #F7E4D3 0%, #E2BC9E 100%); color: #9B6B4A; }
.rs-industries-t-mint  { background: linear-gradient(150deg, #E0F2EB 0%, #B5DBCF 100%); color: #3F8F76; }
.rs-industries-t-pink  { background: linear-gradient(150deg, #FBDDE9 0%, #F0B4CC 100%); color: #B85D86; }
.rs-industries-t-cream { background: linear-gradient(150deg, #F6EFE4 0%, #E0D2BE 100%); color: #8C7657; }
.rs-industries-t-beige { background: linear-gradient(150deg, #F0E7DB 0%, #D5C5B1 100%); color: #8A7458; }
.rs-industries-t-steel { background: linear-gradient(150deg, #4381CC 0%, #1F4C8C 100%); color: #EAF2FF; }
.rs-industries-t-brown { background: linear-gradient(150deg, #7C5541 0%, #422A1E 100%); color: #F0DCCE; }

/* promo / offer tiles */
.rs-industries-p-blue {
  background: linear-gradient(150deg, #2E73E4 0%, #1740A8 100%);
  color: #FFFFFF;
}

.rs-industries-p-blue i {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.rs-industries-p-rose {
  background: linear-gradient(150deg, #FCE6F0 0%, #F5C8DE 100%);
  color: #D0417F;
}

.rs-industries-p-rose b { font-size: 11px; }

.rs-industries-p-rose i {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
}

.rs-industries-p-rose svg {
  width: 26px;
  height: 26px;
  margin-top: 4px;
  color: rgba(208, 65, 127, .75);
}

.rs-industries-p-pink {
  background: linear-gradient(150deg, #F79AC9 0%, #E76BAD 100%);
  color: #FFFFFF;
}

.rs-industries-p-pink b { font-size: 11px; }

.rs-industries-p-amber {
  background: linear-gradient(150deg, #8E5C22 0%, #3A2410 100%);
  color: #FFFFFF;
}

.rs-industries-p-red {
  background: linear-gradient(150deg, #B8481F 0%, #6B2210 100%);
  color: #FFFFFF;
}

/* ---------- day footer: caption + status glyph ---------- */

.rs-industries-day-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 5px;
  margin-top: auto;
  padding-top: 8px;
}

.rs-industries-day-cap {
  min-width: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  line-height: 1.28;
  color: #C2CAD9;
}

.rs-industries-glyph {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
}

.rs-industries-glyph svg {
  width: 16px;
  height: 16px;
}

.rs-industries-ok { color: var(--rs-ind-green); }
.rs-industries-wait { color: var(--rs-ind-amber); }

/* the two promo days carry no caption — push the glyph right, let art fill */
.rs-industries-day-promo .rs-industries-thumb {
  aspect-ratio: 100 / 100;
}

.rs-industries-day-promo .rs-industries-day-foot {
  justify-content: flex-end;
}

/* ---------- salon + restaurant strips ---------- */

.rs-industries-strips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.rs-industries-mini-panel {
  min-width: 0;
  padding: 16px 18px 18px;
  border: 1px solid var(--rs-ind-line);
  border-radius: 18px;
  background: linear-gradient(180deg, #0E111A 0%, #080A10 100%);
  box-shadow: 0 30px 70px -46px rgba(0, 0, 0, .9);
}

.rs-industries-mini-tag {
  display: block;
  margin-bottom: 14px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.rs-industries-tag-pink { color: var(--rs-ind-pink); }
.rs-industries-tag-amber { color: var(--rs-ind-amber); }

.rs-industries-mini-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: center;
  gap: 10px;
}

.rs-industries-mini {
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-self: stretch;
}

.rs-industries-mini .rs-industries-thumb {
  aspect-ratio: 100 / 88;
}

.rs-industries-mini-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 5px;
  margin-top: auto;
  padding-top: 8px;
}

.rs-industries-mini-cap {
  min-width: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  line-height: 1.28;
  color: #C2CAD9;
}

.rs-industries-more {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .02);
}

.rs-industries-more svg {
  width: 18px;
  height: 18px;
}

.rs-industries-more-pink {
  border: 1px solid rgba(251, 110, 216, .55);
  color: var(--rs-ind-pink);
  box-shadow: 0 0 26px -14px rgba(251, 110, 216, .9);
}

.rs-industries-more-amber {
  border: 1px solid rgba(255, 180, 94, .55);
  color: var(--rs-ind-amber);
  box-shadow: 0 0 26px -14px rgba(255, 180, 94, .9);
}

/* --------------------------------------------------------------------------
   "Also built for:" chip row
   -------------------------------------------------------------------------- */

.rs-industries-also {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

.rs-industries-also-label {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #A7AEC0;
}

.rs-industries-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .028);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.1;
  color: #E4E8F1;
  white-space: nowrap;
}

.rs-industries-chip svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.rs-industries-chip:nth-child(2) svg { color: var(--rs-ind-green); }
.rs-industries-chip:nth-child(3) svg { color: var(--rs-ind-amber); }
.rs-industries-chip:nth-child(4) svg { color: #56A6FF; }

.rs-industries-chip-plain {
  color: #A7AEC0;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Bottom band
   -------------------------------------------------------------------------- */

.rs-industries-band {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 24px;
  margin-top: 26px;
  padding: 20px 28px;
  border: 1px solid rgba(77, 124, 255, .26);
  border-radius: 18px;
  background: linear-gradient(96deg, rgba(24, 34, 78, .72) 0%, rgba(18, 22, 46, .62) 55%, rgba(28, 20, 58, .66) 100%);
  box-shadow: 0 0 0 1px rgba(77, 124, 255, .1), 0 30px 70px -50px rgba(77, 124, 255, .6);
}

.rs-industries-band-badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 13px;
  border: 1px solid rgba(157, 87, 255, .34);
  background: rgba(157, 87, 255, .14);
  color: #B78BFF;
}

.rs-industries-band-badge svg {
  width: 24px;
  height: 24px;
}

.rs-industries-band-line {
  margin: 0;
  min-width: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(17px, 1.75vw, 25px);
  line-height: 1.22;
  letter-spacing: -.015em;
}

.rs-industries-band-a { color: #4D8BFF; }
.rs-industries-band-b { color: #7C7BFF; }

.rs-industries-band-c {
  background: linear-gradient(96deg, #9D57FF 0%, #FB6ED8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rs-industries-band-tail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: auto;
  text-align: right;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.4;
  color: #C2CAD9;
}

.rs-industries-band-tail span {
  display: block;
}

.rs-industries-band-tail-accent {
  background: linear-gradient(96deg, #6D8BFF 0%, #9D57FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .rs-industries-grid { gap: 40px; }
  .rs-industries-tab { gap: 12px; padding: 13px 14px; }
  .rs-industries-tab-icon { width: 38px; height: 38px; }
  .rs-industries-tab-icon svg { width: 20px; height: 20px; }
  .rs-industries-tab-body h3 { font-size: 16.5px; }
  .rs-industries-tab-body p { font-size: 12.5px; }
  .rs-industries-band-tail { font-size: 13.5px; }
}

@media (max-width: 1000px) {
  .rs-industries { padding: 76px 0; }
  .rs-industries-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .rs-industries-left { padding-top: 0; }
  .rs-industries-lead { max-width: 54ch; }
  .rs-industries-note { max-width: 560px; }
  .rs-industries-strips { grid-template-columns: minmax(0, 1fr); }
  .rs-industries-band-tail { margin-left: 0; text-align: left; width: 100%; }
}

@media (max-width: 760px) {
  .rs-industries-tabs { grid-template-columns: minmax(0, 1fr); }
  .rs-industries-plan { padding: 18px 16px 20px; }
  .rs-industries-plan-head { margin-bottom: 18px; }
  .rs-industries-mini-panel { padding: 14px 14px 16px; }
  .rs-industries-band { padding: 18px 20px; }
}

@media (max-width: 640px) {
  .rs-industries-shell { width: calc(100% - 32px); }
  .rs-industries-note { padding: 16px 16px 18px; gap: 13px; }
  .rs-industries-also { gap: 10px; margin-top: 32px; }
  .rs-industries-chip { padding: 9px 14px; font-size: 13.5px; }
  .rs-industries-band-badge { width: 40px; height: 40px; }
  .rs-industries-band-badge svg { width: 21px; height: 21px; }
}

@media (max-width: 560px) {
  .rs-industries-mini-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-industries-more { grid-column: 1 / -1; justify-self: end; }
}

/* --------------------------------------------------------------------------
   Phone pass (≤700px)
   The industry browser is an intrinsically wide artifact. Rather than
   squeezing seven calendar columns into ~300px, the calendar keeps a legible
   column width and scrolls sideways, bled out to the panel edges and snapped
   per day tile so the gesture is discoverable.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {

  /* ---------- left column ---------- */

  .rs-industries-grid { gap: 34px; }
  .rs-industries-kicker { font-size: 12px; letter-spacing: .14em; }
  .rs-industries-title { margin-top: 18px; }
  .rs-industries-rule { width: 96px; margin-top: 22px; }
  .rs-industries-lead {
    margin-top: 18px;
    max-width: none;
    font-size: 16px;
    line-height: 1.6;
  }
  .rs-industries-note { margin-top: 26px; }
  .rs-industries-note-badge { width: 40px; height: 40px; }
  .rs-industries-note-badge svg { width: 20px; height: 20px; }
  .rs-industries-note-body h3 { font-size: 16px; }
  .rs-industries-note-body p { font-size: 14px; }

  /* ---------- tab cards: stacked full-width rows, not squashed ---------- */

  .rs-industries-right { gap: 14px; }

  .rs-industries-tabs { gap: 10px; }

  .rs-industries-tab {
    gap: 13px;
    padding: 12px 14px;
    min-height: 64px;
  }

  .rs-industries-tab-icon { width: 40px; height: 40px; }
  .rs-industries-tab-icon svg { width: 21px; height: 21px; }
  .rs-industries-tab-body h3 { font-size: 16px; }
  .rs-industries-tab-body p { font-size: 13px; line-height: 1.35; }

  /* ---------- plan panel head ---------- */

  .rs-industries-plan { padding: 16px 14px 18px; }
  .rs-industries-plan-head { gap: 10px 16px; margin-bottom: 16px; }
  .rs-industries-plan-tag { font-size: 11px; letter-spacing: .14em; }
  .rs-industries-plan-title strong { margin-top: 8px; font-size: 21px; }
  .rs-industries-plan-stats {
    width: 100%;
    margin-top: 0;
    gap: 12px;
    font-size: 11.5px;
    letter-spacing: .08em;
  }
  .rs-industries-stat svg { width: 14px; height: 14px; }
  .rs-industries-stat b { font-size: 14px; }

  /* ---------- calendar: horizontal scroller, bled to the panel edges ------- */

  .rs-industries-scroll {
    margin-inline: -14px;
    padding-inline: 14px;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 14px;
    overscroll-behavior-x: contain;
    /* the run of tiles fades out into the panel edge instead of stopping
       dead, so it reads as "more to the right" and not as a clipped card */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%);
  }

  /* a legible width, not a fitting one: 7 columns of ~101px */
  .rs-industries-cal { min-width: 756px; }

  .rs-industries-week,
  .rs-industries-days { gap: 8px; }

  .rs-industries-week {
    margin-bottom: 10px;
    font-size: 11px;
    letter-spacing: .12em;
  }

  .rs-industries-day {
    padding: 7px 6px;
    scroll-snap-align: start;
  }

  .rs-industries-day-num { font-size: 12px; margin-bottom: 6px; }

  .rs-industries-day-foot { gap: 4px; padding-top: 7px; }

  .rs-industries-day-cap {
    font-size: 11px;
    line-height: 1.3;
  }

  .rs-industries-glyph,
  .rs-industries-glyph svg { width: 15px; height: 15px; }

  /* the square promo tile is the tightest box in the calendar — trim the
     illustration so its two label lines are never cut */
  .rs-industries-p-rose svg {
    width: 20px;
    height: 20px;
    margin-top: 2px;
  }

  /* ---------- salon + restaurant panels: stacked, 2×2 tiles ---------- */

  .rs-industries-strips { gap: 14px; }
  .rs-industries-mini-panel { padding: 14px 14px 16px; }
  .rs-industries-mini-tag { margin-bottom: 12px; font-size: 11px; letter-spacing: .14em; }
  .rs-industries-mini-row { gap: 12px 10px; align-items: stretch; }
  .rs-industries-mini-foot { gap: 4px; padding-top: 7px; }

  .rs-industries-mini-cap {
    font-size: 11px;
    line-height: 1.3;
  }

  .rs-industries-more { width: 34px; height: 34px; }

  /* ---------- "Also built for:" — label on its own line, chips wrap ------- */

  .rs-industries-also {
    gap: 10px;
    margin-top: 30px;
  }

  .rs-industries-also-label {
    width: 100%;
    font-size: 14px;
  }

  .rs-industries-chip {
    padding: 9px 14px;
    font-size: 13.5px;
  }

  .rs-industries-chip svg { width: 16px; height: 16px; }

  /* ---------- bottom band ---------- */

  .rs-industries-band {
    gap: 14px 14px;
    margin-top: 22px;
    padding: 16px 16px 18px;
    border-radius: 16px;
  }

  .rs-industries-band-badge {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  .rs-industries-band-badge svg { width: 20px; height: 20px; }

  .rs-industries-band-line {
    font-size: 18px;
    line-height: 1.3;
  }

  /* one coloured sentence per line rather than a compressed run-on */
  .rs-industries-band-line span { display: block; }

  .rs-industries-band-tail {
    gap: 2px;
    font-size: 13.5px;
    line-height: 1.45;
  }
}


/* ====================================================================
   14-pricing
   ==================================================================== */
/* ============ 14 · PRICING ============ */

.rs-pricing {
  padding: 96px 0;
  background: transparent;
  position: relative;
}

.rs-pricing-shell {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}

/* ---- heading ---- */

.rs-pricing-head {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 52px;
}

.rs-pricing-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #3FE0FF;
}

.rs-pricing-spark {
  width: 15px;
  height: 15px;
  flex: none;
  color: #4D7CFF;
}

.rs-pricing-title {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.005em;
  font-size: clamp(38px, 4.4vw, 62px);
  color: #FFFFFF;
}

.rs-pricing-title em {
  font-style: normal;
  background: linear-gradient(96deg, #3FE0FF 0%, #4D7CFF 45%, #9D57FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rs-pricing-sub {
  margin: 16px auto 0;
  max-width: 720px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.62;
  color: #A7AEC0;
}

/* ---- cards ---- */

.rs-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
  padding: 30px 0;
}

.rs-pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
}

.rs-pricing-card--pro {
  margin: -30px 0;
  padding: 34px 30px;
  border: 1px solid transparent;
  background-image:
    linear-gradient(180deg, #0F1120 0%, #0A0C14 100%),
    linear-gradient(150deg, #9D57FF 0%, #6C6BFF 50%, #4D7CFF 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 46px -14px rgba(157, 87, 255, .55), 0 0 0 1px rgba(157, 87, 255, .16);
}

.rs-pricing-popular {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 7px 18px;
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #FFFFFF;
  background: linear-gradient(96deg, #3B82F6, #8B5CF6);
  box-shadow: 0 10px 30px rgba(93, 95, 239, .35);
}

.rs-pricing-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
}

.rs-pricing-name {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #3FE0FF;
}

.rs-pricing-tag {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(77, 124, 255, .38);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  white-space: nowrap;
  color: #7FA0FF;
  background: rgba(77, 124, 255, .08);
}

.rs-pricing-tag--cyan {
  border-color: rgba(63, 224, 255, .34);
  color: #6FD9F2;
  background: rgba(63, 224, 255, .07);
}

.rs-pricing-price {
  margin: 14px 0 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 56px;
  line-height: .96;
  letter-spacing: -.01em;
  color: #FFFFFF;
}

.rs-pricing-billing {
  margin: 10px 0 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  color: #767E92;
}

.rs-pricing-rule {
  width: 100%;
  height: 1px;
  margin: 20px 0 0;
  border: 0;
  background: rgba(255, 255, 255, .09);
}

.rs-pricing-desc {
  margin: 20px 0 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: #A7AEC0;
}

.rs-pricing-features {
  list-style: none;
  margin: 22px 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rs-pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.4;
  color: #FFFFFF;
}

.rs-pricing-features li svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  color: #4D7CFF;
}

.rs-pricing-card--ultimate .rs-pricing-features li svg {
  color: #3FE0FF;
}

/* ---- CTAs ---- */

.rs-pricing-cta {
  margin-top: auto;
  display: block;
  padding: 15px 20px;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.rs-pricing-cta:hover {
  transform: translateY(-1px);
}

.rs-pricing-cta--outline-blue {
  border: 1px solid rgba(77, 124, 255, .55);
  background: rgba(9, 12, 20, .7);
  color: #6D93FF;
}

.rs-pricing-cta--outline-blue:hover {
  background: rgba(77, 124, 255, .12);
}

.rs-pricing-cta--outline-cyan {
  border: 1px solid rgba(63, 224, 255, .5);
  background: rgba(9, 12, 20, .7);
  color: #3FE0FF;
}

.rs-pricing-cta--outline-cyan:hover {
  background: rgba(63, 224, 255, .1);
}

.rs-pricing-cta--gradient {
  border: 1px solid transparent;
  color: #FFFFFF;
  background: linear-gradient(96deg, #3B82F6, #8B5CF6);
  box-shadow: 0 12px 34px -8px rgba(139, 92, 246, .6);
}

.rs-pricing-note {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 13.5px;
  color: #767E92;
}

/* ---- assurance strip ---- */

.rs-pricing-assure {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
  overflow: hidden;
}

.rs-pricing-assure-cell {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 26px;
}

.rs-pricing-assure-cell + .rs-pricing-assure-cell {
  border-left: 1px solid rgba(255, 255, 255, .07);
}

.rs-pricing-assure-icon {
  width: 34px;
  height: 34px;
  flex: none;
}

.rs-pricing-assure-icon--blue { color: #4D7CFF; }
.rs-pricing-assure-icon--purple { color: #9D57FF; }
.rs-pricing-assure-icon--teal { color: #3FE0FF; }

.rs-pricing-assure-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.rs-pricing-assure-text strong {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #FFFFFF;
}

.rs-pricing-assure-text span {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.4;
  color: #A7AEC0;
}

/* ---- mascot footnote ---- */

.rs-pricing-footnote {
  margin: 26px auto 0;
  width: min(1000px, 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.rs-pricing-mascot {
  width: 110px;
  height: auto;
  flex: none;
  margin-right: -34px;
  margin-bottom: -6px;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.rs-pricing-footnote-panel {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 30px 22px 52px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
}

.rs-pricing-footnote-icon {
  width: 34px;
  height: 34px;
  flex: none;
  color: #9D57FF;
}

.rs-pricing-footnote-text {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rs-pricing-footnote-text strong {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  color: #FFFFFF;
}

.rs-pricing-footnote-text span {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.5;
  color: #A7AEC0;
}

/* ---- responsive ---- */

@media (max-width: 1180px) {
  .rs-pricing-assure {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rs-pricing-assure-cell:nth-child(odd) {
    border-left: 0;
  }

  .rs-pricing-assure-cell:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, .07);
  }
}

@media (max-width: 1000px) {
  .rs-pricing-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    padding: 0;
    max-width: 560px;
    margin-inline: auto;
  }

  .rs-pricing-card--pro {
    margin: 0;
    padding: 30px;
  }

  .rs-pricing-card--pro .rs-pricing-plan {
    padding-right: 130px;
  }

  .rs-pricing-popular {
    left: auto;
    right: 22px;
    top: 0;
    transform: translateY(-50%);
  }
}

@media (max-width: 760px) {
  .rs-pricing {
    padding: 72px 0;
  }

  .rs-pricing-shell {
    width: calc(100% - 32px);
  }

  .rs-pricing-assure {
    grid-template-columns: minmax(0, 1fr);
  }

  .rs-pricing-assure-cell {
    border-left: 0;
    padding: 20px 22px;
  }

  .rs-pricing-assure-cell + .rs-pricing-assure-cell {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
  }

  .rs-pricing-footnote {
    flex-direction: column;
    align-items: center;
  }

  .rs-pricing-mascot {
    margin: 0 0 -18px;
  }

  .rs-pricing-footnote-panel {
    width: 100%;
    flex-direction: column;
    text-align: center;
    padding: 34px 24px 24px;
    gap: 12px;
  }

  .rs-pricing-footnote-text {
    align-items: center;
  }

  .rs-pricing-price {
    font-size: 48px;
  }
}

/* The plan row is `name | tag` on one line. At the narrowest phone widths the
   Ultimate card's "For teams & agencies" pill (155px, `white-space: nowrap`)
   no longer fits beside the plan name and pushes past the card's border.
   Let the row wrap so the pill drops onto its own line instead. */
@media (max-width: 380px) {
  .rs-pricing-plan {
    flex-wrap: wrap;
    gap: 8px;
  }

  .rs-pricing-tag {
    font-size: 12px;
    padding: 5px 10px;
    white-space: normal;
  }
}


/* ====================================================================
   15-faq
   ==================================================================== */
/* ============================================================
   15 — FAQ  (.rs-faq)
   ============================================================ */

.rs-faq {
  padding: 96px 0;
  background: transparent;
  position: relative;
}

.rs-faq-shell {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
  gap: 72px;
  align-items: start;
}

/* ---------- left rail ---------- */

.rs-faq-kicker {
  margin: 0 0 18px;
  color: #4D7CFF;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.rs-faq-title {
  margin: 0;
  color: #FFFFFF;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: .96;
  letter-spacing: -.005em;
}

.rs-faq-grad {
  background: linear-gradient(96deg, #9D57FF 0%, #C061F0 55%, #FB6ED8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rs-faq-rule {
  display: block;
  width: 148px;
  height: 3px;
  margin: 24px 0 22px;
  border-radius: 999px;
  background: linear-gradient(96deg, #3FE0FF 0%, #4D7CFF 48%, #9D57FF 100%);
}

.rs-faq-lede {
  max-width: 400px;
  margin: 0 0 30px;
  color: #A7AEC0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.62;
}

/* ---------- reassurance panel ---------- */

.rs-faq-points {
  margin: 0 0 20px;
  padding: 6px 0;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
}

.rs-faq-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
}

.rs-faq-point + .rs-faq-point {
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.rs-faq-tile {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

.rs-faq-tile svg {
  width: 21px;
  height: 21px;
}

.rs-faq-tile-purple { background: linear-gradient(140deg, #A855F7 0%, #E0409F 100%); }
.rs-faq-tile-blue   { background: linear-gradient(140deg, #4D7CFF 0%, #1E40AF 100%); }
.rs-faq-tile-teal   { background: linear-gradient(140deg, #2DD4BF 0%, #0E7060 100%); }
.rs-faq-tile-orange { background: linear-gradient(140deg, #FFB45E 0%, #E4620E 100%); }
.rs-faq-tile-violet { background: linear-gradient(140deg, #9D57FF 0%, #5B21B6 100%); }

.rs-faq-point-text {
  display: block;
  min-width: 0;
}

.rs-faq-point-title {
  margin: 1px 0 3px;
  color: #FFFFFF;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
}

.rs-faq-point-copy {
  max-width: 280px;
  margin: 0;
  color: #A7AEC0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- still need help ---------- */

.rs-faq-help {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px 14px 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
}

.rs-faq-help-mascot {
  flex: 0 0 auto;
  width: 86px;
  height: auto;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .45));
}

.rs-faq-help-text {
  min-width: 0;
}

.rs-faq-help-title {
  margin: 0 0 4px;
  color: #FFFFFF;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
}

.rs-faq-help-copy {
  margin: 0 0 8px;
  color: #A7AEC0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
}

.rs-faq-help-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #4D7CFF;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

.rs-faq-help-link span {
  transition: transform .18s ease;
}

.rs-faq-help-link:hover {
  color: #7CA0FF;
}

.rs-faq-help-link:hover span {
  transform: translateX(3px);
}

/* ---------- accordion ---------- */

.rs-faq-items {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.rs-faq-item {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.rs-faq-item:hover {
  border-color: rgba(255, 255, 255, .16);
}

.rs-faq summary {
  list-style: none;
}

.rs-faq summary::-webkit-details-marker {
  display: none;
}

.rs-faq-q {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
}

.rs-faq-badge {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(77, 124, 255, .55);
  border-radius: 999px;
  color: #4D7CFF;
  background: rgba(77, 124, 255, .07);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.rs-faq-badge svg {
  width: 17px;
  height: 17px;
}

.rs-faq-qt {
  min-width: 0;
  color: #FFFFFF;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
}

.rs-faq-a {
  margin: 0;
  padding: 0 26px 22px 72px;
  color: #A7AEC0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
}

/* open state */

.rs-faq-item[open] {
  border-color: rgba(77, 124, 255, .55);
  background: linear-gradient(180deg, rgba(77, 124, 255, .09) 0%, rgba(77, 124, 255, .02) 100%), linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
  box-shadow: 0 0 0 1px rgba(77, 124, 255, .22), 0 0 44px -12px rgba(77, 124, 255, .55);
}

.rs-faq-item[open] .rs-faq-badge {
  border-color: transparent;
  background: #3B6FF5;
  color: #FFFFFF;
}

.rs-faq-item[open] .rs-faq-badge-v {
  display: none;
}

.rs-faq-item[open] .rs-faq-q {
  padding-bottom: 12px;
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .rs-faq-shell { gap: 52px; }
  .rs-faq-qt { font-size: 17px; }
}

@media (max-width: 900px) {
  .rs-faq { padding: 76px 0; }
  .rs-faq-shell { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .rs-faq-lede { max-width: 560px; }
  .rs-faq-point-copy { max-width: 520px; }
}

@media (max-width: 620px) {
  .rs-faq-shell { width: calc(100% - 32px); }
  .rs-faq-title br { display: none; }
  .rs-faq-point { padding: 15px 15px; }
  .rs-faq-tile { width: 38px; height: 38px; border-radius: 11px; }
  .rs-faq-tile svg { width: 19px; height: 19px; }
  .rs-faq-help { padding: 14px 16px 14px 6px; gap: 4px; }
  .rs-faq-help-mascot { width: 72px; }
  .rs-faq-q { gap: 12px; padding: 17px 16px; }
  .rs-faq-badge { width: 30px; height: 30px; }
  .rs-faq-badge svg { width: 15px; height: 15px; }
  .rs-faq-qt { font-size: 16px; }
  .rs-faq-a { padding: 0 16px 18px 58px; font-size: 15px; }
}


/* ====================================================================
   16-about
   ==================================================================== */
/* ============================================================
   16 — Who we are  (.rs-about)
   ============================================================ */

.rs-about {
  padding: 96px 0;
  background: transparent;
  position: relative;
}

.rs-about-shell {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}

.rs-about-grid {
  display: grid;
  grid-template-columns: 42fr 58fr;
  gap: clamp(38px, 4.6vw, 76px);
  align-items: center;
}

/* Copy comes first in the DOM so the <h2> precedes the trait <h3>s;
   the grid puts the panel back on the left. */
.rs-about-panel { grid-column: 1; grid-row: 1; }
.rs-about-copy  { grid-column: 2; grid-row: 1; min-width: 0; }

/* ---------- LEFT: the panel ---------- */

.rs-about-panel {
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  background: linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
  padding: 34px 30px 26px;
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .9);
}

.rs-about-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #A7AEC0;
  text-align: center;
}

.rs-about-dot {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: #767E92;
}

/* hero graphic row: mascot + glowing blob mark */
.rs-about-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 0 30px;
}

.rs-about-mascot {
  width: 150px;
  height: auto;
  flex: none;
  display: block;
}

.rs-about-markwrap {
  position: relative;
  display: block;
  width: 200px;
  flex: none;
}

.rs-about-markwrap::before {
  content: "";
  position: absolute;
  inset: -16%;
  z-index: 0;
  border-radius: 50%;
  filter: blur(30px);
  opacity: .75;
  background:
    radial-gradient(circle at 26% 34%, rgba(157, 87, 255, .55), transparent 58%),
    radial-gradient(circle at 76% 28%, rgba(255, 138, 78, .48), transparent 56%),
    radial-gradient(circle at 46% 78%, rgba(63, 224, 255, .48), transparent 60%);
}

/* the PNG has an opaque black field — screen drops it onto the panel */
.rs-about-mark {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
}

.rs-about-hr {
  height: 1px;
  background: rgba(255, 255, 255, .08);
}

/* trait rows */
.rs-about-traits {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rs-about-trait {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 2px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.rs-about-trait:first-child { border-top: 0; }
.rs-about-trait:last-child  { padding-bottom: 10px; }

.rs-about-tile {
  width: 52px;
  height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #0C0E15;
  border: 1px solid rgba(255, 255, 255, .14);
}

.rs-about-trait--purple .rs-about-tile {
  color: #9D57FF;
  border-color: rgba(157, 87, 255, .55);
  box-shadow: 0 0 0 1px rgba(157, 87, 255, .16), 0 0 30px -14px rgba(157, 87, 255, .9);
}

.rs-about-trait--blue .rs-about-tile {
  color: #4D7CFF;
  border-color: rgba(77, 124, 255, .55);
  box-shadow: 0 0 0 1px rgba(77, 124, 255, .16), 0 0 30px -14px rgba(77, 124, 255, .9);
}

.rs-about-trait--green .rs-about-tile {
  color: #35D08A;
  border-color: rgba(53, 208, 138, .55);
  box-shadow: 0 0 0 1px rgba(53, 208, 138, .16), 0 0 30px -14px rgba(53, 208, 138, .9);
}

.rs-about-trait-body {
  display: block;
  min-width: 0;
}

.rs-about-trait-title {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: #FFFFFF;
}

.rs-about-trait-sub {
  display: block;
  margin-top: 5px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.42;
  color: #A7AEC0;
}

/* ---------- RIGHT: the copy ---------- */

.rs-about-kicker {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #4D7CFF;
}

.rs-about-kicker::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-top: 13px;
  border-radius: 2px;
  background: #4D7CFF;
}

.rs-about-title {
  margin: 28px 0 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: .96;
  letter-spacing: -.005em;
  color: #FFFFFF;
}

.rs-about-para {
  margin: 26px 0 0;
  max-width: 62ch;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.62;
  color: #A7AEC0;
}

.rs-about-em {
  color: #4D7CFF;
  font-weight: 500;
}

/* fact row */
.rs-about-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.rs-about-fact {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 2px 24px;
  border-left: 1px solid rgba(255, 255, 255, .08);
}

.rs-about-fact:first-child {
  padding-left: 0;
  border-left: 0;
}

.rs-about-fact-icon {
  flex: none;
  display: block;
  line-height: 0;
}

.rs-about-fact--blue   .rs-about-fact-icon { color: #4D7CFF; }
.rs-about-fact--purple .rs-about-fact-icon { color: #9D57FF; }
.rs-about-fact--green  .rs-about-fact-icon { color: #35D08A; }

.rs-about-fact-text {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  color: #A7AEC0;
  max-width: 15em;
}

/* link */
.rs-about-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  padding-bottom: 11px;
  border-bottom: 2px solid #4D7CFF;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.005em;
  color: #4D7CFF;
  text-decoration: none;
}

.rs-about-link svg { flex: none; }

.rs-about-link:hover { color: #6E95FF; border-bottom-color: #6E95FF; }

/* ---------- responsive ---------- */

@media (max-width: 1120px) {
  .rs-about-grid { gap: 40px; }
  .rs-about-mascot { width: 126px; }
  .rs-about-markwrap { width: 170px; }
  .rs-about-fact { padding: 2px 16px; }
}

@media (max-width: 900px) {
  .rs-about { padding: 76px 0; }
  .rs-about-grid { grid-template-columns: 1fr; gap: 44px; }
  .rs-about-panel { grid-column: 1; grid-row: 1; }
  .rs-about-copy  { grid-column: 1; grid-row: 2; }
  .rs-about-br { display: none; }
  .rs-about-mascot { width: 150px; }
  .rs-about-markwrap { width: 200px; }
  .rs-about-para { max-width: none; }
}

@media (max-width: 640px) {
  .rs-about-shell { width: calc(100% - 32px); }
  .rs-about-panel { padding: 28px 20px 20px; }
  .rs-about-eyebrow { font-size: 11px; gap: 11px; }
  .rs-about-hero { gap: 0; padding: 20px 0 26px; }
  .rs-about-mascot { width: 116px; }
  .rs-about-markwrap { width: 160px; }
  .rs-about-trait { gap: 16px; padding: 19px 0; }
  .rs-about-tile { width: 46px; height: 46px; border-radius: 12px; }
  .rs-about-trait-title { font-size: 18px; }
  .rs-about-trait-sub { font-size: 16px; }
  .rs-about-para { font-size: 17px; }
  .rs-about-facts { grid-template-columns: 1fr; gap: 20px; padding-top: 24px; }
  .rs-about-fact { padding: 0; border-left: 0; }
  .rs-about-fact-text { max-width: none; }
  .rs-about-link { font-size: 17px; }
}

/* ---------- phone pass (≤700) ---------- */

@media (max-width: 700px) {
  /* The mascot and the logo blob were fixed-width, so together with the blob's
     bleed glow they ran ~20px past each side of the panel. Size both to a share
     of the panel instead, capped at their desktop widths. */
  .rs-about-hero {
    gap: 2px;
    padding: 20px 6px 26px;
  }

  .rs-about-eyebrow {
    font-size: 11.5px;
  }

  .rs-about-mascot {
    width: 34%;
    max-width: 150px;
  }

  .rs-about-markwrap {
    width: 46%;
    max-width: 200px;
  }

  /* Blur alone carries the glow past the mark on a phone; the negative inset
     was the last thing pushing the graphic row past the panel. */
  .rs-about-markwrap::before {
    inset: 0;
    filter: blur(24px);
  }
}


/* ====================================================================
   17-access
   ==================================================================== */
/* ── 17 · Early-access CTA ─────────────────────────────────────────────── */

.rs-access {
  padding: 96px 0;
  background: transparent;
  position: relative;
}
.rs-access-shell {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}

/* Outer panel ─────────────────────────────────────────────────────────── */
.rs-access-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 24px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(77, 124, 255, .05) 0%, rgba(77, 124, 255, 0) 60%),
    linear-gradient(180deg, #0E111A 0%, #0A0C12 100%);
  padding: 68px 60px 64px;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9);
}
.rs-access-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.rs-access-glow-tr {
  top: -220px;
  right: -180px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(157, 87, 255, .20) 0%, rgba(77, 124, 255, .09) 42%, rgba(77, 124, 255, 0) 70%);
}
.rs-access-glow-bl {
  bottom: -260px;
  left: -200px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(77, 124, 255, .16) 0%, rgba(63, 224, 255, .07) 45%, rgba(63, 224, 255, 0) 70%);
}

.rs-access-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  gap: 56px;
  align-items: center;
}

/* ── LEFT column ───────────────────────────────────────────────────────── */
.rs-access-copy {
  position: relative;
  text-align: center;
  padding-left: 46px;
}
.rs-access-mascot {
  position: absolute;
  left: -104px;
  bottom: 42px;
  width: 170px;
  height: auto;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .55));
}

.rs-access-kicker {
  margin: 0 0 16px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #3FE0FF;
}

.rs-access-title {
  margin: 0 0 22px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 4.4vw, 62px);
  line-height: .96;
  letter-spacing: -.005em;
  color: #FFFFFF;
}
.rs-access-grad {
  background: linear-gradient(96deg, #3FE0FF 0%, #4D7CFF 45%, #9D57FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rs-access-lead {
  margin: 0 auto 26px;
  max-width: 30ch;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.58;
  color: #A7AEC0;
}
.rs-access-mail {
  color: #6E9BFF;
  text-decoration: none;
  border-bottom: 1px solid rgba(110, 155, 255, .35);
}
.rs-access-mail:hover { color: #8FB3FF; }

/* Check row */
.rs-access-checks {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 0;
}
.rs-access-checks li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #E4E8F1;
  border-left: 1px solid rgba(255, 255, 255, .10);
}
.rs-access-checks li:first-child { border-left: 0; }
.rs-access-tick { color: #35D08A; flex: none; }

/* CTA */
.rs-access-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(420px, 100%);
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 14px;
  background: linear-gradient(96deg, #3B82F6 0%, #6366F1 50%, #8B5CF6 100%);
  box-shadow: 0 14px 40px -8px rgba(124, 86, 240, .55), inset 0 1px 0 rgba(255, 255, 255, .22);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #FFFFFF;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.rs-access-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 48px -8px rgba(124, 86, 240, .7), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.rs-access-cta-arrow { flex: none; }

.rs-access-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 38px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  color: #767E92;
}
.rs-access-note svg { flex: none; }

/* Store badges */
.rs-access-soon {
  margin: 0 0 14px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #767E92;
}
.rs-access-stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.rs-access-store {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 200px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: #07080C;
  color: #FFFFFF;
  text-align: left;
}
.rs-access-store .glyph { flex: none; color: #FFFFFF; }
.rs-access-store-lines {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-family: "Inter", system-ui, sans-serif;
}
.rs-access-store-small {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #C9CFDD;
}
.rs-access-store-big {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #FFFFFF;
}

/* ── RIGHT column · plan preview ───────────────────────────────────────── */
.rs-access-preview { position: relative; }

.rs-access-head-glow {
  position: absolute;
  top: -160px;
  right: 34px;
  width: 320px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(157, 87, 255, .28) 0%, rgba(77, 124, 255, .10) 45%, rgba(77, 124, 255, 0) 72%);
  pointer-events: none;
  z-index: 0;
}
.rs-access-head {
  position: absolute;
  top: -102px;
  right: 118px;
  width: 120px;
  height: auto;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .6));
}
.rs-access-spark { position: absolute; z-index: 1; pointer-events: none; }
.rs-access-spark-1 { top: -86px; right: 252px; color: #7C6CFF; opacity: .9; }
.rs-access-spark-2 { top: -52px; right: 76px; color: #4D7CFF; opacity: .85; }
.rs-access-spark-3 { top: -20px; right: 116px; color: #3FE0FF; opacity: .7; }

.rs-access-plan {
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px;
  background: linear-gradient(180deg, #12151F 0%, #0C0E15 100%);
  padding: 20px 20px 18px;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .95);
}

.rs-access-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.rs-access-plan-title {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.01em;
  color: #FFFFFF;
}
.rs-access-plan-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 7px 14px;
  border: 1px solid rgba(77, 124, 255, .32);
  border-radius: 999px;
  background: rgba(77, 124, 255, .14);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #A8C2FF;
}

/* Calendar */
.rs-access-cal-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 -4px;
  padding: 0 4px 2px;
  scrollbar-width: thin;
}
/* The scroll box is ~583px inside the panel at 1440px, so keep the floor
   under that: all seven columns fit unscrolled on desktop and the box only
   starts scrolling once the layout is genuinely narrow. */
.rs-access-cal { min-width: 560px; }

.rs-access-dow,
.rs-access-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}
.rs-access-dow {
  padding-bottom: 9px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.rs-access-dow span {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #767E92;
  text-align: center;
}
.rs-access-days { row-gap: 18px; }

.rs-access-day {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rs-access-day-n {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #8A91A5;
  margin-bottom: 6px;
}

.rs-access-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.rs-access-thumb > svg { opacity: .5; }

.rs-access-check {
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #1FA96C;
  border: 1.5px solid rgba(255, 255, 255, .85);
  color: #FFFFFF;
}

/* Thumb hues */
.rs-access-t-steel { background: linear-gradient(150deg, #E3E7EC 0%, #AFB8C4 100%); color: #46505F; }
.rs-access-t-teal  { background: linear-gradient(150deg, #CFE6EA 0%, #7FA9BC 100%); color: #2C4C5C; }
.rs-access-t-rose  { background: linear-gradient(150deg, #F6DFDA 0%, #D9A9A4 100%); color: #6B3B39; }
.rs-access-t-ice   { background: linear-gradient(150deg, #DCEEF7 0%, #A7C9E0 100%); color: #33566E; }
.rs-access-t-warm  { background: linear-gradient(150deg, #F0E2D4 0%, #C7A98F 100%); color: #5E4331; }
.rs-access-t-slate { background: linear-gradient(150deg, #DFE3E7 0%, #9AA3AF 100%); color: #414A57; }
.rs-access-t-xray  { background: linear-gradient(150deg, #2A3440 0%, #10161E 100%); color: #A9BACB; }
.rs-access-t-lilac { background: linear-gradient(150deg, #E7E1F7 0%, #BEB0E2 100%); color: #4A3C74; }

/* Promo thumbs */
.rs-access-promo {
  flex-direction: column;
  gap: 2px;
  padding: 7px 6px;
  text-align: center;
  font-family: "Inter", system-ui, sans-serif;
}
.rs-access-promo-blue {
  background: linear-gradient(160deg, #2E7CF6 0%, #1B4FC4 100%);
  color: #FFFFFF;
}
.rs-access-promo-pink {
  background: linear-gradient(160deg, #FBE4EE 0%, #F3C3D9 100%);
  color: #8C3466;
}
.rs-access-promo-a {
  font-weight: 700;
  font-size: 9.5px;
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.rs-access-promo-b {
  font-weight: 800;
  font-size: 17px;
  line-height: 1.02;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.rs-access-promo-b small {
  font-size: 8px;
  font-weight: 700;
  margin-left: 2px;
  vertical-align: super;
}
.rs-access-promo-pink .rs-access-promo-b { font-size: 13px; }

.rs-access-day-t {
  margin-top: 8px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.25;
  color: #FFFFFF;
}
.rs-access-day-c {
  margin-top: 3px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1.35;
  color: #8A91A5;
}

/* Stat footer */
.rs-access-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.rs-access-stat {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 14px;
  min-width: 0;
  border-left: 1px solid rgba(255, 255, 255, .07);
}
.rs-access-stat:first-child { border-left: 0; padding-left: 4px; }

.rs-access-stat-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
}
.rs-access-ico-purple { background: rgba(157, 87, 255, .12); border: 1px solid rgba(157, 87, 255, .28); color: #B98BFF; }
.rs-access-ico-blue   { background: rgba(77, 124, 255, .12); border: 1px solid rgba(77, 124, 255, .28); color: #6E9BFF; }
.rs-access-ico-green  { background: rgba(53, 208, 138, .12); border: 1px solid rgba(53, 208, 138, .28); color: #35D08A; }
.rs-access-ico-amber  { background: rgba(255, 180, 94, .12); border: 1px solid rgba(255, 180, 94, .28); color: #FFB45E; }

.rs-access-stat-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rs-access-stat-txt strong {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.05;
  color: #FFFFFF;
}
.rs-access-stat-txt small {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.3;
  color: #8A91A5;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .rs-access-panel { padding: 56px 40px 52px; }
  .rs-access-grid { gap: 40px; }
  .rs-access-mascot { width: 140px; left: -78px; }
  .rs-access-copy { padding-left: 34px; }
}

@media (max-width: 1000px) {
  .rs-access { padding: 76px 0; }
  .rs-access-panel { padding: 48px 28px 44px; border-radius: 20px; }
  .rs-access-grid { grid-template-columns: minmax(0, 1fr); gap: 76px; }
  .rs-access-copy { padding-left: 0; padding-top: 0; }
  .rs-access-mascot {
    position: static;
    display: block;
    width: 120px;
    margin: 0 auto 10px;
  }
  .rs-access-lead { max-width: 38ch; }
  .rs-access-head { right: 24px; top: -88px; width: 104px; }
  .rs-access-head-glow { right: -20px; top: -140px; }
  .rs-access-spark-1 { right: 156px; top: -74px; }
  .rs-access-spark-2 { right: 8px; top: -44px; }
  .rs-access-spark-3 { right: 26px; top: -8px; }
}

@media (max-width: 640px) {
  .rs-access { padding: 64px 0; }
  .rs-access-panel { padding: 40px 18px 38px; }
  .rs-access-checks li {
    padding: 0 14px;
    font-size: 15px;
  }
  .rs-access-cta { font-size: 19px; height: 58px; }
  .rs-access-plan { padding: 16px 14px 14px; }
  .rs-access-plan-head { flex-wrap: wrap; gap: 10px; }
  .rs-access-plan-title { font-size: 18px; }
  .rs-access-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .rs-access-stat:nth-child(odd) { border-left: 0; padding-left: 4px; }
  .rs-access-store { width: calc(50% - 8px); min-width: 168px; }
}

/* ── Phone ─────────────────────────────────────────────────────────────────
   The section already stacks at ≤1000px, so the mobile work here is about
   three things: giving the panel back the width its padding was eating,
   letting the 7-column calendar scroll at a legible tile size instead of
   being squeezed to 71px columns, and lifting every micro-label to the 11px
   floor. Nothing below takes effect above 700px. */
@media (max-width: 700px) {

  /* --- outer panel -------------------------------------------------------
     620px corner glows on a 330px panel are mostly outside the box; they
     bleed 180px right and 260px below, which is what made the panel look
     like it was clipping content. Scaled to the panel they read the same
     and stop overflowing. */
  .rs-access-panel {
    padding: 34px 14px 32px;
    border-radius: 18px;
  }
  .rs-access-glow-tr,
  .rs-access-glow-bl {
    width: 300px;
    height: 300px;
    border-radius: 0;
  }
  .rs-access-glow-tr {
    top: 0;
    right: 0;
    left: auto;
    bottom: auto;
    background: radial-gradient(circle at 100% 0%, rgba(157, 87, 255, .22) 0%, rgba(77, 124, 255, .10) 42%, rgba(77, 124, 255, 0) 72%);
  }
  .rs-access-glow-bl {
    bottom: 0;
    left: 0;
    top: auto;
    right: auto;
    background: radial-gradient(circle at 0% 100%, rgba(77, 124, 255, .18) 0%, rgba(63, 224, 255, .08) 45%, rgba(63, 224, 255, 0) 72%);
  }

  /* Room above the preview for the mascot head to peek over the plan card. */
  .rs-access-grid { gap: 68px; }

  /* --- left column ------------------------------------------------------- */
  .rs-access-mascot {
    width: 104px;
    margin: 0 auto 8px;
  }
  .rs-access-kicker {
    margin-bottom: 12px;
    font-size: 12px;
    letter-spacing: .2em;
  }
  .rs-access-title {
    margin-bottom: 16px;
    font-size: 38px;
  }
  .rs-access-lead {
    margin-bottom: 22px;
    max-width: none;
    font-size: 16px;
    line-height: 1.55;
  }

  /* Three checks side by side need ~320px and only have ~300px, so the
     middle one wrapped and left an orphaned divider rule. Stacked, the
     tick still reads as a bullet and nothing wraps mid-phrase. */
  .rs-access-checks {
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
    gap: 11px;
  }
  .rs-access-checks li {
    padding: 0;
    border-left: 0;
    font-size: 15px;
  }

  /* The primary action of the section: full width, finger-sized. */
  .rs-access-cta {
    width: 100%;
    height: 60px;
    margin-bottom: 14px;
    border-radius: 13px;
    font-size: 19px;
    gap: 11px;
  }
  /* Wraps to two lines at this width, so pin the padlock to the first one. */
  .rs-access-note {
    align-items: flex-start;
    margin-bottom: 30px;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
  }
  .rs-access-note svg { margin-top: 2px; }

  .rs-access-soon {
    margin-bottom: 12px;
    font-size: 11px;
    letter-spacing: .16em;
  }
  /* Two 168px badges cannot sit side by side in ~300px, so stack them full
     width rather than leaving them half-width and lopsided. */
  .rs-access-stores {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .rs-access-store {
    width: 100%;
    min-width: 0;
    justify-content: center;
    padding: 11px 16px;
  }
  .rs-access-store-small { font-size: 11px; }
  .rs-access-store-big { font-size: 16px; }

  /* --- right column · plan preview --------------------------------------- */
  .rs-access-head {
    width: 84px;
    top: -62px;
    right: 10px;
  }
  .rs-access-head-glow {
    top: -104px;
    right: 0;
    width: 230px;
    height: 190px;
  }
  .rs-access-spark-1 { right: 108px; top: -52px; }
  .rs-access-spark-2 { right: 4px; top: -30px; width: 24px; height: 24px; }
  .rs-access-spark-3 { right: 14px; top: 4px; }

  .rs-access-plan { padding: 14px 12px 12px; }
  .rs-access-plan-head {
    margin-bottom: 14px;
    gap: 8px;
  }
  .rs-access-plan-title { font-size: 17px; }
  .rs-access-plan-pill {
    padding: 6px 11px;
    font-size: 12px;
  }

  /* --- the calendar ------------------------------------------------------
     14 day tiles in 7 columns is intrinsically wide. Squeezing it to fit
     gave 71px tiles whose promo captions were clipped at 9.5px. Instead it
     keeps desktop tile size (~93px) and scrolls sideways inside the plan
     card, bleeding to the card's padding edge so the affordance is visible. */
  .rs-access-cal-scroll {
    margin-inline: -12px;
    padding-inline: 12px;
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: 12px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .rs-access-cal { min-width: 720px; }
  .rs-access-day { scroll-snap-align: start; }

  .rs-access-dow { gap: 9px; }
  .rs-access-days { gap: 9px; row-gap: 16px; }
  .rs-access-day-n { font-size: 12px; }
  .rs-access-day-t { font-size: 13px; }
  .rs-access-day-c { font-size: 12px; }

  /* Promo thumbs: 9.5px / 8px labels are below the floor and were being
     clipped by the tile. The wider tile carries them at 11px. */
  .rs-access-promo { padding: 7px 3px; }
  .rs-access-promo-a {
    font-size: 11px;
    letter-spacing: 0;
  }
  .rs-access-promo-b { font-size: 19px; }
  .rs-access-promo-b small { font-size: 11px; }
  .rs-access-promo-pink .rs-access-promo-b { font-size: 15px; }

  /* --- stat footer -------------------------------------------------------
     Two columns (set at ≤640px) leave ~120px per cell; trimming the gutters
     and the icon buys the label enough room to break at a word. */
  .rs-access-stats {
    margin-top: 18px;
    padding-top: 16px;
    row-gap: 14px;
  }
  .rs-access-stat {
    gap: 9px;
    padding: 0 9px;
  }
  .rs-access-stat-ico {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }
  .rs-access-stat-txt strong { font-size: 22px; }
  .rs-access-stat-txt small {
    font-size: 12px;
    line-height: 1.25;
  }
}

@media (max-width: 380px) {
  .rs-access-title { font-size: 35px; }
  .rs-access-checks li { font-size: 14.5px; }
  .rs-access-cta { font-size: 18px; }
}


/* ====================================================================
   18-footer
   ==================================================================== */
/* ============================================================
   18 — Site footer
   ============================================================ */

.rs-footer {
  position: relative;
  padding: 0;
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, .07);
  color: #fff;
}

.rs-footer .rs-footer-shell {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}

.rs-footer .rs-footer-main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  column-gap: 40px;
  row-gap: 48px;
  padding: 80px 0 56px;
}

/* ---------- brand column ---------- */

.rs-footer .rs-footer-brand {
  min-width: 0;
  max-width: 400px;
}

.rs-footer .rs-footer-logo {
  display: block;
  width: 230px;
  max-width: 100%;
  margin: 0 0 26px;
  border-radius: 8px;
}

.rs-footer .rs-footer-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.rs-footer .rs-footer-tagline {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -.008em;
}

.rs-footer .rs-footer-rule {
  display: block;
  width: 165px;
  max-width: 60%;
  height: 2px;
  margin: 26px 0 24px;
  border-radius: 2px;
  background: linear-gradient(90deg, #3FE0FF 0%, #4D7CFF 34%, #9D57FF 68%, #FB6ED8 100%);
  opacity: .9;
}

.rs-footer .rs-footer-blurb {
  max-width: 335px;
  margin: 0;
  color: #A7AEC0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.68;
}

/* ---------- trust row ---------- */

.rs-footer .rs-footer-trust {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.rs-footer .rs-footer-trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 12px;
  border-left: 1px solid rgba(255, 255, 255, .10);
}

.rs-footer .rs-footer-trust-item:first-child {
  padding-left: 0;
  border-left: 0;
}

.rs-footer .rs-footer-trust-item svg {
  display: block;
  flex: none;
}

.rs-footer .rs-footer-trust-blue { color: #4D7CFF; }
.rs-footer .rs-footer-trust-purple { color: #9D57FF; }
.rs-footer .rs-footer-trust-green { color: #35D08A; }

.rs-footer .rs-footer-trust-text {
  display: flex;
  flex-direction: column;
  color: #C6CBD8;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.34;
  white-space: nowrap;
}

/* ---------- link columns ---------- */

.rs-footer .rs-footer-col {
  min-width: 0;
  --rs-footer-accent: #4D7CFF;
}

.rs-footer .rs-footer-col-1 { --rs-footer-accent: #4D7CFF; }
.rs-footer .rs-footer-col-2 { --rs-footer-accent: #5877FF; }
.rs-footer .rs-footer-col-3 { --rs-footer-accent: #7A6BFF; }
.rs-footer .rs-footer-col-4 { --rs-footer-accent: #9165FF; }

.rs-footer .rs-footer-col-title {
  display: block;
  padding-bottom: 11px;
  color: var(--rs-footer-accent);
  font-family: "JetBrains Mono", monospace;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.rs-footer .rs-footer-col-title::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 11px;
  border-radius: 2px;
  background: var(--rs-footer-accent);
}

.rs-footer .rs-footer-links {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 21px 0 0;
  padding: 0;
  list-style: none;
}

.rs-footer .rs-footer-links a {
  display: inline-block;
  color: #C2C8D6;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.25;
  text-decoration: none;
  transition: color .16s ease;
}

.rs-footer .rs-footer-links a:hover {
  color: #fff;
}

/* ---------- bottom bar ---------- */

.rs-footer .rs-footer-base {
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.rs-footer .rs-footer-base-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 30px 0 34px;
  color: #767E92;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .rs-footer .rs-footer-main { column-gap: 28px; }
  .rs-footer .rs-footer-links a { font-size: 16px; }
  .rs-footer .rs-footer-trust-item { padding: 2px 13px; }
}

@media (max-width: 1000px) {
  .rs-footer .rs-footer-main {
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 44px;
    padding: 72px 0 48px;
  }
  .rs-footer .rs-footer-brand {
    grid-column: 1 / -1;
    max-width: 560px;
  }
  .rs-footer .rs-footer-blurb { max-width: 440px; }
}

@media (max-width: 600px) {
  .rs-footer .rs-footer-shell { width: calc(100% - 36px); }
  .rs-footer .rs-footer-main {
    grid-template-columns: 1fr;
    row-gap: 38px;
    padding: 60px 0 40px;
  }
  .rs-footer .rs-footer-logo { width: 190px; margin-bottom: 22px; }
  .rs-footer .rs-footer-tagline { font-size: 18px; }
  .rs-footer .rs-footer-rule { margin: 22px 0 20px; }
  .rs-footer .rs-footer-trust {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 26px;
  }
  .rs-footer .rs-footer-trust-item {
    padding: 0;
    border-left: 0;
  }
  .rs-footer .rs-footer-links { gap: 15px; margin-top: 18px; }
  .rs-footer .rs-footer-base-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 24px 0 30px;
    font-size: 13.5px;
    text-align: center;
  }
  .rs-footer .rs-footer-copy,
  .rs-footer .rs-footer-origin {
    width: 100%;
    text-align: center;
  }
}


/* ====================================================================
   99-mobile
   ==================================================================== */
/* ============================================================
   Cross-cutting mobile pass.

   Loads last, after every section partial, and only inside media
   queries — so it changes nothing on desktop. It owns the three
   things that must be identical across all 18 sections (vertical
   rhythm, page gutter, tap-target floor); everything section-
   specific stays in that section's own partial.
   ============================================================ */

@media (max-width: 700px) {
  /* --- vertical rhythm ---------------------------------------
     Sections ship 76–96px of padding top and bottom, which is a
     desktop rhythm. At phone width that alone added ~2,600px of
     dead space down the page. 52px keeps the sections legibly
     separated without the scroll tax. */
  .rs-hero,
  .rs-transformation,
  .rs-intro,
  .rs-agent,
  .rs-noprompt,
  .rs-planning,
  .rs-create,
  section.rs-brand,
  .rs-control,
  .rs-month,
  .rs-publish,
  .rs-how,
  .rs-industries,
  .rs-pricing,
  .rs-faq,
  .rs-about,
  .rs-access {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  /* The hero sits directly under the header and keeps its tighter top. */
  .rs-hero { padding-top: 8px; }

  .rs-footer { padding-top: 44px; }

  /* --- page gutter -------------------------------------------
     24px each side is a desktop-derived gutter that costs 13% of a
     360px screen. 16px is the platform norm and buys back room for
     the content itself. */
  .rs-header-shell,
  .rs-hero-shell,
  .rs-tf-shell,
  .rs-intro-shell,
  .rs-agent-shell,
  .rs-noprompt-shell,
  .rs-planning-shell,
  .rs-create-shell,
  .rs-brand-shell,
  .rs-control-shell,
  .rs-month-shell,
  .rs-publish-shell,
  .rs-how-shell,
  .rs-industries-shell,
  .rs-pricing-shell,
  .rs-faq-shell,
  .rs-about-shell,
  .rs-access-shell,
  .rs-footer-shell {
    width: calc(100% - 32px);
  }

  /* --- tap targets -------------------------------------------
     Real links and buttons need a finger-sized hit area. Text links
     that sit inline in a paragraph are excluded — padding them out
     would break the line box they live in. */
  /* NB: only standalone links belong here. `.rs-access-mail` is deliberately
     absent — it sits inline inside a paragraph, where a min-height inflates
     the whole line box and opens a gap around the email address. */
  .rs-faq-help-link,
  .rs-footer-col a,
  .rs-footer-logo,
  .rs-about-link,
  .rs-month-cta {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  .rs-nav a,
  .rs-mobile-nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 480px) {
  /* Below 480 the gutter tightens again so the wide mock-UI panels
     keep as much usable width as possible. */
  .rs-header-shell,
  .rs-hero-shell,
  .rs-tf-shell,
  .rs-intro-shell,
  .rs-agent-shell,
  .rs-noprompt-shell,
  .rs-planning-shell,
  .rs-create-shell,
  .rs-brand-shell,
  .rs-control-shell,
  .rs-month-shell,
  .rs-publish-shell,
  .rs-how-shell,
  .rs-industries-shell,
  .rs-pricing-shell,
  .rs-faq-shell,
  .rs-about-shell,
  .rs-access-shell,
  .rs-footer-shell {
    width: calc(100% - 28px);
  }
}

/* ============================================================
   Footer refresh — balanced brand, navigation and trust layout
   ============================================================ */

.rs-footer .rs-footer-main {
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  column-gap: clamp(52px, 6vw, 92px);
  row-gap: 34px;
  padding: 72px 0 30px;
}

.rs-footer .rs-footer-brand {
  max-width: 360px;
}

.rs-footer .rs-footer-logo {
  width: 214px;
  margin-bottom: 22px;
}

.rs-footer .rs-footer-logo img.rs-footer-logo-light {
  display: none;
}

[data-theme="light"] .rs-footer .rs-footer-logo img.rs-footer-logo-dark {
  display: none;
}

[data-theme="light"] .rs-footer .rs-footer-logo img.rs-footer-logo-light {
  display: block;
}

.rs-footer .rs-footer-tagline {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.rs-footer .rs-footer-rule {
  width: 112px;
  margin: 22px 0 18px;
}

.rs-footer .rs-footer-blurb {
  max-width: 350px;
  font-size: 15px;
  line-height: 1.65;
}

.rs-footer .rs-footer-nav {
  display: grid;
  grid-template-columns: 1.45fr 1fr .8fr 1.05fr;
  gap: clamp(24px, 3vw, 46px);
  min-width: 0;
  padding-top: 5px;
}

.rs-footer .rs-footer-col-1 .rs-footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
}

.rs-footer .rs-footer-links {
  gap: 14px;
  margin-top: 17px;
}

.rs-footer .rs-footer-links a {
  font-size: 15.5px;
  line-height: 1.35;
}

.rs-footer .rs-footer-trust {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.rs-footer .rs-footer-trust-item,
.rs-footer .rs-footer-trust-item:first-child {
  min-width: 0;
  gap: 11px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
}

.rs-footer .rs-footer-trust-text {
  display: block;
  overflow: hidden;
  color: #C6CBD8;
  font-size: 13.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-footer .rs-footer-base-row {
  padding: 23px 0 27px;
  font-size: 13.5px;
}

[data-theme="light"] .rs-footer .rs-footer-trust {
  border-top-color: rgba(17, 23, 43, .09);
}

[data-theme="light"] .rs-footer .rs-footer-trust-item,
[data-theme="light"] .rs-footer .rs-footer-trust-item:first-child {
  border-color: rgba(17, 23, 43, .08);
  background: rgba(255, 255, 255, .46);
}

@media (max-width: 1000px) {
  .rs-footer .rs-footer-main {
    grid-template-columns: 1fr;
    row-gap: 42px;
  }

  .rs-footer .rs-footer-brand {
    grid-column: auto;
    max-width: 560px;
  }
}

@media (max-width: 760px) {
  .rs-footer {
    padding-top: 0;
  }

  .rs-footer .rs-footer-main {
    row-gap: 38px;
    padding: 54px 0 26px;
  }

  .rs-footer .rs-footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 28px;
  }

  .rs-footer .rs-footer-trust {
    grid-template-columns: 1fr;
  }

  .rs-footer .rs-footer-trust-text {
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .rs-footer .rs-footer-logo {
    width: 184px;
  }

  .rs-footer .rs-footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 22px;
  }

  .rs-footer .rs-footer-col-1,
  .rs-footer .rs-footer-col-4 {
    grid-column: 1 / -1;
  }

  .rs-footer .rs-footer-col-1 .rs-footer-links {
    column-gap: 18px;
  }

  .rs-footer .rs-footer-col-4 .rs-footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
  }

  .rs-footer .rs-footer-base-row {
    padding: 22px 0 26px;
  }
}

/* ============================================================
   Hero refresh — top-aligned product and full-width proof strip
   ============================================================ */

.rs-hero {
  padding: 22px 0 72px;
}

.rs-hero-shell {
  align-items: start;
  row-gap: 34px;
}

.rs-hero .rs-hero-copy {
  max-width: 600px;
}

.rs-hero h1 {
  font-size: clamp(46px, 4.8vw, 70px);
  line-height: .94;
}

.rs-hero .rs-hero-product {
  margin-top: 54px;
}

.rs-hero .rs-hero-proof {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px;
  background: rgba(255, 255, 255, .025);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .16);
}

.rs-hero .rs-hero-proof li,
.rs-hero .rs-hero-proof li:first-child {
  min-width: 0;
  gap: 14px;
  padding: 18px 24px;
}

.rs-hero .rs-hero-proof li + li {
  border-left: 1px solid var(--line, rgba(255, 255, 255, .09));
}

.rs-hero .rs-hero-proof li > span:last-child {
  display: block;
  min-width: 0;
}

.rs-hero .rs-hero-proof strong,
.rs-hero .rs-hero-proof small {
  display: block;
}

.rs-hero .rs-hero-proof strong {
  color: var(--text, #fff);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.rs-hero .rs-hero-proof small {
  margin-top: 3px;
  color: var(--text-soft, #a7aec0);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
}

[data-theme="light"] .rs-hero .rs-hero-proof {
  border-color: rgba(17, 23, 43, .09);
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 20px 60px rgba(29, 36, 58, .08);
}

@media (max-width: 1180px) {
  .rs-hero .rs-hero-product {
    margin-top: 46px;
  }

  .rs-hero .rs-hero-proof li,
  .rs-hero .rs-hero-proof li:first-child {
    padding: 17px 18px;
  }
}

@media (max-width: 900px) {
  .rs-hero {
    padding: 12px 0 68px;
  }

  .rs-hero-shell {
    row-gap: 38px;
  }

  .rs-hero .rs-hero-copy {
    order: 1;
  }

  .rs-hero .rs-hero-proof {
    order: 2;
    grid-column: auto;
  }

  .rs-hero .rs-hero-product {
    order: 3;
    margin-top: 0;
  }
}

@media (max-width: 700px) {
  .rs-hero .rs-hero-proof {
    grid-template-columns: 1fr;
    border-radius: 16px;
  }

  .rs-hero .rs-hero-proof li,
  .rs-hero .rs-hero-proof li:first-child {
    padding: 15px 16px;
  }

  .rs-hero .rs-hero-proof li + li {
    border-top: 1px solid var(--line, rgba(255, 255, 255, .09));
    border-left: 0;
  }
}

@media (max-width: 620px) {
  .rs-hero-shell {
    row-gap: 30px;
  }

  .rs-hero h1 {
    font-size: clamp(40px, 11.5vw, 52px);
    line-height: .96;
  }

  .rs-hero .rs-hero-badge {
    margin-bottom: 18px;
  }

  .rs-hero .rs-hero-actions {
    margin-top: 24px;
  }
}

/* Keep the audience statement and every business chip on one desktop row. */
@media (min-width: 1200px) {
  .audience-inner {
    justify-content: space-between;
    gap: 18px;
  }

  .audience-inner p {
    white-space: nowrap;
  }

  .audience-list {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
  }

  .audience-list span {
    flex: 0 0 auto;
    padding-inline: 9px;
    white-space: nowrap;
  }
}

/* Comparison badge now belongs between the two large panels, not above them. */
.rs-transformation .rs-tf-grid {
  position: relative;
  gap: 56px;
}

.rs-transformation .rs-tf-grid-vs {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
  border-color: rgba(157, 87, 255, .78);
  box-shadow:
    0 0 0 8px rgba(9, 11, 17, .94),
    0 0 30px rgba(157, 87, 255, .4),
    inset 0 0 15px rgba(77, 124, 255, .18);
}

@media (max-width: 900px) {
  .rs-transformation .rs-tf-grid {
    gap: 22px;
  }

  .rs-transformation .rs-tf-grid-vs {
    position: static;
    width: 52px;
    height: 52px;
    margin: -1px 0;
    transform: none;
    justify-self: center;
  }
}

/* ============================================================
   Desktop rhythm pass — keep every message, reduce scroll depth
   ============================================================ */

@media (min-width: 1101px) {
  /* Intro: retain the collage and three benefits in a tighter stage. */
  .rs-intro {
    --rs-art: .82;
    padding: 76px 0;
  }

  .rs-intro-top {
    gap: 30px;
  }

  .rs-intro-kicker-rule {
    margin-bottom: 22px;
  }

  .rs-intro-lead {
    margin-top: 20px;
    line-height: 1.5;
  }

  .rs-intro-body {
    margin-top: 10px;
    line-height: 1.5;
  }

  .rs-intro-cards {
    gap: 18px;
    margin-top: 34px;
  }

  .rs-intro-card {
    padding: 20px 22px 24px;
  }

  .rs-intro-badge {
    top: 18px;
    left: 18px;
  }

  .rs-intro-figure {
    width: 118px;
    margin: 8px auto 14px;
  }

  .rs-intro-card-title {
    font-size: 26px;
  }

  .rs-intro-card-rule {
    margin: 8px auto 12px;
  }

  .rs-intro-card p {
    font-size: 15.5px;
    line-height: 1.45;
  }

  .rs-intro-strip {
    margin-top: 18px;
  }

  .rs-intro-strip-item {
    padding: 16px 20px;
  }

  /* No-prompt: pair the promise with its explanation instead of stacking it. */
  .rs-noprompt {
    padding: 76px 0;
  }

  .rs-noprompt .rs-noprompt-head {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    grid-template-rows: auto auto auto;
    column-gap: 64px;
    max-width: none;
    align-items: start;
  }

  .rs-noprompt .rs-noprompt-kicker {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 16px;
  }

  .rs-noprompt .rs-noprompt-title {
    grid-column: 1;
    grid-row: 2 / 4;
  }

  .rs-noprompt .rs-noprompt-title + .rs-noprompt-lede {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }

  .rs-noprompt .rs-noprompt-lede + .rs-noprompt-lede {
    grid-column: 2;
    grid-row: 3;
    margin-top: 10px;
  }

  .rs-noprompt .rs-noprompt-panel {
    margin-top: 30px;
  }

  .rs-noprompt .rs-noprompt-left,
  .rs-noprompt .rs-noprompt-right {
    padding-top: 22px;
    padding-bottom: 24px;
  }

  .rs-noprompt .rs-noprompt-strip {
    margin-top: 18px;
  }

  .rs-noprompt .rs-noprompt-strip > li {
    padding: 18px 22px;
  }

  /* Create: use wider preview ratios so all six formats scan quickly. */
  .rs-create {
    padding: 76px 0;
  }

  .rs-create-head {
    margin-bottom: 30px;
  }

  .rs-create-grid {
    gap: 18px;
  }

  .rs-fmt {
    padding: 14px;
  }

  .rs-fmt-head {
    margin-bottom: 10px;
  }

  .rs-fmt-chip {
    width: 36px;
    height: 36px;
  }

  .rs-fmt-head h3 {
    font-size: 18px;
  }

  .rs-create-tile {
    aspect-ratio: 16 / 10;
  }

  .rs-fmt-copy {
    margin-top: 10px;
    line-height: 1.45;
  }

  .rs-fmt-eg {
    padding-top: 9px;
  }

  .rs-create-inc {
    margin-top: 18px;
    padding: 14px 18px;
  }

  /* Pricing: compact the cards and pair reassurance with the mascot note. */
  .rs-pricing {
    padding: 76px 0;
  }

  .rs-pricing-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
    column-gap: 20px;
  }

  .rs-pricing-head,
  .rs-pricing-grid {
    grid-column: 1 / -1;
  }

  .rs-pricing-head {
    margin-bottom: 36px;
  }

  .rs-pricing-grid {
    gap: 20px;
    padding: 20px 0;
  }

  .rs-pricing-card {
    padding: 22px;
  }

  .rs-pricing-card--pro {
    margin: -20px 0;
    padding: 26px 22px;
  }

  .rs-pricing-price {
    margin-top: 10px;
    font-size: 50px;
  }

  .rs-pricing-billing {
    margin-top: 6px;
  }

  .rs-pricing-rule,
  .rs-pricing-desc {
    margin-top: 14px;
  }

  .rs-pricing-features {
    gap: 9px;
    margin: 16px 0 20px;
  }

  .rs-pricing-features li {
    gap: 10px;
    font-size: 15px;
    line-height: 1.3;
  }

  .rs-pricing-cta {
    padding: 12px 18px;
  }

  .rs-pricing-note {
    margin-top: 8px;
  }

  .rs-pricing-assure {
    grid-column: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 20px;
  }

  .rs-pricing-assure-cell {
    gap: 12px;
    padding: 15px 17px;
    border-left: 0 !important;
  }

  .rs-pricing-assure-cell:nth-child(even) {
    border-left: 1px solid rgba(255, 255, 255, .07) !important;
  }

  .rs-pricing-assure-cell:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, .07);
  }

  .rs-pricing-assure-icon {
    width: 30px;
    height: 30px;
  }

  .rs-pricing-footnote {
    grid-column: 2;
    align-self: stretch;
    width: 100%;
    margin: 20px 0 0;
  }

  .rs-pricing-mascot {
    width: 90px;
    margin-right: -30px;
  }

  .rs-pricing-footnote-panel {
    align-self: stretch;
    gap: 12px;
    padding: 16px 18px 16px 42px;
  }

  .rs-pricing-footnote-text strong {
    font-size: 18px;
  }

  .rs-pricing-footnote-text span {
    font-size: 14px;
    line-height: 1.4;
  }

  /* FAQ: reassurance points become a compact two-column reference grid. */
  .rs-faq {
    padding: 76px 0;
  }

  .rs-faq-shell {
    grid-template-columns: minmax(0, 39fr) minmax(0, 61fr);
    gap: 42px;
  }

  .rs-faq-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
  }

  .rs-faq-kicker,
  .rs-faq-title,
  .rs-faq-rule,
  .rs-faq-lede,
  .rs-faq-points,
  .rs-faq-help {
    grid-column: 1 / -1;
  }

  .rs-faq-lede {
    max-width: 460px;
    margin-bottom: 22px;
  }

  .rs-faq-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 14px;
    padding: 0;
  }

  .rs-faq-point {
    gap: 10px;
    padding: 12px 13px;
    border-top: 0 !important;
  }

  .rs-faq-point:nth-child(even) {
    border-left: 1px solid rgba(255, 255, 255, .06);
  }

  .rs-faq-point:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, .06) !important;
  }

  .rs-faq-tile {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .rs-faq-tile svg {
    width: 18px;
    height: 18px;
  }

  .rs-faq-point-title {
    font-size: 14.5px;
  }

  .rs-faq-point-copy {
    font-size: 12.5px;
    line-height: 1.4;
  }

  .rs-faq-help {
    padding: 10px 16px 10px 8px;
  }

  .rs-faq-help-mascot {
    width: 72px;
  }

  .rs-faq-help-title {
    font-size: 17px;
  }

  .rs-faq-help-copy,
  .rs-faq-help-link {
    font-size: 14px;
  }

  .rs-faq-items {
    gap: 11px;
  }

  .rs-faq-q {
    padding: 17px 19px;
  }
}

/* ---------------------------------------------------------------------
   Carried over from home-v2.css when that file was retired. Only the
   parts index.html still uses: the design tokens v3 reads through var()
   fallbacks, the page background and grain, and four utility classes.
   --------------------------------------------------------------------- */
:root {
  --bg: #050507;
  --surface: #0e0f14;
  --surface-2: #13151d;
  --surface-3: #191c26;
  --text: #f7f8fb;
  --text-soft: #b4b8c5;
  --text-faint: #7f8493;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --blue: #4d7cff;
  --cyan: #3fe0ff;
  --purple: #9d57ff;
  --green: #36df9a;
  --pink: #fb6ed8;
  --orange: #ffb45e;
  --cyan-fill: #3fe0ff;
  --blue-fill: #4d7cff;
  --purple-fill: #9d57ff;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 12px;
  --shell: 1180px;
}

[data-theme="light"] {
  --bg: #FCFBF8;
  --surface: #ffffff;
  --surface-2: #f0f2f8;
  --surface-3: #e8ebf4;
  --text: #11172b;
  --text-soft: #50586d;
  --text-faint: #5E6678;
  --line: rgba(17, 23, 43, 0.09);
  --line-strong: rgba(17, 23, 43, 0.16);
  --shadow: 0 28px 80px rgba(40, 54, 95, 0.14);
  --cyan: #0E7490;
  --blue: #2563EB;
  --purple: #6D28D9;
  --green: #047857;
  --pink: #BE185D;
  --orange: #B45309;
  --tally-glow: rgba(37, 99, 235, .18);
}

.home-v2 {
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.011) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.008) 0 1px, transparent 1px 4px);
  background-size: 180px 180px, auto, auto;
  background-repeat: repeat;
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[data-theme="light"] .home-v2 {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg, rgba(72, 64, 48, 0.013) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(72, 64, 48, 0.01) 0 1px, transparent 1px 4px);
}
.shell { width: min(var(--shell), calc(100% - 48px)); margin: 0 auto; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 999; padding: 12px 18px; border-radius: 10px; background: var(--cyan-fill); color: #041019; font-weight: 800; text-decoration: none; }
.skip-link:focus { top: 20px; }
.anchor-alias { display: block; height: 0; overflow: hidden; }
.audience-strip { padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.012); }

@media (max-width: 620px) {
  .shell, .narrow-shell { width: min(100% - 32px, var(--shell)); }
}