/* YEEDOOR marketing site
   Every colour, size, radius, shadow and duration comes from tokens.css, which is
   generated from brand/tokens/tokens.json. Change values there, not here.
   Spec: DESIGN.md. */

@import url("tokens.css");

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

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}

img, svg, video { display: block; max-width: 100%; }

a { color: var(--dawn-text); }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: var(--space-16);
  top: -48px;
  padding: var(--space-8) var(--space-16);
  background: var(--ink);
  color: var(--ink-text);
  border-radius: var(--radius-md);
  z-index: 10;
}
.skip-link:focus { top: var(--space-16); color: var(--ink-text); }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }

.dark { background: var(--ink-surface); color: var(--ink-text); }
.sunken { background: var(--surface-sunken); }

/* Type */
.eyebrow {
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-line);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--dawn-text);
}
.dark .eyebrow { color: var(--ink-dawn-text); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; }

.display-xl {
  margin-top: var(--space-16);
  font-size: var(--type-display-xl-size);
  line-height: var(--type-display-xl-line);
  letter-spacing: var(--type-display-xl-tracking);
}
.display-lg {
  margin-top: var(--space-12);
  font-size: var(--type-display-lg-size);
  line-height: var(--type-display-lg-line);
  letter-spacing: var(--type-display-lg-tracking);
  max-width: 760px;
}
.heading-2 { font-size: var(--type-heading-2-size); line-height: var(--type-heading-2-line); letter-spacing: var(--type-heading-2-tracking); }
.heading-3 { font-size: var(--type-heading-3-size); line-height: var(--type-heading-3-line); letter-spacing: var(--type-heading-3-tracking); }
.lead {
  margin: var(--space-24) 0 0;
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-line);
  color: var(--ink-muted);
  max-width: var(--measure-narrow);
}
.body-lg {
  margin: var(--space-16) 0 0;
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line);
  color: var(--ink-muted);
  max-width: var(--measure);
}
.dark .body-lg, .dark .lead { color: var(--ink-muted-text); }
.muted { color: var(--ink-muted); }
.small { font-size: var(--type-small-size); line-height: var(--type-small-line); }
.accent { color: var(--ink-dawn); }
.illustrative-label {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  font-weight: var(--type-caption-weight);
  letter-spacing: var(--type-caption-tracking);
  color: var(--ink-muted);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font-text);
  font-size: var(--type-body-size);
  font-weight: 600;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background-color var(--motion-instant) var(--ease-standard), border-color var(--motion-instant) var(--ease-standard);
}
.btn-primary { background: var(--dawn); color: var(--on-dawn); }
.btn-primary:hover { background: var(--dawn-hover); color: var(--on-dawn); }
.dark .btn-primary { background: var(--ink-dawn); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
  padding: 0 24px;
}
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn-sm { height: 44px; padding: 0 20px; font-size: var(--type-body-sm-size); }
.btn-lg { height: 56px; padding: 0 30px; font-size: var(--type-body-lg-size); }
.btn-block { display: flex; width: 100%; }
.btn-row { margin-top: var(--space-32); display: flex; flex-wrap: wrap; gap: var(--space-12); }
.reassure { margin-top: var(--space-20); font-size: var(--type-small-size); line-height: var(--type-small-line); color: var(--ink-muted); }
.text-arrow { font-weight: 600; text-decoration: none; }
.text-arrow::after { content: " →"; }
.text-arrow:hover { text-decoration: underline; }

