/* Palette from the official SpellWare style guide (https://style.spellware.dev) */
:root {
  --purple: #2B1B3D;
  --plum: #44275A;
  --rose: #A8577E;
  --rose-deep: #8E4268;
  --mauve: #D4A5C7;
  --lavender: #E8D5E8;
  --black: #0A0009;
  --silver: #C0C0C0;
  --moon: #F5F5F5;
  --white: #FFFFFF;

  --font-brand: "Fraunces", Georgia, "Times New Roman", serif;
  --font-brand-variation: "opsz" 72, "SOFT" 50, "WONK" 0;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-body);

  --container: 1120px;
  --radius: 16px;
  --header-height: 68px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--purple);
  background: var(--moon);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
}

p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--plum);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--rose-deep); }

:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.sr-only {
  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: -100px;
  left: 16px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--white);
  color: var(--purple);
  font-weight: 600;
  border-radius: 8px;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  font: 600 1rem/1.2 var(--font-body);
  text-decoration: none;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--rose); color: var(--white); }
.btn-primary:hover { background: var(--rose-deep); color: var(--white); }

.btn-ghost { background: transparent; border-color: var(--mauve); color: var(--lavender); }
.btn-ghost:hover { background: rgba(212, 165, 199, 0.15); color: var(--white); }

.btn-dark { background: var(--plum); color: var(--white); }
.btn-dark:hover { background: var(--purple); color: var(--white); }

.btn-outline { background: transparent; border-color: var(--plum); color: var(--plum); }
.btn-outline:hover { background: var(--plum); color: var(--white); }

.btn-small { padding: 0.55rem 1.1rem; font-size: 0.95rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  background: rgba(10, 0, 9, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(212, 165, 199, 0.18);
}

.site-header .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-brand);
  font-size: 1.45rem;
  font-weight: 600;
  font-variation-settings: var(--font-brand-variation);
  letter-spacing: 0;
}
.brand:hover { color: var(--mauve); }
.brand img { width: 38px; height: 38px; object-fit: cover; border-radius: 8px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.nav-links a:not(.btn) {
  color: var(--lavender);
  text-decoration: none;
  font-size: 0.97rem;
  font-weight: 500;
}
.nav-links a:not(.btn):hover { color: var(--white); text-decoration: underline; }

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(212, 165, 199, 0.5);
  color: var(--lavender);
  border-radius: 8px;
  padding: 0.45rem 0.8rem;
  font: 600 0.92rem var(--font-body);
  cursor: pointer;
}

@media (max-width: 860px) {
  .menu-toggle { display: inline-flex; }
  .js .nav-links {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 24px;
    background: rgba(10, 0, 9, 0.98);
    border-bottom: 1px solid rgba(212, 165, 199, 0.18);
  }
  .js .nav-links.is-open { display: flex; }
  .js .nav-links a:not(.btn) { padding: 0.9rem 0; border-bottom: 1px solid rgba(212, 165, 199, 0.12); }
  .js .nav-links .btn { margin-top: 1rem; }
  html:not(.js) .nav-links { gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }
  html:not(.js) .site-header { height: auto; position: static; }
  html:not(.js) .site-header .container { padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--lavender);
  background:
    radial-gradient(55% 70% at 85% 15%, rgba(168, 87, 126, 0.38) 0%, transparent 62%),
    radial-gradient(50% 60% at 5% 95%, rgba(68, 39, 90, 0.7) 0%, transparent 65%),
    linear-gradient(180deg, var(--black) 0%, var(--purple) 100%);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 56px;
  align-items: center;
  padding-top: 96px;
  padding-bottom: 88px;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 1.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mauve);
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--white);
  margin-bottom: 0.45em;
}

.eyebrow-tagline { text-wrap: balance; text-transform: none; letter-spacing: 0; font-family: var(--font-brand); font-size: 1.3rem; font-weight: 600; font-variation-settings: var(--font-brand-variation); }
.hero-principle { max-width: 34rem; margin: -0.6rem 0 1.4rem; font-size: 1.05rem; line-height: 1.55; color: var(--silver); }

.hero-lead {
  max-width: 38rem;
  font-size: 1.2rem;
  color: var(--lavender);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 2rem;
}

.hero-note {
  margin: 1.5rem 0 0;
  font-size: 0.92rem;
  color: var(--mauve);
}

.hero-visual {
  display: flex;
  justify-content: center;
}

.hero-mark {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(212, 165, 199, 0.22), rgba(68, 39, 90, 0.35) 65%, transparent 72%);
  border: 2px solid rgba(212, 165, 199, 0.4);
  box-shadow: 0 0 80px rgba(168, 87, 126, 0.3);
  overflow: hidden;
}
.hero-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; padding-top: 64px; padding-bottom: 56px; }
  .hero-visual { order: -1; }
  .hero-mark { width: 150px; }
}

/* ---------- Proof strip ---------- */
.proof-strip {
  background: var(--black);
  border-top: 1px solid rgba(212, 165, 199, 0.18);
  border-bottom: 1px solid rgba(212, 165, 199, 0.18);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 36px 0;
  margin: 0;
}

.proof-item { text-align: center; }
.proof-item dt {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  color: var(--mauve);
}
.proof-item dd {
  margin: 0.35rem 0 0;
  font-size: 0.92rem;
  color: var(--lavender);
}

@media (max-width: 700px) {
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section-alt { background: rgba(232, 213, 232, 0.42); }
.section-white { background: var(--white); }

@media (max-width: 700px) {
  .section { padding: 64px 0; }
}

.section-head { max-width: 46rem; margin-bottom: 3rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.section-head .eyebrow { color: var(--rose-deep); }

.section-head h2 { font-size: clamp(1.9rem, 3.8vw, 2.7rem); color: var(--purple); }
.section-head p { font-size: 1.1rem; color: var(--plum); margin-bottom: 0; }

/* ---------- Services ---------- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.card {
  background: var(--white);
  border: 1px solid rgba(68, 39, 90, 0.16);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: 0 1px 2px rgba(43, 27, 61, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  border-color: rgba(168, 87, 126, 0.55);
  box-shadow: 0 14px 34px rgba(43, 27, 61, 0.1);
  transform: translateY(-2px);
}

.service-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1.25rem;
  border-radius: 12px;
  background: var(--purple);
  color: var(--mauve);
}
.service-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card h3 { font-size: 1.5rem; margin-bottom: 0.4em; color: var(--purple); }
.card > p { color: var(--plum); }

.check-list { margin: 1.25rem 0; }
.check-list li {
  position: relative;
  padding: 0.3rem 0 0.3rem 1.7rem;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.85rem;
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid var(--rose-deep);
  border-bottom: 2px solid var(--rose-deep);
  transform: rotate(-45deg);
}

.card-wide { grid-column: 1 / -1; }

.option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 1.75rem;
}
.option {
  padding: 24px;
  background: rgba(232, 213, 232, 0.28);
  border: 1px solid rgba(68, 39, 90, 0.14);
  border-radius: 12px;
}
.option h4 {
  margin: 0 0 0.4em;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--purple);
}
.option p { color: var(--plum); }
.option-audience {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose-deep);
}

.best-for {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(68, 39, 90, 0.14);
  font-size: 0.95rem;
  color: var(--plum);
}
.best-for strong { color: var(--purple); }

@media (max-width: 800px) {
  .grid-2 { grid-template-columns: 1fr; }
  .option-grid { grid-template-columns: 1fr; }
  .option { padding: 20px; }
  .card { padding: 26px; }
}

/* ---------- Principles ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
}

.principle h3 { font-size: 1.3rem; margin-bottom: 0.4em; }
.principle p { margin: 0; color: var(--plum); }
.principle-number {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--rose-deep);
}

@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-3 { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Process ---------- */
.process {
  background: var(--purple);
  color: var(--lavender);
}
.process .section-head h2 { color: var(--white); }
.process .section-head p { color: var(--lavender); }
.process .section-head .eyebrow { color: var(--mauve); }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 28px 24px;
  border: 1px solid rgba(212, 165, 199, 0.28);
  border-radius: var(--radius);
  background: rgba(10, 0, 9, 0.28);
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 0.8rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--mauve);
}
.step h3 { font-size: 1.25rem; color: var(--white); margin-bottom: 0.4em; }
.step p { margin: 0; font-size: 0.98rem; }

@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Evidence ---------- */
.evidence-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: start;
}

.quote-list { display: grid; gap: 20px; }
.quote {
  margin: 0;
  padding: 26px 28px;
  background: var(--white);
  border: 1px solid rgba(68, 39, 90, 0.16);
  border-left: 4px solid var(--rose);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.quote blockquote { margin: 0; }
.quote p { margin: 0; font-size: 1.05rem; color: var(--purple); }
.quote footer { margin-top: 0.7rem; font-size: 0.9rem; color: var(--plum); }

.credential-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 2rem 0 0;
}
.credential {
  padding: 16px 12px;
  text-align: center;
  background: var(--white);
  border: 1px solid rgba(68, 39, 90, 0.16);
  border-radius: 12px;
}
.credential dt {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--rose-deep);
}
.credential dd { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--plum); }

.link-list { margin-top: 1.5rem; }
.link-list li { padding: 0.35rem 0; }
.link-list a { font-weight: 600; }

@media (max-width: 900px) {
  .evidence-layout { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 520px) {
  .credential-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- About ---------- */
.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 56px;
  align-items: start;
}

.person-card {
  text-align: center;
  padding: 36px 28px;
  background: var(--white);
  border: 1px solid rgba(68, 39, 90, 0.16);
  border-radius: var(--radius);
}
.person-card img {
  width: 132px;
  height: 132px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--mauve);
  margin-bottom: 1rem;
}
.person-card h3 { font-size: 1.6rem; margin-bottom: 0.1em; }
.person-role { margin: 0 0 1.25rem; color: var(--rose-deep); font-weight: 600; }
.person-links { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; font-size: 0.95rem; }

