/* ============================================================================
   PoliMoney — Components  (components.css)
   Direction B — navy-dominant, real 3-level elevation, floating calculator,
   disciplined orange. Reusable class inventory. All motion uses
   transform/opacity only and is gated behind prefers-reduced-motion.
   Class prefix: pm-  (PoliMoney). Depends on tokens.css + base.css.
   ----------------------------------------------------------------------------
   ELEVATION MODEL (3 planes + one floating focal):
     recessed well  --surface-sunken   (footer, calc result, .pm-well)
     base field     --bg               (plain sections, body)
     resting card   --surface-1        + --shadow-2 + lit --border-highlight top
     raised band    --surface-2        + --shadow-3  (elevated cards, panels, CTA)
     FLOATING       --surface-raised   + --shadow-4 + --glow-primary (calculator)
   Every card carries a lit top edge (border-highlight + inset 1px highlight)
   so planes read against the navy field; shadows are navy-tinted, never black.
   ============================================================================ */

/* ============================================================================
   LAYOUT PRIMITIVES — container, section, eyebrow, grids
   ============================================================================ */
.pm-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.pm-container--wide { max-width: var(--container-wide); }
.pm-container--prose { max-width: var(--container-prose); }

/* Interior sections alternate perceptibly: plain sits on the base navy field;
   --tint is a genuinely raised surface-1 band with a lit top seam + shadowed
   bottom seam so figure-ground is legible WITHOUT relying on whitespace. */
.pm-section {
  position: relative;
  padding-block: var(--section-y);
}
.pm-section--sm { padding-block: var(--section-y-sm); }
/* Raised band: a clearly-lighter surface-1 plane with a LIT top seam and a
   SHADOWED bottom seam so figure-ground reads without relying on whitespace. */
.pm-section--tint {
  background-color: var(--surface-1);
  box-shadow:
    inset 0 1px 0 var(--border-highlight),
    inset 0 -1px 0 color-mix(in srgb, var(--navy-950) 65%, transparent);
}
/* Sunken well: a recessed plane BELOW the base field (opposite of --tint) with
   a top drop-shadow lip, so interior sections carry a real 3-plane rhythm. */
.pm-section--sunken {
  background-color: var(--surface-sunken);
  box-shadow:
    inset 0 8px 16px -10px color-mix(in srgb, var(--navy-950) 90%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--navy-950) 70%, transparent),
    inset 0 -1px 0 var(--border-highlight);
}
.pm-section--divider { border-block: 1px solid var(--border-subtle); }

/* Section header block */
.pm-section__head {
  max-width: 68ch;
  margin-bottom: var(--space-10);
}
.pm-section__head--center {
  margin-inline: auto;
  text-align: center;
}

/* Eyebrow / overline (mono-style uppercase data label) */
.pm-eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--teal-400);
}

.pm-lead {
  margin-top: var(--space-4);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

/* Responsive auto grids */
.pm-grid { display: grid; gap: var(--space-5); }
.pm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pm-grid--auto { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

@media (max-width: 1023px) {
  .pm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .pm-grid--2,
  .pm-grid--3,
  .pm-grid--4 { grid-template-columns: 1fr; }
}

/* ============================================================================
   BUTTONS — primary / accent / secondary / ghost / icon  (+ sizes)
   Full state machine (rest / hover / active / focus-visible / disabled) driven
   from the interactive-state tokens. Fills BRIGHTEN on hover, DEEPEN on active.
   ============================================================================ */
.pm-btn {
  --_pad-x: 1.25rem;
  --_h: 2.75rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--_h);
  padding-inline: var(--_pad-x);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-expo);
}
.pm-btn:hover { transform: translateY(-2px); }
.pm-btn:active { transform: translateY(0) scale(0.985); transition-duration: var(--dur-fast); }
.pm-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pm-btn:disabled,
.pm-btn[aria-disabled="true"] {
  background-color: var(--action-disabled-fill);
  color: var(--action-disabled-ink);
  border-color: transparent;
  box-shadow: none;
  opacity: 1;
  pointer-events: none;
  transform: none;
}
.pm-btn .pm-btn__icon { width: 1.15em; height: 1.15em; stroke: currentColor; }

/* Primary — blue with NAVY ink (AA) + primary glow rim on hover */
.pm-btn--primary {
  background-color: var(--primary-fill);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-2);
}
.pm-btn--primary:hover {
  background-color: var(--primary-fill-hover);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-3), var(--glow-primary);
}
.pm-btn--primary:active { background-color: var(--primary-fill-active); box-shadow: var(--shadow-1); }
.pm-btn--primary:focus-visible { box-shadow: var(--focus-ring-primary); }

