/* ============================================================
 financialmodels.com.au
 Aesthetic: "Cellar" - editorial, earthy, confident
 Typography: Newsreader (display) + Manrope (body)
 Palette: Deep ink #1E1813, Clay #B5704A, Wine #6B2737, Cream #EEE6D4
 ============================================================ */

:root {
 /* Navy-era variables kept as aliases so existing class names still map */
 --ink: #1E1813;
 --ink-90: rgba(30, 24, 19, 0.92);
 --ink-80: rgba(30, 24, 19, 0.8);
 --ink-60: rgba(30, 24, 19, 0.58);
 --ink-40: rgba(30, 24, 19, 0.36);
 --ink-15: rgba(30, 24, 19, 0.13);
 --ink-08: rgba(30, 24, 19, 0.06);

 --wine: #6B2737; /* strong accent - emphasis, italics */
 --wine-light: #8F3A4D;
 --wine-dark: #4A1A26;

 --clay: #B5704A; /* warm accent - badges, numbers */
 --clay-light: #D39168;
 --clay-dark: #8E5434;

 --moss: #5A6B4F; /* success / positive metrics */
 --moss-light: #7C8D71;

 --bone: #EEE6D4; /* body background (warm paper) */
 --paper: #F7F0DE; /* cards, slightly lighter paper */
 --paper-warm: #F3EBD4;
 --cream: var(--bone); /* alias for legacy */
 --cream-warm: var(--paper-warm); /* alias */

 /* Navy aliases (map legacy class names to new palette) */
 --navy: var(--ink);
 --navy-80: var(--ink-80);
 --navy-60: var(--ink-60);
 --navy-40: var(--ink-40);
 --navy-10: var(--ink-15);
 --navy-05: var(--ink-08);
 --ochre: var(--clay);
 --ochre-light: var(--clay-light);
 --ochre-dark: var(--clay-dark);
 --charcoal: var(--ink);
 --sage: var(--moss);
 --sage-light: var(--moss-light);
 --rust: var(--wine);

 --divider: rgba(30, 24, 19, 0.14);
 --shadow-sm: 0 1px 2px rgba(30, 24, 19, 0.04);
 --shadow-md: 0 4px 18px rgba(30, 24, 19, 0.09);
 --shadow-lg: 0 24px 64px rgba(30, 24, 19, 0.14);

 --f-display: "Newsreader", "Spectral", Georgia, serif;
 --f-body: "Manrope", "Söhne", system-ui, -apple-system, sans-serif;
 --f-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

 --max: 1280px;
 --max-prose: 720px;
 --gutter: clamp(1.25rem, 3vw, 2.5rem);
 --section-y: clamp(4rem, 10vw, 7rem);
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
 scroll-behavior: smooth;
 font-size: 16px;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-rendering: optimizeLegibility;
}

body {
 font-family: var(--f-body);
 background: var(--bone);
 color: var(--ink);
 line-height: 1.6;
 overflow-x: hidden;
 font-weight: 400;

 /* Subtle warm paper grain */
 background-image:
 radial-gradient(circle at 1px 1px, rgba(30, 24, 19, 0.018) 1px, transparent 0),
 radial-gradient(circle at 21px 31px, rgba(181, 112, 74, 0.014) 1px, transparent 0);
 background-size: 3px 3px, 40px 40px;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }

/* ---------- Typography ---------- */
.display,
h1, h2, h3 {
 font-family: var(--f-display);
 font-weight: 400;
 line-height: 1.04;
 letter-spacing: -0.015em;
 color: var(--ink);
 font-variation-settings: "opsz" 36;
}

h1 { font-size: clamp(2.5rem, 7vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.2; }
h4 { font-family: var(--f-body); font-weight: 600; font-size: 1rem; color: var(--navy); }

p { line-height: 1.7; color: var(--charcoal); }
p.lead {
 font-size: clamp(1.125rem, 1.5vw, 1.375rem);
 line-height: 1.5;
 color: var(--navy-80);
}

.eyebrow {
 font-family: var(--f-body);
 font-size: 0.7rem;
 font-weight: 600;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--wine);
}

.small { font-size: 0.875rem; }
.mono { font-family: var(--f-mono); font-size: 0.875em; letter-spacing: -0.01em; }

em { font-style: italic; font-family: var(--f-display); font-weight: 400; color: var(--wine); font-variation-settings: "opsz" 36; }

/* Serif italic used as pull-quote style */
.italic-serif {
 font-family: var(--f-display);
 font-style: italic;
 font-weight: 400;
 color: var(--navy);
}

/* ---------- Layout ---------- */
.wrap {
 max-width: var(--max);
 margin: 0 auto;
 padding-left: var(--gutter);
 padding-right: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--narrow { padding-block: clamp(3rem, 6vw, 4.5rem); }

.divider {
 height: 1px;
 background: var(--divider);
 width: 100%;
}

/* ---------- Header ---------- */
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(250, 248, 243, 0.85);
 backdrop-filter: saturate(180%) blur(20px);
 -webkit-backdrop-filter: saturate(180%) blur(20px);
 border-bottom: 1px solid transparent;
 transition: border-color 0.3s, background 0.3s;
}
.site-header.scrolled {
 border-bottom-color: var(--divider);
}

.nav {
 display: flex;
 align-items: center;
 gap: 2rem;
 padding-block: 1.1rem;
}

/* Wordmark logo - no glyph, italic Newsreader, wine .au punctuation */
.logo {
 display: inline-flex;
 align-items: baseline;
 gap: 0;
 font-family: var(--f-display);
 font-style: italic;
 font-size: 1.45rem;
 font-weight: 500;
 letter-spacing: -0.015em;
 color: var(--ink);
 font-variation-settings: "opsz" 14;
 white-space: nowrap;
}
.logo-dot {
 color: var(--wine);
 font-family: var(--f-display);
 font-style: italic;
 font-weight: 500;
 font-size: 1.2rem;  /* slightly smaller than the main wordmark */
 font-variation-settings: "opsz" 14;
 margin-left: 0.05em;
}

.nav-links {
 display: flex;
 gap: 1.75rem;
 margin-left: auto;
 font-size: 0.9375rem;
 font-weight: 450;
}
.nav-links a {
 color: var(--navy-80);
 position: relative;
 padding: 0.25rem 0;
 transition: color 0.2s;
}
.nav-links a::after {
 content: "";
 position: absolute;
 bottom: -2px;
 left: 0;
 right: 100%;
 height: 1px;
 background: var(--wine);
 transition: right 0.3s;
}
.nav-links a:hover { color: var(--navy); }
.nav-links a:hover::after,
.nav-links a.active::after { right: 0; }

.nav-actions { display: flex; align-items: center; gap: 0.75rem; }

.btn {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.8rem 1.4rem;
 border-radius: 2px;
 font-size: 0.875rem;
 font-weight: 600;
 letter-spacing: 0.01em;
 transition: all 0.2s;
 white-space: nowrap;
}
.btn-primary {
 background: var(--ink);
 color: var(--paper);
 box-shadow: inset 0 0 0 1px var(--ink);
}
.btn-primary:hover {
 background: var(--wine);
 box-shadow: inset 0 0 0 1px var(--wine), 0 4px 14px rgba(107,39,55,0.25);
 transform: translateY(-1px);
}
.btn-ghost {
 color: var(--ink);
 background: transparent;
 box-shadow: inset 0 0 0 1px var(--ink-15);
}
.btn-ghost:hover {
 background: var(--paper);
 box-shadow: inset 0 0 0 1px var(--ink);
}
.btn-ochre {
 background: var(--clay);
 color: var(--ink);
 font-weight: 600;
}
.btn-ochre:hover { background: var(--clay-dark); color: var(--paper); }
.btn-lg { padding: 1rem 1.9rem; font-size: 0.9375rem; }

.cart-btn {
 position: relative;
 padding: 0.5rem;
 border-radius: 999px;
 color: var(--navy);
 transition: background 0.2s;
 display: flex;
 align-items: center;
}
.cart-btn:hover { background: var(--navy-05); }
.cart-btn svg { width: 20px; height: 20px; stroke-width: 1.5; }
.cart-count {
 position: absolute;
 top: 2px;
 right: 2px;
 background: var(--wine);
 color: var(--paper);
 font-size: 0.625rem;
 font-weight: 700;
 min-width: 18px;
 height: 18px;
 border-radius: 999px;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0 5px;
}
.cart-count[data-count="0"] { display: none; }

.menu-toggle { display: none; }

