/*
Theme Name: Peptide Manufacturing
Theme URI: https://example.com/peptide-wp-theme
Author: [YOUR COMPANY]
Author URI: https://example.com
Description: A dark, technical B2B theme for peptide manufacturers and ingredient suppliers. Classic PHP theme — no page builder, no external CDN. Includes a Products custom post type with specification meta boxes, an editable Customizer panel for company data and certificates, and a WXR demo import.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: peptide
Tags: business, custom-logo, custom-menu, featured-images, translation-ready, right-sidebar, wide-blocks, block-styles
*/

/* ==========================================================================
   Table of contents
   1.  Design tokens
   2.  Reset
   3.  Layout
   4.  Type
   5.  Section heads
   6.  Buttons
   7.  Header
   8.  Hero
   ...
   The stylesheet below is the same design system used by the static
   prototype, extended with WordPress core classes at the end of the file.
   ========================================================================== */

/* ==========================================================================
   Peptide B2B site — design system
   Single shared stylesheet. No preprocessor, no build step, no CDN.

   Visual direction: technical / laboratory.
   - Deep ink background with hairline structure (like an instrument panel)
   - One accent (mint) for interaction, one secondary (copper) for data
   - Light "specimen sheet" panels for specification tables (paper feel)
   - Monospace for identifiers, numbers, CAS, batch codes
   ========================================================================== */

/* ---------- 1. Tokens --------------------------------------------------- */
:root {
  --ink-900: #050F16;
  --ink-800: #07161F;
  --ink-700: #0A1D28;
  --ink-600: #0E2634;
  --ink-500: #143141;

  --paper: #F4F2EA;
  --paper-2: #EAE6DA;

  --text: #E6EFF3;
  --text-2: #A9BEC9;
  --text-3: #7D95A2;

  --accent: #4FD8C0;
  --accent-dim: #2E9E8D;
  --copper: #E0A968;

  --line: rgba(230, 239, 243, 0.12);
  --line-soft: rgba(230, 239, 243, 0.07);
  --line-strong: rgba(230, 239, 243, 0.22);

  --ink-paper: #16232C;
  --ink-paper-2: #55646C;
  --line-paper: rgba(22, 35, 44, 0.14);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --wrap: 1180px;
  --gutter: 28px;
  --radius: 2px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. Reset ---------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

p {
  margin: 0 0 1.1em;
}

ul,
ol {
  margin: 0 0 1.1em;
  padding-left: 1.15em;
}

li {
  margin-bottom: 0.45em;
}

a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

a:hover {
  color: var(--accent);
}

strong {
  font-weight: 600;
  color: #fff;
}

small {
  font-size: 0.8125rem;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

::selection {
  background: var(--accent);
  color: var(--ink-900);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ---------- 3. Layout --------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--wide {
  max-width: 1360px;
}

.section {
  padding-block: clamp(56px, 7vw, 104px);
  border-top: 1px solid var(--line-soft);
  position: relative;
}

.section--tight {
  padding-block: clamp(40px, 4.5vw, 64px);
}

.section--flush-top {
  border-top: 0;
}

.grid {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.grid > * {
  background: var(--ink-900);
}

.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.split--center {
  align-items: center;
}

/* ---------- 4. Type ----------------------------------------------------- */
.display {
  font-size: clamp(2.4rem, 5.4vw, 4.35rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 500;
}

.h2 {
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
}

.h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -0.018em;
}

.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 62ch;
}

.muted {
  color: var(--text-2);
}

.dim {
  color: var(--text-3);
}

.small {
  font-size: 0.875rem;
  line-height: 1.6;
}

.kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.15rem;
  font-weight: 400;
}

.kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
  opacity: 0.75;
  flex: none;
}

.kicker--copper {
  color: var(--copper);
}
.kicker--copper::before {
  background: var(--copper);
}

.kicker .idx {
  color: var(--text-3);
  letter-spacing: 0.12em;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- 5. Section head -------------------------------------------- */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: 24px 48px;
  align-items: end;
  margin-bottom: clamp(28px, 3.6vw, 52px);
}

.sec-head .lead {
  margin: 0;
  justify-self: end;
}

.sec-head--stack {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- 6. Buttons ------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #04191A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 46px;
  padding: 0.72em 1.5em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease),
    color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.btn:hover {
  color: var(--btn-fg);
  background: #6BE6D1;
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line-strong);
}

