/* =============================================================================
   HaeJuristi — site stylesheet
   -----------------------------------------------------------------------------
   Component semantics, which the visual design depends on:
     .lk-chip     interactive (clickable)  — white, hairline, hover accent
     .lk-tag      static data (languages, area tags) — filled tint, no border
     buttons      three tiers: primary / secondary / quiet text
     .lk-eyebrow  section label, anchored with a small accent tick
   All colours meet WCAG 2.1 AA against the warm background; the contrast ratios
   are recorded against each token below, so re-check them if you change one.
   ========================================================================== */

:root{
  /* ---- Colour ------------------------------------------------------------ */
  --lk-bg:          #FAF8F4;  /* warm near-white page                         */
  --lk-surface:     #FFFFFF;  /* cards                                        */
  --lk-panel:       #F7F4EE;  /* soft panel fill (trust panel)                */
  --lk-panel-calm:  #F1F6F4;  /* availability fill                            */
  --lk-foot:        #FBF9F3;  /* card footer tint (areas)                     */
  --lk-foot-line:   #EEE8DD;  /* divider above card footer                    */

  --lk-ink:         #1C1B19;  /* primary text   — 16.4:1 on bg                */
  --lk-ink-2:       #57544E;  /* secondary text —  7.1:1 on bg                */
  --lk-ink-3:       #6F6B62;  /* captions/meta  —  5.0:1 on bg                */
  --lk-sep:         #C8C2B8;  /* dot separators between meta items            */

  --lk-line:        #E6E2DA;  /* hairline border                             */
  --lk-line-2:      #DAD5CC;  /* slightly stronger hairline (inputs/chips)    */

  --lk-accent:      #1C4A53;  /* petrol teal — 9.2:1 on bg                    */
  --lk-accent-press:#163C44;  /* pressed/hover of primary                     */
  --lk-accent-tint: #E9F0EF;  /* count pill / monogram background             */
  --lk-on-accent:   #FFFFFF;
  --lk-calm-ink:    #143A33;
  --lk-calm-line:   #DCE6E4;

  --lk-area-bg:     #ECF1F0;  /* static area-tag fill (cool, on-brand)        */
  --lk-area-ink:    #3F5B5A;
  --lk-sand:        #F1ECE3;  /* neutral "+ offices" pill                     */

  /* ---- Type --------------------------------------------------------------
     System stack: no webfont, so no third-party request and nothing to disclose
     in the seloste. Adding a webfont is a GDPR decision, not just a design one. */
  --lk-font: -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* ---- Radius / layout --------------------------------------------------- */
  --lk-r-sm: 10px; --lk-r-md: 12px; --lk-r-lg: 16px; --lk-r-pill: 999px;
  --lk-col: 720px; --lk-gutter: 20px;
}

/*  Never reference an asset that is not shipped — not even inside a comment.
    The static-file rewriter does not skip comments, so it breaks the build.  */

/* ---- Reset --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--lk-bg); color:var(--lk-ink); font-family:var(--lk-font);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a{ color:inherit; } ul{ list-style:none; margin:0; padding:0; } svg{ display:block; }
h1,h2,h3{ margin:0; }
:focus-visible{ outline:3px solid var(--lk-accent); outline-offset:2px; border-radius:6px; }
a:focus,button:focus,summary:focus{ outline:3px solid var(--lk-accent); outline-offset:2px; }
a:focus:not(:focus-visible),button:focus:not(:focus-visible),summary:focus:not(:focus-visible){ outline:none; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* ---- Site chrome --------------------------------------------------------- */
.lk-chrome{ display:flex; align-items:center; justify-content:space-between; gap:12px 16px;
  flex-wrap:wrap; padding:12px var(--lk-gutter); border-bottom:1px solid var(--lk-line); background:var(--lk-bg); }
