/* G2 visual identity applied to the standalone pages (samples/pricing/faq/accessibility/refund/terms/
   privacy). These pages already share pricing.css/faq.css class names (.pricing-page, .faq-card,
   .price-card, .lang-btn, .pricing-brand, .lang-dropdown-wrap …) across all of them, so one override
   sheet re-themes every page at once without touching their scripts or content. Loaded after
   styles.css/pricing.css/faq.css/lang-dropdown.css on each page. */
/* Unbounded / Space Grotesk / Fredoka are self-hosted — see fonts-g2.css, loaded by every page that
   includes this stylesheet (CSP does not allow fonts.googleapis.com / fonts.gstatic.com). */
:root{
  --g2-bg:#050608; --g2-cyan:#3ef4ff; --g2-cyan-soft:#8bf6ff; --g2-spark:#ff3ecf;
  --g2-ink:#eef9fb; --g2-ink-dim:rgba(255,255,255,.72); --g2-line:rgba(62,244,255,.16);
  --g2-card:#0a0e14; --g2-display:'Unbounded',sans-serif; --g2-body:'Space Grotesk',sans-serif;
}
html[lang="he"]{ --g2-display:'Fredoka',sans-serif; --g2-body:'Fredoka',sans-serif; }

body.pricing-page,body.dark-page,body.samples-page{
  background:var(--g2-bg) !important;
  color:var(--g2-ink) !important;
  font-family:var(--g2-body);
}
.pricing-page main h1, body.dark-page h1, body.samples-page h1,
.pricing-page main h2, body.dark-page h2, body.samples-page h2{
  font-family:var(--g2-display);
  color:var(--g2-cyan) !important;
  text-shadow:0 0 8px rgba(62,244,255,.45),0 0 22px rgba(62,244,255,.25);
  letter-spacing:-.01em;
}
/* Coherent type scale (2026-09-29), matching the homepage pass: page titles clearly larger than body
   copy, nav/footer links and kickers readable at a glance on both mobile and desktop. */
main h1{font-size:clamp(30px,4vw,44px) !important}
.g2-nav{font-size:15px !important}
footer.g2-footer nav{font-size:14px !important}
.lang-btn{font-size:13.5px !important}
/* D3 (QA 2026-09-29): long unbroken compounds (German page titles — Rückerstattungsrichtlinie,
   Datenschutzerklärung, Nutzungsbedingungen — but this is language-agnostic on purpose, any very long
   single word in any of the 7 languages gets the same protection) overflowed the 375px viewport.
   overflow-wrap is the safety net (breaks even without a dictionary); hyphens:auto only activates when
   it can, which needs the correct lang on <html> — already set by each page's own language switcher. */
main h1{overflow-wrap:anywhere;hyphens:auto}
.pricing-sub,.faq-intro,body.dark-page .pricing-sub,body.dark-page .faq-card p,body.dark-page .faq-steps,
body.samples-page .pricing-sub,body.samples-page .sample-note,body.samples-page .sample-step-fig figcaption,
body.samples-page .sample-steps,body.samples-page .lyrics-transcript p,.a11y-updated{
  color:var(--g2-ink-dim) !important;
}

/* header */
.pricing-head{border-bottom:1px solid var(--g2-line);padding-bottom:14px;margin-bottom:20px}
/* 2026-10-01 spacing pass: tighter vertical rhythm on every standalone page */
.pricing-wrap{padding-top:18px !important;padding-bottom:36px !important}
.pricing-sub,.faq-intro{margin-bottom:18px !important}
.faq-card{margin-bottom:12px !important}
.faq-back{margin-top:20px !important}
.pricing-brand img{filter:drop-shadow(0 0 6px rgba(62,244,255,.5)) drop-shadow(0 0 6px rgba(255,62,207,.35))}
.g2-nav{display:flex;align-items:center;gap:20px;font-size:12.5px;color:var(--g2-ink-dim);margin-inline-start:auto;margin-inline-end:16px}
.g2-nav a{color:var(--g2-ink-dim);text-decoration:none}
.g2-nav a:hover,.g2-nav a.active{color:var(--g2-cyan)}
/* ===== Owner-approved button system (2026-09-29): System D (primary CTA) + System B
   (everything else). Exact values copied from labs/redesign/buttons/index.html. ===== */

