@font-face {
    font-family: "Manrope";
    src: url("../fonts/Manrope.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sora";
    src: url("../fonts/Sora.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-bg: #faf9f6;
    --color-surface: #fff;
    --color-photo-surface: #e5e4ed;
    --color-text: #202338;
    --color-text-muted: #666878;
    --color-primary: #5240b9;
    --color-accent: #bfe7d5;
    --color-secondary: #e8e3fa;
    --color-border: #e5e2e9;
    --color-dark: #222042;
    --color-lavender: #ebe6fb;
    --color-sand: #f2f0ea;
    --color-peach: #fae8df;
    --color-primary-hover: #392d94;
    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 72px;
    --space-8: 112px;
    --text-display: clamp(2.8rem, 5.9vw, 6.25rem);
    --text-h1: clamp(2.8rem, 5.2vw, 5.8rem);
    --text-h2: clamp(2.35rem, 4.2vw, 4.25rem);
    --text-h3: clamp(1.4rem, 2.2vw, 2rem);
    --text-body: 1rem;
    --text-small: .875rem;
    --radius-s: 12px;
    --radius-m: 20px;
    --radius-l: 32px;
    --shadow: 0 16px 60px rgba(34, 27, 76, .08)
}

*,
*::before,
*::after {
    box-sizing: border-box
}

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

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: 'Manrope', Arial, sans-serif;
    font-size: var(--text-body);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased
}

html.menu-open,
html.menu-open > body {
    overflow-y: hidden;
}

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

button,
input,
textarea,
select {
    font: inherit
}

button,
a,
summary,
input,
select,
textarea {
    outline-offset: 4px
}

button {
    cursor: pointer
}

a,
button {
    transition: color .25s ease, background-color .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid #9687f2
}

::selection {
    background: var(--color-accent);
    color: var(--color-text)
}

h1,
h2,
h3,
h4,
p,
figure {
    margin: 0
}

h1,
h2,
h3 {
    font-family: 'Sora', sans-serif;
    line-height: 1.13;
    letter-spacing: -.055em;
    font-weight: 600
}

h1 {
    font-size: var(--text-h1)
}

h2 {
    font-size: var(--text-h2)
}

h3 {
    font-size: var(--text-h3)
}

h1 em,
h2 em,
h3 em {
    font-weight: 500;
    color: var(--color-primary);
    font-style: normal
}

p {
    color: var(--color-text-muted)
}

h2+p,
h3+p {
    margin-top: var(--space-4)
}

p+p {
    margin-top: var(--space-3)
}

img {
    max-width: 100%
}

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

.max-780 {
    max-width: 780px
}

.section {
    padding-block: clamp(78px, 9vw, 142px)
}

.section-soft {
    background: #f1efec
}

.section-dark {
    background: var(--color-dark);
    color: #fff;
    overflow: hidden
}

.section-dark h2,
.section-dark p {
    color: #fff
}

.lead {
    font-size: clamp(1.07rem, 1.4vw, 1.27rem);
    line-height: 1.85;
    letter-spacing: -.012em
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .19em;
    text-transform: uppercase;
    color: var(--color-primary);
    line-height: 1.5;
    margin-bottom: var(--space-4)
}

.eyebrow-mini {
    font-weight: 800;
    color: var(--color-primary);
    font-size: .7rem;
    letter-spacing: .15em;
    text-transform: uppercase
}

.section-dark .eyebrow {
    color: var(--color-accent)
}

.micro-motif {
    width: 30px;
    height: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    transform: rotate(-16deg);
    flex-shrink: 0
}

.micro-motif i {
    border-radius: 50%;
    background: var(--color-primary)
}

.micro-motif i:nth-child(2),
.micro-motif i:nth-child(3) {
    opacity: .4
}

.micro-motif i:nth-child(4) {
    background: var(--color-accent)
}

.visual {
    position: relative;
    overflow: hidden;
    background: #d7d3e7;
    width: 100%;
    margin: 0;
    border-radius: var(--radius-l);
    isolation: isolate
}

.visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1
}

.visual img.is-missing {
    visibility: hidden
}

.photo-square {
    aspect-ratio: 1.06/1
}

.photo-landscape {
    aspect-ratio: 1.35/1
}

.story-photo {
    aspect-ratio: 1.42/1
}

.area-photo {
    aspect-ratio: 1/1
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 16px 25px;
    border: 1px solid transparent;
    border-radius: 50px;
    min-height: 52px;
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.15;
    white-space: nowrap;
    text-align: center
}

.btn span {
    font-size: 1.2rem;
    line-height: 1
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(69, 56, 166, .18)
}

.btn-primary {
    background: var(--color-primary);
    color: #fff
}

.btn-primary:hover {
    background: var(--color-primary-hover)
}

.btn-light {
    background: var(--color-accent);
    color: var(--color-dark)
}

.btn-light:hover {
    background: #a6dbc3
}

.btn-outline {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text)
}

.btn-outline:hover {
    background: #fff;
    border-color: var(--color-primary)
}

.btn-small {
    padding: 12px 19px;
    min-height: 44px;
    gap: 13px;
    font-size: .79rem
}

.quiet-link {
    font-size: .9rem;
    font-weight: 800;
    border-bottom: 1px solid var(--color-primary);
    padding-bottom: 6px
}

.quiet-link:hover {
    color: var(--color-primary)
}

.quiet-link span {
    display: inline-block;
    margin-left: 8px
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 20px;
    background: #fff;
    z-index: 1000;
    padding: 14px
}

.skip-link:focus {
    top: 10px
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 249, 246, .94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(33, 35, 57, .06)
}

.menu-open .site-header {
    position: fixed;
    width: 100%;
}

.header-inner {
    height: 91px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0
}

.brand-mark {
    display: grid;
    place-items: center;
    background: transparent;
    width: 43px;
    height: 43px;
    border-radius: 13px;
    position: relative;
    flex-shrink: 0
}

.brand-mark::before {
    content: none
}

.brand-mark img {
    z-index: 1;
    width: 35px;
    height: 35px;
    object-fit: contain
}

.brand-mark img.is-missing {
    visibility: hidden
}

.brand-text {
    display: flex;
    flex-direction: column;
    font-family: 'Sora', sans-serif;
    font-size: 1.55rem;
    line-height: .94;
    font-weight: 800;
    letter-spacing: -.075em;
    color: var(--color-text)
}

.brand-text>span {
    display: inline;
    color: var(--color-primary)
}

.brand-text small {
    font: 800 .49rem 'Manrope', sans-serif;
    letter-spacing: .215em;
    margin-top: 7px;
    color: var(--color-text-muted)
}

.brand-text {
    display: block
}

.brand-text small {
    display: block
}

.desktop-nav,
.header-actions {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.65vw, 27px)
}

.desktop-nav>a,
.header-minor {
    font-weight: 800;
    color: #454456;
    font-size: .76rem;
    white-space: nowrap
}

.desktop-nav>a.active,
.desktop-nav>a:hover,
.header-minor:hover {
    color: var(--color-primary)
}

.header-actions {
    gap: 15px
}

.menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: 10px;
    width: 44px;
    height: 44px
}

.menu-toggle span {
    height: 2px;
    width: 23px;
    background: var(--color-text);
    display: block;
    margin: 5px auto
}

.mobile-nav {
    display: none
}

.hero {
    overflow: hidden
}

.hero-home {
    padding-top: 65px;
    position: relative;
    background: radial-gradient(circle at 90% 23%, rgba(224, 217, 245, .66), transparent 33%), linear-gradient(120deg, #faf9f6, #f7f6f2)
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.07fr .93fr;
    align-items: center;
    min-height: 670px;
    gap: 45px
}

.hero-copy {
    padding: 40px 0 90px;
    z-index: 2
}

.hero-copy h1 {
    font-size: clamp(3.4rem, 5.7vw, 5.7rem);
    max-width: 790px;
    letter-spacing: -.075em
}

.hero-copy h1 em {
    display: inline;
    color: var(--color-primary)
}

.hero-copy .lead {
    max-width: 550px;
    margin-top: 26px
}

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 38px
}

.hero-facts {
    display: flex;
    gap: 0;
    margin-top: 56px;
    border-top: 1px solid var(--color-border);
    padding-top: 23px
}

.hero-facts div {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-right: 27px;
    margin-right: 26px;
    border-right: 1px solid var(--color-border)
}

.hero-facts div:last-child {
    border-right: 0;
    margin-right: 0;
    padding-right: 0
}

.hero-facts strong {
    font-family: 'Sora';
    font-size: 1.7rem;
    line-height: 1.25;
    letter-spacing: -.06em
}

.hero-facts span {
    font-size: .72rem;
    color: var(--color-text-muted);
    font-weight: 700
}

.hero-stage {
    height: 610px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.hero-photo {
    width: 80%;
    height: 89%;
    position: relative;
    z-index: 2;
    margin-left: 40px;
    margin-top: 8px
}

.hero-portrait {
    height: 100%;
    border-radius: 220px 220px 36px 36px
}

.floating-microcard {
    position: absolute;
    right: -40px;
    bottom: 37px;
    z-index: 4;
    background: #fff;
    border: 1px solid #e6e4f2;
    border-radius: 20px;
    padding: 21px 23px;
    box-shadow: var(--shadow);
    width: 231px
}

.floating-microcard small {
    display: block;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--color-text-muted)
}

.floating-microcard strong {
    display: block;
    font-family: 'Sora';
    font-size: 1.15rem;
    letter-spacing: -.04em;
    margin-top: 7px
}

.pulse-small {
    display: block;
    width: 10px;
    height: 10px;
    background: var(--color-accent);
    border-radius: 50%;
    margin-bottom: 12px;
    box-shadow: 0 0 0 5px #e9f6ef
}

.tiny-bars {
    display: flex;
    align-items: end;
    gap: 7px;
    height: 32px;
    margin-top: 13px
}

.tiny-bars b {
    display: block;
    background: var(--color-primary);
    height: 70%;
    width: 32px;
    border-radius: 5px
}

.tiny-bars b:nth-child(2) {
    height: 42%;
    background: #b3a3f5
}

.tiny-bars b:nth-child(3) {
    height: 90%;
    background: #b7e4d1
}

.tiny-bars b:nth-child(4) {
    height: 61%;
    background: #e5d5eb
}

