/* ==========================================================
   ARGENTICARE · PRODUCTION CSS BUNDLE
   Generated from tokens.css + base.css + components.css + site.css.
   Source files are retained for maintainability.
   ========================================================== */

/* ==========================================================
   ARGENTICARE · DESIGN TOKENS
   ========================================================== */

:root {
  /* ========================================================
     COLOR · BRAND
     ======================================================== */

  --blue-50: #f2f8fe;
  --blue-100: #d9ecfd;
  --blue-200: #b3d9fb;
  --blue-300: #80bef8;
  --blue-400: #409af1;
  --blue-500: #0073e5;
  --blue-600: #005dba;
  --blue-700: #004a94;
  --blue-800: #00376f;
  --blue-900: #00254a;

  --slate-50: #f6f8fb;
  --slate-100: #e8edf3;
  --slate-200: #d9dee5;
  --slate-300: #bbc4d1;
  --slate-400: #9daabd;
  --slate-500: #617795;
  --slate-600: #4d5f77;
  --slate-700: #3a4759;
  --slate-800: #262f3b;
  --slate-900: #13171d;

  --white: #ffffff;
  --black: #000000;

  /* ========================================================
     COLOR · SEMANTIC STATES
     ======================================================== */

  --info-50: var(--blue-50);
  --info-100: var(--blue-100);
  --info-500: var(--blue-500);
  --info-700: var(--blue-700);

  --success-50: #f1faf3;
  --success-100: #ddf3e2;
  --success-500: #2e9e4d;
  --success-700: #1f6f37;

  --warning-50: #fff8ea;
  --warning-100: #fdecc2;
  --warning-500: #d99012;
  --warning-700: #8a5a00;

  --error-50: #fef2f2;
  --error-100: #fde1e1;
  --error-500: #d64545;
  --error-700: #9f1f1f;

  /* ========================================================
     COLOR · TEXT
     ======================================================== */

  --text: var(--slate-900);
  --text-soft: var(--slate-700);
  --text-muted: var(--slate-500);
  --text-accent: var(--blue-600);

  /* ========================================================
     COLOR · ACTIONS
     ======================================================== */

  --primary: var(--blue-500);
  --primary-hover: var(--blue-600);
  --primary-active: var(--blue-700);

  /* ========================================================
     COLOR · SURFACES
     ======================================================== */

  --surface: var(--white);
  --surface-soft: var(--slate-50);
  --surface-blue: var(--blue-50);
  --surface-dark: var(--slate-900);

  /* ========================================================
     COLOR · BORDERS
     ======================================================== */

  --border: var(--slate-200);
  --border-soft: var(--slate-100);
  --border-soft-blue: var(--blue-100);
  --border-blue: var(--blue-200);

  /* ========================================================
     TYPOGRAPHY · FONT FAMILIES
     ======================================================== */

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --font-heading: "Neulis Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* ========================================================
     TYPOGRAPHY · FONT SIZES
     ======================================================== */

  --fs-xs: 0.875rem;
  --fs-sm: 1rem;
  --fs-base: 1.125rem;

  --fs-md: clamp(1rem, 1.05vw, 1.125rem);
  --fs-lg: clamp(1.125rem, 1.25vw, 1.25rem);

  --fs-h1: clamp(3.5rem, 5vw, 5rem);
  --fs-h2: clamp(2rem, 3vw, 2.75rem);
  --fs-h3: clamp(1.5rem, 2vw, 2rem);
  --fs-h4: clamp(1.25rem, 1.5vw, 1.5rem);
  --fs-h5: clamp(1.0625rem, 1.15vw, 1.25rem);
  --fs-h6: 0.8125rem;

  /* ========================================================
     TYPOGRAPHY · LINE HEIGHTS
     ======================================================== */

  --lh-h1: 1.08;
  --lh-tight: 1.16;
  --lh-snug: 1.24;
  --lh-base: 1.5;
  --lh-relaxed: 1.65;

  /* ========================================================
     TYPOGRAPHY · LETTER SPACING
     ======================================================== */

  --ls-h1: -0.025em;
  --ls-heading: -0.022em;
  --ls-tight: -0.018em;
  --ls-base: 0;
  --ls-wide: 0.1em;

  /* ========================================================
     SPACING · FLUID SCALE
     Viewport range: 320px → 1440px
     ======================================================== */

  --space-8: clamp(0.5rem, 0.4821rem + 0.0893vw, 0.5625rem);

  --space-10: clamp(0.625rem, 0.5982rem + 0.1339vw, 0.71875rem);

  --space-12: clamp(0.75rem, 0.7143rem + 0.1786vw, 0.875rem);

  --space-16: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);

  --space-20: clamp(1.25rem, 1.2143rem + 0.1786vw, 1.375rem);

  --space-24: clamp(1.5rem, 1.4464rem + 0.2679vw, 1.6875rem);

  --space-28: clamp(1.75rem, 1.6964rem + 0.2679vw, 1.9375rem);

  --space-32: clamp(2rem, 1.9286rem + 0.3571vw, 2.25rem);

  --space-36: clamp(2.25rem, 2.1607rem + 0.4464vw, 2.5625rem);

  --space-48: clamp(3rem, 2.8929rem + 0.5357vw, 3.375rem);

  --space-64: clamp(4rem, 3.8571rem + 0.7143vw, 4.5rem);

  --space-96: clamp(6rem, 5.7857rem + 1.0714vw, 6.75rem);

  /* ========================================================
     LAYOUT
     ======================================================== */

  --container-max: 75rem;
  --form-max: 60rem;
  --measure: 65ch;

  --gutter: var(--space-24);
  --grid-gap: var(--space-20);
  --section-space: var(--space-96);

  --header-height: 4.75rem;

  /* ========================================================
     SHAPE
     ======================================================== */

  --radius-sm: 0.875rem;
  --radius-md: 1.375rem;
  --radius-lg: 1.75rem;
  --radius-pill: 999px;

  /* ========================================================
     CONTROLS
     ======================================================== */

  --control-height: 3rem;
  --control-gap: var(--space-8);

  /* ========================================================
     MOTION
     ======================================================== */

  --duration-fast: 180ms;
  --duration-base: 240ms;

  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  /* ========================================================
     ELEVATION
     ======================================================== */

  --shadow-focus: 0 0 0 4px rgba(0, 115, 229, 0.18);

  --shadow-md: 0 16px 40px -26px rgba(19, 23, 29, 0.18);

  --shadow-lg: 0 24px 56px -28px rgba(19, 23, 29, 0.24);

  --shadow-blue: 0 16px 32px -18px rgba(0, 115, 229, 0.3);

  --shadow-soft-blue: 0 8px 18px rgba(0, 115, 229, 0.08);

  /* ========================================================
     BACKGROUNDS · GRADIENTS
     ======================================================== */

  --gradient-neutral: linear-gradient(135deg, var(--white) 0%, var(--slate-50) 100%);

  --gradient-disabled: linear-gradient(135deg, var(--slate-100) 0%, var(--slate-200) 100%);

  --gradient-blue: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 100%);

  --gradient-soft-blue: linear-gradient(135deg, var(--blue-50) 0%, var(--blue-100) 100%);

  --gradient-slate: linear-gradient(135deg, var(--slate-500) 0%, var(--slate-700) 100%);

  --gradient-glass: linear-gradient(135deg, var(--white) 0%, var(--blue-50) 100%);

  /* ========================================================
     BACKGROUNDS · HERO
     ======================================================== */

  --gradient-hero: linear-gradient(180deg, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, 0.58) 84%, var(--surface) 100%), radial-gradient(ellipse at 12% 78%, rgba(128, 190, 248, 0.24) 0%, transparent 42%), radial-gradient(ellipse at 92% 72%, rgba(179, 217, 251, 0.34) 0%, transparent 46%), linear-gradient(135deg, #fbfdff 0%, var(--blue-50) 54%, #eaf4fd 100%);


  --gradient-hero-centered:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 58%,
      rgba(255, 255, 255, 0.2) 70%,
      rgba(255, 255, 255, 0.5) 82%,
      rgba(255, 255, 255, 0.9) 92%,
      var(--white) 100%
    ),
    radial-gradient(
      ellipse at 50% 39%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.86) 32%,
      rgba(255, 255, 255, 0.4) 54%,
      transparent 72%
    ),
    radial-gradient(
      ellipse at 4% 64%,
      rgba(128, 190, 248, 0.4) 0%,
      rgba(179, 217, 251, 0.5) 38%,
      transparent 66%
    ),
    radial-gradient(
      ellipse at 96% 60%,
      rgba(128, 190, 248, 0.4) 0%,
      rgba(179, 217, 251, 0.5) 38%,
      transparent 66%
    ),
    radial-gradient(
      ellipse at 50% 104%,
      rgba(128, 190, 248, 0.2) 0%,
      rgba(179, 217, 251, 0.1) 34%,
      transparent 62%
    ),
    linear-gradient(
      180deg,
      #fbfdff 0%,
      var(--blue-100) 58%,
      #edf6fe 100%
    );

  /* ========================================================
     BACKGROUNDS · IMAGE OVERLAYS
     ======================================================== */

  --gradient-image-overlay: linear-gradient(180deg, rgba(19, 23, 29, 0) 28%, rgba(19, 23, 29, 0.78) 100%);

  --gradient-image-overlay-soft: linear-gradient(180deg, rgba(0, 37, 74, 0) 20%, rgba(0, 55, 111, 0.62) 100%);
}


/* ==========================================================
   ARGENTICARE · BASE & LAYOUT
   ========================================================== */

/* ==========================================================
   FONT FACES
   ========================================================== */
@font-face {
  font-family: "Neulis Sans";
  src: url("/assets/fonts/Neulis_Sans_Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neulis Sans";
  src: url("/assets/fonts/Neulis_Sans_Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neulis Sans";
  src: url("/assets/fonts/Neulis_Sans_Semi_Bold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neulis Sans";
  src: url("/assets/fonts/Neulis_Sans_Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

html {
  min-width: 20rem;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 20rem;
  min-height: 100vh;
  margin: 0;
  color: var(--text-soft);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main {
  display: block;
}

/* ==========================================================
   MEDIA
   ========================================================== */
img, svg, video, canvas, picture {
  display: block;
  max-width: 100%;
}

img, picture {
  height: auto;
}

iframe {
  max-width: 100%;
  border: 0;
}

/* ==========================================================
   FORM ELEMENTS
   ========================================================== */
button, input, textarea, select {
  margin: 0;
  font: inherit;
}

button, select {
  text-transform: none;
}

button, [type="button"], [type="reset"], [type="submit"] {
  appearance: button;
  -webkit-appearance: button;
}

/* ==========================================================
   CONTENT RESET
   ========================================================== */
h1, h2, h3, h4, h5, h6, p, figure, blockquote {
  margin: 0;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 0;
}

hr {
  border: 0;
}

/* ==========================================================
   TYPOGRAPHY · HEADINGS
   ========================================================== */
h1, h2, h3, h4, h5, h6 {
  color: var(--text);
  font-family: var(--font-heading);
  font-style: normal;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
}

h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-base);
}

h5 {
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

h6 {
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* ==========================================================
   TYPOGRAPHY · BODY
   ========================================================== */
p {
  max-width: var(--measure);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-relaxed);
}

strong, b {
  font-weight: 700;
}

small {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
}

code {
  overflow-wrap: anywhere;
}

pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
}

blockquote {
  quotes: none;
}

/* ==========================================================
   LINKS
   ========================================================== */
a {
  color: var(--primary-hover);
  font-weight: 500;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25rem;
  transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
}

a:hover {
  color: var(--primary-active);
}

a:where(:not([class])) {
  text-decoration-color: currentColor;
}

a:where(:not([class])):hover {
  text-decoration-color: currentColor;
}

/* ==========================================================
   LINKS · GLOBAL STATES
   ========================================================== */

a,
a:link,
a:visited,
a:focus,
a:focus-visible,
a:active {
  color: var(--primary-hover);
}

a:hover {
  color: var(--primary-active);
}

/* ==========================================================
   ACCESSIBILITY
   ========================================================== */
[id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-16));
}

:where(a, button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

::selection {
  color: var(--blue-900);
  background: var(--blue-100);
}

/* ==========================================================
   TYPOGRAPHY · TREATMENTS
   ========================================================== */
.heading-accent {
  display: inline-block;
  color: transparent;
  background: var(--gradient-blue);
  background-clip: text;
  -webkit-background-clip: text;
  font-weight: inherit;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================
   ICON FONT
   ========================================================== */
.material-symbols-rounded {
  display: inline-block;
  width: 1em;
  overflow: hidden;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  user-select: none;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 350, "GRAD" 0, "opsz" 24;
}

/* ==========================================================
   LAYOUT · CONTAINER
   ========================================================== */
.container {
  width: min(calc(100% - (var(--gutter) * 2)), var(--container-max));
  margin-inline: auto;
}

/* ==========================================================
   LAYOUT · SECTION
   ========================================================== */
.section {
  padding-block: var(--section-space);
}

.section-group {
  display: block;
}

/* ==========================================================
   LAYOUT · STACK
   ========================================================== */
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--stack-space, var(--space-16));
}

.stack-xs {
  --stack-space: var(--space-12);
}

.stack-sm {
  --stack-space: var(--space-16);
}

.stack-md {
  --stack-space: var(--space-24);
}

.stack-lg {
  --stack-space: var(--space-32);
}

.stack-xl {
  --stack-space: var(--space-48);
}

.stack-section {
  --stack-space: var(--space-48);
}

/* ==========================================================
   LAYOUT · FLOW
   ========================================================== */
.flow > * {
  margin-block: 0;
}

.flow > * + * {
  margin-block-start: var(--space-16);
}

.flow > :is(h1, h2, h3, h4, h5, h6) + * {
  margin-block-start: var(--space-12);
}

.flow > h6 + :is(h1, h2) {
  margin-block-start: var(--space-16);
}

.flow > h1 + p {
  margin-block-start: var(--space-20);
}

.flow > :is(p, ul, ol, blockquote, figure) + :is(h2, h3, h4, h5, h6) {
  margin-block-start: var(--space-48);
}

/* ==========================================================
   LAYOUT · 12-COLUMN GRID
   ========================================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.grid > * {
  min-width: 0;
  grid-column: 1 / -1;
}

/* ==========================================================
   LAYOUT · AUTO GRID
   ========================================================== */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--item-min, 16rem)), 1fr));
  gap: var(--grid-gap);
}

/* ==========================================================
   LAYOUT · CLUSTER
   ========================================================== */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-space, var(--space-16));
}

/* ==========================================================
   LAYOUT · RESPONSIVE COLUMN SPANS
   ========================================================== */
@media (min-width: 36rem) {
  .col-sm-6 {
    grid-column: span 6;
  }
}

@media (min-width: 48rem) {
  .col-md-4 {
    grid-column: span 4;
  }

  .col-md-8 {
    grid-column: span 8;
  }
}

/* ==========================================================
   ACCESSIBILITY · REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================
   ARGENTICARE · COMPONENTS
   ========================================================== */

/* ==========================================================
   VISUAL PRIMITIVES
   ========================================================== */

/* ---------- Backgrounds ---------- */
.visual.background-white {
  --visual-background: var(--surface);
  --visual-text-color: var(--text-soft);
  --visual-heading-color: var(--text);
}

.visual.background-soft {
  --visual-background: var(--surface-soft);
  --visual-text-color: var(--text-soft);
  --visual-heading-color: var(--text);
}

.visual.background-blue-soft {
  --visual-background: var(--surface-blue);
  --visual-text-color: var(--text-soft);
  --visual-heading-color: var(--text);
}

.visual.background-neutral {
  --visual-background: var(--gradient-neutral);
  --visual-text-color: var(--text-soft);
  --visual-heading-color: var(--text);
}

.visual.background-soft-blue {
  --visual-background: var(--gradient-soft-blue);
  --visual-text-color: var(--blue-700);
  --visual-heading-color: var(--blue-900);
}

.visual.background-slate {
  --visual-background: var(--gradient-slate);
  --visual-text-color: rgba(255, 255, 255, 0.84);
  --visual-heading-color: var(--white);
}

.visual.background-blue {
  --visual-background: var(--gradient-blue);
  --visual-text-color: rgba(255, 255, 255, 0.84);
  --visual-heading-color: var(--white);
}

.visual.background-glass {
  --visual-background: var(--gradient-glass);
  --visual-text-color: var(--text-soft);
  --visual-heading-color: var(--text);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ---------- Text colors ---------- */
.visual.color-blue {
  --visual-text-color: var(--blue-600);
  --visual-heading-color: var(--blue-700);
}

.visual.color-slate {
  --visual-text-color: var(--slate-700);
  --visual-heading-color: var(--slate-900);
}

.visual.color-white {
  --visual-text-color: var(--white);
  --visual-heading-color: var(--white);
}

/* ---------- Borders ---------- */
.visual.border-none {
  --visual-border-color: transparent;
}

.visual.border-soft {
  --visual-border-color: var(--border-soft);
}

.visual.border-soft-blue {
  --visual-border-color: var(--border-soft-blue);
}

.visual.border-default {
  --visual-border-color: var(--border);
}

.visual.border-blue {
  --visual-border-color: var(--border-blue);
}

/* ---------- Radius ---------- */
.visual.radius-sm {
  --visual-radius: var(--radius-sm);
}

.visual.radius-md {
  --visual-radius: var(--radius-md);
}

.visual.radius-lg {
  --visual-radius: var(--radius-lg);
}

.visual.radius-pill {
  --visual-radius: var(--radius-pill);
}

.visual.radius-circle {
  --visual-radius: 50%;
}

/* ---------- Shadows ---------- */
.visual.shadow-none {
  --visual-shadow: none;
}

.visual.shadow-md {
  --visual-shadow: var(--shadow-md);
}

.visual.shadow-lg {
  --visual-shadow: var(--shadow-lg);
}

.visual.shadow-blue {
  --visual-shadow: var(--shadow-blue);
}

.visual.shadow-soft-blue {
  --visual-shadow: var(--shadow-soft-blue);
}

/* ==========================================================
   PANELS
   ========================================================== */
.panel {
  --panel-padding: var(--space-24);
  --visual-background: var(--surface);
  --visual-border-color: var(--border-soft);
  --visual-radius: var(--radius-sm);
  --visual-shadow: none;
  --visual-text-color: var(--text-soft);
  --visual-heading-color: var(--text);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
  padding: var(--panel-padding);
  color: var(--visual-text-color);
  background: var(--visual-background);
  border: 1px solid var(--visual-border-color);
  border-radius: var(--visual-radius);
  box-shadow: var(--visual-shadow);
}

.panel :is(h2, h3, h4, h5, h6) {
  color: var(--visual-heading-color);
}

.panel p {
  max-width: none;
  color: inherit;
}

.panel-compact {
  --panel-padding: var(--space-16);
}

.panel-spacious {
  --panel-padding: var(--space-32);
}

.panel-form {
  --panel-padding: var(--space-48) var(--space-32);
}

/* ==========================================================
   CARDS
   ========================================================== */
.card-grid {
  --item-min: 20rem;
}

.card-grid-auto {
  align-items: start;
}

.card-grid-auto > .card {
  --card-height: auto;
}

.card {
  --card-padding: var(--space-24) var(--space-24) var(--space-32);
  --card-height: 100%;
  --card-min-height: 0;
  --card-hover-offset: -2px;
  --card-shadow-hover: var(--shadow-lg);
  --card-index-color: var(--text-accent);
  --card-divider-color: var(--blue-400);
  --card-media-min-height: 9.25rem;
  --card-media-ratio: 16 / 9;
  --visual-background: var(--surface);
  --visual-border-color: var(--border-soft);
  --visual-radius: var(--radius-sm);
  --visual-shadow: none;
  --visual-text-color: var(--text-soft);
  --visual-heading-color: var(--text);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: var(--card-min-height);
  height: var(--card-height);
  padding: var(--card-padding);
  color: var(--visual-text-color);
  background: var(--visual-background);
  border: 1px solid var(--visual-border-color);
  border-radius: var(--visual-radius);
  box-shadow: var(--visual-shadow);
}

.card :is(h2, h3, h4, h5, h6) {
  color: var(--visual-heading-color);
}

.card p {
  max-width: none;
  color: inherit;
}

.card.visual.background-blue {
  --card-index-color: rgba(255, 255, 255, 0.72);
  --card-divider-color: rgba(255, 255, 255, 0.55);
}

/* ---------- Optional card content ---------- */
.card-index {
  display: block;
  color: var(--card-index-color);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: var(--ls-wide);
}

.card-divider {
  display: block;
  flex: 0 0 auto;
  width: 2rem;
  height: 3px;
  background: var(--card-divider-color);
  border-radius: var(--radius-pill);
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-top: auto;
  padding-top: var(--space-24);
}

.card-actions > .btn:only-child {
  width: 100%;
}

/* ---------- Interactive card ---------- */
.card-interactive {
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.card-interactive:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(var(--card-hover-offset));
}

/* ---------- Card media ---------- */
.card-with-media {
  --card-padding: 0;
  overflow: hidden;
}

.card-media {
  --visual-background: var(--surface-soft);
  --visual-border-color: transparent;
  --visual-radius: 0;
  --visual-shadow: none;
  --visual-text-color: var(--text-soft);
  --visual-heading-color: var(--text);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-height: var(--card-media-min-height);
  overflow: hidden;
  color: var(--visual-text-color);
  background: var(--visual-background);
  box-shadow: var(--visual-shadow);
}

.card-media > img,
.card-media > picture {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--card-media-ratio);
  object-fit: cover;
}

.card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.card-with-media .card-body {
  padding: var(--space-24) var(--space-24) var(--space-32);
}

/* ==========================================================
   ICON CONTAINERS
   ========================================================== */
.icon-box {
  --icon-box-size: 3.25rem;
  --icon-box-symbol-size: 1.75rem;
  --visual-background: var(--surface-blue);
  --visual-border-color: var(--border-blue);
  --visual-radius: var(--radius-sm);
  --visual-shadow: none;
  --visual-text-color: var(--blue-600);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  color: var(--visual-text-color);
  background: var(--visual-background);
  border: 1px solid var(--visual-border-color);
  border-radius: var(--visual-radius);
  box-shadow: var(--visual-shadow);
}

.icon-box .material-symbols-rounded {
  font-size: var(--icon-box-symbol-size);
}

.icon-box-lg {
  --icon-box-size: 3.75rem;
  --icon-box-symbol-size: 2rem;
}

/* ==========================================================
   BUTTONS
   ========================================================== */
.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
}

.btn {
  --btn-height: 3.5rem;
  --btn-padding-inline: var(--space-32);
  --btn-gap: var(--control-gap);
  --btn-radius: var(--radius-pill);

  --btn-color: var(--text);
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-shadow: none;

  --btn-color-hover: var(--btn-color);
  --btn-background-hover: var(--btn-background);
  --btn-border-color-hover: var(--btn-border-color);
  --btn-shadow-hover: var(--btn-shadow);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);

  min-height: var(--btn-height);
  padding-inline: var(--btn-padding-inline);

  color: var(--btn-color);
  background: var(--btn-background);
  border: 1px solid var(--btn-border-color);
  border-radius: var(--btn-radius);
  box-shadow: var(--btn-shadow);

  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;

  cursor: pointer;
  white-space: nowrap;

  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    border-color var(--duration-fast) ease;
}

.btn:link,
.btn:visited,
.btn:focus,
.btn:focus-visible,
.btn:active {
  color: var(--btn-color);
  background: var(--btn-background);
  border-color: var(--btn-border-color);
  text-decoration: none;
}

.btn:hover {
  color: var(--btn-color-hover);
  background: var(--btn-background-hover);
  border-color: var(--btn-border-color-hover);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

/* ---------- Button variants ---------- */
.btn-primary {
  --btn-color: var(--white);
  --btn-background: var(--gradient-blue);
  --btn-border-color: var(--blue-600);
  --btn-color-hover: var(--white);
  --btn-background-hover: var(--primary-hover);
  --btn-border-color-hover: var(--blue-600);
  --btn-shadow-hover: var(--shadow-blue);
}

.btn-secondary {
  --btn-color: var(--primary-hover);
  --btn-background: var(--gradient-soft-blue);
  --btn-border-color: var(--blue-200);
  --btn-color-hover: var(--primary-active);
  --btn-background-hover: var(--blue-100);
  --btn-border-color-hover: var(--blue-300);
  --btn-shadow-hover: var(--shadow-soft-blue);
}

.btn-outline {
  --btn-color: var(--primary-hover);
  --btn-background: var(--surface);
  --btn-border-color: var(--border-blue);
  --btn-color-hover: var(--primary-active);
  --btn-background-hover: var(--blue-50);
  --btn-border-color-hover: var(--blue-300);
  --btn-shadow-hover: var(--shadow-soft-blue);
}

.btn-ghost {
  --btn-color: var(--primary-hover);
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-color-hover: var(--primary-active);
  --btn-background-hover: var(--blue-50);
}

.btn-inverse {
  --btn-color: var(--blue-700);
  --btn-background: rgba(255, 255, 255, 0.94);
  --btn-border-color: rgba(255, 255, 255, 0.72);
  --btn-color-hover: var(--blue-800);
  --btn-background-hover: var(--white);
  --btn-border-color-hover: var(--white);
  --btn-shadow-hover: 0 12px 30px -18px rgba(255, 255, 255, 0.72);
}

.btn-outline-light {
  --btn-color: var(--white);
  --btn-background: rgba(255, 255, 255, 0.06);
  --btn-border-color: rgba(255, 255, 255, 0.22);
  --btn-color-hover: var(--white);
  --btn-background-hover: rgba(255, 255, 255, 0.12);
  --btn-border-color-hover: rgba(255, 255, 255, 0.4);
}

.btn-primary:active,
.btn-primary:focus,
.btn-primary:target,
.btn-primary:visited {
  color: var(--white) !important;
}

/* ---------- Disabled button ---------- */
.btn:disabled,
.btn-disabled,
.btn[aria-disabled="true"] {
  --btn-color: var(--slate-500);
  --btn-background: var(--gradient-disabled);
  --btn-border-color: var(--slate-200);
  --btn-color-hover: var(--slate-500);
  --btn-background-hover: var(--gradient-disabled);
  --btn-border-color-hover: var(--slate-200);
  --btn-shadow-hover: none;
  cursor: not-allowed;
}

.btn:disabled:hover,
.btn-disabled:hover,
.btn[aria-disabled="true"]:hover {
  transform: none;
}

/* ---------- Button shapes ---------- */
.btn-rounded {
  --btn-radius: var(--radius-sm);
}

.btn-pill {
  --btn-radius: var(--radius-pill);
}

.btn-circle {
  --btn-radius: 50%;
}

.btn-icon-only {
  width: var(--btn-height);
  padding: 0;
}

/* ---------- Navigation button ---------- */
.btn-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  width: min(100%, 24rem);
  min-height: 4rem;
  padding: var(--space-16) var(--space-24);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-standard), border-color var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-base) var(--ease-standard);
}

