/* Dockit — product page. Inter (self-hosted, SIL Open Font License — see assets/fonts/Inter-LICENSE.txt),
   light by default, dark from the header switch (site.js). */

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #fbfbfd;
  --surface: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --line: rgba(0, 0, 0, 0.08);
  --accent: #0a7f8f;
  --accent-strong: #06606c;
  --on-accent: #ffffff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 50px rgba(0, 0, 0, 0.10);
  --radius: 18px;
  /* Liquid Glass (the download button) */
  --glass-fill: rgba(255, 255, 255, 0.22);
  --glass-fill-hover: rgba(255, 255, 255, 0.34);
  --glass-text: #1d1d1f;
  --glass-edge: rgba(0, 60, 70, 0.14);
  --glass-shadow: rgba(8, 70, 80, 0.30);
  --spec-top: rgba(255, 255, 255, 0.95);
  --spec-bottom: rgba(255, 255, 255, 0.45);
  --rim-strong: rgba(255, 255, 255, 1);
  --rim-soft: rgba(255, 255, 255, 0.45);
  --sheen: rgba(255, 255, 255, 0.55);
  --glow: rgba(10, 150, 170, 0.5);
  --header-glass: rgba(251, 251, 253, 0.48);
  color-scheme: light;
}

/* Dark, when chosen with the switch. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0c0e;
  --surface: #16181b;
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --line: rgba(255, 255, 255, 0.10);
  --accent: #27b3c2;
  --accent-strong: #52cad6;
  --on-accent: #041316;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 50px rgba(0, 0, 0, 0.45);
  --glass-fill: rgba(34, 37, 42, 0.26);
  --glass-fill-hover: rgba(44, 48, 54, 0.38);
  --glass-text: #f5f5f7;
  --glass-edge: rgba(255, 255, 255, 0.10);
  --glass-shadow: rgba(0, 0, 0, 0.65);
  --spec-top: rgba(255, 255, 255, 0.30);
  --spec-bottom: rgba(255, 255, 255, 0.08);
  --rim-strong: rgba(255, 255, 255, 0.62);
  --rim-soft: rgba(255, 255, 255, 0.16);
  --sheen: rgba(255, 255, 255, 0.10);
  --glow: rgba(39, 179, 194, 0.42);
  --header-glass: rgba(22, 23, 26, 0.5);
}

* { box-sizing: border-box; }

code, .hash { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 "Inter", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  font-feature-settings: "cv11"; /* Inter's single-storey a */
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* Header */

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Full width (the frosted background reaches both edges of the window); the content keeps the page's column. */
  padding: 14px max(24px, calc((100% - 1120px) / 2 + 24px));
  isolation: isolate;
}
/* Like Apple's site: clear at the top of the page, frosted glass once the page scrolls under it — the content
   beneath shows through blurred and saturated, above a hairline. (site.js marks the top with .at-top.) */
.top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--header-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 -0.5px 0 var(--line);
  transition: opacity 0.25s ease;
  pointer-events: none;
}
:root.at-top .top::before { opacity: 0; }

/* With "reduce transparency" on (macOS, or Windows' Transparency effects off), still frosted, just a little denser. */
@media (prefers-reduced-transparency: reduce) {
  .top::before { background: color-mix(in srgb, var(--bg) 78%, transparent); }
}

.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-size: 18px; }
.brand:hover { text-decoration: none; }
.top nav { display: flex; align-items: center; gap: 22px; font-size: 15px; }
.top nav a { color: var(--muted); }
.top nav a:hover { color: var(--text); text-decoration: none; }
.top nav .nav-download { color: var(--accent); font-weight: 600; }

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--muted); }
.theme-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 17px; height: 17px; fill: currentColor; }
/* The moon offers dark mode; the sun, light. Without JavaScript there's nothing to switch, so no button. */
.theme-toggle .icon-sun, :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root:not([data-theme]) .theme-toggle { display: none; }

/* Hero */

main { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.hero { text-align: center; padding: 56px 0 40px; }
.app-icon { margin: 0 auto 26px; width: 128px; height: 128px; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.22)); }

