/* dots marketing site. Tokens and components from docs/design/website/flows.md.
   Logical properties only, so Arabic needs just dir="rtl" on <html>. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
}

:root {
  --c-ink: #0F172A;
  --c-body: #334155;
  --c-muted: #475569;
  --c-brand-500: #587EEA;
  --c-brand-700: #3557C8;
  --c-brand-800: #2D4BB0;
  --c-brand-50: #E9EEFC;
  --c-mint-400: #46FECA;
  --c-mint-700: #0B6E57;
  --c-mint-50: #E8FFF8;
  --c-navy: #0E1A3D;
  --c-navy-text: #C5CEE6;
  --c-navy-link: #A9B6E8;
  --c-surface: #F4F6FD;
  --c-bg: #FFFFFF;
  --c-border: #D5DCEB;
  --c-field: #7A859C;
  --c-error: #B42318;
  --c-error-bg: #FEF3F2;
  --c-success: #067647;
  --c-success-bg: #ECFDF3;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-sm: 0.875rem;
  --fs-lead: 1.125rem;
  --fs-h4: 1.25rem;
  --fs-h3: 1.5rem;
  --fs-h2: 1.875rem;
  --fs-h2-lg: 2.375rem;
  --fs-h1: clamp(2.25rem, 5vw, 3.25rem);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --r-input: 6px; --r-btn: 10px; --r-card: 16px; --r-chip: 999px;
  --shadow-sm: 0 1px 2px rgb(15 23 42 / .06);
  --shadow-md: 0 8px 24px rgb(15 23 42 / .08);
  --ease: 180ms ease-out;
  --header-h: 4.5rem;
  --gutter: 16px;
}

@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 960px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: calc(var(--header-h) + var(--s4));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-body);
  background: var(--c-bg);
}

body.menu-open { overflow: hidden; }
main:focus { outline: none; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 { color: var(--c-ink); line-height: 1.2; margin: 0 0 var(--s4); font-weight: 700; }
h1 { font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h4); font-weight: 650; }
@media (min-width: 960px) { h2 { font-size: var(--fs-h2-lg); } }

p { margin: 0 0 var(--s4); max-width: 68ch; }
p:last-child { margin-block-end: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--c-brand-700); text-underline-offset: 0.18em; transition: color var(--ease); }
a:hover { color: var(--c-brand-800); }

:focus-visible { outline: 2px solid var(--c-brand-700); outline-offset: 2px; border-radius: 2px; }
.on-navy :focus-visible { outline-color: var(--c-mint-400); }

.visually-hidden {
  position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.container { inline-size: 100%; max-inline-size: calc(1200px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; inset-block-start: var(--s2); inset-inline-start: var(--s2); z-index: 100;
  padding: var(--s3) var(--s4); background: var(--c-bg); color: var(--c-brand-700); font-weight: 600;
  border-radius: var(--r-btn); box-shadow: var(--shadow-md);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-block-size: 48px; padding: var(--s3) var(--s5);
  font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center;
  border: 2px solid transparent; border-radius: var(--r-btn); cursor: pointer;
  transition: background-color var(--ease), color var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.btn svg { inline-size: 20px; block-size: 20px; flex: none; }
.btn--sm { min-block-size: 44px; padding: var(--s2) var(--s4); font-size: var(--fs-sm); }
.btn--primary { background: var(--c-brand-700); color: #fff; }
.btn--primary:hover { background: var(--c-brand-800); color: #fff; }
.btn--primary:active { background: var(--c-brand-800); box-shadow: inset 0 2px 4px rgb(15 23 42 / .25); }
.btn--secondary { background: var(--c-bg); color: var(--c-brand-700); border-color: var(--c-brand-700); }
.btn--secondary:hover { background: var(--c-brand-50); color: var(--c-brand-800); border-color: var(--c-brand-800); }
.btn--secondary:active { background: var(--c-brand-50); box-shadow: inset 0 2px 4px rgb(15 23 42 / .12); }
.btn--on-navy { background: var(--c-mint-400); color: var(--c-ink); }
.btn--on-navy:hover { background: #fff; color: var(--c-ink); }
.btn--on-navy:active { background: var(--c-mint-50); }
.btn[disabled], .btn[aria-busy="true"] { cursor: progress; opacity: .85; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block-start: var(--s5); }

.text-link { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; text-decoration: none; min-block-size: 44px; }
.text-link svg { inline-size: 20px; block-size: 20px; transition: transform var(--ease); }
.text-link:hover { text-decoration: underline; }
.text-link:hover svg { transform: translateX(3px); }
[dir="rtl"] .text-link svg, [dir="rtl"] .flip-rtl { transform: scaleX(-1); }
[dir="rtl"] .text-link:hover svg { transform: scaleX(-1) translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: rgb(255 255 255 / .96); border-block-end: 1px solid var(--c-border);
}
.site-header__bar { display: flex; align-items: center; gap: var(--s3); min-block-size: var(--header-h); flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; min-block-size: 44px; margin-inline-end: auto; }
.logo img { inline-size: 92px; block-size: auto; }
.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); }
.site-nav a {
  display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: var(--s3);
  color: var(--c-ink); font-weight: 500; text-decoration: none;
  border-block-end: 2px solid transparent;
}
.site-nav a:hover { color: var(--c-brand-700); }
.site-nav a[aria-current="page"] { color: var(--c-brand-700); border-block-end-color: var(--c-brand-700); }
.menu-button {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 44px; block-size: 44px; padding: 0; border: 1px solid var(--c-field); border-radius: var(--r-btn);
  background: var(--c-bg); color: var(--c-ink); cursor: pointer;
}
.menu-button[hidden] { display: none; }
.menu-button svg { inline-size: 24px; block-size: 24px; }
.menu-button .icon-close { display: none; }
.menu-button[aria-expanded="true"] .icon-open { display: none; }
.menu-button[aria-expanded="true"] .icon-close { display: block; }

/* No JS, small screens: nav is a wrapped row under the bar. */
.site-nav { order: 3; inline-size: 100%; padding-block-end: var(--s2); }

