/* ---------------------------------------------------------------------------
   Saudi Arabic landing page.

   Loaded only by home_partials/ar/_page.html, after landing.css, so it extends
   the existing .lp-* system rather than replacing it. Every selector is
   prefixed .sa- and can never leak into the English or Indonesian pages.

   PALETTE: inherited, not invented. An earlier draft used its own green as the
   primary colour, which put the page off-brand against the rest of the site
   (navbar #246ba2, --lp-accent #3498db). Blue is primary here too; green is
   used only where it already carries meaning — the success CTA and WhatsApp.

   RTL: the page renders inside html[dir=rtl], so logical properties
   (margin-inline, padding-inline, inset-inline) are used rather than
   left/right.
--------------------------------------------------------------------------- */

:root {
  --sa-accent: var(--lp-accent, #3498db);
  --sa-accent-dark: var(--lp-accent-dark, #2980b9);
  --sa-accent-deep: #246ba2;              /* navbar tone — anchors dark panels */
  --sa-ink: #1b3a57;
  --sa-text: var(--lp-text-color, #2c3e50);
  --sa-muted: var(--lp-muted, #5f6e7b);
  --sa-line: #dbe8f3;
  --sa-surface: #f4faff;
  --sa-radius: var(--lp-radius, 18px);
  --sa-shadow: 0 4px 16px -4px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .06);
  --sa-shadow-lg: 0 18px 44px -12px rgba(27, 58, 87, .28);
  --sa-go: #16a34a;                       /* success only */
  --sa-whatsapp: #1f7a4d;
  --sa-gold: #e8a90c;
}

/* --- Page canvas ----------------------------------------------------------- */

/* The page's canvas is the site-wide conic-gradient grid painted on
   .main-content-container by common-styles.css — colours and geometry are the
   owner's and are deliberately NOT overridden here. Sections lay translucent
   washes on top of it instead of opaque fills, so the grid reads through the
   whole page as one stationary connected sheet.

   The navbar carries the TOP of the hero's softblend gradient (the owner's
   original landing wash), so the colour starts at the very top of the
   viewport and hands off to the hero below with no fill or border seam. Its
   vertical run ends on the yellow tone, which is what the hero's diagonal
   opens with — that is what keeps the junction smooth.

   On scroll it returns to white: a white ::before layer fades in over the
   gradient (gradients themselves cannot be transitioned). The layer sits at
   z-index -1 inside the navbar's own stacking context — above the element's
   background, below its content. The .sa-nav-scrolled class is toggled by
   the scroll listener in ar/_page.html, watching #appMainScroll. */
.top-navbar.navbar {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(233, 222, 250, .5), rgba(251, 252, 219, .5)), #fff !important;
  border-bottom: 0;
  transition: box-shadow .35s ease;
}

.top-navbar.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

.top-navbar.navbar.sa-nav-scrolled::before { opacity: 1; }
.top-navbar.navbar.sa-nav-scrolled { box-shadow: 0 2px 12px rgba(27, 58, 87, .08); }

/* At the top of the page the active nav-link's filled pill (الرئيسية) fights
   the gradient wash — let it merge, and fade the fill back in once the navbar
   returns to white on scroll. The !important matches top_navbar.css's own. */
.top-navbar.navbar:not(.sa-nav-scrolled) .nav-link.active {
  background-color: transparent !important;
}

/* --- Shared furniture ----------------------------------------------------- */

.sa-badge {
  display: inline-block;
  background: rgba(var(--lp-accent-rgb, 52, 152, 219), .1);
  border: 1px solid rgba(var(--lp-accent-rgb, 52, 152, 219), .28);
  color: var(--sa-accent-dark);
  border-radius: 999px;
  padding: .3rem .95rem;
  font-size: .86rem;
  font-weight: 700;
}

.sa-badge--flag {
  background: rgba(22, 163, 74, .1);
  border-color: rgba(22, 163, 74, .3);
  color: #15803d;
}

.sa-section-title {
  font-weight: 800;
  color: var(--sa-ink);
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  line-height: 1.55;
  margin-top: .85rem;
  letter-spacing: -.2px;
}

/* Short accent rule under centred section titles — the page's visual signature. */
.text-center > .sa-section-title::after {
  content: "";
  display: block;
  width: 54px;
  height: 4px;
  border-radius: 999px;
  margin: .9rem auto 0;
  background: linear-gradient(90deg, var(--sa-accent), var(--sa-accent-deep));
}

.sa-section-sub {
  color: var(--sa-muted);
  line-height: 1.95;
  max-width: 44rem;
  margin: .9rem auto 0;
}

/* Heading icons. Sized in em so they track the responsive clamp() on titles. */
.sa-title-icon {
  color: var(--sa-accent);
  margin-inline-end: .5rem;
  font-size: .82em;
  vertical-align: baseline;
}

.sa-lead-icon {
  color: var(--sa-muted);
  margin-inline-end: .1rem;
}

.sa-h1-icon {
  color: var(--sa-gold);
  margin-inline-end: .55rem;
  font-size: .78em;
  vertical-align: baseline;
}

/* 2. Hero CTA attention cue — the button's own glass sheen, on a loop.

   .lp-btn-success already ships a gloss: a white diagonal gradient parked at
   left:-100% that transitions to left:100% on hover. Looping that sweep is
   the cue — the hover effect, without the hover. No lift, no ring: the owner
   wants the shine only, with the button holding still.

   Hovering cancels the animation so the stock hover transition takes over
   cleanly rather than the two fighting over `left`.

   The class now sits on every «ابدأ مجاناً الآن» button. The two white ones
   (announcement bar, final panel) are not .lp-btn-success and so have no
   gloss layer of their own — they get one here, tinted blue because a white
   sheen is invisible on a white button. Same stacking trick as
   .lp-btn-success: the button is its own stacking context and the gloss sits
   at z-index -1, between its background and its text. */
.sa-cta-shine {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.sa-cta-shine:not(.lp-btn-success)::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(36, 107, 162, .16), transparent);
  transition: all .6s;
  z-index: -1;
}

.sa-cta-shine:not(.lp-btn-success):hover::before { left: 100%; }

.sa-cta-shine::before {
  animation: sa-cta-sheen 3.6s ease-in-out infinite;
}

.sa-cta-shine:hover::before { animation: none; }

@keyframes sa-cta-sheen {
  0%        { left: -100%; }
  45%, 100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sa-cta-shine::before { animation: none; }
  .sa-video-play::after { animation: none; }
}

.sa-btn-lg { font-size: 1.02rem; padding: .85rem 1.6rem; }

.sa-btn-whatsapp { --btn-bg: var(--sa-whatsapp); --btn-bg-hover: #17603c; --btn-color: #fff; }

/* Solid white with a real border. .lp-btn-outline's translucent fill plus
   backdrop blur read as washed out beside the solid green primary. */
.sa-btn-ghost {
  --btn-bg: #fff;
  --btn-bg-hover: #fff;
  --btn-color: var(--sa-accent-deep);
  border: 1.5px solid var(--sa-accent);
  font-weight: 700;
}

.sa-btn-ghost:hover {
  color: var(--sa-accent-deep);
  border-color: var(--sa-accent-deep);
}

/* --- Hero ----------------------------------------------------------------- */

/* The original softblend gradient, restored — it now begins at the navbar
   above and dissolves toward the bottom of the hero: the white top layer
   lightens it progressively on the way down, and the canvas grid takes over
   below. Values mirror .lp-hero--softblend in landing.css. */
.sa-hero {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .85) 100%),
    linear-gradient(-20deg, rgba(233, 222, 250, .65) 0%, rgba(251, 252, 219, .55) 100%);
}

