/* ==========================================================================
   QuickBill home page (login.php): Kanvas web style.
   Loaded after the page's own <style>, so it restyles the frame around the
   kept pieces (hero tabs and panels, template bench, card collage, modals)
   without changing them. New sections use the qbx- prefix.
   ========================================================================== */

:root {
  --font: "Open Sans", Arial, sans-serif;          /* the page's own variable: modals follow too */
  --qbx-head: "Montserrat", Arial, sans-serif;
  --qbx-brand: #F5A623;                            /* QuickBill amber, from the logo */
  --qbx-brand-strong: #d98a10;
  --qbx-ink: #17130f;                              /* text on amber, and headings */
  --qbx-body: #4b4740;
  --qbx-muted: #8a847a;
  --qbx-paper: #ffffff;
  --qbx-cream: #f4efe6;
  --qbx-sand: #e9e1d2;
  --qbx-mid: #2b2621;
  --qbx-dark: #211d19;
  --qbx-night: #15120f;
  --qbx-container: 1140px;
  --qbx-gutter: 20px;
}

body { background: var(--qbx-paper); color: var(--qbx-body); font-size: 15px; line-height: 1.6; }
.qbx-container { width: min(var(--qbx-container), 100% - 2 * var(--qbx-gutter)); margin-inline: auto; }
.qbx h2, .qbx-h2 { font-family: var(--qbx-head); font-weight: 300; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: 0; color: var(--qbx-ink); margin: 0 0 16px; }
.qbx h3 { font-family: var(--qbx-head); color: var(--qbx-ink); margin: 0 0 10px; }
.qbx p { margin: 0 0 14px; }
.qbx-label { display: block; margin-bottom: 12px; font: 700 11px/1 var(--qbx-head); letter-spacing: .12em; text-transform: uppercase; color: var(--qbx-brand-strong); }
.qbx-rule { width: 40px; height: 2px; margin: 0 0 20px; border: 0; background: var(--qbx-brand); }
.qbx-dots { margin: 0; padding: 0; list-style: none; }
.qbx-dots li { padding: 3px 0 3px 1.1em; position: relative; }
.qbx-dots li::before { content: "\25CF"; position: absolute; left: 0; top: .55em; font-size: .55em; color: var(--qbx-brand-strong); }

