/* ============================================================
   CeoCrew v3 - section diagram styles.
   Abstract data-flow graphics: hairline strokes, gold flows,
   dept-color agent dots, mono labels. No product UI.
   ============================================================ */

/* shared agent dot (small, with label) */
.adot {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.adot .d {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 11px;
  color: color-mix(in oklab, var(--c) 92%, white);
  background: radial-gradient(circle at 30% 26%, color-mix(in oklab, var(--c) 32%, #222), color-mix(in oklab, var(--c) 10%, #1c1c1c));
  border: 1.2px solid color-mix(in oklab, var(--c) 55%, transparent);
  flex: none;
}
.adot .t { font-size: 13px; font-weight: 500; color: var(--text-2); white-space: nowrap; }

/* flowing dashed wire */
.wire {
  stroke: var(--hairline-2);
  stroke-width: 1.2;
  fill: none;
}
.wire.flow {
  stroke: var(--gold-dim);
  stroke-dasharray: 4 8;
  animation: wflow 1.6s linear infinite;
}
@keyframes wflow { to { stroke-dashoffset: -24; } }

/* ============================================================
   TRUST STRIP - dual-direction full-colour marquee
   ============================================================ */
.trust {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg-2);
  padding: 84px 0 64px;
}
.trust .display { margin-bottom: 10px; }
.trust .mlabel { margin-bottom: 12px; display: block; }
.marquee-zone {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.mq-row { overflow: hidden; }
.mq-track {
  display: flex;
  width: max-content;
  animation: mqLeft 46s linear infinite;
}
.mq-row.rev .mq-track { animation: mqRight 52s linear infinite; }
.mq-row:hover .mq-track { animation-play-state: paused; }
@keyframes mqLeft { to { transform: translateX(-50%); } }
@keyframes mqRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.mq-set { display: flex; align-items: center; }
.mq-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 13px;
  padding: 14px 24px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, #222221, var(--bg-2));
  color: var(--text-2);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.mq-chip:hover {
  border-color: var(--hairline-2);
  color: var(--text);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.mq-chip svg { width: 22px; height: 22px; flex: none; }

/* ============================================================
   SHARED FILESYSTEM - flow diagram
   ============================================================ */
.fsd {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 72px auto 0;
  height: 420px;
}
.fsd svg.fsd-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.fsd-folder {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 2;
}
/* folder: dimensional glass stack */
.fsd-folder .glyph {
  width: 132px;
  height: 104px;
  position: relative;
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 34px rgba(212, 194, 128, 0.16));
  animation: folderFloat 6s ease-in-out infinite;
}
.fsd-folder .glyph::before,
.fsd-folder .glyph::after {
  content: "";
  position: absolute;
  inset: 6px -10px -8px 10px;
  border-radius: 14px;
  background: rgba(212, 194, 128, 0.05);
  border: 1px solid rgba(212, 194, 128, 0.16);
  z-index: -1;
  transform: rotate(2.6deg);
}
.fsd-folder .glyph::after {
  inset: 10px 12px -12px -10px;
  transform: rotate(-2.4deg);
  background: rgba(212, 194, 128, 0.03);
}
@keyframes folderFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.fsd-folder .glyph svg { width: 100%; height: 100%; }
.fsd-folder .cap { text-align: center; }
.fsd-folder .cap .p {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--gold);
}
.fsd-folder .cap .s {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 4px;
}
/* agent chips: glass pills with glow on active */
.fsd .adot {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: rgba(31, 31, 31, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  padding: 7px 16px 7px 8px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.fsd .adot.lit {
  border-color: color-mix(in oklab, var(--c) 65%, transparent);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), 0 0 22px color-mix(in oklab, var(--c) 30%, transparent);
}
.fsd .adot.right { flex-direction: row-reverse; padding: 7px 8px 7px 16px; }
.fsd .adot.right .t { text-align: right; }
.fsd .adot .d svg { width: 16px; height: 16px; }

/* CEO sender node — vertical, gold */
.fsd .adot.ceo {
  flex-direction: column;
  gap: 7px;
  padding: 11px 16px 13px;
  border-radius: 16px;
}
.fsd .adot.ceo .d { width: 38px; height: 38px; color: var(--gold); }
.fsd .adot.ceo .d svg { width: 20px; height: 20px; }
.fsd .adot.ceo .t { text-align: center; }
.fsd .adot.ceo .t b { color: var(--gold); font-weight: 600; }

/* folder reacts to an incoming write from the CEO */
.fsd-folder .glyph { transition: filter 0.3s; }
.fsd-folder.pulse .glyph {
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 46px rgba(212, 194, 128, 0.5));
}
.fsd-folder.pulse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 36%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  animation: fsRing 0.62s ease-out forwards;
  pointer-events: none;
}
@keyframes fsRing {
  from { width: 12px; height: 12px; opacity: 0.85; }
  to { width: 230px; height: 230px; opacity: 0; }
}

/* broadcast pip radiating from /company out to one employee */
.fpip {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 11px;
  height: 13px;
  border-radius: 2.5px;
  background: color-mix(in oklab, var(--c) 30%, #1c1c1c);
  border: 1px solid color-mix(in oklab, var(--c) 70%, transparent);
  box-shadow: 0 0 12px color-mix(in oklab, var(--c) 45%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

/* travelling file chip */
.fchip {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--gold);
  background: #201e16;
  border: 1px solid rgba(212, 194, 128, 0.4);
  border-radius: 7px;
  padding: 4px 9px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 18px rgba(212, 194, 128, 0.18);
}
.fsd-caption {
  margin-top: 56px;
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.fsd-cap { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-2); }
.fsd-cap .n {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gold);
  border: 1px solid rgba(212, 194, 128, 0.35);
  border-radius: 999px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  flex: none;
}
@media (max-width: 760px) {
  .fsd { height: 340px; }
  .fsd .adot .t { display: none; }
}

/* ============================================================
   CAPABILITIES - editorial numbered grid
   ============================================================ */
.caps {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
@media (max-width: 900px) { .caps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .caps { grid-template-columns: 1fr; } }
.capx {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 38px 34px 42px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: background 0.25s;
}
.capx:hover { background: rgba(212, 194, 128, 0.03); }
.capx .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-4);
  letter-spacing: 0.1em;
}
.capx h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.65rem;
  line-height: 1.15;
  margin: 0;
  color: var(--text);
}
.capx p { font-size: 13.5px; line-height: 1.65; color: var(--text-2); margin: 0; }
.capx .tagm {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: auto;
  padding-top: 10px;
}
.capx::after {
  content: "";
  position: absolute;
  left: 34px;
  top: 0;
  width: 36px;
  height: 1px;
  background: var(--gold);
  opacity: 0;
  transition: opacity 0.25s;
}
.capx:hover::after { opacity: 0.8; }

