/* Traces colour layer — the home page's look for every other page.
 *
 * The home page carries the palette inline (index.html, "COLOUR"); this is
 * the same palette, the same rules, for the pages built on their own sheets:
 * /tools, /download, /support, /academy, /beta. Load it AFTER the page's own
 * styles: it re-points tokens the page already uses (--sec-bg, the hero
 * background, .btn-primary) rather than adding a second system.
 *
 * The rules (the Traces design system's README):
 *  - navy only; the page itself is navy, so nothing ever shows white under a
 *    short page or a long one;
 *  - the accent cycle is cyan, violet, gold, green, pink, applied in that
 *    order to repeated things, one colour per item;
 *  - the blue-to-violet gradient is for small things: the primary button, a
 *    3px bar, an eyebrow, a number disc - never a section background;
 *  - premium yellow means paying, nothing else.
 */
:root {
  --cp-cyan: #3ebaf4; --cp-cyan-rgb: 62, 186, 244;
  --cp-violet: #8b7cf0; --cp-violet-rgb: 96, 82, 200;
  --cp-gold: #ffd93d; --cp-gold-rgb: 255, 217, 61;
  --cp-green: #34d17a; --cp-green-rgb: 33, 196, 93;
  --cp-pink: #f0628f; --cp-pink-rgb: 222, 42, 104;
  --cp-grad: linear-gradient(90deg, #409ed7 0%, #6052c8 100%);
  --cp-grad-text: linear-gradient(90deg, #5dbdf0 0%, #9b8cff 100%);
  --cp-grad-final: linear-gradient(90deg, #3ebaf4, #6052c8, #de2a68);
}

/* The page is navy to its last pixel. /download, /support and /beta left
   the body unpainted, and a white band showed under the footer (and, on a
   long /beta page, behind the posts) on the live site. */
html, body { background-color: #09162d; }

/* ── section bands: a cyan glow on one, violet on the other ── */
.tr-sec--a { --sec-bg: radial-gradient(55% 70% at 0% 0%, rgba(var(--cp-cyan-rgb), .07), transparent 60%), radial-gradient(45% 60% at 100% 100%, rgba(var(--cp-violet-rgb), .10), transparent 60%), #10213e; }
.tr-sec--b { --sec-bg: radial-gradient(50% 60% at 100% 0%, rgba(var(--cp-violet-rgb), .09), transparent 60%), #09162d; }

/* ── a hero with a GT7 photo behind it, under a navy fade darkest behind the
      copy. The page sets the picture: <section class="… cp-photo"
      style="--cp-photo: url(…)">; without one it keeps its glow. ── */
.cp-photo { position: relative; isolation: isolate; overflow: hidden; }
.cp-photo::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: var(--cp-photo) var(--cp-photo-pos, 50% 50%) / cover no-repeat;
}
.cp-photo::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 90% at 50% 45%, rgba(9,22,45,.90) 0%, rgba(9,22,45,.72) 55%, rgba(9,22,45,.55) 100%),
    linear-gradient(0deg, #09162d 0%, rgba(9,22,45,0) 35%),
    linear-gradient(180deg, rgba(9,22,45,.75) 0%, rgba(9,22,45,0) 30%);
}
.cp-photo h1, .cp-photo p { text-shadow: 0 2px 18px rgba(0,0,0,.55); }
/* the gradient along the hero's foot, the home page's final-call line */
.cp-photo { border-bottom: 0 !important; }
.cp-photo > .cp-foot-line, .cp-hero-line { display: block; height: 3px; background: var(--cp-grad-final); opacity: .85; }

/* ── words ── */
.cp-grad, .cp-eyebrow { background: var(--cp-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cp-eyebrow {
  display: inline-block; margin-bottom: .6rem;
  font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
/* the short gradient bar under a section heading */
.cp-bar::after {
  content: ''; display: block; width: 56px; height: 3px; border-radius: 3px;
  background: var(--cp-grad); margin-top: .7rem;
}
.cp-center .cp-bar::after, .cp-bar.cp-center::after { margin-left: auto; margin-right: auto; }

/* ── the primary action ── */
.btn-primary { background: var(--cp-grad); border-color: transparent; box-shadow: 0 6px 20px rgba(96, 82, 200, .35); }
.btn-primary:hover:not(:disabled) { background: var(--cp-grad); border-color: transparent; filter: brightness(1.1); }

/* ── the accent cycle: a container's children take cyan, violet, gold,
      green, pink in turn; --c / --c-rgb are what the pieces below read.
      .cp-c1 … .cp-c5 pin one colour by hand. ── */
.cp-cycle > :nth-child(5n+1), .cp-c1 { --c: var(--cp-cyan); --c-rgb: var(--cp-cyan-rgb); }
.cp-cycle > :nth-child(5n+2), .cp-c2 { --c: var(--cp-violet); --c-rgb: var(--cp-violet-rgb); }
.cp-cycle > :nth-child(5n+3), .cp-c3 { --c: var(--cp-gold); --c-rgb: var(--cp-gold-rgb); }
.cp-cycle > :nth-child(5n+4), .cp-c4 { --c: var(--cp-green); --c-rgb: var(--cp-green-rgb); }
.cp-cycle > :nth-child(5n+5), .cp-c5 { --c: var(--cp-pink); --c-rgb: var(--cp-pink-rgb); }

/* a card's colour: a 3px top edge, its label and icon in it, a glow on hover */
.cp-edge { border-top: 3px solid var(--c, #409ed7) !important; }
.cp-edge-left { border-left: 3px solid var(--c, #409ed7) !important; }
.cp-ink { color: var(--c, #409ed7) !important; }
.cp-lift { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.cp-lift:hover { transform: translateY(-2px); border-color: rgba(var(--c-rgb, 64, 158, 215), .5); box-shadow: 0 0 18px rgba(var(--c-rgb, 64, 158, 215), .2), 0 8px 22px rgba(0,0,0,.42); }
@media (prefers-reduced-motion: reduce) { .cp-lift:hover { transform: none; } }

/* an icon in a tile of its colour */
.cp-tile {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
  color: var(--c, #409ed7); background: rgba(var(--c-rgb, 64, 158, 215), .14); border: 1px solid rgba(var(--c-rgb, 64, 158, 215), .40);
}
.cp-tile svg { width: 22px; height: 22px; }

/* a small label in its colour (not yellow: yellow is Premium) */
.cp-tag {
  display: inline-flex; align-items: center; gap: .35rem; vertical-align: 1px;
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 999px;
  color: var(--c, #3ebaf4); background: rgba(var(--c-rgb, 62, 186, 244), .14); border: 1px solid rgba(var(--c-rgb, 62, 186, 244), .45);
}

/* a pill in its colour, the home page's "Everything it tracks" pills */
.cp-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(var(--c-rgb), .12) !important; border: 1px solid rgba(var(--c-rgb), .40) !important; color: #e2e8f0 !important;
}
.cp-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.cp-pill:hover { background: rgba(var(--c-rgb), .22) !important; border-color: rgba(var(--c-rgb), .65) !important; }

/* a number in a gradient disc */
.cp-disc {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: #fff; background: var(--cp-grad);
  box-shadow: 0 0 0 4px rgba(96, 82, 200, .15), 0 6px 18px rgba(96, 82, 200, .35);
}

/* a screenshot: a faint violet glow */
.cp-shot { box-shadow: 0 0 0 1px rgba(var(--cp-violet-rgb), .30), 0 20px 50px rgba(0,0,0,.45), 0 0 50px rgba(var(--cp-violet-rgb), .18); }

/* Phones and narrow tablets: the copy runs the full width, over the photo's
   bright side too - an even fade keeps it readable, as on the home page. */
@media (max-width: 767px) {
  .cp-photo::after {
    background: linear-gradient(180deg, rgba(9,22,45,.82) 0%, rgba(9,22,45,.86) 60%, #09162d 100%);
  }
}