/*
 * Discovery Call Clone — Test Page Stylesheet
 * Hand-coded (no Elementor, no GSAP). Scoped under .dc-page.
 * Content/structure are post 7199's own 6 top-level containers, in their
 * real render order. Most of this page's real functionality lives in
 * shortcodes/components that already exist independent of Elementor —
 * see each section file's own header comment. Shared token vocabulary
 * matches the rest of this clone-test family.
 */

body.page-id-15554 .rkch-spacer, body.page-id-7199 .rkch-spacer { display: none !important; height: 0 !important; }

.dc-page {
  --dc-primary: #233963;
  --dc-text: #1E2E4C;
  --dc-white: #FFFFFF;
  --dc-bg-light: #F6F9FB;
  --dc-neutral-9: #F4F6F9;
  --dc-primary-80: #4F6182;
  --dc-primary-30: #BDC4D1;
  --dc-primary-20: #D3D7E0;
  --dc-breadcrumb: #7B88A1;
  --dc-gradient-teal-green: linear-gradient(90deg, #6AC2B7 0%, #8AD6C0 50%, #8ADBBB 75%, #86DCAF 87.5%, #84DDA5 93.75%, #95E091 96.88%, #9FDD5F 100%);
  --dc-card-shadow: 0 10px 35px 0 rgba(35, 57, 99, 0.12);
  --dc-radius: 24px;

  position: relative;
  font-family: "Public Sans", sans-serif;
  color: var(--dc-text);
  background: var(--dc-white);
}

.dc-page * { box-sizing: border-box; }
.dc-page img { max-width: 100%; height: auto; display: block; }

.dc-page section { padding: 80px 5%; position: relative; z-index: 1; }
@media (max-width: 767px) { .dc-page section { padding: 48px 20px; } }

.dc-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }
/* Live's containers 74a0b3f (intro+form) and 33bbb32 (articles) are both
   `content_width: full` with their OWN percentage padding directly on the
   section — there is no 1280px boxed inner column on live for either.
   Capping .dc-inner here made both sections ~44px narrower per side at
   1536px (measured: live's booking-form card starts at x=76 / 5% of
   viewport; the capped version started at x=120 / 7.8%) — release the cap
   for these sections rather than globally, since other sections on this
   page (and the shared token) still want the 1280 cap. The redesigned
   steps section (362c147, also content_width:full on live) is included
   here too so its card sits at the same left edge as its neighbors. */
.dc-intro .dc-inner, .dc-articles .dc-inner, .dc-steps .dc-inner { max-width: none; }

.dc-page h1, .dc-page h2, .dc-page h3, .dc-page h4 {
  font-family: "Public Sans", sans-serif;
  color: var(--dc-text);
  font-weight: 700;
  margin: 0;
}
.dc-page p { margin: 0; line-height: 1.55; }

.dc-h2 {
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.2;
  font-weight: 700;
  text-wrap: balance;
}

/* =====================================================================
   Section 0 — Hero (post 7199 container 520df3e9).
   Photo background + the site's shared brand gradient washed over it at
   0.52 opacity — this exact treatment lives in the live container's own
   Elementor "Custom CSS" field (a `::before` pseudo-element, not a
   regular Elementor background-overlay setting, which is why it doesn't
   show up under the normal background_overlay_* keys). min-height 438px,
   single heading, no subtext/button on this page.
   ===================================================================== */
.dc-hero {
  position: relative;
  z-index: 0;
  min-height: 438px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 5%;
  background-image: var(--dc-hero-bg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.dc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.52;
  background: var(--dc-gradient-teal-green);
}
.dc-page .dc-hero-title {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: clamp(36px, 7vw, 100px);
  font-weight: 600;
  line-height: 1.04;
  text-transform: capitalize;
  text-wrap: balance;
}

/* =====================================================================
   Section 1 — Breadcrumb + "Book Discovery Call" intro + booking form
   (post 7199 container 74a0b3f). Background image bottom-right, contain,
   not full-bleed cover — a subtle corner watermark, not a hero photo.
   Live's breadcrumb literally reads "Home / Get a Demo" (not "Discovery
   Call") — reproduced verbatim per this project's live-content rule; it
   reads as a leftover from another page's breadcrumb, not intentional,
   but the instruction is to transcribe live as-is.
   ===================================================================== */
.dc-page section.dc-intro {
  background-image: var(--dc-intro-bg);
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 2% 5% 10%;
}
.dc-page p.dc-breadcrumb {
  margin: 0 0 24px;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  color: var(--dc-breadcrumb);
}
.dc-page p.dc-breadcrumb a { color: inherit; text-decoration: none; }
.dc-page p.dc-breadcrumb a:hover { text-decoration: underline; }

.dc-intro-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
}
.dc-page .dc-intro-title {
  flex: 0 1 33%;
  margin: 0;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.24;
}
.dc-page p.dc-intro-text {
  flex: 0 1 52.647%;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: var(--dc-primary-80);
}

