/* ========================================================================
   Pharma Digital Maturity: product website stylesheet
   One stylesheet for every page, no external requests (Inter is self-hosted). Plain CSS
   with variables: no build step, so what you read here is what is served. The same
   design system is used by the standalone Privacy Policy site.
   ======================================================================== */

/* Contents
    1. Fonts
    2. Design tokens
    3. Base: reset, typography and helpers
    4. Shared components
    5. Header and navigation
    6. Heroes (Home and inner pages)
    7. Page sections
    8. Home page
    9. Methodology page
   10. Get the app page
   11. Support page
   12. Privacy policy page
   13. Footer and back-to-top button
   14. Motion (growth animations)
   15. Responsive
   16. Touch screens
   17. Reduced motion
   18. Print

   How the file is organised: rules are grouped by component or page. Rules that only apply in a
   certain context (hover, dark mode) sit right after the rule they modify. Everything that changes
   with the screen size lives in the Responsive section, from the widest breakpoint to the narrowest.

   Class states added by site.js: .in (revealed), .show (back-to-top), .open (drop-down panel),
   .play (privacy hero animation), .ok / .neutral / .is-soon (store buttons). */


/* ========================================================================
   Fonts
   ======================================================================== */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/Inter-Regular.woff2) format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/Inter-Medium.woff2) format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/Inter-SemiBold.woff2) format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/Inter-Bold.woff2) format("woff2");
}

/* ========================================================================
   Design tokens
   All colours, radii and sizes are variables. Light is the default; dark applies when
   the device prefers it (unless the visitor picked Light) or when the visitor picked
   Dark. The two dark blocks must stay identical: CSS cannot share one list between a
   media query and an attribute selector.
   ======================================================================== */

:root {
  color-scheme: light;
  --bg: #f5f8fb;
  --bg-2: #eaf1f7;
  --surface: #ffffff;
  --surface-2: #f0f5fa;
  --text: #0d1a2a;
  --muted: #46556a;
  --quiet: #5b6a7f;
  --line: #d6dee8;
  --line-soft: #e4eaf1;
  --accent: #006492;
  --accent-ink: #004a6d;
  --accent-soft: #e3f1f9;
  --accent-glow: rgba(0,100,146,.22);
  --good: #0b7a5a;
  --good-soft: #dff3ec;
  --warn-soft: #fff2d6;
  --warn-ink: #7a4a00;
  --logo-ink: #041627;
  --shadow: 0 1px 2px rgba(13,26,42,.06),0 8px 24px rgba(13,26,42,.06);
  --shadow-lg: 0 2px 6px rgba(13,26,42,.08),0 24px 56px rgba(13,26,42,.12);
  --header-bg: rgba(245,248,251,.8);
  --blob-a: #58bcfd;
  --blob-b: #5ee0b7;
  --blob-opacity: .32;
  --org: #2563eb;
  --proc: #0d7465;
  --tech: #6b46d9;
  --on-accent: #ffffff;
  --danger: #ba1a1a;
  --radius: 10px;
  --radius-lg: 18px;
  --wrap: 1180px;
  --gutter: clamp(18px,4vw,40px);
  --header-h: 68px;
  --bar-h: 52px;
  --ease: cubic-bezier(.2,.75,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #08111c;
    --bg-2: #0b1726;
    --surface: #0f1c2e;
    --surface-2: #132339;
    --text: #e8eef6;
    --muted: #a9b7ca;
    --quiet: #93a3b8;
    --line: #233853;
    --line-soft: #1a2c44;
    --accent: #5cc0f5;
    --accent-ink: #8fd4fa;
    --accent-soft: #102b42;
    --accent-glow: rgba(92,192,245,.28);
    --good: #4fd1a5;
    --good-soft: #0f2e29;
    --warn-soft: #3a2d10;
    --warn-ink: #f3c97a;
    --logo-ink: #e8eef6;
    --shadow: 0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.5),0 24px 56px rgba(0,0,0,.45);
    --header-bg: rgba(8,17,28,.78);
    --blob-a: #1d6fa5;
    --blob-b: #0f8f77;
    --blob-opacity: .34;
    --org: #7ba7ff;
    --proc: #4fd1a5;
    --tech: #a98bff;
    --on-accent: #04202f;
    --danger: #ff8a80;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #08111c;
  --bg-2: #0b1726;
  --surface: #0f1c2e;
  --surface-2: #132339;
  --text: #e8eef6;
  --muted: #a9b7ca;
  --quiet: #93a3b8;
  --line: #233853;
  --line-soft: #1a2c44;
  --accent: #5cc0f5;
  --accent-ink: #8fd4fa;
  --accent-soft: #102b42;
  --accent-glow: rgba(92,192,245,.28);
  --good: #4fd1a5;
  --good-soft: #0f2e29;
  --warn-soft: #3a2d10;
  --warn-ink: #f3c97a;
  --logo-ink: #e8eef6;
  --shadow: 0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.5),0 24px 56px rgba(0,0,0,.45);
  --header-bg: rgba(8,17,28,.78);
  --blob-a: #1d6fa5;
  --blob-b: #0f8f77;
  --blob-opacity: .34;
  --org: #7ba7ff;
  --proc: #4fd1a5;
  --tech: #a98bff;
  --on-accent: #04202f;
  --danger: #ff8a80;
}

/* ========================================================================
   Base: reset, typography and helpers
   Element defaults, the page wrapper, the screen-reader-only helper and the skip link.
   ======================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  font-feature-settings: "cv11","ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .35s var(--ease),color .35s var(--ease);
}

h1, h2, h3 {
  margin: 0;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 700;
}

h1 {
  font-size: clamp(2.3rem,5.4vw,3.9rem);
  letter-spacing: -.035em;
}

h2 {
  font-size: clamp(1.45rem,2.4vw,1.85rem);
}

h3 {
  font-size: 1.1rem;
  letter-spacing: -.015em;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent);
}

img, svg {
  display: block;
  max-width: 100%;
}

strong {
  font-weight: 600;
  color: var(--text);
}

em {
  font-style: italic;
}

ul {
  margin: 0 0 1rem;
  padding-left: 1.25em;
}

li {
  margin-bottom: .45rem;
}

::selection {
  background: var(--accent-soft);
  color: var(--text);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Centred page column. Side padding grows with the screen and respects phone notches. */
.wrap {
  width: min(var(--wrap),100% - 2*max(var(--gutter),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)));
  margin-inline: auto;
}

/* Visually hidden, still read aloud by screen readers. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* "Skip to content" link: off-screen until it receives keyboard focus. */
.skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 200;
  background: var(--text);
  color: var(--bg);
  padding: 12px 16px;
  border-radius: var(--radius);
  text-decoration: none;
}

