/* =========================================================================
   ATOMIC HABITS — page-scoped theme + module styles
   Theme: copper-on-parchment + navy + monospace data
   Origin language: modern Western, scientific, kinetic, builder
   ========================================================================= */

body.page-atomic-habits {
    /* Page-scoped palette overrides */
    --c-bg:        #FAF8F2;
    --c-bg-alt:    #F1ECE0;
    --c-paper:     #FFFEFA;
    --c-line:      #DCD5C4;
    --c-ink:       #1A1A22;
    --c-ink-soft:  #3A3A42;
    --c-mute:      #6B6B72;
    /* Concept accents */
    --ah-copper:      #B8651E;
    --ah-copper-soft: #D08A4A;
    --ah-navy:        #1B3A5C;
    --ah-coral:       #E76F51;
    --ah-cream:       #F2E1B8;
    /* Override gold to copper for buttons/accents on this page */
    --c-gold:      var(--ah-copper);
    --c-gold-soft: var(--ah-copper-soft);
    /* Add a data-fluent monospace font */
    --f-data: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}
[data-theme="dark"] body.page-atomic-habits {
    --c-bg:        #131318;
    --c-bg-alt:    #1B1B22;
    --c-paper:     #1F1F27;
    --c-line:      #2D2D38;
    --c-ink:       #F0EBDD;
    --c-ink-soft:  #C8C2B0;
    --c-mute:      #8A857A;
    --ah-copper:      #D88A4F;
    --ah-copper-soft: #E5A878;
}

body.page-atomic-habits .ah-data { font-family: var(--f-data); letter-spacing: 0.02em; }
body.page-atomic-habits em { color: var(--ah-copper); }

/* Page-wide section header style */
.ah-section { padding: var(--s-8) 0; position: relative; }
.ah-section-head { text-align: center; margin-bottom: var(--s-7); max-width: 760px; margin-left: auto; margin-right: auto; }
.ah-section-head-tight { margin-bottom: var(--s-5); }
.ah-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--c-mute);
    margin: 0 0 var(--s-3);
    font-family: var(--f-data);
}
.ah-h2 {
    font-family: var(--f-serif);
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    line-height: 1.15;
    margin: 0 0 var(--s-3);
    letter-spacing: -0.012em;
}
.ah-h2 em { font-style: italic; color: var(--ah-copper); }
.ah-sub { color: var(--c-ink-soft); font-size: 1.02rem; line-height: 1.6; margin: 0; }

/* Blueprint grid background subtle on alt sections */
.ah-section-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(184,101,30,0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(184,101,30,0.06) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 0;
}
.ah-section > .container { position: relative; z-index: 1; }

/* -------------------------------------------------------------------------
   1. HERO — atom orbit
   ------------------------------------------------------------------------- */
.ah-hero {
    padding: var(--s-9) 0 var(--s-8);
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    align-items: center;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(184,101,30,0.08), transparent 60%),
        var(--c-bg);
}
.ah-hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ah-atom {
    width: clamp(420px, 65vw, 680px);
    height: clamp(420px, 65vw, 680px);
    color: var(--c-ink);
    opacity: 0.4;
}
[data-theme="dark"] body.page-atomic-habits .ah-atom { opacity: 0.5; }

.ah-orbit {
    transform-box: view-box;
    transform-origin: 240px 240px;
}
.ah-orbit-1 { animation: ahOrbit1 12s linear infinite; }
.ah-orbit-2 { animation: ahOrbit2 16s linear infinite; }
.ah-orbit-3 { animation: ahOrbit3 14s linear infinite reverse; }
@keyframes ahOrbit1 { from { transform: rotate(0deg);   } to { transform: rotate(360deg); } }
@keyframes ahOrbit2 { from { transform: rotate(60deg);  } to { transform: rotate(420deg); } }
@keyframes ahOrbit3 { from { transform: rotate(-60deg); } to { transform: rotate(300deg); } }
@media (prefers-reduced-motion: reduce) {
    .ah-orbit-1, .ah-orbit-2, .ah-orbit-3 { animation: none; }
}

