/* ============================================================
   LED Sign City — site-wide design tokens
   Single source of truth for typography, text colour, bands and
   spacing on EVERY page. Type values are taken from the
   "Send from anywhere" section of /content-studio.
   ============================================================ */
:root {
  /* the only font stack on the site */
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* three text colours, nothing else */
  --ink: #111111;
  --text-body: #4A4A4A;
  --text-muted: #6B6B6B;
  --eyebrow: #6B6B6B;

  /* bands */
  --band-a: #FFFFFF;
  --band-b: #F5F5F7;
  --hairline: #E5E5E5;
  --card-line: #DDDDDD;

  /* accent — the order button only */
  --order-bg: #FFD814;
  --order-line: #FCD200;
  --error: #B3121B;
  --link: #007185;

  /* type scale */
  --fs-display: 44px;
  --fs-h1: 44px;
  --fs-h2: 44px;
  --fs-h2-compact: 34px;
  --fs-h3: 24px;
  --fs-lead: 20px;
  --fs-control: 15px;
  --fs-body: 17px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;

  /* line heights */
  --lh-head: 1.1;
  --lh-body: 1.5;
  --lh-caption: 1.4;

  /* weights — headings are 600, never heavier */
  --wt-head: 600;
  --wt-body: 400;
  --wt-strong: 700;

  /* tracking — negative only at 34px and up, positive only on caps */
  --track-h1: -0.5px;
  --track-head: -0.4px;
  --track-caps: 0.08em;
  --track-eyebrow: 0.08em;

  /* measure */
  --measure-lead: 544px;

  /* spacing — multiples of 8 */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --sec-pad: var(--space-12);
}

/* Headings scale down proportionally; ratios stay intact. */
@media (min-width: 701px) and (max-width: 1000px) {
  :root {
    --fs-display: 34px; --fs-h1: 34px; --fs-h2: 34px; --fs-h2-compact: 28px;
    --fs-h3: 22px; --fs-lead: 19px;
  }
}
@media (max-width: 700px) {
  :root {
    --sec-pad: var(--space-8);
    --fs-display: 30px; --fs-h1: 30px; --fs-h2: 28px; --fs-h2-compact: 24px;
    --fs-h3: 20px; --fs-lead: 18px; --fs-body: 16px;
  }
}

/* ---------- base typography (every page) ---------- */
html, body { font-family: var(--font-sans); }
body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea, optgroup { font-family: var(--font-sans); }
svg text { font-family: var(--font-sans); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--wt-head);
  line-height: var(--lh-head);
  color: var(--ink);
  text-wrap: pretty;
}
h1 { font-size: var(--fs-h1); letter-spacing: var(--track-h1); }
h2 { font-size: var(--fs-h2); letter-spacing: var(--track-head); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--track-head); }
h4 { font-size: var(--fs-lead); letter-spacing: normal; }
h5, h6 { font-size: var(--fs-body); letter-spacing: normal; }

p, li, dd, dt, td, th, figcaption, label, blockquote {
  font-family: var(--font-sans);
}
p { line-height: var(--lh-body); }
small { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }

/* ---------- bands and rhythm ---------- */
.ps-sec { padding: var(--sec-pad) 0; }
.ps-sec-top { padding: var(--sec-pad) 0 0; }
.ps-sec-bottom { padding: 0 0 var(--sec-pad); }
.ps-band-a { background: var(--band-a); }
.ps-band-b { background: var(--band-b); }

/* ---------- type utilities ---------- */
.ps-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--wt-body);
  color: var(--eyebrow);
  letter-spacing: var(--track-eyebrow);
  line-height: normal;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.ps-h1 {
  font-size: var(--fs-h1);
  font-weight: var(--wt-head);
  line-height: var(--lh-head);
  letter-spacing: var(--track-h1);
  color: var(--ink);
}
.ps-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--wt-head);
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
  color: var(--ink);
}
.ps-h2-compact {
  font-size: var(--fs-h2-compact);
  font-weight: var(--wt-head);
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
  color: var(--ink);
}
.ps-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--wt-head);
  line-height: 1.2;
  letter-spacing: var(--track-head);
  color: var(--ink);
}
.ps-lead {
  font-size: var(--fs-lead);
  font-weight: var(--wt-body);
  line-height: var(--lh-body);
  letter-spacing: normal;
  color: var(--text-body);
  max-width: var(--measure-lead);
}
.ps-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.ps-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.ps-stat-caption {
  font-size: var(--fs-caption);
  font-weight: var(--wt-strong);
  line-height: var(--lh-caption);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-body);
}


/* ---------- feature chooser (PDP "Try the software") ---------- */
/* A single-select segmented row, not a dropdown: same chrome as the /content-studio bar.
   It sticks for the life of the section so all nine options stay on screen while the
   customer works inside a module that is taller than the viewport. */
/* ---------- module artwork: one recipe per module, scales from 20px to 248px ---------- */
.ps-th {
  flex: 0 0 auto; display: block; background-color: #0D0D0D;
  background-repeat: no-repeat; background-position: center; background-size: cover;
  border-radius: 3px;
}
/* Each thumb is the sign face doing the thing the card names — a half-typed line, a clock,
   a calendar, a wipe, a sun, an install bar, a signal — not a decorative swatch. */
