/* ====================================================================
   CROP ANALYTICA V6 — SHARED DESIGN SYSTEM
   Phase 2 pages (Solutions, About, Contact) share this stylesheet.
   Tokens → reset → primitives → components → shared sections
   ==================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  --ink:           #070A08;
  --soil:          #0F1410;
  --ink2:          #141A16;
  --ink3:          #1C2420;
  --paper:         #F4F0E6;
  --paper2:        #EAE4D3;
  --paper3:        #DED6BF;
  --signal:        #2E7D4A;
  --signal-hi:     #3A9559;
  --hyper:         #7CC16A;
  --amber:         #D4960A;
  --cyan:          #6AA8C1;
  --red:           #C24A3A;
  --ink-mute:      #8A958E;
  --paper-mute:    #5C5A50;
  --hairline-dark: rgba(255,255,255,0.10);
  --hairline-lite: rgba(12,14,12,0.14);

  --serif:  "Montserrat", system-ui, -apple-system, sans-serif;
  --sans:   "Montserrat", system-ui, -apple-system, sans-serif;
  --mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-disp-xl: clamp(56px, 9.2vw, 128px);
  --fs-disp-l:  clamp(30px, 4.0vw,  60px);
  --fs-disp-m:  clamp(28px, 3.5vw,  52px);
  --fs-disp-s:  clamp(24px, 2.5vw,  38px);
  --fs-headline: clamp(22px, 2.0vw, 30px);
  --fs-subhead:  clamp(17px, 1.3vw, 21px);
  --fs-body-l:   18px;
  --fs-body:     16px;
  --fs-mono-lbl: 13px;
  --fs-mono-dt:  13px;

  --side: clamp(24px, 6vw, 96px);
  --col-gap: 24px;
  --section-pad: clamp(48px, 5.4vw, 96px);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }

/* ---------- 3. TYPE PRIMITIVES ---------- */
.display-xl { font-family: var(--serif); font-size: var(--fs-disp-xl); font-weight: 400; line-height: 0.95; letter-spacing: -0.02em; }
.display-l  { font-family: var(--serif); font-size: var(--fs-disp-l);  font-weight: 400; line-height: 1.00; letter-spacing: -0.015em; }
.display-m  { font-family: var(--serif); font-size: var(--fs-disp-m);  font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; }
.display-s  { font-family: var(--serif); font-size: var(--fs-disp-s);  font-weight: 400; line-height: 1.10; letter-spacing: -0.01em; }
.headline   { font-family: var(--sans);  font-size: var(--fs-headline);  font-weight: 600; line-height: 1.25; }
.subhead    { font-family: var(--sans);  font-size: var(--fs-subhead);   font-weight: 400; line-height: 1.50; color: var(--ink-mute); }
.body-l     { font-family: var(--sans);  font-size: var(--fs-body-l);    line-height: 1.65; }
.mono-lbl   { font-family: var(--mono);  font-size: var(--fs-mono-lbl);  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.mono-dt    { font-family: var(--mono);  font-size: var(--fs-mono-dt);   font-weight: 400; }

/* Bold geometric headings (Montserrat) — override per-section weights */
h1, h2, h3, h4,
.display-m, .display-s, .headline,
.r-row-title, .proof-numeral, .b-num { font-weight: 700 !important; }
.display-xl, .display-l { font-weight: 800 !important; }

em { font-style: normal; color: var(--hyper); }

.plate-dark  { background: var(--ink);  color: var(--paper); }
.plate-dark  .subhead { color: var(--ink-mute); }
.plate-light { background: var(--paper); color: var(--ink); }
.plate-light .subhead { color: var(--paper-mute); }

/* ---------- 4. LAYOUT ---------- */
.container { width: 100%; padding-inline: var(--side); }
.container.wide { padding-inline: clamp(16px, 3vw, 48px); }
.section { padding-block: var(--section-pad); position: relative; }

.hairline-top    { border-top: 1px solid var(--hairline-dark); }
.hairline-bottom { border-bottom: 1px solid var(--hairline-dark); }
.plate-light .hairline-top    { border-top-color: var(--hairline-lite); }
.plate-light .hairline-bottom { border-bottom-color: var(--hairline-lite); }

/* ---------- 5. NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 72px;
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--side);
  background: rgba(7,10,8,0.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hairline-dark);
}
/* Wordmark lockup — Crop [leaf] Analytica, the brand arrangement. The type is
   white and only the leaf carries the green gradient, so the mark reads as one
   piece on the dark plates. Drawn inline as SVG rather than loaded as a PNG so
   it stays crisp at every size and the gradient is themeable. */
/* The wordmark and leaf are traced from the supplied artwork (see
   assets/ca-logo.svg — 97.9% IoU against it), because the logotype is custom
   lettering: no font has the leaf-shaped dot on the 'i'.
   The strapline is NOT traced. It is only 18px tall in the source artwork, so
   its traced contours carried the bitmap's staircase and looked rough at small
   sizes. It is ordinary lettering with no custom detail, so it is set as live
   Questrial text — the face the wordmark itself measures as — which stays
   crisp at any size. Both are driven off --mark-h so they scale together. */
.brand {
  --mark-h: 30px;
  display: inline-flex; flex-direction: column; align-items: center;
  gap: calc(var(--mark-h) * 0.13);
  line-height: 1;
}
.brand img {
  height: var(--mark-h); width: auto; display: block;
  /* safety net: the global img rule caps width at 100%, and if a container
     ever forced that the mark would squash — contain letterboxes instead */
  object-fit: contain;
  transition: transform 520ms cubic-bezier(0.34, 1.4, 0.42, 1),
              filter 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.brand:hover img {
  transform: scale(1.035);
  filter: drop-shadow(0 0 10px rgba(124, 193, 106, 0.32));
}
.brand-tag {
  display: inline-flex; align-items: center; gap: 0.42em;
  font-family: "Questrial", var(--sans);
  font-size: calc(var(--mark-h) * 0.39);
  font-weight: 400;
  letter-spacing: 0.012em;
  color: #fff;
  white-space: nowrap;
}
.brand-tag i { font-style: normal; opacity: 0.8; }
@media (prefers-reduced-motion: reduce) {
  .brand:hover img { transform: none; }
}
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--paper); opacity: 0.8;
  transition: opacity 160ms var(--ease-out);
}
.nav-links a:hover, .nav-links a.active { opacity: 1; color: var(--hyper); }
.nav .cta {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 18px;
  background: var(--signal);
  color: var(--paper);
  border-radius: 999px;
  transition: background 160ms var(--ease-out);
}
.nav .cta:hover { background: var(--signal-hi); }
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--paper); border-radius: 2px; transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); }
.nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-cta-mobile { display: none; }

