/* ==========================================================================
   Shared design system for the secondary pages (About us, Pricing, Services,
   Contacts, Blog, FAQ) — 2026-08-21. Brings these pages visually in line
   with the redesigned homepage (same fonts, colors, buttons, header) without
   touching homepage.css itself, which the client already approved section
   by section. Token values here are intentionally a duplicate of
   homepage.css's #mm-home block, not a refactor of it — #mm-home keeps its
   own copy, this file gives every other real page the same values on
   :root so a shared .mm-page wrapper can use them too.
   ========================================================================== */

@font-face{
  font-family:'Archivo';
  src:url('../fonts/Archivo-Variable.woff2') format('woff2-variations'), url('../fonts/Archivo-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
}
@font-face{
  font-family:'Roboto Mono';
  src:url('../fonts/RobotoMono-Medium.woff2') format('woff2');
  font-weight:500;
  font-display:swap;
}
@font-face{
  font-family:'Avenir Next';
  src:url('../fonts/AvenirNext-Regular.woff2') format('woff2');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'Avenir Next';
  src:url('../fonts/AvenirNext-Medium.woff2') format('woff2');
  font-weight:500; font-display:swap;
}
@font-face{
  font-family:'Avenir Next';
  src:url('../fonts/AvenirNext-Bold.woff2') format('woff2');
  font-weight:700; font-display:swap;
}

:root{
  --mm-paper:        #FFFFFF;
  --mm-paper-2:      #F5F4F1;
  --mm-paper-3:      #EBE9E4;

  --mm-ink:          #0E0E10;
  --mm-ink-2:        #17171A;
  --mm-ink-3:        #232328;

  --mm-t-primary:    #0E0E10;
  --mm-t-secondary:  #55555E;
  --mm-t-muted:      #7A7A85;
  --mm-t-inv:        #F7F6F3;
  --mm-t-inv-dim:    #A8A8B0;

  --mm-blue:         #0B5FFF;
  --mm-blue-deep:    #0A3FB0;
  --mm-blue-hover:   #0949CC;
  --mm-blue-soft:    #E8EFFF;

  --mm-amber:        #C8791A;
  --mm-amber-on-dark:#E8A33D;
  --mm-green:        #0F7A4A;

  --font-display:'Archivo',-apple-system,'Segoe UI',sans-serif;
  --font-body:'Avenir Next',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Roboto Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --fs-h1:      clamp(2.1rem, 4vw, 3.25rem);
  --fs-h2:      clamp(2.0rem, 3.8vw, 3.25rem);
  --fs-h3:      clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-lede:    clamp(1.0625rem, 1.3vw, 1.375rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.8125rem;
  --fs-label:   0.75rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-body:    1.55;
  --lh-relaxed: 1.65;

  --mm-wrap:      1280px;
  --mm-wrap-text: 820px;
  --mm-edge-d:    40px;
  --mm-edge-t:    32px;
  --mm-edge-m:    20px;
  --mm-space-section-y: clamp(56px, 7vw, 96px);

  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   12px;
  --sh-card: 0 1px 2px rgba(14,14,16,.05), 0 8px 24px -12px rgba(14,14,16,.12);
  --sh-lift: 0 2px 4px rgba(14,14,16,.06), 0 16px 40px -16px rgba(14,14,16,.18);
}

/* ---------- base resets, scoped to the shared page wrapper ---------- */
.mm-page{
  font-family:var(--font-body);
  color:var(--mm-t-primary);
  -webkit-font-smoothing:antialiased;
}
.mm-page, .mm-page *{box-sizing:border-box;}
.mm-page img{max-width:100%;}
.mm-page h1,.mm-page h2,.mm-page h3{font-family:var(--font-display);margin:0 0 .5em;color:var(--mm-t-primary);}
.mm-page p{line-height:var(--lh-body);color:var(--mm-t-secondary);}
.mm-page .mm-wrap{max-width:var(--mm-wrap);margin:0 auto;padding-inline:var(--mm-edge-m);}
@media(min-width:768px){.mm-page .mm-wrap{padding-inline:var(--mm-edge-t);}}
@media(min-width:1280px){.mm-page .mm-wrap{padding-inline:var(--mm-edge-d);}}

/* ---------- scroll-reveal motion (design-consilium finding: the page was
   nearly static outside the two inherited homepage widgets — the client
   explicitly asked for "Apple-style" motion). Same fade/slide-up language
   as homepage.css's #mm-home .mm-r, extended in homepage.js to also
   observe .mm-page .mm-r (a much longer safety-net delay there — see the
   comment in homepage.js — so this doesn't fire before a visitor has
   actually scrolled anywhere near most sections on a long page). ---------- */
.mm-page .mm-r{opacity:0;transform:translateY(16px);transition:opacity 520ms cubic-bezier(.2,.7,.3,1), transform 520ms cubic-bezier(.2,.7,.3,1);}
.mm-page .mm-r.mm-in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .mm-page .mm-r{opacity:1!important;transform:none!important;transition:none!important;}
}
/* Stagger real repeated-card grids so they cascade in rather than popping
   as one flat block — each grid's own children get an increasing delay. */
.mm-page .mm-process-grid.mm-r > *,
.mm-page .mm-equipment-grid.mm-r > *,
.mm-page .mm-addons-grid.mm-r > *{opacity:0;transform:translateY(16px);transition:opacity 520ms cubic-bezier(.2,.7,.3,1), transform 520ms cubic-bezier(.2,.7,.3,1);}
.mm-page .mm-process-grid.mm-r.mm-in > *,
.mm-page .mm-equipment-grid.mm-r.mm-in > *,
.mm-page .mm-addons-grid.mm-r.mm-in > *{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .mm-page .mm-process-grid.mm-r > *, .mm-page .mm-equipment-grid.mm-r > *, .mm-page .mm-addons-grid.mm-r > *{opacity:1!important;transform:none!important;transition:none!important;}
}
.mm-page .mm-process-grid.mm-r > *:nth-child(1),.mm-page .mm-equipment-grid.mm-r > *:nth-child(1),.mm-page .mm-addons-grid.mm-r > *:nth-child(1){transition-delay:0ms;}
.mm-page .mm-process-grid.mm-r > *:nth-child(2),.mm-page .mm-equipment-grid.mm-r > *:nth-child(2),.mm-page .mm-addons-grid.mm-r > *:nth-child(2){transition-delay:70ms;}
.mm-page .mm-process-grid.mm-r > *:nth-child(3),.mm-page .mm-equipment-grid.mm-r > *:nth-child(3),.mm-page .mm-addons-grid.mm-r > *:nth-child(3){transition-delay:140ms;}
.mm-page .mm-process-grid.mm-r > *:nth-child(4),.mm-page .mm-equipment-grid.mm-r > *:nth-child(4),.mm-page .mm-addons-grid.mm-r > *:nth-child(4){transition-delay:210ms;}
.mm-page .mm-process-grid.mm-r > *:nth-child(5),.mm-page .mm-addons-grid.mm-r > *:nth-child(5){transition-delay:280ms;}
.mm-page .mm-process-grid.mm-r > *:nth-child(6),.mm-page .mm-addons-grid.mm-r > *:nth-child(6){transition-delay:350ms;}
.mm-page .mm-addons-grid.mm-r > *:nth-child(7){transition-delay:420ms;}

/* Hover-lift, matching the homepage's card language — previously only
   buttons had any hover transition on this page at all. */
.mm-page .mm-process-step,
.mm-page .mm-equipment-card,
.mm-page .mm-price-card{transition:transform 220ms ease, box-shadow 220ms ease;}
.mm-page .mm-process-step:hover,
.mm-page .mm-equipment-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lift);}

