/* =========================================================
   1. VARIABLES, RESET AND GLOBAL SETTINGS
   ========================================================= */

html,
body,
body.jargon-page-body,
.jargon-page,
.yap-headquarters,
.featured-section,
.glossary-section,
.random-section,
.ebook-section {
    background: #000 !important;
}
@font-face {
    font-family: NachoDisplay;
    src: url("/font/arial.ttf") format("truetype");
    font-display: swap;
}
:root {
    --black: #000;
    --white: #fff;
    --lime: #cfff04;
    --dark-green: #1e3028;
}
*, *::before, *::after {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    background: var(--black);
    color: var(--white);
    font-family: Arial, Helvetica, sans-serif;
}
body.receipts-modal-open {
    overflow: hidden;
}
button, input, select, textarea {
    font: inherit;
}
button {
    cursor: pointer;
}
a {
    color: inherit;
}
[hidden] {
    display: none !important;
}
img, svg {
    display: block;
    max-width: 100%;
}
.jargon-container {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}
.eyebrow {
    margin: 0 0 9px;
    color: var(--lime);
    font: 700 .68rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: .14em;
}
h1, h2, h3, h4 {
    font-family: NachoDisplay, Arial, Helvetica, sans-serif;
    font-weight: 900;
}
p {
    font-family: Arial, Helvetica, sans-serif;
}
/* =========================================================
   2. GLOBAL HEADER
   ========================================================= */
body.jargon-page-body {
    min-width: 320px;
    padding-top: 160px;
    overflow-x: hidden;
}
body.jargon-page-body > .top-header {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 160px;
    padding: 15px 40px;
    background: var(--black);
}
body.jargon-page-body > .top-header .logo-container {
    flex: 0 0 auto;
}
body.jargon-page-body > .top-header .logo-container a {
    display: block;
}
body.jargon-page-body > .top-header .logo-container img {
    display: block;
    width: auto;
    height: 130px;
}
body.jargon-page-body > .top-header .main-nav {
    display: flex;
    align-items: center;
    gap: 25px;
}
body.jargon-page-body > .top-header .nav-links,
body.jargon-page-body > .top-header .secondary-links {
    display: flex;
    align-items: center;
    list-style: none;
}
body.jargon-page-body > .top-header .nav-links {
    gap: 16px;
}
body.jargon-page-body > .top-header .nav-links a {
    display: block;
    padding: 10px 20px;
    border-radius: 8px;
    color: #fff;
    font: 900 1.15rem/1 Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-transform: uppercase;
}
body.jargon-page-body > .top-header .nav-links a:hover {
    color: var(--lime);
}
body.jargon-page-body > .top-header .secondary-links {
    margin-left: 20px;
    padding-left: 20px;
    border-left: 2px solid #333;
}
body.jargon-page-body > .top-header .btn-intake {
    display: block;
    padding: 12px 28px;
    border: 0;
    border-radius: 8px;
    background: var(--lime);
    color: var(--black);
    font: 900 1rem/1 Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-transform: uppercase;
}
body.jargon-page-body > .top-header .btn-intake:hover {
    background: #b8e600;
}
/* =========================================================
   3. PAGE HERO AND HEADQUARTERS
   ========================================================= */
.jargon-visual-hero {
    padding: 0;
}
.jargon-visual-hero img {
    display: block;
    width: 100%;
    height: auto;
}
.yap-headquarters {
    padding: 32px 0 70px;
    background:
        radial-gradient(circle at 85% 15%, rgba(207, 255, 4, .06), transparent 34%),
        #050505;
}
.yap-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 18px;
}
.yap-branding h1 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 4.6rem);
    line-height: .85;
    letter-spacing: -.07em;
}
.yap-branding h1 span {
    color: var(--lime);
}
.yap-subtitle {
    margin: 11px 0 0;
    color: #777;
    font: 400 .7rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: .17em;
}
.yap-panel,
.filter-panel {
    padding: 24px;
    border: 1px solid #303030;
    border-radius: 13px;
    background: linear-gradient(145deg, #101010, #080808);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
}
.yap-panel-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}
.yap-panel-heading h2 {
    margin: 0;
    font-size: clamp(1.25rem, 2.5vw, 2.2rem);
    line-height: .9;
    letter-spacing: -.06em;
}
.current-pour,
.system-status {
    color: #777;
    font: 700 .62rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: .08em;
}
.current-pour {
    text-transform: uppercase;
}
.system-status {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.system-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 9px var(--lime);
}
/* =========================================================
   4. SEARCH AND MODE CONTROLS
   ========================================================= */
.yap-main-controls {
    display: grid;
    gap: 12px;
}
.search-box {
    display: grid;
    gap: 7px;
}
.search-box input {
    width: 100%;
    min-height: 56px;
    padding: 15px 17px;
    border: 1px solid #444;
    border-radius: 8px;
    outline: 0;
    background: #030303;
    color: #fff;
    font: 400 .92rem/1 Arial, Helvetica, sans-serif;
}
.search-box input:focus {
    border-color: var(--lime);
    box-shadow: 0 0 0 2px rgba(207, 255, 4, .12);
}
.search-box input::placeholder {
    color: #666;
}
.mode-controls {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}
.mode-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 65px;
    padding: 12px 15px;
    border: 1px solid #3b3b3b;
    border-radius: 9px;
    background: #111;
    color: #fff;
    text-align: left;
    transition: border-color .2s ease,
                background .2s ease,
                transform .2s ease,
                box-shadow .2s ease;
}
.mode-card:hover,
.mode-card:focus-visible {
    border-color: var(--lime);
    background: #151515;
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(207, 255, 4, .14);
    z-index: 20;
}
.mode-card.is-active {
    border-color: var(--lime);
    background: rgba(207, 255, 4, .1);
    box-shadow: 0 0 18px rgba(207, 255, 4, .12);
    z-index: 15;
}
.mode-card span:nth-child(2) {
    display: block;
    min-width: 0;
}
.mode-card strong {
    display: block;
    font: 700 .7rem/1.2 Arial, Helvetica, sans-serif;
    letter-spacing: .04em;
}
.mode-card small {
    position: absolute;
    bottom: calc(100% + 13px);
    left: 50%;
    display: grid;
    gap: 7px;
    width: min(290px, calc(100vw - 80px));
    padding: 14px 16px 15px;
    border: 1px solid var(--lime);
    border-radius: 8px;
    background: #090909;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px) scale(.96);
    transform-origin: bottom center;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45),
                0 0 20px rgba(207, 255, 4, .16);
    transition: opacity .2s ease,
                transform .2s ease,
                visibility .2s ease;
    visibility: hidden;
    z-index: 30;
}
.mode-card small::before {
    content: "";
    position: absolute;
    right: 14px;
    bottom: -6px;
    left: 14px;
    height: 1px;
    background: var(--lime);
    box-shadow: 0 0 8px rgba(207, 255, 4, .75);
}
.mode-card small::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 11px;
    height: 11px;
    border-right: 1px solid var(--lime);
    border-bottom: 1px solid var(--lime);
    background: #090909;
    transform: translateX(-50%) rotate(45deg);
}
.mode-card:hover small,
.mode-card:focus-visible small,
.mode-card.is-active small {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
    visibility: visible;
}
.mode-card small b {
    color: var(--lime);
    font: 700 .62rem/1.2 Arial, Helvetica, sans-serif;
    letter-spacing: .1em;
}
.mode-card small span {
    display: block;
    color: #fff;
    font: 400 .78rem/1.35 Arial, Helvetica, sans-serif;
}
.mode-card small em {
    display: block;
    color: #888;
    font: 700 .58rem/1.2 Arial, Helvetica, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.mode-icon {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    color: var(--lime);
    font: 400 1.45rem/1 Arial, Helvetica, sans-serif;
}
.mode-light {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin-left: auto;
    border-radius: 50%;
    background: #555;
}
.mode-card.is-active .mode-light {
    background: var(--lime);
    box-shadow: 0 0 10px var(--lime);
}
.mode-card:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
/* =========================================================
   5. PRESCRIPTION BANNER AND CROSS BUTTON
   ========================================================= */
.prescription-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 168px;
    align-items: stretch;
    gap: 12px;
    margin-top: 14px;
}
.prescription-banner {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    height: 168px;
    min-height: 168px;
    padding: 15px 22px;
    border: 1px solid var(--lime);
    border-radius: 12px;
    background: var(--lime);
    color: var(--black);
}
.prescription-banner-bottle {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    transform: rotate(-10deg);
}
.prescription-banner-bottle img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.prescription-banner-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    text-align: center;
}
.prescription-banner-copy h2 {
    margin: 0;
    font-size: clamp(1.55rem, 3.35vw, 3.15rem);
    line-height: .88;
    letter-spacing: -.065em;
    text-transform: uppercase;
}
.prescription-banner-instruction {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 11px;
    padding-right: 8px;
    text-align: right;
}
.prescription-banner-instruction span {
    font: 900 .82rem/1 NachoDisplay, Arial, Helvetica, sans-serif;
    letter-spacing: .03em;
    text-align: right;
    text-transform: uppercase;
    white-space: nowrap;
}
.prescription-banner-instruction svg {
    width: 120px;
    height: 34px;
    overflow: visible;
    flex: 0 0 auto;
}
.prescription-banner-instruction path {
    fill: none;
    stroke: var(--black);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.prescription-cross-button {
    display: grid;
    place-items: center;
    width: 168px;
    height: 168px;
    min-width: 168px;
    min-height: 168px;
    padding: 28px;
    border: 0;
    border-radius: 12px;
    background: var(--lime);
    color: var(--black);
    box-shadow: 0 0 0 rgba(207, 255, 4, 0);
    animation: prescription-attention 4s ease-in-out,
               prescription-pulse 3.6s ease-in-out 4s infinite;
    transition: transform .2s ease, background .2s ease;
}
.prescription-cross-button svg {
    width: 100%;
    height: 100%;
    fill: var(--dark-green);
    filter: drop-shadow(0 0 0 transparent);
    transition: fill .2s ease, filter .2s ease;
}
.prescription-cross-button:hover,
.prescription-cross-button:focus-visible {
    background: #fff;
    transform: scale(1.035);
    animation-play-state: paused;
    box-shadow: 0 0 0 5px rgba(207, 255, 4, .4),
                0 0 32px rgba(207, 255, 4, .95);
}
.prescription-cross-button:hover svg,
.prescription-cross-button:focus-visible svg {
    fill: var(--black);
    filter: drop-shadow(0 0 8px rgba(207, 255, 4, .9));
}
.prescription-cross-button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}
/* =========================================================
   6. FILTER PANEL
   ========================================================= */
.filter-panel {
    margin-top: 14px;
}
.filter-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
}
.filter-heading h2 {
    margin: 0;
    font-size: clamp(1.7rem, 4vw, 3.4rem);
    line-height: .88;
    letter-spacing: -.07em;
}
.clear-filters {
    padding: 9px 12px;
    border: 1px solid var(--lime);
    border-radius: 7px;
    background: transparent;
    color: #fff;
    font: 700 .65rem/1 Arial, Helvetica, sans-serif;
    white-space: nowrap;
}
.clear-filters:hover {
    background: var(--lime);
    color: var(--black);
}
.category-filters {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 9px;
    margin-top: 22px;
}
.category-filter {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 82px;
    padding: 12px 8px;
    border: 1px solid #393939;
    border-radius: 9px;
    background: linear-gradient(145deg, #151515, #0d0d0d);
    color: #aaa;
    text-align: center;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.category-filter:hover {
    border-color: #777;
    transform: translateY(-2px);
}
.category-filter.is-selected {
    border-color: var(--lime);
    background: rgba(207, 255, 4, .1);
    color: #fff;
    box-shadow: 0 0 15px rgba(207, 255, 4, .08);
}
.category-filter span {
    font: 700 .68rem/1.15 Arial, Helvetica, sans-serif;
}
.category-filter small {
    color: #777;
    font: 400 .62rem/1 Arial, Helvetica, sans-serif;
}
.category-filter b {
    display: none;
    color: var(--lime);
    font: 700 .9rem/1 Arial, Helvetica, sans-serif;
}
.category-filter.is-selected b {
    display: block;
}
.category-description {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin-top: 12px;
}
.category-description-card {
    display: flex;
    gap: 11px;
    padding: 15px;
    border: 1px solid #292929;
    border-radius: 8px;
    background: #111;
}
.category-description-card strong {
    display: block;
    margin-bottom: 6px;
    color: var(--lime);
    font: 700 .68rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.category-description-card p {
    margin: 0;
    color: #aaa;
    font: 400 .86rem/1.4 Arial, Helvetica, sans-serif;
}
.category-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--lime);
}
.status-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 18px;
    color: var(--lime);
    font: 700 .68rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: .07em;
}
.status-row span {
    color: #777;
}
/* =========================================================
   7. RANDOM CARD
   ========================================================= */