.sa-hero-grid {
  display: grid;
  /* Image column intentionally the wider of the two: the screenshot carries
     more persuasion here than another line of copy would. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.sa-hero-brand { display: block; }

.sa-hero-heading {
  font-size: clamp(1.95rem, 4.3vw, 3.05rem);
  font-weight: 800;
  line-height: 1.45;
  color: var(--sa-ink);
  letter-spacing: -.5px;
}

.sa-hero-sub {
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  color: var(--sa-muted);
  line-height: 1.95;
  max-width: 40rem;
  margin-inline: 0;
}

.sa-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin: 1.4rem 0 1.1rem;
}

.sa-trust-line {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.35rem;
  font-size: .94rem;
  color: var(--sa-muted);
}

.sa-trust-line i { color: var(--sa-go); margin-inline-end: .3rem; }

/* Screenshots sit in a light frame so they read as product, not decoration. */
.sa-hero-visual,
.sa-feature-media {
  margin: 0;
  border-radius: var(--sa-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--sa-line);
  box-shadow: var(--sa-shadow-lg);
}

.sa-hero-visual img,
.sa-feature-media img { width: 100%; height: auto; display: block; }

.sa-hero-visual figcaption {
  font-size: .87rem;
  color: var(--sa-muted);
  padding: .7rem 1rem;
  border-top: 1px solid var(--sa-line);
  background: var(--sa-surface);
}

/* --- Proof cards ---------------------------------------------------------- */


.sa-proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 1.15rem;
}

