/* ============================================================
   Alpheios landing — section styles
   Section archetypes are inherited from the scraped scaffold and
   re-skinned for Alpheios content. Display face = Geist; depth via
   lightness; steel-blue accent on the whitelist only.
   ============================================================ */

.section-pad { padding: 12% 5%; }
.lead { /* shared big editorial lead text */ }
/* forces the wrapped clause onto its own line, so a break lands
   on the phrase boundary instead of wherever the text happens to wrap */
.line-break { display: block; }
/* forced line break that only exists on phones */
.m-br { display: none; }
@media (max-width: 768px) { .m-br { display: inline; } }


/* ============================================================
   HERO
   ============================================================ */
header.header { position: relative; z-index: 5; overflow: hidden; height: 100vh; }

/* ambient hero background — pure gradient + a single steel glow, no image */
.hero-fallback {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(70% 55% at 68% 32%, rgba(78,155,222,0.14), transparent 62%),
    linear-gradient(180deg, #0B0D11 0%, #06070A 100%);
}

/* the operating layer — a calm plane of data points (js/hero-field.js,
   three.js, one draw call). Sits between the gradient floor (z0) and the
   cursor vignette (z2), so the mouse-light literally sweeps the field.
   Without WebGL the div stays empty and the gradient carries the hero. */
.hero-field {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 1s ease; /* quick: the boot sweep is the real entrance */
}
.hero-field.is-live { opacity: 1; }
.hero-field canvas { display: block; width: 100%; height: 100%; }

.mouse-light {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; transition: 5.5s ease; z-index: 2;
}

.header-content-container {
  position: absolute; bottom: 6%; left: 5%; width: 90%; z-index: 10;
}
.header-text-container {
  display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end;
}
.header-title h1 {
  font-family: var(--font-quaternary);
  font-size: clamp(2.6rem, 6.2vw, 6rem);
  letter-spacing: -0.03em; line-height: 0.96em; font-weight: 300;
  color: var(--text-color-light);
}
.header-title .dim   { opacity: 0.4; }
.header-title .light { opacity: 1; }
.header-title .accent { color: var(--accent); opacity: 1; }

.scroll-downer { padding-bottom: 8px; white-space: nowrap; }
.scroll-downer p {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-dim);
}

.header-line {
  position: relative; opacity: 0.3; width: 0%;
  background-color: var(--text-color-light); height: 1px; margin-top: 30px;
  /* follows the hero field's boot sweep: same 4s window, no delay, and its
     easeInOutSine curve — the layer leads, the line answers */
  transition: width 4s cubic-bezier(0.37, 0, 0.63, 1); transition-delay: 0s;
}
.header-line.loaded { width: 100%; }

.fast-container { margin-top: 7%; }
.fast-buttons { display: flex; flex-direction: row; gap: 44px; align-items: center; flex-wrap: wrap; }
.fast-buttons a {
  color: var(--text-color-light); font-family: var(--font-primary);
  font-size: 1.25em; font-weight: 200; letter-spacing: 0.01em; transition: .3s;
  border-bottom: 1px solid transparent; padding-bottom: 3px;
}
.fast-buttons a:hover { border-bottom-color: var(--accent-line); }

@media (max-width: 768px) {
  .header-title h1 { line-height: 1.06em; }
  .header-text-container { flex-direction: column; align-items: flex-start; gap: 20px; }
  .fast-buttons { gap: 22px; }
  .fast-buttons a { font-size: 1.05em; }
}


/* ============================================================
   POSITIONING (manifesto)
   ============================================================ */
.positioning {
  position: relative; z-index: 10; background-color: var(--bg-0);
  padding: 14% 5% 12%;
}
/* the manifesto block lives inside the Research pillar */
.positioning.research { background-color: var(--bg-1); padding-bottom: 9%; }
.positioning .eyebrow { margin-bottom: 40px; }
.positioning .lede h2 {
  font-family: var(--font-quaternary);
  font-size: clamp(1.9rem, 3.6vw, 3.4rem);
  letter-spacing: -0.035em; line-height: 1.02em; font-weight: 300;
  color: var(--text-color-light);
}
/* no text-wrap:balance here — these headings are split into inline-block spans by
   SplitType, and balance on split text mis-wraps in WebKit (letters onto their own line) */
