/* ==========================================================================
   FREEPORT — LANDING PAGE (3-section redesign)
   Builds on freeport-foundation.css tokens/components. Loaded AFTER it.
   Sections:  1) Hero   2) Product loop   3) Company
   ========================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  /* one canonical near-black across the whole page — sections paint themselves,
     this just guarantees no off-palette colour ever peeks through a seam */
  background-color: #030810;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.lp-container {
  width: 100%;
  max-width: var(--fp-container);
  margin-inline: auto;
  padding-inline: var(--fp-gutter);
}

/* Accent word treatment (serif italic orange) reused across sections */
.lp-accent { color: var(--fp-accent); }

/* Reveal animation base (reveal.js toggles .is-in) — deliberate, restrained motion */
@media (prefers-reduced-motion: no-preference) {
  .fp-reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s var(--fp-ease-out), transform .75s var(--fp-ease-out); will-change: opacity, transform; }
  .fp-reveal.is-in { opacity: 1; transform: none; }
  .fp-reveal[data-d="1"] { transition-delay: .08s; }
  .fp-reveal[data-d="2"] { transition-delay: .16s; }
  .fp-reveal[data-d="3"] { transition-delay: .24s; }
  .fp-reveal[data-d="4"] { transition-delay: .32s; }
}

/* ============================================================ HEADER */
.lp-header {
  position: absolute; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--fp-gutter);
  transition: background-color .3s var(--fp-ease), backdrop-filter .3s var(--fp-ease), border-color .3s var(--fp-ease);
  border-bottom: 1px solid transparent;
}
.lp-header.is-scrolled {
  background: rgba(20,18,16,.72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--fp-line-on-dark);
}
.lp-logo {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--fp-font-display); font-weight: 700;
  color: var(--fp-on-dark); text-decoration: none; letter-spacing: -.01em;
  font-size: 1.1rem; line-height: 1.05;
}
.lp-logo svg { width: 30px; height: 30px; flex: none; }
.lp-logo__mark { width: 30px; height: 30px; flex: none; object-fit: contain; display: block; filter: brightness(0) invert(1); }
.lp-logo span { display: block; }
.lp-nav { display: flex; align-items: center; gap: .7rem; }
.lp-nav .lp-store { padding: .45rem .8rem; }
.lp-nav .lp-store svg { width: 22px; height: 22px; }
/* tablet: store buttons go icon-only so they don't crowd the logo */
@media (max-width: 720px) {
  .lp-nav { gap: .5rem; }
  .lp-nav .lp-store { padding: .45rem; gap: 0; }
  .lp-nav .lp-store span { display: none; }
}
/* phone: drop the header store buttons entirely (the hero has the Download CTA) — keep a clean logo-only header */
@media (max-width: 560px) {
  .lp-nav { display: none; }
}

/* ============================================================ 1 · HERO */
.lp-hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: flex; align-items: flex-start;
  padding-top: max(6rem, 23svh); padding-bottom: 11rem;
  background: #000;
  color: var(--fp-on-dark);
  overflow: hidden;
}
/* soft blue ambient glow — the same rgba(47,139,255) accent the rest of the page uses;
   strongest behind the ship mark (mid-right), with a faint echo across the lower-left ocean */
.lp-hero::before {
  content: ""; display: block;
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(40% 46% at 76% 46%, rgba(47,139,255,.22), rgba(47,139,255,.06) 55%, transparent 75%),
    radial-gradient(46% 34% at 24% 86%, rgba(47,139,255,.10), transparent 70%);
}
/* color-matched bottom fade — reaches solid #030810 early so the full bottom of the hero is that one colour */
.lp-hero::after {
  content: ""; display: block;
  position: absolute; bottom: 0; left: 0; right: 0; height: 32%;
  z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(3,8,16,.55) 52%, #030810 86%, #030810 100%);
}

/* full-bleed interactive vector-field ocean (assets/js/vector-ocean.js) on pure black */
.lp-hero__field {
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
}
/* faint scrim: dims the white field behind the headline (left) and the header (top)
   so the copy stays the brightest thing on screen; everywhere else the field shows clean */
.lp-hero__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 36%, transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 28%);
}
/* ambient floating market numbers (drifting up through the water) */
.lp-hero__ticks { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.lp-hero__ticks span {
  position: absolute; left: var(--x); top: var(--y);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem;
  color: var(--fp-on-dark-2); white-space: nowrap; opacity: 0;
}
.lp-hero__ticks .up { color: #5ec98a; } .lp-hero__ticks .down { color: #ff7a7a; } .lp-hero__ticks .am { color: var(--fp-orange); }
/* Freeport ship mark as live binary ASCII (assets/js/ship-ascii.js) — sits where the
   old boat rode the ocean (right side), cream over the field with a soft blue glow + bob */
#ship-stage {
  position: absolute; z-index: 2; right: 13%; top: 52%; transform: translateY(-50%);
  pointer-events: none;
}
#ship-stage .ascii-output {
  margin: 0; color: #F0EBE0;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px; line-height: 9px; letter-spacing: .5px; font-weight: 500;
  white-space: pre;
  filter: drop-shadow(0 0 22px rgba(47,139,255,.38)) drop-shadow(0 8px 20px rgba(0,0,0,.4));
}
#ship-stage.is-error { display: none; } /* rasterize failed — hero stays as the ocean field */
@media (prefers-reduced-motion: no-preference) {
  #ship-stage { animation: lp-mark-float 6.5s ease-in-out infinite; }
  @keyframes lp-mark-float {
    0%, 100% { transform: translateY(calc(-50% - 9px)); }
    50%      { transform: translateY(calc(-50% + 9px)); }
  }
}
@media (max-width: 760px) { #ship-stage { display: none; } }

/* hero feature highlights — replaces the old single-line sub; one line on desktop */
.lp-hero__features {
  list-style: none; margin: 3rem 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .7rem 1.9rem;
}
@media (min-width: 761px) { .lp-hero__features { flex-wrap: nowrap; } }
.lp-hero__features li {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--fp-font-display); font-weight: 600;
  font-size: clamp(1rem, .9rem + .4vw, 1.24rem);
  color: var(--fp-on-dark); white-space: nowrap;
}
.lp-hero__features svg {
  width: 1.4em; height: 1.4em; flex: none;
  color: var(--fp-accent);
}

.lp-hero .lp-container { position: relative; z-index: 3; text-align: left; }
.lp-hero__copy { max-width: 1040px; margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .lp-hero__ticks span { animation: tick-float 9s ease-in-out infinite; animation-delay: var(--d); }
}
@keyframes tick-float {
  0% { opacity: 0; transform: translateY(26px); }
  18% { opacity: .55; } 70% { opacity: .4; }
  100% { opacity: 0; transform: translateY(-46px); }
}