.btn--ghost:hover {
  --btn-fg: var(--accent);
  background: rgba(79, 216, 192, 0.07);
  border-color: var(--accent);
}

.btn--block {
  width: 100%;
}

.btn .arw {
  font-size: 0.95em;
  transition: transform 0.25s var(--ease);
}

.btn:hover .arw {
  transform: translateX(3px);
}

.link-arw {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid rgba(79, 216, 192, 0.35);
  padding-bottom: 3px;
}

.link-arw:hover {
  color: var(--text);
  border-color: var(--text);
}

/* ---------- 7. Header -------------------------------------------------- */
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--accent);
  color: var(--ink-900);
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.skip:focus {
  top: 12px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 15, 22, 0.82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.site-header .bar {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: none;
  color: var(--text);
  letter-spacing: -0.01em;
}

.brand:hover {
  color: var(--text);
}

.brand .mark {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--accent);
}

.brand .name {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.2;
}

.brand .sub {
  display: block;
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  color: var(--text-3);
  margin-top: 3px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.nav a {
  position: relative;
  padding: 8px 13px;
  font-size: 0.885rem;
  color: var(--text-2);
  border-radius: var(--radius);
}

.nav a:hover {
  color: var(--text);
  background: rgba(230, 239, 243, 0.045);
}

.nav a[aria-current="page"] {
  color: var(--text);
}

.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 1px;
  height: 1px;
  background: var(--accent);
}

.header-cta {
  flex: none;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: background 0.2s;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: transform 0.22s var(--ease);
}

.nav-toggle span::before {
  top: -6px;
}
.nav-toggle span::after {
  top: 6px;
}

.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] span::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------- 8. Hero ---------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(56px, 7.5vw, 108px) clamp(44px, 6vw, 88px);
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      to right,
      rgba(230, 239, 243, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(230, 239, 243, 0.05) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(ellipse 80% 70% at 78% 12%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(
    ellipse 80% 70% at 78% 12%,
    #000 10%,
    transparent 72%
  );
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -180px;
  top: -280px;
  background: radial-gradient(
    circle,
    rgba(79, 216, 192, 0.11) 0%,
    rgba(79, 216, 192, 0.03) 42%,
    transparent 68%
  );
  pointer-events: none;
}

.hero .wrap {
  position: relative;
  z-index: 1;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}

.hero h1 {
  margin-bottom: 1.15rem;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero .lead {
  max-width: 54ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.9rem;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 2.2rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
}

.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-meta span::before {
  content: "";
  width: 5px;
  height: 5px;
  border: 1px solid var(--accent-dim);
  transform: rotate(45deg);
  flex: none;
}

/* Instrument panel (right column of hero) */
.panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(14, 38, 52, 0.72), rgba(7, 22, 31, 0.9));
  padding: 22px;
  position: relative;
}

.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-color: var(--accent);
  border-style: solid;
  opacity: 0.65;
}

.panel::before {
  top: -1px;
  left: -1px;
  border-width: 1px 0 0 1px;
}

.panel::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 1px 1px 0;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 16px;
}

.panel-head .dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
}

.panel-head .dot::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 216, 192, 0.14);
}

.panel-mol {
  margin-bottom: 18px;
}

.panel-mol svg {
  width: 100%;
  height: auto;
}

.panel-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line-soft);
}

.panel-stats div {
  padding: 14px 14px 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

.panel-stats div:nth-child(odd) {
  border-right: 1px solid var(--line-soft);
}

.panel-stats div:nth-child(even) {
  padding-left: 16px;
}

.panel-stats .k {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
  display: block;
  margin-bottom: 5px;
}

.panel-stats .v {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.35;
}

.panel-foot {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  color: var(--text-3);
  line-height: 1.7;
}

/* ---------- 9. Cards --------------------------------------------------- */
.card {
  position: relative;
  padding: 26px 24px 24px;
  background: var(--ink-900);
  transition: background 0.25s var(--ease);
}

.card:hover {
  background: rgba(20, 49, 65, 0.34);
}

.card .idx-num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--accent-dim);
  display: block;
  margin-bottom: 14px;
}

.card h3 {
  margin-bottom: 0.55em;
}

.card p {
  color: var(--text-2);
  font-size: 0.94rem;
  margin-bottom: 0.9em;
}

.card ul {
  color: var(--text-2);
  font-size: 0.875rem;
  padding-left: 0;
  list-style: none;
  margin: 0;
}

