/* The public utility pages (download, support, privacy) in the home page's
   language: the same header and footer (landing.css), sentence case, no
   tracked capitals or monospace, rounded cards, and orange only on what you
   press. The header now sits in the flow, so the pages no longer pad their
   tops to clear it. */
.site-page .shell { max-width: 1240px; padding: 0 var(--pad) }
.site-page .eyebrow { margin: 0 0 18px; color: var(--ink-mute); font: 700 15px var(--sans); letter-spacing: 0; text-transform: none }
.site-page h1 { margin: 0 0 24px; font-size: clamp(44px, 6vw, 84px); font-weight: 800; letter-spacing: -.028em; line-height: 1.02; text-transform: none }
.site-page h2 { margin: 0 0 28px; font-size: clamp(32px, 4vw, 56px); font-weight: 800; letter-spacing: -.026em; line-height: 1.06; text-transform: none }
.site-page .standfirst { max-width: 38ch; color: var(--ink-soft); font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; line-height: 1.5 }
.site-page .hero-actions { margin-top: 32px }
.site-page .get-row { display: flex; flex-wrap: wrap; gap: 10px; width: auto; max-width: none }
.site-page .get, .site-page .appstore { min-height: 56px; padding: 0 24px; border-radius: 999px; font-size: 16px; font-weight: 700 }
.site-page .get { background: var(--orange); color: #171514 }
.site-page .appstore { background: var(--charcoal); color: #fff }
.site-page .appstore .lockup strong { font-weight: 700 }
.site-page .spec { color: var(--ink-mute); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; font-family: var(--sans) }
.site-page .reinstall { max-width: 45ch; color: var(--ink-mute); font-size: 14px; line-height: 1.5 }
.download-page .reinstall a, .download-page .steps a { color: var(--charcoal); text-decoration-color: var(--charcoal) }
.site-page .small { color: var(--ink-soft); font-size: 17px }
.site-page .panel { border-radius: var(--r); background: var(--paper-2); color: var(--charcoal) }
.site-page details.fine summary, .site-page .hash { color: var(--ink-mute) }
.site-page .hash { max-width: 100%; overflow-wrap: anywhere }
.site-page .site-footer { margin-top: clamp(96px, 11vw, 160px) }

/* ── download ─────────────────────────────────────────────── */
.download-page .download-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); gap: clamp(40px, 6vw, 96px); align-items: stretch; padding-top: clamp(36px, 4.5vw, 64px) }
.download-page .download-hero > div:first-child { padding: clamp(20px, 4vw, 64px) 0 clamp(32px, 5vw, 72px) }
.download-page .download-hero h1 { max-width: 12ch }
.download-page .phone-wrap { min-height: 720px; align-items: center; overflow: hidden; border-radius: var(--r-lg); background: var(--paper-2) }
.download-page .phone-wrap .phone { transform: rotate(-6deg) translateY(36px); box-shadow: 0 30px 70px #20221b33 }
.download-page .shell > .lang-mk > section, .download-page .shell > .lang-en > section { padding: clamp(96px, 11vw, 160px) 0 0 }
.download-page .features { display: grid; grid-template-columns: 1fr; gap: 10px; overflow: visible; border-radius: 0 }
.download-page .feature { display: grid; grid-template-columns: 64px minmax(200px, .85fr) 1fr; align-items: center; gap: 20px; padding: 28px clamp(22px, 3vw, 40px); border-radius: var(--r); background: var(--paper-2) }
.download-page .feature .n { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; border-radius: 50%; background: var(--charcoal); color: var(--paper); font: 800 17px var(--sans); letter-spacing: 0 }
.download-page .feature h3 { margin: 0; color: var(--charcoal); font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12 }
.download-page .feature p { color: var(--ink-soft); font-size: 16px; font-weight: 500; line-height: 1.5 }
.download-page .shell > .lang-mk > section:nth-of-type(2), .download-page .shell > .lang-en > section:nth-of-type(2) { margin: clamp(96px, 11vw, 160px) calc(50% - 50vw) 0; padding: clamp(80px, 9vw, 130px) max(var(--pad), calc((100vw - 1096px) / 2)); background: var(--dark); color: var(--paper) }
.download-page .shell > .lang-mk > section:nth-of-type(2) h2, .download-page .shell > .lang-en > section:nth-of-type(2) h2 { color: var(--paper) }
.download-page .steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border-radius: 0 }
.download-page ol.steps li { min-height: 150px; padding: 28px 28px 28px 74px; border-radius: var(--r); background: var(--dark-2); color: #e1e0d8; font-size: 17px; line-height: 1.5 }
.download-page ol.steps li::before { top: 28px; left: 26px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--paper); color: var(--charcoal); font: 800 15px var(--sans); letter-spacing: 0 }
.download-page .shell > .lang-mk > section:nth-of-type(2) a, .download-page .shell > .lang-en > section:nth-of-type(2) a { color: var(--paper); text-decoration-color: var(--paper) }
.download-page .shell > .lang-mk > section:nth-of-type(3), .download-page .shell > .lang-en > section:nth-of-type(3) { max-width: 900px }

