/*
 * commercial-license.css — /commercial-license
 *
 * Loads after homepage.css, content-pages.css and contact-page.css, and
 * borrows their tokens rather than defining a fourth palette. Almost the
 * whole page is already covered by content-pages.css — .bq-page-intro,
 * .bq-band, .bq-cardgrid, .bq-card, .bq-simple-table, .bq-steps, .bq-faq —
 * and the form is contact-page.css verbatim, because it IS the contact form.
 *
 * What is left, and all this file contains, are the four things that exist
 * only here:
 *
 *   1. the breadcrumb above the H1
 *   2. the included / licensed two-column split, which is the page's
 *      central idea and had no equivalent anywhere else on the site
 *   3. a footnote treatment on the licence cards
 *   4. the delivery column on the coverage table
 *
 * Everything is prefixed .bq-cl- and scoped under the page's own body
 * class where it touches a shared selector, so nothing here can reach
 * another template.
 */

/* =====================================================================
   BREADCRUMB
   -----------------------------------------------------------------
   This page is reached almost entirely from the Enterprise CTAs on
   /pricing, so the trail back to pricing is the one navigation aid that
   earns its place. Same 12px grey as .bq-tm-crumbs on the movers pages.
   ===================================================================== */
.bq-cl-crumbs {
    display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
    margin-bottom: 16px;
    font-size: 12px; color: var(--gray-500);
}
.bq-cl-crumbs a { color: var(--blue-primary); text-decoration: none; }
.bq-cl-crumbs a:hover { text-decoration: underline; }

/* =====================================================================
   INCLUDED / LICENSED SPLIT
   -----------------------------------------------------------------
   Two columns, deliberately NOT two .bq-card boxes side by side. The
   point of the block is the contrast between the halves, and two
   identical cards flatten exactly the distinction the section exists to
   draw. So each half gets its own ground and its own accent rail, and the
   list markers differ — a tick against a cross — because that is the
   part a reader takes away at a glance.

   The rail is a left border rather than a full outline: an outlined box
   reads as a card and invites the eye to compare the boxes; a rail reads
   as a margin note and keeps the eye on the two lists.
   ===================================================================== */
