/* ============================================================
   3P SECURITY GROUP
   Design system. Hand-authored, no framework, no build step.

   GEOMETRY: the whole identity is built from ONE primitive,
   three arcs radiating from a single origin point.
     outer arc  = PREVENT   (the deterrent perimeter)
     middle arc = PROTECT   (the staffed post)
     inner arc  = PRESERVE  (the asset and the record, kept whole at the centre)
   Nothing here is stock. Every figure, glyph, divider and diagram on
   this site is that primitive at a different radius. There is not a
   single photograph or purchased asset anywhere in the build.

   NO USAF Security Forces shield, beret flash or USAF seal anywhere.
   Those are DoD insignia. The dark blue is a colour, which is fair
   game; the insignia is not.
   ============================================================ */

:root {
  /* base: near-black with a blue cast, not pure grey */
  --ink:        #0a0e16;
  --ink-2:      #111725;
  --ink-3:      #1a2233;
  --line:       #253048;
  --line-soft:  #1b2436;

  /* type */
  --fg:         #e8ecf4;
  --fg-2:       #a8b4ca;
  --fg-3:       #6b7891;

  /* the one accent: signal amber = the moment an alert is real */
  --signal:     #f5a524;
  --signal-dim: #8a5c14;
  --signal-wash:rgba(245,165,36,0.08);

  /* cold secondary = the sensor side */
  --scan:       #4a9eff;
  --scan-wash:  rgba(74,158,255,0.07);

  --ok:         #3ecf8e;

  --maxw:       1120px;
  --gutter:     20px;
  --radius:     4px;   /* sharp. this is not a consumer app */

  --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(.22,.7,.25,1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: `hidden` makes body a scroll container and kills
     position:sticky, which the whole hero depends on */
  overflow-x: clip;
}

img, svg { max-width: 100%; }
[hidden] { display: none !important; }

a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--signal); color: #10130a; }

:focus-visible { outline: 2px solid var(--scan); outline-offset: 3px; border-radius: 2px; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- type scale ---------- */
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 0.5em; font-weight: 650; }
h1 { font-size: clamp(2.2rem, 6.2vw, 4rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
h3 { font-size: clamp(1.1rem, 2.4vw, 1.3rem); }
p  { margin: 0 0 1.1em; color: var(--fg-2); }
p.lead { font-size: clamp(1.04rem, 2.2vw, 1.26rem); color: var(--fg); max-width: 60ch; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 1rem;
  display: block;
}
.eyebrow.cool { color: var(--scan); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font); font-weight: 600; font-size: 0.97rem; line-height: 1;
  padding: 14px 20px; border-radius: var(--radius);
  background: var(--signal); color: #120e04; border: 1px solid var(--signal);
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn::after { content: "\2192"; transition: transform .25s var(--ease); }
.btn:hover { text-decoration: none; background: #ffb838; box-shadow: 0 0 0 4px var(--signal-wash); }
.btn:hover::after { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn.ghost:hover { background: var(--ink-2); border-color: var(--signal); box-shadow: none; }

/* ---------- reading progress, sitting in the header rule ---------- */
.read-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.read-bar i {
  display: block; height: 100%; background: linear-gradient(90deg, var(--signal), #ffcf7a);
  transform: scaleX(0); transform-origin: 0 50%;
}

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,14,22,0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 68px; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--fg); }
.brand:hover { text-decoration: none; }
.brand .mark { width: 34px; height: 34px; flex: 0 0 34px; }
.brand:hover .mark path { animation: arcRipple 1.1s var(--ease); }
.brand .mark path:nth-of-type(2) { animation-delay: .07s !important; }
.brand .mark path:nth-of-type(3) { animation-delay: .14s !important; }
@keyframes arcRipple { 0% { opacity: .18; } 45% { opacity: 1; } }
.brand .wordmark { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1.1; }
.brand .wordmark span { display: block; font-size: 0.62rem; font-family: var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); font-weight: 400; }

.nav { display: flex; gap: 26px; align-items: center; }
.nav a { color: var(--fg-2); font-size: 0.93rem; font-weight: 500; }
.nav a:hover { color: var(--fg); text-decoration: none; }
.nav .nav-cta {
  color: var(--signal); border: 1px solid var(--signal-dim); border-radius: var(--radius);
  padding: 8px 15px; transition: background .2s var(--ease), border-color .2s var(--ease);
}
.nav .nav-cta:hover { background: var(--signal-wash); border-color: var(--signal); color: var(--signal); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  color: var(--fg); border-radius: var(--radius); padding: 9px 12px;
  font-family: var(--mono); font-size: 0.78rem; cursor: pointer;
}

/* ============================================================
   THE HERO STAGE
   A sticky WebGL canvas with four beats of copy scrolling over it.
   The stage takes no space in flow (negative bottom margin), so the
   track length is exactly the beats, which is what the scroll maths
   in hero.js assumes.
   ============================================================ */
.hero { position: relative; }
.beats { position: relative; }

.scene-stage {
  position: sticky; top: 0;
  height: 100vh;
  height: 100svh;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(120% 90% at 62% 34%, #121a2b 0%, var(--ink) 62%);
}
.scene-stage canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1.1s var(--ease);
}
.scene-stage.gl-on canvas { opacity: 1; }

.scene-fallback { position: absolute; inset: 0; opacity: .5; transition: opacity .9s var(--ease); }
.scene-fallback svg { width: 100%; height: 100%; }
.scene-stage.gl-on .scene-fallback { opacity: 0; }

/* the veil is what makes the copy readable without dimming the whole scene */
.scene-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(130% 110% at 62% 44%, rgba(10,14,22,0) 42%, rgba(10,14,22,.5) 100%),
    linear-gradient(90deg, rgba(10,14,22,.9) 0%, rgba(10,14,22,.66) 22%, rgba(10,14,22,.2) 46%, rgba(10,14,22,0) 64%);
}

/* ---------- the readout ---------- */
.hud {
  position: absolute; top: 90px; right: 26px; z-index: 3;
  min-width: 186px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.07em;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(10,14,22,0.72); backdrop-filter: blur(8px);
  padding: 12px 14px 10px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .8s var(--ease) .5s, transform .8s var(--ease) .5s;
}
.scene-stage.gl-on .hud, .scene-stage.still .hud { opacity: 1; transform: none; }
.hud-row { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.hud-k { color: var(--fg-3); text-transform: uppercase; }
.hud-v { color: var(--fg); font-variant-numeric: tabular-nums; }
.hud-v.ok   { color: var(--scan); }
.hud-v.warn { color: var(--signal); }
.hud-v.rec  { color: #ff6b5e; }
.hud-v.rec::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #ff6b5e; margin-right: 6px; vertical-align: 1px;
  animation: recBlink 1.3s steps(1,end) infinite;
}
@keyframes recBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: .15; } }

