/* ==========================================================================
   Interior pages — the shared layer for everything past the front door.

   Loaded on every page, after page.css. It exists so the pages a funded,
   seven-year-old company would take seriously — pricing, articles, security,
   privacy, the early-access form — share one head treatment, one chip, one
   filter bar and one table, instead of each being styled on its own.

   Two hard rules apply here exactly as they do on the home page: the CSP
   forbids inline styles, and no third-party asset is ever loaded. Depth comes
   from gradients, layering and inlined SVG.

   Nothing in this file hides content. Every interactive pattern below has a
   correct no-JavaScript behaviour — with the scripts off, more is visible, not
   less.
   ========================================================================== */

/* ---------------------------------------------------------------- page head
   The pseudo-elements mean every existing interior page inherits the wash and
   the grain without a single markup change. */

.page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.75rem, 6vw, 4.75rem) clamp(2.25rem, 4.5vw, 3.25rem);
  background: var(--sand-050);
  border-bottom: 1px solid var(--line-100);
}

.page-head::before {
  content: "";
  position: absolute;
  inset: -60% -12% auto -12%;
  z-index: -2;
  height: 165%;
  background: var(--mesh-soft);
  pointer-events: none;
}

.page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: 0.12;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.page-head > .wrap {
  position: relative;
}

.page-head h1 {
  max-width: 26ch;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--brand-950);
}

.page-head h1 em {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--brand-700);
}

.page-head__lead {
  margin-top: var(--sp-5);
  max-width: 44rem;
  color: var(--ink-600);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.6;
}

.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.page-head__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}

/* ----------------------------------------------------------------- eyebrow */

.ed-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  padding: 0.38rem 0.9rem;
  border: 1px solid var(--line-200);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink-600);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  box-shadow: var(--sh-xs);
  backdrop-filter: blur(6px);
}

.ed-eyebrow__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(26, 144, 130, 0.16);
}

/* ------------------------------------------------------------------- chips */

.ed-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line-200);
  border-radius: var(--r-full);
  background: var(--white);
  color: var(--ink-600);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  box-shadow: var(--sh-xs);
}

.ed-chip .icon {
  color: var(--brand-500);
}

.ed-chip--clay {
  border-color: var(--clay-200);
  background: var(--clay-100);
  color: var(--clay-700);
}

.ed-chip--clay .icon {
  color: var(--clay-600);
}

/* -------------------------------------------------------------- fact strip */

.ed-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}

.ed-fact {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
}

.ed-fact__value {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--brand-800);
}

.ed-fact__label {
  color: var(--ink-500);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

/* ------------------------------------------------- honesty / notice block */

.ed-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px dashed var(--accent-200);
  border-radius: var(--r-lg);
  background: var(--accent-100);
}

.ed-note__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.72);
  color: var(--accent-700);
}

.ed-note__title {
  color: var(--warn-800);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.ed-note__body {
  margin-top: var(--sp-1);
  color: var(--warn-800);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.ed-note__body a {
  color: var(--warn-800);
}

/* --------------------------------------------------------------- filter bar
   One accessible pattern, reused by the pricing table and the article index.

   The radios are real, focusable inputs sitting immediately before their own
   label, so `input:checked + label` and `input:focus-visible + label` style the
   chip. They are positioned absolutely so they add no flex gap, which keeps
   them DOM siblings of the content that follows — that is what lets a plain
   CSS `~` selector do the filtering, with no script and no `:has()`. */

.ed-filter {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.ed-filter > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.ed-filter > label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0.45rem 1rem;
  border: 1px solid var(--line-300);
  border-radius: var(--r-full);
  background: var(--white);
  color: var(--ink-600);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.ed-filter > label:hover {
  border-color: var(--brand-300);
  color: var(--brand-800);
}

.ed-filter > input:focus-visible + label {
  box-shadow: var(--focus-ring);
}

.ed-filter > input:checked + label {
  background: var(--brand-800);
  border-color: var(--brand-800);
  color: var(--white);
}

.ed-filter > label .icon {
  color: var(--brand-500);
}

.ed-filter > input:checked + label .icon {
  color: currentColor;
}

.ed-filter__body {
  /* `min-width: 0` matters more than it looks. The body holds a wide table on
     the pricing page, and a flex item's automatic minimum size is its content
     size — without this the table pushes the whole page sideways on a phone
     instead of scrolling inside its own box. */
  flex: 1 0 100%;
  min-width: 0;
  margin-top: var(--sp-6);
}

.ed-filter__label {
  flex: 1 0 100%;
  margin-bottom: var(--sp-1);
  color: var(--ink-400);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* --------------------------------------------------------------- table */

.ed-scroll {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line-200);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-sm);
}

.ed-table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
}

.ed-table caption {
  padding: var(--sp-5) var(--sp-5) 0;
  text-align: left;
  color: var(--ink-500);
  font-size: var(--fs-sm);
}

.ed-table th,
.ed-table td {
  padding: var(--sp-4);
  text-align: left;
  vertical-align: top;
}

.ed-table thead th {
  border-bottom: 1px solid var(--line-200);
  color: var(--ink-500);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.ed-table tbody th {
  border-bottom: 1px solid var(--line-100);
  color: var(--ink-800);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.ed-table tbody td {
  border-bottom: 1px solid var(--line-100);
  color: var(--ink-600);
  font-size: var(--fs-sm);
}

.ed-table tbody tr:hover th,
.ed-table tbody tr:hover td {
  background: var(--brand-050);
}

.ed-table tr:last-child th,
.ed-table tr:last-child td {
  border-bottom: 0;
}

.ed-table__group th {
  border-bottom: 1px solid var(--line-200);
  background: var(--sand-100);
  color: var(--ink-500);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.ed-cell {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--sp-2);
  line-height: 1.4;
}

.ed-cell .icon {
  margin-top: 0.15rem;
  color: var(--brand-600);
}

.ed-cell--no {
  color: var(--ink-400);
}

.ed-cell--no .icon {
  color: var(--ink-300);
}

.ed-cell--note {
  color: var(--ink-500);
  font-size: var(--fs-xs);
}

/* ----------------------------------------------------------- numbered steps */

.ed-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

.ed-step {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}

.ed-step__num {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--brand-200);
}

.ed-step__title {
  color: var(--ink-900);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

.ed-step__body {
  color: var(--ink-500);
  font-size: var(--fs-sm);
  line-height: 1.62;
}

/* ------------------------------------------------------------- empty state */

.ed-empty {
  margin-top: var(--sp-6);
  padding: var(--sp-7) var(--sp-5);
  border: 1px dashed var(--line-300);
  border-radius: var(--r-lg);
  background: var(--white);
  text-align: center;
  color: var(--ink-500);
  font-size: var(--fs-sm);
}

.ed-empty__title {
  color: var(--ink-800);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

.ed-empty p + p {
  margin-top: var(--sp-2);
}

/* --------------------------------------------------------------- stacking */

.ed-stack > * + * {
  margin-top: var(--sp-6);
}

/* -------------------------------------------------------------- responsive */

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

  .ed-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ed-strip {
    grid-template-columns: 1fr;
  }

  .page-head__actions .btn {
    width: 100%;
  }
}