/* Socialytics: one stylesheet for every page of socialytics.dev.
   World: calm product pages in the line of Quartr, Apple and OpenAI. White and fog
   grounds, one ink field, medium-weight Mona Sans, real product windows with soft
   depth. Yellow lives in the logo and the "live" marker only.
   Shared colour tokens (--bg, --text, ...) come from site__shared/sites/templates/
   _tokens.html; this file only defines --x-* tokens. */

:root {
  --x-paper: #ffffff;
  --x-fog: #f5f5f7;
  --x-fog-2: #ececef;
  --x-stage: #f1f1f4;
  --x-ink: #0c0c0e;
  --x-ink-2: #17171a;
  --x-ink-3: #26262a;
  --x-t1: #0f0f12;
  --x-t2: #4f4f57;
  --x-t3: #6c6c74;
  --x-t4: #9a9aa2;
  --x-line: #e8e8ec;
  --x-line-2: #d9d9df;
  --x-on-ink: #f5f5f7;
  --x-on-ink-2: rgba(245, 245, 247, 0.72);
  --x-on-ink-3: rgba(245, 245, 247, 0.5);
  --x-ink-line: rgba(255, 255, 255, 0.12);
  --x-hi: #ffd60a;
  --x-up: #1f68c6;
  --x-down: #c13b3b;
  --x-sans: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --x-code: "Red Hat Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --x-wrap: var(--page-width, 1200px);
  --x-gutter: var(--page-gutter, 2rem);
  --x-r: 16px;
  --x-r-lg: 22px;
  --x-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --x-shadow-sm: 0 1px 2px rgba(15, 15, 20, 0.05), 0 4px 14px -6px rgba(15, 15, 20, 0.08);
  --x-shadow: 0 1px 1px rgba(15, 15, 20, 0.04), 0 18px 44px -18px rgba(15, 15, 25, 0.24), 0 60px 110px -50px rgba(15, 15, 25, 0.22);
  --x-sect: clamp(5.5rem, 10vw, 9rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--x-paper); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--x-paper);
  color: var(--x-t1);
  font-family: var(--x-sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
::selection { background: #fff1a8; color: var(--x-t1); }
:focus-visible { outline: 2px solid var(--x-t1); outline-offset: 3px; border-radius: 6px; }
.x-ink :focus-visible, .x-foot :focus-visible { outline-color: var(--x-on-ink); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 580; text-wrap: balance; letter-spacing: -0.02em; }
code, pre, kbd, samp { font-family: var(--x-code); font-size: 0.86em; }
table { border-collapse: collapse; }
.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; }
.x-skip { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 0.6rem 1rem; background: var(--x-ink); color: var(--x-on-ink); border-radius: 0 0 8px 0; }
.x-skip:focus { left: 0; }
* { scrollbar-width: thin; scrollbar-color: var(--x-line-2) transparent; }
.x-ink * { scrollbar-color: rgba(255,255,255,0.2) transparent; }

/* ── Frame ─────────────────────────────────────────────────────────────── */
.x-wrap { width: 100%; max-width: var(--x-wrap); margin: 0 auto; padding-left: var(--x-gutter); padding-right: var(--x-gutter); }
.x-sect { padding: var(--x-sect) 0; }
.x-fog { background: var(--x-fog); }
.x-ink { background: var(--x-ink); color: var(--x-on-ink); }

.x-h2 { font-size: clamp(2rem, 3.8vw, 3.05rem); line-height: 1.06; letter-spacing: -0.032em; font-weight: 570; max-width: 20ch; }
.x-lead { margin-top: 1.1rem; font-size: clamp(1.0625rem, 1.4vw, 1.2rem); line-height: 1.5; color: var(--x-t2); max-width: 54ch; }
.x-ink .x-lead { color: var(--x-on-ink-2); }
.x-head { margin-bottom: clamp(2.75rem, 5vw, 4rem); }
.x-head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; }
.x-head--split .x-lead { margin-top: 0; }
.x-head--center { text-align: center; }
.x-head--center .x-h2, .x-head--center .x-lead { margin-left: auto; margin-right: auto; }
.x-note { font-size: 0.875rem; color: var(--x-t3); line-height: 1.5; }
.x-ink .x-note { color: var(--x-on-ink-3); }
.x-note a { color: var(--x-t1); }
.x-ink .x-note a { color: var(--x-on-ink); }

