/* Operator Co — Noche site v1 · multi-page, rebranded, site-wide bg
 * Colors/type all come from tokens.css. Reused FLUX images live in assets/.
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased; position: relative; min-height: 100vh;
}

/* site-wide background — fixed layer behind everything */
.site-bg { position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none;
  background:
    radial-gradient(46% 38% at 84% 2%, rgba(47,111,237,.16), transparent 70%),
    radial-gradient(40% 36% at 6% 12%, rgba(255,122,26,.12), transparent 72%),
    radial-gradient(60% 50% at 50% 108%, rgba(108,92,231,.10), transparent 70%),
    var(--color-paper);
}
/* crisp code-composed blueprint grid — no AI texture, no slop */
.site-bg::after { content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(176,196,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(176,196,255,.035) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,122,26,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,122,26,.05) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 320px 320px, 320px 320px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 45%, transparent 92%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 45%, transparent 92%); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.05;
  letter-spacing: -.025em; margin: 0; overflow-wrap: anywhere; }
h1 { font-weight: 700; letter-spacing: var(--tracking-display); }
h2 { letter-spacing: var(--tracking-h1); }
h3 { letter-spacing: var(--tracking-h2); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem,4vw,2rem); }
.mono { font-family: var(--font-mono); }
.eyebrow { font-family: var(--font-mono); font-size: var(--text-mono-eyebrow); letter-spacing: .16em;
  text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-md); }
.section { padding-block: var(--space-3xl); position: relative; }
.section--tight { padding-block: var(--space-2xl); }
.section__title { font-size: var(--text-h1); }
.section__lead { color: var(--color-ink-muted); max-width: 62ch; margin-top: var(--space-sm); }

/* buttons */
.btn { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base);
  padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-pill);
  border: var(--rule-hair) solid transparent; cursor: pointer; white-space: nowrap;
  max-width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  transition: transform var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.btn--primary { background: var(--color-accent); color: var(--color-operator-black); }
.btn--primary:hover { background: var(--color-accent-hover); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-hairline); }
.btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* NAV — new wordmark (code-composed, not AI-slop) */
.nav { position: fixed; inset-block-start: var(--space-md); inset-inline: 0; z-index: var(--z-nav);
  display: flex; justify-content: center; pointer-events: none; }
.nav__pill { pointer-events: auto; display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
  background: rgba(14,17,23,.72); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: var(--rule-hair) solid var(--color-hairline); border-radius: var(--radius-pill); max-width: calc(100% - 1.5rem); }
.nav__brand { display: inline-flex; align-items: baseline; gap: .15em; font-weight: 700; letter-spacing: -.02em; }
.nav__slash { color: var(--color-accent); font-family: var(--font-mono); }
.nav__mark { display: inline-block; width: .42em; height: 1.05em; background: var(--color-accent); border-radius: 1px; transform: translateY(.14em); }
.nav__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.nav__name b { font-weight: 700; }
.nav__links { display: flex; gap: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-muted); }
.nav__links a { transition: color var(--dur-short) var(--ease-out); cursor: pointer; }
.nav__links a:hover, .nav__links a.on { color: var(--color-accent); }
.nav__cta { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--color-operator-black);
  background: var(--color-accent); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); white-space: nowrap; }
.nav__cta:hover { background: var(--color-accent-hover); }
.mob { display: none; background: none; border: none; color: var(--color-ink); font-size: 1.4rem; cursor: pointer;
  padding: 10px; min-width: 44px; min-height: 44px; place-items: center; }
.mob svg { display: block; }
/* language switcher — sits in nav between CTA and mobile toggle */
.nav__lang { display: flex; align-items: center; margin-left: auto; position: relative; }
.lang { position: relative; display: flex; align-items: center; }

  /* noscript fallback — visible only when JS is disabled */
  .lang__noscript {
    display: none;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-ink);
    background: rgba(255,255,255,.04);
    border: var(--rule-hair) solid var(--color-hairline);
    border-radius: var(--radius-pill);
    padding: .2rem .5rem;
    cursor: pointer;
    margin-left: .5rem;
  }
  noscript .lang__noscript { display: inline-block; }
  noscript .lang__toggle { display: none; }

/* toggle = closed pill (dark glass, mono code, accent on hover/open) */
.lang__toggle { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink);
  background: rgba(255,255,255,.04); border: var(--rule-hair) solid var(--color-hairline);
  border-radius: var(--radius-pill); padding: .28rem .55rem; white-space: nowrap;
  transition: border-color var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out); }