/* Buttons: square, small, flat. Overrides the page's rounded, glowing ones everywhere on the page. */
.btn, .btn-primary-lg, .btn-outline-lg, .btn-full, .qbx-btn {
  border-radius: 0 !important; box-shadow: none !important; transform: none !important; font-family: var(--font); font-weight: 600; letter-spacing: 0;
}
.btn-primary, .qbx-btn { background: var(--qbx-brand); color: var(--qbx-ink); border: 2px solid var(--qbx-brand); }
.btn-primary:hover, .qbx-btn:hover { background: var(--qbx-brand-strong); border-color: var(--qbx-brand-strong); color: var(--qbx-ink); }
.btn-primary-lg, .btn-outline-lg { padding: 11px 18px; font-size: 14px; }
.btn-outline-lg { background: transparent; color: var(--qbx-ink); border: 2px solid var(--qbx-ink); }
.btn-outline-lg:hover { background: var(--qbx-ink); color: #fff; }
.qbx-btn { display: inline-block; padding: 11px 18px; font: 600 14px/1.2 var(--font); text-decoration: none; cursor: pointer; }
.qbx-btn--dark { background: var(--qbx-ink); border-color: var(--qbx-ink); color: #fff; }
.qbx-btn--dark:hover { background: #000; border-color: #000; color: #fff; }
.qbx-btn--line { background: transparent; border-color: currentColor; color: inherit; }
.qbx-btn--line:hover { background: rgba(0,0,0,.06); border-color: currentColor; color: inherit; }
/* The QuickBill Card section: how it works, and Card Studio with the QuickBill design. */
.qbx-card-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.qb-play-link { border-radius: 0 !important; }

/* --------------------------------------------------------------------------
   Header (the existing #navbar: same links, same scripts)
   -------------------------------------------------------------------------- */
nav#navbar { background: #fff; border-bottom: 1px solid #ece7de; box-shadow: none; }
nav#navbar.scrolled { box-shadow: none; border-bottom-color: #ddd5c8; }
#navbar .nav-links a { font-size: 13px; font-weight: 600; color: #3c3832; text-transform: uppercase; letter-spacing: .03em; }
#navbar .nav-links a:hover { color: var(--qbx-brand-strong); }
#navbar .nav-capabilities-panel { border-radius: 0; }
#navbar .nav-links .nav-capability-link { border-radius: 0; text-transform: none; letter-spacing: 0; }
#navbar .nav-capability-link > i { border-radius: 0; }
#navbar .btn-ghost { border: 2px solid var(--qbx-ink); color: var(--qbx-ink); padding: 7px 14px; }
#navbar .btn-ghost:hover { background: var(--qbx-ink); color: #fff; }
#navbar .catalogue-scan-btn { border-radius: 0; }
.mobile-nav { background: #fff; }
.mobile-nav .mobile-capability-grid a { border-radius: 0; }

/* --------------------------------------------------------------------------
   Hero (the kept tab lines and panels; new frame)
   A light panel on the left, a flat amber block on the right for the showcase.
   -------------------------------------------------------------------------- */
/* The banner: full width, starting right under the fixed 64px header; the whole picture at every width */
.qbx-banner { margin-top: 64px; background: var(--qbx-cream); }
.qbx-banner img { display: block; width: 100%; height: auto; }

/* two flat colours split exactly between the columns (the grid is centred, so the gap's middle is at 50%).
   The banner now clears the header, so the hero only needs its own breathing room at the top. */
.qb-hero.qbh { padding: 60px 0 0; background: linear-gradient(90deg, var(--qbx-cream) 0 50%, var(--qbx-brand) 50% 100%); }
.qbh::before, .qbh-glow { display: none; }
.qbh .qb-hero-shell { width: min(var(--qbx-container), 100% - 2 * var(--qbx-gutter)); }
.qbh-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; padding-bottom: 70px; }
.qb-hero h1.qbh-lines { font-family: var(--qbx-head); font-weight: 300; font-size: clamp(20px, 2.1vw, 28px); line-height: 1.22; color: var(--qbx-ink); max-width: 540px; gap: 0; }
.qb-hero h1.qbh-lines .qbh-line { padding: 14px 10px 16px 18px; border-radius: 0; opacity: .5; border-bottom: 1px solid #ddd3c2; }
.qb-hero h1.qbh-lines .qbh-line:last-child { border-bottom: 0; }
.qb-hero h1.qbh-lines .qbh-line.on { opacity: 1; background: transparent; box-shadow: none; }
.qb-hero h1.qbh-lines .qbh-line::before { border-radius: 0; width: 4px; top: 14px; bottom: 16px; }
.qb-hero h1.qbh-lines .qbh-num { font-family: var(--qbx-head); color: var(--qbx-muted); }
.qb-hero h1.qbh-lines .qbh-line.on .qbh-num { color: var(--qbx-brand-strong); }
.qb-hero h1.qbh-lines .is-white .qbh-txt, .qb-hero h1.qbh-lines .is-yellow .qbh-txt { color: var(--qbx-ink); }
.qb-hero h1.qbh-lines .qbh-bar { background: rgba(0,0,0,.08); border-radius: 0; left: 56px; }
.qbh .qb-hero-copy { color: var(--qbx-body); margin: 22px 0 22px 18px; max-width: 470px; font-size: 15px; }
.qbh-actions, .qbh-store { margin-left: 18px; }
.qbh .qb-hero-actions { gap: 10px; }
.qbh .qb-play-link { background: var(--qbx-ink); color: #fff; }
.qbh .qb-play-link:hover { background: #000; transform: none; }
.qbx-hero-note { margin: 12px 0 0 18px; font-size: 12.5px; color: var(--qbx-muted); }
.qbh .qbh-line, .qbh-copy, .qbh-actions, .qbh-store { animation: none; }         /* no rise-in on load */
.qbh-show { min-height: 560px; }
@media (max-width: 900px) {
  .qb-hero.qbh { padding-top: 36px; background: var(--qbx-cream); }
  .qbh-grid { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .qbh-show { margin: 30px calc(-1 * var(--qbx-gutter)) 0; padding: 36px var(--qbx-gutter); min-height: 520px; background: var(--qbx-brand); }
  .qbx-hero-note { margin-left: 18px; }
}

/* --------------------------------------------------------------------------
   Paid at the end of the job: the trade photos (photo strip)
   -------------------------------------------------------------------------- */
.qbx-jobs { padding: 70px 0 60px; background: #fff; }
.qbx-jobs-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: end; margin-bottom: 28px; }
.qbx-jobs-head p { margin: 0; max-width: 520px; }
.qbx-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.qbx-strip figure { margin: 0; }
.qbx-strip img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }   /* the photos are square: show them whole */
.qbx-strip figcaption { padding: 8px 0 0; font: 700 12px var(--qbx-head); text-transform: uppercase; letter-spacing: .06em; color: var(--qbx-ink); }
@media (max-width: 860px) { .qbx-jobs-head { grid-template-columns: 1fr; gap: 10px; } .qbx-strip { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------------------
   Templates (the kept bench; text side restyled as a warm panel)
   -------------------------------------------------------------------------- */
.qb-new-page.qbw { background: linear-gradient(90deg, var(--qbx-cream) 0 46%, #fff 46% 100%); padding: 90px 0; }
.qbw .qb-section-shell { width: min(var(--qbx-container), 100% - 2 * var(--qbx-gutter)); margin-inline: auto; }
.qbw-text h2 { font-family: var(--qbx-head); font-weight: 300; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: 0; color: var(--qbx-ink); }
.qbw-text p { color: var(--qbx-body); }
.qbw-text .qbx-dots { margin-top: 18px; font-size: 14px; }
.qbw-text .qbx-designs { margin-top: 18px; font-size: 13px; color: var(--qbx-muted); }
.qbw .float-badge, .qbw .qb-mini-panel { border-radius: 0; }
@media (max-width: 900px) { .qb-new-page.qbw { background: var(--qbx-cream); padding: 64px 0; } }

/* --------------------------------------------------------------------------
   What QuickBill does: four shaded tiles, one amber
   -------------------------------------------------------------------------- */
.qbx-does-head { padding: 80px 0 34px; }
.qbx-does-head p { max-width: 640px; }
.qbx-tiles { display: grid; grid-template-columns: repeat(4, 1fr); }
.qbx-tile { padding: 48px 28px 52px; background: var(--qbx-mid); color: #e8e3da; }
.qbx-tile:nth-child(even) { background: var(--qbx-dark); }
.qbx-tile--brand, .qbx-tile--brand:nth-child(even) { background: var(--qbx-brand); color: var(--qbx-ink); }
.qbx-tile svg { width: 26px; height: 26px; margin-bottom: 14px; fill: none; stroke: var(--qbx-brand); stroke-width: 1.8; stroke-linecap: square; }
.qbx-tile--brand svg { stroke: var(--qbx-ink); }
.qbx-tile h3 { color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.qbx-tile--brand h3 { color: var(--qbx-ink); }
.qbx-tile ul { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; }
.qbx-tile li { padding: 3px 0 3px 1em; position: relative; }
.qbx-tile li::before { content: "\25CF"; position: absolute; left: 0; top: .6em; font-size: .55em; }
@media (max-width: 1000px) { .qbx-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .qbx-tiles { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   QuickBill Card: feature on side bands (Lion Pride). A flat amber band with a
   centred block: the kept collage on a dark panel, the setup steps on cream.
   The section's own <style> block comes later in the page, so rules use the id.
   -------------------------------------------------------------------------- */
/* edge to edge, like the tiles above it: photos on white on the left half, the text on cream on the right half */
#quickbill-card.qbc { background: var(--qbx-cream); padding: 0; overflow: hidden; }
#quickbill-card .qbc-grid { width: 100%; max-width: none; margin: 0; display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
#quickbill-card .qbx-card-photos { background: #fff; padding: 44px max(var(--qbx-gutter), 2.5vw); display: flex; align-items: center; }
/* the collage is as tall as its tallest column, so the panel centres the photos: same space above and below */
#quickbill-card .qbx-card-photos .qbc-collage { width: 100%; max-width: 920px; margin: 0 auto; height: auto; align-items: start; gap: 18px; }
#quickbill-card .qbx-card-photos .qbc-col { gap: 18px; }
/* Desktop: the photos fill the whole dark panel, as tall as the text beside
   them, so there are no empty bands above and below at any width. Each photo
   is cropped to its share of the height; the drift is off, since it would
   open gaps at the edges. */
@media (min-width: 981px) {
  #quickbill-card .qbx-card-photos { align-items: stretch; }
  #quickbill-card .qbx-card-photos .qbc-collage { max-width: 980px; align-items: stretch; -webkit-mask-image: none; mask-image: none; }
  #quickbill-card .qbc-col { margin-top: 0; animation: none; transform: none; min-height: 0; }
  #quickbill-card .qbc-tile.tall, #quickbill-card .qbc-tile.wide, #quickbill-card .qbc-tile.solo { aspect-ratio: auto; flex: 1 1 0; min-height: 0; }
  #quickbill-card .qbc-col:nth-child(1) .qbc-tile:first-child,
  #quickbill-card .qbc-col:nth-child(3) .qbc-tile:last-child { flex-grow: 1.35; }
}
/* Laptops: the panel is taller than it is wide, so three columns would crop
   the cards to slivers. Two columns keep each photo close to its own shape. */
@media (min-width: 981px) and (max-width: 1699px) {
  #quickbill-card .qbx-card-photos .qbc-collage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #quickbill-card .qbc-col:nth-child(3) { display: none; }
}
#quickbill-card .qbc-tile { border-radius: 0; box-shadow: none; border: 0; background: #f2efe9; }
#quickbill-card .qbc-text { padding: 70px max(var(--qbx-gutter), 6vw) 70px 64px; background: var(--qbx-cream); color: var(--qbx-body); }
#quickbill-card .qbc-text > * { max-width: 560px; }
#quickbill-card .qbc-text > * { opacity: 1; transform: none; transition: none; }   /* the text is there from the start */
#quickbill-card .qbc-text h2 { font-family: var(--qbx-head); font-weight: 300; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: 0; color: var(--qbx-ink); margin: 0 0 16px; }
#quickbill-card .qbc-text p { color: var(--qbx-body); max-width: none; margin: 0 0 18px; line-height: 1.6; }
#quickbill-card .qbx-steps { margin: 0 0 20px; padding: 0; list-style: none; counter-reset: step; }
#quickbill-card .qbx-steps li { counter-increment: step; position: relative; padding: 10px 0 10px 42px; border-top: 1px solid #ddd3c2; font-size: 14px; }
#quickbill-card .qbx-steps li:last-child { border-bottom: 1px solid #ddd3c2; }
#quickbill-card .qbx-steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 10px;
  font: 700 12px/1.6 var(--qbx-head); letter-spacing: .08em; color: var(--qbx-brand-strong); }
#quickbill-card .qbx-steps b { color: var(--qbx-ink); }
#quickbill-card .qbx-fine { font-size: 13px; color: var(--qbx-muted); }
@media (max-width: 900px) {
  #quickbill-card.qbc { padding: 0; }
  #quickbill-card .qbc-grid { width: 100%; grid-template-columns: 1fr; }
  #quickbill-card .qbc-text { order: -1; padding: 44px var(--qbx-gutter); }
  #quickbill-card .qbx-card-photos { padding: 24px var(--qbx-gutter); }
  #quickbill-card .qbx-card-photos .qbc-collage { height: 420px; }
}

/* --------------------------------------------------------------------------
   Pricing: the plan beside the honest list of what is paid separately
   -------------------------------------------------------------------------- */
.qbx-pricing { padding: 90px 0; background: #fff; }
.qbx-pricing .qbx-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.qbx-plan { padding: 44px 40px; background: var(--qbx-cream); }
.qbx-plan h3 { font-weight: 700; font-size: 26px; text-transform: uppercase; margin-bottom: 4px; }
.qbx-price { font: 300 44px/1.1 var(--qbx-head); color: var(--qbx-ink); margin: 8px 0 6px; }
.qbx-price small { font-size: 15px; color: var(--qbx-muted); }
.qbx-plan .qbx-fine { font-size: 13px; color: var(--qbx-muted); }
.qbx-plan .qbx-dots { margin: 18px 0 24px; font-weight: 600; font-size: 14px; color: #3c3832; }
.qbx-plan .qbx-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.qbx-extras { padding: 44px 40px; background: var(--qbx-sand); }
.qbx-extras h3 { font-weight: 700; font-size: 18px; margin-bottom: 18px; }
.qbx-extras table { width: 100%; border-collapse: collapse; font-size: 14px; }
.qbx-extras td { padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,.1); vertical-align: top; }
.qbx-extras td:last-child { text-align: right; font-weight: 700; color: var(--qbx-ink); white-space: nowrap; padding-left: 16px; }
.qbx-extras td small { display: block; color: var(--qbx-muted); font-size: 12px; }
.qbx-extras .qbx-fine { margin-top: 18px; font-size: 13px; color: var(--qbx-body); }
@media (max-width: 860px) { .qbx-pricing .qbx-container { grid-template-columns: 1fr; } .qbx-plan, .qbx-extras { padding: 34px 24px; } }

/* --------------------------------------------------------------------------
   Android: headline band over the app photo
   -------------------------------------------------------------------------- */
/* text on the flat dark colour, the app photo beside it (its own artwork carries the logo, so no text on top) */
.qbx-android { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--qbx-night); }
.qbx-android-text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; padding: 64px max(var(--qbx-gutter), 6vw); }
.qbx-android-photo { min-height: 340px; background: url('../../images/web/quickbill-android-app.jpg') 70% 50% / cover no-repeat; }
.qbx-android .qbx-lead { margin: 0; font: 300 32px/1.12 var(--qbx-head); color: #fff; }
.qbx-android .qbx-lead b { display: block; font-weight: 700; text-transform: uppercase; }
.qbx-android p.qbx-sub { margin: 10px 0 0; color: rgba(255,255,255,.75); max-width: 460px; }
@media (max-width: 760px) { .qbx-android { grid-template-columns: 1fr; } .qbx-android-photo { min-height: 260px; } }

/* --------------------------------------------------------------------------
   Support: the people and the office, and both logins
   -------------------------------------------------------------------------- */
.qbx-support { background: var(--qbx-mid); color: #e8e3da; }
.qbx-support .qbx-container { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 60px; align-items: center; padding: 80px 0; }
.qbx-support h2 { color: #fff; }
.qbx-details { margin: 18px 0 0; padding: 0; list-style: none; }
.qbx-details li { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 14px; }
.qbx-details b { color: #fff; font-weight: 700; }
.qbx-details a { color: #fff; }
.qbx-details small { display: block; color: rgba(232,227,218,.6); font-size: 12px; }
.qbx-login-card { padding: 36px 30px; background: #fff; color: var(--qbx-body); }
.qbx-login-card h3 { font-weight: 300; font-size: 24px; margin-bottom: 8px; }
.qbx-login-card p { font-size: 14px; }
.qbx-login-card .qbx-btn { display: block; width: 100%; margin-top: 10px; text-align: center; }
.qbx-login-card .qbx-link { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--qbx-body); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; font-family: var(--font); }
@media (max-width: 860px) { .qbx-support .qbx-container { grid-template-columns: 1fr; gap: 36px; } }

/* --------------------------------------------------------------------------
   Footer: brand block, link columns, company line
   -------------------------------------------------------------------------- */
footer.qbx-footer-wrap { padding: 0; background: transparent; border: 0; }      /* the page's old footer rule must not apply */
.qbx-foot-brand { padding: 54px 0; text-align: center; background: #fff; }
.qbx-foot-brand img { height: 46px; width: auto; margin: 0 auto 12px; display: block; }
.qbx-foot-brand .qbx-tag { font: 400 16px var(--qbx-head); color: var(--qbx-ink); margin: 0 0 4px; }
.qbx-foot-brand .qbx-small { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--qbx-muted); margin: 0; }
.qbx-foot { background: var(--qbx-night); color: #a39c90; }
.qbx-foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 56px 0 28px; }
.qbx-foot h4 { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.14); font: 400 15px var(--qbx-head); color: var(--qbx-brand); }
.qbx-foot a, .qbx-foot button.qbx-foot-link { display: block; padding: 3px 0; color: #d8d2c7; text-decoration: none; font-size: 13px; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--font); }
.qbx-foot a:hover, .qbx-foot button.qbx-foot-link:hover { color: #fff; }
.qbx-foot address { font-style: normal; font-size: 13px; line-height: 1.6; }
.qbx-copy { padding: 16px 0 30px; font-size: 11px; color: #7d766b; border-top: 1px solid rgba(255,255,255,.06); }
@media (max-width: 860px) { .qbx-foot-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .qbx-foot-cols { grid-template-columns: 1fr; } }