/* =========================================================
   GOLD SNIPER — single stylesheet (fonts + all pages)
   Mobile cascade priority: shared/home + original 5 pages
   (about/rules/contact/blog) win over later pages when selectors clash.
   ========================================================= */

/* ---------- fonts ---------- */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/dmsans-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/dmsans-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../assets/fonts/vazirmatn-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../assets/fonts/vazirmatn-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../assets/fonts/vazirmatn-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- shared + home (desktop) ---------- */
/* =========================================================
   GOLD SNIPER — landing page (desktop, 1440 canvas)
   Built from Figma "united kings- main page" (node 1:2)
   ========================================================= */

/* Mobile-only chrome: hidden on the desktop canvas (page CSS may re-show, e.g. checkout .plan-tabs) */
.nav-toggle, .drawer, .plan-tabs, .review-dots { display: none; }

/* ---------- Design tokens ---------- */
:root {
  /* Fonts: design uses "Peyda" (commercial, fontiran.com).
     Swap the first family below once licensed Peyda webfonts are added
     to assets/fonts and declared with @font-face near the top of this file. */
  --font-fa: "Vazirmatn", "Peyda", Tahoma, sans-serif;
  --font-logo: "DM Sans", Arial, sans-serif;
  /* Vazirmatn sets ~4-7% wider than Peyda; this tightens word gaps so the
     design's line breaks are kept. Set to 0 when switching to Peyda. */
  --fa-word-spacing: -1px;

  --c-bg: #020710;
  --c-bg-2: #050b14;
  --c-card: #0f172a;
  --c-white: #ffffff;
  --c-gold: #ffba02;
  --c-gold-light: #ffd460;
  --c-amber: #f59e0b;
  --c-amber-dark: #d97706;
  --c-blue: #3b82f6;
  --c-blue-dark: #2563eb;
  --c-blue-deep: #234c90;
  --c-green: #22c55e;
  --c-green-light: #4ade80;
  --c-green-dark: #0a8337;
  --c-red: #de4a4a;
  --c-slate-400: #94a3b8;
  --c-slate-500: #64748b;

  --c-border: rgba(255, 255, 255, 0.1);
  --c-border-soft: rgba(255, 255, 255, 0.07);
  --c-gold-10: rgba(255, 186, 2, 0.1);

  --grad-gold: linear-gradient(90deg, var(--c-gold-light), var(--c-gold));
  --grad-gold-rev: linear-gradient(90deg, var(--c-gold), var(--c-gold-light));
  --shadow-gold: 0 4px 50px rgba(255, 186, 2, 0.4);

  --page-w: 1440px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  /* Clip horizontal bleed here — NOT on body. overflow-x:hidden on body
     forces overflow-y:auto and parks the vertical scrollbar on the 1440
     canvas edge, which optically shifts the layout left. */
  overflow-x: hidden;
  overflow-y: scroll;
  background: var(--c-bg);
  /* Column flex + align-items:center pins the 1440 body on the physical
     viewport mid — equal side clip under RTL (no right-stick overflow). */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
}
body {
  width: var(--page-w);
  min-width: var(--page-w);
  flex-shrink: 0;
  overflow: visible;
  background: var(--c-bg);
  color: var(--c-white);
  font-family: var(--font-fa);
  font-size: 16px;
  line-height: 1.27;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { font-weight: inherit; }

/* ---------- Helpers ---------- */
.c-gold { color: var(--c-gold); }
.c-green { color: var(--c-green); }
.c-green-l { color: var(--c-green-light); }
.c-red { color: var(--c-red); }
.c-slate { color: var(--c-slate-400); }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600 !important; }
.nowrap { white-space: nowrap; }
.grad-text {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-text--rev { background-image: var(--grad-gold-rev); }

/* ---------- Page shell ---------- */
.page {
  position: relative;
  width: var(--page-w);
  margin: 0;
  overflow: hidden;
  background: var(--c-bg);
}
.container { position: relative; z-index: 1; width: 100%; margin: 0 auto; }
.stack { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* Full-width dark bands with hairline borders (cover background blobs) */
.band {
  position: relative;
  z-index: 1;
  background: var(--c-bg-2);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

/* ---------- Decorative blurred ellipses ---------- */
.deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.deco__blob { position: absolute; max-width: none; }
.deco__blob--a { left: 679px;  top: 716px;  width: 919px; height: 919px; }
.deco__blob--b { left: -67px;  top: 930px;  width: 919px; height: 919px; }
.deco__blob--c { left: -43px;  top: 2317px; width: 919px; height: 919px; }
.deco__blob--d { left: 8px;    top: 4095px; width: 588px; height: 588px; }
.deco__blob--e { left: -55px;  top: 3051px; width: 588px; height: 588px; }
.deco__blob--f { left: 956px;  top: 3384px; width: 588px; height: 588px; }
.deco__blob--g { left: 883px;  top: 4089px; width: 588px; height: 588px; }
.deco__blob--h { left: -175px; top: 5361px; width: 919px; height: 919px; }
.deco__blob--i { left: 631px;  top: 5157px; width: 919px; height: 919px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  transition: filter .2s, transform .2s;
}
.btn:hover { filter: brightness(1.08); }
.btn img { flex: none; }
.btn--lg { height: 48px; width: var(--w, auto); }
.btn--gold {
  color: var(--c-bg);
  background: var(--grad-gold);
  box-shadow: var(--shadow-gold);
}
.btn--ghost {
  color: var(--c-white);
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--c-border);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
.btn--glass {
  color: var(--c-white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--c-border);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
.btn--telegram {
  width: 213px;
  gap: 4px;
  line-height: 33px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-blue-deep));
  box-shadow: 0 4px 40px rgba(59, 130, 246, 0.4);
}
.btn--whatsapp {
  width: 213px;
  gap: 4px;
  line-height: 33px;
  background: linear-gradient(90deg, var(--c-green), var(--c-green-dark));
  box-shadow: 0 4px 40px rgba(34, 197, 94, 0.3);
}

/* Section pill badge / titles */
.pill-badge {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 50px;
  background: var(--c-gold-10);
  color: var(--c-gold);
  font-size: 16px;
  line-height: 20px;
}
.section-title { font-size: 32px; font-weight: 700; line-height: 41px; }
.section-sub { margin-top: 10px; font-size: 18px; line-height: 33px; color: var(--c-slate-400); }

/* Number circle (Figma "Ellipse 1") */
.num-circle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: url(../assets/svg/step-circle.svg) center / 40px 40px no-repeat;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--c-gold);
  font-size: 18px;
  font-weight: 500;
  line-height: 23px;
}

/* Tick bullet rows */
.ticks { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 600; line-height: 18px; }
.ticks li { display: flex; align-items: center; gap: 5px; }

/* Stars */
.stars { display: flex; align-items: center; }
.stars--14 { gap: 3px; }
.stars--14 img { width: 14px; height: 14px; }
.stars--16 { gap: 4px; }
.stars--16 img { width: 16px; height: 16px; }

/* Icon square */
.icon-box {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--c-gold-10);
}
.icon-box--48 { width: 48px; height: 48px; }

/* ---------- Brand ---------- */
.brand { display: flex; align-items: center; flex: none; }
.brand__emblem { width: 70px; height: 70px; object-fit: cover; }
.brand__name {
  direction: ltr;
  unicode-bidi: isolate;
  margin-right: -7px;
  font-family: var(--font-logo);
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  font-variation-settings: "opsz" 14;
  white-space: nowrap;
}
.brand__gold { color: var(--c-gold); }

/* ---------- Language selector ---------- */
.lang { position: relative; }
.lang__btn {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 104px;
  height: 36px;
  padding: 0 8px 0 7px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}
.lang__caret { margin-right: auto; transition: transform .2s; }
.lang.is-open .lang__caret { transform: rotate(180deg); }
.lang__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: none;
  min-width: 100%;
  padding: 4px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-card);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.lang--up .lang__menu { top: auto; bottom: calc(100% + 6px); }
.lang.is-open .lang__menu { display: block; }
.lang__menu a { display: block; padding: 6px 10px; border-radius: 6px; font-size: 14px; line-height: 18px; }
.lang__menu a:hover, .lang__menu a[aria-selected="true"] { background: rgba(255, 255, 255, 0.06); color: var(--c-gold); }

/* Long Persian text blocks whose line breaks must match the design */
.about__text, .what__text, .how__text, .feature-card__text,
.why-card__text, .footer-brand__text { word-spacing: var(--fa-word-spacing); }
.why-card__text { word-spacing: calc(var(--fa-word-spacing) * 1.5); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header { position: relative; z-index: 5; height: 94px; padding-top: 24px; }
.site-header__inner { display: flex; align-items: center; height: 70px; padding: 0 77px 0 100px; }
.main-nav { margin-right: 68px; }
.main-nav ul { display: flex; align-items: center; gap: 28px; }
.main-nav a {
  display: flex;
  align-items: center;
  height: 36px;
  color: var(--c-slate-400);
  font-size: 16px;
  line-height: 20px;
  transition: color .2s;
}
.main-nav a:hover { color: var(--c-white); }
.main-nav a.is-active {
  padding: 0 20.5px;
  border-radius: 8px;
  background: var(--c-gold-10);
  color: var(--c-gold);
}
.header-actions { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.btn--panel {
  justify-content: flex-start;
  gap: 6px;
  width: 110px;
  height: 36px;
  padding-right: 11px;
  border-radius: 8px;
  background: var(--grad-gold-rev);
  font-size: 14px;
  line-height: 18px;
}

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; z-index: 1; height: 614px; }
.hero__bg {
  position: absolute;
  top: 58px;
  left: 0;
  z-index: 0;
  width: 1440px;
  height: 586px;
  max-width: none;
  object-fit: cover;
  opacity: 0.2;
  pointer-events: none;
}
.hero__inner { display: flex; flex-direction: column; align-items: center; padding-top: 81px; }
.hero__title {
  font-size: 60px;
  font-weight: 700;
  line-height: 77px;
  background: linear-gradient(87.32deg, var(--c-gold-light) 10.862%, var(--c-gold) 99.942%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub { margin-top: 26px; color: var(--c-slate-400); font-size: 24px; font-weight: 500; line-height: 30px; }
.hero__sub--white { margin-top: 10px; color: var(--c-white); }
.hero-steps { display: flex; gap: 20px; margin-top: 58px; padding-right: 22px; }
.hero-step { display: flex; align-items: center; gap: 11px; font-size: 16px; font-weight: 500; line-height: 20px; }
.hero__ctas { display: flex; gap: 16px; margin-top: 43px; }
.hero__free { gap: 12px; margin-top: 22px; }
.hero__ticks { margin-top: 39px; padding-left: 38px; }

/* =========================================================
   ABOUT BAND
   ========================================================= */
.about { height: 280px; }
.about__inner { display: flex; flex-direction: column; align-items: center; padding-top: 42px; text-align: center; }
.about__title { font-size: 24px; font-weight: 600; line-height: 30px; }
.about__title .grad-text { background-image: var(--grad-gold-rev); }
.about__text { width: 1001px; margin-top: 26px; color: var(--c-slate-400); font-size: 18px; line-height: 33px; }
.about__note { margin-top: 23px; color: var(--c-slate-500); font-size: 14px; line-height: 33px; }

/* =========================================================
   VIP REVIEWS SLIDER
   ========================================================= */
.vip-reviews__inner { display: flex; flex-direction: column; align-items: center; padding: 89px 0 37px; }
.vip-reviews__title { font-size: 24px; font-weight: 600; line-height: 30px; }
.vip-reviews__sub { margin-top: 10px; color: var(--c-slate-400); font-size: 18px; line-height: 33px; }

.slider { position: relative; width: 719px; height: 300px; margin-top: 47px; }
.slider__viewport {
  width: 670px;
  height: 300px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}
.slider__track { display: flex; height: 100%; transition: transform .45s ease; }
.slide { flex: 0 0 670px; min-width: 0; height: 300px; padding: 53px 86px 0 88px; }
.slide__head { display: flex; align-items: center; justify-content: space-between; height: 26px; }
.slide__count { color: var(--c-slate-400); font-size: 14px; line-height: 26px; }
.rating { display: flex; align-items: center; gap: 5px; }
.rating__value { font-size: 16px; font-weight: 700; line-height: 26px; }
.slide__quote { margin: 36px -5px 0 -7px; color: var(--c-slate-400); font-size: 16px; line-height: 34px; text-align: center; }
.slide__name { margin-top: 39px; font-size: 18px; font-weight: 600; line-height: 23px; text-align: center; }
.slide__role { margin-top: 7px; color: var(--c-slate-500); font-size: 14px; line-height: 17px; text-align: center; }

.slider__arrow {
  position: absolute;
  top: 126px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  background: var(--c-white);
  transition: background .2s;
}
.slider__arrow--next { left: 0; }
.slider__arrow--prev { right: 0; }
.slider__arrow--prev img { transform: rotate(180deg); }
.slider__arrow.is-disabled {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(27px);
  backdrop-filter: blur(27px);
  cursor: default;
}
.vip-reviews__all { display: flex; align-items: center; gap: 9px; margin-top: 108px; color: var(--c-gold); font-size: 16px; line-height: 26px; }

/* =========================================================
   DARK BLOCK (what are signals + how it works)
   Static (non-positioned) so the blurred blobs paint above its background.
   ========================================================= */
.dark-block { background: var(--c-bg-2); }

.what__inner { display: flex; flex-direction: column; align-items: center; padding-top: 45px; text-align: center; }
.what .section-title { margin-top: 20px; }
.what__text { width: 1041px; margin-top: 18px; color: var(--c-slate-400); font-size: 16px; line-height: 33px; }
.what__subtitle { margin-top: 60px; font-size: 24px; font-weight: 700; line-height: 33px; }

.feature-grid {
  position: relative;
  left: -7px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px 32px;
  width: 928px;
  margin-top: 51px;
  text-align: right;
}
.feature-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 288px;
  height: 160px;
  padding: 16px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-card);
}
.feature-card__title { margin-top: 4px; font-size: 18px; font-weight: 500; line-height: 33px; white-space: nowrap; }
.feature-card__text { margin-top: 3px; color: var(--c-slate-400); font-size: 14px; line-height: 28px; }

.how__inner { display: flex; justify-content: center; align-items: flex-start; gap: 66px; padding: 81px 0 44px; }
.how__content { width: 534px; }
.how__title { font-size: 32px; font-weight: 700; line-height: 48px; }
.how__text { margin-top: 19px; color: var(--c-slate-400); font-size: 16px; line-height: 33px; white-space: nowrap; }
.how-steps { display: flex; flex-direction: column; gap: 23px; margin-top: 30px; }
.how-steps li { display: flex; align-items: center; gap: 13px; }
.how-steps__title { font-size: 18px; font-weight: 600; line-height: 23px; }
.how-steps__text { margin-top: 7px; color: var(--c-slate-400); font-size: 14px; line-height: 17px; }
.how__cta { display: flex; margin-top: 61px; }

.signal-card {
  flex: none;
  width: 479px;
  margin-top: 32px;
  overflow: hidden;
  border: 1px solid var(--c-border-soft);
  border-radius: 24px;
  background: var(--c-card);
}
.signal-card__head {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 96px;
  padding: 0 14px 0 31px;
  border-bottom: 1px solid var(--c-border);
}
.signal-card__emblem { position: relative; flex: none; width: 50px; height: 50px; }
.signal-card__emblem-bg { position: absolute; top: 5px; left: 5px; }
.signal-card__emblem-img { position: relative; width: 50px; height: 50px; object-fit: cover; }
.signal-card__heading h3 { font-size: 18px; font-weight: 700; line-height: 23px; }
.signal-card__heading p { margin-top: 7px; color: var(--c-slate-400); font-size: 14px; line-height: 17px; }
.signal-card__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 26px;
  margin-right: auto;
  border: 1px solid var(--c-border-soft);
  border-radius: 40px;
  font-size: 12px;
  line-height: 15px;
}
.signal-card__body { padding: 30px 29px 0; }
.signal-box {
  height: 200px;
  padding: 19px 25px 0;
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.1);
}
.signal-box__title { color: var(--c-green); font-size: 16px; font-weight: 600; line-height: 20px; }
.signal-box__grid { display: grid; grid-template-columns: 209px 1fr; row-gap: 20px; margin-top: 24px; }
.signal-box__grid > div { display: flex; align-items: baseline; gap: 7px; }
.signal-box__grid dt { font-size: 14px; font-weight: 500; line-height: 18px; white-space: nowrap; }
.signal-box__grid dd { font-size: 16px; font-weight: 600; line-height: 20px; }
.signal-card__note { margin-top: 22px; color: var(--c-slate-500); font-size: 12px; font-weight: 500; line-height: 22px; }
.signal-card__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 65px;
  margin-top: 32px;
  border-top: 1px solid rgba(255, 186, 2, 0.2);
  background: linear-gradient(90deg, rgba(255, 186, 2, 0.07), rgba(153, 112, 1, 0.07));
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

