/* ==========================================================================
   Bethlehem Telephone Sanitarium — style.css
   "Dimension"-inspired dark theme: one fixed, textured background sits behind
   every page and content floats on it in a translucent panel.
   Vanilla CSS, no frameworks/build tools. Fonts are self-hosted (see /fonts).
   Palette: the board-mandated two brand colors — Blue #00A3F6 / Green #78D785.
   ========================================================================== */

/* ---------- 0. Self-hosted fonts (Latin subset, SIL Open Font License) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("fonts/cormorant-garamond-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/cormorant-garamond-italic-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Arial re-scaled to Inter's metrics, so text doesn't jump when Inter swaps in */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}

/* ---------- 1. Custom Properties ---------- */
:root {
  color-scheme: dark;

  --color-blue: #00A3F6;
  --color-green: #78D785;

  /* Token names are kept from the earlier light build so nothing referencing
     them breaks; values are tuned for a near-black background. */
  --color-forest: var(--color-blue);
  --color-gold: var(--color-green);
  --color-sage: #BBCBD3;
  --color-cream: #EDF9FF;
  --color-charcoal: #001621;
  --color-white: #FFFFFF;

  --color-text-muted-inverse: #BBCBD3;
  --gradient-brand: linear-gradient(135deg, var(--color-blue) 0%, var(--color-green) 100%);

  --color-bg: var(--color-charcoal);
  --color-bg-alt: rgba(255, 255, 255, 0.05);
  --color-bg-dark: var(--color-charcoal);
  --color-text: var(--color-cream);
  --color-text-inverse: var(--color-charcoal);
  --color-text-muted: var(--color-text-muted-inverse);
  --color-accent: var(--color-green);
  --color-border: rgba(255, 255, 255, 0.14);
  --color-border-inverse: rgba(255, 255, 255, 0.14);
  /* Boundaries of buttons and form fields need >= 3:1 contrast (WCAG 1.4.11) */
  --color-border-strong: rgba(255, 255, 255, 0.55);
  /* Hairlines of the homepage identity block, over a photo background */
  --color-identity-line: rgba(255, 255, 255, 0.6);

  --panel-bg: rgba(0, 22, 33, 0.85);
  --panel-width: 60rem;

  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-base: 1rem;
  --fs-sm: 0.875rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-h3: 1.75rem;
  --fs-h2: 2.25rem;
  --fs-h1: 2.75rem;
  --lh-base: 1.65;
  --lh-heading: 1.2;
  --tracking: 0.09em;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --container-width: 1200px;
  --container-padding: var(--space-2);
  --header-height: 76px;
  --radius: 6px;
  --radius-lg: 12px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.45);
  --transition: 200ms ease-in-out;
}

/* ---------- 2. Reset / Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  /* Keeps in-page and cross-page #anchors from hiding under the sticky header */
  scroll-padding-top: calc(var(--header-height) + 1rem);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

body.nav-open {
  overflow: hidden;
}

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

img {
  height: auto;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
  font-weight: 600;
  color: var(--color-white);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p {
  margin-bottom: var(--space-2);
}

a {
  color: var(--color-green);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-blue);
}

/* Links inside running text need a non-color cue as well (WCAG 1.4.1) */
p a,
.prose li a,
.callout a,
.footer__disclaimer a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* ---------- 3. Accessibility helpers ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-2);
  z-index: 1000;
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-blue);
  color: var(--color-charcoal);
  border-radius: var(--radius);
  transition: top var(--transition);
}

.skip-link:focus {
  top: var(--space-2);
  color: var(--color-charcoal);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--color-green);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* Spam-trap field: hidden from people, visible to bots */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- 4. Fixed background + floating panel ---------- */
#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  background-image:
    url("images/texture-overlay.png"),
    linear-gradient(160deg, rgba(0, 22, 33, 0.97) 0%, rgba(0, 34, 51, 0.94) 45%, rgba(0, 106, 161, 0.9) 100%);
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  background-position: center, center;
}

/* Depth effect, as in the template: the background pulls back and blurs while
   the mobile menu is open. It is scaled up first so the blur has pixels to
   sample at the edges instead of fading to transparent. */
#bg {
  transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
}

body.nav-open #bg {
  transform: scale(1.0825);
  filter: blur(0.2rem);
}

#bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top right, rgba(120, 215, 133, 0.24), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(0, 163, 246, 0.22), transparent 55%);
  pointer-events: none;
}

/* Homepage only: aerial photo of the sanitarium grounds under the same brand
   wash + grain used site-wide. The first declaration is the JPEG fallback for
   older browsers; the second (WebP via image-set) wins where supported.
   Phones get the smaller 640px file. */
