/* ============================================================================
   ULTRA-GOOD — pink/black cinematic theme
   ----------------------------------------------------------------------------
   Site-wide design system, promoted from the /scroll living-vortex page.
   This is the single token layer for all three shells (marketing, app,
   operator). Shell-specific rules live in marketing.css / app.css /
   operator.css and consume the tokens defined here.

   Load order: ug.css FIRST, then the shell stylesheet.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* Surfaces — near-black, never pure #000, so shadows and glass still read */
  --bg:        #050506;
  --bg-2:      #08080b;
  --panel:     #0c0d12;
  --panel-2:   #0a0b0f;
  --raised:    #101118;

  /* Ink */
  --ink:       #f5f7fb;
  --ink-2:     #dbe0e9;
  /* Prose greys — bright enough to read as running text over the bloom.
     --prose is section ledes and captions; --prose-2 is uppercase eyebrows. */
  --prose:     #c2c9d6;
  --prose-2:   #aab2c0;
  --muted:     #9aa3b2;
  --dim:       #666e7b;

  /* Hairlines */
  --line:      rgba(255, 255, 255, .09);
  --line-2:    rgba(255, 255, 255, .16);
  --line-3:    rgba(255, 255, 255, .28);

  /* Signal — pink is the brand. One accent, used with intent. */
  --pink:      #ff2d6a;
  --pink-hot:  #ff0055;
  --pink-soft: #ff6b98;
  --pink-dim:  rgba(255, 45, 106, .14);
  --pink-line: rgba(255, 45, 106, .40);

  /* Secondary accents — gold for value/proof, mint for live status */
  --gold:      #f7b733;
  --gold-lite: #ffd98a;
  --mint:      #7ee0a8;
  --amber:     #ffb35c;
  --danger:    #ff5470;

  /* Type */
  --font-display: 'Saira Condensed', 'Arial Narrow', Impact, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Instrument Serif', Georgia, serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace;

  /* Radii — the cinematic direction is soft-cornered glass, not brutalist 0 */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  20px;
  --r-xl:  26px;
  --r-pill: 999px;

  /* Spacing rhythm */
  --s-1: 8px;
  --s-2: 14px;
  --s-3: 22px;
  --s-4: 34px;
  --s-5: 52px;
  --s-6: 80px;

  /* Depth */
  --shadow-text:  0 2px 30px rgba(0, 0, 0, .75), 0 1px 6px rgba(0, 0, 0, .6);
  --shadow-card:  inset 0 1px 0 rgba(255, 255, 255, .05), 0 40px 80px -60px #000;
  --shadow-lift:  0 24px 54px -26px rgba(255, 45, 106, .55);
  --glass:        blur(4px);

  /* Layout */
  --wrap:      1240px;
  --wrap-wide: 1400px;
  --gutter:    clamp(20px, 5vw, 64px);

  /* Motion */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --t-fast:    .18s;
  --t-mid:     .32s;
  --t-slow:    .6s;
}

/* -------------------------------------------------- legacy token aliases -- */
/* TRANSITIONAL. The retired "F — Manifesto" direction used these names, and
   pages still carrying un-rebuilt inline <style> blocks reference them. Without
   aliases those declarations resolve to nothing and render as broken colors.
   Delete each alias once no page references it:
     grep -rn "var(--signal)" *.php includes/                                */
:root {
  --signal:      var(--pink);      /* was oklch(58% 0.205 32) signal red */
  --signal-deep: var(--pink-hot);
  --ink-soft:    var(--ink-2);
  --rule:        var(--line-2);
  --pad-x:       var(--gutter);
  --maxw:        var(--wrap);
  --ok:          var(--mint);
  --font-mono-legacy: var(--font-mono);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--pink); color: #fff; }

/* No border-radius here — the outline already follows the element's own shape. */
:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}

/* --------------------------------------------------- ambient background -- */
/* A cheap, always-on stand-in for the /scroll film: three fixed pink/gold
   blooms over near-black. No images, no canvas, no frame sequence — so it can
   sit behind every page on the site without a payload cost. */
.ug-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 44% at 50% 8%,  rgba(255,  45, 106, .20), transparent 70%),
    radial-gradient(46% 38% at 88% 32%, rgba(255,   0,  85, .11), transparent 72%),
    radial-gradient(52% 40% at 8%  72%, rgba(247, 183,  51, .07), transparent 74%),
    var(--bg);
}

