/* Shared presentation for the MIXEL Creative Apps legal pages. */
:root {
  color-scheme: light;
  --background: #f8f9fa;
  --foreground: #1a1d23;
  --card: #fff;
  --primary: #dc0018;
  --muted: #4f5d6b;
  --border: #d8e0e8;
  --accent: #00b8a9;
  --link: #b00020;
  --eyebrow: #9a0011;
  --contents-link: #2c3e50;
  --header-background: rgba(255, 255, 255, 0.95);
  --print-foreground: #111;
  --page-background-image:
    radial-gradient(circle at 8% 4%, rgba(0, 184, 169, 0.06), transparent 36%),
    radial-gradient(circle at 92% 0%, rgba(220, 0, 24, 0.08), transparent 40%);
  --font-body:
    "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-heading: "Sora", "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-size-base: 16px;
  --font-size-wordmark: 1.4rem;
  --font-size-subbrand: 0.75rem;
  --font-size-nav: 0.95rem;
  --font-size-eyebrow: 0.78rem;
  --font-size-h1: clamp(2.1rem, 5vw, 3.5rem);
  --font-size-h2: clamp(1.35rem, 2.7vw, 1.8rem);
  --font-size-h3: 1.15rem;
  --font-size-lede: 1.12rem;
  --font-size-contents: 0.9rem;
  --font-size-footer: 0.85rem;
  --font-contents-title: 750 0.75rem/1.4 ui-sans-serif, system-ui, sans-serif;
  --font-weight-wordmark: 850;
  --font-weight-emphasis: 750;
  --font-weight-contact: 700;
  --line-height-body: 1.72;
  --line-height-wordmark: 1.3;
  --line-height-heading: 1.2;
  --tracking-wordmark: 0.07em;
  --tracking-subbrand: 0.15em;
  --tracking-eyebrow: 0.12em;
  --tracking-heading: -0.025em;
  --tracking-contents: 0.1em;
  --underline-offset: 0.2em;
  --underline-thickness: 0.08em;
  --underline-thickness-hover: 0.14em;
  --space-zero: 0;
  --space-xs: 0.2rem;
  --space-sm: 0.4rem;
  --space-list: 0.6rem;
  --space-list-separated: 0.65rem;
  --space-skip-block: 0.7rem;
  --space-eyebrow-bottom: 0.8rem;
  --space-header-compact: 0.85rem;
  --space-md: 1rem;
  --space-contact-block: 1.1rem;
  --space-paragraph: 1.15rem;
  --space-lg: 1.2rem;
  --space-contact-inline: 1.25rem;
  --space-paper-compact: 1.3rem;
  --space-xl: 1.5rem;
  --space-hero-bottom: 1.7rem;
  --space-compact-page: 2rem;
  --space-section-padding: 2.2rem;
  --space-layout: 2.5rem;
  --space-hero-top: 3rem;
  --skip-hidden-top: -6rem;
  --skip-layer: 2;
  --size-full: 100%;
  --content-max: 70rem;
  --page-gutter: 2.5rem;
  --page-gutter-compact: 2rem;
  --hero-max: 54rem;
  --lede-max: 68ch;
  --contents-width: 13rem;
  --layout-fraction: 1fr;
  --border-width: 1px;
  --border-width-emphasis: 2px;
  --focus-outline: 3px solid var(--primary);
  --focus-outline-offset: 5px;
  --radius-focus: 2px;
  --radius-card: 0.6rem;
  --paper-padding: clamp(1.3rem, 4vw, 3rem);
  --shadow-card: 0 14px 40px -35px rgba(17, 23, 41, 0.35);
  --shadow-none: none;
  --print-min-lines: 3;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
}