@media (max-width: 960px) {
 .nav-links { display: none; }
 .menu-toggle { display: flex; padding: 0.5rem; }
 .nav-links.open {
 display: flex;
 position: absolute;
 top: 100%;
 left: 0;
 right: 0;
 flex-direction: column;
 background: var(--cream);
 padding: 1.25rem var(--gutter) 1.75rem;
 border-bottom: 1px solid var(--divider);
 margin: 0;
 gap: 1.25rem;
 font-size: 1.125rem;
 }
}

/* ---------- Hero ---------- */
.hero {
 padding-top: clamp(4rem, 8vw, 7rem);
 padding-bottom: clamp(5rem, 10vw, 8rem);
 position: relative;
 overflow: hidden;
}

.hero-grid {
 display: grid;
 grid-template-columns: 1.15fr 0.85fr;
 gap: clamp(2.5rem, 5vw, 5rem);
 align-items: center;
}
@media (max-width: 860px) {
 .hero-grid { grid-template-columns: 1fr; }
}

.hero-tag {
 display: inline-flex;
 align-items: center;
 gap: 0.6rem;
 padding: 0.4rem 0.9rem;
 background: rgba(107, 39, 55, 0.08);
 color: var(--wine);
 border: 1px solid rgba(107, 39, 55, 0.2);
 border-radius: 2px;
 font-size: 0.75rem;
 font-weight: 600;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 margin-bottom: 1.75rem;
}
.hero-tag::before {
 content: "";
 width: 5px; height: 5px;
 background: var(--wine);
 transform: rotate(45deg);
}

.hero h1 {
 margin-bottom: 1.5rem;
 font-variation-settings: "opsz" 72;
}
.hero h1 em {
 color: var(--wine);
 font-weight: 400;
 font-variation-settings: "opsz" 72;
}

.hero-lead {
 font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
 line-height: 1.55;
 color: var(--navy-80);
 max-width: 36rem;
 margin-bottom: 2rem;
}

.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }

.hero-trust {
 display: flex;
 gap: 2rem;
 flex-wrap: wrap;
 padding-top: 2rem;
 border-top: 1px solid var(--divider);
}
.hero-trust-item { display: flex; flex-direction: column; gap: 0.15rem; }
.hero-trust-num {
 font-family: var(--f-display);
 font-size: 1.875rem;
 font-weight: 400;
 color: var(--navy);
 font-variation-settings: "opsz" 144;
 line-height: 1;
}
.hero-trust-label {
 font-size: 0.8125rem;
 color: var(--navy-60);
 font-weight: 450;
}

/* Hero visual - financial schematic */
.hero-visual {
 position: relative;
 aspect-ratio: 1 / 1.05;
 background: var(--paper);
 border: 1px solid var(--ink-15);
 border-radius: 2px;
 padding: 1.75rem;
 box-shadow: var(--shadow-lg);
 display: flex;
 flex-direction: column;
 overflow: hidden;
}
.hero-visual::before {
 content: "";
 position: absolute;
 top: -60px;
 right: -60px;
 width: 240px;
 height: 240px;
 background: radial-gradient(circle, rgba(181,112,74,0.22), transparent 60%);
 pointer-events: none;
}
.hero-visual::after {
 content: "";
 position: absolute;
 bottom: -40px;
 left: -40px;
 width: 180px;
 height: 180px;
 background: radial-gradient(circle, rgba(107,39,55,0.09), transparent 60%);
 pointer-events: none;
}

.vis-header {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 margin-bottom: 1rem;
 padding-bottom: 1rem;
 border-bottom: 1px solid var(--divider);
}
.vis-title {
 font-family: var(--f-display);
 font-size: 1.125rem;
 color: var(--navy);
 line-height: 1.2;
 font-variation-settings: "opsz" 144;
}
.vis-meta { font-size: 0.6875rem; color: var(--navy-60); letter-spacing: 0.05em; text-transform: uppercase; }

.vis-kpis {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1rem;
 margin-bottom: 1.25rem;
}
.vis-kpi-label { font-size: 0.625rem; letter-spacing: 0.1em; color: var(--navy-60); text-transform: uppercase; margin-bottom: 0.15rem; }
.vis-kpi-val {
 font-family: var(--f-display);
 font-size: 1.375rem;
 color: var(--navy);
 line-height: 1;
 font-variation-settings: "opsz" 144;
}
.vis-kpi-delta { font-size: 0.75rem; color: var(--sage); margin-top: 0.15rem; font-weight: 500; }

.vis-chart {
 flex: 1;
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 gap: 8px;
 padding: 1rem 0;
 min-height: 140px;
}
.vis-bar {
 flex: 1;
 background: linear-gradient(180deg, var(--ink), rgba(30,24,19,0.55));
 border-radius: 1px 1px 0 0;
 position: relative;
 animation: barGrow 1.2s cubic-bezier(.2,.7,.2,1) forwards;
 transform-origin: bottom;
 transform: scaleY(0);
}
.vis-bar:nth-child(1) { height: 28%; animation-delay: 0.1s; }
.vis-bar:nth-child(2) { height: 45%; animation-delay: 0.2s; }
.vis-bar:nth-child(3) { height: 62%; animation-delay: 0.3s; }
.vis-bar:nth-child(4) { height: 78%; animation-delay: 0.4s; }
.vis-bar:nth-child(5) { height: 100%; background: linear-gradient(180deg, var(--clay), var(--clay-dark)); animation-delay: 0.5s; }
@keyframes barGrow { to { transform: scaleY(1); } }

.vis-footer {
 display: flex;
 justify-content: space-between;
 font-size: 0.6875rem;
 color: var(--navy-60);
 padding-top: 0.75rem;
 border-top: 1px solid var(--divider);
 letter-spacing: 0.05em;
 text-transform: uppercase;
}

.vis-stamp {
 position: absolute;
 top: 50%;
 right: -22px;
 transform: translateY(-50%) rotate(-9deg);
 background: var(--wine);
 color: var(--bone);
 padding: 0.75rem 1.25rem;
 font-family: var(--f-display);
 font-size: 1rem;
 font-style: italic;
 font-weight: 500;
 letter-spacing: 0.01em;
 box-shadow: var(--shadow-md);
 font-variation-settings: "opsz" 36;
 border: 1px solid rgba(255,255,255,0.15);
}
.vis-stamp small {
 display: block;
 font-family: var(--f-body);
 font-style: normal;
 font-size: 0.625rem;
 font-weight: 500;
 letter-spacing: 0.15em;
 text-transform: uppercase;
 opacity: 0.7;
 margin-top: 0.1rem;
}

/* ---------- Marquee ---------- */
.marquee {
 padding: 1.35rem 0;
 background: var(--ink);
 color: var(--paper);
 overflow: hidden;
}
.marquee-track {
 display: flex;
 gap: 3.5rem;
 animation: marquee 45s linear infinite;
 white-space: nowrap;
 align-items: center;
}
.marquee span {
 font-family: var(--f-display);
 font-size: 1.0625rem;
 font-style: italic;
 letter-spacing: 0.005em;
 color: var(--paper);
 opacity: 0.88;
 font-variation-settings: "opsz" 36;
}
.marquee span::before {
 content: "✦";
 margin-right: 3.5rem;
 color: var(--clay-light);
 font-style: normal;
 font-size: 0.75rem;
 vertical-align: 0.15em;
}
@keyframes marquee {
 from { transform: translateX(0); }
 to { transform: translateX(-50%); }
}

/* ---------- Value Pillars ---------- */
.pillars {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 0;
 border-top: 1px solid var(--divider);
 border-bottom: 1px solid var(--divider);
}
@media (max-width: 860px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pillars { grid-template-columns: 1fr; } }

.pillar {
 padding: 2.5rem 1.75rem;
 border-right: 1px solid var(--divider);
 position: relative;
 transition: background 0.3s;
}
.pillar:last-child { border-right: 0; }
@media (max-width: 860px) {
 .pillar:nth-child(2) { border-right: 0; }
 .pillar:nth-child(1), .pillar:nth-child(2) { border-bottom: 1px solid var(--divider); }
}
@media (max-width: 520px) {
 .pillar { border-right: 0; border-bottom: 1px solid var(--divider); }
 .pillar:last-child { border-bottom: 0; }
}
.pillar:hover { background: var(--paper); }

.pillar-num {
 font-family: var(--f-display);
 font-variation-settings: "opsz" 24;
 font-size: 0.875rem;
 color: var(--wine);
 letter-spacing: 0.12em;
 margin-bottom: 1rem;
 display: block;
 font-style: italic;
}
.pillar h3 {
 font-size: 1.375rem;
 margin-bottom: 0.75rem;
}
.pillar p {
 font-size: 0.9375rem;
 color: var(--navy-80);
 line-height: 1.6;
}