#bg.bg--home {
  background-image:
    url("images/texture-overlay.png"),
    linear-gradient(160deg, rgba(0, 22, 33, 0.88) 0%, rgba(0, 34, 51, 0.72) 45%, rgba(0, 106, 161, 0.5) 100%),
    url("images/sanitarium-aerial.jpg");
  background-image:
    url("images/texture-overlay.png"),
    linear-gradient(160deg, rgba(0, 22, 33, 0.88) 0%, rgba(0, 34, 51, 0.72) 45%, rgba(0, 106, 161, 0.5) 100%),
    image-set(url("images/sanitarium-aerial-640.webp") type("image/webp"), url("images/sanitarium-aerial.jpg") type("image/jpeg"));
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: auto, cover, cover;
  background-position: center, center, center;
}

@media (min-width: 641px) {
  #bg.bg--home {
    background-image:
      url("images/texture-overlay.png"),
      linear-gradient(160deg, rgba(0, 22, 33, 0.88) 0%, rgba(0, 34, 51, 0.72) 45%, rgba(0, 106, 161, 0.5) 100%),
      url("images/sanitarium-aerial.jpg");
    background-image:
      url("images/texture-overlay.png"),
      linear-gradient(160deg, rgba(0, 22, 33, 0.88) 0%, rgba(0, 34, 51, 0.72) 45%, rgba(0, 106, 161, 0.5) 100%),
      image-set(url("images/sanitarium-aerial.webp") type("image/webp"), url("images/sanitarium-aerial.jpg") type("image/jpeg"));
  }
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  position: relative;
  z-index: 1;
}

/* Dimension's soft entrance — pure CSS (no JavaScript dependency, so the page
   can never be stuck invisible), opacity/transform only so it stays cheap. */
@keyframes panel-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.page-panel {
  position: relative;
  z-index: 1;
  max-width: var(--panel-width);
  margin: var(--space-5) auto var(--space-6);
  background: var(--panel-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  /* "backwards", not "both": a transform kept after the animation ends would make
     this panel the containing block of every position:fixed element inside it
     (the shop's order button), pinning them to the panel instead of the screen. */
  animation: panel-rise 0.45s ease-out backwards;
}

.page-panel .section {
  padding-inline: var(--space-4);
}

.page-panel .section + .section {
  border-top: 1px solid var(--color-border);
}

@media (max-width: 767px) {
  .page-panel {
    margin: var(--space-3) var(--space-2) var(--space-4);
    border-radius: var(--radius);
  }
  .page-panel .section {
    padding-inline: var(--space-2);
  }
  .hero {
    padding-block: var(--space-5) var(--space-2);
  }
}

/* ---------- 5. Layout Utilities ---------- */
.section {
  padding-block: var(--space-5);
}

.section-header {
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-5);
  text-align: center;
}

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: var(--space-1);
}

.section-header p {
  color: var(--color-text-muted-inverse);
  font-size: var(--fs-lg);
  margin-bottom: 0;
}

.section-header::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: var(--space-3) auto 0;
  border-radius: 2px;
  background: var(--gradient-brand);
}

/* Readable line-length column, replaces repeated inline max-width styles */
.prose {
  max-width: 760px;
  margin-inline: auto;
}

.prose--center {
  text-align: center;
}

.prose--narrow {
  max-width: 640px;
}

.prose h3 {
  margin-bottom: var(--space-1);
}

/* Section headings inside long-form text (guides, articles, privacy policy) */
.prose h2 {
  font-size: var(--fs-h3);
  margin: var(--space-5) 0 var(--space-1);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose ul {
  margin-bottom: var(--space-2);
}

.prose ul li {
  position: relative;
  padding-left: 1.25em;
  margin-bottom: 0.6em;
  color: var(--color-text-muted-inverse);
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--gradient-brand);
}

.prose li strong {
  color: var(--color-white);
}

/* Used in the privacy policy to name cookies exactly */
.prose code {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  overflow-wrap: anywhere;
}

.prose--faq h3 {
  font-size: var(--fs-xl);
  margin-top: var(--space-4);
}

.prose--faq h3:first-child {
  margin-top: 0;
}

.section-cta {
  text-align: center;
  margin-top: var(--space-5);
}

