/* ==========================================================================
   Wisdom Tree Therapy
   --------------------------------------------------------------------------
   Palette is anchored on #5A228D, the leaf purple lifted from the tree logo.
   Direction: twilight, not daylight. Muted violets and a soft aubergine ink,
   deliberately not the cream-and-clay palette most therapy sites land on. A lot
   of this audience arrives at 2am on a phone, so the page stays low-glare and
   cool. Purple carries the calm without the clinical blue or the wellness green.
   One warm note only: an old gold, used as lamplight against the dusk, and
   reserved for the stem, the eyebrow marks and the focus ring. Nothing else is
   gold.
   Signature: the stem — a vertical line down the left edge that fills as you
   scroll.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  --paper:       #F5F2F8;
  --paper-2:     #FFFFFF;
  --paper-3:     #EBE5F0;

  --ink:         #221A2B;
  --ink-soft:    #574E63;
  --ink-faint:   #6F6679;

  --plum:        #5A228D;
  --plum-deep:   #331350;
  --plum-tint:   #E3D9EE;

  --haze:      #A895BC;
  --rule:        #D8CFE2;

  --gold:       #A87528;
  --gold-deep:  #8A5D18;
  --gold-tint:  #F0E7D4;

  --alarm:       #8C3A2E;

  --display: "Petrona", Georgia, "Times New Roman", serif;
  --body:    "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem);
  --step-0:  clamp(1.02rem, 0.98rem + 0.20vw, 1.14rem);
  --step-1:  clamp(1.22rem, 1.14rem + 0.38vw, 1.46rem);
  --step-2:  clamp(1.48rem, 1.32rem + 0.76vw, 1.94rem);
  --step-3:  clamp(1.80rem, 1.52rem + 1.34vw, 2.62rem);
  --step-4:  clamp(2.20rem, 1.72rem + 2.28vw, 3.60rem);

  --wrap:  74rem;
  --prose: 34rem;

  --gap:   clamp(1.5rem, 1rem + 2vw, 2.75rem);
  --bay:   clamp(3.25rem, 2rem + 5vw, 6.5rem);

  --radius: 3px;
  --shadow: 0 1px 2px rgba(51, 19, 80, 0.06), 0 8px 28px -14px rgba(51, 19, 80, 0.20);
  --ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

p { text-wrap: pretty; }
p + p { margin-top: 1em; }

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

strong { font-weight: 700; }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 32ch;
  margin-top: 1.1rem;
}

/* Eyebrow: small caps label with an amber tick. The tick is the only
   decoration on the page that isn't structural. */
.eyebrow {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 0.65em;
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 1.6em;
  height: 2px;
  background: var(--gold);
  flex: none;
}

.prose { max-width: var(--prose); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }

/* --- Layout --------------------------------------------------------------- */
.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.section { padding-block: var(--bay); }
.section--tint { background: var(--paper-3); }
.section--plum { background: var(--plum-deep); color: var(--plum-tint); }

.section__head { max-width: 20ch; }
.section__intro { max-width: var(--prose); margin-top: 1.2rem; color: var(--ink-soft); }

.split {
  display: grid;
  gap: var(--gap);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 60rem) {
  .split { grid-template-columns: 5fr 6fr; gap: clamp(2.5rem, 5vw, 5rem); }
  .split--flip > :first-child { order: 2; }
}

figure > img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* --- Skip link ------------------------------------------------------------ */
.skip {
  position: absolute; left: -9999px;
  background: var(--plum-deep); color: #fff;
  padding: 0.75rem 1.25rem; z-index: 200;
}
.skip:focus { left: 1rem; top: 1rem; }

/* --- Signature: the stem -------------------------------------------------- */
.stem {
  position: fixed;
  left: max(0.75rem, env(safe-area-inset-left));
  top: 0; bottom: 0;
  width: 2px;
  background: var(--rule);
  z-index: 40;
  pointer-events: none;
}
.stem__fill {
  display: block;
  width: 100%;
  height: var(--stem, 0%);
  background: linear-gradient(180deg, var(--gold), var(--plum));
  transition: height 90ms linear;
}
@media (max-width: 60rem) { .stem { display: none; } }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.03em;
  padding: 0.85em 1.5em;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease),
              border-color 160ms var(--ease), transform 160ms var(--ease);
}
.btn--primary { background: var(--plum); color: var(--paper-2); }
.btn--primary:hover { background: var(--plum-deep); color: var(--paper-2); transform: translateY(-1px); }
.btn--ghost { border-color: var(--haze); color: var(--plum-deep); background: transparent; }
.btn--ghost:hover { border-color: var(--plum); background: var(--plum-tint); }
.btn--lg { padding: 1em 1.9em; font-size: var(--step-0); }
.btn--sm { padding: 0.7em 1.1em; }

