@charset "UTF-8";
/*!
 * One More Game — Flat Design system stylesheet
 *
 * Implements the client-supplied "Flat Design" design system (/design-systems/flat-design/DESIGN.md).
 * Every token is inherited VERBATIM. The doc is Tailwind-flavoured; this is hand-written
 * CSS with custom properties, so each Tailwind utility is translated to an equivalent
 * rule of identical value (rounded-md -> 6px, h-14 -> 56px, hover:scale-105 -> scale(1.05)).
 *
 * Class prefix: .omgt-   Token prefix: --flt-
 *
 * NON-NEGOTIABLE (from the doc): zero box-shadow, zero blur, zero backdrop-filter,
 * sharp colour transitions, hierarchy from scale/size/weight only.
 *
 * Accessibility note (see tests/contrast-check.py): the doc requires WCAG AA. Measured
 * ratios forced three derived tints for *text-bearing fills only* — white on #3B82F6 is
 * 3.68:1, white on #10B981 is 2.54:1, white on #F59E0B is 2.15:1, all AA failures.
 * The doc itself references bg-blue-600 (its primary hover state) and green-100, so the
 * extended ramp below is in-system, not invented. The 500-level tokens remain the accent
 * colour for borders, bars, icons, focus rings and decoration — exactly as specified.
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* --- Colours: the doc's single light-mode palette, verbatim --- */
  --flt-bg: #ffffff;          /* Pure White — the canvas */
  --flt-fg: #111827;          /* Gray 900 — sharp high-contrast text */
  --flt-primary: #3b82f6;     /* Blue 500 — accent: borders, bars, icons, focus */
  --flt-secondary: #10b981;   /* Emerald 500 */
  --flt-accent: #f59e0b;      /* Amber 500 */
  --flt-muted: #f3f4f6;       /* Gray 100 — secondary backgrounds/blocks */
  --flt-border: #e5e7eb;      /* Gray 200 — used sparingly */
  --flt-surface: #ffffff;     /* A panel/card block. Dark mode makes it near-black. */

  /* --- Derived tints. Same hues, one step deeper. Only for fills behind text. --- */
  --flt-primary-strong: #2563eb;   /* 5.17:1 with white  (doc's own hover:bg-blue-600) */
  --flt-primary-deep: #1d4ed8;     /* 6.70:1 with white  — hover of primary-strong */
  --flt-primary-100: #dbeafe;
  --flt-primary-50: #eff6ff;

  --flt-secondary-strong: #047857; /* 5.48:1 with white  (emerald-700) */
  --flt-secondary-deep: #065f46;   /* 7.68:1 with white  — hover of secondary-strong */
  --flt-secondary-100: #d1fae5;
  --flt-secondary-50: #ecfdf5;

  --flt-accent-100: #fef3c7;
  --flt-accent-50: #fffbeb;
  --flt-accent-deep: #d97706;      /* 5.57:1 with --flt-fg — hover of accent fills */

  /* The text colour that belongs ON each strong fill. A token rather than a
     hard-coded white, because dark mode repaints the strong fills in light green
     and emerald, where the readable colour is black. --flt-on-accent is the amber
     case: that fill is amber in BOTH themes, so its text is the ink token, which
     is what those rules already asked for. */
  --flt-on-primary: #ffffff;
  --flt-on-secondary: #ffffff;
  --flt-on-accent: var(--flt-fg);

  /* Secondary text greys, confined to secondary text and hairline borders */
  --flt-fg-70: rgba(17, 24, 39, 0.70);
  --flt-fg-55: rgba(17, 24, 39, 0.55);
  --flt-on-ink-70: rgba(255, 255, 255, 0.70);

  /* --- Radius: 6px / 8px only. Pills are reserved for tags. --- */
  --flt-radius-md: 6px;
  --flt-radius-lg: 8px;
  --flt-radius-full: 9999px;

  /* --- Typography: Outfit (self-hosted variable woff2) --- */
  --flt-font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --flt-track-tight: -0.02em;
  --flt-track-wide: 0.05em;

  /* --- Motion: "digital, snappy, direct" --- */
  --flt-dur: 200ms;
  --flt-dur-lg: 300ms;
  --flt-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Layout: max-w-7xl --- */
  --flt-container: 1280px;
  --flt-gutter: 24px;
  --flt-sec-y: 88px;
}

/* --- Dark mode: palette -------------------------------------------------
   Black canvas plus the client's wordmark green (#66FF00). These values were
   contrast-verified as a set and are deliberately NOT derived from the light
   ramp: the greens and the amber carry BLACK text, not white. */
[data-theme="dark"] {
  --flt-bg: #000000;
  --flt-surface: #0E0E10;
  --flt-muted: #141417;
  --flt-fg: #FFFFFF;
  --flt-fg-70: rgba(255,255,255,0.72);
  --flt-fg-55: rgba(255,255,255,0.56);
  --flt-border: #2A2A2F;
  --flt-primary: #66FF00;
  --flt-primary-strong: #66FF00;
  --flt-primary-deep: #4FCC00;
  --flt-on-primary: #000000;
  --flt-secondary: #10B981;
  --flt-secondary-strong: #10B981;
  --flt-on-secondary: #000000;
  --flt-accent: #F59E0B;
  --flt-on-accent: #000000;
  --flt-on-ink-70: rgba(255,255,255,0.72);
}

/* The 50/100 tints are LIGHT surfaces: they exist to carry ink text on a washed
   block. Left alone in dark mode they would paint a near-white card under white
   text, so they keep their hue at a low alpha over the black canvas. :root is
   untouched — this block only ever applies to the dark theme. */
[data-theme="dark"] {
  --flt-primary-50: rgba(102, 255, 0, 0.08);
  --flt-primary-100: rgba(102, 255, 0, 0.16);
  --flt-secondary-50: rgba(16, 185, 129, 0.10);
  --flt-secondary-100: rgba(16, 185, 129, 0.20);
  --flt-accent-50: rgba(245, 158, 11, 0.10);
  --flt-accent-100: rgba(245, 158, 11, 0.20);
}

/* --- Dark mode: the ink token, and the fills that ride on it -------------
   --flt-fg is the whole "solid block" language of this theme, and it inverts:
   ink in light, white in dark. Two consequences follow.

   1. An ink FILL holding white text would become white-on-white, so it becomes
      --flt-surface, the near-black panel token added for exactly this. Those are
      the ink CHROME panels, the ones whose children are --flt-on-ink-70: the
      footer, the ink header, the ink section and card, the review head and the
      ink bento cell. The small ink CHIPS keep their fill and flip their TEXT
      instead — see the --flt-on-primary substitutions in the rules below, which
      resolve correctly in both themes with no override at all.
   2. The coloured bands keep their hue in dark, so their light-mode ink text
      would turn white on a light fill. They take their band's own on-colour. */
[data-theme="dark"] .omgt-footer,
[data-theme="dark"] .omgt-header--ink,
[data-theme="dark"] .omgt-section--ink,
[data-theme="dark"] .omgt-card--ink,
[data-theme="dark"] .omgt-review__head,
[data-theme="dark"] .omgt-bento__cell--c4 { background: var(--flt-surface); }
[data-theme="dark"] .omgt-header--ink { border-bottom-color: var(--flt-surface); }
[data-theme="dark"] .omgt-header--ink .omgt-nav .sub-menu { background: var(--flt-surface); }

[data-theme="dark"] .omgt-section--secondary,
[data-theme="dark"] .omgt-section--secondary .omgt-eyebrow,
[data-theme="dark"] .omgt-bento__cell--c2,
[data-theme="dark"] .omgt-bento__cell--c2 .omgt-bento__meta { color: var(--flt-on-secondary); }
[data-theme="dark"] .omgt-section--accent .omgt-eyebrow,
[data-theme="dark"] .omgt-bento__cell--c3 .omgt-bento__meta { color: var(--flt-on-accent); }
[data-theme="dark"] .omgt-bento__cell--c1 .omgt-bento__excerpt,
[data-theme="dark"] .omgt-bento__cell--c1 .omgt-bento__meta { color: var(--flt-on-primary); }

/* Same story for ink-coloured text on a coloured band: the stat row's number and
   label, and the CTA's copy, are ink in light and would go white on a light fill
   in dark. */
