/* ==========================================================================
   MOONJII — "Stoop"
   Warm, hand-drawn, human. One stylesheet, no build step.

   THE IDEA
   Everything is drawn rather than rendered: thick ink outlines, paper
   surfaces, arches, pinned notes. Nothing has a drop shadow; depth comes
   from outline weight and overlap. Dark mode is a *designed* variant —
   ink becomes chalk on a warm near-black, like a blackboard.

   RULES
   1. Never write a raw colour. Use a token.
   2. Never write margin-left / padding-right / left / right / text-align:left.
      Use logical properties. The Hebrew RTL mirror depends on it and there
      is no build step, so no RTL post-processor exists to save you.
   3. Outlines, not shadows. --mj-line + --mj-line-w.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
button {
  background: none;
  border: none;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
ul,
ol {
  list-style: none;
}

/* --------------------------------------------------------------------------
   2. TOKENS — theme-independent
   -------------------------------------------------------------------------- */

:root {
  /* Type. Fraunces is a soft, slightly wonky serif — it carries the warmth.
     DM Sans keeps the body plain so the serif stays the voice. */
  --mj-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --mj-font-body:
    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mj-font-display-he: "Frank Ruhl Libre", "David Libre", Georgia, serif;
  --mj-font-body-he: "Assistant", "Heebo", Arial, sans-serif;
  --mj-font: var(--mj-font-body);
  --mj-font-h: var(--mj-font-display);

  /* The wordmark. Comfortaa, matching the app. Deliberately its own token
     and NOT derived from --mj-font / --mj-font-h, so the Hebrew font swap
     under :lang(he) cannot reach it — the logo must be identical in every
     locale. */
  --mj-font-wordmark: "Comfortaa", var(--mj-font-body), cursive;
  --mj-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --mj-step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --mj-step-0: clamp(1rem, 0.96rem + 0.22vw, 1.14rem);
  --mj-step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --mj-step-2: clamp(1.5rem, 1.32rem + 0.9vw, 2.1rem);
  --mj-step-3: clamp(1.9rem, 1.55rem + 1.7vw, 3rem);
  --mj-step-4: clamp(2.4rem, 1.75rem + 3.1vw, 4.6rem);

  --mj-lh-tight: 1.06;
  --mj-lh-snug: 1.3;
  --mj-lh-body: 1.65;

  --mj-1: 0.25rem;
  --mj-2: 0.5rem;
  --mj-3: 0.75rem;
  --mj-4: 1rem;
  --mj-5: 1.25rem;
  --mj-6: 1.5rem;
  --mj-8: 2rem;
  --mj-10: 2.5rem;
  --mj-12: 3rem;
  --mj-16: 4rem;
  --mj-20: 5rem;
  --mj-28: 7rem;

  /* Generous, soft radii — the opposite of the old 10/16/24 set. */
  --mj-r-sm: 12px;
  --mj-r-md: 20px;
  --mj-r-lg: 32px;
  --mj-r-xl: 44px;
  --mj-r-pill: 999px;

  --mj-line-w: 2.5px;
  --mj-line-w-thin: 1.5px;

  --mj-maxw: 1200px;
  --mj-maxw-prose: 66ch;
  --mj-nav-h: 5rem;

  --mj-dur: 220ms;
  --mj-ease: cubic-bezier(0.32, 0.72, 0.3, 1);
  --mj-transition: var(--mj-dur) var(--mj-ease);

  /* Paper colours for pinned notes. Deliberately theme-independent —
     paper is paper, and the ink on it stays dark in both modes. */
  --mj-paper-1: #e8cdb8;
  --mj-paper-2: #cbdcc0;
  --mj-paper-3: #edd9a8;
  --mj-paper-4: #ded2c6;
  --mj-paper-ink: #2e2219;

  color-scheme: light dark;
}

/* --------------------------------------------------------------------------
   3. THEMES
   Light is the primary. Dark is designed, not inverted: the ink line becomes
   a warm chalk line on near-black, and solid buttons flip to light fills
   with dark text (a dark terracotta button cannot hold white text at 4.5:1).
   Every pair below is verified against WCAG AA.
   -------------------------------------------------------------------------- */

:root,
[data-theme="light"] {
  --mj-bg: #faf3e7;
  --mj-bg-alt: #f0e4d0;
  --mj-surface: #fffcf5;
  --mj-surface-hi: #f4e9d8;

  --mj-line: #2e2219;
  --mj-border: #e0d2bc;

  --mj-text: #2e2219;
  --mj-text-muted: #6b5949;
  --mj-text-faint: #736051;

  --mj-terra: #a84a26; /* foreground  5.18:1 on bg */
  --mj-terra-solid: #b85a33; /* background 4.51:1 with --mj-on-solid */
  --mj-sage: #4f6b44; /* foreground  5.41:1 */
  --mj-sage-solid: #5c7a50; /* background 4.71:1 */
  --mj-mustard: #8a5d12; /* foreground  5.21:1 */
  --mj-mustard-solid: #e0a63f; /* background 7.13:1 with ink */
  --mj-on-solid: #fffcf5;
  --mj-on-mustard: #2e2219;

  --mj-cta-bg: #2e2219;
  --mj-cta-fg: #faf3e7;
  --mj-cta-muted: #c9b7a4;

  --mj-danger: #a3301f;
  --mj-success: #3f6b3a;

  --mj-nav-bg: rgba(250, 243, 231, 0.92);
  --mj-modal-bg: rgba(46, 34, 25, 0.72);
}

