/* =========================================================================
 * Green IT Hub - Stylesheet
 *
 * Light, airy default theme with a deep-green dark theme under
 * [data-theme="dark"]. Every design token is defined in both themes, so
 * components never need to know which theme is active.
 *
 * Typography is fully self-hosted (no external font service): Bricolage
 * Grotesque for display and Hanken Grotesk for body, shipped as variable
 * woff2 in /assets/fonts. Font files are referenced with paths relative to
 * this stylesheet, so they resolve whether the site is served from the
 * domain root or a sub-folder.
 * ======================================================================= */

/* ---------- Self-hosted variable fonts ---------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/bricolage-grotesque-latin.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: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/hanken-grotesk-latin.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: 'Hanken Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* ---------- Design tokens ----------
 * 2026 refresh: light, airy default theme. The deep-green dark theme is
 * retained under [data-theme="dark"] further below — every token name is
 * defined in both, so components never need to know which theme is active.
 */
:root {
  /* Surface system (light — warm paper white with a hint of sage) */
  --bg: #f4f7f1;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-raised: #eef3ea;
  --surface-hover: #e7efe2;
  --surface-glass: rgba(255, 255, 255, 0.74);
  --glass: rgba(244, 247, 241, 0.82);

  /* Ink (deep forest, not pure black) */
  --ink: #112318;
  --ink-soft: rgba(17, 35, 24, 0.74);
  --ink-muted: rgba(17, 35, 24, 0.52);
  --ink-dim: rgba(17, 35, 24, 0.34);

  /* Accent (leaf-emerald — vivid and readable on white) */
  --accent: #1f8a52;
  --accent-bright: #28a862;
  --accent-deep: #14633a;
  --accent-soft: rgba(31, 138, 82, 0.10);
  --accent-glow: rgba(31, 138, 82, 0.16);
  --accent-border: rgba(31, 138, 82, 0.26);
  --accent-border-strong: rgba(31, 138, 82, 0.46);

  /* Text colour to sit *on top of* the accent (buttons, badges, selection) */
  --on-accent: #ffffff;

  /* Functional */
  --rule: rgba(17, 35, 24, 0.10);
  --rule-strong: rgba(17, 35, 24, 0.17);

  /* Semantic accents (shared hues, tuned for contrast on light) */
  --warn: #c08a1e;
  --tip: #2a9d96;
  --danger: #c0392b;
  --danger-ink: #9e2820;

  /* Soft elevation */
  --shadow-sm: 0 1px 2px rgba(17, 35, 24, 0.05), 0 4px 12px -8px rgba(17, 35, 24, 0.14);
  --shadow-md: 0 2px 6px rgba(17, 35, 24, 0.06), 0 18px 38px -22px rgba(17, 35, 24, 0.22);

  /* Type ramps */
  --display: 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, sans-serif;
  --body: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, sans-serif;

  /* Spatial */
  --max-w: 1240px;
  --gutter: clamp(20px, 4vw, 56px);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
}

/* ---------- Dark theme (retained, refined) ---------- */
[data-theme="dark"] {
  --bg: #0a1612;
  --bg-elevated: #0f1f1a;
  --surface: #131e19;
  --surface-raised: #182622;
  --surface-hover: #1d2c27;
  --surface-glass: rgba(15, 31, 26, 0.72);
  --glass: rgba(10, 22, 18, 0.72);

  --ink: #ecf3ef;
  --ink-soft: rgba(236, 243, 239, 0.72);
  --ink-muted: rgba(236, 243, 239, 0.48);
  --ink-dim: rgba(236, 243, 239, 0.32);

  --accent: #8fd3a8;
  --accent-bright: #a8e8bf;
  --accent-deep: #5fa77b;
  --accent-soft: rgba(143, 211, 168, 0.12);
  --accent-glow: rgba(143, 211, 168, 0.18);
  --accent-border: rgba(143, 211, 168, 0.28);
  --accent-border-strong: rgba(143, 211, 168, 0.45);

  --on-accent: #0a1612;

  --rule: rgba(236, 243, 239, 0.07);
  --rule-strong: rgba(236, 243, 239, 0.14);

  --warn: #e8b84d;
  --tip: #6fc7c2;
  --danger: #e85f5f;
  --danger-ink: rgba(255, 180, 180, 0.95);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 6px 18px -10px rgba(0, 0, 0, 0.50);
  --shadow-md: 0 12px 30px -10px rgba(0, 0, 0, 0.55);
}

/* ---------- Reset & base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  /* Atmospheric background: subtle radial green tints + faint grid */
  background-image:
    radial-gradient(circle at 12% 0%, rgba(143, 211, 168, 0.08), transparent 45%),
    radial-gradient(circle at 88% 30%, rgba(95, 167, 123, 0.06), transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(143, 211, 168, 0.04), transparent 60%);
  background-attachment: fixed;
}

/* Subtle dot grid texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(143, 211, 168, 0.06) 1px, transparent 0);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
}

main { flex: 1; width: 100%; position: relative; z-index: 1; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.18s ease;
}

a:hover { color: var(--accent-bright); }

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

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

/* ---------- Type utilities ---------- */
.eyelash {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eyelash::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  box-shadow: 0 0 12px var(--accent-glow);
}

.section-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

.section-title .accent { color: var(--accent); }

/* =========================================================================
 * NAVIGATION
 * =======================================================================*/
.greenit-header {
  border-bottom: 1px solid var(--rule);
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  position: sticky;
  top: 0;
  z-index: 50;
}

