/* Mental Math Crow · site styles */
:root {
  --purple: #561ED8;
  --purple-deep: #4518B0;
  --ink: #14132F;
  --ink-soft: #3A3852;
  --muted: #5E5A78;
  --yellow: #FDCA5B;
  --paper: #F5F3FB;
  --lilac: #DCD0FB;
  --lilac-soft: #EFE9FD;
  --sky: #CFC6FD;
  --line: #E8E5F2;
  --green: #1F7A4D;
  --red: #B42318;
  --white: #FFFFFF;

  --display: 'Space Grotesk', 'Avenir Next', 'Segoe UI', sans-serif;
  --text: 'Figtree', 'Segoe UI', system-ui, sans-serif;

  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 48px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--purple); text-underline-offset: 3px; }
a:hover { color: var(--purple-deep); }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 10px; z-index: 10; }
.skip:focus { top: 16px; color: var(--white); }

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

h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0; }
h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 700; }
h3 { font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; font-weight: 700; }
p { margin: 0; }
.lede { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.55; color: var(--ink-soft); max-width: 34em; }

/* ---------- top bar ---------- */
.bar { position: relative; z-index: 2; }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; padding-bottom: 22px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { width: 40px; height: 40px; border-radius: 11px; }
.brand span { font-family: var(--display); font-size: 19px; letter-spacing: -0.01em; }
.brand b { font-weight: 700; }
.brand span > span { font-weight: 500; }
.bar nav { display: flex; gap: 6px; }
.bar nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px; padding: 10px 14px; border-radius: 12px; }
.bar nav a:hover { background: rgba(255,255,255,0.55); color: var(--ink); }
.bar nav a[aria-current="page"] { background: rgba(255,255,255,0.7); }

