/* ezjonline.com/resources
 *
 * Layout, spacing and motion follow the Masterminds Workshop giveaways pages;
 * colour and type follow ezjonline.com (Figtree, #0a0a0a, #F47C20). Loaded
 * after /styles.css, and every rule is scoped under .rs-body so nothing leaks
 * into the rest of the site.
 */
.rs-body {
  --rs-orange: #F47C20;
  --rs-amber: #FFB25E;
  --rs-gold: #FFC66D;
  --rs-text: #F5F5F5;
  --rs-bg: #0a0a0a;
  --rs-ease: cubic-bezier(.25, .46, .45, .94);
  --rs-line: rgba(255, 255, 255, .08);
  background-color: var(--rs-bg);
  color: var(--rs-text);
  font-family: 'Figtree', sans-serif;
}
.rs-body ::selection { background: rgba(244, 124, 32, .4); color: #fff; }
.rs-body::-webkit-scrollbar { width: 5px; }
.rs-body::-webkit-scrollbar-thumb { background: rgba(244, 124, 32, .5); border-radius: 5px; }
html:has(.rs-body) { scroll-behavior: smooth; }

/* Atmosphere: drifting dot grid, three slow blobs, falling particles. */
.rs-body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: radial-gradient(rgba(244, 124, 32, .08) 1px, transparent 1px);
  background-size: 28px 28px;
  animation: rs-grid 12s linear infinite;
  pointer-events: none;
}
.rs-body::after {
  content: '';
  position: fixed;
  z-index: -2;
  width: 520px;
  height: 520px;
  top: -20%;
  left: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 124, 32, .20), transparent 70%);
  animation: rs-float 7s ease-in-out infinite;
  pointer-events: none;
}
.rs-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.rs-wrap { position: relative; }
.rs-wrap::before,
.rs-wrap::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.rs-wrap::before {
  width: 420px;
  height: 420px;
  right: 3%;
  top: 60%;
  background: radial-gradient(circle, rgba(255, 178, 94, .12), transparent 70%);
  animation: rs-float-slow 9s ease-in-out infinite;
}
.rs-wrap::after {
  width: 260px;
  height: 260px;
  right: 25%;
  top: 30%;
  background: radial-gradient(circle, rgba(255, 198, 109, .08), transparent 70%);
  animation: rs-float 7s ease-in-out 3s infinite;
}
@keyframes rs-grid { to { background-position: 28px 28px; } }
@keyframes rs-float { 50% { transform: translateY(-22px) scale(1.04); } }
@keyframes rs-float-slow { 50% { transform: translateY(18px) scale(.97); } }

/* The main site header, with a glowing hairline like the reference. */
.rs-body .site-header::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 124, 32, .5) 40%, rgba(255, 198, 109, .35) 70%, transparent);
}
.rs-body .nav a.rs-nav-active { color: var(--rs-orange); }

/* Reveal: fade up 14px, 340ms, the reference easing. */
.rs-js .rs-body .reveal,
.rs-js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .34s var(--rs-ease), transform .34s var(--rs-ease);
}
.rs-js .reveal.is-in { opacity: 1; transform: none; }

.rs-eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rs-orange);
}
.rs-grad {
  background: linear-gradient(135deg, #F5F5F5 0%, var(--rs-gold) 35%, var(--rs-orange) 70%, #F5F5F5 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rs-shift 9s ease-in-out infinite;
}
@keyframes rs-shift { 50% { background-position: 100% 50%; } }

/* ---------- Hub ---------- */
.rs-hub { max-width: 1072px; margin: 0 auto; padding: 144px 24px 96px; }
.rs-hub .rs-hero { max-width: 768px; margin: 0 auto 40px; text-align: center; }
.rs-title {
  margin: 0 0 16px;
  font-size: clamp(44px, 7vw, 64px);
  line-height: 1;
  letter-spacing: -0.05em;
  font-weight: bold;
}
.rs-sub {
  margin: 0 auto;
  max-width: 576px;
  font-size: 18px;
  line-height: 1.625;
  letter-spacing: -0.02em;
  color: rgba(245, 245, 245, .6);
}

/* Folder tabs joined to the panel below. */
.rs-board { max-width: 1024px; margin: 0 auto; }
.rs-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding-left: 20px;
  border-bottom: 1px solid var(--rs-line);
}
.rs-tab {
  position: relative;
  top: 1px;
  padding: 10px 20px;
  font: inherit;
  font-size: 14px;
  letter-spacing: -0.02em;
  color: rgba(245, 245, 245, .4);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  cursor: pointer;
  transition: all .15s cubic-bezier(.4, 0, .2, 1);
}
.rs-tab:hover { color: rgba(245, 245, 245, .7); background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .06); }
.rs-tab.is-active {
  color: var(--rs-text);
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 1px 0 0 #121212;
}
.rs-tab.is-active::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--rs-orange);
  box-shadow: 0 0 12px rgba(244, 124, 32, .7);
}
.rs-tab:focus-visible { outline: 2px solid var(--rs-orange); outline-offset: 2px; }
.rs-panels {
  border: 1px solid var(--rs-line);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, .015);
}
.rs-panel { display: none; }
.rs-panel.is-active { display: block; }
.rs-js .rs-panel .rs-row.rs-enter { animation: rs-row-in .45s var(--rs-ease) both; }
@keyframes rs-row-in { from { opacity: 0; transform: translateY(16px); } }

