/* =====================================================================
   AL ZORAH — Blog / Insights stylesheet
   Design system derived from alzorahcity.com
   Fonts:  Monotype-Regular (display)  ·  ScalaSans-Light (body)
           ChongModern (eyebrows / labels)
   Palette: monochrome only — black chrome, white content, grey tones
           (no colour accents; matches alzorahcity.com's neutral theme)
   ===================================================================== */
/* ----------  Brand fonts  ---------- */
@font-face {
    font-family: 'Monotype-Regular';
    src: url(../fonts/Monotype-Regular.otf) format('opentype');
    font-display: swap;
}
@font-face {
    font-family: 'ScalaSans';
    src: url(../fonts/ScalaSans-Light.ttf) format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'ChongModern';
    src: url(../fonts/ChongModernW01.ttf) format('truetype');
    font-display: swap;
}
/* ----------  Design tokens  ---------- */
:root {
    --ink:        #000000;   /* primary text / black chrome           */
    --ink-2:      #141414;   /* secondary dark surface                */
    --ink-3:      #1f1f1f;   /* dark gradient partner                 */
    --gray:       #606060;   /* body copy on light                    */
    --gray-2:     #808080;   /* muted labels                          */
    --gray-3:     #8c8c8c;   /* faint meta                            */
    --line:       #e4e4e4;   /* hairline borders                      */
    --line-soft:  #f1f1f1;
    --bg:         #ffffff;
    --bg-soft:    #f4f4f4;   /* neutral off-white section band         */
    --footer-bg:  #000000;   /* footer — solid black chrome            */

    /* Monochrome only — black / white / grey across every page.
       (Brand greens/blues from the guidelines are intentionally not
       used on-site, to match alzorahcity.com's neutral theme.)        */
    --accent:      #000000;  /* accent on light surfaces → black      */
    --accent-deep: #000000;  /* prose links → black                   */
    --accent-bright:#ffffff; /* accent on dark surfaces → white       */

    /* AZDC brand secondary/tertiary — opt-in per page via .theme-brand */
    --forest:     #25362d;   /* Forest Green  (secondary)             */
    --teal:       #285353;   /* Teal Green    (secondary)             */
    --olive:      #425a3b;   /* Olive Green   (tertiary)              */
    --lime:       #92da6c;   /* Fresh Lime    (tertiary)              */
    --lime-soft:  #b7df85;   /* Soft Lime     (tertiary)              */
    --frost:      #479297;   /* Frost Blue    (tertiary)              */
    --mint:       #76d7c7;   /* Fresh Mint    (tertiary)              */
    --aqua:       #99ecfb;   /* Light Aqua    (tertiary)              */

    --font-display: 'Monotype-Regular', 'Cormorant Garamond', Georgia, serif;
    --font-body:    'ScalaSans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-label:   'ChongModern', 'ScalaSans', Arial, sans-serif;

    --maxw: 1240px;
    --gutter: clamp(20px, 5vw, 64px);
    --header-h: 84px;
    --radius: 2px;
    --shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.35);
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.az-blog {
    --ink:        #000000;
    --ink-2:      #141414;
    --ink-3:      #1f1f1f;
    --gray:       #606060;
    --gray-2:     #808080;
    --gray-3:     #8c8c8c;
    --line:       #e4e4e4;
    --line-soft:  #f1f1f1;
    --bg:         #ffffff;
    --bg-soft:    #f4f4f4;
    --footer-bg:  #000000;
    --accent:      #000000;
    --accent-deep: #000000;
    --accent-bright:#ffffff;
    --forest:     #25362d;
    --teal:       #285353;
    --olive:      #425a3b;
    --lime:       #92da6c;
    --lime-soft:  #b7df85;
    --frost:      #479297;
    --mint:       #76d7c7;
    --aqua:       #99ecfb;
    --font-display: 'Monotype-Regular', 'Cormorant Garamond', Georgia, serif;
    --font-body:    'ScalaSans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-label:   'ChongModern', 'ScalaSans', Arial, sans-serif;
    --maxw: 1240px;
    --gutter: clamp(20px, 5vw, 64px);
    --header-h: 84px;
    --radius: 2px;
    --shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.35);
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* ----------  Reset  ---------- */
.az-blog *, .az-blog *::before, .az-blog *::after { box-sizing: border-box; }
.az-blog { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
.az-blog {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.75;
    font-weight: 400;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
}
.az-blog img { max-width: 100%; display: block; }
.az-blog a { color: inherit; text-decoration: none; transition: color 0.25s var(--ease); }
.az-blog h1, .az-blog h2, .az-blog h3, .az-blog h4, .az-blog h5, .az-blog h6 { margin: 0 0 0.6em; color: var(--ink); font-weight: 400; line-height: 1.15; text-wrap: balance; }
/* Kill orphans/widows: balanced headings, tidy trailing lines in prose */
.az-blog p, .az-blog li, .az-blog dd, .az-blog small, .az-blog figcaption, .az-blog blockquote { text-wrap: pretty; }
.az-blog ul, .az-blog ol { margin: 0; padding: 0; }
.az-blog button { font-family: inherit; cursor: pointer; }
.az-blog ::selection { background: var(--ink); color: #fff; }
/* ----------  Helpers  ---------- */
.az-blog .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.az-blog .eyebrow {
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 12px;
    color: var(--accent);
    margin: 0 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.az-blog .eyebrow::before {
    content: "";
    width: 34px; height: 1px;
    background: var(--accent);
    display: inline-block;
}
.az-blog .eyebrow.centered { justify-content: center; }
.az-blog .display { font-family: var(--font-display); }
/* ----------  Buttons — box CTAs: outline by default, opaque on hover  ---------- */
.az-blog .btn {
    --bg-btn: var(--ink);
    --fg-btn: #fff;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 12px;
    padding: 15px 32px;
    background: transparent;           /* outline by default */
    color: var(--bg-btn);
    border: 1px solid var(--bg-btn);
    border-radius: var(--radius);      /* box */
    transition: all 0.3s var(--ease);
    white-space: nowrap;
    cursor: pointer;
}
.az-blog .btn:hover { background: var(--bg-btn); color: var(--fg-btn); }
/* opaque fill on hover */
.az-blog .btn--ghost { color: var(--ink); border-color: var(--ink); }
.az-blog .btn--accent { --bg-btn: var(--accent); --fg-btn: #fff; }
/* "Register interest" on dark chrome — white outline, fills white on hover */
.az-blog .btn--on-dark { color: #fff; border-color: rgba(255,255,255,0.6); }
.az-blog .btn--on-dark:hover { background: #fff; color: var(--ink); border-color: #fff; }
/* Newsletter submit on the dark band — white outline → filled white */
.az-blog .cta-band .signup .btn--accent { --bg-btn: #fff; --fg-btn: var(--ink); }
.az-blog .btn--wide { width: 100%; justify-content: center; }
.az-blog .btn .arrow { transition: transform 0.3s var(--ease); }
.az-blog .btn:hover .arrow { transform: translateX(4px); }
.az-blog .textlink {
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 12px;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid transparent;
    padding-bottom: 3px;
}
.az-blog .textlink .arrow { transition: transform 0.3s var(--ease); }
.az-blog .textlink:hover { border-bottom-color: currentColor; }
.az-blog .textlink:hover .arrow { transform: translateX(5px); }
/* =====================================================================
   HEADER  (dark ink chrome — matches the site's dark hero + footer)
   ===================================================================== */
.az-blog .header-inner {
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
/* =====================================================================
   HERO  (listing page)
   ===================================================================== */
.az-blog .hero {
    position: relative;
    min-height: 94vh;
    display: flex;
    align-items: flex-end;
    color: #fff;
    padding-top: calc(var(--header-h) + 28px);
    padding-bottom: 0;
    background: var(--ink);
    overflow: hidden;
}
.az-blog .hero__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.82;
    transform: scale(1.04);
}
.az-blog .hero::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.05) 42%, rgba(0,0,0,0.66) 100%);
}
.az-blog .hero__inner {
    position: relative; z-index: 2; max-width: 940px; width: 100%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(28px, 3.3vw, 46px);   /* matches the card padding */
    align-items: center;
    background: rgba(8, 8, 8, 0.30);
    backdrop-filter: blur(14px) saturate(115%);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    padding: clamp(28px, 3.3vw, 46px);   /* equal on all four sides */
    box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.7);
}
.az-blog .hero h1 {
    font-family: var(--font-display);
    color: #fff;
    font-size: clamp(32px, 4.6vw, 56px);
    line-height: 1.08;
    letter-spacing: 0.005em;
    margin-bottom: 20px; text-align:left;
}
.az-blog .hero p {
    font-size: clamp(17px, 1.6vw, 20px);
    color: rgba(255,255,255,0.82);
    max-width: none;
    margin: 0;
}
.az-blog .hero__meta {
    display: flex; flex-direction: column; gap: 20px;
    padding-left: clamp(24px, 2.6vw, 40px);
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.az-blog .hero__meta div span {
    display: block;
    font-family: var(--font-display);
    font-size: 26px;
    color: #fff;
    line-height: 1;
}
.az-blog .hero__meta div small {
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 11px;
    color: rgba(255,255,255,0.6);
}
/* =====================================================================
   SECTION SCAFFOLD
   ===================================================================== */
.az-blog .section { padding: clamp(64px, 9vw, 120px) 0; }
.az-blog .section--soft { background: var(--bg-soft) !important; }
.az-blog .section-head { max-width: 720px; margin-bottom: 54px; }
.az-blog .section-head.centered { margin-inline: auto; text-align: center; }
.az-blog .section-head h2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.14;
}
.az-blog .section-head p { color: var(--gray); margin: 12px 0 0; }
/* ----------  Category filter bar  ---------- */
.az-blog .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: center;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 20px 0;
    margin-bottom: 56px;
}
.az-blog .filter-bar .chip {
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11.5px;
    color: var(--gray-2);
    padding: 9px 18px;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: #fff;
    transition: all 0.25s var(--ease);
}
.az-blog .filter-bar .chip:hover { color: var(--ink); border-color: var(--ink); }
.az-blog .filter-bar .chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
/* =====================================================================
   FEATURED POST
   ===================================================================== */
.az-blog .featured {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    align-items: stretch;
    border: 1px solid var(--line);
    background: #fff;
    overflow: hidden;
    margin-bottom: 84px;
}
.az-blog .featured__media { position: relative; overflow: hidden; min-height: 420px; }
.az-blog .featured__media img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; transition: transform 0.9s var(--ease);
}
.az-blog .featured:hover .featured__media img { transform: scale(1.05); }
.az-blog .featured__tag {
    position: absolute; top: 22px; left: 22px; z-index: 2;
    font-family: var(--font-label);
    text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px;
    color: #fff; background: rgba(0,0,0,0.72);
    padding: 8px 16px; backdrop-filter: blur(4px);
}
.az-blog .featured__body {
    padding: clamp(32px, 4vw, 60px);
    display: flex; flex-direction: column; justify-content: center;
}
.az-blog .post-meta {
    font-family: var(--font-label);
    text-transform: uppercase; letter-spacing: 0.16em;
    font-size: 11px; color: var(--gray-2);
    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.az-blog .post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gray-2); }