.hero-orbit {
    position: absolute;
    left: -52px;
    top: 55px;
    width: 245px;
    height: 245px;
    border-radius: 50%;
    border: 1px solid #9990cc;
    z-index: 3;
    transform: rotate(-16deg);
    pointer-events: none
}

.hero-orbit::before,
.hero-orbit::after {
    content: '';
    position: absolute;
    inset: 37px;
    border: 1px solid #a79bd9;
    border-radius: 50%
}

.hero-orbit::after {
    inset: 80px;
    background: rgba(255, 255, 255, .88);
    border: 0
}

.orbit-dot {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--color-primary)
}

.orbit-dot.one {
    top: -7px;
    left: 49%
}

.orbit-dot.two {
    right: -7px;
    top: 49%;
    background: var(--color-accent)
}

.orbit-dot.three {
    bottom: -7px;
    left: 49%
}

.orbit-dot.four {
    left: -7px;
    top: 49%;
    background: #beafe9
}

.orbit-core {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: bold 36px 'Sora';
    letter-spacing: -.14em
}

.orbit-core span {
    color: var(--color-primary)
}

.hero-tail {
    border-top: 1px solid var(--color-border);
    padding: 22px 0 26px;
    display: flex;
    align-items: center;
    gap: 20px
}

.hero-tail p {
    flex: 1;
    font-size: .83rem
}

.hero-tail strong {
    color: var(--color-text)
}

.hero-tail a {
    font-size: .8rem;
    font-weight: 800
}

.hero-tail a span {
    margin-left: 11px;
    color: var(--color-primary)
}

.signal {
    display: flex;
    gap: 4px;
    align-items: center;
    transform: rotate(-18deg)
}

.signal i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary)
}

.signal i:nth-child(3) {
    opacity: .5
}

.signal i:nth-child(4) {
    background: var(--color-accent)
}

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

.section-heading h2 {
    max-width: 760px
}

.section-heading>p {
    max-width: 360px;
    font-size: .96rem
}

.areas-grid {
    display: grid;
    grid-template-columns: 1.18fr 1fr 1fr;
    grid-template-rows: repeat(2, minmax(270px, 1fr));
    gap: 18px
}

.area-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-l);
    padding: 31px;
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    min-height: 270px
}

.area-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow)
}

.area-card-feature {
    grid-row: span 2;
    padding: 0;
    min-height: 600px;
    color: #fff;
    background: var(--color-dark)
}

.area-card-feature .visual {
    position: absolute;
    inset: 0;
    height: 100%;
    border-radius: 0
}

.area-inner {
    padding: 34px;
    position: relative;
    z-index: 3;
    margin-top: auto
}

.area-card-feature h3 {
    color: #fff;
    font-size: 2.2rem
}

.area-card-feature p {
    color: rgba(255, 255, 255, .85);
    max-width: 310px
}

.area-number {
    font-size: .69rem;
    letter-spacing: .14em;
    font-weight: 800
}

.area-card h3 {
    font-size: clamp(1.55rem, 2.1vw, 2.3rem);
    margin-top: auto;
    line-height: 1.24
}

.area-card p {
    font-size: .86rem;
    line-height: 1.8;
    margin-top: 10px;
    max-width: 270px
}

.area-card-violet {
    background: #e5dff7
}

.area-card-mint {
    background: #d4eadf
}

.area-card-peach {
    background: #f4e1dc
}

.round-arrow {
    position: absolute;
    right: 27px;
    bottom: 27px;
    border: 1px solid rgba(40, 33, 72, .17);
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.3rem
}

.area-card-feature .round-arrow {
    border-color: #fff
}

.pattern-illustration {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--color-primary);
    font-size: 3rem;
    line-height: 1;
    letter-spacing: -.09em;
    margin: 25px 0
}

.pattern-illustration i {
    font-style: normal
}

.pattern-illustration i:nth-child(4) {
    color: #7d6ab8;
    font-size: 2rem
}

.word-decor {
    font: bold 2.4rem 'Sora';
    letter-spacing: -.07em;
    color: #466a5d;
    margin: 18px 0
}

.word-decor span {
    color: #728f83;
    margin: 0 5px
}

.focus-decor {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    max-width: 260px;
    gap: 7px;
    margin: 13px 0 16px
}

.focus-decor b {
    background: rgba(255, 255, 255, .47);
    border-radius: 6px;
    font: 700 1.4rem 'Sora';
    text-align: center;
    padding: 9px 0;
    color: #71473d
}

.focus-decor b:nth-child(3),
.focus-decor b:nth-child(5) {
    background: #fff
}

.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(50px, 8vw, 125px);
    align-items: center
}

.split-section.reverse .split-media {
    order: 2
}

.split-section.reverse .split-copy {
    order: 1
}

.split-media {
    position: relative
}

.split-media .visual {
    box-shadow: var(--shadow)
}

.split-copy h2 {
    margin-bottom: 26px
}

.split-copy>p {
    font-size: 1rem;
    line-height: 1.9
}

.split-copy .btn {
    margin-top: 32px
}

.media-seal {
    position: absolute;
    bottom: -22px;
    right: -25px;
    background: var(--color-primary);
    color: #fff;
    padding: 22px 27px;
    border-radius: 20px;
    transform: rotate(5deg);
    font-size: .78rem;
    line-height: 1.55
}

.media-seal strong {
    font-size: 1rem
}

.floating-label {
    position: absolute;
    top: 22px;
    left: -18px;
    background: #fff;
    border-radius: 50px;
    padding: 10px 17px;
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .1em;
    box-shadow: var(--shadow)
}

.steps-list {
    margin-top: 35px
}

.steps-list>div {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    padding: 18px 0;
    border-top: 1px solid var(--color-border)
}

.steps-list>div>span {
    font: 700 1.13rem 'Sora';
    color: var(--color-primary)
}

.steps-list h3 {
    font-size: 1.08rem;
    letter-spacing: -.03em
}

.steps-list p {
    font-size: .86rem;
    margin-top: 6px
}

.insight-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 85px
}

.insight-grid h2 em {
    color: var(--color-accent)
}

.insight-grid .lead {
    max-width: 490px;
    margin: 25px 0 32px;
    color: #cdccdf
}

.report-art {
    background: #fff;
    color: var(--color-text);
    border-radius: 30px;
    padding: 35px 40px;
    transform: rotate(3deg);
    box-shadow: 0 25px 80px rgba(8, 7, 22, .4);
    position: relative
}

.report-art::before {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 1px solid rgba(145, 132, 207, .5);
    right: -65px;
    top: -55px;
    z-index: -1
}

.report-art-top,
.report-art-bottom {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .1em;
    color: #8a869c
}

.report-art-top span:last-child {
    color: var(--color-primary)
}

.report-art h3 {
    font-size: 1.75rem;
    margin: 35px 0 26px
}

.report-art-lines>div {
    display: grid;
    grid-template-columns: 105px 1fr;
    align-items: center;
    gap: 22px;
    margin-bottom: 21px;
    font-size: .85rem;
    font-weight: 700
}

.report-art-lines i {
    height: 11px;
    background: #eeeef3;
    border-radius: 50px;
    position: relative;
    overflow: hidden
}

.report-art-lines i::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--bar);
    background: var(--color-primary);
    border-radius: 50px
}

.report-art-lines>div:nth-child(2) i::before {
    background: #94a5e2
}

.report-art-lines>div:nth-child(3) i::before {
    background: #a7dccc
}

.report-art-lines>div:nth-child(4) i::before {
    background: #d9bbbd
}

.report-art-bottom {
    border-top: 1px solid var(--color-border);
    padding-top: 18px;
    margin-top: 30px
}

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

.story-card {
    display: block
}

.story-card:hover .visual img {
    transform: scale(1.045)
}

.story-card .visual img {
    transition: transform .45s
}

.story-card h3 {
    font-size: 1.48rem;
    line-height: 1.36;
    letter-spacing: -.04em;
    margin-top: 11px
}

.story-card p {
    font-size: .88rem;
    margin-top: 13px
}

.story-meta {
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--color-primary);
    margin-top: 24px
}

.inline-more {
    display: inline-block;
    font-size: .8rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-top: 18px
}

.qa-grid {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    gap: 90px
}

.qa-grid>div:first-child p {
    max-width: 320px;
    margin: 22px 0 28px
}

.accordion details {
    border-bottom: 1px solid #d6d3d3
}

.accordion details:first-child {
    border-top: 1px solid #d6d3d3
}

.accordion summary,
.exercise-card summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    font-weight: 800;
    font-size: 1rem;
    min-height: 72px
}

.accordion summary::-webkit-details-marker,
.exercise-card summary::-webkit-details-marker {
    display: none
}

.accordion summary span {
    font-size: 1.5rem;
    color: var(--color-primary);
    transition: transform .25s
}

.accordion details[open] summary span {
    transform: rotate(45deg)
}

.accordion details p {
    font-size: .92rem;
    line-height: 1.9;
    padding: 0 32px 24px 0
}

.final-cta {
    padding-block: 72px
}

.final-cta-inner {
    position: relative;
    overflow: hidden;
    background: var(--color-lavender);
    border-radius: 36px;
    padding: 70px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 35px
}

.final-cta h2 {
    max-width: 800px
}

.final-cta p {
    margin-top: 20px;
    max-width: 550px
}

.final-cta .btn {
    flex-shrink: 0;
    position: relative;
    z-index: 1
}

.cta-orbit {
    position: absolute;
    right: 30px;
    top: -140px;
    width: 400px;
    height: 400px;
    border: 1px solid #c3b7eb;
    border-radius: 50%;
    pointer-events: none
}

.cta-orbit::before,
.cta-orbit::after {
    content: '';
    position: absolute;
    inset: 50px;
    border: 1px solid #c3b7eb;
    border-radius: 50%
}

.cta-orbit::after {
    inset: 100px
}

.cta-orbit i {
    position: absolute;
    width: 18px;
    height: 18px;
    background: var(--color-primary);
    border-radius: 50%;
    top: 50%;
    left: -9px
}

.cta-orbit i:nth-child(2) {
    top: 0;
    left: 50%;
    background: #9fbcae
}

.cta-orbit i:nth-child(3) {
    top: 50%;
    left: auto;
    right: -9px;
    background: #9fbcae
}

.cta-orbit i:nth-child(4) {
    top: auto;
    bottom: -9px;
    left: 50%
}

