:root {
  --ink: #1a1a2e;
  --paper: #fdfdfb;
  --accent: #d94f4f;
  --accent-ink: #ffffff;
  --muted: #6b6b7b;
  --brand-mute: #b7b7c0;
  --line: #e4e2dd;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
}
.ftl-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}
.ftl-brand {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--brand-mute);
  text-decoration: none;
}
.ftl-tag {
  font-size: 0.8rem;
  color: var(--muted);
}
main {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 24px;
}
.ftl-hero h1 {
  font-size: 1.9rem;
  line-height: 1.25;
  margin: 0 0 16px;
}
.ftl-pitch {
  font-size: 1.05rem;
  color: #333;
  margin-bottom: 28px;
}
/* --- Subhead (proof/stakes line) + urgency line (copy pass, 2026-07-30) --- */
.ftl-subhead {
  font-size: 1.08rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: -10px 0 20px;
  line-height: 1.5;
}
.ftl-urgency {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 20px;
}
.ftl-cta-row { margin-bottom: 12px; }
.ftl-cta {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 14px 22px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
}
.ftl-cta-wide { width: 100%; text-align: center; }
.ftl-secondary-btn {
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
}
.ftl-meta { color: var(--muted); font-size: 0.9rem; }
.ftl-mockup-section { margin-top: 32px; }
.ftl-mockup-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 600;
}
.ftl-mockup {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fbfbf9;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ftl-mockup-bar {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  background: #f1f0ec;
  border-bottom: 1px solid var(--line);
}
.ftl-mockup-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d8d6cf;
  display: inline-block;
}
.ftl-mockup-body {
  margin: 0;
  padding: 18px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: #2a2a35;
}
.ftl-demo, .ftl-checkout { margin-top: 36px; }
.ftl-demo textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.ftl-verdict {
  margin-top: 20px;
  padding: 16px;
  border-radius: 8px;
  background: #fff6f6;
  border: 1px solid #f1cdcd;
}
.ftl-verdict a.ftl-cta { margin-top: 14px; }
.ftl-price { font-size: 1.3rem; font-weight: 700; margin-bottom: 24px; }
.ftl-wallet-row { display: flex; gap: 10px; margin-bottom: 18px; }
.ftl-wallet-btn {
  flex: 1;
  height: 46px;
  border-radius: 8px;
  border: 1px solid var(--line);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.ftl-wallet-apple {
  background: #000;
  color: #fff;
  border: none;
  font-family: -apple-system, "SF Pro Text", Helvetica, Arial, sans-serif;
}
.ftl-wallet-google {
  background: #fff;
  color: #3c4043;
}
.ftl-gpay-g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4285f4;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}
.ftl-wallet-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  margin-bottom: 18px;
}
.ftl-wallet-divider::before, .ftl-wallet-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--line);
}
.ftl-wallet-divider span { padding: 0 12px; }
form label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 14px;
}
form input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 1rem;
}
.ftl-row { display: flex; gap: 14px; }
.ftl-row label { flex: 1; }
.ftl-hidden { display: none; }
#ftl-checkout-msg {
  margin-top: 16px;
  padding: 14px;
  background: #f2f7f2;
  border: 1px solid #cfe3cf;
  border-radius: 8px;
}
.ftl-fineprint { color: var(--muted); font-size: 0.82rem; margin-top: 20px; }
.ftl-index { display: grid; gap: 14px; margin-top: 32px; }
.ftl-index-card {
  display: block;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
}
.ftl-index-card h2 { margin: 0 0 6px; font-size: 1.1rem; }
.ftl-index-card p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.ftl-index-card p.ftl-index-meta { margin-top: 8px; font-size: 0.8rem; color: var(--brand-mute); }
.ftl-footer {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px;
  color: var(--muted);
  font-size: 0.8rem;
  border-top: 1px solid var(--line);
}
.ftl-footer a { color: var(--muted); }
.ftl-brand-mute { color: var(--brand-mute); }
a.ftl-brand.ftl-brand-mute-link { color: var(--brand-mute); }
.ftl-legal {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 24px;
}
.ftl-legal h1 { font-size: 1.5rem; margin-bottom: 8px; }
.ftl-legal h2 { font-size: 1.05rem; margin-top: 28px; margin-bottom: 8px; }
.ftl-legal p, .ftl-legal li { color: #333; font-size: 0.95rem; }
.ftl-legal .ftl-updated { color: var(--muted); font-size: 0.85rem; margin-bottom: 28px; }

/* --- Stats dashboard --- */
main:has(.ftl-dash) { max-width: 960px; }
.ftl-dash {
  color-scheme: light;
  --dash-surface: #fcfcfb;
  --dash-text-primary: #0b0b0b;
  --dash-text-secondary: #52514e;
  --dash-muted: #898781;
  --dash-grid: #e1e0d9;
  --dash-series-1: #2a78d6;
  --dash-series-2: #eb6834;
  --dash-series-3: #1baf7a;
}
@media (prefers-color-scheme: dark) {
  .ftl-dash {
    color-scheme: dark;
    --dash-surface: #1a1a19;
    --dash-text-primary: #ffffff;
    --dash-text-secondary: #c3c2b7;
    --dash-muted: #898781;
    --dash-grid: #2c2c2a;
    --dash-series-1: #3987e5;
    --dash-series-2: #d95926;
    --dash-series-3: #199e70;
  }
}
.ftl-dash-title { font-size: 1.6rem; margin: 0 0 4px; }
.ftl-dash-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 24px 0 32px;
}
.ftl-stat-tile {
  background: var(--dash-surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
}
.ftl-stat-tile-label {
  font-size: 0.74rem;
  color: var(--dash-muted);
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ftl-stat-tile-value { font-size: 1.7rem; font-weight: 700; color: var(--dash-text-primary); margin: 0; }
.ftl-stat-tile-value-sm { font-size: 1.02rem; font-weight: 600; line-height: 1.3; }

.ftl-dash-chart { margin-bottom: 36px; }
.ftl-dash-legend {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
  font-size: 0.85rem;
  color: var(--dash-text-secondary);
  flex-wrap: wrap;
}
.ftl-legend-item { display: flex; align-items: center; gap: 6px; }
.ftl-legend-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.ftl-series-1 { background: var(--dash-series-1); }
.ftl-series-2 { background: var(--dash-series-2); }
.ftl-series-3 { background: var(--dash-series-3); }

.ftl-stat-group { margin-bottom: 18px; }
.ftl-stat-group-label { font-size: 0.92rem; font-weight: 600; margin: 0 0 6px; color: var(--dash-text-primary); }
.ftl-stat-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; }
.ftl-stat-bar-track {
  flex: 1;
  height: 16px;
  background: var(--dash-grid);
  border-radius: 4px;
  overflow: hidden;
}
.ftl-stat-bar { height: 100%; border-radius: 4px; min-width: 2px; }
.ftl-stat-bar-value {
  width: 30px;
  text-align: right;
  font-size: 0.82rem;
  color: var(--dash-text-secondary);
  font-variant-numeric: tabular-nums;
}

.ftl-dash-table-wrap { overflow-x: auto; }
.ftl-dash-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ftl-dash-table th, .ftl-dash-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ftl-dash-table th {
  color: var(--dash-muted);
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ftl-dash-table a { color: var(--ink); text-decoration: none; font-weight: 600; }
.ftl-dash-table a:hover { text-decoration: underline; }
.ftl-dash-footnote { margin-top: 18px; }
@media (max-width: 600px) {
  .ftl-dash-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* --- Product screenshot mockups (image-based) --- */
.ftl-mockup-shot { margin-top: 32px; }
.ftl-mockup-shot picture { display: block; }
.ftl-mockup-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
/* Phone-first: let the screenshot run edge to edge on small screens
   so the phone renders close to life size. */
@media (max-width: 620px) {
  .ftl-mockup-shot { margin-left: -24px; margin-right: -24px; }
  .ftl-mockup-shot .ftl-mockup-label { padding-left: 24px; }
  .ftl-mockup-img { border-radius: 0; }
}
/* Wide screens: break the desktop card out of the 640px reading column
   so its three-column stat row stays legible. */
@media (min-width: 1040px) {
  .ftl-mockup-shot { width: 860px; margin-left: -134px; }
}

/* --- Mockup carousel --- */
.ftl-carousel-head { margin-bottom: 12px; }
.ftl-carousel-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ftl-carousel-tab {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.ftl-carousel-tab.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  font-weight: 600;
}
.ftl-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
}
.ftl-carousel-track::-webkit-scrollbar { display: none; }
.ftl-carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  min-width: 0;
}
.ftl-carousel-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}
.ftl-carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
.ftl-carousel-arrow:disabled { opacity: 0.35; cursor: default; }
.ftl-carousel-dots { display: flex; gap: 8px; align-items: center; }
.ftl-carousel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: #d5d3cc;
  cursor: pointer;
}
.ftl-carousel-dot.is-active { background: var(--ink); }
.ftl-carousel-hint {
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
  margin: 8px 0 0;
}
@media (min-width: 760px) { .ftl-carousel-hint { display: none; } }
@media (max-width: 620px) {
  .ftl-carousel-head, .ftl-carousel-foot, .ftl-carousel-hint { padding-left: 24px; padding-right: 24px; }
  .ftl-carousel-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ftl-carousel-tabs::-webkit-scrollbar { display: none; }
}