/* Accent — orange with NAVY ink. The disciplined "act now" signal (one per view). */
.pm-btn--accent {
  background-color: var(--accent-fill);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-2);
}
.pm-btn--accent:hover {
  background-color: var(--accent-fill-hover);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-3), var(--glow-accent);
}
.pm-btn--accent:active { background-color: var(--accent-fill-active); box-shadow: var(--shadow-1); }
.pm-btn--accent:focus-visible { box-shadow: var(--focus-ring-accent); }

/* Secondary — outline (ghost) on dark */
.pm-btn--secondary {
  background-color: var(--ghost-fill);
  color: var(--ghost-ink);
  border-color: var(--ghost-border);
}
.pm-btn--secondary:hover {
  background-color: var(--ghost-fill-hover);
  border-color: var(--teal-400);
  color: var(--text-primary);
}
.pm-btn--secondary:active { background-color: var(--ghost-fill-active); }

/* Ghost — minimal */
.pm-btn--ghost {
  background-color: var(--ghost-fill);
  color: var(--text-secondary);
}
.pm-btn--ghost:hover {
  background-color: var(--ghost-fill-hover);
  color: var(--text-primary);
}
.pm-btn--ghost:active { background-color: var(--ghost-fill-active); }

/* Icon button — square, 44px touch target */
.pm-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.pm-btn-icon:hover {
  color: var(--text-primary);
  background-color: var(--ghost-fill-hover);
}
.pm-btn-icon:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pm-btn-icon--bordered { border-color: var(--border-subtle); }
.pm-btn-icon--bordered:hover { border-color: var(--border-strong); box-shadow: var(--glow-teal); }
.pm-btn-icon svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; }

/* Sizes */
.pm-btn--sm { --_h: 2.25rem; --_pad-x: 0.875rem; font-size: var(--fs-xs); }
.pm-btn--lg { --_h: 3.25rem; --_pad-x: 1.75rem; font-size: var(--fs-base); border-radius: var(--radius-lg); }
.pm-btn--block { display: flex; width: 100%; }

/* ============================================================================
   CARD — the layered surface. RESTING plane: surface-1 + shadow-2 + lit top.
   ============================================================================ */
.pm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  /* lit top edge = "lit from above": highlight border + inset highlight line */
  border-top-color: var(--border-highlight);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-2), inset 0 1px 0 var(--border-highlight);
  transition:
    transform var(--dur-base) var(--ease-expo),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.pm-card--interactive { cursor: pointer; }
.pm-card--interactive:hover,
.pm-card--lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3), inset 0 1px 0 var(--border-highlight);
  border-color: var(--border-strong);
  border-top-color: var(--border-highlight);
}
/* Raised card — one step up: surface-2 + shadow-3 */
.pm-card--elevated {
  background-color: var(--surface-2);
  box-shadow: var(--shadow-3), inset 0 1px 0 var(--border-highlight);
}
/* Accent-led card (left teal rail) — used for "quotable answer" blocks */
.pm-card--rail {
  border-left: 2px solid var(--teal-400);
}
.pm-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.pm-card__text {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}
.pm-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-sunken);
  color: var(--teal-400);
  margin-bottom: var(--space-4);
}
.pm-card__icon svg { width: 1.375rem; height: 1.375rem; stroke: currentColor; }

/* ============================================================================
   FEATURE GRID  (cards inside .pm-grid--3 / --auto)
   ============================================================================ */
.pm-feature__link {
  margin-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-link);
}
.pm-feature__link svg { width: 0.95em; height: 0.95em; stroke: currentColor; }
.pm-feature__link:hover { color: var(--primary-200); }

/* ============================================================================
   STEP / NUMBERED LIST  (resting plane, distinguished by the primary num chip)
   ============================================================================ */
.pm-steps {
  list-style: none;
  display: grid;
  gap: var(--space-5);
  counter-reset: pm-step;
}
.pm-step {
  position: relative;
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-top-color: var(--border-highlight);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-2), inset 0 1px 0 var(--border-highlight);
  height: 100%;
  transition: transform var(--dur-base) var(--ease-expo), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.pm-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3), inset 0 1px 0 var(--border-highlight);
  border-color: var(--border-strong);
  border-top-color: var(--border-highlight);
}
.pm-step__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.pm-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background-color: var(--primary-fill);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
}
.pm-step__icon { color: var(--teal-400); }
.pm-step__icon svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; }
.pm-step__title { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text-primary); }
.pm-step__text { margin-top: var(--space-2); font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--text-secondary); }

