/* =========================================================
   1. DESIGN TOKENS
========================================================= */

:root {
    color-scheme: light;

    --color-primary: #7a1734;
    --color-primary-dark: #561024;
    --color-primary-light: #a72b50;

    --color-pink: #f4b9c5;
    --color-pink-soft: #fdecef;
    --color-pink-pale: #fff7f8;

    --color-white: #ffffff;
    --color-background: #fffdfd;
    --color-surface: #ffffff;
    --color-surface-alt: #fff5f7;

    --color-text: #29262a;
    --color-text-soft: #625b60;
    --color-heading: #321c24;
    --color-border: #e8d4da;

    --color-success: #207245;
    --color-success-soft: #e6f5ed;
    --color-danger: #a92d3d;
    --color-danger-soft: #fdecef;
    --color-warning: #8d5b00;
    --color-warning-soft: #fff4d8;

    --shadow-small:
        0 8px 24px rgba(70, 20, 38, 0.08);

    --shadow-medium:
        0 18px 45px rgba(70, 20, 38, 0.12);

    --shadow-large:
        0 28px 70px rgba(70, 20, 38, 0.16);

    --radius-small: 0.65rem;
    --radius-medium: 1rem;
    --radius-large: 1.5rem;
    --radius-pill: 999px;

    --container-width: 1180px;
    --narrow-container-width: 900px;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    --font-body:
        Inter,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-heading:
        Georgia,
        "Times New Roman",
        serif;

    --transition-fast: 160ms ease;
    --transition-standard: 280ms ease;
    --header-height: 4.8rem;
}

/* Dark-theme variables */
:root[data-theme="dark"] {
    color-scheme: dark;

    --color-primary: #df7894;
    --color-primary-dark: #f1a0b4;
    --color-primary-light: #f4aac0;

    --color-pink: #713245;
    --color-pink-soft: #321e27;
    --color-pink-pale: #281a20;

    --color-white: #ffffff;
    --color-background: #171316;
    --color-surface: #211b1f;
    --color-surface-alt: #2a2025;

    --color-text: #f1e8eb;
    --color-text-soft: #cabdc2;
    --color-heading: #fff7f9;
    --color-border: #50363f;

    --color-success: #72d19a;
    --color-success-soft: #18372a;
    --color-danger: #ff9cab;
    --color-danger-soft: #412028;
    --color-warning: #ffd17a;
    --color-warning-soft: #3f321c;

    --shadow-small:
        0 8px 24px rgba(0, 0, 0, 0.22);

    --shadow-medium:
        0 18px 45px rgba(0, 0, 0, 0.3);

    --shadow-large:
        0 28px 70px rgba(0, 0, 0, 0.42);
}


/* =========================================================
   2. RESET AND BASE STYLES
========================================================= */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
    margin: 0;
    overflow-x: hidden;

    background: var(--color-background);
    color: var(--color-text);

    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;

    transition:
        background-color var(--transition-standard),
        color var(--transition-standard);
}

body.menu-open {
    overflow: hidden;
}

img,
svg {
    display: block;
    max-width: 100%;
}

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

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    color: inherit;
}

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

ul,
ol {
    margin: 0;
    padding: 0;
}

p {
    margin-top: 0;
}

h1,
h2,
h3,
h4 {
    color: var(--color-heading);
    line-height: 1.18;
}

h1,
h2 {
    font-family: var(--font-heading);
}

h1,
h2,
h3,
h4,
p {
    overflow-wrap: break-word;
}

::selection {
    background: var(--color-primary);
    color: var(--color-white);
}

:focus-visible {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 4px;
}


/* =========================================================
   3. SHARED LAYOUT
========================================================= */

.container {
    width: min(
        calc(100% - 2rem),
        var(--container-width)
    );

    margin-inline: auto;
}

.narrow-container {
    max-width: var(--narrow-container-width);
}

.section {
    position: relative;
    padding-block: var(--space-20);
}

.section-soft {
    background: var(--color-surface-alt);
}

.section-dark-accent {
    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(255, 255, 255, 0.08),
            transparent 24rem
        ),
        linear-gradient(
            135deg,
            #6a102d,
            #3c0c1c
        );

    color: #ffffff;
}

.section-heading {
    max-width: 760px;
    margin: 0 auto var(--space-12);
    text-align: center;
}

.section-heading h2 {
    margin: var(--space-3) 0 var(--space-4);
    font-size: clamp(2rem, 5vw, 3.35rem);
}

.section-heading p {
    margin-bottom: 0;
    color: var(--color-text-soft);
    font-size: 1.08rem;
}

.heading-light h2,
.heading-light p {
    color: #ffffff;
}

.heading-light p {
    opacity: 0.86;
}

.section-kicker,
.mini-label,
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);

    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.heading-light .section-kicker {
    color: #ffd9e2;
}

