/* how-it-works — port of the Next page */
[data-cmp="how-it-works"] .hiw, [data-cmp="how-it-works"].hiw { background: var(--surface-base); }
[data-cmp="how-it-works"] .hiw-center, [data-cmp="how-it-works"].hiw-center { text-align: center; margin-bottom: var(--space-10); }

[data-cmp="how-it-works"] .hiw-hero, [data-cmp="how-it-works"].hiw-hero { position: relative; overflow: hidden; padding: var(--space-10) var(--space-4) var(--space-6); }
@media (min-width: 1024px) { [data-cmp="how-it-works"] .hiw-hero, [data-cmp="how-it-works"].hiw-hero { padding-top: var(--space-12); }}
[data-cmp="how-it-works"] .hiw-hero-inner, [data-cmp="how-it-works"].hiw-hero-inner { position: relative; max-width: 56rem; margin-inline: auto; text-align: center; }
[data-cmp="how-it-works"] .hiw-hero-inner .asio-h1, [data-cmp="how-it-works"].hiw-hero-inner .asio-h1 { margin: 0; font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3rem); }
[data-cmp="how-it-works"] .hiw-hero-inner .asio-lead, [data-cmp="how-it-works"].hiw-hero-inner .asio-lead { margin: var(--space-4) auto 0; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); }
[data-cmp="how-it-works"] .hiw-anim, [data-cmp="how-it-works"].hiw-anim { position: relative; max-width: 900px; margin: var(--space-6) auto 0; min-height: 260px; }
[data-cmp="how-it-works"] implementation-phases-animation, implementation-phases-animation[data-cmp="how-it-works"] { display: block; width: 100%; }

[data-cmp="how-it-works"] .hiw-phases, [data-cmp="how-it-works"].hiw-phases { padding: var(--space-8) var(--space-4) var(--space-12); }
[data-cmp="how-it-works"] .hiw-phase-grid, [data-cmp="how-it-works"].hiw-phase-grid { display: grid; gap: var(--space-6); max-width: 64rem; margin-inline: auto; grid-template-columns: 1fr; }
@media (min-width: 768px) { [data-cmp="how-it-works"] .hiw-phase-grid, [data-cmp="how-it-works"].hiw-phase-grid { grid-template-columns: repeat(2, 1fr); }}
[data-cmp="how-it-works"] .hiw-phase, [data-cmp="how-it-works"].hiw-phase { padding: var(--space-6); }
[data-cmp="how-it-works"] .hiw-phase-tag, [data-cmp="how-it-works"].hiw-phase-tag { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
[data-cmp="how-it-works"] .hiw-phase h2, [data-cmp="how-it-works"].hiw-phase h2 { margin: var(--space-2) 0 0; }
[data-cmp="how-it-works"] .hiw-phase ul, [data-cmp="how-it-works"].hiw-phase ul { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
[data-cmp="how-it-works"] .hiw-phase li, [data-cmp="how-it-works"].hiw-phase li { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.55; }
[data-cmp="how-it-works"] .hiw-phases-note, [data-cmp="how-it-works"].hiw-phases-note { max-width: 42rem; margin: var(--space-6) auto 0; text-align: center; font-size: 0.875rem; color: var(--text-secondary); }

[data-cmp="how-it-works"] .hiw-fit, [data-cmp="how-it-works"].hiw-fit { padding: var(--space-12) var(--space-4); background: color-mix(in srgb, var(--surface-subtle) 50%, var(--surface-base)); }
[data-cmp="how-it-works"] .hiw-fit-inner, [data-cmp="how-it-works"].hiw-fit-inner { max-width: 72rem; margin-inline: auto; }
[data-cmp="how-it-works"] .hiw-fit-grid, [data-cmp="how-it-works"].hiw-fit-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 640px)  { [data-cmp="how-it-works"] .hiw-fit-grid, [data-cmp="how-it-works"].hiw-fit-grid { grid-template-columns: repeat(2, 1fr); }}
@media (min-width: 1024px) { [data-cmp="how-it-works"] .hiw-fit-grid, [data-cmp="how-it-works"].hiw-fit-grid { grid-template-columns: repeat(4, 1fr); }}
[data-cmp="how-it-works"] .hiw-fit-card, [data-cmp="how-it-works"].hiw-fit-card { padding: var(--space-6); }
[data-cmp="how-it-works"] .hiw-fit-card h3, [data-cmp="how-it-works"].hiw-fit-card h3 { margin: 0; font-size: 1.125rem; }
[data-cmp="how-it-works"] .hiw-fit-card p, [data-cmp="how-it-works"].hiw-fit-card p { margin: var(--space-3) 0 0; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.55; }

[data-cmp="how-it-works"] .hiw-diff, [data-cmp="how-it-works"].hiw-diff { padding: var(--space-12) var(--space-4); }
[data-cmp="how-it-works"] .hiw-diff-card, [data-cmp="how-it-works"].hiw-diff-card { max-width: 72rem; margin-inline: auto; overflow: hidden;
  border: 1px solid var(--border-default); border-radius: var(--radius-xl); background: var(--surface-card); }
[data-cmp="how-it-works"] .hiw-diff-head, [data-cmp="how-it-works"].hiw-diff-head { border-bottom: 1px solid var(--border-default);
  background: color-mix(in srgb, var(--surface-subtle) 60%, var(--surface-base)); padding: var(--space-4) var(--space-6); }
[data-cmp="how-it-works"] .hiw-diff-head h2, [data-cmp="how-it-works"].hiw-diff-head h2 { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
[data-cmp="how-it-works"] .hiw-table-wrap, [data-cmp="how-it-works"].hiw-table-wrap { overflow-x: auto; }
[data-cmp="how-it-works"] .hiw-table, [data-cmp="how-it-works"].hiw-table { width: 100%; min-width: 780px; border-collapse: collapse; text-align: left; }
[data-cmp="how-it-works"] .hiw-table th, [data-cmp="how-it-works"].hiw-table th { padding: var(--space-4) var(--space-6); font-size: 0.875rem; font-weight: 600;
  color: var(--text-primary); border-bottom: 1px solid var(--border-default); }
[data-cmp="how-it-works"] .hiw-table td, [data-cmp="how-it-works"].hiw-table td { padding: var(--space-4) var(--space-6); font-size: 0.875rem; vertical-align: top;
  border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); line-height: 1.5; }
[data-cmp="how-it-works"] .hiw-table td:first-child, [data-cmp="how-it-works"].hiw-table td:first-child { font-weight: 500; color: var(--text-primary); }
[data-cmp="how-it-works"] .hiw-table td:last-child, [data-cmp="how-it-works"].hiw-table td:last-child { color: var(--text-primary); }

[data-cmp="how-it-works"] .hiw-cta, [data-cmp="how-it-works"].hiw-cta { padding: 0 var(--space-4) var(--space-12); }
[data-cmp="how-it-works"] .hiw-cta-card, [data-cmp="how-it-works"].hiw-cta-card { max-width: 56rem; margin-inline: auto; text-align: center; padding: var(--space-10);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-base)); }
[data-cmp="how-it-works"] .hiw-cta-card h2, [data-cmp="how-it-works"].hiw-cta-card h2 { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
[data-cmp="how-it-works"] .hiw-cta-card p, [data-cmp="how-it-works"].hiw-cta-card p { margin: var(--space-3) 0 var(--space-6); color: var(--text-secondary); }