/* ============================================================
   NoClue — Brand Guidelines 2026
   Restyled to match the brand.ai visual system
   (warm cream ground, near-black ink, warm grey, mono labels,
   rounded media cards, understated CTA buttons, black footer)
   ============================================================ */

/* ---------- Fonts ----------
   Licensed ABC Diatype Regular + ABC Diatype Mono Regular.
   Heavier weights are synthesised until real cuts are added. */
@font-face {
  font-family: "ABC Diatype";
  src: url("fonts/ABCDiatype-Regular.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ABC Diatype";
  src: url("fonts/ABCDiatype-Regular.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "ABC Diatype Mono";
  src: url("fonts/ABCDiatypeMono-Regular.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* NoClue documented palette (used by the Color page) */
  --midnight:     #030303;
  --aero:         #112033;
  --ocean:        #1B3754;
  --pale-smoke:   #EBEBEB;
  --light-silver: #D6D6D6;
  --mid-gray:     #B0B0B0;
  --charcoal:     #313131;

  /* Split board (mono on the dark ground) */
  --split-muted:   #808080;
  --split-current: #FFFFFF;

  /* Data-viz series (chart lines on the dark ground) */
  --data-grid:    #7D7E80;
  --data-orchid:  #EC9AEC;
  --data-gold:    #F1CC50;
  --data-teal:    #00C1A0;
  --data-azure:   #3D8EF0;
  --data-coral:   #FF637E;

  /* brand.ai ground system */
  --bg:           #F7F5F2;   /* warm cream page ground */
  --bg-card:      #EFEDE8;   /* slightly deeper card ground */
  --bg-soft:      #EBE9E6;   /* soft neutral tile */
  --ink:          #141414;   /* near-black text */
  --ink-off:      #1B1B1B;
  --black-bg:     #0A0A0A;   /* dark section ground */
  --grey-text:    #8C877D;   /* warm grey body/secondary */
  --grey-brand:   #BBBAB3;   /* muted grey (numerals, dividers) */
  --separator:    #D9D6D0;   /* hairline separators on cream */
  --separator-dk: rgba(255,255,255,0.22);
  --white:        #FFFFFF;

  /* Single accent = ink (brand.ai keeps colour out of the chrome) */
  --accent:       var(--ink);

  /* Legacy aliases still referenced by markup */
  --red:        var(--ink);
  --red-dark:   var(--black-bg);
  --black:      var(--ink);
  --gray-50:    var(--bg-soft);
  --gray-100:   var(--separator);
  --gray-200:   var(--separator);
  --gray-300:   var(--grey-brand);
  --gray-500:   var(--grey-text);
  --gray-700:   var(--grey-text);
  --gray-900:   var(--charcoal);

  --orange-1:   var(--midnight);
  --orange-2:   var(--aero);
  --orange-3:   var(--ocean);
  --orange-4:   var(--mid-gray);

  /* Rhythm */
  --page-pad:   clamp(24px, 4vw, 96px);
  --side-w:     248px;
  --radius:     14px;
  --radius-lg:  clamp(20px, 3vw, 48px);
  --radius-pill: 999px;

  /* Type scale (echoes brand.ai's rem ladder) */
  --fs-hero:    clamp(48px, 8vw, 104px);
  --fs-mega:    clamp(48px, 8vw, 104px);
  --fs-display: clamp(40px, 6vw, 84px);
  --fs-h1:      clamp(34px, 4.4vw, 60px);
  --fs-h2:      clamp(28px, 3vw, 40px);
  --fs-h3:      clamp(18px, 1.5vw, 22px);
  --fs-body:    16px;
  --fs-lead:    clamp(19px, 1.5vw, 22px);
  --fs-label:   13px;
  --fs-small:   13px;
  --fs-meta:    12px;

  --font:  "ABC Diatype", "Helvetica Neue", Arial, sans-serif;
  --mono:  "ABC Diatype Mono", "SFMono-Regular", ui-monospace, monospace;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: rgba(20,20,20,0.12); }

body {
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Shared label / eyebrow (mono, warm grey) ---------- */
.eyebrow,
.section-num {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: -0.02em;
  color: var(--grey-text);
  line-height: 1.4;
}
.muted { color: var(--grey-text); }

/* ---------- Understated CTA (brand.ai button-cta) ---------- */
.button-cta,
.button-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: -0.04em;
  line-height: 1.3;
  padding: 0.72em 1.35em;
  border-radius: 0.43em;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .1s;
}
.button-cta:hover,
.button-solid:hover { background: transparent; color: var(--ink); }
.button-cta:active,
.button-solid:active { transform: scale(0.985); }
.button-cta.is-clear {
  background: transparent;
  color: var(--ink);
}
.button-cta.is-clear:hover { background: var(--ink); color: var(--bg); }

/* ---------- Layout shell ---------- */
.shell {
  display: grid;
  grid-template-columns: var(--side-w) 1fr;
  min-height: 100vh;
}

aside.nav {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  padding: 40px 28px;
  border-right: 1px solid var(--separator);
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: var(--bg);
  z-index: 20;
}
.nav-brand { line-height: 1.3; }
.nav-brand span {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: -0.02em;
  color: var(--grey-text);
}
.brand-logo-link { display: block; }
.brand-logo { height: 17px; width: auto; display: block; }

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: -0.02em;
}
.nav-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--separator);
  color: var(--ink);
  transition: opacity .25s;
}
.nav-list li:hover { opacity: 0.6; }
.nav-list li.indent { padding-left: 16px; color: var(--grey-text); }
.nav-list a { display: flex; justify-content: space-between; width: 100%; }
.nav-list a.active { color: var(--ink); font-weight: 500; }
.nav-list .num { color: var(--grey-brand); }
.nav-list a.active .num { color: var(--ink); }

.nav-foot {
  margin-top: auto;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: -0.02em;
  color: var(--grey-text);
  line-height: 1.5;
}

main.page {
  min-height: 100vh;
  padding: clamp(56px, 8vh, 120px) var(--page-pad) 96px;
  position: relative;
}

