/* ============================================================================
   pages.css — the four content pages: /about, /about/careers,
   /technology/security, /contact/customer-support.

   ONE stylesheet for all four rather than four files, because these pages share
   one shape: a short hero, then stacked prose blocks. Nothing here is a new
   design system — every color, size and space comes from valere.css tokens.

   Brand roles used:
     Navy   #003262  var(--navy)     headings, structure
     Orange #F88024  var(--orange)   the general/primary accent (NOT a strategy
                                     color — see CLAUDE.md two-axes rule)
     Body   #4D4D4D  var(--body-gray)
   Motion uses --dur-* / --ease-* tokens only (animation-guidelines.md).
   Breakpoints use the design-standards.md scale: 480 / 560 / 720 / 860 / 1000.
   ============================================================================ */

/* ── Page hero — shorter than the marketing hero; these are read, not sold ── */
.page-hero { padding-bottom: clamp(24px, 4vw, 40px); }
.page-hero__lede {
  font-size: var(--fs-p1);
  line-height: 1.6;
  max-width: var(--p1-max);
  margin-top: clamp(16px, 2.5vw, 24px);
}

/* ── Prose blocks ─────────────────────────────────────────────────────────── */
.prose-block { max-width: var(--head-max); }
.prose-block + .prose-block { margin-top: clamp(36px, 5vw, 60px); }
.prose-block h3 {
  font-size: var(--fs-h3);
  font-weight: var(--w-bold);
  color: var(--navy);
  margin: 0 0 12px;
}
.prose-block p { font-size: var(--fs-body); line-height: 1.65; margin: 0 0 12px; }
.prose-block p:last-child { margin-bottom: 0; }

/* Fact list — the security practice statements. A list because each line is an
   independent, verifiable statement, not a narrative. */
.fact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fact-list li {
  position: relative;
  padding-left: 26px;
  font-size: var(--fs-body);
  line-height: 1.6;
}
.fact-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 2px;
  background: var(--orange);
}

/* ── Leadership ───────────────────────────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(20px, 3vw, 32px);
}
.team-card { display: flex; flex-direction: column; gap: 12px; }
.team-card__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  background: var(--off-white);
  display: block;
}
.team-card__name {
  font-size: var(--fs-h4);
  font-weight: var(--w-bold);
  color: var(--navy);
  margin: 0;
}
.team-card__role {
  font-size: var(--fs-caption);
  font-style: italic;
  color: var(--orange);
  margin: -8px 0 0;
}
.team-card__bio { font-size: var(--fs-body); line-height: 1.6; margin: 0; }

/* ── Careers: one card per open role ──────────────────────────────────────── */
.role-list { display: grid; gap: clamp(16px, 2.5vw, 24px); }
.role-card {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: clamp(20px, 3vw, 28px);
  background: #fff;
}
.role-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: 12px;
}
.role-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--w-bold);
  color: var(--navy);
  margin: 0;
}
.role-card__tag {
  font-size: var(--fs-caption);
  font-weight: var(--w-medium);
  color: var(--navy);
  background: var(--off-white);
  border-radius: 99px;
  padding: 4px 12px;
}
.role-card p { font-size: var(--fs-body); line-height: 1.65; margin: 0 0 16px; }

