/* Public pages (store, commands, support, purchase, legal), in YouMatter's
   cream + forest-green language. Layout preserved; colours moved to tokens with
   a light default and a dark variant (pages that set data-theme=dark opt in).
   The old "Deezer ring" orbs are removed per founder feedback. */

:root{
  --pp-bg:#f3eadc; --pp-card:#faf8f2; --pp-card-2:#f6f1e6; --pp-hover:#eef4e3;
  --pp-head:#203e35; --pp-text:#4f675c; --pp-dim:#6b8073;
  --pp-accent:#315d47; --pp-accent-soft:rgba(49,93,71,.12); --pp-on-accent:#f7faf1;
  --pp-line:#ddd9c6; --pp-line-soft:rgba(49,93,71,.14);
  --pp-btn:#315d47; --pp-btn-text:#ffffff;
  --pp-feat:linear-gradient(165deg,#2f5a45 0%,#244b3a 60%,#1f3f30 100%); --pp-feat-text:#f3f7ee;
  --pp-display:'Syne','Inter',system-ui,sans-serif;
}
:root[data-theme=dark]{
  --pp-bg:#17241d; --pp-card:#223329; --pp-card-2:#1c2d24; --pp-hover:#2c4032;
  --pp-head:#f1f0e5; --pp-text:#c1cebd; --pp-dim:#9fb0a2;
  --pp-accent:#8fc7a6; --pp-accent-soft:rgba(143,199,166,.16); --pp-on-accent:#0f1a14;
  --pp-line:#3a4a3f; --pp-line-soft:rgba(143,199,166,.2);
  --pp-btn:#8fc7a6; --pp-btn-text:#0f1a14;
  --pp-feat:linear-gradient(165deg,#2c4a39,#20392c 70%); --pp-feat-text:#f1f0e5;
}

.store-page,
.cmd-page,
.support-page,
.purchase-page,
.legal-page{
  background:var(--pp-bg);
}
.store-page{
  max-width:none;
  margin:0;
  padding:0 0 80px;
}
.store-hero,
.support-hero,
.purchase-hero,
.legal-page .legal-header{
  position:relative;
  text-align:left;
  max-width:1180px;
  margin:0 auto 8px;
  padding:calc(var(--header-h, 70px) + 56px) 36px 0;
}
/* Orbs removed (founder feedback) — keep the hero clean. */
.store-hero::after,
.support-hero::after,
.purchase-hero::after{ content:none; display:none; }
.store-hero h1,.store-hero p,
.support-hero h1,.support-hero p,
.purchase-hero h1,.purchase-hero p{position:relative;z-index:1}
.store-hero h1,
.cmd-header h1,
.support-hero h1,
.purchase-hero h1,
.legal-page .legal-header h1{
  font-family:var(--pp-display);
  font-size:clamp(3rem,6.4vw,5.4rem);
  font-weight:800;
  letter-spacing:-.05em;
  line-height:.9;
  background:none;
  background-image:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:var(--pp-head);
  color:var(--pp-head);
  margin:0 0 18px;
}
.store-hero p,
.support-hero p,
.purchase-hero p{
  text-align:left;
  margin:0;
  max-width:46ch;
  color:var(--pp-text);
}
.channel-reel{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(240px,28vw);
  gap:14px;
  overflow-x:auto;
  padding:8px 36px 36px;
  scroll-snap-type:x mandatory;
}
.channel-reel img{
  height:220px;
  width:100%;
  object-fit:cover;
  border-radius:22px;
  scroll-snap-align:start;
  border:1px solid var(--pp-line-soft);
}
.cat-tabs{
  justify-content:flex-start;
  max-width:1180px;
  margin:0 auto 28px;
  padding:0 36px;
}
.cat-title{
  text-align:left;
  max-width:1180px;
  margin:0 auto 18px;
  padding:0 36px;
  font-size:clamp(2rem,4vw,3.2rem);
  color:var(--pp-head);
}
.cat-tab.active{
  background:var(--pp-accent);
  color:var(--pp-on-accent);
  border-color:transparent;
  box-shadow:none;
}
.products-grid{
  max-width:1180px;
  margin:0 auto 48px;
  padding:0 36px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.prod-card{
  text-align:left;
  background:var(--pp-card);
  border:1px solid var(--pp-line-soft);
  border-radius:28px;
  padding:28px 26px 24px;
  box-shadow:0 10px 30px rgba(46,67,51,.06);
}
.prod-card.featured{grid-column:1 / -1;padding:48px 40px 36px}
.prod-card.featured .prod-price{font-size:clamp(4.2rem,8vw,6.4rem)}
.prod-card .prod-icon{margin:0 0 16px}
.prod-card h3{
  font-size:1.35rem;
  letter-spacing:-.03em;
  color:var(--pp-head);
}
.prod-card .prod-price{
  font-family:var(--pp-display);
  font-size:clamp(2.8rem,4.4vw,4.2rem);
  letter-spacing:-.05em;
  line-height:.9;
  background:none;
  background-image:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:var(--pp-head);
  color:var(--pp-head);
}
.prod-card .prod-features li{color:var(--pp-text)}
.prod-card .buy-btn{
  align-self:flex-start;
  border-radius:999px;
  background:var(--pp-btn);
  color:var(--pp-btn-text);
  box-shadow:none;
}
.prod-card.featured{
  background:var(--pp-feat);
  border-color:transparent;
}
.prod-card.featured h3,
.prod-card.featured .prod-features li,
.prod-card.featured .prod-price{
  color:var(--pp-feat-text);
  -webkit-text-fill-color:var(--pp-feat-text);
}
.prod-card.featured .buy-btn{
  background:#ffffff;
  color:#244b3a;
}
.prod-card .prod-badge{
  background:var(--pp-accent);
  color:var(--pp-on-accent);
  text-transform:none;
  letter-spacing:0;
}

.cmd-page{max-width:1180px;padding-top:18px}
.cmd-header h1{font-size:clamp(3rem,5.4vw,4.8rem)}
.cmd-sidebar h3{text-transform:none;letter-spacing:-.03em;font-size:1.05rem;color:var(--pp-head)}
.cmd-card-v2{
  background:transparent;
  border:0;
  border-bottom:1px solid var(--pp-line-soft);
  border-radius:0;
  padding:18px 0;
  box-shadow:none;
}
.cmd-card-v2:hover{background:transparent;border-color:var(--pp-accent)}
.cmd-card-v2 .cmd-name,
.cmd-starter-row code,
.cmd-card-v2 .cmd-usage-block{color:var(--pp-accent)}
.cmd-card-v2 .cmd-name{font-size:1.08rem}
.cmd-sidebar .cat-item .cat-count,
.cmd-cat-title .cat-badge{color:var(--pp-accent);background:var(--pp-accent-soft)}
.cmd-sidebar .cat-icon{color:var(--pp-accent);background:transparent}

.support-page{max-width:1180px;margin:0 auto;padding:0 36px 80px}
.support-page .support-hero{padding-left:0;padding-right:0;max-width:none}
.support-paths{margin-top:28px}
.support-path{border-radius:24px;background:var(--pp-card);text-align:left;border:1px solid var(--pp-line-soft)}
.support-path i{color:var(--pp-accent)}
.support-path h3{color:var(--pp-head)}
.support-section h2,.contact-card h2,.contact-card .lede{text-align:left;color:var(--pp-head)}
.contact-card{border-radius:28px;background:var(--pp-card);border:1px solid var(--pp-line-soft)}

.purchase-page{max-width:1100px;margin-top:0}
.purchase-page .purchase-hero{max-width:none}
.plan-card{border-radius:28px;background:var(--pp-card);text-align:left;border:1px solid var(--pp-line-soft)}
.plan-card .plan-price{
  font-family:var(--pp-display);
  font-size:clamp(2.4rem,4vw,3.4rem);
  letter-spacing:-.05em;
  background:none;
  background-image:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:var(--pp-head);
  color:var(--pp-head);
}
.plan-card.selected{
  background:var(--pp-feat);
  border-color:transparent;
}
.plan-card.selected,.plan-card.selected *{color:var(--pp-feat-text)}
.plan-card.selected .plan-price{-webkit-text-fill-color:var(--pp-feat-text)!important;color:var(--pp-feat-text)!important}
.legal-page{max-width:860px}
.legal-page h1,.legal-page h2,.legal-page h3{color:var(--pp-head)}
.legal-page p,.legal-page li{color:var(--pp-text)}

@media (max-width:720px){
  .store-hero,.support-hero,.purchase-hero,.legal-page .legal-header,
  .cat-tabs,.cat-title,.products-grid,.channel-reel,.support-page{padding-left:20px;padding-right:20px}
  .store-hero h1,.cmd-header h1,.support-hero h1,.purchase-hero h1,.legal-page .legal-header h1{font-size:3rem}
  .store-hero::after,.support-hero::after,.purchase-hero::after{display:none}
  .channel-reel{grid-auto-columns:78vw}
  .channel-reel img{height:160px}
  .products-grid{grid-template-columns:1fr}
  .prod-card.featured{grid-column:auto;padding:28px 22px 24px}
  .prod-card.featured .prod-price{font-size:3.2rem}
}