/* =========================================================================
   MIZTWEAKZ, page-utilities.css  (Paragon /utilities)
   Banner with the app icon, "The App" screenshot coverflow + feature grid,
   Utility Plans (billing selector, LED subscriber counter, three plan cards
   with halftone header bands, Paragon .utility-card fading hairline and the
   gold .outer-glow-container featured shell), the Utility Download card, FAQ.
   Loaded after site.css on /utilities/ only. Desktop values follow Paragon;
   the phone rules are additive at Paragon's own breakpoints
   (1350 / 1200 / 1000 / 850 / 800 / 768 / 700 / 600 / 500).
   ========================================================================= */

.utilities-page {
  --gold: #fbbf24;        /* Paragon Apex tier */
  --gold-rgb: 251, 191, 36;
  --teal: #10b981;        /* Paragon .discount-badge / sale colour */
  --teal-rgb: 16, 185, 129;
  --plan-green: #22c55e;  /* "Your Plan" pill (owner screenshot) */
  --blue: #3b82f6;        /* Paragon "Downloads" tag */
}

/* ---------- 1. banner (Paragon LargeBanner: tag, title, subtitle, CTA; ours adds the app icon + pills) ---------- */
.utilities-banner .banner-content { gap: 18px; max-width: 900px; }
.banner-app-icon {
  width: 96px; height: 96px; border-radius: 22px;
  filter: drop-shadow(0 0 30px rgba(var(--ambient-rgb), calc(.25 * var(--glow, 1))));
}
.utilities-banner .banner-subtitle { max-width: 760px; line-height: 1.7; }
.banner-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 6px; }
.banner-actions .nice-button .icon { width: 1em; height: 1em; }
.utilities-banner .banner-pills .title-tag { display: inline-flex; align-items: center; }

/* ---------- 2. section wrappers (Paragon .section-with-bar: eyebrow tag, then the 1620+ bracket) ---------- */
.bar-section { max-width: var(--max-content); margin: 0 auto; }
.bar-section.animate { scroll-margin-top: calc(var(--nav-height) + 30px); } /* .animate still translates the block 30px while the browser jumps to it */
.bar-eyebrow { align-self: flex-start; margin-bottom: 6px; }
@media (min-width: 1620px) {
  .bar-section.section-with-bar { padding: 0 140px; }
  .bar-eyebrow { position: absolute; left: 0; top: 4px; margin: 0; }
  .bar-section.section-with-bar::before {
    content: ""; position: absolute; left: 22px; top: 46px; bottom: 0; width: 10px; pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--color, var(--accent)) 22%, transparent); border-right: 0;
    border-radius: 4px 0 0 4px;
  }
}

/* ---------- 3. "The App" showcase (Paragon .showcase-section + PtuShowcaseCarousel coverflow) ---------- */
.showcase-title { margin-bottom: 0 !important; }
.showcase-subtitle { margin: 6px 0 30px; max-width: 640px; color: var(--text-70); line-height: 1.7; }