/* ---------- 6. BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; height: 52px;
  padding-inline: 28px;
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  letter-spacing: 0.005em;
  border-radius: 2px;
  transition: all 180ms var(--ease-out);
  white-space: nowrap;
}
.btn-primary { background: var(--signal); color: var(--paper); }
.btn-primary:hover { background: var(--signal-hi); box-shadow: 0 0 0 4px rgba(46,125,74,0.18); }
.btn-ghost { border: 1px solid var(--ink-mute); color: var(--paper); }
.btn-ghost:hover { border-color: var(--paper); }
.plate-light .btn-ghost { border-color: var(--paper-mute); color: var(--ink); }
.plate-light .btn-ghost:hover { border-color: var(--ink); }
.btn .arrow { transition: transform 180ms var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- 7. DATELINE, REVEAL, PILLS ---------- */
.dateline {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
.dateline .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--hyper);
  box-shadow: 0 0 8px rgba(124,193,106,0.7);
  flex-shrink: 0;
  animation: pulse 2.4s ease-in-out infinite;
}
.dateline .sep { opacity: 0.45; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
  border: 1px solid currentColor;
  line-height: 1;
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill-verified  { color: var(--hyper); }
.pill-monitor   { color: var(--amber); }
.pill-stressed  { color: var(--red); }
.pill-pending   { color: var(--ink-mute); }

/* ---------- 8. SHARED MASTHEAD ---------- */
.masthead {
  position: relative;
  padding-top: 132px;
  padding-bottom: clamp(64px, 6vw, 96px);
  overflow: hidden;
  background: var(--ink);
}
.masthead-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 25%, rgba(46,125,74,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 80% 70%, rgba(212,150,10,0.08) 0%, transparent 60%),
    linear-gradient(180deg, #0a1009 0%, #050806 100%);
  z-index: 0;
}
.masthead-inner { position: relative; z-index: 2; }
.masthead .dateline-strip {
  padding-block: 12px;
  border-top: 1px solid var(--hairline-dark);
  border-bottom: 1px solid var(--hairline-dark);
  margin-bottom: clamp(48px, 8vw, 88px);
}
.masthead h1 { max-width: 19ch; font-size: clamp(32px, 4.9vw, 78px); line-height: 1.03; margin-bottom: 20px; }
.masthead .subhead { max-width: 58ch; font-size: clamp(14px, 1.1vw, 16px); color: var(--ink-mute); margin-bottom: 24px; }
.masthead .cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ---------- 9. SHARED FOOTER ---------- */
.footer { padding-block: 72px 40px; background: #050806; border-top: 1px solid var(--hairline-dark); }
.footer-grid {
  display: grid;
  /* the brand column carries the lockup and a paragraph, and the lockup is
     ~7:1 — at 1.4fr it squeezed to 171px at 1024, which forced the strapline
     down to ~9px. 1.9fr keeps it readable across the desktop range. */
  grid-template-columns: 1.9fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 56px;
}
.footer-brand .brand { margin-bottom: 22px; }
/* Same lockup, larger in the footer. The mark is ~7:1 and the footer grid can
   squeeze this column to ~171px at 1024, so a viewport-based height overflows it
   and the global width cap then squashes the mark. Sizing off the column itself
   makes that impossible: 13cqw x 7.057 = 92% of the column, whatever its width.
   The vw clamp above it is the fallback where container queries are missing. */
.footer-brand { container-type: inline-size; }
.footer-brand .brand.brand-full {
  --mark-h: clamp(22px, 2.1vw, 40px);
  --mark-h: min(40px, 13cqw);
}
.footer-brand p { color: var(--ink-mute); font-size: 14px; max-width: 40ch; line-height: 1.55; }
.footer-col h5 {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-mute); letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
  font-family: var(--sans); font-size: 14px; color: var(--paper); opacity: 0.85;
  transition: opacity 160ms var(--ease-out);
}
.footer-col a:hover { opacity: 1; color: var(--hyper); }
.footer-colophon {
  padding-top: 28px;
  border-top: 1px solid var(--hairline-dark);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-mute); letter-spacing: 0.14em; text-transform: uppercase;
}
.footer-colophon .footer-legal a {
  color: var(--ink-mute);
  transition: color 160ms var(--ease-out);
}
.footer-colophon .footer-legal a:hover { color: var(--hyper); }

