/* ==========================================================================
   Cazar — application glue layer
   App-specific styles that sit on top of the design system (cazar.css).
   Kept separate so cazar.css stays a faithful copy of the mockup design tokens.
   ========================================================================== */

/* --- Fixed-nav spacing for pages that do NOT open with a .hero/.page-hero
       (e.g. module/container views: login, register, onboarding bodies) --- */
.app-shell-pad { padding-top: calc(var(--nav-h) + 2rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.site-main { min-height: 60vh; }

/* --- Careers: vacancy list ------------------------------------------------ */
.vacancy-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.vacancy-card h3 { margin: 0 0 .55rem; }
.vacancy-card .vacancy-meta { display: flex; flex-wrap: wrap; gap: .5rem; }
.vacancy-search .input-group-text { background: #fff; border: 1.5px solid var(--line-strong); border-inline-start: 0; border-radius: 0 12px 12px 0; }
.vacancy-search .form-control { border-inline-end: 0; }

/* --- Careers: vacancy detail --------------------------------------------- */
.vac-specs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; }
.vac-specs li { background: var(--ink-50); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.1rem; }
.vac-specs .descr { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; font-family: var(--font-display); margin-bottom: .25rem; }
.vac-specs .categVal { font-weight: 600; color: var(--ink-850); }
.vac-section h5 { font-family: var(--font-display); margin-top: 1.5rem; }
.share-via .a2a_kit { display: inline-flex; vertical-align: middle; }

/* --- Onboarding zone: minimal app-shell (replaces the missing obz.css) ---- */
#wrapper { min-height: 100vh; }
#sidebar-wrapper { min-width: 260px; max-width: 260px; padding-top: var(--nav-h); background: #fff; }
#sidebar-wrapper .list-group-item { border: 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 500; color: var(--ink-700); }
#sidebar-wrapper .list-group-item.active { background: var(--brand-50); color: var(--brand-700); border-inline-start: 3px solid var(--brand-400); }
#page-content-wrapper { flex: 1; min-width: 0; padding-top: var(--nav-h); }
.obz-topbar { background: var(--ink-900) !important; height: var(--nav-h); }
.obz-topbar .navbar-brand img { height: 36px; width: auto; }
.obz-topbar .nav-link { color: #e7ddd6; }
.obz-topbar .nav-link:hover { color: var(--gold); }
@media (max-width: 767.98px) { #sidebar-wrapper { display: none; } }

/* --- Marketing chrome helpers --------------------------------------------- */
/* Active top-level nav link: gold dot marker (set by cazar.js from the URL). */
.nav-links > li > a.active::after {
  content: ""; width: 5px; height: 5px; border-radius: 999px;
  background: var(--brand-500); display: inline-block; margin-inline-start: .1rem;
}
/* Homepage lifecycle stage panels (driven by [data-stagerail] in cazar.js). */
.stage-panel { display: none; }
.stage-panel.active { display: block; animation: fadeUp .45s cubic-bezier(.2,.8,.2,1) both; }

/* --- RTL adjustments for physical-property spots in the design system ----- */
[dir="rtl"] .nav-cta { margin-left: 0; margin-right: auto; }
[dir="rtl"] .nav-links { margin-left: 0; margin-right: 1rem; }
[dir="rtl"] .btn-link-arrow i,
[dir="rtl"] .btn i.bi-arrow-right { transform: scaleX(-1); }
[dir="rtl"] .vacancy-search .input-group-text { border-radius: 12px 0 0 12px; }

/* --- Arabic typography (page bodies are bilingual since 2026-09-18) --- */
/* IBM Plex Sans Arabic carries the Arabic; Latin fragments inside Arabic copy fall through to
   Jakarta. Joined script must not be tracked - every letter-spacing in the system is reset - and
   the display sizes need more leading than the Latin 1.03. Phone numbers stay left-to-right. */
[dir="rtl"] {
  --font-display: "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
[dir="rtl"] body { font-family: var(--font-body); }
[dir="rtl"] .mono-label, [dir="rtl"] .mono-meta, [dir="rtl"] .eyebrow, [dir="rtl"] .hero-footnote,
[dir="rtl"] .hero-pill .tag, [dir="rtl"] .breadcrumb-nav { font-family: var(--font-body); text-transform: none; }
[dir="rtl"] .display-xl, [dir="rtl"] .display-lg, [dir="rtl"] .display-md, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] .mono-label, [dir="rtl"] .mono-meta, [dir="rtl"] .eyebrow,
[dir="rtl"] .hero-footnote, [dir="rtl"] .btn, [dir="rtl"] .chip, [dir="rtl"] .tag, [dir="rtl"] .logo-word,
[dir="rtl"] .breadcrumb-nav, [dir="rtl"] .stat-tiles .k, [dir="rtl"] .tile .k { letter-spacing: 0; }
[dir="rtl"] .display-xl, [dir="rtl"] .display-lg { line-height: 1.22; }
[dir="rtl"] .display-md, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.3; }
[dir="rtl"] a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; display: inline-block; }
/* Figures keep their sign/suffix order ("-60%", "+2M", "99.9%"): resolve each value on its own. */
[dir="rtl"] .tile .v, [dir="rtl"] .float-card .fv, [dir="rtl"] .price .amount, [dir="rtl"] .pk-num { unicode-bidi: plaintext; }
[dir="rtl"] .breadcrumb-nav .bi-chevron-right { display: inline-block; transform: scaleX(-1); }

/* --- Publications (white papers + case studies): cards, generated covers, detail page, download modal --- */
/* Cards on /white-paper, /clients and the Resources hub. The cover is generated (no artwork):
   a navy panel with a gold spine and the paper's title, so every paper looks like
   part of one series. */
.wp-card { display: flex; flex-direction: column; overflow: hidden; height: 100%; }
.wp-cover {
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem;
  min-height: 190px; padding: 1.35rem 1.5rem 1.2rem;
  background: var(--grad-ink); color: #fff; position: relative; overflow: hidden; isolation: isolate;
}
.wp-cover::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 6px; background: var(--grad-brand); }
.wp-cover::after {
  content: ""; position: absolute; right: -120px; top: -160px; width: 320px; height: 320px; border-radius: 50%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,200,41,.26), rgba(255,200,41,0) 70%); pointer-events: none;
}
.wp-cover-kicker { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-300); }
.wp-cover-title { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; line-height: 1.12; letter-spacing: -.03em; color: #fff; text-wrap: balance; transition: color .2s ease; }
.wp-cover-foot { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.wp-cover:hover .wp-cover-title { color: var(--brand-300); }
.wp-cover.lg { min-height: 260px; border-radius: 16px; }
.wp-cover.lg .wp-cover-title { font-size: 1.7rem; }
.wp-card-body { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.wp-card-body h2 a, .wp-card-body h3 a { color: var(--ink-850); }
.wp-card-body h2 a:hover, .wp-card-body h3 a:hover { color: var(--brand-700); }
.wp-card-summary { font-size: .92rem; color: var(--ink-500); flex: 1; }
.wp-card-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }

/* Detail page: facts tiles in the hero, body copy, sticky download card, share row. */
.wp-facts .tile .v { font-size: 1.15rem; }
.wp-body p { font-size: 1.06rem; line-height: 1.7; color: var(--ink-700); }
.wp-body p:first-child { font-size: 1.16rem; color: var(--ink-850); font-weight: 500; }
.wp-body h2 { margin-top: 2.25rem; }
.wp-body .ticklist li { padding: .45rem 0; color: var(--ink-700); }
.wp-quote { margin: 2rem 0 0; padding: 1.5rem 1.75rem; border-inline-start: 3px solid var(--brand-500); background: #fff; border-radius: 0 var(--radius) var(--radius) 0; box-shadow: var(--shadow-sm); }
.wp-quote p { font-family: var(--font-display); font-weight: 500; font-size: 1.12rem; line-height: 1.5; letter-spacing: -.01em; color: var(--ink-850); margin: 0 0 .9rem; }
.wp-quote footer { display: flex; flex-direction: column; gap: .1rem; font-size: .85rem; color: var(--ink-500); }
.wp-quote footer strong { color: var(--ink-850); }
[dir="rtl"] .wp-quote { border-radius: var(--radius) 0 0 var(--radius); }
.wp-stats { margin: 2.25rem 0 .5rem; }
.wp-stats .stat-num { font-size: clamp(1.9rem, 3vw, 2.6rem); white-space: nowrap; } /* "30–60%" must not break at the dash */
.wp-stats > div { padding: 0 2rem; }
.wp-stats > div:first-child { padding-inline-start: 0; }
/* height:auto — .card-soft is 100% tall by default, which would stretch this sticky card down the whole column. */
.wp-download-card { padding: clamp(1.8rem, 3vw, 2.5rem); position: sticky; top: calc(var(--nav-h) + 24px); height: auto; }
.wp-share { display: flex; align-items: center; gap: .6rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.1); }
.wp-share .mono-label { margin-inline-end: auto; }
.wp-share a { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; transition: background .2s, color .2s, transform .2s; }
.wp-share a:hover { background: var(--brand-500); color: #14140F; transform: translateY(-2px); }
@media (max-width: 991.98px) {
  .wp-download-card { position: static; }
  .wp-stats > div { padding: 0; }
}

/* Download modal (Bootstrap modal restyled to the input-card look). */
.wp-modal .modal-dialog { max-width: 580px; }
.wp-modal .modal-content { border: 0; border-radius: 22px; background: #fff; box-shadow: 0 40px 90px -30px rgba(4,10,24,.6); }
.wp-modal .modal-body { padding: clamp(1.7rem, 3vw, 2.5rem); }
.wp-modal-close {
  position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2;
  width: 36px; height: 36px; border-radius: 10px; border: 0;
  background: var(--ink-100); color: var(--ink-700); display: grid; place-items: center;
  transition: background .2s, color .2s;
}
.wp-modal-close:hover { background: var(--brand-500); color: #14140F; }
.wp-modal .modal-body > .eyebrow + h2 { padding-inline-end: 2.5rem; }

/* --- Product hero mockup: applications kanban (the "Pipeline" tab of the browser frame) --- */
.pk-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: start; }
.pk-col { border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pk-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.88); padding: 2px 2px 6px; white-space: nowrap; overflow: hidden; }
.pk-head i { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.pk-head span { margin-inline-start: auto; font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.45); background: rgba(255,255,255,.08); border-radius: 999px; padding: 1px 7px; }
.pk-card { display: grid; grid-template-columns: 26px minmax(0, 1fr) 28px 20px; grid-template-areas: "av who bar num" "foot foot foot foot"; column-gap: 7px; row-gap: 6px; align-items: center; padding: 9px 10px; border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.07); }
.pk-av { grid-area: av; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; color: #fff; background: oklch(.62 .14 var(--h)); }
.pk-who { grid-area: who; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.pk-who b { font-size: 11.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-who small { font-family: var(--font-mono); font-size: 9.5px; color: rgba(255,255,255,.4); }
.pk-score { grid-area: bar; height: 4px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.pk-score i { display: block; height: 100%; border-radius: 999px; }
.pk-num { grid-area: num; font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-align: end; }
.pk-score.good i, .pk-num.good { background: #34D399; color: #34D399; }
.pk-score.mid i,  .pk-num.mid  { background: #F59E0B; color: #F59E0B; }
.pk-score.low i,  .pk-num.low  { background: #F87171; color: #F87171; }
.pk-num { background: none !important; }
.pk-foot { grid-area: foot; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.pk-foot time { font-family: var(--font-mono); font-size: 9.5px; color: rgba(255,255,255,.4); white-space: nowrap; }
.pk-chip { font-size: 9.5px; font-weight: 600; color: #67E8F9; background: rgba(34,211,238,.14); border-radius: 999px; padding: 2px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pk-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 11px; font-weight: 600; }
.pk-seg > * { padding: 3px 10px; border-radius: 999px; color: rgba(255,255,255,.55); }
.pk-seg > b { color: #14140F; background: var(--brand-500); }
@media (max-width: 1199.98px) { .pk-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pk-col:nth-child(n+4) { display: none; } }

/* --- Page imagery: the team-supplied banners (wwwroot/images/banners) --- */
/* Heroes keep copy on the left and show the picture as a framed panel in the right column;
   the same frame on paper sections is .section-figure. Images are decorative crops, so they
   fill a fixed 16:10 box (5:4 for the portrait) and never dictate the layout height. */
.hero-figure { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ink-panel); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 70px -30px rgba(2,8,23,.85), 0 0 0 6px rgba(255,255,255,.04); position: relative; }
.hero-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-figure.portrait { aspect-ratio: 1 / 1; }            /* why-us: crop the empty top, keep face and crossed hands */
.hero-figure.portrait img { object-position: 50% 55%; }
.hero-figure.contain { background: #fff; }
.hero-figure.contain img { object-fit: contain; }
.section-figure { background: #fff; border-color: var(--line); box-shadow: var(--shadow-lg); }
.page-hero .row.align-items-center > .col-lg-7 .lead { margin-bottom: 0; }
@media (max-width: 991.98px) {
  .hero-figure { max-height: 240px; aspect-ratio: auto; height: 240px; }
  .hero-figure.contain { height: auto; max-height: none; aspect-ratio: 16 / 10; }
  .hero-figure.portrait { height: auto; max-height: none; aspect-ratio: 1 / 1; }
}

/* Banner heroes: the picture is the hero backdrop rather than a framed panel. It fills a
   right-hand 16:9 panel about 80% of the hero's height (a notch smaller than full-bleed, per
   marketing), vertically centred under the nav and bleeding off the right edge; a mask dissolves its
   left edge and top/bottom into the navy gradient so the hero keeps its clean edges, and a navy tint
   keeps the white copy legible where the panel's faded edge runs under a long headline. Per page:
   --banner-focus (object-position, for images that aren't 16:9), --banner-opacity (bright photos),
   --banner-y (vertical centre), --banner-h (panel height - smaller for edge-to-edge artwork that
   must stay clear of the copy), --banner-edge (length of the left fade). The why-us portrait stays a framed .hero-figure. */
.hero-banner { display: flex; flex-direction: column; justify-content: center; }
.hero-banner > .container { width: 100%; }
.hero-banner-media {
  position: absolute; z-index: 0; pointer-events: none;
  right: 0; height: var(--banner-h, min(80%, 36vw, 540px)); aspect-ratio: 16 / 9;   /* width follows the ratio (never past 64vw), so the cover crop stays minimal */
  top: var(--banner-y, calc(50% + var(--nav-h) / 2)); transform: translateY(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--banner-edge, 46%)), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--banner-edge, 46%)), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
}
.hero-banner-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--banner-focus, 50% 50%); opacity: var(--banner-opacity, .92); }
.hero-banner-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ink-950) 62%, transparent) 0%, color-mix(in srgb, var(--ink-950) 16%, transparent) 48%, color-mix(in srgb, var(--ink-950) 26%, transparent) 100%);
}
[dir="rtl"] .hero-banner-media {
  right: auto; left: 0;
  -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 var(--banner-edge, 46%)), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(270deg, transparent 0, #000 var(--banner-edge, 46%)), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
[dir="rtl"] .hero-banner-media::after { background: linear-gradient(270deg, color-mix(in srgb, var(--ink-950) 62%, transparent) 0%, color-mix(in srgb, var(--ink-950) 16%, transparent) 48%, color-mix(in srgb, var(--ink-950) 26%, transparent) 100%); }
@media (min-width: 992px) {
  .hero-banner { min-height: clamp(440px, 36vw, 560px); }
}
/* Stacked: the picture becomes a full-width, soft-edged band under the copy (natural ratio, uncropped). */
@media (max-width: 991.98px) {
  .hero-banner-media, [dir="rtl"] .hero-banner-media {
    position: relative; order: 2; inset: auto; transform: none; width: 100%; height: auto; aspect-ratio: auto; margin-top: 2rem;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 84%, transparent 100%);
    mask-composite: add;
  }
  .hero-banner-media img { height: auto; }
  .hero-banner-media::after, [dir="rtl"] .hero-banner-media::after { background: color-mix(in srgb, var(--ink-950) 22%, transparent); }
}

/* --- News & Media (/news + /news/<slug>): ported from the old WordPress newsroom --- */
/* Featured cards on the hub: a short ink panel with an icon stands in for the missing artwork. */
.news-card { overflow: hidden; }
.news-card-cover { display: grid; place-items: center; min-height: 150px; background: var(--grad-ink); position: relative; isolation: isolate; }
.news-card-cover::after { content: ""; position: absolute; left: 50%; top: -120px; width: 360px; height: 240px; transform: translateX(-50%); z-index: -1; background: radial-gradient(50% 50% at 50% 50%, rgba(255,200,41,.3), transparent 70%); pointer-events: none; }
.news-card-cover .feature-icon { width: 60px; height: 60px; font-size: 1.6rem; }
.news-card-body { padding: 1.6rem 1.75rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.news-card h2 { color: var(--ink-850); transition: color .2s; }
.news-card:hover h2 { color: var(--brand-700); }
/* Article body: the old posts mix copy, single images, photo sets and video embeds. */
.news-body ul, .news-body ol { padding-inline-start: 1.25rem; color: var(--ink-700); font-size: 1.02rem; line-height: 1.65; }
.news-body li + li { margin-top: .4rem; }
.news-body h3 { margin-top: 1.75rem; font-size: 1.15rem; }
.news-body hr { margin: 2rem 0 1.25rem; border-color: var(--line); opacity: 1; }
.news-body sup { font-size: .7em; }
.news-figure { margin: 1.75rem 0; }
.news-figure img { display: block; max-width: 100%; height: auto; border-radius: 16px; box-shadow: var(--shadow-sm); }
.news-figure.small img { max-width: min(100%, 420px); } /* logos, phone screenshots, thumbnails */
.news-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; margin: 1.75rem 0; }
.news-gallery .news-figure { margin: 0; }
.news-gallery .news-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; max-width: none; }
.news-embed { position: relative; aspect-ratio: 16 / 9; margin: 1.75rem 0; border-radius: 16px; overflow: hidden; background: var(--ink-900); box-shadow: var(--shadow-sm); }
.news-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Sidebar "more news": title above a date/category line (the 3-column row is too tight there). */
.news-side a { flex-direction: column; align-items: flex-start; gap: .3rem; padding: .95rem 0; }
.news-side .rl-title { font-size: .95rem; line-height: 1.35; }
/* Archive list: 60+ rows, so keep the meta column narrow and let long titles wrap. */
#newsArchive a { padding: 1.05rem 0; }
#newsArchive .rl-title { font-size: .98rem; }

/* Bootstrap's g-5 rows (-1.5rem margins) overhang the 12px container padding on phones; outside the
   clipped .page-hero that makes the publication detail pages scroll sideways by 12px. Columns are
   stacked at this width, so a 1.5rem gutter leaves the content edges exactly where they were. */
@media (max-width: 767.98px) { .row.g-5 { --bs-gutter-x: 1.5rem; } }
/* Same overhang on tablets and small laptops: cazar.css makes .container fluid up to 1260px, so from 768px
   until the container gains side margins (1260 + 2*12 = 1284px) a two-column g-5 row is 12px wider than the
   screen and the page pans sideways. Widening the container padding to match the g-5 half-gutter fixes it
   and gives every section a 24px edge at these widths. */
@media (min-width: 768px) and (max-width: 1283.98px) { .container { padding-inline: 1.5rem; } }
/* The home hero's float cards hang 22–26px outside the mockup container (left/right: var(--fc-out, …)).
   Under 1200px that container is edge-to-edge, so the cards would poke off-screen and get cut by the
   hero's overflow clip; tuck them just inside the edge instead. */
@media (max-width: 1199.98px) { .hero .container > .float-card { --fc-out: 10px; } }
/* Home hero app mockup: on desktop the frame hangs 112px past the hero's bottom edge (clipped by the
   hero) and the logo band reserves that space. Under lg the frame is the compact 231px version, so the
   overhang only cut its single candidate row in half and left a blank band above the logos. */
.hero-app { position: relative; z-index: 2; margin-top: 62px; margin-bottom: -112px; }
.logo-band { padding: 168px 0 0; }
@media (max-width: 991.98px) {
  .hero-app { margin-top: 40px; margin-bottom: 0; }
  .logo-band { padding-top: 64px; }
}
/* Related-content rows (case studies, insights, news archive): the nowrap .rl-meta (client name / category)
   squeezed long titles into a one-word-per-line column on phones. Stack the meta under the title instead. */
@media (max-width: 575.98px) {
  .row-list a, .row-list .row-item { flex-wrap: wrap; gap: .2rem 1rem; padding: 1.2rem 0; }
  .row-list .rl-title { flex: 1 1 100%; }
  .row-list .rl-meta { white-space: normal; }
}

/* --- Account pages (AccountModule: login / register / forgot / reset password) ----------------------------
   These views are shared across tenants and ship BS3-era markup (.panel, .form-group, .btn-custom) with no
   styling of their own, so they render as bare Bootstrap. Dress them in the theme's form language here. The
   fixed nav also has no hero behind it on these pages, so the layout flags it solid (ViewData navSolid). */
.site-nav.solid { background: var(--ink-900); border-bottom: 1px solid rgba(255,255,255,.08); }
.login-pg { justify-content: center; }
.login-pg .cl1 { display: none; }
.login-pg .cl2 { flex: 0 0 auto; width: 100%; max-width: 520px; }
.login-pg .login-header { margin-bottom: 1.4rem; }
.login-pg .login-header h2 { font-size: .82rem; font-family: var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brand-700); margin-bottom: .6rem; }
.login-pg .panel-title {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem 1.2rem; margin: 0;
  font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -.02em; color: var(--ink-850);
}
/* The active tab is an inline-styled span (black underline) and the other tab a plain link. */
.login-pg .panel-title > span[style] { border-bottom-color: var(--brand-500) !important; padding-bottom: 6px !important; }
.login-pg .panel-title > a { color: var(--ink-300); font-weight: 600; text-decoration: none; margin: 0 !important; padding-bottom: 6px; border-bottom: 3px solid transparent; transition: color .2s; }
.login-pg .panel-title > a:hover { color: var(--brand-700); }
.login-pg .panel-title p { flex-basis: 100%; margin: .5rem 0 0; font-family: var(--font-body); font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--ink-600); }
.login-pg .panel { background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.5rem, 2.4vw, 2rem); }
.login-pg .form-group { margin-bottom: 1.1rem; }
.login-pg .form-group > label { display: block; font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--ink-600); margin-bottom: .45rem; }
.login-pg .field-validation-error, .login-pg span[data-valmsg-for] { display: block; margin-top: .35rem; font-size: .85rem; color: #B42318; }
.login-pg .login-remember label { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: .92rem; font-weight: 500; color: var(--ink-600); cursor: pointer; }
.login-pg .login-remember label strong { font-weight: 500; }
.login-pg .login-remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-600); }
.login-pg .form-group.mt-5 { margin-top: 1.5rem !important; }
.login-pg .btn-custom { width: 100%; justify-content: center; padding: .9rem 1.6rem; background: var(--brand-500); color: #14140F; box-shadow: var(--shadow-brand); }
.login-pg .btn-custom:hover { background: var(--brand-400); color: #14140F; transform: translateY(-1px); }
.login-pg .forgot-pass, .login-pg fieldset > .form-group:last-child { text-align: center; margin-bottom: 0; }
.login-pg .forgot-txt { color: var(--brand-700); font-weight: 600; text-decoration: none; }
.login-pg .forgot-txt:hover { text-decoration: underline; }
.login-pg .social-logins ul { list-style: none; padding: 0; margin: 0; }
.login-pg .social-logins .btn { width: 100%; justify-content: center; background: #fff; border-color: var(--line-strong); color: var(--ink-850); }
.login-pg .social-logins .btn:hover { border-color: var(--ink-850); }
.login-pg .alert { border-radius: 12px; }