/* Molu, molu.io. One stylesheet for every page, so a second page costs no
   extra request after the first.

   Two colours are darkened from the brief because they failed WCAG AA and the
   brief also asks for Lighthouse accessibility above 95, which is not reachable
   with them. Muted measured 4.13:1 on paper and 3.78:1 on card, accent measured
   4.26:1 and 3.90:1, against the 4.5:1 that normal text requires. The brand
   values are kept for the mark and for hairlines, where contrast rules do not
   apply. The difference is not visible side by side. */

:root {
  --bg: #faf8f4;
  --ink: #1c1c1c;
  --body: #3a3a3a;
  --card: #f1eee7;

  --muted: #7c7873;        /* brand value, non-text use */
  --muted-text: #6e6b66;   /* 5.00 on paper, 4.58 on card */
  --accent: #c8502e;       /* brand value, the mark */
  --accent-text: #b6492a;  /* 4.98 on paper, 4.56 on card */

  --line: #e4ded2;

  --serif: "Cambria", "Georgia", serif;
  --sans: "Calibri", system-ui, sans-serif;

  --measure: 34rem;
  --shell: 46rem;
}

* { 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(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 1.5rem;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

/* header */

header { padding: 1.5rem 0; }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.375rem;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

nav.top {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9375rem;
}

nav.top a {
  color: var(--muted-text);
  text-decoration: none;
}

nav.top a:hover,
nav.top a[aria-current="page"] { color: var(--ink); }

/* main and footer */

main { flex: 1 0 auto; }

footer {
  padding: 3rem 0 2rem;
  font-size: 0.875rem;
  color: var(--muted-text);
}

/* type */

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 400;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.875rem, 5vw, 2.625rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  max-width: 20ch;
}

h2 {
  font-size: clamp(1.375rem, 3.4vw, 1.75rem);
  line-height: 1.25;
  margin: 0 0 1rem;
  max-width: 24ch;
}

h3 {
  font-size: 1.125rem;
  margin: 2.5rem 0 0.75rem;
}

p { margin: 0 0 1.25rem; max-width: var(--measure); }

.kicker {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 0.75rem;
}

.muted { color: var(--muted-text); }

.note {
  font-size: 0.9375rem;
  color: var(--muted-text);
}

/* home */

.home {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.75rem;
  padding: 3rem 1.5rem;
}

.home .mark {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--accent);
}

.home h1 {
  font-size: clamp(2.75rem, 9vw, 4rem);
  letter-spacing: -0.015em;
  line-height: 1;
  margin: 0;
  max-width: none;
}

.home .line {
  font-family: var(--serif);
  color: var(--ink);
  font-size: clamp(1.125rem, 3.4vw, 1.375rem);
  line-height: 1.45;
  max-width: 32ch;
  margin: 0;
}

.home .soon {
  color: var(--accent-text);
  font-size: 1rem;
  letter-spacing: 0.02em;
  margin: 0;
}

.quiet-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.9375rem;
}

.quiet-links a {
  color: var(--muted-text);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}

.quiet-links a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent-text);
}

/* sections */

section { padding: 3rem 0; }

.anchors {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.9375rem;
  padding: 1rem 0 0;
  border-top: 1px solid var(--line);
}

.anchors a { color: var(--muted-text); text-decoration: none; }
.anchors a:hover { color: var(--ink); }

.closing {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent-text);
  font-size: 1.375rem;
  margin-top: 2rem;
}

/* the phone */

.phone {
  width: 100%;
  max-width: 21rem;
  margin: 2rem 0;
  border: 1px solid var(--ink);
  border-radius: 1.75rem;
  padding: 1.25rem 0.875rem;
  background: var(--bg);
}

.thread {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stamp {
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted-text);
  margin: 0.75rem 0 0.25rem;
}

.bubble {
  max-width: 85%;
  padding: 0.625rem 0.875rem;
  border-radius: 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.from-molu {
  align-self: flex-start;
  background: var(--card);
  color: var(--ink);
  border-bottom-left-radius: 0.3125rem;
}

.from-you {
  align-self: flex-end;
  background: var(--ink);
  color: var(--bg);
  border-bottom-right-radius: 0.3125rem;
}

.bubble a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  padding: 0.25rem 0;
}

/* the example list */

.examples {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  columns: 2;
  column-gap: 2.5rem;
}

.examples li {
  break-inside: avoid;
  margin: 0 0 0.875rem;
  padding-left: 1rem;
  position: relative;
  font-size: 0.9375rem;
}

.examples li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 0.375rem;
  height: 1px;
  background: var(--muted);
}

@media (max-width: 34rem) {
  .examples { columns: 1; }
}

/* table */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: 1.25rem 0 0.75rem;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.75rem 0.75rem 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

th {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* form */

form { max-width: 24rem; margin-top: 1.75rem; }

.field { margin-bottom: 1.25rem; }

label {
  display: block;
  font-size: 0.9375rem;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

input[type="email"],
select {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--muted-text);
  border-radius: 0.25rem;
  padding: 0.6rem 0.7rem;
}

.consent {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  font-size: 0.875rem;
  color: var(--body);
  margin-bottom: 1.5rem;
}

.consent input { margin-top: 0.25rem; flex: none; }
.consent label { font-size: 0.875rem; color: var(--body); margin: 0; }

button {
  font-family: var(--sans);
  font-size: 0.9375rem;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 0.25rem;
  padding: 0.6rem 1.5rem;
  cursor: pointer;
}

button:hover { background: transparent; color: var(--ink); }

.error {
  color: var(--accent-text);
  font-size: 0.875rem;
  margin: 0.4rem 0 0;
}

.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* overlay */

dialog {
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--bg);
  color: var(--body);
  max-width: 34rem;
  width: calc(100% - 2rem);
  padding: 1.75rem;
}

dialog::backdrop { background: rgba(28, 28, 28, 0.35); }

.close {
  background: none;
  border: 0;
  color: var(--muted-text);
  padding: 0.25rem;
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: underline;
}

.close:hover { background: none; color: var(--ink); }

/* On a phone the four columns squeeze the last one to nothing, so each insurer
   becomes a small stacked block with its own labels. Checked at 375px, where
   the squeezed version cut the recommendation off entirely. */
@media (max-width: 34rem) {
  table, tbody, tr, th, td { display: block; width: 100%; }

  thead { position: absolute; left: -9999px; }

  tr {
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
  }

  tr th[scope="row"] {
    border: 0;
    padding: 0 0 0.5rem;
    font-size: 0.9375rem;
    text-transform: none;
    letter-spacing: 0;
  }

  td {
    border: 0;
    padding: 0 0 0.375rem;
  }

  td::before {
    content: attr(data-label) ": ";
    color: var(--muted-text);
  }
}