/*
 * TrueWit landing — one stylesheet for every page.
 *
 * Built from the Figma export in two sizes: Mobile (402) and Desktop (1440).
 * Mobile is the base; the desktop layout switches on at 1024px. Every number
 * below is taken from that export, so when the design changes, diff the
 * export — not the screenshot.
 *
 * The design is set in Gilroy. It is a commercial face and there are no
 * licensed files for it in this repo, so the stack falls through to Urbanist —
 * the same substitute the Figma HTML export itself renders with. To switch to
 * Gilroy, drop the woff2 files into /assets/fonts/ and add @font-face rules
 * for weights 400, 500, 600, 700 and 800 above :root.
 */

:root {
  --bg: #f5f5f5;
  --surface: #ffffff;
  --glass: rgba(255, 255, 255, 0.6);
  --ink: #31313a;
  --ink-2: #484852;
  --muted: #646470;
  --muted-2: #848590;
  --faint: #a2a3a9;
  --line: #e3e3e4;
  --blue: #0067fb;
  --blue-2: #438cfc;
  --lime: #dce83d;
  --grey-btn: #c5c5c8;
  --green: #69d024;
  --orange: #ff8c00;
  --olive: #b4c422;

  --font: 'Gilroy', 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --header-h: 92px;
  --gutter: 16px;
  --container: 640px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
p,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

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

/* Line breaks that exist in one layout only. */
.br-d {
  display: none;
}

.container {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.icon {
  flex: none;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

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

/* ────────────────────────────── Buttons ────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  font: 600 18px/24px var(--font);
  letter-spacing: 0.18px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    filter 0.2s ease,
    transform 0.2s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn--lime {
  height: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--lime);
  color: var(--ink);
}

.btn--lime:hover {
  filter: brightness(0.95);
}

.btn--text {
  height: 44px;
  padding: 10px;
  border-radius: 8px;
  font-weight: 400;
  color: var(--ink);
}

.btn--text:hover {
  background: rgba(255, 255, 255, 0.7);
}

.btn--xl {
  height: 60px;
  padding: 18px 24px;
  border-radius: 16px;
}

.btn--primary {
  background: var(--blue);
  color: #fff;
}

.btn--primary:hover {
  background: #0059db;
}

.btn--secondary {
  background: var(--grey-btn);
  color: var(--ink);
}

.btn--secondary:hover {
  background: #b9b9bd;
}

.btn--square {
  width: 60px;
  padding: 0;
}

.btn--square .icon {
  width: 32px;
  height: 32px;
}

/* ─────────────────────────────── Header ─────────────────────────────── */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  padding-top: 16px;
}



.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(500px, 100% - var(--gutter) * 2);
  height: 60px;
  margin-inline: auto;
  padding: 8px 8px 8px 14px;
  border-radius: 16px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.navbar__logo img {
  width: 43px;
  height: 36px;
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.navbar__links {
  display: none;
}

main {
  padding-top: var(--header-h);
}

/* ───────────────────────────── Shared bits ───────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 4px 12px;
  border-radius: 16px;
  background: var(--glass);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.display {
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
}

.display .tone,
.headline .tone {
  color: var(--muted-2);
}

.display .tone--dark {
  color: var(--muted);
}

.headline {
  font-size: 36px;
  font-weight: 600;
  line-height: 40px;
  text-align: center;
}

/* The CTA block that closes the about section and the get-started section. */
.cta {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.cta__buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cta__buttons .btn {
  width: 100%;
}

.downloads {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
}

.downloads__count {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 400;
  letter-spacing: 0.18px;
}

.store-chips {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--surface);
}

.store-chips a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  transition: background-color 0.2s ease;
}

.store-chips a:hover {
  background: var(--line);
}

.app-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 100px;
  height: 100px;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--blue) 58.65%, var(--blue-2) 100%);
}

.app-icon img {
  width: 68%;
  height: auto;
}