/* ── Buttons, pills ────────────────────────────────────────────────────── */
.x-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0 1.2rem;
  border-radius: 999px; border: 1px solid transparent;
  font: 540 0.95rem/1 var(--x-sans); letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s var(--x-ease);
}
.x-btn svg { width: 16px; height: 16px; flex: none; }
.x-btn:active { transform: translateY(1px); }
.x-btn--ink { background: var(--x-ink); color: var(--x-on-ink); box-shadow: 0 1px 2px rgba(0,0,0,0.18); }
.x-btn--ink:hover { background: #2a2a2f; }
.x-btn--line { background: var(--x-paper); color: var(--x-t1); border-color: var(--x-line-2); }
.x-btn--line:hover { border-color: var(--x-t3); }
.x-btn--paper, .x-btn--hi { background: var(--x-paper); color: var(--x-t1); }
.x-btn--paper:hover, .x-btn--hi:hover { background: #e9e9ec; }
.x-ink .x-btn--line { background: transparent; color: var(--x-on-ink); border-color: rgba(255,255,255,0.24); }
.x-ink .x-btn--line:hover { border-color: var(--x-on-ink); }
.x-btn .pi, .x-btn .ci { width: 16px !important; height: 16px !important; }
.x-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.x-link { font-weight: 540; text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; }
.x-link::after { content: ""; width: 0.5em; height: 0.5em; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 0.1em; transition: transform 0.2s var(--x-ease); }
.x-link:hover::after { transform: translateX(3px) rotate(45deg); }

.x-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.32rem 0.7rem; border-radius: 999px; font: 500 0.8125rem/1.2 var(--x-sans); background: var(--x-paper); color: var(--x-t2); border: 1px solid var(--x-line); }
.x-ink .x-pill { background: var(--x-ink-2); color: var(--x-on-ink-2); border-color: var(--x-ink-line); }
.x-pill--hi, .x-pill--strong { background: var(--x-paper); color: var(--x-t1); border-color: var(--x-t1); }
.x-pill .pi { width: 14px !important; height: 14px !important; }
.x-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.x-mono { font-family: var(--x-code); font-size: 0.8125rem; }
.x-live { display: inline-block; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--x-hi); box-shadow: 0 0 0 3px rgba(255, 214, 10, 0.25); flex: none; }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.x-hero { padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3rem, 5vw, 4.25rem); }
.x-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem 5rem; align-items: end; }
.x-hero h1 {
  font-family: var(--hero-font, var(--x-sans));
  font-size: clamp(2.7rem, 5.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.038em;
  font-weight: 560;
  max-width: 12ch;
}
.x-hero__side { display: grid; gap: 1.4rem; padding-bottom: 0.35rem; }
.x-hero__sub { font-size: 1.14rem; line-height: 1.52; color: var(--x-t2); max-width: 46ch; }
.x-hero__fine { font-size: 0.85rem; color: var(--x-t3); }

/* Hero v3: centred headline between two rivers of today's real social items. */
.x-hero--stream { padding: clamp(2.5rem, 5vw, 3.75rem) 0 clamp(2.5rem, 5vw, 3.75rem); overflow: hidden; }
.x-hero__center { text-align: center; display: grid; justify-items: center; gap: 1.35rem; padding-top: clamp(2.25rem, 5vw, 3.5rem); padding-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.x-hero--stream h1 { max-width: 15ch; margin: 0 auto; font-size: clamp(2.8rem, 6.2vw, 5.2rem); }
.x-hero--stream .x-hero__sub { max-width: 52ch; margin: 0 auto; }
.x-hero--stream .x-actions { justify-content: center; }
.x-stream { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.x-stream + .x-stream, .x-stream--rev { margin-top: 0.6rem; }
.x-stream__track { display: flex; gap: 0.55rem; width: max-content; padding: 0.2rem 0; }
.x-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem; border-radius: 999px; background: var(--x-paper); border: 1px solid var(--x-line); box-shadow: var(--x-shadow-sm); font-size: 0.86rem; color: var(--x-t2); white-space: nowrap; }
.x-chip .pi { width: 14px !important; height: 14px !important; }
@media (prefers-reduced-motion: no-preference) {
  .x-stream__track { animation: x-river 90s linear infinite; }
  .x-stream--rev .x-stream__track { animation-direction: reverse; animation-duration: 110s; }
  .x-hero--stream:hover .x-stream__track { animation-play-state: paused; }
}
@keyframes x-river { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Stage: the agent session window on a fog band ─────────────────────── */
.x-stage { background: var(--x-stage); padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4vw, 3.5rem); border-top: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line); }
.x-demo { max-width: 1040px; margin: 0 auto; }
.x-demo__tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.4rem; }
.x-demo__tabs button {
  border: 1px solid transparent; background: transparent; color: var(--x-t2); cursor: pointer;
  font: 520 0.9rem/1 var(--x-sans); padding: 0.62rem 1rem; border-radius: 999px;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.x-demo__tabs button:hover { color: var(--x-t1); background: rgba(255,255,255,0.6); }
.x-demo__tabs button[aria-selected="true"] { background: var(--x-paper); color: var(--x-t1); border-color: var(--x-line); box-shadow: var(--x-shadow-sm); }
.x-win { background: var(--x-paper); border: 1px solid rgba(15, 15, 20, 0.08); border-radius: var(--x-r-lg); box-shadow: var(--x-shadow); overflow: hidden; }
.x-win__bar { position: relative; display: flex; align-items: center; justify-content: center; height: 44px; border-bottom: 1px solid var(--x-line); background: #fbfbfc; }
.x-win__dots { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; gap: 7px; }
.x-win__dots i { width: 11px; height: 11px; border-radius: 50%; background: #dedee3; }
.x-win__title { display: inline-flex; align-items: center; gap: 0.5rem; font: 560 0.82rem/1 var(--x-sans); color: var(--x-t1); }
.x-win__title img { border-radius: 4px; }
.x-win__title span { color: var(--x-t3); font-weight: 450; }
.x-win__body { padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.1rem, 3.5vw, 2.75rem) clamp(1rem, 2vw, 1.5rem); display: grid; gap: 1rem; min-height: 520px; align-content: start; }
.x-win__body[hidden] { display: none; }
.x-msg--you { justify-self: end; max-width: 78%; background: var(--x-fog); border-radius: 18px 18px 6px 18px; padding: 0.8rem 1.1rem; font-size: 0.98rem; color: var(--x-t1); }
.x-msg--agent { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0.85rem; align-items: start; padding-top: 0.25rem; }
.x-msg__mark img { border-radius: 7px; width: 26px; height: 26px; }
.x-msg--agent p { font-size: 1.02rem; line-height: 1.62; color: var(--x-t2); max-width: 70ch; }
.x-msg--agent strong { color: var(--x-t1); font-weight: 600; }
.x-call { margin-left: calc(28px + 0.85rem); border: 1px solid var(--x-line); border-radius: 14px; overflow: hidden; background: var(--x-paper); }
.x-call__head { display: flex; align-items: center; gap: 0.6rem; padding: 0.62rem 0.85rem; background: #fafafb; border-bottom: 1px solid var(--x-line); font-size: 0.82rem; min-width: 0; }
.x-call__ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--x-ink); color: var(--x-on-ink); flex: none; }
.x-call__ico svg { width: 13px; height: 13px; }
.x-call__tool { font: 600 0.8rem/1 var(--x-code); color: var(--x-t1); }
.x-call__sum { color: var(--x-t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.x-call__ok { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; color: var(--x-t3); white-space: nowrap; flex: none; }
.x-call__ok svg { width: 14px; height: 14px; color: #1d8a4f; }
.x-call__body { padding: 0.85rem 1rem 0.95rem; }
.x-win__note { margin-top: 0.4rem; padding-top: 0.9rem; border-top: 1px solid var(--x-line); font-size: 0.78rem; color: var(--x-t3); }
.x-win__note a { color: var(--x-t2); }
@media (prefers-reduced-motion: no-preference) {
  .x-demo.is-playing [data-step] { opacity: 0; transform: translateY(8px); filter: blur(2px); }
  .x-demo.is-playing [data-step].is-in { opacity: 1; transform: none; filter: none; transition: opacity 0.55s var(--x-ease), transform 0.55s var(--x-ease), filter 0.55s var(--x-ease); }
}

/* Growth table inside a tool result. */
.x-gt { width: 100%; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.x-gt th, .x-gt td { padding: 0.42rem 0.6rem; text-align: right; border-bottom: 1px solid var(--x-line); }
.x-gt tr:last-child th, .x-gt tr:last-child td { border-bottom: 0; }
.x-gt thead th { font: 500 0.75rem/1 var(--x-sans); color: var(--x-t3); }
.x-gt tbody th { text-align: left; font-weight: 520; color: var(--x-t1); padding-left: 0; white-space: nowrap; }
.x-gt tbody th .pi { display: inline-flex !important; margin-right: 0.45rem; vertical-align: -3px; }
.x-gt td { font-weight: 580; }
.x-gt .is-up { color: var(--x-up); }
.x-gt .is-down { color: var(--x-down); }
.x-gt .is-na { color: var(--x-t4); font-weight: 450; }

/* A post, as get_context returns it. */
.x-pc { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0.8rem; }
.x-pc__src { width: 32px; height: 32px; border-radius: 9px; background: var(--x-fog); display: grid; place-items: center; }
.x-pc__title { font-weight: 600; font-size: 0.98rem; line-height: 1.35; letter-spacing: -0.005em; overflow-wrap: anywhere; }
.x-pc__title a { text-decoration: none; }
.x-pc__title a:hover { text-decoration: underline; }
.x-pc__by { margin-top: 0.15rem; font-size: 0.8125rem; color: var(--x-t3); }
.x-pc__eng { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin-top: 0.55rem; font-size: 0.8125rem; color: var(--x-t2); font-variant-numeric: tabular-nums; }
.x-pc__eng b { color: var(--x-t1); font-weight: 620; }
.x-pc__quote { margin: 0.75rem 0 0; padding: 0.7rem 0.85rem; background: var(--x-fog); border-radius: 10px; }
.x-pc__quote p { font-size: 0.88rem; color: var(--x-t1); line-height: 1.45; }
.x-pc__quote span { display: block; margin-top: 0.35rem; font-size: 0.75rem; color: var(--x-t3); }

/* A ranked board. */
.x-rl__head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 560; color: var(--x-t2); margin-bottom: 0.5rem; }
.x-rl ol, .x-mini ol { list-style: none; margin: 0; padding: 0; counter-reset: r; display: grid; gap: 0.35rem; }
.x-rl li, .x-mini li { counter-increment: r; display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); font-size: 0.92rem; line-height: 1.35; overflow-wrap: anywhere; }
.x-rl li::before, .x-mini li::before { content: counter(r); color: var(--x-t4); font: 500 0.8rem/1.6 var(--x-code); }
.x-rl li:first-child, .x-mini li:first-child { font-weight: 600; }

/* Daily bars (TikTok hashtag views). */
.x-bars { display: flex; align-items: flex-end; gap: 3px; height: 92px; }
.x-bars i { flex: 1; min-height: 3px; border-radius: 3px 3px 1px 1px; background: #c9c9d0; transition: background 0.15s; }
.x-bars i:hover { background: #8d8d95; }
.x-bars i.is-peak { background: var(--x-t1); }
.x-bars--tile { height: 132px; }
.x-bars__cap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.6rem; font-size: 0.78rem; color: var(--x-t3); }

/* Platform logo row under the window. */
.x-logos { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 2.2rem; }
.x-logos a { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0; text-decoration: none; color: var(--x-t2); font-weight: 540; font-size: 0.98rem; transition: color 0.18s; }
.x-logos a:hover { color: var(--x-t1); }
.x-logos__more { color: var(--x-t3) !important; }

/* ── Bento: the four kinds of social data ──────────────────────────────── */
.x-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.1rem; }
.x-tile { grid-column: span 6; display: grid; grid-template-rows: auto 1fr auto; gap: 1.5rem; padding: clamp(1.4rem, 2.6vw, 2rem); background: var(--x-fog); border-radius: var(--x-r-lg); min-width: 0; }
.x-tile--posts { grid-column: span 7; }
.x-tile--trending { grid-column: span 5; }
.x-tile--hashtags { grid-column: span 5; }
.x-tile--history { grid-column: span 7; }
.x-tile__head h3 { font-size: 1.35rem; letter-spacing: -0.022em; font-weight: 580; }
.x-tile__head p { margin-top: 0.45rem; color: var(--x-t2); font-size: 0.98rem; max-width: 46ch; }
.x-tile__tool { display: inline-block; margin-top: 0.85rem; font: 500 0.76rem/1 var(--x-code); color: var(--x-t3); padding: 0.32rem 0.55rem; border-radius: 7px; background: var(--x-paper); border: 1px solid var(--x-line); }
.x-tile__shot { align-self: end; background: var(--x-paper); border-radius: var(--x-r); padding: 1.1rem 1.2rem; box-shadow: var(--x-shadow-sm); min-width: 0; }
.x-tile__foot { margin-top: -0.25rem; }
.x-minis { display: grid; gap: 1rem; }
.x-posts { display: grid; gap: 1.1rem; }
.x-posts .x-pc + .x-pc { padding-top: 1.1rem; border-top: 1px solid var(--x-line); }
.x-mini + .x-mini { padding-top: 0.95rem; border-top: 1px solid var(--x-line); }
.x-mini__head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8125rem; font-weight: 560; color: var(--x-t2); margin-bottom: 0.45rem; }
.x-mini li { font-size: 0.88rem; }
.x-spark { display: grid; gap: 0.9rem; }
.x-spark__row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 64px; gap: 0.9rem; align-items: center; }
.x-spark__name { display: flex; align-items: center; gap: 0.45rem; font-size: 0.86rem; font-weight: 560; }
.x-spark svg { width: 100%; height: 56px; overflow: visible; }
.x-spark__line { fill: none; stroke: var(--x-t1); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.x-spark__area { fill: rgba(15, 15, 18, 0.06); }
.x-spark__band { fill: rgba(15, 15, 18, 0.05); }
.x-spark__g { text-align: right; font-weight: 620; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.x-spark__g small { display: block; font-size: 0.7rem; font-weight: 500; color: var(--x-t3); }
.x-spark__g.is-up { color: var(--x-up); }
.x-spark__g.is-down { color: var(--x-down); }

/* ── Layer diagram ─────────────────────────────────────────────────────── */
.x-layer { max-width: 1040px; margin: 0 auto; }
.x-layer__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; }
.x-node { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem; border-radius: 999px; background: var(--x-paper); border: 1px solid var(--x-line); font-size: 0.9rem; font-weight: 520; box-shadow: var(--x-shadow-sm); }
.x-node .pi, .x-node .ci { width: 16px !important; height: 16px !important; }
.x-node--ghost { background: transparent; border-style: dashed; box-shadow: none; color: var(--x-t3); }
.x-layer__wires { width: 100%; height: 64px; }
.x-layer__wires path { fill: none; stroke: var(--x-line-2); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  .x-layer__wires path { stroke-dasharray: 3 7; animation: x-flow 2.6s linear infinite; }
  .x-layer__wires--down path { animation-direction: reverse; }
}
@keyframes x-flow { to { stroke-dashoffset: -40; } }
.x-layer__core { margin: 0 auto; max-width: 760px; text-align: center; padding: 1.6rem 1.75rem 1.5rem; border-radius: var(--x-r-lg); background: var(--x-ink); color: var(--x-on-ink); box-shadow: var(--x-shadow); }
.x-layer__brand { display: inline-flex; align-items: center; gap: 0.65rem; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }
.x-layer__brand img { border-radius: 7px; box-shadow: 0 0 0 1px rgba(255,255,255,0.12); }
.x-layer__desc { margin-top: 0.5rem; color: var(--x-on-ink-2); font-size: 0.92rem; }
.x-layer__tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: 1.1rem; }
.x-layer__tools code { font: 500 0.78rem/1 var(--x-code); padding: 0.45rem 0.65rem; border-radius: 8px; background: var(--x-ink-3); color: var(--x-on-ink); }

/* ── Why ───────────────────────────────────────────────────────────────── */
.x-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; }
.x-why__item { padding-top: 1.25rem; border-top: 1px solid var(--x-t1); }
.x-why__item h3 { font-size: 1.12rem; letter-spacing: -0.015em; font-weight: 600; }
.x-why__item p { margin-top: 0.55rem; color: var(--x-t2); font-size: 0.96rem; }

