/* ==========================================================================
   MeedAgency — /study-project campaign landing page.

   Black & metallic-silver only, matching the MeedAgency identity: no colour
   accents anywhere, including the WhatsApp button. Direction-aware through CSS
   logical properties, so Arabic RTL and English/French LTR share one stylesheet.

   Mobile-first: the base rules target a 360px phone; wider layouts are opt-in
   through min-width queries.
   ========================================================================== */

:root {
  --bg-primary:      #050505;
  --bg-secondary:    #0b0b0d;
  --bg-panel:        #111215;
  --bg-panel-light:  #18191d;

  --text-primary:    #f5f5f5;
  --sp-text-secondary:  #b9bcc2;
  --text-muted:      #7f838a;

  --silver-light:    #f2f2f2;
  --silver:          #c6c8cc;
  --silver-dark:     #787c83;

  --sp-border:          rgba(255, 255, 255, 0.13);
  --sp-border-strong:   rgba(255, 255, 255, 0.25);

  --sp-shadow:          rgba(0, 0, 0, 0.55);

  --sp-radius:     16px;
  --sp-radius-sm:  11px;
  --sp-radius-pill: 999px;

  --shell:      1160px;
  --sp-transition: 0.2s ease;

  /* Tajawal is self-hosted from its OFL-licensed Google Fonts release. */
  --font-ar: 'Tajawal', 'Segoe UI', 'Noto Naskh Arabic', 'Geeza Pro',
             'Droid Arabic Naskh', Tahoma, Arial, sans-serif;
}

/* Only the two weights used throughout the campaign are shipped. */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/tajawal-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
                 U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011,
                 U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/tajawal-arabic-700.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
                 U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011,
                 U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* The [hidden] attribute must beat every display rule below (.sp-btn sets
   inline-flex, which otherwise wins over the UA's [hidden]{display:none} and
   keeps "hidden" wizard buttons visibly on screen). Scoped to the page. */
.sp [hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body.sp {
  font-family: var(--font-ar);
  background: var(--bg-primary);
  color: var(--sp-text-secondary);
  line-height: 1.75;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

html[dir="ltr"] body.sp { font-family: var(--font-primary); }

img, svg, video { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

h1, h2, h3 {
  color: var(--text-primary);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0;
}

/* Visible focus everywhere — never removed, only restyled. */
:focus-visible {
  outline: 2px solid var(--silver);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Layout shell ---------- */
.sp-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.sp-section { padding-block: 3rem; }
.sp-section--alt { background: var(--bg-secondary); }

.sp-section__title {
  font-size: clamp(1.5rem, 5vw, 2.125rem);
  margin-block-end: 2rem;
  text-align: center;
}
/* A section title followed by a lead paragraph owns less of the gap below it. */
.sp-section__title + .sp-section__lead { margin-block-start: -1.25rem; }

.sp-section__lead {
  max-width: 60ch;
  margin-inline: auto;
  margin-block-end: 2rem;
  text-align: center;
  color: var(--sp-text-secondary);
}

/* ==========================================================================
   Buttons — brushed-metal surfaces, no colour
   ========================================================================== */
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.9rem 1.6rem;
  min-height: 48px;              /* comfortable touch target */
  border-radius: var(--sp-radius-pill);
  border: 1px solid var(--sp-border-strong);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  transition: transform var(--sp-transition), box-shadow var(--sp-transition),
              background-color var(--sp-transition), border-color var(--sp-transition);
}

.sp-btn--primary {
  color: #0a0a0a;
  border-color: transparent;
  background: linear-gradient(160deg, var(--silver-light) 0%, var(--silver) 46%, var(--silver-dark) 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.sp-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.75); }
.sp-btn--primary:active { transform: translateY(0); }

.sp-btn--ghost {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}
.sp-btn--ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: var(--sp-border-strong); }

/* WhatsApp CTA deliberately follows the black/silver identity — not green. */
.sp-btn--wa {
  color: var(--text-primary);
  background: linear-gradient(160deg, var(--bg-panel-light), #0d0e11);
  border-color: var(--sp-border-strong);
  box-shadow: 0 10px 28px var(--sp-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.sp-btn--wa:hover { border-color: var(--silver); background: linear-gradient(160deg, #1d1e23, #101116); }
.sp-btn__glyph { width: 22px; height: 22px; flex: none; }

.sp-btn--lg { padding: 1.05rem 2rem; font-size: 1.05rem; min-height: 54px; }
.sp-btn--sm { padding: 0.6rem 1.1rem; min-height: 40px; font-size: 0.925rem; }
.sp-btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ==========================================================================
   Header
   ========================================================================== */
/* ==========================================================================
   Hero
   The page uses the shared fixed site header (80px tall, style.css), so the
   hero reserves that height on top of its own breathing room.
   ========================================================================== */
.sp-hero {
  padding-block: calc(80px + 1.5rem) 3rem;
  background:
    radial-gradient(90% 60% at 70% 0%, rgba(198, 200, 204, 0.10), transparent 60%),
    var(--bg-primary);
}
.sp-hero__grid { display: grid; gap: 2.5rem; }

.sp-hero__title {
  font-size: clamp(1.85rem, 7.5vw, 3.15rem);
  margin-block-end: 1rem;
  background: linear-gradient(180deg, #ffffff 0%, #c9cbcf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sp-hero__text { font-size: clamp(1rem, 3.6vw, 1.15rem); margin-block-end: 1.25rem; color: var(--sp-text-secondary); }

/* ---------- Eyebrow ---------- */
.sp-eyebrow {
  margin-block-end: 0.65rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silver-dark);
}
/* Arabic has no letter case, and tracking pulls its joined forms apart. */
html[dir="rtl"] .sp-eyebrow { text-transform: none; letter-spacing: 0; font-size: 0.9rem; }

/* ---------- The price, stated in the open ---------- */
.sp-pricetag {
  margin-block-end: 1.5rem;
  padding-inline-start: 0.9rem;
  border-inline-start: 2px solid var(--silver-dark);
}
.sp-pricetag__main {
  display: block;
  font-size: clamp(1.05rem, 4vw, 1.2rem);
  font-weight: 700;
  color: var(--text-primary);
}
.sp-pricetag__note { display: block; font-size: 0.87rem; color: var(--text-muted); }

/* ---------- Call to action + its length promise ---------- */
.sp-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.sp-cta--center { align-items: center; }
.sp-cta .sp-btn { width: 100%; max-width: 380px; }
.sp-cta__note {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--silver);
}
.sp-cta__note::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-inline-end: 0.45rem;
  border-radius: 50%;
  background: var(--silver);
  vertical-align: middle;
}

/* ---------- Reassurance chips ---------- */
.sp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 1.5rem;
}
.sp-chip {
  padding: 0.35rem 0.8rem;
  border-radius: var(--sp-radius-pill);
  border: 1px solid var(--sp-border);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.82rem;
  color: var(--sp-text-secondary);
}

/* ==========================================================================
   Device frames — the same chrome for every screenshot on the page
   ========================================================================== */
.sp-frame {
  position: relative;
  border-radius: var(--sp-radius);
  border: 1px solid var(--sp-border);
  background: var(--bg-panel);
  overflow: hidden;
  box-shadow: 0 18px 44px var(--sp-shadow);
}

/* Browser chrome: a title bar with three dots. Decorative, and hidden from
   assistive tech in the markup. */
.sp-frame--browser { padding-block-start: 26px; }
.sp-frame__bar {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 26px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-inline: 10px;
  background: var(--bg-panel-light);
  border-block-end: 1px solid var(--sp-border);
}
.sp-frame__bar i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--silver-dark);
  opacity: 0.65;
}

.sp-frame--sm { border-radius: var(--sp-radius-sm); box-shadow: 0 10px 26px var(--sp-shadow); }

/* Screenshots fill their frame at a fixed 16:10 crop, so six shots of slightly
   different intrinsic sizes still line up as one row. */
.sp-shot {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

.sp-frame--phone {
  border-radius: 20px;
  border-width: 3px;
  border-color: var(--sp-border-strong);
}
.sp-frame--phone .sp-shot { aspect-ratio: 9 / 16; }

.sp-frame--system {
  display: grid;
  place-items: center;
  padding: 0.9rem;
  background: linear-gradient(160deg, var(--bg-panel-light), var(--bg-panel));
}
.sp-sysart { width: 100%; height: auto; color: var(--silver); }

/* ---------- Hero composition ---------- */
.sp-devices {
  position: relative;
  display: grid;
  gap: 0.9rem;
}
.sp-devices__label {
  margin-block-start: 0.55rem;
  font-size: 0.8rem;
  text-align: center;
  color: var(--text-muted);
}

/* Phone and system panel are supporting evidence, not the headline. Below
   700px only the browser frame shows: a three-part composition on a 390px
   screen is three illegible thumbnails. */
.sp-devices__phone,
.sp-devices__system { display: none; }

/* ==========================================================================
   Real work
   ========================================================================== */
.sp-work {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
.sp-work__label {
  display: block;
  margin-block-start: 0.55rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

/* ==========================================================================
   Client proof

   Two tiers on purpose. The clients with a site a visitor can open get a
   screenshot, a description and two actions; the other three get a compact
   card. Making all five equal would flatten the one distinction that matters
   here — some of this can be verified in another tab, and some cannot.
   ========================================================================== */
.sp-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sp-proof {
  display: grid;
  gap: 1.25rem;
  margin-block-end: 2rem;
}
.sp-proof__card {
  display: grid;
  gap: 1.25rem;
  height: 100%;
  padding: 1.1rem;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  background: var(--bg-panel);
  box-shadow: 0 16px 40px var(--sp-shadow);
}

.sp-proof__media { position: relative; }

/* Not a rating and not a claim — a label on a screenshot whose site opens in
   the next tab. Silver, because the brand has no third colour to spend. */
.sp-proof__live {
  position: absolute;
  inset-block-end: 0.6rem;
  inset-inline-end: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--sp-border-strong);
  border-radius: var(--sp-radius-pill);
  background: rgba(5, 5, 5, 0.82);
  backdrop-filter: blur(4px);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--silver-light);
}
.sp-proof__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--silver-light);
  box-shadow: 0 0 0 3px rgba(242, 242, 242, 0.16);
}

.sp-proof__body { display: grid; align-content: start; gap: 0.85rem; }

.sp-proof__head { display: flex; align-items: center; gap: 0.75rem; }
.sp-proof__avatar {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--sp-border-strong);
  background: var(--bg-panel-light);
}
.sp-proof__id { min-width: 0; }
.sp-proof__name { font-size: 1.05rem; line-height: 1.3; }
.sp-proof__cat {
  margin-block-start: 0.15rem;
  font-size: 0.83rem;
  color: var(--text-muted);
}

.sp-proof__built { font-size: 0.93rem; color: var(--sp-text-secondary); }

/* The client's own words. Marked with a rule on the inline start so it reads
   as quoted material in both writing directions without any punctuation that
   would have to be translated. */
.sp-proof__quote {
  padding-inline-start: 0.9rem;
  border-inline-start: 2px solid var(--silver-dark);
  color: var(--text-primary);
  font-size: 0.97rem;
  line-height: 1.65;
}
.sp-proof__quote--sm { font-size: 0.92rem; }

.sp-proof__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-block-start: 0.15rem;
}

