:root {
    --bg: #f7f8f9;
    --bg2: #ffffff;
    --text: #0b0d12;
    --muted: #5b6472;

    --bg-main: #f3f4f6;
    --bg-panel: #ffffff;
    --text-main: #0b0d12;
    --text-muted: #5f6775;

    --accent-green: #2f7a5f;
    --accent-green-soft: #e7f3ee;

    --accent-lime: #d7ff2f;
    --accent-lime-strong: #c7f000;
    --accent-lime-soft: #f4ffd9;

    --accent-orange: #ff5a1f;
    --accent-orange-soft: #ffe9e1;

    --glass: rgba(255, 255, 255, .72);
    --glass2: rgba(255, 255, 255, .55);
    --border: rgba(15, 23, 42, .10);
    --border2: rgba(15, 23, 42, .08);
    --shadow: 0 18px 50px rgba(15, 23, 42, .10);
    --shadow2: 0 12px 30px rgba(15, 23, 42, .10);

    --r: 16px;
    --r2: 22px;
    --max: 1120px;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    letter-spacing: -0.01em;

    /* base light tech gradient 
    background:
        radial-gradient(900px 520px at 22% -10%, rgba(47, 122, 95, .12), transparent 60%),
        radial-gradient(700px 420px at 85% 10%, rgba(47, 122, 95, .08), transparent 55%),
        linear-gradient(180deg, #f6f8f7, #ffffff);
*/
    background:
        radial-gradient(#ffffff, #ededed);
}


/* dotted modern grid
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;

    background-image:
        radial-gradient(rgba(15, 23, 42, .18) 1px, transparent 1px);
    background-size: 24px 24px;

    opacity: .71;
}
 */

/* grid dots v2 final  */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .35;

    background-image:
        radial-gradient(circle at center, rgba(15, 23, 42, .18) 0px, rgba(15, 23, 42, .18) 1.5px, transparent 2px);
    background-size: 31px 31px;
}


/* star intersections */
/* star intersections (cross style, not dots) */
/* wavy physical gradient overlay (subtle, Propy-like) */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    z-index: 0;

    background:
        /* long soft waves */
        radial-gradient(1200px 520px at 10% 18%, rgba(215, 255, 47, .22), transparent 62%),
        radial-gradient(900px 520px at 92% 14%, rgba(215, 255, 47, .14), transparent 60%),
        radial-gradient(1000px 520px at 30% 92%, rgba(255, 90, 31, .10), transparent 62%),

        /* “wavy shadow” bands */
        radial-gradient(700px 260px at 22% 40%, rgba(15, 23, 42, .10), transparent 70%),
        radial-gradient(760px 280px at 70% 55%, rgba(15, 23, 42, .08), transparent 72%),

        /* subtle grain to make it feel physical */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");

    mix-blend-mode: multiply;
}

/* ensure your content stays above overlays */
.wrap,
.navFloat {
    position: relative;
    z-index: 2;
}

/* soft grain + blur halos v1
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(600px 320px at 70% 25%, rgba(47, 122, 95, .10), transparent 70%),
        radial-gradient(500px 260px at 30% 75%, rgba(255, 138, 61, .08), transparent 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");

    opacity: .08;
    mix-blend-mode: multiply;
}
     */

a {
    color: inherit;
    text-decoration: none;
}

.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 24px;
    position: relative;
}

.topPad {
    padding-top: 96px;
}

/* liquid glass nav */
.navFloat {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    width: min(var(--max), calc(100% - 24px));
}

.navPill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--glass), var(--glass2));
    border: 1px solid var(--border2);
    box-shadow: var(--shadow2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
}


.grad-lime {
    background: linear-gradient(90deg, #427921 0%, #c7f001 74%, #c8f103 72%, #476f19 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.logo {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background:
        radial-gradient(circle at 30% 30%, rgba(47, 122, 95, .22), rgba(255, 255, 255, .35)),
        radial-gradient(circle at 70% 70%, rgba(255, 138, 61, .18), rgba(255, 255, 255, .0));
    border: 1px solid var(--border2);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .10);
}