/* g2-cta = System D pill (primary CTA in the standalone-page header) */
.g2-cta{
  position:relative;overflow:hidden;
  background:var(--g2-cyan) !important;color:#031014 !important;border:none !important;
  padding:8px 18px;border-radius:999px;
  box-shadow:0 6px 20px rgba(62,244,255,.3);
  transition:box-shadow .18s ease,transform .18s ease;
}
.g2-cta::before{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:g2Sweep 2.8s ease-in-out infinite;
}
@keyframes g2Sweep{0%{left:-60%}55%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){.g2-cta::before{animation:none;display:none}}
.g2-cta:hover{box-shadow:0 8px 28px rgba(62,244,255,.5)}
.g2-cta:active{transform:scale(.96)}

/* top-back = System B secondary button (btn-b-sec) */
.top-back{
  background:rgba(255,255,255,.02) !important;border:1px solid rgba(255,255,255,.14) !important;
  color:var(--g2-ink) !important;border-radius:999px;
  transition:border-color .15s ease,color .15s ease,transform .12s ease;
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;
}
.top-back:hover{border-color:rgba(139,246,255,.5) !important;color:var(--g2-cyan-soft) !important;box-shadow:none}
.top-back:active{transform:scale(.96)}

/* language dropdown trigger = System B icon/secondary button; lang-btn options = System B card-b (selectable) */
.lang-dropdown-wrap .lang-trigger{
  background:rgba(255,255,255,.02) !important;border:1px solid rgba(255,255,255,.14) !important;color:var(--g2-ink) !important;
  border-radius:999px;transition:border-color .15s ease,color .15s ease;
}
.lang-dropdown-wrap .lang-trigger:hover{border-color:rgba(139,246,255,.5) !important;color:var(--g2-cyan-soft) !important}
.lang-dropdown-wrap .lang-switch{background:var(--g2-card) !important;border-color:var(--g2-line) !important;box-shadow:0 16px 40px rgba(0,0,0,.6) !important}
.lang-btn{
  background:linear-gradient(var(--g2-card),var(--g2-card)) padding-box,
             linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.02)) border-box !important;
  border:1px solid transparent !important;color:var(--g2-ink) !important;border-radius:12px;
}
.lang-btn.active,.lang-btn[aria-selected="true"]{
  background:linear-gradient(var(--g2-card),var(--g2-card)) padding-box,
             linear-gradient(120deg,var(--g2-cyan),var(--g2-spark)) border-box !important;
  border-color:transparent !important;color:var(--g2-ink) !important;box-shadow:0 0 14px rgba(255,62,207,.2) !important;
}

