/*
 * Know Your Rights — VFCC design-system page theme
 *
 * The palette and motion tokens below are a page-scoped port of the VFCC
 * Design System. Keeping them local lets this preview evolve without changing
 * the shared styling of the rest of the site.
 */

@font-face {
    font-family: 'Instrument Sans Kyr';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../assets/fonts/instrument-sans-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Instrument Sans Kyr';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../assets/fonts/instrument-sans-bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Shrikhand Kyr';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../assets/fonts/shrikhand-regular.ttf') format('truetype');
}

:root {
    --kyr-red-50: #fff1ef;
    --kyr-red-100: #ffdcd6;
    --kyr-red-300: #ff8574;
    --kyr-red-400: #f85c47;
    --kyr-red-500: #e53e2f;
    --kyr-red-600: #c72d20;
    --kyr-green-50: #eafbee;
    --kyr-green-100: #c6f3cf;
    --kyr-green-300: #4ecf68;
    --kyr-green-400: #22b844;
    --kyr-green-500: #00953a;
    --kyr-green-600: #00782f;
    --kyr-green-700: #005b23;
    --kyr-green-800: #003d17;
    --kyr-green-900: #00200c;
    --kyr-sun-100: #fff1c2;
    --kyr-sun-300: #ffd76a;
    --kyr-sun-500: #f7b733;
    --kyr-sun-700: #b47a15;
    --kyr-sky-100: #dbeaf4;
    --kyr-sky-300: #8cbadb;
    --kyr-sky-500: #3a84bc;
    --kyr-sky-700: #1f5681;
    --kyr-plum-100: #f3e7f1;
    --kyr-plum-500: #7a3a6f;
    --kyr-ink: #17120f;
    --kyr-ink-soft: #2a241f;
    --kyr-slate-700: #3d3732;
    --kyr-slate-500: #6a625c;
    --kyr-slate-400: #8f857d;
    --kyr-slate-300: #b8ada3;
    --kyr-slate-200: #d8cec5;
    --kyr-slate-100: #ece6df;
    --kyr-cream: #f7f2ea;
    --kyr-paper: #fbf8f3;
}

body.page-kyr {
    --kyr-bg: var(--kyr-cream);
    --kyr-bg-raised: var(--kyr-paper);
    --kyr-surface: #ffffff;
    --kyr-fg: var(--kyr-ink);
    --kyr-fg-2: var(--kyr-slate-700);
    --kyr-fg-3: var(--kyr-slate-500);
    --kyr-on-brand: #ffffff;
    --kyr-border: var(--kyr-slate-200);
    --kyr-border-strong: var(--kyr-slate-400);
    --kyr-border-ink: var(--kyr-ink);
    --kyr-brand: var(--kyr-red-500);
    --kyr-brand-hover: var(--kyr-red-600);
    --kyr-accent: var(--kyr-green-500);
    --kyr-accent-hover: var(--kyr-green-600);
    --kyr-link: var(--kyr-sky-700);
    --kyr-font-display: 'Shrikhand Kyr', 'Shrikhand', Georgia, serif;
    --kyr-font-ui: 'Instrument Sans Kyr', 'Instrument Sans', system-ui, sans-serif;
    --kyr-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --kyr-ease-out: cubic-bezier(.2, .7, .2, 1);
    --kyr-ease-spring: cubic-bezier(.3, 1.6, .5, 1);
    --kyr-dur-quick: 120ms;
    --kyr-dur-base: 200ms;
    --kyr-dur-slow: 360ms;
    --kyr-nav-offset: var(--nav-height, 72px);
    background: var(--kyr-bg);
    color: var(--kyr-fg);
    font-family: var(--kyr-font-ui);
    font-size: 18px;
    line-height: 1.55;
}

html[data-theme='dark'] body.page-kyr {
    --kyr-bg: #100b08;
    --kyr-bg-raised: var(--kyr-ink);
    --kyr-surface: #201a15;
    --kyr-fg: var(--kyr-cream);
    --kyr-fg-2: var(--kyr-slate-200);
    --kyr-fg-3: var(--kyr-slate-400);
    --kyr-on-brand: var(--kyr-ink);
    --kyr-border: #2f2823;
    --kyr-border-strong: #4a413a;
    --kyr-border-ink: var(--kyr-cream);
    --kyr-brand: var(--kyr-red-400);
    --kyr-brand-hover: var(--kyr-red-300);
    --kyr-accent: var(--kyr-green-400);
    --kyr-accent-hover: var(--kyr-green-300);
    --kyr-link: var(--kyr-sky-300);
}

