/* ===================================================================
   FEATURE PAGE — the shared stylesheet behind the pages under features/.

   The first half is the page chrome, copied out of index.html's inline
   <style> so the navbar, mobile menu, cookie banner and .cn2-pill look
   and behave identically on a feature page. Kept in one file rather than
   inlined nine times: this is the half that must never drift.

   The second half is the template's own layout, and the Lead Capture
   illustration — the leads console table (templates/leads.html) and the
   lead journey (pwa/templates/pwa/_journey.html) rebuilt in the landing
   page's tokens.
   =================================================================== */

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter Tight', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #f5f5f5;
}

/* --- persistent navbar (copied from index.html) --- */
#hero-nav-wrap {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    transition: background-color .35s ease, box-shadow .35s ease;
  }
  #hero-nav-wrap.is-stuck {
    background: rgba(12,12,12,0.72);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08), 0 8px 30px rgba(0,0,0,0.25);
  }
  /* ...and its light twin. The page alternates dark and light sections, and a dark bar
     sitting on a light one reads as a foreign object laid over the page rather than as
     part of it. So the bar takes the tone of whatever is under it: the script measures
     the section beneath the bar's own bottom edge and flips .is-light.
     Everything that carries ink flips with it — the links, the logo (the black one is
     already in the markup, stacked under the white), the burger and the CTA. The
     selectors carry the id so they outrank the Tailwind colour utilities on the elements
     themselves, which the CDN injects at runtime and would otherwise win on source order. */
  #hero-nav-wrap.is-light.is-stuck {
    background: rgba(250,250,250,0.72);
    box-shadow: inset 0 -1px 0 rgba(41,41,25,0.10), 0 8px 30px rgba(41,41,41,0.07);
  }
  #hero-nav-wrap .nav-tint,
  #hero-nav-wrap #hero-book-demo,
  #hero-logo-white, #hero-logo-black {
    transition: color .3s ease, background-color .3s ease, opacity .3s ease;
  }
  #hero-nav-wrap.is-light .nav-tint { color: #292919; }
  #hero-nav-wrap.is-light #hero-logo-white { opacity: 0; }
  #hero-nav-wrap.is-light #hero-logo-black { opacity: 1; }
  #hero-nav-wrap.is-light #hero-book-demo {
    color: #292919; background-color: rgba(41,41,25,0.06);
  }
  #hero-nav-wrap.is-light #hero-book-demo:hover { background-color: rgba(41,41,25,0.12); }
  #hero > .relative.z-10 { padding-top: var(--nav-h, 106px); }

/* --- grid overlay (copied from index.html) --- */
.grid-overlay {
    background-image:
      /* 25px fine subdivisions */
      linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px),
      /* 100px cell borders */
      linear-gradient(to right, rgba(255,255,255,0.03) 2px, transparent 2px),
      linear-gradient(to bottom, rgba(255,255,255,0.03) 2px, transparent 2px),
      /* small filled corner marks at every 100px intersection */
      radial-gradient(rgba(255,255,255,0.08) 1.5px, transparent 1.6px);
    background-size: 25px 25px, 25px 25px, 100px 100px, 100px 100px, 100px 100px;
    background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px, -1px -1px;
    /* smooth vignette fade-out at the top only */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0px, rgba(0,0,0,1) 240px);
    mask-image: linear-gradient(to bottom, transparent 0px, rgba(0,0,0,1) 240px);
  }

  /* Same grid pattern

/* --- CTA ring (copied from index.html) --- */
.gradient-border-ring {
    background: conic-gradient(from var(--ring-angle, 0deg), #007ef7 0deg, #4ba66a 72deg, #fbbc05 108deg, #ff0000 144deg, #007ef7 180deg, #ff0000 216deg, #fbbc05 252deg, #4ba66a 288deg, #007ef7 360deg);
  }

  /* Registered so the conic angle is a real <angle> (GSAP drives it on hover) */
  @property --ring-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }

/* --- cn2-pill (copied from index.html) --- */
/* "Integrations" pill: gradient stroke (mask-composite) + soft radial sheen fill */
  .cn2-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #292929;
    white-space: nowrap;
    box-shadow: 0px 2px 6px 0px rgba(41,41,41,0.06);
    background-color: rgba(41,41,41,0.05);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 81 20' preserveAspectRatio='none'%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3Cdefs%3E%3CradialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-1.7354e-15 1.9167 -16.807 2.134e-15 40.5 0.83333)'%3E%3Cstop stop-color='rgba(255,255,255,1)' offset='0'/%3E%3Cstop stop-color='rgba(193,193,193,0.01)' offset='1'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
    background-size: 100% 100%;
  }
  .cn2-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(270deg, rgba(41,41,41,0.30) 0%, rgba(255,255,255,0.30) 10%, rgba(255,255,255,0.30) 90%, rgba(41,41,41,0.30) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

/* --- mobile menu (copied from index.html) --- */
.mnav { position: fixed; inset: 0; z-index: 100; --mnav-top: 84px;
    /* the root spans the viewport so its children can be positioned against it, but it must
       not be a surface: at z-index 100 it sits over the navbar, and a transparent full-screen
       div still eats clicks — including the burger's own, which is the close button */
    pointer-events: none; }
  .mnav-scrim, .mnav-panel { pointer-events: auto; }
  .mnav[hidden] { display: none; }
  /* transparent, and it starts under the navbar: it exists to catch the tap that dismisses
     the panel, not to dim the page — a dropdown that darkens the whole screen is a modal */
  .mnav-scrim { position: absolute; left: 0; right: 0; bottom: 0; top: var(--mnav-top); }
  .mnav-panel {
    position: absolute; top: var(--mnav-top); left: 20px; right: 20px;
    max-width: 420px; margin-inline: auto;
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px; border-radius: 20px;
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    opacity: 0; transform: translateY(-10px); transform-origin: 50% 0;
    transition: opacity .22s ease, transform .26s cubic-bezier(.22,.61,.36,1);
  }
  .mnav.is-open .mnav-panel { opacity: 1; transform: none; }
  .mnav-link {
    display: flex; align-items: center;
    padding: 13px 14px; border-radius: 14px;
    font-size: 16px; font-weight: 600; line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
  }
  .mnav-cta {
    display: flex; align-items: center; justify-content: center;
    margin-top: 6px; padding: 14px 24px; border-radius: 14px;
    font-size: 16px; font-weight: 600; line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
  }

  /* Light panels (the default): the house card treatment — white ground, #FFFFFF border,
     the 0 4px 20px shadow, #292919 ink. */
  .mnav-panel {
    border: 1px solid #FFFFFF;
    background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(252,252,252,0.94) 100%);
    box-shadow: 0 12px 34px rgba(41,41,41,0.12);
  }
  /* Ink on the PANEL, not only on .mnav-link: the Features sub-list is plain <a>s
     carrying color:inherit, and with the colour declared one level down they inherited
     the document default instead — pure black, in both themes, invisible over a dark
     section. Everything inside the panel now takes its ground's ink. */
  .mnav-panel { color: #292919; }
  .mnav-link { color: #292919; }
  .mnav-cta  { background: #292919; color: #FFFFFF; }
  .mnav-link:active { background: rgba(41,41,25,0.06); }

  /* Dark panels — hero, Built, Airmind. Same shapes, inverted ground, so the dropdown
     belongs to the section it drops onto instead of flashing a white slab over it. */
  .mnav[data-theme="dark"] .mnav-panel {
    border: 1px solid rgba(255,255,255,0.16);
    background: linear-gradient(180deg, rgba(28,28,28,0.92) 0%, rgba(18,18,18,0.90) 100%);
    box-shadow: 0 12px 34px rgba(0,0,0,0.45);
  }
  .mnav[data-theme="dark"] .mnav-panel { color: #FFFFFF; }
  .mnav[data-theme="dark"] .mnav-link { color: #FFFFFF; }
  .mnav[data-theme="dark"] .mnav-cta  { background: #FFFFFF; color: #292919; }
  .mnav[data-theme="dark"] .mnav-link:active { background: rgba(255,255,255,0.10); }

  /* the burger doubles as the close button */
  .mnav-glyph { transition: opacity .18s ease; }
  #mobile-menu-btn .mnav-glyph--x { opacity: 0; }
  #mobile-menu-btn[aria-expanded="true"] .mnav-glyph--bars { opacity: 0; }
  #mobile-menu-btn[aria-expanded="true"] .mnav-glyph--x { opacity: 1; }
  /* the full navbar is back at this width — the overlay must never be reachable */
  @media (min-width: 768px) { .mnav { display: none !important; } }

/* --- cookie banner (copied from index.html) --- */
.ck {
    position: fixed; z-index: 90;
    left: 20px; bottom: 20px; width: calc(100vw - 40px); max-width: 380px;
    padding: 18px 20px 20px;
    border: 1px solid rgba(255,255,255,0.8); border-radius: 20px;
    /* Glass, not paint: the ground is see-through enough for the section behind it to
       come through the blur, which is what stops the card reading as a flat rectangle
       stuck on top of the page. */
    background: linear-gradient(165deg, rgba(255,255,255,0.88) 0%, rgba(252,252,252,0.70) 100%);
    -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
    /* The depth, in four parts and in this order: a lit top edge and a shaded bottom one
       (the card has thickness), a hairline ring so it still separates on a white section,
       then a contact shadow and a wide ambient one — near and far, rather than one blur
       doing both, which is what reads as floating rather than as printed. */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.95),
      inset 0 -1px 0 rgba(41,41,25,0.06),
      0 0 0 1px rgba(41,41,25,0.05),
      0 2px 5px rgba(41,41,41,0.05),
      0 10px 20px rgba(41,41,41,0.07),
      0 26px 50px rgba(41,41,41,0.13);
    font-family: 'Inter Tight', sans-serif;
    /* parked out of the way until the script arms it, so it cannot flash on a cold load
       or sit over the page for a reader who has already answered. It rises AND grows the
       last of the way in, so it arrives toward the reader rather than sliding up a wall. */
    opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.985);
    transform-origin: 0% 100%;
    transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1), visibility .45s;
  }
  .ck.is-in { opacity: 1; visibility: visible; transform: none; }
  /* the badge sits ON the glass rather than in it — a touch of lift of its own */
  .ck .cn2-pill { box-shadow: 0 1px 3px rgba(41,41,41,0.08); }
  .ck[hidden] { display: none; }
  @media (min-width: 1024px) { .ck { left: 24px; bottom: 24px; } }

  .ck-title {
    margin-top: 12px;
    font-size: 17px; font-weight: 600; line-height: 1.15; color: #292919;
  }
  .ck-copy {
    margin-top: 7px;
    font-family: 'Inter', sans-serif;
    font-size: 13px; line-height: 1.45; color: rgba(41,41,25,0.6);
  }
  .ck-copy a { color: #292919; text-decoration: underline; text-underline-offset: 2px; }
  .ck-copy a:hover { opacity: 0.7; }

  .ck-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
  .ck-btn {
    flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center;
    height: 42px; border-radius: 14px;
    font-size: 14px; font-weight: 600; line-height: 1;
    transition: background-color .2s ease, box-shadow .2s ease, transform .12s ease, opacity .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  /* Both buttons carry the same lit-top-edge-plus-contact-shadow recipe as the card, one
     step smaller — so they read as sitting on it rather than cut out of it. And both press:
     the lift goes away under the pointer. */
  .ck-btn--accept {
    background: linear-gradient(180deg, #3b3b2b 0%, #292919 100%); color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 2px 6px rgba(41,41,25,0.26);
  }
  .ck-btn--accept:hover { background: linear-gradient(180deg, #474736 0%, #333322 100%); }
  .ck-btn--decline {
    background: rgba(255,255,255,0.55); color: #292919;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 0 0 1px rgba(41,41,25,0.09),
                0 1px 3px rgba(41,41,41,0.05);
  }
  .ck-btn--decline:hover { background: rgba(255,255,255,0.85); }
  .ck-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(41,41,25,0.18); }

  /* --- the re-open control ---------------------------------------------------
     Takes the banner's corner once the banner has left it, so the two are never both
     there. Same glass family, one step lighter and more transparent — it is a control
     sitting on the page rather than a card the reader has to deal with. */
  .ck-toggle {
    position: fixed; z-index: 89;
    left: 20px; bottom: 20px;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 14px;
    color: #292919;
    border: 1px solid rgba(255,255,255,0.7);
    background: linear-gradient(165deg, rgba(255,255,255,0.62) 0%, rgba(252,252,252,0.44) 100%);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.9),
      0 0 0 1px rgba(41,41,25,0.05),
      0 2px 5px rgba(41,41,41,0.06),
      0 8px 18px rgba(41,41,41,0.10);
    opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.9);
    transition: opacity .35s ease, transform .35s cubic-bezier(.22,.61,.36,1),
                visibility .35s, background-color .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .ck-toggle.is-in { opacity: 1; visibility: visible; transform: none; }
  .ck-toggle:hover { background: linear-gradient(165deg, rgba(255,255,255,0.8) 0%, rgba(252,252,252,0.62) 100%); }
  .ck-toggle:active { transform: translateY(1px); }
  .ck-toggle svg { width: 21px; height: 21px; display: block; }
  @media (min-width: 1024px) { .ck-toggle { left: 24px; bottom: 24px; } }

  @media (prefers-reduced-motion: reduce) { .ck, .ck-toggle { transition: none; } }

/* index.html pays the bar's height back on #hero; here the top section does it. */
.fp-top { padding-top: var(--nav-h, 106px); }
/* scroll lock while the mobile menu is open, and its reduced-motion arm */
.mnav-open, .mnav-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .mnav-panel { transition: none; } }

/* ===================================================================
   THE TEMPLATE
   Layout comes from Tailwind utilities in the markup, as it does on the
   homepage. What lives here is the handful of house elements Tailwind
   has no word for.
   =================================================================== */

/* Headings break into even lines instead of stranding one word on the last one.
   Narrow columns are where it shows — a five-word line and then "number" alone. */
.fp-top h1, section h2 { text-wrap: balance; }

/* The light card, at the tokens the hero KPI cards use (index.html:2542). */
.fp-card {
  background: linear-gradient(to bottom, rgba(255,255,255,0.7), rgba(255,255,255,0.55));
  border: 1px solid #FFFFFF; border-radius: 20px;
  box-shadow: 0 4px 20px rgba(41,41,41,0.04);
}
.fp-card-title { font-size: 17px; font-weight: 600; line-height: 1.2; color: #292919; }
.fp-card-copy {
  margin-top: 8px; font-family: 'Inter', sans-serif;
  font-size: 14px; line-height: 1.5; color: rgba(41,41,25,0.62);
}
/* the glyph plate at the top of a card — same family as the cookie toggle */
.fp-card-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 13px; color: #292919;
  border: 1px solid #FFFFFF; background: rgba(41,41,25,0.045);
  box-shadow: 0 2px 6px rgba(41,41,41,0.05);
}
.fp-card-ic svg, .fp-card-ic img { width: 21px; height: 21px; }
.fp-card-ic-pair { display: inline-flex; align-items: center; gap: 4px; }
/* The Airdec mark is already a rounded dark square — a plate around it draws a
   square inside a square, so those cards show the mark on its own. */
.fp-card-ic--plain {
  width: auto; height: 40px; border: 0; background: none; box-shadow: none;
  border-radius: 0;
}
.fp-card-ic--plain img { width: 34px; height: 34px; }
.fp-card-ic--plain svg { width: 34px; height: 34px; }
/* Two marks and their gap are wider than a square plate, and Facebook's edge
   was clipping. The plate follows its contents instead. */
.fp-card-ic--wide { width: auto; min-width: 40px; padding-inline: 9px; }

/* Steps on the dark panel — the number is the ornament, so it carries the
   only colour on the row. */
.fp-step-n {
  font-family: 'Inter Tight', sans-serif; font-size: 13px; font-weight: 600;
  line-height: 1; color: rgba(255,255,255,0.45);
}
.fp-step-h { margin-top: 14px; font-size: 19px; font-weight: 600; line-height: 1.25; color: #FFFFFF; }
.fp-step-p {
  margin-top: 8px; font-family: 'Inter', sans-serif;
  font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,0.62);
}

/* FAQ — a disclosure, built at runtime by assets/chrome.js.
   The markup shipped in every page is a flat <h3> + <p>, and it stays that way:
   the answers are in the document for crawlers and for anyone without JS, and
   the collapse is purely visual. Everything below that depends on the rewrite
   having actually happened is behind .fp-faq-ready, which chrome.js stamps on
   <html> only after it has run — so a failed enhancement degrades to the plain
   text on rules this block used to be. */
.fp-faq-q { font-size: 17px; font-weight: 600; line-height: 1.3; color: #292919; }
.fp-faq-a {
  margin-top: 9px; font-family: 'Inter', sans-serif;
  font-size: 15px; line-height: 1.55; color: rgba(41,41,25,0.62);
}
.fp-faq-list { gap: 24px; }

.fp-faq-ready .fp-faq-list { gap: 0; }
.fp-faq-ready .fp-faq-item { border-top: 1px solid rgba(41,41,25,0.10); }
.fp-faq-ready .fp-faq-item:last-child { border-bottom: 1px solid rgba(41,41,25,0.10); }

/* The button carries the whole row; the <h3> stays wrapped around it, because a
   button may only contain phrasing content and a heading inside one is invalid. */
.fp-faq-trigger {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 18px 0; margin: 0; text-align: left;
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
}
.fp-faq-trigger > span:first-child { flex: 1; }
.fp-faq-chev {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; color: rgba(41,41,25,0.45);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.fp-faq-trigger[aria-expanded="true"] .fp-faq-chev { transform: rotate(180deg); }

/* 0fr → 1fr animates without anyone having to measure the answer. The inner
   wrapper is not optional: it owns the overflow, and without it the answer's own
   margin would escape a collapsed grid row and leave a sliver of text showing. */
.fp-faq-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .34s cubic-bezier(.4,0,.2,1);
}
.fp-faq-inner { overflow: hidden; min-height: 0; }
.fp-faq-item.is-open .fp-faq-panel { grid-template-rows: 1fr; }
.fp-faq-ready .fp-faq-a { margin-top: 0; padding-bottom: 22px; }

@media (prefers-reduced-motion: reduce) {
  .fp-faq-panel, .fp-faq-chev { transition: none; }
}

/* ===================================================================
   LEAD CAPTURE ILLUSTRATION
   The console's leads table (templates/leads.html) with the app's lead
   journey (pwa/_journey.html) overlapping its corner. Both are rebuilt
   here rather than iframed — the app markup is Django-rendered and its
   CSS carries theme variables this page has no use for.
   =================================================================== */
.lc-illu { position: relative; margin-inline: auto; max-width: 1000px; }

.lc-plate { padding: 18px 18px 18px; }
/* The rows live in a clipped track of a fixed height — six rows exactly. New
   leads arrive by moving the list inside it, so the plate's height is a
   constant and nothing below the illustration ever shifts. */
#lc-rows { height: 336px; overflow: hidden; }
.lc-plate-head { display: flex; align-items: center; gap: 10px; padding: 0 6px 14px; }
.lc-plate-title { font-size: 15px; font-weight: 600; line-height: 1; color: #292919; }

/* --- the table. Flex rows, not a <table> — the console builds them the
   same way (templates/leads.html:959). Columns are the console's, scaled
   for a 1000px plate: 120/200/118 becomes 96/150/84. --- */
.leads-table-header {
  font-family: 'Inter', sans-serif; font-weight: 400; font-size: 11px;
  color: rgba(41,41,25,0.5); padding: 0 12px 10px;
  border-bottom: 1px solid #e3e3e3;
}
.leads-table-cell {
  padding: 12px; font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: 13px; color: #292919; min-width: 0;
}
.leads-table-row {
  display: flex; align-items: center; height: 56px;
  border-bottom: 1px solid #e3e3e3;
}
.leads-table-row:last-child { border-bottom: 0; }
.lc-c-status  { width: 96px; display: flex; align-items: center; justify-content: center; }
.lc-c-name    { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.lc-c-source  { width: 132px; }
.lc-c-contact { width: 150px; }
.lc-c-created { width: 84px; }
.lc-name  { font-size: 13px; line-height: 1; }
.lc-sub   { font-size: 11px; line-height: 1; opacity: 0.6; }
.lc-src   { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.lc-src img, .lc-src svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .85; }
.lc-src span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- status badge — the console's desaturated cn2-pill
   (templates/leads.html:176). The hover shine is dropped: nothing here is
   clickable. --- */
.status-badge {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 8px; border-radius: 16px;
  box-shadow: 0 2px 6px rgba(41,41,41,.06);
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 90 20' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-1.9282e-15 1.9167 -18.675 2.134e-15 45 0.83333)'><stop stop-color='rgba(255,255,255,1)' offset='0'/><stop stop-color='rgba(193,193,193,0.01)' offset='1'/></radialGradient></defs></svg>");
  background-size: 100% 100%;
}
.status-badge::before {
  content: ''; position: absolute; inset: 0; border-radius: 16px; padding: 1px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.status-badge.sb-green { background-color: rgba(75,166,106,0.06); }
.status-badge.sb-green::before { background: linear-gradient(270deg, rgba(77,138,99,0.22) 0%, rgba(255,255,255,0.30) 10%, rgba(255,255,255,0.30) 90%, rgba(77,138,99,0.22) 100%); }
.status-badge.sb-red { background-color: rgba(192,57,43,0.05); }
.status-badge.sb-red::before { background: linear-gradient(270deg, rgba(181,102,92,0.22) 0%, rgba(255,255,255,0.30) 10%, rgba(255,255,255,0.30) 90%, rgba(181,102,92,0.22) 100%); }
.status-badge.sb-amber { background-color: rgba(249,221,164,0.18); }
.status-badge.sb-amber::before { background: linear-gradient(270deg, rgba(168,130,64,0.22) 0%, rgba(255,255,255,0.30) 10%, rgba(255,255,255,0.30) 90%, rgba(168,130,64,0.22) 100%); }
.status-badge.sb-grey { background-color: rgba(41,41,25,0.035); }
.status-badge.sb-grey::before { background: linear-gradient(270deg, rgba(41,41,25,0.22) 0%, rgba(255,255,255,0.30) 10%, rgba(255,255,255,0.30) 90%, rgba(41,41,25,0.22) 100%); }
/* Blue — the Geo engine's "opportunity" verdict. The app pills it .cn2-pill.blue
   (geo-map-core.js PERF_STATES); this is that tone, desaturated to match its siblings. */
.status-badge.sb-blue { background-color: rgba(59,130,246,0.06); }
.status-badge.sb-blue::before { background: linear-gradient(270deg, rgba(37,99,235,0.22) 0%, rgba(255,255,255,0.30) 10%, rgba(255,255,255,0.30) 90%, rgba(37,99,235,0.22) 100%); }
.status-badge.sb-violet { background-color: rgba(99,102,241,0.06); }
.status-badge.sb-violet::before { background: linear-gradient(270deg, rgba(123,126,224,0.22) 0%, rgba(255,255,255,0.30) 10%, rgba(255,255,255,0.30) 90%, rgba(123,126,224,0.22) 100%); }
.status-badge.sb-empty { background-color: rgba(41,41,25,0.015); box-shadow: 0 2px 6px rgba(41,41,41,.03); }
.status-badge.sb-empty::before { background: linear-gradient(270deg, rgba(41,41,25,0.08) 0%, rgba(255,255,255,0.15) 10%, rgba(255,255,255,0.15) 90%, rgba(41,41,25,0.08) 100%); }
.status-badge-text {
  position: relative; font-family: 'Inter Tight', sans-serif;
  font-weight: 600; font-size: 12px; line-height: 12px; white-space: nowrap;
}
.status-badge.sb-sm { padding: 3px 7px; }
.status-badge.sb-sm .status-badge-text { font-size: 11px; line-height: 11px; }

/* --- the journey card, overlapping the plate's bottom-right corner --- */
.lc-journey {
  position: absolute; right: -32px; bottom: -30px; z-index: 2;
  width: 336px; padding: 16px 18px 18px;
  /* Glass, on the cookie banner's recipe (index.html:10684): the rows underneath
     come through the blur, which is what makes the card read as sitting ON the
     table rather than as a rectangle pasted over it. The depth is in four parts
     — a lit top edge, a hairline ring, a contact shadow and a wide ambient one. */
  border: 1px solid rgba(255,255,255,0.8);
  background: linear-gradient(165deg, rgba(255,255,255,0.80) 0%, rgba(252,252,252,0.58) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 0 0 1px rgba(41,41,25,0.05),
    0 2px 5px rgba(41,41,41,0.05),
    0 22px 44px rgba(41,41,41,0.14);
}
.lc-journey-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.lc-journey-name { font-size: 14px; font-weight: 600; line-height: 1; color: #292919; }

/* --- the journey itself, ported from pwa/templates/pwa/leads.html:707.
   The app's --line/--bg/--ink/--faint variables are resolved to the
   landing's own ink here; the dark-theme arm is dropped. --- */
.ldj { list-style: none; margin: 0; padding: 0; --line: #e3e3e3; --bg: #FFFFFF; --ink: #292919; --faint: rgba(41,41,25,0.45); --muted: rgba(41,41,25,0.6); }
.ldj-ev, .ldj-gap { display: grid; grid-template-columns: 24px 1fr; column-gap: 10px; }
.ldj-rail { position: relative; display: flex; justify-content: center; }
.ldj-rail::before {
  content: ''; position: absolute; top: -6px; bottom: -6px; left: 50%;
  width: 1.5px; transform: translateX(-50%); background: var(--line);
}
.ldj-ev:first-child .ldj-rail::before { top: 12px; }
.ldj-ev:last-child .ldj-rail::before,
.ldj-ev.ldj-tail .ldj-rail::before { bottom: calc(100% - 12px); }
.ldj-gap { height: 34px; }
.ldj-gap-lbl { align-self: center; font-size: 11.5px; color: var(--faint); padding: 3px 0; min-width: 0; }
.ldj-ev { padding: 5px 0; }
.ldj-ev .ldj-rail { align-items: flex-start; }
.ldj-dot {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--bg); border: 1.5px solid var(--line);
}
.ldj-dot svg { width: 12px; height: 12px; }
.ldj-dot.t-green { border-color: rgba(77,138,99,0.45); color: #4d8a63; background-image: linear-gradient(rgba(75,166,106,0.07), rgba(75,166,106,0.07)); }
.ldj-dot.t-amber { border-color: rgba(168,130,64,0.45); color: #a88240; background-image: linear-gradient(rgba(249,221,164,0.20), rgba(249,221,164,0.20)); }
.ldj-dot.t-violet{ border-color: rgba(123,126,224,0.45); color: #7b7ee0; background-image: linear-gradient(rgba(99,102,241,0.07), rgba(99,102,241,0.07)); }
.ldj-dot.t-grey  { color: var(--faint); }
.ldj-body { min-width: 0; padding-top: 2px; }
.ldj-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ldj-label { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 13px; color: var(--ink); }
.ldj-when { font-size: 11.5px; color: var(--faint); margin-left: auto; padding-left: 4px; }
.ldj-sub { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.ldj-actor { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- below the table's own width the illustration stops being a
   composition and becomes two stacked cards. This is also where the
   animation is never built (see the page's inline script). --- */
@media (max-width: 1023px) {
  .lc-illu { max-width: 560px; }
  .lc-plate { padding: 14px 12px 4px; }
  .lc-c-source, .lc-c-contact, .lc-c-created { display: none; }
  .lc-c-status { width: 86px; }
  /* Below the table rather than over it, stepping onto its last row — one row of
     overlap, about 15% of the table. Back in the flow, so .lc-illu grows to fit
     it and nothing collides with the section underneath. The two still read as
     one object because they overlap; the whole table stays readable. */
  .lc-journey {
    position: static; margin: -56px 8px 0; width: auto; padding: 14px 16px 16px;
  }
  /* the card is a bigger share of a phone-sized table, so the timeline tightens
     its own rhythm to leave a couple of rows readable above it */
  .lc-journey .ldj-gap { height: 26px; }
  .lc-journey .ldj-ev { padding: 4px 0; }
  .lc-journey-head { margin-bottom: 10px; }
}

/* ===================================================================
   STATIC ILLUSTRATIONS — the other eight pages.
   Each is built from house elements (the card, the pill, the status
   badge, the KPI block) rather than a bespoke widget per page, so nine
   feature pages read as nine views of one product.
   =================================================================== */
.fp-art { margin-inline: auto; max-width: 1000px; }

/* a product screenshot, in the same frame the cards use */
.fp-frame { padding: 10px; overflow: hidden; }
.fp-frame img { display: block; width: 100%; height: auto; border-radius: 12px; }

/* KPI block — the dashboard's card, at landing scale */
.fp-kpi { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.fp-kpi-l { font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(41,41,25,0.55); line-height: 1; }
.fp-kpi-v { font-size: 26px; font-weight: 600; line-height: 1; color: #292919; }
.fp-kpi-s { font-family: 'Inter', sans-serif; font-size: 11.5px; color: rgba(41,41,25,0.45); line-height: 1; }
/* the badge is a pill, not a bar — a stretch-aligned flex column would make it one */
.fp-kpi .status-badge { align-self: flex-start; margin-top: 2px; }

/* a list of rows inside a card — points of sale, regions, channels */
.fp-list { padding: 18px 20px 8px; }
.fp-list-h { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; }
.fp-list-t { font-size: 15px; font-weight: 600; line-height: 1; color: #292919; }
.fp-row {
  display: flex; align-items: center; gap: 12px; height: 46px;
  border-top: 1px solid #e3e3e3;
  font-family: 'Inter', sans-serif; font-size: 13px; color: #292919;
}
.fp-row-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-row-num { font-variant-numeric: tabular-nums; color: rgba(41,41,25,0.6); }

/* --- goal pacing bar — the dashboard's KPI goal bar, ported verbatim
   (shared_dashboard.html .kpi-progress / .kpi-seg / .kpi-seg-fill). Segment count
   follows goalSegCount(): each segment is one round unit of the target, ≤12 of them,
   and the last filled one carries the remainder. Sits on the card's bottom edge the
   way .kpi-card--goal does, so a goal card and a badge card end at the same line. */
.fp-goal {
  margin-top: auto; box-sizing: border-box; width: 100%;
  display: flex; gap: 2.5px;
  padding: 2.5px 7px; border-radius: 6px;
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: 0 1px 4px rgba(41,41,41,0.05);
}
.fp-seg { flex: 1; height: 7px; border-radius: 3px; overflow: hidden; position: relative;
  background: rgba(47,122,63,0.18); }
.fp-seg::before {
  content: ''; position: absolute; inset: 0; border-radius: 3px; padding: 0.74px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.3) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 2;
}
.fp-seg-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(180deg, var(--seg-color, #2F7A3F) 0%, color-mix(in srgb, var(--seg-color, #2F7A3F) 70%, transparent) 100%);
}

/* --- a person in the team card: the same row as a point of sale, with that
   person's status mix drawn underneath it. Two lines, so the row rule belongs to
   the block rather than to the top line. */
.fp-person { border-top: 1px solid #e3e3e3; padding: 11px 0 13px; }
.fp-person .fp-row { height: auto; border-top: 0; padding: 0; }
/* The status bar — the lead-status donut unrolled. Same colours, same idea, no
   labels drawn: a four-colour bar under a name reads as a mix at a glance, and the
   names are one hover away. Segments are proportional and ordered most-set first. */
.fp-sbar { display: flex; gap: 2px; margin-top: 9px; }
.fp-sbar-seg {
  position: relative; height: 8px; border-radius: 3px;
  /* The dashboard's own donut fill: donutBuildRing gives every arc a vertical ramp from
     full opacity at the top to 0.2 at the bottom, same hue (shared_dashboard.html).
     color-mix rather than four channels because the segment carries a hex. */
  background: linear-gradient(180deg,
    var(--st-color, #9CA3AF) 0%,
    color-mix(in srgb, var(--st-color, #9CA3AF) 20%, transparent) 100%);
}
/* First and last take the bar's outer radius, so the row reads as one bar rather
   than as four loose pills. */
.fp-sbar-seg:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.fp-sbar-seg:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
/* The label, on hover. CSS only — the text is already in the attribute, and a
   tooltip that needs JS is a tooltip that is missing on the one page that failed
   to load it. */
.fp-sbar-seg::after {
  content: attr(data-label);
  position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%);
  padding: 4px 8px; border-radius: 8px; white-space: nowrap;
  font-family: 'Inter', sans-serif; font-size: 11px; line-height: 1.2; color: #FFFFFF;
  background: #292919; box-shadow: 0 4px 14px rgba(41,41,41,0.18);
  opacity: 0; pointer-events: none; transition: opacity .16s ease;
  z-index: 5;
}
.fp-sbar-seg:hover::after { opacity: 1; }
@media (max-width: 767px), (hover: none) { .fp-sbar-seg::after { display: none; } }
.fp-sbar-seg:hover { filter: brightness(1.12); }

/* ===================================================================
   THE MAP — the app's analytics illustration (pwa/templates/pwa/analytics.html),
   on the landing page's light ground. Same three layers over one viewBox: the
   land, which fades and softens at its bottom edge; the inbound arcs, drawn once
   and then gone; and the points of sale, which never fade.
   =================================================================== */
.fp-mapwrap { position: relative; }
.fp-map {
  position: relative; margin: 0 auto; width: 100%; max-width: 700px;
  /* The tilt is a real 3D rotation, so the plate needs a vanishing point. A long
     perspective keeps the foreshortening gentle — a short one bends the country
     into a wedge. */
  perspective: 1100px;
}
.fp-map { overflow: hidden; }
.fp-map svg {
  display: block; width: 100%; height: auto; pointer-events: none;
  transform: rotateX(34deg);
  transform-origin: 50% 42%;
}
/* The land dissolves at its BOTTOM edge only. A mask on the artwork rather than a
   wash of page colour painted over it — what is behind the map stays the map's
   business. The ramp runs deeper than the app's (which fades out at 94%, above its
   cards): here the country is still half-there where the KPI row begins, so the last
   of it dissolves BEHIND the glass rather than in the gap above it. */
.fp-map-land {
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
/* Under the pins, over the land — an arc arrives AT a point of sale, so the square
   it lands on stays on top. Stopped before the cards' own top edge: the cards are
   translucent, and a saturated arc sweeping through them reads as painted on them. */
.fp-map-arcs {
  position: absolute; inset: 0; z-index: 2;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 88%);
}
/* Their own layer, unfaded and unblurred: a POS name is the one thing on this map
   that has to stay readable. */
.fp-map-pins { position: absolute; inset: 0; z-index: 3; }
/* The softening that arrives with the fade. Anchored to the artwork, not to the
   layout box — the tilt leaves a band of empty space below the map, and the
   renderer measures it. */
.fp-map-haze {
  position: absolute; left: 0; right: 0; bottom: var(--fp-art-bot, 0px);
  height: 150px; pointer-events: none; z-index: 2;
  -webkit-backdrop-filter: blur(1.4px); backdrop-filter: blur(1.4px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 85%);
  mask-image: linear-gradient(to bottom, transparent, #000 85%);
}
/* Read by the renderer off the computed style. The plate is brighter than the page —
   a white country lifted off the #f5f5f5 ground. */
.fp-mapwrap {
  --fp-plate: #ffffff;
  --fp-fill-a: rgba(41,41,25,0.06); --fp-fill-b: rgba(41,41,25,0);
  --fp-line: rgba(41,41,25,0.075); --fp-edge: rgba(41,41,25,0.72);
}
/* Pulled up over the map's dissolving edge, so the country runs behind the cards
   rather than stopping above them. The tilt leaves a band of empty layout box below
   the artwork, so a plain negative margin would spend itself closing that first —
   subtracting the measured band is what makes 30px an actual 30px of country. */
.fp-kpis { position: relative; margin-top: calc(-90px - var(--fp-art-bot, 0px)); }

@media (max-width: 767px) {
  .fp-list, .fp-kpi { padding-inline: 16px; }
  /* One phone-width column is a third of the desktop map's height, so the desktop
     overlap would put the first card across the middle of the country rather than
     over its bottom edge. */
  .fp-kpis { margin-top: calc(-34px - var(--fp-art-bot, 0px)); }
  .fp-map-haze { height: 90px; }
}

/* ===================================================================
   THE KPI DECK — the four-card row, stacked on phones.

   Four full-height cards in a column is most of a screen spent before
   the reader reaches anything else, and three of those cards are a
   label and a number. On a phone they become a deck: the front one
   readable, the rest behind it as offset edges. Tapping sends the
   front card to the back so nothing here is unreachable.

   Glass rather than the flat wash, because three cards now sit under
   the front one and an opaque stack loses its depth.
   =================================================================== */
@media (max-width: 767px) {
  .fp-kpis.fp-deck {
    display: block;                 /* out of the grid; height comes from JS */
    position: relative;
    padding-bottom: 0;
    cursor: pointer;
  }
  .fp-kpis.fp-deck > .fp-kpi {
    position: absolute; left: 0; right: 0; top: 0;
    transform: translateY(calc(var(--d, 0) * 11px)) scale(calc(1 - var(--d, 0) * 0.04));
    transform-origin: 50% 0;
    z-index: calc(10 - var(--d, 0));
    background: linear-gradient(to bottom, rgba(255,255,255,0.62), rgba(255,255,255,0.42));
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: 0 calc(4px + var(--d, 0) * 3px) calc(20px + var(--d, 0) * 8px) rgba(41,41,41,0.10);
    transition: transform .42s cubic-bezier(.22,.61,.36,1),
                opacity .42s ease,
                box-shadow .42s ease;
  }
  /* The cards behind the front one are edges, not content: their type would show
     through the glass as a smear under the card that is actually being read. */
  .fp-kpis.fp-deck > .fp-kpi:not(.is-front) > * { opacity: 0; transition: opacity .3s ease; }
  .fp-kpis.fp-deck > .fp-kpi.is-front > * { opacity: 1; transition: opacity .3s ease .12s; }
  /* The card on its way to the back passes behind the others rather than through them. */
  .fp-kpis.fp-deck > .fp-kpi.is-going { z-index: 0; }
  /* While the entrance runs, the transform belongs to the tween. */
  .fp-kpis.fp-deck.is-dealing > .fp-kpi { transition: opacity .3s ease; }

  .fp-deck-dots {
    display: flex; justify-content: center; gap: 6px;
    margin-top: 10px; pointer-events: none;
  }
  .fp-deck-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(41,41,25,0.18); transition: background .3s ease;
  }
  .fp-deck-dot.on { background: rgba(41,41,25,0.5); }
}
/* Above the breakpoint the deck is a plain row again and the dots have no job. */
@media (min-width: 768px) {
  .fp-deck-dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-kpis.fp-deck > .fp-kpi { transition: none; }
}


/* ===================================================================
   THE 3D KIT — shared by the five pages that show a real app surface.

   Two elements, and the split is load-bearing:
     .fp-scene  owns `perspective`  — the camera.
     .fp-plane  owns the rotation   — the surface.
   Putting both on one element collapses the 3D context and flattens the
   plane. Same split as the homepage hero (index.html #hero-dash-scene /
   #hero-dash-plane), and for the same reason.

   Anything carrying [data-fp-lift] is translated along the PLANE's own Z
   axis — perpendicular to the surface, so it reads as floating above its
   slot and is foreshortened to the same parallelogram as everything else.
   Which is why the whole ancestor chain down to it keeps preserve-3d.

   Neither element may also be the node an entrance tween writes
   `transform` on: that would wipe the tilt.
   =================================================================== */
.fp-scene { position: relative; perspective: var(--fp-persp, 1400px); }
.fp-plane {
  transform: rotateX(var(--fp-tilt, 16deg));
  transform-origin: 50% var(--fp-origin, 45%);
  transform-style: preserve-3d;
}
/* The chain has to stay 3D the whole way down, or a lifted card is composited
   flat by its nearest 2D ancestor and lands back on the surface. */
.fp-plane *, .fp-keep3d { transform-style: preserve-3d; }
[data-fp-lift] { transform: translateZ(var(--fp-lift, 40px)); }

/* Full-bleed break-out — the plane's near edge has to run off both bottom
   corners, and the column's 120px gutters would otherwise cut it into a
   floating slab. Same break-out the How It Works illustration uses. */
.fp-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }

/* The plane dissolves at its far and near edges rather than being chopped:
   a hard cut reads as a screenshot with its corners sliced off. */
.fp-fade-b {
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--fp-fade, 76%), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 var(--fp-fade, 76%), transparent 100%);
}

/* Depth haze — the far end of a plane is further away, so it softens. Anchored
   to the artwork by the page that uses it, never to a guessed percentage. */
.fp-haze {
  position: absolute; left: 0; right: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(1.6px); backdrop-filter: blur(1.6px);
}

/* Reduced motion keeps the composition — depth is not motion — but every
   entrance tween below resolves to its final state instead of playing. */


/* ===================================================================
   THE AI PILL KIT — the house insight pill and its star.

   Both the Insights page and the Marketing Funnel page carry these, so
   they live here rather than twice inline. Anatomy is the dashboard's:
   a translucent grey plate, a gradient stroke drawn with mask-composite,
   and the rainbow star on the left (shared_dashboard.html:2316-2390).
   The star's gradient is defined once per page in a 0x0 <svg><defs>.
   =================================================================== */
.fp-aipill {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 8px; border-radius: 16px;
  background-color: rgba(41,41,25,0.025);
  box-shadow: 0 2px 6px rgba(41,41,41,0.06);
  font-family: 'Inter Tight', sans-serif; font-size: 12px; font-weight: 500;
  line-height: 1.25; color: #292919; white-space: nowrap;
}
.fp-aipill::before {
  content: ''; position: absolute; inset: 0; border-radius: 16px; padding: 1px;
  background: linear-gradient(270deg, rgba(41,41,25,0.30) 0%, rgba(255,255,255,0.30) 10%, rgba(255,255,255,0.30) 90%, rgba(41,41,25,0.30) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.fp-aipill strong { font-weight: 600; }
/* Wrapping variant — a whole sentence rather than a chip. */
.fp-aipill--wrap { white-space: normal; text-align: left; align-items: flex-start; }
.fp-aipill--wrap .ai-star { margin-top: 1px; }
.ai-star { display: inline-block; vertical-align: middle; flex: none; }


/* ===================================================================
   MOBILE — the same page, less of it.
   The phone gets tighter type and spacing, and the lead-in paragraphs
   render a shorter variant. The short text is a subset of the long one,
   so nothing is said on the desktop page that the phone page denies —
   and both are in the HTML, so a crawler reads the full version.
   =================================================================== */
.fp-short { display: none; }
@media (max-width: 639px) {
  .fp-short { display: inline; }
  .fp-long { display: none; }

  .fp-card-title { font-size: 16px; }
  .fp-card-copy { font-size: 13.5px; line-height: 1.45; }
  .fp-step-h { font-size: 17.5px; margin-top: 12px; }
  .fp-step-p { font-size: 13.5px; line-height: 1.45; }
  .fp-faq-q { font-size: 16px; }
  .fp-faq-a { font-size: 14px; line-height: 1.5; margin-top: 7px; }
  .fp-faq-ready .fp-faq-a { margin-top: 0; padding-bottom: 18px; }
  .fp-faq-trigger { padding: 15px 0; gap: 12px; }
  .fp-lead { font-size: 15px; }
  .fp-card-ic { width: 36px; height: 36px; border-radius: 12px; }
  .fp-card-ic svg, .fp-card-ic img { width: 18px; height: 18px; }
}