/* ==========================================================
   INSIDE — visual rebuild of the three "why it works" tiles.
   Replaces text-heavy iso cards with one signature animated
   diagram per tile + minimal supporting copy.
   ========================================================== */

.inside_grid.viz {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.viz_tile {
  position: relative;
  background: #fff;
  border: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 220ms ease, transform 320ms cubic-bezier(0.2,0,0,1);
}
.viz_tile:hover { border-color: var(--brand); }
.viz_tile::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 100%; height: 3px;
  background: linear-gradient(to right, var(--ink) 0, var(--ink) 33%, var(--brand) 33%, var(--brand) 66%, var(--n400) 66%);
}

/* ---- header strip ------------------------------------------------- */
.viz_head {
  display: flex; align-items: center; gap: 10px;
  padding: 22px 26px 16px;
  border-bottom: 1px dashed var(--hair-2);
}
.viz_n {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  color: var(--brand);
  border: 1px solid var(--brand);
  padding: 3px 8px; line-height: 1;
  font-feature-settings: "tnum" 1;
}
.viz_eb {
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--n500);
}

/* ---- title block -------------------------------------------------- */
.viz_title {
  padding: 22px 26px 0;
}
.viz_t {
  font-size: 22px; font-weight: 600; line-height: 1.18;
  letter-spacing: -0.014em; color: var(--ink); margin: 0;
  text-wrap: balance;
}
.viz_p {
  font-size: 13.5px; line-height: 1.55; color: var(--slate);
  margin: 12px 0 0; max-width: 38ch;
}

/* ---- the stage (where each diagram lives) ------------------------- */
.viz_stage {
  position: relative;
  margin: 22px 0 0;
  height: 280px;
  overflow: hidden;
  background:
    linear-gradient(to bottom, #fff 0%, var(--paper) 100%);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.viz_stage::before {
  /* subtle grid backdrop */
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(17,24,39,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,24,39,0.025) 1px, transparent 1px);
  background-size: 40px 100%, 100% 32px;
  mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
  pointer-events: none;
}

