/* truenum.ru — editorial / telecom-document landing
   single stylesheet, no preprocessor, no JS dependencies. */

:root {
  --paper:        #F4F1EA;
  --paper-strong: #EBE6DA;
  --ink:          #14161C;
  --ink-muted:    #6B6962;
  --rule:         rgba(31, 33, 40, 0.14);
  --rule-strong:  rgba(31, 33, 40, 0.32);
  --accent:       #C9591A;
  --accent-ink:   #FFF7EE;

  --serif: "IBM Plex Serif", "Times New Roman", Georgia, serif;
  --sans:  "IBM Plex Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:  "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --maxw:    1240px;
  --gutter:  clamp(20px, 4vw, 48px);
  --section: clamp(72px, 11vw, 160px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
}

/* subtle paper grain — drawn purely with CSS, no asset */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(rgba(20, 22, 28, 0.05) 1px, transparent 1px),
    radial-gradient(rgba(20, 22, 28, 0.03) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: multiply;
  opacity: 0.55;
}

main, .site-header, .site-footer { position: relative; z-index: 1; }

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
}
a:hover { border-bottom-color: var(--accent); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0 0 1em; }

/* --- container ----------------------------------------------------------- */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--gutter);
}

/* --- header -------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--rule);
  padding: 22px 0 20px;
}

.site-header__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gutter);
}

.wordmark {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  border-bottom: none;
}
.wordmark .wordmark-dot { color: var(--accent); }

.site-nav {
  display: flex;
  gap: clamp(18px, 3vw, 36px);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-muted);
}
.site-nav a { padding-bottom: 4px; }
.site-nav a.is-current { color: var(--ink); border-bottom-color: var(--accent); }
.site-nav a:hover { color: var(--ink); }

/* --- shared section primitives ------------------------------------------ */

.section {
  padding: var(--section) 0;
  border-bottom: 1px solid var(--rule);
}
.section:last-of-type { border-bottom: none; }

.section-label {
  font-family: var(--mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.section-label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--rule-strong);
}

.section-title {
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  max-width: 18ch;
  margin-bottom: 56px;
}

/* --- hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  padding: clamp(72px, 12vw, 160px) 0 clamp(64px, 9vw, 128px);
  border-bottom: 1px solid var(--rule);
}

.hero-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  margin-bottom: clamp(32px, 6vw, 64px);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 48px;
  height: 1px;
  background: var(--ink);
}

.hero-title {
  font-family: var(--serif);
  font-weight: 300;
  /* Cap at 100px so the longer phrase "по входящему звонку." (20 chars)
     still fits one line inside .wrap (max 1240px content) at any viewport
     size. The previous 120px cap was wider than the headline could survive
     once we adopted block <span class="hero-title__line"> children, which
     forbid balancing across the two phrases. */
  font-size: clamp(44px, 7vw, 100px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0 0 36px;
  /* No parent-level max-width: each .hero-title__line is its own block, so
     letting the headline expand to the wrap's content-width (still ~1240px)
     means each phrase has exactly one line on every reasonable viewport.
     The narrower .hero-title--long override below still applies to legal
     pages whose long sentence-headlines need it. */
  max-width: none;
  /* CSS-4: distributes words across lines more evenly inside a single phrase
     if it ever DOES soft-wrap on ultra-narrow viewports. Older browsers
     ignore it without regression. */
  text-wrap: balance;
}

/* Long-headline modifier for legal pages whose titles are full sentences
   (e.g. "Политика обработки персональных данных"). Slightly smaller type,
   looser line-height and tracking, and a wider measure than the short
   editorial hero-title. */
.hero-title--long {
  font-size: clamp(32px, 5.6vw, 72px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 22ch;
}
.hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}
/* Per-phrase line — wraps each logical fragment of the headline into its own
   block-level row. Lets the editor decide where the break falls in HTML
   instead of trusting the browser to pick the right spot, while still
   allowing internal soft-wrap on devices too narrow for the phrase. */
.hero-title__line {
  display: block;
}
.hero-title .rule {
  display: inline-block;
  width: clamp(80px, 12vw, 180px);
  height: 1px;
  background: var(--ink);
  vertical-align: middle;
  margin: 0 0.25em 0.18em 0;
}

.hero-lede {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.35;
  color: var(--ink);
  max-width: 30ch;
  margin: 0 0 clamp(36px, 5vw, 56px);
  font-weight: 300;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
}

.hero-dot {
  position: absolute;
  top: clamp(80px, 11vw, 140px);
  right: var(--gutter);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 8px rgba(201, 89, 26, 0.10);
}