.rs-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  transition: background .15s ease;
}
.rs-row:last-child { border-bottom: 0; }
a.rs-row:hover { background: rgba(255, 255, 255, .04); }
.rs-row-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--rs-orange);
  background: rgba(244, 124, 32, .14);
  border: 1.5px solid rgba(244, 124, 32, .35);
  transition: box-shadow .2s ease;
}
.rs-row-icon svg { width: 16px; height: 16px; }
a.rs-row:hover .rs-row-icon { box-shadow: 0 0 18px rgba(244, 124, 32, .35); }
.rs-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rs-row-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rs-row-title { font-size: 15px; letter-spacing: -0.02em; color: rgba(245, 245, 245, .92); transition: color .15s; }
a.rs-row:hover .rs-row-title { color: #fff; }
.rs-row-desc {
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: rgba(245, 245, 245, .45);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rs-row-arrow {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: rgba(245, 245, 245, .2);
  transition: color .2s, transform .2s;
}
a.rs-row:hover .rs-row-arrow { color: var(--rs-orange); transform: translateX(4px); }
.rs-row-soon { opacity: .7; }
.rs-row-soon .rs-row-icon { color: rgba(245, 245, 245, .5); background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); }

.rs-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 999px;
  color: var(--rs-orange);
  background: rgba(244, 124, 32, .14);
  border: 1px solid rgba(244, 124, 32, .28);
}
.rs-pill-guide,
.rs-pill-prompt,
.rs-pill-prompts { color: var(--rs-gold); background: rgba(255, 198, 109, .1); border-color: rgba(255, 198, 109, .22); }
.rs-pill-soon { color: rgba(245, 245, 245, .55); background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }

/* ---------- Resource page ---------- */
.rs-res { max-width: 1072px; margin: 0 auto; padding: 0 24px 64px; }
.rs-res-hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 0 64px;
  max-width: 820px;
  margin: 0 auto;
}
.rs-js .rs-in { opacity: 0; transform: translateY(14px); animation: rs-hero-in .6s var(--rs-ease) var(--d, 0ms) forwards; }
@keyframes rs-hero-in { to { opacity: 1; transform: none; } }
.rs-hpill {
  margin: 0 0 28px;
  padding: 6px 16px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rs-amber);
  background: rgba(244, 124, 32, .14);
  border: 1px solid rgba(244, 124, 32, .28);
  border-radius: 999px;
}
.rs-res-title {
  margin: 0 0 18px;
  font-size: clamp(34px, 6vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.05em;
  font-weight: bold;
}
.rs-tagline {
  margin: 0 0 16px;
  font-size: clamp(18px, 2.6vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--rs-text);
}
.rs-lede {
  margin: 0 0 28px;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: rgba(245, 245, 245, .55);
}
.rs-works { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-bottom: 40px; }
.rs-works-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 245, 245, .4); margin-right: 4px; }
.rs-chip {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  transition: border-color .2s;
}
.rs-chip:hover { border-color: rgba(244, 124, 32, .45); }
.rs-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(245, 245, 245, .45);
  text-decoration: none;
}
.rs-cue svg { width: 18px; height: 18px; color: var(--rs-orange); animation: rs-bob 1.8s ease-in-out infinite; }
@keyframes rs-bob { 50% { transform: translateY(6px); } }

/* Sections: centred heading, narrow reading column. */
.rs-prose { max-width: 1024px; margin: 0 auto; }
.rs-sec { padding: 56px 0; text-align: center; }
.rs-sec h2 {
  margin: 0 auto 14px;
  max-width: 720px;
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.04em;
}
.rs-sec > p {
  margin: 0 auto 14px;
  max-width: 640px;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: -0.02em;
  color: rgba(245, 245, 245, .62);
}
.rs-sec code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; color: var(--rs-gold); letter-spacing: 0; }
.rs-sec a { color: var(--rs-orange); }
.rs-blk { margin: 28px auto 0; text-align: left; }
.rs-blk ol, .rs-blk ul { list-style: none; margin: 0; padding: 0; }

/* Numbered cards (the four layers, what's inside). */
.rs-blk-cards ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; counter-reset: rs; }
.rs-blk-cards li,
.rs-blk-steps li {
  position: relative;
  padding: 28px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: rgba(245, 245, 245, .6);
  counter-increment: rs;
  transition: box-shadow .3s, border-color .3s, transform .3s;
}
.rs-blk-cards li:hover,
.rs-blk-steps li:hover {
  box-shadow: 0 0 28px rgba(244, 124, 32, .12), 0 0 0 1px rgba(244, 124, 32, .2);
  transform: translateY(-2px);
}
.rs-blk-cards li::before,
.rs-blk-steps li::before {
  content: counter(rs, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(244, 124, 32, .35);
}
.rs-blk-cards strong,
.rs-blk-steps strong { display: block; margin-bottom: 6px; font-size: 17px; color: var(--rs-text); }
.rs-blk-steps ol { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; counter-reset: rs; }
@media (max-width: 860px) { .rs-blk-steps ol { grid-auto-flow: row; grid-template-columns: 1fr; } }

/* Stats that count up. */
.rs-blk-stats ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.rs-blk-stats li {
  flex: 1 1 180px;
  max-width: 300px;
  padding: 28px 20px;
  text-align: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(245, 245, 245, .5);
}
.rs-blk-stats strong {
  display: block;
  margin-bottom: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--rs-orange);
}
.rs-blk-links { text-align: center; }
.rs-blk-links a {
  display: inline-flex;
  gap: 6px;
  font-size: 14px;
  color: rgba(245, 245, 245, .6);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 124, 32, .4);
  padding-bottom: 2px;
  transition: color .2s;
}
.rs-blk-links a:hover { color: var(--rs-orange); }