.links {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--muted);
}

.links a {
    padding: 8px 10px;
    border-radius: 999px;
    transition: background .15s ease, color .15s ease;
}

.links a:hover {
    color: var(--text);
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(15, 23, 42, .06);
    padding: 7px 9px;
    /* keep size stable */
}

@media (max-width:760px) {
    .links {
        display: none;
    }

    .dbExpectedText {
        white-space: normal;
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 15px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-weight: 650;
    font-size: 13px;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
    white-space: nowrap;
}

/* old button primary 
.btnPrimary {
    background: var(--accent-green);
    color: #fff;
    border-color: rgba(47, 122, 95, .25);
    box-shadow: 0 12px 26px rgba(47, 122, 95, .22);
}
    */



.btnPrimary:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #cfff3a, #a6e52e);
    box-shadow: 0 16px 36px rgba(158, 220, 42, .45);
}


.btnPrimary {
    background: linear-gradient(180deg, #d7ff2f, #c7f000);
    color: #111;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow:
        0 12px 28px rgba(199, 240, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .6);
}



.btnGhost {
    background: rgba(255, 255, 255, .70);
    color: var(--text);
    border-color: rgba(15, 23, 42, .10);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.btnGhost:hover {
    border-color: rgba(158, 220, 42, .35);
    box-shadow: 0 10px 24px rgba(158, 220, 42, .18);
}

/* HERO */
.hero {
    padding: 34px 0 26px;
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    /* 62/38 */
    gap: 28px;
    align-items: start;
}

@media (max-width: 980px) {
    .hero {
        grid-template-columns: 1fr;
    }

    .sub {
        margin-bottom: 40px;
    }
}

.kicker {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .70);
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--muted);
    font-size: 13px;
    width: fit-content;
}

.kdot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--accent-green);
    box-shadow: 0 0 0 4px rgba(47, 122, 95, .16);
}

h1 {
    margin: 14px 0 0;
    font-size: 58px;
    line-height: 1.03;
    letter-spacing: -0.05em;
    max-width: 18ch;
    font-weight: 500;
}

@media (max-width:560px) {
    h1 {
        font-size: 44px;
    }
}

.sub {
    margin-top: 22px;
    margin-bottom: 22px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.6;
    max-width: 64ch;
}

.authority {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: rgba(11, 13, 18, .88);
    font-size: 14px;
    line-height: 1.55;
}

.authority b {
    color: var(--text);
    font-weight: 750;
}

.pin {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: rgba(47, 122, 95, .10);
    border: 1px solid rgba(47, 122, 95, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-green);
    font-weight: 900;
    flex: 0 0 auto;
}

.ctaRow {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    align-items: center;
}

.microTrust {
    margin-top: 10px;
    color: var(--muted);
    font-size: 13px;
}

.microTrust span {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .60);
    border: 1px solid rgba(15, 23, 42, .08);
    margin-right: 8px;
}

/* Right visual */
.visual {
    position: relative;
}

.card {
    border-radius: var(--r2);
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .72);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 16px;
    overflow: hidden;
    position: relative;
}

.card::before {
    content: "";
    position: absolute;
    inset: -60px -60px auto auto;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle at 71% 72%, rgba(47, 122, 95, .18), transparent 59%);
    pointer-events: none;
}

.card::after {
    content: "";
    position: absolute;
    inset: auto auto -70px -70px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle at 60% 40%, rgba(255, 138, 61, .16), transparent 62%);
    pointer-events: none;
}

.cardTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.cardTitle h3 {
    margin: 0;
    font-size: 14px;
    letter-spacing: -0.01em;
}

.pill {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .70);
    color: var(--muted);
    white-space: nowrap;
}

.pillGreen {
    background: var(--accent-green-soft);
    border-color: rgba(47, 122, 95, .18);
    color: #1f5e46;
    font-weight: 650;
}

