/*
 * CrewByte landing — V2.
 *
 * Owns the `cb-l-*` namespace and nothing else. Loaded after landing.css, which
 * is 5,787 lines and carries the same duplicate-selector risk as app.css. Keeping
 * this separate means nothing here can be silently overridden from a thousand
 * lines away, and the whole redesign can be reverted by deleting one file and one
 * <link>.
 *
 * Palette is CrewByte's own (brand-refresh.css:1-18), so the site, the app and
 * the Hub read as one product.
 */

.cb-l {
    --l-navy: #0C2A5E;
    --l-navy-deep: #071D42;
    --l-blue: #2C8FE5;
    --l-blue-strong: #1474C5;
    --l-blue-soft: #EAF5FF;
    --l-ink: #0B1D3A;
    --l-muted: #55708C;
    --l-faint: #8698AE;
    --l-line: #DCE7F2;
    --l-canvas: #F4F8FC;
    --l-surface: #FFFFFF;

    --l-radius: 14px;
    --l-radius-lg: 22px;
}

/* Wide sections need to breathe more than landing.css allows by default. */
.cb-l .landing-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ------------------------------------------------------------- primitives */

.cb-l-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--l-blue-strong);
    background: var(--l-blue-soft);
    padding: 6px 12px;
    border-radius: 999px;
}
.cb-l-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.cb-l-eyebrow.is-dark { color: var(--l-navy); background: rgba(12, 42, 94, 0.07); }
.cb-l-eyebrow.is-light { color: #BFDCF7; background: rgba(255, 255, 255, 0.1); }

.cb-l-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 650;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.cb-l-btn svg { width: 16px; height: 16px; }
.cb-l-btn:hover { transform: translateY(-1px); }

.cb-l-btn-primary {
    background: linear-gradient(180deg, var(--l-blue) 0%, var(--l-blue-strong) 100%);
    color: #FFFFFF;
    box-shadow: 0 10px 26px rgba(20, 116, 197, 0.28);
}
.cb-l-btn-primary:hover { box-shadow: 0 14px 32px rgba(20, 116, 197, 0.34); }

.cb-l-btn-quiet { background: var(--l-surface); color: var(--l-navy); border-color: var(--l-line); }
.cb-l-btn-quiet:hover { border-color: var(--l-blue); color: var(--l-blue-strong); }

.cb-l-btn-light { background: #FFFFFF; color: var(--l-navy); }
.cb-l-btn-ghost { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.28); }
.cb-l-btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }

.cb-l-section-head { max-width: 60ch; margin-bottom: 44px; }
.cb-l-section-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }

.cb-l-section-head h2 {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.14;
    letter-spacing: -0.03em;
    font-weight: 750;
    color: var(--l-ink);
    margin: 18px 0 14px;
    text-wrap: balance;
}

.cb-l-section-head p { font-size: 17px; line-height: 1.6; color: var(--l-muted); margin: 0; }

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

.cb-l-hero { position: relative; padding: 72px 0 88px; overflow: hidden; background: var(--l-canvas); }

.cb-l-hero-glow {
    position: absolute;
    top: -280px; right: -180px;
    width: 720px; height: 720px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(44, 143, 229, 0.16) 0%, rgba(44, 143, 229, 0) 68%);
    pointer-events: none;
}

.cb-l-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px;
    align-items: center;
}

