/* SEO Consultant — matched to Figma (exact values pulled from the design via the
   Figma API). Font is League Spartan, inherited from the theme. */

.scx-page {
  --page:      var(--say9-primary-blue, #031D3D);   /* page background, inherited from the theme (Mac override included) */
  --panel:     var(--Main-Blue-800, #10335F);       /* AI bubble, chat border, input bar, form card, pills */
  --blue:      #077DFD;   /* user bubble, buttons, send, service row 1 */
  --cyan:      #74D8FA;   /* service row 2 */
  --lime:      #CBE389;   /* service row 3, online pill */
  --total-bg:  #E5F1FF;   /* total row / badge background */
  --ink:       #ffffff;
  --ink-dark:  #181F35;   /* text on light rows / total */
  --was-blue:  #99CAFF;   /* struck price on the blue row */
  --was-light: #7F88A2;   /* struck price on light rows + placeholders */
  --badge-ink: #4A5578;
  --muted:     #B9C0D4;   /* sub copy, field labels, input placeholder */
  --chip-ink:  #F6F7FC;
  --online-ink:#435A02;

  box-sizing: border-box; width: 100%;
  padding: clamp(44px, 7vh, 96px) clamp(16px, 4vw, 60px) clamp(48px, 7vw, 110px);
  background: var(--page);
  color: var(--ink);
  font-family: inherit;
}
.scx-page *, .scx-page *::before, .scx-page *::after { box-sizing: border-box; }
.scx-page [hidden] { display: none !important; }

.scx-shell { width: min(1320px, 100%); margin: 0 auto; }

/* spacing after the white "Our services" section, before the navy "Our work" section */
.scx-mkt-gap { height: clamp(48px, 7vw, 96px); background: var(--say9-primary-blue, #031D3D); }

/* ---------------- HERO (state A) ---------------- */
.scx-hero__head { text-align: center; max-width: 940px; margin: 0 auto clamp(28px, 4vw, 56px); }
.scx-badge {
  display: inline-block; background: var(--panel); color: var(--ink);
  border-radius: 200px; padding: 6px 14px 4px;
  font-size: 18px; font-weight: 500; line-height: 20px; margin-bottom: 20px;
}
.scx-intro__title {
  margin: 0; color: var(--ink); font-weight: 700;
  font-size: clamp(34px, 4.6vw, 60px); line-height: 1.06; letter-spacing: -.01em;
}

.scx-hero__row {
  display: grid; grid-template-columns: 1fr minmax(0, 610px);
  gap: clamp(24px, 4vw, 79px); align-items: end;   /* mascot sits on the form's baseline */
}
/* mascot ~70% of the form height (30% smaller), bottom-anchored */
.scx-hero__media { position: relative; height: clamp(300px, 24vw, 364px); overflow: hidden; }
/* the mp4 is square with ~38% empty space above the elephant (which sits in the bottom
   ~62%, beakers at the very bottom edge). Scale the video to ~162% (1/0.62) and bottom-align
   so the elephant fills the full height; the empty top and thin side padding overflow and clip. */
.scx-hero__video {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  /* max-* none defeats the theme's global `img { max-height:100%; max-width:100% }`
     which otherwise clamps the mascot img and shrinks it. 162% ≈ 1/0.62 shows the whole
     elephant (bottom 62% of the source) filling the height, head not clipped. */
  height: 162%; width: auto; max-width: none; max-height: none;
  aspect-ratio: 1 / 1; display: block;
}

.scx-intro__card {
  background: var(--panel); border-radius: 14px;
  padding: clamp(26px, 3vw, 50px);
  min-height: clamp(430px, 34vw, 520px);   /* taller hero so the mascot reads larger on the page */
  display: flex; flex-direction: column; gap: 20px;
}
/* the form is a flex column so its fields gap evenly and the button can center */
#scx-start { display: flex; flex-direction: column; gap: 20px; }
.scx-intro__sub { margin: 0; color: var(--muted); font-size: 16px; line-height: 22px; font-weight: 400; }

.scx-field { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.scx-field > span { font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--muted); }
.scx-field input {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--page); border: none; border-radius: 8px;
  padding: 12px; outline: none; transition: box-shadow .15s;
}
.scx-field input::placeholder { color: var(--was-light); }
.scx-field input:focus { box-shadow: 0 0 0 2px var(--blue); }
.scx-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.scx-turnstile { margin: 2px 0; }

/* primary pill button (Start the chat / Book a call) with a round arrow chip */
.scx-btn { font: inherit; border: none; cursor: pointer; }
.scx-btn--primary {
  align-self: flex-start; display: inline-flex; align-items: center;
  background: var(--blue); color: #fff; border-radius: 200px;
  padding: 12px 30px; font-size: 18px; font-weight: 600;
  transition: filter .15s;
}
.scx-btn--primary:hover { filter: brightness(1.08); }
.scx-btn[disabled] { opacity: .55; cursor: not-allowed; }
.scx-start-btn { align-self: center; margin-top: 20px; }   /* centered, extra gap above */
.scx-error { color: #ff9d9d; font-size: 14px; margin: 4px 0 0; }
.scx-privacy { color: var(--was-light); font-size: 13px; margin: 2px 0 0; }

/* ---------------- CHAT (state B) — header + box + input, three stacked pieces ---------------- */
.scx-chat-wrap { position: relative; width: min(1200px, 100%); margin: 0 auto; }

/* header: avatar + name + online pill, above the box */
.scx-chat__head { display: flex; align-items: center; gap: clamp(14px, 2vw, 37px); margin-bottom: 20px; }
.scx-avatar { width: clamp(56px, 5vw, 78px); height: clamp(56px, 5vw, 78px); flex: 0 0 auto; }
.scx-avatar svg { width: 100%; height: 100%; display: block; }
.scx-chat__id { display: flex; flex-direction: column; gap: 8px; }
.scx-chat__id strong { font-weight: 700; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; color: var(--ink); }
.scx-online {
  align-self: flex-start; background: var(--lime); color: var(--online-ink);
  font-size: 19px; font-weight: 400; line-height: 27px;
  border-radius: 34px; padding: 0 20px;
}
.scx-online i { display: none; }

/* the messages box: transparent, just an outlined region */
.scx-chat {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  height: clamp(420px, 56vh, 620px);
  background: transparent;
  border: 3px solid var(--panel); border-radius: 32px;
  overflow: hidden;
}
.scx-messages {
  flex: 1 1 auto; overflow-y: auto;
  padding: clamp(22px, 3vw, 40px) clamp(18px, 2.5vw, 30px);
  display: flex; flex-direction: column; gap: 20px;
  scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior: contain;
}
.scx-messages::-webkit-scrollbar { width: 0; height: 0; display: none; }

.scx-msg { display: flex; max-width: 100%; animation: scx-in .25s ease; }
.scx-msg--ai { justify-content: flex-start; }
.scx-msg--user { justify-content: flex-end; }
@keyframes scx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.scx-bubble {
  max-width: min(70%, 774px);
  padding: clamp(18px, 2vw, 30px);
  font-size: clamp(17px, 1.7vw, 22px); line-height: 1.4;
  white-space: pre-wrap; word-wrap: break-word;
}
.scx-msg--ai .scx-bubble { background: var(--panel); color: var(--ink); border-radius: 22px 22px 22px 0; }
.scx-msg--user .scx-bubble { background: var(--blue); color: #fff; border-radius: 22px 22px 0 22px; padding: 15px 30px; }

/* chips */
.scx-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.scx-chip {
  font: inherit; font-size: clamp(16px, 1.6vw, 22px); font-weight: 400; line-height: 1.4;
  color: var(--chip-ink); background: var(--panel); border: none; border-radius: 100px;
  padding: 9px 22px; cursor: pointer; transition: filter .15s;
}
.scx-chip:hover { filter: brightness(1.15); }
.scx-chip[disabled] { opacity: .5; cursor: default; }
.scx-chip--new { background: var(--blue); color: #fff; font-weight: 600; }   /* inline "start a new campaign" */

/* typing indicator */
.scx-typing { display: inline-flex; gap: 5px; padding: 22px 26px; background: var(--panel); border-radius: 22px 22px 22px 0; }
.scx-typing i { width: 8px; height: 8px; border-radius: 50%; background: #7f9bbb; animation: scx-bounce 1.2s infinite; }
.scx-typing i:nth-child(2) { animation-delay: .2s; }
.scx-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes scx-bounce { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* input bar: its own #10335F container, separate from the box */
.scx-composer {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 24px);
  background: var(--panel); border-radius: 22px;
  padding: clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 20px);
  margin-top: 16px;
}
.scx-composer__input {
  flex: 1 1 auto; font: inherit; font-size: 19px; color: var(--ink);
  background: var(--page); border: none; border-radius: 200px;
  padding: 18px 30px; outline: none;
}
.scx-composer__input::placeholder { color: var(--muted); }
.scx-send {
  flex: 0 0 auto; width: clamp(52px, 4vw, 67px); height: clamp(52px, 4vw, 67px);
  border-radius: 50%; border: none; cursor: pointer; color: #fff;
  display: grid; place-items: center; background: var(--blue); transition: filter .15s;
}
.scx-send:hover { filter: brightness(1.08); }
.scx-send[disabled] { opacity: .5; cursor: not-allowed; }

/* pop-out mascot: sits OVER the chat's right edge (hands visible over the border),
   leans out into the margin, centered vertically. Left edge is feathered so the part
   over the chat blends (and the sliding edge shows no hard line). */
.scx-peek {
  --peek-w: clamp(120px, 12vw, 149px);
  /* overlap onto the chat border must scale WITH the video width (which is 12vw), so the
     mascot's panel edge stays glued to the chat border at every screen size (~28px at 150). */
  --peek-over: calc(var(--peek-w) * 0.187);
  position: absolute; top: 50%;
  right: calc(-1 * (var(--peek-w) - var(--peek-over)));
  width: var(--peek-w);
  transform: translate(0, -50%);   /* placed statically in the page; no fly-in/out */
  z-index: 5; pointer-events: none;
}
/* legacy trigger classes kept as no-ops: the peek stays placed and just plays */
.scx-peek.is-in, .scx-peek.is-out { transform: translate(0, -50%); opacity: 1; }
.scx-peek__video {
  width: 100%; height: auto; display: block; border: 0;
  /* video bg re-exported to match page (#031D3D); soft all-edge feather kept so no hard rectangle edge */
  -webkit-mask-image: radial-gradient(116% 106% at 50% 50%, #000 70%, transparent 100%);
          mask-image: radial-gradient(116% 106% at 50% 50%, #000 70%, transparent 100%);
}
@media (max-width: 900px) { .scx-peek { display: none; } }

/* ---------------- PACKAGE (below the chat) ---------------- */
/* Widen for up to 3 tier cards side by side; a single card still reads fine. */
.scx-result { width: min(1440px, 100%); margin: clamp(34px, 5vw, 60px) auto 0; scroll-margin-top: 110px; }
.scx-result__head { text-align: center; margin-bottom: clamp(20px, 3vw, 40px); }
.scx-result__head .scx-badge { margin-bottom: 20px; }
.scx-result__title { margin: 0; font-weight: 700; font-size: clamp(30px, 4.4vw, 60px); line-height: 1.06; color: var(--ink); }

/* 1-3 tier cards. --cols is set inline to the card count; auto stacks on narrow screens. */
.scx-result__grid {
  display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  gap: 20px; align-items: start;
}
@media (max-width: 1100px) { .scx-result__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .scx-result__grid { grid-template-columns: 1fr; } }

.scx-pkg {
  background: var(--panel); border-radius: 32px;
  padding: clamp(18px, 2.4vw, 33px) clamp(20px, 3vw, 41px);
  height: 100%;
}
.scx-pkg--recommended {
  outline: 2px solid var(--blue); outline-offset: -2px;
  box-shadow: 0 0 0 6px rgba(0,0,0,.12);
}
.scx-pkg__why {
  font-size: 14px; font-weight: 700; line-height: 1.3;
  color: var(--cyan); margin-bottom: 12px;
}
.scx-pkg__why.is-rec { color: var(--blue); }
.scx-pkg__head { display: flex; align-items: center; gap: 11px; margin-bottom: 25px; }
.scx-pkg__head svg { width: clamp(26px, 2.4vw, 34px); height: clamp(26px, 2.4vw, 34px); stroke: #fff; flex: none; }
.scx-pkg__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scx-pkg__head h3 { margin: 0; font-weight: 700; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; color: var(--ink); }

/* In the multi-card grid the viewport-based clamp() sizes are too large for a
   narrow column, so dial the in-card type down when cards sit side by side. */
.scx-result__grid--multi .scx-pkg__head h3 { font-size: 22px; }
.scx-result__grid--multi .scx-row { padding: 16px 18px; }
.scx-result__grid--multi .scx-row__name { font-size: 19px; }
.scx-result__grid--multi .scx-row__prices .scx-now { font-size: 19px; }
.scx-result__grid--multi .scx-was { font-size: 15px; }
.scx-result__grid--multi .scx-total { padding: 18px 20px; }
.scx-result__grid--multi .scx-total__label { font-size: 26px; }
@media (min-width: 1101px) {
  /* When all three sit in one row, keep them compact regardless of viewport width. */
  .scx-result__grid--multi .scx-row__top { flex-wrap: wrap; }
}
.scx-pkg__note {
  margin: 0 0 15px; font-size: 15px; color: #ffcf8f;
  background: rgba(255,180,80,.1); border: 1px solid rgba(255,180,80,.35);
  border-radius: 10px; padding: 10px 14px;
}

.scx-row {
  border-radius: 14px; padding: clamp(18px, 2vw, 25px) clamp(22px, 3.4vw, 50px);
  display: flex; flex-direction: column; gap: 12px; margin-bottom: 15px;
}
.scx-row--blue { background: var(--blue); color: #fff; }
.scx-row--cyan { background: var(--cyan); color: var(--ink-dark); }
.scx-row--lime { background: var(--lime); color: var(--ink-dark); }
.scx-row__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.scx-row__name { font-weight: 700; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.1; }
.scx-row__prices { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.scx-was { text-decoration: line-through; font-weight: 400; font-size: clamp(18px, 1.8vw, 24px); }
.scx-row--blue .scx-was { color: var(--was-blue); }
.scx-row--cyan .scx-was, .scx-row--lime .scx-was { color: var(--was-light); }
.scx-now { font-weight: 700; font-size: clamp(22px, 2.6vw, 34px); }
.scx-row__bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.scx-metrics { display: flex; align-items: center; gap: 6px; }
.scx-badgechip {
  display: inline-flex; align-items: center; background: var(--total-bg); color: var(--badge-ink);
  font-size: 16px; font-weight: 400; border-radius: 20px; padding: 5px 12px;
}
.scx-qty { font-size: 16px; font-weight: 400; }
/* Buy now — dark blue on every row (Edgar's request) */
.scx-buy {
  font: inherit; font-weight: 600; font-size: 16px; text-decoration: none;
  color: #fff; background: var(--page); border: none; border-radius: 200px;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; transition: filter .15s;
}
.scx-buy:hover { filter: brightness(1.5); }

.scx-total {
  background: var(--total-bg); color: var(--ink-dark);
  border-radius: 14px; padding: clamp(20px, 2.2vw, 25px) clamp(22px, 3.4vw, 50px);
  display: flex; flex-direction: column; gap: 16px; margin-top: 15px;
}
.scx-total__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.scx-total__label { font-weight: 700; font-size: clamp(28px, 4vw, 60px); line-height: 1.05; }
.scx-total__label small { font-size: .5em; font-weight: 700; }
.scx-total__prices { display: flex; align-items: baseline; gap: 10px; }
.scx-total .scx-was { color: var(--was-light); }
.scx-total .scx-now { color: var(--ink-dark); }
.scx-total__bottom { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.scx-tag { background: var(--panel); color: var(--total-bg); font-size: 16px; font-weight: 400; border-radius: 20px; padding: 3px 13px; }
/* Total Buy now — same pill as the per-row .scx-buy, but blue (Figma) */
.scx-total__buy {
  font: inherit; font-weight: 600; font-size: 16px; text-decoration: none;
  color: #fff; background: var(--blue); border: none; border-radius: 200px;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; transition: filter .15s;
}
.scx-total__buy:hover { filter: brightness(1.08); }

.scx-result__cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 25px; }
.scx-cta__book {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--blue); color: #fff; font-weight: 600; font-size: 18px;
  border-radius: 200px; padding: 12px 24px; transition: filter .15s;
}
.scx-cta__book:hover { filter: brightness(1.08); }
.scx-cta__new {
  font: inherit; font-weight: 600; font-size: 18px; cursor: pointer;
  background: transparent; color: var(--ink); border: 1px solid rgba(255,255,255,.28);
  border-radius: 200px; padding: 12px 24px; transition: background .15s;
}
.scx-cta__new:hover { background: rgba(255,255,255,.06); }
.scx-cta__custom {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-weight: 600; font-size: 18px;
  background: transparent; color: var(--ink); border: 1px solid rgba(255,255,255,.28);
  border-radius: 200px; padding: 12px 24px; transition: background .15s;
}
.scx-cta__custom:hover { background: rgba(255,255,255,.06); }

/* ---------------- INFO BLOCKS: "What can you ask it?" / "What can it help you with?" ---------------- */
/* Self-contained (render OUTSIDE .scx-page → no scoped vars). Values are the exact Figma hex/spec. */
/* Continuous full-width #10335F band behind both info blocks. All sizes are
   anchored to the 1920px Figma frame (px = design value, vw = px/1920*100) so the
   whole thing stays Figma-proportioned at any width — titles never wrap. */
/* Block 1 sits on the dark page bg (#031D3D from body). Block 2's #10335F is a
   background layer that extends 100px ABOVE and BELOW the block via ::before at
   z-index:-1, so it tucks UNDER block 1's bottom and the "Our services" top —
   no rounded corners, no dark gaps at the seams. */
.scx-ask { background: transparent; padding: clamp(30px, 3.65vw, 70px) 0; }
.scx-help { position: relative; background: transparent; padding: clamp(36px, 4.5vw, 90px) clamp(16px, 10.16vw, 195px) clamp(40px, 4.7vw, 90px); }
.scx-help::before { content: ""; position: absolute; left: 0; right: 0; top: -100px; bottom: -100px; background: var(--Main-Blue-800, #10335F); z-index: -1; }
.scx-ask__inner, .scx-help__inner { width: 100%; }

/* Block 1 — full-bleed #C6E1FF panel (Figma: r60, padding 140) + 3 white cards */
.scx-ask__panel {
  position: relative; overflow: hidden;
  background: #C6E1FF; border-radius: clamp(24px, 3.1vw, 60px);
  padding: clamp(28px, 7.29vw, 140px);
}
.scx-ask__glass { position: absolute; top: clamp(24px, 10.3vw, 197px); right: clamp(16px, 3.33vw, 64px); width: clamp(110px, 15.26vw, 293px); height: auto; pointer-events: none; }
.scx-ask__title { margin: 0 0 clamp(4px, 0.4vw, 8px); color: #181F35; font-weight: 700; font-size: clamp(34px, 4.27vw, 82px); line-height: 1.08; }
.scx-ask__sub { margin: 0 0 clamp(30px, 3.65vw, 70px); color: #181F35; font-weight: 400; font-size: clamp(15px, 1.25vw, 24px); line-height: 1.55; max-width: 68em; }
.scx-ask__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.25vw, 24px); }
.scx-ask__card { background: #fff; border-radius: 24px; padding: clamp(18px, 1.67vw, 32px); }
.scx-ask__card-head { display: flex; align-items: center; gap: clamp(12px, 0.94vw, 18px); margin-bottom: clamp(10px, 0.83vw, 16px); }
.scx-ask__card-head h3 { margin: 0; color: #181F35; font-weight: 700; font-size: clamp(22px, 1.77vw, 34px); line-height: 1.1; white-space: nowrap; }
.scx-ask__ico { width: clamp(40px, 2.6vw, 50px); height: clamp(40px, 2.6vw, 50px); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.scx-ask__ico svg { display: block; width: 48%; height: 48%; }
.scx-ask__ico--learn { background: #AAE9FF; }
.scx-ask__ico--rec   { background: #FFF6B4; }
.scx-ask__ico--grow  { background: #CBE389; }
.scx-ask__text { margin: 0; color: #30374F; font-weight: 400; font-size: clamp(15px, 1.25vw, 24px); line-height: 1.6; }
.scx-ask__list { margin: 0; padding-left: 1.2em; list-style: disc outside; color: #30374F; font-weight: 400; font-size: clamp(18px, 1.67vw, 32px); line-height: 1.6; }
.scx-ask__list li { list-style: disc; margin: 0; }

/* Block 2 — rows on the #10335F band (Figma: heading 88, icon 75px circle, title 36.5, 3D check outside) */
.scx-help__panel { padding: 0; }
.scx-help__title { margin: 0 0 clamp(28px, 3.8vw, 73px); color: #F8F9FD; font-weight: 700; font-size: clamp(34px, 4.58vw, 88px); line-height: 1.05; }
.scx-help__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(12px, 1.34vw, 26px); }
.scx-help__row { display: flex; align-items: center; gap: clamp(14px, 2.63vw, 50px); }
.scx-help__card { flex: 1 1 auto; min-width: 0; background: var(--say9-primary-blue, #031D3D); border-radius: clamp(16px, 1.34vw, 26px); padding: clamp(18px, 1.79vw, 34px); display: flex; align-items: center; gap: clamp(14px, 1.34vw, 26px); }
.scx-help__ico { width: clamp(52px, 3.9vw, 75px); height: clamp(52px, 3.9vw, 75px); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.scx-help__ico svg { display: block; width: 60%; height: 60%; }
.scx-help__ico--find    { background: #FFF6B4; }
.scx-help__ico--pkg     { background: #AAE9FF; }
.scx-help__ico--learn   { background: #CBE389; }
.scx-help__ico--compare { background: #FFD4C5; }
.scx-help__ico--answers { background: #D9D6FE; }
.scx-help__body { flex: 1 1 auto; min-width: 0; }
.scx-help__body h3 { margin: 0 0 8px; color: #fff; font-weight: 700; font-size: clamp(18px, 1.9vw, 36px); line-height: 1.15; }
.scx-help__body p { margin: 0; color: #B9C0D4; font-weight: 400; font-size: clamp(14px, 1.34vw, 26px); line-height: 1.5; }
.scx-help__check { flex: none; width: clamp(40px, 3.75vw, 72px); height: auto; display: block; }
/* Tablet/mobile: 3 columns crack at these widths — drop to 2 then 1, and let the
   card titles wrap instead of overflowing (nowrap is only safe in the wide 3-up view). */
@media (max-width: 1024px) {
  .scx-ask__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scx-ask__card-head h3 { white-space: normal; }
  .scx-ask__glass { display: none; }
}
@media (max-width: 600px) {
  .scx-ask__cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .scx-help__check { display: none; } }

/* ---------------- responsive ---------------- */
/* Tablet: the fixed 610px form column eats most of the width and squeezes the
   mascot video. Narrow the form (right inputs) so the video keeps its room. */
@media (min-width: 861px) and (max-width: 1180px) {
  .scx-hero__row { grid-template-columns: 1fr minmax(0, 46%); gap: clamp(18px, 3vw, 40px); }
}
@media (max-width: 860px) {
  .scx-hero__row { grid-template-columns: 1fr; gap: 12px; }
  .scx-hero__media { order: -1; min-height: 300px; }
  .scx-intro__card { max-width: 560px; width: 100%; margin: 0 auto; }
  .scx-bubble { max-width: 86%; }
}

/* ---------- "Our services" block: click-only tab UI (Screenshot_3), SEO Consultant page ---------- */
.section-services .swiper-wrapper { display: block !important; transform: none !important; }
.section-services .swiper-slide { display: none !important; }
.section-services .swiper-slide.scx-tab-on { display: block !important; }
.scx-svc-nav { display: flex; gap: 14px; justify-content: center; margin-top: 24px; }
.scx-svc-arrow {
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: filter .15s;
}
.scx-svc-prev { background: #181F35; color: #fff; }
.scx-svc-next { background: #077DFD; color: #fff; }
.scx-svc-arrow:hover { filter: brightness(1.12); }