/* ==========================================================================
   Paperus Spotlight layer
   Additive presentation styles for the Spotlight homepage enhancements,
   publishing page, blog and editorial typography. Loaded after paperus.css.
   No existing selectors are redefined destructively; overrides are scoped.
   ========================================================================== */

:root {
  --sp-editorial: "Cormorant Garamond", "Cormorant", "Instrument Serif", Georgia, "Times New Roman", serif;
  --sp-editorial-ar: "Amiri", "Scheherazade New", "Noto Naskh Arabic", "Traditional Arabic", "Geeza Pro", serif;
  --sp-blue-glow: rgba(22, 51, 255, 0.16);
}

/* --------------------------------------------------------------------------
   1. Editorial typography refinement
   Campaign headlines, Spotlight headings and blog headings prefer the
   refined editorial serif stack; the locally hosted Instrument Serif remains
   the guaranteed fallback so no external font dependency is introduced.
   -------------------------------------------------------------------------- */
.hero .display-title,
.cta-section h2,
.sp-editorial-heading,
.sp-article-body h2,
.sp-card h3 {
  font-family: var(--sp-editorial);
}
.sp-editorial-heading { font-weight: 400; letter-spacing: -0.025em; }

html[lang="ar"] .hero .display-title,
html[lang="ar"] .cta-section h2,
html[lang="ar"] .sp-editorial-heading,
html[lang="ar"] .sp-article-body h2,
html[lang="ar"] .sp-card h3 {
  font-family: var(--sp-editorial-ar);
  letter-spacing: 0;
}

/* Arabic script must never be letter-spaced or uppercased: spacing breaks
   character joining. These neutralise latin-oriented tracking in RTL mode. */