/* =========================================================
   WHY GOLD
   ========================================================= */
.why__inner { display: flex; flex-direction: column; align-items: center; padding-top: 43px; text-align: center; }
.why .section-title { margin-top: 28px; }
.why-grid { display: grid; grid-template-columns: repeat(2, 500px); gap: 30px; margin-top: 58px; text-align: right; }
.why-card {
  display: flex;
  align-items: flex-start;
  gap: 19px;
  height: 190px;
  padding: 26px 27px 0 6px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-card);
}
.why-card__title { margin-top: -6px; font-size: 18px; font-weight: 500; line-height: 33px; }
.why-card__text { margin-top: 3px; color: var(--c-slate-400); font-size: 14px; line-height: 26px; white-space: nowrap; }

/* =========================================================
   PRICING
   ========================================================= */
.pricing__inner { display: flex; flex-direction: column; align-items: center; padding: 129px 0 83px; text-align: center; }
.pricing__sub { margin-top: 12px; color: var(--c-slate-400); font-size: 16px; line-height: 20px; white-space: pre; }
.plans { position: relative; left: 7px; display: flex; gap: 35px; margin-top: 63px; }
.plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 365px;
  height: 661px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
}
.plan__ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% + 2px);
  height: 42px;
  margin: -1px -1px 0;
  border-radius: 12px 12px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}
.plan--gold .plan__ribbon { background: linear-gradient(90deg, var(--c-amber), var(--c-amber-dark)); }
.plan--blue .plan__ribbon { background: linear-gradient(90deg, var(--c-blue), var(--c-blue-dark)); }
.plan__head {
  position: relative;
  z-index: 0;
  width: calc(100% + 2px);
  height: 157px;
  margin: 0 -1px;
  padding-top: 22px;
  background: rgba(255, 255, 255, 0.05);
}
.plan__name { font-size: 20px; font-weight: 600; line-height: 25px; }
.plan__desc { margin-top: 5px; color: var(--c-slate-400); font-size: 14px; line-height: 17px; }
.plan__prices { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; padding: 0 29px 0 33px; }
.plan__price { position: relative; font-size: 24px; font-weight: 700; line-height: 31px; white-space: nowrap; }
.plan__price::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 188px;
  height: 188px;
  transform: translate(-50%, -50%);
  background: center / 188px 188px no-repeat;
  pointer-events: none;
}
.plan--gold .plan__price { color: var(--c-amber); }
.plan--gold .plan__price::before { background-image: url(../assets/svg/price-glow-gold.svg); }
.plan--blue .plan__price { color: var(--c-blue); }
.plan--blue .plan__price::before { background-image: url(../assets/svg/price-glow-blue.svg); }
.plan__features {
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-self: stretch;
  margin-top: 31px;
  padding-right: 29px;
  text-align: right;
}
.plan__features li { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 15px; }
.plan__features li::before {
  content: "";
  flex: none;
  width: 10px;
  height: 7.17px;
  background: url(../assets/svg/check.svg) center / contain no-repeat;
}
.plan__btn { position: relative; width: 303px; margin-top: 33px; }
.plan__btn img { position: absolute; top: 15px; left: 25px; }
.plan__guarantee { display: flex; align-items: center; gap: 5px; margin-top: 19px; color: var(--c-green); font-size: 12px; font-weight: 300; line-height: 15px; }
.plan__refund { width: 300px; margin-top: 11px; color: var(--c-slate-500); font-size: 12px; font-weight: 500; line-height: 20px; }

/* =========================================================
   MEMBER REVIEWS BAND
   (Figma band is offset 4px to the right — reproduced)
   ========================================================= */
.reviews { left: 4px; height: 400px; }
.reviews__inner { left: -4px; display: flex; flex-direction: column; align-items: center; padding-top: 48px; }
.review-grid { display: flex; gap: 20px; margin-top: 65px; }
.review-card {
  display: flex;
  flex-direction: column;
  width: 330px;
  height: 198px;
  padding: 22px 19px 23px 18px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-bg);
}
.review-card__quote { margin: 22px 0 0 0; margin-right: -3px; color: var(--c-slate-400); font-size: 14px; line-height: 26px; }
.review-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.author { display: flex; align-items: center; gap: 7px; }
.author__avatar { width: 32px; height: 32px; border-radius: 100px; object-fit: cover; }
.author__name { font-size: 12px; font-weight: 600; line-height: 15px; }
.author__role { margin-top: 3px; color: var(--c-slate-500); font-size: 11px; line-height: 14px; }
.review-card__note { color: var(--c-slate-500); font-size: 12px; line-height: 26px; }

/* =========================================================
   SUCCESS STORIES
   ========================================================= */
.success__inner { display: flex; flex-direction: column; align-items: center; padding: 78px 0 95px; text-align: center; }
.success__eyebrow { color: var(--c-gold); font-size: 16px; line-height: 20px; }
.success .section-title { margin-top: 15px; }
.success__sub { margin-top: 18px; color: var(--c-slate-400); font-size: 16px; line-height: 20px; }
.shots {
  width: 1020px;
  height: 597px;
  margin-top: 74px;
  border: 1px solid var(--c-border);
  border-radius: 24px;
  background: var(--c-bg);
}
.shots__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 83px;
  padding: 0 33px 0 38px;
  border-bottom: 1px solid var(--c-border);
}
.shots__symbol { display: flex; align-items: center; }
.shots__dot { width: 62px; height: 62px; max-width: none; margin: -21px -25px -29px; }
.shots__pair { direction: ltr; margin-right: 5px; font-size: 16px; font-weight: 600; line-height: 20px; }
.shots__side { margin-right: 6px; color: var(--c-green); font-size: 12px; font-weight: 600; line-height: 15px; }
.shots__pips {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 32px;
  border-radius: 6px;
  background: rgba(34, 197, 94, 0.1);
  color: var(--c-green);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}
.shots__gallery { display: flex; justify-content: center; gap: 3.5px; padding-top: 30px; }
.shot { position: relative; flex: none; width: 315px; height: 377px; overflow: hidden; border-radius: 8px; }
.shot--bordered { border: 1px solid var(--c-white); }
.shot--bordered img { width: 100%; height: 100%; object-fit: cover; }
.shot--crop img { position: absolute; top: -12px; left: -178px; width: 572px; height: 402px; max-width: none; object-fit: cover; }
.shots__foot { margin-top: 41px; border-top: 1px solid var(--c-border); }

.shots-pill {
  position: relative;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  margin-top: 54px;
  padding: 0 13px 0 17px;
  border: 1px solid var(--c-border);
  border-radius: 100px;
  background: var(--c-card);
  font-size: 14px;
  line-height: 17px;
}
.stats { position: relative; left: -3px; display: grid; grid-template-columns: 333px 280px 380px; margin-top: 75px; }
.stat { display: flex; flex-direction: column; align-items: center; }
.stat strong { font-size: 40px; font-weight: 700; line-height: 51px; }
.stat span { margin-top: 6px; color: var(--c-slate-500); font-size: 24px; font-weight: 500; line-height: 30px; }
.success__ctas { position: relative; left: 6px; display: flex; gap: 21px; margin-top: 78px; }

/* =========================================================
   FAQ + CONTACT BAND
   ========================================================= */
.faq__inner { display: flex; flex-direction: column; align-items: center; padding: 38px 0 54px; text-align: center; }
.faq .section-title { margin-top: 28px; }
.accordion { display: flex; flex-direction: column; gap: 17px; width: 768px; margin-top: 51px; text-align: right; }
.faq-item {
  padding: 0 25px 0 23px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  transition: background .2s, border-color .2s;
}
.faq-item.is-open { margin-bottom: 2px; border-color: rgba(255, 186, 2, 0.3); background: var(--c-card); }
.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10.5px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 33px;
  text-align: right;
}
.faq-item.is-open .faq-item__q { padding: 19px 0 11px; }
.faq-item__icon--closed { transform: rotate(180deg); }
.faq-item__icon--open, .faq-item.is-open .faq-item__icon--closed { display: none; }
.faq-item.is-open .faq-item__icon--open { display: block; }
.faq-item__a { display: none; padding-bottom: 19px; }
.faq-item.is-open .faq-item__a { display: block; }
.faq-item__a p { width: 708px; color: var(--c-slate-400); font-size: 14px; line-height: 26px; }
.contact__text { margin-top: 63px; color: var(--c-slate-400); font-size: 18px; line-height: 33px; }
.contact__btns { display: flex; gap: 14px; margin-top: 30px; }

/* =========================================================
   FINAL CTA
   ========================================================= */
.final-cta__inner { display: flex; flex-direction: column; align-items: center; padding: 112px 0 127px; text-align: center; }
.final-cta__text { margin-top: 29px; color: var(--c-slate-400); font-size: 16px; font-weight: 500; line-height: 20px; }
.final-cta__text--2 { margin-top: 11px; }
.final-cta__ticks { margin-top: 28px; padding-left: 10px; }
.final-cta__btns { display: flex; gap: 17px; margin-top: 52px; }
.final-cta__btns .btn--ghost { gap: 5px; }
.tg-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  background: url(../assets/svg/circle-white.svg) center / 20px 20px no-repeat;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { height: 640px; border-bottom: 0; }
.site-footer__inner { left: -1px; width: 1093px; }
.footer-top { display: flex; gap: 128px; padding-top: 20px; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; width: 394px; flex: none; }
.brand--footer .brand__emblem { margin-right: -18px; }
.brand--footer .brand__name { margin-right: -5px; }
.footer-brand__text { margin-top: 5px; white-space: nowrap; color: var(--c-slate-400); font-size: 16px; line-height: 32px; }
.footer-badges { display: flex; align-items: center; gap: 22px; height: 51px; margin-top: 16px; }
.footer-badges img { mix-blend-mode: luminosity; object-fit: cover; }
.footer-badges img:last-child { margin-right: 5px; }
.footer-brand__btn { gap: 13px; width: 167px; margin-top: 24px; border-radius: 8px; }

.footer-cols { display: flex; padding-top: 32px; }
.footer-col { position: relative; width: 172px; }
.footer-col + .footer-col { width: 193px; padding-right: 39px; }
.footer-col:last-child { width: 190px; padding-right: 46px; }
.footer-col + .footer-col::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 160px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
}
.footer-col__title { display: flex; align-items: center; gap: 11px; font-size: 18px; font-weight: 700; line-height: 23px; white-space: nowrap; }
.footer-col__title::before { content: ""; flex: none; width: 3px; height: 12px; border-radius: 1px; background: var(--c-gold); }
.footer-col ul { display: flex; flex-direction: column; gap: 13px; margin-top: 18px; }
.footer-col a { display: block; font-size: 14px; line-height: 17px; white-space: nowrap; opacity: 0.55; transition: opacity .2s; }
.footer-col a:hover, .footer-col a.is-active { opacity: 1; }

.footer-about {
  margin-top: 31px;
  padding-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  text-align: center;
}
.footer-about__title { font-size: 24px; font-weight: 600; line-height: 30px; }
.footer-about p { width: 970px; margin: 0 auto; color: var(--c-slate-400); font-size: 16px; line-height: 32px; }
.footer-about .footer-about__title + p { margin-top: 23px; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 37px;
  padding-top: 23px;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}
.footer-bottom__copy { color: var(--c-slate-400); font-size: 13px; line-height: 16px; }

/* Desktop-only manual line breaks copied from the design.
   When adding mobile styles, hide them: .br-d { display: none; } */
.br-d { display: inline; }

/* Let footer badges blend (luminosity) with the footer background */
.site-footer .container { z-index: auto; }
.why-grid { position: relative; left: 2px; }
.feature-card__text.nowrap { word-spacing: calc(var(--fa-word-spacing) * 1.5); }

/* =========================================================
   INNER PAGES — shared
   (about, contact, rules, subscription, manage-subscription,
    signal, proof, blog, blog-single). Page-specific styles
    live in css/<page>.css.
   ========================================================= */
/* Inner-page frames use #050b14 as page colour and #020710 for bands */
.page--alt { background: var(--c-bg-2); }
/* Header sits 4px higher and 1px further left on inner pages */
.site-header--sub { height: 90px; padding-top: 20px; }
.site-header--sub .site-header__inner { padding: 0 78px 0 99px; }
/* Inner-page footer is 2px taller */
.site-footer--sub { height: 642px; }

/* Static full-width strip: blurred ellipses paint above it (as in Figma) */
.strip {
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.sec-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sec-head__sub { margin-top: 14px; color: var(--c-slate-400); font-size: 18px; line-height: 33px; }
.card {
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-card);
}
.card--outline { background: none; }
.icon-box--64 { width: 64px; height: 64px; }
.c-white { color: var(--c-white); }
.ws-tight { word-spacing: var(--fa-word-spacing); }
.pre-line { white-space: nowrap; }

/* Breadcrumb (inner pages) */
.crumbs { display: flex; align-items: center; font-size: 14px; font-weight: 500; line-height: 18px; white-space: nowrap; }
.crumbs a { display: flex; align-items: center; gap: 4px; color: var(--c-slate-500); }
.crumbs__sep { margin: 0 6px 0 8px; }
.crumbs [aria-current] { color: var(--c-white); }
/* Page intro strip (breadcrumb + title + lead) */
.page-intro { position: relative; z-index: 1; height: 280px; }
.page-intro .crumbs { padding: 45px 78px 0 0; }
.page-intro__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.page-intro__lead { color: var(--c-slate-400); font-size: 18px; line-height: 33px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--c-gold); white-space: nowrap; }

/* Final CTA with the two price buttons (about, rules, ...) */
.final-cta__btns--prices { gap: 14px; margin-top: 52px; }
.final-cta__btns--prices .btn { justify-content: space-between; width: 195px; }
.final-cta__btns--prices .btn--monthly { padding: 0 20px 0 13px; }
.final-cta__btns--prices .btn--lifetime { padding: 0 16px; }

