/* CyberSOC pages (cybersoc.html and cybersoc-know-more.html).
   Loaded after tacit-reading.css. */
/* ============== CyberSOC page ============== */
body.page-cybersoc{
  --text-dim:#6e624c;            /* darker than the shared token so small labels pass AA */
  --card:#fbf6ea;
  --card-edge:#e2d6b6;
  --ink-olive:#5f5a22;
  --olive-wash:rgba(95,90,34,.12);
  --shadow-card:inset 0 1px 0 rgba(255,255,255,.7), 0 18px 48px rgba(48,42,28,.08);
}
.page-cybersoc [hidden]{ display:none !important; }
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.cs-prose{ max-width:68ch; }
.cs-prose > .t12:last-child, .cs-prose > .t10:last-child{ margin-bottom:0; }
.cs .section-title{ max-width:30ch; }
.cs .section-num{ font-weight:600; }
.cs .section-num b{ font-weight:600; color:var(--accent); margin-right:2px; }
.cs sup.fn{ font-size:.66em; line-height:0; margin-left:1px; }
.cs sup.fn a{
  font-family:"IBM Plex Mono",monospace; font-weight:500;
  color:var(--accent); text-decoration:none; padding:0 1px; border-radius:3px;
}
.cs sup.fn a:hover{ background:var(--accent-soft); }
.cs sup.fn a:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.cs a.inline{ color:var(--text); text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:3px; }
.cs a.inline:hover{ color:var(--accent); text-decoration-color:var(--accent); }
.cs a.inline:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }
.cs-kv{ font-weight:600; color:var(--text); }

/* Buttons */
.cs-btn, .cs-btn-ghost{
  display:inline-flex; align-items:center; gap:10px;
  border-radius:999px; text-decoration:none;
  font:500 14px/1.2 "Inter",system-ui,sans-serif;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.cs-btn{
  padding:14px 22px;
  background:var(--cta-bg); color:var(--cta-fg);
  box-shadow:0 0 32px rgba(168,50,70,.16);
}
.cs-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 36px rgba(168,50,70,.26); }
.cs-btn-ghost{
  padding:13px 20px;
  border:1px solid var(--border-strong);
  background:rgba(255,255,255,.28); color:var(--text);
}
.cs-btn-ghost:hover{ background:rgba(255,255,255,.6); }
.cs-btn:focus-visible, .cs-btn-ghost:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.cs-btn svg{ flex:0 0 auto; }

/* Trust strip */
.cs-trust{
  list-style:none; padding:0; margin:26px 0 0;
  display:flex; flex-wrap:wrap; row-gap:8px;
  font:500 11.5px/1.4 "IBM Plex Mono",monospace; letter-spacing:.01em;
  color:var(--text-muted);
}
.cs-trust li{ display:inline-flex; align-items:center; }
.cs-trust li + li::before{ content:""; width:4px; height:4px; border-radius:999px; background:var(--border-strong); margin:0 12px; }
.cs-hero .cs-trust{ display:grid; grid-template-columns:repeat(2,minmax(0,max-content)); column-gap:24px; row-gap:9px; }
.cs-hero .cs-trust li{ align-items:baseline; }
.cs-hero .cs-trust li::before,
.cs-hero .cs-trust li + li::before{ content:""; display:inline-block; width:5px; height:5px; border-radius:999px; background:var(--ink-olive); margin:0 9px 0 0; flex:0 0 auto; }

/* ============== 1 · Hero ============== */
.cs-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);
  align-items:center;
  padding-bottom:clamp(56px,9vh,104px);
}
.cs-eyebrow{
  display:flex; align-items:center; gap:10px;
  margin:0 0 22px;
  font:500 11px/1.4 "IBM Plex Mono",monospace; letter-spacing:.12em;
  color:var(--text-muted);
}
.cs-eyebrow::before{
  content:""; width:6px; height:6px; border-radius:999px; flex:0 0 auto;
  background:var(--accent); box-shadow:0 0 12px var(--accent-glow);
}
.cs-h1{
  font-family:"Newsreader",Georgia,serif; font-weight:500;
  font-size:clamp(38px,4.6vw,64px); line-height:1.03; letter-spacing:-.022em;
  margin:0 0 22px; max-width:15ch; text-wrap:balance;
}
.cs-deck{
  font-size:clamp(16.5px,1.3vw,19px); line-height:1.55;
  color:var(--text-muted); max-width:46ch; margin:0 0 30px;
}
.cs-ctas{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* Autonomy map card (hero + og image) */
.cs-map{
  margin:0;
  background:var(--card);
  border:1px solid var(--card-edge);
  border-radius:18px;
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.cs-map-head{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding:16px 20px;
  border-bottom:1px solid var(--card-edge);
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));
}
.cs-map-title{ font:600 11px/1 "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--text); }
.cs-synth{
  font:500 10.5px/1 "IBM Plex Mono",monospace; letter-spacing:.04em;
  color:var(--text-muted);
  padding:6px 9px; border:1px dashed var(--border-strong); border-radius:999px;
  white-space:nowrap;
}
.cs-map-table{ width:100%; border-collapse:collapse; }
.cs-map-table thead tr{
  display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:16px;
  padding:12px 20px 4px;
}
.cs-map-table thead th{
  font:500 10px/1 "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-dim); text-align:left; padding:0;
}
.cs-map-table thead th:nth-child(2){ text-align:right; }
.cs-map-table tbody tr{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  column-gap:16px; row-gap:6px; align-items:center;
  padding:15px 20px;
  border-top:1px solid var(--card-edge);
}
.cs-map-table thead + tbody tr:first-child{ border-top:0; }
.cs-map-table th[scope="row"]{
  text-align:left; padding:0;
  font:600 14.5px/1.3 "Inter",system-ui,sans-serif; color:var(--text);
}
.cs-map-table td{ padding:0; }
.cs-map-table td.call-cell{ text-align:right; }
.cs-map-table td.why{ grid-column:1 / -1; font-size:13.5px; line-height:1.45; color:var(--text-muted); }

.call{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 11px 6px 9px; border-radius:999px;
  font:500 12.5px/1.25 "Inter",system-ui,sans-serif; color:var(--text);
  white-space:nowrap; text-align:left;
}
.call .lvl{ display:inline-flex; gap:2px; flex:0 0 auto; }
.call .lvl i{ width:4px; height:11px; border-radius:2px; border:1px solid var(--ink-olive); background:transparent; }
.call--3{ background:rgba(95,90,34,.16); }
.call--3 .lvl i{ background:var(--ink-olive); }
.call--2{ background:rgba(95,90,34,.09); }
.call--2 .lvl i:nth-child(-n+2){ background:var(--ink-olive); }
.call--1{ background:rgba(90,77,58,.07); }
.call--1 .lvl i:first-child{ background:var(--ink-olive); }
.call--0{ background:transparent; box-shadow:inset 0 0 0 1px var(--border-strong); color:var(--text-muted); }
.call--0 .lvl i{ border-color:var(--text-dim); }

/* ============== 2 · Problem ============== */
.cs-turn{ font-weight:500; }
.cs-stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px; margin-top:clamp(36px,5vh,52px);
}
.cs-stats-cap{
  grid-column:1 / span 2; margin:0;
  font:500 11px/1.4 "IBM Plex Mono",monospace; letter-spacing:.04em; color:var(--text-muted);
  padding-bottom:10px; border-bottom:1px solid var(--border-strong);
  position:relative;
}
.cs-stats-cap::before, .cs-stats-cap::after{
  content:""; position:absolute; bottom:-1px; width:1px; height:8px; background:var(--border-strong);
}
.cs-stats-cap::before{ left:0; }
.cs-stats-cap::after{ right:0; }
.cs-stat{
  grid-row:2;
  background:var(--card); border:1px solid var(--card-edge); border-radius:16px;
  padding:clamp(22px,2.4vw,30px);
  box-shadow:var(--shadow-card);
}
.cs-stat .n{
  margin:0 0 14px;
  font-family:"Newsreader",Georgia,serif; font-weight:500;
  font-size:clamp(44px,5vw,64px); line-height:1; letter-spacing:-.03em;
  color:var(--text); font-variant-numeric:tabular-nums;
}
.cs-stat .n .vs{ font-size:.42em; letter-spacing:0; color:var(--text-muted); font-style:italic; }
.cs-stat .n .second{ font-size:.62em; color:var(--text-muted); }
.cs-stat .l{ margin:0; font-size:15px; line-height:1.55; color:var(--text); }
.cs-under{ margin-top:clamp(28px,4vh,40px); max-width:68ch; }
.cs-fair{ max-width:62ch; }