.site-footer {
    background: #24213c;
    color: #fff;
    padding: 82px 0 30px
}

.footer-top {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 48px
}

.brand-inverse .brand-text {
    color: #fff
}

.brand-inverse .brand-text>span {
    color: #c4b5ff
}

.brand-inverse .brand-text small {
    color: #b0aabd
}

.brand-inverse .brand-mark {
    background: transparent
}

.brand-inverse .brand-mark::before {
    content: none
}

.footer-intro p {
    margin-top: 25px;
    font-size: .87rem;
    line-height: 1.95;
    max-width: 380px;
    color: #c0bdd0
}

.footer-motif {
    display: flex;
    gap: 13px;
    margin-top: 27px;
    transform: rotate(-24deg);
    transform-origin: left center
}

.footer-motif i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #b8acf1
}

.footer-motif i:nth-child(2) {
    background: #c4e8d9
}

.footer-motif i:nth-child(4) {
    opacity: .4
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.footer-links h3 {
    font-size: .79rem;
    letter-spacing: .14em;
    font-family: 'Manrope';
    color: #ddd5ff;
    margin: 4px 0 17px
}

.footer-links a {
    font-size: .81rem;
    color: #c0bdd0;
    line-height: 1.65
}

.footer-links a:hover {
    color: #fff;
    transform: translateX(4px)
}

.footer-disclaimer {
    border-top: 1px solid rgba(255, 255, 255, .15);
    padding: 24px 0;
    margin-top: 52px;
    font-size: .75rem;
    line-height: 1.9;
    color: #a8a5b9
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    color: #aaa6bf;
    font-size: .72rem
}

.footer-bottom a:hover {
    color: #fff
}

.cookie-panel {
    position: fixed;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1040px, calc(100% - 32px));
    z-index: 200;
    background: #fff;
    border: 1px solid var(--color-border);
    box-shadow: 0 20px 70px rgba(26, 22, 58, .2);
    padding: 21px 26px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px
}

.cookie-panel[hidden] {
    display: none
}

.cookie-panel strong {
    font-family: 'Sora';
    font-size: .94rem
}

.cookie-panel p {
    font-size: .78rem;
    margin-top: 5px;
    line-height: 1.6;
    max-width: 620px
}

.cookie-panel p a {
    text-decoration: underline;
    color: var(--color-primary)
}

.cookie-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0
}

.page-hero {
    padding: 100px 0 92px
}

.light-hero {
    background: radial-gradient(circle at 85% 15%, #e6e0f8, transparent 33%), #f7f5f2;
    overflow: hidden
}

.page-hero h1 {
    margin-bottom: 28px;
    max-width: 1030px;
    word-break: break-word;
}

.page-hero .btn {
    margin-top: 35px
}

.page-hero .lead {
    max-width: 760px
}

.page-hero em {
    color: var(--color-primary)
}

.page-hero h1 {
    font-size: clamp(3.2rem, 5.5vw, 6.4rem)
}

.info-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    padding: 60px;
    border-radius: 30px;
    background: var(--color-secondary)
}

.info-band strong {
    color: var(--color-text)
}

.info-band .btn {
    margin-top: 27px
}

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

.three-values article {
    background: #fff;
    border-radius: 22px;
    padding: 34px
}

.three-values article>span {
    color: var(--color-primary);
    font-weight: 800;
    font-size: .76rem
}

.three-values article h3 {
    font-size: 1.43rem;
    margin: 30px 0 12px
}

.three-values article p {
    font-size: .87rem;
    line-height: 1.85
}

.two-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.two-panel>div {
    border-radius: 28px;
    padding: 43px
}

.panel-pos {
    background: #d3e8de
}

.panel-neg {
    background: #e5e0f3
}

.large-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border: 1px solid var(--color-text);
    border-radius: 50%;
    font: 500 2rem 'Sora';
    margin-bottom: 35px
}

.two-panel h3 {
    font-size: 1.7rem
}

.two-panel p {
    max-width: 510px;
    margin-top: 15px
}

.four-stat {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 30px 0
}

.four-stat div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-right: 1px solid var(--color-border);
    padding: 12px 35px
}

.four-stat div:last-child {
    border: 0
}

.four-stat strong {
    font: 600 clamp(2rem, 4vw, 4rem) 'Sora';
    letter-spacing: -.08em
}

.four-stat span {
    color: var(--color-text-muted);
    font-size: .8rem
}

.method-bottom {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 35px;
    margin-top: 80px
}

.method-bottom h2 {
    max-width: 560px
}

.method-bottom p {
    max-width: 330px
}

.method-bottom .btn {
    margin-left: auto;
    align-self: center
}

.journal-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center;
    margin-bottom: 70px;
    padding-bottom: 70px;
    border-bottom: 1px solid var(--color-border)
}

.journal-feature h2 {
    margin: 25px 0
}

.journal-feature p {
    margin: 20px 0 30px
}

.journal-list {
    margin-top: 10px
}

.article-header {
    max-width: 980px;
    margin: 0 auto 65px
}

.article-header .eyebrow-mini {
    margin-top: 30px
}

.article-header h1 {
    margin: 16px 0 28px;
    font-size: clamp(2.8rem, 5vw, 5.6rem)
}

.article-prose {
    max-width: 790px;
    margin: 0 auto
}

.prose h2 {
    font-size: clamp(1.7rem, 2.6vw, 2.35rem);
    margin: 40px 0 19px;
    line-height: 1.25
}

.prose p {
    font-size: 1.04rem;
    line-height: 2;
    margin: 0 0 24px
}

.prose p:first-child::first-letter {
    font-family: 'Sora';
    font-weight: 700;
    font-size: 3rem;
    float: left;
    line-height: 1;
    margin: 8px 9px 0 0;
    color: var(--color-primary)
}

.crumb {
    display: inline-block;
    font-size: .82rem;
    font-weight: 800;
    color: var(--color-primary)
}

.cta-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px
}

.cta-strip h2 {
    font-size: 2.5rem
}

.cta-strip p {
    margin-top: 15px
}

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

.exercise-card {
    padding: 30px;
    border-radius: 27px;
    background: #fff;
    border: 1px solid var(--color-border)
}

.exercise-kicker {
    font-weight: 800;
    letter-spacing: .13em;
    font-size: .67rem;
    color: var(--color-primary)
}

.exercise-display {
    margin: 33px 0;
    padding: 34px 16px;
    background: var(--color-secondary);
    min-height: 135px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    text-align: center;
    font: 600 clamp(1.1rem, 1.6vw, 1.9rem) 'Sora';
    letter-spacing: -.045em;
    white-space: nowrap
}

.exercise-display span {
    color: #9685db
}

.exercise-card:nth-child(2) .exercise-display {
    background: var(--color-accent)
}

.exercise-card:nth-child(3) .exercise-display {
    background: var(--color-peach)
}

.words-display {
    font-size: 1.4rem;
    line-height: 1.4
}

.mono-display {
    font-family: monospace;
    letter-spacing: .1em
}

.exercise-card h3 {
    font-size: 1.35rem
}

.exercise-card p {
    font-size: .84rem;
    margin-top: 15px
}

.exercise-card details {
    border-top: 1px solid var(--color-border);
    margin-top: 22px
}

.exercise-card summary {
    font-size: .82rem;
    min-height: 59px;
    color: var(--color-primary)
}

.exercise-card details p {
    margin: 0 0 15px
}

.exercise-card details[open] summary span {
    transform: rotate(45deg)
}

.quiz-page {
    min-height: calc(100vh - 91px);
    padding: 65px 0 100px
}

.quiz-layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 60px;
    align-items: start
}

.quiz-aside .eyebrow {
    margin: 40px 0 25px
}

.quiz-aside h1 {
    font-size: clamp(2.55rem, 4vw, 4.4rem)
}

.quiz-aside>p {
    margin-top: 26px;
    max-width: 400px
}

.quiz-info {
    display: flex;
    gap: 23px;
    margin-top: 34px
}

.quiz-info div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-right: 20px;
    border-right: 1px solid var(--color-border)
}

.quiz-info div:last-child {
    border: 0
}

.quiz-info strong {
    font: bold 1.5rem 'Sora'
}

.quiz-info span {
    font-size: .72rem;
    color: var(--color-text-muted)
}

.quiz-notice {
    display: flex;
    gap: 15px;
    background: #e3e0ed;
    border-radius: 20px;
    padding: 24px;
    margin-top: 38px
}

.quiz-notice span {
    color: var(--color-primary);
    font-size: 1.6rem;
    line-height: 1
}

.quiz-notice p {
    font-size: .81rem
}

.quiz-shell {
    background: #fff;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    border-radius: 28px;
    overflow: hidden
}

.quiz-upper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 29px 35px 19px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .15em;
    color: var(--color-primary)
}

.quiz-progress {
    height: 7px;
    background: #f1edf8
}

.quiz-progress span {
    display: block;
    background: var(--color-primary);
    height: 100%;
    width: 0;
    transition: width .3s
}

.quiz-body {
    padding: 45px 38px 35px;
    min-height: 490px
}

.quiz-notation {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .11em;
    color: #8b859d
}

.numnode {
    width: 51px;
    height: 51px;
    display: grid;
    place-items: center;
    background: var(--color-secondary);
    color: var(--color-primary);
    border-radius: 14px;
    font: 700 1.3rem 'Sora'
}

.quiz-body h2 {
    font-size: clamp(1.7rem, 2.5vw, 2.5rem);
    margin: 30px 0 12px;
    line-height: 1.35
}

.quiz-hint {
    font-size: .87rem
}

.quiz-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 28px
}

.quiz-option {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 12px;
    min-height: 65px;
    padding: 13px 15px;
    background: #faf9fb;
    border: 1px solid var(--color-border);
    border-radius: 13px;
    color: var(--color-text);
    font-size: .9rem;
    font-weight: 700;
    white-space: normal
}

.quiz-option:hover {
    background: #f0ecfb;
    border-color: #a99be4
}

.quiz-option[aria-pressed="true"] {
    background: #eae5fb;
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary)
}

.quiz-option span {
    border: 1px solid #d7d3e0;
    background: #fff;
    border-radius: 9px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    font: .8rem 'Sora';
    flex-shrink: 0
}

.quiz-bottom {
    border-top: 1px solid var(--color-border);
    padding: 24px 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px
}

