.ztd-page { font-family:var(--jd-sans); background:transparent; color:var(--jd-ink); }

/* hero — the site-wide .jdh-backdrop (same as the home page) shows through; no page-level fills (owner 2026-10-16) */
.ztd-hero { position:relative; padding:56px 20px 40px; text-align:center; background:transparent; }
.ztd-h1 { font-family:var(--jd-serif); font-weight:300; font-size:57px; line-height:64px; letter-spacing:-1px; color:var(--jd-ink);
  margin:0 auto; max-width:920px; text-wrap:balance; }
.ztd-accent { font-style:italic; color:var(--jd-teal); }
.ztd-sub { font-size:18px; line-height:28px; color:var(--jd-body); margin:18px auto 36px; max-width:620px; text-wrap:pretty; }
.ztd-underbar { display:flex; align-items:center; justify-content:center; gap:10px 28px; flex-wrap:wrap; margin-top:22px; font-size:14px; color:var(--jd-muted); }
.ztd-engine { font-weight:500; color:var(--jd-body); } /* fact chips under the tool */

/* generic section */
.ztd-sec { max-width:1176px; margin:0 auto; padding:88px 24px; }
.ztd-sec-tint { max-width:none; background:transparent; }
.ztd-sec-tint > * { max-width:1128px; margin-left:auto; margin-right:auto; }
.ztd-sec-head { text-align:center; margin-bottom:48px; }
.ztd-sec-title { font-family:var(--jd-serif); font-weight:300; font-size:48px; line-height:58px; letter-spacing:-1px; color:var(--jd-ink);
  margin:0 auto; max-width:820px; text-wrap:balance; }
.ztd-sec-sub { font-size:18px; line-height:30px; color:var(--jd-body); margin:16px auto 0; max-width:660px; text-wrap:pretty; }