/* ── Matrix (platforms page) and wall (home) ───────────────────────────── */
.x-matrix { width: 100%; font-size: 0.875rem; }
.x-matrix-wrap { overflow-x: auto; border-top: 1px solid var(--x-t1); }
.x-matrix th, .x-matrix td { padding: 0.8rem 1rem 0.8rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--x-line); }
.x-matrix thead th { position: sticky; top: 0; background: var(--x-paper); font-weight: 600; color: var(--x-t1); font-size: 0.8125rem; white-space: nowrap; }
.x-matrix thead th small { display: block; font: 500 0.7rem/1.3 var(--x-code); color: var(--x-t3); margin-top: 0.15rem; }
.x-matrix tbody th { font-weight: 560; white-space: nowrap; }
.x-matrix tbody th a { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; }
.x-matrix tbody th a:hover span { text-decoration: underline; }
.x-matrix .x-cat td { padding-top: 1.5rem; font: 600 0.75rem/1 var(--x-sans); color: var(--x-t3); border-bottom: 1px solid var(--x-line-2); }
.x-matrix td ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.x-matrix td li { color: var(--x-t2); }
.x-matrix td .x-none { color: #c6c6cc; }
.x-matrix .x-fq { color: var(--x-t3); font-size: 0.75rem; }

.x-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.x-wall li { min-width: 0; }
.x-wall a { display: grid; gap: 0.6rem; height: 100%; padding: 1rem 1.05rem 1.05rem; border: 1px solid var(--x-line); border-radius: 14px; text-decoration: none; background: var(--x-paper); transition: border-color 0.18s, box-shadow 0.18s; }
.x-wall a:hover { border-color: var(--x-line-2); box-shadow: var(--x-shadow-sm); }
.x-wall__name { display: flex; align-items: center; gap: 0.55rem; font-weight: 580; font-size: 0.98rem; }
.x-wall__caps { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.x-wall__caps span { display: none; font: 500 0.72rem/1 var(--x-sans); padding: 0.3rem 0.48rem; border-radius: 999px; }
.x-wall__caps span.is-on { display: inline-block; color: var(--x-t2); background: var(--x-fog); }

/* ── Connect (setup) ───────────────────────────────────────────────────── */
.x-agents { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem 5rem; align-items: start; }
.x-clients { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 2rem; border-top: 1px solid var(--x-line-2); }
.x-client { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 0.5rem 0.85rem 0; border-bottom: 1px solid var(--x-line); font-size: 0.92rem; font-weight: 520; text-decoration: none; }
.x-client:hover span { text-decoration: underline; }
.x-client .ci { width: 18px !important; height: 18px !important; }
.x-agent-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1.5rem; font-size: 0.9rem; }
.x-code { background: var(--x-ink); color: #ececef; border-radius: var(--x-r-lg); overflow: hidden; box-shadow: var(--x-shadow); }
.x-code__tabs { display: flex; gap: 0.2rem; padding: 0.55rem; border-bottom: 1px solid var(--x-ink-line); overflow-x: auto; }
.x-code__tabs button { flex: none; border: 0; background: transparent; color: var(--x-on-ink-3); font: 540 0.8125rem/1 var(--x-sans); padding: 0.55rem 0.8rem; border-radius: 8px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.x-code__tabs button:hover { color: var(--x-on-ink); }
.x-code__tabs button[aria-selected="true"] { background: var(--x-ink-3); color: var(--x-on-ink); }
.x-code__pane { position: relative; }
.x-code__pane[hidden] { display: none; }
.x-code pre { margin: 0; padding: 1.15rem 1.2rem 1.3rem; overflow-x: auto; font: 450 0.8125rem/1.65 var(--x-code); white-space: pre; }
.x-code__note { padding: 0 1.2rem 1.1rem; font-size: 0.8125rem; color: var(--x-on-ink-3); }
.x-code__note a { color: var(--x-on-ink); }
.x-copy { position: absolute; top: 0.7rem; right: 0.7rem; border: 1px solid var(--x-ink-line); background: var(--x-ink-2); color: var(--x-on-ink-2); font: 540 0.75rem/1 var(--x-sans); padding: 0.45rem 0.65rem; border-radius: 7px; cursor: pointer; }
.x-copy:hover { color: var(--x-on-ink); border-color: rgba(255,255,255,0.3); }
.x-code .c { color: #85858e; } .x-code .s { color: #c9d6ff; } .x-code .k { color: #f0c8ff; }

/* ── Pricing ───────────────────────────────────────────────────────────── */
.x-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.x-plan { padding: 1.5rem 1.4rem 1.6rem; border-radius: var(--x-r-lg); background: var(--x-paper); border: 1px solid var(--x-line); display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.2rem; }
.x-plan.is-featured { border-color: var(--x-t1); box-shadow: var(--x-shadow-sm); }
.x-plan__name { font-weight: 600; font-size: 1rem; }
.x-plan__price { font-size: 2.35rem; font-weight: 580; letter-spacing: -0.035em; line-height: 1.1; font-variant-numeric: tabular-nums; margin-top: 0.35rem; }
.x-plan__price small { font-size: 0.92rem; font-weight: 450; color: var(--x-t3); letter-spacing: 0; margin-left: 0.2rem; }
.x-plan ul { list-style: none; padding: 0; margin: 1rem 0 1.4rem; display: grid; gap: 0.45rem; font-size: 0.9rem; color: var(--x-t2); }
.x-plan li b { color: var(--x-t1); font-weight: 600; }
.x-plan .x-btn { justify-self: start; }
.x-packs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; margin-top: 1rem; padding: 1.15rem 1.4rem; background: var(--x-paper); border: 1px solid var(--x-line); border-radius: var(--x-r-lg); }
.x-packs strong { font-weight: 600; }
.x-packs__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.x-faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem 5rem; }
.x-faq__list { border-top: 1px solid var(--x-t1); }
.x-faq details { border-bottom: 1px solid var(--x-line); }
.x-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.2rem 0; font-weight: 560; font-size: 1.04rem; letter-spacing: -0.01em; }
.x-faq summary::-webkit-details-marker { display: none; }
.x-faq summary::after { content: ""; flex: none; width: 11px; height: 11px; margin-top: 0.35rem; border-right: 1.6px solid var(--x-t3); border-bottom: 1.6px solid var(--x-t3); transform: rotate(45deg); transition: transform 0.25s var(--x-ease); }
.x-faq details[open] summary::after { transform: rotate(225deg); margin-top: 0.6rem; }
.x-faq details p { padding: 0 0 1.35rem; color: var(--x-t2); max-width: 64ch; }

/* ── Close (ink) ───────────────────────────────────────────────────────── */
.x-close { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 4rem; align-items: end; }
.x-close h2 { font-size: clamp(2.3rem, 4.8vw, 3.8rem); line-height: 1.02; letter-spacing: -0.038em; font-weight: 560; max-width: 16ch; }

/* ── Inner pages ───────────────────────────────────────────────────────── */
.x-page { width: 100%; max-width: var(--x-wrap); margin: 0 auto; padding: 0 var(--x-gutter); }
.x-page .ph { padding-bottom: clamp(2rem, 4vw, 3rem); }
.x-page .ph-sub { max-width: 62ch; }
.x-page .ph-actions .x-btn { min-height: 42px; }
.x-block { padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: 1px solid var(--x-line); }
.x-block:first-of-type { border-top: 0; }
.x-page .ph + .x-block, .x-page .ph + section { padding-top: 0.5rem; }
.x-block > h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.1; font-weight: 570; margin-bottom: 1.25rem; }
.x-prose p + p { margin-top: 1rem; }
.x-prose p { color: var(--x-t2); max-width: 66ch; font-size: 1.0625rem; }
.x-crumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 1.75rem; font-size: 0.8125rem; color: var(--x-t3); }
.x-crumbs a { color: var(--x-t2); text-decoration: none; }
.x-crumbs a:hover { color: var(--x-t1); text-decoration: underline; }
.x-crumbs span[aria-hidden] { color: var(--x-line-2); }
.x-crumbs + .ph { padding-top: 1.5rem; }