.card ul li {
  padding-left: 15px;
  position: relative;
}

.card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  background: var(--accent-dim);
}

/* Evidence / trust strip */
.evidence {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.evidence > div {
  padding: 26px 24px;
  border-right: 1px solid var(--line-soft);
}

.evidence > div:last-child {
  border-right: 0;
}

.evidence .tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  display: block;
  margin-bottom: 9px;
}

.evidence p {
  font-size: 0.875rem;
  color: var(--text-2);
  margin: 0;
}

/* Product card */
.p-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: var(--ink-900);
  transition: background 0.25s var(--ease);
}

.p-card:hover {
  background: rgba(20, 49, 65, 0.3);
}

.p-card .p-top {
  padding: 24px 24px 20px;
  flex: 1;
}

.p-card .p-cat {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

.p-card h3 {
  font-size: 1.12rem;
  margin-bottom: 0.3em;
}

.p-card .inci {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-dim);
  letter-spacing: 0.03em;
  margin-bottom: 0.85em;
}

.p-card .desc {
  font-size: 0.875rem;
  color: var(--text-2);
  margin-bottom: 1.1rem;
}

.p-spec {
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: auto;
}

.p-spec div {
  padding: 10px 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.4;
}

.p-spec div:nth-child(odd) {
  padding-right: 10px;
}

.p-spec .k {
  display: block;
  color: var(--text-3);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.p-card .p-foot {
  border-top: 1px solid var(--line-soft);
  padding: 13px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}

.p-card:hover .p-foot {
  color: var(--accent);
}

/* ---------- 10. Stats -------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
}

.stat {
  background: var(--ink-900);
  padding: 24px 22px;
}

.stat .v {
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  display: block;
  margin-bottom: 8px;
  color: var(--text);
}

.stat .k {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---------- 11. Tables ------------------------------------------------- */
/* Dark data table */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  min-width: 520px;
}

table.data caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}

table.data th,
table.data td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

table.data thead th {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 400;
  background: rgba(230, 239, 243, 0.03);
  white-space: nowrap;
}

table.data tbody tr:last-child td {
  border-bottom: 0;
}

table.data tbody tr:hover {
  background: rgba(79, 216, 192, 0.035);
}

table.data td.v,
table.data td.num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text);
}

table.data .rowhead {
  color: var(--text);
  font-weight: 500;
}

/* Light "specimen sheet" spec table */
.sheet {
  background: var(--paper);
  color: var(--ink-paper);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.sheet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line-paper);
}

.sheet-head .t {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-paper);
}

.sheet-head .r {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  color: var(--ink-paper-2);
  text-align: right;
  white-space: nowrap;
}

table.spec {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.85rem;
}

table.spec th,
table.spec td {
  text-align: left;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line-paper);
  vertical-align: top;
  overflow-wrap: break-word;
}

table.spec thead th {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-paper-2);
  font-weight: 400;
  background: var(--paper-2);
}

table.spec td:first-child {
  width: 30%;
  font-weight: 500;
  color: var(--ink-paper);
}

table.spec td + td {
  font-family: var(--font-mono);
  font-size: 0.775rem;
  color: #24343D;
}

/* Three-column spec tables: keep the value column widest */
table.spec th:nth-child(3),
table.spec td:nth-child(3) {
  width: 42%;
}

table.spec tbody tr:last-child td {
  border-bottom: 0;
}

.sheet-foot {
  padding: 13px 22px 16px;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  line-height: 1.7;
  color: var(--ink-paper-2);
  border-top: 1px solid var(--line-paper);
  background: var(--paper-2);
}

.sheet-foot strong {
  color: var(--ink-paper);
}

/* ---------- 12. Steps / process --------------------------------------- */
.steps {
  counter-reset: step;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-soft);
}

.step {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-soft);
}

.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.79rem;
  color: var(--accent);
  padding-top: 2px;
}

.step h3 {
  font-size: 1rem;
  margin-bottom: 0.35em;
}

.step p {
  font-size: 0.875rem;
  color: var(--text-2);
  margin: 0;
}

/* ---------- 13. Pills / filters --------------------------------------- */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.pill {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.71rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}

.pill:hover {
  color: var(--text);
  border-color: var(--text-3);
}

.pill[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #04191A;
}

.pill .c {
  opacity: 0.6;
  margin-left: 4px;
}

/* ---------- 14. Accordion --------------------------------------------- */
details.acc {
  border-bottom: 1px solid var(--line-soft);
}