/* Status badges (DESIGN.md §6.4): light surfaces by default, ink variants in dark contexts */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
}
.badge svg { width: 14px; height: 14px; flex: none; }
.badge-risk { background: var(--status-risk-soft); color: var(--status-risk-text); }
.badge-pending { background: var(--status-pending-soft); color: var(--status-pending-text); }
.badge-verified { background: var(--status-verified-soft); color: var(--approve); }
.badge-next {
  background: transparent;
  color: var(--status-next-text);
  border: 1px solid var(--status-next-border);
  padding: 3px 9px;
  letter-spacing: 0.06em;
}
.badge-approved { background: var(--surface-raised); color: var(--ink); border: 1.5px solid var(--ink); padding: 2.5px 8.5px; }
.dark .badge-risk, .hero-visual .badge-risk { background: var(--ink-risk-soft); color: var(--ink-risk); }
.dark .badge-pending, .hero-visual .badge-pending { background: var(--ink-watch-soft); color: var(--ink-watch); }
.dark .badge-verified, .hero-visual .badge-verified { background: var(--ink-approve-soft); color: var(--ink-approve); }
.dark .badge-next { color: var(--ink-muted-text); border-color: var(--ink-line-strong); }
.badge-role { background: var(--role-soft); color: var(--role-text); }
/* Status icons for badges written without an inline SVG (DESIGN.md §6.4: icon and text) */
.badge-risk:not(:has(svg))::before, .badge-pending:not(:has(svg))::before,
.badge-verified:not(:has(svg))::before, .badge-approved:not(:has(svg))::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--badge-icon) center / contain no-repeat;
  mask: var(--badge-icon) center / contain no-repeat;
}
.badge-risk { --badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 2.4 17.5A2 2 0 0 0 4.1 20.5h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.badge-pending { --badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.badge-verified { --badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.badge-approved { --badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }

/* Role scoping: set --role-* once on a container, use them inside */
[data-role] { --role-solid: var(--role-ceo); --role-text: var(--role-ceo-text); --role-soft: var(--role-ceo-soft); --role-on-ink: var(--role-ceo-on-ink); }
[data-role="store-manager"]   { --role-solid: var(--role-store-manager);   --role-text: var(--role-store-manager-text);   --role-soft: var(--role-store-manager-soft);   --role-on-ink: var(--role-store-manager-on-ink); }
[data-role="google-ads"]      { --role-solid: var(--role-google-ads);      --role-text: var(--role-google-ads-text);      --role-soft: var(--role-google-ads-soft);      --role-on-ink: var(--role-google-ads-on-ink); }
[data-role="meta-ads"]        { --role-solid: var(--role-meta-ads);        --role-text: var(--role-meta-ads-text);        --role-soft: var(--role-meta-ads-soft);        --role-on-ink: var(--role-meta-ads-on-ink); }
[data-role="merchant-center"] { --role-solid: var(--role-merchant-center); --role-text: var(--role-merchant-center-text); --role-soft: var(--role-merchant-center-soft); --role-on-ink: var(--role-merchant-center-on-ink); }
[data-role="seo-content"]     { --role-solid: var(--role-seo-content);     --role-text: var(--role-seo-content-text);     --role-soft: var(--role-seo-content-soft);     --role-on-ink: var(--role-seo-content-on-ink); }
[data-role="social-media"]    { --role-solid: var(--role-social-media);    --role-text: var(--role-social-media-text);    --role-soft: var(--role-social-media-soft);    --role-on-ink: var(--role-social-media-on-ink); }
[data-role="crm"]             { --role-solid: var(--role-crm);             --role-text: var(--role-crm-text);             --role-soft: var(--role-crm-soft);             --role-on-ink: var(--role-crm-on-ink); }

/* ---------------------------------------------------------------------------
   Hero (home and position pages)
   --------------------------------------------------------------------------- */
.hero {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-56);
  align-items: center;
  padding-top: var(--space-56);
  padding-bottom: var(--section-pad);
}
.hero-copy { flex: 1 1 400px; min-width: 0; }
.hero-copy .lead { max-width: 480px; }
.hero:has(.hero-media) { overflow: hidden; overflow: clip; }

/* The video's own background is --surface at every edge, so it blends into the page.
   The mask only fades the outer 5% (plain paper in every frame) to hide codec noise;
   it does not depend on an alpha channel. */
.hero-media {
  flex: 1.5 1 520px;
  min-width: 0;
  position: relative;
  aspect-ratio: 1440 / 900;
  margin-right: calc(-1 * var(--gutter));
}
.hero-video, .hero-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.22);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}
.hero-poster { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-poster { display: block; }
}
@media (max-width: 1040px) {
  .hero-media { margin-right: 0; flex-basis: 100%; }
}

/* Position page hero: a light visual panel instead of the video */
.hero-visual-light { flex: 1.2 1 460px; min-width: 0; }
.hero-copy .badge-role { font-size: var(--type-small-size); padding: 6px 14px; }
.hero-copy .badge-role + .display-xl { margin-top: var(--space-20); }

/* Ink hero panel (campaign pages) */
.hero-visual {
  flex: 1 1 440px;
  min-width: 0;
  background: var(--ink-surface);
  border-radius: var(--radius-arch);
  padding: 120px var(--space-32) var(--space-32);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 520px) {
  .hero-visual { padding: 72px var(--space-16) var(--space-20); border-radius: 200px 200px var(--radius-xl) var(--radius-xl); }
}
.finding-dark {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  padding: var(--space-20) 22px;
  color: var(--ink-text);
}
.finding-dark.is-verified { border-color: var(--ink-approve); }
.finding-dark .meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); }
.finding-dark .time { font-size: var(--type-caption-size); color: var(--ink-muted-text); }
.finding-dark .title { font-family: var(--font-display); font-size: var(--type-heading-4-size); line-height: var(--type-heading-4-line); font-weight: 600; margin-top: 10px; }
.finding-dark .detail { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); color: var(--ink-muted-text); margin-top: 4px; }
.approve-bar {
  background: var(--ink-text);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: 14px 14px 14px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  align-items: center;
  justify-content: space-between;
  font-size: var(--type-body-sm-size);
  line-height: 20px;
}
.approve-bar span:not(.btn) { color: var(--ink-muted); font-size: 13px; }
.illustrative { font-size: var(--type-caption-size); color: var(--ink-muted-text); text-align: center; }

