/* ============================================================
   HASHOMER — design system

   Built on the Palantir house language:
   one neo-grotesque at regular weight, never bold; a constant
   negative tracking of -0.042em on everything display-sized;
   white ground with near-black text; full-bleed dark media
   sections; tiny uppercase labels with POSITIVE tracking as the
   only other type style. Essentially monochrome — the cyan lives
   only inside the dark plates, where it is baked into the 3D.

   Size does the work that weight normally does. If something
   needs emphasis it gets bigger, not heavier.
   ============================================================ */

:root{
  --white:#FFFFFF;
  --off:#F4F4F2;
  --ink:#1E2124;
  --ink-2:#5B6167;
  --ink-3:#8E9499;
  --ink-4:#B9B9B9;
  --rule:#E3E3E1;
  --rule-2:#EFEFED;

  --dark:#0C0E10;
  --dark-2:#131619;
  --dark-3:#1A1E22;
  --dark-rule:#2A2F34;
  --on-dark:#EFEFEF;
  --on-dark-2:#B9B9B9;
  --on-dark-3:#7C848B;

  --cyan:#4FB4FF;
  --laser:#FF5A44;
  --threat:#FF4568;
  --ok:#48E5A0;
  --amber:#FFC24D;

  --f:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;

  --tr:-.042em;                    /* the house tracking */
  --pad:clamp(20px,3.4vw,64px);
  --gut:clamp(20px,2.6vw,44px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--white);
  color:var(--ink);
  font-family:var(--f);
  font-size:18px;
  font-weight:400;
  line-height:1.5;
  letter-spacing:-.011em;
  font-feature-settings:"cv05" 1,"cv08" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,canvas,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;letter-spacing:inherit}
::selection{background:var(--ink);color:var(--white)}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:4px}
.dk :focus-visible{outline-color:var(--on-dark)}

.shell{max-width:1680px;margin:0 auto;padding:0 var(--pad)}

/* ------------------------------------------------------------
   TYPE
   ------------------------------------------------------------ */
.lbl{                                  /* the only non-display style */
  font-size:11px;line-height:1.4;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400;margin:0;
}
.dk .lbl{color:var(--on-dark-3)}
.lbl.b{color:var(--ink)}
.dk .lbl.b{color:var(--on-dark)}

.d1{font-size:clamp(27px,7.2vw,112px);line-height:1.0;letter-spacing:var(--tr);font-weight:400;margin:0}
.d2{font-size:clamp(26px,6vw,92px);line-height:1.02;letter-spacing:var(--tr);font-weight:400;margin:0;text-transform:uppercase}
.d3{font-size:clamp(23px,3.6vw,52px);line-height:1.12;letter-spacing:var(--tr);font-weight:400;margin:0}
.d4{font-size:clamp(21px,2.3vw,32px);line-height:1.18;letter-spacing:-.032em;font-weight:400;margin:0}
.big{font-size:clamp(19px,1.5vw,24px);line-height:1.42;letter-spacing:-.022em;font-weight:400}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong{font-weight:500}
em{font-style:normal;color:var(--ink-3)}
.dk em{color:var(--on-dark-3)}
.mute{color:var(--ink-2)}
.dk .mute{color:var(--on-dark-2)}

/* ------------------------------------------------------------
   NAV — a thin bar, nothing more
   ------------------------------------------------------------ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);color:var(--on-dark);
  transition:background .3s ease,color .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(255,255,255,.92);color:var(--ink);
  border-bottom-color:var(--rule);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
}
.wm{display:flex;align-items:baseline;gap:11px;font-size:19px;letter-spacing:-.03em}
.wm i{
  font-style:normal;font-size:13px;letter-spacing:0;opacity:.55;
  transform:translateY(-1px);display:inline-block;
}
.navr{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.navr a{font-size:11px;letter-spacing:.09em;text-transform:uppercase;opacity:.72;transition:opacity .2s}
.navr a:hover{opacity:1}
@media(max-width:860px){.navr a:not(.btn){display:none}}

/* ------------------------------------------------------------
   BUTTON — a hairline box, no fill
   ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  padding:11px 17px;border:1px solid var(--ink);color:var(--ink);
  background:transparent;transition:background .22s,color .22s,border-color .22s;
}
.btn:hover{background:var(--ink);color:var(--white)}
.dk .btn,.nav:not(.stuck) .btn{border-color:rgba(239,239,239,.55);color:var(--on-dark)}
.dk .btn:hover,.nav:not(.stuck) .btn:hover{background:var(--on-dark);color:var(--dark);border-color:var(--on-dark)}
.btn.fill{background:var(--ink);color:var(--white)}
.btn.fill:hover{background:transparent;color:var(--ink)}
.dk .btn.fill{background:var(--on-dark);color:var(--dark);border-color:var(--on-dark)}
.dk .btn.fill:hover{background:transparent;color:var(--on-dark)}
.btn.sm{padding:7px 12px;font-size:10px}

/* ------------------------------------------------------------
   HERO — full-bleed dark, headline centred, nothing else
   ------------------------------------------------------------ */