/* Raster images from the design (scripts/build-images.mjs writes the
   <picture>s): the browser picks AVIF/WebP at the width it needs from srcset,
   and while that loads a 24px preview, inlined as --lqip, stands in blurred.
   The preview only shows under `html.js`, because main.js is what marks the
   picture loaded and fades the real image in. */
.pimg {
  position: relative;
  display: block;
}

.pimg img {
  display: block;
  width: 100%;
  height: auto;
}

.js .pimg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--lqip) center / 100% 100% no-repeat;
  filter: blur(12px);
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.js .pimg img {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.js .pimg.is-loaded img {
  opacity: 1;
}

.js .pimg.is-loaded::before {
  opacity: 0;
}

/* ──────────────────────────────── Hero ──────────────────────────────── */

.hero {
  padding-top: 40px;
  text-align: center;
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 4px 16px 4px 4px;
  border-radius: 16px;
  background: var(--glass);
  font-size: 14px;
  line-height: 18px;
}

.rating__score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 4px;
  border-radius: 16px;
  background: var(--bg);
  color: var(--ink-2);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.rating__score .icon {
  width: 16px;
  height: 16px;
}

.rating__label {
  color: var(--ink-2);
  font-weight: 600;
}

.rating__text {
  color: var(--faint);
}

.hero__title {
  margin-top: 20px;
  font-size: 50px;
  font-weight: 800;
  line-height: 50px;
  letter-spacing: -0.02em;
}

/* The hero mockup is one image from the design, blur and fade baked in: the
   phone runs out of the bottom and dissolves into the page colour. 1200×720 on
   desktop; on mobile the same image at 0.583 is cropped to the screen by the
   full-bleed box, as the mobile design does. */
.hero__mockup {
  --k: 0.583;
  /* The box starts this far ABOVE the image and clips there, well clear of
     it, so the image's rise-in on load is never cut by a straight edge.
     Transparent and click-through, so the headline it overlaps is untouched. */
  --lift: 120px;
  position: relative;
  width: 100vw;
  height: calc(720px * var(--k) + var(--lift));
  margin-top: calc(40px - var(--lift));
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  pointer-events: none;
}

.hero__banner {
  position: absolute;
  top: var(--lift);
  left: 50%;
  width: calc(1200px * var(--k));
  translate: -50% 0;
}


/* ─────────────────────────────── About ─────────────────────────────── */

.about {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin-top: -100px;
  padding-bottom: 40px;
}

.about__title {
  max-width: 322px;
}

/* ────────────────────────────── Features ────────────────────────────── */

.features {
  padding-block: 40px;
}

.features__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

.feature {
  --accent: var(--green);
  --k: 0.7566;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 16px 16px 0;
  border-radius: 36px;
  background: var(--surface);
  overflow: hidden;
}

.feature--orange {
  --accent: var(--orange);
}

.feature--blue {
  --accent: var(--blue);
}

.feature--olive {
  --accent: var(--olive);
}

/* Dot grid, and the white glow that washes it out at the bottom centre. */
.feature::before,
.feature::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.feature::before {
  inset: 18px 18px auto;
  height: 484px;
  background: radial-gradient(circle at 1px 1px, var(--bg) 1px, transparent 1.2px) 0 0 / 19.05px 19.28px;
}

.feature::after {
  inset: 0 0 auto;
  height: 520px;
  background: radial-gradient(260px 943.17px at 50% 520px, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

.feature > * {
  position: relative;
  z-index: 1;
}

.feature__info {
  align-self: stretch;
  padding: 16px 16px 0;
}

.feature__eyebrow {
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

.feature__title {
  margin-top: 8px;
  font-size: 36px;
  font-weight: 600;
  line-height: 40px;
}

.feature__text {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}

.checklist--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 16px;
}

.checklist li {
  display: flex;
  gap: 8px;
}

.checklist .icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

/* The phone in a feature card, cut off by the card's bottom edge. Laid out in
   the desktop's pixels and scaled by --k, which is what the export does. */
.shot {
  flex: none;
  width: calc(452px * var(--k));
}

/* ────────────────────────────── Reviews ────────────────────────────── */

.reviews {
  padding-block: 40px;
}

.trusted {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}

.trusted__laurel {
  width: 48px;
  height: 64px;
  margin-top: 14px;
}

.trusted__laurel--left {
  transform: scaleX(-1);
}

.trusted__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 208px;
}

.avatars {
  display: flex;
  padding-left: 8px;
}

.avatars img {
  width: 48px;
  height: 48px;
  margin-left: -8px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--bg);
  object-fit: cover;
}

.trusted__stars {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.stars {
  display: flex;
  gap: 8px;
}

.stars .icon {
  width: 12px;
  height: 12px;
}

.trusted__text {
  color: var(--faint);
  font-size: 14px;
  line-height: 18px;
  text-align: center;
}

.reviews .section-head {
  gap: 16px;
}

.reviews__grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
  /* The design's mask on the reviews table: the last rows fade out. */
  -webkit-mask-image: linear-gradient(180deg, #000 65.01%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 65.01%, transparent 100%);
}

.reviews__col {
  display: contents;
}

.review {
  display: block;
  padding: 24px;
  border-radius: 36px;
  background: var(--surface);
  transition:
    margin 0.2s ease,
    padding 0.2s ease,
    border-radius 0.2s ease,
    box-shadow 0.2s ease;
}

/* On mobile the design shows five of the nine, in this order. */
.review[data-m='1'] { order: 1; }
.review[data-m='2'] { order: 2; }
.review[data-m='3'] { order: 3; }
.review[data-m='4'] { order: 4; }
.review[data-m='5'] { order: 5; }
.review:not([data-m]) { display: none; }

.review__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review__store {
  display: grid;
  place-items: center;
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
}

.review__store .icon {
  width: 32px;
  height: 32px;
}

.review__who {
  flex: 1;
  min-width: 0;
}

.review__name {
  font-weight: 600;
  letter-spacing: 0.2px;
}

.review__date {
  display: block;
  color: var(--muted-2);
  font-size: 14px;
  line-height: 18px;
}

.review__out {
  display: grid;
  place-items: center;
  flex: none;
  width: 50px;
  height: 50px;
  color: var(--line);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.review__title {
  margin-top: 20px;
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
}

.review__text {
  margin-top: 8px;
  color: var(--muted-2);
}

.review .stars {
  margin-top: 20px;
}

.review .stars .icon {
  width: 16px;
  height: 16px;
}

/* Hover, from the design's first card: the card draws in by 8px and lifts. */
@media (hover: hover) {
  .review:hover {
    margin: 8px;
    padding: 16px;
    border-radius: 24px;
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.08),
      0 0 4px rgba(0, 0, 0, 0.12);
  }

  .review:hover .review__out {
    opacity: 1;
  }
}

/* ──────────────────────────── Get started ──────────────────────────── */

.get-started {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-block: 40px;
}

.get-started .headline {
  max-width: 322px;
}

/* ─────────────────────────────── Footer ─────────────────────────────── */

.site-footer {
  padding: 40px 0 16px;
  /* The export gives the footer its own backdrop blur, and that is what makes
     it the backdrop root: the card's blur then samples the big logo behind it
     rather than the page, so the logo shows through the card as in the design. */
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
}

.footer__art {
  position: relative;
  width: 300px;
  height: 252px;
  margin-inline: auto;
}

.footer__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin: -92px auto 0;
  padding: 40px 16px 16px;
  border-radius: 44px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  text-align: center;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer__brand .app-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
}

.footer__name {
  font-size: 30px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: 0.2px;
}

.footer__mail {
  width: 100%;
  padding-inline: 16px;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.footer__links a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__links a:hover {
  color: var(--ink);
}

.footer__links li + li::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 16px;
  border-radius: 3px;
  background: var(--muted);
  vertical-align: middle;
}

.footer__copy {
  color: var(--faint);
  font-size: 14px;
  line-height: 20px;
}

/* ──────────────────────────── Bottom panel ──────────────────────────── */

.bottom-panel {
  position: fixed;
  inset: auto 0 0;
  z-index: 40;
  height: 92px;
  padding-top: 16px;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition:
    opacity 0.4s ease-out,
    transform 0.6s linear(0, 0.016, 0.055, 0.11, 0.173, 0.241, 0.31, 0.378, 0.442, 0.503, 0.559, 0.611, 0.657, 0.7, 0.737, 0.771, 0.801, 0.827, 0.85, 0.871, 0.888, 0.904, 0.917, 0.929, 0.939, 0.948, 0.955, 0.962, 0.967, 0.972, 0.976, 0.98, 0.983, 0.985, 0.987, 0.989, 0.991, 0.992, 0.993, 0.994, 1);
}


.bottom-panel.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.bottom-panel__row {
  display: flex;
  gap: 8px;
  width: min(500px, 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.bottom-panel__row .btn--primary {
  flex: 1;
}

/* ───────────────────────────── Download ───────────────────────────── */

.download {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 622px;
  padding-block: 40px;
  text-align: center;
}

.download__lead {
  margin-top: 12px;
  color: var(--muted);
  letter-spacing: 0.18px;
}

.download__lead--d,
.qr-grid {
  display: none;
}

.download__buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 40px;
}

.qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 360px;
}

.qr-card img {
  width: 360px;
  height: 360px;
}

.qr-card .btn {
  width: 230px;
}

/* ─────────────────────────── Policy pages ─────────────────────────── */

.doc {
  padding-block: 40px 0;
}

.doc__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.doc__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
}

