/* ============================================================
   InsightsHive — Retail Execution Intelligence
   Design system per repositioning plan §12.
   Light default with dark support. No gradients, no emoji,
   no decorative AI visuals. Colour carries hierarchy and data only.
   ============================================================ */

:root {
  /* Palette carried over from the existing InsightsHive site.
     Brand purple #a359bc and the neutral scale are unchanged in intent;
     interactive values are nudged by 1-2 hex steps only where the original
     fell just under WCAG AA (brand purple on white measured 4.46:1). */

  /* Neutrals — from --color-neutral-* on the current site */
  --paper:      #ffffff;   /* neutral-50  */
  --surface:    #f9f7fb;   /* neutral-100 */
  --surface-2:  #f4e1f5;   /* neutral-200 */
  --line:       #d6cdea;   /* primary-200 */
  --line-soft:  #ece5f2;
  --ink:        #1e1e1e;   /* neutral-900 */
  --ink-2:      #333333;   /* neutral-700 */
  --ink-3:      #666666;   /* neutral-600 */

  /* Brand purple */
  --accent:      #a258bc;  /* brand #a359bc, 4.51:1 on white  */
  --accent-2:    #9d4edd;  /* primary-600, hover */
  --accent-deep: #9446ae;  /* for text on the lavender wash   */
  --accent-ink:  #ffffff;
  --accent-wash: #f4e1f5;  /* primary-100 */

  /* Semantic — data states only */
  --good: #1d6f4a;
  --warn: #8a5a08;
  --bad:  #9a2820;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --measure: 68ch;
  /* The aisle gutter. One value drives the marker column and the matching
     indent on every band, so the page keeps a single left edge. */
  --bay: clamp(112px, 9vw, 136px);
  --bay-edge: max(1.25rem, calc(50% - 620px));
  --radius: 8px;           /* --radius-md on the current site */
  --gap: 1.5rem;

  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.7vw, 1.9rem);
  --step-3:  clamp(1.8rem, 1.5rem + 1.4vw, 2.6rem);
  --step-4:  clamp(2.2rem, 1.7rem + 2.4vw, 3.5rem);
}

/* Dark theme — the current site's .dark-theme values.
   Accent lightened to #b87fcb so it clears AA on both dark grounds
   (#a359bc measured 3.90:1 on #1a1a1d). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #1a1a1d;
    --surface:    #2d2d2d;
    --surface-2:  #3a2f3f;
    --line:       #45414a;
    --line-soft:  #332f38;
    --ink:        #e8dff2;
    --ink-2:      #cccccc;
    --ink-3:      #a89fb0;
    --accent:      #b87fcb;
    --accent-2:    #cb9ada;
    --accent-deep: #bd87cf;
    --accent-ink:  #1a1a1d;
    --accent-wash: #3a2f3f;
    --good: #6fc79a;
    --warn: #e0ac5a;
    --bad:  #e88b80;
  }
}
:root[data-theme="dark"] {
  --paper:#1a1a1d; --surface:#2d2d2d; --surface-2:#3a2f3f;
  --line:#45414a; --line-soft:#332f38;
  --ink:#e8dff2; --ink-2:#cccccc; --ink-3:#a89fb0;
  --accent:#b87fcb; --accent-2:#cb9ada; --accent-deep:#bd87cf;
  --accent-ink:#1a1a1d; --accent-wash:#3a2f3f;
  --good:#6fc79a; --warn:#e0ac5a; --bad:#e88b80;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4 {
  font-family: var(--display);
  font-stretch: 88%;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); font-weight: 600; }
p  { margin: 0; max-width: var(--measure); }
a  { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px;
}
ul { margin: 0; padding-left: 1.1em; }
li { margin: 0 0 .35em; }
strong { font-weight: 600; }

.wrap { width: min(1240px, 100% - 2.5rem); margin-inline: auto; }

/* Bay rhythm. Sections are bays on a gondola: each rests on a shelf rail, and
   carries its label in the left gutter the way an aisle marker does. Replaces
   alternating tint bands, which were doing decorative work rather than
   structural work. Tint is now reserved for the closing CTA. */
