@layer tokens, base, layout, components, utilities, overrides;

@layer tokens {
  :root {
    --ocx-product-card-min: 290px;
    --ocx-copy: 720px;
    --ocx-section-tight: clamp(52px, 6vw, 82px);
  }
}

@layer base {
  .ocx-product-page,
  .ocx-demo-form,
  .ocx-form,
  .ocx-product-card,
  .ocx-team-card { container-type: inline-size; }

  .ocx-product-page :where(h1,h2,h3,p),
  .ocx-showcase-hero :where(h1,p),
  .ocx-home-hero :where(h1,p),
  .ocx-scroll-hero :where(h1,p) { text-wrap: pretty; }

  .ocx-product-page :where(section[id]),
  .ocx-showcase-hero[id] { scroll-margin-top: calc(var(--ocx-header-h,76px) + 80px); }

  .ocx-content :where(h2,h3,h4) { margin-block: 1.5em .55em; }
  .ocx-content :where(p,ul,ol) + :where(p,ul,ol) { margin-block-start: 1em; }
  .ocx-content :where(ul,ol) { padding-inline-start: 1.25em; }
  .ocx-content a { color: var(--ocx-brand); text-decoration: underline; text-underline-offset: .2em; }
}

@layer layout {
  .ocx-section-soft {
    background:
      radial-gradient(circle at 92% 8%, rgba(var(--ocx-brand-rgb),.10), transparent 30%),
      linear-gradient(180deg,var(--ocx-bg-soft),color-mix(in srgb,var(--ocx-bg-soft) 62%,var(--ocx-bg)));
  }

  .ocx-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-block-start:28px; }
  .ocx-chip-row { display:flex; flex-wrap:wrap; gap:8px; }
  .ocx-span-full { grid-column:1/-1!important; }

  .ocx-product-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ocx-product-card-min)),1fr));
    gap:clamp(18px,2.5vw,30px);
    align-items:stretch;
  }

  .ocx-platform-grid,
  .ocx-team-grid,
  .ocx-feature-grid,
  .ocx-steps-grid,
  .ocx-tier-grid,
  .ocx-stats-grid {
    display:grid;
    grid-template-columns:repeat(var(--ocx-cols,auto-fit),minmax(min(100%,240px),1fr));
    gap:clamp(16px,2vw,24px);
  }

  .ocx-platform-grid { --ocx-cols:auto-fit; }
  .ocx-team-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); }
  .ocx-feature-grid,.ocx-steps-grid,.ocx-tier-grid,.ocx-stats-grid { grid-template-columns:repeat(var(--ocx-cols,3),minmax(0,1fr)); }
}

