/* Unlinked — site styles. Plain CSS, no build step.
   Two themes, following the visitor's system setting (decision 2026-10-10):
   light by default (the brand's ivory and green), dark with the app's own
   dark tokens (docs/BRIEF.md §10) when the system asks for dark. */

/* ---------- Fonts (self-hosted, SIL OFL — see /fonts/OFL.txt) ---------- */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/BricolageGrotesque-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/BricolageGrotesque-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DMSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DMSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DMSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light dark;

  /* Light (the default): brand ivory, white cards, brand green. */
  --background: #fbf9f3; /* a lighter tint of the brand ivory #F8F5E9 */
  --card: #ffffff;
  --card-border: #e7e2d3;
  --card-shadow: 0 1px 2px rgba(22, 24, 28, 0.04), 0 10px 28px -14px rgba(22, 24, 28, 0.14);
  --control: #f0ede3;
  --divider: #e4dfd1;
  --text: #16181c;
  --text-secondary: #3d4148;
  --text-tertiary: #5e636b;
  --mint: #1c7f53; /* brand green: buttons and fills (white on it 4.99:1) */
  --accent-text: #166c46; /* green for words: 5.5:1 or more on every surface */
  --mint-background: #ddf3e7;
  --on-mint: #ffffff;
  --amber: #9d6300;
  --info-blue: #3c89ff;
  --paper: #ffffff;
  --paper-shadow: drop-shadow(0 10px 22px rgba(22, 24, 28, 0.16)) drop-shadow(0 0 1px rgba(22, 24, 28, 0.25));

  /* Form field borders need 3:1 against the card; the divider colour is
     too faint for that, so fields use the tertiary text colour. */
  --field-border: var(--text-tertiary);
  --field-background: #ffffff;

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-card: 22px;
  --radius-field: 12px;
  --gutter: 16px;
  --measure: 40rem;
  --page-width: 70rem;
}

@media (min-width: 48rem) {
  :root {
    --gutter: 32px;
  }
}

/* Dark: the app's dark tokens, as the site always was before 2026-10-10. */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #111317;
    --card: #24272d;
    --card-border: transparent;
    --card-shadow: none;
    --control: #2a2e34;
    --divider: #32363d;
    --text: #f4f2ee;
    --text-secondary: #c9ccd1;
    --text-tertiary: #a4a8b0;
    --mint: #7dd3a8;
    --accent-text: #7dd3a8;
    --mint-background: #1f3a2e;
    --on-mint: #111317;
    --amber: #f5b454;
    --info-blue: #6fa8ff;
    --paper: #f6f5f2;
    --paper-shadow: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
    --field-background: var(--control);
  }
}

/* ---------- Base ---------- */

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

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

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

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.12;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

/* Avoid a lone word on a paragraph's last line, where the browser can. */
p,
li {
  text-wrap: pretty;
}

h1 {
  font-weight: 800;
  font-size: clamp(2.25rem, 1.4rem + 4.2vw, 4.25rem);
  letter-spacing: -0.025em;
}

h2 {
  font-weight: 800;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  letter-spacing: -0.02em;
}

h3 {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em;
}

strong {
  font-weight: 600;
  color: var(--text);
}

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

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

:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 3px;
  border-radius: 4px;
}

ul,
ol {
  padding-left: 1.25em;
}

/* ---------- Layout helpers ---------- */

.wrap {
  width: 100%;
  max-width: calc(var(--page-width) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose {
  max-width: var(--measure);
}

.section {
  padding-block: clamp(1.5rem, 0.9rem + 2.6vw, 3.5rem);
}

.section + .section {
  border-top: 1px solid var(--divider);
}

.section-intro {
  max-width: var(--measure);
  margin-bottom: 1.5rem;
  color: var(--text-secondary);
  font-size: 1.125rem;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--accent-text);
}

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

.small {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.nowrap {
  white-space: nowrap;
}

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

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--mint);
  color: var(--on-mint);
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
}