.section {
  padding-block: clamp(2.4rem, 4.2vw, 4.4rem);
  border-bottom: 2px solid var(--line);
  position: relative;
}
.section::after {
  content: ""; position: absolute; left: var(--bay-edge); bottom: -2px;
  width: clamp(48px, 9vw, 104px); height: 2px; background: var(--accent);
}
.section:last-of-type { border-bottom: 0; }
.section:last-of-type::after { display: none; }
.section--tint { background: var(--surface); }
/* --accent measures 4.23:1 on --surface. --accent-deep exists for text on tint.
   :not(.btn) matters — a type selector here out-specifies .btn--primary. */
.section--tint a:not(.btn), .foot a.textlink, .notice a:not(.btn) { color: var(--accent-deep); }
.section--line { border-top: 0; }

/* Left gutter marker — the aisle label. Only on the homepage, so it stays a
   signature rather than furniture. */
@media (min-width: 1180px) {
  /* Every band is indented by the gutter, including the hero and the closing
     CTA, so the page has one left edge and the marker column is a real column
     rather than an indent that only some sections pay for. */
  .section > .wrap,
  .hero > .wrap { padding-left: var(--bay); }
  .section[data-bay]::before {
    content: attr(data-bay);
    position: absolute;
    top: clamp(2.4rem, 4.2vw, 4.4rem);
    left: var(--bay-edge);
    width: calc(var(--bay) - 24px);
    font-family: var(--display); font-stretch: 76%;
    font-size: .72rem; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-3);
    line-height: 1.35;
    border-top: 2px solid var(--accent);
    padding-top: .55rem;
  }
}
@media (max-width: 1179px) {
  /* attr() resolves against the element the pseudo belongs to, so this has to
     sit on the section that carries the attribute. It previously hung off
     .wrap and rendered an empty rule on every section below 1060px. */
  .section[data-bay]::before {
    content: attr(data-bay);
    display: block; width: fit-content;
    margin-left: var(--bay-edge); margin-bottom: 1.75rem;
    font-family: var(--display); font-stretch: 76%;
    font-size: .7rem; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-3);
    border-top: 2px solid var(--accent);
    padding-top: .45rem;
  }
}

/* Text blocks hold a narrower measure so the bay has a clear left column and
   air on the right; grids and rails still run the full bay width. */
.hold { max-width: 60ch; }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.stack--s { gap: .75rem; }
.stack--l { gap: 1.9rem; }

.eyebrow {
  font-family: var(--display); font-stretch: 76%;
  font-size: var(--step--1); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-deep); margin: 0;
}
.lede { font-size: var(--step-1); color: var(--ink-2); line-height: 1.5; }
.muted { color: var(--ink-3); }
.small { font-size: var(--step--1); }

/* Header + nav ------------------------------------------------ */
.masthead { border-bottom: 1px solid var(--line-soft); background: var(--paper); position: sticky; top: 0; z-index: 50; }
.masthead__inner { display: flex; align-items: center; gap: 2rem; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--display); font-stretch: 88%; font-weight: 600; font-size: 1.15rem; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.brand__mark { color: var(--accent); flex: none; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: .95rem; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }
/* .nav a (0,1,1) out-specifies .btn--primary (0,1,0), which left the header's
   primary CTA at --ink-2 on purple: 2.8:1 in light, 1.9:1 in dark. */
.nav a.btn--primary { color: var(--accent-ink); }
.nav a.btn--ghost { color: var(--ink); }
.nav__cta { margin-left: .4rem; }
/* Language switch. Deliberately quiet — a reader who wants the other language
   looks for it, and it should never compete with the CTA. Sits before the CTA
   so the button stays the last thing in the bar. */
