/* facemorphs.com (site-02 "measured portrait"). Colors are the app's HubPalette
   (docs/BRAND.md): black/#191919 at night, white/#F2F2F2 by day, navy as the light
   accent. The home page's hero is the app's navy studio photograph with the app's
   own kind of drawing on it: thin lines and the values written beside them.
   Archivo is the brand face; body text is the system font; numbers are tabular.
   The CSP allows no scripts and no inline styles: everything lives in this file. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/archivo-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --ground: #ffffff;
  --card: #f2f2f2;
  --raised: #e6e6e6;
  --hairline: rgba(16, 16, 16, 0.12);
  --ink: rgba(16, 16, 16, 0.95);
  --ink-2: rgba(16, 16, 16, 0.62);
  --accent: #1c2540;
  --on-accent: #ffffff;
  --focus: #1c2540;
  /* The studio photograph's own navy (its left edge), so the hero runs past it. */
  --studio: #010015;
  --studio-ink: #ffffff;
  --studio-ink-2: rgba(255, 255, 255, 0.66);
  --brand: "Archivo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --gutter: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #000000;
    --card: #191919;
    --raised: #2c2c2c;
    --hairline: rgba(255, 255, 255, 0.12);
    --ink: rgba(255, 255, 255, 0.95);
    --ink-2: rgba(255, 255, 255, 0.64);
    --accent: #ffffff;
    --on-accent: #000000;
    --focus: #ffffff;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--raised) var(--ground);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 17px/1.55 var(--body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--on-accent); }

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

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

img { max-width: 100%; }

h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Visually hidden until focused: the first Tab on every page. */
.skip {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 999px;
  /* White on every ground: the white pages, the black ones and the navy photograph. */
  background: #ffffff;
  color: #000000;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; outline-color: #ffffff; }

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

.top { border-bottom: 1px solid var(--hairline); }
.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 20px/1 var(--brand);
  letter-spacing: -0.01em;
  text-decoration: none;
}
/* The app icon's mask (assets/mask.svg), painted in the text colour. */
.mark {
  width: 26px;
  height: 22px;
  background: currentColor;
  -webkit-mask: url("/assets/mask.svg") center / contain no-repeat;
  mask: url("/assets/mask.svg") center / contain no-repeat;
}
.top nav { display: flex; gap: 24px; }
.top nav a {
  font-size: 15px;
  color: var(--ink-2);
  text-decoration: none;
  padding: 8px 0;
}
.top nav a:hover { color: var(--ink); }
.top nav a[aria-current="page"] { color: var(--ink); }

/* On the home page the header sits on the photograph. */
.top.over {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  border-bottom: 0;
  color: var(--studio-ink);
}
.top.over nav a { color: var(--studio-ink-2); }
.top.over nav a:hover { color: var(--studio-ink); }

main { flex: 1; }

.foot {
  border-top: 1px solid var(--hairline);
  color: var(--ink-2);
  font-size: 14px;
  padding: 32px 0 44px;
}
.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  justify-content: space-between;
  align-items: flex-start;
}
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot nav a { text-decoration: none; padding: 4px 0; }
.foot nav a:hover { color: var(--ink); text-decoration: underline; }
.foot .legal-line { margin: 0; line-height: 1.6; }

/* --- buttons ---------------------------------------------------------------- */

.button {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 120ms ease-out;
}
.button:hover { text-decoration: none; }
.button:active { transform: scale(0.98); }
.button.secondary { background: var(--card); color: var(--ink); }
.button.on-studio { background: var(--studio-ink); color: var(--studio); }
.on-studio:focus-visible, .studio :focus-visible, .top.over :focus-visible { outline-color: var(--studio-ink); }

.note {
  font-size: 14px;
  color: var(--ink-2);
  margin: 14px 0 0;
}

/* Store badges (badges-01): each store's own artwork, as supplied, the same visible
   height (48 px; Apple's minimum is 40), at least a quarter of that apart (Apple's clear
   space). Google's PNG carries 41 px of empty margin on each side of its 646 x 250 canvas,
   so it is drawn taller and pulled in by that margin. */
.stores {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}
.stores li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.stores img { display: block; height: 48px; width: auto; }
.stores img.play { height: 71.43px; width: 184.62px; max-width: none; margin: -11.71px; }
.stores span { font-size: 14px; color: var(--ink-2); }
.studio .stores span { color: var(--studio-ink-2); }
.center .stores { margin-bottom: 8px; }

/* --- home: the measured portrait ------------------------------------------ */
/* The photograph is 2200 x 920 (the app's 2200 x 950, its dark bottom corner cut). .stage keeps that ratio exactly, so the SVG and
   the labels (placed in % of the stage) stay on the same points at every size.
   Points used (image px): hairline y202, brow y385, nose base y560, chin y752;
   the thirds rule x1830; labels from x1852. */

.studio {
  position: relative;
  overflow: hidden;
  background: var(--studio);
  color: var(--studio-ink);
  --h: clamp(600px, 41.82vw, 780px);
  height: var(--h);
}

