/* ============================================================
   TMG SECURITY — DEFENSIVE SECURITY PRACTICE
   Loaded alongside tmg-home.css (tokens, header, footer, .spot)
   and tmg-services.css (shared service-page furniture: hero,
   breadcrumbs, capability grids, FAQ, deliverables).

   This file carries only what makes Defensive *different*.

   Offensive reads as attack paths converging on a target:
   directional, adversarial, outside-in.
   Defensive reads as telemetry converging on an operations
   capability: continuous, cyclical, inside-out. Signals travel,
   states change, timelines accumulate.

   Nothing here displays live or customer data. Every panel that
   could be mistaken for telemetry is labelled conceptual.
   ============================================================ */

/* Defensive leans on cyan (signal) with violet for analysis and
   magenta reserved for incident states — deliberately narrower
   than the offensive palette so the two practices read apart. */
.def{ --acc:var(--cyan); --acc-soft:rgba(79,216,234,.13); --acc-line:rgba(79,216,234,.42); }
.def.accent-cyan  { --acc:var(--cyan);  --acc-soft:rgba(79,216,234,.13); --acc-line:rgba(79,216,234,.42); }
.def.accent-violet{ --acc:#9B85FF;      --acc-soft:rgba(124,92,250,.15); --acc-line:rgba(124,92,250,.45); }
.def.accent-hyper { --acc:var(--hyper); --acc-soft:rgba(255,79,216,.12); --acc-line:rgba(255,79,216,.42); }

.conceptual-tag{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--mono);
  font-size:8px; letter-spacing:1.8px; color:var(--fog);
  border:1px solid var(--line2); border-radius:12px; padding:4px 10px;
}
.conceptual-tag::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--line3); }

/* ============================================================
   HERO — SECURITY OPERATIONS COMMAND CENTRE
   Sources feed telemetry inward to the organization, which
   passes it to detect → investigate → respond.
   ============================================================ */
.soc-hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:var(--s6); align-items:center; }
.soc-stage{ position:relative; width:100%; max-width:500px; margin:0 auto; }
.soc-svg{ width:100%; height:auto; overflow:visible; }

