/* ==========================================================================
   Gravitas Media — marketing site
   Design tokens taken from the live site's computed styles so the rebuild is
   visually faithful: #151515 ground, white/#AAAAAA type, 3%-white cards, and the
   six-colour pastel accent palette.
   Hand-written CSS, no framework and no build step. This file plus site.js is ~7KB
   gzipped, covering both the marketing site and the dashboard; the React build it
   replaces shipped a 294KB JS bundle and 63KB of CSS.
   ========================================================================== */

:root {
  --bg: #151515;
  --bg-alt: #191919;
  --text: #ffffff;
  --muted: #aaaaaa;
  --muted-dim: #717171;

  --card: rgba(255, 255, 255, 0.03);
  --card-hover: rgba(255, 255, 255, 0.055);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  --blue: #88a2ff;
  --pink: #ff84e4;
  --yellow: #ffe03d;
  --green: #78d692;
  --purple: #d987ff;
  --orange: #ff965a;

  --cream: #f5f1e8;

  --font: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

  --wrap: 1180px;
  --radius: 16px;
  --radius-lg: 24px;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; }

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cream);
  color: #151515;
  padding: 10px 16px;
  z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease,
    opacity 0.18s ease;
  white-space: nowrap;
}
.btn--light { background: #ffffff; color: #151515; }
.btn--light:hover { transform: translateY(-2px); opacity: 0.92; }
.btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.07); transform: translateY(-2px); }
.btn--block { width: 100%; }

/* ---------------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(21, 21, 21, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 72px;
}

.nav__links {
  display: flex;
  gap: 34px;
  margin-left: auto;
  font-size: 15px;
  color: var(--muted);
}
.nav__links a { transition: color 0.16s ease; }
.nav__links a:hover { color: var(--text); }
.nav__cta { padding: 11px 24px; }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  padding: 8px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}
.nav__mobile {
  display: none;
  flex-direction: column;
  padding: 8px 24px 20px;
  border-top: 1px solid var(--border);
}
.nav__mobile a {
  padding: 13px 0;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.nav__mobile[hidden] { display: none; }

/* --------------------------------------------------------------------- hero */

.hero {
  position: relative;
  /* The live hero is a full-viewport panel with the content optically centred.
     100svh, not 100vh, so mobile browser chrome does not push the CTAs off-screen. */
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 128px 0 64px;
  text-align: center;
  overflow: hidden;
}
/* The live bloom is three heavily blurred discs sitting behind the hero copy — blue
   upper-left, pink upper-right, yellow low-centre — each at 30% opacity. Reproduced as
   real circles rather than a gradient stack so the falloff matches. */
.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
  filter: blur(80px);
}
.hero__orb {
  position: absolute;
  border-radius: 50%;
}
.hero__orb--1 { width: 400px; height: 400px; top: 10%; left: -80px; background: var(--blue); }
.hero__orb--2 { width: 350px; height: 350px; top: 14%; right: -80px; background: var(--pink); }
.hero__orb--3 { width: 300px; height: 300px; top: 50%; left: 50%; margin-left: -150px; background: var(--yellow); }

.hero__inner { position: relative; max-width: 848px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
  margin-bottom: 34px;
  border: 1px solid rgba(136, 162, 255, 0.4);
  border-radius: 999px;
  background: rgba(136, 162, 255, 0.1);
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
}
.pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