.hero{
  position:relative;min-height:100svh;background:var(--dark);color:var(--on-dark);
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
}
/* the reel sits where the 3D used to. Clips cross-fade; only one is `on`. */
.reel{position:absolute;inset:0;overflow:hidden;background:var(--dark)}
.clip{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s ease;
}
.clip.on{opacity:1}
/* Lift the hero footage ~5% as seen. It has to be 1.11 rather than 1.05 because
   the veil over it absorbs most of the change: measured, the composite moves
   ~17.5 luminance points per unit of brightness, so 1.05 would only read as
   +2.3%. Scoped to the reel — the card videos are foreground and untouched. */
.reel .clip{filter:brightness(1.11)}
.hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(12,14,16,.88) 0%,rgba(12,14,16,.62) 18%,rgba(12,14,16,.62) 64%,rgba(12,14,16,.94) 100%),
    radial-gradient(130% 86% at 50% 44%,rgba(12,14,16,.42),rgba(12,14,16,.68) 62%,rgba(12,14,16,.9));
}
.hero-mid{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  padding:0 var(--pad);text-align:center;
}
.hero-mid > div{min-width:0;max-width:100%}
.hero-mid .sub{
  font-size:clamp(15px,1.25vw,19px);line-height:1.5;letter-spacing:-.015em;
  color:var(--on-dark-2);max-width:min(60ch,100%);margin:clamp(18px,2.4vw,30px) auto 0;
}
/* the kicker is set justified across the full measure, word by word */
.kick{
  display:flex;justify-content:space-between;gap:14px;
  margin:0 0 clamp(20px,3vw,40px);
  font-size:clamp(10px,1vw,13px);letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-2);
}
@media(max-width:620px){.kick{justify-content:center;gap:10px;letter-spacing:.1em}}

.hero-foot{
  /* .shell's `margin:0 auto` would otherwise beat align-items:stretch inside the
     hero's column flex and shrink this strip to fit, so pin it to full width */
  position:relative;z-index:3;width:100%;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding:0 var(--pad) clamp(22px,3vw,40px);
}
.hero-foot .lbl{color:var(--on-dark-2)}
.cue{display:flex;align-items:center;gap:10px}
.reelbar{display:inline-flex;gap:5px;margin-right:14px}
.reelbar b{display:block;width:18px;height:2px;background:rgba(239,239,239,.22);transition:background .45s ease}
.reelbar b.on{background:var(--on-dark)}
.cue i{display:block;width:1px;height:36px;background:linear-gradient(var(--on-dark-2),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.5);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}

/* the four figures, set as a hairline strip across the hero foot */
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;width:min(660px,100%)}
.figs div{padding-right:18px}
.figs .n{font-size:clamp(20px,2.2vw,30px);letter-spacing:var(--tr);line-height:1;margin-bottom:6px}
.figs .n u{text-decoration:none;font-size:.5em;opacity:.6;margin-left:2px}
@media(max-width:620px){.figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 0}}

/* ------------------------------------------------------------
   SECTION SCAFFOLD — category left, number right, rule above
   ------------------------------------------------------------ */
.sec{padding:clamp(56px,7.5vw,132px) 0}
.sec.tight{padding-top:clamp(34px,4vw,64px)}
.head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  border-top:1px solid var(--rule);padding-top:13px;margin-bottom:clamp(30px,4.4vw,72px);
}
.dk .head{border-top-color:var(--dark-rule)}
.head .no{font-size:11px;letter-spacing:.09em;color:var(--ink-3)}
.dk .head .no{color:var(--on-dark-3)}

/* the standard two-column body: statement left, copy right */
.two{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:var(--gut) clamp(30px,6vw,120px)}
@media(max-width:940px){.two{grid-template-columns:minmax(0,1fr);gap:26px}}
.two .col p{font-size:17px;line-height:1.56;color:var(--ink-2)}
.dk .two .col p{color:var(--on-dark-2)}

/* ------------------------------------------------------------
   NUMBERED LIST — 01 / rule / title / copy
   ------------------------------------------------------------ */
.rows{margin:clamp(30px,4vw,60px) 0 0;border-top:1px solid var(--rule)}
.dk .rows{border-top-color:var(--dark-rule)}
.row{
  display:grid;grid-template-columns:64px minmax(0,1.05fr) minmax(0,1.35fr);
  gap:clamp(16px,3vw,56px);align-items:start;
  padding:clamp(20px,2.4vw,34px) 0;border-bottom:1px solid var(--rule);
}
.dk .row{border-bottom-color:var(--dark-rule)}
.row .n{font-size:11px;letter-spacing:.09em;color:var(--ink-3);padding-top:.5em}
.dk .row .n{color:var(--on-dark-3)}
.row .t{font-size:clamp(20px,2vw,28px);line-height:1.16;letter-spacing:-.032em}
.row .c{font-size:16px;line-height:1.56;color:var(--ink-2)}
.dk .row .c{color:var(--on-dark-2)}
@media(max-width:820px){
  .row{grid-template-columns:44px minmax(0,1fr);gap:8px 16px}
  .row .c{grid-column:2}
}

/* ------------------------------------------------------------
   METRICS — letter-indexed, hairline separated
   ------------------------------------------------------------ */