/* Slow continuous rotation on decorative icons — the client's explicit
   "things spinning, rotating" ask, applied where it reads as an intentional
   detail (small icon glyphs) rather than a distracting gimmick on body text
   or photos. Pauses on hover so it doesn't fight a reader's eye. */
.mm-page .mm-process-step__icon,
.mm-page .mm-addon-card img{transition:transform 220ms ease;}
.mm-page .mm-process-step:hover .mm-process-step__icon,
.mm-page .mm-addon-card:hover img{animation:mm-spin-slow 6s linear infinite;}
@keyframes mm-spin-slow{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){
  .mm-page .mm-process-step:hover .mm-process-step__icon,
  .mm-page .mm-addon-card:hover img{animation:none;}
}

/* ---------- buttons — identical to the homepage's .mm-btn system ---------- */
.mm-page .mm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:700;font-size:var(--fs-body);
  padding:14px 28px;min-height:48px;border-radius:var(--r-md);
  border:1px solid transparent;cursor:pointer;letter-spacing:0;
  transition:background 160ms, border-color 160ms;
  text-decoration:none;
}
.mm-page .mm-btn:active{transform:translateY(1px);}
.mm-page .mm-btn:focus-visible{outline:2px solid var(--mm-blue);outline-offset:3px;}
.mm-page .mm-btn--primary{background:var(--mm-blue);color:#fff;}
.mm-page .mm-btn--primary:hover{background:var(--mm-blue-hover);}
.mm-page .mm-btn--ghost{background:transparent;color:var(--mm-t-primary);border-color:var(--mm-t-primary);}
.mm-page .mm-btn--ghost:hover{background:var(--mm-paper-2);}
.mm-page .mm-btn--ghost-inv{background:transparent;color:var(--mm-t-inv);border-color:var(--mm-ink-3);}
.mm-page .mm-btn--ghost-inv:hover{background:var(--mm-ink-2);}

.mm-page .mm-eyebrow{
  display:inline-block;font-family:var(--font-body);font-weight:700;
  font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--mm-blue-deep);
}

/* ---------- generic page banner (replaces the old page_banner__* look) ---------- */
.mm-page .mm-page-banner{
  position:relative;background:var(--mm-ink);
  padding:64px 0;margin-top:88px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  overflow:hidden;
}
.mm-page .mm-page-banner__bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.34;
}
.mm-page .mm-page-banner__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(14,14,16,.55) 0%, rgba(14,14,16,.82) 100%);
}
.mm-page .mm-page-banner__title{
  position:relative;z-index:1;
  font-size:var(--fs-h1);font-weight:800;line-height:var(--lh-tight);
  color:#fff;letter-spacing:-.01em;
  padding-inline:var(--mm-edge-m);
}
@media(max-width:767px){.mm-page .mm-page-banner{margin-top:60px;padding:44px 0;}}

/* ==========================================================================
   2026-08-25 (client ask: redesign Music Production's hero — reusable for
   any of the other still-un-redesigned individual service pages later).
   Richer variant of .mm-page-banner: left-aligned, real photo bg (same
   technique as the homepage's own .mm-hero — dark ink base + gradient over
   a photo, not just a flat overlay), an eyebrow line, and room for a real
   trust row + CTA button sitting IN the dark hero (same real trust-badge
   language already used elsewhere, just the on-dark variant this time).
   ========================================================================== */
.mm-page .mm-service-hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(52vh,460px);
  display:flex;align-items:center;
  padding-block:64px;margin-top:88px;
  background:var(--mm-ink);
}
@media(max-width:767px){.mm-page .mm-service-hero{margin-top:60px;min-height:auto;padding-block:48px;}}
.mm-page .mm-service-hero__bg{position:absolute;inset:0;z-index:0;}
.mm-page .mm-service-hero__bg img,
.mm-page .mm-service-hero__bg video{width:100%;height:100%;object-fit:cover;display:block;}
.mm-page .mm-service-hero__bg::after{
  content:"";position:absolute;inset:0;
  /* This hero's background is real client-supplied VIDEO (service_head_video),
     not a static photo — a moving background makes text legibility worse
     than a photo would, and the client asked for the text noticeably
     whiter/more readable a second time after the first darkening pass.
     Darkened further still. */
  background:linear-gradient(180deg, rgba(14,14,16,.82) 0%, rgba(14,14,16,.93) 100%);
}
.mm-page .mm-service-hero__inner{position:relative;z-index:1;width:100%;max-width:640px;}
.mm-page .mm-service-hero__eyebrow{color:var(--mm-amber-on-dark);margin-bottom:14px;}
.mm-page .mm-service-hero h1{
  color:#fff;font-size:var(--fs-h1);font-weight:800;line-height:var(--lh-tight);
  letter-spacing:-.01em;margin:0 0 24px;text-wrap:balance;
  text-shadow:0 2px 20px rgba(0,0,0,.6);
}
/* Was falling back to the generic .mm-page p color (a mid-grey meant for
   light sections) on a dark hero photo — real contrast bug, not just an
   overlay-darkness one. */