.lang__toggle:hover, .lang.is-open .lang__toggle { border-color: var(--color-accent); }
.lang__code { font-weight: 700; letter-spacing: .04em; }
.lang__chev { font-size: .7em; color: var(--color-ink-muted); transition: transform var(--dur-short) var(--ease-out); }
.lang.is-open .lang__chev { transform: rotate(180deg); }
.lang__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* dropdown panel — fully branded dark menu (no native white popup) */
.lang__menu { position: absolute; top: calc(100% + .5rem); right: 0; z-index: var(--z-nav);
  list-style: none; margin: 0; padding: .35rem; min-width: 11.5rem;
  background: rgba(20,25,37,.96); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: var(--rule-hair) solid var(--color-hairline); border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,.45); display: none; flex-direction: column; gap: .15rem; }
.lang.is-open .lang__menu { display: flex; }
.lang__opt { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .45rem .6rem; border-radius: var(--radius-sm); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink);
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.lang__opt .lang__name { font-family: var(--font-body); color: var(--color-ink-muted); font-size: var(--text-sm); }
.lang__opt:hover { background: rgba(255,255,255,.06); color: var(--color-accent); }
.lang__opt:hover .lang__name { color: var(--color-accent); }
.lang__opt[aria-selected="true"] { background: rgba(255,122,26,.14); color: var(--color-accent); }
.lang__opt[aria-selected="true"] .lang__name { color: var(--color-accent); }
.lang__opt[aria-selected="true"]::after { content: "✓"; font-size: .85em; color: var(--color-accent); }
@media (max-width: 880px) {
  .nav__lang { margin-left: 0; order: 3; }
  .nav__cta { order: 2; }
  .mob { order: 4; }
}
/* Mobile nav: keep the language switcher + toggle on-screen even when the CTA
   label grows in other locales (e.g. "Starte einen Build"). The pill shrinks,
   the CTA is allowed to wrap, and the switcher never gets pushed out. */
@media (max-width: 768px) {
  .nav__pill { flex-wrap: wrap; gap: var(--space-xs) var(--space-md); justify-content: flex-start; }
  .nav__brand { flex: 0 0 auto; }
  .nav__cta { white-space: normal; text-align: center; line-height: 1.1; flex: 1 1 auto; min-width: 0; }
  .nav__lang { order: 2; flex: 0 0 auto; }
  .mob { order: 3; flex: 0 0 auto; }
}
@media (max-width: 420px) {
  .nav__cta { flex-basis: 100%; order: 4; }
  .nav__lang { margin-left: auto; order: 2; }
  .mob { order: 3; }
}

/* HERO — type-led, solid bg + soft glow, NO photographic layer */
.hero { position: relative; overflow: hidden; min-height: 0; padding-block: var(--space-2xl); display: flex; align-items: center;
  background: transparent; }
.hero::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    var(--hero-glow-secondary),
    var(--hero-glow),
    linear-gradient(180deg, transparent 0%, rgba(14,17,23,.35) 70%, rgba(14,17,23,.6) 100%); }
.hero__bg { display: none; } /* photo layer retired — keep selector for backward compat */
.hero__inner { position: relative; z-index: 1; padding-block: calc(var(--space-4xl) + 2rem) var(--space-3xl);
  display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-2xl); align-items: center; }
.hero h1 { font-size: var(--text-display); max-width: 18ch; margin-bottom: var(--space-md); font-weight: 700; }
.hero h1 .ac { color: var(--color-ink); /* inline highlight retired — accent reserved for CTA + eyebrow */ }
.hero__lede { font-size: var(--text-lg); font-family: var(--font-body); line-height: 1.55;
  color: var(--color-ink-muted); max-width: 50ch; margin-bottom: var(--space-lg); }
.hero__welcome { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: .04em; color: var(--color-ink); max-width: 60ch; margin-bottom: var(--space-lg);
  border-left: 2px solid var(--color-accent); padding-left: var(--space-md); }
/* keep .hero__welcome selector alive for backwards-i18n; trim via CSS, not markup */
.hero__welcome { font-family: var(--font-body); border-left-color: transparent; padding-left: 0;
  font-size: var(--text-lg); max-width: 50ch; line-height: 1.55; }
.hero__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: center; }
.hero__trust { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-muted);
  letter-spacing: .04em; margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero__trust span { padding-inline: .35rem; }
.hero__trust span:not(:last-child)::after { content: "·"; color: var(--color-ink-muted); opacity: .5; margin-left: var(--space-sm); }
/* legacy pill-row kept for backwards compat (other pages may use it) but visually retires */
.badges { display: none; }
/* HERO DEMO — terminal artifact on the right column (Linear/Cursor/Vercel move) */
.hero__demo { background: var(--demo-bg); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg);
  padding: var(--space-md); font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6;
  color: var(--color-ink); box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.02);
  max-width: 460px; width: 100%; justify-self: end; position: relative; overflow: hidden; }