.positioning .reveal-type { display: block; }
.positioning .sub {
  font-family: var(--font-quaternary);
  font-size: clamp(1.05rem, 1.5vw, 1.5rem); line-height: 1.35em; font-weight: 200;
  letter-spacing: -0.02em; color: var(--text-dim);
  max-width: 760px; margin-top: 34px;
}
.positioning .sub b { color: var(--text-color-light); font-weight: 400; }

/* honest "what we never output" / "what we give" ledger */
.ledger {
  margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid var(--hairline);
}
.ledger .col { padding: 30px 36px; }
.ledger .col + .col { border-left: 1px solid var(--hairline); }
.ledger .col h4 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 20px;
}
.ledger .col.give h4 { color: var(--accent); }
.ledger .col.never h4 { color: var(--text-faint); }
.ledger .col ul li {
  font-family: var(--font-quaternary); font-size: 1.05rem; font-weight: 200;
  letter-spacing: -0.01em; line-height: 1.5; padding: 9px 0;
  display: flex; gap: 12px; align-items: baseline;
}
.ledger .col.never ul li { color: var(--text-faint); text-decoration: line-through; text-decoration-color: rgba(240,84,92,0.5); }
.ledger .col .tick { color: var(--accent); font-family: var(--font-mono); font-size: 13px; }
@media (max-width: 768px) {
  .ledger { grid-template-columns: 1fr; }
  .ledger .col + .col { border-left: none; border-top: 1px solid var(--hairline); }
}


/* ============================================================
   MODES (four products)
   ============================================================ */
.modes { position: relative; z-index: 10; background-color: var(--bg-2); padding: 10% 5% 12%; }
.modes .section-head {
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px;
  margin-bottom: 64px;
}
.modes .section-head h2 {
  font-family: var(--font-quaternary); font-size: clamp(1.8rem, 3.4vw, 3.2rem);
  letter-spacing: -0.035em; line-height: 1.0em; font-weight: 300; color: var(--text-color-light);
  max-width: 16ch; text-wrap: balance;
}
.modes .section-head p {
  font-family: var(--font-quaternary); font-weight: 200; color: var(--text-dim);
  font-size: 1.05rem; max-width: 38ch; line-height: 1.45;
}

.modes-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hairline); }
.mode-col {
  padding: 36px 30px 40px; border-left: 1px solid var(--hairline);
  display: flex; flex-direction: column; min-height: 380px;
  transition: background .4s ease;
}
.mode-col:first-child { border-left: none; }
.mode-col:hover { background: rgba(255,254,234,0.018); }
.mode-col .mode-idx { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: 0.08em; }
.mode-col h3 {
  font-family: var(--font-quaternary); font-size: 1.55rem; font-weight: 300;
  letter-spacing: -0.02em; color: var(--text-color-light); margin-top: 18px; line-height: 1.05;
}
.mode-col .mode-when {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-faint);
  margin-top: 10px; text-transform: uppercase;
}
.mode-col .mode-desc {
  font-family: var(--font-quaternary); font-size: 0.98rem; font-weight: 200; line-height: 1.55;
  color: var(--text-dim); margin-top: 20px;
}
@media (max-width: 1024px) { .modes-grid { grid-template-columns: 1fr 1fr; }
  .mode-col:nth-child(3) { border-left: none; }
  .mode-col:nth-child(odd) { border-left: none; }
  .mode-col:nth-child(n+3) { border-top: 1px solid var(--hairline); }
}
@media (max-width: 600px) { .modes-grid { grid-template-columns: 1fr; }
  .mode-col { border-left: none; border-top: 1px solid var(--hairline); min-height: 0; }
  .mode-col:first-child { border-top: none; }
}


/* ============================================================
   CIO'S DAY (hover-reveal rows)
   ============================================================ */