/* $short_description is real WYSIWYG content — wp_kses_post/wpautop wraps it
   in its own <p>, and the base ".mm-page p{color:var(--mm-t-secondary)}"
   rule (meant for light sections) matches that nested <p> DIRECTLY, which
   beats an inherited color from this wrapper regardless of specificity.
   Targeting the real element (and both, in case the field ever renders
   without a <p>) fixes it for good. */
.mm-page .mm-service-hero__sub,
.mm-page .mm-service-hero__sub p{
  color:rgba(255,255,255,.96);font-size:var(--fs-body);line-height:var(--lh-body);
  text-shadow:0 1px 14px rgba(0,0,0,.55);
}
/* 2026-08-29 (client screenshot: the 2nd column of this 4-item/2x2 trust
   row doesn't line up between the two rows -- confirmed via
   getBoundingClientRect at 1050px, a width none of the earlier QA passes
   happened to test: "More than 10 years of experience" (row 1, col 2)
   started at x=477 while "Highly Ranked by Customers" (row 2, col 2)
   started at x=449, a 28px drift. Root cause: flex-wrap has no concept
   of "columns" -- each row's 2nd item starts wherever that row's own
   1st item happens to end, so unequal text lengths between rows ("Top-
   Nominated Producers" vs "Apple Digital Masters") shift column 2
   sideways per row. grid-template-columns:repeat(2,max-content) sizes
   each COLUMN once, from the widest item that lands in it across every
   row, so column 2 always starts at the same x regardless of which
   row's text is shorter -- same fix pattern already used this session
   for the order-form checkbox grid and the music-production genre
   grid. All 6 templates that use this shared component render exactly
   4 <li> items (confirmed by grep), so 2 columns is always correct. */
.mm-page .mm-service-trust-row{
  display:grid;grid-template-columns:repeat(2,max-content);column-gap:22px;row-gap:10px;
  list-style:none;margin:0 0 28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.22);
}
.mm-page .mm-service-trust-row li{
  display:flex;align-items:center;gap:7px;font-size:var(--fs-caption);
  font-weight:500;color:rgba(255,255,255,.94);white-space:nowrap;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.mm-page .mm-service-trust-row svg{flex:none;color:#BFD1FF;width:14px;height:14px;}
@media(max-width:599px){.mm-page .mm-service-trust-row{grid-template-columns:1fr;}}

/* homepage.css's own #samples-h2 color rule is ID-scoped to the homepage's
   specific heading id — this page reuses the same .mm-samples-photo dark
   photo-bg treatment (real samples_background_image asset) but has its own
   heading id, so it needs its own (generic, class-based, reusable) rule.
   homepage.css ALSO has a broader "#mm-home .mm-section-head h2" rule
   (dark text, for the homepage's own light-background section-heads) that
   this h2 matches too since it's inside #mm-home — an ID selector beats
   any number of classes no matter how specific, so this needed !important
   to actually win (confirmed via the CSSOM: both rules were matching,
   #mm-home's ID-based one was taking it). */
.mm-page .mm-samples-photo h2{color:#fff !important;}

/* ---------- generic content section rhythm ---------- */
.mm-page .mm-page-section{padding-block:var(--mm-space-section-y);}
.mm-page .mm-page-section + .mm-page-section{padding-top:0;}

/* [insert_home_gallery] (functions.php shortcode override) still outputs
   the parent theme's old MUI grid classes (mui-col-xs-12/mui-col-md-12),
   which float:left. A .mm-wrap that only contains a floated child
   collapses to height:0 (no clearfix), and the floated gallery then
   overlaps whatever comes after it — real, reproducible mobile horizontal
   overflow (bisection-confirmed on the Mastering rebuild).
   2026-08-26 fix: the original selector here was bare `.mui-col-xs-12` /
   `.mui-col-md-12`, un-scoped — it matched EVERY multi-column MUI grid on
   every .mm-page (e.g. the Pricing page's Add-ons cards, which pair
   mui-col-xs-12 with mui-col-md-4/mui-col-lg-4 for a 3-column layout at
   desktop), forcing width:100% and float:none on all of them regardless
   of breakpoint — silently collapsing every such grid into one column
   sitewide. #insert_home_gallery's real output only ever has the id
   #home-shortcode-gallery (confirmed in functions.php), so scope to that
   id instead of the bare classes — same fix, zero blast radius elsewhere. */
#home-shortcode-gallery.mui-col-xs-12,
#home-shortcode-gallery.mui-col-md-12{float:none;width:100%;}

/* ==========================================================================
   Header — same fix as the homepage's `.home #masthead` rules, applied to
   these 6 pages via the `.mm-redesigned` body class (added in functions.php)
   instead of `.home`, which WordPress reserves for the front page only.
   ========================================================================== */
.mm-redesigned #masthead{
  background:rgba(255,255,255,.86) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color 160ms ease;
  height:72px;
}
.mm-redesigned #masthead.mm-scrolled{border-bottom-color:var(--mm-paper-3);}
.mm-redesigned #masthead,
.mm-redesigned #masthead a,
.mm-redesigned #masthead .head-wrap{color:#0E0E10 !important;}
.mm-redesigned #masthead nav a{
  font-family:'Avenir Next',-apple-system,sans-serif !important;
  font-size:.875rem !important;font-weight:500 !important;
  color:#55555E !important;
}
.mm-redesigned #masthead nav a:hover{color:#0E0E10 !important;}
.mm-redesigned #masthead .menu_logo__img{filter:invert(1) brightness(0.15);}
@media(max-width:767px){.mm-redesigned #masthead{height:60px;}}

/* ==========================================================================
   2026-08-23 (design consilium — top-priority finding, confirmed systemic
   on Mastering and Dolby Atmos, both from the shared service-singe-*.php
   parent templates): CTA buttons on individual service pages use the
   parent theme's real global classes at their ORIGINAL colors — .btn-round
   (green #6db25f, "Purchase or Get Prices") and .btn-cta.btn-green (teal
   #267780, "View all Samples") — never brought onto the site's blue accent
   the way every other redesigned page already was. Pricing hit this same
   .btn-round case already (see its own page-pricing.php override) — same
   fix, extended here via .mm-redesigned (already on every service page's
   body via mm_header_only_ids() in functions.php) so it's one fix instead
   of duplicating it across 5 separate parent templates. Real button
   text/hrefs/functionality untouched — colors only.
   ========================================================================== */
.mm-redesigned .btn-round{
  background:var(--mm-blue) !important;color:#fff !important;
  border-color:transparent !important;
}
.mm-redesigned .btn-round:hover{background:var(--mm-blue-hover) !important;}
.mm-redesigned .btn-cta{
  color:var(--mm-blue) !important;border-color:var(--mm-blue) !important;
}
.mm-redesigned .btn-cta:hover{
  color:var(--mm-blue-hover) !important;
  box-shadow:inset 0 0 15px var(--mm-blue) !important;
}
/* 2026-08-23 (item 11 consilium finding, CONFIRMED live regression): the
   real markup is `<a class="btn-cta btn-green">View all Samples</a>` (both
   classes on the same element, e.g. service-singe-mastering.php:193) — the
   `.btn-cta` rule above sets `color:var(--mm-blue)`, and this rule was
   only overriding `background`, never `color`, so the two combined into
   invisible blue text on a blue button. `color:#fff` added below to
   actually fix it. */
.mm-redesigned .btn-green{
  background:var(--mm-blue) !important;border-color:var(--mm-blue) !important;
  color:#fff !important;
}
.mm-redesigned .btn-green:hover{
  color:var(--mm-blue) !important;background:var(--mm-blue-soft) !important;
  border-color:var(--mm-blue) !important;
  box-shadow:inset 0 0 1px var(--mm-blue) !important;
}

.mm-redesigned #masthead .menu-toggle line{stroke:#0E0E10;}
@media(max-width:991.1px){
  .mm-redesigned #primary-menu{
    background:var(--mm-paper) !important;
    width:min(320px, 84vw);
    padding:100px 28px 32px;
    box-shadow:-16px 0 48px rgba(14,14,16,.18);
    overflow-y:auto;
  }
  .mm-redesigned #primary-menu li{width:100%;}
  .mm-redesigned #primary-menu li a{
    display:block;width:100%;
    padding:16px 4px !important;
    border-bottom:1px solid var(--mm-paper-3);
    transition:color 150ms ease;
  }
  .mm-redesigned #primary-menu li:last-child a{border-bottom:none;}
  .mm-redesigned #primary-menu li a:hover,
  .mm-redesigned #primary-menu li a:focus-visible{color:var(--mm-blue) !important;}
}