.x-dtype { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.5rem 3.5rem; align-items: start; padding: 2rem 0; border-top: 1px solid var(--x-line); }
.x-dtype:first-of-type { border-top: 1px solid var(--x-t1); }
.x-dtype h3 { font-size: 1.35rem; letter-spacing: -0.022em; line-height: 1.2; font-weight: 580; }
.x-dtype__returns { margin-top: 0.55rem; color: var(--x-t2); }
.x-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 1.25rem; margin: 1.1rem 0 0; font-size: 0.875rem; }
.x-facts dt { color: var(--x-t3); }
.x-facts dd { margin: 0; color: var(--x-t1); }
.x-facts code { font-size: 0.8rem; background: var(--x-fog); padding: 0.1rem 0.35rem; border-radius: 5px; }
.x-today { margin-top: 1.25rem; padding: 1rem 1.1rem; background: var(--x-fog); border-radius: 12px; }
.x-today__head { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8125rem; color: var(--x-t3); margin-bottom: 0.6rem; }
.x-today__head strong { color: var(--x-t1); font-weight: 600; }
.x-today ol { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.3rem; font-size: 0.9rem; }
.x-today li::marker { font-family: var(--x-code); color: var(--x-t3); font-size: 0.8rem; }
.x-related { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.x-related a { display: grid; gap: 0.35rem; padding: 1.1rem 1.15rem 1.2rem; border: 1px solid var(--x-line); border-radius: 14px; text-decoration: none; transition: border-color 0.18s, box-shadow 0.18s; }
.x-related a:hover { border-color: var(--x-line-2); box-shadow: var(--x-shadow-sm); }
.x-related a strong { display: flex; align-items: center; gap: 0.5rem; font-weight: 580; }
.x-related a span { font-size: 0.875rem; color: var(--x-t2); }

.x-cases-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.x-cases-nav a { text-decoration: none; }
.x-cases-nav a:hover { border-color: var(--x-line-2); color: var(--x-t1); }
.x-case { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 1.5rem 4rem; padding: clamp(2.5rem, 5vw, 3.5rem) 0; border-top: 1px solid var(--x-line); scroll-margin-top: 80px; }
.x-case:first-of-type { border-top: 1px solid var(--x-t1); }
.x-case__who { margin-top: 0.6rem; font-size: 0.875rem; color: var(--x-t3); }
.x-case h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); letter-spacing: -0.03em; line-height: 1.08; font-weight: 570; }
.x-case__q { margin-top: 1rem; font-size: 1.1rem; color: var(--x-t2); max-width: 44ch; }
.x-case__result { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--x-line); font-size: 0.95rem; color: var(--x-t1); max-width: 48ch; }
.x-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; counter-reset: step; }
.x-step { counter-increment: step; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.75rem; }
.x-step::before { content: counter(step); width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--x-ink); color: var(--x-on-ink); font: 600 0.8rem/1 var(--x-code); }
.x-step__why { font-size: 0.95rem; color: var(--x-t2); padding-top: 0.25rem; }
.x-step__why b { color: var(--x-t1); font: 600 0.86rem/1 var(--x-code); margin-right: 0.35rem; }
.x-step pre { margin: 0.55rem 0 0; padding: 0.85rem 1rem; background: var(--x-fog); border-radius: 10px; overflow-x: auto; font: 450 0.78rem/1.6 var(--x-code); color: var(--x-t1); }