[data-theme="dark"] .omgt-section--primary .omgt-stat--ink .omgt-stat__num,
[data-theme="dark"] .omgt-section--primary .omgt-stat__label { color: var(--flt-on-primary); }
[data-theme="dark"] .omgt-section--secondary .omgt-stat--ink .omgt-stat__num,
[data-theme="dark"] .omgt-section--secondary .omgt-stat__label { color: var(--flt-on-secondary); }
[data-theme="dark"] .omgt-section--accent .omgt-stat--ink .omgt-stat__num,
[data-theme="dark"] .omgt-section--accent .omgt-stat__label,
[data-theme="dark"] .omgt-cta .omgt-lead,
[data-theme="dark"] .omgt-cta .omgt-eyebrow { color: var(--flt-on-accent); }

/* The primary band is green in dark, so its 72%-white lead and eyebrow, and its
   white links, all but vanish on it. The hover keeps a visible change. */
[data-theme="dark"] .omgt-section--primary .omgt-eyebrow,
[data-theme="dark"] .omgt-section--primary .omgt-lead { color: var(--flt-on-primary); }
[data-theme="dark"] .omgt-section--primary a:hover { color: var(--flt-bg); text-decoration: underline; text-decoration-thickness: 2px; }
[data-theme="dark"] .omgt-section--ink a:hover { color: var(--flt-primary); }

/* The score box's denominator sits on four different light fills in dark (green,
   emerald, amber and the white ink block), so it takes the dark on-colour. The
   amber band keeps its own ink-75% rule, which is later in the file. */
[data-theme="dark"] .omgt-review__score .omgt-review__den { color: rgba(0, 0, 0, 0.85); }

/* Blocks that are WHITE with ink text in light keep that look in dark — the chip
   is the constant, the page is what inverts — so only their text flips, and
   --flt-bg is black there. */
[data-theme="dark"] .omgt-bento__cell--c1 .omgt-tag,
[data-theme="dark"] .omgt-bento__cell--c4 .omgt-tag,
[data-theme="dark"] .omgt-bento__cell--over .omgt-tag { color: var(--flt-bg); }
[data-theme="dark"] .omgt-btn--white { color: var(--flt-bg); }
[data-theme="dark"] .omgt-btn--outline-light:hover { color: var(--flt-bg); }
[data-theme="dark"] .omgt-review__pros li::before { color: var(--flt-on-secondary); }
[data-theme="dark"] .omgt-review__cons li::before { color: var(--flt-on-accent); }
[data-theme="dark"] .omgt-input:focus { background: var(--flt-surface); }
[data-theme="dark"] .omgt-qr .gp-qr-note { color: rgba(0, 0, 0, 0.56); }

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--flt-bg);
  color: var(--flt-fg);
  font-family: var(--flt-font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg,
video,
iframe { max-width: 100%; height: auto; display: block; }

img { border-style: none; }

a {
  color: var(--flt-primary-strong);
  text-decoration: none;
  transition: color var(--flt-dur) var(--flt-ease);
}
a:hover { color: var(--flt-fg); }

hr {
  border: 0;
  border-top: 2px solid var(--flt-border);
  margin: 40px 0;
}

/* Hard, high-contrast focus. No glow, no blur — the doc forbids blurred rings. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--flt-primary);
  outline-offset: 2px;
  border-radius: var(--flt-radius-md);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 999;
  background: var(--flt-fg);
  color: var(--flt-on-primary);
  padding: 12px 20px;
  border-radius: var(--flt-radius-md);
  font-weight: 600;
  transition: top var(--flt-dur) var(--flt-ease);
}
.skip-link:focus { top: 16px; color: var(--flt-on-primary); }

/* ==========================================================================
   3. LAYOUT PRIMITIVES — rigid 12-column grid, max-w-7xl
   ========================================================================== */

.omgt-container {
  width: 100%;
  max-width: var(--flt-container);
  margin-inline: auto;
  padding-inline: var(--flt-gutter);
}

.omgt-section {
  position: relative;
  padding-block: var(--flt-sec-y);
  overflow: hidden; /* clips the decorative geometry */
}
.omgt-section--tight { padding-block: 56px; }

/* Alternating backgrounds. Sharp transitions, never blurred. */
.omgt-section--white   { background: var(--flt-bg); }
.omgt-section--muted   { background: var(--flt-muted); }
.omgt-section--primary { background: var(--flt-primary-strong); color: var(--flt-on-primary); }
.omgt-section--secondary { background: var(--flt-secondary); color: var(--flt-fg); }
.omgt-section--accent  { background: var(--flt-accent); color: var(--flt-on-accent); }
.omgt-section--ink     { background: var(--flt-fg); color: #fff; }

.omgt-section--primary .omgt-eyebrow,
.omgt-section--ink .omgt-eyebrow { color: var(--flt-on-ink-70); }
.omgt-section--secondary .omgt-eyebrow,
.omgt-section--accent .omgt-eyebrow { color: var(--flt-fg-70); }

/* Blue in light, green in dark: the first takes its fill's on-colour, the
   ink section keeps white because its fill is a dark panel in both themes. */
.omgt-section--primary a { color: var(--flt-on-primary); }
.omgt-section--ink a { color: #fff; }
.omgt-section--primary a:hover,
.omgt-section--ink a:hover { color: var(--flt-accent-100); }

/* 12-column base grid. Elements align perfectly. */
.omgt-grid { display: grid; gap: 24px; }
.omgt-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.omgt-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.omgt-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.omgt-grid--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.omgt-span-3  { grid-column: span 3; }
.omgt-span-4  { grid-column: span 4; }
.omgt-span-6  { grid-column: span 6; }
.omgt-span-8  { grid-column: span 8; }
.omgt-span-12 { grid-column: span 12; }

.omgt-stack { display: flex; flex-direction: column; }
.omgt-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.omgt-between { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ==========================================================================
   4. TYPOGRAPHY — text size and weight bear the load of hierarchy
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.omgt-h1, .omgt-h2, .omgt-h3, .omgt-h4 {
  margin: 0 0 16px;
  font-family: var(--flt-font);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--flt-track-tight);
  color: inherit;
}

.omgt-h1 { font-size: clamp(38px, 6.2vw, 78px); }
.omgt-h2 { font-size: clamp(30px, 4.2vw, 50px); }
.omgt-h3 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; }
.omgt-h4 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }

p { margin: 0 0 20px; }
p:last-child { margin-bottom: 0; }

.omgt-lead {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.6;
  font-weight: 400;
  color: var(--flt-fg-70);
  max-width: 62ch;
}
.omgt-section--primary .omgt-lead,
.omgt-section--ink .omgt-lead { color: var(--flt-on-ink-70); }

.omgt-eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--flt-track-wide);
  text-transform: uppercase;
  color: var(--flt-fg-55);
}

.omgt-small { font-size: 14px; color: var(--flt-fg-70); }
.omgt-meta  { font-size: 13px; font-weight: 500; letter-spacing: 0.01em; color: var(--flt-fg-55); }

.omgt-underline {
  position: relative;
  display: inline-block;
}
.omgt-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.06em;
  height: 0.18em;
  background: var(--flt-accent);
  z-index: -1;
}

/* Section header block */
.omgt-sechead { max-width: 760px; margin-bottom: 48px; }
.omgt-sechead--center { margin-inline: auto; text-align: center; }

/* ==========================================================================
   5. DECORATIVE GEOMETRY — visual interest without depth
   Poster-style flat shapes, low opacity, absolutely positioned.
   ========================================================================== */

.omgt-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.omgt-deco--circle { border-radius: 50%; }
.omgt-deco--ring   { border-radius: 50%; background: none !important; }

