/* Sailmode's look, as the Mac app's setup has it (Host-macOS/App/SailmodeStyle.swift): by day a sky from a breath
   of the icon's turquoise down to nearly white, at night navy into blue; sea-blue ink by day, white at night, and a
   soft sea blue for what's second. Display P3 where the screen has it, as in the app. */
:root {
  --sky-top: #dbf3f7;
  --sky-mid: #ecf7fa;
  --sky-end: #f1f9fb;
  --ink: #054a73;
  --quiet: #4d758f;
  --accent: #007dad;
  --card: rgba(255, 255, 255, 0.72);
  --card-edge: rgba(255, 255, 255, 0.9);
  --shade: rgba(0, 51, 79, 0.22);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@supports (color: color(display-p3 0 0 0)) {
  :root {
    --sky-top: color(display-p3 0.86 0.955 0.97);
    --sky-mid: color(display-p3 0.925 0.97 0.98);
    --sky-end: color(display-p3 0.945 0.975 0.985);
    --ink: color(display-p3 0.02 0.29 0.45);
    --quiet: color(display-p3 0.30 0.46 0.56);
    --accent: color(display-p3 0 0.49 0.68);
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --sky-top: #001c3b;
    --sky-mid: #054575;
    --sky-end: #086699;
    --ink: #ffffff;
    --quiet: #b3cce0;
    --accent: #29a8db;
    --card: rgba(255, 255, 255, 0.1);
    --card-edge: rgba(255, 255, 255, 0.16);
    color-scheme: dark;
  }
  @supports (color: color(display-p3 0 0 0)) {
    :root {
      --sky-top: color(display-p3 0 0.11 0.23);
      --sky-mid: color(display-p3 0.02 0.27 0.46);
      --sky-end: color(display-p3 0.03 0.40 0.60);
      --quiet: color(display-p3 0.70 0.80 0.88);
      --accent: color(display-p3 0.16 0.66 0.86);
    }
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--sky-top); }
/* Pulled past the bottom, Safari shows this colour: the sky's end once past the middle, as site.js marks. */
html.past-middle { background: var(--sky-end); }
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased;
}
/* The sky stays put behind the page as it scrolls, on iPhone too (where a fixed background doesn't). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-end) 100%);
}

/* The links at the very bottom of every page, small and half see-through. Nothing on the site moves: it's just there. */
.legal-links {
  margin-top: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px;
  padding: 56px max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  font-size: 12px; color: var(--quiet);
}
.legal-links a { color: inherit; text-decoration: none; opacity: 0.5; }
.legal-links a:hover { opacity: 1; }

/* The home page: the app icon, the headline and the line under it, then the video. */
.hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: max(12vh, 64px) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}
/* The icon at 144 points with the setup's soft shadow drawn into the picture (Tools/Website/shadowed-icon.swift)
   and 40 points around it for that shadow, taken back by the margin: a CSS shadow, Safari cut off at the picture's
   edges for a moment after loading. */
.hero .icon { display: block; width: 224px; height: 224px; margin: -40px; }
.hero h1 {
  margin: 32px 0 0; max-width: 17ch; text-wrap: balance;
  font-size: clamp(32px, 5.4vw, 56px); line-height: 1.08; font-weight: 600; letter-spacing: -0.025em;
}
/* Two lines, the first the longer, narrowing like a funnel; small enough on a phone that each stays one line. */
.hero .sub {
  margin: 14px 0 0;
  font-size: clamp(16px, 4.5vw, 24px); line-height: 1.4; color: var(--quiet);
}
.hero .sub span { display: block; }
.hero .soon { margin: 28px 0 0; font-size: 15px; line-height: 1.4; color: var(--quiet); }
.hero .soon span { display: block; }
.hero .soon a { color: var(--accent); font-weight: 500; text-decoration: none; }
.hero .soon a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* The film, its corners Lisse's squircle (corne.rs) once that has loaded, plain rounded until then. The shadow sits
   on the frame around it, rounded to match, as the video's own would be cut off with its corners; a plain box shadow,
   which Safari draws whole from the start. */
.hero .film {
  width: min(960px, 100%); margin-top: 40px;
  border-radius: 44px; box-shadow: 0 6px 18px var(--shade);
}
.hero video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 44px;
}
.hero video.squircle { border-radius: 0; }

/* What testers say, under the film: each quote a line as large as the subline, centred, with who said it under it.
   No heading and no cards; still, like the rest of the page. */