.sa-proof-card {
  background: #fff;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius);
  padding: 1.5rem 1.35rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sa-proof-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--lp-accent-rgb, 52, 152, 219), .4);
  box-shadow: 0 14px 32px -10px rgba(27, 58, 87, .22);
}

.sa-proof-card--star { border-color: #f0d79b; background: #fffdf7; }

.sa-proof-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  margin-bottom: .9rem;
  background: rgba(var(--lp-accent-rgb, 52, 152, 219), .12);
  color: var(--sa-accent-dark);
}

.sa-icon-golden { background: rgba(232, 169, 12, .15); color: #b07d09; }
.sa-icon-balance { background: rgba(22, 163, 74, .12); color: #15803d; }

.sa-proof-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--sa-ink);
  margin-bottom: .5rem;
}

.sa-proof-card p {
  font-size: .95rem;
  color: var(--sa-muted);
  line-height: 1.95;
  margin: 0;
}

/* --- Video CTA (first section after the hero) ------------------------------ */

/* Areas, not a copy column: on mobile the card must land between the
   sub-line (head) and the points (rest) — see the template comment. */
.sa-video-grid {
  display: grid;
  /* Video column wider — as in the hero, the visual carries the persuasion. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  grid-template-areas:
    "head card"
    "rest card";
  column-gap: clamp(1.5rem, 4vw, 3.2rem);
  row-gap: 0;                             /* head/rest spacing comes from their own margins */
  align-content: center;
}

.sa-video-head { grid-area: head; align-self: end; }
.sa-video-rest { grid-area: rest; align-self: start; }
.sa-video-card { grid-area: card; align-self: center; }

/* Without a tutorial link there is no card — collapse to one column. */
.sa-video-grid--solo {
  grid-template-columns: 1fr;
  grid-template-areas: "head" "rest";
}

.sa-video-title {
  font-weight: 800;
  color: var(--sa-ink);
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  line-height: 1.55;
  letter-spacing: -.2px;
  margin-bottom: .7rem;
}

.sa-video-sub {
  color: var(--sa-muted);
  line-height: 2;
  font-size: clamp(.98rem, 1.6vw, 1.08rem);
  margin: 0 0 1.3rem;
}

.sa-video-points {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: .6rem;
}

.sa-video-points li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  color: var(--sa-text);
  font-weight: 700;
  line-height: 1.9;
}

.sa-video-points li > i {
  flex: 0 0 auto;
  margin-top: .5rem;
  color: var(--sa-accent);
}

.sa-video-points li > i.fa-bolt { color: var(--sa-gold); }
.sa-video-points li > i.fa-circle-check { color: var(--sa-go); }

.sa-video-card {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--sa-line);
  box-shadow: var(--sa-shadow-lg);
  transition: transform .2s ease, box-shadow .2s ease;
}