.skip:focus {
  top: 12px;
  color: var(--bg);
}

/* Line icons come from the SVG sprite at the top of every page (<use href="#i-...">). */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Small print. */
.fine {
  font-size: .88rem;
  color: var(--quiet);
  line-height: 1.6;
}

.logo-ink {
  fill: var(--logo-ink);
}

.num {
  font-variant-numeric: tabular-nums;
}

code {
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size: .86em;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  padding: .1em .4em;
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.center {
  text-align: center;
  margin-inline: auto;
}

.fine.center {
  text-align: center;
}

/* Justified body text. Paragraphs and list items in the page content are justified, with automatic
   hyphenation (lang="en" is set on every page) so the gaps between words stay even, also in narrow
   columns. Hero and call-to-action text, tags, lists of facts and centred text keep their own alignment
   (text-align: inherit); table cells, buttons, headings and the footer are never justified. */
main :is(p, li) {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

main :is(.hero, .hero-copy, .page-hero, .closing, .facts, .chips, .req-list, .tag, .eyebrow, .glance-note) :is(p, li),
main :is(p, li):is(.eyebrow, .glance-note) {
  text-align: inherit;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* ========================================================================
   Shared components
   Small pieces reused on every page: lead text, captions, eyebrow and kicker labels,
   tags, text links and buttons.
   ======================================================================== */

/* Small uppercase label above a heading; the rule before it draws in once. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--accent-ink);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: left;
  animation: grow-x .9s var(--ease-out) .1s both;
}

.pt .tag {
  display: inline-block;
  margin: 0 6px 4px 0;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Pill button. Modifiers: .large, .block (full width). The closing banner restyles it (see Home page). */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--accent);
  text-decoration: none;
  transition: transform .25s var(--ease),translate .25s var(--ease),scale .25s var(--ease),box-shadow .25s;
  justify-content: center;
  border: 1px solid var(--accent);
  font: inherit;
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  color: var(--on-accent);
  cursor: pointer;
}

@media (hover:hover) {
  .btn:hover {
    color: var(--surface);
    translate: 0 -2px;
    scale: 1.03;
    box-shadow: 0 10px 26px var(--accent-glow);
  }
}

.lead {
  font-size: clamp(1.05rem,1.5vw,1.2rem);
  line-height: 1.7;
  color: var(--muted);
  max-width: 60ch;
}

.caption {
  margin: 14px 0 0;
  font-size: .88rem;
  color: var(--quiet);
  max-width: 84ch;
}

.caption.center {
  margin-inline: auto;
}

/* Small uppercase label inside cards. */
.kicker {
  display: inline-block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* Pill label. Variants: .ok (green), .neutral (grey). */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.4;
}

.tag.ok {
  background: var(--good-soft);
  color: var(--good);
}

.tag.neutral {
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--line-soft);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent-ink);
}

@media (hover:hover) {
  .text-link:hover {
    text-decoration: underline;
    color: var(--accent);
  }
}

a.text-link.inline {
  display: inline;
}

.btn.large {
  padding: 15px 28px;
  font-size: 1.02rem;
}

.btn.block {
  display: flex;
  width: 100%;
}

/* Outline button for secondary actions, such as "Copy email address" under a main button. */
.btn.quiet {
  background: transparent;
  border-color: var(--line);
  color: var(--accent-ink);
}

.copy-email {
  margin-top: 10px;
}

/* A button with the hidden attribute stays hidden even though .btn sets a display. */
.btn[hidden] {
  display: none;
}

@media (hover:hover) {
  .btn.quiet:hover {
    color: var(--accent-ink);
    border-color: var(--accent);
    background: var(--accent-soft);
    translate: none;
    scale: 1;
    box-shadow: none;
  }
}

.btn .icon {
  width: 18px;
  height: 18px;
}

/* ========================================================================
   Header and navigation
   Sticky header with the reading-progress bar, brand, main menu, colour-theme switch and
   (privacy page) contents and print buttons. Below 1100px the menu becomes a drop-down.
   ======================================================================== */

/* Sticky bar; the blurred background keeps text readable while scrolling. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: background-color .35s var(--ease),border-color .35s var(--ease);
}

/* Reading-progress bar. site.js sets --p from 0 to 1 while scrolling. */
.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: transparent;
  pointer-events: none;
}

.progress i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--p,0));
  background: linear-gradient(90deg,var(--accent),var(--blob-b));
}

.nav-shell {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
  line-height: 1.15;
}

@media (hover:hover) {
  .brand:hover {
    color: var(--text);
  }
}

.brand .logo {
  width: 38px;
  height: 38px;
  flex: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-text strong {
  font-size: 1rem;
  letter-spacing: -.015em;
}

.brand-text span {
  font-size: .78rem;
  color: var(--quiet);
  font-weight: 500;
}

.nav-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* System / Light / Dark switch (buttons carry data-theme-choice; see site.js). */
.theme-switch {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.theme-switch button {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--quiet);
  cursor: pointer;
  transition: color .2s,background-color .25s,transform .25s var(--ease),translate .25s var(--ease),scale .25s var(--ease);
}

@media (hover:hover) {
  .theme-switch button:hover {
    color: var(--text);
  }
}

.theme-switch button[aria-checked="true"] {
  background: var(--surface);
  color: var(--accent-ink);
  box-shadow: var(--shadow);
  transform: scale(1.04);
}

.theme-switch .icon {
  width: 17px;
  height: 17px;
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .2s,background-color .2s,transform .2s var(--ease),translate .2s var(--ease),scale .2s var(--ease);
}

@media (hover:hover) {
  .tool-btn:hover {
    border-color: var(--accent);
    color: var(--text);
    translate: 0 -1px;
  }
}

.tool-btn .icon {
  width: 16px;
  height: 16px;
}

/* Main menu: a row on wide screens, a drop-down panel below 1100px (see Responsive). */
.main-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.main-nav a {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--muted);
  font-size: .94rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s,color .2s,transform .25s var(--ease),translate .25s var(--ease),scale .25s var(--ease);
}

@media (hover:hover) {
  .main-nav a:hover {
    background: var(--surface-2);
    color: var(--text);
  }
}

.main-nav a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}

