/* ==========================================================================
   Deputy Technologies — design system v2
   Light-first, fewer components, more air. Palette from the logo files.
   ========================================================================== */

:root{
  --navy:   #0F477B;
  --signal: #1178EF;
  --cyan:   #36BBC9;
  --mint:   #4CE4B2;
  --steel:  #47688B;

  --ink:    #072338;
  --paper:  #FFFFFF;
  --tint:   #F5F8FB;
  --tint-2: #EDF3F8;

  --text:   #0E2A44;
  --muted:  #5B7590;
  --line:   #E3EAF1;
  --line-d: rgba(255,255,255,.14);

  --ok:   #1B9C74;
  --warn: #D68A22;
  --stop: #CF5238;

  --display:"Jost", ui-sans-serif, system-ui, sans-serif;
  --body:   "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --mono:   "IBM Plex Mono", ui-monospace, monospace;

  --max: 1140px;
  --gutter: 26px;
  --grad: linear-gradient(112deg, var(--signal), var(--cyan) 55%, var(--mint));
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--body); font-size:17px; line-height:1.6;
  letter-spacing:-.006em; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
p{ margin:0 0 1em; }
::selection{ background:rgba(17,120,239,.16); }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; border-radius:4px; }

/* ---------- layout ---------------------------------------------------- */

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }

.s{ padding:96px 0; }
.s--tint{ background:var(--tint); }
.s--ink{ background:var(--ink); color:#E7F0F7; }
.s--line{ border-top:1px solid var(--line); }
@media (max-width:700px){ .s{ padding:64px 0; } }

/* ---------- type ------------------------------------------------------ */

h1,h2,h3,h4{ font-family:var(--display); font-weight:500; margin:0; letter-spacing:-.024em; line-height:1.1; }

.h1{ font-size:clamp(2.6rem, 5.6vw, 4rem); }
.h2{ font-size:clamp(2rem, 3.7vw, 2.75rem); }
.h3{ font-size:1.15rem; letter-spacing:-.014em; }

.sub{
  font-size:clamp(1.08rem, 1.5vw, 1.22rem);
  color:var(--muted); line-height:1.55; max-width:56ch; margin:18px 0 0;
}
.s--ink .sub{ color:#9FBAD1; }

.em{ color:var(--signal); }
.s--ink .em{ color:var(--mint); }

.head{ max-width:62ch; margin-bottom:52px; }
.head--mid{ margin-left:auto; margin-right:auto; text-align:center; }
.head--mid .sub{ margin-left:auto; margin-right:auto; }

.kicker{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel); margin:0 0 18px;
}
.s--ink .kicker{ color:#7E9BB6; }

/* ---------- buttons --------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.95rem; font-weight:500; letter-spacing:-.01em;
  padding:13px 22px; border-radius:8px; border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.btn svg{ transition:transform .18s ease; }
.btn:hover svg{ transform:translateX(3px); }

.btn--go{ background:var(--navy); color:#fff; }
.btn--go:hover{ background:#0B3A66; transform:translateY(-1px); }

.btn--ghost{ border-color:var(--line); color:var(--text); }
.btn--ghost:hover{ border-color:var(--navy); background:var(--tint); }

.s--ink .btn--go, .cta .btn--go{ background:#fff; color:var(--ink); }
.s--ink .btn--go:hover, .cta .btn--go:hover{ background:#E7F0F7; }
.s--ink .btn--ghost, .cta .btn--ghost{ border-color:var(--line-d); color:#E7F0F7; }
.s--ink .btn--ghost:hover, .cta .btn--ghost:hover{ border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.06); }

.btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.head--mid .btns{ justify-content:center; }

/* ---------- nav ------------------------------------------------------- */

.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav__in{
  display:flex; align-items:center; gap:8px; height:68px;
  max-width:var(--max); margin:0 auto; padding:0 var(--gutter);
}
.nav__logo{ display:flex; align-items:center; flex:none; margin-right:26px; }
.nav__logo img{ height:26px; width:auto; }
.nav__links{ display:flex; align-items:center; gap:2px; }
.nav__a{
  font-size:.93rem; text-decoration:none; color:var(--text);
  padding:9px 13px; border-radius:7px; white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.nav__a:hover{ background:var(--tint); color:var(--navy); }
.nav__a[aria-current="page"]{ color:var(--signal); font-weight:500; }
.nav__sp{ flex:1; }
.nav__end{ display:flex; align-items:center; gap:10px; flex:none; }

.drop{ position:relative; }
.drop__b{
  font-family:var(--body); font-size:.93rem; color:var(--text);
  background:none; border:0; cursor:pointer; padding:9px 13px; border-radius:7px;
  display:inline-flex; align-items:center; gap:6px;
}
.drop__b:hover{ background:var(--tint); color:var(--navy); }
.drop__b svg{ opacity:.5; transition:transform .2s ease; }
.drop[data-open="true"] .drop__b svg{ transform:rotate(180deg); }
.drop__m{
  position:absolute; top:calc(100% + 8px); left:-4px; width:250px; padding:7px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 18px 40px -20px rgba(10,39,64,.3);
  opacity:0; visibility:hidden; transform:translateY(-5px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.drop[data-open="true"] .drop__m{ opacity:1; visibility:visible; transform:none; }
.drop__i{ display:block; padding:10px 12px; border-radius:8px; text-decoration:none; font-size:.93rem; }
.drop__i:hover{ background:var(--tint); }
.drop__i[aria-current="page"]{ color:var(--signal); }

.burger{ display:none; background:none; border:0; padding:8px; cursor:pointer; color:var(--navy); }
@media (max-width:860px){
  .nav__links{ display:none; }
  .burger{ display:block; }
  .nav__end .btn--ghost{ display:none; }
}
@media (max-width:520px){
  :root{ --gutter:18px; }
  .nav__in{ height:60px; }
  .nav__logo{ margin-right:0; }
  .nav__logo img{ height:22px; }
  .nav__end .btn{ padding:10px 14px; font-size:.86rem; }
}

.sheet{ display:none; background:#fff; border-bottom:1px solid var(--line); padding:6px var(--gutter) 20px; }
.sheet[data-open="true"]{ display:block; }
.sheet a{ display:block; padding:12px 0; text-decoration:none; border-bottom:1px solid var(--line); }
@media (min-width:861px){ .sheet{ display:none !important; } }

/* ---------- hero ------------------------------------------------------ */

.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(760px 420px at 88% -8%, rgba(17,120,239,.09), transparent 62%),
    radial-gradient(620px 380px at 2% 104%, rgba(76,228,178,.10), transparent 60%),
    #fff;
  padding:84px 0 76px;
  border-bottom:1px solid var(--line);
}
@media (max-width:700px){ .hero{ padding:56px 0 56px; } }
.hero .sub{ max-width:52ch; }

.lockup{ display:flex; align-items:center; gap:14px; margin-bottom:26px; flex-wrap:wrap; }
.lockup img{ height:38px; width:auto; }
.lockup span{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel); padding:6px 11px; border:1px solid var(--line); border-radius:99px;
}
@media (max-width:520px){ .lockup img{ height:30px; } }

/* ---------- run card (the hero artefact) ------------------------------ */

.run{
  margin-top:56px; max-width:780px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 60px -34px rgba(10,39,64,.34);
  overflow:hidden;
}
.run__top{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:15px 20px; border-bottom:1px solid var(--line); background:var(--tint);
}
.run__top b{ font-family:var(--display); font-weight:500; font-size:1rem; color:var(--navy); }
.run__top .sp{ flex:1; }
.run__top small{ font-family:var(--mono); font-size:.65rem; letter-spacing:.11em; text-transform:uppercase; color:var(--steel); }

.run__line{
  display:grid; grid-template-columns:22px 1fr auto; gap:14px; align-items:center;
  padding:15px 20px; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(6px);
  transition:opacity .45s ease, transform .45s ease;
}
.run[data-run="1"] .run__line{ opacity:1; transform:none; }
.run__line:nth-of-type(1){ transition-delay:.05s; }
.run__line:nth-of-type(2){ transition-delay:.35s; }
.run__line:nth-of-type(3){ transition-delay:.65s; }
.run__line:nth-of-type(4){ transition-delay:.95s; }
.run__line:nth-of-type(5){ transition-delay:1.25s; }

.run__tick{
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  background:rgba(27,156,116,.13);
}
.run__tick svg{ width:11px; height:11px; }

.run__t{ font-size:.95rem; min-width:0; }
.run__v{ font-family:var(--mono); font-size:.78rem; color:var(--steel); white-space:nowrap; }

.run__gate{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:17px 20px; background:rgba(214,138,34,.07);
  opacity:0; transform:translateY(6px);
  transition:opacity .5s ease 1.55s, transform .5s ease 1.55s;
}
.run[data-run="1"] .run__gate{ opacity:1; transform:none; }
.run__gate b{ font-family:var(--display); font-weight:500; font-size:.99rem; color:#8A5D14; flex:1; min-width:190px; }
.run__gate .mini{
  font-size:.85rem; font-weight:500; padding:8px 16px; border-radius:7px;
  border:1px solid var(--line); background:#fff; color:var(--text);
}
.run__gate .mini--go{ background:var(--navy); border-color:var(--navy); color:#fff; }

@media (max-width:560px){
  .run__line{ grid-template-columns:22px 1fr; }
  .run__v{ grid-column:2; }
}

/* ---------- tool strip ------------------------------------------------- */

.strip{ text-align:center; }
.strip p{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--steel); margin:0 0 22px;
}
.strip ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:14px 40px; justify-content:center;
}
.strip li{
  font-family:var(--display); font-weight:500; font-size:1.08rem;
  color:var(--steel); letter-spacing:-.014em;
}

/* ---------- feature trio ---------------------------------------------- */

.trio{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px; }
@media (max-width:860px){ .trio{ grid-template-columns:minmax(0,1fr); gap:34px; } }
.trio h3{ margin:0 0 8px; }
.trio p{ margin:0; color:var(--muted); font-size:.97rem; }
.s--ink .trio p{ color:#9FBAD1; }
.trio__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:9px; margin-bottom:16px;
  background:var(--tint-2); color:var(--navy);
  font-family:var(--mono); font-size:.72rem;
}
.s--ink .trio__n{ background:rgba(255,255,255,.08); color:var(--mint); }

/* ---------- cards ------------------------------------------------------ */

.cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.cards--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:860px){ .cards,.cards--3{ grid-template-columns:minmax(0,1fr); } }

.card{
  background:#fff; border:1px solid var(--line); border-radius:13px;
  padding:28px 26px; text-decoration:none; display:flex; flex-direction:column;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card h3{ margin:0 0 9px; }
.card p{ margin:0; color:var(--muted); font-size:.96rem; }
.card__k{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--steel); margin-bottom:15px;
}
a.card:hover{ border-color:rgba(17,120,239,.42); box-shadow:0 16px 36px -24px rgba(15,71,123,.45); transform:translateY(-2px); }
.card__go{
  margin-top:auto; padding-top:22px; font-size:.88rem; font-weight:500; color:var(--signal);
  display:inline-flex; align-items:center; gap:7px;
}
a.card:hover .card__go svg{ transform:translateX(3px); }
.card__go svg{ transition:transform .18s ease; }

/* ---------- checklist -------------------------------------------------- */

.checks{ list-style:none; margin:0; padding:0; }
.checks li{
  display:grid; grid-template-columns:20px 1fr; gap:14px; align-items:start;
  padding:15px 0; border-top:1px solid var(--line);
}
.checks li:last-child{ border-bottom:1px solid var(--line); }
.s--ink .checks li{ border-color:var(--line-d); }
.checks b{ font-family:var(--display); font-weight:500; font-size:1rem; display:block; letter-spacing:-.012em; }
.checks p{ margin:3px 0 0; color:var(--muted); font-size:.94rem; }
.s--ink .checks p{ color:#9FBAD1; }
.checks .dot{ width:18px; height:18px; border-radius:50%; margin-top:3px; background:var(--grad); display:grid; place-items:center; }
.checks .dot svg{ width:10px; height:10px; }

/* ---------- plain two-column list -------------------------------------- */

.plain{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px; }
@media (max-width:760px){ .plain{ grid-template-columns:minmax(0,1fr); } }
.plain div{ padding:20px 0; border-top:1px solid var(--line); }
.s--ink .plain div{ border-color:var(--line-d); }
.plain b{ font-family:var(--display); font-weight:500; font-size:1.02rem; display:block; letter-spacing:-.012em; }
.plain span{ display:block; color:var(--muted); font-size:.94rem; margin-top:4px; }
.s--ink .plain span{ color:#9FBAD1; }

/* ---------- stage row --------------------------------------------------- */

.stage{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
@media (max-width:800px){ .stage{ grid-template-columns:minmax(0,1fr); } }
.stage > div{ border-top:2px solid var(--line); padding-top:20px; }
.stage b{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  display:block; margin-bottom:10px;
}
.stage h3{ margin:0 0 7px; }
.stage p{ margin:0; color:var(--muted); font-size:.95rem; }
.s--ink .stage p{ color:#9FBAD1; }
.stage--a{ border-top-color:var(--signal); }
.stage--a b{ color:var(--signal); }
.stage--b{ border-top-color:var(--ok); }
.stage--b b{ color:var(--ok); }
.stage--c{ border-top-color:var(--warn); }
.stage--c b{ color:var(--warn); }

/* ---------- metric row -------------------------------------------------- */

.metrics{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 40px; }
@media (max-width:760px){ .metrics{ grid-template-columns:minmax(0,1fr); } }
.metrics div{ padding:26px 0; border-top:1px solid var(--line); }
.metrics b{ display:block; font-family:var(--display); font-weight:500; font-size:2.3rem; color:var(--navy); letter-spacing:-.03em; line-height:1; }
.metrics span{ display:block; color:var(--muted); font-size:.95rem; margin-top:10px; }

/* ---------- shipment spine (traceroot only) ---------------------------- */

.spine{
  margin-top:52px; background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 60px -34px rgba(10,39,64,.3); overflow:hidden;
}
.spine__top{
  display:flex; align-items:center; gap:10px; padding:14px 20px;
  border-bottom:1px solid var(--line); background:var(--tint);
  font-family:var(--mono); font-size:.65rem; letter-spacing:.11em; text-transform:uppercase; color:var(--steel);
}
.spine__top b{ color:var(--navy); font-weight:500; letter-spacing:.11em; }
.spine__top .sp{ flex:1; }
.spine__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding:24px 18px 10px; }
.spine__svg{ width:100%; height:auto; display:block; min-width:700px; }
.spine__key{
  display:flex; flex-wrap:wrap; gap:8px 24px; padding:4px 20px 18px;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--steel);
}
.spine__key div{ display:flex; align-items:center; gap:8px; }
.pip{ width:9px; height:9px; border-radius:50%; display:block; }

.sp-rail{ fill:none; stroke:var(--line); stroke-width:1.5; }
.sp-tie{ stroke:var(--line); stroke-width:1; stroke-dasharray:3 4; }
.sp-lane{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; fill:var(--steel); }
.sp-cap{ font-family:var(--body); font-size:11.5px; fill:var(--muted); }
.sp-cap--hold{ fill:#B0730F; }
.sp-node{ opacity:0; transform:scale(.4); transform-box:fill-box; transform-origin:center;
  transition:opacity .3s ease, transform .36s cubic-bezier(.34,1.5,.64,1); }
.sp-node.on{ opacity:1; transform:scale(1); }
.sp-node[data-s="done"] circle{ fill:var(--mint); }
.sp-node[data-s="live"] circle{ fill:var(--signal); }
.sp-node[data-s="hold"] circle{ fill:var(--warn); }
.sp-node[data-s="idle"] circle{ fill:#fff; stroke:var(--line); stroke-width:1.5; }

/* ---------- CTA -------------------------------------------------------- */

.cta{
  background:
    radial-gradient(680px 380px at 18% 6%, rgba(17,120,239,.22), transparent 60%),
    radial-gradient(560px 340px at 92% 98%, rgba(76,228,178,.16), transparent 58%),
    var(--ink);
  color:#E7F0F7; border-radius:18px; padding:60px 48px; text-align:center;
}
.cta .sub{ color:#9FBAD1; margin-left:auto; margin-right:auto; }
.cta .btns{ justify-content:center; }
@media (max-width:640px){ .cta{ padding:42px 22px; border-radius:14px; } }

/* ---------- footer ------------------------------------------------------ */

.foot{ background:var(--ink); color:#9FBAD1; padding:60px 0 30px; }
.foot__g{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; }
@media (max-width:700px){ .foot__g{ grid-template-columns:minmax(0,1fr); gap:30px; } }
.foot img{ height:24px; width:auto; margin-bottom:16px; }
.foot p{ font-size:.9rem; max-width:34ch; color:#87A3BC; }
.foot h5{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:#6C89A5; margin:0 0 13px; font-weight:500; }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin-bottom:9px; }
.foot a{ text-decoration:none; font-size:.92rem; color:#BCD1E3; }
.foot a:hover{ color:var(--mint); }
.foot__b{
  margin-top:44px; padding-top:20px; border-top:1px solid var(--line-d);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:#6C89A5;
}

/* ---------- reveal ------------------------------------------------------ */

.rv{ opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease; }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; } }

/* grid children must be free to shrink */
.trio > *, .cards > *, .stage > *, .plain > *, .metrics > *, .foot__g > *{ min-width:0; }

/* ---------- product screenshot ----------------------------------------- */

.shot{
  border:1px solid var(--line); border-radius:13px; overflow:hidden; background:#fff;
  box-shadow:0 26px 60px -36px rgba(10,39,64,.38);
}
.shot__bar{
  display:flex; align-items:center; gap:11px; padding:11px 16px;
  background:var(--tint); border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--steel);
}
.shot__bar b{ color:var(--navy); font-weight:500; letter-spacing:.11em; }
.shot__bar .sp{ flex:1; }
.shot__dots{ display:flex; gap:5px; flex:none; }
.shot__dots i{ width:8px; height:8px; border-radius:50%; background:#CBD8E4; display:block; }
.shot img{ width:100%; height:auto; display:block; }
.shot__cap{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--steel); margin:13px 2px 0; line-height:1.5;
}

/* ---------- high-level flow -------------------------------------------- */

.flow{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:8px; }
.flow__hd{
  display:flex; align-items:baseline; gap:14px; margin-bottom:20px; flex-wrap:wrap;
}
.flow__hd b{ font-family:var(--display); font-weight:500; font-size:1.16rem; color:var(--navy); letter-spacing:-.016em; }
.flow__hd span{ font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); }

.flow__row{ display:flex; align-items:stretch; gap:0; min-width:840px; }
.fnode{
  flex:1; min-width:0; border:1px solid var(--line); border-radius:10px;
  background:#fff; padding:14px 14px 13px; text-align:center;
}
.fnode b{ display:block; font-family:var(--display); font-weight:500; font-size:.95rem; color:var(--navy); letter-spacing:-.012em; line-height:1.25; }
.fnode span{
  display:block; margin-top:7px;
  font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel);
}
.fnode--gate{ border-color:rgba(214,138,34,.42); background:rgba(214,138,34,.05); }
.fnode--gate span{ color:#A9741F; }
.farrow{
  flex:none; width:26px; display:grid; place-items:center; color:var(--line);
}
.farrow svg{ width:14px; height:10px; }

.flow__key{
  display:flex; gap:22px; flex-wrap:wrap; margin-top:16px;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; color:var(--steel);
}
.flow__key div{ display:flex; align-items:center; gap:8px; }
.swatch{ width:11px; height:11px; border-radius:3px; border:1px solid var(--line); background:#fff; display:block; }
.swatch--gate{ border-color:rgba(214,138,34,.5); background:rgba(214,138,34,.14); }

/* ---------- email agent map -------------------------------------------- */

.map{ width:100%; height:auto; display:block; }
.map__line{ stroke:var(--line); stroke-width:1; }
.map__box rect{ fill:#fff; stroke:var(--line); }
.map__box .who{ font-family:var(--display); font-size:13.5px; font-weight:500; fill:var(--navy); }
.map__box .what{ font-family:var(--mono); font-size:9px; letter-spacing:.05em; fill:var(--steel); }
.map__core circle{ fill:var(--navy); }
.map__core .ring{ fill:#fff; stroke:var(--signal); stroke-width:1.6; }
.map__core text{ font-family:var(--display); font-size:13px; font-weight:500; fill:var(--navy); }