/* ==========================================================================
   automatizari-industry.ro — v5 "sober technical"
   Near-white paper · ink · one blue signal · muted category tints.
   Type: Poltawski Nowy (serif) for headings + labels/codes, Stack Sans Text
   for body. No hero illustration, no rainbow.
   ========================================================================== */

/* ---- Typefaces (Google Fonts) -------------------------------------------- */
/* Poltawski Nowy = display + labels/codes (ex-IBM roles) · Stack Sans Text = body */
/* Self-hosted fonts (Poltawski Nowy + Stack Sans Text), from Google css2, font-display:swap */
/* vietnamese */
@font-face {
  font-family: 'Poltawski Nowy';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/w480U1xsUpFXD-iDBPNbGB4UsLPiR68yYQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Poltawski Nowy';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/w480U1xsUpFXD-iDBPNbGB8UsLPiR68yYQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poltawski Nowy';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/q6ww480U1xsUpFXD-iDBPNbGBEUsLPiR68.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Poltawski Nowy';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/q6ww480U1xsUpFXD-iDBPNRKBMet5Hgd64.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Poltawski Nowy';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/q6ww480U1xsUpFXD-iDBPNQKBMet5Hgd64.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poltawski Nowy';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/UhRq6ww480U1xsUpFXD-iDBPNeKBMet5Hg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Stack Sans Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/AJ-Q0hiGPmzHEu345X1JJnBLy4J4xpmKPN.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Stack Sans Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/BuAJ-Q0hiGPmzHEu345X1JJnCry4J4xpmA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Stack Sans Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/AJ-Q0hiGPmzHEu345X1JJnBLy4J4xpmKPN.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Stack Sans Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/BuAJ-Q0hiGPmzHEu345X1JJnCry4J4xpmA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Stack Sans Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/AJ-Q0hiGPmzHEu345X1JJnBLy4J4xpmKPN.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Stack Sans Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/BuAJ-Q0hiGPmzHEu345X1JJnCry4J4xpmA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Stack Sans Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/AJ-Q0hiGPmzHEu345X1JJnBLy4J4xpmKPN.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Stack Sans Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/BuAJ-Q0hiGPmzHEu345X1JJnCry4J4xpmA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens -------------------------------------------------------------- */
:root{
  --paper:#ffffff;
  --paper-2:#f7f8fa;
  --panel:#ffffff;
  --ink:#161c26;
  --ink-deep:#011142;
  --ink-soft:#5a6373;
  --ink-faint:#8b93a1;
  --line:#e6e8ec;
  --line-2:#eef0f3;
  --accent:#1e56c9;
  --accent-ink:#153f96;
  --accent-wash:#eef3fc;
  /* muted category tints — used only as thin accents, never as fills */
  /* Category accents. These are not decoration only — .card__cat renders the
     category NAME in them at .68rem, so they carry text and must clear WCAG AA
     (4.5:1) on white. Five of the six did not: sensor was 3.03, valve 3.57,
     hydro 4.18, filter 4.38, pump 4.47. Each is darkened along its own hue to
     ~4.6 (a small margin over 4.5 for rounding), which keeps the palette's
     character; only valve and sensor moved enough to notice. Measured, not
     eyeballed — recompute before changing any of them. */
  --pneu:#3a7d8c; --hydro:#3b825d; --valve:#a5652e; --pump:#7969bb; --filter:#4d77ab; --sensor:#8d721c;
  --ok:#3f8a63;
  --f-display:'Poltawski Nowy',Georgia,'Times New Roman',serif;
  --f-body:'Stack Sans Text','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --f-mono:'Poltawski Nowy',Georgia,'Times New Roman',serif;
  --t-mono:.72rem;
  --dur:.2s; --ease:cubic-bezier(.2,.6,.2,1);
  --wrap:1160px;
  --shadow:0 1px 2px rgba(22,28,38,.04),0 10px 30px -18px rgba(22,28,38,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);font-size:1.02rem;line-height:1.62;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* overflow-wrap + hyphens: German, Hungarian, French and Polish routinely form
   compounds longer than a 320px viewport ("Industrieautomatisierung" is 386px of
   ink at 34px), and a heading has no other way to break. This is INK overflow, so
   a box-geometry probe misses it entirely — it only shows up as a page-level
   scrollWidth. hyphens:auto needs the lang attribute, which app.js keeps current. */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.1;letter-spacing:-.015em;color:var(--ink);overflow-wrap:break-word;hyphens:auto}
::selection{background:var(--accent-wash)}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:2px}
/* Skip link. Offscreen rather than display:none — a hidden element is not
   focusable, which would defeat the point. The header is position:sticky at
   z-index 60, so this has to sit above it to be visible once focused. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:#fff;
  padding:10px 18px;border-radius:0 0 4px 0;font-size:.92rem;text-decoration:none}
.skip-link:focus{left:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
/* `anywhere`, not `break-word`: only `anywhere` lets the box shrink below the
   string's min-content width, which is what a flex/grid parent measures. Series
   codes run to "Standard/Interlock/Reusable/BW+/700 Bar" with no space in sight,
   and an unbreakable one pushed the product page 126px past a 320px viewport.
   Language-independent, so a sweep of one short-coded product never sees it. */