.section-kicker::before {
    width: 1.8rem;
    height: 2px;

    background: currentColor;
    content: "";
}

.subsection-heading {
    margin-bottom: var(--space-6);
}

.subsection-heading h3 {
    margin: var(--space-2) 0 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
}


/* =========================================================
   4. ACCESSIBILITY HELPERS
========================================================= */

.skip-link {
    position: fixed;
    z-index: 9999;
    top: 0.75rem;
    left: 0.75rem;

    padding: 0.75rem 1rem;
    border-radius: var(--radius-small);

    background: var(--color-primary);
    color: var(--color-white);

    font-weight: 800;

    transform: translateY(-160%);
    transition: transform var(--transition-fast);
}

.skip-link:focus {
    transform: translateY(0);
}

[hidden] {
    display: none !important;
}


/* =========================================================
   5. READING PROGRESS
========================================================= */

.reading-progress {
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: transparent;
}

.reading-progress span {
    display: block;
    width: 0;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-pink)
        );

    transition: width 80ms linear;
}


/* =========================================================
   6. HEADER AND NAVIGATION
========================================================= */

.site-header {
    position: sticky;
    z-index: 1000;
    top: 0;

    min-height: var(--header-height);
    border-bottom: 1px solid var(--color-border);

    background: color-mix(
        in srgb,
        var(--color-surface) 92%,
        transparent
    );

    backdrop-filter: blur(16px);
}

.site-nav {
    min-height: var(--header-height);

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

    gap: var(--space-4);
}

.brand,
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.brand-mark {
    width: 2.65rem;
    height: 2.65rem;

    display: grid;
    flex: 0 0 auto;
    place-items: center;

    border-radius: 0.75rem;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-primary-light)
        );

    color: #ffffff;

    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 800;

    box-shadow: var(--shadow-small);
}

.brand-text {
    display: grid;
    line-height: 1.2;
}

.brand-text strong {
    color: var(--color-heading);
    font-size: 0.95rem;
}

.brand-text small {
    margin-top: 0.2rem;
    color: var(--color-text-soft);
    font-size: 0.73rem;
}

.nav-panel {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.15rem;

    list-style: none;
}

.nav-links a {
    position: relative;

    display: block;
    padding: 0.7rem 0.62rem;

    color: var(--color-text-soft);

    font-size: 0.83rem;
    font-weight: 700;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}

.nav-links a::after {
    position: absolute;
    right: 0.62rem;
    bottom: 0.35rem;
    left: 0.62rem;

    height: 2px;

    background: var(--color-primary);

    content: "";
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition-fast);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--color-primary);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    transform: scaleX(1);
}

.theme-toggle {
    min-width: 7.5rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    padding: 0.65rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);

    background: var(--color-surface);
    color: var(--color-text);

    font-size: 0.83rem;
    font-weight: 800;
    cursor: pointer;

    transition:
        border-color var(--transition-fast),
        transform var(--transition-fast),
        background-color var(--transition-fast);
}

.theme-toggle:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.theme-icon {
    font-size: 1.1rem;
}

.menu-toggle {
    width: 2.8rem;
    height: 2.8rem;

    display: none;
    place-items: center;

    padding: 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;

    background: var(--color-surface);
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 1.25rem;
    height: 2px;
    margin: 3px auto;

    background: var(--color-heading);

    transition:
        transform var(--transition-standard),
        opacity var(--transition-standard);
}


/* =========================================================
   7. BUTTONS
========================================================= */

.button {
    min-height: 3rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.78rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);

    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

.button:hover:not(:disabled) {
    transform: translateY(-2px);
}

.button-primary {
    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-primary-light)
        );

    color: #ffffff;
    box-shadow: 0 12px 24px rgba(122, 23, 52, 0.2);
}

.button-primary:hover:not(:disabled) {
    box-shadow: 0 16px 30px rgba(122, 23, 52, 0.28);
}

.button-secondary {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-primary);
}

.button-secondary:hover {
    border-color: var(--color-primary);
}

.button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}


/* =========================================================
   8. HERO
========================================================= */

.hero {
    min-height: calc(100vh - var(--header-height));

    display: flex;
    align-items: center;
    overflow: hidden;

    background:
        linear-gradient(
            120deg,
            var(--color-background) 0%,
            var(--color-pink-pale) 58%,
            var(--color-pink-soft) 100%
        );
}

.hero-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(350px, 0.92fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
}

.hero-content h1 {
    max-width: 770px;
    margin: var(--space-4) 0 var(--space-5);

    font-size: clamp(3rem, 8vw, 6.6rem);
    letter-spacing: -0.045em;
}

.hero-content h1 span {
    display: block;
    color: var(--color-primary);
}

