:root {
  --ink: #090d0c;
  --ink-soft: #111816;
  --paper: #f3f0e7;
  --cream: #e7dfcf;
  --white: #fffdf7;
  --muted: #a9b0aa;
  --line-dark: rgba(255, 255, 255, 0.16);
  --line-light: rgba(9, 13, 12, 0.17);
  --yellow: #f4c62d;
  --red: #f34b36;
  --blue: #4879ed;
  --green: #4da76f;
  --lime: #d9ff63;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--white); font-family: var(--sans); line-height: 1.6; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
button, input { font: inherit; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
::selection { background: var(--lime); color: var(--ink); }
iconify-icon { display: inline-block; inline-size: 1em; block-size: 1em; flex: 0 0 auto; }

.skip-link { position: fixed; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; z-index: 100; padding: 0.75rem 1rem; background: var(--lime); color: var(--ink); transform: translateY(-150%); transition: transform 180ms var(--ease); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; min-block-size: 4.75rem; padding-inline: clamp(1rem, 4vw, 4rem); border-block-end: 1px solid transparent; transition: background 240ms var(--ease), border-color 240ms var(--ease); }
.site-header.is-scrolled { background: rgba(9, 13, 12, 0.92); border-color: var(--line-dark); backdrop-filter: blur(12px); }
.site-header.menu-open { background: transparent; border-color: transparent; backdrop-filter: none; }
.site-header > .brand { position: relative; z-index: 53; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--white); text-decoration: none; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.18em; }
.brand-mark { display: grid; grid-template-columns: repeat(2, 0.42rem); gap: 0.12rem; transform: rotate(45deg); }
.brand-mark i { display: block; inline-size: 0.42rem; block-size: 0.42rem; background: var(--yellow); }
.brand-mark i:nth-child(2) { background: var(--red); }
.brand-mark i:nth-child(3) { background: var(--blue); }
.brand-mark i:nth-child(4) { background: var(--green); }

.menu-toggle { position: relative; z-index: 52; display: grid; place-content: center; gap: 0.35rem; inline-size: 3rem; block-size: 3rem; padding: 0; border: 1px solid var(--line-dark); background: transparent; border-radius: 50%; cursor: pointer; }
.menu-toggle > span:not(.sr-only) { display: block; inline-size: 1.1rem; block-size: 1px; background: currentColor; transition: transform 200ms var(--ease); }
.menu-toggle[aria-expanded="true"] > span:nth-child(2) { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-3px) rotate(-45deg); }
.primary-nav { position: fixed; inset: 0; z-index: 51; min-block-size: 100dvh; display: grid; grid-template-rows: 1fr auto; gap: 2rem; padding: 7rem clamp(1.25rem, 6vw, 4rem) 2rem; overflow-y: auto; overscroll-behavior: contain; background: rgba(9, 13, 12, 0.985); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-.75rem); transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s linear 220ms; }
.primary-nav::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 85% 18%, rgba(217,255,99,.09), transparent 26%), linear-gradient(115deg, transparent 58%, rgba(255,255,255,.025)); }
.primary-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.nav-links { position: relative; align-self: center; display: grid; counter-reset: nav; }
.nav-links > a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .65rem; border-block-end: 1px solid var(--line-dark); color: var(--white); font-family: var(--serif); font-size: clamp(2.15rem, 11vw, 4.4rem); line-height: 1.06; letter-spacing: -.035em; text-decoration: none; counter-increment: nav; }
.nav-links > a::after { content: "0" counter(nav); color: #68716b; font-family: var(--sans); font-size: .58rem; font-weight: 800; letter-spacing: .12em; }
.nav-links > a:hover, .nav-links > a:focus-visible { color: var(--lime); }
.nav-links > .nav-cta { justify-content: flex-start; color: var(--lime); }
.nav-links > .nav-cta::after { margin-inline-start: auto; }
.nav-links > .nav-cta iconify-icon { font-size: .8em; }
.nav-meta { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--line-dark); }
.nav-legal { display: flex; flex-wrap: wrap; gap: 1rem; }
.nav-legal a { color: #98a19a; font-size: .68rem; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.nav-legal a:hover, .nav-legal a:focus-visible { color: var(--white); }
.language-switcher { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem; border: 1px solid var(--line-dark); border-radius: 999px; background: rgba(255,255,255,.035); }
.language-switcher > span { color: #59635c; font-size: .65rem; }
.language-switcher button { min-inline-size: 2.4rem; min-block-size: 2.4rem; padding: .35rem .55rem; border: 0; border-radius: 999px; background: transparent; color: #89928c; cursor: pointer; font-size: .65rem; font-weight: 850; letter-spacing: .08em; }
.language-switcher button[aria-pressed="true"] { background: var(--lime); color: var(--ink); }
.language-switcher button:hover, .language-switcher button:focus-visible { color: var(--white); }
.language-switcher button[aria-pressed="true"]:hover, .language-switcher button[aria-pressed="true"]:focus-visible { color: var(--ink); }

.hero { position: relative; min-block-size: 100svh; display: grid; align-items: center; gap: 3.25rem; padding: 7.75rem clamp(1.25rem, 5vw, 5rem) 4.5rem; isolation: isolate; overflow: hidden; }
.hero::before { content: ""; position: absolute; inline-size: 32rem; block-size: 32rem; inset: -12rem -14rem auto auto; border-radius: 50%; background: rgba(217, 255, 99, 0.06); filter: blur(55px); z-index: -1; }
.hero-grain { position: absolute; inset: 0; opacity: 0.2; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"); }
.hero-copy { max-inline-size: 49rem; }
.eyebrow { display: flex; align-items: center; gap: 0.65rem; margin: 0 0 1.5rem; color: var(--muted); font-size: 0.69rem; line-height: 1.3; font-weight: 750; letter-spacing: 0.19em; text-transform: uppercase; }
.eyebrow > span { inline-size: 2.25rem; block-size: 1px; background: currentColor; }
.eyebrow-dark { color: #59605b; }
.hero h1, .section h2 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -0.055em; line-height: 0.93; }
.hero h1 { font-size: clamp(3.15rem, 11vw, 5.75rem); }
.hero h1 em, .closing h2 em { color: var(--lime); font-weight: 400; }
.hero-lede { max-inline-size: 36rem; margin: 1.5rem 0 0; color: #c9ceca; font-size: clamp(1rem, 2vw, 1.12rem); line-height: 1.65; }
.hero-actions { display: flex; align-items: stretch; flex-direction: column; gap: 1rem; margin-block-start: 1.8rem; }
.button { min-block-size: 3.25rem; display: inline-flex; justify-content: center; align-items: center; gap: 1.2rem; padding: 0.8rem 1.25rem; border: 1px solid transparent; border-radius: 999px; font-size: 0.78rem; line-height: 1.2; font-weight: 800; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: transform 220ms var(--ease); }
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button-primary { background: var(--lime); color: var(--ink); }
.button-primary:hover, .button-primary:focus-visible { background: var(--white); }
.button-dark { background: var(--ink); color: var(--white); }
.button-dark:hover, .button-dark:focus-visible { background: #222b28; }
.button-secondary { border-color: var(--line-light); background: transparent; color: var(--ink); }
.text-link { min-block-size: 3rem; display: inline-flex; justify-content: center; align-items: center; gap: 0.6rem; color: #d9ded9; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.07em; text-decoration: none; text-transform: uppercase; }
.text-link:hover, .text-link:focus-visible { color: var(--lime); }
.hero-note { margin-block-start: 1.15rem; color: #737b75; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }

.temperament-map { position: relative; inline-size: min(82vw, 32rem); aspect-ratio: 1; justify-self: center; margin-block: 1rem 5.5rem; }
.map-ring { position: absolute; border: 1px solid var(--line-dark); border-radius: 50%; }
.ring-one { inset: 7%; }
.ring-two { inset: 24%; border-style: dashed; opacity: 0.65; animation: ringDrift 24s linear infinite; }
.map-axis { position: absolute; inset: 7%; background: linear-gradient(transparent calc(50% - .5px), var(--line-dark) 50%, transparent calc(50% + .5px)), linear-gradient(90deg, transparent calc(50% - .5px), var(--line-dark) 50%, transparent calc(50% + .5px)); transform: rotate(45deg); border-radius: 50%; }
.map-center { position: absolute; inset: 38%; display: grid; place-content: center; text-align: center; border: 1px solid var(--line-dark); border-radius: 50%; background: var(--ink-soft); box-shadow: 0 0 0 0.55rem rgba(255,255,255,0.025); text-transform: uppercase; }
.map-center span { color: #737b75; font-size: 0.5rem; letter-spacing: 0.18em; }
.map-center strong { font-family: var(--serif); font-size: clamp(0.75rem, 3vw, 1rem); font-weight: 400; text-transform: none; }
.map-orbit { position: absolute; inset: 0; animation: mapOrbit 52s linear infinite; }
.map-node { position: absolute; display: block; inline-size: clamp(6.2rem, 25vw, 8.5rem); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--white); cursor: pointer; isolation: isolate; animation: mapCounterOrbit 52s linear infinite; }
.map-node img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; filter: drop-shadow(0 1rem 1.35rem rgba(0,0,0,.45)); transition: transform 240ms var(--ease), filter 240ms var(--ease); }
.map-node:hover img, .map-node:focus-visible img { transform: translateY(-.3rem) scale(1.055); filter: drop-shadow(0 1.15rem 1.65rem rgba(0,0,0,.62)); }
.map-node-number { position: absolute; inset: .25rem auto auto .25rem; z-index: 2; inline-size: 1.5rem; block-size: 1.5rem; display: grid; place-content: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(9,13,12,.88); color: var(--white); font-size: .48rem; font-weight: 850; letter-spacing: .04em; }
.map-node-copy { position: absolute; inset: auto auto -.95rem 50%; z-index: 2; min-inline-size: 5.8rem; display: grid; justify-items: center; padding: .35rem .55rem .3rem; border: 1px solid var(--line-dark); background: rgba(9,13,12,.92); color: var(--white); line-height: 1; transform: translateX(-50%); backdrop-filter: blur(10px); transition: transform 240ms var(--ease), border-color 240ms var(--ease); }
.map-node:hover .map-node-copy, .map-node:focus-visible .map-node-copy { border-color: rgba(255,255,255,.38); transform: translateX(-50%) translateY(-.2rem); }
.map-node-copy strong { font-family: var(--serif); font-size: .9rem; font-weight: 400; }
.map-node-copy small { margin-block-start: .18rem; color: #aeb5af; font-size: .46rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.node-sanguine { inset: 5% auto auto 5%; }
.node-choleric { inset: 5% 5% auto auto; }
.node-melancholic { inset: auto auto 5% 5%; }
.node-phlegmatic { inset: auto 5% 5% auto; }
.map-caption { position: absolute; inset: auto 0 -5.5rem; margin: 0; color: #707871; text-align: center; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; }
.temperament-map:hover .map-orbit, .temperament-map:hover .map-node, .temperament-map:focus-within .map-orbit, .temperament-map:focus-within .map-node { animation-play-state: paused; }

.signal-bar { display: grid; grid-template-columns: repeat(2, 1fr); border-block: 1px solid var(--line-dark); background: var(--ink-soft); }
.signal-bar > div { --metric-color: var(--yellow); position: relative; min-block-size: 7rem; padding: 1.15rem; border-inline-end: 1px solid var(--line-dark); border-block-end: 1px solid var(--line-dark); overflow: hidden; isolation: isolate; }
.signal-bar > div:nth-child(2) { --metric-color: var(--red); }
.signal-bar > div:nth-child(3) { --metric-color: var(--blue); }
.signal-bar > div:nth-child(4) { --metric-color: var(--green); }
.signal-bar > div::before { content: ""; position: absolute; z-index: -1; inline-size: 5rem; block-size: 5rem; inset: -1.65rem -1.5rem auto auto; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--metric-color) 35%, transparent), transparent 68%); opacity: .48; transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
.signal-bar > div::after { content: ""; position: absolute; inset: auto 0 0; block-size: 2px; background: var(--lime); opacity: 0; transform: scaleX(.25); transform-origin: left; transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
.signal-bar > div:hover::before { opacity: .9; transform: scale(1.15); }
.signal-bar > div:hover::after { background: var(--metric-color); opacity: 1; transform: scaleX(1); }
.signal-bar iconify-icon { position: absolute; inset: 1rem 1rem auto auto; color: var(--metric-color); font-size: 1.7rem; filter: drop-shadow(0 0 .32rem color-mix(in srgb, var(--metric-color) 80%, transparent)) drop-shadow(0 0 .85rem color-mix(in srgb, var(--metric-color) 45%, transparent)); opacity: .95; transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
.signal-bar > div:hover iconify-icon { opacity: 1; transform: translateY(-.15rem) rotate(4deg) scale(1.08); }
.signal-bar strong { display: block; font-family: var(--serif); font-size: 2rem; font-weight: 400; line-height: 1.1; }
.signal-bar span { display: block; color: #7e867f; font-size: 0.68rem; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.08em; }

@keyframes mapOrbit { to { transform: rotate(360deg); } }
@keyframes mapCounterOrbit { to { transform: rotate(-360deg); } }
@keyframes ringDrift { to { transform: rotate(-360deg); } }

.section { padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 6vw, 6.5rem); }
.method { background: var(--paper); color: var(--ink); }
.section-intro { max-inline-size: 62rem; }
.section h2 { font-size: clamp(2.9rem, 8vw, 6.8rem); }
.section-intro > p:last-child, .profiles-head > p:last-child, .lab-copy > p, .test-intro > p, .closing-content > p { max-inline-size: 40rem; margin-block: 2rem 0; color: #5c645f; font-size: clamp(1rem, 1.7vw, 1.18rem); line-height: 1.75; }
.journey-heading { max-inline-size: 76rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; margin: clamp(3.5rem, 8vw, 7rem) auto 1.25rem; padding-block-end: 1rem; border-block-end: 1px solid var(--line-light); }
.journey-heading span { color: #6f7871; font-size: .63rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.journey-heading strong { color: var(--ink); font-family: var(--serif); font-size: clamp(1.05rem, 2.4vw, 1.5rem); font-weight: 400; }
.journey { position: relative; max-inline-size: 76rem; display: grid; gap: 1.15rem; margin: 0 auto; padding: 0; list-style: none; }
.journey::before { content: ""; position: absolute; inset-block: 2.6rem; inset-inline-start: calc(clamp(1.25rem, 3vw, 2rem) + 1.625rem); inline-size: 2px; background: linear-gradient(var(--yellow), var(--red) 28%, var(--blue) 55%, var(--green) 78%, var(--lime)); opacity: .4; }
.journey-item { --step-color: var(--yellow); position: relative; display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line-light); border-radius: 1.25rem; background: rgba(255,255,255,.3); box-shadow: 0 1.2rem 2.6rem rgba(29,32,28,.045); isolation: isolate; transition: transform 240ms var(--ease); }
.journey-item:nth-child(2) { --step-color: var(--red); }
.journey-item:nth-child(3) { --step-color: var(--blue); }
.journey-item:nth-child(4) { --step-color: var(--green); }
.journey-item:nth-child(5) { --step-color: var(--lime); }
.journey-item::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(100deg, color-mix(in srgb, var(--step-color) 11%, transparent), transparent 42%); opacity: 0; transition: opacity 220ms var(--ease); }
.journey-item:hover, .journey-item:focus-within { transform: translateY(-.2rem); }
.journey-item:hover::before, .journey-item:focus-within::before { opacity: 1; }
.journey-number { position: relative; z-index: 2; inline-size: 3.25rem; block-size: 3.25rem; display: grid; place-content: center; border: 1px solid color-mix(in srgb, var(--step-color) 65%, var(--ink)); border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 .45rem color-mix(in srgb, var(--step-color) 13%, transparent), 0 0 1.1rem color-mix(in srgb, var(--step-color) 30%, transparent); font-size: 0.66rem; font-weight: 850; letter-spacing: 0.08em; }
.journey-item p { margin: 0 0 0.15rem; color: #777e78; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.journey-item h3 { margin: 0; font-family: var(--serif); font-size: clamp(1.4rem, 4vw, 2.5rem); font-weight: 400; line-height: 1.15; }
.journey-item div > span { display: block; max-inline-size: 38rem; margin-block-start: 0.6rem; color: #68706a; font-size: 0.88rem; }
.journey-icon { position: relative; grid-column: 2; justify-self: start; display: grid; place-content: center; inline-size: 3.25rem; block-size: 3.25rem; margin-block-start: .25rem; border: 1px solid color-mix(in srgb, var(--step-color) 55%, var(--line-light)); border-radius: 50%; background: color-mix(in srgb, var(--step-color) 8%, var(--paper)); color: color-mix(in srgb, var(--step-color) 78%, var(--ink)); box-shadow: 0 0 1rem color-mix(in srgb, var(--step-color) 28%, transparent); transition: transform 240ms var(--ease); }
.journey-icon iconify-icon { font-size: 1.35rem; filter: drop-shadow(0 0 .3rem color-mix(in srgb, var(--step-color) 55%, transparent)); }
.journey-item:hover .journey-icon, .journey-item:focus-within .journey-icon { transform: rotate(-5deg) scale(1.08); }
.journey-flow { position: absolute; z-index: 3; inset: auto auto -1.45rem calc(clamp(1.25rem, 3vw, 2rem) + 1.025rem); inline-size: 1.2rem; block-size: 1.7rem; display: grid; place-content: center; border-radius: 999px; background: var(--paper); color: var(--step-color); box-shadow: 0 0 0 1px var(--line-light); }
.journey-flow iconify-icon { font-size: .72rem; }

.section-dark { background: var(--ink); color: var(--white); }
.profiles-head { display: grid; max-inline-size: 75rem; margin-inline: auto; }
.profiles-head > p:last-child { color: #939b95; }
.profile-grid { display: grid; gap: 0; max-inline-size: 90rem; margin: clamp(4rem, 8vw, 7rem) auto 0; border: 1px solid var(--line-dark); }
.profile-card { position: relative; min-block-size: 29rem; display: flex; flex-direction: column; padding: clamp(1.4rem, 3vw, 2.1rem); border-block-end: 1px solid var(--line-dark); overflow: hidden; isolation: isolate; }
.profile-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); opacity: 0; transition: opacity 260ms var(--ease); }
.profile-card::after { content: ""; position: absolute; inset: 0 0 auto; block-size: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease); }
.profile-card:hover::before { opacity: .075; }
.profile-card:hover::after { transform: scaleX(1); }
.profile-card:last-child { border-block-end: 0; }
.profile-top { display: flex; justify-content: space-between; color: #7d857f; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.profile-dot { inline-size: 0.65rem; block-size: 0.65rem; border-radius: 50%; background: var(--accent); }
.animal-glyph { position: relative; inline-size: clamp(9.5rem, 28vw, 12rem); aspect-ratio: 1; display: grid; place-content: center; margin-block: auto 1.5rem; border-radius: 50%; filter: drop-shadow(0 1.15rem 1.4rem rgba(0,0,0,.28)); transform-origin: center; transition: transform 350ms var(--ease), filter 350ms var(--ease); }
.animal-glyph img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
.profile-card:hover .animal-glyph { transform: translateY(-.35rem) rotate(-3deg) scale(1.045); filter: drop-shadow(0 1.5rem 1.8rem color-mix(in srgb, var(--accent) 28%, rgba(0,0,0,.38))); }
.profile-card h3 { margin: 0; font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 400; line-height: 1; }
.profile-hook { min-block-size: 3.1rem; margin: 0.8rem 0 1.5rem; color: var(--accent); font-family: var(--serif); font-style: italic; }
.profile-card dl, .profile-card dd { margin: 0; }
.profile-card dl { display: grid; gap: 0.75rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--line-dark); }
.profile-card dl div { display: grid; grid-template-columns: 4rem 1fr; gap: 0.5rem; }
.profile-card dt { color: #7d857f; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.profile-card dd { color: #b8beb9; font-size: 0.8rem; line-height: 1.5; }
.profile-yellow { --accent: var(--yellow); }
.profile-red { --accent: var(--red); }
.profile-blue { --accent: var(--blue); }
.profile-green { --accent: var(--green); }

.lab { background: #d8e4d8; color: var(--ink); }
.lab-head { max-inline-size: 80rem; display: grid; gap: 2rem; margin-inline: auto; padding-block-end: clamp(2.5rem, 6vw, 5rem); border-block-end: 1px solid rgba(9,13,12,.2); }
.lab-copy { max-inline-size: 48rem; }
.lab-copy > p { color: #505b52; }
.lab-principle { align-self: end; display: grid; grid-template-columns: 3.2rem 1fr; gap: 1rem; align-items: center; padding: 1.2rem; border: 1px solid rgba(9,13,12,.18); background: rgba(255,255,255,.27); }
.lab-principle > iconify-icon { inline-size: 3.2rem; block-size: 3.2rem; padding: .75rem; border-radius: 50%; background: var(--ink); color: var(--lime); font-size: 1.7rem; }
.lab-principle p { margin: 0; }
.lab-principle span, .lab-step { display: block; color: #687169; font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lab-principle strong { display: block; margin-block-start: .2rem; font-family: var(--serif); font-size: 1.15rem; font-weight: 400; line-height: 1.25; }
.lab-workspace { max-inline-size: 80rem; display: grid; gap: 1.5rem; margin: clamp(2rem, 5vw, 4rem) auto 0; }
.lab-selector { padding: 1.2rem; border: 1px solid rgba(9,13,12,.22); background: rgba(245,250,244,.42); }
.lab-step { margin: 0; }
.lab-step span { color: var(--ink); margin-inline-end: .4rem; }
.type-picker { display: grid; gap: 0.55rem; margin-block-start: 1.25rem; }
.type-chip { min-block-size: 3.5rem; display: grid; grid-template-columns: .65rem 1fr auto; align-items: center; gap: 0.7rem; inline-size: 100%; padding: 0.65rem 0.8rem; border: 1px solid rgba(9,13,12,.18); border-radius: 0; background: rgba(255,255,255,.2); color: #39443b; cursor: pointer; text-align: left; font-size: 0.72rem; font-weight: 750; transition: transform 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease); }
.type-chip:hover, .type-chip:focus-visible { transform: translateX(.25rem); border-color: rgba(9,13,12,.5); }
.type-chip i { inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--chip-color, var(--yellow)); }
.type-chip span { display: grid; line-height: 1.2; }
.type-chip small { margin-block-start: .15rem; color: #707a72; font-size: .55rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.type-chip > iconify-icon { transition: transform 180ms var(--ease); }
.type-chip:hover > iconify-icon, .type-chip:focus-visible > iconify-icon { transform: translateX(.2rem); }
.type-chip:nth-child(2) { --chip-color: var(--red); }
.type-chip:nth-child(3) { --chip-color: var(--blue); }
.type-chip:nth-child(4) { --chip-color: var(--green); }
.type-chip.is-active { background: var(--ink); color: var(--white); border-color: var(--ink); }
.type-chip.is-active small { color: #aeb6b0; }
.lab-tip { display: grid; grid-template-columns: 1rem 1fr; gap: .55rem; margin: 1.25rem 0 0; padding-block-start: 1rem; border-block-start: 1px solid rgba(9,13,12,.15); color: #687169; font-size: .68rem; line-height: 1.55; }
.lab-tip iconify-icon { margin-block-start: .15rem; }
.conversation-console { min-inline-size: 0; border: 1px solid rgba(9,13,12,.24); background: rgba(255,255,255,.55); box-shadow: 0 2rem 5rem rgba(45,70,52,.12); }
.console-head { display: flex; flex-direction: column; gap: 1rem; padding: 1.15rem; border-block-end: 1px solid var(--line-light); }
.console-head > div span, .console-label { display: block; color: #5f6a62; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.console-head > div strong { display: block; margin-block-start: 0.15rem; font-family: var(--serif); font-size: 1.2rem; font-weight: 400; }
.confidence { display: inline-flex; align-items: center; gap: 0.45rem; color: #526057; font-size: 0.63rem; font-weight: 700; }
.confidence i { inline-size: 0.48rem; block-size: 0.48rem; border-radius: 50%; background: var(--active-color, var(--yellow)); box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--active-color, var(--yellow)) 20%, transparent); }
.console-tabs { display: grid; grid-template-columns: repeat(4, 1fr); overflow-x: auto; border-block-end: 1px solid var(--line-light); }
.console-tabs button { min-inline-size: 5.1rem; min-block-size: 3.6rem; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem; padding: 0.55rem 0.25rem; border: 0; border-inline-end: 1px solid var(--line-light); background: transparent; color: #657068; cursor: pointer; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.console-tabs button iconify-icon { font-size: .95rem; }
.console-tabs button[aria-selected="true"] { background: var(--ink); color: var(--white); }
.console-body { padding: clamp(1.4rem, 4vw, 2.5rem); }
.console-body h3 { max-inline-size: 35rem; margin: 0.75rem 0; font-family: var(--serif); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 400; line-height: 1.05; }
.console-body > p:not(.console-label) { max-inline-size: 40rem; color: #4c5750; }
.do-dont { display: grid; gap: 1px; margin-block-start: 2rem; background: var(--line-light); border: 1px solid var(--line-light); }
.do-dont > div { display: grid; grid-template-columns: 2rem 1fr; gap: 0.5rem; padding: 1.2rem; background: #eef3ec; }
.do-icon, .dont-icon { display: grid; place-content: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%; background: var(--green); color: var(--white); font-weight: 900; }
.dont-icon { background: var(--red); }
.do-dont p { margin: 0; }
.do-dont strong, .do-dont p span { display: block; }
.do-dont strong { font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; }
.do-dont p span { margin-block-start: 0.25rem; color: #536057; font-size: 0.82rem; }
.console-foot { margin: 0; padding: 1rem 1.4rem; border-block-start: 1px solid var(--line-light); color: #657068; font-size: 0.66rem; line-height: 1.5; }

.closing { position: relative; min-block-size: 90svh; display: grid; align-items: center; overflow: hidden; background: #121815; }
.closing-number { position: absolute; inset: 50% auto auto 50%; margin: 0; color: rgba(255,255,255,.025); font-family: var(--serif); font-size: clamp(15rem, 45vw, 42rem); line-height: 1; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; }
.closing-content { position: relative; max-inline-size: 70rem; }
.closing h2 { font-size: clamp(2.35rem, 8vw, 7.4rem); overflow-wrap: anywhere; }
.closing-content > p { color: #9da49f; }
.closing .button { margin-block-start: 2rem; }
.site-footer { position: relative; display: grid; gap: 0; padding: 0 clamp(1.25rem, 6vw, 6.5rem) 2rem; border-block-start: 1px solid var(--line-dark); background: #080b0a; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; inline-size: 26rem; block-size: 26rem; inset: -15rem -8rem auto auto; border-radius: 50%; background: rgba(217,255,99,.07); filter: blur(3rem); pointer-events: none; }
.footer-spectrum { block-size: .25rem; display: grid; grid-template-columns: repeat(4, 1fr); margin-inline: calc(clamp(1.25rem, 6vw, 6.5rem) * -1); }
.footer-spectrum i:nth-child(1) { background: var(--yellow); }
.footer-spectrum i:nth-child(2) { background: var(--red); }
.footer-spectrum i:nth-child(3) { background: var(--blue); }
.footer-spectrum i:nth-child(4) { background: var(--green); }
.footer-main { position: relative; display: grid; gap: 2.5rem; padding-block: clamp(3rem, 7vw, 5.5rem); border-block-end: 1px solid var(--line-dark); }
.footer-brand-block > p { max-inline-size: 21rem; margin: 1.25rem 0 0; color: #b1b9b3; font-family: var(--serif); font-size: clamp(1.5rem, 4vw, 2.4rem); line-height: 1.1; }
.footer-nav { display: grid; align-content: start; gap: .5rem; }
.footer-nav p, .footer-action p { margin: 0 0 .45rem; color: #66716a; font-size: .58rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.footer-nav a { inline-size: fit-content; color: #b9c1bb; font-size: .76rem; text-decoration: none; }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--lime); }
.footer-action > a { min-block-size: 3.3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border: 1px solid var(--line-dark); border-radius: 999px; color: var(--white); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.footer-action > a iconify-icon { color: var(--lime); font-size: 1rem; }
.footer-bottom { position: relative; display: grid; gap: 1rem; align-items: center; padding-block: 1.5rem; }
.footer-copyright, .footer-disclaimer { margin: 0; color: #707a73; font-size: .62rem; line-height: 1.55; }
.footer-legal { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; }
.footer-legal a { color: #9ca59e; font-size: .62rem; text-decoration: none; }
.footer-legal a:hover, .footer-legal a:focus-visible { color: var(--white); }
.footer-bottom .language-switcher { justify-self: start; }
.footer-disclaimer { position: relative; padding-block-start: 1rem; border-block-start: 1px solid rgba(255,255,255,.08); }

.floating-test { position: fixed; inset: auto 1rem 1rem auto; z-index: 45; min-block-size: 3.5rem; display: grid; grid-template-columns: 2.25rem; align-items: center; gap: .45rem; padding: .45rem; border: 1px solid rgba(9,13,12,.14); border-radius: 999px; background: var(--lime); color: var(--ink); box-shadow: 0 1rem 3rem rgba(0,0,0,.28); text-decoration: none; transform: translateY(0); opacity: 1; transition: transform 240ms var(--ease), opacity 240ms var(--ease); }
.floating-test:hover, .floating-test:focus-visible { transform: translateY(-.35rem); }
.floating-test.is-hidden { transform: translateY(1rem); opacity: 0; pointer-events: none; }
.floating-test-icon { display: grid; place-content: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: var(--ink); color: var(--lime); }
.floating-test-icon iconify-icon { font-size: 1.15rem; }
.floating-test > span:nth-child(2) { display: none; font-size: .72rem; line-height: 1.2; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.floating-test small { display: none; margin-block-end: .12rem; color: #4f5d1b; font-size: .5rem; line-height: 1; letter-spacing: .09em; }
.floating-arrow { display: none; inline-size: 1.15rem; block-size: 1.15rem; transition: transform 220ms var(--ease); }
.floating-test:hover .floating-arrow, .floating-test:focus-visible .floating-arrow { transform: translateX(.2rem); }
[data-test-link][aria-disabled="true"] { cursor: not-allowed; }
[data-test-link][aria-disabled="true"]:hover, [data-test-link][aria-disabled="true"]:focus-visible { transform: none; }

.reveal { opacity: 0; transform: translateY(1.2rem); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (min-width: 23rem) {
  .floating-test { grid-template-columns: 2.25rem auto 1.25rem; gap: .55rem; padding: .45rem .65rem .45rem .5rem; }
  .floating-test > span:nth-child(2) { display: grid; }
  .floating-arrow { display: block; }
}

@media (min-width: 38rem) {
  .hero-actions { flex-direction: row; align-items: center; }
  .text-link { justify-content: flex-start; }
  .signal-bar { grid-template-columns: repeat(4, 1fr); }
  .signal-bar > div { min-block-size: 8.5rem; padding: 1.5rem; border-block-end: 0; }
  .signal-bar strong { font-size: 2.75rem; }
  .journey-item { grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; }
  .journey-icon { grid-column: auto; justify-self: auto; margin-block-start: 0; }
  .console-head { flex-direction: row; justify-content: space-between; align-items: center; }
  .do-dont { grid-template-columns: repeat(2, 1fr); }
  .footer-main { grid-template-columns: minmax(17rem, 1.2fr) minmax(9rem, .55fr) minmax(15rem, .75fr); align-items: start; }
  .footer-bottom { grid-template-columns: auto 1fr auto; }
  .footer-legal { justify-self: center; }
  .footer-bottom .language-switcher { justify-self: end; }
  .closing h2 { font-size: clamp(3rem, 8vw, 7.4rem); }
  .floating-test { min-block-size: 4rem; grid-template-columns: 2.4rem auto 1.5rem; gap: .7rem; padding: .55rem .75rem .55rem .6rem; }
  .floating-test-icon { inline-size: 2.4rem; block-size: 2.4rem; }
  .floating-test small { display: block; }
  .console-tabs button { flex-direction: row; gap: .35rem; padding: .65rem .4rem; font-size: .62rem; letter-spacing: .06em; }
}

@media (min-width: 52rem) {
  .menu-toggle { display: none; }
  .site-header.menu-open { background: rgba(9, 13, 12, 0.92); border-color: var(--line-dark); backdrop-filter: blur(12px); }
  .primary-nav { position: static; z-index: auto; min-block-size: 0; display: flex; grid-template-rows: none; align-items: center; gap: clamp(.8rem, 2vw, 1.7rem); padding: 0; overflow: visible; background: transparent; opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: none; }
  .primary-nav::before { display: none; }
  .nav-links { display: flex; align-items: center; gap: clamp(.85rem, 2vw, 1.7rem); }
  .nav-links > a { display: block; padding: 0; border: 0; color: #aeb5af; font-family: var(--sans); font-size: 0.69rem; font-weight: 750; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; }
  .nav-links > a::after { display: none; }
  .nav-links > a:hover, .nav-links > a:focus-visible { color: var(--white); }
  .nav-links > .nav-cta { display: flex; padding: 0.65rem 1rem; border: 1px solid var(--line-dark); border-radius: 999px; color: var(--white); }
  .nav-links > .nav-cta iconify-icon { font-size: 1em; }
  .nav-meta { padding: 0; border: 0; }
  .nav-legal { display: none; }
  .nav-meta .language-switcher { padding: .15rem; }
  .nav-meta .language-switcher button { min-inline-size: 2rem; min-block-size: 2rem; padding: .2rem .35rem; font-size: .58rem; }
  .hero { grid-template-columns: minmax(0, 1.16fr) minmax(25rem, .84fr); padding-block: 7rem 3.25rem; }
  .hero h1 { font-size: clamp(4.65rem, 7vw, 5.75rem); }
  .temperament-map { inline-size: min(38vw, 32rem); }
  .profile-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-card { border-inline-end: 1px solid var(--line-dark); }
  .profile-card:nth-child(2n) { border-inline-end: 0; }
  .profile-card:nth-last-child(-n+2) { border-block-end: 0; }
  .lab-head { grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .75fr); gap: clamp(3rem, 7vw, 7rem); align-items: end; }
  .lab-workspace { grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
  .lab-selector { position: sticky; inset-block-start: 6.5rem; }
  .console-body { min-block-size: 25rem; }
}

@media (min-width: 78rem) {
  .profile-grid { grid-template-columns: repeat(4, 1fr); }
  .profile-card, .profile-card:nth-child(2n) { border-inline-end: 1px solid var(--line-dark); border-block-end: 0; }
  .profile-card:last-child { border-inline-end: 0; }
  .profile-card h3 { font-size: clamp(2.25rem, 3vw, 2.8rem); }
  .animal-glyph { inline-size: clamp(8.5rem, 11vw, 10.5rem); }
  .profiles-head { grid-template-columns: 1.35fr .65fr; align-items: end; column-gap: 4rem; }
  .profiles-head .eyebrow { grid-column: 1 / -1; }
  .profiles-head > p:last-child { margin: 0; }
}

/* September refinement: clearer routes, quieter proportions, accessible motion. */
:root { --content-width: 80rem; --radius-panel: 1rem; --text-dark-muted: #a6afa8; }
section[id], .lab-workspace { scroll-margin-block-start: 6rem; }
.hero, .section, .site-footer { padding-inline: max(clamp(1.25rem, 5vw, 5rem), calc((100vw - var(--content-width)) / 2)); }
.section { padding-block: clamp(4.5rem, 8vw, 7rem); }
.section h2 { font-size: clamp(2.6rem, 6vw, 5.25rem); line-height: 1.01; letter-spacing: -.045em; }
.hero-note, .map-caption, .map-center span, .signal-bar span, .profile-top,
.profile-card dt, .footer-nav p, .footer-action p, .footer-copyright, .footer-disclaimer { color: var(--text-dark-muted); }
.hero-note { max-inline-size: 34rem; font-size: .7rem; line-height: 1.65; text-transform: none; letter-spacing: .02em; }
.hero-copy { padding-block: 1rem; }
.hero-actions .button { gap: .8rem; }
.hero-actions .text-link { font-size: .7rem; }
.temperament-map { margin-block-end: 7rem; }
.map-caption { inset-block-end: -4.1rem; font-size: .6rem; letter-spacing: .06em; }
.node-sanguine { --node-color: var(--yellow); }
.node-choleric { --node-color: var(--red); }
.node-melancholic { --node-color: var(--blue); }
.node-phlegmatic { --node-color: var(--green); }
.map-node::before { content: ""; position: absolute; inset: 12%; z-index: -1; border-radius: 50%; box-shadow: 0 0 2rem color-mix(in srgb, var(--node-color) 24%, transparent); opacity: .65; transition: opacity 240ms var(--ease), transform 240ms var(--ease); }
.map-node:hover::before, .map-node:focus-visible::before { opacity: 1; transform: scale(1.15); }
.map-node-copy { border-radius: .45rem; border-color: color-mix(in srgb, var(--node-color) 32%, var(--ink)); }
.orbit-toggle { position: absolute; inset: auto auto -7rem 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .5rem; min-block-size: 2.75rem; padding: .4rem .8rem; border: 1px solid var(--line-dark); border-radius: 999px; background: transparent; color: var(--muted); white-space: nowrap; font-size: .65rem; cursor: pointer; }
.orbit-toggle:hover { color: var(--white); background: var(--ink-soft); }
.temperament-map.is-paused .map-orbit, .temperament-map.is-paused .map-node, .temperament-map.is-paused .ring-two { animation-play-state: paused; }
.signal-bar > div { padding: 1.6rem max(1.25rem, 3vw); }
.signal-bar span { max-inline-size: 12rem; margin-block-start: .4rem; font-size: .65rem; }
.signal-bar strong { font-size: 2.65rem; }
.journey-heading { margin-block-start: 3rem; }
.journey-item { box-shadow: none; }
.journey-item p { color: #5c655e; }
.journey-item h3 { font-size: clamp(1.4rem, 2.8vw, 2rem); }
.journey-item div > span { color: #515b54; line-height: 1.65; }
.profile-grid { gap: 1rem; border: 0; margin-block-start: 3rem; }
.profile-card, .profile-card:nth-child(n) { min-block-size: 0; padding: 1.5rem; border: 1px solid var(--line-dark); border-radius: var(--radius-panel); background: var(--ink-soft); }
.profile-card::before { background: radial-gradient(ellipse at 50% 12%, var(--accent), transparent 66%); opacity: .08; }
.profile-card:hover::before, .profile-card:focus-within::before { opacity: .16; }
.animal-glyph { align-self: center; margin-block: 1.5rem; inline-size: clamp(8rem, 21vw, 10rem); }
.profile-card h3 { font-size: clamp(2.1rem, 3vw, 2.65rem); letter-spacing: -.035em; }
.profile-hook { min-block-size: 3.1rem; font-size: 1rem; line-height: 1.5; }
.profile-card dl { margin-block-end: 1.5rem; }
.profile-card dd { color: #c4cbc6; }
.profile-explore { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-block-size: 2.9rem; margin-block-start: auto; padding: .65rem .9rem; border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius: .5rem; background: transparent; color: var(--white); font-size: .75rem; cursor: pointer; text-align: start; }
.profile-explore iconify-icon { color: var(--accent); font-size: 1rem; transition: transform 200ms var(--ease); }
.profile-explore:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.profile-explore:hover iconify-icon { transform: translate(2px, -2px); }
.lab-head { padding-block-end: 2.5rem; }
.lab-workspace { margin-block-start: 2rem; }
.lab-selector, .conversation-console, .lab-principle { border-radius: var(--radius-panel); }
.conversation-console { overflow: hidden; }
.lab-selector { padding: 1.1rem; }
.type-chip { grid-template-columns: 2.5rem 1fr auto; min-block-size: 4.25rem; padding: .5rem .65rem; border-radius: .6rem; }
.type-chip i { inline-size: 2.5rem; block-size: 2.5rem; background: url('assets/animals/nutria-hero.png') center / contain no-repeat; }
.type-chip:nth-child(2) i { background-image: url('assets/animals/leon-hero.png'); }
.type-chip:nth-child(3) i { background-image: url('assets/animals/castor-hero.png'); }
.type-chip:nth-child(4) i { background-image: url('assets/animals/golden-hero.png'); }
.type-chip small { font-size: .6rem; }
.console-head { padding: 1.2rem 1.5rem; }
.console-body h3 { font-size: clamp(1.85rem, 3.2vw, 2.8rem); line-height: 1.1; }
.console-tabs { overflow-x: visible; }
.console-tabs button { min-inline-size: 0; font-size: .57rem; }
.console-tabs button:hover { background: rgba(9,13,12,.05); }
.console-tabs button[aria-selected="true"] { background: var(--ink); box-shadow: inset 0 -3px var(--active-color); }
.lab :focus-visible, .method :focus-visible { outline-color: var(--ink); }
.do-dont { border-radius: .65rem; overflow: hidden; }
.do-icon { background: #27683c; }
.dont-icon { background: #aa3326; }
.closing { min-block-size: 0; padding-block: clamp(5rem, 9vw, 8rem); }
.closing h2 { font-size: clamp(2.4rem, 6vw, 5.7rem); }
[data-test-link][aria-disabled="true"]:not(.floating-test)::after { content: 'Próximamente'; color: inherit; font-family: var(--sans); font-size: .55rem; font-weight: 650; letter-spacing: .02em; text-transform: none; opacity: .75; }
html[lang="en"] [data-test-link][aria-disabled="true"]:not(.floating-test)::after { content: 'Coming soon'; }
.closing [data-test-link] { background: transparent; color: var(--muted); border-color: var(--line-dark); flex-wrap: wrap; }
.floating-test { min-block-size: 3.5rem; grid-template-columns: 2rem auto; padding: .45rem .9rem .45rem .5rem; gap: .55rem; border-color: rgba(217,255,99,.4); background: var(--ink-soft); color: var(--white); box-shadow: 0 .4rem 1.5rem rgba(0,0,0,.22); }
.floating-test-icon { inline-size: 2rem; block-size: 2rem; }
.floating-test > span:nth-child(2) { display: grid; font-size: .6rem; letter-spacing: .03em; }
.floating-test small { display: block; color: var(--lime); font-size: .55rem; }
.floating-test .floating-arrow { display: none; }
.floating-test.is-hidden { visibility: hidden; }
.footer-nav a, .footer-legal a { display: inline-flex; align-items: center; min-block-size: 2.75rem; }
.footer-nav { gap: 0; }
.language-switcher button, .nav-meta .language-switcher button { min-inline-size: 2.75rem; min-block-size: 2.75rem; }

@media (max-width: 37.99rem) {
  .hero { gap: 1.75rem; padding-block-start: 7rem; }
  .hero h1 { font-size: clamp(2.45rem, 10.5vw, 4rem); line-height: .99; }
  .hero-actions { align-items: stretch; }
  .hero-actions .text-link { min-block-size: 2.75rem; }
  .temperament-map { inline-size: min(78vw, 25rem); }
  .map-node { inline-size: clamp(5rem, 23vw, 7rem); }
  .map-node-copy { min-inline-size: 5rem; }
  .map-node-copy strong { font-size: .8rem; }
  .journey-item { grid-template-columns: 2.5rem minmax(0,1fr); gap: .85rem; padding: 1.2rem; }
  .journey-number { inline-size: 2.3rem; block-size: 2.3rem; }
  .journey-icon { position: absolute; inset: .75rem .75rem auto auto; inline-size: 1.75rem; block-size: 1.75rem; background: transparent; box-shadow: none; border: 0; }
  .journey-icon iconify-icon { font-size: 1rem; }
  .journey-item p { padding-inline-end: 2rem; }
  .journey::before { inset-inline-start: 2.35rem; }
  .journey-flow { inset-inline-start: 1.8rem; }
  .method, .profiles { padding-block-end: 6rem; }
  .profile-grid { gap: 1.25rem; }
  .type-picker { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; }
  .type-chip { grid-template-columns: 2rem minmax(0,1fr); gap: .4rem; padding: .55rem .4rem; font-size: .65rem; }
  .type-chip i { inline-size: 2rem; block-size: 2rem; }
  .type-chip > iconify-icon { display: none; }
  .type-chip small { font-size: .5rem; }
  .lab-selector { padding: .85rem; }
  .lab-step { font-size: .57rem; }
  .console-body { padding: 1.25rem; }
  .console-tabs button { font-size: .52rem; }
  .console-head { padding: 1.1rem 1.25rem; }
  .console-body > p:not(.console-label) { font-size: .95rem; }
  .floating-test { inset-inline-end: .75rem; inset-block-end: max(.75rem, env(safe-area-inset-bottom)); }
}
@media (min-width: 38rem) and (max-width: 63.99rem) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand-block { grid-column: 1 / -1; }
  .footer-bottom { grid-template-columns: 1fr auto; }
  .footer-legal { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}
@media (min-width: 52rem) and (max-width: 63.99rem) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { max-inline-size: 43rem; }
  .temperament-map { inline-size: min(65vw, 30rem); }
  .nav-links { gap: .8rem; }
  .nav-links > a { font-size: .62rem; }
  .nav-links > .nav-cta { padding-inline: .7rem; gap: .45rem; }
}
@media (min-width: 64rem) {
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2.5rem; min-block-size: min(900px, 100svh); }
  .hero h1 { font-size: clamp(3.4rem, 5.6vw, 5.4rem); }
  .temperament-map { inline-size: min(35vw, 30rem); }
  .method .section-intro { display: grid; grid-template-columns: 1.2fr .8fr; gap: 0 4rem; max-inline-size: none; align-items: end; }
  .method .section-intro .eyebrow { grid-column: 1 / -1; }
  .method .section-intro > p:last-child { margin-block: 0; font-size: 1rem; }
  .method h2 { font-size: clamp(3rem, 4.3vw, 4.5rem); }
  .lab-head { gap: 3rem; }
  .lab h2 { font-size: clamp(3rem, 4.5vw, 4.65rem); }
}
@media (min-width: 75rem) {
  .journey { grid-template-columns: repeat(5, minmax(0,1fr)); gap: .85rem; }
  .journey::before { display: none; }
  .journey-item { grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; padding: 1.3rem; gap: 1.75rem .5rem; border-radius: .8rem; }
  .journey-item > div { grid-column: 1 / -1; grid-row: 2; }
  .journey-icon { grid-column: 2; grid-row: 1; inline-size: 2.4rem; block-size: 2.4rem; box-shadow: none; }
  .journey-number { inline-size: 2.4rem; block-size: 2.4rem; }
  .journey-item h3 { min-block-size: 4.7rem; font-size: 1.45rem; }
  .journey-item div > span { font-size: .8rem; }
  .journey-item p { margin-block-end: .75rem; font-size: .6rem; }
  .journey-flow { inset: 2rem -1rem auto auto; transform: rotate(-90deg); }
  .profile-card h3 { font-size: clamp(2rem, 2.65vw, 2.55rem); }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-toggle { display: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (prefers-contrast: more) {
  :root { --line-dark: rgba(255,255,255,.36); --line-light: rgba(9,13,12,.38); }
  .hero-lede, .profiles-head > p:last-child, .closing-content > p { color: #d9ded9; }
}