/* =====================================================================
   VedaLogic - Template page refinements  (design audit, Option A)

   Loaded AFTER the synck theme CSS and BEFORE dark-mode.css, so it beats
   the theme while dark-mode.css keeps the last word in dark mode.

   Section 1 is global and intentionally so - it fixes a bug that affects
   every page. Sections 2+ are scoped to .pd-* classes on the generated
   page template only, so no other page's layout can be disturbed.

   Fonts are untouched: DM Sans for body and section headings,
   Yantramanav for the hero, exactly as the theme sets them.
   ===================================================================== */


/* ─────────────────────────────────────────────────────────────────────
   1. BOLD TEXT IS BOLD, NOT BLUE                              [global]

   synck-unit-test0899.css is the theme's unit-test / kitchen-sink
   stylesheet and it ships in production. Two rules in it paint every
   bold word on the site brand blue:

       line 1190   strong, dt, th { color: var(--primary_color); }
       line 2306   p strong       { color: var(--primary_color); }

   The result is that bold text is indistinguishable from a link -
   "Amazon Web Services (AWS)" reads as clickable and is not. Bold now
   inherits the colour around it; only real links stay blue.
   ───────────────────────────────────────────────────────────────────── */
strong, b, dt, th,
p strong, p b,
.textwidget strong { color: inherit; }

/* bold inside a link keeps the link colour */
a strong, a b { color: inherit; }

/* The footer sits on a dark ground but inherits a near-black text colour,
   so `inherit` alone would make these labels invisible. Previously they
   were #1351D8 on #1C1C1C - 2.59:1, failing WCAG AA. */
