/* ==========================================================================
   Silver Lattice - main stylesheet
   Light theme · turquoise primary · DB1-DB8-inspired layout
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
    /* Brand */
    --sl-turquoise-900: #0B5E5D;
    --sl-turquoise-800: #0E7C7B;     /* primary */
    --sl-turquoise-700: #0F8E8C;
    --sl-turquoise-600: #14B8A6;     /* bright primary */
    --sl-turquoise-400: #5EEAD4;
    --sl-turquoise-200: #B8F2EA;
    --sl-turquoise-100: #DAF7F3;
    --sl-turquoise-50:  #ECFEFE;

    --sl-ink-900: #0F1E3A;
    --sl-ink-800: #15233F;
    --sl-ink-700: #1F2A44;
    --sl-ink-500: #5B6B85;
    --sl-ink-300: #A6B0C2;
    --sl-ink-200: #D8DEEA;
    --sl-ink-100: #EEF1F7;

    --sl-bg:       #FFFFFF;
    --sl-bg-soft:  #F5FAFB;
    --sl-bg-tint:  #F4F9F9;
    --sl-bg-warm:  #FBF7F3;
    --sl-dark:     #1A2333;
    --sl-dark-deep:#10182A;

    --sl-border:   rgba(15, 30, 58, 0.08);
    --sl-border-strong: rgba(15, 30, 58, 0.14);
    --sl-shadow-sm: 0 1px 2px rgba(15,30,58,.06), 0 1px 1px rgba(15,30,58,.04);
    --sl-shadow:    0 10px 30px rgba(15,30,58,.08), 0 2px 6px rgba(15,30,58,.05);
    --sl-shadow-lg: 0 30px 80px rgba(15,30,58,.14), 0 8px 24px rgba(15,30,58,.08);

    --sl-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    /* Display font is now Inter (heavier weights). Kept as a separate token in
       case we ever want to swap a true display face back in. */
    --sl-font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    --sl-container: 1240px;
    --sl-container-narrow: 820px;
    --sl-radius:     12px;
    --sl-radius-lg:  20px;
    --sl-radius-pill: 999px;

    --sl-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--sl-font-sans);
    font-size: 17px;
    line-height: 1.55;
    color: var(--sl-ink-700);
    background: var(--sl-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--sl-turquoise-800); text-decoration: none; transition: color .2s var(--sl-ease); }
a:hover { color: var(--sl-turquoise-600); }

h1, h2, h3, h4, h5 {
    margin: 0; color: var(--sl-ink-900);
    font-family: var(--sl-font-display); font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.15;
}
p { margin: 0 0 1em; }

