/* ==========================================================================
   iSite marketing site
   Palette taken from the app's neutral (non-tenant) iSite theme.
   ========================================================================== */
:root {
  --navy: #10243D;
  --navy-2: #0E2540;
  --navy-3: #173A5E;
  --teal: #12A3BE;
  --teal-dark: #0B7F96;
  --teal-deep: #086476;
  --cyan: #38D6E0;
  --tint: #E7F7FA;
  --grey: #F4F5F6;
  --slate: #5B6672;
  --white: #ffffff;
  --ink: #10243D;

  --maxw: 1120px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px -12px rgba(16, 36, 61, 0.25);
  --shadow-lg: 0 24px 60px -20px rgba(16, 36, 61, 0.35);
  --font: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.18rem; font-weight: 700; }
p { margin: 0 0 1rem; }
a { color: var(--teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

.skip-link {
  position: absolute; inset-inline-start: -999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 16px; border-end-end-radius: 8px;
}
.skip-link:focus { inset-inline-start: 0; }

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }

/* -------------------------------- Buttons -------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; font-weight: 650; font-size: .95rem;
  padding: .7rem 1.15rem; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  white-space: nowrap; text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-lg { padding: .9rem 1.5rem; font-size: 1.02rem; }
.btn-primary { background: var(--teal); color: #fff; box-shadow: 0 8px 20px -8px rgba(18,163,190,.7); }
.btn-primary:hover { background: var(--teal-dark); }
.btn-ghost { color: var(--navy); background: transparent; }
.btn-ghost:hover { background: rgba(16,36,61,.06); }
.btn-outline { background: #fff; color: var(--navy); border-color: rgba(16,36,61,.18); }
.btn-outline:hover { border-color: var(--teal); color: var(--teal-dark); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* -------------------------------- Header --------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(16,36,61,.08);
}
.header-inner { display: flex; align-items: center; gap: 1.5rem; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; color: var(--navy); font-size: 1.25rem; letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand-mark { border-radius: 8px; }
.nav { display: flex; gap: 1.4rem; margin-inline: auto; }
.nav a { color: var(--slate); font-weight: 550; font-size: .95rem; }
.nav a:hover { color: var(--navy); text-decoration: none; }
.header-actions { display: flex; gap: .6rem; align-items: center; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 10px; }
.nav-toggle span { height: 2.5px; background: var(--navy); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.mobile-nav { display: none; flex-direction: column; gap: .35rem; padding: 12px 24px 20px; border-bottom: 1px solid rgba(16,36,61,.08); background: #fff; }
.mobile-nav a { padding: .6rem .2rem; color: var(--navy); font-weight: 600; }
.mobile-nav .btn { margin-top: .4rem; }

/* --------------------------------- Hero ---------------------------------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(56,214,224,.22), transparent 60%),
    radial-gradient(800px 500px at 5% 110%, rgba(18,163,190,.28), transparent 55%),
    linear-gradient(160deg, var(--navy-3) 0%, var(--navy) 55%, var(--navy-2) 100%);
}
.hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; padding: 84px 0 92px; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 700; color: var(--cyan); margin: 0 0 1rem; }
.hero h1 { color: #fff; }
.lead { font-size: 1.16rem; color: rgba(255,255,255,.82); max-width: 34rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 1rem; }
.hero-note { font-size: .9rem; color: rgba(255,255,255,.6); margin: 0; }

/* Hero dashboard preview card */
.hero-panel { display: flex; justify-content: center; }
.panel-card {
  width: 100%; max-width: 360px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14); border-radius: 20px; padding: 18px;
  box-shadow: var(--shadow-lg); backdrop-filter: blur(6px);
}
.panel-row { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: #fff; }
.panel-row--head { justify-content: flex-start; font-size: .95rem; margin-bottom: 14px; }
.panel-count { margin-inline-start: auto; font-size: 1.4rem; font-weight: 800; color: var(--cyan); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-live { background: var(--cyan); box-shadow: 0 0 0 0 rgba(56,214,224,.7); animation: pulse 2.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(56,214,224,.6); } 70% { box-shadow: 0 0 0 10px rgba(56,214,224,0); } 100% { box-shadow: 0 0 0 0 rgba(56,214,224,0); } }
@media (prefers-reduced-motion: reduce) { .dot-live { animation: none; } }
.panel-list { display: flex; flex-direction: column; gap: 8px; }
.panel-item { display: flex; align-items: center; gap: .6rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 9px 11px; font-size: .92rem; color: rgba(255,255,255,.92); }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 700; color: var(--navy); background: linear-gradient(180deg, var(--cyan), var(--teal)); }
.tag { margin-inline-start: auto; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.tag-ok { background: rgba(56,214,224,.18); color: var(--cyan); }
.tag-cond { background: rgba(255,196,84,.18); color: #ffcf7a; }
.panel-foot { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 14px; }
.panel-foot div { background: rgba(255,255,255,.05); border-radius: 12px; padding: 10px 8px; text-align: center; }
.panel-foot strong { display: block; font-size: 1.1rem; color: #fff; }
.panel-foot span { font-size: .72rem; color: rgba(255,255,255,.6); }

/* ------------------------------- Sections -------------------------------- */
.section { padding: 84px 0; }
.section-alt { background: var(--grey); }
.section-head { max-width: 42rem; margin: 0 auto 3rem; text-align: center; }
.section-sub { font-size: 1.1rem; color: var(--slate); }
.section-sub strong { color: var(--navy); font-weight: 650; }

/* Stat row */
.stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.stat { text-align: center; padding: 1.6rem 1rem; background: #fff; border: 1px solid rgba(16,36,61,.08); border-radius: var(--radius); box-shadow: var(--shadow); }
.stat-num { display: block; font-size: 2.4rem; font-weight: 800; color: var(--teal); letter-spacing: -0.03em; }
.stat-label { color: var(--slate); font-size: .95rem; }

/* Feature grid */
.grid { display: grid; gap: 1.25rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: #fff; border: 1px solid rgba(16,36,61,.08); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--slate); margin: 0; font-size: .96rem; }
.card em { font-style: normal; color: var(--teal-deep); font-weight: 650; }
.icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--tint); color: var(--teal-deep); margin-bottom: 1rem; }
.icon svg { width: 24px; height: 24px; stroke-linecap: round; stroke-linejoin: round; }
.pill { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--teal-deep); background: var(--tint); padding: 2px 8px; border-radius: 999px; vertical-align: middle; }

/* Steps */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.step { position: relative; padding: 1.5rem 1.25rem; background: #fff; border: 1px solid rgba(16,36,61,.08); border-radius: var(--radius); box-shadow: var(--shadow); }
.step-num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(180deg, var(--cyan), var(--teal)); color: var(--navy); font-weight: 800; margin-bottom: .9rem; }
.step h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.step p { color: var(--slate); font-size: .92rem; margin: 0; }
.step em { font-style: normal; color: var(--teal-deep); font-weight: 650; }

/* Who cards */
.who-card { background: #fff; border: 1px solid rgba(16,36,61,.08); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); border-top: 4px solid var(--teal); }
.who-card h3 { font-size: 1.05rem; }
.who-card p { color: var(--slate); font-size: .94rem; margin: 0; }

/* CTA */
.cta { background: linear-gradient(160deg, var(--navy-3), var(--navy) 60%, var(--navy-2)); color: #fff; text-align: center; }
.cta-inner { max-width: 44rem; margin-inline: auto; }
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,.82); font-size: 1.1rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin: 1.8rem 0 1.2rem; }
.cta-contact { font-size: .95rem; color: rgba(255,255,255,.7); }
.cta-contact a { color: var(--cyan); }

/* -------------------------------- Footer --------------------------------- */
.site-footer { background: var(--navy-2); color: rgba(255,255,255,.7); padding: 56px 0 28px; }
.footer-inner { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand .brand { color: #fff; }
.footer-brand p { margin: .8rem 0 0; max-width: 22rem; font-size: .95rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; }
.footer-nav a { color: rgba(255,255,255,.78); font-size: .95rem; }
.footer-nav a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-top: 22px; font-size: .88rem; }
.footer-bottom a { color: var(--cyan); }

/* ------------------------------- Reveal ---------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ------------------------------ Responsive ------------------------------- */
@media (max-width: 940px) {
  .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; padding: 64px 0 72px; }
  .hero-panel { order: -1; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .nav, .header-actions { display: none; }
  .nav-toggle { display: flex; margin-inline-start: auto; }
  .mobile-nav[data-open="true"] { display: flex; }
}
@media (max-width: 760px) {
  .section { padding: 60px 0; }
}
@media (max-width: 520px) {
  .grid-3, .grid-4, .steps, .stat-row { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}

/* ==========================================================================
   Subpages — pricing, privacy, 404
   ========================================================================== */

/* Compact navy band at the top of an inner page. Same gradient as the hero. */
.page-hero {
  color: #fff;
  background:
    radial-gradient(900px 420px at 88% -20%, rgba(56,214,224,.20), transparent 60%),
    radial-gradient(700px 420px at 0% 120%, rgba(18,163,190,.24), transparent 55%),
    linear-gradient(160deg, var(--navy-3) 0%, var(--navy) 55%, var(--navy-2) 100%);
}
.page-hero-inner { padding: 66px 0 62px; max-width: 46rem; }
.page-hero h1 { color: #fff; font-size: clamp(1.9rem, 4.2vw, 3rem); }
.page-hero h1 .accent { color: var(--cyan); }
.page-hero .lead { max-width: 40rem; }
.page-hero .updated { font-size: .9rem; color: rgba(255,255,255,.6); margin: 1.2rem 0 0; }

/* The eyebrow is cyan on the dark bands and deep teal everywhere else —
   pale cyan on white sits at about 1.8:1 and fails contrast badly. */
.eyebrow { color: var(--teal-deep); }
.hero .eyebrow, .page-hero .eyebrow, .cta .eyebrow { color: var(--cyan); }

/* ------------------------------- Pricing --------------------------------- */
.promise-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--grey); border-bottom: 1px solid rgba(16,36,61,.08); }
.promise-strip div { padding: 18px 20px; text-align: center; font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); border-inline-end: 1px solid rgba(16,36,61,.08); }
.promise-strip div:last-child { border-inline-end: 0; }
.promise-strip b { color: var(--navy); font-weight: 700; }

/* Cards stretch to the tallest in the row so the bottoms line up; .tier-feats
   takes the slack (flex: 1) so each CTA sits on the card floor rather than
   floating under a short feature list. */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.tier { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(16,36,61,.08); border-radius: var(--radius); padding: 1.9rem 1.6rem 1.7rem; box-shadow: var(--shadow); }
.tier--featured { border: 2px solid var(--navy); box-shadow: var(--shadow-lg); }
.tier-badge { position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%); background: var(--teal); color: #fff; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: .25rem .7rem; border-radius: 999px; white-space: nowrap; }
.tier-kicker { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--teal-deep); margin: 0 0 .35rem; }
.tier h2 { font-size: 1.5rem; margin: 0 0 .4rem; }
.tier-who { color: var(--slate); font-size: .92rem; margin: 0 0 1.1rem; min-height: 2.8em; }
/* Reserve room for the "From" label (7.15rem = the tallest price block, the
   one on Portfolio) and bottom-align, so every price figure and divider sits on
   the same line across the row whether or not the plan has a "From". */
.tier-price { display: flex; flex-direction: column; justify-content: flex-end; min-height: 7.15rem; padding-bottom: 1.2rem; margin-bottom: 1.3rem; border-bottom: 1px solid rgba(16,36,61,.1); }
.tier-from { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--teal-deep); margin-bottom: .2rem; }
.tier-amt { font-size: 2.6rem; font-weight: 800; color: var(--navy); letter-spacing: -0.03em; line-height: 1; }
.tier-amt small { font-size: 1.05rem; font-weight: 650; color: var(--slate); letter-spacing: 0; }
.tier-per { display: block; font-size: .84rem; color: var(--slate); margin-top: .4rem; }