/* --- buttons / inline links --------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  border-radius: 1px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
  text-decoration: none;
}
.btn:hover { background: var(--ink); color: var(--paper); border-bottom-color: var(--ink); }

.btn--primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn--primary:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn--primary .arrow { transition: transform 160ms ease; }
.btn--primary:hover .arrow { transform: translateX(4px); }

.link-quiet {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
}
.link-quiet:hover { border-bottom-color: var(--accent); color: var(--ink); }

/* --- how-it-works (3-column flow) --------------------------------------- */

.flow-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.flow-step {
  padding: 0 clamp(20px, 2.5vw, 36px);
  border-left: 1px solid var(--rule);
}
.flow-step:first-child { padding-left: 0; border-left: none; }
.flow-step:last-child  { padding-right: 0; }

.flow-num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 18px;
}
.flow-title {
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.1;
  margin: 0 0 14px;
}
.flow-body {
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
}

/* --- use cases (2x2) ---------------------------------------------------- */

.use-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.use-card {
  padding: clamp(32px, 4vw, 48px) clamp(20px, 2.5vw, 36px);
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
.use-card:nth-child(2n) { border-right: none; }
.use-card:nth-last-child(-n+2) { border-bottom: none; }

.use-num {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 14px;
}
.use-title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.1;
  margin: 0 0 12px;
}
.use-body {
  color: var(--ink-muted);
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
}

/* --- specs strip -------------------------------------------------------- */

.specs-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: clamp(28px, 4vw, 48px) 0;
}
.spec {
  padding: 0 clamp(16px, 2vw, 28px);
  border-left: 1px solid var(--rule);
}
.spec:first-child { border-left: none; }

.spec-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 14px;
}
.spec-cap {
  font-family: var(--mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}

/* --- final cta ---------------------------------------------------------- */

.final-cta {
  text-align: center;
  padding: clamp(72px, 11vw, 140px) 0;
}
.final-cta__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 0 auto 40px;
  max-width: 16ch;
}

/* --- trial microcopy ----------------------------------------------------
   Promo line "Первый месяц после регистрации — бесплатно". Two variants:
   hero-trial sits left-aligned under the hero CTA cluster with an accent
   dot; final-cta__trial sits centered between the final headline and the
   button cluster. Both use the mono face + uppercase tracking so they
   read as a technical note, not a salesy banner. */

.hero-trial {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 20px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-trial::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.final-cta__trial {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  /* Negative top pulls the line closer to the headline (which has 40px
     bottom margin); the bottom value spaces it from the button cluster. */
  margin: -20px 0 clamp(20px, 3vw, 28px);
  text-align: center;
}

/* --- price table -------------------------------------------------------- */

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 16px;
  margin-top: 48px;
}
.price-table th, .price-table td {
  text-align: left;
  padding: 22px 16px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.price-table th {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 14px;
}
.price-table .plan-name {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.01em;
}
.price-table .plan-price {
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.price-table .plan-price small {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  display: block;
  margin-top: 4px;
}
.price-table tr:last-child td { border-bottom: 1px solid var(--ink); }

.price-intro {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.4;
  font-weight: 300;
  max-width: 48ch;
  color: var(--ink);
  margin: 0 0 8px;
}

/* --- faq ---------------------------------------------------------------- */

.faq {
  margin-top: clamp(64px, 8vw, 96px);
  border-top: 1px solid var(--rule);
}
.faq-item {
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--gutter);
}
.faq-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--accent);
  padding-top: 6px;
}
.faq-q {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.3;
  margin: 0 0 12px;
}
.faq-a {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.6;
  max-width: 56ch;
}

/* --- code / docs -------------------------------------------------------- */

.docs-lede {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.35;
  font-weight: 300;
  max-width: 32ch;
  margin: 0 0 56px;
}

.code-block {
  background: var(--paper-strong);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  padding: 28px 32px;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink);
  overflow-x: auto;
  margin: 32px 0;
  white-space: pre;
}
.code-block .c-key   { color: var(--accent); }
.code-block .c-mut   { color: var(--ink-muted); }
.code-block .c-com   { color: var(--ink-muted); font-style: italic; }