.ztd-grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.ztd-grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
/* five cards: 3 + 2 centred rows (five columns left ~200 px of text per card) */
.ztd-grid-5 { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.ztd-grid-5 > * { flex:0 1 calc((100% - 36px) / 3); min-width:0; }

/* cards — the /tools card language: frosted white, hairline border, soft lift on hover */
.ztd-fcard, .ztd-scard, .ztd-who, .ztd-textcard { background:rgba(255,255,255,.78); border:1px solid rgba(230,232,238,.9); border-radius:22px;
  box-shadow:0 12px 30px rgba(24,27,41,.04); transition:box-shadow .2s ease, transform .2s var(--jd-ease), border-color .2s ease; }
.ztd-fcard:hover, .ztd-scard:hover, .ztd-who:hover, .ztd-textcard:hover { transform:translateY(-2px); border-color:rgba(46,116,131,.35); box-shadow:0 18px 36px rgba(24,27,41,.08); }
.ztd-fcard { padding:24px; }
.ztd-illo-wrap { background:linear-gradient(180deg,#F5F8FD,#EEF3FA); border-radius:16px; padding:18px; margin-bottom:22px; }
.ztd-illo { width:100%; height:auto; display:block; }
.ztd-icon-chip { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:#E8F4F3; color:var(--jd-teal-deep); margin-bottom:18px; }
.ztd-fcard h3, .ztd-scard h3 { font-size:18px; line-height:25px; font-weight:600; letter-spacing:-.1px; color:var(--jd-ink); margin:0 0 8px; }
.ztd-fcard p, .ztd-scard p { font-size:15px; line-height:24px; color:var(--jd-body); margin:0; }

.ztd-textcard { position:relative; padding:26px 24px 24px; }
.ztd-num { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:1px solid rgba(46,116,131,.3);
  color:var(--jd-teal-deep); font-family:var(--jd-serif); font-size:18px; font-weight:400; margin-bottom:16px; }
.ztd-textcard p { font-size:15px; line-height:25px; color:var(--jd-body); margin:0; }

.ztd-split { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.ztd-split-visual { display:flex; justify-content:center; }
.ztd-mock { width:100%; max-width:380px; background:#fff; border:1px solid rgba(24,27,41,.06); border-radius:22px; padding:24px;
  box-shadow:0 40px 90px -50px rgba(24,27,41,.45), 0 2px 8px rgba(24,27,41,.04); }
.ztd-mock-row { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--jd-ai-red-text); margin-bottom:16px; }
.ztd-dot { width:10px; height:10px; border-radius:50%; } .ztd-dot.r { background:var(--jd-ai-red); }
.ztd-mock-line { height:10px; border-radius:5px; background:#EEF0F3; margin-bottom:12px; width:100%; }
.ztd-mock-line.hl { background:var(--jd-ai-red-bg); }
.ztd-mock-btn { display:inline-block; align-self:flex-start; margin-top:8px; background:var(--jd-teal-deep); color:#fff; border:none; border-radius:100px; padding:10px 20px; font-size:14px; font-weight:600; }
.ztd-split-body .ztd-sec-title { text-align:left; margin:0 0 20px; }
.ztd-lead { font-size:17px; line-height:28px; color:var(--jd-body); margin:0 0 16px; }
.ztd-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.ztd-list li { display:flex; gap:12px; font-size:16px; line-height:25px; color:var(--jd-body); }
.ztd-list strong { color:var(--jd-ink); font-weight:600; }
.ztd-check { flex:none; width:22px; height:22px; margin-top:2px; border-radius:50%; background:#E8F4F3; color:var(--jd-teal-deep); display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }

.ztd-prose { max-width:760px; margin:0 auto; }
.ztd-prose p { font-size:17px; line-height:29px; color:var(--jd-body); margin:0 0 18px; text-align:center; text-wrap:pretty; }

.ztd-scard { padding:24px; }

.ztd-table-wrap { overflow-x:auto; border-radius:22px; }
.ztd-table { width:100%; border-collapse:separate; border-spacing:0; background:rgba(255,255,255,.86); border:1px solid rgba(230,232,238,.9); border-radius:22px; overflow:hidden; }
.ztd-table th, .ztd-table td { padding:18px 22px; text-align:left; vertical-align:top; font-size:15px; line-height:24px; }
.ztd-table thead :is(th,td) { border-top:0; background:#F5F8FA; font-size:15px; font-weight:600; color:var(--jd-ink); }
.ztd-table tbody th { font-weight:600; color:var(--jd-ink); width:180px; background:rgba(245,248,250,.6); }
.ztd-table td { color:var(--jd-body); border-top:1px solid var(--jd-line); }
.ztd-table tbody th { border-top:1px solid var(--jd-line); }
.ztd-table tbody tr:hover td { background:rgba(232,244,243,.35); }
.ztd-table-foot { text-align:center; font-size:15px; color:var(--jd-muted); margin:22px auto 0; max-width:720px; line-height:24px; }

.ztd-who { padding:24px; }
.ztd-who-head { display:flex; align-items:center; gap:12px; font-size:18px; line-height:25px; font-weight:600; color:var(--jd-ink); margin-bottom:12px; }
.ztd-emoji { flex:none; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:#F3F6FA; font-size:20px; line-height:1; }
.ztd-who p { font-size:15px; line-height:24px; color:var(--jd-body); margin:0; }

/* FAQ — native details/summary, same rhythm as the home FAQ */
.ztd-faq { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.ztd-faq-item { background:rgba(255,255,255,.78); border:1px solid rgba(230,232,238,.9); border-radius:18px; padding:0 22px; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.ztd-faq-item summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; font-size:17px; line-height:25px; font-weight:500; color:var(--jd-ink); }
.ztd-faq-item summary::-webkit-details-marker { display:none; }
.ztd-faq-item summary:focus-visible { outline:2px solid var(--jd-teal); outline-offset:4px; border-radius:8px; }
.ztd-faq-icon { flex:none; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:#E8F4F3;
  font-size:20px; font-weight:400; line-height:1; color:var(--jd-teal-deep); transition:transform .25s var(--jd-ease), background .2s ease; }
.ztd-faq-item[open] .ztd-faq-icon { transform:rotate(45deg); background:#D6EBEA; }
.ztd-faq-item:hover { border-color:rgba(46,116,131,.35); }
.ztd-faq-item[open] { background:#fff; box-shadow:0 18px 36px rgba(24,27,41,.06); }
.ztd-faq-item[open] p { animation:ztd-faq-in .25s ease-out both; }
@keyframes ztd-faq-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.ztd-faq-item p { font-size:15px; line-height:25px; color:var(--jd-body); margin:0; padding:0 46px 22px 0; }

/* CTA — .jdh-btn (circle-arrow pill) from the base CSS */
.ztd-cta { text-align:center; padding:88px 20px; background:transparent; }
.ztd-cta h2 { font-family:var(--jd-serif); font-weight:300; font-size:52px; line-height:62px; letter-spacing:-1px; color:var(--jd-ink); margin:0 auto 16px; max-width:720px; text-wrap:balance; }
.ztd-cta p { font-size:18px; line-height:28px; color:var(--jd-body); margin:0 auto 30px; max-width:540px; }
.ztd-cta-chips { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 24px; margin-top:24px; font-size:14px; color:var(--jd-muted); }

.ztd-related { text-align:center; }
.ztd-related .ztd-sec-title { margin-bottom:28px; }
.ztd-related-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; }
.ztd-related-link { border:1px solid var(--jd-line); border-radius:100px; padding:10px 20px; font-size:15px; font-weight:500; color:var(--jd-ink); background:rgba(255,255,255,.7);
  text-decoration:none; transition:border-color .2s ease, color .2s ease, background .2s ease; }
.ztd-related-link:hover { border-color:var(--jd-teal); color:var(--jd-teal-deep); background:#fff; }
.ztd-related-link:focus-visible { outline:2px solid var(--jd-teal); outline-offset:2px; }

@media (max-width:960px) {
  .ztd-grid-3, .ztd-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ztd-grid-5 > * { flex-basis:calc((100% - 18px) / 2); }
  .ztd-split { grid-template-columns:1fr; gap:36px; }
}
@media (max-width:900px) {
  .ztd-hero { padding:36px 16px 32px; }
  .ztd-h1 { font-size:40px; line-height:46px; letter-spacing:-.6px; }
  .ztd-sub { font-size:16px; line-height:26px; margin-bottom:28px; }
  .ztd-sec { padding:64px 16px; }
  .ztd-sec-head { margin-bottom:32px; }
  .ztd-sec-title { font-size:32px; line-height:38px; letter-spacing:-.5px; }
  .ztd-sec-sub, .ztd-prose p { font-size:16px; line-height:26px; }
  .ztd-cta { padding:64px 16px; }
  .ztd-cta h2 { font-size:32px; line-height:38px; letter-spacing:-.5px; }
  .ztd-cta p { font-size:16px; line-height:26px; }
}
@media (max-width:560px) {
  .ztd-grid-3, .ztd-grid-4 { grid-template-columns:minmax(0,1fr); }
  .ztd-grid-5 > * { flex-basis:100%; }
  .ztd-faq-item { padding:0 18px; }
  .ztd-faq-item p { padding-right:0; }
}
@media (prefers-reduced-motion:reduce) {
  .ztd-faq-item[open] p { animation:none; }
  .ztd-fcard, .ztd-scard, .ztd-who, .ztd-textcard { transition:none; }
}
/* phones: two lines of the sub (all of it stays in the HTML) so the scanner card starts higher (audit loop round 21) */
@media (max-width:600px) { .ztd-sub { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; margin-bottom:20px; } }