.doc-card {
  padding: 24px;
  border-radius: 32px;
  background: var(--surface);
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}

.doc-card--roomy {
  padding: 40px;
  border-radius: 44px;
}

.toc__title {
  color: var(--ink);
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
}

.toc__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  font-weight: 600;
}

.toc__list a {
  display: flex;
  gap: 4px;
  color: var(--blue);
}

.toc__list a:hover {
  text-decoration: underline;
}

.toc__num {
  flex: none;
  width: 24px;
}

.doc-card section + section,
.doc-card > p + section {
  margin-top: 40px;
}

.doc-card h2 {
  color: var(--ink);
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.doc-card h3 {
  margin-top: 24px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.18px;
}

.doc-card h4 {
  margin-top: 16px;
  color: var(--ink);
  font-weight: 600;
}

.doc-card p,
.doc-card ul,
.doc-card ol {
  margin-top: 12px;
}

.doc-card > p:first-child,
.doc-card h2 + * {
  margin-top: 0;
}

.doc-card h2 + h3,
.doc-card h2 + p,
.doc-card h2 + ul,
.doc-card h2 + .contact {
  margin-top: 16px;
}

.doc-card .is-dark,
.doc-card strong {
  color: var(--ink);
}

/* The design sets the lead-in of a list item and other emphasis in Semibold. */
.doc-card strong {
  font-weight: 600;
}

.doc-card a:not(.toc__list a) {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.doc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.doc-list:not(.doc-list--plain) li {
  position: relative;
  padding-left: 20px;
}

.doc-list--num {
  counter-reset: step;
}

.doc-list--num li {
  padding-left: 4px;
  counter-increment: step;
}

.doc-list--num li::before {
  content: counter(step) '. ';
}

.doc-list:not(.doc-list--plain) li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}

.contact {
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  background: var(--bg);
}

.contact p {
  margin-top: 2px;
}

.contact p:first-child {
  margin-top: 0;
}

.contact__name {
  color: var(--ink);
  font-weight: 600;
}

.contact__email {
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
}

.contact__email a {
  text-decoration: underline;
}

.doc__updated {
  margin-top: 40px !important;
  color: var(--faint);
}

.doc-card--roomy section + section,
.doc-card--roomy > p + section {
  margin-top: 60px;
}

.doc-card--roomy h2 + * {
  margin-top: 24px;
}

.doc-card--roomy .doc-list:not(.doc-list--plain) li {
  color: var(--ink);
}

.doc-card--roomy .contact {
  padding: 20px;
  border-radius: 24px;
}

.doc-card--roomy .contact__name {
  font-size: 18px;
  line-height: 24px;
}

.doc-card .toc__title {
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0;
}

.doc-card .toc__list {
  margin-top: 16px;
}

@media (min-width: 1024px) {
  .doc-card .toc__list {
    margin-top: 20px;
  }
}

/* 404 */
.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-block: 120px 40px;
  text-align: center;
}