.skip-link:focus {
  top: 0.75rem;
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--divider);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding-block: 0.75rem;
}

/* The logo: the designer's mark and wordmark, as one SVG (images/logo.svg). */
.logo {
  display: block;
  border-radius: 0.375rem;
}

.logo picture,
.logo img {
  display: block;
  height: 2rem;
  width: auto;
}

@media (min-width: 48rem) {
  .logo img {
    height: 2.5rem;
  }
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
}

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

.site-nav .button {
  padding-inline: 0.9rem;
  color: var(--on-mint);
}

.site-nav .button:hover {
  color: var(--on-mint);
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--mint);
  color: var(--on-mint);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  filter: brightness(1.06);
  text-decoration: none;
}

.button:focus-visible {
  outline-offset: 4px;
  border-radius: 999px;
}

.button[disabled] {
  cursor: progress;
  opacity: 0.75;
}

.button-small {
  min-height: 2.5rem;
  padding: 0.5rem 1.1rem;
  font-size: 0.9375rem;
}

/* ---------- Hero ---------- */

.hero {
  padding-block: clamp(2rem, 1rem + 3.5vw, 3.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.hero h1 {
  max-width: 17ch;
}

.hero .lead {
  max-width: 34rem;
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  color: var(--text-secondary);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.hero-actions p {
  margin: 0;
  font-weight: 500;
}

.hero-note {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--text-tertiary);
}

/* ---------- Cards and grids ---------- */

.grid {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--card);
  border-radius: var(--radius-card);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.card h3 {
  margin-bottom: 0.4em;
}

.card p:last-child {
  margin-bottom: 0;
}

.card p {
  color: var(--text-secondary);
}

/* ---------- Steps ---------- */

.steps {
  counter-reset: step;
}

.steps li {
  counter-increment: step;
}

.steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  align-items: start;
}

.steps li > * {
  grid-column: 2;
}

.steps li::before {
  content: counter(step);
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--mint);
  color: var(--on-mint);
  font-family: var(--font-display);
  font-weight: 800;
}

/* ---------- Feature list ---------- */

.features {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--divider);
}

.features li {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--divider);
  font-weight: 500;
}

.features li::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--mint);
  transform: translateY(-0.1em);
}

@media (min-width: 48rem) {
  .features {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2.5rem;
  }
}

@media (min-width: 64rem) {
  .features {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tag {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  background: var(--mint-background);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  vertical-align: 0.1em;
}

/* ---------- Lists inside cards (Free and Pro) ---------- */

.card-list {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--text-secondary);
}

.card-list li + li {
  margin-top: 0.4rem;
}

.card-list li::marker {
  color: var(--accent-text);
}

/* ---------- Promise line ---------- */

.promise {
  margin: 1.5rem 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.4375rem);
  letter-spacing: -0.01em;
  line-height: 1.3;
  max-width: 32ch;
}

/* ---------- Waitlist ---------- */

.waitlist {
  display: grid;
  gap: 2rem;
}

@media (min-width: 64rem) {
  .waitlist {
    grid-template-columns: 1fr 1.15fr;
    gap: 4rem;
    align-items: start;
  }
}

.form-card {
  padding: clamp(1.25rem, 0.75rem + 2vw, 2.25rem);
  background: var(--card);
  border-radius: var(--radius-card);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.field {
  margin: 0 0 1.15rem;
}

.field > label,
.field legend {
  display: block;
  margin-bottom: 0.4rem;
  padding: 0;
  font-weight: 600;
}

fieldset.field {
  border: 0;
  padding: 0;
  min-width: 0;
}

.hint {
  display: block;
  margin: -0.15rem 0 0.5rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

/* A hint under the choices it explains, rather than above a text field. */
.hint-after {
  margin: 0.35rem 0 0;
}

input[type="email"],
input[type="text"] {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-field);
  background: var(--field-background);
  color: var(--text);
  font: inherit;
}

input[type="email"]:focus-visible,
input[type="text"]:focus-visible {
  outline-offset: 1px;
  border-radius: var(--radius-field);
}

.choice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.35rem 0;
}