.soc-ring{ fill:none; stroke:var(--line2); stroke-width:1; }
.soc-ring.dashed{ stroke:var(--line); stroke-dasharray:3 8; }
.soc-spoke{ stroke:rgba(140,165,225,.28); stroke-width:1; }
.soc-core{ fill:url(#defCore); stroke:rgba(79,216,234,.5); stroke-width:1.2; }
.soc-src{ fill:var(--panel2); stroke:var(--line2); stroke-width:1; }
.soc-src-dot{ fill:var(--cyan); opacity:.8; }

/* telemetry travelling inward — the signature defensive motion */
.soc-signal{
  fill:var(--cyan);
  filter:drop-shadow(0 0 5px rgba(79,216,234,.85));
  offset-rotate:0deg;
  animation:socTravel 3.6s linear infinite;
  animation-delay:var(--d,0s);
}
@keyframes socTravel{
  0%{ offset-distance:0%; opacity:0; }
  12%{ opacity:1; }
  88%{ opacity:1; }
  100%{ offset-distance:100%; opacity:0; }
}
/* Fallback for engines without offset-path: fade the dots rather
   than leaving them stacked at the origin. */
@supports not (offset-path: path('M0 0L1 1')){
  .soc-signal{ animation:socPulse 2.4s ease-in-out infinite; }
  @keyframes socPulse{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }
}

.soc-src-label{
  position:absolute; transform:translate(-50%,-50%);
  font-family:var(--mono); font-size:8px; letter-spacing:1.3px; color:var(--ice);
  background:rgba(4,6,12,.88); border:1px solid var(--line2); border-radius:11px;
  padding:4px 8px; white-space:nowrap; pointer-events:none;
}
.soc-core-label{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  text-align:center; pointer-events:none; width:120px;
}
.soc-core-label span{ display:block; font-family:var(--mono); font-size:7.5px; letter-spacing:2px; color:var(--fog); }
.soc-core-label b{ display:block; font-family:var(--display); font-size:12px; font-weight:700; color:var(--white); line-height:1.25; }

/* the three-stage outcome rail under the diagram */
.soc-out{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:var(--s4); flex-wrap:wrap; }
.soc-out span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:1.6px; padding:8px 15px;
  border-radius:18px; border:1px solid var(--line2); color:var(--ice); background:var(--deep);
  transition:border-color .4s var(--ease), color .4s, box-shadow .4s;
}
.soc-out span.lit{ border-color:var(--acc); color:var(--white); box-shadow:0 0 16px var(--acc-soft); }
.soc-out i{ color:var(--fog); font-style:normal; }

@media (max-width:1000px){
  .soc-hero-grid{ grid-template-columns:1fr; gap:var(--s5); }
  .soc-stage{ max-width:400px; order:-1; }
}
@media (max-width:420px){
  .soc-stage{ max-width:300px; }
  .soc-src-label{ font-size:7px; padding:3px 6px; letter-spacing:.9px; }
}

/* ============================================================
   LIFECYCLE RING — defence as a continuous loop
   The offensive pages have no circular component; this is the
   clearest structural signal that defence does not terminate.
   ============================================================ */
.cycle-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:center; }
.cycle-stage{ position:relative; width:100%; max-width:420px; aspect-ratio:1/1; margin:0 auto; }
.cycle-svg{ width:100%; height:100%; overflow:visible; }
.cycle-track{ fill:none; stroke:var(--line2); stroke-width:1.5; }
.cycle-run{
  fill:none; stroke:var(--cyan); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:60 880; filter:drop-shadow(0 0 6px rgba(79,216,234,.6));
  animation:cycleRun 14s linear infinite;
}
@keyframes cycleRun{ to{ stroke-dashoffset:-940; } }
.cycle-node{ fill:var(--void); stroke:var(--line3); stroke-width:1.2; transition:stroke .4s, fill .4s; }
.cycle-node.lit{ stroke:var(--cyan); fill:var(--cyan); }
.cycle-label{
  position:absolute; transform:translate(-50%,-50%);
  font-family:var(--mono); font-size:8.5px; letter-spacing:1.4px; color:var(--fog);
  white-space:nowrap; pointer-events:none; transition:color .4s;
}
.cycle-label.lit{ color:var(--white); }
.cycle-centre{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:118px; height:118px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; text-align:center; padding:10px;
  background:radial-gradient(circle at 35% 30%, rgba(79,216,234,.22), rgba(8,12,24,.95) 70%);
  border:1px solid var(--line2);
}
.cycle-centre span{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.5px; color:var(--ice); line-height:1.7; }
@media (max-width:900px){ .cycle-wrap{ grid-template-columns:1fr; gap:var(--s5); } .cycle-stage{ max-width:320px; } }
@media (max-width:400px){ .cycle-label{ font-size:7.5px; letter-spacing:1px; } .cycle-centre{ width:96px; height:96px; } }

/* ============================================================
   3D TELEMETRY STACK — scroll-driven depth
   Source layers sit in real 3D space and rotate toward the
   viewer as the section is scrolled, resolving into the
   detection surface at the front. Transform-only, so it stays
   on the compositor.
   ============================================================ */