/* On a coloured section the decoration is white; on white it takes the accent hue. */
.omgt-section--primary .omgt-deco,
.omgt-section--secondary .omgt-deco,
.omgt-section--accent .omgt-deco,
.omgt-section--ink .omgt-deco { background-color: #fff; }
.omgt-section--primary .omgt-deco--ring,
.omgt-section--secondary .omgt-deco--ring,
.omgt-section--accent .omgt-deco--ring,
.omgt-section--ink .omgt-deco--ring { border-color: #fff; }

/* Gradients: the design doc permits "subtle directional gradients for background
   decoration... never on buttons or cards". Exactly one is kept —
   .omgt-bento__shade, the scrim that makes white text legible over photography,
   which is decoration on a container and never sits on a card or button edge.
   An earlier .omgt-gradient-fade utility was removed: it was never used by any
   template, and dead CSS in a stylesheet governed by a prohibition list is how
   that list stops meaning anything. tests/contrast-check.py now asserts the rule. */
.omgt-section > .omgt-container { position: relative; z-index: 1; }

/* ==========================================================================
   6. BUTTONS — flat, bold, scale on hover. No shadow, ever.
   ========================================================================== */

.omgt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;                       /* h-14 */
  padding: 0 30px;
  border: 0;
  border-radius: var(--flt-radius-md);
  font-family: var(--flt-font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  transition: all var(--flt-dur) var(--flt-ease);
}
.omgt-btn:hover { transform: scale(1.05); }
.omgt-btn:active { transform: scale(0.99); }
.omgt-btn svg { width: 18px; height: 18px; flex: none; }

.omgt-btn--primary {
  background: var(--flt-primary-strong);
  color: var(--flt-on-primary);
}
.omgt-btn--primary:hover { background: var(--flt-primary-deep); color: var(--flt-on-primary); }

.omgt-btn--secondary {
  background: var(--flt-muted);
  color: var(--flt-fg);
}
.omgt-btn--secondary:hover { background: var(--flt-border); color: var(--flt-fg); }

.omgt-btn--accent {
  background: var(--flt-accent);
  color: var(--flt-on-accent);
}
.omgt-btn--accent:hover { background: var(--flt-accent-deep); color: var(--flt-on-accent); }

.omgt-btn--outline {
  background: transparent;
  border: 4px solid var(--flt-primary-strong);
  color: var(--flt-primary-strong);
  padding: 0 26px;
}
.omgt-btn--outline:hover {
  background: var(--flt-primary-strong);
  color: var(--flt-on-primary);
}

/* On a blue/ink section: outline in white, fills white with dark text. */
.omgt-btn--outline-light {
  background: transparent;
  border: 4px solid #fff;
  color: #fff;
  padding: 0 26px;
}
.omgt-btn--outline-light:hover { background: #fff; color: var(--flt-fg); }

.omgt-btn--white { background: #fff; color: var(--flt-fg); }
.omgt-btn--white:hover { background: var(--flt-muted); color: var(--flt-fg); }

.omgt-btn--lg { height: 64px; padding: 0 36px; font-size: 17px; }   /* h-16 */
.omgt-btn--sm { height: 44px; padding: 0 20px; font-size: 14px; }
.omgt-btn--sm svg { width: 16px; height: 16px; }
.omgt-btn--block { width: 100%; }

/* Text link with an arrow that does not move on hover — the doc's motion is
   scale/colour only; a sliding arrow would be a layout shift, not a transition. */
.omgt-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--flt-primary-strong);
}
.omgt-link-arrow svg { transition: transform var(--flt-dur) var(--flt-ease); }
.omgt-link-arrow:hover svg { transform: scale(1.25); }

/* ==========================================================================
   7. TAGS / PILLS — the ONLY fully-rounded shape in the system
   ========================================================================== */

.omgt-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: var(--flt-radius-full);
  background: var(--flt-muted);
  color: var(--flt-fg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--flt-track-wide);
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
}
.omgt-tag--primary   { background: var(--flt-primary-strong); color: var(--flt-on-primary); }
.omgt-tag--secondary { background: var(--flt-secondary-strong); color: var(--flt-on-secondary); }
.omgt-tag--accent    { background: var(--flt-accent); color: var(--flt-on-accent); }
.omgt-tag--ink       { background: var(--flt-fg); color: var(--flt-on-primary); }
.omgt-tag--outline   { background: transparent; border: 2px solid var(--flt-border); color: var(--flt-fg-70); }
.omgt-tag--score     { font-variant-numeric: tabular-nums; }

.omgt-tagrow { display: flex; flex-wrap: wrap; gap: 8px; }

/* ==========================================================================
   8. CARDS — "color block". Solid fill, generous padding, no border, no shadow.
   ========================================================================== */

.omgt-card {
  position: relative;
  display: block;
  background: var(--flt-bg);
  border-radius: var(--flt-radius-lg);
  padding: 28px;
  color: var(--flt-fg);
  text-decoration: none;
  transition: all var(--flt-dur) var(--flt-ease);
  overflow: hidden;
}
.omgt-card:hover { transform: scale(1.02); }
.omgt-card--pad-lg { padding: 40px; }
.omgt-card--flat { overflow: visible; }

.omgt-card--tint-primary   { background: var(--flt-primary-50); }
.omgt-card--tint-primary:hover { background: var(--flt-primary-100); }
.omgt-card--tint-secondary { background: var(--flt-secondary-50); }
.omgt-card--tint-secondary:hover { background: var(--flt-secondary-100); }
.omgt-card--tint-accent    { background: var(--flt-accent-50); }
.omgt-card--tint-accent:hover { background: var(--flt-accent-100); }
.omgt-card--tint-muted     { background: var(--flt-muted); }
.omgt-card--tint-muted:hover { background: var(--flt-border); }
.omgt-card--ink            { background: var(--flt-fg); color: #fff; }
.omgt-card--ink .omgt-card__text { color: var(--flt-on-ink-70); }

.omgt-card__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: inherit;
}
.omgt-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--flt-fg-70);
}

/* Icon in a solid coloured circle, scales on card hover */
.omgt-icon-badge {
  display: grid;
  place-items: center;
  width: 56px;                        /* h-14 */
  height: 56px;
  margin-bottom: 20px;
  border-radius: var(--flt-radius-full);
  background: var(--flt-surface);
  color: var(--flt-primary-strong);
  transition: transform var(--flt-dur) var(--flt-ease);
}
.omgt-icon-badge svg { width: 26px; height: 26px; }
.omgt-card:hover .omgt-icon-badge { transform: scale(1.1); }
.omgt-icon-badge--lg { width: 64px; height: 64px; }   /* h-16 */
.omgt-icon-badge--lg svg { width: 30px; height: 30px; }
.omgt-icon-badge--primary   { background: var(--flt-primary-strong); color: var(--flt-on-primary); }
.omgt-icon-badge--secondary { background: var(--flt-secondary-strong); color: var(--flt-on-secondary); }
.omgt-icon-badge--accent    { background: var(--flt-accent); color: var(--flt-on-accent); }
.omgt-icon-badge--ink       { background: var(--flt-fg); color: var(--flt-on-primary); }
.omgt-icon-badge--tint      { background: var(--flt-primary-100); color: var(--flt-primary-deep); }

/* ==========================================================================
   9. STAT ROW — multi-colour stat numbers (a doc "bold choice")
   ========================================================================== */

.omgt-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.omgt-stat__num {
  display: block;
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 800;
  letter-spacing: var(--flt-track-tight);
  line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.omgt-stat--primary   .omgt-stat__num { color: var(--flt-primary-strong); }
.omgt-stat--secondary .omgt-stat__num { color: var(--flt-secondary-strong); }
.omgt-stat--accent    .omgt-stat__num { color: var(--flt-accent-deep); }
.omgt-stat--ink       .omgt-stat__num { color: var(--flt-fg); }
.omgt-section--ink .omgt-stat--primary   .omgt-stat__num { color: var(--flt-primary); }
.omgt-section--ink .omgt-stat--secondary .omgt-stat__num { color: var(--flt-secondary); }
.omgt-section--ink .omgt-stat--accent    .omgt-stat__num { color: var(--flt-accent); }
.omgt-section--ink .omgt-stat--ink       .omgt-stat__num { color: #fff; }
.omgt-stat__label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--flt-track-wide);
  text-transform: uppercase;
  color: var(--flt-fg-55);
}
.omgt-section--ink .omgt-stat__label { color: var(--flt-on-ink-70); }

/* ==========================================================================
   10. BENTO GRID — the homepage hero. Rigid 4-col grid, poster blocks.
   ========================================================================== */

.omgt-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 200px;
  gap: 16px;
}

.omgt-bento__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  grid-column: span 1;
  grid-row: span 1;
  border-radius: var(--flt-radius-lg);
  overflow: hidden;
  background: var(--flt-muted);
  color: var(--flt-fg);
  text-decoration: none;
  transition: transform var(--flt-dur) var(--flt-ease);
}
.omgt-bento__cell:hover { transform: scale(1.02); color: var(--flt-fg); }