/* Fine grain + vignette so the flat blooms read as film, not as a CSS gradient */
.ug-ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 38%, rgba(0, 0, 0, .72) 100%);
}

/* Content sits above the ambient layer. Scoped to the flow containers on
   purpose — a bare `.ug-ambient ~ *` would also match the fixed chrome and
   nav panel and fight their `position: fixed`. */
.ug-ambient ~ main,
.ug-ambient ~ footer,
.ug-ambient ~ section,
.ug-ambient ~ .ug-flow { position: relative; z-index: 1; }

/* ----------------------------------------------------------- structure -- */
.ug-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.ug-wrap.wide { max-width: var(--wrap-wide); }

.ug-sec { padding: min(15vh, 150px) 0; position: relative; }

/* Anything with an id is a jump target; keep it clear of the fixed chrome. */
section[id], div[id].ug-marquee, [id].ug-sec { scroll-margin-top: 96px; }
.ug-sec.tight { padding: min(9vh, 90px) 0; }
.ug-sec.flush-top { padding-top: 0; }

/* A section that sits on its own slightly-raised slab */
.ug-sec.slab {
  background: linear-gradient(180deg, rgba(10, 11, 15, .72), rgba(5, 5, 6, .72));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  backdrop-filter: var(--glass);
}

.ug-rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* --------------------------------------------------------------- type --- */
.ug-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--prose-2);
  text-shadow: var(--shadow-text);
  margin: 0 0 var(--s-3);
}
.ug-eyebrow .d {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 12px 2px rgba(255, 45, 106, .6);
  flex: none;
}
.ug-eyebrow.gold .d { background: var(--gold); box-shadow: 0 0 12px 2px rgba(247, 183, 51, .7); }

/* Display headings — condensed italic caps, the load-bearing brand voice */
.ug-display,
.ug-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  line-height: .94;
  letter-spacing: .004em;
  margin: 0;
  text-shadow: var(--shadow-text);
}
.ug-h1 { font-size: clamp(2.4rem, 6.4vw, 5.4rem); }
.ug-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 5.4vw, 4.4rem);
  line-height: .94;
  letter-spacing: .004em;
  margin: 0;
  text-shadow: var(--shadow-text);
}
.ug-h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1;
  letter-spacing: .005em;
  margin: 0;
}
.ug-h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.4rem;
  line-height: 1.05;
  margin: 0;
}

/* Emphasis: pink for the claim, serif for the aside */
.ug-em { color: var(--pink); }
.ug-em-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-lite);
  text-transform: none;
  letter-spacing: 0;
}

.ug-lede {
  margin: var(--s-3) 0 0;
  max-width: 62ch;
  color: var(--prose);
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.64;
  text-shadow: var(--shadow-text);
}
.ug-lede b { color: var(--ink); font-weight: 600; }

.ug-label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}
.ug-label.pink { color: var(--pink); }
.ug-label.gold { color: var(--gold); }

/* --------------------------------------------------------------- grids -- */
.ug-grid { display: grid; gap: 20px; }
.ug-grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ug-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ug-grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ug-grid.auto { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ug-grid.tall { gap: 24px; }

@media (max-width: 980px) {
  .ug-grid.g3, .ug-grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .ug-grid.g2, .ug-grid.g3, .ug-grid.g4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- cards -- */
/* Glass panels keep their own solid-ish surface so text stays readable over
   the ambient bloom. */
.ug-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(14, 15, 20, .92), rgba(10, 11, 15, .92));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  backdrop-filter: var(--glass);
  box-shadow: var(--shadow-card);
}

/* Corner bloom — gold by default, pink when featured */
.ug-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .45;
  pointer-events: none;
  background: radial-gradient(120% 60% at 0% 0%, rgba(247, 183, 51, .12), transparent 58%);
}
.ug-card.pink::before {
  background: radial-gradient(120% 60% at 100% 0%, rgba(255, 45, 106, .16), transparent 60%);
  opacity: .5;
}
.ug-card.featured {
  border-color: var(--pink-line);
  box-shadow: 0 40px 90px -60px rgba(255, 45, 106, .5);
}
.ug-card.featured::before {
  background: radial-gradient(120% 70% at 100% 0%, rgba(255, 45, 106, .18), transparent 60%);
  opacity: .55;
}
.ug-card.lg { border-radius: var(--r-xl); padding: 34px 32px 30px; }
.ug-card.flat { box-shadow: none; background: rgba(10, 11, 15, .6); }

