/* ============================================================
   BentoUtils — Global Design System  ·  Kawaii Pastel Edition
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* ── Palette — pulled directly from the BentoUtils logo ── */
  /* Logo: blush-pink frame, sage-green, lilac, butter-yellow, white bg */
  --color-bg:           #fefcfd;   /* near-white, warmest hint of blush */
  --color-surface:      #ffffff;
  --color-surface-alt:  #fdf0f6;   /* palest blush surface */
  --color-border:       #f5cedd;   /* logo-frame pink, softened */
  --color-border-focus: #e898b8;   /* logo-frame pink, focused */

  --color-text-primary:   #3d1525;   /* deep warm rose-brown — 16:1 */
  --color-text-secondary: #7a3a50;   /* medium rose — 8.2:1 */
  --color-text-muted:     #a06070;   /* muted rose — 4.7:1 */
  --color-text-inverse:   #fefcfd;

  /* Accent — the logo's bento-box frame rose */
  --color-accent:         #c84878;   /* logo frame pink, dark enough for text — 4.5:1 */
  --color-accent-hover:   #b83868;
  --color-accent-active:  #a02858;
  --color-accent-subtle:  #fdf0f6;
  --color-accent-border:  #f5c0d0;

  /* Semantic */
  --color-success:        #4a8c38;   /* matcha-green — matches logo sage */
  --color-success-subtle: #e8f5e0;
  --color-warning:        #c07820;
  --color-warning-subtle: #fef8d0;
  --color-danger:         #c84060;   /* rose-danger — logo-adjacent */
  --color-danger-subtle:  #fde8ef;

  /* ── Bento Compartment Colours — logo compartments verbatim ── */
  /* Blush — logo top-left compartment */
  --c-sakura-bg:       #fde8f0;
  --c-sakura-border:   #f5b8d0;
  --c-sakura-text:     #a02040;   /* 6.5:1 on blush bg */
  --c-sakura-icon-bg:  #fde8f0;

  /* Sage — logo top-right compartment */
  --c-matcha-bg:       #e4f5d8;
  --c-matcha-border:   #b0d890;
  --c-matcha-text:     #385a20;   /* 6.9:1 on sage bg */
  --c-matcha-icon-bg:  #d8f0c8;

  /* Lilac — logo bottom-left compartment */
  --c-lavender-bg:     #ece8fa;
  --c-lavender-border: #ccc0f0;
  --c-lavender-text:   #4a2898;   /* 7.7:1 on lilac bg */
  --c-lavender-icon-bg:#ece8fa;

  /* Butter — logo bottom-right compartment */
  --c-butter-bg:       #fef8cc;
  --c-butter-border:   #ead860;
  --c-butter-text:     #785800;   /* 5.4:1 on butter bg */
  --c-butter-icon-bg:  #fef8cc;

  /* Peach / Sky — unused in logo but available for future cards */
  --c-peach-bg:     #feeee8; --c-peach-border: #f8c8b0; --c-peach-text: #903018; --c-peach-icon-bg:#feeee8;
  --c-sky-bg:       #e8f4ff; --c-sky-border:   #b0d4f8; --c-sky-text:   #185890; --c-sky-icon-bg:  #e8f4ff;

  /* ── Typography ──────────────────────────────────────── */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
               "Liberation Mono", Menlo, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Spacing (4px base) ──────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ── Radii — generous, round, kawaii ────────────────── */
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.25rem;
  --radius-2xl:  1.75rem;
  --radius-full: 9999px;

  /* ── Shadows — tinted with logo frame-rose ──────────── */
  --shadow-xs: 0 1px 3px 0 rgb(200 72 120 / 0.10);
  --shadow-sm: 0 2px 6px 0 rgb(200 72 120 / 0.12), 0 1px 2px -1px rgb(200 72 120 / 0.08);
  --shadow-md: 0 4px 12px -1px rgb(200 72 120 / 0.14), 0 2px 6px -2px rgb(200 72 120 / 0.10);
  --shadow-lg: 0 10px 24px -3px rgb(200 72 120 / 0.16), 0 4px 10px -4px rgb(200 72 120 / 0.12);
  --shadow-xl: 0 20px 40px -5px rgb(200 72 120 / 0.18), 0 8px 16px -6px rgb(200 72 120 / 0.14);
  --shadow-accent: 0 0 0 3px rgb(200 72 120 / 0.28);

  /* ── Transitions ─────────────────────────────────────── */
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   350ms;
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ──────────────────────────────────────────── */
  --container-max: 72rem;
  --header-height: 4rem;
}