.ah-hero-content { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; }
.ah-hero-title {
    font-family: var(--f-serif);
    font-size: clamp(3rem, 7vw, 5.4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 var(--s-5);
}
.ah-hero-title span { display: block; }
.ah-hero-title em {
    display: block;
    font-style: italic;
    color: var(--ah-copper);
}
.ah-hero-sub {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.6;
    color: var(--c-ink-soft);
    max-width: 720px;
    margin: 0 auto var(--s-4);
}
.ah-hero-sub b { color: var(--c-ink); font-weight: 600; }
.ah-hero-promise {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--ah-copper);
    border-left: 2px solid var(--ah-copper);
    padding-left: var(--s-4);
    margin: 0 auto var(--s-6);
    max-width: 540px;
    text-align: left;
}
.ah-hero-cta { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   2. COMPOUND CALCULATOR
   ------------------------------------------------------------------------- */
.ah-compound { background: var(--c-bg-alt); }
.ah-compound-stage {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: var(--s-7);
    align-items: center;
}
@media (max-width: 920px) { .ah-compound-stage { grid-template-columns: 1fr; gap: var(--s-5); } }

.ah-compound-controls {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 14px;
    padding: var(--s-5);
    box-shadow: 0 6px 18px -10px rgba(0,0,0,0.08);
}

.ah-slider-block { margin-bottom: var(--s-4); }
.ah-slider-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.ah-slider-name {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--c-mute);
}
.ah-slider-val {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ah-copper);
}
.ah-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: var(--c-line);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.ah-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ah-copper);
    border: 3px solid var(--c-paper);
    box-shadow: 0 2px 8px rgba(184,101,30,0.4);
    cursor: grab;
}
.ah-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
.ah-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ah-copper);
    border: 3px solid var(--c-paper);
    cursor: grab;
}
.ah-slider-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.7rem;
    color: var(--c-mute);
}

.ah-compound-result {
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px dashed var(--c-line);
    text-align: center;
}
.ah-compound-label { color: var(--c-mute); font-size: 0.88rem; margin: 0 0 var(--s-2); }
.ah-compound-multiplier {
    font-size: clamp(2.6rem, 6vw, 4rem);
    font-weight: 700;
    color: var(--ah-copper);
    line-height: 1;
    margin: 0 0 var(--s-2);
}
.ah-compound-note { font-family: var(--f-serif); font-style: italic; color: var(--c-ink-soft); margin: 0; font-size: 0.95rem; }

.ah-compound-graph {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 14px;
    padding: var(--s-4);
    color: var(--c-ink);
}
.ah-compound-graph svg { width: 100%; height: auto; display: block; }
.ah-graph-legend {
    display: flex;
    justify-content: center;
    gap: var(--s-4);
    font-size: 0.78rem;
    color: var(--c-mute);
    margin-top: var(--s-3);
}
.ah-graph-legend i {
    display: inline-block;
    width: 12px; height: 3px;
    margin-right: 6px;
    border-radius: 2px;
    vertical-align: middle;
}
.dot-up   { background: var(--ah-copper); }
.dot-flat { background: var(--c-mute); }
.dot-down { background: var(--ah-coral); }

/* -------------------------------------------------------------------------
   3. PLATEAU
   ------------------------------------------------------------------------- */
