/* ─────────────────────────────────────────────────────────────────────
   wendkom.com — shared stylesheet
   ─────────────────────────────────────────────────────────────────────

   WHY THIS FILE EXISTS

   index.html used to carry its whole stylesheet inline, which is the
   right shape for a one-page site. It stopped being one page the
   moment /privacy, /terms and /support became real, and four inline
   copies of the same 300 lines is four places to forget.

   CONSEQUENCE FOR DEPLOYMENT: every page now links this file. Upload
   it alongside the HTML, at the site root, or all four pages render
   as unstyled text. That is the one new failure mode this split
   introduces, and it is worth knowing about before you upload.

   Colours are defined as tokens on :root and redefined for dark mode.
   Nothing below hardcodes a colour, so a palette change happens here
   once.
   ───────────────────────────────────────────────────────────────── */

:root {
  --paper:      #f6f7f8;
  --surface:    #ffffff;
  --ink:        #15191e;
  --ink-soft:   #545c66;
  --ink-faint:  #8b939d;
  --rule:       #e1e5e9;
  --accent:     #1f5f55;
  --accent-dim: #eaf2f0;
  --amber:      #7d6420;
  --amber-dim:  #f6f0dd;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #101317;
    --surface:    #171b21;
    --ink:        #e8ebee;
    --ink-soft:   #a3abb5;
    --ink-faint:  #6f7883;
    --rule:       #262c34;
    --accent:     #6fb9aa;
    --accent-dim: #14231f;
    --amber:      #c9ab5e;
    --amber-dim:  #241f12;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* The page container.
 *
 * THESE VALUES ARE THE HOME PAGE'S, AND THE HOME PAGE IS THE REFERENCE.
 * Every other page is supposed to look like index.html, so this is the
 * one rule in the file that should not be adjusted to suit a particular
 * page. Change it and you change the thing everything else is measured
 * against.
 *
 * Three earlier attempts, all wrong, recorded so none of them returns:
 *
 *   - 62rem centred, with narrow caps on the text inside it: the text
 *     never reached the right edge of its own container, so it read as
 *     a ribbon floating left of centre.
 *   - Full viewport width with no caps at all: fixed the ribbon by
 *     making lines 150 characters long.
 *   - 80rem with the document text capped AND centred, copied from the
 *     iShalom app: that centring put page headings 275px right of the
 *     masthead wordmark while the notices beneath them stayed left, so
 *     one block had two different left edges.
 *
 * The home page has none of those problems because its content is
 * capped and LEFT-ALIGNED, starting at this padding edge — the same
 * line the masthead wordmark starts on. Alignment with the masthead is
 * what makes a page look deliberate. */
.wrap {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* Keyboard users land here first; invisible until focused. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: 10px 16px;
  border: 1px solid var(--rule);
  border-radius: 0 0 4px 0;
  z-index: 10;
}
.skip:focus { left: 0; }

/* ── Outage banner ────────────────────────────────────────────
   Injected by status-banner.js from status.json, above the
   masthead. Absent entirely when there is nothing to report, so
   none of this applies on a normal day.

   Two severities. The amber is the same token as .notice, so a
   service notice and a caveat in a legal page read as the same
   register of voice; the red is reserved for "it is down". */
.statusbar {
  background: var(--amber-dim);
  border-bottom: 1px solid var(--amber);
  color: var(--ink);
}
.statusbar--outage {
  background: #fdeaea;
  border-bottom-color: #c23b3b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .statusbar--outage {
    background: #2a1414;
    border-bottom-color: #d06a6a;
  }
}
.statusbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding-block: 12px;
  font-size: 0.9rem;
}
.statusbar__inner strong { color: var(--ink); }
.statusbar__time {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-faint);
  margin-left: auto;
}

@media (max-width: 34rem) {
  /* margin-left:auto pushes the timestamp to its own far corner on a
     phone, which reads as unrelated to the message. */
  .statusbar__time { margin-left: 0; }
}

/* ── Masthead ─────────────────────────────────────────────── */
header {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 18px;
}
.wordmark {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
nav ul {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}
nav a { color: var(--ink-soft); text-decoration: none; }
nav a:hover { color: var(--accent); }
nav a[aria-current="page"] { color: var(--accent); }

/* ── Hero ─────────────────────────────────────────────────── */
.hero { padding-block: 72px 56px; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  max-width: 20ch;
  text-wrap: balance;
}
.hero p {
  margin: 0;
  max-width: 58ch;
  font-size: 1.075rem;
  color: var(--ink-soft);
}

/* ── Sections ─────────────────────────────────────────────── */
section { padding-block: 44px; border-top: 1px solid var(--rule); }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 18px;
}

h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

/* Capped but NOT centred, unlike the document column above. These sit
   beneath a left-aligned heading in a full-width section, so a centred
   paragraph would float free of the heading it belongs to. Left-aligned
   text under a left-aligned heading is not "stuck on the left" — it is
   the two agreeing. */
.prose { color: var(--ink-soft); max-width: 62ch; }
.prose p { margin: 0 0 14px; }
.prose p:last-child { margin-bottom: 0; }

/* ── Products ─────────────────────────────────────────────── */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 18px;
  margin-top: 6px;
}
.product {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.product h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0;
}
.product p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; }

.status {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--amber-dim);
  color: var(--amber);
}
.status.live { background: var(--accent-dim); color: var(--accent); }