.cioday { position: relative; z-index: 5; background-color: var(--bg-2); padding: 12% 5%; }
.cioday .section-head { text-align: center; margin-bottom: 70px; }
.cioday .section-head h2 {
  font-family: var(--font-quaternary); font-size: clamp(1.8rem, 3.2vw, 3rem);
  letter-spacing: -0.035em; font-weight: 300; color: var(--text-color-light);
}
.cioday .section-head p {
  font-family: var(--font-quaternary); font-weight: 200; color: var(--text-dim);
  margin-top: 16px; font-size: 1.05rem;
}
.day-list { max-width: 1100px; margin: 0 auto; border-top: 1px solid var(--hairline); }
.day-row {
  display: grid; grid-template-columns: 160px 1fr auto;
  gap: 30px; align-items: start;
  padding: 34px 8px; border-bottom: 1px solid var(--hairline);
  cursor: pointer; transition: background .4s ease;
}
.day-row:hover { background: rgba(255,254,234,0.02); }
.day-row .day-time {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--accent);
  padding-top: 4px;
}
.day-row .day-body h3 {
  font-family: var(--font-quaternary); font-size: 1.55rem; font-weight: 300;
  letter-spacing: -0.02em; color: var(--text-color-light); line-height: 1.1;
}
.day-row .day-detail {
  font-family: var(--font-quaternary); font-size: 1rem; font-weight: 200; line-height: 1.55;
  color: var(--text-dim); max-width: 60ch;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: all 0.5s cubic-bezier(0.16,1,0.3,1); margin-top: 0;
}
.day-row:hover .day-detail { max-height: 140px; opacity: 1; margin-top: 16px; }
.day-row .day-mode {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-faint); padding-top: 6px; text-align: right; white-space: nowrap;
}
.day-row:hover .day-mode { color: var(--accent); }
@media (max-width: 768px) {
  .day-row { grid-template-columns: 1fr; gap: 10px; }
  .day-row .day-mode { text-align: left; }
  .day-row .day-detail { max-height: none; opacity: 1; margin-top: 12px; } /* always open on mobile */
}


/* ============================================================
   GLASS BOX (pipeline + word cycle + distortion artifact)
   ============================================================ */
.glassbox { position: relative; z-index: 10; background-color: var(--bg-0); padding: 13% 5%; }
.glassbox .content-container {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 8%; align-items: center;
}
.glassbox .gb-title h2 {
  font-family: var(--font-quaternary); font-size: clamp(1.9rem, 3.4vw, 3.2rem);
  letter-spacing: -0.035em; line-height: 0.98em; font-weight: 300; color: var(--text-color-light); opacity: 0.95;
}
.glassbox .title-sub { display: flex; gap: 14px; align-items: baseline; }
.gb-words { font-size: clamp(1.9rem, 3.4vw, 3.2rem); height: 1.2em; overflow: hidden; }
.gb-words ul {
  margin: 0; padding: 0;
  animation: gbCycle 12s cubic-bezier(0.16, 1, 0.3, 1) infinite; animation-delay: 1.5s;
}
.gb-words li {
  font-family: var(--font-quaternary); font-size: clamp(1.9rem, 3.4vw, 3.2rem);
  letter-spacing: -0.035em; line-height: 1.2em; font-weight: 300; color: var(--accent); height: 1.2em;
}
@keyframes gbCycle {
  0%, 28%   { transform: translateY(0); }
  33%, 61%  { transform: translateY(-1.2em); }
  66%, 94%  { transform: translateY(-2.4em); }
  100%      { transform: translateY(0); }
}
.glassbox .gb-body p {
  font-family: var(--font-quaternary); font-size: clamp(1.02rem, 1.4vw, 1.35rem);
  line-height: 1.5; font-weight: 200; letter-spacing: -0.015em; color: var(--text-dim);
  margin-top: 28px; max-width: 52ch;
}
.glassbox .gb-body p b { color: var(--text-color-light); font-weight: 400; }

.gb-steps { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--hairline); }
.gb-step { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.gb-step .n { font-family: var(--font-mono); font-size: 12px; color: var(--accent); padding-top: 2px; }
.gb-step .t { font-family: var(--font-quaternary); font-weight: 200; color: var(--text-dim); font-size: 1.02rem; line-height: 1.4; }
.gb-step .t b { color: var(--text-color-light); font-weight: 400; }

@media (max-width: 900px) {
  .glassbox .content-container { grid-template-columns: 1fr; gap: 48px; }
}


/* ============================================================
   DELIVERABLE (Evidence Assessment + formats)
   ============================================================ */
.deliverable { position: relative; z-index: 10; background-color: var(--bg-1); padding: 12% 5%; }
.deliverable .section-head { margin-bottom: 56px; }
.deliverable .section-head .eyebrow { margin-bottom: 26px; }
.deliverable .section-head h2 {
  font-family: var(--font-quaternary); font-size: clamp(1.8rem, 3.2vw, 3rem);
  letter-spacing: -0.035em; font-weight: 300; color: var(--text-color-light); max-width: 22ch; text-wrap: balance;
}
.deliverable .deliv-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; }