/* grid: 50px round button | stage | 50px round button, then dashes + counter, then the live caption */
.coverflow {
  display: grid; grid-template-columns: 50px minmax(0, 1fr) 50px; grid-template-areas: "prev stage next" "footer footer footer" "caption caption caption";
  align-items: center; column-gap: 20px; row-gap: 18px;
  width: 100%;
}
.coverflow-btn {
  grid-area: prev;
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; padding: 0; border-radius: 50%;
  background-color: rgba(70, 70, 70, .2);
  border: 1px solid rgba(126, 126, 126, .3);
  color: #fff; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.coverflow-btn--next { grid-area: next; }
.coverflow-btn .icon { width: 20px; height: 20px; }
.coverflow-btn--prev .icon { transform: rotate(180deg); }
.coverflow-btn:hover { background-color: rgba(121, 121, 121, .2); border-color: rgba(189, 189, 189, .3); transform: translateY(-1px); }
.coverflow-btn:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

.coverflow-stage {
  grid-area: stage; position: relative; overflow: hidden;
  perspective: 1400px;
  padding: 12px 0;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.coverflow-track { list-style: none; margin: 0; padding: 0; display: grid; justify-items: center; }
.coverflow-slide {
  grid-area: 1 / 1;                                   /* every slide shares one cell; the active one sits on top */
  width: min(100%, 760px);
  margin: 0; padding: 0;
  transform-style: preserve-3d;
  transition: transform .55s var(--ease-out-expo), opacity .4s ease, filter .4s ease;
  opacity: 0; pointer-events: none; z-index: 0;
  transform: translateX(0) scale(.5);
  will-change: transform, opacity;
}
.coverflow-slide figure { margin: 0; }
.coverflow-slide img {
  display: block; width: 100%; height: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 25px 60px rgba(0, 0, 0, .45);
  background: #111114;
}
html.js .coverflow-slide figcaption { display: none; }        /* the live caption below the dots shows the active one */
.coverflow-slide.is-active { opacity: 1; pointer-events: auto; z-index: 3; transform: translateX(0) scale(1); }
.coverflow-slide.is-prev, .coverflow-slide.is-next { opacity: .6; pointer-events: auto; z-index: 2; cursor: pointer; filter: brightness(.55); }
.coverflow-slide.is-prev { transform: translateX(-62%) rotateY(30deg) scale(.78); }
.coverflow-slide.is-next { transform: translateX(62%) rotateY(-30deg) scale(.78); }
.coverflow-slide.is-prev2, .coverflow-slide.is-next2 { opacity: .25; z-index: 1; filter: brightness(.4); }
.coverflow-slide.is-prev2 { transform: translateX(-100%) rotateY(36deg) scale(.6); }
.coverflow-slide.is-next2 { transform: translateX(100%) rotateY(-36deg) scale(.6); }

.coverflow-footer { grid-area: footer; display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.coverflow-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* Paragon's 40x4px dash indicators; a transparent ::before stretches the hit box to 44px tall */
.coverflow-dot {
  position: relative; width: 40px; height: 4px; padding: 0; border: 0; border-radius: 2px;
  background: rgba(255, 255, 255, .18); cursor: pointer;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.coverflow-dot::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; bottom: -20px; }
.coverflow-dot:hover { background: rgba(255, 255, 255, .4); }
.coverflow-dot[aria-current="true"] { background: var(--accent); box-shadow: 0 0 10px rgba(var(--ambient-rgb), calc(.7 * var(--glow, 1))); }
.coverflow-dot:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 6px; }
.coverflow-counter { font-family: var(--font-mono); font-size: .95rem; letter-spacing: .08em; color: var(--text-50); font-variant-numeric: tabular-nums; }
.coverflow-counter strong { color: var(--accent-bright); font-weight: 700; }
.coverflow-caption { grid-area: caption; margin: 0 auto; max-width: 760px; min-height: 3.4em; text-align: center; color: var(--text-70); line-height: 1.7; }
.coverflow-caption strong { color: #fff; font-weight: 500; }

/* no JS: a plain horizontally scrolling strip with every caption visible */
html:not(.js) .coverflow-stage { -webkit-mask-image: none; mask-image: none; overflow-x: auto; scroll-snap-type: x mandatory; }
html:not(.js) .coverflow-track { display: flex; gap: 16px; }
html:not(.js) .coverflow-slide { flex: 0 0 min(100%, 760px); scroll-snap-align: center; opacity: 1; transform: none; pointer-events: auto; }
html:not(.js) .coverflow-slide figcaption { margin-top: 10px; text-align: center; color: var(--text-70); font-size: .95rem; line-height: 1.6; }
html:not(.js) .coverflow-btn, html:not(.js) .coverflow-footer, html:not(.js) .coverflow-caption { display: none; }

/* feature grid: 3 x .glass-info-card (site.css); the gold cards carry a tier pill */
.app-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.app-feature-grid .glass-info-card h4 { flex-wrap: wrap; }
.tier-pill {
  margin-left: auto; padding: 2px 8px; border-radius: 6px;
  font-family: var(--font-body); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4;
  color: var(--gold); background: rgba(var(--gold-rgb), .15); border: 1px solid rgba(var(--gold-rgb), .35);
}

/* ---------- 4. plans head row: heading + billing selector on the left, counter on the right (Paragon .billing-row) ---------- */
.plans-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 30px; }
.plans-head-left { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 25px; }
.plans-head h2 { margin: 0; }
.plans-subtitle { margin: 14px 0 0; max-width: 640px; color: var(--text-70); line-height: 1.7; }

/* Paragon .billing-selector.nav-tab-container.compact: three .nav-tab buttons, the active one wears the red tab style */
.billing-selector { font-family: var(--font-display); flex-wrap: wrap; justify-content: center; }
.billing-selector .nav-tab { gap: 8px; }
.discount-badge {
  font-family: var(--font-body); font-size: .7em; font-weight: 700; line-height: 1.2;
  padding: 2px 6px; border-radius: 6px;
  color: var(--teal); background: rgba(var(--teal-rgb), .15);
}

/* Paragon .subscriber-count: mono red number over "ACTIVE SUBSCRIBERS"; the number gets an LED glow */
.subscriber-count {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 210px; padding: 12px 22px;
  border-radius: var(--radius-lg);
}
.led-count {
  font-family: var(--font-mono); font-size: 1.9rem; font-weight: 700; line-height: 1; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-bright);
  text-shadow: none;
}
.subscriber-count span { font-family: var(--font-body); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-50); }

