/* ==========================================================================
   NexDMI

   The page is paper. Structure comes from rules, spacing and type — not from
   boxes. There are no cards, no pills, no badges and no shadows. A section is
   separated from the next by a hairline and a measure of space, which is how
   a well-set document works and how it stays readable at any width.

   Brand colours are unchanged. The navy that used to be the background is now
   the type colour; the brand blue is the single accent and is used only for
   things you can act on.
   ========================================================================== */

:root {
  /* the original palette, re-assigned */
  --navy:      #060E2A;   /* brand navy — now the ink */
  --navy-2:    #0E1F5C;
  --blue:      #2952D9;   /* brand blue — the only accent */
  --blue-deep: #1C3FAA;

  --paper:     #FFFFFF;
  --paper-2:   #F7F8FA;   /* used sparingly, for a quiet band */
  --rule:      #E3E7ED;
  --rule-firm: #C8D0DA;

  --ink:       #060E2A;
  --ink-2:     #44506A;
  --ink-3:     #6E7A90;

  /* One face, at two optical sizes. On a Mac or an iPhone this resolves to
     SF Pro itself — the face Apple uses — with nothing to download. Elsewhere
     it falls to Inter, which is the closest widely available neo-grotesque. */
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Tight",
             "Inter", "Segoe UI", system-ui, sans-serif;
  --text:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
             "Segoe UI", system-ui, sans-serif;
  --mono:    ui-monospace, SFMono-Regular, "SF Mono", "IBM Plex Mono", Menlo, monospace;

  /* A single spacing scale. Values between these are a mistake. */
  --s1: .5rem; --s2: 1rem; --s3: 1.75rem; --s4: 3rem; --s5: 5rem; --s6: 7.5rem;

  --measure: 66ch;        /* the reading width, everywhere */
  --page:    1120px;
  --ease:    cubic-bezier(.2,.7,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

body {
  font-family: var(--text);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "ss01" 1;
}

/* --------------------------------------------------------------------------
   Type. A hierarchy of five sizes and two weights — that is the whole system.
   -------------------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.1; }
h1 { font-size: clamp(2rem, 1.3rem + 2.9vw, 3.15rem); letter-spacing: -.034em; text-wrap: balance; }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.95rem); letter-spacing: -.026em; text-wrap: balance; }
h3 { font-size: 1.08rem; letter-spacing: -.016em; }
p  { text-wrap: pretty; }

.lede { font-size: 1.12rem; line-height: 1.6; color: var(--ink-2); max-width: var(--measure); }
.small { font-size: .9rem; }
.muted { color: var(--ink-2); }
.quiet { color: var(--ink-3); }

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

/* The one uppercase element on the site, which is what keeps it meaningful. */
.label {
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: var(--s2);
}

/* --------------------------------------------------------------------------
   Page and sections. A hairline and space: no containers.
   -------------------------------------------------------------------------- */
.page { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--s3); }
section { padding-block: var(--s5); border-top: 1px solid var(--rule); }
section:first-of-type { border-top: 0; }
.band { background: var(--paper-2); }

/* Two columns: a heading on the left, the substance on the right. This is the
   layout that makes long pages scannable without dividing them into boxes. */
.split { display: grid; grid-template-columns: 15.5rem 1fr; gap: var(--s4); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: var(--s2); } }
.split > h2 { position: sticky; top: 5.5rem; }
@media (max-width: 860px) { .split > h2 { position: static; } }

.rows > * { padding-block: var(--s3); border-top: 1px solid var(--rule); }
.rows > *:first-child { border-top: 0; padding-top: 0; }
.rows h3 { margin-bottom: .4rem; }
.rows p { color: var(--ink-2); max-width: var(--measure); }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 760px) { .pair { grid-template-columns: 1fr; gap: var(--s3); } }

/* A definition list is how facts are set. No boxes round them. */
dl.facts > div { display: grid; grid-template-columns: 14rem 1fr; gap: var(--s2);
  padding-block: .8rem; border-top: 1px solid var(--rule); }
dl.facts > div:first-child { border-top: 0; }
dl.facts dt { color: var(--ink-3); font-size: .92rem; }
dl.facts dd { margin: 0; }
@media (max-width: 640px) { dl.facts > div { grid-template-columns: 1fr; gap: .15rem; } }

