/* SOC 2 — hero rings, criteria explorer, Type timeline */
.s2v__arc { stroke-dasharray: 260; stroke-dashoffset: 260; animation: s2draw 1.6s var(--ease) forwards; }
.s2v__arc--2 { animation-delay: .2s; } .s2v__arc--3 { animation-delay: .4s; } .s2v__arc--4 { animation-delay: .6s; }
@keyframes s2draw { to { stroke-dashoffset: 0; } }

.tsc { background: var(--white); border: 1px solid var(--line-cool); border-radius: 0; box-shadow: var(--shadow); padding: clamp(18px, 2.4vw, 28px); display: grid; gap: 18px; }
.tsc__toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.tsc__tg { border: 1px solid var(--line-2); background: var(--white); border-radius: 0; padding: 9px 14px; font: 600 .82rem/1.2 var(--sans); color: var(--muted); transition: all .2s; }
.tsc__tg:hover:not(:disabled) { border-color: var(--navy); color: var(--ink); }
.tsc__tg[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.tsc__tg:disabled { cursor: default; background: var(--gold); border-color: var(--gold); color: var(--navy); }
.tsc__tg--p[aria-pressed="true"] { background: var(--violet-ink); border-color: var(--violet-ink); }
.tsc__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 14px 16px; border-radius: 0; background: var(--ivory); font-size: .9rem; }
.tsc__summary b { font: 600 1.5rem/1 var(--sans); color: var(--ink); margin-right: 4px; }
.tsc__bar { flex: 1 1 140px; height: 6px; border-radius: 0; background: var(--line); overflow: hidden; }
.tsc__bar i { display: block; height: 100%; background: var(--gold); transition: width .5s var(--ease); }
.tsc__list { display: grid; gap: 8px; max-height: 560px; overflow-y: auto; padding-right: 4px; }
.tsc__row { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 14px; border-radius: 0; border: 1px solid var(--line); animation: mmIn .35s var(--ease) both; }
.tsc__code { align-self: start; text-align: center; padding: 6px 0; border-radius: 0; background: var(--navy); color: var(--gold); font: 500 .74rem/1 var(--mono); }
.tsc__row--p .tsc__code { color: #CDB8FB; }
.tsc__row:not(.tsc__row--sec) { background: rgba(255,255,255,.03); }
.tsc__row strong { font-size: .95rem; }
.tsc__n { font-size: .76rem; color: var(--muted); margin-left: 6px; }
.tsc__row p { margin-top: 4px; font-size: .86rem; color: var(--body); }

.ttl { border: 1px solid var(--line-dark); border-radius: 0; padding: clamp(20px, 3vw, 36px); background: var(--navy-2); display: grid; gap: 24px; }
.ttl__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; color: #fff; font-weight: 600; font-size: .9rem; }
.ttl__ctrl input { flex: 1 1 220px; accent-color: var(--gold); }
.ttl__ctrl output { font: 600 1.4rem/1 var(--sans); color: var(--gold); min-width: 110px; }
.ttl__track { display: flex; align-items: stretch; gap: 6px; min-height: 76px; }
.ttl__seg { border-radius: 0; padding: 12px; display: flex; align-items: end; font-size: .78rem; line-height: 1.3; color: var(--on-dark); transition: flex-grow .45s var(--ease); }
.ttl__seg--ready { flex: 3 1 0; background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.2); }
.ttl__seg--period { flex: 6 1 0; background: linear-gradient(90deg, rgba(91,155,255,.35), rgba(91,155,255,.15)); border: 1px solid rgba(91,155,255,.5); }
.ttl__seg--field { flex: 2 1 0; background: rgba(255,255,255,.1); }
.ttl__pin { flex: none; width: 74px; display: grid; place-items: center; text-align: center; font: 600 .66rem/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); background: var(--gold); border-radius: 0; }
.ttl__note { color: var(--on-dark-2); max-width: 70ch; }
@media (max-width: 640px) { .ttl__track { flex-direction: column; } .ttl__seg, .ttl__pin { flex: none !important; width: auto; min-height: 48px; } .ttl__seg--period { min-height: 80px; } }

/* callout titles on navy sections (gold-ink is too dark there) */
.t-navy .callout__t { color: var(--gold); }
.t-navy .callout--note .callout__t { color: var(--on-dark-2); }