details.acc summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 40px 20px 0;
  position: relative;
  font-size: 1rem;
  color: var(--text);
  transition: color 0.2s;
}

details.acc summary::-webkit-details-marker {
  display: none;
}

details.acc summary:hover {
  color: var(--accent);
}

details.acc summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 18px;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--accent);
  transition: transform 0.2s var(--ease);
}

details.acc[open] summary::after {
  content: "\2013";
}

details.acc .acc-body {
  padding: 0 40px 22px 0;
  color: var(--text-2);
  font-size: 0.9rem;
}

details.acc .acc-body p:last-child {
  margin-bottom: 0;
}

/* ---------- 15. Timeline ---------------------------------------------- */
.timeline {
  border-left: 1px solid var(--line);
  margin-left: 6px;
  padding-left: 26px;
}

.tl-item {
  position: relative;
  padding-bottom: 26px;
}

.tl-item::before {
  content: "";
  position: absolute;
  left: -31px;
  top: 8px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--accent-dim);
  background: var(--ink-900);
  transform: rotate(45deg);
}

.tl-item .yr {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  display: block;
  margin-bottom: 5px;
}

.tl-item h3 {
  font-size: 1rem;
  margin-bottom: 0.25em;
}

.tl-item p {
  font-size: 0.875rem;
  color: var(--text-2);
  margin: 0;
}

/* ---------- 16. Placeholders ------------------------------------------ */
/* Every unverified company-specific value is wrapped in .ph so it is
   visibly marked on the page and easy to find before launch. */
.ph,
.tok {
  font-family: var(--font-mono);
  font-size: 0.82em;
  letter-spacing: 0.01em;
  color: var(--copper);
  background: rgba(224, 169, 104, 0.1);
  border-bottom: 1px dashed rgba(224, 169, 104, 0.55);
  padding: 0 3px;
  white-space: normal;
  word-break: break-word;
}

.sheet .ph,
.sheet .tok {
  color: #8A5A18;
  background: rgba(138, 90, 24, 0.09);
  border-bottom-color: rgba(138, 90, 24, 0.5);
}

/* Placeholder audit mode: toggled from the footer link */
body[data-audit="on"] .ph,
body[data-audit="on"] .tok {
  outline: 1px dashed var(--copper);
  outline-offset: 2px;
  background: rgba(224, 169, 104, 0.22);
}

/* ---------- 17. Notes / callouts -------------------------------------- */
.note {
  border-left: 2px solid var(--copper);
  background: rgba(224, 169, 104, 0.055);
  padding: 16px 20px;
  font-size: 0.86rem;
  color: var(--text-2);
  margin: 1.6rem 0;
}

.note strong {
  color: var(--copper);
}

.note--accent {
  border-left-color: var(--accent);
  background: rgba(79, 216, 192, 0.055);
}

.note--accent strong {
  color: var(--accent);
}

.note p:last-child {
  margin-bottom: 0;
}

/* ---------- 18. CTA band ---------------------------------------------- */
.cta-band {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(
    100deg,
    rgba(20, 49, 65, 0.42) 0%,
    rgba(5, 15, 22, 0.2) 55%,
    rgba(79, 216, 192, 0.07) 100%
  );
  padding-block: clamp(44px, 6vw, 76px);
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(230, 239, 243, 0.05) 0 1px,
    transparent 1px 96px
  );
  pointer-events: none;
}

.cta-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 32px;
  align-items: center;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