/* ---------- 5. plan cards (Paragon .plans-grid: flex row, gap 20px, align-items flex-end) ---------- */
.plans-grid { display: flex; flex-wrap: nowrap; justify-content: center; align-items: stretch; gap: 20px; margin-top: 30px; } /* owner: one row, not staggered */
.plans-grid > * { display: flex; }
.plans-grid .plan-card { height: 100%; }

.plan-card-wrapper {
  --color: var(--accent); --tag-color: var(--color);
  position: relative; width: 380px; max-width: 100%;   /* Paragon .utility-card is 380px wide */
  padding-top: 22px;                                    /* room for the tab that peeks above the card */
  scroll-margin-top: calc(var(--nav-height) + 30px);
}
/* Paragon .card-tag: 55px tall tab, only the top peeks above the card, the rest hides behind the header band */
.plan-tag {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 0;
  display: flex; align-items: flex-start;
  height: 55px; padding: 3px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--tag-color) 25%, #1f1f21);
  color: var(--tag-color);
  font-family: var(--font-display); font-size: .8em; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5;
  white-space: nowrap;
}
.plan-tag--green { --tag-color: var(--plan-green); }
.plan-card { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; }
/* Paragon .utility-card: coloured top/left/right hairline that fades downward */
.plan-card-wrapper::after {
  content: ""; position: absolute; left: 0; right: 0; top: 22px; bottom: 0; z-index: 3; pointer-events: none;
  border-radius: var(--radius-xl); padding: 1px;
  background: linear-gradient(180deg, rgba(var(--ambient-rgb), calc(.80 * var(--glow, 1))), rgba(var(--ambient-rgb), calc(.18 * var(--glow, 1))) 55%, transparent 85%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* halftone header band (Paragon's dotted card-header art, 95px tall, 4px glowing bar on top, title at left 7%) */
.plan-top {
  display: block; height: 95px; aspect-ratio: auto;
  background:
    radial-gradient(circle, rgba(var(--ambient-rgb), calc(.62 * var(--glow, 1))) 0 1.15px, transparent 1.7px) 0 0 / 7px 7px,
    radial-gradient(ellipse at 12% 50%, rgba(var(--ambient-rgb), calc(.32 * var(--glow, 1))), transparent 62%),
    linear-gradient(180deg, #232327, #17171a);
}
.plan-top::before { z-index: 2; }
.plan-top::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(23, 23, 26, .05) 0%, rgba(23, 23, 26, .55) 45%, rgba(23, 23, 26, .92) 100%);
}
.plan-top .top-card-text { top: 50%; transform: translateY(-50%); z-index: 3; margin: 0; font-size: 2em; line-height: 1; }

/* price row */
.plan-card .price-row { align-items: center; gap: 8px; }
.plan-card .price-currency { margin-left: 0; }
.plan-card .sale-badge {
  color: var(--teal); background: rgba(var(--teal-rgb), .15); border-color: rgba(var(--teal-rgb), .45);
  animation-name: mz-plan-sale-pulse;
}
@keyframes mz-plan-sale-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(var(--teal-rgb), .3); }
  50% { box-shadow: 0 0 15px rgba(var(--teal-rgb), .5); }
}
.billing-note { margin: -12px 0 0; font-size: .85rem; color: var(--text-50); }
.plan-card [hidden] { display: none !important; }