.pillGreenAdrien {
    background: var(--accent-lime-soft);
    border-color: var(--accent-green);
    color: var(--accent-green);
    font-weight: 650;
}

.pillOrange {
    background: var(--accent-orange-soft);
    border-color: rgba(255, 138, 61, .22);
    color: #a64a14;
    font-weight: 650;
}

.rows {
    display: grid;
    gap: 10px;
    position: relative;
    z-index: 2;
}

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .70);
    border: 1px solid rgba(15, 23, 42, .08);
}

.row strong {
    font-size: 12px;
    color: rgba(11, 13, 18, .85);
    font-weight: 750;
}

.row span {
    font-size: 12px;
    color: var(--muted);
    text-align: right;
}

.divider {
    height: 1px;
    background: rgba(15, 23, 42, .10);
    margin: 10px 0;
}

.move {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(15, 23, 42, .08);
}

.move b {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: rgba(11, 13, 18, .92);
    margin-bottom: 6px;
}

.move p {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--muted);
    max-width: 34ch;
}

.badgeFloat {
    position: absolute;
    border-radius: 999px;
    padding: 8px 10px;
    font-size: 12px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(15, 23, 42, .10);
    box-shadow: 0 12px 26px rgba(15, 23, 42, .10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: rgba(11, 13, 18, .88);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 5;
}

.badgeFloat i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--accent-green);
    box-shadow: 0 0 0 4px rgba(47, 122, 95, .14);
}

.badgeFloat.orange i {
    background: var(--accent-orange);
    box-shadow: 0 0 0 4px rgba(255, 138, 61, .14);
}

.badgeFloat.gray i {
    background: rgba(15, 23, 42, .35);
    box-shadow: 0 0 0 4px rgba(15, 23, 42, .08);
}

.b1 {
    top: -10px;
    right: 6px;
}

.b2 {
    top: 86px;
    left: -10px;
}

.b3 {
    bottom: -12px;
    right: 28px;
}

@media (max-width:980px) {
    .visual {
        margin-top: 6px;
    }

    .b2 {
        left: 6px;
    }
}

/* subtle footer hint */
.below {
    margin-top: 18px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
    max-width: 78ch;
}

.below b {
    color: var(--text);
}

/* hero centered like Fluar */
.heroCenter {
    padding: 56px 0 12px;
}