.greenit-top {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

/* ---------- Mobile menu toggle (CSS-only, no JS) ----------
   The checkbox is visually hidden but kept focusable. Its checked state
   drives the hamburger animation and the menu's open/close behaviour. */
.nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.nav-burger {
  display: none;            /* shown only on mobile via media query */
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.nav-burger:hover {
  background: var(--surface-raised);
  border-color: var(--accent-border);
}

.nav-burger__icon,
.nav-burger__icon::before,
.nav-burger__icon::after {
  content: '';
  display: block;
  width: 18px;
  height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
  position: relative;
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease, bottom 0.25s ease;
}

.nav-burger__icon::before,
.nav-burger__icon::after {
  position: absolute;
  left: 0;
}

.nav-burger__icon::before { top: -6px; }
.nav-burger__icon::after  { bottom: -6px; }

/* Animate to "X" when checkbox is checked */
.nav-toggle:checked ~ .nav-burger .nav-burger__icon {
  background: transparent;
}
.nav-toggle:checked ~ .nav-burger .nav-burger__icon::before {
  top: 0;
  transform: rotate(45deg);
}
.nav-toggle:checked ~ .nav-burger .nav-burger__icon::after {
  bottom: 0;
  transform: rotate(-45deg);
}

.greenit-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1;
}

.greenit-brand::before {
  content: '';
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  box-shadow: 0 0 18px var(--accent-glow), inset 0 0 0 1px rgba(255,255,255,0.18);
  position: relative;
}

.greenit-brand .badge {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  margin-left: 4px;
}

.greenit-menu {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}

.greenit-menu a {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.greenit-menu a:hover {
  color: var(--ink);
  background: var(--surface);
}

.greenit-menu a.active {
  color: var(--ink);
  background: var(--surface-raised);
  border-color: var(--rule-strong);
}

/* ---------- Responsive nav: collapse on small screens ---------- */
@media (max-width: 760px) {
  .nav-burger {
    display: inline-flex;
  }

  /* Menu becomes a slide-down drawer */
  .greenit-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px var(--gutter) 18px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--rule-strong);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.55);

    /* Closed state */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease, visibility 0s linear 0.3s;
  }

  .nav-toggle:checked ~ .greenit-menu {
    max-height: 480px;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.3s ease, opacity 0.25s ease, visibility 0s linear 0s;
  }

  .greenit-menu a {
    padding: 12px 14px;
    font-size: 15px;
  }

  /* Make the header positioning context for the absolute menu */
  .greenit-header {
    position: sticky;
  }
  .greenit-top {
    position: relative;
  }
}

/* =========================================================================
 * HOME PAGE - HERO
 * =======================================================================*/
.page-home { display: block; }

.hero {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(28px, 3vw, 56px) var(--gutter) clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

@media (min-width: 920px) {
  .hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

.hero__text {
  max-width: 640px;
  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 24px;
}

.hero__title .accent {
  color: var(--accent);
  font-style: normal;
  position: relative;
}

/* Subtle glow under accent word */
.hero__title .accent::after {
  content: '';
  position: absolute;
  inset: 20% -8% -10% -8%;
  background: radial-gradient(closest-side, var(--accent-glow), transparent 70%);
  z-index: -1;
  filter: blur(12px);
}

.hero__lede {
  font-family: var(--body);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 36px;
  max-width: 52ch;
}

.hero__cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease,
              gap 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 0 1px rgba(143,211,168,0.35), 0 8px 28px -10px var(--accent-glow);
}

.btn-primary:hover {
  background: var(--accent-bright);
  color: var(--on-accent);
  gap: 14px;
  transform: translateY(-1px);
}

.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--rule-strong);
}

.btn-ghost:hover {
  background: var(--surface-raised);
  color: var(--ink);
  border-color: var(--accent-border);
}

.btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Hero illustration */
.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fade 1.2s ease 0.2s both;
}

.hero__visual svg {
  width: 100%;
  max-width: 480px;
  height: auto;
}

/* =========================================================================
 * THE FOUR RS
 * =======================================================================*/
.rs {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 72px) var(--gutter) clamp(60px, 8vw, 110px);
}

.rs__header {
  max-width: 720px;
  margin: 0 0 clamp(32px, 5vw, 56px);
}

.rs__intro {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 60ch;
}

.rs__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .rs__list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1080px) {
  .rs__list { grid-template-columns: repeat(4, 1fr); }
}

.rs__item {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.rs__item:hover {
  background: var(--surface-raised);
  border-color: var(--accent-border);
  transform: translateY(-2px);
}

.rs__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 4px;
}

.rs__icon svg { width: 20px; height: 20px; }

.rs__num {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  margin: 0;
  text-transform: uppercase;
}

.rs__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

.rs__note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* =========================================================================
 * AUDIENCE PATHS
 * =======================================================================*/
.paths {
  position: relative;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-elevated);
}

.paths__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(60px, 8vw, 110px) var(--gutter);
}

.paths__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 0 0 clamp(32px, 5vw, 48px);
  align-items: end;
}

@media (min-width: 800px) {
  .paths__header { grid-template-columns: 1fr auto; }
}

.paths__lede {
  margin: 0;
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 36ch;
  justify-self: end;
}

.paths__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 920px) {
  .paths__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-auto-rows: 1fr;
  }
}

.path-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  color: var(--ink);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  min-height: 240px;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.25s ease,
              background 0.25s ease;
}

.path-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-border-strong);
  background: var(--surface-raised);
}

.path-card:hover .path-card__cta {
  gap: 12px;
  color: var(--accent);
}

.path-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.path-card__pill {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(236, 243, 239, 0.05);
  border: 1px solid var(--rule-strong);
}

.path-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.path-card__icon svg { width: 18px; height: 18px; }