.main-nav a.nav-cta {
  margin-left: 6px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

@media (hover:hover) {
  .main-nav a.nav-cta:hover {
    background: var(--accent);
    color: var(--on-accent);
    translate: 0 -1px;
    box-shadow: 0 8px 20px var(--accent-glow);
  }
}

.main-nav a.nav-cta[aria-current="page"] {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.nav-toggle {
  display: none;
}

/* This site has no menu, so the Print button and theme switch sit at the right end of the header. */
.nav-shell .nav-tools {
  margin-left: auto;
}

/* ========================================================================
   Heroes (Home and inner pages)
   The big Home headline with the dashboard screenshot below it, and the shorter hero
   used by every inner page, including its row of in-page links.
   ======================================================================== */

/* Hero band shared by the Home page and the Privacy policy page. */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(48px,8vw,104px) clamp(40px,6vw,72px);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg,var(--bg-2),var(--bg) 85%);
}

/* Blurred colour blobs behind heroes. Purely decorative. */
.blob {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: var(--blob-opacity);
  pointer-events: none;
}

.blob.a {
  width: 480px;
  height: 480px;
  left: -140px;
  top: -160px;
  background: var(--blob-a);
  animation: drift-a 18s ease-in-out infinite alternate;
}

.blob.b {
  width: 420px;
  height: 420px;
  right: -100px;
  bottom: -180px;
  background: var(--blob-b);
  animation: drift-b 22s ease-in-out infinite alternate;
}

/* Home hero: centred, with a very large headline. */
.hero-copy {
  display: block;
  text-align: center;
}

.hero-copy h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(2.7rem,7.4vw,5.6rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.hero-copy h1 em {
  display: block;
}

.hero-copy .eyebrow {
  margin-bottom: 22px;
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg,var(--accent),var(--blob-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Dashboard screenshot under the Home headline. */
.product-view {
  max-width: 1100px;
  margin: clamp(34px,5vw,56px) auto 0;
}

/* Hero of the inner pages (Methodology, Get the app, Support). */
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(44px,7vw,88px) clamp(32px,5vw,56px);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg,var(--bg-2),var(--bg) 90%);
}

.page-hero h1 {
  max-width: 20ch;
  margin-bottom: 18px;
}

.page-hero .lead {
  max-width: 64ch;
  margin: 0;
}

/* Row of in-page links under a page hero. */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.subnav a {
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: border-color .2s,color .2s,transform .25s var(--ease),translate .25s var(--ease),scale .25s var(--ease);
}

@media (hover:hover) {
  .subnav a:hover {
    border-color: var(--accent);
    color: var(--accent-ink);
    translate: 0 -2px;
  }
}

/* "Page not found" (404.html): a large gradient number, one main button and the row of page links. */
.notfound-code {
  margin: 0 0 6px;
  font-size: clamp(4.5rem,16vw,8.5rem);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: 1;
  background: linear-gradient(100deg,var(--accent),var(--blob-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.notfound-actions {
  margin-top: 28px;
}

.page-hero+.wrap {
  margin-top: clamp(28px,4vw,44px);
}

/* ========================================================================
   Page sections
   Alternating content bands and their headings.
   ======================================================================== */

/* Content band. Add .tint for the alternating background. */
.section {
  padding-block: clamp(56px,8vw,104px);
}

.section.tint {
  background: var(--bg-2);
  border-block: 1px solid var(--line-soft);
}

/* Eyebrow, heading and intro of a section; the heading gets an accent underline. */
.section-head {
  max-width: 66ch;
  margin-bottom: clamp(28px,4vw,48px);
}

.section-head h2 {
  position: relative;
  margin-bottom: 18px;
  padding-bottom: 12px;
  font-size: clamp(1.65rem,3vw,2.3rem);
}

.section-head h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 56px;
  border-radius: 3px;
  background: linear-gradient(90deg,var(--accent),var(--blob-b));
  transform-origin: left;
}

.section-head p:not(.eyebrow) {
  color: var(--muted);
}

/* ========================================================================
   Home page
   Facts strip, three-step cards, the six-step feature tour, screenshots, capability
   cards and the closing call to action.
   ======================================================================== */

/* Home: strip of six headline numbers. The values are synced from the app data (tools/sync_framework.py). */
.facts {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 14px;
  margin-top: clamp(40px,6vw,64px);
}

.facts>div {
  padding: 20px 18px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform .35s var(--ease),translate .35s var(--ease),scale .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}

@media (hover:hover) {
  .facts>div:hover {
    translate: 0 -4px;
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
  }
}

.facts strong {
  display: block;
  font-size: clamp(1.8rem,2.8vw,2.5rem);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg,var(--accent),var(--blob-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.facts span {
  display: block;
  margin-top: 10px;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--muted);
}

/* Three cards in a row (Know where you are...). */
.steps-3 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(16px,2.4vw,28px);
}

.steps-3 article {
  position: relative;
  overflow: hidden;
  padding: 26px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform .35s var(--ease),translate .35s var(--ease),scale .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}

.steps-3 article::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg,var(--accent),var(--blob-b));
}

@media (hover:hover) {
  .steps-3 article:hover {
    translate: 0 -4px;
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
  }
}

.steps-3 h3 {
  margin: 10px 0 8px;
  font-size: 1.2rem;
}

.steps-3 p {
  margin: 0;
  color: var(--muted);
  font-size: .97rem;
}

/* Screenshot figure. Images are WebP with rounded transparent corners; the shadow is drawn by CSS. */
.win {
  margin: 0;
}

.win img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 38px rgba(4,22,39,.22)) drop-shadow(0 2px 6px rgba(4,22,39,.14));
}

.win .caption {
  margin-top: 18px;
}

.win.hero-win img {
  filter: drop-shadow(0 28px 60px rgba(4,22,39,.28)) drop-shadow(0 3px 8px rgba(4,22,39,.16));
}

:root[data-theme="dark"] .win img {
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.6)) drop-shadow(0 0 0 1px rgba(92,192,245,.18));
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .win img {
    filter: drop-shadow(0 18px 40px rgba(0,0,0,.6)) drop-shadow(0 0 0 1px rgba(92,192,245,.18));
  }
}

.features {
  display: grid;
  gap: clamp(56px,8vw,104px);
}

/* Home: one step of the assessment cycle. Text on one side, screenshot on the other; .flip swaps the sides. */
.feature {
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  gap: clamp(28px,5vw,72px);
  align-items: center;
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.feature.flip {
  grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr);
}

.feature.flip .feature-text {
  order: 2;
}

.feature-text>.kicker {
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
}

.feature-text h3 {
  font-size: clamp(1.4rem,2.3vw,1.85rem);
  letter-spacing: -.02em;
  margin: 10px 0 14px;
}

.feature-text p {
  color: var(--muted);
  margin-bottom: 12px;
}

.feature-shot {
  min-width: 0;
}

.feature-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.feature-list li {
  position: relative;
  margin: 0;
  padding-left: 28px;
  color: var(--muted);
  font-size: .97rem;
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--good-soft);
}