/* ============== 3 · First principles ============== */
.cs-chain{
  list-style:none; margin:clamp(28px,4vh,44px) 0 clamp(40px,6vh,64px); padding:0;
  position:relative;
}
.cs-chain::before{
  content:""; position:absolute; left:6px; top:22px; bottom:28px; width:1px;
  background:linear-gradient(180deg, var(--border-strong), var(--accent));
}
.cs-chain li{
  position:relative;
  padding:clamp(10px,1.4vh,16px) 0 clamp(10px,1.4vh,16px) clamp(34px,4vw,48px);
  font-family:"Newsreader",Georgia,serif; font-weight:400;
  font-size:clamp(22px,2.6vw,34px); line-height:1.22; letter-spacing:-.012em;
  color:var(--text); max-width:34ch; text-wrap:balance;
}
.cs-chain li::before{
  content:""; position:absolute; left:2px; top:calc(clamp(10px,1.4vh,16px) + .5em);
  width:9px; height:9px; border-radius:999px;
  background:var(--bg); border:1px solid var(--border-strong);
}
.cs-chain li:last-child{ font-style:italic; color:var(--accent); }
.cs-chain li:last-child::before{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 14px var(--accent-glow); }

/* ============== 4 · Agreement ============== */
.cs-duo{
  display:grid; grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
  gap:clamp(28px,4vw,64px);
  margin:clamp(32px,5vh,52px) 0;
  padding:clamp(28px,4vh,40px) 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.cs-duo-rule{ background:var(--border-strong); }
.cs-duo .n{
  margin:0 0 14px;
  font-family:"Newsreader",Georgia,serif; font-weight:500;
  font-size:clamp(56px,7vw,96px); line-height:.95; letter-spacing:-.035em;
  color:var(--text); font-variant-numeric:tabular-nums;
}
.cs-duo .l{ margin:0; font-size:15px; line-height:1.6; color:var(--text-muted); max-width:44ch; }

/* ============== 5 · Six questions ============== */
.cs-qgrid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px; margin-top:clamp(32px,5vh,48px);
}
.cs-q{
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--card-edge); border-radius:16px;
  padding:clamp(22px,2.2vw,28px);
}
.cs-q--edge{
  background:linear-gradient(180deg, rgba(168,50,70,.05), rgba(168,50,70,0) 60%), var(--card);
  border-color:rgba(168,50,70,.35);
  box-shadow:var(--shadow-card);
}
.cs-q-num{ font:500 11px/1 "IBM Plex Mono",monospace; letter-spacing:.12em; color:var(--text-dim); margin-bottom:16px; }
.cs-q--edge .cs-q-num{ color:var(--accent); }
.cs-q-h{
  font-family:"Newsreader",Georgia,serif; font-weight:500;
  font-size:clamp(22px,2vw,27px); line-height:1.15; letter-spacing:-.012em;
  margin:0 0 14px; color:var(--text);
}
.cs-q-body{ font-size:14.5px; line-height:1.6; color:var(--text); margin:4px 0 16px; }
.cs-q-body p{ margin:0 0 .8em; }
.cs-q-body p:last-child{ margin-bottom:0; }
.cs-q-body ul{ margin:0 0 .8em; padding-left:1.1em; }
.cs-q-body li{ margin:.2em 0; }
.cs-q-body li::marker{ color:var(--text-dim); }
.cs-get{ margin:auto 0 0; padding-top:14px; border-top:1px solid var(--card-edge); font-size:14px; line-height:1.55; color:var(--text-muted); }
.cs-get strong{ color:var(--text); font-weight:600; }
.cs-more{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:6px;
  margin:0 0 16px; padding:6px 11px;
  border:1px solid var(--border); border-radius:999px; background:transparent;
  font:500 11px/1 "IBM Plex Mono",monospace; letter-spacing:.06em; color:var(--text-muted);
  cursor:pointer;
}
.cs-more:hover{ border-color:var(--border-strong); color:var(--text); }
.cs-more:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.cs-more svg, .cs-faq-q svg{ transition:transform .2s ease; }
.cs-more[aria-expanded="true"] svg, .cs-faq-q[aria-expanded="true"] svg{ transform:rotate(180deg); }
.cs-more .when-open{ display:none; }
.cs-more[aria-expanded="true"] .when-open{ display:inline; }
.cs-more[aria-expanded="true"] .when-closed{ display:none; }
.cs-q.row-open{ align-self:start; }
.cs-after{ margin-top:clamp(28px,4vh,40px); max-width:68ch; }

/* Shared bullet list */
.cs-list{ margin:0 0 1.1em; padding-left:1.15em; font-size:15px; line-height:1.6; }
.cs-list li{ margin:.35em 0; }
.cs-list li::marker{ color:var(--accent); }

/* ============== 6 · Reporting clocks ============== */
.cs-clock{
  margin:clamp(32px,5vh,48px) 0 0;
  padding:clamp(24px,3vw,36px) clamp(24px,4vw,48px) clamp(20px,3vw,28px);
  background:var(--card); border:1px solid var(--card-edge); border-radius:18px;
  box-shadow:var(--shadow-card);
}
.cs-clock-track{ position:relative; height:96px; }
.cs-clock-axis{ position:absolute; left:0; right:0; top:62px; height:2px; background:var(--border-strong); border-radius:2px; }
.cs-clock-axis::after{
  content:""; position:absolute; left:0; top:0; height:2px; width:100%;
  background:linear-gradient(90deg, var(--accent), rgba(168,50,70,.15));
  border-radius:2px;
}
.cs-clock-tick{ position:absolute; top:58px; width:1px; height:10px; background:var(--border-strong); transform:translateX(-.5px); }
.cs-clock-tick span{
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  font:500 10.5px/1 "IBM Plex Mono",monospace; color:var(--text-dim); white-space:nowrap;
}
.cs-clock-mark{ position:absolute; top:0; transform:translateX(-50%); text-align:center; width:max-content; }
.cs-clock-mark .t{ display:block; font:500 26px/1 "Newsreader",Georgia,serif; letter-spacing:-.01em; color:var(--text); }
.cs-clock-mark .who{ display:block; margin-top:6px; font:500 11px/1.25 "IBM Plex Mono",monospace; letter-spacing:.04em; color:var(--text-muted); }
.cs-clock-mark .dot{
  position:absolute; left:50%; top:56px; transform:translateX(-50%);
  width:14px; height:14px; border-radius:999px;
  background:var(--bg); border:2px solid var(--accent);
}
.cs-clock-mark.end{ transform:translateX(-100%); text-align:right; }
.cs-clock-mark.end .dot{ left:auto; right:-7px; transform:none; }
.cs-clock-note{ margin:24px 0 0; font-size:12.5px; line-height:1.5; color:var(--text-muted); }