.path-card__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 4px 0 0;
}

.path-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}

.path-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 14px 0 0;
  transition: gap 0.2s ease, color 0.2s ease;
}

.path-card__cta-arrow {
  font-family: var(--body);
  font-weight: 600;
  font-size: 16px;
}

/* Featured first card — bright accent treatment */
.path-card--featured {
  background: linear-gradient(140deg,
    rgba(143, 211, 168, 0.16),
    rgba(143, 211, 168, 0.04) 60%,
    var(--surface) 100%);
  border-color: var(--accent-border-strong);
}

.path-card--featured::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg,
    var(--accent-border-strong),
    transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.path-card--featured .path-card__icon {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.path-card--featured .path-card__pill {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.path-card--featured:hover {
  transform: translateY(-3px);
}

/* =========================================================================
 * FOOTER
 * =======================================================================*/
.page-footer-rich {
  background: var(--bg);
  padding: clamp(40px, 5vw, 64px) var(--gutter);
  border-top: 1px solid var(--rule);
}

.page-footer-rich__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  align-items: end;
}

@media (min-width: 720px) {
  .page-footer-rich__inner { grid-template-columns: 1fr 1fr; }
}

.page-footer-rich__brand {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.page-footer-rich__brand::before {
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  box-shadow: 0 0 12px var(--accent-glow);
}

.page-footer-rich__meta {
  font-size: 12px;
  color: var(--ink-muted);
  margin: 0;
  letter-spacing: 0.04em;
  justify-self: start;
}

@media (min-width: 720px) {
  .page-footer-rich__meta {
    justify-self: end;
    text-align: right;
  }
}

/* =========================================================================
 * MESSAGE BANNER
 * =======================================================================*/
.msg-banner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 12px var(--gutter);
  font-size: 13px;
  color: var(--accent);
  background: var(--accent-soft);
  border-top: 1px solid var(--accent-border);
  border-bottom: 1px solid var(--accent-border);
}

/* =========================================================================
 * SHARED COMPONENT STYLES (used by sub-pages)
 * =======================================================================*/
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) var(--gutter);
}

.card {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.article {
  padding: clamp(32px, 4vw, 56px);
}

.article h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 24px;
}

.article h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--accent);
  margin: 32px 0 12px;
  letter-spacing: -0.01em;
}

.article p,
.article li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 65ch;
}

.article ul { padding-left: 22px; }

.article code {
  background: var(--surface-raised);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  font-size: 0.9em;
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  color: var(--accent);
  border: 1px solid var(--rule-strong);
}

/* Quiz styles */
.quiz-question {
  padding: 24px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  margin-bottom: 14px;
}

.quiz-question h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  margin: 0 0 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.quiz-options { display: grid; gap: 8px; }

.quiz-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--bg-elevated);
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.quiz-option:hover {
  background: var(--surface-raised);
  border-color: var(--accent-border);
}

.quiz-option input { accent-color: var(--accent); }

.quiz-option.is-correct {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.quiz-option.is-wrong {
  border-color: rgba(220, 120, 120, 0.55);
  background: rgba(220, 120, 120, 0.10);
}

.btn-action {
  appearance: none;
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}

.btn-action:hover {
  background: var(--accent-bright);
  transform: translateY(-1px);
}

.btn-action.secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
}

.pill {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
}

/* =========================================================================
 * ANIMATIONS
 * =======================================================================*/
@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes draw { to { stroke-dashoffset: 0; } }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

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

/* =========================================================================
 * PRIVATE USERS PAGE — structured content components
 *
 * Prefix: .pv- (for "private view")
 * The whole page lives inside a single .pv-card container, matching the
 * homepage visual language. Sections inside the card are separated by
 * subtle rule-lines rather than gaps in space.
 * =======================================================================*/

.pv-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 36px) var(--gutter) clamp(48px, 6vw, 96px);
}

/* ---------- Card container (matches .card on the homepage) ---------- */
.pv-card {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---------- Hero (top of card) ---------- */
.pv-hero {
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(circle at 100% 0%, rgba(143, 211, 168, 0.08), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(143, 211, 168, 0.04), transparent 60%);
}

.pv-hero--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}