.mets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
.met{padding:clamp(20px,2.4vw,32px) clamp(16px,2vw,30px) clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--rule)}
.met .k{font-size:11px;letter-spacing:.09em;color:var(--ink-3);margin-bottom:clamp(24px,3.4vw,54px)}
.met .n{font-size:clamp(38px,5vw,72px);line-height:.94;letter-spacing:var(--tr);margin-bottom:12px}
.met .n u{text-decoration:none;font-size:.42em;opacity:.55;margin-left:3px}
.met .c{font-size:15px;line-height:1.5;color:var(--ink-2);max-width:30ch}
@media(max-width:900px){.mets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.mets{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------
   STATEMENT — a full-width line, the loudest thing on the page
   ------------------------------------------------------------ */
.stmt{padding:clamp(50px,7vw,120px) 0;border-top:1px solid var(--rule)}
.dk .stmt{border-top-color:var(--dark-rule)}
.stmt .d3{max-width:22ch}
.stmt .after{margin-top:clamp(20px,2.6vw,34px);max-width:56ch;font-size:17px;line-height:1.56;color:var(--ink-2)}
.dk .stmt .after{color:var(--on-dark-2)}

/* ------------------------------------------------------------
   PLATE — full-bleed dark media
   ------------------------------------------------------------ */
.plate{background:var(--dark);color:var(--on-dark);padding:clamp(34px,4.6vw,80px) 0}
.plate .shell{max-width:1680px}
.plate-cap{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--dark-rule);padding-top:13px;margin-bottom:clamp(20px,2.6vw,38px);
}
.plate-note{margin:clamp(16px,2vw,26px) 0 0;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-3);line-height:1.7;max-width:96ch}

/* ---------- detection frame ---------- */
.detwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);gap:clamp(20px,3vw,56px);align-items:start}
@media(max-width:960px){.detwrap{grid-template-columns:minmax(0,1fr)}}
.frame-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:0 0 12px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-3)}
.seg{display:inline-flex;border:1px solid var(--dark-rule)}
.seg button{
  border:0;background:transparent;color:var(--on-dark-3);
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;padding:8px 13px;
  transition:color .2s,background .2s;
}
.seg button:hover{color:var(--on-dark)}
.seg button[aria-pressed="true"]{background:var(--on-dark);color:var(--dark)}
#detCv{width:100%;height:auto;background:var(--dark)}
.det-side p{font-size:16px;line-height:1.55;color:var(--on-dark-2)}
.det-side hr{border:0;border-top:1px solid var(--dark-rule);margin:18px 0}

/* ---------- anatomy ---------- */
.anat{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.9fr);gap:1px;background:var(--dark-rule);border:1px solid var(--dark-rule)}
@media(max-width:960px){.anat{grid-template-columns:minmax(0,1fr)}}
.anat-view{position:relative;background:var(--dark-2);min-height:clamp(340px,52vh,580px)}
#anatCv{position:absolute;inset:0;width:100%;height:100%}
.anat-tag{position:absolute;left:14px;bottom:12px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-3);background:rgba(12,14,16,.74);padding:7px 10px}
.anat-list{background:var(--dark-2);display:flex;flex-direction:column}
.anat-item{
  flex:1;border:0;border-bottom:1px solid var(--dark-rule);background:transparent;
  text-align:left;padding:clamp(16px,2vw,26px);color:var(--on-dark);
  transition:background .25s,box-shadow .25s;
}
.anat-item:last-child{border-bottom:0}
.anat-item:hover{background:var(--dark-3)}
.anat-item[aria-selected="true"]{background:var(--dark-3);box-shadow:inset 2px 0 0 var(--on-dark)}
.anat-item .k{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-3)}
.anat-item .t{font-size:clamp(19px,1.8vw,26px);line-height:1.14;letter-spacing:-.032em;margin:9px 0 0}
.anat-item .d{
  font-size:15px;line-height:1.55;color:var(--on-dark-2);margin:10px 0 0;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .42s ease,opacity .3s ease,margin .3s ease;
}
.anat-item[aria-selected="true"] .d{max-height:260px;opacity:1}

/* ---------- simulator ---------- */
.sim{border:1px solid var(--dark-rule);background:var(--dark-2)}
.sim-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:11px 15px;border-bottom:1px solid var(--dark-rule);background:var(--dark-3)}
.sim-title{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-3);display:flex;align-items:center;gap:10px}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:pl 2s infinite}
@keyframes pl{0%{box-shadow:0 0 0 0 rgba(72,229,160,.5)}70%{box-shadow:0 0 0 8px rgba(72,229,160,0)}100%{box-shadow:0 0 0 0 rgba(72,229,160,0)}}

.sim-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1px;background:var(--dark-rule)}
@media(max-width:1040px){.sim-body{grid-template-columns:minmax(0,1fr)}}

/* the stage fills the grid row the control rail sets; below that breakpoint the
   rail stacks underneath, so the stage has to carry its own proportions again */
