:root {
    --paper: #f4f0e8;
    --ink: #1e2940;
    --ink2: #293c5b;
    --muted: #777873;
    --line: #d8d4ca;
    --saffron: #edaa36;
    --coral: #e6815d;
    --serif: Georgia, 'Times New Roman', serif;
    --sans: 'DM Sans', Arial, sans-serif;
    --display: Manrope, 'DM Sans', sans-serif;
    --mono: 'DM Mono', monospace
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    -webkit-font-smoothing: antialiased
}

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

button {
    font: inherit
}

.container {
    width: min(1210px, calc(100% - 88px));
    margin: auto
}

.site-header {
    height: 78px;
    padding: 0 max(calc((100vw - 1210px)/2), 44px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(30, 41, 64, .1);
    position: relative;
    z-index: 10;
    background: var(--paper)
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px
}

.brand-mark {
    font: 800 19px var(--display);
    letter-spacing: -3px;
    width: 33px;
    height: 33px;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative
}

.brand-mark span {
    color: #d77f4f
}

.brand-name {
    font: 700 13px var(--display);
    letter-spacing: -.4px
}

.brand-name span {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .5px;
    color: #88877f
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 36px;
    font-size: 12px;
    font-weight: 600
}

.main-nav>a:not(.nav-cta) {
    transition: color .2s
}

.main-nav>a:not(.nav-cta):hover {
    color: #cf794d
}

.nav-cta {
    padding: 12px 16px;
    background: var(--ink);
    color: #fff;
    border-radius: 2px
}

.nav-cta span {
    color: #efb84c;
    padding-left: 12px
}

.menu-toggle {
    display: none
}

.hero-wrap {
    background: #202f4b;
    color: #faf6ed;
    position: relative;
    overflow: hidden
}

.hero-wrap:before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 77% 47%, rgba(54, 77, 113, .62), transparent 50%), linear-gradient(105deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
    background-size: auto, 64px 64px;
    pointer-events: none
}

.hero {
    min-height: 660px;
    display: grid;
    grid-template-columns: 47% 53%;
    align-items: center;
    position: relative;
    padding: 48px 0 28px
}

.hero-copy {
    align-self: center;
    position: relative;
    z-index: 2;
    padding-bottom: 22px
}

.eyebrow,
.kicker,
.section-marker,
.hero-bottom,
.art-topline,
.art-caption,
.hero-side-note,
.dim-number,
.insight-id,
.insight-tag,
.insight-bottom,
.fine-print,
.graph-label,
.graph-card small,
.graph-card>span:nth-child(2),
.graph-coord,
.footer-bottom {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.15px
}

.eyebrow {
    display: flex;
    gap: 10px;
    align-items: center;
    color: #d8d4ca;
    text-transform: uppercase
}

.live-dot,
.insight-tag span,
.graph-card-dot {
    width: 6px;
    height: 6px;
    background: #efae3c;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 4px rgba(239, 174, 60, .12)
}

h1,
h2,
h3,
p {
    margin-top: 0
}

.hero h1 {
    font: 500 clamp(54px, 6vw, 83px)/.99 var(--display);
    letter-spacing: -5.2px;
    margin: 29px 0 22px
}

.hero h1 em,
.section-heading h2 em,
.manifesto h2 em,
.feature-copy h2 em,
.insight-grid h2 em,
.join-inner h2 em,
.page-hero h1 em {
    font: italic 400 1.03em var(--serif);
    letter-spacing: -4px;
    color: #f3bd60
}

.hero-lede {
    color: #d6d7da;
    max-width: 405px;
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 28px
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap
}

.button {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    padding: 15px 18px;
    display: inline-flex;
    align-items: center;
    gap: 25px;
    transition: transform .25s, background .25s
}

.button:hover {
    transform: translateY(-3px)
}

.button-dark {
    background: #f4b442;
    color: #202c45
}

.button-dark:hover {
    background: #ffd078
}

.button-dark span {
    font-size: 16px
}

.text-link {
    font-size: 10px;
    color: #e0e0dc
}

.text-link span {
    color: #e8aa3d;
    padding-left: 8px;
    font-size: 14px
}

.hero-note {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 58px;
    color: #b7bdc8;
    font-size: 10px
}

.note-line {
    width: 30px;
    height: 1px;
    background: #df9d3a
}

.hero-art {
    align-self: stretch;
    min-height: 590px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -10px
}

.art-topline {
    position: absolute;
    left: 35px;
    right: 4px;
    top: 26px;
    display: flex;
    justify-content: space-between;
    color: #9ba5b5;
    font-size: 10px
}

.atlas-art {
    width: min(100%, 580px);
    height: auto;
    overflow: visible
}

.art-node {
    cursor: pointer;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .3s
}

.art-node>circle:first-child {
    fill: #253959;
    stroke: #e9a843;
    stroke-opacity: .55;
    stroke-width: 1
}

.art-node .node-core {
    fill: #2c4364;
    stroke: #fff;
    stroke-opacity: .25;
    stroke-width: 1
}

.art-node>text:not(.node-label) {
    fill: #ffd27e;
    font: 18px var(--sans);
    text-anchor: middle
}

.art-node .node-label {
    fill: #c8cbd1;
    text-anchor: middle;
    font: 10px var(--mono);
    letter-spacing: 1px
}

.art-node:hover,
.art-node:focus {
    transform: scale(1.12);
    outline: none
}

.art-node:hover>circle:first-child,
.art-node:focus>circle:first-child {
    fill: #b3732d;
    stroke: #ffdc8c
}

.thread-line {
    opacity: .65;
    animation: dash 18s linear infinite
}

.center-ring {
    transform-origin: 282px 232px;
    animation: ring 3s ease-out infinite
}

.center-pulse {
    transform-origin: 282px 232px;
    animation: pulse 3s ease-in-out infinite
}

.breathing-glow {
    transform-origin: center;
    animation: breathe 7s ease-in-out infinite
}

.art-caption {
    position: absolute;
    left: 30px;
    right: 4px;
    bottom: 31px;
    border-top: 1px solid rgba(255, 255, 255, .2);
    padding-top: 8px;
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 10px;
    letter-spacing: .7px;
    color: #b9c0c9
}

.caption-index {
    color: #edb348
}

.caption-arrow {
    margin-left: auto;
    font-size: 16px
}

.hero-side-note {
    position: absolute;
    right: calc((100vw - 1210px)/2 - 35px);
    top: 44%;
    writing-mode: vertical-rl;
    display: flex;
    gap: 10px;
    align-items: center;
    color: #9ca4b2;
    font-size: 10px
}

.vertical-rule {
    height: 29px;
    width: 1px;
    background: #798496
}

.hero-bottom {
    height: 50px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: #abb3c0;
    font-size: 10px
}

.scroll-cue b {
    color: #f2b23d;
    font-size: 14px;
    margin-left: 10px
}

.section-pad {
    padding: 112px 0
}

.manifesto-grid {
    display: grid;
    grid-template-columns: 115px 1fr 190px;
    gap: 32px
}

.section-marker {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #898980;
    font-size: 10px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    height: 160px
}

.section-marker>span:first-child {
    color: #d38a42
}

.marker-line {
    height: 55px;
    width: 1px;
    background: #c9c5bb
}

.manifesto-main {
    padding-top: 4px
}

.kicker {
    text-transform: uppercase;
    color: #ba7444;
    margin-bottom: 18px;
    font-size: 10px
}

.manifesto h2,
.section-heading h2,
.feature-copy h2,
.insight-grid h2,
.join-inner h2 {
    font: 500 clamp(38px, 4vw, 54px)/1.13 var(--display);
    letter-spacing: -2.7px;
    margin: 0 0 22px
}

.manifesto h2 em,
.section-heading h2 em,
.insight-grid h2 em {
    color: #bb7346
}

.body-large {
    font-size: 14px;
    line-height: 1.85;
    color: #62645f;
    max-width: 610px
}

.underlined-link {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    margin-top: 20px;
    border-bottom: 1px solid #c9844e;
    padding-bottom: 9px
}

.underlined-link span {
    color: #c47c45;
    font-size: 15px;
    margin-left: 14px
}

.manifesto-stamp {
    align-self: center;
    justify-self: end;
    text-align: center
}

.stamp-circle {
    height: 132px;
    width: 132px;
    border: 1px solid #cf9c5a;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font: 10px var(--mono);
    letter-spacing: 1.4px;
    color: #9d744a;
    gap: 9px;
    transform: rotate(-13deg)
}

.stamp-center {
    font: 34px var(--serif);
    color: #cb8450;
    line-height: 1
}

.stamp-caption {
    display: block;
    margin-top: 14px;
    font: 10px/1.7 var(--mono);
    letter-spacing: 1px;
    color: #888
}

.dimensions-section {
    background: #e9e4da;
    padding-top: 105px;
    padding-bottom: 104px
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 43px
}

.section-heading h2 {
    margin-bottom: 0
}

.heading-aside {
    max-width: 320px;
    font-size: 12px;
    line-height: 1.8;
    color: #6b6b64;
    margin: 0 0 5px
}

.dimension-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px
}

.dimension-card {
    min-height: 236px;
    padding: 22px 23px;
    position: relative;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s
}

.dimension-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 11px 25px #1e29401a
}

.card-amber {
    background: #e8b45f
}

.card-blue {
    background: #9daec0
}

.card-rose {
    background: #dfa290
}

.card-green {
    background: #a9b19a
}

.card-lilac {
    background: #b6a9c4
}

.card-coral {
    background: #d68667
}

.dim-number {
    position: relative;
    z-index: 1;
    font-size: 10px;
    color: #283147a8
}

.dim-icon {
    position: absolute;
    right: 23px;
    top: 18px;
    font: 28px var(--serif);
    color: #26344b9c
}

.dimension-card h3 {
    font: 600 24px/1.08 var(--display);
    letter-spacing: -1px;
    margin: 39px 0 10px;
    position: relative;
    z-index: 1
}

.dimension-card p {
    font-size: 10px;
    line-height: 1.55;
    max-width: 190px;
    margin: 0;
    position: relative;
    z-index: 1;
    color: #344056
}

.dim-arrow {
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: 18px
}

.card-orbit {
    position: absolute;
    width: 146px;
    height: 146px;
    border: 1px solid #24344c29;
    border-radius: 50%;
    right: -27px;
    bottom: -70px;
    transition: transform .5s
}

.card-orbit:after {
    content: '';
    position: absolute;
    inset: 13px;
    border: 1px dashed #24344c2b;
    border-radius: 50%
}