.scene-progress { height: 2px; background: var(--line-soft); margin-top: 10px; overflow: hidden; }
.scene-progress i { display: block; height: 100%; background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- the detection box: the same reticle as every callout ---------- */
.det {
  position: absolute; top: 0; left: 0; z-index: 4;
  pointer-events: none; opacity: 0;
  transition: opacity .28s var(--ease);
}
.det.on { opacity: 1; }
.det i { position: absolute; width: 11px; height: 11px; border: 0 solid var(--signal); }
.det i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.det i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.det i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.det i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.det-label {
  position: absolute; top: -20px; left: 0; white-space: nowrap;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em;
  color: #120e04; background: var(--signal); padding: 2px 6px;
}

/* ---------- the record. It arrives at PRESERVE and it stays. ---------- */
.clip {
  position: absolute; right: 26px; bottom: 34px; z-index: 4; margin: 0;
  width: 232px; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(10,14,22,0.88); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(16px) scale(.97);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.clip.on { opacity: 1; transform: none; }
.clip::before, .clip::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  border: 0 solid var(--signal); pointer-events: none;
}
.clip::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.clip::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.clip-frame { border: 1px solid var(--line-soft); line-height: 0; }
.clip figcaption { display: grid; gap: 2px; margin-top: 9px; font-family: var(--mono); }
.clip-k { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ok); }
.clip-time { font-size: 0.9rem; color: var(--fg); font-variant-numeric: tabular-nums; }
.clip-m { font-size: 0.6rem; letter-spacing: 0.1em; color: var(--fg-3); }

.scene-cap {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3; margin: 0;
  text-align: center; font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.11em; color: #43506b;
}

/* ---------- the beats ---------- */
.beat {
  position: relative; z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  /* grid, not flex: a flex item with margin:0 auto shrinks to its content,
     which would put every beat's left edge in a different place */
  display: grid; align-content: center;
  padding-block: 14vh 12vh;
}
.beat > .wrap { width: 100%; }
/* the first beat is pulled back over the stage, which is what makes the
   beats scroll across it. Do NOT move this to margin-bottom on the stage:
   a negative bottom margin collapses the sticky margin box to zero height
   and the stage then slides a whole viewport past the end of the track. */
.scene-stage + .beat { margin-top: -100vh; margin-top: -100svh; }
.beat-in { max-width: 40rem; }
.js .beat-in { opacity: 0; transform: translateY(22px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.js .beat.live .beat-in { opacity: 1; transform: none; }

.beat-n {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--signal); margin-bottom: 18px;
}
.beat-g { width: 26px; height: 26px; flex: 0 0 26px; color: var(--signal); }

.beat h2 { max-width: 15ch; font-size: clamp(1.9rem, 5vw, 3.1rem); }
.beat p { max-width: 50ch; font-size: clamp(1rem, 2vw, 1.13rem); }

.beat-note {
  display: flex; align-items: flex-start; gap: 11px;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em;
  color: var(--fg-2); border-left: 2px solid var(--line);
  padding-left: 14px; margin-top: 26px; max-width: 42ch;
}
.pip { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; margin-top: 7px; }
.pip.warn { background: var(--signal); box-shadow: 0 0 0 0 rgba(245,165,36,.55); animation: pulse 2.2s ease-out infinite; }
.pip.ok   { background: var(--ok); }
.pip.rec  { background: #ff6b5e; }

.beat-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.status-line {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-2);
  border: 1px solid var(--line); border-radius: 100px;
  padding: 6px 14px 6px 10px; margin-bottom: 26px;
  background: rgba(17,23,37,0.7);
}
.status-line .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 0 0 rgba(245,165,36,0.55);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,165,36,0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(245,165,36,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,165,36,0); }
}

