/* =================================================================
   features.css — page styles for /features/* (point-of-sales, etc.)
   Scoped under .feature-page so it cannot bleed elsewhere. Reuses
   the same .rt-hero / .rt-cta-row / .rt-pricing / .faq components
   defined in industry.css and site.css.
   ================================================================= */

.feature-page {
  --fp-ink: #0e0f12;
  --fp-muted: #6a7283;
  --fp-card: #f6f8fa;
  --fp-rad-card: 40px;
}

/* ── Feature-page hero override ──────────────────────────────────
   Per Figma 1233:31346, feature heroes are plain white with all
   content centered — no gradient card, no rounded edges. */
.feature-page .rt-hero {
  background: #fff;
  margin: 0;
  border-radius: 0;
  padding: clamp(80px, 9vw, 150px) clamp(20px, 4vw, 48px) clamp(48px, 6vw, 80px);
  text-align: center;
  align-items: center;
}
.feature-page .rt-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Per Figma 1233:30875 the headline → subheading gap is 17px, but
     the subheading → CTA gap is 30px. Use no flex `gap` so each child
     controls its own bottom margin instead. */
  gap: 0;
}
.feature-page .rt-hero .fp-filter { margin-bottom: 17px; } /* Figma 1233:31243 — flex gap-[17px] between filter chip and headline */
.feature-page .rt-hero .rt-cta-row {
  justify-content: center;
  margin-top: 30px;
}

/* ── Hero filter chip (matches the Figma CTA-filter pill) ─────── */
.fp-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  color: #767779;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  border-radius: 999px;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.fp-filter:hover { color: var(--fp-ink); background: #f6f8fa; }

/* Hero h1 fluid override — Figma calls for the same 88.5px display
   used on the home hero, with the same mobile scaling. */
.feature-page .rt-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 88.57px);
  line-height: 0.93;
  letter-spacing: clamp(-3px, -0.25vw, -1.5px);
  font-weight: 600;
  max-width: 998px;
  text-wrap: balance;
}
.feature-page .rt-hero .rt-sub {
  font-size: 16px;
  line-height: 27px;
  letter-spacing: 0.16px;
  max-width: 606px;
  margin: 0 auto;             /* h1's line-height already adds ~18px below the baseline; Figma 1233:30875 wants a 17px gap so no extra top margin needed */
  color: var(--fp-ink);
}

/* ── Feature rows (alternating image / text) ──────────────────── */
.fp-rows {
  display: flex;
  flex-direction: column;
  gap: 70px;
  padding: 100px clamp(20px, 4vw, 48px);
  background: #fff;
}
.fp-row {
  display: grid;
  grid-template-columns: 574fr 544fr;
  gap: 55px;
  align-items: center;
  width: 100%;
  max-width: 1173px;
  margin: 0 auto;
}
.fp-row--reverse { grid-template-columns: 544fr 574fr; }
.fp-row--reverse .fp-row-media { order: 2; }
.fp-row--reverse .fp-row-text  { order: 1; }

.fp-row-media {
  position: relative;
  width: 100%;
  aspect-ratio: 574 / 657;
  background: var(--fp-card);
  border-radius: var(--fp-rad-card);
  overflow: hidden;
}
/* Image bindings — same assets as pcard but the var has to live on
   the same element as ::before reads (CSS custom-property scope). */
.fp-row-media.pcard--product-catalog   { --pcard-img: url("/assets/cards/product-catalog.png"); }
.fp-row-media.pcard--whatsapp-noti     { --pcard-img: url("/assets/cards/whatsapp-automation.png"); --pcard-img-ratio: 1084/2373; }
.fp-row-media.pcard--order-dashboard   { --pcard-img: url("/assets/cards/order-dashboard.png"); }
.fp-row-media.pcard--social-automation { --pcard-img: url("/assets/cards/social-automation.png"); --pcard-img-ratio: 1248/1935; }

/* Payment-page row visuals (Figma 1236:37032). Each card has its own
   gutters per the source layout — we override left/right/top on the
   ::before so each image sits where Figma puts it.

   Row 1  Wallet UI       (60/50 side, 52 top, image overflows bottom)
   Row 3  Sell across     (63/64 side, 93 top, near-square image)
   Row 4  Invoice         (58.5/72.5 side, 56 top, tall invoice page)
   Row 2  Terminal photo  (full-bleed; image overflows the left edge
                           by 13.24% per the Figma frame, so we use
                           background-cover with right alignment to
                           keep all six payment-method logos visible
                           on the right side of the photo). */

.fp-row-media.pcard--payment-wallet {
  --pcard-img: url("/assets/cards/payment-wallet-ui.webp");
  --pcard-img-ratio: 874/1900;
}
/* Per Figma 1236:37044 the wallet UI image is 360.114 wide centered
   inside the card's pl-60/pr-50 padded box (464 wide), so the actual
   image gutters are larger than the padding values:
     left  = 60 + (464-360.114)/2 = 111.94 → 19.50%
     right = 50 + (464-360.114)/2 = 101.94 → 17.76%
     top   = 52 → 7.92%
   The image is taller than the card and intentionally clipped at the
   bottom by .fp-row-media's overflow:hidden. */
.fp-row-media.pcard--payment-wallet::before {
  top: 7.92%;             /*  52 / 657 */
  left: 19.50%;           /* 111.94 / 574 */
  right: 17.76%;          /* 101.94 / 574 */
}