/* --- Dark surfaces ------------------------------------------------------
   ONE contract for every dark-background section. Put `on-dark` on the
   section element and everything inside inverts correctly — text, headings,
   eyebrows, links, ghost buttons, hairlines.

   Adding a new dark section? Give it `class="section on-dark"` plus a
   background, and you are done. Do not write per-section colour overrides;
   that is how the hero and CTA band drifted out of sync in the first place.

   .hero, .band and .section--plum are aliased in below so existing markup
   keeps working without the class. New sections should use `on-dark`. */
.on-dark,
.hero,
.band,
.section--plum {
  color: var(--plum-tint);
}

.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4,
.hero h1, .hero h2, .hero h3,
.band h1, .band h2, .band h3,
.section--plum h2, .section--plum h3 {
  color: var(--paper-2);
}

.on-dark .eyebrow,
.hero .eyebrow,
.band .eyebrow,
.section--plum .eyebrow {
  color: var(--haze);
}

.on-dark a:not(.btn),
.hero a:not(.btn),
.band a:not(.btn),
.section--plum a:not(.btn) {
  color: var(--gold-tint);
}
.on-dark a:not(.btn):hover,
.hero a:not(.btn):hover,
.band a:not(.btn):hover,
.section--plum a:not(.btn):hover {
  color: var(--paper-2);
}

.on-dark .btn--ghost,
.hero .btn--ghost,
.band .btn--ghost,
.section--plum .btn--ghost {
  border-color: var(--haze);
  color: var(--paper-2);
}
.on-dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.band .btn--ghost:hover,
.section--plum .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--paper-2);
  color: var(--paper-2);
}

/* Hairlines and card edges need to lighten too, not darken. */
.on-dark .card,
.section--plum .card {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.20);
}
.on-dark .card:hover,
.section--plum .card:hover {
  border-color: var(--haze);
}
.on-dark .card__title,
.section--plum .card__title { color: var(--paper-2); }
.on-dark .card__body,
.section--plum .card__body { color: var(--plum-tint); }
.on-dark .card__more,
.section--plum .card__more { color: var(--gold-tint); }

.on-dark .section__intro,
.section--plum .section__intro { color: var(--plum-tint); }

.on-dark .steps,
.section--plum .steps { border-left-color: rgba(255, 255, 255, 0.20); }
.on-dark .steps__body,
.section--plum .steps__body { color: var(--plum-tint); }

/* --- Focus ---------------------------------------------------------------- */
:focus-visible {
  outline: 2.5px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Utility bar ---------------------------------------------------------- */
.utility {
  background: var(--plum-deep);
  color: var(--plum-tint);
  font-size: var(--step--1);
}
.utility__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 0.5rem;
}
.utility__note { letter-spacing: 0.06em; }
.utility__phone { color: var(--paper-2); font-weight: 700; text-decoration: none; white-space: nowrap; }
.utility__phone:hover { color: var(--gold-tint); text-decoration: underline; }

/* --- Masthead ------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.masthead[data-scrolled] { border-bottom-color: var(--rule); background: color-mix(in srgb, var(--paper) 96%, transparent); }
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.9rem;
}

.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--plum-deep); }
.brand__mark { width: 42px; height: 42px; flex: none; }
.brand__name {
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
}
.brand__sub {
  font-family: var(--body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.brand--footer { color: var(--paper-2); }
.brand--footer .brand__mark { width: 46px; height: 46px; }
.brand--footer .brand__sub { color: var(--haze); }

/* --- Nav ------------------------------------------------------------------ */
.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav__list { display: flex; align-items: center; gap: clamp(0.9rem, 1.7vw, 1.7rem); }
.nav__list a {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav__list a:hover { border-bottom-color: var(--haze); }
.nav__list a[aria-current] { border-bottom-color: var(--gold); }

.navtoggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.5rem 0.8rem;
  font-size: var(--step--1);
  font-weight: 700;
  cursor: pointer;
}
.navtoggle__bars { position: relative; width: 16px; height: 2px; background: var(--ink); }
.navtoggle__bars::before, .navtoggle__bars::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: var(--ink);
}
.navtoggle__bars::before { top: -5px; }
.navtoggle__bars::after  { top: 5px; }