/* The prompt: title bar, full text, big copy button. */
.rs-copy {
  margin: 28px auto 20px;
  max-width: 820px;
  text-align: left;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-left: 2px solid var(--rs-orange);
  background: #0d0d0d;
}
.rs-copy-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 10px 20px;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.rs-copy-label { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: 0; color: rgba(245, 245, 245, .45); }
.rs-copy-btn {
  padding: 4px 12px;
  font: inherit;
  font-size: 12px;
  color: var(--rs-text);
  background: rgba(255, 255, 255, .08);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
}
.rs-copy-btn:hover { background: rgba(255, 255, 255, .14); }
.rs-copy pre {
  margin: 0;
  padding: 20px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0;
  font-weight: normal;
  white-space: pre-wrap;
  word-break: break-word;
  color: rgba(245, 245, 245, .85);
}
.rs-copy-big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 40px);
  margin: 0 20px 20px;
  padding: 16px 40px;
  font: inherit;
  font-size: 16px;
  letter-spacing: -0.03em;
  color: #fff;
  background: var(--rs-orange);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(244, 124, 32, .25);
  transition: background .2s, box-shadow .2s, transform .2s;
}
.rs-copy-big:hover {
  background: #e06a10;
  box-shadow: 0 0 32px rgba(244, 124, 32, .45), 0 0 60px rgba(244, 124, 32, .2);
  transform: translateY(-1px);
}
.rs-copy-done { display: none; }
.rs-copy.is-copied .rs-copy-idle { display: none; }
.rs-copy.is-copied .rs-copy-done { display: inline; }
.rs-copy.is-copied .rs-copy-big { background: #1f8f4e; box-shadow: 0 0 32px rgba(34, 197, 94, .35); }

.rs-table { max-width: 820px; margin: 28px auto 0; overflow-x: auto; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .08); }
.rs-table table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
.rs-table th { padding: 14px 20px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(245, 245, 245, .45); background: rgba(255, 255, 255, .03); }
.rs-table td { padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, .06); color: rgba(245, 245, 245, .65); line-height: 1.5; }
.rs-table tr:hover td { background: rgba(244, 124, 32, .04); }
.rs-code { max-width: 820px; margin: 20px auto; padding: 20px; border-radius: 12px; background: #0d0d0d; overflow-x: auto; text-align: left; }

/* The upsell band. */
.rs-band {
  margin: 56px auto;
  max-width: 1024px;
  padding: 56px 32px;
  text-align: center;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(244, 124, 32, .12), rgba(255, 198, 109, .06));
  border: 1px solid rgba(244, 124, 32, .22);
  box-shadow: 0 0 80px rgba(244, 124, 32, .08) inset;
}
.rs-band h2 { margin: 0 auto 12px; max-width: 640px; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; letter-spacing: -0.04em; }
.rs-band p:not(.rs-eyebrow) { margin: 0 auto 28px; max-width: 520px; font-size: 17px; line-height: 1.6; letter-spacing: -0.02em; color: rgba(245, 245, 245, .65); }
.rs-btn { gap: 8px; padding: 14px 28px; font-size: 16px; }
.rs-btn svg { width: 16px; height: 16px; }

.rs-ps { margin: 24px auto 0; max-width: 560px; text-align: center; font-size: 14px; font-style: italic; color: rgba(245, 245, 245, .3); }
.rs-more {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 8px;
  margin: 28px auto 0;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, .4);
  text-decoration: none;
  transition: color .2s;
}
.rs-more svg { width: 14px; height: 14px; }
.rs-more:hover { color: var(--rs-orange); }

.rs-body .site-footer { position: relative; }
.rs-body .site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 124, 32, .45) 40%, rgba(255, 198, 109, .3) 70%, transparent);
}
.rs-body .socials { display: flex; gap: 16px; }
.rs-body .socials a { color: rgba(245, 245, 245, .6); text-decoration: none; }
.rs-body .socials a:hover { color: var(--rs-orange); }

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  .rs-hub { padding: 112px 16px 72px; }
  .rs-sub { font-size: 16px; }
  .rs-tabs { padding-left: 0; gap: 2px; }
  .rs-tab { flex: 1; padding: 10px 6px; font-size: 12px; text-align: center; }
  .rs-row { gap: 14px; padding: 16px; }
  .rs-row-arrow { display: none; }
  .rs-res { padding: 0 16px 48px; }
  .rs-res-hero { padding: 100px 0 48px; }
  .rs-blk-cards ol { grid-template-columns: 1fr; }
  .rs-sec { padding: 40px 0; }
  .rs-band { padding: 40px 20px; margin: 40px auto; }
  .rs-copy pre { font-size: 13px; padding: 16px; }
  .rs-copy-big { width: calc(100% - 32px); margin: 0 16px 16px; padding: 14px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-body::before, .rs-body::after, .rs-wrap::before, .rs-wrap::after, .rs-grad, .rs-cue svg { animation: none; }
  .rs-js .reveal, .rs-js .rs-in { opacity: 1; transform: none; animation: none; transition: none; }
  .rs-js .rs-panel .rs-row.rs-enter { animation: none; }
}

/* Cards, steps and stats cascade in once their section is on screen. */
.rs-js .rs-sec .rs-blk li { opacity: 0; }
.rs-js .rs-sec.is-in .rs-blk li { animation: rs-card-in .5s var(--rs-ease) both; }
@keyframes rs-card-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.rs-js .rs-sec.is-in .rs-blk li:nth-child(2) { animation-delay: .1s; }
.rs-js .rs-sec.is-in .rs-blk li:nth-child(3) { animation-delay: .2s; }
.rs-js .rs-sec.is-in .rs-blk li:nth-child(4) { animation-delay: .3s; }
.rs-js .rs-sec.is-in .rs-blk li:nth-child(5) { animation-delay: .4s; }
.rs-js .rs-sec.is-in .rs-blk li:nth-child(6) { animation-delay: .5s; }
@media (prefers-reduced-motion: reduce) { .rs-js .rs-sec .rs-blk li { opacity: 1; animation: none !important; } }