/* ---------- Section Heads ---------- */
.section-head {
 display: grid;
 grid-template-columns: 0.4fr 0.6fr;
 gap: 3rem;
 margin-bottom: 3rem;
 align-items: end;
}
@media (max-width: 860px) {
 .section-head { grid-template-columns: 1fr; gap: 1.5rem; }
}
.section-head h2 { max-width: 16ch; }
.section-head p { max-width: 48ch; }

/* ---------- Product Grid ---------- */
.products {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1px;
 background: var(--divider);
 border: 1px solid var(--divider);
}
@media (max-width: 960px) { .products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .products { grid-template-columns: 1fr; } }

.product {
 background: var(--cream);
 padding: 1.75rem;
 display: flex;
 flex-direction: column;
 gap: 1rem;
 transition: background 0.3s;
 position: relative;
}
.product:hover { background: var(--paper); }

.product-visual {
 aspect-ratio: 16/9;
 background: var(--ink);
 border-radius: 2px;
 position: relative;
 overflow: hidden;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--paper);
 padding: 1.25rem;
}
.product-visual::before {
 content: "";
 position: absolute;
 inset: 0;
 background:
 radial-gradient(circle at 80% 30%, rgba(181,112,74,0.22), transparent 55%),
 radial-gradient(circle at 10% 90%, rgba(107,39,55,0.18), transparent 55%),
 linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.12) 100%);
 pointer-events: none;
}
.product-visual::after {
 /* Subtle grid texture */
 content: "";
 position: absolute;
 inset: 0;
 background-image:
 linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
 linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
 background-size: 24px 24px;
 pointer-events: none;
}
.product-visual svg, .product-visual .product-icon {
 position: relative;
 z-index: 2;
 width: 44px; height: 44px;
 stroke: var(--clay-light);
 stroke-width: 1;
 fill: none;
}
.product-sku {
 position: absolute;
 bottom: 0.6rem;
 right: 0.75rem;
 font-family: var(--f-mono);
 font-size: 0.625rem;
 letter-spacing: 0.12em;
 color: rgba(247, 240, 222, 0.45);
 z-index: 3;
}

.product-category {
 font-size: 0.6875rem;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--wine);
 font-weight: 600;
}
.product h3 {
 font-size: 1.25rem;
 line-height: 1.25;
}
.product p {
 font-size: 0.9375rem;
 color: var(--navy-80);
 line-height: 1.55;
 flex: 1;
}
.product-footer {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding-top: 1rem;
 border-top: 1px solid var(--divider);
}
.product-price {
 font-family: var(--f-display);
 font-size: 1.625rem;
 color: var(--ink);
 font-variation-settings: "opsz" 24;
 font-weight: 500;
}
.product-price small {
 font-family: var(--f-body);
 font-size: 0.6875rem;
 color: var(--ink-60);
 font-weight: 600;
 letter-spacing: 0.1em;
 margin-left: 0.35rem;
 text-transform: uppercase;
}
.product-add {
 padding: 0.55rem 1rem;
 background: transparent;
 color: var(--navy);
 border: 1px solid var(--navy-10);
 border-radius: 999px;
 font-size: 0.8125rem;
 font-weight: 500;
 transition: all 0.2s;
}
.product-add:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }

.product-badge {
 position: absolute;
 top: 1.75rem;
 right: 1.75rem;
 background: var(--wine);
 color: var(--paper);
 font-size: 0.625rem;
 font-weight: 700;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 padding: 0.35rem 0.7rem;
 border-radius: 1px;
 z-index: 4;
}

/* ---------- Featured Strip (Bundle) ---------- */
.bundle {
 background: var(--ink);
 color: var(--paper);
 position: relative;
 overflow: hidden;
}
.bundle::before {
 content: "";
 position: absolute;
 top: -30%;
 right: -15%;
 width: 65%;
 height: 160%;
 background: radial-gradient(ellipse, rgba(181,112,74,0.18), transparent 60%);
 pointer-events: none;
}
.bundle::after {
 content: "";
 position: absolute;
 bottom: -20%;
 left: -10%;
 width: 45%;
 height: 120%;
 background: radial-gradient(ellipse, rgba(107,39,55,0.16), transparent 65%);
 pointer-events: none;
}

.bundle-grid {
 display: grid;
 grid-template-columns: 1.2fr 0.8fr;
 gap: 4rem;
 align-items: center;
 padding-block: clamp(4rem, 8vw, 6rem);
 position: relative;
}
@media (max-width: 860px) { .bundle-grid { grid-template-columns: 1fr; gap: 2rem; } }

.bundle h2 { color: var(--paper); }
.bundle h2 em { color: var(--clay-light); font-weight: 400; }
.bundle p.lead { color: rgba(247, 240, 222, 0.72); }

.bundle-stats {
 display: flex;
 gap: 2.5rem;
 margin: 2rem 0;
 flex-wrap: wrap;
}
.bundle-stat-num {
 font-family: var(--f-display);
 font-size: 2.75rem;
 line-height: 1;
 color: var(--clay-light);
 font-variation-settings: "opsz" 36;
 font-weight: 400;
}
.bundle-stat-label {
 font-size: 0.75rem;
 color: rgba(247,240,222,0.55);
 margin-top: 0.4rem;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 font-weight: 500;
}

.bundle-price-card {
 background: rgba(255,255,255,0.03);
 backdrop-filter: blur(10px);
 border: 1px solid rgba(181,112,74,0.35);
 padding: 2rem;
 border-radius: 2px;
 position: relative;
}
.bundle-price-card::before {
 content: "";
 position: absolute;
 top: -1px; left: -1px; right: -1px;
 height: 3px;
 background: linear-gradient(90deg, var(--clay), var(--wine));
}
.bundle-price-old {
 text-decoration: line-through;
 color: rgba(247,240,222,0.45);
 font-size: 1.125rem;
 margin-bottom: 0.5rem;
 font-family: var(--f-display);
 font-variation-settings: "opsz" 24;
}
.bundle-price-new {
 font-family: var(--f-display);
 font-size: clamp(3rem, 5vw, 4.5rem);
 color: var(--paper);
 line-height: 1;
 margin-bottom: 0.5rem;
 font-variation-settings: "opsz" 72;
 font-weight: 400;
 letter-spacing: -0.02em;
}
.bundle-price-new small {
 font-family: var(--f-body);
 font-size: 0.75rem;
 color: rgba(247,240,222,0.5);
 font-weight: 600;
 letter-spacing: 0.12em;
 margin-left: 0.4rem;
 text-transform: uppercase;
}
.bundle-save {
 display: inline-block;
 background: var(--wine);
 color: var(--paper);
 padding: 0.3rem 0.7rem;
 border-radius: 1px;
 font-size: 0.6875rem;
 font-weight: 700;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 margin-bottom: 1.5rem;
}
.bundle-includes {
 margin-top: 1.5rem;
 padding-top: 1.5rem;
 border-top: 1px solid rgba(255,255,255,0.08);
 font-size: 0.875rem;
 color: rgba(247,240,222,0.72);
}
.bundle-includes li { padding: 0.3rem 0; display: flex; gap: 0.6rem; align-items: baseline; }
.bundle-includes li::before { content: "✦"; color: var(--clay-light); font-size: 0.65rem; }

/* ---------- Methodology ---------- */
.method-list {
 display: flex;
 flex-direction: column;
 gap: 0;
 border-top: 1px solid var(--divider);
}
.method-item {
 display: grid;
 grid-template-columns: 4rem 1fr 1fr;
 gap: 2rem;
 padding: 2rem 0;
 border-bottom: 1px solid var(--divider);
 align-items: start;
}
@media (max-width: 720px) {
 .method-item { grid-template-columns: 1fr; gap: 0.75rem; }
}
.method-num {
 font-family: var(--f-display);
 font-size: 2rem;
 color: var(--wine);
 font-variation-settings: "opsz" 36;
 line-height: 1;
 font-style: italic;
 font-weight: 400;
}
/* Smaller eyebrow-style variant for word-form labels (e.g. "Important") so
   they don't crash into the heading text at display-size. */
.method-num.method-num--label {
 font-family: var(--f-body);
 font-size: 0.7rem;
 font-style: normal;
 font-weight: 700;
 letter-spacing: 2px;
 text-transform: uppercase;
 padding: 0.3rem 0.6rem;
 background: var(--wine);
 color: var(--paper);
 border-radius: 999px;
 display: inline-block;
 align-self: flex-start;
 margin-bottom: 0.35rem;
}
.method-item h3 {
 font-size: 1.5rem;
}
.method-item p {
 color: var(--navy-80);
 font-size: 0.9375rem;
}