.stack3d{
  perspective:1400px; perspective-origin:50% 42%; padding:var(--s6) 0;
  /* the inner block is rotated in 3D, so its bounding box is wider than the
     column; clip it here rather than letting it push the page */
  overflow:hidden;
}
.stack3d-inner{
  position:relative; transform-style:preserve-3d; height:330px;
  transform:rotateX(var(--rx,58deg)) rotateZ(var(--rz,-24deg));
  transition:transform .18s linear;
}
.plane{
  position:absolute; left:50%; top:50%; width:min(430px,72vw); height:190px;
  /* max() not min(): both operands are negative, and min() would always pick
     -215px, leaving the plane off-centre and overflowing on small screens */
  margin:-95px 0 0 max(-215px,-36vw);
  border:1px solid var(--line2); border-radius:var(--r-md);
  background:linear-gradient(150deg, rgba(13,20,36,.86), rgba(6,9,17,.7));
  transform:translateZ(var(--z,0px));
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:13px 16px; box-shadow:0 20px 60px rgba(0,0,0,.5);
  transition:border-color .5s, box-shadow .5s;
}
.plane::before{ /* faint grid so the planes read as surfaces, not cards */
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(140,165,225,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140,165,225,.07) 1px, transparent 1px);
  background-size:26px 26px;
}
.plane.lit{ border-color:var(--acc-line); box-shadow:0 20px 70px rgba(79,216,234,.14); }
.plane-k{ font-family:var(--mono); font-size:9px; letter-spacing:1.8px; color:var(--ice); position:relative; }
.plane-n{ font-family:var(--mono); font-size:8px; letter-spacing:1.2px; color:var(--fog); position:relative; }
.plane.detect{
  background:linear-gradient(150deg, rgba(79,216,234,.12), rgba(6,9,17,.86));
  border-color:rgba(79,216,234,.42);
}
.plane.detect .plane-k{ color:var(--cyan); }
.stack3d-cap{ text-align:center; font-family:var(--mono); font-size:9px; letter-spacing:1.7px; color:var(--fog); margin-top:var(--s4); }

@media (max-width:640px){
  .stack3d{ perspective:900px; }
  .stack3d-inner{ height:260px; }
  .plane{ height:150px; margin-top:-75px; padding:11px 13px; }
}
/* A rotated 3D stack is exactly the kind of motion that causes
   trouble; flatten it to a legible list instead of disabling it. */
@media (prefers-reduced-motion:reduce){
  .stack3d{ perspective:none; }
  .stack3d-inner{ transform:none !important; height:auto; display:flex; flex-direction:column; gap:8px; }
  .plane{ position:relative; left:auto; top:auto; margin:0; width:100%; height:auto; transform:none !important; box-shadow:none; }
  .cycle-run{ animation:none; stroke-dasharray:none; opacity:.5; }
  .soc-signal{ animation:none; opacity:.6; }
}

/* ============================================================
   TELEMETRY ARCHITECTURE — sources → operations → pipeline
   ============================================================ */
.tele{ border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5) var(--s4);
  background:linear-gradient(180deg, rgba(13,20,36,.55), rgba(6,9,17,.55)); }