/* ---------- about (desktop) ---------- */
/* =========================================================
   ABOUT US page (Figma "united kings- About Us", 21:893, 1440 x 5287)
   ========================================================= */
.about-blob--1 { left: 467px; top: 13px;   width: 491px; height: 491px; }
.about-blob--2 { left: 956px; top: 1159px; width: 491px; height: 491px; }
.about-blob--3 { left: -98px; top: 1887px; width: 546px; height: 546px; }

/* Hero */
.about-hero { height: 776px; }
.about-hero__inner { display: flex; flex-direction: column; align-items: center; padding-top: 64px; text-align: center; }
.about-hero__emblem { width: 194px; height: 194px; object-fit: cover; }
.about-hero__title {
  margin-top: 33px;
  font-size: 60px;
  font-weight: 700;
  line-height: 90px;
  background: linear-gradient(88.3deg, var(--c-gold-light) 10.862%, var(--c-gold) 99.942%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about-hero__text { position: relative; left: -10px; width: 1001px; margin-top: 29px; color: var(--c-slate-400); font-size: 20px; line-height: 33px; word-spacing: var(--fa-word-spacing); }
.about-hero__btns { display: flex; gap: 14px; margin-top: 51px; }

/* Stats strip */
.about-stats { height: 280px; padding-top: 48px; }
.about-stats__grid { position: relative; left: -4px; display: grid; grid-template-columns: repeat(4, 280px); justify-content: center; }
.about-stat { display: flex; flex-direction: column; align-items: center; text-align: center; white-space: nowrap; }
.about-stat strong { margin-top: 14px; color: var(--c-gold); font-size: 32px; font-weight: 700; line-height: 41px; }
.about-stat__label { margin-top: 11px; font-size: 16px; font-weight: 500; line-height: 20px; }
.about-stat__sub { margin-top: 24px; color: var(--c-slate-400); font-size: 16px; font-weight: 500; line-height: 20px; }

/* Story */
.about-story { padding: 92px 0 120px; }
.story-list { display: flex; flex-direction: column; align-items: center; gap: 30px; margin-top: 72px; }
.story-card { display: flex; align-items: flex-start; gap: 19px; width: 890px; height: 240px; padding: 26px 30px 0 38px; }
.story-card .icon-box { margin-top: 4px; }
.story-card__body { width: 753px; }
.story-card__title { font-size: 18px; font-weight: 500; line-height: 33px; }
.story-card__text { margin-top: 13px; color: var(--c-slate-400); font-size: 14px; line-height: 26px; word-spacing: var(--fa-word-spacing); }

/* Company info */
.about-company { height: 600px; padding-top: 58px; }
.company-card { width: 890px; height: 475px; margin: 0 auto; padding: 27px 36px 0 28px; }
.company-card__title { font-size: 24px; font-weight: 700; line-height: 33px; }
.company-grid { display: grid; grid-template-columns: 414px 410px; row-gap: 17px; margin-top: 27px; }
.company-grid dt { font-size: 14px; font-weight: 600; line-height: 33px; }
.company-grid dd { margin-top: -3px; color: var(--c-slate-400); font-size: 16px; line-height: 33px; white-space: nowrap; }
.company-grid dd.company-grid__multi { margin-bottom: -3px; line-height: 28px; }
.company-grid__last { grid-column: 1 / -1; margin-top: 19px; padding-top: 20px; border-top: 1px solid var(--c-border); }

/* Why us */
.about-why { padding: 81px 0 89px; }
.why-us-grid { display: grid; grid-template-columns: repeat(3, 340px); gap: 20px; justify-content: center; margin-top: 58px; }
.why-us-card { display: flex; align-items: flex-start; gap: 12px; height: 160px; padding: 18px 19px 0 10px; }
.why-us-card .icon-box { margin-top: 0; }
.why-us-card__title { margin-top: 3px; font-size: 18px; font-weight: 600; line-height: 33px; white-space: nowrap; }
.why-us-card__text { margin-top: 4px; color: var(--c-slate-400); font-size: 14px; line-height: 23px; white-space: nowrap; word-spacing: var(--fa-word-spacing); }
.why-us-card__text--wrap { width: 206px; white-space: normal; }

/* Core values */
.about-values { height: 600px; padding-top: 74px; }
.values-grid { display: grid; grid-template-columns: repeat(4, 252px); gap: 28px; justify-content: center; margin-top: 61px; }
.value-card { display: flex; flex-direction: column; align-items: center; height: 290px; padding-top: 26px; text-align: center; }
.value-card__title { margin-top: 22px; font-size: 18px; font-weight: 700; line-height: 33px; }
.value-card__text { width: 206px; margin-top: 16px; color: var(--c-slate-400); font-size: 14px; line-height: 23px; word-spacing: var(--fa-word-spacing); }

/* Final CTA */
.about-cta .final-cta__inner { padding: 105px 0 119px; }

/* ---------- rules (desktop) ---------- */
/* =========================================================
   RULES page (Figma "united kings- Rules", 41:4723, 1440 x 4653)
   ========================================================= */
.contact-blob--1 { left: 1154px; top: 249px; width: 491px; height: 491px; }
.contact-blob--2 { left: -182px; top: 766px; width: 491px; height: 491px; }

.rules-intro { margin-top: 19px; }
.rules-intro .section-title { margin-top: 37px; }
.rules-intro__lead { margin-top: 10px; white-space: nowrap; }
.rules-intro__date { margin-top: 21px; color: var(--c-slate-500); font-size: 14px; font-weight: 500; line-height: 18px; }

.rules { position: relative; z-index: 1; padding: 99px 0 85px; }
.rules__list { display: flex; flex-direction: column; align-items: center; }
.rule-card { width: 890px; min-height: var(--h); margin-top: var(--gap, 0); padding: 22px 22px 14px 35px; }
.rule-card__head { display: flex; align-items: center; gap: 19px; }
.rule-card__num { color: var(--c-gold); font-size: 24px; font-weight: 800; line-height: 33px; }
.rule-card__title { font-size: 18px; font-weight: 500; line-height: 33px; white-space: pre; }
.rule-card__body { margin-top: 13px; color: var(--c-slate-400); font-size: 14px; line-height: 26px; word-spacing: var(--fa-word-spacing); }
.rule-gap { margin-bottom: 26px; }
.rule-list li { position: relative; padding-right: 14px; }
.rule-list li::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--c-gold);
}
.rule-indent { padding-right: 14px; }
/* first card: text sits under the title like the "story" cards */
.rule-card--intro { padding-top: 30px; }
.rule-card--intro .rule-card__head { align-items: flex-start; }
.rule-card--intro .rule-card__title { margin-top: -4px; }
.rule-card--intro .rule-card__body { width: 753px; margin: -6px 67px 0 0; }

.rules-cta { height: 440px; }
.rules-cta .final-cta__inner { padding: 71px 0 0; }

/* ---------- contact (desktop) ---------- */
/* =========================================================
   CONTACT US page (Figma "united kings- Contact Us", 50:5267, 1440 x 2304)
   ========================================================= */
.contact-blob--1 { left: 1154px; top: 249px; width: 491px; height: 491px; }
.contact-blob--2 { left: -182px; top: 766px; width: 491px; height: 491px; }

.contact-intro { margin-top: 19px; }
.contact-intro .section-title { margin-top: 47px; }
.contact-intro__lead { margin-top: 19px; white-space: nowrap; }

.contact-support { position: relative; z-index: 1; padding: 111px 0 121px; }
.contact-support__lead { margin-top: 22px; color: var(--c-slate-400); font-size: 18px; line-height: 34px; white-space: nowrap; }

.channel-grid { display: grid; grid-template-columns: repeat(3, 325px); gap: 35px; justify-content: center; margin-top: 54px; }
.channel-card { display: flex; flex-direction: column; align-items: center; height: 280px; padding: 26px 0 23px; text-align: center; }
.channel-card__title { margin-top: 22px; font-size: 18px; font-weight: 700; line-height: 33px; white-space: nowrap; }
.channel-card__text { width: 206px; margin-top: 16px; color: var(--c-slate-400); font-size: 14px; line-height: 23px; }
.channel-card__text--wide { width: 258px; }
.channel-card__link { margin-top: auto; font-size: 14px; font-weight: 600; line-height: 18px; }

.hours-grid { display: grid; grid-template-columns: repeat(2, 505px); gap: 35px; justify-content: center; margin-top: 44px; }
.hours-card { display: flex; align-items: center; gap: 22px; height: 120px; padding: 0 26px; }
.hours-card__title { font-size: 18px; font-weight: 700; line-height: 23px; white-space: nowrap; }
.hours-card__text { margin-top: 17px; color: var(--c-slate-400); font-size: 16px; line-height: 20px; white-space: nowrap; }

.contact-faq { height: 280px; padding-top: 79px; }
.contact-faq__title { font-size: 24px; font-weight: 700; line-height: 31px; }
.contact-faq__text { margin-top: 19px; color: var(--c-slate-400); font-size: 18px; line-height: 23px; }
.contact-faq__link { margin-top: 31px; font-size: 16px; font-weight: 500; line-height: 20px; }

.contact-faq { margin-bottom: 135px; }

/* ---------- blog (desktop) ---------- */
/* =========================================================
   BLOG list page (Figma "united kings- blogs", 50:5648, 1440 x 2304)
   ========================================================= */
.blog-blob--1 { left: 1154px; top: 249px; width: 491px; height: 491px; }
.blog-blob--2 { left: -182px; top: 766px; width: 491px; height: 491px; transform: rotate(180deg); }

.blog-intro { margin-top: 19px; }
.blog-intro .section-title { margin-top: 47px; }
.blog-intro__lead { margin-top: 19px; white-space: nowrap; }

.blog { position: relative; z-index: 1; padding: 53px 0 53px; }
.blog__inner { left: 20px; display: flex; flex-direction: column; align-items: center; }

.blog-cats { position: relative; left: 4px; width: 1071px; height: 60px; padding: 0 28px 0 30px; border-radius: 8px; background: var(--c-card); }
.blog-cats ul { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.blog-cats__btn {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.blog-cats__btn:hover { color: var(--c-gold); }
.blog-cats__btn.is-active { background: var(--c-gold-10); color: var(--c-gold); }

.post-grid { display: grid; grid-template-columns: repeat(3, 339px); gap: 35px 31px; margin-top: 56px; }
.post-card { display: flex; flex-direction: column; }
.post-card__media { display: block; height: 194px; overflow: hidden; border-radius: 20px 20px 0 0; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body {
  display: flex;
  flex-direction: column;
  height: 271px;
  padding: 24px 23px 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 0;
  border-radius: 0 0 20px 20px;
}
.post-card__tags { display: flex; gap: 8px; }
.post-card__tags li { display: flex; align-items: center; justify-content: center; width: 64px; height: 28px; border-radius: 4px; background: var(--c-gold-10); color: var(--c-gold); font-size: 12px; line-height: 15px; }
.post-card__title { margin-top: 24px; font-size: 14px; font-weight: 600; line-height: 18px; }
.post-card__title a:hover { color: var(--c-gold); }
.post-card__excerpt { width: 264px; word-spacing: var(--fa-word-spacing); margin-top: 14px; color: var(--c-slate-400); font-size: 13px; line-height: 23px; }
.post-card__meta { display: flex; justify-content: space-between; margin-top: 19px; padding-left: 2px; color: var(--c-slate-500); font-size: 13px; line-height: 23px; }
.post-card__more { margin-top: 19px; font-size: 16px; font-weight: 500; line-height: 20px; }

.pager { direction: ltr; display: flex; align-items: center; gap: 5px; margin-top: 61px; position: relative; left: -22px; }
.pager__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  color: var(--c-slate-500);
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  transition: color .2s;
}
.pager__num:hover { color: var(--c-white); }
.pager__num.is-active { background: var(--c-gold-10); color: var(--c-gold); }
.pager__arrow { display: flex; align-items: center; justify-content: center; width: 18px; height: 28px; opacity: .9; }
.pager__arrow:first-child { margin-right: 11px; }
.pager__arrow:last-child { margin-left: 11px; }
.pager__arrow:hover { opacity: 1; }

/* ---------- manage-subscription (desktop) ---------- */
/* =========================================================
   MANAGE SUBSCRIPTION page (Figma "united kings- manage subscription", 52:5955, 1440 x 1702)
   ========================================================= */
.ms-blob--1 { left: 1154px; top: 249px; width: 491px; height: 491px; }
.ms-blob--2 { left: -182px; top: 766px; width: 491px; height: 491px; transform: rotate(180deg); }

.ms { display: flex; flex-direction: column; align-items: center; height: 975px; padding-top: 145px; }
.ms__back { display: flex; align-items: center; gap: 4px; align-self: flex-start; margin-right: 338px; color: var(--c-slate-500); font-size: 18px; font-weight: 500; line-height: 23px; transition: color .2s; }
.ms__back:hover { color: var(--c-slate-400); }
.ms__title { margin-top: 61px; font-size: 32px; font-weight: 700; line-height: 41px; }
.ms__sub { margin-top: 19px; color: var(--c-slate-400); font-size: 18px; line-height: 23px; white-space: nowrap; }

.ms-card { display: flex; flex-direction: column; width: 500px; height: 390px; margin-top: 60px; padding: 30px 32px 0; border: 1px solid var(--c-border); border-radius: 20px; }
.ms-card__label { font-size: 18px; font-weight: 500; line-height: 23px; }
.ms-card__input {
  height: 54px;
  margin-top: 17px;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: transparent;
  color: var(--c-white);
  font: 400 13px/16px var(--font-fa);
}
.ms-card__input::placeholder { color: var(--c-slate-500); opacity: 1; }
.ms-card__input:focus { outline: none; border-color: rgba(255, 186, 2, 0.4); }
.ms-card__submit { height: 54px; margin-top: 37px; border-radius: 10px; background: linear-gradient(to left, var(--c-gold), var(--c-gold-light)); box-shadow: 0 4px 50px rgba(255, 186, 2, 0.4); color: var(--c-bg); font-size: 18px; font-weight: 700; line-height: 23px; transition: filter .2s; }
.ms-card__submit:hover { filter: brightness(1.06); }
.ms-card__note { display: flex; align-items: flex-start; gap: 15px; height: 115px; margin-top: 27px; padding: 18px 19px 0; border-radius: 12px; background: var(--c-gold-10); }
.ms-card__note p { width: 345px; margin-top: -5px; color: var(--c-gold); font-size: 13px; font-weight: 500; line-height: 28px; }

/* ---------- single-blog (desktop) ---------- */
/* =========================================================
   SINGLE BLOG POST page (Figma "united kings- single blog", 79:9570, 1440 x 2822)
   ========================================================= */
.article { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; width: 712px; margin: 0 338px 0 0; padding: 70px 0 220px; }
.article__crumbs a:last-of-type span { color: var(--c-slate-500); }
.article__tags { display: flex; gap: 8px; margin-top: 31px; }
.article__tags a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 28px;
  border-radius: 44px;
  background: var(--c-card);
  color: var(--c-slate-400);
  font-size: 12px;
  line-height: 15px;
  transition: color .2s;
}
.article__tags a:hover { color: var(--c-gold); }
.article__title { margin-top: 41px; font-size: 24px; font-weight: 500; line-height: 31px; }
.article__text { width: 752px; max-width: none; margin-top: 15px; color: var(--c-slate-400); font-size: 16px; line-height: 32px; word-spacing: var(--fa-word-spacing); }
.article__lead { margin-top: 16px; }
.article__author { display: flex; align-items: center; gap: 17px; margin-top: 38px; }
.article__avatar { display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--c-gold); font-size: 18px; font-weight: 500; line-height: 32px; }
.article__author-name { margin-top: -5px; font-size: 16px; font-weight: 500; line-height: 32px; }
.article__meta { display: flex; align-items: center; gap: 4px; margin-top: -2px; color: var(--c-slate-400); font-size: 14px; line-height: 32px; }
.article__dot { margin: -10px 2px 0; font-size: 24px; font-weight: 700; }
.article__cover { width: 712px; height: 474px; margin-top: 37px; border-radius: 24px; object-fit: cover; }
.article__h2 { margin-top: 57px; font-size: 24px; font-weight: 700; line-height: 31px; }
.article__h2 + .article__text { width: 752px; max-width: none; margin-top: 15px; }
.article__h2--gold { margin-top: 43px; color: var(--c-gold); }
.article__foot { display: flex; align-items: center; justify-content: space-between; align-self: stretch; margin-top: 37px; padding-top: 23px; border-top: 1px solid var(--c-border); }
.article__tags--foot { margin-top: 0; }
.article__tags--foot a { width: 74px; height: 32px; font-size: 14px; line-height: 18px; }
.article__share { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-bg-2); transition: border-color .2s; }
.article__share:hover { border-color: rgba(255, 186, 2, 0.4); }