footer strong, footer b,
.footer-area strong, .footer-area b { color: #fff; }


/* ─────────────────────────────────────────────────────────────────────
   2. LAYOUT                                          [page template]

   The page is built on two columns, not one. A single 720px column
   centred in a 1440px viewport is the phone layout stretched wide, with
   ~210px of dead margin either side, and it made the banner look
   enormous by comparison. Copy sits beside the image in the hero, and
   the contents list sits beside the prose in the body.
   ───────────────────────────────────────────────────────────────────── */

/* The theme declares `font-family: "DM Sans"` on h1/h2 with no fallback, so if
   Google Fonts is slow, blocked or unavailable those headings drop to the
   browser's default serif. Everything this template owns names the same face
   with a real fallback stack. No new typefaces are introduced - DM Sans is
   the site's existing body and heading face. */
.pd-title,
.pd-main-title,
.pd-eyebrow,
.pd-toc-title,
.pd-toc a,
.pd-cta-inner h3,
.pd-main .page-content-body :is(h1, h2, h3, h4, h5, h6) {
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
}

.pd-crumb { padding: 18px 0 0; font-size: 13px; color: #6a7382; }
.pd-crumb a { color: #6a7382; text-decoration: none; transition: color .15s; }
.pd-crumb a:hover { color: #1351D8; }
.pd-crumb .sep { margin: 0 7px; opacity: .55; }
.pd-crumb .cur { color: #222; font-weight: 500; }


/* ── HERO ───────────────────────────────────────────────────────────── */
.pd-hero { padding: 34px 0 56px; }

.pd-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 56px;
    align-items: center;
}
.pd-hero--noimg .pd-hero-grid { grid-template-columns: 1fr; max-width: 760px; }

.pd-eyebrow {
    display: inline-block;
    background: #020710;
    color: #fff;
    border-radius: 50px;
    padding: 7px 18px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.pd-hero .pd-title {
    font-size: 46px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: #111827;
    margin: 0 0 18px;
}

.pd-hero .pd-lead {
    font-size: 17px;
    line-height: 1.72;
    color: #454c59;
    margin: 0;
    max-width: 52ch;
}


/* The banner used to run 1140x475 above the copy, four times the height of any
   text block on the page. It now sits beside the copy at its native ratio - no
   crop, so nothing is lost from the uploaded image. At the site's 2.4:1 that is
   about 617x257, which lands level with the copy block rather than towering
   over it. The image column is the wider of the two precisely because a 2.4:1
   picture needs width to have any presence next to text. */
.pd-hero-figure {
    /* shrink-wraps the image, so a portrait or undersized upload does not leave
       the card floating around it */
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 48px rgba(3, 10, 30, .13);
    line-height: 0;
}
.pd-hero-figure img {
    display: block;
    width: 100%;
    height: auto;
    /* A portrait upload would otherwise render a 950px-tall hero. Capping the
       height shrinks the whole image proportionally - it is still uncropped,
       just smaller. A 2.4:1 banner is 255px tall so this never touches it. */
    max-height: 430px;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}


/* ── BODY : contents sidebar + prose ────────────────────────────────── */
.pd-body { padding: 8px 0 12px; }

.pd-body-grid {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}
/* Pages with fewer than three headings get no contents list. Their prose is
   capped and left-anchored rather than left to rattle around a 1140px column -
   the full-width hero and CTA above and below still frame the page. */
.pd-body--full .pd-body-grid { grid-template-columns: minmax(0, 1fr); }
.pd-body--full .pd-main { max-width: 820px; }

.pd-aside { position: sticky; top: 28px; }
.pd-toc-title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #6a7382;
    margin: 0 0 14px;
}
.pd-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid #e6e9f0; }
.pd-toc li { margin: 0; }
.pd-toc a {
    display: block;
    padding: 8px 0 8px 16px;
    margin-left: -1px;
    border-left: 1px solid transparent;
    font-size: 13.5px;
    line-height: 1.45;
    color: #6a7382;
    text-decoration: none;
    transition: color .15s, border-color .15s;
}
.pd-toc li.lvl-3 a { padding-left: 28px; font-size: 13px; }
/* Authors occasionally use a heading for a full-sentence tagline. The label is
   truncated in the template (the full text stays in title=), so this is only a
   safety net for a long unbroken word. */
.pd-toc a { overflow-wrap: anywhere; }
.pd-toc a:hover { color: #111827; }
.pd-toc a.is-active { color: #1351D8; border-left-color: #1351D8; font-weight: 500; }

.pd-main { min-width: 0; }
.pd-main-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.02em;
    color: #111827;
    margin: 0 0 24px;
    max-width: 24ch;
}


/* ── PROSE ──────────────────────────────────────────────────────────── */
.pd-main .page-content-body {
    font-size: 16.5px;
    line-height: 1.78;
    color: #454c59;
}
.pd-main .page-content-body > :first-child { margin-top: 0; }
.pd-main .page-content-body > :last-child { margin-bottom: 0; }

/* headings run the column; running text keeps a readable measure */
.pd-main .page-content-body p,
.pd-main .page-content-body ul,
.pd-main .page-content-body ol { max-width: 68ch; }

.pd-main .page-content-body p { margin: 0 0 20px; }

.pd-main .page-content-body h2 {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -.015em;
    color: #111827;
    margin: 56px 0 14px;
    scroll-margin-top: 24px;
}
.pd-main .page-content-body h3 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.34;
    color: #111827;
    margin: 38px 0 10px;
    scroll-margin-top: 24px;
}

/* ── SECTION BLOCKS ─────────────────────────────────────────────────
   A long service page is easier to get through when it reads as a few
   discrete blocks rather than one continuous column. Each <h2> and the
   content under it is wrapped in .pd-sec by PageContent, then:

     - alternate blocks take a faint tint, so the page bands gently
       instead of running together
     - each carries a "01 / 04" counter, which tells the reader how much
       is left. The count is the information; the order means nothing, so
       it is never styled as a step or a process.
   ──────────────────────────────────────────────────────────────────── */
.pd-main .pd-intro {
    font-size: 17.5px;
    line-height: 1.75;
    color: #3d4551;
    padding-bottom: 8px;
}
.pd-main .pd-intro p { max-width: 64ch; }
.pd-main .pd-intro > :last-child { margin-bottom: 0; }

.pd-sec {
    position: relative;
    padding: 36px 40px 40px;
    border-radius: 18px;
    margin-bottom: 8px;
}
.pd-sec:nth-of-type(even) { background: #f6f8fc; }
.pd-sec > :last-child { margin-bottom: 0; }

/* the counter sits above the heading and carries the accent, so the eye
   lands on it first and the section start is unmistakable */
.pd-sec-n {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #1351D8;
    margin: 0 0 12px;
    font-variant-numeric: tabular-nums;
}
.pd-sec-n b { color: #a8b1c2; font-weight: 500; }

/* the heading's own top margin is handled by the block padding now */
.pd-main .page-content-body .pd-sec > h2:first-of-type,
.pd-main .page-content-body .pd-sec > h3:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.pd-main .page-content-body ul,
.pd-main .page-content-body ol { margin: 0 0 20px; padding-left: 24px; }
.pd-main .page-content-body ul { list-style: disc outside; }
.pd-main .page-content-body ol { list-style: decimal outside; }
.pd-main .page-content-body li { margin-bottom: 8px; display: list-item; }
.pd-main .page-content-body li::marker { color: #98a2b3; }
.pd-main .page-content-body img { max-width: 100%; height: auto; border-radius: 10px; }

/* A pasted table is usually wider than the column. It scrolls inside its own box
   rather than pushing the page sideways. */
.pd-main .pd-scroll {
    max-width: 100%;
    overflow-x: auto;
    margin: 0 0 20px;
    -webkit-overflow-scrolling: touch;
}
.pd-main .pd-scroll table { border-collapse: collapse; font-size: 15px; }
.pd-main .pd-scroll :is(th, td) {
    border: 1px solid #e6e9f0;
    padding: 9px 14px;
    text-align: left;
    white-space: nowrap;
}
.pd-main .pd-scroll th { background: #f6f8fc; font-weight: 700; color: #111827; }

/* Embeds arrive with fixed pixel dimensions; the wrapper holds their ratio. */
.pd-main .pd-embed {
    position: relative;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 0 20px;
    border-radius: 10px;
    overflow: hidden;
    background: #eef1f6;
}
.pd-main .pd-embed > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pd-main .page-content-body a { color: #1351D8; }
.pd-main .page-content-body strong { color: #111827; font-weight: 700; }


/* ── CLOSING CTA ────────────────────────────────────────────────────── */
.pd-cta { padding: 64px 0 76px; }
.pd-cta-inner {
    background: #020710;
    border-radius: 16px;
    padding: 44px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px 40px;
    align-items: center;
    justify-content: space-between;
}
.pd-cta-copy { flex: 1 1 320px; min-width: 0; }
.pd-cta-inner h3 {
    color: #fff; font-size: 26px; font-weight: 700;
    line-height: 1.25; max-width: 34ch; margin: 0;
}
.pd-cta-inner p {
    color: #a9b2c4; font-size: 15px; line-height: 1.6;
    margin: 10px 0 0; max-width: 58ch;
}
.pd-cta-btn {
    flex: 0 0 auto; display: inline-block; white-space: nowrap;
    background: #fff; color: #020710;
    font-size: 15px; font-weight: 500; line-height: 1.7;
    padding: 13px 30px; border-radius: 44px; text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.pd-cta-btn:hover {
    color: #020710; transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
}


/* ── TABLET ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pd-hero-grid { gap: 40px; }
    .pd-hero .pd-title { font-size: 38px; }
    .pd-body-grid { grid-template-columns: 200px minmax(0, 1fr); gap: 44px; }
}

/* ── PHONE ──────────────────────────────────────────────────────────── */

/* ── PHONE ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .pd-hero { padding: 24px 0 36px; }
    .pd-hero-grid { grid-template-columns: 1fr; gap: 30px; }
    .pd-hero .pd-title { font-size: 32px; }
    .pd-hero .pd-lead { font-size: 16.5px; max-width: none; }

    .pd-body-grid { grid-template-columns: 1fr; gap: 28px; }
    .pd-body--full .pd-main { max-width: none; }
    .pd-aside { position: static; }
    .pd-toc ol { display: flex; flex-wrap: wrap; gap: 7px; border-left: 0; }
    .pd-toc a,
    .pd-toc li.lvl-3 a {
        border: 1px solid #e6e9f0; border-radius: 7px;
        padding: 7px 12px; margin: 0; font-size: 13px;
    }
    .pd-toc a.is-active { border-color: #1351D8; }

    .pd-main-title { font-size: 25px; max-width: none; }
    .pd-main .pd-intro { font-size: 16.5px; }
    .pd-main .page-content-body h2 { font-size: 22px; }
    .pd-main .page-content-body h3 { font-size: 18px; margin-top: 30px; }

    .pd-sec { padding: 26px 20px 28px; border-radius: 14px; }

    .pd-cta { padding: 44px 0 56px; }
    .pd-cta-inner { padding: 30px 26px; }
    .pd-cta-inner h3 { font-size: 22px; }
    .pd-cta-btn { width: 100%; text-align: center; }
}


/* ── DARK MODE ──────────────────────────────────────────────────────── */
body.dark-theme .pd-crumb,
body.dark-theme .pd-crumb a { color: var(--vl-text-muted, #aab4c5); }
body.dark-theme .pd-crumb .cur { color: var(--vl-text, #f3f6fb); }
body.dark-theme .pd-crumb a:hover { color: var(--vl-accent, #5b8cff); }

body.dark-theme .pd-eyebrow { background: var(--vl-accent, #5b8cff); color: var(--vl-accent-text, #06101f); }
body.dark-theme .pd-hero .pd-title,
body.dark-theme .pd-main-title { color: var(--vl-text, #f3f6fb); }
body.dark-theme .pd-hero .pd-lead { color: var(--vl-text-muted, #aab4c5); }
body.dark-theme .pd-hero-figure { box-shadow: 0 10px 48px rgba(0, 0, 0, .5); }

body.dark-theme .pd-toc-title { color: var(--vl-text-muted, #aab4c5); }
body.dark-theme .pd-toc ol { border-left-color: var(--vl-border, #1f2a3c); }
body.dark-theme .pd-toc a { color: var(--vl-text-muted, #aab4c5); }
body.dark-theme .pd-toc a:hover { color: var(--vl-text, #f3f6fb); }
body.dark-theme .pd-toc a.is-active { color: var(--vl-accent, #5b8cff); border-left-color: var(--vl-accent, #5b8cff); }

body.dark-theme .pd-sec:nth-of-type(even) { background: var(--vl-surface, #0d131f); }
body.dark-theme .page-content-body .pd-sec-n { color: var(--vl-accent, #5b8cff); }
body.dark-theme .page-content-body .pd-sec-n b { color: var(--vl-text-muted, #aab4c5); }
body.dark-theme .pd-main .pd-intro { color: var(--vl-text, #f3f6fb); }
body.dark-theme .pd-main .pd-scroll :is(th, td) { border-color: var(--vl-border, #1f2a3c); }
body.dark-theme .pd-main .pd-scroll th { background: var(--vl-surface, #0d131f); color: var(--vl-text, #f3f6fb); }
body.dark-theme .pd-main .pd-embed { background: var(--vl-surface, #0d131f); }

body.dark-theme .pd-cta-inner { background: var(--vl-overlay, #111a29); }
body.dark-theme .pd-cta-btn { background: var(--vl-accent, #5b8cff); color: var(--vl-accent-text, #06101f); }
body.dark-theme .pd-cta-btn:hover { color: var(--vl-accent-text, #06101f); }

@media (max-width: 860px) {
    body.dark-theme .pd-toc a { border-color: var(--vl-border, #1f2a3c); }
}