/* --- Objection block --- */
.ftl-objection { margin-top: 40px; }
.ftl-objection h2 { font-size: 1.15rem; margin: 0 0 12px; }
.ftl-objection ul { margin: 0; padding-left: 20px; }
.ftl-objection li { font-size: 0.95rem; line-height: 1.55; color: #333; margin-bottom: 10px; }

/* --- Product name + audience eyebrow --- */
.ftl-product {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 14px;
}
.ftl-product-mark {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: #b4472f;
  display: inline-block;
  position: relative;
  flex: none;
}
.ftl-product-mark::after {
  content: "";
  position: absolute;
  top: 7px; left: 7px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: #fff;
}
.ftl-eyebrow {
  display: inline-block;
  background: #f4ece3;
  border: 1px solid #e7d9c9;
  color: #8a4a2c;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

/* --- "it does other things too" --- */
.ftl-also { margin-top: 22px; }
.ftl-also-lead { font-size: 0.9rem; color: #333; margin: 0 0 10px; }
.ftl-also-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ftl-also-chip {
  font-size: 0.8rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 11px;
  background: #fff;
}
.ftl-also-more { border-style: dashed; color: #8a4a2c; font-weight: 600; }
@media (max-width: 620px) {
  .ftl-also { padding-left: 24px; padding-right: 24px; }
}

/* --- Labellito wordmark logo --- */
.ftl-logo {
  font-size: 1.55rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 16px;
}
.ftl-logo-accent { color: #b4472f; }

/* --- Waitlist page --- */
.ftl-wl-head { font-size: 1.6rem; line-height: 1.2; margin: 6px 0 16px; }
.ftl-wl-list { margin: 0 0 26px; padding-left: 20px; }
.ftl-wl-list li { font-size: 1rem; line-height: 1.55; color: #333; margin-bottom: 11px; }
.ftl-verdict-good { background: #f2f7f2; border-color: #cfe3cf; }

form select {
  display: block; width: 100%; margin-top: 6px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 6px; font-size: 1rem;
  background: #fff; color: var(--ink); font-family: inherit;
}
.ftl-why-ask { font-size: 0.82rem; color: var(--muted); margin: -6px 0 16px; }

/* --- Cookie consent banner (job 3, 2026-07-29; collapsed-by-default fix
   2026-07-30 — the old always-3-buttons layout could grow to ~170px tall
   on a phone and, since the banner is `position: fixed` to the bottom of
   the viewport, that covered/cropped the price and CTA on first mobile
   load, before anyone had a chance to dismiss it. Collapsing to a slim
   one-line bar by default (tap "Choose" for the 3 equal options) keeps the
   banner's footprint small enough that it can't do that, on any page. ---
   */
.ftl-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--ink);
  color: #fff;
  padding: 12px 24px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}
.ftl-consent-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ftl-consent-text {
  margin: 0;
  font-size: 0.85rem;
  color: #fff;
}
.ftl-consent-toggle {
  flex: none;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.ftl-consent-toggle:hover,
.ftl-consent-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}
.ftl-consent-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.ftl-consent-actions[hidden] {
  display: none;
}
.ftl-consent-btn {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
.ftl-consent-btn:hover,
.ftl-consent-btn:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}
@media (max-width: 620px) {
  .ftl-consent {
    padding: 10px 16px;
  }
  .ftl-consent-text {
    font-size: 0.8rem;
  }
}

/* --- Privacy page consent table + inline code (added 2026-07-29) --- */
.ftl-legal code {
  background: #f1efe9;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.85em;
}
.ftl-consent-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 20px;
  font-size: 0.9rem;
}
.ftl-consent-table th, .ftl-consent-table td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: #333;
}
.ftl-consent-table th {
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* --- reserve space so the fixed consent banner never covers the footer.
   These are just the static fallback for the instant before consent.js
   measures the banner's real (collapsed or expanded) height and sets it
   inline on body — see syncBodyPadding() there. --- */
body.ftl-has-consent-banner {
  padding-bottom: 60px;
}
@media (max-width: 620px) {
  body.ftl-has-consent-banner {
    padding-bottom: 72px;
  }
}