/* Feature cell: 2x2 — the doc's "dramatic scale" idea applied to a grid. */
.omgt-bento__cell--featured { grid-column: span 2; grid-row: span 2; }
.omgt-bento__cell--wide     { grid-column: span 2; }
.omgt-bento__cell--tall     { grid-row: span 2; }

.omgt-bento__media,
.omgt-bento__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.omgt-bento__media--placeholder {
  display: grid;
  place-items: center;
  background: var(--flt-muted);
  color: var(--flt-fg-55);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: var(--flt-track-wide);
  text-transform: uppercase;
}

/* The scrim that makes white text legible over photography. A solid-ish flat
   block, not a soft vignette — but it is a gradient, so it is *decoration on a
   container*, which the doc allows; never on a button or card edge. */
.omgt-bento__cell--over .omgt-bento__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17, 24, 39, 0.92) 0%, rgba(17, 24, 39, 0.55) 45%, rgba(17, 24, 39, 0) 100%);
}

.omgt-bento__body {
  position: relative;
  z-index: 2;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.omgt-bento__cell--over .omgt-bento__body { color: #fff; }
.omgt-bento__cell--over .omgt-bento__title { color: #fff; }
.omgt-bento__cell--over .omgt-bento__excerpt { color: rgba(255, 255, 255, 0.82); }
.omgt-bento__cell--over:hover .omgt-bento__title { color: #fff; }

.omgt-bento__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: inherit;
}
.omgt-bento__cell--featured .omgt-bento__title { font-size: clamp(21px, 2.1vw, 28px); }
.omgt-bento__excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--flt-fg-70);
}

/* Solid-colour bento cells: the poster look with no imagery at all. */
.omgt-bento__cell--solid { justify-content: space-between; }
/* c1 and c4 carry white text on their own ink/blue fills; c2 and c3 carry INK
   text on light emerald/amber, so they get their band's on-colour in the dark
   overrides in section 1 rather than a token that would break light mode. */
.omgt-bento__cell--c1 { background: var(--flt-primary-strong); color: var(--flt-on-primary); }
.omgt-bento__cell--c2 { background: var(--flt-secondary); color: var(--flt-fg); }
.omgt-bento__cell--c3 { background: var(--flt-accent); color: var(--flt-on-accent); }
.omgt-bento__cell--c4 { background: var(--flt-fg); color: #fff; }
.omgt-bento__cell--c1 .omgt-bento__title { color: var(--flt-on-primary); }
.omgt-bento__cell--c4 .omgt-bento__title { color: #fff; }
.omgt-bento__cell--c1 .omgt-bento__excerpt { color: rgba(255, 255, 255, 0.82); }
.omgt-bento__cell--c4 .omgt-bento__excerpt { color: var(--flt-on-ink-70); }
.omgt-bento__cell--c1 .omgt-tag,
.omgt-bento__cell--c4 .omgt-tag { background: #fff; color: var(--flt-fg); }
.omgt-bento__cell--c2 .omgt-tag,
.omgt-bento__cell--c3 .omgt-tag { background: var(--flt-fg); color: var(--flt-on-primary); }

/* The big flat rank numeral that anchors a solid cell */
.omgt-bento__rank {
  font-size: 54px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--flt-track-tight);
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}

/* ==========================================================================
   11. POST CARDS (archives, related, panels)
   ========================================================================== */

.omgt-postgrid { display: grid; gap: 24px; }
.omgt-postgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.omgt-postgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.omgt-postgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.omgt-post {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: var(--flt-radius-lg);
  background: var(--flt-bg);
  text-decoration: none;
  color: var(--flt-fg);
  transition: all var(--flt-dur) var(--flt-ease);
}
.omgt-post:hover { transform: scale(1.02); }
.omgt-post--tint { background: var(--flt-muted); }
.omgt-post--tint:hover { background: var(--flt-border); }
.omgt-post--tint-primary { background: var(--flt-primary-50); }
.omgt-post--tint-primary:hover { background: var(--flt-primary-100); }
.omgt-post--tint-secondary { background: var(--flt-secondary-50); }
.omgt-post--tint-secondary:hover { background: var(--flt-secondary-100); }
.omgt-post--tint-accent { background: var(--flt-accent-50); }
.omgt-post--tint-accent:hover { background: var(--flt-accent-100); }

.omgt-post__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--flt-radius-md);
  overflow: hidden;
  background: var(--flt-muted);
}
.omgt-post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.omgt-post__body { display: flex; flex-direction: column; gap: 10px; }
.omgt-post__title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: inherit;
}
.omgt-post__excerpt { margin: 0; font-size: 15px; line-height: 1.6; color: var(--flt-fg-70); }
.omgt-post__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Horizontal list row */
.omgt-listrow {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  border-top: 2px solid var(--flt-border);
  text-decoration: none;
  color: var(--flt-fg);
}
.omgt-listrow:last-child { border-bottom: 2px solid var(--flt-border); }
.omgt-listrow:hover { color: var(--flt-primary-strong); }
.omgt-listrow__thumb {
  aspect-ratio: 16 / 10;
  border-radius: var(--flt-radius-md);
  overflow: hidden;
  background: var(--flt-muted);
}
.omgt-listrow__thumb img { width: 100%; height: 100%; object-fit: cover; }
.omgt-listrow__title { margin: 0 0 6px; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }

/* ==========================================================================
   12. REVIEW BOX — flat colour-block verdict. No shadow, no gradient, no bevel.
   Score ramp is a 3-step *in-system* encoding: emerald (strong) / amber (mid) /
   ink (low). The doc has no red token, so a low score inverts to the dark block
   rather than importing an off-system hue.
   ========================================================================== */

.omgt-review {
  position: relative;
  margin: 40px 0;
  border-radius: var(--flt-radius-lg);
  overflow: hidden;
  background: var(--flt-bg);
}
.omgt-review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 28px;
  background: var(--flt-fg);
  color: #fff;
}
.omgt-review__head h3,
.omgt-review__head .omgt-review__heading {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: var(--flt-track-tight);
  color: #fff;
}
.omgt-review__brand {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--flt-track-wide);
  text-transform: uppercase;
  color: var(--flt-on-ink-70);
}

.omgt-review__scoreboard {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  align-items: stretch;
}
.omgt-review__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 32px 36px;
  background: var(--flt-primary-strong);
  color: var(--flt-on-primary);
  text-align: center;
  min-width: 190px;
}
.omgt-review__score .omgt-review__num {
  display: block;
  font-size: 68px;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--flt-on-primary);
}
.omgt-review__score .omgt-review__den {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--flt-track-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

/* Score ramp applied to the scoreboard fill */
.omgt-review--high  .omgt-review__score { background: var(--flt-secondary-strong); color: var(--flt-on-secondary); }
.omgt-review--mid   .omgt-review__score { background: var(--flt-accent); color: var(--flt-on-accent); }
.omgt-review--mid   .omgt-review__score .omgt-review__num { color: var(--flt-on-accent); }
.omgt-review--mid   .omgt-review__score .omgt-review__den { color: rgba(17, 24, 39, 0.75); }
.omgt-review--low   .omgt-review__score { background: var(--flt-fg); }

.omgt-review__criteria {
  padding: 28px 32px;
  background: var(--flt-muted);
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}
.omgt-crit {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr 46px;
  align-items: center;
  gap: 14px;
}
.omgt-crit__label { font-size: 14px; font-weight: 600; }
.omgt-crit__track {
  position: relative;
  height: 16px;
  border-radius: var(--flt-radius-md);
  background: var(--flt-border);
  overflow: hidden;
}
/* A 2px ink boundary, not decoration.
   The three band colours span dark → mid → light, so no single track colour can
   sit at 3:1 against all of them: measured, amber (#F59E0B) on the gray-200
   track is only 1.73:1, which makes a mid-band bar almost invisible. Outlining
   the fill puts a consistent 14.33:1 boundary between bar and track for every
   band. box-sizing keeps the bar's *length* exactly score*10% — the outline
   must not inflate it, or the bar would misreport the score. */
.omgt-crit__fill {
  display: block;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid var(--flt-fg);
  border-radius: var(--flt-radius-md);
}
.omgt-crit__fill--high { background: var(--flt-secondary-strong); }
.omgt-crit__fill--mid  { background: var(--flt-accent); }
.omgt-crit__fill--low  { background: var(--flt-fg); }
.omgt-crit__val {
  font-size: 15px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.omgt-review__verdict {
  padding: 26px 32px;
  border-top: 2px solid var(--flt-border);
  font-size: 17px;
  line-height: 1.65;
}
.omgt-review__verdict b { font-weight: 800; letter-spacing: var(--flt-track-tight); }

.omgt-review__pc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 2px solid var(--flt-border);
}
.omgt-review__pc > div { padding: 28px 32px; }
.omgt-review__pc h4 {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--flt-track-wide);
  text-transform: uppercase;
}
.omgt-review__pros { background: var(--flt-secondary-50); }
.omgt-review__pros h4 { color: var(--flt-secondary-strong); }
.omgt-review__cons { background: var(--flt-accent-50); }
.omgt-review__cons h4 { color: var(--flt-accent-deep); }

