:root {
  --paper: #f4f7f6;
  --ink: #0b1720;
  --muted: #55636b;
  --line: #cbd6d7;
  --navy: #102f3b;
  --signal: #0b5f78;
  --aqua: #bfe9e3;
  --danger: #b42318;
  --warn: #8a4b08;
  --ok: #16745b;
  --white: #fff;
  --shadow: 0 28px 80px rgba(17, 43, 52, 0.14);
  --display: "IBM Plex Sans", Arial, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  line-height: 1.5;
}
a {
  color: inherit;
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
}
.skip {
  position: fixed;
  left: 1rem;
  top: -5rem;
  background: #fff;
  padding: 0.7rem 1rem;
  z-index: 99;
}
.skip:focus {
  top: 1rem;
}
.shell {
  width: min(1440px, calc(100% - 48px));
  margin: auto;
}
.status-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(244, 247, 246, 0.94);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.wordmark {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: -0.04em;
  text-decoration: none;
}
.status-pip {
  width: 8px;
  height: 8px;
  background: var(--ok);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(22, 116, 91, 0.12);
}
.nav-spacer {
  flex: 1;
}
.nav-link {
  text-decoration: none;
  color: var(--muted);
  font-size: 0.9rem;
}
.lang-switch {
  display: flex;
  border: 1px solid var(--line);
}
.lang-switch button {
  border: 0;
  background: transparent;
  padding: 0.45rem 0.68rem;
  color: var(--muted);
}
.lang-switch button[aria-pressed="true"] {
  background: var(--navy);
  color: white;
}
.nav-cta {
  background: var(--ink);
  color: white;
  text-decoration: none;
  padding: 0.65rem 1rem;
}
.hero {
  min-height: calc(100vh - 66px);
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(540px, 1.18fr);
  gap: clamp(42px, 6vw, 96px);
  align-items: center;
  padding: clamp(64px, 9vh, 120px) 0;
}
.eyebrow {
  font: 600 0.73rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
}
h1 {
  font-size: clamp(3.2rem, 6.5vw, 7.6rem);
  letter-spacing: -0.07em;
  line-height: 0.82;
  margin: 1.6rem 0 1.4rem;
  max-width: 8ch;
}
.lead {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--muted);
  max-width: 47ch;
}
.proof-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 2rem 0;
}
.proof-strip span {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.45);
  padding: 0.5rem 0.7rem;
  font: 500 0.72rem var(--mono);
}
.primary-link {
  display: inline-flex;
  background: var(--signal);
  color: white;
  padding: 0.9rem 1.2rem;
  text-decoration: none;
}
.source-link {
  display: inline-flex;
  margin-left: 1rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.tool {
  background: #fefefe;
  box-shadow: var(--shadow);
  border: 1px solid #dce4e4;
  min-height: 650px;
  position: relative;
  overflow: hidden;
}
.tool:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11, 95, 120, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 95, 120, 0.045) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.tool-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--navy);
  color: white;
}
.tool-kicker {
  font: 0.68rem var(--mono);
  opacity: 0.72;
}
.tool-title {
  font-weight: 650;
}
.local-chip {
  margin-left: auto;
  background: #c7f0dd;
  color: #124d3f;
  padding: 0.3rem 0.5rem;
  font: 0.66rem var(--mono);
}
.tool-body {
  position: relative;
  padding: 24px;
}
.privacy-gate {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-left: 3px solid var(--ok);
  padding: 12px 14px;
  background: #eef8f4;
  font-size: 0.84rem;
}
.privacy-gate b {
  display: block;
}
.privacy-gate p {
  margin: 0.15rem 0 0;
  color: var(--muted);
}
.input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin: 20px 0 12px;
}
.drop {
  border: 1px dashed #8aa7ae;
  background: #f7fbfb;
  padding: 22px;
  min-height: 106px;
  display: grid;
  place-items: center;
  text-align: center;
  transition: 0.2s;
}
.drop.drag {
  border-color: var(--signal);
  background: #eaf6f5;
}
.drop input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.drop strong {
  display: block;
}
.drop small {
  color: var(--muted);
}
.posting {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: 0.7rem var(--mono);
  color: var(--muted);
}
.posting input {
  padding: 0.73rem;
  border: 1px solid var(--line);
  background: white;
}
.tool-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.btn {
  border: 1px solid var(--line);
  background: white;
  padding: 0.72rem 0.9rem;
}
.btn-dark {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.btn:focus-visible,
.nav-link:focus-visible,
a:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 3px;
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.mini-copy {
  margin: 18px 0 0;
  font: 0.69rem/1.5 var(--mono);
  color: var(--muted);
}
.result {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
}
.metric {
  padding: 13px;
  border-right: 1px solid var(--line);
}
.metric:last-child {
  border: 0;
}
.metric b {
  display: block;
  font: 650 1.35rem var(--mono);
}
.metric span {
  font-size: 0.68rem;
  color: var(--muted);
}
.issues {
  max-height: 170px;
  overflow: auto;
  margin-top: 12px;
}
.issue {
  font: 0.73rem var(--mono);
  padding: 8px 10px;
  border-left: 3px solid var(--warn);
  background: #fff8ed;
  margin-bottom: 4px;
}
.issue.block {
  border-color: var(--danger);
  background: #fff1f0;
  color: #7a1a14;
}
.issue.notice {
  border-color: var(--signal);
  background: #eff8fb;
}
.issue.empty {
  border-color: var(--ok);
  background: #eef8f4;
  color: #155b49;
}
.table-wrap {
  overflow: auto;
  margin-top: 14px;
  border: 1px solid var(--line);
  max-height: 240px;
}
table {
  border-collapse: collapse;
  width: 100%;
  font: 0.68rem var(--mono);
  background: white;
}
th,
td {
  text-align: left;
  white-space: nowrap;
  padding: 9px 10px;
  border-bottom: 1px solid #e2e9e9;
}
th {
  position: sticky;
  top: 0;
  background: #edf3f3;
}
.export-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.chapter {
  padding: clamp(90px, 12vw, 170px) 0;
  border-top: 1px solid var(--line);
}
.human-section {
  padding: clamp(80px, 10vw, 140px) 0;
  background: #e7eeec;
  border-top: 1px solid var(--line);
}
.human-intro {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(30px, 8vw, 110px);
  align-items: end;
  margin-bottom: 44px;
}
.human-intro h2 {
  font-size: clamp(2.8rem, 5.5vw, 6rem);
  line-height: 0.88;
  letter-spacing: -0.06em;
  margin: 1rem 0;
}
.human-intro p {
  color: var(--muted);
  max-width: 52ch;
}
.media-grid {
  display: grid;
  grid-template-columns: 1.55fr 0.75fr;
  gap: 18px;
  align-items: end;
}
.media-grid figure {
  margin: 0;
  background: white;
  border: 1px solid var(--line);
  padding: 10px;
}
.media-grid img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.02);
}
.media-major img {
  aspect-ratio: 16 / 9;
}
.media-minor img {
  aspect-ratio: 4 / 5;
}
.media-grid figcaption {
  padding: 10px 4px 3px;
  font: 0.68rem var(--mono);
  color: var(--muted);
}
.chapter-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(44px, 10vw, 140px);
}
.chapter h2 {
  font-size: clamp(2.5rem, 5vw, 5.5rem);
  letter-spacing: -0.055em;
  line-height: 0.92;
  margin: 1rem 0;
}
.chapter-copy {
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 58ch;
}
.policy-ledger {
  border-top: 1px solid var(--ink);
}
.policy-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.policy-row code {
  font: 700 0.75rem var(--mono);
  color: var(--signal);
}
.policy-row p {
  margin: 0;
  color: var(--muted);
}
.danger-band {
  background: var(--danger);
  color: white;
  padding: 72px 0;
}
.danger-band .chapter-grid {
  align-items: center;
}
.danger-band h2 {
  margin: 0;
  font-size: clamp(2.8rem, 6vw, 6.5rem);
  line-height: 0.86;
  letter-spacing: -0.06em;
}
.danger-list {
  font: 500 0.9rem/1.9 var(--mono);
}
.pricing {
  background: var(--navy);
  color: white;
}
.pricing .eyebrow {
  color: #8ce3d8;
}
.pricing .chapter-copy {
  color: #bad0d7;
}
.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.plan {
  padding: 34px;
  min-height: 320px;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  flex-direction: column;
}
.plan:last-child {
  border: 0;
}
.price {
  font-size: clamp(3rem, 5vw, 5.5rem);
  letter-spacing: -0.06em;
  margin: 1.4rem 0;
}
.price small {
  font-size: 0.8rem;
  letter-spacing: 0;
  color: #bad0d7;
}
.plan p {
  color: #bad0d7;
}
.plan button {
  margin-top: auto;
  background: white;
  color: var(--navy);
  border: 0;
  padding: 0.9rem 1rem;
  text-align: left;
}
.sources {
  display: grid;
  gap: 12px;
}
.source-card {
  padding: 18px;
  border: 1px solid var(--line);
  background: white;
}
.source-card b {
  display: block;
}
.source-card span {
  font-size: 0.85rem;
  color: var(--muted);
}
.attestation {
  padding: 24px;
  border: 1px solid var(--line);
  background: white;
}
.attestation:before {
  content: "DRAFT ONLY";
  font: 700 0.7rem var(--mono);
  color: var(--danger);
}
.attestation p {
  color: var(--muted);
}
.site-foot-note {
  font: 0.7rem var(--mono);
  color: var(--muted);
  padding: 24px 0;
}
site-footer.tjn-footer .tjn-lang button,
site-footer.tjn-footer .tjn-main-site small,
site-footer.tjn-footer .tjn-meta,
site-footer.tjn-footer .tjn-meta b,
site-footer.tjn-footer .tjn-bottom,
site-footer.tjn-footer .tjn-faint {
  color: #46545c !important;
}
site-footer.tjn-footer .tjn-lang button[aria-current="true"],
site-footer.tjn-footer .tjn-no {
  color: #8a3513 !important;
}
[data-lang-block="zh"] {
  display: none;
}
body[data-lang="zh"] [data-lang-block="en"] {
  display: none;
}
body[data-lang="zh"] [data-lang-block="zh"] {
  display: initial;
}
@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .human-intro {
    grid-template-columns: 1fr;
  }
  .media-grid {
    grid-template-columns: 1fr 1fr;
  }
  .tool {
    min-height: auto;
  }
  .chapter-grid {
    grid-template-columns: 1fr;
  }
  .nav-link {
    display: none;
  }
  .plans {
    grid-template-columns: 1fr;
  }
  .plan {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  }
}
@media (max-width: 620px) {
  .shell {
    width: min(100% - 24px, 1440px);
  }
  .media-grid {
    grid-template-columns: 1fr;
  }
  .nav-in {
    gap: 10px;
  }
  .hero {
    padding: 48px 0;
  }
  .tool-body {
    padding: 16px;
  }
  .input-row {
    grid-template-columns: 1fr;
  }
  .summary {
    grid-template-columns: 1fr 1fr;
  }
  .metric:nth-child(2) {
    border-right: 0;
  }
  .metric:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
  .policy-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .plans {
    display: block;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
@media print {
  .status-nav,
  .hero-copy,
  .tool-head,
  .input-row,
  .tool-actions,
  .export-row,
  .pricing,
  .danger-band,
  site-footer {
    display: none !important;
  }
  .shell {
    width: 100%;
  }
  .hero {
    display: block;
    min-height: auto;
    padding: 0;
  }
  .tool {
    box-shadow: none;
    border: 0;
  }
  .tool:before {
    display: none;
  }
  .tool-body {
    padding: 0;
  }
  .result {
    border: 0;
  }
  .chapter {
    padding: 30px 0;
  }
  .chapter-grid {
    display: block;
  }
  .issues {
    max-height: none;
  }
  .table-wrap {
    max-height: none;
    overflow: visible;
  }
  body {
    background: white;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   TJ hero balance fix — shouyi 2026-08-18
   Root cause: .hero was a grid with NO max-width, so on wide screens it grew
   to the full viewport while .hero-copy stayed capped (720–760px). The right
   column also carried a larger fr (1.17–1.18), so the wider the screen the
   further the whole composition leaned right. Appended (not edited in place)
   so the original cascade is preserved and this is easy to roll back.
   ───────────────────────────────────────────────────────────────────────── */
.hero {
  max-width: 1520px;
  margin-inline: auto;
}
@media (min-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
}
@media (min-width: 1800px) {
  /* stop the visual from swelling past a comfortable reading rhythm */
  .hero { max-width: 1560px; }
}