/* Colors and fonts mirror the app's dark theme (Colors.kt, WholeColors.kt, Typography.kt). */
@font-face { font-family: "Roboto Condensed"; src: url(/fonts/roboto_condensed_regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url(/fonts/roboto_condensed_bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Eczar"; src: url(/fonts/eczar_regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Eczar"; src: url(/fonts/eczar_semibold.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg: #0F1512;
  --surface: #1B211E;
  --surface-high: #252B28;
  --outline: #404944;
  --outline-strong: #89938D;
  --text: #DEE4DE;
  --muted: #BFC9C2;
  --primary: #8CD5B4;
  --brand: #04B585;
  --positive: #32EB91;
  --negative: #F4635A;

  /* Fluid sizes scale linearly between a 360px and a 1200px viewport. */
  --gutter: clamp(20px, 4.57px + 4.29vw, 56px);
  --radius-lg: clamp(24px, 20.57px + .952vw, 32px);
  --content: 1088px;

  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: "Roboto Condensed", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 700; text-wrap: balance; }
img, svg { display: block; }
a { color: inherit; }
.money { font-family: "Eczar", serif; }

/* Header */

.top--glow {
  background:
    radial-gradient(circle at 28% 22%, rgba(6, 179, 134, .22), transparent 55%),
    radial-gradient(circle at 78% 82%, rgba(140, 213, 180, .12), transparent 50%);
}
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 13.43px + .714vw, 22px) var(--gutter);
}
.brand {
  display: flex;
  align-items: center;
  gap: clamp(10px, 9.14px + .238vw, 12px);
  text-decoration: none;
  font-size: clamp(18px, 16.29px + .476vw, 22px);
  font-weight: 700;
}
.brand img {
  width: clamp(30px, 27.43px + .714vw, 36px);
  height: auto;
  border-radius: 24%;
}
.site-header nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 8px + 1.667vw, 28px);
  font-size: clamp(15px, 14.14px + .238vw, 17px);
}
.site-header nav a { color: var(--muted); text-decoration: none; }
.site-header nav a:hover { color: var(--text); }
.site-header nav a[aria-current="page"] { color: var(--primary); }
.site-header .pill {
  padding: .5em 1em;
  border: 1px solid var(--outline-strong);
  border-radius: 999px;
  color: var(--text);
  white-space: nowrap;
}
.site-header .pill:hover { border-color: var(--text); }

/* Hero */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* The top and bottom bands belong to the chips, so they never overlap the headline or badge. */
  padding: 184px var(--gutter) 130px;
}
.chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .55em;
  padding: .55em 1.05em .55em .75em;
  border-radius: 999px;
  background: var(--surface-high);
  box-shadow: 0 1em 2.6em rgba(0, 0, 0, .4);
  font-size: clamp(13px, 10.43px + .714vw, 19px);
  white-space: nowrap;
  transform: rotate(var(--tilt));
}
.chip::before, .worth-card__rows li::before {
  content: "";
  flex: none;
  width: .72em;
  height: .72em;
  border-radius: 50%;
  background: var(--dot);
}
.hero h1 {
  position: relative;
  max-width: 10.5em;
  font-size: clamp(46px, 24.57px + 5.952vw, 96px);
  line-height: .98;
  text-shadow: 0 10px 40px rgba(15, 21, 18, .9);
}
.hero__lede {
  position: relative;
  margin-top: .85em;
  color: var(--primary);
  font-size: clamp(19px, 16px + .833vw, 26px);
  text-wrap: balance;
}
.hero__badges {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: clamp(14px, 11.43px + .714vw, 20px);
  /* Clear space around the badge: a quarter of its height, per Google's badge guidelines. */
  padding: 14px;
}
.hero__badges img { height: 56px; width: auto; }

/* Sections */

.section { padding: clamp(48px, 34.29px + 3.81vw, 80px) var(--gutter); }
.section--banner { padding-top: 0; padding-bottom: clamp(28px, 16px + 3.33vw, 56px); }
.section--page { padding-top: clamp(32px, 20.57px + 3.17vw, 64px); padding-bottom: clamp(64px, 50.29px + 3.81vw, 96px); }

