/* 9BestApp website: everything outside /maxdisplay/.
   It shares its paper, ink and typeface with the Max Display pages so the whole site reads as one.
   The warm (ember) and cool (tide) colours belong to Max Display and appear only where it is shown. */

:root {
  --paper: #f5f7fc;
  --paper-raised: #ffffff;
  --ink: #141b3d;
  --ink-soft: #4a5478;
  --line: #dce1ee;
  --ember-a: #ff8a34;
  --ember-b: #ff2d87;
  --tide-a: #27d9f2;
  --tide-b: #2f5bff;
  --link: #2448e0;
  --focus: #2f5bff;
  --night: #0e1438;
  --night-ink: #eef1fb;
  --night-soft: #aab3d6;

  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1160px;
  --section-space: clamp(4.5rem, 10vw, 8rem);
  --block-space: clamp(3rem, 6vw, 4.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0d1331;
    --paper-raised: #151c40;
    --ink: #edf0fa;
    --ink-soft: #a7afcc;
    --line: #283260;
    --link: #8fb0ff;
    --focus: #8fb0ff;
    --night: #070b22;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
main { flex: 1; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 30;
  background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 8px;
}
.skip:focus { top: 12px; }

/* Type */

h1, h2, h3, h4 { margin: 0; font-weight: 750; color: inherit; text-wrap: balance; }
h1, h2 { font-stretch: 125%; letter-spacing: -0.02em; }
h3 { font-size: 1.3rem; line-height: 1.3; font-stretch: 110%; letter-spacing: -0.005em; }
p { margin: 0; }
p, li { text-wrap: pretty; }

.section-title {
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  line-height: 1.04;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* Buttons */

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border-radius: 12px; border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--paper);
  font: inherit; font-size: 1rem; font-weight: 650; font-stretch: 105%;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 120ms ease;
}
.button:hover { transform: translateY(-1px); }
.button-quiet { background: transparent; color: var(--ink); }
.button-small { min-height: 38px; padding: 0 14px; font-size: 0.95rem; border-radius: 10px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.75rem; }

/* Header */

.site-header {
  position: sticky; top: 0; z-index: 20;
  padding-block: 12px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; gap: 16px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px; margin-right: auto;
  color: var(--ink); text-decoration: none;
  font-weight: 750; font-stretch: 115%; font-size: 1.1rem;
}
.brand img { width: 36px; height: 36px; border-radius: 22.5%; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); margin-right: clamp(0px, 1.2vw, 12px); }
.nav a { color: var(--ink-soft); text-decoration: none; font-size: 0.98rem; padding: 6px 2px; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--tide-b); }
@media (max-width: 640px) { .nav { display: none; } }

/* Home: the opening lines */

.hero { padding-top: clamp(2rem, 6vw, 5rem); }
.hero-title {
  font-size: clamp(2.6rem, 8.4vw, 7rem);
  line-height: 0.94;
  font-weight: 800;
  letter-spacing: -0.03em;
  max-width: 10.5em;
}
.hero-lede { margin-top: clamp(1.5rem, 3vw, 2.5rem); max-width: 36rem; margin-left: auto; }
.hero-lede p { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-soft); }
@media (max-width: 860px) { .hero-lede { margin-left: 0; } }

/* Home: Max Display, on its own dark desk. The picture is its icon come to life:
   a warm screen with a cool one in front, and a window that moves across once. */

.feature-section { padding-block: var(--block-space) var(--section-space); }
.feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding: clamp(1.75rem, 5vw, 4.5rem);
  border-radius: clamp(20px, 3vw, 32px);
  background: var(--night); color: var(--night-ink);
}
.feature-app {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 700; font-stretch: 115%; font-size: 1.1rem;
}
.feature-app img { width: 48px; height: 48px; border-radius: 22.5%; }
.feature h2 { margin-top: 1.5rem; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1; font-weight: 800; }
.feature p { margin-top: 1.25rem; color: var(--night-soft); max-width: 32rem; }
.feature .button { background: var(--night-ink); border-color: var(--night-ink); color: var(--night); }
.feature .button-quiet { background: transparent; color: var(--night-ink); border-color: color-mix(in srgb, var(--night-ink) 45%, transparent); }