/* Connects strip: platform names in plain text, never logos */
.connects { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.connects .wrap {
  position: relative;
  padding-top: 28px;
  padding-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-40);
  align-items: center;
  justify-content: center;
  font-size: var(--type-body-size);
  font-weight: 600;
  color: var(--ink-muted);
}
.connects-row .wrap { flex-wrap: nowrap; gap: var(--space-40); }
.connects .label { font-weight: 500; white-space: nowrap; flex: none; }
.connects-row .wrap { flex-wrap: nowrap; gap: var(--space-40); }
.connects-viewport { min-width: 0; overflow: hidden; }
.connects-track { display: flex; flex-wrap: wrap; justify-content: center; }
.connects-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-32); }
/* Mark and label sit on one line: the global img{display:block} would otherwise
   push every platform name below its logo. */
.connects-group > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.connects .brand-logo { margin-right: 0; }
.connects-dup { display: none; }

/* Marquee only when the single row does not fit (toggled in motion.js). */
.connects.is-marquee .wrap { flex-wrap: nowrap; }
.connects.is-marquee .connects-viewport { overflow: hidden; }
.connects.is-marquee .connects-track,
.connects.is-marquee .connects-group { flex-wrap: nowrap; justify-content: flex-start; }
.connects.is-marquee .connects-group { padding-right: var(--space-32); }
.connects.is-marquee .connects-dup { display: flex; }
.connects.is-marquee .connects-track {
  width: max-content;
  animation: connects-marquee var(--connects-duration, 40s) linear infinite;
}
.connects.is-marquee .connects-viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.connects.is-marquee:hover .connects-track,
.connects.is-marquee:focus-within .connects-track { animation-play-state: paused; }
@keyframes connects-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 700px) {
  .connects .wrap { flex-direction: column; gap: var(--space-12); }
  .connects-viewport { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .connects.is-marquee .connects-track { animation: none; }
  .connects.is-marquee .connects-group { padding-right: 0; }
  .connects.is-marquee .connects-dup { display: none; }
}

/* ---------------------------------------------------------------------------
   Section header (eyebrow + H2 + intro)
   --------------------------------------------------------------------------- */
.section-head { max-width: 760px; }
.section-head .body-lg { margin-top: var(--space-16); }
.section-head + * { margin-top: var(--space-40); }

/* ---------------------------------------------------------------------------
   Five-card loop stack (home). Motion is in assets/js/motion.js.
   --------------------------------------------------------------------------- */
.stack { position: relative; }
.stack-card {
  position: sticky;
  top: 88px;
  margin-bottom: 26px;
  transform-origin: center;
  will-change: transform, filter;
  border-radius: var(--radius-2xl);
  background: linear-gradient(150deg, var(--surface-raised) 0%, var(--surface-raised) 45%, color-mix(in srgb, var(--dawn-soft) 45%, var(--surface-raised)) 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.stack-card:nth-child(1) { z-index: 1; }
.stack-card:nth-child(2) { z-index: 2; }
.stack-card:nth-child(3) { z-index: 3; }
.stack-card:nth-child(4) { z-index: 4; }
.stack-card:nth-child(5) { z-index: 5; }
.stack-card:last-child { margin-bottom: 0; }
.stack-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(28px, 4.4vw, 58px);
  align-items: center;
  min-height: 460px;
  padding: clamp(28px, 4.4vw, 58px);
}
.stack-card.is-flipped .stack-copy { order: 2; }
.stack-copy h3 { margin-top: var(--space-16); font-size: var(--type-display-lg-size); line-height: var(--type-display-lg-line); letter-spacing: var(--type-display-lg-tracking); }
.stack-copy p { margin: var(--space-16) 0 0; font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); color: var(--ink-muted); max-width: 440px; }
.step-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line);
  font-weight: 600;
}
.step-pill .n {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--ink-text);
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  font-weight: 500;
}
.step-pill.is-approve { background: var(--dawn-soft); }
.step-pill.is-approve .n { background: var(--dawn); color: var(--on-dawn); }
@media (max-width: 820px) {
  .stack-inner { grid-template-columns: 1fr; min-height: 0; }
  .stack-card.is-flipped .stack-copy { order: 0; }
}
/* Cards taller than the viewport, small screens and reduced motion: plain stack */
.stack.is-static .stack-card { position: relative; top: auto; transform: none !important; filter: none !important; }
@media (max-width: 820px) {
  .stack-card { position: relative; top: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .stack-card { transform: none !important; filter: none !important; will-change: auto; }
}

/* ---------------------------------------------------------------------------
   Visual panels: flat vector UI on a soft gradient (DESIGN.md §6.8)
   --------------------------------------------------------------------------- */
.viz {
  position: relative;
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(120% 90% at 0% 0%, var(--dawn-soft) 0%, transparent 55%),
    linear-gradient(160deg, var(--surface-sunken) 0%, var(--surface) 100%);
  box-shadow: var(--shadow-soft);
  padding: clamp(20px, 3vw, 36px);
  min-width: 0;
}
.viz-plain { background: linear-gradient(160deg, var(--surface-sunken) 0%, var(--surface) 100%); }
.viz .illustrative-label { margin-top: var(--space-16); }
@media (max-width: 520px) {
  .viz { padding: var(--space-12); border-radius: var(--radius-xl); }
  .ui { padding: var(--space-16); }
  .stack-inner { padding: var(--space-20); }
}
.ui {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-20);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
}
.ui + .ui { margin-top: var(--space-12); }
.ui-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-8) var(--space-12); }
.ui-title { font-family: var(--font-display); font-weight: 600; font-size: var(--type-heading-4-size); line-height: var(--type-heading-4-line); margin-top: var(--space-8); }
.ui-meta { font-size: var(--type-caption-size); line-height: var(--type-caption-line); font-weight: 500; color: var(--ink-muted); }
.ui-role { font-size: var(--type-caption-size); line-height: var(--type-caption-line); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--role-text, var(--ink-muted)); }
.ui-rows { list-style: none; margin: var(--space-12) 0 0; padding: 0; }
.ui-rows li { display: flex; align-items: center; gap: var(--space-12); padding: 10px 0; border-top: 1px solid var(--line); }
.ui-rows li:first-child { border-top: 0; }
.ui-rows .grow { flex: 1; min-width: 0; }
.ui-rows .num { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; min-width: 3ch; }
.ui-rows .num + .num { min-width: 4ch; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--role-solid, var(--ink-muted)); flex: none; }
.ui-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-16); }
.ui-btn {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: var(--radius-pill);
  font-size: var(--type-small-size); font-weight: 600; border: 1.5px solid var(--line-strong); color: var(--ink); background: transparent;
}
.ui-btn.is-primary { background: var(--dawn); border-color: var(--dawn); color: var(--on-dawn); }
.ui-diff { display: grid; grid-template-columns: auto 1fr auto; gap: 6px var(--space-12); align-items: center; margin-top: var(--space-12); }
.ui-diff .from { font-family: var(--font-mono); color: var(--ink-muted); text-decoration: line-through; }
.ui-diff .to { font-family: var(--font-mono); font-weight: 500; }
.ui-bar { height: 8px; border-radius: 4px; background: var(--surface-sunken); overflow: hidden; }
.ui-bar span { display: block; height: 100%; border-radius: 4px; background: var(--role-solid, var(--ink)); }
.ui-who { display: flex; gap: var(--space-12); align-items: center; }
.ui-sub { margin: 6px 0 0; }
.ui-gap { margin-top: var(--space-12); }
.owner {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none;
  border-radius: 50%; background: var(--ink); color: var(--ink-text); font-size: var(--type-caption-size); font-weight: 600;
}
.ui-log { list-style: none; margin: var(--space-12) 0 0; padding: 0 0 0 var(--space-20); border-left: 2px solid var(--line); }
.ui-log li { position: relative; padding: 6px 0; }
.ui-log li::before {
  content: ""; position: absolute; left: -27px; top: 12px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface-raised); border: 2px solid var(--line-strong);
}
.ui-log li.is-done::before { background: var(--approve); border-color: var(--approve); }
.ui-log li.is-owner::before { background: var(--dawn); border-color: var(--dawn); }
.ui-log .t { font-family: var(--font-mono); font-size: var(--type-caption-size); color: var(--ink-muted); }