/* mono eyebrow injected above each page title via data-eyebrow */
main.page[data-eyebrow]::before {
  content: attr(data-eyebrow);
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: -0.02em;
  color: var(--grey-text);
  margin-bottom: 20px;
}

/* page header strip */
.page-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--grey-text);
  margin-bottom: 56px;
  letter-spacing: -0.02em;
}
.page-head span { display: block; }

.page-title {
  font-weight: 700;
  font-size: var(--fs-h1);
  margin: 0 0 clamp(40px, 6vh, 72px);
  letter-spacing: -0.03em;
  line-height: 1;
  text-wrap: balance;
}

.type-page-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: baseline;
}
.type-page-head .page-title { margin-bottom: clamp(40px, 6vh, 72px); }
.type-face-name {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* page footer mini bar */
.page-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: -0.02em;
  margin-top: 96px;
  color: var(--grey-text);
}

.divider { height: 1px; background: var(--separator); border: 0; margin: 56px 0; }

/* Small section labels → brand.ai mono eyebrows */
.logo-block > h3,
.gd-grid > h3,
.color-grid > h3,
.app-head h3,
.split-intro h3,
.specimen > h3 {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--grey-text);
  text-transform: none;
}

/* ============================================================
   HOME / COVER  →  brand.ai coverStacked hero
   ============================================================ */
.cover {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(48px, 6vw, 120px);
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  padding: clamp(40px, 6vh, 72px) var(--page-pad);
}
.cover .left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.cover .brand-logo { height: 20px; }
.cover h1 {
  font-size: var(--fs-hero);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 0;
  text-wrap: balance;
}
.cover .meta {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: -0.02em;
  color: var(--grey-text);
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.cover .toc {
  border-top: 1px solid var(--separator);
  padding-top: 16px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: -0.02em;
}
.cover .toc ol { list-style: none; padding: 0; margin: 0; }
.cover .toc li {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--separator);
  transition: opacity .25s;
}
.cover .toc li:hover { opacity: 0.55; }
.cover .toc li.indent { padding-left: 18px; color: var(--grey-text); }
.cover .toc a { display: flex; justify-content: space-between; width: 100%; }

/* Optional brand.ai chrome inside the cover (added in markup) */
.cover-eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: -0.02em;
  color: var(--grey-text);
}
.cover-lede {
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--grey-text);
  max-width: 32ch;
  margin: 0;
}
.cover-cta { margin-top: 4px; }

/* ============================================================
   INTRO  →  brand.ai featuresInline
   ============================================================ */
/* Opening row: lede left, calendar right */
.intro-hero {
  display: block;
  margin-bottom: clamp(56px, 8vh, 96px);
}
.intro-lede {
  font-size: var(--fs-h1);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: clamp(32px, 5vw, 56px) 0 0;
  max-width: none;
  text-wrap: balance;
}
/* Artwork is 1500x1500, so a 1:1 slot means no crop */
.intro-hero-media {
  width: 100%;
  margin-top: 0;
  padding: 0 clamp(20px, 4%, 48px);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #112033 0%, #030303 100%);
}
.intro-hero-img {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}
.intro-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2vw, 40px);
  padding-top: 0;
}
.intro-grid .item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  justify-content: space-between;
  min-height: 1px;
  min-width: 1px;
  padding: 40px;
  border-radius: 52px;
  z-index: 10;
  background-color: #fff;
  color: #030303;
  overflow: visible;
}
.intro-grid .item .num {
  font-family: var(--font);
  font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: -0.02em;
  color: var(--grey-text);
  margin-bottom: 20px;
}
.intro-grid .item p {
  margin: 0;
  color: #030303;
  font-size: var(--fs-lead);
  line-height: 1.4;
}
.intro-copy {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: clamp(56px, 8vh, 96px);
  padding-top: 0;
}
.intro-copy > h3 {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--grey-text);
  margin: 0;
}
.intro-copy-body p {
  margin: 0 0 1.1em;
  font-size: var(--fs-lead);
  line-height: 1.4;
}
.intro-copy-body p:last-child { margin-bottom: 0; }

/* ============================================================
   RESEARCH  →  light brand.ai section (cream, not full-bleed colour)
   ============================================================ */
main.page.research { background: var(--bg); color: var(--ink); }
.research .page-head,
.research .page-title { color: var(--ink); }