.ps-th-text {
  background-image:
    linear-gradient(#FFFFFF, #FFFFFF),
    linear-gradient(#FFFFFF, #FFFFFF),
    linear-gradient(#ffe94a, #ffe94a);
  background-size: 62% 13%, 34% 13%, 3% 15%;
  background-position: 18% 32%, 18% 60%, 55% 60%;
}
/* The photo alone: the LED-grid overlay at 92px turned the food into noise. */
.ps-th-images { background-image: url(images/demo-art-16x9.png); background-size: cover; }
.ps-th-both {
  background-image: linear-gradient(#0000 0 30%, #FFFFFF 30% 44%, #0000 44% 56%, #b3121b 56% 70%, #0000 70%), url(images/demo-art-16x9.png);
  background-size: 46% 100%, 50% 100%; background-position: right center, left center;
}
/* Live fields: a clock, because the field customers picture is the time. */
.ps-th-fields {
  background-image:
    linear-gradient(#FFFFFF, #FFFFFF),
    linear-gradient(#FFFFFF, #FFFFFF),
    radial-gradient(circle, #0D0D0D 0 24px, #7dd3fc 24px 27px, #0000 28px);
  background-size: 3px 18px, 16px 3px, 60px 60px;
  background-position: calc(50% - 1.5px) calc(50% - 9px), calc(50% + 8px) 50%, center;
}
/* Scheduling: a month, with one day lit. */
.ps-th-schedule {
  background-image:
    linear-gradient(#FFFFFF, #FFFFFF),
    linear-gradient(#ffd814, #ffd814),
    repeating-linear-gradient(90deg, #6B6B6B 0 1px, #0000 1px 16px),
    repeating-linear-gradient(0deg, #6B6B6B 0 1px, #0000 1px 13px);
  background-size: 81px 5px, 15px 12px, 81px 39px, 81px 39px;
  background-position:
    calc(50% - 0.5px) calc(50% - 27px),
    calc(50% + 8px) calc(50% + 7px),
    center calc(50% + 3px), center calc(50% + 3px);
  background-repeat: no-repeat;
}
.ps-th-transitions { background-image: linear-gradient(100deg, #b3121b 0 46%, #0D0D0D 46% 54%, #0e7c86 54%); }
/* Auto brightness: a sun over the day-to-night ramp. */
.ps-th-brightness {
  background-image:
    radial-gradient(circle at 76% 32%, #ffd814 0 11px, #0000 12px),
    linear-gradient(90deg, #0D0D0D, #f6e7a1);
}
/* Over-the-air updates: an install bar mid-flight. */
.ps-th-updates {
  background-image:
    linear-gradient(#FFFFFF, #FFFFFF),
    linear-gradient(#ffd814, #ffd814),
    linear-gradient(#3A3A3A, #3A3A3A);
  background-size: 50% 14%, 4% 14%, 78% 14%;
  background-position: 11% 50%, 61% 50%, center;
}
/* Send from anywhere: one button, and the signal leaving it. */
.ps-th-send {
  background-image:
    radial-gradient(circle, #ffd814 0 7px, #0000 8px),
    radial-gradient(circle, #0000 0 13px, #FFFFFF 13px 15px, #0000 16px),
    radial-gradient(circle, #0000 0 21px, rgba(255,255,255,.45) 21px 23px, #0000 24px);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  background-position: center, center, center;
}

/* ---------- hover preview (desktop only) ---------- */
.ps-mods-pop {
  position: fixed; z-index: 80; width: 260px; padding: 5px;
  background: #FFFFFF; border: 2px solid #DDDDDD; border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.16); pointer-events: none;
}
.ps-mods-pop .ps-th { width: 248px; height: 92px; border-radius: 8px; }
.ps-mods-pop-n { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #6B6B6B; margin: 7px 4px 0; }
.ps-mods-pop-d { font-size: 13px; line-height: 1.4; color: #4A4A4A; margin: 2px 4px 5px; }

/* ---------- "try another": all nine, inside the module card ---------- */
/* Three across, three down — the same card the product page used before the chooser,
   now switching the live module instead of leaving the page. */
.ps-tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  width: 100%; margin: 0 auto;
}
.ps-tiles::-webkit-scrollbar { display: none; }
.ps-tiles .ps-th { width: 100%; height: 92px; border-radius: 8px; }
.ps-tiles > button { transition: border-color .12s ease-out, transform .12s ease-out; }
.ps-tiles > button:hover { border-color: #C9C9CE !important; transform: translateY(-1px); }
.ps-tiles > button:focus-visible { outline: 2px solid #111111; outline-offset: 2px; }
@media (max-width: 700px) { .ps-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .ps-tiles { grid-template-columns: 1fr; } .ps-tiles .ps-th { height: 78px; } }
@media (prefers-reduced-motion: reduce) { .ps-tiles > button { transition: none; } }}

/* ---------- capacity board: line-count gutter ---------- */
@media (max-width: 560px) {
  .ps-cap-gut { flex: 0 0 44px !important; }
  .ps-cap-head { margin-left: 52px !important; }
}