.ah-plateau-stage {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 14px;
    padding: var(--s-6);
    text-align: center;
    color: var(--c-ink);
    box-shadow: 0 8px 24px -16px rgba(0,0,0,0.1);
}
.ah-plateau-svg { width: 100%; max-width: 720px; height: auto; margin: 0 auto; display: block; }
.ah-plateau-actual {
    animation: ahPlateauDraw 2.4s 0.3s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes ahPlateauDraw {
    to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ah-plateau-actual { animation: none; stroke-dashoffset: 0; }
}
.ah-plateau-quote {
    font-family: var(--f-serif);
    font-size: 1.2rem;
    color: var(--c-ink-soft);
    margin: var(--s-4) 0 0;
}
.ah-plateau-quote em { color: var(--ah-copper); }
.ah-plateau-cite { display: block; font-size: 0.85rem; color: var(--c-mute); margin-top: 4px; font-style: normal; font-family: var(--f-data); }

/* -------------------------------------------------------------------------
   4. IDENTITY
   ------------------------------------------------------------------------- */
.ah-identity { background: var(--c-bg-alt); }
.ah-identity-stage { display: grid; gap: var(--s-6); max-width: 880px; margin: 0 auto; }

.ah-id-cards {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--s-4);
    align-items: stretch;
}
@media (max-width: 720px) {
    .ah-id-cards { grid-template-columns: 1fr; }
    .ah-id-vs { transform: rotate(90deg); margin: 0 auto; }
}
.ah-id-card {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 14px;
    padding: var(--s-5);
    box-shadow: 0 6px 18px -10px rgba(0,0,0,0.08);
}
.ah-id-outcome  { border-top: 3px solid var(--ah-coral); }
.ah-id-identity { border-top: 3px solid var(--ah-copper); }
.ah-id-tag {
    display: inline-block;
    font-family: var(--f-data);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    color: var(--c-mute);
    padding: 3px 8px;
    border-radius: var(--r-pill);
    background: rgba(0,0,0,0.04);
    margin-bottom: var(--s-3);
}
.ah-id-line {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--c-ink);
    margin: 0 0 var(--s-2);
    padding-left: var(--s-3);
    border-left: 2px solid var(--c-line);
}
.ah-id-meta {
    margin-top: var(--s-4);
    font-family: var(--f-data);
    font-size: 0.78rem;
    color: var(--c-mute);
    text-transform: uppercase;
    letter-spacing: 0.16em;
}
.ah-id-vs {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--f-serif);
    font-size: 2.2rem;
    color: var(--ah-copper);
}

.ah-id-form {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 14px;
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.ah-id-form-h { font-family: var(--f-serif); font-style: italic; font-size: 1.15rem; color: var(--ah-copper); margin: 0 0 var(--s-2); }

/* -------------------------------------------------------------------------
   5. HABIT LOOP
   ------------------------------------------------------------------------- */
.ah-loop-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-7);
    align-items: center;
}
@media (max-width: 920px) { .ah-loop-stage { grid-template-columns: 1fr; } }
.ah-loop-svg { width: 100%; max-width: 520px; height: auto; margin: 0 auto; display: block; color: var(--c-ink); }

.ah-loop-station { transform-box: fill-box; transform-origin: center; }
.ah-loop-cue      { animation: ahPulse 4s ease-in-out infinite alternate; animation-delay: 0s;   }
.ah-loop-craving  { animation: ahPulse 4s ease-in-out infinite alternate; animation-delay: 1s;   }
.ah-loop-response { animation: ahPulse 4s ease-in-out infinite alternate; animation-delay: 2s;   }
.ah-loop-reward   { animation: ahPulse 4s ease-in-out infinite alternate; animation-delay: 3s;   }
@keyframes ahPulse {
    0%   { transform: scale(0.96); }
    100% { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
    .ah-loop-station { animation: none; }
}

.ah-loop-glossary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
}
.ah-loop-card {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 12px;
    padding: var(--s-4);
}
.ah-loop-card h3 {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 1.15rem;
    margin: 0 0 var(--s-2);
    color: var(--ah-copper);
}
.ah-loop-card p { font-size: 0.92rem; line-height: 1.5; color: var(--c-ink-soft); margin: 0; }

/* -------------------------------------------------------------------------
   6. FOUR LAWS
   ------------------------------------------------------------------------- */