@media (min-width: 880px) {
  .pv-hero--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

.pv-hero__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.pv-eyelash {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pv-eyelash::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.pv-hero__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}

.pv-hero__lede {
  font-family: var(--body);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
}

/* Stat box inside hero */
.pv-stat {
  margin-top: 8px;
  padding: 16px 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 480px;
}

.pv-stat__number {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 38px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin: 0;
  flex-shrink: 0;
}

.pv-stat__label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

.pv-hero__visual {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pv-hero__visual svg {
  width: 100%;
  max-width: 380px;
  height: auto;
}

/* ---------- Section frame (every block inside the card) ---------- */
.pv-section {
  padding: clamp(28px, 4vw, 44px) clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pv-section:last-child { border-bottom: 0; }

/* Aside callout when used as top-level: full-width section padding */
.pv-card > .pv-callout {
  margin: 0 clamp(28px, 4vw, 48px);
  margin-bottom: clamp(28px, 4vw, 44px);
}

.pv-card > .pv-callout:first-child,
.pv-section + .pv-callout {
  margin-top: clamp(28px, 4vw, 44px);
}

.pv-section__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.pv-section__title::before {
  content: '';
  width: 4px;
  height: 0.85em;
  background: var(--accent);
  border-radius: 1px;
  flex-shrink: 0;
  align-self: center;
}

.pv-section__kicker {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: -10px 0 0;
}

/* ---------- Standalone SVG block ---------- */
.pv-svg-block {
  display: flex;
  justify-content: center;
  padding: 12px 0 4px;
}

.pv-svg-block svg {
  width: 100%;
  max-width: 480px;
  height: auto;
}

/* ---------- Prose ---------- */
.pv-prose {
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.7;
}

.pv-prose p { margin: 0 0 12px; }
.pv-prose p:last-child { margin-bottom: 0; }

.pv-prose strong,
.pv-callout__body strong,
.pv-callout__list strong,
.pv-checklist strong,
.pv-table strong,
.pv-link-card strong {
  color: var(--ink);
  font-weight: 600;
}

.pv-prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-border);
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.pv-prose a:hover {
  color: var(--accent-bright);
  text-decoration-color: var(--accent);
}

/* ---------- Callouts ---------- */
.pv-callout {
  border-radius: var(--r-md);
  padding: 20px 22px;
  background: var(--bg-elevated);
  border: 1px solid var(--rule-strong);
  border-left-width: 3px;
}

.pv-callout__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pv-callout__title::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pv-callout__body { color: var(--ink-soft); font-size: 14.5px; line-height: 1.65; }
.pv-callout__body p { margin: 0 0 10px; }
.pv-callout__body p:last-child { margin-bottom: 0; }

.pv-callout__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pv-callout__list li {
  padding-left: 26px;
  position: relative;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

.pv-callout__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* Tone variants */
.pv-callout--info     { border-left-color: var(--accent); }
.pv-callout--info     .pv-callout__title::before { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }

.pv-callout--warning  { border-left-color: #e8b84d; background: rgba(232, 184, 77, 0.06); }
.pv-callout--warning  .pv-callout__title::before { background: #e8b84d; box-shadow: 0 0 10px rgba(232, 184, 77, 0.3); }
.pv-callout--warning  .pv-callout__list li::before { border-color: #e8b84d; }

.pv-callout--success  { border-left-color: var(--accent-bright); background: rgba(168, 232, 191, 0.05); }
.pv-callout--success  .pv-callout__title::before { background: var(--accent-bright); }

.pv-callout--tip      { border-left-color: #6fc7c2; background: rgba(111, 199, 194, 0.05); }
.pv-callout--tip      .pv-callout__title::before { background: #6fc7c2; }

/* ---------- Card grid (link cards) ---------- */
.pv-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 6px;
}

.pv-link-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  position: relative;
  min-height: 150px;
}

.pv-link-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-border-strong);
  background: var(--surface-raised);
}

.pv-link-card__tag {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: rgba(236, 243, 239, 0.05);
  border: 1px solid var(--rule-strong);
}

.pv-link-card--local .pv-link-card__tag {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.pv-link-card__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  padding-right: 56px;
}

.pv-link-card__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}

.pv-link-card__url {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--accent);
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  word-break: break-all;
}

/* ---------- Accordion ---------- */
.pv-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.pv-accordion__item {
  background: var(--bg-elevated);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.pv-accordion__item[open] {
  border-color: var(--accent-border);
  background: var(--surface-raised);
}

.pv-accordion__summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
  user-select: none;
  transition: background 0.15s ease;
}

.pv-accordion__summary::-webkit-details-marker { display: none; }
.pv-accordion__summary::marker { display: none; }
.pv-accordion__summary:hover { background: var(--surface-hover); }

.pv-accordion__marker {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-border-strong);
  background: transparent;
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.pv-accordion__marker::before,
.pv-accordion__marker::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--accent);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.pv-accordion__marker::before {
  width: 10px;
  height: 1.8px;
  transform: translate(-50%, -50%);
}

.pv-accordion__marker::after {
  width: 1.8px;
  height: 10px;
  transform: translate(-50%, -50%);
}

.pv-accordion__item[open] .pv-accordion__marker {
  background: var(--accent);
  border-color: var(--accent);
}

.pv-accordion__item[open] .pv-accordion__marker::before { background: var(--bg); }
.pv-accordion__item[open] .pv-accordion__marker::after  { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

.pv-accordion__title { flex: 1; }

.pv-accordion__badge {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
}

.pv-accordion__body {
  padding: 4px 20px 20px 56px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Sub-blocks inside accordion bodies should not have their own
   section padding — they live inside the accordion. */
.pv-accordion__body .pv-section {
  padding: 0;
  border-bottom: 0;
  gap: 12px;
}

.pv-accordion__body .pv-section__title {
  font-size: 16px;
  letter-spacing: -0.01em;
}

.pv-accordion__body .pv-section__title::before {
  width: 3px;
}

.pv-accordion__body .pv-table-wrap { margin-top: 0; }

@media (max-width: 560px) {
  .pv-accordion__body { padding: 4px 16px 18px; }
  .pv-accordion__summary { padding: 14px 16px; gap: 10px; font-size: 15px; }
  .pv-accordion__badge { display: none; }
}

/* ---------- Table ---------- */
.pv-table-wrap {
  overflow-x: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--rule-strong);
  background: var(--bg-elevated);
}

.pv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.pv-table caption {
  caption-side: top;
  padding: 14px 18px 10px;
  text-align: left;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-strong);
}

.pv-table thead th {
  text-align: left;
  padding: 12px 18px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--bg);
  border-bottom: 1px solid var(--rule-strong);
}

.pv-table tbody td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  vertical-align: top;
}

.pv-table tbody tr:last-child td { border-bottom: 0; }
.pv-table tbody tr:hover td { background: var(--surface-hover); color: var(--ink); }

.pv-table__note {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin: 10px 2px 0;
  line-height: 1.55;
}