.sa-video-card img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .35s ease;
}

.sa-video-card:hover { transform: translateY(-3px); }
.sa-video-card:hover img { transform: scale(1.04); }

/* YouTube-shaped play chip with a soft pulse — the one motion cue that says
   "this plays" without any text over the thumbnail. */
.sa-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 46px;
  border-radius: 14px;
  background: #ff0033;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  padding-inline-start: .2rem;            /* optically centre the triangle */
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}

.sa-video-play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: sa-play-pulse 2.2s ease-out infinite;
}

@keyframes sa-play-pulse {
  from { box-shadow: 0 0 0 0 rgba(255, 0, 51, .5); }
  to   { box-shadow: 0 0 0 16px rgba(255, 0, 51, 0); }
}

.sa-video-actions { display: flex; }

/* --- Rules list (its own section under the FAQ) --------------------------- */

.sa-rules-section { padding-top: 0; }

.sa-rules { max-width: 60rem; margin: 0 auto; }

.sa-rules-details {
  background: #fff;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius);
  box-shadow: var(--sa-shadow);
}

.sa-rules-summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.35rem;
  font-weight: 800;
  color: var(--sa-accent-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}

.sa-rules-summary::-webkit-details-marker { display: none; }
.sa-rules-summary i { transition: transform .2s ease; }
.sa-rules-details[open] .sa-rules-summary i { transform: rotate(180deg); }

.sa-rules-list {
  margin: 0;
  padding: 0 1.35rem 1.35rem;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: .55rem 1.5rem;
}

.sa-rules-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  color: var(--sa-text);
  font-size: .94rem;
  line-height: 1.85;
}

/* Real markup icon, not a ::before pinned to a FontAwesome font-family — the
   FA7 upgrade renamed the family and silently blanked every such icon. */
.sa-rules-list li > i {
  flex: 0 0 auto;
  color: var(--sa-go);
  font-size: .78rem;
  margin-top: .55rem;
}

/* --- Integrations --------------------------------------------------------- */

/* Four cards on auto-fit: 4 across on desktop, 2x2 on tablet, single column
   on a phone — no fixed column count to maintain when a card is added. */
.sa-local-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.15rem;
}

/* Optional screenshot slot — see the template comment in saudi.html. */
.sa-local-media {
  margin: 0 0 1.15rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--sa-line);
}

.sa-local-media img { width: 100%; height: auto; display: block; }

.sa-local-card {
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius);
  padding: 1.6rem 1.35rem;
  background: #fff;
  box-shadow: var(--sa-shadow);
}

.sa-local-card--feature {
  position: relative;
  overflow: hidden;                       /* clips the accent strip to the radius */
  border-color: rgba(var(--lp-accent-rgb, 52, 152, 219), .35);
  background: linear-gradient(180deg, rgba(var(--lp-accent-rgb, 52, 152, 219), .07), #fff 60%);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Same lift language as the proof cards, so the page has one hover behaviour. */
.sa-local-card--feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -10px rgba(27, 58, 87, .22);
}

/* Top accent strip, tinted to match each card's icon chip: Noor green,
   Madrasti blue, Hijri gold. :has() keys off the chip classes already in the
   markup, so the templates stay untouched. */
.sa-local-card--feature::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sa-accent), var(--sa-accent-deep));
}