.dimension-card:hover .card-orbit {
    transform: scale(1.3) rotate(23deg)
}

.dimensions-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
    font-size: 10px;
    color: #7a786e
}

.dimensions-foot .underlined-link {
    margin: 0
}

.feature-section {
    background: #202f4b;
    color: #f7f2e8;
    padding: 105px 0 112px;
    overflow: hidden
}

.feature-grid {
    display: grid;
    grid-template-columns: 43% 57%;
    align-items: center
}

.feature-copy {
    padding-right: 20px
}

.light-marker {
    color: #aeb7c4;
    margin-bottom: 35px
}

.light-marker .marker-line {
    background: #56647b
}

.feature-copy .kicker {
    color: #eab252
}

.feature-copy h2 {
    font-size: clamp(40px, 4.4vw, 57px);
    margin-bottom: 20px
}

.feature-copy h2 em {
    color: #eeb553
}

.feature-copy .body-large {
    color: #c1c8d1;
    max-width: 415px
}

.button-light {
    background: #f2b541;
    color: #202c45;
    margin-top: 12px
}

.fine-print {
    display: block;
    color: #aab4c2;
    font-size: 10px;
    margin-top: 15px;
    letter-spacing: .5px
}

.graph-art {
    height: 475px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.graph-art>svg {
    width: 100%;
    height: 100%;
    overflow: visible
}

.graph-edges path {
    fill: none;
    stroke: #f4bd5a;
    stroke-opacity: .42;
    stroke-width: 1.2;
    stroke-dasharray: 4 7;
    animation: dash 22s linear infinite
}

.graph-points circle {
    fill: #263d60;
    stroke: #e8b450;
    stroke-width: 1.3;
    filter: drop-shadow(0 0 8px #e7ad4a44);
    transform-box: fill-box;
    transform-origin: center;
    animation: point 4s ease-in-out infinite
}

.graph-points circle:nth-child(2n) {
    animation-delay: -1.2s
}

.graph-points .graph-hotspot {
    fill: #f8d280;
    stroke: #fff4d4;
    animation: pulse 3s infinite
}

.graph-orbits ellipse {
    fill: none;
    stroke: #c4d0df;
    stroke-opacity: .14;
    stroke-dasharray: 1 6
}

.graph-label {
    position: absolute;
    color: #e1b962;
    font-size: 10px
}

.graph-label-a {
    left: 14%;
    top: 16%
}

.graph-label-b {
    right: 2%;
    bottom: 21%;
    color: #aebbd0
}

.graph-card {
    position: absolute;
    bottom: 29px;
    left: 25%;
    background: #f4f0e8;
    color: #26344d;
    padding: 16px 20px 14px;
    box-shadow: 0 10px 35px #0a1529aa;
    min-width: 220px;
    transform: rotate(-2deg);
    animation: float 5s ease-in-out infinite
}

.graph-card>span:nth-child(2) {
    font-size: 10px;
    color: #9a7544;
    margin-left: 9px
}

.graph-card b {
    display: block;
    font: italic 17px/1.25 var(--serif);
    margin: 13px 0 12px
}

.graph-card small {
    font-size: 10px;
    color: #96948b
}

.graph-coord {
    position: absolute;
    right: 2%;
    top: 17%;
    color: #9caabe;
    font-size: 10px
}

.insight-grid {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 35px;
    align-items: center
}

.insight-grid .section-marker {
    margin-bottom: 29px
}

.insight-grid h2 {
    font-size: 48px
}

.insight-card {
    background: #fffdf8;
    border: 1px solid #e0dacd;
    padding: 25px 27px 0;
    box-shadow: 0 14px 35px #2a2c3810
}

.insight-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ece8df;
    padding-bottom: 14px
}

.insight-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9c7649;
    font-size: 10px
}

.insight-tag span {
    width: 5px;
    height: 5px;
    box-shadow: none
}

.insight-id {
    color: #a3a098;
    font-size: 10px
}

.insight-question {
    font: 500 20px/1.4 var(--display);
    letter-spacing: -.5px;
    padding: 21px 0 24px;
    max-width: 390px
}

.result-row {
    display: grid;
    grid-template-columns: 125px 1fr 36px;
    align-items: center;
    gap: 12px;
    margin: 17px 0;
    font-size: 10px;
    color: #6b6b65
}

.result-row b {
    font: 500 13px var(--display);
    color: #25334d;
    text-align: right
}

.result-bar {
    height: 5px;
    background: #eae6dc;
    display: block
}

.result-bar i {
    display: block;
    height: 100%;
    width: var(--w);
    background: #dd9b44;
    animation: barin 1.3s ease-out both
}

.result-row:nth-child(2) .result-bar i {
    background: #8b9cae
}

.insight-bottom {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #ece8df;
    margin-top: 25px;
    padding: 13px 0;
    color: #9a988f;
    font-size: 10px;
    letter-spacing: .5px
}

.insight-footnote {
    font-size: 10px;
    color: #828078;
    background: #f7f4ed;
    margin: 0 -27px;
    padding: 12px 27px
}

.join-section {
    background: #e7c37f;
    min-height: 440px;
    position: relative;
    overflow: hidden
}

.join-texture {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 15% 100%, #ce9b606b, transparent 39%), radial-gradient(ellipse at 86% 0%, #f4e0a182, transparent 34%);
    opacity: .8
}

.join-inner {
    position: relative;
    padding: 76px 0 83px;
    text-align: center
}

.join-spark {
    font-size: 27px;
    color: #a85c3e;
    margin-bottom: 12px;
    animation: twinkle 3s ease-in-out infinite
}

.join-inner .kicker {
    color: #995d3e;
    margin-bottom: 14px
}

.join-inner h2 {
    font-size: 53px;
    margin-bottom: 13px
}

.join-inner h2 em {
    color: #a85d43
}

.join-inner>p:not(.kicker) {
    font-size: 12px;
    color: #5d5448;
    margin-bottom: 23px
}

.join-inner .button {
    margin: auto
}

.app-downloads {
    margin-top: 29px;
}

.app-downloads>p {
    margin: 0 0 12px;
    color: #fff;
    font-size: 12px;
}

.store-badges {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.store-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 174px;
    min-height: 54px;
    padding: 7px 14px;
    border: 1px solid #ffffff55;
    border-radius: 7px;
    background: #102a49;
    color: #fff;
    font: inherit;
    text-align: left;
    opacity: 1;
    cursor: default;
}

.store-badge svg {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
}

.store-badge span {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.store-badge small {
    color: #d8e1ef;
    font-size: 9px;
    line-height: 1.2;
}

.store-badge strong {
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
}

.join-aside {
    position: absolute;
    right: 20px;
    bottom: 90px;
    font: 10px/1.8 var(--mono);
    letter-spacing: 1px;
    text-align: left;
    color: #98724c
}

.site-footer {
    background: #1a263b;
    color: #f1eee7;
    padding: 40px 0 0
}

.footer-top {
    display: grid;
    grid-template-columns: 1.2fr 1.5fr 1fr auto;
    align-items: center;
    padding-bottom: 32px
}

.brand-footer .brand-mark {
    border-color: #f1eee7
}

.footer-top>p {
    font-size: 10px;
    line-height: 1.8;
    color: #b2b8c2;
    margin: 0
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 10px;
    color: #bfc4cc
}

.footer-links a:hover,
.footer-bottom a:hover {
    color: #efb14a
}

.back-top {
    border: 1px solid #617087;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #efb34d
}

.footer-bottom {
    border-top: 1px solid #39465c;
    min-height: 52px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #9099a8;
    font-size: 10px;
    letter-spacing: .8px
}

.footer-bottom a {
    color: #d9d5ca
}

.page-hero {
    background: #202f4b;
    color: #f6f1e8;
    padding: 82px 0 77px;
    position: relative;
    overflow: hidden
}

.page-hero:after {
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    border: 1px solid #ffffff12;
    border-radius: 50%;
    right: 8%;
    top: -180px;
    box-shadow: 0 0 0 36px #ffffff08, 0 0 0 82px #ffffff05
}

.page-hero .container {
    position: relative;
    z-index: 1
}

.page-hero .kicker {
    color: #edb34f
}

.page-hero h1 {
    font: 500 clamp(48px, 6vw, 76px)/1.03 var(--display);
    letter-spacing: -4px;
    max-width: 840px;
    margin: 0 0 20px
}

.page-hero h1 em {
    color: #efb650
}

.page-hero .hero-lede {
    max-width: 610px;
    margin-bottom: 0
}

.page-hero-meta {
    display: flex;
    gap: 20px;
    align-items: center;
    color: #adb8c7;
    font: 10px var(--mono);
    letter-spacing: 1px;
    margin-top: 34px
}

.page-hero-meta span:first-child {
    color: #edb34f
}

.page-content {
    padding: 80px 0
}

.atlas-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 85px;
    align-items: start
}

.atlas-intro h2,
.content-heading {
    font: 500 40px/1.15 var(--display);
    letter-spacing: -2px;
    margin: 0
}

.atlas-intro h2 em,
.content-heading em {
    font: italic 400 1em var(--serif);
    color: #bb7346
}

.atlas-intro p {
    color: #66665f;
    font-size: 13px;
    line-height: 1.8
}

.atlas-list {
    margin-top: 65px
}

.atlas-item {
    display: grid;
    grid-template-columns: 70px 1fr 1fr 40px;
    gap: 22px;
    align-items: center;
    padding: 25px 0;
    border-top: 1px solid var(--line);
    scroll-margin-top: 100px
}

.atlas-item:last-child {
    border-bottom: 1px solid var(--line)
}

.atlas-index {
    font: 10px var(--mono);
    color: #bc7845
}

.atlas-item h3 {
    font: 600 23px var(--display);
    letter-spacing: -.7px;
    margin: 0
}

.atlas-item p {
    font-size: 11px;
    line-height: 1.7;
    color: #707069;
    margin: 0
}

.atlas-item .atlas-question {
    font: italic 17px/1.45 var(--serif);
    color: #525751
}

.atlas-link {
    color: #bd7647;
    font-size: 20px
}

.graph-explainer {
    background: #e7e2d8;
    padding: 80px 0
}

.graph-explainer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center
}

.graph-diagram {
    min-height: 340px;
    background: #202f4b;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center
}