.random-section {
    height: auto !important;
    min-height: 0 !important;
    padding: 30px 0 !important;
    background: var(--black) !important;
    scroll-margin-top: 150px;
}
.random-card,
.random-card-frame {
    position: relative;
    padding: 38px;
    border: 1px solid var(--black);
    border-radius: 13px;
    background: var(--lime);
    color: var(--black);
    box-shadow: 0 18px 35px rgba(0, 0, 0, .2);
}
.random-card {
    height: auto;
    min-height: 0;
}
.random-card-frame {
    height: 460px !important;
    min-height: 460px !important;
    max-height: 460px !important;
    overflow: hidden;
}
.random-close {
    position: absolute;
    top: 17px;
    right: 18px;
    border: 0;
    background: transparent;
    color: var(--black);
    font: 700 .65rem/1 Arial, Helvetica, sans-serif;
}
.random-card h2 {
    margin: 20px 0 15px;
    font-size: clamp(2.3rem, 6vw, 5rem);
    line-height: .88;
    letter-spacing: -.08em;
}
.random-card p {
    max-width: 850px;
    margin: 0;
    font: 400 clamp(1.1rem, 2.2vw, 1.5rem)/1.4 Arial, Helvetica, sans-serif;
}
.random-card .term-tags {
    color: #555;
}
.random-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
}
.random-next,
.random-full {
    padding: 12px 15px;
    border: 1px solid var(--black);
    border-radius: 6px;
    background: var(--black);
    color: var(--lime);
    font: 700 .67rem/1 Arial, Helvetica, sans-serif;
}
.random-next:hover,
.random-full:hover {
    background: #fff;
    color: var(--black);
}
.random-pop {
    animation: randomPop .5s ease both;
}
.random-result-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.random-spinner-content {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
}
.random-spinner-content .random-diagnosis {
    position: absolute;
    top: 88px;
    left: 0;
}
.random-spinner-content .random-spin-term {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    margin: 0 !important;
    transform: translateY(-50%);
    text-align: left;
}
.random-spinner-content .random-spin-caption {
    position: absolute;
    bottom: 72px;
    left: 0;
    margin: 0 !important;
    color: var(--black) !important;
    font: 700 1rem/1.4 Arial, Helvetica, sans-serif !important;
    text-align: left;
}
.random-diagnosis {
    animation: diagnosisPulse .45s ease-in-out infinite alternate;
}
.random-spin-term {
    min-height: 1em;
    animation: spinTerm .12s ease both;
    font-size: clamp(2.5rem, 7vw, 6rem);
    line-height: .88;
    letter-spacing: -.08em;
}
/* =========================================================
   8. GENERAL AND FEATURED CONTENT
   ========================================================= */
.featured-section,
.glossary-section,
.ebook-section {
    padding: 85px 0;
}
.section-heading {
    margin-bottom: 32px;
}
.section-heading h2 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: .88;
    letter-spacing: -.07em;
}
.section-heading > p:last-child {
    max-width: 700px;
    margin: 16px 0 0;
    color: #999;
    font: 400 1rem/1.5 Arial, Helvetica, sans-serif;
}
.featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.featured-card {
    padding: 23px;
    border: 1px solid #292929;
    border-radius: 10px;
    background: linear-gradient(145deg, #171717, #101010);
}
.featured-card h3 {
    margin: 12px 0;
    font-size: 1.55rem;
    letter-spacing: -.04em;
}
.featured-card p {
    margin: 0;
    color: #ccc;
    font: 400 .95rem/1.55 Arial, Helvetica, sans-serif;
}
.term-category {
    color: var(--lime);
    font: 700 .66rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.term-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    color: #999;
    font: 400 .68rem/1.2 Arial, Helvetica, sans-serif;
}
/* =========================================================
   9. GLOSSARY TERM CARDS
   ========================================================= */
.glossary-section {
    scroll-margin-top: 110px;
}
.glossary-list {
    display: grid;
    gap: 18px;
    margin-top: 30px;
}
.term-item {
    scroll-margin-top: 110px;
    border: 1px solid #222;
    border-radius: 12px;
    background: #0d0d0d;
    transition: border-color .2s ease, box-shadow .2s ease;
    overflow: hidden;
}
.term-item:hover {
    border-color: #333;
}
.term-item.is-open {
    border-color: #383838;
    background: #0f0f0f;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .45);
}
.term-toggle {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 1.8fr 30px;
    align-items: center;
    gap: 25px;
    width: 100%;
    padding: 22px 26px;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: left;
}
.term-toggle:hover,
.term-item.is-open .term-toggle {
    color: var(--lime);
}
.term-toggle h3 {
    margin: 0;
    font-size: clamp(1.3rem, 2.6vw, 2.1rem);
    line-height: 1;
    letter-spacing: -.05em;
}
.term-arrow {
    color: var(--lime);
    font: 400 1.8rem/1 Arial, Helvetica, sans-serif;
    transition: transform .2s ease;
}
.term-item.is-open .term-arrow {
    transform: rotate(90deg);
}
.term-answer {
    display: none;
    padding: 0 26px 26px;
    border-top: 1px solid #1a1a1a;
}
.term-item.is-open .term-answer {
    display: block;
}
.term-answer p {
    max-width: 900px;
    margin: 0 0 18px;
    color: #eee;
    font: 400 1.08rem/1.6 Arial, Helvetica, sans-serif;
}
.actual-tea-block {
    padding-top: 20px;
}
.actual-tea-block h4 {
    margin: 0 0 10px;
    color: var(--lime);
    font: 700 .68rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: .1em;
}
/* Mode toggles view rules */
.tldr-label, .serious-label,
.tldr-copy,  .serious-copy {
    display: none;
}
.term-answer.tldr-on .standard-label,
.term-answer.tldr-on .standard-copy,
.term-answer.serious-on .standard-label,
.term-answer.serious-on .standard-copy {
    display: none;
}
.term-answer.tldr-on .tldr-label,
.term-answer.tldr-on .tldr-copy,
.term-answer.serious-on .serious-label,
.term-answer.serious-on .serious-copy {
    display: block;
}
/* Print Dossier Content (Hidden in Web View) */
.print-dossier-content {
    display: none;
}
/* Action Toolbar */
.term-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}
.term-action {
    padding: 10px 16px;
    border: 1px solid #333;
    border-radius: 6px;
    background: #161616;
    color: #fff;
    font: 700 .72rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.term-action:hover,
.term-action:focus-visible {
    border-color: var(--lime);
    background: #202020;
    color: var(--lime);
    transform: translateY(-1px);
}
.term-action.show-receipts {
    border-color: var(--lime);
    background: rgba(207, 255, 4, .1);
    color: var(--lime);
}
.term-action.show-receipts:hover {
    background: var(--lime);
    color: var(--black);
}
/* Related Terms Deck */
.related-terms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px dashed #262626;
    color: #888;
    font: 400 .7rem/1.4 Arial, Helvetica, sans-serif;
}
.related-terms strong {
    color: #777;
    font: 700 .7rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.related-term {
    padding: 6px 12px;
    border: 1px solid #333;
    border-radius: 20px;
    background: transparent;
    color: #bbb;
    font: 600 .75rem/1 Arial, Helvetica, sans-serif;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.related-term:hover,
.related-term:focus-visible {
    border-color: var(--lime);
    background: #1c1c1c;
    color: var(--lime);
}
/* =========================================================
   10. RECEIPTS TAKEOVER MODAL (NO INTERNAL SCROLLING)
   ========================================================= */
.receipts-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10005;
    display: grid;
    place-items: center;
    padding: 30px 20px;
    background:
        radial-gradient(ellipse 1100px 850px at center, rgba(207, 255, 4, 0.28) 0%, rgba(207, 255, 4, 0.12) 42%, rgba(0, 0, 0, 0.65) 85%),
        rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    overflow-y: auto;
    animation: modalFadeIn .22s ease both;
}
@keyframes modalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.receipts-takeover-card {
    position: relative;
    width: min(100%, 1040px);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(207, 255, 4, 0.4);
    border-radius: 14px;
    background: #0e0e0e;
    color: #fff;
    box-shadow:
        0 0 50px rgba(207, 255, 4, 0.35),
        0 0 110px rgba(207, 255, 4, 0.18),
        0 30px 80px rgba(0, 0, 0, 0.95);
    overflow: visible;
    animation: modalCardPop .25s ease both;
}
@keyframes modalCardPop {
    from { transform: scale(.96) translateY(12px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}
.takeover-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 28px 16px;
    border-bottom: 1px solid #222;
    border-radius: 14px 14px 0 0;
    background: #111;
}
.takeover-header h2 {
    margin: 4px 0 8px;
    color: var(--lime);
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    line-height: .95;
    letter-spacing: -.05em;
    text-transform: uppercase;
}
.takeover-header .term-tags {
    margin-bottom: 0;
}
.takeover-close {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #444;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.takeover-close:hover,
.takeover-close:focus-visible {
    border-color: var(--lime);
    color: var(--black);
    background: var(--lime);
}
.takeover-body {
    padding: 22px 28px;
    overflow: visible;
    display: grid;
    gap: 14px;
}
/* Dual-Pane Juxtaposition (Equal Typography, High Focus) */
.takeover-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.comparison-column {
    padding: 16px 18px;
    border: 1px solid #282828;
    border-radius: 10px;
    background: #151515;
}
.comparison-column.raw-tea-col {
    border-left: 3px solid var(--lime);
}
.comparison-column.boardroom-col {
    border-left: 3px solid #888;
}
.comparison-column p {
    margin: 8px 0 0;
    color: #eee;
    font: 400 1rem/1.55 Arial, Helvetica, sans-serif;
}
/* Module Badge Labels */
.dossier-pill-tag {
    display: inline-block;
    color: var(--lime);
    font: 800 .72rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
}
/* Dossier Full-Width Panels */
.dossier-panel {
    padding: 16px 18px;
    border: 1px solid #222;
    border-radius: 10px;
    background: #141414;
}
.category-lore-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0;
}
.category-lore-chip {
    padding: 3px 8px;
    border: 1px solid var(--lime);
    border-radius: 4px;
    background: rgba(207, 255, 4, .08);
    color: var(--lime);
    font: 700 .66rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.category-lore-copy p {
    margin: 4px 0 0;
    color: #aaa;
    font: 400 .88rem/1.45 Arial, Helvetica, sans-serif;
}
/* Lower Deck: Strategic Intel Grid */
.dossier-intel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.dossier-card {
    padding: 16px 18px;
    border: 1px solid #222;
    border-radius: 10px;
    background: #141414;
}
.dossier-card p {
    margin: 6px 0 0;
    color: #ccc;
    font: 400 .88rem/1.5 Arial, Helvetica, sans-serif;
}
/* Framework Loadout Rack */
.framework-panel .receipts-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.framework-panel .receipts-list li {
    padding: 6px 12px;
    border: 1px solid #333;
    border-radius: 5px;
    background: #1b1b1b;
    color: #e2e2e2;
    font: 600 .75rem/1.2 Arial, Helvetica, sans-serif;
    letter-spacing: .02em;
    transition: border-color .2s ease, background .2s ease;
}
.framework-panel .receipts-list li:hover {
    border-color: var(--lime);
    background: #242424;
}
/* Modal Action Toolbar */
.takeover-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 28px;
    border-top: 1px solid #222;
    border-radius: 0 0 14px 14px;
    background: #111;
}
.takeover-close-btn {
    margin-left: auto;
    border-color: #444;
    color: #aaa;
}
.takeover-close-btn:hover {
    border-color: var(--lime);
    color: var(--lime);
}
/* =========================================================
   11. E-BOOK AND FOOTER
   ========================================================= */
.ebook-section {
    padding: 85px 0;
    background: #101010;
}
.ebook-card {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(190px, .55fr) minmax(250px, .8fr);
    align-items: center;
    gap: 28px;
    min-height: 500px;
    padding: 58px 50px;
    border-radius: 13px;
    background: var(--lime);
    color: var(--black);
}
.ebook-copy {
    min-width: 0;
}
.ebook-card h2 {
    margin: 0 0 58px;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: .85;
    letter-spacing: -.07em;
}
.ebook-card p:not(.eyebrow) {
    max-width: 600px;
    font: 400 1.05rem/1.5 Arial, Helvetica, sans-serif;
}
.ebook-card .ebook-title {
    margin-bottom: 9px;
    font-size: .78rem !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
}
.ebook-cover {
    display: grid;
    place-items: center;
    align-self: center;
    min-width: 0;
    transform: translateX(-50px);
}
.ebook-cover img {
    display: block;
    width: min(100%, 270px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(12px 15px 7px rgba(0, 0, 0, .28));
    transform: rotate(-4deg);
    transition: transform .25s ease, filter .25s ease;
}
.ebook-cover img:hover {
    filter: drop-shadow(15px 18px 9px rgba(0, 0, 0, .34));
    transform: rotate(-2deg) translateY(-4px) scale(1.025);
}
.ebook-form {
    display: grid;
    align-content: center;
    gap: 10px;
    min-width: 0;
}
.ebook-form label {
    font: 700 .72rem/1 Arial, Helvetica, sans-serif;
}
.ebook-form input {
    padding: 15px;
    border: 1px solid var(--black);
    border-radius: 6px;
    background: transparent;
    color: var(--black);
    font: 400 .9rem/1 Arial, Helvetica, sans-serif;
}
.ebook-form input::placeholder {
    color: #555;
}
.ebook-form button {
    padding: 15px;
    border: 1px solid var(--black);
    border-radius: 6px;
    background: var(--black);
    color: var(--lime);
    font: 700 .75rem/1 Arial, Helvetica, sans-serif;
}
.ebook-form button:hover {
    background: #fff;
    color: var(--black);
}
.ebook-form small {
    font: 400 .68rem/1.4 Arial, Helvetica, sans-serif;
}
.newsletter-thanks-card {
    display: block;
    width: 100%;
    min-height: 500px;
    padding: 58px 50px;
    border-radius: 13px;
    background: var(--lime);
    color: var(--black);
}
.newsletter-thanks-card h2 {
    max-width: 760px;
    margin: 0 0 30px;
    font-size: clamp(3rem, 7vw, 6.5rem);
    line-height: .84;
    letter-spacing: -.08em;
}
.newsletter-thanks-card p:not(.eyebrow) {
    max-width: 620px;
    margin: 0 0 30px;
    color: var(--black);
    font: 400 1.1rem/1.5 Arial, Helvetica, sans-serif;
}
.newsletter-thanks-card a {
    display: inline-block;
    padding: 13px 16px;
    border: 1px solid var(--black);
    border-radius: 6px;
    background: var(--black);
    color: var(--lime);
    font: 700 .7rem/1 Arial, Helvetica, sans-serif;
    text-decoration: none;
}
.newsletter-thanks-card a:hover {
    background: #fff;
    color: var(--black);
}
.site-footer {
    padding: 32px 0;
    color: #777;
}
body.jargon-page-body > .site-footer .footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;
    min-height: 120px;
    padding: 28px 0;
    color: #888;
    font-size: .82rem;
    text-align: center;
}
.footer-links ul,
.social-icon ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
}
.footer-links a,
.social-icon a {
    color: #888;
    text-decoration: none;
}
.footer-links a:hover,
.social-icon a:hover {
    color: var(--lime);
}
.social-icon a {
    color: #fff;
    font-size: 1.15rem;
}
/* =========================================================
   12. SUGGESTION FORM AND RETURN TO TOP
   ========================================================= */
.term-suggestion-form {
    display: grid;
    gap: 10px;
    width: min(100%, 520px);
    margin: 28px auto 0;
    text-align: left;
}
.term-suggestion-form label {
    color: var(--lime);
    font: 700 .68rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.term-suggestion-form input,
.term-suggestion-form textarea {
    width: 100%;
    padding: 13px;
    border: 1px solid #444;
    border-radius: 6px;
    background: #101010;
    color: #fff;
    font: 400 .9rem/1.4 Arial, Helvetica, sans-serif;
}
.term-suggestion-form textarea {
    resize: vertical;
}
.term-suggestion-form button {
    width: max-content;
    padding: 12px 15px;
    border: 1px solid var(--black);
    border-radius: 6px;
    background: var(--lime);
    color: var(--black);
    font: 700 .75rem/1 Arial, Helvetica, sans-serif;
}
.empty-state {
    padding: 110px 20px 130px;
    text-align: center;
}
.empty-state h2 {
    margin: 0 0 22px;
    font-size: clamp(2.3rem, 6vw, 4.8rem);
    line-height: .88;
    letter-spacing: -.07em;
}
.empty-state p {
    max-width: 700px;
    margin: 0 auto;
    color: #aaa;
    font: 400 1rem/1.5 Arial, Helvetica, sans-serif;
}
#return-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--black);
    border-radius: 50%;
    background: var(--lime);
    color: var(--black);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, visibility .25s ease,
                transform .25s ease, background .2s ease;
}
#return-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#return-to-top:hover {
    background: var(--black);
    color: var(--lime);
}
#return-to-top svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.form-trap {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}
/* =========================================================
   13. COOKIE CONSENT
   ========================================================= */