.nav a.nav__lang {
  padding: .15rem .45rem;
  font-family: var(--display); font-stretch: 82%; font-size: .78rem;
  font-weight: 600; letter-spacing: .08em; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 3px;
}
.nav a.nav__lang:hover { color: var(--ink); border-color: var(--ink-3); }
.navtoggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: .45rem .7rem; color: var(--ink); font: inherit; font-size: .9rem; }

@media (max-width: 860px) {
  .navtoggle { display: block; }
  .nav { display: none; position: absolute; inset: 68px 0 auto; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: .5rem 1.25rem 1.25rem; }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: .7rem 0; border-bottom: 1px solid var(--line-soft); }
  .nav__cta { margin: .8rem 0 0; }
}

/* Buttons ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .72rem 1.25rem; border-radius: var(--radius);
  font-size: .95rem; font-weight: 500; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-2); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: var(--paper); }
.btn--ghost:hover { border-color: var(--ink-3); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.textlink { font-weight: 500; }

/* Grids ------------------------------------------------------- */
.grid { display: grid; gap: var(--gap); }
/* auto-fit alone put column count a few pixels from flipping — a 10px change in
   the gutter turned a 3+2 row of five into a 4+1. Column counts are fixed above
   the breakpoint where they fit, and auto-fit only handles the way down. */
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
@media (min-width: 760px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid--kpi { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Four named modules read as a set, not as a row of three and a straggler. */
.grid--modules { grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid--modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; background: var(--paper);
  display: flex; flex-direction: column; gap: .6rem; height: 100%;
}
.card h3 { font-size: var(--step-1); }
.card__promise { color: var(--accent); font-weight: 500; font-size: .95rem; }
.card__list { list-style: none; padding: 0; margin: .3rem 0 0; color: var(--ink-2); font-size: .95rem; }
.card__list li { padding-left: 1rem; position: relative; }
.card__list li::before { content: ""; position: absolute; left: 0; top: .66em; width: 5px; height: 1px; background: var(--ink-3); }
.card__note { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line-soft); color: var(--ink-3); font-size: var(--step--1); }
.card--link { text-decoration: none; color: inherit; }
.card--link:hover { border-color: var(--ink-3); }

/* Proof tiles ------------------------------------------------- */
/* Shelf edge: the page's structural device. Anything measured rests on a rule,
   with a short accent segment at the left reading as the label clip.

   One rule, learned from a walkthrough: a SHORT accent segment sitting on a long
   grey rule directly beneath a number reads as a half-empty progress bar. It was
   meant as a label clip; it was read as a broken gauge, because 94% and 31% drew
   identical bars. So the device now splits by context —
     short segment  = section-level ornament, never next to a figure (.shelf)
     full width     = an underline under a figure, no measurement implied
     proportional   = an actual bar, width driven by the value (.marker with --v)
   Nothing on the page may sit between those three. */
.shelf, .stat, .kpi { position: relative; padding-bottom: 1rem; border-bottom: 2px solid var(--line); }
.shelf::after, .stat::after, .kpi::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  height: 2px; background: var(--accent);
}
.shelf::after { width: 30px; }
.stat::after, .kpi::after { width: 100%; }
.stat__fig {
  font-family: var(--display); font-stretch: 85%;
  font-size: var(--step-3); font-weight: 600; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums lining; color: var(--ink); line-height: 1.05;
}
.stat__label { font-weight: 500; margin-top: .3rem; }
.stat__qual { color: var(--ink-3); font-size: var(--step--1); margin-top: .3rem; }
.stat--todo::after { background: var(--line); }
.stat--todo .stat__fig { color: var(--ink-3); }

/* KPI list ---------------------------------------------------- */
.kpi h3 {
  font-family: var(--display); font-stretch: 76%;
  font-size: var(--step-0); font-weight: 600; text-transform: uppercase;
  letter-spacing: .055em; line-height: 1.2;
}
.kpi p { color: var(--ink-3); font-size: .93rem; margin-top: .3rem; }

