/* ════════════════════════════════════════════════════════════════════════════
   netpositive.management — product surface, one system.
   Quiet grammar: system type, sentence case, generous space, rounded panels,
   one accent. No mono labels, no uppercase tracking, no interpuncts.
   Pages add their own layout on top; nothing here is page-specific.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --ground: #0c0a09;
  --ground-2: #0a0807;
  --panel: #1a1512;
  --panel-2: #211a15;
  --line: rgba(241,233,220,0.10);
  --text: #f5efe6;
  --text-2: rgba(245,239,230,0.72);
  --text-3: rgba(245,239,230,0.5);
  --accent: #e0653c;
  --accent-solid: #c14e28; /* AA for white text */
  --neg: #c8483a; /* negative ink: the gruesome register */
  --ok: #5fa396;
  --warn: #e8a04e;
  --radius: 22px;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ground); color: var(--text-2);
  font-family: var(--sans); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { color: var(--text); margin: 0; text-wrap: balance; }
a { color: inherit; text-decoration: none; }
section { padding: 130px 0; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.wide { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* type scale: 12 · 14 · 17 · 21 · 28 · 48 · 76 */
.h-hero { font-size: clamp(44px, 6.4vw, 76px); font-weight: 700; letter-spacing: -0.018em; line-height: 1.05; }
.h-sec  { font-size: clamp(32px, 4.4vw, 48px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.08; }
.h-card { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.sub    { font-size: 21px; line-height: 1.5; color: var(--text-2); font-weight: 400; }
.small  { font-size: 14px; line-height: 1.6; color: var(--text-3); }
.eyebrow { font-size: 17px; font-weight: 600; color: var(--accent); display: block; margin-bottom: 14px; }

.link { color: var(--accent); font-size: 19px; font-weight: 400; }
.link::after { content: " ›"; }
.link:hover { text-decoration: underline; }
.btn {
  display: inline-block; background: var(--accent-solid); color: #fff;
  font-size: 17px; font-weight: 500; padding: 12px 26px; border-radius: 980px;
}
.btn:hover { background: #b34621; }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn.ghost:hover { background: var(--accent); color: #fff; }

.intro { text-align: center; max-width: 720px; margin: 0 auto 70px; }
.intro .sub { margin-top: 18px; }

.panel { background: var(--panel); border-radius: var(--radius); }
.card { background: var(--panel); border-radius: var(--radius); padding: 38px 34px; }
.card h3 { margin-bottom: 12px; }
.card p { font-size: 15.5px; line-height: 1.6; color: var(--text-2); margin: 0; }

/* reveals: visible by default; product.js opts into motion */
.rv { opacity: 1; transform: none; }
.js-motion .rv { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.2,0.7,0.2,1), transform 0.7s cubic-bezier(0.2,0.7,0.2,1); }
.js-motion .rv.in { opacity: 1; transform: none; }

/* nav */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(12,10,9,0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__in { max-width: 1080px; margin: 0 auto; padding: 0 24px; height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__brand { font-weight: 700; font-size: 17px; color: var(--text); letter-spacing: -0.01em; }
.nav__brand span { color: var(--accent); }
.nav__links { display: flex; gap: 26px; flex-wrap: wrap; }
.nav__links a { font-size: 13.5px; color: rgba(245,239,230,0.85); }
.nav__links a:hover { color: #fff; }
.nav__links a[data-current] { color: var(--accent); }
@media (max-width: 900px) { .nav__links { display: none; } }

/* page hero (inner pages) */
.phero { padding: 120px 0 90px; text-align: center; }
.phero .sub { max-width: 640px; margin: 24px auto 0; }

/* every inner page offers a one-tap way back to the overview
   (the nav links are hidden on small screens; this is the mobile path home) */
.backlink { display: inline-block; font-size: 14px; color: var(--text-3); margin-bottom: 26px; }
.backlink::before { content: "\2039\00a0"; color: var(--accent); }
.backlink:hover { color: var(--text); }

/* footer */
.foot { padding: 90px 0 40px; }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.foot h4 { font-size: 13.5px; font-weight: 600; color: var(--text); margin: 0 0 14px; }
.foot a { display: block; font-size: 13.5px; line-height: 2.1; color: var(--text-3); }
.foot a:hover { color: var(--text); }
.foot__brand { font-weight: 700; font-size: 22px; color: var(--text); }
.foot__brand span { color: var(--accent); }
.foot__sub { font-size: 13.5px; color: var(--text-3); margin-top: 12px; max-width: 34ch; line-height: 1.6; }
.foot__bottom { margin-top: 64px; font-size: 12.5px; color: var(--text-3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.foot__bottom a { color: var(--text-2); }
.foot__bottom a:hover { color: var(--text); }
@media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; } }

/* language toggle */
.nav__lang { display: flex; align-items: center; gap: 8px; }
.nav__lang button {
  background: none; border: none; padding: 4px 2px; cursor: pointer;
  font-family: var(--sans); font-size: 13px; color: var(--text-3);
}
.nav__lang button.is-active { color: var(--text); font-weight: 600; }
.nav__lang button:hover { color: var(--text); }
.nav__lang .sep { color: var(--text-3); font-size: 12px; }

/* keep Google Translate chrome out of the page */
body { top: 0 !important; }
.skiptranslate, .goog-te-banner-frame, #goog-gt-tt { display: none !important; }
#google_translate_element { display: none !important; }
font[style] { background: none !important; box-shadow: none !important; }

/* keyboard focus */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}

/* one-time notice when Spanish was auto-selected */
.gt-note {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 50; background: var(--panel-2); color: var(--text-2);
  border: 1px solid var(--line); border-radius: 980px;
  padding: 10px 20px; font-size: 13.5px; display: flex; gap: 16px; align-items: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5); max-width: calc(100vw - 40px);
}
.gt-note button { background: none; border: none; cursor: pointer; font-size: 13.5px; color: var(--accent); padding: 2px; font-family: var(--sans); }

/* ── guided tour: spotlight walkthrough for first-time readers ─────────────── */
.tourlink { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--sans); }
.tour__ring {
  position: fixed; z-index: 60; pointer-events: none;
  border: 2px solid var(--accent); border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(8,6,5,0.78);
  transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
}
.tour__card {
  position: fixed; z-index: 61; width: 350px; max-width: calc(100vw - 32px);
  background: var(--panel-2); border-radius: 14px; padding: 18px 20px 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.6);
}
.tour__step { font-size: 12px; color: var(--text-3); }
.tour__title { font-size: 16px; font-weight: 600; color: var(--text); margin: 6px 0 8px; }
.tour__body { font-size: 14px; line-height: 1.6; color: var(--text-2); }
.tour__row { display: flex; gap: 16px; margin-top: 14px; align-items: center; }
.tour__row .btn { padding: 7px 16px; font-size: 14px; border: 0; cursor: pointer; font-family: var(--sans); }
.tour__row .ghostbtn { background: none; border: 0; padding: 0; color: var(--text-3); font-size: 14px; cursor: pointer; font-family: var(--sans); }
.tour__row .ghostbtn:hover { color: var(--text); }
.tour__close { position: absolute; top: 8px; right: 14px; background: none; border: 0; color: var(--text-3); font-size: 18px; line-height: 1; cursor: pointer; padding: 4px; }
.tour__close:hover { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .tour__ring { transition: none; } }

/* ── scroll choreography ──────────────────────────────────────────────────── */

/* scrub stage: tall wrapper, pinned viewport-high stage */
.scrub { position: relative; }
.scrub__stage {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; padding: 16px 0;
}
.scrub__stage .intro { margin-bottom: 0; }
.scrub__stage .intro .sub { font-size: clamp(15px, 2.2vh, 19px); }
.scrub__stage .intro .h-sec { font-size: clamp(26px, 4.6vh, 46px); }
@media (max-width: 900px) {
  .scrub { height: auto !important; }
  .scrub__stage { position: static; min-height: 0; }
}

/* the DCCA loop ring */
.loopgrid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 4vw, 64px); align-items: center; max-width: 1020px; margin: clamp(14px, 4vh, 56px) auto 0; padding: 0 24px; width: 100%; }
@media (max-width: 900px) { .loopgrid { grid-template-columns: 1fr; } }
.ring { width: 100%; max-width: min(400px, 46vh); margin: 0 auto; display: block; }
.ring__track { fill: none; stroke: var(--line); stroke-width: 2; }
.ring__arc {
  fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 942.5;
  stroke-dashoffset: 0; /* finished state: the loop is closed */
}
.js-motion .scrub[data-step] .ring__arc { stroke-dashoffset: calc(942.5 * (1 - var(--p, 1))); }
.ring__node circle { fill: var(--panel-2); stroke: var(--line); stroke-width: 2; transition: stroke 0.4s ease; }
.ring__node text { fill: var(--text-3); font-family: var(--sans); font-size: 17px; font-weight: 600; transition: fill 0.4s ease; }
.ring__node.lit circle { stroke: var(--accent); }
.ring__node.lit text { fill: var(--text); }
.ring__center { fill: var(--text); font-family: var(--sans); font-size: 24px; font-weight: 700; }
.ring__center-sub { fill: var(--text-3); font-family: var(--sans); font-size: 12.5px; }

/* node lighting follows the step; finished state lights all */
.ring__node { }
.js-motion .scrub[data-step] .ring__node circle { stroke: var(--line); }
.js-motion .scrub[data-step] .ring__node text { fill: var(--text-3); }
.js-motion .scrub[data-step="0"] .ring__node:nth-of-type(1) circle,
.js-motion .scrub[data-step="1"] .ring__node:nth-of-type(-n+2) circle,
.js-motion .scrub[data-step="2"] .ring__node:nth-of-type(-n+3) circle,
.js-motion .scrub[data-step="3"] .ring__node circle { stroke: var(--accent); }
.js-motion .scrub[data-step="0"] .ring__node:nth-of-type(1) text,
.js-motion .scrub[data-step="1"] .ring__node:nth-of-type(-n+2) text,
.js-motion .scrub[data-step="2"] .ring__node:nth-of-type(-n+3) text,
.js-motion .scrub[data-step="3"] .ring__node text { fill: var(--text); }

/* loop cards: finished state = 2x2 grid; scrubbing = one at a time */
.loopcards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.loopcards .ctrl { background: var(--panel); border-radius: 16px; padding: 24px 22px; }
.loopcards .ctrl .k { font-size: 13px; font-weight: 600; color: var(--accent); }
.loopcards .ctrl h3 { font-size: 16.5px; font-weight: 600; margin: 6px 0 8px; }
.loopcards .ctrl p { font-size: 13.5px; color: var(--text-3); margin: 0; line-height: 1.55; }
@media (min-width: 901px) {
  .js-motion .scrub[data-step] .loopcards { display: block; position: relative; min-height: min(300px, 42vh); }
  .js-motion .scrub[data-step] .loopcards .ctrl {
    position: absolute; inset: 0; opacity: 0; transform: translateY(14px);
    transition: opacity 0.45s ease, transform 0.45s ease;
    display: flex; flex-direction: column; justify-content: center; padding: 32px 36px;
  }
  .js-motion .scrub[data-step] .loopcards .ctrl h3 { font-size: 24px; }
  .js-motion .scrub[data-step] .loopcards .ctrl p { font-size: 16px; line-height: 1.6; color: var(--text-2); }
  .js-motion .scrub[data-step="0"] .loopcards .ctrl:nth-child(1),
  .js-motion .scrub[data-step="1"] .loopcards .ctrl:nth-child(2),
  .js-motion .scrub[data-step="2"] .loopcards .ctrl:nth-child(3),
  .js-motion .scrub[data-step="3"] .loopcards .ctrl:nth-child(4) { opacity: 1; transform: none; }
}

/* ── semantic word marks: stencil stamps ─────────────────────────────────────
   Load-bearing words are stamped: stencil letterforms (Stardos Stencil,
   OFL, self-hosted), a heavy underline bar, and a fractal-noise mask that
   erodes glyphs and bar together like worn paint. Accent = affirmative;
   ember red = the negative register. */
@font-face {
  font-family: 'Stardos Stencil';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/stardos-stencil-700.woff2') format('woff2');
}
.hl {
  font-family: 'Stardos Stencil', 'Arial Black', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.88em;
  line-height: 1;
  color: var(--accent);
  position: relative;
  display: inline-block;
  padding: 0 0.02em 0.14em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cpath fill='white' fill-rule='evenodd' d='M0 0H240V240H0Z M23 31l9-4 6 8-11 6z M74 12l7 2 3 9-9 3-4-7z M141 44l12-3 4 7-10 6z M198 27l8 5-3 9-9-2z M36 96l10 2 2 8-12 2z M97 83l6-5 8 6-5 9-8-3z M167 109l9-2 5 8-11 4z M215 88l7 4-4 8-7-4z M18 160l8-3 6 7-9 5z M84 148l11 1 1 9-10 2z M139 172l7-6 8 7-7 7z M203 156l9 3-2 9-9-3z M55 205l8-2 5 8-10 4z M121 218l9-4 5 7-9 6z M182 199l10 1 2 8-11 3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cpath fill='white' fill-rule='evenodd' d='M0 0H240V240H0Z M23 31l9-4 6 8-11 6z M74 12l7 2 3 9-9 3-4-7z M141 44l12-3 4 7-10 6z M198 27l8 5-3 9-9-2z M36 96l10 2 2 8-12 2z M97 83l6-5 8 6-5 9-8-3z M167 109l9-2 5 8-11 4z M215 88l7 4-4 8-7-4z M18 160l8-3 6 7-9 5z M84 148l11 1 1 9-10 2z M139 172l7-6 8 7-7 7z M203 156l9 3-2 9-9-3z M55 205l8-2 5 8-10 4z M121 218l9-4 5 7-9 6z M182 199l10 1 2 8-11 3z'/%3E%3C/svg%3E");
  -webkit-mask-size: 240px 240px;
  mask-size: 240px 240px;
}
.hl::after {
  content: "";
  position: absolute;
  left: 0.02em; right: 0.02em; bottom: 0;
  height: 0.11em;
  background: currentColor;
  transform: rotate(-0.6deg);
}
.hl-neg { color: var(--neg); }

/* ── citations: every quote and named source carries its reference ─────────
   <a class="cite" href="…"> or <span class="cite" tabindex="0"> wraps the
   mention; the nested .cite__card holds the Harvard reference and shows on
   hover or keyboard focus. Cards are notranslate (bibliographic). */
.cite {
  position: relative; color: inherit;
  text-decoration: underline dotted rgba(245,239,230,0.45);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
span.cite { cursor: help; }
a.cite:hover { color: var(--text); }
.cite__card {
  position: absolute; left: 50%; bottom: calc(100% + 12px);
  transform: translateX(-50%) translateY(6px);
  width: 320px; max-width: 78vw;
  background: var(--panel-2); border-radius: 14px; padding: 14px 16px;
  font-family: var(--sans); font-size: 13px; font-weight: 400; font-style: normal;
  line-height: 1.55; color: var(--text-2); text-align: left; white-space: normal;
  letter-spacing: normal; box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 30;
}
.cite:hover .cite__card, .cite:focus .cite__card, .cite:focus-visible .cite__card {
  opacity: 1; visibility: visible; transform: translateX(-50%);
}
.cite__card i { font-style: italic; }
.cite__card img { display: block; width: 100%; height: auto; border-radius: 8px; margin-bottom: 10px; }
.cite__card--thumb { width: 340px; }
.qsrc { margin-top: 16px; font-size: 14px; color: var(--text-3); }
.qsrc .cite:hover { color: var(--text-2); }

/* ── the gate: five checks resolve into one admission ─────────────────────── */

.gate__pin {
  position: sticky; top: 48px; z-index: 5;
  background: rgba(12,10,9,0.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 26px 0;
}
.gate__chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }
.chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid transparent;
  border-radius: 980px; padding: 8px 17px;
  font-size: 14px; color: var(--text-3);
  transition: color 0.4s ease, background 0.4s ease, border-color 0.4s ease;
}
.chip .tick { width: 12px; height: 12px; flex: none; }
.chip .tick path {
  fill: none; stroke: rgba(245,239,230,0.25); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 11; stroke-dashoffset: 0;
  transition: stroke 0.4s ease, stroke-dashoffset 0.45s ease 0.05s;
}
.chip.lit { color: var(--text); background: var(--panel-2); }
.chip.lit .tick path { stroke: var(--accent); }
/* with motion, an unlit check is an undrawn check: the mark draws in on pass */
.js-motion .chip:not(.lit) .tick path { stroke-dashoffset: 11; }
.gate__arrow { width: 22px; height: 12px; flex: none; }
.gate__arrow path { fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* the admission is the output: an empty slot until all five checks resolve */
.chip--admit.lit { background: var(--accent-solid); color: #fff; font-weight: 600; }
.chip--admit.lit .tick path { stroke: #fff; }
.js-motion .chip--admit:not(.lit) {
  background: transparent;
  border: 1px dashed rgba(245,239,230,0.28);
}

/* when the gate resolves: the five pulse in sequence, then Admitted arrives */
@keyframes chipPulse {
  0% { transform: none; }
  50% { transform: scale(1.08); box-shadow: 0 0 0 1.5px var(--accent); }
  100% { transform: none; }
}
@keyframes admitPop {
  0% { transform: scale(0.82); opacity: 0.4; }
  60% { transform: scale(1.14); opacity: 1; }
  100% { transform: scale(1); }
}
.js-motion .resolved [data-chip]:not([data-chip="admit"]) { animation: chipPulse 0.5s ease both; }
.js-motion .resolved [data-chip]:nth-of-type(1) { animation-delay: 0s; }
.js-motion .resolved [data-chip]:nth-of-type(2) { animation-delay: 0.12s; }
.js-motion .resolved [data-chip]:nth-of-type(3) { animation-delay: 0.24s; }
.js-motion .resolved [data-chip]:nth-of-type(4) { animation-delay: 0.36s; }
.js-motion .resolved [data-chip]:nth-of-type(5) { animation-delay: 0.48s; }
.js-motion .resolved [data-chip="admit"] { animation: admitPop 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.72s both; }