.feature-list li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: .62em;
  width: 8px;
  height: 4.5px;
  border-left: 2px solid var(--good);
  border-bottom: 2px solid var(--good);
  transform: rotate(-45deg);
}

.feature-list li strong {
  color: var(--text);
}

/* Two-column pair of screenshots with text (Reports and History). */
.tour-row {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(20px,3vw,36px);
  align-items: start;
}

.tour-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tour-text {
  max-width: 66ch;
}

.tour-text h3 {
  margin: 8px 0 8px;
}

.tour-text p {
  color: var(--muted);
  font-size: .98rem;
}

/* Grid of small capability cards. Modifier .two gives two columns. */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}

.cap-grid>div {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform .35s var(--ease),translate .35s var(--ease),scale .35s var(--ease),border-color .35s var(--ease);
}

@media (hover:hover) {
  .cap-grid>div:hover {
    translate: 0 -4px;
    border-color: var(--accent);
  }
}

.cap-grid h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.cap-grid p {
  margin: 0;
  font-size: .95rem;
  color: var(--muted);
}

.cap-grid.two {
  grid-template-columns: repeat(2,minmax(0,1fr));
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: clamp(28px,5vw,72px);
}

.closing-wrap {
  padding-block: clamp(40px,6vw,80px);
}

/* Closing banner (dark gradient) with the main call to action. */
.closing {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(28px,4vw,52px);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg,#0a3556,#0b6a8f);
  color: #d4e8f5;
  box-shadow: var(--shadow-lg);
}

.closing::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -80px;
  top: -120px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: #5ee0b7;
  opacity: .22;
  filter: blur(60px);
  animation: drift-b 20s ease-in-out infinite alternate;
}

.closing h2 {
  color: #fff;
  font-size: clamp(1.5rem,2.6vw,2rem);
  margin-bottom: 8px;
}

.closing p {
  max-width: 52ch;
  margin: 0;
  color: #d4e8f5;
}

.closing .btn {
  flex: none;
  background: #fff;
  color: #0a3556;
  border-color: #fff;
}

@media (hover:hover) {
  .closing .btn:hover {
    background: #e3f4ff;
    color: #0a3556;
    box-shadow: 0 10px 26px rgba(0,0,0,.28);
  }
}

/* ========================================================================
   Methodology page
   Dimension cards, the scoring roll-up, gap categories, the six-phase list, numbered
   step lists and the highlighted note.
   ======================================================================== */

.dim-cards {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
}

/* Methodology: one card per dimension. The colour comes from --dim (org, proc, tech modifiers). */
.dim-card {
  --dim: var(--accent);
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--dim);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform .35s var(--ease),translate .35s var(--ease),scale .35s var(--ease),box-shadow .35s var(--ease);
}

.dim-card.org {
  --dim: var(--org);
}

.dim-card.proc {
  --dim: var(--proc);
}

.dim-card.tech {
  --dim: var(--tech);
}

@media (hover:hover) {
  .dim-card:hover {
    translate: 0 -5px;
    box-shadow: var(--shadow-lg);
  }
}

.dim-card .kicker {
  color: var(--dim);
}

.dim-card h3 {
  margin: 8px 0 10px;
  font-size: 1.32rem;
}

.dim-card>p {
  font-size: .95rem;
  color: var(--muted);
}

.dim-card .dim-count {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: .95rem;
  color: var(--muted);
}

.dim-card .dim-count strong {
  color: var(--dim);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.dim-card>p:not(.dim-count) {
  margin-bottom: 20px;
}

.dim-card ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 20px;
  border-top: 1px solid var(--line-soft);
}

.dim-card li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: .93rem;
  line-height: 1.4;
  color: var(--text);
}

.dim-card li span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dim-card li span:last-child:not(:first-child) {
  flex: none;
  color: var(--quiet);
  font-variant-numeric: tabular-nums;
}

.dim-card .text-link {
  margin-top: auto;
  font-size: .95rem;
}

/* Methodology: item > subdimension > dimension > overall. */
.rollup {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
}