/* ---------- 19. Forms -------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}

.field label .req {
  color: var(--copper);
  margin-left: 3px;
}

.field .hint {
  font-size: 0.75rem;
  color: var(--text-3);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  width: 100%;
  background: rgba(230, 239, 243, 0.035);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.94rem;
  padding: 12px 14px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  appearance: none;
}

select {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

select option {
  background: var(--ink-700);
  color: var(--text);
}

input:hover,
select:hover,
textarea:hover {
  border-color: rgba(230, 239, 243, 0.34);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(79, 216, 192, 0.05);
  box-shadow: 0 0 0 3px rgba(79, 216, 192, 0.12);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-3);
  opacity: 1;
}

textarea {
  min-height: 128px;
  resize: vertical;
  line-height: 1.6;
}

.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea {
  border-color: #E8756B;
  background: rgba(232, 117, 107, 0.06);
}

.err {
  font-size: 0.76rem;
  color: #F19A91;
  font-family: var(--font-mono);
  min-height: 0;
}

.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.82rem;
  color: var(--text-2);
  line-height: 1.55;
}

.check input {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--accent);
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  font-size: 0.76rem;
  color: var(--text-3);
  margin-top: 4px;
}

.form-success {
  border: 1px solid var(--accent-dim);
  background: rgba(79, 216, 192, 0.06);
  padding: 28px;
}

.form-success[hidden] {
  display: none;
}

.form-success h2 {
  font-size: 1.3rem;
  margin-bottom: 0.5em;
  color: var(--accent);
}

.form-success p {
  font-size: 0.9rem;
  color: var(--text-2);
}

.form-success .ref {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text);
  background: rgba(230, 239, 243, 0.05);
  padding: 10px 14px;
  border: 1px solid var(--line-soft);
  display: inline-block;
  margin-top: 6px;
}

/* ---------- 20. Page header (inner pages) ----------------------------- */
.page-head {
  position: relative;
  padding-block: clamp(42px, 5.5vw, 76px) clamp(32px, 4vw, 52px);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}

.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      to right,
      rgba(230, 239, 243, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(230, 239, 243, 0.045) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(to right, #000, transparent 65%);
  -webkit-mask-image: linear-gradient(to right, #000, transparent 65%);
  pointer-events: none;
}

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

.page-head h1 {
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  letter-spacing: -0.03em;
  max-width: 24ch;
}

.page-head .lead {
  margin-top: 1.1rem;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1.6rem;
}

.crumbs a {
  color: var(--text-2);
}

.crumbs .sep {
  color: var(--text-3);
  opacity: 0.6;
}

/* ---------- 21. Sidebar layout (product / docs pages) ----------------- */
.doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(32px, 4.5vw, 64px);
  align-items: start;
}

.side {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 20px;
}

.side-box {
  border: 1px solid var(--line);
  padding: 20px;
  background: rgba(14, 38, 52, 0.28);
}

.side-box .t {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-3);
  display: block;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.kv {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 14px;
  font-size: 0.8rem;
  margin-bottom: 12px;
}

.kv dt {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

.kv dd {
  margin: 0;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text);
  word-break: break-word;
}

.doc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--line-soft);
}

.doc-list li {
  margin: 0;
}

.doc-list a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  background: var(--ink-900);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--text-2);
}

.doc-list a:hover {
  color: var(--accent);
  background: rgba(79, 216, 192, 0.06);
}

.doc-list .ext {
  color: var(--text-3);
  font-size: 0.65rem;
}

/* ---------- 22. Footer ------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--ink-800);
  padding-top: clamp(40px, 5vw, 64px);
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) repeat(4, minmax(0, 1fr));
  gap: 36px 28px;
  padding-bottom: 44px;
}

.foot-brand p {
  font-size: 0.86rem;
  color: var(--text-2);
  max-width: 34ch;
  margin-top: 16px;
}

.foot-col h3 {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 400;
  margin-bottom: 14px;
}

.foot-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.foot-col li {
  margin-bottom: 9px;
}

.foot-col a {
  font-size: 0.865rem;
  color: var(--text-2);
}

.foot-col a:hover {
  color: var(--accent);
}

.foot-col address {
  font-style: normal;
  font-size: 0.865rem;
  color: var(--text-2);
  line-height: 1.75;
}

.foot-bottom {
  border-top: 1px solid var(--line-soft);
  padding-block: 18px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.04em;
  color: var(--text-3);
  line-height: 1.7;
}

.foot-bottom .legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}

.audit-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: all 0.2s;
}

.audit-btn:hover {
  color: var(--copper);
  border-color: var(--copper);
}

.audit-btn[aria-pressed="true"] {
  color: var(--ink-900);
  background: var(--copper);
  border-color: var(--copper);
}

/* ---------- 23. Misc -------------------------------------------------- */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
}

.tag-row li {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--line-strong);
  padding: 5px 9px;
}

.figure {
  border: 1px solid var(--line);
  background: rgba(14, 38, 52, 0.3);
  padding: 18px;
}

.figure figcaption {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-top: 12px;
  line-height: 1.7;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 10px;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.chart-legend i {
  width: 14px;
  height: 2px;
  background: var(--accent);
  display: inline-block;
}

.chart-legend i.dash {
  background: repeating-linear-gradient(
    90deg,
    var(--copper) 0 4px,
    transparent 4px 7px
  );
}

.bars {
  display: grid;
  gap: 12px;
  margin: 0 0 1.4rem;
}

.bar-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--text-2);
}