/* ── Contact form ─────────────────────────────────────────────────────────── */
.form { max-width: 560px; display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label {
  font-size: var(--fs-caption);
  font-style: normal;
  font-weight: var(--w-bold);
  color: var(--navy);
}
.field input,
.field textarea,
.field select {
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--body-gray);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color var(--dur-fast, .15s) var(--ease-out, ease);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
  border-color: var(--orange);
}
.field textarea { min-height: 140px; resize: vertical; }
.field__hint { font-size: var(--fs-caption); color: #6B7885; font-style: normal; }

/* Honeypot — hidden from people, catches naive bots. Not display:none, which
   some bots detect; positioned off-canvas and taken out of the tab order. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  font-size: var(--fs-body);
  line-height: 1.6;
  padding: 14px 16px;
  border-radius: 8px;
  margin: 0;
}
.form__status[hidden] { display: none; }
.form__status--ok   { background: #E8F6F2; color: #0A5E4C; }
.form__status--err  { background: #FDEEE3; color: #8A3E00; }

/* ── Small screens: primary collapse at 860 per design-standards.md ───────── */
@media (max-width: 860px) {
  .team-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (max-width: 560px) {
  .team-grid { grid-template-columns: 1fr 1fr; }
  .role-card__top { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .field input, .field textarea, .field select { transition: none; }
}

/* ============================================================================
   LEGAL PAGES — /privacy and /terms
   Long, read-in-sequence documents. They ran at a 720px measure until Caleb's
   review of 2026-09-10 ("extend the content to fit within our full margins, not
   truncated to the left where there's a ton of blank space on the right"), so
   the block now fills the container. Leading stays generous.
   ============================================================================ */
.legal { max-width: none; }
.legal__revised {
  font-size: var(--fs-caption);
  font-style: italic;
  color: #6B7885;
  margin: 0 0 clamp(28px, 4vw, 40px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}
.legal h2 {
  font-size: var(--fs-h3);
  font-weight: var(--w-bold);
  color: var(--navy);
  margin: clamp(32px, 4.5vw, 48px) 0 12px;
}
.legal h2:first-of-type { margin-top: 0; }
.legal p { font-size: var(--fs-body); line-height: 1.7; margin: 0 0 14px; max-width: none; } /* the global p{max-width:70ch} would re-narrow the measure Caleb asked to open up (2026-09-10) */
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { font-size: var(--fs-body); line-height: 1.7; margin-bottom: 6px; }
.legal a { color: var(--navy); text-decoration: underline; }
.legal a:hover { color: var(--orange); }

/* All-caps blocks (warranty disclaimers, liability limits) are legally load-
   bearing and must stay as written. Slightly smaller and looser so a wall of
   capitals stays readable rather than becoming a grey brick. */
.legal__caps {
  font-size: var(--fs-caption);
  line-height: 1.8;
  letter-spacing: .01em;
}
.legal__notice {
  background: var(--off-white);
  border-left: 3px solid var(--orange);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 0 0 20px;
}
.legal__notice p { margin: 0; font-weight: var(--w-bold); color: var(--navy); }

/* ============================================================================
   BLOG INDEX — /resources/blog
   Two states on purpose. `.post-list` is the real listing and is what this page
   becomes the moment a post is published. `.blog-empty` is the honest state
   while nothing is live: a real page with a real next action, rather than an
   empty shell (Caleb's standing rule — see the case-studies hub, which ships
   two cards rather than placeholders).
   ============================================================================ */
.post-list { display: grid; gap: clamp(20px, 3vw, 28px); }
.post-card {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: clamp(22px, 3vw, 30px);
  background: #fff;
  display: block;
  text-decoration: none;
  transition: transform var(--dur-fast, .15s) var(--ease-out, ease),
              border-color var(--dur-fast, .15s) var(--ease-out, ease);
}
.post-card:hover { transform: translateY(-2px); border-color: var(--orange); }
.post-card__meta {
  font-size: var(--fs-caption);
  font-style: italic;
  color: var(--orange);
  margin: 0 0 8px;
}
.post-card__title {
  font-size: var(--fs-h2);
  font-weight: var(--w-bold);
  color: var(--navy);
  margin: 0 0 10px;
  line-height: 1.25;
}
.post-card__excerpt { font-size: var(--fs-body); line-height: 1.65; color: var(--body-gray); margin: 0 0 14px; }
.post-card__go { font-size: var(--fs-body); font-weight: var(--w-bold); color: var(--orange); }

.blog-empty { max-width: var(--p1-max); }
.blog-empty p { font-size: var(--fs-p1); line-height: 1.6; margin: 0 0 20px; }

@media (prefers-reduced-motion: reduce) {
  .post-card { transition: none; }
  .post-card:hover { transform: none; }
}

/* ── Security + About: two-up card grid (2026-09-10 rebuilds) ────────────────
   .card comes from valere.css; this only lays the cards out and styles the
   icon that leads each heading. Collapses to one column at the 860 tier. */
.sec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.5vw, 28px); }
@media (max-width: 860px) { .sec-grid { grid-template-columns: 1fr; } }
.sec-card h3 { display: flex; align-items: center; gap: 10px; }
.sec-card h3 .ti { color: var(--orange); font-size: 22px; }
/* The SOC 2 badge sits under the hero lede, centred. Caleb 2026-09-11: no
   white plate behind it (the file is already transparent) and no squish, so
   the height drives and the 551x700 aspect ratio is left alone. */
.sec-badge { display: block; width: auto; height: clamp(104px, 12vw, 148px); margin: clamp(24px, 3.2vw, 36px) auto 0; }

/* ── About: bio folds, "for" line, non-negotiable cards (2026-09-10) ─────── */
.team-card__more { margin-top: 4px; }
.team-card__more summary { cursor: pointer; font-size: var(--fs-body); font-weight: var(--w-bold); color: var(--orange); list-style: none; }
.team-card__more summary::-webkit-details-marker { display: none; }
.team-card__more summary::after { content: " \2193"; }
.team-card__more[open] summary::after { content: " \2191"; }
.team-card__more p { margin-top: 12px; }
.about-for { font-size: var(--fs-caption); font-style: italic; color: #6B7885; margin: 0 0 14px; }
.sec-card .sol-link { display: inline-block; margin-top: 4px; }
.nn-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .nn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .nn-grid { grid-template-columns: 1fr; } }
.nn-card .ti { display: block; color: var(--orange); font-size: 28px; margin-bottom: 12px; }
.nn-card p { font-size: var(--fs-body); line-height: 1.6; color: var(--navy); font-weight: var(--w-medium); }


/* ── Calendly booking embed (/contact/sales, 2026-09-11) ─────────────────
   IT SITS ON THE PAGE. Caleb rejected the first pass ("I dont want it inside
   its own card in a navy background. I want it sitting on the page") and
   pointed at the old site's /contact/sales/, where the scheduler runs plain on
   white: transparent parent, no radius, no shadow, no border, full container
   width. NOTHING HERE SHOULD DRAW A BOX. The widget itself is set to a white
   background in its embed URL, so the seam with the page disappears.

   THE WIDGET AUTO-GROWS, so the PAGE scrolls instead of the iframe (Caleb:
   "Remove the scrolling container for the calendar"). data-resize="true" on the
   div makes Calendly's widget.js listen for the booking page's
   `calendly.page_height` message and set `parent.style.height` to the measured
   content height at every step. An inline style beats these rules, so the
   values below are only the height BEFORE the first measurement.

   ⚠ TRAP, COST AN HOUR ON 2026-09-11: this MUST be `height`, never
   `min-height`. widget.js builds the iframe with height="100%" (read it: the
   build() method sets node.height = "100%"). A percentage height resolves
   against the parent's specified `height`; `min-height` is not `height`, so the
   percentage becomes indeterminate and the iframe silently falls back to the
   browser's default 150px - a sliver of a calendar, with no error anywhere.
   Setting min-height here looks harmless and breaks the embed. */
/* ── Tighter section rhythm on the booking page (Caleb, 2026-09-12: "Remove
   about 50% off the top and bottom padding so there isnt so much white and they
   dont have to scroll so far. Do the same for the S1 as well") ───────────────
   A modifier rather than an edit to .section, because .section sets the rhythm
   for every page on the site. */
.section--tight { padding-block: calc(var(--section-y) * 0.5); }

/* ── The heading that replaces Calendly's own top panel ─────────────────────── */
/* Half the gap it used to leave under itself (Caleb, 2026-09-12: "see the
   attached gap once loaded. please close it by 50%"). */
.cal-embed__h { text-align: center; margin: 0 auto clamp(9px, 1.3vw, 14px); max-width: var(--head-max); text-wrap: balance; }

/* ── "Loading booking calendar" ──────────────────────────────────────────────
   Sits inside .cal-embed above the widget and is REMOVED from the DOM once the
   booking page reports in, so it leaves no empty box behind. The bar is the
   Flow Rule gradient and the `rule-flow` animation, unchanged, so it is the
   same visual language as the scroll progress line under the nav. */
/* The loader sits OVER the reserved space rather than above it, so removing it
   leaves no gap to collapse. Starts transparent; the script reveals it only if
   the calendar is still not up after a beat. */
.cal-load { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  max-width: 420px; margin: 0 auto; text-align: center;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-standard); }
.cal-load.is-visible { opacity: 1; }
.cal-embed { position: relative; }
.cal-load.is-done { opacity: 0; }
.cal-load__t { margin: 0 0 10px; color: var(--navy); font-size: var(--fs-body); font-weight: var(--w-bold); }
.cal-load__track { height: 6px; border-radius: 3px; background: var(--off-white); overflow: hidden; }
.cal-load__bar {
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--orange), var(--yellow), var(--orange));
  background-size: 200% 100%;
  animation: rule-flow 3s linear infinite;
  transition: width var(--dur-base) var(--ease-out);
}
.cal-load__pct { margin: 8px 0 0; color: var(--body-gray); font-size: var(--fs-caption, 13px); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .cal-load__bar { animation: none; background: var(--orange); transition: none; }
}