/* ── Dark Mode — Warm Plum Night (opt-in only via [data-theme="dark"]) ── */
@media (prefers-color-scheme: dark) {
  /* Intentionally empty — dark mode is only applied when the user
     explicitly toggles it so the kawaii light palette shows by default. */
}


[data-theme="light"] {
  --color-bg:           #fefcfd;
  --color-surface:      #ffffff;
  --color-surface-alt:  #fdf0f6;
  --color-border:       #f5cedd;
  --color-border-focus: #e898b8;
  --color-text-primary:   #3d1525;
  --color-text-secondary: #7a3a50;
  --color-text-muted:     #a06070;
  --color-text-inverse:   #fefcfd;
  --color-accent:         #c84878;
  --color-accent-hover:   #b83868;
  --color-accent-active:  #a02858;
  --color-accent-subtle:  #fdf0f6;
  --color-accent-border:  #f5c0d0;
  --c-sakura-bg:#fde8f0; --c-sakura-border:#f5b8d0; --c-sakura-text:#a02040; --c-sakura-icon-bg:#fde8f0;
  --c-matcha-bg:#e4f5d8; --c-matcha-border:#b0d890; --c-matcha-text:#385a20; --c-matcha-icon-bg:#d8f0c8;
  --c-lavender-bg:#ece8fa; --c-lavender-border:#ccc0f0; --c-lavender-text:#4a2898; --c-lavender-icon-bg:#ece8fa;
  --c-butter-bg:#fef8cc; --c-butter-border:#ead860; --c-butter-text:#785800; --c-butter-icon-bg:#fef8cc;
  --shadow-xs: 0 1px 3px 0 rgb(200 72 120 / 0.10);
  --shadow-sm: 0 2px 6px 0 rgb(200 72 120 / 0.12), 0 1px 2px -1px rgb(200 72 120 / 0.08);
  --shadow-md: 0 4px 12px -1px rgb(200 72 120 / 0.14), 0 2px 6px -2px rgb(200 72 120 / 0.10);
  --shadow-lg: 0 10px 24px -3px rgb(200 72 120 / 0.16), 0 4px 10px -4px rgb(200 72 120 / 0.12);
  --shadow-accent: 0 0 0 3px rgb(200 72 120 / 0.28);
}

[data-theme="dark"] {
  --color-bg:           #130914;
  --color-surface:      #1e1024;
  --color-surface-alt:  #2a1832;
  --color-border:       #3d2050;
  --color-border-focus: #c084fc;
  --color-text-primary:   #fce7f3;
  --color-text-secondary: #d8b4fe;
  --color-text-muted:     #9d7fc0;
  --color-text-inverse:   #130914;
  --color-accent:         #e879f9;
  --color-accent-hover:   #d946ef;
  --color-accent-active:  #c026d3;
  --color-accent-subtle:  #2d1052;
  --color-accent-border:  #7e22ce;
  --c-sakura-bg:#4a0720; --c-sakura-border:#831843; --c-sakura-text:#f9a8d4; --c-sakura-icon-bg:#4a0720;
  --c-matcha-bg:#052e16; --c-matcha-border:#14532d; --c-matcha-text:#86efac; --c-matcha-icon-bg:#052e16;
  --c-lavender-bg:#2e1065; --c-lavender-border:#4c1d95; --c-lavender-text:#c4b5fd; --c-lavender-icon-bg:#2e1065;
  --c-butter-bg:#1c1003;  --c-butter-border:#713f12;  --c-butter-text:#fde68a;  --c-butter-icon-bg:#1c1003;
  --shadow-xs: 0 1px 3px 0 rgb(0 0 0 / 0.40);
  --shadow-sm: 0 2px 6px 0 rgb(0 0 0 / 0.50), 0 1px 2px -1px rgb(0 0 0 / 0.40);
  --shadow-md: 0 4px 12px -1px rgb(0 0 0 / 0.55), 0 2px 6px -2px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 10px 24px -3px rgb(0 0 0 / 0.55), 0 4px 10px -4px rgb(0 0 0 / 0.45);
  --shadow-accent: 0 0 0 3px rgb(232 121 249 / 0.30);
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  tab-size: 4;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
}