.tele-sources{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.tele-src{
  font-family:var(--mono); font-size:9px; letter-spacing:1.3px; color:var(--ice);
  border:1px solid var(--line); border-radius:11px; padding:12px 10px; text-align:center;
  background:var(--deep); transition:border-color .45s var(--ease), color .45s, transform .45s var(--ease);
}
.tele-src.lit{ border-color:var(--acc-line); color:var(--white); transform:translateY(-3px); }
.tele-join{ display:flex; align-items:center; justify-content:center; gap:12px; padding:var(--s4) 0; }
.tele-join .ln{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line3),transparent); }
.tele-join b{
  font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--acc); font-weight:500;
  border:1px dashed var(--acc-line); border-radius:16px; padding:7px 15px; white-space:nowrap;
}
.tele-pipe{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.tele-pipe span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:1.4px; padding:9px 15px;
  border-radius:18px; border:1px solid var(--line); color:var(--fog); background:var(--panel2);
  transition:border-color .45s, color .45s, box-shadow .45s;
}
.tele-pipe span.lit{ border-color:var(--acc); color:var(--white); box-shadow:0 0 14px var(--acc-soft); }
.tele-pipe i{ color:var(--line3); font-style:normal; align-self:center; }
@media (max-width:760px){ .tele-sources{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:380px){ .tele-sources{ grid-template-columns:1fr; } }

/* ============================================================
   DATA STREAM  (port of 21st.dev @thegridcn/data-stream)
   Timestamped entries revealed one at a time with type-coloured
   dots. The original reveals on mount; this waits until the
   panel is on screen and stops when it leaves, so an off-screen
   section is never animating.
   ============================================================ */
.stream{
  position:relative; border:1px solid var(--line2); border-radius:var(--r-md);
  background:rgba(13,20,36,.8); overflow:hidden;
}
.stream::after{ /* scanline wash, as in the original */
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.14) 2px 4px);
}
.stream-hd{ display:flex; align-items:center; gap:9px; padding:11px 15px; border-bottom:1px solid var(--line); background:var(--panel2); }
.stream-hd .dot{ width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 6px var(--ok); animation:pulse 1.8s infinite; }
.stream-hd .lbl{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.8px; color:var(--ice); }
.stream-hd .cnt{ margin-left:auto; font-family:var(--mono); font-size:9px; color:var(--fog); }
.stream-body{ font-family:var(--mono); font-size:11px; }
.stream-row{
  display:flex; align-items:flex-start; gap:10px; padding:9px 15px;
  border-bottom:1px solid rgba(140,165,225,.07); opacity:0;
}
.stream-row.in{ animation:streamIn .3s var(--ease) forwards; }
@keyframes streamIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.stream-row .sd{ width:5px; height:5px; border-radius:50%; margin-top:6px; flex:none; }
.stream-row .st{ color:var(--fog); flex:none; }
.stream-row .sx{ line-height:1.55; }
.sd-info{ background:var(--cyan); } .st-info + .sx{ color:var(--ice); }
.sd-ok{ background:var(--ok); }     .sx.ok{ color:var(--ok); }
.sd-warn{ background:var(--warn); } .sx.warn{ color:var(--warn); }
.sd-crit{ background:var(--crit); } .sx.crit{ color:var(--crit); }
.stream-foot{ padding:10px 15px; border-top:1px solid var(--line); }
@media (max-width:520px){
  .stream-row{ flex-wrap:wrap; gap:7px; font-size:10px; }
  .stream-row .sx{ flex:1 1 100%; padding-left:15px; }
}

/* ============================================================
   SIGNAL-TO-NOISE FUNNEL
   ============================================================ */
.funnel{ display:flex; flex-direction:column; align-items:center; gap:0; }
.funnel-row{
  width:100%; max-width:var(--w,100%); border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--deep); padding:15px 20px; text-align:center;
  transition:border-color .45s var(--ease), background .45s, max-width .6s var(--ease);
}
.funnel-row.lit{ border-color:var(--acc-line); background:var(--panel); }
.funnel-k{ font-family:var(--mono); font-size:10px; letter-spacing:1.8px; color:var(--acc); }
.funnel-d{ font-size:11.5px; color:var(--fog); margin-top:5px; }
.funnel-sep{ width:1px; height:20px; background:var(--line3); }
@media (max-width:560px){ .funnel-row{ max-width:100% !important; } }

/* ============================================================
   DETECT vs RESPOND split
   ============================================================ */