.omgt-review__pc ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.omgt-review__pc li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  line-height: 1.55;
}
.omgt-review__pc li::before {
  position: absolute;
  left: 0; top: 2px;
  width: 18px; height: 18px;
  border-radius: var(--flt-radius-full);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.omgt-review__pros li::before { content: "\2713"; background: var(--flt-secondary-strong); }
.omgt-review__cons li::before { content: "\2212"; background: var(--flt-accent-deep); }

.omgt-review__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 26px 32px;
  background: var(--flt-muted);
  border-top: 2px solid var(--flt-border);
}
.omgt-review__price {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: var(--flt-track-tight);
  font-variant-numeric: tabular-nums;
}
.omgt-review__disclosure {
  display: block;
  width: 100%;
  font-size: 12.5px;
  color: var(--flt-fg-55);
  margin: 0;
}

/* ==========================================================================
   13. FAQ ACCORDION — thick border-2 between items, blue accent bar
   ========================================================================== */

.omgt-faq {
  border-top: 2px solid var(--flt-fg);
}
.omgt-faq__item { border-bottom: 2px solid var(--flt-fg); }

.omgt-faq__trigger {
  display: grid;
  grid-template-columns: 34px 1fr 26px;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 26px 8px;
  background: none;
  border: 0;
  border-left: 0 solid transparent;
  font-family: var(--flt-font);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-align: left;
  color: var(--flt-fg);
  cursor: pointer;
  transition: all var(--flt-dur) var(--flt-ease);
}
.omgt-faq__trigger:hover { background: var(--flt-muted); padding-left: 20px; border-left-width: 6px; border-left-color: var(--flt-primary); }

.omgt-faq__indicator {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--flt-radius-full);
  background: var(--flt-fg);
  color: var(--flt-on-primary);
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  transition: transform var(--flt-dur) var(--flt-ease), background-color var(--flt-dur) var(--flt-ease);
}
.omgt-faq__item--open .omgt-faq__indicator { background: var(--flt-primary-strong); transform: rotate(180deg); }

.omgt-faq__chev { display: grid; place-items: center; color: var(--flt-fg-55); transition: transform var(--flt-dur) var(--flt-ease); }
.omgt-faq__item--open .omgt-faq__chev { transform: rotate(180deg); color: var(--flt-primary-strong); }

.omgt-faq__panel { overflow: hidden; }
.omgt-faq__panel-inner {
  padding: 4px 8px 30px 60px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--flt-fg-70);
}
.omgt-faq__panel-inner > :last-child { margin-bottom: 0; }

/* Editor-only team note. Rendered solely for logged-in editors. */
.omgt-faq__note {
  margin: 18px 0 0;
  padding: 12px 16px;
  border-radius: var(--flt-radius-md);
  background: var(--flt-accent-100);
  font-size: 14px;
  color: var(--flt-fg);
}

/* Progressive enhancement: content is server-rendered and visible with JS off.
   The script adds .omgt-faq--js to the root and collapses items. */
.omgt-faq--js .omgt-faq__panel { display: none; }
.omgt-faq--js .omgt-faq__item--open > .omgt-faq__panel { display: block; }

/* ==========================================================================
   14. SECTIONS: hero, CTA band, newsletter, stats band
   ========================================================================== */

.omgt-hero { position: relative; background: var(--flt-primary-strong); color: var(--flt-on-primary); padding-block: 76px 84px; overflow: hidden; }
.omgt-hero__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.omgt-hero h1, .omgt-hero .omgt-h1 { color: var(--flt-on-primary); }
.omgt-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; }

.omgt-hero__media {
  position: relative;
  border-radius: var(--flt-radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(255, 255, 255, 0.12);
}
.omgt-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.omgt-hero__badge {
  position: absolute;
  left: 0; bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--flt-accent);
  color: var(--flt-on-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--flt-track-wide);
  text-transform: uppercase;
  border-radius: 0 var(--flt-radius-md) 0 0;
}

.omgt-cta { position: relative; background: var(--flt-accent); color: var(--flt-on-accent); overflow: hidden; }
.omgt-cta__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 40px; align-items: center; }

.omgt-newsletter { display: flex; gap: 12px; max-width: 520px; width: 100%; flex-wrap: wrap; }
.omgt-input {
  flex: 1 1 220px;
  /* `width:100%` + `box-sizing` so the class also works STANDALONE, not only
     inside the flex newsletter row. WordPress renders the comment fields as
     plain blocks, where a flex-basis alone would leave a ~200px default-sized
     input sitting in the corner of the form. */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: 56px;
  padding: 0 20px;
  background: var(--flt-muted);
  border: 2px solid transparent;
  border-radius: var(--flt-radius-md);
  font-family: var(--flt-font);
  font-size: 16px;
  color: var(--flt-fg);
  transition: all var(--flt-dur) var(--flt-ease);
}
.omgt-input::placeholder { color: var(--flt-fg-55); }
.omgt-input:focus {
  background: #fff;
  border-color: var(--flt-primary);
  outline: none;
}

/* ==========================================================================
   15. HEADER
   ========================================================================== */

.omgt-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--flt-bg);
  border-bottom: 2px solid var(--flt-fg);
}
.omgt-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 76px;
}
.omgt-header--static { position: static; }
.omgt-header--shrink .omgt-header__bar { min-height: 62px; }

.omgt-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--flt-fg); }
.omgt-brand img { max-height: 40px; width: auto; }
.omgt-header--shrink .omgt-brand img { max-height: 32px; }

/* The light and dark lockups. Both ship in the DOM — light is the WordPress
   custom logo (or the text mark), dark is assets/img/logo-dark.png — and CSS
   picks one per theme. display:none, not visibility, so the inactive lockup
   costs no layout and is not read out. The height override in omgt_dynamic_css()
   targets .omgt-brand img, so omgt_logo_height sizes both. */
.omgt-brand__logo { align-items: center; gap: 12px; }
.omgt-brand__logo--light { display: inline-flex; }
.omgt-brand__logo--dark { display: none; }
[data-theme="dark"] .omgt-brand__logo--light { display: none; }
[data-theme="dark"] .omgt-brand__logo--dark { display: inline-flex; }
.omgt-brand__mark {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--flt-radius-md);
  background: var(--flt-primary-strong);
  color: var(--flt-on-primary);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.omgt-brand__text { font-size: 21px; font-weight: 800; letter-spacing: var(--flt-track-tight); line-height: 1.05; }
.omgt-brand__tag { display: block; font-size: 11px; font-weight: 600; letter-spacing: var(--flt-track-wide); text-transform: uppercase; color: var(--flt-fg-55); }

.omgt-nav ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.omgt-nav a {
  display: block;
  padding: 10px 16px;
  border-radius: var(--flt-radius-md);
  font-size: 15px;
  font-weight: 600;
  color: var(--flt-fg);
  text-decoration: none;
  transition: all var(--flt-dur) var(--flt-ease);
}
.omgt-nav a:hover { background: var(--flt-muted); }
.omgt-nav .current-menu-item > a,
.omgt-nav .current_page_item > a { background: var(--flt-fg); color: var(--flt-on-primary); }
.omgt-nav .sub-menu {
  display: none;
  position: absolute;
  min-width: 220px;
  padding: 8px;
  margin: 0;
  list-style: none;
  background: var(--flt-bg);
  border: 2px solid var(--flt-fg);
  border-radius: var(--flt-radius-md);
}
.omgt-nav li { position: relative; }
.omgt-nav li:hover > .sub-menu,
.omgt-nav li:focus-within > .sub-menu { display: block; }
.omgt-nav .sub-menu a { padding: 10px 14px; }