.article-cta { height: 443px; background: linear-gradient(180deg, rgba(255, 186, 2, 0.1) 6.546%, rgba(153, 112, 1, 0.1)); }
.article-cta .final-cta__inner { padding: 74px 0 0; }

/* ---------- proof (desktop) ---------- */
/* =========================================================
   PROOF page (Figma "united kings- Proof", 73:7193, 1440 x 3263)
   ========================================================= */
.proof-blob { width: 919px; height: 919px; }
.proof-blob--1 { left: 655px;  top: 473px; }
.proof-blob--2 { left: -151px; top: 677px; }
.proof-blob--3 { left: 655px;  top: 1103px; }
.proof-blob--4 { left: -151px; top: 1307px; }

/* Intro strip (static: the blurred ellipses paint over it, as in the design) */
.proof-intro { height: 435px; margin-top: 30px; background: var(--c-bg-2); border-bottom: 1px solid var(--c-border); }
.proof-intro .crumbs { padding: 40px 178px 0 0; }
.proof-intro__head { display: flex; flex-direction: column; align-items: center; margin-top: 83px; text-align: center; }
.proof-intro__lead { margin-top: 15px; color: var(--c-slate-400); font-size: 18px; line-height: 33px; white-space: nowrap; }
.proof-intro__btns { display: flex; gap: 14px; margin-top: 61px; }
.proof-intro__primary { justify-content: space-between; width: 230px; padding: 0 33px 0 14px; }
.proof-intro__ghost { width: 144px; }

/* Proof cards */
.proof { height: 1633px; }
.proof__inner { display: flex; flex-direction: column; align-items: center; padding-top: 67px; }
.proof__pill { left: 0; width: 262px; margin-top: 0; padding: 0 13px 0 0; }
.proof__grid { position: relative; left: -8px; display: grid; grid-template-columns: repeat(2, 647px); gap: 20px 22px; margin-top: 101px; }
.proof-card { height: 610px; border: 1px solid var(--c-border); border-radius: 24px; background: var(--c-card); }
.proof-card__head { padding: 0 22px 0 31px; }
.proof-card__gallery { display: flex; gap: 8px; padding: 30px 28px 0 0; }
.proof-shot { width: 190px; }
.proof-shot--a img, .proof-shot--b img { position: absolute; max-width: none; object-fit: cover; }
.proof-shot--a img { top: -9px; left: -220px; width: 570px; height: 401px; }
.proof-shot--b img { top: 6.66px; left: -195px; width: 520px; height: 365.5px; }
.proof-card__text { margin-top: 31px; padding: 17px 37px 0 0; border-top: 1px solid var(--c-border); color: var(--c-slate-400); font-size: 14px; line-height: 24px; white-space: nowrap; }

/* Final CTA */
.proof-cta { height: 438px; }
.proof-cta .final-cta__inner { padding: 80px 0 0; }

/* ---------- signal (desktop) ---------- */
/* =========================================================
   SIGNAL REPORT page (Figma "united kings- signal", 71:6745, 1440 x 4106)
   ========================================================= */
.signal-blob { left: 623px; top: 2123px; width: 919px; height: 919px; }

/* Intro band */
.signal-intro { height: 480px; margin-top: 30px; border-top: 0; }
.signal-intro .crumbs { padding: 40px 178px 0 0; }
.signal-intro__head { display: flex; flex-direction: column; align-items: center; margin-top: 83px; text-align: center; }
.signal-intro__lead { margin-top: 15px; color: var(--c-slate-400); font-size: 18px; line-height: 33px; white-space: nowrap; }
.signal-intro__btns { display: flex; gap: 14px; margin-top: 58px; }
.signal-intro__primary { justify-content: space-between; width: 230px; padding: 0 19px 0 14px; }
.signal-intro__ghost { width: 144px; }

/* Calculation card */
.signal-calc { position: relative; z-index: 1; height: 1160px; padding-top: 84px; }
.calc-card { width: 890px; height: 979px; margin: 0 auto; padding: 29px 35px 0 0; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-card); }
.calc-card__head { display: flex; align-items: flex-start; gap: 19px; }
.calc-card__title { margin-top: 6px; font-size: 24px; font-weight: 700; line-height: 33px; }
.calc-card__lead { margin-top: 9px; color: var(--c-slate-400); font-size: 16px; line-height: 24px; white-space: nowrap; word-spacing: var(--fa-word-spacing); }
.calc-card__body { width: 752px; margin-right: 67px; padding-top: 4px; }
.calc-sec { margin-top: 14px; color: var(--c-slate-400); font-size: 14px; line-height: 24px; }
.calc-sec:first-child { margin-top: 24px; }
.calc-sec h3 { position: relative; color: var(--c-white); font-size: 16px; font-weight: 700; line-height: 24px; }
.calc-sec h3::before { content: ""; position: absolute; top: 9px; right: -19px; width: 6px; height: 6px; border-radius: 1px; background: var(--c-gold); }
.calc-sec h3 + p { margin-top: var(--bm); }
.calc-sec__formula { font-weight: 500; }
.calc-sec__light { font-weight: 300; }
.calc-sec__lh23 { line-height: 23px; }
.calc-sec .nw { white-space: nowrap; word-spacing: var(--fa-word-spacing); }

/* Stats band */
.signal-stats { height: 255px; padding-top: 57px; }
.signal-stats__grid { display: grid; grid-template-columns: repeat(4, 279px); justify-content: start; padding-right: 166px; }
.signal-stat { display: flex; flex-direction: column; align-items: center; text-align: center; white-space: nowrap; }
.signal-stat strong { margin-top: 14px; color: var(--c-gold); font-size: 32px; font-weight: 700; line-height: 41px; }
.signal-stat > span:last-child { margin-top: 11px; font-size: 16px; font-weight: 500; line-height: 20px; }

/* Performance table */
.perf { position: relative; z-index: 1; height: 1010px; padding-top: 97px; }
.perf__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.perf__lead { margin-top: 25px; color: var(--c-slate-400); font-size: 18px; line-height: 33px; white-space: nowrap; word-spacing: var(--fa-word-spacing); }
.perf__tabs { display: flex; gap: 12px; margin-top: 42px; }
.perf__tab { width: 100px; height: 48px; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-card); font-size: 16px; font-weight: 600; line-height: 20px; }
.perf__tab.is-active { border-color: var(--c-gold); background: var(--c-gold); color: var(--c-bg); }
.perf-table { width: 766px; height: 465px; margin-top: 77px; border: 1px solid var(--c-border); border-radius: 24px; background: var(--c-bg); }
.perf-table__row { display: grid; grid-template-columns: 236px 276px 1fr; align-items: start; height: 74px; padding-top: 25px; border-top: 1px solid rgba(255, 255, 255, 0.5); font-size: 18px; font-weight: 600; line-height: 23px; }
.perf-table__row > :nth-child(1) { color: var(--c-white); }
.perf-table__row > :nth-child(2) { color: var(--c-green); }
.perf-table__row > :nth-child(3) { padding-left: 38px; color: var(--c-slate-400); }
.perf-table__row--head { height: 82px; padding-top: 34px; border-top: 0; color: var(--c-slate-400); font-size: 16px; line-height: 20px; }
.perf-table__row--head > :nth-child(n) { color: var(--c-slate-400); }
.perf-table__row--head + .perf-table__row { height: 82px; padding-top: 33px; border-top-color: var(--c-border); }

/* Final CTA */
.signal-cta { height: 438px; }
.signal-cta .final-cta__inner { padding: 80px 0 0; }

/* ---------- subscription (desktop) ---------- */
/* =========================================================
   SUBSCRIPTION page (Figma "united kings- subscription", 57:6262, 1440 x 4164)
   ========================================================= */
.sub-blob--1 { left: 1154px; top: 254px;  width: 491px; height: 491px; }
.sub-blob--2 { left: -53px;  top: 304px;  width: 491px; height: 491px; }
.sub-blob--3 { left: 459px;  top: 1073px; width: 491px; height: 491px; }

/* Checkout strip (static so the blurred ellipses paint above it) */
.checkout { height: 1577px; margin-top: 37px; background: var(--c-bg-2); border-bottom: 1px solid var(--c-border); }
.checkout__grid { display: grid; grid-template-columns: 489px 535px; column-gap: 40px; padding: 33px 178px 0 0; }
.checkout__main { display: flex; flex-direction: column; align-items: flex-start; }
.checkout__title { margin-top: 113px; }
.checkout__sub { margin-top: 5px; color: var(--c-slate-400); font-size: 18px; line-height: 33px; }

.checkout .plan-tabs { display: flex; gap: 14px; width: 279px; height: 52px; margin-top: 18px; padding: 9px 18px 9px 9px; border-radius: 8px; background: var(--c-card); }
.checkout .plan-tabs__tab { width: 118px; border-radius: 6px; font-size: 16px; font-weight: 700; line-height: 33px; white-space: nowrap; }
.checkout .plan-tabs__tab.is-active { width: 120px; background: var(--c-gold-10); color: var(--c-gold); font-size: 14px; }

.price-row { display: flex; align-items: center; margin-top: 32px; white-space: nowrap; }
.price-row__label, .price-row__old { color: var(--c-slate-500); font-size: 16px; font-weight: 500; line-height: 20px; }
.price-row__old { margin-right: 3px; }
.price-row__now { margin-right: 20px; color: var(--c-gold); font-size: 32px; font-weight: 700; line-height: 41px; white-space: pre; }
.checkout__once { margin-top: 9px; color: var(--c-gold); font-size: 16px; font-weight: 600; line-height: 20px; }
.checkout__refund { display: flex; align-items: center; gap: 4px; margin-top: 27px; color: var(--c-green); font-size: 14px; font-weight: 500; line-height: 18px; white-space: pre; }
.checkout__note { margin-top: 7px; color: var(--c-slate-500); font-size: 14px; font-weight: 500; line-height: 28px; white-space: nowrap; }

.checkout-form { width: 487px; margin: 37px 2px 0 0; }
.checkout-form__label { padding: 0; color: var(--c-slate-400); font-size: 18px; font-weight: 500; line-height: 23px; }
.pay-methods { border: 0; }
.pay-methods__grid { display: grid; grid-template-columns: repeat(2, 234px); gap: 19px; margin-top: 33px; }
.pay-option { position: relative; display: flex; flex-direction: column; height: 100px; padding: 11px 13px 0; border: 1px solid var(--c-border); border-radius: 12px; cursor: pointer; transition: border-color .2s; }
.pay-option:hover { border-color: rgba(255, 255, 255, 0.2); }
.pay-option input { position: absolute; opacity: 0; pointer-events: none; }
.pay-option input:focus-visible ~ .pay-option__head { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.pay-option__tick { position: absolute; top: 6px; left: 8px; display: none; }
.pay-option input:checked ~ .pay-option__tick { display: block; }
.pay-option__head { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; line-height: 18px; }
.pay-option__icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; }
.pay-option__icon--card { background: linear-gradient(152.6deg, #404cce 12.27%, #602068 82.77%); }
.pay-option__icon--crypto { background: linear-gradient(147.4deg, var(--c-gold) 14.03%, var(--c-gold-light) 100%); }
.pay-option__logos { display: flex; align-items: center; gap: 5px; margin-top: 19px; padding-right: 1px; color: var(--c-slate-500); font-size: 12px; line-height: 15px; }
.pay-option__logos img { object-fit: cover; }
.pay-option__logos--crypto { gap: 10px; }

.field { position: relative; margin-top: 26px; }
.field input, .field select {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--c-white);
  font: 500 13px/16px var(--font-fa);
  -webkit-appearance: none;
  appearance: none;
}
.field input::placeholder { color: var(--c-slate-500); opacity: 1; }
.field input:focus, .field select:focus { outline: none; border-color: rgba(255, 186, 2, 0.4); }
.field--select select { padding-right: 19px; color: var(--c-slate-500); cursor: pointer; }
.field--select select:valid { color: var(--c-white); }
.field--select select option { background: var(--c-card); color: var(--c-white); }
.field--select img { position: absolute; top: 17px; left: 24px; transform: rotate(90deg); pointer-events: none; }
.field__help { margin-top: 13px; color: var(--c-slate-500); font-size: 12px; line-height: 15px; }
.field--tg { margin-top: 24px; }
.field--tg .field__help { margin-top: 12px; }

.checkout-form__info { margin-top: 22px; padding: 13px 19px 0; height: 110px; border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 12px; background: rgba(59, 130, 246, 0.07); color: var(--c-slate-500); font-size: 14px; line-height: 28px; word-spacing: var(--fa-word-spacing); }
.checkout-form__divider { display: flex; align-items: center; gap: 14px; margin-top: 42px; font-size: 18px; font-weight: 500; line-height: 23px; white-space: nowrap; }
.checkout-form__divider::before, .checkout-form__divider::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }
.checkout-form__divider + .field { margin-top: 31px; }

.total-row { display: flex; align-items: center; justify-content: space-between; height: 52px; margin-top: 33px; padding: 0 19px 0 18px; border-radius: 8px; background: var(--c-gold-10); font-size: 16px; line-height: 20px; }
.total-row strong { color: var(--c-gold); font-size: 18px; font-weight: 600; line-height: 23px; white-space: pre; }

.agree { display: flex; align-items: center; gap: 11px; margin-top: 29px; font-size: 14px; line-height: 18px; cursor: pointer; }
.agree input { flex: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--c-border); border-radius: 4px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.agree input:checked { border-color: var(--c-gold); background: var(--c-gold) url(../assets/svg/check.svg) center / 10px 7px no-repeat; filter: none; }
.agree a { color: var(--c-gold); text-decoration: underline; }

.checkout-form__submit { width: 487px; height: 54px; margin-top: 52px; font-size: 18px; font-weight: 700; line-height: 23px; }
.checkout-form__foot { margin-top: 23px; color: var(--c-slate-500); font-size: 14px; line-height: 17px; text-align: center; }