/* Stat tiles (DESIGN.md §6.3) */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-12); }
.stat {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-16);
}
.stat .label { font-size: var(--type-caption-size); line-height: var(--type-caption-line); font-weight: 500; color: var(--ink-muted); }
.stat .value { margin-top: 6px; font-family: var(--font-mono); font-weight: 500; font-size: 32px; line-height: 36px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat .change { margin-top: 4px; font-size: var(--type-caption-size); line-height: var(--type-caption-line); color: var(--ink-muted); }

.stats-inline { display: flex; flex-wrap: wrap; gap: var(--space-32); margin-top: var(--space-16); }
.stat-value { margin-top: 2px; font-family: var(--font-mono); font-weight: 500; font-size: 32px; line-height: 36px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* Bar chart built from divs: role colour as a series, ink as the comparison */
.chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 140px; margin-top: var(--space-16); }
.chart .col { display: flex; gap: 3px; align-items: end; height: 100%; }
.chart .col span { flex: 1; border-radius: 4px 4px 0 0; background: var(--role-solid, var(--ink)); }
.chart .col span.alt { background: var(--line-strong); }
.chart-axis { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); text-align: center; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-16); margin-top: var(--space-12); font-size: var(--type-caption-size); color: var(--ink-muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; background: var(--role-solid, var(--ink)); }
.legend i.alt { background: var(--line-strong); }