.omgt-header__tools { display: flex; align-items: center; gap: 10px; }
.omgt-iconbtn {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 0;
  border-radius: var(--flt-radius-md);
  background: var(--flt-muted);
  color: var(--flt-fg);
  cursor: pointer;
  transition: all var(--flt-dur) var(--flt-ease);
}
.omgt-iconbtn:hover { background: var(--flt-border); transform: scale(1.05); }

/* Theme toggle. Both glyphs are in the button and CSS shows the one that
   matches the active theme, so nothing in the markup is swapped in JS. */
.omgt-iconbtn__sun { display: block; }
.omgt-iconbtn__moon { display: none; }
[data-theme="dark"] .omgt-iconbtn__sun { display: none; }
[data-theme="dark"] .omgt-iconbtn__moon { display: block; }

.omgt-burger { display: none; }

/* Mobile drawer — full-screen overlay, flat, no blur */
.omgt-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--flt-bg);
  padding: 24px;
  overflow-y: auto;
}
.omgt-drawer--open { display: block; }
.omgt-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.omgt-drawer__nav ul { list-style: none; margin: 0; padding: 0; }
.omgt-drawer__nav a {
  display: block;
  padding: 18px 4px;
  border-bottom: 2px solid var(--flt-border);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: var(--flt-track-tight);
  color: var(--flt-fg);
  text-decoration: none;
}
.omgt-drawer__nav a:hover { color: var(--flt-primary-strong); }
.omgt-drawer .sub-menu { display: none; }

/* Search bar */
.omgt-searchbar { background: var(--flt-muted); padding: 18px 0; }
.omgt-searchbar__form { display: flex; gap: 12px; }

/* ==========================================================================
   16. SINGLE POST
   ========================================================================== */

.omgt-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 500; color: var(--flt-fg-55); }
.omgt-crumbs a { color: var(--flt-fg-55); }
.omgt-crumbs a:hover { color: var(--flt-primary-strong); }
.omgt-crumbs span[aria-current] { color: var(--flt-fg); font-weight: 600; }

.omgt-entry__title { font-size: clamp(32px, 4.6vw, 58px); line-height: 1.06; margin: 20px 0 24px; }

.omgt-entry__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: 2px solid var(--flt-border);
}
.omgt-byline { display: flex; align-items: center; gap: 12px; }
.omgt-byline img, .omgt-byline .avatar { width: 46px; height: 46px; border-radius: var(--flt-radius-full); object-fit: cover; }
.omgt-byline__name { font-size: 15px; font-weight: 700; color: var(--flt-fg); text-decoration: none; }
.omgt-byline__role { display: block; font-size: 12.5px; color: var(--flt-fg-55); font-weight: 500; }

.omgt-entry__hero {
  margin: 36px 0;
  border-radius: var(--flt-radius-lg);
  overflow: hidden;
  background: var(--flt-muted);
}
.omgt-entry__hero img { width: 100%; height: auto; }
.omgt-entry__caption { padding: 14px 20px; background: var(--flt-muted); font-size: 14px; color: var(--flt-fg-70); }

.omgt-content {
  font-size: 18px;
  line-height: 1.78;
}
.omgt-content > * + * { margin-top: 24px; }
.omgt-content h2 { font-size: clamp(26px, 3vw, 36px); margin-top: 52px; }
.omgt-content h3 { font-size: clamp(21px, 2.2vw, 27px); margin-top: 40px; }
.omgt-content h4 { font-size: 20px; margin-top: 32px; }
.omgt-content ul, .omgt-content ol { padding-left: 26px; }
.omgt-content li { margin-bottom: 10px; }
.omgt-content ul li::marker { color: var(--flt-primary-strong); font-weight: 700; }
.omgt-content ol li::marker { color: var(--flt-primary-strong); font-weight: 700; }
.omgt-content img { border-radius: var(--flt-radius-lg); }
.omgt-content a { font-weight: 500; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.omgt-content a:hover { text-decoration-color: var(--flt-accent); }
.omgt-content blockquote {
  margin: 36px 0;
  padding: 28px 32px;
  background: var(--flt-muted);
  border-left: 6px solid var(--flt-primary);
  border-radius: 0 var(--flt-radius-md) var(--flt-radius-md) 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.55;
}
.omgt-content code {
  background: var(--flt-muted);
  padding: 3px 7px;
  border-radius: var(--flt-radius-md);
  font-size: 0.9em;
}
.omgt-content pre {
  background: var(--flt-fg);
  color: var(--flt-on-primary);
  padding: 24px 26px;
  border-radius: var(--flt-radius-lg);
  overflow-x: auto;
  font-size: 15px;
}
.omgt-content pre code { background: none; padding: 0; color: inherit; }
.omgt-content table { width: 100%; border-collapse: collapse; font-size: 16px; }
.omgt-content th, .omgt-content td { padding: 14px 16px; border-bottom: 2px solid var(--flt-border); text-align: left; }
.omgt-content th { background: var(--flt-muted); font-weight: 700; font-size: 14px; letter-spacing: var(--flt-track-wide); text-transform: uppercase; }
.omgt-content .wp-block-image figcaption,
.omgt-content figcaption { font-size: 14px; color: var(--flt-fg-55); margin-top: 10px; }

/* Article layout: content + rail */
.omgt-entry__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
.omgt-rail { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 100px; }
.omgt-rail__card { padding: 24px; border-radius: var(--flt-radius-lg); background: var(--flt-muted); }
.omgt-rail__title { margin: 0 0 16px; font-size: 14px; font-weight: 700; letter-spacing: var(--flt-track-wide); text-transform: uppercase; }

/* QR block (GP QR renders .gp-qr inside here) */
.omgt-qr { display: grid; place-items: center; gap: 12px; padding: 20px; background: #fff; border-radius: var(--flt-radius-md); }
.omgt-qr .gp-qr { display: grid; place-items: center; gap: 10px; }
.omgt-qr .gp-qr-note { margin: 0; font-size: 13px; color: var(--flt-fg-55); text-align: center; }
.omgt-qr canvas, .omgt-qr svg { display: block; }

/* Author card (GP Authorship, or theme fallback) */
.omgt-author {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
  margin: 48px 0 0;
  padding: 32px;
  border-radius: var(--flt-radius-lg);
  background: var(--flt-muted);
}
.omgt-author img {
  width: 84px; height: 84px;
  border-radius: var(--flt-radius-full);
  object-fit: cover;
  background: var(--flt-border);
}
.omgt-author__name { margin: 0 0 4px; font-size: 20px; font-weight: 800; letter-spacing: var(--flt-track-tight); }
.omgt-author__role { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: var(--flt-track-wide); text-transform: uppercase; color: var(--flt-primary-strong); }
.omgt-author__bio { margin: 0; font-size: 15px; line-height: 1.65; color: var(--flt-fg-70); }

/* Co-authors row (GP Authorship supplies the names; the theme styles them) */
.omgt-coauthors { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.omgt-coauthors__label { font-size: 12.5px; font-weight: 600; letter-spacing: var(--flt-track-wide); text-transform: uppercase; color: var(--flt-fg-55); }

/* ==========================================================================
   17. ARCHIVE / PAGINATION
   ========================================================================== */

.omgt-archive__head { background: var(--flt-muted); padding-block: 60px 52px; position: relative; overflow: hidden; }
.omgt-archive__title { font-size: clamp(32px, 4.4vw, 54px); margin: 0 0 12px; }

.omgt-pagination { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 56px; }
.omgt-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 50px; height: 50px;
  padding: 0 14px;
  border-radius: var(--flt-radius-md);
  background: var(--flt-muted);
  color: var(--flt-fg);
  font-weight: 700;
  text-decoration: none;
  transition: all var(--flt-dur) var(--flt-ease);
}
.omgt-pagination .page-numbers:hover { background: var(--flt-border); transform: scale(1.05); }
.omgt-pagination .page-numbers.current { background: var(--flt-fg); color: var(--flt-on-primary); }
.omgt-pagination .page-numbers.dots { background: none; }

/* ==========================================================================
   18. SIDEBAR + FOOTER
   ========================================================================== */

.omgt-sidebar-widget { margin-bottom: 50px; }
.omgt-sidebar-widget:last-child { margin-bottom: 0; }
.omgt-widget__title {
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--flt-fg);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: var(--flt-track-wide);
  text-transform: uppercase;
}
.omgt-sidebar-widget ul { margin: 0; padding: 0; list-style: none; }
.omgt-sidebar-widget li { padding: 10px 0; font-size: 15px; border-bottom: 2px solid var(--flt-border); }
.omgt-sidebar-widget li:last-child { border-bottom: 0; }

.omgt-footer { background: var(--flt-fg); color: #fff; padding-block: 72px 32px; position: relative; overflow: hidden; }
.omgt-footer a { color: var(--flt-on-ink-70); }
.omgt-footer a:hover { color: #fff; }
.omgt-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; position: relative; z-index: 1; }
.omgt-footer__title { margin: 0 0 20px; font-size: 14px; font-weight: 700; letter-spacing: var(--flt-track-wide); text-transform: uppercase; color: #fff; }
.omgt-footer ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.omgt-footer__bar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding-top: 26px;
  border-top: 2px solid rgba(255, 255, 255, 0.18);
  font-size: 13.5px;
  color: var(--flt-on-ink-70);
  position: relative;
  z-index: 1;
}
.omgt-social { display: flex; gap: 10px; flex-wrap: wrap; }
.omgt-social a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--flt-radius-md);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: all var(--flt-dur) var(--flt-ease);
}
.omgt-social a:hover { background: var(--flt-primary); transform: scale(1.05); color: var(--flt-on-primary); }