.quiz-bottom .btn {
    gap: 12px
}

.quiz-bottom button:disabled {
    opacity: .4;
    pointer-events: none
}

.quiz-feedback {
    color: var(--color-text-muted);
    font-size: .72rem;
    line-height: 1.5;
    text-align: center
}

.results-hero {
    padding-bottom: 75px
}

.results-empty {
    border: 1px solid var(--color-border);
    padding: 65px;
    border-radius: 28px;
    background: #fff;
    text-align: center
}

.results-empty h2 {
    font-size: 2.4rem
}

.results-empty p {
    margin: 20px 0 28px
}

.results-dashboard {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 25px
}

.result-score {
    background: #e5e0f7;
    border-radius: 30px;
    padding: 36px;
    align-self: start
}

.result-score h2 {
    font-size: 1.65rem;
    line-height: 1.3
}

.result-score .scorenumber {
    font: 700 6rem 'Sora';
    letter-spacing: -.1em;
    color: var(--color-primary);
    line-height: 1.2;
    margin: 30px 0 12px
}

.result-score .scorenumber span {
    font-size: 1.8rem;
    letter-spacing: 0
}

.result-score p {
    font-size: .86rem
}

.result-score .btn {
    margin-top: 25px
}

.result-main {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 30px;
    padding: 36px
}

.result-main h2 {
    font-size: 2rem
}

.result-main p {
    margin-top: 10px
}

.score-bars {
    display: grid;
    gap: 23px;
    margin: 32px 0 20px
}

.score-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    font-size: .89rem;
    font-weight: 800
}

.score-track {
    height: 12px;
    background: #f2eff5;
    border-radius: 50px;
    overflow: hidden;
    margin-top: 10px
}

.score-track span {
    height: 100%;
    display: block;
    background: var(--color-primary);
    border-radius: 50px
}

.score-item:nth-child(2) .score-track span {
    background: #8795d0
}

.score-item:nth-child(3) .score-track span {
    background: #92cbb4
}

.score-item:nth-child(4) .score-track span {
    background: #daada4
}

.score-item p {
    font-size: .8rem;
    margin-top: 8px
}

.result-details {
    margin-top: 45px
}

.result-details h2 {
    font-size: 2.6rem;
    margin-bottom: 25px
}

.answer-review {
    margin-bottom: 12px;
    border: 1px solid var(--color-border);
    border-radius: 15px;
    background: #fff;
    overflow: hidden
}

.answer-review summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 21px 24px;
    gap: 15px;
    font-weight: 800
}

.answer-review summary::-webkit-details-marker {
    display: none
}

.answer-review summary .review-status {
    font-size: .74rem;
    border-radius: 30px;
    padding: 5px 11px;
    background: #f1e5df;
    color: #7d4437;
    white-space: nowrap
}

.answer-review.is-correct summary .review-status {
    background: #d8ecdf;
    color: #2c6344
}

.answer-review p {
    padding: 0 24px 18px;
    font-size: .86rem
}

.results-recommendations {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 45px
}

.recommend-card {
    padding: 26px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 20px
}

.recommend-card .eyebrow-mini {
    display: block;
    margin-bottom: 13px
}

.recommend-card h3 {
    font-size: 1.3rem
}

.recommend-card p {
    font-size: .85rem;
    margin-top: 10px
}

.request-card {
    background: #eeeaf8;
    border-radius: 28px;
    margin-top: 55px;
    padding: 42px;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 40px
}

.request-card h2 {
    font-size: 2.3rem
}

.request-card p {
    margin-top: 20px
}

.request-card form {
    display: flex;
    flex-direction: column;
    gap: 17px
}

.request-card form label {
    font-size: .83rem;
    font-weight: 800
}

.request-card input[type=email],
.request-card input[type=text] {
    display: block;
    border: 1px solid #cac6d9;
    border-radius: 12px;
    padding: 13px 16px;
    width: 100%;
    margin-top: 9px;
    background: #fff;
    min-height: 49px
}

.request-card .check-line input {
    width: auto
}

.results-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 23px
}

.check-line {
    display: flex !important;
    align-items: flex-start;
    gap: 12px !important;
    font-size: .78rem !important;
    line-height: 1.6;
    font-weight: 600 !important
}

.check-line input {
    accent-color: var(--color-primary);
    margin-top: 4px;
    width: 18px;
    height: 18px;
    flex-shrink: 0
}

.check-line a {
    color: var(--color-primary);
    text-decoration: underline
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 70px
}

.contact-form-card {
    padding: 45px;
    border: 1px solid var(--color-border);
    border-radius: 30px;
    background: #fff;
    box-shadow: var(--shadow)
}

.contact-form-card h2 {
    font-size: 2.3rem
}

.contact-form-card>p {
    font-size: .88rem;
    margin: 15px 0 30px
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 22px
}

.contact-form label {
    display: block;
    font-size: .84rem;
    font-weight: 800
}

.contact-form input:not([type=checkbox]),
.contact-form textarea,
.contact-form select {
    display: block;
    width: 100%;
    background: #faf9f7;
    border: 1px solid #ddd9e5;
    border-radius: 12px;
    padding: 15px;
    margin-top: 10px;
    min-height: 50px;
    color: var(--color-text)
}

.contact-form textarea {
    resize: vertical
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: var(--color-primary)
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17px
}

.hp-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.contact-form .btn {
    align-self: flex-start;
    white-space: wrap;
}

.contact-aside {
    padding: 25px 0
}

.contact-aside h2 {
    font-size: 2.2rem
}

.contact-detail {
    padding: 25px 0;
    border-bottom: 1px solid var(--color-border)
}

.contact-detail>span {
    display: block;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--color-primary);
    margin-bottom: 10px
}

.contact-detail>strong {
    display: block;
    font-size: 1rem;
    overflow-wrap: anywhere
}

.contact-detail p {
    margin-top: 9px;
    font-size: .85rem
}

.contact-note {
    padding: 28px;
    background: var(--color-secondary);
    border-radius: 18px;
    margin-top: 35px
}

.contact-note strong {
    font-size: .9rem
}

.contact-note p {
    font-size: .85rem;
    margin-top: 10px
}

.pricing-layout {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 90px;
    align-items: center
}

.price-card {
    background: #fff;
    border: 1px solid var(--color-border);
    padding: 45px;
    border-radius: 30px;
    box-shadow: var(--shadow)
}

.price-card h2 {
    font-size: 2rem;
    margin: 20px 0
}

.big-price {
    font: 700 5rem 'Sora';
    letter-spacing: -.09em;
    color: var(--color-primary)
}

.big-price span {
    font-size: 2.5rem
}

.price-card p {
    font-size: .91rem;
    margin: 6px 0 27px
}

.price-card ul {
    padding: 25px 0;
    margin: 0;
    border-top: 1px solid var(--color-border);
    list-style: none
}

.price-card li {
    padding: 9px 0 9px 30px;
    position: relative;
    font-size: .86rem;
    font-weight: 700
}

.price-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary)
}

.pricing-copy h2 {
    margin: 24px 0
}

.pricing-copy p {
    margin: 17px 0
}

.price-note {
    background: #e2e8e5;
    border-radius: 20px;
    padding: 27px;
    margin: 27px 0
}

.price-note h3 {
    font-size: 1.25rem
}

.price-note p {
    font-size: .87rem
}

.legal-heading {
    padding: 95px 0 65px;
    background: var(--color-secondary)
}

.legal-heading h1 {
    font-size: clamp(2.8rem, 4.5vw, 4.7rem);
    margin-bottom: 24px;
    word-break: break-word;
}

.last-updated {
    font-size: .82rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-top: 24px
}

.legal-grid {
    display: grid;
    grid-template-columns: 255px 1fr;
    gap: 80px;
    align-items: start
}

.legal-grid aside {
    position: sticky;
    top: 132px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    background: #f0edf6;
    padding: 25px;
    border-radius: 18px
}

.legal-grid aside p {
    font-size: .81rem;
    margin: 5px 0 14px
}

.legal-grid aside a {
    font-size: .83rem;
    font-weight: 800;
    border-bottom: 1px solid #d8d1e8;
    padding: 10px 0
}

.legal-grid aside a:hover {
    color: var(--color-primary)
}

.legal-prose h2 {
    font-size: 1.45rem;
    margin: 33px 0 16px;
    line-height: 1.3
}

.legal-prose h2:first-child {
    margin-top: 0
}

.legal-prose p {
    font-size: .9rem;
    line-height: 2;
    margin: 0 0 21px
}

.legal-prose a {
    color: var(--color-primary);
    text-decoration: underline
}

.thank-status {
    display: flex;
    gap: 32px;
    align-items: center;
    padding: 40px;
    border-radius: 28px;
    background: #e2f0e8;
    margin-bottom: 27px;
    word-break: break-word;
}

.thank-status h2 {
    font-size: 2.5rem;
    margin: 10px 0
}

.thank-symbol {
    width: 110px;
    height: 110px;
    background: #fff;
    color: #4d7862;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 3.5rem;
    font-family: 'Sora';
    flex-shrink: 0
}

.thank-steps article {
    background: #f0edf7
}

.thank-resources {
    padding: 80px 0 50px
}

.thank-resources h2 {
    font-size: 2.5rem
}

.resource-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px
}

.resource-links a {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 25px;
    font-size: .95rem;
    font-weight: 800;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.resource-links a:hover {
    background: var(--color-secondary);
    transform: translateY(-3px)
}

.thank-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    border-top: 1px solid var(--color-border);
    padding-top: 40px
}

.thank-bottom strong {
    color: var(--color-text)
}

@media(max-width:1230px) {
    .container {
        width: min(1180px, calc(100% - 58px))
    }

    .desktop-nav {
        gap: 14px
    }

    .header-minor {
        display: none
    }

    .header-inner {
        height: 82px
    }

    .hero-grid {
        gap: 24px
    }

    .hero-copy h1 {
        font-size: clamp(3rem, 5.7vw, 5.25rem)
    }

    .hero-stage {
        height: 550px
    }

    .hero-orbit {
        left: -15px
    }

    .areas-grid {
        grid-template-columns: 1.1fr 1fr 1fr
    }

    .section-heading {
        gap: 35px
    }

    .footer-top {
        gap: 30px
    }

    .contact-grid {
        gap: 40px
    }
}

