* { box-sizing:border-box; }
:root { color-scheme:dark; --bg:#09090b; --muted:#a1a1aa; --line:#222226; --accent:#b8f2d8; --brand:#056843; --text-2:#a1a1aa; --text-3:#71717a; --ubh:44px; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--ubh) + 90px); }
body { margin:0; background:var(--bg); color:#f5f5f0; font:16px/1.65 Inter,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
a:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:6px; }
img { display:block; max-width:100%; }
p { margin:0 0 22px; }
h1,h2,h3 { margin:0; line-height:1.02; font-weight:400; }
h1,h2,.purchase-panel h3 { font-family:'Bebas Neue','Arial Narrow',sans-serif; }
em { font-style:normal; color:var(--accent); }
.wrap { width:min(1176px,calc(100% - 64px)); margin:auto; }
.eyebrow { font:500 11px/1.5 'JetBrains Mono',monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.skip-link { position:fixed; left:16px; top:-100px; padding:12px; background:white; color:black; z-index:30; }
.skip-link:focus { top:12px; }
.partner-hero { position:relative; padding:calc(150px + var(--ubh)) 0 64px; text-align:center; }
.brand-pair { display:flex; justify-content:center; align-items:center; gap:20px; margin:20px 0 0; }
.brand-pair>span:first-child { font:10px/1.6 "JetBrains Mono",monospace; letter-spacing:.14em; color:var(--muted); }
/* The SVG is tightly bounded; spacing here supplies the required clearspace. */
.brand-pair img { width:140px; height:auto; margin:16px 0; }
h1 { font-size:clamp(72px,11vw,150px); line-height:.88; letter-spacing:.012em; }
.hero-bottom { margin:12px auto 28px; }
.hero-bottom p { max-width:620px; font-size:16.5px; color:var(--muted); margin:auto; }
.text-link { display:inline-block; font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:6px; }
.text-link span { margin-left:12px; }
.integration-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.integration-card { border:1px solid var(--line); background:#111615; transition:border-color .2s; }
.integration-card:hover { border-color:var(--accent); }
.product-plate { background:#fff; height:275px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.product-plate img { width:100%; height:100%; object-fit:contain; }
.m7-plate img { object-fit:cover; object-position:50% 56%; }
.card-copy { padding:30px; }
.card-copy h2 { font-size:36px; margin:14px 0; }
.card-copy p { color:var(--muted); max-width:430px; }
.photo-credit { margin-top:12px; font-size:11px; color:var(--muted); }
.detail-section { display:grid; grid-template-columns:1fr 1fr; gap:56px; padding:100px 0; }
.section-heading h2 { font-size:clamp(52px,5.7vw,80px); }
.detail-copy { color:var(--muted); }
.detail-copy .lead { color:#f5f5f0; font-size:23px; line-height:1.45; }
.feature-list { list-style:none; padding:0; margin:32px 0; }
.feature-list li { padding:12px 0 12px 23px; border-bottom:1px solid var(--line); position:relative; }
.feature-list li::before { content:'+'; position:absolute; left:0; color:var(--accent); }
.button { display:inline-flex; justify-content:center; align-items:center; gap:22px; background:var(--brand); color:#fff; border-radius:6px; min-height:52px; padding:14px 22px; font-weight:700; font-size:14px; text-align:center; }
.button:hover { background:#08764d; }
.fine-print { font-size:12px; line-height:1.7; color:var(--muted); margin:18px 0; }
.signal-figure { grid-column:1/-1; margin:0; border:1px solid var(--line); background:#101514; }
.signal-figure img { width:100%; height:auto; }
figcaption { color:var(--muted); font-size:12px; padding:0 24px 24px; text-align:center; }
.monitor-section { background:#0e1512; border-top:1px solid #254333; border-bottom:1px solid #254333; }
.purchase-panel { grid-column:1/-1; border-top:3px solid var(--brand); background:#101713; padding:40px; display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.purchase-panel h3 { font-size:46px; margin:18px 0; }
.purchase-panel p:not(.eyebrow):not(.price) { color:var(--muted); }
.price { font-size:36px; line-height:1.3; margin-bottom:24px; }
.price span { display:block; margin-top:8px; font-size:12px; color:var(--muted); }
.purchase-action .button { width:100%; }
.checkout-alternative { color:var(--muted); font-size:12px; }
.setup { grid-column:1/-1; }
.setup h3 { font-size:24px; }
.setup ol { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; padding:0; margin:32px 0 0; list-style-position:inside; }
.setup li::marker { color:var(--accent); }
.setup p { font-size:14px; color:var(--muted); margin-top:12px; }
.setup a,.faq-section details a { text-decoration:underline; text-underline-offset:3px; }
.faq-section { padding:96px 0; max-width:900px; }
.faq-section h2 { font-size:56px; margin-bottom:32px; }
details { border-top:1px solid var(--line); padding:22px 0; }
summary { cursor:pointer; font-weight:600; }
details p { color:var(--muted); margin:18px 0 0; }
@media(max-width:800px) {
  .wrap { width:calc(100% - 36px); }
  .partner-hero { padding-top:calc(120px + var(--ubh)); }
  .brand-pair { gap:18px; flex-wrap:wrap; }
  .brand-pair>span:first-child { font-size:10px; }
  h1 { font-size:clamp(48px,17vw,72px); }

  .hero-bottom p { font-size:16px; }
  .integration-grid,.detail-section,.purchase-panel { grid-template-columns:1fr; }
  .product-plate { height:240px; }
  .card-copy { padding:24px; }
  .detail-section { gap:32px; padding:64px 0; }
  .signal-figure { overflow:auto; }
  .signal-figure img { min-width:650px; }
  .purchase-panel { padding:24px; gap:24px; }
  .setup ol { grid-template-columns:1fr; gap:16px; }
  .faq-section { padding:64px 0; }
  .faq-section h2 { font-size:44px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }

/* Match the existing main-site chrome. */
.mono { font-family:'JetBrains Mono','SF Mono',Menlo,monospace; }
.display { font-family:'Bebas Neue','Arial Narrow',sans-serif; font-weight:400; }
.container { max-width:1240px; margin:auto; padding:0 32px; }
html.update-dismissed { --ubh:0px; }
.nav-links { margin:0; padding:0; }
.skip-link { z-index:200; }
.hero-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }
.button.secondary { background:transparent; border:1px solid #3f3f46; color:#fafafa; }
.button.secondary:hover { border-color:var(--accent); }
.partner-hero::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(#ffffff08 1px,transparent 1px) 0 0/90px 90px,linear-gradient(90deg,#ffffff08 1px,transparent 1px) 0 0/90px 90px; mask-image:linear-gradient(black,transparent 90%); }
    /* ── Update banner ── */
    .update-banner { position:fixed; top:0; left:0; right:0; height:var(--ubh); z-index:120;
      display:flex; align-items:center; justify-content:center; gap:14px; padding:0 18px;
      background:linear-gradient(90deg, rgba(5,104,67,.14), rgba(5,104,67,.05));
      border-bottom:1px solid rgba(5,104,67,.28);
      backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
      font-size:13px; color:var(--text-2); }
    html.update-dismissed .update-banner { display:none; }
    .ub-kicker { font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
    .ub-copy { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .ub-copy strong { color:#fafafa; }
    .ub-link { background:var(--brand); color:#fff; font-weight:700; font-size:11px; letter-spacing:.08em;
      text-transform:uppercase; padding:6px 13px; border-radius:5px; white-space:nowrap; transition:transform .2s, box-shadow .2s; }
    .ub-link:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(5,104,67,.3); }
    .ub-close { width:26px; height:26px; flex-shrink:0; display:grid; place-items:center;
      background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:5px;
      color:var(--text-2); font-size:15px; line-height:1; cursor:pointer; transition:all .2s; }
    .ub-close:hover { color:#fff; border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.1); }

    /* ── Nav ── */
    nav { position:fixed; top:var(--ubh); left:0; right:0; z-index:100;
      background:rgba(9,9,11,.85); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(255,255,255,.06); transition:background .3s, box-shadow .3s; }
    nav.scrolled { background:rgba(9,9,11,.95); box-shadow:0 12px 32px rgba(0,0,0,.4); }
    nav .container { display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; }
    nav img { height:38px; }
    .nav-links { display:flex; gap:26px; align-items:center; font-size:12px; letter-spacing:.08em;
      color:var(--text-2); text-transform:uppercase; list-style:none; }
    .nav-links a { transition:color .2s; position:relative; }
    .nav-links a:not(.nav-cta):hover { color:#fff; }
    .nav-links a:not(.nav-cta)::after {
      content:''; position:absolute; left:0; right:0; bottom:-5px; height:1px;
      background:var(--accent); transform:scaleX(0); transform-origin:left;
      transition:transform .25s cubic-bezier(.16,1,.3,1); }
    .nav-links a:not(.nav-cta):hover::after { transform:scaleX(1); }
    .nav-cta { background:var(--brand); color:#fff !important; font-weight:700; padding:9px 20px; border-radius:6px;
      transition:transform .2s, box-shadow .2s; }
    .nav-cta:hover { transform:translateY(-1px); box-shadow:0 4px 20px rgba(5,104,67,.3); }
    .hamburger { display:none; background:none; border:none; color:#fafafa; cursor:pointer; padding:8px; }

    /* ── Footer ── */
    footer { border-top:1px solid #18181c; padding:44px 0 36px; }
    .foot-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
    .foot-row .links { display:flex; gap:24px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); flex-wrap:wrap; }
    .foot-row .links a:hover { color:#fff; }
    .foot-tc { font-size:12px; color:var(--text-3); letter-spacing:.1em; }
    .foot-tc span { color:var(--accent); }
    .legal { margin-top:28px; padding-top:24px; border-top:1px solid #18181c;
      font-size:11px; color:#52525b; text-align:center; line-height:1.7; }


@media(max-width:768px) {
  :root { --ubh:66px; }
  .update-banner { flex-wrap:wrap; gap:4px 10px; align-content:center; font-size:11.5px; }
  .ub-copy { flex-basis:100%; text-align:center; order:-1; }
  .container { padding-left:18px; padding-right:18px; }
  .brand-pair { gap:18px; }
}