/* ── support ──────────────────────────────────────────────── */
.support-page .narrow { max-width: none; margin: 0 }
.support-page .narrow > .lang-mk > div:first-child, .support-page .narrow > .lang-en > div:first-child { max-width: 1050px; padding-top: clamp(48px, 6vw, 96px) !important }
.support-page h1 { max-width: 14ch }
.support-page .narrow > .lang-mk > section, .support-page .narrow > .lang-en > section { padding-top: clamp(96px, 11vw, 160px) }
.support-page .qa-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow: visible; border-radius: 0 }
.support-page details.qa { align-self: start; border-radius: var(--r); background: var(--paper-2); color: var(--charcoal) }
.support-page details.qa + details.qa { margin-top: 0 }
.support-page details.qa summary { min-height: 0; padding: 24px 26px; color: var(--charcoal); font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; letter-spacing: -.01em; line-height: 1.3 }
.support-page details.qa summary::after { border-color: var(--charcoal) }
.support-page details.qa .qa-body { padding: 0 26px 26px; color: var(--ink-soft); font-size: 16.5px; font-weight: 500; line-height: 1.55 }
.support-page details.qa .qa-body a { color: var(--charcoal); text-decoration-color: var(--charcoal) }

/* ── privacy ──────────────────────────────────────────────── */
.privacy-page .shell > .lang-mk, .privacy-page .shell > .lang-en { padding-top: clamp(48px, 6vw, 96px) }
.privacy-page .shell > .lang-mk > div:first-child, .privacy-page .shell > .lang-en > div:first-child { max-width: 1100px !important; padding-top: 0 !important }
.privacy-page h1 { max-width: 14ch }
.privacy-page .dateline { margin: 0 0 28px; color: var(--ink-mute); font: 600 14px var(--sans); letter-spacing: 0; text-transform: none }
.privacy-page .shell > .lang-mk > section, .privacy-page .shell > .lang-en > section { padding-top: clamp(72px, 9vw, 130px) }
.privacy-page .doc { grid-template-columns: 220px minmax(0, 1fr); gap: clamp(40px, 6vw, 90px); max-width: 1240px }
.privacy-page .toc { display: block; position: sticky; top: 96px; align-self: start; padding: 26px 22px; border-radius: var(--r); background: var(--paper-2) }
.privacy-page .toc ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none }
.privacy-page .toc a { color: var(--charcoal); font-size: 15px; font-weight: 700; line-height: 1.3; text-decoration: none }
.privacy-page .toc a:hover { text-decoration: underline }
.privacy-page .doc-section { margin-bottom: 10px; padding: 30px clamp(24px, 3vw, 40px); border-radius: var(--r); scroll-margin-top: 96px }
.privacy-page .doc-section:nth-child(odd) { background: var(--paper-2) }
.privacy-page .doc-section h2 { margin: 0 0 20px; font-size: clamp(26px, 2.6vw, 38px) }
.privacy-page .doc-section p, .privacy-page .doc-section li { color: var(--ink-soft); font-size: 17px; font-weight: 500; line-height: 1.6 }
.privacy-page .doc-section a { color: var(--charcoal); text-decoration-color: var(--charcoal) }
.privacy-page .plain li { padding-left: 20px }
.privacy-page .plain li::before { background: var(--charcoal) }
.privacy-page .plain strong { color: var(--charcoal) }
.privacy-page .doc-section .panel { background: var(--paper-3) }

@media (max-width: 900px) {
  .download-page .download-hero { grid-template-columns: 1fr; gap: 0 }
  .download-page .download-hero > div:first-child { padding-bottom: 56px }
  .download-page .phone-wrap { min-height: 580px }
  .privacy-page .doc { grid-template-columns: 1fr; gap: 40px }
  .privacy-page .toc { position: relative; top: auto }
  .privacy-page .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 680px) {
  .site-page h1 { font-size: clamp(40px, 11vw, 56px) }
  .site-page h2 { font-size: clamp(30px, 8.5vw, 44px) }
  .download-page .phone-wrap { min-height: 520px; margin: 0 calc(-1 * var(--pad)); border-radius: 0 }
  .download-page .phone-wrap .phone { transform: rotate(-4deg) translateY(30px) }
  .download-page .feature { grid-template-columns: 44px minmax(0, 1fr); gap: 8px 14px; padding: 24px 20px }
  .download-page .feature .n { grid-column: 1; grid-row: 1 }
  .download-page .feature h3 { grid-column: 2; grid-row: 1; overflow-wrap: anywhere }
  .download-page .feature > p:not(.n) { grid-column: 2; grid-row: 2; font-size: 15px }
  .download-page .steps { grid-template-columns: 1fr }
  .download-page ol.steps li { min-height: 0; font-size: 16px }
  .support-page .qa-group { grid-template-columns: 1fr }
  .privacy-page .toc { padding: 22px 20px }
  .privacy-page .doc-section { padding: 24px 20px }
}
@media (prefers-reduced-motion: no-preference) {
  .download-page .phone-wrap .phone { animation: phone-float 7s ease-in-out infinite alternate }
  .site-page .get, .site-page .appstore { transition: transform 260ms cubic-bezier(.16,1,.3,1), background-color 200ms ease }
  .site-page .get:hover, .site-page .appstore:hover { transform: translateY(-2px) }
}
@keyframes phone-float { from { transform: rotate(-6deg) translateY(36px) } to { transform: rotate(-3deg) translateY(16px) } }
.site-page details.fine summary { color: var(--ink-mute); font: 600 14px var(--sans) }
.site-page details.fine summary::before { color: var(--charcoal) }