/*
Theme Name: Rescuely Shift
Theme URI: https://rescuely.net
Author: Rescuely
Description: Marketing theme for Rescuely. The design is ordered like a working day at a shelter -
  timestamps down the left are real sequence, not decoration. Ink-green ground for the openings,
  chalk for the body. Bricolage Grotesque carries the voice; Public Sans stays out of its way.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: Proprietary
Text Domain: rescuely-shift
*/

/* ============================================================================================
   Tokens
   ============================================================================================ */
:root {
  --ink:      #14211C;
  --ink-2:    #3D4F48;
  --chalk:    #FAF9F5;
  --surface:  #FFFFFF;
  --forest:   #14211C;
  --green:    #2F7D57;
  --green-2:  #E4F0E8;
  --coral:    #D9614A;
  --muted:    #65766F;
  /* Green as ink. --green reads 4.75:1 on chalk but only 3.3:1 on forest and 4.3:1 on the
     green-2 tint, so dark grounds and tinted chips get their own value rather than share one. */
  --green-on-dark:  #6DC295;
  --green-deep:     #276A49;
  --coral-deep:     #A83217;
  --muted-deep:     #4A5854;
  --on-green:       #FFFFFF;
  --rule:     #DBDDD5;
  --on-forest:      #EDF2EE;
  --on-forest-soft: #C6D2CB;
  --on-forest-mute: #8FA398;
  --shadow: 0 1px 2px rgba(20,33,28,.05), 0 8px 24px rgba(20,33,28,.05);

  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  --pad: clamp(1.25rem, 5vw, 4rem);

  /* Minimum hit area for anything you tap. Four rules already read this with a 44px fallback, so
     the fallback was doing all the work and the token only looked configurable. */
  --rescuely-tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:      #E8EDE9;
    --ink-2:    #B0BEB7;
    --chalk:    #0D1613;
    --surface:  #141F1B;
    --forest:   #0A120F;
    --green:    #6DC295;
    --green-2:  #16261E;
    --coral:    #EE8B75;
    --muted:    #8B9C94;
    --green-on-dark:  #6DC295;
    --green-deep:     #6DC295;
    --coral-deep:     #EE8B75;
    --muted-deep:     #8B9C94;
    --on-green:       #0A120F;
    --rule:     #26332D;
    --on-forest:      #E8EDE9;
    --on-forest-soft: #B0BEB7;
    --on-forest-mute: #8B9C94;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"] {
  --ink:      #E8EDE9;
  --ink-2:    #B0BEB7;
  --chalk:    #0D1613;
  --surface:  #141F1B;
  --forest:   #0A120F;
  --green:    #6DC295;
  --green-2:  #16261E;
  --coral:    #EE8B75;
  --muted:    #8B9C94;
  --green-on-dark:  #6DC295;
  --green-deep:     #6DC295;
  --coral-deep:     #EE8B75;
  --muted-deep:     #8B9C94;
  --on-green:       #0A120F;
  --rule:     #26332D;
  --on-forest:      #E8EDE9;
  --on-forest-soft: #B0BEB7;
  --on-forest-mute: #8B9C94;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
}

/* ============================================================================================
   Base
   ============================================================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--display); text-wrap: balance; margin: 0; letter-spacing: -0.025em; }
h1 { font-size: clamp(2.5rem, 6.5vw, 4.8rem); line-height: .99; font-weight: 800; }
h2 { font-size: clamp(1.85rem, 4vw, 2.9rem); line-height: 1.06; font-weight: 800; }
h3 { font-size: 1.32rem; line-height: 1.22; font-weight: 600; }
h4, .h4 { font-size: 1.02rem; line-height: 1.3; font-weight: 600; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; }

.wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--pad); }
.wrap-narrow { max-width: 780px; margin-inline: auto; padding-inline: var(--pad); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--green); color: #FFF; padding: .75rem 1.25rem;
  font-family: var(--display); font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* For a heading the layout does not show but the document outline needs. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--coral); outline-offset: 3px;
}

.eyebrow {
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  color: var(--green); letter-spacing: .01em; margin: 0;
}
.lede { font-size: 1.2rem; line-height: 1.6; color: var(--ink-2); max-width: 56ch; }
.on-dark .lede { color: var(--on-forest-soft); }


/* ============================================================================================
   Buttons
   ============================================================================================ */
