/* KeepMeTrue website. Brand v1.2 tokens. Fonts are self-hosted (SIL Open Font License), so no visitor data goes to a font service. */
@font-face { font-family: "Sora"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(sora-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(sora-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(atkinson-next-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(atkinson-next-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --page: #0D2230; --card: #16303F; --surface: #1D3A4B; --line: #2C4A5A;
  --text: #EAF4F6; --text-2: #C9D8DD; --muted: #9FB3BF;
  --accent: #7FE0D6; --accent-ink: #0D2230;
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --page: #F3F8F8; --card: #FFFFFF; --surface: #EAF2F3; --line: #D3E0E3;
    --text: #0D2230; --text-2: #2B4452; --muted: #4F6572;
    --accent: #0E7C76; --accent-ink: #FFFFFF;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--page); }
body {
  margin: 0; background: var(--page); color: var(--text);
  font: 400 17px/1.55 var(--font-body);
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 680px; margin: 0 auto; padding: 0 20px; }

/* Header */
.top { padding: 22px 0; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none;
  font: 500 20px/1 var(--font-display); letter-spacing: 0.02em; }
.brand .me { color: var(--accent); }
.kmt-mark { color: var(--accent); --kmt-dot: var(--text); flex: none; }

/* Home */
.hero { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 48px 0 64px; }
.hero .kmt-mark { width: 88px; height: 88px; margin: 0 auto 14px; }
.hero .word { font: 500 22px/1 var(--font-display); letter-spacing: 0.02em; margin: 0 0 36px; }
.hero .word .me { color: var(--accent); }
.hero h1 { font: 600 clamp(32px, 7vw, 48px)/1.12 var(--font-display); letter-spacing: -0.01em; margin: 0 0 22px; text-wrap: balance; }
.promise { list-style: none; padding: 0; margin: 0 0 32px; font-size: 19px; color: var(--text-2); }
.promise li { margin: 4px 0; }
.soon { margin: 0; color: var(--muted); font-size: 15px; }

/* Home: a soft glow behind the ring and the question, as on the intro film's end card (Pat, 8 Nov 2026).
   Sized to the screen but capped, so on a wide screen it stays behind the words instead of stretching across.
   It fades into the page colour, so the header and footer sit on it with no edge. */
body:has(main.hero) {
  background: radial-gradient(min(110vw, 860px) min(70vh, 620px) at 50% 34%, #15344A 0%, var(--page) 62%) var(--page);
}
@media (prefers-color-scheme: light) {
  body:has(main.hero) {
    background: radial-gradient(min(110vw, 860px) min(70vh, 620px) at 50% 34%, #FFFFFF 0%, var(--page) 62%) var(--page);
  }
}

/* Text pages */
main.doc { flex: 1; padding: 8px 0 56px; }
.doc h1 { font: 600 34px/1.15 var(--font-display); margin: 18px 0 6px; }
.doc .updated { color: var(--muted); font-size: 15px; margin: 0 0 28px; }
.doc h2 { font: 600 21px/1.3 var(--font-display); margin: 36px 0 10px; }
.doc h3 { font: 600 17px/1.35 var(--font-display); margin: 24px 0 6px; }
.doc p, .doc li { color: var(--text-2); }
.doc strong { color: var(--text); }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin: 6px 0; }
.summary { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin: 0 0 8px; }
.summary ul { margin: 0; padding-left: 20px; }
.summary li { color: var(--text); }
table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-2); }
th { color: var(--text); font-weight: 700; }

/* Help */
details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; }
summary { cursor: pointer; padding: 16px 20px; font: 600 17px/1.35 var(--font-display); color: var(--text); list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: right; color: var(--muted); font-weight: 400; }
details[open] summary::after { content: "\2212"; }
details > div { padding: 0 20px 14px; }
details > div p:first-child { margin-top: 0; }
.contact { background: var(--surface); border-radius: 12px; padding: 18px 20px; margin-top: 28px; }
.contact p { margin: 0; color: var(--text); }

/* Footer */
footer { border-top: 1px solid var(--line); padding: 22px 0 28px; font-size: 15px; color: var(--muted); }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 10px; }
footer nav a { color: var(--text-2); text-decoration: none; }
footer nav a:hover { text-decoration: underline; }
footer p { margin: 4px 0; }

/* Mark drawn inline: ring in the accent, dot in the text colour */
.kmt-mark path { fill: none; stroke: var(--accent); stroke-width: 4.5; stroke-linecap: round; }
.kmt-mark circle { fill: var(--text); }

/* ---------- Smooth loading (Pat, 7 Nov 2026) ----------
   Only fade and position change, so it stays smooth on phones. No scripts.
   Reduce Motion shows every page straight away. */

/* Moving between pages: the new page dissolves in over the old one, header and footer stay put
   (browsers that support it). The old page stays fully shown underneath until the new one covers it,
   and the backdrop is the page colour, so there is never a blank or white moment in between. */
@view-transition { navigation: auto; }
.top { view-transition-name: kmt-header; }
::view-transition { background: var(--page); }
::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: kmt-fade .25s ease-out both; mix-blend-mode: normal; }

@keyframes kmt-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes kmt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kmt-settle { from { transform: translateY(8px); } to { transform: none; } }
@keyframes kmt-draw { from { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes kmt-dot { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

/* Home: the ring draws itself, then the words follow one after another (about 1.8 seconds) */
.hero .kmt-mark path { stroke-dasharray: 1 1.01; animation: kmt-draw .9s cubic-bezier(.65,0,.35,1) both; }
.hero .kmt-mark path:nth-of-type(2) { animation-delay: .12s; }
.hero .kmt-mark path:nth-of-type(3) { animation-delay: .24s; }
.hero .kmt-mark circle { transform-box: fill-box; transform-origin: center; animation: kmt-dot .6s cubic-bezier(.2,.8,.2,1) .55s both; }
.hero .word { animation: kmt-up .7s cubic-bezier(.2,.8,.2,1) .7s both; }
.hero h1 { animation: kmt-up .8s cubic-bezier(.2,.8,.2,1) .85s both; }
.promise li { animation: kmt-up .7s cubic-bezier(.2,.8,.2,1) 1s both; }
.promise li:nth-child(2) { animation-delay: 1.1s; }
.promise li:nth-child(3) { animation-delay: 1.2s; }
.hero .soon { animation: kmt-fade .8s ease-out 1.35s both; }
.hero + footer { animation: kmt-fade .8s ease-out 1.4s both; }

/* Help, Privacy, Terms: the words settle into place. No fade from blank, so the page never goes empty. */
main.doc > .wrap { animation: kmt-settle .35s cubic-bezier(.2,.8,.2,1) both; }

/* Help, Privacy, Terms header (Pat, 8 Nov 2026): pinned at the top on a softly frosted bar, so it is always on screen
   and never slides when the page changes; the small ring draws itself each time a page opens. */
.top { position: sticky; top: 0; z-index: 10; padding: 15px 0;
  background: color-mix(in srgb, var(--page) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 75%, transparent); }
.top .kmt-mark path { stroke-dasharray: 1 1.01; animation: kmt-draw .7s cubic-bezier(.65,0,.35,1) both; }
.top .kmt-mark path:nth-of-type(2) { animation-delay: .08s; }
.top .kmt-mark path:nth-of-type(3) { animation-delay: .16s; }
.top .kmt-mark circle { transform-box: fill-box; transform-origin: center; animation: kmt-dot .5s cubic-bezier(.2,.8,.2,1) .4s both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}