/* ==========================================================================
   2026-08-25 (client ask: individual service pages should convert like the
   homepage). Components below were first built page-scoped on page-
   pricing.php/faq-page.php — moved/copied here (not removed from those
   files, to avoid touching an already-approved page under time pressure)
   now that a SECOND real page (Upgrade Mixing and Mastering) needs the
   exact same real "Why Choose Us" card / reviews-card / pricing-card /
   FAQ-accordion look, per the client's own "перенесемо принцип" plan for
   the rest of the 11 service pages after this one. Same real values,
   same real gotchas already fixed once (kept in the comments below).
   ========================================================================== */

/* ---------- "Why Choose Us?" seo_text cards (real WYSIWYG content, same
   mastering-seo-block markup already used by seo_text on Pricing/Mastering/
   Complete/Upgrade's own ACF field) ---------- */
.mm-page .mastering-seo-block{
  position:relative;
  background:var(--mm-paper);border:1px solid var(--mm-paper-3);
  border-radius:var(--r-lg);padding:40px;margin:0 auto 20px;max-width:720px;
  text-align:left;
}
.mm-page .mastering-seo-block h3{
  font-family:var(--font-display);font-weight:700;font-size:1.35rem;
  margin:0 0 14px;color:var(--mm-t-primary);
}
/* the parent theme's .mastering-seo-block h3:before renders a small
   checkmark badge as position:absolute, left:-62px — built for the
   ORIGINAL flat-text layout (35px margin, no card border); inside this
   bordered card it has no room and nothing to anchor to. Hidden, not
   relocated. */
.mm-page .mastering-seo-block h3:before{display:none;}
.mm-page .mastering-seo-block p{margin:0;text-align:left;max-width:none;font-size:1.02rem;line-height:1.75;}
.mm-page .mastering-seo-block.text_with_image{
  max-width:720px;display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-left:auto;margin-right:auto;
}
.mm-page .mastering-seo-block.text_with_image > h3{width:100%;}
.mm-page .mastering-seo-block .text_part{margin:0;padding:0;flex:1 1 320px;max-width:none;}
.mm-page .mastering-seo-block .image_part{margin:0;padding:0;flex:1 1 220px;max-width:280px;}
.mm-page .mastering-seo-block .image_part img{border-radius:var(--r-md);width:100%;height:auto;margin-top:16px;}

/* real review-platform logos row (real Trustpilot/Google/Reviews.io/FB links) */
.mm-page .seo_block__text{max-width:720px;margin:40px auto;text-align:center;}
.mm-page .seo-reviews{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px;margin-top:16px;}
/* These 4 real logo files (Google, Trustpilot, Reviews.io, Facebook) are
   very different natural sizes (80-300px wide). The parent theme's own
   `.seo-reviews img{height:75px;min-width:150px;padding:20px}` (style.css)
   forces every logo to at least 150+40=190px wide regardless of its own
   aspect ratio — 4 of those plus gaps overflow the row's real width
   (often capped to 720px by the shared .seo_block__text text-column
   wrapper this row sits inside), so the last logo(s) wrap onto their own,
   awkwardly centered row. Override every one of those properties
   explicitly (not just add a competing one) so each logo instead scales
   to a compact, uniform height and comfortably fits all 4 in one row
   down to that 720px width. */