/* Evidence Assessment signature card */
.ea-card {
  background: var(--bg-0); border: 1px solid var(--hairline-strong); border-radius: 3px;
  padding: 30px 32px;
}
.ea-card .ea-head {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-dim); padding-bottom: 22px; border-bottom: 1px solid var(--hairline); margin-bottom: 24px;
  display: flex; align-items: center; gap: 10px;
}
.ea-card .ea-head::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ea-row { margin-bottom: 26px; }
.ea-row .ea-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 12px;
}
.ea-row .ea-value {
  font-family: var(--font-quaternary); font-size: 1.35rem; font-weight: 300; color: var(--text-color-light);
}
/* direction spectrum track */
.ea-track { position: relative; height: 2px; background: var(--hairline-strong); margin: 18px 0 10px; border-radius: 2px; }
.ea-track .ea-marker {
  position: absolute; top: 50%; left: 68%; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(78,155,222,0.18);
}
.ea-track-labels { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--text-faint); text-transform: uppercase; }
.ea-coh { display: flex; align-items: center; gap: 12px; }
.ea-bars { display: inline-flex; gap: 4px; }
.ea-bars i { width: 16px; height: 8px; background: var(--hairline-strong); display: inline-block; }
.ea-bars i.on { background: var(--accent); }
.ea-cond {
  margin-top: 8px; padding: 16px 18px; border: 1px solid var(--hairline);
  background: var(--accent-soft); border-radius: 2px;
}
.ea-cond .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.ea-cond p { font-family: var(--font-quaternary); font-size: 0.98rem; font-weight: 200; color: var(--text-dim); line-height: 1.5; }
.ea-foot { margin-top: 22px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--text-faint); }

/* formats side */
.deliv-formats h3 {
  font-family: var(--font-quaternary); font-size: 1.5rem; font-weight: 300; letter-spacing: -0.02em;
  color: var(--text-color-light); margin-bottom: 8px;
}
.deliv-formats > p {
  font-family: var(--font-quaternary); font-weight: 200; color: var(--text-dim); line-height: 1.55;
  font-size: 1.02rem; max-width: 44ch; margin-bottom: 30px;
}
.format-list { border-top: 1px solid var(--hairline); }
.format-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 4px; border-bottom: 1px solid var(--hairline);
}
.format-row .fmt-name { display: flex; align-items: baseline; gap: 14px; flex-shrink: 0; white-space: nowrap; }
.format-row .fmt-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--accent);
  border: 1px solid var(--accent-line); padding: 3px 8px; border-radius: 2px;
  /* PDF / PPTX / XLSX tags share one width so the titles line up */
  box-sizing: border-box; min-width: 52px; text-align: center;
}
.format-row .fmt-title { font-family: var(--font-quaternary); font-weight: 300; color: var(--text-color-light); font-size: 1.05rem; }
@media (max-width: 900px) {
  .deliverable .deliv-grid { grid-template-columns: 1fr; gap: 44px; }
}


/* ============================================================
   CTA / CONTACT
   ============================================================ */
.cta { position: relative; z-index: 5; overflow: hidden; padding: 13% 5% 12%; background: var(--bg-0); }
.cta .cta-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(78,155,222,0.16), transparent 70%),
    linear-gradient(180deg, #0B0D11 0%, #06070A 100%);
}
.cta .cta-inner { position: relative; z-index: 2; }
.cta .cta-title h2 {
  font-family: var(--font-quaternary); font-size: clamp(2.2rem, 5vw, 4.4rem);
  letter-spacing: -0.04em; line-height: 0.98em; font-weight: 300; color: var(--text-color-light);
}
.cta .cta-title h2 .dim { opacity: 0.4; }
.cta .cta-sub {
  font-family: var(--font-quaternary); font-weight: 200; color: var(--text-dim);
  font-size: 1.15rem; line-height: 1.5; max-width: 52ch; margin-top: 30px;
}
.cta .cta-buttons { display: flex; gap: 16px; margin-top: 44px; flex-wrap: wrap; }
.cta .cta-meta {
  margin-top: 56px; display: flex; gap: 54px; flex-wrap: wrap;
  padding-top: 30px; border-top: 1px solid var(--hairline);
}
.cta .cta-meta .meta-item h4 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 10px;
}
.cta .cta-meta .meta-item a, .cta .cta-meta .meta-item p {
  font-family: var(--font-quaternary); font-weight: 300; font-size: 1.05rem; color: var(--text-color-light);
  transition: color .3s ease;
}
.cta .cta-meta .meta-item a:hover { color: var(--accent); }
.cta .cta-traction {
  margin-top: 26px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em;
  color: var(--text-dim); display: inline-flex; align-items: center; gap: 10px;
}
.cta .cta-traction::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(78,155,222,0.16); }