.x-vs-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.x-vs-sum > div { padding: 1.5rem 1.6rem 1.6rem; border-radius: var(--x-r-lg); background: var(--x-fog); }
.x-vs-sum h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; }
.x-vs-sum p { color: var(--x-t2); }
.x-vs { width: 100%; font-size: 0.95rem; }
.x-vs th, .x-vs td { text-align: left; vertical-align: top; padding: 1rem 1.25rem 1rem 0; border-bottom: 1px solid var(--x-line); }
.x-vs thead th { font-size: 0.8125rem; color: var(--x-t3); font-weight: 600; border-bottom: 1px solid var(--x-t1); }
.x-vs tbody th { font-weight: 560; width: 20%; }
.x-vs td { color: var(--x-t2); width: 40%; }
.x-vs td.x-us { color: var(--x-t1); }
.x-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.x-pick { padding: 1.6rem 1.75rem; border-radius: var(--x-r-lg); background: var(--x-fog); }
.x-pick--us { background: var(--x-ink); color: var(--x-on-ink); }
.x-pick h3 { font-size: 1.2rem; letter-spacing: -0.02em; }
.x-pick ul { margin: 1rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; color: var(--x-t2); }
.x-pick--us ul { color: var(--x-on-ink-2); }
.x-pick li::marker { color: var(--x-t3); }
.x-pick--us li::marker { color: var(--x-on-ink-3); }