/* ---------------------------------------------------------------------------
   Split rows: copy one side, visual the other, alternating
   --------------------------------------------------------------------------- */
.row {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.row.is-flipped .row-copy { order: 2; }
.row + .row { margin-top: var(--space-96); }
.row-copy h2, .row-copy h3 { margin-top: var(--space-16); font-size: var(--type-display-lg-size); line-height: var(--type-display-lg-line); letter-spacing: var(--type-display-lg-tracking); }
.row-copy p { margin: var(--space-16) 0 0; font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); color: var(--ink-muted); max-width: 460px; }
@media (max-width: 820px) {
  .row { grid-template-columns: 1fr; }
  .row.is-flipped .row-copy { order: 0; }
  .row + .row { margin-top: var(--space-64); }
}

/* ---------------------------------------------------------------------------
   Team grid (eight positions)
   --------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-20);
}
.position {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-top: 3px solid var(--role-solid);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.position .role-name { font-size: var(--type-caption-size); line-height: var(--type-caption-line); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--role-text); }
.position h3 { margin-top: var(--space-8); font-size: var(--type-heading-4-size); line-height: var(--type-heading-4-line); }
.position p { margin: var(--space-8) 0 0; color: var(--ink-muted); }
.position .text-arrow { margin-top: auto; padding-top: var(--space-16); color: var(--ink); }
.position.is-lead { background: var(--ink-surface); color: var(--ink-text); border-color: var(--ink-line); border-top-color: var(--ink-dawn); box-shadow: none; }
.position.is-lead .role-name { color: var(--ink-dawn-text); }
.position.is-lead p { color: var(--ink-muted-text); }
/* ---------------------------------------------------------------------------
   Legacy content blocks (also used by the campaign pages)
   --------------------------------------------------------------------------- */
.card-grid {
  margin-top: var(--space-40);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-20);
}
.finding {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  box-shadow: var(--shadow-card);
}
.finding .area { font-size: var(--type-caption-size); font-weight: 500; letter-spacing: 0.02em; color: var(--ink-muted); }
.finding h3 { margin-top: 10px; }
.finding p { margin: 6px 0 0; font-size: var(--type-body-size); line-height: var(--type-body-line); color: var(--ink-muted); }
.fix-ready {
  margin-top: var(--space-16);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-12) var(--space-16);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
}
.fix-ready strong {
  display: block;
  font-size: var(--type-caption-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.footnote { margin-top: var(--space-16); font-size: var(--type-caption-size); color: var(--ink-muted); }

.steps {
  margin: var(--space-48) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-24) var(--space-16);
}
.steps li { border-top: 3px solid var(--ink-line-strong); padding-top: var(--space-16); }
.steps li.is-act { border-top-color: var(--ink-dawn); }
.steps li.is-verify { border-top-color: var(--ink-approve); }
.steps .n { font-family: var(--font-mono); font-size: var(--type-mono-sm-size); color: var(--ink-muted-text); }
.steps .name { font-family: var(--font-display); font-size: var(--type-heading-3-size); line-height: var(--type-heading-3-line); font-weight: 600; margin-top: var(--space-8); }
.steps .body { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); color: var(--ink-muted-text); margin-top: 6px; }

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-40);
}
.pillars h3 { font-size: var(--type-heading-2-size); line-height: var(--type-heading-2-line); }
.pillars p { margin: 10px 0 0; font-size: var(--type-body-size); line-height: var(--type-body-line); color: var(--ink-muted); }

.watch-list { margin: var(--space-40) 0 0; padding: 0; list-style: none; max-width: 820px; }
.watch-list li {
  display: flex;
  gap: var(--space-24);
  align-items: flex-start;
  padding: var(--space-24) 0;
  border-top: 1px solid var(--line);
}
.watch-list .n { font-family: var(--font-mono); font-size: var(--type-body-size); line-height: 28px; color: var(--dawn-text); width: 32px; flex: none; }
.watch-list h3 { font-size: var(--type-heading-3-size); line-height: var(--type-heading-3-line); }
.watch-list p { margin: 4px 0 0; font-size: var(--type-body-size); line-height: var(--type-body-line); color: var(--ink-muted); }

.split { display: flex; flex-wrap: wrap; gap: var(--space-48); align-items: flex-start; }
.split > * { flex: 1 1 380px; min-width: 0; }
.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}
.check-list li { display: flex; gap: var(--space-12); }
.check-list svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--approve); }
.check-list-gap { margin-top: var(--space-24); }