[data-theme="dark"] {
  --mj-bg: #1b1410;
  --mj-bg-alt: #221a14;
  --mj-surface: #2a211a;
  --mj-surface-hi: #342a21;

  --mj-line: #e8d9c4; /* ink becomes chalk */
  --mj-border: #453729;

  --mj-text: #f4eadb;
  --mj-text-muted: #bfab96;
  --mj-text-faint: #a08c78;

  --mj-terra: #e89b72; /* 8.11:1 on bg */
  --mj-terra-solid: #e89b72; /* 7.62:1 with --mj-on-solid */
  --mj-sage: #a6c297;
  --mj-sage-solid: #a6c297;
  --mj-mustard: #ebbe68;
  --mj-mustard-solid: #ebbe68;
  --mj-on-solid: #2a1710; /* dark text on light fills */
  --mj-on-mustard: #2a1710;

  --mj-cta-bg: #3a2c21;
  --mj-cta-fg: #f4eadb;
  --mj-cta-muted: #bfab96;

  --mj-danger: #f0967f;
  --mj-success: #9ec994;

  --mj-nav-bg: rgba(27, 20, 16, 0.92);
  --mj-modal-bg: rgba(58, 44, 33, 0.72);
}

/* No-JS fallback. The blocking snippet in <head> normally sets data-theme
   before first paint, so this only fires when JS is unavailable. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --mj-bg: #1b1410;
    --mj-bg-alt: #221a14;
    --mj-surface: #2a211a;
    --mj-surface-hi: #342a21;
    --mj-line: #e8d9c4;
    --mj-border: #453729;
    --mj-text: #f4eadb;
    --mj-text-muted: #bfab96;
    --mj-text-faint: #a08c78;
    --mj-terra: #e89b72;
    --mj-terra-solid: #e89b72;
    --mj-sage: #a6c297;
    --mj-sage-solid: #a6c297;
    --mj-mustard: #ebbe68;
    --mj-mustard-solid: #ebbe68;
    --mj-on-solid: #2a1710;
    --mj-on-mustard: #2a1710;
    --mj-cta-bg: #3a2c21;
    --mj-cta-fg: #f4eadb;
    --mj-cta-muted: #bfab96;
    --mj-danger: #f0967f;
    --mj-success: #9ec994;

    --mj-nav-bg: rgba(27, 20, 16, 0.92);
    --mj-modal-bg: rgba(58, 44, 33, 0.72);
  }
}

/* --------------------------------------------------------------------------
   4. LANGUAGE / RTL
   Fraunces ships no Hebrew, so Hebrew swaps to Frank Ruhl Libre — a warm
   Hebrew serif with a comparable voice — and Assistant for body copy.
   Hebrew also has no uppercase and needs more leading.
   -------------------------------------------------------------------------- */

:lang(he) {
  --mj-font: var(--mj-font-body-he);
  --mj-font-h: var(--mj-font-display-he);
  --mj-lh-body: 1.8;
  --mj-lh-snug: 1.5;
  --mj-lh-tight: 1.25;
}

:lang(he) .mj-eyebrow,
:lang(he) .mj-note__meta,
:lang(he) label,
:lang(he) .mj-field__label {
  text-transform: none;
  letter-spacing: normal;
}

:lang(he) h1,
:lang(he) h2,
:lang(he) h3,
:lang(he) .mj-display {
  letter-spacing: normal;
}

/* Directional glyphs flip. Illustrations deliberately do not. */
[dir="rtl"] .mj-icon--dir {
  transform: scaleX(-1);
}

/* Emails, URLs and numerals must stay LTR inside Hebrew prose. */
.mj-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   5. BASE
   -------------------------------------------------------------------------- */

body {
  font-family: var(--mj-font);
  font-size: var(--mj-step-0);
  line-height: var(--mj-lh-body);
  background: var(--mj-bg);
  color: var(--mj-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition:
    background-color var(--mj-transition),
    color var(--mj-transition);
}

h1,
h2,
h3,
h4,
.mj-display {
  font-family: var(--mj-font-h);
  font-weight: 600;
  line-height: var(--mj-lh-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--mj-text);
}

h1 {
  font-size: var(--mj-step-4);
}
h2 {
  font-size: var(--mj-step-3);
}
h3 {
  font-size: var(--mj-step-1);
}
h4 {
  font-size: var(--mj-step-0);
}

p {
  text-wrap: pretty;
}
strong {
  font-weight: 700;
}

code {
  font-family: var(--mj-font-mono);
  font-size: 0.88em;
  background: var(--mj-surface-hi);
  border: var(--mj-line-w-thin) solid var(--mj-border);
  border-radius: 8px;
  padding: 0.1em 0.45em;
}

::selection {
  background: var(--mj-mustard-solid);
  color: var(--mj-on-mustard);
}

:focus-visible {
  outline: 3px solid var(--mj-terra);
  outline-offset: 3px;
  border-radius: 6px;
}

[id] {
  scroll-margin-block-start: calc(var(--mj-nav-h) + var(--mj-8));
}

.mj-skip {
  position: absolute;
  inset-inline-start: var(--mj-4);
  inset-block-start: -100%;
  z-index: 200;
  background: var(--mj-terra-solid);
  color: var(--mj-on-solid);
  padding: var(--mj-3) var(--mj-6);
  border-radius: var(--mj-r-pill);
  font-weight: 600;
}
.mj-skip:focus {
  inset-block-start: var(--mj-4);
}

.mj-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   6. LAYOUT
   -------------------------------------------------------------------------- */

.mj-container {
  width: 100%;
  max-width: var(--mj-maxw);
  margin-inline: auto;
  padding-inline: var(--mj-5);
}

.mj-section {
  padding-block: var(--mj-28);
  position: relative;
  overflow: hidden;
}
.mj-section--tight {
  padding-block: var(--mj-20);
}
.mj-section--band {
  background: var(--mj-bg-alt);
}

.mj-split {
  display: grid;
  gap: var(--mj-12);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .mj-split {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--mj-16);
  }
}

