/* Me Then You, on the web.
 *
 * The same law as the app (playbook 08): information is PRINT, not cards.
 * Engraved labels, hairlines, records that read like a bank statement. There
 * is no rounded cream card anywhere on this site, because that is the thing
 * that makes a page look generated rather than made.
 *
 * The two brand colours are the wordmark's own: a dark warm brown and a pale
 * duck-egg blue. The brown is ink, the blue is ground. Neither is ever used to
 * mean a STATE.
 */

:root {
  --paper:      #FFFFFF;
  --paper-sunk: #F5F5F3;
  --wash:       #EDF3F3;   /* the wordmark blue, calmed enough to sit under text */
  --ink:        #1A1917;
  --ink2:       #56534B;
  --ink3:       #6F6B61;
  --rule:       #E7E7E3;
  --rule-strong:#C9C9C3;
  --brand:      #3C2418;   /* the wordmark brown */
  --brand-ink:  #33200F;   /* the readable version, for text */
  --brand-line: #8A6A55;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --column: 660px;
  --gutter: 22px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #131312;
    --paper-sunk: #1D1D1B;
    --wash:       #1A2322;
    --ink:        #F3F1EA;
    --ink2:       #ADA99E;
    --ink3:       #97917F;
    --rule:       #2C2C29;
    --rule-strong:#46453F;
    --brand:      #D8E4E4;
    --brand-ink:  #CBDCDC;
    --brand-line: #6E5B4C;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: var(--column);
  margin: 0 auto;
  padding: 0 var(--gutter) 90px;
}

/* --- the engraved label, the app's own device ------------------------- */
.eng {
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3);
  margin: 0 0 10px;
}

h1 {
  font: 400 clamp(34px, 8vw, 52px)/1.08 var(--serif);
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
h2 {
  font: 400 clamp(24px, 5vw, 31px)/1.15 var(--serif);
  margin: 0 0 14px;
}
h3 { font: 600 17px/1.3 var(--sans); margin: 0 0 8px; }

p { margin: 0 0 16px; color: var(--ink2); }
p.lead { font-size: 19px; color: var(--ink2); }
strong { color: var(--ink); font-weight: 600; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

a { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* --- the masthead ------------------------------------------------------ */
header.top {
  border-bottom: 1px solid var(--rule);
  margin-bottom: 44px;
}
header.top .inner {
  max-width: var(--column);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  gap: 18px;
}
.brandmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  font: 400 19px/1 var(--serif);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brandmark img {
  width: 34px; height: 34px;
  border-radius: 7px;
  display: block;
}
.brandmark em { font-style: italic; font-size: 0.72em; color: var(--ink3); }
header.top nav { margin-left: auto; display: flex; gap: 6px; }
/* 44px, the same floor the app holds itself to and has a check behind. A row
   of 26px-tall links is fine with a mouse and a lottery with a thumb, and this
   site is read on a phone more than anywhere else. The padding does the work,
   so nothing looks bigger; it is just hittable. */
header.top nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  font: 500 14px/1 var(--sans);
  color: var(--ink2);
  text-decoration: none;
}
header.top nav a:hover { color: var(--ink); }

/* --- a record: label above, value below, hairline under ---------------- */
.rec {
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}
.rec .k {
  font: 400 13.5px/1.3 var(--sans);
  color: var(--ink3);
  margin: 0 0 2px;
}
.rec .v {
  font: 500 17px/1.35 var(--sans);
  color: var(--ink);
  margin: 0;
}
.rec .v.blank { color: var(--ink3); font-weight: 400; font-style: italic; }

/* --- the one instrument on a page, and never more than one ------------ */
.plate {
  background: var(--wash);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 22px;
  margin: 0 0 26px;
}

/* --- buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  font: 600 16px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.btn:disabled { background: var(--paper-sunk); color: var(--ink3); cursor: default; }
.btn.quiet {
  background: transparent;
  color: var(--ink2);
  border: 1px solid var(--rule-strong);
}
.btn.wide { width: 100%; }

.note {
  font: 400 13px/1.5 var(--sans);
  color: var(--ink3);
  text-align: center;
  margin: 12px 0 0;
}

/* --- a list of choices, as rows, never as a stack of boxes ------------- */
.choices { margin: 22px 0 0; border-top: 1px solid var(--rule); }
.choice {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 14px 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  font: 400 17px/1.35 var(--sans);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.choice .ring {
  flex: 0 0 auto;
  width: 19px; height: 19px;
  border: 1.5px solid var(--rule-strong);
  border-radius: 50%;
  margin-left: auto;
}
.choice[aria-pressed="true"] .ring {
  border-color: var(--brand-ink);
  background:
    radial-gradient(circle at 50% 50%, var(--brand-ink) 0 5px, transparent 5px);
}
.choice:hover { color: var(--brand-ink); }

/* --- the footer -------------------------------------------------------- */
footer.foot {
  border-top: 1px solid var(--rule);
  margin-top: 70px;
  padding: 26px var(--gutter) 60px;
}
footer.foot .inner {
  max-width: var(--column);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  align-items: center;
}
footer.foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 400 14px/1.6 var(--sans);
  color: var(--ink2);
  text-decoration: none;
}
footer.foot a:hover { text-decoration: underline; }
footer.foot .said { font: 400 13px/1.6 var(--sans); color: var(--ink3); width: 100%; margin-top: 6px; }

/* --- long-form pages (privacy, support) ------------------------------- */
.prose h2 { margin-top: 38px; }
.prose ul { margin: 0 0 16px; padding-left: 20px; color: var(--ink2); }
.prose li { margin-bottom: 8px; }
.prose code { font: 400 14px var(--mono); background: var(--paper-sunk); padding: 2px 5px; border-radius: 3px; }
.prose em { color: var(--ink3); }

/* --- the quiz ---------------------------------------------------------- */
.dots { display: flex; gap: 6px; justify-content: center; margin: 4px 0 22px; }
.dots i { width: 16px; height: 2px; background: var(--rule-strong); border-radius: 1px; }
.dots i.on { background: var(--ink); }

.field {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  background: var(--paper-sunk);
  border: 1px solid transparent;
  border-radius: 6px;
  font: 400 17px var(--sans);
  color: var(--ink);
  margin-bottom: 14px;
}
.field:focus { outline: none; border-color: var(--brand-line); }

.score {
  font: 700 clamp(48px, 14vw, 76px)/1 var(--mono);
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.handover { text-align: center; padding: 30px 0; }

@media (max-width: 480px) {
  header.top nav { gap: 14px; }
  header.top nav a { font-size: 13px; }
}

/* The wordmark at the top of the home page. Big enough to be the thing you
   recognise on the App Store, and it carries the only rounded corner above
   the fold, because it is a mark and not a card. */
.hero-mark {
  width: 112px; height: 112px;
  border-radius: 22px;
  display: block;
  margin: 8px 0 26px;
}