/*
 * Free tools.
 *
 * Loaded only on /tools pages, after style.css and custom.css, so equal
 * specificity wins on load order. Everything here is scoped under .tool-page
 * or a .tool- prefix — nothing in this file may reach a page that did not ask
 * for it.
 *
 * Colours are literals rather than tokens because the rest of the frontend is
 * written that way; #078a21 is the brand green that passes AA on white, and
 * #15153c is the dark-mode card ground already used in custom.css. Dark mode
 * is the .dark class the theme toggle sets, not prefers-color-scheme.
 *
 * The ground is always set before the text that sits on it. Setting a colour
 * in one place and its background in another is how both ends end up light.
 */

/* 60px on top, matching .ptb-60 — /pricing, /how-it-works, /about,
   /restricted-countries and the eleven policy pages. (/faq reaches the same
   60px through .faq-page-head, which is its own block in custom.css.) The
   tools pages were the only ones opening at 40px.

   The 40px was tuned when the hub carried a breadcrumb above its heading; with
   that gone the heading sat noticeably closer to the notice bar than anywhere
   else on the site.

   Bottom stays at 72px. The tool pages close with a related-tools block that
   wants the extra room, and 12px at the foot of a page is not the kind of
   difference the eye picks up between two pages you cannot see at once. */
.tool-page {
    padding: 60px 0 72px;
}

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */

.tool-crumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: #5b6660;
}

.tool-crumb li + li::before {
    content: "/";
    margin-right: 8px;
    color: #aab4ae;
}

.tool-crumb a {
    color: #5b6660;
    text-decoration: none;
}

.tool-crumb a:hover,
.tool-crumb a:focus-visible {
    color: #078a21;
    text-decoration: underline;
}