@media (max-width: 760px) {
  .lp-hero { padding-bottom: 2.5rem; }
  .lp-hero::after { height: 28%; }
  .lp-hero__ticks { display: none; }
  .lp-hero__scrim { background:
    linear-gradient(180deg, rgba(0,0,0,.5) 0%, transparent 30%, transparent 55%, rgba(0,0,0,.35) 100%); }
  .lp-loop { padding-block-start: 2.5rem; }
}

/* fomo-style centered hero text */
.lp-hero__eyebrow { display: block; font-family: var(--fp-font-display); font-weight: 600; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fp-on-dark-2); margin-bottom: 1.5rem; }

.lp-backed { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.lp-backed__label { font-family: var(--fp-font-display); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fp-on-dark-3); }
.lp-backed__logos { display: flex; align-items: center; gap: 1.1rem; }
.lp-backed__logos b { font-family: var(--fp-font-display); font-weight: 600; color: var(--fp-on-dark-2); font-size: .95rem; }
.lp-yc { display: inline-flex; align-items: center; gap: .5rem; color: var(--fp-on-dark-2); font-family: var(--fp-font-display); font-weight: 600; font-size: 1.15rem; }
.lp-yc i { display: grid; place-items: center; width: 27px; height: 27px; background: var(--fp-orange); color: #fff; border-radius: 5px; font-style: normal; font-weight: 700; font-size: .95rem; }

.lp-hero h1 {
  font-family: var(--fp-font-display); font-weight: 600;
  font-size: clamp(3.4rem, 1.3rem + 6.8vw, 6.8rem); line-height: .98; letter-spacing: -.03em;
  margin: 0 0 1.6rem; color: var(--fp-on-dark);
}
/* hero "hedge fund": premium platinum shimmer — a bright streak sweeps across the
   letters (theme-neutral, not blue, stands out via motion) */
.lp-hero h1 .lp-accent {
  background: linear-gradient(105deg,
    #c2c7d0 0%, #c2c7d0 38%,
    #ffffff 47%, #ffffff 53%,
    #c2c7d0 62%, #c2c7d0 100%);
  background-size: 260% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .lp-hero h1 .lp-accent { animation: lp-accent-shimmer 5.5s ease-in-out infinite; }
  @keyframes lp-accent-shimmer {
    0%   { background-position: 160% 0; }
    55%  { background-position: -60% 0; }
    100% { background-position: -60% 0; }
  }
}
.lp-hero__sub { font-size: clamp(1.2rem, 1rem + .6vw, 1.55rem); line-height: 1.5; color: var(--fp-on-dark-2); max-width: 46ch; margin: 0 0 3.2rem; }
.lp-hero__cta { display: flex; align-items: center; justify-content: flex-start; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 0; }
/* hero CTAs — larger, brighter glass with a soft white glow so they pop on the image */
.lp-hero__btn, .lp-hero__btn--ghost {
  position: relative; overflow: visible;
  font-size: 1.1rem; --_pad-y: 1.05em; --_pad-x: 2em;
  background: rgba(14,18,26,.5); backdrop-filter: blur(10px);
  color: var(--fp-on-dark); border-color: rgba(255,255,255,.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 0 22px -2px rgba(255,255,255,.16),
    0 12px 32px -12px rgba(0,0,0,.7);
}
.lp-hero__btn:hover, .lp-hero__btn--ghost:hover {
  background: rgba(26,30,40,.62); border-color: rgba(255,255,255,.7);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 0 34px 0 rgba(255,255,255,.32),
    0 16px 40px -12px rgba(0,0,0,.7);
}
/* primary hero CTA: gentle breathing glow (white + a hint of the blue accent) to draw the eye */
@media (prefers-reduced-motion: no-preference) {
  .lp-hero__btn { animation: lp-hero-glow 3.2s ease-in-out infinite; }
  @keyframes lp-hero-glow {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 18px -4px rgba(255,255,255,.14), 0 12px 32px -12px rgba(0,0,0,.7); }
    50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 0 30px 1px rgba(120,180,255,.45), 0 0 16px -2px rgba(255,255,255,.28), 0 12px 32px -12px rgba(0,0,0,.7); }
  }
}

/* top-left store badges (official App Store + Google Play artwork), under the corner brand */
.lp-store-badges {
  position: absolute; z-index: 60;
  top: 3.3rem; left: clamp(1rem, 4vw, 2.25rem);
  display: flex; align-items: center; gap: .5rem;
}
.lp-store-badges a {
  display: block; line-height: 0;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.45));
  transition: transform var(--fp-dur) var(--fp-ease), filter var(--fp-dur) var(--fp-ease);
}
.lp-store-badges a:hover { transform: translateY(-1px); filter: drop-shadow(0 5px 14px rgba(0,0,0,.55)); }
.lp-store-badges img { display: block; width: auto; }
.lp-store-badges .is-appstore { height: 40px; }
/* Google's official badge ships with built-in transparent padding — pull it in to match Apple's height */
.lp-store-badges .is-gplay { height: 59px; margin: -9px -7px; }
@media (max-width: 640px) {
  .lp-store-badges { top: 2.85rem; gap: .35rem; }
  .lp-store-badges .is-appstore { height: 33px; }
  .lp-store-badges .is-gplay { height: 49px; margin: -8px -7px; }
}