/* ---------- Checklist ---------- */
.pv-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pv-checklist li {
  padding: 10px 14px 10px 40px;
  background: var(--bg-elevated);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
  position: relative;
}

.pv-checklist li::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 14px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* =========================================================================
 * LEARN PATH — interactive lesson components
 * Components used inside lessons: knowledge-check, lesson-progress,
 * path-card-grid, lesson-nav.
 * =======================================================================*/

/* ---------- Lesson progress bar ---------- */
.pv-progress {
  margin: 0 0 8px;
  padding: 14px 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
}

.pv-progress__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.pv-progress__path {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.pv-progress__count {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
}

.pv-progress__bar {
  height: 6px;
  background: var(--rule);
  border-radius: 999px;
  overflow: hidden;
}

.pv-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-bright), var(--accent));
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* ---------- Knowledge Check (CSS-only inline quiz) ---------- */
.kc {
  border: 1px solid var(--accent-border);
  border-radius: var(--r-md);
  background: linear-gradient(140deg,
    rgba(143, 211, 168, 0.06),
    rgba(143, 211, 168, 0.02) 60%,
    var(--surface) 100%);
  padding: 20px 22px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kc__legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.01em;
  padding: 0;
  margin-bottom: 4px;
}

.kc__badge {
  display: inline-block;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
}

.kc__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kc__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.kc__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  user-select: none;
}

.kc__option:hover {
  background: var(--surface-hover);
  border-color: var(--accent-border);
}

.kc__marker {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--rule-strong);
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.kc__marker::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.15s ease;
}

.kc__input:focus-visible + .kc__option {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.kc__input:checked + .kc__option .kc__marker {
  border-color: var(--accent);
  background: var(--accent);
}

.kc__input:checked + .kc__option .kc__marker::after {
  inset: 4px;
  background: #fff;
}

.kc__input--correct:checked + .kc__option {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.kc__input--wrong:checked + .kc__option {
  background: rgba(232, 184, 77, 0.10);
  border-color: rgba(232, 184, 77, 0.55);
}

.kc__input--wrong:checked + .kc__option .kc__marker {
  border-color: rgba(232, 184, 77, 0.85);
  background: rgba(232, 184, 77, 0.95);
}

.kc__input--wrong:checked + .kc__option .kc__marker::after {
  inset: 4px;
  background: #fff;
}

.kc__feedback {
  display: none;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.kc__feedback p {
  margin: 0;
  align-items: flex-start;
  gap: 10px;
}

.kc__feedback-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  margin-top: 1px;
}

/* Default: BOTH feedback messages hidden. Specificity must beat
   `.kc__feedback p` above (which would otherwise force display:flex). */
.kc__feedback .kc__feedback-correct,
.kc__feedback .kc__feedback-wrong { display: none; }

.kc:has(.kc__input--correct:checked) .kc__feedback {
  display: block;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--ink);
}

.kc:has(.kc__input--correct:checked) .kc__feedback .kc__feedback-correct {
  display: flex;
}

.kc:has(.kc__input--correct:checked) .kc__feedback-icon {
  background: var(--accent);
  color: var(--on-accent);
}

.kc:has(.kc__input--wrong:checked) .kc__feedback {
  display: block;
  background: rgba(232, 184, 77, 0.06);
  border: 1px solid rgba(232, 184, 77, 0.40);
  color: var(--ink);
}

.kc:has(.kc__input--wrong:checked) .kc__feedback .kc__feedback-wrong {
  display: flex;
}

.kc:has(.kc__input--wrong:checked) .kc__feedback-icon {
  background: rgba(232, 184, 77, 0.85);
  color: var(--on-accent);
}

/* ---------- Path Card Grid (lesson-garden / overview) ---------- */
.pv-path-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 6px;
}

@media (min-width: 760px) {
  .pv-path-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1080px) {
  .pv-path-grid { grid-template-columns: repeat(3, 1fr); }
}

.pv-path-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px 22px;
  background: var(--bg-elevated);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  color: var(--ink);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  min-height: 220px;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.25s ease,
              background 0.25s ease;
}

.pv-path-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-border-strong);
  background: var(--surface-raised);
}

.pv-path-card:hover .pv-path-card__cta {
  gap: 12px;
  color: var(--accent);
}

.pv-path-card__kicker {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

.pv-path-card__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 4px 0 0;
}

.pv-path-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}

.pv-path-card__meta {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin: 0;
  letter-spacing: 0.02em;
}

.pv-path-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 14px 0 0;
  transition: gap 0.2s ease, color 0.2s ease;
}

.pv-path-card--featured {
  background: linear-gradient(140deg,
    rgba(143, 211, 168, 0.16),
    rgba(143, 211, 168, 0.04) 60%,
    var(--surface) 100%);
  border-color: var(--accent-border-strong);
}

.pv-path-card--featured .pv-path-card__kicker { color: var(--accent); }

/* ---------- Lesson previous/next nav ---------- */
.pv-lesson-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

