:root {
  --ink: #182731;
  --muted: #5c6a73;
  --line: #d5e0e4;
  --paper: #f5f8f9;
  --brand: #e2714c;
  --brand-dark: #bc573a;
  --navy: #153b4c;
  --max: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; margin: 0; color: var(--ink); font: 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: #15536a; }
figure { margin: 0; }
a:focus-visible { outline: 3px solid #f3ad75; outline-offset: 3px; }
.container { width: min(calc(100% - 40px), var(--max)); margin: auto; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; padding: .7rem; background: #fff; }

.site-header { position: sticky; top: 0; z-index: 5; border-bottom: 1px solid #dce4e5; background: rgba(251, 250, 248, .96); box-shadow: 0 2px 10px rgba(21, 59, 76, .035); backdrop-filter: blur(10px); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
.brand { color: var(--ink); font-size: 1.08rem; font-weight: 800; letter-spacing: -.035em; text-decoration: none; }
.brand-mark { display: inline-block; width: .68em; height: .68em; margin-right: .3em; border-radius: 50% 50% 50% 12%; background: var(--brand); }
.nav-links { display: flex; align-items: center; gap: 1rem; }
.nav-links a { color: var(--ink); font-size: .9rem; font-weight: 650; text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--brand-dark); }

.button { display: inline-flex; align-items: center; justify-content: center; padding: .68rem 1rem; border: 1px solid var(--brand); border-radius: .35rem; background: var(--brand); color: #fff !important; font-size: .9rem; font-weight: 750; text-decoration: none; box-shadow: 0 2px 0 rgba(21, 59, 76, .14); transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease; }
.button:hover { border-color: var(--brand-dark); background: var(--brand-dark); transform: translateY(-1px); }
.button.secondary { border-color: #63808c; background: transparent; color: var(--navy) !important; box-shadow: none; }
.button[aria-disabled="true"] { cursor: not-allowed; opacity: .6; }

.eyebrow { margin: 0 0 .5rem; color: var(--brand-dark); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3 { margin: 0 0 .7rem; letter-spacing: -.035em; line-height: 1.15; }
h1 { max-width: 19ch; font-size: clamp(2.15rem, 3.6vw, 3rem); }
h2 { font-size: clamp(1.65rem, 2.5vw, 2.2rem); }
h3 { font-size: 1rem; letter-spacing: -.012em; }
.lede { max-width: 58ch; color: var(--muted); font-size: .96rem; line-height: 1.45; }
.fine { color: var(--muted); font-size: .84rem; }

.hero { padding: 3.3rem 0 2.8rem; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, #fff, #fbfcfc); }
.hero-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 2.8rem; align-items: center; }
.hero-grid > *, .two-col > *, .product-grid > * { min-width: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.15rem 0 .55rem; }
.catalog-product { padding-block: 2.8rem; border-bottom: 1px solid var(--line); background: #f7f9f9; }
.catalog-product .hero-art { display: grid; overflow: hidden; order: -1; }
.product-gallery { grid-template-rows: minmax(0, 1fr) auto; }
.gallery-stage { display: grid; width: 100%; padding: 0; overflow: hidden; place-items: center; border: 0; border-radius: .35rem; background: transparent; cursor: zoom-in; }
.gallery-stage:focus-visible { outline: 3px solid #f3ad75; outline-offset: 3px; }
.product-render { display: block; width: 100%; height: auto; border: 0; border-radius: .35rem; }
.product-gallery.is-ready .product-render[hidden] { display: none; }
.gallery-controls { padding: .7rem .15rem .05rem; }
.gallery-dot { border: 0; cursor: pointer; }
.gallery-thumbnails { display: flex; justify-content: center; gap: .45rem; }
.gallery-dot { width: 4rem; height: 2.8rem; padding: 0; overflow: hidden; border: 1px solid #d4dfe1; border-radius: .2rem; background: #fff; opacity: .68; }
.gallery-dot:hover { border-color: #829da5; opacity: 1; }
.gallery-dot[aria-pressed="true"] { border: 2px solid var(--brand-dark); opacity: 1; }
.gallery-thumbnail { display: block; width: 100%; height: 100%; object-fit: contain; }
.image-dialog { width: min(92vw, 1200px); max-width: none; max-height: 90vh; padding: .5rem; border: 1px solid #b9cbcf; border-radius: .55rem; background: #fff; box-shadow: 0 20px 80px rgba(0, 0, 0, .3); }
.image-dialog::backdrop { background: rgba(13, 31, 40, .7); }
.image-dialog img { display: block; width: 100%; max-height: calc(90vh - 1rem); border-radius: .25rem; object-fit: contain; }
.dialog-close { position: absolute; top: .85rem; right: .85rem; display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border: 1px solid #b9cbcf; border-radius: 50%; background: #fff; color: var(--navy); cursor: pointer; font-size: 1.35rem; line-height: 1; }
.product-type { margin: .1rem 0 .55rem; color: #28434e; font-size: 1.12rem; font-weight: 720; letter-spacing: -.01em; }
.key-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1.2rem; max-width: none; margin: 1rem 0; padding-left: 1.1rem; color: #40535b; font-size: .88rem; line-height: 1.42; }
.key-specs li::marker { color: var(--brand-dark); }
code { padding: .08rem .25rem; border-radius: .2rem; background: #edf3f3; color: var(--navy); font: 700 .8rem ui-monospace, monospace; }
.price { display: inline-block; margin: .1rem .9rem .1rem 0; font-weight: 700; }
.price strong { font-size: 1.2rem; }
.availability { margin: .65rem 0 0; color: #44545d; font-size: .86rem; }
.purchase-note { max-width: 620px; margin-top: .65rem; padding: .65rem .8rem; border-left: 3px solid var(--brand-dark); background: #fff8f5; color: #44545d; font-size: .86rem; }

.product-line { padding: 2.5rem 0; border-bottom: 1px solid var(--line); background: var(--paper); }
.product-line h2 { margin-bottom: 1.1rem; font-size: clamp(1.4rem, 2vw, 1.75rem); }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.product-card { padding: 1.1rem 1.2rem; border: 1px solid #d5e0e2; border-radius: .4rem; background: #fff; }
.product-card-current { border-top: 3px solid var(--brand-dark); }
.product-card h3 { margin-bottom: .3rem; font-size: 1.12rem; }
.product-card p:not(.product-status) { max-width: 46ch; margin: 0 0 .7rem; color: var(--muted); font-size: .9rem; }
.product-card a { font-size: .88rem; font-weight: 700; }
.product-status { margin: 0 0 .35rem; color: var(--brand-dark); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.section { padding-block: 3rem; }
.section.tint { border-block: 1px solid var(--line); background: #f7f9f9; }
.overview-section, .documentation-section { padding-block: 1.9rem; }
.overview-section { border-bottom: 1px solid var(--line); }
.section h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 680; letter-spacing: -.022em; }
.section-head { max-width: 700px; margin-bottom: 1.1rem; }
.section-head h2 { font-size: clamp(1.4rem, 2.15vw, 1.75rem); }
#specifications .section-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.two-col { display: grid; grid-template-columns: minmax(210px, .76fr) minmax(0, 1.24fr); gap: 3.5rem; }

.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: .45rem; background: #fff; box-shadow: 0 6px 18px rgba(21, 59, 76, .04); }
table { width: 100%; min-width: 590px; border-collapse: collapse; }
th, td { padding: .72rem .88rem; border-bottom: 1px solid var(--line); text-align: left; }
th { width: 39%; background: #f9fbfb; }
tr:last-child > * { border-bottom: 0; }
.callout { margin-top: 1.1rem; padding: .9rem 1rem; border-left: 4px solid var(--brand); background: #fff8f5; }

.multiunit-photo { margin: 1rem 0; overflow: hidden; border: 1px solid #d8e2e4; border-radius: .4rem; background: #fff; }
.multiunit-photo img { display: block; width: 100%; height: auto; }
.multiunit-photo figcaption { padding: .5rem .65rem; border-top: 1px solid #e3eaeb; color: var(--muted); font-size: .78rem; }
.integration-note { margin: 0 0 2rem; }
.integration-note .eyebrow { margin-bottom: .35rem; }
.integration-note-title { margin: 0 0 .35rem; color: var(--ink); font-size: .98rem; }
.integration-note p:last-child { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }

.page-hero { padding: 3rem 0 2.2rem; border-bottom: 1px solid var(--line); background: var(--paper); }
.doc-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 0; color: #28434e; font-size: .86rem; }
.doc-meta-label { color: var(--muted); font-weight: 650; }
.prose { max-width: 800px; }
.prose > section { position: relative; z-index: 0; padding: 1.15rem 0; isolation: isolate; }
.prose > section::before { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; content: ""; transform: translateX(-50%); border-bottom: 1px solid var(--line); background: #fff; }
.prose > section:first-child::before { border-top: 1px solid var(--line); }
.prose > section:nth-child(even)::before { background: #f7f9f9; }
.prose h2 { font-size: 1.4rem; }
.prose h3 { margin-top: 1.1rem; font-size: 1.2rem; }
.docs-example { position: relative; z-index: 0; margin-top: 1.8rem; margin-bottom: -1.15rem; padding: 1.2rem 0 1.3rem; isolation: isolate; }
.docs-example::before { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; content: ""; transform: translateX(-50%); border-top: 1px solid var(--line); background: #fff; }
.docs-example > h3 { margin-top: 0; }
.docs-example h4 { margin: 1.5rem 0 .65rem; font-size: 1.15rem; line-height: 1.2; }
.docs-example h5 { margin: 1.1rem 0 .45rem; font-size: 1.05rem; line-height: 1.2; }
.docs-example h6 { margin: 1rem 0 .4rem; font-size: 1rem; line-height: 1.2; letter-spacing: 0; }
.prose .platform-heading { margin: 1.1rem 0 .7rem; font-size: 1.2rem; line-height: 1.2; letter-spacing: -.012em; }
.docs-example > .platform-heading { margin-top: 0; }
.code { display: block; max-width: 100%; overflow-x: auto; margin: 1rem 0; padding: .9rem; border-radius: .3rem; background: #183946; color: #f2f7f7; font: 14px/1.5 ui-monospace, monospace; white-space: pre; }
.code code { padding: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; }
.code-comment { color: #a9c2c9; }
.code-value { color: #f0ce87; }
.code-output { color: #d7e4e6; }
.notice { padding: .9rem 1rem; border: 1px solid #dec785; border-radius: .3rem; background: #fff8e7; }
.power-notice { display: flex; gap: .52rem; align-items: flex-start; }
.notice-icon { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin-top: .18rem; color: #8a691b; }
.notice-copy { min-width: 0; }
.site-footer { padding: 1.8rem 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.footer-row { display: flex; justify-content: space-between; gap: 1rem; }
.product-brand-disclosure { font-size: .82rem; }

@media (max-width: 760px) {
  .nav { padding: 9px 0; }
  .nav-links { gap: .65rem; }
  .nav-links .button { padding: .45rem .55rem; }
  .hero { padding: 2.5rem 0; }
  .hero-grid, .two-col { grid-template-columns: 1fr; gap: 1.5rem; }
  .product-grid { grid-template-columns: 1fr; }
  .catalog-product { padding-block: 2rem; }
  .section { padding-block: 2.3rem; }
  .overview-section, .documentation-section { padding-block: 1.7rem; }
  #specifications .section-head { display: block; }
  .footer-row { display: block; }
}

@media (max-width: 600px) {
  .nav { flex-wrap: wrap; justify-content: center; min-height: 0; padding: .75rem 0; }
  .nav-links { width: 100%; min-width: 0; justify-content: space-between; }
  .nav-links a { font-size: .84rem; }
  .nav-links .button { padding-inline: .65rem; }
  h1 { font-size: clamp(2rem, 10vw, 2.45rem); }
  .key-specs { grid-template-columns: 1fr; font-size: .87rem; }
}

@media (max-width: 430px) {
  .container { width: min(calc(100% - 28px), var(--max)); }
}