/* Product & solution pages (templates/general/site/*.html via
   layouts/site_page.html). Builds on home.css: same `--hp-*` palette,
   `.hp-section`/`.hp-card`/`.hp-btn` components and 1200px wrap — this file
   only adds the pieces those pages need (framed screenshots, step flows,
   spec tiles, pricing and roadmap blocks). Everything is scoped under
   `.hp`, uses logical properties so ar/ur mirror correctly, and needs no
   JavaScript. */

/* ---------- Hero ---------- */
.hp .sp-hero {
  background:
    radial-gradient(circle at 85% 10%, rgba(0, 108, 72, 0.10), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(15, 42, 48, 0.07), transparent 40%),
    var(--hp-bg);
  padding-block: clamp(40px, 7vw, 88px);
  border-bottom: 1px solid var(--hp-outline);
}
.hp .sp-hero__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.hp .sp-hero__copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.hp .sp-hero h1 { font-size: clamp(30px, 4.6vw, 48px); color: var(--hp-navy); font-weight: 700; line-height: 1.12; }
.hp .sp-hero__lede { font-size: 18px; color: var(--hp-ink-muted); line-height: 1.6; max-width: 38rem; }
.hp .sp-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hp .sp-hero__visual:empty { display: none; }
.hp .sp-hero__grid:has(> .sp-hero__visual:empty) { grid-template-columns: 1fr; }
.hp .sp-center { justify-content: center; }
.hp .sp-hero__flag { font-size: 64px; line-height: 1; }

/* Arrows/chevrons point "forward" in both reading directions. */
[dir="rtl"] .hp .sp-flip { transform: scaleX(-1); }

/* ---------- Framed screenshots ---------- */
.hp .sp-browser {
  background: var(--hp-white);
  border: 1px solid var(--hp-outline);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(15, 42, 48, 0.14), 0 2px 6px rgba(15, 42, 48, 0.06);
}
.hp .sp-browser__bar {
  display: flex; gap: 6px; align-items: center;
  padding: 10px 14px;
  background: var(--hp-surface-low);
  border-bottom: 1px solid var(--hp-outline);
}
.hp .sp-browser__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--hp-outline); }
.hp .sp-browser img,
.hp .sp-phone img { display: block; width: 100%; height: auto; }

.hp .sp-phone {
  width: min(240px, 60vw);
  border: 9px solid var(--hp-navy);
  border-radius: 34px;
  overflow: hidden;
  background: var(--hp-navy);
  box-shadow: 0 24px 48px rgba(15, 42, 48, 0.22);
}
.hp .sp-phone--sm { width: min(190px, 46vw); }

/* Desktop screenshot with a phone overlapping its lower corner. */
.hp .sp-stack { position: relative; padding-block-end: 48px; padding-inline-end: 40px; }
.hp .sp-stack .sp-phone { position: absolute; inset-block-end: 0; inset-inline-end: 0; }
.hp .sp-caption { margin-top: 12px; font-size: 13px; color: var(--hp-ink-muted); text-align: center; }

/* ---------- Section heading helpers ---------- */
.hp .sp-kicker {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hp-green);
  margin-bottom: 12px;
}
.hp .sp-head-lede { max-width: 44rem; margin: 16px auto 0; color: var(--hp-ink-muted); font-size: 17px; line-height: 1.6; }

/* ---------- Card grid (cards themselves reuse .hp-card) ---------- */
.hp .sp-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.hp .sp-grid .hp-card p { margin-bottom: 0; }
.hp .sp-grid .hp-card ul { margin-top: 16px; }

/* ---------- Feature rows: copy beside a screenshot ---------- */
.hp .sp-feature { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.hp .sp-feature + .sp-feature { margin-top: clamp(56px, 8vw, 96px); }
.hp .sp-feature__body h2 { font-size: clamp(24px, 3.4vw, 32px); color: var(--hp-navy); margin-bottom: 16px; }
.hp .sp-feature__body > p { color: var(--hp-ink-muted); font-size: 17px; line-height: 1.65; margin-bottom: 24px; }
.hp .sp-feature__icon {
  width: 52px; height: 52px; margin-bottom: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hp-navy); color: var(--hp-mint);
}
.hp .sp-feature__icon .hp__icon { width: 28px; height: 28px; }

