/* ═══════════════════════════════════════════════════════════
   HERO MASTER DESIGN SYSTEM — Breaking The Scroll
   Applied site-wide. Hero & nav use page-level rules.
   ═══════════════════════════════════════════════════════════ */

:root {
  --cin-bg: #05070A;
  --cin-bg2: #0B1118;
  --cin-card: linear-gradient(180deg, #18110F 0%, #0A0A0B 100%);
  --cin-card-hover: linear-gradient(180deg, #24150F 0%, #111111 100%);
  --cin-card-border: rgba(255, 122, 26, 0.18);
  --cin-card-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 40px rgba(255, 106, 0, 0.08);
  --cin-card-shadow-hover: 0 28px 72px rgba(0, 0, 0, 0.52), 0 0 56px rgba(255, 106, 0, 0.16);
  --cin-accent: #FF6A00;
  --cin-accent2: #FF8A3D;
  --cin-glow: #FFB366;
  --cin-icon: #FF7A1A;
  --cin-text: #FFFFFF;
  --cin-muted: rgba(255, 255, 255, 0.72);
  --cin-border: rgba(255, 122, 26, 0.18);
  --cin-radius: 24px;
  --cin-btn-radius: 12px;
  --cin-blur: 16px;
  --cin-section-pad: clamp(120px, 14vw, 160px);
  --cin-shadow: var(--cin-card-shadow);
  --cin-shadow-hover: var(--cin-card-shadow-hover);
  --cin-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --cin-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Global canvas (continuous cinematic bg) ── */
html,
body {
  background: var(--cin-bg) !important;
  color: var(--cin-text) !important;
}

body {
  background:
    radial-gradient(1100px 620px at 82% 20%, rgba(255, 106, 0, 0.16), transparent 60%),
    radial-gradient(700px 420px at 18% 72%, rgba(255, 138, 61, 0.08), transparent 58%),
    linear-gradient(180deg, var(--cin-bg), var(--cin-bg2) 45%, var(--cin-bg)) !important;
  line-height: 1.62 !important;
  font-family: var(--cin-sans) !important;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.45) 100%);
}

/* ── Sections: seamless continuation of hero ── */
main section:not(.hero),
section.band,
section.buy,
section.author,
section.cta,
.method-section,
.content-section,
.page-section {
  background: transparent !important;
  border-block-color: rgba(255, 255, 255, 0.06) !important;
  padding-block: var(--cin-section-pad) !important;
  position: relative;
}

main section:not(.hero)::before,
section.band::before,
section.buy::before,
section.author::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 20% 40%, rgba(255, 106, 0, 0.09), transparent 58%),
    radial-gradient(ellipse 45% 35% at 80% 60%, rgba(255, 138, 61, 0.05), transparent 55%);
  opacity: 1 !important;
  z-index: 0;
}

main section:not(.hero) > .wrap,
main section:not(.hero) > .container,
section.band > .wrap {
  position: relative;
  z-index: 1;
}

/* Kill legacy light / navy section fills */
.premise-section,
#inside,
#testimonials,
#newsletter,
#community,
#tools,
#challenge,
#buy,
.author,
.cta,
.luxury-transition,
.method-section,
.insight-section,
.hub-section {
  background: transparent !important;
}

/* ── Typography ── */
h1, h2, h3, .serif, .hero-title, .section-title {
  font-family: var(--cin-serif) !important;
  color: var(--cin-text) !important;
}

.section-kicker,
.eyebrow,
.card-kicker,
.section-label,
.hero-badge {
  color: var(--cin-accent) !important;
  font-family: var(--cin-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
}

.section-head h2,
.section-title,
.premise-section h2,
.method-content h2,
.newsletter-box h2,
.author-box h2,
.buy-panel h2,
.cta h2 {
  font-family: var(--cin-serif) !important;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  color: var(--cin-text) !important;
}

p, .lede, .hero-copy, .hero-subtitle, .section-desc, .muted {
  color: var(--cin-muted) !important;
  font-family: var(--cin-sans) !important;
}

.lede, .section-desc {
  font-size: 1.1rem !important;
  line-height: 1.7 !important;
  max-width: 720px;
}

.section-head {
  margin-bottom: 56px !important;
  padding-bottom: 28px !important;
}

.section-head::after,
.section-divider,
.eyebrow::before {
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 24px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cin-accent), var(--cin-accent2)) !important;
}

