/* FIRMWAREFILE.UK — page.css */
.ff-page {
  --pg-bg: #eef2f6;
  --pg-surface: #ffffff;
  --pg-surface-2: #f6f8fb;
  --pg-border: rgba(15,23,42,.10);
  --pg-border-strong: rgba(15,23,42,.18);
  --pg-text: #101726;
  --pg-muted: #5f6977;
  --pg-faint: #8792a0;
  --pg-accent: #01696f;
  --pg-accent-hover: #0c4e54;
  --pg-hero: #0a0f1e;
  --pg-warning-bg: #fff8dd;
  --pg-warning-text: #7d5400;
  --pg-shadow: 0 8px 30px rgba(15,23,42,.05);
  --pg-r: 6px;
  --pg-r-lg: 10px;
  --pg-wrap: 1120px;
  --pg-narrow: 860px;
  background: var(--pg-bg);
  color: var(--pg-text);
  font-family: 'Inter', system-ui, sans-serif;
}

.ff-page-wrap {
  width: min(var(--pg-wrap), calc(100% - 32px));
  margin-inline: auto;
}

.ff-page-wrap--narrow {
  width: min(var(--pg-narrow), calc(100% - 32px));
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ff-page-hero {
  padding: 34px 0 28px;
  background: var(--pg-hero);
  color: #eaf0f6;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 24px 24px;
}

.ff-page-kicker {
  display: inline-block;
  padding: 4px 10px;
  margin-bottom: 14px;
  border-radius: 4px;
  background: rgba(78,201,208,.10);
  border: 1px solid rgba(78,201,208,.22);
  color: #8ee8ed;
  font-size: .73rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ff-page-title {
  margin: 0 0 12px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: clamp(1.9rem, 1.2rem + 2.1vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: #eaf0f6;
}

.ff-page-sub {
  max-width: 68ch;
  margin: 0 0 12px;
  color: rgba(234,240,246,.72);
  line-height: 1.8;
  font-size: 1rem;
}

.ff-page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: rgba(234,240,246,.52);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BODY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ff-page-body {
  padding: 28px 0 64px;
}

.ff-page-article {
  background: var(--pg-surface);
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-r-lg);
  padding: clamp(18px, 3vw, 40px);
  box-shadow: var(--pg-shadow);
}

.ff-page-thumb {
  margin: 0 0 20px;
  border-radius: var(--pg-r-lg);
  overflow: hidden;
}

.ff-page-thumb img {
  display: block;
  width: 100%;
  height: auto;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONTENT TYPOGRAPHY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ff-page-content {
  color: var(--pg-text);
}

.ff-page-content > *:first-child {
  margin-top: 0 !important;
}

.ff-page-content h2 {
  margin: 34px 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--pg-border);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--pg-text);
}

.ff-page-content h3 {
  margin: 24px 0 8px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: clamp(1rem, .95rem + .35vw, 1.25rem);
  line-height: 1.25;
  color: var(--pg-text);
}

.ff-page-content h4,
.ff-page-content h5,
.ff-page-content h6 {
  margin: 18px 0 8px;
  font-size: .84rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--pg-muted);
}

.ff-page-content p,
.ff-page-content li {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--pg-text);
}

.ff-page-content p {
  margin: 0 0 16px;
  max-width: 72ch;
}

.ff-page-content ul,
.ff-page-content ol {
  margin: 0 0 18px 0;
  padding: 0;
}

.ff-page-content ul {
  list-style: none;
}

.ff-page-content ul li {
  position: relative;
  padding: 5px 0 5px 20px;
}

.ff-page-content ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: .78em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pg-accent);
}

.ff-page-content ol {
  padding-left: 22px;
}

.ff-page-content li + li {
  margin-top: 2px;
}

.ff-page-content a {
  color: var(--pg-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 600;
}

.ff-page-content a:hover {
  color: var(--pg-accent-hover);
}

.ff-page-content strong {
  font-weight: 700;
}

.ff-page-content blockquote {
  margin: 18px 0;
  padding: 14px 16px;
  background: var(--pg-surface-2);
  border-left: 3px solid var(--pg-accent);
  border-radius: 0 var(--pg-r) var(--pg-r) 0;
}

.ff-page-content hr {
  border: 0;
  border-top: 1px solid var(--pg-border);
  margin: 28px 0;
}

.ff-page-content code {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: .84em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--pg-surface-2);
  border: 1px solid var(--pg-border);
  color: #b45309;
}

.ff-page-content pre {
  margin: 16px 0 20px;
  padding: 16px 18px;
  overflow-x: auto;
  background: #0f172a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--pg-r);
}

.ff-page-content pre code {
  padding: 0;
  border: 0;
  background: transparent;
  color: #dbe4ee;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TABLES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ff-page-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 22px;
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-r);
  overflow: hidden;
  font-size: .94rem;
}

.ff-page-content th,
.ff-page-content td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--pg-border);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}

.ff-page-content thead th {
  background: var(--pg-surface-2);
  color: var(--pg-muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 800;
  border-bottom: 2px solid var(--pg-border-strong);
}

.ff-page-content tbody tr:last-child td {
  border-bottom: 0;
}

.ff-page-content tbody tr:hover td {
  background: rgba(1,105,111,.04);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   IMAGES + CAPTIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ff-page-content img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--pg-r);
}

.ff-page-content figure {
  margin: 16px 0 20px;
}

.ff-page-content figcaption,
.ff-page-content .wp-caption-text {
  margin-top: 8px;
  font-size: .84rem;
  color: var(--pg-faint);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NOTICES / EMPHASIS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ff-page-content em {
  font-style: normal;
  color: var(--pg-warning-text);
  background: var(--pg-warning-bg);
  border: 1px solid rgba(125,84,0,.14);
  border-radius: var(--pg-r);
  padding: 2px 6px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAGE LINKS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ff-page-links {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
  color: var(--pg-muted);
  font-size: .88rem;
}

.ff-page-links a,
.ff-page-links span > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid var(--pg-border);
  text-decoration: none;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COMMENTS WRAP
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ff-page-comments {
  margin-top: 18px;
  background: var(--pg-surface);
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-r-lg);
  padding: clamp(18px, 3vw, 34px);
  box-shadow: var(--pg-shadow);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 680px) {
  .ff-page-body {
    padding: 18px 0 48px;
  }

  .ff-page-article,
  .ff-page-comments {
    padding: 16px;
  }

  .ff-page-content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}