/* ==========================================================================
   Myriad Voice and Myriad Notch — product pages (apps/voice.html, apps/notch.html)
   --------------------------------------------------------------------------
   These pages are built from the same components as apps/calendar.html
   (calendar-page.css, classes `mc-`), so the three product pages share one
   structure: hero with a real screenshot, icon section nav, feature sections,
   pricing, FAQ, changelog. This file only does two things:
     1. turns the violet of those components into the black and gold that
        styles.css gives <body data-app="voice"> and <body data-app="notch">;
     2. adds the few pieces the Calendar page has no use for (`pp-`).
   ========================================================================== */

/* ---- 1. Gold instead of violet ------------------------------------------- */
.mc-page:is([data-app="voice"], [data-app="notch"]) {
  --mc-accent: #d8b066;
  --mc-accent-grad: linear-gradient(135deg, #f0d08f, #c99a52);
  --mc-panel-fill: rgba(17,17,18,0.7);
}
:is([data-app="voice"], [data-app="notch"]) .mc-hero::before {
  background: radial-gradient(50% 50% at 50% 40%, rgba(216,176,102,0.22), transparent 70%);
}
:is([data-app="voice"], [data-app="notch"]) .mc-hero-glow { opacity: 0.16; }
:is([data-app="voice"], [data-app="notch"]) .mc-nav-in { background: rgba(14,14,16,0.8); }
:is([data-app="voice"], [data-app="notch"]) .mc-nav a.on { color: #17120a; box-shadow: 0 6px 18px -8px rgba(216,176,102,0.75); }
:is([data-app="voice"], [data-app="notch"]) .mc-points li::before { box-shadow: 0 0 12px rgba(216,176,102,0.55); }
:is([data-app="voice"], [data-app="notch"]) .mc-win-img {
  background: #0d0d10;
  box-shadow: 0 60px 140px -50px rgba(0,0,0,0.95), 0 24px 60px -30px rgba(216,176,102,0.22), 0 0 0 1px rgba(246,242,233,0.09);
}
:is([data-app="voice"], [data-app="notch"]) .mc-seg > [aria-selected="true"] { color: #17120a; box-shadow: 0 2px 12px rgba(216,176,102,0.35); }
:is([data-app="voice"], [data-app="notch"]) .mc-price.featured {
  border-color: rgba(216,176,102,0.55);
  background: linear-gradient(180deg, rgba(216,176,102,0.13), rgba(216,176,102,0.03) 45%, rgba(255,255,255,0.015));
  box-shadow: 0 40px 100px -50px rgba(216,176,102,0.55), inset 0 1px 0 rgba(255,255,255,0.12);
}
:is([data-app="voice"], [data-app="notch"]) .mc-faq-item button[aria-expanded="true"] .mc-faq-ic { background: rgba(216,176,102,0.2); }

/* ---- 2. Pieces of their own ----------------------------------------------- */

/* One fact per item under the hero buttons, separated by thin dots. */
.pp-facts { list-style: none; padding: 0; margin: 22px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; color: var(--ink-dim); font-size: 0.88rem; }
.pp-facts li { display: inline-flex; align-items: center; gap: 8px; }
.pp-facts .ic { width: 15px; height: 15px; color: var(--violet); }

/* A settings window is narrower than a Mac screen: keep it at its own size. */
.pp-win-narrow { max-width: 900px; margin-left: auto; margin-right: auto; }
.pp-win-hero { max-width: 980px; }

/* Price cards: Voice has three, Notch one. */
.pp-prices-1 { grid-template-columns: minmax(0, 560px); justify-content: center; }
.pp-price-note { color: var(--ink-faint); font-size: 0.82rem; line-height: 1.5; }

/* Honest limits — a quiet list, not a warning box. */
.pp-limits { max-width: 860px; margin: 0 auto; display: grid; gap: var(--mc-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-limits .mc-tile { background: rgba(255,255,255,0.025); }

/* Languages Voice hears: names only, no flags (a flag is a country, not a language). */
.pp-langs { max-width: 900px; margin: 0 auto; }
.pp-langs .lang { padding: 9px 16px; }

.pp-changelog { margin-top: 0; }

/* Two short strips (the pill with and without a notch), one above the other. */
.pp-strips { display: grid; gap: 56px; }
.pp-strips figure { margin: 0; }
.pp-strips .mc-caption { text-align: center; }
.pp-strips .mc-caption::before { display: none; }

@media (max-width: 760px) {
  .pp-limits { grid-template-columns: 1fr; }
  .pp-facts { gap: 8px 16px; font-size: 0.84rem; }
}