/* selfmanaged — the public site (www.selfmanaged.co.uk), 24 Sep 2026.
   The app's identity (web/css/app.css): square corners, ruled not boxed, no gradients, no shadows. Navy is the one
   accent; brass is the door handle in the mark and nothing else. Light and dark follow the device
   (prefers-color-scheme only: nothing is stored, so there is no toggle and no cookie notice). Every size is in rem, so
   text follows the reader's settings; on iPhone and iPad the base size follows Dynamic Type (-apple-system-body).
   Nothing here is smaller than 0.8125rem. Every control and link row is at least 44px tall, and every link outside running
   text at least 44px wide.
   Review fixes (24 Sep 2026): titles are the body size plus a fixed step (calc(1rem + Npx)), so at the largest text sizes
   they grow by the body's increase rather than in proportion, and a word like "Pricing" or "selfmanaged" isn't broken;
   the header's mark and wordmark stop growing at 40px. At the default size every title is the size it was. */

:root {
  --paper: #FCFBF8;
  --surface: #FFFFFF;
  --wash: #F1EFE9;
  --ink: #15181A;
  --muted: #555956;
  --line: #DDD9D0;
  --hair: #EBE7E0;
  --accent: #1B3348;          /* navy: links, buttons, the mark */
  --on-accent: #FCFBF8;
  --mark: #1B3348;
  --brass: #A8813F;           /* the door handle, nothing else */
  --panel: #1B3348;           /* the navy panel on the home page */
  --panel-ink: #FCFBF8;
  --panel-muted: #AFBCC9;
  --panel-rule: #34506B;
  --panel-brass: #C9A15C;
  --soon: #7E5A12;
  --soon-wash: #F9F1E1;
  --fine: #2A6344;
  --focus: #1B3348;

  --serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --wrap: 72rem;
  --doc: 44rem;
  --gutter: 16px;             /* margins in px: they don't grow with the text, so a larger text size gets the width (review fixes) */
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #10161D;
    --surface: #161E27;
    --wash: #1C2631;
    --ink: #ECEAE5;
    --muted: #B4B9B5;
    --line: #2E3A47;
    --hair: #232E3A;
    --accent: #A9C3DC;
    --on-accent: #10161D;
    --mark: #ECEAE5;
    --brass: #C9A15C;
    --panel: #1B2A3A;
    --panel-ink: #ECEAE5;
    --panel-muted: #AFBCC9;
    --panel-rule: #34506B;
    --panel-brass: #C9A15C;
    --soon: #E7C47A;
    --soon-wash: #2B2415;
    --fine: #8FD0A8;
    --focus: #A9C3DC;
  }
}