.heroInner {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.heroCenter h1 {
    max-width: 22ch;
    margin: 0 auto;
}

.heroRowCenter {
    justify-content: center;
}

.helperCenter {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    font-style: italic;
    color: var(--muted);
}

/* secondary CTA */
.btn.ghost {
    background: rgba(255, 255, 255, .75);
    color: var(--text);
    border: 1px solid var(--border2);
    box-shadow: none;
}

.btn.ghost:hover {
    background: rgba(255, 255, 255, .92);
}

/* image under hero */
.heroMedia {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

.heroShot {
    width: min(1080px, 100%);
    border-radius: 22px;
    border: 1px solid var(--border2);
    box-shadow: var(--shadow);
    background: rgba(255, 255, 255, .7);
}

/* anchor line under hero (quiet authority) */
.anchorLine {
    max-width: 920px;
    margin: 18px auto 0;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

.anchorMark {
    display: inline-block;
    margin-right: 6px;
    opacity: .7;
}

/* reduce overall density a bit */
.section {
    padding: 36px 0;
}

p,
.bullets {
    font-size: 15px;
    line-height: 1.75;
}

/* FORCE hero to be centered (override the 62/38 grid) */
.hero.heroCenter {
    display: block;
    /* kill the 2-col grid */
    padding: 56px 0 22px;
}

.heroInner {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

/* ensure heading/sub are centered */
.heroInner h1 {
    margin: 0 auto;
}

.heroInner .sub {
    margin-left: auto;
    margin-right: auto;
}

/* you were using .heroRow but it wasn't defined */
.heroRow {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
}

/* your primary CTA in hero must look like primary */
.heroInner .btn:not(.btnPrimary):not(.btnGhost) {
    background: var(--accent-green);
    color: #fff;
    border-color: rgba(47, 122, 95, .25);
    box-shadow: 0 12px 26px rgba(47, 122, 95, .22);
}

/* your ghost button selector was ".btn.ghost" but your class is "btn ghost" */
.btn.ghost {
    background: rgba(255, 255, 255, .70);
    color: var(--text);
    border: 1px solid rgba(15, 23, 42, .10);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.btn.ghost:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .10);
    border-color: rgba(47, 122, 95, .22);
}

/* Daily Brief card under hero */
.heroMedia {
    margin-top: 26px;
    display: flex;
    justify-content: center;
}

.heroMedia .card {
    width: min(760px, 100%);
}

/* --- Propy-style top pill --- */
/* Propy-style pill (more subtle + glass) */
.heroTopPill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;

    background: rgba(255, 255, 255, .58);
    border: 1px solid rgba(15, 23, 42, .06);

    box-shadow:
        0 10px 26px rgba(15, 23, 42, .06),
        inset 0 1px 0 rgba(255, 255, 255, .70);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    color: rgba(11, 13, 18, .72);
    font-size: 13px;
    letter-spacing: -0.01em;
}

/* little spark chip */
.heroTopPill .spark {
    width: 22px;
    height: 22px;
    border-radius: 999px;

    display: grid;
    place-items: center;

    background: rgba(215, 255, 47, .14);
    /* lime soft */
    border: 1px solid rgba(15, 23, 42, .06);

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
}

/* the actual ✦ (or icon) inside */
.heroTopPill .spark svg,
.heroTopPill .spark span {
    display: block;
    width: 12px;
    height: 12px;
    color: rgba(11, 13, 18, .78);
}

/* bold part inside pill (discrete) */
.heroTopPill b {
    color: rgba(11, 13, 18, .88);
    font-weight: 750;
}

.sparkGreen {
    color: var(--accent-lime-strong);
}



/* --- Tiny floating cards around Daily Brief (optional but nice) --- */
.heroFloat {
    position: absolute;
    border-radius: 999px;
    padding: 8px 10px;
    font-size: 12px;
    background: rgba(255, 255, 255, .80);
    border: 1px solid rgba(15, 23, 42, .10);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: rgba(11, 13, 18, .86);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 6;
}

.heroFloat i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--accent-green);
    box-shadow: 0 0 0 4px rgba(47, 122, 95, .14);
}

.heroFloat.orange i {
    background: var(--accent-orange);
    box-shadow: 0 0 0 4px rgba(255, 138, 61, .14);
}

.heroFloat.gray i {
    background: rgba(15, 23, 42, .35);
    box-shadow: 0 0 0 4px rgba(15, 23, 42, .08);
}

.heroMedia {
    position: relative;
    /* so floats can attach */
}

/* positions for the floats */
.f1 {
    top: -12px;
    right: 18px;
}

.f2 {
    top: 86px;
    left: 14px;
}

.f3 {
    bottom: -12px;
    right: 28px;
}

/* --- Micro tags row INSIDE the Daily Brief card --- */
.tagRow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.tag {
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .72);
    color: rgba(11, 13, 18, .78);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
}

.tag strong {
    color: rgba(11, 13, 18, .92);
    font-weight: 750;
}

.tag.green {
    background: rgba(47, 122, 95, .10);
    border-color: rgba(47, 122, 95, .18);
    color: #1f5e46;
}

.tag.orange {
    background: rgba(255, 138, 61, .12);
    border-color: rgba(255, 138, 61, .22);
    color: #a64a14;
}

/* small visual polish inside card rows */
.row {
    box-shadow: 0 10px 18px rgba(15, 23, 42, .05);
}

.section {
    padding: 56px 0;
}