.cookie-banner {
    position: fixed;
    right: 24px;
    bottom: 24px;
    left: 24px;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 22px 26px;
    border: 1px solid var(--lime);
    border-radius: 12px;
    background: #101010;
    color: var(--white);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .55),
                0 0 24px rgba(207, 255, 4, .12);
}
.cookie-banner__content {
    max-width: 760px;
}
.cookie-banner h2,
.cookie-preferences h2 {
    margin: 0 0 12px;
    color: var(--lime);
    font: 900 clamp(1.5rem, 3vw, 2.5rem)/.9 NachoDisplay, Arial, Helvetica, sans-serif;
    letter-spacing: -.06em;
    text-transform: uppercase;
}
.cookie-banner p,
.cookie-preferences p {
    margin: 0 0 10px;
    color: #ccc;
    font: 400 .88rem/1.5 Arial, Helvetica, sans-serif;
}
.cookie-banner p:last-child {
    margin-bottom: 0;
}
.cookie-banner a {
    color: var(--lime);
    text-decoration: underline;
}
.cookie-banner__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.cookie-button {
    padding: 11px 14px;
    border: 1px solid var(--lime);
    border-radius: 6px;
    background: transparent;
    color: var(--lime);
    font: 700 .68rem/1 Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    transition: background .2s ease,
                color .2s ease,
                transform .2s ease;
}
.cookie-button:hover,
.cookie-button:focus-visible {
    background: var(--lime);
    color: var(--black);
    transform: translateY(-1px);
}
.cookie-button--lime {
    background: var(--lime);
    color: var(--black);
}
.cookie-button--lime:hover,
.cookie-button--lime:focus-visible {
    background: var(--white);
    color: var(--black);
}
.cookie-preferences {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, .78);
}
.cookie-preferences__panel {
    position: relative;
    width: min(100%, 560px);
    padding: 30px;
    border: 1px solid var(--lime);
    border-radius: 12px;
    background: #101010;
    color: var(--white);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .65),
                0 0 28px rgba(207, 255, 4, .16);
}
.cookie-preferences__panel h2 {
    margin-right: 35px;
}
.cookie-preferences__close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #555;
    border-radius: 50%;
    background: transparent;
    color: var(--white);
    font: 400 1.35rem/1 Arial, Helvetica, sans-serif;
}
.cookie-preferences__close:hover,
.cookie-preferences__close:focus-visible {
    border-color: var(--lime);
    color: var(--lime);
}
.cookie-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
    border-top: 1px solid #333;
    cursor: pointer;
}
.cookie-option span {
    display: grid;
    gap: 5px;
}
.cookie-option strong {
    color: var(--white);
    font: 700 .78rem/1.2 Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}
.cookie-option small {
    color: #999;
    font: 400 .76rem/1.35 Arial, Helvetica, sans-serif;
}
.cookie-option input {
    width: 18px;
    height: 18px;
    accent-color: var(--lime);
}
.cookie-preferences__save {
    margin-top: 20px;
}
/* =========================================================
   14. KEYFRAME ANIMATIONS
   ========================================================= */
@keyframes prescription-attention {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(207, 255, 4, 0),
                    0 0 0 rgba(207, 255, 4, 0);
        transform: scale(1);
    }
    18% {
        box-shadow: 0 0 0 6px rgba(207, 255, 4, .35),
                    0 0 22px rgba(207, 255, 4, .8);
    }
    42% {
        box-shadow: 0 0 0 13px rgba(207, 255, 4, .12),
                    0 0 42px rgba(207, 255, 4, 1);
        transform: scale(1.045);
    }
    62% {
        box-shadow: 0 0 0 5px rgba(207, 255, 4, .3),
                    0 0 25px rgba(207, 255, 4, .85);
        transform: scale(1);
    }
    82% {
        box-shadow: 0 0 0 10px rgba(207, 255, 4, .16),
                    0 0 34px rgba(207, 255, 4, .9);
    }
}
@keyframes prescription-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(207, 255, 4, 0),
                    0 0 10px rgba(207, 255, 4, .35);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(207, 255, 4, .2),
                    0 0 30px rgba(207, 255, 4, .9);
        transform: scale(1.025);
    }
}
@keyframes randomPop {
    0%   { opacity: 0; transform: translateY(18px) scale(.97); }
    60%  { transform: translateY(-4px) scale(1.01); }
    100% { opacity: 1; transform: none; }
}
@keyframes diagnosisPulse {
    from { opacity: .45; }
    to   { opacity: 1; }
}
@keyframes spinTerm {
    from { opacity: .25; transform: translateY(5px); }
    to   { opacity: 1;   transform: none; }
}
/* =========================================================
   15. BREW CREW
   ========================================================= */