/* "What you get" card */
.perks { align-self: start; height: 419px; margin-top: 15px; padding: 29px 50px 0 0; border: 1px solid var(--c-border); border-radius: 24px; }
.perks__head { display: flex; align-items: center; gap: 12px; }
.perks__title { font-size: 24px; font-weight: 500; line-height: 30px; white-space: nowrap; }
.perks__list { display: flex; flex-direction: column; gap: 12px; margin-top: 46px; padding-right: 6px; }
.perks__list li { display: flex; align-items: center; gap: 15px; font-size: 16px; line-height: 20px; white-space: nowrap; }
.perks__list li::before { content: ""; flex: none; width: 10px; height: 7.17px; background: url(../assets/svg/check.svg) center / contain no-repeat; }

/* Steps */
.sub-steps { position: relative; z-index: 1; height: 531px; padding-top: 84px; }
.sub-steps__title { text-align: center; }
.sub-steps__grid { display: grid; grid-template-columns: repeat(3, 325px); gap: 35px; justify-content: center; margin-top: 71px; }
.sub-step { display: flex; flex-direction: column; align-items: center; height: 220px; padding-top: 26px; text-align: center; }
.sub-step__num { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 100px; background: var(--c-gold-10); color: var(--c-gold); font-size: 24px; font-weight: 700; line-height: 31px; }
.sub-step__title { margin-top: 17px; font-size: 18px; font-weight: 700; line-height: 33px; }
.sub-step__text { width: 206px; margin-top: 6px; color: var(--c-slate-400); font-size: 14px; line-height: 23px; }
.sub-step__text--wide { width: 258px; }

/* FAQ band (shared markup from the home page) + "any question?" block */
#faq .faq__inner { padding: 52px 0 92px; }
.ask { display: flex; flex-direction: column; align-items: center; margin-top: 185px; }
.ask__title { font-size: 24px; font-weight: 700; line-height: 31px; }
.ask__text { margin-top: 19px; color: var(--c-slate-400); font-size: 18px; line-height: 23px; }
.ask__btn { justify-content: space-between; width: 170px; margin-top: 39px; padding: 0 45px 0 13px; }

/* =========================================================
   MOBILE (<=767px)
   Order: newer pages first, then original 5 page blocks,
   then shared/home — so original responsive chrome wins on clashes.
   ========================================================= */

/* ---------- manage-subscription (mobile) ---------- */
/* >>> MOBILE (<=767px) — scoped to body.m-ready.
   Designed on the 430px Figma frames, checked at 375px. */
@media (max-width: 767px) {
  /* auto: scaled from the desktop rules above */
  .m-ready .ms { height: auto; padding-top: 65px; }
  .m-ready .ms__back { align-self: flex-start; margin-right: 0; font-size: 16px; line-height: 20px; }
  .m-ready .ms__title { font-size: 24px; line-height: 31px; }
  .m-ready .ms__sub { white-space: normal; font-size: 16px; line-height: 29px; }
  .m-ready .ms-card { width: auto; max-width: 100%; height: auto; }
  .m-ready .ms-card__note { height: auto; }
  .m-ready .ms-card__note p { width: auto; max-width: 100%; }
  /* hand-tuned to the Figma mobile frames */
  .m-ready .ms { align-items: stretch; padding: 28px 0 120px; }
  .m-ready .ms__back { margin-right: 0; font-size: 14px; line-height: 18px; }
  .m-ready .ms__title { margin-top: 36px; text-align: center; font-size: 22px; line-height: 32px; }
  .m-ready .ms__sub { margin-top: 14px; text-align: center; white-space: normal; font-size: 14px; line-height: 26px; }
  .m-ready .ms-card { width: 100%; height: auto; margin-top: 36px; padding: 24px 18px 22px; }
  .m-ready .ms-card__label { font-size: 16px; line-height: 20px; }
  .m-ready .ms-card__input { margin-top: 14px; font-size: 12px; }
  .m-ready .ms-card__submit { margin-top: 28px; font-size: 16px; line-height: 20px; }
  .m-ready .ms-card__note { gap: 12px; height: auto; margin-top: 22px; padding: 14px 14px 16px; }
  .m-ready .ms-card__note img { flex: none; width: 20px; height: 20px; }
  .m-ready .ms-card__note p { width: auto; margin-top: 0; font-size: 12px; line-height: 24px; }
}

/* ---------- single-blog (mobile) ---------- */
/* >>> MOBILE (<=767px) — scoped to body.m-ready.
   Designed on the 430px Figma frames, checked at 375px. */
@media (max-width: 767px) {
  /* auto: scaled from the desktop rules above */
  .m-ready .article { width: auto; max-width: 100%; margin: 0; padding: 32px 0 100px; }
  .m-ready .article__title { font-size: 20px; line-height: 28px; }
  .m-ready .article__text, .m-ready .article__h2 + .article__text { width: auto; max-width: 100%; }
  .m-ready .article__cover { width: 100%; height: auto; aspect-ratio: 712 / 474; }
  .m-ready .article__h2 { font-size: 20px; line-height: 26px; }
  .m-ready .article-cta { height: auto; }
  /* hand-tuned to the Figma mobile frames */
  .m-ready .article { width: 100%; margin: 0; padding: 20px 0 80px; }
  .m-ready .article__crumbs { padding: 16px 0 0; }
  .m-ready .article__tags { margin-top: 22px; flex-wrap: wrap; }
  .m-ready .article__title { margin-top: 28px; font-size: 20px; line-height: 30px; }
  .m-ready .article__text { width: 100%; margin-top: 14px; font-size: 14px; line-height: 30px; }
  .m-ready .article__lead { margin-top: 14px; }
  .m-ready .article__author { margin-top: 28px; }
  .m-ready .article__avatar { width: 42px; height: 42px; font-size: 16px; }
  .m-ready .article__author-name { font-size: 14px; line-height: 24px; }
  .m-ready .article__meta { font-size: 12px; line-height: 24px; }
  .m-ready .article__cover { width: 100%; height: auto; margin-top: 28px; border-radius: 16px; }
  .m-ready .article__h2 { margin-top: 40px; font-size: 18px; line-height: 26px; }
  .m-ready .article__h2--gold { margin-top: 32px; }
  .m-ready .article__h2 + .article__text { width: 100%; }
  .m-ready .article__foot { flex-wrap: wrap; gap: 16px; margin-top: 28px; padding-top: 18px; }
  .m-ready .article-cta .final-cta__inner { padding: 72px 0 100px !important; }
  .m-ready .article-cta .final-cta__btns--prices { flex-direction: column; align-items: center; }
  .m-ready .article-cta .final-cta__btns--prices .btn { width: 280px; max-width: 100%; }
}

/* ---------- proof (mobile) ---------- */
/* >>> MOBILE (<=767px) — scoped to body.m-ready.
   Designed on the 430px Figma frames, checked at 375px. */
@media (max-width: 767px) {
  /* auto: scaled from the desktop rules above */
  .m-ready .proof-intro { height: auto; }
  .m-ready .proof-intro .crumbs { padding: 20px 0 0; }
  .m-ready .proof-intro__lead { white-space: normal; }
  .m-ready .proof { height: auto; }
  .m-ready .proof__grid { left: 0; grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .m-ready .proof-card { height: auto; }
  .m-ready .proof-card__text { white-space: normal; }
  .m-ready .proof-cta { height: auto; }
  /* hand-tuned to the Figma mobile frames */
  .m-ready .proof-intro { height: auto; margin-top: 12px; padding-bottom: 48px; }
  .m-ready .proof-intro .crumbs { padding-top: 28px; }
  .m-ready .proof-intro__head { margin-top: 48px; }
  .m-ready .proof-intro .section-title { font-size: 24px; line-height: 34px; }
  .m-ready .proof-intro__lead { margin-top: 16px; white-space: normal; font-size: 14px; line-height: 30px; }
  .m-ready .proof-intro__btns { flex-direction: column; align-items: center; gap: 12px; width: 100%; margin-top: 36px; }
  .m-ready .proof-intro__primary, .m-ready .proof-intro__ghost { width: 280px; max-width: 100%; justify-content: center; }
  .m-ready .proof-intro__primary { justify-content: space-between; padding: 0 16px 0 14px; }
  .m-ready .proof { height: auto; padding-bottom: 40px; }
  .m-ready .proof__inner { padding-top: 36px; }
  .m-ready .proof__pill { left: 0; width: auto; max-width: 100%; height: auto; min-height: 38px; padding: 8px 14px; font-size: 12px; line-height: 18px; white-space: normal; }
  .m-ready .proof__grid { left: 0; grid-template-columns: minmax(0, 1fr); gap: 18px; width: 100%; margin-top: 36px; }
  .m-ready .proof-card { height: auto; border-radius: 18px; overflow: hidden; }
  .m-ready .proof-card__head { height: 56px; padding: 0 14px; }
  .m-ready .proof-card__gallery { gap: 4px; padding: 18px 12px 0; }
  .m-ready .proof-shot { flex: 1 1 0; width: auto; height: 150px; }
  .m-ready .proof-shot--a img, .m-ready .proof-shot--b img { position: static; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 30% 50%; }
  .m-ready .proof-card__text { margin-top: 22px; padding: 14px 16px 18px; white-space: normal; font-size: 13px; line-height: 24px; }
  .m-ready .proof-cta .final-cta__inner { padding: 72px 0 100px !important; }
  .m-ready .proof-cta .final-cta__btns--prices { flex-direction: column; align-items: center; }
  .m-ready .proof-cta .final-cta__btns--prices .btn { width: 280px; max-width: 100%; }
}

/* ---------- signal (mobile) ---------- */
/* >>> MOBILE (<=767px) — scoped to body.m-ready.
   Designed on the 430px Figma frames, checked at 375px. */
@media (max-width: 767px) {
  /* auto: scaled from the desktop rules above */
  .m-ready .signal-intro { height: auto; }
  .m-ready .signal-intro .crumbs { padding: 20px 0 0; }
  .m-ready .signal-intro__lead { white-space: normal; }
  .m-ready .signal-calc { height: auto; }
  .m-ready .calc-card { width: auto; max-width: 100%; height: auto; }
  .m-ready .calc-card__lead { white-space: normal; }
  .m-ready .calc-card__body { width: auto; max-width: 100%; margin-right: 0; }
  .m-ready .calc-sec .nw { white-space: normal; }
  .m-ready .signal-stats { height: auto; }
  .m-ready .signal-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-right: 0; }
  .m-ready .signal-stat { white-space: normal; }
  .m-ready .perf { height: auto; }
  .m-ready .perf__lead { white-space: normal; }
  .m-ready .perf-table { width: auto; max-width: 100%; height: auto; }
  .m-ready .signal-cta { height: auto; }
  /* hand-tuned to the Figma mobile frames */
  .m-ready .signal-intro { height: auto; margin-top: 12px; padding-bottom: 48px; }
  .m-ready .signal-intro .crumbs { padding-top: 28px; }
  .m-ready .signal-intro__head { margin-top: 48px; }
  .m-ready .signal-intro .section-title { font-size: 24px; line-height: 34px; }
  .m-ready .signal-intro__lead { margin-top: 16px; white-space: normal; font-size: 14px; line-height: 30px; }
  .m-ready .signal-intro__btns { flex-direction: column; align-items: center; gap: 12px; width: 100%; margin-top: 36px; }
  .m-ready .signal-intro__primary, .m-ready .signal-intro__ghost { width: 280px; max-width: 100%; }
  .m-ready .signal-intro__primary { justify-content: space-between; padding: 0 16px 0 14px; }
  .m-ready .signal-calc { height: auto; padding: 40px 0 20px; }
  .m-ready .calc-card { width: 100%; height: auto; margin: 0; padding: 22px 18px 28px; }
  .m-ready .calc-card__head { gap: 12px; }
  .m-ready .calc-card__title { margin-top: 2px; font-size: 18px; line-height: 26px; }
  .m-ready .calc-card__lead { margin-top: 8px; white-space: normal; font-size: 13px; line-height: 24px; }
  .m-ready .calc-card__body { width: 100%; margin-right: 0; padding-top: 8px; }
  .m-ready .calc-sec { margin-top: 18px; font-size: 13px; line-height: 24px; }
  .m-ready .calc-sec h3 { font-size: 14px; line-height: 22px; padding-right: 14px; }
  .m-ready .calc-sec h3::before { right: 0; top: 8px; }
  .m-ready .calc-sec .nw { white-space: normal; }
  .m-ready .signal-stats { height: auto; padding: 36px 0 28px; }
  .m-ready .signal-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; justify-content: stretch; padding-right: 0; }
  .m-ready .signal-stat { white-space: normal; }
  .m-ready .signal-stat strong { margin-top: 12px; font-size: 22px; line-height: 30px; }
  .m-ready .signal-stat > span:last-child { margin-top: 8px; font-size: 13px; line-height: 18px; }
  .m-ready .perf { height: auto; padding: 40px 0 60px; }
  .m-ready .perf__inner { align-items: stretch; }
  .m-ready .perf .section-title { text-align: center; font-size: 22px; line-height: 30px; }
  .m-ready .perf__lead { margin-top: 16px; white-space: normal; font-size: 13px; line-height: 28px; text-align: center; }
  .m-ready .perf__tabs { justify-content: center; margin-top: 28px; }
  .m-ready .perf__tab { width: 90px; height: 44px; font-size: 14px; }
  .m-ready .perf-table { width: 100%; height: auto; margin-top: 36px; border-radius: 16px; overflow: hidden; }
  .m-ready .perf-table__row { grid-template-columns: 1.2fr 1fr 1fr; height: auto; min-height: 56px; padding: 16px 12px; font-size: 13px; line-height: 18px; }
  .m-ready .perf-table__row > :nth-child(3) { padding-left: 0; }
  .m-ready .perf-table__row--head { min-height: 52px; padding-top: 18px; font-size: 12px; line-height: 16px; }
  .m-ready .perf-table__row--head + .perf-table__row { min-height: 56px; padding-top: 16px; }
  .m-ready .signal-cta .final-cta__inner { padding: 72px 0 100px !important; }
  .m-ready .signal-cta .final-cta__btns--prices { flex-direction: column; align-items: center; }
  .m-ready .signal-cta .final-cta__btns--prices .btn { width: 280px; max-width: 100%; }
}

/* ---------- subscription (mobile) ---------- */
/* >>> MOBILE (<=767px) — scoped to body.m-ready.
   Designed on the 430px Figma frames, checked at 375px. */