.dark .tool-crumb ol,
.dark .tool-crumb a { color: #b6c0ba; }
.dark .tool-crumb li + li::before { color: #6c7a72; }
.dark .tool-crumb a:hover,
.dark .tool-crumb a:focus-visible { color: #7ede90; }

/* ── Page head ────────────────────────────────────────────────────────────── */

.tool-head {
    max-width: 720px;
    margin: 0 0 32px;
}

.tool-head__eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #078a21;
}

.tool-head__title {
    margin: 0 0 12px;
    font-size: 34px;
    line-height: 1.2;
    text-wrap: balance;
}

.tool-head__blurb {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: #47524c;
}

.dark .tool-head__blurb { color: #c3ccc6; }
.dark .tool-head__eyebrow { color: #7ede90; }

/* ── The tool itself ──────────────────────────────────────────────────────── */

.tool-form {
    max-width: 560px;
    padding: 24px;
    border: 1px solid #dfe7e2;
    border-radius: 14px;
    background: #f7fbf8;
}

.tool-form--wide { max-width: 760px; }

.dark .tool-form {
    background: #15153c;
    border-color: rgba(255, 255, 255, .12);
}

.tool-lead {
    margin: 0 0 18px;
    font-size: 14px;
    color: #47524c;
}

.dark .tool-lead { color: #c3ccc6; }

.tool-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    /* Labels line up even when one field carries a hint and the other does not. */
    align-items: start;
}

.tool-field + .tool-field,
.tool-row + .tool-field,
.tool-row + .tool-row { margin-top: 18px; }

/*
 * Inside a row the fields are grid siblings sitting side by side, not stacked,
 * so the adjacent-sibling margin above pushes the second one 18px down inside
 * its own cell and the two labels stop lining up. The row's `gap` already
 * provides the spacing here.
 */
.tool-row > .tool-field + .tool-field { margin-top: 0; }

/*
 * For a field whose value is one or two characters. An equal grid column gives
 * a count of "5" the same width as a network name, which reads as a mistake.
 * Capped rather than sized in the grid so the column keeps its share and the
 * next field still starts where the reader expects.
 */
.tool-field--narrow .tool-input { max-width: 140px; }

.tool-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #232323;
}

.dark .tool-field label { color: #f2f5f3; }

/*
 * The prefix and suffix are drawn from data attributes on the wrapper rather
 * than as sibling elements, so the input keeps its own box and the symbol can
 * never be tabbed to or read out as a separate control.
 */
.tool-input { position: relative; }

.tool-input input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    font-size: 16px; /* 16px or iOS zooms the page on focus */
    font-family: inherit;
    color: #232323;
    background: #ffffff;
    border: 1px solid #cfdad4;
    border-radius: 10px;
    -webkit-appearance: none;
    appearance: none;
}

.tool-input--prefix input { padding-left: 30px; }
.tool-input--suffix input { padding-right: 34px; }

.tool-input--prefix::before,
.tool-input--suffix::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: #6b766f;
    pointer-events: none;
}

.tool-input--prefix::before { content: attr(data-prefix); left: 14px; }
.tool-input--suffix::after  { content: attr(data-suffix); right: 14px; }

.tool-input input:focus-visible {
    outline: 2px solid #078a21;
    outline-offset: 1px;
    border-color: #078a21;
}

.dark .tool-input input {
    color: #f2f5f3;
    background: #0e0e37;
    border-color: rgba(255, 255, 255, .18);
}

.dark .tool-input--prefix::before,
.dark .tool-input--suffix::after { color: #aab4ae; }

.dark .tool-input input:focus-visible {
    outline-color: #7ede90;
    border-color: #7ede90;
}

.tool-hint {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6b766f;
}

.dark .tool-hint { color: #aab4ae; }

/* ── Results ──────────────────────────────────────────────────────────────── */

.tool-result {
    display: block;
    margin-top: 22px;
    padding: 18px;
    border-radius: 12px;
    background: #eef5f0;
    font-size: 14px;
    color: #47524c;
}

.dark .tool-result {
    background: #0e0e37;
    color: #c3ccc6;
}

.tool-result--filled {
    background: #ffffff;
    border: 1px solid #dfe7e2;
    color: #232323;
}

.dark .tool-result--filled {
    background: #10102e;
    border-color: rgba(255, 255, 255, .14);
    color: #f2f5f3;
}

.tool-result__figure {
    display: block;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.1;
    color: #078a21;
    font-variant-numeric: tabular-nums;
}

.tool-result__figure--sub {
    margin-top: 14px;
    font-size: 26px;
    color: #232323;
}

.dark .tool-result__figure { color: #7ede90; }
.dark .tool-result__figure--sub { color: #f2f5f3; }

.tool-result__label {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    color: #6b766f;
}

.dark .tool-result__label { color: #aab4ae; }

.tool-result__note {
    display: block;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e6ede9;
    font-size: 13px;
    line-height: 1.6;
    color: #47524c;
}

.dark .tool-result__note {
    border-top-color: rgba(255, 255, 255, .12);
    color: #c3ccc6;
}

/*
 * Verdict colours are measured against the ground they land on, not chosen to
 * look right in isolation. #b3261e on white is 5.9:1; #ff9d94 on #10102e is
 * 7.4:1. Both clear AA for body text with room to spare.
 */
.is-good { color: #06701a; }
.is-bad  { color: #b3261e; }

.dark .is-good { color: #7ede90; }
.dark .is-bad  { color: #ff9d94; }

/* Verdict block, used where a result is a judgement rather than a number. */

.tool-verdict {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e6ede9;
}

.dark .tool-verdict { border-bottom-color: rgba(255, 255, 255, .12); }

.tool-verdict__figure {
    display: block;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.tool-verdict--good .tool-verdict__figure { color: #06701a; }
.tool-verdict--bad  .tool-verdict__figure { color: #b3261e; }

.dark .tool-verdict--good .tool-verdict__figure { color: #7ede90; }
.dark .tool-verdict--bad  .tool-verdict__figure { color: #ff9d94; }

.tool-verdict__label {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    color: #6b766f;
}

.dark .tool-verdict__label { color: #aab4ae; }

.tool-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
    margin: 0;
}

.tool-figures > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #e6ede9;
}

.dark .tool-figures > div { border-bottom-color: rgba(255, 255, 255, .1); }

.tool-figures dt {
    font-size: 13px;
    font-weight: 400;
    color: #6b766f;
}

.tool-figures dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dark .tool-figures dt { color: #aab4ae; }

/* ── Select, buttons and lists ────────────────────────────────────────────── */

/*
 * The select is styled here rather than left to nice-select, which main.js
 * initialises globally. Tool forms are rebuilt by their own scripts and a
 * hijacked select would fight them; appearance:none plus an inline SVG arrow
 * keeps it a native control that works with the keyboard and on mobile.
 */
.tool-input select {
    width: 100%;
    height: 46px;
    padding: 0 38px 0 14px;
    font-size: 16px;
    font-family: inherit;
    color: #232323;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b766f' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    border: 1px solid #cfdad4;
    border-radius: 10px;
    -webkit-appearance: none;
    appearance: none;
}

.dark .tool-input select {
    color: #f2f5f3;
    background-color: #0e0e37;
    border-color: rgba(255, 255, 255, .18);
}

.tool-input select:focus-visible {
    outline: 2px solid #078a21;
    outline-offset: 1px;
    border-color: #078a21;
}

.dark .tool-input select:focus-visible {
    outline-color: #7ede90;
    border-color: #7ede90;
}

.tool-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.tool-btn-quiet {
    padding: 10px 16px;
    font-size: 14px;
    font-family: inherit;
    color: #47524c;
    background: transparent;
    border: 1px solid #cfdad4;
    border-radius: 10px;
    cursor: pointer;
}

.tool-btn-quiet:hover { border-color: #078a21; color: #078a21; }

.dark .tool-btn-quiet { color: #c3ccc6; border-color: rgba(255, 255, 255, .18); }
.dark .tool-btn-quiet:hover { color: #7ede90; border-color: #7ede90; }

.tool-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tool-list li + li { margin-top: 8px; }

.tool-list code {
    display: block;
    padding: 10px 12px;
    font-size: 16px;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
    color: #232323;
    background: #f2f7f4;
    border-radius: 8px;
    word-break: break-all;
}

.dark .tool-list code { color: #f2f5f3; background: #0e0e37; }

/*
 * A warning above a tool that generates card-shaped strings. Amber rather than
 * red: this is a caution about how the output may be used, not an error, and
 * red here would read as "something went wrong" before anything has happened.
 */
.tool-warning {
    max-width: 560px;
    margin-bottom: 20px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #6a4a06;
    background: #fff8e6;
    border: 1px solid #f0d79a;
    border-left-width: 4px;
    border-radius: 10px;
}

.dark .tool-warning {
    color: #ffdf9e;
    background: #2e2410;
    border-color: rgba(240, 215, 154, .35);
}

.tool-attribution {
    margin-top: 26px;
    font-size: 13px;
    color: #6b766f;
}

.tool-attribution a { color: #078a21; }

.dark .tool-attribution { color: #aab4ae; }
.dark .tool-attribution a { color: #7ede90; }

/* ── Generated test cards ─────────────────────────────────────────────────── */

.gen-list { margin: 0; padding: 0; list-style: none; }

.gen-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
}

.gen-item + .gen-item { border-top: 1px solid #eef3f0; }

.dark .gen-item + .gen-item { border-top-color: rgba(255, 255, 255, .08); }

.gen-item__meta { display: flex; gap: 8px; }

/*
 * Every value is a button, because every value is copyable. Styled to read as
 * text rather than as a control — a row of six buttons would look like a form
 * — but it is a real <button>, so it is reachable by keyboard and announced as
 * something that can be activated.
 */
.mcopy {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    color: #232323;
    background: #f2f7f4;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.mcopy--number {
    padding: 9px 12px;
    font-size: 16px;
    letter-spacing: .06em;
}

.mcopy--meta {
    padding: 9px 10px;
    font-size: 14px;
    color: #47524c;
}

.mcopy:hover { border-color: #078a21; }

.mcopy:focus-visible {
    outline: 2px solid #078a21;
    outline-offset: 2px;
}

.mcopy.is-copied {
    color: #06701a;
    background: #e3f3e7;
    border-color: #078a21;
    letter-spacing: normal;
}

.dark .mcopy { color: #f2f5f3; background: #0e0e37; }
.dark .mcopy--meta { color: #c3ccc6; }
.dark .mcopy:hover { border-color: #7ede90; }
.dark .mcopy:focus-visible { outline-color: #7ede90; }

.dark .mcopy.is-copied {
    color: #7ede90;
    background: #143a22;
    border-color: #7ede90;
}

@media (max-width: 575px) {
    .gen-item { justify-content: flex-start; }
    .mcopy--number { font-size: 15px; letter-spacing: .04em; }
}

@media (prefers-reduced-motion: reduce) {
    .mcopy { transition: none; }
}

/* ── MCC results ──────────────────────────────────────────────────────────── */

.mcc-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mcc-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 14px;
    padding: 12px 0;
    border-bottom: 1px solid #e6ede9;
}

.mcc-item:last-child { border-bottom: 0; padding-bottom: 0; }

.dark .mcc-item { border-bottom-color: rgba(255, 255, 255, .1); }

.mcc-item__code {
    grid-row: span 2;
    align-self: start;
    min-width: 4ch;
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #078a21;
}

.dark .mcc-item__code { color: #7ede90; }

.mcc-item__desc {
    font-size: 14px;
    line-height: 1.5;
    color: #232323;
}

.dark .mcc-item__desc { color: #f2f5f3; }

.mcc-item__group {
    font-size: 12px;
    color: #6b766f;
}

.dark .mcc-item__group { color: #aab4ae; }

/*
 * The flag spans both columns so it reads as a note on the whole row rather
 * than as part of the description. Amber, not red: "commonly blocked" is a
 * caution about a pattern, not a statement about the visitor's own card.
 */
.mcc-item__flag {
    grid-column: 1 / -1;
    margin-top: 6px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #6a4a06;
    background: #fff8e6;
    border-left: 3px solid #e0b64a;
    border-radius: 6px;
}

.dark .mcc-item__flag {
    color: #ffdf9e;
    background: #2e2410;
    border-left-color: rgba(240, 215, 154, .55);
}

/* ── Explainer ────────────────────────────────────────────────────────────── */

.tool-notes {
    max-width: 680px;
    margin-top: 44px;
}

.tool-notes h2 {
    margin: 30px 0 10px;
    font-size: 21px;
    line-height: 1.3;
}

.tool-notes h2:first-child { margin-top: 0; }

.tool-notes p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.7;
    color: #47524c;
}

.dark .tool-notes p { color: #c3ccc6; }

/* Longer explainers (11 Oct 2026): lists, FAQ questions and links. */
.tool-notes ul {
    margin: 0 0 16px;
    padding-left: 22px;
    list-style: disc;
}

.tool-notes li {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.6;
    color: #47524c;
    list-style: disc;
}

.dark .tool-notes li { color: #c3ccc6; }

.tool-notes h3 {
    margin: 22px 0 6px;
    font-size: 17px;
    line-height: 1.35;
}

.tool-notes p a,
.tool-notes li a {
    color: var(--primary-color, #1f8a4c);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Closing card and cross-links ─────────────────────────────────────────── */

.tool-cta {
    margin-top: 48px;
    padding: 28px;
    border-radius: 14px;
    background: linear-gradient(90.88deg, #eef7f0 0%, #e6f3ea 100%);
    border: 1px solid rgba(7, 138, 33, .16);
}

.dark .tool-cta {
    background: linear-gradient(90.88deg, #143a22 0%, #0f2e1b 100%);
    border-color: rgba(255, 255, 255, .12);
}

.tool-cta__title { margin: 0 0 8px; font-size: 22px; }

.tool-cta__text {
    margin: 0 0 18px;
    max-width: 60ch;
    font-size: 15px;
    line-height: 1.6;
    color: #47524c;
}

.dark .tool-cta__title { color: #ffffff; }
.dark .tool-cta__text  { color: #d7dee0; }

.tool-related { margin-top: 44px; }

.tool-related__heading { margin: 0 0 16px; font-size: 20px; }

.tool-grid,
.tool-related__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tool-card a,
.tool-related__list a {
    display: block;
    height: 100%;
    padding: 18px;
    border: 1px solid #dfe7e2;
    border-radius: 12px;
    background: #ffffff;
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease;
}

.tool-card a:hover,
.tool-related__list a:hover,
.tool-card a:focus-visible,
.tool-related__list a:focus-visible {
    border-color: #078a21;
    transform: translateY(-2px);
}

.dark .tool-card a,
.dark .tool-related__list a {
    background: #15153c;
    border-color: rgba(255, 255, 255, .12);
}

.dark .tool-card a:hover,
.dark .tool-related__list a:hover,
.dark .tool-card a:focus-visible,
.dark .tool-related__list a:focus-visible { border-color: #7ede90; }

.tool-card__name,
.tool-related__name {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 600;
    color: #232323;
}

.tool-card__blurb,
.tool-related__blurb {
    display: block;
    font-size: 13px;
    line-height: 1.6;
    color: #6b766f;
}

.dark .tool-card__name,
.dark .tool-related__name { color: #f2f5f3; }

.dark .tool-card__blurb,
.dark .tool-related__blurb { color: #aab4ae; }

/* ── Hub ──────────────────────────────────────────────────────────────────── */

/* The hub header used to be capped at 640px, which made it the narrowest
   measure on the site and the only one with no reason recorded. It now uses
   .tool-head's 720px like every tool page.

   That is the site's measure, arrived at twice independently: 720px here, and
   ~736px of text inside the col-xl-8 that /pricing, /how-it-works,
   /restricted-countries, /contact, /faq and the eleven policy pages all use.
   A 16px difference is not worth a fourth number to maintain. */

.tool-group { margin-bottom: 40px; }

.tool-group__heading {
    margin: 0 0 16px;
    font-size: 20px;
}

/* ── Small screens ────────────────────────────────────────────────────────── */

@media (max-width: 575px) {
    /* Top matches .ptb-60, which carries no small-screen override — /pricing
       and the policy pages open at 60px on a phone exactly as they do on a
       desktop. Tools was dropping to 24px here, so the two pages diverged by
       36px at phone width: a bigger gap than the 20px one on desktop, and in
       the opposite direction from where the eye would forgive it.

       Bottom still tightens to 48px. Nothing follows it but the footer. */
    .tool-page { padding: 60px 0 48px; }
    .tool-head__title { font-size: 27px; }
    .tool-form { padding: 18px; }
    .tool-row { grid-template-columns: 1fr; }
    .tool-figures { grid-template-columns: 1fr; }
    .tool-result__figure { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .tool-card a,
    .tool-related__list a { transition: none; }

    .tool-card a:hover,
    .tool-related__list a:hover { transform: none; }
}