.mj-grid-3 {
  display: grid;
  gap: var(--mj-8);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.mj-center {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}

.mj-lede {
  font-size: var(--mj-step-1);
  line-height: var(--mj-lh-snug);
  color: var(--mj-text-muted);
  max-width: 34rem;
}

/* Soft background blobs — the only "decoration" in the system. */
.mj-blob {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: var(--mj-bg-alt);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   7. NAV
   -------------------------------------------------------------------------- */

.mj-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--mj-bg);
  background: var(--mj-nav-bg);
  background: color-mix(in srgb, var(--mj-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.mj-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mj-4);
  block-size: var(--mj-nav-h);
}

.mj-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--mj-3);
  flex-shrink: 0;
}

.mj-brand__mark {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: var(--mj-terra-solid);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.mj-brand__mark img,
.mj-brand__mark svg {
  inline-size: 1.75rem;
  block-size: 1.75rem;
}
.mj-brand__mark img {
  filter: brightness(0) invert(1);
}
[data-theme="dark"] .mj-brand__mark img {
  filter: brightness(0);
}

/* Wordmark. Matches the app exactly apart from size. The optical stroke is
   what the app uses to give Comfortaa's rounded terminals a little more
   weight; without it the mark reads thin next to the logo disc. */
.mj-brand__name {
  font-family: var(--mj-font-wordmark);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  -webkit-text-stroke: 0.5px currentcolor;
  /* Latin wordmark inside an RTL page — isolate it so surrounding Hebrew
     can't reorder it. Paired with dir="ltr" on the element itself. */
  unicode-bidi: isolate;
}

.mj-footer .mj-brand__name {
  font-size: 1.35rem;
}

.mj-nav__links {
  display: none;
  align-items: center;
  gap: var(--mj-8);
}

.mj-nav__link {
  font-size: var(--mj-step--1);
  color: var(--mj-text-muted);
  padding-block: var(--mj-1);
  border-block-end: 2px solid transparent;
  transition:
    color var(--mj-transition),
    border-color var(--mj-transition);
}
.mj-nav__link:hover {
  color: var(--mj-text);
  border-block-end-color: var(--mj-mustard-solid);
}

.mj-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--mj-2);
}

.mj-iconbtn {
  inline-size: 2.4rem;
  block-size: 2.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--mj-text-muted);
  border: var(--mj-line-w-thin) solid transparent;
  transition:
    color var(--mj-transition),
    background var(--mj-transition),
    border-color var(--mj-transition);
}
.mj-iconbtn:hover {
  color: var(--mj-text);
  background: var(--mj-surface-hi);
  border-color: var(--mj-border);
}
.mj-iconbtn svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

.mj-langbtn {
  inline-size: auto;
  border-radius: var(--mj-r-pill);
  padding-inline: var(--mj-3);
  gap: var(--mj-2);
  display: inline-flex;
  align-items: center;
  font-size: var(--mj-step--1);
  font-weight: 500;
}
/* The label is Hebrew ("עב") on English pages and Latin ("EN") on Hebrew
   ones. DM Sans has no Hebrew glyphs, so name both stacks explicitly rather
   than falling through to whatever the OS picks. */
.mj-langbtn span {
  font-family: var(--mj-font-body), var(--mj-font-body-he);
}

.mj-nav__panel {
  overflow: hidden;
  max-block-size: 0;
  transition: max-block-size var(--mj-transition);
}
.mj-nav__panel[data-open="true"] {
  max-block-size: 24rem;
}
.mj-nav__panel ul {
  display: flex;
  flex-direction: column;
  gap: var(--mj-1);
  padding-block: var(--mj-4) var(--mj-6);
}
.mj-nav__panel a,
.mj-nav__panel button {
  display: block;
  inline-size: 100%;
  padding: var(--mj-3) var(--mj-4);
  border-radius: var(--mj-r-sm);
  background: none;
  border: none;
  color: var(--mj-text-muted);
  font-family: var(--mj-font-h);
  font-size: var(--mj-step-1);
  font-weight: inherit;
  text-align: start;
  cursor: pointer;
}
.mj-nav__panel a:hover,
.mj-nav__panel button:hover {
  background: var(--mj-surface-hi);
  color: var(--mj-text);
}
@media (min-width: 62rem) {
  .mj-nav__panel {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   8. BUTTONS — fully rounded, no shadow, optional ink outline
   -------------------------------------------------------------------------- */

.mj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mj-2);
  padding: var(--mj-3) var(--mj-6);
  border-radius: var(--mj-r-pill);
  font-family: var(--mj-font);
  font-size: var(--mj-step--1);
  font-weight: 500;
  border: var(--mj-line-w-thin) solid transparent;
  text-align: center;
  transition:
    background var(--mj-transition),
    color var(--mj-transition),
    border-color var(--mj-transition),
    transform var(--mj-dur);
}
.mj-btn:hover {
  transform: translateY(-2px);
}
.mj-btn:active {
  transform: translateY(0);
}
.mj-btn svg {
  inline-size: 1.05em;
  block-size: 1.05em;
  flex-shrink: 0;
}

.mj-btn--primary {
  background: var(--mj-terra-solid);
  color: var(--mj-on-solid);
}
.mj-btn--primary:hover {
  background: var(--mj-terra);
  background: color-mix(in srgb, var(--mj-terra-solid) 88%, var(--mj-line));
}

.mj-btn--dark {
  background: var(--mj-cta-bg);
  color: var(--mj-cta-fg);
}

.mj-btn--mustard {
  background: var(--mj-mustard-solid);
  color: var(--mj-on-mustard);
}

.mj-btn--outline {
  border-color: var(--mj-line);
  color: var(--mj-text);
}
.mj-btn--outline:hover {
  background: var(--mj-surface-hi);
}

.mj-btn--lg {
  padding: var(--mj-4) var(--mj-8);
  font-size: var(--mj-step-0);
}
.mj-btn--block {
  inline-size: 100%;
}
.mj-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ── App store download buttons ── */
.mj-store-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mj-3);
  align-items: center;
}