img, video, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--ease-in-out),
    border-color     var(--duration-fast) var(--ease-in-out),
    color            var(--duration-fast) var(--ease-in-out),
    box-shadow       var(--duration-fast) var(--ease-in-out),
    transform        var(--duration-fast) var(--ease-in-out);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-accent); }
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.45; pointer-events: none; }

.btn-primary {
  background-color: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  box-shadow: 0 2px 8px rgb(244 114 182 / 0.35);
}
.btn-primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  box-shadow: 0 4px 14px rgb(244 114 182 / 0.50);
}
.btn-primary:active {
  background-color: var(--color-accent-active);
  border-color: var(--color-accent-active);
  box-shadow: none;
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}
.btn-ghost:hover {
  background-color: var(--color-accent-subtle);
  border-color: var(--color-accent-border);
  color: var(--color-accent);
}

.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-base); }

/* ── Drop Zone ──────────────────────────────────────────────── */
.drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-8);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
  cursor: pointer;
  transition:
    border-color     var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out),
    color            var(--duration-base) var(--ease-out),
    box-shadow       var(--duration-base) var(--ease-out);
  outline: none;
}
.drop-zone:hover,
.drop-zone:focus-visible {
  border-color: var(--color-accent-border);
  background-color: var(--color-accent-subtle);
  color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}
.drop-zone.is-active {
  border-color: var(--color-accent);
  background-color: var(--color-accent-subtle);
  color: var(--color-accent);
  box-shadow: var(--shadow-accent);
}
.drop-zone__icon {
  width: 2.5rem;
  height: 2.5rem;
  opacity: 0.5;
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.drop-zone:hover .drop-zone__icon,
.drop-zone.is-active .drop-zone__icon {
  opacity: 1;
  transform: translateY(-4px) scale(1.05);
}
.drop-zone__label { font-weight: var(--weight-semibold); }
.drop-zone__hint  { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ── Paywall Modal ──────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgb(31 10 20 / 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 9000;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity     var(--duration-base) var(--ease-in-out),
    visibility  var(--duration-base) var(--ease-in-out);
}
.modal-backdrop.is-open { opacity: 1; visibility: visible; }

.modal {
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  width: 100%;
  max-width: 26rem;
  box-shadow: var(--shadow-xl);
  transform: scale(0.95) translateY(10px);
  transition: transform var(--duration-slow) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.modal::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, var(--c-sakura-bg), transparent 70%);
  pointer-events: none;
}
.modal-backdrop.is-open .modal { transform: scale(1) translateY(0); }

.modal__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background-color: var(--c-sakura-bg);
  color: var(--c-sakura-text);
  border: 1.5px solid var(--c-sakura-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.modal__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.modal__description {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}
.modal__input-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.modal__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); }
.modal__input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-alt);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-in-out),
              box-shadow   var(--duration-fast) var(--ease-in-out);
}
.modal__input:focus { border-color: var(--color-accent); box-shadow: var(--shadow-accent); }
.modal__input::placeholder { color: var(--color-text-muted); }
.modal__actions { display: flex; flex-direction: column; gap: var(--space-2); }
.modal__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.modal__divider::before,
.modal__divider::after { content: ""; flex: 1; height: 1px; background-color: var(--color-border); }

/* ── Utility Classes ────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

@media (max-width: 640px) {
  .container { padding-inline: var(--space-4); }
}

/* ── App page shell ──────────────────────────────────────────── */
.app-main {
  flex: 1;
  padding: var(--space-12) 0 var(--space-16);
}

/* Container inside app-main stacks breadcrumb → intro → body */
.app-main .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.app-main .container > .breadcrumb,
.app-main .container > .app-intro {
  margin-bottom: 0;
}

/* ── Breadcrumb ──────────────────────────────────────────────── */
.breadcrumb {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color .12s;
}
.breadcrumb a:hover { color: var(--color-text-secondary); }