.graph-diagram svg {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.graph-diagram-copy {
    position: relative;
    color: #f2eee6;
    z-index: 1;
    text-align: center;
    background: #253958;
    border: 1px solid #e6b356;
    border-radius: 50%;
    width: 130px;
    height: 130px;
    display: grid;
    align-content: center;
    font: italic 16px var(--serif);
    box-shadow: 0 0 50px #e9ac4740
}

.graph-diagram-copy small {
    display: block;
    font: 10px var(--mono);
    letter-spacing: 1px;
    color: #edb554;
    margin-top: 8px
}

.principles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 40px
}

.principle {
    border-top: 2px solid #cf8c4d;
    padding: 20px 0
}

.principle span {
    font: 10px var(--mono);
    color: #bc7845
}

.principle h3 {
    font: 600 17px var(--display);
    margin: 13px 0 8px
}

.principle p {
    font-size: 11px;
    line-height: 1.7;
    color: #73736c
}

.method-steps {
    counter-reset: steps
}

.method-step {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 28px;
    border-top: 1px solid var(--line);
    padding: 27px 0
}

.method-step:last-child {
    border-bottom: 1px solid var(--line)
}

.method-step>span {
    font: 10px var(--mono);
    color: #c27a45
}

.method-step h3 {
    font: 600 20px var(--display);
    margin: 0 0 8px
}

.method-step p {
    font-size: 12px;
    line-height: 1.8;
    color: #6e6d66;
    max-width: 760px;
    margin: 0
}

.method-note {
    background: #eae4d9;
    padding: 24px;
    margin-top: 30px;
    font-size: 12px;
    line-height: 1.8;
    color: #5f605b;
    border-left: 3px solid #cf8b4e
}

.privacy-anchor {
    scroll-margin-top: 100px
}

.vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px
}

.vision-grid p {
    font-size: 13px;
    line-height: 1.85;
    color: #66665f
}

.vision-grid h2 {
    font: 500 38px/1.2 var(--display);
    letter-spacing: -2px;
    margin: 0 0 22px
}

.vision-grid h2 em {
    font: italic 400 1em var(--serif);
    color: #bb7346
}

.promise-card {
    background: #202f4b;
    color: #f6f1e8;
    padding: 30px;
    position: relative;
    overflow: hidden
}

.promise-card:after {
    content: '≈';
    position: absolute;
    right: 22px;
    bottom: -56px;
    font: 190px var(--serif);
    color: #ffffff0b
}

.promise-card h3 {
    font: 500 23px var(--display);
    margin: 0 0 18px
}

.promise-card p {
    color: #c4cad2;
    font-size: 12px;
    line-height: 1.8;
    position: relative;
    z-index: 1
}

.promise-card .promise-mark {
    font: 10px var(--mono);
    letter-spacing: 1px;
    color: #edb34f
}

.vision-values {
    background: #e8e3d9
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.value-card {
    padding: 24px 24px 15px 0;
    border-top: 1px solid #c9c2b6
}

.value-card .value-index {
    font: 10px var(--mono);
    color: #bc7845
}

.value-card h3 {
    font: 600 19px var(--display);
    margin: 15px 0 8px
}

.value-card p {
    font-size: 11px;
    line-height: 1.75;
    color: #696a63
}

.page-cta {
    background: #e7c37f;
    text-align: center;
    padding: 66px 0
}

.page-cta h2 {
    font: 500 38px var(--display);
    letter-spacing: -1.5px;
    margin: 0 0 10px
}

.page-cta p {
    font-size: 12px;
    color: #655849;
    margin-bottom: 18px
}

.page-cta .button {
    margin: auto
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s ease, transform .65s ease
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0)
}

@keyframes dash {
    to {
        stroke-dashoffset: -150
    }
}

@keyframes ring {
    0% {
        transform: scale(.7);
        opacity: .8
    }

    100% {
        transform: scale(1.8);
        opacity: 0
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(.9);
        opacity: .75
    }

    50% {
        transform: scale(1.12);
        opacity: 1
    }
}

@keyframes breathe {

    0%,
    100% {
        opacity: .7;
        transform: scale(.95)
    }

    50% {
        opacity: 1;
        transform: scale(1.08)
    }
}

@keyframes point {

    0%,
    100% {
        transform: scale(.92);
        opacity: .85
    }

    50% {
        transform: scale(1.12);
        opacity: 1
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(-2deg)
    }

    50% {
        transform: translateY(-8px) rotate(-1deg)
    }
}

@keyframes twinkle {

    0%,
    100% {
        transform: rotate(0) scale(1);
        opacity: .75
    }

    50% {
        transform: rotate(18deg) scale(1.15);
        opacity: 1
    }
}

@keyframes barin {
    from {
        width: 0
    }

    to {
        width: var(--w)
    }
}

@media(max-width:1000px) {
    .container {
        width: calc(100% - 56px)
    }

    .site-header {
        padding: 0 28px
    }

    .hero {
        grid-template-columns: 48% 52%;
        min-height: 590px
    }

    .hero h1 {
        font-size: 66px
    }

    .hero-art {
        min-height: 515px
    }

    .hero-side-note {
        display: none
    }

    .manifesto-grid {
        grid-template-columns: 70px 1fr 140px;
        gap: 20px
    }

    .stamp-circle {
        height: 112px;
        width: 112px
    }

    .feature-grid {
        grid-template-columns: 45% 55%
    }

    .graph-art {
        height: 410px
    }

    .dimension-card {
        min-height: 220px
    }

    .atlas-intro {
        gap: 48px
    }
}

@media(max-width:700px) {
    html {
        scroll-padding-top: 70px
    }

    .container {
        width: calc(100% - 40px)
    }

    .site-header {
        height: 67px;
        padding: 0 20px
    }

    .menu-toggle {
        border: 0;
        background: none;
        padding: 8px;
        display: flex;
        flex-direction: column;
        gap: 5px
    }

    .menu-toggle>span:not(.sr-only) {
        width: 21px;
        height: 1px;
        background: var(--ink)
    }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 66px;
        left: 0;
        right: 0;
        padding: 20px;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        align-items: stretch;
        gap: 0;
        box-shadow: 0 14px 20px #1d2b4114
    }

    .main-nav.open {
        display: flex;
        flex-direction: column
    }

    .main-nav>a {
        padding: 14px 4px
    }

    .main-nav .nav-cta {
        padding: 14px;
        margin-top: 8px
    }

    .hero {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding: 59px 0 0
    }

    .hero-copy {
        padding-bottom: 0
    }

    .hero h1 {
        font-size: clamp(51px, 13vw, 72px);
        letter-spacing: -3.8px;
        margin: 25px 0 19px
    }

    .hero h1 em {
        letter-spacing: -3px
    }

    .hero-lede {
        font-size: 13px;
        max-width: 350px
    }

    .hero-actions {
        align-items: flex-start;
        gap: 16px;
        flex-direction: column
    }

    .hero-note {
        margin-top: 27px
    }

    .hero-art {
        min-height: 0;
        height: auto;
        margin: 18px -5px 0
    }

    .atlas-art {
        width: 100%;
        max-width: 510px
    }

    .art-topline {
        top: 0;
        left: 12px;
        right: 12px;
        font-size: 10px
    }

    .art-caption {
        left: 11px;
        right: 11px;
        bottom: 5px;
        padding-top: 10px;
        gap: 9px;
        font-size: 10px
    }

    .hero-bottom {
        height: 46px;
        font-size: 10px;
        letter-spacing: .6px
    }

    .scroll-cue {
        display: none
    }

    .section-pad {
        padding: 72px 0
    }

    .manifesto-grid {
        grid-template-columns: 30px 1fr;
        gap: 14px
    }

    .section-marker {
        height: 133px;
        font-size: 10px;
        gap: 7px
    }

    .marker-line {
        height: 38px
    }

    .manifesto h2,
    .section-heading h2,
    .insight-grid h2 {
        font-size: 37px;
        letter-spacing: -1.8px
    }

    .manifesto-main .body-large {
        font-size: 12px
    }

    .manifesto-stamp {
        display: none
    }

    .dimensions-section {
        padding: 72px 0
    }

    .section-heading {
        display: block;
        margin-bottom: 28px
    }

    .heading-aside {
        font-size: 11px;
        margin-top: 17px;
        max-width: 380px
    }

    .dimension-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px
    }

    .dimension-card {
        min-height: 191px;
        padding: 16px
    }

    .dim-icon {
        right: 15px;
        top: 13px;
        font-size: 23px
    }

    .dimension-card h3 {
        font-size: 20px;
        margin-top: 33px
    }

    .dimension-card p {
        font-size: 10px
    }

    .dim-number {
        font-size: 10px
    }

    .dim-arrow {
        right: 13px;
        bottom: 12px;
        font-size: 15px
    }

    .dimensions-foot {
        align-items: flex-start;
        gap: 14px;
        flex-direction: column;
        font-size: 10px
    }

    .feature-section {
        padding: 68px 0 55px
    }

    .feature-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch
    }

    .light-marker {
        height: 105px;
        margin-bottom: 25px
    }

    .feature-copy h2 {
        font-size: 41px;
        letter-spacing: -2px
    }

    .feature-copy .body-large {
        font-size: 12px
    }

    .graph-art {
        height: 335px;
        margin-top: 20px
    }

    .graph-card {
        left: 20%;
        bottom: 14px;
        min-width: 190px;
        padding: 13px 16px
    }

    .graph-card b {
        font-size: 14px
    }

    .graph-label-a {
        left: 5%;
        top: 12%
    }

    .graph-label-b {
        right: 0;
        bottom: 16%
    }

    .graph-coord {
        right: 0
    }

    .insight-grid {
        display: block
    }

    .insight-grid .section-marker {
        margin-bottom: 25px
    }

    .insight-grid h2 {
        margin-bottom: 16px
    }

    .insight-grid>.body-large {
        font-size: 12px
    }

    .insight-card {
        margin-top: 34px;
        padding: 19px 16px 0
    }

    .insight-question {
        font-size: 18px
    }

    .result-row {
        grid-template-columns: 91px 1fr 32px;
        gap: 8px;
        font-size: 10px
    }

    .insight-bottom {
        font-size: 10px;
        gap: 8px
    }

    .insight-footnote {
        margin: 0 -16px;
        padding: 11px 16px;
        font-size: 10px
    }

    .join-section {
        min-height: 390px
    }

    .join-inner {
        padding: 67px 0
    }

    .join-inner h2 {
        font-size: 39px;
        letter-spacing: -2px
    }

    .join-inner>p:not(.kicker) {
        font-size: 11px;
        max-width: 285px;
        margin: 0 auto 20px
    }

    .join-aside {
        display: none
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 22px;
        padding-bottom: 25px
    }

    .footer-top>p {
        font-size: 10px
    }

    .footer-links {
        font-size: 10px
    }

    .back-top {
        justify-self: end
    }

    .footer-bottom {
        font-size: 10px;
        gap: 9px;
        flex-wrap: wrap;
        padding: 12px 0
    }

    .footer-bottom span:nth-child(2) {
        display: none
    }

    .page-hero {
        padding: 66px 0 58px
    }

    .page-hero h1 {
        font-size: 49px;
        letter-spacing: -3px
    }

    .page-hero .hero-lede {
        font-size: 12px
    }

    .page-hero-meta {
        font-size: 10px;
        gap: 12px;
        flex-wrap: wrap
    }

    .page-content {
        padding: 58px 0
    }

    .atlas-intro,
    .graph-explainer-grid,
    .vision-grid {
        grid-template-columns: 1fr;
        gap: 22px
    }

    .atlas-intro h2,
    .content-heading {
        font-size: 33px
    }

    .atlas-intro p {
        font-size: 12px
    }

    .atlas-list {
        margin-top: 40px
    }

    .atlas-item {
        grid-template-columns: 40px 1fr 25px;
        gap: 10px;
        padding: 20px 0
    }

    .atlas-item h3 {
        font-size: 17px
    }

    .atlas-item>p:not(.atlas-question) {
        display: none
    }

    .atlas-item .atlas-question {
        grid-column: 2;
        font-size: 14px;
        margin-top: -4px
    }

    .atlas-link {
        grid-column: 3;
        grid-row: 1
    }

    .graph-explainer {
        padding: 58px 0
    }

    .graph-diagram {
        min-height: 280px
    }

    .principles-grid,
    .values-grid {
        grid-template-columns: 1fr;
        gap: 2px
    }

    .principle {
        padding: 16px 0
    }

    .principle h3 {
        margin: 8px 0
    }

    .method-step {
        grid-template-columns: 54px 1fr;
        gap: 12px;
        padding: 20px 0
    }

    .method-step h3 {
        font-size: 17px
    }

    .method-step p {
        font-size: 11px
    }

    .vision-grid h2 {
        font-size: 33px
    }

    .promise-card {
        padding: 23px
    }

    .page-cta {
        padding: 55px 0
    }

    .page-cta h2 {
        font-size: 30px
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }

    .reveal {
        opacity: 1;
        transform: none
    }
}