/* ============================================================
   HERO SUB (throughput hook)
   ============================================================ */
.header-sub {
  font-family: var(--font-quaternary); font-weight: 200;
  font-size: clamp(0.98rem, 1.5vw, 1.35rem); line-height: 1.4; letter-spacing: -0.015em;
  color: var(--text-dim); max-width: 56ch; margin-top: 22px;
}
.header-sub b { color: var(--text-color-light); font-weight: 400; }


/* ============================================================
   PRODUCT GLIMPSE (first look — hero-adjacent demo loop)
   ============================================================ */
.glimpse { position: relative; z-index: 10; background-color: var(--bg-0); padding: 8% 5% 10%; }
.glimpse .glimpse-head .eyebrow { margin-bottom: 22px; }
.glimpse .glimpse-head h2 {
  font-family: var(--font-quaternary); font-size: clamp(1.8rem, 3.2vw, 3rem);
  letter-spacing: -0.035em; line-height: 1.02em; font-weight: 300;
  color: var(--text-color-light); max-width: 20ch; text-wrap: balance;
}


/* ============================================================
   PROBLEM + STAT BAND
   ============================================================ */
.problem { position: relative; z-index: 10; background-color: var(--bg-0); padding: 13% 5% 11%; }
.problem .eyebrow { margin-bottom: 40px; }
.problem .prob-lede h2 {
  font-family: var(--font-quaternary); font-size: clamp(1.8rem, 3.4vw, 3.1rem);
  letter-spacing: -0.035em; line-height: 1.04em; font-weight: 300; color: var(--text-color-light);
  max-width: 22ch; text-wrap: balance;
}
.problem .prob-lede h2 .accent { color: var(--accent); }
.problem .prob-body {
  font-family: var(--font-quaternary); font-size: clamp(1.02rem, 1.5vw, 1.4rem); line-height: 1.45;
  font-weight: 200; letter-spacing: -0.02em; color: var(--text-dim); max-width: 64ch; margin-top: 28px;
}
.problem .prob-body b { color: var(--text-color-light); font-weight: 400; }

.stat-band {
  margin-top: 70px; display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
}
.stat-band.stat-3 { grid-template-columns: repeat(3, 1fr); }
.stat { padding: 34px 28px 30px; border-left: 1px solid var(--hairline); }
.stat:first-child { border-left: none; }
.stat .stat-num {
  font-family: var(--font-quaternary); font-weight: 300; letter-spacing: -0.03em;
  font-size: clamp(2.7rem, 4.6vw, 4.1rem); line-height: 1; color: var(--text-color-light);
}
.stat .stat-num .accent { color: var(--accent); }
.stat .stat-num.stat-num-range { font-size: clamp(2.2rem, 3.6vw, 3.3rem); white-space: nowrap; }
.stat .stat-label {
  font-family: var(--font-quaternary); font-weight: 200; font-size: 1.12rem; line-height: 1.45;
  color: var(--text-dim); margin-top: 20px; max-width: 28ch;
}
.stat .stat-label b { display: block; color: var(--text-color-light); font-weight: 400; }
.stat .stat-src {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--text-faint);
  margin-top: 14px;
}
@media (max-width: 900px) {
  .stat-band, .stat-band.stat-3 { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: none; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--hairline); }
}
@media (max-width: 540px) {
  .stat-band, .stat-band.stat-3 { grid-template-columns: 1fr; }
  .stat { border-left: none; border-top: 1px solid var(--hairline); }
  .stat:first-child { border-top: none; }
}


/* ============================================================
   TWO PILLARS overview
   ============================================================ */