.page-kyr *,
.page-kyr *::before,
.page-kyr *::after {
    box-sizing: border-box;
}

.page-kyr .container {
    width: min(100% - 2rem, 1200px);
    margin-inline: auto;
}

.page-kyr a {
    color: var(--kyr-link);
}

.page-kyr p,
.page-kyr h1,
.page-kyr h2,
.page-kyr h3 {
    max-width: 65ch;
}

.page-kyr h1,
.page-kyr h2,
.page-kyr h3,
.page-kyr .nav__links,
.page-kyr .btn,
.page-kyr button {
    font-family: var(--kyr-font-ui);
}

.page-kyr h1,
.page-kyr h2,
.page-kyr h3 {
    color: var(--kyr-fg);
    letter-spacing: -0.03em;
}

.page-kyr h2 {
    font-size: clamp(2rem, 4vw, 4.5rem);
    line-height: .98;
}

.page-kyr h3 {
    font-size: clamp(1.35rem, 2.2vw, 2.2rem);
    line-height: 1.08;
}

/* Shared shell: the markup stays generated by sync-shell.js; only this page
   receives the design-system treatment. */
.page-kyr .nav {
    position: fixed;
    top: 0;
    z-index: 1000;
    background: var(--kyr-paper);
    border-bottom: 2px solid var(--kyr-border-ink);
    box-shadow: 0 4px 0 var(--kyr-ink);
    transition: background-color var(--kyr-dur-base) var(--kyr-ease-out);
}

.page-kyr .nav.nav--hidden {
    opacity: 1;
    transform: none;
}

.page-kyr .nav__inner {
    height: var(--nav-height, 72px);
    width: min(100% - 2rem, 1400px);
    margin-inline: auto;
}

.page-kyr .nav__logo {
    color: var(--kyr-fg);
}

.page-kyr .nav__logo img {
    width: 82px;
    height: auto;
}

.page-kyr .nav__logo-text {
    color: var(--kyr-fg);
    font-family: var(--kyr-font-display);
    font-size: 1.05rem;
    line-height: 1;
}

.page-kyr .nav__logo-text span {
    color: var(--kyr-accent);
    font-family: var(--kyr-font-mono);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.page-kyr .nav__links a {
    color: var(--kyr-fg-2);
    font-size: .8rem;
    font-weight: 700;
}

.page-kyr .nav__links a:hover,
.page-kyr .nav__links a[aria-current='page'] {
    color: var(--kyr-brand);
}

.page-kyr .nav__links a[aria-current='page']::after {
    background: var(--kyr-brand);
}

.page-kyr .nav__links .nav__cta {
    border: 2px solid var(--kyr-border-ink);
    border-radius: 999px;
    box-shadow: 2px 2px 0 var(--kyr-ink);
    color: var(--kyr-on-brand);
    background: var(--kyr-accent);
    padding: .55rem .9rem;
}

.page-kyr .nav__links .nav__cta:hover {
    background: var(--kyr-accent-hover);
    color: var(--kyr-on-brand);
    transform: translate(-1px, -1px);
}

.page-kyr .dark-toggle__btn,
.page-kyr .search-toggle,
.page-kyr .nav__mobile-toggle {
    color: var(--kyr-fg);
}

.page-kyr .dark-toggle__btn,
.page-kyr .search-toggle {
    border: 2px solid var(--kyr-border-strong);
    background: var(--kyr-surface);
}

.page-kyr .nav__links--open {
    background: var(--kyr-paper);
    border-bottom: 2px solid var(--kyr-border-ink);
    backdrop-filter: none;
}

/* Hero */
.page-kyr .kyr-hero {
    position: relative;
    min-height: min(760px, 90vh);
    overflow: clip;
    padding: calc(var(--kyr-nav-offset) + 4.5rem) 0 5rem;
    background: var(--kyr-green-700);
    color: var(--kyr-on-brand);
}

.page-kyr .kyr-hero__bg {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(47%, 720px);
    border-left: 2px solid var(--kyr-border-ink);
    background: var(--kyr-green-900);
    overflow: hidden;
}

.page-kyr .kyr-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .84;
    filter: saturate(.9) contrast(1.05);
}