@media(max-width:1024px) {

    .desktop-nav,
    .header-actions .btn {
        display: none
    }

    .menu-toggle {
        display: block
    }

    .mobile-nav {
        position: fixed;
        display: flex;
        flex-direction: column;
        left: 0;
        right: 0;
        top: 82px;
        background: var(--color-bg);
        padding: 25px 30px 40px;
        box-shadow: var(--shadow);
        height: calc(100dvh - 82px);
        overflow: auto;
        transform: translateX(105%);
        transition: transform .3s;
        gap: 4px;
        z-index: 100;
    }

    .mobile-nav.is-open {
        transform: translateX(0)
    }

    .mobile-nav a {
        font-size: 1.15rem;
        font-weight: 800;
        border-bottom: 1px solid var(--color-border);
        padding: 14px 0
    }

    .header-actions {
        margin-left: auto
    }

    .hero-grid {
        grid-template-columns: 1fr .9fr
    }

    .hero-stage {
        height: 495px
    }

    .hero-photo {
        width: 86%
    }

    .hero-orbit {
        width: 180px;
        height: 180px;
        top: 45px;
        left: 0
    }

    .hero-orbit::before {
        inset: 26px
    }

    .hero-orbit::after {
        inset: 60px
    }

    .orbit-core {
        font-size: 25px
    }

    .floating-microcard {
        width: 190px;
        right: -20px;
        padding: 15px
    }

    .areas-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, 260px)
    }

    .area-card-feature {
        grid-row: span 2
    }

    .insight-grid {
        gap: 50px
    }

    .qa-grid {
        gap: 40px
    }

    .pricing-layout {
        gap: 45px
    }

    .results-dashboard {
        grid-template-columns: 300px 1fr
    }

    .quiz-layout {
        gap: 30px
    }

    .footer-top {
        grid-template-columns: 1.5fr 1fr 1fr
    }

    .footer-links:last-child {
        grid-column: 2/4
    }

    .cookie-panel {
        flex-direction: column;
        align-items: flex-start
    }

    .cookie-actions {
        align-self: flex-end
    }

    .method-bottom {
        flex-wrap: wrap
    }
}

@media(max-width:767px) {
    :root {
        --space-8: 75px
    }

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

    .section {
        padding-block: 74px
    }

    .site-header .header-inner {
        height: 76px
    }

    .mobile-nav {
        top: 76px;
        height: calc(100dvh - 76px)
    }

    .hero-home {
        padding-top: 35px
    }

    .hero-grid {
        grid-template-columns: 1fr;
        min-height: unset;
        gap: 0
    }

    .hero-copy {
        padding: 35px 0 25px
    }

    .hero-copy h1 {
        font-size: clamp(3.05rem, 11vw, 5.1rem)
    }

    .hero-copy .lead {
        margin-top: 22px
    }

    .hero-actions {
        gap: 17px;
        margin-top: 27px
    }

    .hero-facts {
        margin-top: 37px;
        gap: 12px
    }

    .hero-facts div {
        padding-right: 12px;
        margin-right: 0;
        flex: 1
    }

    .hero-facts span {
        font-size: .65rem
    }

    .hero-stage {
        height: 460px;
        max-width: 520px;
        margin: 0 auto;
        width: 100%
    }

    .hero-photo {
        width: 70%;
        height: 87%;
        margin-left: 0
    }

    .hero-orbit {
        left: 5%;
        top: 12px
    }

    .floating-microcard {
        right: -36px;
        bottom: 14px
    }

    .hero-tail {
        gap: 12px
    }

    .hero-tail a {
        display: none
    }

    .section-heading {
        display: block
    }

    .section-heading h2 {
        max-width: 100%
    }

    .section-heading>p {
        max-width: 640px;
        margin-top: 22px
    }

    .areas-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
        gap: 14px
    }

    .area-card {
        padding: 22px;
        min-height: 290px
    }

    .area-card-feature {
        grid-row: span 2;
        min-height: 610px;
        padding: 0
    }

    .area-inner {
        padding: 23px
    }

    .area-card h3 {
        font-size: 1.5rem
    }

    .area-card-feature h3 {
        font-size: 1.8rem
    }

    .area-card p {
        font-size: .78rem;
        line-height: 1.6;
        max-width: 100%;
        padding-bottom: 34px
    }

    .round-arrow {
        right: 18px;
        bottom: 17px;
        width: 35px;
        height: 35px
    }

    .pattern-illustration {
        font-size: 2rem
    }

    .word-decor {
        font-size: 1.7rem
    }

    .focus-decor {
        grid-template-columns: repeat(3, 1fr);
        max-width: 125px
    }

    .focus-decor b {
        font-size: 1rem;
        padding: 6px 0
    }

    .split-section,
    .insight-grid,
    .qa-grid,
    .journal-feature,
    .pricing-layout,
    .contact-grid,
    .info-band,
    .legal-grid {
        grid-template-columns: 100%;
        gap: 40px
    }

    .split-section.reverse .split-media {
        order: 0
    }

    .split-section.reverse .split-copy {
        order: 1
    }

    .split-media {
        max-width: 620px;
        width: 100%;
        margin: auto
    }

    .media-seal {
        right: 0
    }

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

    .story-card:last-child {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 22px;
        align-items: center
    }

    .story-card:last-child .visual {
        grid-row: span 4;
        align-self: stretch;
        min-height: 245px
    }

    .story-card:last-child .visual img {
        height: 100%
    }

    .story-card:last-child .story-meta {
        margin-top: 0
    }

    .story-card:last-child .inline-more {
        margin-top: 0
    }

    .report-art {
        max-width: 600px;
        transform: rotate(0);
        margin: 25px auto 0
    }

    .final-cta-inner {
        padding: 48px;
        display: block
    }

    .final-cta .btn {
        padding: 16px;
        margin-top: 28px
    }

    .footer-top {
        grid-template-columns: repeat(2, 1fr);
        gap: 38px
    }

    .footer-intro {
        grid-column: 1/-1
    }

    .footer-links:last-child {
        grid-column: auto
    }

    .footer-bottom {
        flex-wrap: wrap
    }

    .page-hero {
        padding: 75px 0
    }

    .page-hero h1 {
        font-size: clamp(2.85rem, 9vw, 4.7rem)
    }

    .three-values {
        grid-template-columns: 1fr
    }

    .two-panel {
        grid-template-columns: 1fr
    }

    .four-stat {
        grid-template-columns: 1fr 1fr
    }

    .four-stat div:nth-child(2) {
        border-right: 0
    }

    .four-stat div:nth-child(3),
    .four-stat div:nth-child(4) {
        border-top: 1px solid var(--color-border)
    }

    .exercise-grid {
        grid-template-columns: 1fr
    }

    .quiz-layout {
        grid-template-columns: 1fr
    }

    .quiz-page {
        padding: 45px 0
    }

    .quiz-aside {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px
    }

    .quiz-aside .crumb,
    .quiz-aside .eyebrow,
    .quiz-aside h1,
    .quiz-aside>p {
        grid-column: 1/-1
    }

    .quiz-aside .eyebrow {
        margin: 8px 0 0
    }

    .quiz-aside>p {
        margin-top: 0
    }

    .quiz-aside .quiz-info,
    .quiz-aside .quiz-notice {
        margin: 0
    }

    .quiz-notice {
        align-items: start
    }

    .quiz-info {
        align-items: center
    }

    .results-dashboard {
        grid-template-columns: 1fr
    }

    .results-recommendations {
        grid-template-columns: 1fr 1fr
    }

    .request-card {
        grid-template-columns: 1fr
    }

    .resource-links {
        grid-template-columns: 1fr
    }

    .thank-bottom {
        display: block
    }

    .thank-bottom .btn {
        margin-top: 23px
    }

    .thank-resources {
        padding-top: 55px
    }

    .legal-grid aside {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr)
    }

    .legal-grid aside .eyebrow-mini,
    .legal-grid aside p {
        grid-column: 1/-1
    }

    .journal-feature .visual {
        order: -1
    }

    .article-header {
        margin-bottom: 38px
    }
}

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

    .header-inner {
        gap: 9px
    }

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

    .brand-mark img {
        width: 31px;
        height: 31px
    }

    .brand-text {
        font-size: 1.35rem
    }

    .brand-text small {
        font-size: .42rem
    }

    .hero-copy h1 {
        font-size: clamp(2.7rem, 11.7vw, 3.7rem)
    }

    .hero-actions .btn,
    .hero-actions .quiet-link {
        width: 100%
    }

    .hero-actions .quiet-link {
        text-align: center;
        padding: 12px 0
    }

    .hero-stage {
        height: 345px
    }

    .hero-photo {
        width: 75%;
        height: 96%
    }

    .hero-orbit {
        width: 124px;
        height: 124px;
        top: 7px;
        left: -6px
    }

    .hero-orbit::before {
        inset: 19px
    }

    .hero-orbit::after {
        inset: 42px
    }

    .orbit-core {
        font-size: 19px
    }

    .orbit-dot {
        width: 9px;
        height: 9px
    }

    .floating-microcard {
        width: 153px;
        right: -18px;
        bottom: 0;
        padding: 13px
    }

    .floating-microcard strong {
        font-size: .9rem
    }

    .floating-microcard small {
        font-size: .52rem
    }

    .tiny-bars {
        height: 22px;
        gap: 3px
    }

    .tiny-bars b {
        width: 20px
    }

    .hero-facts strong {
        font-size: 1.4rem
    }

    .hero-facts span {
        font-size: .56rem
    }

    .hero-tail p {
        font-size: .73rem
    }

    .section-heading h2,
    .split-copy h2 {
        font-size: clamp(2.15rem, 8vw, 3rem)
    }

    .areas-grid {
        display: block
    }

    .area-card {
        margin-bottom: 12px;
        min-height: 260px
    }

    .area-card-feature {
        min-height: 405px
    }

    .area-card h3 {
        font-size: 1.8rem;
        margin-top: auto
    }

    .area-card-feature h3 {
        font-size: 2.15rem
    }

    .area-card p {
        font-size: .85rem
    }

    .area-card-violet,
    .area-card-mint,
    .area-card-peach {
        min-height: 245px
    }

    .pattern-illustration,
    .word-decor,
    .focus-decor {
        margin: 10px 0
    }

    .section {
        padding-block: 62px
    }

    .steps-list>div {
        gap: 5px;
        grid-template-columns: 42px 1fr
    }

    .report-art {
        padding: 26px 19px
    }

    .report-art-top,
    .report-art-bottom {
        font-size: .5rem
    }

    .report-art h3 {
        font-size: 1.3rem
    }

    .report-art-lines>div {
        grid-template-columns: 70px 1fr;
        font-size: .73rem;
        gap: 12px
    }

    .story-grid {
        grid-template-columns: 1fr
    }

    .story-card:last-child {
        display: block;
        grid-column: auto
    }

    .story-card:last-child .story-meta {
        margin-top: 24px
    }

    .story-card:last-child .visual {
        min-height: unset
    }

    .final-cta-inner {
        padding: 28px 18px;
        border-radius: 24px
    }

    .final-cta h2 {
        font-size: 2.2rem
    }

    .cta-orbit {
        opacity: .3
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 28px 15px
    }

    .footer-links a {
        font-size: .77rem
    }

    .footer-links:last-child {
        grid-column: 1/-1
    }

    .site-footer {
        padding-top: 60px
    }

    .footer-bottom {
        display: block
    }

    .footer-bottom span,
    .footer-bottom a {
        display: block;
        margin-top: 10px
    }

    .cookie-actions {
        width: 100%;
        flex-direction: column
    }

    .cookie-actions .btn {
        width: 100%
    }

    .cookie-panel {
        bottom: 10px;
        padding: 20px;
        width: calc(100% - 18px)
    }

    .page-hero h1 {
        font-size: clamp(2.55rem, 10vw, 3.4rem)
    }

    .page-hero {
        padding: 65px 0
    }

    .two-panel>div {
        padding: 28px
    }

    .four-stat div {
        padding: 20px 15px
    }

    .four-stat strong {
        font-size: 2.1rem
    }

    .quiz-aside {
        display: block
    }

    .quiz-aside .quiz-info {
        margin-top: 20px
    }

    .quiz-aside .quiz-notice {
        margin-top: 23px
    }

    .quiz-upper {
        padding: 20px
    }

    .quiz-body {
        padding: 32px 20px;
        min-height: 490px
    }

    .quiz-options {
        grid-template-columns: 1fr
    }

    .quiz-option {
        min-height: 57px
    }

    .quiz-bottom {
        padding: 18px 16px;
        flex-wrap: wrap
    }

    .quiz-bottom .btn {
        padding: 12px 14px;
        min-height: 46px
    }

    .quiz-feedback {
        order: 3;
        width: 100%
    }

    .result-score,
    .result-main {
        padding: 26px
    }

    .results-empty {
        padding: 35px 22px
    }

    .results-empty h2 {
        font-size: 1.9rem
    }

    .results-recommendations {
        grid-template-columns: 1fr
    }

    .result-details h2 {
        font-size: 2rem
    }

    .request-card {
        padding: 26px
    }

    .request-card h2 {
        font-size: 1.8rem
    }

    .contact-form-card {
        padding: 25px 18px
    }

    .field-row {
        grid-template-columns: 1fr
    }

    .contact-aside {
        padding: 0
    }

    .price-card {
        padding: 30px 22px
    }

    .legal-heading {
        padding: 65px 0 50px
    }

    .legal-grid {
        gap: 25px
    }

    .legal-grid aside {
        padding: 20px;
        gap: 5px
    }

    .legal-grid aside a {
        font-size: .73rem
    }

    .legal-prose h2 {
        font-size: 1.24rem
    }

    .thank-status {
        display: block;
        padding: 27px
    }

    .thank-symbol {
        width: 70px;
        height: 70px;
        font-size: 2rem;
        margin-bottom: 22px
    }

    .thank-status h2 {
        font-size: 2rem
    }

    .resource-links {
        gap: 12px
    }

    .thank-resources h2 {
        font-size: 2rem
    }

    .journal-feature {
        gap: 25px
    }

    .cta-strip {
        display: block
    }

    .cta-strip h2 {
        font-size: 2rem
    }

    .cta-strip .btn {
        margin-top: 25px
    }

    .info-band {
        padding: 31px
    }

    .article-header h1 {
        font-size: 2.55rem
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important
    }
}