/* ---- capability rows (compact) ------------------------------------ */
.viz_caps {
  padding: 18px 26px 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.viz_cap {
  display: grid; grid-template-columns: 70px 1fr;
  gap: 12px; align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed var(--hair-2);
  font-size: 13px; line-height: 1.35;
}
.viz_cap:last-child { border-bottom: 0; }
.viz_cap_layer {
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  border: 1px solid var(--brand);
  padding: 3px 5px; line-height: 1;
  text-align: center;
  font-feature-settings: "tnum" 1;
}
.viz_cap_layer.is-iris    { color: #1A7F5A; border-color: #1A7F5A; }
.viz_cap_layer.is-vault   { color: #6E3CB8; border-color: #6E3CB8; }
.viz_cap_layer.is-sentinel{ color: var(--brand-deep); border-color: var(--brand-deep); }
.viz_cap_layer.is-ink     { color: var(--ink); border-color: var(--ink); }
.viz_cap_t { color: var(--ink); font-weight: 600; }
.viz_cap_d { color: var(--slate); font-weight: 400; }

/* ---- foot --------------------------------------------------------- */
.viz_foot {
  margin-top: auto;
  padding: 14px 26px 18px;
  border-top: 1px dashed var(--hair-2);
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
.viz_foot_l { color: var(--n500); font-weight: 500; }
.viz_foot_r { color: var(--brand-deep); font-weight: 600; }

/* =============================================================
   STAGE 1 — Onboarding: three streams converging into one file
   ============================================================= */
.stage-onboard svg { width: 100%; height: 100%; display: block; }
.stage-onboard .src_lbl {
  font: 600 9.5px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.14em; text-transform: uppercase;
  fill: var(--n500);
}
.stage-onboard .src_box {
  fill: #fff; stroke: var(--hair-3); stroke-width: 1;
}
.stage-onboard .src_box.csv  { stroke: #1F7244; }
.stage-onboard .src_box.lms  { stroke: var(--brand); }
.stage-onboard .src_box.pdf  { stroke: #C8421F; }
.stage-onboard .src_tag {
  font: 700 11px/1 'Inter Tight', sans-serif;
  letter-spacing: 0.06em;
}
.stage-onboard .src_tag.csv { fill: #1F7244; }
.stage-onboard .src_tag.lms { fill: var(--brand); }
.stage-onboard .src_tag.pdf { fill: #C8421F; }
.stage-onboard .stream {
  fill: none; stroke-width: 1.5;
  stroke-dasharray: 4 4;
  opacity: 0.55;
}
.stage-onboard .stream.csv { stroke: #1F7244; }
.stage-onboard .stream.lms { stroke: var(--brand); }
.stage-onboard .stream.pdf { stroke: #C8421F; }
.stage-onboard .pkt {
  r: 4;
  filter: drop-shadow(0 1px 2px rgba(11,18,32,0.18));
}
.stage-onboard .pkt.csv { fill: #1F7244; }
.stage-onboard .pkt.lms { fill: var(--brand); }
.stage-onboard .pkt.pdf { fill: #C8421F; }
.stage-onboard .pkt animateMotion { /* set in markup */ }
.stage-onboard .file_card {
  fill: #fff; stroke: var(--ink); stroke-width: 1.25;
}
.stage-onboard .file_band {
  fill: var(--ink);
}
.stage-onboard .file_lbl {
  font: 700 10px/1 'Inter Tight', sans-serif;
  letter-spacing: 0.16em; fill: #fff;
  text-transform: uppercase;
}
.stage-onboard .file_row {
  stroke: var(--hair-2); stroke-width: 1; stroke-dasharray: 2 3;
}
.stage-onboard .file_dot {
  fill: var(--brand);
}
.stage-onboard .ring {
  fill: none; stroke: var(--brand); stroke-width: 1.25;
  opacity: 0;
  transform-origin: 285px 140px;
  animation: oRing 2.4s ease-out infinite;
}
.stage-onboard .ring.r2 { animation-delay: 0.8s; }
.stage-onboard .ring.r3 { animation-delay: 1.6s; }
@keyframes oRing {
  0%   { opacity: 0.55; r: 22; }
  100% { opacity: 0;    r: 60; }
}

/* =============================================================
   STAGE 2 — Compliance: state machine clock with legal triggers
   ============================================================= */
.stage-comply svg { width: 100%; height: 100%; display: block; }
.stage-comply .clk_arc {
  fill: none; stroke: var(--hair-3); stroke-width: 1;
}
.stage-comply .clk_tick {
  stroke: var(--n500); stroke-width: 1;
}
.stage-comply .clk_tick.major { stroke: var(--ink); stroke-width: 1.5; }
.stage-comply .clk_d {
  font: 600 9.5px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.08em; fill: var(--n500);
  text-transform: uppercase;
}
.stage-comply .clk_d.major { fill: var(--ink); font-weight: 700; }
.stage-comply .clk_node {
  fill: #fff; stroke: var(--brand); stroke-width: 1.5;
  filter: drop-shadow(0 2px 4px rgba(37,99,235,0.18));
}
.stage-comply .clk_node.fired { fill: var(--brand); }
.stage-comply .clk_node_t {
  font: 700 9px/1 'Inter Tight', sans-serif;
  letter-spacing: 0.06em; fill: var(--brand-deep);
  text-transform: uppercase;
}
.stage-comply .clk_node_t.fired { fill: #fff; }
.stage-comply .clk_hand {
  stroke: var(--orange); stroke-width: 2; stroke-linecap: round;
  transform-origin: 200px 140px;
  animation: clkHand 8s linear infinite;
}
@keyframes clkHand {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.stage-comply .clk_center {
  fill: var(--ink);
}
.stage-comply .clk_pulse {
  fill: var(--orange); opacity: 0;
  animation: clkPulse 8s linear infinite;
}
@keyframes clkPulse {
  0%, 23% { opacity: 0; }
  24%, 26% { opacity: 1; transform: scale(1.6); }
  27%, 48% { opacity: 0; }
  49%, 51% { opacity: 1; transform: scale(1.6); }
  52%, 73% { opacity: 0; }
  74%, 76% { opacity: 1; transform: scale(1.6); }
  77%, 100% { opacity: 0; }
}
.stage-comply .legend_row {
  font: 600 10px/1 'Inter Tight', sans-serif;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.stage-comply .legend_lbl { fill: var(--n500); }
.stage-comply .legend_v   { fill: var(--ink); }

/* =============================================================
   STAGE 3 — Edges: phone + courthouse + portfolio file rail
   ============================================================= */
.stage-edges svg { width: 100%; height: 100%; display: block; }
.stage-edges .e_rail {
  fill: none; stroke: var(--hair-3); stroke-width: 1;
  stroke-dasharray: 3 4;
}
.stage-edges .e_rail.live {
  stroke: var(--brand); stroke-width: 1.5;
  stroke-dasharray: 6 6;
  animation: eRail 1.6s linear infinite;
}
@keyframes eRail {
  to { stroke-dashoffset: -24; }
}
.stage-edges .phone_outer {
  fill: var(--ink); stroke: var(--ink); stroke-width: 1;
}
.stage-edges .phone_screen {
  fill: #fff;
}
.stage-edges .phone_bar {
  fill: var(--brand);
}
.stage-edges .phone_dot {
  fill: var(--brand);
}
.stage-edges .phone_line {
  stroke: var(--hair-3); stroke-width: 1; stroke-dasharray: 2 2;
}
.stage-edges .geo_pin {
  fill: var(--orange);
  animation: geoPulse 2.4s ease-out infinite;
  transform-origin: center;
}
@keyframes geoPulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.stage-edges .geo_ring {
  fill: none; stroke: var(--orange); stroke-width: 1;
  opacity: 0;
  animation: geoRing 2.4s ease-out infinite;
}
.stage-edges .geo_ring.r2 { animation-delay: 0.8s; }
@keyframes geoRing {
  0%   { opacity: 0.6; r: 4; }
  100% { opacity: 0;   r: 18; }
}
.stage-edges .court {
  fill: #fff; stroke: var(--ink); stroke-width: 1.25;
}
.stage-edges .court_pediment {
  fill: var(--ink);
}
.stage-edges .court_col {
  stroke: var(--ink); stroke-width: 1.5;
}
.stage-edges .file_card {
  fill: #fff; stroke: var(--ink); stroke-width: 1.25;
}
.stage-edges .file_band {
  fill: var(--ink);
}
.stage-edges .file_lbl {
  font: 700 9px/1 'Inter Tight', sans-serif;
  letter-spacing: 0.16em; fill: #fff;
  text-transform: uppercase;
}
.stage-edges .file_row {
  stroke: var(--hair-2); stroke-width: 1; stroke-dasharray: 2 3;
}
.stage-edges .file_in {
  fill: var(--brand); opacity: 0;
  animation: fileIn 4s ease-in-out infinite;
}
.stage-edges .file_in.r2 { animation-delay: 1.3s; }
.stage-edges .file_in.r3 { animation-delay: 2.6s; }
@keyframes fileIn {
  0%, 10%  { opacity: 0; }
  20%, 80% { opacity: 1; }
  90%, 100%{ opacity: 0; }
}
.stage-edges .stub {
  font: 600 9px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.14em; fill: var(--n500);
  text-transform: uppercase;
}

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 980px) {
  .inside_grid.viz { grid-template-columns: 1fr; }
  .viz_stage { height: 240px; }
}