/*
 * Beacon — marketing site stylesheet.
 *
 * Deliberately outside the Vite pipeline. The dashboard's Tailwind bundle needs
 * `npm run build` before a change reaches the browser, which does not survive a
 * zip deploy to a host with no shell. Editing this file and uploading it is the
 * whole deployment step. It also means marketing CSS can never break the app.
 *
 * Plain CSS with custom properties, no preprocessor, no utility framework.
 */

:root {
    --bc-brand: #fa3d04;
    --bc-brand-dark: #d43303;
    --bc-brand-light: #ff5c2b;
    --bc-brand-tint: #fff1ed;

    --bc-ink: #16181d;
    --bc-body: #4b5162;
    --bc-muted: #767d8f;
    --bc-line: #e6e8ee;
    --bc-surface: #ffffff;
    --bc-surface-alt: #f7f8fa;
    --bc-surface-dark: #16181d;

    --bc-radius: 12px;
    --bc-radius-lg: 20px;
    --bc-shadow: 0 1px 2px rgba(22, 24, 29, .04), 0 8px 24px rgba(22, 24, 29, .06);
    --bc-shadow-lg: 0 2px 4px rgba(22, 24, 29, .04), 0 16px 48px rgba(22, 24, 29, .1);

    --bc-max: 1160px;
    --bc-gutter: 24px;
    /* Sticky nav height (68px + its 1px border). Anything the page scrolls to by
       anchor has to clear this, so it is a token rather than a number repeated
       at each call site. */
    --bc-header-h: 69px;
    /* Stroke for the explanatory diagrams. Darker than --bc-line, which is a
       hairline for borders and disappears at diagram scale. */
    --bc-sketch: #c5cad6;

    --bc-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.beacon {
    margin: 0;
    font-family: var(--bc-font);
    font-size: 17px;
    line-height: 1.65;
    color: var(--bc-body);
    background: var(--bc-surface);
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--bc-brand); text-decoration: none; }
a:hover { color: var(--bc-brand-dark); }

h1, h2, h3, h4 {
    color: var(--bc-ink);
    margin: 0 0 .5em;
    line-height: 1.15;
    letter-spacing: -.022em;
    font-weight: 700;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.2rem; letter-spacing: -.01em; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ layout */

.bc-wrap {
    width: 100%;
    max-width: var(--bc-max);
    margin-inline: auto;
    padding-inline: var(--bc-gutter);
}

.bc-section { padding: 84px 0; }
.bc-section--tight { padding: 56px 0; }
.bc-section--alt { background: var(--bc-surface-alt); }

.bc-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.bc-head p { color: var(--bc-muted); font-size: 1.075rem; margin: 0; }

.bc-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--bc-brand);
}

.bc-grid { display: grid; gap: 24px; }
.bc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.bc-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ------------------------------------------------------------------ buttons */