.mono{font-family:var(--f-mono);letter-spacing:.02em;overflow-wrap:anywhere}
/* The generator also emits the series code as a bare <strong> inside the product
   prose, where .mono does not reach it — same unbreakable string, same overflow.
   The lead paragraph and the prose paragraphs themselves need it too: they carry
   slash-run code enumerations ("CBSLANG6/CBSLBNG6/CBDLNG6/CBDLNG10", language-
   INDEPENDENT, a real scrollbar in Romanian at 390px) and long German compounds
   ("Maschinenschwingungsgrenzwerten"). Enumerating the container was not enough;
   the text node that holds the unbreakable string is what has to be allowed to
   break. */
.prose strong,.desc-list li,.prose p,
p[data-p="name"],p[data-p="prose1"],p[data-p="prose2"]{overflow-wrap:anywhere}
.eyebrow{display:inline-flex;align-items:center;font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.muted{color:var(--ink-soft)}

/* ---- Buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.5em;background:var(--accent);color:#fff;font-weight:600;font-size:.95rem;padding:.7em 1.15em;border-radius:9px;border:1px solid transparent;cursor:pointer;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}
.btn:hover{background:var(--accent-ink);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--paper-2);border-color:var(--ink-soft)}
.btn--sm{font-size:.85rem;padding:.5em .8em}
.link{color:var(--accent);font-weight:600}
.link:hover{color:var(--accent-ink)}
.diff{display:inline-flex;align-items:center;gap:.55em;margin-top:20px;font-weight:600;color:var(--accent-ink);font-size:1rem}
.diff .mk{display:inline-grid;place-items:center;width:22px;height:22px;background:var(--accent-wash);color:var(--accent);font-size:.82rem;flex:none}

/* ---- Header -------------------------------------------------------------- */
.top{position:sticky;top:0;z-index:60;background:rgba(1,17,66,.90);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid rgba(255,255,255,.10);color:#fff}
.top__bar{display:flex;align-items:center;justify-content:space-between;height:64px}
.brandmark{font-family:var(--f-display);font-size:1.3rem;font-weight:600;letter-spacing:-.015em;color:#fff}
.brandmark b{color:#f5b301}
.brandmark .tld{font-family:var(--f-mono);font-size:.66rem;color:rgba(255,255,255,.55)}
/* The footer sits on paper, not on the navy bar, so the white ".ro" above was
   invisible there (contrast 1.06:1 on --paper-2). .foot a recolours the wordmark
   itself but not this span, which carries its own colour. */
/* Footer wordmark. It is now the same logo as the header, in its dark version,
   so the two read as one brand instead of a picture up top and a serif line at
   the bottom. 38px against the header's 42px: the footer mark is a signature,
   not a masthead.
   The two rules under it are the old TEXT wordmark's colours. Nothing on the
   site renders that markup any more, but they stay as a safety net — if a page
   is ever regenerated from an older template, ".ro" must not go back to being
   white-on-white down here. */
.foot .brandmark img{height:38px}
.foot .brandmark .tld{color:var(--ink-soft)}
.foot .brandmark b{color:var(--accent)}
/* Header wordmark is the logo file; width/height on the <img> keep the bar from
   reflowing while it loads. The footer keeps the text version — it sits on
   paper, where a white-on-transparent logo would vanish. */
.brandmark img{display:block;height:42px;width:auto}
.nav{display:flex;gap:28px}
.nav a{font-size:.94rem;font-weight:500;color:rgba(255,255,255,.72);position:relative;padding:4px 0;transition:color var(--dur)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:#6fa0ff;transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.nav a:hover,.nav a.is-active{color:#fff}
.nav a.is-active::after,.nav a:hover::after{transform:scaleX(1)}
.top__tools{display:flex;align-items:center;gap:14px}
.top__tools .lang{order:4}
.top__tools .burger{order:5}
.lang{position:relative;display:flex;border:1px solid rgba(255,255,255,.22);border-radius:7px}
.lang select{appearance:none;-webkit-appearance:none;font-family:var(--f-mono);font-size:.68rem;line-height:1.2;padding:.36em 1.5em .36em .55em;background:transparent;color:rgba(255,255,255,.88);cursor:pointer;border:none;border-radius:7px;outline:none}
.lang select:hover{color:#fff}
.lang select:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lang option{color:var(--ink-deep);background:#fff}
.lang::after{content:"";position:absolute;right:.5em;top:50%;width:0;height:0;margin-top:-1px;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid rgba(255,255,255,.7);pointer-events:none}
.tel{font-family:var(--f-body);font-size:.86rem;font-weight:500;white-space:nowrap;color:#fff}
.top .btn{background:#fff;color:var(--ink-deep)}
.top .btn:hover{background:var(--accent-wash);color:var(--ink-deep)}
.burger{display:none;font-size:1.2rem;background:none;border:none;cursor:pointer;color:#fff}

/* ---- Hero (variant C + code search) -------------------------------------- */
.hero{padding:76px 0 20px;border-bottom:1px solid var(--line-2)}
.hero h1{font-size:clamp(34px,4vw,52px);font-weight:600;letter-spacing:-.02em;margin-top:18px;max-width:22ch;text-wrap:balance}
.hero h1 em{font-style:normal;font-weight:600;color:var(--accent)}
.hero__sub{margin-top:18px;font-size:clamp(1.02rem,.96rem+.4vw,1.18rem);color:var(--ink-soft);max-width:58ch;text-wrap:pretty}
.hero__cta{display:flex;gap:16px;align-items:center;margin-top:28px;flex-wrap:wrap}
.hero__cta .link{display:inline-flex;align-items:center;gap:.4em}
.search{margin-top:30px;display:flex;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--paper);max-width:620px;box-shadow:var(--shadow)}
.search .pre{display:flex;align-items:center;padding:0 15px;font-family:var(--f-mono);font-size:.72rem;color:var(--ink-soft);border-right:1px solid var(--line);background:var(--paper-2)}
.search input{flex:1;border:none;outline:none;padding:15px 14px;font-family:var(--f-mono);font-size:.95rem;color:var(--ink);background:transparent}
.search button{border-radius:0;border:none;padding-left:1.3em;padding-right:1.3em}
.search__hint{margin-top:12px;font-family:var(--f-mono);font-size:.72rem;color:var(--ink-soft)}
.strip{margin-top:52px;border-top:1px solid var(--line-2);padding:22px 0 8px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.strip .lead{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.strip .names{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--f-display);font-weight:600;font-size:1rem;color:var(--ink-faint)}

/* ---- Hero with dark media background (landing) --------------------------- */
.hero--media{position:relative;background:#02122e;color:#fff;border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden;padding:88px 0 24px}
.hero--media::before{content:"";position:absolute;inset:0;background:url(hero.webp) center/cover no-repeat;filter:brightness(.82);z-index:0}
.hero--media::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(1,10,28,.93) 0%,rgba(1,10,28,.74) 46%,rgba(1,10,28,.5) 100%);z-index:0}
.hero--media .wrap{position:relative;z-index:1}
.hero--media .eyebrow{color:rgba(255,255,255,.72)}
.hero--media h1{color:#fff}
.hero--media h1 em{color:#6fa0ff}
.hero--media .hero__sub{color:rgba(255,255,255,.82)}
.hero--media .btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.hero--media .btn--ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}
.hero--media .link{color:#9dc0ff}
.hero--media .link:hover{color:#fff}
.hero--media .search{border-color:rgba(255,255,255,.2)}
.hero--media .search__hint{color:rgba(255,255,255,.62)}
.hero--media .diff{color:#cfe1ff}
.hero--media .strip{border-top-color:rgba(255,255,255,.16)}
.hero--media .strip .lead{color:rgba(255,255,255,.55)}
.hero--media .strip .names{color:rgba(255,255,255,.72)}

/* ---- Sections & cards ---------------------------------------------------- */
.section{padding:66px 0}
.section--alt{background:var(--paper-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.section__head{max-width:64ch;margin-bottom:36px}
.section__head h2{font-size:clamp(26px,2.6vw,36px);margin-top:12px}
.section__head p{margin-top:12px;color:var(--ink-soft);font-size:1.06rem}
.grid{display:grid;gap:18px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:0;padding:26px 24px;transition:border-color var(--dur),transform var(--dur) var(--ease),box-shadow var(--dur)}
.card:hover{border-color:var(--ink-soft);transform:translateY(-2px);box-shadow:var(--shadow)}
.card__cat{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c,var(--accent))}
.card h3{font-size:1.24rem;margin:10px 0 8px}
.card p{color:var(--ink-soft);font-size:.96rem}
.card__link{margin-top:14px;display:inline-flex;gap:.4em;font-weight:600;color:var(--accent);font-size:.92rem}
.card--cat{border-top:3px solid var(--c,var(--accent));display:flex;flex-direction:column}
.card--cat .card__link{margin-top:auto}

/* "Ce livrăm" — split intro + compact family grid (V3) */
.livram{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:start}
.livram__intro h2{font-size:clamp(28px,3vw,40px);margin-top:10px}
.livram__intro .muted{margin-top:14px;font-size:1.05rem;max-width:40ch}
.livram__intro .btn{margin-top:24px}
.livram__grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.livcard{background:var(--panel);padding:22px 22px;transition:background var(--dur)}
.livcard:hover{background:var(--paper-2)}
.livcard h3{font-size:1.14rem;margin-bottom:6px}
.livcard p{color:var(--ink-soft);font-size:.9rem}
@media(max-width:820px){.livram{grid-template-columns:1fr;gap:28px}.livram__grid{grid-template-columns:1fr}}

/* category color hooks (subtle, only on top border / label) */
[data-cat="pneumatica"]{--c:var(--pneu)}[data-cat="hidraulica"]{--c:var(--hydro)}
[data-cat="vane"]{--c:var(--valve)}[data-cat="pompe"]{--c:var(--pump)}
[data-cat="filtrare"]{--c:var(--filter)}[data-cat="senzori"]{--c:var(--sensor)}

/* ---- Feature rows / SEO blocks ------------------------------------------ */
.feature{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature .item h3{font-size:1.1rem;display:flex;align-items:center;gap:.5em}
.feature .item p{color:var(--ink-soft);font-size:.96rem;margin-top:8px}
.tick{display:none}
.prose{max-width:72ch}
.prose h2{font-size:1.7rem;margin:2.2rem 0 .8rem}
.prose h3{font-size:1.24rem;margin:1.8rem 0 .6rem}
.prose p{margin:.7rem 0;color:#2c333f}
.prose ul{margin:.7rem 0 .7rem 1.2rem;color:#2c333f}
.prose li{margin:.35rem 0}
.faq details{border-bottom:1px solid var(--line-2);padding:16px 0}
.faq summary{font-family:var(--f-display);font-weight:560;font-size:1.1rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-family:var(--f-mono)}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:10px;color:var(--ink-soft)}

/* ---- Brand wall ---------------------------------------------------------- */
.brandwall{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:0;overflow:hidden}
.brandcell{padding:26px 22px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);transition:background var(--dur);display:flex;flex-direction:column}
.brandcell:hover{background:var(--paper-2)}
.brandcell .bplate{background:#f2f4f7;border-bottom:1px solid var(--line-2);margin:-26px -22px 16px;min-height:74px;padding:16px 22px;display:flex;align-items:center}
.brandcell .bplate img{max-height:36px;max-width:158px;width:auto;object-fit:contain;object-position:left center}
.brandcell .bplate .wm{color:var(--ink);font-family:var(--f-display);font-weight:600;font-size:1.2rem;letter-spacing:-.01em}
.brandcell .bm{font-family:var(--f-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-top:8px}
.brandcell p{font-size:.9rem;color:var(--ink-soft);margin-top:10px}
.brandcell .cellfoot{margin-top:auto;padding-top:14px}
.tagpill{display:inline-block;font-family:var(--f-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-ink);background:var(--accent-wash);padding:3px 8px;border-radius:5px}

/* ---- Catalog specific ---------------------------------------------------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.chip{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.02em;padding:.5em .9em;border:1px solid var(--line);border-radius:999px;background:var(--paper);cursor:pointer;color:var(--ink-soft);transition:all var(--dur)}
.chip:hover{border-color:var(--ink-soft);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
/* flex-wrap + min-width:0 on the text side: German's "Angebot anfordern" button
   cannot shrink and the row had nowhere to give, so a populated search overflowed
   320px. The button wraps to its own line instead. */
.result{border:1px solid var(--line);border-radius:0;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.result>div:first-child{min-width:0}
.result .code{font-family:var(--f-mono);font-weight:500}
.result .rn{font-size:.9rem;color:var(--ink-soft)}
.stock{font-family:var(--f-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:5px;background:var(--paper-2);color:var(--ink-soft)}
.stock--ok{color:#2c6a49;background:#eaf5ee}
.empty{border:1px dashed var(--line);border-radius:0;padding:30px;text-align:center;color:var(--ink-soft)}

/* ---- Catalog layout (sidebar + results) ---------------------------------- */
.catalog-layout{display:grid;grid-template-columns:288px 1fr;gap:44px;align-items:start}
.cat-side{position:sticky;top:80px;max-height:calc(100vh - 100px);overflow-y:auto;padding-right:6px;border-right:1px solid var(--line-2)}
.cat-side__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cat-side__head h2{font-size:1.05rem}
.cat-side__head button{font-family:var(--f-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);background:none;border:none;cursor:pointer}
/* "Categorii" and "Firmă" are PEER filter groups, so both are h2 — they were
   h3 and h4, which put an h3 before the page's first h2 and implied Firmă was
   nested under Categorii. Class-based now so the tag carries the semantics and
   the class carries the look. */
.cat-side__group{font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin:26px 0 10px;font-weight:500}
.tree__fam{border-top:1px solid var(--line-2)}
.tree__fam:first-child{border-top:none}
.fam__row{display:flex;align-items:center;gap:9px;cursor:pointer}
.fam__row .fam__toggle{color:var(--ink-soft);font-family:var(--f-mono);transition:transform var(--dur);font-size:.9rem;background:none;border:none;cursor:pointer;padding:11px 0 11px 10px}
.fam__row.open .fam__toggle{transform:rotate(90deg)}
/* Promoted from <span> to <button> so it is keyboard-operable — it always
   toggled the category on click, which left keyboard users unable to expand a
   family at all. Reset the UA button chrome so it looks exactly as before. */
/* flex:1 — the button was only as wide as its own text, so the gap between the
   label and the chevron was dead space and the row looked clickable where it
   was not. Stretching it makes the whole row (minus the checkbox) the hit area,
   which also gives a comfortable touch target on mobile. */
.fam__name{flex:1;font-weight:600;font-size:.96rem;appearance:none;background:none;border:0;margin:0;
  padding:11px 0;font-family:inherit;color:inherit;text-align:left;cursor:pointer}
.fam__children{display:none;padding:0 0 8px 6px}
.tree__fam.open .fam__children{display:block}
.grp__label{font-family:var(--f-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin:10px 0 4px;padding-left:26px}
.leaf,.brand-opt{display:flex;align-items:center;gap:9px;padding:6px 0 6px 26px;cursor:pointer;font-size:.88rem;color:var(--ink-soft);border-radius:6px}
.brand-opt{padding-left:2px}
.leaf:hover,.brand-opt:hover{color:var(--ink)}
.leaf input,.brand-opt input,.fam__row input{width:15px;height:15px;accent-color:var(--accent);flex:none;cursor:pointer}
.leaf.on,.brand-opt.on{color:var(--ink);font-weight:500}
.cat-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.cat-toolbar .count{font-family:var(--f-mono);font-size:.74rem;color:var(--ink-soft)}
.pill-sel{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:.68rem;background:var(--accent-wash);color:var(--accent-ink);padding:4px 9px;border-radius:6px;margin:0 6px 6px 0}
.pill-sel button{background:none;border:none;color:var(--accent-ink);cursor:pointer;font-size:.8rem;line-height:1}
.res-cat{margin-bottom:34px}
.res-cat__top{border-top:3px solid var(--c,var(--accent));padding-top:14px}
.res-cat__top .card__cat{color:var(--c,var(--accent))}
.res-cat__top h3{font-size:1.35rem;margin:6px 0 8px}
.subgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:14px}
.sublink{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid var(--line);border-radius:0;padding:11px 13px;font-size:.9rem;transition:border-color var(--dur),background var(--dur)}
.sublink:hover{border-color:var(--ink-soft);background:var(--paper-2)}
.sublink .n{font-family:var(--f-mono);font-size:.62rem;color:var(--ink-faint)}
.prod-card{border:1px solid var(--line);border-radius:0;overflow:hidden;transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur);background:var(--panel)}
.prod-card:hover{border-color:var(--ink-soft);transform:translateY(-2px);box-shadow:var(--shadow)}
.prod-card__img{position:relative;aspect-ratio:4/3;background:#fff;display:grid;place-items:center;color:var(--ink-faint);font-family:var(--f-mono);font-size:.66rem;border-bottom:1px solid var(--line-2)}
/* uniform product-photo template: every photo fills the box, contained, on white */
/* min-height:0 is load-bearing. The box sets aspect-ratio:4/3, but this <img> is
   a GRID ITEM, and a grid item's automatic minimum size is its content's
   intrinsic size — which for a replaced element wins over the container's
   aspect-ratio. So any square-ish product photo (UNIVER 1000x1000, and ~570 of
   the 1610 catalogue photos are square) forced the box from 176px to 236px:
   ragged card heights, and a 60px jump the moment each lazy image decoded.
   Zeroing the minimum lets aspect-ratio hold and object-fit:contain letterbox. */
.prod-card__img>img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;background:#fff;padding:18px}
.prod-card__b{padding:14px 15px}
.prod-card .code{font-family:var(--f-display);font-weight:600;font-size:1rem;letter-spacing:-.01em;color:var(--ink)}
/* brand logo overlay on product photos */
.brandtag{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;height:34px;padding:0 12px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.06);font-family:var(--f-display);font-weight:700;font-size:.74rem;letter-spacing:.03em;color:var(--ink-deep);text-transform:uppercase}
.brandtag img{height:24px;max-width:120px;width:auto;object-fit:contain;display:block}
/* larger brand logo on the big product-detail image */
.contact-grid .prod-card__img .brandtag{top:16px;left:16px;height:48px;padding:0 16px}
.contact-grid .prod-card__img .brandtag img{height:34px;max-width:170px}
/* datasheet button */
.datasheet{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--line);padding:.62em 1.05em;font-weight:600;font-size:.92rem;color:var(--ink);transition:border-color var(--dur),background var(--dur)}
.datasheet:hover{border-color:var(--ink-soft);background:var(--paper-2)}
.desc-list{margin:14px 0 0;padding:0;list-style:none}
.desc-list li{position:relative;padding:6px 0 6px 18px;color:#2c333f}
.desc-list li::before{content:"—";position:absolute;left:0;color:var(--accent)}
.prod-card .pn{font-size:.85rem;color:var(--ink-soft);margin-top:3px}
/* ---- Mobile filter bar --------------------------------------------------- */
/* Invisible on desktop: there the sidebar is always on screen, so a toggle
   would be noise. Everything below only exists under 860px. */
.filter-dock{display:none}
@media(max-width:860px){
  .catalog-layout{grid-template-columns:1fr;gap:0}
  .cat-side{position:static;max-height:none;border-right:none;border-bottom:1px solid var(--line-2);padding:0 0 20px;margin-bottom:24px;display:none}
  .cat-side.open{display:block}

  /* The dock, not the button, is what sticks: a bare sticky button would let
     the results scroll through the gap between it and the header. The dock
     carries the paper background that closes that gap. 65px is the header's
     measured height, constant across every mobile width. */
  .filter-dock{display:block;position:sticky;top:65px;z-index:40;
    background:var(--paper);padding:12px 0 10px;margin-bottom:8px}
  .filter-bar{
    display:flex;align-items:center;gap:12px;width:100%;
    /* 54px clears the 44px minimum touch target with room to spare */
    min-height:54px;padding:0 16px;
    font-family:var(--f-body);font-size:1rem;font-weight:600;line-height:1.25;
    text-align:left;color:var(--accent-ink);background:var(--accent-wash);
    border:1.5px solid var(--accent);border-radius:12px;cursor:pointer;
    box-shadow:0 10px 22px -16px rgba(30,86,201,.7);
    transition:background var(--dur),box-shadow var(--dur)}
  .filter-bar:hover{background:#e3ecfa}
  .filter-bar:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .filter-bar:active{box-shadow:none}
  .filter-bar__ico{width:20px;height:20px;flex:none}
  .filter-bar__label{flex:1;min-width:0}
  .filter-bar__chev{width:18px;height:18px;flex:none;transition:transform var(--dur) var(--ease)}
  .filter-bar.is-open .filter-bar__chev{transform:rotate(180deg)}
  /* Filled counter: with filters on, the bar has to read as ACTIVE at a glance,
     not merely as a control that exists. */
  /* [hidden] sets display:none, but only at the UA level — the display below
     would win, so an empty badge kept rendering as a blue dot. */
  .filter-bar__badge[hidden]{display:none}
  .filter-bar__badge{flex:none;min-width:24px;height:24px;padding:0 7px;border-radius:999px;
    background:var(--accent);color:#fff;font-family:var(--f-mono);font-size:.72rem;
    display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
  .filter-bar.has-filters{background:#fff;border-width:2px}
  .filter-hint{margin:8px 2px 0;font-size:.82rem;line-height:1.45;color:var(--ink-soft)}
  /* Once the bar is docked under the header the hint has been read and only
     eats reading space, so it goes with the scroll. */
  .filter-dock.is-stuck{padding-bottom:8px;box-shadow:0 10px 14px -14px rgba(22,28,38,.5)}
  .filter-dock.is-stuck .filter-hint{display:none}
  /* Once something is selected the hint has done its job; the chips under the
     toolbar say what is active from then on. */
  .filter-hint[hidden]{display:none}
  /* Anchor jumps and focus rings must not land under the docked bar. */
  .cat-main{scroll-margin-top:130px}
  .res-cat{scroll-margin-top:130px}
}
@media(prefers-reduced-motion:reduce){
  .filter-bar__chev{transition:none}
}

/* ---- Contact form -------------------------------------------------------- */
/* min-width:0 is the companion to minmax(0,1fr) on the track: fixing the track
   alone is not enough, because a grid ITEM also defaults to min-width:auto and
   an <input> reports its default ~20-character size as min-content. Without
   this the contact form pushed the page 19px wide at 320. */
.field{margin-bottom:16px;min-width:0}
.field label{display:block;font-size:.86rem;font-weight:600;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:9px;padding:12px 13px;font-family:inherit;font-size:.98rem;color:var(--ink);background:var(--paper);transition:border-color var(--dur)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);outline:none}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px}
/* The value side must be allowed to shrink and break: the label has a 90px
   min-width, and German compounds ("OMFB — Hydraulikkomponenten") have no space
   to wrap at, so the row pushed past a 320px viewport. */
.info-row{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.info-row>span:last-child{min-width:0;overflow-wrap:anywhere}
.info-row .k{font-family:var(--f-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);min-width:90px}
.note-flag{font-size:.78rem;color:var(--valve);font-family:var(--f-mono)}

/* ---- CTA band ------------------------------------------------------------ */
.cta-band{background:var(--ink-deep);color:#fff;border-radius:18px;padding:48px 44px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.cta-band h2{color:#fff;font-size:1.7rem}
.cta-band p{color:#c3c9d4;margin-top:8px}
.cta-band .btn{background:#fff;color:var(--ink)}
.cta-band .btn:hover{background:var(--accent-wash)}

/* ---- Footer -------------------------------------------------------------- */
.foot{background:var(--paper-2);border-top:1px solid var(--line-2);padding:56px 0 30px;margin-top:20px}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot h4{font-family:var(--f-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:14px;font-weight:500}
.foot a{display:block;font-size:.92rem;color:var(--ink-soft);padding:4px 0}
.foot a:hover{color:var(--ink)}
.foot__legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line-2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--ink-soft)}
.foot__legal .mono{font-size:.74rem}
/* Studio credit. Sits as the third item in the legal row, so on a wide footer
   it lands right and on a narrow one it wraps onto its own line with the rest.
   The icons are inline SVG rather than a font or a CDN sprite — two more
   requests and someone else's uptime is a bad trade for a footer line. */
.credit{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.credit>a:first-child{color:var(--ink-soft);border-bottom:1px solid transparent}
.credit>a:first-child:hover{color:var(--ink);border-bottom-color:var(--line)}
.credit__ico{display:inline-flex;color:var(--ink-faint);transition:color var(--dur) var(--ease)}
.credit__ico:hover{color:var(--accent)}
.credit__ico svg{width:15px;height:15px;display:block}

/* ---- Reveal (calm) ------------------------------------------------------- */
/* .reveal starts invisible and is cleared by initReveal(). With JS disabled
   nothing ever clears it, so whole sections stayed permanently blank — the
   entire "De ce noi" value proposition on the home page and the "Cum lucrăm"
   process on despre.html. The paired <noscript> rule in each page's <head>
   restores them; this comment is here so the two are not separated. */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.btn:hover{transform:none}}

/* ---- Responsive ---------------------------------------------------------- */
@media(max-width:960px){
  .grid--4,.brandwall{grid-template-columns:repeat(2,1fr)}
  .grid--3,.feature{grid-template-columns:1fr 1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
}
/* header collapses at 920px. The comment below always said the full bar needs
   ~920px, but the query was written at 900px — so 901–919px kept the desktop
   bar in a viewport too narrow for it and the page overflowed ~3px
   horizontally. Measured clean at 320/375/390/768/1024/1440/1920 either way;
   the gap only showed on the odd widths between. */
@media(max-width:920px){
  .nav,.tel{display:none}
  .burger{display:block}
  .drawer-open .nav{display:flex;position:fixed;inset:64px 0 auto 0;flex-direction:column;background:var(--ink-deep);padding:20px 22px;gap:18px;border-bottom:1px solid rgba(255,255,255,.12);z-index:59}
}
@media(max-width:680px){
  .wrap{padding:0 22px}
  .grid--3,.grid--4,.grid--2,.feature,.brandwall{grid-template-columns:minmax(0,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr}
  .hero{padding:48px 0 16px}
  .cta-band{padding:34px 26px}
}
/* very narrow: shave header chrome so the bar fits 390px */
@media(max-width:430px){
  .top__tools{gap:8px}
  .top__tools .btn--sm{padding:.5em .75em;font-size:.8rem}
  .brandmark{font-size:.98rem}
  .brandmark img{height:34px}
}
/* 320px (the narrowest phone we target) pushed a 45px horizontal scrollbar onto
   every page. Two unbreakable strings caused it: the footer email, and the code
   input — `flex:1` does NOT let a flex item shrink below its content, because
   min-width defaults to auto. Both need saying explicitly. */
@media(max-width:400px){
  .wrap{padding:0 16px}
  .foot__grid{grid-template-columns:1fr;gap:24px}
  .foot a{overflow-wrap:anywhere}
  .search input{min-width:0}
  .search .pre{padding:0 10px}
  .search button{padding-left:.9em;padding-right:.9em}
  .brandmark .tld{display:none}    /* ".ro" — the wordmark still reads without it */
  /* The quote CTA is the widest variable item in the header and its label is the
     longest string in several languages ("Ajánlatot kérek", "Demander une offre"),
     which overflowed 320px in en/bg/de/fr/hu while Romanian happened to fit — the
     reason a Romanian-only sweep called this clean. Contact stays one tap away
     through the burger nav and the footer. */
  .top__tools .btn--sm{display:none}
  .seo-index ul{padding-left:14px}
  .seo-index a{overflow-wrap:anywhere}
  .brandwall__item,.partner-card{min-width:0}
  .partner-card *{overflow-wrap:anywhere}
}
/* About-page figures. This was an inline repeat(4,1fr) on the element, which no
   media query can override — so it stayed four columns down to 320px and pushed
   the page 51px wide. In the stylesheet it can actually respond. */
.hero__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media(max-width:680px){.hero__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}

/* crawlable full-catalog index (injected by the generator) */
.seo-index{border:1px solid var(--line);padding:14px 18px;background:var(--paper-2)}
.seo-index summary{cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:.98rem}
.seo-index h3{font-size:.92rem;margin:14px 0 6px}
.seo-index ul{margin:0;padding-left:18px;columns:2;column-gap:28px;font-size:.88rem;line-height:1.9}
.seo-index a:hover{color:var(--accent)}
@media(max-width:680px){.seo-index ul{columns:1}}
/* Ordering codes on a product page: many short mono strings, so pack them into
   narrow auto-fill columns instead of the 2-column prose grid .seo-index uses
   for its long link titles. list-style off — a code is an identifier, not prose. */
.codes-list{margin:12px 0 0;padding:0;list-style:none;columns:auto;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:4px 14px;
  font-family:var(--f-mono);font-size:.82rem;line-height:1.7;color:var(--ink-soft)}
.codes-block summary{font-family:var(--f-display)}

/* ---- cookie consent bar --------------------------------------------------
   Fixed to the bottom rather than a modal overlay: nothing on this site is
   gated behind the answer, so trapping focus to force one would be theatre.
   The two buttons stay side by side down to the narrowest layout so neither
   answer ends up below the fold. */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--paper);border-top:1px solid var(--line);box-shadow:var(--shadow)}
.cc__in{max-width:var(--wrap);margin:0 auto;padding:16px 40px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cc__text{flex:1;min-width:min(100%,32ch);margin:0;font-size:.9rem;line-height:1.5;color:var(--ink-soft);text-wrap:pretty}
.cc__acts{display:flex;gap:10px;flex-shrink:0}
@media(max-width:720px){.cc__in{padding:14px 20px;gap:14px}.cc__acts{width:100%}.cc__acts .btn{flex:1;justify-content:center}}

/* ---- legal pages (confidentialitate, cookies) ----------------------------
   Long prose, so the measure is capped and the headings get room. Nothing
   here is reused elsewhere, which is why it sits at the end rather than in
   the section rules. */
.legal{max-width:74ch}
.legal h2{font-size:1.12rem;letter-spacing:-.01em;margin:34px 0 10px}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 12px;color:var(--ink-soft)}
.legal ul{margin:0 0 14px;padding-left:20px;color:var(--ink-soft)}
.legal li{margin-bottom:7px}
.legal a{color:var(--accent);border-bottom:1px solid var(--accent-wash)}
.legal a:hover{border-bottom-color:currentColor}
.legal strong{color:var(--ink)}
.legal__box{border-left:3px solid var(--accent);padding:12px 16px;background:var(--paper-2);border-radius:0 6px 6px 0}
.legal__date{margin-top:28px;font-family:var(--f-mono);font-size:.74rem;color:var(--ink-faint)}
.legal .wrap-x{overflow-x:auto;margin:14px 0 16px;border:1px solid var(--line)}
.legal table.ck{border-collapse:collapse;width:100%;min-width:520px;font-size:.88rem}
.legal table.ck th,.legal table.ck td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line-2)}
.legal table.ck th{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);background:var(--paper-2);font-weight:500}
.legal table.ck tr:last-child td{border-bottom:none}
.legal table.ck code{font-family:var(--f-mono);font-size:.86em}
/* legal links in the footer bottom row */
.foot__policies{display:inline-flex;gap:14px;flex-wrap:wrap}
.foot__policies a{display:inline;padding:0}
/* the consent bar's link out to the cookie policy */
.cc__text a{color:var(--ink);border-bottom:1px solid var(--line);white-space:nowrap}
.cc__text a:hover{border-bottom-color:var(--ink)}