/* ── App intro copy ──────────────────────────────────────────── */
.app-intro {
  text-align: center;
  margin: 0 auto;
  max-width: 50ch;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
}
.app-intro p {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-5);
}
.app-intro p:last-child { margin-bottom: 0; }

/* ── App body ────────────────────────────────────────────────── */
.app-body {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  background: var(--color-surface);
}

/* ── Info tip (?) tooltip ────────────────────────────────────── */
.tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text-muted);
  font-size: 9px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  cursor: default;
  position: relative;
  vertical-align: middle;
  margin-left: .3em;
  flex-shrink: 0;
  user-select: none;
}
.tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  font-size: var(--text-xs, .75rem);
  font-weight: 400;
  line-height: 1.45;
  white-space: normal;
  width: 210px;
  padding: .45rem .6rem;
  border-radius: var(--radius-md, 6px);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s, transform .15s;
  transform: translateX(-50%) translateY(4px);
  z-index: 999;
  text-align: left;
}
.tip:hover::after,
.tip:focus::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* flip to below when near top of viewport */
.tip--below::after {
  bottom: auto;
  top: calc(100% + 7px);
  transform: translateX(-50%) translateY(-4px);
}
.tip--below:hover::after,
.tip--below:focus::after {
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 600px) {
  /* JS toast handles mobile — hide CSS pseudo-element */
  .tip::after,
  .tip--below::after {
    display: none !important;
  }
}

/* ── Motion keyframes ────────────────────────────────────────── */
@keyframes bu-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bu-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes bu-slide-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bu-slide-down {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bu-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ── Page transitions ────────────────────────────────────────── */
.page-wrapper {
  animation: bu-fade-in 220ms var(--ease-out) both;
}
html[data-leaving] .page-wrapper {
  animation: bu-fade-out 150ms ease-in both;
  pointer-events: none;
}

/* ── App page entrance ───────────────────────────────────────── */
.app-hero {
  animation: bu-slide-down 260ms 30ms var(--ease-out) both;
}
.app-body {
  animation: bu-slide-up 300ms 110ms var(--ease-out) both;
}

/* ── Hero chip stagger ───────────────────────────────────────── */
.hero-chip                  { animation: bu-slide-up 200ms var(--ease-out) both; }
.hero-chip:nth-child(1)     { animation-delay:  70ms; }
.hero-chip:nth-child(2)     { animation-delay: 110ms; }
.hero-chip:nth-child(3)     { animation-delay: 150ms; }
.hero-chip:nth-child(4)     { animation-delay: 190ms; }
.hero-chip:nth-child(5)     { animation-delay: 230ms; }
.hero-chip:nth-child(6)     { animation-delay: 270ms; }
.hero-chip:nth-child(7)     { animation-delay: 310ms; }
.hero-chip:nth-child(8)     { animation-delay: 350ms; }

/* ── Stat pop utility — add/remove in JS to animate a value update ── */
.stat-pop {
  animation: bu-pop 280ms var(--ease-out);
}

/* ── Touch-friendly drop zones ───────────────────────────────── */
/* On pointer:coarse devices hide "or click to browse" copy and
   add a clear tap CTA via a CSS pseudo-element instead           */
.is-touch .drop-zone .dz-sub,
.is-touch .drop-zone .drop-zone__hint { display: none; }

.is-touch .drop-zone::after {
  content: "Tap to choose files";
  display: block;
  font-size: var(--text-xs);
  color: var(--color-accent);
  font-weight: var(--weight-bold);
  margin-top: var(--space-2);
}

/* ── CDN load error banner ───────────────────────────────────── */
.cdn-error {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
  border: 1.5px solid var(--color-danger);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-relaxed);
}

/* ── Related guide link (app pages -> /landing-pages/ deep dives) ── */
.app-related-guide {
  padding: var(--space-4) 0 var(--space-10);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}
.app-related-guide a {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.app-related-guide a:hover { text-decoration: underline; }

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .page-wrapper,
  html[data-leaving] .page-wrapper,
  .app-hero,
  .app-body,
  .hero-chip {
    animation: none !important;
  }
}