:root {
        --x-cobalt: #2323cc; --x-cobalt-deep: #1a1aa0; --x-paper: #f6f6f2; --x-ink: #0e0e1a; --x-ink-2: #4a4a5c;
        --x-lime: #c6ff3d; --x-line: rgba(14, 14, 26, 0.14); --x-mono: "Geist Mono", ui-monospace, Menlo, monospace; --x-max: 720px;
      }

      *, *::before, *::after { box-sizing: border-box; }
      html { -webkit-text-size-adjust: 100%; }
      body, h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }
      body { line-height: 1.3; -webkit-font-smoothing: antialiased; }
      img, svg { display: block; max-width: 100%; }
      button { font: inherit; }
      a { color: inherit; }
      :root { --sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
      .x-skip { position: absolute; left: -9999px; top: 8px; z-index: 60; background: var(--x-lime); color: var(--x-ink); padding: 10px 14px; border-radius: 8px; }
      .x-skip:focus { left: 12px; }
      .x-mast__nav { display: flex; align-items: center; gap: 14px; }
      .x-mast__nav a { font: 400 12px/1 var(--x-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--x-paper); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; opacity: 0.85; }
      .x-mast__nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
      .x-foot__links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
      .x-foot__guides { margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(246,246,242,0.25); }
      .x-foot__guides a { opacity: 0.85; }
      .x-foot__badges { margin-top: 18px; display: flex; align-items: center; }
      .x-foot__badges img { display: block; width: 120px; height: auto; }
      .x-guide__cta { text-decoration: none; color: var(--x-ink) !important; margin-top: 6px; }
      .x-md .x-from h2 { margin-top: 0; }
      .x-foot__links a { font: 400 13px/1 var(--x-mono); color: var(--x-paper); min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 4px; }
      .x-foot__method { margin-top: 14px; font: 400 12px/1.5 var(--x-mono); color: var(--x-paper); opacity: 0.7; }
      .x-card--quiet .dc-fig--bare { margin-top: 18px; }
      .x-list a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(35,35,204,0.4); }
      /* archive */
      .x-arch { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
      .x-arch a { display: block; background: #fff; border: 1px solid var(--x-line); border-radius: 22px; padding: 20px; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; }
      .x-arch a:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(35,35,204,0.45); }
      .x-arch time { font: 400 12px/1 var(--x-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--x-cobalt); }
      .x-arch b { display: block; margin-top: 10px; font-size: clamp(20px, 5vw, 26px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 600; }
      .x-arch span { display: block; margin-top: 8px; color: var(--x-ink-2); font-size: 15px; line-height: 1.5; }
      .x-mast--slim .x-mast__bar { border-bottom: 0; }
      .x-arch-head { padding-block: 24px 40px; }
      .x-arch-head h1 { font-size: clamp(40px, 11vw, 72px); line-height: 0.95; letter-spacing: -0.05em; font-weight: 600; }
      .x-arch-head h1 em { font-style: normal; color: var(--x-lime); }

      :root {
        --x-cobalt: #2323cc;
        --x-cobalt-deep: #1a1aa0;
        --x-paper: #f6f6f2;
        --x-ink: #0e0e1a;
        --x-ink-2: #4a4a5c;
        --x-lime: #c6ff3d;
        --x-line: rgba(14, 14, 26, 0.14);
        --x-mono: "Geist Mono", ui-monospace, monospace;
        --x-max: 720px;
      }
      html, body { background: var(--x-paper); color: var(--x-ink); }
      body { font-family: var(--sans); }
      .page.x-page { max-width: none; padding: 0; gap: 0; }
      .x-wrap { width: 100%; max-width: var(--x-max); min-width: 0; box-sizing: border-box; margin: 0 auto; padding-inline: 20px; }

      /* progress */
      .x-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 50; pointer-events: none; }
      .x-progress span { display: block; height: 100%; width: 100%; background: var(--x-lime); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 8px var(--x-lime); }

      /* draft banner */
      .x-draft { background: var(--x-ink); color: var(--x-lime); font: 400 12px/1 var(--x-mono); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 11px 16px; }

      /* masthead */
      .x-mast { background: var(--x-cobalt); color: var(--x-paper); }
      .x-mast__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 16px; border-bottom: 1px solid rgba(246,246,242,0.22); }
      .x-brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; color: inherit; }
      .x-brand__mark { flex: none; width: 30px; height: 30px; overflow: hidden; border-radius: 8px; }
      .x-brand__mark img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.75); }
      .x-brand b { font-size: 20px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; }
      .x-issue { font: 400 12px/1.3 var(--x-mono); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; text-align: right; }

      /* hero dedupe animation */
      .x-stage { position: relative; height: clamp(300px, 56vh, 440px); overflow: hidden; background: var(--x-cobalt); }
      .x-chip { position: absolute; left: 50%; top: 50%; white-space: nowrap; font: 400 12px/1 var(--x-mono); padding: 8px 11px; border-radius: 999px; background: var(--x-cobalt-deep); border: 1px solid #6a6ae0; color: var(--x-paper); will-change: transform, opacity; transition: transform 1.1s cubic-bezier(.7,0,.2,1), opacity 0.6s ease 0.6s; }
      .x-chip.is-dupe { border-color: var(--x-lime); color: var(--x-lime); background: var(--x-ink); }
      .x-tagline { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 0 12px; }
      .x-tagline h1 { font-size: clamp(44px, 13vw, 96px); line-height: 0.92; letter-spacing: -0.055em; font-weight: 600; opacity: 0; transform: scale(0.9); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(.2,.9,.2,1); }
      .x-tagline h1 em { font-style: normal; color: var(--x-lime); }
      .x-stage.is-merged .x-tagline h1 { opacity: 1; transform: none; }

      .x-subject { padding-block: 8px 40px; }
      .x-subject__label { font: 400 12px/1 var(--x-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--x-lime); }
      .x-subject h2 { margin-top: 12px; font-size: clamp(30px, 8vw, 46px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 600; }
      .x-subject p { margin-top: 14px; font-size: 17px; line-height: 1.5; opacity: 0.88; max-width: 34em; }

      /* sections */
      .x-sec { padding-block: 56px 8px; }
      .x-label { display: inline-flex; align-items: center; gap: 8px; font: 400 13px/1 var(--x-mono); letter-spacing: 0.14em; text-transform: uppercase; background: var(--x-ink); color: var(--x-paper); padding: 9px 12px; border-radius: 4px; }
      .x-label::before { content: ""; width: 8px; height: 8px; background: var(--x-lime); border-radius: 2px; }
      .x-label--cobalt { background: var(--x-cobalt); }
      .x-intro { margin-top: 14px; font-size: 17px; line-height: 1.5; color: var(--x-ink-2); }

      /* category + coverage tags */
      .x-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
      .x-cat { display: inline-flex; align-items: center; font: 400 12px/1 var(--x-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--x-cobalt); border: 1px solid var(--x-cobalt); padding: 6px 10px; border-radius: 999px; }
      .x-cov { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.2; color: var(--x-ink-2); }
      .x-cov::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--x-cobalt); }

      .x-h { font-weight: 600; letter-spacing: -0.04em; line-height: 1.04; }
      .x-h--xl { font-size: clamp(32px, 8.5vw, 52px); margin-top: 16px; }
      .x-h--m { font-size: clamp(22px, 5.6vw, 28px); margin-top: 12px; }
      .x-body { font-size: 17px; line-height: 1.6; margin-top: 14px; color: var(--x-ink); }


      /* take + what to do */
      .x-take { margin-top: 28px; border-left: 4px solid var(--x-cobalt); padding: 4px 0 4px 18px; }
      .x-take__k { font: 400 12px/1 var(--x-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--x-cobalt); }
      .x-take p:not(.x-take__k) { margin-top: 10px; font-size: 20px; line-height: 1.45; letter-spacing: -0.015em; font-weight: 500; }
      .x-sowhat { margin-top: 24px; background: var(--x-cobalt); color: var(--x-paper); border-radius: 18px; padding: 22px; }
      .x-sowhat .x-take__k { color: var(--x-lime); }
      .x-sowhat p:not(.x-take__k) { margin-top: 10px; font-size: 17px; line-height: 1.55; }

      .x-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--x-ink); color: var(--x-paper); text-decoration: none; font-weight: 500; font-size: 15px; transition: transform 0.2s ease, background 0.2s ease; }
      .x-btn:hover { transform: translateY(-2px); background: var(--x-cobalt); }
      .x-btn--lime { background: var(--x-lime); color: var(--x-ink); }
      .x-btn--lime:hover { background: var(--x-paper); }
      .x-more { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin-top: 6px; font: 400 13px/1 var(--x-mono); letter-spacing: 0.04em; color: var(--x-cobalt); text-decoration: underline; text-underline-offset: 4px; }
      .x-cta { margin-top: 22px; }

      /* ranked cards */
      .x-rank { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px; }
      .x-card { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; background: #fff; border: 1px solid var(--x-line); border-radius: 22px; padding: 20px 20px 12px; transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease; }
      .x-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(35,35,204,0.45); }
      .x-num { font-size: clamp(52px, 14vw, 88px); line-height: 0.8; font-weight: 600; letter-spacing: -0.07em; color: var(--x-cobalt); min-width: 1.1ch; font-variant-numeric: tabular-nums; }
      .x-card__body { min-width: 0; }
      .x-card .x-tags { margin-top: 2px; }
      .x-card .x-body { font-size: 16px; margin-top: 10px; }
      .x-card__media { margin: 16px 0 0; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--x-cobalt); }
      .x-card__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 2.4s cubic-bezier(.2,.7,.2,1); }
      .is-in .x-card__media img { transform: none; }

      /* quiet signal */
      .x-card--quiet { background: var(--x-ink); color: var(--x-paper); border: 2px solid var(--x-lime); animation: x-glow 2.8s ease-in-out infinite; }
      @keyframes x-glow { 0%,100% { box-shadow: 0 0 18px rgba(198,255,61,0.25); } 50% { box-shadow: 0 0 0 6px rgba(198,255,61,0.12), 0 0 36px rgba(198,255,61,0.45); } }
      .x-card--quiet .x-num { color: var(--x-lime); }
      .x-card--quiet .x-body { color: var(--x-paper); opacity: 0.9; }
      .x-card--quiet .x-cat { color: var(--x-lime); border-color: var(--x-lime); }
      .x-card--quiet .x-cov { color: rgba(246,246,242,0.8); }
      .x-card--quiet .x-cov::before { background: var(--x-lime); }
      .x-card--quiet .x-more { color: var(--x-lime); }
      .x-quiet { display: inline-block; background: var(--x-lime); color: var(--x-ink); font: 400 12px/1 var(--x-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; margin-bottom: 10px; }
      .x-fu { color: var(--x-cobalt); font-weight: 600; }

      /* your move */
      .x-move { margin-top: 64px; background: var(--x-cobalt); color: var(--x-paper); border-radius: 24px; padding: 32px 24px; position: relative; overflow: hidden; }
      .x-move::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--x-lime); }
      .x-move .x-take__k { color: var(--x-lime); font-size: 13px; }
      .x-move p:not(.x-take__k) { margin-top: 14px; font-size: clamp(20px, 5vw, 26px); line-height: 1.35; letter-spacing: -0.02em; font-weight: 500; }

      /* by category */
      .x-tabs { display: flex; gap: 8px; margin: 22px -20px 0; padding: 4px 20px 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
      .x-tabs::-webkit-scrollbar { display: none; }
      .x-tab { flex: none; scroll-snap-align: start; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--x-line); background: #fff; color: var(--x-ink); font: 500 14px/1 var(--sans); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
      .x-tab:hover { border-color: var(--x-cobalt); }
      .x-tab[aria-selected="true"] { background: var(--x-cobalt); color: var(--x-paper); border-color: var(--x-cobalt); box-shadow: inset 0 -3px 0 var(--x-lime); }
      .x-tab:focus-visible { outline: 2px solid var(--x-cobalt); outline-offset: 2px; }
      .x-panel { margin-top: 16px; background: #fff; border: 1px solid var(--x-line); border-radius: 22px; padding: 8px 20px; }
      .x-panel.is-shown { animation: x-fade 0.35s ease; }
      @keyframes x-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
      .x-panel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; margin-top: 12px; }
      .x-list { list-style: none; padding: 0; margin: 0; counter-reset: c; }
      .x-list li { counter-increment: c; display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--x-line); font-size: 16px; line-height: 1.5; color: var(--x-ink-2); }
      .x-list li:first-child { border-top: 0; }
      .x-list li::before { content: counter(c); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--x-ink); color: var(--x-lime); font: 400 13px/1 var(--x-mono); }
      .x-list li:first-child::before { background: var(--x-lime); color: var(--x-ink); }
      .x-list b { color: var(--x-ink); font-weight: 600; }

      /* footer */
      .x-foot { margin-top: 72px; background: var(--x-cobalt); color: var(--x-paper); padding-block: 56px 40px; }
      .x-foot .x-brand__mark { width: 44px; height: 44px; border-radius: 12px; }
      .x-foot .x-brand b { font-size: 26px; }
      .x-foot h2 { font-size: clamp(34px, 10vw, 56px); line-height: 0.95; letter-spacing: -0.05em; font-weight: 600; margin-top: 28px; }
      .x-foot h2 em { font-style: normal; color: var(--x-lime); }
      .x-foot p { margin-top: 16px; font-size: 17px; line-height: 1.5; opacity: 0.9; }
      .x-foot .x-cta { margin-top: 24px; }
      .x-foot small { display: block; margin-top: 40px; font: 400 12px/1.5 var(--x-mono); opacity: 0.7; }

      /* reveal */
      .js .x-rev { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.2,.8,.2,1); }
      .js .x-rev.is-in { opacity: 1; transform: none; }
      .js .x-card.x-rev.is-in:hover { transform: translateY(-4px); }

      @media (min-width: 768px) {
        .x-card { padding: 26px 28px 16px; gap: 4px 24px; }
        .x-move { padding: 40px 40px; }
        .x-panel { padding: 8px 28px; }
      }
      @media (max-width: 420px) {
        .x-card { grid-template-columns: 1fr; }
        .x-num { font-size: 56px; margin-bottom: 8px; }
      }
      
      @media (prefers-reduced-motion: reduce) {
        .x-chip, .x-tagline h1, .x-card, .x-card__media img, .x-tab, .x-btn { transition: none !important; }
        .js .x-rev { opacity: 1; transform: none; transition: none; }
        .x-card--quiet, .x-panel.is-shown { animation: none; }
        .x-card__media img { transform: none; }
        .x-card:hover, .x-btn:hover, .x-arch a:hover { transform: none; }
      }
      .x-skip-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
      html:not(.js) .x-tagline h1 { opacity: 1; transform: none; }

      .x-topcta { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 16px; background: var(--x-ink); color: var(--x-paper); font-size: 14px; }
      .x-topcta .x-btn { min-height: 36px; padding: 0 16px; font-size: 14px; }
      @media (max-width: 560px) { .x-topcta span { font-size: 12.5px; line-height: 1.3; } }
      /* top nav bar (every page) */
      .x-topcta { justify-content: space-between; gap: 18px; padding: 8px 20px; flex-wrap: wrap; }
      .x-topcta__brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--x-paper); }
      .x-topcta__brand img { border-radius: 6px; }
      .x-topcta__brand b { font: 600 13px/1 var(--x-mono); letter-spacing: 0.14em; }
      .x-topcta__nav { display: flex; gap: 4px; margin-right: auto; }
      .x-topcta__nav a { font: 500 13px/1 var(--x-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--x-paper); text-decoration: none; padding: 10px 12px; border-radius: 999px; opacity: 0.8; }
      .x-topcta__nav a:hover, .x-topcta__nav a[aria-current] { opacity: 1; background: rgba(246,246,242,0.12); }
      .x-topcta__tag { opacity: 0.75; font-size: 13.5px; }
      @media (max-width: 760px) { .x-topcta__tag { display: none; } .x-topcta { padding: 6px 12px; gap: 8px; } .x-topcta__nav a { padding: 10px 8px; font-size: 12px; } .x-topcta__brand b { display: none; } }
      /* issue cards (archive + more issues), same layout as the beehiiv post grid */
      .x-wide { max-width: 1160px; }
      .x-cards { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
      .x-cardlink { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--x-ink); background: #fff; border: 1px solid var(--x-line); border-radius: 22px; padding: 12px 12px 18px; transition: border-color 0.25s ease, box-shadow 0.25s ease; }
      .x-cardlink:hover { border-color: var(--x-cobalt); box-shadow: 0 18px 40px -22px rgba(35,35,204,0.45); }
      .x-cardlink > :not(img):not(.x-cardlink__ph) { padding-left: 6px; padding-right: 6px; }
      .x-cardlink__ph { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; border-radius: 14px; background: var(--x-cobalt); color: #C6FF3D; font: 600 15px/1.2 var(--x-mono); letter-spacing: 0.12em; text-transform: uppercase; }
      .x-cardlink__img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; transition: transform 0.25s ease, box-shadow 0.25s ease; }
      .x-cardlink:hover .x-cardlink__img { transform: none; }
      .x-cardlink__meta { margin-top: 16px; font-size: 14px; color: var(--x-ink-2); }
      .x-cardlink__title { margin-top: 8px; font-size: 22px; line-height: 1.18; letter-spacing: -0.02em; font-weight: 600; }
      .x-cardlink:hover .x-cardlink__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
      .x-cardlink__dek { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--x-ink-2); }
      .x-cardlink__by { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
      .x-cardlink__by img { border-radius: 50%; }
      .x-moreiss { padding-block: 56px 64px; border-top: 1px solid var(--x-line); }
      .x-moreiss h2 { font: 500 12px/1 var(--x-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--x-cobalt); }
      .x-more__all { display: inline-flex; margin-top: 28px; font: 500 13px/1 var(--x-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--x-cobalt); min-height: 44px; align-items: center; text-underline-offset: 4px; }
      .x-arch-main { padding-block: 8px 72px; }
      /* legacy markdown issues */
      .x-md { padding-block: 40px 56px; font-size: 18px; line-height: 1.65; }
      .x-md h2 { margin-top: 40px; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; }
      .x-md h2:first-child { margin-top: 0; }
      .x-md h3 { margin-top: 28px; font-size: 20px; font-weight: 600; }
      .x-md p, .x-md ul, .x-md ol { margin-top: 14px; }
      .x-md li { margin-top: 6px; }
      .x-md a { color: var(--x-cobalt); text-underline-offset: 3px; }
      .x-md img { margin-top: 18px; border-radius: 16px; }
      .x-md hr { border: 0; border-top: 1px solid var(--x-line); margin: 36px 0; }
      .x-legacy-head h1 { font-size: clamp(32px, 7vw, 52px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 600; }
      .x-legacy-head p { margin-top: 16px; font-size: 18px; line-height: 1.5; opacity: 0.85; }
      .x-legacy-head time { display: block; margin-bottom: 16px; font: 400 12px/1 var(--x-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--x-lime); }
      .x-md .x-cov { margin-top: 6px; font: 400 12px/1.4 var(--x-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--x-cobalt); }
      .x-md span.x-cov { display: block; margin-top: 8px; }
      .x-cardlink__img { border: 1px solid var(--x-line); }
      .x-cards--two .x-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 40px 32px; }
      /* story pages, hubs, inline signup (2026-10-16) */
      .x-story-head h1.x-story-h1 { font-size: clamp(30px, 6.6vw, 48px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 600; margin-top: 14px; }
      .x-story-head p { margin-top: 14px; font-size: 17px; line-height: 1.5; opacity: 0.85; }
      .x-story-head time { font: 400 12px/1 var(--x-mono); letter-spacing: 0.1em; text-transform: uppercase; }
      .x-crumbs { font: 400 12px/1.4 var(--x-mono); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
      .x-crumbs a { color: inherit; text-underline-offset: 3px; }
      .x-cat--rev { color: var(--x-lime); border-color: var(--x-lime); text-decoration: none; }
      .x-cov--rev { color: inherit; opacity: 0.85; }
      .x-cov--rev::before { background: var(--x-lime); }
      .x-story > p:first-child { font-size: 20px; line-height: 1.55; }
      .x-story .x-take, .x-story .x-sowhat { margin-top: 32px; }
      .x-signup { margin-top: 36px; background: var(--x-ink); color: var(--x-paper); border-radius: 22px; padding: 26px 24px; position: relative; overflow: hidden; }
      .x-signup::after { content: ""; position: absolute; right: -56px; top: -56px; width: 112px; height: 112px; border-radius: 50%; background: var(--x-cobalt); opacity: 0.55; }
      .x-signup > * { position: relative; z-index: 1; }
      .x-signup .x-take__k { color: var(--x-lime); }
      .x-signup .x-signup__h { margin-top: 10px; font-size: clamp(20px, 5vw, 26px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; }
      .x-signup .x-signup__p { margin-top: 8px; font-size: 15px; line-height: 1.5; opacity: 0.8; }
      .x-signup .x-btn { margin-top: 16px; }
      .x-md .x-signup a.x-btn { color: var(--x-ink); text-decoration: none; }
      .x-storylink { display: inline-flex; margin-top: 12px; font: 500 13px/1 var(--x-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--x-cobalt); min-height: 32px; align-items: center; text-underline-offset: 4px; }
      .x-card--quiet .x-storylink { color: var(--x-lime); }
      .x-h a { color: inherit; text-decoration: none; }
      .x-h a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
      .x-from, .x-related { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--x-line); }
      .x-from p:not(.x-take__k) { margin-top: 10px; font-size: 18px; font-weight: 500; }
      .x-from__d { display: inline-block; font: 400 12px/1.4 var(--x-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--x-ink-2); margin-left: 6px; }
      .x-related ul { list-style: none; padding: 0; margin: 10px 0 0; }
      .x-related li { margin-top: 12px; font-size: 17px; line-height: 1.4; }
      .x-topics { margin: 48px 0 56px; }
      .x-topics ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
      .x-topics a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--x-cobalt); color: var(--x-cobalt); border-radius: 999px; font-size: 15px; font-weight: 500; text-decoration: none; }
      .x-topics a:hover { background: var(--x-cobalt); color: var(--x-paper); }
      .x-topics a span { font: 400 12px/1 var(--x-mono); opacity: 0.7; }
      .x-hub__k { margin-top: 8px; }
      .x-hublist { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
      .x-hublist a { display: block; background: #fff; border: 1px solid var(--x-line); border-radius: 20px; padding: 20px; text-decoration: none; color: var(--x-ink); transition: transform 0.25s ease, box-shadow 0.25s ease; }
      .x-hublist a:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(35,35,204,0.45); }
      .x-hublist__meta { display: block; font: 400 12px/1.3 var(--x-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--x-cobalt); }
      .x-hublist b { display: block; margin-top: 10px; font-size: clamp(19px, 4.6vw, 23px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; }
      .x-hublist__dek { display: block; margin-top: 8px; color: var(--x-ink-2); font-size: 15px; line-height: 1.5; }
      .x-issue-stories { margin-top: 8px; }
      .x-issue-stories ul { list-style: none; padding: 0; margin: 10px 0 0; }
      .x-issue-stories li { margin-top: 10px; font-size: 17px; line-height: 1.4; }
      .x-issue-stories a { color: var(--x-cobalt); text-underline-offset: 3px; }
      .x-repos { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
      .x-repo { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; background: #fff; border: 1px solid var(--x-line); border-radius: 22px; padding: 20px; }
      .x-repo--cta { display: block; background: transparent; border: 0; padding: 0; }
      .x-repo__n { font-size: clamp(40px, 10vw, 64px); line-height: 0.85; font-weight: 600; letter-spacing: -0.06em; color: var(--x-cobalt); min-width: 1.1ch; font-variant-numeric: tabular-nums; }
      .x-repo__body { min-width: 0; }
      .x-repo__h { font: 400 15px/1.3 var(--x-mono); letter-spacing: 0; overflow-wrap: anywhere; }
      .x-repo__h a { color: var(--x-ink-2); text-decoration: none; }
      .x-repo__h a:hover { text-decoration: underline; text-underline-offset: 3px; }
      .x-repo__h b { display: block; font: 600 clamp(21px, 5vw, 26px)/1.15 "Geist", system-ui, sans-serif; letter-spacing: -0.02em; color: var(--x-ink); margin-top: 2px; }
      .x-repo__what { margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--x-ink); }
      .x-repo__why, .x-repo__who { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--x-ink-2); }
      .x-repo__why span, .x-repo__who span { display: inline-block; margin-right: 6px; font: 500 11px/1 var(--x-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--x-cobalt); }
      .x-repo-more { display: inline-flex; margin-top: 18px; font: 500 13px/1 var(--x-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--x-cobalt); min-height: 32px; align-items: center; text-underline-offset: 4px; }
      .x-repo-how { padding-bottom: 24px; }
      @media (max-width: 520px) { .x-repo { grid-template-columns: 1fr; } .x-repo__n { font-size: 40px; margin-bottom: 6px; } }
      @media (max-width: 420px) { .x-topcta { flex-wrap: nowrap; gap: 6px; padding: 6px 10px; } .x-topcta__nav { gap: 0; } .x-topcta__nav a { padding: 10px 6px; font-size: 11px; letter-spacing: 0.02em; } .x-topcta .x-btn { padding: 0 12px; font-size: 13px; white-space: nowrap; } }
      /* one-step beehiiv signup (2026-10-17) */
      .x-bhform { margin-top: 16px; background: var(--x-paper); color: var(--x-ink); border-radius: 14px; padding: 8px 10px; min-height: 64px; scroll-margin: 90px; }
      .x-bhform iframe { display: block; width: 100%; max-width: 100%; border: 0; }
      .x-bhform__fb { display: none !important; margin: 4px; }
      .x-bhform.is-fb { background: transparent; padding: 0; min-height: 0; }
      .x-bhform.is-fb .x-bhform__fb { display: inline-flex !important; }
      .x-md .x-bhform a.x-btn { color: var(--x-ink); text-decoration: none; }
      .x-signup__fine { margin-top: 10px; font: 400 12px/1.5 var(--x-mono); opacity: 0.7; }
      .x-foot .x-cta--form { max-width: 520px; }
      .x-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--x-paper); color: var(--x-ink); border-top: 2px solid var(--x-ink); padding: 10px 44px 10px 12px; box-shadow: 0 -8px 24px rgba(14,14,26,0.18); }
      .x-sticky[hidden], .x-exit[hidden] { display: none; }
      .x-sticky__h { font: 600 14px/1.3 "Geist", system-ui, sans-serif; }
      .x-sticky .x-bhform { margin-top: 6px; padding: 0; min-height: 48px; background: transparent; }
      .x-sticky__x, .x-exit__x { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border: 0; background: transparent; font-size: 26px; line-height: 1; color: var(--x-ink); cursor: pointer; border-radius: 999px; }
      .x-sticky__x:hover, .x-exit__x:hover { background: rgba(14,14,26,0.08); }
      body.has-sticky { padding-bottom: 130px; }
      @media (min-width: 761px) { .x-sticky { display: none !important; } }
      .x-exit { position: fixed; inset: 0; z-index: 70; background: rgba(14,14,26,0.62); display: flex; align-items: center; justify-content: center; padding: 20px; }
      .x-exit__card { position: relative; width: min(520px, 100%); background: var(--x-paper); color: var(--x-ink); border-radius: 22px; padding: 28px 24px 20px; border-top: 6px solid var(--x-lime); }
      .x-exit__card .x-take__k { color: var(--x-cobalt); }
      .x-exit__card .x-bhform { padding: 0; }
      .x-exit__card .x-signup__fine { opacity: 0.6; }
      body.has-modal { overflow: hidden; }
      /* Built with AI (2026-10-17) */
      .x-builds { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
      .x-build { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; background: #fff; border: 1px solid var(--x-line); border-radius: 22px; padding: 20px; }
      .x-build__h { font: 600 clamp(21px, 5vw, 26px)/1.15 "Geist", system-ui, sans-serif; letter-spacing: -0.02em; }
      .x-build__h a { color: var(--x-ink); text-decoration: none; }
      .x-build__h a:hover { text-decoration: underline; text-underline-offset: 3px; }
      .x-build__what { margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--x-ink); }
      .x-build__stack { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
      .x-build__stack span:first-child { font: 500 11px/1 var(--x-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--x-cobalt); margin-right: 4px; }
      .x-stk { font: 400 12px/1 var(--x-mono); padding: 6px 9px; border-radius: 999px; background: rgba(35,35,204,0.08); color: var(--x-ink); }
      .x-build__try { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--x-ink-2); }
      .x-build__try b { display: inline-block; margin-right: 6px; font: 500 11px/1 var(--x-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--x-cobalt); }
      .x-build__try code { font: 400 13px/1.4 var(--x-mono); background: rgba(14,14,26,0.06); padding: 2px 5px; border-radius: 4px; overflow-wrap: anywhere; }
      @media (max-width: 520px) { .x-build { grid-template-columns: 1fr; } }

      /* mobile fix 2026-10-17 (Omer iPhone screenshots): one-row topbar, flat beehiiv forms. Every site change must pass a 390px screenshot check. */
      html { scroll-padding-top: 72px; }
      .x-topcta .x-btn { white-space: nowrap; flex: none; gap: 0; }
      @media (max-width: 760px) {
        .x-topcta { flex-wrap: nowrap; gap: 6px; padding: 6px 10px; min-height: 52px; max-height: 64px; }
        .x-topcta__brand { flex: none; }
        .x-topcta__nav { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; gap: 0; margin-right: 0; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
        .x-topcta__nav::-webkit-scrollbar { display: none; }
        .x-topcta__nav a { flex: none; padding: 10px 7px; font-size: 11.5px; letter-spacing: 0.03em; }
        .x-topcta .x-btn { min-height: 36px; padding: 0 12px; font-size: 13px; }
        .x-topcta__free { display: none; }
      }
      .x-bhform { background: transparent; padding: 0; min-height: 48px; border-radius: 0; }
      .x-bhform iframe { width: 100% !important; max-width: 100%; }
      .x-exit__card .x-bhform, .x-sticky .x-bhform { min-height: 48px; }
      /* hero signup above the fold (2026-10-18 funnel fix): shorter chip stage, one-line value prop, email field */
      .x-mast .x-stage { height: clamp(200px, 30vh, 300px); }
      .x-herosub { max-width: 560px; margin: 0 auto; padding: 4px 0 30px; text-align: center; }
      .x-herosub__p { font-size: clamp(16px, 4.2vw, 19px); line-height: 1.45; color: var(--x-paper); }
      .x-herosub .x-bhform { margin: 16px auto 0; max-width: 400px; padding: 0; min-height: 47px; background: transparent; text-align: left; }
      .x-herosub__fine { margin-top: 10px; font: 400 12px/1.5 var(--x-mono); letter-spacing: 0.04em; color: var(--x-paper); opacity: 0.72; }
      .x-herosub + .x-subject { border-top: 1px solid rgba(246,246,242,0.22); padding-top: 26px; }
      @media (max-width: 520px) { .x-mast .x-stage { height: 170px; } .x-tagline h1 { font-size: clamp(40px, 12vw, 56px); } .x-herosub { padding-bottom: 24px; } }

      .x-herosub--story { margin: 18px 0 0; padding: 0 0 6px; text-align: left; max-width: 560px; }
      .x-herosub--story .x-herosub__p { font-size: 16px; }
      .x-herosub--story .x-bhform { margin: 12px 0 0; }
      /* /today/ ranked list (render_today.py, 2026-10-19) */
      .x-today { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
      .x-today__item { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; background: #fff; border: 1px solid var(--x-line); border-radius: 22px; padding: 20px; scroll-margin-top: 72px; }
      .x-today__item--quiet { background: var(--x-ink); color: var(--x-paper); border-color: var(--x-ink); }
      .x-today__item--quiet .x-today__h, .x-today__item--quiet .x-today__h a { color: var(--x-paper); }
      .x-today__item--quiet .x-today__p { color: rgba(246,246,242,0.82); }
      .x-today__item--quiet .x-cat { color: var(--x-lime); border-color: var(--x-lime); }
      .x-today__item--quiet .x-cov { color: rgba(246,246,242,0.8); } .x-today__item--quiet .x-cov::before { background: var(--x-lime); }
      .x-today__item--quiet .x-today__n, .x-today__item--quiet .x-today__more { color: var(--x-lime); }
      .x-today__cta { display: block; }
      .x-today__n { font-size: clamp(36px, 9vw, 56px); line-height: 0.85; font-weight: 600; letter-spacing: -0.06em; color: var(--x-cobalt); min-width: 1.1ch; font-variant-numeric: tabular-nums; }
      .x-today__body { min-width: 0; }
      .x-today__body .x-tags { margin-top: 0; }
      .x-today__h { margin-top: 10px; font-size: clamp(19px, 4.8vw, 23px); line-height: 1.22; letter-spacing: -0.02em; font-weight: 600; color: var(--x-ink); overflow-wrap: anywhere; }
      .x-today__h--sm { font-size: clamp(17px, 4.3vw, 20px); }
      .x-today__h a { color: var(--x-ink); text-decoration: none; }
      .x-today__h a:hover { text-decoration: underline; text-underline-offset: 3px; }
      .x-today__p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--x-ink-2); }
      .x-today__more { display: inline-flex; align-items: center; min-height: 32px; margin-top: 8px; font: 500 12px/1 var(--x-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--x-cobalt); text-underline-offset: 4px; }
      .x-today__issue { margin-top: 20px; } .x-today__issue a { font: 500 13px/1 var(--x-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--x-cobalt); text-underline-offset: 4px; }
      .x-today__sublink { color: inherit; text-underline-offset: 3px; }
      @media (max-width: 520px) { .x-today__item { grid-template-columns: 1fr; padding: 18px; } .x-today__n { font-size: 34px; margin-bottom: 4px; } }
      .x-home__tag { position: static; padding: 28px 0 8px; text-align: center; }
      .x-home__tag h1 { margin: 0; font-size: clamp(40px, 12vw, 96px); line-height: 0.92; letter-spacing: -0.055em; font-weight: 600; opacity: 1; transform: none; }
      .x-home__tag h1 em { font-style: normal; color: var(--x-lime); }
      .x-home__list, .x-home__heads { margin: 0; padding-left: 20px; display: grid; gap: 12px; font-size: 17px; line-height: 1.5; }
      .x-home__heads a { color: var(--x-ink); font-weight: 600; }
      .x-home__heads .x-cat { margin-left: 6px; vertical-align: 2px; }
      .x-proof { margin: 10px 0 0; font: 400 12px/1.5 var(--x-mono); letter-spacing: 0.04em; color: var(--x-ink-2); }
      .x-proof a { color: inherit; }
      .x-howtable { overflow-x: auto; margin: 16px 0 0; }
      .x-howtable table { width: 100%; border-collapse: collapse; font: 400 14px/1.4 var(--x-mono); }
      .x-howtable th, .x-howtable td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--x-line); white-space: nowrap; }
      .x-howtable th:first-child, .x-howtable td:first-child { text-align: left; }
      .x-howtable__note { font-size: 14px; color: var(--x-ink-2); }
      .x-home__more { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px; font: 500 14px/1.4 var(--x-mono); }
      .x-join { max-width: 560px; margin: 0 auto; padding: 8px 0 40px; }
      .x-join__sample { margin: 28px 0 0; }
      .x-join__sample img { display: block; width: 100%; height: auto; border: 1px solid var(--x-line); border-radius: 10px; }
      .x-join__sample figcaption { margin-top: 10px; font: 400 12px/1.5 var(--x-mono); color: var(--x-ink-2); }
      .x-join__list { margin: 18px 0 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.5; }