/* ==========================================================================
   Assertica — New Era diagram components
   --------------------------------------------------------------------------
   Architecture, maturity-ladder, consequence-tier and comparison figures for
   long-form service pages. HTML/CSS rather than inline SVG on purpose: these
   reflow on small screens, inherit the design tokens, animate with the
   existing reveal machinery, and stay real selectable text for screen readers.

   Everything is scoped under `.ne`. Requires tokens.css + new-era.css.
   ========================================================================== */

/* --- figure shell --------------------------------------------------------- */

.ne-figure {
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-4xl, 20px);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.ne-figure__head { margin-bottom: 1.75rem; }

.ne-figure__label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow, 2px);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.ne-figure__label::before {
  content: '';
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange));
}

.ne-figure__title {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight, -0.5px);
  color: var(--ink-bright);
}

.ne-figure__note {
  margin: 0.6rem 0 0;
  font-size: var(--text-sm, 0.9rem);
  line-height: var(--leading-normal, 1.6);
  color: var(--ink-body);
}

.ne-figure figcaption {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--glass-border);
  font-size: var(--text-2xs, 0.75rem);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --- pipeline -------------------------------------------------------------
   The architecture reduced to its actual claim: agents slot between the
   systems the bank already runs and the evidence it has to produce, and
   everything passes through the bank's own controls on the way.

   Four nodes, one line of examples each, one assurance band. An earlier
   version of this drew five layers of six chips with four labelled
   connectors — technically richer and unreadable as a pitch. A diagram in a
   sales page has one job: land a single idea in about three seconds. */

.ne-pipeline__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.ne-pipeline__step {
  position: relative;
  margin-right: 1.75rem;
  padding: 1.4rem 1.35rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl, 14px);
  background: rgba(255, 255, 255, 0.025);
}

.ne-pipeline__step:last-child { margin-right: 0; }

/* connector line */
.ne-pipeline__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -1.75rem;
  width: 1.75rem;
  height: 1px;
  background: var(--glass-border-lit);
}

/* arrowhead */
.ne-pipeline__step:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -0.62rem;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--glass-border-lit);
  border-right: 1px solid var(--glass-border-lit);
  transform: translateY(-50%) rotate(45deg);
}

/* The one node that is ours — the only node that needs a label. */
.ne-pipeline__step.is-ours {
  border-color: rgba(249, 115, 22, 0.45);
  background: rgba(249, 115, 22, 0.07);
}

.ne-pipeline__step.is-yours {
  border-color: rgba(37, 99, 235, 0.4);
  background: rgba(37, 99, 235, 0.07);
}

.ne-pipeline__tag {
  display: inline-block;
  margin-bottom: 0.6rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange);
}

.ne-pipeline__step h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight, -0.5px);
  color: var(--ink-bright);
}

.ne-pipeline__step p {
  margin: 0;
  font-size: var(--text-sm, 0.9rem);
  line-height: var(--leading-normal, 1.6);
  color: var(--ink-body);
}

.ne-pipeline__band {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding: 1rem 1.35rem;
  border: 1px dashed rgba(139, 92, 246, 0.4);
  border-radius: var(--radius-2xl, 14px);
  background: rgba(139, 92, 246, 0.05);
  font-size: var(--text-sm, 0.9rem);
  line-height: var(--leading-normal, 1.6);
  color: var(--ink-body);
}

.ne-pipeline__band b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: var(--tracking-tight, -0.5px);
  color: var(--purple-light);
}