.bc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.bc-btn--primary { background: var(--bc-brand); color: #fff; }
.bc-btn--primary:hover { background: var(--bc-brand-dark); color: #fff; }

.bc-btn--ghost { background: transparent; border-color: var(--bc-line); color: var(--bc-ink); }
.bc-btn--ghost:hover { border-color: var(--bc-ink); color: var(--bc-ink); }

.bc-btn--light { background: #fff; color: var(--bc-ink); }
.bc-btn--light:hover { background: #f0f1f4; color: var(--bc-ink); }

.bc-btn--outline-light { border-color: rgba(255, 255, 255, .32); color: #fff; }
.bc-btn--outline-light:hover { border-color: #fff; color: #fff; }

.bc-btn--sm { padding: 9px 18px; font-size: .94rem; }

:where(a, button).bc-btn:focus-visible,
.bc-nav a:focus-visible,
.bc-faq__q:focus-visible {
    outline: 3px solid var(--bc-brand-tint);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ nav */

.bc-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--bc-line);
}

.bc-nav { display: flex; align-items: center; justify-content: space-between; height: calc(var(--bc-header-h) - 1px); }
.bc-nav__logo img { height: 34px; width: auto; object-fit: contain; }

.bc-nav__links { display: flex; align-items: center; gap: 4px; }

.bc-nav__links a:not(.bc-btn) {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: .96rem;
    font-weight: 500;
    color: var(--bc-body);
}
.bc-nav__links a:not(.bc-btn):hover { background: var(--bc-surface-alt); color: var(--bc-ink); }

.bc-nav__actions { display: flex; align-items: center; gap: 8px; }

.bc-nav__toggle {
    display: none;
    padding: 8px;
    background: none;
    border: 0;
    color: var(--bc-ink);
    cursor: pointer;
}

/* ------------------------------------------------------------------ hero */

.bc-hero {
    position: relative;
    padding: 76px 0 84px;
    overflow: hidden;
}

/* Two washes rather than a flat white: a warm brand tint bleeding from the top
   right behind the mock, and a cool one at the left to stop the page reading as
   a plain document. Both are wide and very low opacity, so they add depth without
   competing with the headline. */
.bc-hero::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto auto;
    width: 70vw;
    height: 120%;
    background:
        radial-gradient(closest-side, rgba(250, 61, 4, .10), transparent 70%) 70% 30% / 70% 80% no-repeat,
        radial-gradient(closest-side, rgba(59, 111, 176, .09), transparent 70%) 20% 60% / 60% 70% no-repeat;
    pointer-events: none;
}

.bc-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 56px;
    align-items: center;
}

.bc-hero__inner { max-width: 560px; }
.bc-hero h1 { margin-bottom: 22px; }
.bc-hero h1 span { display: block; color: var(--bc-brand); }

.bc-hero__lead {
    font-size: 1.1rem;
    color: var(--bc-body);
    margin-bottom: 32px;
}

.bc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.bc-hero__note { margin-top: 16px; font-size: .9rem; color: var(--bc-muted); }

/* ------------------------------------------------------- hero product mock */

/* Built from markup, not a screenshot: stays crisp at any density, adds no image
   request, and never drifts out of date against the real product. */
.bc-app {
    border: 1px solid var(--bc-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(22, 24, 29, .05), 0 24px 64px rgba(22, 24, 29, .12);
    overflow: hidden;
    /* Slight lift and rotation so it reads as a product shot rather than a panel
       that happens to be part of the page. */
    transform: perspective(1400px) rotateY(-4deg) rotateX(1.5deg);
}

.bc-app__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    background: var(--bc-surface-alt);
    border-bottom: 1px solid var(--bc-line);
}
.bc-app__dot { width: 9px; height: 9px; border-radius: 50%; background: #d8dbe2; }
.bc-app__title { margin-left: 10px; font-size: .74rem; font-weight: 600; color: var(--bc-muted); }

.bc-app__body { display: grid; grid-template-columns: 40% 60%; min-height: 330px; }

/* conversation list */
.bc-app__list { border-right: 1px solid var(--bc-line); background: #fcfcfd; }

.bc-conv {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border-bottom: 1px solid #f0f1f4;
}
.bc-conv.is-active { background: var(--bc-brand-tint); box-shadow: inset 3px 0 0 var(--bc-brand); }

.bc-conv__avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bc-av, #8a90a0);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.bc-conv__text { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.bc-conv__text strong { font-size: .78rem; color: var(--bc-ink); }
.bc-conv__text em {
    font-style: normal;
    font-size: .72rem;
    color: var(--bc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bc-conv__badge {
    flex: none;
    min-width: 17px;
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--bc-brand);
    color: #fff;
    font-size: .64rem;
    font-weight: 700;
    text-align: center;
}
.bc-conv__tag {
    flex: none;
    padding: 2px 6px;
    border-radius: 5px;
    background: #eef1fb;
    color: #3b6fb0;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .04em;
}

/* open thread */
.bc-app__thread { display: flex; flex-direction: column; }

.bc-thread__head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bc-line);
}
.bc-thread__who { display: flex; flex-direction: column; line-height: 1.3; }
.bc-thread__who strong { font-size: .78rem; color: var(--bc-ink); }
/* The assignment line is the whole point of a shared inbox, so it gets the
   accent rather than sitting in muted grey with everything else. */
.bc-thread__who em { font-style: normal; font-size: .68rem; font-weight: 600; color: var(--bc-brand); }

.bc-thread__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
}
.bc-thread__body .bc-chat__bubble { max-width: 78%; margin: 0; padding: 8px 11px; font-size: .76rem; border-radius: 13px; border-top-left-radius: 0; }

/* Alignment comes from align-self, not the auto margin the base bubble uses: this
   is a flex column, and the `margin: 0` above outranks `.bc-chat__bubble--out`
   (two classes beat one), so the auto margin never applied and every outgoing
   bubble sat on the left. align-self is the flex-native mechanism and cannot be
   cancelled by a margin shorthand. */
.bc-thread__body .bc-chat__bubble { align-self: flex-start; }
.bc-thread__body .bc-chat__bubble--out { align-self: flex-end; text-align: left; border-top-left-radius: 13px; border-top-right-radius: 0; }

.bc-thread__by {
    display: block;
    margin-top: 4px;
    font-size: .62rem;
    font-weight: 600;
    opacity: .82;
}

/* ---------------------------------------------------- mock: the conversation plays

   Runs once on load, not on a loop: a conversation that restarts every few seconds
   reads as a screensaver and pulls the eye away from the headline, which is the one
   thing in the hero that has to be read. The frame's min-height is well above the
   content height, so the typing row collapsing changes nothing outside the mock.
   ------------------------------------------------------------------------------- */

@keyframes bc-rise {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
}

/* Collapses the row it occupies as it goes, so the reply lands where the dots were. */
@keyframes bc-typing-out {
    from { opacity: 1; height: 26px; margin-bottom: 0; }
    to   { opacity: 0; height: 0; margin-bottom: -8px; }
}

@keyframes bc-dot {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30%           { opacity: 1; transform: translateY(-3px); }
}

.bc-step-1, .bc-step-3, .bc-step-4 {
    animation: bc-rise .45s cubic-bezier(.22, .8, .3, 1) both;
}
.bc-step-1 { animation-delay: .55s; }
.bc-step-3 { animation-delay: 2.35s; }
.bc-step-4 { animation-delay: 3.15s; }

.bc-typing {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 12px;
    border-radius: 13px;
    background: #fff;
    border: 1px solid var(--bc-line);
    overflow: hidden;
    animation:
        bc-rise .35s cubic-bezier(.22, .8, .3, 1) 1.25s both,
        bc-typing-out .3s ease 2.3s forwards;
}
.bc-typing i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bc-muted);
    animation: bc-dot 1.1s infinite;
}
.bc-typing i:nth-child(2) { animation-delay: .18s; }
.bc-typing i:nth-child(3) { animation-delay: .36s; }

/* The list fills in just ahead of the thread, so the eye lands on the inbox first
   and the conversation second — the order the headline describes. */
.bc-conv { animation: bc-rise .4s cubic-bezier(.22, .8, .3, 1) both; }
.bc-conv:nth-child(1) { animation-delay: .10s; }
.bc-conv:nth-child(2) { animation-delay: .18s; }
.bc-conv:nth-child(3) { animation-delay: .26s; }
.bc-conv:nth-child(4) { animation-delay: .34s; }

.bc-thread__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--bc-line);
    background: #fcfcfd;
}
.bc-thread__input {
    flex: 1;
    padding: 7px 11px;
    border: 1px solid var(--bc-line);
    border-radius: 999px;
    background: #fff;
    font-size: .73rem;
    color: #a8aebc;
}
.bc-thread__send {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bc-brand);
    color: #fff;
}
.bc-thread__send svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------------ shift cards */

.bc-shift {
    display: flex;
    flex-direction: column;
    padding: 26px 26px 28px;
    background: var(--bc-surface);
    border: 1px solid var(--bc-line);
    border-radius: var(--bc-radius-lg);
}

/* The diagram. Old state grey on the left, new state brand on the right, with the
   arrow between doing the actual work. Strokes only — a filled illustration at this
   size reads as a logo rather than an explanation. */