/* ---------- 10. PROOF STRIP (shared) ---------- */
.proof {
  padding-block: clamp(60px, 7.2vw, 108px);
  background: var(--ink);
  border-top: 1px solid var(--hairline-dark);
  border-bottom: 1px solid var(--hairline-dark);
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.proof-cell {
  padding: 12px 28px;
  border-right: 1px solid var(--hairline-dark);
}
.proof-cell:last-child { border-right: none; }
.proof-numeral {
  font-family: var(--serif);
  font-size: clamp(56px, 9vw, 136px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-weight: 400;
  color: var(--paper);
  display: flex; align-items: baseline; gap: 4px;
}
.proof-numeral .suffix { font-size: 0.55em; color: var(--hyper); letter-spacing: -0.01em; }
.proof-label { margin-top: 18px; color: var(--ink-mute); max-width: 22ch; }

/* ---------- 11. RESPONSIVE ---------- */
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .nav .cta { display: none; }
  .nav-links {
    position: fixed; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--side) 20px;
    background: rgba(7,10,8,0.97);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--hairline-dark);
    opacity: 0; transform: translateY(-12px); pointer-events: none;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  }
  .nav.open .nav-links { opacity: 1; transform: none; pointer-events: auto; }
  .nav-links a { width: 100%; padding: 16px 0; font-size: 17px; opacity: 0.92; border-bottom: 1px solid var(--hairline-dark); }
  .nav-links a:last-child { border-bottom: none; }
  .nav-cta-mobile { display: block; margin-top: 12px; color: var(--hyper); opacity: 1; font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .proof-cell { border-right: none; border-bottom: 1px solid var(--hairline-dark); padding-block: 36px; }
  .proof-cell:nth-child(odd) { border-right: 1px solid var(--hairline-dark); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .proof-grid { grid-template-columns: 1fr; }
  .proof-cell { border-right: none !important; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ====================================================================
   12. PLATFORM PAGE COMPONENTS (V7)
   Breadcrumb · problem block · who it serves · FAQ · in-copy link
   ==================================================================== */

/* Breadcrumb trail */
.breadcrumb {
  position: sticky; top: 72px; z-index: 40;
  background: rgba(7,10,8,0.88);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hairline-dark);
}
.breadcrumb ol {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-block: 13px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.breadcrumb a { color: var(--ink-mute); transition: color 160ms var(--ease-out); }
.breadcrumb a:hover { color: var(--hyper); }
.breadcrumb li[aria-current] { color: var(--paper); }
.breadcrumb .sep { color: var(--ink-mute); opacity: 0.5; }

/* In-copy internal link */
.inline-link {
  color: var(--hyper);
  border-bottom: 1px solid rgba(124,193,106,0.4);
  transition: border-color 160ms var(--ease-out);
}
.inline-link:hover { border-bottom-color: var(--hyper); }
.plate-light .inline-link { color: var(--signal); border-bottom-color: rgba(46,125,74,0.4); }
.plate-light .inline-link:hover { border-bottom-color: var(--signal); }

/* Problem-we-solve editorial block */
.problem-block {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.problem-block .left { position: sticky; top: 160px; }
.problem-block .eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--signal); margin-bottom: 20px; display: block;
}
.plate-dark .problem-block .eyebrow { color: var(--amber); }
.problem-block h2 { max-width: 16ch; }
.problem-block .prose {
  font-family: var(--sans); font-size: 17px; line-height: 1.75;
  max-width: 60ch;
}
.plate-light .problem-block .prose { color: var(--paper-mute); }
.plate-dark .problem-block .prose { color: var(--ink-mute); }
.problem-block .prose p + p { margin-top: 1.2em; }

/* Who it's for */
.audience {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--hairline-lite);
  border-radius: 4px;
  background: rgba(46,125,74,0.04);
}
.plate-dark .audience { border-color: var(--hairline-dark); background: rgba(124,193,106,0.04); }
.audience .lbl {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 14px; display: block;
}
.audience p { font-family: var(--serif); font-size: clamp(19px, 1.8vw, 24px); font-weight: 300; line-height: 1.4; max-width: 52ch; }

/* FAQ accordion */
.faq-list { border-top: 1px solid var(--hairline-lite); max-width: 920px; }
.plate-dark .faq-list { border-top-color: var(--hairline-dark); }
.faq-item { border-bottom: 1px solid var(--hairline-lite); }
.plate-dark .faq-item { border-bottom-color: var(--hairline-dark); }
.faq-q {
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px 0;
  font-family: var(--serif); font-size: clamp(19px, 1.9vw, 25px);
  font-weight: 400; line-height: 1.3; letter-spacing: -0.005em;
  color: inherit;
}
.faq-q .ic { flex-shrink: 0; width: 22px; height: 22px; position: relative; transition: transform 240ms var(--ease-out); }
.faq-q .ic::before, .faq-q .ic::after { content: ""; position: absolute; background: var(--signal); border-radius: 2px; }
.plate-dark .faq-q .ic::before, .plate-dark .faq-q .ic::after { background: var(--hyper); }
.faq-q .ic::before { left: 0; top: 10px; width: 22px; height: 2px; }
.faq-q .ic::after { left: 10px; top: 0; width: 2px; height: 22px; transition: transform 240ms var(--ease-out); }
.faq-item.open .faq-q .ic::after { transform: scaleY(0); }
.faq-a {
  overflow: hidden; max-height: 0;
  transition: max-height 280ms var(--ease-out);
}
.faq-a .inner {
  padding: 0 0 28px;
  font-family: var(--sans); font-size: 16px; line-height: 1.7;
  max-width: 70ch;
}
.plate-light .faq-a .inner { color: var(--paper-mute); }
.plate-dark .faq-a .inner { color: var(--ink-mute); }

@media (max-width: 960px) {
  .problem-block { grid-template-columns: 1fr; gap: 28px; }
  .problem-block .left { position: static; }
}


/* ====================================================================
   13. V7-PROMOTED SOLUTIONS COMPONENT STYLES
   Promoted from V6 solutions page so platform pages share them
   ==================================================================== */
/* Pillar section */
.pillar {
  position: relative;
  padding-block: clamp(60px, 6vw, 96px);
  border-bottom: 1px solid var(--hairline-dark);
  scroll-margin-top: 140px;
}
.pillar.plate-light { border-bottom-color: var(--hairline-lite); }

.pillar-head {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
  margin-bottom: clamp(56px, 7vw, 96px);
}
.pillar-head .left { position: sticky; top: 160px; }
.pillar-head .idx {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 20px; display: block;
}
.plate-dark .pillar-head .idx { color: var(--amber); }
.pillar-head h2 { max-width: 16ch; margin-bottom: 24px; }
.pillar-head .tagline { font-size: 16px; color: inherit; opacity: 0.7; max-width: 38ch; }
.plate-light .pillar-head .tagline { color: var(--paper-mute); opacity: 1; }
.plate-dark  .pillar-head .tagline { color: var(--ink-mute); }

.pillar-lede {
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.005em;
  max-width: 38ch;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.pillar-lede em { font-style: normal; color: var(--hyper); }

.pillar-body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  max-width: 58ch;
}
.plate-light .pillar-body { color: var(--paper-mute); }
.plate-dark .pillar-body { color: var(--ink-mute); }
.pillar-body p + p { margin-top: 1.2em; }

/* Capability list */
.capabilities {
  margin-top: clamp(56px, 6vw, 80px);
  border-top: 1px solid var(--hairline-lite);
}
.plate-dark .capabilities { border-top-color: var(--hairline-dark); }
.cap-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  padding: 32px 0;
  border-bottom: 1px solid var(--hairline-lite);
}
.plate-dark .cap-row { border-bottom-color: var(--hairline-dark); }
.cap-row .num {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 6px;
}
.cap-row h4 {
  font-family: var(--serif); font-size: clamp(22px, 2vw, 28px);
  font-weight: 400; line-height: 1.2; letter-spacing: -0.005em;
  margin-bottom: 10px;
}
.cap-row .desc {
  font-size: 16px; line-height: 1.6;
}
.plate-light .cap-row .desc { color: var(--paper-mute); }
.plate-dark .cap-row .desc { color: var(--ink-mute); }