.cb-l-hero-copy h1 {
    font-size: clamp(38px, 5.6vw, 62px);
    line-height: 1.04;
    letter-spacing: -0.035em;
    font-weight: 800;
    color: var(--l-ink);
    margin: 22px 0 20px;
    text-wrap: balance;
}
.cb-l-hero-copy h1 span {
    background: linear-gradient(120deg, var(--l-blue) 0%, var(--l-blue-strong) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cb-l-hero-sub { font-size: 19px; line-height: 1.58; color: var(--l-muted); margin: 0 0 30px; max-width: 46ch; }

.cb-l-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.cb-l-hero-points { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.cb-l-hero-points li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--l-muted); }
.cb-l-hero-points svg { width: 16px; height: 16px; color: #0C7F4F; flex: none; }

/* Hero visual — a sketch, not a screenshot. */

.cb-l-mock {
    background: var(--l-surface);
    border: 1px solid var(--l-line);
    border-radius: var(--l-radius-lg);
    box-shadow: 0 30px 70px rgba(12, 42, 94, 0.14);
    overflow: hidden;
}

.cb-l-mock-clock {
    margin-top: 9px; text-align: center;
    background: linear-gradient(180deg, var(--l-blue) 0%, var(--l-blue-strong) 100%);
    color: #FFFFFF; font-size: 12px; font-weight: 650;
    padding: 8px; border-radius: 9px;
}

/* ----------------------------------------------------------------- problem */

.cb-l-problem { padding: 88px 0; background: var(--l-surface); }

/* Before / after. The contrast is the argument, so it gets its own block. */

.cb-l-chaos {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: center;
    padding: 34px;
    border-radius: var(--l-radius-lg);
    background: var(--l-canvas);
    border: 1px solid var(--l-line);
}

.cb-l-chaos-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.cb-l-chaos-col li { font-size: 14.5px; line-height: 1.5; display: flex; gap: 9px; align-items: flex-start; }
.cb-l-chaos-col svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: #0C7F4F; }

.cb-l-chaos-label {
    display: block; font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px;
}

.cb-l-chaos-col.is-before .cb-l-chaos-label { color: #C4384A; }
.cb-l-chaos-col.is-before li { color: var(--l-faint); }
.cb-l-chaos-col.is-before li::before { content: "×"; color: #C4384A; font-weight: 700; flex: none; width: 15px; }

.cb-l-chaos-col.is-after .cb-l-chaos-label { color: #0C7F4F; }
.cb-l-chaos-col.is-after li { color: var(--l-ink); font-weight: 500; }

.cb-l-chaos-arrow { color: var(--l-blue); display: grid; place-items: center; }
.cb-l-chaos-arrow svg { width: 26px; height: 26px; }

/* ----------------------------------------------------------------- product */

.cb-l-product { padding: 88px 0; background: var(--l-canvas); }

.cb-l-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }

.cb-l-feature {
    padding: 28px;
    background: var(--l-surface);
    border: 1px solid var(--l-line);
    border-radius: var(--l-radius-lg);
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.cb-l-feature:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(12, 42, 94, 0.09); }

.cb-l-feature-icon {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--l-blue-soft);
    color: var(--l-blue-strong);
    margin-bottom: 18px;
}
.cb-l-feature-icon svg { width: 21px; height: 21px; }

.cb-l-feature h3 { font-size: 18.5px; font-weight: 700; letter-spacing: -0.015em; color: var(--l-ink); margin: 0 0 9px; }
.cb-l-feature p { font-size: 14.5px; line-height: 1.62; color: var(--l-muted); margin: 0; }

/* --------------------------------------------------------------------- app */

.cb-l-app {
    padding: 88px 0;
    background: linear-gradient(160deg, var(--l-navy) 0%, var(--l-navy-deep) 100%);
    color: #FFFFFF;
}

.cb-l-app-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); gap: 60px; align-items: center; }

.cb-l-app-copy h2 {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.14; letter-spacing: -0.03em; font-weight: 750;
    color: #FFFFFF; margin: 18px 0 16px; text-wrap: balance;
}
.cb-l-app-copy > p { font-size: 17px; line-height: 1.62; color: #A9C6E4; margin: 0 0 28px; max-width: 48ch; }

.cb-l-app-list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.cb-l-app-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; line-height: 1.5; color: #C7DDF2; }
.cb-l-app-list strong { color: #FFFFFF; font-weight: 650; }
.cb-l-app-list svg { width: 16px; height: 16px; color: #57D3A0; flex: none; margin-top: 3px; }

.cb-l-app-note { font-size: 13.5px; color: #8FB2D4; margin: 0; }

.cb-l-app-visual { display: grid; place-items: center; }

/* ------------------------------------------------------------- testimonials */

.cb-l-voices { padding: 88px 0; background: var(--l-surface); overflow: hidden; }

.cb-l-marquee {
    /* Fades the strip out at both edges so quotes enter and leave rather than
       being abruptly clipped by the viewport. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    overflow: hidden;
}

.cb-l-marquee-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: cb-l-scroll 64s linear infinite;
}

/* Pausing on hover lets someone actually finish reading a quote that caught
   their eye — without it a moving carousel is decoration, not content. */
.cb-l-marquee:hover .cb-l-marquee-track,
.cb-l-marquee:focus-within .cb-l-marquee-track { animation-play-state: paused; }

@keyframes cb-l-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.cb-l-voice {
    flex: none;
    width: 380px;
    margin: 0;
    padding: 28px;
    background: var(--l-canvas);
    border: 1px solid var(--l-line);
    border-radius: var(--l-radius-lg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
}

.cb-l-voice blockquote {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--l-ink);
    font-weight: 500;
}

.cb-l-voice figcaption { display: flex; align-items: center; gap: 11px; }

.cb-l-voice-avatar {
    width: 38px; height: 38px; flex: none;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--l-blue) 0%, var(--l-blue-strong) 100%);
    color: #FFFFFF;
    display: grid; place-items: center;
    font-size: 13px; font-weight: 650;
}

.cb-l-voice-who { display: flex; flex-direction: column; min-width: 0; }
.cb-l-voice-who strong { font-size: 14px; font-weight: 650; color: var(--l-ink); }
.cb-l-voice-who small { font-size: 12.5px; color: var(--l-muted); }

/* ------------------------------------------------------------------- teams */

.cb-l-teams { padding: 88px 0; background: var(--l-canvas); }

.cb-l-teams-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }

.cb-l-team {
    padding: 24px;
    background: var(--l-surface);
    border: 1px solid var(--l-line);
    border-radius: var(--l-radius);
    border-left: 3px solid var(--l-blue);
}
.cb-l-team h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--l-ink); margin: 0 0 7px; }
.cb-l-team p { font-size: 14.5px; line-height: 1.58; color: var(--l-muted); margin: 0; }

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

.cb-l-cta { padding: 0 0 88px; background: var(--l-canvas); }

.cb-l-cta-card {
    position: relative;
    overflow: hidden;
    padding: 64px 48px;
    border-radius: 28px;
    background: linear-gradient(150deg, var(--l-navy) 0%, var(--l-navy-deep) 100%);
    text-align: center;
}

.cb-l-cta-glow {
    position: absolute;
    top: -180px; left: 50%;
    width: 620px; height: 620px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(44, 143, 229, 0.3) 0%, rgba(44, 143, 229, 0) 66%);
    pointer-events: none;
}

