/* ==========================================================================
   TIOO marketing — feature pages, part 2 (Stage B2, 2026-10):
   Cleaning & maintenance, Invoices & payments, Reports, Team & permissions,
   Security & privacy, Phone app for staff. Loads after the page kit
   (pages.css + mocks.css). Everything here is prefixed .fb-; the page
   heroes, spreads, bands, feature rows, steps, FAQ and CTA come from the
   kit. The drawn pieces (live cleaning board, cleaner's phone, invoice
   being built, reports by date range, roles grid, data-protection layers,
   staff phone) are an example hotel, never data. Motion: transform /
   opacity only, straight, off under html.reduced.
   ========================================================================== */

/* ---- hero visual stage: a tinted block behind a drawn piece --------- */
.fb-stage { position: relative; border: 1px solid var(--line); border-radius: var(--radius-l); background: #fff; padding: 20px; display: grid; place-items: center; min-height: 300px; overflow: hidden; }
@media (min-width: 900px) { .fb-stage { padding: 36px; min-height: 420px; } }
.band-warm .fb-stage { background: #fff; }
.fb-stage--pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; place-items: stretch; }
@media (min-width: 600px) { .fb-stage--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 190px); } }
@media (min-width: 1400px) { .fb-stage--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 32px; } }
.fb-stage .mock-card { max-width: none; box-shadow: var(--shadow-l); }
.fb-stage--pair .mock-phone { max-width: 220px; margin: 0 auto; }
.fb-caption { position: absolute; left: 14px; bottom: 12px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }

/* every drawn piece on these pages shares the same small type */
.fb-mock { font-size: 12.5px; color: var(--ink-2); }