h1 {
  margin: 0 auto;
  max-width: 14ch;
  font-size: clamp(40px, 7vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.lede { max-width: 38em; margin: 22px auto 0; color: var(--muted); font-size: clamp(18px, 2.2vw, 21px); }

.cta { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.meta { margin: 0; color: var(--muted); font-size: 14px; }

/* The download button: Liquid Glass. A translucent, blurred fill; a specular rim that's brightest along the top
   left and fades around the sides; a soft sheen over its upper half; a faint catch-light along the bottom.
   Light glass in light mode, smoky glass in dark mode. A soft teal glow sits behind it (.glass-stage) so the
   glass has something to refract. */
.glass-stage { position: relative; display: inline-flex; isolation: isolate; }
.glass-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 18% 12%;
  border-radius: 999px;
  background: radial-gradient(closest-side, var(--glow), transparent);
  filter: blur(18px);
  transform: scale(1.35, 1.9);
  pointer-events: none;
}

.button {
  position: relative;
  isolation: isolate; /* the rim and sheen below sit over the glass but under the label */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 999px;
  color: var(--glass-text);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  box-shadow:
    inset 0 1px 0 var(--spec-top),
    inset 0 -1px 0 var(--spec-bottom),
    inset 0 0 0 0.5px var(--glass-edge),
    0 10px 28px -10px var(--glass-shadow),
    0 1px 2px rgba(0, 0, 0, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
/* The specular rim: a 1 px gradient ring, bright at the top left, clear at the bottom right, a glint at the far corner. */
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, var(--rim-strong) 0%, var(--rim-soft) 28%, transparent 55%, transparent 72%, var(--rim-soft) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  z-index: -1;
  pointer-events: none;
}
/* The sheen over the upper half. */
.button::after {
  content: "";
  position: absolute;
  inset: 1px 1px 50% 1px;
  border-radius: 999px 999px 40% 40% / 999px 999px 60% 60%;
  background: linear-gradient(to bottom, var(--sheen), transparent);
  z-index: -1;
  pointer-events: none;
}
.button:hover {
  text-decoration: none;
  background: var(--glass-fill-hover);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 var(--spec-top),
    inset 0 -1px 0 var(--spec-bottom),
    inset 0 0 0 0.5px var(--glass-edge),
    0 14px 34px -10px var(--glass-shadow),
    0 1px 2px rgba(0, 0, 0, 0.08);
}
.button:active { transform: translateY(0) scale(0.98); }
.button .apple { width: 17px; height: 17px; margin-top: -3px; fill: currentColor; }

@media (prefers-reduced-transparency: reduce) {
  .button { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Screenshots */

.shot { margin: 0; }
.shot img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.shot-full { margin-top: 24px; }
.shot figcaption { margin-top: 14px; text-align: center; color: var(--muted); font-size: 15px; }

/* Features */

section h2 {
  margin: 0 0 36px;
  text-align: center;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.features { padding: 96px 0 72px; }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid article { padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
/* Feature cards magnify on hover: they lift with a small spring (a slight overshoot, then settle), and their edge
   and shadow light up. With reduced motion (e.g. Windows' Animation effects off) they still grow, just gently and
   without the bounce. */
.grid article {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  will-change: transform;
}
.grid article:hover {
  transform: translateY(-6px) scale(1.04);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow);
}
@media (prefers-reduced-motion: reduce) {
  .grid article { transition: transform 0.2s ease-out, box-shadow 0.3s ease, border-color 0.3s ease; }
  .grid article:hover { transform: scale(1.04); }
}
.grid svg { width: 28px; height: 28px; fill: var(--accent); }
.grid h3 { margin: 14px 0 6px; font-size: 18px; letter-spacing: -0.01em; }
.grid p { margin: 0; color: var(--muted); font-size: 15px; }

/* Install */

.install { padding: 96px 0 40px; max-width: 720px; margin: 0 auto; text-align: center; }
.install ol { margin: 0 auto 28px; padding: 0; list-style: none; counter-reset: step; text-align: left; display: grid; gap: 12px; }
.install li {
  counter-increment: step;
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.install li::before {
  content: counter(step);
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 700;
}

.note { text-align: left; padding: 20px 22px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.note h3 { margin: 0 0 6px; font-size: 16px; }
.note p { margin: 0; color: var(--muted); font-size: 15px; }
.note strong { color: var(--text); }

.checksum { margin: 20px 0 32px; text-align: left; color: var(--muted); font-size: 14px; }
.checksum summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.checksum p { margin: 8px 0; }
code { font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace; }
.hash { display: block; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); overflow-wrap: anywhere; color: var(--text); }

/* Footer */

footer { max-width: 1120px; margin: 40px auto 0; padding: 28px 24px 48px; border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: 13px; }
footer p { margin: 0; }

/* Narrower windows */

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .top { padding: 12px 16px; }
  .top nav { gap: 16px; }
  .top nav a:not(.nav-download) { display: none; }
  main { padding: 0 16px; }
  .hero { padding: 36px 0 28px; }
  .app-icon { width: 104px; height: 104px; }
  .grid { grid-template-columns: 1fr; }
  .features, .install { padding-top: 64px; }
  .glass-stage { display: flex; }
  .button { width: 100%; justify-content: center; }
  .cta { align-items: stretch; }
}