/* ============================================================================
   Smooth-Soft — shared stylesheet
   Zero dependencies: no webfonts, no CDN, no JS. Every page links only this
   file. Keep it that way — the privacy policy states the site makes no
   external requests, and that must remain literally true.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ================= PALETTE "SIGNAL" =================
     Electric indigo carries the brand; teal, coral and amber are the
     secondary set. The secondaries are GRAPHIC ONLY — accent bars, dots,
     rules. None of them clears 4.5:1 on white, so none of them may be used
     for text or as a fill behind white text. Contrast figures below are
     against --bg. */

  /* ---- surfaces ----
     Soft off-white rather than pure white: easier on the eyes over a long
     read, and it lets the cards be genuinely white so they lift off the page.
     To go brighter, move --bg toward #ffffff; to go softer, move it toward
     #eef1f7. --panel should stay #ffffff either way. */
  --bg:            #f5f7fb;   /* page */
  --bg-alt:        #eaeef7;   /* alternating band, one step deeper */
  --panel:         #ffffff;   /* cards — white, so they read as raised */
  --panel-border:  #dfe4ef;
  --rule:          #e3e8f1;

  /* ---- ink ---- */
  /* Contrast figures are against --bg (#f5f7fb), not white — the softer page
     costs about 0.3 of a ratio point, which is why --muted is a shade darker
     than it would need to be on pure white. */
  --text:          #1c2231;   /* 13.4:1 */
  --text-dim:      #525c70;   /*  5.8:1 */
  --muted:         #666f7e;   /*  4.7:1 — as light as it can go. --muted styles
                                 the .facts field labels on the imprint, which a
                                 verifier has to read. */

  /* ---- brand ---- */
  --accent:        #3b5bff;   /* 5.1:1 — links, and white ink sits on this */
  --accent-soft:   #eef1ff;
  --accent-ink:    #ffffff;
  --accent-deep:   #2843d9;   /* 7.3:1 — hover, darker so the state reads */

  /* ---- secondary set (graphic only, never text) ---- */
  --teal:          #00a88f;
  --coral:         #ff5c35;
  --amber:         #ffb020;

  /* ---- status ---- */
  --good:          #0d8a63;
  --warn:          #8a5f0c;

  /* ---- scale ---- */
  --maxw:          1080px;
  --maxw-prose:    760px;
  --radius:        12px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", Consolas, "SF Mono", "Liberation Mono", monospace;
}

/* ─────────────────────────────────────────────────────────────────────────
   LIGHT ONLY, DELIBERATELY.

   `color-scheme: light` above tells the browser to render this page light
   even when the visitor's OS is set to dark. Without it, a dark-mode visitor
   sees dark form controls and scrollbars against our white page.

   There is no `prefers-color-scheme: dark` block. The site is meant to read
   as white and bright, and honouring the OS preference meant most of the
   team never actually saw it that way.

   To bring dark mode back, add a `@media (prefers-color-scheme: dark)` block
   overriding the tokens above, restore the matching block on `.hero`, and
   restore the `<style>` block inside assets/img/logo.svg — the logo carries
   its own copy because it is loaded via <img> and cannot inherit page CSS.
   ───────────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
  font-weight: 650;
}
h1 { font-size: clamp(30px, 4.6vw, 46px); letter-spacing: -0.025em; }
h2 { font-size: clamp(23px, 3vw, 31px); }
h3 { font-size: 18px; }
h4 { font-size: 15px; }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

code, .mono { font-family: var(--font-mono); font-size: 0.92em; }

/* ---------------------------------------------------------------- layout -- */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.prose { max-width: var(--maxw-prose); }

section { padding: 68px 0; }
section.band { background: var(--bg-alt); border-block: 1px solid var(--rule); }
section.tight { padding: 48px 0; }

/* Pill rather than bare text — it puts a block of brand colour at the top of
   every section instead of a thin line of it. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 11px;
  border-radius: 100px;
  margin: 0 0 14px;
}

.lead {
  font-size: clamp(16px, 1.9vw, 19px);
  color: var(--text-dim);
  max-width: 62ch;
}

.section-head { margin-bottom: 34px; max-width: 68ch; }
.section-head h2 { margin-bottom: 10px; }
.section-head p  { color: var(--text-dim); margin: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
  z-index: 200;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------------- nav -- */

nav.site {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 62px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}
.logo:hover { text-decoration: none; }
/* The mark is 42×32, not square — set width and let height follow. */
.logo img { width: 30px; height: auto; flex: none; }

.nav-links {
  display: flex;
  gap: 20px;
  margin-left: auto;
  flex-wrap: wrap;
}
.nav-links a {
  font-size: 14.5px;
  color: var(--text-dim);
  font-weight: 500;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--accent); text-decoration: none; }

@media (max-width: 720px) {
  .nav-inner { height: auto; padding: 12px 0; flex-wrap: wrap; gap: 10px; }
  .nav-links { margin-left: 0; width: 100%; gap: 14px; }
  .nav-links a { font-size: 14px; }
}

/* --------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 9px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-deep); color: var(--accent-ink); }
.btn-ghost { border-color: var(--panel-border); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* ------------------------------------------------------------------ hero -- */