/* ============================================================================
   BENTO — "Як працює": one featured intro cell + varied step cells.
   The <ol> keeps its list semantics but becomes display:contents so its <li>
   steps place directly onto this grid alongside the featured intro card.
   ============================================================================ */
.pm-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px)  { .pm-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pm-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); } }

/* The ordered list dissolves its own box so <li> steps join the bento grid. */
.pm-bento__steps { display: contents; }

/* Featured intro cell — an elevated summary plane that anchors the grid. */
.pm-bento__intro { justify-content: center; }
.pm-bento__intro .pm-card__title { font-size: var(--fs-2xl); }

/* Varied placement on wide screens (mirrors the approved Direction-B mockup). */
@media (min-width: 1000px) {
  .pm-bento__intro   { grid-column: 1 / span 3; grid-row: 1 / span 2; }
  .pm-bento__cell--1 { grid-column: 4 / span 3; grid-row: 1; }
  .pm-bento__cell--2 { grid-column: 4 / span 3; grid-row: 2; }
  .pm-bento__cell--3 { grid-column: 1 / span 2; grid-row: 3; }
  .pm-bento__cell--4 { grid-column: 3 / span 4; grid-row: 3; }
}

/* ============================================================================
   BADGES / PILLS
   ============================================================================ */
.pm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 1.5rem;
  padding-inline: var(--space-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.pm-badge--teal   { background-color: var(--teal-400); color: var(--text-on-accent); }
.pm-badge--primary{ background-color: var(--primary-fill); color: var(--text-on-accent); }
.pm-badge--accent { background-color: var(--accent-fill); color: var(--text-on-accent); }
.pm-badge--success{ background-color: var(--color-success); color: var(--color-success-ink); }
.pm-badge--outline{
  background-color: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}
.pm-badge--soft {
  background-color: color-mix(in srgb, var(--teal-400) 15%, transparent);
  color: var(--teal-300);
  border: 1px solid color-mix(in srgb, var(--teal-400) 35%, transparent);
}

/* Trust chips row (hero proof) — resting plane */
.pm-chips { display: grid; gap: var(--space-3); }
.pm-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-4) var(--space-3);
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-top-color: var(--border-highlight);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2), inset 0 1px 0 var(--border-highlight);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}
.pm-chip svg { width: 1.25rem; height: 1.25rem; stroke: var(--teal-400); }

/* ============================================================================
   FORM CONTROLS — labels / inputs / selects / textarea / errors
   Inputs sit on the nested surface-2 plane; focus uses the two-part ring.
   ============================================================================ */
.pm-field { display: flex; flex-direction: column; gap: var(--space-2); }
.pm-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}
.pm-label .pm-req { color: var(--text-accent); margin-left: 2px; }

.pm-input,
.pm-textarea,
.pm-select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background-color: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  box-shadow: var(--shadow-1);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.pm-input::placeholder,
.pm-textarea::placeholder { color: var(--text-muted); }
.pm-input:hover,
.pm-textarea:hover,
.pm-select:hover { border-color: var(--teal-400); }
.pm-input:focus-visible,
.pm-textarea:focus-visible,
.pm-select:focus-visible {
  outline: none;
  border-color: var(--focus-color);
  box-shadow: var(--focus-ring);
}
.pm-input:disabled,
.pm-textarea:disabled,
.pm-select:disabled {
  background-color: var(--action-disabled-fill);
  color: var(--action-disabled-ink);
  cursor: not-allowed;
}
.pm-textarea { min-height: 7.5rem; resize: vertical; }

/* Select with custom chevron (encoded SVG asset — stroke = neutral-300) */
.pm-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23A7B9CB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.1rem;
}

/* Inset/amount input group (calculator-style) */
.pm-input-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem 0.9rem;
  background-color: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.pm-input-group:focus-within {
  border-color: var(--focus-color);
  box-shadow: var(--focus-ring);
}
.pm-input-group input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  padding-block: 0.75rem;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.pm-input-group input:focus-visible { outline: none; }
.pm-input-group__suffix,
.pm-input-group__prefix { color: var(--text-secondary); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }

/* Field helper + error */
.pm-help { font-size: var(--fs-xs); color: var(--text-muted); }
.pm-error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-error);
}
.pm-error svg { width: 0.95rem; height: 0.95rem; stroke: currentColor; }
.pm-input[aria-invalid="true"],
.pm-textarea[aria-invalid="true"],
.pm-select[aria-invalid="true"] {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 25%, transparent);
}