.hero h1 { max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--signal); }

/* ============================================================
   SECTIONS. The top rule is the primitive flattened: one origin on
   the left, light radiating out and dying.
   ============================================================ */
.section { padding: clamp(58px, 9vw, 104px) 0; border-top: 1px solid var(--line-soft); position: relative; }
.section::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: min(44%, 400px); height: 1px;
  background: linear-gradient(90deg, var(--signal) 0%, rgba(245,165,36,0) 100%);
}
.section::after {
  content: ""; position: absolute; top: -3px; left: 0; width: 5px; height: 5px;
  border-radius: 50%; background: var(--signal);
}
.section.tight { padding-block: clamp(44px, 7vw, 76px); }
.section-head { max-width: 66ch; margin-bottom: 40px; }

.grid-2 { display: grid; gap: 30px; grid-template-columns: 1fr 1fr; align-items: start; }

.cta-band { background: linear-gradient(180deg, var(--ink), #0d1320); }
.cta-side { display: grid; gap: 14px; justify-items: start; }
.cta-note { font-size: .9rem; margin: 0; }

/* ============================================================
   FIGURES
   ============================================================ */
.fig {
  margin: 0 0 38px; padding: 26px 26px 20px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
}
.fig-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.fig-n {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--signal); display: block;
}
.fig-head h3, .fig-copy h3 { margin: 0; }
.fig figcaption {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: 0.84rem; color: var(--fg-3); max-width: 78ch;
}
.fig.split { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: center; }
.fig.split .fig-copy p { font-size: .96rem; }
.fig.split .fig-copy p:last-child { margin-bottom: 0; }
.fig.split .fig-n { margin-bottom: 8px; }
.fig.split .fig-copy h3 { margin-bottom: .6em; }

/* ---------- Fig. 01, the latency lanes ---------- */
.lat { width: 100%; min-width: 720px; height: auto; display: block; }
.lat text { font-family: var(--mono); fill: var(--fg-3); }
.lat-t { font-size: 11px; letter-spacing: 0.14em; fill: var(--fg-3); }
.lat-t.hot { fill: var(--signal); }
.lat-t.cool { fill: var(--scan); }
.lat-v { font-size: 12.5px; fill: var(--fg-2); letter-spacing: 0.01em; }
.lat-v.dim { fill: var(--fg-3); }
.lat-v.warn { fill: #d6912f; }
.lat-v.cool { fill: var(--scan); }
.lat-tick line { stroke: var(--line); stroke-width: 1; }
.lat-tick text { font-size: 10px; letter-spacing: 0.1em; fill: #55627d; text-anchor: middle; }

.lat-run { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.lat-run.dim  { stroke: url(#latDim); stroke-dasharray: 9 8; }
.lat-run.warn { stroke: #d6912f; }
.lat-run.cool { stroke: var(--scan); }
.lat-dot.dim  { fill: var(--fg-3); }
.lat-dot.warn { fill: #d6912f; }
.lat-dot.cool { fill: var(--scan); }

@media (prefers-reduced-motion: no-preference) {
  .js .lat .lat-run  { stroke-dashoffset: 1; }
  .js .lat .lat-run.dim { stroke-dasharray: 9 8; stroke-dashoffset: 0; opacity: 0; transition: opacity .7s var(--ease) .95s; }
  .js .lat .lat-run:not(.dim) { stroke-dasharray: 1; }
  .js .lat .lat-dot  { transform: scale(0); transform-origin: center; transform-box: fill-box; }
  .js .lat .lat-v, .js .lat .lat-t, .js .lat .lat-tick { opacity: 0; transition: opacity .5s var(--ease); }
  .js .lat .lat-origin { opacity: 0; transition: opacity .5s var(--ease); }

  .fig.in .lat .lat-origin { opacity: 1; }
  .fig.in .lat .lat-tick   { opacity: 1; transition-delay: .15s; }
  .fig.in .lat .lat-t      { opacity: 1; transition-delay: .2s; }
  .fig.in .lat .lat-run:not(.dim) { transition: stroke-dashoffset .9s var(--ease); stroke-dashoffset: 0; }
  .fig.in .lat .lat-run.dim { opacity: 1; }
  /* the verified lane finishes first, because that is the entire point */
  .fig.in .lat [data-lane="1"] .lat-run { transition-duration: .45s; transition-delay: .35s; }
  .fig.in .lat [data-lane="2"] .lat-run { transition-duration: .8s;  transition-delay: .35s; }
  .fig.in .lat [data-lane="1"] .lat-dot { transition: transform .35s var(--ease) .8s;  transform: scale(1); }
  .fig.in .lat [data-lane="2"] .lat-dot { transition: transform .35s var(--ease) 1.15s; transform: scale(1); }
  .fig.in .lat [data-lane="3"] .lat-dot { transition: transform .35s var(--ease) 1.65s; transform: scale(1); }
  .fig.in .lat [data-lane="1"] .lat-v { transition-delay: .95s; }
  .fig.in .lat [data-lane="2"] .lat-v { transition-delay: 1.3s; }
  .fig.in .lat [data-lane="3"] .lat-v { transition-delay: 1.8s; }
  .fig.in .lat .lat-v { opacity: 1; }
}

/* ---------- Fig. 02, the 24 hour ring ---------- */
.clock-wrap { display: grid; gap: 18px; justify-items: center; }
.clock { width: 100%; max-width: 260px; height: auto; }
.clock text { font-family: var(--mono); }
.clock-lab text { font-size: 9px; letter-spacing: 0.12em; fill: #55627d; }
.c-big { font-size: 30px; font-weight: 500; fill: var(--signal); letter-spacing: -0.02em; }
.c-sub { font-size: 7.6px; letter-spacing: 0.16em; fill: var(--fg-3); }
.c-gap { filter: drop-shadow(0 0 7px rgba(245,165,36,.6)); }

@media (prefers-reduced-motion: no-preference) {
  .js .clock .c-exposed, .js .clock .c-staffed, .js .clock .c-gap {
    stroke-dasharray: 1; stroke-dashoffset: 1;
  }
  .js .clock .c-big, .js .clock .c-sub, .js .clock .clock-lab { opacity: 0; transition: opacity .6s var(--ease); }
  .fig.in .clock .c-exposed { transition: stroke-dashoffset 1s var(--ease) .1s;  stroke-dashoffset: 0; }
  .fig.in .clock .c-staffed { transition: stroke-dashoffset .6s var(--ease) .8s; stroke-dashoffset: 0; }
  .fig.in .clock .c-gap     { transition: stroke-dashoffset .6s var(--ease) 1.3s; stroke-dashoffset: 0; }
  .fig.in .clock .c-big, .fig.in .clock .c-sub { opacity: 1; transition-delay: 1.6s; }
  .fig.in .clock .clock-lab { opacity: 1; transition-delay: .4s; }
}

.clock-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .82rem; color: var(--fg-2); }
.clock-key li { display: flex; align-items: center; gap: 10px; }
.clock-key i { width: 16px; height: 4px; border-radius: 2px; flex: 0 0 16px; }
.k-exposed { background: #4a3a1c; }
.k-staffed { background: var(--scan); }
.k-gap     { background: var(--signal); }

/* ---------- fact panel (verifiable numbers only) ---------- */
.facts { display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr);
  background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.fact { background: var(--ink-2); padding: 24px 20px; position: relative; }
.fact::before {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 44px;
  background: var(--signal); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .7s var(--ease);
}
.fact.in::before { transform: scaleX(1); }
.fact .n { font-family: var(--mono); font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--signal);
  font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.fact .k { font-size: 0.86rem; color: var(--fg-2); margin-top: 10px; }
.fact .src { font-family: var(--mono); font-size: 0.66rem; color: var(--fg-3); margin-top: 10px; letter-spacing: 0.06em; }

/* ---------- service list (pre-license: descriptive, NOT solicitation) ---------- */
.svc { display: grid; gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.svc-row { background: var(--ink-2); padding: 24px 22px; display: grid; gap: 16px;
  grid-template-columns: 44px 1fr auto; align-items: start; position: relative;
  transition: background .25s var(--ease); }
.svc-row::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--signal) 0%, rgba(245,165,36,0) 62%);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--ease);
}
.svc-row:hover { background: #141b2b; }
.svc-row:hover::before { transform: scaleX(1); }
.svc-row .ico { width: 44px; height: 44px; transition: transform .35s var(--ease); }
.svc-row:hover .ico { transform: translateX(2px) scale(1.06); }
.svc-row h3 { margin: 0 0 5px; font-size: 1.08rem; }
.svc-row p { margin: 0; font-size: 0.94rem; }
.tag {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 100px; white-space: nowrap; border: 1px solid var(--line);
  color: var(--fg-3); align-self: center;
}
.tag.live { color: var(--ok); border-color: rgba(62,207,142,0.35); background: rgba(62,207,142,0.07); }
.tag.pending { color: var(--signal); border-color: var(--signal-dim); background: var(--signal-wash); }

/* ---------- callout ----------
   Framed by corner brackets, not a side tab. The bracket is a reticle:
   it reads as "this has been looked at and confirmed", which is the
   whole product. It is also drawn from the same geometry as the mark. */
.callout {
  border: 1px solid var(--line);
  background: var(--ink-2); border-radius: var(--radius);
  padding: 24px 26px; margin: 30px 0; position: relative;
}
.callout::before, .callout::after {
  content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none;
  border-color: var(--signal); border-style: solid; border-width: 0;
  transition: opacity .5s var(--ease);
}
/* without JS nothing ever gets .in, so the reticle must start visible */
.js .callout::before, .js .callout::after { opacity: 0; }
.callout::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.callout::after  { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.callout.in::before, .callout.in::after { opacity: 1; }
.callout p:last-child { margin-bottom: 0; }
.callout.cool::before, .callout.cool::after { border-color: var(--scan); }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line-soft); padding: 52px 0 40px; background: var(--ink-2);
  position: relative; overflow: hidden; }
.foot-field { position: absolute; left: 0; right: 0; bottom: 0; height: 260px; pointer-events: none; }
.foot-field svg { width: 100%; height: 100%; }
.site-foot .wrap { position: relative; z-index: 1; }
.foot-grid { display: grid; gap: 30px; grid-template-columns: 2fr 1fr 1fr; }
.foot-grid h4 { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-3); margin: 0 0 14px; font-weight: 400; }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot-links a { color: var(--fg-2); font-size: 0.92rem; }
.foot-links a:hover { color: var(--fg); }
.foot-legal { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line-soft);
  font-size: 0.82rem; color: var(--fg-3); }
.foot-legal p { font-size: 0.82rem; color: var(--fg-3); margin: 0 0 7px; }

/* LICENSE SLOT. Occ. Code 1702.131 requires the DPS license number
   in advertising once the Class B issues. This element is the slot.
   Until then it carries the pre-license notice. */
.license-slot {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em;
  color: var(--fg-3); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 11px 14px; margin-top: 18px; display: inline-block;
}

/* ---------- reveal (guarded) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal, .js .svc-row { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .reveal.in, .js .svc-row.in { opacity: 1; transform: none; }
  .svc-row:nth-child(2) { transition-delay: .07s; }
  .svc-row:nth-child(3) { transition-delay: .14s; }
  .svc-row:nth-child(4) { transition-delay: .21s; }
}

/* ============================================================
   PHONE. Hand-laid, not a shrunk desktop.
   The copy moves to the bottom third, the veil flips from a left
   wash to a bottom wash, and the readout and the record become two
   small chips along the top so neither one covers the scene.
   ============================================================ */
@media (max-width: 860px) {
  .nav { display: none; }
  .nav.open {
    display: flex; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink-2); border-bottom: 1px solid var(--line);
    padding: 8px 0;
  }
  .nav.open a { padding: 14px var(--gutter); border-top: 1px solid var(--line-soft); }
  .nav.open .nav-cta { border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; }
  .nav-toggle { display: block; }
  .site-head .wrap { position: relative; }

  /* the scene reads from the bottom up on a phone */
  .scene-veil {
    background:
      radial-gradient(120% 70% at 50% 30%, rgba(10,14,22,0) 30%, rgba(10,14,22,.5) 100%),
      linear-gradient(180deg, rgba(10,14,22,.7) 0%, rgba(10,14,22,0) 26%, rgba(10,14,22,.55) 52%, rgba(10,14,22,.95) 82%);
  }
  .beat { align-content: end; padding-block: 12vh 9vh; min-height: 100vh; min-height: 100svh; }
  .beat-in { max-width: 100%; }
  .beat h2 { max-width: 18ch; }
  .beat p { max-width: 100%; font-size: 1rem; }
  .beat-note { margin-top: 20px; font-size: .74rem; }
  .beat-cta { margin-top: 22px; }
  .beat-cta .btn { flex: 1 1 auto; justify-content: center; }

  /* readout and record become top chips, side by side, clear of the copy */
  .hud {
    top: 82px; left: var(--gutter); right: auto; min-width: 0;
    padding: 9px 11px 8px; font-size: .62rem;
  }
  .hud-row { gap: 12px; padding: 2px 0; }
  .scene-progress { margin-top: 8px; }

  .clip {
    right: var(--gutter); bottom: auto; top: 82px; width: 132px; padding: 7px;
  }
  .clip-frame svg { display: block; }
  .clip figcaption { margin-top: 6px; gap: 1px; }
  .clip-k { font-size: .54rem; }
  .clip-time { font-size: .74rem; }
  .clip-m { font-size: .5rem; letter-spacing: .06em; }

  .det-label { font-size: .54rem; top: -17px; }
  .scene-cap { font-size: .53rem; bottom: 8px; padding: 0 var(--gutter); }

  .grid-2 { grid-template-columns: 1fr; gap: 22px; }
  .facts { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }

  .fig { padding: 20px 18px 16px; }
  .fig.split { grid-template-columns: 1fr; gap: 24px; }
  .clock-wrap { justify-items: start; }
  .clock { max-width: 210px; align-self: center; justify-self: center; }
  .clock-key { font-size: .8rem; }

  /* the service row restacks: icon and tag share a top line, copy below */
  .svc-row { grid-template-columns: 36px 1fr; grid-template-areas: "ico tag" "copy copy"; gap: 12px; }
  .svc-row .ico { grid-area: ico; width: 36px; height: 36px; }
  .svc-row .tag { grid-area: tag; justify-self: start; align-self: center; }
  .svc-row .svc-copy { grid-area: copy; }

  body { font-size: 16px; }
}

@media (max-width: 420px) {
  :root { --gutter: 16px; }
  .clip { width: 116px; }
  .hud { font-size: .58rem; }
  .beat-n { font-size: .68rem; letter-spacing: .16em; }
  .beat-g { width: 22px; height: 22px; flex-basis: 22px; }
}

/* ============================================================
   REDUCED MOTION. Everything holds still, and the figures are
   simply drawn complete. Nothing is hidden behind an animation.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .beat-in { opacity: 1; transform: none; }
  .js .svc-row { opacity: 1; transform: none; }
}

/* ============================================================
   SHORT VIEWPORTS. A laptop with a bookmarks bar is about 680px
   tall, and a small phone is 667px. A beat has to fit inside one
   screen: if it does not, its own button falls below the fold and
   the beat stops lining up with the scene behind it.
   ============================================================ */
@media (max-height: 820px) {
  .beat { padding-block: 9vh 8vh; }
  .hero h1 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); }
  .beat h2 { font-size: clamp(1.7rem, 3.8vw, 2.4rem); }
  .beat p.lead { font-size: 1.02rem; }
  .beat p { font-size: 1rem; }
  .status-line { margin-bottom: 16px; }
  .beat-cta { margin-top: 20px; }
  .beat-note { margin-top: 18px; }
  .beat-n { margin-bottom: 12px; }
}

@media (max-height: 680px) {
  .beat { padding-block: 7vh 6vh; }
  .hero h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
  .beat h2 { font-size: clamp(1.55rem, 3.4vw, 2rem); }
  .beat p.lead, .beat p { font-size: .95rem; line-height: 1.55; }
  .scene-cap { display: none; }
  .hud { top: 78px; padding: 9px 11px 8px; font-size: .64rem; }
}

/* tables and wide figures never break the page */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- method cards: 3P mapped onto the protection functions ---------- */
.model {
  display: grid; gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(26px, 3.6vw, 40px);
}
.model-card { background: var(--ink-2); padding: 28px 22px 30px; position: relative; }
.model-card::before {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 46px;
  background: var(--signal); transform-origin: 0 50%;
  transition: transform .7s var(--ease);
}
/* without JS nothing ever gets .in, so the rule has to start drawn */
.js .model-card::before { transform: scaleX(0); }
.model.in .model-card::before { transform: scaleX(1); }
.model.in .model-card:nth-child(2)::before { transition-delay: .12s; }
.model.in .model-card:nth-child(3)::before { transition-delay: .24s; }
.model-g { width: 30px; height: 30px; display: block; color: var(--signal); margin-bottom: 15px; }
.model-card h3 { margin: 0; font-size: 1.16rem; letter-spacing: -0.01em; }
.model-fn {
  display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--scan); margin: 8px 0 15px;
}
.model-card p { margin: 0; font-size: 0.93rem; line-height: 1.72; color: var(--fg-2); }
.model-note {
  font-family: var(--mono); font-size: 0.74rem; line-height: 1.75; color: var(--fg-3);
  margin-top: 18px; max-width: 78ch;
}
@media (max-width: 880px) {
  .model { grid-template-columns: 1fr; }
  .model-card { padding: 24px 18px 26px; }
}

