/* Inter, self-hosted, as the fallback for everyone who is not on an Apple
   device. Apple devices resolve -apple-system to SF Pro first, so these files
   are never requested there: the download only happens on the platforms where
   the alternative was Segoe UI or Roboto, which is where the page stopped
   looking designed. Self-hosted rather than from a font CDN, because a webfont
   request would hand every reader's IP address to a third party, on the one
   site whose argument is that it does not do that. SIL OFL 1.1, see
   fonts/LICENSE.txt. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ChillMate site styles.

   Dark only, like the app. An earlier version carried a full light theme and a
   toggle, which meant four copies of every colour token and a site that could
   be showing you something the product never looks like. A page that claims to
   represent a dark-only app should be the thing it is describing.

   Chapters still alternate, but between two darks rather than dark and white:
   deep navy for the base, near-black for the contrast. Same rhythm, none of
   the lie. */

:root {
  color-scheme: dark;

  --bg-0: #0b1022;
  --bg-1: #0e1430;
  --bg-2: #131a2e;
  --glow-a: rgba(124, 140, 255, 0.20);
  --glow-b: rgba(111, 227, 180, 0.13);

  --surface: rgba(255, 255, 255, 0.045);
  --surface-hi: rgba(255, 255, 255, 0.075);
  --line: rgba(255, 255, 255, 0.10);
  --line-hi: rgba(255, 255, 255, 0.18);

  --text: #eef1f8;
  --text-soft: #bcc5dc;
  --text-dim: #8a93ad;

  --primary: #7c8cff;
  --primary-deep: #4e6bf5;
  --on-primary: #ffffff;
  /* The filled button carries white text, so both ends of its gradient have to
     clear 4.5:1 on their own. --primary is a fine link colour and a poor button
     fill: white on it measures 2.98:1. These two measure 4.68 and 6.72. */
  --btn-a: #5a68e0;
  --btn-b: #3f4fc4;
  --mint: #6fe3b4;
  --purple: #b08bff;
  --pink: #ff8bbf;
  --amber: #ffc266;
  --danger: #ff6b6b;

  --shadow-lift: 0 24px 60px -18px rgba(78, 107, 245, 0.55);
  --shadow-phone: 0 34px 80px -26px rgba(4, 8, 22, 0.95);

  --radius: 20px;
  --radius-lg: 26px;
  --maxw: 940px;
  --measure: 62ch;
}

/* Readers who ask their OS for more contrast get firmer lines and brighter
   secondary text, mirroring the app's own high-contrast mode. */
@media (prefers-contrast: more) {
  :root {
    --text-soft: #dfe4f2;
    --text-dim: #b9c1d6;
    --line: rgba(255, 255, 255, 0.26);
    --line-hi: rgba(255, 255, 255, 0.42);
    --surface: rgba(255, 255, 255, 0.08);
  }
}

* { box-sizing: border-box; }

/* An inline SVG with no intrinsic size fills its container, so every icon needs
   a default even where a more specific rule usually wins. Without this one an
   icon dropped into new markup renders at the width of the card. */
.icon {
  width: 18px;
  height: 18px;
  flex: none;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1100px 620px at 82% -12%, var(--glow-a), transparent 62%),
    radial-gradient(820px 520px at -8% 6%, var(--glow-b), transparent 58%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-0) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px 20px 80px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary-deep);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 12px 0;
  z-index: 20;
}
.skip:focus { left: 0; }

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

/* ---------- header ---------- */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0 28px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  border: 0;
  color: var(--text);
}
.brand .mark { width: 36px; height: 36px; flex: none; }
.brand .name { font-weight: 800; font-size: 1.12rem; letter-spacing: -0.2px; }
.brand .name em { font-style: normal; color: var(--mint); }

.head-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--text-soft);
  font-weight: 600;
  font-size: 0.94rem;
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.site-nav a:hover { background: var(--surface-hi); color: var(--text); border-color: var(--line); }
.site-nav a[aria-current="page"] { background: var(--surface-hi); color: var(--text); border-color: var(--line-hi); }
.site-nav .icon { width: 17px; height: 17px; }