.screen-reader-text {
    position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden;
}
.skip-link {
    position: absolute; left: -9999px; top: 8px; background: var(--sl-ink-900); color: #fff; padding: 8px 12px; border-radius: 6px; z-index: 100;
}
.skip-link:focus { left: 8px; color: #fff; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--sl-container); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: var(--sl-container-narrow); }
.text-center { text-align: center; }
.section { padding: 88px 0; position: relative; }
.section__header { max-width: 820px; margin: 0 0 48px; }
.section__header .eyebrow { margin-bottom: 14px; }
.section__header.text-center { text-align: center; margin-left: auto; margin-right: auto; }
.lede--accent { color: var(--sl-ink-900); font-weight: 600; }
.section__lede { color: var(--sl-ink-500); font-size: 18px; }
.site-content__inner { padding: 80px 24px; }

/* ---------- Typography scale ---------- */
.eyebrow {
    text-transform: uppercase; letter-spacing: 0.12em; font-size: 15px;
    color: var(--sl-turquoise-800); font-weight: 700; margin: 0 0 16px;
}
/* Larger, more prominent eyebrow used in the hero. */
.eyebrow--hero {
    font-size: 18px;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: #0FA3A0;
    margin: 0 0 22px;
}
.eyebrow--hero em {
    font-style: italic;
    font-weight: 700;
}
.display {
    font-family: var(--sl-font-sans);
    font-weight: 800;
    font-size: clamp(31px, 4.5vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin: 0 0 24px;
    color: var(--sl-ink-900);
}
.h2 { font-size: clamp(26px, 3vw, 38px); margin: 0 0 16px; letter-spacing: -0.02em; }
.h3 { font-size: clamp(22px, 2.2vw, 28px); margin: 0 0 12px; }
.lede { font-size: 19px; color: var(--sl-ink-500); margin: 0 0 32px; max-width: 60ch; }
.rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4 { margin-top: 1.2em; margin-bottom: .5em; }
.rich-text a { text-decoration: underline; text-underline-offset: 3px; }
.rich-text ul, .rich-text ol { padding-left: 1.2em; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: var(--sl-radius-pill);
    padding: 12px 22px;
    font-weight: 600; font-size: 15px; line-height: 1;
    border: 1.5px solid transparent;
    cursor: pointer; user-select: none;
    transition: background-color .2s var(--sl-ease), color .2s var(--sl-ease), transform .15s var(--sl-ease), box-shadow .2s var(--sl-ease), border-color .2s var(--sl-ease);
    white-space: nowrap;
}
.btn--lg { padding: 16px 28px; font-size: 16px; }
.btn--sm { padding: 9px 16px; font-size: 14px; }
.btn--primary { background: var(--sl-turquoise-800); color: #fff; }
.btn--primary:hover { background: var(--sl-turquoise-900); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(14,124,123,.28); }
.btn--dark { background: var(--sl-ink-900); color: #fff; }
.btn--dark:hover { background: #000; color: #fff; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--sl-ink-900); border-color: var(--sl-ink-200); }
.btn--ghost:hover { border-color: var(--sl-turquoise-800); color: var(--sl-turquoise-800); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--ghost-light:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }

/* ==========================================================================
   Promo bar (above nav)
   ========================================================================== */
.promo-bar {
    background: #FFFFFF;
    color: var(--sl-ink-700);
    font-size: 13px;
    border-bottom: 1px solid var(--sl-border);
}
.promo-bar__inner {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    min-height: 42px; padding: 8px 24px; flex-wrap: wrap;
}
.promo-bar__msg { color: var(--sl-ink-700); }
.promo-bar__cta {
    color: var(--sl-turquoise-800);
    display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
}
.promo-bar__cta svg { width: 14px; height: 14px; transition: transform .2s var(--sl-ease); }
.promo-bar__cta:hover { color: var(--sl-turquoise-600); }
.promo-bar__cta:hover svg { transform: translateX(3px); }

/* ==========================================================================
   Site header / nav
   ========================================================================== */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: #FFFFFF;
    border-bottom: 1px solid var(--sl-border);
}
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 92px; gap: 24px;
}
.site-brand { display: inline-flex; align-items: center; gap: 16px; color: var(--sl-ink-900); font-weight: 600; }
.site-brand:hover { color: var(--sl-ink-900); }
.site-brand__mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; color: var(--sl-turquoise-800);
    background: var(--sl-turquoise-50); border-radius: 10px;
}
.site-brand__mark svg { width: 22px; height: 22px; }
.site-brand__logo {
    width: 56px; height: 56px;
    object-fit: contain; display: block;
    background: transparent;
    mix-blend-mode: multiply;
}
.site-brand__text {
    display: flex; flex-direction: column; justify-content: center;
    line-height: 1.05;
}
.site-brand__name {
    font-family: var(--sl-font-sans);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.02em;
    /* Bright teal so the brand name pops against the white header. */
    color: #0FA3A0;
}
.site-brand__tagline {
    font-family: var(--sl-font-sans);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    /* Muted slate so it recedes beneath the brand name. */
    color: var(--sl-ink-500);
    margin-top: 4px;
}
@media (max-width: 720px) {
    .site-brand__logo { width: 44px; height: 44px; }
    .site-brand__name { font-size: 20px; }
    .site-brand__tagline { font-size: 9px; letter-spacing: 0.14em; }
}
/* WordPress custom logo (used if uploaded via Customizer) */
.custom-logo-link { display: inline-flex; align-items: center; }
.custom-logo { max-height: 48px; width: auto; display: block; }

.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav__list { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.site-nav__link { color: var(--sl-ink-700); font-size: 15px; font-weight: 500; }
.site-nav__link:hover { color: var(--sl-turquoise-800); }
.site-nav__cta { display: flex; align-items: center; gap: 14px; }

.nav-toggle {
    display: none; background: none; border: 0; cursor: pointer; padding: 8px; gap: 5px;
    flex-direction: column; align-items: center; justify-content: center;
}
.nav-toggle__bar { display: block; width: 22px; height: 2px; background: var(--sl-ink-900); border-radius: 2px; }

@media (max-width: 920px) {
    .nav-toggle { display: inline-flex; }
    .site-nav {
        position: fixed; inset: 92px 0 auto 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: #fff; border-bottom: 1px solid var(--sl-border);
        padding: 16px 24px 24px;
        max-height: 0; overflow: hidden;
        transition: max-height .25s var(--sl-ease);
    }
    .site-nav.is-open { max-height: 80vh; }
    .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .site-nav__item { border-top: 1px solid var(--sl-border); }
    .site-nav__item:first-child { border-top: 0; }
    .site-nav__link { display: block; padding: 14px 0; }
    .site-nav__cta { margin-top: 16px; }
    .site-nav__cta .btn { width: 100%; }
}

/* Phones (< 768px): not enough room — hide the top nav links and the menu
   toggle entirely. iPad / laptop / desktop (>= 768px) keep them. */
@media (max-width: 767px) {
    .nav-toggle { display: none; }
    .site-nav { display: none; }
}

/* ==========================================================================
   Section 1 - Hero (DB1: centered, full-width mockup below)
   ========================================================================== */
.section--hero {
    padding: 80px 0 64px;
    background:
        radial-gradient(700px 480px at 50% 0%, var(--sl-turquoise-50), transparent 60%),
        linear-gradient(180deg, #FBFEFE 0%, #FFFFFF 100%);
    overflow: hidden;
}
.hero-copy {
    max-width: 880px; margin: 0 auto 56px; text-align: center;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero-copy .lede { margin-left: auto; margin-right: auto; }

/* ---- Full-width product mockup ---- */
.hero-visual { max-width: 1140px; margin: 0 auto; text-align: center; }
.hero-logo {
    display: block; margin: 8px auto 0;
    width: clamp(170px, 22vw, 224px); height: auto;
    mix-blend-mode: multiply;
}
.hero-video {
    display: block; margin: 8px auto 0;
    width: clamp(240px, 26vw, 300px); height: auto;   /* 520px native — shown <=300px stays crisp */
    mix-blend-mode: multiply;                          /* drop the white background on the light hero */
}
.mockup {
    background: #fff;
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius-lg);
    box-shadow: var(--sl-shadow-lg);
    overflow: hidden;
}
.mockup__bar {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 18px; border-bottom: 1px solid var(--sl-border);
    background: #FAFBFD;
}
.mockup__dot { width: 10px; height: 10px; border-radius: 50%; background: #E2E6EF; }
.mockup__dot:nth-child(1) { background: #FF6B6B; opacity: .6; }
.mockup__dot:nth-child(2) { background: #FFC847; opacity: .6; }
.mockup__dot:nth-child(3) { background: #4ECB71; opacity: .6; }
.mockup__tabs { margin-left: 20px; display: inline-flex; gap: 4px; }
.mockup__tab {
    font-size: 12px; padding: 5px 10px; border-radius: 6px; color: var(--sl-ink-500); font-weight: 500;
}
.mockup__tab--active { background: var(--sl-ink-100); color: var(--sl-ink-900); }

.mockup__wide-body {
    display: grid; grid-template-columns: 220px 1fr 260px; min-height: 380px;
}
.mockup__sidebar {
    padding: 18px 16px; border-right: 1px solid var(--sl-border); background: #FAFBFD;
    font-size: 13px;
}
.mockup__sidebar-title { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--sl-ink-500); margin: 0 0 10px; }
.mockup__sidebar ul { list-style: none; margin: 0; padding: 0; }
.mockup__sidebar li {
    padding: 8px 10px; border-radius: 6px; color: var(--sl-ink-700); margin-bottom: 2px;
}
.mockup__sidebar li.is-active { background: var(--sl-turquoise-100); color: var(--sl-turquoise-900); font-weight: 600; }

.mockup__main { padding: 22px 24px; }
.mockup__main-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin-bottom: 18px;
}
.mockup__crumb { font-size: 12px; color: var(--sl-ink-500); margin: 0 0 6px; }
.mockup__main-head h3 { font-family: var(--sl-font-sans); font-size: 18px; font-weight: 600; display: inline-flex; gap: 10px; align-items: center; }
.pill {
    display: inline-flex; align-items: center; font-size: 11px; padding: 3px 10px; border-radius: 999px; font-weight: 600;
}
.pill--success { background: var(--sl-turquoise-100); color: var(--sl-turquoise-900); }
.pill--warn { background: #FEF3C7; color: #92400E; }

.mockup__table {
    border: 1px solid var(--sl-border); border-radius: 10px; overflow: hidden;
    font-size: 13px;
}
.mockup__table-head, .mockup__table-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr .6fr .9fr .8fr .9fr;
    padding: 10px 14px; gap: 12px;
    align-items: center;
}
.mockup__table-head {
    background: #FAFBFD; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--sl-ink-500); border-bottom: 1px solid var(--sl-border);
}
.mockup__table-row { border-top: 1px solid var(--sl-border); color: var(--sl-ink-700); }
.mockup__table-row:first-of-type { border-top: 0; }
.mockup__table-row .num { font-variant-numeric: tabular-nums; }

.mockup__chat {
    border-left: 1px solid var(--sl-border); padding: 18px 18px; background: #FCFDFE;
    font-size: 13px;
}
.mockup__chat header {
    display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--sl-ink-900); margin-bottom: 10px;
}
.mockup__chat .badge {
    display: inline-flex; width: 22px; height: 22px; border-radius: 6px;
    background: var(--sl-turquoise-100); color: var(--sl-turquoise-800);
    align-items: center; justify-content: center;
}
.mockup__chat .badge svg { width: 14px; height: 14px; }
.mockup__chat p { margin: 0 0 8px; color: var(--sl-ink-700); line-height: 1.45; }
.mockup__chat .muted { color: var(--sl-ink-500); }
.mockup__chat .typing { color: var(--sl-turquoise-800); display: flex; align-items: center; gap: 6px; }

.dots { display: inline-flex; gap: 3px; }
.dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--sl-turquoise-600); animation: bounce 1.2s infinite; }
.dots span:nth-child(2) { animation-delay: .15s; }
.dots span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }

@media (max-width: 1000px) {
    .mockup__wide-body { grid-template-columns: 180px 1fr; }
    .mockup__chat { display: none; }
}
@media (max-width: 720px) {
    .mockup__wide-body { grid-template-columns: 1fr; }
    .mockup__sidebar { display: none; }
    .mockup__table-head, .mockup__table-row { grid-template-columns: .7fr 1fr .6fr .8fr; }
    .mockup__table-head span:nth-child(2), .mockup__table-row span:nth-child(2),
    .mockup__table-head span:nth-child(5), .mockup__table-row span:nth-child(5) { display: none; }
}

/* ==========================================================================
   Section 2 - Trusted-by logos + promo banner + benefits intro
   ========================================================================== */
.section--logos-banner { background: var(--sl-bg); padding: 64px 0 40px; }
.logos__eyebrow {
    text-transform: uppercase; letter-spacing: .14em; font-size: 12px;
    color: var(--sl-ink-500); margin: 0 0 28px;
}
.logos__row {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 56px;
    margin-bottom: 56px; padding-bottom: 56px; border-bottom: 1px solid var(--sl-border);
}
.logo-plate {
    font-family: var(--sl-font-display);
    font-size: 22px; color: var(--sl-ink-300); font-weight: 700;
    letter-spacing: -0.01em;
    transition: color .2s var(--sl-ease);
}
.logo-plate:hover { color: var(--sl-ink-700); }

.promo-banner {
    background: linear-gradient(135deg, var(--sl-turquoise-50) 0%, #FBFDFE 100%);
    border: 1px solid var(--sl-turquoise-200);
    border-radius: var(--sl-radius-lg);
    padding: 28px 32px;
    display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
    margin-bottom: 88px;
}
.promo-banner__title { font-weight: 600; color: var(--sl-ink-900); margin: 0 0 6px; font-size: 18px; }
.promo-banner__body { color: var(--sl-ink-500); margin: 0 0 14px; max-width: 64ch; }
.promo-banner__badge {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    width: 156px; height: 156px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--sl-turquoise-700), var(--sl-ink-900));
    color: #fff; text-align: center;
    box-shadow: 0 16px 40px rgba(11, 94, 93, .35);
}
.promo-banner__badge-circle {
    font-family: var(--sl-font-display); font-size: 28px; letter-spacing: 0.08em; opacity: .85;
}
.promo-banner__badge-title {
    font-family: var(--sl-font-display); font-size: 22px; margin-top: 2px;
}
.promo-banner__badge-year { font-size: 13px; opacity: .7; margin-top: 2px; }

.benefits-intro { margin: 0 auto; }

@media (max-width: 720px) {
    .promo-banner { grid-template-columns: 1fr; text-align: center; }
    .promo-banner__badge { justify-self: center; }
}

/* ==========================================================================
   Section 3 - Benefits (DB3: 3-col benefits + stat rows)
   ========================================================================== */
.section--benefits { background: var(--sl-bg); padding-top: 0; }
.benefits-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
    padding-bottom: 64px;
}
.benefit__tile {
    width: 56px; height: 56px;
    background: var(--sl-turquoise-100);
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--sl-turquoise-800);
    margin-bottom: 22px;
    box-shadow: 0 2px 0 rgba(14, 124, 123, .15);
}
.benefit__tile svg { width: 30px; height: 30px; }
.benefit__title { font-size: 22px; margin-bottom: 12px; color: var(--sl-ink-900); }
.benefit__title a { color: var(--sl-turquoise-800); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.benefit__title a:hover { color: var(--sl-turquoise-900); }
.benefit p { color: var(--sl-ink-700); margin: 0; }

@media (max-width: 880px) { .benefits-grid { grid-template-columns: 1fr; gap: 32px; } }

.impact-rows { border-top: 1px solid var(--sl-border); }
.impact-row {
    display: grid; grid-template-columns: 1.1fr 1fr;
    gap: 48px; padding: 40px 0;
    border-bottom: 1px solid var(--sl-border);
    align-items: center;
}
.impact-row__big { display: block; }
.impact-row__num {
    font-family: var(--sl-font-display); font-weight: 800;
    font-size: clamp(40px, 5vw, 64px); color: var(--sl-turquoise-800);
    letter-spacing: -0.03em; line-height: 1;
}
.impact-row__label {
    display: inline-block; margin-left: 8px;
    font-family: var(--sl-font-display); font-size: clamp(22px, 2.4vw, 30px);
    color: var(--sl-ink-900); font-weight: 600; letter-spacing: -0.02em;
}
.impact-row__story p { color: var(--sl-ink-500); margin-bottom: 10px; max-width: 56ch; }

@media (max-width: 880px) {
    .impact-row { grid-template-columns: 1fr; gap: 16px; }
}

/* ==========================================================================
   Section 4 - Tools dark cards (DB4/5)
   ========================================================================== */
.section--tools { background: var(--sl-bg-soft); }
.tools-tabs {
    display: flex; gap: 24px; padding: 0 0 24px;
    border-bottom: 1px solid var(--sl-border); margin-bottom: 32px;
}
.tools-tab {
    color: var(--sl-ink-500); font-weight: 500; font-size: 15px;
    padding: 6px 0; position: relative;
}
.tools-tab.is-active { color: var(--sl-ink-900); font-weight: 600; }
.tools-tab.is-active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -25px;
    height: 2px; background: var(--sl-turquoise-800);
}
.tools-tab:hover { color: var(--sl-ink-900); }

