/* Free tools (/tools/): hub, barcode generator, barcode checker and MRP label maker. Loaded after styles.css and site.css.
 * The home page's language: a sticker-word headline (.tools-chip, as .hero-chip), a white "try" bar, real labels on kraft. */
.tools-page { --ok: #16803f; --ok-soft: #e9f6ee; --bad: #c0281d; --bad-soft: #fdeeec; --field: #d3dfec; }

/* hero */
.tools-hero { text-align: center; padding: 34px 0 26px; }
.tools-hero h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.1; letter-spacing: -.04em; color: var(--ink); margin: 0 auto 14px; font-weight: 800; max-width: none; text-wrap: balance; }
.tools-chip { position: relative; display: inline-block; margin: 0 .04em; padding: .02em .3em .07em; border-radius: 11px; background: #fff; border: 1px solid #dde4ec;
  transform: rotate(-2.5deg); transform-origin: 50% 60%; box-shadow: 0 1px 0 #10233a0d, 0 2px 3px -1px #10233a1f, 0 10px 18px -12px #10233a59; }
.tools-chip::after { content: ''; position: absolute; top: -1px; right: -1px; width: 14px; height: 14px; border-top-right-radius: 11px; border-bottom-left-radius: 5px;
  background: linear-gradient(225deg, #fcfdff 0 47%, #e9eef4 53% 100%); box-shadow: -1px 1px 2px -1px #10233a40; }
@media (prefers-reduced-motion: no-preference) { html:not([data-motion=paused]) .tools-chip { animation: tools-chip .38s cubic-bezier(.22,1,.36,1) .12s both; } }
@keyframes tools-chip { from { transform: translateY(-5px) rotate(-6deg) scale(1.04); } to { transform: rotate(-2.5deg); } }
.chip-keep { white-space: nowrap; }
.tools-lead { font-size: 18px; line-height: 1.65; color: var(--body); margin: 0 auto; max-width: 30em; text-wrap: balance; }
.tools-note { display: inline-flex; gap: 8px; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.tools-note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }

/* the white try bar */
.try-bar { display: flex; align-items: flex-end; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 9px 25px -23px #426383; max-width: 980px; margin: 22px auto 0; text-align: left; }
.try-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.try-grow { flex: 1 1 auto; }
.try-field > label { font-size: 12px; font-weight: 500; color: var(--ink); }
.try-field input, .try-field select { min-height: 52px; border: 1px solid var(--field); border-radius: 9px; padding: 8px 14px; font: 500 20px/1.3 var(--font);
  letter-spacing: .05em; color: var(--ink); background: #fff; width: 100%; min-width: 0; box-sizing: border-box; }
.try-field select { font-size: 16px; letter-spacing: 0; padding-right: 30px; appearance: auto; }
.try-field input::placeholder { color: #8a9aab; letter-spacing: .02em; }
.try-field input:focus-visible, .try-field select:focus-visible, .try-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-color: var(--blue); }
.try-field input[aria-invalid=true] { border-color: var(--bad); }
.try-btn { position: relative; min-height: 52px; border-radius: 9px; padding: 0 16px; font: 500 15px/1.2 var(--font); display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; border: 1px solid var(--field); background: #fff; color: var(--ink); white-space: nowrap; cursor: pointer; flex: none; }
.try-btn:hover { border-color: var(--blue); color: var(--blue-deep); }
.try-btn svg { width: 20px; height: 20px; flex: none; }
.try-btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; padding: 0 26px; }
.try-btn.primary:hover { background: var(--blue-deep); color: #fff; }
.try-file input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.try-file:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.tries { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px auto 0; max-width: 980px; font-size: 13px; color: var(--muted); }
.tries button { font: 400 13px/1.3 var(--font); border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 12px; min-height: 32px; cursor: pointer; }
.tries button:hover { border-color: var(--blue); color: var(--blue-deep); }
.tries .type-pick { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.tries .type-pick select { font: 400 13px/1.3 var(--font); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 5px 8px; min-height: 32px; max-width: 220px; }
.try-help { max-width: 980px; margin: 10px auto 0; font-size: 13px; line-height: 1.55; color: var(--muted); text-align: left; padding-left: 4px; }
.tool-status { font-size: 13px; color: var(--muted); margin: 8px auto 0; min-height: 1.4em; max-width: 980px; }
.tool-status:empty { min-height: 0; margin: 0; }
.tool-status.bad { color: var(--bad); }

/* labels on the desk */
.kraft { background: #d9b98f url('/assets/gallery/kraft.webp') center/cover; border-radius: 4px; padding: 16px; box-shadow: 0 16px 30px -18px #273f5866; }
.tl-sticker { position: relative; background: #fff; border-radius: 6px; color: #000; font-family: Arial, Helvetica, sans-serif; text-align: left;
  box-shadow: 0 1px 2px #0002, 0 14px 26px -16px #10233a80; }
.tl-sticker > svg, .tl-sticker .art > svg { display: block; max-width: 100%; height: auto; }
.stamp { position: absolute; z-index: 2; display: grid; place-items: center; text-align: center; width: 104px; height: 104px; border-radius: 50%; border: 3px solid var(--ok);
  color: var(--ok); font: 800 17px/1.05 var(--font); letter-spacing: .06em; transform: rotate(-14deg); background: #ffffffd9;
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px var(--ok); pointer-events: none; }
.stamp i { display: block; font-style: normal; font-size: 28px; line-height: 1; }
.stamp.bad { border-color: var(--bad); color: var(--bad); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px var(--bad); font-size: 14px; }

/* hub */
.tool-desk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; padding: 26px 0 88px; }
.tool-obj { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.tool-pic { height: 270px; width: 100%; display: grid; place-items: center; position: relative; }
.tool-pic .tl-sticker { padding: 16px 20px 10px; }
.tool-pic .t1 { transform: rotate(-3deg); } .tool-pic .t2 { transform: rotate(2deg); position: relative; } .tool-pic .t3 { transform: rotate(-1.5deg); }
.tool-pic .t2 .stamp { right: -74px; top: -46px; }
.tool-pic .hub-mrp { width: 290px; max-width: 100%; padding: 14px 16px 10px; }
.tool-obj h2 { font-size: 24px; letter-spacing: -.02em; margin: 18px 0 6px; color: var(--ink); }
.tool-obj p { margin: 0 0 16px; font-size: 15px; line-height: 1.65; max-width: 22em; }
.go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 10px; background: var(--blue); color: #fff;
  font-weight: 600; font-size: 15px; text-decoration: none; border: 0; cursor: pointer; font-family: var(--font); }
.go:hover { background: var(--blue-deep); color: #fff; }
.go.dark { background: var(--ink); } .go.dark:hover { background: #0a1d2c; }
.go svg { width: 18px; height: 18px; flex: none; }
.ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font: 500 15px/1.2 var(--font); cursor: pointer; text-decoration: none; }
.ghost:hover { border-color: var(--blue); color: var(--blue-deep); }
.go:disabled, .ghost:disabled { opacity: .6; cursor: progress; }
@media (prefers-reduced-motion: no-preference) {
  .tool-pic > div { transition: transform .25s cubic-bezier(.22,1,.36,1); }
  .tool-obj:hover .tool-pic > div { transform: rotate(0deg) translateY(-3px); }
}

/* checker result */
.check-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 72px; align-items: center; max-width: 980px; margin: 40px auto 72px; }
.check-result:empty { display: none; }
.result-pic { display: grid; place-items: center; position: relative; padding: 10px; min-width: 0; }
.result-pic .holder { position: relative; max-width: 100%; }
.result-pic .tl-sticker { padding: 22px 26px 16px; }
.result-pic .tl-sticker.square { padding: 22px; }
.result-pic .holder > .stamp { right: -62px; top: -58px; }
.result-pic .typed-holder > .stamp { right: -64px; top: -62px; }
.result-pic .art { display: flex; justify-content: center; }
.result-pic .art > svg { width: 100%; max-width: 300px; height: auto; }
.result-pic .art.square > svg { max-width: 190px; }
.result-pic .hri { font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #000; text-align: center; overflow-wrap: anywhere; margin: 6px 0 0; max-width: 300px; }
.typed { background: #fff; border-radius: 8px; padding: 18px 24px; font: 600 30px/1.2 var(--font); letter-spacing: .08em; color: var(--ink); box-shadow: 0 14px 26px -16px #10233a80;
  overflow-wrap: anywhere; max-width: 100%; }
.typed s { color: var(--bad); text-decoration-thickness: 3px; }
.typed.long { font-size: 16px; letter-spacing: .02em; font-weight: 500; }
.typed mark { background: #fecdca; color: #9a1c13; border-radius: 3px; padding: 0 2px; }
.verdict-side { min-width: 0; }
.verdict-side h2 { font-size: 34px; line-height: 1.15; letter-spacing: -.03em; margin: 0 0 4px; color: var(--ok); }
.verdict-side.bad h2 { color: var(--bad); }
.verdict-side .kind { margin: 0 0 20px; color: var(--muted); font-size: 17px; }
.digits { display: flex; gap: 4px; margin: 0 0 22px; flex-wrap: wrap; }
.digits span { border-top: 3px solid #9fb0c2; padding: 6px 8px 0; text-align: center; font-size: 12px; font-weight: 500; color: var(--muted); }
.digits b { display: block; font-size: 16px; letter-spacing: .06em; color: var(--ink); font-weight: 600; }
.digits .d1 { border-color: var(--blue); } .digits .d3 { border-color: var(--ok); }
.size-rows { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0 0 24px; font-size: 15px; }
.size-rows dt { color: var(--muted); } .size-rows dd { margin: 0; color: var(--ink); font-weight: 500; }
.acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fix-box { background: var(--bad-soft); border-radius: 12px; padding: 14px 18px; margin: 0 0 20px; color: var(--ink); font-size: 16px; }
.fix-box b { display: block; font-size: 24px; letter-spacing: .07em; margin-top: 4px; font-weight: 600; overflow-wrap: anywhere; }
.verdict-side .why { font-size: 14px; line-height: 1.6; margin: 0 0 20px; }
.result-msgs { margin: 0 0 18px; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.result-msgs.bad { color: #9a1c13; } .result-msgs.warn { color: var(--warn); }
.result-markup { font: 500 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--mist); padding: 8px 10px; border-radius: 8px; overflow-wrap: anywhere; margin: 0 0 18px; }
.result-markup mark { background: #fecdca; color: #9a1c13; border-radius: 3px; padding: 0 2px; }
.dl-note { font-size: 13px; color: var(--muted); margin: 10px 0 0; min-height: 1.3em; }
.dl-note:empty { min-height: 0; margin: 0; }
.dl-note.bad { color: var(--bad); }

/* the checker's details under the result */
.result-more { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 18px; min-width: 0; }
.result-more > summary { cursor: pointer; font-size: 15px; font-weight: 500; color: var(--ink); min-height: 36px; display: flex; align-items: center; gap: 8px; list-style: none; }
.result-more > summary::-webkit-details-marker { display: none; }
.result-more > summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); font-size: 15px; line-height: 1; color: var(--ink); flex: none; }
.result-more[open] > summary::before { content: "−"; }
.result-more > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.result-more-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 36px; margin-top: 10px; }
.result-block { margin: 14px 0 0; min-width: 0; }
.result-block.wide { grid-column: 1 / -1; }
.result-block h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; font-weight: 500; color: #687e90; margin: 0 0 8px; }
.result-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.result-list li { display: grid; grid-template-columns: 18px minmax(0, 130px) minmax(0, 1fr); gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; line-height: 1.5; }
.result-list .k { color: var(--muted); }
.result-list .v { color: var(--ink); overflow-wrap: anywhere; }
.result-list .dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: #9fb2c3; }
.result-list .ok .dot { background: var(--ok); } .result-list .bad .dot { background: var(--bad); } .result-list .warn .dot { background: #c27a12; }
.ai-table { width: 100%; border-collapse: collapse; font-size: 13.5px; table-layout: fixed; margin: 0 0 18px; }
.ai-table th, .ai-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line-soft); vertical-align: top; overflow-wrap: anywhere; }
.ai-table th { font-weight: 500; color: var(--muted); font-size: 12px; }
.ai-table th:first-child, .ai-table td:first-child { width: 52px; }
.ai-table td small { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; }
.ai-table tr.warn td { color: var(--warn); }
.carrier-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.carrier-list li { font-size: 12.5px; padding: 5px 10px; border-radius: 20px; border: 1px solid var(--line); background: #fff; }
.carrier-list li.ok::before { content: "✓ "; color: var(--ok); }
.carrier-list li.no { color: var(--muted); text-decoration: line-through; }
.carrier-list li.chosen { border-color: var(--ink); }
.size-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 10px; }
.size-table th, .size-table td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.size-table th { color: var(--muted); font-weight: 500; font-size: 12px; }
.size-table caption { text-align: left; font-size: 12.5px; color: var(--ink); padding: 0 0 6px; }
.tool-hint { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 0; }
.result-disclaimer { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 0; padding: 10px 12px; border-left: 3px solid var(--orange); background: var(--orange-soft); border-radius: 0 8px 8px 0; }

/* generator */
.gen-purpose { flex: 0 0 312px; }
.gen-bar .try-field select { font-size: 15px; }
.gen-size { flex: 0 0 180px; }
.gen-out { display: flex; flex-direction: column; align-items: center; margin: 40px auto 72px; text-align: center; }
.gen-out[hidden], .gen-fix[hidden] { display: none; }
.gen-out .kraft { max-width: 100%; }
.gen-out .tl-sticker { padding: 28px 34px 20px; display: flex; justify-content: center; }
.gen-out .tl-sticker.square { padding: 26px; }
.gen-out .tl-sticker > svg { width: var(--art-w, 300px); max-width: 100%; height: auto; }
.gen-ok { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); margin: 16px 0 0; }
.gen-ok b { color: var(--ok); }
.dls { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }
.dls .ghost { min-width: 68px; }
.gen-after { margin: 22px 0 0; font-size: 15px; color: var(--body); }
.gen-after a { color: var(--blue); font-weight: 600; text-decoration: none; }
.gen-after a:hover { text-decoration: underline; }
.gen-fix { max-width: 980px; margin: 28px auto 0; display: grid; gap: 14px; justify-items: start; text-align: left; }
.gen-fix .fix-box { margin: 0; width: 100%; box-sizing: border-box; }
.gen-fix .typed { font-size: 22px; }

/* the Start free note after a download (more prominent after the third) */
.done-note { margin-top: 16px; width: 100%; box-sizing: border-box; background: var(--ok-soft); border-radius: 12px; padding: 14px 16px; font-size: 15px; line-height: 1.55; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.done-note[hidden] { display: none; }
.done-note b { color: var(--ok); }
.done-note .go { min-height: 40px; font-size: 14px; white-space: nowrap; flex: none; }
.done-note.strong { background: #fff; border: 2px solid var(--blue); box-shadow: 0 14px 30px -20px #0868f6; padding: 18px 20px; font-size: 16px; }
.done-note.strong .go { min-height: 46px; font-size: 15px; padding: 0 22px; }
.gen-out .done-note { max-width: 560px; }

/* MRP label maker */
.mrp-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: start; max-width: 1120px; margin: 26px auto 72px; }
.mrp-col { position: sticky; top: 96px; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.mrp-stage { width: 100%; box-sizing: border-box; padding: 22px; display: grid; place-items: center; overflow: hidden; min-height: 220px; }
.mrp-scale { transform-origin: top left; }
.mrp-scale > .mrp-label { box-shadow: 0 1px 2px #0002, 0 14px 26px -16px #10233a80; border-radius: 3px; }
.size-pills { display: flex; gap: 8px; margin: 18px 0 0; flex-wrap: wrap; justify-content: center; border: 0; padding: 0; min-width: 0; }
.size-pills legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.size-pills label { position: relative; display: inline-flex; align-items: center; min-height: 40px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 0 14px; font-size: 14px; color: var(--ink); cursor: pointer; }
.size-pills input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.size-pills label:has(input:checked) { background: var(--ink); color: #fff; border-color: var(--ink); }
.size-pills label:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.mrp-size-line { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.mrp-issues { margin: 12px 0 0; padding-left: 18px; font-size: 13px; color: var(--warn); line-height: 1.55; align-self: stretch; }
.mrp-issues:empty { display: none; }
.mrp-dl { margin-top: 18px; width: 100%; min-height: 54px; border: 0; border-radius: 12px; background: var(--blue); color: #fff; font: 600 17px var(--font); cursor: pointer; }
.mrp-dl:hover { background: var(--blue-deep); }
.mrp-dl:disabled { opacity: .55; cursor: not-allowed; }
.mrp-dl:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.mrp-print-help { margin: 10px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
.mrp-col .tool-status { text-align: center; }
.mrp-panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; box-shadow: 0 9px 25px -23px #426383; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; min-width: 0; }
.mrp-panel .full { grid-column: 1 / -1; }
.mrp-panel .f { min-width: 0; }
.mrp-panel label { display: block; font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.mrp-panel input, .mrp-panel textarea { width: 100%; min-width: 0; box-sizing: border-box; min-height: 46px; border: 1px solid var(--field); border-radius: 9px; padding: 10px 13px; font: 400 16px/1.4 var(--font); color: var(--ink); background: #fff; }
.mrp-panel textarea { resize: vertical; min-height: 64px; }
.mrp-panel input:focus-visible, .mrp-panel textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.mrp-panel input[aria-invalid=true], .mrp-panel textarea[aria-invalid=true] { border-color: var(--bad); }
.mrp-panel .hint { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 4px 0 0; }
.mrp-panel .tool-error { color: var(--bad); font-size: 12.5px; margin: 4px 0 0; }
.mrp-panel .tool-error:empty { display: none; }
.mrp-panel > .hint.full { margin: 0; }

/* the app's scan window (scan-check.js scanFor), in the site's style */
.dz-print-dialog { border: 0; border-radius: 16px; padding: 0; width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; background: #fff; box-shadow: 0 30px 80px -20px rgba(27,39,56,.5); font-family: var(--font); color: var(--body); }
.dz-print-dialog::backdrop { background: rgba(27,39,56,.45); }
.dz-print-form { padding: 22px; display: grid; gap: 12px; min-width: 0; }
.dz-print-form h2 { margin: 0; font-size: 19px; color: var(--ink); letter-spacing: -.02em; }
.dz-muted { color: var(--muted); font-size: 14px; margin: 0; }
.dz-scan-stage { position: relative; display: flex; justify-content: center; }
.dz-scan-video { width: 100%; max-height: 46vh; border-radius: 10px; background: #000; object-fit: cover; }
.dz-scan-frame { position: absolute; inset: 12%; pointer-events: none; }
.dz-scan-corner { position: absolute; width: 22px; height: 22px; border: 3px solid #fff; }
.dz-scan-corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; } .dz-scan-corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.dz-scan-corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; } .dz-scan-corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.dz-scan-line { position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: rgba(255,255,255,.8); }
.dz-scan-frame.is-ok .dz-scan-corner { border-color: #2fbf71; } .dz-scan-frame.is-bad .dz-scan-corner { border-color: #f04438; }
.dz-scan-results { display: grid; gap: 6px; font-size: 14px; }
.dz-scan-results:empty { display: none; }
.dz-scan-results p { margin: 0; }
.dz-scan-results .bad { color: #b42318; }
.dz-result-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.dz-primary, .dz-quiet { min-height: 44px; border-radius: 10px; padding: 10px 16px; font: 500 14px/1.2 var(--font); cursor: pointer; border: 1.5px solid transparent; }
.dz-primary { background: var(--blue); color: #fff; } .dz-primary:hover { background: var(--blue-deep); }
.dz-quiet { background: #fff; color: var(--ink); border-color: #cbd9e4; }
.dz-primary:focus-visible, .dz-quiet:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.tools-faq .faq-list summary { font-size: 15.5px; }

@media (max-width: 860px) {
  .tool-desk, .check-result, .mrp-grid, .result-more-body { grid-template-columns: minmax(0, 1fr); }
  .tool-desk { gap: 56px; }
  .try-bar { flex-wrap: wrap; }
  .try-bar .try-field { flex: 1 0 100%; width: auto !important; }
  .try-bar .try-btn { flex: 1 1 0; }
  .try-bar .try-btn.primary { flex: 1 0 100%; }
  .mrp-col { position: static; }
  .check-result { gap: 28px; margin-top: 32px; }
  .result-pic .holder > .stamp { width: 84px; height: 84px; font-size: 14px; right: -12px; top: -58px; }
  .result-pic .holder > .stamp.bad { font-size: 12px; }
  .result-pic .typed-holder > .stamp { right: -6px; top: -80px; }
  .result-pic { padding-top: 34px; }
  .result-pic:has(.typed-holder) { padding-top: 62px; }
  .result-pic .holder > .stamp i { font-size: 22px; }
  .done-note { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .site .container.tools-wrap { width: calc(100% - 32px); }
  .tools-hero { padding: 26px 0 18px; }
  .tools-hero h1 { font-size: clamp(30px, 9vw, 40px); }
  .tools-chip { border-radius: 9px; padding: .01em .26em .06em; }
  .tools-chip::after { width: 11px; height: 11px; border-top-right-radius: 9px; }
  .tools-lead { font-size: 16px; }
  .try-bar { padding: 14px; }
  .verdict-side h2 { font-size: 30px; }
  .typed { font-size: 22px; padding: 14px 16px; }
  .mrp-panel { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; }
  .mrp-stage { padding: 14px; }
  .tool-pic { height: 240px; }
  .tool-pic .t2 .stamp { right: -46px; top: -62px; width: 84px; height: 84px; font-size: 14px; }
  .tool-pic .t2 .stamp i { font-size: 22px; }
  .result-list li { grid-template-columns: 14px minmax(0, 96px) minmax(0, 1fr); font-size: 13px; }
  .gen-out .tl-sticker { padding: 20px 18px 14px; }
  .dls .go { flex: 1 1 auto; }
}