/* =====================================================================
   The Circl — Marketing Website
   Single shared stylesheet
   ---------------------------------------------------------------------
   Fonts:  New Farm (headings)  → substituted with Quicksand (Google Fonts)
                                   New Farm is a commercial DSType face and is
                                   not web-available; Quicksand is the closest
                                   rounded-humanist match. See report.
           Be Vietnam Pro (UI / buttons) — Google Fonts (exact)
           Raleway (eyebrows / small body) — Google Fonts (exact)
           Playpen Sans Arabic (Arabic) — bundled TTF (exact)
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Be+Vietnam+Pro:ital,wght@0,400;0,600;0,700;1,400&family=Raleway:wght@400;500;700&display=swap");

@font-face {
  font-family: "Playpen Sans Arabic";
  src: url("../fonts/PlaypenSansArabic.ttf") format("truetype");
  font-weight: 100 800;
  font-display: swap;
}

/* ------------------------------- Variables ------------------------------- */
:root {
  /* Brand colours */
  --purple: #6a48e5;
  --purple-deep: #5128cc;
  --purple-logo: #635aa7;
  --violet: #5e0fe0;
  --ink: #221237;
  --near-black: #1c1b1a;
  --body: #484555;
  --muted: #51575c;
  --yellow: #f5c952;
  --yellow-light: #ffd25a;
  --green: #46ce99;
  --cream: #f9f4f2;
  --card: #fdf8f6;
  --border: #cac4d7;
  --white: #ffffff;

  /* Type */
  --font-display: "Quicksand", "New Farm", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Be Vietnam Pro", system-ui, sans-serif;
  --font-alt: "Raleway", system-ui, sans-serif;
  --font-ar: "Playpen Sans Arabic", "Quicksand", sans-serif;

  /* Layout */
  --container: 1240px;
  --gutter: 100px;

  /* Radius */
  --r-pill: 9999px;
  --r-lg: 50px;
  --r-md: 25px;
  --r-sm: 16px;

  /* Effects */
  --ring: inset 0 0 0 1px var(--border);
  --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg { display: block; max-width: 100%; }

a { color: var(--purple-deep); text-decoration: none; }
a:hover { color: var(--purple); }

ul { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.96px;
  text-wrap: balance;
}

p { margin: 0; }

/* ------------------------------- Utilities ------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-alt);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--near-black);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow-light);
}

.section-title {
  font-size: 65px;
  line-height: 60px;
  letter-spacing: -0.96px;
}

.arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: currentColor;
}

/* -------------------------------- Buttons -------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 32px;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.7px;
  line-height: 20px;
  white-space: nowrap;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid rgba(106, 72, 229, 0.4); outline-offset: 2px; }

.btn--primary { background: var(--purple-deep); color: var(--white); }
.btn--primary:hover { background: #451fb0; }

.btn--purple { background: var(--purple); color: var(--white); }
.btn--purple:hover { background: var(--purple-deep); }

.btn--yellow { background: var(--yellow); color: var(--near-black); }
.btn--yellow:hover { background: var(--yellow-light); }

.btn--outline {
  background: transparent;
  color: var(--near-black);
  box-shadow: inset 0 0 0 2px var(--near-black);
}
.btn--outline:hover { background: var(--near-black); color: var(--white); }

/* ================================ HEADER ================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100px;
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 36px; width: auto; }

.nav-wrap { display: contents; }
.main-nav ul {
  display: flex;
  align-items: center;
  gap: 32px;
}
.main-nav a {
  position: relative;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  padding-bottom: 6px;
}
.main-nav a:hover { color: var(--purple); }
.main-nav a.is-active { color: var(--ink); }
.main-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--purple);
}

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-actions .btn--outline { box-shadow: inset 0 0 0 2px var(--near-black); }

.nav-checkbox { display: none; }
.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  background: transparent;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ================================= HERO ================================== */
.hero { padding: 80px 0 40px; }
.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 505px) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.badge {
  display: inline-block;
  padding: 4px 16px;
  border-radius: var(--r-pill);
  background: var(--yellow);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.96px;
  color: var(--near-black);
  white-space: nowrap;
}
.hero h1 {
  margin-top: 28px;
  font-size: 65px;
  line-height: 60px;
  color: var(--near-black);
}
.hero__lead {
  margin-top: 24px;
  max-width: 504px;
  font-size: 18px;
  line-height: 28px;
  color: var(--muted);
}
.hero__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 20px; }

.hero__media { position: relative; }
.hero__blob {
  position: relative;
  aspect-ratio: 708 / 469;
  background: var(--green);
  border-radius: 46% 54% 56% 44% / 58% 46% 54% 42%;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(34, 18, 55, 0.4);
}
.hero__blob img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

/* ================================ STATS ================================== */
.stats { padding: 40px 0 80px; }
.stats .container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 83px;
}
.stat { text-align: center; }
.stat__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 50px;
  line-height: 1;
  letter-spacing: -0.96px;
  color: var(--near-black);
}
.stat__label {
  margin-top: 8px;
  font-family: var(--font-alt);
  font-size: 16px;
  color: var(--muted);
}