/* ---------- 6. Buttons (Dimension: outlined, uppercase, small-radius) ---------- */
.btn {
  display: inline-block;
  padding: 0.85em 1.75em;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 2px solid transparent;
  background-color: transparent;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

.btn--primary {
  color: var(--color-white);
  border-color: var(--color-border-strong);
}

.btn--primary:hover {
  background-color: var(--color-white);
  color: var(--color-charcoal);
  border-color: var(--color-white);
}

.btn--secondary {
  color: var(--color-blue);
  border-color: var(--color-blue);
}

.btn--secondary:hover {
  background-color: var(--color-blue);
  color: var(--color-charcoal);
}

.btn--gold {
  background: var(--gradient-brand);
  color: var(--color-charcoal);
  border-color: transparent;
  font-weight: 700;
}

.btn--gold:hover {
  color: var(--color-charcoal);
  filter: brightness(1.08);
}

/* ---------- 7. Site Header & Navigation ---------- */
/* No backdrop-filter/transform/filter here on purpose: they'd turn this sticky
   header into the containing block of the position:fixed mobile menu below,
   breaking its full-viewport sizing in some browsers. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background-color: rgba(0, 22, 33, 0.92);
  border-bottom: 1px solid var(--color-border);
}

.site-header.scrolled {
  background-color: rgba(0, 22, 33, 0.98);
  box-shadow: var(--shadow-sm);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);
}

.nav__brand:hover {
  color: var(--color-green);
}

.nav__brand img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  padding: 3px;
  background-color: rgba(255, 255, 255, 0.04);
}

/* 44x44 touch target around the 32x24 hamburger icon */
.nav__toggle {
  position: relative;
  z-index: 1000;
  width: 44px;
  height: 44px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav__toggle-bar {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background-color: var(--color-white);
  transition: transform var(--transition), opacity var(--transition);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  transform: translateY(10.5px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
  transform: translateY(-10.5px) rotate(-45deg);
}

/* Closed mobile menu is visibility:hidden, so its links can't be tabbed to
   or read by screen readers while off-screen. */
.nav__list {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background-color: var(--color-charcoal);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--transition), visibility 0s linear var(--transition);
  overflow-y: auto;
}

.nav__list.is-open {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}

.nav__link {
  display: inline-block;
  padding: 0.35em 0.5em;
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted-inverse);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--color-white);
}

.nav__link--cta {
  padding: 0.6em 1.5em;
  border-radius: var(--radius);
  background: var(--gradient-brand);
  color: var(--color-charcoal) !important;
  font-weight: 700;
}

.nav__link--cta:hover {
  filter: brightness(1.08);
  color: var(--color-charcoal) !important;
}

/* ---------- 8. Hero (top-of-panel title block, Dimension "major" style) ---------- */
.hero {
  padding-block: var(--space-6) var(--space-5);
  text-align: center;
}

.hero__content {
  max-width: 720px;
  margin-inline: auto;
}

.hero h1 {
  display: inline-block;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border);
  font-size: 2.25rem;
}

.hero p {
  font-size: var(--fs-lg);
  color: var(--color-text-muted-inverse);
  margin-bottom: var(--space-4);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
}

/* ---------- 8b. Homepage identity block ----------
   The "beads on a string" centre stack from the Dimension template: a circled
   logo, a hairline connector, a rule-topped-and-tailed title box, another
   connector, then a bordered button pill. It sits directly on the fixed
   background rather than inside the floating panel, as in the original. */
.identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 100%;
  padding: var(--space-6) var(--space-2) var(--space-5);
  /* Scrim for legibility over the photo. The template's vignette fades to
     nothing, which left the small green tagline at 4.3:1 over the photo's
     blown-out highlights; this keeps a 0.28 floor across the whole block, so
     the worst case measures 6.2:1 (text) and 10.9:1 (heading). */
  background-image: radial-gradient(ellipse at center,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(0, 0, 0, 0.28) 55%,
    rgba(0, 0, 0, 0.28) 100%);
}

.identity > * {
  position: relative;
  margin-top: 3.5rem;
}

.identity > *::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(-3.5rem - 1px);
  left: calc(50% - 1px);
  width: 1px;
  height: calc(3.5rem + 1px);
  background: var(--color-identity-line);
}

.identity > :first-child {
  margin-top: 0;
}

.identity > :first-child::before {
  display: none;
}

.identity__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
  border: 1px solid var(--color-identity-line);
  border-radius: 50%;
}

.identity__logo img {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: contain;
}

.identity__content {
  border-block: 1px solid var(--color-identity-line);
  padding: var(--space-5) var(--space-4);
  max-width: 100%;
}

.identity__content > :last-child {
  margin-bottom: 0;
}

.identity__content h1 {
  font-size: 2.25rem;
  margin-bottom: var(--space-2);
}

.identity__tagline {
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  font-size: 0.8rem;
  line-height: 2;
  color: var(--color-green);
  margin-bottom: var(--space-2);
}