/* download cards */
.lp-downloads { display: flex; align-items: stretch; gap: .9rem; flex-wrap: wrap; }
.lp-store {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .7rem 1.1rem; border-radius: var(--fp-radius-md);
  background: rgba(247,245,241,.06); border: 1px solid var(--fp-line-on-dark);
  color: var(--fp-on-dark); text-decoration: none;
  transition: transform .25s var(--fp-ease), background-color .25s var(--fp-ease), border-color .25s var(--fp-ease);
}
.lp-store:hover { transform: translateY(-2px); background: rgba(247,245,241,.1); border-color: rgba(247,245,241,.3); }
.lp-store svg { width: 26px; height: 26px; flex: none; }
.lp-store small { display: block; font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; color: var(--fp-on-dark-3); font-family: var(--fp-font-body); }
.lp-store b { display: block; font-family: var(--fp-font-display); font-weight: 600; font-size: 1rem; line-height: 1.1; }
.lp-qr {
  display: flex; align-items: center; gap: .8rem;
  padding: .65rem .8rem .65rem .65rem; border-radius: var(--fp-radius-md);
  background: var(--fp-on-dark); color: var(--fp-ink);
}
.lp-qr__code { width: 60px; height: 60px; background: #fff; border-radius: 8px; padding: 4px; flex: none; }
.lp-qr__code svg, .lp-qr__code img { width: 100%; height: 100%; }
.lp-qr small { display: block; font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; color: var(--fp-ink-3); font-family: var(--fp-font-body); }
.lp-qr b { font-family: var(--fp-font-display); font-weight: 600; font-size: .95rem; line-height: 1.15; max-width: 12ch; }

/* "Coming soon" store badge (no Android app yet) */
.lp-store.is-soon { cursor: default; opacity: .7; }
.lp-store.is-soon:hover { transform: none; background: rgba(247,245,241,.06); border-color: var(--fp-line-on-dark); }
.lp-store.is-soon b { color: var(--fp-on-dark-2); }

/* hero right: realistic two-phone cluster (public.com style) */
.lp-hero__art { position: relative; display: grid; place-items: center; }
.lp-stage {
  position: relative; display: grid; place-items: center;
  perspective: 1700px; min-height: clamp(420px, 40vw, 560px); width: 100%;
}
.lp-phone {
  position: relative;
  width: clamp(195px, 22vw, 262px); aspect-ratio: 1179/2556;
  border-radius: 2.7rem; padding: .5rem;
  /* brushed-titanium frame */
  background:
    linear-gradient(145deg, #5b554f 0%, #211d19 26%, #36312c 52%, #18140f 78%, #4a443e 100%);
  box-shadow:
    0 55px 110px -32px rgba(0,0,0,.88),
    0 0 0 1px rgba(0,0,0,.55),
    inset 0 0 0 1.6px rgba(247,245,241,.14),
    0 0 80px -14px rgba(47,139,255,.42);
}
.lp-phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 2.25rem; display: block; }
/* dynamic island */
.lp-phone__island { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 4; width: 30%; height: 17px; background: #000; border-radius: 999px; }
/* glossy screen reflection */
.lp-phone__glare { position: absolute; inset: .5rem; z-index: 3; border-radius: 2.25rem; pointer-events: none;
  background: linear-gradient(128deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 36%, rgba(255,255,255,0) 72%, rgba(255,255,255,.07) 100%); }
/* side buttons */
.lp-phone::before { content: ""; position: absolute; right: -2.5px; top: 30%; width: 3px; height: 60px; border-radius: 2px; background: linear-gradient(#4a443e, #18140f); }
.lp-phone::after  { content: ""; position: absolute; left: -2.5px; top: 22%; width: 3px; height: 34px; border-radius: 2px; background: linear-gradient(#4a443e, #18140f); box-shadow: 0 46px 0 -1px #2a2520, 0 46px 0 0 transparent; }

.lp-phone--front { z-index: 2; transform: rotateY(-15deg) rotateX(5deg) rotateZ(-2deg) translateX(-10%); animation: lp-float 7.5s var(--fp-ease) infinite; }
.lp-phone--back  { position: absolute; z-index: 1; width: clamp(150px, 16.5vw, 198px); transform: translate(58%, -8%) rotateY(-24deg) rotateX(7deg) rotateZ(11deg); animation: lp-float 7.5s var(--fp-ease) infinite reverse; }
@keyframes lp-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }

.lp-hero__chip {
  position: absolute; z-index: 5; display: flex; align-items: center; gap: .55rem;
  background: rgba(20,18,16,.72); backdrop-filter: blur(10px);
  border: 1px solid var(--fp-line-on-dark); border-radius: var(--fp-radius-md);
  padding: .55rem .8rem; font-family: var(--fp-font-display); font-size: .82rem; color: var(--fp-on-dark);
  box-shadow: var(--fp-shadow-lg);
}
.lp-hero__chip .up { color: #1fce67; font-weight: 600; }
.lp-hero__chip.is-tl { top: 10%; left: -2%; animation: lp-float 6s var(--fp-ease) infinite; }
.lp-hero__chip.is-br { bottom: 14%; right: 0%; animation: lp-float 6s var(--fp-ease) infinite reverse; }

@media (prefers-reduced-motion: reduce) {
  .lp-phone--front, .lp-phone--back, .lp-hero__chip { animation: none; }
}
@media (max-width: 980px) {
  .lp-hero__art { order: -1; }
  .lp-hero__chip { display: none; }
  .lp-stage { min-height: 0; }
  .lp-phone--front { transform: none; }
  .lp-phone--back { display: none; }
}
@media (max-width: 560px) { .lp-downloads { flex-direction: column; } .lp-qr { width: 100%; } }

/* ============================================================ 2 · LOOP */
.lp-loop {
  position: relative; color: var(--fp-on-dark); padding-block: var(--fp-section-y); overflow: hidden;
  /* tighten the gap into the FAQ section below */
  padding-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.75rem);
  /* and the gap under the hero above — match the loop->FAQ seam rhythm */
  padding-top: clamp(2.5rem, 2rem + 2.4vw, 4rem);
  background-color: #030810; /* exactly the hero's fade-out colour — seamless hand-off */
}
/* soft ambient light — kept well below the top so the transition zone stays flat #030810 */
.lp-loop::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .6;
  background: radial-gradient(72% 46% at 50% 60%, rgba(47,139,255,.07), transparent 65%);
}
/* drifting blue ambient blobs — all positioned in the lower half so section tops stay clean */
.lp-loop::after, .lp-company::after {
  content: ""; position: absolute; inset: -12%; z-index: 0; pointer-events: none; opacity: .55;
  background:
    radial-gradient(26% 24% at 16% 65%, rgba(47,139,255,.12), transparent 70%),
    radial-gradient(24% 22% at 84% 70%, rgba(47,139,255,.09), transparent 70%),
    radial-gradient(30% 26% at 62% 60%, rgba(47,139,255,.05), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .lp-loop::after, .lp-company::after { animation: lp-drift 26s ease-in-out infinite alternate; }
}
@keyframes lp-drift {
  0% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-2.5%, 2%, 0) scale(1.02); }
}
.lp-loop .lp-container { position: relative; z-index: 1; }
/* faint vector-field ocean behind the dark sections — the hero's signature
   texture carried through the page (canvas[data-field], assets/js/vector-ocean.js).
   Masked so it breathes in/out at section edges instead of cutting hard. */
.lp-section-field {
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
  pointer-events: none;
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
          mask: linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
}
.lp-loop__head { text-align: center; max-width: 48rem; margin: 0 auto 4.5rem; }
.lp-loop__head .fp-eyebrow { color: var(--fp-orange); }
/* eyebrows in the dark sections echo the hero's monospace motif (tickers + ASCII boat) */
.lp-loop__head .fp-eyebrow, .lp-company__head .fp-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 500; letter-spacing: .22em;
}
.lp-loop__head h2 { font-family: var(--fp-font-display); font-weight: 600; font-size: var(--fp-h2); line-height: 1.08; margin: 1rem 0 0; color: var(--fp-on-dark); text-wrap: balance; }
/* standalone section headings ("WHY FREEPORT", "FREQUENTLY ASKED QUESTIONS") — single row, all-caps, blue */
.lp-loop__head h2.lp-bighead, .lp-company__head h2.lp-bighead {
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.6rem); line-height: 1.1; margin: 0;
  text-transform: uppercase; letter-spacing: .015em; white-space: nowrap; color: var(--fp-accent);
}
/* FAQ progressive disclosure: show seven, reveal the rest behind "See more questions" */
.lp-faq:not(.is-expanded) .lp-faq__item.is-more { display: none; }
.lp-faq__more { display: flex; justify-content: center; margin-top: 2.6rem; }
.lp-faq__more-btn { cursor: pointer; font-size: 1.1rem; }
.lp-faq__more-btn svg { width: 16px; height: 16px; margin-left: .35rem; vertical-align: -3px; }
.lp-loop__bold, .lp-loop__dim { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; background-size: 220% 100%; background-repeat: repeat; }
.lp-loop__bold { background-image: linear-gradient(100deg, #efece6 0%, #efece6 42%, #ffffff 50%, #efece6 58%, #efece6 100%); }
.lp-loop__dim  { background-image: linear-gradient(100deg, rgba(247,245,241,.40) 0%, rgba(247,245,241,.40) 42%, rgba(247,245,241,.80) 50%, rgba(247,245,241,.40) 58%, rgba(247,245,241,.40) 100%); }

/* ---- refined feature cards (Liquid-style: big graphic panel + title + copy) ---- */
.lp-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
@media (max-width: 940px) { .lp-flow { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (max-width: 540px) { .lp-flow { grid-template-columns: 1fr; } }
.lp-flow__card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: 1.3rem; border-radius: var(--fp-radius-lg);
  background: rgba(247,245,241,.035); border: 1px solid var(--fp-line-on-dark); backdrop-filter: blur(6px);
  transition: transform .4s var(--fp-ease-out), border-color .4s var(--fp-ease), background-color .4s var(--fp-ease);
}
.lp-flow__card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(75% 50% at 50% 0%, rgba(47,139,255,.14), transparent 70%); transition: opacity .4s var(--fp-ease);
}
.lp-flow__card:hover { transform: translateY(-5px); border-color: rgba(47,139,255,.42); background: rgba(247,245,241,.055); }
.lp-flow__card:hover::after { opacity: 1; }
.lp-flow__viz {
  position: relative; height: clamp(168px, 17vw, 200px); margin-bottom: 1.3rem; overflow: hidden;
  border-radius: var(--fp-radius-md); background: rgba(0,0,0,.22); border: 1px solid var(--fp-line-on-dark);
  display: grid; place-items: center;
}
.lp-flow__viz svg { width: 80%; height: 80%; overflow: visible; }
.lp-flow__num { font-family: var(--fp-font-display); font-weight: 700; font-size: .72rem; letter-spacing: .14em; color: var(--fp-accent); }
.lp-flow__card h3 { font-family: var(--fp-font-display); font-weight: 600; font-size: 1.5rem; margin: .35rem 0 .5rem; color: var(--fp-on-dark); }
.lp-flow__card p { color: var(--fp-on-dark-2); font-size: .92rem; line-height: 1.55; margin: 0; }

/* 1 · SIGNAL — sonar radar surfacing a signal */
.vs-grid { fill: none; stroke: var(--fp-line-on-dark); stroke-width: 1; }
.vs-core { fill: var(--fp-orange); }
.vs-blip { fill: #fff; }
.vs-sweep { stroke: var(--fp-orange); stroke-width: 2; stroke-linecap: round; transform-box: view-box; transform-origin: 120px 100px; opacity: .85; }
.vs-ring { fill: none; stroke: var(--fp-orange); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; }
/* 2 · CONTEXT — scattered sources wiring into a hub */
.vc-edge { stroke: var(--fp-on-dark-3); stroke-width: 1.6; fill: none; stroke-dasharray: 120; stroke-dashoffset: 120; }
.vc-node { fill: var(--fp-on-dark); transform-box: fill-box; transform-origin: center; }
.vc-hub { fill: var(--fp-orange); transform-box: fill-box; transform-origin: center; }
/* 3 · CONVICTION — a gauge filling and locking to a check */
.vk-bloom { transform-box: fill-box; transform-origin: center; }
.vk-track { fill: none; stroke: var(--fp-line-on-dark); stroke-width: 8; stroke-linecap: round; }
.vk-fill { fill: none; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; filter: drop-shadow(0 0 6px rgba(47,139,255,.55)); }
.vk-knob { fill: #fff; opacity: 0; filter: drop-shadow(0 0 7px rgba(255,255,255,.85)); }
.vk-check { fill: none; stroke: var(--fp-orange); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 64; stroke-dashoffset: 64; }
/* 4 · EXECUTION — a pill that fills and confirms */
.vexec { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 0 1.1rem; }
.vx-stage { position: relative; display: grid; place-items: center; max-width: 100%; }
.vx-frame { position: absolute; width: calc(100% + 20px); height: calc(100% + 15px); border-radius: var(--fp-radius-pill); border: 1px solid var(--fp-line-on-dark); }
.vx-shine { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.5) 50%, transparent 68%); transform: translateX(-130%); }
.vx-pill { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1.05rem; border-radius: var(--fp-radius-pill);
  background: rgba(47,139,255,.1); border: 1px solid rgba(47,139,255,.5);
  font-family: var(--fp-font-display); font-weight: 600; font-size: .9rem; color: var(--fp-on-dark); }
.vx-fill { position: absolute; inset: 0; z-index: 0; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--fp-orange), #7db4ff); }
.vx-label, .vx-check { position: relative; z-index: 2; }
.vx-check { opacity: 0; }
.vx-sub { font-size: .76rem; color: var(--fp-on-dark-3); }

@media (prefers-reduced-motion: no-preference) {
  .vs-sweep { animation: lp-spin 4.5s linear infinite; }
  .vs-ring { animation: vs-expand 3s ease-out infinite; }
  .vs-ring.r2 { animation-delay: 1s; } .vs-ring.r3 { animation-delay: 2s; }
  .vs-blip { animation: vs-blip 3s ease-in-out infinite; }

  .vc-edge { animation: vc-draw 4s ease-in-out infinite; }
  .vc-edge.e2 { animation-delay: .25s; } .vc-edge.e3 { animation-delay: .5s; } .vc-edge.e4 { animation-delay: .75s; }
  .vc-node { animation: vc-pulse 3.6s ease-in-out infinite; }
  .vc-hub { animation: vc-pulse 3.6s ease-in-out infinite .4s; }

  .vk-bloom { animation: vk-bloom 4.5s ease-in-out infinite; }
  .vk-fill { animation: vk-fill 4.5s ease-in-out infinite; }
  .vk-knob { animation: vk-knob 4.5s ease-in-out infinite; }
  .vk-check { animation: vk-check 4.5s ease-in-out infinite; }

  .vx-fill { animation: vx-fill 4.5s ease-in-out infinite; }
  .vx-pill { animation: vx-glow 4.5s ease-in-out infinite; }
  .vx-shine { animation: vx-shine 4.5s ease-in-out infinite; }
  .vx-check { animation: vx-pop 4.5s ease-in-out infinite; }
  .vx-label { animation: vx-label 4.5s ease-in-out infinite; }

  .lp-loop__bold, .lp-loop__dim { animation: lp-shimmer 6s linear infinite; }
}
@keyframes lp-shimmer { 0% { background-position: 220% 0; } 100% { background-position: -120% 0; } }
@keyframes vk-bloom  { 0%,40% { opacity: .3; transform: scale(.85); } 60%,100% { opacity: 1; transform: scale(1.05); } }
@keyframes vx-shine  { 0%,52% { transform: translateX(-130%); } 72%,100% { transform: translateX(130%); } }
@keyframes lp-spin   { to { transform: rotate(360deg); } }
@keyframes vs-expand { 0% { transform: scale(.25); opacity: .85; } 80% { opacity: 0; } 100% { transform: scale(2.7); opacity: 0; } }
@keyframes vs-blip   { 0%,60%,100% { opacity: .25; } 72% { opacity: 1; } }
@keyframes vc-draw   { 0% { stroke-dashoffset: 120; } 42%,100% { stroke-dashoffset: 0; } }
@keyframes vc-pulse  { 0%,100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.28); opacity: 1; } }
@keyframes vk-fill   { 0%,8% { stroke-dashoffset: 340; } 58%,100% { stroke-dashoffset: 0; } }
@keyframes vk-knob   { 0%,52% { opacity: 0; } 62%,100% { opacity: 1; } }
@keyframes vk-check  { 0%,62% { stroke-dashoffset: 64; } 84%,100% { stroke-dashoffset: 0; } }
@keyframes vx-fill   { 0%,18% { transform: scaleX(0); } 55%,100% { transform: scaleX(1); } }
@keyframes vx-glow   { 0%,32% { box-shadow: 0 0 0 rgba(47,139,255,0); } 62%,100% { box-shadow: 0 0 26px -4px rgba(47,139,255,.7); } }
@keyframes vx-pop    { 0%,55% { opacity: 0; transform: scale(.6); } 72%,100% { opacity: 1; transform: scale(1); } }
@keyframes vx-label  { 0%,55% { color: var(--fp-on-dark); } 70%,100% { color: #fff; } }

.lp-loop__cta { text-align: center; margin-top: 4.5rem; }

/* ---- fused loop: animated step list (left) + angled phone frames (right) ---- */
.lp-flow2 { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 900px) { .lp-flow2 { grid-template-columns: 1fr; gap: 2.6rem; } }
.lp-flow2__steps { display: grid; gap: 1.35rem; }
.lp-step2 {
  display: flex; align-items: center; gap: 1.3rem; padding: 1.15rem 1.4rem; border-radius: var(--fp-radius-lg);
  background: rgba(247,245,241,.03); border: 1px solid var(--fp-line-on-dark); backdrop-filter: blur(6px);
  transition: transform .35s var(--fp-ease), border-color .35s var(--fp-ease), background-color .35s var(--fp-ease);
}
.lp-step2:hover { transform: translateX(5px); border-color: rgba(47,139,255,.42); background: rgba(247,245,241,.05); }

/* 3D step cards (Signal · Context · Conviction · Execution).
   Scoped to .has-gsap, which gsap-enhance.js adds ONLY after GSAP loads and
   motion is allowed — so without JS/GSAP, or under reduced-motion / narrow
   screens, the cards stay plain and visible (no hidden-flash trap). */
.has-gsap .lp-flow2__steps { perspective: 1100px; perspective-origin: 50% 35%; }
.has-gsap .lp-step2[data-step3d] {
  opacity: 0;                       /* GSAP reveals these; transform is GSAP-owned */
  transform-style: preserve-3d;
  transition: border-color .35s var(--fp-ease), background-color .35s var(--fp-ease);
  will-change: transform, opacity;
}
/* Lift the viz and text onto raised Z-planes so a tilt reads as real depth. */
.has-gsap .lp-step2[data-step3d] .lp-step2__viz { transform: translateZ(40px); }
.has-gsap .lp-step2[data-step3d] .lp-step2__txt { transform: translateZ(18px); }
.lp-step2__viz { flex: none; width: 66px; height: 66px; display: grid; place-items: center; overflow: hidden;
  border-radius: var(--fp-radius-md); background: rgba(0,0,0,.28); border: 1px solid var(--fp-line-on-dark); }
.lp-step2__viz svg { width: 86%; height: 86%; overflow: visible; }
.lp-step2__txt .lp-flow__num { font-size: .66rem; }
.lp-step2__txt h3 { font-family: var(--fp-font-serif); font-weight: 600; font-size: 1.25rem; margin: .18rem 0 .4rem; color: var(--fp-on-dark); }
.lp-step2__txt p { font-size: .88rem; line-height: 1.5; color: var(--fp-on-dark-2); margin: 0; text-wrap: pretty; }
.lp-flow2__art { display: grid; place-items: center; perspective: 1500px; min-height: clamp(360px, 36vw, 460px); }
/* execution mini-icon — rising bars + upward trend + arrow (distinct from the conviction gauge) */
.vexec2 .x2-bar { fill: var(--fp-on-dark-3); transform-box: fill-box; transform-origin: bottom; }
.vexec2 .x2-trend { fill: none; stroke: var(--fp-on-dark); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 70; stroke-dashoffset: 70; }
.vexec2 .x2-arrow { fill: none; stroke: var(--fp-orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vexec2 .x2-dot { fill: var(--fp-orange); transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 4px rgba(47,139,255,.6)); }
@media (prefers-reduced-motion: no-preference) {
  .vexec2 .x2-trend { animation: x2-trend 3.4s ease-in-out infinite; }
  .vexec2 .b1 { animation: x2-rise 3.4s ease-in-out infinite; }
  .vexec2 .b2 { animation: x2-rise 3.4s ease-in-out infinite .12s; }
  .vexec2 .b3 { animation: x2-rise 3.4s ease-in-out infinite .24s; }
  .vexec2 .x2-dot { animation: x2-pop 3.4s ease-in-out infinite; }
}
@keyframes x2-trend { 0%,18% { stroke-dashoffset: 70; } 66%,100% { stroke-dashoffset: 0; } }
@keyframes x2-rise { 0% { transform: scaleY(.15); } 55%,100% { transform: scaleY(1); } }
@keyframes x2-pop { 0%,60% { transform: scale(0); } 78%,100% { transform: scale(1); } }

/* ============================================================ 3 · COMPANY ("see all features" layout) */
.lp-company {
  position: relative; overflow: hidden; color: var(--fp-on-dark);
  background-color: #030810;
  padding-block: var(--fp-section-y);
  /* tighten the gap coming out of the product-loop section above */
  padding-top: clamp(2rem, 1.4rem + 2.4vw, 3.75rem);
  /* tightened gap under the FAQ see-more button into the footer */
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.lp-company::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 40% at 50% 55%, rgba(47,139,255,.10), transparent 60%);
}
.lp-company .lp-container { position: relative; z-index: 1; }

/* transparent logo mark shown only in the FAQ section */
.lp-company__logo {
  display: block; width: 52px; height: 52px;
  object-fit: contain; margin: 0 auto 1.4rem;
  filter: brightness(0) invert(1); opacity: .88;
}

/* centered header, "see all features" style */
.lp-company__head { text-align: center; max-width: 44rem; margin: 0 auto 4.5rem; }
.lp-company__head .fp-eyebrow { color: var(--fp-orange); }
.lp-company__head h2 { font-family: var(--fp-font-display); font-weight: 600; font-size: var(--fp-h2); line-height: 1.05; margin: .6rem 0 1rem; color: var(--fp-on-dark); }
.lp-company__intro { font-size: 1.08rem; line-height: 1.65; color: var(--fp-on-dark-2); margin: 0; }

/* ---- FAQ accordion ---- */
.lp-faq { position: relative; z-index: 1; max-width: 46rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.lp-faq__item {
  border-radius: var(--fp-radius-md);
  background: rgba(247,245,241,.04); border: 1px solid var(--fp-line-on-dark);
  transition: border-color .3s var(--fp-ease), background-color .3s var(--fp-ease);
}
.lp-faq__item:hover { border-color: rgba(47,139,255,.42); }
.lp-faq__item[open] { background: rgba(247,245,241,.06); border-color: rgba(47,139,255,.42); }
.lp-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer;
  padding: 1.3rem 1.6rem; list-style: none;
  font-family: var(--fp-font-display); font-weight: 600; font-size: 1.08rem; color: var(--fp-on-dark);
}
.lp-faq__item summary::-webkit-details-marker { display: none; }
.lp-faq__sign { position: relative; flex: none; width: 18px; height: 18px; }
.lp-faq__sign::before, .lp-faq__sign::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--fp-orange); border-radius: 2px; transition: transform .3s var(--fp-ease), opacity .3s var(--fp-ease);
}
.lp-faq__sign::before { width: 14px; height: 2px; }
.lp-faq__sign::after { width: 2px; height: 14px; }
.lp-faq__item[open] .lp-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.lp-faq__item p { margin: 0; padding: 0 1.6rem 1.5rem; color: var(--fp-on-dark-2); line-height: 1.65; font-size: 1rem; max-width: 60ch; }

/* ---- three big illustration cards ---- */
.lp-feat { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 860px) { .lp-feat { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } }
.lp-feat::before { /* soft glow behind the row, like the reference */
  content: ""; position: absolute; inset: 6% -3% -6% -3%; z-index: 0; pointer-events: none; filter: blur(26px); opacity: .8;
  background: radial-gradient(45% 60% at 18% 50%, rgba(47,139,255,.16), transparent 70%),
              radial-gradient(45% 60% at 82% 50%, rgba(122,148,157,.14), transparent 70%);
}
.lp-feat__card {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  padding: 1.4rem; border-radius: var(--fp-radius-lg);
  background: rgba(247,245,241,.04); border: 1px solid var(--fp-line-on-dark); backdrop-filter: blur(6px);
  transition: transform .4s var(--fp-ease-out), border-color .4s var(--fp-ease), background-color .4s var(--fp-ease);
}
.lp-feat__card:hover { transform: translateY(-5px); border-color: rgba(47,139,255,.42); background: rgba(247,245,241,.06); }
.lp-feat__art {
  position: relative; height: clamp(150px, 15vw, 188px); margin-bottom: 1.3rem; overflow: hidden;
  border-radius: var(--fp-radius-md); background: rgba(247,245,241,.02); border: 1px solid var(--fp-line-on-dark);
  display: grid; place-items: center;
}
.lp-feat__card h3 { font-family: var(--fp-font-display); font-weight: 600; font-size: 1.3rem; margin: 0 0 .55rem; color: var(--fp-on-dark); }
.lp-feat__card p { font-size: .95rem; line-height: 1.6; color: var(--fp-on-dark-2); margin: 0; }

/* art 1 · orbiting code/data around the feed core */
.art-orbit { width: 100%; height: 100%; }
.art-orbit .orbit-ring { fill: none; stroke: var(--fp-line-on-dark); stroke-width: 1.5; }
.art-orbit .orbit-core { fill: var(--fp-accent-soft); stroke: var(--fp-orange); stroke-width: 2; }
.art-orbit .orbit-core__glyph { fill: var(--fp-orange); font-size: 20px; text-anchor: middle; font-family: var(--fp-font-display); }
.art-orbit .orbit-tok rect { fill: #0c0d0f; stroke: rgba(47,139,255,.45); stroke-width: 1; }
.art-orbit .orbit-tok text { fill: #cfeadd; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; text-anchor: middle; }
.art-orbit .orbit-tok text.up { fill: #5ec98a; }
.art-orbit .orbit-tok text.down { fill: #ff7a7a; }
.art-orbit .orbit-spin { transform-box: view-box; transform-origin: 130px 90px; }
.art-orbit .orbit-tok__rev { transform-box: fill-box; transform-origin: center; }

/* art 2 · noise being filtered down into a clean signal */
.art-filter { position: relative; overflow: hidden; }
.filter-noise { position: absolute; inset: 0; }
.filter-noise span {
  position: absolute; top: -14px; left: var(--x); transform: translateX(-50%);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--fp-on-dark-3); white-space: nowrap;
}
.filter-bar { position: absolute; top: 58%; left: 16%; right: 16%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--fp-orange), transparent); box-shadow: 0 0 16px rgba(47,139,255,.7); }
.filter-stem { position: absolute; top: 58%; left: 50%; width: 1.5px; height: 16%; transform: translateX(-50%);
  background: linear-gradient(var(--fp-orange), transparent); }
.filter-out { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%);
  font-family: var(--fp-font-display); font-weight: 600; font-size: .82rem; color: #5ec98a;
  background: rgba(94,201,138,.12); border: 1px solid rgba(94,201,138,.5); border-radius: 999px; padding: .25rem .7rem; }
@media (prefers-reduced-motion: no-preference) {
  .filter-noise span { animation: lp-fall 3.4s linear infinite; animation-delay: var(--d); }
  .filter-out { animation: lp-out 3.4s ease-in-out infinite; }
}
@keyframes lp-fall {
  0% { transform: translate(-50%, 0); opacity: 0; }
  14% { opacity: .85; }
  50% { opacity: .5; }
  68% { transform: translate(-50%, 100px); opacity: 0; }
  100% { transform: translate(-50%, 100px); opacity: 0; }
}
@keyframes lp-out { 0%,55% { opacity: .35; transform: translate(-50%, 4px); } 75%,100% { opacity: 1; transform: translate(-50%, 0); } }

/* art 3 · pre-IPO access — elegant glowing light-well portal (Glow-style) */
.art-portal { position: relative; display: grid; place-items: center; overflow: hidden; perspective: 760px; }
.art-portal > span { position: absolute; }
/* ambient bloom spilling out of the well */
.portal-halo { width: 150%; height: 135%;
  background: radial-gradient(46% 40% at 50% 46%, rgba(47,139,255,.32), rgba(47,139,255,.06) 44%, transparent 72%);
  filter: blur(7px); }
/* faint light beam rising from the aperture */
.portal-beam { width: 78%; height: 62%; top: 4%;
  background: linear-gradient(180deg, rgba(200,224,255,.16), transparent 72%);
  clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%); filter: blur(7px); }