/* ============== 7 · How it works ============== */
.cs-sub{ font-size:clamp(16px,1.3vw,18px); line-height:1.5; color:var(--text-muted); margin:-6px 0 0; max-width:56ch; }
.cs-steps{
  list-style:none; padding:0; margin:clamp(32px,5vh,48px) 0 0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,2.4vw,32px);
}
.cs-steps li{ border-top:2px solid var(--text); padding-top:18px; }
.cs-step-n{ display:block; font:500 11px/1 "IBM Plex Mono",monospace; letter-spacing:.12em; color:var(--accent); margin-bottom:14px; }
.cs-steps h3{
  font-family:"Newsreader",Georgia,serif; font-weight:500;
  font-size:21px; line-height:1.2; letter-spacing:-.01em; margin:0 0 10px;
}
.cs-steps p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--text); }
.cs-steps p + p{ margin-top:.7em; color:var(--text-muted); font-size:13.5px; }
.cs-weeks{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center;
  margin:clamp(28px,4vh,40px) 0 clamp(28px,4vh,40px);
  font:500 11px/1 "IBM Plex Mono",monospace; letter-spacing:.06em; color:var(--text-muted);
}
.cs-weeks-bar{ display:grid; grid-template-columns:minmax(max-content,1fr) 5fr; height:28px; border-radius:999px; overflow:hidden; border:1px solid var(--card-edge); }
.cs-weeks-bar span{ display:flex; align-items:center; padding:0 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:10.5px; color:var(--text); }
.cs-weeks-bar span:first-child{ background:rgba(95,90,34,.14); }
.cs-weeks-bar span:last-child{
  background:repeating-linear-gradient(90deg, rgba(168,50,70,.07) 0 calc(20% - 1px), rgba(168,50,70,.22) calc(20% - 1px) 20%);
}
.cs-weeks .end{ color:var(--text); }
.cs-weeks-bar .wk-lbl{ font-weight:inherit; background:#f4e7dc; padding:2px 7px; margin-left:-7px; border-radius:999px; }

/* ============== 8 · Moments ============== */
.cs-tabs{
  display:flex; gap:4px; padding:4px; margin:24px 0 0;
  border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.3);
}
.cs-tabs button{
  flex:1 1 0; padding:10px 12px; border:0; border-radius:999px; background:transparent; cursor:pointer;
  font:500 13px/1 "Inter",system-ui,sans-serif; color:var(--text-muted);
}
.cs-tabs button[aria-selected="true"]{ background:var(--text); color:var(--bg); }
.cs-tabs button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.cs-moments{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,28px);
  margin-top:clamp(28px,4vh,40px);
}
.cs-group-h{
  margin:0 0 14px; padding-bottom:12px; border-bottom:2px solid var(--text);
  font:600 12px/1 "IBM Plex Mono",monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--text);
}
.cs-group:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; border-radius:6px; }
.cs-moment{
  background:var(--card); border:1px solid var(--card-edge); border-radius:14px;
  padding:20px 20px 18px; margin-bottom:12px;
}
.cs-moment h3{
  margin:0 0 12px;
  font-family:"Newsreader",Georgia,serif; font-weight:500;
  font-size:19px; line-height:1.25; letter-spacing:-.006em; color:var(--text);
}
.cs-moment h3 .n{ font:500 11px/1 "IBM Plex Mono",monospace; color:var(--accent); margin-right:3px; vertical-align:3px; }
.cs-moment p{ margin:0; font-size:14px; line-height:1.55; }
.cs-moment p + p{ margin-top:10px; }
.cs-moment .k{ display:block; margin-bottom:3px; font:500 10px/1.3 "IBM Plex Mono",monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); }
.cs-moment .ask q{ font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:17px; line-height:1.35; color:var(--text); quotes:"\201C" "\201D"; }
.cs-moment .get{ color:var(--text-muted); }
.cs-midcta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px;
  margin-top:clamp(24px,4vh,36px);
  padding:clamp(20px,2.4vw,28px) clamp(22px,3vw,32px);
  border:1px solid var(--card-edge); border-radius:18px;
  background:radial-gradient(ellipse 70% 120% at 100% 0%, var(--accent-soft), transparent 60%), var(--card);
}
.cs-midcta p{ margin:0; font:500 clamp(20px,2vw,26px)/1.2 "Newsreader",Georgia,serif; letter-spacing:-.01em; }

/* ============== 9 · Roles ============== */
.cs-roles{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
  margin-top:clamp(28px,4vh,40px);
}
.cs-role{
  display:flex; flex-direction:column; gap:10px;
  padding:22px; border-radius:16px;
  border:1px solid var(--card-edge); background:var(--card);
  color:var(--text); text-decoration:none;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cs-role:hover{ border-color:var(--border-strong); transform:translateY(-2px); box-shadow:var(--shadow-card); }
.cs-role:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.cs-role h3{ margin:0; font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:21px; line-height:1.2; }
.cs-role p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--text); }
.cs-role .go{ margin-top:auto; padding-top:8px; font:500 11px/1.3 "IBM Plex Mono",monospace; letter-spacing:.04em; color:var(--accent); }

/* ============== 12 · Data handling ============== */
.cs-dodont{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
  margin-top:clamp(28px,4vh,40px);
}
.cs-dodont > div{ background:var(--card); border:1px solid var(--card-edge); border-radius:16px; padding:clamp(22px,2.4vw,30px); }
.cs-dodont h3{
  margin:0 0 16px; font:600 12px/1 "IBM Plex Mono",monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--text);
}
.cs-checks{ list-style:none; margin:0; padding:0; }
.cs-checks li{
  display:grid; grid-template-columns:20px minmax(0,1fr); gap:12px; align-items:start;
  padding:11px 0; border-top:1px solid var(--card-edge);
  font-size:15px; line-height:1.5;
}
.cs-checks li:first-child{ border-top:0; padding-top:0; }
.cs-checks svg{ width:18px; height:18px; margin-top:2px; }
.cs-checks--do svg{ color:var(--ink-olive); }
.cs-checks--never svg{ color:var(--text-muted); }
.cs-leaving{ margin-top:20px; }

/* ============== 13 · Independence ============== */
.cs-lead{
  margin:clamp(20px,3vh,28px) 0 clamp(24px,4vh,36px); padding-left:24px;
  border-left:2px solid var(--accent);
  font-family:"Newsreader",Georgia,serif; font-style:italic; font-weight:400;
  font-size:clamp(24px,2.8vw,36px); line-height:1.2; letter-spacing:-.01em;
  max-width:26ch; color:var(--text);
}
.cs-lines{ list-style:none; margin:0; padding:0; max-width:62ch; }
.cs-lines li{ padding:12px 0; border-top:1px solid var(--border); font-size:16px; line-height:1.5; }
.cs-lines li:last-child{ border-bottom:1px solid var(--border); }

/* ============== 14 · Regulation ============== */
.cs-regions{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
  margin-top:clamp(28px,4vh,40px);
}
.cs-region{
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--card-edge); border-radius:16px;
  padding:clamp(22px,2.4vw,30px);
}
.cs-region-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.cs-region h3{ margin:0; font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:24px; line-height:1.15; }
.cs-chips{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; }
.cs-chips li{
  font:500 10.5px/1 "IBM Plex Mono",monospace; letter-spacing:.06em;
  padding:6px 9px; border-radius:999px; color:var(--text);
  border:1px solid var(--border-strong); background:rgba(255,255,255,.4);
}
.cs-chips li.draft{ border-style:dashed; color:var(--text-muted); }
.cs-region .cs-list{ font-size:14.5px; }
.cs-helps{
  margin:auto 0 0; padding-top:14px; border-top:1px solid var(--card-edge);
  font-size:14px; line-height:1.55; color:var(--text-muted);
}
.cs-helps strong{ color:var(--text); font-weight:600; }
.cs-regfoot{ margin-top:20px; font-size:13.5px; line-height:1.55; color:var(--text-muted); max-width:72ch; }