/* Abstracted product visualisation — plan §12.6 ---------------- */
/* One capture, three returns — not four steps. The section claims a single
   visit produces the whole picture at once, so the capture stands alone and the
   three returns share ONE accent rule: they arrive together, in no order. A run
   of evenly ticked stops said the opposite of the headline above it. */
.viz { position: relative; display: grid; gap: 0; border-bottom: 2px solid var(--line); grid-template-columns: minmax(0, .7fr) minmax(0, 3fr); }
.viz::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 30px; height: 2px; background: var(--accent); }

/* The source. No rule above it — it is the input, not one of the returns. */
.viz__source { display: flex; flex-direction: column; gap: .8rem; padding: calc(.55rem + 2px) 1.9rem 1.7rem 0; }
/* Full-strength ink on the source label, so the missing rule above it reads as
   a distinction rather than an oversight. */
.viz__source .viz__stage { color: var(--ink); }

/* The returns. One rule spanning all three. The heavier divider marks the split
   between what goes in and what comes back; the hairlines between the three are
   lighter, because those three are peers rather than stages. */
.viz__returns {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--accent); border-left: 1px solid var(--line);
  padding-top: .55rem;
}
.viz__panel { padding: 0 1.35rem 1.7rem; border-left: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: .8rem; min-height: 168px; }
.viz__panel:first-child { border-left: 0; }

/* Numbered step flow — borrows the .viz grammar deliberately (panels divided by
   a hairline, resting on the shelf edge) so the platform page and the homepage
   read as one system. Horizontal across five columns on desktop, stacked on
   mobile, which is the shape a sequence should take on a phone. */
.steps {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; gap: 0; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 2px solid var(--line);
}
.steps::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 30px; height: 2px; background: var(--accent); }
.steps__item { display: flex; flex-direction: column; gap: .75rem; padding: 0 1.35rem 1.7rem; border-left: 1px solid var(--line-soft); }
.steps__item:first-child { border-left: 0; padding-left: 0; }
.steps__n {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none;
  border: 2px solid var(--accent); border-radius: 50%; color: var(--accent-deep);
  font-family: var(--display); font-stretch: 85%; font-weight: 600; font-size: .95rem;
  font-variant-numeric: tabular-nums lining; line-height: 1;
}
.steps__item p { margin: 0; color: var(--ink-2); font-size: .95rem; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .steps__item { flex-direction: row; align-items: flex-start; gap: 1rem; border-left: 0; padding: 0 0 1.15rem; }
  .steps__item p { padding-top: .35rem; }
}

/* Below 1080 the three returns are too narrow beside the capture — the KPI rows
   start breaking mid-label. The capture moves above them and the three run the
   full width, which states the claim more plainly than the side-by-side does. */
@media (max-width: 1079px) {
  .viz { grid-template-columns: 1fr; }
  .viz__source { padding: 0 0 1.6rem; }
  .viz__returns { border-left: 0; padding-top: 1.5rem; }
  .viz__panel:first-child { padding-left: 0; }
}
/* Fully stacked, the layout still carries one break — capture, then everything
   else — which is the claim. The three returns stay peers behind the rule. */
@media (max-width: 819px) {
  .viz__returns { grid-template-columns: 1fr; }
  .viz__panel { border-left: 0; border-top: 1px solid var(--line-soft); padding: 1.5rem 0 0; min-height: 0; }
  .viz__panel:first-child { border-top: 0; padding-top: 0; }
  .viz__panel:last-child { padding-bottom: 1.5rem; }
}
.viz__stage { font-family: var(--display); font-stretch: 76%; font-size: var(--step--1); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.viz__fig { font-family: var(--display); font-stretch: 85%; font-size: var(--step-2); font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums lining; }
.viz__row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; border-bottom: 1px solid var(--line-soft); padding-bottom: .4rem; }
.viz__row span:last-child { font-variant-numeric: tabular-nums; font-weight: 500; }
.viz__task { border-left: 2px solid var(--accent); padding-left: .8rem; color: var(--ink-2); font-size: .95rem; }