.bc-shift__art {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    stroke: var(--bc-sketch);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bc-shift__art .bc-art--arrow { stroke: var(--bc-sketch); }
.bc-shift__art .bc-art--to { stroke: var(--bc-brand); }
.bc-shift__art .bc-art--to rect,
.bc-shift__art .bc-art--to circle { fill: var(--bc-brand-tint); }
.bc-shift__art .bc-art--to path { fill: var(--bc-brand); stroke: none; }
.bc-shift__art .bc-art--tick { fill: none; stroke: var(--bc-brand); stroke-width: 2; }

.bc-shift h3 { font-size: 1.12rem; line-height: 1.35; margin-bottom: 10px; }
.bc-shift__body { font-size: .95rem; color: var(--bc-body); margin: auto 0 0; }

/* ------------------------------------------------------------------ features */

.bc-feature {
    padding: 28px;
    background: var(--bc-surface);
    border: 1px solid var(--bc-line);
    border-radius: var(--bc-radius-lg);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.bc-feature:hover { border-color: #d6d9e2; box-shadow: var(--bc-shadow); }

/* Shared mark. One shape and one size everywhere, so a grid of six reads as a set
   rather than six unrelated drawings. */
.bc-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.bc-feature__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 11px;
    background: var(--bc-brand-tint);
    color: var(--bc-brand);
    transition: background-color .16s ease, color .16s ease;
}
.bc-feature__icon svg { width: 22px; height: 22px; }
/* A linked card fills its mark on hover, so the whole tile responds rather than
   just the cursor changing. */
.bc-feature--link:hover .bc-feature__icon { background: var(--bc-brand); color: #fff; }

.bc-feature p { font-size: .97rem; }

.bc-feature__cta {
    display: inline-block;
    margin-top: 14px;
    font-size: .94rem;
    font-weight: 600;
}
.bc-feature__cta::after { content: " →"; }

/* ------------------------------------------------------------------ ordering */

.bc-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }

.bc-checks { margin: 24px 0 0; padding: 0; list-style: none; }
.bc-checks li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 14px;
    color: var(--bc-ink);
    font-weight: 500;
}
.bc-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .42em;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bc-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.7 5.3a1 1 0 010 1.4l-7 7a1 1 0 01-1.4 0l-3-3a1 1 0 111.4-1.4L9 11.6l6.3-6.3a1 1 0 011.4 0z' clip-rule='evenodd'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.bc-chat {
    padding: 22px;
    background: var(--bc-surface-alt);
    border: 1px solid var(--bc-line);
    border-radius: var(--bc-radius-lg);
}
.bc-chat__bubble {
    max-width: 82%;
    padding: 11px 15px;
    margin-bottom: 10px;
    /* Square on the side the message came from — the corner a chat app squares
       off where the tail would attach. Longhand after the shorthand, never
       inside it, or the next shorthand edit silently rounds it again. */
    border-radius: 16px;
    border-top-left-radius: 0;
    font-size: .95rem;
    line-height: 1.45;
    background: #fff;
    border: 1px solid var(--bc-line);
    color: var(--bc-ink);
}
.bc-chat__bubble--out {
    border-top-left-radius: 16px;
    border-top-right-radius: 0;
    margin-left: auto;
    background: var(--bc-brand);
    border-color: var(--bc-brand);
    color: #fff;
}
.bc-chat__meta { margin-top: 14px; font-size: .82rem; color: var(--bc-muted); text-align: center; }

/* ------------------------------------------------ feature page graphics */

/* One card shell for all four. What differs between them is the shape inside —
   rows, a diagram, a stats bar, a list — which is the whole point: six pages
   carrying the same conversation mock stops reading as evidence. */
.bc-gfx {
    padding: 20px;
    background: var(--bc-surface-alt);
    border: 1px solid var(--bc-line);
    border-radius: var(--bc-radius-lg);
}

.bc-gfx__rows { display: grid; gap: 8px; }
.bc-gfx__row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    background: #fff;
    border: 1px solid var(--bc-line);
    border-radius: 12px;
}
.bc-gfx__row.is-dim { opacity: .55; }

.bc-gfx__av {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bc-brand-tint);
    color: var(--bc-brand-dark);
    font-size: .68rem;
    font-weight: 700;
}
.bc-gfx__line { flex: 1; min-width: 0; font-size: .82rem; color: var(--bc-muted); line-height: 1.35; }
/* The name owns the row; the message is context. Truncated rather than wrapped:
   a graphic that reflows to three lines stops looking like an interface. */
.bc-gfx__line strong { display: block; font-size: .86rem; color: var(--bc-ink); }
.bc-gfx__line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bc-gfx__tag {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--bc-line);
    background: #fff;
    font-size: .7rem;
    font-weight: 600;
    color: var(--bc-muted);
}
.bc-gfx__tag--open { border-color: var(--bc-brand); background: var(--bc-brand-tint); color: var(--bc-brand-dark); }
.bc-gfx__tag--own { border-color: var(--bc-line); background: var(--bc-surface-alt); color: var(--bc-ink); }
.bc-gfx__dot { width: 6px; height: 6px; border-radius: 50%; background: #c6cad4; }

/* Yellow, because every product this reader has used marks a private note yellow. */
.bc-gfx__note {
    margin: 12px 0 0;
    padding: 11px 13px;
    border-radius: 12px;
    background: #fffaf0;
    border: 1px solid #f2e4c9;
    font-size: .8rem;
    line-height: 1.5;
    color: #6b5a33;
}
.bc-gfx__note strong { display: block; color: #4d3f1f; }

/* --- flows: one viewBox scaled to the column */
.bc-gfx__svg { display: block; width: 100%; height: auto; }
.bc-gfx__node rect,
.bc-gfx__node path { fill: #fff; stroke: var(--bc-line); stroke-width: 1.6; }
.bc-gfx__node text {
    text-anchor: middle;
    font-size: 12.5px;
    font-weight: 600;
    fill: var(--bc-ink);
}
.bc-gfx__node text.bc-gfx__sub { font-size: 10.5px; font-weight: 400; fill: var(--bc-muted); }

/* --- broadcasts: the template, then what happened to it */
.bc-gfx__tpl {
    margin: 0 0 16px;
    padding: 13px 15px;
    background: #fff;
    border: 1px solid var(--bc-line);
    border-radius: 14px;
    border-top-left-radius: 0;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--bc-ink);
}
.bc-gfx__var {
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--bc-brand-tint);
    color: var(--bc-brand-dark);
    font-weight: 600;
    font-size: .82rem;
}

/* Two fills in one track: read sits inside delivered, which is what the numbers
   underneath actually mean. */
.bc-gfx__bar {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--bc-line);
    overflow: hidden;
}
.bc-gfx__bar-fill,
.bc-gfx__bar-mid { position: absolute; inset: 0 auto 0 0; border-radius: 999px; }
.bc-gfx__bar-mid { background: #ffc3ad; z-index: 1; }
.bc-gfx__bar-fill { background: var(--bc-brand); z-index: 2; }

.bc-gfx__stats { display: flex; gap: 28px; margin-top: 14px; }
.bc-gfx__stats span { display: flex; flex-direction: column; font-size: .76rem; color: var(--bc-muted); }
.bc-gfx__stats strong { font-size: 1.15rem; color: var(--bc-ink); font-variant-numeric: tabular-nums; }

/* --- knowledge: a search and what it found */
.bc-gfx__search {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--bc-line);
    border-radius: 999px;
    font-size: .84rem;
    color: var(--bc-ink);
}
.bc-gfx__search svg { flex: none; color: var(--bc-muted); }