.dr-split{ display:grid; grid-template-columns:1fr auto 1fr; gap:var(--s4); align-items:center; }
.dr-side{ border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5) var(--s4); background:var(--deep); }
.dr-side.respond{ border-color:rgba(124,92,250,.3); background:linear-gradient(160deg, rgba(124,92,250,.07), rgba(8,12,24,.7)); }
.dr-k{ font-family:var(--hud); font-size:22px; font-weight:900; letter-spacing:1px; color:var(--cyan); }
.dr-side.respond .dr-k{ color:#B79CFF; }
.dr-q{ font-family:var(--display); font-size:16px; font-weight:600; margin:11px 0 9px; }
.dr-side p{ font-size:12.8px; color:var(--fog); line-height:1.6; }
.dr-bridge{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.dr-bridge span{
  font-family:var(--mono); font-size:8.5px; letter-spacing:1.5px; color:var(--fog);
  border:1px solid var(--line2); border-radius:14px; padding:6px 12px; white-space:nowrap;
  transition:border-color .4s, color .4s;
}
.dr-bridge span.lit{ border-color:var(--cyan); color:var(--white); }
.dr-bridge i{ color:var(--line3); font-style:normal; font-size:10px; }
@media (max-width:900px){ .dr-split{ grid-template-columns:1fr; } .dr-bridge{ flex-direction:row; flex-wrap:wrap; justify-content:center; } }

/* ============================================================
   THREAT LIFECYCLE — stages with defensive opportunities
   ============================================================ */
.tl{ display:flex; gap:0; align-items:stretch; }
.tl-stage{ flex:1 1 0; min-width:0; position:relative; text-align:center; }
.tl-bar{
  height:5px; background:var(--panel2); border:1px solid var(--line); border-right:0;
  transition:background .45s, border-color .45s;
}
.tl-stage:last-child .tl-bar{ border-right:1px solid var(--line); }
.tl-stage.lit .tl-bar{ background:var(--acc); border-color:var(--acc); }
.tl-k{ display:block; font-family:var(--mono); font-size:8px; letter-spacing:1.1px; color:var(--fog); margin-top:11px; padding:0 3px; }
.tl-stage.lit .tl-k{ color:var(--ice); }
.tl-op{
  display:inline-block; margin-top:9px; font-family:var(--mono); font-size:7.5px; letter-spacing:1.2px;
  color:var(--ok); border:1px solid rgba(63,224,176,.34); border-radius:10px; padding:3px 7px;
}
.tl-op.respond{ color:var(--hyper); border-color:rgba(255,79,216,.4); }
@media (max-width:820px){
  .tl{ flex-direction:column; gap:7px; }
  .tl-stage{ display:flex; align-items:center; gap:12px; text-align:left; }
  .tl-bar{ width:4px; height:auto; align-self:stretch; min-height:38px; border-right:1px solid var(--line); border-bottom:0; flex:none; }
  .tl-k{ margin-top:0; flex:1; font-size:9px; }
  .tl-op{ margin-top:0; flex:none; }
}

/* ============================================================
   INCIDENT STATUS RAIL
   ============================================================ */
.status-rail{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.status-chip{
  position:relative; font-family:var(--mono); font-size:9.5px; letter-spacing:1.5px;
  padding:10px 17px; border-radius:20px; border:1px solid var(--line2);
  color:var(--fog); background:var(--deep); min-height:44px; display:inline-flex; align-items:center; gap:9px;
  transition:border-color .4s, color .4s, background .4s;
}
.status-chip::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--line3); transition:background .4s, box-shadow .4s; }
.status-chip.on{ border-color:var(--hyper); color:var(--white); background:rgba(255,79,216,.08); }
.status-chip.on::before{ background:var(--hyper); box-shadow:0 0 9px var(--hyper); }
.status-chip.done{ border-color:rgba(63,224,176,.4); color:var(--ice); }
.status-chip.done::before{ background:var(--ok); }
.status-note{ font-family:var(--mono); font-size:9px; letter-spacing:1.4px; color:var(--fog); margin-top:var(--s3); }

/* ============================================================
   24-HOUR MONITORING TIMELINE
   ============================================================ */
.clock24{ border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5) var(--s4); background:var(--deep); }
.clock-track{ position:relative; height:78px; border-bottom:1px solid var(--line2); }
.clock-hour{ position:absolute; bottom:0; width:1px; height:9px; background:var(--line2); }
.clock-hour span{
  position:absolute; bottom:-24px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:8px; letter-spacing:1.1px; color:var(--fog);
}
.clock-sig{
  position:absolute; width:5px; height:5px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 7px rgba(79,216,234,.8); opacity:0;
  animation:sigDrop 3.4s ease-in infinite; animation-delay:var(--d,0s);
}
@keyframes sigDrop{ 0%{ opacity:0; transform:translateY(-14px); } 18%{ opacity:1; } 78%{ opacity:1; transform:translateY(58px); } 100%{ opacity:0; transform:translateY(66px); } }
.clock-legend{ display:flex; justify-content:space-between; margin-top:34px; flex-wrap:wrap; gap:12px; }
@media (prefers-reduced-motion:reduce){ .clock-sig{ animation:none; opacity:.55; } }
@media (max-width:520px){ .clock-hour span{ font-size:7px; } }

