/* Slow Down Practice Page Styles */

:root {
  /* Slow Down brand core palette */
  --sd-obsidian: #0D0D0D; /* OBSIDIAN VOID (Background) */
  --sd-obsidian-rgb: 13, 13, 13;

  --sd-blood-jasper: #8A1C1C; /* BLOOD JASPER (Primary Line) */
  --sd-blood-jasper-rgb: 138, 28, 28;

  --sd-zion-gold: #C5A059; /* ZION GOLD (Highlights) */
  --sd-zion-gold-rgb: 197, 160, 89;

  --sd-deep-forest: #1B3F2F; /* DEEP FOREST (Shadows) */
  --sd-deep-forest-rgb: 27, 63, 47;

  --sd-glitch-cyan: #00FFFF; /* GLITCH CYAN (The Spark) - use sparingly (<=2%) */
  --sd-glitch-cyan-rgb: 0, 255, 255;

  /* Map older/used vars to the canonical Slow Down palette */
  --se-white: #F9F4EB;
  --se-gold: var(--sd-zion-gold);
  --se-red: var(--sd-blood-jasper);
  --se-cyan: var(--sd-glitch-cyan);
  --se-brown: var(--sd-zion-gold);
}

/* Hide header for this page */
body.page-id-1632 #masthead,
body.page-id-1632 header,
body.page-id-1632 .darknews-header {
  display: none !important;
}

/* Hero Section */
.se-hero {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  padding: 4rem 2rem;
  position: relative;
  overflow: hidden;
}

.se-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23F9F4EB" opacity="0.03"/><circle cx="75" cy="75" r="1" fill="%23F9F4EB" opacity="0.03"/><circle cx="50" cy="10" r="0.5" fill="%23F9F4EB" opacity="0.02"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  pointer-events: none;
}

.se-hero-title {
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
}

.se-hero-title-main {
  display: block;
  color: var(--se-white);
  font-size: clamp(36px, 6vw, 68px);
}

.se-hero-title-sub {
  display: block;
  color: var(--se-gold);
  font-size: clamp(18px, 3.5vw, 28px);
  letter-spacing: .08em;
  margin-top: 6px;
}

.se-hero-lead {
  font-family: 'Roboto Mono', monospace;
  color: var(--se-white);
  max-width: 56rem;
  margin: 0 auto;
  font-size: 1.125rem;
  line-height: 1.6;
}

/* Essence Section */
.se-essence {
  background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
  padding: 4rem 2rem;
}

.se-value {
  padding: 20px 20px !important;
  padding-top: 20px !important;
  padding-right: 20px !important;
  padding-bottom: 20px !important;
  padding-left: 20px !important;
}

.se-essence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.se-essence-card {
  background: rgba(249, 244, 235, 0.05);
  border: 1px solid rgba(197, 160, 89, 0.2);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
}

.se-essence-card:hover {
  border-color: var(--se-gold);
  box-shadow: 0 0 20px rgba(197, 160, 89, 0.3);
}

.se-essence-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  color: var(--se-brown);
}