.sim-stage{position:relative;width:100%;max-width:100%;background:#040A12;min-height:520px}
@media(max-width:1040px){.sim-stage{aspect-ratio:16/10;min-height:400px}}
@media(max-width:600px){.sim-stage{aspect-ratio:1/1;min-height:340px}}
#simCv{position:absolute;inset:0;width:100%;height:100%}

.hud{position:absolute;inset:0;pointer-events:none;padding:14px;display:flex;flex-direction:column;justify-content:space-between}
.hud-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hud-box{background:rgba(4,7,10,.74);border:1px solid rgba(239,239,239,.14);padding:9px 13px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hud-box .l{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-3)}
.hud-box .v{font-size:22px;letter-spacing:var(--tr);line-height:1.1;color:var(--on-dark);margin-top:3px;text-transform:uppercase}
.hud-box .v.acc{color:var(--cyan)}
.hud-box .v.warn{color:var(--amber)}
.hud-box .v.ok{color:var(--ok)}
.hud-box .v.bad{color:var(--threat)}
.hud-note{background:rgba(4,7,10,.84);border-left:2px solid var(--on-dark);padding:11px 14px;max-width:620px;font-size:15px;line-height:1.46;color:var(--on-dark);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hud-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-2);background:rgba(4,7,10,.7);padding:8px 11px}
.hud-legend i{display:inline-block;width:7px;height:7px;margin-right:6px;vertical-align:middle}
.hud-hint{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-3);background:rgba(4,7,10,.7);padding:8px 11px}

/* the inset is rendered into the main canvas by a scissor pass, so this element
   must stay transparent — it only supplies the chrome */