.hero-description {
    max-width: 680px;
    margin-bottom: var(--space-8);

    color: var(--color-text-soft);
    font-size: clamp(1.08rem, 2vw, 1.3rem);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);

    margin: var(--space-10) 0 0;
}

.hero-facts div {
    min-width: 8.5rem;
}

.hero-facts dt {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.hero-facts dd {
    margin: var(--space-2) 0 0;
    color: var(--color-text-soft);
    font-size: 0.83rem;
    font-weight: 700;
}

.hero-visual {
    position: relative;
    min-height: 32rem;
}

.visual-card {
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-large);

    background: color-mix(
        in srgb,
        var(--color-surface) 91%,
        transparent
    );

    box-shadow: var(--shadow-large);
    backdrop-filter: blur(14px);
}

.visual-main {
    position: absolute;
    top: 50%;
    left: 50%;

    width: min(100%, 28rem);
    padding: var(--space-6);

    transform: translate(-50%, -50%) rotate(-2deg);
}

.visual-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--color-heading);
    font-weight: 800;
}

.status-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;

    background: var(--color-success);
    box-shadow: 0 0 0 5px var(--color-success-soft);
}

.chart-bars {
    height: 13rem;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);

    padding: var(--space-8) var(--space-4) var(--space-5);
    margin: var(--space-5) 0;

    border-radius: var(--radius-medium);

    background:
        repeating-linear-gradient(
            to top,
            transparent 0,
            transparent 2.45rem,
            var(--color-border) 2.5rem
        );
}

.chart-bars span {
    width: 16%;
    height: var(--bar-height);

    border-radius: 0.55rem 0.55rem 0.2rem 0.2rem;

    background:
        linear-gradient(
            to top,
            var(--color-primary),
            var(--color-pink)
        );

    animation: growBar 900ms ease both;
}

.visual-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.visual-summary div {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);

    background: var(--color-surface-alt);
}

.visual-summary small {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-text-soft);
}

.visual-summary strong {
    color: var(--color-heading);
}

.visual-floating {
    position: absolute;
    z-index: 3;

    min-width: 13rem;

    display: flex;
    align-items: center;
    gap: var(--space-3);

    padding: var(--space-4);
}

.visual-floating strong,
.visual-floating small {
    display: block;
}

.visual-floating strong {
    color: var(--color-heading);
}

.visual-floating small {
    color: var(--color-text-soft);
    font-size: 0.78rem;
}

.visual-journal {
    top: 8%;
    right: -2%;
    animation: floatCard 5s ease-in-out infinite;
}

.visual-ledger {
    bottom: 5%;
    left: -3%;
    animation: floatCard 5s ease-in-out 1.3s infinite;
}

.visual-icon {
    width: 2.6rem;
    height: 2.6rem;

    display: grid;
    flex: 0 0 auto;
    place-items: center;

    border-radius: 0.75rem;
    background: var(--color-pink-soft);
    color: var(--color-primary);

    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
}

.hero-decoration {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    pointer-events: none;
}

.hero-decoration-one {
    top: -12rem;
    right: -8rem;

    width: 30rem;
    height: 30rem;

    border: 1px solid rgba(122, 23, 52, 0.12);
}

.hero-decoration-two {
    bottom: -15rem;
    left: -10rem;

    width: 35rem;
    height: 35rem;

    background: rgba(244, 185, 197, 0.14);
}


/* =========================================================
   9. LEARNING OUTCOMES
========================================================= */

.outcome-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.outcome-card {
    position: relative;
    overflow: hidden;

    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);

    background: var(--color-surface);
    box-shadow: var(--shadow-small);

    transition:
        transform var(--transition-standard),
        box-shadow var(--transition-standard),
        border-color var(--transition-standard);
}

.outcome-card:hover {
    border-color: var(--color-pink);
    box-shadow: var(--shadow-medium);
    transform: translateY(-6px);
}

.card-number {
    position: absolute;
    top: 0.6rem;
    right: 1rem;

    color: var(--color-pink-soft);
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
}

.outcome-card h3 {
    position: relative;
    z-index: 1;

    margin: 2.7rem 0 var(--space-3);
    font-size: 1.15rem;
}

.outcome-card p {
    position: relative;
    z-index: 1;

    margin-bottom: 0;
    color: var(--color-text-soft);
}


/* =========================================================
   10. MEANING SECTION
========================================================= */

.meaning-grid {
    display: grid;
    grid-template-columns: 1.45fr 0.75fr;
    gap: var(--space-5);
}

.definition-card,
.concept-note {
    border-radius: var(--radius-large);
}

.definition-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);

    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--color-border);

    background: var(--color-surface);
    box-shadow: var(--shadow-small);
}

.definition-icon {
    width: 4rem;
    height: 4rem;

    display: grid;
    flex: 0 0 auto;
    place-items: center;

    border-radius: 1rem;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-primary-light)
        );

    color: #ffffff;

    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 800;
}