.sectionInner {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.h2 {
    margin: 0;
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

@media (max-width:560px) {
    .h2 {
        font-size: 26px;
    }
}

.p {
    margin: 14px auto 0;
    max-width: 70ch;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.75;
}

.mechanism {
    margin: 22px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;

    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mCol {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.mPill {
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .78);
    color: rgba(11, 13, 18, .78);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .05);
}

.mArrow {
    color: rgba(11, 13, 18, .35);
    font-size: 18px;
    user-select: none;
}

.mCore,
.mOut {
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .05);
    min-width: 190px;
}

.mCore {
    border-color: rgba(47, 122, 95, .18);
    background: rgba(47, 122, 95, .08);
}

.mCoreTitle,
.mOutTitle {
    font-size: 13px;
    font-weight: 800;
    color: rgba(11, 13, 18, .90);
}

.mCoreSub,
.mOutSub {
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted);
}

.microPunch {
    margin-top: 14px;
    font-size: 13px;
    color: rgba(11, 13, 18, .72);
}

/* =========================
   Vision page additions
   (append to your styles.css)
========================= */

.visionHero {
    padding: 56px 0 18px;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.visionH1 {
    margin: 14px 0 0;
    font-size: 60px;
    line-height: 1.05;
    letter-spacing: -0.05em;
}

@media (max-width:560px) {
    .visionH1 {
        font-size: 40px;
    }
}

.visionSub {
    margin: 12px auto 0;
    max-width: 72ch;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.65;
}

.microUnderCta {
    margin-top: 10px;
    color: rgba(11, 13, 18, .70);
    font-size: 13px;
}

.heroTopPill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .70);
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--muted);
    font-size: 13px;
}

.heroTopPill .spark {
    width: 22px;
    height: 22px;
    border-radius: 999px;

    display: grid;
    place-items: center;

    background: rgba(215, 255, 47, .14);
    /* lime soft */
    border: 1px solid rgba(15, 23, 42, .06);

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
}


.sparkGreen {
    color: var(--accent-green);
}

.visionSection {
    padding: 26px 0;
}

.visionCard {
    max-width: 920px;
    margin: 0 auto;
    border-radius: 22px;
    border: 1px solid rgba(15, 23, 42, .08);
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.visionCard::before {
    content: "";
    position: absolute;
    inset: -60px -60px auto auto;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle at 30% 30%, rgba(47, 122, 95, .14), transparent 60%);
    pointer-events: none;
}

.visionCard::after {
    content: "";
    position: absolute;
    inset: auto auto -80px -80px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle at 60% 40%, rgba(255, 138, 61, .12), transparent 62%);
    pointer-events: none;
}

.visionLead {
    margin: 0;
    color: rgba(11, 13, 18, .80);
    font-size: 16px;
    line-height: 1.85;
    position: relative;
    z-index: 1;
}

.visionBody {
    margin: 0;
    color: rgba(11, 13, 18, .78);
    font-size: 15px;
    line-height: 1.85;
    position: relative;
    z-index: 1;
}

.visionTitlePill {
    margin: 0 0 10px;
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 750;
    color: rgba(11, 13, 18, .78);
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(15, 23, 42, .10);
    position: relative;
    z-index: 1;
}

.visionGrid {
    max-width: 920px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 920px) {
    .visionGrid {
        grid-template-columns: 1fr;
    }
}

.visionMechanism {
    margin-top: 16px;
}

.visionClosing {
    padding: 24px;
}

.visionClosingLine {
    margin: 0;
    font-size: 16px;
    line-height: 1.85;
    color: rgba(11, 13, 18, .84);
    position: relative;
    z-index: 1;
    font-weight: 650;
}

.visionCta {
    padding: 38px 0 10px;
}