/* Numbered steps, ruled rather than boxed. */
ol.steps { list-style: none; padding: 0; counter-reset: step; }
ol.steps > li { counter-increment: step; display: grid; grid-template-columns: 2.6rem 1fr;
  gap: var(--s2); padding-block: var(--s3); border-top: 1px solid var(--rule); }
ol.steps > li:first-child { border-top: 0; padding-top: 0; }
ol.steps > li::before { content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-size: .8rem; color: var(--blue); padding-top: .2rem; }
ol.steps h3 { margin-bottom: .3rem; }
ol.steps p { color: var(--ink-2); max-width: var(--measure); }

/* --------------------------------------------------------------------------
   Header. A rule under it once you scroll, and nothing else.
   -------------------------------------------------------------------------- */
header.top { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .2s var(--ease); }
header.top[data-scrolled="true"] { border-bottom-color: var(--rule); }
header.top .page { display: flex; align-items: center; gap: var(--s3); height: 64px; }

/* The mark is a round plate — the logo sits inside it, cropped to the circle,
   so any square upload still reads as a mark rather than a pasted picture. */
.brand { display: flex; align-items: center; gap: .62rem; color: var(--navy); }
.brand:hover { text-decoration: none; }
.brand .plate {
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  background: var(--navy); display: grid; place-items: center;
  border: 1px solid rgba(6,14,42,.12);
}
.brand .plate img, .brand .plate svg { width: 100%; height: 100%; object-fit: cover; }
.brand b {
  font-family: var(--display); font-weight: 600; font-size: 1.1rem;
  letter-spacing: -.032em; color: var(--navy);
}
footer.bottom .brand .plate { width: 34px; height: 34px; }

nav.main { display: flex; gap: var(--s2); margin-left: auto; align-items: center; }
nav.main a { color: var(--ink-2); font-size: .92rem; padding-block: .3rem; border-bottom: 1.5px solid transparent; }
nav.main a:hover { color: var(--ink); text-decoration: none; }
nav.main a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--blue); }

.menu-btn { display: none; margin-left: auto; padding: .4rem; color: var(--ink-2); }
@media (max-width: 880px) {
  .menu-btn { display: block; }
  nav.main { position: absolute; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 0 var(--s3) var(--s2); }
  nav.main[hidden] { display: none; }
  nav.main a { padding-block: .85rem; border-bottom: 1px solid var(--rule); font-size: 1rem; }
  nav.main a[aria-current="page"] { border-bottom-color: var(--rule); color: var(--blue); }
}

/* --------------------------------------------------------------------------
   Actions. Two levels. A third would be one too many.
   -------------------------------------------------------------------------- */
.act { display: inline-flex; align-items: center; gap: .4rem; padding: .62rem 1.1rem;
  font-size: .93rem; font-weight: 550; border-radius: 4px; transition: background-color .15s var(--ease); }