.r-hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(24px, 3vw, 40px);
  margin-bottom: clamp(64px, 9vh, 112px);
  padding-top: 0;
}
.r-hero h2 {
  font-size: var(--fs-display);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: none;
  text-wrap: wrap;
}
.r-hero p {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--grey-text);
}
.r-hero .r-context {
  max-width: none;
  padding: 40px;
  border-radius: var(--radius);
  background: radial-gradient(120% 120% at 50% 0%,#1B3754 0%,#112033 45%,#030303 100%);
  color: #fff;
  margin-bottom: calc(clamp(64px, 9vh, 112px) - clamp(24px, 3vw, 40px));
}
.r-hero .r-answer {
  font-size: var(--fs-h2);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: none;
  text-wrap: wrap;
}

.research p { color: var(--grey-text); }

.r-subs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2vw, 40px);
}
.r-subs-topline {
  padding-top: 0;
}
.r-subs .item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 40px;
  border-radius: 52px;
  background-color: #fff;
  color: #030303;
  overflow: visible;
}
.r-subs .item .num {
  font-family: var(--font);
  font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: -0.02em;
  color: var(--grey-text);
  margin-bottom: 8px;
}
.r-subs .item h3 {
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  font-weight: 500;
  margin: 12px 0 12px;
  letter-spacing: -0.02em;
  color: #030303;
}
.r-subs .item p { margin: 0; color: #030303; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.4; }
.research .page-foot { color: var(--grey-text); }

/* ============================================================
   PRINCIPLES  →  brand.ai dark module (featuresNumbered)
   ============================================================ */
main.page.principles { background: var(--bg); color: var(--ink); }
.principles::before { color: var(--grey-brand) !important; }
.principles .page-title { color: var(--ink); }

.p-lede {
  margin: 0 0 clamp(40px, 6vh, 72px);
  padding: 40px;
  border-radius: var(--radius);
  background: radial-gradient(120% 120% at 50% 0%,#1B3754 0%,#112033 45%,#030303 100%);
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: #fff;
}
.principles .p-list,
.principles .p-row { border-image: none; }
.p-row {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(36px, 5vh, 56px) 0;
  border-bottom: 1px solid var(--separator);
}
.p-row .km { grid-column: span 3; }
.p-row .p-body { grid-column: span 9; }
.p-row .km {
  font-family: var(--mono);
  font-size: var(--fs-h3);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--grey-brand);
}
.principles .p-row h3 {
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.02;
  margin: 0 0 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.p-row p {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--grey-text);
}
/* Voice example — mono, cream, set off by a rule */
.p-row p.p-example {
  margin-top: 24px;
  padding: 24px 28px;
  background: #fff;
  border-radius: 24px;
  font-family: var(--font);
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #030303;
  text-wrap: pretty;
}

/* ============================================================
   LOGO
   ============================================================ */
.logo-grid {
  --reel-h: clamp(40px, 7vw, 84px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(56px, 7vw, 96px);
}
.logo-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  border-top: 1px solid var(--separator);
  padding-top: 28px;
}
.logo-svg { width: min(100%, 720px); height: auto; }
/* Primary lockup is 713×309 — capped so its height matches the old 720px-wide mark */
#primary .logo-svg { width: min(100%, 597px); }

.logo-block .stage {
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(56px, 9vw, 120px) 32px;
  min-height: 280px;
  overflow: hidden;
}
#primary .stage {
  background: linear-gradient(180deg, #0A0A0A 0%, #14202C 100%);
  padding-top: 144px;
  padding-bottom: 144px;
}
#partnerships .logo-svg { width: min(100%, calc(var(--reel-h) * 7.5)); }
#partnerships .stage { background: #14202C; }

/* Secondary: 3D perspective word reel */
.reel-stage { overflow: hidden; gap: 32px; }
.reel-logo { flex: none; height: calc(var(--reel-h) * 1.156); width: auto; display: block; }
.reel-view {
  flex: none;
  width: calc(var(--reel-h) * 4);
  height: calc(var(--reel-h) * 3.2);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: calc(var(--reel-h) * 8.93);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 40%, #000 60%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 40%, #000 60%, transparent 100%);
}
.reel {
  position: relative;
  width: 100%;
  height: var(--reel-h);
  transform-style: preserve-3d;
  animation: reel-spin 16s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
.reel-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
}
.reel-face img { height: 100%; width: auto; max-width: none; display: block; }
.reel-face:nth-child(1) { transform: rotateX(0deg)   translateZ(calc(var(--reel-h) * 1.207)); }
.reel-face:nth-child(2) { transform: rotateX(45deg)  translateZ(calc(var(--reel-h) * 1.207)); }
.reel-face:nth-child(3) { transform: rotateX(90deg)  translateZ(calc(var(--reel-h) * 1.207)); }
.reel-face:nth-child(4) { transform: rotateX(135deg) translateZ(calc(var(--reel-h) * 1.207)); }
.reel-face:nth-child(5) { transform: rotateX(180deg) translateZ(calc(var(--reel-h) * 1.207)); }
.reel-face:nth-child(6) { transform: rotateX(225deg) translateZ(calc(var(--reel-h) * 1.207)); }
.reel-face:nth-child(7) { transform: rotateX(270deg) translateZ(calc(var(--reel-h) * 1.207)); }
.reel-face:nth-child(8) { transform: rotateX(315deg) translateZ(calc(var(--reel-h) * 1.207)); }
@keyframes reel-spin {
  0%, 9%      { transform: rotateX(0deg); }
  12.5%, 21.5% { transform: rotateX(-45deg); }
  25%, 34%    { transform: rotateX(-90deg); }
  37.5%, 46.5% { transform: rotateX(-135deg); }
  50%, 59%    { transform: rotateX(-180deg); }
  62.5%, 71.5% { transform: rotateX(-225deg); }
  75%, 84%    { transform: rotateX(-270deg); }
  87.5%, 96.5% { transform: rotateX(-315deg); }
  100%        { transform: rotateX(-360deg); }
}
@media (prefers-reduced-motion: reduce) { .reel { animation: none; } }

.logo-mark {
  font-family: var(--font);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(64px, 8vw, 132px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.logo-mark sup { font-size: 0.18em; vertical-align: super; font-weight: 700; }
.logo-mark.small { font-size: clamp(32px, 3.4vw, 48px); }
.logo-mark.white { color: var(--white); }
.logo-lockup {
  display: flex; align-items: center; gap: 24px;
  font-weight: 900;
  font-size: clamp(20px, 1.6vw, 24px);
  color: var(--ink);
  letter-spacing: 0.01em;
}
.logo-lockup .bar { width: 1px; height: 1.2em; background: var(--ink); }
.partnerships { display: flex; align-items: center; gap: 16px; color: var(--ink); }
.partnerships .pb {
  font-family: var(--mono);
  font-size: 11px; line-height: 1; font-weight: 400;
  letter-spacing: 0; text-transform: uppercase; text-align: right;
}

/* ============================================================
   GRAPHIC DEVICES  →  brand.ai bento tiles (rounded)
   ============================================================ */
.gd-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 56px;
  border-top: 1px solid var(--separator);
  padding-top: 28px;
}
.gd-tiles { display: grid; gap: clamp(20px, 2vw, 40px); }
.gd-tiles.cols-2 { grid-template-columns: repeat(2, 1fr); }
.tile {
  background: var(--bg-soft);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.tile-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Graph card ----------
   Quoted against a 900px-high frame, so every value is pinned to the
   tile HEIGHT and the whole card scales as one:
     968x695 -> 107.5556 / 77.2222cqh   radius 90 -> 10cqh
     padding 90/46 -> 10 / 5.1111cqh    gap 90 -> 10cqh
     shadow Y9 blur9 -> 1cqh            stroke 3 -> 0.3333cqh
   The tile is the size container (declared on the tile, not the card —
   an element can't read its own container units). */
#data-graphs .tile { container-type: size; }

.graph-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 107.5556cqh;
  height: 77.2222cqh;
  border-radius: 10cqh;
  padding: 10cqh 5.1111cqh;
  display: flex;
  flex-direction: column;
  gap: 10cqh;
  background: linear-gradient(180deg, rgba(3, 3, 3, 0.5) 0%, rgba(17, 32, 51, 0.5) 100%);
  border: 0.3333cqh solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 1cqh 1cqh rgba(0, 0, 0, 0.25);
}

/* 52px type on a 900 frame -> 5.7778cqh. Tracking is -1px at that size,
   set in em so it travels with the type rather than fixing at 1px. */
.graph-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 5.1111cqh;
  color: #FFFFFF;
  font-size: 5.7778cqh;
  line-height: 1.3;
  letter-spacing: -0.0192em;
}
.graph-value {
  font-family: var(--mono);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Chart fills the card's content box; the 90px column gap sits above it */
.graph-chart {
  width: 100%;
  height: auto;
  display: block;
}
/* Device tiles follow the artwork ratio (1500x900) across the page */
#logomark .tile,
#icons .tile,
#imagery .tile,
#data-graphs .tile { aspect-ratio: 1500 / 900; }

/* Icon grounds. `circle` keeps the radial perfectly round — the
   default would stretch it to an ellipse on a non-square tile. */
.tile.grad-linear { background: linear-gradient(180deg, #030303 0%, #112033 100%); }
.tile.grad-radial { background: radial-gradient(circle at center, #112033 0%, #030303 100%); }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Stacked pills in the icon tile ----------
   Five buttons, sized off the tile's HEIGHT so the crop is exact:
     visible height = 0.25b + g + b + g + b + g + b + g + 0.25b
                    = 3.5b + 4g  =  100cqh
   b = 2.3em * font-size. The gap is whatever satisfies that equation,
   so the 75% crop is preserved whenever the type size changes.
   Centring the taller stack in the clipped tile hides 0.75b at each
   end on its own, so the first and last show exactly a quarter.

   The TILE is the size container, not .icon-stack: an element can't
   read its own container units, so a gap declared on the container
   would fall back to the viewport and drift as the window resizes. */
#icons .tile { container-type: size; }

.icon-stack {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8.0358cqh;
}
.icon-stack .prompt-pill {
  font-size: 8.4294cqh;
  flex: none;
}
/* Static ring: white at 20%, no rotation */
.prompt-pill.is-static::before {
  background: rgba(255, 255, 255, 0.2);
  animation: none;
}

/* ---------- Circle pair in the second icon tile ----------
   Sized off the tile HEIGHT, from the 420px-tall / 200px-circle
   reference: circle 200/420 = 47.619cqh, and everything else is a
   ratio of the circle — stroke 2.7/200, icon 80/200, blur 85/200,
   gap = half the icon. So the whole lockup scales as one. */
.circle-pair {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9.5238cqh;
}
.icon-circle {
  flex: none;
  width: 47.6190cqh;
  height: 47.6190cqh;
  border-radius: 50%;
  /* box-sizing is border-box globally, so the stroke sits inside the 200px */
  border: 0.6429cqh solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Handles at 25% in from the left corner and 25% in from the bottom-right
   corner => a 153.43deg axis (mostly vertical with a lean).

   background-origin defaults to padding-box, which sizes the gradient to
   the INSIDE of the stroke while still painting it out to the border box.
   With background-repeat on, the strip under the stroke then shows the
   next tile wrapping around — and because this axis is mostly vertical,
   that seam lands top and bottom only. border-box sizes the gradient to
   the outer edge instead, so it runs full-bleed and the stroke sits over
   solid colour. */
.icon-circle--grad {
  background: linear-gradient(153.43deg, #3C3CF8 0%, #5353E9 100%);
  background-origin: border-box;
}
/* Only the glass circle has a backdrop to blur — the gradient above is
   opaque, so a blur there would do nothing. */
.icon-circle--glass {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(20.2381cqh);
  backdrop-filter: blur(20.2381cqh);
}

.icon-circle-glyph {
  width: 19.0476cqh;
  height: auto;
  display: block;
}

/* ---------- Voice bars ----------
   Each bar scales about its own centre (all four share y=44, so the
   row stays optically centred). Peak is scaleY(1) — the drawn icon —
   so the silhouette is never exceeded and nothing clips the viewBox.
   Durations are deliberately unequal and mutually indivisible, so the
   bars drift out of phase and never settle into a visible loop. */
.voice-bar {
  transform-box: fill-box;
  transform-origin: center;
  animation: voice-bar var(--dur) ease-in-out var(--delay) infinite alternate;
}
/* source order: tall, medium, short-right, short-left */
.voice .voice-bar:nth-child(1) { --min: 0.28; --dur: 0.97s; --delay: -0.4s; }
.voice .voice-bar:nth-child(2) { --min: 0.38; --dur: 0.79s; --delay: -0.7s; }
.voice .voice-bar:nth-child(3) { --min: 0.46; --dur: 0.61s; --delay: -0.2s; }
.voice .voice-bar:nth-child(4) { --min: 0.46; --dur: 0.67s; --delay: 0s; }

@keyframes voice-bar {
  from { transform: scaleY(var(--min)); }
  to   { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .voice-bar { animation: none; }
}

/* Selected pill: solid white ground, ink icon + label */
.prompt-pill.is-current {
  background: #FFFFFF;
  color: #030303;
}
.prompt-pill.is-current .prompt-text { color: inherit; }

.tile.dark { background: var(--ink); }
.tile.mid  { background: var(--grey-brand); }
.tile.red  { background: var(--ink); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.type-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 56px;
}
.type-head h2 {
  margin: 0;
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.weights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
  margin-bottom: 64px;
}
.weights .w-num {
  font-family: var(--mono);
  font-size: clamp(56px, 7vw, 128px);
  line-height: 0.9;
  color: var(--grey-brand);
  font-weight: 400;
}
.weights .w-name {
  font-size: clamp(64px, 8vw, 148px);
  line-height: 0.9;
  color: var(--ink);
  letter-spacing: -0.04em;
}
.weights .w-name.r { font-weight: 700; }
.weights .w-name.mono { font-family: var(--mono); font-weight: 400; letter-spacing: -0.02em; }

.specimen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 20px;
  border-top: 1px solid var(--separator);
  padding-top: 28px;
  margin-bottom: 56px;
}
.specimen .chars {
  font-size: clamp(38px, 3.9vw, 58px);
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.type-page-head, .weights, .specimen { border-image: none; }

/* ---------- Mono in use: split board ----------
   Scales from one number like the prompt pill — the board is a CSS
   container and every value below is in em, so the type grows with
   the tile and the spacing holds its proportions. */
.split-board {
  container-type: inline-size;
  aspect-ratio: 2600 / 1144;
  background: #112033;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 4%;
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: -0.04em;
  overflow: hidden;
}
.split-row {
  /* Two equal halves; both columns right-aligned, so the split names
     stack flush to the centre line and the distances to the right. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
  font-size: 9.9cqw;
  line-height: 1;
  color: var(--split-muted);
  /* tabular figures keep the km column from jittering between rows */
  font-variant-numeric: tabular-nums;
}
.split-row.is-current { color: var(--split-current); }
.split-name { text-align: right; }
.split-km { text-align: right; }
.specimen.regular .chars { font-weight: 400; letter-spacing: -0.02em; }
.specimen.mono .chars { font-family: var(--mono); font-weight: 400; }
.specimen p { color: var(--grey-text); }

/* ============================================================
   COLOR
   ============================================================ */
.split-intro h3, .app-head h3 { margin: 0; }
.type-intro {
  border-top: 1px solid var(--separator);
  padding-top: 28px;
  margin: 0 0 40px;
}
.split-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 32px;
}
.split-intro p {
  margin: 0;
  color: var(--grey-text);
  font-size: clamp(16px, 0.9rem + 0.3vw, 18px);
  line-height: 1.4;
  max-width: 46ch;
}
.color-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  border-top: 1px solid var(--separator);
  padding-top: 28px;
}
.swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.swatch.ink { color: var(--ink); }
.swatch {
  aspect-ratio: 4 / 5;
  position: relative;
  padding: 16px;
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: var(--fs-small);
  border-radius: var(--radius);
}
.swatch .label { font-weight: 500; }
.swatch .hex { opacity: 0.85; font-family: var(--mono); font-size: var(--fs-meta); }

/* Primary palette: rounded, clipped stack of bands */
.palette { border-radius: var(--radius); overflow: hidden; }
.band {
  height: var(--h, 96px);
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) 1.7fr 1.3fr 0.9fr;
  gap: 16px;
  align-items: start;
  padding: 18px clamp(20px, 3vw, 40px);
  color: var(--white);
  font-size: 14px;
  line-height: 1.5;
}
.band .b-name { font-weight: 500; }
.band .b-rgb, .band .b-pms, .band .b-hex { font-family: var(--mono); font-size: 12px; letter-spacing: -0.02em; }
.band.ink { color: var(--ink); }

/* Data colour: two tiles side by side on desktop. Ratio follows the
   calendar artwork (700x388) so it fills its tile edge to edge. */
.data-color-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
/* Each graph pairs with a copy box stacked beneath it */
.data-color-pair { align-items: start; }
.data-color-item { display: flex; flex-direction: column; gap: 16px; }
.data-copy {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 20px 24px;
}
.data-copy-label {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: -0.02em;
  color: #5050EB;
}
.data-copy p:last-child { margin: 0; color: var(--grey-text); font-size: 14px; line-height: 1.55; }
/* Image tiles paired with a copy box beneath each */
.tile-item, .copy-stack { display: flex; flex-direction: column; gap: 16px; }
.data-color {
  width: 100%;
  aspect-ratio: 700 / 388;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 0;
  pointer-events: none;
  object-fit: cover;
}

/* Data chart: gradient ground with each series as its own element,
   so any single line can be recoloured, hidden or animated alone. */
.data-chart {
  background: linear-gradient(180deg, #030303 0%, #112033 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4%, 40px);
}
.data-chart-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
/* Gridlines sit first in the SVG, so they paint behind every series.
   Widths are in user units, so they scale with the viewBox. */
.data-gridline {
  stroke: var(--data-grid);
  stroke-width: 1;
}

.data-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.data-line--orchid { stroke: var(--data-orchid); }
.data-line--gold   { stroke: var(--data-gold); }
.data-line--teal   { stroke: var(--data-teal); }
.data-line--azure  { stroke: var(--data-azure); }
.data-line--coral  { stroke: var(--data-coral); }

/* ---------- AI prompt: pill with a rotating angular stroke ----------
   The pill is drawn entirely in em off its own font-size, so the whole
   lockup scales from that single number. Spec is at a 12px base:
   padding 6/12px, gap 4px, icon 13px, stroke 1px. */
@property --prompt-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.prompt-stage {
  container-type: inline-size;
  aspect-ratio: 5 / 3;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #030303 0%, #112033 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.prompt-pill {
  /* 12px is the drawn size; it grows with the stage from there */
  font-size: max(12px, 5.5cqw);
  line-height: 1.3;
  letter-spacing: -0.01em;
  --stroke: 0.0833em; /* 1px at 12px */

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3333em; /* 4px at 12px */
  padding: 0.5em 1em; /* 6px / 12px at 12px */
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  white-space: nowrap;
}

/* Angular stroke: conic gradient clipped to a ring by an xor mask */
.prompt-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--stroke);
  background: conic-gradient(
    from var(--prompt-angle),
    #595BD5 0%,
    #7979EB 33%,
    #383CBF 66%,
    #595BD5 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: prompt-spin 2.5s linear infinite;
  pointer-events: none;
}
@keyframes prompt-spin {
  to { --prompt-angle: 360deg; }
}

.prompt-icon {
  width: 1.0833em; /* 13px at 12px */
  height: 1.0833em;
  flex: none;
  display: block;
}
.prompt-text { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .prompt-pill::before { animation: none; }
}

/* ---------- Image treatment: draggable before/after split ----------
   Both frames are stacked at full size; the top one is clipped to
   --pos, so neither image ever scales or shifts while dragging. */
.compare {
  --pos: 50%;
  position: relative;
  aspect-ratio: 2602 / 1500;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-soft);
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
}
.compare-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}
.compare-img--top { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 1px;
  background: var(--bg);
  transform: translateX(-50%);
  pointer-events: none;
}
.compare-handle {
  --size: 44px;
  position: absolute;
  top: 50%;
  left: var(--pos);
  transform: translate(-50%, -50%);
  width: var(--size);
  height: var(--size);
  padding: 0;
  border: 1px solid var(--bg);
  border-radius: 50%;
  background: rgba(0, 0, 0, .1);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  cursor: ew-resize;
  appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Grab arrows */
.compare-handle::before,
.compare-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--bg);
  border-right: 1px solid var(--bg);
}
.compare-handle::before { left: 13px; transform: translateY(-50%) rotate(-135deg); }
.compare-handle::after  { right: 13px; transform: translateY(-50%) rotate(45deg); }
.compare-handle:focus-visible {
  outline: 2px solid var(--bg);
  outline-offset: 3px;
}

.compare-label {
  position: absolute;
  bottom: 20px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .1);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: var(--bg);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: -0.02em;
  pointer-events: none;
  transition: opacity .35s;
}
.compare-label--left  { left: 20px; }
.compare-label--right { right: 20px; }
/* Fade each label out as its side is squeezed away */
.compare[data-pos-low]  .compare-label--left  { opacity: 0; }
.compare[data-pos-high] .compare-label--right { opacity: 0; }

@media (max-width: 920px) {
  .compare-handle { --size: 40px; }
  .compare-label { bottom: 12px; }
  .compare-label--left { left: 12px; }
  .compare-label--right { right: 12px; }
}

/* ============================================================
   APPLICATION  →  rounded bento mockups
   ============================================================ */
.app-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 52px;
  border-top: 1px solid var(--separator);
  padding-top: 28px;
}
.app-head p { margin: 0; max-width: 46ch; color: var(--grey-text); font-size: clamp(16px, 0.9rem + 0.3vw, 18px); line-height: 1.4; }

.app-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.4vw, 24px);
  margin-bottom: clamp(12px, 1.4vw, 24px);
}
.app-tile {
  aspect-ratio: 4 / 5;
  background: var(--bg-soft);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-row--split { grid-template-columns: repeat(12, 1fr); }
.app-row--split .app-1 { grid-column: span 7; aspect-ratio: 1500 / 1680; }
/* Follows the instruction-video artwork (1500x1900) so it sits uncropped */
.app-row--split .app-2 { grid-column: span 5; aspect-ratio: 1500 / 1900; }
.app-row--split-c { grid-template-columns: repeat(12, 1fr); }
.app-row--split-c .app-5 { grid-column: span 5; }
.app-row--split-c .app-6 { grid-column: span 7; }
/* Each tile follows its own artwork so nothing is cropped */
.app-row--split-c .app-5 { aspect-ratio: 1500 / 1800; }
.app-row--split-c .app-6 { aspect-ratio: 3125 / 3800; }
.app-row--full { grid-template-columns: 1fr; }
.app-row--split-alt { grid-template-columns: repeat(12, 1fr); }
.app-row--split-alt .app-3 { grid-column: span 5; aspect-ratio: 1500 / 1500; }
.app-row--split-alt .app-4 { grid-column: span 7; aspect-ratio: 1500 / 1814; }

.app-tile.red  { background: var(--ink); }
.app-tile.dark { background: var(--charcoal); }
.app-tile.mid  { background: var(--grey-brand); }
.app-tile.wide { aspect-ratio: 16 / 9; }
.app-tile.tall { aspect-ratio: 3 / 4; }

/* ---------- Physical / Digital carousel ----------
   Landscape frame, window of three 4:5 tiles, advancing one tile
   per stop. Dot values are the mouthwash rem scale resolved at a
   10px root (this site runs a 16px root, so they're set in px). */
/* The carousel IS the third tile: full-width, 16:9, on the deep navy.
   It is the size container, so the slots can be sized off its height. */
.app-tile.module-carousel {
  aspect-ratio: 16 / 9;
  display: block;
  padding: 0;
  background: #112033;
  container-type: size;
}
.module-carousel {
  position: relative;
  --slide-gap: clamp(12px, 1.2vw, 20px);
  /* height of the slides either side of the centred one */
  --slide-rest: 70%;
}
.ssr-carousel-frame {
  overflow: hidden;
  border-radius: var(--radius);
  height: 100%;
}
/* Track fills the frame; shorter neighbours centre against the tall one */
.ssr-carousel-track { height: 100%; align-items: center; }

/* Every tile is 4:5, so its WIDTH follows from its height. A full-height
   tile is 0.8 x the frame height — wider than a third of the frame, so
   the slots are sized to that and the neighbours run off both edges,
   clipped by the frame. cqh already resolves against the container's
   CONTENT box, so no padding subtraction belongs here. */
.ssr-carousel-slide {
  flex: 0 0 80cqh;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.c-tile {
  height: var(--slide-rest);
  aspect-ratio: 4 / 5;
  width: auto;
  background: var(--grey-brand);
  border-radius: 0;
  overflow: hidden;
  position: relative;
}
/* Only animate once the first frame has painted, otherwise the centred
   tile visibly grows from --slide-rest to 100% on load. */
.module-carousel.is-ready .c-tile {
  transition: height 666ms cubic-bezier(.57, 0, 0, 1);
}
/* The loop's silent snap swaps which element is active. Without this the
   incoming real tile would animate 70% -> 100% all over again. Must come
   after the .is-ready rule — same specificity, later wins. */
.module-carousel.is-snapping .c-tile {
  transition: none;
}
/* The centred slide runs the full height of the container */
.ssr-carousel-slide.is-active .c-tile { height: 100%; }
/* Clones are duplicates of the end slides, present only so the loop
   always has a neighbour either side. They must not be announced. */
.ssr-carousel-slide.is-clone { pointer-events: none; }

.c-tile.red  { background: var(--ink); }
.c-tile.dark { background: var(--charcoal); }
.c-tile.mid  { background: var(--grey-brand); }
.ssr-carousel-track {
  display: flex;
  gap: var(--slide-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 666ms cubic-bezier(.57, 0, 0, 1);
  will-change: transform;
}
.module-carousel .ssr-carousel-dots {
  --dot-size: 8px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: rgba(0, 0, 0, .1);
  border-radius: calc(var(--dot-size) * .75);
  bottom: 20px;
  gap: 10px;
  justify-self: center;
  left: 50%;
  margin-top: 0;
  padding: var(--dot-size);
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  width: fit-content;
  z-index: 10;
}
.ssr-carousel-dots { display: flex; justify-content: center; }

.ssr-carousel-dot-button {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  appearance: none;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  padding: 0;
  user-select: none;
}
.module-carousel .ssr-carousel-dots .ssr-carousel-dot-button {
  pointer-events: auto;
  position: relative;
}
/* Enlarged hit area */
.module-carousel .ssr-carousel-dots .ssr-carousel-dot-button::before {
  bottom: -5px;
  content: "";
  display: block;
  left: -5px;
  position: absolute;
  right: -5px;
  top: -5px;
}
.module-carousel .ssr-carousel-dots .ssr-carousel-dot-button .ssr-carousel-dot-icon {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: var(--color-white, #fff);
  border: none;
  border-radius: calc(var(--dot-size) / 2);
  display: block;
  height: var(--dot-size);
  margin: 0;
  opacity: 1 !important;
  overflow: hidden;
  position: relative;
  transition: background-color .35s, width 666ms cubic-bezier(.57, 0, 0, 1);
  width: var(--dot-size);
}
/* Active dot: stretches to a pill and hosts the timer fill */
.module-carousel .ssr-carousel-dots .ssr-carousel-dot-button[aria-disabled="true"] .ssr-carousel-dot-icon {
  background-color: rgba(0, 0, 0, .1);
  width: calc(var(--dot-size) * 2.75);
}
.module-carousel .ssr-carousel-dots .ssr-carousel-dot-button .ssr-carousel-dot-icon::before {
  background-color: var(--color-white, #fff);
  border-radius: calc(var(--dot-size) / 2);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: width 0s linear;
  width: 0;
}
/* JS sets --fill-ms to the autoplay duration on the active dot */
.module-carousel .ssr-carousel-dot-button[aria-disabled="true"] .ssr-carousel-dot-icon::before {
  transition: width var(--fill-ms, 0ms) linear;
}
.module-carousel[data-filling] .ssr-carousel-dot-button[aria-disabled="true"] .ssr-carousel-dot-icon::before {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .ssr-carousel-track { transition: none; }
  .module-carousel.is-ready .c-tile { transition: none; }
  .module-carousel .ssr-carousel-dot-icon::before { transition: none; }
}

/* Photography fills the tile, cropped to its aspect ratio */
.app-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }


/* ============================================================
   BLACK FOOTER  →  brand.ai footer-main
   ============================================================ */
.site-footer {
  background: var(--black-bg);
  color: var(--bg);
  padding: clamp(48px, 7vh, 80px) var(--page-pad) clamp(40px, 6vh, 64px);
}
.site-footer-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 12vh, 140px);
}
.site-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: -0.02em;
}
.site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 72px);
  line-height: 2;
}
.site-footer-nav ul { list-style: none; margin: 0; padding: 0; }
.site-footer-nav a { color: var(--bg); transition: opacity .25s; }
.site-footer-nav a:hover { opacity: 0.6; }
.site-footer-right {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--grey-brand);
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius-pill);
  padding: 0.7em 1.1em;
  color: var(--bg);
  font-size: 12px;
  text-transform: capitalize;
  white-space: nowrap;
}
.status-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80;
  display: block;
  animation: badge-blink 1.5s infinite;
}
@keyframes badge-blink {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.5; transform: scale(0.8); }
}

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .shell { grid-template-columns: 1fr; }
  aside.nav {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--separator);
    flex-direction: column;
    gap: 24px;
  }
  .cover { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 64px; }
  .cover .left { gap: 24px; justify-content: flex-start; }
  .cover h1 { margin: 0; }
  .r-hero, .r-subs, .intro-grid, .intro-hero { grid-template-columns: 1fr; gap: 32px; }
  .intro-grid { gap: 16px; }  /* halve vertical gap between white blocks on mobile */
  .r-subs { gap: 16px; }
  .intro-copy { grid-template-columns: 1fr; gap: 20px; }
  .data-color-pair { grid-template-columns: 1fr; }
  /* Carousel: window narrows to a single tile on mobile */
  .module-carousel { --slide-gap: 12px; }
  .p-row { grid-template-columns: 1fr; gap: 10px; padding: 32px 0; }
  .p-row .km, .p-row .p-body { grid-column: auto; }
  .logo-block, .gd-grid, .type-head, .type-page-head, .specimen, .color-grid, .app-head, .split-intro {
    grid-template-columns: 1fr;
  }
  /* Device tiles stack: 2-up -> 1, 4-up -> 2 (matching .swatches) */
  .gd-tiles.cols-2 { grid-template-columns: 1fr; }
  .swatches { grid-template-columns: repeat(2, 1fr); }
  .band { grid-template-columns: 1fr 1fr; height: auto; min-height: var(--h); gap: 10px 16px; }
  /* Typography header: tighter title/face-name gap + breathing room above the weights row on mobile */
  .type-page-head { gap: 10px; margin-bottom: 44px; }
  .type-page-head .page-title { margin-bottom: 0; }
  .weights { grid-template-columns: max-content max-content; justify-content: start; column-gap: 20px; }
  /* Specimen rows scale to fit the column width on mobile instead of overflowing.
     .specimen is a single column here, so 1cqi == 1% of the row width; the widest
     line (Mono lowercase) is ~10.0x the font-size, so ~9.2cqi keeps it inside with
     a safety margin. Capped at 58px so it never exceeds the desktop display size. */
  .specimen { container-type: inline-size; }
  .specimen .chars { font-size: min(58px, 9.2cqi); }
  .logo-stack { gap: 64px; }
  /* Primary logo stage: tighter top/bottom, slightly more side padding on small screens */
  #primary .stage { padding-top: 88px; padding-bottom: 88px; padding-left: 40px; padding-right: 40px; }
  .app-row--split,
  .app-row--split-alt,
  .app-row--split-c { grid-template-columns: 1fr; }
  .app-row--split .app-1,
  .app-row--split .app-2,
  .app-row--split-alt .app-3,
  .app-row--split-alt .app-4,
  .app-row--split-c .app-5,
  .app-row--split-c .app-6 { grid-column: auto; }
  .site-footer-bottom { flex-direction: column; align-items: flex-start; gap: 40px; }
}