/* Benefits row */
.benefits {
  margin-top: clamp(56px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline-lite);
  border-bottom: 1px solid var(--hairline-lite);
}
.plate-dark .benefits { border-top-color: var(--hairline-dark); border-bottom-color: var(--hairline-dark); }
.benefit-cell {
  padding: 36px 28px 32px 0;
  border-right: 1px solid var(--hairline-lite);
}
.plate-dark .benefit-cell { border-right-color: var(--hairline-dark); }
.benefit-cell:last-child { border-right: none; }
.benefit-cell:not(:first-child) { padding-left: 28px; }
.benefit-cell .b-num {
  font-family: var(--serif);
  font-size: clamp(44px, 4.5vw, 64px);
  font-weight: 400; line-height: 1;
  color: var(--signal);
  margin-bottom: 16px; letter-spacing: -0.02em;
}
.plate-dark .benefit-cell .b-num { color: var(--hyper); }
.benefit-cell .b-lbl {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.5;
}

/* Dashboard moment per pillar */
.pillar-dash-wrap {
  margin-top: clamp(72px, 9vw, 120px);
  position: relative;
}
.pillar-dash-wrap .dash-label {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 14px;
  display: block;
}
.pillar-dash-wrap .dash-title {
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin-bottom: 28px;
  max-width: 26ch;
}