.lang { position: relative; }
.lang > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-soft);
  font-size: 0.88rem;
  font-weight: 650;
  cursor: pointer;
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary:hover { background: var(--surface-hi); color: var(--text); }
.lang .icon { width: 16px; height: 16px; }
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  min-width: 170px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--line-hi);
  background: var(--bg-1);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
}
.lang-menu a {
  display: block;
  padding: 8px 11px;
  border-radius: 9px;
  border: 0;
  color: var(--text-soft);
  font-size: 0.92rem;
  text-decoration: none;
}
.lang-menu a:hover { background: var(--surface-hi); color: var(--text); }
.lang-menu a[aria-current="true"] { color: var(--text); font-weight: 700; }

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

h1 {
  font-size: clamp(2rem, 5.4vw, 3rem);
  line-height: 1.08;
  margin: 6px 0 12px;
  letter-spacing: -1px;
  font-weight: 800;
  max-width: 20ch;
}

.lede {
  color: var(--text-soft);
  font-size: clamp(1.05rem, 2.1vw, 1.18rem);
  margin: 0;
  max-width: var(--measure);
}

h2 {
  font-size: 1.28rem;
  margin: 0 0 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  letter-spacing: -0.3px;
  scroll-margin-top: 90px;
}
h2 .icon { width: 20px; height: 20px; flex: none; margin-top: 0.2em; }

h3 { font-size: 1.02rem; margin: 20px 0 4px; color: var(--text); letter-spacing: -0.1px; }

p { margin: 9px 0; color: var(--text-soft); max-width: var(--measure); }
strong { color: var(--text); font-weight: 660; }
.meta { color: var(--text-dim); font-size: 0.9rem; }

ul { margin: 8px 0; padding-left: 20px; }
li { margin: 6px 0; color: var(--text-soft); max-width: var(--measure); }

a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  transition: border-color 0.16s ease, color 0.16s ease;
}
a:hover { border-bottom-color: var(--primary); color: var(--primary-deep); }

code, .mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
}

/* A heading you can link to. The anchor stays invisible until the heading is
   hovered or the link itself is focused, so it never competes with the text. */
.anchor {
  margin-left: 8px;
  border: 0;
  color: var(--text-dim);
  opacity: 0;
  font-weight: 400;
  transition: opacity 0.15s ease;
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus-visible { opacity: 1; }

/* ---------- hero ---------- */

.hero {
  display: grid;
  gap: 30px;
  align-items: center;
  padding: 10px 0 6px;
}
@media (min-width: 780px) {
  .hero { grid-template-columns: 1.15fr 0.85fr; gap: 44px; }
}

.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 680;
  font-size: 0.97rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.14s ease, background 0.16s ease, border-color 0.16s ease;
}
.btn .icon { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-1px); }

/* ---------- the App Store badge ----------

   Apple supplies this artwork and attaches conditions to it: use the file as
   it comes, do not recolour it, do not redraw the words, and leave clear space
   around it worth a tenth of its height. So there is no background, no border
   and no radius here. The badge already is all of those things, and anything
   this rule added would be a modification of it.

   The padding is that clear space. It also happens to make the badge the same
   height as the ghost button beside it, which is why the row lines up. */
.badge-link {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border: 0;
  border-radius: 10px;
  text-decoration: none;
  transition: transform 0.14s ease, opacity 0.16s ease;
}
.badge-link:hover { transform: translateY(-1px); opacity: 0.88; }
.badge-link .badge { display: block; height: 52px; width: auto; }
.btn-primary {
  background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
  color: var(--on-primary);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 26px -10px rgba(78, 107, 245, 0.8);
}
.btn-primary:hover { color: var(--on-primary); }
.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}
.btn-ghost:hover { background: var(--surface-hi); border-color: var(--line-hi); color: var(--text); }

.status-note {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--text-dim);
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
}
.status-note .icon { width: 15px; height: 15px; flex: none; margin-top: 0.28em; }

/* ---------- the phone ---------- */