.btn {
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  padding: .8rem 1.4rem; border-radius: 999px; text-decoration: none;
  display: inline-block; border: 2px solid transparent; white-space: nowrap;
  cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.btn-solid { background: var(--green); color: var(--on-green); }
.btn-solid:hover { background: var(--ink); color: var(--chalk); }
.btn-line { border-color: currentColor; }
.btn-line:hover { background: color-mix(in srgb, currentColor 12%, transparent); }

/* ============================================================================================
   Header / nav
   ============================================================================================ */
.site-header { background: var(--forest); color: var(--on-forest); }
.topbar { display: flex; align-items: center; gap: 1.5rem; padding-block: 1rem; }
.brand {
  font-family: var(--display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.04em;
  display: flex; align-items: center; gap: .5rem; text-decoration: none; color: inherit;
}
.site-nav { margin-left: auto; display: flex; gap: 1.4rem; align-items: center; }
.site-nav a {
  font-family: var(--display); font-weight: 500; font-size: .92rem;
  text-decoration: none; opacity: .78;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { opacity: 1; }
.site-nav a.btn { opacity: 1; }

.nav-toggle {
  margin-left: auto; display: none; background: none; border: 0; color: inherit;
  font-family: var(--display); font-weight: 600; font-size: .95rem; padding: .5rem .25rem;
}
/* Reads as one more nav item rather than a widget, which is the weight it deserves. */
.theme-toggle {
  background: none; border: 0; color: inherit; cursor: pointer;
  font-family: var(--display); font-weight: 500; font-size: .92rem;
  padding: .35rem .6rem; border-radius: 999px; opacity: .78;
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: var(--rescuely-tap);
}
.theme-toggle:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.theme-toggle-word { opacity: .6; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .theme-toggle { font-size: 1.05rem; padding-inline: 0; opacity: .9; }
  .site-nav {
    margin-left: 0; display: none; width: 100%; flex-direction: column;
    align-items: flex-start; gap: .25rem; padding-bottom: 1.25rem;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { font-size: 1.05rem; padding-block: .55rem; opacity: .9; }
  .topbar { flex-wrap: wrap; }
}

/* ============================================================================================
   Page opener (interior pages)
   ============================================================================================ */
.page-open { background: var(--forest); color: var(--on-forest); padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem); }
.page-open h1 { font-size: clamp(2.2rem, 5.5vw, 3.9rem); margin-top: 1rem; max-width: 20ch; }
.page-open .lede { margin-top: 1.4rem; }
.page-open .open-actions { margin-top: 2rem; }

.open-actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.open-actions .free { font-family: var(--display); font-weight: 600; font-size: .9rem; color: var(--green); }


/* ============================================================================================
   Home: the day
   ============================================================================================ */
.open { background: var(--forest); color: var(--on-forest); padding-block: 0 clamp(4rem, 9vw, 7rem); }
.open-grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; margin-top: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .open-grid { grid-template-columns: 1.15fr .85fr; } }
.open h1 { margin-top: 1rem; }
.open .lede { color: var(--on-forest-soft); max-width: 44ch; margin-top: 1.5rem; }
.phone { width: 100%; max-width: 300px; margin-inline: auto; display: block; filter: drop-shadow(0 30px 50px rgba(0,0,0,.45)); }

.day { padding-block: clamp(3.5rem, 8vw, 6rem); }
.beat { display: grid; gap: 1rem 2.5rem; padding-block: clamp(2rem, 5vw, 3.25rem); border-top: 1px solid var(--rule); }
@media (min-width: 860px) { .beat { grid-template-columns: 9rem 1fr; } }
.beat:first-of-type { border-top: 0; padding-top: 0; }
.stamp { font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--green); font-variant-numeric: tabular-nums; }
.stamp small { display: block; font-weight: 400; font-size: .8rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-top: .2rem; }
.beat-body { max-width: 62ch; display: grid; gap: 1rem; }
.beat-body p { color: var(--ink-2); }

.pull {
  font-family: var(--display); font-weight: 600; font-size: 1.15rem; line-height: 1.4;
  color: var(--ink); border-left: 3px solid var(--green); padding-left: 1.1rem; margin-top: .5rem;
}

.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  /* --green-deep, not --green: the tint behind it leaves only 4.27:1. */
  font-family: var(--display); font-weight: 600; font-size: .82rem;
  padding: .4rem .8rem; border-radius: 999px; background: var(--green-2); color: var(--green-deep);
}
.chip.alert { background: color-mix(in srgb, var(--coral) 16%, transparent); color: var(--coral-deep); }