.pillar-dash {
  position: relative;
  background: linear-gradient(180deg, #0c110d 0%, #080b08 100%);
  border: 1px solid var(--hairline-dark);
  border-radius: 4px;
  padding: 16px;
  box-shadow:
    0 50px 100px -40px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.03);
}
.pillar-dash .hud {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: 0.14em; text-transform: uppercase;
  border-bottom: 1px solid var(--hairline-dark);
  background: rgba(0,0,0,0.4);
  border-radius: 3px 3px 0 0;
}
.pillar-dash .hud .live {
  display: inline-flex; align-items: center; gap: 6px; color: var(--hyper);
}
.pillar-dash .hud .live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hyper);
  box-shadow: 0 0 8px rgba(124,193,106,0.7); animation: pulse 1.8s ease-in-out infinite;
}

/* Generic dash panel */
.dash-panel {
  background: #0a0f0b;
  padding: 18px;
}
.dash-panel h4 { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--paper); margin-bottom: 4px; }
.dash-panel .panel-sub {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-mute); letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 18px;
}

/* Pillar 1 — operations workflow grid */
.ops-grid { display: grid; grid-template-columns: 1.2fr 1.6fr 1fr; gap: 1px; background: var(--hairline-dark); border-radius: 0 0 3px 3px; overflow: hidden; min-height: 440px; }
.ops-list { display: flex; flex-direction: column; gap: 8px; }
.ops-item {
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hairline-dark);
  border-radius: 3px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.ops-item .ops-name { font-family: var(--sans); font-size: 12.5px; color: var(--paper); font-weight: 500; }
