@scope (.design-off-grid) {
    .hero { min-height: auto; color: var(--white); background: radial-gradient(circle at 12% 18%, rgba(188,232,117,.22), transparent 28%), linear-gradient(135deg,#073e2d,#105d43 72%); }
    .hero-grid { grid-template-columns: .95fr 1.05fr; }
    .hero-media { display: block; }
    .breadcrumb, .hero-copy > p { color: rgba(255,255,255,.76); }
    .tag { color: var(--white); border-color: rgba(255,255,255,.28); background: rgba(7,62,45,.45); }
    .btn-secondary { color: var(--dark); }
    .autonomy-board { padding: 38px 0; background: var(--white); }
    .autonomy-grid { display: grid; grid-template-columns: .8fr repeat(3,1fr); gap: 12px; }
    .autonomy-intro, .autonomy-risk { padding: 22px; border-radius: 16px; }
    .autonomy-intro { color: var(--white); background: var(--dark); }
    .autonomy-intro strong, .autonomy-intro span, .autonomy-risk strong, .autonomy-risk span { display: block; }
    .autonomy-intro strong { margin-bottom: 8px; font-size: 1.2rem; }
    .autonomy-intro span { color: rgba(255,255,255,.67); font-size: .75rem; }
    .autonomy-risk { border: 1px solid var(--line); background: var(--soft); }
    .autonomy-risk strong { margin-bottom: 8px; color: var(--green); font-size: .78rem; }
    .autonomy-risk span { color: var(--muted); font-size: .73rem; }
    .scenario-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .scenario-card img { height: 220px; }
    .scenario-copy .icon { margin: 0 0 17px; border: 0; }
    @media(max-width:700px){.autonomy-grid,.scenario-grid{grid-template-columns:1fr}}
  }