.rollup>div {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.rollup h3 {
  font-size: 1.05rem;
  margin: 6px 0;
}

.rollup p {
  margin: 0;
  font-size: .93rem;
  color: var(--muted);
}

/* Methodology: the four gap categories. */
.gap-list {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
  margin-top: 22px;
}

.gap-list>div {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.gap-list strong {
  display: block;
  margin-bottom: 4px;
}

.gap-list span {
  font-size: .9rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.gap-list .g-ok {
  border-left: 4px solid var(--good);
}

.gap-list .g-minor {
  border-left: 4px solid var(--org);
}

.gap-list .g-mod {
  border-left: 4px solid #d99a1c;
}

.gap-list .g-crit {
  border-left: 4px solid var(--danger);
}

/* Numbered cards with an explicit .step-no badge. */
.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.step-list li {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  gap: 18px;
  margin: 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.step-no {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}

.step-list h3 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.step-list p {
  margin: 0;
  font-size: .96rem;
  color: var(--muted);
}

/* Highlighted note under a section. */
.note {
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  font-size: .93rem;
  color: var(--text);
}

/* Numbered list with the number drawn by a CSS counter. */
.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: f;
}

.flow li {
  counter-increment: f;
  position: relative;
  margin: 0 0 12px;
  padding: 18px 20px 18px 64px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.flow li::before {
  content: counter(f);
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: .85rem;
}

.flow strong {
  display: block;
  font-size: 1.02rem;
}

.flow span {
  font-size: .92rem;
  color: var(--muted);
}

/* Description line under each phase title */
.flow li p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .96rem;
}

/* First section heading under the page hero */
.section-head.spaced-top {
  margin-top: clamp(20px,3vw,36px);
}

/* Sub-heading and its paragraph inside a section (Targets and gaps) */
.subhead {
  margin-top: 44px;
}

.subhead-text {
  max-width: 70ch;
  margin-top: 8px;
  color: var(--muted);
}

/* References list (Methodology, last section). The first entries show in full; the next three are blurred
   progressively (.ref-peek, set by site.js) and the rest are hidden until "Show all references" is pressed. */
.ref-list {
  max-width: 92ch;
  margin: 0;
  padding: 0 0 0 2.4em;
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.6;
}

.ref-list li {
  margin: 0 0 14px;
  padding-left: 6px;
  overflow-wrap: anywhere;
}

.ref-list li::marker {
  color: var(--quiet);
  font-weight: 600;
}

.ref-list a {
  color: var(--accent-ink);
}

.refs.is-collapsed .ref-peek {
  filter: blur(2px);
  opacity: .62;
  user-select: none;
}

.refs.is-collapsed .ref-peek~.ref-peek {
  filter: blur(4px);
  opacity: .4;
}

.refs.is-collapsed .ref-peek~.ref-peek~.ref-peek {
  filter: blur(6px);
  opacity: .22;
}

.refs-actions {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* ========================================================================
   Get the app page
   Edition cards (Mac and Windows), the requirements list and the FAQ accordion.
   ======================================================================== */

/* Get the app: the Mac and Windows edition cards. */
.store-cards {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 22px;
}

.store-card {
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  scroll-margin-top: calc(var(--header-h) + 24px);
  transition: transform .35s var(--ease),translate .35s var(--ease),scale .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}

@media (hover:hover) {
  .store-card:hover {
    translate: 0 -4px;
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
  }
}

.store-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.store-card h2 {
  font-size: 1.7rem;
}

.store-card>p {
  color: var(--muted);
  font-size: .97rem;
}

.store-card .req-list {
  margin-bottom: 24px;
}

.store-card .btn {
  margin-top: auto;
}

/* Dormant: used only when a store button is switched to "coming soon" in site-config.js. The current page uses mailto buttons instead. */
.store-cta.is-soon {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--muted);
  cursor: default;
  box-shadow: none;
  pointer-events: none;
}

.dl-meta {
  margin: 12px 0 0;
  font-size: .85rem;
  color: var(--quiet);
  text-align: center;
}

/* Requirements as label / value rows. */
.req-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  font-size: .96rem;
}

.req-list li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}

.req-list span:first-child {
  color: var(--quiet);
}

.req-list span:last-child {
  text-align: right;
  font-weight: 500;
  color: var(--text);
}

/* Note under the edition cards */
.edition-note {
  margin-top: 20px;
}

/* Sentence under the "Getting started" heading */
.steps-intro {
  margin-top: 14px;
  color: var(--muted);
}

/* FAQ accordion built on <details>; the + turns into a cross when open. */
.faq {
  max-width: 860px;
}

.faq details {
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color .25s;
}

.faq details[open] {
  border-color: var(--accent);
}

.faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
  transition: transform .3s var(--ease),translate .3s var(--ease),scale .3s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details p {
  margin: 0;
  padding: 0 20px 20px;
  color: var(--muted);
  max-width: 70ch;
}

.faq details>p+.faq-steps, .faq details>.faq-steps+p, .faq details>.faq-steps+.faq-os {
  margin-top: 0;
}

/* Sub-label that splits one answer into parts, such as "On a Mac" and "On Windows". */
.faq details>p.faq-os {
  padding-bottom: 6px;
  font-weight: 600;
  color: var(--text);
}

/* Numbered instructions inside an answer. */
.faq .faq-steps {
  margin: 0;
  padding: 0 20px 14px 44px;
  color: var(--muted);
  max-width: 70ch;
}

.faq .faq-steps li {
  margin: 0 0 8px;
  padding-left: 4px;
}

.faq .faq-steps li::marker {
  color: var(--accent);
  font-weight: 700;
}

/* ========================================================================
   Support page
   Plain reading column used by the Support page.
   ======================================================================== */

.prose-wrap {
  padding-block: clamp(40px,6vw,64px) clamp(56px,8vw,96px);
}

/* Support page reading column. */
.prose {
  max-width: 72ch;
}

.prose h2 {
  font-size: 1.5rem;
  margin: 40px 0 12px;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  font-size: 1.08rem;
  margin: 24px 0 6px;
}

.prose p {
  color: var(--muted);
}

.prose strong {
  color: var(--text);
}

/* ========================================================================
   Privacy policy page
   Hero with the animated shield, at-a-glance cards, sticky contents list and the policy
   text with its tables and callouts.
   ======================================================================== */

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr);
  gap: clamp(24px,5vw,72px);
  align-items: center;
}

.hero h1 .accent {
  background: linear-gradient(100deg,var(--accent),var(--blob-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero .lead {
  margin: 22px 0 26px;
  max-width: 58ch;
  font-size: clamp(1.08rem,1.6vw,1.25rem);
  color: var(--muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}

.chips li {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .86rem;
  font-weight: 500;
  color: var(--muted);
  box-shadow: var(--shadow);
}

.chips li strong {
  color: var(--text);
  font-weight: 600;
}

.chips .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 0 var(--good);
  animation: pulse 2.4s ease-out infinite;
}

/* Animated shield illustration in the privacy hero (draws once when it scrolls into view). */
.hero-art {
  position: relative;
  aspect-ratio: 1;
  max-width: 380px;
  width: 100%;
  margin-inline: auto;
}

.hero-art svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ripple {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  opacity: 0;
  transform-origin: 160px 160px;
  animation: ripple 5s ease-out infinite;
}

.ripple.r2 {
  animation-delay: 1.6s;
}

.ripple.r3 {
  animation-delay: 3.2s;
}

.shield-fill {
  fill: var(--accent-soft);
}

.shield-line, .check-line {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shield-line {
  stroke-width: 5;
}

.check-line {
  stroke-width: 9;
  stroke: var(--good);
}

.js .shield-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.js .hero-art.play .shield-line {
  animation: draw 1.6s var(--ease-out) .35s forwards;
}

.js .check-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.js .hero-art.play .check-line {
  animation: draw .8s var(--ease-out) 1.55s forwards;
}

.js .shield-fill {
  opacity: 0;
}

.js .hero-art.play .shield-fill {
  animation: fade-in .9s ease 1s forwards;
}

.float-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  animation: float 6s ease-in-out infinite;
}

.float-chip .icon {
  width: 15px;
  height: 15px;
  color: var(--accent);
}

.float-chip.c1 {
  left: -4%;
  top: 16%;
}

.float-chip.c2 {
  right: -2%;
  bottom: 20%;
  animation-delay: -3s;
}

.float-chip.c3 {
  left: 6%;
  bottom: 6%;
  animation-delay: -1.5s;
}

.glance {
  position: relative;
  margin-top: calc(-1 * clamp(28px,4vw,44px));
  z-index: 2;
}

/* Privacy at a glance: six cards (also reused on the Home page). */
.glance-grid {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 14px;
}

.g-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform .35s var(--ease),translate .35s var(--ease),scale .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}

@media (hover:hover) {
  .g-card:hover {
    translate: 0 -4px;
    scale: 1.025;
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
  }
}

.g-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.g-icon .icon {
  width: 20px;
  height: 20px;
}

.g-label {
  font-size: .8rem;
  line-height: 1.35;
  color: var(--quiet);
  font-weight: 500;
}

.g-card strong {
  font-size: 1.3rem;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--accent-ink);
}

.g-card.wide strong {
  font-size: 1.05rem;
}

.glance-note {
  margin: 20px 0 0;
  max-width: 80ch;
  font-size: .92rem;
  color: var(--muted);
}

/* "On this page" bar (Methodology and Privacy): fixed under the header while the page scrolls.
   The links scroll sideways when they do not fit; site.js marks the section being read (aria-current)
   and keeps that link in view. */
.page-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 80;
  background: var(--header-bg);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.page-bar-in {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--bar-h);
}

