/* base.css — the page's own type, colour and layout primitives.
 *
 * Read on a sofa, not through a mask. The control layer inside the phone frame
 * is huge, blunt and high contrast because it has to be; everything out here is
 * a normal, quiet, well-set page, and the distance between the two is part of
 * what sells the app. Nothing in this file shouts.
 */

/* ------------------------------------------------------------------ palette */

:root {
  /* Cold and dim, because the product is used in cold, dim water. The ramp is
   * deliberately narrow — five steps of near-black to slate, so nothing on the
   * page competes with the footage or the red border. */
  --abyss:  #04111a;
  --deep:   #071c27;
  --slate:  #0c2734;
  --rule:   #17394a;
  --rule-soft: #102b39;

  --chalk:  #e8f2f6;   /* headings */
  --haze:   #9db4c1;   /* body */
  --dim:    #6b8695;   /* captions, requirements, small print */

  /* Spent, never decorative — the same discipline the app keeps. */
  --cyan:   #62d2ea;   /* one accent, for links and focus only */
  --amber:  #ffb827;   /* the app's amber, rgb(255,184,38): locked and warnings */
  --red:    #ff3b30;   /* recording, and nothing else */

  --measure: 34rem;    /* the text column */
  --gutter: clamp(1.25rem, 5vw, 3rem);

  --ease: cubic-bezier(.22, .61, .36, 1);

  color-scheme: dark;
}

/* --------------------------------------------------------------- foundation */

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

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

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

body {
  margin: 0;
  background: var(--abyss);
  color: var(--haze);
  /* -apple-system resolves to the OS font on Apple devices, which is entirely
   * legitimate; Inter is the licensed fallback for everyone else. SF Pro is
   * never self-hosted: its licence does not cover the web. */
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

/* ---------------------------------------------------------------- type ramp */

h1, h2, h3 {
  color: var(--chalk);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.022em;
  margin: 0;
  /* Sentence case throughout, no all-caps eyebrows. Set as a rule rather than
   * left to the copy, so a later edit can't quietly break it. */
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem); }
h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); letter-spacing: -.012em; }

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--cyan);
  text-decoration-color: color-mix(in srgb, var(--cyan) 40%, transparent);
  text-underline-offset: .18em;
}

a:hover { text-decoration-color: currentColor; }

/* One visible focus treatment for the whole page. Both App Store buttons and
 * the before/after handle depend on it. */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------- layout */

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

.lede {
  font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem);
  line-height: 1.5;
  color: var(--haze);
  max-width: 38rem;
}

/* Small technical print — requirements, the reliability line, captions. Reads
 * as instrument labelling rather than as legal boilerplate. */
.fine {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--dim);
  letter-spacing: .005em;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------- the App Store call out */

/* Apple's official badge, `assets/img/appstore-badge.svg`, used unmodified.
 *
 * Apple's guidelines say the badge may not be recreated, redrawn or restyled, so
 * there is nothing here that paints a button. This rule sizes the link, gives
 * it a tap target and holds the clear space; everything visible is Apple's file.
 *
 * The badge is 119.664 x 40 at its official minimum. It is rendered at exactly
 * 40px tall — the minimum, not a scaled-up version — and the extra height is
 * padding, so the tap target clears 44px without enlarging the artwork. */
.appstore {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Apple asks for clear space around the badge on all sides. */
  padding: 4px;
  border-radius: 9px;
  text-decoration: none;
  transition: transform .18s var(--ease);
}

/* Ours, not Apple's. Shown only while the badge is the thing under the
 * pointer or the keyboard. It drops below the badge rather than above it,
 * because above is where the app's name sits, and covering the small print
 * for a moment costs less than covering the name. */
.appstore__tip {
  position: absolute;
  left: 50%;
  top: calc(100% + .45rem);
  translate: -50% 0;
  padding: .32rem .6rem;
  border-radius: 6px;
  background: var(--deep);
  color: var(--chalk);
  font-size: .8125rem;
  line-height: 1.3;
  letter-spacing: .005em;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--rule);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s var(--ease);
}

.appstore:hover .appstore__tip,
.appstore:focus-visible .appstore__tip { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .appstore__tip { transition: none; }
}

.appstore img {
  height: 40px;
  width: auto;
  display: block;
}

.appstore:hover { transform: translateY(-1px); }
.appstore:active { transform: translateY(0); }

/* The page-wide :focus-visible sets border-radius: 4px, which on the plated
 * badge would visibly square its corners the moment it takes focus. */
.appstore:focus-visible { border-radius: 9px; }

/* The white badge knocks its lettering out of the lozenge, so the words take the
 * colour of whatever is behind them. On a solid background that is the point. In
 * the hero the badge floats over playing video, and moving water inside the
 * letterforms is exactly the failure the glass work elsewhere is careful to
 * avoid — so there, and only there, it sits on its own opaque plate. The plate
 * is --abyss, the page's own darkest ground, which is what the lettering then
 * picks up. */
.appstore--plated {
  background: var(--abyss);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .75);
}

/* A placeholder is never allowed to look finished. This hairline is the tell,
 * and it goes away with the real asset. */
[data-asset] { position: relative; }

[data-asset]::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed color-mix(in srgb, var(--amber) 45%, transparent);
  border-radius: inherit;
  pointer-events: none;
}

html[data-assets="ready"] [data-asset]::after { display: none; }