.ops-item .ops-id { font-family: var(--mono); font-size: 10px; color: var(--ink-mute); letter-spacing: 0.08em; }
.ops-item .ops-stat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.ops-stat.st-verified { color: var(--hyper); }
.ops-stat.st-pending  { color: var(--amber); }

/* Registry map — shared with Home style */
.reg-map-wrap { position: relative; min-height: 420px; }
.reg-map { width: 100%; height: 100%; display: block; }

/* Timeline chart (Pillar 2) */
.hyper-chart-wrap { min-height: 420px; padding: 24px; }
.hyper-chart { width: 100%; height: 280px; }
.hyper-legend { display: flex; gap: 20px; margin-top: 20px; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.hyper-legend span { display: inline-flex; align-items: center; gap: 8px; }
.hyper-legend span::before { content: ""; width: 10px; height: 2px; background: currentColor; }
.hl-health { color: var(--hyper); }
.hl-growth { color: var(--amber); }
.hl-yield  { color: var(--cyan); }

.hyper-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline-dark);
}
.hyper-stat { display: flex; flex-direction: column; gap: 4px; }
.hyper-stat .v { font-family: var(--mono); font-size: 20px; color: var(--paper); font-weight: 500; }
.hyper-stat .l { font-family: var(--mono); font-size: 10px; color: var(--ink-mute); letter-spacing: 0.12em; text-transform: uppercase; }