.mm-page .seo-reviews img{
  opacity:.85;transition:opacity 150ms ease;
  height:28px!important;width:auto!important;min-width:0!important;
  max-width:none!important;padding:0!important;object-fit:contain!important;
}
.mm-page .seo-reviews a:hover img{opacity:1;}

/* the one real inline CTA inside the WYSIWYG content ("Purchase or Get Prices") */
.mm-page .agree_btn{display:flex;justify-content:center;margin:32px 0;}
.mm-page .btn-round{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:700;font-size:var(--fs-body);
  padding:14px 28px;min-height:48px;border-radius:var(--r-md);
  background:var(--mm-blue);color:#fff !important;border:1px solid transparent;
  text-decoration:none;transition:background 160ms ease;
}
.mm-page .btn-round:hover{background:var(--mm-blue-hover);}

/* ---------- real 4-card pricing grid look, reused for a single-service
   price card too (mm-pricing-cards/mm-price-card, same real data/look as
   the homepage's own Pricing section) ---------- */
.mm-page .mm-pricing-cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  max-width:1100px;margin:32px auto;
}
@media(max-width:1199px){.mm-page .mm-pricing-cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:599px){.mm-page .mm-pricing-cards{grid-template-columns:1fr;}}
.mm-page .mm-price-card{
  background:var(--mm-ink-2);border:1px solid var(--mm-ink-3);
  border-radius:var(--r-lg);display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:border-color 160ms ease,transform 160ms ease,box-shadow 160ms ease;
}
.mm-page .mm-price-card:hover{border-color:rgba(255,255,255,.28);}
.mm-page .mm-price-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;}

/* Bottom photo gallery (real gallery_bottom images, Swiper) — this class
   has NEVER had a CSS rule in either theme (confirmed via grep of every
   .css file) — Swiper's own base CSS gives .swiper-slide a 100%-height
   box with no object-fit on the <img> inside, so real photos with a
   different aspect ratio than the slide box were stretching to fill it. */
.mm-page #bottom-gallery .home-galery-img,
.mm-page #home-shortcode-gallery .home-galery-img{
  width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--r-md);
}
.mm-page .mm-price-card .mm-price-body{padding:20px 20px 24px;display:flex;flex-direction:column;flex:1;gap:10px;text-align:left;}
.mm-page .mm-price-card h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:#fff;margin:0;}
.mm-page .mm-price-card .mm-price{font-family:var(--font-mono);font-size:1.4rem;font-weight:500;color:#fff;}
.mm-page .mm-price-card p{font-size:.85rem;color:rgba(247,246,243,.68);line-height:1.55;margin:0;text-align:left;}
.mm-page .mm-price-card p:empty{display:none;}
.mm-page .mm-price-card .mm-badge{
  position:absolute;top:12px;left:12px;z-index:1;
  font-family:var(--font-body);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--r-sm);color:#fff;background:var(--mm-blue);
}

/* ---------- FAQ accordion (real faq_block question/answer repeater +
   real Schema.org FAQPage/Question/Answer microdata, same openAccordion()
   JS already in footer.php — nothing new to wire up) ---------- */
.mm-page .faq_accordion_wrap_page h2{font-family:var(--font-display);font-size:var(--fs-h3);color:var(--mm-t-primary);}
.mm-page .faq_accordion_item{
  background:var(--mm-paper);border:1px solid var(--mm-paper-3);
  border-radius:var(--r-md);box-shadow:var(--sh-card);
  margin-bottom:16px;transition:box-shadow 160ms ease, border-color 160ms ease;
}
.mm-page .faq_accordion_item:hover{box-shadow:var(--sh-lift);}
.mm-page .faq_accordion_item.opened{border-color:var(--mm-blue);}
.mm-page .faq_accordion__head{
  background:transparent;font-family:var(--font-body);font-weight:700;
  font-size:1.0625rem;letter-spacing:-.005em;color:var(--mm-t-primary);
}
.mm-page .faq_accordion__icon img{transition:transform 300ms ease;}
.mm-page .faq_accordion__body{background:var(--mm-paper-2);}
.mm-page .faq_accordion_item.opened .faq_accordion__body{
  background:var(--mm-paper-2);border-top:1px solid var(--mm-paper-3);
  max-height:3000px; /* parent theme caps this at 500px, clipping longer real answers */
}
.mm-page .faq_accordion__body div,
.mm-page .faq_accordion__body p{
  font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--mm-t-secondary);font-weight:400;
}

/* real WYSIWYG content (before_content_text / seo_flexible_content text
   blocks) sometimes embeds a real image inline (e.g. a real brand-logo
   image inside the Upgrade page's "Mixing Console" paragraph) — style it
   as a contained, centered figure instead of an unstyled floating <img>
   with no margin control, which the design consilium read as an orphaned
   placeholder rather than real content. */
.mm-page .mm-seo-content img{display:block;margin:20px auto;max-width:320px;height:auto;}

/* 2026-08-27 (client: "all videos aren't centered"): these embedded
   YouTube <iframe>s (Stem Mastering, Mastering for iTunes, Dolby Atmos)
   came with their own inline `style="margin:auto;display:flex;..."` to
   center themselves, but WordPress's wp_kses() strips `display:flex`
   from any sanitized style attribute (flex isn't in its safe-CSS value
   list for `display`) -- confirmed directly: wp_kses() turns
   "margin: auto; display: flex; max-width: 100%;" into just
   "margin: auto;max-width: 100%". margin:auto alone does nothing on an
   iframe's default display:inline, so they were rendering flush left.
   Center them from here instead of depending on inline styles that
   content-sanitization can silently rewrite -- also covers any future
   video embedded the same way in this field, not just these 3. */
.mm-page .mm-seo-content iframe{display:block;margin:20px auto;max-width:100%;}