.az-blog .featured__body h3 {
    font-family: var(--font-display);
    font-size: clamp(23px, 2.5vw, 33px);
    line-height: 1.16;
    margin-bottom: 16px;
}
.az-blog .featured__body h3 a:hover { color: var(--accent); }
.az-blog .featured__body p { color: var(--gray); margin: 0 0 30px; }
/* =====================================================================
   ARTICLE CARD GRID
   ===================================================================== */
.az-blog .card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 34px;
    row-gap: 60px;
}
.az-blog .card { display: flex; flex-direction: column; }
.az-blog .card__media {
    position: relative; overflow: hidden;
    aspect-ratio: 4 / 3; margin-bottom: 22px; background: var(--ink);
}
.az-blog .card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.8s var(--ease);
}
.az-blog .card:hover .card__media img { transform: scale(1.06); }
.az-blog .card__tag {
    position: absolute; top: 16px; left: 16px;
    font-family: var(--font-label);
    text-transform: uppercase; letter-spacing: 0.14em; font-size: 10.5px;
    color: #fff; background: rgba(0,0,0,0.72);
    padding: 7px 13px; backdrop-filter: blur(3px);
}
.az-blog .card h3 {
    font-family: var(--font-display);
    font-size: 23px; line-height: 1.22; margin: 12px 0 12px;
}
.az-blog .card h3 a:hover { color: var(--accent); }
.az-blog .card p { color: var(--gray); font-size: 16.5px; line-height: 1.7; margin: 0 0 20px; }
.az-blog .card .card__foot { margin-top: auto; }
.az-blog .card .read-time { color: var(--gray-3); font-size: 13px; }
/* ----------  Pagination  ---------- */
.az-blog .pagination {
    display: flex; justify-content: center; align-items: center; gap: 10px;
    margin-top: 84px;
}
.az-blog .pagination a, .az-blog .pagination span {
    font-family: var(--font-label);
    min-width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); color: var(--gray);
    letter-spacing: 0.08em; font-size: 13px;
    transition: all 0.25s var(--ease);
}
.az-blog .pagination a:hover { border-color: var(--ink); color: var(--ink); }
.az-blog .pagination .current { background: var(--ink); color: #fff; border-color: var(--ink); }
.az-blog .pagination .nav-arrow { padding-inline: 22px; gap: 8px; }
/* =====================================================================
   NEWSLETTER / REGISTER-INTEREST BAND
   ===================================================================== */
.az-blog .cta-band {
    position: relative;
    background: #000;            /* solid black — no image wash */
    color: #fff;
    overflow: hidden;
}
/* Register-interest band is solid black: the background image is suppressed */
.az-blog .cta-band__bg { display: none; }
.az-blog .cta-band .wrap {
    position: relative; z-index: 2;
    padding-block: clamp(64px, 8vw, 104px);
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center;
}
.az-blog .cta-band h2 {
    font-family: var(--font-display); color: #fff;
    font-size: clamp(26px, 3vw, 36px); line-height: 1.16; margin-bottom: 16px;
}
.az-blog .cta-band p { color: rgba(255,255,255,0.75); margin: 0; max-width: 480px; }
.az-blog .cta-band .eyebrow { color: var(--accent-bright); }
.az-blog .cta-band .eyebrow::before { background: var(--accent-bright); }
.az-blog .signup { display: flex; flex-direction: column; gap: 14px; }
.az-blog .signup .field-row { display: flex; gap: 12px; }
.az-blog .signup input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff; padding: 16px 20px; font-family: var(--font-body);
    font-size: 15px; border-radius: var(--radius);
}
.az-blog .signup input::placeholder { color: rgba(255,255,255,0.5); }
.az-blog .signup input:focus { outline: none; border-color: var(--accent-bright); }
.az-blog .signup small { color: rgba(255,255,255,0.5); font-size: 12.5px; }
/* =====================================================================
   FOOTER  (solid-black chrome — gradient top hairline, brand divider,
            logo + 5 link columns, divided bottom bar, social badges)
   ===================================================================== */