.ah-laws { background: var(--c-bg-alt); }
.ah-laws-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--s-4);
}
.ah-law {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 14px;
    padding: var(--s-5);
    position: relative;
    transition: transform 280ms cubic-bezier(.2,.8,.2,1), box-shadow 280ms cubic-bezier(.2,.8,.2,1);
}
.ah-law:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -16px rgba(0,0,0,0.18); }
.ah-law::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 36px; height: 3px;
    background: var(--ah-copper);
}
.ah-law-num {
    font-size: 0.85rem;
    color: var(--c-mute);
    font-weight: 700;
    letter-spacing: 0.18em;
    margin-bottom: var(--s-3);
}
.ah-law-h {
    font-family: var(--f-serif);
    font-size: 1.4rem;
    margin: 0 0 var(--s-3);
    color: var(--c-ink);
}
.ah-law-h em { color: var(--ah-copper); font-style: italic; }
.ah-law-build, .ah-law-break {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--c-ink-soft);
    margin: 0 0 var(--s-3);
}
.ah-law-build b { color: var(--ah-copper); font-weight: 700; }
.ah-law-break {
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px dashed var(--c-line);
    color: var(--c-mute);
}
.ah-law-break b { color: var(--ah-coral); font-weight: 700; }

/* -------------------------------------------------------------------------
   7. STACKER
   ------------------------------------------------------------------------- */
.ah-stacker-stage {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--s-6);
    align-items: start;
}
@media (max-width: 920px) { .ah-stacker-stage { grid-template-columns: 1fr; } }

.ah-stacker-form {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 14px;
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.ah-stacker-line {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    gap: var(--s-3);
}
.ah-stack-prefix {
    font-family: var(--f-data);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    color: var(--ah-copper);
    text-transform: uppercase;
    text-align: right;
    font-weight: 700;
}
.ah-stacker-line input { padding: 0.7rem 0.95rem; border-radius: 10px; }
.ah-stacker-line-context .ah-stack-prefix { color: var(--c-mute); }

.ah-stacker-saved {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 14px;
    padding: var(--s-5);
}
.ah-stacker-saved h3 {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 1.2rem;
    margin: 0 0 4px;
    color: var(--ah-copper);
}
.ah-stacker-count { font-size: 0.85rem; color: var(--c-mute); margin: 0 0 var(--s-3); }
.ah-stacker-count span { color: var(--ah-copper); font-weight: 700; font-size: 1.4rem; }
.ah-stack-list { list-style: none; padding: 0; margin: 0; }
.ah-stack-list li {
    padding: var(--s-3) 0;
    border-bottom: 1px dashed var(--c-line);
    font-size: 0.92rem;
    line-height: 1.5;
}
.ah-stack-list li:last-child { border-bottom: none; }
.ah-stack-anchor { color: var(--c-mute); }
.ah-stack-arrow { color: var(--ah-copper); margin: 0 6px; font-weight: 700; }
.ah-stack-new   { color: var(--c-ink); font-weight: 600; }
.ah-stack-when  { display: block; font-size: 0.78rem; color: var(--c-mute); margin-top: 4px; font-family: var(--f-data); }
.ah-stack-empty { color: var(--c-mute); font-style: italic; }

/* -------------------------------------------------------------------------
   8. TWO-MINUTE
   ------------------------------------------------------------------------- */
.ah-twomin { background: var(--c-bg-alt); }
.ah-twomin-stage { display: grid; gap: var(--s-5); max-width: 920px; margin: 0 auto; }

.ah-twomin-form {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 14px;
    padding: var(--s-5);
}
.ah-tm-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--s-4);
    align-items: center;
    margin-bottom: var(--s-4);
}
@media (max-width: 720px) {
    .ah-tm-row { grid-template-columns: 1fr; }
    .ah-tm-arrow { transform: rotate(90deg); }
}
.ah-tm-side { display: flex; flex-direction: column; gap: 6px; }
.ah-tm-label { font-family: var(--f-data); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--c-mute); margin: 0; }
.ah-tm-arrow { color: var(--ah-copper); display: flex; align-items: center; justify-content: center; }

.ah-tm-examples {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 14px;
    padding: var(--s-4) var(--s-5);
}
.ah-tm-examples-h {
    font-family: var(--f-data);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--c-mute);
    margin: 0 0 var(--s-3);
}
.ah-tm-examples ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
@media (max-width: 600px) { .ah-tm-examples ul { grid-template-columns: 1fr; } }
.ah-tm-examples li { font-size: 0.92rem; color: var(--c-ink-soft); padding: 4px 0; }
.ah-tm-arr { color: var(--ah-copper); font-weight: 700; margin: 0 4px; }

