
/* P189 — Engineering Content & UX Authority */
body:has(main .p28-hero) .p28-hero{position:relative;overflow:hidden;padding-top:clamp(4.5rem,8vw,8rem);padding-bottom:clamp(3.5rem,6vw,6rem)}
body:has(main .p28-hero) .p28-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,rgba(79,137,126,.14),transparent 36%),linear-gradient(180deg,rgba(255,255,255,.02),transparent 60%);pointer-events:none}
body:has(main .p28-hero) .p28-hero-grid{position:relative;align-items:center;gap:clamp(2.5rem,5vw,5.5rem)}
body:has(main .p28-hero) .p28-title{max-width:13ch;font-size:clamp(3.2rem,6.3vw,6.8rem);line-height:.92;letter-spacing:-.055em;text-wrap:balance}
html[dir="rtl"] body:has(main .p28-hero) .p28-title{letter-spacing:-.025em;line-height:1.02}
body:has(main .p28-hero) .p28-lead{max-width:58ch;font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.85}
body:has(main .p28-hero) .p28-visual{border-radius:28px;box-shadow:0 28px 70px rgba(5,22,21,.2);isolation:isolate}
body:has(main .p28-hero) .p28-visual img{aspect-ratio:16/10;object-fit:cover}
body:has(main .p28-hero) .p28-visual-card{left:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);padding:1.25rem 1.4rem;border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(18px);background:rgba(8,30,29,.88)}
body:has(main .p28-hero) .p28-visual-card strong,body:has(main .p28-hero) .p28-visual-card p{color:#f5faf8!important}
.p189-outcomes{padding:clamp(2.8rem,5vw,5rem) 0;background:var(--surface,#f5f7f6);border-block:1px solid rgba(18,55,51,.09)}
.p189-outcomes__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);gap:2rem;align-items:end;margin-bottom:2rem}
.p189-outcomes__head h2{font-size:clamp(2rem,3.7vw,4rem);line-height:1.02;letter-spacing:-.045em;max-width:15ch;margin:.5rem 0 0;color:var(--ink,#102725)}
html[dir="rtl"] .p189-outcomes__head h2{letter-spacing:-.02em;line-height:1.12}
.p189-outcomes__head p{margin:0;color:var(--muted,#5e716e);line-height:1.8}
.p189-outcomes__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.p189-outcome{position:relative;padding:1.4rem;min-height:190px;border:1px solid rgba(25,75,69,.13);border-radius:20px;background:rgba(255,255,255,.75);box-shadow:0 12px 30px rgba(15,45,41,.05)}
.p189-outcome span{display:block;font-size:.72rem;font-weight:800;letter-spacing:.13em;color:#b18b27;margin-bottom:2.4rem}
.p189-outcome h3{font-size:1.15rem;line-height:1.25;margin:0 0 .65rem;color:var(--ink,#102725)}
.p189-outcome p{margin:0;color:var(--muted,#617370);line-height:1.65;font-size:.94rem}
body:has(main .p28-hero) .p28-services{gap:1.1rem}
body:has(main .p28-hero) .p28-service{border-radius:22px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
body:has(main .p28-hero) .p28-service:hover{transform:translateY(-4px);border-color:rgba(63,125,113,.34);box-shadow:0 22px 44px rgba(15,45,41,.11)}
body:has(main .p28-hero) .p28-service a{margin-top:auto}
body:has(main .p28-hero) .p52-scenarios,body:has(main .p28-hero) .p53-interface,body:has(main .p28-hero) .p54-evidence{scroll-margin-top:150px}
html[data-theme="dark"] .p189-outcomes{background:#0e1f1e;border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .p189-outcomes__head h2,html[data-theme="dark"] .p189-outcome h3{color:#f4f8f7}
html[data-theme="dark"] .p189-outcomes__head p,html[data-theme="dark"] .p189-outcome p{color:#b8c6c3}
html[data-theme="dark"] .p189-outcome{background:rgba(18,43,41,.82);border-color:rgba(130,177,167,.17);box-shadow:none}
@media(max-width:1050px){.p189-outcomes__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.p189-outcomes__head{grid-template-columns:1fr}.p189-outcomes__head h2{max-width:19ch}}
@media(max-width:760px){body:has(main .p28-hero) .p28-hero{padding-top:3rem}.p189-outcomes__grid{grid-template-columns:1fr}.p189-outcome{min-height:auto}.p189-outcome span{margin-bottom:1.4rem}body:has(main .p28-hero) .p28-title{font-size:clamp(2.8rem,15vw,4.5rem)}body:has(main .p28-hero) .p28-visual-card{position:relative;inset:auto;margin:-4.5rem .8rem 0}}
@media(prefers-reduced-motion:reduce){body:has(main .p28-hero) .p28-service{transition:none}}
