:root {
  --color-ink: #172033;
  --color-ink-soft: #536071;
  --color-brand: #2563b8;
  --color-brand-dark: #17477f;
  --color-brand-soft: #e9f2ff;
  --color-surface: #ffffff;
  --color-canvas: #f6f8fb;
  --color-border: #dce3ec;
  --color-success: #147a52;
  --color-danger: #b42318;
  --font-sans: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Lora, Georgia, serif;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --radius-sm: .625rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(23 32 51 / .06);
  --shadow-md: 0 18px 45px -30px rgb(23 32 51 / .45);
  --container: 90rem;
  --content: 74rem;
  --transition: 180ms ease;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; background: var(--color-canvas); color: var(--color-ink); font-family: var(--font-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--color-brand); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--color-brand-dark); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #f0a83e; outline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, h3 { color: var(--color-ink); font-family: var(--font-display); line-height: 1.15; text-wrap: balance; }
p { text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
.page { width: min(100%, var(--container)); min-height: 100vh; margin-inline: auto; overflow: clip; background: var(--color-canvas); }
.section { padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(4rem, 8vw, 6.25rem); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.site-main { min-height: 50vh; }
.breadcrumb { padding: 1.25rem clamp(1.25rem, 4vw, 3rem) 0; font-size: .875rem; color: var(--color-ink-soft); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.breadcrumb li:not(:last-child)::after { margin-left: .4rem; content: "/"; color: #8994a3; }
@media (max-width: 68.75rem) { .hero, .product-main { grid-template-columns: 1fr !important; } .product-main > div[style*="sticky"] { position: static !important; } }
@media (max-width: 47.5rem) { .section, section[style], footer[style] { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } section[style*="margin:0 48px"] { margin-left: 1.25rem !important; margin-right: 1.25rem !important; } .grid { grid-template-columns: 1fr; } }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 1000; transform: translateY(-180%); padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--color-ink); color: #fff; font-weight: 700; }
.skip-link:focus { transform: translateY(0); color: #fff; }
.site-header { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-5); padding: 1rem clamp(1.25rem, 4vw, 3rem); border-bottom: 1px solid var(--color-border); background: rgb(246 248 251 / .94); backdrop-filter: blur(12px); }
.site-logo img { width: auto; height: 2.25rem; }
.site-nav { justify-self: center; }
.site-nav__list { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.6rem); margin: 0; padding: 0; list-style: none; }
.site-nav a { color: var(--color-ink); font-size: .925rem; font-weight: 600; text-decoration: none; }
.site-nav a:hover { color: var(--color-brand); }
.site-header__actions { display: flex; align-items: center; gap: .75rem; }
.nav-toggle { display: none; min-width: 2.75rem; min-height: 2.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); }
.nav-toggle__icon, .nav-toggle__icon::before, .nav-toggle__icon::after { display: block; width: 1.25rem; height: 2px; margin: auto; background: currentColor; content: ""; transition: transform var(--transition); }
.nav-toggle__icon::before { transform: translateY(-.38rem); }
.nav-toggle__icon::after { transform: translateY(.28rem); }
.btn { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; padding: .75rem 1.35rem; border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--color-brand); color: #fff !important; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; transition: background var(--transition), transform var(--transition); }
.btn:hover { background: var(--color-brand-dark); transform: translateY(-1px); }
.btn-dark { background: var(--color-ink); }
.btn-secondary { border-color: var(--color-border); background: var(--color-surface); color: var(--color-ink) !important; }
.card { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.product-card { position: relative; display: flex; min-width: 0; flex-direction: column; color: inherit; text-decoration: none; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.product-card:hover { border-color: #aebfd4; box-shadow: var(--shadow-md); transform: translateY(-3px); }
.product-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #e5edf7; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.product-card:hover .product-card__media img { transform: scale(1.025); }
.product-card__body { display: flex; flex: 1; flex-direction: column; gap: .4rem; padding: 1.125rem; }
.product-card__category { color: var(--color-brand); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.product-card__title { margin: 0; font-size: 1.05rem; }
.product-card__description { flex: 1; margin: 0; color: var(--color-ink-soft); font-size: .875rem; }
.product-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .4rem; }
.product-card__price { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.product-card__link { color: var(--color-brand); font-size: .8rem; font-weight: 700; }
.badge { display: inline-flex; width: max-content; align-items: center; padding: .3rem .65rem; border-radius: var(--radius-pill); background: var(--color-ink); color: #fff; font-size: .7rem; font-weight: 700; }
.product-card .badge { position: absolute; top: .75rem; left: .75rem; z-index: 1; }
.eyebrow { margin-bottom: .5rem; color: var(--color-brand); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.muted { color: var(--color-ink-soft); }
.faq-toggle { color: var(--color-ink); }
.form-field { display: grid; gap: .4rem; }
.form-field label { font-size: .875rem; font-weight: 700; }
.form-control { width: 100%; min-height: 3rem; padding: .75rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); }
.modal { width: min(92vw, 42rem); border: 0; border-radius: var(--radius-lg); padding: 0; box-shadow: 0 24px 80px rgb(23 32 51 / .3); }
.modal::backdrop { background: rgb(23 32 51 / .65); }
@media (max-width: 62rem) { .site-header { grid-template-columns: auto auto 1fr; } .nav-toggle { display: inline-grid; place-items: center; } .site-nav { position: absolute; top: 100%; right: 1.25rem; left: 1.25rem; display: none; padding: 1rem; border: 1px solid var(--color-border); border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-md); } .site-nav[data-open="true"] { display: block; } .site-nav__list { align-items: stretch; flex-direction: column; gap: 0; } .site-nav a { display: block; padding: .75rem; } .site-header__actions { justify-self: end; } }
@media (max-width: 36rem) { .site-header { gap: .65rem; } .site-logo img { height: 1.9rem; } .site-header__actions .btn { display: none; } }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.flow > * + * { margin-top: var(--flow-space, 1rem); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.text-center { text-align: center; }
.filter-card[hidden], .category-group[hidden], .faq-answer[hidden] { display: none; }
.article-card__body{display:flex;min-height:100%;flex-direction:column;padding:1.5rem}.article-card h3{margin:.25rem 0 .75rem;font-size:1.35rem}.article-card h3 a{color:inherit;text-decoration:none}.article-card__meta{display:flex;flex-wrap:wrap;gap:1rem;color:var(--color-ink-soft);font-size:.8rem}.article-card__link{margin-top:auto;padding-top:1rem;font-weight:700}.content-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}.article{max-width:52rem;margin:0 auto;padding:clamp(3rem,7vw,6rem) 1.25rem}.article__header{text-align:center}.article__header h1{margin:.5rem 0 1rem;font-size:clamp(2.3rem,6vw,4.25rem)}.article__dek{color:var(--color-ink-soft);font-size:1.15rem}.article__header .article-card__meta{justify-content:center}.article__body{max-width:46rem;margin:3rem auto 0;font-family:var(--font-sans);font-size:1.075rem}.article__body section{margin-top:2.5rem}.article__body h2{font-size:1.75rem}.article-cta{margin-top:3rem;padding:2rem;border-radius:var(--radius-lg);background:var(--color-brand-soft)}.author-box{display:grid;max-width:52rem;grid-template-columns:auto 1fr;gap:1.25rem;margin:auto;padding:1.5rem}.author-box__avatar{display:grid;width:4rem;height:4rem;place-items:center;border-radius:50%;background:var(--color-ink);color:#fff;font-weight:700}.author-box h2{margin:0}.author-box p{margin-bottom:0}
.page-hero{padding:clamp(3.5rem,8vw,6rem) clamp(1.25rem,4vw,3rem);text-align:center}.page-hero>*{max-width:48rem;margin-inline:auto}.page-hero h1{margin:0 0 1rem;font-size:clamp(2.4rem,6vw,4.5rem)}.section-heading{max-width:44rem;margin:0 auto 2.5rem;text-align:center}.section-heading h2{margin:0;font-size:clamp(1.8rem,4vw,2.7rem)}.category-card{display:grid;grid-template-rows:13rem 1fr;color:inherit;text-decoration:none}.category-card__media{background-position:center;background-size:cover}.category-card__body,.bundle-card,.resource-card,.feature-item{padding:1.5rem}.category-card h3,.bundle-card h3,.resource-card h3{margin:0 0 .6rem;font-size:1.4rem}.tag-list{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0;padding:0;list-style:none}.tag-list li{padding:.3rem .65rem;border-radius:var(--radius-pill);background:var(--color-brand-soft);color:var(--color-brand-dark);font-size:.75rem;font-weight:600}.bundle-card,.resource-card{display:flex;flex-direction:column;gap:1rem}.bundle-card .badge{position:static}.bundle-card__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:1rem;border-top:1px solid var(--color-border)}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem}.cta-panel{margin:0 clamp(1.25rem,4vw,3rem) clamp(4rem,8vw,6rem);padding:clamp(2rem,5vw,4rem);border-radius:var(--radius-lg);background:var(--color-ink);color:#fff;text-align:center}.cta-panel h2{color:#fff}.newsletter-form{display:flex;max-width:38rem;gap:.75rem;margin:1.5rem auto 0}.newsletter-form .form-control{flex:1}.product-details{max-width:70rem;margin-inline:auto}.detail-section{padding:2rem 0;border-top:1px solid var(--color-border)}.product-card__actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.75rem}.product-card__title a{color:inherit;text-decoration:none}
@media (max-width: 47.5rem) { .hero h1 { font-size: clamp(2rem, 10vw, 3.4rem) !important; } .hero > div[style*="height:500px"] { height: 18rem !important; } .product-main { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .product-main > div > div[style*="height:460px"] { height: 18rem !important; } section[style*="position:sticky;top:79px"] { position: static !important; } footer[style] { grid-template-columns: 1fr !important; gap: 2rem !important; } }