/* /practices/consulting-architecture/openai-readiness-assessment/ : additions only.
   The page also loads mach-claude-readiness.css, which defines the shared cr- components (hero, journey strip,
   layers, scope cards, self-check, deliverables, steps). Everything defined here is prefixed oa-. */

/* 3 product paths */
.oa-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.oa-path{position:relative;display:flex;flex-direction:column;gap:10px;padding:30px;border-radius:var(--r-panel);background:var(--graphite);border:1px solid var(--stroke);overflow:hidden;transition:.2s}
.oa-path::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--pc)}
.oa-path::after{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--pc) 20%,transparent),transparent);pointer-events:none}
.oa-path:hover{background:var(--graphite2);border-color:rgba(255,255,255,.2)}
.oa-path>*{position:relative}
.oa-path-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.oa-pn{font-size:14px;font-weight:500;letter-spacing:.06em;color:var(--pc)}
.oa-path-top svg{width:30px;height:30px;fill:none;stroke:var(--pc);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.oa-path h3{font-size:28px;letter-spacing:-.025em}
.oa-path p{color:var(--text2);font-size:15.5px;line-height:1.55}
.oa-path p.oa-sub{color:var(--text);font-size:16.5px;font-weight:500}
.oa-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:16px}
.oa-tags span{padding:6px 12px;border-radius:999px;background:var(--fill);border:1px solid var(--stroke);font-size:13px;color:#d9d9df}

/* hero: one sentence per line (desktop and tablet), a little more room under the note */
@media(min-width:701px){
 .oa-page .cr-copy h1{font-size:clamp(44px,3.9vw,56px);max-width:680px}
 .oa-page .cr-copy h1 .oa-l{display:block}
 .oa-page .cr-lede{max-width:560px}
 .oa-page .cr-journey{margin-top:18px}
}

.oa-gpt-ic{display:inline-block;width:.82em;height:.82em;margin-right:.22em;vertical-align:-.08em;fill:#fff}

/* layers: add a short description under each name */
.oa-layers .cr-layer{grid-template-columns:300px minmax(0,1fr) 290px;align-items:start}
.oa-layers .cr-nm b{letter-spacing:.09em}
.oa-desc{margin-top:8px;font-size:13.5px;line-height:1.45;color:var(--text2)}

/* scoring note */
.oa-note{display:flex;align-items:flex-start;gap:16px;max-width:900px;margin:28px auto 0;padding:18px 22px;border-radius:20px;background:var(--cr-violet-tint);border:1px solid rgba(162,124,255,.28)}
.oa-note-ic{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:rgba(162,124,255,.22);color:#c7b7ff;font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:15px}
.oa-note p{font-size:15px;line-height:1.55;color:#d6d3e6}
.oa-note b{color:var(--text);font-weight:600}

/* why Mach */
.oa-why{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:stretch}
.oa-why-panel{padding:44px;border-radius:var(--r-panel);background:var(--graphite);border:1px solid var(--stroke)}
.oa-why-panel h2{margin:14px 0 20px;max-width:18ch}
.oa-why-panel p{max-width:60ch;margin-bottom:14px;color:var(--text2);font-size:17px;line-height:1.6}
.oa-why-panel .eyebrow{color:var(--violet);font-weight:700;font-size:14px;letter-spacing:.1em}
.oa-why-panel .oa-tags{padding-top:12px}
.oa-quote{position:relative;display:flex;flex-direction:column;justify-content:center;padding:44px 36px;border-radius:var(--r-panel);border:1px solid #7958c2;background:linear-gradient(145deg,#201a31,#14151d 68%);overflow:hidden}
.oa-qm{height:54px;font-family:Georgia,"Times New Roman",serif;font-style:normal;font-size:120px;line-height:.7;color:var(--violet);opacity:.55}
.oa-quote p{margin:8px 0 24px;font-size:clamp(22px,2.4vw,30px);line-height:1.25;letter-spacing:-.02em;font-weight:600;color:var(--text)}
.oa-qc{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#a6a6b0;font-weight:700}

@media(max-width:1060px){
 .oa-paths{grid-template-columns:1fr}
 .oa-layers .cr-layer{grid-template-columns:1fr}
 .oa-why{grid-template-columns:1fr}
}
@media(max-width:700px){
 .oa-path{padding:26px 22px}
 .oa-path h3{font-size:24px}
 .oa-why-panel{padding:28px 22px}
 .oa-quote{padding:32px 24px}
 .oa-note{padding:16px 16px}
}