.not-found p {
  color: var(--muted);
}

/* ─────────────────────────────── Motion ─────────────────────────────── */

/* Modelled on appzen.framer.website (the animation reference), measured from
   its Framer appear/scroll configs:

   - Blocks never blur. They rise and fade in on springs; the "coming out of a
     blur" look comes from the fixed progressive blur at the top and bottom of
     the screen (.pblur), which content passes through as it scrolls.
   - Text inside the feature cards does blur in, word by word — main.js
     splits it. (The reference splits descriptions into characters; split by
     character the text loses its kerning, gets wider and rewraps, so here it
     is words with a shorter stagger.)

   Springs are Framer's { type: spring, bounce } as CSS linear() curves:
   --spring-0 (bounce 0), --spring-2 (bounce 0.2), --spring-4 (bounce 0.4).

   Hidden only under `html.js`, set by the inline script in <head>; that script
   removes the class again if main.js has not started within a few seconds. */
:root {
  --spring-0: linear(0, 0.016, 0.055, 0.11, 0.173, 0.241, 0.31, 0.378, 0.442, 0.503, 0.559, 0.611, 0.657, 0.7, 0.737, 0.771, 0.801, 0.827, 0.85, 0.871, 0.888, 0.904, 0.917, 0.929, 0.939, 0.948, 0.955, 0.962, 0.967, 0.972, 0.976, 0.98, 0.983, 0.985, 0.987, 0.989, 0.991, 0.992, 0.993, 0.994, 1);
  --spring-2: linear(0, 0.013, 0.046, 0.094, 0.153, 0.219, 0.288, 0.358, 0.427, 0.494, 0.558, 0.617, 0.672, 0.722, 0.767, 0.807, 0.842, 0.873, 0.9, 0.923, 0.942, 0.959, 0.972, 0.983, 0.992, 0.999, 1.005, 1.009, 1.011, 1.013, 1.015, 1.015, 1.015, 1.015, 1.014, 1.013, 1.012, 1.011, 1.01, 1.009, 1);
  --spring-4: linear(0, 0.022, 0.081, 0.165, 0.266, 0.374, 0.484, 0.59, 0.689, 0.778, 0.856, 0.922, 0.976, 1.018, 1.05, 1.072, 1.086, 1.093, 1.095, 1.092, 1.086, 1.077, 1.067, 1.057, 1.047, 1.037, 1.028, 1.019, 1.012, 1.006, 1.001, 0.998, 0.995, 0.993, 0.992, 0.991, 0.991, 0.991, 0.992, 0.993, 1);
}