/* ⚠ CALENDLY'S OWN SPINNER IS HIDDEN. widget.js injects a `.calendly-spinner`
   (three bouncing grey dots) into the container and leaves it there under the
   iframe. Caleb, 2026-09-12: "I am still getting the Calendly ugly gray loading
   bar. Please hide that." We show our own branded loader instead, so theirs is
   duplicate furniture. !important because the class carries Calendly's own
   inline-ish styling from their stylesheet. */
.calendly-spinner { display: none !important; }

/* THE CROSSFADE. The widget starts invisible and the loader fades in slightly
   late; when Calendly reports ready they swap in one motion. That removes the
   two things Caleb saw: "the loading bar typically appears before the rest of
   the page loads and it looks super odd" (the loader now waits ~220ms, so the
   page paints first) and "when the loading bar is done there is still a delay
   and gap until the calendar is loaded" (the calendar is already there, just
   transparent, so there is nothing to wait for). .cal-embed keeps its height
   throughout, so nothing on the page jumps. */
.cal-embed .calendly-inline-widget { height: 700px; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.cal-embed.is-ready .calendly-inline-widget { opacity: 1; }
@media (max-width: 560px) { .cal-embed .calendly-inline-widget { height: 900px; } }
.cal-embed__fallback { color: var(--body-gray); font-size: var(--fs-body); }

/* ── Contact forms, two columns (Caleb, 2026-09-10) ─────────────────────────
   Name | Work Email · Job Title | Company · message and button span both. */
/* ── Required-field marker (Caleb, 2026-09-11: "Add required astriks in red
   next to the required fields") ───────────────────────────────────────────────
   RED IS NOT IN THE VALERE PALETTE (navy, light blue, seafoam, orange, yellow,
   body gray, white), so this borrows the same warm red-brown the form's own
   error state already uses (.form__status--err, #8A3E00) rather than inventing
   a new brand colour. It reads clearly as red against the label without putting
   a sixth colour into the system.
   <abbr title="Required"> rather than a bare "*": a screen reader announces the
   field as required from the input's own `required` attribute, and the title
   explains the glyph for anyone who hovers it. */
.req { color: #8A3E00; text-decoration: none; font-weight: var(--w-bold); border: 0; cursor: help; }

.form--wide { max-width: 760px; margin: 0 auto; grid-template-columns: 1fr 1fr; column-gap: 20px; text-align: left; } /* centered under a centered head (Caleb, 2026-09-10: the form was justified left) */
.section--center .section-head h2 { text-wrap: balance; }   /* two even lines instead of a stranded last word */
.form--wide .field--full, .form--wide .form__status, .form--wide .hp, .form--wide noscript { grid-column: 1 / -1; }
@media (max-width: 560px) { .form--wide { grid-template-columns: 1fr; } }

/* ============================================================================
   FACT GRID (.tx-facts) — public-site instance, 2026-09-11. PORTED VERBATIM from
   site/css/dewey-roof-speaking.css (the module master, MODULES.md "Fact Grid")
   for the Security page's At-a-glance and Built-for sections. Plain infographic
   grid, no card chrome: orange icon, bold P1 label, P2 line. 4 -> 2 -> 1 columns.
   ============================================================================ */
.tx-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(20px, 2.6vw, 34px); row-gap: clamp(30px, 4vw, 46px); text-align: left; }
@media (max-width: 900px) { .tx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tx-facts { grid-template-columns: 1fr; } }
.tx-fact .ti { display: block; font-size: 30px; line-height: 1; color: var(--orange); margin-bottom: 12px; }
.tx-fact__h { margin: 0 0 .45em; color: var(--navy); font-size: var(--fs-p1); font-weight: var(--w-bold); line-height: 1.3; text-wrap: balance; }
.tx-fact p { margin: 0; color: var(--body-gray); font-size: var(--fs-body); line-height: 1.6; max-width: none; }

/* ============================================================================
   NAVY SECTION BAND (.section--navy) — Caleb, 2026-09-11: "contextually flip
   the background between white and navy as needed (instead of off-white).
   Properly invert text as well." This is the inverted twin of .section--tint:
   navy ground, white heads, orange eyebrow, softened white body copy. Use it
   for a deliberate alternating rhythm, never as a page default (white stays
   the primary background — Valere_Brand_Color_System).
   ============================================================================ */
.section--navy { background: var(--navy); }
.section--navy h2,
.section--navy h3,
.section--navy .tx-fact__h { color: #fff; }
.section--navy .eyebrow { color: var(--orange); }
.section--navy .section-head > p,
.section--navy .tx-fact p { color: rgba(255, 255, 255, .85); }

/* ============================================================================
   STRATEGY SECTION (.strat / .strat-sec) — public-site instance, 2026-09-11.
   PORTED from site/css/solutions.css (the module master, MODULES.md "Strategy
   Section") for the Security page's "What the attestation covers", which Caleb
   pointed at with a screenshot of /solutions Enable More. Left rail (eyebrow +
   highlighted-word H2 + lede + vertical pill tablist) beside ONE strat Content
   Card whose .strat-panel swaps per pill. No stage below — card-only, the way
   Encore and Val-Forbin run it.

   TWO DELIBERATE DIFFERENCES FROM THE MASTER, both from Caleb's "use the same
   color coordination":
     1. The accent is PER PILL, not per section. Security seafoam, Availability
        light blue, Confidentiality orange, carried together by the pill icon,
        the active pill fill, the card band, the accordion +/- glyph and the
        flow rule. The controller moves the band class as the pill changes.
        This is a CATEGORY accent. It is NOT the GTM meaning of seafoam
        (Enable More) and light blue (Enable Better) — the Security page has no
        Enable More / Enable Better story, so no strategy role is implied.
     2. The section sits on a NAVY band (the page's white/navy rhythm), so the
        rail text inverts and the ACTIVE pill takes the category colour instead
        of the master's navy fill, which would vanish against navy.
   ============================================================================ */
.strat { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; column-gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .strat { grid-template-columns: 1fr; row-gap: clamp(20px, 3vw, 28px); } }

.strat__rail { min-width: 0; }
.strat__title { color: var(--navy); font-weight: var(--w-bold); font-size: var(--fs-h2, 26px); line-height: 1.2; margin: .25em 0 .5em; text-align: left; }
.strat__lede { color: var(--body-gray); font-size: var(--fs-p1); line-height: 1.6; margin: 0 0 clamp(18px, 2.6vw, 26px); max-width: none; }

/* the rail's highlighted word, swapped with the pill by the controller. Same
   role as the master's rotating word, but driven by the selection rather than
   a timer, because here the word IS the category the pill selects. */
.strat__word { font-weight: var(--w-bold); transition: color var(--dur-base) var(--ease-standard); }
.strat__word--seafoam { color: var(--enable-more); }
.strat__word--blue { color: var(--enable-better); }
.strat__word--orange { color: var(--orange); }

/* vertical pill selector (role=tablist) */
.strat__pills { display: flex; flex-direction: column; gap: 10px; }
.strat__pill {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  appearance: none; cursor: pointer; font-family: inherit;
  background: #fff; color: var(--navy);
  border: 1.5px solid var(--hairline); border-radius: 12px;
  padding: 13px 16px; box-shadow: 0 3px 10px rgba(0, 50, 98, .05);
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-standard);
}
.strat__pill .ti { font-size: 22px; line-height: 1; flex: 0 0 auto; transition: color var(--dur-base) var(--ease-standard); }
.strat__pill span { font-size: 15px; font-weight: var(--w-bold); line-height: 1.25; }
.strat__pill:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 50, 98, .14); }
.strat__pill:focus-visible { outline: 3px solid var(--light-blue); outline-offset: 2px; }
.strat__pill.is-active:hover { transform: none; }