@media (max-width: 62rem) {
  .navtoggle { display: inline-flex; }
  .nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper-2);
    border-block: 1px solid var(--rule);
    padding: 0.5rem 1.25rem 1.5rem;
    box-shadow: var(--shadow);
    display: none;
  }
  .nav[data-open] { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list a { display: block; padding-block: 0.9rem; border-bottom: 1px solid var(--rule); font-size: var(--step-0); }
  .nav__cta { margin-top: 1.25rem; }
}

/* --- Home hero ------------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 2rem + 8vw, 8rem);
  background:
    linear-gradient(180deg, rgba(51,19,80,0.00) 0%, rgba(51,19,80,0.58) 78%, rgba(51,19,80,0.84) 100%),
    var(--plum-deep);
  color: var(--paper-2);
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0;
  z-index: -1;
  object-fit: cover;
  width: 100%; height: 100%;
  opacity: 0.55;
}
.hero__inner { position: relative; max-width: 46rem; }
.hero__title { max-width: 16ch; }
.hero__lede { font-size: var(--step-1); line-height: 1.5; max-width: 40ch; margin-top: 1.25rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

/* --- Interior page hero --------------------------------------------------- */
.phero {
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem) clamp(2rem, 1rem + 3vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
}
.phero__inner { max-width: 48rem; }
.phero__actions { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: 0.85rem; }
.phero--service { background: var(--paper-3); }

.crumbs {
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em;
}
.crumbs a { color: var(--ink-soft); }

/* --- Trust strip ---------------------------------------------------------- */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: var(--step--1);
  letter-spacing: 0.05em;
  color: var(--plum-tint);
}
.trust__item { display: flex; align-items: center; gap: 0.5em; }
.trust__item::before { content: ""; width: 5px; height: 5px; background: var(--gold); border-radius: 50%; flex: none; }

/* --- Cards ---------------------------------------------------------------- */
.cards { display: grid; gap: 1.15rem; margin-top: 2.5rem; }
@media (min-width: 40rem) { .cards--2, .cards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 58rem) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.card:hover { border-color: var(--haze); transform: translateY(-2px); box-shadow: var(--shadow); }
.card__link { display: block; padding: 1.65rem 1.5rem; text-decoration: none; color: inherit; height: 100%; }
.card__title { margin-bottom: 0.55rem; color: var(--plum-deep); }

/* Sitemap's category headings are h2 for correct document structure (they
   follow the page's h1 directly, with nothing between), but should keep
   the same compact size as the h3 card titles used everywhere else. */
.cards--sitemap .card__title { font-size: var(--step-1); }
.card__body { color: var(--ink-soft); font-size: var(--step--1); }
.card__more {
  display: inline-block;
  margin-top: 1.1rem;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--plum);
  letter-spacing: 0.04em;
}
.card__more::after { content: " \2192"; }

/* --- Recognition grid ("does this sound like you") ------------------------ */
.recog { display: grid; gap: 0.9rem; margin-top: 2.5rem; }
@media (min-width: 44rem) { .recog { grid-template-columns: repeat(2, 1fr); } }
.recog__item {
  background: var(--paper-2);
  border-left: 3px solid var(--haze);
  padding: 1.1rem 1.3rem;
  font-size: var(--step-0);
  color: var(--ink-soft);
}
.recog__item strong { color: var(--ink); font-weight: 600; }

/* --- Steps / timeline ----------------------------------------------------- */
.steps { counter-reset: step; margin-top: 2.5rem; border-left: 2px solid var(--rule); }
.steps__item { position: relative; padding: 0 0 2.25rem 2.25rem; counter-increment: step; }
.steps__item:last-child { padding-bottom: 0; }
.steps__item::before {
  content: counter(step);
  position: absolute;
  left: -1.05rem; top: 0;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  background: var(--plum); color: var(--paper-2);
  border-radius: 50%;
  font-size: 0.8rem; font-weight: 700;
  font-family: var(--body);
}
.steps__title { margin-bottom: 0.4rem; }
.steps__body { color: var(--ink-soft); max-width: 46ch; }