.definition-card h3,
.concept-note h3 {
    margin: var(--space-2) 0 var(--space-3);
    font-size: clamp(1.35rem, 3vw, 1.8rem);
}

.definition-card p,
.concept-note p {
    margin-bottom: 0;
    color: var(--color-text-soft);
}

.concept-note {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--color-pink);

    background:
        linear-gradient(
            145deg,
            var(--color-pink-soft),
            var(--color-surface)
        );
}

.transaction-example {
    margin-top: var(--space-8);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: var(--radius-large);

    background: var(--color-primary-dark);
    color: #ffffff;

    box-shadow: var(--shadow-medium);
}

.example-heading {
    margin-bottom: var(--space-6);
}

.example-heading h3 {
    margin: var(--space-2) 0 0;
    color: #ffffff;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.example-tag {
    display: inline-flex;
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-pill);

    background: rgba(255, 255, 255, 0.12);
    color: #ffdbe4;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.example-grid {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: var(--space-8);
    align-items: center;
}

.example-story {
    color: rgba(255, 255, 255, 0.87);
    font-size: 1.05rem;
}

.example-story p:last-child {
    margin-bottom: 0;
}

.example-story strong {
    color: #ffffff;
}

.calculation-card {
    overflow: hidden;
    border-radius: var(--radius-medium);

    background: rgba(255, 255, 255, 0.1);
}

.calculation-card > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);

    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.calculation-card > div:last-child {
    border-bottom: 0;
}

.calculation-subtotal {
    background: rgba(255, 255, 255, 0.07);
}

.calculation-result {
    background: var(--color-pink);
    color: #32101b;
    font-size: 1.1rem;
}


/* =========================================================
   11. ACCOUNTING CYCLE
========================================================= */

.cycle-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    gap: var(--space-8);
    align-items: stretch;
}

.cycle-steps {
    position: relative;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    align-content: start;
}

.cycle-step {
    position: relative;

    min-height: 8.5rem;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);

    padding: var(--space-4);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-medium);

    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.88);

    font-weight: 800;
    text-align: left;
    cursor: pointer;

    transition:
        background-color var(--transition-standard),
        border-color var(--transition-standard),
        transform var(--transition-standard);
}

.cycle-step:hover {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-3px);
}

.cycle-step.active {
    border-color: #ffffff;
    background: #ffffff;
    color: #4d1022;
    box-shadow: var(--shadow-medium);
}

.cycle-number {
    width: 2.25rem;
    height: 2.25rem;

    display: grid;
    place-items: center;

    border-radius: 50%;
    background: rgba(255, 255, 255, 0.13);

    font-size: 0.85rem;
}

.cycle-step.active .cycle-number {
    background: var(--color-pink-soft);
    color: var(--color-primary-dark);
}

.cycle-detail {
    min-height: 100%;

    display: flex;
    align-items: flex-start;
    gap: var(--space-5);

    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-large);

    background: rgba(255, 255, 255, 0.96);
    color: #30272b;
    box-shadow: var(--shadow-large);
}

.cycle-detail h3 {
    margin: var(--space-2) 0 var(--space-3);
    color: #391521;
    font-size: clamp(1.7rem, 4vw, 2.3rem);
}

.cycle-detail p {
    color: #5e5156;
}

.cycle-detail .mini-label {
    color: #8b2343;
}

.cycle-detail-icon {
    width: 4.3rem;
    height: 4.3rem;

    display: grid;
    flex: 0 0 auto;
    place-items: center;

    border-radius: 1rem;

    background:
        linear-gradient(
            135deg,
            #7a1734,
            #ab3a5d
        );

    color: #ffffff;

    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 800;
}

.cycle-example {
    padding: var(--space-4);
    border-left: 4px solid #8c2343;
    border-radius: 0 var(--radius-small) var(--radius-small) 0;

    background: #fcebf0;
    color: #4b2631;
}

.process-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);

    margin-top: var(--space-8);
}

.process-summary div {
    padding: var(--space-5);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-medium);
    background: rgba(255, 255, 255, 0.07);
}

.process-summary span,
.process-summary strong {
    display: block;
}

.process-summary span {
    margin-bottom: var(--space-2);
    color: #ffd6e1;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.process-summary strong {
    color: #ffffff;
}


/* =========================================================
   12. OBJECTIVES
========================================================= */

.objectives-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-4);
}

.objective-card {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);

    background: var(--color-surface);

    transition:
        border-color var(--transition-standard),
        transform var(--transition-standard),
        box-shadow var(--transition-standard);
}

.objective-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-small);
    transform: translateY(-5px);
}

.objective-icon {
    width: 2.8rem;
    height: 2.8rem;

    display: grid;
    place-items: center;

    border-radius: 0.85rem;

    background: var(--color-pink-soft);
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 900;
}