/* ── Company record ───────────────────────────────────────── */
.record {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}
.record dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
}
.record dt,
.record dd {
  margin: 0;
  padding: 13px 20px;
  border-top: 1px solid var(--rule);
  font-size: 0.92rem;
}
.record dt {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  align-self: stretch;
}
.record dd { font-variant-numeric: tabular-nums; }
.record dt:first-of-type,
.record dl > dt:first-child + dd { border-top: 0; }

.todo {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--amber);
}

/* A standing caveat the reader needs before believing the text
   around it. Used for the formation-date notice and for the
   plain statement of what is and is not end-to-end encrypted. */
.notice {
  margin: 18px 0 0;
  padding: 13px 16px;
  border-left: 2px solid var(--amber);
  background: var(--amber-dim);
  border-radius: 0 4px 4px 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
  /* Inside .clauses this is already constrained by the 48rem column;
     the cap is for the standing notices on the homepage, which sit in a
     full-width section. */
  max-width: 48rem;
}

/* A notice in a document header matches the width of the prose above
   it, so the two share a right edge as well as a left one. Left edges
   already agree, because nothing on these pages is centred. */
.doc > .notice { max-width: 90ch; }
.notice strong { color: var(--ink); }
.notice p { margin: 0 0 10px; }
.notice p:last-child { margin-bottom: 0; }

/* ── Legal / long-form document pages ─────────────────────── */
.doc { padding-block: 48px 8px; }
.doc h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}
.doc .dates {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 28px;
}
/* ── Document measure ─────────────────────────────────────────────────
 *
 * CAPPED AND LEFT-ALIGNED, exactly like the home page.
 *
 * index.html caps its running text (.hero p at 58ch, .prose at 62ch)
 * and starts every block at the container's padding edge — the same
 * line the masthead wordmark starts on. That alignment is what makes
 * the home page look settled, and it is the whole of what the document
 * pages were missing.
 *
 * NO margin-inline: auto here. Centring this column was the previous
 * attempt, and it put the page heading a long way right of the
 * masthead while the notice below it stayed left — one block, two left
 * edges.
 *
 * 68ch rather than the home page's 62ch: legal clauses are denser than
 * marketing copy and read better with slightly longer lines. Still well
 * inside the comfortable range, and the left edge is identical, which
 * is the part the eye actually notices.
 *
 * Tables and grids are deliberately uncapped and span the container,
 * the way the registered-details table and contact grid do on the home
 * page. .data-table also carries overflow-x: auto for narrow screens.
 * ─────────────────────────────────────────────────────────────────── */
.doc .lede,
.doc h1,
.doc .dates,
.clauses,
.toc {
  max-width: 90ch;
}

.doc .lede {
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: 0 0 8px;
}

/* Numbered clauses. The counter means inserting a clause never
   requires renumbering the ones after it by hand — which is how
   cross-references in legal text end up pointing at the wrong
   paragraph. */
.clauses { counter-reset: clause; }
.clause {
  padding-block: 26px;
  border-top: 1px solid var(--rule);
}
.clause > h2 {
  counter-increment: clause;
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 1.2rem;
  margin: 0 0 12px;
  scroll-margin-top: 20px;
}
.clause > h2::before {
  content: counter(clause);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-faint);
  min-width: 1.6rem;
  flex: none;
}
.clause h3 {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 20px 0 8px;
  color: var(--ink);
}
.clause p,
.clause li { color: var(--ink-soft); }
.clause p { margin: 0 0 12px; }
.clause p:last-child { margin-bottom: 0; }
.clause ul { margin: 0 0 12px; padding-left: 1.2rem; }
.clause li { margin-bottom: 7px; }
.clause li:last-child { margin-bottom: 0; }
.clause strong { color: var(--ink); font-weight: 600; }

/* Table of contents for the long pages. */
.toc {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 18px 22px;
  margin: 0 0 8px;
}
.toc p {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 10px;
}
/* Column COUNT is not fixed — `columns: 18rem` sets an ideal column
 * WIDTH and lets the browser fit as many as the container allows: two
 * inside the 48rem document column, one on a phone, with no media
 * query to keep in step. */
.toc ol {
  margin: 0;
  padding-left: 1.3rem;
  columns: 18rem;
  column-gap: 32px;
  font-size: 0.9rem;
}
.toc li { margin-bottom: 5px; break-inside: avoid; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* A data-practices table — what is collected, why, how long.
   Apple's and Google's privacy questionnaires both ask in roughly
   this shape, so answering in this shape keeps the page and the
   store listings consistent. */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin: 0 0 14px;
  display: block;
  overflow-x: auto;
}
.data-table th,
.data-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 14px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}
.data-table thead th {
  border-top: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.data-table tbody th {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* ── Contact ──────────────────────────────────────────────── */
.contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 18px;
}
.contact h3 {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  margin: 0 0 6px;
}
.contact p { margin: 0 0 6px; font-size: 0.95rem; }
.contact p:last-child { margin-bottom: 0; }
.contact .muted { color: var(--ink-faint); font-size: 0.87rem; }

/* ── Footer ───────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--rule);
  background: var(--surface);
  margin-top: 44px;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  justify-content: space-between;
  padding-block: 26px;
  font-size: 0.87rem;
  color: var(--ink-faint);
}
.footer-inner nav ul { gap: 20px; font-size: 0.87rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}