/* ---------- Testimonials ---------- */
.testimonial-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1.25rem;
}
@media (max-width: 860px) { .testimonial-grid { grid-template-columns: 1fr; } }

.testimonial {
 background: var(--paper);
 border: 1px solid var(--divider);
 padding: 2rem 1.75rem;
 border-radius: 2px;
 display: flex;
 flex-direction: column;
 gap: 1.25rem;
}
.testimonial-quote {
 font-family: var(--f-display);
 font-size: 1.1875rem;
 line-height: 1.45;
 color: var(--ink);
 font-variation-settings: "opsz" 24;
 font-style: italic;
 flex: 1;
 letter-spacing: -0.005em;
}
.testimonial-quote::before {
 content: "\201C";
 font-size: 3.5rem;
 line-height: 0;
 color: var(--wine);
 vertical-align: -0.5rem;
 margin-right: 0.1rem;
 font-family: var(--f-display);
 font-style: italic;
}
.testimonial-meta {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 padding-top: 1rem;
 border-top: 1px solid var(--divider);
}
.testimonial-avatar {
 width: 40px; height: 40px;
 border-radius: 1px;
 background: var(--wine);
 color: var(--paper);
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 600;
 font-size: 0.8125rem;
 letter-spacing: 0.08em;
}
.testimonial-name { font-weight: 500; color: var(--navy); }
.testimonial-role { font-size: 0.8125rem; color: var(--navy-60); }

/* ---------- FAQ ---------- */
.faq-list {
 max-width: 56rem;
 margin: 0 auto;
}
.faq-item {
 border-bottom: 1px solid var(--divider);
}
.faq-item:first-child { border-top: 1px solid var(--divider); }
.faq-question {
 width: 100%;
 padding: 1.6rem 0;
 text-align: left;
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 2rem;
 font-family: var(--f-display);
 font-size: 1.375rem;
 color: var(--ink);
 font-variation-settings: "opsz" 24;
 transition: color 0.2s;
 letter-spacing: -0.005em;
}
.faq-question:hover { color: var(--wine); }
.faq-icon {
 flex-shrink: 0;
 width: 24px; height: 24px;
 position: relative;
}
.faq-icon::before, .faq-icon::after {
 content: "";
 position: absolute;
 top: 50%; left: 50%;
 background: var(--ink);
 transition: transform 0.3s;
}
.faq-icon::before { width: 14px; height: 1px; transform: translate(-50%, -50%); }
.faq-icon::after { width: 1px; height: 14px; transform: translate(-50%, -50%); }
.faq-item.open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq-answer {
 display: grid;
 grid-template-rows: 0fr;
 transition: grid-template-rows 0.3s;
}
.faq-answer > div {
 overflow: hidden;
}
.faq-answer p {
 padding-bottom: 1.5rem;
 color: var(--navy-80);
 max-width: 60ch;
}
.faq-item.open .faq-answer { grid-template-rows: 1fr; }

/* ---------- CTA Strip ---------- */
.cta-strip {
 background: var(--cream-warm);
 border-top: 1px solid var(--divider);
 border-bottom: 1px solid var(--divider);
 text-align: center;
 padding-block: clamp(4rem, 8vw, 5.5rem);
}
.cta-strip h2 { max-width: 20ch; margin: 0 auto 1.25rem; }
.cta-strip p { max-width: 40ch; margin: 0 auto 2rem; }

/* ---------- Newsletter ---------- */
.newsletter {
 display: flex;
 gap: 0.5rem;
 max-width: 28rem;
 margin: 1.5rem auto 0;
}
.newsletter input[type="email"] {
 flex: 1;
 padding: 0.875rem 1.125rem;
 border: 1px solid var(--divider);
 background: var(--paper);
 border-radius: 999px;
 font-size: 0.9375rem;
 outline: 0;
 transition: border-color 0.2s;
}
.newsletter input[type="email"]:focus { border-color: var(--navy); }
.newsletter button { flex-shrink: 0; }

/* ---------- Footer ---------- */
.site-footer {
 background: var(--ink);
 color: var(--paper);
 padding-top: clamp(4rem, 8vw, 5.5rem);
 padding-bottom: 2rem;
 position: relative;
}
.site-footer::before {
 content: "";
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 2px;
 background: linear-gradient(90deg, var(--wine), var(--clay), var(--wine));
 opacity: 0.7;
}
.footer-grid {
 display: grid;
 grid-template-columns: 1.5fr 1fr 1fr 1fr;
 gap: 3rem;
 padding-bottom: 3rem;
 border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand h4 {
 color: var(--paper);
 font-family: var(--f-display);
 font-size: 1.625rem;
 font-weight: 500;
 margin-bottom: 1rem;
 font-variation-settings: "opsz" 24;
}
.footer-brand p {
 font-size: 0.875rem;
 color: rgba(247,240,222,0.6);
 max-width: 24rem;
 line-height: 1.6;
}
.footer-col h5 {
 color: var(--clay-light);
 font-size: 0.7rem;
 font-weight: 700;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.9375rem; }
.footer-col a { color: rgba(247,240,222,0.72); transition: color 0.2s; }
.footer-col a:hover { color: var(--clay-light); }

.footer-bottom {
 padding-top: 2rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-size: 0.8125rem;
 color: rgba(247,240,222,0.45);
 flex-wrap: wrap;
 gap: 1rem;
}
.footer-bottom a { color: rgba(247,240,222,0.6); }
.footer-bottom a:hover { color: var(--clay-light); }

/* ---------- Page Heads (non-home pages) ---------- */
.page-head {
 padding-top: clamp(3rem, 6vw, 5rem);
 padding-bottom: clamp(2rem, 4vw, 3rem);
 border-bottom: 1px solid var(--divider);
}
.page-head .eyebrow { margin-bottom: 1rem; display: block; }
.page-head h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); max-width: 18ch; margin-bottom: 1.25rem; }
.page-head p.lead { max-width: 48ch; }

/* ---------- Filters (Products page) ---------- */
.filter-bar {
 display: flex;
 gap: 0.5rem;
 flex-wrap: wrap;
 padding-block: 1.5rem;
 border-bottom: 1px solid var(--divider);
 align-items: center;
}
.filter-label {
 font-size: 0.75rem;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--navy-60);
 margin-right: 0.5rem;
}
.filter-chip {
 padding: 0.5rem 1rem;
 border: 1px solid var(--ink-15);
 border-radius: 1px;
 font-size: 0.8125rem;
 color: var(--ink-80);
 cursor: pointer;
 background: transparent;
 transition: all 0.2s;
 font-weight: 500;
}
.filter-chip:hover { background: var(--paper); border-color: var(--ink-40); }
.filter-chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- About Page Specific ---------- */
.bio-grid {
 display: grid;
 grid-template-columns: 0.4fr 0.6fr;
 gap: 4rem;
 align-items: start;
}
@media (max-width: 860px) { .bio-grid { grid-template-columns: 1fr; gap: 2rem; } }
.bio-side { position: sticky; top: 6rem; }
.bio-label { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ochre-dark); margin-bottom: 0.75rem; }
.bio-list { display: flex; flex-direction: column; gap: 1.25rem; font-size: 0.9375rem; }
.bio-list li { padding-bottom: 1.25rem; border-bottom: 1px solid var(--divider); }
.bio-list li:last-child { border-bottom: 0; }

/* ---------- How it works step cards ---------- */
.steps {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 0;
 counter-reset: step;
}
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

.step {
 padding: 2.5rem 1.5rem;
 border-right: 1px solid var(--divider);
 counter-increment: step;
 position: relative;
}
.step:last-child { border-right: 0; }
@media (max-width: 860px) { .step:nth-child(2n) { border-right: 0; } }
@media (max-width: 520px) { .step { border-right: 0; border-bottom: 1px solid var(--divider); } }

.step::before {
 content: "0" counter(step);
 font-family: var(--f-display);
 font-size: 4.5rem;
 color: var(--wine);
 line-height: 1;
 display: block;
 margin-bottom: 1rem;
 opacity: 0.45;
 font-variation-settings: "opsz" 72;
 font-style: italic;
 font-weight: 300;
}
.step h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.step p { font-size: 0.9375rem; color: var(--navy-80); }

/* ---------- Contact form ---------- */
.contact-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 4rem;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 2rem; } }