.btn-nav:hover {
  color: var(--primary-hover);
  border-color: var(--border-blue);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.btn-nav .material-symbols-rounded {
  color: var(--primary);
}

/* ==========================================================
   LINKS
   ========================================================== */
.link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-32);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  text-decoration: none;
}

.link-arrow .material-symbols-rounded {
  font-size: 1.125rem;
  transition: transform var(--duration-fast) ease;
}

.link-arrow:hover .material-symbols-rounded {
  transform: translateX(0.25rem);
}

/* ==========================================================
   NAVIGATION COMPONENT
   ========================================================== */
.navigation-link {
  --navigation-link-min-height: 2.75rem;
  --navigation-link-padding-inline: var(--space-16);
  --navigation-link-font-size: var(--fs-xs);
  --navigation-indicator-height: 2.5px;
  --navigation-indicator-gap: 0.625rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-16);
  min-height: var(--navigation-link-min-height);
  padding-inline: var(--navigation-link-padding-inline);
  color: var(--text-soft);
  font-size: var(--navigation-link-font-size);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.navigation-link:hover,
.navigation-link:focus-visible,
.navigation-link.is-active,
.navigation-link[aria-current="page"] {
  color: var(--primary-hover);
}

.navigation-link-label {
  position: relative;
  display: inline-block;
}

.navigation-link-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--navigation-indicator-gap) * -1);
  height: var(--navigation-indicator-height);
  background: var(--primary-hover);
  border-radius: var(--radius-pill);
  opacity: 0;
  transform: scaleX(0.55);
  transform-origin: center;
  transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.navigation-link:hover .navigation-link-label::after,
.navigation-link:focus-visible .navigation-link-label::after,
.navigation-link.is-active .navigation-link-label::after,
.navigation-link[aria-current="page"] .navigation-link-label::after {
  opacity: 1;
  transform: scaleX(1);
}

.navigation-link .material-symbols-rounded {
  margin-left: auto;
  color: currentColor;
  font-size: 1.25rem;
}

.navigation-menu {
  --navigation-menu-gap: var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--navigation-menu-gap);
}

.navigation-menu-horizontal {
  margin-left: auto;
}

.navigation-menu-vertical {
  --navigation-link-font-size: var(--fs-base);
  display: grid;
  align-items: stretch;
}

.navigation-menu-vertical .navigation-link {
  width: 100%;
}

/* ---------- Navigation toggle ---------- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  margin-left: auto;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: none;
  cursor: pointer;
  transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
}

.nav-toggle:hover {
  color: var(--primary-hover);
  background: var(--surface-blue);
}

/* ==========================================================
   IMAGES
   ========================================================== */
.media-figure {
  overflow: hidden;
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.media-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--media-ratio, 16 / 9);
  background: var(--gradient-soft-blue);
}

.media-frame.is-square {
  --media-ratio: 1 / 1;
}

.media-frame.is-portrait {
  --media-ratio: 4 / 5;
}

.media-frame > img,
.media-frame > picture,
.media-frame picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-24);
  color: var(--white);
  background: var(--gradient-image-overlay);
}

.media-overlay.is-soft {
  background: var(--gradient-image-overlay-soft);
}

.media-overlay :is(h2, h3, h4, h5, h6, p) {
  color: inherit;
}

.media-overlay p {
  margin-top: var(--space-12);
  font-size: var(--fs-sm);
}

.media-caption {
  padding: var(--space-16) var(--space-24);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ==========================================================
   BADGES
   ========================================================== */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
}

.badge-row-compact {
  gap: var(--space-8);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 2rem;
  padding: var(--space-8) var(--space-24);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.badge .material-symbols-rounded {
  font-size: 1.125rem;
}

.badge-info {
  color: var(--primary-hover);
  background: var(--blue-50);
  border-color: var(--blue-100);
}

.badge-slate {
  color: var(--slate-600);
  background: var(--slate-50);
  border-color: var(--slate-100);
}

.badge-success {
  color: var(--success-700);
  background: var(--success-50);
  border-color: var(--success-100);
}

.badge-warning {
  color: var(--warning-700);
  background: var(--warning-50);
  border-color: var(--warning-100);
}

.badge-error {
  color: var(--error-700);
  background: var(--error-50);
  border-color: var(--error-100);
}

.badge-inverse {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ==========================================================
   INLINE STAT PANEL
   ========================================================== */
.stat-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-16);
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: var(--space-16) var(--space-20);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.stat-panel-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0 !important;
  color: var(--primary-hover);
  background: var(--surface-blue);
  border: 1px solid var(--border-blue);
  border-radius: 50%;
  line-height: 1;
}

.stat-panel-icon .material-symbols-rounded {
  font-size: 1.625rem;
}

.stat-panel-copy {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.stat-panel-copy p {
  margin: 0 !important;
}

.stat-panel-value {
  color: var(--text);
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-base);
  white-space: nowrap;
}

.stat-panel-label {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

.stat-panel-inverse {
  color: var(--white);
  background: rgba(0, 37, 74, 0.16);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.stat-panel-inverse .stat-panel-icon {
  color: var(--white);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.94);
}

.stat-panel-inverse .stat-panel-value {
  color: var(--white);
}

.stat-panel-inverse .stat-panel-label {
  color: rgba(255, 255, 255, 0.76);
}

/* ==========================================================
   ALERTS
   ========================================================== */
.alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-16);
  align-items: start;
  padding: var(--space-16) var(--space-24);
  border: 1px solid;
  border-radius: var(--radius-sm);
}

.alert > .material-symbols-rounded {
  margin-top: 0.125rem;
}

.alert h5 {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  letter-spacing: 0;
}

.alert p {
  margin-top: var(--space-8);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

.alert-close {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: currentColor;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.alert-info {
  color: var(--info-700);
  background: var(--info-50);
  border-color: var(--info-100);
}

.alert-success {
  color: var(--success-700);
  background: var(--success-50);
  border-color: var(--success-100);
}

.alert-warning {
  color: var(--warning-700);
  background: var(--warning-50);
  border-color: var(--warning-100);
}

.alert-error {
  color: var(--error-700);
  background: var(--error-50);
  border-color: var(--error-100);
}

/* ==========================================================
   INPUTS & FORMS
   ========================================================== */
.form-layout {
  width: min(100%, var(--form-max));
  margin-inline: auto;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
  align-items: start;
}

.form-head {
  grid-column: 1 / -1;
  text-align: center;
}

.form-head h3 {
  margin-bottom: var(--space-8);
}

.form-head p {
  max-width: 52ch;
  margin-inline: auto;
  color: var(--text-soft);
}

/* ---------- Field ---------- */
.field {
  display: grid;
  align-content: start;
  gap: var(--space-8);
  min-width: 0;
}

.field-full {
  grid-column: 1 / -1;
}

.field label,
.field-label {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-base);
}

.field-hint,
.field-error {
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
}

.field-hint {
  color: var(--text-muted);
}

.field-error {
  color: var(--error-700);
}

/* ---------- Control base ---------- */
.form-control {
  width: 100%;
  min-width: 0;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  transition: color var(--duration-fast) ease, background var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.input,
.select {
  height: var(--control-height);
  padding: 0 var(--space-16);
}

/* ---------- Select ---------- */
.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: calc(var(--space-16) + 1.75rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2313171d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-16) center;
  background-size: 1rem;
}

/* ---------- Textarea ---------- */
.textarea {
  min-height: 9rem;
  padding: var(--space-16);
  padding-right: var(--space-20);
  padding-bottom: var(--space-20);
  line-height: var(--lh-relaxed);
  resize: vertical;
}

/* ---------- Placeholder ---------- */
.input::placeholder,
.textarea::placeholder {
  color: var(--slate-400);
  opacity: 1;
}

/* ---------- States ---------- */
.form-control:hover:not(:disabled) {
  border-color: var(--slate-300);
}

.form-control:focus {
  outline: none;
  border-color: var(--blue-400);
  box-shadow: var(--shadow-focus);
}

.form-control.is-error,
.form-control[aria-invalid="true"] {
  border-color: var(--error-500);
}

.form-control:disabled {
  color: var(--text-muted);
  background: var(--slate-100);
  cursor: not-allowed;
}

/* ---------- Checkbox and radio ---------- */
.choice-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-24);
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: 1;
  cursor: pointer;
}

.choice input {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--primary);
}

/* ---------- Actions ---------- */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-16);
  grid-column: 1 / -1;
}

/* ==========================================================
   TABLES
   ========================================================== */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.data-table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: var(--space-16) var(--space-24);
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}

.data-table th {
  color: var(--text-muted);
  background: var(--surface-soft);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.data-table td {
  color: var(--text-soft);
  font-size: var(--fs-sm);
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr:hover {
  background: var(--blue-50);
}

/* ==========================================================
   LISTS
   ========================================================== */
.content-list {
  display: grid;
  gap: var(--space-12);
  padding-left: 1.25rem;
}

.content-list li {
  padding-left: var(--space-8);
  line-height: var(--lh-relaxed);
}

.content-list li::marker {
  color: var(--primary);
  font-weight: 700;
}

.numbered-list li::marker {
  font-family: var(--font-mono);
}

/* ==========================================================
   SEPARATORS & DIVIDERS
   ========================================================== */
.divider-soft,
.divider-strong,
.divider-marker {
  border: 0;
}

.divider-soft {
  width: 100%;
  height: 1px;
  background: var(--border-soft);
}

.divider-strong {
  width: 100%;
  height: 1px;
  background: var(--border);
}

.divider-marker {
  width: 2.25rem;
  height: 3px;
  margin-inline: 0 auto;
  background: var(--primary);
  border-radius: var(--radius-pill);
}

.divider-label {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-16);
  align-items: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.divider-label::before,
.divider-label::after {
  content: "";
  height: 1px;
  background: var(--border-soft);
}

/* ==========================================================
   TOOLTIPS
   ========================================================== */
.tooltip-anchor {
  --tooltip-left: 50%;
  --tooltip-right: auto;
  --tooltip-translate-x: -50%;
  position: relative;
}

.tooltip-bubble {
  position: absolute;
  left: var(--tooltip-left);
  right: var(--tooltip-right);
  bottom: calc(100% + var(--space-8));
  z-index: 100;
  width: max-content;
  max-width: 14rem;
  padding: var(--space-8) var(--space-12);
  color: var(--white);
  background: var(--slate-900);
  border-radius: 0.625rem;
  box-shadow: var(--shadow-md);
  font-size: var(--fs-xs);
  line-height: 1.3;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(var(--tooltip-translate-x), 0.25rem);
  transition: opacity var(--duration-fast) ease, visibility var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.tooltip-anchor:hover > .tooltip-bubble,
.tooltip-anchor:focus-within > .tooltip-bubble {
  opacity: 1;
  visibility: visible;
  transform: translate(var(--tooltip-translate-x), 0);
}

/* ==========================================================
   TRACK
   ========================================================== */
.track {
  --track-size: 0.625rem;
  --track-value: 0%;
  --track-background: var(--slate-100);
  --track-fill-background: var(--primary);
  width: 100%;
  height: var(--track-size);
  overflow: hidden;
  background: var(--track-background);
  border-radius: var(--radius-pill);
}

.track-fill {
  display: block;
  width: min(var(--track-value), 100%);
  height: 100%;
  background: var(--track-fill-background);
  border-radius: inherit;
}

/* ==========================================================
   TEXT TREATMENTS
   ========================================================== */
.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-16);
  padding: var(--space-24);
  background: var(--surface-blue);
  border: 1px solid var(--border-soft-blue);
  border-radius: var(--radius-sm);
}

.callout > .material-symbols-rounded {
  color: var(--primary-hover);
}

.quote-card {
  padding: var(--space-32);
}

.quote-card blockquote {
  color: var(--text);
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.quote-card figcaption {
  margin-top: var(--space-20);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.metric-card {
  display: grid;
  gap: var(--space-12);
  padding: var(--space-24);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}

.metric-value {
  color: var(--text);
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-heading);
}

.metric-label {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ==========================================================
   TIMELINE
   ========================================================== */
.timeline {
  display: grid;
  gap: var(--space-24);
  padding-left: var(--space-24);
  border-left: 1px solid var(--border-blue);
}

.timeline-item {
  position: relative;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: calc((var(--space-24) + 0.375rem) * -1);
  top: 0.45rem;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--primary);
  border: 3px solid var(--surface);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--border-blue);
}

/* ==========================================================
   RESPONSIVE COMPONENTS
   ========================================================== */
@media (max-width: 48rem) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .field-full, .form-head, .form-actions {
    grid-column: auto;
  }
}

@media (max-width: 36rem) {
  .button-row .btn {
    width: 100%;
  }

  .form-actions {
    display: grid;
  }

  .form-actions .btn {
    width: 100%;
  }

  .alert {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .alert-close {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
}

/* ==========================================================
   SECTION HEADINGS
   ========================================================== */
.section-heading {
  width: min(100%, 48rem);
  margin-inline: 0;
  text-align: left;
}

.section-heading :is(h2, p) {
  margin-inline: 0 !important;
  text-align: left !important;
}

.section-eyebrow {
  width: fit-content;
  max-width: none;
  color: var(--text-accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.hero-copy .section-eyebrow {
  margin: auto !important;
}

.section-eyebrow + h2 {
  margin-top: var(--space-16) !important;
}

.section-heading h2 + p {
  max-width: 66ch;
  margin-top: var(--space-20) !important;
  color: var(--text-soft);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

/* ==========================================================
   FEATURE CAROUSEL
   Shared by Evidence and Open Science.
   ========================================================== */
.feature-carousel-section {
  --carousel-control-size: 3.25rem;
  --carousel-padding: var(--space-36);
  --carousel-gap: var(--space-32);
  --carousel-min-height: 18rem;
  --carousel-media-size: 18rem;
  --carousel-stat-size: var(--fs-h1);
  --carousel-title-max: none;
  --carousel-description-max: 48ch;
  --carousel-tooltip-delay: 60ms;
}

.feature-carousel-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 46rem;
  min-width: 0;
  margin: 0 !important;
}

.feature-carousel-heading > * {
  margin-inline: 0 !important;
}

.feature-carousel-heading .section-eyebrow {
  width: fit-content;
}

.feature-carousel-heading h2 {
  width: 100%;
  max-width: 14ch;
}

.feature-carousel-heading > p:not(.section-eyebrow) {
  width: 100%;
  max-width: 38ch;
}

/* ---------- Carousel shell ---------- */
.feature-carousel {
  position: relative;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: var(--carousel-padding);
  margin: 0 !important;
  overflow: visible;
  background: var(--gradient-neutral);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.feature-carousel-stage {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
}

/* ---------- Slides ---------- */
.feature-carousel-slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, var(--carousel-media-size));
  gap: var(--carousel-gap);
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: var(--carousel-min-height);
}

.has-js .feature-carousel-slide {
  grid-area: 1 / 1;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.375rem);
  transition:
    opacity var(--duration-fast) ease,
    transform var(--duration-base) var(--ease-standard),
    visibility 0s linear var(--duration-fast);
}

.has-js .feature-carousel-slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

/* ---------- Copy ---------- */
.feature-carousel-copy {
  width: 100%;
  max-width: 42rem;
  min-width: 0;
}

.feature-carousel-copy {
  gap: 0 !important;
}

.feature-carousel-stat {
  padding-top: var(--space-16);
  width: fit-content;
  max-width: none;
  margin: 0 !important;
  color: transparent;
  background: var(--gradient-blue);
  background-clip: text;
  -webkit-background-clip: text;
  font-family: var(--font-heading);
  font-size: var(--carousel-stat-size);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  -webkit-text-fill-color: transparent;
}

.feature-carousel-copy h3 {
  width: 100%;
  max-width: var(--carousel-title-max);
  margin: var(--space-12) 0 0 !important;
}

.feature-carousel-copy .badge {
  min-height: 1.75rem;
  margin-top: var(--space-16);
  padding: var(--space-8) var(--space-16);
  font-size: var(--fs-xs);
}

.feature-carousel-description {
  max-width: var(--carousel-description-max);
  margin-top: var(--space-16) !important;
  color: var(--text-soft);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.feature-carousel-inline-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-left: 0.25rem;
  color: var(--primary-hover);
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) ease;
}

.feature-carousel-inline-link:hover,
.feature-carousel-inline-link:focus-visible {
  color: var(--primary-active);
  text-decoration: none;
}

.feature-carousel-inline-link .material-symbols-rounded {
  position: relative;
  top: 0.14em;
  flex: 0 0 auto;
  width: auto;
  overflow: visible;
  font-size: 1.05em;
  line-height: 1;
  transition: transform var(--duration-base) var(--ease-standard);
}

.feature-carousel-inline-link:hover .material-symbols-rounded,
.feature-carousel-inline-link:focus-visible .material-symbols-rounded {
  transform: translate(0.125rem, -0.125rem);
}

.feature-carousel-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16) var(--space-20);
  margin-top: var(--space-24);
}

.feature-carousel-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--primary-hover);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.feature-carousel-links a:hover,
.feature-carousel-links a:focus-visible {
  color: var(--primary-active);
}

.feature-carousel-links .material-symbols-rounded {
  font-size: 1.1rem;
}

.feature-carousel-links a .material-symbols-rounded:last-child {
  font-size: 0.95rem;
  transition: transform var(--duration-fast) ease;
}

.feature-carousel-links a:hover .material-symbols-rounded:last-child,
.feature-carousel-links a:focus-visible .material-symbols-rounded:last-child {
  transform: translate(0.15rem, -0.15rem);
}

/* ---------- Media ---------- */
.feature-carousel-media {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, var(--carousel-media-size));
  min-width: 0;
  aspect-ratio: 1;
  margin: 0 auto !important;
  isolation: isolate;
}

.feature-carousel-media::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 88%;
  aspect-ratio: 1;
  background: var(--gradient-soft-blue);
  border-radius: 50%;
}

.feature-carousel-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
}

/* ---------- Controls ---------- */
.feature-carousel-controls {
  display: none;
}

.has-js .feature-carousel-controls {
  --carousel-controls-gap: var(--space-8);
  --carousel-controls-padding: var(--space-12);

  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: var(--carousel-controls-gap);
  width: fit-content;
  max-width: 100%;
  margin: var(--space-32) 0 0 !important;
  padding: var(--carousel-controls-padding);
  overflow: visible;
  background: var(--gradient-glass);
  border: 1px solid var(--border-soft-blue);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft-blue);
  box-sizing: border-box;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.feature-carousel-heading,
.feature-carousel-controls {
  overflow: visible !important;
}

.feature-carousel-control {
  --tooltip-left: 50%;
  --tooltip-right: auto;
  --tooltip-translate-x: -50%;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 1 var(--carousel-control-size);
  width: var(--carousel-control-size);
  min-width: 2.25rem;
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border-soft-blue);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft-blue);
  cursor: pointer;
  transition:
    color var(--duration-fast) ease,
    background var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.feature-carousel-control > .material-symbols-rounded {
  font-size: 1.35rem;
}

.feature-carousel-control:first-child {
  --tooltip-left: 0;
  --tooltip-translate-x: 0;
}

.feature-carousel-control:last-child {
  --tooltip-left: auto;
  --tooltip-right: 0;
  --tooltip-translate-x: 0;
}

.feature-carousel-control:hover,
.feature-carousel-control:focus-visible {
  z-index: 20;
  color: var(--primary-hover);
  background: var(--surface-blue);
  border-color: var(--border-blue);
  box-shadow: var(--shadow-blue);
  transform: translateY(-2px);
}

.feature-carousel-control.is-active {
  z-index: 2;
  color: var(--primary-hover);
  background: var(--surface-blue);
  border-color: var(--border-blue);
  box-shadow: var(--shadow-blue);
  transform: scale(1.1);
}

.feature-carousel-control.is-active > .tooltip-bubble,
.feature-carousel-control:hover > .tooltip-bubble,
.feature-carousel-control:focus-visible > .tooltip-bubble {
  opacity: 1;
  visibility: visible;
  transform: translate(var(--tooltip-translate-x), 0);
  transition-delay: var(--carousel-tooltip-delay), var(--carousel-tooltip-delay), 0s;
}

.feature-carousel-controls:has(.feature-carousel-control:not(.is-active):hover)
  .feature-carousel-control.is-active > .tooltip-bubble,
.feature-carousel-controls:has(.feature-carousel-control:not(.is-active):focus-visible)
  .feature-carousel-control.is-active > .tooltip-bubble,
.feature-carousel.is-autoplay-change
  ~ .feature-carousel-controls .feature-carousel-control.is-active > .tooltip-bubble,
.feature-carousel-section.is-autoplay-change
  .feature-carousel-control.is-active > .tooltip-bubble {
  opacity: 0;
  visibility: hidden;
  transform: translate(var(--tooltip-translate-x), 0.25rem);
  transition-delay: 0s, 0s, var(--duration-fast);
}

/* ---------- Desktop two-column section ---------- */
@media (min-width: 64rem) {
.feature-carousel-heading {
    width: 24rem;
    min-width: 24rem;
    max-width: 24rem;
  }
}

/* ---------- Stacked section ---------- */
@media (max-width: 63.99rem) {
  .feature-carousel-heading {
    width: 100%;
    max-width: none;
    align-self: stretch;
  }

  .feature-carousel-heading h2,
  .feature-carousel-heading > p:not(.section-eyebrow) {
    max-width: 100%;
  }

  .has-js .feature-carousel-controls {
    align-self: center;
    margin: var(--space-28) auto 0 !important;
  }
}

/* ---------- Medium width ---------- */
@media (min-width: 48.01rem) and (max-width: 63.99rem) {
  .feature-carousel-section {
    --carousel-padding: var(--space-28);
    --carousel-gap: var(--space-20);
    --carousel-media-size: 14rem;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 48rem) {
  .feature-carousel-section {
    --carousel-control-size: 3.25rem;
    --carousel-padding: var(--space-36) var(--space-24);
    --carousel-gap: var(--space-24);
    --carousel-min-height: 0;
    --carousel-media-size: 14rem;
  }
.feature-carousel-slide {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature-carousel-copy {
    max-width: none;
  }

  .has-js .feature-carousel-controls {
    margin-top: var(--space-24) !important;
  }
}

/* ---------- Small mobile ---------- */
@media (max-width: 36rem) {
  .feature-carousel-section {
    --carousel-control-size: 2.75rem;
    --carousel-padding: var(--space-32) var(--space-20);
    --carousel-gap: var(--space-20);
    --carousel-media-size: 12.5rem;
  }

  .has-js .feature-carousel-controls {
    --carousel-controls-gap: clamp(0.36rem, 1.4vw, var(--space-12));
    --carousel-controls-padding: clamp(0.64rem, 1.8vw, var(--space-12));

    width: fit-content;
    max-width: 100%;
    justify-content: center;
  }

  .feature-carousel-control {
    flex-shrink: 1;
  }

  .feature-carousel-control > .tooltip-bubble {
    display: none;
  }

  .feature-carousel-links {
    display: grid;
    width: 100%;
  }

  .feature-carousel-links a {
    width: fit-content;
  }
}

/* ---------- Very small mobile ---------- */
@media (max-width: 25rem) {
  .feature-carousel-section {
    --carousel-control-size: 2.5rem;
    --carousel-media-size: 11.5rem;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .feature-carousel-slide,
  .feature-carousel-control,
  .feature-carousel-inline-link .material-symbols-rounded,
  .feature-carousel-links .material-symbols-rounded {
    transition: none !important;
  }
}

/* ==========================================================
   SERVICES
   ========================================================== */
.services-section {
  background: var(--white);
  border-bottom: 1px solid var(--blue-100);
}

/* ==========================================================
   SERVICES · GRID
   ========================================================== */
.services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: stretch !important;
  width: 100%;
  margin: 0 !important;
}

.service-card {
  min-width: 0;
  margin: 0 !important;
}

/* ==========================================================
   SERVICES · STANDARD CARDS
   ========================================================== */
.service-card-standard {
  --visual-radius: var(--radius-md);
  --visual-shadow: var(--shadow-md);
  --card-media-min-height: 0;
  --card-media-ratio: 16 / 9;
  width: 100%;
  height: 100%;
}

.service-card-standard:focus-within {
  --visual-border-color: var(--border-blue);
  --visual-shadow: var(--shadow-soft-blue);
}

/* ---------- Media ---------- */
.service-card-media {
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  margin: 0 !important;
  background: var(--blue-50);
  border-bottom: 1px solid var(--border-soft-blue);
}

.service-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------- Content ---------- */
.service-card-content {
  align-items: flex-start;
  gap: var(--space-16);
  width: 100%;
  min-width: 0;
  height: 100%;
}

.service-card-content > * {
  margin-block: 0 !important;
}

/* ---------- Heading ---------- */
.service-card-standard h3 {
  max-width: none;
  color: var(--text);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

.service-card-title-link {
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.service-card-standard .service-card-title-link,
.service-card-standard .service-card-title-link:visited {
  color: var(--text);
}

.service-card-standard .service-card-title-link:hover,
.service-card-standard .service-card-title-link:focus-visible {
  color: var(--primary-hover);
  text-decoration: none;
}

.service-card-title-link:focus-visible {
  text-decoration: none;
  outline: none;
  border-radius: 0.25rem;
  box-shadow: var(--shadow-focus);
}

.service-card-featured .service-card-title-link,
.service-card-featured .service-card-title-link:visited {
  color: var(--white);
}

.service-card-featured .service-card-title-link:hover,
.service-card-featured .service-card-title-link:focus-visible {
  color: var(--blue-100);
}

/* ---------- Description ---------- */
.service-card-description {
  max-width: none;
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* ==========================================================
   SERVICES · USE CASE LIST
   ========================================================== */
.service-use-cases {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0 !important;
  list-style: none;
}

.service-card-description + .service-use-cases {
  margin-top: var(--space-8) !important;
}

.service-use-cases li {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
  min-width: 0;
  padding: 0;
  margin: 0;
  color: var(--text-soft);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-base);
}

.service-use-cases .material-symbols-rounded {
  display: block;
  width: 1.125rem;
  overflow: visible;
  color: var(--blue-500);
  font-size: 1.125rem;
  line-height: 1;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
}

.service-use-cases li span:last-child {
  min-width: 0;
  overflow-wrap: break-word;
}

/* ---------- Inverse list ---------- */
.service-use-cases-inverse li {
  color: var(--blue-50);
}

.service-use-cases-inverse .material-symbols-rounded {
  color: var(--blue-200);
}

/* ---------- Featured two-column list ---------- */
.service-use-cases-featured {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-32);
  row-gap: var(--space-12);
}

/* ==========================================================
   SERVICES · CARD ACTIONS
   ========================================================== */
.service-card-actions {
  width: 100%;
  margin-top: auto !important;
  padding-top: var(--space-16);
}

/* ---------- Standard full-width button ---------- */
.service-card-button {
  width: 100%;
  --btn-height: 3.5rem;
  --btn-padding-inline: var(--space-24);
  --btn-gap: var(--space-12);
  --btn-radius: var(--radius-pill);
  --btn-color: var(--white);
  --btn-background: var(--gradient-blue);
  --btn-border-color: var(--blue-600);
  --btn-color-hover: var(--white);
  --btn-background-hover: var(--primary-hover);
  --btn-border-color-hover: var(--blue-600);
  --btn-shadow-hover: var(--shadow-blue);
}

.service-card-button .material-symbols-rounded {
  flex: 0 0 auto;
  font-size: 1.25rem;
  transition: transform var(--duration-base) var(--ease-standard);
}

.service-card-button:hover .material-symbols-rounded,
.service-card-button:focus-within .material-symbols-rounded {
  transform: translateX(0.25rem);
}

/* ==========================================================
   SERVICES · FEATURED POC CARD
   ========================================================== */
.service-card-featured {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--space-48);
  color: rgba(255, 255, 255, 0.86);
  background: radial-gradient(circle at 88% 10%, rgba(255, 255, 255, 0.18), transparent 34%), radial-gradient(circle at 4% 110%, rgba(128, 190, 248, 0.3), transparent 42%), linear-gradient(135deg, var(--blue-600) 0%, var(--blue-700) 62%, var(--blue-800) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-blue);
}

.service-card-featured::before,
.service-card-featured::after {
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}

.service-card-featured::before {
  top: -12rem;
  right: -8rem;
  width: 28rem;
}

.service-card-featured::after {
  right: 12%;
  bottom: -11rem;
  width: 20rem;
}

/* ---------- Featured layout ---------- */
.service-card-featured-layout {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.92fr);
  gap: var(--space-48);
  align-items: center !important;
  width: 100%;
  margin: 0 !important;
}

/* ---------- Featured copy ---------- */
.service-card-featured-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  width: 100%;
  min-width: 0;
}

