/* Explicit page boundaries preserve the legacy content and support browsers without @scope. */

/* The new hero owns its inner spacing; shared legacy section padding would frame the photo. */
.homepage #main > .hero { padding: 0; }
.homepage #main > .hero::before { content: none; }

.homepage {
  color-scheme: light;
  --ink: #0f1b2d;
  --ink-soft: #152b3e;
  --paper: #ffffff;
  --chalk: #f5f7fa;
  --muted-on-dark: #d4dde7;
  --text-on-light: #263447;
  --brass: #e0ae4e;
  --brass-hover: #f2c766;
  --teal: #3fa796;
  --font-display: 'Bricolage Grotesque', 'Arial', sans-serif;
  --font-body: 'Instrument Sans', 'Arial', sans-serif;
  --gutter: clamp(1.4rem, 4.5vw, 5rem);
}
:where(.homepage) *:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
.homepage { margin: 0; background: var(--ink); color: var(--chalk); font: 1.125rem/1.55 var(--font-body); }
:where(.homepage) img:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { display: block; width: 100%; height: 100%; object-fit: cover; }
:where(.homepage) figure:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)),
:where(.homepage) p:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { margin: 0; }
:where(.homepage) a:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { color: inherit; text-decoration: none; }
:where(.homepage) a:focus-visible:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { outline: 3px solid var(--teal); outline-offset: 6px; border-radius: 3px; }
:where(.homepage) h1:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)),
:where(.homepage) h2:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)),
:where(.homepage) h3:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { font-family: var(--font-display); font-weight: 600; margin: 0; text-wrap: balance; }
:where(.homepage) h1:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)),
:where(.homepage) h2:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { letter-spacing: -.045em; line-height: 1.07; }
:where(.homepage) h1:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { font-size: clamp(2.7rem, 4.65vw, 4.7rem); }
:where(.homepage) h2:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { font-size: clamp(2.1rem, 3.8vw, 3.55rem); }
:where(.homepage) h3:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { font-size: clamp(1.25rem, 1.9vw, 1.65rem); line-height: 1.2; letter-spacing: -.03em; }
:where(.homepage) .skip-link:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { position: absolute; top: 1rem; left: 1rem; z-index: 10; padding: .8rem 1rem; background: var(--paper); color: var(--ink); transform: translateY(-180%); }
:where(.homepage) .skip-link:focus:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { transform: translateY(0); }
:where(.homepage) .site-header:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { background: var(--ink); }
:where(.homepage) .header-inner:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { max-width: 1600px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.15rem var(--gutter); }
:where(.homepage) .brand:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { color: var(--brass); font: 600 2.75rem/1 var(--font-display); letter-spacing: -.07em; }
:where(.homepage) .brand span:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { color: var(--teal); }
:where(.homepage) nav:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { display: flex; align-items: center; justify-content: flex-end; gap: clamp(1.25rem, 3vw, 2.8rem); font-size: .95rem; }
:where(.homepage) nav > a:not(.button):hover:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)),
:where(.homepage) .text-link:hover:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { text-decoration: underline; text-underline-offset: .3em; }
:where(.homepage) .button:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { display: inline-flex; justify-content: center; align-items: center; min-height: 3.4rem; padding: .8rem 2rem; border-radius: 100px; background: var(--brass); color: #201704; font-size: 1rem; font-weight: 600; white-space: nowrap; transition: background .15s ease; }
:where(.homepage) .button:hover:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { background: var(--brass-hover); }
:where(.homepage) .button-small:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { min-height: 2.9rem; padding: .65rem 1.8rem; font-size: .95rem; }
:where(.homepage) .hero:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { max-width: 1600px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; }
:where(.homepage) .hero-copy:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { padding: clamp(2.6rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4.5rem) clamp(3rem, 5vw, 5rem) var(--gutter); }
:where(.homepage) .eyebrow:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { margin-bottom: 1.3rem; font-size: .78rem; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; color: var(--chalk); }
:where(.homepage) h1 span:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { color: var(--brass); }
:where(.homepage) .hero-description:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { max-width: 36rem; margin-top: 1.75rem; color: var(--muted-on-dark); font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
:where(.homepage) .actions:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; }
:where(.homepage) .text-link:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { display: inline-flex; align-items: center; gap: .75rem; font-size: 1rem; min-height: 2.75rem; }
:where(.homepage) .hero-photo:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { min-width: 0; position: relative; min-height: 38rem; }
:where(.homepage) .hero-photo img:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { position: absolute; inset: 0; object-position: 50% 50%; }
:where(.homepage) .section-light:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { background: var(--paper); color: var(--ink); }
:where(.homepage) .section-light h2:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)),
:where(.homepage) .section-light h3:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { color: var(--ink); }
:where(.homepage) .section-light p:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { color: var(--text-on-light); }
:where(.homepage) .section-inner:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { max-width: 1600px; margin: auto; padding: clamp(3rem, 5vw, 5.2rem) var(--gutter); }
:where(.homepage) .why h2:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { max-width: 65rem; }
:where(.homepage) .section-intro:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { margin-top: 1.3rem; font-size: clamp(1.1rem, 1.7vw, 1.4rem); max-width: 66rem; }
:where(.homepage) .benefits:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3.5rem); margin-top: 3rem; }
:where(.homepage) .benefits article:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *))::before { content: ''; display: block; height: 4px; width: 4rem; background: var(--brass); border-radius: 2px; margin-bottom: 1.15rem; }
:where(.homepage) .benefits p:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { margin-top: .7rem; max-width: 25rem; font-size: 1.125rem; }
:where(.homepage) .how:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { background: var(--ink); }
:where(.homepage) .how-grid:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; }
:where(.homepage) .how-copy p:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { color: var(--muted-on-dark); margin-top: 1.65rem; max-width: 33rem; font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
:where(.homepage) .call-card:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { background: var(--ink-soft); border: 1px solid #355065; border-radius: 15px; overflow: hidden; }
:where(.homepage) .call-header:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.5rem; border-bottom: 1px solid #355065; }
:where(.homepage) .call-header > svg:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
:where(.homepage) .call-header > span:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-on-dark); }
:where(.homepage) .call-details:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { padding: 1.2rem 1.5rem 1.4rem; list-style: none; margin: 0; display: grid; gap: .8rem; }
:where(.homepage) .call-details li:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { display: flex; align-items: center; gap: 1rem; font-size: 1rem; }
:where(.homepage) .detail-icon:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { flex: 0 0 2.35rem; height: 2.35rem; display: grid; place-items: center; border-radius: 50%; }
:where(.homepage) .detail-icon svg:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { width: 1.25rem; height: 1.25rem; }
:where(.homepage) .icon-teal:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { background: #286e66; color: #fff; }
:where(.homepage) .icon-gold:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { background: var(--brass); color: var(--ink); }
:where(.homepage) .icon-paper:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { background: #d5e1e9; color: var(--ink); }
:where(.homepage) .closing:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { display: grid; grid-template-columns: 1fr 1fr; background: #fff8eb; }
:where(.homepage) .closing-copy:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { padding: clamp(3rem, 5vw, 5rem) var(--gutter); align-self: center; }
:where(.homepage) .closing-copy p:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { margin: 1.25rem 0 1.75rem; font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
:where(.homepage) .closing-photo:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { position: relative; min-height: 25rem; }
:where(.homepage) .closing-photo img:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { position: absolute; inset: 0; object-position: 50% 55%; }
:where(.homepage) .site-footer:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { max-width: 1600px; margin: auto; padding: 2rem var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
:where(.homepage) .footer-copy:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { text-align: right; color: var(--muted-on-dark); }
:where(.homepage) .footer-copy p:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { font-size: 1rem; }
:where(.homepage) .footer-copy small:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { font-size: .75rem; }
@media (min-width: 1601px) {
:where(.homepage) .closing-copy:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { padding-left: max(var(--gutter), calc((100vw - 1600px) / 2 + var(--gutter))); } }
@media (max-width: 950px) {
:where(.homepage) .hero-copy:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { padding-right: 1.6rem; }
:where(.homepage) .hero-photo:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { min-height: 35rem; }
:where(.homepage) .how-grid:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { gap: 2rem; }
:where(.homepage) .call-header:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)),
:where(.homepage) .call-details:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { padding-left: 1rem; padding-right: 1rem; }
:where(.homepage) .call-details li:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { gap: .65rem; }
:where(.homepage) .closing-copy:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { padding-right: 1.5rem; }
}
@media (max-width: 720px) {
:where(.homepage) .header-inner:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { gap: 1rem; flex-wrap: wrap; }
:where(.homepage) .brand:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { font-size: 2.3rem; }
:where(.homepage) nav:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { gap: 1rem; flex-wrap: wrap; }
:where(.homepage) nav > a:not(.button):not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { font-size: .875rem; }
:where(.homepage) .button-small:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { padding: .65rem 1.2rem; }
:where(.homepage) .hero:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { grid-template-columns: 1fr; }
:where(.homepage) .hero-copy:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { padding: 3rem var(--gutter); }
:where(.homepage) h1:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { max-width: 38rem; font-size: clamp(2.65rem, 7.5vw, 3.8rem); }
:where(.homepage) .hero-description:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { max-width: 34rem; }
:where(.homepage) .hero-photo:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { min-height: 0; aspect-ratio: 5 / 4; }
:where(.homepage) .hero-photo img:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { object-position: 50% 42%; }
:where(.homepage) .benefits:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { grid-template-columns: 1fr; gap: 2rem; margin-top: 2.5rem; }
:where(.homepage) .benefits p:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { max-width: 32rem; }
:where(.homepage) .how-grid:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { grid-template-columns: 1fr; gap: 2rem; }
:where(.homepage) .desktop-break:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { display: none; }
:where(.homepage) .closing:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { grid-template-columns: 1fr; }
:where(.homepage) .closing-photo:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { min-height: 0; aspect-ratio: 3 / 2; }
:where(.homepage) .site-footer:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { align-items: flex-start; }
:where(.homepage) .footer-copy:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { max-width: 20rem; }
}
@media (max-width: 420px) {
:where(.homepage) .header-inner:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { align-items: flex-start; }
:where(.homepage) nav:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { width: 100%; justify-content: space-between; gap: .6rem; }
:where(.homepage) .site-footer:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { flex-direction: column; gap: 1rem; }
:where(.homepage) .footer-copy:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
:where(.homepage) .button:not(:where(.legacy-content, .legacy-content *, .nav, .nav *, .footer, .footer *)) { transition: none; } }
.homepage .demo-context{margin-top:1rem;font-size:1rem;color:#d4dde7;max-width:36rem}.demo-context a{text-decoration:underline}.product-details>summary{padding:2rem;cursor:pointer;color:#0f1b2d;background:#f5f7fa;font-size:1.1rem}.homepage [id]{scroll-margin-top:90px}.homepage .footer{color:#d4dde7}.homepage .footer .legal{color:#b8c4d1}