.identity__lede {
  color: var(--color-text-muted-inverse);
  max-width: 34rem;
  margin-inline: auto;
}

/* Button pair styled as the template's single bordered nav pill */
.identity__actions {
  display: flex;
  border: 1px solid var(--color-identity-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.identity__actions a {
  display: block;
  padding: 0.95rem 1.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--color-white);
  border-left: 1px solid var(--color-identity-line);
  transition: background-color var(--transition), color var(--transition);
}

.identity__actions a:first-child {
  border-left: 0;
}

.identity__actions a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

@media (max-width: 640px) {
  .identity {
    padding-top: var(--space-5);
  }

  .identity > * {
    margin-top: 2rem;
  }

  .identity > *::before {
    top: calc(-2rem - 1px);
    height: calc(2rem + 1px);
  }

  .identity__logo {
    width: 4.5rem;
    height: 4.5rem;
  }

  .identity__logo img {
    width: 2.6rem;
    height: 2.6rem;
  }

  .identity__content {
    padding: var(--space-4) var(--space-2);
  }

  .identity__content h1 {
    font-size: 1.85rem;
  }

  .identity__tagline {
    letter-spacing: 0.15rem;
  }

  /* Stack the two buttons rather than letting them overflow a narrow screen */
  .identity__actions {
    flex-direction: column;
    width: 100%;
    max-width: 20rem;
  }

  .identity__actions a {
    border-left: 0;
    border-top: 1px solid var(--color-identity-line);
  }

  .identity__actions a:first-child {
    border-top: 0;
  }
}

/* ---------- 9. Feature / inline photos (Dimension's span.image.main) ---------- */
.feature-image {
  position: relative;
  display: block;
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.feature-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("images/texture-overlay.png");
  background-size: 256px 256px;
  background-repeat: repeat;
  background-color: rgba(0, 22, 33, 0.35);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.feature-image img,
.feature-image picture {
  width: 100%;
  display: block;
}

.intro__grid {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

.intro__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.intro__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("images/texture-overlay.png");
  background-size: 256px 256px;
  background-repeat: repeat;
  background-color: rgba(0, 22, 33, 0.35);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

.intro__media picture,
.intro__media img {
  display: block;
  width: 100%;
}

.intro__media img {
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---------- 10. Card Grid ---------- */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.card {
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: transform var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.card:hover {
  transform: translateY(-4px);
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow-sm);
}

.card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  color: var(--color-green);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: var(--space-3);
}

.card__icon svg {
  width: 28px;
  height: 28px;
}

.card h3 {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-1);
}

.card p {
  color: var(--color-text-muted-inverse);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-2);
}

.card__link {
  margin-top: auto;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-green);
}

/* ---------- 10b. Checklist + callout ---------- */
.checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-2) var(--space-4);
  max-width: 900px;
  margin-inline: auto;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
}

.check-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.15em;
  color: var(--color-green);
}

.callout {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  max-width: 760px;
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg-alt);
  border-left: 4px solid var(--color-green);
  border-radius: var(--radius);
  color: var(--color-cream);
  font-size: var(--fs-sm);
}

.callout p {
  margin-bottom: 0;
}

.callout--blue {
  border-left-color: var(--color-blue);
}

.callout__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 0.1em;
  color: var(--color-green);
}

.callout--blue .callout__icon {
  color: var(--color-blue);
}

/* ---------- 10c. About: leadership ---------- */
.leadership {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.leadership__photo {
  max-width: 320px;
  width: 100%;
  margin-inline: auto;
}

.leadership__photo img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.leadership__role {
  display: block;
  margin-bottom: var(--space-2);
}

.pullquote {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-3);
  border-left: 4px solid var(--color-green);
}

.pullquote p {
  color: var(--color-text-muted-inverse);
}

.leadership__sig {
  margin-top: var(--space-2);
  font-weight: 600;
  color: var(--color-white);
}

/* ---------- 11. NEWSTART Section ---------- */
.newstart__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.newstart__item {
  text-align: center;
  padding: var(--space-3) var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: background-color var(--transition);
}

.newstart__item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.newstart__letter {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-green);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.newstart__item:nth-child(even) .newstart__letter {
  color: var(--color-blue);
}

.newstart__item h3 {
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.newstart__item p {
  color: var(--color-text-muted-inverse);
  font-size: var(--fs-sm);
  margin-bottom: 0;
}

/* ---------- 12. Foundation quote + wellness teaser (homepage) ---------- */
.foundation__quote {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-5);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 500;
  color: var(--color-white);
}

.foundation__quote p {
  margin-bottom: 0;
}