.bar-track {
  height: 6px;
  background: rgba(230, 239, 243, 0.07);
  position: relative;
}

.bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  width: var(--w, 40%);
}

.bar-fill--ph {
  background: repeating-linear-gradient(
    90deg,
    rgba(224, 169, 104, 0.55) 0 6px,
    rgba(224, 169, 104, 0.18) 6px 10px
  );
}

.toc {
  border: 1px solid var(--line);
  padding: 18px 20px;
  margin-bottom: 2.2rem;
}

.toc .t {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-3);
  display: block;
  margin-bottom: 12px;
}

.toc ol {
  margin: 0;
  padding-left: 1.1em;
  columns: 2;
  column-gap: 28px;
  font-size: 0.84rem;
}

.toc li {
  margin-bottom: 6px;
  break-inside: avoid;
}

.side .toc ol {
  columns: 1;
}

.toc a {
  color: var(--text-2);
}

.toc a:hover {
  color: var(--accent);
}

.prose {
  max-width: 72ch;
}

/* Pages that carry plain content (no full-width sections) use the same column
   as the rest of the site instead of the narrower reading measure. */
.section--flush-top > .prose {
  max-width: none;
}

.prose h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  margin: 2.6rem 0 0.9rem;
  letter-spacing: -0.02em;
  scroll-margin-top: 96px;
}

.prose h3 {
  font-size: 1.02rem;
  margin: 1.8rem 0 0.6rem;
  color: var(--text);
}

.prose p,
.prose li {
  color: var(--text-2);
}

.prose ul {
  margin-bottom: 1.3rem;
}

.prose > h2:first-of-type {
  margin-top: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-2 { margin-bottom: 2rem; }

/* ---------- 24. Reveal on scroll ------------------------------------- */
/* Content is visible by default. The hidden state is only applied once
   main.js confirms that IntersectionObserver is available, so a failed
   or slow observer can never leave the page blank. */
html.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

html.js-reveal .reveal.in {
  opacity: 1;
  transform: none;
}

/* No JS fallback */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* ---------- 24b. Navigation — drop-downs ------------------------------ */
.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-item {
  position: relative;
  margin: 0;
}

.nav-item > a {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.chev {
  width: 6px;
  height: 6px;
  flex: none;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.55;
  transition: transform 0.2s var(--ease);
}

.nav-item.has-sub:hover .chev,
.nav-item.has-sub:focus-within .chev {
  transform: rotate(225deg) translateY(-1px);
  opacity: 1;
}

.sub-toggle {
  display: none;
}

.subnav {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  min-width: 252px;
  padding: 8px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease),
    visibility 0.18s;
}

.nav-item:nth-last-child(-n + 2) .subnav {
  left: auto;
  right: 0;
}

.nav-item:hover > .subnav,
.nav-item:focus-within > .subnav,
.nav-item.open > .subnav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.subnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}

.subnav li {
  margin: 0;
}

.subnav a {
  display: block;
  padding: 9px 12px;
  font-size: 0.85rem;
  color: var(--text-2);
  border-left: 1px solid transparent;
}

.subnav a:hover,
.subnav a:focus-visible {
  color: var(--text);
  background: rgba(230, 239, 243, 0.05);
  border-left-color: var(--accent);
}

.subnav a[aria-current="page"] {
  color: var(--accent);
  border-left-color: var(--accent);
}

.subnav a[aria-current="page"]::after {
  display: none;
}

.sn-t {
  display: block;
}

.sn-d {
  display: block;
  margin-top: 2px;
  font-size: 0.735rem;
  line-height: 1.4;
  color: var(--text-3);
}

.subnav a:hover .sn-d {
  color: var(--text-2);
}