/* Increase Contrast (and Windows' "more contrast"): the quieter text and the rules go full strength. */
@media (prefers-contrast: more) {
  :root { --muted: var(--ink); --line: var(--ink); --hair: var(--muted); --panel-muted: var(--panel-ink); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* iPhone and iPad: the base size follows the reader's text size (Dynamic Type). Only where it is a touch device, since
   on a Mac the same keyword is the small system size. */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;     /* a long word (an email address, "selfmanaged" at a large text size) wraps instead of widening the page */
}
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
strong, b { font-weight: 600; }
.nowrap { white-space: nowrap; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
@media (min-width: 48rem) { :root { --gutter: 32px; } }
@media (min-width: 72rem) { :root { --gutter: 48px; } }

/* Hidden by its own height (review fixes), so at a large text size, where it wraps, it never hangs over the header. */
.skip {
  position: absolute; left: 0.5rem; top: 0; z-index: 10; transform: translateY(-110%);
  padding: 0.75rem 1rem; background: var(--accent); color: var(--on-accent); font-weight: 500; text-decoration: none;
}
.skip:focus { transform: translateY(calc(0.5rem + env(safe-area-inset-top, 0px))); }

/* ── The header ─────────────────────────────────────────────────────────────────────────── */
.site-head { border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; min-height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; color: var(--mark); text-decoration: none; }
.brand svg { flex: none; width: min(calc(1rem + 8px), 40px); height: min(calc(1rem + 8px), 40px); }
.mark .handle { fill: var(--brass); }
.wordmark { font-family: var(--serif); font-size: min(calc(1rem + 5px), 40px); line-height: 1; letter-spacing: -0.015em; color: var(--mark); }
.wordmark .w1 { font-weight: 600; }
.wordmark .w2 { font-weight: 300; }
.site-nav { display: flex; align-items: center; gap: 0.25rem 1.25rem; flex-wrap: wrap; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.125rem;
  font-size: 0.9375rem; font-weight: 500; color: var(--accent); text-decoration: none;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; }

/* ── Buttons ────────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0.625rem 1.25rem; border: 1px solid var(--accent);
  background: var(--accent); color: var(--on-accent);
  font: 500 1rem/1.3 var(--sans); text-decoration: none; text-align: center;
}
.btn:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.btn.ghost { background: transparent; color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }

/* ── Type ───────────────────────────────────────────────────────────────────────────────── */
.eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.display {
  font-family: var(--serif); font-weight: 300; letter-spacing: -0.025em; line-height: 1.08;
  font-size: calc(1rem + clamp(22px, 9.6px + 3.2vw, 48px));
}
.display strong { font-weight: 600; color: var(--accent); }
.lede { font-size: 1.125rem; line-height: 1.6; color: var(--muted); max-width: 38rem; }
.lede strong { color: var(--ink); font-weight: 500; }
.small { font-size: 0.9375rem; color: var(--muted); }
h2.section-title { font-family: var(--serif); font-weight: 400; font-size: calc(1rem + clamp(10px, 4.8px + 1.2vw, 20px)); line-height: 1.2; letter-spacing: -0.015em; }
.section-sub { color: var(--muted); max-width: 40rem; margin-top: 0.5rem; }

/* ── Home: the hero ─────────────────────────────────────────────────────────────────────── */
.hero { display: grid; gap: 0; border-bottom: 1px solid var(--line); }
.hero-copy { padding: 2.5rem 0 2.5rem; display: grid; gap: 1.25rem; align-content: center; }
.hero-note { font-size: 0.9375rem; color: var(--muted); max-width: 34rem; }
.panel {
  background: var(--panel); color: var(--panel-ink);
  padding: 2rem var(--gutter) 2.25rem;
  margin: 0 calc(-1 * max(var(--gutter), env(safe-area-inset-right, 0px))) 0 calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px)));
}
.panel .mark-lg { width: calc(1rem + 40px); height: calc(1rem + 40px); margin-bottom: 1.25rem; }
.panel .mark-lg rect.door, .panel .mark-lg line { stroke: var(--panel-ink); }
.panel .mark-lg .handle { fill: var(--panel-brass); }
.panel-title { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--panel-muted); margin-bottom: 1rem; }
.sample { display: grid; gap: 0; border-top: 1px solid var(--panel-rule); }
.sample li { list-style: none; padding: 0.875rem 0 0.875rem 0.875rem; border-left: 2px solid var(--panel-muted); border-bottom: 1px solid var(--panel-rule); }
.sample .k { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--panel-muted); }
.sample .q { font-family: var(--serif); font-weight: 400; font-size: calc(1rem + 3px); line-height: 1.3; margin-top: 0.25rem; }
.sample .m { font-size: 0.875rem; color: var(--panel-muted); margin-top: 0.25rem; }
.sample-note { font-size: 0.875rem; color: var(--panel-muted); margin-top: 1rem; }
.sample, .sample li { margin: 0; padding-right: 0; }
ul.sample { padding: 0; }
@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; }
  .hero-copy { padding: 4.5rem 3rem 4.5rem 0; }
  .panel { margin: 0; padding: 3.5rem 3rem; margin-right: calc(-1 * max(var(--gutter), env(safe-area-inset-right, 0px))); }
}