.visionCtaCard {
    max-width: 920px;
    margin: 0 auto;
    border-radius: 26px;
    border: 1px solid rgba(15, 23, 42, .08);
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 20px 60px rgba(15, 23, 42, .10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 22px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.visionCtaH2 {
    margin: 0;
    font-size: 24px;
    letter-spacing: -0.02em;
}

.visionCtaP {
    margin: 10px auto 0;
    max-width: 72ch;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}

/* Gradient texte vert Custodian */

.gradGreen {
    background: linear-gradient(90deg,
            #2f7a5f 0%,
            #5fae8e 40%,
            #9ad9b8 70%,
            #2f7a5f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================
   Daily Brief v2 (Hero)
   (append-only)
========================= */

.dbCard {
    padding: 16px 16px 14px;
}

/* header: Daily Brief + verdict pill */
.dbHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}

.dbTitle {
    margin: 0;
    font-size: 17px;
    letter-spacing: -0.01em;
    font-weight: 500;
}

/* tighter meta row */
.dbMeta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}

/* single comparison line */
.dbLine {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .70);
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 10px 18px rgba(15, 23, 42, .05);
    position: relative;
    z-index: 2;
}

.dbLabel {
    font-size: 12px;
    color: rgba(11, 13, 18, .78);
    font-weight: 700;
}

.dbValue {
    font-size: 12px;
    color: rgba(11, 13, 18, .72);
    font-weight: 500;
}

/* divider */
.dbDivider {
    height: 1px;
    background: rgba(15, 23, 42, .10);
    margin: 12px 0;
    position: relative;
    z-index: 2;
}

/* expected centered, no overlap */
.dbExpected {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
    margin-top: 10px;
    margin-bottom: 0px;
}

/* next move centered, readable */
.dbMove {
    text-align: center;
    padding: 12px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(15, 23, 42, .08);
    position: relative;
    z-index: 2;
}

.dbMove b {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: rgba(11, 13, 18, .92);
    margin-bottom: 6px;
    font-weight: 600;
}

.dbMove p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(11, 13, 18, .72);
    max-width: 56ch;
    margin-left: auto;
    margin-right: auto;
}

/* kill the overlapping hero floats for this hero section */
.heroFloat {
    display: none;
}

/* Daily Brief — CTA inside Next move */
.dbActions {
    margin-top: 14px;
    display: grid;
    gap: 10px;
    justify-items: center;
}

.dbExpectedPill {
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 999px;
}


.dbApplyBtn:hover {
    transform: translateY(-1px);
    box-shadow:
        0 16px 36px rgba(158, 220, 42, .40),
        inset 0 1px 0 rgba(255, 255, 255, .70);
}

.dbApplyBtn:active {
    transform: translateY(0px);
    filter: brightness(.98);
}

/* Expected impact — lime signal (not a button) */
.dbExpectedText {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 6px 10px;
    border-radius: 999px;

    background: rgba(215, 255, 47, .22);
    border: 1px solid rgba(199, 240, 0, .55);

    font-size: 12px;
    font-weight: 750;
    letter-spacing: -0.01em;

    color: #2f5510;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
}

/* small dot to make it feel like a signal, not UI chrome */
.dbExpectedText::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent-lime-strong);
    box-shadow: 0 0 0 4px rgba(199, 240, 0, .18);
}

/* Actions area under Next move */
.dbActions {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Apply button — secondary, NOT hero CTA */
.dbApplyBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 14px;
    border-radius: 999px;

    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(15, 23, 42, .12);

    font-size: 13px;
    font-weight: 700;
    color: rgba(11, 13, 18, .78);

    box-shadow: 0 10px 18px rgba(15, 23, 42, .06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    cursor: default;
    user-select: none;
    pointer-events: none;
}

/* =========================
   Who is it for? (Section)
   append-only
========================= */

/* Match HERO spacing: pill -> heading */
.sectionInner .heroTopPill {
    margin-bottom: 14px;
}

/* 3-up grid like calm cards */
.whoGrid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

@media (max-width: 920px) {
    .whoGrid {
        grid-template-columns: 1fr;
    }
}

.whoCard {
    text-align: left;
    padding: 16px 16px;
    border-radius: 22px;

    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(15, 23, 42, .08);

    box-shadow: 0 18px 50px rgba(15, 23, 42, .06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    position: relative;
    overflow: hidden;
}

/* subtle internal glow so it feels “producty” */
.whoCard::before {
    content: "";
    position: absolute;
    inset: -60px -60px auto auto;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle at 70% 70%, rgba(215, 255, 47, .18), transparent 62%);
    pointer-events: none;
    opacity: .6;
}

.whoTitle {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: rgba(11, 13, 18, .90);
}

.whoBody {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(11, 13, 18, .72);
}


/* =========================
   Who — section
   append at end of styles.css
========================= */

.whoGrid {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 980px) {
    .whoGrid {
        grid-template-columns: 1fr;
    }
}

.whoCard {
    border-radius: 22px;
    padding: 18px 18px 16px;

    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(15, 23, 42, .08);

    box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    position: relative;
    overflow: hidden;
}

/* soft field glow like your other cards */
.whoCard::before {
    content: "";
    position: absolute;
    inset: -60px -60px auto auto;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle at 30% 30%, rgba(47, 122, 95, .12), transparent 60%);
    pointer-events: none;
}

