/* Shared site chrome (header, footer, square buttons, NEW badge) for every marketing page.
   Everything is tvx- prefixed so it can't collide with a page's own nav/footer/.btn rules;
   the few bare-element rules pages ship (nav {sticky...}, footer {border-top}, a:hover
   {underline}) are neutralised below with higher-specificity selectors. */
/* One content width for the chrome AND page grids that opt in (index .wrap): 1024px of content + 38px gutters. */
:root { --tvx-max: 1100px; --tvx-gutter: 38px; --tvx-bg: #08080a; --tvx-text: #e4e4e7; --tvx-muted: #d4d4d8; --tvx-dim: #a1a1aa; --tvx-amber: #e8a832; --tvx-amber-hover: #d49a28; --tvx-ind: #5f4cc0; --tvx-ind-hover: #6b58d0; --tvx-rule: #e4e4e7; }
@media (min-width: 721px) { html { scroll-padding-top: 76px; } }

/* ---------- buttons + badge ---------- */
.tvx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 0; border-radius: 0; font-family: 'DM Sans', system-ui, sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; cursor: pointer; transition: background-color .15s; white-space: nowrap; }
.tvx-btn:hover { text-decoration: none; }
.tvx-btn-amber, a.tvx-btn-amber { background: var(--tvx-amber); color: #000; }
.tvx-btn-amber:hover, a.tvx-btn-amber:hover { background: var(--tvx-amber-hover); color: #000; }
.tvx-btn-ind, a.tvx-btn-ind { background: var(--tvx-ind); color: #fff; }
.tvx-btn-ind:hover, a.tvx-btn-ind:hover { background: var(--tvx-ind-hover); color: #fff; }
.tvx-btn:focus-visible { outline: 2px solid var(--tvx-text); outline-offset: 3px; }
.tvx-new { position: relative; overflow: hidden; display: inline-block; font-family: 'DM Sans', system-ui, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; line-height: 1.3; color: #fff; background: linear-gradient(135deg, #7560dc, #4a39a8); padding: 4px 9px 3px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 4px 14px -4px rgba(122,102,224,.8); }
.tvx-new::after { content: ""; position: absolute; inset: 0; width: 45%; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); animation: tvx-sheen 3.2s ease-in-out infinite; }
@keyframes tvx-sheen { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(220%); } }
@media (prefers-reduced-motion: reduce) { .tvx-new::after { display: none; } }

/* ---------- logo (icon + "TomeVox", as in the shipped nav) ---------- */
.tvx-logo, a.tvx-logo { display: inline-flex; align-items: center; gap: 12px; font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600; font-size: 21px; letter-spacing: -0.02em; line-height: 1; color: var(--tvx-text); text-decoration: none; white-space: nowrap; }
.tvx-logo:hover { color: var(--tvx-text); text-decoration: none; }
.tvx-logo-icon { width: 30px; height: 30px; border-radius: 7px; background: linear-gradient(135deg, #e8a832, #c48a20); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.tvx-logo-icon svg { width: 15px; height: 15px; }

/* ---------- header ---------- */
/* margin-bottom: page bodies start flush under the header (they were built for a slim nav) */
.tvx-header { position: sticky; top: 0; z-index: 100; margin: 0 0 32px; background: var(--tvx-bg); border-bottom: 3px solid var(--tvx-rule); font-family: 'DM Sans', system-ui, sans-serif; }
.tvx-header-in { max-width: var(--tvx-max); margin: 0 auto; padding: 0 var(--tvx-gutter); min-height: 64px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.tvx-header .tvx-nav { position: static; z-index: auto; border: 0; padding: 0; margin: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 0 26px; min-width: 0; }
.tvx-header .tvx-nav a { display: inline-block; padding: 14px 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.2; color: var(--tvx-muted); text-decoration: none; white-space: nowrap; }
.tvx-header .tvx-nav a:hover { color: #fff; text-decoration: none; }
.tvx-header .tvx-nav a:focus-visible, .tvx-header .tvx-logo:focus-visible, .tvx-footer a:focus-visible { outline: 2px solid var(--tvx-amber); outline-offset: 3px; }
.tvx-header-cta { flex: 0 0 auto; }
@media (max-width: 1180px) { .tvx-header .tvx-nav { gap: 0 18px; } .tvx-header .tvx-nav a { letter-spacing: 0.1em; } }
@media (max-width: 1060px) {
  .tvx-header-in { flex-wrap: wrap; padding: 10px var(--tvx-gutter) 0; gap: 0 16px; }
  .tvx-header .tvx-nav { order: 3; width: 100%; justify-content: flex-start; gap: 0 22px; padding: 4px 0 2px; }
}
@media (max-width: 720px) {
  :root { --tvx-gutter: 16px; }
  .tvx-header { position: relative; margin-bottom: 24px; }
  .tvx-header-in { padding: 12px 16px 0; min-height: 0; }
  .tvx-logo, a.tvx-logo { font-size: 20px; gap: 10px; }
  .tvx-logo-icon { width: 30px; height: 30px; border-radius: 7px; }
  .tvx-logo-icon svg { width: 15px; height: 15px; }
  .tvx-header-cta { min-height: 44px; padding: 0 16px; }
  .tvx-header .tvx-nav { gap: 0 18px; padding: 2px 0 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tvx-header .tvx-nav::-webkit-scrollbar { display: none; }
  .tvx-header .tvx-nav a { padding: 15px 0; letter-spacing: 0.1em; }
  /* 44px tap targets on touch screens */
  .tvx-logo, a.tvx-logo { min-height: 44px; }
  .tvx-footer .tvx-footer-col a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
}

/* ---------- footer ---------- */
.tvx-footer { border-top: 0; margin: 0; padding: 72px 0 40px; background: var(--tvx-bg); color: var(--tvx-dim); font-family: 'DM Sans', system-ui, sans-serif; font-size: 14px; line-height: 1.5; }
.tvx-footer-in { max-width: var(--tvx-max); margin: 0 auto; padding: 0 var(--tvx-gutter); box-sizing: border-box; }
.tvx-footer-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; row-gap: 32px; border-top: 3px solid var(--tvx-rule); padding-top: 28px; }
.tvx-footer-brand { grid-column: 1 / span 4; }
.tvx-footer-col { grid-column: span 3; display: flex; flex-direction: column; align-items: flex-start; }
.tvx-footer .tvx-label { margin: 0 0 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--tvx-dim); }
.tvx-footer .tvx-footer-col a { display: inline-block; padding: 7px 0; font-size: 15px; color: var(--tvx-muted); text-decoration: none; }
.tvx-footer .tvx-footer-col a:hover { color: #fff; text-decoration: none; }
.tvx-footer-base { margin-top: 40px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.18); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
.tvx-footer .tvx-footer-base p { margin: 0; padding: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--tvx-dim); }
.tvx-footer .page-updated { margin: 0; color: inherit; }
@media (max-width: 860px) { .tvx-footer-brand { grid-column: 1 / -1; } .tvx-footer-col { grid-column: span 6; } }
@media (max-width: 720px) { .tvx-footer { padding: 56px 0 32px; } .tvx-footer-in { padding: 0 16px; } }