.masking-module { max-width: 1240px; margin: 0 auto; color: var(--ink); }
.masking-module [hidden] { display: none !important; }
.masking-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; padding: 32px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 22px; background: color-mix(in srgb, var(--accent) 9%, var(--canvas)); }
.masking-hero h1 { margin: 10px 0 14px; font-size: clamp(28px, 4vw, 42px); }
.masking-hero p { max-width: 760px; margin: 10px 0; line-height: 1.85; color: var(--sub); }
.masking-version { align-self: center; padding: 20px; border-radius: 16px; border: 1px solid var(--line); display: grid; gap: 10px; background: var(--canvas); font-size: 14px; }
.masking-version strong { color: var(--accent); font-size: 22px; }
.masking-trial { padding: 18px 22px; margin-bottom: 20px; border: 1px solid color-mix(in srgb, #b47a21 45%, var(--line)); border-radius: 16px; background: color-mix(in srgb, #d9a148 12%, var(--canvas)); line-height: 1.8; }
.masking-trial p { margin: 4px 0 0; }
.masking-module .card { margin-bottom: 20px; }
.masking-features, .masking-download-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.masking-features article, .masking-download-grid article { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--canvas); }
.masking-features h3, .masking-download-grid h3 { margin: 0 0 10px; font-size: 18px; }
.masking-features p, .masking-download-grid p { color: var(--sub); line-height: 1.8; margin: 0 0 12px; }
.masking-download-grid .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.masking-download-grid button { margin: 0; }
.masking-download-grid small { display: block; color: var(--sub); line-height: 1.8; }
.masking-download-grid details { margin-top: 12px; font-size: 12px; }
.masking-download-grid code { display: block; overflow-wrap: anywhere; margin-top: 8px; }
.masking-flow { padding-left: 24px; margin: 0; display: grid; gap: 12px; line-height: 1.85; }
.masking-flow li { padding-left: 6px; }
.masking-notes { padding-left: 24px; line-height: 1.9; margin: 0; }
.masking-module .section-heading p { line-height: 1.8; }
#maskingStatus { margin: 18px 0 0; padding: 14px; border-radius: 12px; background: var(--accent-soft); line-height: 1.7; overflow-wrap: anywhere; }
.masking-preview { scroll-margin-top: 20px; }
.masking-preview-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.masking-preview-heading h2 { margin: 0; }
#maskingDemoFrame { display: block; width: 100%; height: min(900px, 85vh); min-height: 580px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
#maskingNoticeImage { display: block; width: 100%; max-width: 720px; height: auto; margin: 0 auto; border-radius: 12px; }
.masking-home-link { margin-top: 16px; }
@media (max-width: 1000px) {
  .masking-features, .masking-download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .masking-hero { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .masking-version { padding: 16px; }
  .masking-features, .masking-download-grid { grid-template-columns: minmax(0, 1fr); }
  .masking-trial { padding: 16px; }
  .masking-features article, .masking-download-grid article { padding: 18px; }
  #maskingDemoFrame { min-height: 650px; }
}