.page-bar-title {
  flex: none;
  padding-top: 2px; /* puts the label on the same text line as the links */
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--quiet);
}

.page-bar ol {
  position: relative;
  display: flex;
  flex: 1;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 8px 12px 8px 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  mask-image: linear-gradient(90deg,#000 calc(100% - 28px),transparent);
}

.page-bar ol::-webkit-scrollbar {
  display: none;
}

.page-bar li {
  display: flex;
  margin: 0;
}

.page-bar a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s,color .2s;
}

.page-bar .n {
  color: var(--quiet);
  font-variant-numeric: tabular-nums;
}

@media (hover:hover) {
  .page-bar a:hover {
    color: var(--text);
    background: var(--surface-2);
  }
}

.page-bar a[aria-current="true"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}

/* Anchors must stop below the header and the bar. */
html:has(.page-bar) {
  scroll-padding-top: calc(var(--header-h) + var(--bar-h) + 20px);
}

html:has(.page-bar) .sec {
  scroll-margin-top: calc(var(--header-h) + var(--bar-h) + 20px);
}

/* Privacy policy: one centred column of text below the "On this page" bar. */
.layout {
  padding-block: clamp(48px,7vw,88px) clamp(56px,8vw,104px);
}

.policy {
  min-width: 0;
  max-width: 820px;
  margin-inline: auto;
}

/* One numbered policy section. site.js adds .in when it scrolls into view. */
.sec {
  position: relative;
  padding-bottom: clamp(36px,5vw,56px);
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.sec+.sec {
  padding-top: clamp(36px,5vw,56px);
  border-top: 1px solid var(--line-soft);
}

.sec-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.sec-no {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.sec-head h2 {
  position: relative;
  padding-bottom: 10px;
}

.sec-head h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 56px;
  border-radius: 3px;
  background: linear-gradient(90deg,var(--accent),var(--blob-b));
  transform-origin: left;
}

.sec p, .sec li {
  color: var(--muted);
}

.sec li strong, .sec p strong {
  color: var(--text);
}

/* Highlighted paragraph with an icon. Modifier .warn gives the amber edge. */
.callout {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  margin: 20px 0;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.callout .icon {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  color: var(--accent);
}

.callout p {
  margin: 0;
  color: var(--muted);
}

.callout.warn {
  border-left-color: #d99a1c;
}

.callout.warn .icon {
  color: #d99a1c;
}

.table-scroll {
  margin: 6px 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Policy table. On phones each row becomes a stacked card (see Responsive). */
.pt {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
}

.pt th, .pt td {
  text-align: left;
  vertical-align: top;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.pt thead th {
  font-size: .75rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--quiet);
  background: var(--surface-2);
  font-weight: 700;
}

.pt tbody th {
  font-weight: 600;
  color: var(--text);
  width: 19%;
}

.pt td {
  color: var(--muted);
}

.pt tbody tr {
  transition: background-color .2s;
}

@media (hover:hover) {
  .pt tbody tr:hover {
    background: var(--surface-2);
  }
}

.pt tbody tr:last-child th, .pt tbody tr:last-child td {
  border-bottom: 0;
}

/* "What the apps never do" grid. */
.never {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.never li {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: transform .3s var(--ease),translate .3s var(--ease),scale .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}

@media (hover:hover) {
  .never li:hover {
    translate: 0 -3px;
    border-color: var(--accent);
    box-shadow: var(--shadow);
  }
}

.never .x {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--good-soft);
  color: var(--good);
}

.never .x .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}

.never p {
  margin: 0;
  font-size: .95rem;
}

.never p strong {
  display: block;
  margin-bottom: 2px;
}

.platforms {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
  margin: 20px 0;
}

.platform {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.platform h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.platform h3 .icon {
  color: var(--accent);
}

.platform ul {
  margin: 0;
  padding-left: 1.15em;
  font-size: .94rem;
}

.steps {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  counter-reset: s;
}

.steps li {
  position: relative;
  margin: 0 0 12px;
  padding: 14px 16px 14px 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  counter-increment: s;
}

.steps li::before {
  content: counter(s);
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--surface);
  font-size: .82rem;
  font-weight: 700;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg,var(--accent-soft),var(--surface));
  box-shadow: var(--shadow);
}

.contact-card .g-icon {
  background: var(--surface);
}

.contact-card strong {
  display: block;
  font-size: 1.05rem;
}

.contact-card span {
  font-size: .92rem;
  color: var(--muted);
}

.history {
  font-size: .94rem;
}

.js .sec-head h2::after {
  transform: scaleX(0);
  transition: transform 1s var(--ease-out) .25s;
}

.js .sec.in .sec-head h2::after {
  transform: scaleX(1);
}

.js .sec-no {
  transform: scale(0) rotate(-40deg);
  transition: transform .8s cubic-bezier(.34,1.56,.64,1) .1s;
}

.js .sec.in .sec-no {
  transform: none;
}

/* ========================================================================
   Footer and back-to-top button
   Four-part footer (brand and contact, link columns, legal row) and the floating back-
   to-top button.
   ======================================================================== */

/* Footer: brand and contact on the left, link columns on the right, legal row below. */
.site-footer {
  border-top: 1px solid var(--line-soft);
  background: var(--bg-2);
  font-size: .9rem;
  color: var(--muted);
  position: relative;
  padding-block: clamp(40px,5vw,60px) max(28px,calc(20px + env(safe-area-inset-bottom,0px)));
}

.site-footer p {
  margin: 0 0 8px;
  color: var(--muted);
}

.site-footer .brand {
  margin-bottom: 14px;
}

/* Floating back-to-top button; site.js adds .show after scrolling. */
.to-top {
  position: fixed;
  right: max(20px,env(safe-area-inset-right,0px));
  bottom: max(20px,env(safe-area-inset-bottom,0px));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent-ink);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(.8);
  pointer-events: none;
  transition: opacity .3s,transform .35s var(--ease-out);
}

.to-top.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (hover:hover) {
  .to-top:hover {
    border-color: var(--accent);
  }
}

.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 3px;
  background: linear-gradient(90deg,var(--accent),var(--blob-b));
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  gap: clamp(32px,6vw,96px);
  align-items: start;
}

.footer-brand .brand {
  margin-bottom: 18px;
}