.page-kyr .kyr-hero__overlay {
    display: none;
}

.page-kyr .kyr-hero__content {
    position: relative;
    z-index: 1;
}

.page-kyr .kyr-hero__text {
    width: min(54%, 700px);
}

.page-kyr .kyr-hero__eyebrow,
.page-kyr .kyr-intro__eyebrow,
.page-kyr .kyr-pin__eyebrow,
.page-kyr .kyr-section-head__eyebrow,
.page-kyr .cta__eyebrow {
    margin: 0 0 1rem;
    color: var(--kyr-sun-300);
    font-family: var(--kyr-font-mono);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.3;
    text-transform: uppercase;
}

.page-kyr .kyr-hero__eyebrow .label {
    padding: 0;
    color: inherit;
    background: transparent;
    font: inherit;
}

.page-kyr .kyr-hero h1 {
    width: 100%;
    max-width: none;
    margin: 0 0 1.5rem;
    color: var(--kyr-cream);
    font-family: var(--kyr-font-display);
    font-size: clamp(3.8rem, 6vw, 6rem);
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: .9;
}

.page-kyr .kyr-hero h1 span,
.page-kyr .kyr-hero h1 em {
    display: block;
    /* Each phrase is a deliberate line in the hero lock-up. */
    text-indent: 0;
    white-space: nowrap;
}

.page-kyr .kyr-hero h1 em {
    color: var(--kyr-red-300);
    font-style: normal;
}

.page-kyr .kyr-hero__text > p:not(.kyr-hero__promise) {
    max-width: 34rem;
    margin: 0 0 2rem;
    color: var(--kyr-cream);
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
    line-height: 1.45;
}

.page-kyr .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-bottom: 1.8rem;
}

.page-kyr .btn {
    min-height: 48px;
    border: 2px solid var(--kyr-border-ink);
    border-radius: 999px;
    box-shadow: 4px 4px 0 var(--kyr-ink);
    padding: .8rem 1.25rem;
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform var(--kyr-dur-base) var(--kyr-ease-spring), box-shadow var(--kyr-dur-base) var(--kyr-ease-out), background-color var(--kyr-dur-base) var(--kyr-ease-out);
}

.page-kyr .btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--kyr-ink);
}

.page-kyr .btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--kyr-ink);
}

.page-kyr .btn--primary {
    background: var(--kyr-red-400);
    color: var(--kyr-ink);
}

.page-kyr .btn--primary:hover {
    background: var(--kyr-red-300);
    color: var(--kyr-ink);
}

.page-kyr .btn--outline-light {
    background: transparent;
    color: var(--kyr-cream);
}

.page-kyr .btn--outline-light:hover {
    background: var(--kyr-cream);
    color: var(--kyr-ink);
}

.page-kyr .kyr-hero__promise {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    max-width: 34rem;
    margin: 0;
    color: var(--kyr-green-100);
    font-size: .96rem;
}

.page-kyr .kyr-hero__promise span {
    flex: 0 0 auto;
    display: grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    border-radius: 50%;
    background: var(--kyr-sun-300);
    color: var(--kyr-ink);
    font-weight: 700;
}

/* Situation shortcuts */
.page-kyr .kyr-shortcuts {
    position: relative;
    z-index: 2;
    margin-top: -2.2rem;
    padding: 0 0 5.5rem;
}

.page-kyr .kyr-shortcuts > .container {
    padding: 1.4rem;
    border: 2px solid var(--kyr-border-ink);
    border-radius: 1rem;
    background: var(--kyr-surface);
    box-shadow: 4px 4px 0 var(--kyr-ink);
}

.page-kyr .kyr-shortcuts__label {
    margin: 0 0 1rem;
    color: var(--kyr-fg-3);
    font-family: var(--kyr-font-mono);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.page-kyr .kyr-shortcuts__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
}

.page-kyr .kyr-shortcut {
    display: grid;
    gap: .7rem;
    min-height: 142px;
    border-radius: .85rem;
    padding: .85rem 1rem;
    color: var(--kyr-fg);
    text-decoration: none;
    transition: background-color var(--kyr-dur-base) var(--kyr-ease-out), color var(--kyr-dur-base) var(--kyr-ease-out), transform var(--kyr-dur-base) var(--kyr-ease-spring);
}