/* features: "Features" header + check rows; excluded rows are dimmed with an x */
.plan-features { display: flex; flex-direction: column; gap: 10px; }
.plan-card .features { margin-bottom: 0; }
.plan-card .features li.is-excluded { color: var(--text-50); }
.plan-card .features li.is-excluded .icon { color: rgba(255, 255, 255, .28); }
.plan-card .book-now-box { width: 100%; }
.plan-card .nice-button .icon { width: 1em; height: 1em; }

/* featured shell (Paragon .outer-glow-container, Apex gold: radius 26px, 4px bar, texture in the top 15%, padding 40px 5px 5px) */
.plan-shell {
  --color: var(--gold); --tag-color: var(--gold);
  width: 390px; max-width: 100%; height: auto;
  padding: 5px;
  scroll-margin-top: calc(var(--nav-height) + 30px);
  background: linear-gradient(160deg, rgba(var(--gold-rgb), .32), rgba(var(--gold-rgb), .10) 60%, rgba(var(--gold-rgb), .22));
  box-shadow: 0 0 25px rgba(var(--gold-rgb), calc(.30 * var(--glow, 1))), 0 0 60px rgba(var(--gold-rgb), calc(.16 * var(--glow, 1))), inset 0 1px rgba(255, 255, 255, .25);
}
.plan-shell::before { background: var(--gold); box-shadow: 0 0 15px 3px rgba(var(--gold-rgb), calc(.6 * var(--glow, 1))); }
.plan-shell::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 15%; z-index: 0; pointer-events: none;
  border-radius: 26px 26px 0 0; opacity: .4;
  background: radial-gradient(circle, rgba(var(--gold-rgb), .9) 0 1px, transparent 1.5px) 0 0 / 6px 6px;
  -webkit-mask: linear-gradient(#000, transparent);
  mask: linear-gradient(#000, transparent);
}
.plan-shell .plan-tag { top: -14px; z-index: 3; }
.plan-shell .plan-card { z-index: 2; }
.plan-shell .nice-button-box { --color: var(--gold); }

/* ---------- 6. download card (Paragon DownloadCard: 108px .ptu-icon, name, version chip, blurb, Download, "size • Changelog", SHA-256) ---------- */
.download-card { --color: var(--blue); width: 100%; max-width: 980px; padding: 30px; display: flex; flex-direction: column; gap: 26px; }
.download-main { display: flex; align-items: flex-start; gap: 26px; }
.download-icon {
  flex: none; width: 108px; height: 108px; object-fit: contain; border-radius: 24px;
  filter: drop-shadow(0 0 30px rgba(var(--ambient-rgb), calc(.25 * var(--glow, 1))));
}
.download-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.download-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.download-title-row h3 { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.version-chip { font-family: var(--font-mono); font-size: .85rem; }
.download-card .description { margin: 0; max-width: 640px; }
.download-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.download-actions .nice-button .icon { width: 1em; height: 1em; }
.download-actions .btn-clear { gap: 10px; }
.download-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: .9rem; color: var(--text-50); }
.meta-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6; }
.download-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: .9rem; line-height: 1.6; color: var(--text-70); }
.download-note .icon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--blue); }

.download-details { display: grid; grid-template-columns: 1.4fr 1fr; gap: 26px; padding-top: 26px; border-top: 1px solid var(--hairline-soft); }
.detail-label { display: block; margin-bottom: 10px; font-family: var(--font-body); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-50); }
.checksum-row { display: flex; align-items: stretch; gap: 10px; }
.checksum {
  flex: 1 1 auto; min-width: 0; padding: 10px 12px;
  font-family: var(--font-mono); font-size: .8rem; line-height: 1.5; word-break: break-all;
  color: var(--text); background: rgba(0, 0, 0, .35);
  border: 1px solid var(--hairline-soft); border-radius: 10px;
  user-select: all;
}
.copy-btn { flex: none; align-self: center; gap: 8px; }
.copy-btn .icon { width: 16px; height: 16px; }
.copy-btn.is-done { border-color: rgba(var(--teal-rgb), .6); color: var(--teal); }
.detail-note { margin: 10px 0 0; font-size: .85rem; line-height: 1.6; color: var(--text-50); }
.detail-note strong { color: var(--text-70); font-weight: 500; }
.detail-note code { font-family: var(--font-mono); font-size: .8em; color: var(--text); word-break: break-word; }
.download-reqs .features { margin: 0; }