.tier-feats { list-style: none; padding: 0; margin: 0 0 1.4rem; flex: 1; }
.tier-feats li { position: relative; padding-inline-start: 1.85rem; margin-bottom: .7rem; font-size: .94rem; line-height: 1.45; color: var(--ink); }
.tier-feats li::before { content: ""; position: absolute; inset-inline-start: 0; top: .18em; width: 19px; height: 19px; border-radius: 50%; background: var(--tint); }
.tier-feats li::after { content: ""; position: absolute; inset-inline-start: 7px; top: .42em; width: 4px; height: 8px; border: solid var(--teal-deep); border-width: 0 2px 2px 0; transform: rotate(43deg); }
.tier-feats li.carried { font-weight: 650; color: var(--navy); }
.tier-feats li.carried::before { background: rgba(16,36,61,.08); }
.tier-feats li.carried::after { border-color: var(--navy); }
.tier-cta { display: grid; padding-top: 1.3rem; border-top: 1px solid rgba(16,36,61,.1); }

/* Everything-included band */
.allin { background: var(--navy); color: rgba(255,255,255,.8); border-radius: var(--radius); padding: 2rem 2.2rem; margin-top: 2.5rem; }
.allin h2 { color: #fff; font-size: 1.25rem; margin-bottom: 1.4rem; }
.allin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.allin-grid div { font-size: .93rem; line-height: 1.5; }
.allin-grid b { display: block; color: var(--cyan); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .35rem; }

.pricing-note { margin: 2rem auto 0; max-width: 52rem; font-size: .93rem; color: var(--slate); text-align: center; }
.pricing-note b { color: var(--navy); font-weight: 650; }

/* -------------------------- Long-form / legal ---------------------------- */
.prose { max-width: 46rem; margin-inline: auto; }
.prose h2 { font-size: 1.35rem; margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(16,36,61,.1); }
.prose h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 1.02rem; margin-top: 1.6rem; margin-bottom: .3rem; }
.prose p, .prose li { color: var(--slate); }
.prose ul { padding-inline-start: 1.2rem; margin: 0 0 1rem; }
.prose li { margin-bottom: .45rem; }
.prose strong { color: var(--navy); font-weight: 650; }
.prose .placeholder { background: var(--tint); color: var(--teal-deep); font-weight: 650; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.prose address { font-style: normal; color: var(--slate); }

/* ---------------------------------- 404 ---------------------------------- */
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; }
.notfound .container { max-width: 32rem; }
.notfound img { margin: 0 auto 1.2rem; border-radius: 14px; }
.notfound p { color: var(--slate); }