.insight-grid {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr)
}

.brand-mark {
    display: flex;
    align-items: center;
    justify-content: center
}

:root {
    --paper: #ffffff;
    --ink: #15345a;
    --ink2: #204b76;
    --muted: #637180;
    --line: #d8e0e6;
    --saffron: #f28c28;
    --coral: #16834c;
    --chakra: #174b83
}

body {
    background: #ffffff;
    color: var(--ink);
    font-size: 16px
}

.site-header {
    background: #ffffff;
    border-bottom-color: #15345a1a
}

.brand-mark {
    width: 39px;
    height: 39px;
    border: 0;
    border-radius: 50%;
    background: url('/assets/logo.png') center/contain no-repeat;
    color: transparent !important;
    font-size: 0 !important;
    display: block;
    flex: none
}

.brand-mark span {
    color: transparent !important;
    font-size: 0 !important
}

.brand-name {
    text-transform: capitalize;
    font-size: 14px
}

.brand-name span {
    font-size: 12px
}

.main-nav {
    font-size: 13px
}

.main-nav>a:not(.nav-cta):hover {
    color: var(--saffron)
}

.nav-cta {
    background: var(--chakra);
    color: #fff
}

.nav-cta span {
    color: var(--saffron)
}

.hero-wrap,
.feature-section,
.site-footer,
.page-hero {
    background-color: #15345a
}

.hero-wrap:before {
    background: radial-gradient(ellipse at 77% 47%, rgba(33, 81, 125, .55), transparent 50%), linear-gradient(105deg, rgba(255, 255, 255, .024) 1px, transparent 1px)
}

.hero h1 em,
.page-hero h1 em {
    color: var(--saffron)
}

.hero-lede {
    font-size: 16px
}

.text-link {
    font-size: 11px
}

.button {
    font-size: 12px
}

.button-dark,
.button-light {
    background: var(--saffron);
    color: #15345a
}

.button-dark:hover,
.button-light:hover {
    background: #ffad50
}

.nav-cta,
.button,
.underlined-link {
    transition: transform .25s, background .25s, color .25s
}

.body-large {
    font-size: 15px
}

.kicker {
    font-size: 10px;
    color: #c66e16
}

.section-marker {
    font-size: 10px
}

.section-marker>span:first-child {
    color: var(--saffron)
}

.manifesto h2 em,
.section-heading h2 em,
.insight-grid h2 em,
.atlas-intro h2 em,
.content-heading em,
.vision-grid h2 em {
    color: #16834c
}

.dimensions-section,
.graph-explainer,
.vision-values {
    background: #f0f3f5
}

.card-amber {
    background: #fff0dc
}

.card-blue {
    background: #e6edf4
}

.card-rose {
    background: #e5f0e8
}

.card-green {
    background: #eff4ef
}

.card-lilac {
    background: #e4edf5
}

.card-coral {
    background: #f7eadb
}

.dimension-card h3 {
    color: #15345a
}

.dimension-card p {
    font-size: 11px
}

.dim-number {
    font-size: 10px;
    color: #174b83b3
}

.dim-icon {
    color: #174b83
}

.dimension-card:hover {
    box-shadow: 0 12px 30px #15345a1a
}

.card-orbit {
    border-color: #174b8325
}

.card-orbit:after {
    border-color: #174b832b
}

.feature-section {
    background: #15345a
}

.feature-copy .kicker {
    color: #f6a646
}

.feature-copy h2 em {
    color: var(--saffron)
}

.graph-edges path {
    stroke: #f4a64a
}

.graph-points circle {
    stroke: #f4a64a;
    fill: #204b76
}

.graph-points .graph-hotspot {
    fill: #fff;
    stroke: var(--saffron)
}

.graph-card {
    background: #ffffff;
    color: #15345a
}

.graph-card>span:nth-child(2) {
    color: #16834c
}

.graph-card-dot {
    background: var(--saffron)
}

.insight-card {
    background: #fff;
    border-color: #dbe2e7
}

.insight-tag {
    color: #174b83
}

.insight-tag span {
    background: #16834c
}

.result-bar {
    background: #e7edf1
}

.result-bar i {
    background: #f28c28
}

.result-row:nth-child(2) .result-bar i {
    background: #16834c
}

.insight-footnote {
    background: #f0f3f5
}

.join-section,
.page-cta {
    background: #f28c28
}

.join-texture {
    background: radial-gradient(ellipse at 15% 100%, #fff5e8a8, transparent 39%), radial-gradient(ellipse at 86% 0%, #ffffff70, transparent 34%)
}

.join-inner .kicker {
    color: #174b83
}

.join-inner h2 em {
    color: #174b83
}

.join-spark {
    color: #16834c
}

.site-footer {
    background: #102a49
}

.footer-links a:hover,
.footer-bottom a:hover {
    color: var(--saffron)
}

.back-top {
    border-color: #8ca4bd;
    color: var(--saffron)
}

.footer-bottom {
    border-color: #ffffff29
}

.atlas-index,
.atlas-link,
.principle span,
.method-step>span,
.value-card .value-index {
    color: #c66e16
}

.principle {
    border-top-color: #f28c28
}

.atlas-item {
    border-color: #d8e0e6
}

.method-note {
    background: #f0f3f5;
    border-left-color: #16834c
}

.promise-card {
    background: #15345a
}

.promise-card .promise-mark {
    color: var(--saffron)
}

.page-hero .kicker {
    color: #f6a646
}

.page-hero:after {
    border-color: #ffffff15;
    box-shadow: 0 0 0 36px #ffffff0a, 0 0 0 82px #ffffff06
}

.analytics-preview {
    background: #f7f8f7;
    overflow: hidden
}

.analytics-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    align-items: end;
    margin-bottom: 38px
}

.analytics-intro h2 {
    font: 500 clamp(38px, 4vw, 53px)/1.12 var(--display);
    letter-spacing: -2.4px;
    margin: 0
}

.analytics-intro h2 em {
    font: italic 400 1em var(--serif);
    color: #16834c
}

.analytics-intro .body-large {
    margin: 0 0 6px;
    max-width: 480px
}

.analytics-board {
    background: #fff;
    border: 1px solid #dce3e7;
    box-shadow: 0 20px 65px #15345a12;
    padding: 27px 30px 0;
    position: relative;
    overflow: hidden
}

.analytics-board:before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(#f28c28 0 34%, #174b83 34% 67%, #16834c 67%)
}

.analytics-board-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    border-bottom: 1px solid #e8edf0;
    padding: 0 0 23px
}

.analytics-board-top h3 {
    font: 600 24px/1.2 var(--display);
    letter-spacing: -.8px;
    margin: 14px 0 7px
}

.analytics-board-top p {
    font-size: 13px;
    color: #687582;
    margin: 0
}

.mock-n {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: none;
    padding: 11px 14px;
    background: #f0f4f6
}

.mock-n b {
    font: 700 22px var(--display);
    color: #15345a
}

.mock-n span {
    font: 10px/1.6 var(--mono);
    letter-spacing: .7px;
    color: #768390
}

.analytics-board-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    padding: 27px 0 24px
}

.choice-chart {
    padding-right: 23px;
    border-right: 1px solid #e8edf0
}

.chart-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font: 10px var(--mono);
    letter-spacing: .7px;
    color: #6f7b86
}

.chart-head span:last-child {
    color: #9ba5ad;
    font-size: 10px
}

.stacked-bar {
    display: flex;
    height: 22px;
    width: 100%;
    margin: 26px 0 18px;
    overflow: hidden;
    background: #edf0f2
}

.stacked-bar span {
    height: 100%;
    animation: barin 1s ease-out both
}

.stack-stability {
    width: 42%;
    background: #f28c28
}

.stack-growth {
    width: 35%;
    background: #174b83;
    animation-delay: .15s !important
}

.stack-autonomy {
    width: 23%;
    background: #16834c;
    animation-delay: .3s !important
}

.chart-legend {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px
}

.chart-legend>div {
    display: grid;
    grid-template-columns: 10px 1fr;
    column-gap: 7px;
    align-items: center;
    font-size: 10px;
    color: #687582
}