/* ---------- 7. responsive ---------- */
@media (max-width: 1250px) {
  /* Paragon reorders at 1200, but three cards (380 + 390 + 380 + gaps) plus the page padding and scrollbar only fit
     above ~1245px, so we reorder where the row actually wraps: Apex, Edge, Core = Ultimate, Basic, Free */
  .plan-shell { order: 1; }
  #plan-basic { order: 2; }
  #plan-free { order: 3; }
}
@media (max-width: 1000px) {
  /* Paragon: side slides invisible <=1000 */
  .coverflow-slide.is-prev2, .coverflow-slide.is-next2 { opacity: 0; pointer-events: none; }
  .app-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  /* Paragon: arrows hidden, no edge mask, slide 100% wide, no side slides */
  .coverflow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "footer" "caption"; }
  .coverflow-btn { display: none; }
  .coverflow-stage { -webkit-mask-image: none; mask-image: none; padding: 0; }
  .coverflow-slide { width: 100%; }
  .coverflow-slide.is-prev, .coverflow-slide.is-next { opacity: 0; pointer-events: none; }
  .coverflow-slide img { box-shadow: none; }
}
@media (max-width: 800px) {
  /* single column, featured card first (owner request) */
  .plans-grid { flex-direction: column; align-items: center; }
  .plan-card-wrapper, .plan-shell { width: 100%; max-width: min(413px, 92dvw); }
}
@media (max-width: 768px) {
  .billing-selector .nav-tab { min-height: 44px; }                       /* 44px tap targets */
  .discount-badge, .subscriber-count span, .tier-pill, .detail-label { font-size: .75rem; } /* nothing renders below 12px */
  .coverflow-dot { width: 24px; }                                        /* Paragon: indicators 24px */
  .banner-app-icon { width: 80px; height: 80px; border-radius: 18px; }
}
@media (max-width: 700px) {
  .plans-head { flex-direction: column; align-items: stretch; }
  .plans-head-left { flex-direction: column; align-items: flex-start; gap: 14px; }
  .subscriber-count { flex-direction: row; justify-content: space-between; align-items: center; gap: 14px; min-width: 0; }
  /* Paragon: .download-main stacks <=700 */
  .download-card { padding: 24px 20px; }
  .download-main { flex-direction: column; align-items: center; text-align: center; }
  .download-title-row, .download-actions, .download-meta { justify-content: center; }
  .download-note { text-align: left; }
  .download-details { grid-template-columns: 1fr; }
  .checksum-row { flex-direction: column; }
  .copy-btn { align-self: flex-start; }
}
@media (max-width: 640px) {
  .app-feature-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .coverflow-counter { display: none; }                                  /* Paragon: counter hidden <=600 */
}
@media (max-width: 500px) {
  /* Paragon tightens the tabs (6px 10px, .85rem) and hides the badges; we keep the badges and lay the three pills
     out as equal columns so the selector never overflows a 375px viewport */
  .billing-selector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 6px; width: 100%; }
  .billing-selector .nav-tab { flex-direction: column; justify-content: center; gap: 4px; padding: 6px 10px; font-size: .85rem; white-space: normal; text-align: center; }
  .plans-head-left { align-items: stretch; }
  .coverflow-dot { width: 18px; }                                        /* 13 dashes + gaps fit inside 335px */
  .coverflow-dots { gap: 6px; }
}
@media (max-width: 480px) {
  .banner-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .banner-actions .nice-button-box, .banner-actions .nice-button { width: 100%; }
  .download-actions { flex-direction: column; align-items: stretch; }
  .download-actions .nice-button-box, .download-actions .nice-button { width: 100%; }
  .download-actions .btn-clear { justify-content: center; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .coverflow-slide, .coverflow-btn, .coverflow-dot { transition: none; }
}

/* plans wrap fallback below 1000px (owner: one row on desktop) */
@media (max-width: 999px) { .plans-grid { flex-wrap: wrap; } }