/* pdVerse "Silicon" feel: an experimental copy of the look of siliconpath.in (airy white page, tight bold
   DM Sans headings, IBM Plex Sans text, pill badges, 8px buttons, hairline cards, stats row, translucent
   header). Loaded after theme-green.css and only changes type, shape, spacing and the homepage hero:
   every colour still comes from theme-green.css (the greens). Delete the <link> to go back. */

:root {
  --si-head: "DM Sans", system-ui, sans-serif;
  --si-text: "IBM Plex Sans", system-ui, sans-serif;
  --si-btn: 8px; --si-card: 14px;
}

/* ---- Type ----------------------------------------------------------------- */
body, button, input, select, textarea { font-family: var(--si-text); }
h1, h2, h3, h4, .section-title, .logo, .pdv-logo, .pdv-logo span:last-child, .stat-value, .brand { font-family: var(--si-head); }
h1 { font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; }
h2 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
h3, h4 { font-weight: 600; letter-spacing: -0.015em; }
.section-title { font-weight: 700; letter-spacing: -0.03em; }

/* ---- Buttons: 8px, 14px/600, no bounce ------------------------------------ */
.btn, .ps-button, .dp-btn, .lp-download-button, .sa-bundle-button, .sa-cta,
.pdv-nav-prep, button[type="submit"], a[data-action="buy"], button[data-action="buy"] {
  border-radius: var(--si-btn) !important; font-weight: 600 !important; font-size: 14px; min-height: 42px;
}
.btn { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.btn:hover { transform: none; }
.btn-secondary, .btn-outline, .ps-button-ghost { background: var(--card) !important; color: var(--ink) !important; border-color: var(--hairline) !important; box-shadow: none; }
.btn-secondary:hover, .btn-outline:hover, .ps-button-ghost:hover { border-color: var(--green) !important; }

/* ---- Header: translucent, blurred, hairline ------------------------------- */
.pdv-site-header { background: rgba(252, 252, 252, 0.88) !important; backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); }
html[data-theme="dark"] .pdv-site-header { background: rgba(6, 20, 14, 0.82) !important; }
.pdv-nav-menu a, .pdv-nav-trigger { font-size: 14px; font-weight: 500; }

/* ---- Pills: eyebrows and badges ------------------------------------------- */
.eyebrow, .ps-eyebrow, .si-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--green-border); background: var(--green-soft); color: var(--green-hover);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; width: fit-content;
}

/* ---- Cards: hairline border, quiet hover ---------------------------------- */
.card, .book-card, .ps-card, .dp-card, .bundle-item-card, .faq-item, .review-card, .prepsprint-hub-card,
.ps-topic-card, .ps-level-card, .lp-chapter-card {
  border-radius: var(--si-card) !important; border: 1px solid var(--hairline); box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.card:hover, .book-card:hover, .ps-card:hover, .dp-card:hover, .bundle-item-card:hover, .prepsprint-hub-card:hover,
.ps-topic-card:hover, .ps-level-card:hover, .lp-chapter-card:hover {
  transform: none; border-color: var(--green-border); box-shadow: 0 10px 28px -14px rgba(1, 47, 31, 0.22);
}
.complete-library-banner, .cta-card, .author-band .container { border-radius: 16px; }

/* ---- Announcement bar (homepage) ------------------------------------------ */
.si-announce {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px;
  padding: 9px 16px; font-size: 14px; color: var(--body); background: var(--soft); border-bottom: 1px solid var(--hairline);
}
.si-announce a { color: var(--green); font-weight: 600; text-decoration: none; }
.si-announce a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Homepage hero: light, airy, stats row (was the dark band) ------------ */
:root:not([data-theme="dark"]) .hero:has(.hero-grid) {
  background:
    radial-gradient(ellipse 55% 75% at 90% 6%, rgba(19, 136, 62, 0.13), transparent 70%),
    radial-gradient(ellipse 35% 50% at 0% 0%, rgba(19, 136, 62, 0.06), transparent 70%),
    var(--canvas);
  color: var(--ink); padding: 72px 0 84px;
}
:root:not([data-theme="dark"]) .hero:has(.hero-grid) h1,
:root:not([data-theme="dark"]) .hero:has(.hero-grid) h1 * { color: var(--ink) !important; }
:root:not([data-theme="dark"]) .hero:has(.hero-grid) :is(.hero-text, .hero-pack, p) { color: var(--body) !important; }
:root:not([data-theme="dark"]) .hero:has(.hero-grid) .hero-pack a { color: var(--green) !important; }
:root:not([data-theme="dark"]) .hero:has(.hero-grid) :is(.btn-secondary, .btn-outline) { background: var(--card) !important; color: var(--ink) !important; border-color: var(--hairline) !important; }
:root:not([data-theme="dark"]) .hero:has(.hero-grid) :is([class*="badge"], [class*="eyebrow"], [class*="kicker"]) { color: var(--green-hover); background: var(--green-soft); border-color: var(--green-border); }
:root:not([data-theme="dark"]) .hero:has(.hero-grid) .hero-trace path { stroke: var(--green); opacity: 0.14; }
.hero:has(.hero-grid) h1 { font-size: clamp(2.3rem, 5.2vw, 3.5rem); margin: 16px 0 18px; }
.hero:has(.hero-grid) .hero-text { font-size: 1.05rem; line-height: 1.6; }
.hero:has(.hero-grid) .hero-pack { font-size: 0.95rem; }
.hero:has(.hero-grid) .hero-mascot-img { border-radius: 16px; border: 1px solid var(--hairline); box-shadow: 0 24px 56px -20px rgba(1, 47, 31, 0.35); }
.si-stats { display: flex; flex-wrap: wrap; gap: 20px 40px; margin: 32px 0 0; padding: 22px 0 0; border-top: 1px solid var(--hairline); }
.si-stats div { margin: 0; }
.si-stats dd { margin: 0; font: 700 1.55rem/1.1 var(--si-head); letter-spacing: -0.02em; color: var(--ink); }
.si-stats dt { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
html[data-theme="dark"] .hero:has(.hero-grid) .si-stats { border-top-color: rgba(255, 255, 255, 0.14); }
html[data-theme="dark"] .hero:has(.hero-grid) .si-stats dd { color: #fcfcfc; }
html[data-theme="dark"] .hero:has(.hero-grid) .si-stats dt { color: #b9cfc2; }

/* ---- Section rhythm ------------------------------------------------------- */
.section { padding-block: 80px; }
.section-title { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
@media (max-width: 680px) { .section { padding-block: 56px; } .hero:has(.hero-grid) { padding: 48px 0 56px; } }