.page-kyr .kyr-shortcut:hover {
    background: var(--kyr-red-50);
    color: var(--kyr-brand-hover);
    transform: translateY(-3px);
}

.page-kyr .kyr-shortcut__number {
    color: var(--kyr-brand);
    font-family: var(--kyr-font-mono);
    font-size: .8rem;
    font-weight: 700;
}

.page-kyr .kyr-shortcut > span:nth-child(2) {
    max-width: 15ch;
    align-self: end;
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.12;
}

.page-kyr .kyr-shortcut svg {
    width: 1.2rem;
    justify-self: end;
    color: var(--kyr-accent);
    transition: transform var(--kyr-dur-base) var(--kyr-ease-spring);
}

.page-kyr .kyr-shortcut:hover svg {
    transform: translateX(4px);
}

/* UNCRC intro */
.page-kyr .kyr-intro {
    padding: 0 0 7rem;
}

.page-kyr .kyr-intro__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: start;
}

.page-kyr .kyr-intro__lead {
    padding-top: .5rem;
}

.page-kyr .kyr-intro__lead h2 {
    margin: 0 0 1.4rem;
}

.page-kyr .kyr-intro__lead > p:not(.kyr-intro__eyebrow) {
    max-width: 54ch;
    margin: 0 0 1rem;
    color: var(--kyr-fg-2);
}

.page-kyr .kyr-intro__stat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    max-width: 30rem;
    margin: 0 0 1.8rem;
    border: 2px solid var(--kyr-ink);
    border-radius: 1rem;
    background: var(--kyr-sun-100);
    box-shadow: 4px 4px 0 var(--kyr-ink);
    padding: 1.1rem 1.25rem;
    color: var(--kyr-ink);
}

.page-kyr .kyr-intro__stat-block {
    display: grid;
    gap: .2rem;
}

.page-kyr .kyr-intro__stat-block strong {
    color: var(--kyr-red-500);
    font-size: clamp(3.6rem, 7vw, 5.8rem);
    font-weight: 700;
    letter-spacing: -.08em;
    line-height: .8;
}

.page-kyr .kyr-intro__stat-block span {
    color: var(--kyr-ink-soft);
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}

.page-kyr .kyr-intro__stat-divider {
    width: 2px;
    height: 3.4rem;
    background: var(--kyr-ink);
    opacity: .35;
}

.page-kyr .kyr-text-link {
    display: inline-flex;
    gap: .4rem;
    color: var(--kyr-link);
    font-weight: 700;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.page-kyr .kyr-principles-words {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-kyr .kyr-principles-words li {
    display: grid;
    gap: .3rem;
    border-bottom: 2px solid var(--kyr-border-ink);
    padding: 0 0 1rem;
}

.page-kyr .kyr-principles-words__word {
    color: var(--kyr-fg);
    font-size: 1.2rem;
    font-weight: 700;
}

.page-kyr .kyr-principles-words__desc {
    color: var(--kyr-fg-3);
    font-family: var(--kyr-font-mono);
    font-size: .72rem;
}

.page-kyr .kyr-wales-callout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    margin-top: 2rem;
    border: 2px solid var(--kyr-border-ink);
    background: var(--kyr-sun-100);
    box-shadow: 4px 4px 0 var(--kyr-ink);
    padding: 1.25rem;
}

.page-kyr .kyr-wales-callout__flag {
    color: var(--kyr-brand);
    font-family: var(--kyr-font-mono);
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.5;
}

.page-kyr .kyr-wales-callout h3 {
    margin: 0 0 .4rem;
    color: var(--kyr-ink);
    font-size: 1.45rem;
}

.page-kyr .kyr-wales-callout p {
    margin: 0;
    color: var(--kyr-ink-soft);
    font-size: .95rem;
}

/* Four Articles */
.page-kyr .kyr-principles {
    padding: 6rem 0 7rem;
    background: var(--kyr-ink);
    color: var(--kyr-cream);
}

.page-kyr .kyr-pin__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr);
    gap: 2rem;
    align-items: end;
    margin-bottom: 2.5rem;
}

.page-kyr .kyr-pin__header h2 {
    margin: 0;
    color: var(--kyr-cream);
}