.act:hover { text-decoration: none; }
.act-primary { background: var(--blue); color: #fff; }
.act-primary:hover { background: var(--blue-deep); }
.act-plain { color: var(--blue); padding-inline: 0; }
.act-plain::after { content: " →"; }
.acts { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin-top: var(--s3); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { margin-bottom: var(--s2); max-width: 34rem; }
.field label { display: block; font-size: .88rem; color: var(--ink-2); margin-bottom: .3rem; }
.field input, .field select, .field textarea { width: 100%; background: var(--paper);
  border: 1px solid var(--rule-firm); border-radius: 4px; padding: .6rem .7rem; font-size: .95rem;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none;
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(41,82,217,.14); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #B91C1C; }
.field .err { display: block; font-size: .82rem; color: #B91C1C; min-height: 1.1em; margin-top: .2rem; }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); max-width: 34rem; }
@media (max-width: 560px) { .two-up { grid-template-columns: 1fr; } }
.said { margin-top: var(--s2); padding-left: var(--s2); border-left: 2px solid var(--rule-firm);
  color: var(--ink-2); font-size: .92rem; max-width: 34rem; }
.said.ok { border-left-color: #15803D; }
.said.no { border-left-color: #B91C1C; }

/* --------------------------------------------------------------------------
   Figures. Product drawings are set as plates, with a caption.
   -------------------------------------------------------------------------- */
figure { margin: 0; }
figure svg { width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 3px; }
figcaption { margin-top: .7rem; font-size: .86rem; color: var(--ink-3); }

table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: left; padding: .6rem .8rem .6rem 0; border-bottom: 1px solid var(--rule); }
th { font-weight: 550; color: var(--ink-3); font-size: .82rem; }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer.bottom { border-top: 1px solid var(--rule); padding-block: var(--s4) var(--s3); margin-top: var(--s5); }
footer.bottom .cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--s3); }
@media (max-width: 760px) { footer.bottom .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { footer.bottom .cols { grid-template-columns: 1fr; } }
footer.bottom h4 { font-family: var(--mono); font-size: .7rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: .7rem; }
footer.bottom ul { list-style: none; padding: 0; display: grid; gap: .4rem; }
footer.bottom a { color: var(--ink-2); font-size: .9rem; }
footer.bottom a:hover { color: var(--ink); }
.foot-line { display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap;
  margin-top: var(--s4); padding-top: var(--s2); border-top: 1px solid var(--rule);
  font-size: .84rem; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
.skip { position: absolute; left: var(--s2); top: -4rem; z-index: 200; background: var(--blue);
  color: #fff; padding: .7rem 1.1rem; border-radius: 4px; transition: top .18s var(--ease); }
.skip:focus { top: var(--s2); text-decoration: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
  header.top, nav.main, footer.bottom, .act { display: none !important; }
  section { border-top: 1px solid #ccc; padding-block: 1.5rem; }
  body { font-size: 11pt; }
}


/* ==========================================================================
   SIDE BY SIDE WITHOUT BOXES

   Where two or three things belong together they are set as columns of a
   grid, divided by a hairline. No border round the group, no fill, no
   radius — the rule does the separating, exactly as a table of contents
   or a printed specification does it.
   ========================================================================== */
.cols { display: grid; gap: 0; }
.cols > * { padding: var(--s3) var(--s3) var(--s3) 0; border-top: 1px solid var(--rule); }
.cols h3 { margin-bottom: .35rem; }
.cols p { color: var(--ink-2); font-size: .97rem; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* the vertical hairlines between columns, drawn only between, never outside */
.cols-2 > *:nth-child(2n), .cols-3 > *:nth-child(3n+2), .cols-3 > *:nth-child(3n+3),
.cols-4 > *:nth-child(4n+2), .cols-4 > *:nth-child(4n+3), .cols-4 > *:nth-child(4n+4) {
  border-left: 1px solid var(--rule); padding-left: var(--s3);
}
@media (max-width: 900px) { .cols-4 { grid-template-columns: 1fr 1fr; }
  .cols-4 > *:nth-child(4n+3) { border-left: 0; padding-left: 0; }
  .cols-4 > *:nth-child(2n) { border-left: 1px solid var(--rule); padding-left: var(--s3); } }
@media (max-width: 760px) { .cols-3 { grid-template-columns: 1fr 1fr; }
  .cols-3 > *:nth-child(3n+3) { border-left: 0; padding-left: 0; }
  .cols-3 > *:nth-child(2n) { border-left: 1px solid var(--rule); padding-left: var(--s3); } }
@media (max-width: 560px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .cols > * { border-left: 0 !important; padding-left: 0 !important; padding-inline-end: 0; }
}

/* a measured figure sits beside its explanation */
.beside { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: center; }
.beside.wide-left { grid-template-columns: 1.25fr 1fr; }
.beside.wide-right { grid-template-columns: 1fr 1.25fr; }
@media (max-width: 860px) { .beside, .beside.wide-left, .beside.wide-right {
  grid-template-columns: 1fr; gap: var(--s3); } }

/* ==========================================================================
   MEDIA

   Pictures and video are set as plates: full-bleed inside their column, a
   hairline, a caption beneath. No rounded corners, no shadow, no frame.
   ========================================================================== */
.plates { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px,100%),1fr));
  gap: var(--s3) var(--s3); }
.plate-item { display: grid; gap: .7rem; align-content: start; }
.plate-item .shot {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--rule); background: var(--paper-2);
}
.plate-item .shot > img, .plate-item .shot > video {
  width: 100%; height: 100%; object-fit: cover; display: block; border: 0; border-radius: 0;
}
/* A drawing has a viewBox and must be shown whole — cropping one to fill the
   frame is what made the plates look empty. A photograph still fills it. */
.plate-item .shot > svg {
  width: 100%; height: 100%; object-fit: contain; display: block;
  border: 0; border-radius: 0; background: var(--paper);
}
.plate-item h3 { font-size: 1rem; }
.plate-item p { color: var(--ink-2); font-size: .93rem; max-width: 42ch; }
.plate-item .meta { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); }
.plate-wide { grid-column: 1 / -1; }
.plate-wide .shot { aspect-ratio: 16 / 7; }

/* ==========================================================================
   EDITING

   Nothing below is visible to a visitor. It appears only once a member of
   staff has signed in, and it deliberately looks like an editing state
   rather than part of the design.
   ========================================================================== */
[data-edit] { position: relative; }

body.editing [data-edit] {
  outline: 1px dashed rgba(41,82,217,.45);
  outline-offset: 3px;
  cursor: text;
  border-radius: 2px;
  transition: background-color .12s var(--ease);
}
body.editing [data-edit]:hover { background: rgba(41,82,217,.05); }
body.editing [data-edit]:focus { outline: 2px solid var(--blue); background: rgba(41,82,217,.05); }
body.editing [data-media] { outline: 1px dashed rgba(41,82,217,.45); outline-offset: 3px; }
body.editing .shot::after {
  content: "Click to replace";
  position: absolute; inset: auto 0 0 0;
  background: rgba(6,14,42,.82); color: #fff;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .45rem; text-align: center;
}
body.editing .shot { cursor: pointer; }

#editbar {
  position: fixed; inset: auto 0 0 0; z-index: 200;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; gap: var(--s2);
  padding: .6rem var(--s3); font-size: .86rem;
  box-shadow: 0 -8px 24px -18px rgba(0,0,0,.6);
}
#editbar .who { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.62); }
#editbar .spacer { margin-left: auto; }
#editbar button { color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: 4px;
  padding: .36rem .8rem; font-size: .84rem; }
#editbar button:hover { background: rgba(255,255,255,.12); }
#editbar button.go { background: #fff; color: var(--navy); border-color: #fff; font-weight: 550; }
#editbar button.go:hover { background: rgba(255,255,255,.88); }
#editbar .state { font-size: .8rem; color: rgba(255,255,255,.72); }
body.editing { padding-bottom: 3.4rem; }

/* the sign-in sheet, only ever reached by typing the address */
#signin { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: rgba(6,14,42,.55); padding: var(--s3); }
#signin .sheet { background: var(--paper); border: 1px solid var(--rule-firm);
  border-radius: 6px; padding: var(--s3); width: min(24rem, 100%); }