.fp-row-media.pcard--payment-sell {
  --pcard-img: url("/assets/cards/payment-sell-online.webp");
  --pcard-img-ratio: 1806/1900;
}
.fp-row-media.pcard--payment-sell::before {
  top: 14.16%;            /*  93 / 657 */
  left: 10.98%;           /*  63 / 574 */
  right: 11.15%;          /*  64 / 574 */
}

.fp-row-media.pcard--payment-invoice {
  --pcard-img: url("/assets/cards/payment-invoice.webp");
  --pcard-img-ratio: 1545/1900;
}
.fp-row-media.pcard--payment-invoice::before {
  top: 8.52%;             /*  56  / 657 */
  left: 10.19%;           /*  58.5/ 574 */
  right: 12.63%;          /*  72.5/ 574 */
}

.fp-row-media.pcard--payment-terminal {
  background-image: url("/assets/cards/payment-terminal.webp");
  /* Per Figma: image is 113.24% wide with left:-13.24%, h-full —
     i.e. it fills the card height and overflows the LEFT side, so
     all six method logos stay flush to the card's right edge. */
  background-size: auto 100%;
  background-position: right center;
  background-repeat: no-repeat;
}
.fp-row-media.pcard--payment-terminal::before { display: none; }

/* Storefront-page row visuals (Figma 1233:31238).

   Row 1  TUCKERNUCK retail website (697 wide @ x=60 y=52)
          → image overflows the right edge by ~123px
   Row 2  Beauty agentic chat (647 wide @ x=-123 y=119)
          → image overflows the LEFT edge by ~123px
   Row 3  Woman with sunglasses + discount panel — full-bleed photo
   Row 4  Beauty smart-store (812 wide @ x=-246 y=69)
          → image overflows the LEFT edge by ~246px */
.fp-row-media.pcard--sf-tuckernuck {
  --pcard-img: url("/assets/cards/storefront-tuckernuck.webp");
  --pcard-img-ratio: 1900/1741;
}
.fp-row-media.pcard--sf-tuckernuck::before {
  top: 7.92%;             /*  52 / 657 */
  left: 10.45%;           /*  60 / 574 */
  right: -21.43%;         /* -123 / 574  (image overflows right) */
}

.fp-row-media.pcard--sf-agentic {
  --pcard-img: url("/assets/cards/storefront-agentic.webp");
  --pcard-img-ratio: 1900/1201;
}
.fp-row-media.pcard--sf-agentic::before {
  top: 18.23%;            /* 119.8 / 657 */
  left: -21.51%;          /* -123 / 574  (image overflows left) */
  right: 12.46%;          /*  ~71.5 / 574 */
}

.fp-row-media.pcard--sf-discount {
  background-image: url("/assets/cards/storefront-discount.webp");
  background-size: cover;
  background-position: center;
}
.fp-row-media.pcard--sf-discount::before { display: none; }

.fp-row-media.pcard--sf-smart {
  --pcard-img: url("/assets/cards/storefront-smart.webp");
  --pcard-img-ratio: 1900/1445;
}
.fp-row-media.pcard--sf-smart::before {
  top: 10.50%;            /*  69 / 657 */
  left: -42.94%;          /* -246.5 / 574 (image overflows left) */
  right: 1.40%;           /*    8 / 574 */
}

/* The media slot reuses the pcard ::before recipe — image hangs from
   the top of the rounded card and is clipped at the bottom. */
.fp-row-media::before {
  content: "";
  position: absolute;
  top: 14.31%;
  left: 18.47%;
  right: 18.47%;
  aspect-ratio: var(--pcard-img-ratio, 915 / 1900);
  background-image: var(--pcard-img);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.fp-row-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fp-row-text h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(31px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: clamp(-1.4px, -0.1vw, -1.44px);
  color: #000;
  margin: 0;
}
.fp-row-text p {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  color: #30313d;
  margin: 0;
}
.fp-row-text p a {
  color: inherit;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

/* Black pill CTA used inside feature rows (replaces the gradient
   .pcard-cta on feature pages). Matches the hero's .btn-primary so
   every CTA on a feature page has the same visual weight. */
.fp-row-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  height: 50px;
  padding: 0 22px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--rt-ink, #0e0f12);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: transform .15s ease, background .2s ease;
}
.fp-row-cta:hover { transform: translateY(-1px); background: #1d1f25; }
.fp-row-bullets {
  list-style: disc;
  padding-left: 1.4em;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  color: #30313d;
}
.fp-row-bullets li { margin-bottom: 4px; }
.fp-row-bullets li:last-child { margin-bottom: 0; }

/* ── Mobile breakpoint ───────────────────────────────────────── */
@media (max-width: 900px) {
  .fp-rows { padding: 64px 20px; gap: 56px; }
  .fp-row,
  .fp-row--reverse {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .fp-row--reverse .fp-row-media { order: 1; }
  .fp-row--reverse .fp-row-text  { order: 2; }
  .fp-row-media { aspect-ratio: 574 / 540; border-radius: 28px; }
  .fp-row-text p { font-size: 16px; line-height: 24px; }
}

@media (max-width: 600px) {
  .fp-rows { padding: 48px 20px; gap: 44px; }
  .fp-row-media { aspect-ratio: 1 / 1; border-radius: 24px; }
}