.page-kyr .kyr-pin__lede {
    margin: 0;
    color: var(--kyr-slate-200);
    font-size: 1.1rem;
}

.page-kyr .kyr-principle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-kyr .kyr-principle {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 1.4rem;
    min-height: 250px;
    border: 2px solid var(--kyr-cream);
    background: var(--kyr-ink-soft);
    box-shadow: 4px 4px 0 var(--kyr-red-500);
    padding: 1.5rem;
    transition: transform var(--kyr-dur-base) var(--kyr-ease-spring), box-shadow var(--kyr-dur-base) var(--kyr-ease-out);
}

.page-kyr .kyr-principle:nth-child(2n) {
    box-shadow: 4px 4px 0 var(--kyr-green-500);
}

.page-kyr .kyr-principle:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--kyr-red-500);
}

.page-kyr .kyr-principle:nth-child(2n):hover {
    box-shadow: 7px 7px 0 var(--kyr-green-500);
}

.page-kyr .kyr-principle__num {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--kyr-sun-300);
}

.page-kyr .kyr-principle__label {
    font-family: var(--kyr-font-mono);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.page-kyr .kyr-principle__digit {
    display: block;
    margin-top: .2rem;
    font-size: clamp(4.5rem, 9vw, 7.5rem);
    font-weight: 700;
    letter-spacing: -.1em;
    line-height: .8;
}

.page-kyr .kyr-principle__body {
    align-self: center;
}

.page-kyr .kyr-principle__body h3 {
    margin: 0 0 .7rem;
    color: var(--kyr-cream);
    font-size: clamp(1.35rem, 2.5vw, 2.2rem);
}

.page-kyr .kyr-principle__body p {
    margin: 0;
    color: var(--kyr-slate-200);
    font-size: 1rem;
}

.page-kyr .kyr-principle__official {
    margin-top: 1.1rem !important;
    color: var(--kyr-sun-300) !important;
    font-family: var(--kyr-font-mono);
    font-size: .7rem !important;
    letter-spacing: .02em;
}

/* Toolkit */
.page-kyr .kyr-journey {
    padding: 7rem 0;
    background: var(--kyr-bg);
}

.page-kyr .kyr-stage,
.page-kyr .kyr-sources,
.page-kyr .kyr-journey {
    scroll-margin-top: calc(var(--kyr-nav-offset) + 1rem);
}

.page-kyr .kyr-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, .8fr);
    gap: 2rem;
    align-items: end;
    margin-bottom: 2rem;
}

.page-kyr .kyr-section-head h2 {
    margin: 0;
}

.page-kyr .kyr-section-head__lede {
    margin: 0;
    color: var(--kyr-fg-2);
    font-size: 1.1rem;
}

.page-kyr .kyr-toolkit__bar {
    position: sticky;
    top: var(--kyr-nav-offset);
    z-index: 50;
    display: grid;
    gap: 1rem;
    margin: 0 0 2rem;
    border: 2px solid var(--kyr-border-ink);
    background: var(--kyr-surface);
    box-shadow: 4px 4px 0 var(--kyr-ink);
    padding: 1rem;
}

.page-kyr .kyr-toolkit__bar--nav-hidden {
    top: var(--kyr-nav-offset);
}

.page-kyr .kyr-filters {
    display: flex;
    gap: .55rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: .2rem .2rem .45rem;
    scrollbar-width: thin;
}

.page-kyr .kyr-filter {
    flex: 0 0 auto;
    min-height: 44px;
    border: 2px solid var(--kyr-border-ink);
    border-radius: 999px;
    background: var(--kyr-bg-raised);
    color: var(--kyr-fg);
    padding: .55rem .9rem;
    font-size: .86rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color var(--kyr-dur-base) var(--kyr-ease-out), color var(--kyr-dur-base) var(--kyr-ease-out), transform var(--kyr-dur-base) var(--kyr-ease-spring);
}

.page-kyr .kyr-filter:hover {
    transform: translateY(-2px);
}

.page-kyr .kyr-filter.is-active,
.page-kyr .kyr-filter[aria-pressed='true'] {
    background: var(--kyr-accent);
    color: var(--kyr-on-brand);
}