/* Progressive blur: six backdrop blurs, each masked to a band that starts a
   little further from the edge, so the blur deepens smoothly towards it. */
.pblur {
  position: fixed;
  right: 0;
  left: 0;
  pointer-events: none;
}

.pblur--top {
  --to: to top;
  top: 0;
  z-index: 45;
  height: 120px;
}

.pblur--bottom {
  --to: to bottom;
  bottom: 0;
  z-index: 30;
  height: 180px;
  transition: opacity 0.3s ease;
}

/* At the end of the page there is nothing left to scroll in from below, and
   the blur would only sit on the footer's last line. main.js sets this once
   the page bottom is within the blur's height. */
.pblur--bottom.is-off {
  opacity: 0;
}

/* On a phone the policy pages are long reading text, and a 180px blur over
   the bottom of a short screen hides the line being read. */
@media (max-width: 1023px) {
  body:has(.doc) .pblur--bottom {
    display: none;
  }
}

.pblur i {
  position: absolute;
  inset: 0;
}

.pblur i:nth-child(1) {
  -webkit-backdrop-filter: blur(0.5px);
  backdrop-filter: blur(0.5px);
  -webkit-mask-image: linear-gradient(var(--to), transparent 0%, #000 20%);
  mask-image: linear-gradient(var(--to), transparent 0%, #000 20%);
}

.pblur i:nth-child(2) {
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  -webkit-mask-image: linear-gradient(var(--to), transparent 15%, #000 35%);
  mask-image: linear-gradient(var(--to), transparent 15%, #000 35%);
}

.pblur i:nth-child(3) {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(var(--to), transparent 30%, #000 50%);
  mask-image: linear-gradient(var(--to), transparent 30%, #000 50%);
}

.pblur i:nth-child(4) {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(var(--to), transparent 45%, #000 65%);
  mask-image: linear-gradient(var(--to), transparent 45%, #000 65%);
}

.pblur i:nth-child(5) {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(var(--to), transparent 60%, #000 80%);
  mask-image: linear-gradient(var(--to), transparent 60%, #000 80%);
}

.pblur i:nth-child(6) {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(var(--to), transparent 75%, #000 100%);
  mask-image: linear-gradient(var(--to), transparent 75%, #000 100%);
}

/* Block reveal. Default = the reference's cards: 64px up, spring, 0.6s. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--ry, 64px)) scale(var(--rs, 1));
  transition:
    opacity var(--dur, 0.6s) ease-out var(--d, 0s),
    transform var(--dur, 0.6s) var(--ease, var(--spring-0)) var(--d, 0s);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Small things: the reference's "Buttons" — 20px, 0.6s. */
[data-reveal='pill'] {
  --ry: 20px;
}

/* Section labels ("Features", "Get Started") and the trusted-by row move like
   the hero's rating: 20px up on a bounce-0.2 spring. Held back a beat so they
   land after the heading has started to drop, as the rating does on load —
   arriving together with it, they were lost under the bigger motion. */
.pill[data-reveal='pill'],
.trusted[data-reveal='pill'] {
  --dur: 0.9s;
  --ease: var(--spring-2);
  --d: 0.3s;
}

/* Section headings: drop in from above and settle from 1.3x, bounce 0.4. */
[data-reveal='title'] {
  --ry: -44px;
  --rs: 1.3;
  --dur: 1.2s;
  --ease: var(--spring-4);
  --d: 0.05s;
}

/* Intro, on load. Motion as the reference's hero; delays tightened. */
[data-reveal='nav'] {
  --ry: -78px;
  --dur: 1.1s;
  --ease: var(--spring-2);
  --d: 0.3s;
}

.js [data-reveal='nav'] {
  opacity: 1;
}

[data-reveal='phone'] {
  --ry: 120px;
  --dur: 1.4s;
  --ease: var(--spring-4);
  --d: 0.35s;
}

[data-reveal='hero-title'] {
  --ry: -44px;
  --rs: 1.3;
  --dur: 1.4s;
  --ease: var(--spring-4);
  --d: 0.5s;
}

[data-reveal='tagline'] {
  --ry: 20px;
  --dur: 0.7s;
  --ease: var(--spring-2);
  --d: 0.9s;
}

[data-reveal='art'] {
  --ry: 120px;
  --dur: 1.4s;
  --ease: var(--spring-4);
}

.cta[data-reveal],
.download__lead[data-reveal],
.download__buttons[data-reveal] {
  --d: 0.1s;
}

.reviews__col:nth-child(2) .review[data-reveal],
.qr-card:nth-child(2)[data-reveal] {
  --d: 0.08s;
}

.reviews__col:nth-child(3) .review[data-reveal] {
  --d: 0.16s;
}

.footer__card[data-reveal] {
  --d: 0.1s;
}

.js .review[data-reveal].is-in {
  /* Keep the hover transition once the card has arrived. */
  transition:
    opacity var(--dur, 0.6s) ease-out var(--d, 0s),
    transform var(--dur, 0.6s) var(--ease, var(--spring-0)) var(--d, 0s),
    margin 0.2s ease,
    padding 0.2s ease,
    border-radius 0.2s ease,
    box-shadow 0.2s ease;
}

/* Text blur-in: each word from blur(10px), 10px down, clear.
   main.js wraps the text; --i is the unit's index, --st the stagger. */
.js [data-text-fx] .fx {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * var(--st) + 0.1s),
    filter 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * var(--st) + 0.1s),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * var(--st) + 0.1s);
}

/* Feature cards, in the reference's order once the card is in: title and
   description blur in first, then the coloured subtitle slides in, then the
   list, item by item. The card's own rise (data-reveal) runs underneath. */
.js .feature .feature__eyebrow,
.js .feature .checklist li {
  opacity: 0;
  transition:
    opacity 0.5s ease-out var(--fd),
    transform 0.9s var(--spring-2) var(--fd);
}

.js .feature .feature__eyebrow {
  --fd: 0.45s;
  transform: translateX(-24px);
}

.js .feature .checklist li {
  --fd: calc(0.65s + var(--li, 0) * 0.08s);
  transform: translateY(16px);
}

.feature .checklist li:nth-child(2) { --li: 1; }
.feature .checklist li:nth-child(3) { --li: 2; }
.feature .checklist li:nth-child(4) { --li: 3; }
.feature .checklist li:nth-child(5) { --li: 4; }

.js .feature.is-in .feature__eyebrow,
.js .feature.is-in .checklist li {
  opacity: 1;
  transform: none;
}

/* The phone rides up with the scroll: half of it shows when the card comes
   in, and it reaches its place as the card nears the top. main.js sets --sp
   (0 → 1) from the card's position. */
.js .feature .shot {
  transform: translateY(calc((1 - var(--sp, 0)) * 50%));
  will-change: transform;
}

[data-text-fx='words'] {
  --st: 0.03s;
}

[data-text-fx='text'] {
  --st: 0.012s;
}

.js [data-text-fx].is-in .fx {
  opacity: 1;
  filter: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-text-fx] .fx,
  .js .feature .feature__eyebrow,
  .js .feature .checklist li,
  .js .feature .shot {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

/* ───────────────────────────── Tablet ───────────────────────────── */

@media (min-width: 768px) {
  .hero__title {
    font-size: 80px;
    line-height: 80px;
  }

  .cta {
    width: 500px;
  }

  .cta__buttons {
    flex-direction: row;
  }

  .cta__buttons .btn {
    flex: 1;
  }

  .about__title,
  .get-started .headline {
    max-width: 600px;
  }
}

/* ───────────────────────────── Desktop ───────────────────────────── */

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
    --container: 1200px;
  }

  .br-d {
    display: inline;
  }

  .br-m {
    display: none;
  }

  .navbar__links {
    display: flex;
  }

  .section-head {
    gap: 40px;
  }

  .display {
    font-size: 72px;
    line-height: 72px;
    letter-spacing: -0.02em;
  }

  .headline {
    font-size: 60px;
    line-height: 66px;
  }

  .app-icon {
    width: 140px;
    height: 140px;
    border-radius: 32px;
  }

  .app-icon img {
    width: 61.4%;
  }

  /* Hero */
  .hero {
    padding-top: 64px;
  }

  .hero__title {
    margin-top: 40px;
    font-size: 110px;
    line-height: 110px;
  }

  .hero__mockup {
    --k: 1;
  }




  /* About */
  .about {
    gap: 40px;
    margin-top: -140px;
    padding-bottom: 104px;
  }

  .about__title,
  .get-started .headline {
    max-width: 900px;
  }

  /* Features */
  .features {
    padding-block: 120px;
  }

  .features__list {
    margin-top: 40px;
  }

  .feature {
    --k: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 452px;
    align-items: start;
    gap: 40px;
    height: 520px;
    padding: 40px 40px 0;
    border-radius: 44px;
  }

  .feature::before {
    height: auto;
    bottom: 18px;
  }

  .feature--reverse {
    grid-template-columns: 452px minmax(0, 1fr);
  }

  .feature--reverse .shot {
    order: -1;
  }

  .feature__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 480px;
    padding: 0 16px;
  }

  .feature__eyebrow {
    font-size: 24px;
    font-weight: 600;
    line-height: 28px;
  }

  .feature__title {
    font-size: clamp(44px, 4.17vw, 60px);
    line-height: 1.1;
  }

  .feature__text {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.18px;
  }

  .checklist {
    margin-top: 32px;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.2px;
  }

  .checklist--2col {
    column-gap: 32px;
  }

  .checklist .icon {
    width: 24px;
    height: 24px;
  }

  /* Reviews */
  .reviews {
    padding-block: 120px;
  }

  .reviews .section-head {
    gap: 40px;
  }

  .trusted {
    align-items: center;
    gap: 24px;
  }

  .trusted__laurel {
    margin-top: 0;
  }

  .trusted__body {
    flex-direction: row;
    gap: 24px;
    width: auto;
  }

  .trusted__stars {
    align-items: flex-start;
    gap: 6px;
  }

  .trusted__text {
    text-align: left;
  }

  .reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    margin-top: 40px;
  }

  .reviews__col {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .reviews__col .review {
    display: block;
    order: 0;
  }

  /* Get started */
  .get-started {
    gap: 40px;
    padding-block: 120px;
  }

  /* Footer */
  .site-footer {
    padding: 120px 0 40px;
  }

  .footer__art {
    width: 500px;
    height: 420px;
  }


  .footer__card {
    gap: 40px;
    width: min(1360px, 100% - 80px);
    margin-top: -150px;
    padding: 60px;
  }

  .footer__brand .app-icon {
    width: 100px;
    height: 100px;
    border-radius: 24px;
  }

  .footer__name {
    font-size: 50px;
    font-weight: 800;
    line-height: 50px;
    letter-spacing: -1px;
  }

  .footer__mail {
    width: auto;
  }

  .footer__links {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.18px;
  }

  .footer__links li + li::before {
    width: 6px;
    height: 6px;
  }

  .footer__copy {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.18px;
  }


  /* Download */
  .download {
    justify-content: flex-start;
    min-height: 0;
    padding-block: 64px 0;
  }

  .download__lead--m,
  .download__buttons {
    display: none;
  }

  .download__lead--d {
    display: block;
  }

  .qr-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;
  }

  /* Policy pages */
  .doc {
    padding-top: 64px;
  }

  .doc__head {
    gap: 40px;
  }

  .doc__cards {
    gap: 40px;
    margin-top: 40px;
  }

  .doc-card,
  .doc-card--roomy {
    padding: 40px;
    border-radius: 44px;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.18px;
  }

  .toc__title {
    font-size: 24px;
  }

  .toc__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--rows, 6), auto);
    column-gap: 20px;
    margin-top: 20px;
  }

  .toc__num {
    width: 28px;
  }

  .doc-card section + section,
  .doc-card > p + section {
    margin-top: 60px;
  }

  .doc-card h2 {
    font-size: 30px;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: 0.2px;
  }

  .doc-card h3 {
    margin-top: 32px;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 0;
  }

  .doc-card h2 + h3,
  .doc-card h2 + p,
  .doc-card h2 + ul {
    margin-top: 32px;
  }

  .doc-card p,
  .doc-card ul,
  .doc-card ol {
    margin-top: 16px;
  }

  .doc-list {
    gap: 8px;
  }

  .doc-list:not(.doc-list--plain) li {
    padding-left: 26px;
  }

  .doc-list:not(.doc-list--plain) li::before {
    left: 8px;
    top: 9px;
  }

  .contact {
    padding: 24px;
    border-radius: 24px;
  }

  .contact p {
    margin-top: 4px;
  }

  .doc__updated {
    margin-top: 60px !important;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
  }
}

/* Between the two designs the feature text column is narrower than 612px, and
   the desktop's forced breaks would strand a single word on its own line. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .feature__title .br-d {
    display: none;
  }
}