/* ---------- store buttons ---------- */
.stores { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.store {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 20px 0 16px; border-radius: 16px;
  background: var(--ink); color: var(--white); text-decoration: none;
}
.store:hover { background: #27254A; color: var(--white); }
.store svg { flex-shrink: 0; }
.store small { display: block; font-size: 12px; line-height: 1.1; opacity: 0.8; }
.store strong { display: block; font-family: var(--display); font-size: 18px; line-height: 1.15; font-weight: 700; }
.free { font-size: 15px; color: var(--ink-soft); }

/* ---------- hero ---------- */
/* A rounded card inside the page margins rather than a full-width band, so it can stay compact. */
.hero {
  position: relative;
  background: var(--sky);
  overflow: hidden;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin: clamp(8px, 1.5vw, 20px) auto 0;
  border-radius: clamp(24px, 3vw, 36px);
}
@media (max-width: 1240px) {
  .hero { margin-left: clamp(8px, 1.5vw, 20px); margin-right: clamp(8px, 1.5vw, 20px); }
}
/* Inside the card the content needs less side padding on phones, or the text column gets narrow. */
@media (max-width: 620px) {
  .hero .wrap { padding-left: 16px; padding-right: 16px; }
  /* Both store buttons on one line on small phones. */
  .hero .stores { gap: 8px; }
  .hero .store { padding: 0 14px 0 12px; gap: 8px; }
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding-top: clamp(16px, 3vw, 40px);
  padding-bottom: 0;
  position: relative;
  z-index: 1;
}
/* A strip of the scene from 18% to 76% of the artwork: every cloud and the whole antenna, nothing cut
   off at the top. Its upper part is plain sky in the card's own colour (the antenna stands on the right,
   under the empty space below the card), so it tucks far under the content; the wire and the sun start
   below the text. */
.scene {
  position: relative;
  margin-top: calc(-1 * clamp(24px, 11vw, 160px));
  aspect-ratio: 1430 / 638;
  overflow: hidden;
}
.scene img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: auto; max-width: none;
  /* Mirrored, so the antenna and chimneys stand on the right, clear of the headline and buttons. */
  transform: translateY(-18%) scaleX(-1);
}
@media (max-width: 900px) {
  .scene { margin-top: -40px; }
}
.hero h1 {
  font-size: clamp(48px, 6.2vw, 80px);
  line-height: 0.94;
  letter-spacing: -0.045em;
  font-weight: 700;
  margin-bottom: 24px;
}
.hero h1 .route { display: block; }
.hero .lede { margin-bottom: 30px; color: var(--ink); }
.hero .free { margin-top: 14px; }

/* ---------- the try-it card ---------- */
.try {
  background: var(--white);
  border-radius: 28px;
  padding: 26px 26px 24px;
  box-shadow: 0 24px 60px rgba(39, 15, 110, 0.18);
  position: relative;
}
.try-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.try-head p { font-size: 15px; font-weight: 600; color: var(--muted); }
.try-q {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(52px, 6vw, 68px); line-height: 1.05; letter-spacing: -0.03em;
  margin: 6px 0 18px;
}
.try form { display: flex; gap: 10px; }
.try input {
  flex: 1; min-width: 0; height: 60px; border-radius: 16px;
  border: 2px solid var(--ink); padding: 0 18px;
  font-family: var(--display); font-size: 26px; font-weight: 700; color: var(--ink);
  background: var(--white);
}
.try input::placeholder { color: #75718E; font-weight: 500; font-size: 18px; font-family: var(--text); }
.try input:focus-visible { outline: 3px solid var(--lilac); outline-offset: 0; border-color: var(--purple); border-radius: 16px; }
.btn {
  height: 60px; padding: 0 24px; border-radius: 16px; border: 0; cursor: pointer;
  background: var(--purple); color: var(--white);
  font-family: var(--text); font-size: 17px; font-weight: 700;
}
.btn:hover { background: var(--purple-deep); }
.btn.quiet { background: var(--lilac-soft); color: var(--ink); height: 48px; font-size: 16px; }
.btn.quiet:hover { background: var(--lilac); }

.result { margin-top: 18px; display: grid; gap: 10px; }
.result[hidden] { display: none; }
.verdict { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 22px; font-weight: 700; }
.verdict .dot { width: 28px; height: 28px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.verdict.ok .dot { background: var(--green); }
.verdict.no .dot { background: var(--yellow); }
.verdict small { font-family: var(--text); font-size: 15px; font-weight: 500; color: var(--muted); }
.way { border-radius: 18px; padding: 14px 16px; }
.way h3 { font-family: var(--text); font-size: 14px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.way p { font-family: var(--display); font-size: 18px; line-height: 1.5; font-weight: 500; }
.way.long { background: var(--paper); }
.way.fast { background: var(--ink); color: var(--white); display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 8px; align-items: center; }
.way.fast h3 { color: var(--yellow); }
.way.fast p { color: var(--white); font-weight: 700; font-size: 20px; }
.way.fast .why { font-family: var(--text); font-size: 14px; font-weight: 500; color: #BDB8DA; margin-top: 4px; }
.way.fast img { width: 84px; height: 84px; }
.result .again { justify-self: start; }

@media (prefers-reduced-motion: no-preference) {
  .result:not([hidden]) .way { animation: rise 360ms cubic-bezier(.2,.8,.2,1) both; }
  .result:not([hidden]) .way.fast { animation-delay: 220ms; }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- sections ---------- */
section.block { padding: clamp(72px, 9vw, 120px) 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.split > div > h2 { margin-bottom: 18px; }

/* session: mirrors the app's session card */
.session-card {
  background: var(--purple); color: var(--white);
  border-radius: 28px; padding: 26px 24px 24px;
  box-shadow: 0 20px 50px rgba(39, 15, 110, 0.18);
}
.session-card .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.session-card .top h3 { color: var(--white); font-size: 24px; }
.session-card .top p { font-family: var(--display); color: var(--lilac); font-size: 16px; }
.session-card .top img { width: 96px; height: 96px; margin: -18px -8px -18px 0; }
.session-card ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.session-card li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.session-card .n { width: 36px; height: 36px; border-radius: 11px; background: #6A36E0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; }
.session-card li b { display: block; font-size: 17px; font-weight: 600; }
.session-card li span.d { display: block; font-size: 15px; line-height: 1.45; color: var(--lilac); }
.session-card li .t { font-size: 15px; color: var(--lilac); padding-top: 6px; }

/* strategies */
.strategies { background: var(--white); }
.strategies .intro { max-width: 640px; margin-bottom: 44px; }
.strategies .intro h2 { margin-bottom: 16px; }
.strat-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 6vw, 80px); counter-reset: s; }
.strat-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; padding: 16px 0; border-top: 1px solid var(--line); counter-increment: s; }
.strat-list li::before { content: counter(s); grid-row: span 2; font-family: var(--display); font-weight: 700; color: var(--purple); font-size: 17px; line-height: 1.5; }
.strat-list b { font-weight: 700; font-size: 17px; }
.strat-list code { font-family: var(--display); font-size: 16px; color: var(--muted); }
.strategies .note { margin-top: 36px; max-width: 640px; color: var(--ink-soft); }

/* crows */
.crows { text-align: left; }
.crow-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.crow-row img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; }
.crow-row img.locked { filter: grayscale(1); opacity: 0.38; }
.crows .split { align-items: end; }

/* promises */
.promises { background: var(--ink); color: var(--white); }
.promises h2 { color: var(--white); max-width: 14em; margin-bottom: 40px; }
.promise-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.promise-list li { border-top: 3px solid var(--yellow); padding-top: 18px; }
.promise-list b { display: block; font-family: var(--display); font-size: 21px; line-height: 1.25; margin-bottom: 8px; }
.promise-list span { color: #BDB8DA; font-size: 16px; line-height: 1.55; }

/* closing */
.closing { text-align: left; }
.closing .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.closing h2 { margin-bottom: 14px; }
.closing img { width: 180px; height: 180px; background: var(--purple); border-radius: 36px; }

/* ---------- footer ---------- */
footer.foot { border-top: 1px solid var(--line); padding: 36px 0 48px; font-size: 15px; color: var(--muted); }
footer.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; }
footer.foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
footer.foot a { color: var(--ink); font-weight: 600; text-decoration: none; }
footer.foot a:hover { color: var(--purple); text-decoration: underline; }

/* ---------- document pages (help, privacy) ---------- */
.page-head { background: var(--sky); padding-bottom: 56px; }
.page-head h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1; letter-spacing: -0.04em; font-weight: 700; margin: clamp(16px, 4vw, 40px) 0 16px; }
.page-head .lede { color: var(--ink); }
.doc { padding-top: 48px; padding-bottom: 80px; }
.doc > * { max-width: 720px; }
.doc ul + p, .doc table + p { margin-top: 14px; }
.doc h2 { font-size: clamp(26px, 3vw, 32px); margin: 48px 0 14px; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { margin: 28px 0 8px; font-size: 19px; }
.doc p, .doc li { color: var(--ink-soft); }
.doc p + p { margin-top: 12px; }
.doc ul { padding-left: 22px; margin: 10px 0 0; }
.doc li + li { margin-top: 6px; }
.doc .meta { color: var(--muted); font-size: 15px; }
.doc table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 16px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-top: 1px solid var(--line); }
.doc th { font-weight: 700; color: var(--ink); width: 34%; }
.doc td { color: var(--ink-soft); }
.placeholder { background: #FFF4D6; color: #6B4E00; padding: 0 4px; border-radius: 4px; }

.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative;
  font-family: var(--display); font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -9px;
  border-right: 2.5px solid var(--purple); border-bottom: 2.5px solid var(--purple); transform: rotate(45deg);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq details > div { padding: 0 0 20px; }
.faq details > div p + p { margin-top: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .faq summary::after { transition: transform 160ms ease; }
}
.contact { margin-top: 56px; background: var(--white); border-radius: 24px; padding: 26px; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: center; }
.contact img { width: 72px; height: 72px; background: var(--purple); border-radius: 18px; }
.contact h2 { margin: 0 0 4px; font-size: 22px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero-grid, .split { grid-template-columns: minmax(0, 1fr); }
  .promise-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crow-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .bar nav a { padding: 10px 10px; font-size: 15px; }
  .brand span { font-size: 17px; }
  .try { padding: 22px 18px 18px; border-radius: 24px; }
  .try form { flex-direction: column; }
  .try input { flex: none; }
  .try .btn { width: 100%; }
  .strat-list { grid-template-columns: minmax(0, 1fr); }
  .promise-list { grid-template-columns: minmax(0, 1fr); }
  .closing .wrap { grid-template-columns: minmax(0, 1fr); }
  .closing img { width: 120px; height: 120px; border-radius: 28px; }
  .way.fast { grid-template-columns: minmax(0, 1fr) 64px; }
  .way.fast img { width: 64px; height: 64px; }
}
@media (max-width: 420px) {
  .brand span { display: none; }
}
.try-head h2 { font-family: var(--text); font-size: 17px; letter-spacing: 0; font-weight: 700; }
.try form[hidden] { display: none; }
.way.fast img { background: var(--purple); border-radius: 18px; }

/* The hero is a card with its own rounded bottom, so the first section simply follows it. */
section.block.lift { padding-top: clamp(56px, 7vw, 96px); }