/* spotlight hover (cursor-tracked) */
.capx { overflow: hidden; }
.capx::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(212, 194, 128, 0.1), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.capx:hover::before { opacity: 1; }
.capx .capviz {
  height: 44px;
  display: flex;
  align-items: center;
  color: var(--gold);
  opacity: 0.85;
}
.capx .capviz svg { height: 38px; width: auto; max-width: 100%; overflow: visible; }
.capx:hover .capviz { opacity: 1; }
.capx:hover .capviz .vz { animation: vzPulse 1.6s ease-in-out infinite; }


@keyframes vzPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ============================================================
   SITE ASSEMBLY - abstract page silhouette building itself
   ============================================================ */
.site-build {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 880px) { .site-build { grid-template-columns: 1fr; gap: 44px; } }
.sb-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.sb-domain {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-2);
  border: 1px solid var(--hairline-2);
  background: var(--bg-2);
  border-radius: 999px;
  padding: 8px 18px;
}
.sb-domain .lv {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--green);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sb-page {
  width: min(440px, 88vw);
  border: 1px solid var(--hairline-2);
  border-radius: 18px;
  background: #faf8f4;
  color: #2a2a26;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 40px rgba(212, 194, 128, 0.06);
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  font-family: var(--font-sans);
}
/* announcement bar */
.v-ann {
  text-align: center;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: #f4f2ea;
  background: #3c4a33;
  padding: 7px 10px;
}
.v-ann b { color: #e8d9a8; font-weight: 700; }
.v-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid #eae6dd;
}
.v-logo { font-family: var(--font-serif); font-size: 1.15rem; color: #2f3a2a; }
.v-links { display: flex; gap: 16px; font-size: 11px; font-weight: 600; color: #6e6e64; }
.v-cart { width: 17px; height: 17px; color: #2f3a2a; position: relative; }
.v-cart svg { width: 100%; height: 100%; }
.v-cartn {
  position: absolute;
  top: -5px;
  right: -7px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #b3552e;
  color: #fff;
  font-style: normal;
  font-size: 8px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.v-hero {
  position: relative;
  text-align: center;
  padding: 30px 26px 24px;
  overflow: hidden;
  background: radial-gradient(90% 70% at 50% 0%, #eef2e8, transparent 75%);
}
.v-herobg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v-heroscrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(250, 248, 244, 0.88) 0%, rgba(250, 248, 244, 0.78) 55%, rgba(250, 248, 244, 0.92) 100%);
}
.v-hero > .v-kick,
.v-hero > h4,
.v-hero > p,
.v-hero > .v-btn,
.v-hero > .v-rate {
  position: relative;
  z-index: 1;
}
.v-kick {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7d8a6e;
  margin-bottom: 9px;
}
.v-hero h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.8rem;
  margin: 0 0 8px;
  color: #26301f;
  letter-spacing: -0.01em;
}
.v-hero p { font-size: 11.5px; line-height: 1.55; color: #6e6e64; margin: 0 auto 14px; max-width: 30ch; }
.v-btn {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #f4f2ea;
  background: #3c4a33;
  border-radius: 999px;
  padding: 9px 20px;
}
.v-rate {
  margin-top: 11px;
  font-size: 9.5px;
  color: #6e6e64;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.v-stars { color: #c99a3c; font-size: 10px; letter-spacing: 1px; }
.v-stars.sm { font-size: 8.5px; }
.v-prods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 6px 22px 18px;
}
.v-prod { position: relative; }
.v-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 1;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f4f2ea;
  background: #b3552e;
  border-radius: 999px;
  padding: 3px 8px;
}
.v-img {
  position: relative;
  aspect-ratio: 1 / 1.15;
  border-radius: 10px;
  background: radial-gradient(120% 100% at 50% 0%, var(--g1), var(--g2));
  display: grid;
  place-items: end center;
  overflow: hidden;
}
.v-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v-bottle {
  width: 34%;
  height: 62%;
  border-radius: 7px 7px 4px 4px;
  background: linear-gradient(165deg, color-mix(in oklab, var(--b) 80%, white) 0%, var(--b) 55%, color-mix(in oklab, var(--b) 75%, black) 100%);
  position: relative;
  margin-bottom: 12%;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}
.v-bottle::before {
  content: "";
  position: absolute;
  top: -14%;
  left: 32%;
  width: 36%;
  height: 14%;
  border-radius: 3px 3px 0 0;
  background: color-mix(in oklab, var(--b) 60%, black);
}
.v-bottle::after {
  content: "";
  position: absolute;
  top: 26%;
  left: 14%;
  right: 14%;
  height: 34%;
  border-radius: 3px;
  background: rgba(250, 248, 244, 0.85);
}
.v-pn { font-size: 11px; font-weight: 700; color: #2a2a26; margin-top: 8px; }
.v-pr { display: flex; align-items: center; gap: 5px; font-size: 8.5px; color: #8a8a7e; margin-top: 3px; }
.v-pp { font-size: 10.5px; color: #4c4c44; font-weight: 600; margin-top: 2px; }
.v-foot {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: center;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: #8a8a7e;
  border-top: 1px solid #eae6dd;
  padding: 12px;
  background: #f4f1ea;
}
.v-quote { font-family: var(--font-serif); font-style: italic; font-size: 11px; color: #55554c; }
.v-meta { font-size: 8.5px; }
/* assembly: sections blur-up in sequence (JS-gated) */
.sb-page .sb-el { opacity: 1; }
.sb-page.building .sb-el { opacity: 0; }
.sb-page .sb-el.on { animation: sbIn 0.6s var(--ease) both; }
@keyframes sbIn {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
/* scan line sweeping while building */
.sb-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 90px;
  top: -90px;
  background: linear-gradient(180deg, transparent, rgba(212, 194, 128, 0.08) 70%, rgba(212, 194, 128, 0.22));
  opacity: 0;
  pointer-events: none;
}
.sb-page.scanning .sb-scan {
  opacity: 1;
  animation: sbScan 2.6s linear;
}
@keyframes sbScan {
  from { top: -90px; }
  to { top: 110%; }
}
.sb-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 34px;
  border-top: 1px solid var(--hairline);
}
.sb-step {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--hairline);
}
.sb-step .n { font-family: var(--font-mono); font-size: 11px; color: var(--gold); flex: none; }
.sb-step .b strong { display: block; font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.sb-step .b span { font-size: 13px; color: var(--text-2); }

/* ============================================================
   GOAL FLOW - goal token fans out to employees, converges done
   ============================================================ */
.gflow {
  position: relative;
  max-width: 1120px;
  margin: 80px auto 0;
  height: 380px;
}
.gflow svg.gf-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gf-goal {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  max-width: 250px;
}
.gf-token {
  border: 1px solid rgba(212, 194, 128, 0.45);
  background: linear-gradient(160deg, #232015, #1c1b16);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45), 0 0 30px rgba(212, 194, 128, 0.12);
}
.gf-token .cmd {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.gf-token .txt { font-size: 14px; line-height: 1.5; color: var(--text); min-height: 3em; }
.gf-token .txt .caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--gold);
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.gf-under {
  margin-top: 13px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-2);
}
.gf-mid {
  position: absolute;
  left: 38.4%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.gf-mid .adot { background: var(--bg); border-radius: 999px; padding: 5px 14px 5px 6px; border: 1px solid var(--hairline-2); }
/* gf done - realistic mail stack */
.gf-done {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  max-width: 250px;
}
.gf-mailstack { position: relative; }
.gf-mail {
  position: relative;
  background: #fbfaf7;
  color: #23232a;
  border-radius: 12px;
  padding: 13px 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gf-mail.ghost {
  position: absolute;
  inset: 0;
  background: #efede6;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.gf-mail.ghost.g1 { transform: rotate(2.5deg) translateY(5px); }
.gf-mail.ghost.g2 { transform: rotate(-2.5deg) translateY(10px); }
.gfm-head { display: flex; align-items: center; gap: 7px; }
.gfm-head svg { width: 14px; height: 14px; flex: none; }
.gfm-from { font-size: 11px; font-weight: 700; color: #1f1f26; }
.gfm-sent {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  color: #1d7a36;
  background: #e8f0e9;
  border-radius: 999px;
  padding: 2px 7px;
}
.gfm-sub { font-size: 12px; font-weight: 700; color: #1f1f26; }
.gfm-snippet { font-size: 11px; color: #6a6a72; line-height: 1.45; }
.gf-done .chk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  margin-top: 16px;
}
.gf-done .chk svg { width: 14px; height: 14px; }
.gf-packet {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px rgba(212, 194, 128, 0.8);
  z-index: 3;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* the bar — what "good" means, pinned under the goal */
.gf-bar { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.55; color: var(--text-2); margin-top: 12px; }
.gf-bar-lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-right: 6px; white-space: nowrap; }
.gf-chip { font-size: 10px; color: var(--gold); background: var(--gold-soft); border: 1px solid var(--gold-dim); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
/* working glow on the dept dots during a pass */
.gf-mid .adot.work { border-color: color-mix(in oklab, var(--c) 55%, transparent); box-shadow: 0 0 18px color-mix(in oklab, var(--c) 32%, transparent); transition: box-shadow 0.3s, border-color 0.3s; }
/* grade gate node */
.gf-gate {
  position: absolute; left: 60.7%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; width: 190px; text-align: center;
  background: linear-gradient(160deg, #201f1a, #1a1a16);
  border: 1px solid var(--hairline-2); border-radius: 14px; padding: 13px 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  transition: border-color 0.35s, box-shadow 0.35s;
}
.gf-gate-lab { font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.01em; text-transform: none; color: var(--text-2); margin-bottom: 9px; }
.gf-gate-state { display: flex; align-items: center; justify-content: center; gap: 7px; }
.gf-gate-icon { width: 19px; height: 19px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1.5px solid var(--text-3); position: relative; transition: background 0.35s, border-color 0.35s; }
.gf-gate.grading .gf-gate-icon { border-color: var(--gold-dim); }
.gf-gate.grading .gf-gate-icon::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: gfpulse 1s ease-in-out infinite; }
@keyframes gfpulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.85; } }
.gf-gate-verdict { font-size: 12px; font-weight: 600; color: var(--text-2); transition: color 0.35s; }
.gf-gate-note { font-size: 10px; color: var(--text-3); margin-top: 7px; min-height: 2.2em; line-height: 1.3; }
.gic { width: 11px; height: 11px; position: absolute; opacity: 0; transition: opacity 0.3s; }
.gf-gate.bad { border-color: #c2673f; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 26px rgba(194, 103, 63, 0.28); }
.gf-gate.bad .gf-gate-icon { border-color: #c2673f; background: #c2673f; }
.gf-gate.bad .gf-gate-verdict { color: #d98a63; }
.gf-gate.bad .gf-gate-note { color: #c98f76; }
.gf-gate.bad .gic-x { opacity: 1; }
.gf-gate.good { border-color: var(--gold); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(212, 194, 128, 0.3); }
.gf-gate.good .gf-gate-icon { border-color: var(--gold); background: var(--gold); }
.gf-gate.good .gf-gate-verdict { color: var(--gold); }
.gf-gate.good .gic-v { opacity: 1; }
/* done starts dim during the run, lights up when it clears the bar */
.gf-anim .gf-done { opacity: 0.32; transition: opacity 0.5s; }
.gf-anim .gf-done.lit { opacity: 1; }
/* clay re-work wire */
.wire-loop.flow { stroke: #c2673f; }
/* single agent node (the CEO) */
.gf-agent {
  position: absolute; left: 38.4%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; display: inline-flex; align-items: center; gap: 11px;
  background: linear-gradient(160deg, #232015, #1c1b16);
  border: 1px solid rgba(212, 194, 128, 0.4); border-radius: 14px;
  padding: 11px 16px 11px 12px; box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.gf-agent-av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-serif); font-size: 15px; color: #2e2510; background: radial-gradient(circle at 30% 26%, #e7d3a8, #c2a04f); }
.gf-agent-body { display: flex; flex-direction: column; gap: 2px; }
.gf-agent-name { font-size: 14px; font-weight: 600; color: var(--text); }
.gf-agent-status { font-size: 11.5px; color: var(--text-3); transition: color 0.3s; }
.gf-agent.work { border-color: var(--gold-dim); box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45), 0 0 22px rgba(212, 194, 128, 0.22); }
.gf-agent.work .gf-agent-status { color: var(--gold); }
@media (max-width: 880px) {
  .gflow { height: auto; display: flex; flex-direction: column; align-items: center; gap: 26px; }
  .gflow svg.gf-wires { display: none; }
  .gf-goal, .gf-mid, .gf-gate, .gf-agent, .gf-done { position: static; transform: none; }
  .gf-gate { width: auto; min-width: 200px; }
  .gf-mids { display: flex; flex-direction: column; gap: 12px; }
  .gf-anim .gf-done { opacity: 1; }
}

/* ============================================================
   ARTIFACTS - realistic outputs (email / invoice / report)
   ============================================================ */
.artifacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 1040px;
  margin: 72px auto 0;
  perspective: 1200px;
}
@media (max-width: 900px) { .artifacts { grid-template-columns: 1fr; max-width: 420px; } }
.art {
  background: #fbfaf7;
  color: #23232a;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 30px 60px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.35);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
  display: flex;
  flex-direction: column;
  gap: 13px;
  font-family: var(--font-sans);
}
.art:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.02);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 46px 90px rgba(0, 0, 0, 0.55), 0 0 40px rgba(212, 194, 128, 0.12);
}
.art-head { display: flex; align-items: center; gap: 9px; }
.art-logo { width: 19px; height: 19px; flex: none; }
.art-app { font-size: 12px; font-weight: 600; color: #6a6a72; }
.art-badge {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.art-badge.sent { background: #e8f0e9; color: #1d7a36; }
.art-badge.paid { background: #e6f5ec; color: #0e8345; }
.art-badge.size { background: #efeeea; color: #6a6a72; }
.mail-row { display: flex; align-items: center; gap: 11px; }
.mail-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  flex: none;
}
.mail-from { font-size: 13.5px; font-weight: 700; color: #1f1f26; }
.mail-to { font-size: 11.5px; color: #80808a; margin-top: 1px; }
.mail-subject { font-size: 14px; font-weight: 700; color: #1f1f26; }
.mail-body { font-size: 12.5px; line-height: 1.6; color: #4d4d56; margin: 0; }
.mail-attach {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 600;
  color: #44444c;
  border: 1px solid #e3e1da;
  background: #f3f2ed;
  border-radius: 8px;
  padding: 6px 11px;
}
.mail-attach svg { width: 13px; height: 13px; color: #80808a; }
.art-by {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #ebe9e2;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: #6a6a72;
}
.art-by .adot .d { width: 22px; height: 22px; font-size: 9px; }
.inv-amount { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: #1f1f26; }
.inv-id { font-size: 11.5px; color: #80808a; margin-top: -8px; }
.inv-lines { display: flex; flex-direction: column; border-top: 1px solid #ebe9e2; }
.inv-line {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: #4d4d56;
  padding: 8px 0;
  border-bottom: 1px solid #f0efe9;
}
.inv-line.total { font-weight: 700; color: #1f1f26; border-bottom: none; }
.pdf-ic {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: #d93025;
  border-radius: 5px;
  padding: 3px 6px;
}
.rep-title { font-family: var(--font-serif); font-size: 22px; color: #1f1f26; }
.rep-sub { font-size: 11.5px; color: #80808a; margin-top: -8px; }
.rep-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 84px;
  padding: 10px 4px 0;
}
.rep-chart span {
  flex: 1;
  height: var(--h, 40%);
  border-radius: 5px 5px 2px 2px;
  background: #e4e1d6;
}
.rep-chart span.hot { background: linear-gradient(180deg, #d4c280, #bca65e); }
.rep-caption { font-size: 10.5px; color: #80808a; font-family: var(--font-mono); }
.tools-foot {
  margin-top: 60px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
}
.tools-foot b { color: var(--text-2); font-weight: 600; }

/* ============================================================
   GUARDRAILS - gate diagram + isolated vaults
   ============================================================ */
.guards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  margin-top: 84px;
  align-items: start;
}
@media (max-width: 860px) { .guards { grid-template-columns: 1fr; gap: 84px; } }
.guard-block h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.9rem;
  margin: 26px 0 12px;
  color: var(--text);
}
.guard-block p { font-size: 14px; line-height: 1.65; color: var(--text-2); margin: 0; max-width: 44ch; }

/* gate diagram */
.gate-diagram {
  position: relative;
  height: 150px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--bg-2);
  overflow: hidden;
}
.gate-line {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 50%;
  height: 1px;
  background: var(--hairline-2);
}
.gate-bars {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 7px;
  z-index: 2;
}
.gate-bars span {
  width: 3px;
  height: 64px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 14px rgba(212, 194, 128, 0.4);
  transition: transform 0.5s var(--ease), opacity 0.5s;
}
.gate-diagram.open .gate-bars span:nth-child(1) { transform: translateY(-44px); opacity: 0.3; }
.gate-diagram.open .gate-bars span:nth-child(2) { transform: translateY(44px); opacity: 0.3; }
.gate-packet {
  position: absolute;
  top: 50%;
  left: 7%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 14px rgba(217, 119, 87, 0.7);
  transform: translate(-50%, -50%);
  z-index: 3;
}
.gate-packet.ok { background: var(--green); box-shadow: 0 0 14px rgba(109, 192, 126, 0.7); }
.gate-status {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.gate-status b { color: var(--gold); font-weight: 500; }
.gate-status .ok { color: var(--green); }

/* vault diagram */
.vaults {
  display: flex;
  gap: 18px;
  height: 150px;
}
.vault {
  flex: 1;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.vault::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 50% 0%, color-mix(in oklab, var(--vc) 10%, transparent), transparent 70%);
}
.vault .cyl { width: 44px; height: 52px; position: relative; }
.vault .cyl svg { width: 100%; height: 100%; color: var(--vc); }
.vault .vn { font-size: 12.5px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 7px; }
.vault .vn .sq {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--vc);
  display: inline-block;
}
.vault .vd { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); }
.vault .lock {
  position: absolute;
  top: 10px;
  right: 12px;
  color: var(--green);
}
.vault .lock svg { width: 13px; height: 13px; }

/* ============================================================
   PRICING
   ============================================================ */
.prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 880px;
  margin: 72px auto 0;
  align-items: stretch;
}
@media (max-width: 720px) { .prices { grid-template-columns: 1fr; } }
.pcard {
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--bg-2);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pcard.pro {
  border-color: rgba(212, 194, 128, 0.45);
  background: linear-gradient(170deg, #211f16 0%, var(--bg-2) 55%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4), 0 0 40px rgba(212, 194, 128, 0.07);
  position: relative;
}
/* rotating border beam */
.pcard.pro::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  padding: 1.5px;
  background: conic-gradient(from var(--bb, 0deg), transparent 0 78%, #f0e3ae 88%, transparent 97%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: beamSpin 5s linear infinite;
  pointer-events: none;
}
@property --bb { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes beamSpin { to { --bb: 360deg; } }
.pflag {
  position: absolute;
  top: -13px;
  right: 30px;
  background: var(--gold);
  color: #181610;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
}
.pname {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pamount {
  font-family: var(--font-serif);
  font-size: 3.6rem;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.pamount .per { font-family: var(--font-sans); font-size: 1rem; color: var(--text-3); }
.pamount.trial { font-size: 2.6rem; }
.pblurb { font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.plist li { display: flex; gap: 12px; font-size: 14px; align-items: flex-start; line-height: 1.45; }
.plist li svg { width: 16px; height: 16px; color: var(--gold); flex: none; margin-top: 2px; }
.pcard .btn { width: 100%; justify-content: center; }
.pfoot { font-size: 11.5px; color: var(--text-3); text-align: center; }

/* ============================================================
   FINAL CTA + FOOTER
   ============================================================ */
.finale {
  position: relative;
  text-align: center;
  padding: 170px 0;
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  background: radial-gradient(700px 380px at 50% 10%, rgba(212, 194, 128, 0.1), transparent 70%);
}
.finale-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
  filter: saturate(0.75);
}
.finale-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 380px at 50% 10%, rgba(212, 194, 128, 0.08), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, rgba(22, 22, 22, 0.62) 35%, rgba(22, 22, 22, 0.66) 70%, var(--bg) 100%);
}
.finale .wrap { position: relative; z-index: 1; }
.finale .hero-cta { justify-content: center; }
.footer {
  border-top: 1px solid var(--hairline);
  padding: 64px 0 44px;
  background: var(--bg);
}
.footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 44px; }
.footer-brand { max-width: 300px; }
.footer-brand p { margin-top: 14px; font-size: 13px; line-height: 1.65; color: var(--text-3); }
.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-col h5 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-4);
  margin: 0 0 18px;
}
.footer-col a { display: block; color: var(--text-2); font-size: 13px; margin-bottom: 12px; transition: color 0.16s; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--text-4);
}


/* ============================================================
   CREATIVE STUDIO - editorial plate: artwork above, prompt as
   a serif caption below. Hairlines and mono labels, no chrome.
   ============================================================ */
.cr-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: stretch;
}
@media (max-width: 940px) {
  .cr-split { grid-template-columns: 1fr; gap: 44px; align-items: start; }
  .cr-copy { order: -1; }
}
.cr-stage { min-width: 0; display: flex; }
.cr-plate {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  background: var(--bg-2);
}

/* head - dossier line */
.crp-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.crp-no em { font-style: normal; color: var(--text-2); }
.crp-status { color: var(--gold); }
.cr-plate.gen .crp-status { animation: crBlink 0.9s step-end infinite; }
@keyframes crBlink { 50% { opacity: 0.25; } }
.crp-modes { margin-left: auto; display: inline-flex; gap: 10px; align-items: baseline; }
.crp-mode {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0 0 3px;
  cursor: pointer;
  color: var(--text-3);
  transition: color 0.2s, border-color 0.2s;
}
.crp-mode:hover { color: var(--text); }
.crp-mode.active { color: var(--gold); border-bottom-color: var(--gold); }
.crp-sep { color: var(--text-4); }

/* figure - the artwork on a quiet mat */
.crp-fig {
  position: relative;
  flex: 1;
  min-height: 320px;
  margin: 0;
}
.crp-fig img,
.crp-fig video {
  position: absolute;
  inset: 24px;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  object-fit: contain;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1), filter 1s var(--ease), opacity 0.6s var(--ease);
}
.cr-plate.typing .crp-fig img,
.cr-plate.typing .crp-fig video {
  opacity: 0.13;
  filter: grayscale(1);
}
.cr-plate.gen .crp-fig img,
.cr-plate.gen .crp-fig video {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  filter: grayscale(1) brightness(0.9);
  transition: none;
}
#crVid { display: none; }
.cr-plate.video:not(.novid) #crVid:not(.failed) { display: block; }
.cr-plate.video:not(.novid) #crImg { display: none; }
#crVid.failed { display: none !important; }

/* the rendering sweep - a single gold rule crossing the mat */
.crp-line {
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 24px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  opacity: 0;
  pointer-events: none;
}
.cr-plate.gen .crp-line {
  opacity: 1;
  animation: crSweep 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes crSweep {
  from { left: 24px; }
  to { left: calc(100% - 25px); }
}

/* loop time - quiet mono, no chrome */
.crp-dur {
  position: absolute;
  bottom: 32px;
  right: 32px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  display: none;
}
.cr-plate.video.done:not(.novid) #crDur { display: block; }

/* caption - prompt as a museum label */
.crp-cap {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  border-top: 1px solid var(--hairline);
  padding: 16px 20px;
}
.crp-cap-label {
  flex: none;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.crp-cap-text {
  min-width: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--text);
  outline: none;
  caret-color: var(--gold);
}
.cr-caret {
  width: 1.5px;
  height: 14px;
  background: var(--gold);
  opacity: 0;
  flex: none;
  align-self: center;
}
.cr-plate.typing .cr-caret { opacity: 1; animation: crCaret 1s step-end infinite; }
.crp-cap-text:focus ~ .cr-caret { display: none; }
@keyframes crCaret { 50% { opacity: 0; } }
.crp-go {
  margin-left: auto;
  flex: none;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  background: none;
  border: none;
  border-bottom: 1px solid var(--gold-dim);
  padding: 0 0 3px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
}
.crp-go:hover { border-bottom-color: var(--gold); }
.crp-go.hit { transform: translateY(1px); }

/* 7th capability - spans the last grid row */
.capx-span { grid-column: 1 / -1; }
.capx-span p { max-width: 62ch; }
@media (max-width: 900px) { .capx-span { grid-column: auto; } }

/* website-builder video (replaces the old .sb-page mock) */
.sb-video {
  width: min(460px, 90vw);
  height: auto;
  display: block;
  border-radius: 16px;
  border: 1px solid var(--hairline-2);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 40px rgba(212, 194, 128, 0.06);
}