.service-card-featured-copy > * {
  margin-block: 0 !important;
}

.service-card-featured h3 {
  max-width: 20ch;
  color: var(--white);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
}

.service-card-featured-description {
  max-width: 48ch;
  color: var(--blue-50);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* ---------- Featured action ---------- */
.service-card-featured .service-card-actions {
  width: auto;
  margin-top: auto !important;
  padding-top: var(--space-16);
}

.service-card-featured .service-card-button {
  width: auto;
  --btn-color: var(--white);
  --btn-background: transparent;
  --btn-border-color: rgba(255, 255, 255, 0.88);
  --btn-color-hover: var(--white);
  --btn-background-hover: rgba(255, 255, 255, 0.1);
  --btn-border-color-hover: var(--white);
  --btn-shadow-hover: 0 14px 30px -20px rgba(255, 255, 255, 0.5);
}

.service-card-featured-star {
  color: #FFD166;
  font-size: 1.125rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.service-card-button-arrow {
  margin-left: var(--space-8);
}

/* ==========================================================
   SERVICES · FEATURED VISUAL
   ========================================================== */
.service-card-featured-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  min-width: 0;
}

/* ---------- Illustration ---------- */
.service-card-featured-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  margin: 0 !important;
  overflow: visible;
}

.service-card-featured-media::before {
  content: "";
  position: absolute;
  inset: 10% 6%;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(128, 190, 248, 0.22), transparent 66%);
  border-radius: 50%;
}

.service-card-featured-media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-height: 19rem;
  object-fit: contain;
  object-position: center bottom;
}

/* ==========================================================
   SERVICES · DELIVERY BADGE
   ========================================================== */
.service-delivery-badge {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: var(--space-8);
  row-gap: 0;
  width: fit-content;
  max-width: 100%;
  min-height: 2.5rem;
  padding: var(--space-8) var(--space-16);
  /* * Slight overlap removes the visual gap between
   * illustration and metadata. */
  margin: -0.125rem auto 0 !important;
  color: var(--blue-50);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.service-delivery-badge .material-symbols-rounded {
  flex: 0 0 auto;
  width: auto;
  overflow: visible;
  color: var(--blue-100);
  font-size: 1.125rem;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 350, "GRAD" 0, "opsz" 24;
}

.service-delivery-badge strong {
  color: var(--white);
  font-weight: 600;
  white-space: nowrap;
}

/* ==========================================================
   SERVICES · RESPONSIVE
   ========================================================== */
@media (max-width: 64rem) {
  .service-card-featured {
    padding: var(--space-36);
    padding-bottom: var(--space-48);
  }

  .service-card-featured-layout {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.82fr);
    gap: var(--space-32);
  }

  .service-card-featured-media img {
    max-height: 18rem;
  }
}

@media (max-width: 56.25rem) {
  .services-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-card-standard {
    max-width: 42rem;
    margin-inline: auto !important;
  }
}

@media (max-width: 42rem) {
  .service-card-featured-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-32);
  }

  .service-card-featured h3 {
    max-width: none;
  }

  .service-use-cases-featured {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-card-featured-visual {
    width: min(100%, 32rem);
    margin-inline: auto;
  }

  .service-card-featured-media img {
    max-height: 17rem;
  }
}

@media (max-width: 36rem) {
  .service-card-featured {
    padding: var(--space-48);
  }

  .service-card-featured .service-card-actions {
    width: 100% !important;
  }

  .service-card-featured .service-card-button {
    width: 100%;
  }
}

@media (max-width: 30rem) {
  .service-delivery-badge {
    flex-wrap: wrap;
    margin-top: var(--space-8) !important;
    min-height: 0;
    line-height: var(--lh-base);
    white-space: normal;
  }
}

/* ==========================================================
   SERVICES · REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .service-card-button .material-symbols-rounded {
    transition: none;
  }
}

@media (max-width: 42rem) {

  .service-card-featured-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-36);
  }

  .service-card-featured-copy {
    gap: var(--space-20);
  }
}

@media (max-width: 36rem) {
  .service-card-featured {
    padding: var(--space-36) var(--space-24);
  }
}

/* ==========================================================
   FEATURED BUTTON · LUXURY GOLD
   ========================================================== */
.service-card-featured .service-card-button.is-luxury-gold {
  --btn-height: 3.375rem;
  --btn-padding-inline: var(--space-32);
  --btn-gap: var(--space-8);
  --btn-color: #022a57;
  --btn-background: linear-gradient(135deg, #feefbd 0%, #fde397 24%, #f7d978 56%, #ffe08f 80%, #e8bb4d 100%);
  --btn-border-color: #f4d98e;
  --btn-color-hover: #022a57;
  --btn-background-hover: linear-gradient(135deg, #fff9e6 0%, #ffefbd 24%, #fbe08e 56%, #ffe7a7 80%, #efc65f 100%);
  --btn-border-color-hover: #f7df9c;
  --btn-shadow-hover: 0 14px 32px -16px rgba(224, 169, 49, 0.78), 0 0 20px rgba(255, 220, 120, 0.22);
}

.service-card-featured .service-card-button.is-luxury-gold .material-symbols-rounded {
  color: currentColor;
}

.service-card-featured .service-card-button.is-luxury-gold .service-card-button-arrow {
  margin-left: 0;
}

@media (max-width: 36rem) {
  .service-card-featured .service-card-actions,
.service-card-featured .service-card-button.is-luxury-gold {
    width: 100% !important;
  }
}

/* ==========================================================
   SERVICES · FEATURED POC CARD · LAYOUT
   ========================================================== */
.service-card-featured-layout {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.92fr);
  grid-template-areas: "copy visual" "action visual";
  column-gap: var(--space-48);
  row-gap: var(--space-24);
  align-items: center;
  width: 100%;
  min-width: 0;
  margin: 0 !important;
}

/* ==========================================================
   SERVICES · FEATURED POC CARD · COPY
   ========================================================== */
.service-card-featured-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  width: 100%;
  min-width: 0;
  margin: 0 !important;
}

.service-card-featured-copy > * {
  margin-block: 0 !important;
}

.service-card-featured h3 {
  max-width: 20ch;
  color: var(--white);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
  text-wrap: balance;
}

.service-card-featured-description {
  max-width: 48ch;
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-relaxed);
}

/* ==========================================================
   SERVICES · FEATURED POC CARD · VISUAL
   ========================================================== */
.service-card-featured-visual {
  grid-area: visual;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-width: 0;
  margin: 0 !important;
}

/* ---------- Illustration ---------- */
.service-card-featured-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  margin: 0 !important;
  overflow: visible;
}

.service-card-featured-media::before {
  content: "";
  position: absolute;
  inset: 10% 6%;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(128, 190, 248, 0.22), transparent 66%);
  border-radius: 50%;
}

.service-card-featured-media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-height: 19rem;
  object-fit: contain;
  object-position: center bottom;
}

/* ==========================================================
   SERVICES · FEATURED POC CARD · ACTION
   ========================================================== */
.service-card-featured-actions {
  grid-area: action;
  align-self: start;
  justify-self: start;
  width: auto;
  padding-top: 0;
  margin: 0 !important;
}

.service-card-featured-actions .service-card-button {
  width: auto;
}

@media (max-width: 64rem) {
  .service-card-featured {
    padding: var(--space-36) var(--space-36) var(--space-48);
  }

  .service-card-featured-layout {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.82fr);
    column-gap: var(--space-32);
    row-gap: var(--space-20);
  }

  .service-card-featured h3 {
    max-width: 18ch;
  }

  .service-use-cases-featured {
    column-gap: var(--space-24);
  }

  .service-card-featured-media img {
    max-height: 17rem;
  }
}

@media (max-width: 56.25rem) {
  .service-card-featured {
    padding: var(--space-48) var(--space-32);
    width: 100%;
    max-width: 42rem;
    margin-inline: auto !important;
  }

  .service-card-featured-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "visual" "action";
    gap: var(--space-32);
  }

  .service-card-featured h3 {
    max-width: none;
  }

  .service-card-featured-description {
    max-width: 100%;
  }

  .service-card-featured-visual {
    width: min(100%, 34rem);
    margin-inline: auto !important;
  }

  .service-card-featured-media img {
    max-height: 18rem;
  }

  .service-card-featured-actions {
    justify-self: stretch;
    width: 100%;
  }

  .service-card-featured-actions .service-card-button {
    width: 100% !important;
  }
}

@media (max-width: 42rem) {
  .service-card-featured {
    padding: var(--space-32) var(--space-24) var(--space-48);
  }

  .service-card-featured-layout {
    gap: var(--space-28);
  }

  .service-card-featured-copy {
    gap: var(--space-20);
  }

  .service-use-cases-featured {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-8);
  }

  .service-card-featured-visual {
    width: min(100%, 30rem);
  }

  .service-card-featured-media img {
    max-height: 17rem;
  }
}

@media (max-width: 36rem) {
  .service-card-featured {
    padding: var(--space-32) var(--space-20) var(--space-48);
  }

  .service-card-featured-layout {
    gap: var(--space-24);
  }

  .service-card-featured-media {
    aspect-ratio: 4 / 3;
  }

  .service-card-featured-media img {
    max-height: 16rem;
  }

  .service-card-featured-actions .service-card-button.is-luxury-gold {
    --btn-height: 3.5rem;
    --btn-padding-inline: var(--space-20);
  }
}

@media (max-width: 30rem) {
  .service-card-featured {
    padding: var(--space-28) var(--space-16) var(--space-36);
  }


  .service-card-featured-description {
    line-height: var(--lh-base);
  }

  .service-card-featured-media {
    aspect-ratio: 4 / 3;
  }

  .service-card-featured-media img {
    max-height: 14.5rem;
  }

  .service-delivery-badge {
    flex-wrap: wrap;
    min-height: 0;
    margin-top: var(--space-8) !important;
    line-height: var(--lh-base);
    white-space: normal;
  }
}

/* ==========================================================
   FEATURED BUTTON · LUXURY GOLD
   ========================================================== */
.service-card-featured .service-card-button.is-luxury-gold {
  --btn-height: 3.375rem;
  --btn-padding-inline: var(--space-32);
  --btn-gap: var(--space-8);
  --btn-color: #022a57;
  --btn-background: linear-gradient(135deg, #feefbd 0%, #fde397 24%, #f7d978 56%, #ffe08f 80%, #e8bb4d 100%);
  --btn-border-color: #f4d98e;
  --btn-color-hover: #022a57;
  --btn-background-hover: linear-gradient(135deg, #fff9e6 0%, #ffefbd 24%, #fbe08e 56%, #ffe7a7 80%, #efc65f 100%);
  --btn-border-color-hover: #f7df9c;
  --btn-shadow-hover: 0 14px 32px -16px rgba(224, 169, 49, 0.78), 0 0 20px rgba(255, 220, 120, 0.22);
}

.service-card-featured .service-card-button.is-luxury-gold .material-symbols-rounded {
  color: currentColor;
}

.service-card-featured .service-card-button.is-luxury-gold .service-card-button-arrow {
  margin-left: 0;
}

/* ==========================================================
   BRAND HIGHLIGHTS
   ========================================================== */
.brand-highlights {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-48) var(--space-36);
  color: rgba(255, 255, 255, 0.84);
  background: radial-gradient(circle at 50% -16%, rgba(64, 154, 241, 0.18), transparent 44%), radial-gradient(circle at 92% 90%, rgba(0, 115, 229, 0.1), transparent 38%), linear-gradient(135deg, var(--blue-900) 0%, var(--blue-800) 56%, #003f7d 100%);
}

.brand-highlights::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.014), transparent 28%, rgba(255, 255, 255, 0.018));
}

/* ==========================================================
   BRAND HIGHLIGHTS · INNER
   ========================================================== */
.brand-highlights-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* ==========================================================
   BRAND HIGHLIGHTS · HEADING
   ========================================================== */
.brand-highlights-heading {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: none;
  margin: 0 0 var(--space-20) !important;
  text-align: center;
}

.brand-highlights-heading h2 {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 !important;
  color: var(--blue-50);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-align: center;
  text-wrap: balance;
}

/* ==========================================================
   BRAND HIGHLIGHTS · GRID
   ========================================================== */
.brand-highlights-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
}

/* ==========================================================
   BRAND HIGHLIGHTS · ITEM
   ========================================================== */
.brand-highlight-item {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-20);
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  min-height: 10rem;
  padding: var(--space-20) var(--space-24);
  margin: 0 !important;
  text-align: center;
}

.brand-highlight-item > * {
  margin: 0 !important;
}

/* ---------- Vertical separators ---------- */
.brand-highlight-item + .brand-highlight-item::before {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(128, 190, 248, 0.24) 22%, rgba(128, 190, 248, 0.24) 78%, transparent);
}

/* ==========================================================
   BRAND HIGHLIGHTS · ICON
   ========================================================== */
.brand-highlight-icon {
  display: grid !important;
  place-items: center;
  flex: 0 0 auto;
  width: 4.75rem !important;
  height: 4.75rem;
  color: var(--blue-100);
}

.brand-highlight-icon .material-symbols-rounded {
  display: block;
  width: auto;
  overflow: visible;
  font-size: 4rem;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 48;
}

/* ==========================================================
   BRAND HIGHLIGHTS · LINK
   ========================================================== */
.brand-highlight-link {
  width: 100% !important;
  max-width: 15rem;
  margin: 0 !important;
  line-height: 1;
}

.brand-highlight-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: fit-content;
  max-width: 100%;
  color: var(--blue-50);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-base);
  text-align: center;
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.brand-highlight-link a:hover,
.brand-highlight-link a:focus-visible {
  color: var(--white);
}

.brand-highlight-link .material-symbols-rounded {
  flex: 0 0 auto;
  width: auto;
  overflow: visible;
  color: var(--blue-200);
  font-size: 1.125rem;
  line-height: 1;
  transition: color var(--duration-fast) ease, transform var(--duration-base) var(--ease-standard);
}

.brand-highlight-link a:hover .material-symbols-rounded,
.brand-highlight-link a:focus-visible .material-symbols-rounded {
  color: var(--blue-100);
  transform: translate(0.125rem, -0.125rem);
}

/* ==========================================================
   BRAND HIGHLIGHTS · ITEM INTERACTION
   ========================================================== */
.brand-highlight-item {
  transition: background var(--duration-fast) ease;
}

.brand-highlight-item:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01));
}

/* ==========================================================
   BRAND HIGHLIGHTS · RESPONSIVE
   ========================================================== */
@media (max-width: 64rem) {
  .brand-highlights {
    padding-block: var(--space-36) var(--space-24);
  }

  .brand-highlights-heading {
    margin-bottom: var(--space-16) !important;
  }

  .brand-highlights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-highlight-item {
    min-height: 11rem;
    padding: var(--space-28) var(--space-20);
  }

  /* * Remove vertical separator from the first item
   * of the second row. */
  .brand-highlight-item:nth-child(3)::before {
    display: none;
  }

  /* * Add horizontal separators between rows. */
  .brand-highlight-item:nth-child(n + 3)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 12%;
    left: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(128, 190, 248, 0.22) 20%, rgba(128, 190, 248, 0.22) 80%, transparent);
  }
}

/* ==========================================================
   BRAND HIGHLIGHTS · MOBILE
   ========================================================== */
@media (max-width: 36rem) {
  .brand-highlights {
    padding-block: var(--space-32) var(--space-20);
  }

  .brand-highlights-heading {
    margin-bottom: var(--space-12) !important;
  }

  .brand-highlights-heading h2 {
    font-size: var(--fs-h4);
  }

  .brand-highlights-heading h2::after {
    margin-top: var(--space-10);
  }

  .brand-highlights-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .brand-highlight-item {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
    min-height: 10rem;
    padding: var(--space-24) var(--space-20);
    text-align: center;
  }
.brand-highlight-item + .brand-highlight-item::before {
    display: block;
    top: 0;
    right: 12%;
    bottom: auto;
    left: 12%;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(128, 190, 248, 0.22) 20%, rgba(128, 190, 248, 0.22) 80%, transparent);
  }

  .brand-highlight-item:nth-child(n + 3)::after {
    display: none;
  }

  .brand-highlight-icon {
    width: 4rem !important;
    height: 4rem;
  }

  .brand-highlight-icon .material-symbols-rounded {
    font-size: 2.375rem;
  }

  .brand-highlight-link {
    width: 100% !important;
    max-width: 16rem;
    text-align: center;
  }

  .brand-highlight-link a {
    justify-content: center;
    width: 100%;
    text-align: center;
  }

  .brand-highlight-link a > span:first-child {
    text-align: center;
  }
}

/* ==========================================================
   BRAND HIGHLIGHTS · REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .brand-highlight-item, .brand-highlight-link a, .brand-highlight-link .material-symbols-rounded {
    transition: none;
  }
}

/* ==========================================================
   PRICING & CONTACT · SHARED GUTENBERG RESET
   ========================================================== */
.pricing-section,
.contact-section {
  --section-panel-background: var(--surface);
  --section-panel-border: var(--border-soft-blue);
  --section-panel-radius: var(--radius-lg);
  --section-panel-shadow: var(--shadow-md);
}

/* ==========================================================
   SECTION BACKGROUNDS
   ========================================================== */
.pricing-section {
  overflow: hidden;
  background: #f2f8fe69;
}

.contact-section {
  overflow: hidden;
  background: var(--surface);
  border-top: 1px solid var(--border-soft);
}

/* ==========================================================
   PRICING
   ========================================================== */
.pricing-section .pricing-section-heading {
  width: min(100%, 46rem);
}

.pricing-section .pricing-section-heading p {
  max-width: 42rem;
}

.pricing-section .pricing-comparison {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  margin: 0 !important;
  background: var(--section-panel-background);
  border: 1px solid var(--section-panel-border);
  border-radius: var(--section-panel-radius);
  box-shadow: var(--section-panel-shadow);
}

/* ==========================================================
   PRICING · HEADER
   ========================================================== */
.pricing-section .pricing-comparison-head {
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  background: var(--slate-50);
  border-bottom: 1px solid var(--border-soft);
}

.pricing-section .pricing-comparison-copy,
.pricing-section .pricing-service-control {
  width: 100%;
  min-width: 0;
  margin: 0 !important;
}

.pricing-section .pricing-current-label {
  width: fit-content;
  max-width: none;
  color: var(--text-accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.pricing-section .pricing-current-title {
  width: 100%;
  max-width: none;
  margin-top: var(--space-8) !important;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

.pricing-section .pricing-current-description {
  width: 100%;
  max-width: none;
  margin-top: var(--space-8) !important;
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.pricing-section .pricing-service-label {
  width: fit-content;
  max-width: none;
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: var(--lh-base);
}

.pricing-section .pricing-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin: 0 !important;
}

.pricing-section .pricing-select-wrap > .material-symbols-rounded {
  position: absolute;
  left: var(--space-16);
  z-index: 2;
  color: var(--primary);
  font-size: 1.25rem;
  pointer-events: none;
}

.pricing-section .pricing-service-select {
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--control-height);
  padding: 0 calc(var(--space-16) + 1.75rem) 0 calc(var(--space-16) + 2rem);
  color: var(--text);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234d5f77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-16) center;
  background-size: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.pricing-section .pricing-service-select:hover {
  border-color: var(--slate-300);
}

.pricing-section .pricing-service-select:focus {
  outline: none;
  border-color: var(--blue-400);
  box-shadow: var(--shadow-focus);
}

/* ==========================================================
   PRICING · PLAN SWITCHER
   ========================================================== */
.pricing-section .pricing-plan-switcher {
  display: none;
  gap: var(--space-8);
  padding: var(--space-16);
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
}

.pricing-section .pricing-plan-switch {
  flex: 1;
  min-height: 2.75rem;
  padding-inline: var(--space-12);
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--duration-fast) ease, background var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.pricing-section .pricing-plan-switch:hover {
  color: var(--primary-hover);
  background: var(--blue-50);
}

.pricing-section .pricing-plan-switch.is-active {
  color: var(--primary-hover);
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--border-blue);
}

/* ==========================================================
   PRICING · TABLE
   ========================================================== */
.pricing-section .pricing-table-wrap {
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}

.pricing-section .pricing-table-wrap > * {
  margin: 0 !important;
}

.pricing-section .pricing-table {
  width: 100%;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.pricing-section .pricing-table th,
.pricing-section .pricing-table td {
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.pricing-section .pricing-table th:last-child,
.pricing-section .pricing-table td:last-child {
  border-right: 0;
}

.pricing-section .pricing-table tbody tr:last-child td {
  border-bottom: 0;
}

.pricing-section .pricing-table thead th {
  padding: var(--space-20);
  color: var(--text);
  background: var(--surface);
  text-align: center;
  vertical-align: top;
}

.pricing-section .pricing-table thead th:first-child {
  width: 34%;
  padding-left: var(--space-28);
  text-align: left;
}

.pricing-section .pricing-table thead th:nth-child(3) {
  background: var(--blue-50);
}

.pricing-section .pricing-plan-name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.pricing-section .pricing-plan-price {
  display: block;
  margin-top: var(--space-8);
  color: var(--primary-hover);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: var(--lh-base);
}

.pricing-section .pricing-table tbody td {
  padding: var(--space-12) var(--space-20);
  color: var(--text-soft);
  background: var(--surface);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  text-align: center;
  vertical-align: middle;
}

.pricing-section .pricing-table tbody td:first-child {
  padding-left: var(--space-28);
  color: var(--text);
  font-weight: 500;
  text-align: left;
}

.pricing-section .pricing-table tbody td:nth-child(3) {
  background: color-mix(in srgb, var(--blue-50) 72%, var(--surface));
}

.pricing-section .pricing-table tbody tr:hover td {
  background: var(--blue-50);
}

.pricing-section .pricing-table-row-summary td,
.pricing-section .pricing-table-row-price td {
  background: var(--slate-50);
  font-weight: 600;
}

.pricing-section .pricing-table-row-price td {
  padding-block: var(--space-20);
}

.pricing-section .pricing-table-row-price td:not(:first-child) {
  color: var(--primary-hover);
}

.pricing-section .pricing-status {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}

.pricing-section .pricing-status::before {
  display: block;

  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}

.pricing-section .pricing-status-included {
  color: var(--white);
  background: var(--primary);
}

.pricing-section .pricing-status-included::before {
  content: "✓";
}

.pricing-section .pricing-status-unavailable {
  color: var(--slate-500);
  background: var(--slate-100);
}

.pricing-section .pricing-status-unavailable::before {
  content: "×";
}

.pricing-section .pricing-table-note,
.pricing-section .pricing-noscript {
  max-width: none;
  padding: var(--space-16) var(--space-28);
  margin: 0 !important;
  color: var(--slate-700);
  background: var(--slate-50);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  text-align: center;
}

/* ==========================================================
   CONTACT
   ========================================================== */
.contact-section .contact-layout {
  position: relative;
  z-index: 1;
  width: min(calc(100% - (var(--gutter) * 2)), var(--container-max));
  max-width: none;
  margin-inline: auto !important;
}

.contact-section .contact-intro,
.contact-section .contact-options,
.contact-section .contact-option,
.contact-section .contact-option-copy {
  width: 100%;
  min-width: 0;
  margin: 0 !important;
}

.contact-section .contact-section-heading {
  width: 100%;
  max-width: 34rem;
  margin: 0 !important;
}

.contact-section .contact-option-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 !important;
  color: var(--primary-hover);
  background: var(--blue-50);
  border: 1px solid var(--border-soft-blue);
  border-radius: var(--radius-sm);
}

.contact-section .contact-option-icon .material-symbols-rounded {
  font-size: 1.625rem;
}

.contact-section .contact-option-copy h3 {
  font-size: var(--fs-h5);
}

.contact-section .contact-option-copy > p {
  max-width: 28rem;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

.contact-section .contact-option-link {
  margin-top: var(--space-8) !important;
}

.contact-section .contact-option-link a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--primary-hover);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

/* ==========================================================
   CONTACT · FORM
   ========================================================== */
.contact-section .contact-form-panel {
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: var(--space-32);
  margin: 0 !important;
  background: var(--blue-50);
  border: 1px solid var(--section-panel-border);
  border-radius: var(--section-panel-radius);
  box-shadow: var(--section-panel-shadow);
}

.contact-section .contact-form {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.contact-section .contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-20);
  width: 100%;
}

.contact-section .contact-field {
  display: grid;
  gap: var(--space-8);
  min-width: 0;
}

.contact-section .contact-field-full {
  grid-column: 1 / -1;
}

.contact-section .contact-field label {
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: var(--lh-base);
}

.contact-section .contact-field label span {
  color: var(--primary);
}

.contact-section .contact-control {
  width: 100%;
  min-width: 0;
  max-width: none;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.contact-section input.contact-control,
.contact-section select.contact-control {
  height: var(--control-height);
  padding-inline: var(--space-16);
}

.contact-section textarea.contact-control {
  min-height: 10rem;
  padding: var(--space-16);
  line-height: var(--lh-relaxed);
  resize: vertical;
}

.contact-section .contact-control::placeholder {
  color: var(--slate-400);
}

.contact-section .contact-control:hover {
  border-color: var(--slate-300);
}

.contact-section .contact-control:focus {
  outline: none;
  border-color: var(--blue-400);
  box-shadow: var(--shadow-focus);
}

.contact-section .contact-select-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}

.contact-section .contact-select {
  padding-right: calc(var(--space-16) + 1.75rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234d5f77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-16) center;
  background-size: 1rem;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.contact-section .contact-form-footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--space-12);
}