.split, .faq, .banner, .prose, .site-footer > * {
  max-width: var(--content);
  margin-left: auto;
  margin-right: auto;
}
.split, .faq { display: flex; flex-direction: column; gap: 40px 72px; }
.split h2 { font-size: clamp(36px, 27.43px + 2.381vw, 56px); line-height: 1; }
.lede {
  margin-top: .95em;
  max-width: 26em;
  color: var(--muted);
  font-size: clamp(17px, 15.29px + .476vw, 21px);
  line-height: 1.45;
}
.features {
  display: grid;
  gap: 24px 32px;
  margin-top: clamp(28px, 22.86px + 1.43vw, 40px);
}
.features h3 { font-size: clamp(18px, 17.14px + .238vw, 20px); }
.features p {
  margin-top: 4px;
  color: var(--muted);
  font-size: clamp(16px, 15.57px + .119vw, 17px);
  line-height: 1.4;
}

.worth-card {
  width: 100%;
  max-width: 560px;
  padding: clamp(22px, 16.86px + 1.43vw, 34px);
  border: 2px solid var(--surface-high);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .45);
}
.worth-card__label {
  color: var(--muted);
  font-size: clamp(13px, 12.57px + .119vw, 14px);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.worth-card__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 16px;
  margin-top: 6px;
  padding-bottom: clamp(18px, 16.29px + .476vw, 22px);
  border-bottom: 1px solid var(--outline);
}
.worth-card__total .money { font-size: clamp(38px, 33.71px + 1.19vw, 48px); font-weight: 600; }
.worth-card__delta { color: var(--positive); font-size: clamp(16px, 15.14px + .238vw, 18px); font-weight: 700; }
.worth-card__rows {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 11.14px + .238vw, 14px);
  margin: clamp(18px, 16.29px + .476vw, 22px) 0 0;
  padding: 0;
  list-style: none;
  font-size: clamp(17px, 16.14px + .238vw, 19px);
}
.worth-card__rows li { display: flex; align-items: center; gap: 12px; }
.worth-card__rows li > :first-child { flex: 1; }
.worth-card__rows .money { font-size: 1.06em; }
.worth-card__rows .money--negative { color: var(--negative); }

.banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px clamp(20px, 17.43px + .714vw, 26px);
  padding: clamp(28px, 21.14px + 1.905vw, 44px) clamp(24px, 12px + 3.33vw, 52px);
  border-radius: var(--radius-lg);
  background: var(--brand);
  color: #fff;
}
.banner svg { flex: none; width: clamp(34px, 30px + 1.19vw, 44px); aspect-ratio: 100 / 125; }
.banner h2 { font-size: clamp(26px, 22.57px + .952vw, 34px); line-height: 1.05; }
.banner p { margin-top: .4em; font-size: clamp(16px, 14.71px + .357vw, 19px); line-height: 1.4; }
.banner__button {
  align-self: stretch;
  padding: .85em 1.5em;
  border-radius: 999px;
  background: var(--bg);
  font-size: clamp(17px, 16.57px + .119vw, 18px);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

/* FAQ */

.faq { gap: 28px 64px; }
.faq h1 { font-size: clamp(46px, 34.86px + 3.095vw, 72px); line-height: .95; }
.faq__intro p {
  margin-top: .9em;
  color: var(--muted);
  font-size: clamp(17px, 16.14px + .238vw, 19px);
  line-height: 1.45;
}
.faq__intro a, .faq-item__answer a, .prose a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.faq-item__answer a:hover, .prose a:hover { color: var(--positive); }
.faq__list {
  --q-size: clamp(19px, 17.29px + .476vw, 23px);
  --q-gap: clamp(12px, 9.43px + .714vw, 18px);
  min-width: 0;
  border-top: 1px solid var(--outline);
  counter-reset: question;
}
.faq-item { border-bottom: 1px solid var(--outline); }
.faq-item__summary {
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr) 1em;
  column-gap: var(--q-gap);
  align-items: baseline;
  padding: clamp(18px, 16.29px + .476vw, 22px) 0;
  font-size: var(--q-size);
  cursor: pointer;
  list-style: none;
  counter-increment: question;
}
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__summary::before {
  content: counter(question, decimal-leading-zero);
  color: var(--primary);
  font-family: "Eczar", serif;
  font-size: .78em;
}
.faq-item__summary::after { content: "+"; color: var(--primary); text-align: center; }
.faq-item[open] > .faq-item__summary::after { content: "−"; }
.faq-item__summary h2 { font-size: inherit; font-weight: 400; line-height: 1.3; text-wrap: pretty; }
.faq-item__answer {
  max-width: calc(36em + var(--q-size) * 1.6 + var(--q-gap));
  padding: 0 calc(var(--q-size) + var(--q-gap)) clamp(14px, 11.43px + .714vw, 20px) calc(var(--q-size) * 1.6 + var(--q-gap));
  color: var(--muted);
  font-size: clamp(16.5px, 15.86px + .179vw, 18px);
  line-height: 1.55;
}
.faq-item__answer p { margin-bottom: .75em; text-wrap: pretty; }
.faq-item__answer h3 { margin: 1.35em 0 .25em; color: var(--text); font-size: inherit; }
.faq-item__answer > :first-child { margin-top: 0; }
.faq-item__answer strong, .prose strong { color: var(--text); }