.foundation__quote cite {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking);
  color: var(--color-green);
}

.nursing__list {
  max-width: 700px;
  margin: 0 auto;
}

.nursing__list li {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted-inverse);
}

.nursing__list li:first-child {
  border-top: 0;
}

.nursing__list strong {
  color: var(--color-white);
}

/* ---------- 13. Forms (newsletter + contact) ---------- */
.newsletter {
  background-color: var(--color-bg-alt);
}

.newsletter__inner {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}

.newsletter__inner p {
  color: var(--color-text-muted-inverse);
  margin-bottom: var(--space-3);
}

.newsletter__form {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.newsletter__form .form-status {
  flex: 0 0 100%;
  margin-top: 0;
}

.newsletter__field {
  width: 100%;
  padding: 0.85em 1.1em;
  font-size: var(--fs-base);
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

.newsletter__field::placeholder {
  color: var(--color-text-muted-inverse);
}

.newsletter__field:focus-visible {
  outline: none;
  border-color: var(--color-green);
  background-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(120, 215, 133, 0.35);
}

select.newsletter__field {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23BBCBD3' /%3E%3C/svg%3E");
  background-size: 1.1rem;
  background-repeat: no-repeat;
  background-position: calc(100% - 1rem) center;
  padding-right: 2.5rem;
  appearance: none;
  -webkit-appearance: none;
}

select.newsletter__field option {
  background: var(--color-charcoal);
  color: var(--color-white);
}

.newsletter__note {
  font-size: var(--fs-sm);
  color: var(--color-text-muted-inverse);
  margin-top: var(--space-1);
}

.form-row {
  margin-bottom: var(--space-3);
}

.form-row--last {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-1);
  color: var(--color-white);
}

textarea.newsletter__field {
  resize: vertical;
}

.form-status {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  border-left: 4px solid var(--color-green);
  background: var(--color-bg-alt);
  color: var(--color-white);
  font-weight: 600;
  text-align: left;
}

.form-status--error {
  border-left-color: #ff8a80;
}

.form-status a {
  text-decoration: underline;
}

/* ---------- 14. Footer ---------- */
.site-footer {
  position: relative;
  z-index: 1;
  background-color: rgba(0, 22, 33, 0.72);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted-inverse);
}

.footer__brand {
  padding-top: var(--space-4);
  text-align: center;
}

.footer__brand-name {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 0;
}

.footer__tagline {
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-green);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-block: var(--space-5) var(--space-4);
}

.footer__col h2 {
  font-family: var(--font-body);
  color: var(--color-white);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.footer__col p,
.footer__col li {
  color: var(--color-text-muted-inverse);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-1);
}

/* <address> is the right element for the owner's contact details, but browsers
   italicise it by default. */
.footer__col address {
  font-style: normal;
  font-size: var(--fs-sm);
  line-height: 1.9;
  margin-top: var(--space-2);
  color: var(--color-text-muted-inverse);
}

.footer__col a {
  display: inline-block;
  padding-block: 0.15em;
  color: var(--color-text-muted-inverse);
}

.footer__col a:hover {
  color: var(--color-green);
}

.footer__disclaimer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-3);
  margin-bottom: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted-inverse);
  text-align: center;
  line-height: 1.6;
}

.footer__bottom {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-2);
  margin-bottom: 0;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--color-text-muted-inverse);
}

.footer__bottom a {
  color: var(--color-text-muted-inverse);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.footer__bottom a:hover {
  color: var(--color-green);
}

/* ---------- 15. 404 / notice page ---------- */
.notice {
  text-align: center;
  padding-block: var(--space-7);
}

.notice__code {
  display: block;
  font-family: var(--font-heading);
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--space-2);
}

/* ---------- 16. Tablet / Desktop — 768px breakpoint ---------- */
@media (min-width: 768px) {
  :root {
    --fs-h1: 3.5rem;
    --fs-h2: 2.75rem;
    --container-padding: var(--space-4);
  }

  .hero h1 {
    font-size: var(--fs-h1);
  }

  .hero__actions {
    flex-direction: row;
  }

  .intro__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .cards {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  .newstart__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .newsletter__form {
    flex-direction: row;
    align-items: flex-start;
  }

  .newsletter__field {
    flex: 1;
  }

  .newsletter__form .btn {
    flex-shrink: 0;
  }

  .footer__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
  }
}

