/* ---------------------------------------------------------------------------
   Legal pages (privacy, terms). The same tokens as the main page — palette 5a
   of design/design_handoff_smart_laycan_brand — with only the styles a page of
   running text needs. The main page keeps its own copy inline; these two share
   this file because they are identical in shape.
   --------------------------------------------------------------------------- */
:root {
  --sl-bg: #F7F5F0;
  --sl-surface: #FFFFFF;
  --sl-line: #D9D5CC;
  --sl-line-strong: #BFB9AC;
  --sl-text: #1D1F20;
  --sl-text-2: #4F6B66;
  --sl-text-3: #8A9A96;
  --sl-accent: #2F6B63;
  --sl-accent-hover: #255952;
  --sl-accent-soft: #DCEAE6;

  --font: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --measure: 1180px;
  --doc: 720px;
  --gutter: 24px;
}
@media (max-width: 640px) { :root { --gutter: 16px; } }

* { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sl-bg);
  color: var(--sl-text);
  font: 400 17px/1.62 var(--font);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--sl-accent-soft); }
:focus-visible { outline: 2px solid var(--sl-accent); outline-offset: 2px; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--sl-accent); }
a:hover { color: var(--sl-accent-hover); }
b { font-weight: 600; }

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

/* Header — the main page's cream bar, without the section nav */
.top { position: sticky; top: 0; z-index: 20; background: rgba(247,245,240,.92); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--sl-line); }
.top-in { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--sl-text); }
.brand img { width: 38px; height: auto; }
.brand span { font: 700 17px/1 var(--display); letter-spacing: .10em; }
.back { margin-left: auto; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }

/* The document itself */
.doc { max-width: calc(var(--doc) + var(--gutter) * 2); padding-top: 56px; padding-bottom: 88px; }
.eyebrow { font: 600 12.5px/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--sl-accent); margin: 0 0 12px; }
h1 { font: 600 clamp(36px, 5vw, 50px)/1.05 var(--display); letter-spacing: -.005em; margin: 0; }
.date { color: var(--sl-text-3); font-size: 15px; margin: 10px 0 28px; }
.lead { font-size: 18.5px; color: var(--sl-text-2); margin: 0 0 8px; }
.lead b { color: var(--sl-text); }
h2 { font: 600 24px/1.25 var(--font); margin: 38px 0 10px; }
p { margin: 0 0 14px; }
ul { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 9px; }

/* Company particulars */
.imprint { margin: 20px 0 22px; padding: 22px 24px; background: var(--sl-surface); border: 1px solid var(--sl-line); border-radius: 10px; display: grid; gap: 16px 32px; }
.imprint > div { display: grid; gap: 3px; }
.imprint dt { font: 600 11.5px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--sl-text-3); }
.imprint dd { margin: 0; font-size: 16.5px; overflow-wrap: anywhere; }
@media (min-width: 620px) {
  .imprint { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .imprint > div:first-child { grid-column: 1 / -1; }
}

/* Footer — as on the main page */
footer { border-top: 1px solid var(--sl-line); padding: 28px 0 40px; }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-size: 14px; color: var(--sl-text-2); }
footer .brand { font-size: 14px; }
footer .brand img { width: 30px; }
footer .r { margin-left: auto; color: var(--sl-text-3); }
@media (max-width: 640px) { footer .r { margin-left: 0; } }