.pv-lesson-nav__btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  min-height: 76px;
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--surface) 100%);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  text-decoration: none;
  position: relative;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.pv-lesson-nav__btn:hover {
  background: linear-gradient(180deg, rgba(143,211,168,0.10) 0%, rgba(143,211,168,0.04) 100%);
  border-color: var(--accent-border-strong);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.pv-lesson-nav__btn:hover .pv-lesson-nav__title {
  color: var(--accent);
}

.pv-lesson-nav__btn:hover .pv-lesson-nav__arrow {
  color: var(--accent);
  transform: scale(1.1);
}

.pv-lesson-nav__btn--prev {
  justify-content: flex-start;
}

.pv-lesson-nav__btn--prev:hover .pv-lesson-nav__arrow {
  transform: scale(1.1) translateX(-3px);
}

.pv-lesson-nav__btn--next {
  justify-content: flex-end;
  text-align: right;
}

.pv-lesson-nav__btn--next:hover .pv-lesson-nav__arrow {
  transform: scale(1.1) translateX(3px);
}

.pv-lesson-nav__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.pv-lesson-nav__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.pv-lesson-nav__hint {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.pv-lesson-nav__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
  transition: color 0.18s ease;
}

/* Reserve a spacer column when there is no prev (or no next) so the existing
   button doesn't stretch full-width */
.pv-lesson-nav__spacer {
  display: block;
}

@media (max-width: 640px) {
  .pv-lesson-nav { grid-template-columns: 1fr; }
  .pv-lesson-nav__spacer { display: none; }
  .pv-lesson-nav__btn { min-height: 64px; padding: 14px 16px; }
}

/* =========================================================================
 * VIDEO EMBED
 * Responsive 16:9 video frame for YouTube/Vimeo embeds.
 * =======================================================================*/

.pv-video {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  background: var(--bg-elevated);
}

.pv-video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.pv-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.pv-video__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 18px;
  padding: 12px 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  background: var(--surface);
}

.pv-video__caption-main {
  flex: 1;
  min-width: 0;
}

.pv-video__credit {
  color: var(--ink-muted);
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* =========================================================================
 * ASSESSMENT — quiz form, review mode, claim form, certificate
 * =======================================================================*/

/* Quiz form: spacing between questions */
.pv-quiz-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 0 8px;
}

.pv-quiz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

/* Reusable button classes used by assessment + certificate pages */
.pv-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.pv-btn--primary {
  background: var(--accent-soft);
  border-color: var(--accent-border-strong);
  color: var(--accent);
}

.pv-btn--primary:hover {
  background: rgba(143, 211, 168, 0.20);
  transform: translateY(-1px);
}

.pv-btn--ghost {
  background: var(--bg-elevated);
  border-color: var(--rule-strong);
  color: var(--ink);
}

.pv-btn--ghost:hover {
  background: var(--surface-raised);
  border-color: var(--accent-border);
  transform: translateY(-1px);
}

/* Review-mode (graded) feedback styling. Each question is shown again with
   the chosen answer marked red and the correct answer marked green. */
.kc--reviewed .kc__option--review {
  cursor: default;
}

.kc--reviewed .kc__option--correct {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.kc--reviewed .kc__option--correct .kc__marker {
  border-color: var(--accent);
  background: var(--accent);
}

.kc--reviewed .kc__option--chosen-wrong {
  background: rgba(232, 95, 95, 0.10);
  border-color: rgba(232, 95, 95, 0.55);
}

.kc--reviewed .kc__option--chosen-wrong .kc__marker {
  border-color: rgba(232, 95, 95, 0.85);
  background: rgba(232, 95, 95, 0.85);
}

.kc__badge-mini {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
}

.kc__badge-mini--correct {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
}

.kc__badge-mini--wrong {
  background: rgba(232, 95, 95, 0.12);
  border: 1px solid rgba(232, 95, 95, 0.40);
  color: var(--danger-ink);
}

/* Force feedback display in review mode (overrides default-hidden state) */
.kc--reviewed .kc__feedback--review {
  display: block;
  padding: 14px 16px;
  margin-top: 12px;
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.6;
}

.kc--reviewed.kc--right .kc__feedback--review {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--ink);
}

.kc--reviewed.kc--right .kc__feedback-icon {
  background: var(--accent);
  color: var(--on-accent);
}

.kc--reviewed.kc--wrong .kc__feedback--review {
  background: rgba(232, 95, 95, 0.06);
  border: 1px solid rgba(232, 95, 95, 0.40);
  color: var(--ink);
}

.kc--reviewed.kc--wrong .kc__feedback-icon {
  background: rgba(232, 95, 95, 0.85);
  color: var(--on-accent);
}

.kc--reviewed.kc--right .kc__badge {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.kc--reviewed.kc--wrong .kc__badge {
  background: rgba(232, 95, 95, 0.10);
  border-color: rgba(232, 95, 95, 0.40);
  color: var(--danger-ink);
}

/* Claim form — name input for certificate */
.pv-claim-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  margin-top: 16px;
  padding: 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-md);
}

.pv-claim-form__label {
  display: block;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
  width: 100%;
  flex-basis: 100%;
}

.pv-claim-form__input {
  flex: 1;
  min-width: 240px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 15px;
  font-family: var(--body);
}

.pv-claim-form__input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

/* =========================================================================
 * 2026 DESIGN REFRESH v4 — lighter, calmer, more even, more inviting.
 * Replaces the earlier consolidated refresh block. It is the last thing in
 * the file, so it wins on equal specificity.
 *
 * Brief: an educational hub about extending hardware life (reuse, repair,
 * refurbish, recycle). Audience: private users, professionals, learners.
 * Direction: bright and airy, one quiet emerald accent, everything visually
 * equal — no card or section shouts over its peers. The single bold moment
 * is the hero's lifecycle loop; everything around it stays disciplined.
 *
 * The dark theme is untouched: light-only rules are scoped with
 * :root:not([data-theme="dark"]).
 * =======================================================================*/