.site-footer .footer-ask {
  margin: 0 0 12px;
  max-width: 34ch;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--muted);
}

.site-footer .footer-mail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: .92rem;
  max-width: 100%;
}

.footer-mail .icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--accent-ink);
}

.footer-mail a {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
}

@media (hover:hover) {
  .footer-mail a:hover {
    color: var(--accent-ink);
    text-decoration: underline;
  }
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 28px;
}

.footer-cols h3 {
  line-height: 1.7;
  margin: 0 0 14px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--quiet);
}

.footer-cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.footer-cols li {
  margin: 0;
}

.footer-cols a {
  display: inline-block;
  padding-block: 3px;
  color: var(--muted);
  font-size: .95rem;
  text-decoration: none;
  transition: color .2s,translate .25s var(--ease);
}

@media (hover:hover) {
  .footer-cols a:hover {
    color: var(--accent-ink);
    translate: 3px 0;
  }
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  flex-wrap: wrap;
  margin-top: clamp(32px,5vw,48px);
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-size: .84rem;
  color: var(--quiet);
}

.footer-legal {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-legal a {
  color: var(--quiet);
  text-decoration: none;
}

@media (hover:hover) {
  .footer-legal a:hover {
    color: var(--accent-ink);
    text-decoration: underline;
  }
}

/* ========================================================================
   Motion (growth animations)
   Blocks fade and rise into view every time they scroll into view, in either direction.
   site.js adds .in; without JavaScript nothing is hidden. The grouped selector below
   must list the same blocks as REVEAL in site.js. All motion is switched off by Reduced
   motion and Print.
   ======================================================================== */

.js :is(.reveal,.hero-copy>*,.product-view,.page-hero .wrap>*,.section-head,.steps-3>article,.dim-card,.tour-card,.feature,.cap-grid>div,.facts>div,.store-card,.faq details,.closing,.rollup>div,.gap-list>div,.step-list li,.flow li,.note) {
  opacity: 0;
  transform: translateY(26px) scale(.97);
  transition: opacity .8s var(--ease-out),transform .9s var(--ease-out),translate .35s var(--ease),scale .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease),background-color .35s;
  transition-delay: calc(var(--i,0) * 80ms);
}

.js :is(.reveal,.hero-copy>*,.product-view,.page-hero .wrap>*,.section-head,.steps-3>article,.dim-card,.tour-card,.feature,.cap-grid>div,.facts>div,.store-card,.faq details,.closing,.rollup>div,.gap-list>div,.step-list li,.flow li,.note).in {
  opacity: 1;
  transform: none;
}

/* Home hero (the doubled class beats the specificity of the grouped selector above): the dashboard screenshot is the main image, so it grows with more emphasis than the other
   blocks. It rises from below, starts small and tilted back like a panel being lifted, settles flat, and a
   soft glow grows behind it. It replays every time the hero scrolls out of and back into view. */
.hero-win {
  position: relative;
}

.hero-win::before {
  content: "";
  position: absolute;
  inset: 12% 7% -4% 7%;
  z-index: -1;
  border-radius: 28px;
  background: radial-gradient(60% 60% at 50% 55%,rgba(30,127,204,.34),rgba(30,127,204,0) 72%);
  filter: blur(34px);
  pointer-events: none;
}

.js .product-view.product-view {
  transform-origin: 50% 100%;
  transform: perspective(1500px) translateY(80px) rotateX(11deg) scale(.84);
  transition: opacity 1.1s var(--ease-out),transform 1.35s var(--ease-out);
  transition-delay: .1s;
}

.js .product-view.product-view.in {
  transform: perspective(1500px) translateY(0) rotateX(0) scale(1);
}

.js .product-view .hero-win::before {
  opacity: 0;
  transform: scale(.6);
  transition: opacity 1.4s var(--ease-out) .25s,transform 1.6s var(--ease-out) .25s;
}

.js .product-view.in .hero-win::before {
  opacity: 1;
  transform: none;
}

:root[data-theme="dark"] .hero-win::before {
  background: radial-gradient(60% 60% at 50% 55%,rgba(92,192,245,.30),rgba(92,192,245,0) 72%);
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .hero-win::before {
    background: radial-gradient(60% 60% at 50% 55%,rgba(92,192,245,.30),rgba(92,192,245,0) 72%);
  }
}

/* Keyframes */
@keyframes grow-x {
  from{transform:scaleX(0)}to{transform:scaleX(1)}
}
@keyframes draw {
  to{stroke-dashoffset:0}
}
@keyframes fade-in {
  to{opacity:1}
}
@keyframes ripple {
  0%{opacity:.55;transform:scale(.55)}100%{opacity:0;transform:scale(1.55)}
}
@keyframes float {
  0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}
}
@keyframes pulse {
  0%{box-shadow:0 0 0 0 rgba(79,209,165,.55)}70%,100%{box-shadow:0 0 0 9px rgba(79,209,165,0)}
}
@keyframes drift-a {
  from{transform:translate(0,0) scale(1)}to{transform:translate(90px,50px) scale(1.18)}
}
@keyframes drift-b {
  from{transform:translate(0,0) scale(1)}to{transform:translate(-80px,-40px) scale(1.15)}
}

/* ========================================================================
   Responsive
   Breakpoints run from the widest to the narrowest, so a narrower rule always overrides
   a wider one. Tested from 320px to 2560px wide.
   ======================================================================== */

/* Main menu becomes a drop-down; glance and fact grids lose columns */
@media (max-width:1100px) {
  .glance-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-shell .nav-tools {
    margin-left: auto;
  }

  .main-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    z-index: 90;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow: auto;
    overscroll-behavior: contain;
    padding: 14px var(--gutter) 22px;
    margin: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s,transform .3s var(--ease-out),visibility 0s .3s;
  }

  .main-nav.open {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity .25s,transform .3s var(--ease-out);
  }

  .main-nav a {
    padding: 13px 16px;
    border-radius: var(--radius);
    font-size: 1rem;
  }

  .main-nav a.nav-cta {
    margin: 8px 0 0;
    justify-content: center;
  }
}