.phone { width: 100%; max-width: 268px; margin-inline: auto; }
.phone-shell {
  position: relative;
  border-radius: 46px;
  padding: 9px;
  background: linear-gradient(160deg, #333a5e 0%, #1c2238 42%, #12172b 100%);
  box-shadow: var(--shadow-phone), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.phone-screen {
  position: relative;
  border-radius: 38px;
  overflow: hidden;
  background: #0b1022;
  aspect-ratio: 1206 / 2622;
}
.phone-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Drawn rather than captured: the simulator renders the island in some
   screenshots and not others, so covering that strip is what makes a row of
   them look like one set of photos instead of five. */
.phone-island {
  position: absolute;
  left: 34.5%;
  width: 31%;
  top: 2%;
  height: 3.4%;
  border-radius: 999px;
  background: #000;
}

.hero .phone { max-width: 250px; }
.hero-phone-wrap { display: grid; place-items: center; }

/* ---------- the watch ---------- */

.watch { width: 100%; max-width: 190px; margin-inline: auto; }
.watch-shell {
  position: relative;
  border-radius: 27%;
  padding: 8px;
  background: linear-gradient(160deg, #3a4160 0%, #1e2439 45%, #12172b 100%);
  box-shadow: var(--shadow-phone), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.watch-screen {
  border-radius: 22%;
  overflow: hidden;
  background: #000;
  aspect-ratio: 416 / 496;
}
.watch-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The digital crown and side button, drawn rather than photographed so the
   watch reads as hardware at any size. */
.watch-shell::after,
.watch-shell::before {
  content: "";
  position: absolute;
  right: -3px;
  background: linear-gradient(90deg, #4a5170, #262c44);
  border-radius: 3px;
}
.watch-shell::before { top: 27%; width: 5px; height: 13%; }
.watch-shell::after { top: 46%; width: 4px; height: 10%; opacity: 0.75; }


/* ---------- what it refuses to do ---------- */

.refusals { list-style: none; padding: 0; margin: 8px 0 0; }
.refusals li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  max-width: none;
}
.refusals li:last-child { border-bottom: 0; padding-bottom: 0; }
.refusals .icon { width: 20px; height: 20px; margin-top: 3px; color: var(--danger); }
.refusals b { display: block; color: var(--text); font-weight: 700; }
.refusals span { color: var(--text-dim); font-size: 0.95rem; }

/* ---------- scenarios ---------- */

.scenarios { list-style: none; padding: 0; margin: 6px 0 0; }
.scenarios li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 12px 0;
  color: var(--text-soft);
}
.scenarios .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--primary); }

/* ---------- sections & cards ---------- */

.section { margin: 52px 0 0; }
.eyebrow {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 12px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin: 16px 0;
}

.grid { display: grid; gap: 12px; }
@media (min-width: 560px) { .grid.two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px) { .grid.three { grid-template-columns: repeat(3, 1fr); } }

.feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px 20px;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.feature:hover { border-color: var(--line-hi); background: var(--surface-hi); }
.feature .chip {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: grid; place-items: center;
  margin-bottom: 12px;
  border: 1px solid var(--line);
}
.feature .chip .icon { width: 19px; height: 19px; }
.feature h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; }
.feature p { margin: 0; font-size: 0.93rem; color: var(--text-dim); }

.tint-blue   { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.tint-mint   { background: color-mix(in srgb, var(--mint) 14%, transparent); color: var(--mint); }
.tint-purple { background: color-mix(in srgb, var(--purple) 14%, transparent); color: var(--purple); }
.tint-pink   { background: color-mix(in srgb, var(--pink) 14%, transparent); color: var(--pink); }
.tint-amber  { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.tint-danger { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

.checks { list-style: none; padding: 0; margin: 6px 0 0; }
.checks li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 11px 0;
  color: var(--text-soft);
  max-width: var(--measure);
}
.checks .icon { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--mint); }

.res {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.14s ease;
}
.res:hover { border-color: var(--line-hi); background: var(--surface-hi); transform: translateY(-1px); }
.res .t { font-weight: 680; color: var(--text); display: flex; align-items: center; gap: 8px; }
.res .t .icon { width: 15px; height: 15px; color: var(--text-dim); flex: none; }
.res .d { font-size: 0.9rem; color: var(--text-dim); margin-top: 3px; }

/* ---------- tables ---------- */

.table-scroll { overflow-x: auto; margin: 14px 0 4px; }
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-size: 0.94rem;
}
caption {
  text-align: left;
  color: var(--text-dim);
  font-size: 0.86rem;
  padding-bottom: 10px;
}
th, td {
  text-align: left;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--text-soft);
}
th { color: var(--text); font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }
td .yes { color: var(--mint); font-weight: 700; }
td .no { color: var(--text-dim); }

/* ---------- the no-server diagram ---------- */