.about-copy h2 { font-size: clamp(1.9rem, 3.8vw, 2.7rem); }
.about-copy p { color: var(--plum); }

.background-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1.5rem;
}
.background-list li {
  padding: 0.35rem 0.9rem;
  font-size: 0.92rem;
  background: var(--white);
  color: var(--purple);
  border: 1px solid rgba(68, 39, 90, 0.2);
  border-radius: 999px;
}

@media (max-width: 900px) {
  .about-layout { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Technology ---------- */
.tech-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
.tech-group h3 {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose-deep);
  margin-bottom: 0.8rem;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  padding: 0.3rem 0.8rem;
  font-size: 0.92rem;
  background: var(--moon);
  border: 1px solid rgba(68, 39, 90, 0.2);
  border-radius: 8px;
  color: var(--purple);
}
@media (max-width: 700px) { .tech-groups { grid-template-columns: 1fr; } }

/* ---------- Community band ---------- */
.community-band {
  padding: 72px 0;
  color: var(--lavender);
  background:
    radial-gradient(60% 120% at 90% 0%, rgba(168, 87, 126, 0.35) 0%, transparent 60%),
    linear-gradient(135deg, var(--purple) 0%, var(--black) 100%);
}
.community-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.community-inner h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); color: var(--white); margin-bottom: 0.3em; }
.community-inner p { margin: 0; max-width: 38rem; }

/* ---------- Contact ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: start;
}

.contact-details { margin: 2rem 0; }
.contact-details div { padding: 0.9rem 0; border-top: 1px solid rgba(68, 39, 90, 0.16); }
.contact-details dt {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose-deep);
}
.contact-details dd { margin: 0.2rem 0 0; color: var(--purple); }
.contact-details address { font-style: normal; }

.embed-card {
  background: var(--white);
  border: 1px solid rgba(68, 39, 90, 0.16);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 10px 30px rgba(43, 27, 61, 0.08);
}
.embed-card iframe { display: block; width: 100%; border: 0; border-radius: 10px; }
.embed-card .hs-form-frame { min-height: 320px; }
.embed-fallback {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(68, 39, 90, 0.14);
  font-size: 0.9rem;
  color: var(--plum);
}

.scheduler { margin-top: 64px; }
.scheduler-head { text-align: center; max-width: 40rem; margin: 0 auto 1.75rem; }
.scheduler-head h3 { font-size: 1.7rem; }
.scheduler-head p { color: var(--plum); margin: 0; }
.embed-scheduler { height: 675px; }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--black);
  color: var(--lavender);
  border-top: 1px solid rgba(212, 165, 199, 0.28);
  padding: 64px 0 32px;
  font-size: 0.95rem;
}
.site-footer a { color: var(--lavender); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.footer-brand p { margin: 1rem 0 0; max-width: 20rem; color: var(--silver); }
.footer-brand p.footer-tagline { margin-top: 1.1rem; font-family: var(--font-brand); font-size: 1.2rem; font-weight: 600; font-variation-settings: var(--font-brand-variation); line-height: 1.3; text-wrap: balance; color: var(--lavender); }
.site-footer h2 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mauve);
  margin-bottom: 1rem;
}
.footer-links li { padding: 0.25rem 0; }
.footer-address { font-style: normal; color: var(--silver); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(212, 165, 199, 0.18);
  color: var(--silver);
  font-size: 0.88rem;
}
.footer-base p { margin: 0; }
#tree-nation-offset-website { display: flex; align-items: center; min-height: 40px; }

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .btn:hover, .card:hover { transform: none; }
}

@media print {
  .site-header, .community-band, .embed-card, .scheduler, .hero-visual { display: none; }
  body { background: var(--white); }
}

/* ---------- Subpages ---------- */
.hero-compact .hero-inner {
  grid-template-columns: minmax(0, 1fr);
  padding-top: 80px;
  padding-bottom: 72px;
}
.hero-compact .hero-lead { max-width: 42rem; }

@media (max-width: 860px) {
  .hero-compact .hero-inner { padding-top: 56px; padding-bottom: 48px; }
}

.notice {
  position: relative;
  margin: 0;
  padding: 24px 28px;
  max-width: 52rem;
  background: var(--white);
  border: 1px solid rgba(68, 39, 90, 0.16);
  border-left: 4px solid var(--rose);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(43, 27, 61, 0.1);
}
.notice h2 {
  margin: 0 0 0.4em;
  font-size: 1.15rem;
  color: var(--purple);
}
.notice p { margin: 0; color: var(--plum); }
.notice p + p { margin-top: 0.75em; }

.channel-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}
.channel-group h3 {
  margin: 0 0 1rem;
  font-size: 1.35rem;
  color: var(--purple);
}
.channel-list { display: grid; gap: 12px; }
.channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid rgba(68, 39, 90, 0.16);
  border-radius: 12px;
}
.channel-name { margin: 0; font-weight: 700; color: var(--purple); }
.channel-note { margin: 0.15rem 0 0; font-size: 0.92rem; color: var(--plum); }
.channel .btn { flex-shrink: 0; }

@media (max-width: 980px) {
  .channel-groups { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .channel { flex-direction: column; align-items: stretch; }
  .channel .btn { width: 100%; }
}

.legal-links { margin-top: 2rem; text-align: center; color: var(--plum); }

/* ---------- Testimonials ---------- */
.testimonial-columns {
  column-count: 3;
  column-gap: 24px;
}
.testimonial {
  margin: 0 0 24px;
  padding: 24px;
  break-inside: avoid;
  background: var(--white);
  border: 1px solid rgba(68, 39, 90, 0.16);
  border-radius: var(--radius);
}
.testimonial blockquote { margin: 0; }
.testimonial blockquote p { margin: 0; color: var(--purple); overflow-wrap: anywhere; }
.testimonial figcaption {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(68, 39, 90, 0.12);
  font-size: 0.9rem;
  color: var(--plum);
}
.testimonial figcaption strong { display: block; color: var(--purple); }
.quote figcaption { margin-top: 0.7rem; font-size: 0.9rem; color: var(--plum); }

@media (max-width: 980px) { .testimonial-columns { column-count: 2; } }
@media (max-width: 640px) { .testimonial-columns { column-count: 1; } }

/* ---------- Style guide ---------- */
.guide-note { margin: 1.5rem 0 0; color: var(--plum); }

.toc-card {
  margin-top: 2rem;
  padding: 24px 28px;
  background: var(--white);
  border: 1px solid rgba(68, 39, 90, 0.16);
  border-radius: var(--radius);
}
.toc-card h3 { margin: 0 0 0.75rem; font-size: 1.2rem; color: var(--purple); }
.toc {
  margin: 0;
  padding-left: 1.4rem;
  columns: 2;
  column-gap: 2rem;
}
.toc li { margin: 0; padding: 0.2rem 0; break-inside: avoid; }
@media (max-width: 640px) { .toc { columns: 1; } }

.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0.25rem 0 1.25rem; }
.badge {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
  border-radius: 999px;
}
.badge-brand { background: var(--rose-deep); }
.badge-dev { background: var(--plum); }

.guide-section h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin-bottom: 0.3em; color: var(--purple); }
.guide-section h3 { margin: 2.25rem 0 0.6rem; font-size: 1.3rem; color: var(--purple); }
.guide-body > p,
.guide-body > ul,
.guide-body > ol { max-width: 50rem; }
.guide-body p, .guide-body li { color: var(--plum); }
.guide-body code {
  padding: 0.12em 0.4em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.9em;
  color: var(--purple);
  background: rgba(43, 27, 61, 0.07);
  border-radius: 4px;
}

.asset-card {
  padding: 28px;
  text-align: center;
  background: var(--white);
  border: 1px solid rgba(68, 39, 90, 0.16);
  border-radius: var(--radius);
}
.asset-card img { width: 100%; max-width: 256px; height: auto; margin-bottom: 0.75rem; }
.asset-card h3 { margin: 0.25rem 0; }
.asset-card p { margin: 0; }
.asset-card-wide img { max-width: 360px; }
.asset-card.asset-card-dark { background: var(--purple); }
.asset-card.asset-card-dark h3,
.asset-card.asset-card-dark a { color: var(--lavender); }

.rule-list { margin: 0 0 1rem; }
.rule-list li { position: relative; padding: 0.4rem 0 0.4rem 2rem; border-bottom: 1px solid rgba(68, 39, 90, 0.12); }
.rule-list li:last-child { border-bottom: 0; }
.rule-list.dont li::before { content: "\2717"; color: #B71C1C; }
.rule-list li::before { content: "\2713"; position: absolute; left: 0.25rem; font-weight: 700; color: #2E7D32; }

.notice-inline { margin: 2rem 0 0; max-width: 50rem; }
.notice-lead { max-width: none; margin: 0 0 2.5rem; }
.notice-inline h3 { margin: 0 0 0.4em; font-size: 1.15rem; }
.notice-inline p { margin: 0; color: var(--plum); }
.notice-inline p + p { margin-top: 0.75em; }

.misuse-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 1rem;
}
@media (max-width: 900px) { .misuse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .misuse-grid { grid-template-columns: 1fr; } }
.misuse-card {
  padding: 18px;
  text-align: center;
  background: rgba(198, 40, 40, 0.04);
  border: 1px solid rgba(198, 40, 40, 0.3);
  border-radius: 12px;
}
.guide-body .misuse-label { margin: 0 0 0.5rem; font-weight: 700; color: #B71C1C; }
.misuse-card { overflow: hidden; }
.misuse-card img { display: block; width: 100px; height: 100px; margin: 1.75rem auto; object-fit: contain; }
.misuse-card p:last-child { margin: 0; font-size: 0.85rem; color: var(--plum); }

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  margin: 1.5rem 0 0;
}
.swatch { overflow: hidden; background: var(--white); border: 1px solid rgba(68, 39, 90, 0.2); border-radius: 12px; }
.swatch-preview { display: grid; place-items: center; height: 84px; font-size: 1.6rem; font-weight: 700; }
.swatch-info { padding: 0.75rem 0.9rem; }
.swatch-name, .swatch-hex, .swatch-var { display: block; }
.swatch-name { font-weight: 700; color: var(--purple); }
.swatch-hex, .swatch-var { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; color: var(--plum); }
.swatch-new {
  margin-left: 0.3rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--white);
  vertical-align: middle;
  background: var(--rose-deep);
  border-radius: 999px;
}