/* Honeypot (anti-spam) — visually + a11y hidden */
.pm-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ============================================================================
   LINKS — inline + underlined link style
   ============================================================================ */
.pm-link {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--text-link) 40%, transparent);
  transition: text-decoration-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pm-link:hover { text-decoration-color: var(--text-link); color: var(--primary-200); }

/* ============================================================================
   STAT BLOCKS  (sit inside a --tint band so the numbers read as one object)
   ============================================================================ */
.pm-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  text-align: center;
}
@media (max-width: 639px) { .pm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pm-stat { display: flex; flex-direction: column-reverse; align-items: center; }
.pm-stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extra);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pm-stat__label { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--text-secondary); }

/* ============================================================================
   HERO — recedes into a sunken well then rises to the base field (figure-ground)
   ============================================================================ */
.pm-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);
  /* Designed space, not flat navy: two ambient radials (teal top-left, primary
     behind the calculator) over a gradient that sinks from surface-sunken up to
     the base field — the whole hero reads as a lit volume. */
  background:
    radial-gradient(48rem 32rem at 12% 6%, color-mix(in srgb, var(--teal-400) 16%, transparent), transparent 60%),
    radial-gradient(50rem 38rem at 88% 26%, color-mix(in srgb, var(--primary-500) 20%, transparent), transparent 62%),
    linear-gradient(180deg, var(--surface-sunken) 0%, var(--bg) 72%);
  isolation: isolate;
}
/* Decorative background video layer — behind glows + all hero content.
   Layered ON TOP of the existing dark-navy hero background, so if the video
   never loads the hero still reads correctly on the base color. */
.pm-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.pm-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Hidden until JS confirms it can play (and not under reduced-motion). */
  opacity: 0;
  transition: opacity 600ms ease;
}
.pm-hero__media.is-playing .pm-hero__video { opacity: 1; }
/* Dark scrim/gradient over the video so existing light text keeps AA contrast.
   Also acts as the graceful fallback gradient when the video is hidden.
   Tokenized: every layer is a navy-900 tint (was rgba(0,27,51,…) literals). */
.pm-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--navy-900) 78%, transparent) 0%,
      color-mix(in srgb, var(--navy-900) 62%, transparent) 45%,
      color-mix(in srgb, var(--navy-900) 86%, transparent) 100%),
    radial-gradient(120% 100% at 70% 0%,
      color-mix(in srgb, var(--navy-900) 35%, transparent) 0%,
      color-mix(in srgb, var(--navy-900) 70%, transparent) 100%);
}
/* Reduced motion: never autoplay/show the moving video — fall back to a static
   dark-navy gradient so the hero still looks finished. */
@media (prefers-reduced-motion: reduce) {
  .pm-hero__video { display: none; }
}
/* Ambient glow blobs — pure decoration, behind content. Tokenized to color-mix. */
.pm-hero__glow {
  position: absolute;
  z-index: var(--z-base);
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  opacity: 0.7;
}
.pm-hero__glow--teal {
  top: -10rem; left: -8rem;
  width: 34rem; height: 34rem;
  background: radial-gradient(circle, color-mix(in srgb, var(--teal-400) 42%, transparent), transparent 70%);
}
.pm-hero__glow--primary {
  top: -6rem; right: -4rem;
  width: 34rem; height: 34rem;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary-500) 48%, transparent), transparent 70%);
  opacity: 0.6;
}
.pm-hero__grid {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 1024px) {
  .pm-hero__grid { grid-template-columns: 1.05fr minmax(360px, 1fr); gap: var(--space-16); }
}
.pm-hero__copy { max-width: 60ch; }
.pm-hero__title {
  margin-top: var(--space-6);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-extra);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  /* Cyrillic display words wrap on word boundaries only: no auto-hyphenation
     and no opportunistic mid-word breaking (override the global h1 break-word).
     Hero words fit the narrowest column, so this introduces no overflow. */
  overflow-wrap: normal;
  hyphens: manual;
}
@media (max-width: 380px) {
  .pm-hero__title { font-size: clamp(1.75rem, 6.2vw, 2.125rem); }
}
.pm-hero__subtitle {
  margin-top: var(--space-6);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}