/* ---------- numbered process list on the contact page ---------- */
.steps { list-style: none; counter-reset: s; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; }
.steps li {
  counter-increment: s; position: relative; padding-left: 40px;
  color: var(--fg-2); font-size: 0.94rem; line-height: 1.7;
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: var(--mono); font-size: 0.7rem; color: var(--signal);
  border: 1px solid var(--line); border-radius: var(--radius);
  width: 26px; height: 22px; display: grid; place-items: center;
}

/* ---------- FAQ. No JS: details/summary carries it. ---------- */
.faq {
  display: grid; gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden;
  margin-top: clamp(24px, 3vw, 36px);
}
.faq details { background: var(--ink-2); }
.faq summary {
  cursor: pointer; list-style: none; padding: 19px 22px;
  display: flex; gap: 14px; align-items: baseline;
  font-weight: 600; font-size: 1rem; color: var(--fg);
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+"; font-family: var(--mono); color: var(--signal);
  font-size: 0.95rem; line-height: 1.35; flex: none; width: 12px;
}
.faq details[open] summary::before { content: "\2212"; }
.faq summary:hover { color: var(--signal); }
.faq .faq-a {
  margin: 0; padding: 0 22px 22px 48px;
  color: var(--fg-2); font-size: 0.94rem; line-height: 1.78;
}
@media (max-width: 620px) {
  .faq summary { padding: 17px 18px; font-size: 0.96rem; }
  .faq .faq-a { padding: 0 18px 20px 18px; }
}