.stage {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  aspect-ratio: 2200 / 920;
}
.stage > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.stage > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The face's thirds, carried across the page. Each guide ends at the rule. */
.guide {
  position: absolute;
  left: -200vw;
  right: 16.82%;
  height: 1px;
  background: rgba(255, 255, 255, 0.24);
  box-shadow: 0 1px 0 rgba(1, 0, 21, 0.30);
  transform-origin: right center;
}
.guide.g1 { top: 21.96%; }
.guide.g2 { top: 41.85%; }
.guide.g3 { top: 60.87%; }
.guide.g4 { top: 81.74%; }

.draw .halo { stroke: rgba(1, 0, 21, 0.38); stroke-width: 4; fill: none; }
.draw .line { stroke: #ffffff; stroke-width: 1.5; fill: none; }
.draw .dot { fill: #ffffff; }
.draw line, .draw path { vector-effect: non-scaling-stroke; stroke-linecap: round; }

.tag {
  position: absolute;
  margin: 0;
  left: 84.18%;
  font-size: 13px;
  line-height: 1.3;
  color: var(--studio-ink-2);
  white-space: nowrap;
}
.tag b {
  display: block;
  font-weight: 600;
  font-size: 19px;
  color: var(--studio-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.tag.t-thirds { top: 23.91%; }
.tag.t-canthal { top: 44.13%; transform: translateY(-50%); }
.tag.t-jaw { top: 67.39%; transform: translateY(-50%); }
.tag.t-note {
  top: 85.65%;
  width: 14.5%;
  white-space: normal;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* The copy is set on the same thirds: the headline stands on the brow line, the
   lede hangs from it, the action sits in the lower third. */
.copy {
  position: absolute;
  z-index: 2;
  top: 21.96%;
  bottom: 18.26%;
  --left: max(var(--gutter), calc((100% - 1200px) / 2 + var(--gutter)));
  left: var(--left);
  /* Up to the face's left edge (image x1385, i.e. 815 px of 920 from the stage's
     right at the stage's scale), less a 32 px gap. */
  width: min(600px, calc(100% - var(--h) * 0.8859 - var(--left) - 32px));
  display: grid;
  grid-template-rows: minmax(0, 183fr) minmax(0, 175fr) minmax(0, 192fr);
}
.copy h1 {
  align-self: end;
  /* One line on the brow line: 9.07 em wide, which the width above always holds. */
  font: 600 clamp(44px, 4.6vw, 76px)/0.98 var(--brand);
  letter-spacing: -0.03em;
  white-space: nowrap;
  margin: 0 0 18px;
}
.copy .lede {
  align-self: start;
  margin: 18px 0 0;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.5;
  color: var(--studio-ink-2);
  max-width: 30em;
}
.copy .act { align-self: center; }
.copy .note { color: var(--studio-ink-2); }

/* The one moment of motion: the guides draw out of the face across the page,
   then the drawing and its values appear. */
@media (prefers-reduced-motion: no-preference) {
  .guide { animation: guide-in 900ms cubic-bezier(0.2, 0.7, 0.1, 1) both; }
  .guide.g2 { animation-delay: 80ms; }
  .guide.g3 { animation-delay: 160ms; }
  .guide.g4 { animation-delay: 240ms; }
  .draw, .tag { animation: fade-in 500ms ease-out 650ms both; }
  .tag.t-canthal { animation-delay: 760ms; }
  .tag.t-jaw { animation-delay: 870ms; }
  .tag.t-note { animation-delay: 980ms; }
}
@keyframes guide-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* --- home: sections under the portrait -------------------------------------- */

.section { padding: 112px 0; }
.section + .section { padding-top: 0; }

.section h2 {
  font: 600 clamp(30px, 3.4vw, 44px)/1.08 var(--brand);
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  max-width: 18ch;
}
.section .intro {
  font-size: 19px;
  color: var(--ink-2);
  max-width: 34em;
  margin: 0 0 56px;
}

.section .after {
  margin: 32px 0 0;
  font-size: 16px;
  color: var(--ink-2);
  max-width: 44em;
}

/* What it measures: the app's own families and names, flowed in columns so the
   groups pack by length. */
.families {
  columns: 4 220px;
  column-gap: 32px;
}
.families section {
  break-inside: avoid;
  border-top: 1px solid var(--ink);
  padding-top: 16px;
  margin-bottom: 44px;
}
.families h3 {
  font: 600 19px/1.25 var(--brand);
  margin: 0 0 12px;
}
.families ul { list-style: none; margin: 0; padding: 0; }
.families li {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
  padding: 5px 0;
}

/* How it works: a real sequence, so it is numbered, on one ruled line with a
   tick at each step (the hero's thirds rule, laid down). */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 48px;
  border-top: 1px solid var(--ink);
  counter-reset: step;
}
.steps li {
  position: relative;
  counter-increment: step;
  padding-top: 28px;
}
.steps li::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 1px;
  height: 13px;
  background: var(--ink);
}
.steps li::before {
  content: counter(step);
  display: block;
  font: 600 64px/1 var(--brand);
  letter-spacing: -0.03em;
  margin-bottom: 28px;
  font-variant-numeric: tabular-nums;
}
.steps h3 { font: 600 24px/1.2 var(--brand); margin: 0 0 10px; }
.steps p { margin: 0; font-size: 16px; color: var(--ink-2); max-width: 30em; }

/* The privacy promise, set as a statement. */
.promise {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px 64px;
  align-items: end;
  border-top: 1px solid var(--hairline);
  padding-top: 56px;
}
.promise h2 {
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 12ch;
}
.promise p { margin: 0 0 16px; color: var(--ink-2); }
.promise p:last-child { margin-bottom: 0; }

/* --- text pages (legal, help) -------------------------------------------- */

.page {
  max-width: 760px;
  padding-top: 72px;
  padding-bottom: 112px;
}
.page h1 {
  font: 600 clamp(34px, 5vw, 52px)/1.06 var(--brand);
  letter-spacing: -0.025em;
  margin: 0 0 14px;
}
.page .meta {
  color: var(--ink-2);
  font-size: 16px;
  margin: 0 0 48px;
}
.page h2 {
  font: 600 24px/1.25 var(--brand);
  letter-spacing: -0.01em;
  margin: 56px 0 14px;
}
.page h3 {
  font-size: 17px;
  margin: 32px 0 8px;
}
.page p, .page li { color: var(--ink); max-width: 68ch; }
.page ul { padding-left: 1.2em; }
.page ol { padding-left: 1.6em; }
.page li { margin: 6px 0; }
.page .muted { color: var(--ink-2); }
.page .button { margin-top: 4px; }
.toc { font-size: 15px; }
.toc li { margin: 4px 0; }
/* Legal pages: numbered capital headings, as legal documents set them. */
.legal h2 {
  font: 600 16px/1.35 var(--body);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-top: 44px;
}
.legal .toc a { text-transform: uppercase; letter-spacing: 0.02em; font-size: 14px; }

.draft {
  border: 1px solid var(--hairline);
  background: var(--card);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 15px;
  margin: 0 0 40px;
}

/* terms-02: the arbitration notice at the top of the Terms must be conspicuous. */
.notice {
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 15px;
  margin: 0 0 40px;
}
.notice p { margin: 0 0 10px; }
.notice p:last-child { margin-bottom: 0; }

/* Wide tables scroll inside their own box on a phone, never the page. */
.scroll { overflow-x: auto; margin: 16px 0; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 16px 0;
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--hairline);
}
th { font-weight: 600; }

/* Short pages (get the app, open, subscribe, 404): one message, one action. */
.center {
  padding-top: 128px;
  padding-bottom: 128px;
  max-width: 760px;
}
.center h1 {
  font: 600 clamp(36px, 5.6vw, 60px)/1.04 var(--brand);
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  max-width: 16ch;
}
.center .lede {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--ink-2);
  max-width: 34em;
  margin: 0 0 36px;
}
.center h2 {
  font: 600 24px/1.25 var(--brand);
  margin: 72px 0 12px;
}

/* --- smaller screens --------------------------------------------------------- */

@media (max-width: 1080px) {
  .steps { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .steps li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 16px;
    border-top: 1px solid var(--ink);
    padding: 20px 0 28px;
  }
  .steps li::after { display: none; }
  .steps li::before { grid-row: span 2; margin: 0; font-size: 44px; }
  .promise { grid-template-columns: minmax(0, 1fr); }
}

/* Below this the portrait stops sharing its width with the copy: the photograph
   is cropped around the face (the stage is wider than the screen and shifted so
   the face sits left of centre, the values to its right), and the copy follows
   on the photograph's navy. */
@media (max-width: 860px) {
  .studio { height: auto; padding-top: 96.18vw; }
  .stage {
    height: auto;
    width: 230vw;
    right: auto;
    left: -128vw;
  }
  .guide { left: 0; }
  .copy {
    position: static;
    width: auto;
    display: block;
    padding: 28px var(--gutter) 56px;
  }
  .copy h1 { margin: 0 0 16px; white-space: normal; font-size: clamp(40px, 11vw, 60px); }
  .copy .lede { margin: 0 0 28px; }
  .top.over { position: relative; background: var(--studio); }
  .tag { font-size: 12px; }
  .tag b { font-size: 16px; }
  .tag.t-note { font-size: 11px; width: 12.5%; }
}

/* Tablets: a wider frame of the same photograph, the face right of centre. */
@media (min-width: 561px) and (max-width: 860px) {
  .studio { padding-top: 66.91vw; }
  .stage { width: 160vw; left: -60vw; }
  .tag.t-note { width: 13%; }
}

@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .top .wrap { height: 56px; }
  .top nav { gap: 18px; }
  .top nav a.wide { display: none; }
  .section { padding: 72px 0; }
  .section .intro { font-size: 17px; margin-bottom: 40px; }
  .families section { margin-bottom: 32px; }
  .page { padding-top: 44px; padding-bottom: 80px; }
  .center { padding-top: 72px; padding-bottom: 88px; }
  th, td { padding-right: 8px; }
  .foot .wrap { flex-direction: column; }
}

@media (forced-colors: active) {
  .guide { background: CanvasText; }
  .button { border: 1px solid ButtonText; }
}