.pm-hero__actions {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
@media (max-width: 479px) {
  .pm-hero__actions { flex-direction: column; align-items: stretch; }
}
.pm-hero__chips { margin-top: var(--space-10); }

/* Hero panel (holds the floating calculator on the right). A focused primary
   glow halo sits BEHIND it (CSS-only pseudo, no HTML change) so the panel reads
   as lifted above the hero — the single focal element per view. */
.pm-hero__panel {
  position: relative;
  z-index: var(--z-raised);
}
.pm-hero__panel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(34rem, 122%);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle at center, color-mix(in srgb, var(--primary-500) 55%, transparent) 0%, transparent 66%);
  filter: blur(34px);
  opacity: 1;
  animation: pm-float-glow 9s var(--ease-in-out) infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .pm-hero__panel::before { animation: none; }
}
@media (min-width: 1024px) {
  .pm-hero__panel { position: sticky; top: 6rem; }
}

/* ============================================================================
   COMPARISON TABLE — raised surface; own column highlighted; yes/no status
   ============================================================================ */
.pm-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-top-color: var(--border-highlight);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2), inset 0 1px 0 var(--border-highlight);
  -webkit-overflow-scrolling: touch;
}
.pm-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.pm-table caption {
  text-align: left;
  padding: var(--space-4) var(--space-5);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.pm-table thead th {
  position: sticky;
  top: 0;
  background-color: var(--surface-3);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  text-align: left;
  padding: var(--space-4) var(--space-5);
  white-space: nowrap;
  border-bottom: 1px solid var(--border-strong);
}
/* Highlighted "our" column */
.pm-table thead th.pm-table__own,
.pm-table tbody td.pm-table__own {
  background-color: color-mix(in srgb, var(--teal-400) 12%, var(--surface-1));
}
.pm-table thead th.pm-table__own { color: var(--teal-300); }
.pm-table tbody td {
  padding: var(--space-4) var(--space-5);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
  background-color: var(--surface-1);
}
.pm-table tbody tr:last-child td { border-bottom: none; }
.pm-table tbody th[scope="row"] {
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background-color: var(--surface-1);
}
.pm-table__yes { color: var(--color-success); font-weight: var(--fw-semibold); }
.pm-table__no  { color: var(--color-error); font-weight: var(--fw-semibold); }
.pm-table tbody tr:hover td,
.pm-table tbody tr:hover th[scope="row"] {
  background-color: var(--surface-2);
}
.pm-table tbody tr:hover td.pm-table__own {
  background-color: color-mix(in srgb, var(--teal-400) 16%, var(--surface-2));
}

/* ============================================================================
   LOCATION CARD  (resting plane)
   ============================================================================ */
.pm-location {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-top-color: var(--border-highlight);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-2), inset 0 1px 0 var(--border-highlight);
  height: 100%;
  transition: transform var(--dur-base) var(--ease-expo), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.pm-location:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3), inset 0 1px 0 var(--border-highlight);
  border-color: var(--border-strong);
  border-top-color: var(--border-highlight);
}
.pm-location__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.pm-location__head > .pm-badge { flex: 0 0 auto; }
.pm-location__title { min-width: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-primary); }
.pm-location__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.pm-location__row { display: flex; align-items: flex-start; gap: var(--space-2); }
.pm-location__row svg { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; stroke: var(--teal-400); margin-top: 2px; }
.pm-location__actions { margin-top: auto; padding-top: var(--space-2); display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ============================================================================
   ACCORDION (FAQ) — works with native <details>/<summary> AND JS enhancement
   ============================================================================ */
.pm-accordion { display: flex; flex-direction: column; gap: var(--space-3); }
.pm-accordion__item {
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-top-color: var(--border-highlight);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1), inset 0 1px 0 var(--border-highlight);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.pm-accordion__item[open],
.pm-accordion__item:hover { border-color: var(--border-strong); border-top-color: var(--border-highlight); }
.pm-accordion__item[open] { box-shadow: var(--shadow-2), inset 0 1px 0 var(--border-highlight); }
.pm-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  font-size: var(--fs-base);
}
.pm-accordion__summary::-webkit-details-marker { display: none; }
.pm-accordion__summary:hover { color: var(--teal-300); }
.pm-accordion__summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-md); }
.pm-accordion__chevron {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  stroke: var(--teal-400);
  transition: transform var(--dur-base) var(--ease-expo);
}
.pm-accordion__item[open] .pm-accordion__chevron { transform: rotate(180deg); }
.pm-accordion__body {
  padding: 0 var(--space-6) var(--space-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}
/* Subtle reveal when opened (guarded by reduced-motion in base.css) */
.pm-accordion__item[open] .pm-accordion__body {
  animation: pm-fade-down var(--dur-slow) var(--ease-out);
}

/* ============================================================================
   CTA BAND — raised band with a primary-tinted radial + teal glow (tokenized)
   ============================================================================ */
.pm-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-subtle);
  border-top-color: var(--border-highlight);
  background:
    radial-gradient(120% 140% at 50% -20%, color-mix(in srgb, var(--primary-500) 22%, transparent), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface-1));
  box-shadow: var(--shadow-3), inset 0 1px 0 var(--border-highlight);
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  text-align: center;
}
.pm-cta__glow {
  position: absolute;
  inset: auto;
  bottom: -8rem;
  left: 50%;
  transform: translateX(-50%);
  width: 30rem;
  height: 18rem;
  background: radial-gradient(circle, color-mix(in srgb, var(--teal-400) 30%, transparent), transparent 70%);
  filter: blur(70px);
  pointer-events: none;
  opacity: 0.5;
}
.pm-cta__inner { position: relative; z-index: var(--z-raised); max-width: 60ch; margin-inline: auto; }
.pm-cta__title { font-size: var(--fs-3xl); }
.pm-cta__text { margin-top: var(--space-4); color: var(--text-secondary); font-size: var(--fs-lg); }
.pm-cta__actions {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* ============================================================================
   BREADCRUMBS
   ============================================================================ */
.pm-breadcrumbs { font-size: var(--fs-xs); color: var(--text-muted); }
.pm-breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.pm-breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-2); }
.pm-breadcrumbs li:not(:last-child)::after {
  content: "/";
  color: var(--border-strong);
}
.pm-breadcrumbs a { color: var(--text-secondary); }
.pm-breadcrumbs a:hover { color: var(--text-primary); }
.pm-breadcrumbs [aria-current="page"] { color: var(--text-primary); font-weight: var(--fw-medium); }