.hero__demo::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,122,26,.06), transparent 60%); }
.hero__demo-head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-sm); padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--demo-line); }
.hero__demo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-paper-3); }
.hero__demo-dot:nth-child(1) { background: #FF5F57; }
.hero__demo-dot:nth-child(2) { background: #FEBC2E; }
.hero__demo-dot:nth-child(3) { background: #28C840; }
.hero__demo-title { margin-left: var(--space-sm); font-size: .75rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-ink-muted); }
.hero__demo-body { white-space: pre-wrap; word-break: break-word; }
.hero__demo-prompt { color: var(--color-accent); }
.hero__demo-out { color: var(--color-ink-muted); display: block; margin: 2px 0 8px; }
.hero__demo-out strong { color: var(--color-ink); font-weight: 700; }
.hero__demo-cursor { display: inline-block; width: 7px; height: 14px; background: var(--color-accent);
  vertical-align: -2px; animation: cursor-blink 1.1s steps(2,start) infinite; }
@keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero__demo-cursor { animation: none; opacity: .7; }
}
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__demo { justify-self: stretch; max-width: none; }
}
@media (max-width: 768px) {
  .hero h1 { font-size: var(--text-display-s); }
  .hero__inner { padding-block: var(--space-3xl) var(--space-2xl); }
}
.hero-scroll { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--color-ink-muted); z-index: 1; }
.hero-scroll-line { width: 1px; height: 30px; background: linear-gradient(to bottom, var(--color-accent), transparent); }

/* PROOF BAR — data-viz treatment: hairline dividers + mono numbers */
.proof-bar { background: rgba(20,25,37,.6); border-block: var(--rule-hair) solid var(--color-hairline); padding-block: var(--space-xl); }
.proof-inner { display: flex; gap: 0; flex-wrap: wrap; align-items: stretch; justify-content: center;
  max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem,4vw,2rem); }
.proof-item { text-align: center; min-width: 140px; flex: 1 1 140px;
  padding: var(--space-md) var(--space-lg); position: relative; }
.proof-item + .proof-item::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 1px; background: var(--color-hairline); }
.proof-item__n { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-2xl); color: var(--color-ink);
  line-height: 1; letter-spacing: -.01em; }
.proof-item__l { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-ink-muted); margin-top: var(--space-sm); }

/* NEWS / BLOG STRIP */
.news-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: var(--space-lg); }
.news-card { display: block; position: relative; border-radius: var(--radius-lg); overflow: hidden; border: var(--rule-hair) solid var(--color-hairline);
  background: var(--color-paper-2); transition: border-color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), background var(--dur-mid) var(--ease-out); }
.news-card:hover { border-color: rgba(255,122,26,.45); transform: translateY(-4px); box-shadow: 0 18px 50px rgba(0,0,0,.45); background: var(--color-paper-3); }
.news-card__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--color-paper-3); }
.news-card__body { padding: var(--space-md); }
.news-card__tag { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent); }
.news-card__title { font-family: var(--font-display); font-size: var(--text-h3); margin: var(--space-2xs) 0 var(--space-xs); }
.news-card__excerpt { color: var(--color-ink-muted); font-size: var(--text-sm); }
.news-card__more { display: inline-block; margin-top: var(--space-sm); font-family: var(--font-mono); font-size: .8rem; color: var(--color-accent); }

/* Featured news (full-width, same treatment as homepage news-strip) */
.featured-news { margin-top: var(--space-2xl); }
.news-feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-lg); align-items: stretch;
  position: relative; border-radius: var(--radius-lg); overflow: hidden; border: var(--rule-hair) solid var(--color-hairline);
  background: var(--color-paper-2); transition: border-color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out); }
.news-feature:hover { border-color: var(--color-accent); transform: translateY(-4px); box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.news-feature__img { width: 100%; height: 100%; object-fit: cover; background: var(--color-paper-3); min-height: 320px; }
.news-feature__body { padding: var(--space-xl); display: flex; flex-direction: column; justify-content: center; gap: var(--space-xs); }
.news-feature__tag { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent); }
.news-feature__title { font-family: var(--font-display); font-size: var(--text-h2); margin: 0; }
.news-feature__excerpt { color: var(--color-ink-muted); font-size: var(--text-base); max-width: 46ch; }
.news-feature__more { display: inline-block; margin-top: var(--space-sm); font-family: var(--font-mono); font-size: .8rem; color: var(--color-accent); }
@media (max-width: 760px) {
  .news-feature { grid-template-columns: 1fr; }
  .news-feature__img { min-height: 0; aspect-ratio: 16/9; }
}

/* section heading block */
.sec-head { margin-bottom: var(--space-2xl); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-md); }
.link-more { display: inline-block; padding-block: 4px; }
.sec-head .link-more { font-family: var(--font-mono); font-size: .82rem; color: var(--color-accent); white-space: nowrap; }
.sec-head .link-more--spaced { margin-left: var(--space-lg); }