/* An interactive card (whole-surface link) */
.ug-card.link {
  transition: transform var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease);
}
.ug-card.link:hover {
  transform: translateY(-3px);
  border-color: var(--pink-line);
  box-shadow: 0 40px 90px -55px rgba(255, 45, 106, .6);
}

.ug-card > * { position: relative; }
.ug-card .k {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 2.6rem;
  line-height: .8;
  color: var(--pink);
  opacity: .85;
}
.ug-card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.6;
}
.ug-card .tag {
  margin-top: 18px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--gold-lite);
}
.ug-card.featured .tag { color: var(--pink-soft); }

/* Inline "read more" affordance inside a card */
.ug-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--pink);
  padding-bottom: 3px;
  transition: gap var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ug-more:hover { gap: 12px; color: var(--pink-soft); }

/* ------------------------------------------------------------- buttons -- */
.ug-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .98rem;
  line-height: 1;
  padding: 15px 26px;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

/* Primary — bright, the one conversion */
.ug-btn.primary {
  color: #08080b;
  background: linear-gradient(180deg, #fff, #e9edf4);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), var(--shadow-lift);
}
.ug-btn.primary:hover { transform: translateY(-2px); }

/* Pink — for in-page secondary conversions */
.ug-btn.pink {
  color: #fff;
  background: linear-gradient(180deg, var(--pink), var(--pink-hot));
  box-shadow: 0 20px 46px -22px rgba(255, 45, 106, .8);
}
.ug-btn.pink:hover { transform: translateY(-2px); }

/* Ghost */
.ug-btn.ghost {
  color: var(--ink);
  background: rgba(10, 11, 15, .4);
  border: 1px solid var(--line-2);
  font-size: .92rem;
  padding: 14px 22px;
}
.ug-btn.ghost:hover { border-color: var(--pink); background: var(--pink-dim); }

.ug-btn.sm { font-size: .84rem; padding: 10px 18px; }
.ug-btn .arw { transition: transform var(--t-fast) var(--ease); }
.ug-btn:hover .arw { transform: translate(3px, -3px); }

.ug-cta-row {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--s-4);
}
.ug-cta-row .meta {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

/* --------------------------------------------------------------- pills -- */
.ug-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .76rem;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  color: var(--muted);
  background: rgba(255, 255, 255, .03);
}
.ug-pill.live {
  color: var(--mint);
  border-color: rgba(126, 224, 168, .28);
  background: rgba(126, 224, 168, .08);
}
.ug-pill.pink {
  color: var(--pink-soft);
  border-color: var(--pink-line);
  background: var(--pink-dim);
}
.ug-pill.gold {
  color: var(--gold-lite);
  border-color: rgba(247, 183, 51, .3);
  background: rgba(247, 183, 51, .08);
}
.ug-pill .pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px 2px currentColor;
  flex: none;
}

/* ------------------------------------------------------------ marquee --- */
.ug-marquee {
  padding: 24px 0;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(8, 8, 12, .5);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ug-marquee .track { display: inline-flex; will-change: transform; }
.ug-marquee .track span {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  letter-spacing: .02em;
  color: var(--dim);
  padding: 0 26px;
  transition: color var(--t-mid) var(--ease);
}
.ug-marquee .track span.on { color: var(--ink); }
.ug-marquee .track span.sep { color: var(--pink); padding: 0 4px; }

/* --------------------------------------------------------------- stats -- */
.ug-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.ug-stats.s3 { grid-template-columns: repeat(3, 1fr); }
.ug-stat { border-top: 1px solid var(--line-2); padding-top: 22px; }
.ug-stat .num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: .9;
  color: var(--gold);
  letter-spacing: .005em;
  text-shadow: var(--shadow-text);
}
.ug-stat .num .u { color: var(--pink); font-size: .55em; margin-left: 2px; }
.ug-stat.pick .num { color: var(--pink); }
.ug-stat.pick .num .u { color: var(--gold); }
.ug-stat .cap {
  margin-top: 14px;
  color: var(--prose);
  font-size: .9rem;
  line-height: 1.5;
  max-width: 24ch;
  text-shadow: var(--shadow-text);
}
.ug-stat .label { margin-bottom: 10px; }