.hp .sp-checks { display: grid; gap: 12px; }
.hp .sp-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--hp-ink); }
.hp .sp-checks li .hp__icon { color: var(--hp-green); width: 20px; height: 20px; margin-top: 1px; }
.hp .sp-checks--two { grid-template-columns: 1fr; }

/* ---------- Step flows ---------- */
.hp .sp-flow { display: grid; grid-template-columns: 1fr; gap: 28px; counter-reset: sp-step; list-style: none; margin: 0; padding: 0; }
.hp .sp-flow--3 { --sp-steps: 3; }
.hp .sp-flow--4 { --sp-steps: 4; }
.hp .sp-flow--5 { --sp-steps: 5; }
.hp .sp-flow__step {
  position: relative;
  background: var(--hp-white);
  border: 1px solid var(--hp-outline);
  border-top: 4px solid var(--hp-green);
  padding: 24px;
  counter-increment: sp-step;
}
.hp .sp-flow__step::before {
  content: counter(sp-step);
  position: absolute; inset-block-start: -16px; inset-inline-end: 16px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--hp-navy); color: var(--hp-white);
  font-size: 14px; font-weight: 700;
}
.hp .sp-flow__step .hp__icon { color: var(--hp-green); width: 28px; height: 28px; margin-bottom: 12px; }
.hp .sp-flow__step h3 { font-size: 17px; color: var(--hp-navy); margin-bottom: 8px; }
.hp .sp-flow__step p { font-size: 14px; color: var(--hp-ink-muted); line-height: 1.55; }
/* Connector: points down between stacked steps… */
.hp .sp-flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-end: -20px; inset-inline-start: calc(50% - 6px);
  width: 12px; height: 12px;
  /* Physical sides on purpose: "down" is the same in LTR and RTL. */
  border-bottom: 2px solid var(--hp-green);
  border-right: 2px solid var(--hp-green);
  transform: rotate(45deg);
}

/* ---------- Spec tiles (country facts) ---------- */
.hp .sp-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.hp .sp-spec { background: var(--hp-white); border: 1px solid var(--hp-outline); padding: 20px; }
.hp .sp-spec dt { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hp-ink-muted); margin-bottom: 6px; }
.hp .sp-spec dd { margin: 0; font-size: 20px; font-weight: 700; color: var(--hp-navy); line-height: 1.3; }
.hp .sp-spec dd small { display: block; font-size: 13px; font-weight: 500; color: var(--hp-ink-muted); margin-top: 4px; }

/* ---------- Pills ---------- */
.hp .sp-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
}
.hp .sp-pill--live { background: rgba(0, 108, 72, 0.12); color: var(--hp-green); }
.hp .sp-pill--soon { background: rgba(180, 120, 0, 0.12); color: #8a5a00; }

/* ---------- Diagrams built from HTML (mirror under RTL for free) ---------- */
/* Tenant isolation: separate communities over one platform. */
.hp .sp-iso { display: grid; gap: 16px; }
.hp .sp-iso__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hp .sp-iso__tenant {
  background: var(--hp-white);
  border: 2px dashed var(--hp-green);
  padding: 16px 10px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hp .sp-iso__tenant .hp__icon { color: var(--hp-navy); width: 32px; height: 32px; }
.hp .sp-iso__tenant strong { font-size: 14px; color: var(--hp-navy); }
.hp .sp-iso__tenant span { font-size: 12px; color: var(--hp-ink-muted); display: inline-flex; gap: 4px; align-items: center; }
.hp .sp-iso__tenant span .hp__icon { width: 14px; height: 14px; color: var(--hp-green); }
.hp .sp-iso__base {
  background: var(--hp-navy); color: var(--hp-white);
  padding: 14px; text-align: center; font-weight: 700; font-size: 14px;
  display: flex; gap: 8px; justify-content: center; align-items: center;
}
.hp .sp-iso__base .hp__icon { color: var(--hp-mint); }

/* Ledger card used on the transparency page (illustrative figures). */
.hp .sp-ledger { background: var(--hp-white); border: 1px solid var(--hp-outline); box-shadow: 0 24px 48px rgba(15, 42, 48, 0.12); }
.hp .sp-ledger__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--hp-outline); }
.hp .sp-ledger__head strong { color: var(--hp-navy); }
.hp .sp-ledger__row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--hp-surface-low); font-size: 14px; }
.hp .sp-ledger__row:last-child { border-bottom: 0; }
.hp .sp-ledger__row em { font-style: normal; color: var(--hp-ink-muted); font-size: 12px; display: block; }
.hp .sp-ledger__row b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hp .sp-ledger .is-in { color: var(--hp-pos); }
.hp .sp-ledger .is-out { color: var(--hp-neg); }
.hp .sp-ledger .is-hidden { color: var(--hp-ink-muted); letter-spacing: 0.1em; }