.pillars { position: relative; z-index: 10; background-color: var(--bg-1); padding: 12% 5%; }
.pillars .section-head { margin-bottom: 56px; }
.pillars .section-head .eyebrow { margin-bottom: 26px; }
.pillars .section-head h2 {
  font-family: var(--font-quaternary); font-size: clamp(1.8rem, 3.2vw, 3rem);
  letter-spacing: -0.035em; font-weight: 300; color: var(--text-color-light); max-width: 24ch; text-wrap: balance;
}
.pillars-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pillar-card {
  background: var(--bg-0); border: 1px solid var(--hairline-strong); border-radius: 3px;
  padding: 40px 38px; display: flex; flex-direction: column; min-height: 320px;
  transition: border-color .4s ease;
}
.pillar-card:hover { border-color: var(--accent-line); }
.pillar-card .pc-idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.pillar-card h3 {
  font-family: var(--font-quaternary); font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 300;
  letter-spacing: -0.025em; color: var(--text-color-light); margin-top: 16px; line-height: 1.04;
}
.pillar-card .pc-desc {
  font-family: var(--font-quaternary); font-weight: 200; font-size: 1.05rem; line-height: 1.5;
  color: var(--text-dim); margin-top: 18px; max-width: 40ch;
}
.pillar-card .pc-chips { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.pillar-card .pc-chips span {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--text-dim);
  border: 1px solid var(--hairline); padding: 6px 11px; border-radius: 2px;
}
.pillar-card .pc-link {
  margin-top: auto; padding-top: 26px; font-family: var(--font-quaternary); font-weight: 300;
  font-size: 1rem; color: var(--text-color-light); display: inline-flex; align-items: center; gap: 8px;
  transition: gap .3s ease, color .3s ease;
}
.pillar-card .pc-link:hover { gap: 14px; color: var(--accent); }
@media (max-width: 760px) { .pillars-grid { grid-template-columns: 1fr; } .pillar-card { min-height: 0; } }


/* ============================================================
   OPERATIONS (flow)
   ============================================================ */
.operations { position: relative; z-index: 10; background-color: var(--bg-0); padding: 12% 5%; }
.operations .section-head {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 60px;
  /* align the note's baseline with the h2's last line ("automatically.");
     flex-end is the fallback where last-baseline isn't supported */
  align-items: flex-end;
  align-items: last baseline;
}
.operations .section-head .eyebrow { margin-bottom: 22px; }
.operations .section-head h2 {
  font-family: var(--font-quaternary); font-size: clamp(1.8rem, 3.2vw, 3rem);
  letter-spacing: -0.035em; font-weight: 300; color: var(--text-color-light); max-width: 20ch; text-wrap: balance;
}
.operations .section-head .op-claim {
  font-family: var(--font-quaternary); display: flex; flex-direction: column;
  align-items: flex-end; gap: 16px; text-align: right; max-width: none;
}
.op-claim .oc-row {
  display: inline-flex; align-items: baseline; gap: 0.42em;
  font-weight: 300; letter-spacing: -0.03em; line-height: 1;
  font-size: clamp(1.9rem, 2.7vw, 2.7rem);
  /* nudge the words down toward their rule without moving the rule itself */
  transform: translateY(20%);
}
.op-claim .oc-from { color: var(--text-color-light); }
.op-claim .oc-arrow { color: var(--text-dim); font-size: 0.72em; align-self: center; }
.op-claim .oc-to { color: var(--text-dim); transform-origin: center; }
/* a rule under the whole claim that compresses into the underline of
   "minutes" — length is the only axis that moves. 2px, no radius: the
   same line grammar as the EA track and the link underlines. The final
   width is measured from the word itself (--oc-to-w, set in main.js). */
.op-claim .oc-bar-slot { width: 100%; height: 2px; display: flex; justify-content: flex-end; }
.op-claim .oc-bar { height: 2px; width: 100%; background: var(--text-faint); }
.op-claim .oc-note { font-weight: 300; font-size: 0.95rem; color: rgba(255, 254, 234, 0.72); }