@media (max-width: 900px) {
  .ug-stats, .ug-stats.s3 { grid-template-columns: repeat(2, 1fr); gap: 34px 22px; }
}
@media (max-width: 520px) {
  .ug-stats, .ug-stats.s3 { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- ledger -- */
/* The them-vs-us comparison table. Two columns, pink-tinted on our side. */
.ug-ledger {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(8, 8, 12, .86);
  backdrop-filter: var(--glass);
}
.ug-ledger .head {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.25rem;
  padding: 20px 26px;
  border-bottom: 1px solid var(--line-2);
}
.ug-ledger .head.them { color: var(--muted); background: rgba(255, 255, 255, .02); }
.ug-ledger .head.us   { color: var(--ink);   background: rgba(255, 45, 106, .10); }
.ug-ledger .cell {
  padding: 17px 26px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
}
.ug-ledger .cell.them { background: rgba(255, 255, 255, .012); }
.ug-ledger .cell.us   { background: rgba(255, 45, 106, .045); }
.ug-ledger .cell .k { color: var(--muted); font-size: .86rem; }
.ug-ledger .cell .v {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--dim);
  white-space: nowrap;
}
.ug-ledger .cell.us .v { color: var(--ink); }
.ug-ledger .cell .v.hi { color: var(--gold); }

@media (max-width: 640px) {
  .ug-ledger .cell { padding: 14px 18px; }
  .ug-ledger .head { padding: 16px 18px; font-size: 1.1rem; }
  .ug-ledger .cell .k { font-size: .8rem; }
  .ug-ledger .cell .v { font-size: 1.05rem; }
}

/* ----------------------------------------------------------------- faq -- */
.ug-faq { border-top: 1px solid var(--line-2); }
.ug-faq .item { border-bottom: 1px solid var(--line); padding: 26px 0; }
.ug-faq .q {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.35rem;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
  text-shadow: var(--shadow-text);
}
.ug-faq .a {
  margin: 12px 0 0;
  max-width: 76ch;
  color: var(--prose);
  font-size: .98rem;
  line-height: 1.62;
  text-shadow: var(--shadow-text);
}

/* ----------------------------------------------------------- pull quote -- */
.ug-pull {
  padding: min(14vh, 130px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(80% 120% at 50% 50%, rgba(255, 45, 106, .12), transparent 70%),
    rgba(8, 8, 12, .7);
  text-align: center;
}
.ug-pull .ug-h2 { max-width: 30ch; margin: 0 auto; }
.ug-pull .attr {
  margin-top: var(--s-4);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
}
.ug-pull .attr b { color: var(--pink); }

/* ------------------------------------------------------------ phases ---- */
.ug-phase .k {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 3rem;
  line-height: .8;
  color: var(--pink);
  opacity: .85;
}
.ug-phase .stamp {
  margin-top: 20px;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}

/* -------------------------------------------------------------- forms --- */
.ug-field { display: block; margin-bottom: var(--s-3); }
.ug-field > label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.ug-input,
.ug-field input[type=text],
.ug-field input[type=email],
.ug-field input[type=tel],
.ug-field input[type=url],
.ug-field input[type=password],
.ug-field input[type=number],
.ug-field select,
.ug-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: .96rem;
  color: var(--ink);
  background: rgba(5, 5, 6, .7);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.ug-input:focus,
.ug-field input:focus,
.ug-field select:focus,
.ug-field textarea:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px var(--pink-dim);
}
.ug-input::placeholder, .ug-field textarea::placeholder { color: var(--dim); }
.ug-field .hint { margin-top: 7px; font-size: .8rem; color: var(--dim); }
.ug-field .err  { margin-top: 7px; font-size: .8rem; color: var(--danger); }

/* -------------------------------------------------------------- tables -- */
.ug-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.ug-table th {
  text-align: left;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.ug-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.ug-table tbody tr { transition: background var(--t-fast) var(--ease); }
.ug-table tbody tr:hover { background: rgba(255, 255, 255, .025); }
.ug-table .num { font-variant-numeric: tabular-nums; text-align: right; }

/* --------------------------------------------------------------- notes -- */
/* A note is just a small card, so it uses the card language — accent-tinted
   fill, full hairline, corner bloom — rather than a colored bar down one edge. */
.ug-note {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--pink-line);
  background: var(--pink-dim);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  color: var(--ink-2);
  font-size: .92rem;
  line-height: 1.6;
}
.ug-note::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 70% at 0% 0%, rgba(255, 45, 106, .16), transparent 60%);
}
.ug-note > * { position: relative; }