.choice input {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.15rem 0 0;
  accent-color: var(--mint);
}

.choice label {
  font-weight: 400;
}

.choices-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

.consent {
  margin-top: 0.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--divider);
  border-radius: var(--radius-field);
}

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

.error {
  display: block;
  margin: 0.4rem 0 0;
  color: var(--amber);
  font-weight: 600;
  font-size: 0.9375rem;
}

.error[hidden] {
  display: none;
}

[aria-invalid="true"] {
  border-color: var(--amber) !important;
  border-width: 2px !important;
}

.turnstile {
  min-height: 65px;
  margin: 0 0 1.15rem;
}

.form-status {
  margin: 1rem 0 0;
  font-weight: 600;
}

.form-status:empty {
  display: none;
}

.form-status.is-error {
  color: var(--amber);
}

.form-success {
  padding: 1.5rem;
  border-radius: var(--radius-card);
  background: var(--mint-background);
}

.form-success h3 {
  margin-bottom: 0.3em;
}

.form-success p {
  margin: 0;
}

.form-privacy {
  margin: 1.15rem 0 0;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

/* ---------- Long-form pages ---------- */

.page-head {
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) 1rem;
}

.page-head p {
  max-width: var(--measure);
  font-size: 1.1875rem;
  color: var(--text-secondary);
}

.page-body {
  padding-block: 1rem clamp(3.5rem, 2rem + 5vw, 6rem);
}

.page-body h2 {
  margin-top: 2.5rem;
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
}

.page-body h3 {
  margin-top: 1.75rem;
}

.page-body li {
  margin-bottom: 0.5em;
}

.page-body li::marker {
  color: var(--accent-text);
}

.updated {
  font-size: 0.9375rem;
  color: var(--text-tertiary);
}

.draft-note {
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--amber);
  background: var(--card);
  border-radius: 0 var(--radius-field) var(--radius-field) 0;
  border-top: 1px solid var(--card-border);
  border-right: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

blockquote {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--card);
  border-left: 4px solid var(--mint);
  border-radius: 0 var(--radius-field) var(--radius-field) 0;
  font-size: 1.125rem;
  border-top: 1px solid var(--card-border);
  border-right: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

blockquote p:last-child {
  margin-bottom: 0;
}

.mask-sample {
  display: grid;
  gap: 0.25rem;
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--card);
  border-radius: var(--radius-field);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9375rem;
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.mask-sample dt {
  color: var(--text-tertiary);
  font-family: var(--font-body);
  font-size: 0.875rem;
}

.mask-sample dd {
  margin: 0 0 0.75rem;
  overflow-wrap: anywhere;
}

.mask-sample dd:last-child {
  margin-bottom: 0;
}

/* ---------- FAQ ---------- */

.faq {
  margin: 0;
  border-top: 1px solid var(--divider);
}

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

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  content: "+";
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--control);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq .answer {
  padding: 0 0 1.25rem;
  max-width: var(--measure);
  color: var(--text-secondary);
}

.faq .answer p:last-child {
  margin-bottom: 0;
}

.contact {
  margin-top: 3rem;
}

/* Long email addresses may break, so a card never runs past a 320 px screen. */
.grid > * {
  min-width: 0;
}

.contact a {
  overflow-wrap: anywhere;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--divider);
  padding-block: 2.5rem 3rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: var(--text-secondary);
}

.site-footer a:hover {
  color: var(--text);
}

.site-footer p {
  margin: 0;
  color: var(--text-tertiary);
}