.table-scroll { margin: 1rem 0 0; overflow-x: auto; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; background: var(--white); border: 1px solid rgba(68, 39, 90, 0.16); }
.spec-table th, .spec-table td { padding: 0.7rem 0.9rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(68, 39, 90, 0.12); color: var(--purple); }
.spec-table th { color: var(--white); background: var(--plum); font-weight: 600; white-space: nowrap; }
.spec-table tbody tr:nth-child(even) { background: rgba(232, 213, 232, 0.25); }
.spec-table td code { white-space: nowrap; }

.contrast-chip {
  display: inline-block;
  width: 2.1rem;
  margin-right: 0.4rem;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
  border: 1px solid rgba(68, 39, 90, 0.25);
  border-radius: 6px;
}
.contrast { display: inline-block; padding: 0.1rem 0.6rem; font-size: 0.8rem; font-weight: 700; border-radius: 999px; white-space: nowrap; }
.contrast-pass { color: #1B5E20; background: #E3F4E4; }
.contrast-warn { color: #7A4B00; background: #FFF1D6; }
.contrast-fail { color: #8E1B1B; background: #FBE3E3; }

.code-block {
  margin: 1rem 0 0;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  color: var(--lavender);
  background: var(--black);
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.6;
}
.guide-body .code-block code { padding: 0; color: inherit; background: none; font-size: inherit; }

.spec-list { margin: 0 0 1rem; padding-left: 1.2rem; list-style: disc; }
.spec-list li { margin: 0.4rem 0; padding-left: 0.2rem; }
.spec-list li::marker { color: var(--rose-deep); }

.font-sample { margin: 1rem 0; padding: 1.25rem 1.5rem; background: var(--white); border: 1px solid rgba(68, 39, 90, 0.16); border-radius: 12px; }
.font-sample p { margin: 0; }
.font-meta { margin-bottom: 0.5rem !important; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose-deep) !important; }
.font-brand-sample { font-family: var(--font-brand); font-size: 2.2rem; font-weight: 600; font-variation-settings: var(--font-brand-variation); color: var(--purple); }
.font-heading-sample { font-family: var(--font-body); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em; color: var(--purple) !important; }
.font-mono-sample { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--purple) !important; }
.font-usage { margin-top: 0.5rem !important; font-size: 0.92rem; }

/* Previews that reproduce the shared layout's element styling */
.demo {
  margin-top: 0.5rem;
  padding: 24px;
  color: var(--foreground, var(--purple));
  background: var(--white);
  border: 1px solid rgba(68, 39, 90, 0.16);
  border-radius: 12px 12px 0 0;
}
.demo + .code-block { margin-top: 0; border-radius: 0 0 12px 12px; }
.demo p { margin: 0 0 1em; line-height: 1.7; color: var(--purple); }
.demo p:last-child { margin-bottom: 0; }
.demo a:not(.btn) { color: var(--plum); text-decoration: underline; text-underline-offset: 3px; }
.demo input, .demo textarea, .demo select {
  padding: 0.7rem 0.9rem;
  font: inherit;
  color: var(--purple);
  background: var(--white);
  border: 1px solid rgba(68, 39, 90, 0.45);
  border-radius: var(--radius-small, 10px);
}
.demo input[type="checkbox"] { padding: 0; accent-color: var(--rose-deep); }
.demo button {
  padding: 0.75rem 1.5rem;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  color: var(--white);
  background: var(--rose);
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}
.demo button:disabled { opacity: 0.55; cursor: not-allowed; }
.demo table { width: 100%; margin: 0; border-collapse: collapse; border: 1px solid rgba(68, 39, 90, 0.16); }
.demo th, .demo td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid rgba(68, 39, 90, 0.16); color: var(--purple); }
.demo th { color: var(--white); background: var(--plum); font-weight: 600; }
.demo tr:nth-child(even) td { background: rgba(212, 165, 199, 0.12); }
.demo blockquote {
  margin: 0;
  padding: 0.75rem 0 0.75rem 1.25rem;
  color: var(--plum);
  border-left: 4px solid var(--rose);
  background: linear-gradient(90deg, rgba(168, 87, 126, 0.07) 0%, transparent 60%);
}
.demo pre { margin: 0.75rem 0 0; padding: 1rem; overflow-x: auto; background: rgba(43, 27, 61, 0.07); border: 1px solid rgba(68, 39, 90, 0.16); border-radius: 8px; }
.demo ul, .demo ol { margin: 0 0 0.75rem 1.5em; padding: 0; color: var(--purple); list-style: revert; }
.demo ul li::marker, .demo ol li::marker { color: var(--rose-deep); }

.demo-bands { display: grid; gap: 0; padding: 0; overflow: hidden; }
.demo-band { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 24px; }
.demo-band-dark { background: linear-gradient(135deg, var(--black), var(--purple)); }

.theme-preview {
  padding: 24px;
  color: var(--foreground);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}
.theme-preview h3 { margin: 0 0 0.4em; color: var(--heading); }
.theme-preview p { margin: 0; color: var(--foreground); }
.theme-preview a { color: var(--link); }
.theme-preview code { color: var(--foreground); background: var(--code-background); }

.guide-body code { white-space: nowrap; }
.guide-body .code-block code { white-space: pre; }
.demo pre code { padding: 0; background: none; }
.code-block + .grid-2 { margin-top: 1.5rem; }
.grid-2 + p { margin-top: 1.25rem; }

/* ---------- Error pages ---------- */
.requested { margin: 1rem 0 0; font-size: 0.95rem; color: var(--mauve); overflow-wrap: anywhere; }
.requested[hidden] { display: none; }
.requested code {
  padding: 0.12em 0.45em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color: var(--lavender);
  background: rgba(212, 165, 199, 0.15);
  border-radius: 4px;
}

.card-link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.card-link h3 { margin-bottom: 0.4em; }
.card-link p { flex: 1; margin: 0; color: var(--plum); }
.card-link-cta { margin-top: 1rem; font-size: 1.25rem; color: var(--rose-deep); transition: transform 0.2s ease; }
.card-link:hover .card-link-cta { transform: translateX(4px); }
.card-link:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }

/* ---------- Events and talks ---------- */
.year-heading { margin: 2.5rem 0 1rem; font-size: 1.4rem; color: var(--purple); }
.year-heading:first-of-type { margin-top: 0.5rem; }
.event-list { display: grid; gap: 20px; }
.event-card {
  padding: 28px 30px;
  background: var(--white);
  border: 1px solid rgba(68, 39, 90, 0.16);
  border-radius: var(--radius);
}
.event-card-upcoming { border-left: 4px solid var(--rose); box-shadow: 0 10px 30px rgba(43, 27, 61, 0.1); }
.event-status {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.2rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--rose-deep);
  border-radius: 999px;
}
.event-name { margin: 0 0 0.5rem; font-size: 1.4rem; color: var(--purple); }
.event-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0 0 1rem; font-size: 0.92rem; color: var(--plum); }
.event-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.event-meta svg { width: 1rem; height: 1rem; fill: none; stroke: var(--rose-deep); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.event-description { margin: 0 0 1rem; color: var(--purple); }
.event-links { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.event-link { font-weight: 600; }
.hero-meta { margin: 1.25rem 0 0; color: var(--mauve); }
.hero-meta svg { stroke: var(--mauve); }
.talk-date { margin: 0 0 0.4rem; font-size: 0.9rem; font-weight: 600; color: var(--rose-deep); }

/* Companion guide pages */
.guide-page .prose { max-width: 50rem; }
.prose { color: var(--purple); }
.prose h2 { margin: 2.75rem 0 0.7rem; font-size: clamp(1.5rem, 3vw, 1.9rem); color: var(--purple); }
.prose h3 { margin: 2rem 0 0.5rem; font-size: 1.3rem; color: var(--purple); }
.prose > :first-child, .prose > section:first-child > :first-child { margin-top: 0; }
.prose p, .prose li { color: var(--purple); }
.prose p { margin: 0 0 1.1em; }
.prose a { color: var(--plum); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--rose-deep); }
.prose ul, .prose ol { margin: 0 0 1.25em; padding-left: 1.4rem; list-style: revert; }
.prose li { margin: 0.35rem 0; }
.prose li::marker { color: var(--rose-deep); }
.prose hr { margin: 2.5rem 0; border: 0; border-top: 1px solid rgba(68, 39, 90, 0.18); }
.prose blockquote { margin: 1.5em 0; padding: 0.75rem 0 0.75rem 1.25rem; color: var(--plum); border-left: 4px solid var(--rose); background: linear-gradient(90deg, rgba(168, 87, 126, 0.07) 0%, transparent 60%); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code { padding: 0.12em 0.4em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.9em; background: rgba(43, 27, 61, 0.07); border-radius: 4px; }
.prose pre { margin: 1.25em 0; padding: 1rem 1.25rem; overflow-x: auto; color: var(--lavender); background: var(--black); border-radius: 12px; line-height: 1.6; }
.prose pre code { padding: 0; color: inherit; background: none; }

.callout, .practice-block, .mod-block {
  margin: 1.5em 0;
  padding: 1.25rem 1.5rem;
  background: rgba(232, 213, 232, 0.35);
  border: 1px solid rgba(68, 39, 90, 0.2);
  border-radius: 12px;
}
.callout > :last-child, .practice-block > :last-child, .mod-block > :last-child { margin-bottom: 0; }
.practice-block h3, .mod-block h3 { margin-top: 0; }

.loop-diagram { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin: 1.5em 0; }
.loop-step { padding: 0.6rem 1rem; text-align: center; background: rgba(232, 213, 232, 0.5); border: 1px solid rgba(68, 39, 90, 0.25); border-radius: 8px; }
.loop-arrow { font-size: 1.2rem; color: var(--rose-deep); }

.step-list, .starter-kit { margin: 1.25em 0; padding: 0; list-style: none !important; counter-reset: steps; }
.step-list li, .starter-kit li { display: flex; align-items: flex-start; gap: 1rem; margin: 0 0 1.25rem; counter-increment: steps; }
.step-list li::before, .starter-kit li::before {
  content: counter(steps);
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  height: 1.9rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--white);
  background: var(--plum);
  border-radius: 50%;
}

.action-list { margin: 1.25em 0; padding: 0; list-style: none !important; }
.action-list li { display: grid; grid-template-columns: 8rem 1fr; gap: 0.5rem; margin: 0; padding: 0.7rem 0; border-bottom: 1px solid rgba(68, 39, 90, 0.14); }
.action-list li:last-child { border-bottom: 0; }
.action-when { font-weight: 700; font-size: 0.92rem; color: var(--rose-deep); }
@media (max-width: 560px) { .action-list li { grid-template-columns: 1fr; } }

.component-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin: 1.5em 0; }
.component-card { padding: 1rem 1.1rem; background: rgba(232, 213, 232, 0.35); border: 1px solid rgba(68, 39, 90, 0.2); border-radius: 10px; }
.component-card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.component-card p { margin: 0; font-size: 0.92rem; }