.hero__title { display: block; margin-bottom: 26px; }
.hero__title-main,
.hero__title-sub { display: block; }
.hero__title-main {
  font-size: clamp(44px, 8.2vw, 80px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, #ffffff 0%, var(--blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__title-sub {
  margin-top: 14px;
  font-size: clamp(22px, 3.5vw, 40px);
  font-weight: 600;
  /* Positive tracking, not negative — the live subtitle is deliberately airy. */
  letter-spacing: 0.05em;
  line-height: 1.5;
  background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 50%, var(--yellow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__body {
  max-width: 800px;
  margin: 0 auto 38px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.6;
}
.hero__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero__actions .btn { padding: 14px 32px; font-size: 16px; }

/* ----------------------------------------------------------------- sections */

.section { padding: 96px 0; }
/* The live site runs one flat #151515 from nav to footer — no alternating bands and no
   rules between sections. Kept as a no-op class so the markup still reads as intentional. */
.section--alt { background: transparent; }

.section__title {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.5;
  text-align: center;
}
.section__lead {
  max-width: 620px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 17px;
  text-align: center;
}

.grid { display: grid; gap: 20px; }
.grid--services {
  margin-top: 56px;
  /* 300px keeps this at three across on a desktop, matching the live card proportions,
     and still collapses to two and then one on narrower screens. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid--pillars {
  margin-top: 48px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}

/* ------------------------------------------------------------ service cards */

.card {
  position: relative;
  padding: 32px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.card:hover {
  background: var(--card-hover);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  transform: translateY(-3px);
}
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 24px;
  border-radius: 8px;
  /* Solid accent with a dark glyph — the live cards lead with a block of colour,
     not a tinted chip. */
  background: var(--accent);
  color: #151515;
}
.card__icon svg { width: 28px; height: 28px; }
.card__title {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.card__body { color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ------------------------------------------------------------------ founder */

.founder {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}
.founder__card {
  padding: 32px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: center;
}
.founder__initials {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: #151515;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.founder__name { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.founder__role {
  margin: 6px 0 16px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.founder__bio { color: var(--muted); font-size: 15px; }

.founder__brands-intro {
  margin-bottom: 20px;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
}
.brands {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.brands li {
  padding: 8px 16px;
  background: color-mix(in srgb, var(--accent) 12.5%, transparent);
  border: 2px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.18s ease;
}
.brands li:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ----------------------------------------------------------------- approach */

.approach__copy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
  max-width: 900px;
  margin: 40px auto 0;
  color: var(--muted);
  font-size: 16px;
}

.pillar {
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.pillar__bar {
  display: block;
  width: 34px;
  height: 3px;
  margin-bottom: 18px;
  border-radius: 2px;
  background: var(--accent);
}
.pillar__title { margin-bottom: 9px; font-size: 17px; font-weight: 700; }
.pillar__body { color: var(--muted); font-size: 14.5px; }

/* ------------------------------------------------------------------ contact */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.contact__intro .section__title,
.contact__intro .section__lead { text-align: left; margin-left: 0; }

.contact__methods { margin-top: 36px; display: grid; gap: 18px; }
.contact__methods li {
  padding: 18px 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.contact__label {
  display: block;
  margin-bottom: 4px;
  color: var(--muted-dim);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.contact__methods a { font-size: 16px; font-weight: 600; }
.contact__methods a:hover { color: var(--blue); }

.contact__form {
  padding: 32px 30px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.field { display: block; margin-bottom: 18px; }
.field__label {
  display: block;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}
.field__label em { color: var(--pink); font-style: normal; }
.field__input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.field__input::placeholder { color: #6a6a6a; }
.field__input:focus {
  border-color: rgba(136, 162, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
}
.field__input--area { resize: vertical; min-height: 120px; }

/* Kept in the layout but visually gone and out of the tab order. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.flashes { margin-bottom: 20px; display: grid; gap: 10px; }
.flash {
  padding: 12px 15px;
  border-radius: 10px;
  font-size: 14px;
  border: 1px solid;
}
.flash--success {
  background: rgba(120, 214, 146, 0.12);
  border-color: rgba(120, 214, 146, 0.4);
  color: var(--green);
}
.flash--error {
  background: rgba(255, 132, 228, 0.1);
  border-color: rgba(255, 132, 228, 0.4);
  color: var(--pink);
}
.flash--info {
  background: rgba(136, 162, 255, 0.1);
  border-color: rgba(136, 162, 255, 0.4);
  color: var(--blue);
}

/* ------------------------------------------------------------------- footer */

.footer { padding: 56px 0 40px; border-top: 1px solid var(--border); }
.footer__inner { text-align: center; }
.footer__brand { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.footer__tag { margin-top: 4px; color: var(--purple); font-size: 14px; font-weight: 600; }
.footer__links {
  display: flex;
  gap: 26px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 26px 0 22px;
  color: var(--muted);
  font-size: 14px;
}
.footer__links a:hover { color: var(--text); }
.footer__copy { color: var(--muted-dim); font-size: 13px; }

/* ------------------------------------------------------------- error pages */

.errorpage {
  display: grid;
  place-items: center;
  min-height: 100vh;
  text-align: center;
  padding: 40px 24px;
}
.errorpage__code {
  font-size: clamp(64px, 14vw, 132px);
  font-weight: 800;
  letter-spacing: -0.05em;
  background: linear-gradient(96deg, #ffffff, #b9b2ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.errorpage__title { margin: 12px 0 10px; font-size: 26px; font-weight: 700; }
.errorpage__body { max-width: 460px; margin: 0 auto 30px; color: var(--muted); }

/* -------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .founder { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 760px) {
  .nav__links,
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav__mobile.is-open { display: flex; }
  .hero { padding: 64px 0 80px; }
  .section { padding: 72px 0; }
  .hero__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------- auth screen */

.authpage {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 48px 24px;
  background:
    radial-gradient(48% 42% at 50% 0%, rgba(136, 162, 255, 0.14), transparent 70%),
    var(--bg);
}
.authcard {
  width: 100%;
  max-width: 420px;
  padding: 38px 34px 30px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.authcard__brand {
  display: block;
  margin-bottom: 26px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--muted);
}
.authcard__brand:hover { color: var(--text); }
.authcard__title { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; }
.authcard__sub { margin: 7px 0 26px; color: var(--muted); font-size: 14.5px; }
.authcard__foot {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--muted-dim);
  font-size: 13px;
}
.authcard__foot a { color: var(--blue); }

.checkline {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 22px;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}
.checkline input { accent-color: var(--blue); width: 15px; height: 15px; }

/* ==========================================================================
   Dashboard
   Same tokens as the marketing site so the two halves feel like one product.
   ========================================================================== */

.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }

.side {
  display: flex;
  flex-direction: column;
  padding: 26px 20px 22px;
  background: var(--bg-alt);
  border-right: 1px solid var(--border);
}
.side__brand { display: block; margin-bottom: 30px; line-height: 1.2; }
.side__brand-name { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.side__brand-sub {
  display: block;
  color: var(--purple);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.side__nav { display: grid; gap: 3px; }
.side__link {
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
}
.side__link:hover { background: rgba(255, 255, 255, 0.045); color: var(--text); }
.side__link.is-active {
  background: rgba(136, 162, 255, 0.13);
  color: var(--blue);
  font-weight: 600;
}
.side__foot { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border); }
.side__user { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.side__role { margin-bottom: 12px; color: var(--muted-dim); font-size: 12px; }
.side__signout {
  padding: 0;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.side__signout:hover { color: var(--pink); }

.main { padding: 30px 34px 64px; min-width: 0; }
.main__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.main__title { font-size: 27px; font-weight: 700; letter-spacing: -0.025em; }
.main__sub { margin-top: 5px; color: var(--muted); font-size: 14px; }
.main__sub a { color: var(--blue); }
.headactions { display: flex; gap: 10px; }
.headactions .btn { padding: 10px 20px; font-size: 14px; }

/* ------------------------------------------------------------------ filters */

.filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.segmented {
  display: inline-flex;
  padding: 3px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.segmented__btn {
  padding: 7px 14px;
  background: none;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.segmented__btn:hover { color: var(--text); }
.segmented__btn.is-active { background: rgba(136, 162, 255, 0.18); color: var(--blue); }

.select {
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.select option { background: #1e1e1e; color: var(--text); }

/* --------------------------------------------------------------------- KPIs */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.kpi {
  position: relative;
  padding: 18px 18px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--tone, var(--blue));
}
.kpi--blue { --tone: var(--blue); }
.kpi--purple { --tone: var(--purple); }
.kpi--green { --tone: var(--green); }
.kpi--yellow { --tone: var(--yellow); }
.kpi--pink { --tone: var(--pink); }
.kpi--orange { --tone: var(--orange); }

.kpi__label {
  color: var(--muted-dim);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.kpi__value {
  margin: 8px 0 6px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.kpi__delta { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.kpi__delta span { color: var(--muted-dim); font-weight: 500; }
.kpi__delta.is-up { color: var(--green); }
.kpi__delta--none { color: var(--muted-dim); font-weight: 500; }

/* ------------------------------------------------------------------- panels */

.panel {
  padding: 22px 22px 24px;
  margin-bottom: 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.panel__title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.panel__link { color: var(--blue); font-size: 13.5px; font-weight: 600; }
.panel__note { color: var(--muted-dim); font-size: 13px; }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 22px; }
.cols .panel { margin-bottom: 0; }

.legend { display: flex; gap: 16px; }
.legend__item { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; }
.swatch { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.swatch--blue { background: var(--blue); }
.swatch--purple { background: var(--purple); }

/* -------------------------------------------------------------------- chart */

.chart { position: relative; }
.chart svg { display: block; overflow: visible; }
/* The hidden attribute must win over display:flex, or the readout sits on the chart
   before the first hover. */
.chart__readout[hidden] { display: none; }
.chart__readout {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 7px 11px;
  background: #202020;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}
.chart__readout span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.chart__readout i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* ---------------------------------------------------------------- platforms */

.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 14px; }
.platform {
  padding: 16px 16px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 13px;
}
.platform.is-off { opacity: 0.72; }
.platform__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.platform__name { font-size: 14.5px; font-weight: 700; }
.platform__figure { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.platform__figure span { color: var(--muted-dim); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.platform__meta { margin-top: 5px; color: var(--muted); font-size: 12.5px; }
.platform__caps { margin-top: 8px; color: var(--muted-dim); font-size: 11.5px; font-style: italic; }
.platform__note { color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* --------------------------------------------------------------------- tags */

.tag {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.tag--on { background: rgba(120, 214, 146, 0.16); color: var(--green); }
.tag--off { background: rgba(255, 255, 255, 0.07); color: var(--muted-dim); }
.tag--warn { background: rgba(255, 150, 90, 0.16); color: var(--orange); }

.chip {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 8px;
  background: rgba(136, 162, 255, 0.13);
  border-radius: 999px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}
.chip--warn { background: rgba(255, 150, 90, 0.16); color: var(--orange); }

/* ------------------------------------------------------------------- tables */

.tablewrap { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }
.tablewrap--scroll { max-height: 460px; overflow-y: auto; }

.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  padding: 0 12px 10px;
  color: var(--muted-dim);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.table td { padding: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.045); }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: rgba(255, 255, 255, 0.022); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .strong { font-weight: 700; color: var(--green); }
.table .dim { color: var(--muted-dim); white-space: nowrap; }
.table tr.is-paused { opacity: 0.55; }

.cell-title { min-width: 220px; max-width: 380px; }
.cell-title a { font-weight: 600; }
.cell-title a:hover { color: var(--blue); }
.cell-actions { text-align: right; white-space: nowrap; }

.linkbtn {
  padding: 0;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.linkbtn:hover { color: var(--blue); }

.footnote { margin-top: 14px; color: var(--muted-dim); font-size: 12px; }
.empty { padding: 22px 0; color: var(--muted); font-size: 14px; text-align: center; }
.empty a { color: var(--blue); }

/* ------------------------------------------------------------------- alerts */

.alerts { display: grid; gap: 12px; }
.alert { padding: 13px 15px; background: rgba(255, 150, 90, 0.06); border: 1px solid rgba(255, 150, 90, 0.24); border-radius: 11px; }
.alert__title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; }
.alert__body { margin-top: 5px; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------- runs */

.runs { display: grid; gap: 2px; }
.run {
  display: grid;
  grid-template-columns: 10px 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  font-size: 13px;
}
.run:last-child { border-bottom: 0; }
.run__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-dim); }
.run__dot--ok { background: var(--green); }
.run__dot--error { background: var(--pink); }
.run__dot--skipped { background: var(--muted-dim); }
.run__dot--running { background: var(--yellow); }
.run__platform { color: var(--text); font-weight: 600; text-transform: capitalize; }
.run__detail { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run__when { color: var(--muted-dim); white-space: nowrap; }

/* ------------------------------------------------------------------ addform */

.addform__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; align-items: end; }
.addform__row .field--grow { grid-column: span 2; min-width: 260px; }
.addform__row .field { margin-bottom: 0; }
.addform .btn { margin-top: 16px; }
.addform__hint { margin-top: 14px; color: var(--muted-dim); font-size: 12.5px; line-height: 1.6; max-width: 760px; }
.opt { color: var(--muted-dim); font-weight: 500; text-transform: none; letter-spacing: 0; }

.caption { color: var(--muted); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 14px 20px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
  }
  .side__brand { margin-bottom: 0; }
  .side__nav { display: flex; gap: 4px; }
  .side__foot { margin: 0 0 0 auto; padding-top: 0; border-top: 0; text-align: right; }
  .side__role { display: none; }
  .main { padding: 22px 18px 56px; }
  .addform__row .field--grow { grid-column: span 1; }
}

/* ==========================================================================
   Campaign report
   Matches the approved design: near-black ground, solid panels, a serif display
   title, and the standard data-viz accent set (blue/orange/green/amber/purple)
   rather than the marketing site's pastels — this surface is a document, not a
   brand page.
   ========================================================================== */

:root {
  --report-bg: #0b0b0b;
  --panel: #141414;
  --panel-border: rgba(255, 255, 255, 0.075);
  /* System serif: the display face costs zero bytes and no CSP exemption. */
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

body.dash { background: var(--report-bg); }
body.dash .side { background: #0e0e0e; }
body.dash .panel,
body.dash .tile {
  background: var(--panel);
  border-color: var(--panel-border);
}

/* -------------------------------------------------------------- report head */

.report__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 20px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--panel-border);
}
.report__title {
  grid-column: 1;
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.report__badge {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.report__meta {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  color: var(--muted);
  font-size: 14px;
}
.report__meta b { color: var(--text); font-weight: 600; }
.report__gen {
  grid-column: 2;
  justify-self: end;
  align-self: end;
  color: var(--muted-dim);
  font-size: 13px;
  text-align: right;
}
.warn-text { color: var(--orange); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge--warn {
  background: rgba(234, 179, 8, 0.1);
  border-color: rgba(234, 179, 8, 0.32);
  color: #eab308;
}
.badge--live {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.32);
  color: #10b981;
}
.badge--pending {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-strong);
  color: var(--muted);
}

/* -------------------------------------------------------------------- tiles */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.tile {
  padding: 18px 18px 16px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
}
.tile__swatch {
  display: block;
  width: 10px;
  height: 10px;
  margin-bottom: 16px;
  border-radius: 3px;
}
.tile__label {
  color: var(--muted-dim);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1.35;
}
.tile__value {
  margin: 8px 0 5px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tile__exact { color: var(--muted-dim); font-size: 12.5px; }

/* ------------------------------------------------------------------- charts */

.report__charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 22px;
  margin-bottom: 22px;
}
.report__charts .panel { margin-bottom: 0; }

.panel__head--stack { display: block; }
.panel__sub { margin-top: 5px; color: var(--muted); font-size: 13.5px; }

.hbars { display: grid; gap: 13px; }
.hbar {
  display: grid;
  grid-template-columns: minmax(96px, 152px) minmax(0, 1fr) 64px;
  align-items: center;
  gap: 14px;
}
.hbar__label {
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hbar__track {
  height: 14px;
  background: rgba(255, 255, 255, 0.055);
  border-radius: 8px;
  overflow: hidden;
}
.hbar__fill { display: block; height: 100%; border-radius: 8px; }
.hbar__value {
  text-align: right;
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.gchart svg { display: block; }
.legend--chart {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12.5px;
}
.legend--chart li { display: inline-flex; align-items: center; gap: 7px; }

/* ------------------------------------------------------------- report table */

.table--report td { padding: 14px 12px; }
.cell-creator { min-width: 190px; }
.cell-creator a { font-weight: 700; font-size: 14px; }
.cell-creator a:hover { color: var(--blue); }
.cell-handle { display: block; margin-top: 2px; color: var(--muted-dim); font-size: 12.5px; }
.cell-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--muted);
}
.cell-link:hover { color: var(--blue); text-decoration: underline; }

.pill {
  display: inline-block;
  padding: 3px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.table .rate { color: #a78bfa; font-weight: 700; }

/* ---------------------------------------------------------- campaign index */

.camplist { display: grid; gap: 12px; margin-bottom: 22px; }
.camp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.camp:hover { border-color: var(--border-strong); }
.camp__main { display: block; min-width: 0; }
.camp__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.camp__name {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.camp__head .badge { padding: 4px 10px; font-size: 11.5px; }
.camp__meta { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; }

.camp__figures { display: flex; gap: 30px; margin: 0; }
.camp__figures dt {
  color: var(--muted-dim);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.camp__figures dd {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.camp__figures .rate { color: #a78bfa; }

/* ------------------------------------------------------------------- print */

/* A campaign report gets printed and PDF'd for clients, so it must survive that.
   Both charts are server-rendered SVG/CSS precisely so this works. */
@media print {
  .no-print { display: none !important; }
  body.dash { background: #fff; color: #111; }
  .side, .main__head, .addform, .filters, .headactions { display: none !important; }
  .main { padding: 0; }
  body.dash .panel, body.dash .tile {
    background: #fff;
    border-color: #d4d4d4;
    break-inside: avoid;
  }
  .report__title, .tile__value, .camp__name { color: #111; }
  .tile__label, .tile__exact, .report__meta, .panel__sub, .footnote { color: #555; }
  .report__charts { grid-template-columns: 1fr 1fr; }
  a { text-decoration: none; color: #111; }
}

@media (max-width: 780px) {
  .report__head { grid-template-columns: 1fr; }
  .report__badge, .report__gen { grid-column: 1; justify-self: start; text-align: left; }
  .camp { grid-template-columns: 1fr; }
  .camp__figures { gap: 22px; }
}

/* ------------------------------------------------- dashboard entry point */

/* Sits between the section anchors and the "Get Started" CTA. Deliberately quieter
   than the CTA — a returning client needs to find it, but converting a new visitor is
   still the header's main job. */
.nav__portal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.nav__portal:hover {
  color: var(--text);
  border-color: rgba(136, 162, 255, 0.55);
  background: rgba(136, 162, 255, 0.09);
}
.nav__portal-icon { display: inline-flex; color: var(--blue); }

.side__back {
  display: block;
  margin-bottom: 10px;
  color: var(--muted-dim);
  font-size: 13px;
}
.side__back:hover { color: var(--blue); }

@media (max-width: 760px) {
  /* The mobile panel carries these links instead. */
  .nav__portal { display: none; }
}

@media (max-width: 900px) {
  /* The dashboard sidebar collapses to a horizontal bar; the back-link would crowd it. */
  body.dash .side__back { display: none; }
}

/* ================================================== wizard, pickers, admin */

.side__cta {
  display: block;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(136, 162, 255, 0.13);
  border: 1px solid rgba(136, 162, 255, 0.32);
  border-radius: 10px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.side__cta:hover { background: rgba(136, 162, 255, 0.2); }

.side__account { display: block; margin-bottom: 10px; }
.side__account:hover .side__user { color: var(--blue); }
.side__account.is-active .side__user { color: var(--blue); }
.side__account .side__user { display: block; }
.side__account .side__role { display: block; margin-bottom: 0; }

/* ------------------------------------------------------------- step tracker */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.stepitem > a,
.stepitem > span {
  display: block;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  border-top: 2px solid rgba(255, 255, 255, 0.1);
}
.stepitem > a:hover { border-color: var(--border-strong); }
.stepitem.is-current > a,
.stepitem.is-current > span { border-top-color: var(--blue); }
.stepitem.is-done > a { border-top-color: var(--green); }
.stepitem.is-locked > span { opacity: 0.5; }

.stepitem__num {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-bottom: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}
.stepitem.is-current .stepitem__num { background: rgba(136, 162, 255, 0.22); color: var(--blue); }
.stepitem.is-done .stepitem__num { background: rgba(120, 214, 146, 0.2); color: var(--green); }
.stepitem__label {
  display: block;
  color: var(--muted-dim);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.stepitem__value {
  display: block;
  margin-top: 3px;
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------------------------------------------------------------- pickers */

.picker { display: grid; gap: 8px; }
.picker__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.picker__item:hover {
  border-color: rgba(136, 162, 255, 0.45);
  background: rgba(136, 162, 255, 0.06);
}
.picker__name { grid-column: 1; font-size: 15px; font-weight: 600; }
.picker__meta { grid-column: 1; color: var(--muted); font-size: 12.5px; }
.picker__go { grid-column: 2; grid-row: 1 / span 2; color: var(--muted-dim); font-size: 17px; }
.picker__item:hover .picker__go { color: var(--blue); }

/* -------------------------------------------------------------------- forms */

.inlineform {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--panel-border);
}
.inlineform .field { margin-bottom: 0; min-width: 240px; }
.inlineform .field--grow { flex: 1; }

.stackform { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--panel-border); }
.stackform:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.stackform__title {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
}
.stackform .btn { margin-top: 16px; }
.stackform .field { margin-bottom: 14px; }
.stackform .addform__row .field { margin-bottom: 0; }

.panel--narrow { max-width: 620px; }

/* ------------------------------------------------------- client groups, admin */

.clientgroup { margin-bottom: 30px; }
.clientgroup__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--panel-border);
}
.clientgroup__name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.clientgroup__name a:hover { color: var(--blue); }
.clientgroup__add { color: var(--blue); font-size: 13px; font-weight: 600; }

.empty--tight { padding: 12px 0; text-align: left; }

.rowactions { display: flex; gap: 14px; justify-content: flex-end; flex-wrap: wrap; }

.deflist { display: grid; gap: 14px; margin: 0; }
.deflist dt {
  color: var(--muted-dim);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.deflist dd { margin: 3px 0 0; font-size: 14.5px; }

@media (max-width: 700px) {
  .steps { grid-template-columns: 1fr; }
  .rowactions { justify-content: flex-start; }
}

/* Connected-accounts table needs a bolder first line than a plain link. */
.cell-strong { display: block; font-weight: 700; font-size: 14px; }
.addform__hint p { margin-bottom: 7px; }
.addform__hint p:last-child { margin-bottom: 0; }
.addform__hint code {
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  font-size: 12px;
}
.addform__hint a { color: var(--blue); }

/* ===================================================== logo (real artwork) */

/* The supplied artwork has an opaque white background and black "MEDIA", so on the dark
   UI it sits on a white chip. Keying the white out is not an option: the wordmark is a
   pastel gradient whose light end is within a few percent of white, so transparency
   would eat the "G" and leave the logo looking washed out. The chip matches the
   artwork's own background, so the two read as one shape. */
.logo {
  display: block;
  background: #ffffff;
  border-radius: 7px;
  padding: 5px 8px;
  line-height: 0;
}
.logo img { display: block; width: 100%; height: auto; }

.logo--nav { width: 138px; }
.logo--footer { width: 176px; margin: 0 auto 10px; }
.logo--auth { width: 150px; }
.logo--side { width: 128px; margin-bottom: 8px; }

.nav__logo {
  display: block;
  flex: 0 0 auto;
  background: none;
  border-radius: 0;
  padding: 0;
  line-height: 0;
}

.authcard__brand { line-height: 0; display: block; }

@media (max-width: 760px) {
  .logo--nav { width: 118px; }
}

/* Printed reports want the mark at its natural contrast on white paper. */
@media print {
  .logo { background: none; padding: 0; }
}

/* ==========================================================================
   Orbit™ campaign report
   ========================================================================== */

.orbit__head { margin-bottom: 22px; }
.orbit__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.orbit__mark {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(96deg, #E9A6E4, #C89BE8 60%, #B9A9E8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.orbit__tagline { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; }
.orbit__tagline b { color: var(--text); font-weight: 600; }

.orbit__title {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-bottom: 12px;
  background: linear-gradient(96deg, #F0C4EC 6%, #D9B6F0 52%, #C3AEF0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.orbit__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  color: var(--muted);
  font-size: 14px;
}
.orbit__meta b { color: var(--text); font-weight: 600; }

.orbit__synced {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  font-size: 13px;
}
.orbit__synced--muted { color: var(--muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot--live { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18); }

.orbit__stamp { margin-top: 8px; color: var(--muted-dim); font-size: 12.5px; }

.orbit__lede {
  padding: 20px 0 24px;
  margin-bottom: 22px;
  border-top: 1px solid var(--panel-border);
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
  max-width: 1000px;
}
.orbit__lede b { color: var(--text); font-weight: 600; }
.accent { color: #E9A6E4; }
.strong-accent { font-weight: 700; }
.orbit__lede .accent { font-weight: 700; }

.tiles--orbit { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }

/* -------------------------------------------------------------- platform strip */

.pstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
/* Stacked rather than side-by-side: eight of these sit in one strip, and squeezing a
   name, a post count, a CPV, a view total and a spend figure onto one line wrapped
   every card differently. */
.pcard {
  padding: 14px 16px 15px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
}
.pcard__top { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.pcard__badge {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--pc);
  opacity: 0.92;
}
.pcard__name {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcard__views {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pcard__sub { margin-top: 6px; color: var(--muted-dim); font-size: 11.5px; line-height: 1.5; }

/* ------------------------------------------------------------- platform pills */

.ppill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pc) 16%, transparent);
  color: var(--pc);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.ppill i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ------------------------------------------------------- momentum + standout */

.orbit__split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 22px;
  margin-bottom: 22px;
}
.orbit__split .panel { margin-bottom: 0; }
.lchart svg { display: block; overflow: visible; }

.standout__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.standout__type {
  color: var(--muted-dim);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.standout__creator { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; }
.standout__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 14px;
}
.standout__grid div {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
}
.standout__grid dd {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.standout__grid dt {
  margin-top: 3px;
  color: var(--muted-dim);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.standout__foot { color: var(--muted); font-size: 13.5px; }

/* ------------------------------------------------------------------ verdicts */

.verdict {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.verdict--above { background: rgba(52, 211, 153, 0.16); color: #34d399; }
.verdict--within { background: rgba(136, 162, 255, 0.16); color: var(--blue); }
.verdict--below { background: rgba(251, 191, 36, 0.16); color: #fbbf24; }
.verdict--unknown { background: rgba(255, 255, 255, 0.06); color: var(--muted-dim); }

.chip--tier { background: rgba(255, 255, 255, 0.07); color: var(--muted); }
.chip--count { background: rgba(217, 135, 255, 0.16); color: var(--purple); }
.chip--manual { background: rgba(251, 191, 36, 0.14); color: #fbbf24; }

/* --------------------------------------------------------------- wrap + modal */

.cwrap-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.btn--gradient {
  background: linear-gradient(96deg, #C9AEF0, #E9A6E4 52%, #F3B98F);
  color: #151515;
  font-weight: 700;
  border: 0;
}
.btn--gradient:hover { transform: translateY(-2px); opacity: 0.94; }

.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 6, 0.72);
  backdrop-filter: blur(3px);
}
.modal__panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 92vh;
  overflow-y: auto;
  text-align: center;
}
.modal__note { margin: 14px auto 14px; max-width: 360px; color: var(--muted); font-size: 12.5px; }
.modal__note b { color: #fbbf24; }

/* The Campaign Wrap card. Named .cwrap, not .wrap: `.wrap` is the site-wide layout
   container declared near the top of this file, and a BEM block of the same name
   further down silently restyled every marketing section — border, radius, purple
   gradient and left alignment — because it wins on source order. */
.cwrap {
  padding: 30px 30px 24px;
  text-align: left;
  background: linear-gradient(158deg, #1b1725 0%, #141119 55%, #17141c 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
}
.cwrap__kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: 20px;
}
.cwrap__title {
  font-family: var(--font-serif);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 26px;
}
.cwrap__hero {
  font-size: 62px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(96deg, #EFD7F5, #C9AEF0 60%, #B9A9E8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cwrap__herolabel {
  margin: 8px 0 26px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.cwrap__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; margin: 0 0 26px; }
.cwrap__grid dd { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.cwrap__grid dt {
  margin-top: 3px;
  color: var(--muted-dim);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.cwrap__leader { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.cwrap__leaderlabel {
  margin-top: 3px;
  color: var(--muted-dim);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.cwrap__foot {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--muted);
  font-size: 12.5px;
}

@media (max-width: 980px) {
  .orbit__split { grid-template-columns: 1fr; }
}

@media print {
  .orbit__title, .orbit__mark, .cwrap__hero {
    -webkit-text-fill-color: #111;
    color: #111;
    background: none;
  }
  .accent, .strong-accent { color: #111 !important; }
  .modal { display: none !important; }

  @page { size: A4 landscape; margin: 12mm; }

  /* A horizontal scrollbar cannot be printed. On screen the report tables scroll
     inside .tablewrap; on paper anything past the page edge is silently dropped, and
     the columns that fall off the right are the ones a client actually reads — CPV and
     engagement rate. Shrink the table to fit the sheet instead of losing them. */
  .tablewrap { overflow: visible; margin: 0; padding: 0; }
  .tablewrap--scroll { max-height: none; overflow: visible; }
  /* Ten columns will not fit A4 portrait at any readable size, and `table-layout:
     fixed` would give every column an equal tenth — squeezing creator names to nothing.
     Landscape plus a smaller face fits the whole table with auto layout intact. Every
     printable page in this app is a wide data table, so this suits all of them. */
  .table--report { font-size: 10px; }
  .table--report th, .table--report td { padding-left: 5px; padding-right: 5px; }
  .table--report .cell-creator { min-width: 0; max-width: none; }
  /* @handles are decoration on paper; the creator name identifies the row. */
  .table--report .cell-handle { display: none; }
  .table--report .ppill { padding: 1px 5px; font-size: 8.5px; }
  .table--report .ppill i { width: 5px; height: 5px; }
}
.lede-note { display: block; margin-top: 8px; color: var(--muted-dim); font-size: 14px; }