/* JS, small screens: nav becomes a panel toggled by the menu button. */
@media (max-width: 959.98px) {
  .js .site-nav {
    display: none; position: absolute; inset-inline: 0; inset-block-start: 100%;
    padding: var(--s3) var(--gutter) var(--s5); background: var(--c-bg);
    border-block-end: 1px solid var(--c-border); box-shadow: var(--shadow-md);
    max-block-size: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .js .site-nav.is-open { display: block; }
  .js .site-nav ul { flex-direction: column; }
  .js .site-nav a { inline-size: 100%; min-block-size: 48px; font-size: var(--fs-lead); }
}

@media (min-width: 960px) {
  .site-header__bar { flex-wrap: nowrap; gap: var(--s5); }
  .logo { margin-inline-end: 0; }
  .logo img { inline-size: 110px; }
  .site-nav { order: 0; inline-size: auto; padding: 0; margin-inline-start: auto; }
  .menu-button { display: none; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--s8); }
.section--surface { background: var(--c-surface); }
.section--tint { background: var(--c-brand-50); }
@media (min-width: 960px) { .section { padding-block: var(--s9); } }

.eyebrow {
  display: inline-block; margin: 0 0 var(--s3); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--c-brand-700);
}
.lead { font-size: var(--fs-lead); color: var(--c-body); }
.section-header { max-inline-size: 68ch; margin-block-end: var(--s7); }
.section-header--center { margin-inline: auto; text-align: center; }
.section-header--center p { margin-inline: auto; }
.section-footer { margin-block-start: var(--s6); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: fade-up linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
}
@keyframes fade-up { from { transform: translateY(12px); } to { transform: none; } }

/* ---------- Hero ---------- */
.hero { padding-block: var(--s7) var(--s8); background: linear-gradient(180deg, var(--c-surface), var(--c-bg)); }
.hero__grid { display: grid; gap: var(--s7); align-items: center; }
.hero h1 { max-inline-size: 24ch; }
.hero .lead { margin-block-start: var(--s4); }
.hero + .section { padding-block-start: var(--s7); }
@media (min-width: 960px) {
  .hero { padding-block: var(--s9) var(--s8); }
  .hero__grid--split { grid-template-columns: 1fr 1.1fr; }
}

/* ---------- Split section ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-items: center; }
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s8); }
  .split--reverse > :first-child { order: 2; }
  .split--wide-visual { grid-template-columns: 1fr 1.4fr; }
}

/* ---------- Grids, cards, tiles ---------- */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); list-style: none; }
@media (min-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card {
  position: relative; display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s5); background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--r-card); box-shadow: var(--shadow-sm);
}
.card h3, .card h2 { margin: 0; }
.card p { margin: 0; }
.card--link { transition: box-shadow var(--ease), border-color var(--ease); }
.card--link:hover { box-shadow: var(--shadow-md); border-color: var(--c-brand-500); }
.card--link h3 a { color: var(--c-ink); text-decoration: none; }
.card--link h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.card--link h3 a:hover { color: var(--c-brand-700); text-decoration: underline; }
.card--link:has(a:focus-visible) { outline: 2px solid var(--c-brand-700); outline-offset: 2px; }
.card--link h3 a:focus-visible { outline: none; }

.icon-badge {
  display: inline-flex; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px;
  border-radius: 12px; background: var(--c-brand-50); color: var(--c-brand-700);
}
.icon-badge svg { inline-size: 24px; block-size: 24px; }
.tile__visual { margin-block-end: var(--s2); }

/* ---------- Step list ---------- */
.steps { list-style: none; counter-reset: step; display: grid; gap: var(--s5); }
.steps li { counter-increment: step; position: relative; padding-inline-start: 56px; }
.steps li::before {
  content: counter(step); position: absolute; inset-inline-start: 0; inset-block-start: 0;
  display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%;
  background: var(--c-mint-50); color: var(--c-mint-700); font-weight: 700; border: 2px solid var(--c-mint-400);
}
.steps h3 { margin-block-end: var(--s1); padding-block-start: 6px; }
.steps p { margin: 0; }
@media (min-width: 960px) {
  .steps--row { grid-template-columns: repeat(4, 1fr); }
  .steps--row li { padding-inline-start: 0; padding-block-start: 56px; }
}

/* ---------- Chips ---------- */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s1) var(--s3);
  border-radius: var(--r-chip); background: var(--c-brand-50); color: var(--c-ink);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.5;
}
.chip svg { inline-size: 16px; block-size: 16px; }
.chip--ok { background: var(--c-success-bg); color: var(--c-success); }
.chip--risk { background: var(--c-error-bg); color: var(--c-error); }
.chip--lg { padding: var(--s2) var(--s4); font-size: 1rem; }

/* ---------- Product mockups (HTML/CSS illustrations) ---------- */
.mockup {
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-card);
  box-shadow: var(--shadow-md); overflow: hidden; color: var(--c-ink); font-size: var(--fs-sm); line-height: 1.4;
}
.mockup__chrome {
  display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4);
  background: var(--c-surface); border-block-end: 1px solid var(--c-border);
}
.mockup__dots { display: flex; gap: 6px; }
.mockup__dots span { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--c-border); }
.mockup__brand { margin-inline-start: var(--s2); font-weight: 700; color: var(--c-brand-700); }
.mockup__body { padding: var(--s4); }
.mockup__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-block-end: var(--s4); }
.mockup__title strong { font-size: 1rem; }
.mockup__meta { color: var(--c-muted); margin-inline-start: auto; }
.mockup img { inline-size: 100%; }
.mockup--shot { background: var(--c-surface); }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-block-end: var(--s3); }
.kpi { padding: var(--s3); border: 1px solid var(--c-border); border-radius: 10px; }
.kpi span { display: block; color: var(--c-muted); }
.kpi strong { display: block; font-size: var(--fs-h4); }
.charts { display: grid; gap: var(--s2); grid-template-columns: 1.4fr 1fr; }
.chart { padding: var(--s3); border: 1px solid var(--c-border); border-radius: 10px; }
.chart > span { display: block; margin-block-end: var(--s2); color: var(--c-muted); }
.chart svg { inline-size: 100%; block-size: auto; }
@media (max-width: 479.98px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpis .kpi:last-child { grid-column: span 2; }
  .charts { grid-template-columns: 1fr; }
}

.pipeline { list-style: none; display: grid; gap: var(--s2); justify-items: center; }
.pipeline li { display: contents; }
.pipeline__node {
  display: flex; align-items: center; gap: var(--s3); inline-size: min(100%, 280px);
  padding: var(--s3) var(--s4); background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: 12px; box-shadow: var(--shadow-sm); font-weight: 600; color: var(--c-ink);
}
.pipeline__node svg { inline-size: 24px; block-size: 24px; color: var(--c-brand-500); flex: none; }
.pipeline__arrow { color: var(--c-brand-500); transform: rotate(90deg); }
.pipeline__arrow svg { inline-size: 24px; block-size: 24px; }
@media (min-width: 960px) {
  .pipeline { grid-auto-flow: column; justify-content: center; align-items: center; }
  .pipeline__node { inline-size: auto; }
  .pipeline__arrow { transform: none; }
  .hero .pipeline { justify-content: start; }
  [dir="rtl"] .pipeline__arrow { transform: scaleX(-1); }
}
.pipeline-wrap { margin-block-end: var(--s7); }

.pivot { display: grid; grid-template-columns: minmax(0, 9rem) 1fr; gap: var(--s3); }
.pivot__fields { list-style: none; display: flex; flex-wrap: wrap; flex-direction: column; gap: var(--s2); align-content: start; }
.pivot__fields li { padding: var(--s1) var(--s2); border: 1px dashed var(--c-field); border-radius: var(--r-input); }
.pivot table { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pivot th, .pivot td { padding: var(--s1) var(--s2); border: 1px solid var(--c-border); text-align: end; }
.pivot th { background: var(--c-surface); font-weight: 600; }
.pivot th:first-child { text-align: start; }
.mockup__actions { display: flex; justify-content: flex-end; margin-block-start: var(--s3); }
.fake-btn { display: inline-block; padding: var(--s1) var(--s3); border-radius: 8px; background: var(--c-brand-700); color: #fff; font-weight: 600; }
@media (max-width: 959.98px) { .pivot { grid-template-columns: minmax(0, 1fr); } .pivot__fields { flex-direction: row; } }
@media (max-width: 479.98px) { .pivot th, .pivot td { padding-inline: var(--s1); } }

.scorecard { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: center; }
.ring { position: relative; inline-size: 88px; block-size: 88px; }
.ring svg { inline-size: 88px; block-size: 88px; transform: rotate(-90deg); }
.ring strong { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-h4); }
.perspectives { list-style: none; display: grid; gap: var(--s2); }
.perspectives li { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s2); align-items: center; }
.bar { grid-column: 1 / -1; block-size: 6px; border-radius: 3px; background: var(--c-surface); overflow: hidden; }
.bar span { display: block; block-size: 100%; background: var(--c-brand-500); border-radius: 3px; }
@media (max-width: 959.98px) { .scorecard { grid-template-columns: 1fr; justify-items: center; } .perspectives { inline-size: 100%; } }
.chip { white-space: nowrap; }
.bar .w-58 { inline-size: 58%; } .bar .w-76 { inline-size: 76%; } .bar .w-81 { inline-size: 81%; } .bar .w-84 { inline-size: 84%; }

.mdm table { inline-size: 100%; border-collapse: collapse; }
.mdm th, .mdm td { padding: var(--s1) var(--s2); border-block-end: 1px solid var(--c-border); text-align: start; }
.mdm th { color: var(--c-muted); font-weight: 600; }

.schema { display: grid; gap: var(--s2); max-inline-size: 18rem; }
.schema__select { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--c-field); border-radius: var(--r-input); font-weight: 600; }
.schema__select svg { inline-size: 16px; block-size: 16px; }
.schema__select .lock { color: var(--c-brand-500); }
.schema__select .chev { margin-inline-start: auto; }
.schema ul { list-style: none; border: 1px solid var(--c-border); border-radius: var(--r-input); box-shadow: var(--shadow-sm); }
.schema li { padding: var(--s2) var(--s3); display: flex; justify-content: space-between; }
.schema li[aria-current], .schema li.is-active { background: var(--c-brand-50); font-weight: 600; }
.schema li svg { inline-size: 16px; block-size: 16px; color: var(--c-mint-700); }

.deploy { display: grid; gap: var(--s3); justify-items: center; text-align: center; }
.deploy__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); inline-size: 100%; }
.deploy__card { display: grid; justify-items: center; gap: var(--s1); padding: var(--s3); border: 1px solid var(--c-border); border-radius: 12px; font-weight: 600; }
.deploy__card svg { inline-size: 28px; block-size: 28px; color: var(--c-brand-500); }
.deploy__store { inline-size: 100%; padding: var(--s3); border-radius: 12px; background: var(--c-brand-50); font-weight: 700; }
.deploy__arrow { display: flex; flex-direction: column; align-items: center; color: var(--c-mint-700); font-weight: 600; }
.deploy__arrow svg { inline-size: 24px; block-size: 24px; }
.deploy__db { inline-size: 100%; padding: var(--s3); border: 1px dashed var(--c-field); border-radius: 12px; color: var(--c-muted); font-weight: 600; }
.down svg { transform: rotate(90deg); }
.up svg { transform: rotate(-90deg); }

.widgets { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
@media (min-width: 480px) { .widgets { grid-template-columns: repeat(4, 1fr); } }
.widgets li { display: grid; justify-items: center; gap: var(--s1); padding: var(--s3) var(--s1); border: 1px solid var(--c-border); border-radius: 10px; text-align: center; }
.widgets svg { inline-size: 24px; block-size: 24px; color: var(--c-brand-500); }

/* ---------- Video facade ---------- */
.video { position: relative; max-inline-size: 960px; margin-inline: auto; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: var(--c-navy); box-shadow: var(--shadow-md); }
.video img, .video iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; object-fit: cover; }
.video__play {
  position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; color: var(--c-ink);
  background: rgb(14 26 61 / .25); transition: background-color var(--ease);
}
.video__play:hover { background: rgb(14 26 61 / .4); }
.video__play:focus-visible { outline: 3px solid var(--c-brand-700); outline-offset: -6px; }
.video__btn {
  display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s5);
  border-radius: var(--r-chip); background: var(--c-mint-400); font-weight: 700; box-shadow: var(--shadow-md);
}
.video__btn svg { inline-size: 24px; block-size: 24px; fill: currentColor; }
.video__spinner {
  display: none; position: absolute; inset: 0; margin: auto; inline-size: 48px; block-size: 48px;
  border: 4px solid rgb(255 255 255 / .4); border-block-start-color: var(--c-mint-400); border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
.video[aria-busy="true"] .video__spinner { display: block; }
@media (prefers-reduced-motion: reduce) { .video__spinner { animation-duration: 2.4s; } }
@keyframes spin { to { transform: rotate(360deg); } }
.video-note { margin: var(--s3) auto 0; max-inline-size: 960px; text-align: center; color: var(--c-muted); font-size: var(--fs-sm); }
.video-error { text-align: center; margin-block-start: var(--s3); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--c-navy); color: var(--c-navy-text); padding-block: var(--s8); text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p, .cta-band .lead { margin-inline: auto; color: var(--c-navy-text); }
.cta-band .btn-row { justify-content: center; align-items: center; }
.cta-band a:not(.btn) { color: var(--c-navy-link); }
.cta-band a:not(.btn):hover { color: #fff; }
@media (min-width: 960px) { .cta-band { padding-block: var(--s9); } }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-navy); color: var(--c-navy-text); padding-block: var(--s7) var(--s5); border-block-start: 1px solid rgb(255 255 255 / .12); }
.site-footer a { color: var(--c-navy-link); }
.site-footer a:hover { color: #fff; }
.footer__grid { display: grid; gap: var(--s6); }
@media (min-width: 640px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__grid > :first-child { grid-column: 1 / -1; } }
@media (min-width: 960px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; } .footer__grid > :first-child { grid-column: auto; } }
.footer__tag { color: #fff; font-weight: 600; margin-block: var(--s3) var(--s1); }
.footer__list { list-style: none; display: grid; gap: 0; }
.footer__list a { display: inline-flex; align-items: center; gap: var(--s2); min-block-size: 44px; text-decoration: none; }
.footer__list a:hover { text-decoration: underline; }
.footer__list svg { inline-size: 20px; block-size: 20px; flex: none; }
.footer__heading { color: #fff; font-size: 1rem; margin-block-end: var(--s2); }
.footer__legal { max-inline-size: none; margin-block-start: var(--s6); padding-block-start: var(--s4); border-block-start: 1px solid rgb(255 255 255 / .12); font-size: var(--fs-sm); }
.site-footer .logo img { inline-size: 110px; }

/* ---------- Info list (About / Contact) ---------- */
.info-list { list-style: none; display: grid; gap: var(--s2); }
.info-list li { display: flex; align-items: center; gap: var(--s3); min-block-size: 44px; }
.info-list a { display: inline-flex; align-items: center; min-block-size: 44px; }
.info-list svg { inline-size: 24px; block-size: 24px; color: var(--c-brand-700); flex: none; }

/* ---------- Form ---------- */
.contact-grid { display: grid; gap: var(--s7); }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1.5fr 1fr; gap: var(--s8); align-items: start; } }
.form-card { padding: var(--s5); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-card); box-shadow: var(--shadow-md); }
@media (min-width: 640px) { .form-card { padding: var(--s6); } }
.field { margin-block-end: var(--s5); }
.field label, .field legend { display: block; margin-block-end: var(--s1); font-weight: 600; color: var(--c-ink); }
.field .optional { font-weight: 400; color: var(--c-muted); }
.hint { margin: 0 0 var(--s2); color: var(--c-muted); font-size: var(--fs-sm); }
fieldset.field { border: 0; padding: 0; margin-inline: 0; min-inline-size: 0; }
.field input[type="text"], .field input[type="email"], .field textarea {
  display: block; inline-size: 100%; min-block-size: 48px; padding: var(--s3); font: inherit; color: var(--c-ink);
  background: var(--c-bg); border: 1px solid var(--c-field); border-radius: var(--r-input);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.field textarea { min-block-size: 8rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--c-brand-700); outline-offset: 2px; border-color: var(--c-brand-700); }