.x-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
.x-point { padding-top: 1.2rem; border-top: 1px solid var(--x-t1); }
.x-point h3 { font-size: 1.12rem; letter-spacing: -0.015em; font-weight: 600; }
.x-point p { margin-top: 0.45rem; color: var(--x-t2); }
.x-prompts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.x-prompts li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.95rem 1.1rem; background: var(--x-fog); border-radius: 12px; font-size: 0.98rem; }
.x-prompts button { flex: none; border: 1px solid var(--x-line-2); background: var(--x-paper); border-radius: 999px; padding: 0.4rem 0.75rem; font: 540 0.78rem/1 var(--x-sans); cursor: pointer; color: var(--x-t1); }
.x-prompts button:hover { border-color: var(--x-t3); }

.x-band { margin: clamp(3rem, 6vw, 5rem) 0 0; padding: clamp(2rem, 4vw, 3rem); border-radius: var(--x-r-lg); background: var(--x-ink); color: var(--x-on-ink); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; }
.x-band h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.08; font-weight: 570; max-width: 22ch; }
.x-band p { margin-top: 0.6rem; color: var(--x-on-ink-2); max-width: 52ch; }

/* Signup box (shared tmcpAuth flow), kept for pages that embed it. */
.x-keybox { width: 100%; max-width: 480px; }
.x-keyform { display: flex; gap: 0.4rem; padding: 0.35rem; background: var(--x-paper); border: 1px solid var(--x-line-2); border-radius: 999px; }
.x-keyform input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 0.6rem 0 1rem; font: 450 1rem/1 var(--x-sans); color: var(--x-t1); }
.x-keybox__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.85rem; font-size: 0.8125rem; color: var(--x-t3); }
.x-keybox__meta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; display: inline; vertical-align: -2px; }
.x-keybox__err { margin-top: 0.6rem; font-size: 0.875rem; color: #b42318; }
.x-keybox__legal { margin-top: 0.4rem; font-size: 0.75rem; color: var(--x-t3); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.x-foot { background: var(--x-ink); color: var(--x-on-ink-2); padding: clamp(3.5rem, 7vw, 5rem) 0 2.5rem; font-size: 0.9rem; border-top: 1px solid var(--x-ink-line); }
.x-foot__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.x-foot__brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--x-on-ink); font-weight: 600; font-size: 1.05rem; text-decoration: none; }
.x-foot__brand img { width: 26px; height: 26px; border-radius: 7px; }
.x-foot__about { margin-top: 1rem; max-width: 34ch; color: var(--x-on-ink-3); }
.x-foot h2 { font: 600 0.8rem/1 var(--x-sans); color: var(--x-on-ink); margin-bottom: 1rem; letter-spacing: 0; }
.x-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.x-foot a { color: var(--x-on-ink-2); text-decoration: none; }
.x-foot a:hover { color: var(--x-on-ink); }
.x-foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--x-ink-line); color: var(--x-on-ink-3); font-size: 0.8125rem; }