.se-essence-title {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  color: var(--se-white);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.se-essence-text {
  color: var(--se-white);
  line-height: 1.6;
}

/* Override for essence section columns */
.se-value-columns {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 32px !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.se-value-media {
  flex: 2 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

.se-value-text {
  flex: 3 !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  color: var(--se-white) !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  text-align: justify !important;
  text-justify: inter-word !important;
  hyphens: auto !important;
}

.se-value-media img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
  max-width: 520px !important;
}

.se-value-subheading {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  color: var(--se-gold) !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  margin: 10px 0 !important;
}

/* Mobile responsive */
@media (max-width: 900px) {
  .se-value-columns {
    flex-direction: column !important;
    gap: 18px !important;
  }
  /* Mobile: center the lion image and constrain its size so it remains visually balanced */
  .se-value-media {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }
  .se-value-media img {
    max-width: 360px !important;
    width: auto !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
}

/* Protocol Section */
.se-protocol {
  background: none !important;
  padding: 20px !important;
  max-width: none !important;
  width: 100% !important;
}

.se-protocol-title {
  color: var(--se-white) !important;
}

.se-protocol-title-main {
  color: var(--se-white) !important;
}

.se-protocol-title-sub {
  color: var(--se-gold) !important;
}

.se-protocol-text {
  color: var(--se-white) !important;
}

.se-protocol-step {
  background: rgba(249, 244, 235, 0.05) !important;
  border: 1px solid rgba(197, 160, 89, 0.2) !important;
}

.se-protocol-step-number {
  color: var(--se-gold) !important;
}

.se-protocol-step-title {
  color: var(--se-white) !important;
}

.se-protocol-step-text {
  color: var(--se-white) !important;
}

.se-protocol-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.se-protocol-title {
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 2rem;
}

.se-protocol-title-main {
  display: block;
  color: var(--se-white);
  font-size: clamp(36px, 6vw, 68px);
}

.se-protocol-title-sub {
  display: block;
  color: var(--se-gold);
  font-size: clamp(18px, 3.5vw, 28px);
  letter-spacing: .08em;
  margin-top: 6px;
}

.se-protocol-text {
  color: var(--se-white);
  line-height: 1.8;
  font-size: 1.125rem;
  margin-bottom: 2rem;
}

.se-protocol-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.se-protocol-step {
  background: rgba(249, 244, 235, 0.05);
  border: 1px solid rgba(197, 160, 89, 0.2);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
}

.se-protocol-step-number {
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  font-size: 2rem;
  color: var(--se-gold);
  margin-bottom: 1rem;
}

.se-protocol-step-title {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  color: var(--se-white);
  font-size: 1.25rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.se-protocol-step-text {
  color: var(--se-white);
  line-height: 1.6;
}

/* Guide Section */
.se-guide {
  background: none !important;
  padding: 20px !important;
  max-width: none !important;
  width: 100% !important;
}

.se-guide-title {
  color: var(--se-white) !important;
}

.se-guide-title-main {
  color: var(--se-white) !important;
}

.se-guide-title-sub {
  color: #C5A059 !important;
}

.se-guide-text {
  color: var(--se-white) !important;
}

.se-guide-quote {
  color: var(--se-white) !important;
}

.se-guide-signature {
  color: var(--se-gold) !important;
}

.se-guide-title {
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 2rem;
}

.se-guide-title-main {
  display: block;
  color: var(--se-white);
  font-size: clamp(36px, 6vw, 68px);
}

.se-guide-title-sub {
  display: block;
  color: var(--se-gold);
  font-size: clamp(18px, 3.5vw, 28px);
  letter-spacing: .08em;
  margin-top: 6px;
}

.se-guide-content {
  max-width: 1000px;
  margin: 0 auto;
}

.se-guide-text {
  color: var(--se-white);
  line-height: 1.8;
  font-size: 1.125rem;
  margin-bottom: 2rem;
}

.se-guide-quote {
  font-family: 'Roboto Mono', monospace;
  color: var(--se-white);
  font-size: 1.25rem;
  text-align: center;
  max-width: 48rem;
  margin: 0 auto;
  font-style: italic;
}

.se-guide-signature {
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  color: var(--se-gold);
  text-align: center;
  margin-top: 2rem;
}

/* Invest Section */
.se-invest {
  /* remove background gradient so the section is transparent and inherits the page background */
  background: transparent !important;
  background-image: none !important;
  padding: 4rem 2rem;
}

.se-invest-lead {
  font-family: 'Roboto Mono', monospace;
  color: var(--se-white);
  max-width: 56rem;
  margin: 0 auto;
  font-size: 1.125rem;
  line-height: 1.6;
}

.se-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 3rem auto 0;
}

.se-price-card {
  background: rgba(249, 244, 235, 0.05);
  border: 1px solid rgba(197, 160, 89, 0.2);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  position: relative; /* Added for absolute positioning of pseudo-elements */
  overflow: hidden; /* Ensure content does not overflow */
}

.se-price-card:hover {
  border-color: var(--se-gold);
  box-shadow: 0 0 20px rgba(197, 160, 89, 0.3);
}

.se-price-card-center {
  border-color: var(--se-gold);
  box-shadow: 0 0 20px rgba(197, 160, 89, 0.3);
}

.se-price-recommended {
  /* keep the label inside the card (not overlapping) and centered */
  position: relative; /* flow with document */
  display: inline-block;
  margin: 0 0 1rem 0;
  background: var(--se-gold);
  color: var(--se-white) !important;
  padding: 0.35rem 0.9rem;
  border-radius: 999px; /* pill inside the card */
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 0.825rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.se-price-icon {
  /* don't constrain the icon box so we can display larger logos */
  width: auto;
  height: auto;
  margin: 0 auto 1rem;
  color: var(--se-brown);
  display: flex; /* ensure child is centered */
  justify-content: center;
}

/* ensure raster logo in price cards is sized / centered nicely */
body.page-id-1632 .se-invest .se-price-icon-img{
  /* increase logo size (keeps natural aspect ratio) */
  width: 192px;
  max-width: 100%;
  height: auto !important;
  display: block;
  margin: 0 auto 1rem;
  object-fit: contain;
  filter: none; /* keep original artwork colors */
}

/* on small screens slightly reduce size so cards remain balanced */
@media (max-width: 480px){
  body.page-id-1632 .se-invest .se-price-icon-img{ width: 96px; }
}

/* specifically allow the left (Seed) card icon to be larger and not clipped */
body.page-id-1632 .se-invest .se-price-card-left .se-price-icon{
  width: auto;
  height: auto;
  padding-top: 6px; /* small spacing so logo sits nicely */
}

/* make the seed logo a strict 96x contained square */
body.page-id-1632 .se-invest .se-price-card-left .se-price-icon-img{
  width: 96px !important;
  height: 96px !important;
  max-width: 96px !important;
  object-fit: contain !important; /* ensure full logo visible without distortion */
  display:block;
}

/* --- NEW: per-card text color rules requested by user --- */
/* Left card: make all text consistently white */
body.page-id-1632 .se-invest .se-price-card-left,
body.page-id-1632 .se-invest .se-price-card-left * {
  color: var(--se-white) !important;
}
/* keep the seed outline button readable (white text, white border) */
body.page-id-1632 .se-invest .se-price-card-left .se-price-button.se-outline{
  color: var(--se-white) !important;
  border-color: rgba(255,255,255,.9) !important;
}

/* Center card: make all text the blue/green link color (#798C7A) */
body.page-id-1632 .se-invest .se-price-card-center,
body.page-id-1632 .se-invest .se-price-card-center * {
  color: #798C7A !important;
}
/* the 'recommended' pill should use the same text color as the card text */
body.page-id-1632 .se-invest .se-price-card-center .se-price-recommended{
  color: #798C7A !important;
}
/* ensure dot markers also match the center card color */
body.page-id-1632 .se-invest .se-price-card-center .se-marker{
  color: #798C7A !important;
}

/* Right card: make all text gold (#C5A059) */
body.page-id-1632 .se-invest .se-price-card-right,
body.page-id-1632 .se-invest .se-price-card-right * {
  color: var(--se-gold) !important;
}
/* insist the price number stays gold contrast */
body.page-id-1632 .se-invest .se-price-card-right .se-price-number{
  color: var(--se-gold) !important;
}
/* make markers gold on right card */
body.page-id-1632 .se-invest .se-price-card-right .se-marker{
  color: var(--se-gold) !important;
}

/* ensure the right-card logo matches left-card dimensions */
body.page-id-1632 .se-invest .se-price-card-right .se-price-icon-img{
  width: 96px !important;
  height: 96px !important;
  max-width: 96px !important;
  object-fit: contain !important;
  display:block;
}

/* Hover: make all price-card borders appear white (override previous gold hover) */
/* Hover on price cards should use brand gold (not white) — keep high specificity */
body.page-id-1632 .se-invest .se-price-card:hover{
  border-color: var(--se-gold) !important;
  box-shadow: 0 0 24px rgba(var(--se-gold-rgb),0.22) !important;
}

/* Seed card specific tweaks: white price and button visuals */
body.page-id-1632 .se-invest .se-price-card-left .se-price-number,
body.page-id-1632 .se-invest .se-price-card-left .se-price-note{
  color: var(--se-white) !important;
}

/* make the left-card outline button white and keep text readable */
body.page-id-1632 .se-invest .se-price-card-left .se-price-button.se-outline{
  color: var(--se-white) !important;
  border-color: rgba(255,255,255,.9) !important;
  background: transparent !important;
}

/* ensure hover state stays visible */
body.page-id-1632 .se-invest .se-price-card-left .se-price-button.se-outline:hover{
  background: rgba(255,255,255,0.06) !important;
  color: var(--se-white) !important;
}

/* --- center (founder's) card: remove icon visually and change colors --- */
body.page-id-1632 .se-invest .se-price-card-center .se-price-icon{ display:block; height:18px; margin-bottom:18px; }
body.page-id-1632 .se-invest .se-price-card-center .se-price-icon--empty{ height:18px; }

/* make the 'RECOMMENDED' pill darker (same tone as the card) */
/* center card specific: keep the label visually matching the card but inside */
body.page-id-1632 .se-invest .se-price-card-center .se-price-recommended{
  background: rgba(0,0,0,0.82) !important; /* dark capsule */
  color: var(--se-white) !important;
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 1rem !important; /* ensure spacing inside card */
}

/* change the center card solid button to match the card background (dark) and use gold text */
body.page-id-1632 .se-invest .se-price-card-center .se-price-button.se-solid{
  /* make the Founder's solid CTA use a double green outline like the ticket version */
  background-color: transparent !important;
  border: 3px double var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}

/* On hover for the center card only: keep the button dark (no bright change), and make the card hover color use a deeper 'brand' dark */
body.page-id-1632 .se-invest .se-price-card-center:hover{
  border-color: rgba(13,13,13,1) !important; /* same dark as the card */
  box-shadow: 0 0 16px rgba(0,0,0,0.6) !important;
}

/* ensure center button hover doesn't invert to gold — keep it dark but slightly lighter */
/* make the solid CTA hover match the ticket hover (green tint, white text) */
body.page-id-1632 .se-invest .se-price-card-center .se-price-button.se-solid:hover{
  background: rgba(var(--sd-deep-forest-rgb),0.12) !important;
  border-color: var(--brand-primary) !important;
  color: var(--se-white) !important;
}

/* Founder pass: make the whole card use brand-green as the dominant background */
body.page-id-1632 .se-invest .se-price-card-center{
  /* use the DEEP FOREST color but at 20% opacity so the card is semi-transparent */
  background-color: rgba(var(--sd-deep-forest-rgb), 0.20) !important;
  color: var(--se-white) !important; /* ensure readable text */
  border-color: rgba(var(--sd-deep-forest-rgb), 0.55) !important; /* keep subtle border */
  box-shadow: none !important;
}

/* title, sub and features should be readable (white) on the green card */
body.page-id-1632 .se-invest .se-price-card-center .se-price-title,
body.page-id-1632 .se-invest .se-price-card-center .se-price-sub,
body.page-id-1632 .se-invest .se-price-card-center .se-price-features,
body.page-id-1632 .se-invest .se-price-card-center .se-price-features li{
  color: rgba(255,255,255,0.95) !important;
}

/* amount styling contrast */
body.page-id-1632 .se-invest .se-price-card-center .se-price-number{
  color: var(--se-white) !important;
}

/* Make the small price note ("/ One-Time") white on the center card */
body.page-id-1632 .se-invest .se-price-card-center .se-price-note{
  color: var(--se-white) !important;
}

/* Convert the ticket CTA into a pill-style button visually (hide the svg, keep label) */
body.page-id-1632 .se-invest .se-price-card-center .se-price-button.se-ticket .se-ticket-svg{
  display: none !important; /* hide the ticket background SVG */
}

body.page-id-1632 .se-invest .se-price-card-center .se-price-button.se-ticket{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .6rem !important;
  width: auto !important;
  padding: 0.8rem 1.4rem !important;
  color: var(--se-white) !important;
  text-decoration: none !important;
  position: relative !important;
  border-radius: 999px !important;
  /* use the same background as the RECOMMENDED pill (darker capsule) */
  background: rgba(0,0,0,0.82) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 20px rgba(2, 6, 4, 0.35) !important;
}

/* New: make the Founders Pass button have a double border in the brand green */
body.page-id-1632 .se-invest .se-price-card-center .se-price-button.se-ticket {
  border: 3px double var(--brand-primary) !important;
  background: transparent !important; /* keep pill look, border shows outline */
  color: var(--brand-primary) !important;
}

body.page-id-1632 .se-invest .se-price-card-center .se-price-button.se-ticket:hover{
  background: rgba(var(--sd-deep-forest-rgb),0.12) !important; /* subtle green tint on hover */
  color: var(--se-white) !important;
}

body.page-id-1632 .se-invest .se-price-card-center .se-price-button.se-ticket:hover{
  filter: brightness(.92) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 28px rgba(2, 6, 4, 0.45) !important;
}

/* ensure label is visible inside the pill */
body.page-id-1632 .se-invest .se-price-card-center .se-ticket-label{
  position: relative !important;
  display: inline-block !important;
  color: var(--se-white) !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

/* 'RECOMMENDED' pill tweak for contrast when card is green */
body.page-id-1632 .se-invest .se-price-card-center .se-price-recommended{
  background: rgba(0,0,0,0.82) !important;
  color: var(--se-white) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* card hover — subtle darken and shadow */
body.page-id-1632 .se-invest .se-price-card-center:hover{
  border-color: rgba(0,0,0,0.85) !important;
  box-shadow: 0 0 18px rgba(0,0,0,0.55) !important;
}

/* FINAL OVERRIDES: make sure ALL center-card (founder's pass) text uses the blue/green link color as requested */
body.page-id-1632 .se-invest .se-price-card-center,
body.page-id-1632 .se-invest .se-price-card-center .se-price-title,
body.page-id-1632 .se-invest .se-price-card-center .se-price-sub,
body.page-id-1632 .se-invest .se-price-card-center .se-price-number,
body.page-id-1632 .se-invest .se-price-card-center .se-price-note,
body.page-id-1632 .se-invest .se-price-card-center .se-price-features,
body.page-id-1632 .se-invest .se-price-card-center .se-price-features li,
body.page-id-1632 .se-invest .se-price-card-center .se-marker,
body.page-id-1632 .se-invest .se-price-card-center .se-price-button,
body.page-id-1632 .se-invest .se-price-card-center .se-ticket-label,
body.page-id-1632 .se-invest .se-price-card-center .se-price-recommended {
  color: #798C7A !important;
}

/* also ensure the ticket/button text (which was previously white/gold) follows the center color rule */
body.page-id-1632 .se-invest .se-price-card-center .se-price-button.se-ticket,
body.page-id-1632 .se-invest .se-price-card-center .se-price-button.se-solid{
  color: #798C7A !important;
}


.se-price-title {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  color: var(--se-white);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Ensure price card titles are centered on this page (overrides page-level h3 alignment) */
body.page-id-1632 .se-invest .se-price-title {
  text-align: center !important;
}

.se-price-sub {
  color: var(--se-white);
  margin-bottom: 2rem;
  line-height: 1.6;
  text-align: center !important;
}

.se-price-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 2rem;
}

.se-price-number {
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  font-size: 2.5rem;
  color: var(--se-gold);
}

.se-price-note {
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  color: var(--se-white);
  margin-left: 0.5rem;
}

.se-price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  text-align: left;
}

.se-price-features li {
  color: var(--se-white);
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.se-marker {
  color: var(--se-gold);
  margin-right: 0.5rem;
}

.se-price-button {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 4px;
  text-decoration: none;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: all 0.3s ease;
}

.se-price-button.se-solid {
  background: var(--se-gold);
  color: #1a1a1a;
}

.se-price-button.se-solid:hover {
  background: #b8942a;
}

.se-price-button.se-outline {
  border: 2px solid var(--se-gold);
  color: var(--se-gold);
}

.se-price-button.se-outline:hover {
  background: var(--se-gold);
  color: #1a1a1a;
}

.se-hour {
  /* keep the existing 4rem base but add +50px extra spacing as requested */
  margin-top: calc(4rem + 50px);
}

.se-hour-card {
  background: rgba(138, 28, 28, 0.1);
  border: 1px solid rgba(138, 28, 28, 0.3);
  border-radius: 8px;
  padding: 3rem;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.se-hour-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  color: var(--se-red);
}

.se-hour-title {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  color: var(--se-white);
  font-size: 1.5rem;
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Collapsible / reveal-on-hover design for the Hour card */
/* Default: on hover-capable (desktop) devices the card collapses to show only the header (icon + title) */
/* Default / mobile-first: hide the header totem (that's for the collapsed sandwich) and show the body totem next to the copy
  so small/touch devices present the image beside the paragraph content. Larger hover-capable devices get the collapsed
  header behavior inside the @media rules below. */

body.page-id-1632 .se-hour-card .se-hour-sigil-left{ display: none; }
/* Default: stacked layout for the hour content
  Row 1: .se-hour-top — full width sentence
  Row 2: .se-hour-body-row — two column layout (image + text)
  Row 3: .se-hour-call — large call to action line */
body.page-id-1632 .se-hour-card .se-hour-text{ display: block; text-align: left; }
body.page-id-1632 .se-hour-card .se-hour-top{ font-weight: 600; font-size: clamp(18px, 2.1vw, 28px); color: var(--se-white); margin: 0 0 1rem 0; }
body.page-id-1632 .se-hour-card .se-hour-body-row{ display: flex; gap: 18px; align-items: flex-start; margin-bottom: 1rem; }
/* Default: hide the body totem on mobile — we don't show the image in the stacked view */
body.page-id-1632 .se-hour-card .se-hour-sigil-body{ display: none; flex-shrink: 0; width: 0; }
body.page-id-1632 .se-hour-card .se-hour-body-copy{ flex: 1 1 auto; color: var(--se-white); }

  /* Make the hour body paragraphs justified and work nicely when split into two
     paragraphs for better readability (desktop + mobile). */
  body.page-id-1632 .se-hour-card .se-hour-body-copy p{
    text-align: justify;
    text-justify: inter-word;
    margin-bottom: 1rem;
    hyphens: auto;
  }
/* The final call should be visually centered */
body.page-id-1632 .se-hour-card .se-hour-call{ margin: 0; text-align: center; font-size: clamp(18px, 3.5vw, 42px); line-height: 1; letter-spacing: .05em; color: var(--se-gold); }
body.page-id-1632 .se-hour-card .se-hour-sigil-body .se-hour-sigil-img{ max-height: 64px; height: auto; width: auto; display: block; object-fit: contain; }

@media (hover: hover) and (min-width: 769px) {
  body.page-id-1632 .se-hour-card {
    /* show only header area by default */
    max-height: 150px; /* tall enough for icon + title */
    overflow: hidden;
    transition: max-height 520ms cubic-bezier(.2,.9,.2,1), box-shadow 300ms ease, padding 300ms ease;
    /* center header vertically in the closed state */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    /* give a subtle lift cue */
    cursor: pointer;
  }

  /* visually present the collapsed header as a centered 'sandwich' band. Place the icon inline between two title halves. */
  /* Center the title vertically in the collapsed band by using flex; hide long content from flow so spacing is equal above and below. */
  body.page-id-1632 .se-hour-card{
    display: flex;
    flex-direction: column;
    justify-content: center; /* equal vertical spacing */
    align-items: center;
    position: relative; /* ensure absolute children position correctly */
  }
  body.page-id-1632 .se-hour-card .se-hour-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 3; /* keep header above decorative shapes */
    padding: 0 1rem; /* small horizontal padding so the title sits inside the band */
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0; /* remove default bottom margin so the title sits centered */
  }

  /* left / right title pieces keep compact sizing when closed */
  body.page-id-1632 .se-hour-card .se-hour-title-left,
  body.page-id-1632 .se-hour-card .se-hour-title-right {
    display: inline-block;
    white-space: nowrap;
    font-weight: 700;
    font-size: clamp(16px, 2.2vw, 28px);
    color: var(--se-white);
  }

  /* left totem column shown only in collapsed (sandwich) state — sized to match the title band */
  body.page-id-1632 .se-hour-card .se-hour-sigil-left{
    position: absolute;
    left: 34px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    z-index: 2;
  }

  /* The body totem lives inside the .se-hour-text — hidden while closed and shown on expand (desktop). */
  body.page-id-1632 .se-hour-card .se-hour-sigil-body{
    display: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 240ms ease, transform 240ms ease;
    pointer-events: none;
  }

  body.page-id-1632 .se-hour-card .se-hour-sigil-left .se-hour-sigil-img{
    max-height: 64px; /* cap to match header badge */
    height: auto;
    width: auto;
    display: block;
  }

  /* hide the left totem when the card is expanded */
  body.page-id-1632 .se-hour-card:hover .se-hour-sigil-left,
  body.page-id-1632 .se-hour-card:focus-within .se-hour-sigil-left{
    opacity: 0;
    transform: translateY(-50%) scale(.96);
    transition: opacity 240ms ease, transform 240ms ease;
    pointer-events: none;
  }

  /* On expand, restore the three-row layout and ensure the body-row is a two-column flow */
  body.page-id-1632 .se-hour-card:hover .se-hour-text,
  body.page-id-1632 .se-hour-card:focus-within .se-hour-text{
    position: static; /* bring the content back into flow */
    opacity: 1;
    transform: none;
    pointer-events: auto;
    display: block;
  }
  /* On expand, display the body totem and show it larger so it reads as a full image column */
  body.page-id-1632 .se-hour-card:hover .se-hour-sigil-body,
  body.page-id-1632 .se-hour-card:focus-within .se-hour-sigil-body{
    display: block;
    position: static; /* flow with the .se-hour-text */
    opacity: 1;
    transform: none;
    pointer-events: auto;
    width: 220px; /* larger image column on desktop */
    flex: 0 0 220px;
  }
  body.page-id-1632 .se-hour-card:hover .se-hour-sigil-body .se-hour-sigil-img,
  body.page-id-1632 .se-hour-card:focus-within .se-hour-sigil-body .se-hour-sigil-img{
    max-width: 100%;
    width: 100%;
    height: auto;
    max-height: none; /* ensure the large source can show without being clipped */
    object-fit: contain;
    display: block;
  }

  /* === Requested: expanded image column limits and readable text split === */
  /* Limit the expanded image column (tall vertical totem) to 500px high and show the full picture */
  body.page-id-1632 .se-hour-card:hover .se-hour-sigil-body,
  body.page-id-1632 .se-hour-card:focus-within .se-hour-sigil-body {
    /* allow the column to grow but cap visually so the layout remains tidy */
    max-height: 500px;
    overflow: visible; /* image itself will be constrained but allowed to render fully */
  }

  body.page-id-1632 .se-hour-card:hover .se-hour-sigil-body .se-hour-sigil-img,
  body.page-id-1632 .se-hour-card:focus-within .se-hour-sigil-body .se-hour-sigil-img {
    /* cap the visible picture height but preserve aspect ratio */
    max-height: 500px !important;
    width: auto !important; /* let width flow naturally inside the fixed column */
    object-fit: contain !important;
    display: block !important;
  }

  /* Split long copy into two columns on wider screens for easier reading */
  @media (min-width: 900px) {
    body.page-id-1632 .se-hour-card:hover .se-hour-body-copy p,
    body.page-id-1632 .se-hour-card:focus-within .se-hour-body-copy p {
      column-count: 2;
      column-gap: 28px;
      hyphens: auto;
      widows: 2;
      orphans: 2;
    }
  }

  /* icon inside the title becomes a rounded mini badge */
  body.page-id-1632 .se-hour-card .se-hour-title-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: 2px solid rgba(var(--se-gold-rgb), 0.85);
    background: rgba(0,0,0,0.08);
    color: var(--se-gold);
  }
  body.page-id-1632 .se-hour-card .se-hour-title-icon svg{ width: 28px; height: 28px; }

  /* collapse the long text content when closed: remove it from flow so the header is perfectly centered */
  body.page-id-1632 .se-hour-card .se-hour-text,
  body.page-id-1632 .se-hour-card .se-hour-call{
    position: absolute;
    left: 0;
    right: 0;
    top: 100%; /* place just below the band so it doesn't affect vertical centering */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 300ms ease, transform 300ms ease, top 300ms ease;
    pointer-events: none;
  }

  /* Decorative top and bottom shaped borders */
  body.page-id-1632 .se-hour-card::before,
  body.page-id-1632 .se-hour-card::after{
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 56px);
    height: 32px;
    border-radius: 30px;
    pointer-events: none;
    z-index: 1;
    /* gold decorative band — stronger color and a soft metallic tint */
    background: linear-gradient(180deg, rgba(var(--se-gold-rgb),0.07), rgba(255,255,255,0) 65%);
    border: 2px solid rgba(var(--se-gold-rgb), 0.92);
    box-shadow: 0 6px 24px rgba(var(--se-gold-rgb), 0.06), 0 1px 0 rgba(255,255,255,0.02) inset;
  }
  body.page-id-1632 .se-hour-card::before{ top: -18px; }
  body.page-id-1632 .se-hour-card::after{ bottom: -18px; }

  /* Hover / focus-within: expand to reveal the full content */
  body.page-id-1632 .se-hour-card:hover,
  body.page-id-1632 .se-hour-card:focus-within {
    max-height: 2000px; /* allow full expansion */
    /* switch back to content flow while expanded and stack from the top */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 48px;
    padding-bottom: 48px;
    box-shadow: 0 18px 60px rgba(0,0,0,0.6);
  }

  body.page-id-1632 .se-hour-card:hover .se-hour-text,
  body.page-id-1632 .se-hour-card:focus-within .se-hour-text,
  body.page-id-1632 .se-hour-card:hover .se-hour-call,
  body.page-id-1632 .se-hour-card:focus-within .se-hour-call{
    /* reveal content on expand — move into flow by resetting position */
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* When collapsed keep the title centered in a neat band (final adjustments above ensure the inline layout) */

  /* reduce the large 'THE TIME IS NOW.' when collapsed, keep the boldness when expanded */
  body.page-id-1632 .se-hour-card .se-hour-call{
    font-size: clamp(22px, 3.5vw, 64px) !important;
    margin-top: 10px;
    letter-spacing: 0.06em;
  }
}

/* Mobile & touch-first: keep expanded so content is discoverable */
@media (hover: none), (max-width: 768px) {
  body.page-id-1632 .se-hour-card{
    max-height: none !important;
    overflow: visible !important;
    padding-top: 48px;
    padding-bottom: 48px;
    cursor: default;
  }
  body.page-id-1632 .se-hour-card::before,
  body.page-id-1632 .se-hour-card::after{ display: none; }
  body.page-id-1632 .se-hour-card .se-hour-text,
  body.page-id-1632 .se-hour-card .se-hour-call{ opacity: 1; transform: none; pointer-events: auto; }

  /* Mobile tweaks: center the 'sandwich' title and limit icon size so it doesn't dominate the layout */
  body.page-id-1632 .se-hour-card .se-hour-title{
    text-align: center; /* center the header content */
    display: inline-flex; /* keep icon inline with text */
    justify-content: center;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap; /* allow wrapping when extremely narrow */
    padding-left: 1rem; /* small padding on narrow screens so content doesn't touch edges */
    padding-right: 1rem;
  }

  /* Reduce the inline clock badge so it fits with the title on phones */
  body.page-id-1632 .se-hour-card .se-hour-title-icon{
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 2px solid rgba(var(--se-gold-rgb), 0.85);
    background: rgba(0,0,0,0.06);
    color: var(--se-gold);
  }
  body.page-id-1632 .se-hour-card .se-hour-title-icon svg{ width: 26px; height: 26px; }

  /* Slightly reduce the left/right title text on small screens so the whole header more easily fits */
  body.page-id-1632 .se-hour-card .se-hour-title-left,
  body.page-id-1632 .se-hour-card .se-hour-title-right{
    font-size: clamp(14px, 4.5vw, 18px);
    white-space: nowrap; /* prevent awkward internal wrapping inside each fragment */
  }
}

/* Final: make the hour card corners rounder and give top/bottom borders a gold accent by default */
body.page-id-1632 .se-hour-card{
  border-radius: 22px !important;
  -webkit-border-radius: 22px !important;
  border-top-left-radius: 22px !important;
  border-top-right-radius: 22px !important;
  border-bottom-left-radius: 22px !important;
  border-bottom-right-radius: 22px !important;
  /* subtle gold top/bottom edge on the card itself */
  border-top-color: rgba(var(--se-gold-rgb), 0.35) !important;
  border-bottom-color: rgba(var(--se-gold-rgb), 0.35) !important;
}

/* Testimonials — The Sovereign Testament */
.se-testimonials-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.25rem;
  max-width: min(95vw,1200px);
  margin: 0 auto;
}
.se-testimonial-card{
  background: rgba(249,244,235,0.04);
  border: 1px solid rgba(197,160,89,0.12);
  border-radius: 12px;
  padding: 1.25rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height: 160px;
}
.se-testimonial-text{ color:var(--se-white); font-family: 'Roboto Mono', monospace; line-height:1.6; margin-bottom:.75rem; }
.se-testimonial-meta{ display:flex; gap:.75rem; align-items:center; justify-content:flex-start; margin-top:auto; }
.se-testimonial-author{ color:var(--se-white); font-weight:700; }
.se-testimonial-rating{ color:var(--se-gold); font-weight:800; margin-left:.5rem; }
.se-testimonial-time{ color: rgba(249,244,235,0.65); font-size:.875rem; margin-left:.5rem; }

.se-testimonials-cta .se-cta{ display:inline-block; padding:.8rem 1.2rem; border-radius:999px; border:2px solid rgba(var(--se-gold-rgb),0.85); color:var(--se-gold); text-decoration:none; background:transparent; font-weight:700; }
.se-testimonials-cta .se-cta--outline:hover{ background: rgba(var(--se-gold-rgb),0.06); color:var(--se-white); border-color: rgba(var(--se-gold-rgb),1); }

@media (max-width: 768px){
  .se-testimonials-grid{ grid-template-columns: 1fr; }
  .se-testimonial-card{ min-height: auto; }
  .se-testimonial-text{ font-size: 0.98rem; }
  .se-testimonials-cta .se-cta{ width:100%; max-width:360px; }
}

/* Carousel-specific: make the slider show one testimonial per view on mobile
   and style each slide as a clear card with the date below the author.
   Also add subtle alternating backgrounds so each testimonial feels slightly distinct. */
@media (max-width: 900px){
  /* Slides should take full width so carousel shows one at a time */
  .se-testimonials-carousel:not(.se-carousel-js) .se-testimonial-slide{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 1rem; /* breathing room at edges while inside the track */
    box-sizing: border-box;
  }

  /* Make the inside wrapper look like a card for clarity on mobile (only when JS is absent) */
  .se-testimonial-inside{
    background: rgba(249,244,235,0.03);
    border: 1px solid rgba(197,160,89,0.10);
    border-radius: 12px;
    padding: 1.25rem;
    margin: .5rem auto;
    max-width: 96%;
    display: flex;
    flex-direction: column;
    gap: .75rem;
  }

  /* Make text comfortable; left aligned for readability but keep author/date stacked */
  .se-testimonial-text{ font-size: 1rem; color:var(--se-white); text-align:left; }

  /* Stack the meta and put date underneath the author */
  .se-testimonial-meta{ display:flex; flex-direction:column; gap:.125rem; align-items:flex-start; margin-top: .5rem; }
  .se-testimonial-author{ font-weight:800; color:var(--se-white); }
  .se-testimonial-time{ margin-left:0; color: rgba(249,244,235,0.70); font-size:.875rem; }

  /* Alternating subtle styles so each testimonial feels unique */
  .se-testimonials-carousel .se-testimonial-slide:nth-child(odd) .se-testimonial-inside{ background: rgba(249,244,235,0.03); border-color: rgba(197,160,89,0.10); }
  .se-testimonials-carousel .se-testimonial-slide:nth-child(even) .se-testimonial-inside{ background: rgba(13,13,13,0.25); border-color: rgba(255,255,255,0.04); }

  /* Make sure the track doesn't show awkward overflow on tiny screens */
  .se-testimonials-carousel .se-testimonials-track{ gap: 0 !important; }

  /* When very narrow, reduce card padding so more text fits nicely */
  @media (max-width: 420px){
    .se-testimonial-inside{ padding: .9rem; }
    .se-testimonial-text{ font-size: .98rem; }
  }
}

/* Small spacing adjustment for testimonial intro paragraph so content breathes */
body.page-id-1632 .se-testimonials .se-keeper-lead{
  margin-bottom: 1.75rem; /* creates space between intro paragraph and the testimonial grid */
}

/* Add spacing specific to the Testimonials section so the paragraph has breathing room */
#testimonials .se-keeper-lead{
  margin-top: 8px; /* keep the top gap we already used */
  margin-bottom: 1.75rem; /* extra spacing so the testimonial cards sit clearly below */
}

/* Page-specific: category badge in card carousel and elsewhere on Slow Down page
   Make category links appear as small golden pills (good contrast on the dark bg) */
body.page-id-1632 .read-categories .darknews-categories,
body.page-id-1632 .af-cat-widget-carousel .read-categories .cat-links a{
  display:inline-block;
  background: linear-gradient(180deg, rgba(var(--se-gold-rgb),1) 0%, rgba(197,160,89,0.92) 100%);
  color: var(--sd-obsidian) !important; /* dark text for legibility */
  padding: .28rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--se-gold-rgb),0.12);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size: .75rem;
  box-shadow: 0 6px 18px rgba(var(--se-gold-rgb), 0.06);
}

/* Slightly larger badge on desktop cards */
@media(min-width:901px){
  body.page-id-1632 .read-categories .darknews-categories,
  body.page-id-1632 .af-cat-widget-carousel .read-categories .cat-links a{ font-size:.85rem; padding:.36rem .7rem; }
}

/* For small thumbnails where the badge sits on top of the image, add a faint backdrop for readability */
body.page-id-1632 .af-cat-widget-carousel .read-categories{ background: rgba(0,0,0,0.08); display:inline-block; padding:.12rem; border-radius:6px; }

.se-hour-text {
  color: var(--se-white);
  line-height: 1.8;
  font-size: 1.125rem;
}

/* Add hero subheadline (focus keyword) styling scoped to this page */
.slowdown-subheadline{
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 800;
  color: var(--se-white);
  font-size: clamp(16px, 2.2vw, 22px);
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  letter-spacing: .03em;
  text-align: center;
}

@media (max-width:480px){
  .slowdown-subheadline{ font-size: clamp(14px,3.4vw,18px); }
}

.se-hour-text p {
  margin-bottom: 1.5rem;
}

.se-hour-call {
  font-family: Montserrat, sans-serif;
  font-weight: 800;
  color: var(--se-gold);
  /* Really big — responsive and clamps to a huge size on large screens. Overrides any inline sizing. */
  font-size: clamp(36px, 8vw, 160px) !important;
  line-height: 0.9 !important; /* tighten line-height so the title feels bold and compact */
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Keeper Section */
.se-keeper {
  background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
  padding: 4rem 2rem;
}

.se-keeper-lead {
  font-family: 'Roboto Mono', monospace;
  color: var(--se-white);
  max-width: 56rem;
  margin: 0 auto;
  font-size: 1.125rem;
  line-height: 1.6;
}

/* Ensure the keeper lead paragraph remains white even when site-wide paragraph rules use !important colors */
body.page-id-1632 .se-keeper-lead {
  color: var(--se-white) !important;
}

.se-keeper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 3rem auto 0;
}

/* Wide, full-width keeper profile (Julio Aranda) */
.se-keeper-wide{
  margin-top: 3rem;
  background: rgba(249,244,235,0.04);
  border: 1px solid rgba(197,160,89,0.15);
  border-radius: 18px;
  padding: 2rem;
}
.se-keeper-wide-inner{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 2.25rem;
  /* Align columns to the top on desktop so image + text start at the same level */
  align-items: start;
  max-width: min(95vw,1200px);
  margin: 0 auto;
}
.se-keeper-wide-media{ display:flex; align-items:center; justify-content:center; }
.se-keeper-wide-img{ width:100%; max-width:320px; height:auto; border-radius:8px; object-fit:cover; display:block; }
.se-keeper-wide-name{ font-family: Montserrat, sans-serif; font-weight:900; color:var(--se-white); font-size:1.5rem; margin:0 0 0.25rem 0; }
.se-keeper-wide-role{ font-family: Montserrat, sans-serif; font-weight:800; color:var(--se-gold); letter-spacing:.06em; margin:0 0 1rem 0; }
.se-keeper-wide-copy p{ color:var(--se-white); line-height:1.6; margin-bottom:1rem; }

/* Specific: keep the narrow "share this" paragraph in the wide keeper white
   even though the general page rule makes many paragraphs gold. */
body.page-id-1632 .se-keeper-wide-copy p.se-keeper-cta{
  color: var(--se-white) !important;
}

/* Mobile: stack and center the image, increase spacing */
@media (max-width: 900px){
  .se-keeper-wide-inner{ grid-template-columns: 1fr; text-align:center; align-items: center; }
  .se-keeper-wide-media{ margin-bottom: 1rem; }
  .se-keeper-wide-img{ max-width:280px; }
  /* Center paragraph copy on mobile for better visual balance */
  .se-keeper-wide-copy p{ text-align:center; margin:0 auto 1rem; max-width: 60ch; }
  /* Keep headings centered on mobile */
  .se-keeper-wide-name, .se-keeper-wide-role{ text-align:center; }

  /* Strong mobile-specific override: global rule forces h3 left with !important,
     counter that here on mobile only (this file is loaded later for the template). */
  body.page-id-1632 h3.se-keeper-wide-name {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  /* Keeper share buttons (right-aligned in wide layout, center on mobile) */
  /* Center share buttons on mobile; keep consistent spacing */
  .se-keeper-share{ display:flex; justify-content:center; width:100%; margin-top:0.75rem; }
  .se-share-buttons{ display:flex; gap:0.75rem; flex-wrap:wrap; justify-content:center; }
  .se-share-btn{ display:inline-flex; align-items:center; gap:0.5rem; padding:0.45rem 0.85rem; border-radius:999px; text-transform:uppercase; font-weight:700; font-family:Montserrat,system-ui,sans-serif; font-size:0.8rem; color:var(--se-white); background:transparent; border:1px solid rgba(var(--se-gold-rgb),.12); }
  .se-share-btn:hover{ background:rgba(var(--se-gold-rgb),0.06); color:var(--se-gold); }

  @media (max-width: 768px){
    .se-keeper-share{ justify-content:center; margin-top:1rem; }
    .se-share-btn{ font-size:0.95rem; padding:0.6rem 1rem; }
  }
}

.se-keeper-card {
  background: rgba(249, 244, 235, 0.05);
  border: 1px solid rgba(197, 160, 89, 0.2);
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
}

.se-keeper-card:hover {
  border-color: var(--se-gold);
  box-shadow: 0 0 20px rgba(197, 160, 89, 0.3);
}

.se-keeper-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  color: var(--se-brown);
}

.se-keeper-title {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  color: var(--se-white);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.se-keeper-text {
  color: var(--se-white);
  line-height: 1.6;
}

.se-keeper-closing {
  margin-top: 4rem;
  text-align: center;
}

.se-keeper-quote {
  font-family: 'Roboto Mono', monospace;
  color: var(--se-white);
  font-size: 1.25rem;
  text-align: center;
  max-width: 48rem;
  margin: 0 auto;
  font-style: italic;
}

.se-keeper-signature {
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  color: var(--se-gold);
  text-align: center;
  margin-top: 2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .se-hero, .se-essence, .se-protocol, .se-guide, .se-invest, .se-keeper {
    padding: 2rem 1rem;
  }

  .se-price-grid, .se-essence-grid, .se-keeper-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

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

  .se-price-card, .se-essence-card, .se-keeper-card, .se-protocol-step {
    padding: 1.5rem;
  }

  .se-hour-card {
    padding: 2rem 1rem;
  }
}