/* Purple Pie Promos · scoped CSS for /customer-resources/company-stores only. */
.ppcs {
  --ppcs-purple: #241052;
  --ppcs-purple-2: #54308a;
  --ppcs-lavender: #f6f3fa;
  --ppcs-ink: #271b43;
  --ppcs-muted: #625b72;
  --ppcs-magenta: #d80aac;
  --ppcs-teal: #16cfc2;
  --ppcs-pink: #ff478c;
  --ppcs-line: #ebe7f2;
  color: var(--ppcs-ink);
  font: inherit;
  max-width: 1240px;
  margin: 0 auto 64px;
  line-height: 1.65;
}
.ppcs, .ppcs * { box-sizing: border-box; }
.ppcs h1,.ppcs h2,.ppcs h3,.ppcs p { margin: 0; }
.ppcs h1,.ppcs h2,.ppcs h3 { color: var(--ppcs-purple); line-height: 1.18; font-weight: 800; letter-spacing: -.025em; }
.ppcs h1 { font-size: clamp(2.15rem, 4.25vw, 3.85rem); }
.ppcs h2 { font-size: clamp(1.7rem, 2.5vw, 2.45rem); }
.ppcs h3 { font-size: clamp(1.12rem, 1.5vw, 1.32rem); }
.ppcs p { font-size: 1rem; }
.ppcs p+p { margin-top: 1em; }
.ppcs a { text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.ppcs a:focus-visible,.ppcs summary:focus-visible { outline: 3px solid #00a7b9; outline-offset: 4px; border-radius: 3px; }
.ppcs .ppcs-eyebrow,.ppcs .ppcs-kicker { margin: 0 0 12px; text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; line-height: 1.3; font-weight: 800; }
.ppcs .ppcs-kicker { color: #9d168c; }
.ppcs .ppcs-section { margin-top: clamp(54px, 7vw, 94px); }
.ppcs .ppcs-section-header { max-width: 750px; margin-bottom: 26px; }
.ppcs .ppcs-section-header > p:last-child { margin-top: 12px; color: var(--ppcs-muted); font-size: 1.07rem; }

/* Hero */
.ppcs .ppcs-hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: 20px; padding: clamp(30px, 4.4vw, 64px); min-height: 460px; overflow: hidden; border-radius: 14px; position: relative; background: linear-gradient(112deg,#22104c 4%, #38166d 55%, #613089 100%); color: white; isolation: isolate; }
.ppcs .ppcs-hero::after { content: ''; position: absolute; width: 380px; height: 380px; border: 48px solid rgba(232, 55, 179, .13); border-radius: 50%; right: -120px; top: -170px; z-index: -1; }
.ppcs .ppcs-hero h1 { color: #fff; max-width: 670px; }
.ppcs .ppcs-hero p { color: #fff; max-width: 610px; }
.ppcs .ppcs-hero .ppcs-eyebrow { color: #6feadd; }
.ppcs .ppcs-hero__tagline { font-size: clamp(1.12rem, 1.7vw, 1.42rem); font-weight: 750; margin: 16px 0 18px; }
.ppcs .ppcs-hero__copy > p:not(.ppcs-eyebrow):not(.ppcs-hero__tagline) { font-size: 1.03rem; line-height: 1.7; color: #f6efff; }
.ppcs .ppcs-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 19px; margin-top: 28px; }
.ppcs .ppcs-hero__art img { display:block; width:100%; height:auto; max-width: 540px; margin-inline:auto; filter: drop-shadow(0 14px 20px rgba(0,0,0,.15)); }
.ppcs .ppcs-btn { display:inline-flex; align-items:center; justify-content:center; gap: 9px; padding: 13px 20px; border-radius: 7px; min-height: 48px; font-weight: 800; font-size: .95rem; line-height: 1.2; text-decoration: none; transition: background-color .17s ease, color .17s ease, transform .17s ease; text-align:center; }
.ppcs .ppcs-btn:hover { transform: translateY(-2px); }
.ppcs .ppcs-btn--white { background: white; color: var(--ppcs-purple); }
.ppcs .ppcs-btn--white:hover { background:#f0e5fa; color:var(--ppcs-purple); }
.ppcs .ppcs-btn--purple { background:var(--ppcs-purple); color:#fff; }
.ppcs .ppcs-btn--purple:hover { background: #54308a; color:#fff; }
.ppcs .ppcs-text-link { display:inline-flex; align-items:center; gap:6px; font-size:.95rem; font-weight:800; color:var(--ppcs-purple); }
.ppcs .ppcs-text-link:hover { color: var(--ppcs-purple-2); }
.ppcs .ppcs-text-link--light,.ppcs .ppcs-text-link--light:hover { color:#fff; }
.ppcs .ppcs-text-link--light:hover { text-decoration-thickness: 2px; }

/* Company Stores - The Idea section */
.ppcs .ppcs-intro {
    background: var(--ppcs-lavender);
    padding: clamp(28px, 5vw, 58px);
    border-radius: 13px;
}

/* Definition */
.ppcs .ppcs-intro { display:grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(28px, 6vw, 95px); }
.ppcs .ppcs-lead { margin-top:15px; font-size:clamp(1.12rem, 1.6vw, 1.35rem); line-height:1.5; color:var(--ppcs-purple-2); font-weight:650; }
.ppcs .ppcs-intro__body { color:var(--ppcs-muted); }
.ppcs .ppcs-callout { border-left:4px solid var(--ppcs-teal); background:var(--ppcs-lavender); padding:15px 19px; border-radius:0 7px 7px 0; color:var(--ppcs-purple); }

/* Benefits */
.ppcs .ppcs-grid { display:grid; gap:18px; }
.ppcs .ppcs-grid--two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ppcs .ppcs-card { background:#fff; border:1px solid var(--ppcs-line); border-top:4px solid var(--ppcs-accent); border-radius:9px; padding: 26px 28px 28px; box-shadow:0 7px 24px rgba(39,16,82,.04); }
.ppcs .ppcs-card h3 { margin:10px 0 11px; }
.ppcs .ppcs-card p { color:var(--ppcs-muted); }
.ppcs .ppcs-card__label { font-weight:850; text-transform:uppercase; letter-spacing:.1em; font-size:.73rem; color:var(--ppcs-purple); }
.ppcs .ppcs-card--magenta { --ppcs-accent:var(--ppcs-magenta); }
.ppcs .ppcs-card--teal { --ppcs-accent:var(--ppcs-teal); }
.ppcs .ppcs-card--pink { --ppcs-accent:var(--ppcs-pink); }
.ppcs .ppcs-card--purple { --ppcs-accent:var(--ppcs-purple); }

/* Use cases */
.ppcs .ppcs-band { margin-top: clamp(54px,7vw,94px); padding:clamp(28px,5vw,58px); background:var(--ppcs-lavender); border-radius:13px; }
.ppcs .ppcs-use { display:flex; align-items:flex-start; gap:17px; background:white; border:1px solid #ebe6f1; border-radius:10px; padding:24px; }
.ppcs .ppcs-use h3 { margin-bottom:9px; }
.ppcs .ppcs-use p { color:var(--ppcs-muted); font-size:.97rem; }
.ppcs .ppcs-use__mark { flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:11px; font-size:1.45rem; font-weight:800; }
.ppcs .ppcs-use__mark--teal { background:#e3f9f6; color:#007a75; }
.ppcs .ppcs-use__mark--pink { background:#ffe5ee; color:#bc2257; }
.ppcs .ppcs-use__mark--magenta { background:#fce4f6; color:#a11583; }
.ppcs .ppcs-use__mark--purple { background:#eee7fa; color:#4b2888; }

/* Process */
.ppcs .ppcs-steps { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; padding:0; margin:0; counter-reset:none; }
.ppcs .ppcs-steps li { padding:24px 21px 25px; background:#fff; border:1px solid var(--ppcs-line); border-radius:9px; min-width:0; }
.ppcs .ppcs-steps__num { display:inline-grid; place-items:center; background:#f5e7f6; border-radius:10px; width:43px; height:43px; font-weight:900; color:#9e1989; margin-bottom:18px; }
.ppcs .ppcs-steps li:nth-child(2) .ppcs-steps__num { background:#e3f9f6; color:#008c82; }
.ppcs .ppcs-steps li:nth-child(3) .ppcs-steps__num { background:#ffe7ef; color:#be315d; }
.ppcs .ppcs-steps li:nth-child(4) .ppcs-steps__num { background:#eee9f7; color:#46247d; }
.ppcs .ppcs-steps h3 { margin-bottom:10px; }
.ppcs .ppcs-steps p { font-size:.94rem; color:var(--ppcs-muted); }

/* Why Purple Pie */
.ppcs .ppcs-promise { margin-top:clamp(54px,7vw,94px); background:linear-gradient(115deg,#21104e,#512780); display:grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(26px,5vw,80px); border-radius:12px; padding:clamp(30px,4.5vw,60px); color:#fff; }
.ppcs .ppcs-promise h2,.ppcs .ppcs-promise p { color:#fff; }
.ppcs .ppcs-promise .ppcs-eyebrow { color:#60e3d7; }
.ppcs .ppcs-promise__quote { border-left:4px solid var(--ppcs-pink); padding-left:16px; font-size:1.12rem; font-weight:800; margin-bottom:17px; }

/* Accessible native FAQ accordion */
.ppcs .ppcs-faq__items { max-width:900px; margin:0 auto; border-top:1px solid var(--ppcs-line); }
.ppcs .ppcs-faq details { border-bottom:1px solid var(--ppcs-line); background:#fff; }
.ppcs .ppcs-faq summary { position:relative; cursor:pointer; list-style:none; padding:20px 45px 20px 8px; color:var(--ppcs-purple); font-weight:800; font-size:1.05rem; }
.ppcs .ppcs-faq summary::-webkit-details-marker { display:none; }
.ppcs .ppcs-faq summary::after { content:'+'; position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:1.55rem; color:#94238e; font-weight:450; }
.ppcs .ppcs-faq details[open] summary::after { content:'−'; }
.ppcs .ppcs-faq details > div { padding:0 45px 22px 8px; color:var(--ppcs-muted); }

/* Bottom CTA */
.ppcs .ppcs-cta { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:clamp(25px,4.8vw,50px); margin-top:clamp(50px,6.5vw,80px); background:#f5f2fa; border-radius:12px; border-top:4px solid var(--ppcs-teal); }
.ppcs .ppcs-cta > div { max-width:690px; }
.ppcs .ppcs-cta p:last-child { margin-top:13px; color:var(--ppcs-muted); }
.ppcs .ppcs-cta .ppcs-btn { flex:none; }

@media (max-width: 920px) {
  .ppcs .ppcs-hero { grid-template-columns:1fr; }
  .ppcs .ppcs-hero__art img { max-width:450px; }
  .ppcs .ppcs-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ppcs .ppcs-promise { grid-template-columns:1fr; }
  .ppcs .ppcs-cta { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 650px) {
  .ppcs { margin-bottom:44px; }
  .ppcs .ppcs-hero { padding:25px 22px 10px; border-radius:10px; }
  .ppcs .ppcs-hero__art { margin-top:0; }
  .ppcs .ppcs-hero__art img { max-width:360px; }
  .ppcs .ppcs-hero__actions { align-items:stretch; gap:14px; }
  .ppcs .ppcs-intro,.ppcs .ppcs-grid--two,.ppcs .ppcs-steps { grid-template-columns:1fr; }
  .ppcs .ppcs-card { padding:22px; }
  .ppcs .ppcs-band { padding:26px 18px; }
  .ppcs .ppcs-use { padding:18px; }
  .ppcs .ppcs-promise { padding:28px 24px; }
  .ppcs .ppcs-faq summary { font-size:1rem; }
  .ppcs .ppcs-btn { width:100%; }
}
@media (prefers-reduced-motion:reduce) { .ppcs .ppcs-btn { transition:none; } }