/* Fewer columns for the facts strip, roll-up and gap list */
@media (max-width:1080px) {
  .rollup {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .facts {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  .gap-list {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

/* Smaller hero artwork on the Privacy page */
@media (max-width:960px) {
  .hero-art {
    max-width: 280px;
  }
}

/* On phones the bar shows only the links */
@media (max-width:760px) {
  .page-bar-title {
    display: none;
  }
}

/* Two-column layouts stack into one column */
@media (max-width:900px) {
  .hero-copy, .tour-row, .two-col {
    grid-template-columns: 1fr;
  }

  .dim-cards,
  .steps-3,
  .cap-grid,
  .cap-grid.two,
  .feature,
  .feature.flip,
  .store-cards {
    grid-template-columns: minmax(0,1fr);
  }

  .feature.flip .feature-text {
    order: 0;
  }

  .closing {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Phones and small tablets: tables become cards, tighter cards, smaller header */
@media (max-width:760px) {
  :root {
    --header-h: 62px;
  }

  .brand-text span {
    display: none;
  }

  .tool-btn.print .label {
    display: none;
  }

  .tool-btn.print {
    padding: 0 11px;
  }

  .never, .platforms {
    grid-template-columns: 1fr;
  }

  .glance-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .pt thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .pt, .pt tbody, .pt tr, .pt th, .pt td {
    display: block;
    width: 100%;
  }

  .pt tbody tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .pt tbody tr:last-child {
    border-bottom: 0;
  }

  .pt tbody th, .pt td {
    border: 0;
    padding: 3px 18px;
    width: auto;
  }

  .pt tbody th {
    padding-top: 0;
    font-size: 1rem;
  }

  .pt td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-top: 6px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--quiet);
  }

  .rollup {
    grid-template-columns: 1fr;
  }

  .facts {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
  }

  .facts>div {
    padding: 16px;
  }

  .gap-list {
    grid-template-columns: 1fr;
  }

  .req-list li {
    flex-direction: column;
    gap: 2px;
  }

  .req-list span:last-child {
    text-align: left;
  }

  .store-card {
    padding: 22px;
  }

  .page-hero h1 {
    max-width: none;
  }
}

/* Privacy hero artwork moves above the text */
@media (max-width:700px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .hero-art {
    max-width: 150px;
    order: -1;
    margin-inline: 0;
    margin-bottom: -6px;
  }
}

/* Header buttons lose their text labels */
@media (max-width:560px) {
  .tool-btn.print {
    display: none;
  }

  .brand-text strong {
    font-size: .92rem;
  }

  .float-chip {
    display: none;
  }

  .nav-toggle .label {
    display: none;
  }

  .nav-toggle {
    padding: 0 12px;
  }
}

/* Small phones: smaller brand, compact buttons and cards */
@media (max-width:480px) {
  .theme-switch button {
    width: 30px;
  }

  .brand .logo {
    width: 34px;
    height: 34px;
  }

  .brand {
    gap: 9px;
    min-width: 0;
  }

  .nav-shell {
    gap: 10px;
  }

  .g-card {
    padding: 14px;
  }

  .g-card strong {
    font-size: 1.05rem;
  }

  .facts strong {
    font-size: 1.7rem;
  }

  .subnav a {
    padding: 7px 12px;
    font-size: .86rem;
  }

  .closing .btn {
    width: 100%;
  }
}

/* Smaller brand name */
@media (max-width:420px) {
  .brand-text strong {
    font-size: .84rem;
    line-height: 1.15;
  }
}

/* Very small phones: logo only */
@media (max-width:360px) {
  .brand-text {
    display: none;
  }
}

/* ========================================================================
   Touch screens
   Larger tap targets (about 44px) wherever a finger is the pointer.
   ======================================================================== */

@media (pointer:coarse) {
  .tool-btn {
    height: 44px;
  }

  .theme-switch button {
    width: 42px;
    height: 44px;
  }

  .brand {
    min-height: 44px;
  }

  .text-link {
    min-height: 44px;
  }

  .subnav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .footer-cols a {
    padding-block: 9px;
  }

  .footer-legal a {
    display: inline-block;
    padding-block: 10px;
  }

  .to-top {
    width: 48px;
    height: 48px;
  }

  .nav-toggle {
    height: 44px;
  }

  .main-nav a {
    min-height: 44px;
  }

  .faq summary {
    padding-block: 20px;
  }
}

@media (pointer:coarse) and (max-width:480px) {
  .theme-switch button {
    width: 36px;
    height: 44px;
  }
}

/* Landscape phones: very little height, so the header and hero shrink */
@media (max-height:480px) and (orientation:landscape) {
  :root {
    --header-h: 56px;
  }

  .hero {
    padding-block: 32px 28px;
  }

  .hero-grid {
    grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr);
    gap: 24px;
  }

  .hero-art {
    max-width: 200px;
    order: 0;
    margin-inline: auto;
  }
}

/* ========================================================================
   Reduced motion
   For visitors whose device asks for less motion: no animation, no transitions,
   everything visible at once.
   ======================================================================== */

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation: none!important;
    transition: none!important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .js .shield-line, .js .check-line {
    stroke-dashoffset: 0;
    animation: none!important;
  }

  .js .shield-fill {
    opacity: 1;
    animation: none!important;
  }

  .js .sec-no, .js .sec-head h2::after {
    transform: none;
  }

  .ripple {
    opacity: .25;
    transform: scale(1);
  }

  .closing::before {
    animation: none;
  }
}

/* ========================================================================
   Print
   Printing keeps the content and drops navigation, backgrounds and animation.
   ======================================================================== */

@media print {
  :root {
    color-scheme: light;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 10.5pt;
    line-height: 1.55;
  }

  .site-header, .page-bar, .to-top, .hero-art, .blob, .skip, .hero-win::before {
    display: none!important;
  }

  /* the whole reference list prints, without the blur or the button */
  .ref-list li[hidden] {
    display: list-item!important;
  }

  .refs.is-collapsed .ref-peek {
    filter: none;
    opacity: 1;
  }

  .refs-actions {
    display: none!important;
  }

  .hero {
    padding: 0 0 16px;
    background: none;
    border: 0;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .layout {
    display: block;
    padding: 0;
  }

  .glance {
    margin-top: 12px;
  }

  .glance-grid {
    grid-template-columns: repeat(3,1fr);
  }

  .g-card, .callout, .table-scroll, .never li, .platform, .steps li, .contact-card {
    box-shadow: none;
    break-inside: avoid;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .js .sec-no, .js .sec-head h2::after {
    transform: none;
  }

  .sec {
    break-inside: auto;
    padding-bottom: 18px;
  }

  .sec+.sec {
    padding-top: 18px;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .site-footer {
    background: none;
    padding-block: 16px;
  }

  .site-footer::before {
    display: none;
  }

  .closing-wrap, .subnav, .main-nav, .nav-toggle {
    display: none!important;
  }

  .page-hero {
    padding: 0 0 12px;
    background: none;
    border: 0;
  }

  .win img {
    filter: none;
  }

  .steps-3 article, .dim-card, .store-card, .feature {
    break-inside: avoid;
  }

  .facts>div, .cap-grid>div {
    box-shadow: none;
  }
}