/*
 * Free tools pages (/tools). Built on the Help Centre / Learning Hub look (content/_head: .kb, .kb-hero, .kb-body, .kb-cta).
 * The one memorable piece is the result "slip": a courier / cash-memo style paper with a torn top edge and dashed lines.
 */
.ft {
    --paper: #fffdf6;
    --paper-line: #e9e1c8;
    --ink: #0c1b2c;
    --muted: #5b6878;
    --line: #e3e9f0;
    --card: #fff;
    --soft: #f1f5f9;
    --green: #2fc28a;
    --green-d: #13875e;
    --red: #c2410c;
    --field: #fff;
}

/* ---------- hero ---------- */
.ft-hero { padding-bottom: 88px; }
.ft-hero-in { position: relative; z-index: 1; padding-top: 34px; max-width: 900px; margin: 0 auto; text-align: center; }
.ft-hero h1 { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; letter-spacing: -.03em; line-height: 1.08; font-size: clamp(30px, 4.4vw, 52px); margin: 14px auto 12px; color: #fff; text-wrap: balance; }
.ft.is-bn .ft-hero h1 { font-family: "Hind Siliguri", system-ui, sans-serif; letter-spacing: 0; line-height: 1.25; }
.ft-lead { color: rgba(255, 255, 255, .8); font-size: 17.5px; max-width: 680px; margin: 0 auto; }
.ft-assure { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 16px 0 0; font-size: 14px; color: rgba(255, 255, 255, .78); }
.ft-assure span { display: inline-flex; align-items: center; gap: 7px; }
.ft-assure span::before { content: ""; width: 14px; height: 8px; border-left: 2px solid #2fc28a; border-bottom: 2px solid #2fc28a; transform: rotate(-45deg) translateY(-2px); }
.ft-assure a { color: #7ff0bf; font-weight: 700; }

/* ---------- layout ---------- */
.ft-main { position: relative; margin-top: -56px; padding-bottom: 72px; }
.ft-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.ft-app { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: 0 24px 50px -32px rgba(12, 32, 52, .5); min-width: 0; }

/* ---------- form ---------- */
.ft-form { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 24px; align-items: start; }
.ft-form > fieldset, .ft-form > .ft-stack { grid-column: 1; }
.ft-form > .ft-slip, .ft-form > .ft-inv-wrap { grid-column: 2; }
.ft-wide-form { grid-template-columns: 1fr; }
.ft-wide-form > fieldset { grid-column: 1; }
.ft-stack { display: grid; gap: 18px; }
.ft fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ft legend { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 10px; padding: 0; float: none; width: auto; }
.ft-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.ft-field { min-width: 0; }
.ft-field.is-wide { grid-column: 1 / -1; }
.ft-field > label, .ft-lab { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin: 0 0 5px; }
.ft-field small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 4px; line-height: 1.35; }
.ft-in { display: flex; align-items: center; border: 1px solid #cfd8e3; border-radius: 12px; background: var(--field); transition: border-color .15s, box-shadow .15s; }
.ft-in:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(47, 194, 138, .22); }
.ft-in i { font-style: normal; color: var(--muted); font-weight: 600; padding: 0 0 0 12px; font-size: 15px; }
.ft-in i:last-child { padding: 0 12px 0 0; }
.ft-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 11px 12px; font-size: 16px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ft-in.has-pre input { padding-left: 6px; }
.ft-text { display: block; width: 100%; border: 1px solid #cfd8e3; border-radius: 12px; background: var(--field); padding: 10px 12px; font-size: 16px; color: var(--ink); font-family: inherit; }
.ft-text:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px rgba(47, 194, 138, .22); }
textarea.ft-text { resize: vertical; line-height: 1.5; }
.ft-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; }
.ft-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.ft-checks .ft-lab { width: 100%; margin: 0; }
.ft-checks label { display: inline-flex; gap: 7px; align-items: center; font-size: 14.5px; color: var(--ink); }
.ft input[type="checkbox"], .ft input[type="radio"] { accent-color: var(--green-d); width: 17px; height: 17px; }

/* segmented choice (area, mode, language) */
.ft-seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.ft-seg.is-small { margin: 0; }
.ft-seg label { position: relative; cursor: pointer; }
.ft-seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ft-seg span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid #cfd8e3; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--field); }
.ft-seg input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.ft-seg input:focus-visible + span { box-shadow: 0 0 0 3px rgba(47, 194, 138, .45); }

/* ---------- the result slip ---------- */
.ft-slip { position: relative; background: var(--paper); color: var(--ink); border-radius: 4px 4px 14px 14px; padding: 22px 18px 16px; margin-top: 8px;
    box-shadow: 0 1px 0 var(--paper-line), 0 18px 34px -24px rgba(60, 46, 10, .45); }
.ft-slip::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 9px;
    background: radial-gradient(circle at 6px 0, transparent 5.5px, var(--paper) 6px) 0 0 / 12px 9px repeat-x; }