/* product grid (shared) — centered cards */
.grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-lg); }
.grid--3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-lg);
  text-align: left; align-items: stretch; }
.grid--3 .card { max-width: none; align-items: flex-start; text-align: left; }
.card { background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-hairline); border-radius: var(--radius-lg);
  padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); align-items: center; text-align: center; width: 100%; max-width: 340px;
  transition: background var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out),
    transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out); }
.card:hover { border-color: rgba(255,122,26,.45); background: var(--color-paper-3);
  transform: translateY(-3px); box-shadow: 0 14px 38px rgba(0,0,0,.35); }
.card__cover-wrap { position: relative; width: 100%; }
.card__cover { width: 100%; border-radius: var(--radius-sm); aspect-ratio: 4/5; object-fit: cover; background: var(--color-paper-3);
  filter: brightness(1.06) contrast(1.02); }
.card__badge { position: absolute; top: 10px; right: 10px;
  background: var(--color-accent); color: var(--color-operator-black); font-family: var(--font-mono); font-size: .75rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-pill); z-index: 2; }
.card__title { font-family: var(--font-display); font-size: var(--text-h3); }
.card__meta { font-size: var(--text-sm); color: var(--color-ink-muted); min-height: 2.6em; }
.card__row { display: flex; align-items: center; justify-content: center; gap: var(--space-md); margin-top: auto; }
.price { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--color-accent); }
.chip { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-accent); border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius-pill); padding: 2px var(--space-sm); }
.card__cta { margin-top: var(--space-xs); width: 100%; }
.card__cta a { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); width: 100%;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--color-operator-black);
  background: var(--color-accent); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill);
  transition: background var(--dur-short) var(--ease-out); }
.card__cta a:hover { background: var(--color-accent-hover); }

/* featured card - free/lead-magnet product shown as a horizontal banner within
   the same card grid, same brand language (bg/border/radius/hover), different geometry. */
.card--featured { flex-direction: row; align-items: center; text-align: left; width: 100%; max-width: none;
  gap: var(--space-lg); padding: var(--space-lg);
  background: linear-gradient(135deg, rgba(255,122,26,.08), rgba(255,122,26,.02)), var(--color-paper-2);
  border-color: rgba(255,122,26,.22); }
.card--featured:hover { border-color: rgba(255,122,26,.35); }
.card--featured .card__cover-wrap { width: 200px; flex-shrink: 0; }
.card--featured .card__body { display: flex; flex-direction: column; gap: var(--space-sm); align-items: center;
  justify-content: center; text-align: center; flex: 1; min-width: 0; min-height: 100%; }
.card--featured .card__title { font-size: var(--text-h2); }
.card--featured .card__meta { min-height: 0; }
.card--featured .card__row { justify-content: center; margin-top: var(--space-xs); }
.card--featured .card__desc { font-size: var(--text-sm); color: var(--color-ink-muted); line-height: 1.5; margin: 0; max-width: 60ch; }
.card--featured .card__cta { width: auto; margin-top: 0; }
.card--featured .card__cta a { width: auto; padding-left: var(--space-xl); padding-right: var(--space-xl); }
.card__cta-row { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-top: var(--space-xs); }
.gumroad-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 50%; background: var(--color-accent); color: var(--color-operator-black);
  border: 2px solid var(--color-operator-black);
  transition: background var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.gumroad-btn:hover { background: var(--color-accent-hover); transform: translateY(-2px); }
.gumroad-btn__g { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1;
  transform: translateY(-1px); }

/* newsletter */
.newsletter { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-2xl); align-items: center;
  background: rgba(20,25,37,.6); border: var(--rule-hair) solid var(--color-hairline); border-radius: var(--radius-lg); padding: var(--space-2xl); }
.newsletter__copy h2 { font-size: var(--text-h1); }
.newsletter__copy p { color: var(--color-ink-muted); margin-top: var(--space-sm); }
.newsletter__form { display: flex; flex-direction: column; gap: var(--space-sm); }
.newsletter__form input { background: var(--color-paper); border: var(--rule-hair) solid var(--color-hairline);
  border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); }
.newsletter__form input:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.newsletter__note { font-size: var(--text-sm); color: var(--color-ink-muted); min-height: 1.2em; }

/* services */
.svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: var(--space-lg); }
.svc__item { background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-hairline); border-radius: var(--radius-lg);
  padding: var(--space-lg); }
.svc__n { font-family: var(--font-mono); color: var(--color-accent); font-size: var(--text-sm); }
.svc__item h2, .svc__item h3 { font-size: var(--text-h3); margin: var(--space-xs) 0; }
.svc__item p { color: var(--color-ink-muted); font-size: var(--text-sm); }
.svc__price { font-family: var(--font-display); font-weight: 700; margin-top: var(--space-sm); color: var(--color-ink); }
.svc__media { margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) var(--space-md); border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; aspect-ratio: 16 / 10; background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-hairline); }
.svc__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.svc__item:hover .svc__img { transform: scale(1.04); }