.rs-body .rs-band a.rs-btn { color: #fff; }
.rs-body .rs-copy code { color: inherit; font-size: inherit; }
@media (max-width: 640px) {
  .rs-blk-stats ul { flex-wrap: nowrap; gap: 8px; }
  .rs-blk-stats li { flex: 1 1 0; min-width: 0; padding: 18px 8px; font-size: 11px; }
  .rs-blk-stats strong { font-size: 24px; }
}
@media (max-width: 640px) {
  .rs-copy-btn { padding: 9px 16px; }
  .rs-blk-links a, .rs-more { padding: 12px 4px; }
}

/* Footer always sits at the bottom, even when a page is shorter than the screen. */
.rs-body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.rs-body > main { flex: 1 0 auto; width: 100%; }
.rs-body > .site-footer { flex-shrink: 0; }
.rs-body > main { overflow: clip; }

/* ---------- Hero height and the video slot ---------- */
.rs-res-hero { min-height: 82vh; min-height: 82svh; }
.rs-res.has-video .rs-res-hero { min-height: 0; padding-bottom: 40px; }
.rs-video {
  width: 100%;
  max-width: 820px;
  margin: 8px auto 36px;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(244, 124, 32, .3);
  box-shadow: 0 0 60px rgba(244, 124, 32, .18), 0 30px 80px rgba(0, 0, 0, .5);
  background: #000;
}
.rs-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Visual blocks (components.mjs) ---------- */
.rs-viz { margin: 36px auto 0; }
.rs-viz strong { color: var(--rs-text); }
.rs-viz code { font-size: .9em; }

/* Flow: nodes joined by links with a travelling pulse. */
.rs-flow { display: flex; align-items: stretch; justify-content: center; gap: 0; }
.rs-flow-node {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 18px;
  border-radius: 16px;
  text-align: left;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.rs-flow-node:hover { border-color: rgba(244, 124, 32, .4); box-shadow: 0 0 28px rgba(244, 124, 32, .14); transform: translateY(-2px); }
.rs-flow-icon, .rs-hub-icon, .rs-check-icon, .rs-report-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--rs-orange);
  background: rgba(244, 124, 32, .12);
  border: 1px solid rgba(244, 124, 32, .3);
}
.rs-flow-icon svg, .rs-hub-icon svg, .rs-check-icon svg, .rs-report-icon svg { width: 20px; height: 20px; }
.rs-flow-step { position: absolute; top: 18px; right: 16px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: 0; color: rgba(244, 124, 32, .45); }
.rs-flow-node strong { font-size: 15px; letter-spacing: -0.02em; }
.rs-flow-text { font-size: 13px; line-height: 1.5; color: rgba(245, 245, 245, .5); letter-spacing: -0.01em; }
.rs-flow-link { position: relative; flex: 0 0 28px; align-self: center; height: 2px; background: rgba(244, 124, 32, .25); }
.rs-flow-link span {
  position: absolute;
  top: -3px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rs-orange);
  box-shadow: 0 0 10px var(--rs-orange);
  animation: rs-pulse-x 2.4s linear calc(var(--i) * .45s) infinite;
}
@keyframes rs-pulse-x { 0% { left: -4px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 4px); opacity: 0; } }

/* Hub: a core with satellites and flowing spokes. */
.rs-hubmap { position: relative; width: min(620px, 100%); aspect-ratio: 1; margin: 0 auto; }
.rs-hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rs-hub-ring { fill: none; stroke: rgba(244, 124, 32, .12); stroke-width: .3; stroke-dasharray: 1 1.4; }
.rs-hub-lines line { stroke: rgba(244, 124, 32, .45); stroke-width: .35; stroke-dasharray: 1.4 1.2; animation: rs-dash 1.6s linear infinite; }
.rs-hub-lines circle:not(.rs-hub-ring) { fill: #FFC66D; filter: drop-shadow(0 0 1px #F47C20); }
@keyframes rs-dash { to { stroke-dashoffset: -2.6; } }
.rs-hub-core, .rs-hub-sat {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.rs-hub-core {
  left: 50%;
  top: 50%;
  width: 34%;
  aspect-ratio: 1;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 124, 32, .22), rgba(10, 10, 10, .92) 70%);
  border: 1px solid rgba(244, 124, 32, .5);
  box-shadow: 0 0 60px rgba(244, 124, 32, .3);
  animation: rs-breathe 4s ease-in-out infinite;
}
@keyframes rs-breathe { 50% { box-shadow: 0 0 90px rgba(244, 124, 32, .45); } }
.rs-hub-core .rs-hub-icon { width: 48px; height: 48px; border-radius: 50%; }
.rs-hub-core strong { font-size: 17px; }
.rs-hub-core span:not(.rs-hub-icon), .rs-hub-sat span:not(.rs-hub-icon) { font-size: 12px; line-height: 1.35; color: rgba(245, 245, 245, .5); max-width: 150px; }
.rs-hub-sat {
  width: 26%;
  padding: 14px 10px;
  border-radius: 16px;
  background: rgba(14, 14, 16, .92);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: border-color .3s, box-shadow .3s;
}
.rs-hub-sat:hover { border-color: rgba(244, 124, 32, .45); box-shadow: 0 0 24px rgba(244, 124, 32, .18); }
.rs-hub-sat strong { font-size: 14px; letter-spacing: -0.02em; }