@media (max-width: 900px) {
  .ne-pipeline__steps { grid-template-columns: 1fr; }
  .ne-pipeline__step { margin: 0 0 1.75rem; }
  .ne-pipeline__step:last-child { margin-bottom: 0; }
  .ne-pipeline__step:not(:last-child)::after {
    top: auto;
    bottom: -1.75rem;
    right: auto;
    left: 50%;
    width: 1px;
    height: 1.75rem;
  }
  .ne-pipeline__step:not(:last-child)::before {
    top: auto;
    bottom: -0.55rem;
    right: auto;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
}

/* --- switch: a tabbed explorer -------------------------------------------
   Replaces long comparison tables. Seven domains as seven rows is a wall of
   text; seven domains as tabs is one comparison at a time, chosen by the
   reader. Behaviour (including arrow-key roving focus) lives in chrome.js. */

.ne-switch__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.ne-switch__tab {
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-control-sm, 10px);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm, 0.9rem);
  color: var(--ink-body);
  cursor: pointer;
  transition: border-color var(--dur-base, 0.3s) var(--ease-cine),
              background var(--dur-base, 0.3s) var(--ease-cine),
              color var(--dur-base, 0.3s) var(--ease-cine);
}

.ne-switch__tab:hover { border-color: var(--glass-border-lit); color: var(--ink-bright); }
.ne-switch__tab:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.ne-switch__tab[aria-selected='true'] {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}

.ne-switch__panel[hidden] { display: none; }

.ne-switch__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  animation: ne-switch-in 0.35s var(--ease-cine) both;
}

@keyframes ne-switch-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: none; }
}

.ne-switch__col {
  padding: 1.5rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl, 14px);
  background: rgba(255, 255, 255, 0.025);
}

.ne-switch__col.is-accent {
  border-color: rgba(249, 115, 22, 0.35);
  background: rgba(249, 115, 22, 0.06);
}

.ne-switch__col b {
  display: block;
  font-size: var(--text-2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow, 2px);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.ne-switch__col.is-accent b { color: var(--orange); }

.ne-switch__col p {
  margin: 0.85rem 0 0;
  font-size: var(--text-base, 1rem);
  line-height: var(--leading-normal, 1.6);
  color: var(--ink-body);
}

.ne-switch__col.is-accent p { color: var(--ink-bright); }

.ne-switch__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 0.4rem;
  font-size: var(--text-2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow, 2px);
  text-transform: uppercase;
  color: var(--ink-muted);
}

@media (max-width: 760px) {
  .ne-switch__panel { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ne-switch__panel { animation: none; }
  .ne-switch__tab { transition: none; }
}

/* --- consequence tiers ----------------------------------------------------
   Three tiers with an intensity meter that fills with the stakes. */

.ne-tiers { display: grid; gap: 0.75rem; }

.ne-tier {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1.5rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl, 14px);
  background: rgba(255, 255, 255, 0.025);
}

.ne-tier__head { border-right: 1px solid var(--glass-border); padding-right: 1.5rem; }

.ne-tier__no {
  font-size: var(--text-2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow, 2px);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.ne-tier__verb {
  margin: 0.35rem 0 0.85rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1;
  letter-spacing: var(--tracking-cinematic);
  color: var(--ink-bright);
}

.ne-tier__meter { display: flex; gap: 4px; }

.ne-tier__meter i {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: var(--glass-border-lit);
}

.ne-tier__meter i.is-on { background: var(--orange); }

.ne-tier__meter-label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.65rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.ne-tier dl { margin: 0; display: grid; gap: 0.9rem; }

.ne-tier dt {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.3rem;
}

.ne-tier dd {
  margin: 0;
  font-size: var(--text-sm, 0.9rem);
  line-height: var(--leading-normal, 1.6);
  color: var(--ink-body);
}

.ne-tier dd.is-cost { color: var(--ink-bright); }

@media (max-width: 760px) {
  .ne-tier { grid-template-columns: 1fr; gap: 1rem; }
  .ne-tier__head { border-right: 0; border-bottom: 1px solid var(--glass-border); padding: 0 0 1rem; }
}

/* --- before / after comparison table -------------------------------------- */

.ne-compare { width: 100%; border-collapse: collapse; text-align: left; }

.ne-compare caption { text-align: left; padding-bottom: 1rem; color: var(--ink-body); font-size: var(--text-sm, 0.9rem); }

.ne-compare th {
  padding: 0 0 0.85rem;
  border-bottom: 1px solid var(--glass-border-lit);
  font-size: var(--text-2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow, 2px);
  text-transform: uppercase;
  color: var(--ink-muted);
  vertical-align: bottom;
}

.ne-compare th:nth-child(3) { color: var(--orange); }

.ne-compare td {
  padding: 1.1rem 1.25rem 1.1rem 0;
  border-bottom: 1px solid var(--glass-border);
  font-size: var(--text-sm, 0.9rem);
  line-height: var(--leading-normal, 1.6);
  color: var(--ink-body);
  vertical-align: top;
}

.ne-compare tbody tr { transition: background var(--dur-base, 0.3s) var(--ease-cine); }
.ne-compare tbody tr:hover { background: rgba(255, 255, 255, 0.022); }

.ne-compare td:first-child {
  width: 22%;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink-bright);
}

