/* SAP Console showcase — full-width stacked screens, Dark Luxe (SC 5.5)
   Scoped under .sapx so it drops into any page without touching the host theme. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/CormorantGaramond-normal-4.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;src:url(fonts/CormorantGaramond-italic-3.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/Manrope-normal-9.woff2) format("woff2")}

.sapx{--ink-0:#07070a;--ink-1:#0c0b10;--ink-2:#121117;--paper:#ece6da;--mute:#a59d8f;--dim:#6f685d;
  --gold-1:#c9a96e;--gold-2:#f1d9a6;--hair:rgba(201,169,110,.28);--hair-soft:rgba(201,169,110,.14);
  --serif:"Cormorant Garamond","Playfair Display",Georgia,serif;--sans:"Manrope","Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.12,1);--gut:clamp(16px,4vw,64px);
  background:radial-gradient(90% 40% at 50% 0%,rgba(201,169,110,.08),transparent 70%),var(--ink-0);
  color:var(--paper);font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.75;
  padding:clamp(64px,9vw,128px) 0 clamp(48px,7vw,96px);overflow-x:clip}
.sapx *,.sapx *::before,.sapx *::after{box-sizing:border-box}
.sapx img{display:block;max-width:100%;height:auto}

.sapx-head{max-width:980px;margin:0 auto;padding:0 var(--gut);text-align:center}
.sapx-label{font:500 11px/1 var(--sans);letter-spacing:.38em;text-transform:uppercase;color:var(--gold-1);margin:0 0 22px}
.sapx-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(40px,6vw,84px);line-height:1.02;letter-spacing:-.01em;margin:0 0 22px;color:var(--paper)}
.sapx-head h2 em{font-style:italic;background:linear-gradient(100deg,#a9884f,#c9a96e 22%,#f1d9a6 48%,#c9a96e 72%,#a9884f);-webkit-background-clip:text;background-clip:text;color:transparent}
.sapx-intro{font-family:var(--serif);font-size:clamp(19px,2vw,26px);line-height:1.5;color:var(--mute);margin:0 auto;max-width:44ch}
.sapx-toc{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;list-style:none;margin:36px auto 0;padding:0;max-width:980px}
.sapx-toc a{display:inline-block;padding:8px 14px;border:1px solid var(--hair-soft);border-radius:999px;font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);text-decoration:none;transition:border-color .3s,color .3s}
.sapx-toc a:hover,.sapx-toc a:focus-visible{border-color:var(--gold-1);color:var(--gold-2)}

.sapx-view{margin:clamp(72px,10vw,140px) 0 0;scroll-margin-top:80px}
.sapx-title{max-width:1240px;margin:0 auto 28px;padding:0 var(--gut);display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.sapx-num{font:italic 400 clamp(22px,2.4vw,30px)/1 var(--serif);color:var(--gold-2);min-width:2.2ch}
.sapx-title h3{font-family:var(--serif);font-weight:300;font-size:clamp(32px,4.4vw,60px);line-height:1.05;margin:0;color:var(--paper)}
.sapx-title .sapx-tag{margin-left:auto;font:500 10.5px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}

.sapx-shot{position:relative;margin:0 auto;width:min(100% - 2*var(--gut),1680px);border:1px solid var(--hair);border-radius:14px;overflow:hidden;background:var(--ink-1);
  box-shadow:0 60px 140px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02) inset,0 0 80px -30px rgba(201,169,110,.25)}
.sapx-shot::before{content:"";display:block;height:30px;border-bottom:1px solid var(--hair-soft);
  background:radial-gradient(circle at 18px 15px,#6f685d 4px,transparent 5px),radial-gradient(circle at 36px 15px,#6f685d 4px,transparent 5px),radial-gradient(circle at 54px 15px,#6f685d 4px,transparent 5px),var(--ink-2)}
.sapx-shot img{width:100%}
.sapx-shot a{display:block;cursor:zoom-in}

.sapx-copy{max-width:1240px;margin:40px auto 0;padding:0 var(--gut);display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px)}
.sapx-copy h4{font:500 11px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gold-1);margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--hair-soft)}
.sapx-copy p{margin:0 0 14px;color:#d6cfc2;font-size:16px}
.sapx-copy p:last-child{margin-bottom:0}
.sapx-copy b{color:var(--paper);font-weight:600}
.sapx-copy ol{margin:0;padding:0;list-style:none;counter-reset:s}
.sapx-copy ol li{counter-increment:s;position:relative;padding:0 0 12px 40px;color:#d6cfc2}
.sapx-copy ol li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1px;font:italic 500 17px/1.6 var(--serif);color:var(--gold-2)}

.sapx-note{max-width:980px;margin:clamp(72px,9vw,120px) auto 0;padding:22px var(--gut) 0;border-top:1px solid var(--hair-soft);text-align:center;font-size:13px;color:var(--dim);line-height:1.7}

.sapx.sapx-js .sapx-rv{opacity:0;transform:translateY(28px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.sapx.sapx-js .sapx-rv.in{opacity:1;transform:none}
@media(max-width:820px){
  .sapx-copy{grid-template-columns:1fr}
  .sapx-title .sapx-tag{margin-left:0;width:100%}
  .sapx-shot{border-radius:10px}.sapx-shot::before{height:20px;background-size:auto}
}
@media(prefers-reduced-motion:reduce){.sapx .sapx-rv{opacity:1;transform:none;transition:none}}