/* 2026-08-30 (client screenshot, /mastering/: black "Make an Order" pill
   "стоїть криво" right before "How is mastering done"): real, client-
   authored content, not something to rewrite -- a raw inline-styled
   `<a style="...border-radius: 30px...margin-top: 40px">` pasted
   directly into the SEO content editor, confirmed on 9 different service
   pages (same exact style signature), always as the last thing in its
   content section. Root cause: `margin-top:40px` plus the button's own
   height pushes it 21px past its own section's bottom edge (measured:
   section bottom at y=12907, button's own wrapper bottom at y=12928) --
   and the very next section's top padding is intentionally zeroed by the
   adjacent-.mm-page-section rule above, so the overflow lands the button
   with zero clearance from the completely unrelated heading that follows,
   reading as glued-on/misplaced rather than as a deliberate CTA. Adding
   margin-bottom (mirroring the existing margin-top for visual symmetry)
   keeps the button inside its own section's padding budget and restores
   real breathing room before the next section, on every page that has
   this same pasted button. */
.mm-page .mm-seo-content a[style*="border-radius: 30px"]{margin-bottom:40px;}

/* ---------- text_with_image seo_flexible_content layout (real text +
   real image, side by side) — was an inline grid-template-columns with no
   mobile breakpoint, same class of bug as the two .mm-cols-4 grids below. ---------- */
.mm-page .mm-st-row{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;}
@media(max-width:767px){.mm-page .mm-st-row{grid-template-columns:1fr;}}
/* 2026-08-29 (client: gear/equipment photos in this block "too large,
   looks cheap", confirmed via QA subagent on /mastering/): the image
   markup (functions.php, text_with_image layout) is `style="width:100%;
   height:auto"` with no cap at all -- rendered height is 100% dictated
   by each source photo's own aspect ratio, so a portrait equipment shot
   (one measured at natural 312x600) renders over 1100px tall next to
   216px-tall landscape ones in the same list, towering over its own
   caption text. object-fit:cover + a fixed height gives every one of
   these photos the same visual weight regardless of source dimensions --
   the standard fix for a raw content-image grid like this. !important
   is needed only because the inline style this overrides can't be
   changed here (it's generated in the shared PHP renderer, reused by
   every page with this content-block type, not just /mastering/). */
.mm-page .mm-st-row > img{height:340px!important;object-fit:cover;}
@media(max-width:767px){.mm-page .mm-st-row > img{height:240px!important;}}

/* 2026-08-29 (client screenshot / QA subagent, /mastering/ FAQ): the
   toggle icon squishes non-square (measured 25.6x30, an 18% width loss)
   on any FAQ question that wraps to 2 lines at 375px. `.faq_accordion__
   head` is a flex row (parent theme) and the icon, a flex item with no
   explicit width and the browser's default flex-shrink:1, shrinks along
   with everything else once the row's content needs more space than a
   1-line question leaves -- only visible on 2-line questions because a
   1-line question's shorter text never triggers any shrinking.
   flex-shrink:0 is the standard fix: the icon is meant to always render
   at its natural 30x30 size regardless of how much room its sibling
   question text needs. */
.mm-page .faq_accordion__icon{flex-shrink:0;}

/* ---------- text_with_bg seo_flexible_content layout (real text over a
   real background photo — first seen on Mixing/Dolby Atmos) ---------- */
.mm-page .mm-text-bg{
  position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-lg);
  min-height:280px;display:flex;align-items:center;justify-content:center;
  background-size:cover;background-position:center;margin:32px 0;padding:48px 24px;
}
.mm-page .mm-text-bg__overlay{position:absolute;inset:0;background:rgba(14,14,16,.72);z-index:0;}
.mm-page .mm-text-bg__content{position:relative;z-index:1;max-width:640px;text-align:center;color:#fff;}
.mm-page .mm-text-bg__content p{color:rgba(247,246,243,.9);}
.mm-page .mm-text-bg__content strong{color:#fff;}

/* ---------- Service-page process steps ("How it works", real
   service_header_carousel data) — a plain responsive grid instead of the
   old Owl Carousel, whose visibility:hidden-until-JS-init flow was
   confirmed by the item-11 consilium to flash overlapping unstyled text
   on first paint. No JS dependency at all now, so no flash is possible. ---------- */
.mm-page .mm-process-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;margin:0 auto;
}
@media(max-width:899px){.mm-page .mm-process-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:599px){.mm-page .mm-process-grid{grid-template-columns:1fr;}}
/* 4-column variant (real 4-item colored_box highlight lists) — a class
   instead of an inline style, so these breakpoints can still override it;
   an inline grid-template-columns beats every media query here regardless
   of specificity, which is what broke this on mobile. */
.mm-page .mm-process-grid.mm-cols-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:899px){.mm-page .mm-process-grid.mm-cols-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:599px){.mm-page .mm-process-grid.mm-cols-4{grid-template-columns:1fr;}}
/* colored_box real item counts vary page to page (4 on some, 5 on others,
   etc.) — a hardcoded 4-column grid leaves an unbalanced, mostly-empty
   final row whenever the real count isn't a multiple of 4. auto-fit
   sizes each card to a sane minimum and wraps however many actually fit,
   so it looks intentional at any real item count without per-page CSS. */