@media (max-width: 767px) {
  /* auto: scaled from the desktop rules above */
  .m-ready .checkout { height: auto; }
  .m-ready .checkout__grid { grid-template-columns: minmax(0, 1fr); padding: 20px 0 0; column-gap: 0; }
  .m-ready .checkout__note { white-space: normal; }
  .m-ready .checkout-form { width: auto; max-width: 100%; }
  .m-ready .pay-methods__grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .m-ready .price-row { white-space: normal; flex-wrap: wrap; }
  .m-ready .price-row__now { white-space: normal; }
  .m-ready .checkout-form__submit { width: auto; max-width: 100%; }
  .m-ready .checkout-form__info { height: auto; }
  .m-ready .perks { height: auto; }
  .m-ready .perks__title { white-space: normal; }
  .m-ready .perks__list li { white-space: normal; }
  .m-ready .sub-steps { height: auto; }
  .m-ready .sub-steps__grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .m-ready .sub-step { height: auto; }
  .m-ready .sub-step__text, .m-ready .sub-step__text--wide { width: auto; max-width: 100%; }
  /* hand-tuned to the Figma mobile frames */
  .m-ready .checkout { height: auto; margin-top: 12px; padding-bottom: 48px; }
  .m-ready .checkout__grid { display: flex; flex-direction: column; gap: 28px; padding: 16px 0 0; }
  .m-ready .checkout__main { width: 100%; }
  .m-ready .checkout__main .crumbs { padding: 12px 0 0; }
  .m-ready .checkout__title { margin-top: 36px; font-size: 28px; line-height: 36px; }
  .m-ready .checkout__sub { margin-top: 6px; font-size: 14px; line-height: 24px; }
  .m-ready .checkout .plan-tabs { display: flex; width: 100%; max-width: 320px; height: 48px; margin-top: 18px; padding: 6px 8px; gap: 8px; }
  .m-ready .checkout .plan-tabs__tab { flex: 1; width: auto; font-size: 13px; line-height: 20px; }
  .m-ready .checkout .plan-tabs__tab.is-active { width: auto; font-size: 13px; }
  .m-ready .price-row { gap: 6px 10px; margin-top: 24px; }
  .m-ready .price-row__label, .m-ready .price-row__old { font-size: 14px; }
  .m-ready .price-row__now { margin-right: 0; font-size: 22px; line-height: 30px; }
  .m-ready .checkout__once { font-size: 14px; line-height: 20px; }
  .m-ready .checkout__refund { margin-top: 18px; font-size: 13px; }
  .m-ready .checkout__note { margin-top: 8px; white-space: normal; font-size: 13px; line-height: 24px; }
  .m-ready .checkout-form { width: 100%; margin: 28px 0 0; }
  .m-ready .checkout-form__label { font-size: 16px; line-height: 20px; }
  .m-ready .pay-methods__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 18px; }
  .m-ready .pay-option { height: auto; min-height: 92px; padding: 12px 14px 14px; }
  .m-ready .checkout-form__info { height: auto; margin-top: 18px; padding: 14px 16px; font-size: 13px; line-height: 24px; }
  .m-ready .checkout-form__divider { margin-top: 32px; font-size: 16px; }
  .m-ready .total-row { margin-top: 24px; font-size: 14px; }
  .m-ready .total-row strong { font-size: 15px; white-space: normal; text-align: left; }
  .m-ready .agree { margin-top: 22px; font-size: 13px; line-height: 20px; }
  .m-ready .checkout-form__submit { width: 100%; height: 52px; margin-top: 28px; font-size: 15px; line-height: 20px; white-space: normal; padding: 0 12px; }
  .m-ready .checkout-form__foot { margin-top: 16px; font-size: 12px; line-height: 20px; }
  .m-ready .perks { width: 100%; height: auto; margin-top: 0; padding: 22px 18px 26px; border-radius: 18px; }
  .m-ready .perks__title { font-size: 18px; line-height: 26px; white-space: normal; }
  .m-ready .perks__list { gap: 14px; margin-top: 28px; padding-right: 0; }
  .m-ready .perks__list li { gap: 12px; font-size: 14px; line-height: 22px; white-space: normal; }
  .m-ready .sub-steps { height: auto; padding: 48px 0 40px; }
  .m-ready .sub-steps__title { font-size: 20px; line-height: 28px; }
  .m-ready .sub-steps__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 36px; }
  .m-ready .sub-step { height: auto; min-height: 200px; padding: 24px 16px 28px; }
  .m-ready .sub-step__title { font-size: 16px; line-height: 28px; }
  .m-ready .sub-step__text, .m-ready .sub-step__text--wide { width: auto; max-width: 260px; margin-top: 8px; }
  .m-ready #faq .faq__inner { padding: 36px 0 60px; }
  .m-ready .ask { margin-top: 60px; padding-bottom: 40px; }
  .m-ready .ask__title { font-size: 20px; line-height: 26px; }
  .m-ready .ask__text { margin-top: 14px; font-size: 14px; line-height: 22px; text-align: center; }
  .m-ready .ask__btn { width: 170px; margin-top: 28px; }
}

/* ---------- about (mobile, priority) ---------- */
/* >>> MOBILE (<=767px) — mobile layout for index, about, rules, contact, blog.
   Scoped to body.m-ready (set on those 5 pages only). First part: generated overrides scaled from the desktop rules; second part: hand-tuned rules.
   Designed on the 430px Figma frames, checked at 375px. */
@media (max-width: 767px) {
  /* auto: scaled from the desktop rules above */
  .m-ready .about-hero { height: auto; }
  .m-ready .about-hero__inner { padding-top: 29px; }
  .m-ready .about-hero__title { font-size: 32px; line-height: 48px; }
  .m-ready .about-hero__text { left: 0; width: auto; max-width: 100%; font-size: 18px; line-height: 30px; }
  .m-ready .about-hero__btns { margin-top: 23px; }
  .m-ready .about-stats { height: auto; padding-top: 22px; }
  .m-ready .about-stats__grid { left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-ready .about-stat { white-space: normal; }
  .m-ready .about-stat strong { font-size: 24px; line-height: 31px; }
  .m-ready .about-story { padding: 41px 0 54px 0; }
  .m-ready .story-list { margin-top: 32px; }
  .m-ready .story-card { width: auto; max-width: 100%; height: auto; }
  .m-ready .story-card__title { font-size: 16px; line-height: 29px; }
  .m-ready .about-company { height: auto; padding-top: 26px; }
  .m-ready .company-card { width: auto; max-width: 100%; height: auto; }
  .m-ready .company-card__title { font-size: 20px; line-height: 28px; }
  .m-ready .company-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .m-ready .company-grid dd { white-space: normal; }
  .m-ready .about-why { padding: 36px 0 40px 0; }
  .m-ready .why-us-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); margin-top: 26px; }
  .m-ready .why-us-card { height: auto; }
  .m-ready .why-us-card__title { font-size: 16px; line-height: 29px; white-space: normal; }
  .m-ready .why-us-card__text { white-space: normal; }
  .m-ready .about-values { height: auto; padding-top: 33px; }
  .m-ready .values-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); margin-top: 27px; }
  .m-ready .value-card { height: auto; }
  .m-ready .value-card__title { font-size: 16px; line-height: 29px; }
  .m-ready .about-cta .final-cta__inner { padding: 47px 0 54px 0; }
  /* hand-tuned to the Figma mobile frames */
  .m-ready .about-hero { height: auto; padding-bottom: 58px; }
  .m-ready .about-hero__inner { padding-top: 20px; }
  .m-ready .about-hero__emblem { width: 100px; height: 100px; }
  .m-ready .about-hero__title { margin-top: 0; font-size: 28px; line-height: 38px; }
  .m-ready .about-hero__text { left: 0; width: auto; margin-top: 18px; font-size: 14px; line-height: 33px; }
  .m-ready .about-hero__btns { gap: 15px; margin-top: 38px; }
  .m-ready .about-hero__btns .btn { width: auto; padding: 0 16px; font-size: 14px; }
  .m-ready .about-stats { height: auto; padding: 37px 0 20px; }
  .m-ready .about-stats__grid { left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .m-ready .about-stat .icon-box { width: 48px; height: 48px; }
  .m-ready .about-stat strong { margin-top: 14px; font-size: 18px; line-height: 23px; }
  .m-ready .about-stat__label { margin-top: 9px; font-size: 14px; line-height: 18px; }
  .m-ready .about-stat__sub { margin-top: 17px; font-size: 12px; line-height: 16px; white-space: normal; }
  .m-ready .about-story { padding: 46px 0 60px; }
  .m-ready .about-story .section-title, .m-ready .about-why .section-title, .m-ready .about-values .section-title { font-size: 20px; line-height: 26px; }
  .m-ready .about-story .sec-head__sub, .m-ready .about-values .sec-head__sub { margin-top: 6px; font-size: 14px; line-height: 33px; }
  .m-ready .story-list { gap: 20px; margin-top: 26px; }
  .m-ready .story-card { flex-direction: row; gap: 13px; width: 100%; height: auto; min-height: 300px; padding: 12px 12px 22px 36px; }
  .m-ready .story-card .icon-box { width: 38px; height: 38px; margin-top: 0; }
  .m-ready .story-card .icon-box img { width: 20px; height: 20px; }
  .m-ready .story-card__body { width: auto; flex: 1; }
  .m-ready .story-card__title { margin-top: -3px; font-size: 16px; line-height: 33px; }
  .m-ready .story-card__text { margin-top: 7px; font-size: 12px; line-height: 26px; }
  .m-ready .about-company { height: auto; padding: 23px 0 25px; }
  .m-ready .company-card { width: 100%; height: auto; padding: 41px 20px 30px; text-align: center; }
  .m-ready .company-card__title { font-size: 20px; line-height: 33px; }
  .m-ready .company-grid { grid-template-columns: minmax(0, 1fr); row-gap: 25px; margin-top: 27px; }
  .m-ready .company-grid dt { font-size: 14px; line-height: 33px; }
  .m-ready .company-grid dd, .m-ready .company-grid dd.company-grid__multi { margin: -3px 0 0; font-size: 14px; line-height: 30px; white-space: normal; }
  .m-ready .company-grid__last { margin-top: 0; padding-top: 19px; }
  .m-ready .about-why { padding: 49px 0 80px; }
  .m-ready .about-why .sec-head__sub { max-width: 360px; margin-top: 11px; font-size: 14px; line-height: 28px; }
  .m-ready .why-us-grid { grid-template-columns: minmax(0, 340px); gap: 17px; margin-top: 31px; }
  .m-ready .why-us-card { gap: 12px; height: auto; min-height: 130px; padding: 19px 20px 16px 20px; }
  .m-ready .why-us-card .icon-box { width: 40px; height: 40px; }
  .m-ready .why-us-card__title { margin-top: 0; font-size: 16px; line-height: 33px; white-space: normal; }
  .m-ready .why-us-card__text, .m-ready .why-us-card__text--wrap { width: auto; margin-top: 4px; font-size: 13px; line-height: 23px; white-space: normal; }
  .m-ready .about-values { height: auto; padding: 44px 0 80px; }
  .m-ready .values-grid { grid-template-columns: 252px; gap: 20px; margin-top: 40px; }
  .m-ready .value-card { height: 260px; padding-top: 27px; }
  .m-ready .value-card__title { margin-top: 22px; font-size: 18px; }
  .m-ready .value-card__text { margin-top: 13px; }
  .m-ready .about-cta .final-cta__inner { padding: 74px 0 120px !important; }
  .m-ready .about-hero__title br { display: none; }
  .m-ready .about-hero__title > span:first-child { display: block; }
  .m-ready .value-card { height: auto; min-height: 260px; padding-bottom: 24px; }
}

/* ---------- rules (mobile, priority) ---------- */
/* >>> MOBILE (<=767px) — mobile layout for index, about, rules, contact, blog.
   Scoped to body.m-ready (set on those 5 pages only). First part: generated overrides scaled from the desktop rules; second part: hand-tuned rules.
   Designed on the 430px Figma frames, checked at 375px. */
@media (max-width: 767px) {
  /* auto: scaled from the desktop rules above */
  .m-ready .rules-intro__lead { white-space: normal; }
  .m-ready .rules { padding: 45px 0 38px 0; }
  .m-ready .rule-card { width: auto; max-width: 100%; }
  .m-ready .rule-card__num { font-size: 20px; line-height: 28px; }
  .m-ready .rule-card__title { font-size: 16px; line-height: 29px; white-space: normal; }
  .m-ready .rules-cta { height: auto; }
  .m-ready .rules-cta .final-cta__inner { padding: 32px 0 0 0; }
  /* hand-tuned to the Figma mobile frames */
  .m-ready .rules-intro { margin-top: 12px; padding-bottom: 55px; }
  .m-ready .rules-intro .crumbs { padding-top: 35px; }
  .m-ready .rules-intro .section-title { margin-top: 58px; font-size: 32px; line-height: 41px; }
  .m-ready .rules-intro__lead { margin-top: 15px; font-size: 14px; line-height: 33px; }
  .m-ready .rules-intro__date { margin-top: 20px; font-size: 12px; line-height: 15px; }
  .m-ready .rules { padding: 58px 0 80px; }
  .m-ready .rule-card, .m-ready .rule-card--intro { width: 100%; min-height: 300px; margin-top: 20px; padding: 9px 12px 22px 24px !important; }
  .m-ready .rule-card:first-child { margin-top: 0; }
  .m-ready .rule-card__head, .m-ready .rule-card--intro .rule-card__head { align-items: flex-start; gap: 13px; }
  .m-ready .rule-card__num { flex: none; width: 38px; height: 38px; margin-top: 3px; font-size: 20px; line-height: 25px; }
  .m-ready .rule-card__title, .m-ready .rule-card--intro .rule-card__title { margin-top: 0; font-size: 16px; line-height: 33px; white-space: normal; }
  .m-ready .rule-card__body, .m-ready .rule-card--intro .rule-card__body { width: auto; margin: 0 51px 0 0; font-size: 12px; line-height: 26px; }
  .m-ready .rule-gap { margin-bottom: 14px; }
  .m-ready .rule-list li::before { top: 10px; }
  .m-ready .rules-cta { height: auto; }
  .m-ready .rules-cta .final-cta__inner { padding: 108px 0 120px !important; }
}

/* ---------- contact (mobile, priority) ---------- */
/* >>> MOBILE (<=767px) — mobile layout for index, about, rules, contact, blog.
   Scoped to body.m-ready (set on those 5 pages only). First part: generated overrides scaled from the desktop rules; second part: hand-tuned rules.
   Designed on the 430px Figma frames, checked at 375px. */
@media (max-width: 767px) {
  /* auto: scaled from the desktop rules above */
  .m-ready .contact-intro .section-title { margin-top: 21px; }
  .m-ready .contact-intro__lead { white-space: normal; }
  .m-ready .contact-support { padding: 50px 0 54px 0; }
  .m-ready .contact-support__lead { font-size: 16px; line-height: 30px; white-space: normal; }
  .m-ready .channel-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); margin-top: 24px; }
  .m-ready .channel-card { height: auto; padding: 26px 0 23px 0; }
  .m-ready .channel-card__title { font-size: 16px; line-height: 29px; white-space: normal; }
  .m-ready .hours-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); margin-top: 20px; }
  .m-ready .hours-card { height: auto; padding: 0 26px 0 26px; }
  .m-ready .hours-card__title { font-size: 16px; line-height: 20px; white-space: normal; }
  .m-ready .hours-card__text { white-space: normal; }
  .m-ready .contact-faq { height: auto; padding-top: 36px; }
  .m-ready .contact-faq__title { font-size: 20px; line-height: 26px; }
  .m-ready .contact-faq__text { font-size: 16px; line-height: 20px; }
  .m-ready .contact-faq { margin-bottom: 61px; }
  /* hand-tuned to the Figma mobile frames */
  .m-ready .contact-intro { margin-top: 12px; padding-bottom: 50px; }
  .m-ready .contact-intro .crumbs { padding-top: 35px; }
  .m-ready .contact-intro .section-title { margin-top: 66px; font-size: 30px; line-height: 38px; }
  .m-ready .contact-intro__lead { margin-top: 17px; font-size: 14px; line-height: 33px; }
  .m-ready .contact-support { padding: 67px 0 60px; }
  .m-ready .contact-support .section-title { font-size: 32px; line-height: 41px; }
  .m-ready .contact-support__lead { margin-top: 22px; white-space: normal; font-size: 14px; line-height: 34px; }
  .m-ready .channel-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 41px; }
  .m-ready .channel-card { height: 280px; padding: 27px 0 23px; }
  .m-ready .channel-card__title { margin-top: 22px; }
  .m-ready .channel-card__text { margin-top: 16px; }
  .m-ready .hours-grid { grid-template-columns: minmax(0, 1fr); gap: 17px; margin-top: 22px; }
  .m-ready .hours-card { gap: 14px; height: 100px; padding: 0 17px; }
  .m-ready .hours-card .icon-box { flex: none; width: 38px; height: 38px; }
  .m-ready .hours-card .icon-box img { width: 20px; height: 20px; }
  .m-ready .hours-card__title { font-size: 16px; line-height: 20px; }
  .m-ready .hours-card__text { margin-top: 12px; white-space: normal; font-size: 13px; line-height: 18px; }
  .m-ready .contact-faq { height: auto; margin-bottom: 120px; padding: 73px 0 60px; }
  .m-ready .contact-faq__title { font-size: 20px; line-height: 26px; }
  .m-ready .contact-faq__text { margin-top: 14px; font-size: 13px; line-height: 20px; }
  .m-ready .contact-faq__link { margin-top: 27px; font-size: 16px; }
}