/* Separator between the black register band and the black footer:
   a luminous white seam capped by a centred rotated-diamond node — the
   same motif used for list bullets. Keeps the two dark sections from
   reading as one flat block. */
/* Hairline divider separates the brand mark from the link matrix */
/* logo.png has ~40% built-in transparent padding above/below the wordmark
   (it's designed to be centered, as in the header); pull it up so the
   visible glyph's top edge lines up with the column headings' top edge. */
/* =====================================================================
   ARTICLE PAGE
   ===================================================================== */
.az-blog .article-hero {
    position: relative;
    background: var(--ink);
    color: #fff;
    padding-top: calc(var(--header-h) + 60px);
    padding-bottom: clamp(52px, 7vw, 96px);
    overflow: hidden;
}
.az-blog .article-hero__bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0.52; transform: scale(1.05);
}
.az-blog .article-hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.32) 45%, rgba(0,0,0,0.85) 100%);
}
.az-blog .article-hero .wrap {
    position: relative; z-index: 2; max-width: 860px;
    background: rgba(8, 8, 8, 0.28);
    backdrop-filter: blur(14px) saturate(115%);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    padding: clamp(30px, 3.6vw, 48px) clamp(28px, 3.8vw, 52px);
    box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.7);
}
.az-blog .breadcrumb {
    font-family: var(--font-label);
    text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px;
    color: rgba(255,255,255,0.6);
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 30px;
}
.az-blog .breadcrumb a:hover { color: #fff; }
.az-blog .breadcrumb .sep { color: rgba(255,255,255,0.35); }
.az-blog .article-hero .tag-pill {
    display: inline-block;
    font-family: var(--font-label);
    text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px;
    color: var(--ink); background: #fff; padding: 7px 15px; margin-bottom: 22px;
}
.az-blog .article-hero h1 {
    font-family: var(--font-display); color: #fff;
    font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; margin-bottom: 24px; text-align:left;
}
.az-blog .article-hero .article-meta {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    font-family: var(--font-label);
    text-transform: uppercase; letter-spacing: 0.14em; font-size: 11.5px;
    color: rgba(255,255,255,0.72);
}
.az-blog .article-hero .article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.5); }
.az-blog .author-chip { display: flex; align-items: center; gap: 10px; }
/* ----------  Article layout  ---------- */
.az-blog .article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(40px, 6vw, 88px);
    padding-block: clamp(56px, 7vw, 96px);
    align-items: start;
}
/* ----------  Prose  ---------- */
.az-blog .prose { max-width: 720px; font-size: 18.5px; }
.az-blog .prose > p:first-of-type { font-size: 22px; line-height: 1.65; color: var(--ink); }
.az-blog .prose p { color: var(--gray); margin: 0 0 26px; }
.az-blog .prose h2 {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 29px);
    line-height: 1.2; margin: 52px 0 16px; scroll-margin-top: 110px;
    padding-top: 8px;
}
.az-blog .prose h3 {
    font-family: var(--font-body); font-weight: 400;
    font-size: 20px; color: var(--ink); margin: 34px 0 12px;
    letter-spacing: 0.02em;
}
.az-blog .prose a { color: var(--accent-deep); border-bottom: 1px solid rgba(0,0,0,0.35); }
/* buttons inside prose must not inherit the text-link colour/underline */
.az-blog .prose a.btn { color: var(--bg-btn); border-bottom: 0; }
.az-blog .prose a.btn:hover { color: var(--fg-btn); }
.az-blog .prose a:hover { border-color: var(--accent-deep); }
.az-blog .prose ul, .az-blog .prose ol { margin: 0 0 26px; padding-left: 4px; list-style: none; }
.az-blog .prose ul li, .az-blog .prose ol li { position: relative; padding-left: 30px; margin-bottom: 13px; color: var(--gray); }
.az-blog .prose ul li::before {
    content: ""; position: absolute; left: 4px; top: 12px;
    width: 7px; height: 7px; border: 1px solid var(--accent); transform: rotate(45deg);
}
.az-blog .prose ol { counter-reset: li; }
.az-blog .prose ol li { counter-increment: li; }
.az-blog .prose ol li::before {
    content: counter(li, decimal-leading-zero);
    position: absolute; left: 0; top: 0;
    font-family: var(--font-label); color: var(--accent); font-size: 13px; letter-spacing: 0.05em;
}
.az-blog .prose strong { color: var(--ink); font-weight: 400; }
.az-blog .prose figure { margin: 40px 0; }
.az-blog .prose figure img { width: 100%; border-radius: var(--radius); }
.az-blog .prose figure figcaption {
    font-size: 13px; color: var(--gray-3); margin-top: 12px;
    font-family: var(--font-label); letter-spacing: 0.06em; text-transform: uppercase;
}
/* Pull-quote */
.az-blog .pullquote {
    margin: 44px 0;
    padding: 8px 0 8px 34px;
    border-left: 2px solid var(--accent);
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.3; color: var(--ink);
}
/* Note / disclosure callout */
.az-blog .note {
    display: flex; gap: 16px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    padding: 22px 26px; margin: 34px 0; border-radius: var(--radius);
}
.az-blog .note .note__icon { color: var(--accent); flex-shrink: 0; font-size: 20px; line-height: 1.4; }
.az-blog .note p { margin: 0; font-size: 16px; color: var(--gray); }
.az-blog .note strong { color: var(--ink); }
/* Comparison table */
.az-blog .table-wrap { margin: 34px 0; overflow-x: auto; border: 1px solid var(--line); }
.az-blog .compare-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.az-blog .compare-table caption {
    text-align: left; font-family: var(--font-label);
    text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px;
    color: var(--gray-2); padding: 16px 20px 0;
}
.az-blog .compare-table th, .az-blog .compare-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.az-blog .compare-table thead th {
    font-family: var(--font-label);
    text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px;
    color: #fff; background: var(--ink); font-weight: 400;
}
.az-blog .compare-table tbody th { font-family: var(--font-body); color: var(--ink); font-weight: 400; width: 30%; }
.az-blog .compare-table td { color: var(--gray); }
.az-blog .compare-table tbody tr:last-child th, .az-blog .compare-table tbody tr:last-child td { border-bottom: 0; }
.az-blog .compare-table tbody tr:nth-child(even) { background: var(--bg-soft); }
/* Key-facts / at-a-glance box */
.az-blog .keyfacts {
    border: 1px solid var(--line); padding: 30px 32px; margin: 40px 0;
    background: #fff; border-radius: var(--radius);
}
.az-blog .keyfacts h4 {
    font-family: var(--font-label);
    text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px;
    color: var(--gray-2); margin-bottom: 20px;
}
.az-blog .keyfacts dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 30px; margin: 0; }
.az-blog .keyfacts dt { font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10.5px; color: var(--gray-3); margin-bottom: 5px; }
.az-blog .keyfacts dd { margin: 0; font-family: var(--font-display); font-size: 22px; color: var(--ink); line-height: 1.15; }
.az-blog .keyfacts dd small { font-family: var(--font-body); font-size: 13px; color: var(--gray); display: block; letter-spacing: 0; }
/* FAQ accordion */
.az-blog .faq { margin-top: 20px; border-top: 1px solid var(--line); }
.az-blog .faq-item { border-bottom: 1px solid var(--line); }
.az-blog .faq-item button {
    width: 100%; text-align: left; background: none; border: 0;
    padding: 24px 44px 24px 0; position: relative;
    font-family: var(--font-display); font-size: 20px; color: var(--ink); line-height: 1.3;
}
.az-blog .faq-item button::after {
    content: "+"; position: absolute; right: 4px; top: 22px;
    font-family: var(--font-body); font-size: 24px; color: var(--accent);
    transition: transform 0.3s var(--ease);
}
.az-blog .faq-item.open button::after { content: "–"; }
.az-blog .faq-item .faq-answer {
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s var(--ease);
}
.az-blog .faq-item .faq-answer p { color: var(--gray); font-size: 17px; margin: 0 0 24px; padding-right: 44px; }
/* Article footer — tags + share */
.az-blog .article-foot {
    display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
    margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--line);
}
.az-blog .tag-list { display: flex; gap: 10px; flex-wrap: wrap; }
.az-blog .tag-list a, .az-blog .tag-list span {
    font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.1em;
    font-size: 11px; color: var(--gray-2); border: 1px solid var(--line);
    padding: 8px 14px; border-radius: 100px; display: inline-block;
}
.az-blog .tag-list a:hover { color: var(--ink); border-color: var(--ink); }
.az-blog .share { display: flex; align-items: center; gap: 14px; }
.az-blog .share span { font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; color: var(--gray-2); }
.az-blog .share a {
    width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; color: var(--gray);
    transition: all 0.25s var(--ease);
}
.az-blog .share a:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
/* Tags/share sit inside .prose, but they must NOT pick up the theme-brand
   "prose link" teal accent — they're meta chrome, not article links. */
