/* =============================================================================
   PAGES — the standalone pages built by build-pages.js (19 Oct 2026).

   The design is the offer page's: every page reuses its sections, cards,
   buttons and type. This file only adds the few pieces a standalone page has
   that the offer page did not: a page hero with a breadcrumb, a row of key
   facts, long-form prose, notes by industry, the location links in the footer,
   and the right-to-left adjustments the Arabic pages need.
   ========================================================================== */

/* ---------------------------------------------------------------- hero */
.page-hero{padding-top:calc(var(--nav-h) + clamp(40px,6vw,88px))}
.page-hero .h-xl{font-size:clamp(28px,3.6vw,48px);max-width:22ch}
.page-lede{max-width:62ch}

.crumbs ol{display:flex;flex-wrap:wrap;gap:6px 10px;list-style:none;margin:0 0 22px;padding:0;
  font-size:12.6px;color:rgba(255,255,255,.6)}
.crumbs li{display:inline-flex;align-items:center;gap:10px}
.crumbs li+li::before{content:"/";opacity:.45}
.crumbs a{color:rgba(255,255,255,.78);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.3)}
.crumbs a:hover{color:#fff}
.crumbs [aria-current]{color:var(--mint)}

.page-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;margin:clamp(30px,4vw,48px) 0 0;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm);overflow:hidden}
.page-facts>div{background:var(--deep);padding:16px 18px}
.page-facts dt{font-family:var(--mono);font-size:10.2px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.page-facts dd{margin:6px 0 0;color:#fff;font-size:14.6px;line-height:1.45;font-weight:500}

/* ---------------------------------------------------------------- prose */
.page-prose{max-width:760px}
.prose p,.prose li{color:var(--ink-2);font-size:clamp(15px,1.05vw,16.4px);line-height:1.72}
.prose p+p,.prose p+ul,.prose ul+p,.prose p+ol,.prose ol+p{margin-top:14px}
.prose ul,.prose ol{padding-left:22px;margin:0}
.prose li+li{margin-top:8px}
.prose a{color:var(--green-ink);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--ink);font-weight:600}
.dark .prose p,.dark .prose li{color:rgba(255,255,255,.78)}
.dark .prose a{color:var(--mint)}

/* ---------------------------------------------------------------- by industry */
.industry-notes{gap:16px}
.industry-notes .card{padding:24px 24px 22px}
.industry-notes .prose p{font-size:14.6px}
@media (min-width:860px){.industry-notes{grid-template-columns:1fr 1fr}}

/* ---------------------------------------------------------------- coverage, as text */
.cov-static{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:13.4px;line-height:1.7;color:var(--muted)}
.cov-static p+p{margin-top:8px}
.cov-static a{color:var(--green-ink);text-decoration:underline}

/* ---------------------------------------------------------------- the offer page's links out */
a.explore-card{color:inherit;text-decoration:none;display:block}
a.explore-card:focus-visible{outline:2px solid var(--green-ink);outline-offset:3px}

.foot-locs{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:clamp(28px,3vw,40px);padding-top:18px;
  border-top:1px solid rgba(255,255,255,.1);font-size:12.8px}
.foot-locs a{color:rgba(255,255,255,.66)}
.foot-locs a:hover{color:#fff}
.foot-locs a:first-child{color:var(--mint)}

/* ---------------------------------------------------------------- right to left */
html[dir=rtl] .prose ul,html[dir=rtl] .prose ol{padding-left:0;padding-right:22px}
html[dir=rtl] .page-hero .h-xl{letter-spacing:0}
html[dir=rtl] .eyebrow{letter-spacing:0}
html[dir=rtl] .btn svg use[href="#i-arr"]{transform:scaleX(-1);transform-origin:center}
html[dir=rtl] .page-prose,html[dir=rtl] .prose{text-align:right}
html[dir=rtl] body{font-family:var(--body),'Segoe UI','Tahoma',sans-serif}
html[lang^=ar] .prose p,html[lang^=ar] .prose li{line-height:1.9}

/* ---------------------------------------------------------------- buttons on the dark hero
 * The offer page sets its on-dark buttons per section (the hero, the final
 * call to action); these two dark blocks are new, so they need the same pair:
 * the mint primary and the light-outlined ghost. */
.page-hero .btn-primary,.page-cta .btn-primary{background:linear-gradient(100deg,var(--mint),var(--mint-bright));color:var(--deep);font-weight:600;box-shadow:0 10px 26px -12px rgba(79,231,143,.6)}
.page-hero .btn-ghost,.page-cta .btn-ghost{border-color:rgba(255,255,255,.22);color:#fff;background:transparent}
.page-hero .btn-ghost:hover,.page-cta .btn-ghost:hover{border-color:rgba(255,255,255,.5)}

/* THE SKIP LINK, MIRRORED. It waits at left:-9999px, which in a left-to-right
 * page is off the scrollable area -- and in a right-to-left one IS the
 * scrollable area: the Arabic pages measured 11,264px wide and opened on an
 * empty white screen. Parked on the right instead, which RTL cannot scroll to. */
html[dir=rtl] .skip:not(:focus){left:auto;right:-9999px}