.lk-brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--lk-ink); }
.lk-brand__mark{ flex:none; }
.lk-brand__name{ font-size:20px; letter-spacing:-0.02em; }
.lk-brand__hae{ font-weight:600; color:#16302F; }
.lk-brand__juristi{ font-weight:800; color:var(--lk-accent); }
/* section nav: distinct tab-like elements; the current section is highlighted */
.lk-nav{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:5px; flex-wrap:wrap; }
.lk-nav a{ color:var(--lk-ink-2); text-decoration:none; font-size:14px; font-weight:600;
  min-height:40px; padding:0 13px; border-radius:var(--lk-r-pill); display:inline-flex; align-items:center;
  transition:background-color .15s, color .15s; }
.lk-nav a:hover{ background:var(--lk-panel); color:var(--lk-ink); }
.lk-nav a[aria-current="page"]{ background:var(--lk-accent-tint); color:var(--lk-accent); }
.lk-lang{ display:inline-flex; align-items:center; gap:3px; padding:3px;
  border:1px solid var(--lk-line-2); border-radius:var(--lk-r-pill); }
.lk-lang__opt{ display:inline-flex; align-items:center; justify-content:center; min-height:34px; min-width:42px;
  padding:0 13px; border-radius:var(--lk-r-pill); font:inherit; font-size:13px; font-weight:600;
  letter-spacing:.02em; text-decoration:none; color:var(--lk-ink-2); transition:background-color .15s,color .15s; }
.lk-lang__opt:hover{ color:var(--lk-ink); }
.lk-lang__opt[aria-current="page"]{ background:var(--lk-accent); color:var(--lk-on-accent); }

/* ---- Layout -------------------------------------------------------------- */
.lk-col{ width:100%; max-width:var(--lk-col); margin:0 auto; padding:0 var(--lk-gutter); }
.lk-main{ display:flex; flex-direction:column; gap:18px; padding:22px 0 8px; }
.lk-back{ display:inline-flex; align-items:center; gap:7px; min-height:44px; margin-top:20px;
  color:var(--lk-accent); text-decoration:none; font-size:15px; font-weight:600; }
.lk-back:hover{ text-decoration:underline; text-underline-offset:3px; }
.lk-back__arrow{ font-size:17px; line-height:1; }

/* ---- Headings / section labels ------------------------------------------ */
.lk-h1{ font-size:30px; line-height:1.14; font-weight:700; letter-spacing:-0.02em;
  text-wrap:balance; overflow-wrap:break-word; hyphens:auto; }
.lk-lead{ margin:10px 0 0; color:var(--lk-ink-2); font-size:17px; text-wrap:pretty; }
.lk-section{ display:flex; flex-direction:column; gap:14px; }
/* section label now anchors with a small accent tick */
.lk-eyebrow{ display:inline-flex; align-items:center; gap:9px; margin:0;
  font-size:13px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--lk-ink-2); }
.lk-eyebrow::before{ content:""; width:16px; height:2px; flex:none; border-radius:2px; background:var(--lk-accent); }

/* ---- Identity / trust (firm profile) ------------------------------------ */
.lk-identity{ display:flex; flex-direction:column; gap:16px; padding-top:8px; }
.lk-monogram{ width:54px; height:54px; border-radius:13px; background:var(--lk-accent-tint); color:var(--lk-accent);
  display:inline-flex; align-items:center; justify-content:center; font-size:25px; font-weight:700; letter-spacing:-0.01em; }
.lk-title{ font-size:30px; line-height:1.12; font-weight:700; letter-spacing:-0.02em;
  text-wrap:balance; overflow-wrap:break-word; hyphens:auto; }
.lk-meta{ margin:0; font-size:16px; color:var(--lk-ink-2); font-weight:500; }
.lk-muted{ color:var(--lk-ink-2); font-size:14.5px; }
.lk-trust{ border:1px solid var(--lk-line); border-radius:var(--lk-r-lg); background:var(--lk-panel); padding:20px; }
.lk-trust__list{ display:flex; flex-direction:column; gap:14px; }
.lk-trust__item{ display:flex; align-items:flex-start; gap:12px; font-size:16px; font-weight:500; line-height:1.45; }
.lk-trust__icon{ flex:none; margin-top:2px; }
.lk-trust__reg{ margin-top:16px; padding-top:16px; border-top:1px solid var(--lk-line); font-size:14px; color:var(--lk-ink-2); }