/* ==========================================================================
   19. 404 / SEARCH / COMMENTS
   ========================================================================== */

.omgt-404 { text-align: center; padding-block: 96px; }
.omgt-404__code {
  font-size: clamp(96px, 18vw, 220px);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--flt-primary-strong);
  margin: 0;
}

.omgt-comments { margin-top: 64px; padding-top: 40px; border-top: 2px solid var(--flt-border); }
.omgt-comments ol { list-style: none; margin: 0; padding: 0; }
.omgt-comments li { padding: 20px 0; border-bottom: 2px solid var(--flt-border); }
.omgt-comments .comment-meta { font-size: 13px; color: var(--flt-fg-55); margin-bottom: 8px; }

/* ==========================================================================
   20. WORDPRESS CORE ALIGNMENT / UTILITY
   ========================================================================== */

.alignleft  { float: left;  margin: 8px 32px 24px 0; }
.alignright { float: right; margin: 8px 0 24px 32px; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide  { width: min(1100px, 100vw - 48px); margin-inline: auto; }
.alignfull  { width: 100vw; margin-left: calc(50% - 50vw); }

.omgt-clear::after { content: ""; display: table; clear: both; }
.omgt-center { text-align: center; }
.omgt-mt-0 { margin-top: 0; }
.omgt-mt-24 { margin-top: 24px; }
.omgt-mt-40 { margin-top: 40px; }
.omgt-mt-56 { margin-top: 56px; }
.omgt-hidden { display: none !important; }

/* ==========================================================================
   21. RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
  :root { --flt-sec-y: 68px; }
  .omgt-entry__layout { grid-template-columns: 1fr; gap: 40px; }
  .omgt-rail { position: static; }
  .omgt-hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .omgt-postgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .omgt-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .omgt-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .omgt-nav, .omgt-header__tools .omgt-desktop-only { display: none; }
  .omgt-burger { display: grid; }
  .omgt-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; }
  .omgt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .omgt-cta__inner { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --flt-sec-y: 56px; --flt-gutter: 20px; }
  body { font-size: 16px; }
  .omgt-grid--2, .omgt-grid--3, .omgt-grid--4,
  .omgt-postgrid--2, .omgt-postgrid--3, .omgt-postgrid--4 { grid-template-columns: 1fr; }
  .omgt-span-3, .omgt-span-4, .omgt-span-6, .omgt-span-8 { grid-column: span 12; }

  .omgt-bento { grid-template-columns: 1fr; grid-auto-rows: 190px; }
  .omgt-bento__cell--featured,
  .omgt-bento__cell--wide { grid-column: span 1; grid-row: span 1; }
  .omgt-bento__cell--featured .omgt-bento__title { font-size: 21px; }

  .omgt-review__scoreboard { grid-template-columns: 1fr; }
  .omgt-review__score { padding: 26px 24px; min-width: 0; }
  .omgt-review__pc { grid-template-columns: 1fr; }
  .omgt-crit { grid-template-columns: 1fr; gap: 6px; }
  .omgt-crit__val { text-align: left; }

  .omgt-faq__trigger { grid-template-columns: 28px 1fr; padding: 20px 4px; }
  .omgt-faq__chev { display: none; }
  .omgt-faq__panel-inner { padding: 0 4px 24px 46px; }

  .omgt-listrow { grid-template-columns: 104px 1fr; }
  .omgt-listrow__meta { display: none; }

  .omgt-author { grid-template-columns: 1fr; }
  .omgt-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .omgt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .omgt-btn { width: 100%; }
  .omgt-hero__actions .omgt-btn { width: auto; flex: 1 1 auto; }
}

/* ==========================================================================
   20. HOMEPAGE — ONE MORE GAME LAYOUT
   Band order and column geometry follow onemoregame.ph: header → bento →
   ad row → three columns (ad · latest posts · sidebar) → footer.
   No new colour, radius, shadow or font is introduced here — every value is
   an existing token. This section changes LAYOUT only.
   ========================================================================== */

/* --- 20.0 Ink header ---------------------------------------------------
   OMG frames the page with dark chrome. The doc already uses a dark grey
   band for "How It Works & Footer", so an ink header is in-language rather
   than a new idea: the frame is dark, the content bands stay light. */
.omgt-header--ink { background: var(--flt-fg); border-bottom-color: var(--flt-fg); }
.omgt-header--ink .omgt-brand { color: #fff; }
.omgt-header--ink .omgt-brand__tag { color: var(--flt-on-ink-70); }
.omgt-header--ink .omgt-brand__mark { background: var(--flt-accent); color: var(--flt-on-accent); }
.omgt-header--ink .omgt-nav a { color: #fff; }
.omgt-header--ink .omgt-nav a:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.omgt-header--ink .omgt-nav .current-menu-item > a,
.omgt-header--ink .omgt-nav .current_page_item > a { background: var(--flt-accent); color: var(--flt-on-accent); }
.omgt-header--ink .omgt-iconbtn { background: rgba(255, 255, 255, 0.14); color: #fff; }
.omgt-header--ink .omgt-iconbtn:hover { background: rgba(255, 255, 255, 0.26); }
.omgt-header--ink .omgt-nav .sub-menu { background: var(--flt-fg); }
.omgt-header--ink .omgt-nav .sub-menu a { color: #fff; }

/* --- 20.1 Bento with a lead cell: one tall feature left, 2x2 right ----- */
/* 4 columns; the lead cell takes 2x2 (left half), the other four fill the
   right half as a 2x2. That is OMG's exact geometry. */
.omgt-bento--lead { grid-auto-rows: 232px; }
.omgt-bento__cell--lead { grid-column: span 2; grid-row: span 2; }
.omgt-bento__cell--lead .omgt-bento__title { font-size: clamp(22px, 2.2vw, 30px); }
.omgt-bento__cell--lead .omgt-bento__excerpt { font-size: 15px; }

/* OMG leads each card with a category strip, then the headline, then meta. */
.omgt-bento__tagrow { display: flex; gap: 8px; flex-wrap: wrap; }
.omgt-bento__meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--flt-fg-55);
}
.omgt-bento__cell--over .omgt-bento__meta { color: rgba(255, 255, 255, 0.78); }
.omgt-bento__cell--over .omgt-tag { background: #fff; color: var(--flt-fg); }
.omgt-bento__cell--c1 .omgt-bento__meta,
.omgt-bento__cell--c4 .omgt-bento__meta { color: rgba(255, 255, 255, 0.78); }
.omgt-bento__cell--c2 .omgt-bento__meta,
.omgt-bento__cell--c3 .omgt-bento__meta { color: var(--flt-fg); }
.omgt-bento__stat { display: inline-flex; align-items: center; gap: 6px; }

/* --- 20.2 Ad slots ----------------------------------------------------- */
/* Flat bordered blocks. An ad slot is structure, not decoration, so it gets
   the doc's border-2 treatment and never a shadow. */
.omgt-adrow { padding-block: 28px; }
.omgt-adslot {
  display: grid;
  place-items: center;
  gap: 8px;
  width: 100%;
  padding: 24px 16px;
  background: var(--flt-muted);
  border: 2px solid var(--flt-border);
  border-radius: var(--flt-radius-lg);
  color: var(--flt-fg-55);
  text-align: center;
  overflow: hidden;
}
.omgt-adslot--leaderboard { min-height: 132px; }
.omgt-adslot--vertical { min-height: 600px; padding: 24px 12px; }
.omgt-adslot__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--flt-track-wide);
  text-transform: uppercase;
}
.omgt-adslot__size { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.omgt-adslot img,
.omgt-adslot iframe { display: block; max-width: 100%; }

/* --- 20.3 The three-column row: ad | latest | sidebar ------------------ */
/* Side rails are sized for a real IAB 300-wide unit rather than an exact
   20/60/20, which on this container would leave a 195px rail that no standard
   ad unit fits. See SPEC.md §2.9. */
.omgt-homecols {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) minmax(180px, 260px);
  gap: 28px;
  align-items: start;
}
.omgt-homecols__main,
.omgt-homecols__rail { min-width: 0; }

/* Latest posts — OMG's centre column: thumb, category strip, headline,
   excerpt, then date + author. */
.omgt-latest { display: flex; flex-direction: column; }
.omgt-latest__item {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 22px;
  padding: 26px 0;
  border-top: 2px solid var(--flt-border);
  text-decoration: none;
  color: var(--flt-fg);
}
.omgt-latest__item:first-child { border-top: 0; padding-top: 0; }
.omgt-latest__thumb {
  aspect-ratio: 16 / 10;
  border-radius: var(--flt-radius-md);
  overflow: hidden;
  background: var(--flt-muted);
}
.omgt-latest__thumb img { width: 100%; height: 100%; object-fit: cover; }
.omgt-latest__title {
  margin: 10px 0 8px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.01em;
}
.omgt-latest__item:hover .omgt-latest__title { color: var(--flt-primary-strong); }
.omgt-latest__excerpt { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--flt-fg-70); }
.omgt-latest__meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13.5px;
  color: var(--flt-fg-55);
}