.sa-local-card--feature:has(.sa-icon-noor)::before,
.sa-local-card--feature:has(.sa-icon-sa)::before {
  background: linear-gradient(90deg, #2fbf71, #15803d);
}

/* Chrome card wears Chrome's own four colours, not the site accent. */
.sa-local-card--feature:has(.sa-icon-ext)::before {
  background: linear-gradient(90deg, #ea4335, #fbbc05, #34a853, #4285f4);
}

.sa-local-card--feature:has(.sa-icon-hijri)::before {
  background: linear-gradient(90deg, #f4c145, #b07d09);
}

.sa-local-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  margin-bottom: .95rem;
  background: rgba(var(--lp-accent-rgb, 52, 152, 219), .12);
  color: var(--sa-accent-dark);
}

/* الهوية: the "made for our schools" card wears the same green as Noor. */
.sa-icon-noor,
.sa-icon-sa { background: rgba(22, 163, 74, .12); color: #15803d; }
/* The page's own dark-panel gradient (same as the mid-CTA and final panels)
   with a white Chrome glyph: Google blue read as foreign to the palette. The
   card's four-colour top strip is what says "Chrome". */
.sa-icon-ext { background: linear-gradient(135deg, var(--sa-ink), var(--sa-accent-deep)); color: #fff; }
.sa-icon-hijri { background: rgba(232, 169, 12, .15); color: #b07d09; }

.sa-local-card h3 { font-size: 1.08rem; font-weight: 800; color: var(--sa-ink); margin-bottom: .5rem; }
.sa-local-card p { font-size: .94rem; color: var(--sa-muted); line-height: 1.95; margin: 0; }

/* Solid button in the page's dark-panel gradient, matching the icon chip —
   the only action in the section, dressed like the page's other dark
   destinations (mid-CTA band, final panel) rather than in a foreign brand
   colour. */
.sa-local-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1rem;
  font-weight: 700;
  font-size: .9rem;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, var(--sa-ink), var(--sa-accent-deep));
  border: 0;
  border-radius: 999px;
  padding: .55rem 1.15rem;
  box-shadow: 0 2px 6px rgba(27, 58, 87, .3);
  transition: box-shadow .2s ease, transform .2s ease, filter .2s ease;
}

.sa-local-link:hover {
  color: #fff;
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(27, 58, 87, .35);
  text-decoration: none;
}

/* --- Steps ---------------------------------------------------------------- */

.sa-steps-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 1.1rem;
}

.sa-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius);
  /* Inline-start padding keeps the heading clear of the corner numeral. */
  padding: 1.3rem 1.25rem 1.25rem;
  padding-inline-start: 3.4rem;
  box-shadow: var(--sa-shadow);
}

/* Sits inside the card's top corner rather than floating above its edge,
   where it read as a detached bubble. inset-inline-START, so in RTL it lands
   on the right — the side the heading text begins on. */
.sa-step-num {
  position: absolute;
  top: .9rem;                           /* top-anchored on desktop */
  inset-inline-start: .9rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sa-accent), var(--sa-accent-deep));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .92rem;
  /* The inherited body line-height (1.7+) makes the Arabic-Indic numeral sit
     low in the circle; a 1:1 line box lets place-items centre it for real. */
  line-height: 1;
  box-shadow: 0 3px 9px rgba(36, 107, 162, .35);
}

.sa-step h3 { font-size: 1.02rem; font-weight: 800; color: var(--sa-ink); margin: .3rem 0 .4rem; }
.sa-step p { font-size: .92rem; color: var(--sa-muted); line-height: 1.9; margin: 0; }

/* --- Features ------------------------------------------------------------- */

.sa-feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.3rem, 4vw, 3rem);
  align-items: center;
  margin-bottom: 3rem;
}

.sa-feature-row--flip .sa-feature-text { order: 2; }

.sa-feature-text h3 {
  font-size: clamp(1.25rem, 2.3vw, 1.6rem);
  font-weight: 800;
  color: var(--sa-ink);
  margin-bottom: .75rem;
  line-height: 1.6;
}

.sa-feature-text p { color: var(--sa-muted); line-height: 2.05; font-size: 1rem; margin: 0; }
.sa-feature-media a { display: block; position: relative; }

/* --- Footer app shortcuts ------------------------------------------------- */

/* --- Support panel -------------------------------------------------------- */

.sa-support-panel {
  position: relative;
  overflow: hidden;                       /* clips the accent strip to the radius */
  max-width: 62rem;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--sa-line);
  border-radius: 22px;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  box-shadow: var(--sa-shadow-lg);
}

/* The page's accent signature (the rule under section titles), scaled up to
   crown the one big panel on the page. */