/* concentric rectangular frames, tilted, brightening toward the core */
.portal-frame { border-radius: 11px; transform: rotateX(48deg);
  border: 1px solid rgba(176,212,255,.45);
  background: linear-gradient(180deg, rgba(47,139,255,.34), rgba(47,139,255,.02));
  box-shadow: 0 -3px 26px rgba(47,139,255,.4), inset 0 6px 20px rgba(255,255,255,.1); }
.portal-frame.f1 { width: 66%; aspect-ratio: 16/9; }
.portal-frame.f2 { width: 48%; aspect-ratio: 16/8.4;
  border-color: rgba(200,224,255,.65); background: linear-gradient(180deg, rgba(184,216,255,.42), rgba(47,139,255,.05));
  box-shadow: 0 -3px 24px rgba(158,202,255,.5); }
.portal-frame.f3 { width: 31%; aspect-ratio: 16/7.6;
  border-color: rgba(228,240,255,.85); background: linear-gradient(180deg, rgba(220,236,255,.72), rgba(182,214,255,.16)); }
/* bright vanishing-point core */
.portal-glowcore { width: 19%; aspect-ratio: 16/6; border-radius: 7px; transform: rotateX(48deg);
  background: radial-gradient(circle, #fff, #ffe6c8 55%, rgba(182,214,255,0) 100%); filter: blur(2px); }

@media (prefers-reduced-motion: no-preference) {
  .orbit-spin { animation: lp-spin 30s linear infinite; }
  .orbit-tok__rev { animation: lp-spin 30s linear infinite reverse; }
  .portal-halo { animation: lp-breathe 6s ease-in-out infinite; }
  .portal-glowcore { animation: lp-breathe 6s ease-in-out infinite; }
  .portal-beam { animation: lp-breathe 6s ease-in-out infinite .3s; }
}
@keyframes lp-breathe { 0%,100% { opacity: .72; } 50% { opacity: 1; } }

/* ---- small icon features (3 x 2) ---- */
.lp-mini { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 2.2rem; row-gap: 2.3rem; margin-top: 3rem; }
@media (max-width: 860px) { .lp-mini { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lp-mini { grid-template-columns: 1fr; } }
.lp-mini__item { display: flex; gap: .9rem; align-items: flex-start; }
.lp-mini__ic { width: 38px; height: 38px; flex: none; border-radius: var(--fp-radius-md); background: var(--fp-accent-soft); display: grid; place-items: center; }
.lp-mini__ic svg { width: 20px; height: 20px; fill: none; stroke: var(--fp-orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-mini__item h4 { font-family: var(--fp-font-display); font-weight: 600; font-size: 1rem; margin: 0 0 .3rem; color: var(--fp-on-dark); }
.lp-mini__item p { font-size: .9rem; line-height: 1.55; color: var(--fp-on-dark-2); margin: 0; }

/* white pill for partner logos */
.lp-chip { display: inline-flex; align-items: center; height: 34px; padding: 0 .85rem; background: #fff; border-radius: var(--fp-radius-md); }
.lp-chip img { height: 15px; width: auto; display: block; }

/* CTA / backed-by row */
.lp-company__cta { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-top: 5rem; text-align: center; }
.lp-company__backed { display: inline-flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; justify-content: center; }
.lp-company__backed-label { font-family: var(--fp-font-display); font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fp-on-dark-3); }
.lp-backer-logo { height: 28px; width: auto; opacity: .9; }
/* official "Backed by Alliance" pill badge — already dark with cream text, shown as-is */
.lp-backer-logo.is-alliance-badge { opacity: 1; }
.lp-company__btns { display: flex; gap: .9rem; flex-wrap: wrap; justify-content: center; }

/* ============================================================ FOOTER */
.lp-footer { background: transparent; color: var(--fp-on-dark-2); padding: 3.5rem 0 2.5rem; }
.lp-footer__top { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-bottom: 2rem; border-bottom: 1px solid var(--fp-line-on-dark); }
.lp-footer__links { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.lp-footer__links a { color: var(--fp-on-dark-2); text-decoration: none; font-size: .92rem; transition: color .2s; }
.lp-footer__links a:hover { color: var(--fp-on-dark); }
.lp-footer__social {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.6rem 0 1.4rem;
}
.lp-footer__social a {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 8px;
  color: var(--fp-on-dark-3);
  transition: color .2s, background-color .2s;
}
.lp-footer__social a:hover { color: var(--fp-on-dark); background: rgba(247,245,241,.08); }
.lp-footer__social svg { width: 18px; height: 18px; flex: none; }
.lp-footer__legal { margin-top: 0; font-size: .78rem; color: var(--fp-on-dark-3); line-height: 1.6; max-width: 60rem; }
.lp-footer__legal a { color: var(--fp-on-dark-3); }

/* ===================================================== HERO "BACKED BY" LOGOS */
.lp-hero__backed { justify-content: flex-start; margin-bottom: 2rem; }
/* backer logos are links to their own sites */
a.lp-yc { text-decoration: none; transition: opacity .2s ease; }
a.lp-yc:hover { opacity: .8; }
.lp-backer-link { display: inline-flex; line-height: 0; transition: opacity .2s ease; }
.lp-backer-link:hover { opacity: .8; }
/* NovaDAX partner mark, sized to match the backers */
.lp-novadax { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--fp-on-dark-2); font-family: var(--fp-font-display); font-weight: 600; font-size: 1.15rem; transition: opacity .2s ease; }
/* NovaDAX in the top nav — research.css styles it as a white glowing pill, but its
   generic `.site-header__nav a` white-text rule outranks the pill's dark text when
   the link lives INSIDE the nav. Re-assert the pill's dark text at nav specificity. */
/* icon-only, no pill: just the NovaDAX logo on the transparent header */
.site-header__nav a.site-header__novadax {
  padding: 0; background: transparent; border: none; box-shadow: none; animation: none;
}
.site-header__nav a.site-header__novadax:hover { transform: translateY(-1px); box-shadow: none; }
.site-header__novadax .lp-novadax__icon { width: 28px; height: 28px; padding: 0; background: transparent; }
.lp-novadax:hover { opacity: .8; }
.lp-novadax__icon { display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; background: #fff; border-radius: 50%; padding: 3px; flex: none; }
.lp-novadax__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ===================================================== ANIMATED DOWNLOAD CTA */
@media (prefers-reduced-motion: no-preference) {
  /* a single, subtle breathing orange glow on the button */
  .lp-loop__cta .fp-btn--primary,
  .lp-company__btns .fp-btn--primary {
    animation: fp-cta-glow 3.6s ease-in-out infinite;
  }
  @keyframes fp-cta-glow {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 26px -10px rgba(47,139,255,.5); }
    50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 14px 40px -8px rgba(47,139,255,.9), 0 0 26px 2px rgba(47,139,255,.4); }
  }
}


/* Contact page: deeper, homepage-like dark background (overrides the lighter ocean-top gradient) */
body.ct-page {
  background-color: #03070d;
  background-image:
    radial-gradient(1000px 620px at 85% -10%, rgba(47,139,255,.06), transparent 60%),
    linear-gradient(180deg, #05101b 0%, #040b14 32%, #02070e 66%, #010406 100%);
}


/* Keep the Y Combinator backer logo its real brand orange (not part of the blue theme) */
.lp-yc i { background: #f26625; }

/* =====================================================================
   DOWNLOAD PAGE  (download.html) — hero-style two-column layout:
   copy + QR/store cards on the left, floating phone cluster on the right
   ===================================================================== */
.dl-hero {
  /* start the copy at the same offset as the homepage hero (backed-by row at ~26svh)
     instead of flex-centering, which would ride up as the QR column adds height */
  align-items: flex-start; padding-top: max(6rem, 23svh); padding-bottom: 5rem;
}
/* tighter headline than the homepage hero so the QR cards sit above the fold */
.dl-hero .lp-hero__copy h1 { margin-bottom: 2.1rem; }  /* size inherits from .lp-hero h1 — keep identical to the homepage */
.dl-hero .lp-hero__features { margin: 0 0 1.7rem; }  /* sits above the h1 on this page */
.dl-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.34fr) minmax(0, .66fr);
  gap: clamp(1.5rem, 3vw, 3rem); align-items: center;
}
.dl-hero__copy { max-width: 720px; }
.dl-downloads { display: flex; align-items: flex-start; justify-content: center; gap: clamp(3rem, 8vw, 8rem); flex-wrap: wrap; margin-top: 0; }
.dl-card { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.dl-card__qr { display: block; width: 256px; height: 256px; background: #fff; border-radius: 16px; padding: 16px; }
.dl-card__qr img { width: 100%; height: 100%; display: block; }
.dl-card__badge { display: block; line-height: 0; filter: drop-shadow(0 2px 8px rgba(0,0,0,.45)); transition: transform .2s var(--fp-ease); }
.dl-card__badge:hover { transform: translateY(-1px); }
.dl-card__badge img { display: block; width: auto; max-width: none; }
/* equal VISIBLE heights: the Play PNG is only 87% x 67% button inside transparent padding */
.dl-card__badge .is-appstore { width: 215px; height: auto; }
.dl-card__badge .is-gplay { width: 277px; height: auto; margin: -17px; }
.dl-hero__art { display: grid; place-items: center; }
@media (max-width: 980px) {
  .dl-hero__grid { grid-template-columns: 1fr; gap: 3.2rem; }
  .dl-hero__art { order: 2; }
  .dl-hero__copy { max-width: 560px; }
}
@media (max-width: 560px) {
  .dl-downloads { gap: 1.4rem; }
  .dl-card__qr { width: 158px; height: 158px; padding: 12px; }
  .dl-card__badge .is-appstore { width: 138px; }
  .dl-card__badge .is-gplay { width: 177px; margin: -11px; }
}

/* =====================================================================
   PHONE WIDTHS: the backed-by row and the feature trio SHRINK to stay on
   one line instead of wrapping items onto new lines
   ===================================================================== */
@media (max-width: 760px) {
  .lp-hero, .dl-hero { padding-top: max(5.5rem, 12svh); }
  /* no ship on phones — don't hold the hero open to full screen height,
     and tuck Why Freeport right under the hero buttons */
  .lp-hero { min-height: 0; padding-bottom: 3rem; }
  .lp-loop { padding-top: 1.5rem; }
  .lp-hero__features { flex-wrap: nowrap; gap: .5rem clamp(.5rem, 2.6vw, 1.1rem); }
  .lp-hero__features li { font-size: clamp(.66rem, 2.9vw, .95rem); gap: .35rem; }
  .lp-hero__backed { flex-wrap: nowrap; gap: clamp(.45rem, 2.4vw, .9rem); }
  .lp-hero__backed .lp-company__backed-label { font-size: clamp(.55rem, 2vw, .75rem); letter-spacing: .1em; white-space: nowrap; }
  .lp-hero__backed .lp-yc { font-size: clamp(.72rem, 3vw, 1rem); gap: .35rem; white-space: nowrap; }
  .lp-hero__backed .lp-yc i { width: clamp(17px, 4.8vw, 22px); height: clamp(17px, 4.8vw, 22px); font-size: .7em; border-radius: 4px; }
  .lp-hero__backed .lp-backer-logo { height: clamp(15px, 4.4vw, 22px); }
  .lp-hero__backed .lp-novadax { font-size: clamp(.72rem, 3vw, 1rem); gap: .35rem; white-space: nowrap; }
  .lp-hero__backed .lp-novadax__icon { width: clamp(17px, 4.8vw, 22px); height: clamp(17px, 4.8vw, 22px); padding: 2px; }
}