.ug-note.gold {
  border-color: rgba(247, 183, 51, .34);
  background: rgba(247, 183, 51, .1);
}
.ug-note.gold::before {
  background: radial-gradient(120% 70% at 0% 0%, rgba(247, 183, 51, .16), transparent 60%);
}
.ug-note.mint {
  border-color: rgba(126, 224, 168, .32);
  background: rgba(126, 224, 168, .09);
}
.ug-note.mint::before {
  background: radial-gradient(120% 70% at 0% 0%, rgba(126, 224, 168, .15), transparent 60%);
}

/* --------------------------------------------------------------- prose -- */
/* For long-form pages (legal, news, playbooks) that need readable defaults. */
.ug-prose { max-width: 74ch; color: var(--ink-2); font-size: 1.02rem; line-height: 1.72; }
.ug-prose h2 { margin: 2.4em 0 .6em; }
.ug-prose h3 { margin: 2em 0 .5em; }
.ug-prose h4 { margin: 1.8em 0 .4em; }
.ug-prose p, .ug-prose ul, .ug-prose ol { margin: 0 0 1.15em; }
.ug-prose ul, .ug-prose ol { padding-left: 1.3em; }
.ug-prose li { margin-bottom: .5em; }
.ug-prose a { color: var(--pink-soft); border-bottom: 1px solid var(--pink-line); }
.ug-prose a:hover { color: var(--pink); border-bottom-color: var(--pink); }
.ug-prose strong { color: var(--ink); font-weight: 600; }
.ug-prose code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: rgba(255, 255, 255, .06);
  border-radius: 4px;
  padding: 2px 6px;
}
.ug-prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.ug-prose blockquote {
  margin: 1.6em 0;
  padding-left: 20px;
  border-left: 2px solid var(--pink);
  color: var(--muted);
  font-style: italic;
}

/* ------------------------------------------------------------- motion --- */
/* .ug-reveal elements start hidden and are released by ug.js on intersect.
   The .ug-motion class is set on <html> by ug.js only when motion is allowed,
   so a no-JS or reduced-motion visitor never sees hidden content. */
html.ug-motion .ug-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
html.ug-motion .ug-reveal.in { opacity: 1; transform: none; }

/* Stagger children of a revealed group */
html.ug-motion .ug-reveal[data-delay="1"] { transition-delay: .08s; }
html.ug-motion .ug-reveal[data-delay="2"] { transition-delay: .16s; }
html.ug-motion .ug-reveal[data-delay="3"] { transition-delay: .24s; }
html.ug-motion .ug-reveal[data-delay="4"] { transition-delay: .32s; }
html.ug-motion .ug-reveal[data-delay="5"] { transition-delay: .40s; }

/* Scroll-progress hairline */
.ug-scanline {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: 70;
  background: linear-gradient(90deg, var(--pink), var(--gold));
  box-shadow: 0 0 12px rgba(255, 45, 106, .6);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ug-reveal { opacity: 1 !important; transform: none !important; }
  .ug-marquee .track { transform: none !important; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ------------------------------------------------------------- helpers -- */
.ug-center { text-align: center; }
.ug-center .ug-eyebrow { justify-content: center; }
.ug-center .ug-lede { margin-left: auto; margin-right: auto; }
.ug-mt-1 { margin-top: var(--s-1); }
.ug-mt-2 { margin-top: var(--s-2); }
.ug-mt-3 { margin-top: var(--s-3); }
.ug-mt-4 { margin-top: var(--s-4); }
.ug-mt-5 { margin-top: var(--s-5); }
.ug-mt-6 { margin-top: var(--s-6); }
.ug-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}