/* /features and /ar/features only (loaded from the view's Styles section, like portal.css).
   Everything else on the page reuses the shared public system: .section, .section--dark, .card, .card--glass,
   .card.feature, .grid, .stats-band/.stat, .tag, .badge, .btn, .cta-banner, .hero-backdrop, .crumbs.
   This file adds only what that system has no pattern for: the hero screenshot frame, the bento showcase, the
   category explorer bar and panel layout, and the phone frame. Rules are scoped under .features-page
   because site.css sizes headings with `.website-main h2/h3` (0,1,1), which beats a bare class. */

/* ---------- Hero ---------- */
.features-page .features-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
/* Hero and closing CTA buttons. Not Bootstrap's .row, whose `> * { width: 100% }` stretches every button. */
.features-page .features-actions { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.features-page .features-hero__note { margin-top: 14px; font-size: 14px; color: var(--text-mute); max-width: 620px; }
.features-page .features-proof {
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  margin: 26px 0 0; padding: 0; list-style: none;
  font-size: 13.5px; color: var(--text-dim);
}
.features-page .features-proof li { display: inline-flex; align-items: center; gap: 8px; }
.features-page .features-proof li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex: none;
}

/* Real screenshot inside a neutral window frame. */
.features-page .features-frame {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.features-page .features-frame__bar {
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding-inline: 14px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.features-page .features-frame__bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.features-page .features-frame img,
.features-page .features-shot img,
.features-page .features-phone img { width: 100%; height: auto; }
.features-page .features-phone {
  width: min(280px, 82%);
  margin: auto;
  border: 6px solid #1E293B;
  border-radius: 26px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* Proof strip: the shared stats band, given the card surface the rest of the page uses. */
.features-page .features-stats { margin: 48px 0 0; padding: 0; list-style: none; }
.features-page .features-stats .stat {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
}
.features-page .features-stats .stat__num { font-size: clamp(24px, 2.4vw, 30px); }

/* ---------- Bento showcase (inside .section--dark) ---------- */
.features-page .features-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "campaign campaign phone" "chart chart phone" "types types types";
  gap: 16px;
}
.features-page .features-bento__tile { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* home-static-port.css loads after site.css, so its white `.card` surface beats `.card--glass` there. */
.features-page .section--dark .card--glass { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); }
.features-page .section--dark .card--glass p { color: #94A3B8; }
.features-page .features-bento__tile--campaign { grid-area: campaign; }
.features-page .features-bento__tile--phone { grid-area: phone; }
.features-page .features-bento__tile--chart { grid-area: chart; }
.features-page .features-bento__tile--types { grid-area: types; }
.features-page .features-bento__tile h3 { font-size: clamp(19px, 1.7vw, 22px); }
.features-page .features-bento__tile p { font-size: 14.5px; }
.features-page .features-shot {
  margin: auto 0 0;
  border-radius: var(--r-md);
  background: #fff;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.features-page .features-types { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding: 0; list-style: none; }
.features-page .section--dark .tag {
  background: rgba(255, 255, 255, 0.06); color: #E2E8F0; border-color: rgba(255, 255, 255, 0.16);
}

/* ---------- Category explorer ---------- */
/* Without script these are ordinary in-page links over fully rendered sections; site.js upgrades the tab
   row to a tablist. The nav is the sticky box (a sticky child could not leave its own wrapper), and it is
   sticky only where the row fits on one line, so it never covers a phone screen. */
.features-page .features-explorer__bar {
  margin-bottom: 28px; padding: 8px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: calc(var(--website-header-min-height) + var(--website-sticky-gap));
}
.features-page .features-explorer__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.features-page .features-explorer__tab {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  border-radius: var(--r-md);
  color: var(--text-dim);
  font-weight: 600; font-size: 15px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.features-page .features-explorer__tab svg { flex: none; }
.features-page .features-explorer__tab:hover { background: var(--bg-soft); color: var(--text); }
.features-page .features-explorer__tab:focus-visible { outline: 3px solid #BFDBFE; outline-offset: 2px; }
/* Selection is carried by the inset border and weight as well as colour. */
.features-page .features-explorer__tab[aria-selected="true"] {
  background: var(--primary-50); color: var(--primary-700); font-weight: 700;
  box-shadow: inset 0 0 0 1px #BFDBFE;
}
@media (min-width: 992px) {
  .features-page .features-explorer__bar {
    position: sticky; z-index: 20;
    top: calc(var(--website-header-min-height) + var(--website-sticky-gap));
  }
}

.features-page .features-panel { scroll-margin-top: calc(var(--website-header-min-height) + var(--website-sticky-gap) + 88px); }
.features-page .features-panel + .features-panel { margin-top: 64px; }
.features-page .features-panel[role="tabpanel"] { margin-top: 0; }
.features-page .features-panel__head { max-width: 760px; margin-bottom: 22px; }
.features-page .features-panel__head h3 { font-size: clamp(22px, 2.2vw, 28px); margin-top: 10px; }
.features-page .features-panel__head p { margin-top: 10px; }
.features-page .features-panel__grid { display: grid; gap: 16px; }
/* The lead card runs full width (description beside its key points) so the cards below never leave a
   column of empty space next to it, whatever the card count. */
.features-page .features-lead {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px 44px; align-items: center;
  padding: clamp(22px, 3vw, 32px);
  background: linear-gradient(160deg, #fff 0%, var(--primary-50) 100%);
  border-color: #DBEAFE;
}
.features-page .features-lead__main { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.features-page .features-lead h4 { font-size: clamp(20px, 1.9vw, 24px); font-weight: 650; }
.features-page .features-lead > p { font-size: 15.5px; line-height: 1.7; }
.features-page .features-checks {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px;
  margin: 4px 0 0; padding: 0; list-style: none;
}
.features-page .features-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--text); }
.features-page .features-checks svg {
  flex: none; width: 22px; height: 22px; padding: 4px; margin-top: 1px;
  border-radius: 7px; background: var(--teal-50); color: #0F766E;
}
.features-page .features-panel__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.features-page .features-panel__cards--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Five cards: three over two on a six-track grid, so the second row is full width rather than an orphan. */
.features-page .features-panel__cards--n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.features-page .features-panel__cards--n5 > :nth-child(-n+3) { grid-column: span 2; }
.features-page .features-panel__cards--n5 > :nth-child(n+4) { grid-column: span 3; }
.features-page .features-card { padding: 22px; gap: 10px; }
.features-page .features-card h4 { font-size: 16px; font-weight: 650; }
.features-page .features-card__head { display: flex; align-items: center; gap: 12px; }
.features-page .features-card .icon-tile { flex: none; width: 36px; height: 36px; border-radius: 10px; }
.features-page .features-card p { font-size: 14px; line-height: 1.6; }
.features-page .features-panel__more { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; font-size: 14.5px; }

/* A quiet text link instead of a full-width button on every card. */
.features-page .features-doclink {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto; padding-block: 4px;
  color: var(--primary-700); font-weight: 600; font-size: 14px;
}
.features-page .features-doclink:hover { text-decoration: underline; }
.features-page .features-doclink:focus-visible { outline: 3px solid #BFDBFE; outline-offset: 2px; border-radius: 4px; }

/* ---------- Capability cloud and guide paths ---------- */
.features-page .features-cloud {
  padding: clamp(24px, 3vw, 36px);
  background: linear-gradient(135deg, var(--primary-50) 0%, #fff 55%, var(--teal-50) 100%);
  border-color: #DBEAFE;
}
.features-page .features-cloud ul { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 0 0; padding: 0; list-style: none; }
.features-page .features-cloud .tag { background: #fff; font-size: 13px; padding: 8px 13px; }
.features-page .features-guides { margin: 0; padding: 0; list-style: none; }
.features-page .features-guide { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px; }
.features-page .features-guide strong { font-size: 16px; color: var(--text); font-weight: 650; }
.features-page .features-guide span { font-size: 14px; color: var(--text-dim); }
.features-page .features-guide:hover { border-color: #C7D2FE; transform: translateY(-2px); }
.features-page .features-guide:focus-visible { outline: 3px solid #BFDBFE; outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .features-page .features-panel:not([hidden]) { animation: features-panel-in .22s ease; }
  @keyframes features-panel-in { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 1024px) {
  .features-page .features-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "campaign campaign" "phone phone" "chart chart" "types types";
  }
}
@media (max-width: 991px) {
  .features-page .features-explorer__tab { padding: 10px 12px; }
  .features-page .features-hero__grid,
  .features-page .features-lead { grid-template-columns: minmax(0, 1fr); }
  .features-page .features-panel__cards,
  .features-page .features-panel__cards--n4,
  .features-page .features-panel__cards--n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features-page .features-panel__cards--n5 > * { grid-column: auto; }
  .features-page .features-panel__cards--n5 > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .features-page .features-bento {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "campaign" "phone" "chart" "types";
  }
  .features-page .features-panel__cards,
  .features-page .features-panel__cards--n4,
  .features-page .features-panel__cards--n5,
  .features-page .features-checks { grid-template-columns: minmax(0, 1fr); }
  .features-page .features-phone { width: min(240px, 72%); }
  .features-page .features-explorer__tab { padding: 9px 12px; font-size: 14px; }
  .features-page .features-stats .stat { padding: 18px 10px; }
  .features-page .features-stats .stat__num { font-size: 20px; }
}