/* --- Pricing -------------------------------------------------------------- */
.pricing { display: grid; gap: 1.15rem; margin-top: 2.5rem; }
@media (min-width: 52rem) { .pricing { grid-template-columns: repeat(3, 1fr); } }
.price {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--plum);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
}
.price--feature { border-top-color: var(--gold); }
.price__label { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.price__amount { font-family: var(--display); font-size: var(--step-2); margin: 0.5rem 0 0.75rem; color: var(--plum-deep); }
.price__note { font-size: var(--step--1); color: var(--ink-soft); }

.insurers { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.75rem; }
.insurers__item {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.55rem 0.95rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
}

/* --- Accordion (FAQ) ------------------------------------------------------ */
.faq { margin-top: 2.5rem; max-width: 48rem; border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  text-align: left;
  background: none;
  border: 0;
  padding: 1.25rem 0;
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--plum-deep);
  cursor: pointer;
}
.faq__q::after { content: "+"; font-family: var(--body); font-size: 1.4rem; color: var(--gold-deep); line-height: 1; flex: none; }
.faq__q[aria-expanded="true"]::after { content: "\2013"; }
.faq__a { padding-bottom: 1.35rem; max-width: 60ch; color: var(--ink-soft); }
.faq__a[hidden] { display: none; }

/* --- Forms ---------------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; max-width: 30rem; }
.field { display: grid; gap: 0.4rem; }
.field__label { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.04em; }
.field__input, .field__area {
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
  padding: 0.8rem 0.9rem;
  font-size: var(--step-0);
}
.field__input:focus, .field__area:focus { border-color: var(--plum); outline-offset: 1px; }
.field__area { min-height: 8rem; resize: vertical; }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 0.65rem; }
.form__note { font-size: var(--step--1); color: var(--ink-faint); max-width: 40ch; }

/* --- CTA band ------------------------------------------------------------- */
.band { background: var(--plum-deep); color: var(--paper-2); padding-block: var(--bay); }
.band__inner { max-width: 40rem; }
.band__head { max-width: 18ch; }
.band__body { margin-top: 1rem; max-width: 42ch; }
.band__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

/* --- Crisis notice -------------------------------------------------------- */
.crisis { background: var(--gold-tint); border-block: 1px solid #E2D3B4; }
.crisis__inner { padding-block: 1rem; font-size: var(--step--1); color: #57431D; }
.crisis a { color: var(--alarm); font-weight: 700; }

/* Crisis page gets a louder version and no competing CTA. */
.crisis-panel {
  background: var(--paper-2);
  border: 2px solid var(--alarm);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: 2rem;
}
.crisis-panel__number { font-family: var(--display); font-size: var(--step-3); color: var(--alarm); }

/* --- Footer --------------------------------------------------------------- */
.footer { background: var(--plum-deep); color: var(--plum-tint); padding-block: var(--bay) 2rem; font-size: var(--step--1); }
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 44rem) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; } }
.footer__blurb { margin-top: 1.1rem; max-width: 34ch; color: var(--haze); }
.footer__head {
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-2);
  margin-bottom: 1rem;
}
.footer__list { display: grid; gap: 0.6rem; }
.footer__list a { color: var(--plum-tint); text-decoration: none; }
.footer__list a:hover { color: var(--paper-2); text-decoration: underline; }
.footer__col .btn { margin-top: 1.5rem; }

.footer__base {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: grid;
  gap: 0.9rem;
  color: var(--haze);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.footer__legal a { color: var(--haze); text-decoration: none; }
.footer__legal a:hover { color: var(--paper-2); text-decoration: underline; }
.footer__license { color: var(--paper-2); }

/* --- Build-time TODO marker (dev only) ------------------------------------ */
.todo {
  border: 1px dashed var(--gold);
  background: repeating-linear-gradient(135deg, transparent, transparent 8px, rgba(190,139,61,0.07) 8px, rgba(190,139,61,0.07) 16px);
  padding: 1rem 1.15rem;
  margin-block: 1rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
  border-radius: var(--radius);
}
.todo__tag {
  display: inline-block;
  background: var(--gold-deep);
  color: #fff;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15em 0.55em;
  border-radius: 2px;
  margin-right: 0.6em;
}
body.is-prod .todo { display: none; }

/* --- Motion preferences --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .stem__fill { transition: none; }
}

@media print {
  .masthead, .utility, .stem, .band, .navtoggle { display: none !important; }
  body { background: #fff; color: #000; }
}