/* Scoped Design Agent demo — embedded in aOps mission section */
.aops-demo {
    --ink: #262626;
    --muted: #a3a3a1;
    --line: #e7e7e5;
    --lav: #efefff;
    --violet: #6464ff;
    --paper: #fcfcfa;
    position: relative;
    width: 100%;
    font-family: "Bagoss", sans-serif;
    color: var(--ink);
}

.aops-demo *,
.aops-demo *::before,
.aops-demo *::after {
    box-sizing: border-box;
}


      
      
      
      .aops-demo .stage{ position:relative; width:min(78vw,78vh,820px); aspect-ratio:1; height:auto; min-height:0; overflow:hidden; background:var(--paper); box-shadow:0 20px 70px #26262612; isolation:isolate; container-type:inline-size; }
      .aops-demo .screen{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; opacity:0; pointer-events:none; transform:scale(.985); transition:opacity .64s ease-in-out, transform .64s cubic-bezier(.22,1,.36,1); }
      .aops-demo .screen.active{ opacity:1; pointer-events:auto; transform:scale(1); }
      .aops-demo .screen.active .headline, .aops-demo .screen.active .question{ animation:aops-soft-enter .7s cubic-bezier(.22,1,.36,1) both; }
      .aops-demo .screen.active .hero-button, .aops-demo .screen.active .card, .aops-demo .screen.active .workflow, .aops-demo .screen.active .deploy button{ animation:aops-soft-enter .8s .12s cubic-bezier(.22,1,.36,1) both; }
      @keyframes aops-soft-enter { from { opacity:0; transform:translateY(1.4cqw); } to { opacity:1; transform:translateY(0); } }
      .aops-demo .home{ justify-content:center; }
      .aops-demo .headline{ position:absolute; top:29.2cqw; margin:0; font-size:5.35cqw; line-height:1.1; text-align:center; letter-spacing:-.065em; font-weight:500; }
      .aops-demo .headline span{ display:block; color:var(--muted); font-weight:400; }
      .aops-demo .hero-button, .aops-demo .next{ background:var(--violet); border:0; color:white; font:500 25px/1 "Bagoss", sans-serif; cursor:pointer; box-shadow:none; transition:transform .2s, background .2s; }
      .aops-demo .hero-button{ position:absolute; top:59.2cqw; width:32.22cqw; height:9.26cqw; font-size:3.7cqw; }
      .aops-demo .hero-button.hovered, .aops-demo .next.hovered{ background:var(--violet); box-shadow:0 .45cqw 1.1cqw #6464ff38; transform:translateY(-.18cqw); }
      .aops-demo button.pressed{ transform:scale(.97) !important; }
      .aops-demo button:hover{ transform:translateY(-2px); background:var(--violet); }
      .aops-demo .flow{ padding-top:19.8cqw; }
      .aops-demo .question{ margin:0 0 7.7cqw; font-size:4.15cqw; letter-spacing:-.06em; line-height:1.1; font-weight:400; }
      .aops-demo .card{ width:88.89cqw; height:37.5cqw; background:var(--paper); border:1px solid #e9e9e7; box-shadow:0 .19cqw .19cqw #26262616; }
      .aops-demo .next{ position:absolute; right:5.55cqw; top:74.45cqw; width:13.52cqw; height:6.48cqw; font-size:2.22cqw; }
      .aops-demo .site-card{ display:grid; grid-template-columns:29.2% 1fr; }
      .aops-demo .tabs{ border-right:.19cqw solid #dedee0; padding:3.52cqw 2.22cqw; }
      .aops-demo .tab{ height:6.3cqw; display:flex; align-items:center; gap:1.94cqw; padding:0 2.22cqw; font-size:2.31cqw; font-weight:600; }
      .aops-demo .tab.active{ color:var(--violet); background:var(--lav); }
      .aops-demo .ico{ width:2.59cqw; height:2.87cqw; color:var(--violet); flex:none; font-size:2.87cqw; line-height:1; }
      .aops-demo .site-list{ padding:3.33cqw 4.44cqw 2.04cqw 6.48cqw; }
      .aops-demo .site{ height:5.19cqw; display:flex; align-items:center; gap:2.22cqw; padding-left:2.13cqw; font-size:2.31cqw; color:#4a4a4e; }
      .aops-demo .site.hovered{ background:#f7f7fc; }.aops-demo .site.selected.hovered{ background:#e8e7ff; }
      .aops-demo .site.selected{ background:var(--lav); border-left:.19cqw solid #7770ff; padding-left:1.94cqw; }
      .aops-demo .site.just-picked{ animation:aops-selected .42s ease-in-out both; }
      @keyframes aops-selected { 0% { background:var(--paper); } 55% { background:#ededff; } 100% { background:var(--lav); } }
      .aops-demo .check{ width:1.94cqw; height:1.94cqw; border:1px solid #e6e6e8; border-radius:.37cqw; display:grid; place-items:center; color:var(--violet); font-size:1.67cqw; }
      .aops-demo .selected .check{ border-color:var(--violet); }
      .aops-demo .model-card{ width:71.85cqw; height:37.5cqw; padding:4.35cqw 4.44cqw; position:relative; }
      .aops-demo .label{ font-weight:600; font-size:2.22cqw; margin-bottom:2.41cqw; }
      .aops-demo .select{ width:38.52cqw; height:5cqw; border:1px solid #dedee2; padding:0 2.04cqw; display:flex; align-items:center; justify-content:space-between; font-size:2.31cqw; color:#505055; margin-bottom:4.54cqw; transition:border-color .18s ease, box-shadow .18s ease; cursor:pointer; }.aops-demo .select.picked, .aops-demo .select.hovered{ border-color:var(--violet); box-shadow:0 0 0 .28cqw #6464ff18; }
      .aops-demo .select-menu{ position:absolute; top:14.35cqw; left:4.44cqw; width:38.52cqw; padding:.74cqw 0; background:var(--paper); border:1px solid #e4e4e8; box-shadow:0 .65cqw 1.85cqw #2626261c; z-index:8; opacity:0; transform:translateY(-.65cqw) scale(.98); pointer-events:none; transition:opacity .18s ease, transform .24s cubic-bezier(.22,1,.36,1); }.aops-demo .select-menu.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }.aops-demo .model-option{ display:block; width:100%; border:0; background:transparent; color:#47474c; text-align:left; padding:1.3cqw 2.04cqw; font:400 2.04cqw/1 "Bagoss", sans-serif; cursor:pointer; transition:background .16s ease,color .16s ease; }.aops-demo .model-option:hover, .aops-demo .model-option.hovered, .aops-demo .model-option.chosen{ background:var(--lav); color:var(--violet); }
      .aops-demo .chev{ color:#ddd; font-size:2.59cqw; transform:rotate(90deg); }.aops-demo .slider{ position:relative; height:7.96cqw; display:flex; justify-content:space-between; }.aops-demo .rail{ position:absolute; height:.19cqw; background:#ddd; left:1.48cqw; right:1.48cqw; top:2.5cqw; }.aops-demo .fill{ position:absolute; height:.19cqw; background:var(--violet); left:1.48cqw; width:0; top:2.5cqw; transition:width .48s cubic-bezier(.22,1,.36,1); }.aops-demo .point{ z-index:1; width:1.48cqw; height:1.48cqw; margin-top:1.85cqw; border:0; padding:0; border-radius:50%; background:#ddd; position:relative; cursor:pointer; transition:box-shadow .16s ease; }.aops-demo .point.hovered{ box-shadow:0 0 0 .37cqw #6464ff20; }.aops-demo .point.active{ background:var(--violet); }.aops-demo .point.current{ background:var(--paper); border:.19cqw solid var(--violet); width:1.94cqw; height:1.94cqw; margin-top:1.57cqw; }.aops-demo .point span{ position:absolute; top:2.78cqw; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:1.67cqw; }
      .aops-demo .action{ padding-top:19.8cqw; }.aops-demo .action .question{ margin-bottom:11.8cqw; }.aops-demo .workflow{ position:relative; width:64.81cqw; height:30.09cqw; transform:scale(1); }
      .aops-demo .line{ position:absolute; width:.19cqw; background:#e5e5e7; left:50%; transform:translateX(-50%) scaleY(1); transform-origin:top; top:5cqw; height:13.7cqw; transition:transform .38s cubic-bezier(.22,1,.36,1); }
      .aops-demo .branch{ position:absolute; height:3.15cqw; width:31.48cqw; left:50%; transform:translateX(-50%) scaleX(1); transform-origin:center; top:18.7cqw; border:.19cqw solid #e5e5e7; border-bottom:0; transition:transform .38s cubic-bezier(.22,1,.36,1); }
      .aops-demo .node{ position:absolute; height:5.09cqw; background:var(--paper); border:1px solid #e9e9eb; box-shadow:0 .19cqw .19cqw #26262612; display:flex; align-items:center; justify-content:center; gap:1.11cqw; font-size:1.85cqw; white-space:nowrap; }
      .aops-demo .workflow.building .node:not(.add){ display:none; }
      .aops-demo .workflow.building .node.revealed{ display:flex; }
      .aops-demo .workflow.building .line{ transform:translateX(-50%) scaleY(0); }.aops-demo .workflow.building .branch{ transform:translateX(-50%) scaleX(0); }.aops-demo .workflow.building.has-reboot .line{ transform:translateX(-50%) scaleY(1); }.aops-demo .workflow.building.has-resolution .branch{ transform:translateX(-50%) scaleX(1); }
      .aops-demo .node strong{ font-weight:700;}.aops-demo .reboot{ width:29.81cqw; left:17.5cqw; top:0; }.aops-demo .resolution{ width:31.48cqw; left:16.67cqw; top:10.83cqw; }.aops-demo .ticket{ width:34.07cqw; left:0; top:21.67cqw; }.aops-demo .add{ width:16.85cqw; left:40cqw; top:21.67cqw; border:1px dashed var(--violet); color:var(--violet); box-shadow:none; transition:background .2s ease, color .2s ease, box-shadow .2s ease; }.aops-demo .add.hovered{ background:#f5f4ff; box-shadow:0 0 0 .28cqw #6464ff18; }.aops-demo .add.placement-one{ left:23.98cqw; top:0; }.aops-demo .add.placement-two{ left:23.985cqw; top:10.83cqw; }.aops-demo .add.placement-three{ left:8.61cqw; top:21.67cqw; }.aops-demo .add.placement-final{ left:40cqw; top:21.67cqw; }
      .aops-demo .deploy{ justify-content:center; }.aops-demo .deploy button{ position:relative; isolation:isolate; overflow:hidden; width:32.22cqw; height:9.26cqw; background:var(--paper); border:.19cqw solid var(--violet); color:var(--violet); font:500 3.7cqw/1 "Bagoss", sans-serif; cursor:pointer; }.aops-demo .deploy button::before{ content:""; position:absolute; inset:auto 0 0; z-index:0; height:0; background:var(--violet); transition:height 1s cubic-bezier(.22,1,.36,1); }.aops-demo .deploy button span{ position:relative; z-index:1; }.aops-demo .deploy button.deployed{ color:var(--paper); }.aops-demo .deploy button.loading::before, .aops-demo .deploy button.deployed::before{ height:100%; }
      .aops-demo .deployed-note{ position:absolute; top:62.5cqw; color:var(--violet); font-size:1.94cqw; opacity:0; transform:translateY(-.74cqw); transition:.3s ease; }.aops-demo .deployed-note.show{ opacity:1; transform:translateY(0); }
      .aops-demo .footer{ position:absolute; left:0; bottom:0; height:5.83cqw; width:100%; background:var(--ink); color:var(--paper); z-index:5; display:flex; align-items:center; }.aops-demo .dot{ width:1.67cqw; height:1.67cqw; border-radius:50%; background:var(--paper); margin-left:3.61cqw; }.aops-demo .brand{ margin-left:auto; margin-right:2.87cqw; font-size:2.87cqw; font-weight:600; letter-spacing:-.06em; }.aops-demo .count{ position:absolute; bottom:2.41cqw; left:50%; transform:translateX(-50%); color:#ddd; font-size:1.67cqw; z-index:4; }
      .aops-demo .cursor{ position:absolute; z-index:20; left:50%; top:59.2cqw; width:5.37cqw; height:6.67cqw; opacity:0; filter:drop-shadow(0 .09cqw 0 var(--paper)) drop-shadow(0 0 .09cqw var(--paper)); pointer-events:none; transform-origin:10% 8%; transition:left .72s cubic-bezier(.22,.8,.2,1),top .72s cubic-bezier(.22,.8,.2,1),transform .14s ease-in-out,opacity .16s ease; will-change:left,top,transform; }
      .aops-demo .cursor.moving{ transform:translate(-.38cqw,.22cqw) rotate(-3deg); }.aops-demo .cursor.click{ transform:scale(.88); }.aops-demo .cursor path{ fill:var(--ink); stroke:var(--paper); stroke-width:3; stroke-linejoin:round; }
      .aops-demo .target-pulse{ animation:aops-target-pulse .34s ease-out; } @keyframes aops-target-pulse { 45% { box-shadow:0 0 0 .55cqw #6464ff33; } }
      .aops-demo .pulse{ animation:aops-pulse .4s ease; } @keyframes aops-pulse { 50% { transform:scale(.96); } }
      .aops-demo .logo-interlude{ position:absolute; inset:0; z-index:30; display:grid; place-items:center; background:var(--paper); opacity:0; pointer-events:none; transition:opacity .5s ease-in-out; }.aops-demo .logo-interlude.visible{ opacity:1; }.aops-demo .logo-interlude img{ width:30%; height:auto; transform:scale(.96); transition:transform .5s cubic-bezier(.22,1,.36,1); }.aops-demo .logo-interlude.visible img{ transform:scale(1); }
    

/* Embed layout overrides */
.aops-demo .stage {
    width: 100% !important;
    max-width: 100%;
    aspect-ratio: 1;
    height: auto;
    min-height: 0;
    margin: 0 auto;
    box-shadow: 0 16px 48px rgba(38, 38, 38, 0.08);
    border: 1px solid #ececec;
    pointer-events: none;
}

.aops-demo button {
    font-family: "Bagoss", sans-serif;
}

.product-mission-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.product-mission-copy {
    text-align: left;
    max-width: 520px;
}

.product-mission-copy .product-mission-title,
.product-mission-copy .product-mission-lead,
.product-mission-copy p {
    text-align: left;
}

.product-mission-actions {
    margin-top: 28px;
    display: flex;
    justify-content: flex-start;
}

.product-mission-copy .product-mission-title {
    margin-bottom: 20px;
}

.product-mission-copy .product-mission-content {
    max-width: none;
}

.product-mission-visual {
    width: 100%;
    min-width: 0;
}

@media (max-width: 900px) {
    .product-mission-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .product-mission-copy {
        max-width: none;
    }

    .aops-demo .stage {
        width: min(100%, 520px);
    }
}