.bc-gfx__arts { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.bc-gfx__arts li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--bc-line);
    border-radius: 12px;
    font-size: .84rem;
}
.bc-gfx__arts strong { flex: 1; min-width: 0; font-weight: 600; color: var(--bc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
    /* The tag is the least important thing in a row and the first to cost a line. */
    .bc-gfx__row .bc-gfx__tag, .bc-gfx__arts .bc-gfx__tag { display: none; }
    .bc-gfx__stats { gap: 18px; }
}

/* ------------------------------------------------------------------ pricing */

/* Billing period switch. A segmented control rather than a slider toggle: the two
   choices are named and both are clickable, so nothing depends on the reader
   working out which side the knob is on. */
.bc-billing {
    position: relative;
    display: flex;
    gap: 4px;
    width: fit-content;
    padding: 4px;
    /* Pulled up into the section header's bottom margin so the control reads as
       part of the pricing heading rather than as a stray element above the cards. */
    margin: -20px auto 40px;
    background: var(--bc-surface-alt);
    border: 1px solid var(--bc-line);
    border-radius: 999px;
}

/* The white pill is a single element that slides between the options rather than a
   background that blinks from one button to the other. Its width and position are
   measured in JS because the two options are not the same width — "Annual" carries
   the saving badge — so a CSS-only 50% translate would not line up. */
.bc-billing__thumb {
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--bc-shadow);
    /* Slight overshoot, so it settles rather than stops dead. */
    transition: transform .32s cubic-bezier(.34, 1.28, .48, 1), width .32s cubic-bezier(.34, 1.28, .48, 1);
    pointer-events: none;
}
/* Before JS measures it, no pill is drawn and the active option keeps its own
   background — so the control still reads correctly with scripts blocked. */
.bc-billing:not([data-ready]) .bc-billing__thumb { opacity: 0; }
.bc-billing[data-ready] .bc-billing__opt.is-active { background: transparent; box-shadow: none; }

.bc-billing__opt {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    color: var(--bc-body);
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}
.bc-billing__opt:hover { color: var(--bc-ink); }
.bc-billing__opt.is-active { background: #fff; color: var(--bc-ink); box-shadow: var(--bc-shadow); }
/* A press registers immediately, before the cards have finished swapping — without
   it the control feels unresponsive for the length of the cross-fade. */
.bc-billing__opt:active { transform: scale(.97); }
.bc-billing__opt:focus-visible { outline: 3px solid var(--bc-brand-tint); outline-offset: 2px; }

.bc-billing__save {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bc-brand-tint);
    color: var(--bc-brand);
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Both card sets occupy the same grid cell, so the container is always as tall as
   the taller of the two and switching billing cannot move the page — even if the
   annual plans later carry a longer description or an extra feature line.
   visibility rather than display, because a display:none set contributes no height;
   it still drops the hidden cards out of the tab order and the accessibility tree. */
.bc-plans-stack { display: grid; }
.bc-plans-stack > .bc-plans { grid-area: 1 / 1; }

.bc-plans.is-hidden { visibility: hidden; }

.bc-pricing__empty { text-align: center; color: var(--bc-muted); }

.bc-plan {
    display: flex;
    flex-direction: column;
    padding: 30px;
    background: var(--bc-surface);
    border: 1px solid var(--bc-line);
    border-radius: var(--bc-radius-lg);
}
.bc-plan--featured { border-color: var(--bc-brand); box-shadow: var(--bc-shadow-lg); }

.bc-plan__name { font-size: 1.06rem; font-weight: 700; color: var(--bc-ink); margin-bottom: 14px; }

.bc-plan__price { display: flex; align-items: baseline; gap: 3px; margin-bottom: 4px; }
.bc-plan__symbol { font-size: 1.15rem; font-weight: 600; color: var(--bc-ink); }
.bc-plan__amount { font-size: 2.7rem; font-weight: 700; color: var(--bc-ink); letter-spacing: -.03em; line-height: 1; }
.bc-plan__period { font-size: .92rem; color: var(--bc-muted); }

/* Height and line-height are both pinned, and deliberately not min-height: the
   body's 1.65 line-height made a filled line 22.18px against a 20px floor, so the
   floor never applied and every annual card sat 2px taller than its monthly twin.
   Pinning both makes the box identical whether or not it has text. */
.bc-plan__billed {
    height: 1.4rem;
    line-height: 1.4rem;
    margin-bottom: 20px;
    font-size: .84rem;
    color: var(--bc-muted);
    white-space: nowrap;
}

.bc-plan__desc { font-size: .95rem; color: var(--bc-muted); margin-bottom: 22px; }

.bc-plan .bc-btn { width: 100%; margin-bottom: 22px; }

.bc-plan__features { margin: 0; padding: 20px 0 0; list-style: none; border-top: 1px solid var(--bc-line); }
.bc-plan__features li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 11px;
    font-size: .95rem;
    color: var(--bc-body);
}
.bc-plan__features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--bc-brand);
    font-weight: 700;
}
.bc-plan__features li.is-excluded { color: var(--bc-muted); }
.bc-plan__features li.is-excluded::before { content: "×"; color: #b9bec9; }
/* An unmarked line is a heading or a caveat — "Everything in Solo, plus:" — so it
   takes no marker and sits flush, which is what separates it from the list. */
.bc-plan__features li.is-text { padding-left: 0; color: var(--bc-ink); }
.bc-plan__features li.is-text::before { content: none; }
.bc-plan__features strong { font-weight: 700; color: var(--bc-ink); }

.bc-plans__note { margin: 0 0 24px; text-align: center; font-size: .9rem; color: var(--bc-muted); }
.bc-pricing__trial { margin: 24px 0 0; text-align: center; font-size: .9rem; color: var(--bc-muted); }

.bc-pricing__more { margin-top: 40px; text-align: center; }

/* ------------------------------------------------------------------ faq */

.bc-faq { max-width: 780px; margin-inline: auto; }

.bc-faq__item { border-bottom: 1px solid var(--bc-line); }

.bc-faq__q {
    /* Suppress the native <summary> triangle. ::-webkit-details-marker alone covers
       older Safari; list-style is what modern Firefox and Chrome honour. */
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 22px 0;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--bc-ink);
    text-align: left;
    cursor: pointer;
}
.bc-faq__q::after {
    content: "+";
    flex: none;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    color: var(--bc-muted);
    transition: transform .18s ease;
}
.bc-faq__item[open] .bc-faq__q::after { content: "−"; }