.mm-page .mm-process-grid.mm-cols-auto{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.mm-page .mm-process-step{
  background:var(--mm-ink-2);border:1px solid var(--mm-ink-3);border-radius:var(--r-lg);
  padding:28px 24px;position:relative;
}
.mm-page .mm-process-step__num{
  font-family:var(--font-mono);font-size:.75rem;font-weight:500;color:var(--mm-blue-soft);
  letter-spacing:.06em;
}
.mm-page .mm-process-step__icon{width:32px;height:32px;object-fit:contain;margin:12px 0 14px;filter:brightness(0) invert(1);opacity:.85;}
.mm-page .mm-process-step h3{
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#fff;margin:0 0 8px;
}
.mm-page .mm-process-step p{font-size:.875rem;line-height:1.6;color:rgba(247,246,243,.68);margin:0;}

/* ---------- colored_box highlight cards (real per-tier feature bullets,
   e.g. "Up to 8 revisions") — a deliberate light-card treatment (accent top
   border + checkmark bullet) instead of the flat inline-styled pale-blue
   box the design consilium flagged as generic/bolted-on. ---------- */
.mm-page .mm-highlight-box{
  background:var(--mm-blue-soft);border:1px solid var(--mm-blue-soft);border-top:3px solid var(--mm-blue);
}
.mm-page .mm-highlight-box p{
  margin:0;padding-left:24px;position:relative;
  color:var(--mm-blue-deep);font-weight:600;font-size:.92rem;line-height:1.5;
}
.mm-page .mm-highlight-box p:before{
  content:"";position:absolute;left:0;top:.3em;width:14px;height:14px;border-radius:50%;
  background:var(--mm-blue);
}
.mm-page .mm-highlight-box p:after{
  content:"";position:absolute;left:4px;top:.52em;width:6px;height:3px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);
}

/* ---------- masonry_blocks icon cards (real per-tier explainer copy, e.g.
   "Benefits of analog mixing") — circular accent badge instead of a small
   image floating alone on a plain white card. ---------- */
.mm-page .mm-icon-card{background:var(--mm-paper);border:1px solid var(--mm-paper-3);text-align:center;}
.mm-page .mm-icon-card__badge{
  display:flex;align-items:center;justify-content:center;
  width:84px;height:84px;border-radius:50%;margin:0 auto 16px;
  background:var(--mm-blue-soft);
}
/* Real icon assets are thin, mostly-transparent line art (client feedback:
   at the original 32px they read as empty circles) — sized up and given a
   touch more contrast so the glyph itself is actually legible. */
.mm-page .mm-icon-card__badge img{width:46px;height:46px;object-fit:contain;filter:contrast(1.25) saturate(1.15);}
/* .mm-icon-card also carries .mm-process-step for grid/spacing reuse, and
   ".mm-process-step p" (real rule above, near-white text for the DARK "How
   It Works" cards) matches this card's real WYSIWYG <p> directly — beating
   an inherited color from this wrapper regardless of specificity. Result:
   near-white text on this card's white background, i.e. invisible. Target
   the real <p> here too. */
.mm-page .mm-icon-card__text,
.mm-page .mm-icon-card__text p{color:var(--mm-t-secondary);font-size:.95rem;line-height:1.6;}
.mm-page .mm-icon-card:hover .mm-icon-card__badge img{animation:mm-spin-slow 6s linear infinite;}

/* ---------- Equipment cards (real grey_bloks gear lists) ---------- */
.mm-page .mm-equipment-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;margin:0 auto;
}
@media(max-width:899px){.mm-page .mm-equipment-grid{grid-template-columns:1fr;}}
.mm-page .mm-equipment-card{
  background:var(--mm-paper);border:1px solid var(--mm-paper-3);border-radius:var(--r-lg);
  padding:28px 24px;
}
.mm-page .mm-equipment-card h3{
  font-family:var(--font-display);font-weight:700;font-size:1.1rem;margin:0 0 14px;color:var(--mm-t-primary);
}
.mm-page .mm-equipment-card ul{list-style:none;margin:0;padding:0;}
.mm-page .mm-equipment-card li{
  font-size:.92rem;line-height:1.7;color:var(--mm-t-secondary);padding-left:18px;position:relative;
}
.mm-page .mm-equipment-card li:before{
  content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--mm-blue);
}

/* ---------- Additional services / add-ons grid (real
   additional_services_blocks data) ---------- */
.mm-page .mm-addons-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:1100px;margin:0 auto;
}
@media(max-width:767px){.mm-page .mm-addons-grid{grid-template-columns:1fr;}}
/* 4-column variant (real 4-item related-services cross-sell) — same
   class-not-inline-style reasoning as .mm-process-grid.mm-cols-4 above. */
.mm-page .mm-addons-grid.mm-cols-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:899px){.mm-page .mm-addons-grid.mm-cols-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:599px){.mm-page .mm-addons-grid.mm-cols-4{grid-template-columns:1fr;}}
.mm-page .mm-addon-card{
  background:var(--mm-paper);border:1px solid var(--mm-paper-3);border-radius:var(--r-lg);
  padding:24px;display:flex;gap:16px;align-items:flex-start;
  transition:border-color 160ms ease,box-shadow 160ms ease;
}
.mm-page .mm-addon-card:hover{border-color:var(--mm-blue);box-shadow:var(--sh-card);}
.mm-page .mm-addon-card img{width:44px;height:44px;object-fit:contain;flex:none;}
.mm-page .mm-addon-card h3{font-family:var(--font-display);font-weight:700;font-size:1rem;margin:0 0 6px;color:var(--mm-t-primary);}
.mm-page .mm-addon-card p{font-size:.875rem;line-height:1.6;color:var(--mm-t-secondary);margin:0;}