/* Ballot/tally card used on the voting page (illustrative figures). */
.hp .sp-tally { background: var(--hp-white); border: 1px solid var(--hp-outline); padding: 24px; box-shadow: 0 24px 48px rgba(15, 42, 48, 0.12); }
.hp .sp-tally h3 { font-size: 18px; color: var(--hp-navy); margin-bottom: 4px; }
.hp .sp-tally > p { font-size: 13px; color: var(--hp-ink-muted); margin-bottom: 20px; }
.hp .sp-bar { margin-bottom: 14px; }
.hp .sp-bar__label { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; color: var(--hp-ink); }
.hp .sp-bar__track { height: 10px; background: var(--hp-surface-low); }
.hp .sp-bar__fill { height: 100%; background: var(--hp-green); }
.hp .sp-bar__fill--no { background: var(--hp-neg); }
.hp .sp-bar__fill--abstain { background: var(--hp-outline); }
.hp .sp-tally__foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* Portfolio diagram: one team, many separate buildings. */
.hp .sp-portfolio { display: grid; gap: 20px; justify-items: center; }
.hp .sp-portfolio__hub {
  background: var(--hp-navy); color: var(--hp-white);
  padding: 16px 24px; font-weight: 700;
  display: inline-flex; gap: 10px; align-items: center;
}
.hp .sp-portfolio__hub .hp__icon { color: var(--hp-mint); }
.hp .sp-portfolio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; position: relative; }
.hp .sp-portfolio__grid::before {
  content: ""; position: absolute; inset-block-start: -20px; inset-inline: 16%;
  height: 20px; border: 2px solid var(--hp-outline); border-block-end: 0;
}
.hp .sp-portfolio__node {
  background: var(--hp-white); border: 1px solid var(--hp-outline);
  padding: 14px 8px; text-align: center; font-size: 13px; color: var(--hp-navy); font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.hp .sp-portfolio__node .hp__icon { color: var(--hp-green); }
.hp .sp-portfolio__node small { font-weight: 500; color: var(--hp-ink-muted); font-size: 11px; }

/* ---------- Pricing ---------- */
.hp .sp-tiers { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: stretch; }
.hp .sp-tier {
  background: var(--hp-white); border: 1px solid var(--hp-outline);
  padding: 32px; display: flex; flex-direction: column; gap: 16px;
}
.hp .sp-tier--featured { border: 2px solid var(--hp-green); box-shadow: 0 16px 32px rgba(0, 108, 72, 0.12); }
.hp .sp-tier h3 { font-size: 22px; color: var(--hp-navy); }
.hp .sp-tier__size { font-size: 14px; font-weight: 700; color: var(--hp-green); }
.hp .sp-tier > p { font-size: 15px; color: var(--hp-ink-muted); line-height: 1.6; }
.hp .sp-tier .sp-checks { margin-block: 8px 16px; }
.hp .sp-tier .hp-btn { margin-top: auto; align-self: stretch; }

/* ---------- Roadmap ---------- */
.hp .sp-roadmap { display: grid; grid-template-columns: 1fr; gap: 24px; }
.hp .sp-roadmap__col { background: var(--hp-white); border: 1px solid var(--hp-outline); padding: 28px; }
.hp .sp-roadmap__col h2 { font-size: 22px; color: var(--hp-navy); margin-block: 12px 20px; }
.hp .sp-roadmap__col--soon { border-style: dashed; background: var(--hp-bg); }
.hp .sp-roadmap__item { padding-block: 14px; border-top: 1px solid var(--hp-surface-low); }
.hp .sp-roadmap__item:first-of-type { border-top: 0; padding-top: 0; }
.hp .sp-roadmap__item h3 { font-size: 16px; color: var(--hp-navy); margin-bottom: 4px; display: flex; gap: 8px; align-items: center; }
.hp .sp-roadmap__item h3 .hp__icon { width: 20px; height: 20px; color: var(--hp-green); }
.hp .sp-roadmap__col--soon .sp-roadmap__item h3 .hp__icon { color: #8a5a00; }
.hp .sp-roadmap__item p { font-size: 14px; color: var(--hp-ink-muted); line-height: 1.55; }

/* ---------- FAQ / help (native <details>) ---------- */
.hp .sp-faq { display: grid; gap: 12px; max-width: 860px; margin-inline: auto; }
.hp .sp-faq details { background: var(--hp-white); border: 1px solid var(--hp-outline); }
.hp .sp-faq summary {
  cursor: pointer; list-style: none;
  padding: 18px 20px; font-weight: 700; color: var(--hp-navy);
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.hp .sp-faq summary::-webkit-details-marker { display: none; }
.hp .sp-faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--hp-green); flex: none; }
.hp .sp-faq details[open] summary::after { content: "−"; }
.hp .sp-faq summary:focus-visible { outline: 3px solid var(--hp-green); outline-offset: 2px; }
.hp .sp-faq__body { padding: 0 20px 20px; color: var(--hp-ink-muted); line-height: 1.65; font-size: 15px; }
.hp .sp-faq__body p + p,
.hp .sp-faq__body p + ul,
.hp .sp-faq__body ul + p,
.hp .sp-faq__body p + ol,
.hp .sp-faq__body ol + p { margin-top: 10px; }
.hp .sp-faq__body ul,
.hp .sp-faq__body ol { padding-inline-start: 20px; display: grid; gap: 6px; }
.hp .sp-faq__body ul { list-style: disc; }
.hp .sp-faq__body ol { list-style: decimal; }

/* Help centre audience switcher: in-page jump links, no JS. */
.hp .sp-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }
.hp .sp-tabs a {
  display: inline-flex; gap: 8px; align-items: center;
  padding: 10px 18px; border: 1px solid var(--hp-outline); background: var(--hp-white);
  color: var(--hp-navy); font-weight: 600; font-size: 15px;
}
.hp .sp-tabs a:hover { border-color: var(--hp-green); color: var(--hp-green); }
.hp .sp-tabs a:focus-visible { outline: 3px solid var(--hp-green); outline-offset: 2px; }
.hp .sp-guide { scroll-margin-top: 110px; }
.hp .sp-guide + .sp-guide { margin-top: 64px; }
.hp .sp-guide > h2 { font-size: clamp(22px, 3vw, 28px); color: var(--hp-navy); margin-bottom: 20px; text-align: center; }
.hp .sp-guide h3 { font-size: 18px; color: var(--hp-navy); margin: 36px auto 16px; max-width: 860px; }