.contact-section .contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--control-height);
  padding-inline: var(--space-32);
  color: var(--white);
  background: var(--gradient-blue);
  border: 1px solid var(--blue-600);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.contact-section .contact-submit:hover {
  box-shadow: var(--shadow-blue);
  transform: translateY(-1px);
}

.contact-section .contact-submit:active {
  transform: translateY(0);
}

.contact-section .contact-submit .material-symbols-rounded {
  font-size: 1.125rem;
}

/* ==========================================================
   PRICING & CONTACT · RESPONSIVE
   ========================================================== */
@media (max-width: 72rem) {
}

@media (max-width: 60rem) {

  .pricing-section .pricing-current-title,
.pricing-section .pricing-current-description {
    max-width: none;
  }
}

@media (max-width: 48rem) {
  .pricing-section .pricing-plan-switcher {
    display: flex;
  }

  .pricing-section .pricing-table th:first-child,
.pricing-section .pricing-table td:first-child {
    display: table-cell;
    width: 58%;
  }

  .pricing-section .pricing-table th:not(:first-child),
.pricing-section .pricing-table td:not(:first-child) {
    display: none;
  }

  .pricing-section .pricing-table[data-mobile-plan="1"] :is(th, td):nth-child(2),
.pricing-section .pricing-table[data-mobile-plan="2"] :is(th, td):nth-child(3),
.pricing-section .pricing-table[data-mobile-plan="3"] :is(th, td):nth-child(4) {
    display: table-cell;
    width: 42%;
  }

  .pricing-section .pricing-table thead th,
.pricing-section .pricing-table tbody td {
    padding-inline: var(--space-16);
  }

  .pricing-section .pricing-table thead th:first-child,
.pricing-section .pricing-table tbody td:first-child {
    padding-left: var(--space-20);
  }

  .pricing-section .pricing-table tbody td {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 40rem) {
  .contact-section .contact-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-section .contact-form-panel {
    padding: var(--space-24);
  }

  .contact-section .contact-field-full,
.contact-section .contact-form-footer {
    grid-column: auto;
  }

  .contact-section .contact-submit {
    width: 100%;
  }
}

@media (max-width: 36rem) {

  .pricing-section .pricing-current-title {
    margin-top: var(--space-8) !important;
    font-size: var(--fs-h5);
  }

  .pricing-section .pricing-current-description {
    margin-top: var(--space-8) !important;
    line-height: var(--lh-base);
  }

  .pricing-section .pricing-service-select {
    font-size: var(--fs-xs);
  }

  .pricing-section .pricing-plan-switcher {
    padding: var(--space-12);
  }

  .pricing-section .pricing-plan-switch {
    padding-inline: var(--space-8);
    font-size: var(--fs-xs);
  }
}

@media (max-width: 30rem) {
  .contact-section .contact-form-panel {
    padding: var(--space-20);
  }

  .pricing-section .pricing-table-note,
.pricing-section .pricing-noscript {
    padding-inline: var(--space-20);
  }
}

.pricing-table-note__link {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  color: var(--primary-hover) !important;
  font-weight: 600;
  line-height: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.pricing-table-note__link .material-symbols-rounded {
  width: auto;
  overflow: visible;
  font-size: 0.95em;
  line-height: 1;
  transition: transform var(--duration-base) var(--ease-standard);
}

.pricing-table-note__link:hover,
.pricing-table-note__link:focus-visible,
.pricing-table-note__link:target,
.pricing-table-note__link:active,
.pricing-table-note__link:visited {
  color: var(--primary-active);
}

.pricing-table-note__link:hover .material-symbols-rounded,
.pricing-table-note__link:focus-visible .material-symbols-rounded {
  transform: translate(0.125rem, -0.125rem);
}

.service-card-button span {
  font-weight: 600 !important;
}


/* ==========================================================
   CONTACT FORM · FEEDBACK
   ========================================================== */

.contact-field-error {
	display: block;
	min-height: 1.25rem;
	margin-top: var(--space-8);
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--color-error, #b42318);
}

.contact-field-error:empty {
	display: none;
}

.contact-form-status {
	grid-column: 1 / -1;
	padding: var(--space-16);
	border-radius: var(--radius-md);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.contact-form-status:empty {
	display: none;
}

.contact-form-status-success {
	background: var(--blue-50);
	color: var(--slate-800);
}

.contact-form-status-error {
	background: #fef3f2;
	color: #b42318;
}

.contact-submit:disabled {
	cursor: wait;
	opacity: 0.65;
}

.cf-turnstile {
  display: flex;
  justify-content: center;
}

/* ==========================================================
   ARGENTICARE · WEBSITE
   GeneratePress integration and website-specific patterns.
   ========================================================== */

/* ==========================================================
   THEME SHELL
   ========================================================== */
body {
  color: var(--text-soft);
  background: var(--surface);
}

#page {
  position: relative;
  width: 100%;
  min-width: 0;
  background: var(--surface);
  isolation: isolate;
}

/* * Prevent long content,
grids and media from forcing
 * GeneratePress wrappers beyond the viewport width. */
.site-content,
.content-area,
.site-main,
.inside-article,
.entry-content {
  min-width: 0;
}

/* ==========================================================
   HOME · FULL-WIDTH CONTENT CANVAS
   ========================================================== */

/* * The Home page uses GeneratePress's Full Width content
 * container. Major page regions can therefore span the full
 * viewport and use .container internally for alignment. */
.home #page {
  max-width: none;
  margin-inline: 0;
}

.home .site-content {
  display: block;
  width: 100%;
  padding: 0;
}

.home .content-area {
  float: none;
  width: 100%;
}

.home .site-main {
  margin: 0;
}

.home .inside-article {
  padding: 0;
  background: transparent;
}

.home .entry-content {
  margin: 0;
}

.home .entry-content > :first-child {
  margin-top: 0;
}

.home .entry-content > :last-child {
  margin-bottom: 0;
}

/* ==========================================================
   FULL-WIDTH PAGE SECTIONS
   ========================================================== */

/* * Standard structure:
 *
 * <section class="section">
 *   <div class="container">
 *     ...
 *   </div>
 * </section> */
.entry-content .section {
  width: 100%;
  max-width: none;
}

.blocks-gallery-caption {
  margin-top: var(--space-12);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
}

/* ==========================================================
   WORDPRESS ALIGNMENT
   ========================================================== */
.entry-content > .alignwide {
  width: min(calc(100% - (var(--gutter) * 2)), var(--container-max));
  max-width: var(--container-max);
  margin-inline: auto;
}

.entry-content > .alignfull {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* ==========================================================
   WORDPRESS SCREEN READER TEXT
   ========================================================== */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.screen-reader-text:focus {
  position: fixed !important;
  top: var(--space-16);
  left: var(--space-16);
  z-index: 100000;
  display: block;
  width: auto;
  height: auto;
  padding: var(--space-12) var(--space-16);
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  color: var(--blue-900);
  background: var(--surface);
  border: 1px solid var(--border-blue);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-base);
  text-decoration: none;
  white-space: normal;
}

/* ==========================================================
   HEADER · GENERATEPRESS
   ========================================================== */

/* ---------- Header shell ---------- */
#masthead.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  width: 100%;
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: blur(0) saturate(100%);
  -webkit-backdrop-filter: blur(0) saturate(100%);
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, backdrop-filter var(--duration-fast) ease, -webkit-backdrop-filter var(--duration-fast) ease;
}

/* ---------- Scrolled and open states ---------- */
#masthead.site-header.is-scrolled,
#masthead.site-header.is-menu-open {
  background: rgba(255, 255, 255, 0.58);
  border-bottom-color: rgba(217, 222, 229, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* * Keep the sticky header below the WordPress admin bar
  * while the user is logged in. */
.admin-bar #masthead.site-header {
  top: 32px;
}

/* ==========================================================
   HEADER · PAGE OFFSET
   ========================================================== */

/*
 * Internal pages need space for the fixed header.
 *
 * Pages that start with the shared hero manage the header
 * offset inside the hero itself.
 */
body:not(.home) #page {
	padding-top: var(--header-height);
}

/* Gutenberg pages that start with the shared hero. */
body:has(.entry-content > .hero:first-child) #page {
	padding-top: 0;
}

/* Blog archive and category archives start with a PHP-rendered
 * shared hero,
outside .entry-content. */
body.blog #page,
body.category #page {
	padding-top: 0;
}

/* ==========================================================
   HEADER · CONTAINER
   ========================================================== */
#masthead .inside-header {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-32);
  width: min(calc(100% - (var(--gutter) * 2)), var(--container-max));
  max-width: var(--container-max);
  min-height: var(--header-height);
  padding: 0;
  margin-inline: auto;
}

/* ==========================================================
   HEADER · BRAND
   ========================================================== */

/* * The horizontal SVG already contains the argenticare
 * wordmark,
so the additional WordPress site title is hidden. */
#masthead .site-branding {
  display: none;
}

#masthead .site-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: auto;
}

#masthead .site-logo a {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

#masthead .site-logo .header-image {
  display: block;
  width: auto;
  height: 2.25rem;
  max-width: min(13.5rem, 38vw);
  object-fit: contain;
  object-position: left center;
}

/* ==========================================================
   HEADER · PRIMARY NAVIGATION
   ========================================================== */
#site-navigation.main-navigation {
  flex: 0 0 auto;
  margin-left: auto;
  background: transparent;
}

#site-navigation .inside-navigation {
  display: flex;
  align-items: center;
  min-height: var(--header-height);
}

#site-navigation .main-nav {
  display: block;
}

#site-navigation .main-nav > ul {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
}

#site-navigation .main-nav > ul > li {
  display: flex;
  align-items: center;
}

/* ---------- Navigation links ---------- */
#site-navigation .main-nav > ul > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: 0 var(--space-16);
  color: var(--text-soft);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

#site-navigation .main-nav > ul > li:not(.menu-cta) > a:hover,
#site-navigation .main-nav > ul > li:not(.menu-cta) > a:focus-visible,
#site-navigation .main-nav > ul > li:not(.menu-cta).is-active > a {
  color: var(--primary-hover);
  background: transparent;
}

/* ---------- Navigation underline ---------- */
#site-navigation .main-nav > ul > li:not(.menu-cta) > a::after {
  content: "";
  position: absolute;
  left: var(--space-16);
  right: var(--space-16);
  bottom: 0.5rem;
  height: 2.5px;
  background: var(--primary-hover);
  border-radius: var(--radius-pill);
  opacity: 0;
  transform: scaleX(0.75);
  transform-origin: center;
  transition: opacity var(--duration-base) ease, transform var(--duration-base) ease;
}

#site-navigation .main-nav > ul > li:not(.menu-cta) > a:hover::after,
#site-navigation .main-nav > ul > li:not(.menu-cta) > a:focus-visible::after,
#site-navigation .main-nav > ul > li:not(.menu-cta).is-active > a::after {
  opacity: 1;
  transform: scaleX(1);
}

/* ==========================================================
   HEADER · CTA
   ========================================================== */
#site-navigation .main-nav > ul > li.menu-cta {
  margin-left: var(--space-8);
}

#site-navigation .main-nav > ul > li.menu-cta > a {
  min-height: var(--control-height);
  padding: 0 var(--space-24);
  color: var(--white);
  background: var(--gradient-blue);
  border: 1px solid var(--blue-600);
  border-radius: var(--radius-pill);
  box-shadow: none;
}

#site-navigation .main-nav > ul > li.menu-cta > a:hover,
#site-navigation .main-nav > ul > li.menu-cta > a:focus-visible {
  color: var(--white);
  background: var(--primary-hover);
  border-color: var(--blue-600);
  box-shadow: var(--shadow-blue);
  transform: translateY(-1px);
}

#site-navigation .main-nav > ul > li.menu-cta > a:active {
  background: var(--primary-active);
  transform: translateY(0);
}

/* ==========================================================
   HEADER · MOBILE TOGGLE
   ========================================================== */

/* * GeneratePress renders:
 *
 * 1. An external mobile control wrapper.
 * 2. A second toggle inside the primary navigation.
 *
 * Only the external control is displayed. The internal toggle
 * remains hidden to prevent duplicated controls and columns. */
#mobile-menu-control-wrapper {
  --mobile-toggle-size: var(--control-height);
  --mobile-toggle-icon-size: 1.5rem;
  display: none;
  margin-left: auto;
  color: var(--text);
  background: transparent;
}

/* ---------- Hide duplicated internal toggle ---------- */
#site-navigation > .inside-navigation > .menu-toggle {
  display: none !important;
}

/* ---------- External toggle ---------- */
#mobile-menu-control-wrapper .menu-toggle {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--mobile-toggle-size);
  height: var(--mobile-toggle-size);
  min-width: var(--mobile-toggle-size);
  min-height: var(--mobile-toggle-size);
  padding: 0;
  margin: 0;
  color: inherit;
  background: transparent !important;
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 0;
  cursor: pointer;
  transition: color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

/* * GeneratePress already includes accessible text using
 * .screen-reader-text. Only its optional visible label is hidden. */
#mobile-menu-control-wrapper .menu-toggle .mobile-menu {
  display: none;
}

/* ---------- Icon wrapper ---------- */
#mobile-menu-control-wrapper .menu-toggle .gp-icon.icon-menu-bars {
  display: grid;
  place-items: center;
  width: var(--mobile-toggle-icon-size);
  height: var(--mobile-toggle-icon-size);
  padding: 0;
  margin: 0;
  line-height: 0;
}

/* ---------- SVG icons ---------- */
#mobile-menu-control-wrapper .menu-toggle .icon-menu-bars svg {
  position: static;
  inset: auto;
  grid-area: 1 / 1;
  width: var(--mobile-toggle-icon-size);
  height: var(--mobile-toggle-icon-size);
  padding: 0;
  margin: 0;
  fill: currentColor;
}

/* ==========================================================
   MOBILE TOGGLE · ICON STATES
   ========================================================== */

/* * Closed is the default state.
 *
 * The visual state depends on .is-menu-open in #masthead,
* which JavaScript synchronizes with #site-navigation.toggled.
 * This prevents a stale close icon after clicking outside. */

/* ---------- Closed: show hamburger ---------- */
#mobile-menu-control-wrapper .menu-toggle .icon-menu-bars svg:first-child {
  display: block !important;
}

#mobile-menu-control-wrapper .menu-toggle .icon-menu-bars svg:last-child {
  display: none !important;
}

/* ---------- Open: show close icon ---------- */
#masthead.site-header.is-menu-open #mobile-menu-control-wrapper .menu-toggle .icon-menu-bars svg:first-child {
  display: none !important;
}

#masthead.site-header.is-menu-open #mobile-menu-control-wrapper .menu-toggle .icon-menu-bars svg:last-child {
  display: block !important;
}

/* ==========================================================
   MOBILE TOGGLE · INTERACTION STATES
   ========================================================== */

/* ---------- Explicit closed state ---------- */
#masthead.site-header:not(.is-menu-open) #mobile-menu-control-wrapper .menu-toggle {
  color: var(--text);
  background: transparent !important;
}

/* ---------- Hover ---------- */
#mobile-menu-control-wrapper .menu-toggle:hover {
  color: var(--primary-hover);
  background: transparent !important;
}

/* ---------- Keyboard focus ---------- */
#mobile-menu-control-wrapper .menu-toggle:focus-visible {
  color: var(--primary-hover);
  background: transparent !important;
  box-shadow: var(--shadow-focus);
}

/* ---------- Open state ---------- */
#masthead.site-header.is-menu-open #mobile-menu-control-wrapper .menu-toggle {
  color: var(--primary-hover);
  background: transparent !important;
}

/* ==========================================================
   HEADER · RESPONSIVE
   ========================================================== */
@media (max-width: 48rem) {
  /* ========================================================
     HEADER ROW
     ======================================================== */
  #masthead.site-header, #masthead .inside-header {
    overflow: visible;
  }

  #masthead .inside-header {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-16);
    min-height: var(--header-height);
  }

  /* ========================================================
     MOBILE LOGO
     ======================================================== */
  #masthead .site-logo {
    flex: 0 1 auto;
    min-width: 0;
    margin-right: 0;
  }

  #masthead .site-logo a {
    min-width: 0;
  }

  #masthead .site-logo .header-image {
    width: auto;
    height: 2rem;
    max-width: min(11.75rem, calc(100vw - 7.5rem));
    object-fit: contain;
    object-position: left center;
  }

  /* ========================================================
     MOBILE TOGGLE WRAPPER
     ======================================================== */
  #mobile-menu-control-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin-left: auto;
    color: var(--text);
    background: transparent;
  }

  #mobile-menu-control-wrapper .menu-toggle {
    display: grid;
  }

  /* ========================================================
     MOBILE NAVIGATION SHELL
     ======================================================== */

  /* * The primary navigation only contains the floating panel.
   * It occupies no horizontal space inside the header row. */
  #site-navigation.main-navigation {
    position: static;
    display: block;
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    margin: 0;
    overflow: visible;
    background: transparent;
  }

  #site-navigation .inside-navigation {
    position: static;
    display: block;
    width: 0;
    min-width: 0;
    min-height: 0;
    overflow: visible;
  }

  #site-navigation > .inside-navigation > .menu-toggle {
    display: none !important;
  }

  /* ========================================================
     MOBILE MENU PANEL
     ======================================================== */
  #site-navigation .main-nav {
    position: absolute;
    top: calc(100% + var(--space-12));
    left: 0;
    right: 0;
    z-index: 1001;
    display: block !important;
    width: auto;
    max-height: calc(100svh - var(--header-height) - var(--space-32));
    padding: var(--space-16);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    color: var(--text-soft);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-0.5rem) scale(0.985);
    transform-origin: top center;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: opacity var(--duration-base) ease, transform var(--duration-base) var(--ease-standard), visibility 0s linear var(--duration-base);
  }

  #site-navigation.toggled .main-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
  }

  /* ========================================================
     MOBILE MENU LIST
     ======================================================== */
  #site-navigation .main-nav > ul {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
    width: 100%;
    margin: 0;
    padding: 0;
  }

  #site-navigation .main-nav > ul > li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* ========================================================
     MOBILE MENU LINKS
     ======================================================== */
  #site-navigation .main-nav > ul > li > a {
    justify-content: flex-start;
    width: 100%;
    min-height: 3.5rem;
    padding: 0 var(--space-20);
    color: var(--text-soft);
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    line-height: 1;
    text-align: left;
    transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
  }

  /* * Mobile navigation uses a background state instead of
   * the desktop underline. */
  #site-navigation .main-nav > ul > li:not(.menu-cta) > a::after {
    display: none;
  }

  #site-navigation .main-nav > ul > li:not(.menu-cta) > a:hover, #site-navigation .main-nav > ul > li:not(.menu-cta) > a:focus-visible, #site-navigation .main-nav > ul > li:not(.menu-cta).is-active > a {
    color: var(--primary-hover);
    background: var(--surface-blue);
  }

  /* ========================================================
     MOBILE CTA
     ======================================================== */
  #site-navigation .main-nav > ul > li.menu-cta {
    margin: var(--space-8) 0 0;
  }

  #site-navigation .main-nav > ul > li.menu-cta > a {
    justify-content: center;
    width: 100%;
    min-height: 3.5rem;
    margin: 0;
    padding-inline: var(--space-24);
    text-align: center;
  }
}

/* ==========================================================
   WORDPRESS ADMIN BAR
   ========================================================== */
@media (max-width: 782px) {
  .admin-bar #masthead.site-header {
    top: 46px;
  }
}

/* ==========================================================
   VERY SMALL SCREENS
   ========================================================== */
@media (max-width: 25rem) {
  #masthead .inside-header {
    gap: var(--space-12);
  }

  #masthead .site-logo .header-image {
    height: 1.875rem;
    max-width: calc(100vw - 7rem);
  }

  #site-navigation .main-nav {
    padding: var(--space-12);
  }

  #site-navigation .main-nav > ul > li > a {
    min-height: 3.25rem;
    padding-inline: var(--space-16);
  }

  #site-navigation .main-nav > ul > li.menu-cta > a {
    min-height: 3.375rem;
  }
}

/* ==========================================================
   HERO
   ========================================================== */

/* * Prevent WordPress full-width calculations,
tooltips and
 * decorative elements from creating horizontal page scrolling. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
body {
    overflow-x: clip;
  }
}

/* ---------- Full-width reset ---------- */
.home .entry-content > .hero.alignfull {
  left: auto;
  right: auto;
  width: 100%;
  max-width: none;
  margin: 0 !important;
}

/* ---------- Hero shell ---------- */
.hero {
  --hero-min-height: 100vh;
  --hero-content-max: 58rem;
  --hero-button-height: 4.25rem;
  position: relative;
  width: 100%;
  min-height: var(--hero-min-height);
  padding-top: var(--header-height);
  overflow: hidden;
  background-image: var(--gradient-hero-centered);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  isolation: isolate;
}

/* ==========================================================
   HERO · SOFT DOT DETAIL
   ========================================================== */

.hero-bg-dots {
  background-image: var(--gradient-hero-centered);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-inner {
  position: relative;
  z-index: 1;
}

/* Left dot cluster */
.hero-bg-dots .hero-inner::before {
  content: "";
  position: absolute;
  top: 12%;
  left: -2rem;
  z-index: -1;

  width: clamp(18rem, 32vw, 30rem);
  height: clamp(14rem, 28vw, 24rem);

  pointer-events: none;
  opacity: 0.45;

  background-image:
    radial-gradient(
      circle,
      rgba(0, 115, 229, 0.16) 1.25px,
      transparent 1.5px
    );

  background-size: 1.45rem 1.45rem;
  background-position: center;

  -webkit-mask-image:
    radial-gradient(
      ellipse at center,
      #000 0%,
      rgba(0, 0, 0, 0.9) 38%,
      rgba(0, 0, 0, 0.35) 68%,
      transparent 100%
    );

  mask-image:
    radial-gradient(
      ellipse at center,
      #000 0%,
      rgba(0, 0, 0, 0.9) 38%,
      rgba(0, 0, 0, 0.35) 68%,
      transparent 100%
    );
}
/* Right dot cluster */
.hero-bg-dots .hero-inner::after {
  content: "";
  position: absolute;
  top: 26%;
  right: -2rem;
  z-index: -1;

  width: clamp(14rem, 24vw, 22rem);
  height: clamp(10rem, 20vw, 18rem);

  pointer-events: none;
  opacity: 0.52;

  background-image:
    radial-gradient(
      circle,
      rgba(0, 115, 229, 0.2) 1.3px,
      transparent 1.6px
    );

  background-size: 1.45rem 1.45rem;
  background-position: center;

  -webkit-mask-image:
    radial-gradient(
      ellipse at center,
      #000 0%,
      rgba(0, 0, 0, 0.92) 45%,
      rgba(0, 0, 0, 0.48) 74%,
      transparent 100%
    );

  mask-image:
    radial-gradient(
      ellipse at center,
      #000 0%,
      rgba(0, 0, 0, 0.92) 45%,
      rgba(0, 0, 0, 0.48) 74%,
      transparent 100%
    );
}

@supports (height: 100svh) {
  .hero {
    --hero-min-height: 100svh;
  }
}

/* ==========================================================
   HERO · GUTENBERG WRAPPER RESET
   ========================================================== */

/* * Gutenberg generates an additional inner container for each
 * Group block. These wrappers must not introduce their own
 * width {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin-inline: auto !important;
  background: transparent !important;
}

/* ==========================================================
   HERO · DECORATIVE WAVES
   ========================================================== */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  left: 50%;
  z-index: 0;
  pointer-events: none;
  border-style: solid;
  border-width: 1px 0 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: translateX(-50%);
  transform-origin: center bottom;
}

/* ---------- Primary wave ---------- */
.hero::before {
  bottom: -18%;
  width: 125%;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(128, 190, 248, 0.08) 100%);
  border-top-color: rgba(128, 190, 248, 0.24);
}