/* -------------------------------------------------------------------------
   9. RECOVERY
   ------------------------------------------------------------------------- */
.ah-recovery-card {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-left: 4px solid var(--ah-copper);
    border-radius: 12px;
    padding: var(--s-5) var(--s-6);
    box-shadow: 0 8px 24px -16px rgba(0,0,0,0.1);
}
.ah-recovery-card p {
    font-family: var(--f-serif);
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--c-ink-soft);
    margin: 0 0 var(--s-3);
}
.ah-recovery-quote {
    font-style: italic;
    color: var(--ah-copper) !important;
    margin: 0 !important;
}

/* -------------------------------------------------------------------------
   10. TROPHY ROOM / BADGES
   ------------------------------------------------------------------------- */
.ah-rewards { background: var(--c-bg-alt); }
.ah-trophy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--s-4);
}
.ah-trophy {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 14px;
    padding: var(--s-4);
    text-align: center;
    position: relative;
    transition: transform 280ms cubic-bezier(.2,.8,.2,1), box-shadow 280ms cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
    opacity: 0.55;
    filter: grayscale(0.6);
}
.ah-trophy.is-earned { opacity: 1; filter: none; }
.ah-trophy:hover { transform: translateY(-3px); box-shadow: 0 14px 32px -16px rgba(0,0,0,0.16); }

.ah-trophy-medal {
    width: 80px; height: 80px;
    margin: 0 auto var(--s-3);
    border-radius: 50%;
    background: linear-gradient(145deg, var(--c-bg-alt), var(--c-paper));
    border: 2px solid var(--c-line);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 -4px 12px rgba(0,0,0,0.05), 0 4px 14px rgba(0,0,0,0.06);
    position: relative;
}
.ah-trophy.is-earned .ah-trophy-medal {
    background: linear-gradient(145deg, var(--ah-cream), var(--ah-copper-soft) 60%, var(--ah-copper));
    border-color: var(--ah-copper);
    box-shadow: inset 0 -4px 12px rgba(184,101,30,0.3), 0 4px 14px rgba(184,101,30,0.25);
}
.ah-trophy-glyph {
    font-family: var(--f-serif);
    font-size: 2.1rem;
    line-height: 1;
    color: var(--c-mute);
    font-weight: 600;
}
.ah-trophy.is-earned .ah-trophy-glyph { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.18); }
.ah-trophy-name {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 1.05rem;
    margin: 0 0 4px;
    color: var(--c-ink);
}
.ah-trophy-rarity {
    font-family: var(--f-data);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    color: var(--c-mute);
    margin: 0 0 var(--s-3);
}
.ah-trophy-rare      .ah-trophy-rarity { color: #6B5B95; }
.ah-trophy-epic      .ah-trophy-rarity { color: #B8651E; }
.ah-trophy-legendary .ah-trophy-rarity { color: #E76F51; }
.ah-trophy-desc { font-size: 0.82rem; color: var(--c-ink-soft); margin: 0 0 var(--s-2); line-height: 1.45; }
.ah-trophy-quote {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 0.82rem;
    color: var(--ah-copper);
    border-top: 1px dashed var(--c-line);
    padding-top: var(--s-3);
    margin: var(--s-3) 0 0;
    line-height: 1.4;
}

/* Badge reveal overlay — shock-of-motivation moment */
.ah-badge-reveal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,15,20,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 380ms ease;
}
.ah-badge-reveal.is-on { opacity: 1; pointer-events: auto; }
.ah-badge-reveal-card {
    background: var(--c-paper);
    border-radius: 22px;
    padding: var(--s-7) var(--s-6) var(--s-5);
    max-width: 460px;
    width: 92vw;
    text-align: center;
    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.4);
    transform: translateY(30px) scale(0.92);
    transition: transform 540ms cubic-bezier(.2,1.4,.4,1);
    position: relative;
    z-index: 2;
}
.ah-badge-reveal.is-on .ah-badge-reveal-card { transform: translateY(0) scale(1); }
.ah-badge-reveal-tag {
    font-family: var(--f-data);
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ah-copper);
    margin: 0 0 var(--s-4);
}
.ah-badge-reveal-medal {
    width: 140px; height: 140px;
    margin: 0 auto var(--s-4);
    border-radius: 50%;
    background: linear-gradient(145deg, var(--ah-cream), var(--ah-copper-soft) 60%, var(--ah-copper));
    border: 3px solid var(--ah-copper);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 8px rgba(184,101,30,0.18), 0 0 30px rgba(184,101,30,0.5);
    animation: ahMedalSpin 1.4s 0.2s cubic-bezier(.2,.8,.2,1) backwards, ahMedalPulse 2.4s 1.6s ease-in-out infinite alternate;
}
@keyframes ahMedalSpin {
    from { transform: rotateY(180deg) scale(0.6); opacity: 0; }
    to   { transform: rotateY(0)      scale(1);   opacity: 1; }
}
@keyframes ahMedalPulse {
    0%   { box-shadow: 0 0 0 8px rgba(184,101,30,0.18), 0 0 30px rgba(184,101,30,0.5); }
    100% { box-shadow: 0 0 0 14px rgba(184,101,30,0.0),  0 0 50px rgba(184,101,30,0.7); }
}
.ah-badge-reveal-medal .ah-trophy-glyph { font-size: 3.4rem; color: #fff; }

.ah-badge-reveal-name {
    font-family: var(--f-serif);
    font-size: 1.6rem;
    color: var(--c-ink);
    margin: 0 0 4px;
}
.ah-badge-reveal-rarity {
    font-family: var(--f-data);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    color: var(--c-mute);
    text-transform: uppercase;
    margin: 0 0 var(--s-4);
}
.ah-badge-reveal-quote {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--c-ink-soft);
    border-left: 2px solid var(--ah-copper);
    padding-left: var(--s-3);
    margin: 0 0 var(--s-5);
    text-align: left;
}

