/*
  Keep Clear website.
  Layout: one calm column. The home page opens with words on the left and the app on the right, over
  a line that rises like an urge and settles flat; the legal pages are a narrow reading column.
  Colours and type come from the app (src/theme.ts), so the site and the app feel like one thing.
*/

@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colour */
  --paper: #f8f1e7;
  --paper-glow: #fbeee2;
  --card: #fffdf9;
  --ink: #3a352d;
  --ink-soft: #6f6656;
  --ink-muted: #766c5b;
  --line: rgba(58, 53, 45, 0.11);
  --sage: #56705e;
  --sage-ink: #f7f2e9;
  --sage-text: #34402f;
  --sage-wash: #eef1e9;
  --tan: #b98c5e;
  --tan-text: #8a6237;
  --phone-edge: #2e2b27;
  --shadow: rgba(60, 50, 38, 0.18);

  /* type */
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --step--1: 0.9375rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.65rem, 1.2rem + 1.5vw, 2.3rem);
  --step-3: clamp(2.2rem, 1.55rem + 2.6vw, 3.25rem);
  --step-4: clamp(2.5rem, 1.3rem + 4.6vw, 4.4rem);

  /* space */
  --measure: 40rem;
  --wide: 70rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1b201d;
    --paper-glow: #222925;
    --card: #252c27;
    --ink: #eee7da;
    --ink-soft: #cbc2b3;
    --ink-muted: #ada493;
    --line: rgba(238, 231, 218, 0.13);
    --sage: #9dbba6;
    --sage-ink: #16201a;
    --sage-text: #d2e2d6;
    --sage-wash: #27312b;
    --tan: #d2a577;
    --tan-text: #e3bd91;
    --phone-edge: #0b0d0c;
    --shadow: rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1b201d;
  --paper-glow: #222925;
  --card: #252c27;
  --ink: #eee7da;
  --ink-soft: #cbc2b3;
  --ink-muted: #ada493;
  --line: rgba(238, 231, 218, 0.13);
  --sage: #9dbba6;
  --sage-ink: #16201a;
  --sage-text: #d2e2d6;
  --sage-wash: #27312b;
  --tan: #d2a577;
  --tan-text: #e3bd91;
  --phone-edge: #0b0d0c;
  --shadow: rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* base */

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

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

body {
  margin: 0;
  min-height: 100vh;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: linear-gradient(180deg, var(--paper-glow) 0, var(--paper) 34rem) no-repeat, var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

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

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

h1 {
  font-size: var(--step-3);
  line-height: 1.08;
  letter-spacing: -0.012em;
}

h2 {
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: -0.006em;
}

h3 {
  font-size: 1.45rem;
  line-height: 1.2;
}

p,
ul,
ol {
  margin: 0;
}

p,
li {
  text-wrap: pretty;
}

a {
  color: var(--sage);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--sage);
  outline-offset: 3px;
  border-radius: 6px;
}

strong {
  font-weight: 600;
}

.tel {
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}

.skip {
  position: absolute;
  left: max(16px, env(safe-area-inset-left, 0px));
  top: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--sage);
  color: var(--sage-ink);
  transform: translateY(-160%);
}

.skip:focus-visible {
  transform: none;
}

/* frame */

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}

.brand img {
  width: 34px;
  height: 34px;
}

.site-nav {
  display: flex;
  gap: 22px;
  font-weight: 500;
  font-size: var(--step--1);
}

.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* home: hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 40px 56px;
  padding-block: clamp(28px, 6vw, 72px) 0;
}