.page-kyr .kyr-journey__cards {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-kyr .kyr-stage[hidden] {
    display: none;
}

.page-kyr .kyr-stage__card {
    border: 2px solid var(--kyr-border-ink);
    background: var(--kyr-surface);
    box-shadow: 4px 4px 0 var(--kyr-ink);
    color: var(--kyr-fg);
    overflow: clip;
    transition: transform var(--kyr-dur-base) var(--kyr-ease-spring), box-shadow var(--kyr-dur-base) var(--kyr-ease-out);
}

.page-kyr .kyr-stage__card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--kyr-ink);
}

.page-kyr .kyr-stage__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    cursor: pointer;
    list-style: none;
    padding: 1.45rem 1.6rem;
}

.page-kyr .kyr-stage__summary::-webkit-details-marker,
.page-kyr .kyr-legal__summary::-webkit-details-marker {
    display: none;
}

.page-kyr .kyr-stage__head {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
}

.page-kyr .kyr-stage__icon {
    display: grid;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    border-radius: 50%;
    background: var(--kyr-sun-300);
    color: var(--kyr-ink);
}

.page-kyr .kyr-stage__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.page-kyr .kyr-stage__title {
    display: block;
    color: var(--kyr-fg);
    font-size: clamp(1.3rem, 2.2vw, 2rem);
    font-weight: 700;
    line-height: 1.08;
}

.page-kyr .kyr-stage__moment {
    display: block;
    margin-top: .45rem;
    color: var(--kyr-fg-2);
    font-size: .98rem;
    line-height: 1.4;
}

.page-kyr .kyr-stage__summary::after,
.page-kyr .kyr-legal__summary::after {
    content: '+';
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border-radius: 50%;
    background: var(--kyr-accent);
    color: var(--kyr-on-brand);
    font-size: 1.5rem;
    line-height: 1;
    transition: transform var(--kyr-dur-base) var(--kyr-ease-spring), background-color var(--kyr-dur-base) var(--kyr-ease-out);
}

.page-kyr .kyr-stage__card[open] > .kyr-stage__summary::after,
.page-kyr .kyr-legal[open] > .kyr-legal__summary::after {
    background: var(--kyr-brand);
    transform: rotate(45deg);
}

.page-kyr .kyr-stage__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, .8fr);
    gap: 1.5rem;
    border-top: 2px solid var(--kyr-border);
    padding: 1.5rem 1.6rem 1.7rem;
}

.page-kyr .kyr-quick-answer h3,
.page-kyr .kyr-action h3,
.page-kyr .kyr-legal__summary {
    margin: 0 0 .65rem;
    color: var(--kyr-accent-hover);
    font-family: var(--kyr-font-mono);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.page-kyr .kyr-quick-answer ul {
    display: grid;
    gap: .55rem;
    margin: 0;
    padding-left: 1.2rem;
}

.page-kyr .kyr-quick-answer li::marker {
    color: var(--kyr-brand);
}

.page-kyr .kyr-action {
    border-left: 4px solid var(--kyr-red-500);
    background: var(--kyr-red-50);
    padding: 1rem 1.1rem;
}

.page-kyr .kyr-action h3 {
    color: var(--kyr-brand-hover);
}

.page-kyr .kyr-action p,
.page-kyr .kyr-quick-answer p {
    margin: 0;
    color: var(--kyr-fg-2);
}

.page-kyr .kyr-action a {
    font-weight: 700;
}

.page-kyr .kyr-definition {
    margin-top: .8rem !important;
    color: var(--kyr-fg-3) !important;
    font-size: .88rem;
}

.page-kyr .kyr-legal {
    grid-column: 1 / -1;
    border-top: 1px solid var(--kyr-border);
    padding-top: 1rem;
}

.page-kyr .kyr-legal__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    color: var(--kyr-fg-3);
}

.page-kyr .kyr-legal__summary::after {
    width: 1.8rem;
    height: 1.8rem;
    background: var(--kyr-bg-raised);
    color: var(--kyr-fg);
    font-size: 1.2rem;
}

.page-kyr .kyr-legal__content {
    max-width: 72ch;
    color: var(--kyr-fg-3);
    font-size: .92rem;
}

.page-kyr .kyr-legal__content p {
    margin: 0;
}

/* Sources and final help */
.page-kyr .kyr-sources {
    padding: 7rem 0;
    background: var(--kyr-sky-100);
}

.page-kyr .kyr-sources__grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: start;
}