/* Traceability chain (Pillar 3) */
.chain-wrap { padding: 24px; min-height: 420px; display: flex; flex-direction: column; gap: 20px; }
.chain-svg { width: 100%; height: 220px; }
.chain-details { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.chain-card {
  padding: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hairline-dark);
  border-radius: 3px;
  display: flex; flex-direction: column; gap: 4px;
}
.chain-card .code { font-family: var(--mono); font-size: 10px; color: var(--ink-mute); letter-spacing: 0.12em; text-transform: uppercase; }
.chain-card .lbl { font-family: var(--sans); font-size: 13px; color: var(--paper); font-weight: 500; }
.chain-card .meta { font-family: var(--mono); font-size: 10px; color: var(--hyper); letter-spacing: 0.08em; }

/* SOC map (Pillar 4) */
.soc-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1px; background: var(--hairline-dark); border-radius: 0 0 3px 3px; overflow: hidden; min-height: 440px; }
.soc-map { min-height: 420px; padding: 0; position: relative; overflow: hidden; }
.soc-map svg { width: 100%; height: 100%; display: block; }
.soc-metrics { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.soc-metric {
  padding: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hairline-dark);
  border-radius: 3px;
}
.soc-metric .lbl {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-mute); letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 6px;
}
.soc-metric .val { font-family: var(--mono); font-size: 22px; color: var(--paper); font-weight: 500; }
.soc-metric .val.green { color: var(--hyper); }
.soc-metric .delta { font-family: var(--mono); font-size: 10px; color: var(--hyper); letter-spacing: 0.1em; margin-top: 4px; }

/* Closing CTA */
.sol-cta {
  padding-block: clamp(72px, 8.4vw, 120px);
  background:
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(46,125,74,0.12) 0%, transparent 60%),
    var(--ink);
}
.sol-cta .mono-lbl { color: var(--amber); margin-bottom: 32px; display: block; }
.sol-cta h2 { max-width: 22ch; margin-bottom: 44px; }

/* Responsive */
@media (max-width: 960px) {
  .pillar-head { grid-template-columns: 1fr; gap: 24px; }
  .pillar-head .left { position: static; }
  .ops-grid, .soc-grid { grid-template-columns: 1fr; }
  .chain-details { grid-template-columns: 1fr 1fr; }
  .benefits { grid-template-columns: 1fr; }
  .benefit-cell { border-right: none; border-bottom: 1px solid var(--hairline-lite); padding-inline: 0 !important; padding-block: 24px; }
  .plate-dark .benefit-cell { border-bottom-color: var(--hairline-dark); }
  .hyper-stats { grid-template-columns: 1fr 1fr; }
  .pillar-nav-inner { justify-content: flex-start; }
  .cap-row { grid-template-columns: 1fr; gap: 10px; }
  .cap-row .num { padding-top: 0; }
}

/* ---------- How It Works (moved from Home) ---------- */
.how-intro { margin-bottom: clamp(56px, 7vw, 88px); max-width: 820px; }
.how-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--hairline-lite);
  border-bottom: 1px solid var(--hairline-lite);
}
.how-step {
  padding: 56px 28px 48px 0;
  border-right: 1px solid var(--hairline-lite);
  position: relative;
}
.how-step:last-child { border-right: none; }
.how-step:not(:first-child) { padding-left: 28px; }
.how-step .num {
  font-family: var(--serif);
  font-size: clamp(40px, 4.4vw, 66px);
  font-weight: 400;
  line-height: 0.9;
  color: var(--signal);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}
.how-step h4 { font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); font-weight: 400; line-height: 1.15; margin-bottom: 16px; letter-spacing: -0.005em; }
.how-step p { color: var(--paper-mute); font-size: 15px; line-height: 1.6; margin-bottom: 24px; }
.how-step .foot {
  font-family: var(--mono); font-size: 11px;
  color: var(--signal);
  letter-spacing: 0.14em; text-transform: uppercase;
  padding-top: 16px;
  border-top: 2px solid var(--signal);
  display: inline-block;
}
@media (max-width: 980px) {
  .how-grid { grid-template-columns: 1fr 1fr; }
  .how-step { padding-inline: 16px !important; border-right: none !important; border-bottom: 1px solid var(--hairline-lite); }
}
@media (max-width: 600px) {
  .how-grid { grid-template-columns: 1fr; }
}