/* Days → minutes reveal (compression) */
@keyframes oc-from-anim { from { color: var(--text-color-light); } to { color: var(--text-dim); } }
@keyframes oc-arrow-anim { 0% { opacity: 0; transform: translateX(-10px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes oc-to-anim { from { color: var(--text-dim); } to { color: var(--accent); } }
@keyframes oc-bar-anim {
  from { width: 100%; background: var(--text-faint); }
  to   { width: var(--oc-to-w, 96px); background: var(--accent); }
}
/* one calm gesture on the site's sine curve: the rule contracts rightward
   and "minutes" lights as the line arrives beneath it — no pop, no bounce */
.op-claim.is-on .oc-from  { animation: oc-from-anim  .9s ease forwards; }
.op-claim.is-on .oc-arrow { animation: oc-arrow-anim .7s cubic-bezier(0.37, 0, 0.63, 1) .15s both; }
.op-claim.is-on .oc-to    { animation: oc-to-anim   .6s ease 1.4s both; }
.op-claim.is-on .oc-bar   { animation: oc-bar-anim 1.8s cubic-bezier(0.37, 0, 0.63, 1) .1s both; }

@media (prefers-reduced-motion: reduce) {
  .op-claim.is-on .oc-from, .op-claim.is-on .oc-arrow,
  .op-claim.is-on .oc-to, .op-claim.is-on .oc-bar { animation: none; }
  .op-claim.is-on .oc-from { color: var(--text-dim); }
  .op-claim.is-on .oc-to { color: var(--accent); }
  .op-claim.is-on .oc-bar { width: var(--oc-to-w, 96px); background: var(--accent); }
}

@media (max-width: 900px) {
  /* must out-rank the base .operations .section-head .op-claim rule */
  .operations .section-head .op-claim { align-items: flex-start; text-align: left; }
}

.op-flow { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hairline); }
.op-step { padding: 32px 26px 36px; border-left: 1px solid var(--hairline); position: relative; }
.op-step:first-child { border-left: none; }
.op-step .op-n { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: 0.06em; }
.op-step h4 {
  font-family: var(--font-quaternary); font-size: 1.2rem; font-weight: 300; letter-spacing: -0.02em;
  color: var(--text-color-light); margin-top: 16px; line-height: 1.1;
}
.op-step p {
  font-family: var(--font-quaternary); font-weight: 200; font-size: 0.96rem; line-height: 1.5;
  color: var(--text-dim); margin-top: 14px;
}
@media (max-width: 900px) {
  .op-flow { grid-template-columns: 1fr 1fr; }
  .op-step:nth-child(3) { border-left: none; }
  .op-step:nth-child(n+3) { border-top: 1px solid var(--hairline); }
}
@media (max-width: 540px) {
  .op-flow { grid-template-columns: 1fr; }
  .op-step { border-left: none; border-top: 1px solid var(--hairline); }
  .op-step:first-child { border-top: none; }
}


/* ============================================================
   MEDIA FRAME (product demo — video / image drop-in)
   A hairline-bordered panel that keeps the dark, noise-lit palette.
   Drop a muted+loop <video> or an <img> in place of .media-ph.
   Any media inherits an inset vignette so it melts into the floor.
   ============================================================ */
.media-block { margin-top: 64px; }
.media-block--tight { margin-top: 44px; }

.media-frame {
  position: relative; overflow: hidden;
  border: 1px solid var(--hairline-strong); border-radius: 3px;
  background: var(--bg-1);
}
.media-frame > video,
.media-frame > img {
  display: block; width: 100%; height: auto;
}
/* inset vignette so any media reads as part of the black floor, not a sticker */
.media-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 90px 12px rgba(6, 7, 10, 0.6);
}

/* placeholder shown before the real asset is dropped in */
.media-ph {
  aspect-ratio: 16 / 9;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  text-align: center; padding: 24px;
  background:
    radial-gradient(58% 58% at 50% 44%, rgba(78, 155, 222, 0.06), transparent 70%),
    var(--bg-1);
}
.media-ph .mf-play {
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 14px; padding-left: 3px;
}
.media-ph .mf-note {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; line-height: 1.9;
  text-transform: uppercase; color: var(--text-faint);
}

/* mono caption row, sibling below the frame */
.mf-cap {
  margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 4px 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-faint);
}
.mf-cap .mf-cap-lead { color: var(--text-dim); }

/* soften the inset vignette on small frames so real video isn't muddied */
@media (max-width: 768px) {
  .media-block { margin-top: 44px; }
  .media-frame::after { box-shadow: inset 0 0 46px 6px rgba(6, 7, 10, 0.5); }
}