/* Photo placeholder — real photography to be supplied. Neutral ground, not the
   lavender wash: a 360px block of tint was the loudest thing above the fold and
   the main reason the page read consumer rather than enterprise. */
.photo {
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--surface); min-height: 168px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 1.5rem; color: var(--ink-3); font-size: var(--step--1);
}
/* The read-out plates over the lower-left, so the placeholder note — which has
   to stay legible until cleared photography lands — sits top-right of it. */
.photo--hero { min-height: 272px; align-items: flex-start; justify-content: flex-end; text-align: right; padding: 1.5rem; }

/* Measured values are set the way every other figure on the page is set: a
   condensed label, a lining figure, and a shelf rule with the accent clip.
   These were lavender pills, which read as consumer status badges and were
   the loudest thing in light mode and invisible in dark. */
/* A marker carries a figure, so its accent is a real bar. Set --v inline to the
   percentage the marker reports and the bar draws to it: 96% draws wide, 28%
   draws narrow. Markers reporting a COUNT (42 SKUs, 3 gaps) or no figure at all
   set no --v and default to a full-width underline — a partial bar under a count
   would be measuring against a whole that does not exist. */
.marker {
  --v: 100;
  position: relative; display: flex; align-items: baseline; gap: .75rem;
  padding: .1rem 0 .5rem; border-bottom: 2px solid var(--line);
  font-family: var(--display); font-stretch: 76%;
  font-size: .7rem; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3);
}
.marker::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: calc(var(--v) * 1%); height: 2px; background: var(--accent);
  transition: width .5s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion: reduce) { .marker::after { transition: none; } }
.marker strong {
  margin-left: auto;
  font-stretch: 85%; font-size: var(--step-0); font-weight: 600;
  letter-spacing: -.02em; text-transform: none; color: var(--ink);
  font-variant-numeric: tabular-nums lining;
}
.markers { display: grid; gap: .85rem; }


/* Hero -------------------------------------------------------- */
.hero { padding-block: clamp(2.2rem, 4vw, 4rem) clamp(2rem, 3.5vw, 3.4rem); border-bottom: 2px solid var(--line); position: relative; }
.hero::after { content:""; position:absolute; left: var(--bay-edge); bottom:-2px; width: clamp(48px,9vw,104px); height:2px; background: var(--accent); }
.hero__grid { display: grid; gap: 3rem; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); align-items: center; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

/* ---- Cinematic hero -----------------------------------------------------
   The hero is dark in BOTH themes, deliberately: the page opens like a room
   with the lights down so the shelf is the only lit thing, then daylight
   returns for the rest of the site. Every other section still follows the
   viewer's theme. This is the one place the page raises its voice.        */
.hero--cinema {
  --ink: #f7f3f9; --ink-2: #cdc3d6; --ink-3: #9d92aa;
  --accent: #cf93e6; --accent-ink: #1b1622; --line: #332b3d;
  background: #17131e;
  background-image:
    radial-gradient(120% 90% at 78% 38%, rgba(162,88,188,.34), transparent 62%),
    radial-gradient(80% 70% at 12% 8%, rgba(120,80,170,.16), transparent 60%);
  color: var(--ink); border-bottom: 0;
  padding-block: clamp(3rem, 6vw, 6.5rem) clamp(3rem, 6vw, 6rem);
  overflow: hidden;
}
.hero--cinema::after { background: var(--accent); }

/* On the homepage the masthead sits ON the hero rather than in a white band
   above it — a light strip over a dark opening shot cut the page in two and
   undid the effect. Scoped with :has() so only a page carrying a cinema hero
   is affected; every other page keeps the normal header. */