@media print {

    .site-header,
    .site-footer,
    .cookie-panel,
    .results-actions,
    .request-card,
    .final-cta,
    .quiz-notice {
        display: none !important
    }

    body {
        background: #fff
    }

    .section,
    .page-hero {
        padding: 25px 0
    }

    .container {
        width: 96%
    }

    .results-dashboard {
        grid-template-columns: 1fr 2fr
    }

    .result-main,
    .result-score {
        break-inside: avoid
    }

    .answer-review {
        break-inside: avoid
    }

    .answer-review:not([open]) .answer-review-body {
        display: block
    }
}

.report-art-lines>div:nth-child(1) i {
    --bar: 86%
}

.report-art-lines>div:nth-child(2) i {
    --bar: 64%
}

.report-art-lines>div:nth-child(3) i {
    --bar: 78%
}

.report-art-lines>div:nth-child(4) i {
    --bar: 48%
}

html,
body {
    overflow-x: clip
}

@media(max-width:767px) {
    .hero-grid {
        grid-template-columns: minmax(0, 1fr)
    }

    .hero-copy,
    .hero-stage,
    .hero-facts,
    .hero-facts>div {
        min-width: 0
    }

    .hero-facts>div {
        overflow-wrap: anywhere
    }
}

.article-visual {
    aspect-ratio: 1.9/1;
    max-width: 980px;
    margin: 0 auto 60px
}

.article-visual img {
    object-position: center
}

.accordion {
    counter-reset: cq-faq
}

.accordion details {
    counter-increment: cq-faq
}

.accordion details summary::before {
    content: counter(cq-faq, decimal-leading-zero);
    font: 700 .67rem 'Sora';
    color: var(--color-primary);
    flex-shrink: 0;
    margin-right: 7px
}

.accordion details summary {
    justify-content: flex-start
}

.accordion details summary>span:last-child {
    margin-left: auto
}

.report-art {
    transform: none;
    max-width: 570px;
    margin-inline: auto;
    width: 100%;
    isolation: isolate
}

.report-art::before {
    display: none
}

.report-art h3 {
    letter-spacing: -.045em
}

.report-art-lines>div {
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 15px
}

.footer-motif {
    display: none
}

.areas-grid .area-card {
    cursor: default
}

.areas-grid .area-card:hover {
    transform: translateY(-3px)
}

.areas-grid .area-card h3 {
    margin-top: 18px
}

.areas-grid .area-card-feature h3 {
    margin-top: 18px
}

.area-test-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    align-self: flex-start;
    gap: 14px;
    padding: 10px 16px;
    border-radius: 24px;
    border: 1px solid rgba(64, 50, 143, .15);
    background: #fff;
    color: var(--color-primary);
    font-size: .72rem;
    font-weight: 800;
    min-height: 44px;
    margin-top: auto;
    z-index: 4;
    position: relative
}

.area-test-link:hover {
    background: var(--color-primary);
    color: #fff;
    transform: translateY(-2px)
}

.area-card-feature .area-test-link {
    background: #fff;
    color: var(--color-primary)
}

.area-card-feature .area-test-link:hover {
    background: var(--color-accent);
    color: var(--color-dark)
}

.area-card .area-test-link {
    margin-top: 18px
}

.area-card .area-number {
    flex: 0 0 auto
}

.area-card .area-test-link+* {
    display: none
}

.area-card-feature .area-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0
}

.one-test-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    background: #ece9fa;
    border: 1px solid #dcd5f8;
    border-radius: 25px;
    padding: 27px 32px;
    margin-top: 24px
}

.one-test-note p {
    font-size: .87rem;
    margin-top: 5px;
    max-width: 630px
}

.one-test-note .btn {
    flex-shrink: 0
}

.exercise-suite {
    margin: 45px 0 40px
}

.exercise-suite .suite-intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    margin-bottom: 22px
}

.exercise-suite .suite-intro p {
    max-width: 550px;
    font-size: .91rem
}

.exercise-selector {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px
}

.exercise-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    min-height: 215px;
    padding: 24px 21px;
    text-align: left;
    border: 2px solid transparent;
    border-radius: 24px;
    background: var(--color-surface);
    color: var(--color-text);
    white-space: normal
}

.exercise-choice:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow)
}

.exercise-choice[aria-pressed=true] {
    border-color: var(--color-primary);
    background: #efebff;
    box-shadow: 0 10px 24px rgba(70, 55, 164, .12)
}

.exercise-choice:nth-child(2) {
    background: #e9efee
}

.exercise-choice:nth-child(3) {
    background: #f7eee7
}

.exercise-choice:nth-child(4) {
    background: #eae9f2
}

.exercise-choice:nth-child(2)[aria-pressed=true],
.exercise-choice:nth-child(3)[aria-pressed=true],
.exercise-choice:nth-child(4)[aria-pressed=true] {
    border-color: var(--color-primary)
}

.exercise-choice .ex-number {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--color-primary);
    margin-bottom: auto
}

.exercise-choice .ex-title {
    font: 700 1.26rem/1.25 'Sora', sans-serif;
    letter-spacing: -.04em;
    margin: 16px 0 10px
}

.exercise-choice .ex-desc {
    font-size: .75rem;
    line-height: 1.55;
    color: var(--color-text-muted);
    font-weight: 600
}

.exercise-choice .ex-action {
    display: block;
    font-size: .71rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-top: 14px
}

.exercise-workspace {
    background: #fff;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    padding: clamp(24px, 4.5vw, 52px);
    border-radius: 32px;
    min-width: 0
}

.exercise-workspace[hidden] {
    display: none
}

.exercise-heading {
    display: flex;
    justify-content: space-between;
    gap: 22px;
    align-items: center;
    padding-bottom: 23px;
    border-bottom: 1px solid var(--color-border)
}

.exercise-heading h3 {
    font-size: clamp(1.45rem, 2.7vw, 2.1rem);
    margin-top: 10px
}

.exercise-heading p {
    font-size: .84rem;
    max-width: 670px;
    margin-top: 11px
}

.exercise-count {
    flex: 0 0 auto;
    font-weight: 800;
    letter-spacing: .08em;
    font-size: .77rem;
    color: var(--color-primary);
    background: #edeaf8;
    border-radius: 40px;
    padding: 10px 15px
}