/* Lists in FAQ answers and legal pages */

.faq-item__answer :is(ol, ul), .prose :is(ol, ul) {
  display: flex;
  flex-direction: column;
  gap: .45em;
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.faq-item__answer li, .prose li { position: relative; padding-left: 1.5em; }
.faq-item__answer li > p, .prose li > p { margin: 0; }
.faq-item__answer li::before, .prose li::before { position: absolute; left: 0; }
.faq-item__answer ol > li::before, .prose ol > li::before {
  content: counter(step);
  counter-increment: step;
  color: var(--primary);
  font-family: "Eczar", serif;
  font-size: .92em;
  font-weight: 600;
}
.faq-item__answer ul > li::before, .prose ul > li::before {
  content: "";
  top: .7em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
}

/* Legal pages */

.prose__content {
  max-width: 33em;
  color: var(--muted);
  font-size: clamp(17px, 16.57px + .119vw, 18px);
  line-height: 1.65;
}
.prose h1 { max-width: 13em; font-size: clamp(40px, 29.71px + 2.857vw, 64px); line-height: 1; }
.prose__content > p:first-child {
  margin: 1em 0 2em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid var(--surface-high);
  color: var(--primary);
  font-weight: 700;
}
.prose__content > p:first-child strong { color: inherit; }
.prose p { margin-bottom: 1em; text-wrap: pretty; }
.prose h2 { margin: 1.8em 0 .5em; color: var(--text); font-size: clamp(24px, 21.43px + .714vw, 30px); line-height: 1.15; }
.prose h3 { margin: 1.5em 0 .35em; color: var(--primary); font-size: clamp(19px, 18.57px + .119vw, 20px); line-height: 1.25; }
.prose :is(ol, ul) { gap: .5em; margin-bottom: 1.2em; }

/* Footer */

.site-footer {
  padding: clamp(24px, 21.43px + .714vw, 30px) var(--gutter) clamp(28px, 24.57px + .952vw, 36px);
  border-top: 1px solid var(--surface-high);
  color: var(--outline-strong);
  font-size: clamp(14px, 13.57px + .119vw, 15px);
}
.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px 32px;
}
.site-footer nav { display: flex; gap: 20px; }
.site-footer nav a { color: var(--muted); text-decoration: none; }
.site-footer nav a:hover { color: var(--text); text-decoration: underline; }
.site-footer__legal { margin-top: 10px; font-size: 13px; }

/* The one breakpoint: two-column areas sit side by side from here up. */

@media (min-width: 960px) {
  .split, .faq { flex-direction: row; }
  .split { align-items: center; }
  .split__text { flex: 556 1 0; min-width: 0; }
  .worth-card { flex: 460 1 0; min-width: 400px; }
  .features { grid-template-columns: 1fr 1fr; }
  .faq { align-items: flex-start; }
  .faq__intro { flex: 340 1 0; }
  .faq__list { flex: 684 1 0; }
  .banner { flex-direction: row; align-items: center; }
  .banner__text { flex: 1; }
  .banner__button { align-self: auto; }
}

/* Account deletion */

[hidden] { display: none !important; }
.account { margin-top: 2em; padding-top: 1.5em; border-top: 1px solid var(--surface-high); }
.account p { margin-bottom: 1em; }
.account__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.account__button {
  padding: .7em 1.4em;
  border: 1px solid var(--outline-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.account__button:hover { border-color: var(--text); }
.account__button--danger { border-color: var(--negative); background: var(--negative); color: var(--bg); font-weight: 700; }
.account__button--danger:hover { border-color: var(--negative); filter: brightness(1.1); }
.account__button:disabled { opacity: .6; cursor: default; }
.account__message:not(:empty) { margin-top: 1.5em; color: var(--primary); font-weight: 700; }