/* ============================================================================
   PANEL (generic boxed surface, e.g. calculator shell, contact form)
   Base panel = raised plane (surface-2 + shadow-3). The calculator upgrades
   this to the FLOATING plane in calculator.css.
   ============================================================================ */
.pm-panel {
  background-color: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-top-color: var(--border-highlight);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3), inset 0 1px 0 var(--border-highlight);
  padding: clamp(1rem, 0.8rem + 1vw, 1.5rem);
}
.pm-well {
  background-color: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

/* ============================================================================
   SCROLL-REVEAL (progressive enhancement; JS adds .is-visible)
   ============================================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-slower) var(--ease-out),
    transform var(--dur-slower) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
/* No-JS / reduced-motion: never hide content */
.no-js [data-reveal],
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   KEYFRAMES (transform/opacity only)
   ============================================================================ */
@keyframes pm-fade-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Ambient float for the calculator's halo (opacity/transform only). */
@keyframes pm-float-glow {
  from { transform: translate(-50%, -50%) scale(1);    opacity: 0.9; }
  to   { transform: translate(-50%, -54%) scale(1.06); opacity: 1; }
}

/* ============================================================================
   ABOUT PAGE (/pro-nas) — Direction-B dimensional treatment
   ----------------------------------------------------------------------------
   Additive, page-scoped classes used ONLY on /pro-nas (no other route renders
   them, so they cannot regress other pages):
     · .pm-hero__brand + .pm-brandmark* — a decorative floating brand panel that
       fills the hero's previously-dead right column (aria-hidden, carries NO
       text): a surface-raised disc holding /logo.svg, a primary glow halo, two
       concentric depth rings and small floating orbs.
     · .pm-values* — a varied "value bento" for the trust cards (tiered
       elevation + non-identical cell sizes) so the cards read as lifted planes.
   All motion is transform/opacity only and gated behind prefers-reduced-motion.
   Colors reference tokens only.
   ============================================================================ */

/* --- Hero decorative brand panel (right column; purely decorative) --------- */
.pm-hero__brand {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  min-height: 15rem;
  isolation: isolate;
}
@media (min-width: 1024px) { .pm-hero__brand { min-height: 24rem; } }

/* Primary glow halo behind the mark — the focal light of the panel. */
.pm-hero__brand::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(30rem, 118%);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle at center, color-mix(in srgb, var(--primary-500) 52%, transparent) 0%, transparent 66%);
  filter: blur(38px);
  pointer-events: none;
  animation: pm-float-glow 9s var(--ease-in-out) infinite alternate;
}

