:root{--color-accent-100:#c9f7eb;--color-accent-200:#93edda;--color-accent-300:#5cdcc6;--color-accent-400:#2cc2ae;--color-accent-50:#effcf8;--color-accent-500:#14a795;--color-accent-600:#0b857a;--color-accent-700:#0c6a64;--color-accent-800:#0e5451;--color-accent-900:#104643;--color-accent-950:#032726;--color-neutral-100:#eeeef0;--color-neutral-200:#d9dade;--color-neutral-300:#bcbec6;--color-neutral-400:#979aa6;--color-neutral-50:#f7f7f8;--color-neutral-500:#7b7f8d;--color-neutral-600:#62666f;--color-neutral-700:#50535c;--color-neutral-800:#45474e;--color-neutral-900:#2c2d33;--color-neutral-950:#1a1b1f;--color-neutral-ink:#1a1b1f;--color-neutral-white:#ffffff;--color-primary-100:#dce7fe;--color-primary-200:#c0d4fd;--color-primary-300:#94b8fb;--color-primary-400:#6193f7;--color-primary-50:#eef4ff;--color-primary-500:#3b6ff2;--color-primary-600:#2551e7;--color-primary-700:#1d3fd4;--color-primary-800:#1e36ab;--color-primary-900:#1e3287;--color-primary-950:#172154;--font-heading:'Avenir Next', system-ui, -apple-system, sans-serif;--font-sans:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;--space-2xl:128px;--space-lg:32px;--space-md:16px;--space-sm:8px;--space-xl:64px;--space-xs:4px;--radius-lg:16px;--radius-md:8px;--radius-pill:999px;--radius-sm:4px;--container-max:1160px;--section-pad:60px;--section-pad-dense:40px;--section-pad-phone:40px;--section-pad-roomy:96px;}
 *{ box-sizing: border-box;} body{ margin: 0; font-family: var(--font-sans); color: var(--color-neutral-900); background: var(--color-neutral-white); line-height: 1.6; overflow-x: hidden; overflow-x: clip;} img{ max-width: 100%; height: auto;} a{ color: var(--color-primary-700);} a:hover{ color: var(--color-primary-800);} .muted{ color: var(--color-neutral-600);} .site-main{ min-height: 60vh;} .section{ padding-top: var(--section-pad, 60px); padding-bottom: var(--section-pad, 60px);} .section--bg-subtle{ background: var(--color-neutral-50);} .section--bg-primary{ background: var(--color-primary-50);} .section--bg-strong{ background: var(--color-primary-700); color: #ffffff;} .section--bg-strong a{ color: var(--color-primary-100);} .section--pad-sm{ padding-top: var(--section-pad-dense, 40px); padding-bottom: var(--section-pad-dense, 40px);} .section--pad-md{ padding-top: var(--section-pad, 60px); padding-bottom: var(--section-pad, 60px);} .section--pad-lg{ padding-top: var(--section-pad-roomy, 96px); padding-bottom: var(--section-pad-roomy, 96px);} @media (max-width: 640px){ .section, .section--pad-md, .section--pad-sm{ padding-top: var(--section-pad-phone, 40px); padding-bottom: var(--section-pad-phone, 40px);} .section--pad-lg{ padding-top: var(--section-pad, 60px); padding-bottom: var(--section-pad, 60px);}} .container{ width: 100%; max-width: var(--container-max, 1160px); margin: 0 auto; padding-left: var(--space-lg); padding-right: var(--space-lg);} .container--narrow{ max-width: 640px;} .container--wide{ max-width: 1320px;} .container--full{ max-width: none;} @media (max-width: 640px){ .container{ padding-left: var(--space-md); padding-right: var(--space-md);}} :where(.grid){ gap: var(--space-md);} :where(.stack){ gap: var(--space-md);} .grid{ display: grid;} .cols-1{ grid-template-columns: 1fr;} .cols-2{ grid-template-columns: repeat(2, 1fr);} .cols-3{ grid-template-columns: repeat(3, 1fr);} .cols-4{ grid-template-columns: repeat(4, 1fr);} .cols-5{ grid-template-columns: repeat(5, 1fr);} .cols-6{ grid-template-columns: repeat(6, 1fr);} .gap-none{ gap: 0;} .gap-sm{ gap: var(--space-sm);} .gap-md{ gap: var(--space-md);} .gap-lg{ gap: var(--space-lg);} .gap-xl{ gap: var(--space-xl);} .stack{ display: flex; flex-direction: column;} .align-start{ align-items: flex-start;} .align-center{ align-items: center;} .align-end{ align-items: flex-end;} .align-stretch{ align-items: stretch;} .heading{ font-family: var(--font-heading); line-height: 1.2; margin: 0 0 var(--space-md); font-weight: 700;} .heading--h1{ font-size: 2.6rem;} .heading--h2{ font-size: 2rem;} .heading--h3{ font-size: 1.5rem;} .heading--h4{ font-size: 1.2rem;} .heading--h5{ font-size: 1rem;} .heading--h6{ font-size: .85rem; text-transform: uppercase; letter-spacing: .04em;} .align-left{ text-align: left;} .align-center{ text-align: center;} .align-right{ text-align: right;} .rich-text p{ margin: 0 0 var(--space-md);} .rich-text h3{ font-size: 1.4rem; margin: var(--space-lg) 0 var(--space-sm);} .rich-text h4{ font-size: 1.1rem; margin: var(--space-md) 0 var(--space-sm);} .rich-text blockquote{ margin: var(--space-md) 0; padding: 0 0 0 var(--space-md); border-left: 3px solid var(--color-primary-300); color: var(--color-neutral-700);} .rich-text code{ font-family: ui-monospace, monospace; background: var(--color-neutral-100); padding: 2px 6px; border-radius: var(--radius-sm);} .rich-text pre{ background: var(--color-neutral-100); padding: var(--space-md); border-radius: var(--radius-md); overflow-x: auto;} .btn{ display: inline-block; padding: 10px 22px; border-radius: var(--radius-pill); font-weight: 600; text-decoration: none; border: 2px solid transparent;} .btn--primary{ background: var(--color-primary-600); color: #ffffff;} .btn--primary:hover{ background: var(--color-primary-700); color: #ffffff;} .btn--secondary{ border-color: var(--color-primary-600); color: var(--color-primary-700);} .btn--secondary:hover{ background: var(--color-primary-50);} .btn--ghost{ color: var(--color-primary-700);} .btn--ghost:hover{ background: var(--color-primary-50);} .btn-row{ margin: 0;} .card{ display: block; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-neutral-white); text-decoration: none; color: inherit; height: 100%;} .card--link:hover{ border-color: var(--color-primary-400); box-shadow: 0 4px 16px rgba(23, 33, 84, .08);} .card img{ display: block; width: 100%;} .card-body{ padding: var(--space-md);} .card-title{ font-family: var(--font-heading); margin: 0 0 var(--space-sm); font-size: 1.15rem;} .card-footer{ color: var(--color-primary-700); font-weight: 600; margin: var(--space-sm) 0 0;} .hero{ position: relative; display: flex; align-items: center; background: var(--color-primary-900) center / cover no-repeat; color: #ffffff;} .hero::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(23, 33, 84, .92), rgba(23, 33, 84, .55));} .hero--sm .hero-inner{ padding-top: var(--section-pad-dense, 40px); padding-bottom: var(--section-pad-dense, 40px);} .hero--md .hero-inner{ padding-top: 80px; padding-bottom: 80px;} .hero--lg .hero-inner{ padding-top: var(--section-pad-roomy, 96px); padding-bottom: var(--section-pad-roomy, 96px);} .hero--screen{ min-height: 100vh;} .container .hero{ width: 100vw; margin-left: calc(50% - 50vw);} .hero-inner{ position: relative; width: 100%; max-width: var(--container-max, 1160px); margin: 0 auto; padding: var(--section-pad, 60px) var(--space-lg);} .hero--align-center .hero-inner{ text-align: center;} .hero--align-center .hero-inner .stack{ align-items: center;} .hero--align-right .hero-inner{ text-align: right;} .hero--align-right .hero-inner .stack{ align-items: flex-end;} .hero-title{ font-family: var(--font-heading); font-size: 3rem; line-height: 1.1; margin: 0 0 var(--space-md);} .hero-subtitle{ font-size: 1.2rem; max-width: 42rem; margin: 0 0 var(--space-md); color: var(--color-primary-100);} .image-frame{ margin: 0;} .image-frame img{ border-radius: var(--radius-md); display: block;} .image-caption{ font-size: .9rem; color: var(--color-neutral-600); margin-top: var(--space-sm);} .video-frame{ margin: 0;} .video-frame iframe, .video-frame video{ display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-md); background: var(--color-neutral-950);} .video-caption{ font-size: .9rem; color: var(--color-neutral-600); margin-top: var(--space-sm);} .divider{ border: 0; border-top: 1px solid var(--color-neutral-200); margin: var(--space-lg) 0;} .spacer{ width: 100%;} .spacer--sm{ height: var(--space-sm);} .spacer--md{ height: var(--space-md);} .spacer--lg{ height: var(--space-lg);} .spacer--xl{ height: var(--space-xl);} .site-header{ background: var(--color-neutral-white); border-bottom: 1px solid var(--color-neutral-200);} .site-header-inner{ display: flex; align-items: center; gap: var(--space-lg); padding-top: var(--space-md); padding-bottom: var(--space-md); flex-wrap: wrap;} .site-brand{ font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; text-decoration: none; color: var(--color-neutral-ink);} .site-nav ul{ display: flex; gap: var(--space-md); list-style: none; margin: 0; padding: 0;} .site-nav a{ text-decoration: none; color: var(--color-neutral-700);} .site-nav a:hover{ color: var(--color-primary-700);} .site-footer{ background: var(--color-neutral-950); color: var(--color-neutral-300); margin-top: var(--space-xl);} .site-footer-inner{ display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding-top: var(--space-lg); padding-bottom: var(--space-lg); flex-wrap: wrap;} .site-footer-nav ul{ display: flex; gap: var(--space-md); list-style: none; margin: 0; padding: 0; flex-wrap: wrap;} .site-footer-nav a{ color: var(--color-neutral-300); text-decoration: none;} .site-footer-nav a:hover{ color: #ffffff;} @media (min-width: 640px){ .cols-md-1{ grid-template-columns: 1fr;} .cols-md-2{ grid-template-columns: repeat(2, 1fr);} .cols-md-3{ grid-template-columns: repeat(3, 1fr);} .cols-md-4{ grid-template-columns: repeat(4, 1fr);} .cols-md-5{ grid-template-columns: repeat(5, 1fr);} .cols-md-6{ grid-template-columns: repeat(6, 1fr);}} @media (min-width: 1024px){ .cols-lg-1{ grid-template-columns: 1fr;} .cols-lg-2{ grid-template-columns: repeat(2, 1fr);} .cols-lg-3{ grid-template-columns: repeat(3, 1fr);} .cols-lg-4{ grid-template-columns: repeat(4, 1fr);} .cols-lg-5{ grid-template-columns: repeat(5, 1fr);} .cols-lg-6{ grid-template-columns: repeat(6, 1fr);} .hero-title{ font-size: 3.6rem;}} .entry-list-item{ margin-bottom: var(--space-lg);} .entry-title{ margin: 0 0 var(--space-xs); font-size: 1.3rem;} .entry-title a{ text-decoration: none; color: var(--color-neutral-ink);} .entry-title a:hover{ color: var(--color-primary-700);} .entry-meta{ color: var(--color-neutral-600); font-size: .9rem; margin: 0 0 var(--space-sm);} .entry-excerpt{ color: var(--color-neutral-700);} .pagination{ display: flex; gap: var(--space-sm); list-style: none; margin: var(--space-lg) 0 0; padding: 0;} .pagination-item a{ border: 1px solid var(--color-neutral-200); border-radius: var(--radius-sm); padding: 4px 10px; text-decoration: none;} .pagination-current{ border: 1px solid var(--color-primary-600); border-radius: var(--radius-sm); padding: 4px 10px; color: var(--color-primary-700); font-weight: 600;} .menu-nav .menu{ display: flex; gap: var(--space-md); list-style: none; margin: 0; padding: 0; flex-wrap: wrap;} .menu-item a{ text-decoration: none; color: var(--color-neutral-700);} .menu-item a:hover{ color: var(--color-primary-700);} .form-field{ margin-bottom: var(--space-md);} .form-label{ display: block; margin-bottom: var(--space-xs); font-weight: 600;} .form-input, .form-textarea{ width: 100%; padding: 8px 10px; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-sm); font: inherit;} .form-actions{ margin-top: var(--space-md);} .form-honeypot{ position: absolute; left: -9999px;} .search-form{ display: flex; gap: var(--space-sm);} .search-input{ flex: 1; padding: 8px 10px; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-sm); font: inherit;} .search-hit{ margin-bottom: var(--space-md);} .search-hit-title{ margin: 0;} .search-hit-excerpt{ margin: var(--space-xs) 0 0; color: var(--color-neutral-700);} .search-hit mark{ background: var(--color-primary-100, #e8f0fe); color: inherit; padding: 0 2px; border-radius: 2px;} .search-results[hidden]{ display: none;} .thanks{ background: #e8f6ee; border: 1px solid #bfe3cd; padding: var(--space-md); border-radius: var(--radius-md);} .price{ font-weight: 700; color: var(--color-neutral-900);} .login-box{ margin: var(--space-md) 0;} .login-buttons{ display: flex; gap: var(--space-sm); flex-wrap: wrap;} .login-btn{ border: 1px solid var(--color-neutral-300); border-radius: var(--radius-sm); padding: 6px 14px; text-decoration: none; color: var(--color-neutral-800);} .login-btn:hover{ border-color: var(--color-primary-500);} .comments{ margin-top: var(--space-lg);} .comment-item{ border-top: 1px solid var(--color-neutral-200); padding: var(--space-md) 0;} .comment-meta{ color: var(--color-neutral-600); font-size: .9rem; margin: 0 0 var(--space-xs);} .comment-body{ white-space: pre-wrap;} .comment-form{ margin-top: var(--space-md);} .table-wrap{ overflow-x: auto;} .data-table{ width: 100%; border-collapse: collapse;} .data-table th, .data-table td{ text-align: left; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-neutral-200);} .data-table th{ font-weight: 600;} .data-table--striped tbody tr:nth-child(even){ background: var(--color-neutral-50);} .table-caption{ text-align: left; padding: var(--space-sm) 0; color: var(--color-neutral-600);} .section--bg-tint{ background: var(--color-neutral-50);} .section--bg-inverse{ background: var(--color-neutral-900);} .section--bg-inverse .heading, .section--bg-inverse h1, .section--bg-inverse h2, .section--bg-inverse h3, .section--bg-inverse p, .section--bg-inverse li, .section--bg-inverse a{ color: var(--color-neutral-50);} .site-nav li.has-children{ position: relative;} .site-nav li.has-children > .dropdown{ display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--border, #e2e2e6); border-radius: 6px; min-width: 180px; padding: 6px 0; box-shadow: 0 6px 18px rgba(0,0,0,.08); z-index: 20;} .site-nav li.has-children:hover > .dropdown, .site-nav li.has-children:focus-within > .dropdown{ display: block;} .site-nav .dropdown li{ display: block;} .site-nav .dropdown a{ display: block; padding: 8px 14px;} .site-logo{ max-height: 40px; width: auto; display: block;} .accordion{ display: grid; gap: var(--space-sm);} .accordion-panel{ border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md);} .accordion-title{ cursor: pointer; padding: var(--space-md); font-weight: 600; list-style: none;} .accordion-title::-webkit-details-marker{ display: none;} .accordion-title::after{ content: "+"; float: right; color: var(--color-neutral-600);} .accordion-panel[open] .accordion-title::after{ content: "\2212";} .accordion-body{ padding: 0 var(--space-md) var(--space-md);} .slider{ position: relative;} .slider-track{ display: flex; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--radius-md);} .slider--sm .slider-slide{ min-width: 40%;} .slider--md .slider-slide{ min-width: 70%;} .slider--lg .slider-slide{ min-width: 100%;} .slider-slide{ scroll-snap-align: start;} .slider-slide img{ width: 100%; height: auto; display: block; border-radius: var(--radius-md);} .slider-card{ padding: var(--space-md);} .slider-dots{ display: flex; gap: var(--space-sm); margin-top: var(--space-sm);} .slider-dot{ width: 10px; height: 10px; border-radius: 50%; background: var(--color-neutral-300); display: block;} .quote{ border-left: 3px solid var(--color-primary-500, var(--color-neutral-300)); padding: var(--space-md) var(--space-lg); margin: var(--space-md) 0;} .quote-text{ font-size: 1.15em; font-style: italic; margin: 0 0 var(--space-sm);} .quote-avatar{ width: 48px; height: 48px; border-radius: 50%; display: block; margin-bottom: var(--space-sm);} .quote-attribution{ color: var(--color-neutral-600); font-size: 0.9em;} .code-block{ background: var(--color-neutral-900); color: var(--color-neutral-50); border-radius: var(--radius-md); padding: var(--space-md); overflow-x: auto; margin: var(--space-md) 0;} .code-block pre{ margin: 0; font-family: ui-monospace, monospace; font-size: 0.9em;} .code-language{ font-family: ui-monospace, monospace; font-size: 0.75em; text-transform: uppercase; letter-spacing: .08em; color: var(--color-neutral-400); margin-bottom: var(--space-sm);} .tabs{ display: grid; gap: 2px;} .tab-panel{ border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md);} .tab-title{ cursor: pointer; padding: var(--space-md); font-weight: 600; list-style: none;} .tab-title::-webkit-details-marker{ display: none;} .tab-body{ padding: 0 var(--space-md) var(--space-md);} .section--bg-image{ background-size: cover; background-position: center; position: relative;} .section--bg-image::before{ content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45);} .section--bg-image > *{ position: relative;} .section--bg-image, .section--bg-image .heading, .section--bg-image p, .section--bg-image li{ color: #fff;} .site-nav a.active{ color: var(--color-primary-600); font-weight: 600;} :focus-visible{ outline: 3px solid var(--color-primary-600); outline-offset: 2px;} @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;}} .skip-link{ position: absolute; left: -9999px; top: 0; background: #fff; color: var(--color-neutral-900); padding: var(--space-sm) var(--space-md); z-index: 100; border: 1px solid var(--color-neutral-300);} .skip-link:focus{ left: var(--space-sm); top: var(--space-sm);} .form-radio, .form-checkbox{ accent-color: var(--color-primary-600); width: auto;} .form-radio-label{ display: inline-flex; align-items: center; gap: var(--space-sm); margin: 4px 12px 4px 0;} .form-field-invalid input, .form-field-invalid select, .form-field-invalid textarea{ border-color: #c0392b;} .form-error-message, .form-field-invalid .form-error-message{ color: #c0392b; font-size: 0.85em; margin: 4px 0 0;} .icon{ display: inline-block; line-height: 0;} .icon svg{ width: 24px; height: 24px;} .icon--sm svg{ width: 16px; height: 16px;} .icon--lg svg{ width: 40px; height: 40px;} .icon--primary{ color: var(--color-primary-600);} .icon--accent{ color: var(--color-accent-500);} .icon--muted{ color: var(--color-neutral-500);} .card-icon{ color: var(--color-primary-600); margin-bottom: var(--space-sm);} .card-icon svg{ width: 28px; height: 28px;} .btn svg{ width: 1em; height: 1em; vertical-align: -0.15em;} .corners-sharp{ border-radius: 0;} .corners-pill{ border-radius: 999px;} .shadow-md{ box-shadow: 0 6px 18px rgba(0, 0, 0, .12);} .site-nav a.active{ color: var(--color-primary-600); font-weight: 600;}