/* ============================ STEPS (purple) ============================= */
.steps {
  position: relative;
  margin: 0 22px;
  padding: 86px 78px;
  background: var(--purple);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.steps__title {
  text-align: center;
  color: var(--white);
  font-size: 65px;
  line-height: 60px;
  text-transform: capitalize;
  margin-bottom: 56px;
}
.steps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.step-card {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--ring);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.step-card__num {
  width: 64px;
  height: 64px;
  border-radius: var(--r-lg);
  background: var(--yellow-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  color: var(--near-black);
}
.step-card h3 {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
  padding: 16px 0;
  color: var(--near-black);
}
.step-card p { font-size: 16px; line-height: 24px; color: var(--body); }

/* =============================== BENEFITS ================================ */
.benefits { padding: 120px 0; }
.benefits .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.benefits__intro .section-title { color: var(--ink); font-size: 56px; line-height: 60px; margin: 12px 0 24px; }
.benefits__media {
  position: relative;
  aspect-ratio: 444 / 549;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--yellow-light);
}
.benefits__media img { width: 100%; height: 100%; object-fit: cover; }

.benefit-list { display: flex; flex-direction: column; gap: 40px; margin-top: 8px; }
.benefit {
  position: relative;
  padding-left: 40px;
}
.benefit::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 0 4px rgba(106, 72, 229, 0.15);
}
.benefit h3 { font-size: 20px; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
.benefit p { margin-top: 6px; font-size: 16px; color: var(--muted); }
.benefits__cta { margin-top: 40px; }

/* ============================ PROGRAMS (cream) =========================== */
.programs {
  margin: 0 22px;
  padding: 69px 78px;
  background: var(--cream);
  border-radius: var(--r-lg);
}
.programs__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.programs__head h2 { font-size: 65px; line-height: 60px; text-transform: capitalize; color: var(--near-black); }
.carousel-nav { display: flex; gap: 12px; }
.carousel-nav button {
  width: 63px;
  height: 63px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--near-black);
  color: var(--near-black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.carousel-nav button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.carousel-nav button:hover,
.carousel-nav button[aria-current="true"] { background: var(--near-black); color: var(--white); }
/* Slider at either end: drop back to the outline arrow and fade it, so the
   filled/hover treatments never read as clickable. */
.carousel-nav button:disabled,
.carousel-nav button:disabled:hover {
  background: transparent;
  color: var(--near-black);
  opacity: 0.35;
  cursor: not-allowed;
}

.programs__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.programs__track::-webkit-scrollbar { display: none; }

.program-card {
  position: relative;
  flex: 0 0 610px;
  max-width: 610px;
  height: 423px;
  border-radius: var(--r-lg);
  background: var(--purple);
  overflow: hidden;
  scroll-snap-align: start;
  color: var(--white);
}
.program-card__img {
  position: absolute;
  inset: 0 0 0 auto;
  width: 50%;
  height: 100%;
  object-fit: cover;
}
.program-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--purple) 45%, rgba(106, 72, 229, 0) 72%);
}
.program-card__body {
  position: relative;
  z-index: 2;
  padding: 39px 43px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.program-card h3 { color: var(--white); font-size: 30px; line-height: 1.1; letter-spacing: -0.96px; }
.program-card__role { margin-top: 6px; font-family: var(--font-alt); font-weight: 500; font-size: 14px; color: var(--yellow-light); }
.program-card__desc { margin-top: 12px; font-size: 14px; line-height: 1.5; max-width: 300px; color: rgba(255, 255, 255, 0.9); }
.program-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; margin-bottom: 16px; }
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px rgba(248, 243, 241, 0.6);
  font-family: var(--font-alt);
  font-size: 12px;
  color: var(--white);
}
.program-card .btn { align-self: flex-start; }

/* ============================ ASSESSMENT (dark) ========================== */
.assessment {
  margin: 120px 100px;
  background: var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
}
.assessment__body { padding: 100px; }
.assessment__body h2 { color: var(--white); font-size: 56px; line-height: 60px; letter-spacing: 0; }
.assessment__body p { margin: 15px 0 15px; font-family: var(--font-alt); font-size: 16px; color: rgba(255, 255, 255, 0.85); max-width: 636px; }
.assessment__media { align-self: stretch; position: relative; min-height: 458px; }
/* assessment-sm.png is a transparent cut-out of a person, not a full-bleed
   photo: `cover` scaled it past the panel and clipped the laptop off the
   bottom. `contain` + bottom anchor keeps the whole subject in frame and cuts
   the upscale from ~155% to ~127% (and to a downscale on mobile). The asset is
   only 360x360 — it still needs a 2x re-export to be truly sharp. */
.assessment__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }

/* ================================= FAQ =================================== */
.faq { padding: 40px 0 120px; }
.faq h2 { text-align: center; font-size: 65px; line-height: 60px; text-transform: capitalize; color: var(--near-black); margin-bottom: 48px; }
.faq__list { max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.96px;
  color: var(--ink);
  text-transform: capitalize;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: var(--ring);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background-color 0.2s ease;
  font-size: 22px;
  color: var(--purple);
}
.faq-item[open] summary .plus { transform: rotate(45deg); background: var(--purple); color: var(--white); }
.faq-item p { padding: 0 64px 28px 0; font-family: var(--font-alt); font-size: 16px; line-height: 1.6; color: var(--muted); }

/* ================================ FOOTER ================================= */
.closing { padding: 0 22px; }
.closing__cta {
  position: relative;
  margin-bottom: -223px;
  z-index: 2;
  padding: 86px 100px;
  background: var(--yellow);
  border-radius: var(--r-lg);
  text-align: center;
  overflow: hidden;
}
.closing__cta h2 { font-size: 65px; line-height: 60px; text-transform: capitalize; color: var(--near-black); }
.closing__cta p { margin: 25px auto; max-width: 650px; font-size: 18px; color: var(--near-black); }

.site-footer {
  background: var(--ink);
  color: var(--white);
  padding: 320px 0 40px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 40px;
  padding-bottom: 40px;
}
.footer__brand img { height: 44px; margin-bottom: 20px; }
.footer__brand p { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); max-width: 272px; margin-bottom: 24px; }
.social { display: flex; gap: 12px; }
.social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.social a:hover { background: var(--white); color: var(--ink); }
.social svg { width: 18px; height: 18px; fill: currentColor; }

.footer__col h4 { color: var(--yellow); font-size: 18px; margin-bottom: 16px; letter-spacing: -0.96px; }
.footer__col li { margin-bottom: 16px; }
.footer__col a { color: var(--white); font-size: 16px; }
.footer__col a:hover { color: var(--yellow); }