/* ---------- Secondary wave ---------- */
.hero::after {
  bottom: -24%;
  width: 138%;
  height: 44%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(179, 217, 251, 0.1) 100%);
  border-top-color: rgba(179, 217, 251, 0.3);
}

/* ==========================================================
   HERO · INNER LAYOUT
   ========================================================== */
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: calc(var(--hero-min-height) - var(--header-height));
  background: transparent !important;
}

/* ==========================================================
   HERO · COPY
   ========================================================== */

.hero-copy {
	width: min(100%, var(--hero-content-max));
	max-width: var(--hero-content-max);
	margin-inline: auto;
	text-align: center;
	background: transparent !important;
}


/* ---------- Vertical rhythm ---------- */


/*
 * The Hero owns its vertical rhythm.
 * These rules intentionally override generic Gutenberg
 * .flow spacing so PHP and Gutenberg heroes behave identically.
 */

.hero .hero-copy > * {
	margin-block: 0 !important;
}


/* ---------- Eyebrow → title ---------- */

.hero .hero-copy > .hero-title {
	margin-top: var(--space-16) !important;
}


/* ---------- Title → description ---------- */

.hero .hero-copy > .hero-description {
	margin-top: var(--space-28) !important;
}


/* ---------- Description → actions ---------- */

.hero .hero-copy > .hero-actions {
	margin-top: var(--space-32) !important;
}


/* ==========================================================
   HERO · TYPOGRAPHY
   ========================================================== */
.hero-eyebrow {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  color: var(--text-muted);
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}

.hero-title {
  width: 100%;
  max-width: var(--hero-content-max);
  margin-inline: auto;
  color: var(--text);
  text-align: center;
  text-wrap: balance;
}

.hero-title .heading-accent {
  margin-top: 0.04em;
}

.hero-description {
  width: min(100%, 64ch);
  max-width: 64ch;
  margin-inline: auto;
  color: var(--slate-700);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: var(--lh-relaxed);
  text-align: center;
  text-wrap: balance;
}

/* ==========================================================
   HERO · ACTIONS
   ========================================================== */
.hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  width: 100%;
  margin-inline: auto;
}

/* ---------- Primary button ---------- */
.hero-actions .btn-primary {
  --btn-color: var(--white) !important;
  --btn-background: var(--gradient-blue);
  --btn-border-color: var(--blue-600);
  --btn-color-hover: var(--white);
  --btn-background-hover: var(--primary-hover);
  --btn-border-color-hover: var(--blue-600);
  --btn-shadow-hover: var(--shadow-blue);
}

/* ---------- Secondary button ---------- */
.hero-actions .btn-outline {
  --btn-color: var(--primary-hover);
  --btn-background: var(--surface);
  --btn-border-color: var(--blue-200);
  --btn-color-hover: var(--primary-active);
  --btn-background-hover: var(--blue-50);
  --btn-border-color-hover: var(--blue-300);
  --btn-shadow-hover: var(--shadow-soft-blue);
}

/* ---------- Primary icon ---------- */
.hero-actions .material-symbols-rounded {
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
  transition: transform var(--duration-base) var(--ease-standard);
}

/* ==========================================================
   HERO · TABLET
   ========================================================== */
@media (max-width: 48rem) {
  .hero-inner {
    padding-block: var(--space-64) var(--space-96);
  }

  .hero-copy {
    max-width: 44rem;
  }

  .hero-description {
    max-width: 56ch;
  }

  .hero::before {
    bottom: -15%;
    width: 150%;
    height: 34%;
  }

  .hero::after {
    bottom: -21%;
    width: 165%;
    height: 38%;
  }
}

/* ==========================================================
   HERO · MOBILE
   ========================================================== */
@media (max-width: 36rem) {
  .hero-inner {
    align-items: center;
    padding-block: var(--space-48) var(--space-96);
  }

  .hero-eyebrow {
    font-size: 0.75rem;
    line-height: 1.5;
    letter-spacing: 0.075em;
  }

  .hero-title {
    font-size: clamp(2.5rem, 10.5vw, 3.25rem);
  }

  .hero-description {
    max-width: 34rem;
    font-size: 1rem;
    line-height: 1.65;
  }

  .hero .hero-actions {
    display: grid;
    gap: var(--space-12);
    width: min(100%, 22rem);
  }
.hero::before {
    width: 190%;
  }

  .hero::after {
    width: 210%;
  }
}

/* ==========================================================
   HERO · WORDPRESS ADMIN BAR
   ========================================================== */
.admin-bar .hero {
  --hero-min-height: calc(100vh - 32px);
}

@supports (height: 100svh) {
  .admin-bar .hero {
    --hero-min-height: calc(100svh - 32px);
  }
}

@media (max-width: 782px) {
  .admin-bar .hero {
    --hero-min-height: calc(100vh - 46px);
  }

  @supports (height: 100svh) {
    .admin-bar .hero {
      --hero-min-height: calc(100svh - 46px);
    }
  }
}

/* ==========================================================
   HERO · VERY SMALL SCREENS
   ========================================================== */
@media (max-width: 25rem) {
  .hero-title {
    font-size: 2rem;
  }

  .hero .hero-actions {
    width: 100%;
  }
}

/* ==========================================================
   FOOTER
   ========================================================== */
.argenticare-footer {
  --footer-background: var(--slate-50);
  --footer-border: var(--slate-100);
  --footer-text: var(--slate-600);
  --footer-link: var(--slate-700);
  --footer-heading: var(--slate-900);
  margin: 0;
  color: var(--footer-text);
  background: var(--footer-background);
  border-top: 1px solid var(--footer-border);
}

/* ==========================================================
   FOOTER · MAIN LAYOUT
   ========================================================== */
.argenticare-footer__main {
  background-color: transparent !important;
  display: grid;
  grid-template-columns: minmax(14rem, 1.1fr) minmax(8rem, 0.65fr) minmax(11rem, 0.85fr) minmax(10rem, 0.75fr);
  gap: var(--space-48);
  align-items: start;
  padding-block: var(--space-48) var(--space-36);
}

/* ==========================================================
   FOOTER · BRAND
   ========================================================== */
.argenticare-footer__brand {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--space-20);
  min-height: 100%;
}

.argenticare-footer__logo {
  display: block;
  width: min(100%, 11.5rem);
  color: inherit;
  text-decoration: none;
}

.argenticare-footer__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================
   FOOTER · TITLES
   ========================================================== */
.argenticare-footer__title {
  margin: 0 0 var(--space-16);
  color: var(--footer-heading);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

/* ==========================================================
   FOOTER · MENUS
   ========================================================== */
.argenticare-footer__column {
  min-width: 0;
}

.argenticare-footer__menu {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.argenticare-footer__menu li {
  margin: 0;
  padding: 0;
}

.argenticare-footer__menu a {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 2.5rem;
  color: var(--footer-link);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.argenticare-footer__menu a:hover,
.argenticare-footer__menu a:focus-visible {
  color: var(--primary-hover);
}

/* * No marcamos current states en footer para evitar
 * inconsistencias con anchors de Home. */
/* ==========================================================
   FOOTER · CONTACT
   ========================================================== */
.argenticare-footer__column--contact {
  display: grid;
  align-content: start;
  gap: var(--space-16);
}

.argenticare-footer__contact-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 2.5rem;
  color: var(--footer-link);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.argenticare-footer__contact-link:hover,
.argenticare-footer__contact-link:focus-visible {
  color: var(--primary-hover);
}

/* ==========================================================
   FOOTER · SOCIAL ICONS
   ========================================================== */
.argenticare-footer__socials {
  margin-top: 0;
}

.argenticare-footer__social-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.argenticare-footer__social-list li {
  margin: 0;
  padding: 0;
}

.argenticare-footer__social-link {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--blue-600);
  background: var(--gradient-soft-blue);
  border: 1px solid var(--blue-100);
  border-radius: 50%;
  box-shadow: none;
  text-decoration: none;
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease, transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.argenticare-footer__cta {
  min-height: var(--control-height) !important;
  color: var(--white) !important;
}

.argenticare-footer__social-link:active,
.argenticare-footer__social-link:focus,
.argenticare-footer__social-link:target,
.argenticare-footer__social-link:visited {
  color: var(--blue-600) !important;
}

.argenticare-footer__social-link svg {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}

.argenticare-footer__social-link.is-email svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
}

.argenticare-footer__social-link.is-linkedin svg {
  width: 1rem;
  height: 1rem;
}

.argenticare-footer__social-link.is-upwork svg {
  width: 1.05rem;
  height: 1.05rem;
}

.argenticare-footer__social-link:hover,
.argenticare-footer__social-link:focus-visible {
  color: var(--primary-hover);
  border-color: var(--blue-200);
  box-shadow: 0 6px 20px rgba(0, 115, 229, 0.08);
  transform: translateY(-2px);
}

.argenticare-footer__social-link:active {
  transform: translateY(0);
}

/* ==========================================================
   FOOTER · BOTTOM
   ========================================================== */
.argenticare-footer__bottom-wrap {
  border-top: 1px solid var(--footer-border);
}

.argenticare-footer__bottom {
  background-color: transparent !important;
  padding-block: var(--space-20);
}

.argenticare-footer__bottom p {
  max-width: none;
  margin: 0;
  color: var(--slate-700);
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: var(--lh-base);
  text-align: center;
}

/* ==========================================================
   FOOTER · TABLET
   ========================================================== */
@media (max-width: 60rem) {
  .argenticare-footer__main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-36);
    row-gap: var(--space-48);
    padding-block: var(--space-48) var(--space-36);
  }

  /* Logo centrado en una fila completa */
  .argenticare-footer__brand {
    grid-column: 1 / -1;
    justify-items: center;
    min-height: 0;
  }

  .argenticare-footer__logo {
    margin-inline: auto !important;
  }

  /* Columnas más compactas y equilibradas */
  .argenticare-footer__column {
    width: min(100%, 12rem);
  }

  .argenticare-footer__column:nth-of-type(1) {
    justify-self: start;
  }

  .argenticare-footer__column:nth-of-type(2) {
    justify-self: center;
  }

  /* Contact centrado dentro de su columna */
  .argenticare-footer__column--contact {
    justify-self: end;
    justify-items: center;
    width: min(100%, 18rem);
    text-align: center;
  }

  .argenticare-footer__column--contact .argenticare-footer__title {
    width: 100%;
    text-align: center;
  }

  .argenticare-footer__social-list {
    justify-content: center;
  }

  .argenticare-footer__column--contact .argenticare-footer__cta {
    width: 100%;
  }
}

.argenticare-footer__socials,
.argenticare-footer__title {
  margin: 0 auto var(--space-16);
}

/* ==========================================================
   FOOTER · MOBILE
   ========================================================== */
@media (max-width: 36rem) {
  .argenticare-footer__main {
    grid-template-columns: 1fr;
    gap: var(--space-28);
    padding-block: var(--space-36) var(--space-32);
  }

  .argenticare-footer__brand {
    grid-column: auto;
    justify-items: center;
  }

  .argenticare-footer__column, .argenticare-footer__column:nth-of-type(1), .argenticare-footer__column:nth-of-type(2), .argenticare-footer__column--contact {
    justify-self: stretch;
    width: 100%;
  }

  .argenticare-footer__column {
    padding-top: var(--space-20);
    border-top: 1px solid var(--footer-border);
  }

  /* Navigation y Resources permanecen alineados a la izquierda */
  .argenticare-footer__column:not(.argenticare-footer__column--contact) {
    text-align: left;
  }

  /* Contact centrado también en mobile */
  .argenticare-footer__column--contact {
    justify-items: center;
    text-align: center;
  }

  .argenticare-footer__social-list {
    justify-content: center;
  }

  .argenticare-footer__column--contact .argenticare-footer__cta {
    width: 100%;
    max-width: none;
  }

  

  .argenticare-footer__title {
    margin-bottom: var(--space-12);
  }

  .argenticare-footer__bottom {
    padding-block: var(--space-16);
  }
}




/* ==========================================================
   PAGE · ABOUT US · STATIC
   Replaces the old WordPress/Gutenberg-specific About block.
   ========================================================== */


/* ==========================================================
   ABOUT · PAGE SAFETY
   ========================================================== */

.about-hero,
.about-story-section,
.about-science-section,
.about-team-section,
.about-cta-section {
	position: relative;
	width: 100%;
	max-width: 100%;
}

.about-story-section p,
.about-science-section p,
.about-team-section p,
.about-cta-section p {
	margin-block: 0;
}


/* ==========================================================
   ABOUT · HERO
   ========================================================== */

.about-hero {
	--hero-content-max: 58rem;
}

.about-hero-title {
	max-width: 18ch;
}

.about-hero-description {
	max-width: 58ch;
}


/* ==========================================================
   ABOUT · STORY
   ========================================================== */

.about-story-section {
	background: var(--surface);
}

.about-story-layout {
	display: grid;
	grid-template-columns:
		minmax(17rem, 0.78fr)
		minmax(0, 1.62fr);
	gap: var(--space-64);
	align-items: start;
}

.about-story-heading,
.about-story-content {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.about-story-heading {
	position: relative;
	min-height: 100%;
	padding:
		var(--space-8)
		var(--space-48)
		var(--space-8)
		var(--space-8);
	border-right: 1px solid var(--border-soft-blue);
}

.about-story-heading h2 {
	max-width: 14ch;
	margin-top: var(--space-16);
}

.about-story-marker {
	width: 2.25rem;
	height: 3px;
	margin:
		var(--space-24)
		0;
	background: var(--primary);
	border: 0;
	border-radius: var(--radius-pill);
	opacity: 1;
}


/* ---------- Story credentials ---------- */

.about-story-highlights {
	display: grid;
	gap: var(--space-16);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-story-highlights li {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: var(--space-12);
	align-items: center;
	min-width: 0;
	color: var(--text-soft);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: var(--lh-snug);
}

.about-story-highlights li > .material-symbols-rounded {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--primary-hover);
	background: var(--surface-blue);
	border: 1px solid var(--border-soft-blue);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-soft-blue);
	font-size: 1.35rem;
}

.about-story-highlights a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	width: fit-content;
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.about-story-highlights a:hover {
	color: var(--primary-hover);
}

.about-story-link-icon {
	flex: 0 0 auto;
	width: auto;
	height: auto;
	color: currentColor;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-size: 1.15rem;
	line-height: 1;
	transition: transform var(--duration-fast) ease;
}

.about-story-highlights a:hover .about-story-link-icon {
	transform: translate(0.125rem, -0.125rem);
}


/* ---------- Story content ---------- */

.about-story-content {
	align-self: start;
	gap: 0;
	padding: var(--space-8);
	padding-top: var(--space-16);
}

.about-story-content p {
	max-width: 68ch;
	color: var(--text-soft);
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
}

.about-story-content a {
	font-weight: 600;
	text-decoration: none;
}

.about-story-decoration {
	position: absolute;
	left: -1.5rem;
	bottom: 0;
	width: 13rem;
	height: 7rem;
	pointer-events: none;
	opacity: 0.32;
	background-image:
		radial-gradient(
			circle,
			var(--blue-300) 1.1px,
			transparent 1.3px
		);
	background-size: 1rem 1rem;
	mask-image:
		linear-gradient(
			135deg,
			transparent 4%,
			black 70%
		);
	-webkit-mask-image:
		linear-gradient(
			135deg,
			transparent 4%,
			black 70%
		);
}


/* ==========================================================
   ABOUT · OPEN SCIENCE CAROUSEL
   Shared carousel layout comes from the static global rules.
   ========================================================== */

.about-science-section {
	--carousel-padding: var(--space-24) var(--space-48);
	--carousel-gap: var(--space-16);
	--carousel-min-height: 18rem;
	--carousel-media-size: 15rem;
	--carousel-stat-size: clamp(2.75rem, 5vw, 4.25rem);
	--carousel-title-max: 19ch;
	--carousel-description-max: 60ch;

	overflow: hidden;
	background: var(--surface-soft);
	border-block: 1px solid var(--border-soft);
}

.about-science-section .feature-carousel-description {
	font-size: var(--fs-base);
}


/* ==========================================================
   ABOUT · TEAM
   ========================================================== */

.about-team-section {
	background: var(--surface);
}

.about-team-container {
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
}

.about-team-heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

.about-team-heading .section-eyebrow {
	width: 100%;
	text-align: left;
}

.about-team-heading h2 {
	width: 100%;
	max-width: none;
	margin-top: var(--space-16);
	text-align: left;
}

.about-team-heading > p:not(.section-eyebrow) {
	width: 100%;
	max-width: none;
	margin-top: var(--space-16);
	color: var(--text-soft);
	text-align: left;
}


.about-story-heading > p:not(.section-eyebrow),
.about-science-section .section-heading > p:not(.section-eyebrow),
.about-team-heading > p:not(.section-eyebrow) {
	max-width: none;
}

/* ---------- Team grid ---------- */

.about-team-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-24);
	margin: 0 auto;
}

.about-team-card {
	display: grid;
	grid-template-columns: 12rem minmax(0, 1fr);
	gap: var(--space-20);
	align-items: center;
	height: 100%;
	padding: var(--space-24);
	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.about-team-photo {
	display: grid;
	place-items: end center;
	width: 12rem;
	aspect-ratio: 1;
	margin: 0;
	overflow: hidden;
	background:
		radial-gradient(
			circle at 50% 38%,
			var(--white) 0%,
			var(--blue-50) 55%,
			var(--blue-100) 100%
		);
	border: 1px solid var(--border-soft-blue);
	border-radius: 50%;
}

.about-team-photo img {
	display: block;
	width: 100%;
	height: 100%;
	padding-top: var(--space-8);
	object-fit: contain;
	object-position: center bottom;
}

.about-team-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: var(--space-8);
}

.about-team-copy .about-team-role {
	margin: 0 0 var(--space-12);
	color: var(--blue-600);
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.about-team-copy h3 {
	margin: 0;
	font-size: var(--fs-h5);
	line-height: var(--lh-snug);
}

.about-team-copy h3 + p {
	margin: var(--space-12) 0 0;
	color: var(--text-soft);
	font-size: var(--fs-sm);
	line-height: var(--lh-base);
}


/* ---------- Team social links ---------- */

.about-team-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-10);
	margin-top: var(--space-16);
}

.about-team-links .argenticare-footer__social-link {
	flex: 0 0 auto;
}

.about-team-links .argenticare-footer__social-link svg {
	display: block;
	fill: currentColor;
}

.about-team-links .argenticare-footer__social-link.is-linkedin svg {
	width: 1rem;
	height: 1rem;
}

.about-team-links .argenticare-footer__social-link.is-github svg {
	width: 1.15rem;
	height: 1.15rem;
}


/* ==========================================================
   ABOUT · CTA
   ========================================================== */

.about-cta-section {
	padding-block:
		0
		var(--section-space);
	background: var(--surface);
}

.about-cta-container {
	width: min(
		calc(100% - (var(--gutter) * 2)),
		var(--container-max)
	);
	max-width: var(--container-max);
	margin-inline: auto;
}

.about-cta-panel {
	position: relative;
	display: grid;
	grid-template-columns:
		minmax(0, 1.15fr)
		minmax(15rem, 0.85fr);
	gap: var(--space-32);
	align-items: center;
	min-height: 17rem;
	padding:
		var(--space-36)
		var(--space-48);
	overflow: hidden;
	color: rgba(255, 255, 255, 0.86);
	background:
		radial-gradient(
			circle at 82% 16%,
			rgba(255, 255, 255, 0.14),
			transparent 25%
		),
		linear-gradient(
			135deg,
			var(--blue-700) 0%,
			var(--blue-600) 54%,
			var(--blue-500) 100%
		);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-blue);
}

.about-cta-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.2;
	background-image:
		radial-gradient(
			circle,
			rgba(255, 255, 255, 0.9) 1px,
			transparent 1.2px
		);
	background-size: 1.25rem 1.25rem;
	mask-image:
		linear-gradient(
			90deg,
			black,
			transparent 50%
		);
	-webkit-mask-image:
		linear-gradient(
			90deg,
			black,
			transparent 50%
		);
}

.about-cta-copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 42rem;
	min-width: 0;
	padding: var(--space-8);
}

.about-cta-copy h2 {
	max-width: 22ch;
	margin-top: var(--space-16);
	color: var(--white);
}

.about-cta-copy > p:not(.about-cta-eyebrow) {
	max-width: 54ch;
	margin-top: var(--space-16);
	color: var(--blue-100);
	font-size: var(--fs-base);
}

.about-cta-actions {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: fit-content;
	margin-top: var(--space-24);
}

.about-cta-actions .btn-inverse {
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	min-height: 3.25rem;
	padding-inline: var(--space-28);
	color: var(--blue-700);
	background: var(--white);
	border: 1px solid rgba(255, 255, 255, 0.82);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-md);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition:
		transform var(--duration-base) var(--ease-standard),
		box-shadow var(--duration-base) var(--ease-standard);
}

.about-cta-actions .btn-inverse:hover,
.about-cta-actions .btn-inverse:focus-visible {
	color: var(--blue-800);
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

.about-cta-actions .material-symbols-rounded {
	font-size: 1.1rem;
}

.about-cta-visual {
	position: relative;
	z-index: 2;
	width: min(100%, 21rem);
	margin: 0 auto;
}

.about-cta-visual img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 15rem;
	object-fit: contain;
}


/* ==========================================================
   ABOUT · RESPONSIVE · TABLET
   ========================================================== */

@media (max-width: 64rem) {

	.about-story-layout {
		grid-template-columns:
			minmax(15rem, 0.85fr)
			minmax(0, 1.35fr);
		gap: var(--space-48);
	}

	.about-team-card {
		grid-template-columns: 6.5rem minmax(0, 1fr);
	}

	.about-team-photo {
		width: 6.5rem;
	}

	.about-science-section {
		--carousel-media-size: 19rem;
	}

}


/* ==========================================================
   ABOUT · RESPONSIVE · MOBILE
   ========================================================== */

@media (max-width: 48rem) {

	.about-hero-title {
		max-width: 14ch;
	}

	.about-hero-description {
		font-size: var(--fs-base);
	}

	.about-story-layout {
		grid-template-columns: 1fr;
		gap: var(--space-32);
	}

	.about-story-heading {
		min-height: 0;
		padding:
			var(--space-8)
			var(--space-8)
			var(--space-32);
		border-right: 0;
		border-bottom: 1px solid var(--border-soft-blue);
	}

	.about-story-heading h2 {
		max-width: 22ch;
	}

	.about-story-decoration {
		right: 0;
		left: auto;
		bottom: var(--space-16);
	}

	.about-science-section {
		--carousel-padding: var(--space-32);
		--carousel-gap: var(--space-24);
		--carousel-media-size: 17rem;
	}

	.about-team-grid {
		grid-template-columns: 1fr;
		width: min(100%, 38rem);
	}

	.about-team-card {
		grid-template-columns: 7rem minmax(0, 1fr);
	}

	.about-team-photo {
		width: 7rem;
	}

	.about-cta-panel {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: var(--space-32);
	}

	.about-cta-copy {
		display: contents;
	}

	.about-cta-copy h2 {
		order: 1;
		width: 100%;
		max-width: 18ch;
		margin: 0 auto;
		color: var(--white);
		text-align: center;
	}

	.about-cta-copy > p:not(.about-cta-eyebrow) {
		order: 2;
		width: 100%;
		max-width: 38ch;
		margin:
			var(--space-16)
			auto
			0;
		color: rgba(255, 255, 255, 0.86);
		text-align: center;
	}

	.about-cta-visual {
		order: 3;
		width: min(100%, 18rem);
		margin:
			var(--space-28)
			auto
			0;
	}

	.about-cta-visual img {
		width: 100%;
		max-height: 13rem;
		object-fit: contain;
	}

	.about-cta-actions {
		order: 4;
		justify-content: center;
		width: fit-content;
		margin:
			var(--space-28)
			auto
			0;
	}

}


/* ==========================================================
   ABOUT · RESPONSIVE · SMALL MOBILE
   ========================================================== */

@media (max-width: 36rem) {

	.about-science-section {
		--carousel-padding: var(--space-24);
		--carousel-media-size: 14rem;
	}

	.about-team-card {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.about-team-photo {
		width: 7.75rem;
		margin-inline: auto;
	}

	.about-team-copy {
		align-items: center;
	}

	.about-team-links {
		justify-content: center;
	}

	.about-cta-panel {
		padding:
			var(--space-28)
			var(--space-24);
	}

	.about-cta-copy h2 {
		max-width: none;
	}

}


/* ==========================================================
   PAGE · BLOG ARCHIVE · STATIC
   Replaces the old WordPress / GeneratePress archive shell.
   ========================================================== */


/* ==========================================================
   BLOG · PAGE
   ========================================================== */

.page-blog .site-main {
	width: 100%;
	margin: 0;
}


/* ==========================================================
   BLOG · HERO
   ========================================================== */

.blog-hero {
	--hero-content-max: 58rem;
}

.blog-hero-title {
	max-width: 18ch;
}

.blog-hero-description {
	max-width: none;
	color: var(--text-soft);
}


/* ==========================================================
   BLOG · INDEX
   ========================================================== */

.blog-index-section {
	scroll-margin-top:
		calc(var(--header-height) + var(--space-16));

	padding-block:
		var(--space-64)
		var(--section-space);

	background: var(--surface);
}

.blog-index-container {
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
}


/* ==========================================================
   BLOG · CATEGORY NAVIGATION
   ========================================================== */

.blog-categories {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-16);
}

.blog-category-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: var(--control-height);
	padding-inline: var(--space-28);

	color: var(--text-soft);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-soft-blue);

	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;

	transition:
		color var(--duration-fast) ease,
		background var(--duration-fast) ease,
		border-color var(--duration-fast) ease,
		box-shadow var(--duration-base) var(--ease-standard),
		transform var(--duration-base) var(--ease-standard);
}

.blog-category-pill:link,
.blog-category-pill:visited {
	color: var(--text-soft);
}

.blog-category-pill:hover,
.blog-category-pill:focus-visible {
	color: var(--primary-hover);
	background: var(--surface-blue);
	border-color: var(--border-blue);
	box-shadow: var(--shadow-blue);
	transform: translateY(-1px);
}