.ft-slip-head { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.ft-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--paper-line); font-size: 14.5px; }
.ft-row span { color: #3b4858; }
.ft-row output { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ft-row.is-total { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 10px; }
.ft-row.is-total span { font-weight: 700; color: var(--ink); }
.ft-row.is-total output { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--green-d); }
.ft-slip-note { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.ft-slip-note:empty { display: none; }
.ft-check, .ft-batch { margin-top: 14px; padding-top: 12px; border-top: 2px dotted var(--paper-line); }
.ft-check .ft-field { margin-bottom: 4px; }
.ft-verdict { margin: 10px 0 0; font-size: 14px; font-weight: 700; }
.ft-verdict:empty { display: none; }
.ft-verdict.is-good { color: var(--green-d); }
.ft-verdict.is-low { color: #a16207; }
.ft-verdict.is-loss, .ft-verdict.is-none { color: var(--red); }
.ft-sub { margin-top: 6px !important; }

/* ROAS meter: green fill = your ROAS, the tick = break-even */
.ft-meter { position: relative; height: 10px; border-radius: 99px; background: #efe8d2; margin: 14px 0 6px; }
.ft-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--green); transition: width .25s ease; }
.ft-meter-fill.is-low { background: #f59e0b; }
.ft-meter-mark { position: absolute; top: -5px; width: 3px; height: 20px; background: var(--ink); border-radius: 2px; transform: translateX(-1px); }

/* ---------- buttons ---------- */
.ft-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 999px; border: 0; background: var(--green); color: #06281a !important; font-weight: 700; font-size: 15px; text-decoration: none !important; cursor: pointer; }
.ft-btn:hover { background: #29b07d; }
.ft-btn:focus-visible, .ft-ghost:focus-visible { outline: 3px solid rgba(47, 194, 138, .5); outline-offset: 2px; }
.ft-ghost { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid #cfd8e3; background: transparent; color: var(--ink) !important; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none !important; }
.ft-ghost:hover { border-color: var(--green); }
.ft-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.ft-x { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--muted); padding: 0 6px; cursor: pointer; }

/* the promotion under each tool */
.ft-auto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 0; padding: 14px 16px; border-radius: 14px; background: #effbf6; color: #0f3d2c; font-size: 14.5px; }
.ft-auto span { flex: 1 1 260px; }
.ft-auto a { font-weight: 700; color: var(--green-d); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- side column ---------- */
.ft-side { position: sticky; top: 92px; display: grid; gap: 16px; }
.ft-promo { border-radius: 20px; padding: 22px; color: #fff; background: radial-gradient(80% 90% at 0% 0%, rgba(47, 194, 138, .35), transparent 65%), #0c2034; }
.ft-promo b { display: block; font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 21px; line-height: 1.2; margin-bottom: 8px; }
.ft.is-bn .ft-promo b { font-family: "Hind Siliguri", system-ui, sans-serif; }
.ft-promo p { color: rgba(255, 255, 255, .78); font-size: 14.5px; margin: 0 0 16px; }
.ft-promo .ft-btn { width: 100%; }
.ft-link { display: block; text-align: center; margin-top: 10px; color: #7ff0bf; font-weight: 600; font-size: 14px; }
.ft-rel { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
.ft-rel b { display: block; font-size: 14px; color: var(--muted); margin: 2px 6px 8px; }
.ft-rel a { display: flex; gap: 10px; align-items: center; padding: 8px 6px; border-radius: 10px; color: var(--ink); font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.ft-rel a:hover { background: var(--soft); }
.ft-rel .ft-all { color: var(--green-d); }
.ft-ic { width: 22px; height: 22px; flex: none; color: var(--green-d); }

/* ---------- how to, article, faq ---------- */
.ft-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: center; margin-top: 48px; }
.ft-how h2, .ft-faq h2, .ft-read h2, .ft-group h2 { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: clamp(23px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0 0 14px; }
.ft.is-bn .ft-how h2, .ft.is-bn .ft-faq h2, .ft.is-bn .ft-read h2, .ft.is-bn .ft-group h2 { font-family: "Hind Siliguri", system-ui, sans-serif; letter-spacing: 0; }
.ft-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.ft-steps li { counter-increment: s; position: relative; padding: 0 0 14px 46px; font-size: 16.5px; color: var(--ink); }
.ft-steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.ft-steps li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 32px; bottom: 2px; border-left: 2px dashed var(--line); }
.ft-fig { margin: 0; }
.ft-fig img { display: block; width: 100%; height: auto; border-radius: 16px; background: #071726; }
.ft-fig figcaption { color: var(--muted); font-size: 13.5px; margin-top: 8px; text-align: center; }
.ft-article { max-width: 760px; margin: 52px auto 0; }
.ft-article .ft-fig { margin: 24px 0 26px; }
.ft-article .ft-fig-cover { margin-top: 0; }
.ft-faq { max-width: 760px; margin: 40px auto 0; }
.ft-faq details { border: 1px solid var(--line); background: var(--card); border-radius: 14px; margin: 0 0 10px; }
.ft-faq summary { cursor: pointer; padding: 15px 18px; font-weight: 700; color: var(--ink); font-size: 16.5px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.ft-faq summary::-webkit-details-marker { display: none; }
.ft-faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--green-d); }
.ft-faq details[open] summary::after { content: "−"; }
.ft-faq summary:focus-visible { outline: 3px solid rgba(47, 194, 138, .5); border-radius: 14px; }
.ft-faq p { margin: 0; padding: 0 18px 16px; color: #2b3a4b; font-size: 15.5px; }
.ft-read { max-width: 760px; margin: 36px auto 0; }
.ft-read ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ft-read a { display: block; height: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-weight: 700; line-height: 1.35; }
.ft-read a:hover { border-color: var(--green); }
.ft-read small { display: block; color: var(--green-d); font-weight: 700; font-size: 12.5px; margin-bottom: 3px; }
.ft-cta { max-width: 960px; margin: 44px auto 0; }

/* ---------- hub ---------- */
.ft-hub { display: grid; gap: 34px; }
.ft-group { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: 0 24px 50px -36px rgba(12, 32, 52, .5); }
.ft-group + .ft-group { box-shadow: none; }
.ft-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ft-card { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-content: start; padding: 16px; border-radius: 14px; background: var(--soft); color: var(--ink); }
.ft-card .ft-ic { grid-row: span 2; width: 26px; height: 26px; margin-top: 2px; }
.ft-card b { font-size: 16.5px; line-height: 1.3; }
.ft-card span { color: var(--muted); font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ft-card:hover, .ft-card:focus-visible { background: #e8faf2; outline: none; }
.ft-card:focus-visible { box-shadow: inset 0 0 0 2px var(--green); }
.ft-hub-about { margin-top: 48px; }
.ft-hub-about .kb-body p { font-size: 16.5px; }
.ft-hub-cover { max-width: 760px; margin: 40px auto 0; }

/* ---------- invoice ---------- */
.ft-items { display: grid; gap: 8px; margin-bottom: 10px; }
.ft-item { display: grid; grid-template-columns: minmax(0, 1fr) 64px 96px 28px; gap: 6px; align-items: center; }
.ft-inv-form .ft-ghost { margin-bottom: 14px; }
.ft-inv-wrap { display: grid; gap: 12px; justify-items: start; position: sticky; top: 92px; }
.ft-invoice { width: 100%; background: #fff; color: #111; border: 1px solid var(--line); border-radius: 12px; padding: 20px; font-size: 14px; }
.ft-invoice header { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid #111; }
.ft-invoice header b { display: block; font-size: 18px; }
.ft-invoice header span { display: block; color: #444; font-size: 13px; }
.ft-inv-no { text-align: right; }
.ft-inv-no strong { display: block; letter-spacing: .08em; font-size: 15px; }
.ft-inv-to { padding: 12px 0; }
.ft-inv-to small { display: block; color: #666; font-weight: 600; }
.ft-inv-to b, .ft-inv-to span { display: block; }
.ft-invoice table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.ft-invoice th, .ft-invoice td { padding: 6px 4px; border-bottom: 1px solid #e5e5e5; text-align: right; font-variant-numeric: tabular-nums; }
.ft-invoice th:first-child, .ft-invoice td:first-child { text-align: left; }
.ft-invoice th { font-size: 12.5px; color: #555; }
.ft-inv-sum { margin-left: auto; max-width: 280px; }
.ft-inv-sum .ft-row { border-bottom-color: #eee; padding: 4px 0; font-size: 14px; }
.ft-inv-sum .ft-row span { color: #333; }
.ft-inv-sum .ft-row.is-total output { font-size: 22px; color: #111; }
.ft-inv-note { margin: 12px 0 0; color: #444; font-size: 13px; text-align: center; }

/* ---------- QR ---------- */
.ft-qr-out { text-align: center; }
.ft-qr { display: grid; place-items: center; min-height: 200px; padding: 14px; background: #fff; border-radius: 12px; margin: 4px 0 10px; color: var(--muted); font-size: 14px; }
.ft-qr img, .ft-qr canvas { max-width: 100%; height: auto !important; width: 220px !important; image-rendering: pixelated; }
.ft-qr-data { font-size: 12.5px; color: var(--muted); word-break: break-all; margin: 0 0 12px; }

/* ---------- description generator ---------- */
.ft-outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ft-out-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ft-out-h label { font-weight: 700; font-size: 14px; color: var(--ink); }
.ft-out textarea { background: var(--paper); font-size: 14.5px; }

/* ---------- WhatsApp ---------- */
.ft-wa-msg { white-space: pre-wrap; background: #dcf8c6; color: #0b1f12; border-radius: 12px 12px 12px 4px; padding: 12px 14px; font-family: inherit; font-size: 14.5px; margin: 0 0 12px; }

/* ---------- AI label remover (ported; tool runs in the browser) ---------- */
.alr-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 40px 20px; border: 2px dashed #b9c6d4; border-radius: 18px; background: var(--soft); cursor: pointer; transition: border-color .15s, background .15s; margin: 0; }
.alr-drop:hover, .alr-drop.over, .alr-drop:focus-visible { border-color: var(--green); background: #effbf6; outline: none; }
.alr-drop strong { font-size: 18px; color: var(--ink); }
.alr-drop span { color: var(--muted); font-size: 14px; }
.alr-drop-ic { width: 52px; height: 52px; padding: 12px; border-radius: 50%; background: var(--ink); color: #fff; margin-bottom: 6px; }
.alr.has-files .alr-drop { padding: 22px 20px; }
.alr-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 14px 2px; font-size: 14.5px; color: var(--ink); }
.alr-opts label { display: inline-flex; gap: 7px; align-items: center; }
.alr-btns { margin-left: auto; display: flex; gap: 8px; }
.alr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.alr-item { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.alr-thumb { width: 80px; height: 80px; border-radius: 10px; overflow: hidden; background: var(--soft); }
.alr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alr-thumb.noimg img { display: none; }
.alr-name { margin: 0; font-weight: 700; word-break: break-all; color: var(--ink); }
.alr-meta { margin: 2px 0 8px; color: var(--muted); font-size: 13px; }
.alr-verdict { margin: 0 0 8px; font-weight: 700; font-size: 14.5px; }
.alr-verdict.ai { color: #b4501f; } .alr-verdict.meta { color: var(--green-d); } .alr-verdict.none { color: var(--muted); } .alr-verdict.err { color: var(--red); }
.alr-tags { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.alr-tags li { font-size: 12.5px; padding: 4px 9px; border-radius: 8px; background: var(--soft); border: 1px solid var(--line); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.alr-tags li.k-ai { background: #fff1e6; border-color: #f3c6a3; color: #8a3c12; }
.alr-tags li.k-gps { background: #fdecec; border-color: #f2b8b5; color: #8e2a26; }
.alr-ok { margin: 0; color: var(--green-d); font-weight: 700; font-size: 14px; }
.alr-ok.is-warn { color: #a16207; }
.alr-private { text-align: center; margin: 14px 0 0; color: var(--muted); font-size: 13.5px; }

/* ---------- dark mode ---------- */
[data-theme="dark"] .ft { --paper: #10283d; --paper-line: rgba(255, 255, 255, .14); --ink: #e8edf3; --muted: #9aa8b8; --line: rgba(255, 255, 255, .09); --card: #0d2135; --soft: #112a42; --field: #0a1c2d; --green-d: #4fd8a2; --red: #fb923c; }
[data-theme="dark"] .ft-in, [data-theme="dark"] .ft-text, [data-theme="dark"] .ft-seg span, [data-theme="dark"] .ft-ghost { border-color: rgba(255, 255, 255, .16); }
[data-theme="dark"] .ft-seg input:checked + span { background: #2fc28a; border-color: #2fc28a; color: #06281a; }
[data-theme="dark"] .ft-row span { color: #c4cfdb; }
[data-theme="dark"] .ft-slip { box-shadow: 0 18px 34px -24px rgba(0, 0, 0, .7); }
[data-theme="dark"] .ft-meter { background: rgba(255, 255, 255, .12); }
[data-theme="dark"] .ft-auto { background: #0f3327; color: #c9f5e2; }
[data-theme="dark"] .ft-faq p { color: #c4cfdb; }
[data-theme="dark"] .ft-card:hover, [data-theme="dark"] .ft-card:focus-visible, [data-theme="dark"] .alr-drop:hover { background: #0f3327; }
[data-theme="dark"] .ft-steps li::before { background: #2fc28a; color: #06281a; }
[data-theme="dark"] .alr-drop-ic { background: #2fc28a; color: #06281a; }
[data-theme="dark"] .alr-tags li.k-ai { background: #3a2617; color: #f5c7a4; border-color: #5a3a22; }
[data-theme="dark"] .alr-tags li.k-gps { background: #3a1d1c; color: #f2b8b5; border-color: #5a2a28; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
    .ft-grid { grid-template-columns: 1fr; }
    .ft-side { position: static; grid-template-columns: 1fr 1fr; }
    .ft-outs { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .ft-form { grid-template-columns: 1fr; }
    .ft-form > .ft-slip, .ft-form > .ft-inv-wrap { grid-column: 1; }
    .ft-inv-wrap { position: static; }
    .ft-how { grid-template-columns: 1fr; }
    .ft-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .ft-hero { padding-bottom: 76px; }
    .ft-lead { font-size: 16px; }
    .ft-app, .ft-group { padding: 16px; border-radius: 16px; }
    .ft-side { grid-template-columns: 1fr; }
    .ft-cards, .ft-read ul { grid-template-columns: 1fr; }
    .ft-fields { gap: 10px; }
    .ft-row.is-total output { font-size: 26px; }
    .ft-item { grid-template-columns: minmax(0, 1fr) 52px 80px 24px; }
    .alr-item { grid-template-columns: 60px minmax(0, 1fr); }
    .alr-thumb { width: 60px; height: 60px; }
    .alr-act { grid-column: 1 / -1; }
    .alr-btns { margin-left: 0; }
}
@media (max-width: 380px) {
    .ft-fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .ft-meter-fill, .ft-in { transition: none; }
}

/* ---------- print: only the invoice ---------- */
@media print {
    body.ft * { visibility: hidden !important; }
    body.ft .ft-invoice, body.ft .ft-invoice * { visibility: visible !important; }
    body.ft .ft-invoice { position: absolute; left: 0; top: 0; width: 100%; border: 0; padding: 0; }
    body.ft { background: #fff !important; }
}
.ft-invoice .ft-row.is-total { border-top-color: #111; }
.ft-invoice .ft-row.is-total span, .ft-invoice .ft-row output { color: #111; }