/* The small mark beside the company line. */
.footer-company {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-company img {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

.page-body .card h3 {
  margin-top: 0;
}

/* ======================================================================
   Home page
   ====================================================================== */

/* ---------- Device: Apple's iPhone frame with a screenshot in it ----------
   The frame (images/iphone-frame-*.png) is Apple's official product bezel,
   only resized: never recoloured or cropped. Its screen opening is exactly
   1320 × 2868 at (75, 66) in the 1470 × 3000 original, so the screenshot
   sits at those proportions with the frame on top. The opening's corners
   are continuous curves; a 150 px radius stays inside the frame's solid edge
   all the way round (measured: any radius from 120 to 190 px fits). */

.device {
  position: relative;
  width: var(--device-width, 18rem);
  aspect-ratio: 1470 / 3000;
  flex: none;
}

.device-screen {
  position: absolute;
  left: 5.102%;   /*   75 / 1470 */
  top: 2.2%;      /*   66 / 3000 */
  width: 89.796%; /* 1320 / 1470 */
  height: 95.6%;  /* 2868 / 3000 */
  display: grid;
  overflow: hidden;
  border-radius: 11.364% / 5.23%; /* 150 / 1320, 150 / 2868 */
  background: #000000;
}

/* The <picture> wrappers step aside so every screenshot shares one cell. */
.device-screen picture {
  display: contents;
}

.device-screen img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
}

.device-frame img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* A device with several screens shows one at a time. The incoming screen
   fades in on top; the old one drops away only after that, so the frame
   never looks see-through mid-fade. */
.device-screen img[data-screen] {
  opacity: 0;
  transition: opacity 0s linear 0.5s;
}

.device-screen img[data-screen].is-shown {
  z-index: 1;
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* ---------- Hero ---------- */

.hero-grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.hero-grid h1 {
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.875rem);
}

.hero-note {
  margin-bottom: 0;
}

@media (min-width: 60rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) 38rem;
    gap: 2.5rem;
  }
}

/* ---------- Hero slideshow ----------
   Narrow screens: every screen in a row that scrolls sideways, snapping to
   each phone, with dots under it. No auto-advance.
   48rem and up: one phone; the screens cross-fade every few seconds, with
   labelled tabs under it. home.js runs it; without it the first screen
   shows. */

.showcase {
  --device-width: 50vw;
  min-width: 0;
}

.showcase-track {
  display: flex;
  gap: 4vw;
  margin-inline: calc(-1 * var(--gutter));
  padding: 0.5rem 25vw 0.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.showcase-track::-webkit-scrollbar {
  display: none;
}

.showcase-track:focus-visible {
  outline-offset: -3px;
  border-radius: var(--radius-card);
}

.slide {
  flex: none;
  scroll-snap-align: center;
}

.slide-caption {
  margin: 0.5rem 0 0;
  text-align: center;
  font-weight: 600;
  color: var(--text-secondary);
}

.showcase-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.showcase-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Narrow screens: the tabs are dots; their names stay for screen readers. */
.showcase-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
}

.showcase-tab::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--text-tertiary);
}

.showcase-tab[aria-current="true"]::before {
  width: 1.25rem;
  border-radius: 999px;
  background: var(--mint);
}

.showcase-tab-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.showcase-tab-bar {
  display: none;
}

.showcase-toggle {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--divider);
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.showcase-toggle[hidden] {
  display: none;
}

.showcase-toggle:hover {
  color: var(--text);
  border-color: var(--text-tertiary);
}

/* Pause bars, or a play triangle when paused. */
.showcase-toggle::before {
  content: "";
  width: 0.6rem;
  height: 0.7rem;
  border-inline: 0.2rem solid currentColor;
}

.showcase-toggle[data-state="paused"]::before {
  width: 0;
  height: 0;
  margin-left: 0.15rem;
  border-style: solid;
  border-width: 0.4rem 0 0.4rem 0.65rem;
  border-color: transparent transparent transparent currentColor;
}

