/* Osuwon — layout & components. Colours/space in tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--sans); color: var(--ink); background: var(--bg);
  background-image:
    radial-gradient(1100px 520px at 78% -8%, rgba(77,163,255,.16), transparent 60%),
    radial-gradient(760px 420px at 8% 4%, rgba(43,111,214,.10), transparent 55%),
    linear-gradient(178deg, var(--bg-grad-1), var(--bg-grad-2) 62%);
  background-attachment: fixed;
  line-height: 1.5; -webkit-font-smoothing: antialiased; letter-spacing: .1px;
}
a { color: var(--accent-2); text-decoration: none; }
svg, img { display: block; }
h1, h2 { margin: 0; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--pad); }

/* ---- TEST banner (engine is_test; dropped in production) ---- */
.notice { background: var(--hold-bg); color: var(--hold-fg); border-bottom: 1px solid var(--hold-line);
  font-size: 11px; font-weight: 600; padding: 6px var(--pad); text-align: center; }

/* ---- TOP BAR (brand left · nav right · utility) -------------- */
.topbar { display: flex; align-items: center; gap: 20px; padding: 20px var(--pad) 16px;
  max-width: var(--page-max); margin-inline: auto; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mark { width: 38px; height: 38px; border-radius: 11px; flex: none; display: flex;
  align-items: center; justify-content: center; color: var(--ink);
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.09); }
.mark svg { width: 26px; height: 26px; }
.wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.wordmark b { font-size: 19px; font-weight: 700; letter-spacing: -.2px; }
.wordmark small { font-size: 9.5px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--faint); margin-top: 3px; white-space: nowrap; }
.nav { margin-left: auto; display: flex; gap: 4px; }
.nav a { font-size: 13px; font-weight: 600; color: var(--faint); padding: 9px 14px;
  border-radius: 9px; position: relative; white-space: nowrap; }
.nav a:hover { color: var(--muted); }
.nav a.on { color: var(--ink); }
.nav a.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0;
  height: 2px; border-radius: 2px; background: var(--accent); }
.util { display: flex; align-items: center; gap: 14px; padding-left: 20px; border-left: 1px solid var(--line); }
.live { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.live b { color: var(--ink); font-weight: 600; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up);
  box-shadow: 0 0 0 3px rgba(51,209,159,.16); flex: none; }
.lang { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
  font-size: 11px; font-weight: 600; flex: none; }
.lang a, .lang span { padding: 5px 11px; color: var(--faint); }
.lang .on { background: rgba(77,163,255,.16); color: var(--accent-2); }
.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent); }
/* mobile nav row (hidden on desktop) */
.mtabs { display: none; gap: 24px; padding: 0 var(--pad); margin-top: 12px; }
.mtabs a { font-size: 13px; font-weight: 600; color: var(--faint); padding: 11px 2px;
  border-bottom: 2px solid transparent; }
.mtabs a.on { color: var(--ink); border-bottom-color: var(--accent); }

.datestrip { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 16px var(--pad) 0; font-size: 11.5px; color: var(--faint); }
.datestrip b { color: var(--muted); font-weight: 600; }

/* ---- honesty state (engine contract: stale chip, change omitted) ---- */
.tag-stale { font-size: 9px; font-weight: 700; color: var(--hold-fg); background: var(--hold-bg);
  border: 1px solid var(--hold-line); border-radius: 4px; padding: 0 5px; white-space: nowrap; }

/* ---- HERO: the two dollars ----------------------------------- */
.hero { margin: 18px 0 6px; border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  padding: clamp(20px,3.4vw,32px) clamp(20px,3.4vw,32px) 0; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; right: -80px; top: -90px; width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(77,163,255,.20), transparent 62%); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: 1.5fr 1px 1fr; gap: clamp(20px,3vw,40px);
  align-items: center; position: relative; }
.kicker { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-2);
  font-weight: 600; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); }