.mj-store-btn-custom {
  display: inline-flex;
  align-items: center;
  gap: var(--mj-3);
  padding: var(--mj-3) var(--mj-5);
  border-radius: var(--mj-r-pill);
  border: var(--mj-line-w-thin) solid var(--mj-line);
  font-family: var(--mj-font);
  text-decoration: none;
  transition:
    background var(--mj-transition),
    color var(--mj-transition),
    border-color var(--mj-transition),
    transform var(--mj-dur);
}

.mj-store-btn-custom:hover {
  transform: translateY(-2px);
}

.mj-store-btn-custom:active {
  transform: translateY(0);
}

/* Primary — mustard fill, stands out without leaving the palette */
.mj-store-btn-custom--primary {
  background: var(--mj-mustard-solid);
  color: var(--mj-on-mustard);
  border-color: transparent;
}

.mj-store-btn-custom--primary:hover {
  background: color-mix(in srgb, var(--mj-mustard-solid) 88%, var(--mj-line));
}

/* Outline — muted, for "coming soon" state */
.mj-store-btn-custom--outline {
  background: transparent;
  color: var(--mj-text-muted);
  border-color: var(--mj-border);
  opacity: 0.65;
  cursor: default;
  pointer-events: none;
}

.mj-store-btn-custom__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.mj-store-btn-custom__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.mj-store-btn-custom__label {
  font-size: 0.6rem;
  font-weight: 400;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mj-store-btn-custom__name {
  font-size: var(--mj-step-0);
  font-weight: 600;
}

.mj-nav__cta {
  display: none;
}

@media (min-width: 60rem) {
  .mj-nav__cta {
    display: inline-flex;
  }
  .mj-nav__links {
    display: flex;
  }
  .mj-nav__toggle {
    display: none;
  }
}

/* A quiet text link that still reads as a call to action */
.mj-textlink {
  display: inline-flex;
  align-items: center;
  gap: var(--mj-2);
  font-weight: 500;
  border-block-end: 2px solid var(--mj-mustard-solid);
  padding-block-end: 2px;
  transition: border-color var(--mj-transition);
}
.mj-textlink:hover {
  border-block-end-color: var(--mj-terra);
}

.mj-link {
  color: var(--mj-terra);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  font-weight: 500;
}
.mj-link:hover {
  color: var(--mj-text);
}

/* --------------------------------------------------------------------------
   9. THE INK LANGUAGE — outlined cards, pills, notes
   -------------------------------------------------------------------------- */

.mj-card {
  background: var(--mj-surface);
  border: var(--mj-line-w) solid var(--mj-line);
  border-radius: var(--mj-r-lg);
  padding: var(--mj-8);
}
.mj-card--soft {
  border-width: var(--mj-line-w-thin);
  border-color: var(--mj-border);
}
.mj-card--sm {
  padding: var(--mj-6);
  border-radius: var(--mj-r-md);
}

/* Floating "live" pill — used over the hero illustration */
.mj-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--mj-3);
  padding: var(--mj-3) var(--mj-5) var(--mj-3) var(--mj-3);
  background: var(--mj-surface);
  border: var(--mj-line-w) solid var(--mj-line);
  border-radius: var(--mj-r-pill);
  white-space: nowrap;
}
.mj-pill__dot {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--mj-terra-solid);
  color: var(--mj-on-solid);
}
.mj-pill__dot svg {
  inline-size: 1.1rem;
  block-size: 1.1rem;
}
.mj-pill__dot--sage {
  background: var(--mj-sage-solid);
}
.mj-pill__dot--mustard {
  background: var(--mj-mustard-solid);
  color: var(--mj-on-mustard);
}
.mj-pill__title {
  font-size: var(--mj-step--1);
  font-weight: 700;
  line-height: 1.25;
}
.mj-pill__meta {
  font-size: 0.8rem;
  color: var(--mj-text-muted);
  line-height: 1.25;
}

/* Pinned paper note. Ink stays dark in both themes — it's paper. */
.mj-note {
  position: relative;
  background: var(--mj-paper-1);
  color: var(--mj-paper-ink);
  border: var(--mj-line-w) solid var(--mj-paper-ink);
  border-radius: var(--mj-r-sm);
  padding: var(--mj-8) var(--mj-6) var(--mj-6);
  min-block-size: 13rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--mj-transition);
}
.mj-note:nth-child(4n + 1) {
  background: var(--mj-paper-1);
  transform: rotate(-1.8deg);
}
.mj-note:nth-child(4n + 2) {
  background: var(--mj-paper-2);
  transform: rotate(1.4deg);
}
.mj-note:nth-child(4n + 3) {
  background: var(--mj-paper-3);
  transform: rotate(-1deg);
}
.mj-note:nth-child(4n + 4) {
  background: var(--mj-paper-4);
  transform: rotate(2deg);
}
.mj-note:hover {
  transform: rotate(0deg) translateY(-4px);
}

.mj-note::before {
  content: "";
  position: absolute;
  inset-block-start: -9px;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  background: var(--mj-terra-solid);
  border: var(--mj-line-w) solid var(--mj-paper-ink);
}

.mj-note__body {
  font-family: var(--mj-font-h);
  font-size: var(--mj-step-1);
  line-height: 1.35;
  font-weight: 500;
}
.mj-note__meta {
  font-size: var(--mj-step--1);
  opacity: 0.72;
  margin-block-start: var(--mj-5);
}

.mj-notes {
  display: grid;
  gap: var(--mj-6);
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}

/* --------------------------------------------------------------------------
   10. HERO PARTS
   -------------------------------------------------------------------------- */