.pip{
  position:absolute;right:14px;bottom:76px;width:min(30%,236px);aspect-ratio:4/3;
  border:1px solid rgba(239,239,239,.3);background:transparent;pointer-events:none;
  box-shadow:0 0 0 1px rgba(4,7,10,.6),0 8px 26px rgba(0,0,0,.42);
}
.pip .cap{
  position:absolute;left:0;right:0;top:0;padding:6px 9px;z-index:2;
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-2);
  background:linear-gradient(rgba(4,7,10,.9),transparent);display:flex;justify-content:space-between;gap:6px;
}
.pip .xh{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ---------- sensor view ----------
   While the camera rides the gimbal the stage becomes the sensor feed: the 3D is
   rendered by the main camera from the gimbal's own eye and this overlay supplies
   the reticle, the readouts and the lock brackets. */
.sensor{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .28s ease;color:#8FF2C8}
.sensor.on{opacity:1}
.sensor::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 52%,rgba(2,8,6,.55) 100%)}
.sn-scanlines{position:absolute;inset:0;opacity:.3;background:repeating-linear-gradient(rgba(143,242,200,.16) 0 1px,transparent 1px 3px)}
.sn-fx{position:absolute;inset:0;width:100%;height:100%}
.sn-tag{position:absolute;display:flex;flex-direction:column;gap:3px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;background:rgba(3,10,8,.62);padding:7px 10px;border-left:2px solid currentColor}
.sn-tag b{font-weight:400;opacity:.6}
.sn-tag span{font-size:14px;letter-spacing:-.02em;color:#CFFFE8}
.sn-tag.tl{left:16px;top:16px}
.sn-tag.tr{right:16px;top:16px;text-align:right;border-left:0;border-right:2px solid currentColor}
.sn-tag.bl{left:16px;top:80px}          /* stacked under the sensor id, clear of the note */
.sn-tag.br{right:16px;bottom:16px;text-align:right;border-left:0;border-right:2px solid currentColor}
.sn-sweep{position:absolute;left:50%;transform:translateX(-50%);top:15%;font-size:10px;letter-spacing:.18em;text-transform:uppercase;background:rgba(3,10,8,.64);padding:7px 13px;white-space:nowrap}
/* the ordinary HUD would sit on top of the sensor chrome, so while the camera is
   riding the gimbal only the narration line stays up */
.sim-stage.sensing .hud-row,
.sim-stage.sensing .hud-legend,
.sim-stage.sensing .hud-hint{opacity:0}
.hud-row,.hud-legend,.hud-hint{transition:opacity .28s ease}
.sensor.locked .sn-sweep{color:var(--amber);animation:snBlink .5s steps(2,end) infinite}
@keyframes snBlink{50%{opacity:.25}}

/* brackets that sit on the target, positioned from the projected track.
   JS overwrites `transform` to scale these, so the centring MUST come from the
   negative margin and never from a translate. */
.sn-lock{position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;opacity:0;transition:opacity .18s ease}
.sn-lock.show{opacity:1}
.sn-lock svg{position:absolute;inset:0;width:100%;height:100%;color:#8FF2C8;opacity:.85}
.sn-lock i{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);font-style:normal;font-size:10px;letter-spacing:.16em;white-space:nowrap;background:rgba(3,10,8,.72);padding:3px 8px}
.sn-lock.hard svg{color:var(--amber);opacity:1}
.sn-lock.hard i{color:var(--amber)}
@media(max-width:640px){.sn-tag.bl,.sn-tag.br{display:none}.sn-sweep{font-size:9px;letter-spacing:.12em}}

/* on a phone the stage is short and the HUD would eat the whole frame */
@media(max-width:640px){
  .pip{display:none}
  .hud{padding:10px}
  .hud-legend,.hud-hint{display:none}
  .hud-box{padding:7px 10px}
  .hud-box .l{font-size:9px}
  .hud-box .v{font-size:17px}
  .hud-note{font-size:13px;padding:9px 11px;line-height:1.42}
}

.sim-trans{display:flex;align-items:center;gap:14px;padding:11px 15px;border-top:1px solid var(--dark-rule);background:var(--dark-3)}
.sim-trans .track{flex:1;height:2px;background:#333A41;position:relative;cursor:pointer}
.sim-trans .fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--on-dark)}
.sim-trans .mk{position:absolute;top:-4px;width:1px;height:10px;background:#4A535B;pointer-events:none}
.sim-trans .tc{font-size:11px;letter-spacing:.09em;color:var(--on-dark-3);min-width:74px;text-align:right}

.rail{background:var(--dark-2);padding:15px;display:flex;flex-direction:column;gap:18px}
.rail h4{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-3);margin:0 0 11px;padding-bottom:8px;border-bottom:1px solid var(--dark-rule);font-weight:400}
.opts{display:grid;gap:1px;background:var(--dark-rule);border:1px solid var(--dark-rule)}
.opt{background:var(--dark-3);border:0;text-align:left;padding:11px 13px;color:var(--on-dark);transition:background .2s;display:flex;gap:11px;align-items:flex-start}
.opt:hover{background:#20262C}
.opt[aria-pressed="true"]{background:#262D34;box-shadow:inset 2px 0 0 var(--on-dark)}
.opt .ico{width:16px;height:16px;flex:none;margin-top:3px;opacity:.5;transition:opacity .2s}
.opt[aria-pressed="true"] .ico{opacity:1}
.opt > span:last-child{min-width:0;flex:1}
.opt .n{display:block;font-size:16px;letter-spacing:-.028em;line-height:1.1}
.opt .s{display:block;font-size:11px;letter-spacing:.02em;color:var(--on-dark-3);margin-top:4px;line-height:1.4}
.opt[aria-pressed="true"] .s{color:var(--on-dark-2)}

.slider label{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-3);margin-bottom:10px}
.slider label b{color:var(--on-dark);font-weight:400}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:#333A41;outline:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;background:var(--on-dark);border-radius:50%;cursor:pointer;border:2px solid var(--dark-2)}
input[type=range]::-moz-range-thumb{width:13px;height:13px;background:var(--on-dark);border-radius:50%;cursor:pointer;border:2px solid var(--dark-2)}

.shots{background:var(--dark);border:1px solid var(--dark-rule);height:236px;overflow-y:auto;scroll-behavior:smooth}
.shots::-webkit-scrollbar{width:4px}
.shots::-webkit-scrollbar-thumb{background:#333A41}
.shot{display:flex;gap:10px;width:100%;text-align:left;border:0;background:transparent;padding:9px 12px;border-bottom:1px solid var(--dark-rule);color:var(--on-dark);transition:background .2s}
.shot:last-child{border-bottom:0}
.shot:hover{background:var(--dark-3)}
.shot[aria-current="true"]{background:#20262C;box-shadow:inset 2px 0 0 var(--on-dark)}
.shot .n{font-size:10px;letter-spacing:.09em;color:var(--on-dark-3);flex:none;padding-top:4px}
.shot[aria-current="true"] .n{color:var(--on-dark)}
.shot .b{min-width:0}
.shot .t{display:block;font-size:14px;letter-spacing:-.026em;line-height:1.14}
.shot .d{display:block;font-size:11px;line-height:1.45;color:var(--on-dark-3);max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .25s ease,margin .25s ease}
.shot[aria-current="true"] .d{max-height:96px;opacity:1;margin-top:5px}

.result{border:1px solid var(--dark-rule);background:var(--dark-3);padding:13px}
.result .r{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:5px 0}
.result .r span:first-child{color:var(--on-dark-3);letter-spacing:.06em;text-transform:uppercase;font-size:10px;padding-top:2px}
.result .r span:last-child{color:var(--on-dark)}
.result .r span.ok{color:var(--ok)}
.result.idle{opacity:.42}
.runbtn{width:100%;justify-content:center;padding:13px}

.nwv-bar{background:var(--dark-2);border-top:1px solid var(--dark-rule)}
.nwv-cap{background:rgba(12,14,16,.92)!important;border-left-color:var(--on-dark)!important;font-family:var(--f)!important}

/* ---------- deployment map ---------- */
.mapwrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:clamp(22px,3.4vw,60px);align-items:center}
@media(max-width:900px){.mapwrap{grid-template-columns:minmax(0,1fr)}}
.mapwrap svg{width:100%;height:auto;border:1px solid var(--dark-rule);background:var(--dark-2);display:block}
.map-key dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 14px;font-size:14px;line-height:1.5;color:var(--on-dark-2)}
.map-key dt{color:var(--on-dark)}
.map-key dd{margin:0}

/* ------------------------------------------------------------
   PRESS / STATUS LIST
   ------------------------------------------------------------ */
.list{border-top:1px solid var(--rule)}
.item{
  display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) minmax(0,150px);
  gap:clamp(14px,2.6vw,44px);align-items:baseline;
  padding:clamp(18px,2.2vw,30px) 0;border-bottom:1px solid var(--rule);
}
.item .s{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.item .h{font-size:clamp(17px,1.5vw,22px);line-height:1.24;letter-spacing:-.03em}
.item .m{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);text-align:right}
@media(max-width:760px){
  .item{grid-template-columns:minmax(0,1fr);gap:7px}
  .item .m{text-align:left}
}

