/* Shared pieces: labels, badges, tables, cards — used in more than one section. */

.cal-scroll, .table-scroll, .plat-row { max-width: 100%; min-width: 0; }
  .task-name b, .task-name span, .task-steps, .file, .urlfield span, .clip-title, .out-line,
  .seat-meta, .rval, .hero-note, .caption { overflow-wrap: anywhere; }
  .label { font-family: var(--mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .13em; color: var(--muted); margin: 0; }
  .stack { display: grid; gap: 14px; }
  #hero-sub { transition: opacity .32s ease, transform .32s ease; }
  /* proof strip: the facts that stand in for a logo wall before there are customers to show */
  .proofs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
  .proofs li { background: var(--raised); padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
  .proofs b { font-size: 14.5px; }
  .proofs span { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
  /* the render deck: source track + the clips that came out of it */
  .deck { border: 1px solid var(--line); border-radius: 6px; background: var(--raised); box-shadow: var(--shadow); overflow: hidden; }
  .deck-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
  .file { font-family: var(--mono); font-size: 12.5px; display: flex; align-items: center; gap: 9px; }
  .pill { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; background: var(--accent); color: var(--accent-ink); }
  .pill-quiet { background: transparent; color: var(--muted); border: 1px solid var(--line); }
  .deck-body { padding: 16px; display: grid; gap: 14px; }
  .wavebars { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; padding-inline: 5px; opacity: .45; }
  .wavebars i { flex: 1; background: var(--muted); border-radius: 1px; }
  .playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); left: 22%; animation: sweep 16s linear infinite; }
  @keyframes sweep { from { left: 1%; } to { left: 99%; } }
  .art-1 { background: radial-gradient(120% 70% at 50% 18%, #46567E 0%, #243049 42%, #0E1320 100%); }
  .art-2 { background: radial-gradient(120% 70% at 46% 24%, #6A4570 0%, #3A2740 45%, #140D18 100%); }
  .art-3 { background: radial-gradient(120% 70% at 54% 20%, #2F6E69 0%, #1E3A38 45%, #0B1717 100%); }
  .art-4 { background: radial-gradient(120% 70% at 48% 22%, #7A4630 0%, #402A22 45%, #170D09 100%); }
  .cap { position: absolute; left: 6%; right: 6%; bottom: 14%; text-align: center; font-family: "Arial Black", var(--display); font-size: clamp(9px, 1.15vw, 13px); line-height: 1.15; color: #fff; text-transform: uppercase; letter-spacing: -.01em; text-shadow: 0 2px 0 rgba(0,0,0,.6); z-index: 2; }
  .cap em { font-style: normal; color: #FFE500; }
  .score { position: absolute; top: 7px; right: 7px; z-index: 2; font-family: var(--mono); font-size: 10.5px; padding: 2px 5px; border-radius: 2px; background: rgba(0,0,0,.55); color: #fff; }
  .more { display: grid; place-content: center; text-align: center; gap: 4px; border: 1px dashed var(--line); border-radius: 4px; color: var(--muted); font-family: var(--mono); font-size: 12px; padding: 12px; }
  .specs { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--surface); }
  .spec { flex: 1 1 200px; padding: 13px 16px; border-right: 1px solid var(--line-soft); display: grid; gap: 2px; }
  .spec:last-child { border-right: 0; }
  .spec dt { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .spec dd { margin: 0; font-size: 14.5px; font-weight: 500; }
  /* sources */
  .urlbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
  .urlfield { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); padding: 10px 12px; font-family: var(--mono); font-size: 12.5px; color: var(--ink); overflow: hidden; }
  .urlfield span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .caret { width: 1px; height: 15px; background: var(--accent); animation: blink 1.2s steps(1) infinite; flex: none; }
  @keyframes blink { 50% { opacity: 0; } }
  .resolved { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); padding: 12px; align-items: center; }
  .resolved-art { aspect-ratio: 16 / 9; border-radius: 2px; background: radial-gradient(120% 90% at 40% 20%, #46567E, #171C29); }
  .range { position: relative; height: 10px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
  .range i { position: absolute; top: 0; bottom: 0; left: 14%; width: 62%; background: color-mix(in srgb, var(--accent) 55%, transparent); border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); }
  .srcgroup { display: grid; gap: 9px; align-content: start; }
  /* clip-type switcher */
  .types { display: flex; flex-wrap: wrap; gap: 8px; }
  .out { border: 1px solid var(--line); border-radius: 3px; padding: 8px 11px; background: var(--surface); display: grid; gap: 2px; flex: 1 1 200px; }
  .out b { font-size: 13.5px; font-weight: 600; }
  .out span { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
  /* stitch diagram */
  .stitch { display: grid; gap: 7px; }
  .stitch-row { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 10px; align-items: center; }
  .stitch-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .stitch-track { position: relative; height: 26px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); }
  .stitch-track i { position: absolute; top: 4px; bottom: 4px; background: color-mix(in srgb, var(--accent) 24%, transparent); border: 1px solid var(--accent); border-radius: 1px; }
  .stitch-track.joined i { background: var(--accent); border-color: var(--accent); }
  .stitch-arrow { font-family: var(--mono); font-size: 11px; color: var(--muted); padding-left: 76px; }
  /* caption style swatches */
  .swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .sw { display: grid; gap: 6px; }
  .sw-frame { position: relative; aspect-ratio: 3 / 4; border-radius: 3px; overflow: hidden; background: linear-gradient(160deg, #2A3145, #141821); display: grid; place-items: center; padding: 8px; }
  .sw-name { font-family: var(--mono); font-size: 10.5px; color: var(--muted); text-align: center; }
  .sw-text { text-align: center; font-size: 13px; line-height: 1.2; color: #fff; }
  .sw-pop { font-family: "Arial Black", sans-serif; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.65); }
  .sw-pop em { font-style: normal; color: #FFE500; }
  .sw-marker em { font-style: normal; background: #7C5CFF; padding: 0 3px; border-radius: 2px; }
  .sw-sweep { font-family: var(--body); font-weight: 600; text-transform: uppercase; }
  .sw-sweep em { font-style: normal; color: #3DDC97; }
  .sw-head { font-family: "Impact", "Haettenschweiler", sans-serif; text-transform: uppercase; letter-spacing: .01em; color: #FFD400; -webkit-text-stroke: .6px #000; }
  .sw-neon { color: #EAFBFF; text-shadow: 0 0 6px #3AF2FF, 0 0 14px #0096FF; }
  .sw-sub { font-size: 11.5px; background: rgba(0,0,0,.62); padding: 3px 6px; border-radius: 2px; }
  /* formats + framing */
  .ratios { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
  .ratio { display: grid; gap: 6px; justify-items: center; }
  .ratio-box { border: 1.5px solid var(--ink); border-radius: 2px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
  .ratio span { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
  .framings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .framing { display: grid; gap: 6px; }
  .fr-box { position: relative; aspect-ratio: 9 / 16; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: #0E1116; display: grid; place-items: center; }
  .fr-fill { position: absolute; inset: 0; background: linear-gradient(140deg, #3B4A72, #171C29); }
  .fr-blur { position: absolute; inset: 0; background: linear-gradient(140deg, #3B4A72, #171C29); filter: blur(12px); transform: scale(1.2); opacity: .75; }
  .fr-inner { position: relative; width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(140deg, #4C5F90, #1E2536); border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
  .framing span { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
  .script { font-size: 14px; line-height: 1.8; }
  .script s { color: var(--muted); opacity: .65; text-decoration-color: var(--accent); }
  .script mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 2px; padding: 0 2px; }
  .gapchip { font-family: var(--mono); font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 2px; padding: 0 4px; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip { font-family: var(--mono); font-size: 10.5px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 2px; color: var(--muted); background: var(--surface); }
  .chip-on { border-color: var(--accent); color: var(--accent); }
  .strip { display: flex; gap: 2px; height: 34px; }
  .strip i { flex: 1; border-radius: 1px; }
  .wave { height: 22px; display: flex; align-items: center; gap: 2px; }
  .wave i { flex: 1; background: var(--muted); opacity: .5; border-radius: 1px; }
  /* mix flow */
  .flow { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, .9fr) 34px minmax(0, 1.1fr); gap: 10px; align-items: center; }
  .stackbox { display: grid; gap: 7px; }
  .filechip { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); padding: 8px 10px; font-family: var(--mono); font-size: 11.5px; }
  .filechip b { font-weight: 500; }
  .kindmark { width: 16px; height: 16px; border-radius: 2px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); flex: none; }
  .kindmark.audio { border-color: var(--good); background: color-mix(in srgb, var(--good) 18%, transparent); }
  .flow-arrow { font-family: var(--mono); color: var(--muted); text-align: center; }
  .tmpl { border: 1px solid var(--accent); border-radius: 4px; background: color-mix(in srgb, var(--accent) 8%, transparent); padding: 12px; display: grid; gap: 6px; }
  .tmpl b { font-size: 14px; }
  .tmpl span { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
  .beats { display: flex; gap: 4px; }
  .beats i { height: 6px; border-radius: 1px; background: var(--accent); }
  .outgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* book */
  .book { border: 1px solid var(--line); border-radius: 4px; background: var(--surface); overflow: hidden; }
  .book-head { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .book-title { font-family: var(--display); font-weight: 800; font-size: 16px; }
  .ch { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
  .ch:last-child { border-bottom: 0; }
  .ch-no { font-family: var(--mono); font-size: 11px; color: var(--accent); }
  .ch-name { font-size: 14px; font-weight: 500; }
  .ch-src { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
  /* script → video */
  .maker { display: grid; grid-template-columns: minmax(0, 1.1fr) 30px minmax(0, .9fr) 30px minmax(0, .7fr); gap: 10px; align-items: center; }
  .scriptbox { border: 1px solid var(--line); border-radius: 4px; background: var(--surface); padding: 14px; display: grid; gap: 8px; }
  .scriptbox p { font-size: 14px; line-height: 1.6; }
  .scriptbox .said { color: var(--muted); }
  .scriptbox .beat { font-family: var(--mono); font-size: 10.5px; color: var(--accent); border: 1px solid var(--line); border-radius: 2px; padding: 0 5px; }
  .imgtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .imgtile { position: relative; aspect-ratio: 4 / 3; border-radius: 3px; overflow: hidden; border: 1px solid var(--line); }
  .imgtile span { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.6); color: #fff; font-family: var(--mono); font-size: 9px; padding: 3px 5px; }
  .imgtile.found { border-color: var(--accent); }
  /* scheduled tasks */
  .tasks { border: 1px solid var(--line); border-radius: 4px; background: var(--raised); overflow: hidden; }
  .task { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); align-items: center; }
  .task:last-child { border-bottom: 0; }
  .task-name { display: grid; gap: 4px; }
  .task-name b { font-size: 14.5px; }
  .task-name span { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
  .task-steps { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
  .task-steps i { color: var(--accent); font-style: normal; }
  .switch { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 2px; border: 1px solid var(--good); color: var(--good); background: transparent; white-space: nowrap; }
  .switch.off { border-color: var(--line); color: var(--muted); }
  /* scheduling calendar */
  .cal-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--raised); }
  .cal { min-width: 680px; }
  .cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--surface); border-bottom: 1px solid var(--line); }
  .cal-head span { padding: 8px 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); }
  .day { background: var(--raised); min-height: 92px; padding: 8px; display: grid; gap: 5px; align-content: start; }
  .day-num { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
  .day-today .day-num { color: var(--accent); }
  .post { border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: 2px; padding: 5px 6px; display: grid; gap: 2px; background: var(--surface); }
  .post b { font-size: 10.5px; font-weight: 600; line-height: 1.25; }
  .post span { font-family: var(--mono); font-size: 9.5px; color: var(--muted); }
  .post-buffer { border-left-color: var(--good); }
  .cal-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--surface); font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .key { display: inline-flex; align-items: center; gap: 6px; }
  .key i { width: 10px; height: 10px; border-radius: 1px; background: var(--accent); }
  .key.buffer i { background: var(--good); }
  /* audiences */
  .who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
  .who-cell { background: var(--raised); padding: 16px 18px; display: grid; gap: 5px; align-content: start; }
  .who-cell b { font-size: 14.5px; }
  .who-cell span { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
  /* thumbnail generator */
  .thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .thumb { display: grid; gap: 6px; }
  .thumb-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 3px; overflow: hidden; border: 1px solid var(--line); display: grid; align-items: end; }
  .thumb-art { position: absolute; inset: 0; }
  .thumb-txt { position: relative; z-index: 2; padding: 10px; text-align: center; font-family: "Arial Black", var(--display); text-transform: uppercase; color: #fff; font-size: clamp(11px, 1.5vw, 16px); line-height: 1.1; }
  .tt-banner { background: rgba(0,0,0,.72); margin: 0 10px 10px; padding: 6px 8px; }
  .tt-spot { text-shadow: 0 2px 6px rgba(0,0,0,.8); align-self: center; justify-self: center; padding-bottom: 0; }
  .tt-stamp { background: #7C5CFF; margin: 10px 10px auto; padding: 6px 8px; align-self: start; }
  .thumb span { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
  .scrim { position: absolute; inset: 0; background: rgba(0,0,0,.28); }
  /* upsell path */
  .path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
  .rung { border: 1px solid var(--line); border-radius: 4px; background: var(--raised); padding: 18px; display: grid; gap: 10px; align-content: start; position: relative; }
  .rung-now { border-color: var(--accent); box-shadow: var(--shadow); }
  .rung h3 { font-size: 17px; }
  .rung ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 13.5px; color: var(--muted); }
  .rung li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; }
  .rung-when { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
  /* pipeline */
  .pipeline { display: grid; gap: 0; }
  .waitbars { display: grid; gap: 10px; }
  .waitrow { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-family: var(--mono); font-size: 11.5px; }
  .waitbar { height: 12px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
  .waitbar i { display: block; height: 100%; }
  .waitbar .ours { width: 2%; background: var(--accent); }
  .waitbar .theirs { width: 84%; background: var(--muted); opacity: .55; }
  .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }
  .dot-idle { background: var(--muted); opacity: .55; }
  .caption { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 10px; }
  .tick { color: var(--good); font-family: var(--mono); font-size: 12.5px; }
  .badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); padding: 3px 7px; border-radius: 2px; }
  table { border-collapse: collapse; width: 100%; min-width: 660px; font-size: 14.5px; }
  th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
  thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; background: var(--surface); }
  tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
  tbody th { font-weight: 600; width: 28%; }
  .col-theirs { color: var(--muted); }
  .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  /* faq + footer */
  .closer { display: grid; gap: 18px; justify-items: start; }
  .label { font-family: var(--mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .13em; color: var(--muted); margin: 0; }
  .top { padding-block: clamp(26px, 4vw, 44px) clamp(24px, 3.4vw, 36px); display: grid; gap: 16px; }
  /* jump grid */
  .jump { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
  .jump a { background: var(--raised); padding: 13px 15px; text-decoration: none; display: grid; gap: 3px; }
  .jump a:hover { background: var(--surface); }
  .jump b { font-size: 14.5px; }
  .jump span { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
  /* solution blocks */
  .sol { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 28px; padding-block: 30px; border-bottom: 1px solid var(--line-soft); align-items: start; }
  .sol:last-child { border-bottom: 0; }
  .sol-copy { display: grid; gap: 10px; align-content: start; }
  .sol-copy p { color: var(--muted); font-size: 15px; }
  .sol-copy .pain { color: var(--ink); font-weight: 600; font-size: 15px; }
  .recipe { border: 1px solid var(--line); border-radius: 4px; background: var(--raised); overflow: hidden; box-shadow: var(--shadow); }
  .recipe-head { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); background: var(--surface); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .rrow { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
  .rrow:last-child { border-bottom: 0; }
  .rkey { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .rval { font-size: 14px; }
  .rval b { font-weight: 600; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip { font-family: var(--mono); font-size: 10.5px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 2px; color: var(--muted); background: var(--surface); }
  .chip-on { border-color: var(--accent); color: var(--accent); }
  .callout { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 3px; background: var(--raised); padding: 14px 16px; display: grid; gap: 5px; }
  .callout b { font-size: 14.5px; }
  .callout span { color: var(--muted); font-size: 14px; }
  .label { font-family: var(--mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .13em; color: var(--muted); margin: 0; }
  .stack { display: grid; gap: 14px; }
  .top { padding-block: clamp(26px, 4vw, 44px) clamp(28px, 4vw, 40px); display: grid; gap: 18px; }
  .field { display: grid; gap: 7px; }
  .field > span { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); padding: 3px 7px; border-radius: 2px; }
  .tick { color: var(--good); font-family: var(--mono); font-size: 12.5px; }
  .matrix table { border-collapse: collapse; width: 100%; min-width: 700px; font-size: 14.5px; }
  .matrix th, .matrix td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
  .matrix thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; background: var(--surface); }
  .matrix tbody th { font-weight: 500; width: 34%; }
  .matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: 0; }
  .matrix td.mid { text-align: center; }
  .yes { color: var(--good); font-family: var(--mono); }
  .no { color: var(--muted); font-family: var(--mono); opacity: .65; }
  .rowhead th { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; background: var(--surface); }
  .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .bar-ours { fill: var(--accent); }
  .bar-theirs { fill: var(--muted); opacity: .5; }
  .axis { stroke: var(--line); stroke-width: 1; }
  .caption { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 10px; }
  details { border-bottom: 1px solid var(--line-soft); }
  details:last-child { border-bottom: 0; }
  summary { cursor: pointer; padding: 15px 18px; font-weight: 600; font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; gap: 14px; }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: "+"; font-family: var(--mono); color: var(--accent); }
  details[open] summary::after { content: "–"; }
  details p { padding: 0 18px 15px; color: var(--muted); font-size: 14.5px; max-width: 72ch; }
  .soon-tag { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid currentColor; border-radius: 999px; padding: 1px 6px; margin-left: 7px; white-space: nowrap; vertical-align: middle; }
  .b-youtube { background: #FF0033; } .b-instagram { background: linear-gradient(135deg, #F9CE34, #EE2A7B 55%, #6228D7); }
  .b-linkedin { background: #0A66C2; font-size: 13px; letter-spacing: -.02em; } .b-tiktok { background: #111; }
  .b-facebook { background: #1877F2; font-size: 17px; } .b-x { background: #111; }
  .b-whatsapp { background: #25D366; }
  .b-tag { background: var(--accent-btn); font-family: var(--mono); font-size: 13px; font-weight: 500; }
  @keyframes scan { from { left: 0; } to { left: 100%; } }
  @keyframes clipin { to { opacity: 1; transform: none; } }
  [id] { scroll-margin-top: 84px; }
  .tag-new { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); padding: 1px 5px; border-radius: 2px; }