/* Hong Kong Business Banking Fit Checker — prototype styles, scoped under
 * .bkfc so they cannot touch the site chrome. The prototype's own header
 * and footer rules are dropped: the page uses Captime's real ones. */
.bkfc *{box-sizing:border-box}
:root{--cream:#fff9f0;--paper:#fff;--ink:#172033;--muted:#697386;--orange:#fbb033;--orange-deep:#fbb033;--orange-soft:#fff3dc;--line:#e4e7ec;--soft:#f5f7fa;--dark:#172033;--green:#123f3a}
.bkfc{scroll-behavior:smooth}
.bkfc{margin:0;background:#fff;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif;line-height:1.55}
.bkfc a{color:inherit;text-decoration:none}
.bkfc .wrap{width:min(1180px,calc(100% - 40px));margin:auto}
.bkfc .navlinks>a:not(.btn):hover{color:var(--orange)}
.bkfc .btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border-radius:10px;border:1px solid var(--line);font-weight:800;cursor:pointer;background:#fff;color:var(--ink);transition:.18s;font-family:inherit}
.bkfc .btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(23,32,51,.08)}
.bkfc .btn:not(.alt){background:var(--orange);border-color:var(--orange);color:#fff}
.bkfc .btn:not(.alt):hover, .bkfc .btn:not(.alt):focus-visible{background:var(--orange);border-color:var(--orange);color:#000}
.bkfc .btn.alt{background:transparent;border-color:var(--orange);color:var(--orange)}
.bkfc .btn.alt:hover, .bkfc .btn.alt:focus-visible{background:rgba(251,176,51,.08);border-color:var(--orange);color:#000}
.bkfc .btn:focus-visible{outline:3px solid #172033;outline-offset:2px}
.bkfc .hero{background:linear-gradient(180deg,#fff8ec 0%,#fff 100%);border-bottom:1px solid var(--line);padding:48px 0 40px}
.bkfc .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:start}
.bkfc .hero-copy{min-width:0}
.bkfc .eyebrow, .bkfc .section-tag{font-size:11px;letter-spacing:.13em;font-weight:800;color:var(--orange);text-transform:uppercase}
.bkfc .hero h1{font-size:clamp(36px,4.8vw,56px);line-height:1.08;letter-spacing:-.035em;margin:12px 0 16px;font-weight:700}
.bkfc .quick{background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:12px;padding:14px 16px;margin:0 0 18px;max-width:560px;box-shadow:0 4px 14px rgba(23,32,51,.04);font-size:14.5px;line-height:1.55;color:#3d4658}
.bkfc .quick b{display:block;font-size:11px;letter-spacing:.12em;font-weight:900;color:var(--orange);margin:0 0 8px}
.bkfc .lead{font-size:17px;line-height:1.6;color:#485266;max-width:560px;margin:0}
.bkfc .ticks{display:grid;gap:8px;margin:18px 0}
.bkfc .tick{font-size:14px;font-weight:700;color:#374151}
.bkfc .tick:before{content:'✓';display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#eaf8ef;color:#2f8f57;margin-right:8px;font-weight:900}
.bkfc .hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.bkfc .note{font-size:12px;line-height:1.55;color:var(--muted);margin-top:15px}
.bkfc .hero-visual-column{display:flex;flex-direction:column;gap:16px;align-self:start;min-width:0}
.bkfc .hero-workplace-visual{position:relative;border-radius:18px;overflow:hidden;background:#fff;border:1px solid #e2e6eb;box-shadow:0 14px 36px rgba(31,41,55,.08);width:100%}
.bkfc .hero-img{display:block;width:100%;height:auto;object-fit:contain;object-position:center center;background:#fff}
.bkfc .hero-insight{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:0 8px 24px rgba(23,32,51,.06)}
.bkfc .visual-icon{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--orange-soft);color:var(--orange);font-weight:900}
.bkfc .hero-insight strong{display:block;font-size:15px;margin:1px 0 5px;color:var(--ink)}
.bkfc .hero-insight small{display:block;color:var(--muted);font-size:12.5px;line-height:1.5}
.bkfc .checker-section{padding:64px 0;background:#fff}
.bkfc .checker{max-width:900px;margin:auto;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 16px 45px rgba(23,32,51,.06);padding:30px}
.bkfc .checker h2{font-size:30px;margin:7px 0}
.bkfc .start{text-align:center;padding:20px 30px}
.bkfc .progress{height:5px;background:#f0f2f5;border-radius:99px;overflow:hidden;margin:20px 0 30px}
.bkfc .bar{height:100%;background:var(--orange);width:0;transition:width .25s}
.bkfc .qnum{font-size:11px;letter-spacing:.12em;color:var(--orange);font-weight:900}
.bkfc .question h3{font-size:32px;margin:8px 0 12px;line-height:1.2}
.bkfc .question>p{color:var(--muted)}
.bkfc .options{display:grid;gap:10px;margin:24px 0}
.bkfc .opt{width:100%;display:flex;gap:14px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 17px;cursor:pointer;transition:.15s}
.bkfc .opt:hover{border-color:#cdd3dc;background:#fafbfc}
.bkfc .opt:has(input:checked){border:1.5px solid var(--orange);background:var(--orange-soft)}
.bkfc .opt:focus-within{outline:3px solid #172033;outline-offset:2px}
.bkfc .opt input{margin-top:3px;appearance:none;-webkit-appearance:none;width:18px;height:18px;min-width:18px;border:1.5px solid #98a3b3;border-radius:50%;background:#fff;display:grid;place-content:center;cursor:pointer}
.bkfc .opt input::before{content:"";width:8px;height:8px;border-radius:50%;transform:scale(0);transition:transform .12s ease;background:var(--orange)}
.bkfc .opt input:checked{border-color:var(--orange);background:#fff}
.bkfc .opt input:checked::before{transform:scale(1)}
.bkfc .opt input:focus-visible{outline:2px solid #172033;outline-offset:2px}
.bkfc .checker select{font-family:inherit;font-size:15px}
.bkfc .checker-actions{display:flex;justify-content:space-between;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.bkfc .result{display:none}
.bkfc .result-title{font-size:38px;line-height:1.2;margin:10px 0 14px}
.bkfc .pill{display:inline-block;background:var(--orange-soft);color:var(--orange);border-radius:999px;font-size:11px;font-weight:900;padding:7px 10px}
.bkfc .profile{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:26px 0}
.bkfc .metric{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff}
.bkfc .metric small{display:block;font-size:10px;letter-spacing:.1em;color:var(--orange);font-weight:800;margin-bottom:7px}
.bkfc .metric b{font-size:14px}
.bkfc .result .tick{margin:8px 0}
.bkfc .content{background:#f8fafc;padding:42px 0}
.bkfc .content.alt, .bkfc .content.cream{background:#f8fafc}
.bkfc .content h2{font-size:30px;margin:7px 0 12px;line-height:1.22;letter-spacing:-.015em;max-width:980px;font-weight:750}
.bkfc .content h3{font-size:18px;margin:10px 0 7px;line-height:1.3}
.bkfc .intro, .bkfc .content>div>p{font-size:15px;line-height:1.65;color:#4c5668;max-width:980px}
.bkfc .three, .bkfc .four, .bkfc .cards{display:grid;gap:16px;margin-top:24px}
.bkfc .three{grid-template-columns:repeat(3,1fr)}
.bkfc .four, .bkfc .coverage{grid-template-columns:repeat(4,1fr)}
.bkfc .card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
.bkfc .num{font-size:11px;font-weight:900;color:var(--orange)}
.bkfc .compare{width:100%;border-collapse:separate;border-spacing:0;margin-top:28px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.bkfc .compare th, .bkfc .compare td{padding:13px 15px;border-bottom:1px solid var(--line);text-align:left}
.bkfc .compare th{background:#fff8e9}
.bkfc .compare tr:last-child td{border-bottom:0}
.bkfc .faq details{border-top:1px solid var(--line);padding:16px 0}
.bkfc .faq details:last-child{border-bottom:1px solid var(--line)}
.bkfc .faq summary{cursor:pointer;font-weight:800;font-size:16px}
.bkfc .faq summary:focus-visible{outline:3px solid #172033;outline-offset:2px}
.bkfc .faq details p{color:var(--muted);line-height:1.6}
.bkfc .source-list{color:var(--muted);line-height:1.7}
.bkfc .content-panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 30px;box-shadow:0 5px 18px rgba(23,32,51,.025);display:flex;flex-direction:column}
.bkfc .content-panel .section-tag{margin:0 0 8px}
.bkfc .content-panel h2{margin:0 0 12px;font-size:22px;line-height:1.25}
.bkfc .content-panel .intro{margin:0;flex:1}
.bkfc .split-panels{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.bkfc .split-panels .content-panel{height:100%;margin:0}
.bkfc .cta-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:56px;align-items:center}
.bkfc .cta-copy{max-width:900px}
.bkfc .cta-copy .section-tag{margin-bottom:10px}
.bkfc .cta-copy h2{margin-top:0}
.bkfc .cta-copy p{margin-bottom:0}
.bkfc .cta{background:#123f3a;color:#fff;padding:68px 0}
.bkfc .cta .wrap{display:flex;justify-content:space-between;gap:48px;align-items:center}
.bkfc .cta h2{font-size:40px;margin:8px 0 12px;color:#fff;max-width:760px}
.bkfc .cta p{max-width:760px;color:#cbd2dc;line-height:1.65}
.bkfc .cta .section-tag{color:var(--orange)}
.bkfc .cta .btn{background:#fff;border-color:#fff;color:var(--ink);white-space:nowrap}
.bkfc .cta .btn:hover{background:#fff;color:#000}
.bkfc .footer{padding:30px 0;background:#fff;color:var(--muted);font-size:13px}
.bkfc .footer strong{color:var(--ink)}
@media(max-width:900px){.bkfc .split-panels, .bkfc .cta-main{grid-template-columns:1fr}.bkfc .cta-main{gap:22px}.bkfc .hero-grid{grid-template-columns:1fr;gap:28px}.bkfc .three, .bkfc .four, .bkfc .coverage{grid-template-columns:1fr}.bkfc .profile{grid-template-columns:1fr 1fr}.bkfc .cta .wrap{display:block}.bkfc .cta .btn{margin-top:18px}}
@media(max-width:620px){.bkfc .wrap{width:min(100% - 24px,1180px)}.bkfc .hero{padding:36px 0 32px}.bkfc .hero h1{font-size:42px}.bkfc .quick{max-width:none}.bkfc .hero-insight{padding:14px 16px}.bkfc .checker{padding:20px}.bkfc .start{padding:10px}.bkfc .profile{grid-template-columns:1fr}.bkfc .cta h2{font-size:34px}.bkfc .checker-actions{flex-wrap:wrap}.bkfc .checker-actions .btn{flex:1}}



/* The site header is position:absolute, so the hero must clear it — the same
   allowance the offshore checker uses, including at narrower widths. */
.bkfc .hero{padding:160px 0 40px}
@media(max-width:900px){.bkfc .hero{padding-top:148px}}
@media(max-width:620px){.bkfc .hero{padding:126px 0 32px}}

/* ---- Counter the site-wide resets (app.css/main.css strip list markers,
   list indent and paragraph spacing; the prototype relied on browser
   defaults). Scoped to content lists only so the header/footer nav menus
   inside .bkfc keep their unstyled chrome. ---- */
.bkfc .content ul:not(.sub-menu),
.bkfc .content ol:not(.sub-menu){padding-left:40px;margin:0 0 16px}
.bkfc .content ul:not(.sub-menu)>li{list-style:disc;margin-bottom:8px}
.bkfc .content ol:not(.sub-menu)>li{list-style:decimal;margin-bottom:8px}
.bkfc .content ul:not(.sub-menu)>li:last-child,
.bkfc .content ol:not(.sub-menu)>li:last-child{margin-bottom:0}
.bkfc .content p{margin-bottom:16px}
.bkfc .content p:last-child{margin-bottom:0}
.bkfc .source-list>li{line-height:1.7}

/* ---- Restore the browser-default heading/paragraph spacing inside the
   checker panel. main.css zeroes margin-bottom on h1-h6/p site-wide, which
   collapsed the gaps the prototype relied on. Values match the prototype. ---- */
.bkfc .start h3{font-size:18.72px;margin:18.72px 0;line-height:1.55}
.bkfc .start p{margin:16px 0}
.bkfc .checker h2{line-height:1.55}

/* ---- The comparison table is wider than a phone, and the site clips sideways
   overflow on the page, so its last column was cut off with no way to reach
   it. The frame stays put and the table scrolls inside it; smaller cells on a
   phone mean most screens need no scrolling at all. ---- */
.bkfc .compare-scroll{margin-top:28px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow-x:auto;-webkit-overflow-scrolling:touch}
.bkfc .compare-scroll .compare{margin-top:0;border:0;border-radius:0}
@media(max-width:620px){.bkfc .compare th, .bkfc .compare td{padding:11px 10px;font-size:14px;line-height:1.45}}