/* ============================================================
   FlipDesk landing — dark-first, XyrisKey-style.
   Extends the app tokens in app.css (html[data-theme="dark"]).
   ============================================================ */
/* Scrolling is animated by the page's own rAF engine (see index.html) —
   native scroll-behavior:smooth conflicts with it in Chrome. */

/* Landing <-> app: cross-document app-open handoff — the new page settles
   down from a slight zoom while the old fades beneath it (pairs with the
   same rules in app.css). */
@view-transition { navigation: auto; }
::view-transition { pointer-events: none; }
::view-transition-old(root) { animation: vt-root-out .32s ease both; }
::view-transition-new(root) { animation: vt-root-in .52s cubic-bezier(.32, .72, 0, 1) both; }
@keyframes vt-root-out { to { opacity: 0; } }
@keyframes vt-root-in { from { opacity: 0; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
body.landing {
  display: block;
  /* Flat grey-navy, exactly like the reference — the hero wavelines carry
     all the atmosphere, no extra gradients on the body. */
  background: #25293c;
  /* NOTE: no overflow-x on body — overflow clip/hidden propagated to the
     viewport silently disables CSS smooth scrolling in Chrome. Sections that
     could bleed (hero shot, previews) clip themselves instead. */
}
.lp-container { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; }

.btn-lg { padding: .68rem 1.35rem; font-size: .95rem; border-radius: 12px; }
/* Outline button: neutral grey ring with light text, like the reference's
   "See pricing". */
.btn-ghost {
  background: transparent;
  color: rgba(225, 222, 245, .85);
  border: 1px solid rgba(225, 222, 245, .22);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-ghost:hover {
  background: rgba(225, 222, 245, .06);
  border-color: rgba(225, 222, 245, .38);
  box-shadow: 0 0 18px rgba(var(--primary-rgb), .2);
}
/* Primary buttons: the reference's glossy pill — a white sheen layered over
   the purple ramp, with an inset highlight and a purple halo. Both states
   are gradients — transitioning gradient→solid is what caused the dark
   hover flash, so background is deliberately NOT transitioned. */
.landing .btn-primary {
  border-radius: 12px;
  background:
    linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .04) 46%, rgba(255, 255, 255, 0) 64%),
    linear-gradient(180deg, #8479f2 0%, #7367f0 52%, #6d62e4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5),
    0 5px 13px rgba(var(--primary-rgb), .3),
    0 1px 2px rgba(0, 0, 0, .08);
  text-shadow: 0 1px 2px rgba(47, 43, 61, .25);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.landing .btn-primary:hover {
  background:
    linear-gradient(rgba(255, 255, 255, .38), rgba(255, 255, 255, .07) 46%, rgba(255, 255, 255, 0) 64%),
    linear-gradient(180deg, #8d83f4 0%, #7c70f2 52%, #746ae8 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6),
    0 0 14px rgba(var(--primary-rgb), .4),
    0 6px 16px rgba(var(--primary-rgb), .28);
}

main, .lp-header, .lp-footer { position: relative; z-index: 1; }

/* ---------- Floating pill nav ---------- */
/* Width-matched to the content column: the pill's left edge lines up with
   the hero headline below it. */
.lp-header { position: sticky; top: 14px; z-index: 90; padding: 0 1.75rem; }
.lp-pill {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.12rem;
  max-width: 1180px; margin: 0 auto;
  /* Tuned so the glass composites to the page color, just a touch darker —
     the pill reads as part of the background, lifted only by its border. */
  background: rgba(36, 39, 54, .72);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(225, 222, 245, .12);
  border-radius: var(--r-pill);
  padding: .56rem 1.12rem;
  box-shadow: 0 2px 6px rgba(15, 17, 26, .3);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lp-header.scrolled .lp-pill { box-shadow: 0 10px 34px rgba(8, 9, 20, .5); border-color: rgba(225, 222, 245, .16); }
.lp-pill .brand { justify-self: start; }
.lp-pill .brand-name { font-size: 1.12rem; }
.lp-nav { display: flex; gap: .25rem; justify-self: center; }
.lp-nav a {
  color: rgba(225, 222, 245, .55);
  font-weight: 500; font-size: .92rem;
  padding: .5rem .875rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
    border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lp-nav a:hover {
  color: var(--primary);
  background: rgba(var(--primary-rgb), .07);
  border-color: rgba(var(--primary-rgb), .45);
  box-shadow: 0 0 10px rgba(var(--primary-rgb), .25);
}
.lp-header-actions { display: flex; align-items: center; gap: .5rem; justify-self: end; }
/* Circular bordered icon button, exactly the reference's theme toggle. */
.lp-header-actions .icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #2f3349;
  border: 1px solid rgba(225, 222, 245, .12);
  color: rgba(225, 222, 245, .78);
}
.lp-header-actions .icon-btn:hover { background: #383d59; color: #fff; }
/* Dashboard button: same glossy primary as the hero CTA, nav-sized. */
.landing .btn-primary.lp-dash-btn {
  padding: .56rem 1.12rem;
  font-size: .92rem;
  font-weight: 600;
  text-shadow: none;
}
.landing .btn-primary.lp-dash-btn:hover { transform: none; }
.lp-burger { display: none; }

/* ---------- Hero ---------- */
.lp-hero {
  position: relative;
  padding: 6.25rem 0 5.75rem;
  overflow: hidden;
  min-height: clamp(600px, calc(100vh / var(--zoom, 1)), 940px);
}
/* Fade the wavelines into the flat body color at the hero's bottom edge. */
.lp-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 240px;
  z-index: 0;
  background: linear-gradient(rgba(37, 41, 60, 0), #25293c 92%);
  pointer-events: none;
}

/* The "space" background: a fan of bezier ribbons sweeping from the lower
   left to the upper right, stroked with a purple gradient. The whole sheet
   breathes (slow scale/rotate drift) and sparks ride the brighter lines.
   Paths are generated by the inline script in index.html. */
.lp-wavelines { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lp-wavelines svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  transform-origin: 60% 55%;
  will-change: transform;
  animation: lp-ribbon 22s ease-in-out infinite alternate;
}
@keyframes lp-ribbon {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.025) rotate(-.6deg); }
  100% { transform: scale(1.04) rotate(.5deg); }
}
.lp-wl-trail { stroke-opacity: .78; }
/* The particle layer mirrors the SVG's slice fit (scaled/centered by the
   inline script) so sparks ride exactly on the drawn lines. */
#lp-wl-particles { position: absolute; inset: 0; transform-origin: 0 0; }
.lp-particle {
  position: absolute; top: 0; left: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #b9a9ff 55%, rgba(143, 110, 242, 0) 78%);
  box-shadow: 0 0 10px 2px rgba(143, 110, 242, .55);
  offset-rotate: 0deg;
  animation: lp-particle-travel 10s linear infinite;
}
@keyframes lp-particle-travel {
  0% { offset-distance: 0%; opacity: 0; }
  6% { opacity: 1; }
  92% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-wavelines svg { animation: none; }
  .lp-particle { display: none; }
}
.lp-hero-grid { position: relative; z-index: 2; }
.lp-hero-copy { max-width: 640px; }

/* The dashboard picture: anchored to the section's bottom-right corner,
   hanging past the right and bottom edges exactly like the reference. */
.lp-hero-shot {
  position: absolute; right: -24px; bottom: -56px;
  width: min(62%, 1000px);
  z-index: 1;
  border-radius: 12px 0 0 0;
}
.lp-hero-shot img {
  display: block; width: 100%; height: auto;
  border-radius: 12px 0 0 0;
  box-shadow: -24px -22px 70px rgba(var(--primary-rgb), .18), 0 20px 50px rgba(15, 12, 40, .35);
}
.lp-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; color: rgba(225, 222, 245, .78);
  border: 1px solid rgba(225, 222, 245, .12);
  background: #2f3349;
  border-radius: var(--r-pill);
  padding: .375rem .375rem .375rem .5rem;
  margin-bottom: 1.25rem;
}
.lp-badge em {
  font-style: normal; font-weight: 700; font-size: .72rem;
  background: var(--success-soft); color: var(--success);
  border-radius: var(--r-pill); padding: .125rem .56rem;
}
.lp-badge svg { opacity: .55; }
.lp-hero-copy h1 {
  font-size: clamp(2.35rem, 4.6vw, 3.5rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.06;
  color: rgba(225, 222, 245, .9);
  margin: 0 0 1.35rem;
}
.lp-lede { font-size: 1.08rem; line-height: 1.6; color: rgba(225, 222, 245, .55); max-width: 33rem; margin-bottom: 1.7rem; }
.lp-lede strong { color: rgba(225, 222, 245, .92); font-weight: 700; }
.lp-cta-row { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.lp-trust {
  display: flex; align-items: flex-start; gap: .45rem;
  /* Narrow enough to wrap clear of the overlapping dashboard shot. */
  max-width: 27rem;
  color: rgba(225, 222, 245, .5); font-size: .88rem; margin: 0;
}
.lp-trust svg { color: var(--primary); flex-shrink: 0; margin-top: .15rem; }

/* Live app previews */
.lp-screen {
  background: #1b1e30;
  border: 1px solid rgba(225, 222, 245, .12);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 70px rgba(8, 9, 20, .55);
  overflow: hidden;
}
.lp-screen-chrome {
  display: flex; align-items: center; gap: .45rem;
  padding: .65rem 1rem;
  border-bottom: 1px solid rgba(225, 222, 245, .1);
  background: rgba(225, 222, 245, .03);
}
.mock-dot { width: 10px; height: 10px; border-radius: 50%; }
.mock-dot:nth-child(1) { background: #ea5455; }
.mock-dot:nth-child(2) { background: #ff9f43; }
.mock-dot:nth-child(3) { background: #28c76f; }
.mock-url {
  margin-left: .6rem; font-size: .7rem; color: var(--text-light);
  background: rgba(20, 23, 42, .7);
  border: 1px solid rgba(225, 222, 245, .08);
  border-radius: var(--r-pill); padding: .2rem .8rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The iframe renders the real app at desktop width, scaled down like a
   screenshot. pointer-events off: it's a preview, not a nested app. */
.lp-frame-clip { position: relative; overflow: hidden; }
.lp-frame-clip iframe {
  width: 1280px; height: 860px;
  border: 0;
  pointer-events: none;
  transform-origin: top left;
  position: absolute; top: 0; left: 0;
}

/* ---------- Sections ---------- */
.lp-section { padding: 4.5rem 0; }
.lp-section-head { max-width: 640px; margin-bottom: 2.6rem; }
.lp-section-head.center { margin-inline: auto; text-align: center; }
/* Headings share one "darker white" across every section, like the
   reference — pure #fff is reserved for the purple surfaces. */
.lp-section-head h2 {
  font-size: clamp(1.45rem, 2.7vw, 2rem);
  font-weight: 800; letter-spacing: .015em;
  text-transform: uppercase;
  color: rgba(225, 222, 245, .87);
  margin-bottom: .7rem; text-wrap: balance; }
.lp-section-head p { color: var(--text-muted); margin: 0; }
.accent { color: var(--primary); }
.lp-eyebrow {
  display: inline-block;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
  margin-bottom: .9rem;
}
/* The "//" mark: first slash dark purple, second light purple. */
.lp-eyebrow .sl {
  font-style: normal; font-weight: 800; letter-spacing: 0;
  margin-right: .55rem;
  background: linear-gradient(100deg, #5449d8 0%, #5449d8 49%, #9a8cff 51%, #9a8cff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-band .lp-eyebrow .sl {
  background: linear-gradient(100deg, #2d2467 0%, #2d2467 49%, #fff 51%, #fff 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* ---------- Features: bento cards, each with a small, believable piece of
   the product. Everything is prefixed fb- so it never meets the app's styles. */
.fb {
  --fb-card: #2b2f45; --fb-well: #252940; --fb-tile: #30344c; --fb-line: rgba(225, 222, 245, .09); --fb-line2: rgba(225, 222, 245, .15);
  --fb-head: rgba(225, 222, 245, .92); --fb-body: rgba(225, 222, 245, .72); --fb-muted: rgba(225, 222, 245, .56); --fb-faint: rgba(225, 222, 245, .36);
  --fb-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 18px -8px rgba(0, 0, 0, .55);
  --fb-ease: cubic-bezier(.22, 1, .36, 1);
  text-align: left;
}
html[data-theme="light"] .fb {
  --fb-card: #fff; --fb-well: #f4f3f9; --fb-tile: #fff; --fb-line: rgba(47, 43, 61, .1); --fb-line2: rgba(47, 43, 61, .16);
  --fb-head: rgba(47, 43, 61, .92); --fb-body: rgba(47, 43, 61, .74); --fb-muted: rgba(47, 43, 61, .56); --fb-faint: rgba(47, 43, 61, .38);
  --fb-shadow: 0 1px 2px rgba(47, 43, 61, .08), 0 6px 16px -8px rgba(47, 43, 61, .25);
}
.fb-cell { display: flex; min-width: 0; }
.fb-cell > .fb-card { flex: 1; min-width: 0; }
.fb h3 { margin: 0 0 .3rem; }
.fb p { margin: 0; }
.fb-mono { font-family: var(--font-mono); }
/* ---------------- bento ---------------- */
.fb-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.fb-s4 { grid-column: span 4; } .fb-s2 { grid-column: span 2; } .fb-s3 { grid-column: span 3; }
.fb-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 1.25rem 1.25rem 1.45rem; border-radius: 22px; background: var(--fb-card); border: 1px solid var(--fb-line); transition: transform .5s var(--fb-ease), border-color .3s, box-shadow .5s var(--fb-ease); }
.fb-cell:hover .fb-card { transform: translateY(-3px); border-color: rgba(var(--primary-rgb), .35); box-shadow: 0 24px 54px -26px rgba(var(--primary-rgb), .6); }
.fb-card h3 { padding: 0 .25rem; font-size: 1.04rem; font-weight: 700; color: var(--fb-head); margin-bottom: .3rem; }
.fb-card p { padding: 0 .25rem; font-size: .88rem; color: var(--fb-muted); line-height: 1.5; }
.fb-art { position: relative; overflow: hidden; height: 262px; margin-bottom: 1.25rem; display: grid; place-items: center; border-radius: 15px; background: radial-gradient(120% 100% at 50% 0%, rgba(var(--primary-rgb), .07), transparent 60%), var(--fb-well); border: 1px solid var(--fb-line); }

/* shared bits */
.fb-ava { width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-size: .52rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--c1, #7367f0), var(--c2, #9e95f5)); }
.fb-chip { display: inline-flex; align-items: center; gap: .25rem; height: 17px; padding: 0 .4rem; border-radius: 5px; font-size: .58rem; font-weight: 700; white-space: nowrap; }

/* 1 · ticket board */
.fb-tb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: calc(100% - 2.4rem); align-self: start; margin-top: 1rem; }
.fb-tb-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fb-tb-h { display: flex; align-items: center; gap: .4rem; padding: 0 .2rem .15rem; font-size: .68rem; font-weight: 700; color: var(--fb-head); white-space: nowrap; }
.fb-tb-h i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.fb-tb-h b { margin-left: auto; min-width: 18px; height: 16px; display: grid; place-items: center; padding: 0 .3rem; border-radius: 99px; background: var(--fb-line); font-size: .58rem; color: var(--fb-muted); }
.fb-tc { position: relative; display: flex; flex-direction: column; gap: 3px; padding: .5rem .55rem .5rem .65rem; border-radius: 10px; background: var(--fb-tile); border: 1px solid var(--fb-line); box-shadow: var(--fb-shadow); }
.fb-tc::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); transition: background .5s; }
.fb-tc-top { display: flex; align-items: center; gap: .3rem; }
.fb-tc-no { font-family: "JetBrains Mono", monospace; font-size: .6rem; font-weight: 600; color: var(--fb-muted); }
.fb-tc-top .fb-chip { margin-left: auto; }
.fb-tc strong { font-size: .72rem; font-weight: 700; color: var(--fb-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-tc small { font-size: .62rem; color: var(--fb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-tc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 3px; }
.fb-tc-foot span:last-child { font-size: .66rem; font-weight: 700; color: var(--fb-head); font-variant-numeric: tabular-nums; }
.fb-today { background: var(--warning-soft); color: var(--warning); }
.fb-soon { background: var(--fb-line); color: var(--fb-muted); }
.fb-done { background: var(--success-soft); color: var(--success); }
.fb-tc.fb-mover { z-index: 2; transition: transform .9s var(--fb-ease), box-shadow .9s var(--fb-ease); }
.fb-cell:hover .fb-card .fb-tc.fb-mover { transform: translate(calc(100% + 10px), calc(100% + 8px)); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .45); --c: var(--success); }
.fb-cell:hover .fb-card .fb-tc.fb-mover .fb-chip { background: var(--success-soft); color: var(--success); }
.fb-cell:hover .fb-card .fb-tc.fb-mover .fb-chip::after { content: 'Ready'; }
.fb-cell:hover .fb-card .fb-tc.fb-mover .fb-chip span { display: none; }

/* 2 · messages */
.fb-msg { width: calc(100% - 2rem); height: calc(100% - 2rem); display: flex; flex-direction: column; border-radius: 14px; background: var(--fb-tile); border: 1px solid var(--fb-line); box-shadow: var(--fb-shadow); overflow: hidden; }
.fb-msg-h { display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; border-bottom: 1px solid var(--fb-line); }
.fb-msg-h .fb-ava { width: 26px; height: 26px; font-size: .6rem; --c1: #00b8cf; --c2: #4fe0f2; }
.fb-msg-h b { display: block; font-size: .74rem; color: var(--fb-head); }
.fb-msg-h small { display: block; font-size: .6rem; color: var(--fb-muted); }
.fb-msg-h .fb-chip { margin-left: auto; background: var(--primary-soft); color: var(--primary); }
.fb-msg-b { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; padding: .6rem .65rem .7rem; }
.fb-bub { max-width: 84%; padding: .45rem .6rem; border-radius: 13px; font-size: .68rem; line-height: 1.35; }
.fb-bub.fb-out { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.fb-bub.fb-in { align-self: flex-start; background: var(--fb-well); color: var(--fb-head); border-bottom-left-radius: 4px; }
.fb-rcpt { align-self: flex-end; font-size: .56rem; color: var(--fb-faint); margin: -1px 2px 2px 0; }
.fb-typing { display: inline-flex; gap: 3px; padding: .5rem .6rem; }
.fb-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--fb-faint); animation: dot 1.2s ease-in-out infinite; }
.fb-typing i:nth-child(2) { animation-delay: .15s; } .fb-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* 3 · inventory */
.fb-inv { width: calc(100% - 2rem); display: flex; flex-direction: column; border-radius: 14px; background: var(--fb-tile); border: 1px solid var(--fb-line); box-shadow: var(--fb-shadow); overflow: hidden; }
.fb-ir { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .5rem .75rem; }
.fb-ir + .fb-ir { border-top: 1px solid var(--fb-line); }
.fb-ir b { display: block; font-size: .72rem; color: var(--fb-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-ir small { display: flex; align-items: center; gap: .3rem; font-size: .6rem; color: var(--fb-muted); white-space: nowrap; }
.fb-gr { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--fb-line2); font-size: .52rem; font-weight: 800; color: var(--fb-head); }
.fb-ir-r { text-align: right; }
.fb-ir-r b { font-size: .74rem; font-variant-numeric: tabular-nums; }
.fb-ir-r small { justify-content: flex-end; color: var(--success); font-weight: 700; }
.fb-inv-f { display: flex; align-items: center; justify-content: space-between; padding: .5rem .7rem; border-top: 1px solid var(--fb-line); background: var(--fb-well); font-size: .6rem; color: var(--fb-muted); }
.fb-inv-f b { color: var(--fb-head); }

/* Row thumbnails: the drawn iPhone backs (built in the script below). */
.fb-ir-ph { width: 26px; height: 52px; display: block; transition: transform .6s var(--fb-ease); }
.fb-ir-ph svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .3)) drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
.fb-cell:hover .fb-card .fb-ir:nth-child(1) .fb-ir-ph { transform: rotate(-6deg) translateY(-2px); }
.fb-cell:hover .fb-card .fb-ir:nth-child(2) .fb-ir-ph { transform: rotate(-6deg) translateY(-2px); transition-delay: .06s; }
.fb-cell:hover .fb-card .fb-ir:nth-child(3) .fb-ir-ph { transform: rotate(-6deg) translateY(-2px); transition-delay: .12s; }

/* 4 · price list */
.fb-pl { width: calc(100% - 2.4rem); border-radius: 14px; background: var(--fb-tile); border: 1px solid var(--fb-line); box-shadow: var(--fb-shadow); overflow: hidden; font-size: .7rem; }
.fb-pl-row { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); align-items: center; height: 33px; border-top: 1px solid var(--fb-line); }
.fb-pl-row > * { padding: 0 .75rem; text-align: center; color: var(--fb-head); font-weight: 600; font-variant-numeric: tabular-nums; }
.fb-pl-row > :first-child { text-align: left; }
.fb-pl-h { height: 30px; border-top: 0; background: var(--fb-well); }
.fb-pl-h > * { font-size: .56rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fb-faint); }
.fb-pl-h .fb-lit { color: var(--primary); }
.fb-pl-g { height: 24px; background: var(--fb-well); }
.fb-pl-g > * { font-size: .54rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fb-muted); }
.fb-pl-row .fb-dash { color: var(--fb-faint); font-weight: 400; }
.fb-edit { position: relative; display: flex; align-items: center; justify-content: flex-start; height: 23px; margin: 0 .35rem; padding: 0 .45rem !important; border: 1px solid var(--primary); border-radius: 6px; background: var(--fb-tile); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .2); }
.fb-edit em { font-style: normal; color: var(--fb-faint); margin-right: 2px; }
.fb-edit::after { content: ''; width: 1.5px; height: 12px; margin-left: 1px; background: var(--primary); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.fb-saved { position: absolute; right: 1.6rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .35rem; height: 26px; padding: 0 .7rem; border-radius: 99px; background: var(--fb-tile); border: 1px solid var(--fb-line); box-shadow: var(--fb-shadow); font-size: .64rem; font-weight: 600; color: var(--fb-head); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--fb-ease); }
.fb-saved i { width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; background: var(--success); color: #fff; font-size: .55rem; font-style: normal; }
.fb-cell:hover .fb-card .fb-saved { opacity: 1; transform: none; transition-delay: .2s; }

/* 5 · labels & invoices */
.fb-lab { position: relative; width: 100%; height: 100%; }
/* An A4 invoice, tilted behind */
.fb-inv-sheet { position: absolute; right: 7%; top: 22px; width: 138px; height: 190px; padding: 12px 12px; border-radius: 4px; background: #fff; color: #1d1d23; transform: rotate(5deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 16px 30px -14px rgba(0, 0, 0, .5); transition: transform .6s var(--fb-ease); }
.fb-cell:hover .fb-card .fb-inv-sheet { transform: rotate(8deg) translate(6px, -4px); }
.fb-is-h { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 9px; }
.fb-is-h b { font-size: .5rem; letter-spacing: .1em; }
.fb-is-h span { font-size: .42rem; color: #777; text-align: right; line-height: 1.4; }
.fb-is-l { display: flex; justify-content: space-between; padding: 4px 0; border-top: .5px solid #e6e6ea; font-size: .42rem; color: #333; }
.fb-is-t { display: flex; justify-content: space-between; margin-top: 6px; padding-top: 5px; border-top: 1px solid #1d1d23; font-size: .5rem; font-weight: 800; }
.fb-is-paid { position: absolute; left: 14px; bottom: 16px; padding: 2px 6px; border: 1.5px solid #28c76f; border-radius: 3px; color: #28c76f; font-size: .48rem; font-weight: 900; letter-spacing: .12em; transform: rotate(-10deg); }
/* The thermal printer: the body sits behind the paper, the front face in
   front of it, so the backing paper disappears into the slot. */
.fb-printer { position: absolute; left: 7%; bottom: 16px; width: 246px; height: 236px; }
.fb-pr-rear { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; border-radius: 14px 14px 16px 16px; background: linear-gradient(#4a4e60, #33364a); box-shadow: 0 16px 28px -12px rgba(0, 0, 0, .75); }
.fb-pr-paper { position: absolute; left: 22px; right: 22px; bottom: 52px; height: 184px; overflow: hidden; z-index: 1; }
.fb-liner { position: absolute; left: 0; right: 0; bottom: -62px; padding: 7px 7px 0; border-radius: 2px 2px 0 0; background: linear-gradient(90deg, #efe9da, #fbf8ef 12%, #fbf8ef 88%, #efe9da); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform 1.2s var(--fb-ease); }
.fb-cell:hover .fb-card .fb-liner { transform: translateY(-34px); }
.fb-pr-slot { position: absolute; left: 14px; right: 14px; bottom: 50px; height: 6px; z-index: 2; border-radius: 3px; background: #08080b; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .1); }
.fb-pr-front { position: absolute; left: 0; right: 0; bottom: 0; height: 50px; z-index: 3; border-radius: 4px 4px 16px 16px; background: linear-gradient(#2c2e3a, #1d1e26 70%, #17181e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.fb-pr-led { position: absolute; right: 18px; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }
.fb-pr-btn { position: absolute; right: 32px; top: 16px; width: 24px; height: 12px; border-radius: 6px; background: #2f3240; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.fb-pr-mark { position: absolute; left: 18px; top: 18px; font-size: .5rem; font-weight: 800; letter-spacing: .14em; color: rgba(255, 255, 255, .32); }
/* 57 × 32 mm repair tag at 3.4 px per mm, laid out like the app's own tag */
.fb-tag { --u: 3.4px; display: flex; width: calc(var(--u) * 57); height: calc(var(--u) * 32); padding: calc(var(--u) * 2.2) calc(var(--u) * 2.4); border-radius: calc(var(--u) * 1.4); background: #fff; color: #111; line-height: 1.15; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12); }
.fb-tag-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fb-tag-no { font-size: calc(var(--u) * 6.2); font-weight: 900; letter-spacing: -.02em; line-height: .95; }
.fb-tag-cust { margin-top: calc(var(--u) * 1.2); font-size: calc(var(--u) * 2.9); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-tag-cust span { font-size: .8em; font-weight: 600; color: #444; }
.fb-tag-dev { margin-top: calc(var(--u) * .7); font-size: calc(var(--u) * 2.5); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-tag-issue { font-size: calc(var(--u) * 2.3); color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-tag-foot { margin-top: auto; display: flex; align-items: center; gap: calc(var(--u) * 1.6); padding-top: calc(var(--u) * .9); border-top: calc(var(--u) * .25) solid #111; font-size: calc(var(--u) * 2); font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.fb-tag-due { margin-left: auto; padding: calc(var(--u) * .35) calc(var(--u) * 1.1); border-radius: calc(var(--u) * .7); background: #111; color: #fff; font-weight: 800; }
.fb-tag-qr { width: calc(var(--u) * 15); margin-left: calc(var(--u) * 1.8); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .6); }
.fb-tag-qr svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.fb-tag-qr span { font-size: calc(var(--u) * 1.6); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #333; }
.fb-tag + .fb-tag { margin-top: 9px; }
.fb-pr-led { position: absolute; right: 16px; bottom: 15px; width: 6px; height: 6px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }
.fb-pr-btn { position: absolute; right: 30px; bottom: 12px; width: 22px; height: 12px; border-radius: 6px; background: #2c2f3a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.fb-pr-mark { position: absolute; left: 16px; bottom: 14px; font-size: .5rem; font-weight: 800; letter-spacing: .14em; color: rgba(255, 255, 255, .35); }

/* 6 · analytics */
.fb-an { width: calc(100% - 2.4rem); height: calc(100% - 2rem); display: flex; flex-direction: column; padding: .75rem .9rem .6rem; border-radius: 14px; background: var(--fb-tile); border: 1px solid var(--fb-line); box-shadow: var(--fb-shadow); }
.fb-an-h { display: flex; align-items: flex-start; justify-content: space-between; }
.fb-an-h small { display: block; font-size: .6rem; font-weight: 600; color: var(--fb-muted); }
.fb-an-h b { display: block; margin-top: 2px; font-size: 1.2rem; font-weight: 800; color: var(--fb-head); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.fb-an-up { background: var(--success-soft); color: var(--success); }
.fb-an-seg { display: flex; gap: 2px; padding: 2px; border-radius: 6px; background: var(--fb-well); }
.fb-an-seg span { padding: 2px 6px; border-radius: 4px; font-size: .54rem; font-weight: 700; color: var(--fb-muted); }
.fb-an-seg span.fb-on { background: var(--fb-tile); color: var(--primary); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.fb-an-plot { position: relative; flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: 10px; margin-top: .6rem; padding-bottom: 16px; background: repeating-linear-gradient(to top, var(--fb-line) 0 1px, transparent 1px 25%); background-size: 100% calc(100% - 16px); background-repeat: no-repeat; }
.fb-an-bar { position: relative; height: var(--h); border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--primary) 26%, transparent); transform-origin: bottom; transition: background .3s; }
.fb-an-bar.fb-now { background: linear-gradient(var(--primary), #9e95f5); box-shadow: 0 8px 18px -8px rgba(var(--primary-rgb), .8); }
.fb-an-bar span { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); font-size: .54rem; color: var(--fb-faint); }
.fb-an-bar.fb-now span { color: var(--primary); font-weight: 700; }
.fb-an-tip { position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%); padding: 3px 6px; border-radius: 6px; background: var(--fb-head); color: var(--fb-card); font-size: .56rem; font-weight: 700; white-space: nowrap; }
.fb-an-tip::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--fb-head); }
.fb-cell:hover .fb-card .fb-an-bar { animation: grow .9s var(--fb-ease) backwards; animation-delay: calc(var(--i) * 60ms); }
@keyframes grow { from { transform: scaleY(.15); } }


@media (max-width: 900px) {
  .fb-grid { grid-template-columns: minmax(0, 1fr); }
  .fb-s4, .fb-s2, .fb-s3 { grid-column: auto; }
}
@media (max-width: 600px) {
  .fb-tb { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fb-tb-col:first-child { display: none; }
  .fb-cell:hover .fb-tc.fb-mover { transform: translate(calc(100% + 10px), calc(100% + 8px)); }
  .fb-pl-row { grid-template-columns: 1.6fr repeat(2, 1fr); }
  .fb-pl-row > :nth-child(n+4) { display: none; }
  .fb-inv-sheet { display: none; }
  .fb-printer { left: 50%; transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .fb *, .fb *::before, .fb *::after { animation: none !important; transition: none !important; }
}

/* ---------- Switching from another app ---------- */
.lp-switch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3.5rem; align-items: center; }
.lp-switch-copy h2 {
  font-size: clamp(1.45rem, 2.7vw, 2rem); font-weight: 800; letter-spacing: .015em; text-transform: uppercase;
  color: rgba(225, 222, 245, .87); margin-bottom: .9rem; text-wrap: balance;
}
.lp-switch-copy > p { color: var(--text-muted); margin: 0 0 1.4rem; max-width: 34rem; line-height: 1.6; }
.lp-switch-steps { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.lp-switch-steps li { display: flex; align-items: center; gap: .85rem; color: var(--text-muted); font-size: .95rem; }
.lp-switch-steps b {
  width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%;
  font-size: .8rem; color: var(--primary); border: 1px solid rgba(var(--primary-rgb), .5); background: rgba(var(--primary-rgb), .1);
}
.lp-switch-steps strong { color: rgba(225, 222, 245, .92); font-weight: 600; }
.lp-switch-from { margin: 0; font-size: .84rem; color: rgba(225, 222, 245, .45); }
.lp-switch-art { display: grid; grid-template-columns: auto minmax(60px, 120px) minmax(0, 1fr); align-items: center; }
.sw-files { display: flex; flex-direction: column; justify-content: space-between; height: 240px; }
.sw-file {
  display: inline-flex; align-items: center; gap: .5rem; height: 40px; padding: 0 .9rem 0 .75rem; border-radius: 12px;
  background: #2f3349; border: 1px solid rgba(225, 222, 245, .12); color: rgba(225, 222, 245, .85); font-size: .84rem; font-weight: 600;
  box-shadow: 0 10px 26px rgba(8, 9, 20, .35); animation: sw-bob 5s ease-in-out infinite; animation-delay: var(--d);
}
.sw-file svg { color: var(--primary); }
@keyframes sw-bob { 50% { transform: translateY(-5px); } }
.sw-flow { width: 100%; height: 240px; overflow: visible; }
.sw-flow path { fill: none; stroke: rgba(var(--primary-rgb), .35); stroke-width: 1.5; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.sw-flow circle { fill: #b9a9ff; filter: drop-shadow(0 0 4px rgba(143, 110, 242, .9)); }
.sw-card {
  padding: 1.1rem 1.2rem 1rem; border-radius: var(--r-xl); background: #1b1e30; border: 1px solid rgba(225, 222, 245, .12);
  box-shadow: 0 24px 70px rgba(8, 9, 20, .55), 0 0 0 1px rgba(var(--primary-rgb), .08);
}
.sw-card-h { display: flex; align-items: center; gap: .35rem; margin-bottom: .9rem; }
.sw-card-h strong { margin-left: .5rem; font-size: .84rem; color: rgba(225, 222, 245, .85); }
.sw-row { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .7rem 0 .9rem; border-top: 1px solid rgba(225, 222, 245, .08); font-size: .9rem; }
.sw-row:first-of-type { border-top: 0; }
.sw-l { color: rgba(225, 222, 245, .8); font-weight: 600; }
.sw-row b { color: #fff; font-variant-numeric: tabular-nums; }
.sw-row i { position: absolute; left: calc(22px + .65rem); right: 0; bottom: .35rem; height: 3px; border-radius: 3px; background: rgba(225, 222, 245, .08); overflow: hidden; }
.sw-row i::after { content: ''; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #7367f0, #9e95f5); transform-origin: left; transform: scaleX(0); }
.lp-switch-art.in .sw-row i::after { animation: sw-fill 1.2s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: var(--d); }
@keyframes sw-fill { to { transform: scaleX(1); } }
.sw-tick { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(40, 199, 111, .16); color: #28c76f; opacity: 0; transform: scale(.5); }
.lp-switch-art.in .sw-tick { animation: sw-tick .4s cubic-bezier(.34, 1.56, .64, 1) forwards; animation-delay: calc(var(--d) + 1s); }
@keyframes sw-tick { to { opacity: 1; transform: none; } }
.sw-done { display: flex; justify-content: space-between; align-items: center; margin-top: .4rem; padding-top: .8rem; border-top: 1px solid rgba(225, 222, 245, .08); font-size: .8rem; color: rgba(225, 222, 245, .55); }
.sw-undo { color: #9e95f5; font-weight: 600; }
.lp-trust a { color: rgba(225, 222, 245, .85); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; transition: color .2s, gap .2s; }
.lp-trust a:hover { color: #fff; gap: .45rem; }
html[data-theme="light"] .lp-trust a { color: rgba(47, 43, 61, .85); }
html[data-theme="light"] .lp-trust a:hover { color: var(--primary); }
html[data-theme="light"] .lp-switch-copy h2 { color: rgba(47, 43, 61, .92); }
html[data-theme="light"] .lp-switch-steps strong { color: rgba(47, 43, 61, .92); }
html[data-theme="light"] .lp-switch-from { color: rgba(47, 43, 61, .5); }
html[data-theme="light"] .sw-file { background: #fff; border-color: rgba(47, 43, 61, .1); color: rgba(47, 43, 61, .85); box-shadow: 0 10px 26px rgba(47, 43, 61, .1); }
@media (prefers-reduced-motion: reduce) {
  .sw-file { animation: none; }
  .sw-flow circle { display: none; }
  .sw-row i::after, .lp-switch-art .sw-tick { animation: none !important; transform: none; opacity: 1; }
}
@media (max-width: 1000px) {
  .lp-switch-grid { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
}
@media (max-width: 620px) {
  .lp-switch-art { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .sw-files { flex-direction: row; flex-wrap: wrap; gap: .5rem; height: auto; }
  .sw-flow { display: none; }
}

/* ---------- Product band (purple) ---------- */
.lp-band {
  padding: 4.5rem 0;
  /* Same brand purple as --primary-gradient, stretched for a full band. */
  background: linear-gradient(160deg, #7367f0 0%, #8b80f9 60%, #9d90fa 100%);
}
.lp-band .lp-section-head h2 { color: #fff; }
/* The accent word on the purple band: the deep ink of the band's "//" mark. */
.lp-band .accent { color: #2d2467; }
.lp-band .lp-section-head p { color: rgba(255, 255, 255, .85); }
.lp-band .lp-eyebrow { color: rgba(255, 255, 255, .9); }
/* The token-purple focus ring vanishes on purple surfaces — use white there. */
.lp-band :focus-visible { outline-color: #fff; outline-offset: 3px; }
.lp-band-grid {
  display: grid; grid-template-columns: 300px 1fr;
  gap: 1.6rem; align-items: start;
}
.lp-tabs { position: relative; display: flex; flex-direction: column; gap: .5rem; }
/* One shared highlight card that glides between tabs. */
.lp-tab-hl {
  position: absolute; top: 0; left: 0;
  width: 0; height: 0;
  background: rgba(255, 255, 255, .16);
  border-radius: var(--r-md);
  box-shadow: 0 10px 30px rgba(35, 20, 110, .18);
  pointer-events: none;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1),
    width .5s cubic-bezier(.22, 1, .36, 1), height .5s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) { .lp-tab-hl { transition: none; } }
.lp-tab {
  position: relative; z-index: 1;
  text-align: left;
  border: none; background: transparent;
  border-radius: var(--r-md);
  padding: .95rem 1.1rem;
  cursor: pointer;
  color: #fff;
  transition: background var(--dur-fast) var(--ease);
}
.lp-tab:hover:not(.active) { background: rgba(255, 255, 255, .08); }
.lp-tab strong { display: block; font-size: .98rem; font-weight: 700; color: #fff; }
.lp-tab span { display: block; font-size: .8rem; margin-top: .2rem; color: rgba(255, 255, 255, .82); font-weight: 500; }
.lp-tab.active span { color: rgba(255, 255, 255, .95); }
.lp-band .lp-screen { box-shadow: 0 24px 70px rgba(35, 20, 110, .4); }

/* Dark macOS-style window frame around the band preview. */
.lp-screen-window { background: #14161f; border-color: rgba(255, 255, 255, .1); }
.lp-chrome-dark { position: relative; background: #14161f; border-bottom-color: rgba(255, 255, 255, .06); padding: .8rem 1rem; }
.lp-chrome-dark .mock-dot { background: #43465a; }
.chrome-chip {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .75);
  border-radius: var(--r-pill);
  padding: .22rem 1rem;
  font-size: .72rem; font-weight: 600;
}
.lp-frame-band { aspect-ratio: 1280 / 760; }
/* The preview fades into the dark frame at the bottom, like the reference. */
.lp-frame-band::after {
  content: '';
  position: absolute; inset: 55% 0 0 0;
  background: linear-gradient(180deg, rgba(20, 22, 31, 0) 0%, rgba(20, 22, 31, .96) 96%);
  pointer-events: none;
}

/* Scale both iframes to their container width (1280px virtual width). */
.lp-frame-clip iframe { transform: scale(var(--frame-scale, .5)); }

/* Pricing: monthly/annual switch */
.lp-price-toggle { display: flex; align-items: center; justify-content: center; gap: .7rem; margin: 1.8rem 0 1.4rem; }
.pt-label { font-size: .92rem; font-weight: 600; color: var(--text-muted); transition: color var(--dur-fast) var(--ease); }
.pt-label.active { color: rgba(225, 222, 245, .95); }
.pswitch {
  position: relative;
  width: 46px; height: 25px;
  border-radius: var(--r-pill);
  border: none; cursor: pointer;
  background: var(--primary-gradient);
  transition: background var(--dur-fast) var(--ease);
}
.pswitch[aria-checked="false"] { background: rgba(225, 222, 245, .22); }
.pswitch-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(8, 9, 20, .4);
  transition: transform var(--dur) var(--ease);
}
.pswitch[aria-checked="true"] .pswitch-thumb { transform: translateX(21px); }
.pt-save {
  font-size: .74rem; font-weight: 700;
  color: var(--success);
  border: 1px solid rgba(var(--success-rgb), .6);
  background: rgba(var(--success-rgb), .1);
  border-radius: var(--r-sm);
  padding: .18rem .55rem;
}

/* Pricing cards (4-up, centered content, icon on top) */
.lp-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; max-width: 980px; margin: 0 auto; }
.price-card {
  position: relative;
  display: flex; flex-direction: column;
  text-align: center;
  background: rgba(47, 51, 73, .45);
  border: 1px solid rgba(225, 222, 245, .1);
  border-radius: var(--r-xl);
  padding: 2rem 1.4rem 1.5rem;
}
.pc-icon { display: block; margin: 0 auto .9rem; height: 78px; width: auto; object-fit: contain; }
.price-card h3 { font-size: 1.05rem; color: rgba(225, 222, 245, .92); margin-bottom: .3rem; }
.pc-desc { color: var(--text-muted); font-size: .82rem; margin: 0 auto .9rem; max-width: 200px; }
.pc-price { font-size: 1.75rem; font-weight: 900; letter-spacing: -.02em; margin-bottom: 1.1rem; }
.pc-price small { font-size: .78rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0; }
.pc-price .accent { font-variant-numeric: tabular-nums; }
.pc-prev { color: var(--primary); font-size: .8rem; font-weight: 700; text-align: left; margin: 0 0 .65rem; }
.price-card .lp-checklist { text-align: left; margin: 0 0 1.3rem; flex: 1; }
.price-card .lp-checklist li { font-size: .84rem; margin-bottom: .55rem; }
.pc-btn { width: 100%; }
.pc-popular { border-color: rgba(var(--primary-rgb), .65); box-shadow: 0 10px 40px rgba(var(--primary-rgb), .18); }
.pc-flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  background: var(--primary-gradient); color: #fff;
  padding: .26rem .85rem; border-radius: var(--r-pill);
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), .45);
  white-space: nowrap;
}

.lp-checklist { list-style: none; margin: 1.2rem 0 1.5rem; padding: 0; }
.lp-checklist li {
  position: relative; padding-left: 1.7rem;
  margin-bottom: .65rem; font-size: .92rem; color: var(--text-body);
}
.lp-checklist li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  background: var(--success-soft); color: var(--success);
  border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 800;
}
/* ---------- Trusted-by brand marquee ---------- */
.lp-brands { padding: 3.4rem 0 3.8rem; overflow: hidden; }
.lp-brands .lp-section-head { margin-bottom: 2.1rem; }
.tb-viewport {
  max-width: 1400px; margin-inline: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.tb-row { display: flex; width: max-content; animation: tb-scroll 64s linear infinite; }
.tb-viewport:hover .tb-row { animation-play-state: paused; }
@keyframes tb-scroll { to { transform: translateX(-50%); } }
.tb-set { display: flex; align-items: center; gap: 2.8rem; padding-right: 2.8rem; }
.tb-rep { display: contents; }
.tb-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 62px; padding: 0 1.3rem;
  background: #fff; border: 1px solid rgba(225, 222, 245, .1);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 16px rgba(16, 17, 33, .25);
}
.tb-chip img { display: block; height: calc(var(--bh) * 1px); width: auto; }
html[data-theme="light"] .tb-chip { border-color: rgba(47, 43, 61, .1); box-shadow: var(--shadow-sm); }
@media (max-width: 760px) {
  .lp-brands { padding: 2.6rem 0 3rem; }
  .tb-set { gap: 1.9rem; padding-right: 1.9rem; }
  .tb-chip { height: 52px; padding: 0 1rem; }
  .tb-chip img { height: calc(var(--bh) * .82px); }
}
@media (prefers-reduced-motion: reduce) {
  .tb-row { animation: none; }
  .tb-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: thin; scrollbar-color: rgba(var(--primary-rgb), .35) transparent; }
  .tb-viewport::-webkit-scrollbar { height: 6px; }
  .tb-viewport::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb), .35); border-radius: var(--r-pill); }
  .tb-viewport::-webkit-scrollbar-track { background: transparent; }
}

/* ---------- Reviews marquee ---------- */
.lp-reviews { overflow: hidden; }
.rv-viewport {
  overflow: hidden;
  margin-bottom: 1.1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.rv-row { display: flex; width: max-content; animation: rv-scroll 55s linear infinite; }
.rv-row.rv-reverse { animation-direction: reverse; }
.rv-viewport:hover .rv-row { animation-play-state: paused; }
@keyframes rv-scroll { to { transform: translateX(-50%); } }
.rv-set { display: flex; gap: 1.1rem; padding-right: 1.1rem; }
.rv-card {
  width: 360px; flex-shrink: 0;
  background: rgba(44, 48, 70, .55);
  border: 1px solid rgba(225, 222, 245, .08);
  border-radius: var(--r-lg);
  padding: 1.3rem 1.4rem;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.rv-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--primary-rgb), .45);
  background: rgba(44, 48, 70, .85);
  box-shadow: 0 16px 38px rgba(8, 9, 20, .4), 0 0 0 1px rgba(var(--primary-rgb), .15);
}
@media (prefers-reduced-motion: reduce) { .rv-card:hover { transform: none; } }
.rv-stars { color: #ff9f43; letter-spacing: .18em; font-size: .95rem; margin-bottom: .6rem; }
.rv-stars i { font-style: normal; opacity: .28; }
.rv-card p { font-size: .92rem; color: var(--text-body); margin: 0 0 1rem; }
.rv-who { display: flex; align-items: center; gap: .7rem; }
.rv-ava {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff; font-weight: 700; font-size: .78rem;
}
.rv-who strong { display: block; font-size: .9rem; color: var(--text-heading); }
.rv-who span:not(.rv-ava) { display: block; font-size: .78rem; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) {
  .rv-row { animation: none; }
  .rv-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* FAQ */
.lp-faq-grid {
  display: grid; grid-template-columns: .75fr 1.25fr;
  gap: 3rem; align-items: center;
  max-width: 1060px; margin: 0 auto;
}
.faq-art { display: grid; place-items: center; }
.faq-art svg { width: min(100%, 330px); height: auto; overflow: visible; }
/* Living illustration: dashed rings drift, the "?" bubble bobs. */
.faq-art .fa-ring {
  transform-box: view-box; transform-origin: 170px 170px;
  animation: fa-spin 70s linear infinite;
}
.faq-art .fa-ring2 { animation-duration: 48s; animation-direction: reverse; }
@keyframes fa-spin { to { transform: rotate(360deg); } }
.faq-art .fa-bubble {
  transform-box: fill-box; transform-origin: center;
  animation: fa-bob 3.6s ease-in-out infinite;
}
@keyframes fa-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .faq-art .fa-ring, .faq-art .fa-bubble { animation: none; }
}
.lp-faq details {
  background: rgba(47, 51, 73, .45);
  border: 1px solid rgba(225, 222, 245, .1);
  border-radius: var(--r-lg);
  margin-bottom: .7rem;
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lp-faq details[open] {
  border-color: rgba(225, 222, 245, .16);
  box-shadow: 0 14px 36px rgba(8, 9, 20, .55);
}
.lp-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.3rem;
  font-weight: 600; color: var(--text-heading);
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: '+';
  font-size: 1.25rem; font-weight: 500; color: var(--primary);
  transition: transform var(--dur) var(--ease);
  flex-shrink: 0;
}
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq details p { padding: 0 1.3rem 1.1rem; margin: 0; color: var(--text-muted); font-size: .92rem; }
/* Buttery open/close: animate the details content's height (Chromium 131+;
   older engines fall back to the instant toggle). */
.lp-faq details { interpolate-size: allow-keywords; }
.lp-faq details::details-content {
  block-size: 0; overflow: clip;
  transition: block-size .22s var(--ease), content-visibility .22s allow-discrete;
}
.lp-faq details[open]::details-content { block-size: auto; }
.lp-faq details[open] p { animation: faq-reveal .28s var(--ease); }
@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-faq details::details-content { transition: none; }
  .lp-faq details[open] p { animation: none; }
}

/* ---------- Footer (wave crest flowing over a deep purple body) ---------- */
.lp-footer { background: transparent; margin-top: 3rem; }
.lp-footer-wave { position: relative; height: 96px; overflow: hidden; }
.lp-footer-wave .wave {
  position: absolute; bottom: -1px; left: 0;
  width: 200%; height: 100%;
  animation: wave-flow 14s linear infinite;
}
.lp-footer-wave .wave path { fill: #46368b; }
.lp-footer-wave .wave-back {
  bottom: 10px; opacity: .45;
  animation-duration: 21s; animation-direction: reverse;
}
@keyframes wave-flow { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .lp-footer-wave .wave { animation: none; } }

.lp-footer-body {
  background: linear-gradient(180deg, #46368b 0px, #2b234f 150px);
  color: rgba(235, 232, 250, .85);
}
.lp-footer-grid {
  display: grid; grid-template-columns: 1.1fr 1fr 1.1fr;
  gap: 2.5rem; align-items: center;
  padding-block: 2.4rem 2.6rem;
}
.lp-footer-brand .brand-name { color: #fff; }
.lp-footer-brand p { color: rgba(235, 232, 250, .72); font-size: .9rem; margin: .8rem 0 0; max-width: 300px; }
.lp-footer-mid { text-align: center; }
.lpf-links { display: flex; justify-content: center; gap: 1.6rem; margin-bottom: .7rem; }
.lpf-links a { color: rgba(235, 232, 250, .92); font-weight: 600; font-size: .92rem; }
.lpf-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.lpf-copy { color: rgba(235, 232, 250, .6); font-size: .84rem; margin: 0 0 1rem; }
.lpf-socials { display: flex; justify-content: center; gap: .7rem; }
.lpf-socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(235, 232, 250, .3);
  color: rgba(235, 232, 250, .85);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lpf-socials a:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(235, 232, 250, .55); }
.lp-footer-qrs { display: flex; justify-content: flex-end; gap: 1.1rem; }
.lp-footer-qrs figure { margin: 0; text-align: center; }
.qr-card {
  display: inline-block;
  background: #fff;
  padding: 7px;
  border-radius: var(--r-md);
  border: 2px solid rgba(148, 130, 250, .8);
  box-shadow: 0 0 18px rgba(115, 103, 240, .45);
}
.qr-card img { display: block; width: 104px; height: 104px; }
.lp-footer-qrs figcaption { font-size: .8rem; color: rgba(235, 232, 250, .75); margin-top: .55rem; }

/* ---------- Light mode ----------
   The landing defaults to dark; this block restyles every hardcoded dark
   surface when the nav toggle switches html[data-theme] to "light".
   (Token-based colors from app.css flip on their own.) */
html[data-theme="light"] body.landing { background: #f8f7fa; }
html[data-theme="light"] .lp-pill {
  /* Same idea as dark: the page tone, a touch darker. */
  background: rgba(240, 238, 248, .72);
  border-color: rgba(47, 43, 61, .1);
}
html[data-theme="light"] .lp-nav a { color: rgba(47, 43, 61, .6); }
html[data-theme="light"] .lp-header-actions .icon-btn {
  background: #fff;
  border-color: rgba(47, 43, 61, .12);
  color: var(--text-body);
}
html[data-theme="light"] .lp-header-actions .icon-btn:hover { background: #f1effa; color: var(--text-heading); }
html[data-theme="light"] .lp-header.scrolled .lp-pill {
  box-shadow: 0 10px 34px rgba(47, 43, 61, .14);
  border-color: rgba(47, 43, 61, .16);
}
html[data-theme="light"] .lp-badge { background: #fff; border-color: rgba(47, 43, 61, .14); color: rgba(47, 43, 61, .7); }
html[data-theme="light"] .lp-hero-copy h1 { color: rgba(47, 43, 61, .92); }
html[data-theme="light"] .lp-lede { color: rgba(47, 43, 61, .6); }
html[data-theme="light"] .lp-lede strong { color: rgba(47, 43, 61, .95); }
html[data-theme="light"] .lp-trust { color: rgba(47, 43, 61, .55); }
html[data-theme="light"] .lp-hero::after { background: linear-gradient(rgba(248, 247, 250, 0), #f8f7fa 92%); }
html[data-theme="light"] .btn-ghost {
  color: rgba(47, 43, 61, .8);
  border-color: rgba(47, 43, 61, .25);
}
html[data-theme="light"] .btn-ghost:hover { background: rgba(47, 43, 61, .05); border-color: rgba(47, 43, 61, .4); }
html[data-theme="light"] .lp-eyebrow { color: #2f2b3d; }
html[data-theme="light"] .lp-band .lp-eyebrow { color: #fff; }
html[data-theme="light"] .lp-section-head h2 { color: rgba(47, 43, 61, .92); }
html[data-theme="light"] .lp-band .lp-section-head h2 { color: #fff; }
html[data-theme="light"] .lp-hero-shot img { box-shadow: -24px -22px 70px rgba(var(--primary-rgb), .16), 0 24px 60px rgba(47, 43, 61, .25); }
html[data-theme="light"] .price-card { background: #fff; border-color: rgba(47, 43, 61, .1); }
html[data-theme="light"] .price-card h3 { color: #2f2b3d; }
html[data-theme="light"] .pc-popular { border-color: rgba(var(--primary-rgb), .5); }
html[data-theme="light"] .pt-label.active { color: rgba(47, 43, 61, .95); }
html[data-theme="light"] .pswitch[aria-checked="false"] { background: rgba(47, 43, 61, .22); }
html[data-theme="light"] .rv-card { background: #fff; border-color: rgba(47, 43, 61, .1); box-shadow: var(--shadow-sm); }
html[data-theme="light"] .lp-faq details { background: #fff; border-color: rgba(47, 43, 61, .1); }
html[data-theme="light"] .lp-faq details[open] { border-color: rgba(47, 43, 61, .16); box-shadow: 0 14px 36px rgba(47, 43, 61, .18); }
/* The footer keeps its purple identity in both themes. */
html[data-theme="light"] .lp-tab strong,
html[data-theme="light"] .lp-tab { color: #fff; }

/* App-open exit: the page zooms toward the pressed button (origin set by
   JS) while a scrim in the destination page's colour sweeps in — the iOS
   app-launch feel, independent of cross-document view-transition support. */
body.landing.leaving { animation: page-open-zoom .45s cubic-bezier(.32, .72, 0, 1) forwards; }
@keyframes page-open-zoom { to { transform: scale(1.07); } }
.page-open-scrim {
  position: fixed; inset: -10%;
  z-index: 600;
  background: var(--body-bg);
  opacity: 0; pointer-events: none;
  transition: opacity .4s cubic-bezier(.32, .72, 0, 1);
}
.page-open-scrim.show { opacity: 1; }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-late { transition-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .lp-hero { padding-top: 3.2rem; min-height: 0; }
  /* On smaller screens the shot flows below the copy, still flush right
     and still clipped at the section's bottom edge. */
  .lp-hero-shot {
    /* Stays positioned (not static) so its z-index keeps it above the
       wavelines layer and the bottom fade. */
    position: relative; right: auto; bottom: auto;
    width: min(88%, 680px);
    margin: 2.6rem 0 -3rem auto;
  }
  .lp-pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-band-grid { grid-template-columns: 1fr; }
  .lp-tabs { flex-direction: row; overflow-x: auto; padding-bottom: .4rem; }
  .lp-tab { min-width: 190px; flex-shrink: 0; }
}
@media (max-width: 860px) {
  /* The center links leave the grid (hidden / absolute dropdown), so the
     pill re-templates to [brand | actions] — actions stay right-aligned. */
  .lp-pill { position: relative; grid-template-columns: auto 1fr; }
  .lp-nav {
    display: none;
    position: absolute; top: calc(100% + 8px); left: 1rem; right: 1rem;
    flex-direction: column; gap: .2rem;
    background: rgba(37, 41, 60, .97);
    border: 1px solid rgba(225, 222, 245, .12);
    border-radius: var(--r-lg);
    box-shadow: 0 18px 50px rgba(8, 9, 20, .6);
    padding: .5rem;
  }
  html[data-theme="light"] .lp-nav {
    background: rgba(255, 255, 255, .97);
    border-color: rgba(47, 43, 61, .12);
    box-shadow: 0 18px 50px rgba(47, 43, 61, .18);
  }
  .lp-header { position: sticky; }
  .lp-nav.open { display: flex; }
  .lp-nav a { padding: .7rem 1rem; }
  .lp-burger { display: grid; }
}
@media (max-width: 760px) {
  .lp-pricing-grid { grid-template-columns: 1fr; }
  .lp-footer-grid { grid-template-columns: 1fr; gap: 1.8rem; text-align: center; }
  .lp-footer-brand p { margin-inline: auto; }
  .lp-footer-brand .brand { justify-content: center; }
  .lp-footer-qrs { justify-content: center; }
  .lp-section { padding: 3.2rem 0; }
  .lp-faq-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .faq-art { display: none; }
}
@media (max-width: 430px) {
  .lp-container { padding: 0 1rem; }
  .lp-pill { gap: .8rem; padding-left: .9rem; }
  /* Must out-rank .landing .btn-primary.lp-dash-btn — media queries add no
     cascade weight on their own. */
  .landing .btn-primary.lp-dash-btn { padding: .45rem .8rem; font-size: .8rem; }
  #lp-theme { display: none; }
}