/* Trend: the line draws itself when the section comes into view. */
.rs-trend { max-width: 820px; margin: 0 auto; padding: 24px 24px 20px; border-radius: 20px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); }
.rs-trend svg { width: 100%; height: auto; display: block; overflow: visible; }
.rs-trend-axis { stroke: rgba(255, 255, 255, .12); stroke-width: 1; }
.rs-trend-axis-label { fill: rgba(245, 245, 245, .3); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.rs-trend-fill { fill: url(#rs-tf); opacity: 0; transition: opacity 1s ease 1.2s; }
.rs-trend-line { fill: none; stroke: url(#rs-tg); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.65, 0, .35, 1); }
.rs-trend-mark { opacity: 0; transition: opacity .5s ease; }
.rs-trend-mark line { stroke-width: 1.5; stroke-dasharray: 4 4; }
.rs-trend-early line { stroke: rgba(244, 124, 32, .7); }
.rs-trend-early circle { fill: #F47C20; }
.rs-trend-late line { stroke: rgba(245, 245, 245, .3); }
.rs-trend-late circle { fill: rgba(245, 245, 245, .5); }
.rs-trend-ping { fill: none !important; stroke: #F47C20; stroke-width: 2; transform-origin: 250px 140px; animation: rs-ping 1.8s ease-out infinite; }
@keyframes rs-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.rs-sec.is-in .rs-trend-line, .rs-sec .rs-trend-line.is-drawn { stroke-dashoffset: 0; }
.rs-sec.is-in .rs-trend-fill { opacity: 1; }
.rs-sec.is-in .rs-trend-early { opacity: 1; transition-delay: .9s; }
.rs-sec.is-in .rs-trend-late { opacity: 1; transition-delay: 1.5s; }
.rs-trend-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; text-align: left; }
.rs-trend-key { display: flex; gap: 12px; align-items: flex-start; }
.rs-trend-key > span { flex: 0 0 12px; height: 12px; margin-top: 4px; border-radius: 50%; }
.rs-key-early > span { background: #F47C20; box-shadow: 0 0 12px #F47C20; }
.rs-key-late > span { background: rgba(245, 245, 245, .45); }
.rs-trend-key strong { font-size: 15px; }
.rs-trend-key p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: rgba(245, 245, 245, .5); }

/* Compare: without vs with. */
.rs-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 900px; margin: 0 auto; text-align: left; }
.rs-compare-col { padding: 26px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); }
.rs-compare-col.is-good { border-color: rgba(244, 124, 32, .35); background: linear-gradient(160deg, rgba(244, 124, 32, .1), rgba(255, 255, 255, .02)); box-shadow: 0 0 50px rgba(244, 124, 32, .08); }
.rs-compare-head { margin: 0 0 16px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(245, 245, 245, .45); }
.is-good .rs-compare-head { color: var(--rs-orange); }
.rs-compare ul, .rs-check, .rs-report ul { list-style: none; margin: 0; padding: 0; }
.rs-compare li { display: flex; gap: 12px; padding: 10px 0; font-size: 14px; line-height: 1.5; color: rgba(245, 245, 245, .55); border-top: 1px solid rgba(255, 255, 255, .05); }
.rs-compare li:first-child { border-top: 0; }
.rs-compare-mark { flex: 0 0 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; }
.is-bad .rs-compare-mark { color: rgba(245, 245, 245, .5); background: rgba(255, 255, 255, .06); }
.is-good .rs-compare-mark { color: #0a0a0a; background: var(--rs-orange); }

/* Checklist chips. */
.rs-check { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; max-width: 900px; margin: 0 auto; text-align: left; }
.rs-check li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); }
.rs-check li > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.rs-check strong { font-size: 15px; }
.rs-check li > span:last-child > span { font-size: 13px; line-height: 1.5; color: rgba(245, 245, 245, .5); }

/* Sample report card, like a message landing in Slack. */
.rs-report { max-width: 720px; margin: 0 auto; text-align: left; border-radius: 20px; overflow: hidden; background: #111113; border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(244, 124, 32, .08); }
.rs-report-bar { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .03); }
.rs-report-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 10px #22c55e; }
.rs-report-bar strong { font-size: 15px; }
.rs-report-meta { margin-left: auto; font-size: 12px; color: rgba(245, 245, 245, .4); }
.rs-report li { display: flex; gap: 14px; padding: 16px 20px; border-top: 1px solid rgba(255, 255, 255, .05); }
.rs-report li:first-child { border-top: 0; }
.rs-report li > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.rs-report li strong { font-size: 14px; }
.rs-report li > span:last-child > span { font-size: 13px; line-height: 1.5; color: rgba(245, 245, 245, .55); }
.rs-report-icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; }
.rs-report-icon svg { width: 17px; height: 17px; }
.rs-report-note { margin: 0; padding: 10px 20px 14px; font-size: 11px; font-style: italic; color: rgba(245, 245, 245, .3); }

/* Visual blocks cascade in with their section. */
.rs-js .rs-sec .rs-flow-node, .rs-js .rs-sec .rs-hub-sat, .rs-js .rs-sec .rs-compare-col { opacity: 0; }
.rs-js .rs-sec.is-in .rs-flow-node, .rs-js .rs-sec.is-in .rs-compare-col { animation: rs-card-in .5s var(--rs-ease) calc(var(--i, 0) * .12s) both; }
.rs-js .rs-sec.is-in .rs-compare-col.is-good { animation-delay: .15s; }
.rs-js .rs-sec.is-in .rs-hub-sat { animation: rs-sat-in .55s var(--rs-ease) calc(.2s + var(--i) * .12s) both; }
@keyframes rs-sat-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

@media (max-width: 860px) {
  .rs-flow { flex-direction: column; align-items: stretch; max-width: 420px; margin: 0 auto; }
  .rs-flow-link { flex: 0 0 24px; width: 2px; height: 24px; align-self: center; }
  .rs-flow-link span { left: -3px; animation-name: rs-pulse-y; }
  @keyframes rs-pulse-y { 0% { top: -4px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 4px); opacity: 0; } }
}
@media (max-width: 640px) {
  .rs-compare, .rs-trend-keys { grid-template-columns: 1fr; }
  .rs-trend { padding: 16px 12px; }
  .rs-hubmap { width: 100%; }
  .rs-hub-core { width: 38%; }
  .rs-hub-core .rs-hub-icon { width: 34px; height: 34px; }
  .rs-hub-core strong { font-size: 13px; }
  .rs-hub-core span:not(.rs-hub-icon), .rs-hub-sat span:not(.rs-hub-icon) { display: none; }
  .rs-hub-sat { width: 30%; padding: 8px 6px; border-radius: 12px; }
  .rs-hub-sat strong { font-size: 11px; }
  .rs-hub-sat .rs-hub-icon { width: 30px; height: 30px; border-radius: 9px; }
  .rs-hub-sat .rs-hub-icon svg { width: 16px; height: 16px; }
  .rs-report-meta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-flow-link span, .rs-hub-lines line, .rs-hub-core, .rs-trend-ping { animation: none; }
  .rs-hub-lines circle:not(.rs-hub-ring) { display: none; }
  .rs-js .rs-sec .rs-flow-node, .rs-js .rs-sec .rs-hub-sat, .rs-js .rs-sec .rs-compare-col { opacity: 1; animation: none !important; }
  .rs-trend-line { stroke-dashoffset: 0; transition: none; }
  .rs-trend-fill, .rs-trend-mark { opacity: 1; transition: none; }
}

.rs-pill-n8n-template { color: #F5F5F5; background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); }

/* Long prompts scroll inside their box instead of stretching the page. */
.rs-copy pre { max-height: 420px; overflow-y: auto; }
.rs-copy pre::-webkit-scrollbar { width: 5px; }
.rs-copy pre::-webkit-scrollbar-thumb { background: rgba(244, 124, 32, .4); border-radius: 5px; }

/* A grid of prompt cards: short preview, Copy grabs the whole prompt. */
.rs-blk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1024px; }
.rs-blk-grid .rs-copy { margin: 0; max-width: none; display: flex; flex-direction: column; transition: border-color .3s, box-shadow .3s, transform .3s; }
.rs-blk-grid .rs-copy:hover { border-color: rgba(244, 124, 32, .35); box-shadow: 0 0 28px rgba(244, 124, 32, .12); transform: translateY(-2px); }
.rs-blk-grid .rs-copy pre {
  max-height: 168px;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.65;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}
.rs-blk-grid .rs-copy-label { color: var(--rs-text); font-family: 'Figtree', sans-serif; font-size: 14px; letter-spacing: -0.02em; }
.rs-blk-grid .rs-copy.is-copied { border-color: rgba(34, 197, 94, .5); }
.rs-blk-grid .rs-copy.is-copied .rs-copy-btn { background: #1f8f4e; }
@media (max-width: 760px) { .rs-blk-grid { grid-template-columns: 1fr; } }
.rs-copy pre:focus-visible { outline: 2px solid var(--rs-orange); outline-offset: -2px; }

/* Phones: the tab row swipes sideways instead of squeezing labels onto two lines. */
@media (max-width: 640px) {
  .rs-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .rs-tabs::-webkit-scrollbar { display: none; }
  .rs-tab { flex: 0 0 auto; padding: 10px 14px; font-size: 13px; white-space: nowrap; }
}

/* Product catalog (/products) */
.pd-pill { color: #FFB25E; background: rgba(244, 124, 32, .12); border-color: rgba(244, 124, 32, .3); }
.pd-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.pd-actions .rs-btn { margin: 0; }
.pd-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18); color: #fff; text-decoration: none; font-weight: bold;
  letter-spacing: -0.02em; transition: border-color .15s, background .15s;
}
.pd-btn-ghost:hover { border-color: rgba(244, 124, 32, .6); background: rgba(244, 124, 32, .08); }
.pd-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-top: 22px; font-size: 14.5px; color: rgba(245, 245, 245, .6); letter-spacing: -0.01em; }
.pd-fact strong { color: #fff; }
.pd-video {
  margin: 44px auto 0; max-width: 980px; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1); background: #0d0d0d;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 0 60px rgba(244, 124, 32, .12);
}
.pd-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pd .rs-works { margin-top: 28px; }
.pd-price h2 { max-width: 720px; }
.pd-related { max-width: 1024px; margin: 24px auto 0; }
.pd-related > .rs-eyebrow { text-align: center; margin-bottom: 16px; }
@media (max-width: 640px) {
  .pd-actions { flex-direction: column; align-items: stretch; }
  .pd-actions .rs-btn, .pd-btn-ghost { justify-content: center; }
  .pd-video { border-radius: 12px; margin-top: 32px; }
}

