/* SPYTIK Interactive Demonstrations — scoped design system v1.5.1 */

.spytik-demo {
  /* SPYTIK design tokens */
  --spytik-demo-bg: #0B1220;
  --spytik-demo-panel: #111A2A;
  --spytik-demo-raised: #182337;
  --spytik-demo-text: #F2F4F7;
  --spytik-demo-muted: #AEB8C7;
  --spytik-demo-gold: #C5A66A;
  --spytik-demo-border: #29364A;
  --spytik-demo-label: #8491A4;

  --spytik-font-heading: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --spytik-font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --spytik-font-utility: "Roboto", Arial, sans-serif;

  color: var(--spytik-demo-text);
  background: var(--spytik-demo-bg);
  border: 1px solid var(--spytik-demo-border);
  border-radius: 18px;
  padding: clamp(16px, 3vw, 28px);
  margin-block: 20px;
  font-family: var(--spytik-font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.spytik-demo *,
.spytik-demo *::before,
.spytik-demo *::after {
  box-sizing: border-box;
}

.spytik-demo button,
.spytik-demo summary {
  font-family: var(--spytik-font-body);
  font-size: inherit;
}

.spytik-demo button {
  color: inherit;
}

.spytik-demo__notice,
.spytik-demo__eyebrow,
.spytik-demo__output-label {
  color: var(--spytik-demo-gold);
  font-family: var(--spytik-font-utility);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  line-height: 1.5;
  text-transform: uppercase;
}

.spytik-demo__notice {
  margin: 0 0 18px;
}

.spytik-demo__stage-grid,
.spytik-demo__node-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.spytik-demo__stage-button,
.spytik-demo__node-button,
.spytik-demo__timeline-button {
  min-width: 0;
  border: 1px solid var(--spytik-demo-border);
  border-radius: 12px;
  background: var(--spytik-demo-panel);
  padding: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

/* Methodology stage button text uses the SPYTIK background token. */
.spytik-demo--methodology .spytik-demo__stage-button {
  color: var(--spytik-demo-bg);
  background: var(--spytik-demo-gold);
}

.spytik-demo__stage-button:hover,
.spytik-demo__node-button:hover,
.spytik-demo__timeline-button:hover {
  border-color: var(--spytik-demo-gold);
  background: var(--spytik-demo-raised);
}

/* Keep the existing hover treatment and preserve readable text contrast. */
.spytik-demo--methodology .spytik-demo__stage-button:hover {
  color: var(--spytik-demo-text);
}

.spytik-demo__stage-button:focus-visible,
.spytik-demo__node-button:focus-visible,
.spytik-demo__timeline-button:focus-visible,
.spytik-demo summary:focus-visible {
  outline: 2px solid var(--spytik-demo-gold);
  outline-offset: 3px;
}

.spytik-demo__stage-button.is-active,
.spytik-demo__node-button.is-active,
.spytik-demo__timeline-button.is-active {
  border-color: var(--spytik-demo-gold);
  background: var(--spytik-demo-raised);
}

.spytik-demo--methodology .spytik-demo__stage-button.is-active {
  color: var(--spytik-demo-text);
}

.spytik-demo__stage-name {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.spytik-demo__detail {
  margin-top: 18px;
  padding: clamp(16px, 2.5vw, 24px);
  border: 1px solid var(--spytik-demo-border);
  border-radius: 14px;
  background: var(--spytik-demo-panel);
}

.spytik-demo__eyebrow {
  margin: 0 0 8px;
}

.spytik-demo__detail-title {
  margin: 0 0 10px;
  color: var(--spytik-demo-text);
  font-family: var(--spytik-font-heading);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.25px;
}

.spytik-demo__detail-description {
  margin: 0;
  color: var(--spytik-demo-muted);
  font-size: 18px;
  line-height: 1.65;
}

.spytik-demo__register {
  display: grid;
  gap: 10px;
}

.spytik-demo__register-item {
  border: 1px solid var(--spytik-demo-border);
  border-radius: 12px;
  background: var(--spytik-demo-panel);
  overflow: clip;
}

.spytik-demo__register-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  cursor: pointer;
  list-style-position: inside;
}

.spytik-demo__register-question {
  flex: 1;
  font-weight: 600;
}

.spytik-demo__register-item > p {
  margin: 0;
  padding: 0 16px 16px;
  color: var(--spytik-demo-muted);
}

.spytik-demo__status {
  display: inline-flex;
  align-items: center;
  border-radius: 100px;
  padding: 4px 9px;
  font-family: var(--spytik-font-utility);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
}

.spytik-demo__status--verified {
  color: #D3E8D8;
  background: #20372B;
}

.spytik-demo__status--partial {
  color: #F1DFB9;
  background: #3A3020;
}

.spytik-demo__status--unverified,
.spytik-demo__status--unavailable {
  color: #E2D8D0;
  background: #35302D;
}

.spytik-demo__timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.spytik-demo__timeline-button {
  display: grid;
  align-content: start;
  gap: 8px;
}

.spytik-demo__timeline-dot,
.spytik-demo__node-orb {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 2px solid var(--spytik-demo-gold);
  border-radius: 50%;
  background: var(--spytik-demo-bg);
}

.spytik-demo__timeline-date,
.spytik-demo__source {
  color: var(--spytik-demo-muted);
  font-family: var(--spytik-font-utility);
  font-size: 14px;
  line-height: 1.5;
}

.spytik-demo__timeline-title {
  font-weight: 600;
  line-height: 1.35;
}

.spytik-demo__source {
  margin: 7px 0;
}

.spytik-demo__source span {
  color: var(--spytik-demo-text);
  font-weight: 600;
}

.spytik-demo__node-button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  font-weight: 600;
}

.spytik-demo__node-orb {
  flex: 0 0 auto;
  box-shadow: 0 0 16px rgba(197, 166, 106, 0.15);
}

.spytik-demo__footnote {
  margin: 16px 0 0;
  color: var(--spytik-demo-muted);
  font-size: 14px;
  line-height: 1.6;
}

.spytik-demo__error {
  padding: 12px;
  border: 1px solid var(--spytik-demo-border);
  border-radius: 10px;
  color: var(--spytik-demo-text);
  background: var(--spytik-demo-bg);
  font-family: var(--spytik-font-body);
}

@media (min-width: 768px) and (max-width: 1024px) {
  .spytik-demo {
    font-size: 17px;
  }

  .spytik-demo__detail-title {
    font-size: 28px;
  }

  .spytik-demo__stage-name {
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .spytik-demo {
    font-size: 16px;
    line-height: 1.65;
    padding: 16px;
    border-radius: 14px;
  }

  .spytik-demo__stage-grid,
  .spytik-demo__node-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spytik-demo__timeline {
    grid-template-columns: 1fr;
  }

  .spytik-demo__stage-button,
  .spytik-demo__node-button,
  .spytik-demo__timeline-button {
    padding: 12px;
  }

  .spytik-demo__stage-name {
    font-size: 15px;
  }

  .spytik-demo__detail-title {
    font-size: 24px;
    line-height: 1.2;
  }

  .spytik-demo__detail-description {
    font-size: 16px;
  }

  .spytik-demo__register-item summary {
    display: grid;
  }

  .spytik-demo__status {
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spytik-demo *,
  .spytik-demo *::before,
  .spytik-demo *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.spytik-demo--concerns{--spytik-demo-bg:#080B11;--spytik-demo-panel:#111722;--spytik-demo-raised:#192231;--spytik-demo-gold:#C5A66A;background:transparent;border:0;border-radius:0;padding:0}
.spytik-concerns__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.spytik-concerns__card{min-width:0}
.spytik-concerns__card-button{display:flex;width:100%;height:100%;min-width:0;flex-direction:column;align-items:stretch;text-align:left;padding:12px;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--spytik-demo-text);cursor:pointer;transition:transform 200ms ease,border-color 200ms ease,background-color 200ms ease}
.spytik-concerns__card-button:hover,.spytik-concerns__card-button.is-active{border-color:rgba(197,166,106,.65);background:rgba(197,166,106,.055);transform:translateY(-3px)}
.spytik-concerns__card-button:focus-visible,.spytik-concerns__answer:focus-visible,.spytik-concerns__reset:focus-visible{outline:2px solid var(--spytik-demo-gold);outline-offset:3px}
.spytik-concerns__image-wrap{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/5;overflow:hidden;margin-bottom:15px}
.spytik-concerns__image{display:block;width:100%;height:100%;object-fit:contain;object-position:center;transition:transform 220ms ease}
.spytik-concerns__card-button:hover .spytik-concerns__image{transform:scale(1.035)}
.spytik-concerns__image-wrap--placeholder{min-height:150px;background:radial-gradient(ellipse at center,rgba(197,166,106,.13),transparent 70%);border-bottom:1px solid var(--spytik-demo-border)}
.spytik-concerns__number{color:var(--spytik-demo-gold);font:500 clamp(44px,5vw,76px)/1 var(--spytik-font-heading)}
.spytik-concerns__card-title{display:block;margin:0 0 5px;font:500 clamp(18px,1.5vw,24px)/1.2 var(--spytik-font-heading);color:var(--spytik-demo-text)}
.spytik-concerns__card-subtitle{display:block;color:var(--spytik-demo-muted);font-size:15px;line-height:1.45}
.spytik-concerns__explore{display:flex;justify-content:space-between;gap:8px;margin-top:16px;padding-top:10px;border-top:1px solid var(--spytik-demo-border);color:var(--spytik-demo-gold);font-family:var(--spytik-font-utility);font-size:12px;letter-spacing:.025em}
.spytik-concerns__panel{margin-top:clamp(22px,4vw,42px);padding:clamp(18px,3vw,32px);border:1px solid var(--spytik-demo-border);border-radius:16px;background:var(--spytik-demo-bg)}
.spytik-concerns__question{margin:0 0 18px;color:var(--spytik-demo-text);font-size:clamp(18px,2vw,22px);line-height:1.45}
.spytik-concerns__answers{display:grid;gap:10px}
.spytik-concerns__answer{width:100%;text-align:left;padding:13px 15px;border:1px solid var(--spytik-demo-border);border-radius:10px;background:var(--spytik-demo-panel);color:var(--spytik-demo-text);cursor:pointer;transition:border-color 160ms ease,background-color 160ms ease}
.spytik-concerns__answer:hover,.spytik-concerns__answer.is-selected{border-color:var(--spytik-demo-gold);background:var(--spytik-demo-raised)}
.spytik-concerns__result{margin-top:18px;padding:18px;border-left:2px solid var(--spytik-demo-gold);background:var(--spytik-demo-panel);border-radius:0 10px 10px 0}
.spytik-concerns__result[hidden]{display:none!important}
.spytik-concerns__result-heading{margin:0 0 8px;color:var(--spytik-demo-gold);font-weight:600}
.spytik-concerns__result-analysis{margin:0 0 16px;color:var(--spytik-demo-muted)}
.spytik-concerns__principle{display:grid;gap:4px;margin:0 0 16px}
.spytik-concerns__principle strong{color:var(--spytik-demo-text);font-family:var(--spytik-font-utility);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.spytik-concerns__principle span{color:var(--spytik-demo-muted)}
.spytik-concerns__reset{border:1px solid var(--spytik-demo-gold);border-radius:8px;background:transparent;color:var(--spytik-demo-text);padding:9px 13px;cursor:pointer}
.spytik-demo--concerns .spytik-demo__footnote{margin:14px 0 0;color:var(--spytik-demo-label);font-size:13px}
@media(max-width:767px){.spytik-concerns__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.spytik-concerns__card-button{padding:8px}.spytik-concerns__image-wrap{aspect-ratio:3/4;margin-bottom:10px}.spytik-concerns__card-title{font-size:18px}.spytik-concerns__card-subtitle{font-size:13px}.spytik-concerns__explore{font-size:11px}}
@media(max-width:380px){.spytik-concerns__grid{grid-template-columns:1fr 1fr}.spytik-concerns__card-title{font-size:16px}}
@media(prefers-reduced-motion:reduce){.spytik-concerns__card-button,.spytik-concerns__image{transition:none}}


/* Scroll-triggered, once-only left-to-right reveal for the four supplied illustration cards. */
.spytik-demo--concerns.spytik-writing-pending .spytik-concerns__image {
  clip-path: inset(0 100% 0 0);
}
.spytik-demo--concerns.spytik-writing-visible .spytik-concerns__image {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.35s cubic-bezier(.22,.61,.36,1);
}
.spytik-demo--concerns.spytik-writing-visible .spytik-concerns__card:nth-child(2) .spytik-concerns__image { transition-delay: .12s; }
.spytik-demo--concerns.spytik-writing-visible .spytik-concerns__card:nth-child(3) .spytik-concerns__image { transition-delay: .24s; }
.spytik-demo--concerns.spytik-writing-visible .spytik-concerns__card:nth-child(4) .spytik-concerns__image { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .spytik-demo--concerns.spytik-writing-pending .spytik-concerns__image,
  .spytik-demo--concerns.spytik-writing-visible .spytik-concerns__image {
    clip-path: none;
    transition: none;
  }
}