.back-link-row { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(68, 39, 90, 0.18); }
.back-link { font-weight: 600; }
.card-link .talk-date { flex: none; margin: 0 0 0.4rem; }

/* ---------- Resume ---------- */
.resume-hero .info { margin: 0 0 1rem; font-size: 0.95rem; color: var(--mauve); }
.resume-hero .hero-actions { margin-top: 1.5rem; }
.resume-nav { background: var(--white); border-bottom: 1px solid rgba(68, 39, 90, 0.16); }
.resume-nav .container { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; padding-top: 14px; padding-bottom: 14px; }
.resume-nav a { font-size: 0.95rem; font-weight: 600; text-decoration: none; color: var(--plum); }
.resume-nav a:hover { color: var(--rose-deep); text-decoration: underline; }

.resume-body .container { max-width: 56rem; }
.resume-section { margin: 0 0 3.5rem; scroll-margin-top: calc(var(--header-height) + 16px); }
.resume-section h2 { margin: 0 0 1.25rem; font-size: clamp(1.6rem, 3vw, 2rem); color: var(--purple); }

.resume-card {
  margin: 0 0 16px;
  padding: 22px 26px;
  background: var(--white);
  border: 1px solid rgba(68, 39, 90, 0.16);
  border-radius: var(--radius);
}
.resume-card .title { margin: 0; font-size: 1.3rem; line-height: 1.25; color: var(--purple); }
.resume-card .company { display: inline; margin: 0; font-weight: 600; color: var(--plum); }
.resume-card .type { display: inline; margin: 0; font-style: italic; color: var(--plum); }
.resume-card .type::before { content: " - "; font-style: normal; }
.resume-card .date, .resume-card [class^="subdate"] { margin: 0.2rem 0 0.75rem; font-size: 0.85rem; color: var(--plum); }
.resume-card .description { margin: 0.5rem 0 0; color: var(--purple); }
.resume-card [class^="subtitle"] { margin: 1rem 0 0; font-size: 1.1rem; color: var(--purple); }
.resume-card hr { margin: 1.25rem 0 0; border: 0; border-top: 1px solid rgba(68, 39, 90, 0.16); }
.resume-card details { margin-top: 0.25rem; }
.resume-card summary { cursor: pointer; font-weight: 600; color: var(--rose-deep); }
.resume-card ul { margin: 0.5rem 0 0; padding-left: 1.3rem; list-style: disc; }
.resume-card li { margin: 0.4rem 0; color: var(--purple); }
.resume-card li::marker { color: var(--rose-deep); }
.resume-body .cta { margin: 1rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(68, 39, 90, 0.16); color: var(--plum); }