/* ---------- 25. Responsive ------------------------------------------- */
@media (max-width: 1080px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel {
    max-width: 520px;
  }

  .doc-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .side {
    position: static;
  }

  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cta-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .nav,
  .header-cta {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-header.open .nav {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 68px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink-800);
    border-bottom: 1px solid var(--line);
    padding: 10px var(--gutter) 18px;
    margin: 0;
  }

  .site-header.open .nav a {
    padding: 13px 4px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.95rem;
  }

  .site-header.open .nav a::after {
    display: none;
  }

  .site-header.open .nav a[aria-current="page"] {
    color: var(--accent);
  }

  .cols-3,
  .cols-4,
  .evidence,
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .evidence > div {
    border-bottom: 1px solid var(--line-soft);
  }

  .evidence > div:nth-child(2n) {
    border-right: 0;
  }

  .sec-head,
  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .sec-head .lead {
    justify-self: start;
  }

  .toc ol {
    columns: 1;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  /* nav becomes an accordion */
  .site-header.open .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .site-header.open .nav-item {
    width: 100%;
  }

  .site-header.open .nav-item > a {
    padding: 13px 4px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.95rem;
    justify-content: space-between;
    background: none;
  }

  .site-header.open .nav-item > a::after {
    display: none;
  }

  .site-header.open .nav-item > a .chev {
    display: none;
  }

  .site-header.open .nav-item > a[aria-current="page"] {
    color: var(--accent);
  }

  .subnav {
    position: static;
    display: none;
    min-width: 0;
    padding: 4px 0 8px 12px;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-item.open > .subnav {
    display: block;
  }

  .subnav a {
    border-left: 1px solid var(--line);
    border-bottom: 0;
    padding: 9px 12px;
    font-size: 0.88rem;
  }

  .sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 4px;
    right: 0;
    width: 44px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text-3);
    cursor: pointer;
  }

  .sub-toggle .chev {
    width: 7px;
    height: 7px;
  }

  .nav-item.open .sub-toggle {
    color: var(--accent);
  }

  .nav-item.open .sub-toggle .chev {
    transform: rotate(225deg) translateY(-1px);
  }
}

/* Eight top-level menu items do not fit beside the logo between 901px and
   1340px, so let the navigation take a second row instead of overflowing. */
@media (min-width: 901px) and (max-width: 1340px) {
  .site-header .bar {
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 12px 0;
  }

  .site-header .header-cta {
    margin-left: auto;
  }

  .site-header .nav {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  .site-header .nav-list {
    flex-wrap: wrap;
    gap: 6px 14px;
  }

  .site-header .nav a {
    padding: 6px 8px;
  }
}

/* Contact links that still point at an unfilled placeholder stay hidden
   until the matching Customizer field is filled in. */
a[href*="PLACEHOLDER"] {
  display: none;
}

@media (max-width: 620px) {
  :root {
    --gutter: 18px;
  }

  body {
    font-size: 15.5px;
  }

  .cols-2,
  .cols-3,
  .cols-4,
  .evidence,
  .stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .evidence > div {
    border-right: 0;
  }

  .stats {
    gap: 0;
  }

  .stat {
    border-bottom: 1px solid var(--line-soft);
  }

  .hero-meta {
    gap: 10px 16px;
  }

  .foot-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .p-spec {
    grid-template-columns: 1fr;
  }

  .p-spec div:nth-child(odd) {
    padding-right: 0;
  }

  table.spec th,
  table.spec td {
    padding: 11px 14px;
  }

  .sheet-head,
  .sheet-foot {
    padding-inline: 14px;
  }

  table.spec td:first-child {
    width: 42%;
  }

  .step {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
  }

  .bar-row {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .foot-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}


/* ==========================================================================
   WordPress core integration
   These rules adapt the design system to core markup (block editor output,
   alignment classes, comments, pagination, admin bar). They come last so they
   can override the base layer without touching it.
   ========================================================================== */

/* --- Accessibility helpers (core duplicates .sr-only) --------------------- */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--ink-800);
  clip: auto !important;
  clip-path: none;
  color: var(--accent);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  height: auto;
  left: 12px;
  line-height: normal;
  padding: 14px 20px;
  text-decoration: none;
  top: 12px;
  width: auto;
  z-index: 100000;
}