/* Both actions are links, and both are sized as real tap targets. */
.sp-proof__live-link,
.sp-proof__view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 1.05rem;
  border-radius: var(--sp-radius-pill);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--sp-transition), border-color var(--sp-transition), color var(--sp-transition);
}
/* On a phone they stack full width: two pills of different lengths on
   consecutive lines read as an accident rather than as a pair. */
.sp-proof__actions > * { flex: 1 1 100%; }

.sp-proof__live-link {
  border: 1px solid var(--silver);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}
.sp-proof__live-link:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--silver-light);
}
.sp-proof__view {
  border: 1px solid var(--sp-border-strong);
  color: var(--sp-text-secondary);
}
.sp-proof__view:hover { color: var(--text-primary); border-color: var(--silver); }
.sp-proof__glyph { width: 17px; height: 17px; flex: none; }

.sp-proof__live-link:focus-visible,
.sp-proof__view:focus-visible {
  outline: 2px solid var(--silver-light);
  outline-offset: 2px;
}

/* ---------- Supporting testimonials ----------
   One swipeable row on a phone: three cards side by side at 360px would be
   three columns of unreadable text. */
.sp-proof-more {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-block-end: 0.5rem;
}
.sp-proof-more__item {
  flex: 0 0 80%;
  scroll-snap-align: start;
}
.sp-proof-mini {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  background: var(--bg-panel);
}
.sp-proof-mini .sp-proof__avatar { width: 38px; height: 38px; }
.sp-proof-mini .sp-proof__name { font-size: 0.98rem; }

/* margin-block-start: auto drops the action to the foot of the card, so three
   quotes of three different lengths still line their buttons up. */
.sp-proof__view--sm {
  margin-block-start: auto;
  align-self: start;
  min-height: 44px;
  padding-inline: 0.9rem;
  font-size: 0.86rem;
}

/* ==========================================================================
   Conversation viewer

   One <dialog> shared by every card. It carries no image until a visitor asks
   for one, so none of the five screenshots is fetched on page load.
   ========================================================================== */