.price-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--shadow-pop);
}
.price-card .plan { font-size: var(--type-body-size); font-weight: 600; }
.price { margin-top: var(--space-12); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-8); }
.price .amount { font-family: var(--font-mono); font-size: var(--type-stat-size); line-height: var(--type-stat-line); font-weight: 500; letter-spacing: var(--type-stat-tracking); }
.price .term { font-size: var(--type-body-size); color: var(--ink-muted); }
.price-card ul {
  margin: var(--space-24) 0 28px;
  padding: 0 0 0 var(--space-20);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}
@media (max-width: 520px) { .price-card { padding: var(--space-24); } }

.cta-band .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-32);
  align-items: center;
  justify-content: space-between;
}
.cta-band h2 { font-size: clamp(36px, 5vw, 60px); line-height: 1.05; letter-spacing: -0.03em; }
.cta-band .copy { flex: 1 1 480px; min-width: 0; }

/* Campaign landing pages */
.lp-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding-top: var(--space-20); padding-bottom: var(--space-20); }
.lp-header .logo img { height: 32px; width: auto; }
.lp-footer .wrap { padding-top: var(--space-32); padding-bottom: var(--space-32); display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-24); font-size: var(--type-small-size); color: var(--ink-muted); }
.lp-footer a { color: var(--ink-muted); }
.benefits {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}
.benefits li { display: flex; gap: var(--space-12); }
.benefits svg { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.timeline { margin: 0; padding: 0 0 0 28px; list-style: none; border-left: 3px solid var(--ink-line); display: flex; flex-direction: column; gap: 22px; }
.timeline li { position: relative; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -37px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--dot, var(--ink-risk));
}
.timeline .time { font-family: var(--font-mono); font-size: var(--type-mono-sm-size); color: var(--ink-muted-text); }
.timeline .title { font-family: var(--font-display); font-size: var(--type-heading-4-size); line-height: var(--type-heading-4-line); font-weight: 600; margin-top: 2px; color: var(--ink-text); }
.timeline .badge { margin-top: var(--space-8); }

/* ---------------------------------------------------------------------------
   Reveal on first view. motion.js adds .will-reveal only to [data-reveal] blocks that
   start below the fold, so nothing is ever hidden without JavaScript.
   --------------------------------------------------------------------------- */
.will-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--motion-reveal) var(--ease-enter), transform var(--motion-reveal) var(--ease-enter);
}
.will-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .will-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------------------
   Floating navigation (DESIGN.md §6.6). Markup comes from tools/site/build.py,
   behaviour from assets/js/nav.js. Structure follows the production nav: a pill
   that floats over the page, with Platform and Resources opening panels.
   --------------------------------------------------------------------------- */
.nav-shell {
  position: sticky;
  top: var(--nav-offset);
  z-index: 100;
  margin-top: var(--nav-offset);
  padding: 0 var(--gutter);
}
.nav-pill {
  position: relative;
  max-width: var(--container);
  height: var(--nav-height);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: 0 10px 0 var(--space-20);
  border-radius: var(--radius-pill);
  background: var(--glass-surface);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: background-color var(--motion-base) var(--ease-standard);
}
.nav-shell.is-scrolled .nav-pill { background: var(--glass-surface-strong); }
.nav-brand img { height: 29px; width: auto; }
.nav-links { flex: 1; display: flex; align-items: center; gap: 2px; min-width: 0; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: var(--type-body-sm-size);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--motion-instant) var(--ease-standard), color var(--motion-instant) var(--ease-standard);
}
.nav-link:hover, .nav-group.is-open > .nav-link { background: rgba(14, 18, 27, 0.05); color: var(--ink); }
.nav-link[aria-current="page"] { color: var(--dawn-text); }
.nav-chevron { display: inline-flex; width: 12px; height: 12px; opacity: 0.6; transition: transform var(--motion-fast) var(--ease-standard); }
.nav-chevron svg, .nav-panel svg, .nav-toggle svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-chevron svg { width: 12px; height: 12px; }
.nav-group.is-open .nav-chevron { transform: rotate(180deg); opacity: 1; }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-8); }
.nav-login { padding: 8px 12px; color: var(--ink); font-size: var(--type-body-sm-size); font-weight: 600; text-decoration: none; white-space: nowrap; }
.nav-login:hover { color: var(--dawn-text); }
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle svg + svg, .nav-shell.is-menu-open .nav-toggle svg:first-child { display: none; }
.nav-shell.is-menu-open .nav-toggle svg + svg { display: block; margin: 0 auto; }
.nav-toggle svg:first-child { margin: 0 auto; }