/* ---------- Quote/promise band ---------- */
.hp .sp-band {
  background: linear-gradient(135deg, #0F2A30 0%, #001519 100%);
  color: var(--hp-white);
}
.hp .sp-band h2 { font-size: clamp(24px, 3.4vw, 34px); margin-bottom: 16px; }
.hp .sp-band p { color: var(--hp-navy-dim); font-size: 17px; line-height: 1.65; max-width: 46rem; }
.hp .sp-band .sp-checks li { color: var(--hp-white); }
.hp .sp-band .sp-checks li .hp__icon { color: var(--hp-mint); }
.hp .sp-band .hp-section__head h2 { color: var(--hp-white); }

/* Spacing/alignment helpers (instead of inline styles). */
.hp .sp-grid--spaced { margin-top: clamp(56px, 8vw, 96px); }
.hp .sp-feature__media--center { display: flex; justify-content: center; }
.hp .sp-gap-top { margin-top: 28px; }
.hp .sp-band .sp-kicker { color: var(--hp-mint); }
.hp .sp-band .sp-feature__body h2 { color: var(--hp-white); }
.hp .sp-band .sp-feature__body > p { color: var(--hp-navy-dim); }

/* Card links (solution pages listed on Features). */
.hp a.hp-card { display: block; color: inherit; }
.hp a.hp-card:focus-visible { outline: 3px solid var(--hp-green); outline-offset: 2px; }
.hp .sp-more { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; color: var(--hp-green); font-size: 14px; margin-top: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .hp .sp-hero__copy { align-items: stretch; }
  .hp .sp-hero__ctas .hp-btn { width: 100%; }
  .hp .sp-stack { padding-inline-end: 24px; }
  .hp .sp-stack .sp-phone { width: min(130px, 34vw); border-width: 6px; border-radius: 20px; }
  .hp .sp-iso__row, .hp .sp-portfolio__grid { gap: 8px; }
  .hp .sp-iso__tenant { padding: 12px 6px; }
  .hp .sp-tier { padding: 24px; }
}
@media (min-width: 640px) {
  .hp .sp-grid { grid-template-columns: repeat(2, 1fr); }
  .hp .sp-checks--two { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .hp .sp-hero__grid { grid-template-columns: 1.05fr 0.95fr; }
  .hp .sp-hero__grid--narrow { grid-template-columns: 1.3fr 0.7fr; }
  .hp .sp-grid { grid-template-columns: repeat(3, 1fr); }
  .hp .sp-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .hp .sp-feature { grid-template-columns: 1fr 1fr; gap: 64px; }
  .hp .sp-feature--flip .sp-feature__media { order: -1; }
  .hp .sp-tiers { grid-template-columns: repeat(3, 1fr); }
  .hp .sp-roadmap { grid-template-columns: 1fr 1fr; }
  .hp .sp-flow { grid-template-columns: repeat(var(--sp-steps, 4), 1fr); gap: 32px; }
  /* …and forward between side-by-side steps. */
  .hp .sp-flow__step:not(:last-child)::after {
    inset-block-end: auto; inset-block-start: calc(50% - 6px);
    inset-inline-start: auto; inset-inline-end: -22px;
    border-bottom: 0; border-right: 0;
    border-block-start: 2px solid var(--hp-green);
    border-inline-end: 2px solid var(--hp-green);
    transform: rotate(45deg);
  }
  [dir="rtl"] .hp .sp-flow__step:not(:last-child)::after { transform: rotate(-45deg); }
}
/* A flow that always stacks vertically (used beside copy in a feature row). */
@media (min-width: 960px) {
  .hp .sp-flow--stack { grid-template-columns: 1fr; gap: 28px; }
  .hp .sp-flow--stack .sp-flow__step:not(:last-child)::after {
    inset-block-start: auto; inset-block-end: -20px;
    inset-inline-end: auto; inset-inline-start: calc(50% - 6px);
    border-top: 0; border-left: 0;
    border-bottom: 2px solid var(--hp-green); border-right: 2px solid var(--hp-green);
    transform: rotate(45deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hp .hp-card { transition: none; }
}

/* Sample tally bar widths (fixed illustrative values). */
.hp .sp-w-68 { width: 68%; }
.hp .sp-w-24 { width: 24%; }
.hp .sp-w-8 { width: 8%; }
.hp .sp-tally .hp-ledger__sample { margin: 0 0 12px; }