@media print {
  .resume-hero { padding: 0; color: #000; background: none !important; }
  .resume-hero .hero-inner { display: block; padding: 0 0 8px; }
  .resume-hero .eyebrow, .resume-hero .hero-lead { color: #000; }
  .resume-hero h1 { margin: 0; font-size: 1.8rem; text-align: center; color: #000; }
  .resume-hero .info { font-size: 0.8rem; text-align: center; color: #000; }
  .resume-hero .hero-lead { max-width: none; margin: 0.25rem 0 0; font-size: 0.95rem; text-align: center; }
  .resume-hero .eyebrow, .resume-hero #formats, .resume-nav, .resume-body .cta, .resume-card summary, .resume-card hr, .site-footer, .skip-link { display: none !important; }
  .resume-body { padding: 0; }
  .resume-body .container { max-width: none; padding: 0; }
  .resume-section { margin: 0 0 1rem; }
  .resume-section h2 { margin: 0.5rem 0; font-size: 1.3rem; color: #000; }
  .resume-card {
    display: grid;
    grid-template-areas:
      "title title title title"
      "company type date date"
      "bullets bullets bullets bullets"
      "subtitle1 subdate1 subdate1 subdate1"
      "bullets1 bullets1 bullets1 bullets1"
      "subtitle2 subdate2 subdate2 subdate2"
      "bullets2 bullets2 bullets2 bullets2"
      "subtitle3 subdate3 subdate3 subdate3"
      "bullets3 bullets3 bullets3 bullets3"
      "description description description description";
    margin: 0 0 0.6rem;
    padding: 0;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  #education .resume-card, #certifications .resume-card, #awards .resume-card, #projects .resume-card, #publications .resume-card { break-inside: avoid; }
  .resume-card .title, .resume-section h2 { break-after: avoid; }
  .resume-hero *, .resume-section h2, .resume-card * { color: #000 !important; font-family: "Times New Roman", serif; }
  .resume-card .title { grid-area: title; font-size: 1.1rem; }
  .resume-card .company { grid-area: company; display: block; }
  .resume-card .type { grid-area: type; display: block; font-style: normal; }
  .resume-card .type::before { content: none; }
  .resume-card .date { grid-area: date; margin: 0; font-style: italic; text-align: right; }
  .resume-card .subtitle1 { grid-area: subtitle1; }
  .resume-card .subdate1 { grid-area: subdate1; }
  .resume-card .subtitle2 { grid-area: subtitle2; }
  .resume-card .subdate2 { grid-area: subdate2; }
  .resume-card .subtitle3 { grid-area: subtitle3; }
  .resume-card .subdate3 { grid-area: subdate3; }
  .resume-card [class^="subtitle"] { margin: 0.3rem 0 0; font-size: 1rem; }
  .resume-card [class^="subdate"] { margin: 0.3rem 0 0; font-style: italic; text-align: right; }
  .resume-card .description { grid-area: description; padding-left: 20px; font-size: 0.9rem; }
  .resume-card .bullets { grid-area: bullets; }
  .resume-card .bullets1 { grid-area: bullets1; }
  .resume-card .bullets2 { grid-area: bullets2; }
  .resume-card .bullets3 { grid-area: bullets3; }
  .resume-card .bullets, .resume-card [class^="bullets"] { padding-left: 20px; font-size: 0.9rem; }
  .resume-card details { display: block !important; }
  .resume-card ul { margin: 0; padding-left: 1.1rem; }
  .resume-card li { margin: 0.1rem 0; }
  .resume-card li::marker { color: #000; }
}

/* ---------- Socials ---------- */
.social-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.social-link {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  background: var(--white);
  border: 1px solid rgba(68, 39, 90, 0.16);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.social-link:hover { border-color: rgba(168, 87, 126, 0.55); box-shadow: 0 10px 28px rgba(43, 27, 61, 0.1); transform: translateY(-2px); }
.social-link:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
.social-icon { display: grid; flex-shrink: 0; place-items: center; width: 48px; height: 48px; font-size: 1.35rem; color: var(--mauve); background: var(--purple); border-radius: 12px; }
.social-text { display: flex; flex-direction: column; min-width: 0; }
.social-name { font-weight: 700; color: var(--purple); }
.social-description { font-size: 0.9rem; color: var(--plum); }
.social-group-heading { margin: 2.25rem 0 1rem; font-size: 1.25rem; color: var(--purple); }
.social-group-heading:first-of-type { margin-top: 0; }
.social-support { margin: 1.75rem 0 0; color: var(--plum); }

/* ---------- Products ---------- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.product-card {
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  background: var(--white);
  border: 1px solid rgba(68, 39, 90, 0.16);
  border-radius: var(--radius);
}
.product-card h3 { margin: 0 0 0.5rem; font-size: 1.2rem; color: var(--purple); }
.product-card p { margin: 0; color: var(--plum); }
.product-card .product-links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: auto; padding-top: 1.25rem; font-weight: 700; }
.fact-list { display: grid; grid-template-columns: max-content 1fr; gap: 0.7rem 2rem; margin: 0; }
.fact-list dt { font-weight: 700; color: var(--purple); }
.fact-list dd { margin: 0; color: var(--plum); }
@media (max-width: 600px) {
  .fact-list { grid-template-columns: 1fr; gap: 0.15rem; }
  .fact-list dd { margin-bottom: 0.75rem; }
}
.product-source { margin: 1.5rem 0 0; font-weight: 700; }
.product-card .product-links a { color: var(--rose-deep); }
.product-card .product-links a:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; border-radius: 4px; }

.card-link { margin: 1rem 0 0; font-weight: 700; }
.card-link a { color: var(--rose-deep); }
.card-link a:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; border-radius: 4px; }

.section-head p + p { margin-top: 1rem; }
.card > .check-list:first-child { margin-top: 0; }

.proof-grid-fit { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.card h2 { font-size: 1.5rem; margin-bottom: 0.4em; color: var(--purple); }
.card h2 a, .card h3 a { color: inherit; text-decoration-color: var(--rose); text-underline-offset: 0.2em; }

.story { max-width: 46rem; margin-top: 2rem; }
.story h3 { margin: 2rem 0 0.4em; font-size: 1.35rem; color: var(--purple); }
.story h3:first-child { margin-top: 0; }
.story p { margin: 0; color: var(--plum); }
.story p + p { margin-top: 1rem; }

.example-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.example-list li { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.9rem 0; border-bottom: 1px solid rgba(68, 39, 90, 0.14); color: var(--plum); }
.example-list li:first-child { padding-top: 0; }
.example-list li:last-child { border-bottom: 0; }
.example-price { flex: none; font-weight: 700; color: var(--purple); white-space: nowrap; }
.card > .example-list + p { margin-top: 0.5rem; font-size: 0.95rem; }
@media (max-width: 600px) { .example-list li { flex-direction: column; gap: 0.25rem; } }

.steps-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .steps-three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps-three { grid-template-columns: 1fr; } }

.card-link { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }

.work-stat { margin: 0 0 0.75rem; display: flex; flex-direction: column; gap: 0.15rem; }
.work-stat strong { font-family: var(--font-heading); font-size: 2.1rem; line-height: 1.1; color: var(--rose-deep); }
.work-stat span { font-size: 0.92rem; color: var(--plum); }

.thanks { max-width: 46rem; }
.thanks h2 { margin: 2rem 0 0.6rem; font-size: 1.35rem; color: var(--purple); }
.thanks h2:first-child { margin-top: 0; }
.thanks p { color: var(--plum); }
.thanks ol { margin: 0; padding-left: 1.4rem; color: var(--plum); }
.thanks li { margin: 0 0 0.7rem; }
.thanks .link-list { margin-top: 0.5rem; }
.thanks .hero-actions { margin-top: 1.5rem; }

.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 60rem; margin: 0 auto; }
.team-grid .person-role { margin-bottom: 0; }
@media (max-width: 700px) { .team-grid { grid-template-columns: 1fr; max-width: 24rem; } }

.thanks .check-list { margin: 0 0 0.5rem; }

.person-name { margin: 0 0 0.1em; font-family: var(--font-heading); font-weight: 700; font-size: 1.6rem; line-height: 1.2; color: var(--purple); }
.person-card-link { position: relative; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.person-card-link:hover, .person-card-link:focus-within { border-color: var(--rose); box-shadow: 0 8px 24px rgba(68, 39, 90, 0.12); }
.person-link { color: inherit; text-decoration: none; }
.person-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.person-link:focus-visible { outline: none; }
.person-link:focus-visible::after { outline: 3px solid var(--rose); outline-offset: 3px; }
.person-more { margin: 0.75rem 0 0; font-size: 0.95rem; font-weight: 700; color: var(--rose-deep); }
.person-card .person-links { margin-top: 1.25rem; }
.about-copy h2 + p, .about-copy h2 + .check-list { margin-top: 0.5rem; }
.about-copy > h2:not(:first-child) { margin-top: 2rem; font-size: 1.35rem; }

.person-pronouns { margin: -0.9rem 0 0; font-size: 0.9rem; color: var(--plum); }
.person-card .person-pronouns + .person-links { margin-top: 1.25rem; }

@media (max-width: 700px) {
  .hero-visual { display: none; }
  .site-footer { padding-bottom: 5.5rem; }
}

.sticky-cta {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: none;
  padding: 0.95rem 1.25rem;
  text-align: center;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  background: var(--rose-deep);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(10, 0, 9, 0.4);
}
.sticky-cta:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
@media (max-width: 700px) { .sticky-cta:not([hidden]) { display: block; } }
@media print { .sticky-cta { display: none !important; } }

/* ---------- Glass and glow (company site only) ----------
   Glass: a floating translucent header, frosted cards, and soft colour behind the
   sections so the glass has something to show. Glow: a soft, static halo on buttons.
   Nothing here animates, and the shared header script does not use any of it. */

.site-header {
  top: 12px;
  width: calc(100% - 32px);
  max-width: 1200px;
  margin: 12px auto calc(-1 * (var(--header-height) + 12px));
  border: 1px solid rgba(212, 165, 199, 0.28);
  border-radius: 20px;
  background: rgba(10, 0, 9, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Without JavaScript the header is a plain solid bar in the page flow, so it never floats over the light page colour. */
html:not(.js) .site-header {
  top: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  border-width: 0 0 1px;
  background: rgba(10, 0, 9, 0.96);
}
html:not(.js) .hero .hero-inner { padding-top: 96px; }
html:not(.js) .hero-compact .hero-inner { padding-top: 56px; }
.hero .hero-inner { padding-top: 160px; }
.hero-compact .hero-inner { padding-top: 128px; }

.section {
  position: relative;
  background-image:
    linear-gradient(112deg, transparent 48%, rgba(255, 255, 255, 0.52) 57%, transparent 67%),
    radial-gradient(60% 70% at 98% 0%, rgba(168, 87, 126, 0.34) 0%, rgba(212, 165, 199, 0.34) 34%, transparent 72%),
    radial-gradient(52% 60% at 0% 100%, rgba(212, 165, 199, 0.55) 0%, rgba(232, 213, 232, 0.26) 46%, transparent 74%),
    radial-gradient(34% 40% at 52% 52%, rgba(255, 255, 255, 0.70) 0%, transparent 70%);
}
.section > .container { position: relative; z-index: 1; }
.section-alt { background-color: rgba(232, 213, 232, 0.50); }

.card,
.embed-card,
.person-card,
.quote,
.notice,
.product-card,
.credential,
.event-card,
.asset-card,
.toc-card {
  background: radial-gradient(130% 100% at 100% 0%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.66) 44%, rgba(232, 213, 232, 0.62) 100%);
  border-color: rgba(255, 255, 255, 0.90);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.95),
    inset -1px -1px 0 rgba(168, 87, 126, 0.14),
    0 30px 52px -28px rgba(68, 39, 90, 0.42),
    0 14px 36px -14px rgba(168, 87, 126, 0.26);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
/* The frosted rule colours all four borders, so put back the rose edge that marks quotes and notices. */
.quote, .notice {
  border-left-color: var(--rose);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.95),
    inset -1px -1px 0 rgba(168, 87, 126, 0.10),
    -10px 0 28px -12px rgba(168, 87, 126, 0.55),
    0 28px 48px -28px rgba(68, 39, 90, 0.34);
}
.option {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.75);
}

.process {
  background:
    radial-gradient(45% 60% at 14% 18%, rgba(168, 87, 126, 0.38), transparent 70%),
    radial-gradient(40% 55% at 88% 88%, rgba(212, 165, 199, 0.20), transparent 70%),
    var(--purple);
}
.step {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(212, 165, 199, 0.30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--rose), var(--rose-deep));
  box-shadow: 0 0 0 1px rgba(212, 165, 199, 0.45), 0 0 22px rgba(168, 87, 126, 0.55);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--rose), var(--rose-deep));
  box-shadow: 0 0 0 1px rgba(212, 165, 199, 0.7), 0 0 34px rgba(212, 165, 199, 0.5);
}
.btn-ghost { box-shadow: 0 0 14px rgba(212, 165, 199, 0.25), inset 0 0 10px rgba(212, 165, 199, 0.08); }
.btn-ghost:hover { box-shadow: 0 0 26px rgba(212, 165, 199, 0.45), inset 0 0 14px rgba(212, 165, 199, 0.14); }
.sticky-cta { box-shadow: 0 0 0 1px rgba(212, 165, 199, 0.45), 0 0 22px rgba(168, 87, 126, 0.55), 0 10px 28px rgba(10, 0, 9, 0.4); }
.card:hover,
.person-card-link:hover {
  border-color: rgba(168, 87, 126, 0.6);
  box-shadow: 0 0 0 1px rgba(168, 87, 126, 0.45), 0 14px 44px rgba(168, 87, 126, 0.22);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(34% 44% at 22% 38%, rgba(212, 165, 199, 0.16), transparent 70%);
}
.hero .hero-inner { position: relative; z-index: 1; }
.proof-item dt { text-shadow: 0 0 22px rgba(212, 165, 199, 0.45); }

@media (max-width: 860px) {
  .hero .hero-inner { padding-top: 140px; }
  .hero-compact .hero-inner { padding-top: 112px; }
  .js .nav-links {
    top: calc(100% + 8px);
    border: 1px solid rgba(212, 165, 199, 0.28);
    border-radius: 20px;
    background: rgba(10, 0, 9, 0.97);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.4);
  }
}

/* Phones: drop the blur on cards, which is costly on low-end devices, and use a firmer white. */
@media (max-width: 700px) {
  .card,
  .embed-card,
  .person-card,
  .quote,
  .notice,
  .product-card,
  .credential,
  .event-card,
  .asset-card,
  .toc-card {
    background: radial-gradient(130% 100% at 100% 0%, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.88) 46%, rgba(240, 226, 240, 0.86) 100%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(10, 0, 9, 0.96); }
  .card,
  .embed-card,
  .person-card,
  .quote,
  .notice,
  .product-card,
  .credential,
  .event-card,
  .asset-card,
  .toc-card { background: var(--white); }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: rgba(10, 0, 9, 0.98); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .card,
  .embed-card,
  .person-card,
  .quote,
  .notice,
  .product-card,
  .credential,
  .event-card,
  .asset-card,
  .toc-card,
  .option { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .step { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media print {
  .card,
  .embed-card,
  .person-card,
  .quote,
  .notice,
  .product-card,
  .credential,
  .event-card,
  .asset-card,
  .toc-card,
  .option { background: var(--white) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .btn-primary, .btn-ghost { box-shadow: none !important; }
  .section, .process { background-image: none !important; }
}

/* ---------- Rose light (company site only) ----------
   One light source, in Witch Rose, and one shadow side, in plum and black. The drama comes
   from light against dark and from a consistent direction, not from a second colour. Light
   comes in from the upper right everywhere, so the left, where the text sits, stays in shadow.
   Everything is static, and bright areas are kept away from the text columns. */

.hero {
  background:
    radial-gradient(70% 95% at 90% 22%, rgba(168, 87, 126, 0.62) 0%, rgba(168, 87, 126, 0.20) 46%, transparent 74%),
    radial-gradient(46% 62% at 0% 100%, rgba(142, 66, 104, 0.40) 0%, transparent 72%),
    linear-gradient(115deg, var(--black) 0%, var(--black) 35%, var(--purple) 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(112deg, transparent 0 54px, rgba(212, 165, 199, 0.07) 54px 56px, transparent 56px 130px);
  -webkit-mask-image: radial-gradient(70% 90% at 86% 24%, #000 0%, transparent 72%);
  mask-image: radial-gradient(70% 90% at 86% 24%, #000 0%, transparent 72%);
}
.hero::after {
  background: radial-gradient(30% 42% at 84% 30%, rgba(212, 165, 199, 0.22), transparent 70%);
}
.hero-mark {
  box-shadow: 0 0 60px rgba(168, 87, 126, 0.55), 0 0 140px rgba(168, 87, 126, 0.35);
}

.site-header {
  border-top-color: rgba(212, 165, 199, 0.45);
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.35),
    0 18px 50px -18px rgba(168, 87, 126, 0.45),
    inset 0 1px 0 rgba(212, 165, 199, 0.4);
}

.btn-primary {
  background: linear-gradient(180deg, var(--rose) 0%, var(--rose-deep) 100%);
  box-shadow:
    0 0 0 1px rgba(212, 165, 199, 0.55),
    0 0 24px rgba(168, 87, 126, 0.75),
    0 0 64px rgba(168, 87, 126, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--rose) 0%, var(--rose-deep) 100%);
  box-shadow:
    0 0 0 1px rgba(232, 213, 232, 0.8),
    0 0 32px rgba(212, 165, 199, 0.7),
    0 0 80px rgba(168, 87, 126, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-ghost {
  border-color: rgba(212, 165, 199, 0.8);
  box-shadow: 0 0 18px rgba(168, 87, 126, 0.40), inset 0 0 12px rgba(168, 87, 126, 0.18);
}
.sticky-cta {
  background: linear-gradient(180deg, var(--rose) 0%, var(--rose-deep) 100%);
  box-shadow:
    0 0 0 1px rgba(212, 165, 199, 0.55),
    0 0 24px rgba(168, 87, 126, 0.75),
    0 10px 28px rgba(10, 0, 9, 0.4);
}

.proof-strip {
  background: radial-gradient(60% 220% at 85% 0%, rgba(168, 87, 126, 0.22), transparent 70%), var(--black);
}

.process {
  background:
    radial-gradient(60% 85% at 92% 6%, rgba(168, 87, 126, 0.52) 0%, rgba(168, 87, 126, 0.16) 48%, transparent 74%),
    radial-gradient(45% 60% at 0% 100%, rgba(68, 39, 90, 0.9) 0%, transparent 70%),
    linear-gradient(200deg, var(--purple) 0%, var(--black) 100%);
}
.step {
  background: radial-gradient(130% 110% at 100% 0%, rgba(168, 87, 126, 0.30) 0%, rgba(255, 255, 255, 0.05) 52%, rgba(255, 255, 255, 0.025) 100%);
  border-color: rgba(212, 165, 199, 0.26);
  box-shadow:
    inset -1px 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(212, 165, 199, 0.06),
    0 18px 40px -22px rgba(0, 0, 0, 0.6);
}

.community-band {
  background:
    radial-gradient(70% 140% at 92% 0%, rgba(168, 87, 126, 0.60) 0%, rgba(168, 87, 126, 0.18) 50%, transparent 78%),
    radial-gradient(40% 80% at 0% 100%, rgba(142, 66, 104, 0.30) 0%, transparent 70%),
    linear-gradient(135deg, var(--purple) 0%, var(--black) 100%);
}

.site-footer {
  background: radial-gradient(50% 130% at 100% 0%, rgba(168, 87, 126, 0.18), transparent 70%), var(--black);
}

/* Single-column layouts put the text under the light, so on narrow screens the light is
   smaller, pushed into the corner and softer, which keeps the small labels at AA contrast. */
@media (max-width: 860px) {
  .hero {
    background:
      radial-gradient(75% 46% at 100% 2%, rgba(168, 87, 126, 0.48) 0%, rgba(168, 87, 126, 0.16) 46%, transparent 74%),
      radial-gradient(60% 40% at 0% 100%, rgba(142, 66, 104, 0.40) 0%, transparent 72%),
      linear-gradient(115deg, var(--black) 0%, var(--black) 35%, var(--purple) 100%);
  }
  .hero::before {
    -webkit-mask-image: radial-gradient(75% 50% at 100% 4%, #000 0%, transparent 72%);
    mask-image: radial-gradient(75% 50% at 100% 4%, #000 0%, transparent 72%);
  }
  .hero::after { background: radial-gradient(40% 24% at 100% 6%, rgba(212, 165, 199, 0.20), transparent 70%); }
}

@media print {
  .hero::before, .hero::after { display: none; }
  .hero-mark { box-shadow: none; }
}

/* ---------- Lit paper: the same rose light on the light sections ----------
   On a bright surface light cannot glow, so it shows as colour bleeding in from the upper
   right, a sheen and rim on each card, shadows tinted plum and rose, and light spilling
   across the seam from the dark sections. The cores of the washes are kept away from
   the text, and contrast is measured against the rendered background. */

.hero + .section::before,
.proof-strip + .section::before,
.process + .section::before,
.community-band + .section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 280px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(75% 130% at 82% 0%, rgba(168, 87, 126, 0.40) 0%, rgba(168, 87, 126, 0.12) 48%, transparent 76%);
}
.section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(168, 87, 126, 0.30), rgba(168, 87, 126, 0.40) 50%, rgba(168, 87, 126, 0.30));
}

.section-head .eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 2px;
  margin-right: 0.7rem;
  vertical-align: middle;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--rose-deep), var(--rose));
  box-shadow: 0 0 10px rgba(168, 87, 126, 0.55);
}

.btn-outline {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.35));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 22px -10px rgba(168, 87, 126, 0.45);
}
.btn-outline:hover {
  background: var(--plum);
  box-shadow: 0 0 0 1px rgba(168, 87, 126, 0.35), 0 12px 30px -8px rgba(168, 87, 126, 0.55);
}
.btn-dark {
  background: linear-gradient(180deg, var(--plum) 0%, var(--purple) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 26px -10px rgba(168, 87, 126, 0.60);
}
.btn-dark:hover {
  background: linear-gradient(180deg, var(--plum) 0%, var(--purple) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 0 1px rgba(168, 87, 126, 0.4), 0 14px 34px -8px rgba(168, 87, 126, 0.65);
}

.card:hover,
.person-card-link:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(168, 87, 126, 0.40),
    0 30px 60px -22px rgba(168, 87, 126, 0.50);
}
.work-stat strong { text-shadow: 0 0 26px rgba(168, 87, 126, 0.28); }

/* Single-column layouts put the labels under the wash, so on narrow screens the light is smaller and in the corner. */
@media (max-width: 860px) {
  .section:not(.process) {
    background-image:
      linear-gradient(112deg, transparent 48%, rgba(255, 255, 255, 0.52) 57%, transparent 67%),
      radial-gradient(55% 30% at 100% 0%, rgba(168, 87, 126, 0.26) 0%, rgba(212, 165, 199, 0.26) 40%, transparent 74%),
      radial-gradient(60% 40% at 0% 100%, rgba(212, 165, 199, 0.50) 0%, rgba(232, 213, 232, 0.24) 46%, transparent 74%),
      radial-gradient(60% 30% at 52% 52%, rgba(255, 255, 255, 0.70) 0%, transparent 70%);
  }
  .hero + .section::before,
  .proof-strip + .section::before,
  .process + .section::before,
  .community-band + .section::before {
    height: 200px;
    background: radial-gradient(70% 110% at 100% 0%, rgba(168, 87, 126, 0.30) 0%, rgba(168, 87, 126, 0.08) 50%, transparent 76%);
  }
}

@media print {
  .section::before, .section::after { display: none; }
}

/* ---------- Turned up: stronger light, edge glows, availability, accent phrase, footer ----------
   The same single rose light as above, at higher intensity. Edge glows are layered shadows
   (a rim inside the card and a glow thrown towards the light), so cards need no extra elements. */

.section:not(.process) {
  background-image:
    linear-gradient(112deg, transparent 44%, rgba(255, 255, 255, 0.62) 55%, transparent 66%),
    radial-gradient(64% 76% at 100% 0%, rgba(168, 87, 126, 0.46) 0%, rgba(212, 165, 199, 0.40) 36%, transparent 74%),
    radial-gradient(56% 64% at 0% 100%, rgba(212, 165, 199, 0.62) 0%, rgba(232, 213, 232, 0.30) 46%, transparent 76%),
    radial-gradient(34% 40% at 52% 52%, rgba(255, 255, 255, 0.75) 0%, transparent 70%);
}
.section::after {
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(168, 87, 126, 0.55), rgba(168, 87, 126, 0.85) 50%, rgba(212, 165, 199, 0.95) 78%, rgba(168, 87, 126, 0.55));
  box-shadow: 0 0 18px 2px rgba(168, 87, 126, 0.55);
}

.card,
.embed-card,
.person-card,
.product-card,
.credential,
.event-card,
.asset-card,
.toc-card {
  background: radial-gradient(130% 100% at 100% 0%, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.74) 40%, rgba(236, 208, 229, 0.62) 100%);
  border-color: rgba(168, 87, 126, 0.38);
  box-shadow:
    inset -1px 1px 0 rgba(255, 255, 255, 0.95),
    inset -2px 2px 16px -3px rgba(168, 87, 126, 0.34),
    0 0 0 1px rgba(168, 87, 126, 0.08),
    10px -8px 32px -10px rgba(168, 87, 126, 0.58),
    0 30px 52px -26px rgba(68, 39, 90, 0.5);
}
.quote,
.notice {
  background: radial-gradient(130% 100% at 100% 0%, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.74) 40%, rgba(236, 208, 229, 0.62) 100%);
  border-color: rgba(168, 87, 126, 0.30);
  border-left-color: var(--rose);
  box-shadow:
    inset -1px 1px 0 rgba(255, 255, 255, 0.95),
    inset -2px 2px 16px -3px rgba(168, 87, 126, 0.28),
    -12px 0 30px -10px rgba(168, 87, 126, 0.70),
    0 28px 48px -26px rgba(68, 39, 90, 0.45);
}
.card:hover,
.person-card-link:hover {
  border-color: rgba(168, 87, 126, 0.9);
  box-shadow:
    inset -1px 1px 0 rgba(255, 255, 255, 0.95),
    inset -2px 2px 20px -3px rgba(168, 87, 126, 0.5),
    0 0 0 1px rgba(168, 87, 126, 0.55),
    0 0 38px rgba(168, 87, 126, 0.45),
    14px -10px 46px -10px rgba(168, 87, 126, 0.65),
    0 34px 60px -22px rgba(68, 39, 90, 0.5);
}
.work-stat strong { text-shadow: 0 0 24px rgba(168, 87, 126, 0.42); }

.step {
  border-color: rgba(212, 165, 199, 0.46);
  box-shadow:
    inset -1px 1px 0 rgba(255, 255, 255, 0.22),
    inset -2px 2px 16px -4px rgba(212, 165, 199, 0.30),
    10px -8px 34px -10px rgba(168, 87, 126, 0.7),
    0 18px 40px -22px rgba(0, 0, 0, 0.6);
}

/* Availability pill */
.availability {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1.25rem;
  padding: 0.45rem 1.05rem 0.45rem 0.85rem;
  border: 1px solid rgba(212, 165, 199, 0.6);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(168, 87, 126, 0.42), rgba(168, 87, 126, 0.16));
  box-shadow: 0 0 28px rgba(168, 87, 126, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.availability-dot {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #F2B6D3;
  box-shadow: 0 0 0 3px rgba(242, 182, 211, 0.28), 0 0 14px 3px rgba(242, 182, 211, 0.85);
}
@media (prefers-reduced-motion: no-preference) {
  .availability-dot { animation: availability-pulse 2.6s ease-in-out infinite; }
  @keyframes availability-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(242, 182, 211, 0.28), 0 0 14px 3px rgba(242, 182, 211, 0.85); }
    50% { box-shadow: 0 0 0 7px rgba(242, 182, 211, 0.08), 0 0 20px 6px rgba(242, 182, 211, 0.55); }
  }
}

/* Accent phrase: lighter Witch Rose with a glow, for large type on dark backgrounds only. */
.accent {
  color: #F2B6D3;
  text-shadow: 0 0 22px rgba(168, 87, 126, 0.95), 0 0 56px rgba(168, 87, 126, 0.55);
}

/* Footer */
.site-footer {
  position: relative;
  border-top: 0;
  background:
    radial-gradient(56% 92% at 100% 0%, rgba(168, 87, 126, 0.46) 0%, rgba(168, 87, 126, 0.14) 50%, transparent 76%),
    radial-gradient(46% 72% at 0% 100%, rgba(68, 39, 90, 0.85) 0%, transparent 70%),
    linear-gradient(200deg, var(--purple) 0%, var(--black) 64%);
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rose) 28%, var(--mauve) 72%, transparent);
  box-shadow: 0 0 26px 3px rgba(168, 87, 126, 0.75);
}
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(112deg, transparent 0 54px, rgba(212, 165, 199, 0.06) 54px 56px, transparent 56px 130px);
  -webkit-mask-image: radial-gradient(60% 100% at 100% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(60% 100% at 100% 0%, #000 0%, transparent 72%);
}
.site-footer > .container { position: relative; z-index: 1; }
.footer-brand .brand img { border-radius: 10px; box-shadow: 0 0 26px rgba(168, 87, 126, 0.7); }
.site-footer h2 { color: var(--lavender); }
.site-footer h2::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 0.6rem;
  background: linear-gradient(90deg, var(--rose), var(--mauve));
  box-shadow: 0 0 12px rgba(168, 87, 126, 0.85);
}
.footer-links a {
  position: relative;
  display: inline-block;
  padding: 0.1rem 0 0.2rem 1.15rem;
  color: var(--lavender);
  background: linear-gradient(90deg, var(--rose), var(--mauve)) 1.15rem 100% / 0 2px no-repeat;
  transition: color 0.2s ease, background-size 0.25s ease, text-shadow 0.2s ease;
}
.footer-links a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 0.55rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--rose), var(--mauve));
  box-shadow: 0 0 10px rgba(168, 87, 126, 0.95);
  transition: width 0.25s ease;
}
.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--white);
  text-decoration: none;
  text-shadow: 0 0 18px rgba(212, 165, 199, 0.85);
  background-size: calc(100% - 1.15rem) 2px;
}
.footer-links a:hover::before,
.footer-links a:focus-visible::before { width: 0.9rem; }
.footer-links a:focus-visible { outline: 2px solid var(--mauve); outline-offset: 4px; border-radius: 4px; }
.footer-links a[target="_blank"]::after {
  content: "\2197";
  content: "\2197" / "";
  margin-left: 0.35em;
  font-size: 0.85em;
  color: var(--mauve);
}
.footer-base {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(212, 165, 199, 0.55) 50%, transparent) 1;
}