@media (min-width: 48rem) {
  .showcase {
    --device-width: 20.5rem; /* 669 px tall */
    display: grid;
    justify-items: center;
    gap: 1.25rem;
  }

  .showcase-track {
    display: grid;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .showcase-track:focus-visible {
    outline: none;
  }

  .slide {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 0s linear 0.6s;
  }

  .slide.is-active {
    z-index: 1;
    opacity: 1;
    transition: opacity 0.6s ease;
  }

  .slide-caption {
    display: none;
  }

  .showcase-controls {
    flex-wrap: wrap;
    max-width: 38rem;
  }

  .showcase-tabs {
    gap: 0.25rem;
  }

  .showcase-tab {
    width: auto;
    height: auto;
    min-height: 2.25rem;
    padding: 0.3rem 0.6rem;
    overflow: hidden;
    border: 1px solid var(--divider);
    font-size: 0.8125rem;
    font-weight: 500;
  }

  .showcase-tab::before {
    content: none;
  }

  .showcase-tab:hover {
    color: var(--text);
    border-color: var(--text-tertiary);
  }

  .showcase-tab[aria-current="true"] {
    border-color: var(--mint);
    background: var(--mint-background);
    color: var(--text);
  }

  .showcase-tab-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }

  .showcase-tab .tag {
    margin-left: 0.15rem;
    padding: 0 0.4rem;
    font-size: 0.75rem;
    background: var(--control);
  }

  /* How long until the next screen; it pauses on hover and focus. */
  .showcase-tab-bar {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--mint);
    transform: scaleX(0);
    transform-origin: left;
  }
}

@media (min-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .showcase[data-auto] .showcase-tab[aria-current="true"] .showcase-tab-bar {
    animation: showcase-next 4.5s linear forwards;
  }

  /* Same weight as the rule above, so the pause wins over the shorthand. */
  .showcase[data-auto]:hover .showcase-tab[aria-current="true"] .showcase-tab-bar,
  .showcase[data-auto]:focus-within .showcase-tab[aria-current="true"] .showcase-tab-bar,
  .showcase[data-auto].is-offscreen .showcase-tab[aria-current="true"] .showcase-tab-bar {
    animation-play-state: paused;
  }
}

@keyframes showcase-next {
  to { transform: scaleX(1); }
}

/* ---------- Works with your bank? (one line) ---------- */

.bank-line {
  padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.bank-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--card);
  border-radius: var(--radius-card);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.bank-strip p {
  flex: 1 1 26rem;
  margin: 0;
  color: var(--text-secondary);
}

.bank-strip strong {
  margin-right: 0.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
}

/* ---------- Why it's different: the story ----------
   Narrow screens: each step with its own phone beside the words.
   60rem and up: one phone stays in view while the steps scroll past, and
   its screen follows the step in the middle of the window (home.js). */

.story-phone {
  display: none;
}

.story-steps {
  display: grid;
  gap: 1rem;
}

.story-step {
  --device-width: 28%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem 1rem;
  align-items: center;
  padding: 0.875rem;
  background: var(--card);
  border-radius: var(--radius-card);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.story-step .device {
  max-width: 11rem;
}

.story-text {
  flex: 1 1 9rem;
  min-width: 0;
}

.story-text h3 {
  margin-bottom: 0.35em;
}

.story-text p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.5;
}

.story-visual {
  flex: 1 1 100%;
}

@media (min-width: 40rem) and (max-width: 59.99rem) {
  .story-steps {
    grid-template-columns: 1fr 1fr;
  }

  .story-step {
    align-items: flex-start;
  }

  /* An odd step out spans the row, so no empty cell is left beside it. */
  .story-step:last-child:nth-child(odd) {
    --device-width: 14%;
    grid-column: 1 / -1;
  }
}