/* why-local proof */
.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--space-lg); margin-top: var(--space-xl); }
.proof__stat { background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-hairline); border-radius: var(--radius-lg); padding: var(--space-lg); text-align: center;
  transition: border-color var(--dur-mid) var(--ease-out), background var(--dur-mid) var(--ease-out),
    transform var(--dur-mid) var(--ease-out); }
.proof__stat:hover { border-color: rgba(255,122,26,.35); background: var(--color-paper-3); transform: translateY(-2px); }
.proof__n { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-2xl); color: var(--color-ink); letter-spacing: -.01em; }
.proof__l { font-size: var(--text-sm); color: var(--color-ink-muted); margin-top: var(--space-2xs); }
.proof__l--muted { margin-top: var(--space-lg); max-width: 70ch; color: var(--color-ink-muted); font-size: var(--text-sm); }

/* pricing ladder */
.ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--space-md); margin-top: var(--space-xl); }
.tier { background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-hairline); border-radius: var(--radius-lg); padding: var(--space-lg); text-align: center;
  transition: border-color var(--dur-mid) var(--ease-out), background var(--dur-mid) var(--ease-out),
    transform var(--dur-mid) var(--ease-out); }
.tier:hover { border-color: rgba(255,122,26,.35); background: var(--color-paper-3); transform: translateY(-2px); }
.tier--free { border-color: var(--color-accent); }
.tier__price { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); }
.tier__name { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-muted); margin-top: var(--space-2xs); }

/* faq */
.faq { max-width: 760px; margin-top: var(--space-xl); }
.faq__q { width: 100%; text-align: left; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-hairline);
  border-radius: var(--radius-sm); padding: var(--space-md); font-family: var(--font-display); font-size: var(--text-h3);
  color: var(--color-ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
  transition: border-color var(--dur-mid) var(--ease-out), background var(--dur-mid) var(--ease-out); }
.faq__q:hover { border-color: rgba(255,122,26,.45); background: var(--color-paper-3); }
.faq__a { display: grid; grid-template-rows: 0fr; overflow: hidden;
  transition: grid-template-rows var(--dur-mid) var(--ease-out); color: var(--color-ink-muted); }
.faq__a > * { min-height: 0; overflow: hidden; }
.faq__a p { padding: var(--space-sm) var(--space-md) var(--space-md); }
.faq__item.open .faq__a { grid-template-rows: 1fr; }
.faq__item.open .faq__q .pm { transform: rotate(45deg); }
.pm { transition: transform var(--dur-short) var(--ease-out); color: var(--color-accent); font-family: var(--font-mono); }

/* contact */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; }
.form { display: flex; flex-direction: column; gap: var(--space-sm); }
.form input, .form textarea { background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-hairline);
  border-radius: var(--radius-sm); padding: var(--space-sm); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); }
.form input:focus, .form textarea:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.contact__meta { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-muted); line-height: 2; }
.contact__meta a { color: var(--color-accent); }

/* blog page */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: var(--space-lg); }
.blog-card { border-radius: var(--radius-lg); overflow: hidden; border: var(--rule-hair) solid var(--color-hairline);
  background: var(--color-paper-2); display: flex; flex-direction: column;
  transition: border-color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out), background var(--dur-mid) var(--ease-out); }
.blog-card:hover { border-color: rgba(255,122,26,.45); transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(0,0,0,.45); background: var(--color-paper-3); }
.blog-card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--color-paper-3); filter: brightness(1.05);
  transition: filter var(--dur-mid) var(--ease-out); }
.blog-card:hover .blog-card__img { filter: brightness(1.12) contrast(1.02); }
.blog-card__body { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-2xs); flex: 1; }
.blog-card__tag { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent); }
.blog-card__title { font-family: var(--font-display); font-size: var(--text-h3); }
.blog-card__excerpt { color: var(--color-ink-muted); font-size: var(--text-sm); flex: 1; }
.blog-card__date { font-family: var(--font-mono); font-size: .75rem; color: var(--color-ink-muted); }

/* legal page */
.legal { max-width: 80ch; }
.legal h2 { font-size: var(--text-h2); margin-top: var(--space-2xl); }
.legal h3 { font-size: var(--text-h3); margin-top: var(--space-lg); }
.legal p, .legal li { color: var(--color-ink-muted); }
.legal ul { padding-left: 1.2rem; }
.legal .legal-nav { display: flex; flex-wrap: wrap; gap: var(--space-md); margin: var(--space-lg) 0 var(--space-2xl); }
.legal .legal-nav a { font-family: var(--font-mono); font-size: .82rem; color: var(--color-accent); border: var(--rule-hair) solid var(--color-hairline);
  padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); }