body:has(.hero--cinema) .masthead {
  background: #17131e; border-bottom-color: transparent;
  --ink: #f7f3f9; --ink-2: #cdc3d6; --ink-3: #9d92aa;
  --accent: #cf93e6; --accent-ink: #1b1622; --line: #3a3145;
}
body:has(.hero--cinema) .masthead .brand,
body:has(.hero--cinema) .masthead .nav a:hover { color: #f7f3f9; }
body:has(.hero--cinema) .masthead .nav a { color: #cdc3d6; }
body:has(.hero--cinema) .masthead .nav a.btn--primary { color: #1b1622; }
body:has(.hero--cinema) .masthead .navtoggle { color: #f7f3f9; border-color: #4f4560; }
/* Give the shelf more of the frame than the copy — it is the thing being sold,
   and at equal widths it read as a diagram beside the text rather than as the
   subject of the page. */
.hero--cinema .hero__grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.18fr); gap: 3.5rem; }
@media (max-width: 900px) { .hero--cinema .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.hero--cinema h1 {
  font-size: clamp(2.9rem, 1.9rem + 5.2vw, 6rem);
  font-stretch: 92%; letter-spacing: -.035em; line-height: .96; text-wrap: balance;
  max-width: 13ch;
}
.hero--cinema .lede { color: var(--ink-2); max-width: 42ch; font-size: var(--step-1); }
.hero--cinema .eyebrow { color: var(--accent); }
/* --paper is still white here, so the ghost button needs its background cleared
   explicitly or it renders white-on-white against the dark ground. */
.hero--cinema .btn--ghost { background: transparent; color: var(--ink); border-color: #4f4560; }
.hero--cinema .btn--ghost:hover { border-color: var(--ink-2); }
.hero--cinema .marker,
.hero--cinema .marker:not(:has(strong)) { color: var(--ink-2); border-bottom-color: var(--line); }
.hero--cinema .marker strong { color: var(--ink); }
.hero--cinema .small.muted { color: var(--ink-3); }

/* ---- Full-bleed dark bands ---------------------------------------------
   The page alternates lit and unlit. Each band carries one drawing, one
   headline and one line of copy — the picture does the arguing, so they read
   fast even though they add height. */
.band {
  --ink: #f7f3f9; --ink-2: #cdc3d6; --ink-3: #9d92aa;
  --accent: #cf93e6; --line: #332b3d;
  background: #17131e;
  background-image: radial-gradient(90% 80% at 22% 30%, rgba(162,88,188,.26), transparent 62%);
  color: var(--ink);
  padding-block: clamp(3rem, 5.5vw, 5.5rem);
  border-bottom: 0; position: relative; overflow: hidden;
}
.band::after { content: ""; position: absolute; left: var(--bay-edge); bottom: 0; width: clamp(48px,9vw,104px); height: 2px; background: var(--accent); }
.band h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem); letter-spacing: -.03em; line-height: 1.03; max-width: 15ch; }
.band .lede { color: var(--ink-2); max-width: 44ch; }
.band a.textlink { color: var(--accent); }
.band__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); grid-template-columns: minmax(0,1fr) minmax(0,.85fr); align-items: center; }
.band--flip { background-image: radial-gradient(85% 80% at 78% 40%, rgba(162,88,188,.24), transparent 62%); }
.band--flip .band__grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
@media (max-width: 900px) { .band__grid, .band--flip .band__grid { grid-template-columns: 1fr; } }