/* Confetti — small drifting copper specks */
.ah-badge-reveal-confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.ah-confetti-piece {
    position: absolute;
    width: 8px; height: 14px;
    border-radius: 1px;
    animation: ahConfettiDrop linear forwards;
    top: -20px;
    will-change: transform, opacity;
}
@keyframes ahConfettiDrop {
    0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0.4; }
}

/* -------------------------------------------------------------------------
   11. RESOURCES
   ------------------------------------------------------------------------- */
.ah-res-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s-4);
}
.ah-res {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 12px;
    padding: var(--s-4);
    transition: transform 280ms cubic-bezier(.2,.8,.2,1), box-shadow 280ms cubic-bezier(.2,.8,.2,1);
}
.ah-res:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(0,0,0,0.14); }
.ah-res-type {
    display: inline-block;
    background: var(--ah-copper);
    color: #fff;
    padding: 2px 10px;
    border-radius: var(--r-pill);
    font-family: var(--f-data);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    font-weight: 700;
    margin-bottom: var(--s-3);
}
.ah-res h3 { font-family: var(--f-serif); margin: 0 0 4px; font-size: 1.15rem; color: var(--c-ink); }
.ah-res-author { font-family: var(--f-data); font-size: 0.78rem; color: var(--c-mute); margin: 0 0 var(--s-2); }
.ah-res p:last-child { font-size: 0.88rem; line-height: 1.5; color: var(--c-ink-soft); margin: 0; }

/* -------------------------------------------------------------------------
   12. FINAL
   ------------------------------------------------------------------------- */
.ah-final {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(184,101,30,0.08), transparent 60%),
        var(--c-bg);
    text-align: center;
    padding: var(--s-9) 0;
}
.ah-final-mark {
    font-size: 3.6rem;
    color: var(--ah-copper);
    margin: 0 0 var(--s-4);
    line-height: 1;
    opacity: 0.55;
}
.ah-final-quote {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    line-height: 1.4;
    color: var(--c-ink);
    max-width: 720px;
    margin: 0 auto var(--s-2);
}
.ah-final-cite {
    font-family: var(--f-data);
    font-size: 0.85rem;
    color: var(--c-mute);
    margin: 0 0 var(--s-6);
    letter-spacing: 0.16em;
}