/* Essentially a white hero. Three washes are still there but at a whisper —
   enough that the top of the page is not dead flat, not enough to read as a
   coloured band. Raise the alphas if you want the colour back. */
.hero {
  padding: 84px 0 68px;
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(ellipse 62% 58% at 6% -8%,  rgba(59,91,255,0.07) 0%, transparent 62%),
    radial-gradient(ellipse 52% 52% at 80% -2%, rgba(0,168,143,0.055) 0%, transparent 64%),
    radial-gradient(ellipse 55% 48% at 48% 108%, rgba(255,92,53,0.04) 0%, transparent 62%);
}
.hero h1 { margin-bottom: 18px; max-width: 20ch; }
.hero .accent { color: var(--accent); }

/* ----------------------------------------------------------------- cards -- */

.grid { display: grid; gap: 18px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .grid.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid.c2, .grid.c3 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 26px 22px 22px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover { box-shadow: 0 8px 24px rgba(28, 34, 49, 0.08); transform: translateY(-2px); }
.card h3 { margin-bottom: 8px; }

/* A full-width colour cap across the top of each card. This is where the
   secondary palette earns its place — the cards read as peers but distinct,
   and the page carries colour without tinting any text.
   Graphic only: never put text in these colours, none of them clears AA. */
.bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent);
}
.bar.teal  { background: var(--teal); }
.bar.coral { background: var(--coral); }
.bar.amber { background: var(--amber); }

@media (prefers-reduced-motion: reduce) {
  .card, .card:hover { transition: none; transform: none; }
}
.card p  { color: var(--text-dim); font-size: 15px; margin: 0; }
.card p + p { margin-top: 10px; }

/* product card extras */
.card .mark { font-size: 20px; font-weight: 680; letter-spacing: -0.02em; margin-bottom: 6px; }
.card .goods { color: var(--text-dim); font-size: 15px; }
.card .status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--muted);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; }
.dot.live { background: var(--good); }

/* --------------------------------------------------------------- facts -- */

/* The imprint / registry table. This is the block a certificate authority
   reads, so it stays plain, high-contrast and copy-pasteable. */
.facts {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 15px;
}
.facts caption {
  text-align: left;
  font-weight: 650;
  font-size: 17px;
  padding-bottom: 10px;
}
.facts th,
.facts td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--rule);
}
.facts th {
  font-weight: 600;
  color: var(--muted);
  width: 34%;
  white-space: nowrap;
}
.facts td { color: var(--text); }
.facts td .sub { display: block; color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.facts .val { font-family: var(--font-mono); }

@media (max-width: 600px) {
  .facts, .facts tbody, .facts tr, .facts th, .facts td { display: block; width: auto; }
  .facts tr { border-bottom: 1px solid var(--rule); padding: 10px 0; }
  .facts th { border: 0; padding: 0 0 2px; white-space: normal; font-size: 13px; }
  .facts td { border: 0; padding: 0; }
}

/* Highlights a <<PLACEHOLDER>> still to be filled in. Nothing uses this right
   now — kept because the CI guard greps for the token, and this makes any new
   one impossible to miss on the page. */
.todo {
  background: #fff3cd;
  color: #6a4a00;
  border: 1px dashed #b98900;
  border-radius: 5px;
  padding: 1px 7px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}

.notice {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin: 0 0 26px;
  font-size: 15px;
  color: var(--text-dim);
}
.notice strong { color: var(--text); }

/* ------------------------------------------------------------ prose docs -- */

.doc h2 { margin: 36px 0 12px; font-size: 22px; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { margin: 24px 0 8px; }
.doc p, .doc li { color: var(--text-dim); }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin-bottom: 7px; }
.doc .updated { color: var(--muted); font-size: 14px; margin-bottom: 30px; }

/* ------------------------------------------------------------------ form -- */

.form { display: grid; gap: 16px; max-width: 640px; margin-top: 28px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: block; font-size: 13.5px; color: var(--text-dim); margin-bottom: 6px; font-weight: 500; }
.form input,
.form textarea {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 9px;
  color: var(--text);
  padding: 11px 13px;
  font: inherit;
  font-size: 15px;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--accent); }
.form textarea { min-height: 150px; resize: vertical; }
.form .actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-note { color: var(--muted); font-size: 13px; }
@media (max-width: 560px) { .form .row2 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- footer -- */

footer.site {
  border-top: 1px solid var(--rule);
  background: var(--bg-alt);
  padding: 44px 0 30px;
  font-size: 14.5px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: 28px;
  margin-bottom: 32px;
}
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

.foot-grid h4 {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
  font-weight: 600;
}
.foot-col a { display: block; color: var(--text-dim); margin-bottom: 8px; }
.foot-col a:hover { color: var(--accent); }

/* The legal identity block repeated in every footer — this is what makes the
   registered entity findable from any page on the domain. */
.foot-legal {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.75;
}
.foot-legal .name { color: var(--text-dim); font-weight: 600; display: block; }

.foot-bar {
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13.5px;
}

@media print {
  nav.site, .btn-row, .skip-link { display: none; }
  body { background: #fff; color: #000; }
}