.objective-card h3 {
    margin: var(--space-5) 0 var(--space-3);
    font-size: 1.05rem;
}

.objective-card p {
    margin-bottom: 0;
    color: var(--color-text-soft);
    font-size: 0.91rem;
}

.accordion-block {
    margin-top: var(--space-12);
}


/* =========================================================
   13. ACCORDIONS
========================================================= */

.accordion {
    display: grid;
    gap: var(--space-3);
}

.accordion-item {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);

    background: var(--color-surface);
}

.accordion-item h3,
.accordion-item h4 {
    margin: 0;
}

.accordion-trigger {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);

    padding: var(--space-5);
    border: 0;

    background: transparent;
    color: var(--color-heading);

    font-weight: 800;
    text-align: left;
    cursor: pointer;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast);
}

.accordion-trigger:hover {
    background: var(--color-pink-soft);
    color: var(--color-primary);
}

.accordion-trigger[aria-expanded="true"] {
    background: var(--color-pink-soft);
    color: var(--color-primary);
}

.accordion-symbol {
    width: 2rem;
    height: 2rem;

    display: grid;
    flex: 0 0 auto;
    place-items: center;

    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-primary);

    font-size: 1.2rem;
    line-height: 1;
}

.accordion-panel {
    padding: 0 var(--space-5) var(--space-5);
    color: var(--color-text-soft);
}

.accordion-panel p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   14. COMPARISON TABLE
========================================================= */

.table-wrapper {
    overflow-x: auto;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);

    background: var(--color-surface);
    box-shadow: var(--shadow-small);
}

table {
    width: 100%;
    min-width: 760px;

    border-collapse: collapse;
}

caption {
    padding: var(--space-4);

    color: var(--color-text-soft);
    font-size: 0.82rem;
    text-align: left;
}

th,
td {
    padding: var(--space-4);
    border: 1px solid var(--color-border);

    text-align: left;
    vertical-align: top;
}

thead th {
    background: var(--color-primary);
    color: #ffffff;
}

tbody th {
    width: 20%;
    background: var(--color-pink-soft);
    color: var(--color-heading);
}

tbody tr:nth-child(even) td {
    background: var(--color-surface-alt);
}

.relationship-visual {
    margin-top: var(--space-10);

    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) 1fr;
    align-items: center;
    gap: var(--space-8);
}

.scope-layer {
    display: grid;
    place-items: center;

    padding: var(--space-5);
    border-radius: var(--radius-medium);

    font-weight: 800;
    text-align: center;
}

.scope-layer > span {
    margin-bottom: var(--space-4);
}

.scope-accountancy {
    background: var(--color-primary);
    color: #ffffff;
}

.scope-accounting {
    width: 82%;
    background: var(--color-pink);
    color: #3d1723;
}

.scope-bookkeeping {
    width: 72%;
    min-height: 7rem;
    background: var(--color-pink-soft);
    color: var(--color-primary-dark);
}

.relationship-visual p {
    margin-bottom: 0;
    color: var(--color-text-soft);
    font-size: 1.08rem;
}


/* =========================================================
   15. SUB-FIELDS
========================================================= */

.field-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-5);
}

.field-card {
    grid-column: span 2;

    display: flex;
    flex-direction: column;

    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);

    background: var(--color-surface);
    box-shadow: var(--shadow-small);

    transition:
        transform var(--transition-standard),
        border-color var(--transition-standard),
        box-shadow var(--transition-standard);
}

.field-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.field-card:nth-child(5) {
    grid-column: 4 / span 2;
}

.field-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-medium);
    transform: translateY(-6px);
}

.field-icon {
    width: 3.25rem;
    height: 3.25rem;

    display: grid;
    place-items: center;

    border-radius: 1rem;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-primary-light)
        );

    color: #ffffff;

    font-family: var(--font-heading);
    font-weight: 800;
}

.field-card h3 {
    margin: var(--space-5) 0 var(--space-3);
}

.field-card p {
    flex: 1;
    margin-bottom: var(--space-5);
    color: var(--color-text-soft);
}

.field-focus {
    display: inline-flex;
    align-self: flex-start;

    padding: 0.45rem 0.65rem;
    border-radius: var(--radius-pill);

    background: var(--color-pink-soft);
    color: var(--color-primary);

    font-size: 0.73rem;
    font-weight: 800;
}


/* =========================================================
   16. USERS
========================================================= */

.user-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
}

.user-group {
    padding: clamp(1.5rem, 4vw, 2.3rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);

    background: var(--color-surface);
    box-shadow: var(--shadow-small);
}

.internal-users {
    border-top: 5px solid var(--color-primary);
}

.external-users {
    border-top: 5px solid var(--color-pink);
}