/* Concentric depth rings (geometric motif) around the disc. */
.pm-brandmark {
  position: relative;
  display: grid;
  place-items: center;
  width: min(19rem, 84%);
  aspect-ratio: 1 / 1;
}
.pm-brandmark__ring {
  position: absolute;
  border-radius: var(--radius-pill);
  pointer-events: none;
}
.pm-brandmark__ring--outer {
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--teal-400) 26%, transparent);
  box-shadow: inset 0 1px 0 var(--border-highlight);
}
.pm-brandmark__ring--mid {
  inset: 15%;
  border: 1px solid color-mix(in srgb, var(--primary-400) 34%, transparent);
}

/* Floating disc holding the logo mark — surface-raised focal plane + glow. */
.pm-brandmark__disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 54%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-pill);
  background: radial-gradient(120% 120% at 50% 0%, var(--surface-3), var(--surface-raised));
  border: 1px solid var(--border-strong);
  border-top-color: var(--border-highlight);
  box-shadow: var(--shadow-4), var(--glow-primary), inset 0 1px 0 var(--border-highlight);
  animation: pm-brand-bob 7s var(--ease-in-out) infinite alternate;
}
.pm-brandmark__disc img { width: 56%; height: auto; }

/* Small floating orbs for parallax depth (decorative). */
.pm-brand-orb {
  position: absolute;
  border-radius: var(--radius-pill);
  pointer-events: none;
  box-shadow: var(--shadow-2);
}
.pm-brand-orb--teal {
  width: 1.5rem; height: 1.5rem;
  top: 7%; right: 15%;
  background: radial-gradient(circle at 30% 30%, var(--teal-300), var(--teal-700));
  animation: pm-brand-bob 6s var(--ease-in-out) infinite alternate;
}
.pm-brand-orb--accent {
  width: 1rem; height: 1rem;
  bottom: 11%; left: 13%;
  background: radial-gradient(circle at 30% 30%, var(--accent-400), var(--accent-600));
  animation: pm-brand-bob 8s var(--ease-in-out) infinite alternate-reverse;
}
@keyframes pm-brand-bob {
  from { transform: translateY(4px); }
  to   { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .pm-hero__brand::before,
  .pm-brandmark__disc,
  .pm-brand-orb { animation: none; }
}

/* --- Value bento (WHY TRUST) — varied composition, tiered elevation -------- */
.pm-values {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 600px) and (max-width: 959px) {
  .pm-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .pm-values { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); }
  .pm-values__cell--feat { grid-column: 1 / span 2; grid-row: 1; }
  .pm-values__cell--2    { grid-column: 3;          grid-row: 1; }
  .pm-values__cell--3    { grid-column: 1;          grid-row: 2; }
  .pm-values__cell--4    { grid-column: 2 / span 2; grid-row: 2; }
  .pm-values__cell--feat .pm-card__title { font-size: var(--fs-xl); }
}
/* Featured value cell — vertically centered so the wide plane reads full. */
.pm-values__cell--feat { justify-content: center; }

/* ============================================================================
   FAQ PAGE (/faq) — Direction-B dimensional treatment
   ----------------------------------------------------------------------------
   Additive, page-scoped classes used ONLY on /faq (every selector is gated by a
   .pm-faq-* / .pm-accordion--faq / .pm-hero__grid--faq class that no other route
   renders), so they cannot regress other pages:
     · .pm-faq-hero-art* — a decorative floating brand panel that fills the hero's
       previously-dead right column (aria-hidden, carries NO text): a glow halo,
       two offset geometric depth planes and a surface-raised panel with /logo.svg.
     · .pm-faq-lead — the "quotable answer" card lifted one plane above the hero.
     · .pm-faq-groups / .pm-faq-group__title — a varied (non-uniform) two-column
       bento of topic clusters with accent-ruled headings.
     · .pm-accordion--faq — elevated surface-2 accordion cards that clearly lift
       off the surface-1 band, with each answer dropped into a recessed sunken well.
   All motion is transform/opacity only and gated behind prefers-reduced-motion.
   Colors reference tokens only.
   ============================================================================ */

/* Hero split ratio: give the copy the lead, float the brand art on the right. */
.pm-hero__grid--faq { align-items: center; }
@media (min-width: 1024px) {
  .pm-hero__grid--faq { grid-template-columns: 1.12fr minmax(300px, 0.88fr); gap: var(--space-12); }
}

/* Lead "quotable answer" card — lifted one plane above the hero field. */
.pm-faq-lead {
  background-color: var(--surface-2);
  box-shadow: var(--shadow-3), inset 0 1px 0 var(--border-highlight);
}