/* Panels */
/* Each panel opens from its own trigger: left edges line up (Platform under Platform,
   Resources under Resources). */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-panel {
  position: absolute;
  top: calc(100% + 18px);
  left: 0;
  z-index: 110;
  width: min(620px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  box-shadow: var(--glass-panel-shadow);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), visibility var(--motion-fast);
}
.nav-panel-resources { width: min(600px, calc(100vw - 32px)); grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr); }
.nav-panel-resources .nav-feature strong { font-size: var(--type-body-size); line-height: var(--type-body-line); }
.nav-panel-resources .nav-posts a {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--type-small-size); line-height: var(--type-small-line);
}
.nav-group.is-open .nav-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  /* Visible at once when opening, so keyboard focus can move straight into the panel */
  transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), visibility 0s;
}
.nav-panel-main { padding: var(--space-20) var(--space-24); min-width: 0; }
.nav-panel-side { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16); background: var(--surface-sunken); min-width: 0; }
.nav-eyebrow, .nav-label {
  display: block;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.nav-eyebrow { color: var(--dawn-text); margin-bottom: var(--space-8); }
.nav-panel-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-display);
  font-size: var(--type-heading-4-size);
  line-height: var(--type-heading-4-line);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.nav-panel-title svg { width: 16px; height: 16px; }
.nav-panel-title:hover { color: var(--dawn-text); }
.nav-panel-main > p { margin: var(--space-4) 0 var(--space-12); color: var(--ink-muted); font-size: var(--type-small-size); line-height: var(--type-small-line); max-width: 420px; }
.nav-agents { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--space-8); margin-top: var(--space-8); }
.nav-agent, .nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: 7px 8px;
  border-radius: var(--radius-md);
  color: var(--ink);
  font-size: var(--type-small-size);
  font-weight: 600;
  text-decoration: none;
}
.nav-agent:hover, .nav-item:hover { background: var(--surface-sunken); }
.nav-items { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--space-4); margin-top: var(--space-8); }
.nav-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink); }
.nav-icon svg { width: 15px; height: 15px; stroke-width: 1.8; }
.nav-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-16);
  border-radius: var(--radius-lg);
  background: var(--ink-surface);
  color: var(--ink-text);
  text-decoration: none;
}
.nav-feature img { width: 121px; height: auto; }
.nav-feature .nav-eyebrow { color: var(--ink-dawn-text); margin: 0; }
.nav-feature strong { font-family: var(--font-display); font-size: var(--type-heading-4-size); line-height: var(--type-heading-4-line); font-weight: 600; }
.nav-feature span:not(.nav-eyebrow) { color: var(--ink-muted-text); font-size: var(--type-small-size); line-height: var(--type-small-line); }
.nav-feature em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-weight: 600; font-size: var(--type-small-size); color: var(--ink-dawn-text); }
.nav-feature em svg { width: 14px; height: 14px; }
.nav-feature:hover em { text-decoration: underline; }
.nav-next { display: grid; gap: var(--space-8); padding: var(--space-16); border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); font-size: var(--type-small-size); }
.nav-next > span:not(.nav-label) { display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); }
.nav-posts { display: grid; gap: 2px; }
.nav-posts .nav-label { margin-bottom: var(--space-4); }
.nav-posts a { padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink); font-size: var(--type-small-size); line-height: var(--type-small-line); font-weight: 600; text-decoration: none; }
.nav-posts a:hover { color: var(--dawn-text); }

/* Small screens: the pill keeps logo and menu button; links open as a sheet */
@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-height: calc(100vh - var(--nav-height) - 3 * var(--nav-offset));
    overflow-y: auto;
    padding: var(--space-12);
    border-radius: var(--radius-xl);
    background: var(--glass-surface-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-panel-shadow);
  }
  .nav-shell.is-menu-open .nav-links { display: flex; }
  .nav-shell.is-menu-open .nav-pill { background: var(--glass-surface-strong); }
  .nav-link { justify-content: space-between; padding: 12px 14px; font-size: var(--type-body-size); }
  .nav-group { flex-direction: column; align-items: stretch; }
  .nav-panel {
    position: static;
    width: auto;
    display: none;
    grid-template-columns: 1fr;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border-radius: var(--radius-lg);
    margin: 2px 0 var(--space-8);
  }
  .nav-group.is-open .nav-panel { display: grid; transform: none; }
  .nav-panel-main { padding: var(--space-16); }
  .nav-items { grid-template-columns: 1fr; }
  .nav-panel-main > p { margin-bottom: var(--space-16); }
  .nav-actions { margin: var(--space-8) 0 0; padding-top: var(--space-12); border-top: 1px solid var(--line); justify-content: space-between; }
}
@media (max-width: 520px) {
  .nav-agents { grid-template-columns: 1fr; }
  .nav-panel-side { padding: var(--space-12); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-panel, .nav-chevron, .nav-pill { transition: none; }
}

/* Footer (structure follows the production footer) */
.site-footer { border-top: 1px solid var(--line); margin-top: 0; }
.site-footer .wrap { padding-top: var(--space-56); padding-bottom: var(--space-32); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: var(--space-32) var(--space-24); }
.foot-brand img { height: 29px; width: auto; }
.foot-brand p { margin: var(--space-12) 0 0; color: var(--ink-muted); font-size: var(--type-small-size); line-height: var(--type-small-line); max-width: 220px; }
.foot-col { display: flex; flex-direction: column; gap: 10px; font-size: var(--type-small-size); line-height: var(--type-small-line); }
.foot-col strong { font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.foot-col a, .foot-legal a { color: var(--ink-muted); text-decoration: none; }
.foot-col a:hover, .foot-legal a:hover { color: var(--ink); text-decoration: underline; }
.foot-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-8) var(--space-24);
  margin-top: var(--space-48);
  padding-top: var(--space-20);
  border-top: 1px solid var(--line);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  color: var(--ink-muted);
}
@media (max-width: 960px) { .foot-grid { grid-template-columns: repeat(3, 1fr); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* Guides library and case-study index */
.guides-hero { padding-top: var(--space-64); padding-bottom: var(--space-40); }
.guides-hero > * { max-width: 860px; }
.guides-hero .lead { max-width: var(--measure); }
.guides-library { padding-bottom: var(--section-pad); }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-32); }
.filter-chip {
  display: inline-flex; align-items: center; gap: var(--space-8); padding: 8px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); text-decoration: none;
  font-size: var(--type-small-size); font-weight: 600;
}
.filter-chip span { font-family: var(--font-mono); font-size: var(--type-caption-size); color: var(--ink-muted); }
.filter-chip:hover { border-color: var(--line-strong); }
.filter-chip[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--ink-text); }
.filter-chip[aria-current="page"] span { color: var(--ink-muted-text); }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-24); }
.guide-card {
  display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-16) var(--space-16) var(--space-24);
  border-radius: var(--radius-xl); background: var(--surface-raised); border: 1px solid var(--line); box-shadow: var(--shadow-card);
  color: var(--ink); text-decoration: none; transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}