.mj-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--mj-2);
  padding: var(--mj-2) var(--mj-4);
  border-radius: var(--mj-r-pill);
  background: var(--mj-surface-hi);
  background: color-mix(in srgb, var(--mj-sage-solid) 18%, transparent);
  color: var(--mj-sage);
  font-size: var(--mj-step--1);
  font-weight: 500;
}
.mj-eyebrow::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--mj-sage);
}

/* Hand-drawn underline. An SVG stroke, not a border — it has to wobble.
   `nowrap` is load-bearing: the stroke is absolutely positioned against the
   inline box, so if the phrase wraps to two lines the underline stretches
   across both and looks broken. Keep scribbled phrases short. */
.mj-scribble {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: var(--mj-terra);
}
.mj-scribble svg {
  position: absolute;
  inset-inline: -1%;
  inset-block-end: -0.2em;
  inline-size: 102%;
  block-size: 0.3em;
  color: var(--mj-mustard-solid);
  overflow: visible;
}

.mj-dotlist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mj-3) var(--mj-8);
  font-size: var(--mj-step--1);
  color: var(--mj-text-muted);
}
.mj-dotlist li {
  display: flex;
  align-items: center;
  gap: var(--mj-2);
}
.mj-dotlist li::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--mj-terra-solid);
}
.mj-dotlist li:nth-child(2)::before {
  background: var(--mj-sage-solid);
}
.mj-dotlist li:nth-child(3)::before {
  background: var(--mj-mustard-solid);
}

.mj-quote {
  border-block-start: 2px solid var(--mj-border);
  padding-block-start: var(--mj-6);
  max-width: 32rem;
}
.mj-quote p {
  font-family: var(--mj-font-h);
  font-size: var(--mj-step-1);
  line-height: 1.4;
}
.mj-quote cite {
  display: block;
  margin-block-start: var(--mj-3);
  font-size: var(--mj-step--1);
  font-style: normal;
  color: var(--mj-text-muted);
}

/* --- Arch illustration paint ---------------------------------------------
   These live in CSS rather than as fill="var(--x)" presentation attributes.
   var() inside a presentation attribute is legal but poorly supported outside
   browsers (print/PDF renderers drop it and paint black), and it can't be
   restyled per theme without duplicating markup. Classes are safer. */
.mj-arch__bg {
  fill: var(--mj-sage-solid);
  opacity: 0.18;
}
/* Sun by day. In dark mode the same circle reads as a moon over the
   building, which is a happy accident worth keeping — so it gets lifted
   rather than dimmed. */
.mj-arch__sun {
  fill: var(--mj-mustard-solid);
  opacity: 0.5;
}
[data-theme="dark"] .mj-arch__sun {
  opacity: 0.72;
}
.mj-arch__facade {
  fill: var(--mj-surface);
  stroke: var(--mj-line);
  stroke-width: 3;
}
.mj-arch__win {
  fill: var(--mj-surface-hi);
  stroke: var(--mj-line);
  stroke-width: 2.5;
}
.mj-arch__win--lit {
  fill: var(--mj-mustard-solid);
}
.mj-arch__fig {
  fill: var(--mj-line);
}
.mj-arch__door {
  fill: var(--mj-terra-solid);
  stroke: var(--mj-line);
  stroke-width: 3;
}
.mj-arch__knob {
  fill: var(--mj-mustard-solid);
}
.mj-arch__pot {
  fill: var(--mj-terra-solid);
  stroke: var(--mj-line);
  stroke-width: 3;
}
.mj-arch__leaf {
  fill: var(--mj-sage-solid);
  stroke: var(--mj-line);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.mj-arch__leaf--back {
  opacity: 0.7;
}
.mj-arch__outline {
  fill: none;
  stroke: var(--mj-line);
  stroke-width: 3.5;
  stroke-linejoin: round;
}

.mj-blob-a {
  fill: var(--mj-terra-solid);
  opacity: 0.55;
}
.mj-blob-b {
  fill: var(--mj-sage-solid);
  opacity: 0.5;
}
.mj-blob-c {
  fill: var(--mj-mustard-solid);
  opacity: 0.5;
}

/* The arch. Load-bearing shape of the whole identity. */
.mj-arch {
  position: relative;
  inline-size: 100%;
  max-inline-size: 30rem;
  margin-inline: auto;
  aspect-ratio: 47 / 76;
}
.mj-arch svg {
  inline-size: 100%;
  block-size: 100%;
}
/* Offsets are deliberately small. They used to be -14% / -18%, which at
   viewport widths just above the 2-column breakpoint pushed the pills into
   the text column on one side and past the container edge on the other. */
.mj-arch__pill {
  position: absolute;
  z-index: 2;
  max-inline-size: 15rem;
}
.mj-arch__pill--a {
  inset-block-start: 28%;
  inset-inline-start: -6%;
}
.mj-arch__pill--b {
  inset-block-start: 54%;
  inset-inline-end: -8%;
}
.mj-arch__pill--c {
  inset-block-end: 9%;
  inset-inline-start: -4%;
}

/* --------------------------------------------------------------------------
   11. NUMBERED STEPS / FEATURE ROWS
   -------------------------------------------------------------------------- */

.mj-steps {
  display: grid;
  gap: var(--mj-8);
  counter-reset: mj-step;
}
.mj-step {
  counter-increment: mj-step;
  display: grid;
  gap: var(--mj-5);
  grid-template-columns: auto 1fr;
  align-items: start;
}
.mj-step::before {
  content: counter(mj-step);
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mj-font-h);
  font-size: var(--mj-step-1);
  font-weight: 600;
  background: var(--mj-surface);
  border: var(--mj-line-w) solid var(--mj-line);
}
.mj-step h3 {
  margin-block-end: var(--mj-2);
}
.mj-step p {
  color: var(--mj-text-muted);
  max-width: 34rem;
}