/* The estate: many outlets, a few that need someone. */
.estatemap svg { width: 100%; height: auto; display: block; }
.em-ok  { fill: #574d66; }
.em-bad { fill: var(--accent); }
.em-ring {
  fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .55;
  animation: em-ping 2.8s ease-out infinite;
}
@keyframes em-ping { 0% { r: 7; opacity: .7; } 70%, 100% { r: 17; opacity: 0; } }

/* The handset: a gap found, and the order it produced, before the visit ends. */
.phone svg { width: min(100%, 300px); height: auto; display: block; margin-inline: auto; }
.ph-body { fill: #241d2e; stroke: #4a3f58; stroke-width: 1.5; }
.ph-screen { fill: #100d16; }
.ph-notch { fill: #4a3f58; }
.ph-eyebrow { fill: #9d92aa; font-family: var(--display); font-stretch: 76%; font-size: 11px; font-weight: 600; letter-spacing: .13em; }
.ph-p { fill: #6f6478; }
.ph-rail { fill: #3a3145; }
.ph-gap { fill: rgba(207,147,230,.12); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 3; }
.ph-card rect { fill: #1c1725; stroke: #3a3145; stroke-width: 1; }
.ph-h { fill: #f7f3f9; font-family: var(--display); font-stretch: 88%; font-size: 17px; font-weight: 600; }
.ph-b { fill: #a99fb5; font-size: 13px; }
.ph-action rect { fill: var(--accent); }
.ph-a { fill: #1b1622; font-family: var(--display); font-stretch: 88%; font-size: 15px; font-weight: 600; text-anchor: middle; }
.ph-foot { fill: #7d7389; font-size: 12px; text-anchor: middle; }
@media (prefers-reduced-motion: reduce) { .em-ring { animation: none; opacity: .4; } }

/* The shelf. Products, rails, shelf-edge tags, then recognition boxes that
   snap on in sequence and one empty facing called out. */
.shelfscene svg { width: 100%; height: auto; display: block; overflow: visible; }
.ss-rail { fill: #2b2436; }
.ss-tag  { fill: #4b4159; }
.ss-p    { opacity: .92; }
.ss-det {
  fill: none; stroke: var(--accent); stroke-width: 2;
  filter: drop-shadow(0 0 5px rgba(207,147,230,.55));
  animation: ss-pop .45s cubic-bezier(.2,.85,.3,1) backwards;
}
.ss-gap {
  fill: rgba(207,147,230,.09); stroke: var(--accent);
  stroke-width: 2; stroke-dasharray: 5 4;
}
.ss-gaplabel {
  fill: var(--accent); font-family: var(--display); font-stretch: 76%;
  font-size: 15px; font-weight: 600; letter-spacing: .14em; text-anchor: middle;
}
.ss-gapline { stroke: var(--accent); stroke-width: 1.5; }
.ss-gapwrap { animation: ss-gap-in .55s ease-out backwards; }
@keyframes ss-pop { from { opacity: 0; transform: scale(.9); transform-origin: center; } }
@keyframes ss-gap-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ss-det, .ss-gapwrap { animation: none; }
}

/* The shot: photograph with the read-out plated onto its lower-left corner.
   This is the one moment of the page — a shelf becomes numbers — so the
   markers belong on the image, not stacked beneath it. */
.shot { position: relative; }
.shot .markers {
  position: absolute; left: 0; bottom: 0; width: min(300px, 76%);
  background: var(--paper);
  border-top: 2px solid var(--accent); border-right: 1px solid var(--line);
  padding: 1.05rem 1.15rem 1.15rem; gap: .8rem;
}
.shot .marker:last-child { border-bottom: 0; padding-bottom: 0; }
.shot .marker:last-child::after { display: none; }
/* A marker with no figure is a state, not a measurement. */
.marker:not(:has(strong)) { color: var(--ink-2); }

/* Trust bar --------------------------------------------------- */
.trust { display: flex; flex-wrap: wrap; gap: .6rem 2.2rem; color: var(--ink-2); }
.trust li { list-style: none; margin: 0; }

/* Flow / comparison ------------------------------------------- */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; font-size: .95rem; }
/* --surface-2 and --accent-wash are the same value, so the two rows were
   identical. The old process is drawn as outline, ours as filled. */
.flow span { background: none; border: 1px solid var(--line); border-radius: 2px; padding: .4rem .75rem; color: var(--ink-3); }
.flow--ih span { background: var(--accent-wash); border-color: transparent; color: var(--accent-deep); font-weight: 500; }
.flow em { color: var(--ink-3); font-style: normal; }

/* Forms ------------------------------------------------------- */
.form { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field--full { grid-column: 1 / -1; }
label { font-size: .92rem; font-weight: 500; }
input, select, textarea {
  font: inherit; font-size: .97rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); padding: .65rem .75rem; width: 100%;
}
textarea { min-height: 110px; resize: vertical; }
.form__actions { grid-column: 1/-1; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

/* Tables ------------------------------------------------------ */
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { font-weight: 600; color: var(--ink); border-bottom-color: var(--line); }

/* Notices ----------------------------------------------------- */
.notice { border: 1px solid var(--warn); border-left-width: 3px; border-radius: var(--radius); padding: 1rem 1.2rem; color: var(--ink-2); background: var(--surface); font-size: .95rem; }
.notice strong { color: var(--ink); }

/* Footer ------------------------------------------------------ */
/* No margin: the CTA band and the footer are both --surface, and a 2rem strip
   of paper between them read as a seam rather than a break. */
.foot { border-top: 1px solid var(--line); background: var(--surface); padding-block: 3rem 2rem; }
.foot__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.foot h4 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; }
.foot ul { list-style: none; padding: 0; margin: .7rem 0 0; }
.foot li { margin-bottom: .45rem; }
.foot a { color: var(--ink-2); text-decoration: none; font-size: .94rem; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot__base { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; color: var(--ink-3); font-size: var(--step--1); }

/* Outstanding content. These are deliberately visible in staging — the point is
   that nobody can mistake a placeholder for finished copy, or miss one on the
   way to publishing. build.py refuses a production build while any remain. */
.todo {
  color: var(--warn);
  border: 1px dashed var(--warn); border-radius: 2px;
  padding: .05em .4em; font-style: normal; font-weight: 500;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: .6rem; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: .6rem 1rem; border-radius: var(--radius); }


/* Leadership portraits -------------------------------------- */
.person { align-items: flex-start; }
.person__photo {
  width: 92px; height: 92px; border-radius: 50%;
  object-fit: cover; display: block;
  border: 1px solid var(--line); background: var(--surface-2);
}
@media (min-width: 700px) { .person__photo { width: 104px; height: 104px; } }


/* Article ----------------------------------------------------- */
.article { max-width: 72ch; }
.article h2 { font-size: var(--step-2); margin-top: 2.2rem; }
.article h3 { margin-top: 1.8rem; }
.article p, .article ul { margin-top: 1rem; }
.article__meta { color: var(--ink-3); font-size: var(--step--1); }
.article__lede { font-size: var(--step-1); color: var(--ink-2); line-height: 1.5; }
.legal { max-width: 74ch; }
.legal h2 { font-size: var(--step-1); margin-top: 2rem; }
.legal p, .legal ul { margin-top: .8rem; }
.legal table { margin-top: 1rem; }


/* Hero markers settle onto the shelf photograph on load — the product thesis
   (a photo becomes numbers) as a single orchestrated moment. */
@media (prefers-reduced-motion: no-preference) {
  .hero .markers .marker {
    opacity: 0;
    animation: settle .55s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .hero .markers .marker:nth-child(1) { animation-delay: .25s; }
  .hero .markers .marker:nth-child(2) { animation-delay: .40s; }
  .hero .markers .marker:nth-child(3) { animation-delay: .55s; }
}
@keyframes settle {
  from { opacity: 0; transform: translateY(-7px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Table figures align in columns */
td, th { font-variant-numeric: tabular-nums lining; }


/* Sequence numerals. Used only for See -> Understand -> Act, where the order is
   the information. Everywhere else sections are named, not numbered. */
.seq { counter-reset: seq; }
.seq > * { counter-increment: seq; position: relative; padding-top: 2.2rem; }
.seq > *::before {
  content: counter(seq, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--display); font-stretch: 76%;
  font-size: .78rem; font-weight: 600; letter-spacing: .12em;
  color: var(--accent); font-variant-numeric: tabular-nums lining;
  border-top: 2px solid var(--accent); padding-top: .5rem; min-width: 34px;
}