* {
  box-sizing: border-box;
}
body {
  margin: var(--space-zero);
  color: var(--foreground);
  background: var(--background);
  line-height: var(--line-height-body);
  background-image: var(--page-background-image);
}
a {
  color: var(--link);
  text-underline-offset: var(--underline-offset);
  text-decoration-thickness: var(--underline-thickness);
}
a:hover {
  text-decoration-thickness: var(--underline-thickness-hover);
}
a:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  border-radius: var(--radius-focus);
}
.skip {
  position: absolute;
  left: var(--space-md);
  top: var(--skip-hidden-top);
  padding: var(--space-skip-block) var(--space-md);
  background: var(--card);
  border: var(--border-width-emphasis) solid var(--primary);
  z-index: var(--skip-layer);
}
.skip:focus {
  top: var(--space-md);
}
.wrap {
  width: min(var(--content-max), calc(var(--size-full) - var(--page-gutter)));
  margin-inline: auto;
}
.site-header {
  border-bottom: var(--border-width) solid var(--border);
  background: var(--header-background);
}
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
  padding-block: var(--space-lg);
}
.wordmark {
  font-size: var(--font-size-wordmark);
  font-weight: var(--font-weight-wordmark);
  letter-spacing: var(--tracking-wordmark);
  line-height: var(--line-height-wordmark);
  color: var(--foreground);
}
.wordmark span {
  color: var(--primary);
}
.subbrand {
  font-size: var(--font-size-subbrand);
  letter-spacing: var(--tracking-subbrand);
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-top: var(--space-xs);
}
.site-nav {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  font-size: var(--font-size-nav);
}
.site-nav a[aria-current="page"] {
  font-weight: var(--font-weight-emphasis);
  text-decoration-color: var(--primary);
}
.hero {
  padding-block: var(--space-hero-top) var(--space-hero-bottom);
  max-width: var(--hero-max);
}
.eyebrow {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-emphasis);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--eyebrow);
  margin: var(--space-zero) var(--space-zero) var(--space-eyebrow-bottom);
}
h1,
h2,
h3 {
  font-family: var(--font-heading);
  letter-spacing: var(--tracking-heading);
  line-height: var(--line-height-heading);
  text-wrap: balance;
}
h1 {
  font-size: var(--font-size-h1);
  margin: var(--space-zero) var(--space-zero) var(--space-md);
}
h2 {
  font-size: var(--font-size-h2);
  margin: var(--space-zero) var(--space-zero) var(--space-md);
}
h3 {
  font-size: var(--font-size-h3);
  margin: var(--space-zero) var(--space-zero) var(--space-list-separated);
}
.lede {
  font-size: var(--font-size-lede);
  color: var(--muted);
  max-width: var(--lede-max);
  margin: var(--space-zero);
}
.layout {
  display: grid;
  grid-template-columns: var(--contents-width) minmax(
      var(--space-zero),
      var(--layout-fraction)
    );
  gap: var(--space-layout);
  align-items: start;
  margin-bottom: var(--space-hero-top);
}
.contents {
  font-size: var(--font-size-contents);
  color: var(--muted);
}
.contents h2 {
  font: var(--font-contents-title);
  letter-spacing: var(--tracking-contents);
  text-transform: uppercase;
  color: var(--muted);
}
.contents ol {
  list-style: none;
  padding: var(--space-zero);
  margin: var(--space-zero);
}
.contents li {
  margin: var(--space-list) var(--space-zero);
}
.contents a {
  color: var(--contents-link);
}
.paper {
  background: var(--card);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--paper-padding);
  box-shadow: var(--shadow-card);
}
.paper section + section {
  margin-top: var(--space-layout);
  padding-top: var(--space-section-padding);
  border-top: var(--border-width) solid var(--border);
}
p {
  margin: var(--space-zero) var(--space-zero) var(--space-paragraph);
}
p:last-child {
  margin-bottom: var(--space-zero);
}
.paper li + li {
  margin-top: var(--space-list-separated);
}
.contact-box {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  background: var(--background);
  padding: var(--space-contact-block) var(--space-contact-inline);
}
.contact-box a {
  font-weight: var(--font-weight-contact);
}
.site-footer {
  border-top: var(--border-width) solid var(--border);
  padding-block: var(--space-hero-bottom);
  color: var(--muted);
  font-size: var(--font-size-footer);
}
.site-footer p {
  margin: var(--space-zero);
}
.footer-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
section[id] {
  scroll-margin-top: var(--space-xl);
}

/* Media query conditions cannot resolve CSS custom properties; preserve the reviewed 48rem breakpoint. */
@media (max-width: 48rem) {
  .wrap {
    width: min(
      var(--content-max),
      calc(var(--size-full) - var(--page-gutter-compact))
    );
  }
  .hero {
    padding-top: var(--space-compact-page);
  }
  .layout {
    grid-template-columns: var(--layout-fraction);
    gap: var(--space-lg);
  }
  .contents ol {
    display: flex;
    gap: var(--space-sm) var(--space-lg);
    flex-wrap: wrap;
  }
  .contents li {
    margin: var(--space-zero);
  }
  .paper {
    padding: var(--space-paper-compact);
  }
  .header-row {
    gap: var(--space-header-compact);
  }
}

@media print {
  body {
    background: var(--card);
    color: var(--print-foreground);
  }
  .skip,
  .contents {
    display: none;
  }
  .wrap {
    width: var(--size-full);
    max-width: none;
  }
  .site-header {
    background: var(--card);
  }
  .hero {
    padding-top: var(--space-md);
  }
  .layout {
    display: block;
  }
  .paper {
    border: var(--space-zero);
    box-shadow: var(--shadow-none);
    padding: var(--space-zero);
  }
  .site-footer {
    margin-top: var(--space-md);
  }
  a {
    color: inherit;
  }
  h2,
  h3 {
    break-after: avoid;
  }
  p,
  li {
    orphans: var(--print-min-lines);
    widows: var(--print-min-lines);
  }
}