/* ============================================================
   PROMPT ASSISTANCE — spec reference block (Tone of Voice)
   ============================================================ */
.pa-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.pa-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-label);   /* sizing context for the icon (relative) */
}
.pa-icon {
  flex: none;
  width: 1.2em;                  /* relative to the header text */
  height: 1.2em;
  display: block;
  color: var(--ink);            /* white SVG reversed to ink on the light card */
}
.pa-copy {
  flex: none;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: -0.02em;
  color: var(--grey-text);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s;
}
.pa-copy:hover { color: var(--ink); }
.pa-copy.is-copied { color: var(--ink); text-decoration: none; }

/* Scroll region sits directly on the card — no inner box. */
.pa-scroll-wrap { position: relative; }

/* Top & bottom gradients: content fades under the header / off the bottom
   edge. Each is toggled by JS — top shows once scrolled down, bottom shows
   while there is more below — so together they signal "this scrolls". */
.pa-fade,
.pa-fade-bottom {
  position: absolute;
  left: 0;
  right: 13px;            /* clear the custom scroll rail */
  height: 46px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .18s ease;
}
.pa-fade {
  top: 0;
  background: linear-gradient(to bottom,
    var(--bg-soft) 0%, rgba(235,233,230,0.85) 32%, rgba(235,233,230,0) 100%);
}
.pa-fade-bottom {
  bottom: 0;
  background: linear-gradient(to top,
    var(--bg-soft) 0%, rgba(235,233,230,0.85) 32%, rgba(235,233,230,0) 100%);
}

