/* Sticky footer без зайвої прокрутки */
* {
  box-sizing: border-box;
}
html,
body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  html,
  body {
    overflow-x: auto;
  }
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #1f2937;
  line-height: 1.5;
  text-align: center;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 420px at 50% -160px, #eaf0f7 0%, #f4f7fb 45%, #f7f9fc 70%, #f8fafc 100%);
}
main {
  flex: 1 0 auto;
  width: min(100%, 55.2rem);
  max-width: 55.2rem;
  margin: 0 auto;
  padding: clamp(12px, 2vw, 28px);
}

main > * {
  width: 100%;
}

.current-function-badge {
  position: fixed;
  top: 64vh;
  left: max(8px, calc((100vw - 55.2rem) / 2 + 8px));
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  direction: ltr;
  text-orientation: mixed;
  font-size: 0.88rem;
  line-height: 1;
  letter-spacing: 0.08em;
  font-weight: 400;
  color: rgba(45, 62, 80, 0.52);
  background: transparent;
  border: 0;
  padding: 0;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 5;
}

body.editorial-page #currentFunctionBadge {
  display: none;
}

.current-function-badge.is-visible {
  opacity: 1;
}

.current-function-badge .badge-numero {
  display: inline-block;
  transform: rotate(90deg);
}

@media (max-width: 1120px) {
  .current-function-badge {
    left: 8px;
  }
}

#single-indicator-block,
#multi-indicators-block {
  width: 100%;
  border: 1px solid #d8e1ec;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  padding: clamp(12px, 1.5vw, 20px);
}

/* CSS змінні для кращої кастомізації */
:root {
  --primary-color: #2d3e50;
  --secondary-color: #34495e;
  --bg-color: #ffffff;
  --text-color: #222222;
  --border-color: #cccccc;
  --error-color: #dc2626;
  --success-color: #16a34a;
  --warning-color: #ca8a04;
  --light-bg: #f8fafc;
  --shadow-light: rgba(0, 0, 0, 0.1);
}

/* Адаптивний дизайн */
@media (max-width: 768px) {
  main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  main {
    padding: 0.35rem !important;
  }

  #single-indicator-block,
  #multi-indicators-block {
    padding: 0.5rem;
  }
  
  .overflow-x-auto {
    max-width: 100vw !important;
    overflow-x: scroll !important;
    -webkit-overflow-scrolling: touch;
  }

  .footer-details {
    font-size: 0.86rem;
    padding: 8px;
  }

  .footer-details > summary {
    font-size: 0.9rem;
  }
  
  #dataTable {
    min-width: 400px !important;
    font-size: 0.875rem;
  }
  
  #dataTable input {
    min-width: 80px !important;
    padding: 0.25rem !important;
    font-size: 0.875rem;
  }
  
  .table-title {
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  button {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    min-height: 44px;
  }
  
  .tab-btn {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
    min-height: 40px;
  }

  #multiAvailTableContainer {
    max-height: min(56vh, 400px) !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  
  table {
    font-size: 14px;
  }

  .current-function-badge {
    display: none;
  }
}

@media (max-width: 480px) {
  main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #single-indicator-block,
  #multi-indicators-block {
    padding: 0.35rem;
  }

  #dataTable {
    min-width: 350px !important;
  }
  
  #dataTable input {
    min-width: 60px !important;
    padding: 0.125rem !important;
  }
  
  main {
    padding: 0.5rem !important;
  }
}

/* Меню (header/nav) */
header {
  background: #2d3e50;
  color: #fff;
  margin-bottom: 20px;
  position: static;
}
.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 clamp(12px, 2.2vw, 30px);
  height: 56px;
  position: relative;
}
.logo {
  font-weight: bold;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
}
.nav-links {
  display: flex;
  gap: 18px;
}
.nav-links a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  padding: 8px 6px;
  border-radius: 4px;
  transition: background 0.2s;
}
.nav-links a:hover {
  background: #1a2533;
}

.nav-links a:focus-visible,
.menu-toggle:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  border-radius: 6px;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}

/* Адаптивність для меню */
@media (max-width: 768px) {
  .main-nav {
    flex-wrap: wrap;
    height: auto;
    padding: 0 8px;
  }
  .nav-links {
    flex-direction: column;
    width: 100%;
    display: none;
    background: #2d3e50;
    position: absolute;
    top: 56px;
    left: 0;
    z-index: 10;
  }
  .nav-links.active {
    display: flex;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
  }
  .menu-toggle {
    display: block;
  }
}

/* Підвал (footer) */
footer {
  padding: 16px;
  background: #f2f2f2;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
}

footer section p {
  line-height: 1.55;
}

footer section p:first-child {
  font-weight: 700;
  letter-spacing: 0.01em;
}

footer section p:nth-child(2) {
  color: #334155;
}

footer a {
  margin-left: 10px;
  color: #2d3e50;
  text-decoration: underline;
}

.app-input {
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.app-input:focus {
  border-color: #2d3e50;
  box-shadow: 0 0 0 3px rgba(45, 62, 80, 0.14);
}

.app-btn {
  min-height: 44px;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 22px rgba(26, 37, 51, 0.12);
}

.app-btn:hover {
  box-shadow: 0 14px 30px rgba(26, 37, 51, 0.18);
}

.footer-details {
  text-align: left;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  padding: 8px 10px;
  background: inherit;
}

.footer-details > summary {
  cursor: pointer;
  font-weight: 500;
  color: #1e293b;
  list-style: none;
}

.footer-details > summary::-webkit-details-marker {
  display: none;
}

.footer-details > summary::marker {
  content: "";
}

.footer-details > summary::after {
  content: "\25B8";
  font-weight: 700;
  margin-left: 8px;
  color: #475569;
}

.footer-details[open] > summary::after {
  content: "\25BE";
}

.footer-authors {
  margin-top: 8px;
}

.footer-authors p {
  margin: 0 0 6px;
}

/* Editorial landing and about pages */
.page-view[hidden] {
  display: none !important;
}

.calculator-page {
  width: min(100%, 55.2rem);
  max-width: 55.2rem;
  padding: clamp(12px, 2vw, 28px);
}

.editorial-page {
  --editorial-ink: #17283d;
  --editorial-muted: #64748b;
  --editorial-line: #e2e8f0;
  text-align: left;
  background: #f7f9fc;
}

.editorial-page header {
  margin-bottom: 0;
  background: #17283d;
}

.editorial-page .main-nav {
  max-width: 82rem;
  height: 68px;
  padding: 0 clamp(20px, 5vw, 68px);
}

.editorial-page .logo {
  font-size: 1.1rem;
  letter-spacing: -0.035em;
}

.editorial-page .logo span {
  color: #a8d4c1;
}

.editorial-page .nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
}

.editorial-page .nav-links a {
  padding: 8px 0;
  border-radius: 0;
  color: #dbe5f1;
  font-size: 0.91rem;
  text-decoration: none;
  transition: color 160ms ease;
}

.editorial-page .nav-links a:hover,
.editorial-page .nav-links a[aria-current="page"] {
  color: #ffffff;
  background: transparent;
}

.editorial-page .nav-links a[aria-current="page"] {
  box-shadow: inset 0 -2px #a8d4c1;
}

.editorial-page .menu-toggle {
  color: #ffffff;
}

.footer-page-nav:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 40px);
  min-height: 68px;
  padding: 12px 20px;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  background: #f7f9fc;
}

.footer-page-nav a {
  margin-left: 0;
}

.editorial-page footer {
  margin-top: 0;
}

.footer-page-nav[hidden] {
  display: none;
}

.footer-page-nav a {
  padding: 7px 0;
  border-bottom: 1px solid transparent;
  color: #334a65;
  font-size: 0.88rem;
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease;
}

.footer-page-nav a:hover,
.footer-page-nav a[aria-current="page"] {
  color: #173d34;
}

.footer-page-nav a[aria-current="page"] {
  border-bottom-color: #173d34;
  font-weight: 700;
}

.footer-page-nav a:focus-visible {
  outline: 2px solid #173d34;
  outline-offset: 4px;
}

.editorial-main {
  width: min(100%, 82rem);
  max-width: 82rem;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 72px) clamp(20px, 5vw, 68px) clamp(50px, 7vw, 96px);
  color: var(--editorial-ink);
  text-align: left;
}

