/* Hammer troubleshooting page. Scoped to .jma-ts so nothing leaks, and built on
   the buyer-guide CSS variables rather than a new palette or framework. */
.jma-ts { --ts-surf:#fff; --ts-bg:#FBFCFB; --ts-line: var(--jg-border,#E2E6E3); --ts-ink: var(--jg-ink,#141715);
  --ts-mut: var(--jg-muted,#4A4F4B); --ts-g: var(--jg-accent,#20842D); --ts-gd:#186A23;
  --ts-gt:#F1F8F2; --ts-tile:#EAF4EC; --ts-bt:#CFE3D2; --ts-code:#0E2412;
  --ts-warnbg:#FFFBEA; --ts-dangbg:#FDF1F2; color: var(--ts-ink); }
.jma-ts h2, .jma-ts h3 { line-height: 1.1; margin: 0; }
.jma-ts h2 { font-size: clamp(24px,4.4vw,34px); font-weight: 800; text-transform: uppercase; margin: 0 0 6px; }
.jma-ts h3 { font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.jma-ts p { margin: 0 0 12px; }
.jma-ts__hero { background: var(--ts-code); color: #fff; padding: 44px 0 40px; border-bottom: 4px solid var(--ts-g); }
.jma-ts__hero h1 { margin: 10px 0 12px; color: #fff; font-size: clamp(34px,7vw,56px); font-weight: 800; text-transform: uppercase; line-height: 1.05; }
.jma-ts__eyebrow { font-size: 12px; letter-spacing: 2.6px; text-transform: uppercase; color: #7BD389; font-weight: 700; }
.jma-ts__hero p { color: #D5E6D8; max-width: 52ch; }
.jma-ts__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.jma-ts__btn { display: inline-flex; align-items: center; gap: 8px; background: var(--ts-g); color: #fff;
  text-decoration: none; font-weight: 700; padding: 12px 18px; border-radius: 8px; border: 1px solid transparent; min-height: 44px; }
.jma-ts__btn:hover { color: #fff; filter: brightness(1.08); }
.jma-ts__btn--ghost { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.jma-ts__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.jma-ts section { padding: 34px 0; border-bottom: 1px solid var(--ts-line); }
.jma-ts__lede { color: var(--ts-mut); max-width: 62ch; }
.jma-ts__tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ts-gd); background: var(--ts-tile); padding: 4px 9px; border-radius: 99px; margin-bottom: 10px; }
.jma-ts__checks { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.jma-ts__checks li { background: var(--ts-surf); border: 1px solid var(--ts-line); border-radius: 10px; padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; }
.jma-ts__checks input { width: 22px; height: 22px; flex: none; accent-color: var(--ts-g); margin-top: 2px; }
.jma-ts__checks label { display: block; cursor: pointer; min-height: 44px; }
.jma-ts__checks b { display: block; font-weight: 700; }
.jma-ts__checks span { color: var(--ts-mut); font-size: 14.5px; }
.jma-ts__checks li:has(input:checked) { background: var(--ts-gt); border-color: var(--ts-bt); }
.jma-ts__checks li:has(input:checked) b { text-decoration: line-through; text-decoration-color: var(--ts-bt); }
.jma-ts__pbar { height: 8px; border-radius: 99px; background: var(--ts-line); margin-top: 14px; overflow: hidden; }
.jma-ts__pbar i { display: block; height: 100%; width: 0; background: var(--ts-g); transition: width .25s; }
.jma-ts__pnote { font-size: 14px; color: var(--ts-mut); margin-top: 8px; }
.jma-ts details { background: var(--ts-surf); border: 1px solid var(--ts-line); border-radius: 12px; margin: 10px 0; overflow: hidden; }
.jma-ts details[open] { border-color: var(--ts-bt); }
.jma-ts summary { cursor: pointer; list-style: none; padding: 16px; display: flex; gap: 12px; align-items: center; font-weight: 700; min-height: 44px; }
.jma-ts summary::-webkit-details-marker { display: none; }
.jma-ts summary .n { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--ts-g); color: #fff; font-weight: 700; font-size: 14px; line-height: 30px; text-align: center; }
.jma-ts summary .t { flex: 1; font-size: 18px; }
.jma-ts summary .pm { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--ts-line); position: relative; }
.jma-ts summary .pm:before, .jma-ts summary .pm:after { content: ""; position: absolute; background: var(--ts-g); left: 50%; top: 50%; transform: translate(-50%,-50%); }
.jma-ts summary .pm:before { width: 12px; height: 2px; }
.jma-ts summary .pm:after { width: 2px; height: 12px; transition: opacity .2s; }
.jma-ts details[open] summary .pm:after { opacity: 0; }
.jma-ts__body { padding: 0 16px 16px; }
.jma-ts__steps { counter-reset: s; list-style: none; padding: 0; margin: 8px 0 0; }
.jma-ts__steps li { counter-increment: s; position: relative; padding: 0 0 12px 38px; }
.jma-ts__steps li:before { content: counter(s); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 7px; background: var(--ts-tile); color: var(--ts-gd); font-weight: 700; font-size: 13px; line-height: 26px; text-align: center; }
.jma-ts__note { border-radius: 10px; padding: 12px 14px; font-size: 14.5px; margin: 12px 0 0; border: 1px solid var(--ts-line); background: var(--ts-surf); }
.jma-ts__note--warn { background: var(--ts-warnbg); border-color: #E3C34A; }
.jma-ts__note--dang { background: var(--ts-dangbg); border-color: #E8A3AC; }
.jma-ts__note b { display: block; margin-bottom: 2px; }
.jma-ts__tw { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--ts-line); border-radius: 12px; background: var(--ts-surf); margin-top: 14px; }
.jma-ts table { border-collapse: collapse; width: 100%; font-size: 14.5px; min-width: 520px; }
.jma-ts th, .jma-ts td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ts-line); vertical-align: top; }
.jma-ts thead th { background: var(--ts-code); color: #fff; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; }
.jma-ts tbody th { font-weight: 700; white-space: nowrap; }
.jma-ts tbody tr:last-child td, .jma-ts tbody tr:last-child th { border-bottom: 0; }
.jma-ts td { font-variant-numeric: tabular-nums; }
.jma-ts__cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); margin-top: 14px; }
.jma-ts__card { background: var(--ts-gt); border: 1px solid var(--ts-bt); border-radius: 12px; padding: 14px; }
.jma-ts__card h3 { margin-bottom: 6px; font-size: 16px; }
.jma-ts__card p { margin: 0; font-size: 14.5px; color: var(--ts-mut); }
.jma-ts__card p strong { color: var(--ts-ink); }
.jma-ts__send { counter-reset: k; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); list-style: none; padding: 0; margin: 14px 0 0; }
.jma-ts__send li { counter-increment: k; background: var(--ts-surf); border: 1px solid var(--ts-line); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; }
.jma-ts__send li:before { content: counter(k); display: block; font-weight: 800; font-size: 22px; line-height: 1; color: var(--ts-gd); margin-bottom: 4px; }
.jma-ts__cta { background: linear-gradient(100deg,#1B6F26,#20842D); color: #fff; border-radius: 16px; padding: 24px; margin-top: 8px; }
.jma-ts__cta h2 { color: #fff; }
.jma-ts__cta p { color: #DCEFDF; max-width: 52ch; }
.jma-ts__cta .jma-ts__btn { background: #fff; color: #14401B; }
.jma-ts__foot { padding: 28px 0 60px; color: var(--ts-mut); font-size: 14px; }
@media (max-width: 520px) { .jma-ts__hero { padding: 32px 0; } .jma-ts section { padding: 26px 0; } }

/* Cowork review 2026-09-22 */
/* 1. breathing room under the Caution / Notice boxes - the "4 · Still nothing"
      heading was sitting tight against the caution box. */
.jma-ts__note { margin-bottom: 22px; }
.jma-ts__note + h3 { margin-top: 4px; }
/* 2. the page now uses the theme .container (max 1422px) like the other guide
      pages; keep the reading column comfortable inside it. */
.jma-ts__hero p, .jma-ts__lede { max-width: 62ch; }
.jma-ts .jma-ts__checks, .jma-ts details, .jma-ts__steps { max-width: 1000px; }
.jma-ts__foot { max-width: 92ch; }