.footer__news h4 { color: var(--yellow); font-size: 18px; margin-bottom: 12px; }
.footer__news p { color: rgba(255, 255, 255, 0.9); margin-bottom: 12px; }
.news-form { display: flex; gap: 8px; }
.news-form input {
  flex: 1;
  height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--border);
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
}
.news-form input::placeholder { color: #6b7280; }
.news-form button {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--purple-logo);
  box-shadow: var(--shadow-soft);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.news-form button:hover { background: var(--purple); }
.news-form svg { width: 20px; height: 20px; fill: currentColor; }

.footer__bottom {
  border-top: 1px solid rgba(253, 248, 246, 0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}

/* =============================== RESPONSIVE ============================== */
@media (max-width: 1200px) {
  :root { --gutter: 56px; }
  .steps__grid { grid-template-columns: repeat(2, 1fr); }
  .assessment { margin: 100px 56px; }
  .assessment__body { padding: 64px; }
}

@media (max-width: 1023px) {
  :root { --gutter: 40px; }
  .section-title,
  .hero h1,
  .steps__title,
  .programs__head h2,
  .faq h2,
  .closing__cta h2 { font-size: 48px; line-height: 1.05; }
  .hero .container { grid-template-columns: 1fr; gap: 40px; }
  .hero__media { max-width: 560px; }
  .benefits .container { grid-template-columns: 1fr; gap: 48px; }
  .benefits__media { max-width: 460px; }
  .assessment { grid-template-columns: 1fr; }
  .assessment__media { min-height: 320px; order: -1; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .nav-wrap { display: none; }
  .nav-toggle { display: flex; }
  .nav-checkbox:checked ~ .nav-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    background: var(--white);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.25);
    padding: 24px var(--gutter) 32px;
  }
  .nav-checkbox:checked ~ .nav-wrap .main-nav ul { flex-direction: column; align-items: flex-start; gap: 4px; }
  .nav-checkbox:checked ~ .nav-wrap .main-nav a { display: block; width: 100%; padding: 14px 0; }
  .nav-checkbox:checked ~ .nav-wrap .header-actions { display: flex; gap: 12px; }
  .nav-checkbox:checked ~ .nav-wrap .header-actions .btn { flex: 1; }
  .nav-checkbox:checked ~ .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-checkbox:checked ~ .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-checkbox:checked ~ .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 767px) {
  :root { --gutter: 20px; }
  .steps,
  .programs { margin: 0 12px; padding: 48px 24px; }
  .steps__grid { grid-template-columns: 1fr; }
  .steps__title { margin-bottom: 32px; }
  .stats .container { gap: 32px; }
  .stat { flex: 1 0 40%; }
  .benefits { padding: 72px 0; }
  .assessment { margin: 72px 12px; }
  .assessment__body { padding: 40px 28px; }
  .programs__head { flex-direction: column; align-items: flex-start; }
  .program-card { flex-basis: 88vw; height: auto; min-height: 380px; }
  .program-card__img { width: 42%; opacity: 0.85; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; }
  .section-title,
  .hero h1,
  .steps__title,
  .programs__head h2,
  .faq h2,
  .benefits__intro .section-title,
  .assessment__body h2,
  .closing__cta h2 { font-size: 38px; letter-spacing: -0.5px; }
  .hero h1 { font-size: 40px; line-height: 1.05; }
  .faq-item summary { font-size: 19px; }
}

/* ================================ AUTH =================================== */
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 24px;
  background: var(--white);
}
.auth__aside {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 66px 72px;
  background-size: cover;
  background-position: center;
  min-height: 640px;
}
.auth__aside::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(81,40,204,0) 0%, var(--purple-deep) 108%);
}
.auth__aside.is-signup::after { background: linear-gradient(180deg, rgba(106,72,229,0) 0%, var(--purple) 112%); }
.auth__aside > * { position: relative; z-index: 2; }
.auth__eyebrow {
  align-self: flex-start;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
  font-weight: 500;
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 16px;
  white-space: nowrap;
}
.auth__aside h2 { color: var(--white); font-size: 46px; line-height: 1; letter-spacing: -0.96px; margin-bottom: 16px; }
.auth__aside p { font-family: var(--font-ui); font-size: 16px; line-height: 1.5; color: #e6deff; margin-bottom: 16px; max-width: 520px; }
.auth__list { display: flex; flex-direction: column; gap: 16px; }
.auth__list li { display: flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-size: 16px; color: var(--white); }
.auth__list svg { width: 22px; height: 22px; flex-shrink: 0; fill: var(--yellow); }

.auth__panel { display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth__form { width: 100%; max-width: 485px; display: flex; flex-direction: column; gap: 24px; }
.auth__head { text-align: center; }
.auth__head h1 { font-size: 36px; line-height: 1; color: var(--near-black); }
.auth__head p { margin-top: 8px; font-size: 16px; color: var(--body); }
.auth__fields { display: flex; flex-direction: column; gap: 12px; }
.auth__row { display: flex; gap: 12px; }
.auth__row .field { flex: 1; }

.field {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 68px;
  padding: 0 20px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(28,27,26,0.6);
  background: var(--white);
}
.field:focus-within { box-shadow: inset 0 0 0 2px var(--purple); }
.field svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: #b3b3b3; stroke-width: 1.6; }
.field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 18px;
  color: var(--near-black);
}
.field input::placeholder { color: #b3b3b3; }

.auth__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.checkbox { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; color: var(--body); cursor: pointer; }
.checkbox input { width: 20px; height: 20px; accent-color: var(--purple-deep); }
.link-strong { font-weight: 500; color: var(--purple-deep); }
.link-strong:hover { color: var(--purple); }

.divider { display: flex; align-items: center; gap: 16px; color: rgba(72,69,85,0.6); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 54px;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--near-black);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.social-btn:hover { background: var(--cream); }
.social-btn svg { width: 20px; height: 20px; }
.auth__switch { text-align: center; font-weight: 500; font-size: 16px; color: var(--body); }

@media (max-width: 1023px) {
  .auth { grid-template-columns: 1fr; }
  .auth__aside { min-height: 320px; padding: 40px; order: -1; }
  .auth__aside h2 { font-size: 34px; }
}
@media (max-width: 767px) {
  .auth { padding: 12px; }
  .auth__panel { padding: 28px 4px; }
  .auth__head h1 { font-size: 30px; }
  .auth__row { flex-direction: column; }
}

/* ============================ FLOW PAGES ================================= */
.flow { min-height: 100vh; padding: 80px 40px; display: flex; flex-direction: column; align-items: center; gap: 40px; background: var(--white); }
.flow__title { font-size: 56px; line-height: 60px; text-align: center; max-width: 715px; color: var(--near-black); }

/* Pricing plans (Choose Your Support Path) */
.pricing-grid { display: flex; gap: 20px; width: 100%; max-width: 1240px; justify-content: center; flex-wrap: wrap; align-items: stretch; }
.plan-card { flex: 1 1 340px; max-width: 400px; background: var(--white); border-radius: var(--r-lg); box-shadow: 0 4px 25px rgba(0,0,0,0.15); padding: 35px; display: flex; flex-direction: column; gap: 21px; }
.plan-card__icon { width: 88px; height: 88px; border-radius: 50%; background: var(--yellow-light); display: flex; align-items: center; justify-content: center; color: #000; }
.plan-card__icon svg { width: 39px; height: 47px; fill: currentColor; }
.plan-card h3 { font-size: 24px; color: var(--near-black); }
.plan-card__desc { font-size: 16px; color: var(--body); line-height: 1.45; }
.plan-card__includes { font-weight: 700; font-size: 16px; color: var(--near-black); }
.plan-features { display: flex; flex-direction: column; gap: 7px; }
.plan-features li { display: flex; gap: 10px; align-items: center; font-family: var(--font-ui); font-size: 15px; color: var(--body); }
.plan-features svg { width: 18px; height: 18px; fill: var(--purple); flex-shrink: 0; }
.plan-card .btn { margin-top: auto; width: 100%; }

/* Program cards (Select Group Program) */
.circl-grid { display: flex; gap: 20px; width: 100%; max-width: 1240px; justify-content: center; flex-wrap: wrap; align-items: stretch; }
.circl-card { flex: 1 1 340px; max-width: 400px; background: var(--white); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px rgba(106,72,229,0.5), 0 4px 25px rgba(0,0,0,0.15); padding: 15px; display: flex; flex-direction: column; }
.circl-card__img { border-radius: 35px; height: 224px; width: 100%; object-fit: cover; }
.circl-card__body { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.circl-card h3 { font-size: 24px; color: var(--near-black); }
.circl-card__role { font-family: var(--font-alt); font-weight: 500; font-size: 15px; color: var(--purple); }
.circl-card__desc { font-size: 15px; line-height: 1.5; color: var(--body); }
.circl-card__price { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: flex-end; }
.circl-card__price small { font-size: 14px; color: var(--body); }
.circl-card__price b { font-size: 24px; color: var(--purple-deep); }
.circl-card .btn { margin: 16px 24px 8px; }

/* Assessment */
.assess { min-height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 29px; padding: 65px 40px; background: var(--white); }
.assess-card { position: relative; width: 100%; max-width: 819px; background: var(--white); border-radius: 24px; box-shadow: inset 0 0 0 1px var(--border), 0 1px 2px rgba(0,0,0,0.05); padding: 48px; display: flex; flex-direction: column; gap: 32px; overflow: hidden; }
.assess-progress-label { font-family: var(--font-ui); font-size: 16px; color: var(--body); }
.assess-progress { display: flex; gap: 6px; width: 192px; margin-top: 8px; }
.assess-progress span { flex: 1; height: 6px; border-radius: 3px; background: var(--border); }
.assess-progress span.done { background: var(--purple-deep); }
.assess-card h1 { font-size: 36px; line-height: 1.1; color: var(--near-black); }
.assess-options { display: flex; flex-direction: column; gap: 16px; }
.assess-option { display: flex; align-items: center; gap: 16px; min-height: 70px; padding: 20px; border-radius: 50px; box-shadow: inset 0 0 0 1px var(--border); font-family: var(--font-ui); font-size: 18px; color: var(--near-black); cursor: pointer; background: var(--white); }
.assess-option input { position: absolute; opacity: 0; }
.assess-option .radio { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px #797586; flex-shrink: 0; }
.assess-option:has(input:checked) { background: #e9e1ff; box-shadow: inset 0 0 0 1px var(--purple-deep); }
.assess-option:has(input:checked) .radio { background: var(--purple-deep); box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 7px var(--purple-deep); }
.assess-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; }
.assess-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 16px; color: var(--body); background: none; border: 0; }
.assess-back svg { width: 16px; height: 16px; fill: currentColor; }
.assess-quote { font-family: var(--font-ui); font-style: italic; font-size: 16px; color: var(--body); text-align: center; max-width: 389px; }

@media (max-width: 767px) {
  .flow { padding: 56px 20px; }
  .flow__title, .assess-card h1 { font-size: 32px; line-height: 1.1; }
  .assess { padding: 40px 16px; }
  .assess-card { padding: 28px; }
  .assess-option { font-size: 16px; }
}

/* ============================== BOOKING ================================= */
.book { max-width: 1030px; margin-inline: auto; padding: 80px 20px 100px; display: flex; flex-direction: column; gap: 24px; }
.book__intro { text-align: center; margin-bottom: 16px; }
.book__intro h1 { font-size: 56px; line-height: 60px; color: var(--near-black); }
.book__intro p { margin: 12px auto 0; max-width: 585px; font-size: 16px; color: var(--body); }
.book-summary { display: flex; gap: 24px; align-items: center; background: var(--white); border-radius: var(--r-lg); box-shadow: 0 4px 25px rgba(0,0,0,0.1); padding: 16px; }
.book-summary img { width: 267px; height: 197px; border-radius: 35px; object-fit: cover; flex-shrink: 0; }
.book-summary h2 { font-size: 24px; color: var(--near-black); margin-bottom: 8px; }
.book-summary p { font-size: 16px; color: var(--body); }
.book-section-title { font-size: 22px; color: var(--near-black); margin-top: 8px; }
.session-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.session-card { position: relative; background: var(--white); border-radius: 30px; box-shadow: inset 0 0 0 1px #e2e8f0; padding: 20px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; }
.session-card input { position: absolute; opacity: 0; }
.session-card__mark { width: 40px; height: 40px; border-radius: 50%; background: #eef2ff; display: flex; align-items: center; justify-content: center; color: var(--purple-deep); }
.session-card__mark svg { width: 18px; height: 18px; fill: currentColor; }
.session-card__radio { position: absolute; top: 20px; right: 20px; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px #e2e8f0; }
.session-card__row { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.session-card__date { font-weight: 500; color: #0f172a; }
.session-card__time { color: var(--body); }
.session-card__spots { font-weight: 500; font-size: 14px; color: var(--purple-deep); }
.session-card:has(input:checked) { box-shadow: inset 0 0 0 2px #6366f1, 0 0 0 4px #eef2ff; }
.session-card:has(input:checked) .session-card__radio { box-shadow: inset 0 0 0 8px var(--purple-deep); }
.book-cols { display: grid; grid-template-columns: 505px 1fr; gap: 20px; align-items: start; }
.facilitator { background: var(--white); border-radius: 40px; box-shadow: 0 4px 25px rgba(0,0,0,0.1); padding: 24px; }
.facilitator__avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 16px; }
.facilitator h3 { font-size: 20px; color: #0f172a; }
.facilitator__role { font-size: 16px; color: var(--body); }
.facilitator__exp { font-weight: 500; font-size: 16px; color: var(--purple-deep); margin: 4px 0 16px; }
.facilitator h4 { font-size: 16px; color: #0f172a; margin-bottom: 10px; }
.chip-list { display: flex; flex-direction: column; gap: 10px; }
.chip { display: inline-flex; align-self: flex-start; padding: 6px 14px; border-radius: var(--r-pill); background: #eef2ff; color: var(--purple-deep); font-size: 14px; font-family: var(--font-ui); }
.included { background: var(--white); border-radius: 40px; box-shadow: 0 4px 25px rgba(0,0,0,0.1); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.included__item { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 16px; }
.included__item .ic { width: 48px; height: 48px; border-radius: 12px; background: #eef2ff; display: flex; align-items: center; justify-content: center; color: var(--purple-deep); flex-shrink: 0; }
.included__item .ic svg { width: 20px; height: 20px; fill: currentColor; }
.included__item b { font-family: var(--font-ui); font-size: 16px; color: #0f172a; }
.included__item span { display: block; font-family: var(--font-ui); font-size: 14px; color: #64748b; }
.book-note { display: flex; align-items: center; gap: 16px; background: #eef2ff; box-shadow: inset 0 0 0 1px #e0e7ff; border-radius: 16px; padding: 16px; }
.book-note .ic { width: 48px; height: 48px; border-radius: 8px; background: var(--purple-deep); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
.book-note p { font-family: var(--font-ui); font-size: 14px; color: #0f172a; }
.book-note p span { display: block; color: #64748b; }
.book__cta { display: flex; justify-content: flex-end; }

@media (max-width: 900px) {
  .book__intro h1 { font-size: 40px; line-height: 1.05; }
  .session-grid { grid-template-columns: 1fr; }
  .book-cols { grid-template-columns: 1fr; }
  .book-summary { flex-direction: column; align-items: stretch; }
  .book-summary img { width: 100%; }
  .book__cta { justify-content: stretch; }
  .book__cta .btn { width: 100%; }
}

/* ============================ RESULT / CONFIRM ========================== */
.result { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 80px 20px; background: var(--white); }
.result-card { position: relative; width: 100%; max-width: 819px; background: var(--white); border-radius: 24px; box-shadow: inset 0 0 0 1px var(--border), 0 1px 2px rgba(0,0,0,0.05); padding: 48px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; overflow: hidden; }
.result-card h1 { font-size: 36px; line-height: 1.1; color: var(--near-black); max-width: 620px; }
.result-card p { font-size: 16px; line-height: 1.5; color: var(--body); max-width: 600px; }
.mood-face { width: 93px; height: 93px; border-radius: 50%; background: var(--yellow); box-shadow: inset 0 0 0 3px #232333; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mood-face svg { width: 58px; height: 58px; }
.rec-panel { width: 100%; max-width: 819px; background: var(--card); border-radius: 32px; padding: 40px; }
.rec-panel h2 { text-align: center; font-size: 24px; color: var(--near-black); margin-bottom: 20px; }
.rec-card { background: var(--white); border-radius: 24px; box-shadow: inset 0 0 0 1px var(--border); padding: 24px; display: flex; gap: 20px; align-items: flex-start; }
.rec-card img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.rec-card h3 { font-size: 20px; color: #0f172a; }
.rec-card p { font-size: 16px; color: var(--body); text-align: left; margin-top: 4px; }
.rec-note { margin-top: 16px; padding: 16px; border-radius: 12px; background: rgba(81,40,204,0.05); text-align: center; font-weight: 500; color: var(--near-black); }

@media (max-width: 767px) {
  .result-card { padding: 32px 24px; }
  .result-card h1 { font-size: 28px; }
  .rec-card { flex-direction: column; align-items: center; text-align: center; }
  .rec-card p { text-align: center; }
}

/* ============================== PAYMENT ================================= */
.pay { max-width: 1200px; margin-inline: auto; padding: 80px 20px 100px; display: grid; grid-template-columns: 471px 1fr; gap: 84px; align-items: start; }
.pay h2 { font-size: 24px; color: var(--near-black); margin-bottom: 24px; }
.pay-summary { background: var(--white); border-radius: 24px; box-shadow: inset 0 0 0 1px var(--border); padding: 32px; }
.pay-summary__row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; font-size: 16px; color: var(--body); border-bottom: 1px solid var(--border); }
.pay-summary__row b { color: var(--near-black); }
.pay-total { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding: 24px; border-radius: 10px; background: var(--cream); }
.pay-total span { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.96px; color: var(--near-black); }
.pay-total b { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.96px; color: var(--purple-deep); }
.pay-methods { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.pay-method { flex: 1; min-width: 120px; height: 99px; border-radius: 11px; background: var(--white); box-shadow: inset 0 0 0 1px var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--near-black); }
.pay-method svg { width: 26px; height: 22px; fill: none; stroke: var(--purple); stroke-width: 1.8; }
.pay-method.is-active { box-shadow: inset 0 0 0 2px var(--purple); }
.pay-field { margin-bottom: 16px; }
.pay-field label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.7px; color: var(--near-black); margin-bottom: 5px; padding: 0 4px; }
.pay-input { display: flex; align-items: center; gap: 8px; height: 65px; padding: 14px 16px; border-radius: 40px; background: var(--white); box-shadow: inset 0 0 0 1px var(--border); }
.pay-input img { width: 31px; height: 16.5px; border-radius: 5px; flex-shrink: 0; }
.pay-input input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--font-display); font-size: 16px; color: var(--near-black); }
.pay-input input::placeholder { color: #6b7280; }
.pay-row2 { display: flex; gap: 16px; }
.pay-row2 .pay-field { flex: 1; }
.pay-actions { display: flex; flex-direction: column; gap: 15px; margin-top: 24px; }
.pay-actions .btn { height: 68px; font-size: 18px; }
.pay-actions .btn--purple { box-shadow: 0 10px 15px -3px rgba(81,40,204,0.2); }
.pay-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; font-family: var(--font-ui); font-size: 16px; color: var(--body); }
.pay-secure svg { width: 14px; height: 16px; fill: var(--body); }

@media (max-width: 900px) {
  .pay { grid-template-columns: 1fr; gap: 40px; }
}

/* ==================== PROFESSIONAL PROFILE FORM ========================= */
.pform { max-width: 1240px; margin-inline: auto; padding: 60px 40px 100px; }
.pform__head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.pform__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: #ffdf93; color: #241a00; padding: 4px 16px; border-radius: var(--r-pill); font-size: 16px; }
.pform__head h1 { font-size: 24px; color: var(--near-black); }
.pform__head p { font-size: 18px; color: var(--body); }
.pform__grid { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
.pform__sections { display: flex; flex-direction: column; gap: 40px; }
.pform-section { background: var(--white); border-radius: 24px; box-shadow: 0 4px 25px rgba(0,0,0,0.1); padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.pform-section h2 { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--near-black); }
.pform-section h2 svg { width: 18px; height: 18px; fill: var(--purple-deep); }
.pform-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pfield { display: flex; flex-direction: column; gap: 8px; }
.pfield.full { grid-column: 1 / -1; }
.pfield label { font-size: 16px; color: var(--body); }
.pfield input, .pfield select, .pfield textarea { border: 0; border-radius: 24px; background: #f8f3f1; padding: 12px 16px; font-family: var(--font-display); font-size: 16px; color: var(--near-black); outline: none; height: 48px; }
.pfield input:focus, .pfield select:focus, .pfield textarea:focus { box-shadow: inset 0 0 0 2px var(--purple); }
.pfield textarea { height: auto; min-height: 120px; border-radius: 16px; resize: vertical; }
.expertise { display: flex; flex-wrap: wrap; gap: 10px; }
.expertise .chip { cursor: pointer; box-shadow: inset 0 0 0 1px var(--border); background: var(--white); color: var(--body); }
.expertise .chip.is-on { background: #e9e1ff; color: var(--purple-deep); box-shadow: inset 0 0 0 1px var(--purple-deep); }
.pill-toggle { display: flex; gap: 10px; flex-wrap: wrap; }
.pill-toggle span { padding: 10px 18px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--border); font-family: var(--font-ui); font-size: 14px; color: var(--body); }
.pill-toggle span.is-on { background: var(--purple-deep); color: #fff; box-shadow: none; }
.day-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.day-grid span { min-width: 56px; text-align: center; padding: 10px 8px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border); font-family: var(--font-ui); font-size: 13px; color: var(--body); }
.day-grid span.is-on { background: var(--purple-deep); color: #fff; box-shadow: none; }
.pform-aside { position: sticky; top: 24px; background: var(--white); border-radius: 24px; box-shadow: 0 4px 25px rgba(0,0,0,0.1); padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.pform-aside h3 { font-size: 16px; color: var(--near-black); }
.pform-steps { display: flex; flex-direction: column; gap: 14px; }
.pform-steps li { display: flex; align-items: center; gap: 10px; color: var(--body); font-family: var(--font-ui); font-size: 15px; }
.pform-steps li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--border); flex-shrink: 0; }
.pform-steps li.is-done::before { background: var(--purple-deep); box-shadow: none; }
.pform-aside .btn { width: 100%; }

@media (max-width: 900px) {
  .pform__grid { grid-template-columns: 1fr; }
  .pform-aside { position: static; }
}
@media (max-width: 600px) {
  .pform-fields { grid-template-columns: 1fr; }
  .pform { padding: 48px 20px 80px; }
}

/* ============================ HOW IT WORKS ============================== */
.how-hero { margin: 40px 22px 0; padding: 90px 40px; background: var(--purple); border-radius: var(--r-lg); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.how-hero .eyebrow { color: #fff; }
.how-hero .eyebrow::before { background: var(--yellow); }
.how-hero h1 { color: var(--white); font-size: 65px; line-height: 60px; max-width: 935px; }
.how-hero p { color: #fff; font-family: var(--font-display); font-weight: 500; font-size: 18px; max-width: 871px; }
.how-steps { max-width: 900px; margin: 0 auto; padding: 100px 20px; display: flex; flex-direction: column; gap: 40px; }
.how-steps__title { text-align: center; font-size: 56px; line-height: 60px; color: var(--near-black); margin-bottom: 20px; }
.how-step { display: flex; gap: 24px; background: var(--card); border-radius: var(--r-md); box-shadow: var(--ring); padding: 32px; }
.how-step__num { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--purple); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 24px; }
.how-step__eyebrow { font-family: var(--font-alt); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple-deep); }
.how-step h3 { font-size: 24px; color: var(--near-black); margin: 4px 0 8px; }
.how-step p { font-size: 16px; color: var(--body); line-height: 1.5; }
.circle-sizes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.circle-sizes span { padding: 8px 16px; border-radius: var(--r-pill); background: var(--white); box-shadow: inset 0 0 0 1px var(--border); font-family: var(--font-ui); font-size: 14px; color: var(--body); }

@media (max-width: 767px) {
  .how-hero { margin: 20px 12px 0; padding: 56px 24px; }
  .how-hero h1 { font-size: 38px; line-height: 1.05; }
  .how-steps { padding: 64px 20px; }
  .how-steps__title { font-size: 34px; line-height: 1.1; }
  .how-step { flex-direction: column; gap: 16px; padding: 24px; }
}

/* =========================== BUSINESS CIRCLE ============================ */
.biz-process { max-width: 1240px; margin: 0 auto; padding: 100px 40px; text-align: center; }
.biz-process .eyebrow { display: inline-flex; margin-bottom: 16px; }
.biz-process h2 { font-size: 56px; line-height: 60px; color: var(--near-black); margin-bottom: 48px; }
.biz-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.biz-step { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--ring); padding: 32px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.biz-step .n { width: 48px; height: 48px; border-radius: 50%; background: var(--purple-deep); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 24px; margin-bottom: 8px; }
.biz-step h3 { font-size: 24px; color: var(--ink); letter-spacing: 0; }
.biz-step p { font-size: 16px; color: var(--body); line-height: 1.4; }
.biz-cta { margin: 0 22px 100px; padding: 86px 40px; background: var(--yellow); border-radius: var(--r-lg); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.biz-cta h2 { font-size: 65px; line-height: 60px; text-transform: capitalize; color: var(--near-black); }
.biz-cta p { max-width: 568px; font-size: 18px; color: var(--near-black); }
.consult { max-width: 1152px; margin: 0 auto 100px; border-radius: var(--r-lg); box-shadow: var(--ring); overflow: hidden; display: grid; grid-template-columns: 1fr 1.2fr; }
.consult__aside { background: var(--purple-deep); color: #fff; padding: 48px; display: flex; flex-direction: column; gap: 20px; }
.consult__aside h2 { color: #fff; font-size: 30px; }
.consult__aside p { color: #e9e1ff; font-family: var(--font-ui); font-size: 16px; }
.consult__contact { display: flex; flex-direction: column; gap: 6px; margin-top: auto; font-family: var(--font-ui); }
.consult__contact b { font-size: 18px; }
.consult__contact span { color: rgba(255,255,255,0.8); }
.consult__form { padding: 48px; display: flex; flex-direction: column; gap: 16px; }
.consult__form .pfield input, .consult__form .pfield select, .consult__form .pfield textarea { background: var(--cream); }
.consult__form .btn { margin-top: 8px; }

@media (max-width: 900px) {
  .biz-steps { grid-template-columns: 1fr; }
  .consult { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .biz-process { padding: 64px 20px; }
  .biz-process h2 { font-size: 34px; line-height: 1.1; }
  .biz-cta { margin: 0 12px 64px; padding: 56px 24px; }
  .biz-cta h2 { font-size: 34px; line-height: 1.1; }
  .consult__aside, .consult__form { padding: 32px; }
}

/* ================================ 404 ==================================== */
/* Reuses the .result / .result-card shell from the assessment-result pages. */
.notfound__logo { width: 132px; height: auto; }
.notfound__code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--purple);
}

@media (max-width: 767px) {
  .notfound__code { font-size: 64px; }
}