.whoCard::after {
    content: "";
    position: absolute;
    inset: auto auto -80px -80px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle at 60% 40%, rgba(215, 255, 47, .10), transparent 62%);
    pointer-events: none;
}

.whoTitle {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: rgba(11, 13, 18, .92);
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
}

.whoBody {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(11, 13, 18, .72);
    position: relative;
    z-index: 1;
}

/* spacing fix: pill → h2 like hero spacing */
#who .heroTopPill {
    margin-bottom: 14px;
}

/* =========================
   FAQ (no-JS accordion)
   append-only
========================= */

.faqSection {
    padding: 64px 0;
}

.faqInner {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.faqH2 {
    margin: 0;
    font-size: 44px;
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 650;
}

@media (max-width: 560px) {
    .faqH2 {
        font-size: 30px;
    }
}

.faqSub {
    margin: 14px auto 0;
    max-width: 70ch;
    color: rgba(11, 13, 18, .65);
    font-size: 18px;
    line-height: 1.7;
}

.faqList {
    margin-top: 30px;
    text-align: left;

    border-radius: 22px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    overflow: hidden;
}

.faqItem {
    margin: 0;
    border-top: 1px solid rgba(15, 23, 42, .10);
}

.faqItem:first-child {
    border-top: 0;
}

.faqQ {
    list-style: none;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 22px 22px;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -0.02em;

    color: rgba(11, 13, 18, .92);
    background: transparent;
}

@media (max-width: 560px) {
    .faqQ {
        font-size: 18px;
        padding: 18px 16px;
    }
}

.faqQ::-webkit-details-marker {
    display: none;
}

.faqIcon {
    width: 30px;
    height: 30px;
    border-radius: 999px;

    flex: 0 0 auto;
    position: relative;

    background: rgba(255, 255, 255, .70);
    border: 1px solid rgba(15, 23, 42, .12);
    box-shadow: 0 10px 18px rgba(15, 23, 42, .06);

    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.faqIcon::before,
.faqIcon::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: rgba(11, 13, 18, .70);
}

.faqIcon::after {
    transform: rotate(90deg);
}

.faqA {
    padding: 0 22px 22px 22px;
    color: rgba(11, 13, 18, .72);
    font-size: 16px;
    line-height: 1.85;
    text-align: left;
}

@media (max-width: 560px) {
    .faqA {
        padding: 0 16px 18px 16px;
    }
}

/* open state */
.faqItem[open] .faqIcon {
    transform: rotate(180deg);
    border-color: rgba(199, 240, 0, .35);
    box-shadow: 0 14px 24px rgba(15, 23, 42, .08);
}

.faqItem[open] .faqIcon::after {
    transform: rotate(0deg);
    opacity: 0;
}

/* subtle hover (still classy) */
.faqItem:hover .faqIcon {
    border-color: rgba(199, 240, 0, .25);
}

/* keyboard focus */
.faqQ:focus-visible {
    outline: 3px solid rgba(199, 240, 0, .35);
    outline-offset: 6px;
    border-radius: 16px;
}

/* =========================
   FAQ v2 — Fluar-like (no JS)
   append-only
========================= */

.faqSection {
    padding: 72px 0;
}

.faqInner {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.faqH2 {
    margin: 0;
    font-size: 44px;
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 700;
    color: rgba(11, 13, 18, .92);
}

@media (max-width:560px) {
    .faqH2 {
        font-size: 30px;
    }
}

.faqSub {
    margin: 14px auto 0;
    max-width: 70ch;
    color: rgba(11, 13, 18, .62);
    font-size: 18px;
    line-height: 1.7;
}

.faqCard {
    margin: 28px auto 0;
    max-width: 920px;
    text-align: left;

    border-radius: 24px;

    /* glass base */
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .78),
            rgba(255, 255, 255, .58));

    border: 1px solid rgba(255, 255, 255, .65);

    /* liquid depth */
    box-shadow:
        0 30px 80px rgba(15, 23, 42, .12),
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -1px 0 rgba(255, 255, 255, .35);

    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);

    position: relative;
    overflow: hidden;
}