@media (min-width: 60rem) {
  .story-grid {
    display: grid;
    grid-template-columns: 22rem minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }

  .story-phone {
    --device-width: 17rem; /* 555 px tall */
    position: sticky;
    top: max(1.5rem, calc(50vh - 17rem));
    display: flex;
    justify-content: center;
  }

  .story-steps {
    gap: 0;
  }

  .story-step {
    display: block;
    padding: 1.5rem 0;
    background: none;
    border: 0;
    border-radius: 0;
    border-top: 1px solid var(--divider);
    box-shadow: none;
  }

  /* The step the phone is showing: a mint bar beside its heading. */
  .story-text h3 {
    position: relative;
  }

  .story-text h3::before {
    content: "";
    position: absolute;
    left: -1.25rem;
    top: 0.1em;
    bottom: 0.1em;
    width: 4px;
    border-radius: 2px;
    background: var(--mint);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .story-step.is-current h3::before {
    opacity: 1;
  }

  .story-step:first-child {
    border-top: 0;
    padding-top: 1rem;
  }

  .story-step .device {
    display: none;
  }

  .story-text h3 {
    font-size: 1.625rem;
  }

  .story-text p {
    max-width: 34rem;
    font-size: 1.125rem;
  }

  .story-visual {
    margin-top: 1.25rem;
  }
}

/* ---------- Notification (Track it your way, Live) ---------- */

.notification {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  width: 100%;
  max-width: 22rem;
  padding: 0.85rem 1rem;
  background: var(--control);
  border-radius: 1.4rem;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.45);
}

.notification-icon {
  flex: none;
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.6rem; /* like an iOS notification's app icon */
}

.notification-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.notification-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.notification-title {
  font-weight: 600;
  color: var(--text);
}

.notification-text {
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

/* ---------- Airplane mode toggle (airplane step) ---------- */

.airplane {
  width: 100%;
  max-width: 22rem;
  padding: 0.25rem 0;
  background: var(--background);
  border-radius: var(--radius-field);
}

.airplane-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 1rem;
  font-weight: 500;
}

.airplane-row + .airplane-row {
  border-top: 1px solid var(--divider);
}

.airplane-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.45rem;
  background: var(--amber);
  color: var(--background);
}

.airplane-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

.airplane-icon-off {
  background: var(--control);
  color: var(--text-tertiary);
}

.airplane-name {
  flex: 1;
}

.airplane-value {
  color: var(--text-tertiary);
}

.airplane-row-muted .airplane-name {
  color: var(--text-secondary);
}

.toggle {
  position: relative;
  flex: none;
  width: 3rem;
  height: 1.8rem;
  border-radius: 999px;
  background: var(--mint);
}

.toggle-knob {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* ---------- Comparison table ---------- */

.compare-wrap {
  margin-top: 1.25rem;
}

.compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: clamp(0.8125rem, 0.75rem + 0.35vw, 1rem);
  table-layout: fixed;
}

.compare th,
.compare td {
  padding: 0.7rem 0.4rem;
  border-bottom: 1px solid var(--divider);
  text-align: center;
  vertical-align: middle;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.compare thead th {
  font-weight: 600;
  color: var(--text-secondary);
  vertical-align: bottom;
}

.compare tbody th {
  text-align: left;
  font-weight: 500;
  padding-left: 0;
}

.compare thead td,
.compare thead th {
  border-bottom-color: var(--text-tertiary);
}

.compare .compare-us {
  background: var(--mint-background);
  color: var(--text);
}

.compare thead .compare-us {
  border-radius: var(--radius-field) var(--radius-field) 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05em;
}

.compare tbody tr:last-child .compare-us {
  border-radius: 0 0 var(--radius-field) var(--radius-field);
}

.mark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-secondary);
}

.mark::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 2px solid var(--text-tertiary);
}

.mark-good {
  color: var(--text);
  font-weight: 600;
}

.mark-good::before {
  border-color: var(--mint);
  background: var(--mint);
}

@media (min-width: 48rem) {
  .compare th,
  .compare td {
    padding: 0.8rem 1rem;
  }
  .compare tbody th {
    width: 32%;
  }
  .mark {
    flex-direction: row;
    gap: 0.5rem;
  }
}

/* ---------- Short FAQ ---------- */

.faq-more {
  margin: 1.25rem 0 0;
  font-weight: 600;
}