/* The width is capped by the height as well as by the screen.
   (100dvh - 6.5rem) is the room left for the image once the bar and the note
   have taken theirs; multiplying by the screenshot's 750/1624 gives the widest
   the panel can be while that image still fits whole. Without it the panel
   stays 460px on a laptop and the picture floats in two grey margins. */
.sp-viewer {
  /* A modal <dialog> is centred by the UA's own `margin: auto`, which the
     `* { margin: 0 }` reset at the top of this file wipes out. Restated here,
     with the insets it pairs with, or the viewer pins itself to a corner. */
  inset: 0;
  margin: auto;

  --sp-viewer-chrome: 6.5rem;   /* title bar + provenance note */
  --sp-viewer-inset: 1.5rem;    /* breathing room, counted on both edges */
  --sp-viewer-ratio: 0.4618;    /* 750 / 1624, the screenshots' own shape */
  width: min(460px, calc(100vw - var(--sp-viewer-inset)),
             calc((100vh - var(--sp-viewer-inset) - var(--sp-viewer-chrome)) * var(--sp-viewer-ratio)));
  width: min(460px, calc(100vw - var(--sp-viewer-inset)),
             calc((100dvh - var(--sp-viewer-inset) - var(--sp-viewer-chrome)) * var(--sp-viewer-ratio)));
  max-width: 100%;
  max-height: calc(100vh - var(--sp-viewer-inset));
  max-height: calc(100dvh - var(--sp-viewer-inset));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  overflow: visible;
}
.sp-viewer[open] { display: block; }
.sp-viewer::backdrop { background: rgba(3, 3, 3, 0.86); }

.sp-viewer__panel {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--sp-viewer-inset));
  max-height: calc(100dvh - var(--sp-viewer-inset));
  border: 1px solid var(--sp-border-strong);
  border-radius: var(--sp-radius);
  background: var(--bg-panel);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.sp-viewer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex: none;
  padding-block: 0.5rem;
  padding-inline: 0.9rem 0.5rem;
  border-block-end: 1px solid var(--sp-border);
  background: var(--bg-panel-light);
}
.sp-viewer__title { font-size: 0.98rem; font-weight: 600; }

.sp-viewer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  color: var(--sp-text-secondary);
  cursor: pointer;
}
.sp-viewer__close svg { width: 20px; height: 20px; }
.sp-viewer__close:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.08); }
.sp-viewer__close:focus-visible { outline: 2px solid var(--silver-light); outline-offset: 2px; }

/* min-height: 0 lets the image shrink inside the flex column; object-fit keeps
   its proportions while it does, so a tall screenshot never runs off-screen. */
.sp-viewer__img {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  background: var(--bg-secondary);
}

.sp-viewer__note {
  flex: none;
  padding: 0.7rem 0.9rem;
  border-block-start: 1px solid var(--sp-border);
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Set while the viewer is open, so the page behind it cannot be scrolled. */
.sp-viewer-open, .sp-viewer-open body { overflow: hidden; }

/* ==========================================================================
   Why MeedAgency

   Four differentiators, and deliberately quieter than the offer cards below
   them: flat panel, no lift on hover, no reflection along the top edge. This
   section explains how the work is done — "what we build" is what is being
   bought, and it should stay the louder of the two.

   The layout is a grid at every width, so the icon can move from above the
   words (phone) to beside them (tablet and up) without a second markup path.
   ========================================================================== */
.sp-why { display: grid; gap: 1rem; }

.sp-why__item {
  display: grid;
  align-content: start;
  padding: 1.35rem 1.25rem;
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--sp-border);
  background: var(--bg-panel);
}

.sp-why__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-block-end: 0.9rem;
  border-radius: 50%;
  border: 1px solid var(--sp-border-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--silver-light);
}
.sp-why__icon svg { display: block; width: 20px; height: 20px; }

.sp-why__title { font-size: 1.05rem; margin-block-end: 0.4rem; }
.sp-why__text { font-size: 0.95rem; color: var(--sp-text-secondary); }

/* The qualifier that keeps a point honest, same treatment as .sp-card__note:
   quieter than the claim it belongs to, and never separated from it. */
.sp-why__note {
  margin-block-start: 0.9rem;
  padding-block-start: 0.8rem;
  border-block-start: 1px solid var(--sp-border);
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* ==========================================================================
   Solution in action
   ========================================================================== */
.sp-action { display: grid; gap: 2rem; align-items: center; }

/* Explicit aspect ratio: the frame is reserved before the video loads, so
   nothing on the page moves when it arrives. preload="none" means those bytes
   are only fetched if someone presses play. */
.sp-media-frame {
  position: relative;
  aspect-ratio: 1080 / 1920;
  max-width: 250px;
  margin-inline: auto;
  border-radius: var(--sp-radius);
  border: 1px solid var(--sp-border);
  overflow: hidden;
  background: var(--bg-panel);
  box-shadow: 0 24px 60px var(--sp-shadow);
}
.sp-media-frame__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Cards — what we build
   ========================================================================== */
.sp-cards { display: grid; gap: 1.15rem; }

.sp-card {
  position: relative;
  padding: 1.65rem 1.4rem;
  border-radius: var(--sp-radius);
  border: 1px solid var(--sp-border);
  background: linear-gradient(165deg, var(--bg-panel-light), var(--bg-panel));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  transition: border-color var(--sp-transition), transform var(--sp-transition);
}
.sp-card:hover { border-color: var(--sp-border-strong); transform: translateY(-2px); }

/* Thin silver reflection along the top edge. */
.sp-card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

.sp-card__title { font-size: 1.2rem; margin-block-end: 0.6rem; }
.sp-card__text { font-size: 0.975rem; }

/* The qualifier that keeps a pillar honest — "not every site includes this",
   "ad spend is separate". Quieter than the claim, never absent from it. */
.sp-card__note {
  margin-block-start: 0.8rem;
  padding-block-start: 0.8rem;
  border-block-start: 1px solid var(--sp-border);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.sp-badge {
  display: inline-block;
  margin-block-end: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--sp-radius-pill);
  border: 1px solid var(--sp-border-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--silver);
  font-size: 0.78rem;
  font-weight: 700;
}
.sp-badge--sm { margin-inline-start: 0.5rem; font-size: 0.72rem; padding: 0.15rem 0.6rem; }

/* ==========================================================================
   How it works — three steps
   ========================================================================== */
.sp-steps { display: grid; gap: 1rem; counter-reset: sp-step; }

.sp-steps__item {
  position: relative;
  padding: 1.4rem 1.35rem;
  padding-inline-start: 3.9rem;
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--sp-border);
  background: var(--bg-panel);
}
.sp-steps__n {
  position: absolute;
  inset-inline-start: 1.25rem;
  inset-block-start: 1.3rem;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--sp-border-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--silver-light);
  font-weight: 700;
  font-size: 0.9rem;
  /* Latin digits in an Arabic paragraph still read left to right. */
  direction: ltr;
  font-variant-numeric: tabular-nums;
}
.sp-steps__title { font-size: 1.06rem; margin-block-end: 0.35rem; }
.sp-steps__text { font-size: 0.95rem; color: var(--sp-text-secondary); }

