/* 60-30-10: cool off-white and white (60), deep navy for text and structure (30), one vivid teal for the main actions only (10) */
  :root {
    --bg: #f4f6f9; --panel: #ffffff; --line: #dfe4eb;
    --deep: #14213d; --deep-2: #1f2f52; --ink: #14213d; --muted: #5b6577; --on-deep: #ffffff; --on-deep-muted: #c3cad8;
    --tint: #e9edf4; --struct: #14213d;
    --accent: #1fc8a9; --accent-hover: #17b094; --accent-ink: #0c1830;
    --warn: #a23b2a; --warn-soft: #fbe9e5;
    --radius: 12px;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0e1526; --panel: #16203a; --line: #26324f;
      --deep: #070c18; --deep-2: #111a30; --ink: #eef1f6; --muted: #9ea8bc; --on-deep: #ffffff; --on-deep-muted: #a9b3c7;
      --tint: #1e2a48; --struct: #3d5288;
      --warn: #f08a76; --warn-soft: #3a1f1a;
    }
  }
  * { box-sizing: border-box; }
  body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.5; }

  .hero { background: var(--deep); color: var(--on-deep); padding-bottom: 80px; }
  header { width: 100%; max-width: 1080px; margin: 0 auto; padding: 40px 20px 0; }
  h1 { font-size: 32px; margin: 0 0 6px; letter-spacing: -0.015em; }
  .sub { color: var(--on-deep-muted); margin: 0; font-size: 17px; max-width: 640px; }
  .badge { display: inline-flex; gap: 6px; align-items: center; background: rgba(255,255,255,.1); color: var(--on-deep); font-weight: 600; font-size: 13px; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
  main { width: 100%; max-width: 1080px; margin: -48px auto 0; padding: 0 20px 48px; }

  .drop { border: 2px dashed var(--line); border-radius: var(--radius); background: var(--panel); padding: 52px 20px; text-align: center; box-shadow: 0 10px 30px rgba(20,33,61,.08); transition: border-color .15s, background .15s; }
  .drop.over { border-color: var(--deep-2); background: var(--tint); }
  .drop p { margin: 8px 0; color: var(--muted); }
  .drop strong { color: var(--ink); font-size: 19px; }

  button { font: inherit; font-size: 14px; font-weight: 500; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 8px 14px; cursor: pointer; }
  button:hover { border-color: var(--ink); }
  button:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; padding: 10px 18px; font-size: 15px; }
  button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  button.primary:disabled { background: var(--line); border-color: var(--line); color: var(--muted); cursor: default; }
  button.chip { border-radius: 999px; padding: 5px 12px; font-size: 13px; }
  button.chip.on { background: var(--struct); border-color: var(--struct); color: var(--on-deep); }
  button:disabled:not(.primary) { opacity: .45; cursor: default; }

  .work { display: none; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
  .work.show { display: grid; }
  @media (max-width: 820px) { .work.show { grid-template-columns: 1fr; } }
  .side { position: sticky; top: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 10px 30px rgba(20,33,61,.08); }
  @media (max-width: 820px) { .side { position: static; } }
  .side h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--tint); }
  .row { display: flex; gap: 8px; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  input[type=text], input[type=password] { font: inherit; font-size: 14px; flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
  .hint { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
  .count { font-size: 14px; }
  .count b { font-size: 20px; }
  .status { font-size: 14px; border-radius: 8px; padding: 10px 12px; display: none; }
  .status.show { display: block; }
  .status.ok { background: var(--tint); color: var(--ink); }
  .status.err { background: var(--warn-soft); color: var(--warn); }
  .file { font-size: 14px; word-break: break-all; }

  .pages { display: flex; flex-direction: column; gap: 18px; align-items: center; }
  .page { position: relative; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 6px 20px rgba(20,33,61,.08); cursor: crosshair; user-select: none; touch-action: none; max-width: 100%; }
  .page canvas { display: block; width: 100%; height: auto; }
  .page .label { position: absolute; top: -22px; left: 0; font-size: 12px; color: #8b96ab; }
  .box { position: absolute; background: rgba(0,0,0,.82); box-shadow: 0 0 0 1.5px #ffffff, 0 0 0 3px var(--deep); cursor: pointer; }
  .box:hover { background: rgba(0,0,0,.6); }
  .box.draft { background: rgba(20,33,61,.18); box-shadow: none; outline: 2px dashed var(--deep); cursor: crosshair; }

  .pw { display: none; margin-top: 16px; gap: 8px; justify-content: center; }
  .pw.show { display: flex; }

  body { display: flex; flex-direction: column; min-height: 100vh; }
  .band { flex: 1; display: flex; flex-direction: column; }
  section.info { max-width: 1080px; width: 100%; margin: 0 auto; padding: 32px 20px 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  @media (max-width: 820px) { section.info { grid-template-columns: 1fr; } }
  .howto, .faq { width: 100%; max-width: 1080px; margin: 0 auto; padding: 8px 20px 0; }
  .howto h2, .faq h2 { font-size: 24px; margin: 8px 0 18px; letter-spacing: -0.01em; }
  .steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
  @media (max-width: 980px) { .steps { grid-template-columns: 1fr; } }
  .steps li { display: flex; flex-direction: column; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; font-size: 15px; }
  .steps li::before { counter-increment: step; content: counter(step); width: 30px; height: 30px; border-radius: 50%; background: var(--struct); color: var(--on-deep); font-weight: 700; font-size: 14px; display: grid; place-items: center; }
  @media (max-width: 980px) { .steps li { flex-direction: row; align-items: flex-start; } .steps li::before { flex: none; } }
  .steps b { display: block; margin-bottom: 4px; }
  .steps span { color: var(--muted); font-size: 14px; }
  .faq { padding-bottom: 48px; }
  .faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; }
  .faq summary { cursor: pointer; padding: 14px 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--struct); }
  .faq details[open] summary::after { content: "–"; }
  .faq details p { margin: 0; padding: 0 16px 16px; color: var(--muted); font-size: 15px; }

  .card { background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--struct); border-radius: var(--radius); padding: 18px; }
  .card h3 { margin: 0 0 6px; font-size: 17px; color: var(--ink); }
  .card p { margin: 0; color: var(--muted); font-size: 14px; }
  .foot { background: var(--deep); margin-top: auto; }
  footer { max-width: 1080px; margin: 0 auto; padding: 20px; color: var(--on-deep-muted); font-size: 13px; }
  .topbar { width: 100%; max-width: 1080px; margin: 0 auto; padding: 18px 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--on-deep); text-decoration: none; font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
  .links { display: flex; gap: 18px; }
  .links a { color: var(--on-deep-muted); text-decoration: none; font-size: 14px; font-weight: 500; }
  .links a:hover { color: var(--on-deep); }
  @media (max-width: 560px) { .links { display: none; } }
  .badge svg { margin-right: 2px; }
  .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
  .cta { display: inline-block; text-decoration: none; font-weight: 600; font-size: 15px; padding: 11px 18px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); }
  .cta:hover { background: var(--accent-hover); }
  .cta.ghost { background: transparent; color: var(--on-deep); border: 1px solid rgba(255,255,255,.35); }
  .cta.ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }
  .tool { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; box-shadow: 0 10px 30px rgba(20,33,61,.08); scroll-margin-top: 16px; }
  .tool-head { display: flex; gap: 16px; align-items: flex-start; }
  .tool-head svg { flex: none; }
  .tool-head h2 { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.01em; }
  .tool-head p { margin: 0; color: var(--muted); }
  .points { list-style: none; padding: 0; margin: 18px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  @media (max-width: 820px) { .points { grid-template-columns: 1fr; } }
  .points li { font-size: 14px; color: var(--muted); padding-left: 26px; position: relative; }
  .points li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--tint); box-shadow: inset 0 0 0 5px var(--struct); }
  .points b { color: var(--ink); }
  .soon { display: flex; gap: 12px; align-items: center; background: var(--bg); border: 1px dashed var(--line); border-radius: 10px; padding: 12px 14px; font-size: 14px; color: var(--muted); }
  .pill { flex: none; background: var(--struct); color: var(--on-deep); font-weight: 600; font-size: 12px; padding: 3px 10px; border-radius: 999px; }
  #redact .drop { box-shadow: none; }
  html { scroll-behavior: smooth; }
  [hidden] { display: none !important; }
  .steps.four { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 980px) { .steps.four { grid-template-columns: 1fr; } }
  #how-to-redact { padding-top: 28px; }
  .result { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
  .result-top .file { font-size: 14px; color: var(--muted); }
  .verdict { border-radius: 10px; padding: 12px 14px; font-weight: 600; font-size: 15px; }
  .verdict.ok { background: var(--tint); color: var(--ink); border-left: 4px solid var(--accent); border-radius: 0; }
  .verdict.warn { background: var(--warn-soft); color: var(--warn); border-left: 4px solid var(--warn); border-radius: 0; }
  .verdict.info { background: var(--bg); color: var(--ink); border-left: 4px solid var(--struct); border-radius: 0; }
  .stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
  @media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
  .stats div { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
  .stats span { display: block; font-size: 12px; color: var(--muted); }
  .stats b { font-size: 16px; font-variant-numeric: tabular-nums; }
  .notes { margin: 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
  .actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; max-height: 560px; overflow-y: auto; }
  .table-wrap table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  .table-wrap caption { caption-side: bottom; padding: 10px; font-size: 13px; color: var(--muted); }
  .table-wrap th { position: sticky; top: 0; background: var(--panel); text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px; border-bottom: 1px solid var(--line); }
  .table-wrap td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
  .table-wrap .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .table-wrap td:first-child { white-space: nowrap; }
  .table-wrap tr.bad td { background: var(--warn-soft); }
  .table-wrap .chk { text-align: left; width: 230px; color: var(--accent-hover); font-weight: 700; }
  .table-wrap tr.bad .chk { color: var(--warn); text-align: left; }
  .table-wrap td.num .calc { color: var(--muted); font-style: italic; }
  .table-wrap .chk small { display: block; font-weight: 500; font-size: 12px; white-space: normal; min-width: 180px; }
  .extra { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .extra:empty { display: none; }
  .report { text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px; font-size: 14px; color: var(--muted); width: 100%; }
  .report p { margin: 0 0 10px; }
  .report b { color: var(--ink); }
  .report .actions { align-items: center; }
  .report .rmsg { font-size: 13px; }
  .report summary { cursor: pointer; margin-top: 10px; font-size: 13px; }
  .report pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px; max-height: 260px; overflow: auto; }
  .points li { display: flex; gap: 10px; padding-left: 0 !important; }
  .points li::before { display: none !important; }
  .points .ic, .use .ic { flex: none; color: var(--struct); }
  .points .ic { margin-top: 1px; }
  .uses { width: 100%; max-width: 1080px; margin: 0 auto; padding: 8px 20px 12px; }
  .uses h2 { font-size: 24px; margin: 8px 0 16px; letter-spacing: -0.01em; }
  .uses h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 10px; }
  .uses-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  @media (max-width: 820px) { .uses-grid { grid-template-columns: 1fr; } }
  .use { display: flex; gap: 12px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
  .use .ic { width: 38px; height: 38px; padding: 8px; background: var(--tint); border-radius: 9px; }
  .use b { display: block; font-size: 15px; }
  .use p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
  .uses > .hint { margin-top: 4px; }
  .sr { position: absolute; left: -9999px; }

  /* ---------- site structure and journeys ---------- */
  body.j-convert { --accent: #1fc8a9; --accent-hover: #17b094; --accent-ink: #0c1830; --journey: #1fc8a9; --journey-ink: #0c1830; }
  body.j-redact  { --accent: #6d5ef5; --accent-hover: #5b4be6; --accent-ink: #ffffff; --journey: #6d5ef5; --journey-ink: #ffffff; }
  @media (prefers-color-scheme: dark) {
    body.j-redact { --accent: #8f84ff; --accent-hover: #a39aff; --accent-ink: #0c1030; --journey: #8f84ff; --journey-ink: #0c1030; }
  }
  body.j-convert .hero, body.j-redact .hero { border-bottom: 5px solid var(--journey); }
  body.j-redact .journey { color: #b3abff; }
  .journey { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--journey); margin-bottom: 10px; }
  .journey svg { width: 26px; height: 26px; }
  .topbar .links a[aria-current="page"] { color: var(--on-deep); border-bottom: 2px solid var(--journey, #1fc8a9); padding-bottom: 2px; }
  .tool-head svg rect:first-child { fill: var(--tint); }
  .use .ic { color: var(--journey, var(--struct)); }
  .points .ic { color: var(--journey, var(--struct)); }
  .steps li::before { background: var(--journey, var(--struct)) !important; color: var(--journey-ink, var(--on-deep)) !important; }
  .card { border-top-color: var(--journey, var(--struct)) !important; }
  .btn-link { display: inline-block; background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; padding: 10px 18px; border-radius: 8px; }
  .btn-link:hover { background: var(--accent-hover); }

  /* hub chooser */
  .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  @media (max-width: 820px) { .choices { grid-template-columns: 1fr; } }
  .choice { --c: #1fc8a9; --ci: #0c1830; --ct: #0b7a66; background: var(--panel); border: 1px solid var(--line); border-top: 6px solid var(--c); border-radius: var(--radius);
    padding: 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 10px 30px rgba(20,33,61,.08); }
  .choice.redact { --c: #6d5ef5; --ci: #ffffff; --ct: #5a4be6; }
  @media (prefers-color-scheme: dark) { .choice { --ct: #4fe0c2; } .choice.redact { --ct: #b3abff; } }
  @media (prefers-color-scheme: dark) { .choice.redact { --c: #8f84ff; --ci: #0c1030; } }
  .choice .top { display: flex; gap: 14px; align-items: center; }
  .choice .top svg { width: 56px; height: 56px; flex: none; }
  .choice h2 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
  .choice .tag { font-size: 13px; font-weight: 700; color: var(--ct); text-transform: uppercase; letter-spacing: .05em; }
  .choice ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
  .choice li { display: flex; gap: 10px; font-size: 15px; color: var(--muted); }
  .choice li .ic { color: var(--c); flex: none; }
  .choice li b { color: var(--ink); }
  .choice .go { margin-top: auto; align-self: flex-start; background: var(--c); color: var(--ci); font-weight: 700; text-decoration: none; padding: 12px 20px; border-radius: 9px; }
  .choice .go:hover { filter: brightness(.95); }
  .uses .col-convert .ic { color: #1fc8a9; } .uses .col-redact .ic { color: #6d5ef5; }
  @media (prefers-color-scheme: dark) { .uses .col-redact .ic { color: #8f84ff; } }
  .uses-grid h3 a { color: inherit; text-decoration: none; } .uses-grid h3 a:hover { text-decoration: underline; }

  .uses-grid.single { display: block; }
  .uses-grid.single > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .uses-grid.single .use { margin-bottom: 0; }
  @media (max-width: 820px) { .uses-grid.single > div { grid-template-columns: 1fr; } }
  /* cross-link */
  .next { width: 100%; max-width: 1080px; margin: 0 auto; padding: 8px 20px 40px; }
  .next a { display: flex; gap: 14px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--other); border-radius: 0;
    padding: 16px 18px; text-decoration: none; color: var(--ink); }
  .next a:hover { border-color: var(--other); }
  .next svg { width: 44px; height: 44px; flex: none; }
  .next b { display: block; font-size: 16px; }
  .next span { color: var(--muted); font-size: 14px; }
  .next .arrow { margin-left: auto; font-size: 22px; color: var(--other); }
  .tested { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: var(--on-deep-muted); font-size: 15px; }
  .tested .ic { color: var(--on-deep); flex: none; }
  .proof { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; max-width: 680px; }
  .proof li { display: flex; gap: 10px; color: var(--on-deep-muted); font-size: 15px; line-height: 1.45; }
  .proof b { color: var(--on-deep); }
  .proof .ic { flex: none; margin-top: 1px; color: var(--journey, var(--on-deep)); }
  /* phone menu: show the two tool links on a second row */
  @media (max-width: 560px) {
    .topbar { flex-wrap: wrap; gap: 8px 16px; }
    .topbar .links { display: flex; width: 100%; gap: 18px; }
    .topbar .links a { font-size: 13px; }
  }
  /* converter example: PDF in, checked rows out */
  header.with-demo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 36px; align-items: center; }
  @media (max-width: 900px) { header.with-demo { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
  .demo { margin: 0; position: relative; }
  .demo .pdf, .demo .sheet { background: var(--panel); color: var(--ink); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: 12px; }
  .demo .pdf { width: 62%; padding: 12px 14px; }
  .demo .pdf .bank { font-weight: 700; font-size: 13px; }
  .demo .pdf .meta { color: var(--muted); font-size: 11px; margin-bottom: 6px; }
  .demo .pdf .ln { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); border-top: 1px solid var(--line); padding: 3px 0; }
  .demo .arrow { display: flex; align-items: center; gap: 6px; color: var(--journey); font-weight: 600; font-size: 12px; margin: 8px 0 8px 20%; }
  .demo .sheet { margin-left: 4%; overflow: hidden; }
  .demo .sheet .bar { display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; background: var(--tint); font-size: 11px; color: var(--muted); }
  .demo .sheet .bar b { color: var(--ink); }
  .demo table { width: 100%; border-collapse: collapse; }
  .demo th, .demo td { padding: 5px 6px; text-align: left; border-top: 1px solid var(--line); white-space: nowrap; }
  .demo th:first-child, .demo td:first-child { padding-left: 12px; }
  .demo .desc { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
  .demo th { font-size: 11px; color: var(--muted); font-weight: 600; }
  .demo .n { text-align: right; font-variant-numeric: tabular-nums; }
  .demo .ok { color: #13856f; font-weight: 700; text-align: center; }
  .demo tr.flag td { background: var(--warn-soft); }
  .demo tr.flag .ok { color: var(--warn); }
  .demo .flagnote td { background: var(--warn-soft); color: var(--warn); font-size: 11px; white-space: normal; border-top: 0; padding-top: 0; }
  .demo .sumline { padding: 7px 12px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
  .demo figcaption { margin-top: 10px; font-size: 12px; color: var(--on-deep-muted); }
  @media (prefers-color-scheme: dark) { .demo .ok { color: #4fe0c2; } }
  @media (min-width: 901px) and (max-width: 1140px) { .demo .dt { display: none; } .demo .desc { max-width: 120px; } }
  @media (max-width: 560px) { .demo .pdf { width: 85%; } .demo .sheet { margin-left: 0; } .demo .dt { display: none; } .demo .desc { max-width: 96px; } .demo .flagnote td { padding-left: 12px; } }
  footer .flinks { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 8px; }
  footer .flinks a { color: var(--on-deep); text-decoration: none; font-weight: 600; }
  footer .flinks a:hover { text-decoration: underline; }