.user-group-heading {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.user-group-heading h3 {
    margin: var(--space-1) 0 0;
    font-size: 1.7rem;
}

.user-type-icon {
    width: 3.6rem;
    height: 3.6rem;

    display: grid;
    flex: 0 0 auto;
    place-items: center;

    border-radius: 1rem;

    background: var(--color-pink-soft);
    color: var(--color-primary);

    font-family: var(--font-heading);
    font-weight: 800;
}

.user-introduction {
    margin: var(--space-5) 0;
    color: var(--color-text-soft);
}

.user-list {
    display: grid;
    gap: var(--space-3);
    list-style: none;
}

.user-list li {
    position: relative;

    padding: var(--space-4) var(--space-4) var(--space-4) 3.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);

    background: var(--color-surface-alt);
}

.user-list li::before {
    position: absolute;
    top: 1.05rem;
    left: 1rem;

    width: 1.35rem;
    height: 1.35rem;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--color-primary);
    color: #ffffff;

    content: "✓";
    font-size: 0.7rem;
    font-weight: 900;
}

.user-list strong,
.user-list span {
    display: block;
}

.user-list strong {
    margin-bottom: 0.15rem;
    color: var(--color-heading);
}

.user-list span {
    color: var(--color-text-soft);
    font-size: 0.9rem;
}


/* =========================================================
   17. RELATIONSHIPS
========================================================= */

.relationship-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.relationship-code {
    width: 2.7rem;
    height: 2.7rem;

    display: grid;
    flex: 0 0 auto;
    place-items: center;

    border-radius: 0.75rem;

    background: var(--color-primary);
    color: #ffffff;

    font-size: 0.75rem;
    font-weight: 900;
}

.relationship-example {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--radius-small) var(--radius-small) 0;

    background: var(--color-surface-alt);
    color: var(--color-text);
}


/* =========================================================
   18. LIMITATIONS
========================================================= */

.limitations-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-5);
}

.limitation-card {
    position: relative;
    grid-column: span 2;
    overflow: hidden;

    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);

    background: var(--color-surface);
}

.limitation-card:nth-child(7) {
    grid-column: 3 / span 2;
}

.limitation-number {
    display: inline-flex;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
}

.limitation-card h3 {
    margin: var(--space-4) 0 var(--space-3);
}

.limitation-card p {
    margin-bottom: 0;
    color: var(--color-text-soft);
}

.limitation-card::after {
    position: absolute;
    right: -2rem;
    bottom: -2rem;

    width: 6rem;
    height: 6rem;
    border-radius: 50%;

    background: var(--color-pink-soft);

    content: "";
}

.caution-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);

    margin-top: var(--space-10);
    padding: var(--space-5);
    border: 1px solid #e7c679;
    border-radius: var(--radius-large);

    background: var(--color-warning-soft);
}

.caution-icon {
    width: 2.6rem;
    height: 2.6rem;

    display: grid;
    flex: 0 0 auto;
    place-items: center;

    border-radius: 50%;
    background: var(--color-warning);
    color: #ffffff;

    font-weight: 900;
}

.caution-note h3 {
    margin: 0 0 var(--space-2);
    color: var(--color-heading);
}

.caution-note p {
    margin-bottom: 0;
    color: var(--color-text-soft);
}


/* =========================================================
   19. QUIZ
========================================================= */

.quiz-section {
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(255, 255, 255, 0.08),
            transparent 23rem
        ),
        linear-gradient(
            145deg,
            #4a0b20,
            #7a1734
        );
}

.quiz-card {
    padding: clamp(1.25rem, 4vw, 2.4rem);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-large);

    background: var(--color-surface);
    box-shadow: var(--shadow-large);
}

.quiz-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
}

.quiz-header h3 {
    margin: var(--space-2) 0 0;
    font-size: clamp(1.3rem, 3vw, 1.85rem);
}

.quiz-score {
    flex: 0 0 auto;

    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-pill);

    background: var(--color-pink-soft);
    color: var(--color-primary);

    font-size: 0.82rem;
    font-weight: 900;
}

.quiz-progress {
    height: 0.55rem;
    overflow: hidden;

    margin: var(--space-6) 0;
    border-radius: var(--radius-pill);

    background: var(--color-border);
}

.quiz-progress span {
    display: block;
    width: 10%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-pink)
        );

    transition: width var(--transition-standard);
}

.quiz-options {
    display: grid;
    gap: var(--space-3);
}

.quiz-option {
    position: relative;
    width: 100%;

    display: flex;
    align-items: center;
    gap: var(--space-4);

    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);

    background: var(--color-surface-alt);
    color: var(--color-text);

    text-align: left;
    cursor: pointer;

    transition:
        border-color var(--transition-fast),
        transform var(--transition-fast),
        background-color var(--transition-fast);
}