/* ------------------------------------------------------------
   NOTICE + FOOTER
   ------------------------------------------------------------ */
.notice{border-top:1px solid var(--rule);padding:clamp(26px,3vw,44px) 0 0;margin-top:clamp(34px,4vw,60px)}
.notice p{font-size:14px;line-height:1.62;color:var(--ink-3);max-width:104ch}
footer{background:var(--dark);color:var(--on-dark);padding:clamp(44px,5.4vw,88px) 0 clamp(26px,3vw,40px)}
.foot-top{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-bottom:clamp(30px,4vw,56px);border-bottom:1px solid var(--dark-rule)}
.foot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;padding-top:clamp(22px,2.6vw,36px)}
.foot-grid .lbl{margin-bottom:9px}
.foot-grid p{font-size:14px;line-height:1.6;color:var(--on-dark-2);margin:0}
@media(max-width:760px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ------------------------------------------------------------
   REVEAL
   ------------------------------------------------------------ */
.rv{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .pulse,.cue i{animation:none}
}

/* ------------------------------------------------------------
   SEARCH
   ------------------------------------------------------------ */
.srch-open{
  display:inline-flex;align-items:center;gap:8px;
  border:0;background:transparent;color:inherit;padding:0;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;opacity:.72;
  transition:opacity .2s;
}
.srch-open:hover{opacity:1}
.srch-open svg{width:13px;height:13px;flex:none}
.srch-open kbd{
  font:inherit;font-size:9px;letter-spacing:0;padding:2px 5px;line-height:1;
  border:1px solid currentColor;opacity:.5;border-radius:2px;
}
@media(max-width:860px){.srch-open span,.srch-open kbd{display:none}}

.srch{position:fixed;inset:0;z-index:120;display:none}
.srch.on{display:block}
.srch-scrim{position:absolute;inset:0;background:rgba(12,14,16,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.srch-sheet{
  position:relative;background:var(--white);border-bottom:1px solid var(--rule);
  max-height:86vh;overflow:auto;
  animation:srchIn .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes srchIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

.srch-top{
  display:flex;align-items:center;gap:14px;
  max-width:1680px;margin:0 auto;padding:clamp(18px,2.4vw,28px) var(--pad);
  border-bottom:1px solid var(--rule);
}
.srch-top svg{width:19px;height:19px;flex:none;color:var(--ink-3)}
.srch-top input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-family:var(--f);font-size:clamp(19px,2.1vw,28px);font-weight:400;
  letter-spacing:-.032em;color:var(--ink);padding:4px 0;
}
.srch-top input::placeholder{color:var(--ink-4)}
.srch-esc{
  border:1px solid var(--rule);background:transparent;color:var(--ink-3);
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;padding:6px 10px;flex:none;
  transition:border-color .2s,color .2s;
}
.srch-esc:hover{border-color:var(--ink);color:var(--ink)}

.srch-body{max-width:1680px;margin:0 auto;padding:0 var(--pad) clamp(20px,2.6vw,34px)}
.srch-list{list-style:none;margin:0;padding:0}
.srch-row{
  display:grid;grid-template-columns:56px minmax(0,1fr) 30px;
  gap:clamp(12px,2vw,32px);align-items:baseline;
  padding:clamp(14px,1.8vw,22px) 0;border-bottom:1px solid var(--rule-2);cursor:pointer;
}
.srch-row .k{font-size:11px;letter-spacing:.09em;color:var(--ink-3)}
.srch-row .t{display:block;font-size:clamp(18px,1.7vw,24px);line-height:1.2;letter-spacing:-.032em}
.srch-row .d{display:block;font-size:15px;line-height:1.5;color:var(--ink-2);margin-top:6px}
.srch-row .go{font-size:13px;color:var(--ink-4);text-align:right;opacity:0;transition:opacity .18s}
.srch-row.sel{background:var(--off)}
.srch-row.sel .k{color:var(--ink)}
.srch-row.sel .go{opacity:1}
@media(max-width:640px){
  .srch-row{grid-template-columns:34px minmax(0,1fr);gap:10px}
  .srch-row .go{display:none}
  .srch-row .d{font-size:14px}
}

.srch-empty{font-size:16px;line-height:1.55;color:var(--ink-2);max-width:62ch;padding:clamp(18px,2.4vw,30px) 0 0;margin:0}
.srch-hint{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:clamp(18px,2.4vw,30px) 0 0}
/* the UA's [hidden] rule loses to an explicit display, so restate it */
.srch-hint[hidden],.srch-empty[hidden]{display:none}
.srch-hint .lbl{margin-right:6px}
.srch-hint button{
  border:1px solid var(--rule);background:transparent;color:var(--ink-2);
  font-family:var(--f);font-size:13px;letter-spacing:-.015em;padding:8px 13px;
  transition:border-color .2s,color .2s,background .2s;
}
.srch-hint button:hover{border-color:var(--ink);color:var(--ink)}

/* a landed result gets a brief mark so the eye finds it after the scroll */
@keyframes flashIn{
  0%{box-shadow:inset 3px 0 0 var(--ink)}
  70%{box-shadow:inset 3px 0 0 var(--ink)}
  100%{box-shadow:inset 3px 0 0 transparent}
}
.flash{animation:flashIn 1.6s ease-out}
.plate.flash,.hero.flash{animation:flashInDk 1.6s ease-out}
@keyframes flashInDk{
  0%{box-shadow:inset 3px 0 0 var(--on-dark)}
  70%{box-shadow:inset 3px 0 0 var(--on-dark)}
  100%{box-shadow:inset 3px 0 0 transparent}
}
@media(prefers-reduced-motion:reduce){
  .srch-sheet{animation:none}
  .flash,.plate.flash{animation:none}
}

/* ------------------------------------------------------------
   ANCHOR OFFSET
   The nav is fixed and ~68px tall, so a jump to #vigil put that
   section's label underneath it. Every anchor target reserves the
   nav's height plus air.
   ------------------------------------------------------------ */
section[id],header[id]{scroll-margin-top:96px}

/* ------------------------------------------------------------
   VIGIL PIPELINE — HTML, not SVG, so it reflows
   As an SVG this scaled with its viewBox: on a 375px screen the
   labels rendered at 2.6px. Boxes and labels are content, not
   artwork, so they are laid out and wrap like content.
   ------------------------------------------------------------ */
.flow{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.5vw,22px);
}
.flow li{border:1px solid var(--dark-rule);padding:clamp(13px,1.4vw,18px);position:relative}
.flow li + li::before{                     /* the connector between stages */
  content:"";position:absolute;top:50%;left:calc(-1 * clamp(12px,1.5vw,22px) - 1px);
  width:clamp(12px,1.5vw,22px);height:1px;background:#4A535B;
}
.flow .k{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-3)}
.flow .t{display:block;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.03em;line-height:1.15;margin:9px 0 6px}
.flow .d{display:block;font-size:13px;line-height:1.45;color:var(--on-dark-2)}

.fork{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.5vw,22px);margin-top:clamp(16px,2vw,26px)}
.fk{border-top:1px solid var(--dark-rule);padding-top:14px}
.fk .k{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.fk.warn .k{color:var(--amber)}
.fk.ok .k{color:var(--ok)}
.fk .t{display:block;font-size:clamp(17px,1.6vw,22px);letter-spacing:-.03em;margin-top:7px}

@media(max-width:860px){
  .flow{grid-template-columns:minmax(0,1fr);gap:0}
  .flow li{border-bottom:0}
  .flow li:last-child{border-bottom:1px solid var(--dark-rule)}
  .flow li + li::before{display:none}
  .fork{grid-template-columns:minmax(0,1fr);gap:0}
  .fk + .fk{margin-top:16px}
}

/* ------------------------------------------------------------
   WIDE FIGURES
   The detection frame and the deployment schematic carry their own
   labels at a fixed size. Shrunk to a phone they render that type at
   4-5px, so below the width where it stays readable they keep their
   natural size and scroll sideways instead.
   ------------------------------------------------------------ */
.figscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.figscroll > *{display:block}
.figscroll::-webkit-scrollbar{height:3px}
.figscroll::-webkit-scrollbar-thumb{background:#333A41}
@media(max-width:760px){
  .figscroll > canvas{min-width:640px}
  .figscroll > svg{min-width:560px}
  /* bleed to the edge so the cut-off reads as "there is more this way" */
  .figscroll{margin-right:calc(var(--pad) * -1);padding-right:var(--pad)}
}

/* the scrollbar alone is a thin hint; say it in words on touch widths */
.swipe{display:none}
@media(max-width:760px){
  .swipe{
    display:block;margin:9px 0 0;
    font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-3);
  }
}

/* ------------------------------------------------------------
   PICK CARDS — the two lines of work, each a door to its own page
   ------------------------------------------------------------ */
.picks{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.6vw,44px);margin-top:clamp(28px,3.6vw,56px);
}
@media(max-width:820px){.picks{grid-template-columns:minmax(0,1fr)}}
.pick{
  display:block;border:1px solid var(--rule);background:var(--white);
  transition:border-color .25s ease,transform .25s ease;
}
.pick:hover{border-color:var(--ink);transform:translateY(-2px)}
/* 3:2 crops the letterboxing baked into the source clips */
.pick-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--dark);border-bottom:1px solid var(--rule)}
.pick:hover .pick-media{border-bottom-color:var(--ink)}
.pick-media .clip{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s ease;
}
.pick-media .clip.on{opacity:1}
.pick-body{padding:clamp(18px,2.2vw,32px)}
.pick-t{
  font-size:clamp(24px,2.7vw,38px);line-height:1.08;letter-spacing:var(--tr);
  font-weight:400;margin:10px 0 0;
}
.pick-d{font-size:16px;line-height:1.55;color:var(--ink-2);margin:14px 0 0}
.pick-go{
  display:inline-flex;align-items:center;gap:9px;margin-top:clamp(16px,2vw,26px);
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--rule);padding-bottom:5px;transition:border-color .25s ease;
}
.pick:hover .pick-go{border-bottom-color:var(--ink)}
.pick-go i{font-style:normal;transition:transform .25s ease}
.pick:hover .pick-go i{transform:translateX(4px)}