@media (min-width: 1024px) {
  .newstart__grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

/* The full nav (long brand name + seven links + Donate) needs ~1,180px of
   content width, so the horizontal pill menu only takes over at 1300px; below
   that the hamburger/overlay menu is used (this includes iPad landscape).
   Measured 2026-10-02: 39px to spare at 1300px (header container widened to
   1320px below). KEEP IN SYNC with the matchMedia value in script.js.
   Adding another nav item means shortening a label or raising this again. */
@media (min-width: 1300px) {
  /* The header may run wider than the 1200px page container so the full menu fits */
  .site-header .container {
    max-width: 1320px;
  }

  .nav__toggle {
    display: none;
  }

  .nav__list {
    position: static;
    inset: auto;
    height: auto;
    flex-direction: row;
    background-color: transparent;
    transform: none;
    visibility: visible;
    transition: none;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .nav__brand {
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .nav__link {
    display: block;
    font-size: 0.75rem;
    white-space: nowrap;
    padding: 0.9rem 1rem;
    border-right: 1px solid var(--color-border);
  }

  .nav__list li:last-child .nav__link {
    border-right: 0;
  }

  .nav__link--cta {
    padding: 0.9rem 1.2rem;
    border-radius: 0;
  }
}

/* ---------- 16b. Shop ---------- */
.btn--small {
  padding: 0.6em 1em;
  font-size: 0.72rem;
}

.shop__toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.shop__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.95em;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  color: var(--color-text-muted-inverse);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.chip:hover {
  color: var(--color-white);
  border-color: var(--color-white);
}

.chip[aria-pressed="true"] {
  background: var(--gradient-brand);
  border-color: transparent;
  color: var(--color-charcoal);
}

.chip__count {
  min-width: 1.6em;
  padding: 0 0.4em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.75rem;
  text-align: center;
}

.chip[aria-pressed="true"] .chip__count {
  background: rgba(0, 22, 33, 0.18);
}

.shop__search {
  position: relative;
}

.shop__search .newsletter__field {
  padding-left: 2.6rem;
}

.shop__search svg {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--color-text-muted-inverse);
  pointer-events: none;
}

.shop__count {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted-inverse);
}

.shop__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}

.shop__empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-text-muted-inverse);
  padding-block: var(--space-4);
}

.product {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition);
}

.product:hover {
  transform: translateY(-4px);
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow-sm);
}

.product__media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  background: #04202e;
}

/* Book covers are portrait and juicer photos vary: show each whole, never cropped */
.product__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-2);
}

.product__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  background: rgba(0, 22, 33, 0.85);
  border: 1px solid var(--color-border-strong);
  color: var(--color-white);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-2) var(--space-2) var(--space-3);
}

.product__cat {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--color-green);
}

.product__name {
  font-size: var(--fs-xl);
  margin: 0.2rem 0 0.3rem;
}

.product__name a {
  color: var(--color-white);
}

.product__name a:hover {
  color: var(--color-green);
}

.product__format {
  font-size: 0.8rem;
  color: var(--color-text-muted-inverse);
  margin-bottom: var(--space-1);
}

.product__short {
  font-size: var(--fs-sm);
  color: var(--color-text-muted-inverse);
}

.product__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}

.product__price {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--color-white);
}

/* Order-request button floating on the shop page */
.order-fab {
  position: fixed;
  left: var(--space-2);
  bottom: var(--space-2);
  z-index: 940;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.8em 1.2em;
  border-radius: 999px;
  background: var(--gradient-brand);
  color: var(--color-charcoal);
  font-weight: 700;
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-md);
}

.order-fab[hidden] {
  display: none;
}

.order-fab svg {
  width: 20px;
  height: 20px;
}

.order-fab__count {
  min-width: 1.6em;
  padding: 0.05em 0.45em;
  border-radius: 999px;
  background: var(--color-charcoal);
  color: var(--color-white);
  text-align: center;
}

@keyframes fab-pulse {
  50% { transform: scale(1.08); }
}

.order-fab--pulse {
  animation: fab-pulse 0.35s ease-in-out;
}

/* Dialogs (product detail + order request) */
.sheet {
  /* The global "* { margin: 0 }" reset removes the browser's own centring */
  margin: auto;
  width: min(880px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #03202e;
  color: var(--color-text);
  box-shadow: var(--shadow-md);
}

.sheet::backdrop {
  background: rgba(0, 10, 16, 0.72);
}

.sheet--narrow {
  width: min(560px, calc(100vw - 2rem));
}

.sheet__close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 22, 33, 0.8);
  border: 1px solid var(--color-border-strong);
  color: var(--color-white);
}

.sheet__close svg {
  width: 18px;
  height: 18px;
}

.sheet__inner {
  padding: var(--space-4) var(--space-3) var(--space-3);
}

.sheet__inner h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
}

