/* ==========================================================================
   Organized Greatness — Global UI tokens + components  (og-tokens.css v1.0)
   Spec: OG-UI-TOKENS.md (same folder). Box working copy:
   /workspace/og-hq/design-system/  → HQ canonical on pop-os / VPS on next sync.
   Rule: projects NEVER edit this file. They add a theme file that sets only
   --og-accent*, --og-brand-*, and (optionally) --og-font-display.
   ========================================================================== */

:root {
  /* ---- Base neutrals (from the newest OG look, og-services 2026-09-28) ---- */
  --og-paper: #f7f5ef;        /* page background */
  --og-panel: #fffdf8;        /* cards, inputs */
  --og-ink: #15201c;          /* body text, dark buttons */
  --og-muted: #5d6962;        /* secondary text (AA on paper: 5.6:1) */
  --og-line: #d8ded5;         /* hairlines, borders */
  --og-line-strong: #b9c2b8;  /* input borders */
  --og-white: #ffffff;

  /* ---- Theme slots (DEFAULT = OG house; projects override in theme file) ---- */
  --og-accent: #c9ef58;       /* one accent: primary CTA fill, focus, markers */
  --og-accent-ink: #10170d;   /* text on accent (must be ≥ 4.5:1) */
  --og-accent-soft: #edf6cd;  /* tint for highlights */
  --og-brand-bg: #17231d;     /* brand band background (hero/nav/footer) */
  --og-brand-bg-2: #0f1813;   /* brand band gradient end */
  --og-brand-fg: #f8fbf4;     /* text on brand band */
  --og-brand-muted: #b4c3b7;  /* secondary text on brand band (≥ 4.5:1) */
  --og-brand-line: rgba(255,255,255,.14);
  --og-brand-hi: #c9ef58;     /* brand highlight text on band (links, marks) */

  /* ---- Type ---- */
  --og-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
  --og-font-display: var(--og-font-ui);
  --og-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* One scale: major third (×1.25) on a 16px base; display steps fluid */
  --og-text-xs: 0.8rem;       /* 12.8  labels, fine print */
  --og-text-sm: 0.875rem;     /* 14    meta, captions */
  --og-text-md: 1rem;         /* 16    body */
  --og-text-lg: 1.25rem;      /* 20    lede, card titles */
  --og-text-xl: 1.563rem;     /* 25    h3 */
  --og-text-2xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.441rem);   /* h2 28→39 */
  --og-text-3xl: clamp(2.1rem, 1.3rem + 3.6vw, 3.815rem);    /* h1 34→61 */
  --og-leading-tight: 1.08;
  --og-leading-snug: 1.3;
  --og-leading-body: 1.55;
  --og-tracking-display: -0.02em;
  --og-tracking-label: 0.1em;
  --og-weight-body: 400;
  --og-weight-strong: 700;
  --og-weight-display: 700;

  /* ---- Spacing (4px base) ---- */
  --og-space-1: 4px;  --og-space-2: 8px;  --og-space-3: 12px; --og-space-4: 16px;
  --og-space-5: 20px; --og-space-6: 24px; --og-space-7: 32px; --og-space-8: 40px;
  --og-space-9: 56px; --og-space-10: 80px;
  --og-section: clamp(56px, 8vw, 112px);   /* vertical section rhythm */
  --og-gutter: 20px;                       /* container side padding */
  --og-max: 1180px;                        /* container width */
  --og-measure: 62ch;                      /* max line length for prose */

  /* ---- Radius ---- */
  --og-radius-sm: 8px;   /* inputs, chips */
  --og-radius-md: 14px;  /* buttons, small panels */
  --og-radius-lg: 22px;  /* cards, bands */
  --og-radius-pill: 999px;

  /* ---- Shadows ---- */
  --og-shadow-sm: 0 1px 2px rgba(21,32,28,.08);
  --og-shadow-md: 0 6px 18px -6px rgba(21,32,28,.18);
  --og-shadow-lg: 0 18px 44px -14px rgba(21,32,28,.28);
  --og-focus: 0 0 0 3px var(--og-paper), 0 0 0 6px var(--og-ink);

  /* ---- Motion ---- */
  --og-dur-fast: 120ms;     /* press, hover color */
  --og-dur-base: 200ms;     /* FAQ open, card lift */
  --og-dur-slow: 320ms;     /* section reveal (optional) */
  --og-ease: cubic-bezier(.2, 0, 0, 1);        /* standard */
  --og-ease-out: cubic-bezier(.16, 1, .3, 1);  /* enter */

  /* ---- Targets ---- */
  --og-tap: 48px;           /* primary control min height */
  --og-tap-compact: 44px;   /* nav/compact min height (WCAG 2.5.5) */
}