/* anchored sections have to clear the sticky header */
section[id] { scroll-margin-top: 84px; }

/* ---------- reference pages: breadcrumb, freshness stamp, data tables ---------- */
.crumb {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--fg-3); margin-bottom: 18px;
}
.crumb a { color: var(--fg-3); }
.crumb a:hover { color: var(--signal); }
.crumb span { color: var(--fg-2); }

.stamp {
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.7; color: var(--fg-3);
  border-left: 2px solid var(--line); padding-left: 14px;
  margin: 22px 0 34px; max-width: 72ch;
}

.tbl {
  width: 100%; border-collapse: collapse; font-size: 0.93rem; margin: 4px 0 10px;
  border: 1px solid var(--line-soft);
}
.tbl.wide { min-width: 780px; }
.tbl th, .tbl td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.tbl thead th {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 400; border-bottom: 1px solid var(--line);
  white-space: nowrap; background: var(--ink-2);
}
.tbl tbody th { color: var(--fg-2); font-weight: 500; white-space: nowrap; }
.tbl td { color: var(--fg-2); }
.tbl td.num {
  font-family: var(--mono); color: var(--fg);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tbl tbody tr:hover { background: var(--ink-2); }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* the scroll container needs a visible edge so people know it moves */
.scroll-x { position: relative; }

@media (max-width: 620px) {
  .tbl th, .tbl td { padding: 10px 12px; font-size: 0.88rem; }
}

/* the comparison table is wider than a phone, so the row labels stay put */
.tbl.wide tbody th[scope="row"] {
  position: sticky; left: 0; z-index: 1;
  background: var(--ink); border-right: 1px solid var(--line-soft);
}
.tbl.wide thead th:first-child {
  position: sticky; left: 0; z-index: 2;
  background: var(--ink-2); border-right: 1px solid var(--line-soft);
}
.tbl.wide tbody tr:hover th[scope="row"] { background: var(--ink-2); }

/* ======================================================================
   SERVICE PAGE FIGURES
   Five bespoke graphics, one per consulting service. Each makes that
   service's own argument. Shared: mono labels, signal amber for the thing
   that costs money, scan blue for the thing that is working.
   ====================================================================== */

.gets { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }
.gets li {
  position: relative; padding-left: 26px;
  color: var(--fg-2); font-size: 0.96rem; line-height: 1.7;
}
.gets li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--signal);
}
.svc-more { display: grid; gap: 9px; margin-top: 4px; }
.svc-more a { font-size: 0.96rem; }