.blog-category-pill.is-active,
.blog-category-pill.is-active:link,
.blog-category-pill.is-active:visited {
	color: var(--primary-hover);
	background: var(--surface);
	border-color: var(--blue-400);
	box-shadow: var(--shadow-soft-blue);
}


/* ==========================================================
   BLOG · FEATURED ARTICLE
   ========================================================== */

.blog-featured-card {
	display: grid;
	grid-template-columns:
		minmax(0, 1.06fr)
		minmax(20rem, 0.94fr);

	min-height: clamp(22rem, 34vw, 27rem);

	overflow: hidden;
	border-color: var(--border-soft-blue);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.blog-featured-media {
	min-height: 100%;
	margin: 0;
	padding: var(--space-24);
	overflow: hidden;
	background: var(--surface-blue);
}

.blog-featured-media a {
	display: block;
	width: 100%;
	height: 100%;
}

.blog-featured-media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;

	transition:
		transform 500ms var(--ease-standard);
}

.blog-featured-card:hover .blog-featured-media img {
	transform: scale(1.02);
}

.blog-featured-body {
	justify-content: center;
	padding: var(--space-48);
}

.blog-featured-eyebrow {
	margin-bottom: var(--space-16);
}

.blog-featured-title {
	max-width: 18ch;
	margin: 0;

	font-size:
		clamp(1.75rem, 2.4vw, 2.5rem);
}

.blog-featured-title a,
.blog-featured-title a:link,
.blog-featured-title a:visited {
	color: var(--text);
	text-decoration: none;
}

.blog-featured-title a:hover,
.blog-featured-title a:focus-visible {
	color: var(--primary-hover);
}

.blog-featured-description {
	max-width: none;
	margin-top: var(--space-16);
	margin-bottom: var(--space-16);

	color: var(--text-soft);
	font-size: var(--fs-md);
}


/* ==========================================================
   BLOG · ARTICLE SECTION
   ========================================================== */

.blog-articles-section {
	display: flex;
	flex-direction: column;
	gap: var(--space-32);

	margin-top: var(--space-16);
}

.blog-articles-heading {
	margin: 0;

	font-size: var(--fs-h6);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.blog-articles-grid {
	display: grid;
	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap:
		var(--space-32)
		var(--space-24);
}


/* ==========================================================
   BLOG · ARTICLE CARD
   ========================================================== */

.blog-article-card {
	--card-height: 100%;

	display: flex;
	flex-direction: column;

	height: 100%;
	padding: 0 !important;

	overflow: hidden;

	border-color: var(--border-soft);
	border-radius: var(--radius-sm);
	box-shadow: none;

	transition:
		transform var(--duration-base) var(--ease-standard),
		border-color var(--duration-fast) ease,
		box-shadow var(--duration-base) var(--ease-standard);
}

.blog-article-card:hover {
	border-color: var(--border-blue);
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}


/* ==========================================================
   BLOG · ARTICLE CARD · MEDIA
   ========================================================== */

.blog-article-media {
	display: grid;
	place-items: center;

	flex: 0 0 auto;

	width: 100%;
	min-height: 0;
	aspect-ratio: 1;

	margin: 0;
	padding: var(--space-24);

	overflow: hidden;

	background: var(--gradient-soft-blue);
	border-bottom: 1px solid var(--border-soft-blue);
}

.blog-article-media a {
	display: grid;
	place-items: center;

	width: 100%;
	height: 100%;

	overflow: hidden;
}

.blog-article-media img {
	display: block;

	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;

	aspect-ratio: 1;
	object-fit: contain;
	object-position: center;

	transition:
		transform 500ms var(--ease-standard);
}

.blog-article-card:hover .blog-article-media img {
	transform: scale(1.02);
}


/* ---------- Missing featured image ---------- */

.blog-article-media-placeholder {
	display: grid;
	place-items: center;

	width: 100%;
	height: 100%;

	color: var(--blue-400);
	background: var(--gradient-soft-blue);
}

.blog-article-media-placeholder .material-symbols-rounded {
	font-size: 2rem;
}


/* ==========================================================
   BLOG · ARTICLE CARD · BODY
   ========================================================== */

.blog-article-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;

	min-height: 0;

	padding: var(--space-24);
}

.blog-article-title {
	margin:
		var(--space-16)
		0
		0;

	font-size: var(--fs-h5);
	line-height: var(--lh-snug);
}

.blog-article-title a,
.blog-article-title a:link,
.blog-article-title a:visited {
	color: var(--text);
	text-decoration: none;
}

.blog-article-title a:hover,
.blog-article-title a:focus-visible {
	color: var(--primary-hover);
}


/* ==========================================================
   BLOG · METADATA
   ========================================================== */

.blog-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-10);

	margin: 0;

	color: var(--text-muted);
	font-size: var(--fs-xs);
	font-weight: 500;
	line-height: var(--lh-base);
}

.blog-post-meta time,
.blog-post-meta-category {
	color: inherit;
}

.blog-post-meta a,
.blog-post-meta a:link,
.blog-post-meta a:visited {
	color: var(--primary-hover);
	font-size: inherit;
	font-weight: 600;
	text-decoration: none;
}

.blog-post-meta a:hover,
.blog-post-meta a:focus-visible {
	color: var(--primary-active);
	text-decoration: underline;
	text-underline-offset: 0.2rem;
}

.blog-post-meta-separator {
	display: block;
	flex: 0 0 auto;

	width: 0.1875rem;
	height: 0.1875rem;

	background: var(--slate-300);
	border-radius: 50%;
}


/* ==========================================================
   BLOG · PAGINATION
   ========================================================== */

.blog-pagination {
	margin-top: var(--space-16);
}

.blog-pagination > .page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);

	margin: 0;
	padding: 0;

	list-style: none;
}

.blog-pagination > .page-numbers > li {
	margin: 0;
}

.blog-pagination > .page-numbers > li > .page-numbers {
	display: inline-grid;
	place-items: center;

	width: 2.75rem;
	height: 2.75rem;
	padding: 0;

	color: var(--text-soft);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 50%;

	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;

	transition:
		color var(--duration-fast) ease,
		background var(--duration-fast) ease,
		border-color var(--duration-fast) ease,
		box-shadow var(--duration-base) var(--ease-standard),
		transform var(--duration-base) var(--ease-standard);
}

.blog-pagination > .page-numbers > li > a.page-numbers:hover,
.blog-pagination > .page-numbers > li > a.page-numbers:focus-visible {
	color: var(--primary-hover);
	background: var(--surface-blue);
	border-color: var(--border-blue);
	box-shadow: var(--shadow-soft-blue);

	transform: translateY(-1px);
}

.blog-pagination > .page-numbers > li > .page-numbers.current {
	color: var(--white);
	background: var(--gradient-blue);
	border-color: var(--blue-600);
	box-shadow: var(--shadow-blue);
}

.blog-pagination > .page-numbers > li > :is(.page-numbers.prev, .page-numbers.next) {
	background: var(--surface);
	border-color: var(--border-soft);
}

.blog-pagination > .page-numbers > li > .page-numbers.dots {
	width: 2rem;

	color: var(--text-muted);
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.blog-pagination .material-symbols-rounded {
	font-size: 1.25rem;
}


/* ==========================================================
   BLOG · EMPTY STATE
   ========================================================== */

.blog-empty-state {
	padding: var(--space-48);

	text-align: center;

	background: var(--surface-soft);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-sm);
}

.blog-empty-state h3,
.blog-empty-state p {
	margin: 0;
}

.blog-empty-state p {
	margin-top: var(--space-8);

	color: var(--text-muted);
}


/* ==========================================================
   BLOG · RESPONSIVE · TABLET
   ========================================================== */

@media (max-width: 64rem) {

	.blog-featured-card {
		grid-template-columns:
			minmax(0, 1fr)
			minmax(18rem, 0.9fr);
	}

	.blog-featured-body {
		padding: var(--space-36);
	}

	.blog-articles-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}


/* ==========================================================
   BLOG · RESPONSIVE · MOBILE
   ========================================================== */

@media (max-width: 48rem) {

	.blog-index-section {
		padding-top: var(--space-48);
	}

	.blog-categories {
		flex-wrap: nowrap;
		justify-content: flex-start;

		width:
			calc(
				100%
				+
				(var(--gutter) * 2)
			);

		margin-inline:
			calc(var(--gutter) * -1);

		padding-inline: var(--gutter);
		padding-bottom: var(--space-8);

		overflow-x: auto;
		scrollbar-width: none;
	}

	.blog-categories::-webkit-scrollbar {
		display: none;
	}

	.blog-category-pill {
		flex: 0 0 auto;
	}

	.blog-featured-card {
		display: flex;
		flex-direction: column;

		min-height: 0;
	}

	.blog-featured-media {
		width: 100%;
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.blog-featured-media img {
		aspect-ratio: 16 / 9;
	}

	.blog-featured-body {
		padding: var(--space-32);
	}

	.blog-featured-title {
		max-width: 22ch;
	}

	.blog-articles-grid {
		gap: var(--space-24);
	}

}


/* ==========================================================
   BLOG · RESPONSIVE · SMALL MOBILE
   ========================================================== */

@media (max-width: 36rem) {

	.blog-hero-title {
		max-width: 14ch;
	}

	.blog-index-container {
		gap: var(--space-36);
	}

	.blog-articles-grid {
		grid-template-columns: 1fr;
	}

	.blog-featured-body {
		padding:
			var(--space-28)
			var(--space-24)
			var(--space-32);
	}

	.blog-pagination > .page-numbers {
		gap: 0.25rem;
	}

	.blog-pagination > .page-numbers > li > .page-numbers {
		width: 2.5rem;
		height: 2.5rem;
	}

	.blog-pagination > .page-numbers > li > .page-numbers.dots {
		width: 1.5rem;
	}

}





/* ==========================================================
   STATIC HOME · WORDPRESS / GENERATEPRESS DECOUPLING
   Append this block at the END of assets/css/site.css.
   Remove it later only after equivalent rules are merged into
   the permanent component sections during the full migration.
   ========================================================== */

/* ==========================================================
   STATIC SHELL
   ========================================================== */

.home .site-main,
.home .entry-content {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.home .entry-content > :first-child {
  margin-top: 0;
}

.home .entry-content > :last-child {
  margin-bottom: 0;
}

.entry-content .section {
  width: 100%;
  max-width: none;
}

/* ==========================================================
   HEADER · STATIC NAVIGATION
   Keeps the current visual language without GeneratePress.
   ========================================================== */

#masthead.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header, 1000);
  width: 100%;
}

#masthead .inside-header {
  width: min(calc(100% - (var(--gutter) * 2)), var(--container-max));
  max-width: var(--container-max);
  min-height: var(--header-height);
  margin-inline: auto;
}

#masthead .site-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

#masthead .site-logo .header-image {
  display: block;
  width: auto;
  height: auto;
}

#site-navigation .inside-navigation,
#site-navigation .main-nav,
#site-navigation .main-nav > ul {
  width: auto;
}

#site-navigation .main-nav > ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.mobile-menu-control-wrapper {
  display: none;
}

.menu-toggle {
  appearance: none;
  border: 0;
}

.menu-toggle-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
}

.menu-toggle-icon svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition:
    opacity var(--duration-fast) ease,
    transform var(--duration-base) var(--ease-standard);
}

.menu-toggle-icon .menu-icon-open {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.menu-toggle-icon .menu-icon-close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.82);
}

#masthead.site-header.is-menu-open .menu-icon-open {
  opacity: 0;
  transform: rotate(90deg) scale(0.82);
}

#masthead.site-header.is-menu-open .menu-icon-close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* ==========================================================
   HERO · SEMANTIC MARKUP
   ========================================================== */

.hero {
  display: grid;
}

.hero-actions .btn-primary:hover .material-symbols-rounded,
.hero-actions .btn-primary:focus-visible .material-symbols-rounded {
  transform: translateX(0.2rem);
}

@media (max-width: 36rem) {
  .hero-actions .btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
}

/* ==========================================================
   SECTION HEADINGS
   ========================================================== */

.section-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.section-heading > * {
  margin-inline: 0 !important;
}

/* ==========================================================
   FEATURE CAROUSEL · SEMANTIC MARKUP
   ========================================================== */

.feature-carousel-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-48);
  align-items: start;
}

.feature-carousel-heading {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
}

.feature-carousel-heading > * {
  margin-inline: 0 !important;
}

.feature-carousel-heading > p:not(.section-eyebrow) {
  width: 100%;
  max-width: 38ch;
}

.feature-carousel {
  display: flex;
  flex-direction: column;
}

.feature-carousel-stage {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
}

.feature-carousel-slide {
  grid-column: 1 / -1;
}

.feature-carousel-copy {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
}

.feature-carousel-copy > * {
  margin-block: 0 !important;
}

.feature-carousel-media {
  min-width: 0;
}

.feature-carousel-media figure {
  margin: 0;
}

.feature-carousel-media img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ==========================================================
   SERVICES · SEMANTIC MARKUP
   ========================================================== */

.services-grid > .service-card {
  display: flex;
  width: auto;
  min-width: 0;
  margin: 0 !important;
}

.service-card-standard {
  display: flex;
  flex-direction: column;
}

.service-card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  min-height: 100%;
}

.service-card-content > * {
  margin-block: 0 !important;
}

.service-card-actions {
  display: flex;
}

.service-card-actions .service-card-button {
  width: 100%;
}

.service-card-button.btn {
  justify-content: center;
  min-height: var(--btn-height);
  padding-inline: var(--btn-padding-inline);
  color: var(--btn-color) !important;
  background: var(--btn-background) !important;
  border-color: var(--btn-border-color) !important;
  border-radius: var(--btn-radius);
  box-shadow: var(--btn-shadow);
}

.service-card-button.btn:hover,
.service-card-button.btn:focus-visible {
  color: var(--btn-color-hover) !important;
  background: var(--btn-background-hover) !important;
  border-color: var(--btn-border-color-hover) !important;
  box-shadow: var(--btn-shadow-hover) !important;
}

.service-card-featured-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}

.service-card-featured-copy > * {
  margin-block: 0 !important;
}

.service-card-featured-visual {
  min-width: 0;
}

.service-card-featured-visual figure {
  margin: 0;
}

.service-card-featured-actions {
  display: flex;
}

.service-card-featured-actions .service-card-button {
  width: auto;
}

.service-card-featured .service-card-button.is-luxury-gold {
  position: relative;
  width: auto;
  min-width: 0;
  padding-inline: var(--btn-padding-inline);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(139, 91, 10, 0.18),
    0 10px 24px -18px rgba(229, 177, 57, 0.75);
}

.service-card-featured .service-card-button.is-luxury-gold::before {
  content: "";
  position: absolute;
  inset: 1px 1px 52%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.44),
    rgba(255, 255, 255, 0)
  );
  border-radius: inherit;
}

.service-card-featured .service-card-button.is-luxury-gold > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 56.25rem) {
  .service-card-featured-actions,
.service-card-featured-actions .service-card-button {
    width: 100% !important;
  }
}

@media (max-width: 36rem) {
  .service-card-featured .service-card-button.is-luxury-gold {
    width: 100% !important;
    min-width: 0;
  }
}

/* ==========================================================
   BRAND HIGHLIGHTS · SEMANTIC MARKUP
   ========================================================== */

.brand-highlights-inner,
.brand-highlights-heading,
.brand-highlights-grid,
.brand-highlight-item {
  min-width: 0;
}

.brand-highlight-item > * {
  margin: 0 !important;
}

/* ==========================================================
   PRICING · SEMANTIC MARKUP
   ========================================================== */

.pricing-section .pricing-comparison {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
}

.pricing-section .pricing-comparison > * {
  margin-block: 0 !important;
}

.pricing-section .pricing-comparison-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.48fr);
  gap: var(--space-32);
  align-items: end;
  padding: var(--space-28);
}

.pricing-section .pricing-comparison-copy,
.pricing-section .pricing-service-control {
  min-width: 0;
}

.pricing-section .pricing-comparison-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pricing-section .pricing-service-control {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pricing-section :is(.pricing-comparison-copy, .pricing-service-control) > * {
  margin-block: 0 !important;
  padding-bottom: var(--space-8);
}

/* ==========================================================
   CONTACT · SEMANTIC MARKUP
   ========================================================== */

.contact-section .contact-layout {
  display: grid !important;
  grid-template-columns: minmax(20rem, 0.82fr) minmax(34rem, 1.18fr);
  gap: var(--space-64);
  align-items: center;
}

.contact-section .contact-layout > * {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0 !important;
}

.contact-section .contact-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
}

.contact-section .contact-intro > * {
  margin: 0 !important;
}

.contact-section .contact-options {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
}

.contact-section .contact-option {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-16);
  align-items: start;
}

.contact-section .contact-option-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}

.contact-section .contact-option-copy > * {
  margin: 0 !important;
}

.contact-section .contact-form-panel {
  display: block;
}

.contact-section .contact-form-panel > * {
  margin: 0 !important;
}

/* ==========================================================
   RESPONSIVE · STATIC HOME
   ========================================================== */

@media (max-width: 68rem) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 56.25rem) {
  .pricing-section .pricing-comparison-head,
.contact-section .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-section .contact-layout {
    gap: var(--space-48);
  }
}

@media (max-width: 48rem) {
  .mobile-menu-control-wrapper {
    display: flex;
    align-items: center;
    margin-left: auto;
  }

  #site-navigation.main-navigation {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
  }

  #site-navigation .inside-navigation {
    width: 100%;
  }

  #site-navigation .main-nav {
    display: none;
    width: 100%;
  }

  #site-navigation.toggled .main-nav {
    display: block;
  }

  #site-navigation .main-nav > ul {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .services-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 36rem) {
  .contact-section .contact-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-section .contact-field-full {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-toggle-icon svg {
    transition: none;
  }
}

/* ==========================================================
   STATIC HOME · LAYOUT FIXES
   ========================================================== */


/* ==========================================================
   BRAND HIGHLIGHTS · CONTAINER
   ========================================================== */

.brand-highlights .brand-highlights-inner {
	width: min(
		calc(100% - (var(--gutter) * 2)),
		var(--container-max)
	) !important;

	max-width: var(--container-max) !important;

	margin-inline: auto !important;
}


/* ==========================================================
   EVIDENCE · DESKTOP TWO-COLUMN LAYOUT
   ========================================================== */

@media (min-width: 64rem) {

	.feature-carousel-layout {
		grid-template-columns:
			24rem
			minmax(0, 1fr) !important;

		gap: clamp(
			var(--space-20),
			2vw,
			var(--space-36)
		);

		align-items: center;
	}

	.feature-carousel-heading {
		width: 24rem;
		min-width: 24rem;
		max-width: 24rem;
	}

	.evidence-section .feature-carousel-layout {
		width: min(
			calc(100% - (var(--gutter) * 2)),
			var(--container-max)
		) !important;

		max-width: var(--container-max) !important;
		margin-inline: auto !important;
	}

}


/* ==========================================================
   EVIDENCE · TABLET / MOBILE
   ========================================================== */

@media (max-width: 63.99rem) {

	.feature-carousel-layout {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.feature-carousel-heading {
		width: 100%;
		min-width: 0;
		max-width: none;
	}

}


/* ==========================================================
   PAGE · 404
   ========================================================== */

.error-404 {
	min-height: 100svh;
}

.error-404-copy {
	max-width: 52rem;
}

.error-404-title,
.error-404-description {
	max-width: none;
}

.error-404-actions {
	justify-content: center;
}


/* ==========================================================
   PAGE · 404 · MOBILE
   ========================================================== */

@media (max-width: 48rem) {

	.error-404-copy {
		max-width: 100%;
	}

	.error-404-actions {
		width: 100%;
	}

	.error-404-actions .btn {
		width: 100%;
	}

}


/* ==========================================================
   BLOG · ANCHOR SCROLL
   Reduce el recorrido visual al navegar hacia #articles.
   ========================================================== */

.page-blog #articles {
	scroll-margin-top:
		calc(var(--header-height) + var(--space-64));
}

/* ==========================================================
   ARGENTICARE · SINGLE POST
   ========================================================== */

.single-post {
	--post-content-max: 64rem;
	--post-reading-max: 64rem;
	--post-image-max: 29rem;
}


/* ==========================================================
   PAGE SHELL
   ========================================================== */

.single-post #page {
	position: relative;
	width: 100%;
	max-width: none;
	margin: 0;
	overflow: clip;
}

/*
The GeneratePress content wrapper begins after the site header.
Pull it upward so the hero background extends behind navigation.
*/
.single-post .site-content {
	position: relative;

	width: 100%;
	max-width: none;

	margin:
		calc(var(--header-height) * -1)
		0
		0;

	padding: 0;
}

.single-post .content-area,
.single-post .site-main {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.single-post article.post {
	margin: 0;
}


.single-post .inside-article {
	position: relative;
	z-index: 0;

	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		minmax(20rem, 0.86fr);

	/*
	Header space + hero row = exactly 100svh.
	*/
	grid-template-rows:
		calc(100svh - var(--header-height))
		auto
		auto;

	column-gap: var(--space-64);
	align-items: center;

	width: min(
		calc(100% - (var(--gutter) * 2)),
		var(--container-max)
	);

	margin-inline: auto;

	/*
	This padding reserves space for the overlaying header
	without increasing the total hero height beyond 100svh.
	*/
	padding:
		var(--header-height)
		0
		0;

	background: transparent;
	box-sizing: border-box;
}


/* ==========================================================
   HERO BACKGROUND
   ========================================================== */

.single-post .inside-article::before {
	content: "";
	position: absolute;
	z-index: -2;

	top: 0;
	left: 50%;

	width: 100vw;
	height: 100svh;

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0) 70%,
			rgba(255, 255, 255, 0.72) 88%,
			var(--surface) 100%
		),
		radial-gradient(
			ellipse at 86% 48%,
			rgba(128, 190, 248, 0.26) 0%,
			transparent 44%
		),
		radial-gradient(
			ellipse at 4% 56%,
			rgba(179, 217, 251, 0.3) 0%,
			transparent 46%
		),
		linear-gradient(
			180deg,
			#fbfdff 0%,
			var(--blue-50) 58%,
			var(--blue-100) 100%
		);

	transform: translateX(-50%);
	pointer-events: none;
}

.single-post .inside-article::after {
	content: "";
	position: absolute;
	z-index: -1;

	top: calc(var(--header-height) + var(--space-48));
	left: 50%;

	width: min(
		calc(100vw - (var(--gutter) * 2)),
		var(--container-max)
	);

	height: clamp(16rem, 34vw, 24rem);

	background-image:
		radial-gradient(
			circle,
			rgba(0, 115, 229, 0.14) 1px,
			transparent 1.5px
		);

	background-size: 1.1rem 1.1rem;

	mask-image:
		linear-gradient(
			90deg,
			black,
			transparent 25%,
			transparent 75%,
			black
		);

	-webkit-mask-image:
		linear-gradient(
			90deg,
			black,
			transparent 25%,
			transparent 75%,
			black
		);

	opacity: 0.56;
	transform: translateX(-50%);
	pointer-events: none;
}


/* ==========================================================
   HEADER OVER HERO
   ========================================================== */

.single-post .site-header:not(.is-scrolled) {
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
}

/* ==========================================================
   HERO · COPY
   ========================================================== */

.single-post .entry-header {
	grid-column: 1;
	grid-row: 1;

	align-self: center;

	width: 100%;
	margin: 0;
	padding: 0;
}

.single-post .entry-header > .entry-meta {
	display: none !important;
}

.single-post-header-top {
	display: flex;
	align-items: center;
	margin-bottom: var(--space-28);
}

/* ==========================================================
   HERO · BREADCRUMB
   ========================================================== */

.single-post-breadcrumb {
	display: block;
	min-width: 0;

	color: var(--text-muted);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1.4;
}

.single-post-breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;

	margin: 0;
	padding: 0;

	list-style: none;
}

.single-post-breadcrumb-item,
.single-post-breadcrumb-separator {
	display: inline-flex;
	align-items: center;

	margin: 0;
	padding: 0;
}

.single-post-breadcrumb-item a {
	color: var(--text-muted);
	text-decoration: none;

	transition:
		color var(--duration-fast) ease;
}

.single-post-breadcrumb-item a:hover {
	color: var(--primary-hover);
}

.single-post-breadcrumb-separator {
	display: inline-grid;
	place-items: center;

	width: 1rem;
	height: 1rem;

	color: var(--slate-400);
	line-height: 1;
}

.single-post-breadcrumb-separator
	.material-symbols-rounded {
	display: block;

	width: 1rem;
	height: 1rem;

	font-size: 1rem;
	line-height: 1;

	font-variation-settings:
		"FILL" 0,
		"wght" 400,
		"GRAD" 0,
		"opsz" 20;

	transform: translateY(0.07em);
}


.single-post .entry-title {
	max-width: 14ch;
	margin: 0 !important;

	color: var(--text);
	font-family: var(--font-heading);
	font-size: clamp(2.75rem, 4.1vw, 4rem);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: var(--ls-h1);

	text-wrap: balance;
	overflow-wrap: break-word;
}

.single-post-description {
	width: 100%;
	max-width: 48ch !important;

	margin:
		var(--space-24)
		0
		0 !important;

	color: var(--text-soft);
	font-size: var(--fs-h4);
	font-weight: 400;
	line-height: var(--lh-relaxed);
}

.single-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-10);

	margin-top: var(--space-20);

	color: var(--text-muted);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.4;
}

.single-post-meta a {
	color: var(--primary-hover);
	font-weight: 600;
	text-decoration: none;
}

.single-post-meta a:hover {
	color: var(--primary-active);
}

.single-post-meta-separator {
	color: var(--slate-400);
}


/* ==========================================================
   HERO · FEATURED IMAGE
   ========================================================== */

.single-post .featured-image,
.single-post .page-header-image-single,
.single-post .post-image {
	position: relative;

	grid-column: 2;
	grid-row: 1;

	display: grid;
	place-items: center;

	width: min(100%, var(--post-image-max));
	aspect-ratio: 1;

	margin:
		0
		0
		0
		auto !important;

	padding: clamp(1rem, 2.5vw, 2rem);

	background: transparent;
	border: 0;
	box-shadow: none;
}