@media (prefers-reduced-motion: reduce) {
  :root { --og-dur-fast: 0ms; --og-dur-base: 0ms; --og-dur-slow: 0ms; }
  html { scroll-behavior: auto !important; }
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--og-paper); color: var(--og-ink);
  font: var(--og-weight-body) var(--og-text-md)/var(--og-leading-body) var(--og-font-ui);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--og-font-display); font-weight: var(--og-weight-display);
  line-height: var(--og-leading-tight); letter-spacing: var(--og-tracking-display); margin: 0 0 var(--og-space-4); text-wrap: balance; }
h1 { font-size: var(--og-text-3xl); }
h2 { font-size: var(--og-text-2xl); }
h3 { font-size: var(--og-text-lg); line-height: var(--og-leading-snug); letter-spacing: 0; }
p { margin: 0 0 var(--og-space-4); max-width: var(--og-measure); }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: none; box-shadow: var(--og-focus); border-radius: var(--og-radius-sm); }
.og-skip { position: absolute; left: -999px; top: 8px; }
.og-skip:focus { left: 8px; z-index: 100; background: var(--og-panel); padding: 8px 12px; }

/* ---- Layout ---- */
.og-wrap { width: 100%; max-width: var(--og-max); margin-inline: auto; padding-inline: var(--og-gutter); }
.og-section { padding-block: var(--og-section); }
.og-section--tight { padding-block: calc(var(--og-section) * .6); }
.og-band { background: radial-gradient(120% 90% at 20% 0%, var(--og-brand-bg) 0%, var(--og-brand-bg-2) 100%); color: var(--og-brand-fg); }
.og-band p, .og-band .og-muted { color: var(--og-brand-muted); }
.og-band a:not(.og-btn) { color: var(--og-brand-hi); }
.og-eyebrow { font-size: var(--og-text-xs); font-weight: var(--og-weight-strong); letter-spacing: var(--og-tracking-label);
  text-transform: uppercase; color: var(--og-muted); margin: 0 0 var(--og-space-3); }
.og-band .og-eyebrow { color: var(--og-brand-hi); }
.og-lede { font-size: var(--og-text-lg); line-height: var(--og-leading-snug); }
.og-muted { color: var(--og-muted); }
.og-fine { font-size: var(--og-text-sm); color: var(--og-muted); }
.og-grid { display: grid; gap: var(--og-space-3); }
@media (min-width: 761px) { .og-grid--3 { grid-template-columns: repeat(3, 1fr); } .og-grid--2 { grid-template-columns: repeat(2, 1fr); } }

/* ---- Button ----
   One primary (accent) per view. Secondary = outline. Ghost = text link look.
   Min height 48 (44 compact). Press = 1px sink, no bounce. */
.og-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--og-space-2);
  min-height: var(--og-tap); padding: 12px 22px; border-radius: var(--og-radius-md);
  border: 1.5px solid transparent; font: var(--og-weight-strong) var(--og-text-md)/1.1 var(--og-font-ui);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--og-dur-fast) var(--og-ease), transform var(--og-dur-fast) var(--og-ease), box-shadow var(--og-dur-fast) var(--og-ease);
}
.og-btn:active { transform: translateY(1px); }
.og-btn--primary { background: var(--og-accent); color: var(--og-accent-ink); box-shadow: var(--og-shadow-sm); }
.og-btn--primary:hover { box-shadow: var(--og-shadow-md); filter: brightness(1.04); }
.og-btn--secondary { background: transparent; color: currentColor; border-color: currentColor; }
.og-btn--ink { background: var(--og-ink); color: var(--og-white); }
.og-btn--ghost { background: transparent; padding-inline: 4px; min-height: var(--og-tap-compact); text-decoration: underline; font-weight: 600; }
.og-btn--compact { min-height: var(--og-tap-compact); padding: 9px 16px; font-size: var(--og-text-sm); }
.og-btn--block { width: 100%; }

/* ---- Nav ----  logo left · ≤4 links · one compact primary right. Links hide < 761px. */
.og-nav { display: flex; align-items: center; gap: var(--og-space-5); min-height: 68px; }
.og-nav__brand { display: inline-flex; align-items: center; min-height: var(--og-tap-compact); gap: var(--og-space-2); text-decoration: none; font-family: var(--og-font-display); font-weight: var(--og-weight-display); font-size: var(--og-text-lg); }
.og-nav__links { display: flex; gap: var(--og-space-5); margin-left: auto; }
.og-nav__links a { text-decoration: none; font-weight: 600; font-size: var(--og-text-sm); padding: 12px 2px; }
.og-nav__links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.og-nav > .og-btn { margin-left: var(--og-space-2); }
@media (max-width: 760px) { .og-nav { min-height: 60px; gap: var(--og-space-3); } .og-nav__links { display: none; } .og-nav > .og-btn { margin-left: auto; } }

/* ---- Card ---- */
.og-card { background: var(--og-panel); border: 1px solid var(--og-line); border-radius: var(--og-radius-lg); padding: var(--og-space-6); }
.og-card p:last-child { margin-bottom: 0; }
.og-card__num { display: block; font-size: var(--og-text-xs); font-weight: 800; letter-spacing: var(--og-tracking-label); color: var(--og-muted); margin-bottom: var(--og-space-6); }