.cb-l-cta-copy { position: relative; max-width: 56ch; margin: 0 auto; }
.cb-l-cta-copy h2 {
    font-size: clamp(28px, 4.2vw, 44px);
    line-height: 1.12; letter-spacing: -0.03em; font-weight: 780;
    color: #FFFFFF; margin: 18px 0 16px; text-wrap: balance;
}
.cb-l-cta-copy > p { font-size: 17px; line-height: 1.6; color: #A9C6E4; margin: 0 0 30px; }
.cb-l-cta-copy .cb-l-hero-actions { justify-content: center; }
.cb-l-cta-note { font-size: 13px; color: #8FB2D4; margin: 22px 0 0; }

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

.cb-l-faq { padding: 88px 0; background: var(--l-surface); }

.cb-l-faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }

.cb-l-faq-item {
    background: var(--l-canvas);
    border: 1px solid var(--l-line);
    border-radius: var(--l-radius);
    overflow: hidden;
}

.cb-l-faq-item > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 22px; cursor: pointer; list-style: none;
    font-size: 16px; font-weight: 650; color: var(--l-ink);
}
.cb-l-faq-item > summary::-webkit-details-marker { display: none; }
.cb-l-faq-item > summary span { color: var(--l-blue); display: grid; place-items: center; transition: transform 180ms ease; flex: none; }
.cb-l-faq-item > summary span svg { width: 16px; height: 16px; }
.cb-l-faq-item[open] > summary span { transform: rotate(45deg); }
.cb-l-faq-item[open] > summary { border-bottom: 1px solid var(--l-line); }
.cb-l-faq-item p { margin: 0; padding: 18px 22px; font-size: 15px; line-height: 1.62; color: var(--l-muted); }

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