.pd {
  display: grid;
  grid-template-columns: 1fr;
}

.pd__media {
  background: #04202e;
}

.pd__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: var(--space-3);
}

.pd__info {
  padding: var(--space-3);
}

.pd__name {
  font-size: var(--fs-h3);
  margin: 0.2rem 0 var(--space-1);
}

.pd__price {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 0.2rem;
}

.pd__long {
  color: var(--color-text-muted-inverse);
}

.pd__stock {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-green);
}

.pd__stock--out {
  color: #ffb4ab;
}

.pd__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.pd__more {
  font-size: var(--fs-sm);
}

.pd__fda {
  margin: var(--space-2) 0 0;
  padding: var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  font-size: 0.78rem;
  color: var(--color-cream);
}

.order__list {
  margin-bottom: var(--space-3);
}

.order__line {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

.order__thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
}

.order__name {
  display: block;
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.3;
}

.order__meta {
  font-size: 0.8rem;
  color: var(--color-text-muted-inverse);
}

.order__qty {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.order__step {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  color: var(--color-white);
  font-size: 1.1rem;
  line-height: 1;
}

.order__num {
  min-width: 1.5em;
  text-align: center;
  font-weight: 700;
}

.order__total {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-2);
  color: var(--color-white);
}

.order__empty {
  color: var(--color-text-muted-inverse);
}

.order__note {
  font-size: 0.8rem;
  color: var(--color-text-muted-inverse);
}

.order__form .form-row {
  margin-bottom: var(--space-2);
}

/* ---------- 16c. Library (public previews + members) ---------- */
.guide-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  font-size: var(--fs-sm);
  color: var(--color-text-muted-inverse);
}

.lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--color-green);
}

.lock-badge svg {
  width: 14px;
  height: 14px;
}

.card .lock-badge {
  margin-bottom: var(--space-1);
}

.toc {
  counter-reset: toc;
}

.toc li {
  counter-increment: toc;
  display: flex;
  gap: 0.75em;
  padding: 0.7em 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted-inverse);
}

.toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-green);
}

/* "This guide is free" donation panel at the end of each guide */
.give-box {
  position: relative;
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse at top, rgba(120, 215, 133, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.03);
  text-align: center;
}

.give-box__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-2);
  color: var(--color-green);
}

.give-box h2 {
  font-size: var(--fs-h3);
  margin: 0 0 var(--space-1);
}

.give-box p {
  color: var(--color-text-muted-inverse);
}

.give-box__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
}

.plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.plan {
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.plan--featured {
  border-color: var(--color-green);
  background: rgba(120, 215, 133, 0.06);
}

.plan h3 {
  font-size: var(--fs-xl);
}

.plan__price {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-white);
  margin: var(--space-1) 0 0;
}

.plan__per {
  font-size: var(--fs-sm);
  color: var(--color-text-muted-inverse);
}

.plan .btn {
  margin-top: auto;
}

.related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2);
}

.related a {
  display: block;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-white);
  font-weight: 600;
  transition: border-color var(--transition), background-color var(--transition);
}

.related a:hover {
  border-color: var(--color-green);
  background-color: rgba(255, 255, 255, 0.04);
}

.related span {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--color-green);
}

.member-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-text-muted-inverse);
}

.member-form {
  max-width: 420px;
  margin-inline: auto;
}


/* Contents box at the top of each guide */
.toc-box {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
}

.prose .toc-box h2 {
  margin-top: 0;
  font-size: var(--fs-xl);
}

.toc a {
  color: var(--color-cream);
  text-decoration: none;
}

.toc a:hover {
  color: var(--color-green);
  text-decoration: underline;
}

/* Donate page */
.give-pending {
  max-width: 640px;
  margin: 0 auto var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--color-blue);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  text-align: center;
}

.give-pending[hidden] {
  display: none;
}

.facts {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
}

.facts div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--space-2);
  padding-block: 0.4rem;
  border-bottom: 1px solid var(--color-border);
}

.facts div:last-child {
  border-bottom: 0;
}

.facts dt {
  color: var(--color-text-muted-inverse);
}

.facts dd {
  margin: 0;
  font-weight: 600;
  color: var(--color-white);
}

.plan__price {
  overflow-wrap: anywhere;
}

/* ---------- 16d. "Ask Bethsan" assistant ---------- */
.assistant-launcher {
  position: fixed;
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 950;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.8em 1.15em;
  border-radius: 999px;
  background: var(--color-charcoal);
  border: 1px solid var(--color-border-strong);
  color: var(--color-white);
  font-weight: 600;
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-md);
  transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.assistant-launcher:hover,
