/*
  DestinySync Pro (for-practitioners.html) — page-specific styles.

  Rebuilt 2026-09-24 to share the Kundali homepage's style system (css/tokens.css,
  css/style.css, css/home.css: DM Sans / DM Serif Text, the .ds-* / .mk-* component
  set, the 68ch measure, hairline separators, one easing curve) instead of the old
  shared/tokens-practitioner.css + shared/base.css pair (Poppins/JetBrains Mono).
  Founder ruled 2026-09-24: all pages use the current homepage fonts.

  This file does not touch css/tokens.css, css/style.css or css/home.css. It only:
    1. Redefines the homepage's colour custom properties, scoped to body.page-pro,
       to a separate "Steel blue" palette so this page doesn't read as the Kundali
       page in a different font.
    2. Patches the handful of RULES in css/home.css that hardcode a sage-green hex
       instead of reading a custom property (button hover, the header/hero wash),
       since those can't be fixed by a variable override alone.
    3. Adds a small number of new, page-only components (the capability list, the
       consultation-flow steps already exist as .ds-steps, the "who it's for" list,
       the wordmark's "pro" tag) that reuse the homepage's hairline/measure/type
       conventions rather than inventing a new visual language.

  Loaded after css/home.css. Every rule below is scoped under body.page-pro so nothing
  here can leak onto index.html or any other page.
*/

body.page-pro {
  /* -----------------------------------------------------------------
     Steel blue palette. Same structure as home.css's sage palette:
     a deeper "ground" for the header/hero wash, a lighter "tint" and a
     near-white "mist" for alternating section backgrounds, one accent,
     ink/muted text, and a mid-tone hairline. --paper is left untouched
     (still #F2EEE6) since it belongs to Kundali document surfaces, not
     this page.
  ----------------------------------------------------------------- */
  --ink: #1F2E38;
  --ink-muted: #566975;
  --muted: #566975;
  --accent: #2F5670;
  --accent-strong: #24455B;
  --accent-ink: #D6E1E8;
  --focus-ring: #2F5670;

  --sage-ground: #C3D3DE; /* header/hero wash ground */
  --lavender: #D6E1E8;    /* tint: alternating section background, panel fill */
  --sky: #EAF0F3;         /* mist: lightest alternating background, page ground */
  --hair: #A9BFCC;
  --hair-2: #BDD0DB;
  --border: #A9BFCC;
  --border-strong: #8FA9B9;
}

/* home.css sets `body { background: var(--sky); }`, which already resolves to the
   steel mist above. Two rules in home.css hardcode a sage-green hex instead of a
   custom property; both are patched here for this page only. */

body.page-pro .ds-btn:hover,
body.page-pro .btn-primary:hover {
  background: var(--accent-strong);
}

body.page-pro .ds-dawn {
  background:
    radial-gradient(60% 70% at 10% 8%, #CFDCE4 0%, rgba(195, 211, 222, 0) 75%),
    radial-gradient(55% 75% at 88% 30%, #C7D8E2 0%, rgba(195, 211, 222, 0) 75%),
    linear-gradient(to bottom, var(--sage-ground) 0%, var(--sky) 100%);
}

/* ---------------------------------------------------------------------
   Wordmark: "destinysync" (unchanged) followed by a small "pro" tag in
   the accent colour, same DM Sans as the wordmark, not mono.
--------------------------------------------------------------------- */

.ds-wordmark__pro {
  margin-left: 6px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--accent);
  vertical-align: 2px;
}

/* ---------------------------------------------------------------------
   Hero: left-aligned like index.html's .ds-hero--split, instead of
   home.css's default centered .ds-hero. Single column (this page has no
   hero image), so only the alignment values are mirrored, not the
   two-column grid.
--------------------------------------------------------------------- */
body.page-pro .ds-hero {
  text-align: left;
}
body.page-pro .ds-hero h1 {
  margin: 0;
  max-width: none;
}
body.page-pro .ds-hero__lede {
  margin: 26px 0 0;
  max-width: 30em;
}
body.page-pro .ds-hero__act {
  justify-content: flex-start;
}

/* ---------------------------------------------------------------------
   Capabilities: "Calculate / Consult / Follow through". Three-up
   hairline-separated list, matching the homepage's .ds-inside idiom
   (typographic, bordered by rules, no cards, no drop shadow) rather
   than a boxed feature-grid.
--------------------------------------------------------------------- */

.pro-caps {
  margin: 48px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hair);
}

.pro-cap {
  padding: 28px 32px 28px 0;
  border-left: 1px solid var(--hair);
}

.pro-cap:first-child {
  padding-left: 0;
  border-left: none;
}

.pro-cap__label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.pro-cap p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 68ch;
}

@media (max-width: 780px) {
  .pro-caps {
    grid-template-columns: 1fr;
    border-top: none;
  }
  .pro-cap {
    padding: 24px 0;
    border-left: none;
    border-top: 1px solid var(--hair);
  }
  .pro-cap:first-child {
    padding-top: 0;
    border-top: none;
  }
}

/* ---------------------------------------------------------------------
   Who it's for: three practice types, one hairline-separated column.
   Same typographic pattern as .pro-caps, stacked instead of side by
   side since each entry needs more room to read.
--------------------------------------------------------------------- */

.pro-who {
  margin: 44px 0 0;
  max-width: 68ch;
}

.pro-who__item {
  padding: 24px 0;
  border-top: 1px solid var(--hair);
}

.pro-who__item:first-child {
  padding-top: 0;
  border-top: none;
}

.pro-who__item h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.pro-who__item p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------
   Consultation-flow steps reuse .ds-steps (the homepage's numbered list
   for "How to read it with an AI assistant") as-is; no overrides needed
   beyond the colour variables above, since every colour it uses reads a
   custom property.
--------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   Responsive floor: 375px, 16px gutters. .ds-wrap and .mk-block already
   handle this from home.css; the two grids added on this page need
   their own collapse points, set above at 780px. Nothing here needs a
   change below 640px beyond what home.css already does to .ds-wrap,
   .ds-hero, .ds-sec and .mk-close.
--------------------------------------------------------------------- */

/* Real Pro screenshots (captured 2026-09-24, demo client). */
body.page-pro .pro-shot { margin: 48px 0 0; }
body.page-pro .pro-shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--hair); }
body.page-pro .pro-shot figcaption { margin-top: 12px; color: var(--muted); font-size: 15px; max-width: 68ch; }
body.page-pro #capabilities .pro-shot { margin-top: 56px; }