.ne-compare td:last-child { color: var(--ink-bright); padding-right: 0; }

/* Horizontal scroll only inside the table, never the page. */
.ne-scroller { overflow-x: auto; }
.ne-scroller > .ne-compare { min-width: 640px; }

/* --- proof list ----------------------------------------------------------- */

.ne-proof { display: grid; gap: 0.75rem; }

.ne-proof__item {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 1fr;
  gap: 1.75rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl, 14px);
  background: rgba(255, 255, 255, 0.025);
  transition: border-color var(--dur-base, 0.3s) var(--ease-cine),
              background var(--dur-base, 0.3s) var(--ease-cine);
}

.ne-proof__item:hover { border-color: var(--glass-border-lit); background: var(--glass-strong); }

.ne-proof__item h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight, -0.5px);
  color: var(--ink-bright);
}

.ne-proof__item > p {
  margin: 0;
  font-size: var(--text-sm, 0.9rem);
  line-height: var(--leading-normal, 1.6);
  color: var(--ink-body);
}

.ne-proof__out { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.ne-proof__out li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--text-sm, 0.9rem);
  line-height: 1.45;
  color: var(--ink-bright);
}

.ne-proof__out li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
}

@media (max-width: 900px) {
  .ne-proof__item { grid-template-columns: 1fr; gap: 0.9rem; }
}

/* --- continuous track ------------------------------------------------------
   A band that runs underneath a phased flow rather than being a phase in it. */

.ne-track {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1.5rem;
  padding: 1.25rem 1.4rem;
  border: 1px dashed rgba(139, 92, 246, 0.4);
  border-radius: var(--radius-2xl, 14px);
  background: rgba(139, 92, 246, 0.05);
}

.ne-track__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: var(--tracking-tight, -0.5px);
  color: var(--purple-light);
}

.ne-track__name span {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.ne-track p {
  margin: 0;
  font-size: var(--text-sm, 0.9rem);
  line-height: var(--leading-normal, 1.6);
  color: var(--ink-body);
}

@media (max-width: 760px) {
  .ne-track { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* --- pull quote / callout ------------------------------------------------- */

.ne-callout {
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--glass-border);
  border-left: 2px solid var(--orange);
  border-radius: 0 var(--radius-2xl, 14px) var(--radius-2xl, 14px) 0;
  background: rgba(249, 115, 22, 0.05);
}

.ne-callout__label {
  font-size: var(--text-2xs, 0.75rem);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow, 2px);
  text-transform: uppercase;
  color: var(--orange);
}

.ne-callout p {
  margin: 0.75rem 0 0;
  font-size: var(--text-base, 1rem);
  line-height: var(--leading-normal, 1.6);
  color: var(--ink-body);
}

.ne-question {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-cinematic);
  color: var(--ink-bright);
}

.ne-question .accent { color: var(--orange); }

.ne-disclaimer {
  margin-top: 2rem;
  font-size: var(--text-xs, 0.8rem);
  line-height: var(--leading-normal, 1.6);
  color: var(--ink-muted);
}

@media (prefers-reduced-motion: reduce) {
  .ne-arch__node,
  .ne-ladder__rung,
  .ne-proof__item,
  .ne-compare tbody tr { transition: none; }
}