/* ── Home: sections ─────────────────────────────────────────────────────────────────────── */
.section { padding: 3rem 0; border-bottom: 1px solid var(--line); }
.section:last-of-type { border-bottom: 0; }
.today-grid { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.today-grid p { max-width: 38rem; }
.callout { border-left: 2px solid var(--accent); padding: 0.25rem 0 0.25rem 1rem; }
.features { display: grid; grid-template-columns: 1fr; gap: 0 2.5rem; margin-top: 1.75rem; padding: 0; }
.features > li { list-style: none; padding: 1.25rem 0; border-top: 1px solid var(--line); }
.features h3 { font-family: var(--serif); font-weight: 600; font-size: calc(1rem + 3px); line-height: 1.3; color: var(--ink); }
.features p { margin-top: 0.375rem; color: var(--muted); }
.features p + p { margin-top: 0.5rem; }
@media (min-width: 40rem) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tag {
  display: inline-block; margin-left: 0.375rem; padding: 0.0625rem 0.4375rem; vertical-align: 0.15em;
  border: 1px solid currentColor; font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.5;
}
.tag.coming { color: var(--soon); background: var(--soon-wash); }
.tag.premium { color: var(--accent); }
.plain-list { margin-top: 1rem; padding-left: 1.25rem; display: grid; gap: 0.5rem; max-width: 40rem; }
.cta { display: grid; gap: 1rem; }
.cta .actions { margin-top: 0.5rem; }

/* ── Pricing ────────────────────────────────────────────────────────────────────────────── */
.page-head { padding: 2.5rem 0 1.5rem; display: grid; gap: 0.75rem; }
.page-head h1 { font-family: var(--serif); font-weight: 300; font-size: calc(1rem + clamp(20px, 11.2px + 2.2vw, 36px)); line-height: 1.1; letter-spacing: -0.02em; }
.notice { border: 1px solid var(--line); background: var(--wash); padding: 0.875rem 1rem; max-width: 44rem; }
.notice.draft { border-color: var(--soon); background: var(--soon-wash); color: var(--ink); }
.notice.draft strong { color: var(--soon); }
.plans { display: grid; grid-template-columns: 1fr; gap: 0 2rem; margin: 1.5rem 0 0; padding: 0; }
.plan { list-style: none; border-top: 2px solid var(--ink); padding: 1.25rem 0 2rem; display: grid; gap: 0.75rem; align-content: start; }
.plan h2 { font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.price { font-family: var(--serif); font-weight: 300; font-size: calc(1rem + 32px); line-height: 1; letter-spacing: -0.02em; }
.price .per { font-family: var(--sans); font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.plan .for { font-weight: 500; }
.plan ul { padding-left: 1.125rem; display: grid; gap: 0.375rem; color: var(--muted); list-style: disc; }
.plan ul li::marker { color: var(--muted); }
.plan .sub { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 0.5rem; }
.plan .not-yet { font-size: 0.9375rem; color: var(--muted); }
@media (min-width: 56rem) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.legal-lines { border-top: 1px solid var(--line); padding: 1.5rem 0 3rem; display: grid; gap: 0.5rem; max-width: 46rem; color: var(--muted); font-size: 0.9375rem; }

/* ── Documents: privacy, terms, support, deletion ───────────────────────────────────────── */
.doc { max-width: var(--doc); padding-bottom: 3rem; }
.doc .meta { color: var(--muted); font-size: 0.9375rem; }
.doc h2 { font-family: var(--serif); font-weight: 600; font-size: calc(1rem + 6px); line-height: 1.3; margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.doc h3 { font-size: 1.0625rem; font-weight: 600; margin-top: 1.5rem; }
.doc p, .doc ul, .doc ol, .doc dl { margin-top: 0.75rem; }
.doc ul, .doc ol { padding-left: 1.375rem; }
.doc li + li { margin-top: 0.375rem; }
.doc ol.clauses > li { padding-left: 0.25rem; }
.doc dt { font-weight: 600; margin-top: 0.75rem; }
.doc dd { margin: 0.125rem 0 0; }
.toc { margin-top: 1.5rem; border: 1px solid var(--line); padding: 0.5rem 16px 0.75rem; }
.toc h2 { margin: 0; padding: 0.5rem 0 0; border: 0; font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.toc ol { margin: 0.25rem 0 0; padding-left: 1.5rem; }
.toc li + li { margin-top: 0; }
.toc a { display: block; padding: 0.625rem 0; min-height: 44px; line-height: 1.5rem; }
.email-big { font-family: var(--serif); font-size: calc(1rem + 8px); line-height: 1.3; }
.email-big a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0.3rem; word-break: break-all; }
/* "See also" under a document: standalone links, so 44px rows like the footer's (review fixes). */
.doc .see-also { margin-top: 2.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.doc .see-also h2 { margin: 0; padding: 0; border: 0; font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.links-row, .doc .links-row { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0.25rem 0 0; padding: 0; }
.links-row li { list-style: none; }
.doc .links-row li + li { margin-top: 0; }
.links-row a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font-weight: 500; }
.todo { background: var(--soon-wash); color: var(--soon); border-bottom: 1px dashed var(--soon); padding: 0 0.25rem; font-weight: 600; }

/* ── The footer ─────────────────────────────────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--line); background: var(--wash); padding: 1.5rem 0 calc(2rem + env(safe-area-inset-bottom, 0px)); font-size: 0.875rem; color: var(--muted); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; padding: 0; margin: 0 0 0.75rem; }
.foot-links li { list-style: none; }
.foot-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font-weight: 500; }
.site-foot p { max-width: 52rem; }
.site-foot p + p { margin-top: 0.5rem; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── Print: the terms and the policy can be printed or saved (Electronic Commerce Regulations 2002, reg 9(3)) ── */
@media print {
  :root { --paper: #fff; --ink: #000; --muted: #333; --accent: #000; --line: #999; --wash: #fff; --soon-wash: #fff; }
  body { font-size: 11pt; }
  .skip, .site-nav, .toc, .hero .actions, .cta { display: none !important; }
  .panel { background: #fff; color: #000; border: 1px solid #999; }
  a { color: #000; }
  .doc h2 { break-after: avoid; }
  .site-foot { background: #fff; }
}