.form-group { margin-bottom: 1.25rem; }
.form-group label {
 display: block;
 font-size: 0.8125rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--navy);
 font-weight: 500;
 margin-bottom: 0.5rem;
}
.form-control {
 width: 100%;
 padding: 0.875rem 1rem;
 border: 1px solid var(--divider);
 background: var(--paper);
 border-radius: 2px;
 font-size: 0.9375rem;
 outline: 0;
 transition: border-color 0.2s;
 font-family: var(--f-body);
}
.form-control:focus { border-color: var(--navy); }
textarea.form-control { resize: vertical; min-height: 140px; }

/* ---------- Trust Bar ---------- */
.trust-bar {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 1px;
 background: var(--divider);
 border: 1px solid var(--divider);
 margin-top: 2rem;
}
@media (max-width: 720px) { .trust-bar { grid-template-columns: 1fr 1fr; } }

.trust-item {
 padding: 1.5rem;
 background: var(--cream);
 text-align: center;
}
.trust-icon {
 width: 28px; height: 28px;
 margin: 0 auto 0.75rem;
 stroke: var(--navy);
 fill: none;
 stroke-width: 1.25;
}
.trust-item h4 { font-size: 0.9375rem; margin-bottom: 0.25rem; }
.trust-item p { font-size: 0.8125rem; color: var(--navy-60); line-height: 1.45; }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 3rem; }

/* ---------- Ecwid overrides ---------- */
#my-store-12345678,
.ec-size,
.ec-store {
 font-family: var(--f-body) !important;
}

/* ---------- Print ---------- */
@media print {
 .site-header, .site-footer, .marquee { display: none; }
}

/* ============================================================
 ANIMATIONS - subtle, editorial, never flashy
 All respect prefers-reduced-motion (see bottom of file)
 ============================================================ */

/* Keyframes */
@keyframes riseIn {
 from { opacity: 0; transform: translateY(14px); }
 to { opacity: 1; transform: translateY(0); }
}
@keyframes drawIn {
 from { transform: scaleX(0); }
 to { transform: scaleX(1); }
}
@keyframes breathe {
 0%, 100% { transform: translateY(-50%) rotate(-9deg); }
 50% { transform: translateY(-52%) rotate(-8deg); }
}
@keyframes settleStamp {
 0% { opacity: 0; transform: translateY(-50%) rotate(14deg) scale(0.85); }
 60% { opacity: 1; transform: translateY(-50%) rotate(-12deg) scale(1.02); }
 100% { opacity: 1; transform: translateY(-50%) rotate(-9deg) scale(1); }
}
@keyframes markerPulse {
 0%, 100% { transform: rotate(45deg) scale(1); }
 50% { transform: rotate(45deg) scale(1.15); }
}
@keyframes countUp {
 /* JS-driven via data attribute */
}