.bc-faq__q::-webkit-details-marker { display: none; }

.bc-faq__a { padding: 0 40px 24px 0; font-size: 1rem; color: var(--bc-body); }

/* ------------------------------------------------------ pricing comparison */

.bc-compare__wrap { border: 1px solid var(--bc-line); border-radius: var(--bc-radius-lg); background: var(--bc-surface); }

.bc-compare {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
    /* Figures are read down the column, so they line up. */
    font-variant-numeric: tabular-nums;
}

/* Not sticky. The wrapper sets overflow-x: auto, which computes overflow-y to
   auto as well, so the wrapper — not the viewport — is the scrollport a sticky
   header would resolve against. With no vertical overflow to scroll, top:69px
   simply shoved the header 69px down its own scrollport: a blank band above it
   and the first group row hidden underneath. It could never have pinned to the
   page through that wrapper. */
.bc-compare thead th {
    padding: 16px 18px;
    background: var(--bc-surface);
    border-bottom: 1px solid var(--bc-line);
    text-align: center;
    font-size: 1rem;
    color: var(--bc-ink);
}
/* The row-label column is the one thing that must not be centred, and the first
   header cell labels the table rather than a plan. */
.bc-compare thead th:first-child { text-align: left; font-weight: 600; color: var(--bc-muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; }

.bc-compare__group th {
    padding: 18px 18px 8px;
    background: var(--bc-surface-alt);
    text-align: left;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--bc-muted);
}

.bc-compare tbody th {
    padding: 13px 18px;
    text-align: left;
    font-weight: 500;
    color: var(--bc-ink);
    border-bottom: 1px solid var(--bc-line);
    /* Wide enough that a two-word label does not wrap, narrow enough to leave the
       plan columns room. */
    min-width: 220px;
}
.bc-compare tbody td {
    padding: 13px 18px;
    text-align: center;
    color: var(--bc-body);
    border-bottom: 1px solid var(--bc-line);
    white-space: nowrap;
}
.bc-compare tbody tr:last-child th,
.bc-compare tbody tr:last-child td { border-bottom: 0; }

/* The only emphasis in the table. Every other cell is a number; this one is the
   absence of a ceiling, which is the thing a reader is scanning for and the reason
   they move up a plan. Weight and colour together, so it does not depend on colour
   alone. Emphasising more than this would flatten it back to no emphasis at all. */
.bc-compare td.is-unlimited { font-weight: 700; color: var(--bc-brand); }
.bc-compare td.is-excluded { color: var(--bc-muted); }

/* Clarifications sit under the label rather than behind a tooltip: on a pricing
   page the caveat is the thing a careful buyer most wants to read. */
.bc-compare__help {
    display: block;
    margin-top: 3px;
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--bc-muted);
    white-space: normal;
}

/* Capability names under a dial. Lighter than the help sentence above it: this is
   a list to scan, not a paragraph to read. */
.bc-compare__sub {
    display: block;
    margin-top: 4px;
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bc-muted);
    white-space: normal;
}

/* ------------------------------------------------------- inner page blocks */

/* One measure for prose-led pages, so a feature or industry page reads like a
   document rather than a landing page with the copy stretched across it.

   Set as a variable on the section rather than a max-width on an inner box: .bc-wrap
   already centres itself, so narrowing something inside it centred a second time and
   left the body indented relative to the page header above. Overriding --bc-max means
   header and body resolve to the same measure and line up. */
.bc-narrow { --bc-max: 820px; }

.bc-block__h { font-size: 1.5rem; margin: 0 0 .6em; }
.bc-block__h:not(:first-child) { margin-top: 2.2em; }
.bc-block__lead { font-size: 1.08rem; color: var(--bc-ink); }

/* Numbered because feature steps are genuinely sequential. The counter is drawn
   rather than using list-style, so it can carry the brand and align with the text. */
.bc-steps { counter-reset: bcstep; list-style: none; margin: 0; padding: 0; }
.bc-steps > li { position: relative; padding-left: 52px; margin-bottom: 28px; }
.bc-steps > li::before {
    counter-increment: bcstep;
    content: counter(bcstep);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bc-brand-tint);
    color: var(--bc-brand);
    font-size: .92rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.bc-steps > li h3 { font-size: 1.08rem; margin-bottom: 6px; }
.bc-steps > li p { margin: 0; font-size: .98rem; }
.bc-steps--tight > li { margin-bottom: 16px; padding-top: 4px; }

/* The whole card is the link, so the target is the card and not four words of it. */
.bc-feature--link { display: block; color: inherit; }
.bc-feature--link:hover { color: inherit; }
.bc-feature__h { font-size: 1.12rem; margin-bottom: 8px; }
.bc-feature--link .bc-feature__cta { margin-top: 12px; }
.bc-feature--featured { border-color: var(--bc-brand); }

.bc-objection {
    padding: 22px 24px;
    border-left: 3px solid var(--bc-brand);
    background: var(--bc-surface-alt);
    border-radius: 0 var(--bc-radius) var(--bc-radius) 0;
}
.bc-objection__q { font-weight: 600; color: var(--bc-ink); }

/* Yes/no columns on the free-app comparison. Colour alone would not carry it, so
   the glyph differs too. */
.bc-compare td.is-yes { color: var(--bc-brand); font-weight: 700; }
.bc-compare td.is-no { color: var(--bc-muted); }

/* ------------------------------------------------------------------ tools */

.bc-tool__promise { margin-top: 14px; font-size: .9rem; color: var(--bc-brand); font-weight: 600; }

.bc-tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.bc-tool--wide { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }

.bc-tool__form { display: flex; flex-direction: column; gap: 20px; }
.bc-tool__out { display: flex; flex-direction: column; gap: 20px; }

/* fields */
.bc-field { display: flex; flex-direction: column; gap: 6px; }
.bc-field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bc-field__label { font-size: .92rem; font-weight: 600; color: var(--bc-ink); }
.bc-field__rate { display: block; font-style: normal; font-weight: 500; font-size: .82rem; color: var(--bc-muted); }
.bc-field__help { font-size: .85rem; line-height: 1.5; color: var(--bc-muted); margin: 0; }
.bc-field__error { font-size: .85rem; color: var(--bc-brand); font-weight: 600; }
.bc-field__stamp { padding-top: 12px; border-top: 1px solid var(--bc-line); }

.bc-field input[type="tel"],
.bc-field input[type="text"],
.bc-field input[type="number"],
.bc-field select,
.bc-field textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--bc-line);
    border-radius: 10px;
    background: var(--bc-surface);
    font-family: inherit;
    font-size: 1rem;
    color: var(--bc-ink);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.bc-field textarea { resize: vertical; line-height: 1.5; }