.page-kyr .kyr-sources h2 {
    margin: 0 0 1rem;
    color: var(--kyr-ink);
}

.page-kyr .kyr-sources__intro > p:not(.kyr-sources__eyebrow) {
    margin: 0;
    color: var(--kyr-ink-soft);
}

.page-kyr .kyr-source-list {
    display: grid;
    gap: .8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-kyr .kyr-source-list li {
    border: 2px solid var(--kyr-border-ink);
    background: var(--kyr-paper);
    box-shadow: 3px 3px 0 var(--kyr-ink);
}

.page-kyr .kyr-source-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    color: var(--kyr-ink);
    text-decoration: none;
}

.page-kyr .kyr-source-list a:hover {
    background: var(--kyr-sun-100);
}

.page-kyr .kyr-source-list a > span:first-child {
    display: grid;
    gap: .2rem;
}

.page-kyr .kyr-source-list strong {
    font-size: 1rem;
}

.page-kyr .kyr-source-list a > span:first-child span {
    color: var(--kyr-slate-500);
    font-family: var(--kyr-font-mono);
    font-size: .7rem;
}

.page-kyr .kyr-source-list a > span:last-child {
    flex: 0 0 auto;
    color: var(--kyr-brand);
    font-size: 1.25rem;
}

.page-kyr .cta {
    padding: 7rem 0;
    background: var(--kyr-green-700);
    color: var(--kyr-cream);
}

.page-kyr .cta .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, .8fr);
    gap: 2rem;
    align-items: end;
}

.page-kyr .cta__eyebrow {
    color: var(--kyr-sun-300);
}

.page-kyr .cta .label--on-dark {
    color: var(--kyr-sun-300);
}

.page-kyr .cta h2 {
    max-width: 12ch;
    margin: 0 0 1rem;
    color: var(--kyr-cream);
}

.page-kyr .cta p {
    margin: 0;
    color: var(--kyr-green-100);
}

.page-kyr .cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .75rem;
}

.page-kyr .cta .btn--primary {
    background: var(--kyr-sun-300);
    color: var(--kyr-ink);
    box-shadow: 4px 4px 0 var(--kyr-ink);
}

.page-kyr .cta .btn--primary:hover {
    background: var(--kyr-sun-100);
    box-shadow: 6px 6px 0 var(--kyr-ink);
    color: var(--kyr-ink);
}

.page-kyr .cta .btn--outline-light {
    border-color: var(--kyr-cream);
    color: var(--kyr-cream);
    box-shadow: 4px 4px 0 var(--kyr-ink);
}

.page-kyr .cta .btn--outline-light:hover {
    background: var(--kyr-cream);
    color: var(--kyr-green-800);
}

/* Footer, back-to-top, and audience bubble */
.page-kyr footer {
    background: var(--kyr-ink);
    color: var(--kyr-cream);
}

.page-kyr .footer__inner {
    gap: 2rem;
    padding-block: 3.5rem;
}

.page-kyr .footer__brand p,
.page-kyr .footer__meta p {
    color: var(--kyr-slate-200);
}

.page-kyr .footer__links a,
.page-kyr .footer__social a {
    color: var(--kyr-cream);
}

.page-kyr .footer__links a:hover,
.page-kyr .footer__social a:hover {
    color: var(--kyr-red-300);
}

.page-kyr .footer__note {
    color: var(--kyr-sun-300) !important;
    font-family: var(--kyr-font-mono);
    font-size: .72rem;
}

.page-kyr .back-to-top {
    border: 2px solid var(--kyr-border-ink);
    background: var(--kyr-accent);
    box-shadow: 3px 3px 0 var(--kyr-ink);
    color: var(--kyr-on-brand);
}

.page-kyr .audience-bubble__trigger {
    border: 2px solid var(--kyr-border-ink);
    background: var(--kyr-accent);
    box-shadow: 4px 4px 0 var(--kyr-ink);
    color: var(--kyr-on-brand);
}

.page-kyr .audience-bubble__panel {
    border: 2px solid var(--kyr-border-ink);
    background: var(--kyr-paper);
    box-shadow: 5px 5px 0 var(--kyr-ink);
    color: var(--kyr-fg);
}

.page-kyr .audience-bubble__panel-title,
.page-kyr .audience-bubble__group-title,
.page-kyr .audience-bubble__page-link-text {
    color: var(--kyr-fg);
}