/* --------------------- Responsive (subpage components) -------------------- */
@media (max-width: 940px) {
  .tiers { grid-template-columns: 1fr; }
  .tier--featured { order: -1; }
  .promise-strip, .allin-grid { grid-template-columns: repeat(2, 1fr); }
  .promise-strip div:nth-child(2) { border-inline-end: 0; }
  .promise-strip div:nth-child(-n+2) { border-bottom: 1px solid rgba(16,36,61,.08); }
}
@media (max-width: 520px) {
  .promise-strip, .allin-grid { grid-template-columns: 1fr; }
  .promise-strip div { border-inline-end: 0; border-bottom: 1px solid rgba(16,36,61,.08); }
  .allin { padding: 1.6rem 1.4rem; }
}

/* ==========================================================================
   Arabic / RTL
   The layout mirrors on its own — every directional property above is logical.
   What Arabic needs beyond that is typographic.
   ========================================================================== */
[dir="rtl"] {
  /* Dubai and Segoe UI carry good Arabic on Windows; SF Arabic and Geeza Pro
     on Apple; Noto Naskh elsewhere. Tahoma is the long-standing fallback. */
  --font: "Dubai", "Segoe UI", system-ui, "Noto Naskh Arabic", "Geeza Pro", Tahoma, Arial, sans-serif;
}
[dir="rtl"] body { line-height: 1.9; }