/* ============== 15 · Proof / sample scorecard ============== */
.cs-score{
  margin:clamp(32px,5vh,48px) 0 0;
  background:var(--card); border:1px solid var(--card-edge); border-radius:18px;
  box-shadow:var(--shadow-card); overflow:hidden;
}
.cs-score-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap;
  padding:20px 24px; border-bottom:1px solid var(--card-edge);
}
.cs-score-title{ margin:0; font:500 20px/1.2 "Newsreader",Georgia,serif; }
.cs-score-meta{ margin:6px 0 0; font:500 11px/1.4 "IBM Plex Mono",monospace; letter-spacing:.04em; color:var(--text-muted); }
.cs-score-scroll{ overflow-x:auto; }
.cs-score table{ width:100%; min-width:780px; border-collapse:collapse; font-size:13.5px; }
.cs-score th, .cs-score td{ padding:12px 16px; text-align:left; vertical-align:top; border-top:1px solid var(--card-edge); white-space:nowrap; }
.cs-score thead th{
  border-top:0; font:500 10px/1.3 "IBM Plex Mono",monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim);
}
.cs-score tbody th{ font-weight:600; white-space:normal; min-width:200px; }
.cs-score .rng{ color:var(--text-muted); font-size:12px; }
.cs-score .rests{ display:block; margin-top:3px; font:500 10.5px/1.3 "IBM Plex Mono",monospace; letter-spacing:.02em; color:var(--text-muted); }
.cs-score-scroll:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.cs-score .thin{ display:inline-block; margin:2px 0 0 2px; font:500 10px/1 "IBM Plex Mono",monospace; padding:3px 6px; border:1px dashed var(--border-strong); border-radius:999px; color:var(--text-muted); }
.cs-score .moved{ color:var(--text); font-weight:500; }
.cs-score-causes{ padding:18px 24px 22px; border-top:1px solid var(--card-edge); }
.cs-score-causes h3{ margin:0 0 12px; font:500 10.5px/1.3 "IBM Plex Mono",monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); }
.cs-bar{ display:flex; height:14px; border-radius:999px; overflow:hidden; }
.cs-bar span{ display:block; height:100%; }
.cs-legend{ list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px 18px; font-size:12.5px; color:var(--text); }
.cs-legend li{ display:flex; gap:8px; align-items:center; }
.cs-legend i{ width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
.cs-legend b{ font-weight:600; margin-left:auto; padding-left:8px; font-variant-numeric:tabular-nums; }
.c1{ background:#5f5a22; } .c2{ background:#8b8547; } .c3{ background:#b9b07a; }
.c4{ background:#d8ccA0; } .c5{ background:#a96a72; } .c6{ background:#d9b7b3; }
.cs-score-foot{ padding:14px 24px; border-top:1px solid var(--card-edge); font:500 11px/1.4 "IBM Plex Mono",monospace; color:var(--text-muted); }
.cs-behind{ margin-top:clamp(28px,4vh,40px); max-width:68ch; }

/* ============== 16 · Engagements ============== */
.cs-offers{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
  margin:clamp(28px,4vh,40px) 0 clamp(24px,3vh,32px);
}
.cs-offer{
  position:relative;
  display:flex; flex-direction:column; gap:10px;
  padding-top:calc(clamp(22px,2.2vw,28px) + 34px) !important;
  background:var(--card); border:1px solid var(--card-edge); border-radius:16px;
  padding:clamp(22px,2.2vw,28px);
}
.cs-offer--first{
  border:2px solid var(--text);
  box-shadow:var(--shadow-card);
}
.cs-offer-tag{
  position:absolute; top:clamp(22px,2.2vw,28px); left:clamp(22px,2.2vw,28px);
  font:500 10.5px/1 "IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 9px; border-radius:999px; background:var(--text); color:var(--bg);
}
.cs-offer-tag--soon{ background:transparent; color:var(--text-muted); border:1px dashed var(--border-strong); }
.cs-offer h3{ margin:0; font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:23px; line-height:1.15; }
.cs-offer p{ margin:0; font-size:14.5px; line-height:1.6; }
.cs-offers-after{ max-width:68ch; }
.cs-offers-after + .cs-ctas{ margin-top:24px; }

/* ============== 17 · FAQ ============== */
.cs-faq{ margin-top:clamp(24px,4vh,36px); border-top:1px solid var(--border-strong); max-width:880px; }
.cs-faq-item{ border-bottom:1px solid var(--border); }
.cs-faq h3{ margin:0; }
.cs-faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:20px 4px; border:0; background:transparent; cursor:pointer; text-align:left;
  font-family:"Newsreader",Georgia,serif; font-weight:500;
  font-size:clamp(18px,1.6vw,21px); line-height:1.3; color:var(--text);
}
.cs-faq-q:hover{ color:var(--accent); }
.cs-faq-q:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.cs-faq-q svg{ flex:0 0 auto; width:14px; height:14px; color:var(--text-muted); }
.cs-faq-a{ padding:0 4px 22px; max-width:68ch; font-size:15px; line-height:1.6; }
.cs-faq-a p{ margin:0 0 .8em; }
.cs-faq-a p:last-child{ margin-bottom:0; }
.cs-faq-a ul{ margin:0 0 .8em; padding-left:1.15em; }
.cs-faq-a li{ margin:.25em 0; }

/* ============== 18 · Final call to action ============== */
.cs-final{
  position:relative;
  padding:clamp(64px,10vh,112px) 0;
  text-align:center;
}
.cs-final h2{
  margin:0 auto 20px; max-width:22ch;
  font-family:"Newsreader",Georgia,serif; font-weight:500;
  font-size:clamp(30px,3.6vw,48px); line-height:1.08; letter-spacing:-.02em; text-wrap:balance;
}
.cs-final .body{ margin:0 auto 30px; max-width:58ch; font-size:16px; line-height:1.6; color:var(--text); }
.cs-final .cs-ctas{ justify-content:center; }
.cs-final .small{ margin:16px 0 0; font-size:14px; color:var(--text-muted); }
.cs-final .small + .small{ margin-top:6px; }
.cs-final .cs-trust{ justify-content:center; margin-top:28px; }

/* ============== 19 · Sources ============== */
.cs-sources{ padding-bottom:clamp(48px,7vh,80px); }
.cs-sources h2{ margin:0 0 18px; font:600 12px/1 "IBM Plex Mono",monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--text); }
.cs-sources ol{ margin:0; padding-left:1.6em; columns:2; column-gap:48px; font-size:13px; line-height:1.5; color:var(--text-muted); }
.cs-sources li{ break-inside:avoid; margin:0 0 10px; padding-left:4px; }
.cs-sources li::marker{ font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--accent); }
.cs-sources li:target{ background:var(--accent-soft); border-radius:4px; }
.cs-sources a{ color:var(--text); text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:2px; }
.cs-sources a:hover{ color:var(--accent); }
.cs-sources a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Footer column labels are h2 here (they follow the h2 "Sources"); keep the shared h4 look */
.site-foot .foot-h{ font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.10em; text-transform:uppercase; color:var(--text-dim); margin:0 0 18px; font-weight:600; line-height:normal; }

/* ==================================================================
   Ported from insurance.html so both product pages share the Tom hero,
   the ticker, the micro-animations and the scroll reveal.
   ================================================================== */