.chart-legend b {
    grid-column: 2;
    font: 700 18px var(--display);
    color: #15345a;
    margin-top: 6px
}

.legend-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block
}

.saffron-dot {
    background: #f28c28
}

.blue-dot {
    background: #174b83
}

.green-dot {
    background: #16834c
}

.chart-foot {
    font: 10px var(--mono);
    color: #8b969f;
    margin-top: 22px
}

.mindmap-card svg {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 8px
}

.mini-map-links path {
    fill: none;
    stroke: #9aaebd;
    stroke-width: 1.5;
    stroke-dasharray: 4 5;
    animation: dash 18s linear infinite
}

.mini-map-nodes circle {
    fill: #fff;
    stroke: #174b83;
    stroke-width: 1.5
}

.mini-map-nodes circle:first-child {
    fill: #174b83;
    stroke: #f28c28;
    stroke-width: 2
}

.mindmap-card svg text {
    font: 700 10px var(--mono);
    fill: #174b83
}

.mindmap-card svg text:nth-of-type(1),
.mindmap-card svg text:nth-of-type(2) {
    fill: #fff;
    font-size: 10px
}

.mindmap-card svg .mindmap-label {
    font: 10px var(--mono);
    letter-spacing: .4px;
    fill: #687582
}

.analytics-board-foot {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    border-top: 1px solid #e8edf0;
    padding: 15px 0;
    font: 10px var(--mono);
    letter-spacing: .55px;
    color: #87929c
}

.analytics-board-foot a {
    color: #174b83;
    letter-spacing: .1px
}

.analytics-board-foot b {
    color: #f28c28;
    padding-left: 6px
}