/* Hero: staggered entrance cascade */
.hero-tag,
.hero h1,
.hero-lead,
.hero-ctas,
.hero-trust {
 opacity: 0;
 animation: riseIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.hero-tag { animation-delay: 0.05s; }
.hero h1 { animation-delay: 0.18s; animation-duration: 1.1s; }
.hero-lead { animation-delay: 0.38s; }
.hero-ctas { animation-delay: 0.52s; }
.hero-trust { animation-delay: 0.64s; }

/* Hero visual card: rise in + overshoot settle */
.hero-visual {
 opacity: 0;
 transform: translateY(24px);
 animation: riseIn 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s forwards;
}

/* "Funded" stamp: settles in with slight wobble, then breathes */
.vis-stamp {
 animation:
 settleStamp 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s both,
 breathe 5s ease-in-out 2.9s infinite;
}

/* Wordmark hover: name shifts to wine, .au punctuation deepens */
.logo { transition: color 0.25s; }
.logo:hover { color: var(--wine); }
.logo:hover .logo-dot { color: var(--wine-dark); }

/* Product cards: hover lift with soft shadow (was background-only) */
.product {
 transition:
 background 0.35s ease,
 transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
 box-shadow 0.35s ease;
}
.product:hover {
 background: var(--paper);
 transform: translateY(-3px);
 box-shadow: 0 8px 24px rgba(30, 24, 19, 0.08);
 z-index: 2;
}

/* Product visual: subtle image-like zoom on hover */
.product-visual::before {
 transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.product:hover .product-visual::before {
 transform: scale(1.08);
}

/* Product icon: slight drift on hover */
.product-visual .product-icon {
 transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), stroke 0.3s;
}
.product:hover .product-visual .product-icon {
 transform: scale(1.08) rotate(-2deg);
 stroke: var(--clay);
}

/* Section heading underline - drawn in when scrolled into view */
.section-head h2 {
 position: relative;
 padding-bottom: 0.15em;
}
.section-head h2::after {
 content: "";
 position: absolute;
 left: 0;
 bottom: -0.1em;
 width: 2.25rem;
 height: 2px;
 background: var(--wine);
 transform: scaleX(0);
 transform-origin: left;
 transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s;
}
.section-head.in-view h2::after {
 transform: scaleX(1);
}

/* Pillars: stagger on entrance (via .in-view class from observer) */
.pillar {
 opacity: 0;
 transform: translateY(12px);
 transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s;
}
.pillar.in-view { opacity: 1; transform: translateY(0); }
.pillar:nth-child(1).in-view { transition-delay: 0s; }
.pillar:nth-child(2).in-view { transition-delay: 0.08s; }
.pillar:nth-child(3).in-view { transition-delay: 0.16s; }
.pillar:nth-child(4).in-view { transition-delay: 0.24s; }

/* Method items: slide in from slightly left */
.method-item {
 opacity: 0;
 transform: translateX(-12px);
 transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.method-item.in-view { opacity: 1; transform: translateX(0); }

/* Testimonial cards: stagger */
.testimonial {
 opacity: 0;
 transform: translateY(16px);
 transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.testimonial.in-view { opacity: 1; transform: translateY(0); }
.testimonial:nth-child(2).in-view { transition-delay: 0.1s; }
.testimonial:nth-child(3).in-view { transition-delay: 0.2s; }

/* Step cards (how it works) */
.step {
 opacity: 0;
 transform: translateY(12px);
 transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.step.in-view { opacity: 1; transform: translateY(0); }
.step:nth-child(2).in-view { transition-delay: 0.08s; }
.step:nth-child(3).in-view { transition-delay: 0.16s; }
.step:nth-child(4).in-view { transition-delay: 0.24s; }

/* Trust items */
.trust-item {
 opacity: 0;
 transform: translateY(10px);
 transition: opacity 0.6s ease, transform 0.6s ease;
}
.trust-item.in-view { opacity: 1; transform: translateY(0); }
.trust-item:nth-child(2).in-view { transition-delay: 0.07s; }
.trust-item:nth-child(3).in-view { transition-delay: 0.14s; }
.trust-item:nth-child(4).in-view { transition-delay: 0.21s; }

/* Bundle stat numbers - slight shimmer on reveal */
.bundle-stat-num {
 opacity: 0;
 transform: translateY(8px);
 transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bundle.in-view .bundle-stat-num { opacity: 1; transform: translateY(0); }
.bundle.in-view .bundle-stat-num:nth-child(1) { transition-delay: 0.1s; }
.bundle.in-view .bundle-stat-num:nth-child(2) { transition-delay: 0.2s; }
.bundle.in-view .bundle-stat-num:nth-child(3) { transition-delay: 0.3s; }

/* Marquee: pause on hover - invites readers */
.marquee:hover .marquee-track {
 animation-play-state: paused;
}

/* Button shine on hover */
.btn-primary {
 position: relative;
 overflow: hidden;
}
.btn-primary::after {
 content: "";
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(247, 240, 222, 0.12), transparent);
 transition: left 0.6s;
}
.btn-primary:hover::after {
 left: 100%;
}

/* Hero trust num - subtle on load */
.hero-trust-num {
 display: inline-block;
 transition: color 0.3s, transform 0.3s;
}
.hero-trust-item:hover .hero-trust-num {
 color: var(--wine);
 transform: translateY(-1px);
}

/* FAQ: smoother accordion */
.faq-question {
 transition: color 0.25s, padding 0.3s;
}
.faq-item.open .faq-question {
 color: var(--wine);
}

/* Newsletter input focus glow */
.newsletter input[type="email"] {
 transition: border-color 0.2s, box-shadow 0.2s;
}
.newsletter input[type="email"]:focus {
 border-color: var(--ink);
 box-shadow: 0 0 0 3px rgba(30, 24, 19, 0.08);
}

/* Filter chips - subtle scale on active */
.filter-chip {
 transform: scale(1);
 transition: all 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.filter-chip:hover { transform: scale(1.03); }
.filter-chip:active { transform: scale(0.97); }

/* Bar chart bars - subtle hover brightening */
.vis-bar {
 transition: filter 0.3s;
 cursor: default;
}
.hero-visual:hover .vis-bar:nth-child(5) {
 filter: brightness(1.08);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
 animation-duration: 0.01ms !important;
 animation-delay: 0ms !important;
 transition-duration: 0.01ms !important;
 transition-delay: 0ms !important;
 }
 .hero-tag, .hero h1, .hero-lead, .hero-ctas, .hero-trust, .hero-visual,
 .pillar, .method-item, .testimonial, .step, .trust-item, .bundle-stat-num {
 opacity: 1 !important;
 transform: none !important;
 }
 .section-head h2::after {
 transform: scaleX(1) !important;
 }
}

/* ─── Live Monte Carlo signature strip (shared across pages) ─── */
.mc-strip {
  position: relative;
  height: 96px;
  background: #0E0E10;
  color: #F4F1EA;
  border-top: 1px solid #2A2A30;
  border-bottom: 1px solid #2A2A30;
  overflow: hidden;
  font-family: 'JetBrains Mono', 'Inconsolata', ui-monospace, monospace;
}
.mc-strip canvas { width: 100%; height: 100%; display: block; }
.mc-strip .mc-label {
  position: absolute; left: clamp(1rem, 4vw, 4rem); top: 14px; z-index: 2;
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: #9099A2;
}
.mc-strip .mc-led {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #A6E22E; box-shadow: 0 0 6px #A6E22E;
  margin-right: 0.4rem; vertical-align: middle; animation: mc-pulse 1.6s infinite;
}
@keyframes mc-pulse { 50% { opacity: 0.4; } }
.mc-strip .mc-rerun {
  position: absolute; right: clamp(1rem, 4vw, 4rem); top: 8px; z-index: 2;
  background: transparent; color: #9099A2; border: 1px solid #2A2A30;
  font-family: inherit; font-size: 0.6rem; letter-spacing: 0.2em;
  text-transform: uppercase; padding: 0.35rem 0.75rem; cursor: pointer;
  border-radius: 2px;
}
.mc-strip .mc-rerun:hover { color: #A6E22E; border-color: #A6E22E; }
.mc-strip .mc-pick {
  position: absolute; right: calc(clamp(1rem, 4vw, 4rem) + 5.5rem); top: 8px; z-index: 3;
  background: rgba(255, 255, 255, 0.06);
  color: #F4F1EA;
  border: 1px solid #3A3A40;
  font-family: inherit;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.35rem 1.6rem 0.35rem 0.75rem;  /* room for the custom caret */
  border-radius: 2px;
  cursor: pointer;
  /* Override the default native dropdown arrow with a phosphor caret */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%23A6E22E' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  transition: border-color 0.18s, color 0.18s, background-color 0.18s;
}
.mc-strip .mc-pick:hover,
.mc-strip .mc-pick:focus {
  border-color: #A6E22E;
  color: #A6E22E;
  background-color: rgba(166, 226, 46, 0.08);
  outline: none;
}
.mc-strip .mc-pick option {
  background: #14141A;  /* solid dark for the open menu - matches strip */
  color: #F4F1EA;
  font-weight: 500;
}
/* Tiny "Industry:" label right of the brand, signals the dropdown is interactive */
.mc-strip .mc-pick-hint {
  position: absolute;
  right: calc(clamp(1rem, 4vw, 4rem) + 14rem);
  top: 12px; z-index: 3;
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: #6F757B; pointer-events: none;
}
.mc-strip .mc-ticks {
  position: absolute; left: clamp(1rem, 4vw, 4rem); right: clamp(1rem, 4vw, 4rem);
  bottom: 6px; display: flex; justify-content: space-between; z-index: 2;
  font-size: 0.6rem; letter-spacing: 0.15em; color: #6F757B;
}
.mc-strip .mc-ticks .mc-p50 { color: #FFB000; font-weight: 700; }
@media (max-width: 720px) {
  /* Keep the dropdown visible on mobile - just tighten its size and hide
  the "Industry:" hint which would otherwise crowd the strip. */
  .mc-strip .mc-pick {
  right: 0.75rem;
  font-size: 0.55rem;
  padding: 0.3rem 1.4rem 0.3rem 0.5rem;
  max-width: 9rem;
  }
  .mc-strip .mc-pick-hint { display: none; }
  .mc-strip .mc-rerun {
  right: auto; left: 0.75rem; top: auto; bottom: 6px;
  }
  .mc-strip .mc-ticks span:nth-child(1),
  .mc-strip .mc-ticks span:nth-child(7) { display: none; }
}
.mc-strip canvas { cursor: crosshair; }
.mc-strip .mc-hover-line {
  position: absolute; top: 28px; bottom: 22px; width: 1px;
  background: #FFB000; box-shadow: 0 0 4px rgba(255,176,0,0.6);
  pointer-events: none; display: none; z-index: 3;
}
.mc-strip .mc-hover-pill {
  position: absolute; top: 4px; height: 22px; padding: 0 0.6rem;
  display: none; align-items: center; z-index: 4;
  background: #FFB000; color: #0E0E10;
  font-family: 'JetBrains Mono', monospace; font-size: 0.65rem;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 2px; pointer-events: none; line-height: 22px;
}

/* ─── Subtle Monte-Carlo green-dot accents on related hover surfaces ─── */
/* Used sparingly: only on links/cards/CTAs that mention Monte Carlo or risk
  analysis. The dot signals the live-simulation differentiator without
  shouting. */
.mc-accent {
  position: relative;
  transition: color 0.2s;
}
.mc-accent::after {
  content: "";
  position: absolute;
  right: -0.65rem;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #A6E22E;
  box-shadow: 0 0 4px rgba(166, 226, 46, 0.7);
  transform: translateY(-50%) scale(0);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(.2,.7,.3,1.4), opacity 0.18s;
  pointer-events: none;
}
.mc-accent:hover::after,
.mc-accent:focus-visible::after {
  transform: translateY(-50%) scale(1);
  opacity: 1;
}

/* Phosphor dot on cards whose body mentions Monte Carlo. Hidden at rest,
  reveals on hover with a soft glow. Subtle invitation to read more. */
.mc-card { position: relative; transition: transform 0.25s, box-shadow 0.25s; }
.mc-card::before {
  content: "";
  position: absolute;
  top: 12px; right: 12px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #A6E22E;
  box-shadow: 0 0 6px rgba(166, 226, 46, 0);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.22s, transform 0.28s cubic-bezier(.2,.7,.3,1.4),
  box-shadow 0.28s;
  pointer-events: none;
}
.mc-card:hover::before,
.mc-card:focus-within::before {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 8px rgba(166, 226, 46, 0.7), 0 0 16px rgba(166, 226, 46, 0.3);
}

/* Underline-with-trailing-dot for inline links that mention MC. Dot pulses
  gently on hover, then settles. */
a.mc-inline {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-15);
  padding-right: 0.55rem;
  transition: color 0.2s, border-color 0.2s;
}
a.mc-inline::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.35em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #A6E22E;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s, transform 0.25s cubic-bezier(.2,.7,.3,1.4);
}
a.mc-inline:hover {
  color: var(--wine);
  border-bottom-color: var(--wine);
}
a.mc-inline:hover::after {
  opacity: 1;
  transform: scale(1);
}

/* ─── 3D depth on the MC strip ─── */
/* Inset highlight along the top edge + soft drop shadow at the bottom give
  the strip a slight "embedded panel" feel without overdoing it. */
.mc-strip {
  box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.06),  /* tiny top highlight */
  inset 0 -1px 0 rgba(0, 0, 0, 0.4),  /* sharp bottom edge */
  0 8px 18px -8px rgba(14, 14, 16, 0.35),  /* soft drop shadow */
  0 1px 0 rgba(0, 0, 0, 0.5);  /* hairline base line */
  /* very subtle gradient: top of strip slightly lighter than bottom,
  reinforces the "panel sitting on the page" illusion */
  background-image: linear-gradient(180deg,
  rgba(255, 255, 255, 0.025) 0%,
  rgba(255, 255, 255, 0.000) 18%,
  rgba(0, 0, 0, 0.000) 82%,
  rgba(0, 0, 0, 0.20) 100%);
  background-color: #0E0E10;
  background-blend-mode: normal;
}
/* Re-assert canvas transparency so the gradient shows behind the dots */
.mc-strip canvas { background: transparent; }

/* ─── Phosphor dot on nav links (top menu) ─── */
/* Hidden at rest; appears beside the link text on hover. Lower-key than the
  wine underline (which still extends), so the dot reads as a secondary cue
  rather than competing. */
.nav-links a {
  padding-right: 0.65rem;  /* leave room for the dot */
}
.nav-links a::before {
  content: "";
  position: absolute;
  right: -0.2rem;
  top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #A6E22E;
  box-shadow: 0 0 4px rgba(166, 226, 46, 0);
  transform: translateY(-50%) scale(0);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(.2,.7,.3,1.4),
  opacity 0.18s, box-shadow 0.22s;
  pointer-events: none;
}
.nav-links a:hover::before,
.nav-links a:focus-visible::before,
.nav-links a.active::before {
  transform: translateY(-50%) scale(1);
  opacity: 1;
  box-shadow: 0 0 5px rgba(166, 226, 46, 0.65);
}

/* ─────────────────────────────────────────────────────────────────
  EXPLORE PAGE  (explore.html)
  Browser-side sandbox: 5-key-driver form + live P&L + NPV + Monte Carlo
  ───────────────────────────────────────────────────────────────── */

.xp .xp-h2 {
 font-family: var(--f-display);
 font-size: clamp(1.4rem, 2.4vw, 1.85rem);
 font-weight: 600;
 color: var(--ink);
 margin: 0 0 0.6rem 0;
 letter-spacing: -0.01em;
}
.xp .xp-h3 {
 font-family: var(--f-display);
 font-size: 1.1rem;
 font-weight: 600;
 color: var(--wine);
 margin: 1.5rem 0 0.5rem 0;
 padding-bottom: 0.3rem;
 border-bottom: 2px solid var(--clay);
}

/* Industry picker  -  horizontal scrollable on mobile, grid on desktop */
.xp-pickers { margin-top: 2rem; }
.xp-picker {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 0.65rem;
 margin: 0.75rem 0 2rem 0;
}
@media (max-width: 1024px) { .xp-picker { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .xp-picker { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .xp-picker { grid-template-columns: repeat(2, 1fr); } }

.xp-card {
 text-align: left;
 padding: 0.8rem 0.9rem;
 background: white;
 border: 1px solid var(--divider);
 border-left: 3px solid transparent;
 border-radius: 4px;
 cursor: pointer;
 font-family: inherit;
 transition: border-color .15s, transform .15s, background .15s;
 display: flex;
 flex-direction: column;
 gap: 0.15rem;
 min-height: 80px;
}
.xp-card:hover { border-left-color: var(--clay); transform: translateY(-1px); }
.xp-card.active {
 border-left-color: var(--wine);
 background: var(--bone);
}
.xp-sku  { font-size: 0.7rem; color: var(--clay-dk, #8E5434); letter-spacing: 1px; font-weight: 700; }
.xp-name  { font-family: var(--f-display); font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.xp-sector{ font-size: 0.78rem; color: var(--ink-soft, #3A3027); }

/* Workspace  -  two-column on desktop, stack on mobile */
.xp-workspace-head { margin-bottom: 1rem; }
.xp-sector { margin: 0; color: var(--ink-soft, #3A3027); font-size: 0.95rem; }

.xp-grid {
 display: grid;
 grid-template-columns: 360px 1fr;
 gap: 1.5rem;
 align-items: start;
 margin-bottom: 4rem;
}
@media (max-width: 960px) {
 .xp-grid { grid-template-columns: 1fr; }
}

.xp-panel {
 background: white;
 border: 1px solid var(--divider);
 border-radius: 6px;
 padding: 1.25rem 1.4rem;
}

.xp-form-intro {
 font-size: 0.85rem;
 color: var(--ink-soft, #3A3027);
 background: var(--bone);
 padding: 0.7rem 0.85rem;
 border-radius: 4px;
 line-height: 1.45;
 margin-bottom: 1rem;
}
.xp-field { display: block; margin: 0.85rem 0; }
.xp-label {
 display: block;
 font-size: 0.78rem;
 color: var(--ink-soft, #3A3027);
 margin-bottom: 0.3rem;
 font-weight: 500;
}
.xp-label em { color: var(--gray, #958876); font-style: italic; font-weight: 400; font-size: 0.72rem; }
.xp-input {
 width: 100%;
 background: #FFF4D4;
 border: 1px solid #E8C478;
 border-radius: 3px;
 padding: 0.55rem 0.7rem;
 font-family: inherit;
 font-size: 0.95rem;
 font-weight: 600;
 color: #0033AA;
 transition: outline 0.1s;
}
.xp-input:focus { outline: 2px solid var(--clay); outline-offset: 1px; }
.xp-reset {
 margin-top: 0.5rem;
 padding: 0.55rem 1rem;
 background: transparent;
 color: var(--ink);
 border: 1px solid var(--ink);
 border-radius: 3px;
 font-family: inherit;
 font-weight: 600;
 cursor: pointer;
}
.xp-reset:hover { background: var(--bone); }

/* KPIs */
.xp-kpis {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
 gap: 0.65rem;
 margin-bottom: 0.5rem;
}
.xp-kpi {
 background: var(--bone);
 border-left: 4px solid var(--clay);
 padding: 0.7rem 0.85rem;
 border-radius: 3px;
}
.xp-kpi-l { font-size: 0.7rem; color: var(--ink-soft, #3A3027); letter-spacing: 0.5px; text-transform: uppercase; }
.xp-kpi-v {
 font-family: var(--f-display);
 font-weight: 700;
 font-size: 1.4rem;
 color: var(--ink);
 margin: 0.2rem 0 0.15rem 0;
 line-height: 1.1;
}
.xp-kpi-v.pos { color: #2E7D55; }
.xp-kpi-v.neg { color: #B22B3C; }
.xp-kpi-s { font-size: 0.78rem; color: var(--gray, #958876); }

/* Table */
.xp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.xp-table {
 width: 100%;
 border-collapse: collapse;
 font-size: 0.9rem;
 min-width: 540px;
}
.xp-table th, .xp-table td {
 padding: 0.5rem 0.7rem;
 border-bottom: 1px solid var(--divider);
 text-align: center;
 font-variant-numeric: tabular-nums;
}
.xp-table thead th {
 background: var(--ink);
 color: var(--bone);
 font-weight: 600;
 font-size: 0.75rem;
 letter-spacing: 0.4px;
 text-align: center;
}
.xp-table thead th:first-child,
.xp-table tbody th {
 text-align: left;
}
.xp-table tbody th {
 background: white;
 color: var(--ink);
 font-weight: 500;
}
.xp-table tr.strong td, .xp-table tr.strong th { font-weight: 700; background: var(--bone); }
.xp-table td.pos { color: #2E7D55; }
.xp-table td.neg { color: #B22B3C; }

/* CBA / MC summary lists */
.xp-cba {
 list-style: none;
 padding: 0;
 margin: 0.4rem 0 0.6rem 0;
}
.xp-cba li {
 display: flex;
 justify-content: space-between;
 padding: 0.45rem 0;
 border-bottom: 1px dashed var(--divider);
 font-size: 0.92rem;
}
.xp-cba li strong {
 font-variant-numeric: tabular-nums;
 color: var(--ink);
}

.xp-cta {
 margin-top: 1.5rem;
 padding: 1rem 1.1rem;
 background: var(--bone);
 border-left: 3px solid var(--wine);
 border-radius: 3px;
 font-size: 0.9rem;
 color: var(--ink-soft, #3A3027);
}
.xp-cta a { color: var(--wine); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────
  Mobile-responsive cleanup pass (applies site-wide)
  ───────────────────────────────────────────────────────────────── */

/* Make every data table horizontally scrollable on small screens */
@media (max-width: 720px) {
 table { min-width: 100%; }
 .xp-cba li { flex-wrap: wrap; gap: 0.2rem; }
 .promo-bar { font-size: 0.75rem; padding: 0.45rem 0.75rem; line-height: 1.3; }
 .promo-bar strong { display: inline-block; }
}

/* Small-screen padding tightening */
@media (max-width: 480px) {
 :root { --gutter: 1rem; }
 .page-head { padding: 3rem 0 2rem; }
 .page-head h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
 .nav-actions .btn { padding: 0.5rem 0.85rem; font-size: 0.85rem; }
 .nav-actions .btn-primary { display: none; }  /* hamburger handles it */
 .xp-panel { padding: 1rem; }
}

/* MC strip on small screens */
@media (max-width: 720px) {
 .mc-strip { flex-wrap: wrap; height: auto; padding: 0.6rem 0.75rem; gap: 0.5rem; }
 .mc-strip canvas { width: 100% !important; height: 36px !important; order: -1; }
 .mc-pick-hint { display: none; }
}

/* Hero tightening on phones */
@media (max-width: 520px) {
 .hero { padding-top: 2.5rem; padding-bottom: 3rem; }
 .hero h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
 .hero-ctas { flex-direction: column; align-items: stretch; }
 .hero-ctas .btn { width: 100%; text-align: center; }
}

/* Footer tightening */
@media (max-width: 480px) {
 .footer-grid { gap: 1.5rem; }
 .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
}

/* Touch target compliance: 44x44 minimum on interactive elements */
@media (max-width: 720px) {
 .btn { min-height: 44px; }
 .nav-links a { padding: 0.65rem 0; }
 .menu-toggle { width: 44px; height: 44px; }
}

/* ─── Explore: tooltip help chip ─── */
.xp-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--clay);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--f-body);
  cursor: help;
  margin-right: 0.35rem;
  vertical-align: middle;
  position: relative;
  flex-shrink: 0;
  outline: none;
}
.xp-help:hover, .xp-help:focus { background: var(--wine); }
.xp-help-pop {
  display: none;
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  left: 0;
  width: min(320px, 70vw);
  padding: 0.7rem 0.85rem;
  background: white;
  color: var(--ink);
  border: 1px solid var(--divider);
  border-left: 3px solid var(--wine);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  font-weight: 400;
  font-size: 0.82rem;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  cursor: default;
}
.xp-help-pop strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.xp-help-pop .xp-help-meaning,
.xp-help-pop .xp-help-impact { display: block; }
.xp-help-pop .xp-help-impact { margin-top: 0.45rem; color: var(--ink-soft, #3A3027); }
.xp-help-pop em { color: var(--wine); font-style: normal; font-weight: 600; }
.xp-help:hover .xp-help-pop,
.xp-help:focus .xp-help-pop,
.xp-help:focus-within .xp-help-pop { display: block; }

/* Pin tooltip to right edge if it would overflow on mobile */
@media (max-width: 520px) {
  .xp-help-pop { left: auto; right: 0; }
}

/* Disclaimer / explanatory note blocks */
.xp-note {
  background: var(--bone);
  border-left: 3px solid var(--clay);
  padding: 0.75rem 0.95rem;
  margin: 0.6rem 0 1rem 0;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--ink-soft, #3A3027);
  border-radius: 0 3px 3px 0;
}
.xp-note strong { color: var(--ink); }
.xp-note-thin { background: transparent; border: 0; padding: 0.2rem 0 0.7rem 0; font-size: 0.8rem; }

/* MC re-run button */
.xp-mc-iter {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--gray, #958876);
  letter-spacing: 0;
  margin-left: 0.4rem;
}
.xp-mc-run {
  float: right;
  padding: 0.4rem 0.85rem;
  background: var(--wine);
  color: white;
  border: 1px solid var(--wine);
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: -2px;
  letter-spacing: 0;
}
.xp-mc-run:hover { background: var(--wine-dk, #4A1A26); }
@media (max-width: 520px) {
  .xp-mc-run { float: none; display: block; margin: 0.5rem 0 0; }
}

/* ─── MC histogram ─── */
.xp-hist-wrap {
  margin: 1rem 0 0.5rem 0;
  padding: 0.85rem 1rem 1rem;
  background: var(--bone);
  border-radius: 4px;
}
.xp-hist-title {
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  color: var(--ink-soft, #3A3027);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.xp-hist {
  display: block;
  width: 100%;
  height: 180px;
  background: white;
  border: 1px solid var(--divider);
  border-radius: 3px;
}
.xp-hist-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  margin-top: 0.6rem;
  font-size: 0.75rem;
  color: var(--ink-soft, #3A3027);
}
.xp-hist-sw {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: 0.35rem;
  vertical-align: middle;
}
@media (max-width: 520px) {
  .xp-hist { height: 140px; }
  .xp-hist-legend { gap: 0.5rem 1rem; font-size: 0.7rem; }
}

/* ─── Demo / illustrative disclaimers ─── */
.demo-disclaimer {
  margin-top: 1.5rem;
  padding: 0.95rem 1.1rem;
  background: #FFF4D4;
  border: 1px solid #E8C478;
  border-left: 3px solid var(--wine);
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: 60rem;
}
.demo-disclaimer strong { color: var(--wine); }
.demo-disclaimer em { color: var(--ink); font-style: italic; font-weight: 600; }

.mc-illustrative {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.15rem 0.45rem;
  background: rgba(107, 39, 55, 0.08);
  color: var(--wine);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(107, 39, 55, 0.25);
  border-radius: 2px;
  cursor: help;
}
@media (max-width: 720px) {
  .mc-illustrative { display: none; }  /* keep mobile MC strip tidy */
}

/* ─── Acronym tooltips (auto-injected by acronyms.js) ─── */
abbr.jargon {
  text-decoration: none;
  border-bottom: 1px dotted var(--clay);
  cursor: help;
  font-style: inherit;
  color: inherit;
  font-weight: inherit;
}
abbr.jargon:hover, abbr.jargon:focus {
  border-bottom-color: var(--wine);
  background: rgba(181, 112, 74, 0.08);
}

/* ─── Industry overview section on Explore page ─── */
.xp-industry {
  background: white;
  border: 1px solid var(--divider);
  border-radius: 6px;
  padding: 2rem 2.25rem;
  margin: 1.25rem 0 3rem 0;
  position: relative;
}
/* Visual break before calculations start */
.xp-industry::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.5rem;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: var(--clay);
  opacity: 0.55;
}
.xp-industry .xp-h3 {
  font-family: var(--f-display);
  font-size: 1.5rem;
  color: var(--ink);
  margin: 0 0 0.5rem 0;
  border-bottom: 0;
  padding-bottom: 0;
}
.xp-industry-intro {
  font-size: 1.05rem;
  color: var(--ink-soft, #3A3027);
  line-height: 1.55;
  margin: 0.75rem 0 1.75rem 0;
  max-width: 60rem;
  font-style: italic;
  border-left: 3px solid var(--clay);
  padding-left: 1rem;
}
.xp-industry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  margin: 1rem 0;
}
@media (max-width: 760px) {
  .xp-industry-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .xp-industry { padding: 1.25rem 1.4rem; }
}
.xp-industry-card {
  display: block;
}
.xp-industry-card-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--divider);
}
.xp-industry-icon {
  display: inline-flex;
  width: 32px; height: 32px;
  align-items: center;
  justify-content: center;
  background: var(--bone);
  border-radius: 50%;
  color: var(--wine);
  flex-shrink: 0;
}
.xp-industry-card-title {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--wine);
  margin: 0;
  letter-spacing: 0.01em;
}
.xp-industry-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft, #3A3027);
}
.xp-industry-sources {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--divider);
  font-size: 0.78rem;
  color: var(--gray, #958876);
  line-height: 1.5;
}
.xp-industry-sources strong {
  color: var(--ink);
  font-weight: 600;
  margin-right: 0.4rem;
}

/* ─── Subtle shadows on key cards / panels ─── */
.xp-panel,
.xp-card,
.xp-industry,
.xp-industry-card,
.xp-kpi,
.xp-hist-wrap,
.kpi,
.card,
.product-card,
.tier-card,
.demo-disclaimer {
  box-shadow:
  0 1px 2px rgba(30, 24, 19, 0.04),
  0 4px 12px rgba(30, 24, 19, 0.05);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.xp-card:hover,
.card:hover,
.product-card:hover,
.tier-card:hover {
  box-shadow:
  0 2px 4px rgba(30, 24, 19, 0.06),
  0 10px 24px rgba(107, 39, 55, 0.10);
  transform: translateY(-1px);
}
.xp-industry {
  box-shadow:
  0 1px 2px rgba(30, 24, 19, 0.04),
  0 6px 18px rgba(30, 24, 19, 0.06);
}
.xp-help-pop {
  box-shadow: 0 8px 24px rgba(30, 24, 19, 0.12);
}

/* Product card feature bullets */
.product-features {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 1rem 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--navy-80, #3A3027);
}
.product-features li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.35rem;
}
.product-features li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55rem;
  width: 6px; height: 6px;
  background: var(--clay);
  border-radius: 50%;
  transform: rotate(0deg);
}
.product-features abbr.jargon {
  font-style: inherit;
  color: inherit;
}