.bc-field input[type="number"] { font-variant-numeric: tabular-nums; }
.bc-field input[type="color"] { width: 100%; height: 44px; padding: 4px; border: 1px solid var(--bc-line); border-radius: 10px; background: var(--bc-surface); }

.bc-field :is(input, select, textarea):focus {
    outline: none;
    border-color: var(--bc-brand);
    box-shadow: 0 0 0 3px var(--bc-brand-tint);
}
/* Border and message together — colour alone would not reach everyone. */
.bc-field input.is-invalid { border-color: var(--bc-brand); }

/* output panels */
.bc-out {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    border: 1px solid var(--bc-line);
    border-radius: var(--bc-radius-lg);
    background: var(--bc-surface-alt);
}
.bc-out__label { font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--bc-muted); }

.bc-out__code {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--bc-line);
    border-radius: 9px;
    background: var(--bc-surface);
    font-size: .86rem;
    line-height: 1.5;
    color: var(--bc-ink);
    /* Long links and snippets scroll inside the box; the page never does. */
    overflow-x: auto;
    white-space: pre;
    word-break: normal;
}
.bc-out__code--block { white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow-y: auto; }
.bc-out__code--sm { font-size: .78rem; }

.bc-out__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bc-out__actions .bc-btn.is-disabled { opacity: .4; pointer-events: none; }
.bc-btn.is-copied { background: #2f7d64; border-color: #2f7d64; color: #fff; }

/* qr */
.bc-out--qr { align-items: center; text-align: center; }
.bc-out--qr img { width: 280px; height: 280px; background: #fff; border-radius: var(--bc-radius); padding: 12px; border: 1px solid var(--bc-line); }
.bc-out--qr img.is-empty { visibility: hidden; }

/* button preview */
.bc-btnprev {
    position: relative;
    height: 150px;
    border: 1px dashed var(--bc-line);
    border-radius: var(--bc-radius);
    background: var(--bc-surface);
}
.bc-btnprev__fab {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 999px;
    color: #fff;
    font-size: .94rem;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.bc-btnprev[data-side="left"] .bc-btnprev__fab { right: auto; left: 16px; }
.bc-btnprev__fab svg { width: 20px; height: 20px; }

/* template checker findings */
.bc-checklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.bc-checklist li {
    position: relative;
    padding: 11px 14px 11px 40px;
    border-radius: 9px;
    background: var(--bc-surface);
    border: 1px solid var(--bc-line);
    font-size: .93rem;
    line-height: 1.5;
}
/* Glyph as well as colour, so the severity survives a colour-blind reader. */
.bc-checklist li::before { position: absolute; left: 14px; top: 11px; font-weight: 700; }
.bc-checklist li.is-fail { border-color: #e8b4a6; }
.bc-checklist li.is-fail::before { content: "✕"; color: var(--bc-brand); }
.bc-checklist li.is-warn::before { content: "!"; color: #b8860b; }
.bc-checklist li.is-pass { border-color: #a9d3c3; }
.bc-checklist li.is-pass::before { content: "✓"; color: #2f7d64; }
.bc-checklist li.is-idle { color: var(--bc-muted); padding-left: 14px; }
.bc-checklist li.is-idle::before { content: none; }

/* cost calculator */
.bc-out--total { background: var(--bc-surface-dark); border-color: var(--bc-surface-dark); }
.bc-out--total .bc-out__label { color: rgba(255, 255, 255, .6); }
.bc-out--total .bc-field__help { color: rgba(255, 255, 255, .62); }
.bc-out--total .bc-field__stamp { border-top-color: rgba(255, 255, 255, .15); }
.bc-out--total a { color: #fff; text-decoration: underline; }

.bc-total { display: flex; align-items: baseline; gap: 8px; margin: 0; color: #fff; }
.bc-total span { font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bc-total em { font-style: normal; font-size: .92rem; color: rgba(255, 255, 255, .6); }

.bc-costbreak { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.bc-costbreak li { display: flex; justify-content: space-between; gap: 16px; font-size: .9rem; color: rgba(255, 255, 255, .78); }
.bc-costbreak em { font-style: normal; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ blog

   The Blog module hands its public views to whichever template is active, so
   /resources renders through this stylesheet instead of Materialize. Article
   copy gets a wider measure and larger type than marketing copy: one is read
   end to end, the other is scanned.
   -------------------------------------------------------------------------- */

/* No tinted band behind either heading. On a listing it would add a second
   horizontal rule directly under the nav; on an article it pushes the opening
   paragraph down for nothing. The type carries the hierarchy on its own. */
.bc-pagehead { padding: 52px 0 0; }
.bc-pagehead h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: .35em; }
.bc-pagehead p { max-width: 620px; color: var(--bc-muted); margin: 0; }

/* Sits immediately after the base rule on purpose. It used to live several hundred
   lines earlier, and since `.bc-pagehead--center p` and `.bc-pagehead p` have equal
   specificity, `margin: 0` simply won on source order — the 620px box stayed flush
   left while the text centred inside it, which reads as "not centred" on a wide
   screen. A modifier belongs next to what it modifies. */
.bc-pagehead--center { text-align: center; }
.bc-pagehead--center p { margin-inline: auto; }

/* Article headline. Smaller than a marketing h1 and with no max-width of its own:
   the eight-column main block already sets the measure, and capping it again made
   long titles stack into four oversized lines with a column of dead space beside
   them. Tighter leading, because a two-line title at marketing leading looks loose.

   Nothing on this site uses text-wrap: balance. It evens line lengths by shortening
   all of them, which on a long heading produces a ragged block of short lines
   instead of full ones. Plain wrapping fills each line to the measure first. */
.bc-article__head { margin-bottom: 28px; }
.bc-article__head h1 {
    font-size: clamp(1.7rem, 2.9vw, 2.25rem);
    line-height: 1.22;
    margin-bottom: .5rem;
}

.bc-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; font-size: .88rem; color: var(--bc-muted); }
.bc-crumbs a { color: var(--bc-muted); }
.bc-crumbs a:hover { color: var(--bc-brand); }

/* listing grid */
.bc-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.bc-post {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bc-line);
    border-radius: var(--bc-radius-lg);
    background: var(--bc-surface);
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.bc-post:hover { border-color: #d6d9e2; box-shadow: var(--bc-shadow); transform: translateY(-2px); }

.bc-post__media { display: block; aspect-ratio: 16 / 9; background: var(--bc-surface-alt); }
.bc-post__media img { width: 100%; height: 100%; object-fit: cover; }

.bc-post__body { display: flex; flex-direction: column; flex: 1; padding: 22px; }
.bc-post__title { font-size: 1.08rem; line-height: 1.35; margin-bottom: 10px; }
.bc-post__title a { color: var(--bc-ink); }
.bc-post__title a:hover { color: var(--bc-brand); }
.bc-post__excerpt { font-size: .95rem; color: var(--bc-muted); margin-bottom: 16px; }
.bc-post__meta { display: flex; flex-wrap: wrap; gap: 7px; margin: auto 0 0; font-size: .84rem; color: var(--bc-muted); }

/* pagination */
.bc-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 48px; }
.bc-pager__page, .bc-pager__step, .bc-pager__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--bc-line);
    border-radius: 9px;
    font-size: .93rem;
    font-weight: 600;
    color: var(--bc-body);
    font-variant-numeric: tabular-nums;
}
.bc-pager__page:hover, .bc-pager__step:hover { border-color: var(--bc-ink); color: var(--bc-ink); }
.bc-pager__page.is-current { background: var(--bc-brand); border-color: var(--bc-brand); color: #fff; }
.bc-pager__gap { border-color: transparent; }
.bc-pager__step.is-off { opacity: .4; }

/* article */
/* Roughly the 8/4 split the Materialize article used, so the body keeps a
   comfortable measure and the contents list sits alongside from the first line
   rather than starting level with the image. */
.bc-article__grid {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 3.4fr);
    gap: 64px;
    align-items: start;
    padding-top: 48px;
    padding-bottom: 72px;
}
.bc-article--solo .bc-article__grid { grid-template-columns: minmax(0, 1fr); max-width: 800px; }

.bc-article__meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; font-size: .92rem; color: var(--bc-muted); }
.bc-article__lead {
    margin-bottom: 28px;
    padding-left: 18px;
    border-left: 3px solid var(--bc-brand);
    font-size: 1.12rem;
    color: var(--bc-ink);
}

/* Article body. Descendant selectors on one .bc-prose root rather than utility
   classes, because this HTML comes from the editor and carries no classes. */
.bc-prose { font-size: 1.06rem; line-height: 1.75; color: var(--bc-body); }
.bc-prose > *:first-child { margin-top: 0; }

/* Jumping to a contents link scrolls the heading to y=0, where the sticky nav
   covers it — so the first thing visible is the paragraph below and the anchor
   looks like it landed in the wrong place. scroll-margin-top reserves the nav's
   height plus a gap, so the heading arrives just under the bar. Applied to any
   anchored element, not only the generated heading ids, so a hand-written anchor
   in the editor behaves the same way. */
.bc-prose :is(h2, h3, h4, h5, h6),
.bc-prose [id] {
    scroll-margin-top: calc(var(--bc-header-h) + 28px);
}
.bc-prose h2 { font-size: 1.65rem; margin: 2em 0 .6em; }
.bc-prose h3 { font-size: 1.28rem; margin: 1.7em 0 .5em; }
.bc-prose h4 { font-size: 1.08rem; margin: 1.5em 0 .5em; }
.bc-prose p { margin: 0 0 1.15em; }
.bc-prose ul, .bc-prose ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.bc-prose li { margin-bottom: .5em; }
.bc-prose li::marker { color: var(--bc-muted); }
.bc-prose a { text-decoration: underline; text-underline-offset: 2px; }
.bc-prose img, .bc-prose video { width: 100%; border-radius: var(--bc-radius); margin: 1.6em 0; }
.bc-prose iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--bc-radius); margin: 1.6em 0; }
.bc-prose hr { border: 0; border-top: 1px solid var(--bc-line); margin: 2.4em 0; }
.bc-prose blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--bc-line);
    color: var(--bc-muted);
    font-style: italic;
}
.bc-prose code {
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--bc-surface-alt);
    border: 1px solid var(--bc-line);
    font-size: .88em;
}
.bc-prose pre {
    margin: 1.6em 0;
    padding: 18px;
    border-radius: var(--bc-radius);
    background: var(--bc-surface-dark);
    color: #e8eaf0;
    font-size: .88rem;
    line-height: 1.6;
    /* Long lines scroll inside the block; the page body must never scroll sideways. */
    overflow-x: auto;
}
.bc-prose pre code { padding: 0; background: none; border: 0; color: inherit; font-size: inherit; }

/* Tables scroll inside their own container for the same reason. The wrapper is
   added in the view after sanitising, because a Markdown table has no wrapper of
   its own and a wide one would otherwise scroll the entire page sideways. */
.bc-table { overflow-x: auto; margin: 1.6em 0; -webkit-overflow-scrolling: touch; }
.bc-prose table { width: 100%; margin: 0; border-collapse: collapse; font-size: .96rem; }
/* Stops a many-column table crushing every cell to one word per line. */
.bc-prose th, .bc-prose td { white-space: nowrap; }
.bc-prose td:first-child, .bc-prose th:first-child { white-space: normal; }
.bc-prose thead th { text-align: left; border-bottom: 2px solid var(--bc-line); padding: 10px 12px; color: var(--bc-ink); }
.bc-prose td { border-bottom: 1px solid var(--bc-line); padding: 10px 12px; }

/* Honour the column alignment the author wrote in Markdown (| ---: |). Needed
   explicitly because the rules above are author CSS, which outranks the align
   attribute's presentational hint — without these the attribute survives the
   sanitizer and then has no effect. Two classes plus an attribute beats one
   class plus two elements, so these win. Case-insensitive: align is. */
.bc-prose th[align="left" i],   .bc-prose td[align="left" i]   { text-align: left; }
.bc-prose th[align="center" i], .bc-prose td[align="center" i] { text-align: center; }
.bc-prose th[align="right" i],  .bc-prose td[align="right" i]  { text-align: right; }
/* Figures in a right-aligned column are almost always numeric, and lining them
   up is the reason the author right-aligned them in the first place. */
.bc-prose td[align="right" i] { font-variant-numeric: tabular-nums; }

/* aside — contents only; related articles moved below the piece */
.bc-article__aside { position: sticky; top: calc(var(--bc-header-h) + 24px); padding-top: 4px; }
.bc-aside__title { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--bc-ink); margin-bottom: 12px; }

.bc-toc { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--bc-line); }
.bc-toc li { margin-bottom: 2px; }
.bc-toc a {
    display: block;
    padding: 5px 0 5px 14px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: .91rem;
    line-height: 1.4;
    color: var(--bc-muted);
}
.bc-toc a:hover { border-left-color: var(--bc-brand); color: var(--bc-ink); }
.bc-toc__l3 a { padding-left: 26px; font-size: .87rem; }