/* Negative tracking damages the cursive joins in Arabic, and capitalisation
   has no meaning in a script with no letter case. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: normal; line-height: 1.45; }
[dir="rtl"] .brand-word { letter-spacing: normal; }
[dir="rtl"] .eyebrow,
[dir="rtl"] .tier-kicker,
[dir="rtl"] .tier-from,
[dir="rtl"] .pill,
[dir="rtl"] .tier-badge,
[dir="rtl"] .promise-strip div { letter-spacing: normal; text-transform: none; }
[dir="rtl"] .stat-num { letter-spacing: normal; }

/* The brand mark and the wordmark stay latin and stay in reading order. */
[dir="rtl"] .brand-word { font-family: var(--font); }

/* Mirror the hero glows so the light still falls from the reading side. */
[dir="rtl"] .hero {
  background:
    radial-gradient(1100px 500px at 15% -10%, rgba(56,214,224,.22), transparent 60%),
    radial-gradient(800px 500px at 95% 110%, rgba(18,163,190,.28), transparent 55%),
    linear-gradient(200deg, var(--navy-3) 0%, var(--navy) 55%, var(--navy-2) 100%);
}

/* ------------------------- Language switcher ------------------------------ */
.lang-switch {
  font-size: .85rem; font-weight: 650; color: var(--navy);
  border: 1.5px solid rgba(16,36,61,.18); border-radius: 999px;
  padding: .35rem .8rem; white-space: nowrap; line-height: 1.4;
}
.lang-switch:hover { border-color: var(--teal); color: var(--teal-dark); text-decoration: none; }
.mobile-nav .lang-switch { display: inline-block; width: fit-content; margin-top: .5rem; }
.footer-nav .lang-switch { color: rgba(255,255,255,.78); border-color: rgba(255,255,255,.3); }
.footer-nav .lang-switch:hover { color: #fff; border-color: #fff; }

/* ------------------------------ CDM module -------------------------------
   Dark band for the add-on. It sits between Features (grey) and How it works
   (white), so the page keeps alternating, and it reads as an extension to the
   core product rather than more of the same. The white feature cards are
   reused unchanged, which is why the band sets no text colour of its own:
   the card titles inherit theirs and would turn white on white. */
.section-dark { background: linear-gradient(160deg, var(--navy-3), var(--navy) 60%, var(--navy-2)); }
.section-dark h2 { color: #fff; }
.section-dark .eyebrow { color: var(--cyan); }
.section-dark .section-sub { color: rgba(255,255,255,.8); }
.cdm-cta { text-align: center; margin: 2.5rem 0 0; }

/* ------------------------------ Status page -------------------------------
   Colours are deliberately separate from the brand palette: teal is the brand,
   and a status page must not use it for "good", or the page stops reading as a
   signal. Dots take their colour from the row via currentColor, so a row has
   exactly one state class. */
.status-wrap { max-width: 44rem; margin-inline: auto; }

.status-banner { display: flex; align-items: center; gap: .9rem; padding: 1.4rem 1.5rem; border-radius: var(--radius); border: 2px solid; font-size: 1.15rem; font-weight: 700; }
.status-banner .status-dot { width: 14px; height: 14px; }
.status-banner.is-ok { color: #0E6B46; background: #E8F6F0; border-color: #0E6B4633; }
.status-banner.is-warn { color: #8A5200; background: #FDF4E6; border-color: #8A520033; }
.status-banner.is-down { color: #A32A26; background: #FBECEB; border-color: #A32A2633; }
.status-banner.is-unknown,
.status-banner.is-checking { color: var(--slate); background: var(--grey); border-color: rgba(16,36,61,.12); }

.status-list { list-style: none; padding: 0; margin: 1.25rem 0 0; border: 1px solid rgba(16,36,61,.1); border-radius: var(--radius); overflow: hidden; }
.status-row { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(16,36,61,.08); background: #fff; }
.status-row:last-child { border-bottom: 0; }
.status-name { font-weight: 650; color: var(--ink); }
.status-state { margin-inline-start: auto; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

.status-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: currentColor; }
.status-row.is-operational { color: #0E6B46; }
.status-row.is-degraded { color: #8A5200; }
.status-row.is-down { color: #A32A26; }
.status-row.is-unknown { color: var(--slate); }

.status-checked { margin: 1rem 0 0; font-size: .9rem; color: var(--slate); }
.status-note { margin: 1.5rem 0 0; font-size: .92rem; color: var(--slate); }
.status-demo { margin: 0 0 1rem; padding: .7rem 1rem; border-radius: var(--radius-sm); background: #FDF4E6; color: #8A5200; font-size: .9rem; font-weight: 650; }

@media (max-width: 520px) {
  .status-banner { font-size: 1rem; padding: 1.1rem 1.1rem; }
  .status-row { flex-wrap: wrap; }
  .status-state { margin-inline-start: 0; width: 100%; padding-inline-start: 1.85rem; }
}