.page-kyr .audience-bubble__group,
.page-kyr .audience-bubble__page-link {
    border-color: var(--kyr-border);
}

.page-kyr .audience-bubble__group-trigger:hover,
.page-kyr .audience-bubble__page-link:hover {
    background: var(--kyr-sun-100);
}

/* The global reveal observer remains a safe fallback. GSAP owns the
   orchestrated motion on this page, so content must never depend on it. */
.page-kyr .reveal,
.page-kyr .reveal--left,
.page-kyr .reveal--right {
    opacity: 1;
    transform: none;
}

@media (max-width: 960px) {
    .page-kyr .kyr-hero__text {
        width: min(56%, 620px);
    }

    .page-kyr .kyr-shortcuts__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-kyr .kyr-principle {
        grid-template-columns: 5.5rem 1fr;
    }
}

@media (max-width: 720px) {
    body.page-kyr {
        font-size: 17px;
    }

    .page-kyr .container {
        width: min(100% - 1.2rem, 1200px);
    }

    .page-kyr .nav__logo-text {
        display: none;
    }

    .page-kyr .kyr-hero {
        display: flex;
        min-height: auto;
        flex-direction: column;
        padding-top: calc(var(--kyr-nav-offset) + 1.2rem);
        padding-bottom: 2.5rem;
    }

    .page-kyr .kyr-hero__bg {
        position: relative;
        inset: auto;
        order: 0;
        width: min(100% - 1.2rem, 600px);
        height: 220px;
        margin: 0 auto 2rem;
        border: 2px solid var(--kyr-border-ink);
        box-shadow: 4px 4px 0 var(--kyr-red-500);
    }

    .page-kyr .kyr-hero__content {
        order: 1;
    }

    .page-kyr .kyr-hero__text {
        width: auto;
    }

    .page-kyr .kyr-hero h1 {
        max-width: none;
        font-size: clamp(2.8rem, 14vw, 5rem);
    }

    .page-kyr .kyr-hero__text > p:not(.kyr-hero__promise) {
        font-size: 1.05rem;
    }

    .page-kyr .kyr-intro__stat {
        max-width: none;
        padding: 1rem;
    }

    .page-kyr .kyr-intro__stat-block strong {
        font-size: clamp(3.6rem, 18vw, 5rem);
    }

    .page-kyr .kyr-shortcuts {
        margin-top: 0;
        padding-bottom: 4rem;
    }

    .page-kyr .kyr-shortcuts > .container {
        box-shadow: 3px 3px 0 var(--kyr-ink);
        border-radius: .85rem;
        padding: 1rem .75rem;
    }

    .page-kyr .kyr-shortcuts__grid {
        grid-template-columns: 1fr;
    }

    .page-kyr .kyr-shortcut {
        min-height: 0;
        border-radius: .75rem;
        padding: .9rem .75rem;
    }

    .page-kyr .kyr-intro,
    .page-kyr .kyr-principles,
    .page-kyr .kyr-journey,
    .page-kyr .kyr-sources,
    .page-kyr .cta {
        padding-block: 4.5rem;
    }

    .page-kyr .kyr-intro__inner,
    .page-kyr .kyr-sources__grid,
    .page-kyr .kyr-section-head,
    .page-kyr .kyr-pin__header,
    .page-kyr .cta .container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .page-kyr .kyr-pin__header,
    .page-kyr .kyr-section-head {
        margin-bottom: 1.5rem;
    }

    .page-kyr .kyr-principle-grid {
        grid-template-columns: 1fr;
    }

    .page-kyr .kyr-principle {
        grid-template-columns: 5rem 1fr;
        min-height: 210px;
        padding: 1rem;
    }

    .page-kyr .kyr-principle__digit {
        font-size: 4.5rem;
    }

    .page-kyr .kyr-toolkit__bar {
        margin-inline: -.15rem;
        padding: .75rem;
    }

    .page-kyr .kyr-stage__summary {
        padding: 1rem;
    }

    .page-kyr .kyr-stage__content {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .page-kyr .kyr-legal {
        grid-column: auto;
    }

    .page-kyr .cta__actions {
        justify-content: flex-start;
    }

    .page-kyr .audience-bubble__trigger-label {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-kyr *,
    .page-kyr *::before,
    .page-kyr *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}