/* BeOnTop inner pages, November 2026: the homepage's design language as a kit.
   Loaded on the AI pages and on every designed service page, after the page's own bundle.
   Every rule starts with [dir] so it outranks the bundle's [dir] rules.
   Motion is transform and opacity only, and all of it stops for reduced motion. */

.bot-page {
  --ink: #120d2b;
  --indigo: #261e4a;
  --violet: #6848e4;
  --lilac: #b9a7ff;
  --coral: #f34c3a;
  --amber: #ebb430;
  --mint: #13c98f;
  --azure: #4f8fe8;
  --bg: #f7f6fc;
  --line: #e9e6f4;
  --text: #3b3756;
  --muted: #6b6784;
  --out: cubic-bezier(.23, 1, .32, 1);
  --wrap: 1270px;
  --shadow: 0 1px 2px rgba(38, 30, 74, .05), 0 12px 32px -12px rgba(38, 30, 74, .16);
  --shadow-lg: 0 2px 4px rgba(38, 30, 74, .06), 0 28px 60px -20px rgba(38, 30, 74, .28);
}

/* ---------- Body base: generic elements only, so every class rule below wins ---------- */

[dir] .bp-body { display: block; color: var(--text); font-size: 17px; line-height: 1.68; }
[dir] .pg-sec { padding: 84px 22px; background: #fff; }
[dir] .pg-sec--tint { background: var(--bg); }
[dir] .pg-sec--tight { padding-top: 56px; padding-bottom: 56px; }
[dir] .pg-in { max-width: var(--wrap); margin: 0 auto; }
[dir] .pg-head { max-width: 800px; margin: 0 auto 38px; text-align: center; }
[dir] .pg-head--left { margin-left: 0; text-align: left; }
[dir] .bp-body :where(h2) {
  margin: 0 0 14px;
  padding: 0;
  color: var(--indigo);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -.018em;
  text-align: inherit;
  text-wrap: balance;
}
[dir] .bp-body :where(h3) { margin: 0 0 8px; padding: 0; color: var(--indigo); font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -.008em; text-align: left; }
[dir] .bp-body :where(p) { margin: 0 0 14px; padding: 0; color: var(--text); font-size: 17px; line-height: 1.68; }
[dir] .bp-body :where(p):last-child { margin-bottom: 0; }
[dir] .bp-body :where(strong) { color: var(--indigo); font-weight: 700; }
[dir] .bp-body a:not([class]) { color: var(--violet); text-decoration: none; box-shadow: 0 1px 0 rgba(104, 72, 228, .3); transition: box-shadow 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  [dir] .bp-body a:not([class]):hover { box-shadow: 0 2px 0 var(--violet); }
}
[dir] .bp-body :where(ul, ol) { margin: 6px 0 16px; padding: 0; list-style: none; }
[dir] .bp-body :where(li) { position: relative; margin: 0 0 9px; padding: 0 0 0 26px; color: var(--text); font-size: 16.5px; line-height: 1.6; }
[dir] .bp-body :where(li)::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
[dir] .bp-body .pg-no li::before { background: #efe9e6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.6 3.6l4.8 4.8M8.4 3.6L3.6 8.4' fill='none' stroke='%23b3261e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat; }


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

[dir] .pg-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  font-size: 16px;
  line-height: normal;
  background:
    radial-gradient(52% 78% at 76% 34%, rgba(104, 72, 228, .62), transparent 68%),
    radial-gradient(34% 52% at 100% 92%, rgba(243, 76, 58, .22), transparent 72%),
    radial-gradient(40% 60% at 4% 104%, rgba(19, 201, 143, .14), transparent 72%),
    linear-gradient(158deg, #1b1440 0%, #120d2b 58%, #191239 100%);
}
[dir] .pg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 90% at 72% 40%, #000 10%, transparent 76%);
  mask-image: radial-gradient(70% 90% at 72% 40%, #000 10%, transparent 76%);
}
[dir] .pg-hero :where(p, ul, ol, li, figure, dl, dt, dd) { margin: 0; padding: 0; font-size: inherit; line-height: inherit; list-style: none; }
[dir] .pg-hero :where(p, li, dd, dt, figure)::before { content: none; }
[dir] .pg-hero__wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  max-width: calc(var(--wrap) + 44px);
  min-height: 636px;
  margin: 0 auto;
  padding: 0 22px;
}
[dir] .pg-hero__copy { position: relative; z-index: 4; padding: 18px 0 96px; }
[dir] .pg-crumbs { margin: 0 0 30px; }
[dir] .pg-crumbs, [dir] .pg-crumbs a, [dir] .pg-crumbs span, [dir] .pg-crumbs li { color: rgba(255, 255, 255, .7); font-size: 13.5px; }
[dir] .pg-crumbs a:hover { color: #fff; }
[dir] .pg-crumbs ul, [dir] .pg-crumbs ol { margin: 0; padding: 0; }
[dir] .pg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--amber);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
[dir] .pg-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(235, 180, 48, .18);
}
[dir] .pg-hero h1 {
  margin: 18px 0 0;
  padding: 0;
  color: #fff;
  font-size: clamp(38px, 4.5vw, 62px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.024em;
  text-align: left;
  text-wrap: balance;
}
[dir] .pg-u {
  background: linear-gradient(90deg, #8b6bf4, #f4655a 58%, #e9d051) left bottom / 100% 5px no-repeat;
  padding-bottom: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
[dir] .pg-lede {
  max-width: 580px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, .8);
  font-size: 19px;
  line-height: 1.58;
  text-wrap: pretty;
}
[dir] .pg-lede a { color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .4); text-decoration: none; }
[dir] .pg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
[dir] .pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--out), box-shadow 200ms ease, background-color 200ms ease;
}
[dir] .pg-btn:active { transform: scale(.97); }
[dir] .pg-btn:focus-visible { outline: 3px solid var(--amber) !important; outline-offset: 3px; }
[dir] .pg-btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #dc3c28, #cf3522);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 14px 30px -10px rgba(217, 58, 38, .7);
}
[dir] .pg-btn--ghost { color: #fff; background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px rgba(255, 255, 255, .34) inset; }
[dir] .pg-btn--line { color: var(--indigo); background: #fff; box-shadow: 0 0 0 1px #cfc9e6 inset; }
@media (hover: hover) and (pointer: fine) {
  [dir] .pg-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 20px 36px -10px rgba(217, 58, 38, .8); }
  [dir] .pg-btn--ghost:hover { background: rgba(255, 255, 255, .12); }
  [dir] .pg-btn--line:hover { box-shadow: 0 0 0 1px var(--violet) inset; }
}
[dir] .pg-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 30px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .13);
  color: rgba(255, 255, 255, .84);
  font-size: 14px;
  font-weight: 500;
}
[dir] .pg-proof li { display: inline-flex; align-items: center; gap: 8px; }
[dir] .pg-proof li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }

/* ---------- Stage: the page's own example, in the homepage's cards ---------- */

[dir] .pg-stage { position: relative; align-self: stretch; min-height: 636px; }
[dir] .pg-orbit {
  position: absolute;
  left: 52%;
  top: 50%;
  width: 600px;
  height: 600px;
  margin: -300px 0 0 -300px;
  perspective: 1500px;
  pointer-events: none;
}
[dir] .pg-donut {
  position: absolute;
  inset: 54px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--mint) 0 26%, #39b7c6 38%, var(--azure) 54%, var(--violet) 82%, #5a3fd0 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent 76%, #000 76.4%);
  mask: radial-gradient(farthest-side, transparent 76%, #000 76.4%);
  animation: pg-spin 90s linear infinite;
}
[dir] .pg-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(74deg) rotateY(-12deg); }
[dir] .pg-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 8%, var(--amber) 22%, var(--coral) 44%, transparent 62%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent 96.6%, #000 97%);
  mask: radial-gradient(farthest-side, transparent 96.6%, #000 97%);
  animation: pg-spin 34s linear infinite;
}
@keyframes pg-spin { to { transform: rotate(360deg); } }

