/* Built with Prooflive.ai: https://prooflive.ai | ref pl247itmd5 */
/* Free tools (/tools): shared by every tool page, on top of proof.css. Published as /media/tools.css. */
[hidden] { display: none !important; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--rule); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.tool-hero { padding-top: 48px; padding-bottom: 36px; }
.tool-hero h1 { font-size: clamp(40px, 6vw, 88px); max-width: 16ch; margin-bottom: 20px; }
.tool-hero .lede { max-width: 40em; }
.tool-hero .note { margin-top: 18px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.tool-hero .note span::before { content: "\2713"; color: var(--m); margin-right: 6px; }
section.tool-sec { padding-top: 0; border-top: 0; }

/* The tool: controls on the left, the result on the right */
.tool { display: grid; grid-template-columns: minmax(280px, 4fr) minmax(0, 8fr); background: var(--sheet); border: 1px solid var(--rule); border-top: 1.5px solid var(--ink); }
.tool.wide { grid-template-columns: minmax(0, 1fr); }
.tool-controls { padding: 24px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tool-stage { position: relative; padding: 24px; min-width: 0; min-height: 440px; display: flex; flex-direction: column; gap: 18px; }
.tool-stage .stage-c { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 320px; }
.tool-stage canvas, .tool-stage .stage-c > img, .tool-stage .stage-c > svg { max-width: 100%; max-height: 640px; height: auto; display: block; }
.checker { background-color: #2A2E36; background-image: linear-gradient(45deg, #343843 25%, transparent 25%, transparent 75%, #343843 75%), linear-gradient(45deg, #343843 25%, transparent 25%, transparent 75%, #343843 75%); background-size: 20px 20px; background-position: 0 0, 10px 10px; }
.tool-out { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tool-out .mono { color: var(--muted); }
.tool-msg { color: var(--muted); font: 400 13px/1.5 var(--mono); min-height: 1.5em; }
.tool-msg.bad { color: #F08A8A; }

/* Fields */
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f > label, .f > .lbl { font: 500 12px/1.2 var(--mono); color: var(--muted); }
.f-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.f-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool input[type=text], .tool input[type=url], .tool input[type=email], .tool input[type=tel], .tool input[type=number], .tool input[type=password], .tool select, .tool textarea {
  width: 100%; min-height: 44px; padding: 0 12px; background: var(--paper); color: var(--ink); border: 1px solid #3A3F49; border-radius: 2px; font: 400 15px/1.3 var(--sans); }
.tool textarea { padding: 10px 12px; min-height: 120px; resize: vertical; scrollbar-width: none; }
.tool textarea::-webkit-scrollbar { display: none; }
.range-v label { font: 500 12px/1.2 var(--mono); color: var(--muted); }
.tool select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: right 16px top 50%, right 11px top 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.tool input:focus, .tool select:focus, .tool textarea:focus { outline: 2px solid var(--m); outline-offset: 0; border-color: transparent; }
.tool input[type=range] { width: 100%; accent-color: #B83C62; }
.tool input[type=checkbox] { accent-color: #B83C62; width: 18px; height: 18px; margin: 0; }
.chk { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; }
.colour { display: flex; align-items: center; gap: 8px; }
.colour input[type=color] { flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid #3A3F49; border-radius: 2px; background: none; cursor: pointer; }
.colour input[type=color]::-webkit-color-swatch-wrapper { padding: 3px; }
.colour input[type=color]::-webkit-color-swatch { border: 0; border-radius: 1px; }
.colour input[type=text] { font-family: var(--mono); text-transform: uppercase; }
.range-v { display: flex; justify-content: space-between; gap: 8px; }
.range-v output { font: 500 12px/1.2 var(--mono); color: var(--ink); }

/* Segmented choice */
.seg { display: flex; flex-wrap: wrap; border: 1px solid #3A3F49; border-radius: 2px; }
.seg button { flex: 1 1 auto; min-height: 40px; padding: 0 12px; background: transparent; color: var(--muted); border: 0; border-left: 1px solid #3A3F49; font: 600 13px/1 var(--sans); cursor: pointer; white-space: nowrap; }
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed=true] { background: var(--ink); color: var(--sheet); }
.seg button:hover:not([aria-pressed=true]) { color: var(--ink); }

/* Drop zone */
.drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 180px; padding: 24px; border: 1.5px dashed #4A4F5A; border-radius: 2px; text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.drop:hover, .drop.over { border-color: var(--m); background: rgba(217, 82, 122, .06); }
.drop svg { width: 34px; height: 34px; fill: var(--muted); }
.drop b { font-size: 16px; }
.drop .mono { color: var(--muted); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop.small { min-height: 92px; padding: 14px; }
.drop.small svg { width: 24px; height: 24px; }

/* Buttons that are working */
.btn[disabled] { opacity: .55; cursor: default; }
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid currentColor; border-color: var(--ink) var(--ink) transparent transparent; border-radius: 50%; animation: tspin .7s linear infinite; }
.btn-m.is-busy::after { border-color: #fff #fff transparent transparent; }
@keyframes tspin { to { transform: rotate(360deg); } }
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.btn-ico { min-height: 40px; width: 40px; padding: 0; justify-content: center; }

/* Progress */
.bar { height: 4px; background: var(--rule); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--m); transition: width .2s; }

/* Result tables */
.t-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.t-table th { text-align: left; font: 500 12px/1.2 var(--mono); color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.t-table td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.t-table td.n { white-space: nowrap; font-family: var(--mono); font-size: 13px; }
.t-table .grow { width: 100%; overflow-wrap: anywhere; }
.t-table .end { text-align: right; white-space: nowrap; }
.ok-t { color: #6CC79E; }
.no-t { color: #F08A8A; }
.warn-t { color: var(--y); }
@media (max-width: 760px) {
  .t-table thead { display: none; }
  .t-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .t-table td { border: 0; padding: 0; }
  .t-table td.grow { flex: 1 1 100%; font-weight: 600; }
  .t-table td[data-l]::before { content: attr(data-l) " "; font: 500 11px/1 var(--mono); color: var(--muted); }
  .t-table td.end { margin-left: auto; }
}

/* Swatches */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.sw { border: 1px solid var(--rule); background: var(--paper); cursor: pointer; text-align: left; padding: 0; color: var(--ink); font: inherit; }
.sw i { display: block; height: 84px; }
.sw span { display: flex; justify-content: space-between; gap: 6px; padding: 8px 10px; font: 500 12px/1.2 var(--mono); }
.sw span small { color: var(--muted); font-size: 11px; }
.sw:hover { border-color: var(--ink); }

/* Writing under the tool */
.tool-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
.tool-body .prose { max-width: 40em; }
.tool-body .prose h3 { font-size: 21px; margin: 32px 0 10px; }
.tool-body .prose h3:first-child { margin-top: 0; }
.tool-body .prose p, .tool-body .prose li { color: var(--muted); }
.tool-body .prose ul { padding-left: 1.2em; }
.tool-body .prose li { margin-bottom: 6px; }
.tool-body .prose strong { color: var(--ink); }
.howto { list-style: none; margin: 0; padding: 0; counter-reset: h; border-top: 1.5px solid var(--ink); }
.howto li { counter-increment: h; display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.howto li::before { content: counter(h, decimal-leading-zero); font: 500 13px/1.6 var(--mono); color: var(--m); }
.howto b { display: block; margin-bottom: 2px; }
.howto span { color: var(--muted); }

/* Other tools */
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1.5px solid var(--ink); }
.tool-grid a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 14px; padding: 22px 20px 22px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.tool-grid a:hover h3 { text-decoration: underline; text-decoration-color: var(--m); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tool-grid svg { width: 26px; height: 26px; fill: var(--m); grid-row: span 2; margin-top: 1px; }
.tool-grid h3 { font-size: 18px; }
.tool-grid p { grid-column: 2; margin: 0; color: var(--muted); font-size: 15px; }
.tool-grid.big a { padding: 28px 24px 28px 0; }
.tool-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tool-grid.big h3 { font-size: 21px; }
.tool-cta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: center; padding: 28px; background: var(--dark); border: 1px solid var(--rule); }
.tool-cta h2 { font-size: clamp(28px, 3.4vw, 44px); margin: 0 0 8px; }
.tool-cta p { color: var(--muted); margin: 0; }
.tool-cta .actions { justify-content: flex-end; }

@media (max-width: 1000px) {
  .tool { grid-template-columns: minmax(0, 1fr); }
  .tool-controls { border-right: 0; border-bottom: 1px solid var(--rule); }
  .tool.stage-first .tool-stage { order: -1; border-bottom: 1px solid var(--rule); }
  .tool.stage-first .tool-controls { border-bottom: 0; }
  .tool-body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-cta { grid-template-columns: minmax(0, 1fr); }
  .tool-cta .actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .tool-grid.two { grid-template-columns: minmax(0, 1fr); }
  .tool-controls, .tool-stage { padding: 16px; }
  .tool-stage { min-height: 0; }
  .f-row, .f-row.three { grid-template-columns: minmax(0, 1fr); }
  .tool-grid { grid-template-columns: minmax(0, 1fr); }
  .tool-hero { padding-top: 28px; }
}

/* Font pairing cards */
.fp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; --fp-size: 40px; }
.fp-card { display: flex; flex-direction: column; background: #FBFAF6; color: #1A1C20; border: 1px solid var(--rule); min-width: 0; }
.fp-sample { padding: 28px 24px 20px; flex: 1; }
.fp-sample h3 { font-size: var(--fp-size); line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 14px; overflow-wrap: anywhere; text-transform: none; }
.fp-sample p { font-size: 17px; line-height: 1.6; margin: 0; color: #3A3D44; }
.fp-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 24px; border-top: 1px solid #E2DED4; background: #F2EFE7; }
.fp-meta b { font-size: 14px; }
.fp-meta .mono { display: block; margin-top: 4px; font-size: 12px; color: #6A6C72; }
.fp-meta .btn { border-color: #1A1C20; color: #1A1C20; flex: none; }
.fp-meta .btn:hover { background: #1A1C20; color: #FBFAF6; }
@media (max-width: 900px) { .fp-list { grid-template-columns: minmax(0, 1fr); } }

/* Google result preview */
.sp-box { background: #fff; color: #202124; padding: 20px 22px; font-family: Arial, sans-serif; border: 1px solid var(--rule); }
.sp-box.m { max-width: 400px; padding: 16px; border-radius: 12px; }
.sp-host { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.sp-fav { width: 28px; height: 28px; border-radius: 50%; background: #F1F3F4; border: 1px solid #DADCE0; display: flex; align-items: center; justify-content: center; font: 700 13px/1 Arial, sans-serif; color: #5F6368; flex: none; }
.sp-name { display: block; font-size: 14px; color: #202124; line-height: 20px; }
.sp-url { display: block; font-size: 12px; color: #4D5156; line-height: 18px; overflow-wrap: anywhere; }
.sp-t { font: 400 20px/1.3 Arial, sans-serif; color: #1A0DAB; margin: 0 0 4px; text-transform: none; letter-spacing: 0; }
.sp-box.m .sp-t { font-size: 18px; }
.sp-d { font-size: 14px; line-height: 1.58; color: #4D5156; margin: 0; max-width: 600px; }
.meter { height: 6px; background: var(--rule); }
.meter i { display: block; height: 100%; width: 0; transition: width .15s, background-color .15s; }
.meter + .mono { color: var(--muted); }

/* Share previews */
.og-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.og-card { background: #fff; color: #1C1E21; border: 1px solid #DADDE1; overflow: hidden; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.og-img { aspect-ratio: 1.91 / 1; background: #E4E6EB center / cover no-repeat; }
.og-img.none, .og-sq.none { background: #E4E6EB; }
.og-txt { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.og-txt b { font-size: 16px; line-height: 1.25; }
.og-txt small { font-size: 14px; color: #606770; line-height: 1.35; }
.og-txt span { font-size: 12px; color: #606770; }
.og-txt.fb { background: #F0F2F5; }
.og-txt.fb span { text-transform: uppercase; }
.og-txt.li b { font-size: 14px; }
.og-x-host { padding: 6px 12px 10px; font-size: 13px; color: #536471; }
.og-xs { display: flex; }
.og-sq { width: 120px; flex: none; aspect-ratio: 1; background: #E4E6EB center / cover no-repeat; }
.og-wa { display: flex; background: #D9FDD3; margin: 8px; border-radius: 6px; overflow: hidden; }
.og-wa .og-sq { width: 84px; }
.og-wa-link { margin: 0 12px 10px; font-size: 13px; color: #027EB5; overflow-wrap: anywhere; }
.og-sl { border-left: 4px solid #DDDDDD; margin: 12px; padding: 0 0 0 12px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.og-sl-site { font-size: 13px; color: #616061; }
.og-sl b { color: #1264A3; }
.og-sl img { max-width: 360px; margin-top: 8px; border-radius: 4px; }
.og-h { font: 500 12px/1 var(--mono); color: var(--muted); margin: 0 0 8px; }
.og-checks { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.og-checks li { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.og-checks b { font: 500 12px/1.6 var(--mono); }
.og-checks .ok b { color: #6CC79E; } .og-checks .warn b { color: var(--y); } .og-checks .bad b { color: #F08A8A; }
@media (max-width: 900px) { .og-grid { grid-template-columns: minmax(0, 1fr); } }

/* Favicon previews */
.fv-prev { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.fv-tab { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px 10px 0 0; font: 400 13px/1 system-ui, sans-serif; max-width: 260px; }
.fv-tab.l { background: #FFFFFF; color: #1F1F1F; }
.fv-tab.d { background: #35363A; color: #E8EAED; }
.fv-tab img { width: 16px; height: 16px; flex: none; }
.fv-strip { padding: 0 0 0 0; background: #DEE1E6; }
.fv-strip.d { background: #202124; }
.fv-home { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px; background: linear-gradient(160deg, #3B4A6B, #1C2233); font: 500 12px/1 system-ui, sans-serif; color: #fff; }
.fv-home img { width: 72px; height: 72px; border-radius: 16px; }
#fv-big { width: 128px; height: 128px; }

/* Signature preview: an email on white */
.sg-mail { background: #fff; color: #222; padding: 24px; border: 1px solid var(--rule); overflow-x: auto; }
.sg-mail .sg-hi { font: 14px/1.5 Arial, sans-serif; color: #222; margin: 0 0 18px; }
.tool textarea.code { font: 12px/1.5 var(--mono); min-height: 140px; }

/* Domain search box */
.big-search { display: flex; gap: 10px; }
.big-search input { flex: 1; min-height: 56px !important; font-size: 18px !important; }
.big-search .btn { min-height: 56px; }
@media (max-width: 560px) { .big-search { flex-direction: column; } }

.og-h { margin: 0 0 8px; }
.sg-hi p { margin: 0 0 1em; }
.sg-hi p:last-child { margin-bottom: 0.4em; }