.tools-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
/* Wide, short "chip" banner matching the dark cards above it. */
.tools-trust {
    margin: 28px 0 0; padding: 20px 32px;
    background: var(--sl-dark); color: rgba(255,255,255,.82);
    border: 1px solid rgba(255,255,255,.04);
    border-radius: var(--sl-radius-lg);
    font-size: 17px; line-height: 1.5; text-align: center;
}
.tools-trust a { color: var(--sl-turquoise-400); font-weight: 600; }
.tools-trust a:hover { color: #fff; }
/* Lead line + bullet list inside the dark solution cards (Silver Lined AI). */
.tool-card__lead { color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.55; margin: 0 0 14px; }
.tool-card__list { list-style: none; margin: 0 0 18px; padding: 0; flex: 1; }
.tool-card__list li {
    position: relative; padding-left: 18px; margin-bottom: 8px;
    color: rgba(255,255,255,.66); font-size: 13px; line-height: 1.5;
}
.tool-card__list li::before {
    content: ""; position: absolute; left: 0; top: 7px;
    width: 6px; height: 6px; border-radius: 2px; background: var(--sl-turquoise-400);
}
.section--about { background: var(--sl-bg); }
.about-grid__lede { font-size: 19px; color: var(--sl-ink-500); margin: 0 0 24px; }

/* Two images side by side + text to the right (used by About and Publications).
   The image pair is an equal-height block, vertically centred with the text so
   the section reads as one tidy unit with no wasted white space. */
.media-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.media-split h2 { margin-bottom: 16px; }
.media-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.media-pair figure { margin: 0; }
.media-pair img {
    width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center;
    display: block; border-radius: var(--sl-radius);
    box-shadow: var(--sl-shadow); border: 1px solid var(--sl-border);
}
.media-pair--top img { object-position: center top; }
/* Square crop for the Publications pair: keeps the landscape Briefing cover's
   title readable (only ~9% side crop) while the portrait LinkedIn post shows its top. */
.media-pair--square img { aspect-ratio: 1 / 1; }
/* Publications variant: text left, images right and a touch larger. */
.media-split--imgright { grid-template-columns: 1fr 1.12fr; }
/* About: tighter gap under the name + a teal role line. */
.section--about .section__header { margin-bottom: 16px; }
/* Top-align the image pair with the text so it sits right under the heading (no centred gap). */
.section--about .media-split { align-items: start; }
.about-role { color: var(--sl-turquoise-800); font-weight: 700; font-size: 17px; letter-spacing: 0.01em; margin: 8px 0 0; }
@media (max-width: 880px) {
    .media-split { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   Contact page (dark, enterprise) - uses the shared design tokens
   ========================================================================== */
.section--contact-page {
    background:
        radial-gradient(680px 420px at 12% 0%, rgba(20,184,166,.16), transparent 60%),
        linear-gradient(160deg, var(--sl-dark-deep) 0%, #0B1220 100%);
    color: #fff; min-height: calc(100vh - 92px);
    display: flex; align-items: center; padding: 80px 0;
}
.contact-page { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; width: 100%; }
.contact-page__intro .eyebrow { color: var(--sl-turquoise-400); }
.contact-page__intro h1 { color: #fff; margin: 0 0 20px; }
.contact-page__intro p { color: rgba(255,255,255,.75); font-size: 18px; max-width: 46ch; }
.contact-page__intro .ticks { margin-top: 28px; }
.contact-page__intro .ticks li { color: rgba(255,255,255,.82); }
.contact-page__intro .ticks li::before { box-shadow: inset 0 0 0 4px var(--sl-dark-deep); }
/* Form sits directly on the dark section (white fields), not a white card. */
.contact-form .field__label { color: rgba(255,255,255,.92); }
/* Typed text in the contact fields is dark (white inputs on a dark section). */
.contact-form .field input, .contact-form .field textarea { color: var(--sl-ink-900); }
.contact-form .demo-form__legal { color: rgba(255,255,255,.55); }
.contact-form .demo-form__legal a { color: var(--sl-turquoise-400); }
.contact-form .demo-form__status.is-success { color: var(--sl-turquoise-400); }
.contact-form .demo-form__status.is-error { color: #FCA5A5; }
@media (max-width: 880px) { .contact-page { grid-template-columns: 1fr; gap: 36px; } }
.tool-card {
    background: var(--sl-dark);
    color: rgba(255,255,255,.85);
    border-radius: var(--sl-radius);
    padding: 28px;
    display: flex; flex-direction: column; min-height: 240px;
    transition: transform .2s var(--sl-ease), box-shadow .25s var(--sl-ease), background-color .2s var(--sl-ease);
    border: 1px solid rgba(255,255,255,.04);
}
.tool-card:hover {
    background: var(--sl-dark-deep);
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(15,30,58,.18);
}
.tool-card__title {
    color: #fff; font-family: var(--sl-font-sans); font-size: 19px; font-weight: 600;
    margin: 0 0 12px;
}
.tool-card__title::before {
    content: ""; display: block; width: 18px; height: 18px;
    background: var(--sl-turquoise-400); border-radius: 4px; margin-bottom: 16px;
    box-shadow: 0 0 0 3px rgba(94,234,212,.18);
}
.tool-card__body { color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.55; flex: 1; margin-bottom: 18px; }
.tool-card__cta {
    align-self: flex-start;
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.06); color: var(--sl-turquoise-400);
    transition: background-color .2s var(--sl-ease), transform .2s var(--sl-ease);
}
.tool-card__cta svg { width: 18px; height: 18px; }
.tool-card:hover .tool-card__cta { background: var(--sl-turquoise-700); color: #fff; transform: translateX(3px); }

@media (max-width: 960px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tools-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Section 5 - Demo form
   ========================================================================== */
.section--demo { background: var(--sl-bg-warm); }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.demo-grid__copy h2 { margin-bottom: 24px; }
.ticks { list-style: none; padding: 0; margin: 24px 0 0; }
.ticks li {
    position: relative; padding-left: 32px; margin-bottom: 14px;
    color: var(--sl-ink-700);
}
.ticks li::before {
    content: ""; position: absolute; left: 0; top: 6px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--sl-turquoise-800);
    box-shadow: inset 0 0 0 4px #fff;
}

.demo-form {
    background: #fff; border-radius: var(--sl-radius-lg);
    border: 1px solid var(--sl-border);
    padding: 36px;
    box-shadow: var(--sl-shadow);
}
.demo-form__row { margin-bottom: 18px; }
.demo-form__row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: block; }
.field--full { width: 100%; }
.field__label { display: block; font-size: 13px; font-weight: 600; color: var(--sl-ink-700); margin-bottom: 6px; }
.field .req { color: #C04040; margin-right: 2px; }
.field input, .field textarea {
    width: 100%; padding: 12px 14px;
    background: #fff; border: 1.5px solid var(--sl-ink-200); border-radius: 10px;
    transition: border-color .2s var(--sl-ease), box-shadow .2s var(--sl-ease);
}
.field input:focus, .field textarea:focus {
    outline: 0; border-color: var(--sl-turquoise-800);
    box-shadow: 0 0 0 4px rgba(14,124,123,.12);
}
.field textarea { resize: vertical; min-height: 84px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.demo-form__actions { margin-top: 12px; }
.demo-form__actions .btn { width: 100%; }
.demo-form__status { margin: 14px 0 0; font-size: 14px; min-height: 1.2em; }
.demo-form__status.is-success { color: var(--sl-turquoise-900); }
.demo-form__status.is-error { color: #B83A3A; }
.demo-form__legal { margin-top: 18px; font-size: 12px; color: var(--sl-ink-500); line-height: 1.5; }

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

/* ==========================================================================
   Section 6 - Validated excellence (press cards) - kept from earlier build
   ========================================================================== */
.section--validated { background: var(--sl-bg); }
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cards-grid--four { grid-template-columns: repeat(4, 1fr); }
.card {
    background: #fff; border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius); padding: 32px;
    display: flex; flex-direction: column;
    transition: transform .2s var(--sl-ease), box-shadow .25s var(--sl-ease), border-color .25s var(--sl-ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sl-shadow); border-color: var(--sl-turquoise-200); }
.card--press { padding: 0; overflow: hidden; }
.card__thumb {
    aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
    color: var(--sl-turquoise-800);
}
.card__thumb svg { width: 64px; height: 64px; opacity: .7; }
.card__thumb--press { background: linear-gradient(135deg, var(--sl-ink-900) 0%, #14474A 100%); color: #fff; }
.card__thumb--press span { font-family: var(--sl-font-display); font-weight: 800; font-size: 36px; letter-spacing: 0.08em; opacity: .7; }
.card__thumb--mockup { background: linear-gradient(135deg, var(--sl-bg-warm) 0%, var(--sl-bg-tint) 100%); }
.card__thumb--device { background: linear-gradient(135deg, var(--sl-turquoise-50) 0%, var(--sl-turquoise-100) 100%); }
.card__thumb--screen { background: linear-gradient(135deg, var(--sl-turquoise-50) 0%, var(--sl-bg-warm) 100%); }
.card--press .card__eyebrow { margin: 24px 24px 8px; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--sl-turquoise-800); font-weight: 700; }
.card--press .card__title { margin: 0 24px 28px; font-size: 19px; line-height: 1.35; }
@media (max-width: 980px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } .cards-grid--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards-grid, .cards-grid--four { grid-template-columns: 1fr; } }

/* ==========================================================================
   Section 7 - Resources cards
   ========================================================================== */
.section--resources { background: var(--sl-bg-soft); }
.card--resource { min-height: 360px; }
.card__icon { width: 44px; height: 44px; color: var(--sl-turquoise-800); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 24px; background: var(--sl-turquoise-100); border-radius: 10px; padding: 8px; }
.card__icon svg { width: 28px; height: 28px; }
.card__title { font-size: 22px; line-height: 1.25; margin-bottom: 16px; color: var(--sl-ink-900); }
.card__body { color: var(--sl-ink-500); flex: 1; }
.card__cta {
    align-self: flex-end; margin-top: 24px;
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--sl-turquoise-800);
    transition: background-color .2s var(--sl-ease), transform .2s var(--sl-ease);
}
.card__cta svg { width: 22px; height: 22px; }
.card:hover .card__cta { background: var(--sl-turquoise-100); transform: translateX(4px); }
.card__cta-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 12px; color: var(--sl-turquoise-800); }
.card__cta-link svg { width: 18px; height: 18px; transition: transform .2s var(--sl-ease); }
.card__cta-link:hover svg { transform: translateX(3px); }

/* ==========================================================================
   Section 8 - Final CTA
   ========================================================================== */
.section--final-cta {
    background:
        radial-gradient(700px 400px at 20% 0%, rgba(94,234,212,.18), transparent 60%),
        radial-gradient(800px 500px at 100% 100%, rgba(20,184,166,.22), transparent 60%),
        linear-gradient(135deg, var(--sl-ink-900) 0%, var(--sl-turquoise-800) 100%);
    color: #fff; padding: 96px 0;
    text-align: center;
}
.final-cta { display: block; }
.final-cta__copy { max-width: 760px; margin: 0 auto 32px; }
.final-cta h2 { color: #fff; margin-bottom: 16px; }
.final-cta p { color: rgba(255,255,255,.8); margin: 0 auto; max-width: 60ch; }
.final-cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   Footer (DB8: brand block + 5 cols + bottom bar)
   ========================================================================== */
.site-footer {
    background: var(--sl-bg);
    color: var(--sl-ink-700);
    padding: 72px 0 28px;
    border-top: 1px solid var(--sl-border);
}
.site-footer a { color: var(--sl-ink-700); }
.site-footer a:hover { color: var(--sl-turquoise-800); }
.site-footer__top {
    display: grid; grid-template-columns: 280px 1fr;
    gap: 56px; padding-bottom: 48px;
    border-bottom: 1px solid var(--sl-border);
}
/* Footer brand: text on the left, icon on the right (per request). */
.site-footer__brand-block .site-brand { margin-bottom: 16px; flex-direction: row-reverse; gap: 4px; }
.site-footer__address {
    font-style: normal; font-size: 14px; color: var(--sl-ink-500); line-height: 1.6;
    margin-bottom: 20px;
}
.site-footer__address a { color: var(--sl-turquoise-800); }
.site-footer__social { display: flex; gap: 12px; }
.site-footer__social a {
    display: inline-flex; width: 36px; height: 36px; border-radius: 8px;
    background: var(--sl-ink-100); color: var(--sl-ink-700);
    align-items: center; justify-content: center;
    transition: background-color .2s var(--sl-ease), color .2s var(--sl-ease);
}
.site-footer__social a:hover { background: var(--sl-turquoise-100); color: var(--sl-turquoise-800); }

.site-footer__cols {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.site-footer__heading {
    color: var(--sl-ink-900); font-family: var(--sl-font-sans); font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em; margin: 0 0 16px;
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li { margin-bottom: 10px; font-size: 14px; }

.site-footer__bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
    padding-top: 24px; font-size: 13px; color: var(--sl-ink-500);
}
.site-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; }

@media (max-width: 1100px) { .site-footer__cols { grid-template-columns: repeat(3, 1fr); row-gap: 32px; } }
@media (max-width: 820px) {
    .site-footer__top { grid-template-columns: 1fr; gap: 40px; }
    .site-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .site-footer__cols { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Blog / post list
   ========================================================================== */
.page-header { margin-bottom: 32px; }
.post-list { display: grid; gap: 32px; }
.post-card { border-bottom: 1px solid var(--sl-border); padding-bottom: 28px; }
.post-card__title { font-size: 26px; margin: 8px 0; }
.post-card__title a { color: var(--sl-ink-900); }
.post-card__title a:hover { color: var(--sl-turquoise-800); }
.post-card__meta { font-size: 13px; color: var(--sl-ink-500); margin-bottom: 8px; }
.post-card__excerpt p:last-child { margin-bottom: 0; }
.page-article__featured { border-radius: var(--sl-radius); overflow: hidden; margin-bottom: 24px; }
.pagination { margin-top: 40px; display: flex; gap: 8px; }
.pagination .page-numbers { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--sl-border); }
.pagination .current { background: var(--sl-turquoise-800); color: #fff; border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
    html { scroll-behavior: auto; }
}