@media (max-width: 900px) {
  .dc-intro-row { flex-direction: column; gap: 20px; }
  .dc-page .dc-intro-title { flex: none; font-size: 30px; }
  .dc-page p.dc-intro-text { flex: none; }
}

/* =====================================================================
   Section 2 — "Here's what you can expect when you book a demo:"
   4-step process (post 7199 container 362c147).

   REDESIGNED per Figma node 1061:23440: a white elevated card (shadow
   "Tight/Elevation 6" 0 3.5px 14px rgba(35,57,99,.2), the same token
   used elsewhere on this site) containing a horizontal timeline — a
   hairline connector behind 4 circular icon badges, each sitting above
   its own bordered content box. This REPLACES the live page's flat
   icon+text columns (no card, no connector) — a deliberate design
   change per this session's explicit request, same category of change
   as the Why-It-Matters hover motion on the audit-assurance page.

   The connector line's left/right insets equal half an icon's width
   (24px) so it terminates at icon CENTERS, not icon edges — matching
   Figma's own line placement exactly.
   ===================================================================== */
.dc-page section.dc-steps { background: var(--dc-bg-light); }
.dc-steps-card {
  position: relative;
  background: #fff;
  box-shadow: 0 3.5px 14px 0 rgba(35, 57, 99, 0.2);
  padding: 68px 80px;
}
.dc-page .dc-steps-title {
  margin: 0 0 54px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: capitalize;
}

.dc-steps-timeline {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.dc-steps-line {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 24px;
  height: 1px;
  background: var(--dc-primary-20);
  z-index: 0;
}

.dc-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1 1 0;
  min-width: 0;
}
.dc-step-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid var(--dc-primary-20);
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}
/* First step only — the shared brand mint gradient, exactly as Figma has it. */
.dc-step-icon--accent {
  background: linear-gradient(45deg, #E3FFCC 0%, #D0FFF1 100%);
  border: none;
}
/* img AND svg — the step icons are inlined as <svg aria-hidden>. */
.dc-step-icon img,
.dc-step-icon svg { width: 24px; height: 24px; display: block; }

.dc-step-content {
  width: 100%;
  max-width: 254px;
  padding: 16px;
  border: 1px solid #E9ECF0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.dc-page p.dc-step-name {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}
.dc-page p.dc-step-desc {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: #475467;
}

@media (max-width: 1024px) {
  .dc-steps-card { padding: 48px 40px; }
}
@media (max-width: 900px) {
  .dc-steps-timeline { flex-wrap: wrap; gap: 32px 24px; }
  .dc-steps-line { display: none; }
  .dc-step { flex: 0 1 calc(50% - 12px); }
  .dc-page p.dc-step-name { white-space: normal; }
}
@media (max-width: 640px) {
  .dc-page section.dc-steps { padding: 48px 20px; }
  .dc-steps-card { padding: 32px 20px; }
  .dc-page .dc-steps-title { font-size: 24px; margin-bottom: 36px; }
  .dc-steps-timeline { flex-direction: column; align-items: stretch; }
  .dc-step { flex: none; }
  .dc-step-content { max-width: none; }
}

/* =====================================================================
   Section 3 — "Explore Our Articles" (post 7199 container 33bbb32).
   (Numbering skips a "Testimonials" section — post 7199's own container
   11a5727 carries hide_desktop/hide_tablet/hide_mobile all at once, a
   dead section on live at every breakpoint. Confirmed by loading the
   actual live page: "Testimonials" is entirely absent from its rendered
   body text. Not built here, per this project's standing rule.)
   Live's actual grid is a `rk_archive_cards` Elementor widget with an
   EMPTY `selected_specific_posts` — genuinely dynamic ("latest 3 posts"),
   not a fixed editorial pick like the sibling clone-test pages' article
   sections. intone_related_posts_render() already defaults to exactly
   this behavior when no post_ids are passed, so this section is a single
   function call with no hardcoded IDs to keep in sync over time.
   ===================================================================== */
.dc-page section.dc-articles { background: var(--dc-white); padding: 8% 5% 10%; }

/* =====================================================================
   Section 4 — Final CTA (post 7199 container 51924ac). Confirmed to be
   the shared [intone_cta] "demo" variant component — same background
   image, same certification badges, same nested decorative shape. Only
   the heading differs from that variant's own default ("Scale With
   Security"), so only `heading` is overridden.
   ===================================================================== */
.dc-page section.dc-cta-section { background: var(--dc-bg-light); padding: 40px 5% 100px; }
@media (max-width: 640px) { .dc-page section.dc-cta-section { padding: 24px 20px 56px; } }