/* ==========================================================================
   Benefits
   ========================================================================== */
.sp-benefits { display: grid; gap: 0.85rem; max-width: 720px; margin-inline: auto; }
.sp-benefits__item {
  position: relative;
  padding-block: 0.9rem;
  padding-inline: 3rem 1.1rem;
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--sp-border);
  background: var(--bg-panel);
  color: var(--text-primary);
}
.sp-benefits__item::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--silver);
  font-weight: 700;
}

/* ==========================================================================
   Price qualification
   ========================================================================== */
.sp-price { text-align: center; max-width: 760px; }
.sp-price__text { margin-block-end: 1rem; }
.sp-price__ads {
  margin-block-end: 2rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--sp-radius-sm);
  border: 1px dashed var(--sp-border-strong);
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.sp-faq { max-width: 780px; }
.sp-faq__item {
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  background: var(--bg-panel);
  margin-block-end: 0.75rem;
  overflow: hidden;
}
.sp-faq__q {
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  font-weight: 700;
  color: var(--text-primary);
  list-style: none;
}
.sp-faq__q::-webkit-details-marker { display: none; }
.sp-faq__q::after {
  content: '+';
  float: inline-end;
  color: var(--silver);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1;
}
.sp-faq__item[open] .sp-faq__q::after { content: '−'; }
.sp-faq__a { padding: 0 1.25rem 1.15rem; color: var(--sp-text-secondary); }

/* ==========================================================================
   Quiz
   ========================================================================== */
.sp-section--quiz { background: var(--bg-secondary); scroll-margin-top: 80px; }

/* Keep the shared widget on the physical right in every campaign language.
   JS moves it up only when necessary to keep visible controls accessible. */
.sp .wa-widget {
  inset-inline-end: auto;
  left: auto;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateY(var(--sp-wa-offset, 0px));
}
.sp .wa-widget.is-obstructed { visibility: hidden; pointer-events: none; }

@media (max-width: 768px) {
  .sp .wa-widget {
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
  }
}

.sp-quiz {
  max-width: 780px;
  margin-inline: auto;
  padding: 1.5rem 1.25rem 2rem;
  border-radius: var(--sp-radius);
  border: 1px solid var(--sp-border);
  background: linear-gradient(170deg, var(--bg-panel-light), var(--bg-panel));
  box-shadow: 0 22px 60px var(--sp-shadow);
}

.sp-quiz__head { margin-block-end: 1.75rem; }
.sp-quiz__progress {
  height: 6px;
  border-radius: var(--sp-radius-pill);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.sp-quiz__bar {
  display: block;
  height: 100%;
  width: 12.5%;
  border-radius: var(--sp-radius-pill);
  background: linear-gradient(90deg, var(--silver-dark), var(--silver-light));
  transition: width 0.3s ease;
}
.sp-quiz__counter {
  margin-block-start: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  /* "1 / 4" must read left-to-right even in Arabic: the slash is a separator
     between two numerals, not part of the sentence around it. */
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

/* "Under a minute" — the length promise, shown before the first question. */
.sp-quiz__time {
  margin-block-end: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--silver);
}
.sp-quiz__time::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-end: 0.5rem;
  border-radius: 50%;
  background: var(--silver);
  vertical-align: middle;
}



/* Steps: hidden by default and revealed one at a time. The <noscript> block in
   the page overrides this so every step shows without JavaScript. */
.sp-step { border: none; display: none; }
.sp-step.is-active { display: block; animation: sp-fade 0.25s ease; }

@keyframes sp-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.sp-step__q {
  display: block;
  font-size: clamp(1.15rem, 4.5vw, 1.45rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-block-end: 1.25rem;
  line-height: 1.45;
}
.sp-step__q--sub { margin-block: 2rem 1rem; font-size: 1.05rem; }
.sp-step__hint { margin-block-start: -0.75rem; margin-block-end: 1rem; font-size: 0.88rem; color: var(--text-muted); }

/* ---------- Choice cards (real radios / checkboxes) ---------- */
.sp-choices { display: grid; gap: 0.7rem; }
.sp-choices--inline { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* The input stays in the accessibility tree and keeps native keyboard
   behaviour (arrow keys inside a radio group); only its painting is replaced. */
.choice__input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.choice__card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  min-height: 56px;
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--sp-border);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--sp-transition), background-color var(--sp-transition), transform var(--sp-transition);
}
.choice__card:hover { border-color: var(--sp-border-strong); background: rgba(255, 255, 255, 0.055); }

.choice__tick {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--silver-dark);
  position: relative;
  transition: border-color var(--sp-transition), background-color var(--sp-transition);
}
.sp-choices[data-multi] .choice__tick { border-radius: 7px; }

.choice__tick::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background: transparent;
  transition: background-color var(--sp-transition);
}

.choice__input:checked + .choice__card {
  border-color: var(--silver);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.choice__input:checked + .choice__card .choice__tick { border-color: var(--silver-light); }
.choice__input:checked + .choice__card .choice__tick::after { background: var(--silver-light); }

/* Keyboard focus must be obvious on the CARD, since the input is invisible. */
.choice__input:focus-visible + .choice__card {
  outline: 2px solid var(--silver);
  outline-offset: 3px;
}

.choice__text { font-size: 1rem; font-weight: 500; line-height: 1.5; }

/* ---------- Text fields ---------- */
.sp-grid { display: grid; gap: 1.1rem; }
.sp-field { display: block; }

.sp-label {
  display: block;
  margin-block-end: 0.45rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}
.sp-label__opt { color: var(--text-muted); font-weight: 400; font-size: 0.85rem; }

.sp-input {
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 50px;
  font: inherit;
  font-size: 1rem;                /* >=16px keeps iOS from zooming on focus */
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
}
.sp-input::placeholder { color: var(--text-muted); }
.sp-input:focus {
  outline: none;
  border-color: var(--silver);
  box-shadow: 0 0 0 3px rgba(198, 200, 204, 0.16);
}
.sp-textarea { min-height: 96px; resize: vertical; line-height: 1.6; }

.sp-reveal { margin-block-start: 0.9rem; }

/* ---------- Consent ---------- */
.sp-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-block-start: 1.5rem;
  padding: 1rem;
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--sp-border);
  background: rgba(255, 255, 255, 0.025);
}
.sp-consent__box { width: 20px; height: 20px; flex: none; margin-block-start: 0.2rem; accent-color: var(--silver); }
.sp-consent__label { font-size: 0.93rem; color: var(--sp-text-secondary); cursor: pointer; }
.sp-consent__copy { display: grid; gap: 0.35rem; }