/* per-category accent: icon, hover border, and the ACTIVE fill */
.strat__pill--seafoam .ti { color: var(--enable-more); }
.strat__pill--blue .ti { color: var(--enable-better); }
.strat__pill--orange .ti { color: var(--orange); }
.strat__pill--seafoam:hover { border-color: var(--enable-more); }
.strat__pill--blue:hover { border-color: var(--enable-better); }
.strat__pill--orange:hover { border-color: var(--orange); }
.strat__pill--seafoam.is-active { background: var(--enable-more); border-color: var(--enable-more); }
.strat__pill--blue.is-active { background: var(--enable-better); border-color: var(--enable-better); }
.strat__pill--orange.is-active { background: var(--orange); border-color: var(--orange); }
.strat__pill.is-active, .strat__pill.is-active .ti { color: #fff; }

/* the strat Content Card + its swapping panels */
.content-card--strat { align-self: start; }
.strat-panel { display: none; }
.strat-panel.is-active { display: block; opacity: 1; transition: opacity var(--dur-base) var(--ease-standard); animation: sol-strat-fade var(--dur-slow) var(--ease-out); }
.strat-panel.is-active.is-fading { opacity: 0; }
@keyframes sol-strat-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .strat__pill { transition: none; }
  .strat__pill:hover { transform: none; }
  .strat-panel.is-active { transition: none; animation: none; }
}