/* ------------------------------------------------------------
   PAGE HERO — the two product pages open on type, not video
   ------------------------------------------------------------ */
.phero{
  background:var(--dark);color:var(--on-dark);
  padding:clamp(120px,14vw,190px) 0 clamp(44px,6vw,90px);
}
.phero .lbl{margin-bottom:clamp(16px,2vw,26px)}
.phero .d1{max-width:14ch}
.phero-sub{
  font-size:clamp(16px,1.4vw,21px);line-height:1.5;letter-spacing:-.018em;
  color:var(--on-dark-2);max-width:62ch;margin:clamp(20px,2.4vw,32px) 0 0;
}
.phero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(24px,3vw,40px)}
.nav .navr a.on{opacity:1;position:relative}
.nav .navr a.on::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor}

/* ------------------------------------------------------------
   RESERVED SLOT — an honest empty frame, not a fake screenshot
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   LIVE DEMO — camera in, skeleton out
   ------------------------------------------------------------ */
.demo-idle{
  border:1px dashed var(--dark-rule);min-height:clamp(300px,38vh,460px);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(26px,4vw,64px);text-align:center;
}
.demo-idle > div{max-width:60ch}
.demo-t{font-size:clamp(24px,2.6vw,38px);letter-spacing:var(--tr);line-height:1.1;margin:12px 0 0}
.demo-d{font-size:15.5px;line-height:1.6;color:var(--on-dark-2);margin:16px 0 0}
.demo-priv{color:var(--on-dark-3);font-size:14px}
.demo-idle .btn{margin-top:clamp(20px,2.4vw,30px)}
.demo-note{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-3);margin:14px 0 0;line-height:1.7}
.demo-note em{color:var(--amber);font-style:normal}
.demo-err{
  margin:16px auto 0;max-width:60ch;padding:12px 14px;
  border-left:2px solid var(--threat);background:rgba(255,69,104,.08);
  font-size:14px;line-height:1.55;color:var(--on-dark);text-align:left;
}