/* HIGHLIGHTS: News (full width) + New Arrival / Blogs (split) */
.highlights { display: grid; gap: var(--space-md); }
.highlights__split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.hl { position: relative; display: block; overflow: hidden; border: var(--rule-hair) solid var(--color-hairline);
  border-radius: var(--radius-lg); background: var(--color-paper-2); text-decoration: none; color: inherit;
  transition: border-color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out), background var(--dur-mid) var(--ease-out); }
.hl:hover { border-color: rgba(255,122,26,.45); transform: translateY(-3px); box-shadow: 0 16px 44px rgba(0,0,0,.4); background: var(--color-paper-3); }
.hl__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hl__body { position: relative; padding: var(--space-lg); z-index: 2; text-align: center; }
.hl__tag { display: inline-block; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: #0A0A0F; background: var(--color-accent); padding: 3px 9px; border-radius: var(--radius-pill); margin-bottom: var(--space-sm); }
.hl__title { font-family: var(--font-display); font-weight: 700; line-height: 1.1; }
.hl__excerpt { color: var(--color-ink-muted); font-size: var(--text-sm); margin-top: var(--space-xs); }
.hl__more { display: inline-block; margin-top: var(--space-sm); font-family: var(--font-mono); font-size: .82rem; color: var(--color-accent); }
/* full-width news card: image left, body right on wide screens */
.hl--news { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 280px; }
.hl--news .hl__img { height: 100%; }
.hl--news .hl__body { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--space-xl); text-align: center; }
.hl--news .hl__title { font-size: var(--text-h1); }
.hl--mini { display: flex; flex-direction: column; min-height: 260px; }
.hl--mini .hl__img { height: 150px; object-position: center; }
.hl--mini .hl__title { font-size: var(--text-h3); }

/* FOOTER */
.footer { border-top: 3px solid var(--color-accent); margin-top: var(--space-3xl);
  background: #111827; padding: var(--space-2xl) 0 var(--space-lg); position: relative; z-index: 2;
  box-shadow: 0 -8px 32px rgba(0,0,0,.4); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: var(--space-xl); }