/* ---- drawn phone screens (our own drawings inside the kit's frame) --- */
.fb-screen { position: absolute; inset: 0; background: #f4f5f7; color: var(--ink); font-size: 11px; line-height: 1.3; display: flex; flex-direction: column; overflow: hidden; font-family: var(--font-text); }
.fb-screen .top { padding: 26px 14px 10px; background: #fff; border-bottom: 1px solid var(--line); }
.fb-screen .top b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.fb-screen .top span { color: var(--ink-3); font-size: 10.5px; }
.fb-screen .body { padding: 10px 12px; display: grid; gap: 8px; align-content: start; }
.fb-screen .card { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; }
.fb-screen .card b { display: block; font-weight: 600; }
.fb-screen .card .sub { color: var(--ink-3); font-size: 10.5px; margin-top: 1px; }
.fb-screen .pill { display: inline-block; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
.fb-screen .row2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fb-screen .btn-row { display: flex; gap: 6px; margin-top: 8px; }
.fb-screen .b { flex: 1; text-align: center; padding: 7px 6px; border-radius: 5px; font-weight: 600; font-size: 10.5px; border: 1px solid var(--line-2); background: #fff; }
.fb-screen .b.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.fb-screen .b.green { background: var(--ok); color: #fff; border-color: var(--ok); }
.fb-screen .checks { display: grid; gap: 6px; margin-top: 8px; }
.fb-screen .checks div { display: flex; align-items: center; gap: 7px; }
.fb-screen .checks i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line-2); display: grid; place-items: center; color: #fff; font-style: normal; font-size: 9px; flex: none; transition: background .3s, border-color .3s; }
.fb-screen .checks i.on { background: var(--ok); border-color: var(--ok); }
.fb-screen .photos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.fb-screen .photos div { height: 36px; border-radius: 4px; background: linear-gradient(135deg, #d8dde6, #b9c2cf); display: grid; place-items: center; font-size: 9px; color: var(--ink-3); font-weight: 600; }
.fb-screen .photos div + div { background: linear-gradient(135deg, #e3e9f3, #c9d6ea); }
.fb-screen .stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin: 0; }
.fb-screen .stats div { background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 6px 7px; }
.fb-screen .stats b { font-family: var(--font-display); font-size: 15px; display: block; }
.fb-screen .stats span { font-size: 9.5px; color: var(--ink-3); }
.fb-screen .tabs2 { display: flex; gap: 4px; padding: 0 12px 8px; background: #fff; border-bottom: 1px solid var(--line); }
.fb-screen .tabs2 { overflow: hidden; } .fb-screen .tabs2 span { white-space: nowrap; font-size: 10px; font-weight: 600; padding: 4px 8px; border-radius: 4px; color: var(--ink-3); }
.fb-screen .tabs2 span.on { background: var(--ink); color: #fff; }
.fb-screen .card.st-arrive { border-left: 3px solid #2563eb; }
.fb-screen .card.st-in { border-left: 3px solid #16a34a; background: #f0fdf4; }
.fb-screen .card.st-leave { border-left: 3px solid #dc2626; }
.fb-screen .card.st-done { border-left: 3px solid var(--ok); }
.fb-screen .card.st-prog { border-left: 3px solid var(--accent); }
.fb-screen .card.st-due { border-left: 3px solid var(--warn); }
.fb-screen .toast { margin: 0 12px; padding: 8px 10px; background: var(--ink); color: #fff; border-radius: 6px; font-size: 10.5px; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.fb-screen .toast.show { opacity: 1; transform: none; }

/* ---- CLEANING: the live board (rooms move To clean → In progress → Clean) */
.fb-board .clean .row { transition: background .4s, border-color .4s; }
.fb-board .clean .row.is-done { background: var(--ok-soft); border-color: rgba(15,157,108,.3); }
.fb-board .tagc { transition: background .3s, color .3s; }
.fb-board .clean .row .who { display: block; color: var(--ink-3); font-size: 11px; }
.fb-board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; font-weight: 600; color: var(--ink); }
.fb-board-head span { color: var(--ink-3); font-weight: 500; font-size: 11.5px; }
.fb-board-sum { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.fb-board-sum span { font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: var(--radius-s); border: 1px solid var(--line); background: #fff; color: var(--ink-2); }
.fb-board-sum span b { font-variant-numeric: tabular-nums; }
/* the flow: four steps wide, with the two drawings sitting in steps */
.fb-flow .kit-step .mock-card { padding: 10px; font-size: 11.5px; max-width: none; box-shadow: none; }
.fb-flow .kit-step .mock-phone { max-width: 170px; margin: 20px 0 0; }

/* ---- INVOICE: a sheet being built, then marked paid ----------------- */
.fb-invoice { width: 100%; max-width: 480px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow-xl); padding: 22px 22px 20px; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .fb-invoice { padding: 28px 28px 24px; max-width: 520px; } }
.fb-invoice .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fb-invoice .logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.fb-invoice .logo i { width: 22px; height: 22px; border-radius: 5px; background: var(--ink); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 11px; }
.fb-invoice .meta { font-size: 11px; color: var(--ink-3); text-align: right; line-height: 1.5; }
.fb-invoice .meta b { color: var(--ink); font-size: 12.5px; display: block; }
.fb-invoice .status { display: inline-block; margin-top: 6px; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-s); background: var(--bg-3); color: var(--ink-3); transition: background .3s, color .3s; }
.fb-invoice .status.sent { background: var(--accent-soft); color: var(--accent-ink); }
.fb-invoice .status.paid { background: var(--ok-soft); color: var(--ok-ink); }
.fb-invoice .to { margin-top: 18px; font-size: 11.5px; color: var(--ink-3); }
.fb-invoice .to b { display: block; color: var(--ink); font-weight: 600; }
.fb-invoice .lines { margin-top: 16px; border-top: 1px solid var(--line); }
.fb-invoice .line { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.fb-invoice .line span:last-child { color: var(--ink); font-weight: 500; }
html.js-anim .fb-invoice .line:not(.is-on) { opacity: 0; transform: translateY(6px); }
.fb-invoice .line { transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.fb-invoice .total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; font-weight: 600; color: var(--ink); }
.fb-invoice .total b { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; }
.fb-invoice .pay { margin-top: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fb-invoice .pay .b { height: 32px; padding: 0 12px; border-radius: var(--radius-s); background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: opacity .3s; }
.fb-invoice .pay .b svg { width: 12px; height: 12px; }
.fb-invoice .pay small { color: var(--ink-3); font-size: 11px; }
.fb-invoice.is-paid .pay .b { background: var(--ok); }
.fb-stamp { position: absolute; right: 8%; top: 16%; font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 40px); letter-spacing: .08em; text-transform: uppercase; color: var(--ok-ink); border: 3px solid var(--ok-ink); border-radius: 6px; padding: 4px 12px; transform: rotate(-12deg) scale(1.4); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
.fb-stamp.show { opacity: .92; transform: rotate(-12deg) scale(1); }
/* the ways to pay: three hairline columns with the real provider names */
.fb-pay-cols { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 768px) { .fb-pay-cols { grid-template-columns: repeat(3, 1fr); border-top: 0; } }
.fb-pay-col { padding: 22px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 768px) { .fb-pay-col { padding: 28px 28px 28px 0; border-bottom: 0; border-top: 1px solid var(--line); } .fb-pay-col + .fb-pay-col { padding-left: 28px; border-left: 1px solid var(--line); } }
.fb-pay-col h3 { font-size: 22px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
.fb-pay-col h3 small { font-family: var(--font-text); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line-2); padding: 3px 7px; border-radius: var(--radius-s); }
.fb-pay-col p { margin-top: 10px; color: var(--ink-3); font-size: var(--fs-m); line-height: 1.5; }
.fb-pay-col ul { margin-top: 12px; display: grid; gap: 6px; font-size: var(--fs-s); color: var(--ink-2); }
.fb-pay-col li { display: flex; gap: 8px; align-items: flex-start; }
.fb-pay-col li svg { width: 14px; height: 14px; color: var(--accent); flex: none; margin-top: 4px; }
/* the invoice's life: a horizontal strip of states */
.fb-states { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fb-states span { font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: var(--radius-s); border: 1px solid var(--line-2); background: #fff; }
.fb-states span.paid { background: var(--ok-soft); color: var(--ok-ink); border-color: transparent; }
.fb-states span.over { background: var(--bad-soft); color: var(--bad-ink); border-color: transparent; }
.fb-states span.sent { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.fb-states svg { width: 16px; height: 16px; color: var(--ink-4); }

/* ---- REPORTS: the numbers change with the date range ---------------- */
.fb-report { width: 100%; max-width: 640px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-l); box-shadow: var(--shadow-xl); padding: 16px; }
@media (min-width: 900px) { .fb-report { padding: 22px; } }
.fb-report .bar-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.fb-report .bar-top b { font-size: 14px; font-weight: 600; color: var(--ink); }
.fb-report .bar-top b small { display: block; font-weight: 500; color: var(--ink-3); font-size: 11px; margin-top: 2px; }
.fb-ranges { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px; }
.fb-ranges button { padding: 6px 11px; border-radius: 4px; border: 0; background: none; font-weight: 500; font-size: 12px; color: var(--ink-3); cursor: pointer; min-height: 32px; }
.fb-ranges button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.fb-report .kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 600px) { .fb-report .kpis { grid-template-columns: repeat(4, 1fr); } }
.fb-report .kpi .v { font-size: 21px; }
.fb-report .kpi .v small.dn { color: var(--bad-ink); }
.fb-report .bars { height: 110px; }
.fb-report .bars i { transition: height .6s var(--ease-out); }
.fb-report .bars-x { margin-top: 6px; }
.fb-report .split2 { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
@media (min-width: 600px) { .fb-report .split2 { grid-template-columns: 3fr 2fr; } }
.fb-report .chan { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 11px; font-size: 11.5px; }
.fb-report .chan .k { font-size: 10.5px; color: var(--ink-3); font-weight: 600; margin-bottom: 8px; }
.fb-report .chan div.r { display: grid; grid-template-columns: 80px 1fr 38px; gap: 8px; align-items: center; margin-top: 5px; }
.fb-report .chan .r span:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.fb-report .chan i { height: 8px; border-radius: 2px; display: block; transition: width .6s var(--ease-out); }
.fb-report .chan .bk i { background: var(--ch-booking); }
.fb-report .chan .ab i { background: var(--ch-airbnb); }
.fb-report .chan .dr i { background: var(--ch-direct); }
.fb-report .chan .ot i { background: var(--ink-4); }
.fb-report .foot { margin-top: 10px; font-size: 10.5px; color: var(--ink-4); }
/* the list of figures: wide hairline grid */
.fb-figures { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 700px) { .fb-figures { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .fb-figures { grid-template-columns: repeat(3, 1fr); } }
.fb-figure { padding: 20px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 700px) { .fb-figure { padding: 22px 24px 22px 0; } .fb-figure:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--line); } }
@media (min-width: 1200px) { .fb-figure:nth-child(2n) { padding-left: 0; border-left: 0; } .fb-figure:nth-child(3n+2), .fb-figure:nth-child(3n) { padding-left: 24px; border-left: 1px solid var(--line); } }
.fb-figure b { display: block; font-size: var(--fs-l); font-weight: 600; letter-spacing: -0.01em; }
.fb-figure p { margin-top: 6px; color: var(--ink-3); font-size: var(--fs-s); line-height: 1.5; }
.fb-figure .plan { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line-2); padding: 2px 6px; border-radius: var(--radius-s); vertical-align: middle; }

/* ---- TEAM: roles grid with ticks ------------------------------------- */
.fb-roles-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.fb-roles { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-l); box-shadow: var(--shadow-xl); font-size: 12.5px; overflow: hidden; }
.fb-roles th, .fb-roles td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.fb-roles th { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: var(--bg-2); }
.fb-roles th:first-child, .fb-roles td:first-child { text-align: left; position: sticky; left: 0; background: #fff; min-width: 160px; }
.fb-roles th:first-child { background: var(--bg-2); }
.fb-roles tr:last-child td { border-bottom: 0; }
.fb-roles td:first-child { font-weight: 500; color: var(--ink); }
.fb-roles td:first-child small { display: block; color: var(--ink-3); font-weight: 400; font-size: 11px; }
.fb-roles .tick { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-soft); color: var(--ok-ink); }
.fb-roles .tick svg { width: 12px; height: 12px; }
.fb-roles .no { display: inline-block; width: 10px; height: 2px; background: var(--line-2); border-radius: 1px; }
html.js-anim .fb-roles .tick { opacity: 0; transform: scale(.6); }
.fb-roles .tick { transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
html.js-anim .fb-roles.is-in .tick { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 45ms); }
.fb-roles .custom-col { background: var(--accent-soft); }
.fb-roles th.custom-col small { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--accent-ink); }
.fb-roles .tick.edit { background: var(--accent-soft); color: var(--accent-ink); }
.fb-roles-note { margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-4); }
/* the five roles as hairline columns */
.fb-role-cards { display: grid; gap: 12px; }
@media (min-width: 640px) { .fb-role-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .fb-role-cards { grid-template-columns: repeat(5, 1fr); gap: 14px; } }
.fb-role { border: 1px solid var(--line); border-radius: var(--radius-l); background: #fff; padding: 18px 18px 16px; display: grid; gap: 8px; align-content: start; }
.fb-role .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; }
.fb-role h3 { font-size: 20px; letter-spacing: -0.02em; margin-top: 4px; }
.fb-role p { color: var(--ink-3); font-size: var(--fs-s); line-height: 1.5; }
.fb-role .tagp { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
/* the sign-in page drawing (branded login) */
.fb-login { width: 100%; max-width: 560px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-2); border-radius: var(--radius-l); overflow: hidden; background: #fff; box-shadow: var(--shadow-l); font-size: 11.5px; min-height: 250px; }
.fb-login .brand { position: relative; padding: 18px; color: #fff; background: linear-gradient(160deg, #16324f, #2a5d7c 60%, #6fb3c9); display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.fb-login .brand .lg { position: absolute; top: 16px; left: 18px; font-family: var(--font-display); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.fb-login .brand .lg i { width: 18px; height: 18px; border-radius: 4px; background: #fff; color: #16324f; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; }
.fb-login .brand b { font-size: 15px; font-weight: 600; }
.fb-login .brand span { font-size: 10.5px; opacity: .85; }
.fb-login .brand small { font-size: 9.5px; opacity: .7; margin-top: 10px; }
.fb-login .form { padding: 18px; display: grid; gap: 8px; align-content: center; }
.fb-login .form b { font-size: 13px; font-weight: 600; }
.fb-login .form .url { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-bottom: 6px; }
.fb-login .form .f { height: 30px; border: 1px solid var(--line-2); border-radius: 4px; padding: 0 9px; display: flex; align-items: center; color: var(--ink-4); font-size: 10.5px; }
.fb-login .form .go { height: 32px; border-radius: 4px; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 600; }
@media (max-width: 479px) { .fb-login { grid-template-columns: 1fr; } .fb-login .brand { min-height: 120px; } }
.fb-plan-strip { display: grid; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .fb-plan-strip { grid-template-columns: repeat(4, 1fr); } }
.fb-plan-strip > div { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); }
.fb-plan-strip > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.fb-plan-strip > div:nth-last-child(-n+2) { border-bottom: 0; }
@media (min-width: 900px) { .fb-plan-strip > div { border-bottom: 0; padding: 22px 20px 22px 0; } .fb-plan-strip > div + div { padding-left: 20px; border-left: 1px solid var(--line); } }
.fb-plan-strip .nm { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.fb-plan-strip b { display: block; margin-top: 8px; font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 38px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.fb-plan-strip span { display: block; margin-top: 8px; font-size: var(--fs-s); color: var(--ink-3); line-height: 1.4; }

/* ---- SECURITY: layered "how your data is protected" diagram ---------- */
.fb-layers { width: 100%; max-width: 620px; display: grid; gap: 0; }
.fb-layer { position: relative; border: 1px solid var(--line-2); border-radius: var(--radius-l); background: #fff; padding: 16px 18px 18px; }
.fb-layer + .fb-layer { margin-top: -1px; }
.fb-layer:nth-child(2) { margin-inline: 14px; background: #fbfbfc; }
.fb-layer:nth-child(3) { margin-inline: 28px; background: var(--bg-2); }
.fb-layer:nth-child(4) { margin-inline: 42px; background: var(--bg-3); }
@media (min-width: 600px) { .fb-layer { padding: 20px 22px 22px; } .fb-layer:nth-child(2) { margin-inline: 22px; } .fb-layer:nth-child(3) { margin-inline: 44px; } .fb-layer:nth-child(4) { margin-inline: 66px; } }
.fb-layer .n { position: absolute; top: 14px; right: 16px; font-size: 11px; font-weight: 600; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.fb-layer .hd { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); font-size: 15px; letter-spacing: -0.01em; }
.fb-layer .hd .ic { width: 30px; height: 30px; border-radius: var(--radius); border: 1px solid var(--line-2); background: #fff; display: grid; place-items: center; color: var(--ink); flex: none; }
.fb-layer .hd .ic svg { width: 15px; height: 15px; }
.fb-layer p { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.fb-layer ul { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.fb-layer li { font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: var(--radius-s); background: #fff; border: 1px solid var(--line); color: var(--ink-2); }
html.js-anim .fb-layer { opacity: 0; transform: translateY(8px); }
html.js-anim .fb-layers.is-in .fb-layer { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
html.js-anim .fb-layers.is-in .fb-layer:nth-child(2) { transition-delay: .12s; }
html.js-anim .fb-layers.is-in .fb-layer:nth-child(3) { transition-delay: .24s; }
html.js-anim .fb-layers.is-in .fb-layer:nth-child(4) { transition-delay: .36s; }
/* sign-in steps as three small drawn cards */
.fb-signin { display: grid; gap: 12px; }
@media (min-width: 640px) { .fb-signin { grid-template-columns: repeat(3, 1fr); } }
.fb-signin .card { border: 1px solid var(--line); border-radius: var(--radius-l); background: #fff; padding: 16px; font-size: 12px; }
.fb-signin .card .k { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.fb-signin .card .f { height: 34px; margin-top: 10px; border: 1px solid var(--line-2); border-radius: 4px; display: flex; align-items: center; padding: 0 10px; color: var(--ink-4); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.fb-signin .card .f.code { letter-spacing: .32em; color: var(--ink); font-weight: 600; font-family: var(--font-mono); }
.fb-signin .card p { margin-top: 10px; color: var(--ink-3); font-size: 11.5px; line-height: 1.45; }
.fb-signin .card .go { margin-top: 10px; height: 32px; border-radius: 4px; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 11.5px; }
/* the honest line about certifications */
.fb-honest { border: 1px solid var(--line-2); border-left: 3px solid var(--ink); border-radius: var(--radius); padding: 18px 20px; background: #fff; max-width: 70ch; }
.fb-honest b { display: block; font-weight: 600; margin-bottom: 6px; }
.fb-honest p { color: var(--ink-3); font-size: var(--fs-m); line-height: 1.5; }
.fb-honest a { color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--line-2); }
/* badges: only postures we hold */
.fb-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.fb-badges span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--line-2); background: #fff; }
.fb-badges svg { width: 14px; height: 14px; color: var(--ok-ink); }

/* ---- STAFF PHONE: the hero phone with today's arrivals ---------------- */
.fb-hero-phone { width: 100%; max-width: 300px; margin: 0 auto; }
@media (min-width: 900px) { .fb-hero-phone { max-width: 340px; } }
.fb-phone-pair { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: end; justify-items: center; width: 100%; max-width: 680px; }
@media (min-width: 600px) { .fb-phone-pair { grid-template-columns: 1fr 1fr; } }
.fb-phone-pair > figure { width: 100%; max-width: 250px; margin: 0; }
@media (min-width: 1280px) { .fb-phone-pair > figure { max-width: 310px; } }
.fb-phone-pair .mock-phone { max-width: none; }
.fb-phone-pair figcaption { margin-top: 12px; text-align: center; font-size: var(--fs-s); color: var(--ink-3); }
/* on the phone-app page, the "tap targets" rows */
.fb-taps { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .fb-taps { grid-template-columns: 1fr 1fr; } }
.fb-tap { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .fb-tap { padding: 22px 28px 22px 0; } .fb-tap:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--line); } }
.fb-tap .ic { width: 44px; height: 44px; border-radius: var(--radius); background: var(--ink); color: #fff; display: grid; place-items: center; }
.fb-tap .ic svg { width: 20px; height: 20px; }
.fb-tap b { display: block; font-size: var(--fs-l); font-weight: 600; letter-spacing: -0.01em; }
.fb-tap p { margin-top: 4px; color: var(--ink-3); font-size: var(--fs-m); line-height: 1.5; }
.fb-tap .plan { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line-2); padding: 2px 6px; border-radius: var(--radius-s); vertical-align: middle; }

/* ---- shared: a words + drawing split that flips on every other use ---- */
.fb-split { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .fb-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: calc(var(--col-gap) * 2); } .fb-split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .fb-split--flip > .fb-split__copy { order: 2; } }
.fb-split__copy .plan { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 5px 8px; border-radius: var(--radius-s); border: 1px solid var(--line-2); color: var(--ink-3); background: #fff; margin-bottom: 16px; }
.fb-split__copy h3 { font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -0.025em; text-wrap: balance; }
.fb-split__copy > p { margin-top: 14px; color: var(--ink-3); font-size: var(--fs-l); line-height: 1.5; max-width: 50ch; }
.fb-split__copy .checks { margin-top: 20px; }
.fb-split__visual { min-width: 0; }
.fb-split__visual .mock-stage { width: 100%; }
.fb-split__visual .mock-stage .mock-card { zoom: 1 !important; max-width: 520px; }
@media (min-width: 1280px) { .fb-split__visual .mock-stage .mock-card { zoom: 1.15 !important; } }

/* ---- phones: swipe rows where a stack adds little -------------------- */
@media (max-width: 639px) {
  .fb-swipe { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; -webkit-overflow-scrolling: touch; }
  .fb-swipe::-webkit-scrollbar { display: none; }
  .fb-swipe > * { flex: 0 0 82%; scroll-snap-align: start; }
  .fb-swipe-hint { margin-top: 10px; font-size: var(--fs-xs); color: var(--ink-4); font-variant-numeric: tabular-nums; }
}
@media (max-width: 639px) {
  .kit-steps.fb-swipe { border-top: 0; }
  .kit-steps.fb-swipe .kit-step { border: 1px solid var(--line); border-radius: var(--radius-l); background: #fff; padding: 20px; }
  .kit-steps.fb-swipe .kit-step .n { font-size: 40px; margin-bottom: 14px; }
  .band-blue .kit-steps.fb-swipe .kit-step, .band-warm .kit-steps.fb-swipe .kit-step { border-color: var(--line-2); }
  .fb-roles-scroll { margin-top: 10px; font-size: var(--fs-xs); color: var(--ink-4); }
}
@media (min-width: 640px) { .fb-swipe-hint, .fb-roles-scroll { display: none; } }
/* the quiet line under the hero buttons: one item per line on phones, no stray dot */
@media (max-width: 539px) { .page-feature .page-hero .note-row { flex-direction: column; gap: 4px; } .page-feature .page-hero .note-row span + span::before { display: none; } }

html.reduced .fb-stamp, html.reduced .fb-invoice .line, html.reduced .fb-roles .tick, html.reduced .fb-layer { opacity: 1; transform: none; transition: none; }
html.reduced .fb-stamp { transform: rotate(-12deg); }