/* ---------- Comparison table (real Upgrade-vs-Complete data) ---------- */
.mm-page .mm-compare-table{
  max-width:1100px;margin:0 auto;border-collapse:collapse;width:100%;
  border:1px solid var(--mm-paper-3);border-radius:var(--r-lg);overflow:hidden;
}
.mm-page .mm-compare-table th,
.mm-page .mm-compare-table td{
  padding:16px 20px;text-align:left;font-size:.92rem;line-height:1.6;
  border-bottom:1px solid var(--mm-paper-3);vertical-align:top;
}
.mm-page .mm-compare-table thead th{
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  background:var(--mm-ink);color:#fff;
}
.mm-page .mm-compare-table tbody th{
  font-family:var(--font-body);font-weight:700;color:var(--mm-t-primary);
  background:var(--mm-paper-2);white-space:nowrap;
}
.mm-page .mm-compare-table td{color:var(--mm-t-secondary);}
.mm-page .mm-compare-table tbody tr:last-child th,
.mm-page .mm-compare-table tbody tr:last-child td{border-bottom:none;}
.mm-page .mm-compare-table .mm-compare-highlight{background:var(--mm-blue-soft);}
/* 2026-08-29 (client: "всі іконки не по сітці" on the Music Production
   page, confirmed via a QA subagent pass rather than guessed). Page 3711
   only got the light-header treatment from mm_header_only_ids() -- its
   body content still runs on the parent theme's original, never-rebuilt
   markup/CSS, so these two bugs are pre-existing float-layout issues, not
   regressions from this redesign.

   Bug 1: the 9-card genre-samples grid (`.home-samples-wraper.module-
   player`) uses old float:left column-of-a-grid CSS. Two-word genre
   titles ("Pop Ballad", "Hip Hop") wrap their card's title to 2 lines,
   making that card ~16px taller than its 1-line neighbors -- with float,
   a taller card pushes the NEXT card's play-button icon down with it,
   producing a visible zigzag/staircase of icons across a row instead of
   a clean grid (confirmed via getBoundingClientRect: adjacent play
   buttons off by exactly the 1-line/2-line title height difference).
   Grid doesn't have this failure mode -- same fix already used this
   session for the order-form's Add-Ons checkbox grid, applied here too.
   Breakpoints picked to match the card count that was already roughly
   showing at each width (3/2/1), not copied from the old float version's
   own breakpoints, since replacing floats with grid changes what target
   values are even meaningful here. */
.page-id-3711 .home-samples-wraper.module-player{display:grid!important;grid-template-columns:repeat(3,1fr)!important;}
.page-id-3711 .home-samples-wraper.module-player > [class*="mui-col-"]{float:none!important;width:auto!important;}
/* The row also carries the parent theme's standard clearfix
   (`::before`/`::after{content:" ";display:block}`, needed to contain
   floats). With display:grid there's nothing left to clear, but the
   pseudo-elements still generate real boxes and grid treats them as
   items -- `::before` was silently claiming row 1 / column 1, so every
   real card shifted one slot later (confirmed by inspecting
   getComputedStyle(row,'::before').content before writing this fix, not
   guessed). Not needed once this row is a grid, so drop them here. */
.page-id-3711 .home-samples-wraper.module-player::before,
.page-id-3711 .home-samples-wraper.module-player::after{display:none!important;}
/* Grid gives every card in a row equal height now, but two-word titles
   ("Pop Ballad", "Hip Hop") still wrap to 2 lines while their row-mates
   stay at 1, so the play button below the title still lands 16px lower
   in those specific cards (confirmed via getBoundingClientRect: 16px is
   exactly one .player__title line-height). Reserving 2 lines' worth of
   height for every title, not just the ones that need it, gives every
   play button the same vertical position regardless of title length. */
.page-id-3711 .player__title{min-height:32px;}
@media(max-width:959px){
  .page-id-3711 .home-samples-wraper.module-player{grid-template-columns:repeat(2,1fr)!important;}
}
@media(max-width:640px){
  .page-id-3711 .home-samples-wraper.module-player{grid-template-columns:1fr!important;}
}
/* Bug 2: the 3-item stats row (`.faq-icons-wrap` x3, "Working hours" /
   "Completed Projects" / "Number of Clients") is a plain flex-wrap row
   with each item fixed at 170px. At 375px only 2 fit per line, so the
   3rd wraps to its own row centered under the gap between columns 1 and
   2 -- neither aligned nor at a full-width, reading as an off-grid
   orphan icon. Stacking to one-per-row below 480px (this site's usual
   mobile-stack breakpoint, see order-page.css) removes the leftover
   partial row entirely instead of trying to force 3 items to align in a
   2-column grid. */
@media(max-width:480px){
  .page-id-3711 .faq-icons-wrap{width:100%!important;max-width:100%!important;}
}
/* Bug 3 (client screenshot: the "<"/">" image-carousel nav in the intro
   section, next to "Using our music production service..."): confirmed
   via getComputedStyle that `.slide-prev`/`.slide-next` are raw,
   never-styled parent-theme markup -- each is a bare `&lt;`/`&gt;`
   character in a 111px-wide, full-image-height (455px) invisible click
   box, faint translucent-white text with no background, positioned
   top:0 (so it sits at the very top of the image instead of centered) --
   reads as broken/unfinished rather than as a carousel control. Turning
   it into an actual small, centered, circular button matching the
   icon-button treatment used elsewhere on the redesigned pages, without
   touching the onclick="showHomeVideoSwitchSlide(...)" JS it already
   has. */
.page-id-3711 #home-video-slides .slide-prev,
.page-id-3711 #home-video-slides .slide-next{
  width:40px!important;height:40px!important;padding:0!important;
  top:50%!important;transform:translateY(-50%);
  display:flex!important;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(0,0,0,.4);
  font-size:18px;line-height:1;color:#fff;
  transition:background .2s ease;
}
.page-id-3711 #home-video-slides .slide-prev{left:14px!important;}
.page-id-3711 #home-video-slides .slide-next{right:14px!important;left:auto!important;}
.page-id-3711 #home-video-slides .slide-prev:hover,
.page-id-3711 #home-video-slides .slide-next:hover{background:rgba(0,0,0,.65);}
/* Bug 4 (client screenshot: an empty outlined box sitting right above
   "Your Name" in the page's Contact Form 7 form): NOT a stray input --
   every real field in the form is exactly the 3 visible ones (name/
   email/message) plus properly `type="hidden"` system fields. The empty
   box is the `<fieldset class="hidden-fields-container">` CF7 wraps
   those hidden fields in -- a bare, unstyled <fieldset> still gets the
   browser's own default border/padding/margin even when every field
   inside it is invisible, which is exactly what showed up (confirmed via
   getComputedStyle: `border: 2px groove ...`, a real rendered 316x18px
   box). display:none is safe here since hidden inputs still submit
   normally regardless of an ancestor's display. */
.page-id-3711 .hidden-fields-container{display:none!important;}
@media(max-width:767px){
  .mm-page .mm-compare-table{display:block;overflow-x:auto;white-space:nowrap;}
  .mm-page .mm-compare-table td, .mm-page .mm-compare-table th{white-space:normal;min-width:180px;}
}