@media(max-width:700px) {
    .brand-mark {
        width: 36px;
        height: 36px
    }

    .analytics-intro {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .analytics-intro h2 {
        font-size: 37px
    }

    .analytics-board {
        padding: 21px 16px 0
    }

    .analytics-board-top {
        align-items: flex-start
    }

    .analytics-board-top h3 {
        font-size: 19px
    }

    .mock-n {
        padding: 9px;
        gap: 7px
    }

    .mock-n b {
        font-size: 17px
    }

    .mock-n span {
        font-size: 10px
    }

    .analytics-board-content {
        grid-template-columns: 1fr;
        gap: 23px
    }

    .choice-chart {
        padding: 0 0 22px;
        border-right: 0;
        border-bottom: 1px solid #e8edf0
    }

    .chart-legend>div {
        font-size: 10px
    }

    .analytics-board-foot {
        flex-direction: column;
        font-size: 10px;
        line-height: 1.6
    }
}

.india-network path {
    fill: none;
    stroke: #174b83;
    stroke-width: 1.5;
    stroke-dasharray: 2 4;
    stroke-opacity: .65;
    animation: dash 20s linear infinite
}

.india-cities circle {
    fill: #fff;
    stroke: #174b83;
    stroke-width: 1.5;
    filter: drop-shadow(0 0 3px #f28c2880);
    transform-box: fill-box;
    transform-origin: center;
    animation: point 3.8s ease-in-out infinite
}

.india-cities circle:nth-child(2n) {
    animation-delay: -1.6s
}

.insight-section .kicker,
.section-heading .kicker,
.manifesto .kicker {
    color: #174b83
}

.dimensions-foot .underlined-link,
.underlined-link {
    font-size: 12px
}

.footer-top>p {
    font-size: 11px;
    color: #d3dce5
}

.stacked-bar span {
    animation: stackin .9s ease-out both
}

@keyframes stackin {
    from {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

:root {
    --paper: #fff;
    --ink: #000080;
    --ink2: #000080;
    --muted: #000080;
    --line: #000080;
    --saffron: #ff9933;
    --coral: #138808;
    --chakra: #000080
}

.hero-wrap,
.page-hero {
    background: #fff;
    color: #000080
}

.hero-wrap:before {
    background: radial-gradient(circle at 79% 38%, #ff993320, transparent 28%), radial-gradient(circle at 90% 74%, #13880814, transparent 28%), linear-gradient(105deg, #00008008 1px, transparent 1px);
    background-size: auto, auto, 64px 64px
}

.hero h1,
.page-hero h1 {
    color: #000080
}

.hero h1 em,
.page-hero h1 em {
    color: #ff9933
}

.hero-lede,
.text-link,
.eyebrow,
.hero-note,
.hero-side-note,
.hero-bottom,
.art-topline,
.art-caption {
    color: #000080
}

.hero-note .note-line {
    background: #138808
}

.hero-bottom {
    border-top-color: #00008030
}

.scroll-cue b {
    color: #138808
}

.hero-art .art-topline,
.hero-art .art-caption {
    color: #000080
}

.hero-art .art-caption {
    border-top-color: #00008035
}

.caption-index {
    color: #138808
}

.map-lines {
    stroke: #000080 !important;
    stroke-opacity: .07 !important
}

.india-outline {
    fill: #fff !important;
    stroke: #000080 !important;
    stroke-width: 2.8 !important
}

.india-network path {
    stroke: #000080;
    stroke-opacity: .6
}

.india-cities circle {
    stroke: #000080
}

.india-cities circle:nth-child(3n+1) {
    fill: #ff9933
}

.india-cities circle:nth-child(3n+2) {
    fill: #138808
}

.india-cities circle:nth-child(3n) {
    fill: #fff
}

.map-wordmark .map-im {
    font: 800 38px var(--display);
    letter-spacing: -3px;
    fill: #000080
}

.map-wordmark .map-im-caption {
    font: 10px var(--mono);
    letter-spacing: 1px;
    fill: #000080
}

.art-node>circle:first-child {
    fill: #fff;
    stroke: #000080;
    stroke-opacity: .7
}

.art-node .node-core {
    fill: #fff;
    stroke: #000080;
    stroke-opacity: .55
}

.art-node>text:not(.node-label) {
    fill: #138808
}

.art-node .node-label {
    fill: #000080
}

.art-node:hover>circle:first-child,
.art-node:focus>circle:first-child {
    fill: #ff9933;
    stroke: #000080
}

.center-ring {
    stroke: #000080;
    stroke-opacity: .5
}

.hero-wrap .live-dot {
    background: #138808;
    box-shadow: 0 0 0 4px #13880818
}

.page-hero:after {
    border-color: #00008012;
    box-shadow: 0 0 0 36px #00008008, 0 0 0 82px #ff99330b
}

.page-hero .kicker {
    color: #138808
}

.page-hero .hero-lede {
    color: #000080
}

.page-hero-meta {
    color: #000080
}

.page-hero-meta span:first-child {
    color: #138808
}

.button-dark,
.button-light,
.join-section .button,
.page-cta .button {
    background: #ff9933;
    color: #000080
}

.button-dark:hover,
.button-light:hover {
    background: #ff9933;
    filter: brightness(.96)
}

.nav-cta {
    background: #138808;
    color: #fff
}

.nav-cta span {
    color: #fff
}

.dimensions-section,
.graph-explainer,
.vision-values,
.analytics-preview {
    background: #fff
}

.card-amber,
.card-blue,
.card-rose,
.card-green,
.card-lilac,
.card-coral {
    background: #fff;
    border-top: 2px solid #ff9933
}

.card-blue,
.card-lilac {
    border-top-color: #000080
}

.card-rose,
.card-green,
.card-coral {
    border-top-color: #138808
}

.join-section,
.page-cta {
    background: #138808;
    color: #fff
}

.join-inner .kicker,
.join-inner h2,
.join-inner>p:not(.kicker),
.join-aside {
    color: #fff
}

.join-inner h2 em {
    color: #ff9933
}

.join-spark {
    color: #fff
}

.kicker,
.atlas-index,
.atlas-link,
.principle span,
.method-step>span,
.value-card .value-index {
    color: #138808
}

.manifesto h2 em,
.section-heading h2 em,
.insight-grid h2 em,
.atlas-intro h2 em,
.content-heading em,
.vision-grid h2 em,
.analytics-intro h2 em {
    color: #138808
}

.insight-tag {
    color: #000080
}

.insight-tag span {
    background: #138808
}

.result-bar i,
.stack-stability {
    background: #ff9933
}

.result-row:nth-child(2) .result-bar i,
.stack-autonomy {
    background: #138808
}

.stack-growth {
    background: #000080
}

.legend-dot.saffron-dot {
    background: #ff9933
}

.legend-dot.blue-dot {
    background: #000080
}

.legend-dot.green-dot {
    background: #138808
}

.mini-map-links path {
    stroke: #000080
}

.mini-map-nodes circle {
    stroke: #000080
}

.mini-map-nodes circle:first-child {
    fill: #000080;
    stroke: #ff9933
}

.mini-map-card svg text,
.mindmap-card svg text {
    fill: #000080
}

.analytics-board:before {
    background: linear-gradient(#ff9933 0 34%, #000080 34% 67%, #138808 67%)
}

.site-footer {
    background: #000080
}

.brand-mark {
    background-image: url('/assets/logo.png')
}

.footer-bottom a,
.footer-links a:hover {
    color: #ff9933
}

.brand-mark {
    width: 56px;
    height: 56px
}

.feature-section,
.site-footer,
.promise-card {
    background: #000080
}

.feature-copy .kicker,
.graph-label {
    color: #ff9933
}

.graph-label-b {
    color: #fff
}

.graph-coord {
    color: #fff
}

.fine-print,
.light-marker {
    color: #fff
}

.light-marker .marker-line {
    background: #ffffff70
}

.graph-edges path {
    stroke: #ff9933
}

.graph-points circle {
    stroke: #ff9933;
    fill: #000080
}

.graph-points .graph-hotspot {
    fill: #fff;
    stroke: #138808
}

.stamp-circle {
    border-color: #000080;
    color: #000080
}

.stamp-center {
    color: #138808
}

.stamp-caption {
    color: #000080
}

.join-texture {
    background: radial-gradient(ellipse at 15% 100%, #ffffff36, transparent 39%), radial-gradient(ellipse at 86% 0%, #ff993336, transparent 34%)
}

@media(max-width:700px) {
    .brand-mark {
        width: 46px;
        height: 46px
    }
}

p,
.atlas-item p,
.method-step p,
.principle p,
.vision-grid p,
.heading-aside,
.dimensions-foot,
.result-row,
.insight-bottom,
.insight-footnote,
.chart-legend>div,
.chart-foot,
.analytics-board-foot,
.mock-n span,
.graph-card small,
.graph-diagram-copy small {
    color: #000080b3
}

.feature-copy p,
.promise-card p,
.join-inner>p,
.page-cta p,
.page-cta h2,
.join-inner h2,
.join-aside {
    color: #fff
}

.insight-card,
.analytics-board,
.method-note,
.graph-card,
.mock-n,
.insight-footnote {
    background: #fff
}

.insight-card,
.analytics-board {
    border-color: #00008030
}

.analytics-board-top,
.choice-chart,
.analytics-board-foot,
.insight-top,
.insight-bottom {
    border-color: #00008024
}

.stacked-bar,
.result-bar {
    background: #fff
}

.atlas-item,
.principle,
.value-card {
    border-color: #00008030
}

.method-note {
    color: #000080;
    border-left-color: #138808
}

.footer-top>p {
    color: #fff
}

.footer-bottom {
    color: #fff
}

.footer-links {
    color: #fff
}

.join-inner .kicker {
    color: #fff
}

/* Homepage hero and public-impact refinements */
.hero-wrap {
    background: #fff;
    color: #000080;
}

.hero-wrap:before {
    background:
        radial-gradient(ellipse at 78% 42%, #ff99331c, transparent 35%),
        radial-gradient(ellipse at 93% 76%, #1388080d, transparent 26%),
        linear-gradient(105deg, #00008008 1px, transparent 1px);
    background-size: auto, auto, 64px 64px;
}

.hero {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    min-height: 650px;
    padding: 38px 0 24px;
}

.hero-copy {
    padding: 0 12px 18px 0;
}

.hero h1 {
    color: #000080;
    font-size: clamp(48px, 5.8vw, 76px);
    letter-spacing: -.055em;
    line-height: .98;
    margin: 28px 0 24px;
}

.hero h1 em {
    color: #ff9933;
    letter-spacing: -.045em;
}

.eyebrow,
.hero-lede,
.text-link,
.hero-note,
.hero-side-note,
.hero-bottom,
.art-topline,
.art-caption {
    color: #000080;
}

.hero-lede {
    max-width: 440px;
    font-size: 17px;
    line-height: 1.72;
}

.hero .button-dark {
    background: #ff9933;
    color: #000080;
}

.hero .button-dark:hover {
    background: #ffad52;
}

.hero .text-link span,
.hero .scroll-cue b {
    color: #138808;
}

.hero-note {
    margin-top: 42px;
}

.hero-note .note-line {
    background: #138808;
}

.hero-art {
    min-height: 600px;
    margin-left: 0;
}

.atlas-art {
    width: min(100%, 640px);
    max-height: 590px;
}

.art-topline {
    left: 18px;
    right: 16px;
    top: 20px;
    color: #000080;
}

.map-lines {
    stroke: #000080 !important;
    stroke-opacity: .045 !important;
}

.india-outline {
    fill: #fff !important;
    stroke: #000080 !important;
    stroke-width: 2.2 !important;
    stroke-linejoin: round !important;
}

.india-network path {
    fill: none;
    stroke: #000080;
    stroke-opacity: .48;
    stroke-width: 1.2;
    stroke-dasharray: 3 5;
}

.india-cities circle {
    fill: #fff;
    stroke: #000080;
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: center;
    animation: map-point 3.8s ease-in-out infinite;
}

.india-cities circle:nth-child(3n + 1) {
    fill: #ff9933;
    stroke: #000080;
}

.india-cities circle:nth-child(3n + 2) {
    fill: #138808;
    stroke: #000080;
    animation-delay: .8s;
}

.map-wordmark .map-im {
    fill: #000080;
}

.map-wordmark .map-im-caption {
    fill: #000080;
}

.art-caption {
    left: 20px;
    right: 16px;
    bottom: -16px;
    border-top-color: #00008030;
}

.hero-bottom {
    border-top: 1px solid #00008030;
}

.hero-bottom span:first-child {
    letter-spacing: .09em;
}

.impact-section {
    background: #000080;
    color: #fff;
    overflow: hidden;
    position: relative;
}

.impact-section:before {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    right: -170px;
    top: -185px;
    border: 1px solid #ffffff18;
    border-radius: 50%;
    box-shadow: 0 0 0 36px #ffffff08, 0 0 0 82px #ffffff06;
}

.impact-grid {
    display: grid;
    grid-template-columns: minmax(260px, .76fr) 1.24fr;
    gap: clamp(48px, 10vw, 140px);
    align-items: center;
    position: relative;
    z-index: 1;
}

.impact-population {
    border-left: 2px solid #ff9933;
    padding: 12px 0 14px 28px;
}

.impact-label,
.impact-population a {
    color: #fff;
    font: 500 10px var(--mono);
    letter-spacing: 1px;
}

.impact-population strong {
    display: block;
    color: #ff9933;
    font: 700 clamp(70px, 9vw, 112px)/.98 var(--display);
    letter-spacing: -.085em;
    margin: 18px 0 10px;
}

.impact-population strong span {
    font-size: .6em;
    letter-spacing: -.04em;
}

.impact-population p {
    max-width: 250px;
    color: #fff;
    font: 500 18px/1.45 var(--display);
    margin-bottom: 20px;
}

.impact-population a {
    display: inline-block;
    padding-bottom: 5px;
    border-bottom: 1px solid #ffffff70;
    text-transform: uppercase;
    font-size: 10px;
}

.impact-copy .kicker {
    color: #ff9933;
}

.impact-copy h2 {
    color: #fff;
    font: 600 clamp(34px, 4vw, 52px)/1.08 var(--display);
    letter-spacing: -.055em;
    margin: 20px 0;
}

.impact-copy h2 em {
    color: #ff9933;
    font: italic 400 1.03em var(--serif);
    letter-spacing: -.04em;
}

.impact-copy>p:not(.kicker) {
    max-width: 660px;
    color: #fff;
    font-size: 17px;
    line-height: 1.75;
}

.impact-copy .impact-caveat {
    font-size: 13px !important;
    opacity: .78;
}

.impact-flow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    color: #fff;
    font: 500 10px var(--mono);
    letter-spacing: 1px;
}

.impact-flow span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.impact-flow>b {
    height: 1px;
    width: clamp(22px, 5vw, 70px);
    background: #ffffff78;
}

.flow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 4px #ffffff15;
}

.flow-saffron {
    background: #ff9933;
}

.flow-white {
    background: #fff;
}

.flow-green {
    background: #138808;
}

@keyframes map-point {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.55);
    }
}

@media (max-width: 1000px) {
    .hero {
        grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    }

    .hero h1 {
        font-size: clamp(48px, 5.9vw, 62px);
    }

    .hero-art {
        min-height: 540px;
    }
}

@media (max-width: 700px) {
    .hero {
        display: flex;
        padding: 46px 0 0;
    }

    .hero-copy {
        padding: 0;
    }

    .hero h1 {
        font-size: clamp(50px, 12vw, 68px);
        line-height: .98;
        margin: 23px 0 19px;
    }

    .hero-lede {
        font-size: 16px;
    }

    .hero-note {
        margin-top: 26px;
    }

    .hero-art {
        min-height: 0;
        height: auto;
        margin: 20px -8px 0;
    }

    .atlas-art {
        width: 100%;
        max-width: 540px;
    }

    .art-topline {
        top: 0;
    }

    .art-caption {
        bottom: 8px;
        font-size: 10px;
    }

    .impact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .impact-population strong {
        font-size: 82px;
    }

    .impact-copy>p:not(.kicker) {
        font-size: 16px;
    }

    .impact-flow {
        gap: 8px;
        font-size: 10px;
    }

    .impact-flow>b {
        width: 20px;
    }
}

/* Atlas dimension rows: keep all five pieces of content inside the table width. */
.atlas-list {
    margin-top: 54px;
    border-top: 1px solid #00008035;
}

.atlas-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) 32px;
    gap: 24px;
    align-items: center;
    padding: 25px 8px 25px 0;
    border-top: 0;
    border-bottom: 1px solid #00008030;
    transition: background-color .2s ease, padding .2s ease;
}

.atlas-item:hover {
    background: #00008006;
    padding-left: 10px;
}

.atlas-index {
    color: #138808;
    font-size: 10px;
    white-space: nowrap;
}

.atlas-item h3 {
    color: #000080;
    font-size: clamp(18px, 1.65vw, 22px);
    line-height: 1.22;
    letter-spacing: -.035em;
}

.atlas-item p {
    color: #000080c7;
    font-size: 13px;
    line-height: 1.65;
}

.atlas-item .atlas-question {
    color: #000080;
    font: italic 16px/1.45 var(--serif);
}

.atlas-link {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #00008040;
    border-radius: 50%;
    color: #000080;
    font-size: 17px;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.atlas-item:hover .atlas-link {
    color: #fff;
    background: #138808;
    border-color: #138808;
    transform: translate(2px, -2px);
}

@media (max-width: 1000px) {
    .atlas-item {
        grid-template-columns: 52px minmax(0, 1.05fr) minmax(0, .95fr) minmax(0, 1.15fr) 28px;
        gap: 16px;
        padding: 22px 4px 22px 0;
    }

    .atlas-item h3 {
        font-size: 19px;
    }

    .atlas-item p {
        font-size: 12px;
    }

    .atlas-item .atlas-question {
        font-size: 15px;
    }
}

@media (max-width: 700px) {
    .atlas-list {
        margin-top: 34px;
    }

    .atlas-item {
        grid-template-columns: 42px minmax(0, 1fr) 28px;
        gap: 10px;
        align-items: start;
        padding: 18px 2px 20px 0;
    }

    .atlas-item:hover {
        padding-left: 4px;
    }

    .atlas-index {
        padding-top: 4px;
        font-size: 10px;
    }

    .atlas-item h3 {
        font-size: 18px;
    }

    .atlas-item>p:not(.atlas-question) {
        display: none;
    }

    .atlas-item .atlas-question {
        grid-column: 2;
        grid-row: 2;
        margin-top: 6px;
        font-size: 15px;
    }

    .atlas-link {
        grid-column: 3;
        grid-row: 1;
        width: 27px;
        height: 27px;
    }
}

@media (min-width: 701px) {
    .atlas-item p {
        color: #000080d6;
        font-size: 15px;
        line-height: 1.62;
    }

    .atlas-item .atlas-question {
        color: #000080;
        font-size: 17px;
        line-height: 1.42;
    }
}

.india-outline-image {
    overflow: visible;
}

.positioning-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 440px;
    margin-top: 24px;
}

.positioning-points>div {
    display: grid;
    gap: 5px;
    padding-top: 9px;
    border-top: 1px solid #00008030;
}

.positioning-points strong {
    color: #000080;
    font: 500 10px/1.3 var(--mono);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.positioning-points span {
    color: #000080c9;
    font-size: 12px;
    line-height: 1.4;
}

.hero-note {
    max-width: 440px;
    margin-top: 20px;
    line-height: 1.5;
}

@media (max-width: 700px) {
    .hero h1 {
        font-size: clamp(45px, 10.4vw, 62px);
        line-height: .96;
    }

    .positioning-points {
        gap: 12px;
        margin-top: 22px;
    }

    .positioning-points span {
        font-size: 12px;
    }

    .hero-note {
        margin-top: 18px;
    }
}

.legal-layout {
    display: grid;
    grid-template-columns: minmax(190px, .34fr) minmax(0, .66fr);
    gap: clamp(32px, 7vw, 96px);
    align-items: start;
}

.legal-aside {
    position: sticky;
    top: 110px;
    padding: 22px;
    background: #f7f4ed;
    border-top: 2px solid #ff9933;
}

.legal-aside p {
    margin: 18px 0;
    color: #000080c9;
    font-size: 14px;
    line-height: 1.65;
}

.legal-aside a,
.legal-copy a,
.faq-item a {
    color: #000080;
    text-decoration-color: #ff9933;
    text-underline-offset: 3px;
}

.legal-copy h2 {
    margin: 38px 0 12px;
    color: #000080;
    font: 600 22px/1.25 var(--display);
    letter-spacing: -.02em;
}

.legal-copy h2:first-of-type {
    margin-top: 0;
}

.legal-copy p,
.legal-copy li {
    color: #262637;
    font-size: 15px;
    line-height: 1.78;
}

.legal-copy ul {
    padding-left: 22px;
}

.legal-copy li+li {
    margin-top: 10px;
}

.legal-copy .method-note {
    margin-bottom: 34px;
    line-height: 1.7;
}

.legal-sources {
    margin-top: 38px;
    padding-top: 18px;
    border-top: 1px solid #00008025;
    font-size: 12px !important;
}

.faq-list {
    max-width: 900px;
}

.faq-item {
    display: grid;
    grid-template-columns: minmax(220px, .4fr) minmax(0, .6fr);
    gap: 22px;
    padding: 28px 0;
    border-bottom: 1px solid #00008025;
}

.faq-item:first-child {
    border-top: 1px solid #00008025;
}

.faq-item h2 {
    margin: 0;
    color: #000080;
    font: 600 21px/1.35 var(--display);
}

.faq-item p {
    margin: 0;
    color: #262637;
    font-size: 15px;
    line-height: 1.75;
}

.directory-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 6vw, 80px);
}

.directory-group .kicker {
    margin-bottom: 18px;
    color: #138808;
}

.directory-group>a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 22px;
    gap: 14px;
    align-items: start;
    padding: 20px 0;
    border-top: 1px solid #00008026;
    color: inherit;
    text-decoration: none;
}

.directory-group>a>span {
    color: #138808;
    font: 11px var(--mono);
}

.directory-group h2 {
    margin: -4px 0 6px;
    color: #000080;
    font: 600 20px/1.3 var(--display);
}

.directory-group p:not(.kicker) {
    margin: 0;
    color: #000080a8;
    font-size: 13px;
    line-height: 1.55;
}

.directory-group>a>b {
    color: #ff9933;
    transition: transform .2s ease;
}

.directory-group>a:hover>b {
    transform: translate(3px, -3px);
}

@media (max-width: 760px) {

    .legal-layout,
    .directory-grid {
        grid-template-columns: 1fr;
    }

    .legal-aside {
        position: static;
    }

    .faq-item {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* Shared, high-contrast footer and analytics consent controls */
.site-footer {
    position: relative;
    overflow: hidden;
    padding: 64px 0 0;
    color: #fff;
    background: #000080;
}

.site-footer::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -190px;
    top: -300px;
    border: 1px solid #ffffff20;
    border-radius: 50%;
    box-shadow: 0 0 0 35px #ffffff08, 0 0 0 70px #ffffff05;
    pointer-events: none;
}

.footer-main {
    position: relative;
    display: grid;
    grid-template-columns: minmax(240px, 1.5fr) minmax(135px, .75fr) minmax(160px, .9fr) minmax(220px, 1.15fr);
    gap: clamp(24px, 4vw, 58px);
    padding-bottom: 48px;
}

.footer-brand-block .brand {
    color: #fff;
}

.footer-tagline {
    margin: 26px 0 15px;
    color: #fff;
    font: 600 clamp(21px, 2vw, 27px)/1.28 var(--display);
    letter-spacing: -.035em;
}

.footer-tagline em {
    color: #ffb44a;
    font-family: var(--serif);
    font-weight: 400;
}

.footer-promise {
    margin: 0;
    color: #d6dded;
    font-size: 12px;
    line-height: 1.75;
}

.footer-socials {
    margin-top: 22px;
}

.footer-socials h2 {
    margin: 0 0 5px;
    color: #ffb44a;
    font: 500 11px/1.4 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.footer-social-handle {
    color: #d6dded;
    font-size: 12px;
}

.footer-socials ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.footer-socials a {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #ffffff40;
    border-radius: 50%;
    color: #fff;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.footer-socials a:hover,
.footer-socials a:focus-visible {
    border-color: #ffb44a;
    background: #ffb44a;
    color: #102a49;
}

.footer-socials svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.footer-socials .instagram-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.footer-socials svg .social-icon-fill {
    fill: currentColor;
    stroke: none;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
    padding-top: 7px;
}

.footer-nav h2 {
    margin: 0 0 9px;
    color: #ffb44a;
    font: 500 11px/1.4 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.footer-nav a,
.footer-support {
    color: #e0e5ef;
    font-size: 12px;
    line-height: 1.45;
    text-decoration: none;
    text-underline-offset: 4px;
    transition: color .18s ease;
}

.footer-nav a:hover,
.footer-support:hover {
    color: #ffb44a;
    text-decoration: underline;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding: 21px;
    border: 1px solid #ffffff30;
    background: #ffffff0a;
}

.footer-eyebrow {
    color: #ffb44a;
    font: 500 10px/1.4 var(--mono);
    letter-spacing: .15em;
}

.footer-email {
    color: #fff;
    font: 600 15px/1.4 var(--display);
    text-decoration-color: #ffb44a;
    text-underline-offset: 5px;
}

.footer-email span {
    color: #ffb44a;
}

.footer-contact .back-top {
    margin-top: 4px;
    border-color: #ffffff55;
    color: #ffb44a;
}

.footer-base {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding-top: 18px;
    padding-bottom: 18px;
    border-top: 1px solid #ffffff35;
    color: #d6dded;
    font: 10px/1.6 var(--mono);
    letter-spacing: .04em;
}

.analytics-consent {
    position: fixed;
    z-index: 2000;
    right: 20px;
    bottom: 20px;
    width: min(460px, calc(100vw - 32px));
    padding: 22px;
    border: 1px solid #00008026;
    border-top: 3px solid #ff9933;
    background: #fff;
    color: #000080;
    box-shadow: 0 16px 55px #00008028;
}

.analytics-consent[hidden] {
    display: none;
}

.analytics-consent h2 {
    margin: 0 0 8px;
    font: 600 20px/1.3 var(--display);
}

.analytics-consent p {
    margin: 0;
    color: #33334f;
    font-size: 13px;
    line-height: 1.6;
}

.analytics-consent p a {
    color: #000080;
    text-decoration-color: #ff9933;
}

.analytics-consent-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.analytics-consent-actions button {
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid #000080;
    background: #fff;
    color: #000080;
    font: 600 12px var(--sans);
    cursor: pointer;
}

.analytics-consent-actions button:first-child {
    background: #000080;
    color: #fff;
}

.analytics-consent-actions button:hover {
    box-shadow: inset 0 0 0 2px #ff9933;
}

.consent-settings {
    padding: 0;
    border: 0;
    background: transparent;
    color: #ffcf7e;
    font: 10px var(--mono);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

/* ==========================================================================
   THE INDIAN MINDSET — FOUNDATIONAL THESIS & TENDENCIES STYLES
   ========================================================================== */

.active-nav {
    color: #cf794d !important;
    font-weight: 700 !important;
}

.thesis-lead-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 48px;
    align-items: start;
    margin-top: 15px;
}

.thesis-takeaway-card {
    background: #fff;
    border: 1px solid rgba(30, 41, 64, 0.14);
    border-left: 4px solid #edaa36;
    border-radius: 4px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(30, 41, 64, 0.05);
}

.thesis-takeaway-card h3 {
    font: 700 22px var(--display);
    color: #1e2940;
    margin: 12px 0 10px;
}

.thesis-takeaway-card p {
    font-size: 14.5px;
    line-height: 1.7;
    color: #293c5b;
}

.thesis-subtext {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(30, 41, 64, 0.15);
    font-size: 13px !important;
    color: #6a778e !important;
}

.mindset-traits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 36px;
}

.mindset-card {
    background: #fff;
    border: 1px solid rgba(30, 41, 64, 0.12);
    border-radius: 4px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mindset-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(30, 41, 64, 0.08);
    border-color: #edaa36;
}

.trait-index {
    font: 600 11px var(--mono);
    color: #138808;
    letter-spacing: 0.8px;
}

.mindset-card h3 {
    font: 700 20px var(--display);
    color: #1e2940;
    margin: 12px 0 10px;
    line-height: 1.3;
}

.mindset-card p {
    font-size: 14px;
    line-height: 1.65;
    color: #435473;
    flex-grow: 1;
    margin: 0;
}

.trait-nuance {
    margin-top: 20px;
    padding: 12px 14px;
    background: #fbf9f5;
    border: 1px solid rgba(237, 170, 54, 0.25);
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.6;
    color: #1e2940;
}

.trait-nuance strong {
    color: #cf794d;
    font-size: 11px;
    font-family: var(--mono);
    display: block;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

.culture-habits-list {
    margin-top: 36px;
    border-top: 1px solid rgba(30, 41, 64, 0.15);
}

.habit-row {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 36px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(30, 41, 64, 0.12);
    align-items: start;
}

.habit-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.habit-num {
    font: 700 13px var(--mono);
    color: #edaa36;
}

.habit-meta h4 {
    font: 700 18px var(--display);
    color: #1e2940;
    margin: 0;
    line-height: 1.35;
}

.habit-body p {
    font-size: 15px;
    line-height: 1.7;
    color: #293c5b;
    margin: 0;
}

.behaviors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
}

.behavior-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    padding: 26px;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.behavior-box:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #edaa36;
    transform: translateY(-2px);
}

.behavior-icon {
    font-size: 28px;
    margin-bottom: 14px;
    display: inline-block;
}

.behavior-box h3 {
    color: #edaa36;
    font: 700 18px var(--display);
    margin: 0 0 10px;
    line-height: 1.3;
}

.behavior-box p {
    color: #d5e0ec;
    font-size: 13.5px;
    line-height: 1.65;
    margin: 0;
}

/* Context Matrix Tabs */
.segment-tabs {
    margin-top: 36px;
    background: #fff;
    border: 1px solid rgba(30, 41, 64, 0.12);
    border-radius: 6px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(30, 41, 64, 0.04);
}

.segment-tablist {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid rgba(30, 41, 64, 0.1);
    padding-bottom: 2px;
    overflow-x: auto;
}

.segment-tab {
    padding: 12px 20px;
    font: 600 14px var(--sans);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #5a667f;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    border-radius: 3px 3px 0 0;
}

.segment-tab:hover {
    color: #1e2940;
    background: rgba(237, 170, 54, 0.08);
}

.segment-tab.active {
    color: #1e2940;
    font-weight: 700;
    border-bottom-color: #edaa36;
}

.segment-tab:focus-visible {
    outline: 2px solid #edaa36;
    outline-offset: 2px;
}

.segment-panel {
    padding-top: 32px;
}

.segment-panel[hidden] {
    display: none !important;
}

.panel-layout {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 40px;
    align-items: start;
}

.panel-overview h3 {
    font: 700 24px var(--display);
    color: #1e2940;
    margin: 0 0 16px;
    line-height: 1.3;
}

.panel-overview p {
    font-size: 15px;
    line-height: 1.75;
    color: #384966;
    margin: 0 0 14px;
}

.panel-breakdown {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.panel-item {
    background: #fbf9f5;
    border: 1px solid rgba(30, 41, 64, 0.1);
    border-left: 3px solid #138808;
    padding: 18px 20px;
    border-radius: 4px;
}

.panel-tag {
    font: 700 10px var(--mono);
    color: #138808;
    letter-spacing: 0.8px;
    display: block;
    margin-bottom: 6px;
}

.panel-item h4 {
    font: 700 16px var(--display);
    color: #1e2940;
    margin: 0 0 6px;
}

.panel-item p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #435473;
    margin: 0;
}

/* Persistence Grid */
.persistence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 36px;
}

.persistence-card {
    background: #fff;
    padding: 30px;
    border-radius: 4px;
    border: 1px solid #d8d4ca;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.pers-number {
    font: 800 28px var(--mono);
    color: #edaa36;
    display: block;
    margin-bottom: 8px;
}

.persistence-card h3 {
    font: 700 20px var(--display);
    color: #1e2940;
    margin: 0 0 12px;
}

.persistence-card p {
    font-size: 14px;
    line-height: 1.7;
    color: #435473;
    margin: 0;
}

/* Guardrails Box */
.guardrails-box {
    background: #fff;
    border: 2px solid #138808;
    border-radius: 6px;
    padding: 38px;
    margin: 20px 0;
    box-shadow: 0 4px 18px rgba(19, 136, 8, 0.06);
}

.guardrails-box h2 {
    font: 700 26px var(--display);
    color: #1e2940;
    margin: 10px 0 24px;
}

.guardrails-list {
    display: grid;
    gap: 18px;
}

.guardrail-item {
    font-size: 15px;
    line-height: 1.75;
    color: #293c5b;
    padding-left: 20px;
    border-left: 3px solid #edaa36;
}

.guardrail-item strong {
    color: #1e2940;
    display: block;
    margin-bottom: 4px;
}

/* Homepage Dualities Feature */
.dualities-section {
    background: #ede8dd;
    padding: 70px 0;
    border-top: 1px solid #d8d4ca;
    border-bottom: 1px solid #d8d4ca;
}

.duality-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 24px;
    margin-top: 36px;
}

.duality-card {
    background: #fff;
    border: 1px solid rgba(30, 41, 64, 0.12);
    border-radius: 4px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.duality-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(30, 41, 64, 0.08);
}

.duality-tag {
    font: 700 10px var(--mono);
    color: #cf794d;
    letter-spacing: 0.8px;
    margin-bottom: 12px;
}

.duality-card h3 {
    font: 700 20px var(--display);
    color: #1e2940;
    margin: 0 0 10px;
    line-height: 1.35;
}

.duality-card p {
    font-size: 14px;
    line-height: 1.65;
    color: #435473;
    margin: 0 0 16px;
    flex-grow: 1;
}

.duality-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #f4f0e8;
    border-radius: 20px;
    font: 600 11px var(--mono);
    color: #1e2940;
    width: fit-content;
}

.duality-pill i {
    width: 6px;
    height: 6px;
    background: #138808;
    border-radius: 50%;
    display: inline-block;
}

/* Atlas Dimension Context Details */
.atlas-context-block {
    margin-top: 14px;
    padding: 12px 14px;
    background: #fbf9f5;
    border-left: 3px solid #edaa36;
    border-radius: 0 4px 4px 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: #293c5b;
}

.atlas-context-tag {
    font: 700 10px var(--mono);
    color: #edaa36;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 4px;
}

/* Platform Launch Status Callout */
.platform-status-callout {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: rgba(19, 136, 8, 0.08);
    border: 1px solid rgba(19, 136, 8, 0.28);
    border-radius: 6px;
    margin-bottom: 24px;
    max-width: 680px;
}

.platform-status-callout .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #138808;
    color: #fff;
    font: 700 10px var(--mono);
    letter-spacing: 0.8px;
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
}