/* --- 20.4 Sidebar widget with a CTA (OMG's "GO TO REVIEWS") ------------ */
.omgt-sidewidget { margin-bottom: 40px; }
.omgt-sidewidget:last-child { margin-bottom: 0; }
.omgt-sidewidget__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.omgt-sidewidget__item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  text-decoration: none;
  color: var(--flt-fg);
}
.omgt-sidewidget__thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--flt-radius-md);
  overflow: hidden;
  background: var(--flt-muted);
}
.omgt-sidewidget__thumb img { width: 100%; height: 100%; object-fit: cover; }
.omgt-sidewidget__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; }
.omgt-sidewidget__item:hover .omgt-sidewidget__title { color: var(--flt-primary-strong); }
.omgt-sidewidget__cta { width: 100%; justify-content: center; }

/* --- 20.5 Footer: three columns + a legal bar ------------------------- */
/* Content is distributed across three columns: brand + description, the tag
   cloud, and follow/social. The legal line spans beneath as a bar, which is
   the one thing that should not sit in a column. */
/* Widths are set so the three columns finish at similar heights. The tag cloud
   is the tallest content, so it gets the most horizontal room: given a wide
   column it wraps to ~2 rows instead of ~6, which is what stops the footer
   looking lopsided next to the short Follow-Us column. */
.omgt-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(0, 0.75fr);
  gap: 44px;
  align-items: start;
  position: relative;
  z-index: 1;
}
.omgt-footer__col { min-width: 0; }
.omgt-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.omgt-footer__brand .omgt-brand__mark { background: var(--flt-accent); color: var(--flt-on-accent); }
.omgt-footer__about {
  margin: 18px 0 0;
  max-width: 36ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--flt-on-ink-70);
}
/* NOTE: section 18 has `.omgt-footer ul { flex-direction: column }` at
   specificity 0,1,1, which beats a bare `.omgt-footer__tags` (0,1,0) — the tag
   cloud was silently rendering as a vertical list, one chip per row, no matter
   how wide the column got. The `ul` in the selector is load-bearing. */
.omgt-footer ul.omgt-footer__tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.omgt-footer__tags a {
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--flt-radius-md);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: var(--flt-track-wide);
  text-transform: uppercase;
  text-decoration: none;
  transition: all var(--flt-dur) var(--flt-ease);
}
.omgt-footer__tags a:hover { background: var(--flt-accent); color: var(--flt-on-accent); transform: scale(1.04); }
.omgt-footer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 52px;
  padding-top: 26px;
  border-top: 2px solid rgba(255, 255, 255, 0.18);
  font-size: 13.5px;
  color: var(--flt-on-ink-70);
  position: relative;
  z-index: 1;
}
.omgt-footer__parent { display: inline-flex; align-items: center; gap: 10px; }

/* --- 20.6 Gaps the server-rendered markup exposed ---------------------- */
/* Found when the PHP was written against this stylesheet. Each was hidden in
   the mockup by an inline style or an undefined class that static HTML can get
   away with and WordPress markup cannot. */

/* Footer widgets sit on the ink footer. .omgt-widget__title draws its rule in
   --flt-fg (#111827) — which IS the footer background, so the border rendered
   invisible. Restate it in a colour that reads on ink. */
.omgt-footer-widget { margin-top: 30px; }
.omgt-footer-widget .omgt-widget__title {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

/* The footer's decorative ring — geometry only, so the PHP needs no inline
   style. currentColor is #fff inside .omgt-footer. */
.omgt-deco--footer {
  width: 340px;
  height: 340px;
  right: -100px;
  top: -140px;
  border: 5px solid currentColor;
  opacity: 0.07;
}

/* inc/helpers.php omgt_tint_for() can return 'muted' and the non-lead bento
   path emits it, but no rule existed — those tags silently fell back to the
   bare .omgt-tag. .omgt-tag is fully rounded, so no extra shape rule. Ink at
   70% on gray-100 measures 6.29:1, asserted in tests/contrast-check.py. */
.omgt-tag--muted { background: var(--flt-muted); color: var(--flt-fg-70); }

/* The mockup set display:block inline on these three. Server markup uses h3/p
   so it is already block; this makes the classes self-sufficient for anyone
   rendering them as a span. */
.omgt-latest__title,
.omgt-latest__excerpt,
.omgt-sidewidget__title { display: block; }

/* Author photo fallback. WordPress hands back an empty avatar URL when avatars
   are switched off or Gravatar is unreachable, and both the byline and the
   author card used to skip the <img> entirely in that case, leaving no picture.
   This flat initials tile is the stand-in — same device as the header brand
   mark, so it reads as intentional rather than broken. Sizes live here rather
   than in an inline style. */
.omgt-author__initial {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--flt-radius-md);
  background: var(--flt-primary-strong);
  color: var(--flt-on-primary);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.omgt-author__initial--sm { width: 46px; height: 46px; font-size: 19px; }
.omgt-author__initial--lg { width: 84px; height: 84px; font-size: 34px; }

/* --- 20.7 Homepage responsive collapse ------------------------------- */
@media (max-width: 1100px) {
  .omgt-homecols { grid-template-columns: minmax(0, 1fr) minmax(180px, 260px); }
  .omgt-homecols__rail--left { grid-column: 1 / -1; }
  .omgt-adslot--vertical { min-height: 280px; }
}
@media (max-width: 820px) {
  .omgt-homecols { grid-template-columns: minmax(0, 1fr); }
  .omgt-homecols__rail--left,
  .omgt-homecols__rail--right { grid-column: auto; }
  .omgt-homecols__main { order: -1; }
  .omgt-latest__item { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .omgt-latest__thumb { aspect-ratio: 16 / 9; }
  .omgt-bento--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; }
  .omgt-bento__cell--lead { grid-column: span 2; grid-row: span 1; }
  .omgt-footer__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 640px) {
  .omgt-footer__cols { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .omgt-footer__bar { flex-direction: column; align-items: flex-start; }
}

/* Respect reduced-motion: the doc's motion is enhancement, not structure. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .omgt-btn:hover, .omgt-card:hover, .omgt-post:hover, .omgt-bento__cell:hover { transform: none; }
}

@media print {
  .omgt-header, .omgt-drawer, .omgt-footer, .omgt-rail, .omgt-cta, .omgt-searchbar,
  .omgt-adrow, .omgt-adslot { display: none !important; }
  .omgt-entry__layout { grid-template-columns: 1fr; }
  body { font-size: 11pt; }
}