.editorial-main > * {
  width: 100%;
}

.home-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(19rem, 0.92fr);
  align-items: center;
  gap: clamp(34px, 6vw, 86px);
  min-height: 34rem;
  overflow: hidden;
  padding: clamp(32px, 6vw, 76px);
  border-radius: 24px;
  color: #f8fafc;
  background:
    radial-gradient(ellipse at 85% 18%, rgba(91, 137, 139, 0.34), transparent 36%),
    linear-gradient(125deg, #17283d 0%, #1d344b 58%, #294356 100%);
  box-shadow: 0 28px 64px rgba(23, 40, 61, 0.15);
}

.home-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 40rem;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.15rem;
  color: #537465;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.5;
  text-transform: uppercase;
}

.home-hero .eyebrow,
.about-hero .eyebrow {
  color: #b8d9c9;
}

.eyebrow-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #a8d4c1;
  box-shadow: 0 0 14px rgba(168, 212, 193, 0.75);
}

.home-hero h1,
.about-hero h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.45rem, 5vw, 4.6rem);
  font-weight: 650;
  letter-spacing: -0.065em;
  line-height: 1.06;
}

.home-hero h1 span,
.about-hero h1 span {
  color: #b8d9c9;
}

.home-lead {
  max-width: 37rem;
  margin: 1.5rem 0 0;
  color: #d0dbe7;
  font-size: clamp(1rem, 1.4vw, 1.17rem);
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2rem;
}

.button-primary,
.button-secondary {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 0.75rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 650;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.button-primary {
  color: #132a27;
  background: #b8d9c9;
}

.button-primary:hover {
  transform: translateY(-2px);
  background: #d0eadb;
}

.button-secondary {
  border-color: rgba(226, 232, 240, 0.28);
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.04);
}

.button-secondary:hover {
  border-color: rgba(226, 232, 240, 0.55);
  background: rgba(255, 255, 255, 0.1);
}

.hero-caption {
  margin: 1.1rem 0 0;
  color: #9fb0c1;
  font-size: 0.8rem;
}

.hero-visual {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: clamp(20px, 2.5vw, 32px);
  border: 1px solid rgba(226, 232, 240, 0.18);
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.13), 0 24px 50px rgba(7, 17, 28, 0.15);
  backdrop-filter: blur(12px);
}

.visual-topline,
.visual-model-heading {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  color: #a7bacb;
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.visual-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #dce8e3;
  letter-spacing: 0.04em;
}

.visual-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a8d4c1;
}

.visual-model-heading {
  margin-top: 2rem;
  font-size: 0.58rem;
}

.visual-model-heading span:last-child {
  font-weight: 400;
  letter-spacing: 0;
}

.model-plot {
  position: relative;
  height: 13.5rem;
  margin: 0.8rem 0 0.5rem 1.35rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.45);
  border-left: 1px solid rgba(226, 232, 240, 0.45);
  background-image:
    linear-gradient(rgba(226, 232, 240, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 232, 240, 0.09) 1px, transparent 1px);
  background-size: 25% 25%;
}

.plot-y-label,
.plot-x-label {
  position: absolute;
  color: #a7bacb;
  font-size: 0.6rem;
}

.plot-y-label {
  top: 50%;
  left: -1rem;
  transform: translate(-50%, -50%) rotate(-90deg);
  white-space: nowrap;
}

.plot-x-label {
  right: 0;
  bottom: -1.35rem;
}

.plot-point {
  position: absolute;
  z-index: 1;
  width: 9px;
  height: 9px;
  border: 2px solid #17283d;
  border-radius: 50%;
  background: #b8d9c9;
  box-shadow: 0 0 0 2px rgba(184, 217, 201, 0.25);
}

.point-one { left: 12%; bottom: 18%; }
.point-two { left: 25%; bottom: 34%; }
.point-three { left: 41%; bottom: 39%; }
.point-four { left: 57%; bottom: 58%; }
.point-five { left: 74%; bottom: 62%; }
.point-six { left: 88%; bottom: 81%; }

.plot-trend {
  position: absolute;
  left: 10%;
  bottom: 24%;
  width: 82%;
  height: 48%;
  border-top: 2px solid #a8d4c1;
  transform: skewY(-28deg);
  transform-origin: left bottom;
  opacity: 0.72;
}

.visual-equation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.8rem;
  color: #ffffff;
  font-family: Cambria, "Times New Roman", serif;
  font-size: 1.5rem;
}

.equation-equals {
  color: #9fb0c1;
}

.equation-function {
  color: #b8d9c9;
  font-style: italic;
}

.visual-disclaimer {
  margin: 0.8rem 0 0;
  color: #91a5b8;
  font-size: 0.65rem;
  text-align: center;
}

.intro-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.2rem 0 clamp(72px, 10vw, 130px);
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--editorial-line);
}

.intro-strip > div {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.45rem clamp(8px, 1.8vw, 26px);
  border-right: 1px solid var(--editorial-line);
}

.intro-strip > div:first-child { padding-left: 0; }
.intro-strip > div:last-child { border-right: 0; }