.footer__wordmark { display: inline-block; text-decoration: none; }
.footer__logo-text { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.35rem; font-weight: 700; color: #ffffff; letter-spacing: -.02em; }
.footer__logo-slash { color: var(--color-accent); font-family: 'Space Mono', monospace; }
.footer__logo-co { font-family: 'Hanken Grotesk', sans-serif; font-weight: 400; font-size: 1.15rem; }
.footer__tag { color: #b0b6c2; font-size: .9rem; margin-top: var(--space-sm); max-width: 34ch; line-height: 1.6; }
.footer__h { font-family: 'Space Mono', monospace; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-md); font-weight: 600; }
.footer__col { display: flex; flex-direction: column; gap: 2px; }
.footer__col a { display: block; color: #c8ccd4; font-size: .9rem; padding: 4px 0; text-decoration: none; transition: color .2s ease; }
.footer__col a:hover { color: var(--color-accent); }
.footer__social { display: flex; gap: 12px; margin-top: var(--space-lg); }
.footer__social a { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%;
  color: #c8ccd4; text-decoration: none;
  transition: border-color .2s ease, color .2s ease, transform .2s ease, background .2s ease; }
.footer__social a:hover { border-color: var(--color-accent); color: var(--color-accent); background: rgba(255,122,26,.08); transform: translateY(-2px); }
.footer__social svg { width: 18px; height: 18px; fill: currentColor; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md);
  margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid rgba(255,255,255,.08);
  color: #8a909c; font-size: .82rem; }
.footer__bottom span { font-family: 'Space Mono', monospace; font-size: .78rem; }

/* reveal — section-level only, not per-card */
.section-reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.section-reveal.in { opacity: 1; transform: none; }
/* No-JS / non-rendering crawlers never get the .in class — keep content visible for them. */
html:not(.js) .section-reveal { opacity: 1; transform: none; }
/* Cards: always visible, no entrance animation */
.card { opacity: 1; transform: none; }

/* responsive */
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .newsletter { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .nav__links { display: none; }
  .mob { display: grid; }
  .hero h1 { font-size: var(--text-display-s); }
  .nav__links.open { display: flex; position: absolute; top: 100%; right: 0; flex-direction: column;
    background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-hairline); border-radius: var(--radius-sm); padding: var(--space-md); }
  .hl--news { grid-template-columns: 1fr; }
  .hl--news .hl__img { height: 180px; }
  .highlights__split { grid-template-columns: 1fr; }
  .card--featured { flex-direction: column; text-align: center; padding: var(--space-md); }
  .card--featured .card__cover-wrap { width: 100%; }
  .card--featured .card__body { align-items: center; text-align: center; }
  .card--featured .card__row { justify-content: center; }
  .card--featured .card__desc { max-width: none; }
  .card--featured .card__cta { width: 100%; }
  .card--featured .card__cta a { width: 100%; }
  .card__cta-row { width: 100%; flex-direction: column; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .section-reveal { opacity: 1; transform: none; }
}

/* no-JS / crawler fallback: reveal FAQ answers when JS is off */
html:not(.js) .faq__a { grid-template-rows: 1fr; }

/* --- whole-card clickable service cards (2026-08-24) --- */
.svc__item--link { position: relative; }
.svc__item--link .svc__link {
  display: block; height: 100%; color: inherit; text-decoration: none;
  outline: none;
}
.svc__item--link .svc__link:focus-visible {
  outline: var(--focus-w, 2px) solid var(--color-accent, #FF7A1A);
  outline-offset: 3px;
}
.svc__item--link:hover h3, .svc__item--link .svc__link:focus-visible h3 {
  color: var(--accent, #FF7A1A);
}
.svc__item--link:hover .svc__img { opacity: .92; }
@media (prefers-reduced-motion: reduce) {
  .svc__item--link * { transition: none !important; }
}

/* Long translations (de/fr/it/lt) overflow the nowrap pill on phones. Let them wrap. */
@media (max-width: 768px) {
  .btn { white-space: normal; text-align: center; }
}


/* --- hero terminal: Windows cmd-window chrome (2026-09-02, owner review) --- */
.hero__demo { background: #0C0C0C; border: 1px solid #3C3C3C; }
.hero__demo::before { display: none; }
.hero__demo-head { justify-content: space-between; gap: 8px;
  margin: calc(var(--space-md) * -1) calc(var(--space-md) * -1) var(--space-md);
  padding: 6px 10px; background: #1F1F1F; border-bottom: 1px solid #3C3C3C; }
.hero__demo-title { margin-left: 0; text-transform: none; letter-spacing: .02em; color: #D4D4D4; }
.hero__demo-btns { display: flex; gap: 12px; color: #D4D4D4; font-size: .75rem; line-height: 1; }
.hero__demo-btns i { font-style: normal; }
.hero__demo-out { color: #A9A9A9; }
.hero__demo-out strong { color: #F0F0F0; }


/* --- section media assets (2026-09-02, local ComfyUI + FLUX.1-dev) --- */
.section__media { margin: 0 0 var(--space-xl); border-radius: var(--radius-lg); overflow: hidden;
  border: var(--rule-hair) solid var(--color-hairline); box-shadow: 0 18px 48px rgba(0,0,0,.35); }
.section__media img { display: block; width: 100%; height: auto; }

/* --- hero: 3D depth + flashier terminal (2026-09-02, owner review) --- */
.hero__inner { perspective: 1600px; }
.hero__demo { transform: rotateY(-8deg) rotateX(3deg); transform-origin: 85% 50%;
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
  box-shadow: -26px 42px 84px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.05),
    0 0 70px -22px rgba(255,122,26,.55); }
.hero__demo:hover, .hero__demo:focus-within { transform: rotateY(-2deg) rotateX(1deg) translateY(-6px);
  box-shadow: -18px 52px 96px rgba(0,0,0,.66), 0 0 0 1px rgba(255,122,26,.28),
    0 0 90px -18px rgba(255,122,26,.75); }
.hero__demo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.07), transparent 16%, transparent 84%,
    rgba(255,122,26,.09)); }
.hero__demo-btns i:last-child:hover { color: #FF5F57; }
@media (prefers-reduced-motion: reduce) {
  .hero__demo, .hero__demo:hover, .hero__demo:focus-within { transform: none; transition: none; }
}


/* --- newsletter: lighter attention panel (2026-09-02, owner review) --- */
#newsletter .newsletter { position: relative; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(255,122,26,.13), rgba(255,255,255,.07) 48%, rgba(255,122,26,.06));
  border: 1px solid rgba(255,122,26,.30);
  box-shadow: 0 24px 70px -30px rgba(255,122,26,.55), inset 0 1px 0 rgba(255,255,255,.06);
  padding-block: var(--space-2xl); padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
#newsletter .newsletter__copy h2 { color: var(--color-ink); }
#newsletter .newsletter__form input { background: rgba(255,255,255,.07); border-color: rgba(255,122,26,.35); }


/* --- FAQ: compare asset promoted to section background (2026-09-02) --- */
#faq { position: relative; isolation: isolate; overflow: hidden; }
#faq::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(11,14,20,.90), rgba(11,14,20,.955)), url("assets/compare.webp");
  background-size: cover; background-position: center; background-repeat: no-repeat; }

/* --- nav: dimensional, alive, cooler slate tone (2026-09-02, owner review) --- */
.nav__pill { background: linear-gradient(180deg, rgba(41,48,66,.88), rgba(17,21,31,.90));
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 12px 34px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -14px 26px -16px rgba(255,122,26,.55);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.nav__pill:hover { transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -14px 26px -14px rgba(255,122,26,.7),
    0 0 44px -16px rgba(255,122,26,.6); }
.nav__links a { position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px;
  border-radius: 2px; background: var(--color-accent);
  transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out); }
.nav__links a:hover::after, .nav__links a.on::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .nav__pill, .nav__pill:hover { transform: none; transition: none; }
  .nav__links a::after { transition: none; }
}


/* --- products: owned-goods background asset (2026-09-03, owner review) --- */
#products { position: relative; isolation: isolate; overflow: hidden; }
#products::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(11,14,20,.90), rgba(11,14,20,.955)),
    url("assets/textures/products_bg.webp");
  background-size: cover; background-position: center; background-repeat: no-repeat; }


/* --- nav typography, take 2 (2026-09-03): brand display face, sentence case.
   Space Mono uppercase was rejected as the wrong direction. Bricolage is the
   brand display face and is already self-hosted, so it survives the docroot CSP. */
.nav__links { font-family: var(--font-display); font-weight: 600; font-size: .92rem;
  letter-spacing: -.005em; text-transform: none; }
.nav__cta { font-family: var(--font-display); font-weight: 700; font-size: .92rem;
  letter-spacing: -.005em; text-transform: none; }


/* --- terminal .env syntax tone --- */
.hero__demo-out .tc { color: #6B7686; }
.hero__demo-out .tk { color: #D4D4D4; }
.hero__demo-out .tv { color: var(--color-accent); }

@media (prefers-reduced-motion: reduce) {
  .nav__brand:hover .nav__name { transform: none; }
}


/* --- brand mark: 3D + motion, on the REAL element (2026-09-03) ---
   The live mark is <span class="nav__slash">, not .nav__mark - that class exists
   in zero pages and was dead legacy CSS. Lives in the shared stylesheet, so this
   applies to all 14 pages at once. */
.nav__brand { perspective: 800px; }
.nav__slash { display: inline-block; transform-style: preserve-3d; will-change: transform;
  font-size: 1.5em; line-height: .9; transform-origin: 50% 50%;
  text-shadow: 0 0 16px rgba(255,122,26,.8), 0 0 34px rgba(255,122,26,.35),
    1px 0 0 rgba(255,255,255,.4), -1px 0 0 rgba(255,122,26,.6);
  animation: brandFlip 5.5s cubic-bezier(.62,.04,.28,1) infinite; }
@keyframes brandFlip {
  0%, 55%  { transform: rotateY(0deg) scale(1); }
  72%      { transform: rotateY(180deg) scale(1.16); }
  88%      { transform: rotateY(360deg) scale(1); }
  100%     { transform: rotateY(360deg) scale(1); }
}
.nav__brand:hover .nav__slash { animation-duration: 1.4s;
  text-shadow: 0 0 24px rgba(255,122,26,1), 0 0 48px rgba(255,122,26,.5),
    1px 0 0 rgba(255,255,255,.55), -1px 0 0 rgba(255,122,26,.8); }
.nav__name { display: inline-block; transition: transform .4s var(--ease-out); }
.nav__brand:hover .nav__name { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  /* no movement, but keep the dimensional glow so the mark still reads as 3D */
  .nav__slash { animation: none; transform: none; }
  .nav__brand:hover .nav__name { transform: none; }
}

/* ---------------------------------------------------------------------------
   Post charts — canonical, brand-token palette (2026-09-03).
   Was: per-article inline <style> blocks in 4 drifted variants, lime #b6ff3a.
   Bars are drawn proportional to their stated values; see langdata post*_body.
   --------------------------------------------------------------------------- */
.post__chart{margin:var(--space-xl) 0;border:1px solid var(--color-hairline);border-radius:var(--radius-lg);background:var(--color-paper-2);padding:var(--space-lg);}
.post__chart svg{width:100%;height:auto;display:block;overflow:visible;}
.post__chart figcaption{font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.5;color:var(--color-ink-muted);margin-top:var(--space-md);}
.post__chart .bar{fill:var(--color-accent);}
.post__chart .bar-cost{fill:#39404F;}
.post__chart .bar-alt{fill:#6E7789;}
.post__chart .grid{stroke:rgba(150,156,168,.12);stroke-dasharray:3 5;}
.post__chart .ax{stroke:rgba(150,156,168,.38);}
.post__chart .lbl{fill:var(--color-ink-muted);font-family:var(--font-mono);font-size:14px;}
.post__chart .val{fill:var(--color-ink);font-family:var(--font-mono);font-size:16px;font-weight:700;}
@media (max-width:640px){
  .post__chart .lbl{font-size:17px;}
  .post__chart .val{font-size:19px;}
}