.az-blog.theme-brand .tag-list a,
.az-blog.theme-brand .tag-list span,
.az-blog.theme-brand .share a {
    color: var(--gray-2) !important;
    border-color: var(--line) !important;
}
.az-blog.theme-brand .tag-list a:hover { color: var(--ink) !important; border-color: var(--ink) !important; }
.az-blog.theme-brand .share a:hover { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
/* ----------  Sidebar  ---------- */
.az-blog .sidebar { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 32px; }
.az-blog .widget { border: 1px solid var(--line); padding: 26px 26px; border-radius: var(--radius); }
.az-blog .widget h4 {
    font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.16em;
    font-size: 12px; color: var(--gray-2); margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.az-blog .toc ol { list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: 2px; }
.az-blog .toc a {
    counter-increment: toc; display: flex; gap: 12px; padding: 8px 0;
    font-size: 15px; color: var(--gray); line-height: 1.4;
}
.az-blog .toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-label); color: var(--accent); font-size: 11px; padding-top: 3px; }
.az-blog .toc a:hover, .az-blog .toc a.active { color: var(--ink); }
.az-blog .toc a.active { font-weight: 400; }
.az-blog .widget--cta { background: var(--ink); border-color: var(--ink); color: #fff; }
.az-blog .widget--cta h4 { color: #fff; border-color: rgba(255,255,255,0.15); }
.az-blog .widget--cta p { font-size: 14.5px; color: rgba(255,255,255,0.72); margin: 0 0 22px; }
.az-blog .mini-post { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.az-blog .mini-post:last-child { border-bottom: 0; padding-bottom: 0; }
.az-blog .mini-post img { width: 74px; height: 62px; object-fit: cover; flex-shrink: 0; }
.az-blog .mini-post .mp-tag { font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; color: var(--accent); }
.az-blog .mini-post h5 { font-family: var(--font-display); font-size: 15.5px; line-height: 1.25; margin: 4px 0 0; }
.az-blog .mini-post h5 a:hover { color: var(--accent); }
/* ----------  Related posts  ---------- */
.az-blog .related { border-top: 1px solid var(--line); }
.az-blog .related .card-grid { row-gap: 0; }
/* =====================================================================
   REVEAL ANIMATION
   ===================================================================== */
/* Content is visible by default; only hidden-for-reveal when JS is active
   (the inline <script> in <head> adds .js to <html>). This guarantees the
   page is never blank if JavaScript fails to run or is disabled. */
.az-blog.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.az-blog.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.az-blog.js [data-reveal] { opacity: 1; transform: none; transition: none; }
.az-blog * { scroll-behavior: auto !important; }
}
/* =====================================================================
   BRAND-ACCENTED ARTICLE  (opt-in via body.theme-brand)
   Layers the AZDC secondary/tertiary palette onto an otherwise
   monochrome site — greens & blues used as accents only.
   ===================================================================== */
.az-blog.theme-brand .prose h2 { position: relative; }
.az-blog.theme-brand .prose h2::before {
    content: ""; display: block;
    width: 46px; height: 3px; margin-bottom: 20px;
    background: linear-gradient(90deg, var(--teal), var(--mint));
    border-radius: 2px;
}
.az-blog.theme-brand .prose a:not(.btn) { color: var(--teal); border-bottom-color: rgba(40,83,83,0.35); }
.az-blog.theme-brand .prose a:not(.btn):hover { color: var(--forest); border-bottom-color: var(--forest); }
.az-blog.theme-brand .prose ul li::before { border-color: var(--teal); }
.az-blog.theme-brand .prose ol li::before { color: var(--teal); }
.az-blog.theme-brand .pullquote { border-left-color: var(--teal); color: var(--forest); }
.az-blog.theme-brand .note {
    background: rgba(118,215,199,0.10);
    border-color: rgba(40,83,83,0.18);
    border-left-color: var(--teal);
}
.az-blog.theme-brand .note__icon { color: var(--teal); }
.az-blog.theme-brand .compare-table thead th { background: var(--forest); }
.az-blog.theme-brand .compare-table tbody tr:nth-child(even) { background: rgba(118,215,199,0.08); }
.az-blog.theme-brand .keyfacts {
    border-color: rgba(40,83,83,0.20);
    background: linear-gradient(180deg, rgba(118,215,199,0.10), rgba(255,255,255,0));
}
.az-blog.theme-brand .keyfacts h4 { color: var(--teal); }
.az-blog.theme-brand .keyfacts dt { color: var(--frost); }
.az-blog.theme-brand .keyfacts dd { color: var(--forest); }
.az-blog.theme-brand .faq-item button::after { color: var(--teal); }
.az-blog.theme-brand .tag-pill { background: var(--teal); color: #fff; }
.az-blog.theme-brand .mp-tag { color: var(--teal); }
.az-blog.theme-brand .section--soft .eyebrow { color: var(--teal); }
.az-blog.theme-brand .section--soft .eyebrow::before { background: var(--teal); }
.az-blog.theme-brand .cta-band .eyebrow { color: var(--mint); }
.az-blog.theme-brand .cta-band .eyebrow::before { background: var(--mint); }
.az-blog.theme-brand .btn--accent { --bg-btn: var(--teal); --fg-btn: #fff; }
/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1080px) {
.az-blog .card-grid { grid-template-columns: repeat(2, 1fr); }
.az-blog .article-layout { grid-template-columns: 1fr; }
.az-blog .sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
.az-blog .sidebar .widget { flex: 1 1 260px; }
.az-blog .toc { display: none; }
}
@media (max-width: 860px) {
:root { --header-h: 70px; }
.az-blog .featured { grid-template-columns: 1fr; }
.az-blog .featured__media { min-height: 280px; }
.az-blog .hero__inner { grid-template-columns: 1fr; gap: 28px; }
.az-blog .hero__meta {
        flex-direction: row; flex-wrap: wrap; gap: 28px 40px;
        padding-left: 0; padding-top: 26px;
        border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.18);
    }
.az-blog .cta-band .wrap { grid-template-columns: 1fr; gap: 34px; }
.az-blog .signup .field-row { flex-direction: column; }
}
@media (max-width: 620px) {
.az-blog { font-size: 17px; }
.az-blog .card-grid { grid-template-columns: 1fr; }
.az-blog .keyfacts dl { grid-template-columns: 1fr; }
.az-blog .hero__meta { gap: 26px; }
.az-blog .article-foot { flex-direction: column; align-items: flex-start; }
.az-blog .prose > p:first-of-type { font-size: 19px; }
}

/* ============================================================
   SITE-INTEGRATION OVERRIDES
   Fixes for the main site's global CSS bleeding into the blog
   (Bootstrap breadcrumb pill, heading backgrounds, etc). These
   are independent of the design refresh and still apply.
   Loaded last, scoped under .az-blog.
   ============================================================ */

/* Breadcrumb — kill the site's Bootstrap/AdminLTE grey "pill" */
.az-blog .breadcrumb{
    background:none !important;
    border:0 !important;
    border-radius:0 !important;
    padding:0 !important;
    list-style:none !important;
}
.az-blog .breadcrumb a{ background:none; }

/* Safety net: neutralise any global heading background/shadow bleed */
.az-blog h1, .az-blog h2, .az-blog h3, .az-blog h4, .az-blog h5, .az-blog h6{
    background:transparent !important;
    box-shadow:none !important;
    text-shadow:none !important;
}

/* Card grid: kill any site border/box-shadow bleed on cards (design is borderless) */
.az-blog .card,
.az-blog .card__foot,
.az-blog .card__media{
    border:0 !important;
    box-shadow:none !important;
    background: none!important;
}

/* "Read more / Read the guide" arrow: force inline with text
   (guards against the site's global anchor/flex rules breaking this) */
.az-blog .textlink{
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
    white-space:nowrap !important;
}
.az-blog .textlink .arrow{
    display:inline-block !important;
    vertical-align:middle !important;
    flex:0 0 auto !important; color:#000;
}
.az-blog .card__foot .textlink,
.az-blog .featured__body .textlink{
    display:inline-flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:8px !important;
    white-space:nowrap !important;
    width:auto !important;
}
.az-blog .card__foot .textlink svg,
.az-blog .card__foot .textlink .arrow,
.az-blog .featured__body .textlink svg,
.az-blog .featured__body .textlink .arrow{
    display:inline-block !important;
    margin:0 !important;
    vertical-align:middle !important;
    width:16px !important;
    height:10px !important;
    flex:0 0 auto !important;
}

/* Load more button + empty state (not in the static mock, but needed for
   the working AJAX pagination) */
.az-blog .load-wrap{ text-align:center; margin-top:56px; }
.az-blog .btn-load{
    font-family:var(--font-label); text-transform:uppercase; letter-spacing:.16em; font-size:12px;
    color:var(--ink); background:#fff; border:1px solid var(--ink); border-radius:var(--radius);
    padding:14px 34px; cursor:pointer; transition:background .2s,color .2s;
}
.az-blog .btn-load:hover{ background:var(--ink); color:#fff; }
.az-blog .btn-load[hidden]{ display:none; }
.az-blog .blog-empty{ text-align:center; color:var(--gray); padding:60px 0; font-size:17px; }
.az-blog .card-grid.is-loading{ opacity:.5; transition:opacity .15s; }

/* ============================================================
   Hide the site's global vertical sidebar (social icons +
   ABOUT/DEVELOPER/LOCATION) on blog pages only. This file only
   loads on /blogs and /blogs/{slug}, so this is safe — it won't
   affect the sidebar on any other page of the site.
   ============================================================ */
.sidebar-option{ display:none !important; }

/* ============================================================
   CTA band form: force the email input + Register button to
   stay a normal single-row height (guards against the site's
   global grid/flex rules stretching them into large squares).
   ============================================================ */
.az-blog .signup .field-row{
    display:flex !important;
    flex-direction:row !important;
    align-items:stretch !important;
    flex-wrap:nowrap !important;
    gap:12px !important;
}
.az-blog .signup input{
    flex:1 1 auto !important;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
}
.az-blog .signup .btn{
    flex:0 0 auto !important;
    width:auto !important;
    height:auto !important;
    display:inline-flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
    padding:16px 32px !important;
}
.az-blog .signup .btn .arrow{
    display:inline-block !important;
    width:16px !important;
    height:10px !important;
    flex:0 0 auto !important;
    margin:0 !important;
}

.az-blog .prose .article_end h2 {    font-size: 24px;}
.az-blog .prose .article_end p, .az-blog .prose .article_end ul li {
    font-size: 14px;
    margin-bottom: 10px;
    line-height: 20px;
}
.logo-2{display:none1;}