.exercise-progress {
    height: 7px;
    width: 100%;
    background: #eeeef3;
    overflow: hidden;
    border-radius: 40px;
    margin: 26px 0 30px
}

.exercise-progress span {
    display: block;
    height: 100%;
    background: var(--color-primary);
    transition: width .25s ease;
    border-radius: 40px
}

.exercise-prompt {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.16rem, 2vw, 1.45rem);
    line-height: 1.45;
    letter-spacing: -.035em;
    margin: 20px 0
}

.exercise-stimulus {
    background: #f3f0f8;
    padding: 18px 22px;
    border-radius: 15px;
    font-weight: 700;
    letter-spacing: .035em;
    font-family: 'Sora', sans-serif;
    margin: 10px 0 19px;
    color: var(--color-dark);
    overflow-wrap: anywhere
}

.exercise-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0 26px
}

.exercise-option {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 62px;
    border: 1px solid #e3dfec;
    border-radius: 15px;
    padding: 12px 15px;
    background: #fff;
    text-align: left;
    color: var(--color-text);
    font-weight: 700;
    font-size: .88rem;
    white-space: normal
}

.exercise-option .option-letter {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #f1eff7;
    flex-shrink: 0;
    font-size: .76rem
}

.exercise-option[aria-pressed=true] {
    border-color: var(--color-primary);
    background: #eeeafa;
    box-shadow: inset 0 0 0 1px var(--color-primary)
}

.exercise-option:hover {
    border-color: var(--color-primary)
}

.exercise-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 22px
}

.exercise-controls .btn[disabled] {
    opacity: .4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none
}

.exercise-controls p {
    font-size: .78rem
}

.exercise-results-score {
    display: flex;
    align-items: center;
    gap: 24px;
    background: #efecfa;
    padding: 26px;
    border-radius: 22px;
    margin: 22px 0
}

.exercise-results-score strong {
    font: 700 clamp(2.9rem, 6vw, 4.8rem)/1 'Sora', sans-serif;
    letter-spacing: -.08em;
    color: var(--color-primary);
    white-space: nowrap
}

.exercise-results-score p {
    font-size: .87rem
}

.exercise-review {
    display: grid;
    gap: 12px;
    margin: 28px 0
}

.exercise-review article {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 20px 23px;
    background: #fff
}

.exercise-review article.is-incorrect {
    background: #fff9f6;
    border-color: #eed9cd
}

.exercise-review .review-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

.exercise-review h4 {
    font: 700 .92rem/1.5 'Manrope', sans-serif;
    margin: 0;
    letter-spacing: 0
}

.exercise-review .review-state {
    font-size: .75rem;
    font-weight: 800;
    color: #255f44;
    white-space: nowrap
}

.exercise-review article.is-incorrect .review-state {
    color: #9a492d
}

.exercise-review p {
    font-size: .8rem;
    margin-top: 10px;
    color: var(--color-text-muted)
}

.exercise-enquiry {
    padding: clamp(24px, 3.6vw, 38px);
    border-radius: 21px;
    background: #f2f0f8;
    margin-top: 35px
}

.exercise-enquiry h3 {
    font-size: 1.48rem;
    margin: 10px 0 13px
}

.exercise-enquiry p {
    max-width: 730px;
    font-size: .85rem
}

.exercise-enquiry form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 24px
}

.exercise-enquiry form label {
    font-size: .79rem;
    font-weight: 800;
    display: block
}

.exercise-enquiry form input[type=text],
.exercise-enquiry form input[type=email] {
    display: block;
    width: 100%;
    border: 1px solid #d4cee1;
    border-radius: 13px;
    background: #fff;
    padding: 13px 14px;
    margin-top: 8px;
    min-height: 50px;
    color: var(--color-text)
}

.exercise-enquiry form .check-line,
.exercise-enquiry form .btn {
    grid-column: 1/-1;
    justify-self: start
}

.exercise-enquiry .form-explainer {
    font-size: .74rem;
    margin-top: 9px
}

.reading-bridge {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 25px;
    border-top: 1px solid var(--color-border);
    padding-top: 30px;
    margin-top: 70px;
    margin-bottom: 26px
}

.reading-bridge h3 {
    margin-top: 7px;
    font-size: 1.7rem
}

.reading-bridge p {
    font-size: .85rem;
    max-width: 420px
}

@media(max-width:1024px) {
    .exercise-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .exercise-choice {
        min-height: 175px
    }

    .one-test-note {
        align-items: flex-start
    }

    .one-test-note .btn {
        white-space: normal
    }
}

@media(max-width:767px) {

    .one-test-note,
    .reading-bridge {
        flex-direction: column;
        align-items: flex-start
    }

    .one-test-note .btn {
        width: 100%
    }

    .exercise-workspace {
        padding: 25px 20px
    }

    .exercise-heading {
        align-items: flex-start
    }

    .exercise-results-score {
        align-items: flex-start
    }

    .exercise-results-score strong {
        font-size: 3rem
    }
}

@media(max-width:540px) {
    .exercise-selector {
        grid-template-columns: 100%;
        gap: 10px
    }

    .exercise-choice {
        padding: 18px 13px;
        min-height: 204px
    }

    .exercise-choice .ex-title {
        font-size: 1.05rem
    }

    .exercise-choice .ex-desc {
        font-size: .7rem
    }

    .exercise-options {
        grid-template-columns: 1fr
    }

    .exercise-heading {
        display: block
    }

    .exercise-count {
        display: inline-block;
        margin-top: 12px
    }

    .exercise-results-score {
        display: block
    }

    .exercise-results-score p {
        margin-top: 9px
    }

    .exercise-review .review-top {
        align-items: flex-start
    }

    .exercise-review .review-state {
        white-space: normal
    }

    .exercise-enquiry form {
        grid-template-columns: 1fr
    }

    .exercise-workspace {
        border-radius: 23px
    }

    .report-art {
        transform: none
    }

    .one-test-note {
        padding: 22px
    }

    .area-card .area-test-link {
        margin-top: 18px
    }

    .area-card-feature .area-inner {
        align-items: flex-start
    }
}

@media print {

    .exercise-suite .exercise-selector,
    .exercise-enquiry,
    .exercise-controls {
        display: none !important
    }
}

@media (min-width:541px) {
    #bereiche .areas-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(365px, 1fr));
        gap: 20px;
        align-items: stretch
    }

    #bereiche .areas-grid>.area-card {
        grid-column: auto;
        grid-row: auto;
        min-width: 0;
        min-height: 365px;
        height: 100%;
        margin: 0
    }

    #bereiche .areas-grid>.area-card-feature {
        padding: 0
    }

    #bereiche .areas-grid>.area-card-feature .area-inner {
        width: 100%;
        min-height: 365px;
        justify-content: flex-end;
        padding: 30px
    }

    #bereiche .areas-grid>.area-card:not(.area-card-feature) h3 {
        margin-top: auto
    }

    #bereiche .areas-grid>.area-card:not(.area-card-feature) .area-test-link {
        margin-top: auto
    }

    #bereiche .areas-grid>.area-card .area-test-link {
        flex-shrink: 0
    }

    #bereiche .areas-grid>.area-card p {
        max-width: 100%;
        padding-bottom: 0;
        margin-bottom: 20px
    }
}

@media (min-width:541px) and (max-width:767px) {
    #bereiche .areas-grid {
        gap: 14px;
        grid-template-rows: repeat(2, minmax(355px, 1fr))
    }

    #bereiche .areas-grid>.area-card {
        min-height: 355px;
        padding: 22px
    }

    #bereiche .areas-grid>.area-card-feature {
        padding: 0
    }

    #bereiche .areas-grid>.area-card-feature .area-inner {
        min-height: 355px;
        padding: 22px
    }

    #bereiche .areas-grid .area-card h3 {
        font-size: clamp(1.35rem, 3.8vw, 1.8rem)
    }

    #bereiche .areas-grid .area-card-feature h3 {
        font-size: clamp(1.4rem, 4vw, 1.8rem)
    }
}

@media (max-width:540px) {
    #bereiche .areas-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 12px
    }

    #bereiche .areas-grid>.area-card {
        min-height: 345px;
        height: 345px;
        margin: 0
    }

    #bereiche .areas-grid>.area-card-feature .area-inner {
        padding: 25px
    }

    #bereiche .areas-grid>.area-card:not(.area-card-feature) h3 {
        margin-top: auto
    }

    #bereiche .areas-grid>.area-card:not(.area-card-feature) .area-test-link {
        margin-top: auto
    }

    #bereiche .areas-grid>.area-card p {
        max-width: 100%;
        padding-bottom: 0;
        margin-bottom: 16px
    }
}

#bereiche .areas-grid>.area-card-feature {
    background: #d8dedd;
    color: var(--color-text)
}

#bereiche .areas-grid>.area-card-feature h3 {
    color: var(--color-text)
}

#bereiche .areas-grid>.area-card-feature p {
    color: var(--color-text-muted)
}

#bereiche .areas-grid>.area-card-feature .area-number {
    color: var(--color-primary)
}

#bereiche .areas-grid>.area-card-feature .area-test-link {
    background: #fff;
    color: var(--color-primary);
    border-color: rgba(64, 50, 143, .15)
}

#bereiche .areas-grid>.area-card-feature .area-test-link:hover {
    background: var(--color-primary);
    color: #fff
}

.question-visual {
    background: #d8dedd
}

.question-visual::before,
.question-visual::after {
    content: none
}

.question-visual .question-glyph {
    position: absolute;
    top: 30px;
    left: 34px;
    right: auto;
    bottom: auto;
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: clamp(8.5rem, 15vw, 12rem);
    line-height: .9;
    font-weight: 600;
    color: #f1ecf6;
    text-shadow: none;
    z-index: 1
}

.question-visual>* {
    position: relative;
    z-index: 1
}

@media (max-width:900px) {
    .question-visual .question-glyph {
        top: 26px;
        left: 26px;
        font-size: clamp(7rem, 22vw, 10rem)
    }
}

@media (max-width:540px) {
    .question-visual .question-glyph {
        top: 22px;
        left: 22px;
        font-size: 7rem
    }
}



.story-card,
.journal-feature {
    align-items: stretch
}

.story-card {
    display: flex;
    flex-direction: column
}