/* the band's white status pill (ported from solutions.css) */
.content-card__pill {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  background: #fff; border-radius: 999px;
  padding: 5px 14px; font-size: 12px; font-weight: var(--w-bold);
  letter-spacing: .02em; white-space: nowrap;
}
.content-card__band--seafoam .content-card__pill { color: var(--enable-more); }
.content-card__band--blue .content-card__pill { color: var(--enable-better); }
.content-card__band--orange .content-card__pill { color: #c85f10; }
.content-card__band { justify-content: space-between; }
.content-card__band, .content-card__title { transition: background var(--dur-base) var(--ease-standard); }

/* the split card body: copy LEFT (col 1), Accordion Cards RIGHT (col 2).
   The explicit placement is load-bearing — without it the accordions'
   row-span auto-places them into column 1 (same note as the master). */
.sc-split { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 56px); align-items: start; }
.sc-split > h2 { margin: 0 0 .5em; color: var(--navy); font-weight: var(--w-bold); font-size: 22px; line-height: 1.25; text-align: left; }
.sc-split > .sc-p1 { margin: 0 0 clamp(16px, 2.4vw, 22px); color: var(--body-gray); font-size: var(--fs-body); line-height: 1.6; text-align: left; max-width: none; }
.sc-split > h2, .sc-split > .sc-p1, .sc-split > .sc-cta { grid-column: 1; }
.sc-split > .acc-cards { grid-column: 2; grid-row: 1 / 99; }
.sc-cta { margin-top: clamp(16px, 2.4vw, 22px); }
@media (max-width: 760px) {
  .sc-split { grid-template-columns: 1fr; }
  .sc-split > .acc-cards { grid-column: 1; grid-row: auto; margin-top: 6px; }
}

