/* Support and privacy pages (v8, 2026-10-01): the revamp's midnight + Geist look around the same content.
   Styles the class names the pages already use (content-card, faq-item, app-support-*, contact-box), so the
   copy itself is unchanged from v7. */

:root {
  color-scheme: dark;
  --bg: #070B14;
  --surface: #0E1624;
  --surface-2: #152036;
  --text: #FFFFFF;
  --text-2: #B9C6DA;         /* 10.8:1 on --bg */
  --text-3: #8496B2;         /* 6.4:1 */
  --accent: #7CC4FF;
  --accent-hi: #A8D8FF;
  --accent-ink: #04101E;
  --line: rgb(159 176 200 / .14);
  --line-2: rgb(159 176 200 / .26);
  --nav-bg: rgb(14 22 36 / .86);
  --display: "Geist", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --body: "Geist", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", "SF Mono", Menlo, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text-2); font: 400 1.0625rem/1.7 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--accent-hi); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: 8px; }
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }

/* nav, as on the home page */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
.nav-in { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 8px 8px 8px 12px; border-radius: 99px; background: var(--nav-bg); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 0 0 1px var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; color: var(--text); text-decoration: none; white-space: nowrap; }
.brand img { width: 30px; height: 30px; }
.nav .links { display: flex; gap: 22px; margin-left: auto; font-size: .92rem; }
.nav .links a { color: var(--text-2); text-decoration: none; }
.nav .links a:hover, .nav .links a[aria-current] { color: var(--text); }
.nav .mail { font: 600 .88rem/1 var(--body); color: var(--accent-ink); background: var(--accent-hi); padding: 11px 16px; border-radius: 99px; text-decoration: none; white-space: nowrap; }
@media (max-width: 640px) { .nav .links { display: none; } .nav .mail { margin-left: auto; } }

/* header */
.page-head { padding-block: clamp(40px, 6vw, 76px) clamp(28px, 4vw, 44px); }
.page-head .eyebrow { font: 500 .75rem/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.page-head h1 { font: 700 clamp(2.8rem, 7vw, 5.4rem)/.95 var(--display); letter-spacing: -.05em; color: var(--text); margin: 0; }
.page-head p { font-size: clamp(1.08rem, 1.6vw, 1.25rem); margin: 18px 0 0; max-width: 56ch; }
.subpage-updated { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }

/* the reading column */
.subpage-content { padding-bottom: clamp(60px, 9vw, 110px); }
.content-card { max-width: 780px; }
.content-card h2 { font: 650 clamp(1.6rem, 3vw, 2.2rem)/1.1 var(--display); letter-spacing: -.03em; color: var(--text); margin: 0 0 14px; scroll-margin-top: 100px; }
.content-card h3 { font: 600 1.15rem/1.35 var(--display); color: var(--text); margin: 0 0 6px; letter-spacing: -.01em; scroll-margin-top: 100px; }
.content-card section { margin-bottom: 40px; }
.content-card section > h2 + p { margin-top: -6px; }
.content-card p { margin: 0 0 14px; }
.content-card ul, .content-card ol { padding-left: 22px; margin: 6px 0 14px; }
.content-card li { margin: 4px 0; }
.content-card strong { color: var(--text); font-weight: 600; }
.content-card hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0 40px; }
.content-card code { font: 500 .9em var(--mono); background: var(--surface-2); padding: 2px 6px; border-radius: 6px; color: var(--text); }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:first-of-type { border-top: 0; }
.faq-item > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font: 600 1.08rem/1.35 var(--display); color: var(--text); letter-spacing: -.01em; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2);
  background: linear-gradient(var(--text-2), var(--text-2)) center / 9px 1.5px no-repeat, linear-gradient(var(--text-2), var(--text-2)) center / 1.5px 9px no-repeat; transition: transform .25s var(--ease); }
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-item > summary:hover { color: var(--accent-hi); }
.faq-item .ans { padding: 0 38px 18px 0; }
.faq-item .ans p:last-child, .faq-item .ans ol:last-child, .faq-item .ans ul:last-child { margin-bottom: 0; }

/* apps not on the App Store yet: dimmed, with the status in a plain outline pill. Still open and readable,
   because App Review reads this page for an app in review. */
[data-status="review"] .app-support-icon, [data-status="development"] .app-support-icon { filter: grayscale(.85); opacity: .55; }
.app-support-block:not([data-status="live"]) .app-support-name { color: var(--text-2); }
.app-support-block:not([data-status="live"]) .app-support-badge { background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-3); }

/* contact box */
.contact-box { padding: 26px 28px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px rgb(124 196 255 / .35); margin-bottom: 44px; }
.contact-box-label { font: 500 .75rem/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px !important; }
.contact-email { display: inline-block; font: 650 clamp(1.15rem, 2.6vw, 1.6rem)/1.2 var(--display); letter-spacing: -.02em; color: var(--text); text-decoration: none; margin: 4px 0 10px; overflow-wrap: anywhere; user-select: all; }
.contact-email:hover { color: var(--accent-hi); }
.contact-note { font-size: .92rem; color: var(--text-3); margin: 0 !important; }

/* one expandable block per app */
.app-support-block { border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); margin: 12px 0; overflow: hidden; scroll-margin-top: 100px; }
.app-support-block[open] { box-shadow: inset 0 0 0 1px var(--line-2); }
.app-support-header { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; }
.app-support-header::-webkit-details-marker { display: none; }
.app-support-name { display: flex; align-items: center; gap: 12px; font: 600 1.1rem/1.2 var(--display); color: var(--text); flex-wrap: wrap; }
.app-support-icon { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 1.3rem; background: var(--surface-2); overflow: hidden; }
.app-support-icon img { width: 100%; height: 100%; display: block; }
.app-support-badge { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 5px 8px; border-radius: 99px; background: rgb(124 196 255 / .12); color: var(--accent-hi); }
.app-support-chevron { width: 10px; height: 10px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); transition: transform .25s var(--ease); margin-right: 6px; flex: none; }
.app-support-block[open] .app-support-chevron { transform: rotate(225deg); }
.app-support-content { padding: 0 20px 18px; border-top: 1px solid var(--line); }

.content-footer-links { display: flex; gap: 20px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); font-weight: 600; }
.content-footer-links a { text-decoration: none; }

/* footer, as on the home page */
.foot { border-top: 1px solid var(--line); padding-block: 30px 40px; display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; font-size: .875rem; color: var(--text-3); }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot a { color: var(--text-2); text-decoration: none; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }