/* ==========================================================================
   أوج · المنتجات الرقمية — Design 4 (/v4)
   Visual language of the Google Stitch proposal («Sovereign Impact» DESIGN.md):
   navy anchors, red reserved for the main call to action, white / pale sky planes,
   1px hairlines instead of shadows, 4px corners on controls and 8px on panels, no pills.
   Loaded after site.css (shared components: viewer, form fields, screenshot grid).
   ========================================================================== */

/* Layout: hero · logos tiles · goals grid · 6 product sections (one template) · navy band ·
   steps cards + what you get · centred form card · navy footer. */
:root[data-design="v4"],
:root[data-design="v4"][data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F3F9FD;
  --line: #DDE5EC;
  --line-strong: #C3C6D0;
  --heading: #003059;
  --text: #373737;
  --muted: #5F6B76;
  --accent: #003059;
  --accent-rgb: 0 48 89;
  --nav-bg: rgba(255, 255, 255, .95);
  --input-bg: #FFFFFF;
  --modal-bg: #FFFFFF;
  --shadow: 0 1px 2px rgba(0, 48, 89, .05);
  --shadow-lg: 0 4px 16px -2px rgba(0, 48, 89, .08);

  --s-tint: #F3F9FD;
  --s-band: #003059;
  --s-btn: #003059;
  --s-btn-hover: #002240;
  --s-btn-text: #FFFFFF;
  --s-cta: #ED4E38;
  --s-cta-hover: #D93D28;
  --s-radius: 4px;
  --s-radius-lg: 8px;
  --s-gap: clamp(56px, 7vw, 88px);
}

:root[data-design="v4"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1B2B;
  --surface: #112437;
  --surface-2: #142B41;
  --line: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .2);
  --heading: #FFFFFF;
  --text: #D9E4EF;
  --muted: #9AAEC2;
  --accent: #98D8F6;
  --accent-rgb: 152 216 246;
  --nav-bg: rgba(11, 27, 43, .95);
  --input-bg: #0B1B2B;
  --modal-bg: #0F2236;
  --s-tint: #0F2236;
  --s-band: #0F2E4D;
  --s-btn: #98D8F6;
  --s-btn-hover: #B9E4F9;
  --s-btn-text: #061A2E;
}

/* ---------- Base ---------- */
[data-design="v4"] body { background: var(--bg); }

/* Short pages (404): keep the footer at the bottom of the screen */
[data-design="v4"] body { display: flex; flex-direction: column; min-block-size: 100vh; }
[data-design="v4"] main { flex: 1 0 auto; }
[data-design="v4"] body::before { display: none; }
[data-design="v4"] .wrap { max-inline-size: 1280px; }

[data-design="v4"] :focus-visible {
  outline: 2px solid #98D8F6;
  outline-offset: 2px;
  border-radius: var(--s-radius);
}

/* ---------- Buttons and links ---------- */
[data-design="v4"] .s-btn,
[data-design="v4"] .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border: 0;
  border-radius: var(--s-radius);
  background: var(--s-btn);
  color: var(--s-btn-text);
  font-family: var(--f-head);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}

[data-design="v4"] .s-btn:hover,
[data-design="v4"] .btn:hover { background: var(--s-btn-hover); transform: none; box-shadow: none; filter: none; }

[data-design="v4"] .s-btn--red { padding: 13px 30px; background: var(--s-cta); color: #FFFFFF; font-size: 1.05rem; }
[data-design="v4"] .s-btn--red:hover { background: var(--s-cta-hover); }

[data-design="v4"] .s-link,
[data-design="v4"] .s-toplink {
  color: var(--heading);
  font-family: var(--f-head);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
  transition: text-decoration-color .2s var(--ease);
}

[data-design="v4"] .s-link:hover,
[data-design="v4"] .s-toplink:hover { text-decoration-color: var(--heading); }

[data-design="v4"] .s-toplink { text-decoration: none; font-weight: 600; font-size: .95rem; }

/* ---------- Type ---------- */
[data-design="v4"] .s-h2 {
  margin-block-end: clamp(32px, 4vw, 48px);
  color: var(--heading);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.4;
  text-wrap: balance;
}

[data-design="v4"] .s-h2--center { text-align: center; }

[data-design="v4"] .s-h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 22px;
  color: var(--heading);
  font-size: 1.2rem;
  font-weight: 700;
}

[data-design="v4"] .s-h3::before {
  content: "";
  flex: none;
  inline-size: 6px;
  block-size: 24px;
  border-radius: 3px;
  background: var(--s-btn);
}

[data-design="v4"] .s-h3--pc::before { background: var(--pc); }

/* ---------- Sections ---------- */
[data-design="v4"] .s-section { padding-block: var(--s-gap); }
[data-design="v4"] .s-section--tint { background: var(--s-tint); border-block-start: 1px solid var(--line); }

/* ---------- Sticky bar: logo | products | quick links ---------- */
[data-design="v4"] .topnav {
  border-block-end: 1px solid var(--line);
  background: var(--nav-bg);
  box-shadow: 0 2px 12px rgba(0, 48, 89, .03);
}

[data-design="v4"] .brand {
  padding-inline-end: 20px;
  border-inline-end: 1px solid var(--line);
}

[data-design="v4"] .navlinks {
  flex: 1 1 auto;
  justify-content: flex-start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

[data-design="v4"] .navlinks a {
  position: relative;
  border-radius: var(--s-radius);
  color: var(--muted);
  font-family: var(--f-body);
  font-weight: 500;
}

[data-design="v4"] .navlinks a:hover { background: transparent; color: var(--heading); }

[data-design="v4"] .nav-product::before { border-radius: 50%; inline-size: 10px; block-size: 10px; }

[data-design="v4"] .navlinks a.is-active {
  background: transparent;
  color: var(--heading);
  font-weight: 600;
}

[data-design="v4"] .navlinks a.is-active::after {
  content: "";
  position: absolute;
  inset-inline: 8px;
  inset-block-end: -11px;
  block-size: 2px;
  background: var(--s-cta);
}

[data-design="v4"] .navquick {
  display: flex;
  flex: none;
  align-items: center;
  gap: 16px;
  padding-inline-start: 18px;
  border-inline-start: 1px solid var(--line);
}

[data-design="v4"] .navquick a {
  color: var(--muted);
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

[data-design="v4"] .navquick a:hover,
[data-design="v4"] .navquick a.is-active { color: var(--heading); }

[data-design="v4"] .navquick .navquick-btn,
[data-design="v4"] .navquick .navquick-btn.is-active {
  padding: 6px 14px;
  border-radius: var(--s-radius);
  background: var(--s-btn);
  color: var(--s-btn-text);
  font-weight: 600;
}

[data-design="v4"] .theme-toggle {
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--s-radius);
  background: transparent;
}

@media (max-width: 768px) {
  [data-design="v4"] .brand { border: 0; padding: 0; }
  [data-design="v4"] .navquick { order: 3; inline-size: 100%; border: 0; padding: 0; }
}

/* ---------- Hero ---------- */
[data-design="v4"] .s-hero {
  border-block-end: 1px solid var(--line);
  background: var(--bg);
}

[data-design="v4"] .s-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 24px 0;
}

[data-design="v4"] .s-hero-copy {
  max-inline-size: calc(56rem + 2 * var(--gut));
  margin-inline-start: 0;
  padding-block: clamp(44px, 7vw, 96px) clamp(48px, 7vw, 88px);
}

[data-design="v4"] .s-hero h1 {
  margin-block-end: 22px;
  color: var(--heading);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.22;
  text-wrap: balance;
}

[data-design="v4"] .s-lead {
  max-inline-size: 42rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.6vw, 1.125rem);
  line-height: 1.9;
}

[data-design="v4"] .s-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-block-start: 36px;
}

/* ---------- Logos: tiles ---------- */
[data-design="v4"] .s-logos {
  padding-block: 40px 44px;
  border-block-end: 1px solid var(--line);
  background: var(--s-tint);
}

[data-design="v4"] .s-logos-title {
  margin-block-end: 26px;
  color: var(--muted);
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
}

[data-design="v4"] .s-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 10 logos: 2 per row on phones, 5 per row (two full rows) from tablet up. */
@media (min-width: 760px) { [data-design="v4"] .s-logo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

[data-design="v4"] .s-logo-grid > li {
  display: grid;
  place-items: center;
  min-block-size: 92px;
  padding: 14px 12px;
  border: 1px solid var(--line);
  border-radius: var(--s-radius-lg);
  background: var(--surface);
  text-align: center;
}

[data-design="v4"] .s-logo-grid .client-name {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--f-body);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.6;
}

/* Height-capped and width-capped, so square logos (e.g. وزارة الصحة) are not dwarfed by wide ones. */
[data-design="v4"] .s-logo-grid .client-logo {
  block-size: auto;
  inline-size: auto;
  max-block-size: 64px;
  max-inline-size: min(100%, 170px);
  padding: 0;
  border-radius: 0;
  background: none;
}

/* Tiles stay white so the logos read in the dark theme too. */
[data-design="v4"] .s-logo-grid > li { background: #FFFFFF; }

/* Product footer: each client logo in a small bordered box */
[data-design="v4"] .s-chips .client-logo {
  block-size: 34px;
  max-inline-size: 140px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--s-radius);
}

/* ---------- Goals ---------- */
[data-design="v4"] .s-goals {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) { [data-design="v4"] .s-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { [data-design="v4"] .s-goals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

[data-design="v4"] .s-goal {
  display: flex;
  align-items: center;
  gap: 16px;
  block-size: 100%;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--s-radius-lg);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

[data-design="v4"] .s-goal:hover { border-color: var(--pc); box-shadow: var(--shadow-lg); }

[data-design="v4"] .s-goal .tile {
  inline-size: 44px;
  block-size: 44px;
  border-radius: 6px;
  box-shadow: none;
}

[data-design="v4"] .s-goal .tile .icon { inline-size: 22px; block-size: 22px; }

[data-design="v4"] .s-goal-text { display: grid; flex: 1; gap: 2px; min-inline-size: 0; }

[data-design="v4"] .s-goal-q {
  color: var(--heading);
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.5;
}

[data-design="v4"] .s-goal-name { color: var(--muted); font-size: .88rem; }

[data-design="v4"] .s-goal-go {
  flex: none;
  color: var(--muted);
  font-size: 1.6rem;
  line-height: 1;
  transition: transform .2s var(--ease), color .2s var(--ease);
}

[data-design="v4"] .s-goal:hover .s-goal-go { color: var(--heading); transform: translateX(-4px); }

/* ---------- Product sections: one template ---------- */
[data-design="v4"] .s-product {
  padding-block: clamp(48px, 6vw, 80px);
  border-block-start: 4px solid var(--pc);
  background: var(--bg);
}

[data-design="v4"] .s-product:nth-of-type(odd) { background: var(--s-tint); }

[data-design="v4"] .s-product > .wrap {
  display: grid;
  gap: 24px;
}

[data-design="v4"] .s-product > .wrap > * { min-inline-size: 0; }

[data-design="v4"] .s-p-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
}

[data-design="v4"] .s-p-title { display: flex; align-items: center; gap: 16px; }

[data-design="v4"] .s-p-title .tile-big {
  inline-size: 56px;
  block-size: 56px;
  border-radius: var(--s-radius-lg);
  box-shadow: none;
}

[data-design="v4"] .s-p-title .tile-big .icon { inline-size: 28px; block-size: 28px; }

[data-design="v4"] .s-p-title h2 {
  color: var(--heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.4;
}

[data-design="v4"] .s-p-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }

[data-design="v4"] .s-p-desc {
  max-inline-size: 56rem;
  color: var(--text);
  font-size: 1.125rem;
  line-height: 1.95;
}

[data-design="v4"] .s-p-audience {
  max-inline-size: 48rem;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--pc);
  border-radius: var(--s-radius-lg);
  background: var(--surface);
}

[data-design="v4"] .s-p-audience h3 {
  margin-block-end: 4px;
  color: var(--heading);
  font-size: 1.05rem;
  font-weight: 700;
}

[data-design="v4"] .s-p-audience p { color: var(--text); }

[data-design="v4"] .s-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px 56px;
  padding: clamp(24px, 3.5vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--s-radius-lg);
  background: var(--surface);
}

@media (min-width: 1000px) { [data-design="v4"] .s-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

[data-design="v4"] .s-bullets {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-design="v4"] .s-bullets li {
  position: relative;
  padding-inline-start: 22px;
  color: var(--text);
  line-height: 1.8;
}

[data-design="v4"] .s-bullets li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .7em;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--pc);
}

/* Stepper: navy circles joined by a hairline, the last one red */
[data-design="v4"] .s-stepper {
  counter-reset: s;
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-design="v4"] .s-stepper li {
  counter-increment: s;
  position: relative;
  min-block-size: 32px;
  padding-block-start: 3px;
  padding-inline-start: 48px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.7;
}

[data-design="v4"] .s-stepper li::before {
  content: counter(s);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  background: var(--s-btn);
  color: var(--s-btn-text);
  font-size: .85rem;
  font-weight: 700;
}

[data-design="v4"] .s-stepper li:last-child::before { background: var(--s-cta); color: #FFFFFF; }

[data-design="v4"] .s-stepper li::after {
  content: "";
  position: absolute;
  inset-inline-start: 15px;
  inset-block: 34px -18px;
  inline-size: 2px;
  background: var(--line);
}

[data-design="v4"] .s-stepper li:last-child::after { display: none; }

/* Screenshots (shared _Screens partial) */
[data-design="v4"] .s-screens .screens + .screens { margin-block-start: 24px; }

[data-design="v4"] .s-screens .pm-title {
  margin-block-end: 14px;
  color: var(--heading);
  font-size: 1.1rem;
}

[data-design="v4"] .s-screens .pm-title::before {
  inline-size: 6px;
  block-size: 20px;
  border-radius: 3px;
  background: var(--pc);
  box-shadow: none;
}

/* 3 per row: 6 screens make two full rows, 5 make 3 + 2, 2 sit side by side. */
[data-design="v4"] .s-screens .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 559px) { [data-design="v4"] .shot-cap { padding: 8px; font-size: .8rem; } }

/* Two-column logo grid on phones: the odd last tile spans the row. */
@media (max-width: 559px) {
  [data-design="v4"] .s-logo-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 900px) { [data-design="v4"] .s-screens .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

[data-design="v4"] .shot {
  border-radius: var(--s-radius-lg);
  background: var(--surface);
  box-shadow: none;
}

[data-design="v4"] .shot:hover { transform: none; border-color: var(--pc); box-shadow: var(--shadow-lg); }

[data-design="v4"] .shot-n { border-radius: var(--s-radius); }

[data-design="v4"] .s-p-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding-block-start: 22px;
  border-block-start: 1px solid var(--line);
}

[data-design="v4"] .s-p-foot-label {
  color: var(--muted);
  font-size: .88rem;
  font-weight: 600;
}

[data-design="v4"] .s-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-design="v4"] .s-chips .client-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--s-radius);
  background: var(--surface);
  color: var(--text);
  font-family: var(--f-body);
  font-size: .85rem;
}

[data-design="v4"] .s-chips .client-name::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--pc);
}

/* ---------- Product pop-up ---------- */
[data-design="v4"] .s-modal {
  inline-size: min(1040px, 100% - 32px);
  border: 1px solid var(--line);
  border-radius: var(--s-radius-lg);
  background: var(--bg);
  box-shadow: 0 24px 64px -16px rgba(0, 48, 89, .35);
}

[data-design="v4"] .s-modal::backdrop { background: rgba(0, 33, 63, .55); }

[data-design="v4"] .s-modal .pmodal-close {
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid var(--line);
  border-radius: var(--s-radius);
  background: var(--surface);
  color: var(--heading);
}

[data-design="v4"] .s-modal .pmodal-close:hover { transform: none; background: var(--surface-2); }

[data-design="v4"] .s-product.s-product--modal {
  display: grid;
  gap: 24px;
  padding: clamp(24px, 4vw, 40px);
  background: var(--bg);
}

[data-design="v4"] .s-product--modal > * { min-inline-size: 0; }

/* Leave room for the close button at the top corner */
[data-design="v4"] .s-product--modal .s-p-head { padding-inline-end: 52px; }

[data-design="v4"] .s-p-goal {
  color: color-mix(in srgb, var(--pc) 62%, var(--heading));
  font-family: var(--f-head);
  font-weight: 600;
  font-size: .92rem;
}

[data-design="v4"][data-theme="dark"] .s-p-goal { color: var(--pc); }

[data-design="v4"] .s-product--modal .pager { margin-block-start: 4px; }

[data-design="v4"] .pager-link {
  border-radius: var(--s-radius-lg);
  background: var(--surface);
}

[data-design="v4"] .pager-link:hover { transform: none; border-color: var(--pc, var(--line-strong)); background: var(--surface); }

/* Phones: the pop-up fills the screen */
@media (max-width: 640px) {
  [data-design="v4"] .s-modal {
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: 100dvh;
    max-block-size: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  [data-design="v4"] .s-modal .pmodal-close { inset-block-start: 12px; inset-inline-end: 12px; }
}

/* ---------- What the products share: navy anchor band ---------- */
[data-design="v4"] .s-section--navy {
  background: var(--s-band);
  color: #CFDCE8;
}

[data-design="v4"] .s-section--navy .s-h2 { color: #FFFFFF; }

[data-design="v4"] .s-why {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) { [data-design="v4"] .s-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { [data-design="v4"] .s-why { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

[data-design="v4"] .s-why li {
  padding-block-start: 20px;
  border-block-start: 1px solid rgba(152, 216, 246, .55);
}

[data-design="v4"] .s-why h3 {
  margin-block-end: 8px;
  color: #FFFFFF;
  font-size: 1.12rem;
  font-weight: 700;
}

[data-design="v4"] .s-why p { color: #CFDCE8; font-size: .97rem; line-height: 1.9; }

/* ---------- Steps: cards with large numbers ---------- */
[data-design="v4"] .s-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) { [data-design="v4"] .s-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { [data-design="v4"] .s-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

[data-design="v4"] .s-steps li {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--s-radius-lg);
  background: var(--surface);
}

[data-design="v4"] .s-steps-n {
  display: block;
  margin-block-end: 12px;
  color: var(--heading);
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
}

[data-design="v4"] .s-steps li:last-child .s-steps-n { color: var(--s-cta); }

[data-design="v4"] .s-steps h3 {
  margin-block-end: 8px;
  color: var(--heading);
  font-size: 1.08rem;
  font-weight: 700;
}

[data-design="v4"] .s-steps p { color: var(--muted); font-size: .95rem; line-height: 1.85; }

/* What you get */
[data-design="v4"] .s-gets {
  display: grid;
  gap: 20px;
  margin-block-start: clamp(36px, 5vw, 56px);
  padding: clamp(24px, 3.5vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--s-radius-lg);
  background: var(--surface);
}

[data-design="v4"] .s-gets .s-h3 { margin: 0; }

[data-design="v4"] .s-gets ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) { [data-design="v4"] .s-gets ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

[data-design="v4"] .s-gets li {
  position: relative;
  padding-inline-start: 34px;
  line-height: 1.85;
}

[data-design="v4"] .s-gets li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 3px;
  display: grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  border-radius: var(--s-radius);
  background: rgba(0, 175, 169, .14);
  color: #00857F;
  font-size: .8rem;
  font-weight: 700;
}

[data-design="v4"] .s-gets strong { color: var(--heading); font-weight: 600; }
[data-design="v4"] .s-gets li span { color: var(--muted); }
[data-design="v4"] .s-gets .s-btn { justify-self: start; }

/* ---------- Interest form (shared partial): centred card ---------- */
[data-design="v4"] #interest {
  padding-block: var(--s-gap);
  border: 0;
  border-block-start: 1px solid var(--line);
  background: var(--bg);
}

[data-design="v4"] #interest .zrow {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 28px;
  padding: 0;
  border: 0;
}

[data-design="v4"] #interest .zrow-aside { max-inline-size: 40rem; text-align: center; }

[data-design="v4"] #interest .section-title {
  margin-block: 0 10px;
  color: var(--heading);
  font-size: clamp(1.6rem, 3vw, 2rem);
}

[data-design="v4"] #interest .lead { margin-inline: auto; }

[data-design="v4"] #interest .zrow-main { inline-size: 100%; max-inline-size: 56rem; }

[data-design="v4"] .iform.card {
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--s-radius-lg);
  background: var(--s-tint);
  box-shadow: none;
}

[data-design="v4"] .field input:not([type=checkbox]),
[data-design="v4"] .field textarea {
  min-block-size: 44px;
  border-color: var(--line);
  border-radius: var(--s-radius);
  background: var(--input-bg);
}

[data-design="v4"] .field input:not([type=checkbox]):focus,
[data-design="v4"] .field textarea:focus {
  border-color: var(--heading);
  box-shadow: 0 0 0 2px #98D8F6;
}

[data-design="v4"] .choice {
  border-color: var(--line);
  border-radius: var(--s-radius);
  background: var(--surface);
}

[data-design="v4"] .choice::before { box-shadow: none; }

[data-design="v4"] .choice:has(input:checked) {
  border-color: var(--pc);
  background: color-mix(in srgb, var(--pc) 12%, var(--surface));
}

[data-design="v4"] .send-note { color: var(--muted); font-size: .9rem; }

/* ---------- Product page (/Products/Details/{id}) ---------- */
[data-design="v4"] .s-detail {
  padding-block: 28px 72px;
  background: var(--s-tint);
}

[data-design="v4"] .s-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: .92rem;
}

[data-design="v4"] .s-crumbs a {
  color: var(--heading);
  text-underline-offset: 5px;
  text-decoration-color: var(--line-strong);
}

[data-design="v4"] .s-detail .s-product--modal {
  border: 1px solid var(--line);
  border-block-start: 4px solid var(--pc);
  border-radius: var(--s-radius-lg);
}

/* No close button on this page, so the header needs no reserved corner */
[data-design="v4"] .s-detail .s-p-head { padding-inline-end: 0; }

/* ---------- Photo backgrounds (Awj imagery, wwwroot/img/bg) ---------- */

/* Hero: touch-screen photo under a navy veil, text in white, brand squares in the corner */
[data-design="v4"] .s-hero {
  position: relative;
  overflow: hidden;
  border: 0;
  background:
    linear-gradient(270deg, rgba(0, 48, 89, .97) 0%, rgba(0, 48, 89, .9) 45%, rgba(0, 48, 89, .55) 100%),
    url("../img/bg/hero-digital.jpg") center / cover no-repeat,
    #003059;
}

[data-design="v4"] .s-hero::after {
  content: "";
  position: absolute;
  inset-block-end: 28px;
  inset-inline-end: 4%;
  inline-size: clamp(90px, 12vw, 172px);
  aspect-ratio: 172 / 142;
  background: url("../img/bg/squares.svg") center / contain no-repeat;
  transform: scaleX(-1);
  pointer-events: none;
}

[data-design="v4"] .s-hero-top,
[data-design="v4"] .s-hero-copy { position: relative; z-index: 1; }

[data-design="v4"] .s-hero h1 { color: #FFFFFF; }
[data-design="v4"] .s-hero .s-lead { color: #D5E3EF; }
[data-design="v4"] .s-hero .logo .lg-m { fill: #FFFFFF; }
[data-design="v4"] .s-hero .s-toplink,
[data-design="v4"] .s-hero .s-link { color: #FFFFFF; }
[data-design="v4"] .s-hero .s-link { text-decoration-color: rgba(255, 255, 255, .5); }
[data-design="v4"] .s-hero .s-link:hover { text-decoration-color: #FFFFFF; }

@media (max-width: 640px) {
  [data-design="v4"] .s-hero::after { display: none; }
}

/* What the products share: workshop photo under the navy band */
[data-design="v4"] .s-section--navy {
  background:
    linear-gradient(rgba(0, 48, 89, .93), rgba(0, 48, 89, .93)),
    url("../img/bg/workshop.jpg") center / cover no-repeat,
    #003059;
}

/* Interest form: the team photo, faint behind the card */
[data-design="v4"] #interest {
  background:
    linear-gradient(var(--bg-veil, rgba(255, 255, 255, .93)), var(--bg-veil, rgba(255, 255, 255, .93))),
    url("../img/bg/team.jpg") center 30% / cover no-repeat,
    var(--bg);
}

[data-design="v4"][data-theme="dark"] #interest { --bg-veil: rgba(11, 27, 43, .94); }

/* ---------- Footer ---------- */
[data-design="v4"] .site-footer {
  border: 0;
  background: #003059;
  color: #CFDCE8;
}

[data-design="v4"] .site-footer .logo .lg-m { fill: #FFFFFF; }
[data-design="v4"] .site-footer .footer-title { color: #FFFFFF; }