.bc-related__title { font-size: 1.3rem; margin-bottom: 24px; }

/* ------------------------------------------------------------------ cta */

.bc-cta { padding: 80px 0; background: var(--bc-surface-dark); text-align: center; }
.bc-cta h2 { color: #fff; }
.bc-cta p { max-width: 560px; margin: 0 auto 30px; color: rgba(255, 255, 255, .74); font-size: 1.08rem; }
.bc-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ------------------------------------------------------------------ footer */

.bc-footer { padding: 64px 0 64px; background: var(--bc-surface-alt); border-top: 1px solid var(--bc-line); }
/* 2fr on the brand column, matching whatsmenu.page: it carries a postal address
   and two contact lines, and at 1.6fr the street line wrapped while the link
   columns sat half empty. Five units, so the three link columns stay equal. */
.bc-footer__grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 40px; }
.bc-footer__word {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--bc-brand);
}
.bc-footer__word:hover { color: var(--bc-brand-dark); }

/* font-style is reset because <address> italicises by default, which reads as an
   aside rather than as the company's actual details. */
/* font-style is reset because <address> italicises by default, which reads as an
   aside rather than as the company's actual details. */
.bc-footer__org {
    display: block;
    /* No max-width: the grid column is the constraint now, and a second cap inside
       it just reintroduced the wrapping the wider column was meant to fix. */
    /* Sits directly under the wordmark, which carries no bottom margin of its own. */
    margin-top: 6px;
    font-style: normal;
    /* .875rem = Tailwind text-sm, what whatsmenu.page's footer runs at, and the
       same size as the link columns beside it. Only the headings step down. */
    font-size: .875rem;
    line-height: 1.65;
    color: var(--bc-muted);
}
.bc-footer__org > span { display: block; }
/* The contact line is the one thing here anyone clicks, so it gets the separation
   a blank line would give it in plain text. */