.sa-support-panel::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sa-accent), var(--sa-accent-deep));
}

.sa-support-head { text-align: center; margin-bottom: 1.8rem; }

.sa-support-list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  /* Fixed 2x2: auto-fit left the fourth item alone on its own row. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem 2.2rem;
}

/* position: relative anchors the Bootstrap stretched-link, which makes the
   whole card the click target while the anchor itself only wraps the title. */
.sa-support-list li { display: flex; align-items: flex-start; gap: .85rem; position: relative; }

/* The card anchors must look exactly like the plain text they replaced —
   the stretched-link's pointer cursor is the only visible change. */
.sa-support-link, .sa-support-link:hover, .sa-support-link:focus { color: inherit; text-decoration: none; }

.sa-support-list > li > i {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(var(--lp-accent-rgb, 52, 152, 219), .12);
  color: var(--sa-accent-dark);
  font-size: 1.25rem;
}

/* Colour-code the chips by what they are — keyed off the FontAwesome classes
   already in the markup, so a list reorder can't break the mapping. Four
   same-blue chips flattened the panel into one grey block. */
.sa-support-list > li > i.fa-youtube { background: rgba(255, 0, 51, .09); color: #d9002b; }
.sa-support-list > li > i.fa-whatsapp { background: rgba(31, 122, 77, .12); color: var(--sa-whatsapp); }
.sa-support-list > li > i.fa-gift { background: rgba(232, 169, 12, .15); color: #b07d09; }

.sa-support-list strong { display: block; color: var(--sa-ink); font-weight: 800; margin-bottom: .15rem; }
.sa-support-list span { display: block; color: var(--sa-muted); font-size: .93rem; line-height: 1.85; }

.sa-support-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.sa-support-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  justify-content: center;
}

/* Branded pills, solid only on hover: the two secondary actions were muted
   text links that read as footnotes. Tinted fills give them real click
   affordance without competing with the one solid primary above them. */
.sa-support-links a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--sa-muted);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 700;
  border: 1px solid var(--sa-line);
  border-radius: 999px;
  padding: .55rem 1.25rem;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.sa-support-links a:has(.fa-whatsapp) {
  color: var(--sa-whatsapp);
  background: rgba(31, 122, 77, .1);
  border-color: rgba(31, 122, 77, .35);
}

.sa-support-links a:has(.fa-whatsapp):hover {
  background: var(--sa-whatsapp);
  border-color: var(--sa-whatsapp);
  color: #fff;
}

.sa-support-links a:has(.fa-youtube) {
  color: #d9002b;
  background: rgba(255, 0, 51, .07);
  border-color: rgba(255, 0, 51, .3);
}

.sa-support-links a:has(.fa-youtube):hover {
  background: #d9002b;
  border-color: #d9002b;
  color: #fff;
}

/* --- FAQ WhatsApp closer --------------------------------------------------- */

/* A contained conversion card at the end of the FAQ: whoever reaches it has
   one unanswered question standing between them and the trial. */
.sa-faq-cta {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  max-width: 46rem;
  margin: 2.6rem auto 0;
  background: rgba(31, 122, 77, .07);
  border: 1px solid rgba(31, 122, 77, .25);
  border-radius: 18px;
  padding: 1.35rem 1.5rem;
  text-align: start;
}

.sa-faq-cta-icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sa-whatsapp);
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 6px 16px rgba(31, 122, 77, .35);
}

.sa-faq-cta-text { flex: 1 1 auto; }

.sa-faq-cta-text strong {
  display: block;
  color: var(--sa-ink);
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: .15rem;
}

.sa-faq-cta-text span {
  display: block;
  color: var(--sa-muted);
  font-size: .95rem;
  line-height: 1.85;
}

/* --- Final CTA ------------------------------------------------------------ */

/* Navy panel with a success-green glow rising from the CTA corner — the
   closing panel borrows the colour of the action it asks for. */