@media (max-width: 980px) {
    .cb-l-hero-inner,
    .cb-l-app-inner { grid-template-columns: 1fr; gap: 44px; }
    .cb-l-chaos { grid-template-columns: 1fr; }
    .cb-l-chaos-arrow { transform: rotate(90deg); }
}

@media (max-width: 620px) {
    .cb-l-hero { padding: 48px 0 64px; }
    .cb-l-problem, .cb-l-product, .cb-l-app, .cb-l-voices, .cb-l-teams, .cb-l-faq { padding: 60px 0; }
    .cb-l-cta-card { padding: 44px 24px; }
    .cb-l-voice { width: 300px; padding: 22px; }
    .cb-l-hero-actions .cb-l-btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------- a11y ---- */

.cb-l a:focus-visible,
.cb-l button:focus-visible,
.cb-l summary:focus-visible {
    outline: 3px solid var(--l-blue);
    outline-offset: 3px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    /* The marquee stops entirely rather than slowing. Someone who has asked for
       reduced motion should not have to chase moving text to read it — the
       quotes stay readable as a static row they can scroll themselves. */
    .cb-l-marquee-track { animation: none; }
    .cb-l-marquee { overflow-x: auto; }
    .cb-l-btn:hover,
    .cb-l-feature:hover { transform: none; }
    .cb-l-faq-item > summary span { transition: none; }
}

/* ==========================================================================
   Why CrewByte — shares every token above, adds only what this page needs
   ========================================================================== */

.cb-l-hero.is-compact { padding: 64px 0 72px; }

.cb-l-why-hero { max-width: 62ch; }
.cb-l-why-hero h1 {
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.06;
    letter-spacing: -0.035em;
    font-weight: 800;
    color: var(--l-ink);
    margin: 22px 0 20px;
    text-wrap: balance;
}
.cb-l-why-hero h1 span {
    background: linear-gradient(120deg, var(--l-blue) 0%, var(--l-blue-strong) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ------------------------------------------------------- option comparison */

.cb-l-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }

.cb-l-option {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px;
    background: var(--l-surface);
    border: 1px solid var(--l-line);
    border-radius: var(--l-radius-lg);
}

/* The featured card is the only one that inverts. One emphatic thing on the
   page beats four competing for attention. */
.cb-l-option.is-featured {
    background: linear-gradient(155deg, var(--l-navy) 0%, var(--l-navy-deep) 100%);
    border-color: transparent;
    box-shadow: 0 22px 50px rgba(12, 42, 94, 0.2);
}

.cb-l-option-label {
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--l-faint);
}
.cb-l-option.is-featured .cb-l-option-label { color: #7FB6EC; }

.cb-l-option h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--l-ink); margin: 0; }
.cb-l-option.is-featured h3 { color: #FFFFFF; }

.cb-l-option p { font-size: 14.5px; line-height: 1.6; color: var(--l-muted); margin: 0; flex: 1; }
.cb-l-option.is-featured p { color: #B6D2ED; }

.cb-l-option-best { border-top: 1px solid var(--l-line); padding-top: 13px; margin-top: 4px; }
.cb-l-option.is-featured .cb-l-option-best { border-top-color: rgba(255, 255, 255, 0.16); }

.cb-l-option-best strong {
    display: block; font-size: 11px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--l-faint); margin-bottom: 4px;
}
.cb-l-option.is-featured .cb-l-option-best strong { color: #7FB6EC; }

.cb-l-option-best span { font-size: 13.5px; line-height: 1.5; color: var(--l-muted); }
.cb-l-option.is-featured .cb-l-option-best span { color: #D3E5F6; }

/* ---------------------------------------------------------- checklist table */

.cb-l-checklist { padding: 88px 0; background: var(--l-surface); }

.cb-l-table {
    border: 1px solid var(--l-line);
    border-radius: var(--l-radius-lg);
    overflow: hidden;
    background: var(--l-surface);
}

.cb-l-table-head,
.cb-l-table-row {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    padding: 18px 24px;
    align-items: start;
}

.cb-l-table-head {
    background: var(--l-canvas);
    border-bottom: 1px solid var(--l-line);
}
.cb-l-table-head span {
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--l-faint);
}

.cb-l-table-row { border-bottom: 1px solid var(--l-line); }
.cb-l-table-row:last-child { border-bottom: 0; }

.cb-l-table-row strong {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; font-weight: 650; color: var(--l-ink);
}
.cb-l-table-row strong span { color: var(--l-blue); display: grid; place-items: center; flex: none; }
.cb-l-table-row strong span svg { width: 17px; height: 17px; }

.cb-l-table-row p { margin: 0; font-size: 14px; line-height: 1.58; color: var(--l-muted); }

/* The question column is deliberately quieter — it is a prompt, not a claim. */
.cb-l-table-ask { color: var(--l-faint) !important; font-style: italic; }

/* ---------------------------------------------------------------- honest fit */

.cb-l-fit { padding: 88px 0; background: var(--l-canvas); }

.cb-l-fit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }

.cb-l-fit-card {
    padding: 32px;
    border-radius: var(--l-radius-lg);
    background: var(--l-surface);
    border: 1px solid var(--l-line);
}
.cb-l-fit-card.is-yes { border-left: 3px solid #0C7F4F; }
.cb-l-fit-card.is-maybe { border-left: 3px solid var(--l-blue); }

.cb-l-fit-label {
    display: block;
    font-size: 17px; font-weight: 700; letter-spacing: -0.015em;
    color: var(--l-ink); margin-bottom: 20px;
}

.cb-l-fit-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.cb-l-fit-card li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: var(--l-muted); }
.cb-l-fit-card svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.cb-l-fit-card.is-yes svg { color: #0C7F4F; }
.cb-l-fit-card.is-maybe svg { color: var(--l-blue); }

.cb-l-fit-card > p { font-size: 14px; line-height: 1.6; color: var(--l-faint); margin: 20px 0 0; }

.cb-l-fit-link {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 16px; font-size: 14.5px; font-weight: 650;
    color: var(--l-blue-strong); text-decoration: none;
}
.cb-l-fit-link:hover { text-decoration: underline; }
.cb-l-fit-link svg { width: 15px; height: 15px; }

/* -------------------------------------------------------------------- proof */

.cb-l-proof-sub { color: #A9C6E4 !important; }

.cb-l-proof-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

.cb-l-proof-links a {
    display: flex; align-items: center; gap: 14px;
    padding: 20px 22px;
    border-radius: var(--l-radius);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-decoration: none;
    transition: background 140ms ease, transform 140ms ease;
}
.cb-l-proof-links a:hover { background: rgba(255, 255, 255, 0.11); transform: translateY(-2px); }

.cb-l-proof-links a > span {
    display: grid; place-items: center;
    width: 40px; height: 40px; flex: none;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.11);
    color: #7FB6EC;
}
.cb-l-proof-links a > span svg { width: 19px; height: 19px; }

.cb-l-proof-links div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cb-l-proof-links small { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #7FA9D6; }
.cb-l-proof-links strong { font-size: 15px; font-weight: 650; color: #FFFFFF; }
.cb-l-proof-links > a > svg { width: 16px; height: 16px; color: #7FB6EC; flex: none; }

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

@media (max-width: 860px) {
    .cb-l-table-head { display: none; }
    .cb-l-table-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 20px;
    }
    /* Without the header row the third column loses its meaning, so it labels
       itself once the table collapses. */
    .cb-l-table-ask::before {
        content: "Ask any provider: ";
        font-style: normal;
        font-weight: 650;
        color: var(--l-muted);
    }
}

@media (max-width: 620px) {
    .cb-l-hero.is-compact { padding: 44px 0 52px; }
    .cb-l-checklist, .cb-l-fit { padding: 60px 0; }
    .cb-l-fit-card { padding: 24px; }
}

/* ==========================================================================
   Device frame — wraps the real iOS screenshot
   ==========================================================================
   assets/img/iosapp.png is 1170x2532: a flat rectangle with square corners.
   The rounding therefore lives on .cb-l-device-screen with overflow: hidden,
   not on the image itself — so the screen corners always match the bezel
   radius exactly, at every size, without touching the asset.

   The screenshot already contains its own status bar (time, signal, battery),
   so there is deliberately no notch or island drawn over it. Adding one would
   sit on top of the real status bar and read as a mistake.
   ========================================================================== */

.cb-l-device {
    position: relative;
    width: 100%;
    max-width: 296px;
    margin: 0 auto;
    padding: 11px;
    border-radius: 54px;
    background: linear-gradient(150deg, #2A3444 0%, #10151E 46%, #262F3D 100%);
    box-shadow:
        0 40px 80px rgba(5, 15, 35, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.07) inset;
}

/* The thin bright rim just inside the bezel is what makes a rounded rectangle
   read as glass rather than as a card. */
.cb-l-device::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 47px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.cb-l-device-screen {
    position: relative;
    border-radius: 44px;
    overflow: hidden;
    background: #05070D;
    /* Reserves the exact space before the image loads, so nothing shifts. */
    aspect-ratio: 1170 / 2532;
}

.cb-l-device-screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Side buttons. Small detail, but without them a rounded rectangle is just a
   rounded rectangle. */
.cb-l-device-btn {
    position: absolute;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, #38414F 0%, #1B222D 100%);
}
.cb-l-device-btn.is-vol-up { left: -3px; top: 118px; height: 34px; }
.cb-l-device-btn.is-vol-down { left: -3px; top: 160px; height: 34px; }
.cb-l-device-btn.is-power { right: -3px; top: 140px; height: 56px; }

/* Hero variant — smaller, floated over the rota card. */
.cb-l-device.is-small {
    position: absolute;
    right: -18px;
    bottom: -58px;
    width: 168px;
    max-width: none;
    margin: 0;
    padding: 7px;
    border-radius: 32px;
    box-shadow: 0 28px 56px rgba(5, 15, 35, 0.46), 0 0 0 1px rgba(255, 255, 255, 0.07) inset;
}
.cb-l-device.is-small::after { inset: 5px; border-radius: 28px; }
.cb-l-device.is-small .cb-l-device-screen { border-radius: 26px; }
.cb-l-device.is-small .cb-l-device-btn { display: none; }

@media (max-width: 980px) {
    .cb-l-device.is-small { right: 6px; bottom: -44px; }
}

@media (max-width: 620px) {
    /* The hero already has the rota card doing the work; a 168px phone on a
       narrow screen is decoration competing with the headline. */
    .cb-l-device.is-small { display: none; }
    .cb-l-device { max-width: 250px; }
}

/* ==========================================================================
   Hero showcase — the real product, full width
   ==========================================================================
   Replaces the two-column hero and the hand-drawn rota sketch. rota.png is
   1904x906 (2.1:1); giving it the container width rather than a 500px column
   is the difference between "you can see it's a rota" and "you can't read it".

   Both screenshots are flat rectangles. Every corner radius lives on a frame
   with overflow: hidden, so neither asset was edited and both stay crisp.
   ========================================================================== */

/* Hero copy is now centred above the product, so the two-column grid goes. */
.cb-l-hero-inner { display: block; }

.cb-l-hero-copy.is-centred {
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
}

.cb-l-hero-copy.is-centred .cb-l-hero-sub { margin-left: auto; margin-right: auto; }
.cb-l-hero-copy.is-centred .cb-l-hero-actions { justify-content: center; }

/* The three proof points read as a row under a centred hero, not a list. */
.cb-l-hero-copy.is-centred .cb-l-hero-points {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    margin-top: 26px;
}

/* --------------------------------------------------------------- showcase */

.cb-l-showcase {
    position: relative;
    margin-top: 56px;
    /* Room for the phone, which deliberately hangs below the browser frame. */
    padding-bottom: 40px;
}

.cb-l-browser {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    background: var(--l-surface);
    border: 1px solid var(--l-line);
    box-shadow: 0 40px 90px rgba(12, 42, 94, 0.18);
}

.cb-l-browser-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    background: #F2F7FC;
    border-bottom: 1px solid var(--l-line);
}
.cb-l-browser-bar span { width: 10px; height: 10px; border-radius: 50%; background: #D2DFEC; flex: none; }

/* The URL bar is what says "this is the web app" rather than "this is a
   picture of a table". */
.cb-l-browser-bar em {
    flex: 1;
    margin-left: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid var(--l-line);
    font-style: normal;
    font-size: 11.5px;
    color: var(--l-faint);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-l-browser img {
    display: block;
    width: 100%;
    height: auto;
}

/* Phone overlapping the bottom-right corner. */
.cb-l-device.is-floating {
    position: absolute;
    right: 46px;
    bottom: 0;
    width: 186px;
    max-width: none;
    margin: 0;
    padding: 8px;
    border-radius: 36px;
    box-shadow: 0 30px 62px rgba(5, 15, 35, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.07) inset;
}
.cb-l-device.is-floating::after { inset: 6px; border-radius: 31px; }
.cb-l-device.is-floating .cb-l-device-screen { border-radius: 29px; }
.cb-l-device.is-floating .cb-l-device-btn { display: none; }

@media (max-width: 1060px) {
    .cb-l-device.is-floating { right: 20px; width: 158px; }
}

@media (max-width: 780px) {
    /* Below this the rota grid is too small to read and the phone covers a
       third of it. The phone already has its own full-size moment in the app
       section, so here it simply goes. */
    .cb-l-device.is-floating { display: none; }
    .cb-l-showcase { padding-bottom: 0; }
    .cb-l-browser-bar em { display: none; }
}

@media (max-width: 620px) {
    .cb-l-showcase { margin-top: 36px; }
    .cb-l-hero-copy.is-centred .cb-l-hero-points {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

/* ==========================================================================
   Who's been left behind — editorial list, not a card grid
   ==========================================================================
   Replaces .cb-l-problem-card. Three pale rounded boxes in a row is the
   default SaaS pattern, and the uppercase labels above each heading were
   one-word restatements of the heading itself.

   Hairline rules and space do the same structural job. The statement gets to
   be large enough to actually read as a statement, and nothing is competing
   with it.
   ========================================================================== */

.cb-l-cases {
    display: flex;
    flex-direction: column;
    margin-bottom: 56px;
    border-top: 1px solid var(--l-line);
}

.cb-l-case {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 20px 56px;
    align-items: start;
    padding: 30px 0;
    border-bottom: 1px solid var(--l-line);
}

.cb-l-case h3 {
    margin: 0;
    font-size: clamp(20px, 2.4vw, 27px);
    line-height: 1.24;
    letter-spacing: -0.024em;
    font-weight: 700;
    color: var(--l-ink);
    text-wrap: balance;
}

.cb-l-case p {
    margin: 0;
    font-size: 16px;
    line-height: 1.62;
    color: var(--l-muted);
    /* Nudged down so the supporting line sits on the heading's baseline block
       rather than floating level with its cap height. */
    padding-top: 4px;
}

@media (max-width: 800px) {
    .cb-l-case {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 24px 0;
    }
    .cb-l-case p { padding-top: 0; }
}