.diagram {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 6px auto 0;
  height: auto;
}
.diagram .d-label { fill: var(--text-soft); font-size: 11px; font-weight: 650; }
.diagram .d-dim { fill: var(--text-dim); font-size: 10px; }
.diagram .d-box { fill: var(--surface); stroke: var(--line-hi); }
.diagram .d-stop { stroke: var(--danger); }
.diagram .d-flow { stroke: var(--mint); }

/* ---------- callouts ---------- */

.callout {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent);
  background: color-mix(in srgb, var(--amber) 8%, transparent);
  border-radius: 16px;
  padding: 15px 17px;
  margin: 18px 0;
  color: var(--text-soft);
}
.callout .icon { width: 20px; height: 20px; flex: none; color: var(--amber); margin-top: 2px; }
.callout p { margin: 0; max-width: none; }
.callout.urgent {
  border-color: color-mix(in srgb, var(--danger) 36%, transparent);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
}
.callout.urgent .icon { color: var(--danger); }
.callout.calm {
  border-color: color-mix(in srgb, var(--mint) 30%, transparent);
  background: color-mix(in srgb, var(--mint) 8%, transparent);
}
.callout.calm .icon { color: var(--mint); }

/* ---------- country picker ---------- */

.picker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.picker-row label { color: var(--text-soft); font-weight: 650; font-size: 0.95rem; }
select {
  font: inherit;
  font-size: 0.95rem;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-hi);
  background: var(--surface-hi);
  color: var(--text);
  cursor: pointer;
}
.country-panel[hidden] { display: none; }
.emergency-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 16px;
  font-size: 0.98rem;
  color: var(--text-soft);
  max-width: none;
}
.emergency-line .icon { width: 20px; height: 20px; }
.emergency-line b { color: var(--danger); font-size: 1.14rem; letter-spacing: 0.3px; }

/* ---------- footer ---------- */

footer {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 0.88rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
footer a { color: var(--text-soft); border-bottom-color: color-mix(in srgb, var(--text-soft) 28%, transparent); }
footer a:hover { color: var(--text); }
footer .sep { color: var(--line-hi); }
footer .made { margin-left: auto; }

@media (max-width: 620px) {
  footer .made { margin-left: 0; width: 100%; }
}

/* ---------- FAQ disclosures ---------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 2px;
  cursor: pointer;
  font-weight: 660;
  color: var(--text);
  list-style: none;
  transition: color 0.16s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--primary); }
.faq summary .chev {
  width: 18px; height: 18px;
  margin-left: auto;
  flex: none;
  color: var(--text-dim);
  transition: transform 0.2s ease;
}
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq .body { padding: 0 2px 16px; }
.faq .body p { margin: 0 0 8px; }
.faq .body p:last-child { margin-bottom: 0; }

/* ---------- contact row ---------- */

.contact-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ---------- copy button ---------- */

.copy {
  border: 0;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  vertical-align: middle;
  font: inherit;
}
.copy:hover { color: var(--text); background: var(--surface-hi); }
.copy .icon { width: 15px; height: 15px; display: block; }

/* ---------- back to top ---------- */

.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 15;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line-hi);
  background: var(--bg-1);
  color: var(--text-soft);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6);
}
.to-top.is-shown { opacity: 1; pointer-events: auto; transform: none; }
.to-top .icon { width: 19px; height: 19px; }

/* ---------- reveal on scroll ---------- */

/* Gated on `.js`, which an inline script in <head> adds. Without that gate a
   blocked, failed or slow site.js left nine sections of the home page at
   opacity 0 with nothing to ever turn them back on: no animation is a fine
   degradation, no content is not. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}
@media print {
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- the mark draws itself ---------- */