/* cards (faq/samples/accessibility/refund/terms/privacy) */
.faq-card{background:var(--g2-card) !important;border-color:var(--g2-line) !important;color:var(--g2-ink) !important;box-shadow:0 0 40px rgba(62,244,255,.08),0 20px 50px rgba(0,0,0,.5) !important}
.faq-card a,.faq-back a,.faq-mailto{color:var(--g2-spark) !important}
.faq-contact{background:linear-gradient(180deg,var(--g2-card),#0d1420) !important;border-color:var(--g2-cyan) !important}
.faq-card a,.faq-back a{color:var(--g2-spark) !important}
/* faq-mailto = System D pill (primary contact CTA) */
.faq-mailto{
  position:relative;overflow:hidden;
  background:var(--g2-cyan) !important;color:#031014 !important;border-radius:999px;
  box-shadow:0 6px 20px rgba(62,244,255,.3);transition:box-shadow .18s ease,transform .18s ease;
}
.faq-mailto::before{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:g2Sweep 2.8s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){.faq-mailto::before{animation:none;display:none}}
.faq-mailto:hover{box-shadow:0 8px 28px rgba(62,244,255,.5) !important;background:var(--g2-cyan) !important}
.faq-mailto:active{transform:scale(.96)}
/* a11y 2026-10-06: the rule above (.faq-card a) painted the label magenta on the cyan pill (2.3:1); dark ink on cyan is about 13:1 */
.faq-card a.faq-mailto,.faq-contact a.faq-mailto{color:#031014 !important}
.sample-badge{background:var(--g2-spark) !important;color:#0a0212 !important}
.sample-meta .sample-artist{color:var(--g2-cyan-soft) !important}
/* color-audit finding (owner "whole site" sweep, 2026-09-29): samples.html's own inline <style> gives
   .sample-card a hardcoded dark-blue background/border (#0d2a56/#1c3d73) with no !important, so it was
   never caught by the .faq-card/.price-card overrides above - verified rendering blue via a live
   computed-style check before this fix. */
.sample-card{background:var(--g2-card)!important;border-color:var(--g2-line)!important;box-shadow:0 10px 30px rgba(0,0,0,.45)!important}
.sample-card:hover,.sample-card:focus-visible{outline-color:var(--g2-cyan)!important}

/* pricing cards = System B card-b (soft idle border, featured plan gets the gradient ring) */
.price-card{
  background:linear-gradient(var(--g2-card),var(--g2-card)) padding-box,
             linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.02)) border-box !important;
  border:1px solid transparent !important;box-shadow:0 0 40px rgba(62,244,255,.08),0 20px 50px rgba(0,0,0,.5) !important;
}
.price-card.featured{
  background:linear-gradient(180deg,var(--g2-card),#0d1a20) padding-box,
             linear-gradient(120deg,var(--g2-cyan),var(--g2-spark)) border-box !important;
  border-color:transparent !important;box-shadow:0 0 44px rgba(255,62,207,.18) !important;
}
.price-card em{background:var(--g2-spark) !important;color:#0a0212 !important}
.price-amount{font-family:var(--g2-display);color:var(--g2-cyan) !important;text-shadow:0 0 14px rgba(62,244,255,.35)}
.price-name{color:var(--g2-ink-dim) !important}
.price-features li{color:var(--g2-ink) !important}
.price-features li:before{color:var(--g2-cyan) !important}
/* buy-btn = System D pill (primary CTA) */
.buy-btn{
  position:relative;overflow:hidden;
  background:var(--g2-cyan) !important;color:#031014 !important;border:none !important;border-radius:999px;
  box-shadow:0 6px 20px rgba(62,244,255,.3);transition:box-shadow .18s ease,transform .18s ease;
}
.buy-btn::before{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:g2Sweep 2.8s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){.buy-btn::before{animation:none;display:none}}
.buy-btn:hover:not(:disabled){box-shadow:0 8px 28px rgba(62,244,255,.5)}
.buy-btn:active:not(:disabled){transform:scale(.96)}
.buy-btn:disabled{background:#3a4548 !important;color:#6b7a7e !important;box-shadow:none !important;opacity:1}
.buy-btn:disabled::before{display:none}
.pricing-note,.checkout-status{color:var(--g2-ink-dim) !important}
.pricing-faq-link a{color:var(--g2-cyan-soft) !important}

/* a11y list */
.a11y-list{color:var(--g2-ink)}

footer.g2-footer{border-top:1px solid var(--g2-line);padding:22px 0;color:var(--g2-ink-dim);font-size:12px;text-align:center;margin-top:20px}
footer.g2-footer img{margin:0 auto 12px;height:26px;filter:drop-shadow(0 0 6px rgba(62,244,255,.5))}
footer.g2-footer nav{display:flex;gap:18px;justify-content:center;margin-bottom:10px;font-size:12px;flex-wrap:wrap}
footer.g2-footer nav a{color:var(--g2-ink-dim);text-decoration:none}
footer.g2-footer nav a:hover{color:var(--g2-cyan)}

/* colors follow-up (owner 2026-09-29, site-wide sweep): remaining hardcoded yellow/blue leftovers in
   pricing.css/faq.css/lang-dropdown.css that were not routed through a var() the rules above already
   repoint, plus theme-color parity with the wizard/homepage. */
.faq-card a:focus-visible,.faq-back a:focus-visible,.faq-mailto:focus-visible,
.lang-btn:focus-visible,.pricing-brand:focus-visible,.lyrics-transcript summary:focus-visible,
:focus-visible{outline-color:var(--g2-cyan)!important}
.sandbox-flag{background:rgba(62,244,255,.14)!important;color:var(--g2-ink)!important;border:1px solid var(--g2-line)!important}
.checkout-status{color:var(--g2-ink)!important}
/* color-audit findings (owner 2026-09-29, whole-site sweep): each standalone page carries its own inline
   <style> block (pre-dates g2-standalone.css) with a per-page selector list for "dim" list/paragraph text
   (body.dark-page .faq-card ul/ol, etc.) that the shared .pricing-sub/.faq-intro override above does not
   reach - fixed generically here instead of in each of the 11 inline blocks. Also: plain in-copy <a> links
   with no class fall back to the browser's default link blue; disabled buttons used a hardcoded gray. */
.faq-card ul,.faq-card ol,.faq-card li,.a11y-list,.a11y-list li{color:var(--g2-ink-dim)!important}
.pricing-sub a,.faq-intro a{color:var(--g2-spark)!important;text-decoration:underline}
.buy-btn:disabled{color:rgba(255,255,255,.55)!important}
.primary-action:disabled{color:rgba(255,255,255,.55)!important}
/* language dropdown panel (lang-dropdown.css): selected-option outline was var(--blue,#2f5bea) (blue),
   panel focus-visible was #f4c542 (yellow) — neither routed through the g2 vars that file doesn't define. */
.lang-dropdown-wrap .lang-switch .lang-btn[aria-selected="true"]{outline-color:var(--g2-cyan)!important}
.lang-dropdown-wrap .lang-switch :focus-visible{outline-color:var(--g2-cyan)!important}

/* .primary-action (how.html's "Create your clip" CTA, set with inline styles) = System D pill.
   !important is required to win over the element's own style="" attribute. */
.primary-action{
  position:relative!important;overflow:hidden!important;
  background:var(--g2-cyan)!important;color:#031014!important;border:none!important;border-radius:999px!important;
  box-shadow:0 6px 20px rgba(62,244,255,.3)!important;transition:box-shadow .18s ease,transform .18s ease!important;
}
.primary-action::before{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:g2Sweep 2.8s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){.primary-action::before{animation:none;display:none}}
.primary-action:hover{box-shadow:0 8px 28px rgba(62,244,255,.5)!important}
.primary-action:active{transform:scale(.96)!important}
.primary-action:after,.buy-btn:after{display:none!important} /* remove styles.css's old torn-paper corner flourish */
.primary-action .arrow{display:inline-block;transition:transform .18s ease}
.primary-action:hover .arrow{transform:translateX(5px)}
[dir="rtl"] .primary-action:hover .arrow{transform:translateX(-5px)}

/* bottom link row on standalone pages: cyan instead of pink (owner 2026-09-29) */
.faq-back a,.faq-back a:visited{color:#3ef4ff!important}
.faq-back a:hover{color:#fff!important}

/* pricing package name: clearly readable (owner 2026-09-29) */
.price-name{color:#ff3ecf!important;opacity:1!important;font-size:18px!important;font-weight:700!important;letter-spacing:.01em}

/* raw language row before lang-dropdown.js builds the dropdown: wrap instead of overflowing on narrow phones (QA L1, 2026-10-01) */
.lang-switch{flex-wrap:wrap}

/* Header back pill on phones (2026-10-01): logo + "Back to Milamo" + language button stay on ONE row at 375 px,
   pill keeps a 44 px touch target (min-height above), nothing overflows. */
@media(max-width:560px){
  .pricing-brand img{height:28px !important}
  .top-back{padding:0 12px !important;font-size:13px !important;min-width:0}
}

/* a11y 2026-10-06: links inside running text must not rely on colour alone (WCAG 1.4.1) */
main p a,main li a,.faq-card p a,.faq-card li a{text-decoration:underline;text-underline-offset:3px}
.g2-cta,.faq-mailto,.top-back,.primary-action{text-decoration:none!important}

/* ===== Header, three zones + mobile menu (owner 2026-10-06; same design as the home header in index.html) =====
   brand (+ back pill) | the 3 links on the true centre | actions (language, CTA, pause). <=1100px: links centre in the space left between the zones.
   <=760px: links + actions live in a drop-down panel opened by .menu-btn (logic: site-header.js). */
.pricing-head.site-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;position:relative;z-index:30;
  width:min(1040px,100vw - 40px);margin-inline:calc((100% - min(1040px,100vw - 40px))/2)}
.site-header .header-start{display:flex;align-items:center;gap:12px;justify-self:start;min-width:max-content}
.site-header .pricing-brand{flex:none}.site-header .pricing-brand img{max-width:none}
.site-header .menu-panel{display:contents}
.site-header .menu-btn,.site-header .menu-scrim{display:none}
.site-header .g2-nav{margin:0 !important;justify-content:center;gap:28px;white-space:nowrap}
.site-header .header-actions{display:flex;align-items:center;justify-content:flex-end;gap:18px;justify-self:end;min-width:0}
.pricing-head.site-header .lang-dropdown-wrap{margin-inline-start:0}
.pricing-head.site-header .lang-switch:not([data-dropdown-ready]){margin-inline-start:0}
.site-header .g2-cta{white-space:nowrap}
@media(max-width:1100px){.pricing-head.site-header{grid-template-columns:auto 1fr auto}}
/* below 1100px: compact gaps, and the back pill becomes an icon-only 44 px circle (its text stays in the DOM as the accessible name) so the three zones never touch */
@media(max-width:1100px){
  .pricing-head.site-header{gap:8px}
  .site-header .g2-nav{gap:16px;font-size:14px !important}
  .site-header .header-actions{gap:10px}
  .site-header .header-start{gap:8px}
  .site-header .top-back{font-size:0 !important;width:44px;min-width:44px !important;padding:0 !important;gap:0}
  .site-header .top-back::before{content:"\2190";font-size:20px;line-height:1}
  html[dir="rtl"] .site-header .top-back::before{content:"\2192"}
}
/* logo: same size as the home header (127 x 32), at every width (QA M4) */
.site-header .pricing-brand img{width:127px !important;height:32px !important;object-fit:contain}
@media(max-width:359px){.pricing-head.site-header{gap:6px}.site-header .header-start{gap:6px}}
/* menu below 900px (the standalone pages carry the back pill and longer link labels, so they need more room than the home header) */
@media(max-width:900px){
  .pricing-head.site-header{grid-template-columns:1fr auto;gap:8px}
  .site-header .menu-btn{display:inline-flex;align-items:center;justify-content:center;justify-self:end;width:44px;height:44px;padding:0;border-radius:50%;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.14);color:var(--g2-ink);cursor:pointer}
  .site-header .menu-btn:hover{border-color:rgba(139,246,255,.5);color:var(--g2-cyan-soft)}
  .site-header .menu-btn:focus-visible{outline:3px solid var(--g2-cyan);outline-offset:2px}
  .site-header .menu-panel{display:none;position:absolute;top:calc(100% + 8px);inset-inline:0;z-index:60;flex-direction:column;gap:6px;padding:10px 16px 18px;background:#080b10;border:1px solid var(--g2-line);border-radius:14px;box-shadow:0 20px 40px rgba(0,0,0,.6);max-height:calc(100dvh - 90px);overflow-y:auto}
  .site-header .menu-panel:focus,.site-header .menu-panel:focus-visible{outline:none !important}
  .site-header.menu-open .menu-panel{display:flex}
  .site-header.menu-open .menu-scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.5)}
  .site-header .g2-nav{flex-direction:column;align-items:stretch;gap:0;font-size:18px !important}
  .site-header .g2-nav a.g2-pagelink{display:flex;align-items:center;min-height:52px;padding:0 4px;border-bottom:1px solid var(--g2-line);color:var(--g2-ink)}
  .site-header .header-actions{flex-wrap:wrap;justify-content:space-between;gap:14px;padding-top:10px}
  .site-header .header-actions .g2-cta{display:inline-flex !important;align-items:center;justify-content:center;flex:0 0 100%;min-height:48px;padding:0 20px !important;font-size:16px}
  .site-header .header-actions .anim-toggle{width:44px;height:44px;min-width:44px}
  /* the language list opens IN the panel, below the row (never clipped by the viewport); the panel scrolls when taller than the screen */
  .site-header .header-actions .lang-dropdown-wrap{display:contents}
  .site-header .header-actions .lang-dropdown-wrap .lang-switch:not([hidden]){position:static;order:5;flex:0 0 100%;width:100%;min-width:0;max-width:none;max-height:none;box-shadow:none;overflow:visible;display:grid;grid-template-columns:1fr 1fr}
  .site-header .header-actions .g2-cta{order:-1}
}
body.menu-lock{overflow:hidden}

/* language options: 44 px touch targets (QA L2) */
.lang-dropdown-wrap .lang-switch .lang-btn{min-height:44px;display:flex;align-items:center}

/* Mobile alignment pass 2026-10-10: phones only (desktop line breaks unchanged). Headings break evenly (no lone last word), body text avoids a one-word last line. */
@media(max-width:760px){
  main h1,main h2,main h3,.price-addon b{text-wrap:balance}
  main p,main li{text-wrap:pretty}
}

/* "Updated <date>" line under the H1 of the FAQ, pricing and guide pages (GEO/SEO batch 2026-10-13). Quiet, same dim ink as the footer; no colour accent. */
.page-updated{margin:-4px 0 14px;font-size:13px;color:var(--g2-ink-dim)}
.page-updated time{font-variant-numeric:tabular-nums}