.note {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
  padding: 1rem 1.15rem; display: grid; gap: .35rem; max-width: 34rem;
}
.note .n-top { font-family: var(--display); font-weight: 600; font-size: .92rem; display: flex; gap: .6rem; align-items: baseline; }
.note .n-top em { font-style: normal; color: var(--muted); font-weight: 400; font-size: .8rem; margin-left: auto; }
.note .n-body { font-size: .95rem; color: var(--ink-2); }

/* ============================================================================================
   Sections
   ============================================================================================ */
.section { padding-block: clamp(3.5rem, 8vw, 5.5rem); }
.section-tint { background: var(--green-2); }
.section-dark { background: var(--forest); color: var(--on-forest); }
.section-dark p { color: var(--on-forest-soft); }
.section-head { max-width: 52ch; display: grid; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3rem); }

/* module list - a table of capability, not three marketing cards */
.modules { display: grid; gap: 0; }
.module {
  display: grid; gap: .5rem 2.5rem; padding-block: 1.6rem; border-top: 1px solid var(--rule);
}
@media (min-width: 820px) { .module { grid-template-columns: 16rem 1fr; align-items: start; } }
.module:first-child { border-top: 0; }
.module h3 { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.module .tier {
  font-family: var(--display); font-weight: 600; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px;
  background: var(--green-2); color: var(--green-deep);
}
.module .tier.paid { background: color-mix(in srgb, var(--coral) 15%, transparent); color: var(--coral-deep); }
.module .tier.soon { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted-deep); }
.module-body { display: grid; gap: .85rem; max-width: 64ch; }
.module-body p { color: var(--ink-2); }
.module-body ul { margin: 0; padding-left: 1.15rem; color: var(--ink-2); display: grid; gap: .3rem; font-size: .97rem; }

/* cards */
.cards { display: grid; gap: 1.25rem; }
@media (min-width: 700px)  { .cards.cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .cards.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  padding: 1.5rem; display: grid; gap: .7rem; align-content: start;
}
.card p { color: var(--ink-2); font-size: .98rem; }
.card .card-meta { font-family: var(--display); font-weight: 600; font-size: .8rem; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }

/* quotes */
.quotes { display: grid; gap: 1.25rem; }
@media (min-width: 780px)  { .quotes { grid-template-columns: repeat(2, 1fr); } }
.quote {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  padding: 1.6rem; display: grid; gap: 1rem; align-content: start;
}
.quote blockquote { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1.12rem; line-height: 1.45; color: var(--ink); }
.quote figcaption { display: grid; gap: .15rem; font-size: .9rem; }
.quote .who { font-family: var(--display); font-weight: 600; color: var(--ink); }
.quote .where { color: var(--muted); }
.quote .stat { font-family: var(--display); font-weight: 600; font-size: .84rem; color: var(--green); font-variant-numeric: tabular-nums; }

/* placeholder banner - shown wherever content is illustrative, not real */
.placeholder-banner {
  background: color-mix(in srgb, var(--coral) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--coral) 40%, transparent);
  border-radius: 10px; padding: 1rem 1.15rem; margin-bottom: 2.5rem;
  display: grid; gap: .3rem; max-width: 62ch;
}
.placeholder-banner strong { font-family: var(--display); font-weight: 600; color: var(--coral-deep); }
.placeholder-banner p { font-size: .95rem; color: var(--ink-2); }

/* facts / definition list */
.facts { display: grid; gap: 0; }
.fact { display: grid; gap: .35rem 2rem; padding: 1.15rem 0; border-top: 1px solid var(--rule); }
@media (min-width: 720px) { .fact { grid-template-columns: 15rem 1fr; align-items: baseline; } }
.fact dt { font-family: var(--display); font-weight: 600; font-size: 1rem; }
.fact dd { margin: 0; color: var(--ink-2); font-size: .98rem; }

/* pricing */
.price-grid { display: grid; gap: 1.25rem; align-items: stretch; }
@media (min-width: 860px) { .price-grid { grid-template-columns: 1.2fr 1fr; } }
.price-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1rem; align-content: start;
}
.price-card.lead { border-color: var(--green); border-width: 2px; }
.price-amount { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; letter-spacing: -.04em; }
.price-amount small { font-family: var(--body); font-weight: 400; font-size: 1rem; color: var(--muted); letter-spacing: 0; }
.price-card ul { margin: 0; padding-left: 1.15rem; display: grid; gap: .45rem; color: var(--ink-2); font-size: .98rem; }