#signin h2 { font-size: 1.15rem; margin-bottom: .4rem; }


/* ==========================================================================
   4FLEX AI

   The page carries its own brand: the green from the logo and the deep blue
   behind it. Scoped to [data-brand="4flex"] so it reaches nothing else on
   the site.

   Two greens, and the reason there are two: #00E680 is the mark, and it is
   beautiful on a dark ground but only 1.66:1 against white — unreadable as
   text. So the bright green is used as a FILL, carrying navy text at
   11.4:1, and a darkened #067A43 carries the green identity in LINKS and
   RULES at 5.42:1. Both pass; neither is a guess.
   ========================================================================== */
[data-brand="4flex"] {
  --flex-green: #00E680;   /* the mark, from the logo */
  --flex-ink:   #067A43;   /* the same hue, darkened until it reads on paper */
  --flex-navy:  #002060;   /* the blue the logo sits on */
}

[data-brand="4flex"] .label { color: var(--flex-ink); }
[data-brand="4flex"] .label::before { background: var(--flex-green); width: 26px; height: 2px; }
[data-brand="4flex"] a:not(.act) { color: var(--flex-ink); }

[data-brand="4flex"] .act-primary {
  background: var(--flex-green);
  color: #052015;              /* 11.4:1 on the green */
  font-weight: 600;
}
[data-brand="4flex"] .act-primary:hover { background: #00C46E; }
[data-brand="4flex"] .act-plain { color: var(--flex-ink); }

/* the rule that separates a column takes the brand tint, faintly */
[data-brand="4flex"] .cols > *,
[data-brand="4flex"] .rows > *,
[data-brand="4flex"] dl.facts > div { border-top-color: rgba(6,122,67,.18); }
[data-brand="4flex"] .cols > *[style*="border-left"],
[data-brand="4flex"] .cols-2 > *:nth-child(2n),
[data-brand="4flex"] .cols-3 > *:nth-child(3n+2),
[data-brand="4flex"] .cols-3 > *:nth-child(3n+3) { border-left-color: rgba(6,122,67,.18); }
[data-brand="4flex"] section { border-top-color: rgba(6,122,67,.22); }
[data-brand="4flex"] table th { color: var(--flex-ink); }
[data-brand="4flex"] table td, [data-brand="4flex"] table th { border-bottom-color: rgba(6,122,67,.16); }
[data-brand="4flex"] .band { background: #F2FBF6; }
[data-brand="4flex"] figure svg, [data-brand="4flex"] .shot { border-color: rgba(6,122,67,.22); }
[data-brand="4flex"] .field input:focus,
[data-brand="4flex"] .field textarea:focus {
  border-color: var(--flex-ink); box-shadow: 0 0 0 3px rgba(6,122,67,.16);
}
[data-brand="4flex"] :focus-visible { outline-color: var(--flex-ink); }

/* the mark itself, set on the blue it was drawn for */
.brandplate {
  background: var(--flex-navy);
  border: 1px solid rgba(0,32,96,.25);
  padding: var(--s3);
  display: grid; place-items: center;
}
.brandplate img { max-width: 420px; width: 100%; height: auto; }

/* ==========================================================================
   HAKA — its own identity: purple and lime. Scoped, so it reaches nothing
   else. Purple #5B21B6 reads at 8.98:1 on white; lime is used only as a
   fill carrying dark text at 11.95:1.
   ========================================================================== */
[data-brand="haka"] { --hk-purple:#5B21B6; --hk-ink:#1A1033; --hk-lime:#A3E635; }
[data-brand="haka"] .label { color: var(--hk-purple); }
[data-brand="haka"] a:not(.act) { color: var(--hk-purple); }
[data-brand="haka"] .act-primary { background: var(--hk-purple); color:#fff; }
[data-brand="haka"] .act-primary:hover { background:#4C1D95; }
[data-brand="haka"] .act-plain { color: var(--hk-purple); }
[data-brand="haka"] section { border-top-color: rgba(91,33,182,.16); }
[data-brand="haka"] .rows > *, [data-brand="haka"] .cols > * { border-top-color: rgba(91,33,182,.14); }
[data-brand="haka"] .shot { border-color: rgba(91,33,182,.18); }
[data-brand="haka"] .field input:focus { border-color: var(--hk-purple); box-shadow: 0 0 0 3px rgba(91,33,182,.14); }
[data-brand="haka"] :focus-visible { outline-color: var(--hk-purple); }
.hk-line { display:grid; grid-template-columns:1fr auto auto auto; gap:.8rem; align-items:center;
  padding:.7rem 0; border-top:1px solid rgba(91,33,182,.14); }
.hk-line:first-child { border-top:0; }
.hk-qty { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--mono); }
.hk-qty button, .hk-x { width:26px; height:26px; border:1px solid var(--rule-firm); border-radius:4px; }
.hk-qty button:hover, .hk-x:hover { border-color: var(--hk-purple); color: var(--hk-purple); }
.hk-total { display:flex; justify-content:space-between; padding-top:.8rem; margin-top:.4rem;
  border-top:1px solid var(--hk-ink); font-weight:600; }
.hk-found { border-left:3px solid var(--hk-lime); padding:.8rem 1rem; background:#F7FCEB; }
.hk-found dl > div { display:grid; grid-template-columns:8rem 1fr; gap:.6rem; padding:.2rem 0; }
.hk-found dt { color: var(--ink-3); font-size:.88rem; }