.single-post .featured-image::before,
.single-post .page-header-image-single::before,
.single-post .post-image::before {
	content: "";
	position: absolute;
	z-index: 0;

	width: 82%;
	aspect-ratio: 1;

	background: rgba(255, 255, 255, 0.56);
	border: 1px solid rgba(179, 217, 251, 0.5);
	border-radius: 50%;

	box-shadow:
		0 20px 48px -32px rgba(0, 73, 148, 0.22);

	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.single-post :is(
	.featured-image,
	.page-header-image-single,
	.post-image
) img {
	position: relative;
	z-index: 1;

	display: block;

	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;

	aspect-ratio: 1;
	object-fit: contain;
	object-position: center;
}


/* ==========================================================
   HERO · LANDSCAPE IMAGE
   Applied automatically through JavaScript
   ========================================================== */

.single-post :is(
	.featured-image,
	.page-header-image-single,
	.post-image
).has-landscape-image img {
	width: 122%;
	height: auto;

	max-width: none;
	max-height: none;

	aspect-ratio: auto;
	object-fit: contain;
}





/* ==========================================================
   ARTICLE CONTENT
   ========================================================== */

.single-post .entry-content {
	grid-column: 1 / -1;
	grid-row: 2;

	width: min(100%, var(--post-content-max));
	max-width: var(--post-content-max);

	margin:
		var(--space-48)
		auto
		0 !important;

	padding-bottom: var(--space-64);
}

.single-post .entry-content > * {
	width: 100%;
	max-width: none;
}

/* ==========================================================
   CONTENT · TYPOGRAPHY
   ========================================================== */

.single-post .entry-content p,
.single-post .entry-content li {
	width: 100%;
	max-width: none !important;

	color: var(--text-soft);
	font-size: clamp(1.0625rem, 1.15vw, 1.125rem);
	line-height: 1.78;
}

.single-post .entry-content p {
	margin-inline: 0;
}

.single-post .entry-content h2 {
	width: 100%;
	max-width: none;
	margin:
		var(--space-64)
		0
		var(--space-20) !important;

	color: var(--text);
	font-size: clamp(1.875rem, 2.4vw, 2.375rem);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-heading);

	scroll-margin-top:
		calc(var(--header-height) + var(--space-24));
}

.single-post .entry-content h3 {
	width: 100%;
	max-width: none;
	margin:
		var(--space-48)
		0
		var(--space-16) !important;

	color: var(--text);
	font-size: var(--fs-h3);
	line-height: var(--lh-tight);
}

.single-post .blog-post-lead {
	max-width: none !important;

	color: var(--slate-800);
	font-size: clamp(1.125rem, 1.3vw, 1.25rem);
	font-weight: 700;
	line-height: 1.72;
}


/* ==========================================================
   INLINE REFERENCES
   ========================================================== */

.single-post .post-citation {
	position: relative;
	top: -0.05em;

	margin-left: 0.08em;

	font-size: 0.68em;
	font-weight: 700;
	line-height: 0;
	vertical-align: super;
}

.single-post .post-citation a {
	color: var(--primary) !important;
	text-decoration: none !important;
}

.single-post .post-citation a:hover {
	color: var(--primary-active) !important;
	text-decoration: underline !important;
}


/* ==========================================================
   REUSABLE POST CTA
   ========================================================== */

.single-post .post-cta {
	position: relative;

	display: grid;
	grid-template-columns:
		minmax(0, 1.2fr)
		minmax(14rem, 0.8fr);
	gap: var(--space-48);
	align-items: center;

	width: 100%;
	margin-top: var(--space-64);
	padding:
		var(--space-48)
		var(--space-48);

	overflow: hidden;
	color: rgba(255, 255, 255, 0.88);
	background:
		radial-gradient(
			circle at 84% 14%,
			rgba(128, 190, 248, 0.28),
			transparent 34%
		),
		var(--gradient-blue);
	border: 1px solid var(--blue-600);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-blue);
}

.single-post .post-cta::before {
	content: "";
	position: absolute;

	inset: 0 auto 0 0;
	width: 44%;

	background-image:
		radial-gradient(
			circle,
			rgba(255, 255, 255, 0.18) 1px,
			transparent 1.5px
		);
	background-size: 1rem 1rem;

	mask-image:
		linear-gradient(
			90deg,
			black,
			transparent
		);
	-webkit-mask-image:
		linear-gradient(
			90deg,
			black,
			transparent
		);

	opacity: 0.5;
	pointer-events: none;
}

.single-post .post-cta-copy,
.single-post .post-cta-media {
	position: relative;
	z-index: 1;
}

.single-post .post-cta-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.single-post .post-cta h2 {
	max-width: 18ch;
	margin: 0 !important;

	color: var(--white);
	font-size: clamp(1.875rem, 3vw, 2.75rem);
	line-height: var(--lh-tight);
}

.single-post .post-cta p {
	max-width: 52ch !important;
	margin-top: var(--space-16) !important;

	color: rgba(255, 255, 255, 0.84);
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
}

.single-post .post-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-12);

	margin-top: var(--space-28);
}

.single-post .post-cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);

	min-height: 3.25rem;
	padding-inline: var(--space-24);

	border: 1px solid transparent;
	border-radius: var(--radius-pill);

	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1;
	text-decoration: none !important;

	transition:
		transform var(--duration-base) var(--ease-standard),
		background var(--duration-fast) ease,
		border-color var(--duration-fast) ease,
		box-shadow var(--duration-base) var(--ease-standard);
}

.single-post .post-cta-button:hover {
	transform: translateY(-2px);
}

.single-post .post-cta-button-primary {
	color: var(--blue-800) !important;
	background: var(--white);
	border-color: rgba(255, 255, 255, 0.82);
	box-shadow: var(--shadow-md);
}

.single-post .post-cta-button-primary:hover {
	color: var(--blue-900) !important;
	background: var(--white);
	box-shadow: var(--shadow-lg);
}

.single-post .post-cta-button-secondary {
	color: var(--white) !important;
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.34);
}

.single-post .post-cta-button-secondary:hover {
	color: var(--white) !important;
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.54);
}

.single-post .post-cta-button .material-symbols-rounded {
	font-size: 1.125rem;
}

.single-post .post-cta-media {
	display: grid;
	place-items: center;

	margin: 0;
}

.single-post .post-cta-media img {
	width: min(100%, 18rem);
	height: auto;
	object-fit: contain;
}


/* ==========================================================
   REFERENCES
   ========================================================== */

.single-post .blog-post-references {
	margin-top: var(--space-64) !important;
	padding-top: var(--space-48);
	border-top: 1px solid var(--border-soft);
}

.single-post .blog-post-references h2 {
	margin:
		0
		0
		var(--space-24) !important;

	font-size: var(--fs-h3);
}

.single-post .blog-reference-list {
	display: grid;
	gap: var(--space-16);

	margin: 0 !important;
	padding-left: 1.4rem;
}

.single-post .blog-reference-list li {
	padding-left: var(--space-8);

	color: var(--text-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);

	scroll-margin-top:
		calc(var(--header-height) + var(--space-24));
}

.single-post .blog-reference-list li::marker {
	color: var(--primary);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: 700;
}


/* ==========================================================
   REMOVE GENERATEPRESS META
   ========================================================== */

.single-post footer.entry-meta,
.single-post .inside-article > footer.entry-meta,
.single-post .cat-links,
.single-post .tags-links {
	display: none !important;
}


/* ==========================================================
   REMOVE DEFAULT POST NAVIGATION
   ========================================================== */

.single-post .post-navigation {
	display: none !important;
}


/* ==========================================================
   RELATED ARTICLES
   ========================================================== */

.single-post-related {
	grid-column: 1 / -1;
	grid-row: 3;

	position: relative;

	width: 100%;
	margin-top: var(--space-48);
	padding:
		var(--space-64)
		0
		var(--section-space);
}

.single-post-related::before {
	content: "";
	position: absolute;
	z-index: -1;

	top: 0;
	bottom: 0;
	left: 50%;

	width: 100vw;

	background: #f2f8fe69;
	border-top: 1px solid var(--border-soft);

	transform: translateX(-50%);
}

.single-post-related-header {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--space-32);

	margin-bottom: var(--space-36);
}

.single-post-related-header .section-eyebrow {
	margin: 0;
	color: var(--text-accent);
}

.single-post-related-header h2 {
	margin-top: var(--space-12);
	font-size: var(--fs-h2);
}

.single-post-related-grid {
	display: grid;
	grid-template-columns:
		repeat(3, minmax(0, 1fr));
	gap: var(--grid-gap);
}

.single-post-related-card {
	overflow: hidden;

	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);

	transition:
		transform var(--duration-base) var(--ease-standard),
		box-shadow var(--duration-base) var(--ease-standard);
}

.single-post-related-card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

.single-post-related-media {
	display: grid;
	place-items: center;

	width: 100%;
	aspect-ratio: 1;
	padding: var(--space-24);

	overflow: hidden;
	background: var(--gradient-soft-blue);
	border-bottom: 1px solid var(--border-soft-blue);
	text-decoration: none;
}

.single-post-related-media img {
	width: 100%;
	height: 100%;

	aspect-ratio: 1;
	object-fit: contain;
}

.single-post-related-content {
	padding:
		var(--space-24)
		var(--space-24)
		var(--space-28);
}

.single-post-related-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);

	color: var(--text-muted);
	font-size: var(--fs-xs);
}

.single-post-related-content h3 {
	margin-top: var(--space-16);
	font-size: var(--fs-h4);
	line-height: var(--lh-snug);
}

.single-post-related-content h3 a {
	color: var(--text);
	text-decoration: none;
}

.single-post-related-content h3 a:hover {
	color: var(--primary-hover);
}


/* ==========================================================
   RESPONSIVE · TABLET
   ========================================================== */

@media (max-width: 64rem) {

	.single-post {
		--post-image-max: 24rem;
	}

	.single-post .inside-article {
		column-gap: var(--space-48);
	}

	.single-post .post-cta {
		grid-template-columns:
			minmax(0, 1fr)
			minmax(12rem, 0.55fr);
		gap: var(--space-32);
	}

}


/* ==========================================================
   RESPONSIVE · MOBILE
   ========================================================== */

@media (max-width: 48rem) {

.single-post .inside-article {
		grid-template-columns: 1fr;

		grid-template-rows:
			auto
			auto
			auto
			auto;

		padding-top:
			calc(var(--header-height) + var(--space-32));
	}

	.single-post .inside-article::before {
		height: min(58rem, 112svh);
		min-height: 48rem;
	}

	/* Keep the hero gradient confined to the mobile hero */

	.single-post .entry-content {
		position: relative;
		z-index: 1;

		background: var(--surface);

		box-shadow:
			0 0 0 100vmax var(--surface);

		clip-path:
			inset(0 -100vmax);
	}

	.single-post .featured-image,
	.single-post .page-header-image-single,
	.single-post .post-image {
		grid-column: 1;
		grid-row: 1;

		width: min(100%, 22rem);

		margin:
			0
			auto !important;
	}

	.single-post .entry-header {
		grid-column: 1;
		grid-row: 2;

		margin-top: var(--space-24);
		padding: 0 0 var(--space-48);
	}

	.single-post .entry-content {
		grid-column: 1;
		grid-row: 3;

		margin-top: var(--space-48) !important;
	}

	.single-post .post-cta {
		grid-template-columns: 1fr;
		padding:
			var(--space-36)
			var(--space-28);
	}

	.single-post .post-cta-media {
		grid-row: 1;
	}

	.single-post .post-cta-copy {
		grid-row: 2;
	}

	.single-post .post-cta-media img {
		width: min(100%, 15rem);
	}

	.single-post-related {
		grid-row: 4;
	}

	.single-post-related-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}


/* ==========================================================
   RESPONSIVE · SMALL MOBILE
   ========================================================== */

@media (max-width: 36rem) {

	.single-post .entry-title {
		max-width: none;
	}

	.single-post-related-header {
		align-items: flex-start;
		flex-direction: column;
	}

	.single-post-related-grid {
		grid-template-columns: 1fr;
	}

	.single-post .post-cta {
		padding:
			var(--space-32)
			var(--space-24);
	}

	.single-post .post-cta-actions,
	.single-post .post-cta-button {
		width: 100%;
	}

}




/* ==========================================================
   SINGLE POST · ARTICLE INSIGHT BLOCKS
   ========================================================== */

.single-post .post-insight-block {
	width: 100%;
	margin:
		var(--space-48)
		0
		0 !important;
}

.single-post .post-insight-header {
	margin-bottom: var(--space-28);
}

.single-post .post-insight-header > * {
	margin-block: 0 !important;
}

.single-post .post-insight-header > * + * {
	margin-top: var(--space-12) !important;
}

.single-post .post-insight-header h3 {
	margin: 0 !important;

	color: var(--text);
	font-size: clamp(1.375rem, 1.8vw, 1.75rem);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
}

.single-post .post-insight-header
	p:not(.post-insight-eyebrow) {
	color: var(--text-muted);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
}

.single-post .post-insight-eyebrow,
.single-post .post-callout-label,
.single-post .post-workflow-label {
	margin: 0 !important;

	color: var(--text-accent) !important;
	font-size: var(--fs-xs) !important;
	font-weight: 700;
	line-height: 1.2 !important;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	padding-bottom: var(--space-12);
}

.single-post .post-insight-note {
	max-width: none !important;
	margin:
		var(--space-16)
		0
		0 !important;

	color: var(--text-muted);
	font-size: var(--fs-xs);
	line-height: var(--lh-base);
}


/* ==========================================================
   SINGLE POST · METRICS SUMMARY
   ========================================================== */

.single-post .post-metrics-block {
	padding:
		var(--space-32);

	background: var(--slate-50);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.single-post .post-metrics-grid {
	display: grid;
	grid-template-columns:
		repeat(3, minmax(0, 1fr));
	gap: var(--grid-gap);
}

.single-post .post-metric-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-12);

	height: auto;
	min-height: 13rem;
	padding: var(--space-24);

	background: rgba(255, 255, 255, 0.86);
	border-color: var(--border-soft-blue);
	box-shadow: var(--shadow-soft-blue);
}

.single-post .post-metric-top {
	display: contents;
}

.single-post .post-metric-icon {
	--icon-box-size: 3rem;
	--icon-box-symbol-size: 1.5rem;
}

.single-post .post-metric-icon
	> .material-symbols-rounded {
	display: block;

	font-size: var(--icon-box-symbol-size);
	font-variation-settings:
		"FILL" 0,
		"wght" 500,
		"GRAD" 0,
		"opsz" 24;

	line-height: 1;
	white-space: nowrap;
}


.single-post .post-metric-card
	.metric-value {
	margin-top: var(--space-8);

	color: var(--text);
	font-size: clamp(2.125rem, 3vw, 2.875rem);
	text-align: left;
}

.single-post .post-metric-card
	.post-metric-value-compact {
	max-width: 100%;

	font-size: clamp(1.625rem, 2.25vw, 2.125rem);
	line-height: var(--lh-snug);
	white-space: nowrap;
}

.single-post .post-metric-card
	.metric-label {
	margin: 0 !important;

	color: var(--text-soft);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: var(--lh-base);
}

.single-post .post-source-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);

	width: fit-content;
	margin-top: auto;
	padding-top: var(--space-8);

	color: var(--text-muted) !important;
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none !important;
}

.single-post .post-source-link:hover {
	color: var(--primary-hover) !important;
}

.single-post .post-source-link
	.material-symbols-rounded {
	font-size: 1rem;
	transition:
		transform var(--duration-fast) ease;
}

.single-post .post-source-link:hover
	.material-symbols-rounded {
	transform: translateY(0.15rem);
}


/* ==========================================================
   SINGLE POST · WORKFLOW COMPARISON
   ========================================================== */

.single-post .post-workflow {
	padding:
		var(--space-36)
		var(--space-32);

	background: var(--surface-soft);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-md);
}

.single-post .post-workflow-grid {
	display: grid;
	grid-template-columns:
		repeat(2, minmax(0, 1fr));
	gap: var(--grid-gap);
}

.single-post .post-workflow-column {
	padding: var(--space-28);

	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-sm);
}

.single-post .post-workflow-ai {
	background:
		linear-gradient(
			135deg,
			var(--white) 0%,
			var(--blue-50) 100%
		);

	border-color: var(--border-blue);
}

.single-post .post-workflow-column-header {
	display: grid;
	grid-template-columns:
		auto
		minmax(0, 1fr);
	gap: var(--space-16);
	align-items: start;

	padding-bottom: var(--space-24);
	border-bottom: 1px solid var(--border-soft);
}

.single-post .post-workflow-column-header
	.icon-box {
	--icon-box-size: 3rem;
	--icon-box-symbol-size: 1.5rem;
}

.single-post .post-workflow-column-header
	h4 {
	max-width: 18ch;
	margin:
		0
		0
		0 !important;

	color: var(--text);
	font-size: clamp(1.125rem, 1.4vw, 1.375rem);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
}

.single-post .post-workflow-steps {
	display: grid;
	gap: 0;

	margin:
		var(--space-12)
		0
		0 !important;

	padding: 0;
	list-style: none;
}

.single-post .post-workflow-steps li {
	display: grid;
	grid-template-columns:
		2.5rem
		minmax(0, 1fr);
	gap: var(--space-16);
	align-items: center;

	min-height: 4rem;
	padding:
		var(--space-12)
		0;

	border-bottom: 1px solid var(--border-soft);

	color: var(--text-soft);
	font-size: var(--fs-sm);
	line-height: var(--lh-base);
}

.single-post .post-workflow-steps
	li:last-child {
	border-bottom: 0;
}

.single-post .post-workflow-steps
	li > span:first-child {
	display: grid;
	place-items: center;

	width: 2.5rem;
	height: 2.5rem;

	color: var(--primary-hover);
	background: var(--surface-blue);
	border: 1px solid var(--border-soft-blue);
	border-radius: var(--radius-pill);

	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
}

.single-post .post-workflow-steps
	li > span:last-child {
	color: var(--text-soft);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: var(--lh-base);
}


/* ==========================================================
   SINGLE POST · EDITORIAL CALLOUT
   ========================================================== */

.single-post .post-editorial-callout {
	display: grid;
	grid-template-columns:
		auto
		minmax(0, 1fr);
	gap: var(--space-20);
	align-items: start;

	margin:
		var(--space-36)
		0 !important;

	padding:
		var(--space-28)
		var(--space-32);

	background:
		linear-gradient(
			135deg,
			var(--blue-50) 0%,
			rgba(255, 255, 255, 0.94) 100%
		);

	border-color: var(--border-blue);
	border-radius: var(--radius-md);
}

.single-post .post-editorial-callout
	> .material-symbols-rounded {
	display: grid;
	place-items: center;

	width: 3rem;
	height: 3rem;
	margin: 0;

	color: var(--primary-hover);
	background: var(--surface);
	border: 1px solid var(--border-blue);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-soft-blue);

	font-size: 1.5rem;
}

.single-post .post-editorial-callout p {
	margin: 0 !important;
}

.single-post .post-callout-text {
	max-width: 48rem !important;
	margin-top: var(--space-12) !important;

	color: var(--text) !important;
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 1.8vw, 1.625rem) !important;
	font-weight: 600;
	line-height: var(--lh-base) !important;
	letter-spacing: var(--ls-base);
}

/* ==========================================================
   SINGLE POST · AI ASSISTANT USE CASES
   ========================================================== */

.single-post .post-use-cases {
	--item-min: 18rem;
	--post-use-case-visual-size: 7rem;
	--post-use-case-media-height: 9rem;
}

.single-post .post-use-cases-grid {
	align-items: stretch;
}

.single-post .post-use-case-card {
	--card-media-min-height: 0;
	--card-media-ratio: auto;
	--visual-background: var(--surface);
	--visual-border-color: var(--border-soft);
	--visual-radius: var(--radius-sm);
	--visual-shadow: var(--shadow-md);

	height: 100%;
	overflow: hidden;
}

.single-post .post-use-case-media {
	display: grid;
	place-items: center;
	min-height: var(--post-use-case-media-height);
	aspect-ratio: 1 / 1;

	margin: 0 !important;
	padding:
		var(--space-16)
		var(--space-20);

	background: var(--blue-50);
	border-bottom: 1px solid var(--border-soft-blue);
}

.single-post .post-use-case-media img {
	display: block;

	width: 100%;
	height: 100%;


	margin: 0;

	object-fit: contain;
	object-position: center;

	transform: scale(1.08);
	transform-origin: center;
}

.single-post .post-use-case-card .card-body {
	gap: var(--space-12);

	padding:
		var(--space-24)
		var(--space-24)
		var(--space-28);
}

.single-post .post-use-case-card h3 {
	margin: 0 !important;

	color: var(--text);
	font-size: var(--fs-h5);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
}

.single-post .post-use-case-card p {
	margin: 0 !important;

	color: var(--text-soft);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
}


/* ==========================================================
   SINGLE POST · DEVELOPMENT PROCESS
   ========================================================== */