/* ---------- 1 · Lighter, airier light palette ---------- */
:root:not([data-theme="dark"]) {
  --bg:            #fcfdfb;
  --bg-elevated:   #ffffff;
  --surface:       #ffffff;
  --surface-raised:#f4f8f1;
  --surface-hover: #edf4e8;
  --surface-glass: rgba(255, 255, 255, 0.80);
  --glass:         rgba(252, 253, 251, 0.86);

  --ink:       #19311f;
  --ink-soft:  rgba(25, 49, 31, 0.68);
  --ink-muted: rgba(25, 49, 31, 0.46);
  --ink-dim:   rgba(25, 49, 31, 0.26);

  --accent:               #1f9457;
  --accent-bright:        #2bb46c;
  --accent-deep:          #15703f;
  --accent-soft:          rgba(31, 148, 87, 0.07);
  --accent-glow:          rgba(31, 148, 87, 0.13);
  --accent-border:        rgba(31, 148, 87, 0.20);
  --accent-border-strong: rgba(31, 148, 87, 0.30);

  /* Hairline rules — kept very light so cards read as soft objects, not boxes. */
  --rule:        rgba(25, 49, 31, 0.055);
  --rule-strong: rgba(25, 49, 31, 0.10);

  /* Soft, diffuse elevation instead of hard borders. */
  --shadow-sm: 0 1px 2px rgba(25, 49, 31, 0.03), 0 12px 26px -18px rgba(25, 49, 31, 0.12);
  --shadow-md: 0 2px 10px rgba(25, 49, 31, 0.05), 0 30px 60px -34px rgba(25, 49, 31, 0.18);
}

/* A barely-there wash so the page is bright without being a flat slab. */
:root:not([data-theme="dark"]) body {
  background-image:
    radial-gradient(circle at 14% -10%, rgba(43, 180, 108, 0.040), transparent 46%),
    radial-gradient(circle at 90% 4%,  rgba(31, 148, 87, 0.030), transparent 52%);
}

/* ---------- 2 · Brand mark + hero illustration colour ---------- */
.greenit-brand::before { content: none; }
.greenit-brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep));
  box-shadow: 0 4px 12px -5px var(--accent-glow), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.greenit-brand__mark svg { width: 18px; height: 18px; }
.greenit-brand__text { white-space: nowrap; font-weight: 650; }
.hero__visual { color: var(--accent-deep); }

/* ---------- 3 · Clean, even top navigation ---------- */
.greenit-menu a {
  padding: 8px 13px;
  border: 0;
  border-radius: var(--r-pill);
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
}
.greenit-menu a:hover {
  color: var(--ink);
  background: var(--surface-hover);
}
/* Active page: a quiet emerald label, same shape as hover so nothing shouts. */
.greenit-menu a.active,
.greenit-menu a.active:hover {
  color: var(--accent);
  background: var(--accent-soft);
  border: 0;
  font-weight: 600;
}
.greenit-menu__sep {
  width: 1px;
  height: 20px;
  align-self: center;
  margin: 0 10px;
  background: var(--rule-strong);
}
.greenit-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-raised);
  border: 1px solid var(--rule);
}
.greenit-lang__opt {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
  border-radius: var(--r-pill);
  color: var(--ink-muted);
  background: transparent;
  border: 0;
  transition: color 0.16s ease, background 0.16s ease;
}
.greenit-lang__opt:hover { color: var(--ink); background: var(--surface-hover); }
.greenit-lang__opt.is-active,
.greenit-lang__opt.is-active:hover {
  color: var(--on-accent);
  background: var(--accent);
}
.greenit-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  background: var(--surface-raised);
  color: var(--ink-soft);
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.greenit-theme:hover {
  color: var(--accent);
  background: var(--surface-hover);
  border-color: var(--accent-border);
}
.greenit-theme__icon { display: inline-flex; }
.greenit-theme__icon svg { width: 18px; height: 18px; }
.greenit-top { padding-top: 14px; padding-bottom: 14px; gap: 14px; }
.greenit-menu { gap: 4px; }

/* ---------- 4 · One consistent heading treatment everywhere ----------
   Previously some section titles carried a green left-bar and others (the
   home page) used only an eyebrow. That uneven accent is exactly the
   "highlight one area, not the others" problem. We drop the bar entirely
   and let the small uppercase eyebrow be the single, shared signpost. */
.pv-section__title::before { content: none; }
.pv-section__title { gap: 0; }

/* Give every section a calm eyebrow rhythm: kicker sits just above title. */
.pv-section__kicker { margin: 0 0 2px; }

/* ---------- 5 · Visual equality: no singled-out card ----------
   Neutralise every "featured" variant so all cards weigh the same. */
.path-card--featured,
.pv-path-card--featured {
  background: var(--surface);
  border-color: var(--rule);
}
.path-card--featured::before,
.pv-path-card--featured::before { content: none; }
.path-card--featured .path-card__icon {
  background: var(--surface-raised);
  border-color: var(--rule);
  color: var(--accent);
}
.path-card--featured .path-card__pill {
  color: var(--ink-muted);
  background: var(--surface-raised);
  border-color: var(--rule);
}
.pv-path-card--featured .pv-path-card__kicker { color: var(--ink-muted); }

/* Soft, identical elevation + hairline border for every card (light theme). */
.path-card, .rs__item, .pv-card, .pv-path-card { border-radius: var(--r-lg); }
:root:not([data-theme="dark"]) .path-card,
:root:not([data-theme="dark"]) .rs__item,
:root:not([data-theme="dark"]) .pv-path-card {
  border-color: var(--rule);
  box-shadow: var(--shadow-sm);
}
:root:not([data-theme="dark"]) .pv-card {
  border-color: var(--rule);
  box-shadow: var(--shadow-sm);
}
:root:not([data-theme="dark"]) .path-card:hover,
:root:not([data-theme="dark"]) .rs__item:hover,
:root:not([data-theme="dark"]) .pv-path-card:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-md);
}