/* Scoped through the parent, not written as a bare class. `.bc-footer__org > span`
   is a class plus an element and outranks one class, so a plain `.bc-footer__row`
   would lose to `display: block` and every icon row would collapse onto one line —
   the same specificity trap as the bubble margin and the radius shorthand above. */
.bc-footer__org > .bc-footer__row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 7px;
    color: var(--bc-muted);
}
/* Continuation of the line above it: no mark, and indented by exactly the mark's
   width plus its gap so the two address lines share a left edge. */
.bc-footer__org > .bc-footer__row--cont { margin-top: 0; padding-left: 24px; }
a.bc-footer__row:hover, a.bc-footer__row:hover .bc-footer__ico { color: var(--bc-brand); }
/* Nudged down to the first line's optical centre rather than centred on the row:
   on the wrapping address line, centring would float the pin into the gap. */
.bc-footer__ico { flex: none; width: 15px; height: 15px; margin-top: 4px; color: var(--bc-muted); }
/* .bc-ico sizes nothing on its own — every use sets its own svg box. */
.bc-footer__ico svg { width: 15px; height: 15px; }

.bc-footer h4 { font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--bc-ink); margin-bottom: 14px; }
.bc-footer ul { margin: 0; padding: 0; list-style: none; }
.bc-footer li { margin-bottom: 9px; }
.bc-footer li a { font-size: .875rem; color: var(--bc-muted); }
.bc-footer li a:hover { color: var(--bc-ink); }


/* ------------------------------------------------------------------ responsive */

@media (max-width: 1040px) {
    /* Stacked, so the mock sits under the copy at full width and the rotation is
       dropped — a tilt only reads as depth when there is something beside it. */
    .bc-hero__grid { grid-template-columns: 1fr; gap: 44px; }
    .bc-hero__inner { max-width: 640px; }
    .bc-app { transform: none; }
}

@media (max-width: 960px) {
    .bc-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .bc-posts { grid-template-columns: repeat(2, 1fr); }
    /* Sidebar below the article rather than beside it; sticky is meaningless once
       it is no longer alongside anything. */
    .bc-article__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .bc-article__aside { position: static; }
    .bc-split { grid-template-columns: 1fr; gap: 40px; }
    .bc-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

@media (max-width: 780px) {
    body.beacon { font-size: 16px; }
    .bc-section { padding: 60px 0; }
    .bc-hero { padding: 60px 0 52px; }
    .bc-head { margin-bottom: 40px; }

    .bc-nav__toggle { display: inline-flex; }

    .bc-nav__links {
        display: none;
        position: absolute;
        left: var(--bc-gutter);
        right: var(--bc-gutter);
        top: 64px;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 12px;
        background: #fff;
        border: 1px solid var(--bc-line);
        border-radius: var(--bc-radius);
        box-shadow: var(--bc-shadow-lg);
    }
    .bc-nav__links.is-open { display: flex; }

    /* The actions sit inside the collapsed panel on mobile, so they stack full
       width alongside the links rather than staying a horizontal row. */
    .bc-nav__actions { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 8px; }
    .bc-nav__links .bc-btn { width: 100%; }
}

@media (max-width: 620px) {
    .bc-grid--3, .bc-grid--2 { grid-template-columns: 1fr; }
    .bc-posts { grid-template-columns: 1fr; }
    .bc-pagehead { padding: 40px 0 30px; }
    .bc-compare tbody th { min-width: 170px; }
    .bc-tool, .bc-tool--wide { grid-template-columns: 1fr; gap: 28px; }
    .bc-field--row { grid-template-columns: 1fr; }
    .bc-footer__grid { grid-template-columns: 1fr; }
    .bc-hero__actions .bc-btn { width: 100%; }

    /* Two panes inside a phone-width card leaves neither readable, so the list
       drops and the open conversation gets the full frame. */
    .bc-app__body { grid-template-columns: 1fr; min-height: 0; }
    .bc-app__list { display: none; }
    .bc-app__title { font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    /* animation-delay must be zeroed alongside the duration. Collapsing only the
       duration leaves the staggered mock elements sitting at their `from` state —
       invisible — for the length of their delay, so the reader who asked for less
       motion would watch a blank frame for three seconds instead of none. With both
       at zero and fill-mode both, every step lands on its final state immediately. */
    *, *::before, *::after {
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Print: strip the furniture, keep the content readable. */
@media print {
    .bc-header, .bc-cta, .bc-footer { display: none; }
    body.beacon { font-size: 12pt; }
}