.tom-hero{
  --text:         #f5ecda;
  --text-muted:   rgba(245,236,218,.78);
  --text-dim:     rgba(245,236,218,.55);
  --border:       rgba(245,236,218,.18);
  --border-strong:rgba(245,236,218,.32);
  --accent:       #f5ecda;
  --accent-soft:  rgba(245,236,218,.08);
  --accent-glow:  rgba(245,236,218,.32);
  --cta-fg:       #260a10;
  --cta-bg:       #f5ecda;
  color:#f5ecda;
}
/* Solid square premium CTA on the dark video hero */
.tom-hero .tom-cta{
  background:#f5ecda;
  border-radius:3px;
  border:none;
  color:#1a0608;
  letter-spacing:.04em;
  box-shadow:0 2px 0 rgba(0,0,0,.40), 0 12px 36px rgba(0,0,0,.28);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.tom-hero .tom-cta:hover{
  transform:none;
  background:rgba(26,6,8,.55);
  color:#f5ecda;
  border:1px solid rgba(245,236,218,.42);
  backdrop-filter:blur(24px) saturate(1.6) brightness(1.10);
  -webkit-backdrop-filter:blur(24px) saturate(1.6) brightness(1.10);
  box-shadow:0 2px 0 rgba(0,0,0,.20), 0 12px 36px rgba(200,140,60,.16), inset 0 1px 0 rgba(255,255,255,.40);
}
/* Maroon accents in hero so they pop against the dark video */
.tom-hero .tom-wordmark .o{
  color:#a83246;
}
.tom-hero .tom-title .flourish{
  color:#e2758a;
}
.tom-hero .tom-sub-main{
  color:#ffffff;
}
.tom-hero .tom-sub-accent{
  font-size:clamp(13px,1.1vw,16px);
  color:rgba(245,236,218,.90);
}
.tom-hero .tom-fineprint{ color:rgba(245,236,218,.84); }
/* ============== Scrolling ticker bar ============== */
.ticker-bar{
  /* break out of .page max-width to span full viewport */
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  overflow:hidden;
  padding:0;
  /* sits directly below the video — no overlap */
  margin-top:0;
  background:linear-gradient(180deg,rgba(80,24,34,.72) 0%,rgba(52,14,22,.92) 100%);
  backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  border-bottom:1px solid rgba(0,0,0,.30);
  box-shadow:0 2px 16px rgba(20,4,8,.40);
  z-index:10;
}
.ticker-bar::before,
.ticker-bar::after{
  content:"";
  position:absolute;
  top:0; bottom:0; width:80px;
  z-index:2; pointer-events:none;
}
.ticker-bar::before{
  left:0;
  background:linear-gradient(90deg,rgba(60,16,24,.88),transparent);
}
.ticker-bar::after{
  right:0;
  background:linear-gradient(-90deg,rgba(60,16,24,.88),transparent);
}
.ticker-track{
  display:flex;
  width:max-content;
  animation:ticker-scroll 32s linear infinite;
}
.ticker-track:hover{ animation-play-state:paused; }
.page-cybersoc .ticker-track{ animation-duration:57s; }
@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.ticker-item{
  display:inline-block;
  white-space:nowrap;
  padding:17px 0;
  font:600 10.5px/1 "IBM Plex Mono",monospace;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:rgba(245,220,195,.78);
}
.ticker-sep{
  display:inline-block;
  padding:17px 20px;
  font-size:10px;
  color:rgba(163,50,70,.90);
  line-height:1;
  align-self:center;
}
/* ============== Hero background video (viewport-wide, hero only) ============== */
/* A wrapper div (not video) stretches between top/bottom on auto-height parents.
   Video elements use intrinsic aspect ratio for height:auto, so they go inside
   the wrapper which provides the real height. */
.hero-bg-wrap{
  position:absolute;
  top:calc(-1 * clamp(180px, 24vh, 280px));
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  pointer-events:none;
  z-index:0;
  /* crops the scaled video's overflow (incl. burned-in Veo watermark) */
  overflow:hidden;
  /* dark fallback so the cream copy stays readable before the video paints */
  background:#3a1219;
}
.hero-bg-video{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 22%;
  /* zoom from the top so the watermark is pushed below and cropped — no hole */
  transform:scale(1.10);
  transform-origin:center top;
}
.hero-bg-tint{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,
      rgba(58,18,25,.26) 0%,
      rgba(58,18,25,.36) 55%,
      rgba(58,18,25,.46) 90%,
      rgba(58,18,25,.50) 100%);
}
/* Keep the hero copy legible over bright frames of the video */
@media (min-width:901px){
  .hero-bg-tint{
    background:
      linear-gradient(90deg, rgba(34,9,14,.66) 0%, rgba(34,9,14,.48) 45%, rgba(34,9,14,0) 70%),
      linear-gradient(180deg, rgba(58,18,25,.26) 0%, rgba(58,18,25,.36) 55%, rgba(58,18,25,.46) 90%, rgba(58,18,25,.50) 100%);
  }
}
@media (max-width:900px){
  .hero-bg-tint{
    background:linear-gradient(180deg, rgba(40,11,17,.82) 0%, rgba(40,11,17,.76) 45%, rgba(40,11,17,.60) 80%, rgba(40,11,17,.52) 100%);
  }
}
@media (prefers-reduced-motion:reduce){
  .hero-bg-video{ display:none; }
  .hero-bg-tint{ background:#3a1219; }
}
/* ============== Tom hero — Superpower-style layout, Tacit palette ============== */
.tom-hero{
  position:relative;
  display:grid;
  grid-template-columns: minmax(0,1fr) clamp(260px,26vw,340px) minmax(120px,160px);
  column-gap: clamp(40px,4.8vw,80px);
  row-gap: clamp(24px,3vw,40px);
  align-items:center;
  min-height: min(84vh, 900px);
  padding: clamp(20px,4vh,56px) clamp(20px,4vw,56px) clamp(16px,3vh,28px);
  isolation:isolate;
}
.tom-hero > .tom-copy,
.tom-hero > .tom-stack,
.tom-hero > .tom-mark{ position:relative; z-index:2; }
.tom-copy{ max-width:600px; }

.tom-proof{ display:flex; align-items:baseline; gap:12px; margin:0 0 24px; max-width:42ch; }
.tom-proof b{
  font-family:"Times New Roman",Times,serif;
  font-weight:400; font-size:34px; line-height:.9;
  letter-spacing:-.02em; color:var(--accent);
  flex:0 0 auto;
}
.tom-proof span{
  font:11.5px/1.45 "IBM Plex Mono",monospace;
  letter-spacing:.03em; color:var(--text-muted);
}

.tom-title{
  font-family:"Newsreader",Georgia,serif;
  font-weight:500;
  font-size:clamp(32px,3.8vw,52px);
  line-height:1.08;
  letter-spacing:-.018em;
  color:var(--text);
  margin:0 0 26px;
  text-wrap:balance;
  overflow-wrap:normal;
  word-break:keep-all;
  hyphens:none;
}
.tom-title .flourish{
  font-family:"Newsreader",Georgia,serif;
  font-style:italic; font-weight:500;
  font-size:1.06em; letter-spacing:-.005em;
  padding:0 .04em;
  display:inline-block;
  transform:rotate(-2deg);
  color:var(--accent);
}

.tom-rule{ height:1px; background:var(--border); border:0; margin:0 0 26px; }

.tom-sub{ margin:0 0 30px; }
.tom-sub-main{
  font-family:"Söhne","Söhne Web","Inter",system-ui,sans-serif;
  font-size:clamp(18px,1.5vw,22px);
  line-height:1.35; color:var(--text);
  margin:0 0 4px; font-weight:400;
}
.tom-sub-main sup{ color:var(--accent); font-size:.7em; }
.tom-sub-accent{
  font-family:"Söhne","Söhne Web","Inter",system-ui,sans-serif;
  font-size:clamp(18px,1.5vw,22px);
  line-height:1.35; color:var(--accent);
  margin:0; font-weight:400;
}

.tom-cta{
  display:flex; align-items:center; justify-content:center;
  gap:10px; width:100%; max-width:420px;
  padding:20px 28px; border-radius:14px;
  background:linear-gradient(180deg,#352a1d,#1f1810);
  color:var(--cta-fg);
  font-family:"Open Sans",system-ui,sans-serif;
  font-size:16px; font-weight:600;
  text-decoration:none;
  box-shadow:0 16px 40px rgba(31,24,16,.22), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.tom-cta:hover{ transform:translateY(-2px); box-shadow:0 22px 52px rgba(31,24,16,.30), inset 0 1px 0 rgba(255,255,255,.10); }
.tom-cta svg{ opacity:.85; }

.tom-fineprint{
  font-family:"Söhne","Söhne Web","Inter",system-ui,sans-serif;
  font-size:11px; line-height:1.55;
  color:var(--text-dim);
  margin:30px 0 0; max-width:46ch;
}

/* Image stack — staggered collage of captioned art slots */
.tom-stack{ display:flex; flex-direction:column; }
.tom-fig{
  margin:0; width:100%;
  display:flex; align-items:center; gap:16px;
  position:relative;
}
.tom-fig + .tom-fig{ margin-top:-30px; }
.tom-fig:nth-child(1){ z-index:1; }
.tom-fig:nth-child(2){ z-index:2; }
.tom-fig:nth-child(3){ z-index:3; }
.tom-fig:nth-child(4){ z-index:4; }
.tom-fig:nth-child(2) .ts-art{ margin-left:16%; }
.tom-fig:nth-child(4) .ts-art{ margin-left:9%; }
.ts-art{
  display:block; flex:0 0 auto;
  border:1px solid var(--border);
  box-shadow:0 18px 48px rgba(31,24,16,.18);
  background:var(--bg-deep);
  color:var(--text-dim);
}
.tom-fig figcaption{
  flex:1 1 auto;
  font-family:"Newsreader",Georgia,serif;
  font-style:italic; font-weight:400;
  font-size:16px; line-height:1.32;
  letter-spacing:.004em;
  color:var(--text-muted);
  text-wrap:balance;
}

/* Right wordmark column */
.tom-mark{
  align-self:center; justify-self:end;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.tom-sublabel{
  font:10px/1 "IBM Plex Mono",monospace;
  letter-spacing:.20em;
  text-transform:lowercase;
  color:var(--text-dim);
}
.tom-wordmark{
  font-family:"Söhne","Söhne Web","Inter",system-ui,sans-serif;
  font-weight:400;
  font-size:clamp(64px,6.4vw,96px);
  letter-spacing:-.022em; line-height:1;
  color:var(--text);
}
.tom-wordmark .o{
  font-family:"Newsreader",Georgia,serif;
  font-style:italic; font-weight:500;
  color:var(--accent);
  font-size:1.06em; letter-spacing:-.01em;
}
/* Hero collapse on narrow viewports */
@media (max-width:900px){
  .tom-hero{
    grid-template-columns:1fr;
    min-height:0;
    gap:40px;
    padding:4px 0 40px;
  }
  .tom-mark{ display:none; }
  .tom-stack{ max-width:420px; margin:0 auto; width:100%; }
  .tom-cta{ max-width:none; }
}
@keyframes tk-blink{50%{opacity:0}}
@keyframes tk-pulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes tk-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tk-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes tk-type{from{width:0}to{width:100%}}
@keyframes tk-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* ── Scroll reveal ─────────────────────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .72s cubic-bezier(.22,1,.36,1), transform .72s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
.reveal.revealed{ opacity:1; transform:none; }
.reveal--fade{ transform:none; }
.reveal--up-sm{ transform:translateY(14px); }
.reveal--scale{ transform:translateY(18px) scale(.978); }
.reveal--scale.revealed{ transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- CyberSOC: hero spacing after the ticker ---------- */
.ticker-bar + .cs-hero{ padding-top:clamp(56px,9vh,104px); }

/* ---------- Micro-animations (same keyframes as the underwriting showcase) ----------
   Gated on .in-view, which the foot script adds when each card scrolls into view.
   Without JS, or with reduced motion, everything simply shows its final state. */
.tk-shimmer-line{
  position:absolute; top:0; left:0; right:0; height:2px; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,rgba(168,50,70,0),rgba(168,50,70,.45),rgba(168,50,70,0));
  background-size:200% 100%;
  animation:tk-shimmer 3.4s linear infinite;
}
.cs-map, .cs-score{ position:relative; }
.tk-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#a83246; margin-right:8px; vertical-align:1px; animation:tk-pulse 1.4s ease-in-out infinite; }

.js-anim .cs-map:not(.in-view) tbody tr,
.js-anim .cs-score:not(.in-view) tbody tr,
.js-anim .cs-clock:not(.in-view) .cs-clock-mark{ opacity:0; }
.cs-map.in-view tbody tr,
.cs-score.in-view tbody tr{ animation:tk-rise .5s both; }
.cs-map.in-view tbody tr:nth-child(2), .cs-score.in-view tbody tr:nth-child(2){ animation-delay:.12s; }
.cs-map.in-view tbody tr:nth-child(3), .cs-score.in-view tbody tr:nth-child(3){ animation-delay:.24s; }
.cs-map.in-view tbody tr:nth-child(4), .cs-score.in-view tbody tr:nth-child(4){ animation-delay:.36s; }

.cs-clock-axis::after{ transform-origin:left; }
.js-anim .cs-clock:not(.in-view) .cs-clock-axis::after{ transform:scaleX(0); }
.js-anim .cs-score:not(.in-view) .cs-bar{ clip-path:inset(0 100% 0 0); }
.js-anim .cs-weeks:not(.in-view) .cs-weeks-bar span{ clip-path:inset(0 100% 0 0); }
.cs-score.in-view .cs-bar{ animation:tk-wipe 1s .45s both; }
.cs-weeks.in-view .cs-weeks-bar span:first-child{ animation:tk-wipe .7s .1s both; }
.cs-weeks.in-view .cs-weeks-bar span:last-child{ animation:tk-wipe 1.6s .6s both; }
.cs-clock.in-view .cs-clock-axis::after{ animation:tk-grow 1.4s .1s both; }
.cs-clock.in-view .cs-clock-mark{ animation:tk-fade .5s .3s both; }
.cs-clock.in-view .cs-clock-mark + .cs-clock-mark{ animation-delay:.75s; }
.cs-clock.in-view .cs-clock-mark + .cs-clock-mark + .cs-clock-mark{ animation-delay:1.1s; }

/* Typed footer line on the sample report (wide screens; it wraps on phones) */
.cs-score-foot .caret{ display:inline-block; width:7px; height:13px; margin-left:4px; vertical-align:-2px; background:#c4536a; }
.cs-score.in-view .cs-score-foot .caret{ animation:tk-blink 1s step-end 1.2s 8; }
@media (min-width:781px){
  .cs-score-foot .typed{ display:inline-block; overflow:hidden; white-space:nowrap; max-width:65ch; vertical-align:bottom; }
  .js-anim .cs-score:not(.in-view) .cs-score-foot .typed{ max-width:0; }
  .cs-score.in-view .cs-score-foot .typed{ animation:tk-typech 2.4s steps(65) 1.2s both; }
}
@keyframes tk-typech{ from{ max-width:0; } to{ max-width:65ch; } }
@keyframes tk-wipe{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes tk-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes tk-grow-y{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }

/* ---------- 18 · Final band: video background with parallax (as on the underwriting page) ---------- */
.cs-final{
  position:relative; overflow:hidden;
  left:50%; transform:translateX(-50%);
  width:100vw;
  padding:clamp(72px,11vh,124px) clamp(20px,5vw,80px);
  background:#3a1219;
  box-shadow:none; clip-path:none;
  color:#f5ecda;
  isolation:isolate;
}
.cs-final > *:not(.final-bg-video):not(.final-bg-tint){ position:relative; z-index:2; }
.final-bg-video{
  position:absolute; top:-12%; left:0; width:100%; height:124%;
  object-fit:cover; object-position:center 22%;
  z-index:0; pointer-events:none;
}
.final-bg-tint{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(135deg,rgba(110,14,28,.80) 0%,rgba(80,10,20,.72) 100%);
}
.cs-final h2{ color:#f5ecda; }
.cs-final .body{ color:rgba(245,236,218,.9); }
.cs-final .small{ color:rgba(245,236,218,.8); }
.cs-final a.inline{ color:#f5ecda; text-decoration-color:rgba(245,236,218,.5); }
.cs-final a.inline:hover{ color:#ffffff; text-decoration-color:#ffffff; }
.cs-final a.inline:focus-visible{ outline-color:#f5ecda; }
.cs-final .cs-trust{ color:rgba(245,236,218,.82); }
.cs-final .cs-trust li + li::before{ background:rgba(245,236,218,.45); }
.cs-final .cs-btn{
  background:#f5ecda; color:#1a0608; border-radius:3px;
  box-shadow:0 2px 0 rgba(0,0,0,.40), 0 12px 36px rgba(0,0,0,.28);
}
.cs-final .cs-btn:hover{
  transform:none; background:rgba(26,6,8,.55); color:#f5ecda;
  box-shadow:0 2px 0 rgba(0,0,0,.20), inset 0 0 0 1px rgba(245,236,218,.42);
}
.cs-final .cs-btn:focus-visible{ outline-color:#f5ecda; }
@media (prefers-reduced-motion:reduce){
  .final-bg-video{ display:none; }
}


/* Pause control for the looping motion (ticker, background video, pulsing UI) */
.motion-toggle{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:18px; padding:7px 11px;
  background:rgba(38,10,16,.55); color:#f5ecda;
  border:1px solid rgba(245,236,218,.38); border-radius:3px;
  font:500 10.5px/1 "IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:lowercase;
  cursor:pointer;
}
.motion-toggle:hover{ background:rgba(38,10,16,.8); }
.motion-toggle:focus-visible{ outline:2px solid #f5ecda; outline-offset:3px; }
.motion-toggle .mt-icon{ width:8px; height:9px; border-left:2px solid currentColor; border-right:2px solid currentColor; }
.motion-toggle[aria-pressed="true"] .mt-icon{ width:0; height:0; border-left:8px solid currentColor; border-right:0; border-top:4.5px solid transparent; border-bottom:4.5px solid transparent; }
.motion-paused .ticker-track,
.motion-paused .tk-dot,
.motion-paused .tk-shimmer-line,
.motion-paused .caret,
.motion-paused [style*="infinite"]{ animation-play-state:paused !important; }
@media (prefers-reduced-motion:reduce){ .motion-toggle{ display:none; } }

@media print{
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .js-anim .cs-map tbody tr, .js-anim .cs-score tbody tr, .js-anim .cs-clock .cs-clock-mark{ opacity:1 !important; animation:none !important; }
  .js-anim .cs-clock .cs-clock-axis::after{ transform:none !important; animation:none !important; }
  .js-anim .cs-score .cs-bar, .js-anim .cs-weeks .cs-weeks-bar span{ clip-path:none !important; animation:none !important; }
  .js-anim .cs-score-foot .typed{ max-width:none !important; animation:none !important; }
  .hero-bg-wrap, .final-bg-video, .ticker-bar, .motion-toggle, .tk-shimmer-line{ display:none !important; }
  .tom-hero, .cs-final{ background:#3a1219 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .cs .sec-dark{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}


/* ============== Alternating maroon sections (same palette as the underwriting page's
   maroon blocks: #2d0912 ground, #3a0f1c cards, #5a1825 lines, cream and warm-tan text).
   Re-theming the tokens lets every card, table and chip inside follow. ============== */
.cs .sec-dark{
  --text:#f5ecda;
  --text-muted:#c0a880;
  --text-dim:#a8906e;
  --border:#5a1825;
  --border-strong:#7a2a3a;
  --accent:#e2758a;
  --accent-soft:rgba(226,117,138,.12);
  --accent-glow:rgba(226,117,138,.32);
  --card:#3a0f1c;
  --card-edge:#5a1825;
  --ink-olive:#d9cf9a;
  --bg:#2d0912;
  --bg-deep:#3a0f1c;
  --cta-bg:#f5ecda;
  --cta-fg:#1a0608;
  --shadow-card:inset 0 1px 0 rgba(245,236,218,.05), 0 18px 48px rgba(0,0,0,.22);
  color:var(--text);
  background:#2d0912;
  box-shadow:0 0 0 100vmax #2d0912;      /* paint the band edge to edge */
  clip-path:inset(0 -100vmax);
  border-top:0;
}
/* colour changes mark the section breaks, so drop the hairlines between bands */
.cs .sec-dark::before, .cs .sec-dark::after,
.cs .sec-dark + .section::before, .cs .sec-dark + .section::after,
.cs .cs-final + .section::before, .cs .cs-final + .section::after{ display:none; }
.cs .sec-dark + .section, .cs .cs-final + .section{ border-top:0; }
/* the few hard-coded light tints inside these sections */
.cs .sec-dark .t10{ border-left-color:rgba(226,117,138,.5); }
.cs .sec-dark .cs-chips li{ background:rgba(245,236,218,.06); }
.cs .sec-dark .cs-tabs{ background:rgba(245,236,218,.05); }
.cs .sec-dark .cs-btn{ box-shadow:0 2px 0 rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.25); }
.cs .sec-dark .cs-btn:hover{ box-shadow:0 2px 0 rgba(0,0,0,.25), 0 16px 40px rgba(0,0,0,.32); }


/* ============== Frosted glass boxes ==============
   Every box on the page is a pane of frosted glass: whitish with a rose tint on the
   beige sections, maroon with a white sheen on the maroon ones. A light sweep runs
   across the glass on hover. Soft glows behind each section give the blur something
   to frost; they fade out well before the section edges, so no seams. */
.cs .cs-hero{
  background-image:
    radial-gradient(22% 38% at 76% 52%, rgba(168,50,70,.13), rgba(168,50,70,0)),
    radial-gradient(20% 30% at 62% 30%, rgba(255,255,255,.7), rgba(255,255,255,0));
}
.cs .section:not(.sec-dark){
  background-image:
    radial-gradient(26% 30% at 30% 42%, rgba(168,50,70,.10), rgba(168,50,70,0)),
    radial-gradient(24% 28% at 72% 64%, rgba(168,50,70,.08), rgba(168,50,70,0)),
    radial-gradient(28% 24% at 55% 30%, rgba(255,255,255,.65), rgba(255,255,255,0));
}
.cs .sec-dark{
  --text-dim:#bba381;   /* a touch brighter so small labels stay AA on the glass */
  background-image:
    radial-gradient(26% 30% at 30% 42%, rgba(196,83,106,.16), rgba(196,83,106,0)),
    radial-gradient(24% 28% at 72% 66%, rgba(226,117,138,.12), rgba(226,117,138,0)),
    radial-gradient(22% 22% at 58% 26%, rgba(245,236,218,.035), rgba(245,236,218,0));
}

.cs :is(.cs-map, .cs-stat, .cs-q, .cs-clock, .cs-moment, .cs-midcta, .cs-role, .cs-dodont > div, .cs-region, .cs-score, .cs-offer){
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(140deg, rgba(255,255,255,.80) 0%, rgba(255,250,245,.55) 48%, rgba(248,228,226,.46) 100%);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(168,50,70,.06),
    0 14px 34px rgba(90,26,38,.09),
    0 2px 6px rgba(90,26,38,.05);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
}
.cs .sec-dark :is(.cs-map, .cs-stat, .cs-q, .cs-clock, .cs-moment, .cs-midcta, .cs-role, .cs-dodont > div, .cs-region, .cs-score, .cs-offer){
  background:linear-gradient(140deg, rgba(255,236,232,.06) 0%, rgba(196,83,106,.07) 48%, rgba(45,9,18,.34) 100%);
  border:1px solid rgba(245,236,218,.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(226,117,138,.05),
    0 18px 44px rgba(0,0,0,.30);
}
/* keep the emphasis the copy asks for */
.cs .cs-q.cs-q--edge{
  background:linear-gradient(140deg, rgba(255,255,255,.80) 0%, rgba(255,246,243,.58) 48%, rgba(240,205,210,.50) 100%);
  border-color:rgba(168,50,70,.32);
}
.cs .sec-dark .cs-offer.cs-offer--first{ border:2px solid var(--text); }
.cs .sec-dark .cs-q.cs-q--edge{
  background:linear-gradient(140deg, rgba(255,236,232,.08) 0%, rgba(226,117,138,.13) 48%, rgba(45,9,18,.30) 100%);
  border-color:rgba(226,117,138,.42);
}
.cs .sec-dark .cs-more{ border-color:rgba(245,236,218,.28); color:var(--text); }
.cs .sec-dark .cs-more:hover{ border-color:rgba(245,236,218,.55); }
.cs .cs-role:hover{
  border-color:rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(168,50,70,.08), 0 20px 44px rgba(90,26,38,.14);
}

/* the shine: a soft diagonal band of light that sweeps across on hover */
.cs :is(.cs-map, .cs-stat, .cs-q, .cs-clock, .cs-moment, .cs-midcta, .cs-role, .cs-dodont > div, .cs-region, .cs-score, .cs-offer)::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:-40%; bottom:-40%; left:0; width:45%;
  /* white core with faint rose edges, so the glint reads even on the white glass */
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(214,120,138,.12) 33%, rgba(255,255,255,.96) 50%, rgba(214,120,138,.12) 67%, rgba(255,255,255,0) 100%);
  transform:translateX(-180%) skewX(-14deg);
  opacity:0;
}
/* content sits above the glint, so text stays crisp while the glass shines */
.cs :is(.cs-map, .cs-stat, .cs-q, .cs-clock, .cs-moment, .cs-midcta, .cs-role, .cs-dodont > div, .cs-region, .cs-score, .cs-offer) > :not(.cs-offer-tag):not(.tk-shimmer-line){ position:relative; z-index:1; }
.cs .sec-dark :is(.cs-map, .cs-stat, .cs-q, .cs-clock, .cs-moment, .cs-midcta, .cs-role, .cs-dodont > div, .cs-region, .cs-score, .cs-offer)::after{
  background:linear-gradient(100deg, rgba(255,240,236,0) 0%, rgba(255,240,236,.10) 34%, rgba(255,246,242,.36) 50%, rgba(255,240,236,.10) 66%, rgba(255,240,236,0) 100%);
}
.cs :is(.cs-map, .cs-stat, .cs-q, .cs-clock, .cs-moment, .cs-midcta, .cs-role, .cs-dodont > div, .cs-region, .cs-score, .cs-offer):hover::after,
.cs .cs-role:focus-visible::after{ animation:glass-shine 1.2s cubic-bezier(.45,.05,.35,1); }
@keyframes glass-shine{
  0%  { transform:translateX(-180%) skewX(-14deg); opacity:0; }
  15% { opacity:1; }
  85% { opacity:1; }
  100%{ transform:translateX(360%) skewX(-14deg); opacity:0; }
}
@media (prefers-reduced-transparency:reduce){
  .cs :is(.cs-map, .cs-stat, .cs-q, .cs-clock, .cs-moment, .cs-midcta, .cs-role, .cs-dodont > div, .cs-region, .cs-score, .cs-offer){ background:var(--card); -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* ============== Brief ↔ know more ============== */
/* topic links: small frosted pills */
.km-chips{ list-style:none; margin:clamp(20px,3vh,28px) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.km-chips a{
  display:inline-flex; align-items:center;
  padding:10px 16px; border-radius:999px; text-decoration:none;
  font:500 13.5px/1.2 "Inter",system-ui,sans-serif; color:var(--text);
  background:linear-gradient(140deg, rgba(255,255,255,.80), rgba(248,228,226,.50));
  border:1px solid rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 6px 18px rgba(90,26,38,.08);
  -webkit-backdrop-filter:blur(12px) saturate(150%); backdrop-filter:blur(12px) saturate(150%);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.km-chips a:hover{ transform:translateY(-1px); border-color:rgba(168,50,70,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 10px 24px rgba(90,26,38,.12); }
.km-chips a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.cs .sec-dark .km-chips a{
  background:linear-gradient(140deg, rgba(255,236,232,.08), rgba(196,83,106,.10));
  border-color:rgba(245,236,218,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 8px 22px rgba(0,0,0,.25);
}
.cs .sec-dark .km-chips a:hover{ border-color:rgba(245,236,218,.5); }
.km-chips + .cs-ctas{ margin-top:26px; }

/* detail page header: a maroon band that runs up behind the nav, like the Tom hero */
.cs .km-hero.sec-dark{ clip-path:inset(-400px -100vmax 0 -100vmax); }
.km-hero{ padding-block:clamp(48px,8vh,96px); }
.page-km .nav-wrap{ margin-bottom:0; }
.km-back{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 28px;
  font:500 12px/1 "IBM Plex Mono",monospace; letter-spacing:.06em;
  color:var(--text-muted); text-decoration:none;
}
.km-back:hover{ color:var(--text); }
.km-back:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.km-hero .cs-h1{ max-width:18ch; }
.km-hero .cs-deck{ max-width:56ch; }

/* detail page closing band: same maroon as the brief's, without the video */
.cs-final--plain{
  background:
    radial-gradient(30% 60% at 30% 40%, rgba(196,83,106,.22), rgba(196,83,106,0)),
    radial-gradient(26% 50% at 72% 60%, rgba(226,117,138,.14), rgba(226,117,138,0)),
    #3a1219;
}

/* ============== Responsive ============== */
@media (max-width:1080px){
  .cs-qgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cs-offers{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cs-roles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  .cs-hero{ grid-template-columns:1fr; }
  .cs-h1{ max-width:18ch; }
  .cs-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:32px; }
  .cs-sources ol{ columns:1; }
}
@media (max-width:780px){
  .cs-stats{ grid-template-columns:1fr; }
  .cs-stats-cap{ grid-column:auto; }
  .cs-stat{ grid-row:auto; }
  .cs-stat:nth-of-type(3){ margin-top:8px; }
  .cs-duo{ grid-template-columns:1fr; }
  .cs-duo-rule{ height:1px; }
  .cs-moments{ grid-template-columns:1fr; }
  .cs-moments.is-tabbed .cs-group-h{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .cs-dodont, .cs-regions{ grid-template-columns:1fr; }
  .cs-legend{ grid-template-columns:1fr 1fr; }

  /* Clocks run down the page on phones */
  .cs-clock-track{ height:auto; padding:4px 0 4px 34px; display:grid; gap:22px; }
  .cs-clock-axis{ left:9px; right:auto; top:8px; bottom:8px; width:2px; height:auto; }
  .cs-clock-axis::after{ width:2px; height:100%; background:linear-gradient(180deg, var(--accent), rgba(168,50,70,.15)); transform-origin:top; }
  .js-anim .cs-clock:not(.in-view) .cs-clock-axis::after{ transform:scaleY(0); }
  .cs-clock.in-view .cs-clock-axis::after{ animation-name:tk-grow-y; }
  .cs-clock-tick{ display:none; }
  .cs-clock-mark, .cs-clock-mark.end{ position:relative; left:auto !important; transform:none; text-align:left; width:auto; }
  .cs-clock-mark .dot, .cs-clock-mark.end .dot{ left:-32px; right:auto; top:5px; transform:none; }
}
@media (max-width:640px){
  .cs-qgrid, .cs-offers, .cs-roles, .cs-steps{ grid-template-columns:1fr; }
  .cs-weeks{ grid-template-columns:1fr; gap:8px; }
  .cs-weeks .end{ text-align:right; }
  .cs-weeks-bar{ height:auto; min-height:28px; border-radius:14px; }
  .cs-weeks-bar span{ white-space:normal; line-height:1.3; padding:6px 10px; }
  .cs-map-table tbody tr{ grid-template-columns:1fr; }
  .cs-map-table td.call-cell{ text-align:left; }
  .cs-map-table thead th:nth-child(2){ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .cs-map .call{ white-space:normal; }
  .cs-trust{ flex-direction:column; align-items:flex-start; gap:6px; }
  .cs-hero .cs-trust{ grid-template-columns:1fr; }
  .cs-trust li + li::before{ display:none; }
  .cs-final .cs-trust{ align-items:center; }
  .cs-legend{ grid-template-columns:1fr; }
  .cs-midcta{ flex-direction:column; align-items:flex-start; }
}