@layer components {
  /* Home hero */
  .ocx-hero {
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:
      radial-gradient(circle at 78% 16%,rgba(var(--ocx-brand-rgb),.16),transparent 30%),
      linear-gradient(180deg,var(--ocx-bg-soft),var(--ocx-bg));
  }
  .ocx-home-hero { padding-block:clamp(58px,7vw,96px); min-block-size:min(790px,calc(100svh - var(--ocx-header-h,76px))); display:grid; align-items:center; }
  .ocx-home-hero::before {
    content:""; position:absolute; inset:0; z-index:-1; opacity:.38; pointer-events:none;
    background-image:linear-gradient(var(--ocx-line) 1px,transparent 1px),linear-gradient(90deg,var(--ocx-line) 1px,transparent 1px);
    background-size:54px 54px; mask-image:linear-gradient(90deg,transparent,#000 28%,#000 75%,transparent);
  }
  .ocx-hero-grid { display:grid; grid-template-columns:minmax(0,1.06fr) minmax(420px,.94fr); gap:clamp(34px,5vw,70px); align-items:center; }
  .ocx-hero-copy h1 { max-inline-size:820px; font-size:clamp(3rem,5.35vw,5.45rem); line-height:.94; letter-spacing:-.055em; }
  .ocx-hero-copy>p:not(.ocx-kicker) { max-inline-size:680px; margin-block-start:22px; font-size:clamp(1.04rem,1.8vw,1.28rem); }
  .ocx-hero-proof { display:flex; flex-wrap:wrap; gap:8px; margin-block-start:30px; }
  .ocx-hero-proof span,.ocx-chip {
    display:inline-flex; align-items:center; min-block-size:31px; padding:6px 11px; border:1px solid var(--ocx-line-brand); border-radius:999px;
    background:color-mix(in srgb,var(--ocx-bg-elevated) 86%,transparent); color:var(--ocx-brand); font-size:.73rem; line-height:1; font-weight:820; letter-spacing:.02em;
  }
  .ocx-chip.light { background:var(--ocx-bg-soft); }
  .ocx-hero-media { min-inline-size:0; display:grid; place-items:center; }
  .ocx-hero-media>img,.ocx-hero-media>.ocx-video,.ocx-hero-media>.ocx-ecosystem-visual,.ocx-hero-media>.ocx-hero-video-shell { inline-size:100%; }

  .ocx-hero-video-shell {
    --ocx-hero-video-shift:0px;
    --ocx-hero-video-scale:1;
    position:relative;
    isolation:isolate;
    display:grid;
    place-items:center;
    aspect-ratio:4/3;
    overflow:hidden;
    border:1px solid var(--ocx-line-brand);
    border-radius:clamp(28px,4vw,48px);
    background:#fff;
    box-shadow:var(--ocx-shadow-lg),0 28px 80px rgba(var(--ocx-brand-rgb),.13);
    transform:translate3d(0,var(--ocx-hero-video-shift),0) scale(var(--ocx-hero-video-scale));
    transform-origin:center;
    transition:border-color .3s var(--ocx-ease),box-shadow .3s var(--ocx-ease);
    will-change:transform;
    contain:layout paint;
  }
  .ocx-hero-video-shell::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    border-radius:inherit;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
  }
  .ocx-hero-video-shell::after {
    content:"";
    position:absolute;
    inset:auto 12% -14% 12%;
    z-index:-1;
    block-size:32%;
    border-radius:50%;
    background:rgba(var(--ocx-brand-rgb),.18);
    filter:blur(44px);
    opacity:.62;
  }
  .ocx-hero-video {
    position:absolute;
    inset:0;
    z-index:1;
    inline-size:100%;
    block-size:100%;
    object-fit:contain;
    object-position:center;
    background:#fff;
    transform:translateZ(0) scale(1.002);
    backface-visibility:hidden;
  }
  .ocx-hero-video-fallback { position:absolute; inset:12%; z-index:0; display:grid; place-items:center; color:var(--ocx-brand); opacity:.26; }
  .ocx-hero-video-fallback svg { inline-size:100%; block-size:100%; }
  .ocx-hero-video-shell.is-ready .ocx-hero-video-fallback { opacity:0; }
  .ocx-hero-video-shell.is-unavailable .ocx-hero-video { display:none; }
  :root[data-theme="dark"] .ocx-hero-video-shell,:root[data-theme="dark"] .ocx-hero-video { background:#fff; }

  .ocx-ecosystem-visual {
    position:relative; display:grid; place-items:center; aspect-ratio:1.04; min-block-size:430px; border:1px solid var(--ocx-line-brand); border-radius:clamp(28px,5vw,52px);
    background:linear-gradient(145deg,color-mix(in srgb,var(--ocx-bg-elevated) 94%,var(--ocx-brand) 6%),var(--ocx-bg-soft)); box-shadow:var(--ocx-shadow-lg),var(--ocx-glow); overflow:hidden;
    transform:rotateY(-4deg) rotateX(2deg); transform-style:preserve-3d;
  }
  .ocx-ecosystem-visual::before,.ocx-ecosystem-visual::after { content:""; position:absolute; border-radius:50%; border:1px solid var(--ocx-line-brand); }
  .ocx-ecosystem-visual::before { inline-size:70%; aspect-ratio:1; }
  .ocx-ecosystem-visual::after { inline-size:48%; aspect-ratio:1; box-shadow:0 0 70px rgba(var(--ocx-brand-rgb),.16); }
  .ocx-ecosystem-ship { inline-size:64%; position:relative; z-index:2; filter:drop-shadow(0 22px 30px rgba(var(--ocx-brand-rgb),.18)); }
  .ocx-eco-node { position:absolute; z-index:3; padding:8px 12px; border:1px solid var(--ocx-line-brand); border-radius:999px; background:var(--ocx-bg-elevated); box-shadow:var(--ocx-shadow-sm); color:var(--ocx-brand); font-size:.72rem; font-weight:850; }
  .ocx-eco-node.n1{inset:11% auto auto 8%}.ocx-eco-node.n2{inset:14% 7% auto auto}.ocx-eco-node.n3{inset:auto auto 11% 8%}.ocx-eco-node.n4{inset:auto 8% 14% auto}


  /* Full-bleed scroll-controlled homepage film */
  .ocx-scroll-hero {
    --ocx-scroll-progress:0;
    --ocx-scene-progress:0;
    position:relative;
    min-block-size:320svh;
    isolation:isolate;
    background:var(--ocx-bg);
  }
  .ocx-scroll-hero,
  .ocx-scroll-hero-sticky,
  .ocx-scroll-hero-media,
  .ocx-scroll-hero-shade,
  .ocx-scroll-hero-content {
    inline-size:100%;
    max-inline-size:100%;
    min-inline-size:0;
    box-sizing:border-box;
  }
  .ocx-scroll-hero { overflow-x:clip; }
  .ocx-scroll-hero .ocx-container { max-inline-size:100%; }

  .ocx-scroll-hero-sticky {
    position:sticky;
    inset-block-start:var(--ocx-header-h,76px);
    display:grid;
    align-items:center;
    block-size:calc(100svh - var(--ocx-header-h,76px));
    min-block-size:620px;
    overflow:hidden;
    isolation:isolate;
    background:#fff;
  }
  .ocx-scroll-hero-media {
    position:absolute;
    inset:0;
    z-index:-3;
    overflow:hidden;
    clip-path:inset(0);
    contain:layout paint;
    background:#fff;
  }
  .ocx-scroll-hero-video {
    position:absolute;
    inset:0;
    display:block;
    inline-size:100%;
    block-size:100%;
    min-inline-size:0;
    max-inline-size:100%;
    object-fit:cover;
    object-position:center;
    background:#fff;
    transform:translateZ(0) scale(1.006);
    transform-origin:center;
    backface-visibility:hidden;
  }
  .ocx-scroll-hero-shade {
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background:
      linear-gradient(90deg,
        color-mix(in srgb,var(--ocx-bg) 72%,transparent) 0%,
        color-mix(in srgb,var(--ocx-bg) 40%,transparent) 30%,
        color-mix(in srgb,var(--ocx-bg) 12%,transparent) 58%,
        transparent 78%),
      linear-gradient(180deg,color-mix(in srgb,var(--ocx-bg) 12%,transparent),transparent 36%,transparent 72%,color-mix(in srgb,var(--ocx-bg) 30%,transparent));
  }
  .ocx-scroll-hero-content {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    inline-size:100%;
    min-block-size:100%;
    padding-block:clamp(40px,5vw,78px);
  }
  .ocx-scroll-hero .ocx-hero-copy {
    inline-size:min(650px,48vw);
    padding:clamp(22px,3vw,42px);
    border:1px solid color-mix(in srgb,var(--ocx-line-brand) 68%,transparent);
    border-radius:clamp(22px,2.8vw,36px);
    background:color-mix(in srgb,var(--ocx-bg-elevated) 64%,transparent);
    box-shadow:0 24px 72px rgba(15,35,52,.12),inset 0 1px rgba(255,255,255,.72);
    backdrop-filter:blur(16px) saturate(138%);
    -webkit-backdrop-filter:blur(16px) saturate(138%);
  }
  .ocx-hero-story {
    display:grid;
    min-block-size:clamp(300px,31vw,430px);
    align-items:center;
  }
  .ocx-hero-story-panel {
    grid-area:1/1;
    align-self:center;
    opacity:var(--ocx-scene-opacity,0);
    visibility:hidden;
    transform:translate3d(0,var(--ocx-scene-y,28px),0) scale(var(--ocx-scene-scale,.985));
    transition:opacity .2s linear,visibility 0s linear .22s;
    pointer-events:none;
    will-change:opacity,transform;
  }
  .ocx-hero-story-panel.is-visible,
  .ocx-hero-story-panel.is-current {
    visibility:visible;
    transition-delay:0s;
  }
  .ocx-hero-story-panel h1 {
    max-inline-size:630px;
    margin-block:12px 0;
    font-size:clamp(2.55rem,4.8vw,5.25rem);
    line-height:.94;
    letter-spacing:-.055em;
    text-wrap:balance;
  }
  .ocx-hero-story-panel>p:not(.ocx-kicker) {
    max-inline-size:600px;
    margin-block-start:18px;
    color:var(--ocx-ink-soft);
    font-size:clamp(.98rem,1.35vw,1.18rem);
    line-height:1.62;
    text-wrap:pretty;
  }
  .ocx-scroll-hero .ocx-actions {
    margin-block-start:4px;
  }
  .ocx-hero-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-block-start:22px;
  }
  .ocx-hero-scene-dots {
    display:flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
  }
  .ocx-hero-scene-dots span {
    inline-size:8px;
    block-size:8px;
    border:1px solid color-mix(in srgb,var(--ocx-brand) 62%,transparent);
    border-radius:999px;
    background:color-mix(in srgb,var(--ocx-bg-elevated) 78%,transparent);
    transition:inline-size .28s var(--ocx-ease),background .28s ease,border-color .28s ease;
  }
  .ocx-hero-scene-dots span.is-current {
    inline-size:28px;
    border-color:var(--ocx-brand);
    background:var(--ocx-brand);
  }
  .ocx-scroll-hero.is-unavailable .ocx-scroll-hero-media {
    background:
      linear-gradient(var(--ocx-line) 1px,transparent 1px),
      linear-gradient(90deg,var(--ocx-line) 1px,transparent 1px),
      radial-gradient(circle at 72% 34%,rgba(var(--ocx-brand-rgb),.20),transparent 34%),
      var(--ocx-bg-soft);
    background-size:54px 54px,54px 54px,auto,auto;
  }
  :root[data-theme="dark"] .ocx-scroll-hero-video {
    filter:brightness(.58) saturate(.86) contrast(1.06);
  }
  :root[data-theme="dark"] .ocx-scroll-hero-shade {
    background:
      linear-gradient(90deg,rgba(5,17,27,.76) 0%,rgba(5,17,27,.44) 34%,rgba(5,17,27,.12) 64%,transparent 82%),
      linear-gradient(180deg,rgba(5,17,27,.18),transparent 34%,transparent 68%,rgba(5,17,27,.48));
  }
  :root[data-theme="dark"] .ocx-scroll-hero .ocx-hero-copy {
    background:rgba(6,20,31,.62);
    box-shadow:0 28px 90px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.05);
  }

  .ocx-trust { border-block:1px solid var(--ocx-line); background:var(--ocx-bg-elevated); }
  .ocx-trust-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .ocx-trust-row span { display:grid; place-items:center; min-block-size:76px; padding:16px; border-inline-end:1px solid var(--ocx-line); color:var(--ocx-ink-soft); text-align:center; font-size:.78rem; font-weight:820; letter-spacing:.04em; }
  .ocx-trust-row span:last-child{border:0}

  .ocx-scale-path,.ocx-process-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid var(--ocx-line); border-radius:var(--ocx-radius-lg); background:var(--ocx-line); box-shadow:var(--ocx-shadow-sm); }
  .ocx-scale-path article,.ocx-process-grid article { position:relative; min-block-size:230px; padding:clamp(22px,3vw,34px); background:var(--ocx-bg-elevated); }
  .ocx-scale-path article::after { content:""; position:absolute; inset:0 0 auto; block-size:3px; background:var(--ocx-brand); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ocx-ease); }
  .ocx-scale-path article:hover::after { transform:scaleX(1); }
  .ocx-scale-path span,.ocx-process-grid span { display:block; margin-block-end:44px; color:var(--ocx-brand); font-size:.75rem; font-weight:900; letter-spacing:.12em; }
  .ocx-scale-path h3,.ocx-process-grid h3 { font-size:1.45rem; margin-block-end:10px; }

  /* Product cards */
  .ocx-product-card {
    position:relative; min-inline-size:0; overflow:hidden; border:1px solid var(--ocx-line); border-radius:var(--ocx-radius-lg); background:var(--ocx-bg-elevated);
    box-shadow:var(--ocx-shadow-sm); transition:transform .32s var(--ocx-ease),box-shadow .32s ease,border-color .32s ease; isolation:isolate;
  }
  .ocx-product-card::after { content:""; position:absolute; inset:auto 0 0; block-size:4px; background:linear-gradient(90deg,var(--ocx-brand),var(--ocx-accent)); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ocx-ease); }
  .ocx-product-card-media { position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(145deg,var(--ocx-bg-soft),var(--ocx-bg-strong)); border-block-end:1px solid var(--ocx-line); }
  .ocx-product-card-media img { inline-size:100%; block-size:100%; object-fit:cover; transition:transform .55s var(--ocx-ease),filter .35s ease; }
  .ocx-status-badge { position:absolute; inset:16px 16px auto auto; z-index:2; padding:7px 10px; border:1px solid rgba(255,255,255,.52); border-radius:999px; background:color-mix(in srgb,var(--ocx-bg-elevated) 85%,transparent); backdrop-filter:blur(12px); color:var(--ocx-brand); box-shadow:var(--ocx-shadow-sm); font-size:.67rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
  .ocx-product-card-body { display:flex; flex-direction:column; min-block-size:315px; padding:clamp(22px,3vw,30px); }
  .ocx-card-eyebrow { color:var(--ocx-brand)!important; font-size:.68rem!important; font-weight:900!important; letter-spacing:.11em; text-transform:uppercase; }
  .ocx-product-card h3 { margin-block:8px 12px; font-size:clamp(1.5rem,5cqi,2rem); }
  .ocx-product-card-body>p:not(.ocx-card-eyebrow) { margin-block-end:18px; }
  .ocx-product-card .ocx-chip-row { margin-block:auto 20px; padding-block-start:6px; }
  .ocx-product-card-link { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block-start:16px; border-block-start:1px solid var(--ocx-line); color:var(--ocx-brand); font-size:.85rem; font-weight:850; }
  .ocx-product-card-link b { display:grid; place-items:center; inline-size:34px; block-size:34px; border-radius:50%; background:var(--ocx-bg-soft); transition:transform .2s var(--ocx-ease),background-color .2s ease; }
  @media (hover:hover) {
    .ocx-product-card:hover { transform:translateY(-8px); border-color:var(--ocx-line-brand); box-shadow:var(--ocx-shadow-lg); }
    .ocx-product-card:hover::after { transform:scaleX(1); }
    .ocx-product-card:hover .ocx-product-card-media img { transform:scale(1.045); }
    .ocx-product-card:hover .ocx-product-card-link b { transform:rotate(45deg); background:rgba(var(--ocx-brand-rgb),.14); }
  }

  .ocx-product-visual { position:relative; display:grid; place-items:center; inline-size:100%; block-size:100%; min-block-size:220px; overflow:hidden; background:linear-gradient(145deg,var(--ocx-bg-soft),var(--ocx-bg-elevated)); }
  .ocx-product-visual::before { content:""; position:absolute; inline-size:65%; aspect-ratio:1; border:1px solid var(--ocx-line-brand); border-radius:50%; box-shadow:0 0 0 32px rgba(var(--ocx-brand-rgb),.035),0 0 0 64px rgba(var(--ocx-brand-rgb),.025); }
  .ocx-product-visual svg { position:relative; z-index:1; inline-size:min(66%,360px); fill:none; stroke:var(--ocx-brand); stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 18px 22px rgba(var(--ocx-brand-rgb),.20)); }
  .ocx-product-visual.is-large { min-block-size:clamp(400px,49vw,640px); }

  /* Page heroes and content pages */
  .ocx-showcase-hero .ocx-container { position:relative; }
  .ocx-showcase-hero h1 { max-inline-size:1000px; }
  .ocx-showcase-hero .ocx-actions { position:relative; }
  .ocx-breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-block-end:28px; color:var(--ocx-muted); font-size:.78rem; font-weight:720; }
  .ocx-breadcrumbs a:hover { color:var(--ocx-brand); }
  .ocx-about-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
  .ocx-content { padding:clamp(22px,3vw,34px); border:1px solid var(--ocx-line); border-radius:var(--ocx-radius-md); background:var(--ocx-bg-elevated); box-shadow:var(--ocx-shadow-sm); }
  .ocx-content-featured { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:30px; align-items:end; background:linear-gradient(135deg,var(--ocx-bg-soft),var(--ocx-bg-elevated)); }
  .ocx-content-featured .ocx-kicker { align-self:start; justify-self:start; }
  .ocx-content-featured h2 { font-size:clamp(2rem,4vw,3.5rem); }
  .ocx-inquiry-section { overflow:visible; }
  .ocx-inquiry-form { min-inline-size:0; }
  .ocx-inquiry-form>.ocx-form { margin:0; }
  .ocx-contact-layout>.ocx-content,
  .ocx-demo-page-grid>.ocx-content {
    min-inline-size:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  .ocx-number-list { counter-reset:ocx-list; display:grid; gap:0; margin-block-start:18px; padding:0!important; list-style:none; }
  .ocx-number-list li {
    counter-increment:ocx-list;
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    gap:16px;
    align-items:start;
    min-inline-size:0;
    padding-block:20px;
    border-block-end:1px solid var(--ocx-line);
  }
  .ocx-number-list li:last-child { padding-block-end:0; border-block-end:0; }
  .ocx-number-list li::before {
    content:counter(ocx-list,decimal-leading-zero);
    display:grid;
    place-items:center;
    inline-size:42px;
    block-size:42px;
    border:1px solid var(--ocx-line-brand);
    border-radius:50%;
    background:var(--ocx-bg-soft);
    color:var(--ocx-brand);
    box-shadow:0 8px 22px rgba(var(--ocx-brand-rgb),.10);
    font-size:.7rem;
    font-weight:900;
  }
  .ocx-number-list li>span { display:none!important; }
  .ocx-number-list li>div { min-inline-size:0; }
  .ocx-number-list strong { display:block; color:var(--ocx-ink); font-size:1rem; line-height:1.35; }
  .ocx-number-list p { margin-block-start:6px!important; font-size:.9rem; line-height:1.62; overflow-wrap:normal; word-break:normal; }

  .ocx-contact-layout {
    display:grid;
    grid-template-columns:minmax(0,1.38fr) minmax(340px,.62fr);
    gap:clamp(28px,4vw,54px);
    align-items:start;
  }
  .ocx-demo-page-grid {
    display:grid;
    grid-template-columns:minmax(0,1.42fr) minmax(360px,.58fr);
    gap:clamp(28px,4vw,54px);
    align-items:start;
  }
  .ocx-contact-aside,.ocx-demo-benefits {
    position:sticky;
    inset-block-start:calc(var(--ocx-header-h,76px) + 28px);
    display:grid;
    gap:18px;
    min-inline-size:0;
  }
  .ocx-sidebar-card,
  .ocx-contact-aside>.ocx-content,
  .ocx-demo-benefits>.ocx-content {
    min-inline-size:0;
    padding:clamp(24px,3vw,34px);
    border:1px solid var(--ocx-line);
    border-radius:var(--ocx-radius-lg);
    background:linear-gradient(145deg,var(--ocx-bg-elevated),color-mix(in srgb,var(--ocx-bg-soft) 58%,var(--ocx-bg-elevated)));
    box-shadow:var(--ocx-shadow-md);
  }
  .ocx-sidebar-card>.ocx-kicker { margin-block-end:14px; }
  .ocx-sidebar-card h2 { font-size:clamp(1.75rem,3.2vw,2.5rem); }
  .ocx-sidebar-card h3 { font-size:1.45rem; }
  .ocx-contact-link-list { display:grid; gap:10px; margin-block:22px; }
  .ocx-contact-link {
    display:grid;
    gap:4px;
    min-inline-size:0;
    padding:15px 16px;
    border:1px solid var(--ocx-line);
    border-radius:16px;
    background:var(--ocx-bg-elevated);
    box-shadow:var(--ocx-shadow-sm);
    transition:transform .22s var(--ocx-ease),border-color .22s ease,box-shadow .22s ease;
  }
  .ocx-contact-link span { color:var(--ocx-muted); font-size:.66rem; font-weight:850; text-transform:uppercase; letter-spacing:.09em; }
  .ocx-contact-link strong { color:var(--ocx-brand); font-size:.9rem; overflow-wrap:anywhere; }
  .ocx-direct-meta { padding-block-start:18px; border-block-start:1px solid var(--ocx-line); font-size:.92rem; }
  .ocx-direct-meta strong { color:var(--ocx-ink); }
  .ocx-compact-checks { gap:10px; margin-block-start:20px; }
  .ocx-compact-checks li { font-size:.91rem; }
  .ocx-quick-contact {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px !important;
    min-inline-size:0;
  }
  .ocx-quick-contact h3 { margin-block-end:6px; }
  .ocx-quick-contact>a {
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    inline-size:100%;
    max-inline-size:100%;
    min-inline-size:0;
    min-block-size:54px;
    padding:14px 16px;
    border:1px solid var(--ocx-line);
    border-radius:16px;
    background:var(--ocx-bg-elevated);
    color:var(--ocx-brand);
    box-shadow:var(--ocx-shadow-sm);
    font-size:clamp(.78rem,1.2vw,.92rem);
    font-weight:800;
    line-height:1.35;
    overflow-wrap:anywhere;
    word-break:break-word;
    white-space:normal;
    text-decoration:none;
    transition:transform .22s var(--ocx-ease),border-color .22s ease,box-shadow .22s ease,background-color .22s ease;
  }
  .ocx-quick-contact>a::after {
    content:"↗";
    flex:0 0 auto;
    display:grid;
    place-items:center;
    inline-size:28px;
    block-size:28px;
    border-radius:999px;
    background:var(--ocx-bg-soft);
    color:var(--ocx-brand);
    font-size:.78rem;
    font-weight:900;
  }
  .ocx-quick-contact>a+a { margin-block-start:0 !important; }
  .ocx-contact-link strong {
    display:block;
    min-inline-size:0;
    max-inline-size:100%;
    line-height:1.35;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  @media(hover:hover) {
    .ocx-contact-link:hover,
    .ocx-quick-contact>a:hover {
      transform:translateY(-2px);
      border-color:var(--ocx-line-brand);
      box-shadow:var(--ocx-shadow-md);
    }
  }

  /* Product detail hero */
  .ocx-product-page { background:var(--ocx-bg); }
  .ocx-product-hero { position:relative; overflow:hidden; padding-block:clamp(46px,6vw,88px) clamp(68px,8vw,112px); background:linear-gradient(180deg,var(--ocx-bg-soft),var(--ocx-bg)); isolation:isolate; }
  .ocx-product-hero::after { content:""; position:absolute; inset:-40% -20% auto auto; z-index:-1; inline-size:min(78vw,980px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(var(--ocx-brand-rgb),.18),transparent 67%); }
  .ocx-product-hero-inner { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr); gap:clamp(34px,5vw,68px); align-items:center; }
  .ocx-product-meta-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-block-end:16px; }
  .ocx-product-meta-row .ocx-kicker { margin:0; }
  .ocx-status-pill { display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border:1px solid var(--ocx-line); border-radius:999px; background:var(--ocx-bg-elevated); color:var(--ocx-ink-soft); font-size:.7rem; font-weight:850; }
  .ocx-status-pill i { inline-size:7px; block-size:7px; border-radius:50%; background:var(--ocx-brand); box-shadow:0 0 0 5px rgba(var(--ocx-brand-rgb),.11); }
  .ocx-product-hero h1 { font-size:clamp(3rem,7vw,6.6rem); letter-spacing:-.065em; }
  .ocx-product-tagline { max-inline-size:690px; margin-block-start:20px; font-size:clamp(1.08rem,2vw,1.35rem); }
  .ocx-product-audience { max-inline-size:670px; margin-block-start:18px; padding-inline-start:15px; border-inline-start:3px solid var(--ocx-brand); }
  .ocx-product-audience strong { color:var(--ocx-ink); }
  .ocx-hero-platforms { margin-block-start:28px; }
  .ocx-product-hero-visual { position:relative; min-inline-size:0; overflow:hidden; aspect-ratio:1.08; border:1px solid var(--ocx-line-brand); border-radius:var(--ocx-radius-xl); background:var(--ocx-bg-elevated); box-shadow:var(--ocx-shadow-lg),var(--ocx-glow); }
  .ocx-product-hero-image { inline-size:100%; block-size:100%; object-fit:cover; }
  .ocx-media-play { position:absolute; inset:auto 20px 20px; display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--ocx-line-brand); border-radius:999px; background:color-mix(in srgb,var(--ocx-bg-elevated) 86%,transparent); backdrop-filter:blur(12px); color:var(--ocx-brand); box-shadow:var(--ocx-shadow-sm); font-size:.77rem; font-weight:850; }
  .ocx-media-play span { display:grid; place-items:center; inline-size:28px; block-size:28px; border-radius:50%; background:var(--ocx-brand); color:#fff; font-size:.65rem; }

  .ocx-product-jumpbar { position:sticky; inset-block-start:var(--ocx-header-h,76px); z-index:48; border-block:1px solid var(--ocx-line); background:color-mix(in srgb,var(--ocx-bg) 88%,transparent); backdrop-filter:blur(18px) saturate(150%); }
  .ocx-product-jumpbar .ocx-container { display:flex; align-items:center; gap:5px; overflow-x:auto; scrollbar-width:none; }
  .ocx-product-jumpbar .ocx-container::-webkit-scrollbar{display:none}
  .ocx-product-jumpbar a { position:relative; flex:0 0 auto; padding:15px 12px; color:var(--ocx-muted); font-size:.75rem; font-weight:800; white-space:nowrap; }
  .ocx-product-jumpbar a::after { content:""; position:absolute; inset:auto 12px -1px; block-size:2px; border-radius:2px; background:var(--ocx-brand); transform:scaleX(0); transition:transform .22s ease; }
  .ocx-product-jumpbar a.is-active { color:var(--ocx-brand); }
  .ocx-product-jumpbar a.is-active::after { transform:scaleX(1); }
  .ocx-product-jumpbar .ocx-jump-cta { margin-inline-start:auto; color:#fff; background:var(--ocx-brand); border-radius:999px; padding:9px 15px; }
  .ocx-product-jumpbar .ocx-jump-cta::after{display:none}

  .ocx-product-overview-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:clamp(30px,6vw,84px); align-items:start; }
  .ocx-product-intro h2 { max-inline-size:900px; font-size:clamp(2.1rem,4.5vw,4rem); }
  .ocx-lead { margin-block-start:20px; font-size:clamp(1.03rem,1.5vw,1.2rem); white-space:normal; }
  .ocx-check-list { display:grid; gap:12px; margin:28px 0 0; padding:0; list-style:none; }
  .ocx-check-list li { position:relative; padding-inline-start:34px; color:var(--ocx-ink-soft); }
  .ocx-check-list li::before { content:"✓"; position:absolute; inset:0 auto auto 0; display:grid; place-items:center; inline-size:23px; block-size:23px; border-radius:50%; background:rgba(var(--ocx-brand-rgb),.11); color:var(--ocx-brand); font-size:.75rem; font-weight:900; }
  .ocx-product-summary { position:sticky; inset-block-start:calc(var(--ocx-header-h,76px) + 84px); }
  .ocx-summary-card { padding:clamp(22px,3vw,32px); border:1px solid var(--ocx-line-brand); border-radius:var(--ocx-radius-lg); background:linear-gradient(145deg,var(--ocx-bg-elevated),var(--ocx-bg-soft)); box-shadow:var(--ocx-shadow-md); }
  .ocx-summary-card>div { display:grid; gap:5px; padding-block:16px; border-block-end:1px solid var(--ocx-line); }
  .ocx-summary-card>div span { color:var(--ocx-muted); font-size:.69rem; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
  .ocx-summary-card>div strong { color:var(--ocx-ink); font-size:.94rem; line-height:1.45; }
  .ocx-summary-card .ocx-btn { inline-size:100%; margin-block-start:24px; }

  /* Product flexible sections */
  .ocx-product-section { position:relative; padding-block:clamp(68px,8vw,116px); border-block-start:1px solid var(--ocx-line); content-visibility:auto; contain-intrinsic-size:auto 650px; }
  .ocx-product-section.ocx-tone-soft { background:var(--ocx-bg-soft); }
  .ocx-product-section.ocx-tone-brand { background:linear-gradient(140deg,var(--ocx-brand-strong),var(--ocx-brand)); }
  .ocx-product-section.ocx-tone-brand :where(h2,h3,p,.ocx-kicker) { color:#fff; }
  .ocx-product-section.ocx-tone-brand .ocx-kicker { border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.10); }
  .ocx-product-section.ocx-tone-brand .ocx-kicker::before{background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.12)}
  .ocx-product-section.ocx-tone-brand .ocx-btn { background:#fff; border-color:#fff; color:var(--ocx-brand-strong)!important; }
  .ocx-product-section .ocx-section-head { max-inline-size:850px; }
  .ocx-product-section.ocx-align-center .ocx-section-head { margin-inline:auto; text-align:center; }
  .ocx-content-block.is-compact { max-inline-size:var(--ocx-copy); margin-inline:auto; }
  .ocx-content-block .ocx-section-head { margin-block-end:0; }

  .ocx-split-block { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,5vw,70px); align-items:center; }
  .ocx-split-block.is-media-left .ocx-split-media { order:-1; }
  .ocx-split-copy .ocx-section-head { margin:0; }
  .ocx-split-media { min-inline-size:0; overflow:hidden; aspect-ratio:4/3; border:1px solid var(--ocx-line-brand); border-radius:var(--ocx-radius-xl); background:var(--ocx-bg-elevated); box-shadow:var(--ocx-shadow-md); }
  .ocx-split-media img,.ocx-split-media .ocx-product-visual { inline-size:100%; block-size:100%; object-fit:cover; }
  .ocx-media-frame { overflow:hidden; margin:0; border:1px solid var(--ocx-line); border-radius:var(--ocx-radius-xl); background:var(--ocx-bg-elevated); box-shadow:var(--ocx-shadow-lg); }
  .ocx-media-frame img { inline-size:100%; max-block-size:760px; object-fit:cover; }

  .ocx-feature-tile,.ocx-steps-grid article,.ocx-tier-card,.ocx-stats-grid article,.ocx-platform-card {
    position:relative; overflow:hidden; min-inline-size:0; padding:clamp(22px,3vw,32px); border:1px solid var(--ocx-line); border-radius:var(--ocx-radius-md); background:var(--ocx-bg-elevated); box-shadow:var(--ocx-shadow-sm);
    transition:transform .28s var(--ocx-ease),border-color .28s ease,box-shadow .28s ease;
  }
  @media (hover:hover) {
    .ocx-feature-tile:hover,.ocx-tier-card:hover,.ocx-platform-card:hover { transform:translateY(-5px); border-color:var(--ocx-line-brand); box-shadow:var(--ocx-shadow-md); }
  }
  .ocx-feature-number,.ocx-tier-index { display:inline-flex; align-items:center; justify-content:center; min-inline-size:38px; block-size:28px; margin-block-end:38px; border:1px solid var(--ocx-line-brand); border-radius:999px; color:var(--ocx-brand); font-size:.66rem; font-weight:900; letter-spacing:.08em; }
  .ocx-feature-tile h3,.ocx-tier-card h3,.ocx-platform-card h3 { margin-block:5px 10px; font-size:1.35rem; }
  .ocx-feature-tile.ocx-single-card { display:grid; grid-template-columns:auto minmax(0,.48fr) minmax(0,1fr); gap:22px; align-items:start; min-block-size:auto; }
  .ocx-feature-tile.ocx-single-card .ocx-feature-number { margin:0; }
  .ocx-feature-tile.ocx-single-card h3 { margin:0; }
  .ocx-steps-grid article { min-block-size:240px; }
  .ocx-steps-grid article>span { display:block; margin-block-end:52px; color:var(--ocx-brand); font-size:.72rem; font-weight:900; letter-spacing:.12em; }
  .ocx-steps-grid article::after { content:""; position:absolute; inset:0 auto auto 0; inline-size:100%; block-size:3px; background:var(--ocx-brand); transform:scaleX(.22); transform-origin:left; }
  .ocx-tier-card ul { display:grid; gap:9px; margin:20px 0 0; padding:18px 0 0; border-block-start:1px solid var(--ocx-line); list-style:none; }
  .ocx-tier-card li { position:relative; padding-inline-start:22px; }
  .ocx-tier-card li::before { content:""; position:absolute; inset:10px auto auto 0; inline-size:7px; block-size:7px; border-radius:50%; background:var(--ocx-brand); }
  .ocx-stats-grid article { text-align:center; }
  .ocx-stats-grid strong { display:block; margin-block-end:8px; color:var(--ocx-brand); font-size:clamp(2rem,6cqi,4.6rem); line-height:1; letter-spacing:-.05em; }

  .ocx-platform-icon { display:grid; place-items:center; inline-size:48px; block-size:48px; margin-block-end:34px; border-radius:15px; background:rgba(var(--ocx-brand-rgb),.10); color:var(--ocx-brand); }
  .ocx-platform-icon svg { inline-size:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

  .ocx-faq-list { max-inline-size:900px; margin-inline:auto; border-block-start:1px solid var(--ocx-line); }
  .ocx-faq-list details { border-block-end:1px solid var(--ocx-line); }
  .ocx-faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:22px; color:var(--ocx-ink); font-size:clamp(1rem,2vw,1.2rem); font-weight:800; cursor:pointer; list-style:none; }
  .ocx-faq-list summary::-webkit-details-marker{display:none}
  .ocx-faq-list summary span { display:grid; place-items:center; inline-size:30px; block-size:30px; flex:0 0 auto; border:1px solid var(--ocx-line); border-radius:50%; color:var(--ocx-brand); transition:transform .2s ease; }
  .ocx-faq-list details[open] summary span { transform:rotate(45deg); }
  .ocx-faq-list details p { max-inline-size:72ch; padding-block:0 24px; }

  .ocx-quote { max-inline-size:980px; margin:0 auto; padding:clamp(28px,6vw,72px); border-inline-start:5px solid var(--ocx-brand); border-radius:0 var(--ocx-radius-xl) var(--ocx-radius-xl) 0; background:var(--ocx-bg-elevated); box-shadow:var(--ocx-shadow-md); }
  .ocx-quote p { color:var(--ocx-ink); font-size:clamp(1.7rem,4vw,3.4rem); font-weight:760; line-height:1.15; letter-spacing:-.035em; }
  .ocx-quote cite { display:block; margin-block-start:22px; color:var(--ocx-brand); font-style:normal; font-weight:800; }

  .ocx-video { inline-size:100%; overflow:hidden; aspect-ratio:16/9; border:1px solid var(--ocx-line); border-radius:var(--ocx-radius-xl); background:#000; box-shadow:var(--ocx-shadow-lg); }
  div.ocx-video { position:relative; }
  .ocx-video iframe,.ocx-video video,video.ocx-video { inline-size:100%; block-size:auto; aspect-ratio:16/9; border:0; object-fit:cover; }
  .ocx-gallery-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; margin-block-start:28px; }
  .ocx-gallery-grid img { grid-column:span 4; inline-size:100%; block-size:300px; object-fit:cover; border:1px solid var(--ocx-line); border-radius:var(--ocx-radius-md); background:var(--ocx-bg-soft); cursor:zoom-in; transition:transform .25s var(--ocx-ease),box-shadow .25s ease; }
  .ocx-gallery-grid img:first-child:nth-last-child(1){grid-column:1/-1;block-size:min(65vw,680px)}
  .ocx-gallery-grid img:first-child:nth-last-child(2),.ocx-gallery-grid img:first-child:nth-last-child(2)~img{grid-column:span 6;block-size:420px}
  @media(hover:hover){.ocx-gallery-grid img:hover{transform:translateY(-4px);box-shadow:var(--ocx-shadow-md)}}

  .ocx-model-viewer-wrap { position:relative; overflow:hidden; border:1px solid var(--ocx-line-brand); border-radius:var(--ocx-radius-xl); background:radial-gradient(circle at 50% 45%,rgba(var(--ocx-brand-rgb),.14),transparent 46%),var(--ocx-bg-soft); box-shadow:var(--ocx-shadow-lg); }
  .ocx-model-viewer-wrap model-viewer { display:block; inline-size:100%; min-block-size:320px; --poster-color:transparent; }
  .ocx-model-hint { position:absolute; inset:auto 18px 18px auto; padding:7px 10px; border:1px solid var(--ocx-line); border-radius:999px; background:color-mix(in srgb,var(--ocx-bg-elevated) 88%,transparent); color:var(--ocx-muted); backdrop-filter:blur(12px); font-size:.67rem; font-weight:780; }

  .ocx-cta { padding-block:clamp(58px,8vw,104px); background:var(--ocx-bg); }
  .ocx-cta-box { display:flex; align-items:center; justify-content:space-between; gap:34px; overflow:hidden; padding:clamp(30px,5vw,64px); border:1px solid var(--ocx-line-brand); border-radius:var(--ocx-radius-xl); background:linear-gradient(135deg,var(--ocx-bg-soft),var(--ocx-bg-elevated)); box-shadow:var(--ocx-shadow-lg); }
  .ocx-cta-box>div:first-child { max-inline-size:780px; }
  .ocx-cta-box h2 { font-size:clamp(2rem,4.5vw,4rem); }
  .ocx-cta-box p:not(.ocx-kicker) { margin-block-start:14px; font-size:1.06rem; }
  .ocx-block-cta .ocx-section-head { margin:0; }
  .ocx-tone-brand .ocx-cta-box { border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.08); box-shadow:none; }

  .ocx-related-products { background:var(--ocx-bg-soft); }

  /* Team cards */
  .ocx-team-card {
    position:relative; display:flex; flex-direction:column; align-items:center; min-block-size:390px; padding:30px 24px; overflow:hidden; text-align:center;
    border:1px solid var(--ocx-line); border-radius:var(--ocx-radius-lg); background:var(--ocx-bg-elevated); box-shadow:var(--ocx-shadow-sm); transition:transform .3s var(--ocx-ease),box-shadow .3s ease,border-color .3s ease;
  }
  .ocx-team-card::before { content:""; position:absolute; inset:0 0 auto; block-size:5px; background:var(--ocx-brand); transform:scaleX(.35); transition:transform .3s ease; }
  .ocx-team-avatar-wrap { position:relative; z-index:2; display:grid; place-items:center; inline-size:132px!important; block-size:132px!important; flex:0 0 132px; margin-block:3px 18px; overflow:hidden; border:5px solid var(--ocx-bg-elevated); border-radius:50%!important; outline:2px solid var(--ocx-line-brand); background:var(--ocx-bg-soft); box-shadow:0 16px 34px rgba(var(--ocx-brand-rgb),.17); }
  .ocx-team-photo { inline-size:100%!important; block-size:100%!important; max-inline-size:none!important; object-fit:cover!important; object-position:center!important; border-radius:50%!important; transition:transform .45s var(--ocx-ease); }
  .ocx-team-avatar-empty span { color:var(--ocx-brand); font-size:3rem; font-weight:900; }
  .ocx-team-chip { position:absolute; inset:20px 20px auto auto; }
  .ocx-team-card h3 { margin-block:4px 7px; font-size:1.45rem; }
  .ocx-team-role { min-block-size:42px; color:var(--ocx-brand)!important; font-size:.82rem; font-weight:800; }
  .ocx-team-line { inline-size:44px; block-size:2px; margin-block:17px; border-radius:2px; background:var(--ocx-brand); transition:inline-size .28s ease; }
  .ocx-team-reveal { display:grid; gap:14px; margin-block-start:auto; opacity:.72; transform:translateY(4px); transition:opacity .28s ease,transform .28s var(--ocx-ease); }
  .ocx-team-bio { font-size:.9rem; }
  .ocx-text-link { display:inline-flex; align-items:center; justify-content:center; gap:10px; color:var(--ocx-brand); font-size:.8rem; font-weight:850; }
  @media(hover:hover) and (min-width:801px){
    .ocx-team-card:hover,.ocx-team-card:focus-within { transform:translateY(-7px); border-color:var(--ocx-line-brand); box-shadow:var(--ocx-shadow-lg); }
    .ocx-team-card:hover::before,.ocx-team-card:focus-within::before { transform:scaleX(1); }
    .ocx-team-card:hover .ocx-team-photo,.ocx-team-card:focus-within .ocx-team-photo { transform:scale(1.07); }
    .ocx-team-card:hover .ocx-team-line,.ocx-team-card:focus-within .ocx-team-line { inline-size:72px; }
    .ocx-team-card:hover .ocx-team-reveal,.ocx-team-card:focus-within .ocx-team-reveal { opacity:1; transform:none; }
  }

  /* Forms */
  .ocx-form { padding:clamp(24px,4vw,42px); border:1px solid var(--ocx-line); border-radius:var(--ocx-radius-xl); background:var(--ocx-bg-elevated); box-shadow:var(--ocx-shadow-lg); }
  .ocx-demo-form-head { max-inline-size:720px; margin-block-end:30px; }
  .ocx-demo-form-head h2 { font-size:clamp(2rem,5cqi,3.2rem); }
  .ocx-demo-form-head>p:last-child { margin-block-start:10px; }
  .ocx-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .ocx-form label { display:grid; gap:8px; min-inline-size:0; color:var(--ocx-ink); font-size:.78rem; font-weight:820; }
  .ocx-form label span { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .ocx-form label em { color:var(--ocx-muted); font-size:.68rem; font-style:normal; font-weight:700; }
  .ocx-form :where(input,textarea,select) { inline-size:100%; min-block-size:52px; padding:12px 14px; border:1px solid var(--ocx-line); border-radius:14px; background:var(--ocx-bg); color:var(--ocx-ink); box-shadow:0 1px 0 rgba(255,255,255,.08) inset; transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease; }
  .ocx-form textarea { min-block-size:150px; resize:vertical; }
  .ocx-form :where(input,textarea,select)::placeholder { color:color-mix(in srgb,var(--ocx-muted) 76%,transparent); }
  .ocx-form :where(input,textarea,select):focus { border-color:var(--ocx-brand); outline:0; box-shadow:0 0 0 4px rgba(var(--ocx-brand-rgb),.12); }
  .ocx-form-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-block-start:24px; padding-block-start:22px; border-block-start:1px solid var(--ocx-line); }
  .ocx-form-footer p { max-inline-size:650px; font-size:.76rem; }
  .ocx-form-footer a { color:var(--ocx-brand); text-decoration:underline; }
  .ocx-honeypot { position:absolute!important; inset:-9999px auto auto -9999px!important; inline-size:1px!important; block-size:1px!important; overflow:hidden!important; }
  .ocx-form-success { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; margin-block-end:24px; padding:24px; border:1px solid rgba(22,163,74,.28); border-radius:var(--ocx-radius-lg); background:color-mix(in srgb,#16a34a 8%,var(--ocx-bg-elevated)); box-shadow:var(--ocx-shadow-sm); }
  .ocx-checkmark { display:grid; place-items:center; inline-size:64px; block-size:64px; border-radius:50%; background:#16a34a; }
  .ocx-checkmark svg { inline-size:44px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
  .ocx-checkmark circle { opacity:.25; }
  .ocx-form.is-submitting { opacity:.78; pointer-events:none; }
  .ocx-form.is-submitting button::before { content:""; inline-size:15px; block-size:15px; border:2px solid rgba(255,255,255,.45); border-block-start-color:#fff; border-radius:50%; animation:ocx-spin .7s linear infinite; }
  @keyframes ocx-spin { to { transform:rotate(1turn); } }

  .ocx-empty-state { grid-column:1/-1; padding:clamp(30px,5vw,64px); border:1px dashed var(--ocx-line-brand); border-radius:var(--ocx-radius-xl); background:var(--ocx-bg-soft); text-align:center; }
  .ocx-empty-state h2,.ocx-empty-state h3 { margin-block-end:12px; }
  .ocx-empty-state .ocx-btn { margin-block-start:20px; }
}

@layer utilities {
  .ocx-lightboxable { cursor:zoom-in; }
  .screen-reader-text { position:absolute!important; inline-size:1px!important; block-size:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
  [data-ocx-reveal] { opacity:0; transform:translateY(20px); transition:opacity .65s var(--ocx-ease),transform .65s var(--ocx-ease); }
  [data-ocx-reveal].is-visible { opacity:1; transform:none; }
}

@layer overrides {
  @container (max-width:620px) {
    .ocx-feature-tile.ocx-single-card { grid-template-columns:1fr; }
    .ocx-feature-tile.ocx-single-card .ocx-feature-number { margin-block-end:12px; }
    .ocx-product-card-body { min-block-size:280px; }
  }

  @media (max-width:1024px) {
    .ocx-scroll-hero { min-block-size:300svh; }
    .ocx-scroll-hero .ocx-hero-copy { inline-size:min(650px,64vw); }
    .ocx-hero-grid,.ocx-product-hero-inner,.ocx-product-overview-grid,.ocx-contact-layout,.ocx-demo-page-grid { grid-template-columns:1fr; }
    .ocx-home-hero { min-block-size:auto; }
    .ocx-hero-video-shell { max-inline-size:760px; aspect-ratio:16/10; }
    .ocx-hero-copy { max-inline-size:840px; }
    .ocx-hero-media,.ocx-product-hero-visual { max-inline-size:760px; }
    .ocx-product-summary,.ocx-contact-aside,.ocx-demo-benefits { position:static; }
    .ocx-summary-card { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 18px; }
    .ocx-summary-card>.ocx-card-eyebrow,.ocx-summary-card>.ocx-btn { grid-column:1/-1; }
    .ocx-scale-path,.ocx-process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ocx-about-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ocx-content-featured { grid-template-columns:1fr; }
    .ocx-feature-grid,.ocx-steps-grid,.ocx-tier-grid,.ocx-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    :where(.ocx-feature-grid,.ocx-steps-grid,.ocx-tier-grid,.ocx-stats-grid):has(> :only-child) { grid-template-columns:1fr; }
  }

  @media (max-width:760px) {
    .ocx-scroll-hero { min-block-size:280svh; }
    .ocx-scroll-hero-sticky { min-block-size:560px; }
    .ocx-scroll-hero-video { object-position:center; }
    .ocx-scroll-hero-shade {
      background:linear-gradient(180deg,color-mix(in srgb,var(--ocx-bg) 34%,transparent),color-mix(in srgb,var(--ocx-bg) 78%,transparent) 58%,var(--ocx-bg) 100%);
    }
    .ocx-scroll-hero-content { align-items:flex-end; padding-block:38px 42px; }
    .ocx-scroll-hero .ocx-hero-copy { inline-size:min(680px,100%); padding:24px; border-radius:26px; }
    .ocx-hero-story { min-block-size:330px; }
    .ocx-hero-story-panel h1 { font-size:clamp(2.45rem,9.5vw,4.35rem); }
    .ocx-home-hero { padding-block:54px 64px; }
    .ocx-hero-video-shell { aspect-ratio:16/10; border-radius:24px; }
    .ocx-hero-copy h1,.ocx-product-hero h1 { font-size:clamp(2.6rem,13vw,4.2rem); }
    .ocx-ecosystem-visual { min-block-size:350px; transform:none; }
    .ocx-eco-node { font-size:.62rem; }
    .ocx-trust-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ocx-trust-row span:nth-child(2){border-inline-end:0}.ocx-trust-row span:nth-child(-n+2){border-block-end:1px solid var(--ocx-line)}
    .ocx-scale-path,.ocx-process-grid,.ocx-about-grid,.ocx-split-block,.ocx-form-grid,.ocx-summary-card { grid-template-columns:1fr; }
    .ocx-split-block.is-media-left .ocx-split-media { order:0; }
    .ocx-feature-grid,.ocx-steps-grid,.ocx-tier-grid,.ocx-stats-grid { grid-template-columns:1fr; }
    .ocx-product-jumpbar { inset-block-start:var(--ocx-header-h,68px); }
    .ocx-product-jumpbar .ocx-jump-cta { display:none; }
    .ocx-product-hero-visual { border-radius:var(--ocx-radius-lg); }
    .ocx-gallery-grid img,.ocx-gallery-grid img:first-child:nth-last-child(2),.ocx-gallery-grid img:first-child:nth-last-child(2)~img { grid-column:1/-1; block-size:280px; }
    .ocx-gallery-grid img:first-child:nth-last-child(1){block-size:360px}
    .ocx-cta-box,.ocx-form-footer { align-items:flex-start; flex-direction:column; }
    .ocx-form-footer .ocx-btn { inline-size:100%; }
    .ocx-form-success { grid-template-columns:1fr; text-align:center; }
    .ocx-checkmark { margin-inline:auto; }
  }

  @media (max-width:520px) {
    .ocx-scroll-hero { min-block-size:260svh; }
    .ocx-scroll-hero-sticky { block-size:calc(100svh - var(--ocx-header-h,68px)); min-block-size:520px; }
    .ocx-scroll-hero-content { padding-inline:14px; }
    .ocx-scroll-hero .ocx-hero-copy { padding:20px; background:color-mix(in srgb,var(--ocx-bg-elevated) 76%,transparent); }
    .ocx-hero-story { min-block-size:310px; }
    .ocx-hero-story-panel h1 { font-size:clamp(2.25rem,11vw,3.8rem); }
    .ocx-hero-footer { align-items:flex-start; flex-direction:column; gap:12px; }
    .ocx-scroll-hero .ocx-hero-proof span:last-child { display:none; }
    .ocx-actions { align-items:stretch; flex-direction:column; }
    .ocx-actions .ocx-btn { inline-size:100%; }
    .ocx-hero-video-shell { aspect-ratio:1/1; }
    .ocx-hero-proof { gap:6px; }
    .ocx-product-card,.ocx-form,.ocx-cta-box { border-radius:22px; }
    .ocx-product-grid { --ocx-product-card-min:260px; }
    .ocx-team-avatar-wrap { inline-size:116px!important; block-size:116px!important; flex-basis:116px; }
  }

  @media (prefers-reduced-motion:reduce) {
    .ocx-scroll-hero { min-block-size:auto; }
    .ocx-scroll-hero-sticky { position:relative; inset-block-start:auto; block-size:auto; min-block-size:calc(100svh - var(--ocx-header-h,76px)); }
    .ocx-hero-story-panel { opacity:0; visibility:hidden; transform:none; transition:none; }
    .ocx-hero-story-panel:first-child { opacity:1; visibility:visible; }
    .ocx-product-card,.ocx-product-card img,.ocx-team-card,.ocx-team-photo,.ocx-scale-path article::after,.ocx-form * { transition:none!important; animation:none!important; }
    .ocx-ecosystem-visual { transform:none; }
    .ocx-hero-video-shell { --ocx-hero-video-shift:0px!important; --ocx-hero-video-scale:1!important; will-change:auto; }
    [data-ocx-reveal] { opacity:1; transform:none; }
  }

  @media (forced-colors:active) {
    .ocx-product-card,.ocx-feature-tile,.ocx-tier-card,.ocx-form,.ocx-summary-card { border:1px solid CanvasText; }
    .ocx-check-list li::before,.ocx-kicker::before { forced-color-adjust:auto; }
  }
}

/* v2.7 document overflow guard */
.ocx-scroll-hero,
.ocx-scroll-hero-sticky,
.ocx-scroll-hero-media,
.ocx-scroll-hero-content,
.ocx-scroll-hero .ocx-container {
  max-inline-size:100%;
  min-inline-size:0;
}
.ocx-scroll-hero-media { overflow:hidden; }

/* v2.5 direct-contact card: separate, readable contact actions */
.ocx-quick-contact>a>span {
  display:grid;
  gap:3px;
  min-inline-size:0;
  max-inline-size:calc(100% - 42px);
}
.ocx-quick-contact>a small {
  color:var(--ocx-muted);
  font-size:.64rem;
  font-weight:850;
  letter-spacing:.08em;
  line-height:1.2;
  text-transform:uppercase;
}
.ocx-quick-contact>a strong {
  display:block;
  min-inline-size:0;
  color:var(--ocx-brand);
  font-size:clamp(.78rem,1.15vw,.92rem);
  line-height:1.35;
  overflow-wrap:anywhere;
  word-break:break-word;
}
@media (max-width:420px) {
  .ocx-quick-contact>a { padding:13px 14px; gap:10px; }
  .ocx-quick-contact>a::after { inline-size:25px; block-size:25px; }
}

/* ========================================================================== 
   v2.7 viewport containment — loaded as a new cache-busting asset.
   The scroll film remains visually full-screen, while the media is completely
   removed from document sizing so it cannot create horizontal overflow.
   ========================================================================== */
html,
body {
  inline-size:100% !important;
  max-inline-size:100% !important;
  overflow-x:hidden !important;
  overscroll-behavior-inline:none;
}
@supports (overflow:clip) {
  html,
  body { overflow-x:clip !important; }
}
body.ocx-site,
body.ocx-site .ocx-header,
body.ocx-site .ocx-main,
body.ocx-site .ocx-footer,
body.ocx-site .ocx-main > *,
body.ocx-site .entry-content,
body.ocx-site .wp-block-post-content,
body.ocx-site .wp-site-blocks {
  inline-size:100% !important;
  max-inline-size:100% !important;
  min-inline-size:0 !important;
  box-sizing:border-box !important;
}
body.ocx-site .ocx-main,
body.ocx-site .ocx-main > *,
body.ocx-site .entry-content,
body.ocx-site .wp-block-post-content {
  margin-inline:0 !important;
  overflow-x:clip !important;
}

body.ocx-site .ocx-scroll-hero {
  position:relative !important;
  inset-inline:auto !important;
  inline-size:100% !important;
  max-inline-size:100% !important;
  min-inline-size:0 !important;
  margin-inline:0 !important;
  overflow:hidden !important;
  overflow:clip !important;
  contain:layout paint;
  touch-action:pan-y;
}
body.ocx-site .ocx-scroll-hero-sticky {
  position:sticky;
  inset-inline:0 !important;
  inline-size:100% !important;
  max-inline-size:100% !important;
  min-inline-size:0 !important;
  margin-inline:0 !important;
  overflow:hidden !important;
  overflow:clip !important;
  contain:layout paint;
}
body.ocx-site .ocx-scroll-hero-media,
body.ocx-site .ocx-scroll-hero-shade {
  position:absolute !important;
  inset:0 !important;
  inline-size:auto !important;
  block-size:auto !important;
  min-inline-size:0 !important;
  max-inline-size:none !important;
  margin:0 !important;
  overflow:hidden !important;
  overflow:clip !important;
  contain:strict;
}
body.ocx-site .ocx-scroll-hero-video {
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  inline-size:100% !important;
  block-size:100% !important;
  min-inline-size:0 !important;
  max-inline-size:none !important;
  min-block-size:0 !important;
  max-block-size:none !important;
  margin:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
  transform-origin:center !important;
  contain:size layout paint style;
}
body.ocx-site .ocx-scroll-hero-content.ocx-container {
  position:relative !important;
  inline-size:min(var(--ocx-container,1180px),calc(100% - 40px)) !important;
  max-inline-size:calc(100% - 40px) !important;
  min-inline-size:0 !important;
  margin-inline:auto !important;
  padding-inline:0 !important;
}
body.ocx-site .ocx-scroll-hero .ocx-hero-copy,
body.ocx-site .ocx-hero-story,
body.ocx-site .ocx-hero-story-panel,
body.ocx-site .ocx-hero-story-panel :where(h1,p),
body.ocx-site .ocx-actions,
body.ocx-site .ocx-hero-footer {
  min-inline-size:0 !important;
  max-inline-size:100% !important;
}
body.ocx-site .ocx-hero-story-panel :where(h1,p) {
  overflow-wrap:anywhere;
}

/* Prevent hidden dropdowns, embeds and legacy blocks from widening the root. */
body.ocx-site :where(img,video,canvas,svg,iframe,model-viewer) {
  max-inline-size:100% !important;
}
body.ocx-site :where(.alignfull,.alignwide) {
  max-inline-size:100% !important;
  margin-inline:0 !important;
}

@media (max-width:620px) {
  body.ocx-site .ocx-scroll-hero-content.ocx-container {
    inline-size:calc(100% - 28px) !important;
    max-inline-size:calc(100% - 28px) !important;
  }
}