.bq-cl-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.bq-cl-split__col {
    padding: 24px 26px 26px;
    border: 1px solid var(--gray-300);
    border-left-width: 3px;
    background: var(--white);
}
.bq-cl-split__col--yes { border-left-color: var(--bq-green, #15803d); background: #fbfefc; }
.bq-cl-split__col--no  { border-left-color: var(--accent-gold, #d97706); background: #fffdf8; }

.bq-cl-split__tag {
    display: block; margin-bottom: 16px;
    font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
}
.bq-cl-split__col--yes .bq-cl-split__tag { color: var(--bq-green, #15803d); }
.bq-cl-split__col--no  .bq-cl-split__tag { color: #b45309; }

.bq-cl-list { list-style: none; margin: 0; padding: 0; }
.bq-cl-list li {
    position: relative;
    padding-left: 26px; margin-bottom: 11px;
    font-size: 14.5px; line-height: 1.6; color: var(--gray-700);
}
.bq-cl-list li:last-child { margin-bottom: 0; }

/* Drawn with borders rather than set as a glyph. A ✓/✗ character renders
   at a different weight and baseline in every fallback font on the stack,
   and these two markers sit directly opposite each other across a gutter
   where any mismatch is obvious. */
.bq-cl-list--yes li::before {
    content: ""; position: absolute; left: 4px; top: 6px;
    width: 5px; height: 10px;
    border-right: 2px solid var(--bq-green, #15803d);
    border-bottom: 2px solid var(--bq-green, #15803d);
    transform: rotate(45deg);
}
.bq-cl-list--no li::before,
.bq-cl-list--no li::after {
    content: ""; position: absolute; left: 3px; top: 10px;
    width: 11px; height: 2px; background: #b45309;
}
.bq-cl-list--no li::before { transform: rotate(45deg); }
.bq-cl-list--no li::after  { transform: rotate(-45deg); }

/* =====================================================================
   LICENCE CARDS
   -----------------------------------------------------------------
   .bq-card already does the box. The only addition is the footnote under
   each card's list: the one line that says what the entitlement actually
   costs you in obligations — attribution, scope, agreement — set apart
   from the bullet list above it so it is not read as a seventh feature.
   ===================================================================== */
.bq-cl-card .bq-card__foot { border-top: 1px solid var(--gray-300); }
.bq-cl-card__note {
    margin: 0;
    font-size: 13px; line-height: 1.6; color: var(--gray-500);
}

/* =====================================================================
   COVERAGE TABLE
   -----------------------------------------------------------------
   .bq-simple-table is a two-column prose table on the pages it was
   written for. Three columns at fourteen rows needs the wrapper to be
   able to scroll on a narrow screen rather than compressing the middle
   column into a word per line.
   ===================================================================== */
.bq-cl-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bq-cl-table { min-width: 720px; }
.bq-cl-table th:first-child, .bq-cl-table td:first-child { width: 22%; }
.bq-cl-table th:last-child,  .bq-cl-table td:last-child  { width: 16%; }

/* The delivery routes are identifiers, not prose — mono, so "API · Bulk"
   and "API · WebSocket" stack into a readable column instead of reading
   as the end of the sentence beside them. */
.bq-cl-table__mode {
    font-family: var(--bq-mono); font-size: 12.5px;
    color: var(--gray-700); white-space: nowrap;
}

/* =====================================================================
   LINK COLOUR
   -----------------------------------------------------------------
   THERE IS NO BASE `a { }` RULE ANYWHERE ON THIS SITE. homepage.css
   styles anchors only in the contexts it knows about — the header nav,
   the footer, buttons, table cells — and content-pages.css does the same
   for .bq-doc, .bq-source__body and .bq-legal__text. Every one of those
   pages happens to put its prose inside one of those wrappers, so nobody
   noticed.

   This page puts prose links inside .bq-card and .bq-band__fineprint,
   neither of which is on that list, so those anchors fell through to the
   BROWSER DEFAULT: #0000EE, underlined. Against a page whose accent is
   #00529b that reads as a different site's link pasted in — which is
   exactly what it looked like.

   The treatment below is copied from .bq-doc a in content-pages.css
   rather than invented: brand blue, no underline, and a low-opacity
   bottom border that solidifies on hover. Matching the pages either side
   of this one is the whole point.
   ===================================================================== */
.bq-cl-page .bq-card a,
.bq-cl-page .bq-band__head a,
.bq-cl-page .bq-band__fineprint a,
.bq-cl-page .bq-band__note a,
.bq-cl-page .bq-step a,
.bq-cl-page .bq-faq__answer a,
.bq-cl-page .bq-cl-list a,
.bq-cl-page .bq-simple-table a {
    color: var(--blue-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 82, 155, .28);
    transition: border-color .15s ease, color .15s ease;
}
.bq-cl-page .bq-card a:hover,
.bq-cl-page .bq-band__head a:hover,
.bq-cl-page .bq-band__fineprint a:hover,
.bq-cl-page .bq-band__note a:hover,
.bq-cl-page .bq-step a:hover,
.bq-cl-page .bq-faq__answer a:hover,
.bq-cl-page .bq-cl-list a:hover,
.bq-cl-page .bq-simple-table a:hover {
    color: var(--blue-darkest);
    border-bottom-color: var(--blue-primary);
}
/* Buttons and the aside's link list carry their own treatment already; the
   rule above must not reach into them and give a button a bottom border.
   !important because .bq-button is (0,1,0) and the rules above are (0,2,0) —
   without it the more specific prose rule wins and every button in a band
   grows an underline. */
.bq-cl-page .bq-button,
.bq-cl-page .bq-contact__panel a,
.bq-cl-page .bq-contact__links a { border-bottom: none !important; }

/* =====================================================================
   THE TWO LICENCE CARDS
   -----------------------------------------------------------------
   Two cards, not six, so each one is wide enough to carry a lede, a
   "typically" line and five bullets without the bullets wrapping every
   other item. The lede is set larger than .bq-card p because with only
   two cards it IS the heading's second line.
   ===================================================================== */
.bq-cl-card__lede { font-size: 15.5px; color: var(--gray-900); font-weight: 400; }
.bq-cl-card__who {
    margin: 0 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--gray-300);
    font-size: 13.5px; line-height: 1.6; color: var(--gray-500);
}
.bq-cl-card__who strong { color: var(--gray-700); font-weight: 700; }

/* =====================================================================
   FORM SECTION
   -----------------------------------------------------------------
   contact-page.css lays .bq-contact out inside its own band on
   /contact-us. Here it sits under a .bq-band__head, so the only thing
   needed is to stop the two stacking too tightly.
   ===================================================================== */
.bq-cl-page .bq-contact { margin-top: 4px; }

/* Anchor target. #bq-cl-enquiry is linked from the intro's own CTA, and a
   fixed 54px header would otherwise land the jump with the section's
   heading behind the navbar. */
.bq-cl-page #bq-cl-enquiry { scroll-margin-top: 70px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 900px) {
    /* The split stacks. Covered-first is the right order stacked as well
       as side by side: it is the half that applies to most readers, and
       the second half only makes sense once the first has been read. */
    .bq-cl-split { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 767px) {
    .bq-cl-split__col { padding: 20px 18px 22px; }
    .bq-cl-list li { font-size: 14px; padding-left: 24px; }
    .bq-cl-crumbs { font-size: 11.5px; }
}