/* Consent row for V2: the same control as V1, deliberately quieter — no box,
   no border, smaller type, so a required tick reads as a footnote rather than
   as another question. The checkbox itself stays a full-size touch target. */
.sp-consent--sm {
  margin-block-start: 1.1rem;
  padding: 0;
  border: none;
  background: none;
  gap: 0.6rem;
}
.sp-consent--sm .sp-consent__label {
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-muted);
}
.sp-consent--sm .sp-consent__box { width: 22px; height: 22px; margin-block-start: 0.05rem; }
.sp-consent--sm .sp-consent__link { color: var(--silver); text-decoration: underline; }
.sp-consent--sm .sp-consent__link:hover { color: var(--text-primary); }
/* An unmet required consent must be visible, not just announced. */
.sp-consent__box.is-invalid { outline: 2px solid var(--silver); outline-offset: 3px; }
.sp-consent__link {
  width: fit-content;
  color: var(--silver-light);
  font-size: 0.88rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.sp-consent__link:hover { color: var(--text-primary); }

/* ---------- Errors ---------- */
.sp-field-error {
  margin-block-start: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  /* Warm-neutral, still inside the monochrome identity — no alarm red. */
  color: #e6e2dc;
  padding-inline-start: 1.1rem;
  position: relative;
}
.sp-field-error::before {
  content: '!';
  position: absolute;
  inset-inline-start: 0;
  font-weight: 800;
  color: var(--silver);
}

.sp-alert {
  margin-block-end: 1.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--sp-border-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font-size: 0.94rem;
}

.sp-choices.is-invalid .choice__card,
.sp-input.is-invalid { border-color: var(--silver); }

/* ---------- Navigation ---------- */
/* Mobile: one action per line — two half-width pills squeeze long Arabic
   labels into multi-line blobs. The primary action (next/submit) stays on
   top; "رجوع" sinks below it via order. */
.sp-quiz__nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-block-start: 2rem;
}
.sp-quiz__nav .sp-btn { width: 100%; }
.sp-quiz__nav [data-quiz-back] { order: 1; }

/* Shown only by the <noscript> override. */
.sp-quiz__nojs { display: none; margin-block-start: 2rem; }

/* ---------- Honeypot ----------
   Clipped rather than pushed off-screen. A negative inline offset would
   resolve to `right:` in RTL and widen the document (see .sp-skip above).
   The field stays a real, submittable input that bots will happily fill. */
.sp-hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Success screen
   ========================================================================== */
.sp-success { text-align: center; padding-block: 1rem; }
.sp-success__title:focus { outline: none; }

.sp-success__mark {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin-inline: auto;
  margin-block-end: 1.1rem;
  border-radius: 50%;
  font-size: 1.7rem;
  color: #0a0a0a;
  background: linear-gradient(150deg, var(--silver-light), var(--silver-dark));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
.sp-success__title { font-size: clamp(1.35rem, 5vw, 1.75rem); margin-block-end: 1.25rem; }
.sp-success__label { font-size: 0.9rem; color: var(--text-muted); }

.sp-success__number {
  font-size: clamp(1.3rem, 5.5vw, 1.7rem);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.06em;
  direction: ltr;
  margin-block: 0.35rem 1rem;
  font-variant-numeric: tabular-nums;
}
.sp-success__text { margin-block: 1.5rem; color: var(--sp-text-secondary); }

.sp-summary {
  text-align: start;
  max-width: 460px;
  margin-inline: auto;
  margin-block-end: 1.75rem;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  overflow: hidden;
}
.sp-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-block-end: 1px solid var(--sp-border);
  font-size: 0.93rem;
}
.sp-summary__row:last-child { border-block-end: none; }
.sp-summary__row dt { color: var(--text-muted); flex: none; }
.sp-summary__row dd { color: var(--text-primary); font-weight: 600; text-align: end; }

/* ==========================================================================
   Final CTA + footer
   ========================================================================== */
.sp-section--final {
  background:
    radial-gradient(70% 100% at 50% 100%, rgba(198, 200, 204, 0.09), transparent 65%),
    var(--bg-primary);
  text-align: center;
}
.sp-final__title {
  font-size: clamp(1.4rem, 5.5vw, 2rem);
  margin-block-end: 0.6rem;
}
.sp-final__text {
  font-size: clamp(1rem, 3.8vw, 1.1rem);
  color: var(--sp-text-secondary);
  margin-block-end: 1.75rem;
  max-width: 46ch;
  margin-inline: auto;
}

/* The final CTA now sits directly ABOVE the quiz rather than below it, so on a
   phone it is the prompt immediately before the first question — the opposite
   of the V2 arrangement, where it was a button that scrolled backwards. It
   therefore stays visible at every width. */

/* ==========================================================================
   Responsive — tablet and up
   ========================================================================== */
@media (min-width: 700px) {
  .sp-section { padding-block: 4.5rem; }
  .sp-media-frame { max-width: 300px; }
  .sp-cards { grid-template-columns: repeat(3, 1fr); }
  .sp-why { grid-template-columns: repeat(2, 1fr); gap: 1.15rem; }
  .sp-why__item { grid-template-columns: auto 1fr; column-gap: 1.05rem; padding: 1.5rem 1.4rem; }
  .sp-why__icon { grid-row: span 2; align-self: start; margin-block-end: 0; }
  .sp-why__note { grid-column: 1 / -1; }
  .sp-benefits { grid-template-columns: 1fr; }
  .sp-work { grid-template-columns: repeat(2, 1fr); }
  .sp-steps { grid-template-columns: repeat(3, 1fr); }

  /* Screenshot beside the words: at this width a stacked card pushes its own
     actions below the fold of the section. */
  .sp-proof__card { grid-template-columns: 300px 1fr; align-items: start; padding: 1.35rem; }
  .sp-proof__actions > * { flex: 0 1 auto; }

  /* Enough room for three readable columns, so the swipe row becomes a grid. */
  .sp-proof-more {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    padding-block-end: 0;
  }
  .sp-proof-more__item { flex: none; }
  .sp-action { grid-template-columns: 300px 1fr; }
  .sp-cta { align-items: flex-start; }
  .sp-cta .sp-btn { width: auto; min-width: 260px; }
  .sp-cta--center { align-items: center; }
  .sp-quiz { padding: 2.25rem 2rem 2.5rem; }
  .sp-grid { grid-template-columns: repeat(2, 1fr); }
  /* The message textarea and consent block stay full width. */
  .sp-grid > .sp-field:nth-child(5) { grid-column: 1 / -1; }
  .sp-quiz__nav { flex-direction: row; flex-wrap: wrap; }
  .sp-quiz__nav .sp-btn { flex: 0 1 auto; width: auto; min-width: 150px; }
  .sp-quiz__nav [data-quiz-back] { order: 0; }

  /* The phone joins the hero once there is room for it to be legible. It sits
     INSIDE the composition's own padding rather than overhanging the edge, so
     it can never widen the document — in either writing direction. */
  .sp-devices {
    position: relative;
    padding-block-end: 2.25rem;
    padding-inline-end: 5.5rem;
  }
  .sp-devices__phone {
    display: block;
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    width: 116px;
  }
  .sp-devices__phone .sp-devices__label { display: none; }
}