[dir] .pg-card {
  position: absolute;
  z-index: 5;
  padding: 14px 15px;
  border-radius: 18px;
  color: var(--indigo);
  font-size: 13px;
  line-height: 1.38;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 30px 60px -20px rgba(8, 4, 26, .6), 0 0 0 1px rgba(255, 255, 255, .5);
}
[dir] .pg-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
[dir] .pg-card__n {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0;
  background: linear-gradient(160deg, var(--violet), #4f36c4);
}
[dir] .pg-card__tag { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: #0b7a4b; }
[dir] .pg-card__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #25d366; }
[dir] .pg-msg { max-width: 92%; margin: 0 0 7px; padding: 8px 11px; border-radius: 12px; font-size: 13px; line-height: 1.38; }
[dir] .pg-msg--in { background: #f0eefa; border-bottom-left-radius: 4px; }
[dir] .pg-msg--out { margin-left: auto; background: #dff6ea; border-bottom-right-radius: 4px; }
[dir] .pg-msg--ar { direction: rtl; text-align: right; font-size: 13.5px; }
[dir] .pg-by { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12.5px; font-weight: 500; }
[dir] .pg-by::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--mint), var(--azure), var(--violet), var(--mint));
  -webkit-mask: radial-gradient(farthest-side, transparent 55%, #000 58%);
  mask: radial-gradient(farthest-side, transparent 55%, #000 58%);
}
[dir] .pg-card dl div { display: grid; grid-template-columns: 74px 1fr; gap: 8px; margin: 0 0 4px; font-size: 12.5px; line-height: 1.32; }
[dir] .pg-card dt { color: var(--muted); }
[dir] .pg-card dd { font-weight: 500; }
[dir] .pg-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid #ecebf3; }
[dir] .pg-chips li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px 2px 5px;
  border-radius: 999px;
  color: #0b7a4b;
  font-size: 11.5px;
  font-weight: 600;
  background: #ddf6ea;
}
[dir] .pg-chips li::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
}
[dir] .pg-chips li.is-live { color: #5a3bd0; background: #efeafd; }
[dir] .pg-chips li.is-live::before { background: var(--violet); animation: pg-blink 1.6s ease-in-out infinite; }
[dir] .pg-chips li.is-wait { color: #8a5a00; background: #fdf2d6; }
[dir] .pg-chips li.is-wait::before { background: var(--amber); }
@keyframes pg-blink { 50% { opacity: .35; } }
[dir] .pg-approve { display: flex; gap: 8px; margin: 9px 0 0; }
[dir] .pg-approve span { padding: 7px 13px; border-radius: 999px; color: var(--violet); font-size: 12px; font-weight: 700; box-shadow: 0 0 0 1px rgba(104, 72, 228, .4) inset; }
[dir] .pg-approve span:first-child { color: #fff; background: var(--violet); box-shadow: none; }
[dir] .pg-meter { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 0 0 8px; font-size: 12.5px; font-weight: 500; }
[dir] .pg-meter b { font-weight: 700; }
[dir] .pg-meter i { grid-column: 1 / -1; display: block; height: 6px; border-radius: 6px; background: #ecebf3; overflow: hidden; }
[dir] .pg-meter i::before { content: ""; display: block; width: var(--v, 50%); height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--violet), var(--azure)); }
[dir] .pg-rows { display: grid; gap: 7px; }
[dir] .pg-rows li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.3; font-weight: 500; }
[dir] .pg-rows li > b { margin-left: auto; color: var(--muted); font-weight: 600; white-space: nowrap; }
[dir] .pg-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
[dir] .pg-dot--v { background: var(--violet); }
[dir] .pg-dot--a { background: var(--amber); }
[dir] .pg-dot--c { background: var(--coral); }
[dir] .pg-stage figcaption {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 70px;
  max-width: 340px;
  padding: 5px 10px;
  border-radius: 10px;
  color: rgba(255, 255, 255, .92);
  font-size: 12px;
  line-height: 1.35;
  text-align: right;
  background: rgba(18, 13, 43, .72);
}

/* The example plays once, then stays. */
@media (prefers-reduced-motion: no-preference) {
  [dir] .pg-play > * { animation: pg-in 520ms var(--out) both; animation-delay: calc(var(--i, 0) * 620ms + 300ms); }
}
@keyframes pg-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Lead bar: one field, under the hero, as on the homepage ---------- */

[dir] .pg-lead { position: relative; z-index: 6; padding: 0 22px; background: #fff; }
[dir] .pg-lead__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 12px 34px;
  align-items: center;
  max-width: var(--wrap);
  margin: -56px auto 0;
  padding: 24px 28px;
  border-radius: 22px;
  background: linear-gradient(180deg, #fff, var(--bg));
  box-shadow: 0 0 0 1px var(--line), var(--shadow-lg);
}
[dir] .pg-lead__title { margin: 0; color: var(--indigo); font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
[dir] .pg-lead__sub { margin: 5px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.45; }

/* ---------- Body rhythm ---------- */

/* The short answer, first thing after the lead bar */
[dir] .pg-answer { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 44px; align-items: start; }
[dir] .pg-answer__text { margin: 0; color: var(--indigo); font-size: clamp(20px, 2.1vw, 26px); line-height: 1.42; font-weight: 500; letter-spacing: -.008em; }
[dir] .pg-kicker { margin: 0 0 12px; color: var(--violet); font-size: 15px; line-height: 1.3; font-weight: 700; letter-spacing: 0; text-transform: none; }
[dir] .pg-facts { display: grid; gap: 0; margin: 0; padding: 6px 22px; border-radius: 20px; background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
[dir] .pg-facts > div { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
[dir] .pg-facts > div:first-child { border-top: 0; }
[dir] .pg-facts dt { color: var(--muted); font-size: 14px; line-height: 1.4; font-weight: 500; }
[dir] .pg-facts dd { margin: 0; color: var(--indigo); font-size: 15px; line-height: 1.4; font-weight: 700; }

/* Text beside a visual */
[dir] .pg-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
[dir] .pg-split--top { align-items: start; }
[dir] .pg-split--flip > :first-child { order: 2; }
[dir] .pg-panel { position: relative; padding: 24px; border-radius: 24px; background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
[dir] .pg-panel--dark {
  color: #fff;
  background: radial-gradient(70% 120% at 86% 0, rgba(104, 72, 228, .6), transparent 70%), var(--ink);
  box-shadow: none;
}
[dir] .pg-panel .pg-card { position: static; width: auto; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
[dir] .pg-panel .pg-card + .pg-card { margin-top: 14px; }
[dir] .pg-panel--dark .pg-card { box-shadow: 0 24px 50px -20px rgba(8, 4, 26, .7); }
[dir] .pg-cap { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
[dir] .pg-panel--dark .pg-cap { color: rgba(255, 255, 255, .7); }

/* Cards */
[dir] .pg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
[dir] .pg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[dir] .pg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[dir] .pg-item {
  padding: 26px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  transition: transform 220ms var(--out), box-shadow 220ms ease;
}
[dir] .pg-sec--tint .pg-item { box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(38, 30, 74, .04); }
@media (hover: hover) and (pointer: fine) {
  [dir] .pg-item:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); }
}
[dir] .pg-item p { font-size: 15.5px; line-height: 1.58; }
[dir] .pg-item li { font-size: 15px; }
[dir] .pg-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 0 16px;
  border-radius: 14px;
  color: var(--violet);
  background: #efeafd;
}
[dir] .pg-ico::before { content: ""; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
[dir] .pg-ico--mint { color: #0b7a4b; background: #ddf6ea; }
[dir] .pg-ico--amber { color: #8a5a00; background: #fdf2d6; }
[dir] .pg-ico--coral { color: #c9321f; background: #fde6e2; }

/* Steps */
[dir] .pg-steps { counter-reset: pg; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; }
[dir] .bp-body .pg-steps > li { position: relative; margin: 0; padding: 0; counter-increment: pg; font-size: 15.5px; line-height: 1.55; }
[dir] .bp-body .pg-steps > li::before {
  content: counter(pg);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 0 16px;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(160deg, var(--violet), #4f36c4);
  box-shadow: 0 0 0 6px #fff;
}
[dir] .bp-body .pg-sec--tint .pg-steps > li::before { box-shadow: 0 0 0 6px var(--bg); }
[dir] .bp-body .pg-steps > li::after { content: ""; position: absolute; left: 42px; right: -22px; top: 21px; height: 2px; background: linear-gradient(90deg, var(--violet), var(--line)); }
[dir] .bp-body .pg-steps > li:last-child::after { content: none; }
[dir] .pg-steps h3 { font-size: 18px; }
[dir] .pg-steps p { font-size: 15.5px; line-height: 1.58; }
[dir] .pg-you {
  display: inline-block;
  margin: 8px 0 0;
  padding: 3px 10px;
  border-radius: 999px;
  color: #8a5a00;
  font-size: 12.5px;
  font-weight: 700;
  background: #fdf2d6;
}

/* Dark band */
[dir] .pg-band {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 56px;
  border-radius: 28px;
  color: rgba(255, 255, 255, .82);
  background: radial-gradient(60% 180% at 86% 0, rgba(104, 72, 228, .6), transparent 70%), var(--ink);
}
[dir] .pg-band h2, [dir] .pg-band h3, [dir] .pg-band strong { color: #fff; }
[dir] .pg-band p, [dir] .pg-band li { color: rgba(255, 255, 255, .82); }
[dir] .pg-band a:not([class]) { color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .4); }
[dir] .pg-band .pg-item { background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
[dir] .pg-band .pg-kicker { color: var(--amber); }
[dir] .pg-stats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 26px; margin: 8px 0 0; }
[dir] .pg-stats > div { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .16); }
[dir] .pg-stats dt { color: #fff; font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
[dir] .pg-stats dd { margin: 8px 0 0; color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 1.5; }

/* Tables */
[dir] .pg-tw { border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow); overflow: hidden; }
[dir] .pg-table { width: 100%; border-collapse: collapse; }
[dir] .pg-table th { padding: 15px 18px; color: #fff; font-size: 14.5px; line-height: 1.35; font-weight: 700; text-align: left; background: var(--indigo); }
[dir] .pg-table td { padding: 15px 18px; border-top: 1px solid var(--line); color: var(--text); font-size: 15.5px; line-height: 1.5; vertical-align: top; }
[dir] .pg-table td:first-child { color: var(--indigo); font-weight: 700; }
[dir] .pg-note-s { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* First-hand notes */
[dir] .pg-lesson {
  position: relative;
  padding: 26px 28px 26px 32px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  overflow: hidden;
}

/* Price */
[dir] .pg-prices { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 18px; align-items: stretch; }
[dir] .pg-price { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
[dir] .pg-price--pick { box-shadow: 0 0 0 2px var(--violet), var(--shadow-lg); }
[dir] .pg-price__tag { align-self: flex-start; margin: 0 0 12px; padding: 4px 11px; border-radius: 999px; color: #fff; font-size: 12.5px; line-height: 1.3; font-weight: 700; background: var(--violet); }
[dir] .pg-price h3 { font-size: 21px; }
[dir] .pg-price__amt { margin: 6px 0 2px; color: var(--indigo); font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
[dir] .pg-price__vat { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.45; }
[dir] .pg-price ul { flex: 1 1 auto; margin-bottom: 18px; }
[dir] .pg-price li { font-size: 15px; }

/* Questions */
[dir] .pg-faq { max-width: 880px; margin: 0 auto; }
[dir] .pg-faq details { border-bottom: 1px solid var(--line); }
[dir] .pg-faq details:first-child { border-top: 1px solid var(--line); }
[dir] .pg-faq summary { position: relative; padding: 20px 44px 20px 0; list-style: none; cursor: pointer; }
[dir] .pg-faq summary::-webkit-details-marker { display: none; }
[dir] .pg-faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 28px;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--violet);
  border-bottom: 2px solid var(--violet);
  transform: rotate(45deg);
  transition: transform 200ms var(--out);
}
[dir] .pg-faq details[open] summary::after { transform: translateY(4px) rotate(225deg); }
[dir] .pg-faq summary:focus-visible { outline: 3px solid var(--violet) !important; outline-offset: 2px; border-radius: 6px; }
[dir] .pg-faq h3 { margin: 0; font-size: 19px; }
[dir] .pg-faq__a { padding: 0 0 20px; }
[dir] .pg-faq__a p { font-size: 16.5px; }

/* Band that asks for the next step, mid-page */
[dir] .pg-ask {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 40px;
  align-items: center;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 36px 44px;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(112deg, #7a4ff0, #6848e4 46%, #3568cf);
}
[dir] .pg-ask h2 { margin: 0 0 6px; color: #fff; font-size: clamp(24px, 2.4vw, 32px); }
[dir] .pg-ask p { margin: 0; color: rgba(255, 255, 255, .88); font-size: 16.5px; line-height: 1.5; }

/* Related pages */
[dir] .pg-rel { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; }
[dir] .pg-rel a {
  display: block;
  padding: 22px 24px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  text-decoration: none;
  transition: transform 220ms var(--out), box-shadow 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  [dir] .pg-rel a:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); }
}
[dir] .pg-rel b { display: block; margin: 0 0 4px; color: var(--indigo); font-size: 17px; line-height: 1.3; font-weight: 700; }
[dir] .pg-rel b::after { content: " \2192"; color: var(--violet); }
[dir] .pg-rel span { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.45; }

/* The closing enquiry */
[dir] .pg-start { padding: 84px 22px; background: var(--bg); }
[dir] .pg-start__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: start; max-width: var(--wrap); margin: 0 auto; }
[dir] .pg-form { padding: 30px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); }
[dir] .pg-next { counter-reset: pgn; margin: 22px 0 0; padding: 0; }
[dir] .bp-body .pg-next > li { counter-increment: pgn; padding: 0 0 0 44px; margin: 0 0 16px; font-size: 16px; }
[dir] .bp-body .pg-next > li::before {
  content: counter(pgn);
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--violet);
  font-size: 14px;
  font-weight: 700;
  background: #efeafd;
}
[dir] .pg-contact { margin: 18px 0 0; color: var(--muted); font-size: 15px; }

/* Forms: same inputs as the homepage */
[dir] .bot-page .bot-form { display: grid; gap: 14px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
[dir] .bot-f { margin: 0; }
[dir] .bot-f label { display: block; margin: 0 0 6px; color: var(--indigo); font-size: 14.5px; line-height: 1.35; font-weight: 600; }
[dir] .bot-f input[type=text], [dir] .bot-f input[type=email], [dir] .bot-f input[type=tel], [dir] .bot-f input[type=number], [dir] .bot-f input:not([type]), [dir] .bot-f select, [dir] .bot-f textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  box-sizing: border-box;
  border: 1px solid #d5d0e8;
  border-radius: 14px;
  color: var(--indigo);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
[dir] .bot-f textarea { min-height: 110px; resize: vertical; }
[dir] .bot-f input:focus, [dir] .bot-f select:focus, [dir] .bot-f textarea:focus { outline: 0; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(104, 72, 228, .14); }
[dir] .bot-f--check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
[dir] .bot-f--check .bot-f__err { grid-column: 1 / -1; }
[dir] .bot-f--many > div { display: grid; grid-template-columns: 22px 1fr 22px 1fr; gap: 10px 12px; align-items: center; }
[dir] .bot-f--many input { width: 20px; height: 20px; margin: 0; accent-color: var(--violet); }
[dir] .bot-f--many > div label { margin: 0; color: var(--text); font-size: 15px; font-weight: 500; }
[dir] .bot-f--check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--violet); }
[dir] .bot-f--check label { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; font-weight: 500; }
[dir] .bot-f--check a { color: var(--violet); }
[dir] .bot-f__err, [dir] .bot-f__err li { margin: 6px 0 0; padding: 0; color: #b3261e; font-size: 13.5px; line-height: 1.4; }
[dir] .bot-f__err li::before { content: none; }
[dir] .bot-f.has-error input, [dir] .bot-f.has-error select, [dir] .bot-f.has-error textarea { border-color: #b3261e; }
[dir] .bot-f__btn {
  min-height: 54px;
  padding: 0 28px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  font: inherit;
  font-size: 16.5px;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(180deg, #dc3c28, #cf3522);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 12px 24px -10px rgba(217, 58, 38, .6);
  transition: transform 160ms var(--out);
}
[dir] .bot-f__btn:active { transform: scale(.98); }
[dir] .bot-f__btn:focus-visible { outline: 3px solid var(--violet) !important; outline-offset: 3px; }
[dir] .bot-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
[dir] .bot-done { padding: 8px 0; }
[dir] .bot-done h3 { margin: 0 0 8px; color: var(--indigo); font-size: 22px; line-height: 1.25; font-weight: 700; }
[dir] .bot-done p { margin: 0; color: var(--text); font-size: 16px; line-height: 1.6; }

/* Sticky button on phones */
[dir] .pg-sticky {
  position: fixed;
  z-index: 40;
  left: 14px;
  right: 82px;
  bottom: 12px;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border-radius: 999px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(180deg, #dc3c28, #cf3522);
  box-shadow: 0 16px 34px -12px rgba(18, 13, 43, .6);
  transform: translateY(90px);
  transition: transform 260ms var(--out);
}
[dir] .pg-sticky.is-on { transform: none; }

/* Icons: one line set, drawn by mask */
[dir] .i-chat { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8.5 8.5 0 0 1-12.7 7.4L3 21l1.6-5.2A8.5 8.5 0 1 1 21 12z'/%3E%3C/svg%3E"); }
[dir] .i-clock { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E"); }
[dir] .i-shield { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.6-3.3 7.9-8 9-4.7-1.1-8-4.4-8-9V6l8-3z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
[dir] .i-user { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.2-4 4.2-6 8-6s6.8 2 8 6'/%3E%3C/svg%3E"); }
[dir] .i-data { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5.5' rx='8' ry='3'/%3E%3Cpath d='M4 5.5v13c0 1.7 3.6 3 8 3s8-1.3 8-3v-13'/%3E%3Cpath d='M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E"); }
[dir] .i-link { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1 1'/%3E%3Cpath d='M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1-1'/%3E%3C/svg%3E"); }
[dir] .i-doc { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l5 5v13H6z'/%3E%3Cpath d='M14 3v5h5M9 13h7M9 17h7'/%3E%3C/svg%3E"); }
[dir] .i-chart { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V4M4 20h16'/%3E%3Cpath d='M8 16l4-5 3 3 5-7'/%3E%3C/svg%3E"); }
[dir] .i-search { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5L21 21'/%3E%3C/svg%3E"); }
[dir] .i-spark { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9L12 3z'/%3E%3Cpath d='M19 16v4M17 18h4'/%3E%3C/svg%3E"); }
[dir] .i-flow { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='7' height='6' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='6' rx='1.5'/%3E%3Cpath d='M10 7h4a3 3 0 0 1 3 3v4'/%3E%3C/svg%3E"); }
[dir] .i-lock { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
[dir] .i-team { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c1-3.5 3.4-5 6.5-5s5.500 1.500 6.500 5'/%3E%3Cpath d='M16 4.800a3.500 3.500 0 0 1 0 6.400M18 15.300c1.700.7 2.900 2.200 3.500 4.700'/%3E%3C/svg%3E"); }
[dir] .i-money { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.500'/%3E%3Cpath d='M6.500 12h.01M17.500 12h.01'/%3E%3C/svg%3E"); }
[dir] .i-globe { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.500 2.500 3.800 5.500 3.800 9s-1.300 6.500-3.800 9c-2.500-2.500-3.800-5.500-3.800-9S9.500 5.500 12 3z'/%3E%3C/svg%3E"); }
[dir] .i-learn { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5-10-5z'/%3E%3Cpath d='M6 11.500V17c1.700 1.300 3.700 2 6 2s4.300-.7 6-2v-5.500'/%3E%3C/svg%3E"); }

@media (max-width: 1240px) {
  [dir] .pg-hero__wrap { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 0; }
  [dir] .pg-hero__copy { padding-bottom: 30px; }
  [dir] .pg-stage { min-height: 0; padding: 0 0 84px; }
  [dir] .pg-orbit { display: none; }
  [dir] .pg-stage__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
  [dir] .pg-card { position: static; width: auto; }
  [dir] .pg-stage figcaption { position: static; max-width: none; margin: 12px 0 0; padding: 0; text-align: left; background: none; }
}
@media (max-width: 1120px) {
  [dir] .pg-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [dir] .pg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [dir] .bp-body .pg-steps > li::after { content: none; }
}
@media (max-width: 820px) {
  [dir] .pg-hero__copy { padding-top: 62px; }
  [dir] .pg-crumbs { margin-bottom: 20px; }
  [dir] .pg-hero h1 { font-size: clamp(34px, 9.2vw, 44px); }
  [dir] .pg-lede { font-size: 17.5px; }
  [dir] .pg-actions .pg-btn { flex: 1 1 100%; }
  [dir] .pg-stage { padding-bottom: 76px; }
  [dir] .pg-stage__row { display: flex; gap: 12px; margin: 0 -22px; padding: 2px 22px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  [dir] .pg-stage__row::-webkit-scrollbar { display: none; }
  [dir] .pg-stage__row > .pg-card { flex: 0 0 84%; scroll-snap-align: center; }
  [dir] .pg-lead__card { grid-template-columns: minmax(0, 1fr); margin-top: -46px; padding: 20px; }
  [dir] .pg-sec { padding: 56px 22px; }
  [dir] .pg-sec--tight { padding-top: 40px; padding-bottom: 40px; }
  [dir] .pg-head { margin-bottom: 26px; }
  [dir] .pg-answer, [dir] .pg-split, [dir] .pg-start__in { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  [dir] .pg-split--flip > :first-child { order: 0; }
  [dir] .pg-grid, [dir] .pg-grid--2, [dir] .pg-grid--4, [dir] .pg-prices, [dir] .pg-rel, [dir] .pg-stats { grid-template-columns: minmax(0, 1fr); }
  [dir] .pg-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  [dir] .bp-body .pg-steps > li { padding: 0 0 22px 58px; }
  [dir] .bp-body .pg-steps > li::before { position: absolute; left: 0; top: 0; margin: 0; }
  [dir] .bp-body .pg-steps > li::after { content: ""; left: 20px; right: auto; top: 42px; bottom: 0; width: 2px; height: auto; background: var(--line); }
  [dir] .bp-body .pg-steps > li:last-child::after { content: none; }
  [dir] .pg-band { padding: 34px 22px; border-radius: 22px; }
  [dir] .pg-ask { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; border-radius: 22px; }
  [dir] .pg-ask .pg-btn { width: 100%; }
  [dir] .pg-start { padding: 56px 22px 96px; }
  [dir] .pg-form { padding: 22px; }
  [dir] .bot-form__row { grid-template-columns: minmax(0, 1fr); }
  [dir] .pg-sticky { display: flex; }
  /* tables become one card per row */
  [dir] .pg-tw { border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
  [dir] .pg-table, [dir] .pg-table tbody, [dir] .pg-table tr, [dir] .pg-table td { display: block; width: 100%; box-sizing: border-box; }
  [dir] .pg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  [dir] .pg-table tr { margin: 0 0 12px; padding: 8px 0; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
  [dir] .pg-table td { padding: 7px 16px; border: 0; }
  [dir] .pg-table td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) {
  [dir] .pg-donut, [dir] .pg-ring, [dir] .pg-chips li.is-live::before { animation: none; }
  [dir] .pg-btn, [dir] .pg-item, [dir] .pg-rel a, [dir] .pg-sticky { transition: none; }
}

/* Stage positions: three cards around the rings, as on the homepage */
@media (min-width: 1241px) {
  [dir] .pg-at-a { left: -6px; top: 56px; width: 290px; }
  [dir] .pg-at-b { right: -8px; top: 34px; width: 264px; }
  [dir] .pg-at-c { right: 26px; top: 330px; width: 268px; }
  [dir] .pg-at-w { left: 50%; top: 50%; width: 400px; transform: translate(-50%, -50%); }
}

/* Phones: denser cards, so long pages stay quick to scan */
@media (max-width: 820px) {
  [dir] .pg-item { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 2px 14px; padding: 18px; border-radius: 18px; }
  [dir] .pg-item > .pg-ico { grid-row: span 2; margin: 0; }
  [dir] .pg-item > :not(.pg-ico) { grid-column: 2; }
  [dir] .pg-item > h3:first-child, [dir] .pg-item > h3:first-child ~ * { grid-column: 1 / -1; }
  [dir] .bp-body :where(h3) { font-size: 18px; }
  [dir] .pg-item p { font-size: 15px; }
  [dir] .pg-answer__text { font-size: 19px; }
}

/* Two-step lead form */
[dir] .bot-step1 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
[dir] .bot-step1 .bot-f label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[dir] .bot-step2 { display: none; gap: 12px; }
[dir] .bot-page .bot-form--line { display: block; }
[dir] .bot-form--line.is-two .bot-step1 { grid-template-columns: minmax(0, 1fr); margin-bottom: 12px; }
[dir] .bot-form--line.is-two .bot-step1 [data-bot-next] { display: none; }
[dir] .bot-form--line.is-two .bot-step2 { display: grid; }
[dir] .bot-form__row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
[dir] .form-success { padding: 8px 0; text-align: left; }
[dir] .form-success__icon { display: none; }
[dir] .form-success__title { margin: 0 0 6px; color: var(--indigo); font-size: 21px; line-height: 1.25; font-weight: 700; }
[dir] .form-success__msg { margin: 0; color: var(--text); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 820px) {
  [dir] .bot-step1, [dir] .bot-form__row3 { grid-template-columns: minmax(0, 1fr); }
  [dir] .bot-f--many > div { grid-template-columns: 22px 1fr; }
  [dir] .bot-page .whatsapp-fixed-btn { bottom: 10px; }
}

/* Footer sits straight after the closing section */
[dir] .bot-page .l-main { padding-bottom: 0; }

/* Client logos: the homepage's brand list, kept quiet */
[dir] .pg-brands { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px 36px; align-items: center; max-width: var(--wrap); margin: 0 auto; }
[dir] .bp-body .pg-brands__t { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.45; font-weight: 500; }
[dir] .bp-body .pg-brands ul { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 18px 26px; align-items: center; margin: 0; }
[dir] .bp-body .pg-brands li { margin: 0; padding: 0; }
[dir] .bp-body .pg-brands li::before { content: none; }
[dir] .pg-brands img { display: block; width: auto; max-width: 100%; height: auto; max-height: 40px; margin: 0 auto; opacity: .8; }

/* Tools strip: what the work connects to */
[dir] .pg-tools { display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: center; justify-content: space-between; max-width: var(--wrap); margin: 0 auto; padding: 20px 36px; border-radius: 22px; background: radial-gradient(60% 180% at 86% 0, rgba(104, 72, 228, .6), transparent 70%), var(--ink); }
[dir] .bp-body .pg-tools__t { margin: 0; color: rgba(255, 255, 255, .82); font-size: 14.5px; line-height: 1.35; font-weight: 500; }
[dir] .bp-body .pg-tools ul { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; margin: 0; }
[dir] .bp-body .pg-tools li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; color: #fff; font-size: 15px; line-height: 1.2; font-weight: 700; }
[dir] .bp-body .pg-tools li::before { content: none; }
[dir] .pg-tools img { width: 20px; height: 20px; filter: invert(1); }
@media (max-width: 1120px) {
  [dir] .pg-brands { grid-template-columns: minmax(0, 1fr); }
  [dir] .bp-body .pg-brands ul { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  [dir] .bp-body .pg-brands ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 18px; }
  [dir] .pg-tools { padding: 18px 20px; }
}
[dir] .pg-tw--gap { margin-bottom: 26px; }
[dir] .pg-rel--top { margin-top: 18px; }
[dir] .pg-prices--gap { margin-top: 30px; }
[dir] .pg-split--gap { margin-top: 44px; }
[dir] .pg-center { text-align: center; }
[dir] .pg-price .pg-btn { align-self: flex-start; min-height: 46px; padding: 0 20px; font-size: 15px; }
[dir] .pg-item .pg-btn { min-height: 46px; margin-top: 14px; padding: 0 20px; font-size: 15px; }
@media (max-width: 1120px) {
  [dir] .pg-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [dir] .pg-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  [dir] .pg-prices, [dir] .pg-rel { grid-template-columns: minmax(0, 1fr); }
  [dir] .pg-item > .pg-btn { grid-column: 1 / -1; justify-self: start; }
}

[dir] .pg-table, [dir] .pg-table th, [dir] .pg-table td { font-family: inherit; }
[dir] .pg-table tr.pg-total td { color: var(--indigo); font-weight: 700; background: var(--bg); }
[dir] .bp-body .pg-rows li { margin: 0; padding: 0; color: var(--indigo); font-size: 12.5px; line-height: 1.3; }
[dir] .bp-body .pg-rows li::before { content: none; }
[dir] .bp-body .pg-card :where(p) { margin: 0; font-size: 13px; line-height: 1.38; color: var(--indigo); }
[dir] .bp-body .pg-panel .pg-card :where(p) { font-size: 13.5px; }
[dir] .pg-core { position: absolute; z-index: 1; left: 52%; top: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; opacity: .92; }

/* The AI team: illustrated agents, always labelled as not people */
[dir] .pg-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 14px; }
[dir] .pg-agent { padding: 16px 10px 14px; border-radius: 18px; text-align: center; background: #fff; box-shadow: 0 0 0 1px var(--line); }
[dir] .pg-agent img { display: block; width: 72px; height: 72px; margin: 0 auto 10px; border-radius: 50%; object-fit: cover; }
[dir] .pg-agent b { display: block; color: var(--indigo); font-size: 15.5px; line-height: 1.25; font-weight: 700; }
[dir] .pg-agent span { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.35; }

/* Work samples */
[dir] .pg-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; }
[dir] .pg-gallery figure { display: flex; flex-direction: column; margin: 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line); }
[dir] .pg-gallery img { display: block; width: 100%; height: auto; }
[dir] .pg-gallery--fit img { aspect-ratio: 4 / 3; padding: 14px; box-sizing: border-box; object-fit: contain; }
[dir] .pg-gallery--two, [dir] .pg-gallery--cms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[dir] .pg-gallery--gap { margin-top: 18px; }
[dir] .pg-gallery--cms figure:first-child { grid-row: span 2; }
[dir] .pg-gallery--cms img { width: auto; max-width: 100%; margin: auto; }
[dir] .pg-gallery figcaption { margin-top: auto; padding: 12px 14px; border-top: 1px solid var(--line); color: var(--indigo); font-size: 14.5px; line-height: 1.35; font-weight: 600; }
[dir] .pg-gallery figcaption span { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; font-weight: 500; }
@media (max-width: 820px) { [dir] .pg-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 600px) { [dir] .pg-gallery { grid-template-columns: minmax(0, 1fr); gap: 14px; } [dir] .pg-gallery--cms figure:first-child { grid-row: auto; } }

/* Older copy, folded under a plain heading */
[dir] .pg-faq--wide { max-width: var(--wrap); }
[dir] .pg-faq__a--wide { padding-bottom: 28px; }
[dir] .pg-faq__a--wide .pg-sec, [dir] .pg-faq__a--wide .pg-in { padding: 0; }
[dir] .pg-faq__a--wide h3 { margin-top: 14px; }

/* Checkbox groups sit beside their labels */
[dir] .bot-page .bot-f--many > div { grid-template-columns: 22px 1fr 22px 1fr; }
[dir] .bot-page .bot-f--many > label { display: block; margin: 0 0 8px; color: var(--indigo); font-size: 14.5px; font-weight: 600; }
@media (max-width: 568px) { [dir] .bot-page .bot-f--many > div { grid-template-columns: 22px 1fr; } }

/* Optional detail on long forms */
[dir] .bot-more summary { cursor: pointer; color: var(--violet); font-size: 15px; font-weight: 600; }
[dir] .bot-more .bot-f { margin-top: 14px; }

/* Keep floating buttons off the form while someone is typing */
@media (max-width: 820px) {
  [dir] .bot-page:has(form:focus-within) .whatsapp-fixed-btn, [dir] .bot-page:has(form:focus-within) .pg-sticky { opacity: 0; pointer-events: none; }
}

/* Tablets: buttons side by side, two cards in view */
@media (min-width: 601px) and (max-width: 820px) {
  [dir] .pg-actions .pg-btn { flex: 0 1 auto; }
  [dir] .pg-stage__row > .pg-card { flex-basis: 46%; }
}

/* Real work in a hero card */
[dir] .pg-card--work { padding: 8px; }
[dir] .pg-card--work img { display: block; width: 100%; height: auto; max-height: 220px; object-fit: contain; border-radius: 10px; }

/* Sample text at reading size */
[dir] .bp-body .pg-panel--read .pg-card p:not(.pg-card__head) { font-size: 16px; line-height: 1.55; }

/* A struck-out old price */
[dir] .pg-facts dd s { margin-left: 6px; color: var(--muted); font-weight: 500; }

/* Short two-column tables stay as a table on phones */
@media (max-width: 820px) {
  [dir] .pg-table--kv { padding: 4px 16px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
  [dir] .pg-table--kv tr { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 0; border-radius: 0; box-shadow: none; }
  [dir] .pg-table--kv tr + tr { border-top: 1px solid var(--line); }
  [dir] .pg-table--kv td { width: auto; padding: 11px 0; }
  [dir] .pg-table--kv td::before { content: none; }
}

[dir] .i-phone { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.5v3a2 2 0 0 1-2.2 2A18 18 0 0 1 2.500 5.200 2 2 0 0 1 4.500 3h3a2 2 0 0 1 2 1.700c.1 1 .4 1.900.7 2.800a2 2 0 0 1-.5 2.100L8.500 10.800a15 15 0 0 0 4.700 4.700l1.200-1.200a2 2 0 0 1 2.100-.5c.9.3 1.800.6 2.800.7a2 2 0 0 1 1.700 2z'/%3E%3C/svg%3E"); }
[dir] .i-mail { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.500 7l8.500 6 8.500-6'/%3E%3C/svg%3E"); }
[dir] .i-pin { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.300 7-11.500A7 7 0 0 0 5 9.500C5 14.700 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.500' r='2.500'/%3E%3C/svg%3E"); }

/* Colour tiles: the homepage's Core Services */
[dir] .pg-tiles { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 14px; }
[dir] .pg-tile { position: relative; display: block; min-height: 220px; padding: 24px 22px; border-radius: 20px; overflow: hidden; color: var(--ink); text-decoration: none; transition: transform 220ms var(--out), box-shadow 220ms ease; }
[dir] .pg-tile::after { content: ""; position: absolute; right: -46px; top: -46px; width: 150px; height: 150px; border: 26px solid rgba(255, 255, 255, .2); border-radius: 50%; pointer-events: none; }
[dir] .bp-body .pg-tile h3 { position: relative; z-index: 1; margin: 0 0 8px; color: inherit; font-size: 20px; }
[dir] .bp-body .pg-tile p { position: relative; z-index: 1; color: inherit; font-size: 15.5px; line-height: 1.55; }
[dir] .bp-body .pg-tile a:not([class]) { color: inherit; font-weight: 700; box-shadow: 0 1px 0 currentColor; }
[dir] .pg-tile__go { position: relative; z-index: 1; display: inline-block; margin-top: 10px; font-size: 15px; font-weight: 700; }
[dir] .pg-tile__go::after { content: " \2192"; }
@media (hover: hover) and (pointer: fine) {
  [dir] a.pg-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
}
[dir] .pg-tile--green { background: #24c98f; }
[dir] .pg-tile--orange { background: #ff9d66; }
[dir] .pg-tile--violet { color: #fff; background: #6848e4; }
[dir] .pg-tile--blue { background: #33a9ea; }
[dir] .pg-tile--red { background: #f2666b; }
[dir] .pg-tile--yellow { background: #fbc92c; }

/* Client ranking cards */
[dir] .pg-ranks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
[dir] .pg-rank { border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
[dir] .bp-body .pg-rank__d { display: flex; justify-content: space-between; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--violet); font-size: 14.5px; font-weight: 600; }
[dir] .pg-rank__d span { color: var(--indigo); font-size: 12.5px; font-weight: 700; }
[dir] .pg-rank table { width: 100%; border-collapse: collapse; font-family: inherit; }
[dir] .pg-rank th { padding: 12px 16px 6px; color: var(--indigo); font-size: 13.5px; font-weight: 700; text-align: left; }
[dir] .pg-rank th:last-child, [dir] .pg-rank td:last-child { text-align: right; }
[dir] .pg-rank td { padding: 6px 16px; color: var(--text); font-size: 14.5px; line-height: 1.35; }
[dir] .pg-rank tr:last-child td { padding-bottom: 14px; }
[dir] .pg-rank td b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #063b28; font-size: 13px; font-weight: 700; background: #2fd39b; }
@media (max-width: 1120px) {
  [dir] .pg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [dir] .pg-ranks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  [dir] .pg-tiles, [dir] .pg-ranks { grid-template-columns: minmax(0, 1fr); }
  [dir] .pg-tile { min-height: 0; }
}

/* Calculators: light inputs, the homepage's dark number band for the answer */
[dir] .pg-head--gap { margin-top: 56px; }
[dir] .pg-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); }
[dir] .pg-calc__in { display: grid; gap: 14px; align-content: start; padding: 30px; }
[dir] .pg-calc__out { margin: 0; padding: 30px; color: #fff; background: radial-gradient(70% 120% at 86% 0, rgba(104, 72, 228, .6), transparent 70%), var(--ink); }
[dir] .pg-calc__out > div { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
[dir] .pg-calc__out > div:first-child { border-top: 0; }
[dir] .pg-calc__out dt { color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 1.4; }
[dir] .pg-calc__out dd { margin: 0; color: #fff; font-size: 16px; line-height: 1.4; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
[dir] .pg-calc__out .is-total { margin-top: 6px; padding-top: 14px; border-top: 2px solid rgba(255, 255, 255, .3); }
[dir] .pg-calc__out .is-total dt { color: #fff; font-size: 17px; font-weight: 700; }
[dir] .pg-calc__out .is-total dd { font-size: 30px; line-height: 1.1; letter-spacing: -.02em; }
[dir] .bp-body .pg-calc__out p { margin: 16px 0 0; }
@media (max-width: 820px) {
  [dir] .pg-calc { grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
  [dir] .pg-calc__in, [dir] .pg-calc__out { padding: 22px; }
  [dir] .pg-calc__out .pg-btn { width: 100%; }
}

/* Round 1 judges: price on the first screen, the homepage's person, quieter labels */
[dir] .pg-proof li.pg-proof__price { flex: 0 0 100%; width: 100%; color: #fff; font-weight: 700; }
@media (min-width: 821px) { [dir] .pg-u { white-space: nowrap; } }
[dir] .pg-hero h1 { line-height: 1.12; }
[dir] .pg-lesson { padding: 26px 28px; }
[dir] .bot-form .bot-f__btn { background: linear-gradient(180deg, #dc3c28, #cf3522); }
[dir] .bp-body .bot-f textarea, [dir] .bot-f textarea { height: 110px !important; min-height: 110px; }
[dir] #pilot .pg-stats dt { font-size: 22px; }
[dir] .pg-faq--gap { margin-top: 26px; }
[dir] .pg-card { z-index: 3; }
[dir] .pg-kate { position: absolute; z-index: 2; left: 51%; bottom: 0; width: auto; height: 95%; max-height: 690px; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 24px 40px rgba(10, 6, 30, .45)); }
@media (min-width: 1241px) {
  [dir] .pg-at-a { left: -6px; top: 150px; width: 256px; }
  [dir] .pg-at-b { right: -14px; top: 30px; width: 254px; }
  [dir] .pg-at-c { right: -10px; top: 324px; width: 254px; }
}
@media (max-width: 1240px) {
  [dir] .pg-kate { display: none; }
  [dir] .pg-stage { position: static; }
  [dir] .pg-orbit { display: block; left: auto; right: -140px; top: -40px; width: 440px; height: 440px; margin: 0; opacity: .6; }
}
@media (max-width: 820px) {
  [dir] .pg-orbit { right: -190px; top: 20px; width: 330px; height: 330px; opacity: .45; }
  [dir] .pg-head { text-align: left; margin-left: 0; }
  [dir] .pg-at-form .whatsapp-fixed-btn, [dir] body:has(.pg-lead input:focus) .whatsapp-fixed-btn { opacity: 0; pointer-events: none; }
}
@media (max-width: 480px) {
  [dir] .pg-agent:first-child { grid-column: 1 / -1; }
}

/* Marketing judges: spacing and small parts */
[dir] .pg-lead { display: flow-root; }
[dir] .pg-crumbs .breadcrumbs { padding-top: 14px; }
[dir] .pg-ask .pg-btn--primary { color: var(--indigo); background: #fff; box-shadow: 0 14px 30px -12px rgba(18, 13, 43, .55); }
[dir] .pg-sec:not(.pg-sec--tint) + .pg-sec:not(.pg-sec--tint) { padding-top: 0; }
[dir] .pg-sec--tint + .pg-sec--tint, [dir] .pg-sec--tint + .pg-start { padding-top: 0; }
[dir] .pg-in > p, [dir] .pg-note-s { max-width: 760px; }
[dir] .pg-in > p.pg-center, [dir] .pg-note-s.pg-center { margin-left: auto; margin-right: auto; }
[dir] .pg-rank th, [dir] .pg-rank td, [dir] .pg-rank b { font-family: inherit; }
[dir] .bp-body .pg-tile > p:first-child:has(> img) { display: none; }
[dir] .pg-prices[style*="--n:4"] .pg-price__amt { font-size: 28px; white-space: nowrap; }
[dir] .pg-band .pg-split .pg-actions { justify-content: flex-end; margin: 0; }
@media (min-width: 821px) {
  [dir] .pg-prices:has(.pg-price__tag) .pg-price > h3:first-child { margin-top: 36px; }
}
@media (min-width: 600px) and (max-width: 820px) {
  [dir] .pg-actions .pg-btn { flex: 0 1 auto; }
  [dir] .pg-stage__row > .pg-card { flex-basis: 46%; }
}

/* Old H2s keep their level when they sit in accordions or panels */
[dir] .pg-faq summary h2 { margin: 0; padding: 0; color: var(--indigo); font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -.008em; text-align: left; }
[dir] .bp-body h2.pg-h3 { margin: 0 0 8px; padding: 0; color: var(--indigo); font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -.008em; text-align: left; }
@media (max-width: 820px) { [dir] .bp-body h2.pg-h3 { font-size: 18px; } }

/* Round 2 judges: tablet and laptop widths, tables, reading width */
[dir] .pg-hero h1, [dir] .bp-body h2, [dir] .bp-body h3, [dir] .pg-lead__title, [dir] .pg-price h3 { text-wrap: balance; }
[dir] .pg-card__tag { white-space: nowrap; flex: none; }
@media (max-width: 340px) { [dir] .pg-card__head { flex-wrap: wrap; row-gap: 2px; } [dir] .pg-sticky { font-size: 14px; } }
[dir] .bot-form.is-two .bot-step1:has(input[placeholder*="@"]) { display: none; }
[dir] .bot-nosite .bot-f:has(input[name$="[website]"]) { display: none; }
[dir] .pg-faq:not(.pg-faq--wide) details p { max-width: 62ch; }
[dir] .pg-head p { max-width: 680px; margin-left: auto; margin-right: auto; }
[dir] .pg-head--left p { margin-left: 0; }
[dir] .pg-in > p.pg-note-s { max-width: 640px; }
[dir] .pg-agent__face { display: block; width: fit-content; margin: 0 auto; border-radius: 50%; background: #6848e4; }
[dir] .pg-agent__face img { display: block; filter: grayscale(1) contrast(1.05); mix-blend-mode: luminosity; }
[dir] .pg-swipe { display: none; }
@media (min-width: 1241px) { [dir] .pg-hero h1 { font-size: 58px; margin-right: -44px; } }
@media (min-width: 960px) and (max-width: 1240px) {
  [dir] .pg-hero__copy { max-width: calc(100% - 390px); }
  [dir] .pg-kate { display: block; left: auto; right: 26px; top: 36px; bottom: auto; height: 640px; max-height: none; transform: none; z-index: 1; }
  [dir] .pg-orbit { right: -60px; top: 70px; width: 470px; height: 470px; opacity: 1; }
  [dir] .pg-stage__row { position: relative; z-index: 3; }
}
@media (min-width: 821px) and (max-width: 1240px) { [dir] .pg-stage__row { align-items: start; } }
@media (min-width: 821px) and (max-width: 1120px) { [dir] .bp-body .pg-brands ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1120px) { [dir] .pg-split--top:has(.pg-tw) { grid-template-columns: minmax(0, 1fr); gap: 26px; } }
@media (max-width: 820px) { [dir] .pg-swipe { display: block; margin-top: 2px; } }
@media (min-width: 601px) and (max-width: 820px) {
  [dir] .pg-tw { border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow); overflow: hidden; }
  [dir] .pg-table { display: table; width: 100%; }
  [dir] .pg-table thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  [dir] .pg-table tbody { display: table-row-group; width: auto; }
  [dir] .pg-table tr { display: table-row; width: auto; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  [dir] .pg-table th, [dir] .pg-table td { display: table-cell; width: auto; padding: 12px 14px; }
  [dir] .pg-table td { border-top: 1px solid var(--line); font-size: 14.5px; }
  [dir] .pg-table td::before { content: none; }
}
@media (max-width: 600px) {
  [dir] .pg-table td:first-child::before { content: none; }
  [dir] .pg-table.pg-keep { display: table; }
  [dir] .pg-table.pg-keep thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  [dir] .pg-table.pg-keep th { padding: 10px; font-size: 12.5px; color: #fff; background: var(--indigo); display: table-cell; }
  [dir] .pg-table.pg-keep tbody { display: table-row-group; width: auto; }
  [dir] .pg-table.pg-keep tr { display: table-row; margin: 0; padding: 0; border-radius: 0; box-shadow: none; }
  [dir] .pg-table.pg-keep td { display: table-cell; width: auto; padding: 10px; border-top: 1px solid var(--line); font-size: 14px; }
  [dir] .pg-table.pg-keep td::before { content: none; }
}
@media (min-width: 821px) {
  [dir] .pg-in:has(> .pg-grid > :only-child) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 56px; align-items: center; }
  [dir] .pg-in:has(> .pg-grid > :only-child) > .pg-grid { display: block; margin-top: 0; }
}

/* Long lists fold on phones and stay open on larger screens */
[dir] .pg-fold > summary { list-style: none; cursor: default; }
[dir] .pg-fold > summary::-webkit-details-marker { display: none; }
@media (min-width: 601px) { [dir] .pg-fold > summary { pointer-events: none; } }
@media (max-width: 600px) {
  [dir] .pg-fold > summary { position: relative; padding-right: 30px; cursor: pointer; }
  [dir] .pg-fold > summary::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 8px;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--violet);
    border-bottom: 2px solid var(--violet);
    transform: rotate(45deg);
    transition: transform 200ms var(--out);
  }
  [dir] .pg-fold[open] > summary::after { transform: translateY(4px) rotate(225deg); }
}

/* Images kept from the live web design page */
[dir] .pg-oldico { display: block; width: 56px; height: 56px; margin-bottom: 12px; }
[dir] .pg-oldfig { margin: 0 0 24px; }
[dir] .pg-oldfig img { display: block; max-width: 100%; height: auto; border-radius: 12px; }

/* Accessibility: links in running text stand out without colour, and footer text meets contrast */
[dir] .pg-sec p a:not([class]), [dir] .pg-faq__a a:not([class]), [dir] .pg-item a:not([class]), [dir] .pg-note-s a:not([class]), [dir] .pg-contact a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }
[dir] .pg-calc__go { margin-top: 16px; }
[dir] .footer-search__field::placeholder { color: #b9b3d0; opacity: 1; }
[dir] .footer__bottom-container span { color: #9a94b6; }

/* Link to client letters beside the logo strip */
[dir] .pg-brands__t a { display: block; margin-top: 4px; color: var(--violet); text-decoration: underline; text-underline-offset: 2px; }

/* Round 3 judges, tested on 13 pages at five widths */
/* Calculator: the button sits under the answer, inside the dark panel */
[dir] .pg-calc { grid-template-rows: 1fr auto; }
[dir] .pg-calc__in { grid-row: 1 / span 2; }
[dir] .pg-calc__out { grid-column: 2; grid-row: 1; }
[dir] .bp-body .pg-calc__go { grid-column: 2; grid-row: 2; margin: 0; padding: 0 30px 30px; background: var(--ink); }
@media (max-width: 820px) {
  [dir] .pg-calc { grid-template-rows: none; }
  [dir] .pg-calc__in, [dir] .pg-calc__out, [dir] .bp-body .pg-calc__go { grid-column: 1; grid-row: auto; }
  [dir] .bp-body .pg-calc__go { padding: 0 22px 22px; }
  [dir] .pg-calc__go .pg-btn { display: flex; width: 100%; box-sizing: border-box; }
}
/* Phone folds: a 46px target, level with the icon, and the open list uses the card's full width */
@media (max-width: 600px) {
  [dir] .pg-fold > summary { display: flex; align-items: center; min-height: 46px; }
  [dir] .pg-fold > summary h3 { margin: 0; }
  [dir] .pg-fold > summary::after { top: 50%; margin-top: -8px; }
  [dir] .pg-item > .pg-fold > ul { margin: 10px 0 0 -60px; }
  [dir] .pg-split .pg-fold { border-bottom: 1px solid var(--line); }
  [dir] .pg-split .pg-fold[open] { padding-bottom: 14px; }
}
/* The whole closed card opens the fold, including the icon */
@media (max-width: 600px) { [dir] .pg-item > .pg-fold > summary::before { content: ""; position: absolute; inset: -18px -18px -6px -78px; } }
/* The last footer lines clear the floating buttons */
@media (max-width: 820px) { [dir] .footer__bottom { padding-bottom: 84px; } }
/* Links in text: one underline, not two. Related cards get their outline back. */
[dir] .bp-body a:not([class]), [dir] .bp-body .pg-tile a:not([class]), [dir] .pg-band a:not([class]) { box-shadow: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { [dir] .bp-body a:not([class]):hover { box-shadow: none; text-decoration-thickness: 2px; } }
[dir] .bp-body .pg-rel a { box-shadow: 0 0 0 1px var(--line); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { [dir] .bp-body .pg-rel a:hover { box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); } }
[dir] .pg-rel b::after { content: "\00a0\2192"; }
@media (min-width: 821px) {
  [dir] .pg-grid > .pg-item:has(> .pg-btn) { display: flex; flex-direction: column; align-items: flex-start; }
  [dir] .pg-grid > .pg-item:has(> .pg-btn) > p { margin-bottom: 14px; }
  [dir] .pg-grid > .pg-item:has(> .pg-btn) > .pg-btn { margin-top: auto; }
}
/* 601 to 820: two cards a row, as at 1024 */
@media (min-width: 601px) and (max-width: 820px) {
  [dir] .pg-grid, [dir] .pg-grid--2, [dir] .pg-grid--4, [dir] .pg-prices, [dir] .pg-rel, [dir] .pg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [dir] .pg-grid > :last-child:nth-child(odd), [dir] .pg-prices > :last-child:nth-child(odd), [dir] .pg-rel > :last-child:nth-child(odd), [dir] .pg-tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  [dir] .pg-item { display: block; padding: 22px; }
  [dir] .pg-item > .pg-ico { margin: 0 0 14px; }
}
@media (max-width: 820px) { [dir] .pg-item > .pg-you { justify-self: start; } }
/* Header and footer targets on phones and tablets */
@media (max-width: 1023px) {
  [dir] .header__logo { padding-block: 9px; margin-block: -9px; }
  [dir] .header__call { min-height: 44px; }
  [dir] .header__lang { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  [dir] .footer-contacts__item-value { display: inline-block; padding: 13px 0; margin: -13px 0; }
}
/* Links that are a whole table cell on phones */
@media (max-width: 600px) { [dir] .pg-table td > a:only-child:not([class]) { display: inline-block; padding-block: 12px; margin-block: -12px; } }
[dir] .pg-proof li { align-items: flex-start; }
[dir] .pg-proof li::before { flex: none; margin-top: .42em; }
@media (max-width: 820px) { [dir] .pg-note-s.pg-center, [dir] .pg-in > p.pg-center { margin-left: 0; text-align: left; } }
[dir] .pg-head p, [dir] .pg-note-s { text-wrap: pretty; }
/* Desktop H1: stops short of the first hero card at every width, and keeps its line count */
@media (min-width: 1241px) { [dir] .pg-hero h1 { font-size: clamp(52px, 4.1vw, 56px); margin-right: -10px; } }
/* From 768 the site shows no WhatsApp bubble, so the sticky button centres instead of leaving a gap for it */
@media (min-width: 768px) and (max-width: 820px) { [dir] .pg-sticky { left: calc(50% - 180px); right: calc(50% - 180px); } }
@media (min-width: 768px) and (max-width: 960px) { [dir] .bot-sticky { left: calc(50% - 180px); right: calc(50% - 180px); } }
/* 1241 and up: the lead bar fits the first screen on the three-line heroes */
@media (min-width: 1241px) {
  [dir] .pg-crumbs { margin-bottom: 22px; }
  [dir] .pg-lede { margin-top: 18px; }
  [dir] .pg-actions { margin-top: 24px; }
  [dir] .pg-proof { margin-top: 22px; padding-top: 14px; }
}
/* Homepage hero, 961 to 1180: the example caption stops short of card 2 */
@media (min-width: 961px) and (max-width: 1180px) { [dir] .bot-ai-hero__demo figcaption { max-width: 262px; } }
/* Course guide: the first link in the short answer stops shouting */
[dir] .pg-answer__text a:not([class]) { color: inherit; }
/* Two-tile rows: no empty lower half */
[dir] .pg-tiles[style*="--n:2"] .pg-tile { min-height: 0; }
/* A long price line breaks evenly, not with two words left over */
[dir] .pg-proof li.pg-proof__price { text-wrap: balance; }
/* Phone: the pilot's two small numbers share a row */
@media (max-width: 600px) {
  [dir] #pilot .pg-table tr:has(td:nth-child(4)) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  [dir] #pilot .pg-table tr:has(td:nth-child(4)) td:first-child, [dir] #pilot .pg-table tr:has(td:nth-child(4)) td:last-child { grid-column: 1 / -1; }
}
/* Homepage phones: 44px targets without moving the layout */
@media (max-width: 568px) {
  [dir] .bot-ai-hero__eyebrow { padding-block: 14px; margin-block: -14px; }
  [dir] .bot-ai-hero__proof a { display: inline-block; padding-block: 13px; margin-block: -13px; }
  [dir] .homepage-services__item-title { display: block; padding-block: 13px; margin-block: -13px; }
}

/* A kept live heading level, shown at section size */
[dir] .pg-head h3.pg-h2 { margin: 0; color: var(--ink); font-family: var(--head, inherit); font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; }
/* The kept SEO course registration form inside the closing panel */
[dir] .pg-form--old .form-send-enquiry__container, [dir] .pg-form--old .form-send-enquiry__col-fullwidth { width: 100%; max-width: none; padding: 0; }
[dir] .pg-form--old .form-heading { margin: 0 0 14px; font-size: 22px; font-weight: 800; color: var(--ink); }
[dir] .pg-form--old input { width: 100%; box-sizing: border-box; min-height: 48px; }
[dir] .pg-form--old .form-send-enquiry__btn-submit { width: 100%; min-height: 48px; }

/* Round 3 judges, existing pages, tested on 26 pages at four widths */
/* S1 related cards keep their outline */
[dir] .bp-body .pg-rel a { box-shadow: 0 0 0 1px var(--line); }
@media (hover: hover) and (pointer: fine) { [dir] .bp-body .pg-rel a:hover { box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); } }
/* S2 no connector after the last step in a row */
@media (min-width: 1121px) {
  [dir] .bp-body .pg-steps[style*="--n:3"] > li:nth-child(3n)::after,
  [dir] .bp-body .pg-steps[style*="--n:4"] > li:nth-child(4n)::after,
  [dir] .bp-body .pg-steps[style*="--n:5"] > li:nth-child(5n)::after { content: none; }
}
/* S3 fields in a row line up when one label wraps */
[dir] .bot-form__row { align-items: end; }
/* S5 tablet: even-numbered grids go two across, three-item galleries three across */
@media (min-width: 601px) and (max-width: 820px) {
  [dir] .pg-grid:has(> :nth-child(even):last-child), [dir] .pg-tiles:has(> :nth-child(even):last-child), [dir] .pg-rel:has(> :nth-child(even):last-child), [dir] .pg-ranks:has(> :nth-child(even):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [dir] .pg-gallery--fit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [dir] .bot-step1 { grid-template-columns: minmax(0, 1fr) auto; }
}
/* S6 laptop: three-item groups stay three across, five related links fill two rows, seven steps fill two rows */
@media (min-width: 821px) and (max-width: 1120px) {
  [dir] .pg-prices:has(> :nth-child(3):last-child), [dir] .pg-tiles:has(> :nth-child(3):last-child), [dir] .pg-steps:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [dir] .pg-steps:has(> :nth-child(7):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [dir] .pg-rel:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  [dir] .pg-rel:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  [dir] .pg-rel:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; }
}
/* S7 tablet: the bubble returns, so the sticky's right gap has a reason */
@media (min-width: 768px) and (max-width: 820px) { [dir] .bot-page:not(.pg-hero-on):not(.pg-at-form) .whatsapp-fixed-btn { display: flex !important; } }
/* S9 tap targets on phones */
@media (max-width: 820px) {
  [dir] .pg-crumbs a { padding: 13px 0; }
  [dir] .pg-item a[href^="tel:"], [dir] .pg-item a[href^="mailto:"], [dir] .pg-item a[href*="whatsapp"], [dir] .pg-item a[href*="maps"], [dir] .pg-card dd a[href^="tel:"], [dir] .pg-go { display: inline-block; padding: 12px 0; box-shadow: none; }
  [dir] .pg-price h3 a, [dir] .pg-tile h3 a { display: inline-block; padding: 9px 0; }
  [dir] .pg-card dd a[href^="tel:"] { padding: 14px 0; }
}
@media (max-width: 600px) { [dir] .bp-body .pg-table td a { display: inline-block; padding: 11px 0; box-shadow: none; text-decoration: underline; text-underline-offset: 2px; } }
@media (max-width: 568px) {
  [dir] .bot-page .bot-f--many > div { gap: 0 10px; }
  [dir] .bot-page .bot-f--many > div label { display: flex; align-items: center; min-height: 44px; }
}
/* S10 two-column key and value tables line up on phones */
@media (max-width: 820px) {
  [dir] .pg-table--kv tr { justify-content: flex-start; }
  [dir] .pg-table--kv td:first-child { flex: 0 0 38%; }
  [dir] .pg-table--kv td:last-child { flex: 1 1 0; }
}
/* S11 phone tables: short label and value share a line */
@media (max-width: 600px) {
  [dir] .pg-table:not(.pg-keep):not(.pg-table--kv) td:not(:first-child)::before { display: inline; content: attr(data-label) ": "; }
}
/* S12 eyebrow stays on one line on phones */
@media (max-width: 480px) { [dir] .pg-eyebrow { align-items: flex-start; } [dir] .pg-eyebrow::before { flex: none; margin-top: 5px; } }
/* W1 web design: old icons sit in the kit's icon tile (markup: <span class="pg-ico pg-ico--img"><img class="pg-oldico" ...></span>) */
[dir] .pg-ico--img::before { content: none; }
[dir] .pg-ico--img .pg-oldico { display: block; width: 40px; height: 40px; margin: 0; mix-blend-mode: multiply; }
/* W2 web design: department photo beside its intro */
@media (min-width: 701px) {
  [dir] .pg-in:has(> .pg-head + .pg-oldfig) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40%); gap: 0 40px; align-items: center; }
  [dir] .pg-in:has(> .pg-head + .pg-oldfig) > .pg-head { margin-bottom: 0; }
  [dir] .pg-in:has(> .pg-head + .pg-oldfig) > .pg-oldfig { margin: 0; }
  [dir] .pg-in:has(> .pg-head + .pg-oldfig) > .pg-grid { grid-column: 1 / -1; margin-top: 32px; }
}
/* W3 web design: hosting image floats inside the text */
@media (min-width: 601px) { [dir] .pg-split .pg-oldfig { float: right; width: clamp(240px, 44%, 300px); margin: 4px 0 10px 24px; } }
/* W4 web design: the enquiry button on a price card is a real button; struck price sits beside the figure */
[dir] .pg-price .pg-btn--line[href="#start"] { color: #fff; background: var(--violet); box-shadow: none; }
[dir] .pg-price__amt s { margin-left: 8px; color: var(--muted); font-size: 15px; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
/* A1 audit: links on the violet band */
[dir] .bp-body .pg-ask a:not([class]) { color: #fff; box-shadow: none; text-decoration: underline; text-underline-offset: 2px; }
/* C1 contact: card clear of the face at desktop, fills the width below that */
@media (min-width: 1241px) { [dir] .pg-at-w { left: auto; right: -14px; top: auto; bottom: 96px; width: 330px; transform: none; } }
@media (max-width: 1240px) { [dir] .pg-at-w dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; } }
@media (max-width: 820px) { [dir] .pg-stage__row > .pg-card.pg-at-w { flex-basis: 100%; } }
@media (max-width: 600px) { [dir] .pg-at-w dl { grid-template-columns: minmax(0, 1fr); } }
/* T1 content writing: four items fill their row */
@media (min-width: 1121px) { [dir] .pg-grid:not(.pg-grid--2):not(.pg-grid--4):has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 821px) and (max-width: 1120px) { [dir] .pg-grid:not(.pg-grid--2):not(.pg-grid--4):has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* L1 logo: amber tags stay tags in phone cards */
@media (max-width: 820px) { [dir] .pg-item > .pg-you { justify-self: start; width: fit-content; } }
/* P1 button under a note gets room */
[dir] .pg-in > p.pg-center:has(> .pg-btn) { margin-top: 22px; }
/* V1 services: group labels read as group headings */
[dir] .pg-split--gap > .pg-kicker { margin: 0 0 14px; color: var(--indigo); font-size: 20px; }
/* W5 laptop: struck price always on its own line */
@media (min-width: 821px) and (max-width: 1120px) { [dir] .pg-price__amt s { display: block; margin: 4px 0 0; } }
/* S9b block links keep the link look */
[dir] .pg-go { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; }
[dir] .pg-tile .pg-go { color: inherit; font-weight: 700; }
/* S13 three-line H1 pages: the lead bar stays on the 1440x900 first screen */
@media (min-width: 1241px) {
  [dir] .pg-hero__copy { padding-bottom: 64px; }
  [dir] .pg-proof { margin-top: 22px; padding-top: 14px; }
  [dir] .pg-lead__card { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
/* S14 long question lists run in two columns on wide screens; grid, so nothing jumps columns when an answer opens */
@media (min-width: 1121px) {
  [dir] .pg-faq:not(.pg-faq--wide):has(details:nth-child(10)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; align-items: start; max-width: var(--wrap); }
  [dir] .pg-faq:not(.pg-faq--wide):has(details:nth-child(10)) details:nth-child(2) { border-top: 1px solid var(--line); }
}
/* V2 colour tiles: links share one baseline */
[dir] .pg-tile { display: flex; flex-direction: column; }
[dir] .bp-body .pg-tile .pg-tile__go { margin-top: auto; padding-top: 10px; }
/* V3 colour tiles: denser on phones */
@media (max-width: 600px) {
  [dir] .pg-tile { padding: 16px 18px; }
  [dir] .pg-tiles { gap: 10px; }
  [dir] .bp-body .pg-tile p { font-size: 15px; line-height: 1.5; }
}
/* P2 three-image galleries on phones: one wide, two beside each other */
@media (max-width: 600px) {
  [dir] .pg-gallery--fit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  [dir] .pg-gallery--fit figure:first-child { grid-column: 1 / -1; }
}
/* PR1 pricing: the picked plan's button is a real button */
[dir] .pg-price--pick .pg-btn--line { color: #fff; background: var(--violet); box-shadow: none; }
/* C2 contact: form first on phones */
@media (max-width: 820px) { [dir] body:has(.pg-at-w) #start .pg-form { order: -1; } }
/* W6 web design: CMS screens take less height before the portfolio (the section order is protected, the size is not) */
@media (min-width: 1121px) { [dir] .pg-gallery--cms { max-width: 820px; margin-left: auto; margin-right: auto; } }
@media (max-width: 600px) {
  [dir] .pg-gallery--cms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  [dir] .pg-gallery--cms figure:first-child { grid-column: 1 / -1; }
  [dir] .pg-gallery--cms figcaption { font-size: 13.5px; }
}
/* S15 tablet: the person stays, as on the homepage */
@media (min-width: 700px) and (max-width: 959px) {
  [dir] .pg-hero__copy { max-width: calc(100% - 272px); }
  [dir] .pg-kate { display: block; left: auto; right: -70px; top: 44px; bottom: auto; height: 680px; max-height: none; transform: none; z-index: 1; }
  [dir] .pg-orbit { right: -80px; top: 90px; width: 380px; height: 380px; opacity: 1; }
  [dir] .pg-stage__row { position: relative; z-index: 3; }
}
/* R2 long old answers keep a reading width */
[dir] .pg-faq__a p, [dir] .pg-faq__a ul { max-width: 760px; }
/* F1 Payment After Rank: one frame round the list, not two */
[dir] #existing .pg-panel { padding: 0; background: none; box-shadow: none; }
/* S17 phones: the ring stops cutting through the headline */
@media (max-width: 600px) { [dir] .pg-tilt { display: none; } [dir] .pg-orbit { top: 96px; opacity: .3; } }
/* S18 the arrow never wraps alone */
[dir] .pg-rel b::after { content: "\00a0\2192"; }
/* G1 a short heading block sits level with the long list beside it */
[dir] .pg-mid { align-self: center; }

/* Round 4: WhatsApp beside the call button in the phone header, inner pages */
[dir] .header__wa { display: none; }
@media (max-width: 567px) {
  [dir] .bot-page .header__call { left: 0; right: auto; width: calc(100% - 132px); margin: 0; transform: none; box-sizing: border-box; }
  [dir] .bot-page .header__wa { position: absolute; top: 59px; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 124px; min-height: 44px; border-radius: 38px; color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; background: #067a4c; }
}
@media (max-width: 567px) { [dir] .bot-page .header__call span { line-height: 44px; } }
@media (max-width: 400px) {
  [dir] .bot-page .header__call { width: calc(100% - 104px); padding-left: 38px; text-align: left; }
  [dir] .bot-page .header__wa { width: 96px; font-size: 14px; }
}
/* Round 4: on desktop a slim bar keeps the next step, phone and WhatsApp in reach. It sits above the page, so nothing floats over the text. */
[dir] .pg-bar { display: none; }
@media (min-width: 821px) {
  html { scroll-padding-top: 76px; }
  [dir] .pg-sticky { display: none; }
  [dir] .pg-bar { position: fixed; z-index: 60; top: 0; left: 0; right: 0; display: block; color: #fff; background: #1d1640; box-shadow: 0 10px 24px -14px rgba(18, 13, 43, .6); visibility: hidden; transform: translateY(-100%); transition: transform 240ms var(--out), visibility 0s 240ms; }
  [dir] .pg-bar.is-on { visibility: visible; transform: none; transition: transform 240ms var(--out), visibility 0s; }
  [dir] .pg-bar__in { display: flex; align-items: center; gap: 22px; box-sizing: border-box; max-width: 1318px; min-height: 60px; margin: 0 auto; padding: 8px 24px; }
  [dir] .pg-bar__logo { flex: none; display: block; line-height: 0; }
  [dir] .pg-bar__logo img { display: block; width: auto; height: 28px; }
  [dir] .pg-bar__where { min-width: 0; overflow: hidden; color: rgba(255, 255, 255, .72); font-size: 15px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
  [dir] .pg-bar__go { display: flex; align-items: center; gap: 22px; margin-left: auto; }
  [dir] .pg-bar__go > a:not(.pg-sticky) { color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
  [dir] .pg-bar .pg-sticky { position: static; display: inline-flex; min-height: 44px; padding: 0 22px; font-size: 15px; white-space: nowrap; box-shadow: none; transform: none; transition: none; }
}
@media (min-width: 1461px) {
  [dir] .bot-page .whatsapp-fixed-btn { display: flex !important; right: 24px; bottom: 20px; transition: opacity 200ms; }
  [dir] .bot-page.pg-at-form .whatsapp-fixed-btn { opacity: 0; pointer-events: none; }
}
@media (min-width: 821px) and (max-width: 1460px) { [dir] .bot-page .whatsapp-fixed-btn { display: none !important; } }
@media (min-width: 821px) and (max-width: 1023px) { [dir] .pg-bar__where, [dir] .pg-bar__tel { display: none; } }
@media (hover: hover) and (pointer: fine) and (min-width: 821px) {
  [dir] .pg-bar__go > a:not(.pg-sticky):hover { text-decoration: underline; text-underline-offset: 3px; }
  [dir] .pg-bar .pg-sticky:hover { background: linear-gradient(180deg, #e04a36, #d43c28); }
}
@media (prefers-reduced-motion: reduce) { [dir] .pg-bar, [dir] .pg-bar.is-on { transition: none; } }

/* A long underlined phrase keeps clear of the first card */
@media (min-width: 1241px) { [dir] .pg-hero h1.pg-h1--long { font-size: clamp(48px, 3.7vw, 52px); } }

/* The old print control stays in the page but is no longer drawn */
[dir] .pg-note-s:has(> .js-print) { display: none; }

/* Add-ons quoted separately: a plus, not a tick */
[dir] .bp-body .pg-plus li::before { background: #efeafd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2.6v6.8M2.6 6h6.8' fill='none' stroke='%236848e4' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat; }