/* ---- Chips (INTERACTIVE) vs Tags (STATIC) -------------------------------
   A chip is clickable (hover state); a tag is passive data (no border/hover).
   Keep them visually distinct — that difference is the affordance. */
.lk-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.lk-chip{ display:inline-flex; align-items:center; min-height:44px; padding:10px 16px;
  border:1px solid var(--lk-line-2); border-radius:var(--lk-r-sm); background:var(--lk-surface);
  color:var(--lk-ink); font-size:15px; font-weight:500; text-decoration:none;
  transition:border-color .15s, color .15s, background-color .15s; }
.lk-chip:hover{ border-color:var(--lk-accent); color:var(--lk-accent); background:#F4F8F7; }
.lk-chip--on{ border-color:var(--lk-accent); color:var(--lk-accent); background:var(--lk-accent-tint); }
.lk-chip--sm{ min-height:36px; padding:7px 13px; font-size:14px; }

.lk-tag{ display:inline-flex; align-items:center; min-height:34px; padding:6px 13px;
  border:0; border-radius:var(--lk-r-sm); background:var(--lk-panel); color:var(--lk-ink-2);
  font-size:14px; font-weight:500; }
.lk-tag--area{ background:var(--lk-area-bg); color:var(--lk-area-ink); }
.lk-tag--sm{ min-height:30px; padding:5px 11px; font-size:12.5px; }

/* ---- Audience segmented toggle ------------------------------------------ */
/* Currently unreferenced: the audience toggle lives inside the filter card.
   Retained for a centred segmented control. */
.lk-seg-wrap{ display:flex; justify-content:center; }
.lk-seg{ display:inline-flex; padding:3px; border:1px solid var(--lk-line-2); border-radius:var(--lk-r-pill);
  gap:3px; background:var(--lk-surface); }
.lk-seg a{ display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:0 18px;
  border-radius:var(--lk-r-pill); text-decoration:none; font-size:13.5px; font-weight:600; color:var(--lk-ink-2);
  white-space:nowrap; transition:background-color .15s,color .15s; }
.lk-seg a:hover{ color:var(--lk-ink); }
.lk-seg a[aria-current="true"]{ background:var(--lk-accent); color:var(--lk-on-accent); }

/* ---- Forms --------------------------------------------------------------- */
.lk-grid{ display:grid; gap:14px 16px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.lk-filter-grid{ display:grid; gap:15px 16px; grid-template-columns:1fr 1fr; }
.lk-filter-grid .span2{ grid-column:1 / -1; }
@media (max-width:560px){ .lk-filter-grid{ grid-template-columns:1fr; } .lk-filter-grid .span2{ grid-column:1; } }
.lk-label{ display:block; font-size:13px; font-weight:600; margin:0 0 6px; color:#3A3833; }
.lk-input,.lk-select{ width:100%; min-height:46px; padding:0 13px; border:1px solid var(--lk-line-2);
  border-radius:11px; background:var(--lk-surface); color:var(--lk-ink); font:inherit; font-size:15px; }
.lk-input{ padding:11px 13px; }
.lk-input::placeholder{ color:#9A958B; }
.lk-input:hover,.lk-select:hover{ border-color:#C3BDB2; }
.lk-input:focus,.lk-select:focus{ border-color:var(--lk-accent); outline:none;
  box-shadow:0 0 0 3px rgba(28,74,83,.14); }
.lk-select{ appearance:auto; }

/* ---- Buttons (clear tiers) ----------------------------------------------- */
.lk-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 26px;
  font:inherit; font-size:16px; font-weight:600; text-decoration:none; border-radius:11px; cursor:pointer;
  transition:background-color .15s, border-color .15s, color .15s; }
.lk-btn--primary{ background:var(--lk-accent); color:var(--lk-on-accent); border:1px solid var(--lk-accent); }
.lk-btn--primary:hover{ background:var(--lk-accent-press); border-color:var(--lk-accent-press); }
.lk-btn--secondary{ background:var(--lk-surface); color:var(--lk-ink); border:1px solid var(--lk-line-2); }
.lk-btn--secondary:hover{ background:#F1ECE4; border-color:#B3ACA0; }
.lk-btn--block{ width:100%; }
.lk-btn--sm{ min-height:42px; padding:0 18px; font-size:15px; }
.lk-btn__caption{ text-align:center; font-size:13px; color:var(--lk-ink-2); margin-top:-3px; }
.lk-textlink{ display:inline-flex; align-items:center; gap:6px; min-height:44px;
  color:var(--lk-accent); font-size:14px; font-weight:600; text-decoration:none; }
.lk-textlink:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---- Results header ------------------------------------------------------ */
.lk-resulthead{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:4px 2px 0; }
.lk-resulthead__count{ font-size:15px; color:var(--lk-ink-2); }
.lk-resulthead__count strong{ color:var(--lk-ink); font-weight:700; font-size:16px; }
.lk-resulthead form,.lk-sort{ display:inline-flex; align-items:center; gap:8px; }
.lk-sort label{ font-size:13px; color:var(--lk-ink-2); font-weight:600; }
.lk-sort .lk-select{ min-height:38px; width:auto; padding:0 12px; border-radius:9px; font-size:14px; }

/* ===== RESULT CARD ========================================================= */
.lk-result{ display:flex; background:var(--lk-surface); border:1px solid var(--lk-line);
  border-radius:var(--lk-r-lg); overflow:hidden; margin-bottom:14px;
  transition:border-color .15s, box-shadow .15s; }
.lk-result:hover{ border-color:var(--lk-accent); box-shadow:0 8px 22px rgba(28,74,83,.08); }
.lk-result__spine{ width:3px; flex:none; background:var(--lk-accent); }
.lk-result__body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.lk-result__head{ padding:17px 20px; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.lk-result__main{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.lk-result__name{ font-size:19px; font-weight:600; letter-spacing:-0.01em; color:var(--lk-ink);
  text-decoration:none; line-height:1.2; overflow-wrap:break-word; }
.lk-result__name:hover{ color:var(--lk-accent); }
.lk-result__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:5px 9px; font-size:14px; color:var(--lk-ink-2); }
.lk-result__loc{ display:inline-flex; align-items:center; gap:5px; color:var(--lk-accent); font-weight:600; }
.lk-result__sep{ color:var(--lk-sep); }
.lk-result__offices{ font-size:13px; color:var(--lk-ink-3); }
.lk-result__count{ flex:none; display:inline-flex; align-items:center; padding:6px 12px;
  background:var(--lk-accent-tint); color:var(--lk-accent); border-radius:var(--lk-r-pill);
  font-size:13px; font-weight:700; white-space:nowrap; }
.lk-result__empty{ border-top:1px solid var(--lk-foot-line); padding:12px 20px; font-size:13px; color:#9A958B; }
/* Narrow phones (<400px): most firm names start with the long word "Asianajotoimisto",
   which collides with the top-right count pill. Below 400px, drop the count under the
   name (full-width name, pill on its own line) instead of squeezing it beside the pill. */
@media (max-width:400px){
  .lk-result__head{ flex-direction:column; gap:8px; }
}

/* areas: collapsible footer (pure HTML <details>, no JS) */
.lk-areas{ border-top:1px solid var(--lk-foot-line); background:var(--lk-foot); padding:12px 20px; }
.lk-areas__toggle{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  min-height:40px; color:var(--lk-accent); font-size:13.5px; font-weight:700; width:max-content; }
.lk-areas__toggle::-webkit-details-marker{ display:none; }
.lk-areas__toggle:hover{ text-decoration:underline; text-underline-offset:3px; }
.lk-areas__chev{ flex:none; transition:transform .15s; }
.lk-areas[open] .lk-areas__chev{ transform:rotate(180deg); }
.lk-areas .hide{ display:none; } .lk-areas[open] .show{ display:none; } .lk-areas[open] .hide{ display:inline; }
.lk-areas__list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

/* erikoisalat grouped by tarve: stack of collapsible pills (pure <details>, no JS) */
.lk-tarvegroups{ display:flex; flex-direction:column; gap:10px; }
.lk-tarve{ border:1px solid var(--lk-line-2); border-radius:var(--lk-r-sm); background:var(--lk-surface); }
.lk-tarve__sum{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:11px;
  padding:12px 16px; min-height:46px; color:var(--lk-ink); font-weight:600; font-size:15px; }
.lk-tarve__sum::-webkit-details-marker{ display:none; }
.lk-tarve__sum:hover{ color:var(--lk-accent); }
.lk-tarve__label{ flex:1 1 auto; }
.lk-tarve__count{ flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:22px; padding:0 7px; border-radius:var(--lk-r-pill);
  background:var(--lk-accent-tint); color:var(--lk-accent); font-size:13px; font-weight:700; }
.lk-tarve__chev{ flex:none; transition:transform .15s; }
.lk-tarve[open] .lk-tarve__chev{ transform:rotate(180deg); }
.lk-tarve__list{ padding:0 16px 14px; }
/* matched group: the visitor searched an area that lives here — auto-opened + flagged */
.lk-tarve--on{ border-color:var(--lk-accent); background:var(--lk-accent-tint); }
.lk-tarve--on>.lk-tarve__sum{ color:var(--lk-accent); }
.lk-tarve--on>.lk-tarve__sum .lk-tarve__count{ background:var(--lk-accent); color:#fff; }

/* ---- Generic card / contact / offices (home + firm profile) ------------- */
.lk-card{ background:var(--lk-surface); border:1px solid var(--lk-line); border-radius:var(--lk-r-lg); padding:20px; }
.lk-main--profile{ gap:30px; }
.lk-contact{ display:flex; flex-direction:column; gap:13px; }
.lk-offices{ display:flex; flex-direction:column; gap:11px; }
.lk-office{ display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--lk-surface); border:1px solid var(--lk-line); border-radius:12px; font-size:15px; line-height:1.4; color:var(--lk-ink-2); transition:border-color .15s, box-shadow .15s; }
.lk-office:hover{ border-color:#CBD8D6; box-shadow:0 4px 14px rgba(28,74,83,.06); }
.lk-office__main{ flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 9px; }
.lk-office__city{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--lk-ink); }
.lk-office__sep{ color:var(--lk-sep); }
/* lawyer count */
.lk-office__count{ flex:none; display:inline-flex; align-items:center; padding:5px 11px; background:#EEF3F2; color:#3F5B5A; border-radius:var(--lk-r-pill); font-size:13px; font-weight:600; white-space:nowrap; }
/* --stack: for office rows with long text + a CTA (guide index cards, in-article
   register links). Align the CTA to the top instead of floating it mid-height, and
   drop it under the text on narrow screens so the text isn't squeezed into a column. */
.lk-office--stack{ align-items:flex-start; }
.lk-office__cta{ flex:none; color:var(--lk-accent); font-weight:600; white-space:nowrap; }
@media (max-width:560px){
  .lk-office--stack{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ---- People / availability (firm profile) -------------------------------- */
.lk-people__count{ margin:0; font-size:19px; font-weight:700; letter-spacing:-0.01em; }
.lk-people__note{ margin:0; font-size:14px; color:var(--lk-ink-2); line-height:1.55; }
.lk-accepting{ display:flex; align-items:center; gap:11px; padding:15px 18px; border:1px solid var(--lk-calm-line);
  border-radius:13px; background:var(--lk-panel-calm); }
.lk-accepting__text{ font-size:16.5px; font-weight:600; color:var(--lk-calm-ink); }

/* ---- Pager / footer ------------------------------------------------------ */
.lk-pager{ display:flex; justify-content:space-between; align-items:center; padding:14px 2px 0; font-size:15px; }
.lk-pager__page{ color:var(--lk-ink-3); font-size:14px; }
.lk-footer{ margin-top:48px; padding:26px 0 40px; border-top:1px solid var(--lk-line);
  display:flex; flex-direction:column; gap:14px; }
.lk-disclaimer{ margin:0; font-size:13.5px; color:var(--lk-ink-2); line-height:1.6; }
.lk-sources{ margin:0; font-size:13px; color:var(--lk-ink-3); line-height:1.6; }

/* ---- Desktop ------------------------------------------------------------- */
@media (min-width:700px){
  .lk-chrome{ padding:16px 32px; }
  /* True optical centring for .lk-nav. Under the flex fallback the header has only two
     children (brand + nav), so `justify-content:space-between` lets the nav claim all the
     space to the RIGHT of the brand and centres the links inside that box — which sits
     half a brand-width right of the page centre. It used to be balanced by a third child,
     the .lk-lang switcher, hidden for the FI-only launch (see the comment in <header>).
     A 1fr/auto/1fr grid gives equal gutters either side, so the nav is centred on the page
     regardless of brand width. Below 700px the flex rule still applies and the nav wraps
     to its own full-width row, where justify-content:center is already correct. */
  .lk-chrome{ display:grid; grid-template-columns:1fr auto 1fr; }
  .lk-brand{ justify-self:start; }
  .lk-nav{ grid-column:2; flex:0 0 auto; }
  .lk-title,.lk-h1{ font-size:42px; }
  .lk-meta,.lk-lead{ font-size:17.5px; }
  .lk-trust{ padding:26px; }
  .lk-main{ gap:22px; }
  .lk-main--profile{ gap:44px; }
  .lk-footer{ margin-top:60px; }
}

/* ---- Django messages (flash) -------------------------------------------- */
.lk-msg{ background:#E7F6EC; border:1px solid #B6E0C4; color:#1D6B39;
  padding:12px 16px; border-radius:var(--lk-r-md); margin:16px 0; font-size:15px; }

/* ---- Form notices + footer nav (contact page) --------------------------- */
.lk-note{ padding:12px 16px; border-radius:var(--lk-r-md); font-size:14.5px; line-height:1.5; }
.lk-note--warn{ background:#FBF0E6; border:1px solid #F0D6B8; color:#8A4B12; }
.lk-err{ margin:6px 0 0; color:#A32D2D; font-size:13px; }
.lk-footnav{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.lk-footnav a{ color:var(--lk-ink-2); text-decoration:none; font-size:14px; font-weight:600;
  min-height:44px; display:inline-flex; align-items:center; }
.lk-footnav a:hover{ color:var(--lk-ink); }

/* visually-hidden (screen-reader only) — used for the polite search-results announcement */
.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; }

/* ---- Legal / long-form pages (tietosuojaseloste) ------------------------- */
.lk-legal__body{ display:flex; flex-direction:column; }
.lk-legal__body h2{ font-size:20px; font-weight:700; letter-spacing:-0.01em; margin:26px 0 8px;
  padding-top:18px; border-top:1px solid var(--lk-line); }
.lk-legal__body h2:first-child{ border-top:0; padding-top:0; margin-top:0; }
.lk-legal__body h3{ font-size:16px; font-weight:700; margin:16px 0 6px; color:var(--lk-ink); }
.lk-legal__body p{ margin:0 0 12px; color:var(--lk-ink-2); }
.lk-legal__body ul{ margin:0 0 14px; padding-left:20px; list-style:disc; color:var(--lk-ink-2); }
.lk-legal__body li{ margin:0 0 6px; }
.lk-legal__body code{ background:var(--lk-panel); padding:1px 6px; border-radius:6px; font-size:13.5px; }
.lk-legal__body a{ color:var(--lk-accent); }
.lk-legal__tablewrap{ overflow-x:auto; margin:0 0 14px; }
.lk-legal__table{ width:100%; border-collapse:collapse; font-size:14px; }
.lk-legal__table th,.lk-legal__table td{ text-align:left; vertical-align:top; padding:9px 11px;
  border:1px solid var(--lk-line); }
.lk-legal__table th{ background:var(--lk-panel); font-weight:700; color:var(--lk-ink); }
.lk-legal__table td{ color:var(--lk-ink-2); }