.meter { display: grid; gap: 0; }
.meter-row { display: grid; gap: .35rem 2rem; padding: 1.1rem 0; border-top: 1px solid var(--rule); }
@media (min-width: 760px) { .meter-row { grid-template-columns: 1fr auto; align-items: baseline; } }
.meter-row:first-child { border-top: 0; }
.meter-row h4, .meter-row .h4 { margin-bottom: .15rem; }
.meter-row p { color: var(--ink-2); font-size: .96rem; max-width: 62ch; }
.meter-price { font-family: var(--display); font-weight: 600; color: var(--green); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* integrations */
.integrations { display: grid; gap: 0; }
.integration { display: grid; gap: .4rem 2rem; padding-block: 1.4rem; border-top: 1px solid var(--rule); }
@media (min-width: 820px) { .integration { grid-template-columns: 14rem 1fr auto; align-items: baseline; } }
.integration:first-child { border-top: 0; }
.integration h3 { font-size: 1.12rem; }
.integration p { color: var(--ink-2); font-size: .97rem; max-width: 58ch; }
.status {
  font-family: var(--display); font-weight: 600; font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; justify-self: start;
  background: var(--green-2); color: var(--green-deep); white-space: nowrap;
}
.status.planned { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted-deep); }
.status.beta { background: color-mix(in srgb, var(--coral) 15%, transparent); color: var(--coral-deep); }

/* steps */
.steps { display: grid; gap: 0; counter-reset: step; }
.step { display: grid; gap: .5rem 2rem; padding-block: 1.5rem; border-top: 1px solid var(--rule); }
@media (min-width: 760px) { .step { grid-template-columns: 4rem 1fr; } }
.step:first-child { border-top: 0; }
.step-n {
  font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--green);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.step-body { max-width: 62ch; display: grid; gap: .6rem; }
.step-body p { color: var(--ink-2); }

/* prose (default page template) */
.prose { display: grid; gap: 1.15rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose h2 { margin-top: 1.5rem; }
.prose h3 { margin-top: 1rem; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .4rem; }
.prose a { color: var(--green); }

/* Fluent Support renders its own markup in here. Give it room and a boundary, and leave the rest
   alone - restyling somebody else's component breaks quietly on their next release. */
.support-portal {
  margin: .5rem 0; padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--rule); border-radius: 14px; background: var(--surface);
  overflow-x: auto;
}

.prose-photo { margin: .25rem 0; display: grid; gap: .5rem; }
.prose-photo img {
  display: block; width: 100%; max-width: 26rem; margin-inline: auto;
  border: 1px solid var(--rule); border-radius: 12px;
}
.prose-photo figcaption {
  text-align: center; font-family: var(--display); font-weight: 600; font-size: .8rem;
  color: var(--muted); letter-spacing: .03em;
}

/* close + footer */
.close { background: var(--forest); color: var(--on-forest); padding-block: clamp(3.5rem, 8vw, 5.5rem); }
.close h2 { max-width: 16ch; }
.close p { color: var(--on-forest-soft); max-width: 46ch; margin-top: 1.1rem; }
.close .open-actions { margin-top: 2rem; }