/* ---------- Two short sections side by side, and side headings ---------- */

.pair {
  display: grid;
  gap: 2rem 4rem;
}

.split {
  display: grid;
  gap: 0 4rem;
}

/* Phones: the steps as a compact list rather than cards. */
@media (max-width: 47.99rem) {
  .steps {
    gap: 0;
  }

  .steps .card {
    padding: 0.85rem 0;
    background: none;
    border-radius: 0;
    border-bottom: 1px solid var(--divider);
  }

  .steps .card:first-child {
    border-top: 1px solid var(--divider);
  }
}

@media (min-width: 64rem) {
  .pair {
    grid-template-columns: 1fr 1fr;
  }

  .pair .features {
    grid-template-columns: 1fr;
  }

  .split {
    grid-template-columns: 1fr 2fr;
  }

  .pricing {
    grid-template-columns: 1fr;
  }

  .split .promise {
    margin-top: 0;
  }
}

/* ---------- Track it your way: three cards ---------- */

.ways {
  display: grid;
  gap: 1rem;
}

@media (min-width: 56rem) {
  .ways {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

.way {
  display: flex;
  flex-direction: column;
}

.way .notification {
  padding: 0.7rem 0.85rem;
  box-shadow: none;
}

/* Each card's picture sits at its foot, so the three line up. */
.way-visual {
  margin-top: auto;
}

.way > p {
  margin-bottom: 0;
}

.way > p:has(+ .notification) {
  margin-bottom: 1rem;
}

@media (min-width: 56rem) {
  .way > p {
    margin-bottom: 1rem;
  }
}

.mini {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0.9rem;
  background: var(--control);
  border-radius: 1.1rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.mini-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.mini-sum {
  margin-top: 0.15rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--divider);
  color: var(--text);
  font-weight: 600;
}

.mini-ok {
  justify-self: start;
  margin-top: 0.35rem;
  padding: 0.05rem 0.6rem;
  border-radius: 999px;
  background: var(--mint-background);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
}

.mini-estimate {
  background: var(--background);
}

/* Stacked, the cards need no pictures to line up; only Live keeps its own. */
@media (max-width: 55.99rem) {
  .way .mini {
    display: none;
  }
}

/* ---------- Heads-up when it matters ---------- */

.alerts {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--divider);
}

.alerts li {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name tag" "text text";
  gap: 0.1rem 0.75rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--divider);
}

.alert-name {
  grid-area: name;
}

.alert-text {
  grid-area: text;
}

.alerts .tag {
  grid-area: tag;
  justify-self: end;
}

.alerts .alert-name {
  font-weight: 600;
}

.alert-text {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.alerts-note {
  margin: 0.75rem 0 0;
}

.tag-free {
  background: var(--control);
}

/* ---------- Questions, beside the waitlist form on wide screens ---------- */

.waitlist-faq h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
}

@media (min-width: 64rem) {
  .waitlist {
    grid-template-rows: auto 1fr;
    row-gap: 1rem;
  }

  .waitlist .form-card {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .waitlist-faq {
    grid-column: 1;
  }
}

/* Phones: lists a little tighter. */
@media (max-width: 35.99rem) {
  .way .notification {
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
  }

  .features li,
  .alerts li {
    padding-block: 0.55rem;
  }

  .compare th,
  .compare td {
    padding-block: 0.55rem;
  }
}

/* Wide screens: each heads-up on one line, its name in a column. */
@media (min-width: 64rem) {
  .alerts li {
    grid-template-columns: 10.5rem 1fr auto;
    grid-template-areas: "name text tag";
    gap: 1rem;
  }
}

/* ---------- Receipts ---------- */

.receipts {
  display: grid;
  gap: 1.5rem 3.5rem;
  align-items: center;
}

.receipts .section-intro {
  margin-bottom: 1rem;
}

.receipt-points {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--divider);
}

.receipt-points li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--divider);
  color: var(--text-secondary);
}

