:root {
    --brand-primary: oklch(78.9% .154 211.53);
    --brand-middle: oklch(62.3% .214 259.815);
    --brand-secondary: oklch(54.6% .245 262.881);
    --cyan-50: oklch(98.4% .019 200.873);
    --cyan-100: oklch(95.6% .045 203.388);
    --cyan-200: oklch(91.7% .08 205.041);
    --cyan-500: oklch(71.5% .143 215.221);
    --cyan-600: oklch(60.9% .126 221.723);
    --cyan-700: oklch(52% .105 223.128);
    --blue-50: oklch(97% .014 254.604);
    --text-primary: oklch(21% .034 264.665);
    --text-body: oklch(37.3% .034 259.733);
    --text-secondary: oklch(44.6% .03 256.802);
    --text-muted: oklch(70.7% .022 261.325);
    --surface: #fff;
    --surface-alt: oklch(98.5% .002 247.839);
    --border: oklch(96.7% .003 264.542);
    --border-strong: oklch(92.8% .006 264.531);
    --container-width: 72rem;
    --radius-card: 1rem;
    --radius-small: .875rem;
    --brand-gradient: linear-gradient(to right in oklab, var(--brand-primary), var(--brand-middle), var(--brand-secondary));
    --shadow-small: 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a;
    --shadow-medium: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --shadow-large: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
}
/* Base: the live page uses the platform's system UI font. */
*, *::before, *::after {
   box-sizing: border-box;
}
html {
   -webkit-text-size-adjust: 100%;
   scroll-padding-top: 9rem;
}
body {
   margin: 0;
   color: var(--text-primary);
   background: var(--surface);
   font: 1rem/1.5 ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol {
   margin: 0;
}
h1, h2, h3 {
   text-wrap: balance;
   overflow-wrap: anywhere;
}
p, li, label {
   overflow-wrap: break-word;
}
a {
   color: inherit;
   text-decoration: none;
}
button, input {
   font: inherit;
}
button {
   cursor: pointer;
}
button, a, input {
   -webkit-tap-highlight-color: transparent;
}
button {
   color: inherit;
   border: 0;
   background: none;
}
img, svg {
   display: block;
   max-width: 100%;
}
img {
   height: auto;
}
[hidden] {
   display: none !important;
}
:focus-visible {
   outline: 3px solid var(--cyan-700);
   outline-offset: 4px;
}
.icon {
   width: 1.25rem;
   height: 1.25rem;
   flex-shrink: 0;
}
.container, .wide-container {
   width: 100%;
   margin-inline: auto;
   padding-inline: 1rem;
}
.container {
   max-width: var(--container-width);
}
.container--narrow {
   max-width: 56rem;
}
.skip-link {
   position: fixed;
   top: .5rem;
   left: .5rem;
   z-index: 100;
   transform: translateY(-150%);
   padding: .75rem 1rem;
   background: #fff;
   border-radius: .5rem;
}
.skip-link:focus {
   transform: translateY(0);
}
/* Information strip and navigation */
.site-header {
   position: fixed;
   inset: 0 0 auto;
   z-index: 50;
   background: #ffffffcc;
   backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--border);
   padding-top: env(safe-area-inset-top, 0px);
}
.topbar {
   padding-block: .375rem;
   color: white;
   background: var(--brand-gradient);
}
.topbar-inner, .topbar-contacts, .topbar-actions, .topbar a {
   display: flex;
   align-items: center;
}
.topbar-inner {
   justify-content: space-between;
   gap: .5rem;
   padding-inline: .75rem;
   font-size: .75rem;
}
.topbar-contacts {
   gap: .75rem;
   min-width: 0;
}
.topbar-contacts a {
   gap: .5rem;
}
.topbar .icon {
   width: 1rem;
   height: 1rem;
}
.topbar .topbar-email {
   display: none;
}
.topbar-actions {
   flex-shrink: 0;
   gap: .375rem;
}
.language-link {
   justify-content: center;
   min-width: 2rem;
   min-height: 2rem;
   padding-inline: .5rem;
   border-radius: .25rem;
   font-size: .875rem;
   font-weight: 500;
}
.language-link:hover {
   background: #ffffff33;
}
.site-nav {
   padding: .75rem;
}
.nav-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: .75rem;
   min-width: 0;
}
.brand {
   display: flex;
   align-items: center;
   gap: .5rem;
   min-width: 0;
}
.brand-mark {
   display: grid;
   place-items: center;
   width: 2.5rem;
   height: 2.5rem;
   flex-shrink: 0;
}
.brand-mark img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}
.brand strong {
   display: block;
   font-size: 1.125rem;
   line-height: 1.25;
}
.brand > span > span {
   display: block;
   color: var(--text-secondary);
   font-size: .75rem;
}
.desktop-nav {
   display: none;
   align-items: center;
   gap: 1rem;
   font-size: .875rem;
   font-weight: 500;
}
.desktop-nav > a, .nav-trigger {
   min-height: 2.75rem;
   display: inline-flex;
   align-items: center;
   color: var(--text-body);
   white-space: nowrap;
}
.nav-trigger {
   gap: .25rem;
   padding: 0 .25rem;
   font-size: inherit;
   font-weight: 500;
}
.nav-trigger > span {
   color: var(--text-muted);
   font-size: .75rem;
}
.desktop-nav a:hover, .nav-trigger:hover {
   color: var(--cyan-600);
}
.nav-group {
   position: relative;
}
.dropdown {
   position: absolute;
   top: calc(100% + .5rem);
   left: 0;
   width: 16rem;
   padding-block: .375rem;
   background: white;
   border: 1px solid var(--border);
   border-radius: var(--radius-small);
   box-shadow: var(--shadow-large);
}
.dropdown a {
   display: flex;
   align-items: center;
   min-height: 2.75rem;
   padding: .625rem 1rem;
   font-weight: 400;
}
.dropdown a:hover {
   background: var(--cyan-50);
}
.menu-toggle {
   display: grid;
   place-items: center;
   min-width: 2.75rem;
   min-height: 2.75rem;
   padding: .5rem;
}
.menu-toggle .icon {
   width: 1.5rem;
   height: 1.5rem;
}
.mobile-nav {
   margin-top: .75rem;
   max-height: min(70dvh, calc(100dvh - 8rem));
   overflow-y: auto;
   overscroll-behavior: contain;
   padding-bottom: .25rem;
}
.mobile-nav > a, .mobile-nav .nav-trigger {
   width: 100%;
   min-height: 2.75rem;
   padding: .625rem .75rem;
   border-radius: .5rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-weight: 500;
}
.mobile-nav .nav-group {
   border-bottom: 1px solid var(--border);
   padding-bottom: .5rem;
   margin-bottom: .25rem;
}
.mobile-nav a:hover, .mobile-nav .nav-trigger:hover {
   background: var(--cyan-50);
   color: var(--cyan-700);
}
.mobile-submenu {
   border-left: 1px solid var(--border-strong);
   margin: .25rem 0 0 .5rem;
   padding-left: .75rem;
}
.mobile-submenu a {
   display: flex;
   min-height: 2.75rem;
   align-items: center;
   padding: .5rem .75rem;
   font-size: .875rem;
   border-radius: .5rem;
}
.mobile-nav > .button {
   width: 100%;
   margin-top: .75rem;
}
.desktop-label {
   display: none;
}
/* Shared calls to action */
.button {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: .5rem;
   min-height: 2.5rem;
   padding: .75rem 1.5rem;
   border: 0;
   border-radius: 999px;
   font-size: .875rem;
   line-height: 1.25rem;
   font-weight: 600;
   text-align: center;
   transition: background .18s, box-shadow .18s, color .18s;
}
.button .icon {
   width: 1rem;
   height: 1rem;
   margin-left: .5rem;
}
.button--primary {
   color: white;
   background: var(--brand-gradient);
}
.button--primary:hover {
   background: linear-gradient(to right in oklab, var(--cyan-500), var(--brand-secondary), oklch(48.8% .243 264.376));
}
.button--outline {
   border: 2px solid var(--cyan-500);
   background: white;
   color: var(--cyan-600);
}
.button--outline:hover {
   background: var(--cyan-500);
   color: #fff;
}
.button--white {
   background: #fff;
   color: var(--cyan-600);
}
.button--white:hover {
   background: var(--border);
}
.button--cyan {
   background: var(--cyan-500);
   color: #fff;
}
.button--cyan:hover {
   background: var(--cyan-600);
}
.button--topbar {
   min-height: 2rem;
   padding: 0 .5rem;
   border-radius: .5rem;
   background: #ffffff1a;
   border: 1px solid #ffffff33;
   color: white;
   font-size: .75rem;
   font-weight: 500;
}
.button--topbar:hover {
   background: #ffffff33;
}
.desktop-nav .button, .mobile-nav .button {
   border-radius: .5rem;
   padding: .375rem .75rem;
   min-height: 2rem;
   font-weight: 500;
}
.button:disabled {
   opacity: .65;
   cursor: wait;
}
/* Original page composition */
.hero {
   position: relative;
   overflow: hidden;
   padding: 9rem 0 5rem;
   background: linear-gradient(to bottom right in oklab, var(--cyan-50), #fff, var(--blue-50));
}
.hero-content {
   position: relative;
   z-index: 1;
}
.hero-glow {
   position: absolute;
   width: 18rem;
   height: 18rem;
   border-radius: 50%;
   filter: blur(64px);
   opacity: .1;
   pointer-events: none;
}
.hero-glow--left {
   top: -4rem;
   left: 2.5rem;
   background: var(--brand-gradient);
   opacity: .12;
}
.hero-glow--right {
   bottom: 0;
   right: 2.5rem;
   background: linear-gradient(to bottom right, #67e8f9, #60a5fa, #3b82f6);
}
.hero-intro {
   max-width: 64rem;
   margin-inline: auto;
   text-align: center;
}
.trend-badge {
   display: inline-flex;
   max-width: 100%;
   padding: .5rem 1rem;
   margin-bottom: 1.25rem;
   border: 1px solid var(--cyan-200);
   border-radius: 999px;
   background: #ffffffe6;
   color: var(--cyan-700);
   font-size: .875rem;
   line-height: 1.25rem;
   font-weight: 600;
}
h1 {
   margin-bottom: 1.25rem;
   font-size: 1.5rem;
   line-height: 1.25;
   font-weight: 700;
}
.hero-description {
   max-width: 48rem;
   margin: 0 auto 2rem;
   color: var(--text-body);
   font-size: 1.125rem;
   line-height: 1.75rem;
}
.highlights {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: .5rem;
   margin-bottom: 2rem;
}
.highlights span {
   border: 1px solid var(--cyan-100);
   border-radius: 999px;
   background: #ffffffcc;
   padding: .375rem .75rem;
   color: var(--text-body);
   font-size: .875rem;
   line-height: 1.25rem;
   font-weight: 500;
}
.intro-grid {
   display: grid;
   gap: 1rem;
   margin: 0 auto 2.5rem;
}
.intro-card {
   padding: 1.25rem;
   border: 1px solid var(--border);
   border-radius: var(--radius-small);
   background: #ffffffe6;
   box-shadow: var(--shadow-small);
   text-align: left;
}
.intro-card h2 {
   margin-bottom: .5rem;
   font-size: 1rem;
   line-height: 1.5rem;
   font-weight: 600;
}
.intro-card p {
   color: var(--text-secondary);
   font-size: .875rem;
   line-height: 1.625;
}
.hero-actions {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: .75rem;
   margin-bottom: 3rem;
}
.hero-actions .button {
   width: 100%;
}
.stats-grid {
   display: grid;
   gap: 1.5rem;
}
.stat-card {
   padding: 1.5rem;
   border: 1px solid var(--border);
   border-radius: var(--radius-card);
   background: #ffffffd9;
   box-shadow: var(--shadow-large);
   backdrop-filter: blur(8px);
   text-align: center;
}
.icon-circle {
   display: grid;
   place-items: center;
   width: 3.5rem;
   height: 3.5rem;
   margin: 0 auto 1rem;
   border-radius: 50%;
   background: var(--cyan-100);
   color: var(--cyan-600);
}
.icon-circle .icon {
   width: 1.75rem;
   height: 1.75rem;
}
.stat-value {
   margin-bottom: .25rem;
   font-size: 1.5rem;
   line-height: 2rem;
   font-weight: 900;
}
.stat-card > p:last-child {
   color: var(--text-secondary);
}
.section {
   padding-block: 5rem;
}
.section-heading {
   margin-bottom: 3rem;
   text-align: center;
}
.section-heading h2 {
   margin-bottom: 1rem;
   font-size: 1.875rem;
   line-height: 2.25rem;
   font-weight: 700;
}
.section-heading p {
   max-width: 56rem;
   margin-inline: auto;
   color: var(--text-secondary);
}
.section-heading .section-lead {
   font-size: 1.125rem;
   line-height: 1.625;
   color: var(--text-body);
}
.illustration {
   width: 100%;
   max-width: 28rem;
   margin-inline: auto;
   overflow: hidden;
   border: 1px solid var(--cyan-100);
   border-radius: var(--radius-small);
   background: white;
   box-shadow: var(--shadow-medium);
}
.illustration img {
   width: 100%;
   height: 14rem;
   object-fit: cover;
}
.benefits-section, .faq-section, .final-section {
   background: var(--surface-alt);
}
.benefits-grid {
   display: grid;
   gap: 2rem;
   margin-bottom: 3rem;
}
.benefit-card {
   padding: 1.75rem;
   border: 1px solid var(--border);
   border-radius: var(--radius-card);
   background: white;
   box-shadow: var(--shadow-large);
}
.benefit-card .icon-circle {
   width: 3rem;
   height: 3rem;
   margin-left: 0;
}
.benefit-card .icon {
   width: 1.5rem;
   height: 1.5rem;
}
.benefit-card h3 {
   margin-bottom: .75rem;
   font-size: 1.25rem;
   line-height: 1.75rem;
}
.benefit-card p {
   color: var(--text-secondary);
}
.bullet-list {
   padding: 0;
   list-style: none;
   color: var(--text-body);
}
.bullet-list li {
   position: relative;
   padding-left: .85rem;
}
.bullet-list li + li {
   margin-top: .75rem;
}
.bullet-list li::before {
   content: "•";
   position: absolute;
   left: 0;
   color: var(--cyan-600);
}
.audience-section .section-heading {
   margin-bottom: 2.5rem;
}
.audience-list {
   max-width: 56rem;
   margin: 0 auto 3rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
}
.audience-grid {
   display: grid;
   gap: 1.5rem;
}
.audience-pitch {
   border-radius: var(--radius-card);
   background: var(--brand-gradient);
   color: #fff;
   padding: 2rem;
}
.audience-pitch p {
   font-size: 1.25rem;
   line-height: 1.625;
   font-weight: 600;
}
.audience-grid .illustration {
   border-color: var(--border);
}
.faq-section {
   padding-block: 4rem;
}
.faq-section .section-heading {
   margin-bottom: 2.5rem;
}
.faq-section .section-heading p {
   font-size: 1.125rem;
   line-height: 1.75rem;
}
.faq-list {
   display: grid;
   gap: 1rem;
}
.faq-item {
   border: 2px solid var(--border);
   border-radius: var(--radius-small);
   background: white;
   box-shadow: var(--shadow-small);
}
.faq-item h3 {
   text-wrap: wrap;
}
.faq-item button {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1.25rem 1.5rem;
   border-radius: var(--radius-small);
   text-align: left;
}
.faq-item button > span {
   padding-right: 2rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
   font-weight: 600;
}
.faq-item button .icon {
   width: 1.5rem;
   height: 1.5rem;
   color: var(--text-muted);
   transition: transform .25s;
}
.faq-item button[aria-expanded=true] .icon {
   transform: rotate(180deg);
   color: var(--cyan-600);
}
.faq-answer {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows .25s, opacity .25s;
   opacity: 0;
}
.faq-answer.is-open {
   grid-template-rows: 1fr;
   opacity: 1;
}
.faq-answer > div {
   overflow: hidden;
   min-height: 0;
}
.faq-answer p {
   padding: 0 1.5rem 1.25rem;
   color: var(--text-secondary);
   line-height: 1.625;
}
.final-section {
   padding-bottom: 5rem;
}
.final-cta {
   padding: 2rem;
   border-radius: var(--radius-card);
   background: var(--brand-gradient);
   color: #fff;
   text-align: center;
}
.final-cta h2 {
   margin-bottom: .75rem;
   font-size: 1.5rem;
   line-height: 2rem;
}
.final-cta p {
   max-width: 48rem;
   margin: 0 auto 1.5rem;
   color: var(--cyan-100);
}
.final-cta .button {
   padding: 1rem;
}
/* One compact addition, using the original card and colour tokens. */
/* Footer */
.site-footer {
   padding-block: 4rem;
   background: var(--text-primary);
   color: #fff;
}
.footer-grid {
   display: grid;
   gap: 2rem;
}
.brand--footer {
   gap: .75rem;
   margin-bottom: 1.5rem;
}
.brand--footer .brand-mark {
   width: 3rem;
   height: 3rem;
   border-radius: .5rem;
   background: linear-gradient(to bottom right, var(--cyan-100), #93c5fd, #3b82f6);
}
.brand--footer img {
   width: 2rem;
   height: 2rem;
}
.brand--footer strong {
   font-size: 1.25rem;
   line-height: 1.75rem;
}
.brand--footer > span > span {
   color: var(--text-muted);
   font-size: 1rem;
}
.footer-about > p {
   max-width: 28rem;
   margin-bottom: 1.5rem;
   color: #d1d5dc;
}
.footer-actions {
   display: flex;
   flex-wrap: wrap;
   gap: .75rem;
}
.footer-actions .button {
   border-radius: .5rem;
   min-height: 2rem;
   padding: .375rem .75rem;
   font-weight: 500;
}
.button--footer-outline {
   border: 1px solid var(--text-secondary);
   background: transparent;
   color: #d1d5dc;
}
.button--footer-outline:hover {
   background: #1e2939;
   color: white;
}
.site-footer h2 {
   margin-bottom: 1.5rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
   font-weight: 600;
}
.footer-contacts > a, .footer-contacts > p {
   display: flex;
   align-items: center;
   gap: .75rem;
   color: #d1d5dc;
   margin-bottom: 1rem;
}
.footer-contacts > a {
   min-height: 2.75rem;
   padding-block: .25rem;
}
.footer-contacts .icon {
   color: var(--brand-primary);
}
.footer-services ul {
   padding: 0;
   list-style: none;
}
.footer-services li + li {
   margin-top: .75rem;
}
.footer-services a {
   display: inline-flex;
   align-items: center;
   min-height: 2.75rem;
   padding-block: .25rem;
   font-size: .875rem;
   color: #d1d5dc;
}
.site-footer a:hover {
   color: #fff;
}
.footer-bottom {
   margin-top: 3rem;
   border-top: 1px solid #1e2939;
   padding-top: 2rem;
   color: var(--text-muted);
   font-size: .875rem;
   line-height: 1.25rem;
}
/* Enquiry dialog */
.lead-dialog {
   width: min(32rem, calc(100% - 2rem));
   max-height: calc(100dvh - 2rem);
   margin: auto;
   padding: 0;
   border: 1px solid var(--cyan-100);
   border-radius: var(--radius-card);
   color: var(--text-primary);
   background: white;
   box-shadow: 0 24px 80px #0f172a40;
   overflow-y: auto;
}
.lead-dialog::backdrop {
   background: #0f172a80;
   backdrop-filter: blur(3px);
}
.dialog-content {
   position: relative;
   padding: 2rem;
}
.dialog-close {
   position: absolute;
   top: .5rem;
   right: .5rem;
   display: grid;
   place-items: center;
   width: 2.75rem;
   height: 2.75rem;
   font-size: 1.75rem;
   border-radius: 50%;
}
.dialog-close:hover {
   background: var(--cyan-50);
}
.lead-dialog h2 {
   font-size: 1.5rem;
   line-height: 1.25;
   margin: .5rem 1rem .75rem 0;
}
#lead-description {
   color: var(--text-secondary);
   margin-bottom: 1.5rem;
}
.form-field {
   margin-bottom: 1rem;
}
.form-field label {
   display: block;
   margin-bottom: .375rem;
   font-size: .875rem;
   font-weight: 600;
}
.form-field input {
   width: 100%;
   min-height: 2.75rem;
   border: 1px solid #9ca3af;
   border-radius: .5rem;
   background: #fff;
   padding: .625rem .75rem;
   color: var(--text-primary);
}
.field-error {
   margin-top: .25rem;
   font-size: .875rem;
   color: #b91c1c;
}
.field-error:empty {
   display: none;
}
input[aria-invalid=true] {
   border-color: #b91c1c;
   outline-color: #b91c1c;
}
.consent-field > div {
   display: flex;
   align-items: flex-start;
   gap: .625rem;
}
.consent-field input {
   flex-shrink: 0;
   width: 1.25rem;
   height: 1.25rem;
   margin: .125rem 0 0;
   accent-color: var(--cyan-700);
}
.consent-field label {
   font-size: .875rem;
}
.consent-field a {
   color: var(--cyan-700);
   text-decoration: underline;
   text-underline-offset: 2px;
}
.form-note {
   font-size: .875rem;
   color: var(--text-secondary);
   margin-block: 1rem;
}
.form-status {
   color: #b91c1c;
   margin-bottom: 1rem;
}
.form-status:empty {
   display: none;
}
.submit-button {
   width: 100%;
   min-height: 2.75rem;
}
.form-success {
   text-align: center;
   padding: 1rem 0;
}
.success-mark {
   display: grid;
   place-items: center;
   width: 3.5rem;
   height: 3.5rem;
   margin: 0 auto 1rem;
   border-radius: 50%;
   color: var(--cyan-700);
   background: var(--cyan-100);
   font-size: 1.75rem;
}
.form-success p {
   margin: 1rem 0 1.5rem;
   color: var(--text-secondary);
}
/* Breakpoints measured from the original: 640, 768, 1024, 1280, 1536. */
@media (min-width: 640px) {
    .wide-container {
     max-width: 40rem;
  }
    .topbar {
     padding-block: .5rem;
  }
    .topbar-inner {
     padding-inline: 1rem;
     font-size: .875rem;
  }
    .topbar-contacts {
     gap: 1.5rem;
  }
    .topbar .topbar-email {
     display: flex;
  }
    .topbar-actions {
     gap: .5rem;
  }
    .button--topbar {
     padding-inline: 1rem;
     font-size: .875rem;
  }
    .language-link {
     padding-inline: .75rem;
  }
    .desktop-label {
     display: inline;
  }
    .mobile-label {
     display: none;
  }
    .site-nav {
     padding: 1rem;
  }
    .nav-row {
     gap: 1rem;
  }
    .brand {
     gap: .75rem;
  }
    .brand-mark {
     width: 3rem;
     height: 3rem;
  }
    .brand strong {
     font-size: 1.25rem;
  }
    .brand > span > span {
     font-size: .875rem;
  }
    .brand--footer > span > span {
     font-size: 1rem;
  }
    .hero {
     padding-top: 9.5rem;
  }
    h1 {
     font-size: 2.25rem;
  }
    .hero-description {
     font-size: 1.25rem;
  }
    .hero-actions {
     flex-direction: row;
  }
    .hero-actions .button {
     width: auto;
  }
    .hero-actions .button, .final-cta .button {
     height: 2.5rem;
     padding: 1rem 2rem;
  }
    .hero-actions .button:has(svg), .final-cta .button:has(svg) {
     padding-inline: 1rem;
  }
    .stats-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
    .wide-container {
     max-width: 48rem;
  }
    .intro-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
  }
    .benefits-grid {
     grid-template-columns: repeat(3, minmax(0, 1fr));
  }
    .footer-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
    .wide-container {
     max-width: 64rem;
  }
    .desktop-nav {
     display: flex;
  }
    .menu-toggle, .mobile-nav {
     display: none;
  }
    .hero {
     padding-bottom: 7rem;
  }
    h1 {
     font-size: 3rem;
  }
    .stats-grid {
     grid-template-columns: repeat(3, minmax(0, 1fr));
  }
    .section-heading h2 {
     font-size: 2.25rem;
     line-height: 2.5rem;
  }
    .faq-section .section-heading h2 {
     font-size: 1.875rem;
     line-height: 2.25rem;
  }
    .audience-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
  }
    .footer-grid {
     grid-template-columns: repeat(4, minmax(0, 1fr));
  }
    .footer-about {
     grid-column: span 2;
  }
}
@media (min-width: 1280px) {
   .wide-container {
     max-width: 80rem;
  }
   .desktop-nav {
     gap: 1.5rem;
  }
}
@media (min-width: 1536px) {
   .wide-container {
     max-width: 96rem;
  }
}
@media (max-width: 430px) {
   .dialog-content {
     padding: 1.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
     scroll-behavior: auto !important;
     transition-duration: .01ms !important;
     animation-duration: .01ms !important;
     animation-iteration-count: 1 !important;
  }
}