.quotes {
  width: min(720px, 100%); margin-top: clamp(88px, 12vw, 128px);
  display: flex; flex-direction: column; align-items: center; gap: clamp(40px, 6vw, 56px);
}
.quote { margin: 0; }
.quote blockquote { max-width: 34ch; margin: 0 auto; font-size: clamp(16px, 4.5vw, 24px); line-height: 1.4; text-wrap: balance; }
.quote figcaption { margin-top: 12px; font-size: 15px; line-height: 1.3; color: var(--quiet); }
.quote .who { font-weight: 600; color: var(--ink); }

/* Questions and answers under the quotes: each group a white card on the sky. A question opens on tap with a spring
   that doesn't bounce (site.js), the answer fading in as it unfolds; without motion it opens at once. */
.faq { width: min(720px, 100%); margin-top: clamp(88px, 12vw, 128px); text-align: left; }
.faq h2 {
  margin: 0; text-align: center; text-wrap: balance;
  font-size: clamp(28px, 4.4vw, 40px); line-height: 1.12; font-weight: 600; letter-spacing: -0.02em;
}
.faq h3 { margin: 40px 0 10px 4px; font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--quiet); }
.faq-card { padding: 0 22px; background: var(--card); border: 0.5px solid var(--card-edge); border-radius: 22px; }
.faq details + details { border-top: 0.5px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; list-style: none; cursor: pointer;
  font-size: 17px; line-height: 1.35; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
/* A chevron with round ends that points down, and flips over to point up once open, on the same spring: turned about
   its horizontal axis in perspective, like a card turned over. */
.faq summary::after {
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Cpath d='M1.5 1.5l5 5 5-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  content: ""; flex: none; width: 13px; height: 8px; margin-right: 2px;
  background: var(--quiet);
  -webkit-mask: var(--chevron) center / contain no-repeat;
  mask: var(--chevron) center / contain no-repeat;
  transform: perspective(40px) rotateX(0deg);
}
.faq details[open]:not([data-state="closed"]) summary::after { transform: perspective(40px) rotateX(180deg); }
/* Each way as long as the answer's spring (site.js): opening a little slower than closing. */
@media (prefers-reduced-motion: no-preference) {
  .faq summary::after { transition: transform 0.23s var(--spring, ease-out); }
  .faq details[open]:not([data-state="closed"]) summary::after { transition-duration: 0.38s; }
}
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
/* The answer's box is what the spring opens, so nothing in it may stick out. */
.faq .answer { overflow: hidden; }
.faq .answer p, .faq .answer ul { max-width: 60ch; margin: 0; font-size: 16px; line-height: 1.55; color: var(--quiet); }
.faq .answer > :not(:first-child) { margin-top: 12px; }
.faq .answer > :last-child { padding-bottom: 20px; }
.faq .answer ul { padding-left: 20px; }
.faq .answer li + li { margin-top: 4px; }
.faq a { color: var(--accent); font-weight: 500; text-decoration: none; }
.faq a:hover { text-decoration: underline; text-underline-offset: 2px; }
.faq-more { margin: 40px 0 0; text-align: center; font-size: 15px; line-height: 1.4; color: var(--quiet); }
@media (max-width: 480px) {
  .faq-card { padding: 0 18px; }
  .faq summary { font-size: 16px; }
  .faq .answer p, .faq .answer ul { font-size: 15px; }
}

/* The legal pages: Sailmode at the top, the text on a white card, as the setup's cards sit on the sky. */
.doc-top {
  width: min(760px, 100% - 32px); margin: 0 auto;
  padding-top: max(28px, env(safe-area-inset-top));
}
.doc-top a { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-size: 17px; font-weight: 600; }
.doc-top img { width: 56px; height: 56px; margin: -10px; }
.doc {
  width: min(760px, 100% - 32px); margin: 24px auto 0;
  padding: clamp(24px, 5vw, 48px);
  background: var(--card); border: 0.5px solid var(--card-edge); border-radius: 24px;
  font-size: 15.5px; line-height: 1.6;
}
.doc h1 { margin: 0; font-size: clamp(28px, 4.4vw, 38px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.doc .updated { margin: 6px 0 0; font-size: 14px; color: var(--quiet); }
.doc .lead { margin: 24px 0 0; font-size: 17px; }
.doc .updated + p { margin-top: 24px; }
.doc h2 { margin: 44px 0 0; font-size: 21px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.doc h3 { margin: 26px 0 0; font-size: 16px; line-height: 1.35; font-weight: 600; }
.doc p, .doc ul { margin: 8px 0 0; }
.doc ul { padding-left: 20px; }
.doc li + li { margin-top: 4px; }
.doc address { margin: 8px 0 0; font-style: normal; }
.doc a { color: var(--accent); text-underline-offset: 2px; }
.doc a:hover { text-decoration-thickness: 2px; }