/* --- Decorative floating brand panel (fills the dead right column; no text) --- */
.pm-faq-hero-art {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  min-height: 15rem;
  isolation: isolate;
}
@media (min-width: 1024px) { .pm-faq-hero-art { min-height: 22rem; } }

/* Ambient glow halo behind the whole motif. */
.pm-faq-hero-art__halo {
  position: absolute;
  width: min(30rem, 128%);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle at 50% 45%,
    color-mix(in srgb, var(--primary-500) 52%, transparent) 0%,
    color-mix(in srgb, var(--teal-400) 22%, transparent) 44%,
    transparent 70%);
  filter: blur(48px);
  opacity: 0.85;
  z-index: -2;
  pointer-events: none;
  animation: pm-faq-halo 9s var(--ease-in-out) infinite alternate;
}
/* Layered geometric depth: two offset rounded planes behind the brand panel. */
.pm-faq-hero-art__stack {
  position: relative;
  display: grid;
  place-items: center;
  width: min(19rem, 82%);
  aspect-ratio: 1 / 1;
}
.pm-faq-hero-art__ring {
  position: absolute;
  inset: 8%;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-highlight);
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  box-shadow: var(--shadow-3), inset 0 1px 0 var(--border-highlight);
  pointer-events: none;
}
.pm-faq-hero-art__ring--1 { transform: rotate(-9deg) scale(1.04); opacity: 0.55; }
.pm-faq-hero-art__ring--2 { transform: rotate(8deg)  scale(0.92); opacity: 0.85; }
/* The floating focal panel carrying the logo mark. */
.pm-faq-hero-art__panel {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 66%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-xl);
  background: linear-gradient(158deg, var(--surface-raised), var(--surface-1));
  border: 1px solid var(--border-strong);
  border-top-color: var(--border-highlight);
  box-shadow: var(--shadow-4), var(--glow-primary), inset 0 1px 0 var(--border-highlight);
  animation: pm-faq-float 7s var(--ease-in-out) infinite alternate;
}
.pm-faq-hero-art__logo {
  width: 56%;
  height: auto;
  filter: drop-shadow(0 8px 22px color-mix(in srgb, var(--primary-500) 48%, transparent));
}
@media (prefers-reduced-motion: reduce) {
  .pm-faq-hero-art__halo,
  .pm-faq-hero-art__panel { animation: none; }
}
@keyframes pm-faq-halo {
  from { transform: scale(0.95); opacity: 0.70; }
  to   { transform: scale(1.06); opacity: 1; }
}
@keyframes pm-faq-float {
  from { transform: translateY(3px)  rotate(-1.6deg); }
  to   { transform: translateY(-9px) rotate(1.6deg); }
}

/* --- FAQ groups: a varied (non-uniform) two-column bento of topic clusters --- */
.pm-faq-groups { display: grid; gap: var(--space-8); }
@media (min-width: 900px) {
  .pm-faq-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-10) var(--space-6);
    align-items: start;
  }
}
/* Group heading with a Direction-B accent rule (teal->primary gradient bar). */
.pm-faq-group__title {
  position: relative;
  margin-bottom: var(--space-5);
  padding-left: var(--space-4);
}
.pm-faq-group__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.14em;
  bottom: 0.14em;
  width: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--teal-400), var(--primary-500));
}

/* --- Elevated accordion: surface-2 cards that lift off the surface-1 band,
       with the answer body dropped into a recessed sunken well. --- */
.pm-accordion--faq { gap: var(--space-4); }
.pm-accordion--faq .pm-accordion__item {
  background-color: var(--surface-2);
  border-color: var(--border-strong);
  border-top-color: var(--border-highlight);
  box-shadow: var(--shadow-2), inset 0 1px 0 var(--border-highlight);
  transition:
    transform var(--dur-base) var(--ease-expo),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.pm-accordion--faq .pm-accordion__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3), inset 0 1px 0 var(--border-highlight);
  border-color: var(--border-strong);
  border-top-color: var(--border-highlight);
}
.pm-accordion--faq .pm-accordion__item[open] {
  transform: none;
  box-shadow: var(--shadow-3), inset 0 1px 0 var(--border-highlight);
  border-color: var(--teal-400);
  border-top-color: var(--border-highlight);
}
.pm-accordion--faq .pm-accordion__body {
  margin: 0 var(--space-5) var(--space-5);
  padding: var(--space-4) var(--space-5);
  background-color: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow:
    inset 0 2px 8px -4px color-mix(in srgb, var(--navy-950) 90%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--navy-950) 55%, transparent);
}