.field [aria-invalid="true"] { border-color: var(--c-error); border-width: 2px; }
.field input[readonly], .field textarea[readonly] { background: var(--c-surface); }
.choices { display: grid; gap: var(--s2); }
@media (min-width: 640px) { .choices { grid-template-columns: 1fr 1fr; } }
.field .choice { display: flex; margin: 0; align-items: center; gap: var(--s3); min-block-size: 48px; padding-inline: var(--s3); border: 1px solid var(--c-field); border-radius: var(--r-input); cursor: pointer; font-weight: 500; color: var(--c-ink); }
.choice:has(input:checked) { border-color: var(--c-brand-700); background: var(--c-brand-50); }
.choice:has(input:focus-visible) { outline: 2px solid var(--c-brand-700); outline-offset: 2px; }
.choice input { inline-size: 20px; block-size: 20px; margin: 0; accent-color: var(--c-brand-700); }
fieldset[aria-invalid="true"] .choice { border-color: var(--c-error); }
.field-error { display: flex; gap: var(--s2); align-items: flex-start; margin: var(--s2) 0 0; color: var(--c-error); font-weight: 600; font-size: var(--fs-sm); }
.field-error svg, .banner svg { inline-size: 20px; block-size: 20px; flex: none; }
.field-error[hidden], .banner[hidden] { display: none; }
.honeypot { position: absolute; inset-inline-start: -10000px; }
.privacy { margin-block-start: var(--s3); color: var(--c-muted); font-size: var(--fs-sm); }

.banner { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); margin-block-end: var(--s5); border-radius: 10px; border: 1px solid currentColor; }
.banner p { margin: 0; color: var(--c-ink); }
.banner--error { background: var(--c-error-bg); color: var(--c-error); }
.banner--error h2 { font-size: 1rem; color: var(--c-error); margin-block-end: var(--s2); }
.banner--error ul { list-style: none; display: grid; gap: var(--s1); }
.banner--error a { color: var(--c-error); font-weight: 600; }
.banner--success { background: var(--c-success-bg); color: var(--c-success); }
.form-success h2 { display: flex; gap: var(--s3); align-items: center; font-size: var(--fs-h3); }
.form-success h2 svg { inline-size: 28px; block-size: 28px; color: var(--c-success); flex: none; }
.form-success h2:focus { outline: none; }
.form-success h2:focus-visible { outline: 2px solid var(--c-brand-700); }

.side-panel { display: grid; gap: var(--s6); }
.side-panel h2 { font-size: var(--fs-h4); margin-block-end: var(--s2); }
.side-panel .steps { gap: var(--s3); }
.side-panel .steps li { padding-inline-start: 48px; min-block-size: 36px; padding-block-start: 6px; }
.side-panel .steps li::before { inline-size: 32px; block-size: 32px; font-size: var(--fs-sm); }

.page-simple { min-block-size: 50vh; display: grid; align-content: center; }
.card h2 { font-size: var(--fs-h4); font-weight: 650; }