/* accordion accents per category (ported; --orange is the valere.css default
   and is spelled out here so all three read the same way in the source) */
.acc-cards--seafoam .acc-card__ic::before, .acc-cards--seafoam .acc-card__ic::after { background: var(--enable-more); }
.acc-cards--blue .acc-card__ic::before, .acc-cards--blue .acc-card__ic::after { background: var(--enable-better); }
.acc-cards--orange .acc-card__ic::before, .acc-cards--orange .acc-card__ic::after { background: var(--orange); }

/* the strat section on a navy band: invert the rail, leave the white card be */
.section--navy .strat__title { color: #fff; }
.section--navy .strat__lede { color: rgba(255, 255, 255, .85); }
.section--navy .sc-split > h2 { color: var(--navy); }
.section--navy .sc-split > .sc-p1 { color: var(--body-gray); }

/* ============================================================================
   FLIP CARD GRID (.flip-grid) — NEW MODULE, 2026-09-11. Caleb: "move this all
   into one section 5 column wide... mini flip cards. Use the longest P1 as the
   baseline and I want the text to fill the card. On non-hover it's a navy card
   with the icon (no numbers). On hover it flips to white background, gray P1
   and displays the description."
   The grid is even by design: 35 controls, 5 across, 7 down. Every card is the
   same fixed height (--flip-h), set by the longest description so the copy
   fills the face instead of floating in it. Hover, keyboard focus and tap all
   flip; prefers-reduced-motion swaps the rotation for a crossfade.
   Registered in MODULES.md. The --flip-h values below were MEASURED, not
   guessed: at each column count the longest description was rendered and the
   height set one line above it, so the copy fills the face without clipping.
   ============================================================================ */
.flip-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 16px); }
.flip-card { --flip-h: 192px; height: var(--flip-h); perspective: 1000px; cursor: pointer; border-radius: 12px; }
.flip-card:focus { outline: none; }
.flip-card:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.flip-card__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform var(--dur-base) var(--ease-standard); }
.flip-card:hover .flip-card__inner,
.flip-card:focus-visible .flip-card__inner,
.flip-card.is-flipped .flip-card__inner { transform: rotateY(180deg); }

