/* ==========================================================================
   KuduDoc v6 — sars-pdf-not-opening (after pages/_feature.css).
   Only this page's own parts (prefix sp-): the opener's viewer with the drawn XFA page, the result card, the
   readable-copy and keep tabs, the "Please wait…" pair in #why, the specimens, the tested-forms table and #after.
   Everything else is the kit.
   ========================================================================== */

/* ---------------------------------------------------------------- tab 1: viewer + result */
.fk .sp-cols { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.fk .sp-aside { padding-top: 0; }
.fk .sp-viewer { border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--fk-line); overflow: hidden; }
.fk .sp-viewer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--fk-line);
}
.fk .sp-zoom { display: inline-flex; align-items: center; flex: none; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 1px #d9e2eb; font: 600 12px/1 var(--font-sans); color: var(--fk-ink-2); }
.fk .sp-zoom-b { display: grid; place-items: center; width: 26px; height: 100%; color: var(--fk-mute); font-size: 14px; }
.fk .sp-zoom-v { padding: 0 6px; border-inline: 1px solid #e3eaf1; line-height: 28px; }
.fk .sp-viewer-body { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 16px; padding: 18px 18px 22px 14px; background: #edf1f5; }
.fk .sp-thumbs { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fk .sp-thumbs li { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fk .sp-thumbs small { font: 600 10px/1 var(--font-sans); color: var(--fk-faint); }
.fk .sp-thumbs li.is-on small { color: var(--fk-blue); }
.fk .sp-thumb {
  display: flex; flex-direction: column; gap: 4px; width: 40px; height: 56px; padding: 7px 6px; border-radius: 2px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 45, 73, .08), 0 1px 2px rgba(16, 45, 73, .08);
}
.fk .sp-thumb i { display: block; height: 3px; border-radius: 1px; background: #cfd8e1; }
.fk .sp-thumb i:first-child { height: 5px; background: #56626f; }
.fk .sp-thumb i:nth-child(2n) { width: 70%; }
.fk .sp-thumbs li.is-on .sp-thumb { box-shadow: 0 0 0 2px var(--fk-blue), 0 1px 2px rgba(16, 45, 73, .08); }
.fk .sp-stagebox { container-type: inline-size; display: flex; justify-content: center; min-width: 0; }

/* the drawn XFA page: sized in em, the em follows the page width */
.fk .sp-page {
  display: flex; flex-direction: column; gap: .85em; width: 100%; max-width: 460px; aspect-ratio: 210 / 297; padding: 6% 6.5% 4.5%;
  background: #fff; color: #17222e; font: 400 min(2.2cqi, 10.1px)/1.35 var(--font-sans);
  box-shadow: 0 0 0 1px rgba(16, 45, 73, .06), 0 2px 4px rgba(16, 45, 73, .08), 0 18px 36px -22px rgba(16, 45, 73, .45);
}
.fk .sp-form-head { display: flex; align-items: center; gap: 1.1em; padding-bottom: .9em; border-bottom: 2px solid #17222e; }
.fk .sp-code { flex: none; padding: .25em .55em; border: 1.5px solid #17222e; font: 800 1.75em/1 var(--font-sans); letter-spacing: .02em; }
.fk .sp-title { display: flex; flex-direction: column; gap: .2em; font: 700 1.3em/1.2 var(--font-sans); }
.fk .sp-title small { font: 500 .72em/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: #56626f; }
.fk .sp-bar { display: flex; align-items: center; padding: .4em .7em; background: #2f3b48; color: #fff; font: 700 .95em/1.2 var(--font-sans); letter-spacing: .02em; }
.fk .sp-bar b { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin-right: .7em; background: #fff; color: #2f3b48; font-weight: 800; }
.fk .sp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45em; }
.fk .sp-f { display: flex; flex-direction: column; gap: .2em; min-width: 0; min-height: 3.3em; padding: .35em .55em .45em; border: 1px solid #b7c2cc; }
.fk .sp-f i { font: 500 .78em/1.2 var(--font-sans); font-style: normal; color: #5a6875; }
.fk .sp-f b { font: 500 1.08em/1.3 var(--font-sans); color: #0d1a27; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fk .sp-f--2 { grid-column: span 2; } .fk .sp-f--3 { grid-column: span 3; } .fk .sp-f--4 { grid-column: span 4; }
.fk .sp-opts { display: flex; flex-wrap: wrap; gap: .4em 1.6em; padding-top: .25em; }
.fk .sp-opt { display: inline-flex; align-items: center; gap: .5em; font-size: 1em; color: #0d1a27; }
.fk .sp-opt::before { content: ""; flex: none; width: 1.05em; height: 1.05em; border: 1px solid #56626f; background: #fff; }
.fk .sp-opt.is-x::before {
  background: linear-gradient(45deg, transparent 43%, #0d1a27 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, #0d1a27 43% 57%, transparent 57%), #fff;
}
.fk .sp-decl { font-size: 1em; line-height: 1.45; color: #25313d; }
.fk .sp-f b.sp-sig { min-height: 1.3em; }
.fk .sp-page-foot { display: flex; justify-content: space-between; margin-top: auto; padding-top: .7em; border-top: 1px solid #d5dce3; font: 500 .8em/1 var(--font-sans); color: #6b7784; }

/* the result card */
.fk .sp-result, .fk .sp-saved, .fk .sp-keep { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.fk .sp-line { font: 400 13.5px/1.55 var(--font-sans); color: var(--fk-ink-2); }
.fk .sp-acts { display: flex; flex-direction: column; align-self: stretch; gap: 8px; }
.fk .sp-acts .fk-btn { width: 100%; height: 36px; }
.fk .sp-acts--row { flex-direction: row; flex-wrap: wrap; margin-top: 14px; }
.fk .sp-acts--row .fk-btn { width: auto; }
.fk .sp-note { margin-top: -4px; font: 400 12px/1.45 var(--font-sans); color: var(--fk-mute); }
.fk .sp-facts .fk-kv > div { grid-template-columns: 70px minmax(0, 1fr); padding: 9px 0; }
.fk .sp-facts .fk-kv > div:first-child { padding-top: 0; }
.fk .sp-facts .fk-kv > div:last-child { padding-bottom: 0; }

/* tabs 2 and 3 */
.fk .sp-col-pad { padding-top: 36px; }
.fk .sp-pair { align-self: stretch; display: flex; flex-direction: column; }
.fk .sp-pair > li { padding: 11px 0; border-top: 1px solid var(--fk-line-2); }
.fk .sp-pair > li:last-child { padding-bottom: 0; }
.fk .sp-pair--linked { position: relative; padding-left: 16px; }
.fk .sp-pair--linked > li:first-child { border-top: 0; padding-top: 4px; }
.fk .sp-pair--linked::before { content: ""; position: absolute; left: 2px; top: 10px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--fk-blue); }
.fk .sp-keep .fk-field { align-self: stretch; }
.fk .sp-select { justify-content: space-between; }
.fk .sp-select::after { content: ""; width: 7px; height: 7px; margin: -4px 2px 0 12px; border-right: 1.5px solid var(--fk-mute); border-bottom: 1.5px solid var(--fk-mute); transform: rotate(45deg); }
.fk .sp-keep .sp-note { margin-top: 0; }
.fk .sp-kept { align-self: stretch; padding: 11px 13px; border-radius: 10px; background: var(--fk-ice); font: 500 13px/1.5 var(--font-sans); color: var(--fk-blue-deep); }
.fk .sp-kept .fk-link { display: block; margin-top: 3px; }
.fk .sp-pairmark { padding: 3px 8px; border-radius: 6px; background: #eef2f6; font: 600 11px/1.2 var(--font-sans); color: var(--fk-mute); }

/* ---------------------------------------------------------------- #why: the text beside the two pages */
.fk .sp-why { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 72px; align-items: center; }
.fk .sp-why .fk-head { margin-bottom: 26px; }
.fk .sp-p { max-width: 62ch; font: 400 17px/1.65 var(--font-sans); color: var(--fk-body); }
.fk .sp-p + .sp-p, .fk .sp-quote + .sp-p { margin-top: 16px; }
.fk .sp-p a { color: var(--fk-blue); }
.fk .sp-p a:hover { color: var(--fk-blue-deep); }
.fk .sp-quote {
  position: relative; max-width: 62ch; margin: 20px 0 0; padding: 18px 22px 18px 44px; border-radius: 16px; background: #fff; box-shadow: var(--fk-card-sh);
}
.fk .sp-quote::before { content: ""; position: absolute; left: 22px; top: 22px; width: 4px; height: 18px; border-radius: 2px; background: #9fb2c6; transform: var(--fk-stroke); }
.fk .sp-quote p { font: 500 16px/1.6 var(--font-sans); color: var(--fk-ink-2); }
.fk .sp-pages {
  display: flex; align-items: center; justify-content: center; gap: 20px; margin: 0; padding: 40px 28px 32px;
  border-radius: 22px; background: #fff; box-shadow: var(--fk-card-sh);
}
.fk .sp-mini { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fk .sp-mini small { max-width: 16ch; min-height: 2.8em; text-align: center; font: 500 12.5px/1.4 var(--font-sans); color: var(--fk-mute); }
.fk .sp-mini-page {
  display: flex; flex-direction: column; gap: .6em; width: 150px; aspect-ratio: 210 / 297; padding: 1.5em 1.3em; border-radius: 3px; font-size: 10px;
  box-shadow: 0 0 0 1px rgba(16, 45, 73, .08), 0 2px 4px rgba(16, 45, 73, .06), 0 14px 28px -18px rgba(16, 45, 73, .4);
}
.fk .sp-mini-page--wait { background: #e8ecf0; }
.fk .sp-mini-page--wait b { font: 650 13px/1.2 var(--font-sans); color: #3c4854; margin-bottom: .4em; }
.fk .sp-mini-page--wait i { display: block; height: 5px; border-radius: 3px; background: #cdd4db; }
.fk .sp-mini-page--wait i:nth-of-type(2) { width: 86%; } .fk .sp-mini-page--wait i:nth-of-type(3) { width: 58%; }
.fk .sp-mini-page--drawn { background: #fff; }
.fk .sp-mini-arrow { position: relative; flex: none; width: 34px; height: 12px; margin-bottom: 30px; }
.fk .sp-mini-arrow::before { content: ""; position: absolute; left: 0; right: 3px; top: 5px; height: 2px; border-radius: 1px; background: var(--fk-blue); }
.fk .sp-mini-arrow::after { content: ""; position: absolute; right: 1px; top: 1.5px; width: 7px; height: 7px; border-top: 2px solid var(--fk-blue); border-right: 2px solid var(--fk-blue); transform: rotate(45deg); }

/* the plain form outline (em-based: #why pages and the "form on screen" specimen) */
.fk .sp-o-head { position: relative; display: block; flex: none; height: 1.6em; border-bottom: .2em solid #2f3b48; }
.fk .sp-o-head::before { content: ""; position: absolute; left: 0; top: 0; width: 2.2em; height: 1.1em; border: .12em solid #2f3b48; box-sizing: border-box; }
.fk .sp-o-head::after { content: ""; position: absolute; left: 2.8em; right: 1.2em; top: .3em; height: .45em; border-radius: .2em; background: #2f3b48; }
.fk .sp-o-bar { display: block; flex: none; height: .75em; background: #2f3b48; }
.fk .sp-o-row { display: flex; flex: none; gap: .35em; }
.fk .sp-o-row i { display: block; flex: 1; height: 1.5em; border: 1px solid #b7c2cc; }
.fk .sp-o-row i:first-child { flex: 2; }

/* ---------------------------------------------------------------- specimens in "What you get" */
.fk .sp-spec-view, .fk .sp-spec-print { flex-direction: row; align-items: center; justify-content: flex-start; gap: 20px; }
.fk .sp-spec-page {
  display: flex; flex-direction: column; gap: .6em; flex: none; width: 76px; aspect-ratio: 210 / 297; padding: 1.3em 1.1em; font-size: 5.4px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 45, 73, .08), 0 8px 18px -10px rgba(16, 45, 73, .35);
}
.fk .sp-spec-page .sp-o-row i { border-width: .5px; }
.fk .sp-spec-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.fk .sp-spec-meta small { font: 600 11.5px/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--fk-mute); }
.fk .sp-spec-meta b { font: 600 13.5px/1.3 var(--font-sans); color: var(--fk-ink); }
.fk .sp-sheets { position: relative; flex: none; width: 70px; height: 92px; }
.fk .sp-sheets i {
  position: absolute; width: 58px; height: 80px; border-radius: 2px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 45, 73, .1), 0 4px 10px -6px rgba(16, 45, 73, .35);
}
.fk .sp-sheets i:nth-child(1) { left: 12px; top: 0; } .fk .sp-sheets i:nth-child(2) { left: 8px; top: 4px; }
.fk .sp-sheets i:nth-child(3) { left: 4px; top: 8px; }
.fk .sp-sheets i:nth-child(4) { left: 0; top: 12px; background: linear-gradient(#2f3b48, #2f3b48) 7px 9px / 44px 3px no-repeat, linear-gradient(#cfd8e1, #cfd8e1) 7px 18px / 40px 3px no-repeat, linear-gradient(#cfd8e1, #cfd8e1) 7px 25px / 30px 3px no-repeat, linear-gradient(#cfd8e1, #cfd8e1) 7px 32px / 40px 3px no-repeat, #fff; }
.fk .fk-get p code { white-space: nowrap; }

/* ---------------------------------------------------------------- the tested-forms table */
.fk .sp-tested tbody th { width: 40%; font-weight: 500; color: var(--fk-ink-2); }
.fk .sp-fcode { display: block; margin-bottom: 3px; font: 700 14px/1.3 var(--font-display); letter-spacing: .04em; color: var(--fk-ink); }
.fk .sp-tested td[data-label="Tested"] { white-space: nowrap; }
.fk .sp-diff { display: block; max-width: 34ch; margin-top: 8px; font: 400 14px/1.5 var(--font-sans); color: var(--fk-body); }

/* ---------------------------------------------------------------- #after: a real part beside each next step */
.fk .sp-after > li { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; gap: 12px 36px; padding: 24px 0; }
.fk .sp-after-spec {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 14px;
  background: #f5f8fb; box-shadow: inset 0 0 0 1px var(--fk-line-2);
}
.fk .sp-coll { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px 5px 9px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--fk-line); font: 600 12.5px/1.2 var(--font-sans); color: var(--fk-ink); }
.fk .sp-coll .icon { width: 16px; height: 16px; color: var(--fk-blue); }
.fk .sp-client { display: flex; align-items: center; gap: 11px; }
.fk .sp-after-txt h3 { font: 650 19px/1.3 var(--font-display); letter-spacing: -.015em; color: var(--fk-ink); }
.fk .sp-after-txt p { margin-top: 8px; font: 400 15.5px/1.62 var(--font-sans); color: var(--fk-body); }

/* the closing line's link */
.fk .fk-closing p a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); }
.fk .fk-closing p a:hover { text-decoration-color: #fff; }

/* ================================================================ responsive */
@media (max-width: 1000px) {
  .fk .sp-cols { grid-template-columns: 1fr; }
  .fk .sp-aside { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  .fk .sp-col-pad { padding-top: 0; }
  .fk .sp-why { grid-template-columns: 1fr; }
  .fk .sp-pages { justify-self: start; width: 100%; max-width: 620px; }
}
@media (max-width: 720px) {
  .fk .sp-viewer-body { grid-template-columns: minmax(0, 1fr); padding: 14px 12px 16px; }
  .fk .sp-thumbs { display: none; }
  .fk .sp-viewer-bar { padding: 10px 12px; }
  .fk .sp-zoom { display: none; }
  .fk .sp-aside { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .fk .sp-tested tbody th { width: auto; }
}
@media (max-width: 640px) {
  .fk .sp-p { font-size: 16px; }
  .fk .sp-quote { padding: 16px 18px 16px 38px; }
  .fk .sp-quote::before { left: 18px; }
  .fk .sp-quote p { font-size: 15px; }
  .fk .sp-pages { gap: 12px; padding: 28px 14px 24px; }
  .fk .sp-mini-page { width: 118px; font-size: 8px; }
  .fk .sp-mini-page--wait b { font-size: 11px; }
  .fk .sp-mini-arrow { width: 22px; }
  .fk .sp-after > li { grid-template-columns: 1fr; gap: 16px; padding: 20px 0; }
  .fk .sp-diff { max-width: none; }
}
@media (max-width: 360px) {
  .fk .sp-mini-page { width: 100px; }
}