.quiz-option:hover:not(:disabled) {
    border-color: var(--color-primary);
    transform: translateX(4px);
}

.quiz-option:disabled {
    cursor: default;
}

.option-letter {
    width: 2.2rem;
    height: 2.2rem;

    display: grid;
    flex: 0 0 auto;
    place-items: center;

    border-radius: 50%;

    background: var(--color-surface);
    color: var(--color-primary);

    font-weight: 900;
}

.quiz-option.correct {
    border-color: var(--color-success);
    background: var(--color-success-soft);
    color: var(--color-success);
}

.quiz-option.incorrect {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.quiz-option.correct .option-letter {
    background: var(--color-success);
    color: #ffffff;
}

.quiz-option.incorrect .option-letter {
    background: var(--color-danger);
    color: #ffffff;
}

.quiz-feedback {
    min-height: 4.5rem;
    margin-top: var(--space-5);
}

.feedback-message {
    padding: var(--space-4);
    border-radius: var(--radius-medium);
}

.feedback-message.correct {
    border: 1px solid var(--color-success);
    background: var(--color-success-soft);
    color: var(--color-success);
}

.feedback-message.incorrect {
    border: 1px solid var(--color-danger);
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.feedback-message strong {
    display: block;
    margin-bottom: var(--space-1);
}

.quiz-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

.quiz-result {
    padding: var(--space-6) 0 var(--space-2);
    text-align: center;
}

.result-score-circle {
    width: 10rem;
    height: 10rem;

    display: grid;
    place-content: center;

    margin: 0 auto var(--space-6);
    border: 0.75rem solid var(--color-pink-soft);
    border-radius: 50%;

    background: var(--color-surface-alt);
    box-shadow: inset 0 0 0 3px var(--color-primary);
}

.result-score-circle strong,
.result-score-circle span {
    display: block;
}

.result-score-circle strong {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 2.2rem;
}

.result-score-circle span {
    color: var(--color-text-soft);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.quiz-result h3 {
    font-size: 1.8rem;
}

.quiz-result p {
    max-width: 540px;
    margin: 0 auto var(--space-6);
    color: var(--color-text-soft);
}


/* =========================================================
   20. FOOTER
========================================================= */

.site-footer {
    padding-top: var(--space-16);
    background: #251019;
    color: rgba(255, 255, 255, 0.77);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.75fr 1fr;
    gap: var(--space-10);
    padding-bottom: var(--space-12);
}

.footer-brand strong,
.footer-brand small {
    display: block;
}

.footer-brand strong {
    color: #ffffff;
}

.footer-brand small {
    margin-top: 0.2rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.78rem;
}

.footer-grid > div:first-child p {
    max-width: 460px;
    margin: var(--space-5) 0 0;
}

.footer-heading {
    margin: 0 0 var(--space-5);
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 1rem;
}

.footer-links {
    display: grid;
    gap: var(--space-3);
    list-style: none;
}

.footer-links a {
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-pink);
}

.footer-details {
    display: grid;
    gap: var(--space-3);
    margin: 0;
}

.footer-details div {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-details dt {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer-details dd {
    margin: var(--space-1) 0 0;
    color: #ffffff;
}

.footer-bottom {
    min-height: 4.5rem;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    font-size: 0.8rem;
}

.footer-bottom p {
    margin: 0;
}


/* =========================================================
   21. BACK TO TOP
========================================================= */

.back-to-top {
    position: fixed;
    z-index: 900;
    right: 1.25rem;
    bottom: 1.25rem;

    width: 3rem;
    height: 3rem;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 50%;

    background: var(--color-primary);
    color: #ffffff;

    font-size: 1.25rem;
    font-weight: 900;
    cursor: pointer;

    box-shadow: var(--shadow-medium);

    opacity: 0;
    pointer-events: none;
    transform: translateY(1rem);

    transition:
        opacity var(--transition-standard),
        transform var(--transition-standard),
        background-color var(--transition-fast);
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--color-primary-light);
}


/* =========================================================
   22. SCROLL REVEAL
========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(24px);

    transition:
        opacity 700ms ease,
        transform 700ms ease;
}

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


/* =========================================================
   23. ANIMATIONS
========================================================= */

@keyframes growBar {
    from {
        height: 0;
    }

    to {
        height: var(--bar-height);
    }
}

@keyframes floatCard {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}


/* =========================================================
   24. RESPONSIVE DESIGN
========================================================= */

@media (max-width: 1100px) {
    .menu-toggle {
        display: block;
    }

    .nav-panel {
        position: fixed;
        top: var(--header-height);
        right: 0;
        bottom: 0;

        width: min(88vw, 24rem);

        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-6);

        padding: var(--space-6);
        border-left: 1px solid var(--color-border);

        background: var(--color-surface);
        box-shadow: var(--shadow-large);

        overflow-y: auto;

        transform: translateX(105%);
        transition: transform var(--transition-standard);
    }

    .site-nav[data-open="true"] .nav-panel {
        transform: translateX(0);
    }

    .site-nav[data-open="true"] .menu-toggle span:nth-child(1) {
        transform: translateY(5px) rotate(45deg);
    }

    .site-nav[data-open="true"] .menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    .site-nav[data-open="true"] .menu-toggle span:nth-child(3) {
        transform: translateY(-5px) rotate(-45deg);
    }

    .nav-links {
        display: grid;
        gap: var(--space-2);
    }

    .nav-links a {
        padding: var(--space-3);
        border-radius: var(--radius-small);
        font-size: 0.95rem;
    }

    .nav-links a::after {
        display: none;
    }

    .nav-links a:hover,
    .nav-links a.active {
        background: var(--color-pink-soft);
    }

    .theme-toggle {
        width: 100%;
    }

    .objectives-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .section {
        padding-block: var(--space-16);
    }

    .hero {
        min-height: auto;
    }

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

    .hero-content {
        text-align: center;
    }

    .hero-description {
        margin-inline: auto;
    }

    .hero-actions,
    .hero-facts {
        justify-content: center;
    }

    .hero-visual {
        width: min(100%, 36rem);
        margin-inline: auto;
    }

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

    .meaning-grid,
    .example-grid,
    .cycle-layout,
    .relationship-visual,
    .user-columns {
        grid-template-columns: 1fr;
    }

    .cycle-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .field-grid,
    .limitations-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .field-card,
    .field-card:nth-child(4),
    .field-card:nth-child(5),
    .limitation-card,
    .limitation-card:nth-child(7) {
        grid-column: auto;
    }

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

    .footer-grid > div:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    :root {
        --header-height: 4.35rem;
    }

    .container {
        width: min(
            calc(100% - 1.25rem),
            var(--container-width)
        );
    }

    .brand-text small {
        display: none;
    }

    .brand-text strong {
        font-size: 0.83rem;
    }

    .brand-mark {
        width: 2.35rem;
        height: 2.35rem;
    }

    .hero-content h1 {
        font-size: clamp(2.65rem, 15vw, 4.4rem);
    }

    .hero-actions {
        display: grid;
    }

    .hero-actions .button {
        width: 100%;
    }

    .hero-facts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-3);
    }

    .hero-facts div {
        min-width: 0;
    }

    .hero-facts dt {
        font-size: 1.6rem;
    }

    .hero-facts dd {
        font-size: 0.7rem;
    }

    .hero-visual {
        min-height: 27rem;
    }

    .visual-main {
        padding: var(--space-4);
    }

    .visual-journal {
        top: 1%;
        right: 0;
    }

    .visual-ledger {
        bottom: 0;
        left: 0;
    }

    .visual-floating {
        min-width: 10.5rem;
        padding: var(--space-3);
    }

    .chart-bars {
        height: 11rem;
    }

    .outcome-grid,
    .objectives-grid,
    .field-grid,
    .limitations-grid,
    .process-summary,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .definition-card,
    .cycle-detail {
        flex-direction: column;
    }

    .cycle-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cycle-step {
        min-height: 7.5rem;
    }

    .relationship-visual {
        text-align: center;
    }

    .scope-accounting {
        width: 90%;
    }

    .scope-bookkeeping {
        width: 82%;
    }

    .quiz-header {
        display: grid;
    }

    .quiz-score {
        justify-self: start;
    }

    .quiz-actions .button {
        width: 100%;
    }

    .footer-grid > div:first-child {
        grid-column: auto;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        padding-block: var(--space-4);
    }

    .back-to-top {
        right: 0.8rem;
        bottom: 0.8rem;
    }
}

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

    .cycle-steps {
        grid-template-columns: 1fr;
    }

    .cycle-step {
        min-height: auto;

        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .visual-summary {
        grid-template-columns: 1fr;
    }

    .visual-floating {
        display: none;
    }
}


/* =========================================================
   25. REDUCED-MOTION ACCESSIBILITY
========================================================= */

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

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

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


/* =========================================================
   26. PRINT STYLES
========================================================= */

@media print {
    .site-header,
    .reading-progress,
    .hero-actions,
    .theme-toggle,
    .menu-toggle,
    .back-to-top,
    .quiz-section {
        display: none !important;
    }

    body {
        background: #ffffff;
        color: #000000;
    }

    .section,
    .hero {
        min-height: auto;
        padding-block: 2rem;
        background: #ffffff !important;
        color: #000000 !important;
    }

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

    .field-card,
    .objective-card,
    .outcome-card,
    .limitation-card,
    .user-group,
    .definition-card {
        break-inside: avoid;
        box-shadow: none;
    }
}