/* ============================================================
   CONCEPTUAL DETECTION PANEL (MDR)
   ============================================================ */
.panel{ border:1px solid var(--line2); border-radius:var(--r-md); overflow:hidden; background:var(--panel); }
.panel-hd{ display:flex; align-items:center; gap:9px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--panel2); }
.panel-hd .lbl{ font-family:var(--mono); font-size:10px; letter-spacing:1.6px; color:var(--fog); }
.panel-grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.panel-cell{ padding:17px 16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.panel-cell:nth-child(3n){ border-right:0; }
.panel-cl{ font-family:var(--mono); font-size:8px; letter-spacing:1.4px; color:var(--fog); margin-bottom:8px; }
.panel-cv{ font-family:var(--hud); font-size:15px; font-weight:700; color:var(--ice); letter-spacing:.5px; }
.panel-cv.acc{ color:var(--acc); }
.panel-bar{ height:3px; border-radius:2px; background:var(--panel2); margin-top:10px; overflow:hidden; }
.panel-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--cyan),var(--violet)); transition:width 1.1s var(--ease); }
.panel-foot{ padding:11px 16px; }
@media (max-width:640px){ .panel-grid{ grid-template-columns:1fr 1fr; } .panel-cell:nth-child(3n){ border-right:1px solid var(--line); } .panel-cell:nth-child(2n){ border-right:0; } }

/* ============================================================
   USE-CASE / SCENARIO CARDS
   ============================================================ */
.case-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.case-card{ display:flex; gap:15px; align-items:flex-start; padding:22px 20px; }
.case-n{ font-family:var(--hud); font-size:12px; font-weight:700; color:var(--acc); flex:none; padding-top:2px; }
.case-t{ font-family:var(--display); font-size:14.5px; font-weight:600; margin-bottom:5px; }
.case-d{ font-size:12.5px; color:var(--fog); line-height:1.55; }
@media (max-width:700px){ .case-grid{ grid-template-columns:1fr; } }

/* six-card capability grid on the overview */
.cap6-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cap6{ display:flex; flex-direction:column; gap:9px; padding:26px 24px; --spot-color:var(--acc-soft); position:relative; }
.cap6-n{ font-family:var(--hud); font-size:11px; font-weight:700; letter-spacing:1.4px; color:var(--acc); }
.cap6-ic{ color:var(--acc); display:flex; margin:4px 0 2px; }
.cap6-t{ font-family:var(--display); font-size:16.5px; font-weight:600; line-height:1.28; }
.cap6-s{ font-family:var(--mono); font-size:9px; letter-spacing:1.5px; color:var(--ice); }
.cap6-d{ font-size:12.5px; color:var(--fog); line-height:1.55; }
.cap6-list{ display:flex; flex-wrap:wrap; gap:5px; margin-top:2px; }
.cap6-list span{ font-family:var(--mono); font-size:8px; letter-spacing:.9px; padding:4px 9px; border-radius:11px; border:1px solid var(--line2); color:var(--ice); }
.cap6-go{ margin-top:auto; padding-top:15px; font-family:var(--mono); font-size:9.5px; letter-spacing:1.4px; color:var(--acc); }
@media (max-width:1000px){ .cap6-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .cap6-grid{ grid-template-columns:1fr; } }