.x-404 { padding-bottom: 5rem; }
.x-404__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.x-404__grid a { display: flex; align-items: center; gap: 0.55rem; padding: 0.9rem 1rem; border: 1px solid var(--x-line); border-radius: 12px; text-decoration: none; font-weight: 540; }
.x-404__grid a:hover { border-color: var(--x-line-2); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .x-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x-foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .x-foot__lead { grid-column: 1 / -1; }
  .x-related, .x-404__grid, .x-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .x-hero__grid, .x-head--split, .x-agents, .x-faq, .x-close, .x-dtype, .x-case, .x-band { grid-template-columns: minmax(0, 1fr); }
  .x-tile, .x-tile--posts, .x-tile--trending, .x-tile--hashtags, .x-tile--history { grid-column: 1 / -1; }
  .x-picks, .x-vs-sum { grid-template-columns: minmax(0, 1fr); }
  .x-related, .x-404__grid, .x-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x-call { margin-left: 0; }
  .x-msg--you { max-width: 92%; }
}
@media (max-width: 640px) {
  :root { --x-sect: 4.5rem; }
  body { font-size: 1rem; }
  .x-hero h1 { font-size: clamp(2.4rem, 11vw, 3.1rem); }
  .x-stage .x-wrap { padding-left: 0.75rem; padding-right: 0.75rem; }
  .x-demo__tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding: 0 0.25rem 0.25rem; }
  .x-demo__tabs button { flex: none; }
  .x-win { border-radius: 16px; }
  .x-win__body { min-height: 0; }
  .x-win__title span { display: none; }
  .x-call__sum { display: none; }
  .x-gt th, .x-gt td { padding: 0.4rem 0.35rem; }
  .x-logos { gap: 0.25rem 1.25rem; justify-content: flex-start; padding: 0 0.5rem; }
  .x-spark__row { grid-template-columns: minmax(0, 1fr) 56px; }
  .x-spark__name { grid-column: 1 / -1; }
  .x-why, .x-plans, .x-points { grid-template-columns: minmax(0, 1fr); }
  .x-clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x-related, .x-404__grid, .x-wall { grid-template-columns: minmax(0, 1fr); }
  .x-layer__wires { height: 40px; }
  .x-node { font-size: 0.82rem; padding: 0.45rem 0.7rem; }
  .x-vs thead { display: none; }
  .x-vs tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--x-line); padding: 0.75rem 0; }
  .x-vs tbody th { grid-column: 1 / -1; width: auto; border: 0; padding: 0 0 0.4rem; }
  .x-vs td { width: auto; border: 0; padding: 0 0.75rem 0 0; font-size: 0.875rem; }
  .x-vs td::before { content: attr(data-label); display: block; font: 600 0.72rem/1.4 var(--x-sans); color: var(--x-t3); margin-bottom: 0.2rem; }
  .x-prompts li { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}