/* ─────────────────────────────────────────────────────────────────────────────
   scroll-reveal.css
   Phase 1 — Scroll animation CSS + Hero upgrades + Button micro-interactions
   Append the contents of this file to css/style.css
   (or link as a separate file: <link rel="stylesheet" href="css/scroll-reveal.css"/>)
   ───────────────────────────────────────────────────────────────────────────── */

/* ── SCROLL REVEAL ANIMATIONS ────────────────────────────────────────────── */
/* Initial hidden state — all reveal variants start invisible with a transform */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition:
    opacity  0.8s cubic-bezier(.22, 1, .36, 1),
    transform 0.8s cubic-bezier(.22, 1, .36, 1);
}

/* Each variant starts from a different position */
.reveal       { transform: translateY(30px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-scale { transform: scale(0.92); }

/* .visible class added by scroll-reveal.js when element enters viewport */
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity:   1;
  transform: translateY(0) translateX(0) scale(1);
}

/* ── PAGE LOAD FADE ───────────────────────────────────────────────────────── */
/* Subtle fade-in on page load — feels intentional, not abrupt */
body {
  animation: page-in 0.4s ease;
}
@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── SMOOTH SCROLLING ─────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ── HERO STATUS PILL ─────────────────────────────────────────────────────── */
.hero-pill {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  background:      rgba(212, 130, 42, 0.10);
  border:          1px solid rgba(212, 130, 42, 0.25);
  border-radius:   99px;
  padding:         6px 14px;
  font-family:     var(--font-mono);
  font-size:       0.65rem;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  color:           var(--amber);
  margin-bottom:   1.6rem;
}

/* Pulsing green dot — "live" indicator */
.pill-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    #10b981;
  flex-shrink:   0;
  animation:     pill-pulse 2.5s ease-in-out infinite;
}
@keyframes pill-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}

/* ── HERO AMBIENT RADIAL GLOW (dark theme only) ───────────────────────────── */
/* The hero already has ::before (grid) and ::after (amber orb top-right).
   This adds a centered glow. Applied via a wrapper div .hero-glow. */
.hero-glow {
  position:       absolute;
  top:            50%;
  left:           50%;
  width:          500px;
  height:         500px;
  background:     radial-gradient(circle, rgba(212, 130, 42, 0.06), transparent 70%);
  transform:      translate(-50%, -50%);
  pointer-events: none;
  z-index:        0;
}
[data-theme="light"] .hero-glow { opacity: 0; }

/* ── HERO STAT COUNTER CARDS ──────────────────────────────────────────────── */
.hero-stats {
  display:         flex;
  gap:             12px;
  justify-content: center;
  flex-wrap:       wrap;
  margin-top:      48px;
}

.hero-stat-card {
  background:    rgba(255, 255, 255, 0.04);
  border:        1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding:       16px 24px;
  text-align:    center;
  min-width:     110px;
  transition:    border-color 0.3s ease, transform 0.3s cubic-bezier(.22, 1, .36, 1);
  cursor:        default;
}
.hero-stat-card:hover {
  border-color: var(--amber);
  transform:    translateY(-2px);
}

.hero-stat-number {
  font-family:    var(--font-mono);
  font-size:      clamp(1.5rem, 3vw, 2rem);
  font-weight:    700;
  color:          var(--amber);
  display:        block;
  line-height:    1;
  margin-bottom:  4px;
}

.hero-stat-label {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size:   0.72rem;
  color:       rgba(255, 255, 255, 0.45);
  line-height: 1.3;
}