.brew-page { background: #0d0d0d; color: #ccc; font: 400 .95rem/1.7 Arial, Helvetica, sans-serif; }
.brew-container { width: min(100% - 48px, 880px); margin: 0 auto; }
/* TICKER */
.brew-ticker { overflow: hidden; padding: 13px 0; border-top: 1px solid #262626; border-bottom: 1px solid #262626; background: #111; }
.brew-ticker__track { display: inline-flex; white-space: nowrap; animation: brew-ticker 30s linear infinite; will-change: transform; }
.brew-ticker__track span { display: inline-block; color: var(--lime, #cfff04); font: 700 .72rem/1 Arial, Helvetica, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.brew-ticker__track span em { display: inline-block; margin: 0 40px; color: #555; font-style: normal; }
@keyframes brew-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* HERO */
.brew-hero { position: relative; padding: 84px 0 64px; border-bottom: 1px solid #000000; text-align: center; overflow: hidden; }
.brew-hero::before { content: ""; position: absolute; top: -140px; left: 50%; transform: translateX(-50%); width: 660px; height: 340px; border-radius: 50%; background: radial-gradient(closest-side, rgba(207, 255, 4, .14), transparent); pointer-events: none; }
.brew-hero h1 { position: relative; margin: 14px 0 12px; color: var(--lime, #cfff04); font: 900 clamp(2.4rem, 7vw, 4.4rem)/.9 NachoDisplay, Arial, Helvetica, sans-serif; letter-spacing: -.06em; text-transform: uppercase; }
.brew-hero h1 em { font-style: normal; color: var(--white, #fff); }
.brew-hero-sub { position: relative; max-width: 640px; margin: 0 auto 24px; color: #bbb; font-size: 1.08rem; }
.brew-hero-sub strong { color: var(--lime, #cfff04); }
.brew-hero-actions { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.brew-apply-cta { display: inline-block; padding: 14px 26px; border: 1px solid var(--lime, #cfff04); border-radius: 6px; background: var(--lime, #cfff04); color: #000; font: 700 .8rem/1 Arial, Helvetica, sans-serif; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: background .2s ease, color .2s ease, transform .2s ease; }
.brew-apply-cta:hover, .brew-apply-cta:focus-visible { background: var(--white, #fff); transform: translateY(-2px); }
.brew-ghost-cta { display: inline-block; padding: 14px 26px; border: 1px solid #444; border-radius: 6px; background: transparent; color: #eee; font: 700 .8rem/1 Arial, Helvetica, sans-serif; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: border-color .2s ease, color .2s ease, transform .2s ease; }
.brew-ghost-cta:hover, .brew-ghost-cta:focus-visible { border-color: var(--lime, #cfff04); color: var(--lime, #cfff04); transform: translateY(-2px); }
/* SECTIONS */
.brew-section { padding: 56px 0; border-bottom: 0px solid #1f1f1f; }
.brew-section:last-of-type { border-bottom: 0; }
.brew-section h2 { margin: 0 0 14px; color: var(--lime, #cfff04); font: 900 clamp(1.3rem, 3vw, 1.9rem)/1.05 NachoDisplay, Arial, Helvetica, sans-serif; letter-spacing: -.04em; text-transform: uppercase; }
.brew-section h2 em { font-style: normal; color: var(--white, #fff); }
.brew-section h3 { margin: 22px 0 8px; color: #fff; font: 700 .82rem/1.3 Arial, Helvetica, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.brew-section p { margin: 0 0 12px; color: #bbb; }
.brew-lede { color: #bbb; font-size: 1.02rem; max-width: 640px; }
/* LISTS */
.brew-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.brew-list li { padding: 14px 16px; border: 1px solid #262626; border-radius: 8px; background: #111; color: #ccc; }
.brew-list li strong { color: var(--lime, #cfff04); }
/* TRANSLATION CARDS */
.brew-translate { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 14px; }
.brew-card { padding: 18px; border: 1px solid #262626; border-radius: 10px; background: #111; transition: border-color .2s ease, transform .2s ease; }
.brew-card:hover { border-color: var(--lime, #cfff04); transform: translateY(-2px); }
.brew-card p { margin: 0; color: #ddd; font-size: .9rem; }
.brew-card .brew-card-said { margin-bottom: 8px; color: #777; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.brew-card .brew-card-said::before { content: "SAID: "; color: #555; font-weight: 400; }
.brew-card .brew-card-meant { color: var(--lime, #cfff04); font-weight: 700; }
.brew-card .brew-card-meant::before { content: "MEANT: "; color: #888; font-weight: 400; font-size: .7rem; letter-spacing: .1em; }
/* QUOTES */
.brew-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.brew-quote { position: relative; margin: 0; padding: 22px 18px 16px; border: 1px solid #262626; border-radius: 10px; background: #111; }
.brew-quote::before { content: "\201C"; position: absolute; top: -16px; left: 14px; color: var(--lime, #cfff04); font: 900 3rem/1 NachoDisplay, Arial, Helvetica, sans-serif; }
.brew-quote p { margin: 0 0 10px; color: #ddd; font-size: .92rem; }
.brew-quote footer { color: var(--lime, #cfff04); font: 700 .68rem/1.3 Arial, Helvetica, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
/* ROLES */
.brew-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 14px; }
.brew-role { padding: 20px 18px; border: 1px solid #262626; border-radius: 10px; background: #111; transition: border-color .2s ease, transform .2s ease; }
.brew-role:hover { border-color: var(--lime, #cfff04); transform: translateY(-2px); }
.brew-role h3 { margin: 0 0 8px; color: var(--lime, #cfff04); font-size: .9rem; }
.brew-role p { margin: 0 0 8px; color: #bbb; font-size: .88rem; }
.brew-role small { color: #777; font-size: .74rem; }
/* FAQ */
.brew-faq { display: grid; gap: 10px; }
.brew-faq details { border: 1px solid #262626; border-radius: 8px; background: #111; }
.brew-faq summary { padding: 14px 16px; color: #fff; font: 700 .8rem/1.4 Arial, Helvetica, sans-serif; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.brew-faq summary::-webkit-details-marker { display: none; }
.brew-faq summary::after { content: "+"; color: var(--lime, #cfff04); font: 900 1.1rem/1 Arial, Helvetica, sans-serif; }
.brew-faq details[open] summary::after { content: "\2013"; }
.brew-faq details p { margin: 0; padding: 0 16px 14px; color: #bbb; font-size: .88rem; }
/* THE BREW TEST */
.brew-quiz { position: relative; border: 1px solid #2a2a2a; border-radius: 14px; background: linear-gradient(180deg, #131313 0%, #0e0e0e 100%); padding: 30px 28px; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 30px rgba(207, 255, 4, .05); transition: opacity .22s ease, transform .22s ease; }
.brew-question-category {color: var(--lime, #cfff04);font: 700 .62rem/1 Arial, Helvetica, sans-serif;letter-spacing: .18em;text-transform: uppercase;}
.brew-quiz::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--lime, #cfff04), rgba(207, 255, 4, .15)); }
.brew-quiz--leaving { opacity: 0; transform: translateX(-14px); }
.brew-quiz--entering { animation: brew-quiz-enter .22s ease both; }
@keyframes brew-quiz-enter { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
/* SYSTEM HEADER */
.brew-system-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #272727; }
.brew-system-title { color: #777; font: 700 .66rem/1 Arial, Helvetica, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.brew-system-status { display: inline-flex; align-items: center; gap: 6px; color: var(--lime, #cfff04); font: 700 .66rem/1 Arial, Helvetica, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.brew-system-status::before { content: "\25CF"; color: #7dff32; font-size: .72rem; text-shadow: 0 0 8px #7dff32; animation: brew-live-pulse 1.8s ease-in-out infinite; }
@keyframes brew-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.brew-quiz-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 8px; }
.brew-quiz-count { color: #999; font: 700 .72rem/1 Arial, Helvetica, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.brew-quiz-count strong { color: var(--lime, #cfff04); font-weight: 900; font-size: .92rem; }
.brew-quiz-tag { color: #666; font: 700 .66rem/1 Arial, Helvetica, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
/* SEGMENTED PROGRESS */
.brew-quiz-progress { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; height: 7px; margin-bottom: 26px; }
.brew-progress-segment { min-width: 0; border-radius: 2px; background: #252525; transition: background .25s ease, box-shadow .25s ease, transform .25s ease; }
.brew-progress-segment--complete { background: var(--lime, #cfff04); }
.brew-progress-segment--current { background: var(--lime, #cfff04); box-shadow: 0 0 12px rgba(207, 255, 4, .8); transform: scaleY(1.5); }
.brew-progress-segment--bonus { background: #654f00; }
.brew-progress-segment--bonus.brew-progress-segment--complete { background: #d8a900; }
/* CATEGORY AND QUESTION */
.brew-question-meta { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 0 0 8px; }
.brew-quiz-said { margin: 0 0 22px; color: #fff; font: 900 clamp(1.5rem, 3.4vw, 2.3rem)/1.15 NachoDisplay, Arial, Helvetica, sans-serif; letter-spacing: -.02em; }
/* OPTIONS */
.brew-options { display: grid; gap: 12px; }
.brew-option { position: relative; display: block; width: 100%; text-align: left; padding: 16px 50px 16px 18px; border: 1px solid #2c2c2c; border-left: 3px solid #2c2c2c; border-radius: 12px; background: #111; color: #ddd; font: 400 .95rem/1.45 Arial, Helvetica, sans-serif; cursor: pointer; overflow: hidden; transition: border-color .18s ease, border-left-color .18s ease, background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }
.brew-option::after { content: "\2192"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%) translateX(-6px); opacity: 0; color: var(--lime, #cfff04); font-size: 1.1rem; transition: opacity .18s ease, transform .18s ease; }
.brew-option:hover:not(:disabled) { border-color: var(--lime, #cfff04); border-left-color: var(--lime, #cfff04); background: #151515; color: #fff; transform: translateX(6px); box-shadow: 0 0 22px rgba(207, 255, 4, .14); }
.brew-option:hover:not(:disabled)::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.brew-option:active:not(:disabled) { transform: translateX(6px) scale(.99); }
.brew-option:disabled { cursor: default; opacity: .7; }
.brew-option__num { position: absolute; top: 12px; right: 16px; color: #3a3a3a; font: 700 .68rem/1 Arial, Helvetica, sans-serif; letter-spacing: .08em; }
.brew-option--selected { border-color: var(--lime, #cfff04); border-left-color: var(--lime, #cfff04); background: rgba(207, 255, 4, .08); color: #fff; }
.brew-option--correct { border-color: var(--lime, #cfff04); border-left-color: var(--lime, #cfff04); background: rgba(207, 255, 4, .12); color: var(--lime, #cfff04); }
.brew-option--correct::after { content: "\2713"; opacity: 1; transform: translateY(-50%) translateX(0); color: var(--lime, #cfff04); font-size: 1.3rem; font-weight: 900; }
.brew-option--wrong { border-color: #ff5a5a; border-left-color: #ff5a5a; background: rgba(255, 90, 90, .1); color: #ff8f8f; }
.brew-option--wrong::after { content: "\2717"; opacity: 1; transform: translateY(-50%) translateX(0); color: #ff5a5a; font-size: 1.2rem; font-weight: 900; }
/* HYBRID */
.brew-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; color: #555; font: 700 .66rem/1 Arial, Helvetica, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.brew-or::before, .brew-or::after { content: ""; flex: 1; height: 1px; background: #262626; }
.brew-open { width: 100%; min-height: 120px; padding: 15px 16px; border: 1px solid #2c2c2c; border-radius: 10px; background: #111; color: #fff; font: 400 .95rem/1.5 Arial, Helvetica, sans-serif; resize: vertical; }
.brew-open--hybrid { min-height: 84px; margin-top: 6px; border: 1px dashed var(--lime, #cfff04); background: rgba(207, 255, 4, .035); box-shadow: inset 0 0 18px rgba(207, 255, 4, .03); }
.brew-open--hybrid:focus { border-style: solid; }
.brew-open:focus { outline: none; border-color: var(--lime, #cfff04); box-shadow: 0 0 18px rgba(207, 255, 4, .12); }
.brew-open:disabled { opacity: .6; }
.brew-open-note { margin-top: 10px; color: #777; font-size: .78rem; }
.brew-quiz-nav { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
/* RESULT */
.brew-result { text-align: center; padding: 10px 0; }
.brew-result-head { margin: 0 0 18px; color: var(--lime, #cfff04); font: 900 clamp(1.6rem, 4vw, 2.4rem)/1.05 NachoDisplay, Arial, Helvetica, sans-serif; letter-spacing: -.04em; text-transform: uppercase; }
.brew-result-ring { position: relative; width: 150px; height: 150px; margin: 0 auto 16px; border-radius: 50%; background: conic-gradient(var(--lime, #cfff04) calc(var(--pct, 0) * 1%), #262626 0); display: grid; place-items: center; box-shadow: 0 0 30px rgba(207, 255, 4, .15); }
.brew-result-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #101010; }
.brew-result-score { position: relative; z-index: 1; margin: 0; color: #fff; font: 900 2.6rem/1 NachoDisplay, Arial, Helvetica, sans-serif; }
.brew-result-score small { display: block; margin-top: 2px; color: #777; font: 400 .72rem/1 Arial, Helvetica, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.brew-result-reason { display: block; width: min(100%, 480px); margin: 22px auto 0; padding: 14px 20px; border: 1px solid #2a2a2a; border-left: 3px solid var(--lime, #cfff04); border-radius: 10px; background: #0f0f0f; color: #ddd; font: 400 .92rem/1.55 Arial, Helvetica, sans-serif; text-align: center; box-sizing: border-box; }
.brew-result-reason::before { content: "THE VERDICT"; display: block; margin-bottom: 5px; color: var(--lime, #cfff04); font: 700 .62rem/1 Arial, Helvetica, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.brew-result-actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
/* LOCKED / UNLOCKED */
.brew-locked { border: 1px dashed #444; border-radius: 12px; padding: 36px 24px; text-align: center; background: #0f0f0f; }
.brew-lock-icon { margin: 0 0 8px; font-size: 2.4rem; }
.brew-locked h3 { margin: 0 0 10px; color: var(--lime, #cfff04); font: 900 clamp(1.2rem, 3vw, 1.7rem)/1.1 NachoDisplay, Arial, Helvetica, sans-serif; letter-spacing: -.02em; text-transform: uppercase; }
.brew-locked p { margin: 0 0 18px; color: #999; font-size: .9rem; }
.brew-unlock-banner { margin-bottom: 18px; padding: 12px 16px; border: 1px solid var(--lime, #cfff04); border-radius: 8px; background: rgba(207, 255, 4, .08); color: var(--lime, #cfff04); font: 700 .78rem/1.4 Arial, Helvetica, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.brew-steps { display: grid; gap: 10px; margin-top: 24px; }
.brew-steps h3 { margin: 0; }
.brew-step { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid #262626; border-radius: 8px; background: #0d0d0d; color: #bbb; font-size: .88rem; }
.brew-step strong { color: var(--lime, #cfff04); }
/* FORM & MISC */
.brew-form { display: grid; gap: 14px; margin-top: 20px; }
.brew-form label { display: grid; gap: 5px; color: #fff; font: 700 .72rem/1.3 Arial, Helvetica, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.brew-form input, .brew-form textarea { width: 100%; padding: 11px 13px; border: 1px solid #333; border-radius: 6px; background: #101010; color: #fff; font: 400 .9rem/1.4 Arial, Helvetica, sans-serif; }
.brew-form input:focus, .brew-form textarea:focus { outline: none; border-color: var(--lime, #cfff04); }
.brew-form input::placeholder, .brew-form textarea::placeholder { color: #666; font-size: .85rem; text-transform: none; letter-spacing: 0; }
.brew-submit { justify-self: start; padding: 13px 24px; border: 1px solid var(--lime, #cfff04); border-radius: 6px; background: var(--lime, #cfff04); color: #000; font: 700 .8rem/1 Arial, Helvetica, sans-serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; }
.brew-submit:hover:not(:disabled), .brew-submit:focus-visible:not(:disabled) { background: var(--white, #fff); transform: translateY(-2px); }
.brew-submit:disabled { background: #2a2a2a; border-color: #3a3a3a; color: #777; cursor: not-allowed; }
.brew-small { color: #888; font-size: .78rem; }
.brew-small a { color: var(--lime, #cfff04); }
.brew-note { margin-top: 10px; color: #888; font-size: .8rem; }
.brew-ps { padding: 12px 16px; border: 1px solid #262626; border-radius: 8px; background: #111; color: #888; font-size: .8rem; }
.brew-ps a { color: var(--lime, #cfff04); }
/* =========================================================
   16. BREWARCHY
   ========================================================= */
.brewarchy-page {
    background: #0d0d0d;
    color: #ccc;
    font: 400 .95rem/1.7 Arial, Helvetica, sans-serif;
}
.brewarchy-container {
    width: min(100% - 48px, 980px);
    margin: 0 auto;
}
/* HERO */
.brewarchy-hero {
    position: relative;
    overflow: hidden;
    padding: 112px 0 86px;
    border-bottom: 0px solid #252525;
    background:
        linear-gradient(135deg, rgba(207, 255, 4, .08), transparent 44%),
        #0d0d0d;
}
.brewarchy-hero::after {
    content: "BREW";
    position: absolute;
    right: -30px;
    bottom: -80px;
    color: rgba(255, 255, 255, .025);
    font: 900 18rem/.8 Arial Black, Arial, sans-serif;
    letter-spacing: -.12em;
    pointer-events: none;
}
.brewarchy-kicker,
.brewarchy-index {
    margin: 0 0 14px;
    color: var(--lime, #cfff04);
    font: 700 .68rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.brewarchy-hero h1 {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 0 24px;
    color: #fff;
    font: 900 clamp(3.2rem, 10vw, 7.8rem)/.82 NachoDisplay, Arial, Helvetica, sans-serif;
    letter-spacing: -.08em;
    text-transform: uppercase;
}
.brewarchy-hero h1 span {
    color: var(--lime, #cfff04);
}
.brewarchy-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 650px;
    margin: 0 0 38px;
    color: #bbb;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
}
.brewarchy-hero-rule {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.brewarchy-hero-rule span {
    padding: 9px 12px;
    border: 1px solid #353535;
    border-radius: 4px;
    color: #888;
    font: 700 .63rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
}
/* INTRO */
.brewarchy-intro {
    padding: 74px 0;
    border-bottom: 0px solid #202020;
    background: #111;
}
.brewarchy-intro-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 80px;
}
.brewarchy-intro h2,
.brewarchy-section-heading h2,
.brewarchy-destination h2,
.brewarchy-test-card h2,
.brewarchy-pillars h2 {
    margin: 0 0 20px;
    color: #fff;
    font: 900 clamp(2rem, 5vw, 3.7rem)/.95 NachoDisplay, Arial, Helvetica, sans-serif;
    letter-spacing: -.06em;
}
.brewarchy-intro-grid > div:last-child {
    padding-top: 34px;
}
.brewarchy-intro p {
    margin: 0 0 18px;
    color: #aaa;
    font-size: 1rem;
}
.brewarchy-intro .brewarchy-emphasis {
    color: var(--lime, #cfff04);
    font-weight: 700;
}
/* STATEMENT */
.brewarchy-statement {
    padding: 72px 0;
    background: var(--lime, #cfff04);
    color: #000;
}
.brewarchy-statement-card {
    position: relative;
    padding: 44px 48px;
    border: 2px solid #000;
    background: #cfff04;
}
.brewarchy-statement-card::before {
    content: "01";
    position: absolute;
    top: 20px;
    right: 26px;
    color: rgba(0, 0, 0, .25);
    font: 900 3rem/.8 Arial Black, Arial, sans-serif;
}
.brewarchy-statement-label {
    margin: 0 0 24px;
    font: 700 .68rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.brewarchy-statement-card h2 {
    max-width: 760px;
    margin: 0 0 8px;
    font: 900 clamp(2.2rem, 6vw, 5rem)/.9 NachoDisplay, Arial, Helvetica, sans-serif;
    letter-spacing: -.07em;
}
.brewarchy-statement-card p:last-child {
    margin: 0;
    font: 900 clamp(1.4rem, 3vw, 2.4rem)/1 NachoDisplay, Arial, Helvetica, sans-serif;
}
/* GENERAL SECTIONS */
.brewarchy-section {
    padding: 82px 0;
    border-bottom: 0px solid #202020;
}
.brewarchy-section-heading {
    max-width: 720px;
    margin-bottom: 38px;
}
.brewarchy-section-heading > p:last-child {
    max-width: 640px;
    margin: 0;
    color: #999;
    font-size: 1rem;
}
/* THEATRE CARDS */
.brewarchy-theatre-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.brewarchy-theatre-card {
    position: relative;
    min-height: 240px;
    padding: 28px 24px;
    border: 1px solid #303030;
    border-top: 3px solid #3b3b3b;
    background: #111;
}
.brewarchy-theatre-card:nth-child(2) {
    transform: translateY(20px);
    border-top-color: var(--lime, #cfff04);
}
.brewarchy-theatre-card:nth-child(3) {
    transform: translateY(40px);
}
.brewarchy-card-number {
    display: block;
    margin-bottom: 34px;
    color: #555;
    font: 900 2rem/.8 NachoDisplay, Arial, Helvetica, sans-serif;
}
.brewarchy-theatre-card h3 {
    margin: 0 0 12px;
    color: var(--lime, #cfff04);
    font: 700 .72rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.brewarchy-theatre-card p {
    margin: 0 0 20px;
    color: #bbb;
    font-size: .95rem;
}
.brewarchy-theatre-card strong {
    color: #fff;
    font: 900 1.1rem/1.1 NachoDisplay, Arial, Helvetica, sans-serif;
}
/* DELIVERABLES */
.brewarchy-destination {
    padding: 90px 0;
    border-bottom: 0px solid #202020;
    background:
        linear-gradient(90deg, #111 0 50%, #cfff04 50% 100%);
}
.brewarchy-destination-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 470px;
}
.brewarchy-destination-side {
    padding: 54px 64px 54px 0;
}
.brewarchy-destination-side h2 {
    color: #fff;
}
.brewarchy-destination-side p:not(.brewarchy-index) {
    margin: 0 0 12px;
    color: #aaa;
    font-size: 1.05rem;
}
.brewarchy-vertical-line {
    width: 3px;
    height: 70px;
    margin: 26px 0;
    background: var(--lime, #cfff04);
}
.brewarchy-destination-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 54px 0 54px 64px;
    color: #000;
}
.brewarchy-destination-label {
    margin: 0 0 20px;
    font: 900 .72rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: .18em;
}
.brewarchy-destination-copy {
    max-width: 420px;
    margin: 0 0 40px;
    font: 900 clamp(1.8rem, 4vw, 3.3rem)/.95 NachoDisplay, Arial, Helvetica, sans-serif;
    letter-spacing: -.05em;
}
.brewarchy-destination-line {
    display: flex;
    gap: 0;
    max-width: 430px;
    border-top: 2px solid #000;
}
.brewarchy-destination-line span {
    flex: 1;
    padding: 13px 0 0;
    font: 700 .65rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: .12em;
}
/* PRINCIPLES */
.brewarchy-principles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.brewarchy-principle {
    position: relative;
    padding: 28px 28px 30px;
    border: 1px solid #2d2d2d;
    background: #111;
    transition: border-color .2s ease, transform .2s ease;
}
.brewarchy-principle:hover {
    border-color: var(--lime, #cfff04);
    transform: translateY(-4px);
}
.brewarchy-principle:nth-child(3),
.brewarchy-principle:nth-child(6) {
    border-top: 3px solid var(--lime, #cfff04);
}
.brewarchy-principle span {
    display: block;
    margin-bottom: 24px;
    color: #555;
    font: 900 1.8rem/.8 NachoDisplay, Arial, Helvetica, sans-serif;
}
.brewarchy-principle h3 {
    margin: 0 0 12px;
    color: #fff;
    font: 900 1.25rem/1 NachoDisplay, Arial, Helvetica, sans-serif;
}
.brewarchy-principle p {
    margin: 0;
    color: #999;
    font-size: .9rem;
}
/* ACCORDION */
.brewarchy-accordion-section {
    padding: 82px 0;
    background: #111;
}
.brewarchy-accordions {
    max-width: 820px;
    border-top: 1px solid #353535;
}
.brewarchy-accordions details {
    border-bottom: 1px solid #353535;
}
.brewarchy-accordions summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 23px 0;
    color: #fff;
    font: 900 clamp(1.1rem, 2vw, 1.45rem)/1 NachoDisplay, Arial, Helvetica, sans-serif;
    cursor: pointer;
    list-style: none;
}
.brewarchy-accordions summary::-webkit-details-marker {
    display: none;
}
.brewarchy-accordions summary b {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid #555;
    border-radius: 50%;
    color: var(--lime, #cfff04);
    font: 400 1.3rem/1 Arial, Helvetica, sans-serif;
}
.brewarchy-accordions details[open] summary b {
    background: var(--lime, #cfff04);
    color: #000;
    border-color: var(--lime, #cfff04);
}
.brewarchy-accordion-content {
    max-width: 700px;
    padding: 0 48px 24px 0;
}
.brewarchy-accordion-content p {
    margin: 0;
    color: #aaa;
    font-size: .98rem;
}
/* TEST CARD */
.brewarchy-test-section {
    padding: 82px 0;
    background: #cfff04;
}
.brewarchy-test-card {
    padding: 44px 48px;
    border: 2px solid #000;
    background: #cfff04;
    color: #000;
}
.brewarchy-test-card .brewarchy-index {
    color: #000;
}
.brewarchy-test-card h2 {
    max-width: 700px;
    color: #000;
}
.brewarchy-test-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 42px;
    margin: 36px 0;
    border-top: 1px solid rgba(0, 0, 0, .35);
}
.brewarchy-test-list p {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .35);
    font-size: .92rem;
}
.brewarchy-test-list span {
    color: #555;
    font: 700 .7rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: .1em;
}
.brewarchy-test-final {
    margin: 0;
    font: 900 clamp(1.3rem, 3vw, 2rem)/1 NachoDisplay, Arial, Helvetica, sans-serif;
}
/* PILLARS */
.brewarchy-pillars {
    padding: 82px 0;
    border-bottom: 0px solid #202020;
}
.brewarchy-pillar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.brewarchy-pillar {
    min-height: 290px;
    padding: 24px 20px;
    border: 1px solid #303030;
    background: #111;
    color: #fff;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.brewarchy-pillar:hover {
    transform: translateY(-5px);
    background: var(--lime, #cfff04);
    color: #000;
}
.brewarchy-pillar span {
    display: block;
    margin-bottom: 34px;
    color: #666;
    font: 900 1.5rem/.8 NachoDisplay, Arial, Helvetica, sans-serif;
}
.brewarchy-pillar h3 {
    margin: 0 0 14px;
    font: 900 1.8rem/.9 NachoDisplay, Arial, Helvetica, sans-serif;
    letter-spacing: -.04em;
    text-transform: uppercase;
}
.brewarchy-pillar p {
    margin: 0 0 24px;
    color: #999;
    font-size: .86rem;
}
.brewarchy-pillar:hover p {
    color: #222;
}
.brewarchy-pillar strong {
    color: var(--lime, #cfff04);
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.brewarchy-pillar:hover strong {
    color: #000;
}
/* CLOSING */
.brewarchy-closing {
    padding: 100px 0;
    background: #000;
    text-align: center;
}
.brewarchy-closing h2,
.brewarchy-closing h3 {
    margin: 0;
    color: #fff;
    font: 900 clamp(2.3rem, 6vw, 5rem)/.9 NachoDisplay, Arial, Helvetica, sans-serif;
    letter-spacing: -.07em;
}
.brewarchy-closing h3 {
    color: var(--lime, #cfff04);
}
.brewarchy-closing-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 42px;
}
.brewarchy-primary-button,
.brewarchy-secondary-button {
    display: inline-block;
    padding: 14px 22px;
    border: 1px solid var(--lime, #cfff04);
    border-radius: 6px;
    font: 700 .72rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.brewarchy-primary-button {
    background: var(--lime, #cfff04);
    color: #000;
}
.brewarchy-secondary-button {
    border-color: #444;
    color: #ddd;
}
.brewarchy-primary-button:hover,
.brewarchy-primary-button:focus-visible {
    background: #fff;
    transform: translateY(-2px);
}
.brewarchy-secondary-button:hover,
.brewarchy-secondary-button:focus-visible {
    border-color: var(--lime, #cfff04);
    color: var(--lime, #cfff04);
    transform: translateY(-2px);
}
/* =========================================================
   17. TEA BREAK ANIMATION
   ========================================================= */
.tea-break-section {
    min-height: 560px;
    overflow: hidden;
}
.tea-break {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(320px, 1fr);
    align-items: center;
    min-height: 560px;
    max-width: 980px;
    margin-left: auto;
}
.tea-break__copy {
    position: relative;
    z-index: 2;
    padding: 3rem 0 3rem 2rem;
}
.tea-break__copy h2 {
    max-width: 300px;
    margin: 1rem 0 0.25rem;
    font-size: clamp(2.4rem, 5vw, 5rem);
    line-height: 0.95;
}
.tea-break__copy > p:not(.tea-break__finish) {
    margin: 0;
    color: #4f5961;
    font-size: 1.25rem;
    font-weight: 700;
}
.tea-break__finish {
    max-width: 230px;
    margin: 2rem 0 0;
    color: #000;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.25;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 700ms ease, transform 700ms ease;
}
.tea-break.is-complete .tea-break__finish {
    opacity: 1;
    transform: translateY(0);
}
.tea-break__replay {
    display: block;
    margin-top: 1.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #4f5961;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    opacity: 0;
    pointer-events: none;
    transition: color 200ms ease, opacity 500ms ease;
}
.tea-break.is-complete .tea-break__replay {
    opacity: 1;
    pointer-events: auto;
}
.tea-break__replay:hover,
.tea-break__replay:focus-visible {
    color: #000;
}
.tea-break__visual {
    position: relative;
    width: min(100%, 520px);
    justify-self: end;
}
.tea-cup-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.tea-cup-svg__halo {
    fill: #f7f7f3;
}
.tea-cup-svg__stream {
    fill: none;
    stroke: #9b5b32;
    stroke-width: 11;
    stroke-linecap: round;
    stroke-dasharray: 250;
    stroke-dashoffset: 250;
}
.tea-break.is-pouring .tea-cup-svg__stream {
    animation: tea-pour 3.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.tea-cup-svg__liquid {
    fill: #9b5b32;
    transform: translateY(190px);
}
.tea-break.is-pouring .tea-cup-svg__liquid {
    animation: tea-fill 3.4s cubic-bezier(0.4, 0, 0.2, 1) 0.35s forwards;
}
.tea-cup-svg__surface {
    fill: #b97445;
    opacity: 0;
}
.tea-break.is-pouring .tea-cup-svg__surface {
    animation: tea-surface 500ms ease 3.25s forwards;
}
.tea-cup-svg__ripple {
    fill: none;
    stroke: #dca77c;
    stroke-width: 3;
    opacity: 0;
    transform-origin: 260px 330px;
}
.tea-break.is-pouring .tea-cup-svg__ripple {
    animation: tea-ripple 900ms ease-out 3.1s forwards;
}
.tea-cup-svg__cup {
    fill: #f7f7f3;
    stroke: #000;
    stroke-width: 5;
}
.tea-cup-svg__rim {
    fill: #f7f7f3;
    stroke: #000;
    stroke-width: 5;
}
.tea-cup-svg__handle,
.tea-cup-svg__handle-inner {
    fill: none;
    stroke: #000;
    stroke-width: 5;
    stroke-linecap: round;
}
.tea-cup-svg__handle-inner {
    stroke-width: 4;
}
.tea-cup-svg__saucer {
    fill: #e7e7e2;
    stroke: #000;
    stroke-width: 5;
}
.tea-cup-svg__saucer-line {
    fill: none;
    stroke: #000;
    stroke-width: 3;
    opacity: 0.35;
}
.tea-cup-svg__accent {
    fill: #cfff04;
}
.tea-cup-svg__accent--small {
    opacity: 0.7;
}
.tea-cup-svg__steam {
    opacity: 0;
}
.tea-break.is-complete .tea-cup-svg__steam {
    opacity: 1;
    transition: opacity 900ms ease;
}
.tea-steam {
    fill: none;
    stroke: #4f5961;
    stroke-width: 5;
    stroke-linecap: round;
    opacity: 0;
}
.tea-break.is-complete .tea-steam {
    animation: tea-steam-rise 3.8s ease-in-out infinite;
}
.tea-break.is-complete .tea-steam--two {
    animation-delay: 1.15s;
}
.tea-break.is-complete .tea-steam--three {
    animation-delay: 2.25s;
}
@keyframes tea-pour {
    0% {
        stroke-dashoffset: 250;
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    92% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}
@keyframes tea-fill {
    0% {
        transform: translateY(190px);
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes tea-surface {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes tea-ripple {
    0% {
        opacity: 0.9;
        transform: scaleX(0.35);
    }
    100% {
        opacity: 0;
        transform: scaleX(1.35);
    }
}
@keyframes tea-steam-rise {
    0% {
        opacity: 0;
        transform: translateY(18px) scaleX(0.85);
    }
    25% {
        opacity: 0.45;
    }
    55% {
        opacity: 0.2;
        transform: translateY(-12px) scaleX(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-52px) scaleX(0.8);
    }
}
/* =========================================================
   18. PRINT AND SHARE OVERLAYS
   ========================================================= */
.print-header {
    display: none;
}
.share-chooser-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
}
.share-chooser {
    position: relative;
    width: min(100%, 480px);
    padding: 30px;
    border: 1px solid var(--lime, #cfff04);
    border-radius: 12px;
    background: #101010;
    color: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75), 0 0 28px rgba(207, 255, 4, 0.16);
}
.share-chooser-close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #555;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}
.share-chooser-close:hover,
.share-chooser-close:focus-visible {
    border-color: var(--lime, #cfff04);
    color: var(--lime, #cfff04);
}
.share-chooser .eyebrow {
    margin: 0 0 6px;
    color: var(--lime, #cfff04);
    font: 700 0.72rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.share-chooser h2 {
    margin: 0 0 8px;
    color: #fff;
    font: 900 clamp(1.4rem, 2.5vw, 1.9rem)/1 NachoDisplay, Arial, Helvetica, sans-serif;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}
.share-term-title {
    margin: 0 0 20px;
    color: #bbb;
    font: 400 0.92rem/1.4 Arial, Helvetica, sans-serif;
}
.share-options {
    display: grid;
    gap: 10px;
}
.share-options button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 18px;
    border: 1px solid #333;
    border-radius: 8px;
    background: #181818;
    color: #fff;
    font: 700 0.78rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.share-options button:hover,
.share-options button:focus-visible {
    border-color: var(--lime, #cfff04);
    background: #202020;
    color: var(--lime, #cfff04);
    transform: translateY(-1px);
}


/* =========================================================
   16. PRINT-ONLY ELEMENTS — HIDDEN ON SCREEN
   ========================================================= */
.print-meta,
.print-footer {
    display: none !important;
}

/* =========================================================
   17. PRINT — LORE RECEIPT
   ========================================================= */
@media print {
    @page {
        margin: 1.1cm;
    }

    html,
    body {
        background: #ffffff !important;
        color: #000000 !important;
        overflow: visible !important;
    }

    body * {
        visibility: hidden !important;
    }

    /* =========================================================
       18. PRINT — TARGET ISOLATION
       ========================================================= */
    body *:not(.term-item.print-target):not(.term-item.print-target *):not(:has(.term-item.print-target)) {
        display: none !important;
    }

    *:has(.term-item.print-target) {
        min-height: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .term-item.print-target,
    .term-item.print-target * {
        visibility: visible !important;
    }

    .term-item.print-target {
        position: relative !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 0 20px 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        color: #000000 !important;
        box-shadow: none !important;
        font-family: Georgia, "Times New Roman", serif !important;
    }

    /* =========================================================
       19. PRINT — PUBLICATION MASTHEAD
       ========================================================= */
    .term-item.print-target .print-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 20px !important;
        width: 100% !important;
        min-height: 48px !important;
        margin: 0 0 7px 0 !important;
        padding: 0 0 9px 0 !important;
        border-bottom: 3px solid #000000 !important;
        background: #ffffff !important;
    }

    .term-item.print-target .print-logo {
        display: block !important;
        visibility: visible !important;
        flex: 0 0 auto !important;
        width: auto !important;
        height: 48px !important;
        max-width: 150px !important;
        max-height: 48px !important;
        object-fit: contain !important;
        object-position: left center !important;
        content: none !important;
    }

    .term-item.print-target .print-headline {
        display: block !important;
        visibility: visible !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
        font: 900 0.62rem/1.3 Arial, Helvetica, sans-serif !important;
        letter-spacing: 0.13em !important;
        text-transform: uppercase !important;
        color: #000000 !important;
        text-align: right !important;
    }

    /* =========================================================
       20. PRINT — DOSSIER METADATA
       ========================================================= */
    .term-item.print-target .print-meta {
        display: flex !important;
        align-items: baseline !important;
        justify-content: space-between !important;
        gap: 16px !important;
        width: 100% !important;
        margin: 0 0 6px 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    .term-item.print-target .print-eyebrow {
        display: block !important;
        margin: 0 !important;
        font: 800 0.5rem/1 Arial, Helvetica, sans-serif !important;
        letter-spacing: 0.2em !important;
        text-transform: uppercase !important;
        color: #777777 !important;
    }

    .term-item.print-target .print-category {
        display: block !important;
        margin: 0 !important;
        font: 800 0.5rem/1 Arial, Helvetica, sans-serif !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        color: #777777 !important;
        text-align: right !important;
    }

    /* =========================================================
       21. PRINT — TERM TITLE AND TAGS
       ========================================================= */
    .term-item.print-target .term-toggle {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 8px 0 !important;
        border: none !important;
        border-bottom: 1px solid #000000 !important;
        background: #ffffff !important;
        color: #000000 !important;
        text-align: left !important;
    }

    .term-item.print-target .term-toggle h3 {
        margin: 0 !important;
        font: 900 1.9rem/1 Georgia, "Times New Roman", serif !important;
        letter-spacing: -0.025em !important;
        color: #000000 !important;
    }

    .term-item.print-target .term-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        margin: 6px 0 0 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .term-item.print-target .term-tags li {
        display: inline-block !important;
        margin: 0 !important;
        padding: 3px 6px !important;
        border: 1px solid #bbbbbb !important;
        border-radius: 3px !important;
        font: 700 0.58rem/1 Arial, Helvetica, sans-serif !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        color: #555555 !important;
        background: #ffffff !important;
    }

    /* =========================================================
       22. PRINT — CONTENT VISIBILITY
       ========================================================= */
    .term-item.print-target .term-answer {
        display: block !important;
        margin: 0 !important;
        padding: 8px 0 0 0 !important;
    }

    .term-item.print-target .standard-term-view {
        display: none !important;
    }

    .term-item.print-target .print-dossier-content {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        counter-reset: print-lore !important;
    }

    .term-item.print-target .term-actions,
    .term-item.print-target .related-terms,
    .term-item.print-target .term-arrow {
        display: none !important;
    }

    .term-item.print-target h3,
    .term-item.print-target h4,
    .term-item.print-target p,
    .term-item.print-target li,
    .term-item.print-target span,
    .term-item.print-target div {
        color: #000000 !important;
        background: transparent !important;
    }

    /* =========================================================
       23. PRINT — NUMBERED LORE SECTIONS
       ========================================================= */
    .term-item.print-target .print-dossier-content > .lore-block {
        position: relative !important;
        counter-increment: print-lore !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        margin: 0 !important;
        padding: 8px 0 8px 38px !important;
        border-bottom: 1px dotted #cccccc !important;
    }

    .term-item.print-target .print-dossier-content > .lore-block:last-child {
        border-bottom: none !important;
    }

    .term-item.print-target .print-dossier-content > .lore-block h4 {
        position: relative !important;
        margin: 0 0 4px 0 !important;
        font: 900 0.7rem/1.2 Arial, Helvetica, sans-serif !important;
        letter-spacing: 0.07em !important;
        text-transform: uppercase !important;
        color: #000000 !important;
    }

    .term-item.print-target .print-dossier-content > .lore-block h4::before {
        content: counter(print-lore, decimal-leading-zero) !important;
        position: absolute !important;
        top: 0 !important;
        left: -38px !important;
        font: 900 0.82rem/1 Georgia, "Times New Roman", serif !important;
        color: #777777 !important;
    }

    .term-item.print-target .print-dossier-content > .lore-block h4::after {
        content: "" !important;
        display: inline-block !important;
        width: 20px !important;
        height: 1px !important;
        margin: 0 0 3px 8px !important;
        background: #000000 !important;
    }

    /* =========================================================
       24. PRINT — ACTUAL TEA FEATURE BLOCK
       ========================================================= */
    .term-item.print-target .print-dossier-content > .lore-block:first-child {
        margin-bottom: 2px !important;
        padding-top: 11px !important;
        padding-bottom: 11px !important;
        border-top: 2px solid #000000 !important;
        border-bottom: 1px solid #000000 !important;
    }

    .term-item.print-target .print-dossier-content > .lore-block:first-child h4 {
        font-size: 0.76rem !important;
        letter-spacing: 0.08em !important;
    }

    .term-item.print-target .print-dossier-content > .lore-block:first-child p {
        font-size: 0.87rem !important;
        line-height: 1.4 !important;
    }

    /* =========================================================
       25. PRINT — SECTION COPY
       ========================================================= */
    .term-item.print-target .print-dossier-content > .lore-block p {
        margin: 0 !important;
        font: 400 0.76rem/1.34 Georgia, "Times New Roman", serif !important;
        color: #000000 !important;
    }

    /* =========================================================
       26. PRINT — FRAMEWORK LOADOUT TAGS
       ========================================================= */
    .term-item.print-target .print-dossier-content > .lore-block ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        margin: 5px 0 0 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .term-item.print-target .print-dossier-content > .lore-block li {
        display: inline-block !important;
        box-sizing: border-box !important;
        min-height: 16px !important;
        margin: 0 !important;
        padding: 3px 7px 2px 7px !important;
        border: 1px solid #000000 !important;
        border-radius: 3px !important;
        font: 700 0.56rem/1 Arial, Helvetica, sans-serif !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        color: #000000 !important;
        background: #ffffff !important;
    }

    /* =========================================================
       27. PRINT — QUIET FOOTER
       ========================================================= */
    .term-item.print-target .print-footer {
        position: fixed !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding-top: 5px !important;
        border-top: 1px solid #dddddd !important;
        font: 400 0.5rem/1.2 Arial, Helvetica, sans-serif !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        color: #888888 !important;
    }

    /* Prevent nested lore blocks from creating extra numbers */
    .term-item.print-target .print-dossier-content .lore-block .lore-block {
        counter-increment: none !important;
        padding-left: 0 !important;
        border-bottom: none !important;
    }

    .term-item.print-target .print-dossier-content .lore-block .lore-block h4::before,
    .term-item.print-target .print-dossier-content .lore-block .lore-block h4::after {
        content: none !important;
    }
}

/* =========================================================
   28. RECEIPTS MODAL — COMPACT THREE-COLUMN DOSSIER
   ========================================================= */
.receipts-modal-backdrop {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    padding: 24px !important;
    overflow: hidden !important;
}

.receipts-takeover-card {
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    width: min(980px, 100%) !important;
    max-width: 980px !important;
    max-height: calc(100vh - 48px) !important;
    margin: 0 auto !important;
    overflow: hidden !important;
}

.receipts-takeover-card .takeover-header {
    flex: 0 0 auto !important;
}

.receipts-takeover-card .takeover-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 16px 20px !important;
}

/* =========================================================
   29. RECEIPTS MODAL — COMPARISON PANELS
   ========================================================= */
.receipts-takeover-card .takeover-comparison-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 0 0 14px 0 !important;
}

.receipts-takeover-card .comparison-column {
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 15px 16px !important;
}

.receipts-takeover-card .comparison-column p {
    margin: 8px 0 0 0 !important;
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
}

/* Keep the three content types visually distinct */
.receipts-takeover-card .raw-tea-col {
    border-left: 3px solid var(--accent, #c8ff00) !important;
}

.receipts-takeover-card .tldr-col {
    border-left: 3px solid #777777 !important;
}

.receipts-takeover-card .boardroom-col {
    border-left: 3px solid #aaaaaa !important;
}

/* =========================================================
   30. RECEIPTS MODAL — CATEGORY LORE
   ========================================================= */
.receipts-takeover-card .category-panel {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 14px 0 !important;
    padding: 14px 16px !important;
}

.receipts-takeover-card .category-lore-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 8px 0 7px 0 !important;
}

.receipts-takeover-card .category-lore-copy {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.receipts-takeover-card .category-lore-copy p {
    margin: 0 !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
}

/* =========================================================
   31. RECEIPTS MODAL — WHY THIS MATTERS AND IN THE WILD
   ========================================================= */
.receipts-takeover-card .dossier-intel-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 0 0 14px 0 !important;
}

.receipts-takeover-card .dossier-card {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px 16px !important;
}

.receipts-takeover-card .dossier-card p {
    margin: 8px 0 0 0 !important;
    font-size: 0.82rem !important;
    line-height: 1.42 !important;
}

/* =========================================================
   32. RECEIPTS MODAL — FRAMEWORK LOADOUT
   ========================================================= */
.receipts-takeover-card .framework-panel {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 14px 16px !important;
}

.receipts-takeover-card .receipts-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 9px 0 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.receipts-takeover-card .receipts-list li {
    margin: 0 !important;
    padding: 5px 9px !important;
    font-size: 0.74rem !important;
    line-height: 1.15 !important;
}

/* =========================================================
   33. RECEIPTS MODAL — ACTION BAR
   ========================================================= */
.receipts-takeover-card .takeover-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 9px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: inherit !important;
}

.receipts-takeover-card .takeover-actions .term-action {
    margin: 0 !important;
    white-space: nowrap !important;
}

/* =========================================================
   34. RECEIPTS MODAL — SMALLER SCREENS
   ========================================================= */
@media (max-width: 800px) {
    .receipts-modal-backdrop {
        align-items: flex-start !important;
        padding: 14px !important;
        overflow: hidden !important;
    }

    .receipts-takeover-card {
        max-height: calc(100vh - 28px) !important;
    }

    .receipts-takeover-card .takeover-comparison-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .receipts-takeover-card .category-lore-copy {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .receipts-takeover-card .dossier-intel-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .receipts-takeover-card .takeover-body {
        padding: 12px 14px !important;
    }

    .receipts-takeover-card .takeover-actions {
        padding: 10px 14px !important;
    }
}

/* =========================================================
   28. RECEIPTS MODAL — ORIGINAL COMPACT DOSSIER ORDER
   ========================================================= */

.receipts-modal-backdrop {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    padding: 20px !important;
    overflow: hidden !important;
}

.receipts-takeover-card {
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    width: min(1040px, 100%) !important;
    max-width: 1040px !important;
    max-height: calc(100vh - 40px) !important;
    margin: 0 auto !important;
    overflow: hidden !important;
}

.receipts-takeover-card .takeover-header {
    flex: 0 0 auto !important;
}

.receipts-takeover-card .takeover-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas:
        "comparison comparison"
        "why why"
        "category framework"
        "wild wild" !important;
    align-items: stretch !important;
    gap: 14px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 220px) !important;
    padding: 16px 28px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* =========================================================
   29. RECEIPTS MODAL — ACTUAL TEA AND BUSINESS
   ========================================================= */

.receipts-takeover-card .takeover-comparison-grid {
    display: grid !important;
    grid-area: comparison !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 0 !important;
}

.receipts-takeover-card .comparison-column {
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 16px 18px !important;
}

.receipts-takeover-card .comparison-column p {
    margin: 8px 0 0 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.42 !important;
}

.receipts-takeover-card .raw-tea-col {
    border-left: 3px solid var(--accent, #c8ff00) !important;
}

.receipts-takeover-card .boardroom-col {
    border-left: 3px solid #888888 !important;
}

/* Hide TLDR only in the receipts modal.
   TLDR remains available in the glossary card and print dossier. */
.receipts-takeover-card .tldr-col {
    display: none !important;
}

/* =========================================================
   30. RECEIPTS MODAL — WHY THIS MATTERS
   ========================================================= */

.receipts-takeover-card .dossier-intel-grid {
    display: contents !important;
}

.receipts-takeover-card .dossier-intel-grid .dossier-card:first-child {
    display: block !important;
    grid-area: why !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px 18px !important;
}

.receipts-takeover-card .dossier-intel-grid .dossier-card:first-child p {
    margin: 8px 0 0 0 !important;
    font-size: 0.82rem !important;
    line-height: 1.42 !important;
}

/* =========================================================
   31. RECEIPTS MODAL — CATEGORY LORE
   ========================================================= */

.receipts-takeover-card .category-panel {
    display: block !important;
    grid-area: category !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px 18px !important;
}

.receipts-takeover-card .category-lore-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 8px 0 7px 0 !important;
}

.receipts-takeover-card .category-lore-copy {
    display: block !important;
}

.receipts-takeover-card .category-lore-copy p {
    margin: 5px 0 0 0 !important;
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
}

/* =========================================================
   32. RECEIPTS MODAL — FRAMEWORK LOADOUT
   ========================================================= */

.receipts-takeover-card .framework-panel {
    display: block !important;
    grid-area: framework !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px 18px !important;
}

.receipts-takeover-card .receipts-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 10px 0 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.receipts-takeover-card .receipts-list li {
    margin: 0 !important;
    padding: 5px 8px !important;
    font-size: 0.7rem !important;
    line-height: 1.15 !important;
}

/* =========================================================
   33. RECEIPTS MODAL — IN THE WILD
   ========================================================= */

.receipts-takeover-card .dossier-intel-grid .dossier-card:nth-child(2) {
    display: block !important;
    grid-area: wild !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px 18px !important;
}

.receipts-takeover-card .dossier-intel-grid .dossier-card:nth-child(2) p {
    margin: 8px 0 0 0 !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
}

/* =========================================================
   34. RECEIPTS MODAL — ACTION BAR
   ========================================================= */

.receipts-takeover-card .takeover-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 9px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 28px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.receipts-takeover-card .takeover-actions .term-action {
    margin: 0 !important;
    white-space: nowrap !important;
}

/* =========================================================
   35. RECEIPTS MODAL — SMALL SCREENS
   ========================================================= */

@media (max-width: 800px) {
    .receipts-modal-backdrop {
        align-items: flex-start !important;
        padding: 14px !important;
    }

    .receipts-takeover-card {
        max-height: calc(100vh - 28px) !important;
    }

    .receipts-takeover-card .takeover-body {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        grid-template-areas:
            "comparison"
            "why"
            "category"
            "framework"
            "wild" !important;
        max-height: calc(100vh - 190px) !important;
        padding: 12px 14px !important;
    }

    .receipts-takeover-card .takeover-comparison-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .receipts-takeover-card .takeover-actions {
        padding: 10px 14px !important;
    }
}

/* =========================================================
   36. PRINT — JARGON DECODER HERO AND QR SYSTEM
   ========================================================= */
@media print {
    .term-item.print-target .print-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 150px 132px !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100% !important;
        min-height: 112px !important;
        margin: 0 0 9px 0 !important;
        padding: 10px 0 11px 0 !important;
        border-bottom: 3px solid #000000 !important;
        background: #ffffff !important;
    }

    .term-item.print-target .print-hero-copy {
        display: block !important;
        min-width: 0 !important;
        color: #000000 !important;
        background: #ffffff !important;
    }

    .term-item.print-target .print-hero-kicker {
        display: block !important;
        margin: 0 0 3px 0 !important;
        color: #000000 !important;
        font: 900 .6rem/1 Arial, Helvetica, sans-serif !important;
        letter-spacing: .16em !important;
        text-transform: uppercase !important;
    }

    .term-item.print-target .print-hero-title {
        display: block !important;
        margin: 0 !important;
        color: #000000 !important;
        font: 900 1.65rem/.86 Georgia, "Times New Roman", serif !important;
        letter-spacing: -.045em !important;
        text-transform: uppercase !important;
    }

    .term-item.print-target .print-hero-subtitle {
        display: block !important;
        margin: 7px 0 0 0 !important;
        color: #555555 !important;
        font: 800 .45rem/1 Arial, Helvetica, sans-serif !important;
        letter-spacing: .11em !important;
        text-transform: uppercase !important;
    }

    .term-item.print-target .print-hero-image {
        display: block !important;
        visibility: visible !important;
        width: 255px !important;
        height: 166px !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center !important;
        border: 1px solid #000000 !important;
        background: #ffffff !important;
    }

    .term-item.print-target .print-qr-panel {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 132px !important;
        min-width: 132px !important;
        color: #000000 !important;
        background: #ffffff !important;
    }

    .term-item.print-target .print-qr-code {
        display: block !important;
        width: 122px !important;
        height: 122px !important;
        min-width: 122px !important;
        min-height: 122px !important;
        padding: 5px !important;
        border: 1px solid #000000 !important;
        background: #ffffff !important;
    }

    .term-item.print-target .print-qr-code svg {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        background: #ffffff !important;
    }

    .term-item.print-target .print-qr-panel span {
        display: block !important;
        width: 122px !important;
        color: #000000 !important;
        font: 900 .4rem/1.1 Arial, Helvetica, sans-serif !important;
        letter-spacing: .05em !important;
        text-align: center !important;
        text-transform: uppercase !important;
    }

    .term-item.print-target .print-meta {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "eyebrow case"
            "category category" !important;
        align-items: baseline !important;
        gap: 4px 14px !important;
        width: 100% !important;
        margin: 0 0 6px 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    .term-item.print-target .print-eyebrow {
        grid-area: eyebrow !important;
        display: block !important;
        margin: 0 !important;
        color: #777777 !important;
        font: 900 .48rem/1 Arial, Helvetica, sans-serif !important;
        letter-spacing: .16em !important;
        text-transform: uppercase !important;
    }

    .term-item.print-target .print-case-file {
        grid-area: case !important;
        display: block !important;
        margin: 0 !important;
        color: #000000 !important;
        font: 900 .48rem/1 Arial, Helvetica, sans-serif !important;
        letter-spacing: .1em !important;
        text-align: right !important;
        text-transform: uppercase !important;
    }

    .term-item.print-target .print-category {
        grid-area: category !important;
        display: block !important;
        margin: 0 !important;
        color: #555555 !important;
        font: 900 .5rem/1.1 Arial, Helvetica, sans-serif !important;
        letter-spacing: .11em !important;
        text-align: left !important;
        text-transform: uppercase !important;
    }

    .term-item.print-target .term-toggle {
        padding-bottom: 8px !important;
    }

    .term-item.print-target .term-toggle h3 {
        font-size: 1.9rem !important;
    }

    .term-item.print-target .term-tags {
        margin-top: 7px !important;
    }

    .term-item.print-target .print-footer {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-top: 28px !important;
        padding-top: 8px !important;
        border-top: 1px solid #000000 !important;
        color: #777777 !important;
    }
}

@media print and (max-width: 620px) {
    .term-item.print-target .print-header {
        grid-template-columns: minmax(0, 1fr) 112px 112px !important;
        gap: 8px !important;
        min-height: 96px !important;
    }

    .term-item.print-target .print-hero-image {
        width: 112px !important;
        height: 75px !important;
    }

    .term-item.print-target .print-qr-panel {
        width: 112px !important;
        min-width: 112px !important;
    }

    .term-item.print-target .print-qr-code {
        width: 104px !important;
        height: 104px !important;
        min-width: 104px !important;
        min-height: 104px !important;
    }

    .term-item.print-target .print-qr-panel span {
        width: 104px !important;
    }

    .term-item.print-target .print-hero-title {
        font-size: 1.35rem !important;
    }
}

/* =========================================================
   37. PRINT — CLOSING SIGNATURE
   ========================================================= */
@media print {
    .term-item.print-target .print-footer {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
        width: 100% !important;
        margin-top: 28px !important;
        padding-top: 8px !important;
        border-top: 1px solid #000000 !important;
        color: #555555 !important;
        font: 900 .46rem/1.2 Arial, Helvetica, sans-serif !important;
        letter-spacing: .09em !important;
        text-transform: uppercase !important;
    }

    .term-item.print-target .print-footer span:first-child {
        text-align: left !important;
    }

    .term-item.print-target .print-footer span:last-child {
        color: #000000 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }
}

/* =========================================================
   38. PRINT — QR BALANCE AND DUPLICATE FOOTER CONTROL
   ========================================================= */
@media print {
    .term-item.print-target .print-header {
    grid-template-columns: minmax(0, 1fr) 250px 94px !important;
    gap: 14px !important;
    min-height: 166px !important;
}

    .term-item.print-target .print-qr-panel {
        width: 94px !important;
        min-width: 94px !important;
        gap: 5px !important;
    }

    .term-item.print-target .print-qr-code {
        width: 84px !important;
        height: 84px !important;
        min-width: 84px !important;
        min-height: 84px !important;
        padding: 4px !important;
        border: 1px solid #000000 !important;
    }

    .term-item.print-target .print-qr-panel span {
        width: 90px !important;
        font-size: .34rem !important;
        line-height: 1.1 !important;
    }

    /*
     * The original footer is still inside .term-answer.
     * Hide it and print only the newer direct-child footer.
     */
    .term-item.print-target .term-answer .print-footer {
        display: none !important;
        visibility: hidden !important;
    }

    .term-item.print-target > .print-footer {
        display: flex !important;
        visibility: visible !important;
        position: relative !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
        width: 100% !important;
        margin: 28px 0 0 0 !important;
        padding: 8px 0 0 0 !important;
        border-top: 1px solid #000000 !important;
        background: #ffffff !important;
        color: #555555 !important;
        font: 900 .46rem/1.2 Arial, Helvetica, sans-serif !important;
        letter-spacing: .09em !important;
        text-transform: uppercase !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .term-item.print-target > .print-footer span {
        display: block !important;
        visibility: visible !important;
        background: #ffffff !important;
    }

    .term-item.print-target > .print-footer span:first-child {
        color: #555555 !important;
        text-align: left !important;
    }

    .term-item.print-target > .print-footer span:last-child {
        color: #000000 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }
}

@media print and (max-width: 620px) {
    .term-item.print-target .print-header {
        grid-template-columns: minmax(0, 1fr) 112px 88px !important;
    }

    .term-item.print-target .print-qr-panel {
        width: 88px !important;
        min-width: 88px !important;
    }

    .term-item.print-target .print-qr-code {
        width: 78px !important;
        height: 78px !important;
        min-width: 78px !important;
        min-height: 78px !important;
    }

    .term-item.print-target .print-qr-panel span {
        width: 84px !important;
    }
}

/* =========================================================
   39. PRINT — PLAYFUL MASTHEAD ALIGNMENT
   ========================================================= */
@media print {
    .term-item.print-target .print-header {
        display: grid !important;
        grid-template-columns: 100px minmax(0, 1fr) 250px !important;
        grid-template-rows: 166px auto !important;
        align-items: start !important;
        gap: 0 16px !important;
        min-height: 205px !important;
        padding: 10px 0 11px 0 !important;
    }

    .term-item.print-target .print-qr-panel {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: start !important;
        justify-self: start !important;
        width: 94px !important;
        min-width: 94px !important;
        margin-left: 16px !important;
    }

    .term-item.print-target .print-qr-code {
        width: 84px !important;
        height: 84px !important;
        min-width: 84px !important;
        min-height: 84px !important;
        padding: 4px !important;
    }

    .term-item.print-target .print-qr-panel span {
        width: 90px !important;
        margin-top: 5px !important;
        font-size: .34rem !important;
        line-height: 1.1 !important;
    }

    .term-item.print-target .print-hero-image {
        grid-column: 3 !important;
        grid-row: 1 !important;
        display: block !important;
        width: 250px !important;
        height: 166px !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .term-item.print-target .print-hero-copy {
        grid-column: 1 / 4 !important;
        grid-row: 2 !important;
        align-self: end !important;
        margin-top: 9px !important;
        padding-left: 0 !important;
        text-align: left !important;
    }

    .term-item.print-target .print-hero-kicker {
        display: none !important;
    }

    .term-item.print-target .print-hero-title {
        display: block !important;
        margin: 0 !important;
        font-size: 1.9rem !important;
        line-height: .86 !important;
    }

    .term-item.print-target .print-hero-subtitle {
        display: block !important;
        margin-top: 6px !important;
        font-size: .45rem !important;
    }
}

/* =========================================================
   40. PRINT — LOWER HERO VISUALS
   ========================================================= */
@media print {
    .term-item.print-target .print-qr-panel,
    .term-item.print-target .print-hero-image {
        transform: translateY(50px) !important;
    }
}

/* =========================================================
   MEDICINE BANNER — COMPACT CONTENT SCALE
   ========================================================= */

.yap-center-rail > .prescription-action .prescription-banner {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 10px 16px !important;
}

.yap-center-rail > .prescription-action .prescription-banner-bottle {
    width: 38px !important;
    height: 38px !important;
}

.yap-center-rail > .prescription-action .prescription-banner-copy h2 {
    margin: 0 !important;
    font-size: clamp(1.3rem, 2.15vw, 2.1rem) !important;
    line-height: .86 !important;
    letter-spacing: -.055em !important;
}

.yap-center-rail > .prescription-action .prescription-banner-instruction {
    gap: 8px !important;
    margin-top: 5px !important;
    padding-right: 4px !important;
}

.yap-center-rail > .prescription-action .prescription-banner-instruction span {
    font-size: .62rem !important;
}

.yap-center-rail > .prescription-action .prescription-banner-instruction svg {
    width: 64px !important;
    height: 20px !important;
}