.hero-copy {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.hero h1 {
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.hero h1 span {
  display: block;
}

.lede {
  max-width: 34rem;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
}

.availability {
  display: grid;
  gap: 2px;
  padding-top: 4px;
}

.availability strong {
  color: var(--ink);
}

.availability span {
  color: var(--ink-muted);
}

.phone {
  margin: 0;
  width: 100%;
  max-width: 300px;
  justify-self: center;
  container-type: inline-size;
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  border: 2.8cqi solid var(--phone-edge);
  border-radius: 15cqi;
  background: var(--paper);
  box-shadow: 0 28px 56px -24px var(--shadow), 0 2px 8px -2px var(--shadow);
}

/* home: the line under the hero rises like an urge, peaks and settles flat */

.wave {
  position: relative;
  margin-block: clamp(36px, 7vw, 80px) clamp(40px, 7vw, 88px);
}

.wave svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.wave path {
  fill: none;
  stroke: var(--sage);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* The path ends at x 1184 of 1200 and y 160 (of a 34 to 166 viewBox), under this dot. */
.wave-dot {
  position: absolute;
  right: 0;
  top: calc(95.45% - 8px);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tan);
}

@media (prefers-reduced-motion: no-preference) {
  .wave svg {
    clip-path: inset(-12px 100% -12px -12px);
    animation: wave-draw 2.6s cubic-bezier(0.45, 0.05, 0.3, 1) 0.25s forwards;
  }

  .wave-dot {
    opacity: 0;
    transform: scale(0.3);
    animation: wave-land 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) 2.7s forwards;
  }
}

@keyframes wave-draw {
  to {
    clip-path: inset(-12px -12px -12px -12px);
  }
}

@keyframes wave-land {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* home: inside the app */

.section {
  display: grid;
  gap: 32px;
  padding-block: 8px clamp(48px, 8vw, 96px);
}

.section-head {
  display: grid;
  gap: 10px;
  max-width: var(--measure);
}

.section-head p {
  color: var(--ink-soft);
}

.tour {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 40px;
  list-style: none;
  padding: 0;
}

.tour-item {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 24px;
  min-width: 0;
}

.tour-item .phone {
  max-width: 270px;
  justify-self: start;
}

.tour-text {
  display: grid;
  gap: 8px;
  max-width: 21rem;
  min-width: 0;
}

.tour-text p {
  color: var(--ink-soft);
}

/* home: label on the left, words on the right */

.splits {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  padding-block: 0 clamp(48px, 8vw, 96px);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
  gap: 12px 56px;
  align-items: baseline;
}

.split-body {
  display: grid;
  gap: 12px;
  max-width: var(--measure);
  min-width: 0;
}

.split-body p {
  color: var(--ink-soft);
}

.prices {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  padding-block: 4px;
}

.price {
  display: grid;
}

.price-amount {
  font-family: var(--serif);
  font-size: var(--step-2);
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}

.price-note {
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* crisis lines */

.help {
  display: grid;
  gap: 24px;
  padding: clamp(24px, 4vw, 44px);
  border-radius: 28px;
  background: var(--sage-wash);
  color: var(--sage-text);
}

.help h2 {
  color: var(--sage-text);
}

.help-lines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 32px;
  list-style: none;
  padding: 0;
}

.help-line {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

.help-name {
  font-weight: 600;
}

.help-number {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.2rem);
  line-height: 1.15;
  color: var(--sage-text);
  text-decoration: none;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

a.help-number:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.help-line p {
  font-size: var(--step--1);
  opacity: 0.88;
}

.help-line a:not(.help-number) {
  color: var(--sage-text);
}

/* reading pages: privacy, terms, support */

.page {
  max-width: var(--measure);
  margin-inline: auto;
  padding-block: clamp(24px, 5vw, 56px) 0;
  display: grid;
  gap: 40px;
}

.page-head {
  display: grid;
  gap: 12px;
}

.updated {
  color: var(--ink-muted);
  font-size: var(--step--1);
}

.page-head .lede {
  max-width: none;
}

.short {
  display: grid;
  gap: 12px;
  padding: 24px 28px;
  border-radius: 22px;
  background: var(--sage-wash);
  color: var(--sage-text);
}

.short h2 {
  font-size: 1.35rem;
  color: var(--sage-text);
}

.short ul {
  display: grid;
  gap: 8px;
  padding-left: 1.2em;
}

.short li::marker {
  color: var(--sage);
}

.prose {
  display: grid;
  gap: 40px;
}

.prose section {
  display: grid;
  gap: 14px;
}

.prose h2 {
  font-size: 1.65rem;
}

.prose h3 {
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.4;
  padding-top: 6px;
}

.prose ul,
.prose ol {
  display: grid;
  gap: 8px;
  padding-left: 1.3em;
}

.prose li::marker {
  color: var(--tan);
}

.prose .note {
  color: var(--ink-muted);
  font-size: var(--step--1);
}

.email {
  display: inline-block;
  font-family: var(--serif);
  font-size: var(--step-2);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* support: questions */

.faq {
  display: grid;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.4;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.faq-body {
  display: grid;
  gap: 12px;
  padding-bottom: 22px;
  color: var(--ink-soft);
}

.faq-body ol,
.faq-body ul {
  display: grid;
  gap: 6px;
  padding-left: 1.3em;
}

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

/* footer */

.site-footer {
  display: grid;
  gap: 18px;
  margin-top: clamp(56px, 9vw, 104px);
  padding-block: 32px 48px;
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: var(--step--1);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  list-style: none;
  padding: 0;
  font-weight: 500;
}

.footer-links a {
  color: var(--ink-soft);
}

.footer-help {
  color: var(--ink-soft);
}

.small-print {
  max-width: 46rem;
}

/* narrow screens */

@media (max-width: 860px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero .phone {
    max-width: 270px;
  }

  .tour {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .tour-item {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    grid-template-rows: auto;
    align-items: center;
    gap: 20px;
  }

  .tour-item .phone {
    max-width: 230px;
  }

  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .help-lines {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

@media (max-width: 420px) {
  .site-nav {
    gap: 16px;
  }

  .tour-item {
    gap: 16px;
  }

  .tour-text h3 {
    font-size: 1.25rem;
  }

  .tour-text p {
    font-size: var(--step--1);
  }

  .short {
    padding: 20px;
  }
}