.assistant-launcher.is-active {
  background: var(--color-white);
  color: var(--color-charcoal);
}

.assistant-launcher svg {
  width: 22px;
  height: 22px;
}

.assistant {
  position: fixed;
  right: var(--space-2);
  bottom: calc(var(--space-2) + 64px);
  z-index: 960;
  width: min(390px, calc(100vw - 2rem));
  height: min(600px, calc(100vh - 140px));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: #03202e;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  animation: panel-rise 0.25s ease-out both;
}

.assistant[hidden] {
  display: none;
}

.assistant__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding: 0.8rem 0.6rem 0.8rem 1rem;
  background: var(--gradient-brand);
  color: var(--color-charcoal);
}

.assistant__title {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-charcoal);
}

.assistant__sub {
  margin: 0;
  font-size: 0.72rem;
  color: var(--color-charcoal);
}

.assistant__tools {
  display: flex;
}

.assistant__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-charcoal);
}

.assistant__icon:hover {
  background: rgba(0, 22, 33, 0.12);
}

.assistant__icon svg {
  width: 18px;
  height: 18px;
}

.assistant__log {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overscroll-behavior: contain;
}

.assistant__msg {
  max-width: 88%;
  margin: 0;
  padding: 0.6em 0.9em;
  border-radius: 14px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  white-space: pre-line;
}

.assistant__msg--bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.07);
  border-bottom-left-radius: 4px;
  color: var(--color-cream);
}

.assistant__msg--user {
  align-self: flex-end;
  background: var(--color-blue);
  border-bottom-right-radius: 4px;
  color: var(--color-charcoal);
  font-weight: 500;
}

.assistant__msg.is-new {
  animation: panel-rise 0.2s ease-out both;
}

.assistant__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0 var(--space-2) var(--space-1);
  max-height: 40%;
  overflow-y: auto;
}

.assistant__options:empty {
  display: none;
}

.assistant__chip {
  padding: 0.45em 0.85em;
  border: 1px solid var(--color-green);
  border-radius: 999px;
  color: var(--color-green);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.assistant__chip:hover {
  background: var(--color-green);
  color: var(--color-charcoal);
}

.assistant__chip--link {
  border-color: var(--color-border-strong);
  color: var(--color-white);
}

.assistant__chip--link::after {
  content: " →";
}

.assistant__form {
  display: flex;
  gap: 0.4rem;
  padding: var(--space-1) var(--space-2);
  border-top: 1px solid var(--color-border);
}

.assistant__input {
  flex: 1;
  min-width: 0;
  padding: 0.65em 0.9em;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-white);
  font-size: var(--fs-sm);
}

.assistant__input::placeholder {
  color: var(--color-text-muted-inverse);
}

.assistant__send {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: var(--color-charcoal);
}

.assistant__send svg {
  width: 18px;
  height: 18px;
}

.assistant__foot {
  margin: 0;
  padding: 0 var(--space-2) var(--space-1);
  font-size: 0.68rem;
  color: var(--color-text-muted-inverse);
  text-align: center;
}

/* Keeps the assistant button from covering the shop's order button on phones */
@media (max-width: 480px) {
  .assistant {
    right: 0.5rem;
    left: 0.5rem;
    width: auto;
    bottom: calc(0.5rem + 60px);
    height: calc(100vh - 150px);
  }
  .assistant-launcher span {
    display: none;
  }
  .assistant-launcher {
    padding: 0.85em;
  }
}

@media (min-width: 768px) {
  .shop__toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .shop__search {
    flex: 0 0 260px;
  }
  .pd {
    grid-template-columns: 1fr 1fr;
  }
  .pd__info {
    padding: var(--space-4) var(--space-4) var(--space-3);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
  .plans {
    grid-template-columns: repeat(3, 1fr);
  }
  .sheet__inner {
    padding: var(--space-4);
  }
}

@media print {
  .assistant,
  .assistant-launcher,
  .order-fab,
  .give-box {
    display: none !important;
  }
}

/* ---------- 17. Print ---------- */
@media print {
  #bg,
  .site-header,
  .nav__toggle,
  .newsletter,
  .site-footer,
  .skip-link {
    display: none !important;
  }

  body {
    background: var(--color-white);
    color: #000;
  }

  .page-panel {
    background: none;
    border: none;
    box-shadow: none;
    max-width: 100%;
    animation: none;
  }

  h1, h2, h3, h4 {
    color: #000;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .hero h1,
  .hero p,
  .card p,
  .section-header p,
  .prose ul li,
  .nursing__list li,
  .pullquote p,
  .callout {
    color: #000;
  }
}