.intro-index {
  padding-top: 0.1rem;
  color: #648875;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.intro-strip p {
  margin: 0;
  color: var(--editorial-muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

.intro-strip strong {
  color: var(--editorial-ink);
  font-size: 0.87rem;
  font-weight: 650;
}

.editorial-section {
  margin: 0 0 clamp(72px, 10vw, 128px);
}

.section-heading {
  max-width: 48rem;
  margin: 0 auto 2.2rem;
  text-align: center;
}

.section-heading .eyebrow {
  justify-content: center;
}

.section-heading h2,
.story-heading h2,
.about-links h2 {
  margin: 0;
  color: var(--editorial-ink);
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  font-weight: 650;
  letter-spacing: -0.055em;
  line-height: 1.14;
}

.section-heading > p:last-child,
.about-links > div:first-child > p:last-child {
  max-width: 39rem;
  margin: 0.9rem auto 0;
  color: var(--editorial-muted);
  font-size: 1rem;
  line-height: 1.75;
}

.steps-grid,
.formula-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.step-card,
.formula-card {
  position: relative;
  min-height: 14rem;
  padding: clamp(20px, 2.5vw, 30px);
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(23, 40, 61, 0.035);
}

.step-number {
  position: absolute;
  top: 22px;
  right: 24px;
  color: #93a4b5;
  font-size: 0.7rem;
  font-weight: 700;
}

.step-icon {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  margin-bottom: 1.35rem;
  border: 1px solid #dce9e2;
  border-radius: 10px;
  color: #476d5c;
  background: #f1f7f3;
  font-size: 1.15rem;
}

.step-card h3,
.formula-card h3 {
  margin: 0 0 0.55rem;
  color: var(--editorial-ink);
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.step-card p,
.formula-card p {
  margin: 0;
  color: var(--editorial-muted);
  font-size: 0.88rem;
  line-height: 1.7;
}

.method-caveat {
  max-width: 54rem;
  margin: 1.1rem auto 0;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid #a8c9b5;
  color: #64748b;
  background: #eef4f0;
  font-size: 0.82rem;
  line-height: 1.65;
}

.formula-heading {
  display: flex;
  max-width: none;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
}

.formula-heading .eyebrow {
  justify-content: flex-start;
}

.text-link {
  flex: 0 0 auto;
  padding-bottom: 0.2rem;
  color: #3d6956;
  font-size: 0.88rem;
  font-weight: 650;
  text-decoration: none;
}

.text-link:hover {
  color: #234c39;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.formula-card {
  display: flex;
  min-height: 18rem;
  flex-direction: column;
  align-items: flex-start;
}

.formula-number {
  margin-bottom: 1.8rem;
  color: #648875;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.formula-tag {
  margin-top: auto;
  padding-top: 1.35rem;
  color: #557564;
  font-size: 0.72rem;
  font-weight: 650;
}

.closing-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid #deebe2;
  border-radius: 16px;
  background: linear-gradient(120deg, #eef5f0, #f6f8f6);
}

.closing-cta .eyebrow { margin-bottom: 0.65rem; }

.closing-cta h2 {
  max-width: 42rem;
  margin: 0;
  color: var(--editorial-ink);
  font-size: clamp(1.45rem, 2.8vw, 2.25rem);
  font-weight: 650;
  letter-spacing: -0.05em;
  line-height: 1.2;
}

.closing-cta p:last-child {
  margin: 0.65rem 0 0;
  color: var(--editorial-muted);
  font-size: 0.9rem;
}

.closing-cta .button-primary {
  flex: 0 0 auto;
  color: #ffffff;
  background: #20374a;
}

.closing-cta .button-primary:hover { background: #2e5062; }

.about-hero {
  padding: clamp(34px, 7vw, 82px);
  border-radius: 22px;
  color: #d0dbe7;
  background:
    radial-gradient(ellipse at 86% 15%, rgba(91, 137, 139, 0.32), transparent 34%),
    linear-gradient(125deg, #17283d, #294356);
}

.about-hero h1 {
  max-width: 59rem;
  font-size: clamp(2.35rem, 5.6vw, 4.7rem);
}

.about-hero > p:not(.eyebrow) {
  max-width: 43rem;
  margin: 1.35rem 0 1.7rem;
  color: #d0dbe7;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.75;
}

.about-story {
  display: grid;
  grid-template-columns: minmax(13rem, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(30px, 7vw, 100px);
  padding: clamp(32px, 5vw, 64px) 0;
  border-bottom: 1px solid var(--editorial-line);
}

.story-heading .eyebrow { justify-content: flex-start; }

.story-heading h2 {
  max-width: 23rem;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
}

.story-copy p {
  margin: 0 0 1rem;
  color: #536477;
  font-size: 1rem;
  line-height: 1.85;
}

.story-copy p:last-child { margin-bottom: 0; }
.story-copy strong { color: var(--editorial-ink); font-weight: 650; }

.contribution-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: clamp(36px, 6vw, 72px) 0 clamp(72px, 10vw, 128px);
}

.contribution-card {
  position: relative;
  overflow: hidden;
  min-height: 18rem;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid #e1e8ee;
  border-radius: 16px;
  background: #ffffff;
}

.contribution-development {
  border-color: #d7e6dc;
  background: linear-gradient(145deg, #f2f7f3, #ffffff 80%);
}

.contribution-kicker {
  color: #648875;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.contribution-mark {
  position: absolute;
  top: 22px;
  right: 26px;
  color: #e8edf1;
  font-size: 3.7rem;
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 1;
}

.contribution-card h3 {
  position: relative;
  margin: 2.2rem 0 0.5rem;
  color: var(--editorial-ink);
  font-size: 1.45rem;
  font-weight: 650;
  letter-spacing: -0.04em;
}

.contribution-card > p {
  max-width: 34rem;
  margin: 0.45rem 0;
  color: var(--editorial-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

.contribution-card > p strong { color: #344b5e; }

.about-formulas .section-heading {
  margin-left: 0;
  text-align: left;
}

.about-formulas .section-heading .eyebrow { justify-content: flex-start; }

.about-formulas .section-heading > p:last-child { margin-left: 0; }

.about-formula-list { border-top: 1px solid var(--editorial-line); }

.about-formula-list article {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 0.6rem;
  padding: 1.45rem 0;
  border-bottom: 1px solid var(--editorial-line);
}

.about-formula-list article > span {
  padding-top: 0.18rem;
  color: #648875;
  font-size: 0.75rem;
  font-weight: 700;
}

.about-formula-list h3 {
  margin: 0 0 0.35rem;
  color: var(--editorial-ink);
  font-size: 1.08rem;
  font-weight: 650;
}

.about-formula-list p {
  max-width: 55rem;
  margin: 0;
  color: var(--editorial-muted);
  font-size: 0.89rem;
  line-height: 1.7;
}

.about-links {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 6vw, 82px);
  padding: clamp(26px, 4vw, 48px);
  border: 1px solid #e1e8ee;
  border-radius: 16px;
  background: #ffffff;
}

.about-links .eyebrow { justify-content: flex-start; }
.about-links h2 { font-size: clamp(1.65rem, 2.7vw, 2.25rem); }

.about-links > div:first-child > p:last-child {
  margin-left: 0;
  font-size: 0.9rem;
}

.resource-links { border-top: 1px solid var(--editorial-line); }

.resource-links a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--editorial-line);
  text-decoration: none;
}

.resource-links a span {
  color: var(--editorial-muted);
  font-size: 0.72rem;
}

.resource-links a b {
  color: #315644;
  font-size: 0.86rem;
  font-weight: 650;
}

.resource-links a:hover b {
  color: #17283d;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.editorial-page footer {
  border-top: 1px solid #e2e8f0;
  color: #64748b;
  background: #f1f4f7;
  text-align: left;
}

.editorial-page footer section p:first-child { color: #17283d; }

.editorial-page footer a {
  color: #43596d;
  text-decoration: none;
}

.editorial-page footer a:hover {
  color: #17283d;
  text-decoration: underline;
}

@media (max-width: 900px) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .hero-visual {
    width: min(100%, 35rem);
    margin: 0 auto;
  }

  .about-story {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .editorial-page .main-nav {
    flex-wrap: wrap;
    height: auto;
    min-height: 60px;
    padding: 0 20px;
  }

  .editorial-page .nav-links {
    position: absolute;
    top: 60px;
    left: 0;
    z-index: 10;
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 14px;
    background: #17283d;
  }

  .editorial-page .nav-links.active {
    display: flex;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
  }

  .editorial-page .nav-links a { padding: 10px 0; }

  .editorial-main {
    padding: 24px 20px 52px;
  }

  .home-hero { min-height: 0; }

  .intro-strip {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 72px;
  }

  .intro-strip > div,
  .intro-strip > div:first-child {
    padding: 0.85rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--editorial-line);
  }

  .intro-strip > div:last-child { border-bottom: 0; }

  .steps-grid,
  .formula-cards,
  .contribution-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .formula-heading,
  .closing-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .about-links { grid-template-columns: minmax(0, 1fr); }

  .editorial-page footer { text-align: center; }
}

@media (max-width: 480px) {
  .editorial-main { padding: 18px 14px 42px; }

  .home-hero,
  .about-hero {
    padding: 26px 20px;
    border-radius: 18px;
  }

  .home-hero h1,
  .about-hero h1 {
    font-size: clamp(2.1rem, 11vw, 3rem);
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .button-primary,
  .button-secondary { width: 100%; }

  .model-plot { height: 11rem; }
}

.footer-authors p:last-child {
  margin-bottom: 0;
}

.footer-label {
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

.footer-authors-list {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.footer-authors-list li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 1.25rem;
}

.footer-authors-list li::before {
  content: "\25B8";
  position: absolute;
  left: 0;
  top: 0;
  color: #334155;
  font-size: 0.9em;
}

.footer-authors-note {
  display: block;
  margin-top: 2px;
  color: #475569;
}

.footer-name-emphasis {
  font-weight: 400;
  color: #0f172a;
  letter-spacing: 0.01em;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 9999;
  background: #0f172a;
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 10px;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.contact-card {
  width: 100%;
  border: 1px solid #d8e1ec;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  padding: clamp(12px, 1.5vw, 20px);
  text-align: left;
}

.contact-card .form-row {
  margin-bottom: 10px;
}

.contact-card label {
  display: block;
  font-size: 0.92rem;
  color: #334155;
  margin-bottom: 4px;
}

.contact-card input[type="text"],
.contact-card input[type="email"],
.contact-card input[type="file"],
.contact-card textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.95rem;
  background: #fff;
}

.contact-card textarea {
  min-height: 84px;
  resize: vertical;
}

.form-status {
  min-height: 1.3em;
  margin-top: 8px;
  font-size: 0.9rem;
  font-weight: 600;
}

.form-status.is-success {
  color: #15803d;
}

.form-status.is-error {
  color: #b91c1c;
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.mode-toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}
.mode-label {
  font-size: 16px;
  color: #222;
  min-width: 180px;
  text-align: center;
}
.switch {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 28px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
.switch input:checked + .slider {
  background-color: #2d3e50; /* основний колір сайту */
}
.switch input:checked + .slider:before {
  transform: translateX(26px);
}

/* Якщо потрібно повернути фокус для input (не обов'язково, але якщо буде) */
input:focus {
  outline: 2px solid #2d3e50; /* основний колір сайту */
  outline-offset: 2px;
}

.sum-row {
  background-color: #f1f5f9;
  font-weight: bold;
}
.sum-row td {
  font-family: inherit !important;
  letter-spacing: normal !important;
  color: #222 !important;
}

/* Перевірте, чи немає такого або подібного коду: */
input[type="number"]:focus,
input[type="number"]:active,
input[type="number"]:autofill,
input:autofill,
input:-webkit-autofill {
  background: none !important;
  box-shadow: none !important;
  /* або інші кольори */
}



/* Ці правила повністю прибирають блакитний фон autofill у всіх сучасних браузерах */
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:hover {
  background: none !important;
  box-shadow: 0 0 0 1000px white inset !important;
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: #222 !important;
  transition: background-color 5000s ease-in-out 0s;
}

input[type="number"]:autofill,
input:autofill {
  background: none !important;
  box-shadow: 0 0 0 1000px white inset !important;
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: #222 !important;
}

/* Виділення активної вкладки мульти-режиму */
.single-tab-btn[data-active="1"],
.multi-tab-btn[data-active="1"] {
  background-color: #e5e7eb !important;
  color: #222 !important;
  border-color: #e5e7eb !important;
  font-weight: 600;
}

/* Для сінгл-режиму: прибрати відступи між формулою та таблицею */
#singleTabContents .math-formula,
#singleTabContents .formula-block,
#singleTabContents .formula,
#singleTabContents .math,
#singleTabContents .katex,
#singleTabContents .mjx-container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
#singleTabContents .single-calc-table-block {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#singleTabContents .single-formula-block {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Єдине правило для довгих формул: без автопереносу, зі скролом по X */
#singleTabContents .single-formula-block,
#singleTabContents .math-formula,
#singleTabContents .formula-block,
#singleTabContents .formula,
#singleTabContents .math,
.multi-top-theory-formula,
.multi-tab-content .mb-2.text-left > span.block.text-base[style*="font-size: 1.5rem"],
#singleTabContents .tab-content .mb-2.text-left > span.block.text-base[style*="font-size: 1.5rem"],
.multi-equation-formula {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

#singleTabContents .single-formula-block .mjx-container,
#singleTabContents .math-formula .mjx-container,
#singleTabContents .formula-block .mjx-container,
#singleTabContents .formula .mjx-container,
#singleTabContents .math .mjx-container,
.multi-top-theory-formula .mjx-container,
.multi-tab-content .mb-2.text-left > span.block.text-base[style*="font-size: 1.5rem"] .mjx-container,
#singleTabContents .tab-content .mb-2.text-left > span.block.text-base[style*="font-size: 1.5rem"] .mjx-container,
.multi-equation-formula .mjx-container {
  white-space: nowrap;
}

/* Accessibility improvements */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus improvements for accessibility */
input:focus,
button:focus {
  outline: 2px solid #2d3e50;
  outline-offset: 2px;
}

/* Видаляємо застарілі властивості */
/* -webkit-text-size-adjust: 100%; */ /* застаріле */

/* Performance improvements - видалено застарілі властивості */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Оптимізація перерисовки */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* GPU acceleration для анімацій */
.transition {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Покращення для жестів та touch-інтерфейсу */
@media (hover: none) and (pointer: coarse) {
  /* Збільшуємо область натискання для touch-пристроїв */
  .tab-btn {
    min-height: 48px;
    min-width: 48px;
    padding: 0.75rem 1rem;
  }
  
  /* Покращення для input-полів на touch-пристроях */
  input[type="number"],
  input[type="text"] {
    font-size: 16px; /* Запобігає zoom на iOS */
    min-height: 48px;
  }
  
  /* Покращення для кнопок */
  button {
    min-height: 48px;
    min-width: 48px;
    padding: 0.75rem 1rem;
  }
  
  /* Покращення hover-ефектів для touch */
  button:active,
  .tab-btn:active {
    background-color: #e5e7eb;
    transform: scale(0.98);
  }
}

/* Покращення доступності для скрін-рідерів */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Підтримка темної теми */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #e5e5e5;
    --border-color: #333;
  }
  
  /* Цей код можна розкоментувати, коли буде потреба у темній темі
  body {
    background-color: var(--bg-color);
    color: var(--text-color);
  }
  
  table {
    border-color: var(--border-color);
  }
  */
}

/* Стилі для заголовка таблиці */
.text-xl {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: bold;
    margin: 1rem 0 0.25rem 0;
    padding: 0;
    text-align: center;
    color: var(--text-color);
}

.font-bold {
    font-weight: bold;
}

.text-gray-800 {
    color: var(--text-color);
}

.mb-4 {
    margin-bottom: 0.25rem;
}

.input-table-scroll {
  max-height: 420px;
  overflow-y: auto;
  margin-bottom: 1rem;
}

/* Стилі для заголовка вхідної таблиці */
.input-table-title {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 600;
    margin: 1rem 0 0.25rem 0;
    padding: 0;
    text-align: center;
    color: var(--text-color);
}

#dataTable td.cell-range-selected,
#dataTable th.cell-range-selected,
#multiDataTable td.cell-range-selected,
#multiDataTable th.cell-range-selected {
  background-color: #bfdbfe !important;
}

#dataTable .cell-range-selected input,
#multiDataTable .cell-range-selected input {
  background-color: transparent !important;
}

#singleTabs {
  margin-top: 1.5rem;
  padding: 0.9rem;
  border: 1px solid #d7e0eb;
  border-radius: 0.75rem;
  background: linear-gradient(180deg, #f7f9fc 0%, #f9fbfd 100%);
}

#singleTabs.hidden {
  display: none;
}

#singleTabs:not(.hidden) {
  display: block;
}


.single-quick-nav {
  position: fixed;
  top: 34%;
  right: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  z-index: 2400;
  pointer-events: none;
}

@media (max-width: 768px) {
  .single-quick-nav {
    pointer-events: none;
    touch-action: auto;
    -webkit-touch-callout: none;
  }
}

.single-quick-nav-toggle,
.single-quick-nav-panel,
.single-quick-nav-item,
.single-quick-nav-subitem {
  pointer-events: auto;
  touch-action: auto;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

.single-quick-nav-toggle {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(90, 108, 128, 0.28);
  border-right: 0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(208, 218, 230, 0.78) 0px,
      rgba(208, 218, 230, 0.78) 2px,
      rgba(232, 238, 246, 0.76) 2px,
      rgba(232, 238, 246, 0.76) 7px
    );
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
  font-weight: 400;
  padding: 0;
  writing-mode: horizontal-tb;
  transform: translateX(1px);
  border-radius: 10px 0 0 10px;
  cursor: pointer;
  min-height: min(62vh, 440px);
  min-width: 16px;
  opacity: 0.72;
  box-shadow: -3px 6px 14px rgba(18, 34, 54, 0.16);
  transition: transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
}

.single-quick-nav-toggle::before {
  content: "\2261";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1f2937;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.88;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.single-quick-nav-toggle:hover,
.single-quick-nav-toggle:focus-visible {
  transform: translateX(0);
  box-shadow: -4px 7px 16px rgba(18, 34, 54, 0.18);
}

.single-quick-nav.edge-hint .single-quick-nav-toggle,
.single-quick-nav:hover .single-quick-nav-toggle,
.single-quick-nav:focus-within .single-quick-nav-toggle,
.single-quick-nav.is-open .single-quick-nav-toggle {
  opacity: 0.92;
  transform: translateX(0);
}

.single-quick-nav.edge-focus .single-quick-nav-toggle,
.single-quick-nav.coarse-pointer.edge-hint .single-quick-nav-toggle {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  .single-quick-nav-toggle,
  .multi-quick-nav-toggle {
    min-width: 22px;
    transform: translateX(0);
    opacity: 0.94;
    border-color: rgba(72, 90, 112, 0.5);
    background:
      repeating-linear-gradient(
        180deg,
        rgba(183, 197, 214, 0.95) 0px,
        rgba(183, 197, 214, 0.95) 2px,
        rgba(224, 232, 242, 0.92) 2px,
        rgba(224, 232, 242, 0.92) 7px
      );
    box-shadow: -4px 8px 16px rgba(18, 34, 54, 0.2);
  }

  .single-quick-nav-toggle::before,
  .multi-quick-nav-toggle::before {
    color: #1b2a3b;
    font-size: 16px;
    opacity: 0.98;
  }
}

.single-quick-nav-panel {
  width: min(300px, 78vw);
  max-height: 68vh;
  max-width: calc(100vw - 12px);
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #c9d4e2;
  border-right: 0;
  border-radius: 14px 0 0 14px;
  background: linear-gradient(180deg, #f9fbfe 0%, #f6f9fc 100%);
  box-shadow: -10px 12px 30px rgba(18, 34, 54, 0.16);
  padding: 0.78rem 0.7rem 0.7rem;
  transform: translateX(104%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.2s ease;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.single-quick-nav:hover .single-quick-nav-panel,
.single-quick-nav:focus-within .single-quick-nav-panel,
.single-quick-nav.is-open .single-quick-nav-panel {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.single-quick-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  min-width: 0;
}

.single-quick-nav-item {
  width: 100%;
  border: 1px solid #d4deea;
  border-radius: 10px;
  background: #f2f6fb;
  color: #223349;
  text-align: left;
  font-size: 0.83rem;
  line-height: 1.3;
  padding: 0.48rem 0.62rem;
  cursor: pointer;
  transition: all 0.16s ease;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.single-quick-nav-item:hover,
.single-quick-nav-item:focus-visible {
  border-color: #9fb2c8;
  background: #eaf0f8;
}

.single-quick-nav-item[data-active="1"] {
  border-color: #2d3e50;
  background: linear-gradient(90deg, #2d3e50 0%, #3a4f66 100%);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.single-quick-nav-sublist {
  margin: 0.28rem 0 0.14rem;
  padding: 0.05rem 0 0 0.36rem;
  border-left: 1px solid #d6e0eb;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.single-quick-nav-subitem {
  width: 100%;
  border: 1px solid #d8e2ee;
  border-radius: 8px;
  background: #ffffff;
  color: #31465f;
  text-align: left;
  font-size: 0.76rem;
  line-height: 1.26;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.34rem;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.single-quick-nav-item span,
.single-quick-nav-subitem span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.single-quick-nav-subitem:hover,
.single-quick-nav-subitem:focus-visible {
  border-color: #a8b9cb;
  background: #f0f5fb;
  color: #22344a;
}

.multi-quick-nav {
  position: fixed;
  top: 34%;
  right: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  z-index: 2390;
  pointer-events: none;
}

@media (max-width: 768px) {
  .multi-quick-nav {
    pointer-events: none;
    touch-action: auto;
    -webkit-touch-callout: none;
  }
}

.multi-quick-nav-toggle,
.multi-quick-nav-panel,
.multi-quick-nav-item,
.multi-quick-nav-subitem {
  pointer-events: auto;
  touch-action: auto;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

.multi-quick-nav-toggle {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(90, 108, 128, 0.28);
  border-right: 0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(208, 218, 230, 0.78) 0px,
      rgba(208, 218, 230, 0.78) 2px,
      rgba(232, 238, 246, 0.76) 2px,
      rgba(232, 238, 246, 0.76) 7px
    );
  color: transparent;
  font-size: 0;
  padding: 0;
  transform: translateX(1px);
  border-radius: 10px 0 0 10px;
  cursor: pointer;
  min-height: min(62vh, 440px);
  min-width: 16px;
  opacity: 0.72;
  box-shadow: -3px 6px 14px rgba(18, 34, 54, 0.16);
  transition: transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
}

.multi-quick-nav-toggle::before {
  content: "\2261";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1f2937;
  font-size: 14px;
  font-weight: 700;
  opacity: 0.88;
}

.multi-quick-nav.edge-hint .multi-quick-nav-toggle,
.multi-quick-nav:hover .multi-quick-nav-toggle,
.multi-quick-nav:focus-within .multi-quick-nav-toggle,
.multi-quick-nav.is-open .multi-quick-nav-toggle {
  opacity: 0.92;
  transform: translateX(0);
}

.multi-quick-nav-panel {
  width: min(300px, 78vw);
  max-height: 68vh;
  max-width: calc(100vw - 12px);
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #c9d4e2;
  border-right: 0;
  border-radius: 14px 0 0 14px;
  background: linear-gradient(180deg, #f9fbfe 0%, #f6f9fc 100%);
  box-shadow: -10px 12px 30px rgba(18, 34, 54, 0.16);
  padding: 0.78rem 0.7rem 0.7rem;
  transform: translateX(104%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.multi-quick-nav:hover .multi-quick-nav-panel,
.multi-quick-nav:focus-within .multi-quick-nav-panel,
.multi-quick-nav.is-open .multi-quick-nav-panel {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.multi-quick-nav-list,
.multi-quick-nav-sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.multi-quick-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.multi-quick-nav-sublist {
  margin-top: 0.28rem;
  padding-left: 0.36rem;
  border-left: 1px solid #d6e0eb;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.multi-quick-nav-item,
.multi-quick-nav-subitem {
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: all 0.16s ease;
}

.multi-quick-nav-item {
  border: 1px solid #d4deea;
  border-radius: 10px;
  background: #f2f6fb;
  color: #223349;
  font-size: 0.83rem;
  line-height: 1.3;
  padding: 0.48rem 0.62rem;
}

.multi-quick-nav-item[data-active="1"] {
  border-color: #2d3e50;
  background: linear-gradient(90deg, #2d3e50 0%, #3a4f66 100%);
  color: #ffffff;
  font-weight: 700;
}

.multi-quick-nav-subitem {
  border: 1px solid #d8e2ee;
  border-radius: 8px;
  background: #ffffff;
  color: #31465f;
  font-size: 0.76rem;
  line-height: 1.26;
  padding: 0.4rem 0.5rem;
}

.multi-model-params-container {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid #d7e0eb;
  padding: 1rem;
  width: 100%;
  text-align: justify;
}

.multi-model-params-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.multi-model-params-intro {
  font-size: 1rem;
  line-height: 1.5;
  color: #000000;
  margin-bottom: 0.25rem;
}

.multi-model-params-equation {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 0;
  margin-bottom: 0.2rem;
}

.multi-equation-item {
  font-size: 1rem;
  line-height: 1.5;
  color: #000000;
  text-align: left;
}

.multi-equation-formula {
  font-size: 1.3em;
}

.multi-model-conclusion {
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #000000;
}

.multi-model-params-container .model-note {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: #4b5563;
}

.multi-influence-table {
  table-layout: fixed;
}

.multi-influence-table th,
.multi-influence-table td,
.multi-influence-text-wrap {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.multi-influence-symbol-cell {
  white-space: nowrap;
}

@media (hover: none), (pointer: coarse), (max-width: 768px) {
  .multi-quick-nav {
    top: 34%;
    right: max(0px, env(safe-area-inset-right));
  }

  .multi-quick-nav-toggle {
    min-height: min(56vh, 360px);
    min-width: 38px;
    transform: translateX(0);
    opacity: 0.96;
  }

  .multi-quick-nav-panel {
    width: min(356px, calc(100vw - 8px));
    max-width: calc(100vw - 8px);
    min-width: min(276px, calc(100vw - 8px));
    max-height: 62vh;
  }

  .multi-quick-nav:hover .multi-quick-nav-panel {
    transform: translateX(104%);
    opacity: 0;
    pointer-events: none;
  }

  .multi-quick-nav.is-open .multi-quick-nav-panel,
  .multi-quick-nav:focus-within .multi-quick-nav-panel {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
}

.quick-anchor-point {
  position: relative;
  display: block;
  height: 0;
  margin: 0;
  padding: 0;
  scroll-margin-top: 12px;
}

@media (hover: none), (pointer: coarse), (max-width: 768px) {
  main {
    /* Reserve tap-safe area for fixed right quick-nav in phone portrait mode. */
    padding-right: calc(0.5rem + 44px + env(safe-area-inset-right)) !important;
  }

  .single-quick-nav {
    top: 34%;
    right: max(0px, env(safe-area-inset-right));
    bottom: auto;
  }

  .single-quick-nav-toggle {
    min-height: min(56vh, 360px);
    min-width: 38px;
    transform: translateX(0);
    opacity: 0.96;
    border-color: #c9d4e2;
    background: linear-gradient(180deg, #f7f9fc 0%, #e9eff5 100%);
    box-shadow: -4px 8px 16px rgba(45, 62, 80, 0.12);
  }

  .single-quick-nav-toggle::before {
    content: "\2261";
    top: 4px;
    inset: 4px 0 auto 0;
    font-size: 14px;
    color: #2d3e50;
    opacity: 0.98;
    text-shadow: none;
    align-items: flex-start;
    height: auto;
    pointer-events: none;
  }

  .single-quick-nav-toggle::after {
    content: attr(data-active-tab);
    position: absolute;
    inset: 22px 1px 6px 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-orientation: mixed;
    color: #2d3e50;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.05;
    opacity: 0.96;
    pointer-events: none;
  }

  .single-quick-nav-panel {
    width: min(356px, calc(100vw - 8px));
    max-width: calc(100vw - 8px);
    min-width: min(276px, calc(100vw - 8px));
    max-height: 62vh;
    padding: 0.62rem;
    right: 0;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .single-quick-nav-item {
    width: 100%;
    min-height: 42px;
    font-size: 0.88rem;
    padding: 0.5rem 0.6rem;
    white-space: normal;
  }

  .single-quick-nav-subitem {
    width: 100%;
    min-height: 40px;
    font-size: 0.82rem;
    padding: 0.46rem 0.52rem;
    line-height: 1.25;
    white-space: normal;
  }

  .single-quick-nav-toggle:hover,
  .single-quick-nav-toggle:focus-visible {
    transform: none;
  }

  .single-quick-nav:hover .single-quick-nav-panel {
    transform: translateX(104%);
    opacity: 0;
    pointer-events: none;
  }

  .single-quick-nav.is-open .single-quick-nav-panel,
  .single-quick-nav:focus-within .single-quick-nav-panel {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  .single-quick-nav.edge-hint .single-quick-nav-toggle,
  .single-quick-nav.edge-focus .single-quick-nav-toggle,
  .single-quick-nav.coarse-pointer .single-quick-nav-toggle,
  .single-quick-nav.is-open .single-quick-nav-toggle {
    opacity: 1;
    transform: translateX(0);
  }

  /* Горизонтальний скрол для формул, які не вміщуються в ширину екрана */
  .equation-item {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .mjx-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .model-params-container,
  .multi-model-params-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .model-params-container table,
  .multi-model-params-container table {
    min-width: max-content;
  }

  .model-params-container .single-main-equation-latex,
  .model-params-container .single-main-equation-latex .mjx-container,
  .multi-model-params-container .multi-equation-formula {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .multi-model-params-container .multi-equation-formula .mjx-container {
    display: inline-block;
    max-width: none;
    overflow: visible;
    white-space: nowrap;
  }

  .overflow-x-auto,
  .equation-item,
  .single-formula-block,
  .multi-equation-formula,
  .mjx-container {
    scrollbar-width: thin;
    scrollbar-color: #90a4ba #e7edf4;
    overscroll-behavior-x: contain;
  }

  .overflow-x-auto,
  .equation-item,
  .single-formula-block,
  .multi-equation-formula {
    padding-bottom: 4px;
  }

  .overflow-x-auto::-webkit-scrollbar,
  .equation-item::-webkit-scrollbar,
  .single-formula-block::-webkit-scrollbar,
  .multi-equation-formula::-webkit-scrollbar,
  .mjx-container::-webkit-scrollbar {
    height: 8px;
  }

  .overflow-x-auto::-webkit-scrollbar-track,
  .equation-item::-webkit-scrollbar-track,
  .single-formula-block::-webkit-scrollbar-track,
  .multi-equation-formula::-webkit-scrollbar-track,
  .mjx-container::-webkit-scrollbar-track {
    background: #e7edf4;
    border-radius: 999px;
  }

  .overflow-x-auto::-webkit-scrollbar-thumb,
  .equation-item::-webkit-scrollbar-thumb,
  .single-formula-block::-webkit-scrollbar-thumb,
  .multi-equation-formula::-webkit-scrollbar-thumb,
  .mjx-container::-webkit-scrollbar-thumb {
    background: #90a4ba;
    border-radius: 999px;
  }
}

/* Стили для текста с коэффициентом K */
.coefficient-value {
  font-weight: 600;
  color: #2d3e50;
}

/* Стилі для вашого інпутбокса з класом norm-input */
.norm-input {
  border: 1px solid #4a4a4a; /* Тонка рамка 1px, графітовий колір */
  border-radius: 4px;      /* Трохи заокруглені кути для м'якшого вигляду */
}

.normative-intensity-input-row {
  display: grid;
  grid-template-columns: minmax(320px, auto) 150px;
  column-gap: 12px;
  align-items: center;
  margin-top: 8px;
}

.normative-intensity-input-label {
  line-height: 1.35;
}

.normative-intensity-input-row .norm-input {
  width: 140px;
  justify-self: start;
}

.normative-intensity-frame {
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.75rem 0.875rem;
  transition: border-color 0.18s ease;
  touch-action: auto;
  pointer-events: auto;
}

.normative-intensity-frame label {
  cursor: pointer;
  touch-action: auto;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}

.normative-intensity-frame:hover,
.normative-intensity-frame:focus-within {
  border-color: #dfe6ee;
}

.normative-intensity-chart-divider {
  border-top: 1px solid #e8edf3;
  padding-top: 0.5rem;
}

.normative-intensity-frame input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #ccc;
  background: #ffffff;
  margin: 0;
  position: relative;
  flex: 0 0 16px;
  box-shadow: none;
  cursor: pointer;
  touch-action: auto;
  -webkit-user-select: none;
  user-select: none;
}

.normative-intensity-frame input[type="radio"]:checked {
  border-color: #ccc;
  background: radial-gradient(circle, #9ca3af 0 4px, #ffffff 5px);
}

.normative-intensity-frame input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid #ccc;
  border-radius: 3px;
  background: transparent;
  margin: 0;
  position: relative;
  flex: 0 0 16px;
  cursor: pointer;
  touch-action: auto;
  -webkit-user-select: none;
  user-select: none;
}

.normative-intensity-frame input[type="checkbox"]:checked {
  background: #9ca3af;
  border-color: #9ca3af;
}

@media (max-width: 640px) {
  .normative-intensity-input-row {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }

  .normative-intensity-input-row .norm-input {
    width: 100%;
    max-width: 220px;
  }
}

.normative-intensity-frame input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.normative-intensity-frame input[type="radio"]:focus-visible,
.normative-intensity-frame input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: none;
}

.normative-intensity-frame input[type="radio"]:focus,
.normative-intensity-frame input[type="checkbox"]:focus {
  outline: none;
  box-shadow: none;
}

.intensity-degree-tooltip-trigger {
  display: inline;
  font: inherit;
  font-weight: inherit;
  font-style: italic;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
}

.intensity-degree-tooltip-trigger:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Стилі для помилок валідації input-error */
input.input-error {
  background-color: #ffc0cb !important;
  color: #333;
}

input.input-error::placeholder {
  color: #ff69b4;
}

@media (max-width: 768px) {
  #single-indicator-block,
  #multi-indicators-block {
    border-radius: 10px;
    padding: 10px;
  }

  #singleTabs {
    padding: 0.6rem;
    border-radius: 0.6rem;
  }
}

button:disabled,
input:disabled,
select:disabled,
[aria-disabled="true"] {
  opacity: 0.58;
  cursor: not-allowed !important;
}

.forecast-negative-note {
  margin: 8px 0 0;
  color: #78716c;
  font-size: 0.9rem;
  text-align: left;
  padding: 8px 10px;
  border-left: 3px solid #d6d3d1;
  background-color: #fafaf9;
}

/* МСРЗ editorial identity: warm paper, aubergine ink and restrained terracotta */
.editorial-page {
  --editorial-ink: #302b35;
  --editorial-muted: #6f6a70;
  --editorial-line: #e4ded6;
  --editorial-accent: #a95f3e;
  --editorial-paper: #f7f5f0;
  background: var(--editorial-paper);
}

.editorial-page header {
  background: #3d3542;
}

.editorial-page .main-nav {
  max-width: 78rem;
  color: #1d1d1f;
  background: rgba(255, 255, 255, 0.86);
}

.editorial-page .logo span,
.editorial-page .nav-links a[aria-current="page"] {
  color: #e6b18b;
}

.editorial-page .nav-links a[aria-current="page"] {
  box-shadow: inset 0 -2px #d19369;
}

.editorial-page .nav-links a:hover {
  color: #ffffff;
}

.editorial-main {
  width: min(100%, 78rem);
  max-width: 78rem;
  color: var(--editorial-ink);
}

.home-hero {
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.88fr);
  gap: clamp(36px, 6vw, 84px);
  min-height: 31rem;
  padding: clamp(34px, 5vw, 68px) clamp(28px, 4vw, 58px);
  border: 1px solid #e8e0d6;
  border-radius: 12px;
  color: var(--editorial-ink);
  background:
    radial-gradient(ellipse at 92% 8%, rgba(210, 167, 128, 0.22), transparent 34%),
    linear-gradient(135deg, #f1ede5 0%, #f8f6f1 60%, #ede8df 100%);
  box-shadow: 0 18px 48px rgba(62, 48, 39, 0.07);
}

.eyebrow {
  color: #87543c;
  letter-spacing: 0.1em;
}

.home-hero .eyebrow,
.about-hero .eyebrow {
  color: #88563e;
}

.eyebrow-dot,
.visual-live i {
  background: #b66b46;
  box-shadow: 0 0 12px rgba(182, 107, 70, 0.32);
}

.home-hero h1,
.about-hero h1 {
  color: #302b35;
  font-size: clamp(2.5rem, 4.6vw, 4.25rem);
  letter-spacing: -0.06em;
}

.home-hero h1 span,
.about-hero h1 span {
  color: #9b5a3e;
}

.home-lead {
  color: #625d63;
}

.hero-caption {
  color: #79716e;
}

.button-primary,
.closing-cta .button-primary {
  border-color: #3d3542;
  color: #ffffff;
  background: #3d3542;
}

.button-primary:hover,
.closing-cta .button-primary:hover {
  background: #514557;
}

.button-secondary {
  border-color: #c9beb4;
  color: #554c55;
  background: rgba(255, 255, 255, 0.68);
}

.button-secondary:hover {
  border-color: #9b5a3e;
  color: #3d3542;
  background: #ffffff;
}

.hero-visual {
  border: 1px solid #e5ded4;
  border-radius: 10px;
  color: #514c50;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 36px rgba(62, 48, 39, 0.08);
  backdrop-filter: none;
}

.visual-topline,
.visual-model-heading {
  color: #777078;
}

.visual-live {
  color: #514c50;
}

.model-plot {
  border-color: rgba(111, 106, 112, 0.42);
  background-image:
    linear-gradient(rgba(111, 106, 112, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 106, 112, 0.1) 1px, transparent 1px);
}

.plot-y-label,
.plot-x-label {
  color: #777078;
}

.plot-point {
  border-color: #fffdfa;
  background: #b66b46;
  box-shadow: 0 0 0 1px rgba(166, 95, 62, 0.22);
}

.plot-trend {
  border-color: #a95f3e;
}

.visual-equation {
  color: #302b35;
}

.equation-equals {
  color: #898087;
}

.equation-function {
  color: #9b5a3e;
}

.visual-disclaimer {
  color: #837c80;
}

.intro-strip {
  margin-bottom: clamp(58px, 8vw, 100px);
  border-color: var(--editorial-line);
}

.intro-strip > div {
  border-color: var(--editorial-line);
}

.intro-index,
.formula-number,
.formula-tag,
.about-formula-list article > span {
  color: #9b5a3e;
}

.intro-strip p,
.section-heading > p:last-child,
.about-links > div:first-child > p:last-child,
.step-card p,
.formula-card p,
.story-copy p,
.contribution-card > p,
.about-formula-list p {
  color: var(--editorial-muted);
}

.section-heading h2,
.story-heading h2,
.about-links h2,
.step-card h3,
.formula-card h3,
.contribution-card h3,
.about-formula-list h3,
.closing-cta h2 {
  color: var(--editorial-ink);
}

.step-card,
.formula-card {
  border-color: #e6e0d8;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(62, 48, 39, 0.035);
}

.step-icon {
  border-color: #eadbd0;
  border-radius: 8px;
  color: #905539;
  background: #f8f0e9;
}

.method-caveat {
  border-left-color: #b66b46;
  color: #6f6769;
  background: #f1ebe4;
}

.text-link,
.resource-links a b {
  color: #87513b;
}

.text-link:hover,
.resource-links a:hover b {
  color: #613c31;
}

.closing-cta {
  border-color: #e5d9ce;
  border-radius: 10px;
  background: linear-gradient(115deg, #efe7dd, #f8f5f0);
}

.about-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 6vw, 70px);
  border: 1px solid #e5d9ce;
  border-left: 5px solid #a95f3e;
  border-radius: 10px;
  color: var(--editorial-ink);
  background:
    radial-gradient(ellipse at 92% 8%, rgba(210, 167, 128, 0.2), transparent 35%),
    #f1ede5;
}

.about-hero > p:not(.eyebrow) {
  color: #625d63;
}

.about-story {
  border-color: var(--editorial-line);
}

.contribution-card {
  border-color: #e5ded6;
  border-radius: 10px;
}

.contribution-development {
  border-color: #e5d9ce;
  background: linear-gradient(145deg, #f4ece4, #fffdfa 82%);
}

.contribution-kicker {
  color: #9b5a3e;
}

.contribution-mark {
  color: #eee6dd;
}

.contribution-card > p strong,
.story-copy strong {
  color: #493d48;
}

.about-formula-list,
.about-formula-list article,
.resource-links,
.resource-links a {
  border-color: var(--editorial-line);
}

.about-links {
  border-color: #e5ded6;
  border-radius: 10px;
  background: #fffdfa;
}

.editorial-page footer {
  border-color: #e4ded6;
  color: #706a6d;
  background: #efede8;
}

.editorial-page footer section p:first-child {
  color: #3d3542;
}

.editorial-page footer a {
  color: #75503f;
}

.editorial-page footer a:hover {
  color: #3d3542;
}

.editorial-page .footer-details {
  border-color: #ded6cd;
  background: rgba(255, 255, 255, 0.48);
}

.site-page-nav {
  border-color: var(--editorial-line);
  background: var(--editorial-paper);
}

.site-page-nav a {
  color: #6c5b58;
}

.site-page-nav a[aria-current="page"] {
  color: #8f5138;
}

@media (max-width: 900px) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-visual {
    width: min(100%, 35rem);
  }
}

@media (max-width: 768px) {
  .editorial-page .main-nav {
    flex-wrap: wrap;
    height: auto;
    min-height: 60px;
    padding: 0 20px;
    background: rgba(255, 255, 255, 0.96);
  }

  .editorial-page .nav-links {
    position: absolute;
    top: 60px;
    left: 0;
    z-index: 10;
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 14px;
    background: #17283d;
  }

  .editorial-page .nav-links.active {
    display: flex;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
  }

  .editorial-page .nav-links a { padding: 10px 0; }

  .editorial-main { padding: 24px 20px 52px; }

  .home-hero { min-height: 0; }

  .intro-strip {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 72px;
  }

  .intro-strip > div,
  .intro-strip > div:first-child {
    padding: 0.85rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--editorial-line);
  }

  .intro-strip > div:last-child { border-bottom: 0; }

  .steps-grid,
  .formula-cards,
  .contribution-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .formula-heading,
  .closing-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .about-links { grid-template-columns: minmax(0, 1fr); }

  .editorial-page footer { text-align: center; }
}

@media (max-width: 480px) {
  .home-hero,
  .about-hero {
    padding: 26px 20px;
  }

  .editorial-main { padding: 18px 14px 42px; }

  .home-hero h1,
  .about-hero h1 { font-size: clamp(2.1rem, 11vw, 3rem); }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .button-primary,
  .button-secondary { width: 100%; }

  .model-plot { height: 11rem; }
}

/* Light, focused visual identity for the MSRZ site */
.editorial-page {
  --editorial-ink: #1d1d1f;
  --editorial-muted: #6e6e73;
  --editorial-line: #e2e9e3;
  --editorial-accent: #32805a;
  --editorial-paper: #f5f7f5;
  color: var(--editorial-ink);
  background:
    radial-gradient(ellipse at 50% -260px, #e7f2e9 0, transparent 56%),
    var(--editorial-paper);
}

.editorial-page header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid rgba(29, 29, 31, 0.08);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(18px);
}

.editorial-page .main-nav {
  max-width: 78rem;
}

.editorial-page .logo {
  color: #1d1d1f;
  font-weight: 650;
}

.editorial-page .logo span {
  color: var(--editorial-accent);
}

.editorial-page .logo {
  color: #1d1d1f;
}

.editorial-page .menu-toggle {
  color: #1d1d1f;
}

.editorial-page .nav-links a {
  color: #424245;
}

.editorial-page .nav-links a:hover,
.editorial-page .nav-links a[aria-current="page"] {
  color: var(--editorial-accent);
}

.editorial-page .nav-links a[aria-current="page"] {
  box-shadow: inset 0 -2px var(--editorial-accent);
}

.editorial-main {
  color: var(--editorial-ink);
}

.home-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(19rem, 0.92fr);
  min-height: 32rem;
  border: 1px solid rgba(29, 29, 31, 0.06);
  border-radius: 24px;
  color: var(--editorial-ink);
  background:
    radial-gradient(ellipse at 86% 14%, rgba(194, 225, 202, 0.62), transparent 36%),
    linear-gradient(135deg, #ffffff 0%, #f8faf8 55%, #edf5ef 100%);
  box-shadow: 0 24px 70px rgba(54, 93, 63, 0.08);
}

.eyebrow {
  color: #52745f;
  letter-spacing: 0.11em;
}

.home-hero .eyebrow,
.about-hero .eyebrow {
  color: #52745f;
}

.eyebrow-dot,
.visual-live i {
  background: #59a876;
  box-shadow: 0 0 14px rgba(74, 151, 96, 0.28);
}

.home-hero h1,
.about-hero h1 {
  color: #1d1d1f;
  font-size: clamp(2.45rem, 5vw, 4.4rem);
}

.home-hero h1 span,
.about-hero h1 span {
  color: #32805a;
}

.home-lead {
  color: #51545a;
}

.hero-caption {
  color: #737780;
}

.button-primary,
.closing-cta .button-primary {
  border-color: var(--editorial-accent);
  color: #ffffff;
  background: var(--editorial-accent);
}

.button-primary:hover,
.closing-cta .button-primary:hover {
  background: #286a49;
}

.button-secondary {
  border-color: #d5ddd6;
  color: #2d3138;
  background: rgba(255, 255, 255, 0.72);
}

.button-secondary:hover {
  border-color: #a9c9b1;
  color: #286a49;
  background: #ffffff;
}

.hero-visual {
  border-color: rgba(29, 29, 31, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 48px rgba(54, 93, 63, 0.09);
  backdrop-filter: blur(16px);
}

.visual-topline,
.visual-model-heading,
.plot-y-label,
.plot-x-label {
  color: #737780;
}

.visual-live {
  color: #42464c;
}

.model-plot {
  border-color: rgba(95, 112, 99, 0.34);
  background-image:
    linear-gradient(rgba(95, 112, 99, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 112, 99, 0.1) 1px, transparent 1px);
}

.plot-point {
  border-color: #ffffff;
  background: #4a9664;
  box-shadow: 0 0 0 2px rgba(74, 150, 100, 0.16);
  transform: translate(-50%, 50%);
}

.plot-trend {
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  overflow: visible;
  width: 100%;
  height: 100%;
  border: 0;
  transform: none;
  opacity: 1;
  pointer-events: none;
}

.plot-trend line {
  stroke: #4a9664;
  stroke-width: 0.8;
}

.visual-equation {
  color: #1d1d1f;
  gap: 0;
  margin-top: 0.45rem;
  font-size: clamp(0.82rem, 1.5vw, 1.15rem);
  white-space: nowrap;
}

.equation-caption {
  margin-top: 1.65rem;
  color: #5c6b60;
  font-size: 0.61rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.visual-equation .mjx-container {
  max-width: 100%;
  overflow: visible;
  margin: 0 !important;
  font-size: 100% !important;
}

.equation-equals {
  color: #86868b;
}

.equation-function {
  color: #32805a;
}

.visual-disclaimer {
  color: #86868b;
}

.intro-strip,
.intro-strip > div,
.about-story,
.about-formula-list,
.about-formula-list article,
.resource-links,
.resource-links a {
  border-color: var(--editorial-line);
}

.intro-index,
.formula-number,
.formula-tag,
.about-formula-list article > span,
.contribution-kicker {
  color: #32805a;
}

.intro-strip p,
.section-heading > p:last-child,
.about-links > div:first-child > p:last-child,
.step-card p,
.formula-card p,
.story-copy p,
.contribution-card > p,
.about-formula-list p {
  color: var(--editorial-muted);
}

.section-heading h2,
.story-heading h2,
.about-links h2,
.step-card h3,
.formula-card h3,
.contribution-card h3,
.about-formula-list h3,
.closing-cta h2 {
  color: var(--editorial-ink);
}

.step-card,
.formula-card {
  border-color: #e2e9e3;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 28px rgba(29, 29, 31, 0.045);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.step-card:hover,
.formula-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(29, 29, 31, 0.08);
}

.step-icon {
  border-color: #d9e9dc;
  border-radius: 12px;
  color: #32805a;
  background: #eff7f0;
}

.method-caveat {
  border-left-color: #69a97b;
  color: #5f6874;
  background: #edf5ee;
}

.text-link,
.resource-links a b {
  color: #2f7952;
}

.text-link:hover,
.resource-links a:hover b {
  color: #215d3d;
}

.closing-cta {
  border-color: #dce9dd;
  border-radius: 18px;
  background: linear-gradient(115deg, #edf5ee, #f8fbf8);
}

.about-hero {
  border: 1px solid rgba(29, 29, 31, 0.06);
  border-left: 4px solid #59a876;
  border-radius: 20px;
  color: var(--editorial-ink);
  background:
    radial-gradient(ellipse at 90% 10%, rgba(194, 225, 202, 0.62), transparent 37%),
    linear-gradient(135deg, #ffffff, #eff6f0);
}

.about-hero > p:not(.eyebrow) {
  color: #51545a;
}

.contribution-card {
  border-color: #e5e5ea;
  border-radius: 16px;
  background: #ffffff;
}

.contribution-development {
  border-color: #dce9dd;
  background: linear-gradient(145deg, #eff6f0, #ffffff 82%);
}

.contribution-mark {
  color: #edf3ed;
}

.contribution-card > p strong,
.story-copy strong {
  color: #34363a;
}

.about-links {
  border-color: #e2e9e3;
  border-radius: 16px;
  background: #ffffff;
}

.editorial-page footer {
  border-color: #e2e9e3;
  color: #6e6e73;
  background: #eff2ef;
}

.editorial-page footer section p:first-child {
  color: #1d1d1f;
}

.editorial-page footer a {
  color: #2f7952;
}

.editorial-page footer a:hover {
  color: #215d3d;
}

.editorial-page .footer-details {
  border-color: #dce4dd;
  background: rgba(255, 255, 255, 0.62);
}

.site-page-nav {
  border-color: var(--editorial-line);
  background: var(--editorial-paper);
}

.site-page-nav a {
  color: #626269;
}

.site-page-nav a[aria-current="page"] {
  color: var(--editorial-accent);
}

@media (max-width: 900px) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .editorial-page header {
    background: rgba(255, 255, 255, 0.96);
  }

  .editorial-page .nav-links {
    border-top: 1px solid #e2e9e3;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(18px);
  }

  .editorial-page .nav-links a {
    color: #34363a;
  }

  .editorial-page .nav-links a[aria-current="page"] {
    color: var(--editorial-accent);
  }
}