/* ---------- 6 · Equal-height cards with the action pinned to the bottom ----
   The visible "not clean" issue: cards in a row had different heights and the
   "start" links landed at different y-positions. Force the grid to stretch,
   make each card a full-height column, and let the description absorb the
   slack so the meta + call-to-action always rest on the same baseline. */
.pv-path-grid { align-items: stretch; }
.pv-path-card {
  height: 100%;
  min-height: 0;
}
.pv-path-card__desc { flex: 1 1 auto; }
/* meta (e.g. "10 questions · ~15 min") and CTA travel together at the bottom */
.pv-path-card__meta { margin-top: 0; }
.pv-path-card__cta  { margin-top: 14px; }

/* Same guarantee for the home-page path cards. */
.paths__grid { align-items: stretch; }
.path-card { height: 100%; }
.path-card__desc { flex: 1 1 auto; }

/* ---------- 7 · More generous, even spacing ---------- */
.pv-path-card { padding: 28px 26px 24px; }
.path-card { padding: clamp(24px, 2.6vw, 32px); gap: 14px; }
.rs__item  { padding: clamp(22px, 2.4vw, 28px); }
main > section { padding-top: clamp(28px, 5vw, 64px); padding-bottom: clamp(28px, 5vw, 64px); }
.pv-path-grid { gap: 18px; }

/* Roomier reading measure for body prose. */
.article p, .prose p, .pv-prose p { line-height: 1.72; }

/* Path hero: keep the intro to a comfortable measure so it reads as a
   deliberate column rather than text clinging to the left of an empty band. */
.pv-hero__main { max-width: 64ch; }

/* ---------- 8 · Mobile tidy-up ---------- */
@media (max-width: 760px) {
  .greenit-menu a { border-radius: var(--r-sm); }
  .greenit-menu__sep { width: auto; height: 1px; margin: 8px 0; align-self: stretch; }
  .greenit-lang, .greenit-theme { align-self: flex-start; }
}

/* ============================================================
   2026 REFRESH v5 — Certification cards + language switcher
   ============================================================ */

/* --- Certification page: highlight ALL three cards equally ---
   Scoped to .pv-path-grid--cert so the homepage / learning-path
   grids keep their calm, no-card-singled-out treatment. Works in
   both light and dark; higher specificity than the featured rules
   and the v4 neutralisation, so it wins regardless of order. */
.pv-path-grid--cert .pv-path-card {
  background: linear-gradient(150deg,
    rgba(143, 211, 168, 0.20),
    rgba(143, 211, 168, 0.05) 62%,
    var(--surface) 100%);
  border-color: var(--accent-border-strong);
}
.pv-path-grid--cert .pv-path-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.pv-path-grid--cert .pv-path-card__kicker { color: var(--accent); }
.pv-path-grid--cert .pv-path-card__cta { color: var(--accent); }

/* Light theme: lift the gradient a touch so it reads on the pale bg. */
:root:not([data-theme="dark"]) .pv-path-grid--cert .pv-path-card {
  background: linear-gradient(150deg,
    rgba(31, 138, 82, 0.10),
    rgba(31, 138, 82, 0.03) 62%,
    var(--surface) 100%);
}

/* --- Language switcher: more polished segmented control --- */
.greenit-lang {
  gap: 0;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}
.greenit-lang__opt {
  height: 26px;
  padding: 0 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.greenit-lang__opt:hover { color: var(--ink); background: transparent; }
.greenit-lang__opt.is-active,
.greenit-lang__opt.is-active:hover {
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

/* ============================================================
   2026 REFRESH v6 — Photography (hero media + path thumbnails)
   ============================================================ */

/* Hero photo panel (right column of .pv-hero--split when no SVG). */
.pv-hero__media {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 11;
  max-height: 360px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-md);
  background: var(--surface-raised);
}
.pv-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Subtle, theme-aware wash so photos sit calmly in the palette. */
.pv-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(143, 211, 168, 0.16), transparent 45%),
    linear-gradient(0deg, rgba(10, 22, 18, 0.30), transparent 55%);
  pointer-events: none;
}
:root:not([data-theme="dark"]) .pv-hero__media::after {
  background:
    linear-gradient(135deg, rgba(31, 138, 82, 0.12), transparent 45%),
    linear-gradient(0deg, rgba(17, 35, 24, 0.10), transparent 60%);
}

@media (max-width: 880px) {
  .pv-hero__media { aspect-ratio: 16 / 9; max-height: 260px; }
}

/* Homepage path-card thumbnail. */
.path-card__media {
  display: block;
  width: 100%;
  height: 136px;
  margin-bottom: 4px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--surface-raised);
}
.path-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.path-card:hover .path-card__media img { transform: scale(1.05); }

/* ============================================================
   2026 REFRESH v7 — Figure / chart block (raster images in lessons)
   ============================================================ */
.pv-figure { margin: 0; }
.pv-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
}
/* Chart variant: white panel so light-background diagrams read on any theme. */
.pv-figure--chart {
  background: #fdfdfb;
  padding: clamp(14px, 2.4vw, 24px);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-md);
}
.pv-figure--chart img {
  border: 0;
  border-radius: 6px;
  max-width: 760px;
  margin: 0 auto;
}
.pv-figure__caption {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pv-figure__caption-main {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.pv-figure__credit {
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

/* ============================================================
   2026 REFRESH v8 — Site-wide domain footer line
   ============================================================ */
.site-domain {
  text-align: center;
  padding: 22px 16px 28px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--rule);
  background: var(--bg);
}
.site-domain a {
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 0.16s ease;
}
.site-domain a:hover { color: var(--accent); }