.faqCard::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(1200px 400px at 10% -10%,
            rgba(199, 240, 0, .10),
            transparent 60%);
}

.faqItem {
    margin: 0;
    border-top: 1px solid rgba(15, 23, 42, .08);
    background: linear-gradient(180deg,
            rgba(255, 255, 255, .35),
            rgba(255, 255, 255, .15));
}

.faqItem:first-child {
    border-top: 0;
}

.faqQ {
    list-style: none;
    cursor: pointer;
    padding: 22px 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    background: transparent;
    transition: background .15s ease;
}

@media (max-width:560px) {
    .faqQ {
        padding: 18px 16px;
    }
}

.faqQ::-webkit-details-marker {
    display: none;
}

.faqQText {
    font-size: 17px;
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: rgba(11, 13, 18, .92);
}

@media (max-width:560px) {
    .faqQText {
        font-size: 17px;
    }
}

/* right chevron */
.faqChevron {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    flex: 0 0 auto;
    position: relative;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .9),
            rgba(255, 255, 255, .6));

    border: 1px solid rgba(255, 255, 255, .9);

    box-shadow:
        0 12px 24px rgba(15, 23, 42, .10),
        inset 0 1px 0 rgba(255, 255, 255, .95);

    backdrop-filter: blur(6px);
}

.faqChevron::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(11, 13, 18, .60);
    border-bottom: 2px solid rgba(11, 13, 18, .60);
    transform: rotate(45deg);
}

/* answer wrapper with smooth-ish open animation */
.faqAWrap {
    padding: 0 22px 20px 22px;
}

@media (max-width:560px) {
    .faqAWrap {
        padding: 0 16px 16px 16px;
    }
}

.faqA {
    color: rgba(11, 13, 18, .70);
    font-size: 16px;
    line-height: 1.85;
    text-align: left;

    /* Fluar-like: slightly indented and calmer */
    max-width: 86ch;
}

/* hover = subtle */
.faqItem:hover .faqQ {
    background: rgba(255, 255, 255, .55);
}

/* open state */
.faqItem[open] .faqChevron {
    transform: rotate(180deg);
    border-color: rgba(199, 240, 0, .35);
    box-shadow: 0 14px 24px rgba(15, 23, 42, .08);
}

/* accessibility focus */
.faqQ:focus-visible {
    outline: 3px solid rgba(199, 240, 0, .35);
    outline-offset: 6px;
    border-radius: 16px;
}

/* Optional: reduce motion */
@media (prefers-reduced-motion: reduce) {
    .faqChevron {
        transition: none;
    }

    .faqQ {
        transition: none;
    }
}

.subheadertop {
    margin-bottom: 0;
    margin-top: 0;
    font-size: 18px !important;
}

.subheaderbottom {
    margin-top: 8px;
    font-size: 18px !important;
}