@media (min-width: 960px) {
  .sp-hero { padding-block: calc(80px + 3rem) 5rem; }
  .sp-hero__grid { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 3.5rem; }
  .sp-media-frame { max-width: 320px; }
  .sp-work { grid-template-columns: repeat(3, 1fr); }
  .sp-benefits { grid-template-columns: repeat(2, 1fr); }

  /* The two verifiable projects side by side; each card is wide enough again
     for the screenshot to sit above its own description. */
  .sp-proof { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .sp-proof__card { grid-template-columns: 1fr; }
  .sp-action { grid-template-columns: 320px 1fr; gap: 3rem; }

  /* Full composition: site, phone, system. The three things the offer promises,
     each visible at a size where it reads as what it is. */
  .sp-devices { padding-inline-end: 0; padding-block-end: 0; }
  .sp-devices__phone {
    position: static;
    width: auto;
  }
  .sp-devices__phone .sp-devices__label { display: block; }
  .sp-devices__system { display: block; }
  .sp-devices {
    /* A phone-shaped frame has to actually be phone-shaped: narrow column,
       9:16 screen. Give it an equal half and it reads as a tablet. */
    grid-template-columns: 152px 1fr;
    grid-template-areas:
      'main   main'
      'phone  system';
    gap: 1.1rem;
    align-items: start;
  }
  .sp-devices__main   { grid-area: main; }
  .sp-devices__phone  { grid-area: phone; }
  .sp-devices__system { grid-area: system; }
  /* The system panel matches the phone's height so the row reads as one unit
     (1.75rem is the caption line the phone carries and it does not). */
  .sp-devices__system .sp-frame--system { min-height: 100%; }
  .sp-devices__system { align-self: stretch; display: grid; grid-template-rows: 1fr auto; }
}

/* Long translated header CTAs must wrap inside their button on phones. */
@media (max-width: 640px) {
  .sp .nav--campaign {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
  }
  .sp .nav--campaign .brand__name { display: none; }
  .sp .nav--campaign .nav__actions { min-width: 0; max-width: 100%; }
  .sp .nav--campaign .lang-switch { flex-shrink: 0; }
  .sp .nav__cta--campaign {
    min-width: 0;
    min-height: 42px;
    height: auto;
    padding-block: 6px;
    white-space: normal;
    line-height: 1.3;
    text-align: center;
  }
}

/* ==========================================================================
   Campaign footer — legal links and copyright, nothing to wander into.
   Styled here rather than in style.css because only campaign pages use it.
   ========================================================================== */
.site-footer--campaign {
  padding-block: 1.75rem;
  border-block-start: 1px solid var(--sp-border);
  background: var(--bg-primary);
}
.site-footer--campaign .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-legal a { color: var(--sp-text-secondary); text-decoration: underline; text-underline-offset: 0.2em; }
.footer-legal a:hover { color: var(--text-primary); }

/* ==========================================================================
   Reduced motion — honour the OS setting everywhere. The showcase video is
   never started by script, so there is nothing to gate here beyond animation.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .sp-btn:hover, .sp-card:hover { transform: none; }
}

/* ==========================================================================
   Print — leave a usable record of the request number.
   ========================================================================== */
@media print {
  .site-header, .site-footer, .sp-hero__media, .sp-quiz__form,
  .sp-section--final, .sp-work, .sp-action__media, .sp-btn,
  .sp-proof, .sp-proof-more, .sp-viewer, .sp-why { display: none !important; }
  body.sp { background: #fff; color: #000; }
}

/* Paid-traffic presentation: scoped to this page, with existing wizard hooks. */
.sp-paid .sp-hero { padding-block: 102px 18px; }
.sp-paid .sp-hero__grid { display: block; max-width: 850px; }
.sp-paid .sp-hero__copy { max-width: 810px; margin-inline: auto; text-align: center; }
.sp-paid .sp-eyebrow { color: var(--silver); margin-block-end: 8px; }
.sp-paid .sp-hero__title { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.15; margin-block-end: 14px; }
.sp-paid .sp-hero__text { max-width: 64ch; margin-inline: auto; margin-block-end: 18px; font-size: 1rem; line-height: 1.55; }
.sp-paid .sp-hero__price { margin-block: 0 8px; font-size: 1.25rem; color: var(--silver-light); }
.sp-paid .sp-hero__scope { max-width: 70ch; margin: 0 auto 18px; font-size: 0.9rem; line-height: 1.55; color: var(--sp-text-secondary); }
.sp-paid .sp-cta { align-items: center; gap: 8px; }
.sp-paid .sp-cta__note { font-size: 0.8rem; font-weight: 400; }
.sp-paid .sp-cta__note::before { content: none; }
.sp-paid .sp-btn { white-space: normal; min-height: 48px; line-height: 1.4; transition: background-color var(--sp-transition), border-color var(--sp-transition); }
.sp-paid .sp-btn--primary { background: var(--silver-light); color: var(--bg-primary); box-shadow: none; }
.sp-paid .sp-btn--primary:hover { background: var(--silver); transform: none; box-shadow: none; }
.sp-paid .sp-btn--ghost { box-shadow: none; color: var(--sp-text-secondary); }
.sp-paid .sp-paid-capabilities { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; max-width: 850px; padding-block-start: 16px; font-size: 0.75rem; line-height: 1.5; color: var(--sp-text-secondary); }
.sp-paid .sp-paid-capabilities li { border-inline-start: 1px solid var(--sp-border-strong); padding-inline-start: 10px; }
.sp-paid .sp-paid-capabilities li:first-child { border-inline-start: none; padding-inline-start: 0; }
.sp-paid .sp-section--quiz { padding-block: 22px 32px; background: var(--bg-primary); scroll-margin-top: 84px; }
.sp-paid .sp-section--quiz > .sp-shell { max-width: 800px; }
.sp-paid .sp-section--quiz .sp-section__title { font-size: 1.2rem; margin-block-end: 6px; }
.sp-paid .sp-section--quiz .sp-section__lead { margin-block: 0 18px; font-size: 0.9rem; }
.sp-paid .sp-quiz { max-width: 740px; padding: 20px 18px; background: var(--bg-panel); box-shadow: 0 12px 32px var(--sp-shadow); }
.sp-paid .sp-quiz__head { display: flex; align-items: center; gap: 14px; margin-block-end: 12px; }
.sp-paid .sp-quiz__progress { flex: 1; height: 5px; }
.sp-paid .sp-quiz__counter { flex: none; margin: 0; font-size: 0.8rem; color: var(--silver-light); }
.sp-paid .sp-quiz__time { margin-block-end: 16px; font-size: 0.8rem; color: var(--sp-text-secondary); }
.sp-paid .sp-step__q { font-size: 1.15rem; margin-block-end: 14px; }
.sp-paid .sp-step__hint { color: var(--sp-text-secondary); margin-block-end: 14px; }
.sp-paid .sp-choices { gap: 8px; }
.sp-paid .choice__card { min-height: 52px; padding: 11px 14px; background: var(--bg-panel-light); }
.sp-paid .choice__card:hover { border-color: var(--silver); }
.sp-paid .choice__input:checked + .choice__card { border-color: var(--silver-light); background: var(--bg-secondary); box-shadow: inset 3px 0 0 var(--silver-light); }
[dir="rtl"] .sp-paid .choice__input:checked + .choice__card { box-shadow: inset -3px 0 0 var(--silver-light); }
.sp-paid .sp-quiz__nav { margin-block-start: 20px; gap: 10px; }
.sp-paid .sp-quiz__nav [data-quiz-back] { min-width: 0; }
.sp-paid .sp-input { font-size: 16px; scroll-margin-block: 110px; }
.sp-paid .sp-label__opt, .sp-paid .sp-consent--sm .sp-consent__label { color: var(--sp-text-secondary); }
.sp-paid .sp-field-error { min-height: 24px; margin-block-start: 4px; }
.sp-paid #sp-proof { padding-block: 28px; }
.sp-paid #sp-proof > .sp-shell { max-width: 1000px; }
.sp-paid #sp-proof .sp-section__title { font-size: 1.4rem; margin-block-end: 10px; }
.sp-paid #sp-proof .sp-section__lead { margin-block: 0 20px; font-size: 0.9rem; }
.sp-paid .sp-proof { gap: 16px; }
.sp-paid .sp-proof__body { padding: 18px; }
.sp-paid .sp-proof__media .sp-shot { max-height: 180px; object-fit: cover; object-position: top; }
.sp-paid .sp-proof__built { font-size: 0.86rem; }
.sp-paid .sp-proof__quote { font-size: 0.95rem; }
.sp-paid .sp-proof__live { font-size: 0.78rem; }
.sp-paid .sp-paid-more-proof { margin-block-start: 20px; }
.sp-paid .sp-paid-more-proof summary, .sp-paid .sp-paid-details > summary { cursor: pointer; color: var(--silver-light); padding-block: 16px; font-size: 0.9rem; }
.sp-paid .sp-paid-details { border-block: 1px solid var(--sp-border); }
.sp-paid .sp-paid-details > summary { max-width: 1000px; }
.sp-paid .sp-paid-details .sp-section { padding-block: 28px; }
.sp-paid .sp-paid-details .sp-work { max-width: 480px; margin-inline: auto; grid-template-columns: 1fr; }
.sp-paid .sp-section--final { padding-block: 28px; }
.sp-paid .sp-final__title { font-size: 1.4rem; margin-block-end: 10px; }
.sp-paid .sp-final__text { font-size: 0.95rem; margin-block-end: 18px; }
.sp-paid .wa-badge { display: none; }
.sp-paid .wa-fab::before { animation: none; }
@media (max-width: 699px) {
  .sp-paid .sp-shell { padding-inline: 18px; }
  .sp-paid .sp-hero { padding-block-start: 94px; }
  .sp-paid .sp-hero__title { font-size: 32px; }
  .sp-paid .sp-hero__text { font-size: 0.95rem; }
  .sp-paid .sp-cta .sp-btn { width: 100%; max-width: none; }
  .sp-paid .sp-cta .sp-btn--lg { padding: 12px 16px; font-size: 16px; }
  .sp-paid .sp-cta__note { font-size: 12px; line-height: 1.45; }
  .sp-paid .sp-paid-capabilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; gap: 5px 8px; }
  .sp-paid .sp-paid-capabilities li { padding: 0; border: none; }
  .sp-paid .sp-section--quiz .sp-section__lead { font-size: 0.8rem; line-height: 1.4; }
  .sp-paid .sp-proof__card { display: block; }
  .sp-paid .sp-quiz__nav { flex-direction: row; flex-wrap: wrap; }
  .sp-paid .sp-quiz__nav .sp-btn--primary { flex: 1; width: auto; min-width: 150px; }
  .sp-paid .sp-quiz__nav [data-quiz-back] { width: auto; order: 0; padding-inline: 12px; }
  .sp-paid .sp-quiz__head, .sp-paid .sp-quiz__time { padding-right: 54px; }
  .sp-paid .wa-fab { width: 48px; height: 48px; }
  .sp-paid .wa-fab svg { width: 26px; height: 26px; }
}
@media (min-width: 700px) {
  .sp-paid .sp-quiz { padding: 24px 28px; }
  .sp-paid .sp-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-paid .sp-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-paid .sp-proof__card { display: block; }
}

/* Study hero refresh — 2026-10-30. Presentation only; existing actions intact. */
.sp-paid .sp-hero { padding-block: 100px 18px; }
.sp-paid .sp-hero .sp-hero__grid { max-width: 1120px; }
.sp-paid .sp-hero .sp-hero__copy { max-width: none; margin: 0; text-align: start; }
.sp-paid .sp-hero .sp-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin-block-end: 16px; color: var(--silver-light);
  font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.08em;
}
.sp-paid .sp-hero .sp-eyebrow::before {
  content: ''; width: 22px; height: 2px; flex: none; background: var(--silver);
}
.sp-paid .sp-hero .sp-hero__title {
  max-width: 23ch; margin-block-end: 16px;
  font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1.14;
  letter-spacing: -0.025em; text-wrap: balance;
}
.sp-paid .sp-hero .sp-hero__text {
  max-width: 58ch; margin: 0 0 18px; color: var(--sp-text-secondary);
  font-size: 1rem; line-height: 1.6;
}
.sp-paid .sp-hero .sp-hero__price {
  margin: 0 0 9px; color: var(--silver-light); font-size: 1.3rem; line-height: 1.35;
}
.sp-paid .sp-hero .sp-hero__price strong { font-weight: 700; }
.sp-paid .sp-hero .sp-hero__scope {
  max-width: 62ch; margin: 0 0 20px; color: var(--sp-text-secondary);
  font-size: 0.85rem; line-height: 1.55;
}
.sp-paid .sp-hero .sp-cta { align-items: flex-start; gap: 11px; }
.sp-paid .sp-hero .sp-cta .sp-btn {
  max-width: 100%; min-width: 0; padding: 15px 22px;
  border-radius: 12px; font-size: 1rem; line-height: 1.4;
  border: 1px solid var(--silver-light);
}
.sp-paid .sp-hero .sp-cta .sp-btn:hover { border-color: var(--silver); }
.sp-paid .sp-hero .sp-cta .sp-btn:focus-visible { outline-offset: 5px; }
.sp-paid .sp-hero .sp-cta__note {
  max-width: 100%; font-size: 0.76rem; line-height: 1.6; color: var(--sp-text-secondary);
}
.sp-paid .sp-hero .sp-paid-capabilities {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1120px; gap: 8px 12px; padding-block: 16px 0;
  margin-block-start: 20px; border-block-start: 1px solid var(--sp-border);
  text-align: start; font-size: 0.8125rem; line-height: 1.55;
}
.sp-paid .sp-hero .sp-paid-capabilities li { padding: 0; border: none; }
[dir="rtl"] .sp-paid .sp-hero .sp-hero__title { letter-spacing: normal; line-height: 1.35; }
[dir="rtl"] .sp-paid .sp-hero .sp-eyebrow { letter-spacing: normal; }
@media (max-width: 699px) {
  .sp-paid .sp-hero { padding-block: 94px 14px; }
  .sp-paid .sp-hero .sp-eyebrow { margin-block-end: 12px; }
  .sp-paid .sp-hero .sp-hero__title { max-width: 24ch; font-size: 32px; margin-block-end: 12px; }
  .sp-paid .sp-hero .sp-hero__text { font-size: 0.95rem; line-height: 1.5; margin-block-end: 16px; }
  .sp-paid .sp-hero .sp-hero__price { font-size: 1.15rem; margin-block-end: 7px; }
  .sp-paid .sp-hero .sp-hero__scope { font-size: 0.875rem; line-height: 1.5; margin-block-end: 17px; }
  .sp-paid .sp-hero .sp-cta { gap: 8px; }
  .sp-paid .sp-hero .sp-cta .sp-btn { width: 100%; padding: 13px 16px; }
  .sp-paid .sp-hero .sp-cta__note { align-self: center; text-align: center; font-size: 0.75rem; }
  .sp-paid .sp-hero .sp-paid-capabilities { margin-block-start: 18px; padding-block-start: 12px; gap: 6px 10px; font-size: 0.75rem; }
}
@media (min-width: 700px) {
  .sp-paid .sp-hero .sp-hero__grid {
    width: calc(100% - 48px); padding: 30px;
    background: var(--bg-panel); border: 1px solid var(--sp-border);
    border-radius: 20px;
  }
  .sp-paid .sp-hero .sp-paid-capabilities {
    width: calc(100% - 48px); padding-inline: 0; grid-template-columns: repeat(6, minmax(0, 1fr));
    text-align: center;
  }
}
@media (min-width: 960px) {
  .sp-paid .sp-hero { padding-block-start: 112px; }
  .sp-paid .sp-hero .sp-hero__grid { padding: 36px; }
  .sp-paid .sp-hero .sp-hero__copy {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.65fr);
    column-gap: 56px; position: relative;
  }
  .sp-paid .sp-hero .sp-hero__copy::before {
    content: ''; grid-column: 2; grid-row: 1 / 4; margin: -12px -12px -12px -20px;
    border: 1px solid var(--sp-border); border-radius: 14px;
    background: var(--bg-panel-light); pointer-events: none;
  }
  .sp-paid .sp-hero .sp-eyebrow { grid-column: 1; grid-row: 1; align-self: start; }
  .sp-paid .sp-hero .sp-hero__title { grid-column: 1; grid-row: 2; }
  .sp-paid .sp-hero .sp-hero__text { grid-column: 1; grid-row: 3; margin-block-end: 0; align-self: start; }
  .sp-paid .sp-hero .sp-hero__price { grid-column: 2; grid-row: 1; position: relative; }
  .sp-paid .sp-hero .sp-hero__scope { grid-column: 2; grid-row: 2; position: relative; align-self: center; margin-block-end: 14px; }
  .sp-paid .sp-hero .sp-cta { grid-column: 2; grid-row: 3; position: relative; align-self: end; align-items: stretch; }
  .sp-paid .sp-hero .sp-cta .sp-btn { width: 100%; }
  .sp-paid .sp-hero .sp-cta__note { text-align: center; }
  [dir="rtl"] .sp-paid .sp-hero .sp-hero__copy::before { margin-inline: -20px -12px; }
}