.screens { position: relative; aspect-ratio: 4 / 3; container-type: inline-size; }
.screens i { position: absolute; display: block; }
.screen-warm, .screen-cool { width: 62%; aspect-ratio: 16 / 10.5; border-radius: 7cqw; }
.screen-warm {
  left: 2%; top: 8%;
  background: linear-gradient(120deg, var(--ember-a), var(--ember-b) 78%);
  box-shadow: 0 5cqw 12cqw -4cqw color-mix(in srgb, var(--ember-b) 55%, transparent);
}
.screen-cool {
  right: 2%; bottom: 6%;
  background: linear-gradient(150deg, color-mix(in srgb, var(--tide-a) 88%, transparent), color-mix(in srgb, var(--tide-b) 94%, transparent) 70%);
  box-shadow: inset 0 0 0 0.35cqw rgba(255, 255, 255, 0.35), 0 6cqw 14cqw -4cqw color-mix(in srgb, var(--tide-b) 65%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.window {
  left: 12%; top: 22%; width: 34%; aspect-ratio: 16 / 11; border-radius: 2.4cqw;
  background:
    radial-gradient(circle at 9% 16%, #ff5f57 0 1.1cqw, transparent 1.2cqw),
    radial-gradient(circle at 18% 16%, #febc2e 0 1.1cqw, transparent 1.2cqw),
    radial-gradient(circle at 27% 16%, #28c840 0 1.1cqw, transparent 1.2cqw),
    linear-gradient(#dfe4f2, #dfe4f2) 9% 46% / 62% 6% no-repeat,
    linear-gradient(#dfe4f2, #dfe4f2) 9% 62% / 78% 6% no-repeat,
    linear-gradient(#dfe4f2, #dfe4f2) 9% 78% / 46% 6% no-repeat,
    #ffffff;
  box-shadow: 0 3cqw 7cqw -2cqw rgba(7, 11, 34, 0.55);
  animation: window-across 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.9s both;
}
@keyframes window-across {
  from { transform: translate(0, 0); }
  to { transform: translate(124%, 96%); }
}
@media (prefers-reduced-motion: reduce) {
  .window { animation: none; transform: translate(124%, 96%); }
  .button { transition: none; }
}
@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; }
  .screens { max-width: 460px; }
}

/* Home: where to go for help. Three short points side by side, each under a rule. */

.help { padding-block: 0 var(--section-space); }
.points {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem); align-items: start;
}
.points li { border-top: 2px solid var(--ink); padding-top: 1.25rem; }
.points h3 { margin-bottom: 0.6rem; }
.points p { color: var(--ink-soft); font-size: 1.05rem; }
.points a { display: inline-block; margin-top: 0.9rem; font-weight: 600; }
@media (max-width: 820px) { .points { grid-template-columns: 1fr; } }

/* Footer */

.site-footer { border-top: 1px solid var(--line); padding-block: 28px 40px; color: var(--ink-soft); font-size: 0.9rem; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.footer-legal { display: grid; gap: 4px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-links a { color: var(--ink); text-decoration: none; }
.footer-links a:hover, .footer-links a[aria-current="page"] { text-decoration: underline; }

/* Reading pages (terms, privacy, contact, app help): one readable column. */

.doc { padding-block: clamp(3rem, 8vw, 6rem) var(--section-space); }
.doc-body { max-width: 46rem; }
.doc-body h1 { font-size: clamp(2.4rem, 7vw, 4.5rem); line-height: 0.98; font-weight: 800; letter-spacing: -0.03em; }
.doc-updated { margin-top: 1rem; color: var(--ink-soft); font-size: 0.95rem; }
.doc-lede { margin-top: 1.75rem; font-size: clamp(1.15rem, 1.6vw, 1.3rem); }
.doc-body h2 { margin: 3rem 0 0.9rem; font-size: clamp(1.4rem, 2.4vw, 1.75rem); font-stretch: 118%; line-height: 1.15; letter-spacing: -0.01em; }
.doc-body h3 { margin: 2.25rem 0 0.75rem; }
.doc-body h4 { margin: 1.75rem 0 0.6rem; font-size: 1.1rem; font-weight: 700; font-stretch: 108%; }
.doc-body p, .doc-body li { color: var(--ink-soft); overflow-wrap: anywhere; }
.doc-body h1 + p:not([class]) { margin-top: 1.75rem; }
.doc-body p + p, .doc-body ul + p, .doc-body ol + p, .doc-body p + ul, .doc-body p + ol, .doc-body div + p { margin-top: 1rem; }
.doc-body ul, .doc-body ol { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.6rem; }
.doc-body li::marker { color: var(--tide-b); font-weight: 650; }
.doc-body li > p + p { margin-top: 0.3rem; }
.doc-body strong { color: var(--ink); font-weight: 650; }
.doc-body .actions { margin-top: 2.5rem; }

.note {
  margin-top: 2.5rem; padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  border-radius: 16px; background: var(--paper-raised); border: 1px solid var(--line);
}
.note h2 { margin-top: 0; font-size: 1.2rem; }
.note p { color: var(--ink); }
.note p + p { margin-top: 0.75rem; }

/* Contact: the address appears in place of the button once it is clicked. */
.reveal { margin-top: 2rem; }
.reveal .address { font-size: clamp(1.3rem, 3vw, 1.75rem); font-weight: 650; font-stretch: 110%; overflow-wrap: anywhere; }

/* App help pages: a screenshot under the opening lines. */
.shot {
  margin: 2.5rem 0 0; border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 16px 34px -18px rgba(20, 27, 61, 0.45);
}
.shot img { width: 100%; }
.shot-tall { max-width: 320px; }