/* Fixed height: ~10 lines of copy + top/bottom padding, then scroll.
   Native scrollbar is hidden; a custom, always-visible rail is drawn instead
   (below), so the box reads as scrollable regardless of the OS/browser. */
.pa-scroll {
  max-height: calc(1.6em * 10 + 16px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 18px 8px 0;
  background: transparent;
  font-size: 13px;
  line-height: 1.6;
  color: var(--grey-text);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                 /* Firefox: hide native */
}
.pa-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; } /* WebKit: hide native */

/* Custom scroll rail — always present, cannot be hidden by overlay-scrollbar
   settings. Track always visible; thumb sized/positioned by systemprompt.js. */
.pa-rail {
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: 4px;
  width: 6px;
  border-radius: 999px;
  background: var(--separator);
  z-index: 4;
}
.pa-rail-thumb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  border-radius: 999px;
  background: var(--grey-text);
  cursor: grab;
}
.pa-rail-thumb:hover { background: var(--ink); }
.pa-rail-thumb:active { background: var(--ink); cursor: grabbing; }
.pa-scroll > :first-child { margin-top: 0; }
.pa-scroll > :last-child { margin-bottom: 0; }
.pa-scroll h1, .pa-scroll h2, .pa-scroll h3, .pa-scroll h4 {
  font-family: var(--mono);
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.3;
  font-weight: 500;
  margin: 18px 0 8px;
}
.pa-scroll h1 { font-size: 16px; }
.pa-scroll h2 { font-size: 15px; }
.pa-scroll h3 { font-size: 14px; }
.pa-scroll h4 { font-size: 13px; }
.pa-scroll p { margin: 0 0 10px; }
.pa-scroll ul, .pa-scroll ol { margin: 0 0 10px; padding-left: 18px; }
.pa-scroll li { margin: 0 0 5px; }
.pa-scroll strong { color: var(--ink); font-weight: 600; }
.pa-scroll em { font-style: italic; }
.pa-scroll a { color: var(--ink); text-underline-offset: 2px; }
.pa-scroll code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg-soft);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--ink);
}
.pa-scroll hr { border: 0; border-top: 1px solid var(--separator); margin: 16px 0; }
.pa-scroll blockquote {
  margin: 0 0 12px;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--grey-brand);
  color: var(--ink);
}
.pa-scroll table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 14px;
  font-size: 12px;
}
.pa-scroll th, .pa-scroll td {
  text-align: left;
  vertical-align: top;
  padding: 6px 10px;
  border-bottom: 1px solid var(--separator);
}
.pa-scroll th {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.pa-scroll thead th { border-bottom: 1px solid var(--grey-brand); }
.pa-scroll td code { white-space: nowrap; }

/* DO / DON'T markers — replace the old tick/cross, slightly more prominent grey */
.pa-scroll .do, .pa-scroll .dont {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #6E6A62;
  margin-right: 6px;
}

/* Mobile: let the page column shrink so the spec box tracks the viewport
   width. Grid items default to min-width:auto, which the wide (nowrap)
   tables otherwise use to blow the column — and the page — out. */
main.page { min-width: 0; }
.data-copy.pa-block { max-width: 100%; }
@media (max-width: 920px) {
  .pa-scroll table { font-size: 11px; table-layout: fixed; width: 100%; }
  .pa-scroll th, .pa-scroll td { padding: 5px 8px; overflow-wrap: anywhere; }
  .pa-scroll th { white-space: normal; }
  .pa-scroll td code, .pa-scroll code { white-space: normal; overflow-wrap: anywhere; }
}

/* ============================================================
   Split-intro horizontal gutter = image-grid gutter (per section)
   ============================================================ */
.color-grid { --pair-gap: 32px; }                    /* matches .data-color-pair */
.gd-grid    { --pair-gap: clamp(20px, 2vw, 40px); }  /* matches .gd-tiles */
.split-intro { column-gap: var(--pair-gap, 20px); }  /* default stays 20px elsewhere */


/* ============================================================
   Soft image load-in (JS-gated; no-JS shows images normally)
   ============================================================ */
html.js img[loading="lazy"] { opacity: 0; transition: opacity .7s ease; }
html.js img[loading="lazy"].is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html.js img[loading="lazy"] { transition: none; }
}