.single-post .post-development-process {
	--post-process-visual-size: 9rem;
	--post-process-media-width: 12rem;

	padding:
		var(--space-36)
		var(--space-32);

	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.single-post .post-process-list {
	position: relative;

	display: grid;
	gap: 0;

	margin: 0 !important;
	padding: 0 !important;

	list-style: none;
}

.single-post .post-process-list::before {
	content: "";
	position: absolute;

	top: var(--space-28);
	bottom: var(--space-28);
	left: 1.5rem;

	width: 1px;

	background: var(--blue-200);

	pointer-events: none;
}

.single-post .post-process-step {
	position: relative;

	display: grid;
	grid-template-columns:
		3rem
		minmax(0, 1fr);
	gap: var(--space-24);

	margin: 0 !important;
	padding:
		var(--space-28)
		0;

	list-style: none;
}

.single-post .post-process-step + .post-process-step {
	border-top: 1px solid var(--border-soft);
}

.single-post .post-process-marker {
	position: relative;
	z-index: 1;

	display: grid;
	place-items: center;

	width: 3rem;
	height: 3rem;

	color: var(--primary-hover);
	background: var(--surface);
	border: 1px solid var(--border-blue);
	border-radius: 50%;
	box-shadow: var(--shadow-soft-blue);

	font-family: var(--font-heading);
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.single-post .post-process-card {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		var(--post-process-media-width);
	gap: var(--space-32);
	align-items: start;

	min-width: 0;
}

.single-post .post-process-content {
	min-width: 0;
}

.single-post .post-process-content > * {
	margin-block: 0 !important;
}

.single-post .post-process-content > * + * {
	margin-top: var(--space-16) !important;
}

.single-post .post-process-content
	.post-workflow-label
	+ h3 {
	margin-top: var(--space-8) !important;
}

.single-post .post-process-content h3 {
	margin: 0 !important;

	color: var(--text);
	font-size: clamp(1.375rem, 1.8vw, 1.75rem);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
}

.single-post .post-process-content p:not(
	.post-workflow-label
) {
	margin: var(--space-12) 0 0 0 !important;

	color: var(--text-soft);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
}

.single-post .post-process-media {
	display: grid;
	place-items: center;
	align-self: start;

	width: 100%;
	aspect-ratio: 1;

	margin:
		var(--space-24)
		0
		0 !important;
	padding: var(--space-16);

	overflow: hidden;

	background: var(--blue-50);
	border: 1px solid var(--border-soft-blue);
	border-radius: var(--radius-sm);
}

.single-post .post-process-media img {
	display: block;

	width: 100%;
	height: 100%;
	max-width: var(--post-process-visual-size);
	max-height: var(--post-process-visual-size);

	margin: 0;

	object-fit: contain;
	object-position: center;

	transform: scale(1.05);
	transform-origin: center;
}


/* ==========================================================
   SINGLE POST · AI ASSISTANT SECTIONS · TABLET
   ========================================================== */

@media (max-width: 64rem) {

	.single-post .post-use-cases {
		--item-min: 16rem;
		--post-use-case-visual-size: 8rem;
		--post-use-case-media-height: 10rem;
	}

	.single-post .post-development-process {
		--post-process-visual-size: 8rem;
		--post-process-media-width: 11rem;
	}

	.single-post .post-process-card {
		gap: var(--space-24);
	}

	.single-post .post-process-media {
		margin-top: var(--space-20) !important;
	}

}


/* ==========================================================
   SINGLE POST · AI ASSISTANT SECTIONS · MOBILE
   ========================================================== */

@media (max-width: 48rem) {

	/* ---------- Use cases ---------- */

	.single-post .post-use-cases {
		--post-use-case-visual-size: 8rem;
		--post-use-case-media-height: 10rem;
	}

	.single-post .post-use-case-media {
		padding:
			var(--space-8)
			var(--space-16);
	}

	.single-post .post-use-case-media img {
		transform: scale(1.12);
	}


	/* ---------- Development process ---------- */

	.single-post .post-development-process {
		--post-process-visual-size: 7.5rem;
		--post-process-media-width: 11rem;

		padding:
			var(--space-32)
			var(--space-24);
	}

	.single-post .post-process-list::before {
		left: 1.25rem;
	}

	.single-post .post-process-step {
		grid-template-columns:
			2.5rem
			minmax(0, 1fr);
		gap: var(--space-20);
	}

	.single-post .post-process-marker {
		width: 2.5rem;
		height: 2.5rem;
	}

	.single-post .post-process-card {
		grid-template-columns: 1fr;
		gap: var(--space-16);
	}

	.single-post .post-process-media {
		width: min(
			100%,
			var(--post-process-media-width)
		);

		margin-top: var(--space-8) !important;
		padding: var(--space-8);

		justify-self: center;
	}

	.single-post .post-process-media img {
		transform: scale(1.08);
	}

}


/* ==========================================================
   SINGLE POST · AI ASSISTANT SECTIONS · SMALL MOBILE
   ========================================================== */

@media (max-width: 36rem) {

	/* ---------- Use cases ---------- */

	.single-post .post-use-cases {
		--item-min: 100%;
		--post-use-case-visual-size: 7rem;
		--post-use-case-media-height: 7.75rem;
	}

	.single-post .post-use-case-media {
		padding:
			var(--space-8)
			var(--space-12);
	}

	.single-post .post-use-case-card .card-body {
		gap: var(--space-8);

		padding:
			var(--space-20)
			var(--space-20)
			var(--space-24);
	}


	/* ---------- Development process ---------- */

	.single-post .post-development-process {
		--post-process-visual-size: 8rem;
		--post-process-media-width: 10rem;

		padding:
			var(--space-28)
			var(--space-20);
	}

	.single-post .post-process-list::before {
		display: none;
	}

	.single-post .post-process-step {
		grid-template-columns: 1fr;
		gap: var(--space-12);

		padding:
			var(--space-24)
			0;
	}

	.single-post .post-process-marker {
		width: 2.5rem;
		height: 2.5rem;
	}

	.single-post .post-process-card {
		gap: var(--space-16);
	}

	.single-post .post-process-content h3 {
		font-size: var(--fs-h4);
	}

	.single-post .post-process-content > * + * {
		margin-top: var(--space-12) !important;
	}

	.single-post .post-process-media {
		width: min(
			100%,
			var(--post-process-media-width)
		);

		padding: var(--space-8);
	}

}















/* ==========================================================
   SINGLE POST · EVIDENCE SUMMARY
   ========================================================== */

.single-post .post-evidence-summary {
	padding:
		var(--space-36)
		var(--space-32);

	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.single-post .post-evidence-table-wrap {
	overflow: visible;

	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.single-post .post-evidence-table {
	width: 100%;
	min-width: 0;
	border-collapse: collapse;
}

.single-post .post-evidence-table-wrap,
.single-post .post-evidence-table {
	border-left: 0 !important;
}

.single-post .post-evidence-table
	:is(th, td):first-child {
	border-left: 0 !important;
}

.single-post .post-evidence-table {
	border-top: 0 !important;
}

.single-post .post-evidence-table thead {
	display: none;
}

.single-post .post-evidence-table tbody {
	display: grid;
}

.single-post .post-evidence-table tr {
	display: grid;
	grid-template-columns:
		minmax(12rem, 1.4fr)
		minmax(8rem, 0.8fr);
	gap: var(--space-20);
	align-items: center;

	min-height: 4.25rem;
	padding:
		var(--space-12)
		0;

	border-bottom: 1px solid var(--border-soft);
}

.single-post .post-evidence-table
	tr:last-child {
	border-bottom: 0;
}

.single-post .post-evidence-table td {
	display: block;

	padding: 0;
	border: 0;

	color: var(--text-soft);
	font-size: var(--fs-sm);
	line-height: var(--lh-base);
}

.single-post .post-evidence-table
	td:first-child {
	color: var(--text);
	font-weight: 600;
}

.single-post .post-evidence-table
	td:last-child {
	justify-self: end;
}

.single-post .post-outcome {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);

	color: var(--success-700);
	font-weight: 600;
	white-space: nowrap;
}

.single-post .post-outcome
	.material-symbols-rounded {
	font-size: 1.125rem;
}

.single-post .post-outcome-neutral {
	color: var(--text-muted);
}

.single-post .post-evidence-table
	.badge {
	min-height: 1.875rem;
	padding:
		var(--space-8)
		var(--space-16);

	font-size: var(--fs-xs);
}


/* ---------- Reduce repeated status decoration ---------- */

.single-post .post-evidence-table
	tr:not(:last-child)
	.badge {
	color: var(--primary-hover);
	background: transparent;
	border-color: transparent;
	padding-inline: 0;
}

.single-post .post-evidence-table
	tr:last-child
	.badge {
	color: var(--slate-600);
	background: var(--surface-soft);
	border-color: var(--border-soft);
}


/* ==========================================================
   SINGLE POST · RESPONSIVE
   ========================================================== */

@media (max-width: 64rem) {

	.single-post .post-metrics-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

	.single-post .post-metric-card:last-child {
		grid-column: 1 / -1;
		min-height: 0;
	}

	.single-post .post-evidence-table tr {
		grid-template-columns:
			minmax(10rem, 1.2fr)
			minmax(8rem, 0.8fr)
			auto;
	}

}


@media (max-width: 48rem) {

	.single-post .post-metrics-block,
.single-post .post-workflow,
.single-post .post-evidence-summary {
		padding:
			var(--space-32)
			var(--space-24);
	}

	.single-post .post-workflow-grid {
		grid-template-columns: 1fr;
	}

	.single-post .post-workflow-column {
		padding: var(--space-24);
	}

	.single-post .post-workflow-column-header
		h4 {
		max-width: none;
	}

	.single-post .post-editorial-callout {
		padding:
			var(--space-24);
	}

	.single-post .post-evidence-table tr {
		grid-template-columns:
			minmax(0, 1fr)
			auto;
		gap:
			var(--space-8)
			var(--space-16);

		padding:
			var(--space-16)
			0;
	}

	.single-post .post-evidence-table
		td:first-child {
		grid-column: 1;
		grid-row: 1;
	}

	.single-post .post-evidence-table
		td:nth-child(2) {
		grid-column: 1;
		grid-row: 2;
	}

	.single-post .post-evidence-table
		td:last-child {
		grid-column: 2;
		grid-row: 1 / span 2;

		align-self: center;
		justify-self: end;
	}

}


@media (max-width: 36rem) {

	.single-post .post-metrics-block,
.single-post .post-workflow,
.single-post .post-evidence-summary {
		padding:
			var(--space-28)
			var(--space-20);
	}

	.single-post .post-metrics-grid {
		grid-template-columns: 1fr;
	}

	.single-post .post-metric-card,
.single-post .post-metric-card:last-child {
		grid-column: auto;
		min-height: 0;
	}

	.single-post .post-metric-card
		.post-metric-value-compact {
		white-space: normal;
	}

	.single-post .post-workflow-column {
		padding:
			var(--space-20);
	}

	.single-post .post-workflow-column-header {
		grid-template-columns: 1fr;
	}

	.single-post .post-workflow-steps li {
		grid-template-columns:
			2.25rem
			minmax(0, 1fr);
		gap: var(--space-12);
	}

	.single-post .post-workflow-steps
		li > span:first-child {
		width: 2.25rem;
		height: 2.25rem;
	}

	.single-post .post-editorial-callout {
		grid-template-columns: 1fr;
	}

	.single-post .post-callout-text {
		font-size: var(--fs-h5) !important;
	}

	.single-post .post-evidence-table tr {
		grid-template-columns: 1fr;
	}

	.single-post .post-evidence-table
		:is(
			td:first-child,
			td:nth-child(2),
			td:last-child
		) {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
	}

	.single-post .post-evidence-table
		td:last-child {
		margin-top: var(--space-8);
	}

}


/* ==========================================================
   SINGLE POST · ECONOMIC EVIDENCE TABLE
   ========================================================== */


.single-post .post-economic-table
	td:last-child {
	justify-self: end;
}

.single-post .post-economic-table
	.post-outcome {
	width: 100%;
	white-space: normal;
}

.single-post .post-economic-table
	.post-value-driver {
	display: block;

	color: var(--text-soft);
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: var(--lh-base);
}

@media (max-width: 64rem) {

	.single-post .post-economic-table tr {
		grid-template-columns:
			minmax(12rem, 1.05fr)
			minmax(11rem, 1fr)
			minmax(11rem, 0.9fr);
		column-gap: var(--space-24);
	}

}


@media (max-width: 48rem) {

	.single-post .post-economic-table tr {
		grid-template-columns:
			minmax(0, 1fr)
			auto;
		gap:
			var(--space-8)
			var(--space-20);
	}

	.single-post .post-economic-table
		td:first-child {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.single-post .post-economic-table
		td:nth-child(2) {
		grid-column: 1;
		grid-row: 2;
	}

	.single-post .post-economic-table
		td:last-child {
		grid-column: 2;
		grid-row: 2;

		align-self: center;
		justify-self: end;

		text-align: right;
	}

}


@media (max-width: 36rem) {

	.single-post .post-economic-table tr {
		grid-template-columns: 1fr;
	}

	.single-post .post-economic-table
		:is(
			td:first-child,
			td:nth-child(2),
			td:last-child
		) {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;

		text-align: left;
	}

}



/* ==========================================================
   SINGLE POST · PRICING SUMMARY
   ========================================================== */

.single-post .post-pricing-summary {
	width: 100%;
	min-width: 0;
	padding:
		var(--space-32);

	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}


/* ==========================================================
   SINGLE POST · PRICING SUMMARY · HEADER
   ========================================================== */

.single-post .post-pricing-summary
	> .post-insight-header {
	margin-bottom: var(--space-24);
}

.single-post .post-pricing-summary
	> .post-insight-header
	> * {
	margin-block: 0 !important;
}

.single-post .post-pricing-summary
	> .post-insight-header
	> * + * {
	margin-top: var(--space-8) !important;
}

.single-post .post-pricing-summary
	.post-insight-eyebrow {
	width: fit-content;

	color: var(--text-accent) !important;
	font-size: var(--fs-xs) !important;
	font-weight: 700;
	line-height: 1.2 !important;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.single-post .post-pricing-summary
	.post-insight-header h3 {
	margin: 0 !important;

	color: var(--text);
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
}

.single-post .post-pricing-summary
	.post-insight-header
	p:not(.post-insight-eyebrow) {
	margin: 0 !important;

	color: var(--text-soft);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
}


/* ==========================================================
   SINGLE POST · PRICING SUMMARY · COLUMN HEADERS
   ========================================================== */

.single-post .post-pricing-list-header {
	display: grid;
	grid-template-columns:
		minmax(8rem, 0.75fr)
		minmax(18rem, 1.65fr)
		minmax(9rem, 0.8fr);
	gap: var(--space-24);

	margin: 0 !important;
	padding:
		var(--space-16)
		var(--space-20);

	color: var(--text-muted);
	background: var(--slate-50);
	border:
		1px solid var(--border-soft);
	border-bottom: 0;
	border-radius:
		var(--radius-sm)
		var(--radius-sm)
		0
		0;

	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: var(--lh-base);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}


/* ==========================================================
   SINGLE POST · PRICING SUMMARY · TABLE
   ========================================================== */
.single-post .post-pricing-list {
	width: 100%;
	min-width: 0;
	margin: 0 !important;

	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius:
		0
		0
		var(--radius-sm)
		var(--radius-sm);
}

.single-post .post-pricing-plan {
	display: grid;
	grid-template-columns:
		minmax(8rem, 0.75fr)
		minmax(18rem, 1.65fr)
		minmax(9rem, 0.8fr);
	gap: var(--space-24);
	align-items: center;

	min-height: 5.5rem;
	margin: 0 !important;
	padding:
		var(--space-16)
		var(--space-20);

	background: var(--surface);
}

.single-post .post-pricing-plan
	+ .post-pricing-plan {
	border-top: 1px solid var(--border-soft);
}

.single-post .post-pricing-plan-featured {
	background:
		color-mix(
			in srgb,
			var(--blue-50) 72%,
			var(--surface)
		);
}

.single-post .post-pricing-plan:hover {
	background: var(--blue-50);
}


/* ---------- Plan ---------- */

.single-post .post-pricing-plan-name {
	min-width: 0;
}

.single-post .post-pricing-plan-name h3 {
	margin: 0 !important;

	color: var(--text);
	font-family: var(--font-heading);
	font-size: var(--fs-h5);
	font-weight: 600;
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
}


/* ---------- Scope ---------- */

.single-post .post-pricing-plan-description {
	max-width: 48ch !important;
	margin: 0 !important;

	color: var(--text-soft);
	font-size: var(--fs-sm);
	font-weight: 400;
	line-height: var(--lh-relaxed);
}


/* ---------- Price ---------- */

.single-post .post-pricing-plan-price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);

	margin: 0 !important;

	color: var(--text-soft);
	font-size: var(--fs-xs);
	font-weight: 500;
	line-height: var(--lh-base);
}

.single-post .post-pricing-plan-price strong {
	color: var(--primary-hover);
	font-family: inherit;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: var(--lh-base);
	letter-spacing: normal;
	white-space: nowrap;
}


/* ==========================================================
   SINGLE POST · PRICING SUMMARY · FOOTER
   ========================================================== */

.single-post .post-pricing-footer {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		auto;
	gap: var(--space-24);
	align-items: center;

	margin-top: var(--space-20);
}

.single-post .post-pricing-note {
	max-width: 62ch !important;
	margin: 0 !important;

	color: var(--text-muted);
	font-size: var(--fs-xs);
	line-height: var(--lh-base);
}

.single-post .post-pricing-link {
	margin-top: var(--space-12);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);

	min-height: 3rem;
	padding-inline: var(--space-24);

	color: var(--primary-hover) !important;
	background: var(--blue-50);
	border: 1px solid var(--border-soft-blue);
	border-radius: var(--radius-pill);

	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1;
	text-decoration: none !important;
	white-space: nowrap;

	transition:
		color var(--duration-fast) ease,
		background var(--duration-fast) ease,
		border-color var(--duration-fast) ease,
		transform var(--duration-base) var(--ease-standard);
}

.single-post .post-pricing-link:hover {
	color: var(--primary-active) !important;
	background: var(--blue-50);
	border-color: var(--border-blue);
	transform: translateY(-1px);
}

.single-post .post-pricing-link
	.material-symbols-rounded {
	font-size: 1.125rem;

	transition:
		transform var(--duration-fast) ease;
}

.single-post .post-pricing-link:hover
	.material-symbols-rounded {
	transform: translateX(0.2rem);
}

.post-pricing-plan-description,
.post-pricing-plan-price {
	font-size: var(--fs-sm) !important;
}


/* ==========================================================
   SINGLE POST · PRICING SUMMARY · TABLET
   ========================================================== */

@media (max-width: 64rem) {

	.single-post .post-pricing-list-header,
	.single-post .post-pricing-plan {
		grid-template-columns:
			minmax(7rem, 0.7fr)
			minmax(13rem, 1.4fr)
			minmax(8rem, 0.75fr);

		gap: var(--space-20);
	}

}


/* ==========================================================
   SINGLE POST · PRICING SUMMARY · MOBILE
   ========================================================== */

@media (max-width: 48rem) {

	.single-post .post-pricing-summary {
		padding:
			var(--space-28)
			var(--space-24);
	}

	.single-post .post-pricing-list-header {
		display: none;
	}

	.single-post .post-pricing-plan {
		grid-template-columns:
			minmax(0, 1fr)
			auto;
		gap:
			var(--space-8)
			var(--space-20);

		min-height: 0;
		padding:
			var(--space-20);
	}

	.single-post .post-pricing-plan-name {
		grid-column: 1;
		grid-row: 1;
	}

	.single-post .post-pricing-plan-price {
		grid-column: 2;
		grid-row: 1;

		align-items: flex-end;
		text-align: right;
	}

	.single-post .post-pricing-plan-description {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.single-post .post-pricing-footer {
		grid-template-columns: 1fr;
		gap: var(--space-16);
		align-items: start;
	}

	.single-post .post-pricing-link {
		justify-self: center;
	}

}


/* ==========================================================
   SINGLE POST · PRICING SUMMARY · SMALL MOBILE
   ========================================================== */

@media (max-width: 36rem) {

	.single-post .post-pricing-summary {
		padding:
			var(--space-24)
			var(--space-20);
	}

	.single-post .post-pricing-plan {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.single-post .post-pricing-plan-name,
	.single-post .post-pricing-plan-description,
	.single-post .post-pricing-plan-price {
		grid-column: 1;
		grid-row: auto;
	}

	.single-post .post-pricing-plan-price {
		align-items: flex-start;
		text-align: left;
	}

	.single-post .post-pricing-link {
		width: 100%;
	}

}




/* ==========================================================
   SINGLE POST · CODE SHOWCASE
   ========================================================== */

.single-post .post-code-showcase {
	display: grid;
	grid-template-columns:
		minmax(16rem, 0.8fr)
		minmax(0, 1.2fr);
	gap: var(--space-32);
	align-items: stretch;

	padding:
		var(--space-32);

	background:
		linear-gradient(
			135deg,
			var(--blue-50) 0%,
			var(--surface) 100%
		);

	border: 1px solid var(--border-soft-blue);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.single-post .post-code-showcase-copy {
	min-width: 0;
}

.single-post .post-code-showcase-copy > * {
	margin-block: 0 !important;
}

.single-post .post-code-showcase-copy > * + * {
	margin-top: var(--space-16) !important;
}

.single-post .post-code-showcase-copy
	.post-insight-eyebrow
	+ h3 {
	margin-top: var(--space-8) !important;
}

.single-post .post-code-showcase-copy h3 {
	margin: 0 !important;

	color: var(--text);
	font-size: clamp(1.5rem, 2vw, 1.875rem);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
}

.single-post .post-code-showcase-copy
	p:not(.post-insight-eyebrow) {
	margin: 0 !important;

	color: var(--text-soft);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
}

.single-post .post-code-feature-list {
	display: grid;
	gap: var(--space-16);

	margin:
		var(--space-24)
		0
		0 !important;

	padding: 0;
	list-style: none;
}

.single-post .post-code-feature-list li {
	display: grid;
	grid-template-columns:
		auto
		minmax(0, 1fr);
	gap: var(--space-12);
	align-items: start;

	margin: 0;
	padding: 0;

	color: var(--text-soft);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
}

.single-post .post-code-feature-list
	.material-symbols-rounded {
	margin-top: 0.18em;

	color: var(--primary);
	font-size: 1.125rem;
	font-variation-settings:
		"FILL" 1,
		"wght" 500,
		"GRAD" 0,
		"opsz" 20;
}


/* ---------- Code panel ---------- */

.single-post .post-code-panel {
	min-width: 0;
	overflow: hidden;

	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-soft-blue);
}

.single-post .post-code-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);

	padding:
		var(--space-16)
		var(--space-20);

	background: var(--slate-50);
	border-bottom: 1px solid var(--border-soft);
}

.single-post .post-code-header p {
	margin: 0 !important;

	color: var(--text);
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: var(--lh-base);
}

.single-post .post-code-header
	.material-symbols-rounded {
	color: var(--text-muted);
	font-size: 1.125rem;
}

.single-post .post-code-block {
	max-width: 100%;
	margin: 0;
	padding:
		var(--space-24)
		var(--space-20);

	overflow-x: auto;

	color: var(--slate-700);
	background: var(--surface);

	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	line-height: 1.75;
	tab-size: 4;
	white-space: pre;
}

.single-post .post-code-block code {
	color: inherit;
	background: transparent;
	font-family: inherit;
	font-size: inherit;
}

.single-post .post-code-block
	.code-keyword {
	color: var(--primary-active);
	font-weight: 700;
}

.single-post .post-code-block
	.code-string {
	color: var(--danger-700, var(--slate-700));
}

.single-post .post-code-note {
	display: grid;
	grid-template-columns:
		auto
		minmax(0, 1fr);
	gap: var(--space-12);
	align-items: start;

	padding:
		var(--space-16)
		var(--space-20);

	background: var(--blue-50);
	border-top: 1px solid var(--border-soft-blue);
}

.single-post .post-code-note
	.material-symbols-rounded {
	color: var(--primary-hover);
	font-size: 1.25rem;
}

.single-post .post-code-note p {
	margin: 0 !important;

	color: var(--text-muted);
	font-size: var(--fs-xs);
	line-height: var(--lh-relaxed);
}


/* ==========================================================
   SINGLE POST · APPLICATION LIST
   ========================================================== */

.single-post .post-application-list {
	overflow: hidden;

	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.single-post .post-application-item {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		10rem;
	gap: var(--space-32);
	align-items: center;

	min-width: 0;
	padding:
		var(--space-28)
		var(--space-32);
}

.single-post .post-application-item
	+ .post-application-item {
	border-top: 1px solid var(--border-soft);
}

.single-post .post-application-content {
	min-width: 0;
}

.single-post .post-application-content > * {
	margin-block: 0 !important;
}

.single-post .post-application-content > * + * {
	margin-top: var(--space-12) !important;
}

.single-post .post-application-content h3 {
	margin: 0 !important;

	color: var(--text);
	font-size: clamp(1.25rem, 1.7vw, 1.625rem);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
}

.single-post .post-application-content p {
	var(--space-12) 0 0 0 !important;

	color: var(--text-soft);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
}

.single-post .post-application-media {
	display: grid;
	place-items: center;

	width: 100%;
	aspect-ratio: 1;
	margin: 0 !important;
	padding: var(--space-16);

	background: var(--blue-50);
	border: 1px solid var(--border-soft-blue);
	border-radius: var(--radius-sm);
}

.single-post .post-application-media img {
	display: block;

	width: 100%;
	height: 100%;
	max-width: 8rem;
	max-height: 8rem;

	margin: 0;

	object-fit: contain;
	object-position: center;
}


/* ==========================================================
   SINGLE POST · RESOURCE DIRECTORY
   ========================================================== */

.single-post .post-resource-table tr {
	grid-template-columns:
		minmax(12rem, 0.8fr)
		minmax(0, 1.2fr);
}

.single-post .post-resource-table
	td:last-child {
	justify-self: stretch;
}

.single-post .post-resource-table
	td:last-child a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);

	width: 100%;

	text-decoration: none;
}

.single-post .post-resource-table
	td:last-child
	.material-symbols-rounded {
	flex: 0 0 auto;

	font-size: 1.125rem;
}


/* ==========================================================
   SINGLE POST · OPEN SCIENCE SECTIONS · RESPONSIVE
   ========================================================== */

@media (max-width: 64rem) {

	.single-post .post-code-showcase {
		grid-template-columns:
			minmax(15rem, 0.75fr)
			minmax(0, 1.25fr);

		gap: var(--space-24);
	}

	.single-post .post-application-item {
		grid-template-columns:
			minmax(0, 1fr)
			9rem;

		gap: var(--space-24);
	}

}


@media (max-width: 48rem) {

	.single-post .post-code-showcase {
		grid-template-columns: 1fr;

		padding:
			var(--space-28)
			var(--space-24);
	}

	.single-post .post-application-item {
		grid-template-columns:
			minmax(0, 1fr)
			8rem;

		padding:
			var(--space-24);
	}

	.single-post .post-resource-table tr {
		grid-template-columns: 1fr;
	}

	.single-post .post-resource-table
	:is(
			td:first-child,
			td:last-child
		) {
		grid-column: 1;
		grid-row: auto;
		justify-self: stretch;
	}

	.single-post .post-resource-table
		td:last-child {
		margin-top: var(--space-8);
	}

}


@media (max-width: 36rem) {

	.single-post .post-code-showcase {
		padding:
			var(--space-24)
			var(--space-20);
	}

	.single-post .post-code-block {
		padding:
			var(--space-20)
			var(--space-16);

		font-size: 0.75rem;
	}

	.single-post .post-application-item {
		grid-template-columns: 1fr;
		gap: var(--space-16);

		padding:
			var(--space-24)
			var(--space-20);
	}

	.single-post .post-application-media {
		width: min(100%, 9rem);
		padding: var(--space-12);

		justify-self: center;
	}

}

/* ---------- Primary link variant ---------- */

.single-post .post-pricing-link-primary {
	color: var(--white) !important;
	background: var(--primary);
	border-color: var(--primary);
	box-shadow: var(--shadow-soft-blue);
}

.single-post .post-pricing-link-primary:hover {
	color: var(--white) !important;
	background: var(--primary-hover);
	border-color: var(--primary-hover);
	box-shadow: var(--shadow-blue);
	transform: translateY(-2px);
}

.single-post .post-pricing-link-primary:focus-visible {
	outline: 3px solid var(--blue-200);
	outline-offset: 3px;
}


.single-post .blog-reference-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: var(--space-4);

	color: var(--primary);
	text-decoration: none;
	vertical-align: -0.2rem;
}

.single-post .blog-reference-link .material-symbols-rounded {
	font-size: 1.25rem;
	line-height: 1;
}

/* ==========================================================
   SINGLE POST · USE CASES · MEDIA VARIANTS
   ========================================================== */

.single-post .post-use-case-media.is-landscape {
	aspect-ratio: 16 / 9;
}

.single-post .post-use-case-media.is-landscape img {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
}


/* ==========================================================
   SINGLE POST · STATIC MIGRATION
   Append this block at the END of assets/css/single-post.css.

   Purpose:
   - remove the remaining Gutenberg flow dependency;
   - keep the current visual system intact;
   - make single-post content spacing depend only on our own HTML.
   ========================================================== */


/* ==========================================================
   STATIC SHELL
   ========================================================== */

.single-post .single-post-main {
	position: relative;

	width: 100%;
	max-width: none;

	margin:
		calc(var(--header-height) * -1)
		0
		0;

	padding: 0;
}

.single-post .single-post-article {
	width: 100%;
	margin: 0;
}


/* ==========================================================
   CONTENT · STATIC FLOW
   ========================================================== */

.single-post .post-content {
	width: min(100%, var(--post-content-max));
	max-width: var(--post-content-max);
}

.single-post .post-content > * {
	width: 100%;
	max-width: none;
	margin-block: 0 !important;
}


/* ---------- Regular content spacing ---------- */

.single-post .post-content > * + :not(h2, h3, h4) {
	margin-block-start: var(--space-24) !important;
}


/* ---------- Section headings ---------- */

.single-post .post-content > * + h2 {
	margin-block-start: var(--space-64) !important;
}

.single-post .post-content > * + :is(h3, h4) {
	margin-block-start: var(--space-48) !important;
}


/* ---------- Content immediately after headings ---------- */

.single-post .post-content > :is(h2, h3, h4) + * {
	margin-block-start: var(--space-20) !important;
}


/* ---------- Insight blocks before a new section ---------- */

.single-post .post-content > .post-insight-block + h2 {
	margin-block-start: var(--space-64) !important;
}


/* ==========================================================
   CONTENT · LINKS
   No Gutenberg button exception is required anymore.
   ========================================================== */

.single-post .post-content a {
	color: var(--primary-hover);
	font-weight: 600;

	text-decoration-color: var(--blue-300);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.single-post .post-content a:hover {
	color: var(--primary-active);
	text-decoration-color: currentColor;
}


/* Component links/buttons keep their own visual rules. */

.single-post .post-content :is(
	.post-source-link,
	.post-pricing-link,
	.post-cta-button,
	.btn
) {
	text-decoration: none;
}


/* ==========================================================
   STATIC HERO MEDIA
   ========================================================== */

.single-post .post-hero-media {
	margin-block: 0 !important;
}


/* ==========================================================
   STATIC RELATED CONTENT
   ========================================================== */

.single-post .single-post-related-card img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}