.site-footer { background: var(--forest); color: var(--on-forest-mute); padding-bottom: 3rem; }
.site-footer .foot-grid {
  display: grid; gap: 2rem; padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: 2rem;
}
@media (min-width: 780px) { .site-footer .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer .foot-h { color: var(--on-forest); font-size: .85rem; letter-spacing: .07em; text-transform: uppercase; margin-bottom: .9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer a { text-decoration: none; font-size: .92rem; }
.site-footer a:hover { color: var(--on-forest); }
.site-footer .foot-blurb { font-size: .92rem; max-width: 34ch; margin-top: .8rem; }
.site-footer .foot-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline;
  border-top: 1px solid rgba(255,255,255,.09); padding-top: 1.5rem;
}
.site-footer .foot-bottom p { font-size: .85rem; }
.site-footer .foot-bottom nav { margin-left: auto; display: flex; gap: 1.4rem; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ============================================================================================
   FAQ
   ============================================================================================ */
.faq-layout { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .faq-layout { grid-template-columns: 15rem 1fr; } }

/* The category list follows you down a long page on a wide screen, and is just a list on a narrow one. */
.faq-nav h2 { font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: .9rem; }
.faq-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.faq-nav li { display: flex; align-items: baseline; gap: .5rem; }
.faq-nav a {
  font-family: var(--display); font-weight: 500; font-size: .94rem; text-decoration: none;
  color: var(--ink-2); padding: .3rem 0; flex: 1;
}
.faq-nav a:hover { color: var(--green); }
.faq-count { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .faq-nav { position: sticky; top: 1.5rem; } }

.faq-filter { display: grid; gap: .4rem; margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.faq-filter label {
  font-family: var(--display); font-weight: 600; font-size: .85rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.faq-filter input {
  font-family: var(--body); font-size: 1rem; padding: .7rem .9rem;
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--surface); color: var(--ink); width: 100%;
  min-height: var(--rescuely-tap, 44px);
}
.faq-filter input:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.faq-filter-status { font-size: .85rem; color: var(--muted); min-height: 1.2em; }

.faq-section { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); scroll-margin-top: 1.5rem; }
.faq-section h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.faq-intro { color: var(--ink-2); margin: .6rem 0 1.4rem; max-width: 58ch; }

.faq-item { border-top: 1px solid var(--rule); }
.faq-item:last-of-type { border-bottom: 1px solid var(--rule); }

.faq-item summary {
  font-family: var(--display); font-weight: 600; font-size: 1.05rem; line-height: 1.35;
  padding: 1rem 2rem 1rem 0; cursor: pointer; position: relative; list-style: none;
  min-height: var(--rescuely-tap, 44px); display: flex; align-items: center;
}
/* The default triangle differs per browser and cannot be styled; this is one marker everywhere. */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%; width: .6rem; height: .6rem;
  border-right: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: translateY(-70%) rotate(45deg); transition: transform .15s ease;
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item summary:hover { color: var(--green); }
.faq-item summary:focus-visible { outline: 3px solid var(--coral); outline-offset: -3px; }

.faq-answer { padding: 0 2rem 1.25rem 0; max-width: 64ch; }
.faq-answer p { color: var(--ink-2); }
.faq-answer code {
  font-size: .9em; background: var(--green-2); color: var(--green);
  padding: .1rem .35rem; border-radius: 4px;
}

.faq-empty { color: var(--ink-2); padding: 2rem 0; }
.faq-empty a { color: var(--green); }

/* How-to guides: same shell as the FAQ (.faq-layout, .faq-section, .faq-item, .faq-filter) - only what a
   how-to needs beyond a plain answer gets its own rule. */
.howto-summary { color: var(--ink-2); margin: 0 0 .75rem; }
.howto-meta {
  display: flex; flex-wrap: wrap; gap: .35rem 1.25rem;
  font-size: .85rem; color: var(--muted); margin: 0 0 1.1rem;
}
.howto-steps { margin: 0 0 1rem; padding-left: 1.4rem; max-width: 64ch; }
.howto-steps li { margin-bottom: .7rem; color: var(--ink-2); }
.howto-steps li:last-child { margin-bottom: 0; }
.howto-steps strong { color: var(--ink); }
.howto-tip {
  max-width: 64ch; margin: 0; padding: .85rem 1.1rem; border-radius: 10px;
  background: var(--green-2); color: var(--ink-2); font-size: .95rem;
}
.howto-tip strong { color: var(--green-deep); }

/* The paragraph under the species chips on the home page. */
.species-note { margin-top: clamp(2rem, 4vw, 2.75rem); max-width: 64ch; }

/* ============================================================================================
   Ink by ground

   Contrast is a property of a pair, not of a color, and three of these colors sit on more than
   one ground: --green is 4.75:1 on chalk but 3.3:1 on forest and 4.27:1 on the green-2 tint, and
   --ink-2 is 1.9:1 on forest. Each ground therefore names the value that clears AA on it.

   This block is last in the file on purpose. Every rule here has the same specificity as the
   component rule it corrects, so the only thing making it win is source order - putting these
   next to the components they touch is what let the interior-page lede ship at 1.9:1.
   ============================================================================================ */
.open .lede, .page-open .lede, .section-dark .lede, .on-dark .lede, .close p {
  color: var(--on-forest-soft);
}
.open .eyebrow, .page-open .eyebrow, .section-dark .eyebrow, .on-dark .eyebrow,
.open .free, .page-open .free, .section-dark .free, .on-dark .free, .open-actions .free,
.open a:not(.btn), .page-open a:not(.btn), .section-dark a:not(.btn),
.on-dark a:not(.btn), .close a:not(.btn) {
  color: var(--green-on-dark);
}
.section-tint .eyebrow, .section-tint .free, .section-tint a:not(.btn) {
  color: var(--green-deep);
}