.mj-marker {
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-block-end: var(--mj-5);
  background: var(--mj-surface-hi);
  background: color-mix(in srgb, var(--mj-terra-solid) 20%, transparent);
  color: var(--mj-terra);
}
.mj-marker svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}
.mj-marker--sage {
  background: var(--mj-surface-hi);
  background: color-mix(in srgb, var(--mj-sage-solid) 22%, transparent);
  color: var(--mj-sage);
}
.mj-marker--mustard {
  background: var(--mj-surface-hi);
  background: color-mix(in srgb, var(--mj-mustard-solid) 26%, transparent);
  color: var(--mj-mustard);
}

/* --------------------------------------------------------------------------
   12. FORMS
   -------------------------------------------------------------------------- */

.mj-form {
  display: flex;
  flex-direction: column;
  gap: var(--mj-4);
}
.mj-field__label {
  display: block;
  font-size: var(--mj-step--1);
  font-weight: 500;
  color: var(--mj-text-muted);
  margin-block-end: var(--mj-2);
}
.mj-input,
.mj-textarea {
  inline-size: 100%;
  padding: var(--mj-3) var(--mj-5);
  background: var(--mj-surface);
  border: var(--mj-line-w-thin) solid var(--mj-line);
  border-radius: var(--mj-r-pill);
  color: var(--mj-text);
  font-size: var(--mj-step--1);
  transition: border-color var(--mj-transition);
}
.mj-textarea {
  border-radius: var(--mj-r-md);
  min-block-size: 6rem;
  resize: vertical;
}
.mj-input::placeholder,
.mj-textarea::placeholder {
  color: var(--mj-text-faint);
}
.mj-input:focus,
.mj-textarea:focus {
  outline: none;
  border-color: var(--mj-terra);
  box-shadow: 0 0 0 3px rgba(168, 74, 38, 0.25);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-terra) 25%, transparent);
}

.mj-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--mj-3);
  font-size: var(--mj-step--1);
  color: var(--mj-text-muted);
  cursor: pointer;
  line-height: var(--mj-lh-snug);
}
.mj-consent input {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  margin-block-start: 0.15rem;
  accent-color: var(--mj-terra-solid);
  flex-shrink: 0;
  cursor: pointer;
}

.mj-hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mj-status {
  display: none;
  padding: var(--mj-3) var(--mj-5);
  border-radius: var(--mj-r-md);
  font-size: var(--mj-step--1);
  border: var(--mj-line-w-thin) solid transparent;
}
.mj-status[data-state="success"] {
  display: block;
  color: var(--mj-success);
  background: var(--mj-surface-hi);
  border-color: var(--mj-success);
  background: color-mix(in srgb, var(--mj-success) 14%, transparent);
  border-color: color-mix(in srgb, var(--mj-success) 40%, transparent);
}
.mj-status[data-state="error"] {
  display: block;
  color: var(--mj-danger);
  background: var(--mj-surface-hi);
  border-color: var(--mj-danger);
  background: color-mix(in srgb, var(--mj-danger) 14%, transparent);
  border-color: color-mix(in srgb, var(--mj-danger) 40%, transparent);
}

/* A single input+button row *inside* a form. Use this rather than making the
   whole <form> a row — the consent checkbox, status message and fallback link
   must stay inside the form element for the JS to find them, and they can't
   sit in a horizontal row. */
.mj-form__row {
  display: flex;
  flex-direction: column;
  gap: var(--mj-3);
}

@media (min-width: 34rem) {
  .mj-form__row {
    flex-direction: row;
    align-items: flex-start;
  }
  .mj-form__row .mj-field {
    flex: 1;
  }
  .mj-form--inline {
    flex-direction: row;
    align-items: flex-start;
  }
  .mj-form--inline .mj-field {
    flex: 1;
  }
}

/* --------------------------------------------------------------------------
   13. MODAL
   -------------------------------------------------------------------------- */

.mj-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  padding: var(--mj-4);
  background: rgba(0, 0, 0, 0.6);
  background: var(--mj-modal-bg);
  background: color-mix(in srgb, var(--mj-cta-bg) 72%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.mj-modal[data-open="true"] {
  display: grid;
}
.mj-modal__box {
  inline-size: 100%;
  max-inline-size: 30rem;
  max-block-size: 90dvh;
  overflow-y: auto;
  background: var(--mj-bg);
  border: var(--mj-line-w) solid var(--mj-line);
  border-radius: var(--mj-r-xl);
  padding: var(--mj-8);
  animation: mj-rise var(--mj-dur) var(--mj-ease);
}
@keyframes mj-rise {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
}
.mj-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mj-4);
  margin-block-end: var(--mj-4);
}

/* --------------------------------------------------------------------------
   13b. MAIL-CLIENT CHOOSER
   Shown on desktop when a mailto: link is clicked. Positioned in JS, so it
   is fixed-position and has no anchor of its own.
   -------------------------------------------------------------------------- */

.mj-mailmenu {
  position: fixed;
  z-index: 300;
  inline-size: min(19rem, calc(100vw - 2rem));
  background: var(--mj-surface);
  border: var(--mj-line-w) solid var(--mj-line);
  border-radius: var(--mj-r-md);
  padding: var(--mj-3);
  animation: mj-rise var(--mj-dur) var(--mj-ease);
}

.mj-mailmenu__title {
  font-size: var(--mj-step--1);
  font-weight: 700;
  color: var(--mj-text-muted);
  padding: var(--mj-2) var(--mj-3) var(--mj-3);
}

.mj-mailmenu__item {
  display: block;
  inline-size: 100%;
  text-align: start;
  padding: var(--mj-3);
  border-radius: var(--mj-r-sm);
  color: var(--mj-text);
  text-decoration: none;
  transition: background var(--mj-transition);
}

.mj-mailmenu__item:hover,
.mj-mailmenu__item:focus-visible {
  background: var(--mj-surface-hi);
}