.rk, .esc, .wk, .bid, .fee { width: 100%; height: auto; display: block; }
.rk text, .esc text, .wk text, .bid text, .fee text { font-family: var(--mono); }

/* ---------- Fig: risk register plot ---------- */
.rk { min-width: 560px; }
.rk-band { fill: var(--signal-wash); }
.rk-grid line { stroke: var(--line-soft); stroke-width: 1; }
.rk-axis { stroke: var(--line); stroke-width: 1; }
.rk-ax { font-size: 9.5px; letter-spacing: 0.16em; fill: var(--fg-3); }
.rk-cnr { font-size: 9px; letter-spacing: 0.16em; fill: var(--signal); opacity: .85; }
.rk-lab { font-size: 10.5px; fill: var(--fg-2); }
.rk-lab.hot { fill: var(--fg); }
.rk-dot { transform-box: fill-box; transform-origin: center; }
.rk-dot.low { fill: #3d4a63; }
.rk-dot.mid { fill: #8a5c14; }
.rk-dot.hot { fill: var(--signal); filter: drop-shadow(0 0 6px rgba(245,165,36,.55)); }

/* ---------- Fig: escalation ladder ---------- */
.esc { min-width: 520px; }
.esc-spine { stroke: var(--line); stroke-width: 2; fill: none; }
.esc-dot { fill: var(--signal); }
.esc-arc { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linecap: round; opacity: .5; }
.esc-k { font-size: 12px; letter-spacing: 0.14em; fill: var(--fg); }
.esc-v { font-size: 11.5px; fill: var(--fg-3); }
.esc-note { font-size: 10px; letter-spacing: 0.06em; fill: var(--fg-3); }
.esc-step:last-of-type .esc-dot { fill: var(--scan); }
.esc-step:last-of-type .esc-arc { stroke: var(--scan); }
.esc-step:last-of-type .esc-k { fill: var(--scan); }

/* ---------- Fig: week of exposure ---------- */
.wk { min-width: 480px; }
.wk-d { font-size: 9.5px; letter-spacing: 0.14em; fill: var(--fg-3); }
.wk-h { font-size: 9px; fill: #55627d; }
.wk-c.off { fill: var(--ink-3); }
.wk-c.st  { fill: var(--scan); opacity: .78; }
.wk-c.gap { fill: var(--signal); opacity: .62; }

/* ---------- Fig: bid comparison ---------- */
.bid { min-width: 560px; }
.bid-spine { stroke: var(--line); stroke-width: 1.5; fill: none; }
.bid-h { font-size: 10px; letter-spacing: 0.16em; fill: var(--fg-3); }
.bid-r { font-size: 11.5px; fill: var(--fg-2); }
.bid-c.yes { fill: rgba(74,158,255,.16); stroke: var(--scan); stroke-width: 1; }
.bid-c.no  { fill: rgba(245,165,36,.10); stroke: var(--signal-dim); stroke-width: 1; stroke-dasharray: 3 3; }
.bid-x { font-size: 9px; letter-spacing: 0.08em; fill: var(--signal); }
.bid-note  { font-size: 10px; letter-spacing: 0.08em; fill: var(--fg-3); }
.bid-note2 { font-size: 10px; letter-spacing: 0.08em; fill: var(--fg-3); }

/* ---------- Fig: fee escalator ---------- */
.fee { min-width: 540px; }
.fee-base { stroke: var(--line); stroke-width: 1; }
.fee-b { transform-box: fill-box; transform-origin: bottom; }
.fee-b.z  { fill: var(--ink-3); }
.fee-b.t1 { fill: #6b4a12; }
.fee-b.t2 { fill: #a06a15; }
.fee-b.t3 { fill: var(--signal); }
.fee-v { font-size: 10px; fill: var(--fg-2); }
.fee-n { font-size: 9.5px; fill: #55627d; }
.fee-ax { font-size: 9.5px; letter-spacing: 0.14em; fill: var(--fg-3); }
.fee-tot { font-size: 12px; fill: var(--signal); letter-spacing: 0.04em; }
.fee-free { font-size: 9px; letter-spacing: 0.16em; fill: #55627d; }
.fee-run {
  fill: none; stroke: var(--scan); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- motion. Static and complete without JS or with reduce. ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rk-dot   { transform: scale(0); }
  .js .rk-band  { opacity: 0; }
  .js .fig.in .rk-dot {
    transform: scale(1);
    transition: transform .5s cubic-bezier(.2,1.5,.4,1) var(--d);
  }
  .js .fig.in .rk-band { opacity: 1; transition: opacity .8s var(--ease) .15s; }

  .js .esc-spine { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .esc-arc   { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .esc-step  { opacity: 0; }
  .js .fig.in .esc-spine { stroke-dashoffset: 0; transition: stroke-dashoffset .8s var(--ease); }
  .js .fig.in .esc-step  { opacity: 1; transition: opacity .5s var(--ease) var(--d); }
  .js .fig.in .esc-arc   { stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease) var(--d); }

  .js .wk-c { opacity: 0; }
  .js .fig.in .wk-c.off { opacity: 1; transition: opacity .4s var(--ease) var(--d); }
  .js .fig.in .wk-c.st  { opacity: .78; transition: opacity .4s var(--ease) var(--d); }
  .js .fig.in .wk-c.gap { opacity: .62; transition: opacity .4s var(--ease) var(--d); }

  .js .bid-spine { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .bid-c { opacity: 0; }
  .js .bid-x { opacity: 0; }
  .js .fig.in .bid-spine { stroke-dashoffset: 0; transition: stroke-dashoffset .7s var(--ease); }
  .js .fig.in .bid-c { opacity: 1; transition: opacity .45s var(--ease) var(--d); }
  .js .fig.in .bid-x { opacity: 1; transition: opacity .5s var(--ease) 1.1s; }

  .js .fee-b { transform: scaleY(0); }
  .js .fee-v { opacity: 0; }
  .js .fee-run { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .fig.in .fee-b { transform: scaleY(1); transition: transform .55s var(--ease) var(--d); }
  .js .fig.in .fee-v { opacity: 1; transition: opacity .4s var(--ease) 1s; }
  .js .fig.in .fee-run { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease) .5s; }
}

@media (max-width: 620px) {
  .gets li { font-size: 0.93rem; }
  .steps li { font-size: 0.93rem; }
}

/* ---------- desktop / phone figure swap ----------
   Two separately composed SVGs per figure. The phone one is not the desktop
   one scaled down: it is laid out for a narrow tall screen so the argument
   is on screen without anyone having to scroll sideways to find it. */
.fig-phone { display: none; }
.fig-desk  { display: block; }
@media (max-width: 720px) {
  .fig-desk  { display: none; }
  .fig-phone { display: block; }
}

/* phone figures size to the column, no min-width, no sideways scroll */
.rk-ph, .esc-ph, .wk-ph, .bid-ph, .fee-ph { min-width: 0; width: 100%; height: auto; }

/* keyed finding list under the phone risk plot */
.rk-key { font-size: 11px; fill: var(--fg-2); }
.rk-key.hot { fill: var(--fg); }

/* crossed cell in the phone bid grid */
.bid-slash {
  stroke: var(--signal); stroke-width: 1.6; fill: none; stroke-linecap: round;
}

/* legend under the phone week grid */
.wk-key text { font-size: 9px; fill: var(--fg-3); }

@media (prefers-reduced-motion: no-preference) {
  .js .bid-slash { opacity: 0; }
  .js .fig.in .bid-slash { opacity: 1; transition: opacity .5s var(--ease) .9s; }
}