.demo-live{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1px;background:var(--dark-rule);border:1px solid var(--dark-rule)}
@media(max-width:960px){.demo-live{grid-template-columns:minmax(0,1fr)}}
.demo-stage{position:relative;background:#05080B;aspect-ratio:16/9;overflow:hidden}
@media(max-width:600px){.demo-stage{aspect-ratio:3/4}}
/* mirrored so it behaves like a mirror rather than a monitor */
.demo-stage video,.demo-stage canvas{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);
}
.demo-hud{position:absolute;left:14px;top:14px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.demo-hud .hud-box{min-width:150px}
.demo-frame{
  position:absolute;left:14px;right:14px;bottom:14px;text-align:center;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  background:rgba(4,7,10,.8);padding:9px 12px;color:var(--on-dark-2);
}
.demo-frame.ok{color:var(--ok)}
.demo-frame.warn{color:var(--amber)}

.demo-side{background:var(--dark-2);padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;gap:16px}
.demo-side h4{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-3);margin:0;padding-bottom:9px;border-bottom:1px solid var(--dark-rule);font-weight:400}
.demo-side .btn{margin-top:auto;justify-content:center}
.check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.chk{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--dark-rule)}
.chk:last-child{border-bottom:0}
.chk-box{
  flex:none;width:16px;height:16px;margin-top:2px;border:1px solid #4A535B;
  display:flex;align-items:center;justify-content:center;transition:border-color .3s,background .3s;
}
.chk-box i{width:8px;height:8px;background:transparent;transition:background .3s}
.chk.on .chk-box{border-color:var(--ok);background:rgba(72,229,160,.12)}
.chk.on .chk-box i{background:var(--ok)}
.chk-t{display:block;font-size:14px;line-height:1.25;letter-spacing:-.02em;color:var(--on-dark-2);transition:color .3s}
.chk.on .chk-t{color:var(--on-dark)}
.chk-h{display:block;font-size:11px;color:var(--on-dark-3);margin-top:3px;line-height:1.4}

.foot-grid a{border-bottom:1px solid rgba(239,239,239,.28);transition:border-color .2s}
.foot-grid a:hover{border-bottom-color:var(--on-dark)}

/* ------------------------------------------------------------
   BRAND MARK — the sphere icon beside "HaShomer"
   ------------------------------------------------------------ */
.wm-mark{
  width:22px;height:auto;flex:none;margin-right:2px;
  /* .wm aligns on the baseline so the Hebrew sits on the same line as the Latin,
     but a replaced element's baseline is its bottom edge — which pins the mark's
     underside to the text baseline and rides it ~5px high. Centre this one item
     against the flex line and leave the text pair baseline-aligned. */
  align-self:center;
  transition:filter .2s;
}
/* the nav mark ships as the light (on-dark) tint, since the hero underneath it
   is dark by default; when the nav goes white on scroll, invert it back to ink
   rather than shipping a second asset swap */
.nav.stuck .wm-mark{filter:invert(1)}
.foot-wm{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.foot-wm .wm-mark{width:30px;margin-right:0;vertical-align:0}

/* contact address — underlined on both grounds, since it is the one link
   people actually need to find */
.mail{border-bottom:1px solid var(--ink-4);transition:border-color .2s}
.mail:hover{border-bottom-color:var(--ink)}
.dk .mail{border-bottom-color:rgba(239,239,239,.35)}
.dk .mail:hover{border-bottom-color:var(--on-dark)}