.story-card .visual,
.journal-feature .visual,
.split-section .visual,
.article-visual,
.quiz-info-visual,
.results-side .visual {
    background: #d8dedd;
    border-radius: var(--radius-l)
}

.story-card .visual img,
.journal-feature .visual img,
.split-section .visual img,
.article-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.story-card h3 {
    min-height: 3.1em
}

.story-card p {
    min-height: 3.4em
}

.story-card .inline-more {
    margin-top: auto
}

.journal-feature .visual,
.story-grid .visual {
    box-shadow: none
}

.story-grid .story-card .visual,
.journal-list .story-card .visual {
    margin-bottom: 0
}

.visual img.is-missing {
    visibility: hidden
}

.visual img.is-missing+figcaption {
    display: none
}



.hero-stage {
    overflow: visible
}

.hero-photo {
    width: min(420px, 80%);
    height: auto;
    aspect-ratio: 0.82/1;
    position: relative;
    z-index: 2;
    margin-left: 40px;
    margin-top: 8px;
    flex: 0 0 auto
}

.hero-portrait {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 220px 220px 36px 36px
}

.hero-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media(max-width:1230px) {
    .hero-photo {
        width: min(390px, 80%)
    }
}

@media(max-width:1024px) {
    .hero-photo {
        width: min(360px, 86%);
        margin-left: 18px
    }
}

@media(max-width:767px) {
    .hero-photo {
        width: min(320px, 72%);
        margin-left: 0;
        margin-right: 0
    }

    .hero-stage {
        height: 460px;
        max-width: 520px;
        margin: 0 auto;
        width: 100%
    }
}

@media(max-width:540px) {
    .hero-photo {
        width: min(270px, 75%)
    }

    .hero-stage {
        height: 345px
    }
}


.how-section {
    padding-block: clamp(54px, 5.5vw, 78px);
    overflow: hidden
}

.how-section .how-layout {
    width: min(1340px, calc(100% - 88px));
    max-width: 1340px;
    display: grid;
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center
}

.how-section .split-media {
    width: 100%;
    min-width: 0;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.how-section .split-media .visual {
    width: min(100%, 420px);
    height: auto;
    aspect-ratio: 4/3;
    min-height: 0;
    max-height: 315px;
    flex: none;
    overflow: hidden;
    border-radius: 26px
}

.how-section .split-media .visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.how-section .media-seal {
    bottom: 12px;
    right: clamp(12px, 2vw, 25px);
    padding: 12px 17px;
    transform: none;
    font-size: .68rem;
    border-radius: 14px
}

.how-section .media-seal strong {
    font-size: .82rem
}

.how-section .split-copy {
    min-width: 0;
    max-width: none
}

.how-section .split-copy .eyebrow {
    margin-bottom: 12px
}

.how-section .split-copy h2 {
    font-size: clamp(1.7rem, 2.5vw, 2.42rem);
    line-height: 1.18;
    margin-bottom: 12px;
    letter-spacing: -.05em
}

.how-section .steps-list {
    margin-top: 14px
}

.how-section .steps-list>div {
    grid-template-columns: 39px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0
}

.how-section .steps-list>div>span {
    font-size: .94rem
}

.how-section .steps-list h3 {
    font-size: .95rem;
    line-height: 1.35
}

.how-section .steps-list p {
    font-size: .79rem;
    line-height: 1.6;
    margin-top: 4px
}

.how-section .split-copy .btn {
    margin-top: 20px;
    min-height: 46px;
    padding: 12px 23px
}

@media(max-width:900px) {
    .how-section {
        padding-block: 54px
    }

    .how-section .how-layout {
        width: calc(100% - 48px);
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        gap: 26px
    }

    .how-section .split-media .visual {
        width: 100%;
        max-height: 280px
    }

    .how-section .split-copy h2 {
        font-size: clamp(1.55rem, 3.1vw, 2rem)
    }
}

@media(max-width:767px) {
    .how-section .how-layout {
        width: calc(100% - 36px);
        grid-template-columns: minmax(0, 1fr);
        gap: 29px
    }

    .how-section .split-media {
        max-width: 420px;
        margin-inline: auto
    }

    .how-section .split-media .visual {
        width: 100%;
        max-height: 260px
    }

    .how-section .split-copy h2 {
        font-size: clamp(1.8rem, 5vw, 2.2rem)
    }
}

@media(max-width:540px) {
    .how-section {
        padding-block: 42px 48px
    }

    .how-section .how-layout {
        width: calc(100% - 30px);
        gap: 22px
    }

    .how-section .split-media {
        max-width: 100%
    }

    .how-section .split-media .visual {
        max-height: 210px
    }

    .how-section .media-seal {
        bottom: 9px;
        right: 10px;
        padding: 9px 12px;
        font-size: .59rem
    }

    .how-section .media-seal strong {
        font-size: .73rem
    }

    .how-section .split-copy h2 {
        font-size: clamp(1.75rem, 7.8vw, 2.05rem)
    }

    .how-section .steps-list>div {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 8px
    }
}

figure.visual {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--color-photo-surface);
    isolation: isolate
}

figure.visual::before,
figure.visual::after {
    content: none !important;
    background: none !important
}

figure.visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    max-width: none
}

figure.visual img.is-missing {
    visibility: hidden
}

figure.visual.question-visual {
    background: #d8dedd
}


/* Illustration placement and asset-integrity layout */
.page-hero-with-photo>.container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 290px);
    gap: clamp(28px, 5vw, 76px);
    align-items: center
}

.page-hero-with-photo .page-hero-copy {
    min-width: 0
}

.page-hero-with-photo .page-hero-photo {
    width: 100%;
    max-width: 290px;
    aspect-ratio: 4/4.4;
    justify-self: end;
    overflow: hidden;
    background: var(--color-surface);
    border-radius: var(--radius-l)
}

.page-hero-with-photo .page-hero-photo img,
.method-support-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.method-support-photo {
    margin: 30px 0 0 auto;
    max-width: 290px;
    aspect-ratio: 4/4.4;
    background: var(--color-surface);
    overflow: hidden;
    border-radius: var(--radius-l)
}

@media (max-width:767px) {
    .page-hero-with-photo>.container {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px
    }

    .page-hero-with-photo .page-hero-photo {
        justify-self: start;
        width: min(64vw, 240px);
        aspect-ratio: 1.15/1
    }

    .method-support-photo {
        max-width: min(64vw, 240px);
        aspect-ratio: 1.15/1;
        margin: 28px auto 0
    }
}

.test-overview-hero {
    padding: clamp(70px, 7vw, 108px) 0 clamp(68px, 7vw, 100px)
}

.test-overview-hero>.container {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(36px, 4.5vw, 70px);
    align-items: center
}

.test-overview-hero .page-hero-copy {
    width: 100%;
    min-width: 0
}

.test-overview-hero h1 {
    max-width: 100%;
    font-size: clamp(3.1rem, 4.7vw, 5.1rem);
    line-height: 1.11;
    letter-spacing: -.06em;
    margin-bottom: 26px
}

.test-overview-hero .lead {
    max-width: 640px;
    font-size: clamp(1rem, 1.18vw, 1.16rem);
    line-height: 1.75
}

.test-overview-hero .page-hero-photo {
    width: 100%;
    max-width: 515px;
    aspect-ratio: 4/4.5;
    justify-self: center;
    align-self: center;
    margin: 0;
    overflow: hidden;
    border-radius: 34px
}

.test-overview-hero .page-hero-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover
}

.site-header .brand-mark,
.site-footer .brand-mark {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    min-width: 43px;
    min-height: 43px;
    flex: 0 0 43px;
    overflow: hidden;
    background: #eeeaf7;
    border: 1px solid #dcd6f0;
    border-radius: 13px
}

.site-header .brand-mark img,
.site-footer .brand-mark img {
    display: block;
    width: 35px;
    height: 35px;
    object-fit: contain
}

.site-header .brand-mark img.is-missing,
.site-footer .brand-mark img.is-missing {
    visibility: hidden
}

.site-footer .brand-mark {
    background: #403b62;
    border-color: #645d88
}

@media(max-width:1024px) {
    .test-overview-hero>.container {
        grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
        gap: 28px
    }

    .test-overview-hero h1 {
        font-size: clamp(2.8rem, 5.1vw, 4.5rem)
    }

    .test-overview-hero .page-hero-photo {
        max-width: 440px
    }
}

@media(max-width:767px) {
    .test-overview-hero {
        padding: 65px 0 70px
    }

    .test-overview-hero>.container {
        grid-template-columns: minmax(0, 1fr);
        gap: 35px
    }

    .test-overview-hero h1 {
        font-size: clamp(2.7rem, 8vw, 4.1rem)
    }

    .test-overview-hero .page-hero-photo {
        width: min(100%, 440px);
        max-width: 440px;
        aspect-ratio: 1.15/1;
        justify-self: center
    }
}

@media(max-width:540px) {
    .test-overview-hero {
        padding: 48px 0 58px
    }

    .test-overview-hero h1 {
        font-size: clamp(2.45rem, 10vw, 3.45rem)
    }

    .test-overview-hero .page-hero-photo {
        width: 100%;
        max-width: 370px;
        border-radius: 24px
    }

    .site-header .brand-mark,
    .site-footer .brand-mark {
        width: 37px;
        height: 37px;
        min-width: 37px;
        min-height: 37px;
        flex-basis: 37px;
        border-radius: 11px
    }

    .site-header .brand-mark img,
    .site-footer .brand-mark img {
        width: 31px;
        height: 31px
    }
}

/* Edge-to-edge Cogniqora favicon, shared by site header and footer */
.site-header .brand-mark,
.site-footer .brand-mark {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    min-width: 43px;
    min-height: 43px;
    flex: 0 0 43px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible
}

.site-header .brand-mark::before,
.site-footer .brand-mark::before {
    content: none
}

.site-header .brand-mark img,
.site-footer .brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    margin: 0;
    padding: 0;
    border: 0
}

@media(max-width:540px) {
    .page-hero .btn {
        padding: 16px;
    }

    .site-header .brand-mark,
    .site-footer .brand-mark {
        width: 37px;
        height: 37px;
        min-width: 37px;
        min-height: 37px;
        flex-basis: 37px
    }

    .site-header .brand-mark img,
    .site-footer .brand-mark img {
        width: 100%;
        height: 100%
    }
}