@media (prefers-reduced-motion: no-preference) {
  .draw path {
    stroke-dasharray: var(--len, 200);
    stroke-dashoffset: var(--len, 200);
    animation: draw 1.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  .draw path:nth-child(2) { animation-delay: 0.5s; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- narrow screens ---------- */

@media (max-width: 620px) {
  .site-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-bottom: 22px;
  }
  .site-nav { justify-content: flex-start; margin-left: -13px; }
  .head-right { justify-content: flex-start; }
  .lang-menu { left: 0; right: auto; }
}

/* ---------- print: the crisis numbers have to survive a printer ---------- */

@media print {
  :root {
    --text: #000; --text-soft: #1a1a1a; --text-dim: #444;
    --line: #bbb; --line-hi: #888; --surface: transparent; --surface-hi: transparent;
  }
  body { background: #fff; color: #000; }
  .site-nav, .head-right, .to-top, .cta-row, .contact-row,
  .phone, .watch, .stage, .subnav, .scroll-cue, .demo-picker,
  .demo-actions { display: none !important; }
  .card { border: 1px solid #bbb; break-inside: avoid; }
  .faq details { break-inside: avoid; }
  .faq details > .body { display: block !important; }
  a { color: #000; border: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #444; }
  .chapter { padding: 18px 0 !important; min-height: 0 !important; }
  .hero-full { min-height: 0 !important; }
  .exhibition .chapter h1 { font-size: 26pt !important; }
  .exhibition .chapter h2 { font-size: 17pt !important; }
  .statement-grid b { font-size: 34pt !important; color: #000 !important; -webkit-text-fill-color: #000 !important; }
}

/* ==========================================================================
   The exhibition layout

   Only the home page uses this. Privacy, support, about, changelog, press and
   security stay documents, because that is what they are: a legal text set as
   a full-bleed chapter sequence would be theatre in the wrong place.

   The rules of the layout are Apple's, and they are mostly about restraint
   with space rather than decoration: break the column, make the type large
   enough to be an image, put a chapter's worth of air between chapters, draw
   almost no borders, and let the product be the biggest thing on screen.
   ========================================================================== */

.exhibition { --chapter-pad: clamp(84px, 11vw, 168px); }

/* The whole page is chapters now, so the old centred column only applies
   inside one. */
.exhibition > .wrap { max-width: none; padding: 0; }

.chapter {
  position: relative;
  padding: var(--chapter-pad) 20px;
  background: var(--bg-1);
  color: var(--text);
  overflow: clip;
}
.chapter > .inner {
  max-width: 1080px;
  margin: 0 auto;
}
.chapter > .inner.narrow { max-width: 820px; }

/* Chapters alternate between two darks. The contrast is deliberately smaller
   than a black-and-white flip, so the page reads as one room with the lights
   arranged rather than as a slideshow. */
.chapter--invert {
  --bg-1: #05070f;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-hi: rgba(255, 255, 255, 0.065);
  --line: rgba(255, 255, 255, 0.085);
  --line-hi: rgba(255, 255, 255, 0.16);
}

/* Two-column chapters.

   Every chapter here sits in a 1080px container, but its paragraphs are capped
   at 48ch and its headings at 18ch, so a single-column chapter stopped around
   500px and left the right half of a desktop screen empty. Space is only
   luxurious when something has been placed in it; unoccupied, it reads as a
   page that did not finish loading.

   `.split` gives those chapters the shape the hero and the walk already had:
   the argument on the left, the evidence on the right. Below 900px it collapses
   back to one column, where a single column was always right. */
.split {
  display: grid;
  gap: clamp(26px, 4vw, 60px);
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 1fr; }
  /* Inside a half-width column the caps are the column, not a character count.
     Left as they were, the text would stop halfway across the half. */
  .split > div > p,
  .split > div > .checks li { max-width: none; }
  .split .diagram { margin-top: 0; }
}
/* The evidence column is a panel rather than loose text, so the right side has
   an edge and reads as placed rather than left over. */
.split-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 30px);
}
.split-panel > :first-child { margin-top: 0; }
.split-panel > :last-child { margin-bottom: 0; }

/* The closing ask.

   By the foot of the page the alternation has run out of alternations: specs
   and the footnotes sit either side of this, and whichever shade it borrowed it
   would dissolve into one of its neighbours. So it gets a treatment of its own.
   It is also the only chapter on the page that asks the reader for something,
   which is its own argument for not looking like the eight before it. */
.chapter--close {
  text-align: center;
  background:
    radial-gradient(900px 520px at 50% 118%, rgba(124, 140, 255, 0.17), transparent 68%),
    radial-gradient(620px 420px at 10% -12%, rgba(111, 227, 180, 0.085), transparent 62%),
    var(--bg-1);
  border-top: 1px solid var(--line);
}
.chapter--close > .inner { max-width: 760px; }
.chapter--close .lede { margin-inline: auto; }
.chapter--close .cta-row { justify-content: center; margin-top: 30px; }

/* ---------- exhibition typography ---------- */

.exhibition .chapter h1 {
  font-size: clamp(2.7rem, 6.6vw, 5.4rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  font-weight: 800;
  max-width: 19ch;
  margin: 0;
  text-wrap: balance;
}
.exhibition .chapter h2 {
  display: block;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
  font-weight: 800;
  max-width: 18ch;
  margin: 0 0 20px;
}
.exhibition .chapter h3 {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  letter-spacing: -0.015em;
  font-weight: 730;
}
.exhibition .chapter .lede {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.45;
  max-width: 34ch;
  color: var(--text-soft);
}
.exhibition .chapter > .inner > p { font-size: clamp(1.02rem, 1.3vw, 1.15rem); max-width: 48ch; }
.exhibition .chapter .eyebrow { font-size: 0.8rem; letter-spacing: 1.8px; margin-bottom: 16px; }

/* Almost no borders. A card in here is a shape made of space, not of lines. */
.exhibition .chapter .card {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
/* Except where the content genuinely is a panel: the demo and the tables. */
.exhibition .chapter .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(22px, 3vw, 40px);
}

/* ---------- hero ---------- */

.hero-full {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-top: clamp(80px, 12vh, 150px);
  padding-bottom: clamp(60px, 9vh, 110px);
}
/* The headline spans the full column and the split happens beneath it. At
   display size a 500px column fits about five characters per line, which turns
   a sentence into a ransom note. Full width buys twice that. */
.hero-cols {
  display: grid;
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
  margin-top: clamp(22px, 3vh, 40px);
}
@media (min-width: 900px) {
  .hero-cols { grid-template-columns: 1fr 0.82fr; }
}

/* The light source. A single soft key behind the phone, so the device has
   something to catch rather than sitting on a flat gradient. */
.hero-full::before {
  content: "";
  position: absolute;
  right: 6%;
  top: 58%;
  width: min(760px, 78vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(circle at center,
              color-mix(in srgb, var(--primary) 34%, transparent) 0%,
              color-mix(in srgb, var(--primary) 12%, transparent) 38%,
              transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.hero-full .inner { position: relative; z-index: 1; }

.hero-phone-big { width: 100%; max-width: min(360px, 74vw); margin-inline: auto; }
@media (min-width: 900px) {
  .hero-phone-big { max-width: 400px; }
}
.hero-phone-big .phone { max-width: none; }
.hero-phone-big .phone-shell {
  box-shadow:
    0 60px 120px -40px rgba(4, 8, 22, 0.9),
    0 0 90px -20px color-mix(in srgb, var(--primary) 45%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(26px, 5vh, 54px);
  color: var(--text-dim);
  font-size: 0.82rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 700;
  border: 0;
}
.scroll-cue .icon { width: 15px; height: 15px; }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue .icon { animation: nudge 2.2s ease-in-out infinite; }
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ---------- sticky sub-nav ---------- */

.subnav {
  position: sticky;
  top: 0;
  z-index: 18;
  background: color-mix(in srgb, var(--bg-1) 82%, transparent);
  border-bottom: 1px solid var(--line);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}
.subnav.is-shown { transform: none; opacity: 1; pointer-events: auto; }
@supports (backdrop-filter: blur(1px)) {
  .subnav { backdrop-filter: saturate(160%) blur(18px); }
}
.subnav .inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 11px 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav .inner::-webkit-scrollbar { display: none; }
.subnav .title { font-weight: 750; margin-right: 12px; white-space: nowrap; }
.subnav a {
  padding: 6px 12px;
  border-radius: 999px;
  border: 0;
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 620;
  white-space: nowrap;
}
.subnav a:hover { color: var(--text); background: var(--surface-hi); }
.subnav a.is-current { color: var(--text); background: var(--surface-hi); }
.subnav .btn { margin-left: auto; padding: 8px 16px; font-size: 0.9rem; }

/* ---------- the statement ---------- */

.statement { text-align: center; }
.statement .inner { max-width: 1000px; }
.statement-grid {
  display: grid;
  gap: clamp(28px, 5vw, 60px);
  margin-bottom: clamp(30px, 5vh, 56px);
}
@media (min-width: 720px) { .statement-grid { grid-template-columns: repeat(3, 1fr); } }
.statement-grid b {
  display: block;
  font-size: clamp(4.5rem, 13vw, 10rem);
  line-height: 0.86;
  font-weight: 800;
  letter-spacing: -0.05em;
  background: linear-gradient(160deg, var(--text) 30%, color-mix(in srgb, var(--text) 45%, transparent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.statement-grid span {
  display: block;
  margin-top: 6px;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  color: var(--text-soft);
  letter-spacing: -0.01em;
}
.statement > .inner > p { margin-inline: auto; max-width: 46ch; color: var(--text-dim); }

/* ---------- specs ---------- */

.specs { width: 100%; border-collapse: collapse; min-width: 0; }
.specs tr { border-bottom: 1px solid var(--line); }
.specs tr:last-child { border-bottom: 0; }
.specs th {
  text-align: left;
  padding: 17px 24px 17px 0;
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.95rem;
  width: 38%;
  vertical-align: top;
}
.specs td {
  padding: 17px 0;
  color: var(--text);
  font-weight: 600;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  border-bottom: 0;
}
@media (max-width: 600px) {
  .specs th, .specs td { display: block; width: auto; padding: 0; }
  .specs th { padding-top: 16px; }
  .specs td { padding-bottom: 16px; }
}

/* ---------- footnotes ---------- */

sup.fn { font-size: 0.62em; vertical-align: super; line-height: 0; margin-left: 2px; }
sup.fn a { border: 0; font-weight: 700; }
.footnotes { counter-reset: fn; }
.footnotes ol { list-style: none; padding: 0; margin: 10px 0 0; }
.footnotes li {
  counter-increment: fn;
  display: flex;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--text-soft);
  max-width: none;
  scroll-margin-top: 90px;
}
.footnotes li:last-child { border-bottom: 0; }
.footnotes li::before {
  content: counter(fn);
  flex: none;
  width: 25px; height: 25px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--surface-hi);
  color: var(--text-dim);
  font-size: 0.76rem;
  font-weight: 750;
}
.footnotes code { color: var(--text-dim); }
.footnotes li:target::before { background: var(--primary); color: var(--on-primary); }

/* ---------- staggered choreography ---------- */

.js .stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .stagger.is-in > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .stagger > * { opacity: 1; transform: none; }
}
@media print {
  .js .stagger > * { opacity: 1 !important; transform: none !important; }
}
.exhibition .feature { background: var(--surface); border-radius: 24px; padding: clamp(20px, 2.4vw, 28px); }
.exhibition .grid.three { gap: clamp(12px, 1.6vw, 20px); }
.exhibition .checks li,
.exhibition .scenarios li { font-size: clamp(1rem, 1.25vw, 1.1rem); max-width: 52ch; }
.exhibition .refusals li { padding: 18px 0; }
.exhibition .faq summary { padding: 20px 2px; font-size: 1.05rem; }
.exhibition footer { max-width: 1080px; margin-inline: auto; padding-inline: 20px; }
.exhibition .callout { max-width: 1080px; margin-inline: auto; }

@media (max-width: 620px) {
  .exhibition .chapter { padding-left: 18px; padding-right: 18px; }
  .subnav .title { display: none; }
}

/* The global header stays in flow above the hero, aligned to the chapter
   column rather than the old 940px one. */
.exhibition .site-head {
  max-width: 1080px;
  margin-inline: auto;
  padding: 18px 20px 0;
}
.exhibition .hero-full { min-height: calc(100svh - 84px); }

/* One line of a person, in the hero, where the rest of the page is product. */
.human {
  margin-top: 20px;
  padding-left: 16px;
  border-left: 2px solid color-mix(in srgb, var(--mint) 55%, transparent);
  color: var(--text-soft);
  font-size: clamp(0.98rem, 1.2vw, 1.06rem);
  max-width: 42ch;
}

/* A statement chapter that carries a sentence rather than three numbers. */
.statement-grid b.statement-line {
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 20ch;
  margin-inline: auto;
}

/* A page with no full-height hero has nothing for the sub-nav to hide behind,
   so it starts visible there rather than waiting for a scroll that reveals it
   only after the reader has already passed the links. */
.no-hero .subnav { transform: none; opacity: 1; pointer-events: auto; }

/* The statement gradient faded too far on near-black; keep the tail readable. */
.statement-grid b {
  background: linear-gradient(160deg, var(--text) 35%, color-mix(in srgb, var(--text) 68%, transparent));
  -webkit-background-clip: text;
  background-clip: text;
}


/* ---------- reduced data ----------

   `prefers-reduced-data` is a request from someone paying for their megabytes
   or riding a throttled connection. The screenshots are the only heavy thing
   on this site, and every one of them is described in the sentence next to it,
   so dropping them costs a reader nothing they cannot read. The phone frames
   stay exactly where they were, so nothing reflows and no space collapses. */
@media (prefers-reduced-data: reduce) {
  .phone-screen img,
  .phone-screen picture,
  .watch-screen img,
  .watch-screen picture {
    display: none;
  }
  .phone-screen,
  .watch-screen {
    background:
      repeating-linear-gradient(135deg,
        var(--surface) 0 12px, var(--surface-hi) 12px 24px);
    display: grid;
    place-items: center;
  }
  .phone-screen::after {
    content: attr(data-reduced-label);
    font-size: 0.82rem;
    color: var(--text-dim);
    padding: 0 14px;
    text-align: center;
  }
  video[data-autoplay] { display: none; }
}


/* The checker page leads with an h1 rather than a chapter heading, so the lede
   needs the breathing room the exhibition h2 rule was providing elsewhere. */
.exhibition .chapter h1 + .lede,
.exhibition .chapter > .inner > h1 + .lede { margin-top: 18px; }


/* The spec table was pinned to an 820px column, so thirteen short rows ran down
   the left of a 1080px chapter with the right half empty. Two columns of rows
   fills the width and halves the scrolling, and it collapses to one column
   before the label and value would start fighting for room. */
@media (min-width: 900px) {
  .chapter .specs { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(30px, 4vw, 64px); }
  .chapter .specs tbody { display: contents; }
  .chapter .specs tr { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); align-items: baseline; }
}


/* ---------- printing the help page ----------

   The copy on this page promises that it prints, because these are the numbers
   you want when the network is gone and a screen is the wrong place to read
   them. It printed as eleven pages: the crisis numbers, and then the whole FAQ,
   the contact card, the policy note and the page furniture behind them. Eleven
   pages is not something anybody puts on a fridge.

   So printing this page prints the thing it is for: the emergency number and
   the services for the country you chose. Everything else is on the screen you
   printed it from. */
@media print {
  .support-page .lede,
  .support-page .callout.calm,
  .support-page .picker-row,
  .support-page footer,
  .support-page .faq,
  .support-page .section:has(.faq),
  .support-page .section:has(.contact-row) { display: none; }

  .support-page h1 { font-size: 20pt; margin-bottom: 6pt; }
  .support-page h2 { font-size: 13pt; }
  .support-page .section { margin: 0 0 10pt; }
  .support-page .card { border: 0; padding: 0; }
  .support-page .emergency-line { font-size: 15pt; font-weight: 700; margin: 0 0 8pt; }

  /* Two columns of services, each kept whole across a page break. */
  .support-page .grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8pt; }
  .support-page .res { break-inside: avoid; padding: 6pt 0; border: 0; border-bottom: 1px solid #ccc; }
  .support-page .res .t { font-size: 11pt; font-weight: 700; }
  .support-page .res .d { font-size: 9pt; color: #333; }

  /* The URL after every link is the point on paper, but it must not swamp the
     name of the service it belongs to. */
  .support-page a[href^="http"]::after { font-size: 8pt; word-break: break-all; }

  /* It came to one page of numbers plus a second page holding nothing but the
     disclaimer. A sheet you fold into a wallet should be one sheet, so the
     margins and the two callouts give back the few lines that were costing a
     whole extra page. */
  .support-page .callout { padding: 6pt 8pt; margin: 6pt 0; break-inside: avoid; }
  .support-page .callout p { font-size: 8.5pt; line-height: 1.35; }
  .support-page .callout .icon { display: none; }
  .support-page .section:last-of-type { margin-bottom: 0; }

  /* On paper you want the numbers, not the paragraph explaining what the page
     is; you are holding the page. Dropping it, and tightening the service rows,
     is what fits the disclaimer onto the same sheet. */
  .support-page [data-countries] > p { display: none; }
  .support-page .grid.two { gap: 4pt 10pt; }
  .support-page .res { padding: 3pt 0; }
  .support-page .res .t { font-size: 10pt; }
  .support-page .res .d { font-size: 8pt; line-height: 1.3; }
  .support-page .emergency-line { font-size: 14pt; margin: 0 0 5pt; }
}

@page { margin: 12mm; }