/* Shared "explain + hero" components for order pages. Self-contained (oe- prefix), so it can't
   collide with each page's own inline styles. Used with /js/pw-order-hero.js. */

/* ── hero (canvas animation behind the title) ── */
.oe-hero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(135deg,#0b1f3f 0%,#1e3a5f 55%,#0f5f73 100%)}
.oe-hero[data-theme="indigo"]{background:linear-gradient(135deg,#1e1b4b 0%,#3730a3 55%,#1d4ed8 100%)}
.oe-hero[data-theme="teal"]{background:linear-gradient(135deg,#042f2e 0%,#115e59 55%,#0e7490 100%)}
.oe-hero[data-theme="road"]{background:linear-gradient(135deg,#111827 0%,#1f3a5f 55%,#92400e 130%)}
.oe-hero[data-theme="plum"]{background:linear-gradient(135deg,#2e1065 0%,#5b21b6 55%,#0f766e 130%)}
.oe-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.oe-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,18,40,.55) 0%,rgba(6,18,40,.25) 45%,rgba(6,18,40,0) 75%)}
.oe-hero-in{position:relative;z-index:1;max-width:780px;margin:0 auto;padding:2.4rem 1.25rem 2.2rem}
.oe-hero h1{color:#fff !important;font-size:1.9rem;line-height:1.2;margin:0 0 .4rem;font-weight:700}
.oe-hero .oe-sub{color:#d6e4f5;font-size:.95rem;max-width:34rem;margin:0}
.oe-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.oe-chip{font-size:.74rem;font-weight:600;padding:.3rem .75rem;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff}
.oe-chip.teal{background:rgba(45,212,191,.16);border-color:rgba(45,212,191,.5);color:#99f6e4}
.oe-chip.amber{background:rgba(251,191,36,.16);border-color:rgba(251,191,36,.5);color:#fde68a}
@media(max-width:640px){.oe-hero::after{background:rgba(6,18,40,.38)}.oe-hero h1{padding-right:2.6rem}}

/* ── content blocks ── */
.oe-wrap{max-width:780px;margin:0 auto;padding:1.5rem 1.25rem 0}
.oe-lead{background:linear-gradient(135deg,#fff 0%,#eef4ff 100%);border:1px solid #dbe4f0;border-left:4px solid #1e3a5f;border-radius:10px;padding:1rem 1.15rem;margin:0 0 1rem;font-size:.92rem;color:#1f2937}
.oe-lead p{margin:0}.oe-lead p+p{margin-top:.5rem}
.oe-lead .oe-skip{display:inline-block;margin-top:.6rem;font-weight:600;font-size:.88rem;color:#1e3a5f}
.oe-card{background:#fff;border:1px solid #e5e7eb;border-top:4px solid #2563eb;border-radius:12px;padding:1.25rem;margin-bottom:1rem;font-size:.9rem;color:#374151;line-height:1.6}
.oe-card h2{font-size:1.1rem;font-weight:700;margin:0 0 .75rem;color:#1d4ed8}
.oe-card.c-blue{border-top-color:#2563eb}.oe-card.c-blue h2{color:#1d4ed8}
.oe-card.c-indigo{border-top-color:#6366f1}.oe-card.c-indigo h2{color:#4338ca}
.oe-card.c-teal{border-top-color:#0d9488}.oe-card.c-teal h2{color:#0f766e}
.oe-card.c-amber{border-top-color:#d97706}.oe-card.c-amber h2{color:#b45309}
.oe-card p{margin:.4rem 0}
.oe-card ul,.oe-card ol{margin:.35rem 0 .5rem 1.25rem;padding-left:.4rem}
.oe-card ul{list-style:disc}.oe-card ol{list-style:decimal}
.oe-card li{margin:.2rem 0}.oe-card li::marker{color:#1e3a5f;font-weight:700}
.oe-card h3{font-size:.92rem;font-weight:700;color:#111827;margin:.9rem 0 .2rem}
.oe-callout{background:#fffbeb;border-left:3px solid #d97706;border-radius:0 6px 6px 0;padding:.55rem .8rem;margin:.7rem 0;font-size:.85rem;color:#78350f}
.oe-callout.blue{background:#eff6ff;border-left-color:#1e3a5f;color:#1e3a5f}
.oe-two-col{display:grid;grid-template-columns:1fr;gap:.75rem;margin-top:.5rem}
@media(min-width:640px){.oe-two-col{grid-template-columns:1fr 1fr}}
.oe-col{border:1px solid #e5e7eb;border-radius:10px;padding:.8rem .9rem;background:#f9fafb}
.oe-col h3{margin-top:0}
.oe-two-col .oe-col:first-child{background:#f0fdfa;border-color:#99f6e4}
.oe-two-col .oe-col:last-child{background:#eef2ff;border-color:#c7d2fe}
.oe-sources{font-size:.75rem;color:#5f6773;margin-top:.6rem}
.oe-sources a{color:#1e3a5f;text-decoration:underline}
/* fact grid: who / when / how much at a glance */
.oe-facts{display:grid;grid-template-columns:1fr;gap:.5rem;margin:.6rem 0}
@media(min-width:640px){.oe-facts{grid-template-columns:repeat(3,1fr)}}
.oe-fact{border:1px solid #dbe4f0;background:#f8fafc;border-radius:10px;padding:.65rem .8rem}
.oe-fact b{display:block;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:#4338ca;margin-bottom:.15rem}
/* numbered how-it-works flow */
.oe-flow{margin-top:.9rem;border:2px solid #34d399;border-radius:12px;padding:1rem 1.1rem;background:linear-gradient(135deg,#ecfdf5 0%,#f0fdfa 100%)}
.oe-flow h3{margin:0 0 .3rem;font-size:1.02rem;color:#047857}
.oe-flow .oe-flow-lead{margin:.2rem 0 .7rem;color:#064e3b}
.oe-steps{display:grid;grid-template-columns:1fr;gap:.6rem}
@media(min-width:720px){.oe-steps{grid-template-columns:repeat(3,1fr)}}
.oe-step{background:#fff;border:1px solid #a7f3d0;border-radius:10px;padding:.7rem .8rem .75rem;font-size:.84rem;color:#374151;display:flex;flex-direction:column;gap:.25rem}
.oe-step strong{color:#065f46;font-size:.9rem}
.oe-step .oe-num{width:1.55rem;height:1.55rem;border-radius:50%;background:#059669;color:#fff;font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;margin-bottom:.15rem}
.oe-flow .oe-note{margin:.75rem 0 0;font-size:.8rem;color:#065f46}

/* ── process timeline graphic ── */
.oe-card ol.oe-proc,.oe-proc{list-style:none;margin:.7rem 0 0;padding:0;position:relative}
.oe-card ol.oe-proc>li::marker{content:none}
.oe-stage{position:relative;padding:0 0 1.15rem 3.7rem;min-height:2.6rem}
.oe-stage::before{content:"";position:absolute;left:1.1rem;top:2.4rem;bottom:.15rem;width:3px;border-radius:2px;background:linear-gradient(#0d9488,#6366f1)}
.oe-stage:last-child{padding-bottom:0}
.oe-stage:last-child::before{display:none}
.oe-stage .oe-ico{position:absolute;left:0;top:0;width:2.35rem;height:2.35rem;border-radius:50%;background:#0f766e;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(15,118,110,.35)}
.oe-stage:nth-child(2) .oe-ico{background:#0e7490}.oe-stage:nth-child(3) .oe-ico{background:#4338ca}.oe-stage:nth-child(4) .oe-ico{background:#7c3aed}
.oe-stage:nth-child(5) .oe-ico{background:#b45309}.oe-stage:nth-child(6) .oe-ico{background:#047857}
.oe-ico svg{width:1.15rem;height:1.15rem;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.oe-stage h3{margin:.05rem 0 .15rem;font-size:.98rem;color:#111827}
.oe-stage p{margin:.1rem 0;font-size:.86rem;color:#374151}
.oe-channels{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.45rem}
.oe-channel{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:600;color:#0f766e;background:#f0fdfa;border:1px solid #99f6e4;border-radius:999px;padding:.2rem .6rem}
.oe-channel svg{width:.9rem;height:.9rem;stroke:#0f766e;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.oe-branches{display:grid;grid-template-columns:1fr;gap:.6rem;margin-top:.55rem}
@media(min-width:640px){.oe-branches{grid-template-columns:1fr 1fr}}
.oe-branch{border-radius:10px;padding:.65rem .8rem;font-size:.84rem;color:#374151}
.oe-branch b{display:block;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.15rem}
.oe-branch.bad{background:#fffbeb;border:1px solid #fcd34d}.oe-branch.bad b{color:#b45309}
.oe-branch.good{background:#ecfdf5;border:1px solid #6ee7b7}.oe-branch.good b{color:#047857}
.oe-proc-note{margin:.9rem 0 0;font-size:.8rem;color:#5f6773}
@media(prefers-reduced-motion:no-preference){
  .oe-proc::after{content:"";position:absolute;left:calc(1.1rem - 3px);top:2rem;width:9px;height:9px;border-radius:50%;background:#fbbf24;box-shadow:0 0 0 4px rgba(251,191,36,.28);animation:oe-travel 7s ease-in-out infinite}
  @keyframes oe-travel{0%{top:2rem;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:calc(100% - 2.6rem);opacity:0}}
}