.guide-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.guide-cover { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); background: var(--surface-sunken); margin-bottom: var(--space-8); }
.guide-card.is-link { background: var(--surface-sunken); box-shadow: none; }
.guide-kicker, .guide-card > span:first-child { padding: 0 var(--space-8); font-size: var(--type-caption-size); line-height: var(--type-caption-line); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dawn-text); }
.guide-card h3 { padding: 0 var(--space-8); font-size: var(--type-heading-4-size); line-height: var(--type-heading-4-line); }
.guide-card p { margin: 0; padding: 0 var(--space-8); color: var(--ink-muted); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); }
.guide-meta { margin-top: auto; padding: var(--space-8) var(--space-8) 0; display: flex; justify-content: space-between; gap: var(--space-12); font-size: var(--type-small-size); color: var(--ink-muted); }
.guide-meta em { font-style: normal; font-weight: 600; color: var(--ink); }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); margin-top: var(--space-48); }
.pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--type-small-size); }
.pagination a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--ink-text); }
.empty-state { grid-column: 1 / -1; padding: var(--space-48); border: 1px dashed var(--line-strong); border-radius: var(--radius-xl); color: var(--ink-muted); text-align: center; }
.empty-state p { margin: var(--space-8) 0 0; }

/* Page-specific visual pieces */
.connects-note { font-weight: 500; color: var(--ink-muted); }
.app-lockup { height: 44px; width: auto; }
.app-lockup + .display-xl { margin-top: var(--space-24); }
.ui code, .dedupe code { font-family: var(--font-mono); font-size: var(--type-caption-size); }
.event-rows code { min-width: 11ch; color: var(--ink); }
.event-rows .tick { width: 3ch; text-align: center; color: var(--approve); font-weight: 600; }
.dedupe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.dedupe .ui { margin: 0; display: grid; gap: 4px; }
.dedupe .ui + .ui { margin-top: 0; }
.dedupe-result { grid-column: 1 / -1; display: flex !important; align-items: center; gap: var(--space-12); }
.next-line { margin: var(--space-16) 0 0; display: flex; align-items: center; gap: var(--space-8); font-size: var(--type-small-size); color: var(--ink-muted); }
.spine { display: grid; gap: var(--space-12); }
.spine-node { margin: 0 !important; display: grid; align-content: center; justify-items: center; text-align: center; gap: 2px; padding: var(--space-12) var(--space-16); }
.spine-node.is-pixel img { height: 26px; width: auto; }
.spine-node.is-team { border-top: 3px solid var(--role-solid); }
.spine-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
@media (max-width: 520px) { .spine-out { grid-template-columns: 1fr; } }
.spine-out .is-team { grid-column: 1 / -1; }
.spine > .spine-node:not(:last-child)::after { content: "↓"; justify-self: center; color: var(--ink-muted); font-size: var(--type-small-size); line-height: 1; margin-bottom: -6px; }

/* Official platform marks before platform names (assets/img/brands/, DESIGN.md §9) */
.brand-logo { display: inline-block; flex: none; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; object-fit: contain; }