/* Temporary renovation skin for the copied mortiz.org app, privacy, and support pages. */
:root {
  --preview-canvas: #06100d;
  --preview-canvas-deep: #030806;
  --preview-ink: #f4f7f3;
  --preview-soft: #aebbb5;
  --preview-faint: #74837c;
  --preview-panel: rgba(15, 29, 24, .72);
  --preview-panel-strong: rgba(17, 33, 27, .9);
  --preview-line: rgba(218, 255, 238, .12);
  --preview-line-strong: rgba(218, 255, 238, .24);
  --preview-mint: #76f1c8;
  color-scheme: dark;
}

body {
  color: var(--preview-ink);
  background-color: var(--preview-canvas-deep);
  background-image:
    radial-gradient(circle at 12% 5%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 30rem),
    radial-gradient(circle at 88% 22%, rgba(126, 95, 255, .11), transparent 34rem),
    linear-gradient(180deg, var(--preview-canvas), var(--preview-canvas-deep) 58%, #07120e);
  background-attachment: fixed;
}

body::before {
  opacity: .42;
}

/* Product and marketing pages */
body:has(.masthead) {
  --paper: var(--preview-canvas);
  --paper-deep: var(--preview-canvas-deep);
  --ink: var(--preview-ink);
  --ink-soft: var(--preview-soft);
  --ink-faint: var(--preview-faint);
  --rule: var(--preview-line);
  --rule-soft: rgba(218, 255, 238, .075);
  --shadow-card: 0 20px 70px rgba(0, 0, 0, .28);
  --shadow-phone: 0 34px 90px -24px rgba(0, 0, 0, .7),
    0 0 70px color-mix(in srgb, var(--accent) 10%, transparent);
  color-scheme: dark;
}

body:has(.masthead)[data-accent] {
  --accent-deep: color-mix(in srgb, var(--accent) 72%, white);
  --wash: color-mix(in srgb, var(--accent) 12%, transparent);
}

body:has(.masthead) .bar {
  position: sticky;
  top: 0;
  z-index: 20;
  max-width: 100%;
  padding-inline: max(clamp(1.2rem, 5vw, 2.5rem), calc((100% - var(--maxw)) / 2 + 2rem));
  background: rgba(6, 16, 13, .78);
  border-color: var(--preview-line);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

body:has(.masthead) .bar__brand .mark {
  border-color: color-mix(in srgb, var(--accent) 65%, white);
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

body:has(.masthead) .masthead {
  position: relative;
  margin-top: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(2rem, 6vw, 4.25rem);
  border: 1px solid var(--preview-line);
  border-radius: clamp(24px, 4vw, 36px);
  background: linear-gradient(145deg, rgba(18, 35, 29, .82), rgba(7, 17, 14, .72));
  box-shadow: 0 36px 100px rgba(0, 0, 0, .28);
  overflow: hidden;
  isolation: isolate;
}

body:has(.masthead) .masthead::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -35%;
  right: -15%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent), transparent 68%);
}

body:has(.masthead) h1 {
  letter-spacing: -.045em;
}

body:has(.masthead) h1 em,
body:has(.masthead) a,
body:has(.masthead) .soap-label .no,
body:has(.masthead) .vitals dd,
body:has(.masthead) .req li::before,
body:has(.masthead) .faq summary::after {
  color: var(--accent-deep);
}

body:has(.masthead) .btn-store {
  color: #06100d;
  background: var(--accent-deep);
  box-shadow: 0 14px 42px color-mix(in srgb, var(--accent) 17%, transparent);
}

body:has(.masthead) .stamp {
  color: var(--accent-deep);
  border-color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

body:has(.masthead) .device {
  background: #020504;
  border: 1px solid rgba(255, 255, 255, .1);
}

body:has(.masthead) .soap {
  display: grid;
  gap: 1rem;
}

body:has(.masthead) .soap > li {
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--preview-line);
  border-radius: clamp(22px, 3vw, 30px);
  background: linear-gradient(145deg, rgba(14, 29, 24, .72), rgba(6, 16, 13, .55));
  box-shadow: 0 22px 70px rgba(0, 0, 0, .18);
  overflow: hidden;
}

body:has(.masthead) .soap > li::before {
  color: color-mix(in srgb, var(--accent) 12%, transparent);
}

body:has(.masthead) .steps li,
body:has(.masthead) .vitals .row {
  border-color: var(--preview-line);
}

body:has(.masthead) .faq details {
  border-color: var(--preview-line);
}

body:has(.masthead) .close-band {
  margin-block: clamp(2rem, 5vw, 4rem);
  padding: clamp(2rem, 6vw, 4rem);
  border: 1px solid var(--preview-line);
  border-radius: clamp(22px, 4vw, 34px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, var(--preview-panel)), var(--preview-panel));
}

body:has(.masthead) .foot {
  color: var(--preview-faint);
  border-color: var(--preview-line);
}

/* Privacy and support documents */
body:has(.sheet) {
  --bg: var(--preview-canvas-deep);
  --bg-mesh-1: #0d211a;
  --bg-mesh-2: #122b22;
  --surface: var(--preview-panel);
  --surface-solid: var(--preview-panel-strong);
  --surface-2: rgba(24, 44, 36, .82);
  --border: var(--preview-line);
  --border-strong: var(--preview-line-strong);
  --text: var(--preview-ink);
  --text-soft: var(--preview-soft);
  --text-faint: var(--preview-faint);
  --accent-ink: color-mix(in srgb, var(--accent) 66%, white);
  color-scheme: dark;
}

body:has(.sheet) .topbar {
  background: rgba(6, 16, 13, .78);
}

body:has(.sheet) .sheet {
  border-radius: clamp(24px, 4vw, 34px);
  background: linear-gradient(150deg, rgba(18, 35, 29, .88), rgba(7, 17, 14, .78));
  box-shadow: 0 36px 100px rgba(0, 0, 0, .28);
}

body:has(.sheet) .doc-head {
  border-color: var(--preview-line);
}

body:has(.sheet) .theme-toggle {
  display: none;
}

body:has(.sheet) .wordmark {
  gap: 0.7rem;
  letter-spacing: -0.01em;
}

body:has(.sheet) .wordmark .name {
  font-size: 0.98rem;
  font-weight: 700;
}

body:has(.sheet) .wordmark-label {
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

@media (max-width: 420px) {
  body:has(.sheet) .wordmark-label {
    display: none;
  }
}

@media (max-width: 760px) {
  body:has(.masthead) .masthead {
    margin-top: 1rem;
    padding: 1.35rem;
  }

  body:has(.masthead) .soap > li {
    padding: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body:has(.masthead) .device,
  body:has(.masthead) .device:hover {
    animation: none !important;
    transform: none !important;
  }
}