.receipt-points li:last-child {
  border-bottom: 0;
}

.receipt-points strong {
  color: var(--text);
  font-weight: 600;
}

/* The illustration: a paper receipt and, at its lower right corner, the
   search that found it. The search card covers only an empty strip of the
   paper beside the barcode, never the total or the torn edge. */
.receipt-visual {
  --receipt-width: 22.5rem; /* 360 px */
  --search-width: 16rem;
  --search-overlap: 6rem;
  position: relative;
  justify-self: center;
  width: calc(var(--receipt-width) + var(--search-width) - var(--search-overlap));
  max-width: 100%;
}

.receipt-paper {
  width: var(--receipt-width);
  max-width: 100%;
  filter: var(--paper-shadow);
}

.receipt {
  padding: 1.35rem 1.5rem 1.6rem;
  background: var(--paper);
  color: #16181c;
  border-radius: 0.4rem 0.4rem 0 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  /* Torn bottom edge */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x;
}

.receipt p {
  margin: 0;
  text-align: center;
}

.receipt-store {
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.receipt-meta {
  margin-bottom: 0.75rem !important;
  color: #3d4148;
}

.receipt-lines {
  margin: 0;
}

.receipt-lines div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.receipt-lines dd {
  margin: 0;
}

.receipt-sub {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px dashed #5e636b;
}

.receipt-total {
  margin: 0.45rem -0.45rem 0;
  padding: 0.25rem 0.45rem;
  background: #ddf3e7;
  outline: 2px solid #1c7f53;
  border-radius: 0.3rem;
  font-weight: 700;
  font-size: 1.0625rem;
}

.receipt-foot {
  margin-top: 1.1rem !important;
  padding-top: 0.75rem;
  border-top: 1px dashed #5e636b;
  color: #3d4148;
}

.receipt-barcode {
  display: block;
  width: 9.5rem;
  height: 2.75rem;
  margin: 0.75rem auto 0;
  background: repeating-linear-gradient(90deg, #16181c 0 2px, transparent 2px 4px, #16181c 4px 5px, transparent 5px 8px, #16181c 8px 11px, transparent 11px 13px);
}

.receipt-search {
  position: absolute;
  left: calc(var(--receipt-width) - var(--search-overlap));
  bottom: 1.25rem; /* clear of the torn edge */
  display: grid;
  gap: 0.3rem;
  width: var(--search-width);
  padding: 0.7rem 0.85rem;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 1.1rem;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.45);
  font-size: 0.9375rem;
}

.receipt-query {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.15rem;
  padding: 0.25rem 0.7rem;
  background: var(--control);
  border-radius: 999px;
  color: var(--text);
}

.receipt-query svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--text-tertiary);
}

.receipt-result {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-weight: 600;
}

.receipt-found {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.receipt-found b {
  color: var(--accent-text);
}

@media (prefers-color-scheme: dark) {
  .receipt-search {
    background: var(--control);
    border-color: var(--divider);
  }

  .receipt-query {
    background: var(--background);
  }
}

/* Narrow screens: the receipt up to 340 px, the search card right under it. */
@media (max-width: 35.99rem) {
  .receipt-visual {
    width: 100%;
  }

  .receipt-paper,
  .receipt-search {
    width: min(100%, 21.25rem);
    margin-inline: auto;
  }

  .receipt-search {
    position: static;
    margin-top: 0.75rem;
  }

  .receipt-item {
    display: none !important;
  }

  .receipt-sub {
    margin-top: 0;
  }

  .receipt-time,
  .receipt-foot,
  .receipt-barcode {
    display: none;
  }

  .receipt-points li {
    font-size: 0.9375rem;
  }

  .receipts {
    gap: 1rem;
  }

  .pricing .card p,
  .pricing .card li {
    font-size: 0.9375rem;
  }
}

/* Wide screens: text and receipt side by side, centred on each other. */
@media (min-width: 64rem) {
  .receipts {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}