/* Conversion reassurance: native links and existing quiz controls. */
.sp-paid .sp-direct-wa {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding-block: 8px; color: var(--silver-light);
  font-size: 0.85rem; line-height: 1.5; text-decoration: underline;
  text-underline-offset: 4px; text-align: center;
}
.sp-paid .sp-direct-wa:hover { color: var(--silver); }
.sp-paid .sp-direct-wa:focus-visible { outline: 2px solid var(--silver); outline-offset: 4px; }
.sp-paid .sp-proof__actions .sp-proof-study { flex: 1 0 100%; width: 100%; margin-block-end: 6px; }
.sp-paid .sp-local-proof { display: grid; gap: 24px; max-width: 1000px; align-items: center; }
.sp-paid .sp-local-proof__image { overflow: hidden; border: 1px solid var(--sp-border); border-radius: var(--sp-radius); }
.sp-paid .sp-local-proof__image img { width: 100%; height: auto; }
.sp-paid .sp-local-proof h2 { font-size: 1.5rem; margin-block-end: 12px; }
.sp-paid .sp-local-proof p { margin-block-end: 16px; }
.sp-paid .sp-local-proof .sp-btn { max-width: 100%; }
.sp-paid [aria-labelledby="sp-how-title"], .sp-paid .sp-reassurance,
.sp-paid [aria-labelledby="sp-faq-title"] { padding-block: 32px; }
.sp-paid .sp-reassurance__grid { display: grid; gap: 16px; }
.sp-paid .sp-reassurance__grid article {
  padding: 20px; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm);
  background: var(--bg-panel);
}
.sp-paid .sp-reassurance__grid h3 { margin-block-end: 8px; font-size: 1rem; }
.sp-paid .sp-reassurance__grid p { font-size: 0.9rem; line-height: 1.65; }
.sp-paid .sp-meeting-note { margin-block-start: 24px; max-width: 70ch; color: var(--silver-light); }
.sp-paid .sp-reassurance > .sp-shell { max-width: 1000px; }
@media (min-width: 700px) {
  .sp-paid .sp-local-proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sp-paid .sp-reassurance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}