.platform-status-callout .status-pulse {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: statusPulse 2s infinite ease-in-out;
}

@keyframes statusPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.platform-status-callout .status-text {
    font-size: 13px;
    line-height: 1.5;
    color: #1e2940;
}

.platform-status-callout .status-text strong {
    color: #138808;
}

/* Citation superscripts & References block */
sup a.ref-cite {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    color: #16834c;
    text-decoration: none;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(22, 131, 76, 0.1);
    margin-left: 2px;
    transition: background 0.2s, color 0.2s;
}

sup a.ref-cite:hover {
    background: #16834c;
    color: #fff;
}

.references-section {
    background: #ece7dc;
    border-top: 1px solid #d4cebe;
    padding: 70px 0;
}

.references-header {
    margin-bottom: 36px;
}

.references-grid {
    display: grid;
    gap: 18px;
}

.ref-card {
    display: flex;
    gap: 18px;
    background: #fff;
    border: 1px solid rgba(30, 41, 64, 0.12);
    border-radius: 6px;
    padding: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ref-card:target {
    border-color: #16834c;
    box-shadow: 0 0 0 3px rgba(22, 131, 76, 0.2);
}

.ref-num {
    font: 700 13px var(--mono);
    color: #16834c;
    min-width: 28px;
    padding-top: 2px;
}

.ref-body h4 {
    font: 700 18px var(--display);
    color: #1e2940;
    margin: 0 0 6px;
}

.ref-source {
    font-size: 13.5px;
    line-height: 1.6;
    color: #556682;
    margin: 0 0 10px;
}

.ref-source strong {
    color: #1e2940;
}

.ref-desc {
    font-size: 14px;
    line-height: 1.65;
    color: #293c5b;
    margin: 0 0 14px;
}

.ref-pill {
    display: inline-block;
    padding: 4px 10px;
    background: #f4f0e8;
    border-radius: 3px;
    font: 600 11px var(--mono);
    color: #634f36;
}

/* Question-Led Hub Styles */
.inquiry-grid {
    display: grid;
    gap: 32px;
    margin-top: 36px;
}

.inquiry-card {
    background: #fff;
    border: 1px solid rgba(30, 41, 64, 0.12);
    border-radius: 6px;
    padding: 36px;
    box-shadow: 0 4px 20px rgba(30, 41, 64, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.inquiry-card:hover {
    box-shadow: 0 8px 30px rgba(30, 41, 64, 0.08);
}

.inquiry-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.inquiry-number {
    font: 700 12px var(--mono);
    color: #edaa36;
    letter-spacing: 1px;
}

.inquiry-dimension-tag {
    font: 600 11px var(--mono);
    padding: 4px 10px;
    background: #f4f0e8;
    border-radius: 20px;
    color: #1e2940;
}

.inquiry-card h2,
.inquiry-card h3 {
    font: 700 24px var(--display);
    color: #1e2940;
    margin: 0 0 16px;
    line-height: 1.3;
}

.inquiry-lede {
    font-size: 15.5px;
    line-height: 1.7;
    color: #3b4e6b;
    margin-bottom: 24px;
}

.inquiry-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
    padding-top: 20px;
    border-top: 1px solid #ede8dd;
}

.inquiry-col-box {
    background: #fcfbfa;
    border: 1px solid #ede8dd;
    border-radius: 4px;
    padding: 18px 20px;
}

.inquiry-col-box h4 {
    font: 700 12px var(--mono);
    color: #1e2940;
    letter-spacing: 0.5px;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.inquiry-col-box p {
    font-size: 13.5px;
    line-height: 1.65;
    color: #435473;
    margin: 0;
}

.inquiry-approach {
    background: #f5f8f5;
    border-left: 3px solid #138808;
    border-radius: 0 4px 4px 0;
    padding: 16px 20px;
    font-size: 13.5px;
    line-height: 1.65;
    color: #1f3b25;
}

.inquiry-approach strong {
    color: #138808;
}

@media (max-width: 900px) {
    .thesis-lead-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .habit-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .panel-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 900px) {
    .footer-main {
        grid-template-columns: minmax(220px, 1.2fr) 1fr 1fr;
    }

    .footer-contact {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: auto 1fr 1fr auto;
        align-items: center;
    }
}

@media (max-width: 620px) {
    .site-footer {
        padding-top: 42px;
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 28px 20px;
        padding-bottom: 30px;
    }

    .footer-brand-block {
        grid-column: 1 / -1;
    }

    .footer-tagline {
        margin-top: 18px;
        font-size: 24px;
    }

    .footer-contact {
        grid-column: 1 / -1;
        display: flex;
        align-items: flex-start;
    }

    .footer-base {
        flex-direction: column;
        gap: 6px;
        padding-top: 14px;
        padding-bottom: 18px;
    }

    .analytics-consent {
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
        padding: 18px;
    }
}