/* The store (/products): AI systems as cards, setup + monthly pricing */
.st { max-width: 1168px; margin: 0 auto; padding: 128px 24px 96px; }
.st-hero { max-width: 880px; margin: 0 auto; padding: 24px 0 8px; text-align: center; }
.st-title { margin: 14px 0 18px; font-size: clamp(44px, 7vw, 84px); line-height: 1; letter-spacing: -0.05em; }
.st .rs-sub { max-width: 640px; margin: 0 auto; }
.st-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin: 26px 0 28px; font-size: 15px; color: rgba(245, 245, 245, .6); }
.st-facts strong { color: #fff; }
.st-hero .rs-btn { display: inline-flex; }

.st-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1024px; margin: 0 auto; text-align: left; }
.st-step { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); }
.st-step-n { font-size: 12px; letter-spacing: .14em; color: #F47C20; font-weight: bold; }
.st-step strong { font-size: 18px; letter-spacing: -0.03em; }
.st-step > span:last-child { font-size: 14.5px; line-height: 1.55; color: rgba(245, 245, 245, .6); }

.st-shelf { max-width: 1120px; margin: 64px auto 0; scroll-margin-top: 90px; }
.st-tabs { justify-content: center; margin-bottom: 26px; }
.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.st-card {
  display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; text-decoration: none; color: inherit;
  background: #121212; border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .25s var(--rs-ease), border-color .25s, box-shadow .25s;
}
.st-card:hover { transform: translateY(-6px); border-color: rgba(244, 124, 32, .55); box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 40px rgba(244, 124, 32, .14); }
.st-card-art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0d0d0d; }
.st-card-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; transition: transform .5s var(--rs-ease); }
.st-card-art::after { content: ''; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(to top, #121212, transparent); }
.st-card:hover .st-card-art img { transform: scale(1.06); }
.st-badge {
  position: absolute; top: 14px; left: 14px; z-index: 1; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: bold;
  letter-spacing: .02em; color: #FFB25E; background: rgba(13, 13, 13, .72); border: 1px solid rgba(244, 124, 32, .4); backdrop-filter: blur(8px);
}
.st-card-body { display: flex; flex-direction: column; gap: 8px; padding: 4px 22px 22px; flex: 1; }
.st-card-role { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #F47C20; font-weight: bold; }
.st-card-name { font-size: 26px; font-weight: bold; letter-spacing: -0.04em; color: #fff; line-height: 1.1; }
.st-card-name em { font-style: normal; font-size: 15px; font-weight: 500; letter-spacing: -0.02em; color: rgba(245, 245, 245, .5); }
.st-card-job { font-size: 14.5px; line-height: 1.55; color: rgba(245, 245, 245, .66); }
.st-card-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.st-card-tools span { font-size: 12px; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); color: rgba(245, 245, 245, .75); }
.st-price { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 13.5px; color: rgba(245, 245, 245, .55); }
.st-price strong { color: #fff; font-size: 16px; }
.st-card-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: bold; font-size: 14.5px; color: #F47C20; }
.st-card-cta svg { width: 16px; height: 16px; transition: transform .2s; }
.st-card:hover .st-card-cta svg { transform: translateX(4px); }

.st-section { max-width: 1024px; margin: 96px auto 0; text-align: center; }
.st-section h2 { margin: 10px auto 30px; font-size: clamp(28px, 4vw, 42px); line-height: 1.1; letter-spacing: -0.04em; max-width: 720px; }
.st-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; max-width: 860px; margin: 0 auto; text-align: left; }
.st-plan { position: relative; display: flex; flex-direction: column; padding: 30px; border-radius: 22px; background: #121212; border: 1px solid rgba(255, 255, 255, .09); }
.st-plan.is-rent { border-color: rgba(244, 124, 32, .55); background: linear-gradient(180deg, rgba(244, 124, 32, .10), #121212 55%); box-shadow: 0 0 50px rgba(244, 124, 32, .10); }
.st-plan-flag { position: absolute; top: -12px; right: 24px; padding: 5px 12px; border-radius: 999px; background: #F47C20; color: #0d0d0d; font-size: 12px; font-weight: bold; }
.st-plan-name { margin: 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #F47C20; font-weight: bold; }
.st-plan-price { margin: 10px 0 6px; font-size: 44px; font-weight: bold; letter-spacing: -0.05em; color: #fff; line-height: 1; }
.st-plan-price small { font-size: 18px; color: rgba(245, 245, 245, .55); letter-spacing: -0.02em; }
.st-plan-note { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: rgba(245, 245, 245, .66); }
.st-plan ul { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.st-plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: rgba(245, 245, 245, .85); }
.st-plan li svg { width: 18px; height: 18px; flex-shrink: 0; color: #F47C20; margin-top: 1px; }
.st-plan .rs-btn { margin-top: auto; justify-content: center; }

.st-faq { max-width: 760px; text-align: left; }
.st-faq .rs-eyebrow, .st-faq h2 { text-align: center; }
.st-faq details { border-bottom: 1px solid rgba(255, 255, 255, .08); padding: 18px 4px; }
.st-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font-weight: bold; font-size: 17px; letter-spacing: -0.02em; color: #fff; }
.st-faq summary::-webkit-details-marker { display: none; }
.st-faq summary::after { content: '+'; color: #F47C20; font-size: 22px; line-height: 1; transition: transform .2s; }
.st-faq details[open] summary::after { transform: rotate(45deg); }
.st-faq details p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; color: rgba(245, 245, 245, .66); }

/* Product page: the system face above the headline */
.pd-avatar { width: 148px; height: 148px; margin: 0 auto 20px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(244, 124, 32, .6); box-shadow: 0 0 60px rgba(244, 124, 32, .35), 0 0 0 8px rgba(244, 124, 32, .06); }
.pd-avatar img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transform-origin: 50% 35%; display: block; }
.pd-pricing, .pd-related { max-width: 1120px; }
.pd-related .st-grid { text-align: left; }

@media (max-width: 968px) {
  .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .st { padding: 104px 16px 72px; }
  .st-grid, .st-steps { grid-template-columns: 1fr; }
  .st-shelf, .st-section { margin-top: 64px; }
  .st-tabs { justify-content: flex-start; overflow-x: auto; }
  .st-plan { padding: 26px 22px; }
  .pd-avatar { width: 116px; height: 116px; }
}

/* Store v3: filter bar, reviews, setup + monthly pricing */
.st-filters { max-width: 1024px; margin: 0 auto 8px; }
.st-count { text-align: center; margin: 18px 0 22px; }
.st-card[hidden] { display: none; }
.st-empty { text-align: center; padding: 48px 0; color: rgba(245, 245, 245, .66); }
.st-empty p { margin: 0 0 18px; font-size: 17px; }
.st-reviews { margin: 56px -24px 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.st-reviews-track { display: flex; gap: 16px; width: max-content; animation: st-marquee 70s linear infinite; }
.st-reviews:hover .st-reviews-track { animation-play-state: paused; }
@keyframes st-marquee { to { transform: translateX(-50%); } }
.st-review { flex: 0 0 340px; margin: 0; padding: 20px 22px; border-radius: 18px; background: #121212; border: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; gap: 12px; }
.st-review-stars { color: #F47C20; letter-spacing: 2px; font-size: 14px; }
.st-review blockquote { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(245, 245, 245, .82); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.st-review figcaption { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.st-review figcaption img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.st-review figcaption span { display: flex; flex-direction: column; font-size: 12.5px; color: rgba(245, 245, 245, .55); }
.st-review figcaption b { font-size: 14px; color: #fff; }
.st-plans { align-items: stretch; grid-template-columns: 1fr auto 1fr; }
.st-plus { align-self: center; font-size: 34px; font-weight: bold; color: #F47C20; }
.st-plan-cta { margin-top: 26px; display: flex; justify-content: center; }
@media (max-width: 640px) {
  .st-reviews { margin: 40px -16px 0; }
  .st-review { flex-basis: 280px; }
  .st-plans { grid-template-columns: 1fr; }
  .st-plus { justify-self: center; }
}
@media (prefers-reduced-motion: reduce) { .st-reviews-track { animation: none; } .st-reviews { overflow-x: auto; } }

/* Store v5: tool logos, emoji tags, the finder */
.st-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.st-card-tags span { font-size: 12px; font-weight: bold; padding: 4px 9px; border-radius: 999px; color: #FFB25E; background: rgba(244, 124, 32, .08); border: 1px solid rgba(244, 124, 32, .22); }
.st-card-tools { gap: 6px; }
.st-tool { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 9px; border-radius: 7px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); color: rgba(245, 245, 245, .75); }
.st-tool-more { color: rgba(245, 245, 245, .5); }
.st-card:hover .st-tool { border-color: rgba(255, 255, 255, .14); color: #fff; }
.pd-tool { display: inline-flex; align-items: center; gap: 7px; }
.st-shelf-head { text-align: center; margin-bottom: 26px; }
.st-shelf-head h2 { margin: 8px 0 0; font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.04em; }

.fd { max-width: 920px; margin: 80px auto 0; scroll-margin-top: 90px; }
.fd-head { text-align: center; margin-bottom: 26px; }
.fd-head h2 { margin: 8px auto 10px; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -0.045em; max-width: 680px; }
.fd-head p:last-child { margin: 0 auto; max-width: 560px; font-size: 16.5px; line-height: 1.55; color: rgba(245, 245, 245, .66); }
.fd-card { position: relative; padding: 30px 32px 32px; border-radius: 26px; background: linear-gradient(180deg, rgba(244, 124, 32, .07), #121212 45%); border: 1px solid rgba(244, 124, 32, .35); box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 60px rgba(244, 124, 32, .08); }
.fd-progress { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.fd-progress span { display: block; height: 100%; width: 25%; background: linear-gradient(90deg, #e8680f, #F47C20, #ff8f3a); transition: width .35s var(--rs-ease); }
.fd-count { margin: 14px 0 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 245, 245, .5); font-weight: bold; }
.fd-count b { color: #F47C20; }
.fd-q { margin: 14px 0 4px; font-size: clamp(22px, 3vw, 28px); font-weight: bold; letter-spacing: -0.035em; color: #fff; }
.fd-hint { margin: 0 0 18px; font-size: 14.5px; color: rgba(245, 245, 245, .55); }
.fd-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.fd .fd-chip { font-size: 14.5px; padding: 11px 16px; }
.fd .fd-chip .chip-emoji { margin-right: 7px; }
.fd-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
.fd-back, .fd-restart { background: none; border: 0; color: rgba(245, 245, 245, .55); font: inherit; font-weight: bold; cursor: pointer; padding: 8px 0; }
.fd-back:hover, .fd-restart:hover { color: #fff; }
.fd-next[disabled] { opacity: .4; pointer-events: none; }
.fd-best { margin-top: 14px; }
.fd-best .st-card { flex-direction: row; }
.fd-best .st-card-art { flex: 0 0 42%; aspect-ratio: auto; }
.fd-best .st-card-art::after { display: none; }
.fd-best .st-card-body { padding: 24px 26px; }
.fd-best .st-card-name { font-size: 32px; }
.st-card.is-best { border-color: rgba(244, 124, 32, .7); box-shadow: 0 0 50px rgba(244, 124, 32, .18); }
.fd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.fd-actions .rs-btn { margin: 0; }
.fd-also-label { margin: 30px 0 12px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #F47C20; font-weight: bold; }
.fd-also { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fd-restart { margin-top: 18px; }
.fd-none { font-size: 16px; color: rgba(245, 245, 245, .7); }
@media (max-width: 640px) {
  .fd { margin-top: 56px; }
  .fd-card { padding: 22px 18px 24px; border-radius: 20px; }
  .fd .fd-chip { font-size: 13.5px; padding: 9px 13px; }
  .fd-best .st-card { flex-direction: column; }
  .fd-best .st-card-art { aspect-ratio: 4 / 3; }
  .fd-also { grid-template-columns: 1fr; }
  .fd-actions { flex-direction: column; align-items: stretch; }
  .fd-actions .btn { justify-content: center; }
}

.fd-route { margin: 14px 0 0; padding: 12px 16px; border-radius: 12px; font-size: 14.5px; line-height: 1.5; color: #FFB25E; background: rgba(244, 124, 32, .08); border: 1px solid rgba(244, 124, 32, .25); }
button.pd-btn-ghost { background: transparent; font-family: inherit; font-size: 16px; cursor: pointer; }
.fd-also .st-card { flex-direction: row; }
.fd-also .st-card-art { flex: 0 0 34%; aspect-ratio: auto; }
.fd-also .st-card-art::after, .fd-also .st-badge, .fd-also .st-card-tools, .fd-also .st-card-job { display: none; }
.fd-also .st-card-body { padding: 18px 18px 16px; }
.fd-also .st-card-name { font-size: 22px; }
.fd-also .st-price { padding-top: 10px; }
@media (max-width: 640px) { .fd-also .st-card-art { flex-basis: 38%; } }

/* White label for agencies */
.st-wl-body { max-width: 640px; margin: -14px auto 28px; font-size: 16.5px; line-height: 1.6; color: rgba(245, 245, 245, .66); }
.st-wl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; text-align: left; }
.st-wl-pt { padding: 20px; border-radius: 16px; background: #121212; border: 1px solid rgba(255, 255, 255, .08); }
.st-wl-pt span { font-size: 24px; }
.st-wl-pt strong { display: block; margin: 10px 0 6px; font-size: 16px; letter-spacing: -0.02em; }
.st-wl-pt p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(245, 245, 245, .62); }
.fd-agency { margin: 14px 0 0; font-size: 14.5px; line-height: 1.5; color: rgba(245, 245, 245, .8); }
.fd-agency a { color: #F47C20; font-weight: bold; }
@media (max-width: 968px) { .st-wl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .st-wl-grid { grid-template-columns: 1fr; } }

/* Store v6: category accents, real tool logos, best-for row. Each "What it
   does" category owns a color so the grid reads by job at a glance. */
.st-card { --acc: 244, 124, 32; border-top: 2px solid rgba(var(--acc), .55); }
.st-card[data-accent="content"] { --acc: 232, 121, 249; }
.st-card[data-accent="ops"] { --acc: 56, 189, 248; }
.st-card[data-accent="money"] { --acc: 52, 211, 153; }
.st-card:hover { border-color: rgba(var(--acc), .6); box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 44px rgba(var(--acc), .18); }
.st-card-art { background: radial-gradient(70% 80% at 50% 45%, rgba(var(--acc), .28), transparent 70%), #0d0d0d; }
.st-card-art img { mix-blend-mode: lighten; }
.st-card-role { color: rgb(var(--acc)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-card-type { font-size: 11px; letter-spacing: .04em; text-transform: none; font-weight: 600; color: rgba(245, 245, 245, .55); }
.st-ribbon { position: absolute; top: 14px; right: 14px; z-index: 2; font-size: 12px; font-weight: bold; padding: 5px 10px; border-radius: 999px; color: #fff; background: rgba(var(--acc), .22); border: 1px solid rgba(var(--acc), .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.st-card-row { display: flex; flex-direction: column; gap: 6px; }
.st-row-label { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: bold; color: rgba(245, 245, 245, .38); }
.st-card-for { display: flex; flex-wrap: wrap; gap: 6px; }
.st-card-for span { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; color: rgba(245, 245, 245, .85); background: rgba(var(--acc), .08); border: 1px solid rgba(var(--acc), .22); }
.st-card-tools .st-tool { gap: 7px; padding: 4px 10px 4px 4px; font-size: 12.5px; border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); color: rgba(245, 245, 245, .88); }
.st-card-tools .st-tool-more { padding: 4px 10px; }
.st-logo { width: 22px; height: 22px; border-radius: 6px; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.st-logo img { width: 16px; height: 16px; object-fit: contain; display: block; }
.st-logo i { font-style: normal; font-size: 11px; font-weight: bold; color: #0d0d0d; }
.pd-tool { gap: 8px; }
.fd-also .st-card-row, .fd-also .st-ribbon { display: none; }