/* --- Admin bar offsets for the sticky header ----------------------------- */
body.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/* --- Custom logo --------------------------------------------------------- */
.custom-logo-link {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.custom-logo-link img {
  width: auto;
  max-height: 38px;
}

/* --- Block editor alignment --------------------------------------------- */
.entry-content > * {
  margin-left: auto;
  margin-right: auto;
}

.entry-content > .alignwide {
  max-width: 1360px;
}

.entry-content > .alignfull {
  max-width: none;
  width: 100%;
}

.alignleft {
  float: left;
  margin: 0.4em 1.6em 1.2em 0;
}

.alignright {
  float: right;
  margin: 0.4em 0 1.2em 1.6em;
}

.aligncenter {
  display: block;
  margin: 1.6em auto;
}

.wp-caption {
  max-width: 100%;
}

.wp-caption-text,
.gallery-caption,
.entry-content figcaption {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-top: 0.7em;
}

.entry-content img,
.entry-content iframe,
.entry-content video {
  height: auto;
  max-width: 100%;
}

.entry-content .wp-block-image img {
  border: 1px solid var(--line);
}

.entry-content hr {
  margin: 2.5rem 0;
}

.entry-content blockquote {
  margin: 1.8rem 0;
  padding: 4px 0 4px 22px;
  border-left: 1px solid var(--accent);
  color: var(--text-2);
  font-size: 1.02rem;
}

.entry-content blockquote cite {
  display: block;
  margin-top: 0.7em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.entry-content code,
.entry-content pre {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  background: var(--ink-700);
  border: 1px solid var(--line-soft);
}

.entry-content code {
  padding: 2px 6px;
}

.entry-content pre {
  padding: 18px 20px;
  overflow-x: auto;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.entry-content th,
.entry-content td {
  border: 1px solid var(--line);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}

.entry-content th {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--ink-800);
}

/* --- Product images & cards --------------------------------------------- */
.p-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(79, 216, 192, 0.16), transparent 60%),
    radial-gradient(90% 80% at 88% 88%, rgba(224, 169, 104, 0.12), transparent 62%),
    linear-gradient(160deg, #0A1D28 0%, #07161F 55%, #050F16 100%);
  border-bottom: 1px solid var(--line-soft);
}

.p-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(230, 239, 243, 0.10) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.5;
  pointer-events: none;
}

.p-media img + .p-media-tag {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(5, 15, 22, 0.72);
  border: 1px solid var(--line);
  padding: 4px 8px;
}

/* Single product */
.product-top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.product-figure {
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(79, 216, 192, 0.14), transparent 58%),
    linear-gradient(160deg, #0A1D28, #050F16);
  overflow: hidden;
}

.product-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Pagination ---------------------------------------------------------- */
.pagination {
  margin-top: 2.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  margin-right: 4px;
  border: 1px solid var(--line);
  color: var(--text-2);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  border-color: var(--accent);
  color: var(--accent);
}

.pagination .page-numbers.dots {
  border-color: transparent;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
}

/* --- Search form --------------------------------------------------------- */
.search-form {
  display: flex;
  gap: 8px;
  max-width: 460px;
}

.search-form .search-field {
  flex: 1;
  min-height: 46px;
  padding: 0 14px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.9rem;
}

.search-form .search-submit {
  min-height: 46px;
  padding: 0 20px;
  background: var(--accent);
  border: 1px solid transparent;
  color: #04191A;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

/* --- Comments ------------------------------------------------------------ */
.comments-area {
  margin-top: 3rem;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
}

.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.comment-list .comment-body {
  border: 1px solid var(--line-soft);
  padding: 18px 20px;
  margin-bottom: 12px;
  font-size: 0.9rem;
}

.comment-list .children {
  list-style: none;
  padding-left: 24px;
}

.comment-metadata,
.comment-notes {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.comment-form label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  background: var(--ink-800);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
}

.comment-form .submit {
  background: var(--accent);
  border: 0;
  color: #04191A;
  padding: 12px 22px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

/* --- Widgets ------------------------------------------------------------- */
.widget {
  margin-bottom: 26px;
}

.widget-title {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 400;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.widget ul {
  list-style: none;
  padding: 0;
}

.widget li {
  margin-bottom: 8px;
  font-size: 0.86rem;
}

/* --- Certificate grid (Customizer driven) -------------------------------- */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.cert {
  background: var(--ink-900);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cert img {
  width: 100%;
  height: 90px;
  object-fit: contain;
  background: var(--ink-800);
  border: 1px solid var(--line-soft);
}

.cert .c-name {
  font-size: 0.92rem;
  color: var(--text);
}

.cert .c-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.7;
  color: var(--text-3);
  letter-spacing: 0.05em;
}

.cert .c-meta .ph {
  color: var(--copper);
}

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

  .product-top {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .cert-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Block editor: make core button/table classes inherit the look ------- */
.wp-block-button__link {
  border-radius: var(--radius);
  background: var(--accent);
  color: #04191A;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.9em 1.5em;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
}

/* --- Print --------------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .cta-band,
  .nav-toggle,
  .audit-btn {
    display: none !important;
  }

  body {
    background: #fff;
    color: #111;
  }
}