/* Palette sources: styles.css :root and .app-preview-*-dark;
   home-skill-agent-method-preview.html .artboard, .skill-stack and Skill callouts.
   Reuse these existing site colours; emphasis applies to keywords, not whole titles. */
body.products-page .product-engine-section { background:var(--page); }
.product-engine-section > .container { width:min(var(--wide),calc(100% - 48px)); }
.product-engine-section .section-title { max-width:1240px; }
.product-engine-board { --engine-blue:#1d4ed8; --engine-green:#047857; --engine-orange:#c2410c; --engine-purple:#6d28d9; display:grid; grid-template-rows:minmax(0,1fr) 136px; gap:18px; aspect-ratio:2360 / 1320; margin-top:68px; padding:24px; border:1px solid var(--line); border-radius:24px; background:linear-gradient(180deg,var(--page),var(--paper-warm)); box-shadow:0 20px 60px rgba(33,29,23,.08); }
.engine-cycle-core { display:grid; grid-template-rows:minmax(0,1fr) 52px; gap:16px; min-height:0; padding:2px 10px 0; }
.engine-loop-map { position:relative; display:grid; grid-template-columns:320px minmax(224px,1fr) 320px; grid-template-rows:max-content minmax(80px,1fr) max-content; column-gap:40px; width:100%; min-height:0; margin-inline:auto; }
.engine-loop-center { position:relative; grid-column:2; grid-row:1/4; display:flex; flex-direction:column; align-items:center; justify-content:center; align-self:center; justify-self:center; width:224px; height:224px; border:1px solid rgba(255,255,255,.14); border-radius:50%; background:#17202c; box-shadow:0 20px 60px rgba(33,29,23,.08); text-align:center; }
.engine-loop-kicker { color:#b7c7d7; font-size:12px; font-weight:900; letter-spacing:.04em; }
.engine-loop-center h3 { margin:15px 0 10px; color:#f8f6f0; font-family:var(--display); font-size:29px; line-height:1.35; white-space:nowrap; }
.engine-loop-center h3 span { display:inline; }
.engine-loop-center p { margin:0; color:var(--white); font-size:12px; line-height:1.6; }
.engine-loop-output { display:block; margin-top:17px; padding:7px 11px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(255,255,255,.08); color:#16d879; font-size:10.5px; font-weight:750; }
.engine-cycle-steps { display:contents; margin:0; padding:0; list-style:none; }
.engine-cycle-step { justify-self:center; align-self:start; width:286px; max-width:100%; min-width:0; padding:14px 18px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(135deg,var(--blue-soft),rgba(255,255,255,.76)); text-align:left; }
.engine-cycle-step-01 { --engine-accent:var(--engine-blue); --engine-tint:var(--blue-soft); grid-column:1; grid-row:1; }
.engine-cycle-step-02 { --engine-accent:var(--engine-purple); --engine-tint:var(--purple-soft); grid-column:3; grid-row:1; }
.engine-cycle-step-03 { --engine-accent:var(--engine-orange); --engine-tint:var(--orange-soft); grid-column:3; grid-row:3; }
.engine-cycle-step-04 { --engine-accent:var(--engine-green); --engine-tint:var(--green-soft); grid-column:1; grid-row:3; }
.engine-cycle-step-02,.engine-cycle-step-03 { text-align:right; }
.engine-cycle-step-03,.engine-cycle-step-04 { align-self:end; }
.engine-cycle-label { display:inline-flex; align-items:center; gap:8px; color:var(--muted-2); font-size:12px; font-weight:900; line-height:1.5; letter-spacing:.04em; }
.engine-cycle-label em { padding:3px 8px; border-radius:999px; background:var(--engine-tint); color:var(--engine-accent); font-size:11px; font-style:normal; }
.engine-cycle-step h4 { margin:8px 0 6px; color:var(--ink); font-family:var(--display); font-size:23px; line-height:1.35; }
.engine-cycle-step p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
.product-engine-board .engine-key { color:var(--engine-accent); }
/* Connectors occupy their own grid lanes, with the same fine lines and dots as Skill. */
.engine-flow-link { position:relative; display:block; align-self:center; justify-self:center; color:rgba(43,105,246,.44); background:currentColor; border-radius:999px; }
.engine-flow-link::before { content:''; position:absolute; width:5px; height:5px; border-radius:50%; background:currentColor; }
.engine-flow-link::after { content:''; position:absolute; width:6px; height:6px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; }
.engine-flow-forward,.engine-flow-return { grid-column:2; width:100%; height:1.5px; }
.engine-flow-forward { grid-row:1; align-self:start; margin-top:26px; }
.engine-flow-forward::before { left:0; top:-1.75px; }
.engine-flow-forward::after { right:0; top:-2.3px; transform:rotate(45deg); }
.engine-flow-return { grid-row:3; align-self:end; margin-bottom:25px; }
.engine-flow-return::before { right:0; top:-1.75px; }
.engine-flow-return::after { left:0; top:-2.3px; transform:rotate(-135deg); }
.engine-flow-up,.engine-flow-down { grid-row:2; width:1.5px; height:46px; }
.engine-flow-down { grid-column:3; }
.engine-flow-down::before { top:0; left:-1.75px; }
.engine-flow-down::after { bottom:0; left:-2.3px; transform:rotate(135deg); }
.engine-flow-up { grid-column:1; }
.engine-flow-up::before { bottom:0; left:-1.75px; }
.engine-flow-up::after { top:0; left:-2.3px; transform:rotate(-45deg); }
.engine-adoption-rule { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:10px 0 0; border-top:1px solid var(--line); }
.engine-adoption-rule h4 { margin:0 0 4px; color:var(--ink-soft); font-family:var(--body); font-size:14px; font-weight:650; line-height:1.5; }
.engine-adoption-rule p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.engine-adoption-checks > div { display:flex; justify-content:flex-end; gap:7px; margin-bottom:5px; }
.engine-adoption-checks span { padding:4px 10px; border-radius:999px; color:var(--engine-green); background:var(--green-soft); font-size:11px; font-weight:800; line-height:1.4; }
.engine-adoption-checks span:nth-child(2) { color:var(--engine-blue); background:var(--blue-soft); }
.engine-adoption-checks span:nth-child(3) { color:var(--engine-orange); background:var(--orange-soft); }
.engine-app-points { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; min-height:0; }
.engine-app-point { min-width:0; padding:16px 18px; border:1px solid var(--black); border-radius:18px; background:var(--black); }
.engine-app-point[data-engine-business="growth"] { --app-wash:var(--blue-soft); --app-ink:var(--engine-blue); --engine-accent:#86acff; }
.engine-app-point[data-engine-business="fran"] { --app-wash:var(--green-soft); --app-ink:var(--engine-green); --engine-accent:#64d59c; }
.engine-app-point[data-engine-business="ops"] { --app-wash:var(--orange-soft); --app-ink:var(--engine-orange); --engine-accent:#f5bf72; }
.engine-app-point[data-engine-business="train"] { --app-wash:var(--purple-soft); --app-ink:var(--engine-purple); --engine-accent:var(--purple-soft); }
.engine-app-name { display:flex; align-items:center; justify-content:space-between; gap:9px; color:var(--app-ink); font-size:12px; font-weight:900; line-height:1.5; white-space:nowrap; }
.engine-app-label { padding:3px 9px; border-radius:999px; background:var(--app-wash); }
.engine-app-name i { order:1; flex:0 0 8px; width:8px; height:8px; margin-right:5px; border-radius:50%; background:var(--app-color); box-shadow:0 0 0 5px var(--app-wash); }
.engine-app-point h4 { margin:10px 0 8px; color:#f8f6f0; font-family:var(--display); font-size:21px; line-height:1.35; white-space:nowrap; }
.engine-app-point p { margin:0; color:#c9c5bd; font-size:12px; line-height:1.6; white-space:nowrap; }
@media (min-width:1081px) and (max-width:1230px) {
 .product-engine-board { grid-template-rows:minmax(0,1fr) 124px; padding:18px; gap:16px; }
 .engine-cycle-core { grid-template-rows:minmax(0,1fr) 46px; padding:0 8px; gap:14px; }
 .engine-loop-map { grid-template-columns:265px minmax(196px,1fr) 265px; column-gap:34px; grid-template-rows:max-content minmax(64px,1fr) max-content; }
 .engine-loop-center { width:196px; height:196px; }
 .engine-loop-center h3 { font-size:25px; margin:11px 0 8px; }
 .engine-loop-kicker { font-size:11px; }
 .engine-loop-center p { font-size:10.5px; }
 .engine-loop-output { margin-top:13px; padding:6px 8px; font-size:9px; }
 .engine-cycle-step { width:238px; padding:12px 14px; }
 .engine-cycle-label { font-size:11px; }
 .engine-cycle-step h4 { margin:8px 0 6px; font-size:21px; }
 .engine-cycle-step p { font-size:12px; }
 .engine-flow-forward { margin-top:24px; }
 .engine-flow-return { margin-bottom:21px; }
 .engine-flow-up,.engine-flow-down { height:40px; }
 .engine-adoption-rule { padding:8px 0 0; }
 .engine-adoption-rule h4 { font-size:13px; }
 .engine-adoption-rule p { font-size:11px; }
 .engine-app-points { gap:12px; }
 .engine-app-point { padding:16px 18px; }
 .engine-app-point h4 { font-size:19px; margin:9px 0 7px; }
 .engine-app-point p { font-size:11px; }
}
@media (max-width:1080px) {
 .product-engine-board { aspect-ratio:auto; grid-template-rows:auto auto; padding:20px; gap:18px; }
 .engine-cycle-core { grid-template-rows:390px auto; padding:6px; gap:20px; }
 .engine-loop-map { grid-template-columns:minmax(0,1fr) 212px minmax(0,1fr); column-gap:24px; grid-template-rows:minmax(0,1fr) 64px minmax(0,1fr); }
 .engine-loop-center { width:190px; height:190px; }
 .engine-loop-center h3 { font-size:24px; }
 .engine-loop-kicker { font-size:11px; }
 .engine-loop-center p { font-size:10px; }
 .engine-loop-output { margin-top:12px; padding:6px 8px; font-size:9px; }
 .engine-cycle-step { width:286px; padding:14px 17px; }
 .engine-cycle-step h4 { font-size:21px; }
 .engine-cycle-step p { font-size:12px; }
 .engine-cycle-step p br { display:none; }
 .engine-adoption-rule h4 { font-size:14px; }
 .engine-app-points { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .engine-app-point { padding:20px; }
}
@media (max-width:850px) {
 .engine-cycle-core { grid-template-rows:auto auto; padding:0; gap:22px; }
 .engine-loop-map { grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr); grid-template-rows:auto auto 52px auto; column-gap:0; }
 .engine-loop-center { grid-column:1/-1; grid-row:1; width:216px; height:216px; margin:0 0 28px; }
 .engine-loop-center h3 { font-size:28px; }
 .engine-loop-center p { font-size:12px; }
 .engine-loop-output { font-size:10px; }
 .engine-cycle-step-01 { grid-column:1; grid-row:2; }
 .engine-cycle-step-02 { grid-column:3; grid-row:2; }
 .engine-cycle-step-03 { grid-column:3; grid-row:4; }
 .engine-cycle-step-04 { grid-column:1; grid-row:4; }
 .engine-flow-forward { grid-column:2; grid-row:2; width:16px; align-self:center; margin:0; }
 .engine-flow-return { grid-column:2; grid-row:4; width:16px; align-self:center; margin:0; }
 .engine-flow-up,.engine-flow-down { grid-row:3; height:26px; }
 .engine-adoption-rule { display:block; padding:16px 0 0; }
 .engine-adoption-rule h4 { font-size:14px; }
 .engine-adoption-checks { margin-top:14px; }
 .engine-adoption-checks > div { justify-content:flex-start; margin-bottom:8px; }
}
@media (max-width:600px) {
 .product-engine-board { margin-top:34px; padding:14px; gap:18px; }
 .engine-cycle-core { padding:6px 0 0; }
 .engine-loop-map { grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); }
 .engine-loop-center { width:206px; height:206px; }
 .engine-loop-center h3 { font-size:27px; }
 .engine-cycle-step { padding:13px 12px; border-radius:16px; }
 .engine-cycle-label { gap:5px; font-size:11px; }
 .engine-cycle-label em { font-size:10px; }
 .engine-cycle-step h4 { font-size:20px; line-height:1.3; }
 .engine-cycle-step p { font-size:12px; line-height:1.6; }
 .engine-app-points { grid-template-columns:1fr; gap:16px; }
 .engine-app-point { padding:18px; }
 .engine-adoption-rule { padding:14px 0 0; }
 .engine-adoption-rule h4 { font-size:13px; }
}
@media (max-width:360px) {
 .engine-cycle-core { padding-inline:0; }
 .engine-loop-map { grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); }
 .engine-cycle-step { padding:12px 10px; }
 .engine-cycle-step h4 { font-size:17px; }
 .engine-cycle-step p { font-size:11px; }
 .engine-app-point p { font-size:11px; white-space:normal; }
 .engine-adoption-checks > div { gap:4px; }
 .engine-adoption-checks span { padding:4px 7px; font-size:10px; }
}