/* ── Unified card system ── */
.quote-panel,
.principle,
.diagram-frame,
.resource-card,
.challenge-card,
.tool-card,
.testimonial,
.newsletter-box,
.community-card,
.buy-panel,
.part,
.format-grid article,
.community-stats .quote-panel,
.author-box,
.card,
.question-card,
.insight-card,
.result-panel,
.certificate-card,
.ai-mirror-card,
.completed-panel,
.day-card-content,
.panel,
.bp-item,
.hub-card,
.day-card,
.progress-card,
.tool-panel {
  background: linear-gradient(180deg, #18110F 0%, #0A0A0B 100%) !important;
  border: 1px solid rgba(255, 122, 26, 0.18) !important;
  border-radius: var(--cin-radius) !important;
  backdrop-filter: blur(var(--cin-blur)) !important;
  -webkit-backdrop-filter: blur(var(--cin-blur)) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 40px rgba(255, 106, 0, 0.08) !important;
  color: var(--cin-text) !important;
  transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease, background 300ms ease !important;
}

.quote-panel:hover,
.principle:hover,
.challenge-card:hover,
.tool-card:hover,
.testimonial:hover,
.part:hover,
.format-grid article:hover,
.community-stats .quote-panel:hover,
.author-box:hover,
.newsletter-box:hover,
.buy-panel:hover,
.card:hover,
.question-card:hover,
.hub-card:hover,
.day-card:hover {
  transform: translateY(-8px) !important;
  background: linear-gradient(180deg, #24150F 0%, #111111 100%) !important;
  border-color: rgba(255, 106, 0, 0.45) !important;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.52), 0 0 56px rgba(255, 106, 0, 0.16) !important;
}

/* Remove beige / white card fills */
.quote-panel,
.buy-panel,
.author-box,
.diagram-frame,
.format-grid article,
.message,
.email-form {
  background: linear-gradient(180deg, #18110F 0%, #0A0A0B 100%) !important;
}

/* Part cards — warm cinematic (no navy) */
.part,
.part:nth-child(2),
.part:nth-child(3),
.part:nth-child(4) {
  background: linear-gradient(180deg, #18110F 0%, #0A0A0B 100%) !important;
  color: var(--cin-text) !important;
}

.part small { color: var(--cin-accent) !important; }
.part h3 { color: var(--cin-text) !important; font-family: var(--cin-serif) !important; }
.part p { color: var(--cin-muted) !important; }
.part b { color: var(--cin-accent2) !important; }

/* Quote panels */
.quote-panel p,
.testimonial p {
  color: var(--cin-text) !important;
  font-family: var(--cin-serif) !important;
}

.quote-panel span {
  color: var(--cin-accent2) !important;
}

/* ── Buttons (match hero) ── */
.button,
.btn,
button.btn,
a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 54px !important;
  padding: 0 28px !important;
  border-radius: var(--cin-btn-radius) !important;
  font-family: var(--cin-sans) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  transition: transform 260ms ease, box-shadow 260ms ease, background 260ms ease, border-color 260ms ease !important;
}

.button.primary,
.button.accent,
.btn-accent,
.btn-primary,
.accent,
.accent-lg,
.nav-cta {
  background: linear-gradient(135deg, var(--cin-accent), var(--cin-accent2)) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 36px rgba(255, 106, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.button.primary:hover,
.button.accent:hover,
.btn-accent:hover,
.nav-cta:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 44px rgba(255, 106, 0, 0.5) !important;
}

.button.secondary,
.btn-secondary,
.button:not(.primary):not(.accent):not(.accent-lg):not(.nav-cta) {
  background: linear-gradient(180deg, rgba(24, 17, 15, 0.85) 0%, rgba(10, 10, 11, 0.9) 100%) !important;
  color: var(--cin-text) !important;
  border: 1px solid rgba(255, 122, 26, 0.18) !important;
  backdrop-filter: blur(var(--cin-blur)) !important;
  -webkit-backdrop-filter: blur(var(--cin-blur)) !important;
  box-shadow: none !important;
  min-height: 54px !important;
  padding: 0 24px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}

.button.secondary:hover,
.btn-secondary:hover {
  background: linear-gradient(180deg, #24150F 0%, #111111 100%) !important;
  border-color: rgba(255, 106, 0, 0.35) !important;
  transform: translateY(-3px) !important;
}

/* ── Icons (outline, orange accent) ── */
.principle b svg,
.tool-icon svg,
.feature-chip svg,
.button svg:not([fill]),
.author-social a svg,
.tool-card a + svg,
svg[stroke]:not(.stars svg) {
  stroke: var(--cin-accent) !important;
  stroke-width: 1.75 !important;
}

.tool-icon,
.principle b {
  background: rgba(255, 106, 0, 0.10) !important;
  border: 1px solid rgba(255, 106, 0, 0.25) !important;
  border-radius: 14px !important;
  color: var(--cin-icon) !important;
  box-shadow: 0 0 20px rgba(255, 106, 0, 0.1) !important;
}

.principle b svg,
.tool-icon svg {
  stroke: #FF7A1A !important;
}

.feature-chip,
.chip {
  background: linear-gradient(180deg, rgba(24, 17, 15, 0.9) 0%, rgba(10, 10, 11, 0.95) 100%) !important;
  border: 1px solid rgba(255, 122, 26, 0.18) !important;
  color: var(--cin-muted) !important;
  backdrop-filter: blur(var(--cin-blur)) !important;
}

.feature-chip:hover,
.chip:hover {
  border-color: rgba(255, 106, 0, 0.28) !important;
  box-shadow: 0 6px 18px rgba(255, 106, 0, 0.12) !important;
  transform: translateY(-2px);
}

/* Challenge / steps */
.day-num,
.step span,
.method .step span {
  background: linear-gradient(135deg, var(--cin-accent), var(--cin-accent2)) !important;
  color: #fff !important;
  border-radius: 12px !important;
}

.challenge-card h3,
.step h3,
.tool-card h3 { color: var(--cin-text) !important; }

.challenge-card p,
.step p,
.tool-card p { color: var(--cin-muted) !important; }

.tool-card a { color: var(--cin-accent) !important; font-weight: 700 !important; }
.tool-card a:hover { color: var(--cin-glow) !important; }

/* Testimonials */
.testimonial {
  border-left: 3px solid var(--cin-accent) !important;
}

.reader > span {
  background: rgba(255, 106, 0, 0.15) !important;
  color: var(--cin-accent) !important;
  border: 1px solid rgba(255, 106, 0, 0.25) !important;
}

.reader strong { color: var(--cin-text) !important; }
.reader small { color: var(--cin-muted) !important; }
.stars svg { fill: var(--cin-accent) !important; }

.community-stats b {
  color: var(--cin-accent) !important;
  font-family: var(--cin-serif) !important;
  text-shadow: 0 0 30px rgba(255, 106, 0, 0.3);
}

.message {
  background: linear-gradient(180deg, #18110F 0%, #0A0A0B 100%) !important;
  border: 1px solid rgba(255, 122, 26, 0.18) !important;
  color: var(--cin-muted) !important;
  border-radius: 16px !important;
}

.message:nth-child(even) {
  background: linear-gradient(180deg, #1E1510 0%, #0C0A0A 100%) !important;
  border-color: rgba(255, 106, 0, 0.22) !important;
  color: var(--cin-text) !important;
}

/* Newsletter form */
.email-form {
  background: rgba(5, 7, 10, 0.5) !important;
  border: 1px solid var(--cin-border) !important;
  border-radius: var(--cin-btn-radius) !important;
}

.email-form:focus-within {
  border-color: rgba(255, 106, 0, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.12) !important;
}

.email-form input {
  color: var(--cin-text) !important;
  background: transparent !important;
}

.email-form input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Author */
.author-avatar {
  background: linear-gradient(135deg, rgba(255, 106, 0, 0.2), rgba(24, 17, 15, 0.95)) !important;
  border: 2px solid rgba(255, 106, 0, 0.4) !important;
  color: var(--cin-accent) !important;
  box-shadow: 0 0 30px rgba(255, 106, 0, 0.15) !important;
}

.author-signature { color: var(--cin-accent2) !important; }

/* CTA */
.cta {
  background: transparent !important;
  border-top: 1px solid var(--cin-border) !important;
  padding-block: 96px !important;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255, 106, 0, 0.12), transparent 60%);
}

/* Footer */
footer {
  background: linear-gradient(180deg, var(--cin-bg2), var(--cin-bg)) !important;
  border-top: 1px solid var(--cin-border) !important;
  color: var(--cin-muted) !important;
}

.footer-brand strong,
.footer-col h4 { color: var(--cin-text) !important; }

.footer-col a,
.footer-brand p { color: var(--cin-muted) !important; }

.footer-col a:hover,
.footer-social a:hover,
.nav-link.active,
.nav-center a.active { color: var(--cin-accent) !important; }

.footer-social a {
  background: linear-gradient(180deg, #18110F 0%, #0A0A0B 100%) !important;
  border: 1px solid rgba(255, 122, 26, 0.18) !important;
  border-radius: 12px !important;
}

.footer-social a:hover {
  background: rgba(255, 106, 0, 0.12) !important;
  border-color: rgba(255, 106, 0, 0.3) !important;
}

/* Nav (glass on scroll only — do not restyle hero) */
.site-header,
.navbar {
  background: transparent !important;
  border-bottom-color: transparent !important;
}

.site-header.scrolled,
.navbar.scrolled {
  background: rgba(11, 17, 24, 0.72) !important;
  backdrop-filter: blur(var(--cin-blur)) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(var(--cin-blur)) saturate(1.3) !important;
  border-bottom: 1px solid var(--cin-border) !important;
}

/* Buy section specifics */
.buy-panel ul { color: var(--cin-muted) !important; }
.buy-panel li::before { background: var(--cin-accent) !important; }
.format-grid strong { color: var(--cin-text) !important; }
.format-grid span { color: var(--cin-muted) !important; }

.format-grid article:first-child {
  border-color: rgba(255, 106, 0, 0.4) !important;
  box-shadow: 0 0 24px rgba(255, 106, 0, 0.1) !important;
}

@media (max-width: 980px) {
  :root { --cin-section-pad: clamp(88px, 12vw, 120px); }
}

/* ═══ CHALLENGE & SUBPAGES (hero nav #navbar excluded) ═══ */

.site-header:not(#navbar) {
  background: rgba(11, 17, 24, 0.85) !important;
  backdrop-filter: blur(var(--cin-blur)) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(var(--cin-blur)) saturate(1.2) !important;
  border-bottom: 1px solid var(--cin-border) !important;
}

.site-header:not(#navbar) .nav-links a {
  color: var(--cin-muted) !important;
}

.site-header:not(#navbar) .nav-links a:hover {
  color: var(--cin-text) !important;
}

.question-card,
.option,
.insight-card,
.result-panel,
.progress-strip,
.progress-track,
.progress-bar-bg,
.preview-day-item,
.form-select,
.form-input,
input[type="text"],
input[type="email"],
textarea,
.modal-content,
.certificate-card,
.certificate,
.blueprint-grid .bp-item,
.day-num-badge,
.hub-glow,
.state-section,
.trophy-glow,
.ai-mirror-card,
.completed-panel,
.answered-check {
  background: linear-gradient(180deg, #18110F 0%, #0A0A0B 100%) !important;
  border: 1px solid rgba(255, 122, 26, 0.18) !important;
  color: var(--cin-text) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 40px rgba(255, 106, 0, 0.08) !important;
}

.question-card:hover,
.option:hover {
  border-color: rgba(255, 106, 0, 0.28) !important;
}

.option.selected,
.option.is-selected,
.option[aria-pressed="true"],
.option.active {
  border-color: rgba(255, 106, 0, 0.55) !important;
  background: rgba(255, 106, 0, 0.1) !important;
  box-shadow: 0 0 20px rgba(255, 106, 0, 0.12) !important;
}

.option-radio {
  border: 2px solid rgba(255, 106, 0, 0.4) !important;
  background: transparent !important;
}

.option.selected .option-radio,
.option.is-selected .option-radio,
.option.active .option-radio {
  background: var(--cin-accent) !important;
  border-color: var(--cin-accent) !important;
}

.progress-fill,
.progress-bar-fill,
.progress-bar-fill {
  background: linear-gradient(90deg, var(--cin-accent), var(--cin-accent2)) !important;
}

.progress-track,
.progress-bar-bg {
  background: linear-gradient(180deg, #18110F 0%, #0A0A0B 100%) !important;
  border: 1px solid rgba(255, 122, 26, 0.18) !important;
}

.progress-strip {
  border-block: 1px solid var(--cin-border) !important;
  background: rgba(5, 7, 10, 0.6) !important;
}

.question-number,
.day-num-badge {
  background: linear-gradient(135deg, var(--cin-accent), var(--cin-accent2)) !important;
  color: #fff !important;
}

.answered-check {
  background: rgba(255, 106, 0, 0.2) !important;
  color: var(--cin-accent) !important;
  border-color: rgba(255, 106, 0, 0.4) !important;
}

.form-label,
.bp-label,
.preview-day-num,
.cert-kicker {
  color: var(--cin-accent) !important;
}

.bp-val,
.cert-recipient,
.cert-title {
  color: var(--cin-text) !important;
  font-family: var(--cin-serif) !important;
}

.bp-desc,
.preview-day-desc,
.cert-text,
.hero-subtitle {
  color: var(--cin-muted) !important;
}

/* Hide beige paper grid on challenge bodies only */
body:has(.questions-area)::before,
body:has(.hub-container)::before,
body:has(.blueprint-grid)::before {
  opacity: 0 !important;
  background: none !important;
}

/* ── Buy button — shopping cart icon (contrast on orange gradient) ── */
.nav-cta svg:has(path[d*="2.68 13.39"]),
.nav-cta svg:has(path[d*="2.68 13.39"]) circle,
.nav-cta svg:has(path[d*="2.68 13.39"]) path,
.button.primary svg:has(path[d*="2.68 13.39"]),
.button.primary svg:has(path[d*="2.68 13.39"]) circle,
.button.primary svg:has(path[d*="2.68 13.39"]) path,
.btn-primary svg:has(path[d*="2.68 13.39"]),
.btn-primary svg:has(path[d*="2.68 13.39"]) circle,
.btn-primary svg:has(path[d*="2.68 13.39"]) path,
.nav-cta:hover svg:has(path[d*="2.68 13.39"]),
.nav-cta:hover svg:has(path[d*="2.68 13.39"]) circle,
.nav-cta:hover svg:has(path[d*="2.68 13.39"]) path,
.button.primary:hover svg:has(path[d*="2.68 13.39"]),
.button.primary:hover svg:has(path[d*="2.68 13.39"]) circle,
.button.primary:hover svg:has(path[d*="2.68 13.39"]) path,
.btn-primary:hover svg:has(path[d*="2.68 13.39"]),
.btn-primary:hover svg:has(path[d*="2.68 13.39"]) circle,
.btn-primary:hover svg:has(path[d*="2.68 13.39"]) path,
.nav-cta:focus-visible svg:has(path[d*="2.68 13.39"]),
.nav-cta:focus-visible svg:has(path[d*="2.68 13.39"]) circle,
.nav-cta:focus-visible svg:has(path[d*="2.68 13.39"]) path,
.button.primary:focus-visible svg:has(path[d*="2.68 13.39"]),
.button.primary:focus-visible svg:has(path[d*="2.68 13.39"]) circle,
.button.primary:focus-visible svg:has(path[d*="2.68 13.39"]) path,
.btn-primary:focus-visible svg:has(path[d*="2.68 13.39"]),
.btn-primary:focus-visible svg:has(path[d*="2.68 13.39"]) circle,
.btn-primary:focus-visible svg:has(path[d*="2.68 13.39"]) path {
  stroke: #111111 !important;
  fill: none !important;
  color: #111111 !important;
}