@media (max-width: 860px) {
  .section:not(.process) {
    background-image:
      linear-gradient(112deg, transparent 48%, rgba(255, 255, 255, 0.52) 57%, transparent 67%),
      radial-gradient(55% 30% at 100% 0%, rgba(168, 87, 126, 0.26) 0%, rgba(212, 165, 199, 0.26) 40%, transparent 74%),
      radial-gradient(60% 40% at 0% 100%, rgba(212, 165, 199, 0.50) 0%, rgba(232, 213, 232, 0.24) 46%, transparent 74%),
      radial-gradient(60% 30% at 52% 52%, rgba(255, 255, 255, 0.70) 0%, transparent 70%);
  }
}

/* Fallbacks restated, because the rules above come later in the file than the earlier ones. */
@media (max-width: 700px) {
  .card,
  .embed-card,
  .person-card,
  .quote,
  .notice,
  .product-card,
  .credential,
  .event-card,
  .asset-card,
  .toc-card {
    background: radial-gradient(130% 100% at 100% 0%, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.88) 46%, rgba(240, 226, 240, 0.88) 100%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .availability { font-size: 0.85rem; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card,
  .embed-card,
  .person-card,
  .quote,
  .notice,
  .product-card,
  .credential,
  .event-card,
  .asset-card,
  .toc-card { background: var(--white); }
}
@media (prefers-reduced-transparency: reduce) {
  .card,
  .embed-card,
  .person-card,
  .quote,
  .notice,
  .product-card,
  .credential,
  .event-card,
  .asset-card,
  .toc-card,
  .option { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .availability { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media print {
  .availability, .accent { box-shadow: none !important; text-shadow: none !important; }
  .accent { color: inherit; }
  .site-footer::before, .site-footer::after, .section::after { display: none; }
}

/* ---------- Footer links, more glow ----------
   Links glow softly at rest and flare on hover. The glow is on dark, so it adds to legibility
   rather than taking from it, and the text colour itself is unchanged. */
.footer-links a {
  text-shadow: 0 0 10px rgba(212, 165, 199, 0.55), 0 0 26px rgba(168, 87, 126, 0.55);
}
.footer-links a::before {
  height: 3px;
  box-shadow: none;
  transition: width 0.25s ease, box-shadow 0.25s ease;
}
.footer-links a:hover,
.footer-links a:focus-visible {
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.55),
    0 0 18px rgba(212, 165, 199, 0.95),
    0 0 40px rgba(168, 87, 126, 0.95);
}
.footer-links a:hover::before,
.footer-links a:focus-visible::before {
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.7), 0 0 24px 5px rgba(242, 182, 211, 0.95), 0 0 40px 8px rgba(168, 87, 126, 0.8);
}
.footer-links a[target="_blank"]::after { text-shadow: 0 0 10px rgba(212, 165, 199, 0.9); }
.site-footer h2 { text-shadow: 0 0 14px rgba(212, 165, 199, 0.45); }
@media print {
  .footer-links a, .footer-links a::before, .footer-links a::after, .site-footer h2 { text-shadow: none !important; box-shadow: none !important; }
}

/* ---------- Featured testimonial: the hero card ---------- */
.testimonial blockquote p + p { margin-top: 1rem; }

.feature-card {
  position: relative;
  margin: 0;
  padding: clamp(28px, 5vw, 72px);
  border: 1px solid rgba(212, 165, 199, 0.55);
  border-radius: 28px;
  color: var(--lavender);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(168, 87, 126, 0.58) 0%, rgba(168, 87, 126, 0.18) 46%, transparent 74%),
    radial-gradient(50% 60% at 0% 100%, rgba(68, 39, 90, 0.9) 0%, transparent 70%),
    linear-gradient(200deg, var(--purple) 0%, var(--black) 100%);
  box-shadow:
    inset -1px 1px 0 rgba(255, 255, 255, 0.28),
    inset -3px 3px 34px -6px rgba(212, 165, 199, 0.38),
    0 0 0 1px rgba(168, 87, 126, 0.40),
    0 0 64px rgba(168, 87, 126, 0.48),
    26px -20px 90px -20px rgba(168, 87, 126, 0.75),
    0 50px 90px -30px rgba(68, 39, 90, 0.75);
}
.feature-mark {
  display: block;
  height: 0.55em;
  margin: 0 0 0.35rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(6rem, 12vw, 10rem);
  line-height: 1;
  color: #F2B6D3;
  text-shadow: 0 0 30px rgba(168, 87, 126, 0.95), 0 0 70px rgba(168, 87, 126, 0.6);
}
.feature-card blockquote { margin: 0; }
.feature-lead {
  margin: 0 0 1.75rem;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
  text-shadow: 0 0 26px rgba(168, 87, 126, 0.85), 0 0 60px rgba(168, 87, 126, 0.45);
}
.feature-body p { margin: 0 0 1.1em; color: var(--lavender); font-size: 1.05rem; line-height: 1.7; break-inside: avoid; }
.feature-body p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .feature-body { column-count: 2; column-gap: 64px; }
}
.feature-card figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.1rem;
  margin-top: 2.25rem;
  padding-top: 1.4rem;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(212, 165, 199, 0.7), rgba(168, 87, 126, 0.15)) 1;
}
.feature-card figcaption strong { font-size: 1.25rem; color: var(--white); text-shadow: 0 0 18px rgba(168, 87, 126, 0.7); }
.feature-card figcaption span,
.feature-card figcaption time { color: var(--mauve); }
.feature-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.75rem; }
@media print {
  .feature-card { color: #000; background: #fff !important; box-shadow: none !important; border-color: #000; }
  .feature-lead, .feature-mark, .feature-card figcaption strong { color: #000; text-shadow: none !important; }
  .feature-body p, .feature-card figcaption span, .feature-card figcaption time { color: #000; }
}

/* ---------- FAQ: question cards, and the central FAQ page ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 64rem;
  margin: 0 auto;
}
.faq-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid rgba(168, 87, 126, 0.38);
  border-radius: var(--radius);
  color: var(--purple);
  text-decoration: none;
  background: radial-gradient(130% 100% at 100% 0%, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.74) 40%, rgba(236, 208, 229, 0.62) 100%);
  box-shadow:
    inset -1px 1px 0 rgba(255, 255, 255, 0.95),
    inset -2px 2px 16px -3px rgba(168, 87, 126, 0.34),
    10px -8px 30px -12px rgba(168, 87, 126, 0.55),
    0 26px 46px -28px rgba(68, 39, 90, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.faq-card:hover,
.faq-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(168, 87, 126, 0.9);
  box-shadow:
    inset -1px 1px 0 rgba(255, 255, 255, 0.95),
    inset -2px 2px 20px -3px rgba(168, 87, 126, 0.5),
    0 0 0 1px rgba(168, 87, 126, 0.55),
    0 0 34px rgba(168, 87, 126, 0.45),
    14px -10px 44px -10px rgba(168, 87, 126, 0.65),
    0 34px 56px -24px rgba(68, 39, 90, 0.5);
}
.faq-card:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
.faq-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--white);
  background: linear-gradient(180deg, var(--rose), var(--rose-deep));
  box-shadow: 0 0 0 1px rgba(212, 165, 199, 0.7), 0 0 18px rgba(168, 87, 126, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.faq-card-body { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.faq-card h3 { margin: 0; font-size: 1.12rem; line-height: 1.3; color: var(--purple); }
.faq-card-cta { font-size: 0.95rem; font-weight: 700; color: var(--rose-deep); }
.faq-card-cta span { display: inline-block; transition: transform 0.2s ease; }
.faq-card:hover .faq-card-cta span,
.faq-card:focus-visible .faq-card-cta span { transform: translateX(5px); }
.faq-more { margin: 2rem 0 0; text-align: center; }

.faq-topics { display: flex; flex-wrap: wrap; gap: 12px; }
.faq-topic {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem 0.55rem 1.1rem;
  border: 1px solid rgba(168, 87, 126, 0.45);
  border-radius: 999px;
  font-weight: 700;
  color: var(--purple);
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(236, 208, 229, 0.6));
  box-shadow: inset 0 1px 0 var(--white), 0 8px 22px -10px rgba(168, 87, 126, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.faq-topic span {
  display: grid;
  place-items: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--white);
  background: var(--rose-deep);
}
.faq-topic:hover,
.faq-topic:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(168, 87, 126, 0.9);
  box-shadow: 0 0 0 1px rgba(168, 87, 126, 0.5), 0 0 26px rgba(168, 87, 126, 0.45), 0 12px 28px -10px rgba(168, 87, 126, 0.6);
}
.faq-topic:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }

.faq-entries { display: grid; gap: 20px; max-width: 52rem; }
.faq-entry {
  padding: 28px 30px;
  border: 1px solid rgba(168, 87, 126, 0.38);
  border-radius: var(--radius);
  background: radial-gradient(130% 100% at 100% 0%, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.74) 40%, rgba(236, 208, 229, 0.62) 100%);
  box-shadow:
    inset -1px 1px 0 rgba(255, 255, 255, 0.95),
    inset -2px 2px 16px -3px rgba(168, 87, 126, 0.30),
    10px -8px 30px -12px rgba(168, 87, 126, 0.50),
    0 26px 46px -28px rgba(68, 39, 90, 0.45);
}
.faq-entry h3 { margin: 0 0 0.8rem; font-size: 1.3rem; line-height: 1.3; }
.faq-entry h3 a { color: var(--purple); text-decoration: none; }
.faq-entry h3 a:hover { color: var(--rose-deep); text-decoration: underline; text-decoration-color: var(--rose); }
.faq-answer p { margin: 0 0 0.9rem; color: var(--plum); }
.faq-answer ul { margin: 0.4rem 0 0.9rem; padding-left: 1.3rem; list-style: disc; color: var(--plum); }
.faq-answer > :last-child { margin-bottom: 0; }
.faq-answer a, .faq-appears a { color: var(--rose-deep); }
.faq-appears {
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(168, 87, 126, 0.28);
  font-size: 0.9rem;
  color: var(--plum);
}
.faq-entry:target {
  border-color: var(--rose);
  box-shadow:
    inset -1px 1px 0 rgba(255, 255, 255, 0.95),
    inset -2px 2px 20px -3px rgba(168, 87, 126, 0.5),
    0 0 0 2px var(--rose),
    0 0 46px rgba(168, 87, 126, 0.6),
    14px -10px 50px -10px rgba(168, 87, 126, 0.7);
}

@media (max-width: 700px) {
  .faq-grid { grid-template-columns: 1fr; gap: 16px; }
  .faq-card { padding: 18px; }
  .faq-entry { padding: 22px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-card:hover, .faq-card:focus-visible, .faq-topic:hover, .faq-topic:focus-visible { transform: none; }
}
@media print {
  .faq-card, .faq-entry, .faq-topic { background: #fff !important; box-shadow: none !important; }
  .faq-badge { box-shadow: none; }
}

/* Centred section heads sit under the spill from the dark band above, so on narrow screens it is softer. */
@media (max-width: 860px) {
  .hero + .section::before,
  .proof-strip + .section::before,
  .process + .section::before,
  .community-band + .section::before {
    background: radial-gradient(70% 110% at 100% 0%, rgba(168, 87, 126, 0.20) 0%, rgba(168, 87, 126, 0.05) 50%, transparent 76%);
  }
}

/* ---------- Prohibited-use cards: the same lit surface, in warning red ---------- */
.misuse-card {
  padding: 22px 18px;
  border: 1px solid rgba(198, 40, 40, 0.5);
  background: radial-gradient(130% 100% at 100% 0%, rgba(255, 255, 255, 0.97) 0%, rgba(255, 242, 242, 0.82) 40%, rgba(246, 204, 206, 0.72) 100%);
  box-shadow:
    inset -1px 1px 0 rgba(255, 255, 255, 0.95),
    inset -2px 2px 16px -3px rgba(198, 40, 40, 0.30),
    10px -8px 30px -12px rgba(198, 40, 40, 0.55),
    0 26px 46px -28px rgba(68, 39, 90, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.misuse-card:hover {
  transform: translateY(-3px);
  border-color: rgba(198, 40, 40, 0.9);
  box-shadow:
    inset -1px 1px 0 rgba(255, 255, 255, 0.95),
    inset -2px 2px 20px -3px rgba(198, 40, 40, 0.45),
    0 0 0 1px rgba(198, 40, 40, 0.5),
    0 0 34px rgba(198, 40, 40, 0.40),
    14px -10px 44px -10px rgba(198, 40, 40, 0.6),
    0 34px 56px -24px rgba(68, 39, 90, 0.5);
}
.guide-body .misuse-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  font-size: 1.2rem;
  text-shadow: 0 0 18px rgba(198, 40, 40, 0.30);
}
.misuse-label span {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  font-size: 0.95rem;
  color: var(--white);
  text-shadow: none;
  background: linear-gradient(180deg, #D32F2F, #B71C1C);
  box-shadow: 0 0 0 1px rgba(255, 205, 205, 0.75), 0 0 16px rgba(198, 40, 40, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
@media (prefers-reduced-motion: reduce) { .misuse-card:hover { transform: none; } }
@media print { .misuse-card { background: #fff !important; box-shadow: none !important; } .misuse-label span { box-shadow: none; } }

/* On phones the seam spill is shorter and fainter, so centred labels under it stay at AA contrast. */
@media (max-width: 860px) {
  .hero + .section::before,
  .proof-strip + .section::before,
  .process + .section::before,
  .community-band + .section::before {
    height: 140px;
    background: radial-gradient(70% 110% at 100% 0%, rgba(168, 87, 126, 0.14) 0%, rgba(168, 87, 126, 0.04) 50%, transparent 76%);
  }
}