html[lang="ar"] .eyebrow,
html[lang="ar"] .button,
html[lang="ar"] .text-link,
html[lang="ar"] .beta-strip strong,
html[lang="ar"] .listing-tag,
html[lang="ar"] .footer-main h3,
html[lang="ar"] .form-field,
html[lang="ar"] .sp-tag,
html[lang="ar"] .sp-article-meta {
  letter-spacing: 0;
  text-transform: none;
}
html[lang="ar"] .display-title,
html[lang="ar"] .section-heading h2,
html[lang="ar"] .page-hero h1 {
  letter-spacing: 0;
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   2. Hero word-by-word reveal
   paperus-spotlight.js wraps headline words in masked spans (English only,
   never for Arabic). Original line-level arrival animation is disabled only
   while the split is active. Fallback: plain static headline.
   -------------------------------------------------------------------------- */
.sp-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.sp-wi { display: inline-block; will-change: transform, opacity; }
/* The base stylesheet sets .hero h1 span/em to display:block for the two
   headline lines; word masks inside them must stay inline. */
.hero h1 span.sp-w, .hero h1 span.sp-wi { display: inline-block; }
html.sp-motion .sp-split .sp-wi {
  animation: sp-word-up 0.82s cubic-bezier(0.16, 0.72, 0.16, 1) both;
  animation-delay: var(--sp-d, 0ms);
}
@keyframes sp-word-up {
  from { opacity: 0; transform: translateY(0.78em); filter: blur(7px); }
  55% { filter: blur(0); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
html.motion-ready .hero .display-title.sp-split.is-visible span,
html.motion-ready .hero .display-title.sp-split.is-visible em {
  animation: none;
}
html.motion-ready .hero .reveal-item.display-title.sp-split:not(.is-visible) {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   3. Aurora hero background
   Three soft electric-blue fields drifting slowly behind the hero content.
   Transform-only animation, gentle blur, low opacity: clean, not glittery.
   Pointer response is applied through --sp-ax / --sp-ay custom properties.
   -------------------------------------------------------------------------- */
.sp-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.sp-aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.62;
  will-change: transform;
  transform: translate3d(calc(var(--sp-ax, 0) * var(--sp-shift, 20px)), calc(var(--sp-ay, 0) * var(--sp-shift, 20px)), 0);
}
.sp-aurora .sp-a1 {
  width: 58vw; height: 58vw; min-width: 480px; min-height: 480px;
  left: -14vw; top: -28vw;
  --sp-shift: 32px;
  background: radial-gradient(circle at 50% 50%, rgba(22, 51, 255, 0.22), rgba(22, 51, 255, 0) 66%);
}
.sp-aurora .sp-a2 {
  width: 50vw; height: 50vw; min-width: 420px; min-height: 420px;
  right: -15vw; top: -12vw;
  --sp-shift: -42px;
  background: radial-gradient(circle at 50% 50%, rgba(141, 154, 255, 0.30), rgba(141, 154, 255, 0) 64%);
}
.sp-aurora .sp-a3 {
  width: 44vw; height: 44vw; min-width: 360px; min-height: 360px;
  left: 26vw; bottom: -28vw;
  --sp-shift: 22px;
  background: radial-gradient(circle at 50% 50%, rgba(90, 116, 255, 0.18), rgba(120, 140, 255, 0) 62%);
}
html.sp-motion .sp-aurora .sp-a1 { animation: sp-drift-a 28s ease-in-out infinite alternate; }
html.sp-motion .sp-aurora .sp-a2 { animation: sp-drift-b 34s ease-in-out infinite alternate; }
html.sp-motion .sp-aurora .sp-a3 { animation: sp-drift-c 40s ease-in-out infinite alternate; }
@keyframes sp-drift-a {
  from { translate: 0 0; scale: 1; opacity: 0.52; }
  50% { opacity: 0.72; }
  to { translate: 8vw 5vh; scale: 1.12; opacity: 0.6; }
}
@keyframes sp-drift-b {
  from { translate: 0 0; scale: 1.06; opacity: 0.66; }
  50% { opacity: 0.5; }
  to { translate: -7vw 7vh; scale: 0.94; opacity: 0.68; }
}
@keyframes sp-drift-c {
  from { translate: 0 0; scale: 1; opacity: 0.5; }
  50% { opacity: 0.66; }
  to { translate: 6vw -6vh; scale: 1.12; opacity: 0.55; }
}
@media (max-width: 820px) {
  .sp-aurora i { filter: blur(46px); }
  .sp-aurora .sp-a3 { display: none; }
}
html.sp-eco .sp-aurora i { animation: none !important; transform: none; opacity: 0.34; }

/* --------------------------------------------------------------------------
   5. Scroll-drawn icons
   paperus-spotlight.js measures each stroke and animates dash offset once
   when the icon enters the viewport. Without JS or with reduced motion the
   icons simply render normally.
   -------------------------------------------------------------------------- */
.sp-drawing svg :is(path, circle, rect, line, polyline, polygon) {
  transition: stroke-dashoffset 0.85s cubic-bezier(0.3, 0.6, 0.2, 1);
}

/* --------------------------------------------------------------------------
   6. Brand film parallax
   Transform-only vertical drift applied by JS while the figure is in view.
   -------------------------------------------------------------------------- */
html.sp-motion .brand-film.sp-parallax { will-change: transform; }

/* --------------------------------------------------------------------------
   7. Page transition veil
   Fast electric-blue sweep on internal navigation. Pointer events stay
   disabled so focus is never trapped; JS always completes navigation.
   -------------------------------------------------------------------------- */
.sp-veil {
  position: fixed;
  inset: 0;
  z-index: 220;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-104%);
  background:
    linear-gradient(100deg,
      rgba(9, 13, 28, 0) 0%,
      rgba(22, 51, 255, 0.92) 18%,
      var(--blue) 46%,
      var(--blue-dark) 72%,
      rgba(9, 13, 28, 0.97) 100%);
}
.sp-veil::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 8%;
  width: 20%;
  transform: skewX(-14deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}
html.sp-motion .sp-veil.sp-veil-on {
  visibility: visible;
  animation: sp-veil-in 0.46s cubic-bezier(0.45, 0, 0.2, 1) both;
}
@keyframes sp-veil-in {
  from { transform: translateX(-104%); }
  to { transform: translateX(0); }
}
html[dir="rtl"] .sp-veil { transform: translateX(104%); }
html[dir="rtl"].sp-motion .sp-veil.sp-veil-on { animation-name: sp-veil-in-rtl; }
@keyframes sp-veil-in-rtl {
  from { transform: translateX(104%); }
  to { transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   8. Navigation additions
   The two new links collapse to short labels on narrower desktop widths and
   hide from the top bar on compact widths (they remain in the mobile menu,
   footer and in-page links). Existing items are never hidden.
   -------------------------------------------------------------------------- */
.main-nav a { white-space: nowrap; }
.sp-nav-short { display: none; }
@media (max-width: 1479px) {
  .main-nav { gap: 20px; }
  .main-nav .sp-nav-full { display: none; }
  .main-nav .sp-nav-short { display: inline; }
}
@media (max-width: 1129px) {
  .main-nav a.sp-nav-add { display: none; }
}

/* --------------------------------------------------------------------------
   9. Shared Spotlight content helpers
   -------------------------------------------------------------------------- */
.hero-promise { transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; }
.hero-promise:hover {
  border-color: rgba(22, 51, 255, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(22, 51, 255, 0.12);
}

/* Five-category layout: keep the bordered grid perfectly balanced.
   Count-aware selectors only engage when exactly five cards render, so any
   future category count falls back to the original three-column grid. */
@media (min-width: 1081px) {
  .category-grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); }
  .category-grid:has(> :nth-child(5):last-child) > .category-card { grid-column: span 2; }
  .category-grid:has(> :nth-child(5):last-child) > .category-card:nth-child(4),
  .category-grid:has(> :nth-child(5):last-child) > .category-card:nth-child(5) { grid-column: span 3; }
}
@media (min-width: 561px) and (max-width: 1080px) {
  .category-card:nth-child(5):last-child { grid-column: 1 / -1; }
}

.sp-section-sub { max-width: 520px; margin-top: 14px; color: var(--slate); font-size: 14px; line-height: 1.7; }

/* Featured-brand rail on the browse page (visible for Audio & Sound only) */
.sp-brand-banner {
  margin-top: 26px;
  padding: 24px 28px 26px;
  border: 1px solid rgba(22, 51, 255, 0.22);
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(520px circle at 92% -40%, rgba(89, 111, 255, 0.55), transparent 60%),
    var(--night);
}
.sp-brand-banner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}
.sp-brand-banner h2 { margin-top: 9px; font-family: var(--sp-editorial); font-size: clamp(24px, 2.6vw, 33px); font-weight: 400; }
html[lang="ar"] .sp-brand-banner h2 { font-family: var(--sp-editorial-ar); }
.sp-brand-banner p:not(.eyebrow) { margin-top: 7px; color: #aab1c8; font-size: 12.5px; max-width: 560px; }
.sp-brand-banner .eyebrow { color: #8d9aff; }
.sp-brand-banner .button { flex: none; }
.sp-brand-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.sp-brand-tile {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.sp-brand-tile:hover { border-color: rgba(141, 154, 255, 0.55); background: rgba(255, 255, 255, 0.08); transform: translateY(-3px); }
.sp-brand-tile-art { flex: 0 0 168px; background: #000; display: grid; align-items: center; }
.sp-brand-tile-art img { width: 100%; height: 100%; object-fit: cover; }
.sp-brand-tile-art-empty { background: linear-gradient(150deg, rgba(141, 154, 255, 0.16), rgba(22, 51, 255, 0.1)); }
.sp-brand-tile-body { display: grid; align-content: center; gap: 4px; padding: 16px 18px; min-width: 0; }
.sp-brand-tile-body strong { font-family: var(--sp-editorial); font-size: 22px; font-weight: 400; }
html[lang="ar"] .sp-brand-tile-body strong { font-family: var(--sp-editorial-ar); }
.sp-brand-tile-body > span { color: #9aa2bd; font-size: 11px; }
.sp-brand-tile-body em {
  margin-top: 6px;
  font-style: normal;
  color: #9ca7ff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html[lang="ar"] .sp-brand-tile-body em { letter-spacing: 0; }
.sp-brand-tile-body em i { font-style: normal; }
@media (max-width: 820px) {
  .sp-brand-banner-head { flex-direction: column; align-items: flex-start; }
  .sp-brand-tiles { grid-template-columns: 1fr; }
  .sp-brand-tile-art { flex-basis: 132px; }
}
.sp-links-row { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 6px; }
.sp-mt { display: inline-block; margin-top: 16px; }
.sp-kicker-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 8px 14px;
  border: 1px solid rgba(22, 51, 255, 0.18);
  border-radius: 100px;
  color: var(--blue);
  background: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   10. Publishing information page
   Reuses the existing design system (page-hero, how-grid, values-list,
   cta-section) with a small set of page-specific helpers.
   -------------------------------------------------------------------------- */
.sp-publish-intro { padding: 74px 0 58px; }
.sp-chip-grid { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink);
  background: #fff;
  font-size: 12px;
  font-weight: 550;
  transition: border-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.sp-chip svg { width: 16px; color: var(--blue); }
.sp-chip:hover {
  color: var(--blue);
  border-color: rgba(22, 51, 255, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(22, 51, 255, 0.12);
}
.sp-step-number {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  font-size: 13px;
  font-weight: 600;
}
.sp-note-panel {
  margin-top: 26px;
  padding: 22px 24px;
  border: 1px solid rgba(22, 51, 255, 0.16);
  border-radius: 16px;
  background: var(--blue-soft);
}
.sp-note-panel h3 { font-family: var(--serif); font-size: 22px; font-weight: 400; }
html[lang="ar"] .sp-note-panel h3 { font-family: var(--sp-editorial-ar); }
.sp-note-panel p { margin-top: 7px; color: var(--slate); font-size: 12px; line-height: 1.7; }
.sp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px) { .sp-two-col { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   11. Blog styles (shared across the blog index and every article)
   -------------------------------------------------------------------------- */
.sp-blog-head { padding: 70px 0 48px; border-bottom: 1px solid var(--line); background: #fff; }
.sp-blog-head h1 { max-width: 800px; margin-top: 12px; font-size: clamp(42px, 5.4vw, 72px); font-weight: 400; line-height: 1.02; letter-spacing: -0.025em; }
.sp-blog-head h1 em { color: var(--blue); font-style: italic; }
.sp-blog-head > .shell > p { max-width: 640px; margin-top: 14px; color: var(--slate); font-size: 15px; line-height: 1.75; }
.sp-featured {
  display: grid;
  grid-template-columns: 1.25fr 0.9fr;
  gap: 40px;
  align-items: center;
  margin: 46px 0 14px;
  padding: 40px;
  border: 1px solid rgba(22, 51, 255, 0.2);
  border-radius: var(--radius);
  color: #fff;
  background:
    radial-gradient(720px circle at 88% -20%, rgba(89, 111, 255, 0.5), transparent 55%),
    var(--night);
}
.sp-featured h2 { margin-top: 14px; font-family: var(--sp-editorial); font-size: clamp(30px, 3.4vw, 46px); font-weight: 400; line-height: 1.06; }
html[lang="ar"] .sp-featured h2 { font-family: var(--sp-editorial-ar); }
.sp-featured p { margin-top: 12px; color: #aab1c8; font-size: 13px; line-height: 1.75; max-width: 560px; }
.sp-featured .button { margin-top: 22px; }
.sp-featured-side { display: grid; gap: 10px; }
.sp-featured-side a {
  padding: 15px 17px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 550;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.sp-featured-side a:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(141, 154, 255, 0.5); transform: translateY(-2px); }
.sp-featured-side span { display: block; margin-top: 4px; color: #8d95ac; font-size: 10px; font-weight: 400; }

.sp-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-top: 34px; }
.sp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
}
.sp-card:hover { transform: translateY(-5px); border-color: rgba(22, 51, 255, 0.25); box-shadow: 0 20px 48px rgba(10, 14, 30, 0.1); }
.sp-card h3 { margin: 14px 0 9px; font-size: 24px; font-weight: 500; line-height: 1.14; }
.sp-card h3 a::after { content: ""; position: absolute; inset: 0; }
.sp-card p { color: var(--slate); font-size: 12.5px; line-height: 1.7; }
.sp-card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.sp-tag {
  align-self: flex-start;
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 100px;
  color: var(--blue);
  background: var(--blue-soft);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Our Story journal: an editorial bridge from brand belief to practical
   expertise. It uses the existing Paperus card language, with a quieter
   gallery atmosphere and more generous reading rhythm. */
.sp-story-journal {
  border-top: 1px solid rgba(22, 51, 255, 0.08);
  border-bottom: 1px solid rgba(22, 51, 255, 0.1);
  background:
    radial-gradient(720px circle at 88% 4%, rgba(111, 130, 255, 0.13), transparent 58%),
    linear-gradient(180deg, #fbfcff, #f6f8ff);
}
.sp-story-journal .sp-card { min-height: 275px; padding: 30px; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sp-story-journal .sp-card h3 { font-size: clamp(25px, 2.2vw, 31px); }
.sp-story-journal .sp-card p { font-size: 13px; }
@media (max-width: 700px) { .sp-story-journal .sp-card { min-height: 0; padding: 24px; } }

.sp-article-head { padding: 58px 0 40px; border-bottom: 1px solid var(--line); background: #fff; }
.sp-article-head h1 { max-width: 880px; margin: 16px 0 14px; font-size: clamp(37px, 4.6vw, 60px); font-weight: 400; line-height: 1.04; letter-spacing: -0.02em; }
.sp-article-lede { max-width: 700px; color: var(--slate); font-size: 16px; line-height: 1.75; }
.sp-article-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; color: var(--muted); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.sp-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; padding: 52px 0 90px; }
.sp-article-body { max-width: 720px; }
.sp-article-body h2 { margin: 40px 0 14px; font-size: clamp(27px, 3vw, 36px); font-weight: 400; line-height: 1.12; }
.sp-article-body h3 { margin: 26px 0 9px; font-size: 16px; font-weight: 600; }
.sp-article-body p { margin: 13px 0; color: #3c4257; font-size: 14.5px; line-height: 1.85; }
.sp-article-body ul, .sp-article-body ol { margin: 14px 0 18px; padding-left: 22px; color: #3c4257; font-size: 14px; line-height: 1.8; }
.sp-article-body li { margin: 7px 0; }
.sp-article-body li::marker { color: var(--blue); }
.sp-article-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
html[dir="rtl"] .sp-article-body ul, html[dir="rtl"] .sp-article-body ol { padding-left: 0; padding-right: 22px; }
.sp-takeaways {
  margin: 26px 0;
  padding: 24px 26px;
  border: 1px solid rgba(22, 51, 255, 0.18);
  border-radius: 16px;
  background: linear-gradient(150deg, #fff, var(--blue-soft));
}
.sp-takeaways h2, .sp-takeaways h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 23px; font-weight: 400; }
.sp-takeaways ul { margin-bottom: 2px; }
.sp-article-side { align-self: start; position: sticky; top: 104px; display: grid; gap: 14px; }
.sp-side-card { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.sp-side-card h2 { font-family: var(--serif); font-size: 23px; font-weight: 400; }
html[lang="ar"] .sp-side-card h2 { font-family: var(--sp-editorial-ar); }
.sp-side-card p { margin-top: 7px; color: var(--slate); font-size: 11px; line-height: 1.65; }
.sp-side-card .button { width: 100%; margin-top: 14px; }
.sp-side-card nav { display: grid; gap: 2px; margin-top: 10px; }
.sp-side-card nav a { padding: 9px 10px; border-radius: 8px; color: var(--slate); font-size: 11.5px; transition: color 0.2s, background 0.2s; }
.sp-side-card nav a:hover { color: var(--ink); background: var(--surface); }
.sp-article-cta {
  margin-top: 44px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  border-radius: 18px;
  color: #fff;
  background: var(--blue);
}
.sp-article-cta h2 { margin: 6px 0 4px; font-family: var(--sp-editorial); font-size: clamp(24px, 2.6vw, 34px); font-weight: 400; line-height: 1.1; }
html[lang="ar"] .sp-article-cta h2 { font-family: var(--sp-editorial-ar); }
.sp-article-cta p { color: #d8dcff; font-size: 12px; }
.sp-article-cta .eyebrow { color: #c3c9ff; }
.sp-article-cta .button { flex: none; }
.sp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--slate); font-size: 10px; }
.sp-crumbs a:hover { color: var(--blue); }
.sp-crumbs span[aria-hidden] { color: #a4a8b7; }

@media (max-width: 1080px) {
  .sp-card-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-article-layout { grid-template-columns: 1fr; gap: 30px; }
  .sp-article-side { position: static; }
}
@media (max-width: 820px) {
  .sp-featured { grid-template-columns: 1fr; padding: 28px; gap: 26px; }
  .sp-blog-head { padding: 54px 0 40px; }
}
@media (max-width: 560px) {
  .sp-card-grid { grid-template-columns: 1fr; }
  .sp-article-cta { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   12. Motion safety net
   The base stylesheet already collapses animation durations under
   prefers-reduced-motion; these rules additionally neutralise Spotlight
   effects for reduced-motion and data-saver (html.sp-eco) sessions.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sp-aurora i, .sp-veil, .sp-wi { animation: none !important; }
  .sp-wi { transform: none !important; opacity: 1 !important; }
}
html.sp-eco .sp-veil { display: none; }

/* --------------------------------------------------------------------------
   Sitewide interaction layer: section reveals and magnetic buttons. The
   reading-progress bar is the site's own shell element ([data-scroll-progress]).
   Every piece is added by JavaScript only when motion is allowed, so no-JS
   and reduced-motion sessions render instantly and statically.
   -------------------------------------------------------------------------- */
html.sp-motion .sp-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1); }
html.sp-motion .sp-reveal-flat { opacity: 0; transition: opacity 0.75s ease; }
html.sp-motion .sp-reveal.sp-rin, html.sp-motion .sp-reveal-flat.sp-rin { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.sp-motion .sp-reveal, html.sp-motion .sp-reveal-flat { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Two front doors: buyer and seller journeys
   The html element carries aud-buyer or aud-seller; chrome tagged with
   data-aud shows only for its audience. Without JavaScript neither class is
   present and everything stays visible.
   -------------------------------------------------------------------------- */
html.aud-buyer [data-aud="seller"] { display: none !important; }
html.aud-seller [data-aud="buyer"] { display: none !important; }

.aud-switch {
  display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
}
.aud-switch button {
  padding: 6px 11px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 10px; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-soft, #5a6180); background: transparent;
  transition: color 0.25s, background 0.25s;
}
html[lang="ar"] .aud-switch button { letter-spacing: 0; text-transform: none; }
.aud-switch button[aria-pressed="true"] { color: #fff; background: var(--night, #0b0e1c); }
.aud-switch-mobile { margin-bottom: 6px; width: fit-content; }
/* The seller journey carries two extra nav items: keep every header piece on
   one line and let the nav tighten instead of wrapping. */
.main-nav a, .header-actions .quiet-link, .header-actions .button-small, .header-actions .user-chip { white-space: nowrap; }
html.aud-seller .main-nav { gap: clamp(10px, 1.2vw, 22px); }
html.aud-seller .header-actions { gap: clamp(8px, 0.9vw, 16px); }
@media (max-width: 1180px) { .header-actions .aud-switch { display: none; } }

.sp-path-section { padding: 34px 0 10px; }
.sp-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sp-path {
  display: block; padding: 26px 28px; border-radius: 20px;
  border: 1px solid var(--line); background: #fff; color: inherit;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.4s, box-shadow 0.45s;
}
.sp-path:hover { transform: translateY(-4px); border-color: rgba(22, 51, 255, 0.4); box-shadow: 0 18px 44px rgba(10, 16, 60, 0.1); }
.sp-path h3 { margin-top: 10px; font-family: var(--sp-editorial); font-weight: 400; font-size: clamp(22px, 2.2vw, 30px); }
html[lang="ar"] .sp-path h3 { font-family: var(--sp-editorial-ar); }
.sp-path p:not(.eyebrow) { margin-top: 8px; color: var(--ink-soft, #5a6180); font-size: 13px; line-height: 1.7; max-width: 46ch; }
.sp-path-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; color: #1633ff; font-size: 12px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; }
html[lang="ar"] .sp-path-cta { letter-spacing: 0; text-transform: none; }
.sp-path-cta i { font-style: normal; transition: transform 0.3s; }
.sp-path:hover .sp-path-cta i { transform: translateX(4px); }
html[dir="rtl"] .sp-path:hover .sp-path-cta i { transform: translateX(-4px); }
.sp-path-sell { background: linear-gradient(150deg, #0b0e1c, #101a44); border-color: rgba(141, 154, 255, 0.3); color: #fff; }
.sp-path-sell p:not(.eyebrow) { color: #aeb5d2; }
.sp-path-sell .sp-path-cta { color: #8d9aff; }
@media (max-width: 820px) { .sp-paths { grid-template-columns: 1fr; } .sp-path-section { padding-top: 26px; } }

/* --------------------------------------------------------------------------
   Vertical rhythm trims: the hero band above the ribbon and the run from the
   path chooser into the category grid carried more air than they earned.
   -------------------------------------------------------------------------- */
body[data-page="home"] .hero { padding-bottom: 54px; }
.sp-path-section { padding: 30px 0 0; }
.sp-path-section + .category-section { padding-top: 70px; }

/* --------------------------------------------------------------------------
   Mode gate and mode notes: the polite walls between the two journeys.
   -------------------------------------------------------------------------- */
.sp-mode-gate { display: grid; place-items: center; padding: 40px 0 66px; }
.sp-mode-gate-card {
  max-width: 660px; padding: 44px 46px; text-align: center;
  border: 1px solid var(--line); border-radius: 24px;
  background: linear-gradient(170deg, #ffffff, #f4f6ff);
  box-shadow: 0 26px 60px rgba(10, 16, 60, 0.09);
}
.sp-mode-gate-card h1 { margin-top: 12px; font-family: var(--sp-editorial); font-weight: 400; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; }
html[lang="ar"] .sp-mode-gate-card h1 { font-family: var(--sp-editorial-ar); line-height: 1.3; }
.sp-mode-gate-card > p { margin-top: 14px; color: var(--ink-soft, #5a6180); font-size: 14px; line-height: 1.8; }
.sp-mode-gate-card .hero-actions { justify-content: center; margin-top: 26px; }
@media (max-width: 560px) { .sp-mode-gate-card { padding: 30px 22px; } }

.sp-mode-note {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 18px 0 4px; padding: 14px 18px;
  border: 1px dashed rgba(22, 51, 255, 0.4); border-radius: 14px; background: #f4f6ff;
}
.sp-mode-note p { color: var(--ink-soft, #444b6e); font-size: 12.5px; line-height: 1.6; }
.sp-mode-note strong { color: var(--night, #0b0e1c); }
.sp-mode-note-compact { margin: 0; padding: 13px 15px; }
.seller-panel .sp-mode-note-compact { flex-direction: column; align-items: stretch; text-align: start; }

/* --------------------------------------------------------------------------
   Account forms, refined: numbered groups, aligned rows, integrated password
   tools. The base .form-* rules stay; this layer organises them.
   -------------------------------------------------------------------------- */
.sp-signup { display: grid; gap: 22px; }
.sp-form-group { margin: 0; padding: 20px 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: #fbfcff; }
.sp-form-group legend {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 8px; margin-left: -4px;
  color: var(--night, #0b0e1c); font-size: 11px; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase;
}
html[lang="ar"] .sp-form-group legend { letter-spacing: 0; text-transform: none; margin-left: 0; margin-right: -4px; }
.sp-form-group legend i {
  display: grid; place-items: center; width: 20px; height: 20px; font-style: normal; font-size: 10px;
  color: #fff; background: var(--blue, #1633ff); border-radius: 50%;
}
.sp-form-group .form-grid { gap: 14px 16px; }

.sp-pw-wrap { position: relative; display: block; }
.sp-pw-wrap input { padding-right: 46px; }
html[dir="rtl"] .sp-pw-wrap input { padding-right: 13px; padding-left: 46px; }
.sp-pw-toggle {
  position: absolute; top: 50%; right: 7px; transform: translateY(-50%);
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: 9px; cursor: pointer;
  color: #5a6180; background: transparent; transition: color 0.2s, background 0.2s;
}
html[dir="rtl"] .sp-pw-toggle { right: auto; left: 7px; }
.sp-pw-toggle:hover { color: var(--night, #0b0e1c); background: #eef1ff; }
.sp-pw-toggle svg { width: 19px; height: 19px; }
.sp-pw-toggle[aria-pressed="true"] { color: var(--blue, #1633ff); background: #eef1ff; }

.password-meter { display: flex; gap: 5px; height: 5px; margin-top: 2px; }
.password-meter span,
.password-meter::before,
.password-meter::after {
  content: ""; display: block; flex: 1; height: 5px; border-radius: 4px; background: #e4e7f2;
  transition: background 0.3s;
}
.password-meter.medium span, .password-meter.medium::before { background: #e9a13b; }
.password-meter.strong span, .password-meter.strong::before, .password-meter.strong::after { background: #1e9e6a; }
.sp-pw-strength { transition: color 0.3s; }
.sp-pw-strength.medium { color: #a06514 !important; }
.sp-pw-strength.strong { color: #17734e !important; }
.sp-pw-match:empty { display: none; }
.sp-pw-match.ok { color: #17734e !important; }
.sp-pw-match.no { color: #a3213f !important; }

.sp-form-check { align-items: center; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 11px; }
.sp-form-check input { width: 17px; height: 17px; margin-top: 0; flex: 0 0 auto; }
.form-error:not(:empty) { padding: 12px 15px; border: 1px solid rgba(190, 37, 65, 0.35); border-radius: 12px; background: #fdf1f4; }

@media (max-width: 700px) {
  .sp-form-group { padding: 16px 14px 18px; }
  .sp-form-group .form-grid { grid-template-columns: 1fr; }
}
/* Neutralise the base progress-bar meter widths: this layer renders three
   equal segments instead. */
.password-meter span, .password-meter.medium span, .password-meter.strong span { width: auto; }

.auth-card > [data-aud] { margin-bottom: 4px; }
html.aud-buyer .sp-signup .form-field:has(> input[name="username"]) { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   Compact vertical rhythm, sitewide: the same content in less scroll.
   -------------------------------------------------------------------------- */
.section { padding: 72px 0; }
.cta-section { padding: 68px 0; }
.page-hero { padding: 52px 0 40px; }
.section-heading { margin-bottom: 34px; }
@media (max-width: 700px) { .section { padding: 56px 0; } }

.br-section { padding: 72px 0; }
.br-section-head { margin-bottom: 34px; }
.br-guide { gap: 24px; }
.br-guide-chapter { padding: 24px; gap: 26px; }
.br-hero { padding: 64px 0 70px; }
.br-crumbs { margin-bottom: 26px; }
@media (max-width: 820px) { .br-section { padding: 56px 0; } }

/* --------------------------------------------------------------------------
   Account pages, balanced: a narrower, vertically-centred story column and
   a two-column form that fits a laptop screen without scrolling twice.
   -------------------------------------------------------------------------- */
.auth-shell { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }
.auth-story { justify-content: center; gap: 40px; padding: 56px max(40px, 4.5vw); }
.auth-story h1 { font-size: clamp(38px, 4vw, 58px); }
.auth-benefits { grid-template-columns: 1fr; gap: 10px; margin-top: 0; }
.auth-benefits div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 16px; }
.auth-benefits strong { font-size: 17px; }
.auth-benefits span { font-size: 10px; text-align: end; }
.auth-form-side { padding: 44px max(34px, 4vw); }
.auth-card { width: min(720px, 100%); }
.auth-card h2 { font-size: 36px; }
.sp-signup { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sp-signup > .sp-form-group:nth-of-type(3),
.sp-signup > .sp-form-check,
.sp-signup > .form-error,
.sp-signup > button { grid-column: 1 / -1; }
.sp-form-group { padding: 16px 16px 18px; }
.sp-form-group .form-grid { gap: 11px 14px; }
.sp-signup .form-field input, .sp-signup .form-field select { min-height: 45px; padding: 10px 12px; }
.sp-signup > .sp-form-group:nth-of-type(3) .form-field.full { grid-column: auto; }
.auth-switch { margin-top: 14px; }
@media (max-width: 1080px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-story { min-height: 0; gap: 24px; padding: 44px max(28px, 5vw); }
}
@media (max-width: 760px) {
  .sp-signup { grid-template-columns: 1fr; }
  .sp-signup > .sp-form-group:nth-of-type(3) .form-field.full { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Back to top: long reads earn a one-click return. Smooth for those who
   allow motion, instant otherwise.
   -------------------------------------------------------------------------- */
.sp-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 240;
  display: grid; place-items: center; width: 46px; height: 46px;
  border: 1px solid rgba(22, 51, 255, 0.35); border-radius: 50%;
  color: #1633ff; background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px rgba(10, 16, 60, 0.16);
  cursor: pointer; opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.35s, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.25s;
}
html[dir="rtl"] .sp-top { right: auto; left: 22px; }
.sp-top.sp-top-on { opacity: 1; transform: none; pointer-events: auto; }
.sp-top:hover { background: #1633ff; color: #fff; }
.sp-top svg { width: 19px; height: 19px; }

/* --------------------------------------------------------------------------
   Revision 18a. Homepage paper canvas.
   The electric-blue aurora is retired from the main page. In its place: a
   quiet dot lattice with a soft ink wash - texture without a spotlight.
   -------------------------------------------------------------------------- */
.sp-heropaper {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(rgba(10, 14, 30, 0.05) 1px, transparent 1.45px),
    radial-gradient(115% 72% at 50% -10%, rgba(10, 14, 30, 0.05), transparent 62%);
  background-size: 26px 26px, auto;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 97%);
}

/* --------------------------------------------------------------------------
   Revision 18b. Interface scale.
   The site read small at desktop sizes - a uniform upscale plus targeted
   bumps for the smallest text tiers. Viewport-height sections compensate so
   the first fold still lands exactly at the fold.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  body { zoom: 1.08; }
  .hero, .auth-shell { min-height: calc(92.6vh - 122px); }
}
.eyebrow { font-size: 11px; }
.hero-promise { font-size: 11px; }
.beta-strip { font-size: 11.5px; }
.beta-strip strong { font-size: 9.5px; }
.beta-badge { font-size: 9px; }
.user-chip { font-size: 12px; }

/* --------------------------------------------------------------------------
   Revision 18c. Header rhythm.
   The seller journey squeezed every header item into one tight string.
   Larger nav type, honest gaps, a separated centre pill and earlier
   short-label switching give each zone room to breathe.
   -------------------------------------------------------------------------- */
.site-header { height: 84px; }
.site-header.is-condensed { height: 70px; }
.main-nav { gap: 30px; margin-left: 54px; }
.main-nav a { font-size: 14px; }
.main-nav a.active::after { height: 2px; bottom: -14px; border-radius: 2px; }
.header-actions { gap: 12px; }
.header-actions .quiet-link { font-size: 13px; }
.header-actions .aud-switch { margin-inline: 10px; }
.aud-switch button { font-size: 10.5px; padding: 7px 13px; }
.wordmark-wrap, .brand-logo { flex-shrink: 0; }
html.aud-seller .main-nav { gap: clamp(16px, 1.5vw, 26px); margin-left: clamp(34px, 3vw, 48px); }
html.aud-seller .header-actions { gap: clamp(10px, 1vw, 14px); }
html[dir="rtl"].aud-seller .main-nav { margin-left: 0; margin-right: clamp(34px, 3vw, 48px); }
@media (max-width: 1719px) {
  html.aud-seller .main-nav .sp-nav-full { display: none; }
  html.aud-seller .main-nav .sp-nav-short { display: inline; }
}
/* The interface upscale narrows layout capacity relative to physical
   breakpoints: the seller row sheds its centre pill, then the extra links,
   a step earlier than the buyer row needs to. */
@media (max-width: 1320px) {
  .header-actions .aud-switch { display: none; }
}
@media (max-width: 1220px) {
  html.aud-seller .main-nav a.sp-nav-add { display: none; }
}
@media (max-width: 1400px) {
  .main-nav { gap: 26px; }
}
@media (max-width: 1120px) {
  .main-nav { gap: 18px; margin-left: 34px; }
  .header-actions .quiet-link[data-aud="buyer"] { display: none; }
}
/* Compact widths keep the original tighter header metrics. */
@media (max-width: 1023px) {
  .site-header { height: 78px; }
  .site-header.is-condensed { height: 66px; }
  .header-actions { gap: 10px; }
}

/* Nav hover: an underline that draws in, mirroring correctly in RTL. */
.main-nav a::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 2px;
  border-radius: 2px; background: var(--ink, #0b0e1c);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.main-nav a:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
.main-nav a.active::before { display: none; }
html[dir="rtl"] .main-nav a::before { transform-origin: 0 50%; }
html[dir="rtl"] .main-nav a:hover::before { transform-origin: 100% 50%; }

/* --------------------------------------------------------------------------
   Revision 18d. Motion pack.
   Longer, softer curves everywhere; transform-and-opacity only.
   -------------------------------------------------------------------------- */
html.sp-motion .sp-reveal { transition-duration: 0.9s; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
.button { transition: background 0.3s, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s; }
.button:active { transform: translateY(0) scale(0.97); }
.listing-card { transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.5s; }
.listing-card:hover { border-color: rgba(22, 51, 255, 0.28); }
.listing-photo img { transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1); }
html.sp-motion .listing-card:hover .listing-photo img { transform: scale(1.05); }
.category-card img { transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1); }
html.sp-motion .category-card:hover img { transform: scale(1.05); }
.search-composer { transition: box-shadow 0.4s, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s; }
.search-composer:focus-within { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(22, 51, 255, 0.13); }
.site-footer a { background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px; transition: background-size 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.site-footer a:hover { background-size: 100% 1px; background-position: 0 100%; }

/* Browse repaints cascade in instead of popping. First paint keeps the
   native reveal; this fires on filter, sort and late-data refreshes. */
@keyframes sp-riseup { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
html.sp-motion .sp-cascade > .listing-card { animation: sp-riseup 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
html.sp-motion .sp-cascade > .listing-card:nth-child(2) { animation-delay: 0.05s; }
html.sp-motion .sp-cascade > .listing-card:nth-child(3) { animation-delay: 0.1s; }
html.sp-motion .sp-cascade > .listing-card:nth-child(4) { animation-delay: 0.15s; }
html.sp-motion .sp-cascade > .listing-card:nth-child(5) { animation-delay: 0.2s; }
html.sp-motion .sp-cascade > .listing-card:nth-child(6) { animation-delay: 0.25s; }
html.sp-motion .sp-cascade > .listing-card:nth-child(7) { animation-delay: 0.3s; }
html.sp-motion .sp-cascade > .listing-card:nth-child(8) { animation-delay: 0.35s; }
html.sp-motion .sp-cascade > .listing-card:nth-child(n + 9) { animation-delay: 0.4s; }

/* --------------------------------------------------------------------------
   Revision 18e. Market quick view.
   A peek panel straight from the card - details and the enquiry path
   without leaving the results. Buyer and seller journeys stay separate.
   -------------------------------------------------------------------------- */
.sp-qv-btn {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px;
  border: 0; border-radius: 999px; cursor: pointer;
  color: #fff; background: rgba(10, 14, 30, 0.74);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: inherit; font-size: 11px; font-weight: 650; letter-spacing: 0.05em;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.3s, transform 0.3s, background 0.3s;
}
html[dir="rtl"] .sp-qv-btn { right: auto; left: 12px; }
.sp-qv-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.listing-card:hover .sp-qv-btn, .listing-card:focus-within .sp-qv-btn { opacity: 1; transform: none; }
.sp-qv-btn:hover { background: var(--blue, #1633ff); }
@media (hover: none) { .sp-qv-btn { opacity: 1; transform: none; } }

.sp-qv-backdrop {
  position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: 22px;
  background: rgba(8, 10, 22, 0.56); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.35s;
}
.sp-qv-backdrop.open { opacity: 1; }
.sp-qv {
  position: relative; width: min(880px, 100%); max-height: min(86vh, 660px); overflow: auto;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  border-radius: 22px; background: #fff; box-shadow: 0 40px 120px rgba(8, 10, 22, 0.35);
  transform: translateY(22px) scale(0.97);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.sp-qv-backdrop.open .sp-qv { transform: none; }
.sp-qv-close {
  position: absolute; top: 12px; inset-inline-end: 12px; z-index: 4;
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(10, 14, 30, 0.68);
  transition: background 0.3s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.sp-qv-close:hover { background: var(--blue, #1633ff); transform: rotate(90deg); }
.sp-qv-close svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.sp-qv-media { position: relative; min-height: 340px; background: #eef0fb; }
.sp-qv-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-qv-tag {
  position: absolute; left: 14px; bottom: 14px; padding: 6px 11px; border-radius: 999px;
  color: #fff; background: rgba(10, 14, 30, 0.72); backdrop-filter: blur(6px);
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
html[dir="rtl"] .sp-qv-tag { left: auto; right: 14px; }
.sp-qv-info { padding: 32px 30px 26px; display: flex; flex-direction: column; gap: 11px; text-align: start; }
.sp-qv-kicker { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--blue, #1633ff); font-size: 10.5px; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; }
html[lang="ar"] .sp-qv-kicker { letter-spacing: 0; text-transform: none; }
.sp-qv-info h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.16; color: var(--ink, #0b0e1c); }
.sp-qv-price { color: var(--ink, #0b0e1c); font-size: 14.5px; font-weight: 650; }
.sp-qv-place, .sp-qv-rating { color: var(--slate, #5a6180); font-size: 13px; }
.sp-qv-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; padding-top: 10px; }
.sp-qv .sp-mode-note-compact { margin-top: 4px; }
html.sp-qv-open, html.sp-qv-open body { overflow: hidden; }
@media (max-width: 760px) {
  .sp-qv { grid-template-columns: 1fr; max-height: 88vh; }
  .sp-qv-media { min-height: 220px; }
  .sp-qv-info { padding: 22px 20px 20px; }
}

/* --------------------------------------------------------------------------
   Revision 18f. Recently viewed rail.
   Picks up where the visitor left off - a quiet strip above the results.
   -------------------------------------------------------------------------- */
.sp-recent { margin: 2px 0 20px; padding: 14px 16px; border: 1px solid var(--line, rgba(10, 14, 30, 0.1)); border-radius: 16px; background: #fff; }
.sp-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sp-recent-head h3 { color: var(--slate, #5a6180); font-size: 11px; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase; }
html[lang="ar"] .sp-recent-head h3 { letter-spacing: 0; text-transform: none; }
.sp-recent-clear { border: 0; background: none; cursor: pointer; color: var(--blue, #1633ff); font: inherit; font-size: 11.5px; font-weight: 650; }
.sp-recent-clear:hover { text-decoration: underline; }
.sp-recent-track { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding-bottom: 2px; }
.sp-recent-track::-webkit-scrollbar { display: none; }
.sp-recent-item {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; max-width: 250px;
  padding: 8px 14px 8px 8px; border: 1px solid var(--line, rgba(10, 14, 30, 0.1)); border-radius: 12px;
  background: #fff; scroll-snap-align: start;
  transition: border-color 0.3s, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
}
html[dir="rtl"] .sp-recent-item { padding: 8px 8px 8px 14px; }
.sp-recent-item:hover { border-color: rgba(22, 51, 255, 0.35); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(10, 14, 30, 0.08); }
.sp-recent-item img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; background: #eef0fb; }
.sp-recent-copy { min-width: 0; }
.sp-recent-copy strong { display: block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink, #0b0e1c); font-size: 12.5px; font-weight: 600; }
.sp-recent-copy span { color: var(--slate, #5a6180); font-size: 10.5px; }

/* Revision 19. Word-level editorial reveals and calm text-only form feedback.
   Pages appear immediately; no full-screen or animated-dot loader is used. */
.sp-text-generate .sp-word {
  display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(7px);
  transition: opacity 0.62s ease, filter 0.62s ease, transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--sp-word-delay, 0ms);
}
.sp-text-generate.sp-text-ready .sp-word { opacity: 1; filter: blur(0); transform: none; }

.button[aria-busy="true"], .sp-google-button[aria-busy="true"] { cursor: wait; }
/* OAuth remains a single action, not another account-type selector. */
.sp-oauth-stack { margin-top: 22px; }
.sp-google-button {
  width: 100%; min-height: 50px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  border: 1px solid #d9ddea; border-radius: 12px; cursor: pointer;
  color: var(--night, #0b0e1c); background: #fff; font: inherit; font-size: 13px; font-weight: 650;
  transition: border-color 0.3s, box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s;
}
.sp-google-button:hover { border-color: rgba(22, 51, 255, 0.44); background: #fbfcff; box-shadow: 0 12px 30px rgba(22, 51, 255, 0.1); transform: translateY(-2px); }
.sp-google-button:active { transform: scale(0.985); }
.sp-google-button:disabled { cursor: not-allowed; opacity: 0.62; transform: none; }
.sp-google-button svg { width: 19px; height: 19px; flex: 0 0 auto; }
.sp-oauth-terms { margin-top: 8px !important; text-align: center; font-size: 10px !important; line-height: 1.55; }
.sp-oauth-terms a { color: var(--blue, #1633ff); }
.sp-auth-divider { display: flex; align-items: center; gap: 12px; margin: 15px 0 2px; color: #858ba2; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.sp-auth-divider::before, .sp-auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--line, #e1e3ec); }
.sp-journey-badge {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px;
  color: var(--blue, #1633ff); background: #eef1ff; font-size: 10px; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase;
}
.mobile-panel .sp-journey-badge { width: fit-content; margin-bottom: 7px; }

/* Smooth focus movement keeps the longer sign-up form feeling composed. */
.auth-card, .sp-form-group, .form-field input, .form-field select, .form-field textarea {
  transition: border-color 0.3s, background 0.3s, box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.sp-form-group:focus-within { border-color: rgba(22, 51, 255, 0.28); background: #fff; box-shadow: 0 14px 36px rgba(22, 51, 255, 0.07); transform: translateY(-2px); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { box-shadow: 0 0 0 4px rgba(22, 51, 255, 0.08); }

/* Seller-only AI listing copilot. Suggestions stay separate until the seller
   explicitly applies them, and the final publishing review remains intact. */
.sp-ai-copilot {
  margin: 24px 0 22px; padding: 21px; overflow: hidden; position: relative;
  border: 1px solid rgba(22, 51, 255, 0.22); border-radius: 18px;
  background: linear-gradient(145deg, #f7f8ff, #fff 62%);
  box-shadow: 0 16px 42px rgba(22, 51, 255, 0.07);
}
.sp-ai-copilot::before { content: ""; position: absolute; width: 180px; height: 180px; top: -110px; right: -70px; border-radius: 50%; background: rgba(22, 51, 255, 0.1); filter: blur(4px); pointer-events: none; }
html[dir="rtl"] .sp-ai-copilot::before { right: auto; left: -70px; }
.sp-ai-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.sp-ai-head h2 { margin-top: 7px; font-family: var(--sp-editorial, var(--serif)); font-size: clamp(21px, 2.3vw, 28px); font-weight: 400; line-height: 1.15; }
.sp-ai-head > svg { width: 28px; height: 28px; color: var(--blue, #1633ff); fill: none; stroke: currentColor; stroke-width: 1.5; flex: 0 0 auto; }
.sp-ai-badge { display: inline-flex; padding: 5px 8px; border-radius: 999px; color: #fff; background: var(--blue, #1633ff); font-size: 8px; font-weight: 800; letter-spacing: 0.15em; }
.sp-ai-copilot > p { margin-top: 11px; color: var(--slate, #5a6180); font-size: 12px; line-height: 1.65; }
.sp-ai-copilot > .form-field { margin-top: 16px; }
.sp-ai-copilot textarea { min-height: 96px; resize: vertical; }
.sp-ai-actions { margin-top: 13px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sp-ai-actions small { max-width: 58ch; color: #727991; font-size: 10px; line-height: 1.55; }
.sp-ai-result { margin-top: 17px; padding: 17px; display: grid; gap: 13px; border: 1px solid rgba(22, 51, 255, 0.18); border-radius: 14px; background: #fff; animation: sp-ai-arrive 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.sp-ai-result[hidden] { display: none; }
@keyframes sp-ai-arrive { from { opacity: 0; transform: translateY(10px); } }
.sp-ai-result div > span { display: block; margin-bottom: 5px; color: #747b95; font-size: 8px; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; }
.sp-ai-result strong { font-size: 15px; line-height: 1.4; }
.sp-ai-result p { color: var(--slate, #5a6180); font-size: 12.5px; line-height: 1.7; white-space: pre-line; }
.sp-ai-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.sp-ai-meta span { margin: 0 !important; padding: 6px 9px; border-radius: 999px; color: var(--blue, #1633ff) !important; background: #eef1ff; letter-spacing: 0 !important; text-transform: none !important; }
.sp-ai-result .button { justify-self: start; }
.sp-ai-copilot .form-error:not(:empty) { margin-top: 13px; }
@media (max-width: 560px) {
  .sp-ai-copilot { padding: 17px 15px; }
  .sp-ai-actions { align-items: stretch; flex-direction: column; }
  .sp-ai-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-text-generate .sp-word { opacity: 1; filter: none; transform: none; transition: none; }
  .sp-ai-result { animation: none; }
}

/* --------------------------------------------------------------------------
   Revision 20. Original Paperus, clearer signup.
   The brand, layout language and colour system stay untouched. Signup simply
   becomes a short, guided journey that shows one manageable decision at a
   time. No duplicate Buyer/Seller selector is introduced.
   -------------------------------------------------------------------------- */
.sp-signup-progress { margin-bottom: 25px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.sp-signup-progress > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--slate); font-size: 10px; }
.sp-signup-progress > div > span { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sp-signup-progress > div > strong { color: var(--blue); font-size: 10px; font-weight: 650; }
.sp-signup-progress > i { height: 3px; margin-top: 11px; display: block; overflow: hidden; border-radius: 4px; background: #e3e6f0; }
.sp-signup-progress > i b { width: 33.333%; height: 100%; display: block; border-radius: inherit; background: var(--blue); transition: width .45s cubic-bezier(.22,1,.36,1); }
.sp-signup-progress ol { margin-top: 11px; display: grid; grid-template-columns: repeat(3,1fr); list-style: none; }
.sp-signup-progress li { position: relative; color: #969bad; font-size: 9px; text-align: center; }
.sp-signup-progress li:first-child { text-align: start; }.sp-signup-progress li:last-child { text-align: end; }
.sp-signup-progress li.active { color: var(--blue); font-weight: 700; }.sp-signup-progress li.complete { color: #3b7d68; }

.sp-signup-flow { display: block; margin-top: 18px; }
.sp-signup-beyond .auth-card > [data-aud],.sp-signup-beyond .auth-card > .sp-oauth-stack { display: none !important; }
.sp-signup-beyond .sp-signup-progress { margin-bottom: 14px; }
.sp-signup-flow > .sp-form-group { margin: 0; padding: 23px 24px 21px; border-color: rgba(22,51,255,.16); background: linear-gradient(160deg,#fbfcff,#fff 66%); box-shadow: 0 14px 38px rgba(10,16,60,.055); }
.sp-signup-flow > .sp-form-group[hidden] { display: none !important; }
.sp-step-copy { margin: 2px 0 22px; }
.sp-step-copy h3 { outline: 0; font-family: var(--sp-editorial,var(--serif)); font-size: clamp(25px,2.4vw,33px); font-weight: 400; line-height: 1.08; }
.sp-step-copy p { max-width: 52ch; margin-top: 7px; color: var(--slate); font-size: 11px; line-height: 1.6; }
.sp-signup-flow .form-grid { gap: 16px; }
.sp-signup-flow .form-field input,.sp-signup-flow .form-field select { min-height: 49px; border-radius: 10px; background: #fff; }
.sp-signup-flow .form-field small { margin-top: 5px; line-height: 1.45; }
.sp-step-actions { margin-top: 22px; padding-top: 17px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); }
.sp-step-actions > span { max-width: 28ch; color: #858ba0; font-size: 9px; line-height: 1.5; }
.sp-step-actions .button { min-width: 150px; min-height: 46px; }
.sp-step-back { min-height: 42px; padding: 0 8px; display: inline-flex; align-items: center; gap: 8px; border: 0; color: var(--slate); background: transparent; font-size: 10px; font-weight: 650; }
.sp-step-back:hover { color: var(--blue); }
.sp-signup-flow .sp-form-check { margin-top: 19px; }
.sp-signup-flow .form-error:not(:empty) { margin-top: 14px; }
body[data-page="signup"] .auth-card { width: min(700px,100%); }
body[data-page="signup"] .auth-card h2 { font-size: clamp(31px,3.2vw,42px); }
body[data-page="signup"] .sp-oauth-stack { margin-top: 18px; }

@media (max-width: 700px) {
  .sp-signup-flow > .sp-form-group { padding: 19px 15px 17px; }
  .sp-signup-flow .form-grid { grid-template-columns: 1fr; }
  .sp-step-actions { align-items: stretch; flex-direction: column-reverse; }
  .sp-step-actions .button { width: 100%; }
  .sp-step-actions > span { max-width: none; }
  .sp-step-back { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-signup-progress > i b { transition: none; }
}

/* --------------------------------------------------------------------------
   Revision 21. Paperus atmospheric depth and directional edge light.
   The aurora borrows the slow background-position rhythm of Aceternity's
   reference, then narrows it to the Paperus palette and masks it into the
   existing editorial canvas. The card light borrows React Bits' proximity
   idea: it appears only near an edge and follows direction, without altering
   the original card layout or relying on a framework at runtime.
   -------------------------------------------------------------------------- */
.sp-aurora-surface {
  --sp-aurora-1: rgba(22, 51, 255, 0.76);
  --sp-aurora-2: rgba(126, 139, 255, 0.62);
  --sp-aurora-3: rgba(215, 222, 255, 0.72);
  --sp-aurora-4: rgba(143, 181, 255, 0.56);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
html.aud-buyer .sp-aurora-surface {
  --sp-aurora-1: rgba(28, 74, 255, 0.72);
  --sp-aurora-2: rgba(92, 168, 211, 0.58);
  --sp-aurora-3: rgba(209, 239, 237, 0.72);
  --sp-aurora-4: rgba(115, 144, 255, 0.58);
}
html.aud-seller .sp-aurora-surface {
  --sp-aurora-1: rgba(22, 51, 255, 0.8);
  --sp-aurora-2: rgba(112, 104, 235, 0.64);
  --sp-aurora-3: rgba(222, 215, 255, 0.72);
  --sp-aurora-4: rgba(106, 128, 255, 0.62);
}
.sp-aurora-surface > :not(.sp-aurora-wash):not(.sp-heropaper):not(.sp-aurora) {
  position: relative;
  z-index: 1;
}
.sp-aurora-wash {
  position: absolute;
  inset: -18% -12%;
  z-index: 0;
  display: block;
  pointer-events: none;
  opacity: 0.2;
  background-image:
    repeating-linear-gradient(100deg,
      rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.92) 7%,
      transparent 10%, transparent 12%, rgba(255, 255, 255, 0.9) 16%),
    repeating-linear-gradient(100deg,
      var(--sp-aurora-1) 10%, var(--sp-aurora-2) 15%,
      var(--sp-aurora-3) 20%, var(--sp-aurora-4) 25%, var(--sp-aurora-1) 30%);
  background-size: 300% 200%, 200% 200%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(13px) saturate(1.08);
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 72%);
  will-change: background-position;
}
html.sp-motion .sp-aurora-wash { animation: sp-aurora-drift 60s linear infinite; }
.sp-aurora-dark .sp-aurora-wash {
  opacity: 0.3;
  mix-blend-mode: screen;
  filter: blur(18px) saturate(1.12);
}
@keyframes sp-aurora-drift {
  from { background-position: 50% 50%, 50% 50%; }
  to { background-position: 350% 50%, 350% 50%; }
}

.sp-border-glow {
  --sp-edge-strength: 0;
  --sp-edge-angle: 90deg;
  --sp-edge-1: rgba(22, 51, 255, 0.98);
  --sp-edge-2: rgba(132, 145, 255, 0.92);
  --sp-edge-3: rgba(201, 229, 255, 0.86);
  position: relative;
  isolation: isolate;
}
html.aud-buyer .sp-border-glow {
  --sp-edge-1: rgba(25, 76, 255, 0.98);
  --sp-edge-2: rgba(89, 174, 207, 0.9);
  --sp-edge-3: rgba(184, 231, 224, 0.88);
}
html.aud-seller .sp-border-glow {
  --sp-edge-1: rgba(22, 51, 255, 0.98);
  --sp-edge-2: rgba(116, 103, 236, 0.92);
  --sp-edge-3: rgba(211, 202, 255, 0.9);
}
.sp-border-mesh,
.sp-edge-light {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  pointer-events: none;
  opacity: calc(var(--sp-edge-strength) * 0.98);
  transition: opacity 180ms ease;
}
.sp-border-mesh {
  z-index: 4;
  padding: 1.5px;
  background: conic-gradient(
    from calc(var(--sp-edge-angle) - 26deg) at 50% 50%,
    transparent 0deg,
    var(--sp-edge-3) 7deg,
    var(--sp-edge-2) 24deg,
    var(--sp-edge-1) 34deg,
    var(--sp-edge-2) 44deg,
    transparent 52deg 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.sp-edge-light {
  z-index: 3;
  background: conic-gradient(
    from calc(var(--sp-edge-angle) - 32deg) at 50% 50%,
    transparent 0deg,
    color-mix(in srgb, var(--sp-edge-3) 44%, transparent) 18deg,
    color-mix(in srgb, var(--sp-edge-1) 54%, transparent) 32deg,
    transparent 64deg 360deg
  );
  filter: blur(15px);
  opacity: calc(var(--sp-edge-strength) * 0.34);
}
.sp-border-glow:focus-within .sp-border-mesh { transition-duration: 260ms; }

html.sp-eco .sp-aurora-wash,
html.sp-eco .sp-border-mesh,
html.sp-eco .sp-edge-light { animation: none !important; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .sp-aurora-wash { animation: none !important; background-position: 82% 50%, 82% 50%; will-change: auto; }
  .sp-border-mesh, .sp-edge-light { transition: none; }
}
@media (max-width: 700px) {
  .sp-aurora-wash { inset: -12%; opacity: 0.16; filter: blur(11px) saturate(1.03); }
  .sp-aurora-dark .sp-aurora-wash { opacity: 0.24; }
}

/* Hard stop for loader markup from an older cached application script. The
   current application never creates these nodes; this rule makes an already
   cached legacy script harmless while the browser refreshes its assets. */
.sp-page-loader,
.sp-loader-one,
.sp-button-loader { display: none !important; animation: none !important; }

/* Sitewide mobile refinements for Spotlight pages and overlays */
@media (max-width: 820px) {
  .site-header { height: 70px; }
  .page-hero { padding: 42px 0 31px; }
  .auth-story { min-height: 0; padding: 42px 24px; }
  .auth-form-side { padding: 40px 24px 48px; }
  .sp-blog-head, .sp-article-head { padding: 44px 0 32px; }
  .sp-article-layout { gap: 24px; padding: 36px 0 62px; }
  .sp-qv-backdrop { align-items: end; padding: 10px; }
  .sp-qv { max-height: calc(100dvh - 10px); border-radius: 22px 22px 0 0; }
  .sp-qv-media { min-height: clamp(170px, 56vw, 220px); }
  .sp-qv-close { width: 44px; height: 44px; }
  .sp-top { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 44px; height: 44px; }
  html[dir="rtl"] .sp-top { right: auto; left: 14px; }
}

@media (max-width: 560px) {
  .beta-strip { font-size: 10.5px; }
  .auth-story { padding: 38px 20px; }
  .auth-story h1 { font-size: clamp(37px, 12vw, 48px); }
  .auth-benefits div { align-items: flex-start; flex-direction: column; }
  .auth-form-side { padding: 38px 18px 48px; }
  .auth-card h2 { font-size: clamp(34px, 11vw, 40px); }
  .sp-blog-head h1 { font-size: clamp(38px, 12vw, 48px); }
  .sp-article-head h1 { font-size: clamp(35px, 11vw, 43px); }
  .sp-article-lede { font-size: 15px; }
  .sp-featured { margin-top: 34px; padding: 22px; gap: 22px; }
  .sp-featured .button { width: 100%; }
  .sp-card, .sp-story-journal .sp-card { padding: 22px; }
  .sp-takeaways, .sp-note-panel, .sp-article-cta { padding: 20px; }
  .sp-article-cta .button { width: 100%; }
  .sp-article-body p { font-size: 14px; line-height: 1.78; }
  .sp-side-card { padding: 19px; }
  .sp-qv-actions { display: grid; grid-template-columns: 1fr; }
  .sp-qv-actions .button { width: 100%; }
  .sp-signup-progress li { font-size: 8px; }
  .sp-signup-flow > .sp-form-group { padding: 18px 14px 16px; }
}

@media (max-width: 420px) {
  .sp-brand-tile { display: grid; }
  .sp-brand-tile-art { height: 178px; }
}