.big { font-size: clamp(46px,8vw,72px); font-weight: 750; letter-spacing: -2px; line-height: 1;
  margin: 12px 0 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.big .cur { font-size: .42em; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.chg { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; }
.chg.up { color: var(--up); background: rgba(51,209,159,.12); }
.chg.down { color: var(--down); background: rgba(255,111,122,.12); }
.chg.flat { color: var(--faint); background: rgba(255,255,255,.05); }
.hero-sub { margin-top: 12px; font-size: 12.5px; color: var(--muted); display: flex; gap: 16px; flex-wrap: wrap; }
.hero-sub .legs { display: flex; gap: 8px; }
.hero-sub .legs span { border: 1px solid var(--line); border-radius: 8px; padding: 3px 10px;
  color: var(--ink); font-size: 12px; }
.vdiv { background: linear-gradient(var(--line), transparent); width: 1px; height: 100%; }
.official .kicker { color: var(--muted); }
.official .kicker::before { background: var(--faint); }
.mid { font-size: clamp(30px,4.5vw,40px); font-weight: 700; letter-spacing: -1px; margin: 10px 0 0; color: var(--ink); }
.mid .cur { font-size: .5em; color: var(--faint); font-weight: 600; }
.spread { margin-top: 14px; display: inline-flex; align-items: center; gap: 9px; font-size: 11.5px;
  color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px;
  background: rgba(77,163,255,.06); }
.spread b { color: var(--accent-2); font-weight: 700; }
.srcline { margin-top: 16px; font-size: 11.5px; color: var(--faint); }
/* subtle Lagos skyline band */
.skyline { display: block; width: calc(100% + 2*clamp(20px,3.4vw,32px)); height: 46px;
  margin: 20px calc(-1*clamp(20px,3.4vw,32px)) -1px; opacity: .32; }

/* ---- glance chips --------------------------------------------- */
.chips { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 16px 0; }
.chip { border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 13px 15px; background: var(--panel); }
.chip .k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.chip .v { font-size: 19px; font-weight: 700; margin-top: 5px; letter-spacing: -.3px; }
.chip .d { font-size: 11px; font-weight: 600; margin-top: 2px; }
.chip .d.up { color: var(--up); } .chip .d.down { color: var(--down); } .chip .d.flat { color: var(--faint); }

/* ---- AD SLOTS (shared _ads macros). Preview shows a
   dashed placeholder (.ad--ph); production renders real units in a bare
   .ad that COLLAPSES when Google returns unfilled — no empty boxes. ---- */
.adband { margin: 20px 0; }
.ad { border-radius: var(--r-sm); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; text-align: center; overflow: hidden; }
.ad--ph { border: 1px dashed rgba(255,255,255,.13); background: rgba(255,255,255,.018); min-height: 96px; }
.ad__label { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.ad__hint { font-size: 11px; color: var(--faint); font-weight: 600; }
.ad .adsbygoogle { width: 100%; }
.ad .adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

/* ---- section headers ------------------------------------------ */
.sec-h { display: flex; align-items: center; gap: 12px; margin: 28px 0 12px; }
.sec-h .t { font-size: 13px; font-weight: 700; }
.sec-h .tick { width: 14px; height: 5px; border-radius: 3px; background: var(--accent); }
.sec-h .chipx { font-size: 10px; color: var(--faint); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 8px; letter-spacing: .06em; }
.sec-h .ln { flex: 1; height: 1px; background: var(--line-soft); }

/* ---- currency board: two 6-row tables on desktop -------------- */
.curboard { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.card { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.thead { display: grid; grid-template-columns: 1.7fr 1fr .7fr; padding: 11px 18px; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--line-soft); }
.thead span:not(:first-child) { text-align: right; }
.row { display: grid; grid-template-columns: 1.7fr 1fr .7fr; padding: 13px 18px;
  border-top: 1px solid var(--line-soft); align-items: center; }
.row:first-of-type { border-top: 0; }
.nm { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.nm .code { font-size: 9px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 6px; letter-spacing: .06em; white-space: nowrap; }
.nm b { font-weight: 600; font-size: 13.5px; }
.val { text-align: right; font-weight: 700; font-size: 14.5px; }
.cchg { text-align: right; font-size: 12px; font-weight: 700; }
.cchg.up { color: var(--up); } .cchg.down { color: var(--down); } .cchg.flat { color: var(--faint); }

/* ---- crypto / metals cards ------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.cards.c6 { grid-template-columns: repeat(6,1fr); }
.mcard { border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 14px; background: var(--panel); }
.mcard .k { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mcard .k .code { font-size: 9px; color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.mcard .v { font-size: 18px; font-weight: 700; margin-top: 9px; letter-spacing: -.3px; }
.mcard .loc { font-size: 11px; color: var(--muted); margin-top: 4px; letter-spacing: -.2px; }
.mcard .d { font-size: 11px; font-weight: 600; margin-top: 4px; }
.mcard .d.up { color: var(--up); } .mcard .d.down { color: var(--down); } .mcard .d.flat { color: var(--faint); }
.mcard.usdt { background: linear-gradient(160deg, rgba(77,163,255,.08), rgba(255,255,255,.012));
  border-color: rgba(77,163,255,.22); }
.mcard.usdt .loc { color: var(--accent-2); font-weight: 600; }
.metals { grid-template-columns: repeat(4,1fr); }
.note { font-size: 11px; color: var(--faint); margin-top: 10px; }

/* ---- footer ----------------------------------------------------- */
footer { margin-top: 36px; border-top: 1px solid var(--line); padding: 22px var(--pad) 40px;
  color: var(--faint); font-size: 11.5px; }
.foot-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  align-items: center; max-width: var(--page-max); margin-inline: auto; }
.foot-brand { display: flex; align-items: center; gap: 9px; color: var(--muted); font-weight: 600; }
.foot-brand .m2 { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center;
  justify-content: center; color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.foot-brand .m2 svg { width: 15px; height: 15px; }
.foot-links { display: flex; gap: 16px; }
.foot-links a { color: var(--faint); }
.foot-dealer { margin-top: 14px; max-width: var(--page-max); margin-inline: auto; color: var(--dim); }

/* ---- METHODOLOGY PAGE ------------------------------------------- */
.meth { padding: 26px var(--pad) 8px; max-width: var(--page-max); margin-inline: auto; }
.meth__title { font-size: 28px; font-weight: 750; letter-spacing: -.6px; }
.meth__date { margin: 6px 0 0; font-size: 11.5px; color: var(--faint); }
.meth__intro { margin: 14px 0 0; font-size: 14px; color: var(--muted); line-height: 1.65; max-width: 78ch; }
.meth__grid { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--pad); margin-top: 8px; }
.meth__sec { margin-top: 22px; }
.meth__h { margin: 0 0 8px; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.meth__h::before { content: ""; width: 14px; height: 5px; border-radius: 3px; background: var(--accent); flex: none; }
.meth__p { margin: 0 0 8px; font-size: 13px; color: var(--muted); line-height: 1.75; }
.meth__obs { border: 1px solid rgba(77,163,255,.22); border-radius: var(--r-sm);
  background: linear-gradient(160deg, rgba(77,163,255,.07), rgba(255,255,255,.01));
  padding: 14px 16px; margin-top: 10px; }
.meth__obs b { color: var(--accent-2); }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2,1fr); }
  .cards.c6 { grid-template-columns: repeat(2,1fr); }
  .metals { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .vdiv { display: none; }
  .official { border-top: 1px solid var(--line-soft); padding-top: 20px; }
  .chips { grid-template-columns: 1fr 1fr; }
  .curboard { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav { display: none; }
  .util { border-left: 0; padding-left: 0; margin-left: auto; }
  .mtabs { display: flex; }
}
@media (max-width: 500px) {
  .wordmark small { display: none; }
}
@media (min-width: 900px) {
  .meth__grid { column-count: 2; column-gap: 44px; }
  .meth__grid .meth__sec { break-inside: avoid; margin: 0 0 22px; }
}

/* ============ legal pages: Privacy + Contact ============ */
.legal { max-width: 80ch; padding-block: 8px; }
.legal__title { font-size: 28px; font-weight: 750; letter-spacing: -.6px; color: var(--ink); margin: 0; }
.legal__updated { margin: 6px 0 0; font-size: 11.5px; color: var(--faint); }
.legal__sec { margin-top: 22px; }
.legal__h { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.legal__p { margin: 0 0 10px; font-size: 13.5px; color: var(--muted); line-height: 1.75; }
.legal__lead { font-size: 15px; color: var(--ink); }
.legal__muted { color: var(--faint); font-size: 12.5px; }
.legal__list { margin: 0 0 10px; padding-inline-start: 20px; }
.legal__list li { font-size: 13.5px; color: var(--muted); line-height: 1.7; margin-bottom: 6px; }
.legal a[href], .legal__mail { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.legal a[href]:hover { color: var(--accent); }
.legal__tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 4px 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.legal__table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 560px; }
.legal__table th, .legal__table td { text-align: start; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--muted); }
.legal__table thead th { background: var(--panel-2); color: var(--ink); font-weight: 700; border-bottom: 1px solid var(--line); }
.legal__table tbody tr:last-child td { border-bottom: 0; }

.legal--contact { max-width: 62ch; }
.contact-card { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 16px; padding: 15px 17px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); }
.contact-card__label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.contact-card__mail { font-size: 18px; font-weight: 800; color: var(--accent-2); text-decoration: none; }
.contact-card__mail:hover { text-decoration: underline; }
.foot-links a:hover { color: var(--accent-2); }

/* ============ interim cookie-consent banner ============ */
/* `.consent` sets a display value, which OVERRIDES the element's own
   `hidden` attribute — the consent script relies on `hidden` to keep the notice
   out of the way until it decides whether to show it. With JS disabled the script
   never runs, so the bar paints and can never be dismissed (its buttons are dead
   too). This restores what `hidden` is supposed to mean, and removes the one-frame
   flash before the script runs. GPC users were never affected — the script removes
   the element from the DOM outright, so the policy's promise to them always held. */
.consent[hidden] { display: none; }
.consent { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; background: var(--bg-grad-1); border-top: 1px solid var(--line); box-shadow: 0 -8px 26px rgba(0,0,0,.45); padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.consent__text { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.6; max-width: 92ch; }
.consent__link { color: var(--accent-2); font-weight: 700; text-decoration: underline; white-space: nowrap; }
.consent__btns { display: flex; gap: 8px; }
.consent__btn { font: inherit; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 7px 18px; cursor: pointer; border: 1px solid var(--line); }
.consent__btn--ghost { background: transparent; color: var(--muted); }
.consent__btn--ghost:hover { color: var(--ink); border-color: var(--faint); }
.consent__btn--go { background: var(--accent); color: #04101f; border-color: var(--accent); }
.consent__btn--go:hover { background: var(--accent-2); border-color: var(--accent-2); }

@media (min-width: 900px) {
  .consent { flex-direction: row; align-items: center; gap: 18px; }
  .consent__btns { margin-inline-start: auto; flex: none; }
}