.sa-final-panel {
  max-width: 62rem;
  margin: 0 auto;
  text-align: center;
  background:
    radial-gradient(110% 85% at 50% 100%, rgba(22, 163, 74, .3), transparent 60%),
    linear-gradient(135deg, var(--sa-ink), var(--sa-accent-deep));
  border-radius: 26px;
  padding: clamp(2.2rem, 5vw, 3.4rem) clamp(1.3rem, 4vw, 2.8rem);
  box-shadow: var(--sa-shadow-lg);
  color: #fff;
}

/* Solid success green: the countdown is the reason to act NOW, so it wears
   the action colour, not a neutral glass pill. */
.sa-final-kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--sa-go);
  border-radius: 999px;
  padding: .38rem 1.05rem;
  font-size: .92rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.1rem;
  box-shadow: 0 6px 18px rgba(22, 163, 74, .4);
}

.sa-final-title {
  font-weight: 800;
  color: #fff;
  font-size: clamp(1.6rem, 3.2vw, 2.35rem);
  line-height: 1.6;
  margin-bottom: .7rem;
}

.sa-final-sub {
  color: #d7e6f3;
  font-size: clamp(1rem, 1.7vw, 1.1rem);
  line-height: 1.95;
  margin-bottom: 1.8rem;
}

.sa-final-actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }

/* Closing reassurance under the buttons — the last words on the panel answer
   the last objection. */
.sa-final-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.15rem 0 0;
  color: rgba(255, 255, 255, .85);
  font-size: .93rem;
  font-weight: 600;
}

.sa-final-trust i { color: #4ade80; }
.sa-final-trust-sep { opacity: .5; }

.sa-final-ghost {
  --btn-bg: rgba(255, 255, 255, .12);
  --btn-bg-hover: rgba(255, 255, 255, .22);
  --btn-color: #fff;
  border: 1px solid rgba(255, 255, 255, .4);
  box-shadow: none !important;
}

.sa-final-ghost:hover { color: #fff; }

/* Footer app shortcuts (moved out of the tour section). */
.sa-footer-apps { font-size: .92rem; }
.sa-footer-apps a:hover { color: var(--sa-accent-dark) !important; }

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

@media (max-width: 900px) {
  .sa-hero-grid,
  .sa-feature-row { grid-template-columns: 1fr; }

  /* Stacked with the video between the sub-line and the points — the card is
     the strongest asset, so on a phone it comes right after the promise. */
  .sa-video-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "card" "rest";
    row-gap: 1.25rem;
  }
  .sa-feature-row--flip .sa-feature-text { order: 0; }
  .sa-faq-cta { flex-direction: column; text-align: center; }
}

@media (max-width: 768px) {
  /* Centre the brand mark on mobile by restoring .lp-brand-mark's own
     column-flex centring, which .sa-hero-brand{display:block} turns off for
     the desktop layout. Do NOT touch .lp-brand-logo-wrapper: it is itself a
     flex container that centres the logo inside its circle, and overriding
     its display knocks the logo off-centre. */
  .sa-hero-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .sa-support-list { grid-template-columns: 1fr; gap: 1.15rem; }

  /* Narrower cards on a phone: shrink the numeral and its gutter together so
     the heading never collides with it. */
  .sa-step { padding-inline-start: 3rem; }
  /* On a phone the cards are short one-liners, so the numeral centres on the
     card; on desktop it stays anchored to the top beside the heading. */
  .sa-step-num { width: 28px; height: 28px; font-size: .85rem; top: 50%; transform: translateY(-50%); inset-inline-start: .8rem; }
}

@media (max-width: 576px) {
  .sa-hero-actions .lp-btn,
  .sa-final-actions .lp-btn { width: 100%; justify-content: center; }

  /* Support panel: full-width actions, stacked — small centred pills read as
     footnotes on a phone. */
  .sa-support-actions,
  .sa-support-links { width: 100%; }
  .sa-support-actions .lp-btn { width: 100%; justify-content: center; }
  .sa-support-links { flex-direction: column; gap: .8rem; }
  .sa-support-links a { width: 100%; justify-content: center; }
}