[data-theme="light"] .hero-stat-card {
  background:  rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .hero-stat-card:hover {
  border-color: var(--amber);
}
[data-theme="light"] .hero-stat-label {
  color: var(--muted);
}

/* ── BUTTON MICRO-INTERACTIONS (global standardization) ──────────────────── */
/* Primary amber buttons */
.btn-amber,
.btn.btn-amber,
button.btn-amber {
  transition: transform 0.2s cubic-bezier(.22, 1, .36, 1),
              box-shadow 0.2s ease,
              background 0.2s ease !important;
}
.btn-amber:hover,
.btn.btn-amber:hover {
  transform:  translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(212, 130, 42, 0.25) !important;
}

/* Outline/ghost buttons */
.btn-outline,
.btn.btn-outline,
.btn-outline-light,
.btn.btn-outline-light,
.btn-ghost,
.btn.btn-ghost {
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}
.btn-outline:hover,
.btn.btn-outline:hover {
  border-color: var(--amber) !important;
  color:        var(--amber) !important;
}
.btn-outline-light:hover,
.btn.btn-outline-light:hover {
  border-color: rgba(212, 130, 42, 0.8) !important;
  color:        var(--amber) !important;
}
.btn-ghost:hover,
.btn.btn-ghost:hover {
  border-color: var(--amber) !important;
  color:        var(--amber) !important;
}

/* Nav CTA button */
.btn-nav {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.btn-nav:hover {
  transform:  translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(212, 130, 42, 0.2) !important;
}

/* Section spacing hierarchy */
.section-major     { padding: 5rem var(--gutter); }
.section-support   { padding: 3rem var(--gutter); }
.section-connector { padding: 2rem var(--gutter); }

/* ─────────────────────────────────────────────────────────────────────────────
   PHASE 2 — Navigation enhancements + Product card redesign
   ───────────────────────────────────────────────────────────────────────────── */

/* ── 2A. GLASSMORPHISM NAV ───────────────────────────────────────────────── */
/* Translucent background with blur — modern, premium feel.
   Dark: near-opaque ink with blur. Light: near-opaque white with blur. */
.site-nav {
  background:              rgba(15, 17, 23, 0.85) !important;
  backdrop-filter:         blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
[data-theme="light"] .site-nav {
  background:              rgba(255, 255, 255, 0.88) !important;
  backdrop-filter:         blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Scroll shadow — class added by nav.js after 60px scroll */
.site-nav.nav-scrolled {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
}

/* ── 2A. ANIMATED UNDERLINE ON NAV LINKS ────────────────────────────────── */
/* Amber line grows from left on hover / active — replaces plain color change */
.nav-left li a,
.nav-right li a:not(.btn-nav) {
  position: relative;
}
.nav-left li a::after,
.nav-right li a:not(.btn-nav)::after {
  content:          '';
  position:         absolute;
  bottom:           -3px;
  left:             0;
  width:            0;
  height:           1.5px;
  background:       var(--amber);
  transition:       width 0.3s cubic-bezier(.22, 1, .36, 1);
}
.nav-left li a:hover::after,
.nav-right li a:not(.btn-nav):hover::after,
.nav-left li a.active::after,
.nav-right li a.active::after {
  width: 100%;
}

/* ── 2A. SCE MONOGRAM STAMP ─────────────────────────────────────────────── */
/* 32px circle mark to the left of the brand wordmark */
.nav-stamp {
  width:           32px;
  height:          32px;
  border-radius:   50%;
  border:          1.5px solid var(--amber);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-mono);
  font-size:       9px;
  font-weight:     700;
  letter-spacing:  0.04em;
  color:           var(--amber);
  margin-right:    8px;
  flex-shrink:     0;
  transition:      transform 0.3s cubic-bezier(.22, 1, .36, 1);
  cursor:          default;
  vertical-align:  middle;
}
.nav-stamp:hover {
  transform: rotate(-8deg) scale(1.06);
}
[data-theme="light"] .nav-stamp {
  border-color: var(--amber);
  color:        var(--amber);
}

/* Nav brand wrapper needs to be flex to accommodate stamp */
.nav-brand-wrap {
  display:     flex;
  align-items: center;
}

/* ── 2B. PRODUCT CARD REDESIGN ──────────────────────────────────────────── */
/* Rounded corners, hover lift, amber accent bar, arrow indicator */
.product-card {
  border-radius: 12px !important;
  overflow:      hidden !important;
  position:      relative !important;
  transition:    transform 0.35s cubic-bezier(.22, 1, .36, 1),
                 box-shadow 0.35s ease,
                 border-color 0.35s ease !important;
}
.product-card:hover {
  transform:    translateY(-5px) !important;
  box-shadow:   0 16px 40px rgba(212, 130, 42, 0.08) !important;
  border-color: var(--amber) !important;
}

/* Bottom reveal bar — grows from left on hover */
.product-card::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             0;
  right:            0;
  height:           3px;
  background:       var(--amber);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform 0.4s ease;
}
.product-card:hover::after {
  transform: scaleX(1);
}

/* Arrow indicator — top-right circle, fills amber on hover */
.card-arrow {
  position:        absolute;
  top:             16px;
  right:           16px;
  width:           28px;
  height:          28px;
  border-radius:   50%;
  border:          1.5px solid var(--rule);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background 0.25s ease, border-color 0.25s ease;
  z-index:         2;
  pointer-events:  none;
}
.card-arrow svg {
  width:      12px;
  height:     12px;
  stroke:     var(--muted);
  fill:       none;
  transition: stroke 0.25s ease;
}
.product-card:hover .card-arrow {
  background:   var(--amber);
  border-color: var(--amber);
}
.product-card:hover .card-arrow svg {
  stroke: #fff;
}

/* Tier label — above product name */
.card-tier {
  font-family:    var(--font-mono);
  font-size:      10px;
  font-weight:    600;
  color:          var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display:        block;
  margin-bottom:  6px;
}

/* Popular badge — absolute, top-right of card body */
.badge-popular {
  position:      absolute;
  top:           16px;
  right:         56px; /* offset from arrow */
  background:    rgba(29, 158, 117, 0.15);
  color:         #1D9E75;
  border:        1px solid rgba(29, 158, 117, 0.3);
  border-radius: 99px;
  font-family:   var(--font-mono);
  font-size:     9px;
  font-weight:   700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding:       3px 9px;
  z-index:       2;
}

/* Stagger entrance on product cards */
.product-card:nth-child(odd)  { /* reveal-left applied in HTML */ }
.product-card:nth-child(even) { /* reveal-right applied in HTML */ }

/* ─────────────────────────────────────────────────────────────────────────────
   PHASE 3 — Free tools showcase + Blog card enhancements
   ───────────────────────────────────────────────────────────────────────────── */

/* ── 3A. FREE TOOLS SHOWCASE ─────────────────────────────────────────────── */
/* Replaces the existing .tool-tile styles with the new card spec */

/* Section wrapper */
.tools-showcase {
  background:  var(--ink);
  padding:     5rem var(--gutter);
  position:    relative;
  overflow:    hidden;
}
/* Subtle grid texture behind the section */
.tools-showcase::before {
  content:          '';
  position:         absolute;
  inset:            0;
  opacity:          0.025;
  background-image:
    repeating-linear-gradient(0deg,   var(--amber) 0, var(--amber) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg,  var(--amber) 0, var(--amber) 1px, transparent 1px, transparent 40px);
  pointer-events:   none;
}
.tools-showcase .container { position: relative; z-index: 1; }

/* Grid — 4 cols on desktop, 2 on tablet, 1 on mobile */
.tools-showcase-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   16px;
  margin-top:            2.4rem;
}
@media (max-width: 1000px) {
  .tools-showcase-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .tools-showcase-grid { grid-template-columns: 1fr; }
}

/* Individual tool card */
.tool-showcase-card {
  background:     #1a1d24; /* Always dark — immune to light theme */
  border:         1px solid var(--rule);
  border-radius:  14px;
  padding:        20px;
  text-decoration: none;
  color:           inherit;
  display:         flex;
  flex-direction:  column;
  gap:             12px;
  position:        relative;
  overflow:        hidden;
  transition:
    transform     0.35s cubic-bezier(.22, 1, .36, 1),
    border-color  0.3s  ease,
    box-shadow    0.35s ease;
}
.tool-showcase-card:hover {
  transform:    translateY(-4px);
  border-color: var(--amber);
  box-shadow:   0 12px 32px rgba(212, 130, 42, 0.10);
}

/* Icon container */
.tool-showcase-icon {
  width:           44px;
  height:          44px;
  border-radius:   10px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  transition:      transform 0.35s cubic-bezier(.22, 1, .36, 1);
}
.tool-showcase-card:hover .tool-showcase-icon {
  transform: scale(1.1) rotate(-5deg);
}
.tool-showcase-icon svg {
  width:        20px;
  height:       20px;
  stroke-width: 1.5;
  fill:         none;
}

/* Icon color variants */
.icon-amber { background: rgba(212, 130, 42, 0.15); }
.icon-amber svg { stroke: var(--amber); }
.icon-steel { background: rgba(43, 76, 126, 0.25); }
.icon-steel svg { stroke: #7aa3d4; }
.icon-green { background: rgba(16, 185, 129, 0.12); }
.icon-green svg { stroke: #10b981; }
.icon-purple { background: rgba(139, 92, 246, 0.12); }
.icon-purple svg { stroke: #a78bfa; }

/* Card text */
.tool-showcase-name {
  font-family:  var(--font-body, 'DM Sans', sans-serif);
  font-size:    14px;
  font-weight:  600;
  color:        #F5F2EB; /* Hardcoded cream — dark section always */
  line-height:  1.3;
}
.tool-showcase-desc {
  font-family:  var(--font-body, 'DM Sans', sans-serif);
  font-size:    12px;
  color:        rgba(255,255,255,0.50); /* Hardcoded — always readable on dark card */
  line-height:  1.55;
  flex:         1;
}

/* "Free" tag */
.tool-free-tag {
  display:        inline-flex;
  align-items:    center;
  background:     rgba(16, 185, 129, 0.10);
  color:          #10b981;
  border-radius:  99px;
  padding:        3px 9px;
  font-family:    var(--font-mono);
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self:     flex-start;
  margin-top:     auto;
}

/* Entrance rotation variant — cards enter with a slight tilt that straightens */
.tool-showcase-card.reveal {
  transform: translateY(30px) rotate(-2deg);
}
.tool-showcase-card.reveal.visible {
  transform: translateY(0) rotate(0deg);
}
/* Override hover state to not re-apply rotation */
.tool-showcase-card.reveal.visible:hover {
  transform: translateY(-4px) rotate(0deg);
}

/* ── 3B. BLOG CARD ENHANCEMENTS ──────────────────────────────────────────── */

/* Lift + shadow on hover */
.post-tile {
  transition:
    background   0.25s ease,
    transform    0.35s cubic-bezier(.22, 1, .36, 1),
    box-shadow   0.35s ease !important;
}
.post-tile:hover {
  transform:  translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
}

/* Thumb image zoom on hover */
.post-tile-thumb {
  overflow:   hidden !important;
  transition: none;
}
.post-tile-thumb > * {
  transition: transform 0.5s cubic-bezier(.22, 1, .36, 1);
}
.post-tile:hover .post-tile-thumb > * {
  transform: scale(1.06);
}
/* Emoji fallback (no child element to scale, scale the thumb itself) */
.post-tile:hover .post-tile-thumb {
  font-size: 2.2rem; /* subtle "zoom" effect on emoji */
}

/* "Read more" link with sliding arrow */
.post-read-more {
  display:      inline-flex;
  align-items:  center;
  gap:          4px;
  font-family:  var(--font-mono);
  font-size:    0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:        var(--amber);
  text-decoration: none;
  transition:   gap 0.25s ease;
}
.post-read-more:hover,
.post-tile:hover .post-read-more {
  gap: 8px;
}

/* Stagger entrance on blog grid cards */
.posts-grid-enhanced .post-tile:nth-child(odd)  { /* reveal-left in HTML  */ }
.posts-grid-enhanced .post-tile:nth-child(even) { /* reveal-right in HTML */ }

/* ─────────────────────────────────────────────────────────────────────────────
   PHASE 4 — CTA upgrade + Footer + Border-radius sweep + Testimonial
   ───────────────────────────────────────────────────────────────────────────── */

/* ── 4A. EMAIL CTA SECTION ───────────────────────────────────────────────── */

/* Engineering grid texture overlay behind the CTA section */
.email-strip {
  position: relative;
  overflow: hidden;
  border-radius: 0; /* full-width strip, no radius */
}
.email-strip::before {
  content:          '';
  position:         absolute;
  inset:            0;
  opacity:          0.03;
  background-image:
    repeating-linear-gradient(0deg,   var(--paper, #F5F2EB) 0, var(--paper, #F5F2EB) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg,  var(--paper, #F5F2EB) 0, var(--paper, #F5F2EB) 1px, transparent 1px, transparent 32px);
  pointer-events:   none;
  z-index:          0;
}
.email-strip > * { position: relative; z-index: 1; }
.email-strip form { position: relative; z-index: 1; }

/* Enhanced input focus glow */
.email-row input:focus,
.email-input:focus {
  border-color: var(--amber) !important;
  box-shadow:   0 0 0 3px rgba(212, 130, 42, 0.12) !important;
  outline:      none;
}

/* Social proof line */
.social-proof {
  font-family:    var(--font-mono);
  font-size:      12px;
  color:          rgba(255, 255, 255, 0.35);
  text-align:     center;
  margin-top:     12px;
  letter-spacing: 0.04em;
}
[data-theme="light"] .social-proof {
  color: var(--muted);
}

/* ── 4C. BORDER-RADIUS SWEEP — all cards sitewide ────────────────────────── */

/* Product cards */
.product-card,
.prod-card,
.products-side-grid .product-card { border-radius: 12px !important; }

/* Tool cards (tool pages) */
.tool-card,
.tool-input-card                  { border-radius: 12px !important; }

/* Sidebar cards */
.sidebar-card,
.post-sidebar .sidebar-card,
.playbook-nudge                   { border-radius: 10px !important; }

/* Value prop / feature cards */
.vp-card                          { border-radius: 10px !important; }

/* Form containers */
.form-panel,
.contact-form-wrap,
.gate-panel-new,
.tool-card,
.extracted-panel-inner,
.results-panel-wrap               { border-radius: 12px !important; }

/* Alert / notification boxes */
.gate-panel,
.retake-box-new,
.next-cta-new,
.post-cta-box,
.result-nudge,
.coaching-tip,
.email-output                     { border-radius: 8px !important; }

/* Tool shell on FE Analyzer */
.tool-shell                       { border-radius: 12px !important; }

/* Blog post cards */
.post-tile                        { border-radius: 10px !important; overflow: hidden !important; }

/* Roadmap tiles */
.roadmap-tile                     { border-radius: 10px !important; }

/* Stat cards on hero */
.hero-stat-card                   { border-radius: 10px !important; }

/* About credential tiles */
.cred-tile,
.credential-card                  { border-radius: 10px !important; }

/* ── 4D. TESTIMONIAL SECTION ─────────────────────────────────────────────── */

.testimonial-section {
  padding:    4rem var(--gutter);
  background: var(--card);
}
.testimonial-card {
  position:      relative;
  background:    var(--card);
  border:        1px solid var(--rule);
  border-radius: 16px;
  padding:       2.8rem 3rem 2.4rem;
  max-width:     680px;
  margin:        0 auto;
}
.quote-mark {
  position:    absolute;
  top:         16px;
  left:        24px;
  font-family: var(--font-display);
  font-size:   48px;
  line-height: 1;
  color:       var(--amber);
  opacity:     0.3;
}
.testimonial-card blockquote {
  font-family:  var(--font-body, 'DM Sans', sans-serif);
  font-size:    1.05rem;
  font-style:   italic;
  color:        var(--paper);
  line-height:  1.75;
  padding-left: 1.4rem;
  margin-bottom: 1.6rem;
  border:       none;
}
.testimonial-attribution {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding-left: 1.4rem;
}
.avatar-circle {
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      linear-gradient(135deg, var(--amber), #b86a20);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-mono);
  font-size:       11px;
  font-weight:     700;
  color:           #fff;
  flex-shrink:     0;
}
.testimonial-attribution strong {
  font-size:   0.9rem;
  color:       var(--ink);
  display:     block;
  line-height: 1.2;
}
.testimonial-attribution span {
  font-family: var(--font-mono);
  font-size:   0.65rem;
  letter-spacing: 0.06em;
  color:       var(--muted);
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PHASE 5 — Section spacing + Button standardization + Mobile
   ───────────────────────────────────────────────────────────────────────────── */

/* ── 5A. SECTION SPACING HIERARCHY ──────────────────────────────────────── */
.section-major     { padding: 5rem var(--gutter); }
.section-support   { padding: 3rem var(--gutter); }
.section-connector { padding: 2rem var(--gutter); }

/* ── 5B. BUTTON HOVER STANDARDIZATION ───────────────────────────────────── */
/* Catches any buttons not already covered by Phase 1 micro-interactions */

/* All submit/form buttons */
[type="submit"].btn,
button.btn {
  transition: transform 0.2s cubic-bezier(.22,1,.36,1),
              box-shadow 0.2s ease,
              background  0.2s ease !important;
}
[type="submit"].btn-amber:hover,
button.btn-amber:hover {
  transform:  translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(212, 130, 42, 0.25) !important;
}

/* Dark/ghost buttons */
.btn-dark {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-dark:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Analyze / generate CTAs */
.analyze-cta:hover {
  transform:  translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(212, 130, 42, 0.25) !important;
}

/* ── 5C. MOBILE RESPONSIVE ───────────────────────────────────────────────── */

/* Hero stats — wrap cleanly on small screens */
@media (max-width: 560px) {
  .hero-stats {
    flex-direction: column;
    align-items:    stretch;
    gap:            8px;
  }
  .hero-stat-card {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         12px 16px;
  }
  .hero-stat-number { font-size: 1.4rem; }
}

/* Tool showcase grid — 1 col on mobile */
@media (max-width: 480px) {
  .tools-showcase-grid { grid-template-columns: 1fr; }
}

/* Footer — stack on mobile */
@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Blog grid — stack on mobile */
@media (max-width: 640px) {
  .posts-grid-enhanced {
    grid-template-columns: 1fr !important;
  }
  .post-tile.featured {
    flex-direction: column !important;
  }
  .post-tile.featured .post-tile-thumb {
    width: 100% !important;
    height: 120px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--rule) !important;
  }
}

/* Product cards — single col on mobile */
@media (max-width: 700px) {
  .product-card {
    grid-template-columns: 1fr !important;
  }
  .product-card-body {
    border-right: none !important;
    border-bottom: 1px solid var(--rule) !important;
  }
}

/* Testimonial card padding on mobile */
@media (max-width: 480px) {
  .testimonial-card {
    padding: 2rem 1.4rem 1.8rem;
  }
  .testimonial-card blockquote,
  .testimonial-attribution { padding-left: 0.8rem; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   ADDENDUM — Nav pills, value props redesign, product card redesign
   ───────────────────────────────────────────────────────────────────────────── */

/* ── NAV PILL CLUSTER ────────────────────────────────────────────────────── */
/* All nav links get pill shape — invisible border at rest, reveals on hover  */
.nav-left li a,
.nav-right li a:not(.btn-nav) {
  font-family:    var(--font-mono) !important;
  font-size:      10px !important;
  font-weight:    500 !important;
  color:          #B8B0A8 !important;
  padding:        5px 12px !important;
  border-radius:  20px !important;
  border:         1px solid transparent !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  transition:     all 0.25s ease !important;
  text-decoration: none;
  white-space:    nowrap;
}
.nav-left li a:hover,
.nav-right li a:not(.btn-nav):hover {
  border-color: rgba(255, 255, 255, 0.1) !important;
  color:        #F5F2EB !important;
  background:   rgba(255, 255, 255, 0.03) !important;
}
.nav-left li a.active,
.nav-right li a.active {
  color:        var(--amber) !important;
  border-color: rgba(212, 130, 42, 0.3) !important;
}
/* Remove the animated underline ::after we added in Phase 2 — pills replace it */
.nav-left li a::after,
.nav-right li a:not(.btn-nav)::after {
  display: none !important;
}

/* Light theme nav pills */
[data-theme="light"] .nav-left li a,
[data-theme="light"] .nav-right li a:not(.btn-nav) {
  color: #7a7570 !important;
}
[data-theme="light"] .nav-left li a:hover,
[data-theme="light"] .nav-right li a:not(.btn-nav):hover {
  color:        #2d2a26 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  background:   rgba(0, 0, 0, 0.02) !important;
}

/* CTA button — "Get the Playbook" — filled amber pill */
.nav-right li a.btn-nav,
a.btn-nav {
  font-family:    var(--font-mono) !important;
  font-size:      10px !important;
  font-weight:    700 !important;
  background:     #D4822A !important;
  color:          #fff !important;
  padding:        6px 16px !important;
  border-radius:  20px !important;
  border:         none !important;
  margin-left:    4px !important;
  text-transform: none !important;
  letter-spacing: 0.04em !important;
  transition:     all 0.25s ease !important;
  text-decoration: none;
}
.nav-right li a.btn-nav:hover,
a.btn-nav:hover {
  background:  #b8691e !important;
  transform:   translateY(-1px) !important;
  box-shadow:  0 4px 12px rgba(212, 130, 42, 0.25) !important;
  color:       #fff !important;
  border:      none !important;
}

/* Nav border bottom — amber tint */
.site-nav {
  border-bottom: 1.5px solid rgba(212, 130, 42, 0.25) !important;
}
[data-theme="light"] .site-nav {
  border-bottom: 1.5px solid rgba(212, 130, 42, 0.2) !important;
}

/* ── VALUE PROPS REDESIGN ─────────────────────────────────────────────────── */
/* Replace stats-bar with new 3-column icon grid */

.vp-new-section {
  padding:    0;
  background: #0F1117; /* Always dark — never inherits light theme */
}
.vp-new-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1px;
  background:            rgba(255, 255, 255, 0.06);
  border-radius:         14px;
  overflow:              hidden;
}
@media (max-width: 700px) {
  .vp-new-grid { grid-template-columns: 1fr; }
}
.vp-new-card {
  background:  #1a1d24; /* Fixed dark — not theme-variable */
  padding:     2rem 1.4rem 1.6rem;
  text-align:  center;
  transition:  background 0.35s ease;
  cursor:      pointer;
  position:    relative;
}
.vp-new-card:hover {
  background: rgba(212, 130, 42, 0.03);
}
/* Center-growing amber underline on hover */
.vp-new-card::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             50%;
  width:            0;
  height:           2.5px;
  background:       var(--amber);
  transition:       width 0.4s cubic-bezier(.22, 1, .36, 1);
  transform:        translateX(-50%);
}
.vp-new-card:hover::after { width: 50%; }

/* Icon container */
.vp-new-icon {
  width:           44px;
  height:          44px;
  margin:          0 auto 12px;
  border-radius:   12px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      transform 0.4s cubic-bezier(.22, 1, .36, 1);
}
.vp-new-icon svg {
  width:        20px;
  height:       20px;
  stroke-width: 1.5;
  fill:         none;
}
.vp-new-card:hover .vp-new-icon {
  transform: scale(1.1) rotate(-5deg);
}

/* Icon color variants */
.vp-icon-amber { background: rgba(212, 130, 42, 0.08); }
.vp-icon-amber svg { stroke: #D4822A; }
.vp-icon-steel { background: rgba(43, 76, 126, 0.12); }
.vp-icon-steel svg { stroke: #7aa3d4; }
.vp-icon-green { background: rgba(16, 185, 129, 0.08); }
.vp-icon-green svg { stroke: #10b981; }

.vp-new-heading {
  font-family:   var(--font-display);
  font-size:     clamp(1rem, 1.8vw, 1.2rem);
  color:         var(--paper);
  margin-bottom: 0.5rem;
  line-height:   1.2;
}
.vp-new-body {
  font-family: 'DM Sans', sans-serif;
  font-size:   13px;
  font-weight: 400;
  color:       var(--muted);
  line-height: 1.65;
  margin-bottom: 1rem;
}
/* Arrow link — slides right on hover */
.vp-new-link {
  font-family:     var(--font-mono);
  font-size:       10px;
  font-weight:     700;
  color:           var(--amber);
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  text-decoration: none;
  transition:      gap 0.3s ease;
}
.vp-new-link svg {
  width:        10px;
  height:       10px;
  stroke:       currentColor;
  stroke-width: 2.5;
  fill:         none;
  flex-shrink:  0;
}
.vp-new-card:hover .vp-new-link { gap: 8px; }

/* ── NEW PRODUCT CARDS (index.html products section) ─────────────────────── */

.products-new-section {
  padding:    5rem var(--gutter);
  background: var(--ink);
}
.products-new-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   12px;
  margin-top:            1.6rem;
}
@media (max-width: 900px) {
  .products-new-grid { grid-template-columns: 1fr; }
}

/* Featured full-width card */
.product-featured-new {
  grid-column:   1 / -1;
  background:    #1a1d24;
  border:        1px solid rgba(212, 130, 42, 0.2);
  border-radius: 16px;
  padding:       2rem;
  position:      relative;
  overflow:      hidden;
  transition:    border-color 0.4s, box-shadow 0.4s;
  cursor:        default;
}
.product-featured-new:hover {
  border-color: rgba(212, 130, 42, 0.4);
  box-shadow:   0 20px 48px rgba(212, 130, 42, 0.06);
}
/* Amber gradient top edge */
.product-featured-new::before {
  content:    '';
  position:   absolute;
  top:        0; left: 0; right: 0;
  height:     2px;
  background: linear-gradient(90deg, #D4822A, transparent);
}

/* Flagship badge */
.badge-flagship {
  position:      absolute;
  top:           16px;
  right:         16px;
  font-family:   var(--font-mono);
  font-size:     9px;
  font-weight:   700;
  background:    rgba(16, 185, 129, 0.1);
  color:         #10b981;
  border:        1px solid rgba(16, 185, 129, 0.2);
  padding:       4px 12px;
  border-radius: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-tier-label {
  font-family:    var(--font-mono);
  font-size:      10px;
  font-weight:    600;
  color:          var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom:  0.5rem;
  display:        block;
}
.product-featured-new h3 {
  font-family:   var(--font-display);
  font-size:     clamp(1.4rem, 2.5vw, 2rem);
  color:         var(--paper);
  line-height:   1.15;
  margin-bottom: 0.8rem;
}
.product-featured-new .product-desc {
  font-family:   'DM Sans', sans-serif;
  font-size:     0.93rem;
  color:         var(--muted);
  line-height:   1.8;
  max-width:     600px;
  margin-bottom: 1.2rem;
}
.product-coming-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-bottom: 12px;
}
.product-coming-label {
  font-family:    var(--font-mono);
  font-size:      13px;
  font-weight:    700;
  color:          var(--amber);
}
.notify-pill-btn {
  font-family:   var(--font-mono);
  font-size:     11px;
  font-weight:   600;
  color:         var(--paper);
  background:    rgba(255, 255, 255, 0.06);
  border:        1px solid rgba(255, 255, 255, 0.12);
  padding:       5px 14px;
  border-radius: 8px;
  cursor:        pointer;
  transition:    all 0.25s;
  letter-spacing: 0.04em;
}
.notify-pill-btn:hover {
  border-color: var(--amber);
  color:        var(--amber);
  background:   rgba(212, 130, 42, 0.04);
}
.product-feat-stats {
  display:     flex;
  gap:         20px;
  flex-wrap:   wrap;
  font-family: var(--font-mono);
  font-size:   10px;
  color:       #888;
  margin-top:  4px;
}
.product-feat-stats b { color: var(--paper); font-weight: 600; }

/* Supporting small cards */
.product-small-new {
  background:    #1a1d24;
  border:        1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding:       1.4rem;
  position:      relative;
  overflow:      hidden;
  transition:    border-color 0.35s, transform 0.35s, box-shadow 0.35s;
  cursor:        default;
}
.product-small-new:hover {
  border-color: rgba(212, 130, 42, 0.3);
  transform:    translateY(-4px);
  box-shadow:   0 12px 32px rgba(0, 0, 0, 0.15);
}
.product-small-new::after {
  content:          '';
  position:         absolute;
  bottom:           0; left: 0; right: 0;
  height:           2.5px;
  background:       var(--amber);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform 0.4s ease;
}
.product-small-new:hover::after { transform: scaleX(1); }

.product-small-new .product-tier-label { margin-bottom: 0.4rem; }
.product-small-new h4 {
  font-family:   var(--font-display);
  font-size:     1.05rem;
  color:         var(--paper);
  line-height:   1.2;
  margin-bottom: 0.5rem;
}
.product-small-new p {
  font-family:   'DM Sans', sans-serif;
  font-size:     0.82rem;
  color:         var(--muted);
  line-height:   1.6;
  margin-bottom: 0.9rem;
}
.product-coming-sm {
  font-family:  var(--font-mono);
  font-size:    11px;
  font-weight:  600;
  color:        #888;
  display:      flex;
  align-items:  center;
  gap:          6px;
}
.coming-dot-sm {
  width:         5px;
  height:        5px;
  background:    var(--amber);
  border-radius: 50%;
  animation:     pill-pulse 2.5s infinite;
  flex-shrink:   0;
}

/* ── VALUE PROPS DARK OVERRIDE ────────────────────────────────────────────── */
/* Force dark theme on VP section regardless of page theme setting */
.vp-new-section { background: #0F1117 !important; }
.vp-new-card    { background: #1a1d24 !important; }
.vp-new-heading { color: #F5F2EB !important; }
.vp-new-body    { color: rgba(255,255,255,0.55) !important; }

/* ── TOOL SHOWCASE DARK OVERRIDE (theme-immune) ───────────────────────────── */
/* These override any light-theme cascade on the tools showcase section */
.tool-showcase-card { background: #1a1d24 !important; }
.tool-showcase-name { color: #F5F2EB !important; }
.tool-showcase-desc { color: rgba(255,255,255,0.50) !important; }
.tools-showcase     { background: var(--ink) !important; }