/* Pop Commerce colour tokens. Loaded only on Commerce pages (body.popc), so the rest of the studio site keeps its palette.
   Values match the commerce repo's assets/brand/pop-commerce/tokens.css. Navy and purple are the only text colours on light;
   blue, magenta, orange and gold are gradient and accent decoration only (they fail AA as text on white).
   Every text/background pair below is checked by tools/check-pc-contrast.py (WCAG AA, 4.5:1). */
:root {
  --pc-navy: #10103F;
  --pc-purple: #5106CF;
  --pc-purple-deep: #3A0A94;
  --pc-blue: #019AFC;
  --pc-magenta: #FB1C57;
  --pc-orange: #FC7310;
  --pc-gold: #FD9918;
  --pc-lavender: #F1EAFE;
  --pc-lavender-2: #E3D6FB;
  --pc-bg: #FAF8FF;
  --pc-card: #FFFFFF;
  --pc-ink-soft: #3D3B6B;
  --pc-ink-mute: #5B5A80;
  --pc-line: rgba(16, 16, 63, .14);
  --pc-gradient: linear-gradient(90deg, #019AFC, #FB1C57 55%, #FC7310 80%, #FD9918);
}
/* Remap the warm public theme's semantic tokens, so every existing Commerce component (products.css, trial forms, plan cards)
   restyles with no layout change. */
.warm.popc {
  --cream-white: var(--pc-bg); --cream-50: #FFFFFF; --cream-200: var(--pc-lavender); --cream-300: var(--pc-lavender-2);
  --greige: #B9B4D6; --greige-700: var(--pc-ink-mute);
  --sage: var(--pc-purple); --sage-50: var(--pc-lavender); --sage-100: var(--pc-lavender); --sage-200: var(--pc-lavender-2); --sage-300: #C4B0F3; --sage-400: #A688EA;
  --sage-600: var(--pc-purple); --sage-700: var(--pc-purple-deep); --sage-800: var(--pc-navy);
  --terracotta: var(--pc-purple); --terracotta-ink: var(--pc-purple); --terracotta-deep: var(--pc-purple-deep); --terracotta-soft: #CDB8F6;
  --bronze: var(--pc-navy); --coral: var(--pc-magenta);
  --cream: var(--pc-bg); --cream-2: var(--pc-lavender); --card: var(--pc-card);
  --ink: var(--pc-navy); --ink-soft: var(--pc-ink-soft); --ink-mute: var(--pc-ink-mute);
  --terra: var(--pc-purple); --terra-hi: var(--pc-purple-deep); --deep: var(--pc-navy);
  --line: var(--pc-line);
  background: var(--pc-bg); color: var(--pc-navy);
}
.warm.popc .btn { --btn-bd: rgba(16, 16, 63, .28); }
.warm.popc .btn-primary { box-shadow: 0 12px 28px -14px rgba(81, 6, 207, .6), inset 0 1px 0 rgba(255, 255, 255, .16); }
.warm.popc .btn-quiet { text-decoration-color: rgba(81, 6, 207, .5); }
.warm.popc :focus-visible { outline-color: var(--pc-purple); }
.warm.popc ::selection { background: var(--pc-lavender-2); color: var(--pc-navy); }
.popc .pc-gradbar { height: 4px; border: 0; background: var(--pc-gradient); border-radius: 4px; }
.popc .pr-hero { background: linear-gradient(180deg, #FFFFFF, var(--pc-lavender)); position: relative; }
.popc .pr-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--pc-gradient); }
.popc .pc-logo { mix-blend-mode: multiply; display: block; width: min(320px, 70vw); height: auto; margin: 0 0 18px; }
.popc .pc-new { padding: clamp(40px, 6vw, 80px) 0; }
.popc .pc-new__grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-top: 22px; }
.popc .pc-card { background: var(--pc-card); border: 1px solid var(--pc-line); border-radius: 16px; padding: 22px; position: relative; overflow: hidden; }
.popc .pc-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--pc-gradient); }
.popc .pc-card h3 { margin: 6px 0 8px; color: var(--pc-purple); }
.popc .pc-card p, .pc .pc-card li { color: var(--pc-ink-soft); }
.popc .pc-card ul { margin: 10px 0 0; padding-left: 18px; }
.popc .pc-badge { display: inline-block; font: 600 .74rem/1 var(--sans); padding: 5px 9px; border-radius: 999px; background: var(--pc-lavender); color: var(--pc-purple-deep); }
.popc .pc-badge--soon { background: var(--pc-navy); color: #fff; }