/* ---------- blog (mobile, priority) ---------- */
/* >>> MOBILE (<=767px) — mobile layout for index, about, rules, contact, blog.
   Scoped to body.m-ready (set on those 5 pages only). First part: generated overrides scaled from the desktop rules; second part: hand-tuned rules.
   Designed on the 430px Figma frames, checked at 375px. */
@media (max-width: 767px) {
  /* auto: scaled from the desktop rules above */
  .m-ready .blog-intro .section-title { margin-top: 21px; }
  .m-ready .blog-intro__lead { white-space: normal; }
  .m-ready .blog { padding: 24px 0 24px 0; }
  .m-ready .blog__inner { left: 0; }
  .m-ready .blog-cats { left: 0; width: auto; max-width: 100%; }
  .m-ready .blog-cats__btn { padding: 0 7px 0 7px; }
  .m-ready .post-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); margin-top: 25px; }
  .m-ready .post-card__excerpt { width: auto; max-width: 100%; }
  .m-ready .pager { margin-top: 27px; left: 0; }
  .m-ready .pager__num { font-size: 18px; line-height: 22px; }
  /* hand-tuned to the Figma mobile frames */
  .m-ready .blog-intro { margin-top: 12px; padding-bottom: 50px; }
  .m-ready .blog-intro .crumbs { padding-top: 35px; }
  .m-ready .blog-intro .section-title { margin-top: 73px; font-size: 20px; line-height: 26px; }
  .m-ready .blog-intro__lead { margin-top: 23px; white-space: normal; font-size: 14px; line-height: 33px; }
  .m-ready .blog { padding: 30px 0 140px; }
  .m-ready .blog__inner { left: 0; }
  .m-ready .blog-cats { left: 0; width: 100%; height: 60px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
  .m-ready .blog-cats::-webkit-scrollbar { display: none; }
  .m-ready .blog-cats ul { justify-content: flex-start; gap: 4px; width: max-content; min-width: 100%; }
  .m-ready .blog-cats__btn { padding: 0 6px; font-size: 13px; line-height: 16px; }
  .m-ready .post-grid { grid-template-columns: minmax(0, 1fr); gap: 21px; width: 100%; margin-top: 46px; }
  .m-ready .post-card__media { height: 165px; }
  .m-ready .post-card__body { height: auto; padding: 21px 25px 22px; }
  .m-ready .post-card__title { margin-top: 24px; font-size: 14px; line-height: 18px; }
  .m-ready .post-card__excerpt { width: auto; max-width: 264px; margin-top: 14px; }
  .m-ready .post-card__meta { margin-top: 19px; }
  .m-ready .post-card__more { margin-top: 19px; }
  .m-ready .pager { left: 0; margin-top: 70px; }
}

/* ---------- shared + home (mobile, highest shared priority) ---------- */
/* >>> MOBILE (<=767px) — shared mobile chrome + home sections.
   Scoped to body.m-ready. First part: generated overrides scaled from the desktop rules; second part: hand-tuned rules.
   Designed on the 430px Figma frames, checked at 375px. */