.mj-mailmenu__label {
  display: block;
  font-size: var(--mj-step--1);
  font-weight: 600;
}

.mj-mailmenu__hint {
  display: block;
  font-size: 0.78rem;
  color: var(--mj-text-muted);
}

.mj-mailmenu__copy {
  border-block-start: 1px solid var(--mj-border);
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  margin-block-start: var(--mj-2);
  padding-block-start: var(--mj-4);
  font: inherit;
}

/* --------------------------------------------------------------------------
   14. CTA PANEL
   -------------------------------------------------------------------------- */

.mj-cta {
  position: relative;
  overflow: hidden;
  background: var(--mj-cta-bg);
  color: var(--mj-cta-fg);
  border-radius: var(--mj-r-xl);
  padding: var(--mj-16) var(--mj-10);
}
.mj-cta h2,
.mj-cta h3 {
  color: var(--mj-cta-fg);
}
.mj-cta p {
  color: var(--mj-cta-muted);
}
.mj-cta__blobs {
  position: absolute;
  inset-block-start: -20%;
  inset-inline-end: -6%;
  inline-size: 22rem;
  block-size: 22rem;
  pointer-events: none;
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   15. PROSE — legal pages
   -------------------------------------------------------------------------- */

.mj-prose {
  max-inline-size: var(--mj-maxw-prose);
  margin-inline: auto;
}
.mj-prose > * + * {
  margin-block-start: var(--mj-5);
}
.mj-prose h2 {
  font-size: var(--mj-step-2);
  margin-block-start: var(--mj-16);
}
.mj-prose h3 {
  font-size: var(--mj-step-1);
  margin-block-start: var(--mj-10);
  color: var(--mj-terra);
}
.mj-prose p,
.mj-prose li {
  color: var(--mj-text-muted);
}
.mj-prose ul {
  list-style: none;
  padding-inline-start: var(--mj-6);
}
.mj-prose ul li {
  position: relative;
}
.mj-prose ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--mj-6) * -1);
  inset-block-start: 0.62em;
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: 50%;
  background: var(--mj-mustard-solid);
}
.mj-prose ol {
  list-style: decimal;
  padding-inline-start: var(--mj-6);
}
.mj-prose li {
  margin-block-start: var(--mj-3);
}
/* `:not(.mj-btn)` is load-bearing. `.mj-prose a` scores 0,1,1 and would
   otherwise outrank `.mj-btn--primary` at 0,1,0 — repainting any button
   inside prose as underlined terracotta text on a terracotta fill, i.e.
   invisible. The DSAR page has exactly such a button. */
.mj-prose a:not(.mj-btn) {
  color: var(--mj-terra);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Buttons keep their own paint anywhere they appear, and never stretch to
   the container just because they sit alone in a block. */
.mj-prose .mj-btn {
  text-decoration: none;
  align-self: flex-start;
  width: fit-content;
}

.mj-callout {
  background: var(--mj-surface-hi);
  border: var(--mj-line-w-thin) solid var(--mj-border);
  border-inline-start: 5px solid var(--mj-terra-solid);
  border-radius: var(--mj-r-md);
  padding: var(--mj-6);
}
.mj-callout--sage {
  border-inline-start-color: var(--mj-sage-solid);
}
.mj-callout--warn {
  border-inline-start-color: var(--mj-mustard-solid);
}

.mj-doc-head {
  padding-block-end: var(--mj-8);
  border-block-end: 2px solid var(--mj-border);
  margin-block-end: var(--mj-8);
}
.mj-doc-head .mj-meta {
  color: var(--mj-text-faint);
  font-size: var(--mj-step--1);
  margin-block-start: var(--mj-3);
}

.mj-ol-steps {
  counter-reset: mj-ostep;
  list-style: none;
  padding: 0;
}
.mj-ol-steps li {
  counter-increment: mj-ostep;
  position: relative;
  padding-inline-start: var(--mj-12);
  margin-block-start: var(--mj-5);
  color: var(--mj-text-muted);
}
.mj-ol-steps li::before {
  content: counter(mj-ostep);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--mj-terra-solid);
  color: var(--mj-on-solid);
  font-size: 0.85rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.mj-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--mj-step--1);
}
.mj-table th,
.mj-table td {
  text-align: start;
  padding: var(--mj-3) var(--mj-4);
  border-block-end: 1px solid var(--mj-border);
  vertical-align: top;
}
.mj-table th {
  color: var(--mj-text);
  font-weight: 700;
}
.mj-table td {
  color: var(--mj-text-muted);
}

.mj-toc {
  display: none;
}
@media (min-width: 74rem) {
  .mj-doc-layout {
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: var(--mj-16);
    align-items: start;
    max-inline-size: var(--mj-maxw);
    margin-inline: auto;
  }
  .mj-toc {
    display: block;
    position: sticky;
    inset-block-start: calc(var(--mj-nav-h) + var(--mj-6));
  }
  .mj-toc ol {
    display: flex;
    flex-direction: column;
    gap: var(--mj-1);
  }
  .mj-toc a {
    display: block;
    padding: var(--mj-2) var(--mj-4);
    border-radius: var(--mj-r-pill);
    font-size: var(--mj-step--1);
    color: var(--mj-text-faint);
  }
  .mj-toc a:hover,
  .mj-toc a[aria-current] {
    color: var(--mj-text);
    background: var(--mj-surface-hi);
  }
  .mj-doc-layout .mj-prose {
    margin-inline: 0;
  }
}

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */

.mj-footer {
  background: var(--mj-bg-alt);
  padding-block: var(--mj-16) var(--mj-10);
  margin-block-start: var(--mj-28);
  border-start-start-radius: var(--mj-r-xl);
  border-start-end-radius: var(--mj-r-xl);
}
.mj-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mj-8);
}
.mj-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mj-4) var(--mj-8);
  font-size: var(--mj-step--1);
}
.mj-footer__links a {
  color: var(--mj-text-muted);
  border-block-end: 2px solid transparent;
}
.mj-footer__links a:hover {
  color: var(--mj-text);
  border-block-end-color: var(--mj-mustard-solid);
}
.mj-footer__bottom {
  margin-block-start: var(--mj-10);
  padding-block-start: var(--mj-6);
  border-block-start: 2px solid var(--mj-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mj-4);
  font-size: var(--mj-step--1);
  color: var(--mj-text-faint);
}

/* --------------------------------------------------------------------------
   17. VERIFYADMIN SHELL
   NOTE: that page's JavaScript is preserved byte-for-byte from an earlier
   build and toggles the literal class names `active`, `visible` and
   `drag-over`. Those legacy selectors are honoured here so the page could be
   restyled without editing a line of the auth/upload logic. Do not remove.
   -------------------------------------------------------------------------- */

.mj-shell {
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mj-5);
  padding: var(--mj-5);
}
.mj-shell__card {
  inline-size: 100%;
  max-inline-size: 30rem;
  min-inline-size: 0;
  background: var(--mj-surface);
  border: var(--mj-line-w) solid var(--mj-line);
  border-radius: var(--mj-r-xl);
  overflow: hidden;
}
.mj-shell__bar {
  block-size: 6px;
  background: linear-gradient(
    90deg,
    var(--mj-terra-solid) 0 33%,
    var(--mj-mustard-solid) 33% 66%,
    var(--mj-sage-solid) 66% 100%
  );
}
.mj-shell__body {
  padding: var(--mj-8);
}

.mj-state {
  display: none;
}
.mj-state.is-active,
.mj-state.active {
  display: block;
}

.mj-errorbanner {
  display: none;
  padding: var(--mj-3) var(--mj-5);
  margin-block-end: var(--mj-5);
  border-radius: var(--mj-r-md);
  font-size: var(--mj-step--1);
  color: var(--mj-danger);
  background: color-mix(in srgb, var(--mj-danger) 14%, transparent);
  border: var(--mj-line-w-thin) solid
    color-mix(in srgb, var(--mj-danger) 40%, transparent);
}
.mj-errorbanner.visible {
  display: block;
}

.mj-spinner {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 3px solid var(--mj-border);
  border-block-start-color: var(--mj-terra);
  border-radius: 50%;
  animation: mj-spin 0.8s linear infinite;
  margin-inline: auto;
}
@keyframes mj-spin {
  to {
    transform: rotate(360deg);
  }
}

.mj-dropzone {
  inline-size: 100%;
  border: 3px dashed var(--mj-border);
  border-radius: var(--mj-r-md);
  padding: var(--mj-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mj-2);
  cursor: pointer;
  text-align: center;
  transition:
    border-color var(--mj-transition),
    background var(--mj-transition);
}
.mj-dropzone:hover,
.mj-dropzone.is-over,
.mj-dropzone.drag-over {
  border-color: var(--mj-terra);
  background: color-mix(in srgb, var(--mj-terra) 8%, transparent);
}
.mj-dropzone svg {
  inline-size: 1.6rem;
  block-size: 1.6rem;
  color: var(--mj-text-muted);
}
.mj-dropzone__label {
  font-weight: 700;
  font-size: var(--mj-step--1);
}
.mj-dropzone__hint {
  font-size: 0.8rem;
  color: var(--mj-text-muted);
}

.mj-file {
  display: none;
  align-items: center;
  gap: var(--mj-3);
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow: hidden;
  background: var(--mj-surface-hi);
  border: var(--mj-line-w-thin) solid var(--mj-border);
  border-radius: var(--mj-r-md);
  padding: var(--mj-3);
}
.mj-file.is-visible,
.mj-file.visible {
  display: flex;
}
.mj-file__info {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
}
.mj-file__name {
  font-size: var(--mj-step--1);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-inline-size: 100%;
}
.mj-file__size {
  font-size: 0.78rem;
  color: var(--mj-text-muted);
}

.mj-statusicon {
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-inline: auto;
  border: var(--mj-line-w) solid currentColor;
}
.mj-statusicon--ok {
  color: var(--mj-success);
  animation: mj-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mj-statusicon--err {
  color: var(--mj-danger);
}
.mj-statusicon svg {
  inline-size: 1.6rem;
  block-size: 1.6rem;
}
@keyframes mj-pop {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   18. UTILITIES
   -------------------------------------------------------------------------- */

.mj-muted {
  color: var(--mj-text-muted);
}
.mj-faint {
  color: var(--mj-text-faint);
}
.mj-small {
  font-size: var(--mj-step--1);
}
.mj-mbs-2 {
  margin-block-start: var(--mj-2);
}
.mj-mbs-4 {
  margin-block-start: var(--mj-4);
}
.mj-mbs-6 {
  margin-block-start: var(--mj-6);
}
.mj-mbs-8 {
  margin-block-start: var(--mj-8);
}
.mj-mbs-10 {
  margin-block-start: var(--mj-10);
}
.mj-mbs-12 {
  margin-block-start: var(--mj-12);
}
.mj-mbe-6 {
  margin-block-end: var(--mj-6);
}
.mj-mbe-8 {
  margin-block-end: var(--mj-8);
}
.mj-mbe-12 {
  margin-block-end: var(--mj-12);
}
.mj-hidden {
  display: none !important;
}
.mj-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mj-4);
}

/* --------------------------------------------------------------------------
   19. MOTION / PRINT
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .mj-note,
  .mj-note:hover {
    transform: none;
  }
  .mj-btn:hover {
    transform: none;
  }
}

@media print {
  .mj-nav,
  .mj-footer,
  .mj-toc,
  .mj-modal {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}