/* ---- Field ---- */
.og-field { display: grid; gap: 6px; }
.og-field label { font-size: var(--og-text-sm); font-weight: 600; }
.og-input { min-height: var(--og-tap); width: 100%; padding: 12px 14px; border-radius: var(--og-radius-sm);
  border: 1.5px solid var(--og-line-strong); background: var(--og-panel); color: var(--og-ink); font: inherit; }
.og-input::placeholder { color: #66716a; } /* 4.7:1 on panel */

/* ---- Steps ---- */
.og-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--og-space-3); counter-reset: step; }
.og-steps li { counter-increment: step; position: relative; padding: var(--og-space-5) var(--og-space-5) var(--og-space-5) 64px;
  background: var(--og-panel); border: 1px solid var(--og-line); border-radius: var(--og-radius-lg); }
.og-steps li::before { content: counter(step); position: absolute; left: 20px; top: 18px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--og-ink); color: var(--og-white); font-weight: 800; font-size: var(--og-text-sm); }
.og-steps li p { margin: 0; color: var(--og-muted); }
@media (min-width: 761px) { .og-steps--row { grid-template-columns: repeat(4, 1fr); } }

/* ---- Progress (multi-step flows: always know next) ---- */
.og-progress { display: flex; gap: var(--og-space-2); list-style: none; margin: 0 0 var(--og-space-6); padding: 0; font-size: var(--og-text-xs); font-weight: 700; }
.og-progress li { flex: 1; padding-top: 8px; border-top: 3px solid var(--og-line); color: var(--og-muted); }
.og-progress li[data-state="done"] { border-color: var(--og-ink); color: var(--og-ink); }
.og-progress li[aria-current="step"] { border-color: var(--og-accent); color: var(--og-ink); }

/* ---- Pricing card ----  one plan = one card. Price, unit, what's in, ONE button, trust line beside the button. */
.og-price { background: var(--og-panel); border: 1.5px solid var(--og-ink); border-radius: var(--og-radius-lg); padding: var(--og-space-7); box-shadow: var(--og-shadow-lg); }
.og-price__name { font-family: var(--og-font-display); font-size: var(--og-text-xl); font-weight: var(--og-weight-display); margin: 0 0 var(--og-space-2); }
.og-price__amount { font-family: var(--og-font-display); font-size: var(--og-text-2xl); font-weight: var(--og-weight-display); line-height: 1.1; margin: 0; }
.og-price__unit { color: var(--og-muted); font-size: var(--og-text-sm); margin: 4px 0 var(--og-space-5); }
.og-price ul { list-style: none; margin: 0 0 var(--og-space-6); padding: 0; display: grid; gap: var(--og-space-3); }
.og-price li { padding-left: 28px; position: relative; }
.og-price li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 14px; height: 8px; border-left: 2.5px solid var(--og-ink); border-bottom: 2.5px solid var(--og-ink); transform: rotate(-45deg); }
.og-price__trust { margin: var(--og-space-3) 0 0; font-size: var(--og-text-sm); color: var(--og-muted); }

/* ---- FAQ (native details; no JS) ---- */
.og-faq { max-width: 820px; }
.og-faq details { border-top: 1px solid var(--og-line); }
.og-faq details:last-child { border-bottom: 1px solid var(--og-line); }
.og-faq summary { cursor: pointer; list-style: none; position: relative; padding: 18px 40px 18px 0; min-height: var(--og-tap); font-weight: 700; font-size: 1.05rem; }
.og-faq summary::-webkit-details-marker { display: none; }
.og-faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font-size: 1.6rem; font-weight: 400; transition: transform var(--og-dur-base) var(--og-ease); }
.og-faq details[open] summary::after { transform: rotate(45deg); }
.og-faq details p { margin: 0 0 18px; color: var(--og-muted); }

/* ---- Notice / placeholder (build-time only; must be gone before live) ---- */
.og-notice { border: 1px dashed var(--og-line-strong); border-radius: var(--og-radius-md); padding: var(--og-space-4); background: rgba(255,255,255,.5); font-size: var(--og-text-sm); }
.og-placeholder { display: inline-block; padding: 1px 6px; border-radius: 5px; background: #ffe37a; color: #3d3000;
  box-shadow: inset 0 -2px 0 #b89100; font-family: var(--og-font-mono); font-size: .85em; font-weight: 800; letter-spacing: 0; white-space: nowrap; }

/* ---- Footer ---- */
.og-footer { padding-block: var(--og-space-9) var(--og-space-6); }
.og-footer__row { display: flex; flex-wrap: wrap; gap: var(--og-space-5); justify-content: space-between; align-items: center; }
.og-footer__links { display: flex; flex-wrap: wrap; gap: var(--og-space-4); }
.og-footer__links a { text-decoration: none; padding: 10px 0; display: inline-block; }
.og-footer__legal { margin-top: var(--og-space-7); padding-top: var(--og-space-4); border-top: 1px solid var(--og-brand-line); font-size: var(--og-text-sm); }