/* Sackgram Labs, Inc. — sackgram.com
   Hand-written CSS, no build step, no external requests. Every colour below
   was checked for WCAG contrast rather than picked by eye:
     brand #3BC3DE on white is only 2.09:1, so it is NEVER used for text on a
     light background — only as a filled block (dark text on it measures
     7.07:1) or as a rule/accent. Links use #0B6B7C (6.16:1 on white). */

:root {
  --brand: #3BC3DE;
  --brand-ink: #0A2C33;   /* text on a brand-filled block, 7.07:1 */
  --link: #0B6B7C;        /* 6.16:1 on white */
  --ink: #111418;         /* 18.47:1 */
  --muted: #4A5560;       /* 7.61:1 */
  --line: #E3E8EC;
  --bg: #FFFFFF;
  --bg-soft: #F6F9FA;
  --maxw: 44rem;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--link); }
a:hover { text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem;
  padding-top: 1rem; padding-bottom: 1rem;
}
.brand {
  font-weight: 800; letter-spacing: 0.14em; font-size: 1.05rem;
  color: var(--ink); text-decoration: none; margin-inline-end: auto;
}
.brand span { color: var(--link); }
nav ul { display: flex; flex-wrap: wrap; gap: 1.1rem; list-style: none; margin: 0; padding: 0; }
nav a { font-size: 0.95rem; text-decoration: none; }
nav a:hover, nav a[aria-current="page"] { text-decoration: underline; }
nav a[aria-current="page"] { font-weight: 600; }

/* ---------- languages ---------- */
/* All twelve languages, by their own names, at one size and weight, in one
   fixed order on every page (Eric, 2026-10-06). The current one is marked by
   an underline only — never bolder or bigger, so no language looks primary.
   No automatic redirect: the reader chooses. */
.lang-list { flex-basis: 100%; }
.lang-list ul { gap: 0.35rem 0.9rem; }
.lang-list a { font-size: 0.85rem; font-weight: 400; color: var(--muted); }
.lang-list a[aria-current="page"] { font-weight: 400; color: var(--ink); text-decoration: underline; }

/* ---------- hero ---------- */
.hero { background: var(--brand); color: var(--brand-ink); padding: 3.25rem 0; }
.hero h1 { margin: 0 0 0.75rem; font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1.2; }
.hero p { margin: 0; font-size: clamp(1.05rem, 3.2vw, 1.2rem); max-width: 34rem; }

/* ---------- why ---------- */
/* The declaration between the hero and the feature list. Deliberately quiet:
   a second coloured band under the brand-filled hero would compete with it,
   so this is the soft background the .card already uses, with the brand only
   as the rule at the top. Body text keeps the page's own size — this section
   is read, not scanned. */
.why {
  background: var(--bg-soft);
  border-top: 3px solid var(--brand);
  border-bottom: 1px solid var(--line);
  padding: 2.5rem 0;
}
.why h2 { margin: 0 0 0.9rem; }
.why p { max-width: 38rem; }
.why p:last-child { margin-bottom: 0; }
.why .why-close { font-weight: 650; }

@media (max-width: 30rem) {
  .why { padding: 2rem 0; }
}

/* ---------- content ---------- */
main { padding: 2.75rem 0 3.5rem; }
h2 { margin: 2.25rem 0 0.6rem; font-size: 1.3rem; line-height: 1.3; }
h3 { margin: 1.6rem 0 0.4rem; font-size: 1.05rem; }
main > .wrap > h2:first-child, main > .wrap > h1:first-child { margin-top: 0; }
h1 { font-size: clamp(1.7rem, 5vw, 2.1rem); line-height: 1.25; margin: 0 0 0.5rem; }
p, ul, ol { margin: 0 0 1rem; }
ul, ol { padding-inline-start: 1.35rem; }
li { margin-bottom: 0.4rem; }
strong { font-weight: 650; }

.lede { font-size: 1.08rem; color: var(--muted); }
.meta { color: var(--muted); font-size: 0.92rem; margin-bottom: 2rem; }

.card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--brand);
  border-radius: 6px;
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
}
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

/* The /i/ page's Open in Sackgram button (2026-09-30). Brand fill with
   --brand-ink text, the same 7.07:1 pairing the hero uses; 48px tall so it is
   a comfortable tap target on a phone. */
.open-app {
  display: inline-block;
  min-height: 48px;
  line-height: 48px;
  padding: 0 1.4rem;
  border-radius: 6px;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 650;
  text-decoration: none;
}
/* Its last <p> loses its margin to `.card p:last-child`; the block keeps one. */
#open-app { margin-bottom: 1rem; }

.features { list-style: none; padding: 0; }
.features li { padding-inline-start: 1.5rem; position: relative; margin-bottom: 0.8rem; }
.features li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.62em;
  width: 0.6rem; height: 0.6rem; border-radius: 2px; background: var(--brand);
}

dl { margin: 0 0 1rem; }
dt { font-weight: 650; margin-top: 1rem; }
dd { margin: 0.2rem 0 0; color: var(--muted); }

/* The home page's language link, inside the brand-filled hero: same
   --brand-ink text as the hero (7.07:1), underlined so it reads as a link. */

/* Tables in the Privacy Policy (the processors list). Scrolls sideways on a
   narrow phone rather than squeezing three columns. */
.table-scroll { overflow-x: auto; margin: 0 0 1rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { border: 1px solid var(--line); padding: 0.5rem 0.6rem; text-align: start; vertical-align: top; }
th { background: var(--bg-soft); font-weight: 650; }

h4 { margin: 1.3rem 0 0.4rem; font-size: 1rem; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 2rem 0 2.5rem;
  color: var(--muted);
  font-size: 0.92rem;
}
.site-footer ul { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0; margin: 0 0 0.9rem; }

@media (max-width: 30rem) {
  body { font-size: 16px; }
  .hero { padding: 2.5rem 0; }
}