.flip-card__face { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; padding: clamp(13px, 1.2vw, 17px); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-card__front { background: var(--navy); gap: 9px; }
.flip-card__front .ti { font-size: 26px; line-height: 1; color: var(--orange); }
.flip-card__t { color: #fff; font-size: var(--fs-body); font-weight: var(--w-bold); line-height: 1.28; text-wrap: balance; }
.flip-card__back { background: #fff; border: 1px solid var(--hairline); transform: rotateY(180deg); justify-content: center; }
.flip-card__back p { margin: 0; color: var(--body-gray); font-size: 13px; line-height: 1.5; max-width: none; }

@media (max-width: 1180px) { .flip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .flip-card { --flip-h: 150px; } }
@media (max-width: 940px)  { .flip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .flip-card { --flip-h: 132px; } }
@media (max-width: 640px)  { .flip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flip-card { --flip-h: 208px; } }
@media (max-width: 380px)  { .flip-card { --flip-h: 230px; } }

@media (prefers-reduced-motion: reduce) {
  .flip-card__inner { transition: none; }
  .flip-card:hover .flip-card__inner,
  .flip-card:focus-visible .flip-card__inner,
  .flip-card.is-flipped .flip-card__inner { transform: none; }
  .flip-card__face { backface-visibility: visible; -webkit-backface-visibility: visible; }
  .flip-card__back { transform: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); }
  .flip-card:hover .flip-card__back,
  .flip-card:focus-visible .flip-card__back,
  .flip-card.is-flipped .flip-card__back { opacity: 1; }
}

/* ── Security page layout glue (2026-09-11) ────────────────────────────────── */
.sec-faq { max-width: 860px; }