.callout {
  margin-top: clamp(56px, 8vw, 96px);
  padding: 24px 28px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.callout .callout-key {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --- not-found ---------------------------------------------------------- */

.not-found {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(64px, 10vw, 140px) 0;
}
.not-found-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(140px, 26vw, 360px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--accent);
  margin: 0 0 32px;
}
.not-found-msg {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.2;
  margin: 0 0 32px;
  max-width: 28ch;
}

/* --- footer ------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--ink);
  padding: 56px 0 36px;
  margin-top: 0;
  font-size: 14px;
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--gutter);
  padding-bottom: 48px;
  border-bottom: 1px solid var(--rule);
}
.footer-brand {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.footer-brand .wordmark-dot { color: var(--accent); }
.footer-tag {
  color: var(--ink-muted);
  max-width: 28ch;
  font-size: 14px;
  line-height: 1.5;
}
.footer-col h4 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin: 0 0 18px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: var(--ink); }
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 28px;
  font-family: var(--mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  gap: 16px;
  flex-wrap: wrap;
}

/* --- responsive --------------------------------------------------------- */

@media (max-width: 880px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .site-header__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .site-nav { flex-wrap: wrap; gap: 18px; }

  .hero-dot { top: 18px; right: var(--gutter); }
  .hero-title {
    /* Sized so each .hero-title__line fits the viewport without an internal
       soft wrap on common phone widths (≥360px): "по входящему звонку." is
       20 chars; at 32px serif (clamp picks 32 on 360px) it sits ~315px wide,
       inside the available content width after the 24px gutters. */
    font-size: clamp(28px, 8vw, 44px);
    /* 0.96 default is too tight when a Russian headline wraps to multiple
       lines on a phone — give the stacked lines breathing room. */
    line-height: 1.05;
    max-width: none;
  }
  /* Drop the decorative rule before the second .hero-title__line on phones;
     it costs ~80px we'd rather hand to the actual text. */
  .hero-title .rule { display: none; }
  .hero-title--long {
    font-size: clamp(28px, 8vw, 44px);
    line-height: 1.12;
  }

  .flow-3col { grid-template-columns: 1fr; }
  .flow-step {
    padding: 32px 0;
    border-left: none;
    border-top: 1px solid var(--rule);
  }
  .flow-step:first-child { border-top: 1px solid var(--ink); padding-top: 32px; }

  .use-grid { grid-template-columns: 1fr; }
  .use-card { border-right: none; }
  .use-card:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .use-card:last-child { border-bottom: none; }

  .specs-strip { grid-template-columns: 1fr 1fr; gap: 24px 0; }
  .spec { padding: 16px; border-left: none; }
  .spec:nth-child(odd) { border-right: 1px solid var(--rule); }
  .spec:nth-child(n+3) { border-top: 1px solid var(--rule); }

  .faq-item { grid-template-columns: 1fr; gap: 8px; }

  .price-table { font-size: 14px; }
  .price-table .plan-price { font-size: 20px; }
  .price-table th, .price-table td { padding: 16px 8px; }

  .site-footer__top { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
}

/* --- micro-interactions / page-load ------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .hero-eyebrow, .hero-title, .hero-lede, .hero-actions, .hero-trial, .hero-dot {
    animation: rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .hero-eyebrow { animation-delay: 0ms; }
  .hero-title   { animation-delay: 80ms; }
  .hero-lede    { animation-delay: 220ms; }
  .hero-actions { animation-delay: 320ms; }
  .hero-trial   { animation-delay: 400ms; }
  .hero-dot     { animation-delay: 480ms; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

/* --- cookie consent ----------------------------------------------------- */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--paper-strong);
  border-top: 1px solid var(--rule-strong);
  box-shadow: 0 -10px 40px rgba(20, 22, 28, 0.10);
}
.cookie-consent[hidden] { display: none; }

.cookie-consent__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  /* padding-block only — the shorthand `padding: 18px 0` previously wiped
     out the `.wrap` parent's horizontal gutter and stuck the text/button
     to the viewport edges on narrow screens. */
  padding-block: 18px;
  flex-wrap: wrap;
}

.cookie-consent__text {
  flex: 1 1 340px;
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
}
.cookie-consent__text a {
  color: var(--ink);
  border-bottom: 1px solid var(--rule-strong);
}
.cookie-consent__text a:hover { border-bottom-color: var(--accent); }

.cookie-consent__actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .cookie-consent__actions { width: 100%; }
  .cookie-consent__actions .btn { flex: 1; justify-content: center; }
}

/* --- legal / long-form document ----------------------------------------- */
.legal {
  max-width: 72ch;
}
.legal__meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin: 0 0 56px;
}
.legal h2 {
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15;
  margin: 56px 0 18px;
}
.legal h2:first-child { margin-top: 0; }
.legal h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  margin: 32px 0 12px;
}
.legal p,
.legal li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-muted);
}
.legal p { margin: 0 0 16px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--ink); border-bottom: 1px solid var(--rule-strong); }
.legal a:hover { border-bottom-color: var(--accent); }
.legal ul,
.legal ol {
  margin: 0 0 16px;
  padding-left: 1.4em;
}
.legal li { margin: 0 0 8px; }
.legal dl { margin: 0 0 16px; }
.legal dt { font-weight: 600; color: var(--ink); margin-top: 16px; }
.legal dd {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-muted);
}