@media (max-width: 767px) {
  /* auto: scaled from the desktop rules above */
  .m-ready .nowrap { white-space: normal; }
  .m-ready .pill-badge { padding: 0 12px 0 12px; }
  .m-ready .section-title { font-size: 24px; line-height: 31px; }
  .m-ready .section-sub { font-size: 16px; line-height: 29px; }
  .m-ready .num-circle { font-size: 16px; line-height: 20px; }
  .m-ready .brand__name { font-size: 18px; line-height: 23px; }
  .m-ready .lang__menu a { padding: 6px 10px 6px 10px; }
  .m-ready .site-header__inner { padding: 0 0 0 0; }
  .m-ready .main-nav { margin-right: 0; }
  .m-ready .main-nav a.is-active { padding: 0 20.5px 0 20.5px; }
  .m-ready .hero { height: auto; }
  .m-ready .hero__inner { padding-top: 36px; }
  .m-ready .hero__title { font-size: 32px; line-height: 41px; }
  .m-ready .hero__sub { font-size: 20px; line-height: 25px; }
  .m-ready .hero-steps { margin-top: 26px; }
  .m-ready .hero__ctas { margin-top: 19px; }
  .m-ready .about { height: auto; }
  .m-ready .about__inner { padding-top: 19px; }
  .m-ready .about__title { font-size: 20px; line-height: 25px; }
  .m-ready .about__text { width: auto; max-width: 100%; font-size: 16px; line-height: 29px; }
  .m-ready .vip-reviews__inner { padding: 40px 0 37px 0; }
  .m-ready .vip-reviews__title { font-size: 20px; line-height: 25px; }
  .m-ready .vip-reviews__sub { font-size: 16px; line-height: 29px; }
  .m-ready .slider { margin-top: 21px; }
  .m-ready .slide { padding: 24px 0 0 0; }
  .m-ready .slide__name { font-size: 16px; line-height: 20px; }
  .m-ready .vip-reviews__all { margin-top: 49px; }
  .m-ready .what__inner { padding-top: 20px; }
  .m-ready .what__text { width: auto; max-width: 100%; }
  .m-ready .what__subtitle { margin-top: 27px; font-size: 20px; line-height: 28px; }
  .m-ready .feature-grid { left: 0; width: auto; max-width: 100%; margin-top: 23px; }
  .m-ready .feature-card { width: auto; max-width: 100%; height: auto; padding: 16px 16px 16px 16px; }
  .m-ready .feature-card__title { font-size: 16px; line-height: 29px; white-space: normal; }
  .m-ready .how__inner { gap: 30px; padding: 36px 0 20px 0; }
  .m-ready .how__content { width: auto; max-width: 100%; }
  .m-ready .how__title { font-size: 24px; line-height: 36px; }
  .m-ready .how__text { white-space: normal; }
  .m-ready .how-steps__title { font-size: 16px; line-height: 20px; }
  .m-ready .how__cta { margin-top: 27px; }
  .m-ready .signal-card { width: auto; max-width: 100%; }
  .m-ready .signal-card__heading h3 { font-size: 16px; line-height: 20px; }
  .m-ready .signal-box { height: auto; padding: 19px 25px 0 25px; }
  .m-ready .signal-box__grid { grid-template-columns: minmax(0, 1fr) 1fr; }
  .m-ready .why__inner { padding-top: 19px; }
  .m-ready .why-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); margin-top: 26px; }
  .m-ready .why-card { height: auto; }
  .m-ready .why-card__title { font-size: 16px; line-height: 29px; }
  .m-ready .why-card__text { white-space: normal; }
  .m-ready .pricing__inner { padding: 58px 0 37px 0; }
  .m-ready .pricing__sub { white-space: normal; }
  .m-ready .plans { left: 0; margin-top: 28px; }
  .m-ready .plan { width: auto; max-width: 100%; height: auto; }
  .m-ready .plan__ribbon { margin: -1px -1px 0 -1px; }
  .m-ready .plan__head { height: auto; margin: 0 -1px 0 -1px; }
  .m-ready .plan__name { font-size: 18px; line-height: 22px; }
  .m-ready .plan__price { font-size: 20px; line-height: 26px; }
  .m-ready .plan__btn { width: auto; max-width: 100%; }
  .m-ready .plan__refund { width: auto; max-width: 100%; }
  .m-ready .reviews { left: 0; height: auto; }
  .m-ready .reviews__inner { left: 0; padding-top: 22px; }
  .m-ready .review-grid { margin-top: 29px; }
  .m-ready .review-card { width: auto; max-width: 100%; height: auto; }
  .m-ready .success__inner { padding: 35px 0 43px 0; }
  .m-ready .shots { margin-top: 33px; }
  .m-ready .shots__dot { margin: -21px -25px -29px -25px; }
  .m-ready .shots__foot { margin-top: 18px; }
  .m-ready .shots-pill { margin-top: 24px; }
  .m-ready .stats { left: 0; grid-template-columns: repeat(1, minmax(0, 1fr)); margin-top: 34px; }
  .m-ready .stat strong { font-size: 30px; line-height: 38px; }
  .m-ready .stat span { font-size: 20px; line-height: 25px; }
  .m-ready .success__ctas { left: 0; margin-top: 35px; }
  .m-ready .faq__inner { padding: 38px 0 24px 0; }
  .m-ready .accordion { width: auto; max-width: 100%; margin-top: 23px; }
  .m-ready .faq-item__q { padding: 10.5px 0 10.5px 0; }
  .m-ready .faq-item.is-open .faq-item__q { padding: 19px 0 11px 0; }
  .m-ready .faq-item__a p { width: auto; max-width: 100%; }
  .m-ready .contact__text { margin-top: 28px; font-size: 16px; line-height: 29px; }
  .m-ready .final-cta__inner { padding: 50px 0 57px 0; }
  .m-ready .final-cta__btns { margin-top: 23px; }
  .m-ready .site-footer { height: auto; }
  .m-ready .site-footer__inner { left: 0; width: auto; max-width: 100%; }
  .m-ready .footer-top { gap: 58px; }
  .m-ready .footer-brand { width: auto; max-width: 100%; }
  .m-ready .footer-col:last-child { padding-right: 0; }
  .m-ready .footer-col__title { font-size: 16px; line-height: 20px; white-space: normal; }
  .m-ready .footer-col a { white-space: normal; }
  .m-ready .footer-about__title { font-size: 20px; line-height: 25px; }
  .m-ready .footer-about p { width: auto; max-width: 100%; }
  .m-ready .why-grid { left: 0; }
  .m-ready .site-header--sub .site-header__inner { padding: 0 0 0 0; }
  .m-ready .site-footer--sub { height: auto; }
  .m-ready .sec-head__sub { font-size: 16px; line-height: 29px; }
  .m-ready .pre-line { white-space: normal; }
  .m-ready .page-intro { height: auto; }
  .m-ready .page-intro .crumbs { padding: 20px 0 0 0; }
  .m-ready .page-intro__lead { font-size: 16px; line-height: 29px; }
  .m-ready .link-arrow { white-space: normal; }
  .m-ready .final-cta__btns--prices { margin-top: 23px; }
  .m-ready .final-cta__btns--prices .btn--lifetime { padding: 0 16px 0 16px; }
  /* hand-tuned to the Figma mobile frames */
  body.m-ready {
    width: 100%;
    min-width: 0;
  }
  .m-ready .page { width: 100%; margin: 0; }
  .m-ready .container { padding-left: 15px !important; padding-right: 15px !important; }
  .m-ready .br-d { display: none; }
  .m-ready .btn--lg { max-width: 100%; }
  .m-ready .deco { display: none; }
  .m-ready .crumbs { flex-wrap: wrap; row-gap: 6px; white-space: normal; padding-left: 15px !important; padding-right: 15px !important; }
  .m-ready .site-header, .m-ready .site-header--sub { height: 74px; padding: 12px 0 0; }
  .m-ready .site-header__inner, .m-ready .site-header--sub .site-header__inner { height: 50px; padding: 0 15px; }
  .m-ready .site-header .brand__emblem { width: 50px; height: 50px; }
  .m-ready .site-header .brand__name { margin-right: -6px; font-size: 13px; line-height: 17px; }
  .m-ready .main-nav { display: none; }
  .m-ready .header-actions { gap: 5px; }
  .m-ready .header-actions .lang__btn { flex-direction: column; justify-content: center; gap: 0; width: 36px; padding: 0; }
  .m-ready .header-actions .lang__btn img:first-child { display: none; }
  .m-ready .header-actions .lang__btn span { font-size: 0; line-height: 15px; }
  .m-ready .header-actions .lang__btn span::after { content: "فا"; font-size: 12px; }
  .m-ready .header-actions .lang__caret { margin: 0; width: 12px; height: 12px; }
  .m-ready .header-actions .lang__menu { right: auto; left: 0; min-width: 110px; }
  .m-ready .btn--panel { width: 36px; padding: 0; justify-content: center; }
  .m-ready .btn--panel span { display: none; }
  .m-ready .nav-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-bg); }
  .m-ready .drawer { position: fixed; inset: 0; z-index: 100; display: block; visibility: hidden; pointer-events: none; transition: visibility 0s .3s; }
  .m-ready .drawer.is-open { visibility: visible; pointer-events: auto; transition: none; }
  .m-ready .drawer__backdrop { position: absolute; inset: 0; background: rgba(2, 7, 16, 0.6); opacity: 0; transition: opacity .25s; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .m-ready .drawer.is-open .drawer__backdrop { opacity: 1; }
  .m-ready .drawer__panel { position: absolute; top: 0; right: 0; width: 270px; max-height: 100%; padding: 13px 29px 32px 30px; overflow-y: auto; border: 1px solid var(--c-border); border-top: 0; border-right: 0; border-radius: 0 0 0 16px; background: var(--c-bg-2); transform: translateX(100%); transition: transform .3s ease; }
  .m-ready .drawer.is-open .drawer__panel { transform: none; }
  .m-ready .drawer__head { display: flex; align-items: center; justify-content: space-between; height: 60px; margin-right: -11px; }
  .m-ready .drawer__brand .brand__emblem { width: 60px; height: 60px; }
  .m-ready .drawer__brand .brand__name { margin-right: -4px; font-size: 20px; line-height: 26px; }
  .m-ready .drawer__close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: -6px; border-radius: 6px; }
  .m-ready .drawer__user { display: flex; align-items: center; gap: 8px; margin-top: 11px; padding: 15px 0 15px; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); color: var(--c-slate-400); font-size: 14px; line-height: 18px; }
  .m-ready .drawer__avatar { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--grad-gold-rev); }
  .m-ready .drawer__nav ul { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 25px; }
  .m-ready .drawer__nav a { display: flex; align-items: center; height: 36px; color: var(--c-slate-400); font-size: 16px; line-height: 20px; transition: color .2s; }
  .m-ready .drawer__nav a:hover { color: var(--c-white); }
  .m-ready .drawer__nav a.is-active { margin-right: 0; padding: 0 21px; border-radius: 8px; background: var(--c-gold-10); color: var(--c-gold); }
  .m-ready .drawer__nav a:not(.is-active) { padding: 0; }
  body.m-ready.drawer-open { overflow: hidden; }
  .m-ready .section-title { font-size: 20px; line-height: 26px; }
  .m-ready .section-sub, .m-ready .sec-head__sub { font-size: 14px; line-height: 26px; }
  .m-ready .site-footer, .m-ready .site-footer--sub { height: auto !important; padding: 11px 0 28px; }
  .m-ready .site-footer__inner { left: 0; width: auto; }
  .m-ready .footer-top { flex-direction: column; align-items: center; gap: 48px; padding-top: 0; }
  .m-ready .footer-brand { align-items: center; width: auto; text-align: center; }
  .m-ready .brand--footer .brand__emblem { width: 70px; height: 70px; }
  .m-ready .footer-brand__text { white-space: normal; margin-top: 4px; font-size: 15px; line-height: 32px; }
  .m-ready .footer-badges { margin-top: 18px; }
  .m-ready .footer-cols { flex-wrap: wrap; width: 100%; row-gap: 48px; padding: 0 36px 0 0; }
  .m-ready .footer-col, .m-ready .footer-col + .footer-col, .m-ready .footer-col:last-child { width: 50%; padding-right: 0; }
  .m-ready .footer-col + .footer-col { padding-right: 40px; }
  .m-ready .footer-col:last-child { padding-right: 0; }
  .m-ready .footer-col:last-child::before { display: none; }
  .m-ready .footer-col ul { gap: 14px; margin-top: 21px; }
  .m-ready .footer-about { margin-top: 48px; padding-top: 50px; }
  .m-ready .footer-about__title { font-size: 20px; line-height: 25px; }
  .m-ready .footer-about p { width: auto; font-size: 14px; line-height: 32px; }
  .m-ready .footer-about .footer-about__title + p { margin-top: 18px; }
  .m-ready .footer-bottom { flex-direction: column; gap: 32px; margin-top: 24px; padding-top: 21px; text-align: center; }
  .m-ready .footer-bottom__copy { font-size: 12px; line-height: 28px; }
  .m-ready .final-cta { height: auto !important; }
  .m-ready .final-cta__inner { padding: 104px 0 108px !important; }
  .m-ready .final-cta__text { margin-top: 24px; font-size: 14px; line-height: 18px; }
  .m-ready .final-cta__text--2 { margin-top: 13px; }
  .m-ready .final-cta__ticks { justify-content: center; flex-wrap: wrap; gap: 21px 32px; max-width: 360px; margin-top: 30px; padding-left: 0 !important; }
  .m-ready .final-cta__btns { gap: 16px; margin-top: 54px; }
  .m-ready .final-cta__btns--prices .btn { width: auto; }
  .m-ready .final-cta__btns--prices .btn--monthly { width: 145px; }
  .m-ready .final-cta__btns--prices .btn--lifetime { width: 165px; }
  .m-ready .page-intro { height: auto; padding-bottom: 48px; }
  .m-ready .page-intro .crumbs { padding-top: 28px; }
  .m-ready .page-intro__lead { white-space: normal; font-size: 14px; line-height: 28px; }
  .m-ready .hero { height: auto; padding-bottom: 62px; }
  .m-ready .hero__bg { top: 63px; width: 100%; height: 583px; opacity: .2; }
  .m-ready .hero__inner { padding-top: 112px; text-align: center; }
  .m-ready .hero__title { font-size: 32px; line-height: 38px; }
  .m-ready .hero__sub { margin-top: 17px; font-size: 16px; line-height: 33px; }
  .m-ready .hero__sub--white { margin-top: 5px; line-height: 20px; }
  .m-ready .hero-steps { flex-direction: column; align-items: center; gap: 8px; margin-top: 35px; padding-right: 0; }
  .m-ready .hero-step { display: grid; grid-template-columns: 40px auto; justify-content: start; column-gap: 11px; width: max-content; max-width: 100%; white-space: nowrap; }
  .m-ready .hero-step img { grid-column: 1 / -1; justify-self: center; margin: 2px 0 -2px; transform: rotate(-90deg); }
  .m-ready .hero-step:last-child img { display: none; }
  .m-ready .hero__ctas { flex-direction: column; align-items: center; gap: 12px; width: 100%; margin-top: 70px; }
  .m-ready .hero__ctas .btn, .m-ready .hero__free { width: 320px; max-width: 100%; justify-content: space-between; padding: 0 16px 0 13px; }
  .m-ready .hero__ctas .btn span, .m-ready .hero__free span { flex: 1; text-align: center; font-size: 14px; }
  .m-ready .hero__free { margin-top: 15px; white-space: nowrap; }
  .m-ready .hero__ticks { flex-wrap: wrap; justify-content: center; gap: 25px 24px; max-width: 400px; margin-top: 41px; padding-left: 0; }
  .m-ready .ticks li, .m-ready .ticks span { font-size: 14px; }
  .m-ready .about { height: auto; }
  .m-ready .about__inner { padding: 47px 0 38px; }
  .m-ready .about__title { font-size: 20px; line-height: 25px; }
  .m-ready .about__text { width: auto; margin-top: 22px; font-size: 14px; line-height: 33px; }
  .m-ready .about__note { margin-top: 30px; font-size: 14px; }
  .m-ready .vip-reviews__inner { padding: 37px 0 44px; }
  .m-ready .vip-reviews__title { font-size: 20px; line-height: 25px; }
  .m-ready .vip-reviews__sub { margin-top: 0; font-size: 14px; line-height: 33px; }
  .m-ready .slider { width: 100%; height: auto; margin-top: 27px; padding-bottom: 67px; }
  .m-ready .slider__viewport { width: 100%; height: 260px; margin: 0; }
  .m-ready .slide { flex: 0 0 100%; height: 260px; padding: 31px 24px 0 32px; }
  .m-ready .slide__quote { margin: 26px 0 0; font-size: 14px; line-height: 26px; }
  .m-ready .slide__name { margin-top: 30px; font-size: 12px; line-height: 15px; }
  .m-ready .slide__role { margin-top: 5px; font-size: 11px; line-height: 14px; }
  .m-ready .slider__arrow { top: auto; bottom: 0; width: 38px; height: 38px; }
  .m-ready .slider__arrow img { width: 14px; height: 14px; }
  .m-ready .slider__arrow--next { left: calc(50% - 40px); }
  .m-ready .slider__arrow--prev { right: calc(50% - 41px); }
  .m-ready .vip-reviews__all { margin-top: 25px; font-size: 16px; }
  .m-ready .what__inner { padding-top: 34px; }
  .m-ready .what .section-title { margin-top: 17px; }
  .m-ready .what__text { width: auto; margin-top: 24px; font-size: 14px; line-height: 33px; }
  .m-ready .what__subtitle { margin-top: 60px; font-size: 20px; line-height: 33px; }
  .m-ready .feature-grid { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 20px; left: 0; width: 100%; margin-top: 33px; }
  .m-ready .feature-card { width: 320px; max-width: 100%; height: 140px; }
  .m-ready .feature-card__title { font-size: 16px; }
  .m-ready .feature-card__text, .m-ready .feature-card__text.nowrap { white-space: normal; margin-top: 4px; font-size: 14px; line-height: 28px; }
  .m-ready .how__inner { flex-direction: column; align-items: center; gap: 46px; padding: 81px 0 59px; }
  .m-ready .how__content { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .m-ready .how__title { max-width: 260px; font-size: 24px; line-height: 38px; text-align: center; }
  .m-ready .how__text { margin-top: 16px; white-space: normal; font-size: 14px; line-height: 28px; text-align: center; }
  .m-ready .how-steps { align-self: stretch; gap: 19px; margin-top: 40px; padding-right: 10px; }
  .m-ready .how-steps li { gap: 13px; }
  .m-ready .how-steps__title { font-size: 16px; line-height: 20px; }
  .m-ready .how-steps__text { margin-top: 10px; font-size: 12px; line-height: 15px; }
  .m-ready .how__cta { margin-top: 38px; }
  .m-ready .how__cta .btn { width: 330px; font-size: 14px; }
  .m-ready .signal-card { width: 100%; margin-top: 0; }
  .m-ready .signal-card__head { gap: 4px; height: 96px; padding: 0 9px 0 18px; }
  .m-ready .signal-card__heading h3 { font-size: 16px; line-height: 20px; }
  .m-ready .signal-card__heading p { font-size: 13px; }
  .m-ready .signal-card__body { padding: 31px 14px 0; }
  .m-ready .signal-box { height: auto; padding: 19px 14px 22px; }
  .m-ready .signal-box__title { font-size: 14px; line-height: 18px; }
  .m-ready .signal-box__grid { grid-template-columns: 1fr 1fr; column-gap: 8px; row-gap: 25px; margin-top: 26px; }
  .m-ready .signal-box__grid > div { gap: 4px; }
  .m-ready .signal-box__grid dt { font-size: 12px; line-height: 15px; }
  .m-ready .signal-box__grid dd { font-size: 12px; line-height: 15px; }
  .m-ready .signal-card__note { margin-top: 22px; font-size: 12px; }
  .m-ready .signal-card__foot { height: 55px; margin-top: 24px; font-size: 14px; }
  .m-ready .why__inner { padding: 34px 0 80px; }
  .m-ready .why .section-title { margin-top: 28px; }
  .m-ready .why__inner > p, .m-ready .why .section-sub { font-size: 14px; line-height: 28px; }
  .m-ready .why-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; left: 0; width: 100%; margin-top: 42px; }
  .m-ready .why-card { gap: 20px; height: 160px; padding: 14px 15px 0 20px; }
  .m-ready .why-card__title { margin-top: -3px; font-size: 16px; }
  .m-ready .why-card__text { white-space: normal; font-size: 13px; line-height: 26px; }
  .m-ready .pricing__inner { padding: 44px 0 76px; }
  .m-ready .pricing__sub { max-width: 290px; white-space: normal; font-size: 14px; line-height: 23px; }
  /* Home pricing tabs only — subscription page has its own .plan-tabs in checkout */
  .m-ready .pricing .plan-tabs { display: flex; gap: 0; margin-top: 56px; padding: 0; border-radius: 100px; background: rgba(255, 255, 255, 0.05); }
  .m-ready .pricing .plan-tabs__btn { height: 48px; padding: 0 33px; border-radius: 100px; color: var(--c-white); font-size: 16px; font-weight: 600; line-height: 20px; }
  .m-ready .pricing .plan-tabs__btn.is-active { padding: 0 22px; background: var(--c-gold-10); color: var(--c-gold); }
  .m-ready .plans { left: 0; flex-direction: column; margin-top: 57px; }
  .m-ready .plans:not([data-show="gold"]) .plan--gold, .m-ready .plans[data-show="gold"] .plan--blue { display: none; }
  .m-ready .plan { width: 365px; max-width: 100%; height: auto; padding-bottom: 28px; }
  .m-ready .plan__features li { font-size: 12px; }
  .m-ready .plan__btn { width: 303px; max-width: calc(100% - 40px); }
  .m-ready .plan__refund { width: 300px; max-width: calc(100% - 40px); }
  .m-ready .reviews { left: 0; height: auto; padding-bottom: 36px; }
  .m-ready .reviews__inner { left: 0; padding-top: 33px; padding-left: 0 !important; padding-right: 0 !important; }
  .m-ready .reviews .section-title { font-size: 20px; }
  .m-ready .review-grid { gap: 16px; width: 100%; margin-top: 33px; padding: 0 50px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .m-ready .review-grid::-webkit-scrollbar { display: none; }
  .m-ready .review-card { flex: 0 0 330px; scroll-snap-align: center; }
  .m-ready .review-dots { display: flex; justify-content: center; gap: 4px; margin-top: 21px; }
  .m-ready .review-dots span { width: 8px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); transition: width .2s, background .2s; }
  .m-ready .review-dots span.is-active { width: 15px; background: var(--c-gold); }
  .m-ready .success__inner { padding: 50px 0 59px; }
  .m-ready .success__eyebrow { font-size: 16px; }
  .m-ready .success .section-title { margin-top: 10px; font-size: 20px; }
  .m-ready .success__sub { margin-top: 14px; font-size: 13px; line-height: 17px; }
  .m-ready .shots { width: 100%; height: auto; margin-top: 33px; }
  .m-ready .shots__head { height: 63px; padding: 0 17px 0 16px; }
  .m-ready .shots__gallery { gap: 3px; padding: 22px 17px 0 17px; }
  .m-ready .shot { flex: 1 1 0; width: auto; height: 235px; }
  .m-ready .shot--crop img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
  .m-ready .shots__foot { margin-top: 40px; }
  .m-ready .shots-pill { left: 0; margin-top: 52px; padding: 0 12px 0 16px; font-size: 13px; }
  .m-ready .stats { left: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-top: 37px; }
  .m-ready .stat strong { font-size: 28px; line-height: 38px; }
  .m-ready .stat span { margin-top: 4px; font-size: 18px; line-height: 23px; }
  .m-ready .success__ctas { left: 0; flex-direction: column; align-items: center; gap: 15px; margin-top: 50px; }
  .m-ready .success__ctas .btn { width: 275px; font-size: 14px; }
  .m-ready .faq__inner { padding: 26px 0 70px; }
  .m-ready .faq .section-title { margin-top: 20px; font-size: 20px; }
  .m-ready .accordion { width: 100%; gap: 16px; margin-top: 40px; }
  .m-ready .faq-item { padding: 0 13px; }
  .m-ready .faq-item__q { gap: 12px; padding: 11.5px 0; font-size: 14px; line-height: 33px; }
  .m-ready .faq-item.is-open .faq-item__q { padding: 14px 0 5px; }
  .m-ready .faq-item__a p { width: auto; font-size: 12px; line-height: 26px; }
  .m-ready .contact__text { margin-top: 50px; font-size: 13px; line-height: 33px; }
  .m-ready .contact__btns { gap: 9px; margin-top: 23px; }
  .m-ready .contact__btns .btn { width: 180px; font-size: 14px; }
  .m-ready .how__title { max-width: 300px; }
  .m-ready .why-card { height: auto; min-height: 160px; padding-bottom: 16px; }
  .m-ready .plan__head { height: 157px; padding-top: 22px; }
  .m-ready .plan__name { font-size: 20px; line-height: 25px; }
  .m-ready .plan__price { font-size: 24px; line-height: 31px; }
  .m-ready .review-grid { gap: 50px; }
  .m-ready .review-card { height: auto; min-height: 198px; }
  .m-ready .review-card__foot { margin-top: 16px; }
  .m-ready .review-dots { direction: ltr; }
  .m-ready .final-cta__inner { padding: 57px 0 120px !important; }
  .m-ready .final-cta__btns { gap: 10px; }
  .m-ready .final-cta__btns .btn { width: auto; padding: 0 16px; font-size: 14px; }
  .m-ready .review-grid { padding: 0 max(20px, calc((100vw - 330px) / 2)); }
  .m-ready .review-card { flex: 0 0 min(330px, calc(100vw - 40px)); }
  .m-ready .final-cta__btns { flex-wrap: wrap; justify-content: center; row-gap: 12px; max-width: 100%; }
  .m-ready .contact__btns .btn { width: calc(50% - 5px); max-width: 180px; padding: 0 8px; }
  .m-ready .hero__free { white-space: normal; text-align: center; }
}