/* Boat Builders — Delivery Platform (hub + tabs under /boat-builders/) — shared stylesheet. Section classes are .bb-* plus .dp-* additions; ROI is .roi-*. */
body {
    overflow-x: hidden;
}

.bb {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bb-blue: #0478CC;
    --bb-blue-2: #4AA6E8;
    --bb-blue-3: #D9EBF7;
    --bb-green: #13CE8B;
    --bb-green-light: #D0F5E8;
    --bb-orange: #FA884C;
    --bb-orange-light: #FEE7DB;
    --bb-dark: #0B2239;
    --bb-gray: #5A6A80;
    --bb-ink: #2D3748;
}

.bb-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 38px;
}

.bb-section {
    padding: 80px 0;
}

.bb-section.gray {
    background: #F7FAFC;
}

.bb-h2 {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--bb-ink);
    margin: 0 0 14px 0;
}

.bb-h2 .accent {
    color: var(--bb-blue);
}

.bb-lead {
    font-size: 18px;
    line-height: 1.6;
    color: var(--bb-gray);
    margin: 0 0 40px 0;
    max-width: 820px;
}

.bb-center {
    text-align: center;
}

.bb-center .bb-lead {
    margin-left: auto;
    margin-right: auto;
}

.bb-source {
    font-size: 13px;
    color: #A0AEC0;
    margin: 30px 0 0 0;
}

/* ---------- Hero ---------- */
.boat-builders-hero {
    position: relative;
    width: 100%;
    min-height: 440px;
    overflow: hidden;
    background: #CBD5E0;
    isolation: isolate; /* own stacking context: the z-indexes below cannot be beaten by page-level layers */
}

.boat-builders-hero-video {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    object-fit: cover;
}

.boat-builders-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(4, 120, 204, 0.45);
}

.boat-builders-hero-content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 38px 110px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
    color: #ffffff;
}

.boat-builders-hero .hero-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 14px 0;
    color: #E8F3FB;
    opacity: 0.9;
}

.boat-builders-hero h1.hero-stat {
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0 0 34px 0; /* clear separation between the statistic and the tagline */
    line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.boat-builders-hero h1.hero-stat .accent {
    color: #FA884C;
}

.boat-builders-hero .hero-source {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 26px 0;
    color: #D9EBF7;
    opacity: 0.9;
}

.boat-builders-hero .hero-tagline {
    font-size: 30px;
    font-weight: 800;
    margin: 0 0 10px 0;
    line-height: 1.2;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

.boat-builders-hero .hero-sub {
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
    max-width: 560px;
    color: #E8F3FB;
}

.boat-builders-hero .hero-phone {
    justify-self: center;
    width: 100%;
    max-width: 400px;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
    /* The source image is a phone cut straight across at the bottom. Anchor it to the bottom of the
       hero and cancel the content's bottom padding so the cut lands on the hero's bottom edge,
       under the white of the wave (the wave sits above the content, z-index 3). */
    align-self: end;
    margin-bottom: -240px; /* deeper tuck = shorter hero; the hidden part is the phone's lower third */
}

.boat-builders-hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    /* Above the content (z 1) on purpose: the wave must mask the bottom of the phone. The two used
       to share z-index 1, leaving paint order to the browser — Safari drew the phone over the wave. */
    z-index: 3;
    pointer-events: none;
}

.boat-builders-hero-wave svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 60px;
    /* The shared wave path is drawn top-down (white fills ABOVE the curve). Every hero on the site
       flips it so the white sits at the bottom and masks the hero edge. Dropping this line puts a
       white curve with a blue band under it INSIDE the hero — the recurring "new page" bug. */
    transform: scale(-1, -1); /* also mirrored left-right: puts the tall part of the wave under the phone */
}

.boat-builders-hero-wave .shape-fill {
    fill: #FFFFFF;
}

/* ---------- Survey stats ---------- */
.bb-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.bb-stat {
    text-align: center;
}

.bb-stat .stat-label {
    font-size: 20px;
    font-weight: 700;
    color: var(--bb-gray);
    margin: 0 0 18px 0;
    min-height: 52px;
    line-height: 1.3;
}

.bb-ring {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 22px;
}

.bb-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.bb-ring .track {
    fill: none;
    stroke: var(--bb-orange-light);
    stroke-width: 16;
}

.bb-ring .value {
    fill: none;
    stroke: var(--bb-blue);
    stroke-width: 16;
    stroke-linecap: butt;
}

.bb-ring .num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 800;
    color: var(--bb-ink);
}

.bb-stat p {
    font-size: 15px;
    line-height: 1.55;
    color: #4A5568;
    margin: 0;
}

/* ---------- Challenges ---------- */
.bb-ever {
    font-size: 44px;
    font-weight: 800;
    color: var(--bb-orange);
    letter-spacing: 1px;
    margin: 30px 0 30px 0;
}

.bb-bubbles {
    background: linear-gradient(160deg, var(--bb-blue) 0%, #0B5BA8 100%);
    border-radius: 24px;
    padding: 50px 40px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 22px;
}

.bb-bubble {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--bb-blue-2);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.3;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.bb-results {
    margin-top: 60px;
}

.bb-results h3 {
    font-size: 28px;
    font-weight: 700;
    color: var(--bb-ink);
    margin: 0 0 22px 0;
}

.bb-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.bb-pills li {
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    background: var(--bb-orange-light);
    color: #9C3D12;
}

.bb-pills li:nth-child(3n+2) {
    background: #FFDEE0;
    color: #A81E27;
}

.bb-pills li:nth-child(3n) {
    background: #EDF2F7;
    color: var(--bb-gray);
}

/* ---------- Introducing / pillars ---------- */
.bb-intro-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 60px;
    align-items: center;
}

.bb-pillars {
    list-style: none;
    margin: 40px 0 0 0;
    padding: 0;
}

.bb-pillar {
    position: relative;
    padding: 0 0 36px 64px;
}

.bb-pillar:last-child {
    padding-bottom: 0;
}

.bb-pillar::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bb-blue);
    box-shadow: 0 0 0 5px #ffffff, 0 0 0 7px var(--bb-blue-3);
}

.bb-pillar:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 48px;
    bottom: 0;
    width: 2px;
    background: #E2E8F0;
}

.bb-pillar.deliver::before {
    background: var(--bb-green);
    box-shadow: 0 0 0 5px #ffffff, 0 0 0 7px var(--bb-green-light);
}

.bb-pillar.connect::before {
    background: var(--bb-orange);
    box-shadow: 0 0 0 5px #ffffff, 0 0 0 7px var(--bb-orange-light);
}

.bb-pillar h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--bb-blue);
}

.bb-pillar.deliver h3 {
    color: #0FA771;
}

.bb-pillar.connect h3 {
    color: #E86A2A;
}

.bb-pillar p {
    font-size: 16px;
    line-height: 1.65;
    color: #4A5568;
    margin: 0;
}

.bb-intro-side {
    text-align: center;
}

.bb-intro-side img {
    max-width: 320px;
    width: 100%;
    height: auto;
}

.bb-words {
    list-style: none;
    padding: 0;
    margin: 30px 0 0 0;
    text-align: left;
    display: inline-block;
}

.bb-words li {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 6px 0 6px 52px;
    position: relative;
    color: var(--bb-blue);
}

.bb-words li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px #F7FAFC, 0 0 0 6px currentColor;
}

.bb-words li.deliver { color: var(--bb-green); }
.bb-words li.connect { color: var(--bb-orange); }

/* ---------- Pillar bands ---------- */
.bb-band {
    padding: 90px 38px;
    text-align: center;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.bb-band.build { background: var(--bb-blue); }
.bb-band.deliver { background: var(--bb-green); }
.bb-band.connect { background: var(--bb-orange); }

.bb-band::before,
.bb-band::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    pointer-events: none;
}

.bb-band::before {
    width: 140px;
    height: 140px;
    top: -40px;
    left: 8%;
}

.bb-band::after {
    width: 90px;
    height: 90px;
    bottom: -20px;
    right: 10%;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.bb-band h2 {
    font-size: 72px;
    font-weight: 800;
    letter-spacing: 2px;
    margin: 0 0 10px 0;
    line-height: 1;
}

.bb-band p {
    font-size: 26px;
    font-weight: 600;
    margin: 0;
}

.bb-band .band-rule {
    width: 120px;
    height: 3px;
    background: rgba(255, 255, 255, 0.85);
    margin: 28px auto 0;
    border-radius: 2px;
}

/* ---------- Feature blocks ---------- */
.bb-feature {
    padding: 70px 0;
}

.bb-feature:nth-child(even) {
    background: #F7FAFC;
}

.bb-feature .bb-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.bb-feature.flip .bb-wrap > .feature-media {
    order: 2;
}

.feature-media {
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature-media img {
    max-width: 100%;
    height: auto;
    max-height: 560px;
    filter: drop-shadow(0 16px 32px rgba(11, 34, 57, 0.18));
}

.feature-media.pair {
    position: relative;
    gap: 0;
}

.feature-media.pair img {
    max-height: 500px;
    width: 46%;
}

.feature-media.pair img:last-child {
    margin-left: -6%;
    margin-top: 60px;
}

.feature-text .kicker {
    display: block;
    font-size: 15px;
    color: var(--bb-gray);
    margin: 0 0 6px 0;
}

.feature-text h3 {
    font-size: 34px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--bb-ink);
    margin: 0 0 14px 0;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--bb-blue-3);
}

.feature-text .eyebrow {
    display: block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--bb-blue);
    margin: 18px 0 12px 0;
}

.feature-text p {
    font-size: 16px;
    line-height: 1.7;
    color: #4A5568;
    margin: 0 0 14px 0;
}

.feature-text .features-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #A0AEC0;
    margin: 22px 0 10px 0;
}

.feature-list {
    list-style: none;
    counter-reset: feat;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 28px;
}

.feature-list.one-col {
    grid-template-columns: 1fr;
}

.feature-list.compact {
    gap: 8px 28px;
}

.feature-list li {
    counter-increment: feat;
    position: relative;
    padding-left: 30px;
    font-size: 15px;
    line-height: 1.55;
    color: #4A5568;
}

.feature-list li::before {
    content: counter(feat) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: var(--bb-orange);
}

.feature-list li strong {
    display: block;
    color: var(--bb-ink);
    font-size: 16px;
}

.feature-list.compact li strong {
    display: inline;
}

.feature-text .more {
    display: inline-block;
    margin-top: 18px;
    color: var(--bb-blue);
    font-weight: 600;
    text-decoration: none;
}

.feature-text .more:hover {
    text-decoration: underline;
}

.feature-text .fineprint {
    font-size: 11px;
    color: #A0AEC0;
    margin-top: 16px;
}

/* ---------- Setup steps ---------- */
.bb-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    margin-top: 50px;
    position: relative;
}

.bb-steps::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 54px;
    height: 4px;
    background: #CBD5E0;
    border-radius: 2px;
}

.bb-step {
    text-align: center;
    position: relative;
}

.bb-step .step-label {
    font-size: 18px;
    font-weight: 700;
    color: var(--bb-blue);
    margin: 0 0 16px 0;
}

.bb-step .step-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bb-blue);
    margin: 0 auto 22px;
    box-shadow: 0 0 0 5px #F7FAFC, 0 0 0 7px var(--bb-blue-3);
    position: relative;
}

.bb-step h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--bb-ink);
    margin: 0 0 10px 0;
    line-height: 1.25;
}

.bb-step p {
    font-size: 14px;
    line-height: 1.55;
    color: #4A5568;
    margin: 0;
}

/* ---------- Results & benefits ---------- */
.bb-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.bb-benefit {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-top: 4px solid var(--bb-blue);
    border-radius: 10px;
    padding: 26px 26px 24px;
}

.bb-benefit:nth-child(2) { border-top-color: var(--bb-green); }
.bb-benefit:nth-child(3) { border-top-color: var(--bb-orange); }
.bb-benefit:nth-child(4) { border-top-color: #8D7EFB; }
.bb-benefit:nth-child(5) { border-top-color: #F2B339; }

.bb-benefit h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--bb-blue);
    margin: 0 0 8px 0;
}

.bb-benefit p {
    font-size: 15px;
    line-height: 1.6;
    color: #4A5568;
    margin: 0;
}

/* ---------- Community / reviews ---------- */
.bb-community {
    background: var(--bb-dark);
    color: #ffffff;
}

.bb-community .bb-h2 {
    color: #ffffff;
}

.bb-community .bb-lead {
    color: #B8C7D9;
}

.bb-community-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 50px;
    align-items: center;
}

.bb-reviews {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.bb-reviews img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

.bb-count {
    text-align: center;
    padding: 30px 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
}

.bb-count .launched {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 30px 0;
    color: #B8C7D9;
}

.bb-count .approaching {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.bb-count .big {
    font-size: 82px;
    font-weight: 800;
    line-height: 1;
    margin: 8px 0;
    color: #ffffff;
    letter-spacing: -1px;
}

.bb-count .members {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .bb-wrap { padding: 0 20px; }
    .bb-section { padding: 50px 0; }
    .bb-h2 { font-size: 28px; }
    .bb-lead { font-size: 16px; }

    .boat-builders-hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 50px 20px 100px;
        gap: 30px;
    }
    .boat-builders-hero h1.hero-stat { font-size: 32px; }
    .boat-builders-hero .hero-tagline { font-size: 22px; }
    .boat-builders-hero .hero-sub { margin: 0 auto; }
    .boat-builders-hero .hero-phone { max-width: 290px; margin-bottom: -110px; }

    .bb-stats { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
    .bb-stat .stat-label { min-height: 0; font-size: 18px; }
    .bb-ring { width: 150px; height: 150px; }
    .bb-ring .num { font-size: 34px; }

    .bb-ever { font-size: 32px; }
    .bb-bubbles { grid-template-columns: repeat(2, 1fr); padding: 30px 20px; gap: 16px; }
    .bb-bubble { font-size: 13px; padding: 14px; }
    .bb-results h3 { font-size: 24px; }

    .bb-intro-grid { grid-template-columns: 1fr; gap: 40px; }
    .bb-intro-side img { max-width: 240px; }
    .bb-words li { font-size: 28px; }

    .bb-band { padding: 60px 20px; }
    .bb-band h2 { font-size: 48px; }
    .bb-band p { font-size: 20px; }

    .bb-feature { padding: 50px 0; }
    .bb-feature .bb-wrap { grid-template-columns: 1fr; gap: 30px; }
    .bb-feature.flip .bb-wrap > .feature-media { order: 0; }
    .feature-media img { max-height: 420px; }
    .feature-text h3 { font-size: 28px; }
    .feature-list { grid-template-columns: 1fr; }

    .bb-steps { grid-template-columns: 1fr; gap: 30px; }
    .bb-steps::before { display: none; }
    .bb-step .step-dot { margin-bottom: 14px; }

    .bb-benefits { grid-template-columns: 1fr; }

    .bb-community-grid { grid-template-columns: 1fr; }
    .bb-reviews { grid-template-columns: repeat(2, 1fr); }
    .bb-count .big { font-size: 64px; }
}

@media (max-width: 480px) {
    .bb-stats { grid-template-columns: 1fr; }
    .bb-reviews { grid-template-columns: 1fr; }
}

/* ================= hub + sub-page additions ================= */

/* Section nav (under every hero) */
.dp-nav {
    background: #ffffff;
    border-bottom: 1px solid #E2E8F0;
    position: sticky;
    top: 0;
    z-index: 20;
    margin-top: 52px; /* breathing room under the hero wave; irrelevant once the bar is stuck to the top */
}

/* Tighter below the bar: the first section of every tab starts closer to it */
#dp-content > .bb-section:first-child { padding-top: 36px; }

.dp-nav ul {
    list-style: none;
    margin: 0 auto;
    padding: 0 38px;
    max-width: 1200px;
    display: flex;
    justify-content: center;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dp-nav li {
    flex: 0 0 auto;
}

.dp-nav a {
    display: block;
    padding: 16px 16px 14px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--bb-gray);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}

.dp-nav a:hover {
    color: var(--bb-blue);
}

.dp-nav a.current {
    color: var(--bb-blue);
    border-bottom-color: var(--bb-blue);
}

.dp-nav a.current.deliver { color: #0FA771; border-bottom-color: var(--bb-green); }
.dp-nav a.current.connect { color: #E86A2A; border-bottom-color: var(--bb-orange); }
.dp-nav a.current.roi { color: #6A5BE0; border-bottom-color: #8D7EFB; }
.dp-nav a.home { color: var(--bb-ink); }
.dp-nav.is-loading { opacity: 0.6; }

/* Slim coloured band at the top of a tab's content */
.dp-band {
    margin-top: 36px; /* white space between the tab bar and the coloured strip */
    padding: 32px 0 30px;
    color: #ffffff;
    text-align: center;
}

.dp-band.build { background: var(--bb-blue); }
.dp-band.deliver { background: var(--bb-green); }
.dp-band.connect { background: var(--bb-orange); }
.dp-band.roi { background: #6A5BE0; }
.dp-band.dark { background: var(--bb-dark); }

.dp-band .word {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: 2px;
    margin: 0 0 2px 0;
    line-height: 1;
}

.dp-band .tag {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.dp-band .intro {
    font-size: 15px;
    line-height: 1.5;
    max-width: 760px;
    margin: 0 auto;
    opacity: 0.95;
}

/* "NEW · FLEET EDITION" style badge (band word, pillar card) */
.dp-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    padding: 4px 10px;
    border-radius: 4px;
    background: #F2B339;
    color: #0B2239;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    line-height: 1.4;
    transform: translateY(-4px);
}

.dp-band .proof {
    margin: 16px auto 0;
    max-width: 760px;
    font-size: 16px;
    font-weight: 700;
    font-style: italic;
    color: #ffffff;
    opacity: 0.95;
}

.dp-card .proof {
    font-size: 15px;
    font-weight: 700;
    font-style: italic;
    color: var(--bb-ink);
    margin: 0 0 22px 0;
    padding-left: 14px;
    border-left: 3px solid var(--bb-blue);
    flex: 1;
}

.dp-card.deliver .proof { border-left-color: var(--bb-green); }
.dp-card.connect .proof { border-left-color: var(--bb-orange); }

/* Survey source line under the CTA, above the site footer */
.dp-source-foot {
    margin: 0;
    padding: 14px 38px;
    background: #ffffff;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #A0AEC0;
}

/* Straight answers (objection handling) */
.dp-faq {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 36px;
}

.dp-faq-item {
    background: #F7FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 22px 24px;
}

.dp-faq-item h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--bb-blue);
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.dp-faq-item p {
    font-size: 15px;
    line-height: 1.6;
    color: #4A5568;
    margin: 0;
}

/* Small uppercase label above a section heading ("The Challenge", "The Solution", …) */
.dp-step-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--bb-blue);
    margin: 0 0 8px 0;
}

/* Hub: pillar cards */
.dp-pillar-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 46px;
}

.dp-card {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 30px 28px 26px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(11, 34, 57, 0.06);
    border-top: 6px solid var(--bb-blue);
}

.dp-card.deliver { border-top-color: var(--bb-green); }
.dp-card.connect { border-top-color: var(--bb-orange); }

.dp-card .word {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--bb-blue);
    margin: 0 0 2px 0;
}

.dp-card.deliver .word { color: #0FA771; }
.dp-card.connect .word { color: #E86A2A; }

.dp-card .tag {
    font-size: 17px;
    font-weight: 700;
    color: var(--bb-ink);
    margin: 0 0 14px 0;
}

.dp-card p {
    font-size: 15px;
    line-height: 1.65;
    color: #4A5568;
    margin: 0 0 16px 0;
}

.dp-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 22px 0;
    flex: 1;
}

.dp-card li {
    position: relative;
    padding: 5px 0 5px 22px;
    font-size: 15px;
    color: var(--bb-ink);
    font-weight: 600;
}

.dp-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bb-blue);
}

.dp-card.deliver li::before { background: var(--bb-green); }
.dp-card.connect li::before { background: var(--bb-orange); }

.dp-btn {
    display: inline-block;
    align-self: flex-start;
    padding: 12px 22px;
    border-radius: 6px;
    background: var(--bb-blue);
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.dp-btn:hover { background: #0B5BA8; color: #ffffff; }
.dp-btn.deliver { background: var(--bb-green); }
.dp-btn.deliver:hover { background: #0FA771; }
.dp-btn.connect { background: var(--bb-orange); }
.dp-btn.connect:hover { background: #E86A2A; }
.dp-btn.ghost {
    background: transparent;
    color: var(--bb-blue);
    border: 2px solid var(--bb-blue);
}
.dp-btn.ghost:hover { background: var(--bb-blue-3); }

/* Hub: compact stats row */
.bb-stats.compact {
    margin-top: 36px;
    gap: 20px;
}

.bb-stats.compact .bb-ring {
    width: 130px;
    height: 130px;
    margin-bottom: 14px;
}

.bb-stats.compact .bb-ring .num { font-size: 30px; }
.bb-stats.compact .stat-label { font-size: 17px; min-height: 0; margin-bottom: 12px; }
.bb-stats.compact p { font-size: 14px; }

.dp-more {
    display: inline-block;
    margin-top: 30px;
    color: var(--bb-blue);
    font-weight: 700;
    text-decoration: none;
}

.dp-more:hover { text-decoration: underline; }

/* Hub: compact benefits (5 across) */
.bb-benefits.compact {
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 30px;
}

.bb-benefits.compact .bb-benefit {
    padding: 20px 18px 18px;
}

.bb-benefits.compact .bb-benefit h3 { font-size: 16px; }
.bb-benefits.compact .bb-benefit p { font-size: 14px; }

/* Hub: compact community strip */
.dp-community-compact {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    align-items: center;
}

.dp-community-compact .bb-reviews {
    grid-template-columns: repeat(3, 1fr);
}

/* Prev / next between sub pages */
.dp-pn {
    background: #F7FAFC;
    border-top: 1px solid #E2E8F0;
    padding: 34px 0;
}

.dp-pn .bb-wrap {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.dp-pn a {
    text-decoration: none;
    color: var(--bb-ink);
    font-weight: 700;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dp-pn a span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #A0AEC0;
}

.dp-pn a:hover { color: var(--bb-blue); }
.dp-pn a.next { text-align: right; margin-left: auto; }

@media (max-width: 992px) {
    .dp-nav { margin-top: 32px; }
    .dp-nav ul { justify-content: flex-start; }
    #dp-content > .bb-section:first-child { padding-top: 24px; }
    .dp-nav ul { padding: 0 12px; }
    .dp-nav a { padding: 13px 12px 11px; font-size: 13px; }
    .dp-subhero { padding: 50px 20px 44px; }
    .dp-subhero h1 { font-size: 42px; }
    .dp-subhero .tag { font-size: 19px; }
    .dp-pillar-cards { grid-template-columns: 1fr; }
    .dp-faq { grid-template-columns: 1fr; }
    .dp-badge { transform: none; margin-left: 6px; }
    .bb-stats.compact { grid-template-columns: repeat(2, 1fr); }
    .bb-benefits.compact { grid-template-columns: 1fr 1fr; }
    .dp-community-compact { grid-template-columns: 1fr; }
    .dp-community-compact .bb-reviews { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .bb-benefits.compact { grid-template-columns: 1fr; }
}

/* ================= ROI tab ================= */
.roi-table-wrap { overflow-x: auto; }

.roi-map {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    min-width: 760px;
}

.roi-map th, .roi-map td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid #E2E8F0;
    vertical-align: top;
    color: #4A5568;
    line-height: 1.5;
}

.roi-map th {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #A0AEC0;
    border-bottom: 2px solid #CBD5E0;
}

.roi-map td strong { color: var(--bb-ink); }
.roi-map td:last-child { font-size: 13px; color: var(--bb-gray); }

.roi-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 36px;
    align-items: start;
}

.roi-fs {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 18px 20px;
    margin: 0 0 14px 0;
}

.roi-fs legend, .roi-fs summary {
    font-size: 15px;
    font-weight: 700;
    color: var(--bb-ink);
    padding: 0 6px;
    cursor: pointer;
}

.roi-fs summary { list-style: none; position: relative; padding-left: 22px; }
.roi-fs summary::-webkit-details-marker { display: none; }
.roi-fs summary::before { content: "+"; position: absolute; left: 0; top: -2px; color: var(--bb-blue); font-size: 20px; }
.roi-fs[open] summary::before { content: "\2013"; }

.roi-fs label {
    display: grid;
    grid-template-columns: 1fr auto 110px;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #4A5568;
    padding: 8px 0;
    border-top: 1px solid #F1F5F9;
}

.roi-fs legend + label, .roi-fs summary + label { border-top: 0; margin-top: 8px; }
.roi-fs label .unit { font-size: 12px; color: #A0AEC0; white-space: nowrap; }
.roi-fs label.chk { grid-template-columns: auto 1fr; justify-content: start; }

.roi-fs input[type="number"] {
    width: 110px;
    padding: 8px 10px;
    border: 1px solid #CBD5E0;
    border-radius: 6px;
    font: inherit;
    font-size: 14px;
    color: var(--bb-ink);
    text-align: right;
}

.roi-fs input[type="number"]:focus { outline: 2px solid var(--bb-blue-3); border-color: var(--bb-blue); }

.roi-note { font-size: 13px; color: var(--bb-gray); margin: 10px 0 0 0; line-height: 1.5; }

.roi-results {
    position: sticky;
    top: 70px;
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 26px 26px 22px;
    box-shadow: 0 10px 30px rgba(11, 34, 57, 0.06);
}

.roi-total { text-align: center; padding-bottom: 18px; border-bottom: 1px solid #E2E8F0; margin-bottom: 18px; }
.roi-total-label { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--bb-gray); margin: 0 0 6px 0; font-weight: 700; }
.roi-total-num { font-size: 52px; font-weight: 800; color: var(--bb-blue); margin: 0; line-height: 1.05; letter-spacing: -1px; }
.roi-total-sub { font-size: 15px; color: var(--bb-gray); margin: 8px 0 0 0; }
.roi-total-sub span { font-weight: 700; color: var(--bb-ink); }

.roi-bars { list-style: none; margin: 0; padding: 0; }
.roi-bars li { display: grid; grid-template-columns: 150px 1fr 90px; align-items: center; gap: 12px; padding: 7px 0; font-size: 14px; color: #4A5568; }
.roi-bars .bar { height: 10px; background: #EDF2F7; border-radius: 5px; overflow: hidden; }
.roi-bars .bar i { display: block; height: 100%; background: var(--bb-blue); border-radius: 5px; width: 2%; transition: width 0.25s ease; }
.roi-bars .val { text-align: right; font-weight: 700; color: var(--bb-ink); }
.roi-bars .upside { opacity: 0.45; }
.roi-bars .upside.on { opacity: 1; }
.roi-bars .upside .bar i { background: #8D7EFB; }

.roi-return { margin-top: 16px; padding: 14px 16px; background: var(--bb-green-light); border-radius: 10px; font-size: 15px; color: #0B5C3E; }
.roi-return p { margin: 0; }
.roi-return p + p { margin-top: 4px; }
.roi-return strong { font-size: 22px; }

.roi-estimate {
    margin: 28px 0 0 0;
    padding: 18px 22px;
    background: #ffffff;
    border-left: 4px solid var(--bb-blue);
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--bb-ink);
}

.roi-estimate strong { color: var(--bb-blue); }

.roi-foot {
    margin: 22px 0 0 0;
    padding-top: 14px;
    border-top: 1px solid #E2E8F0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--bb-gray);
}

.roi-sources { list-style: none; padding: 0; margin: 0; }
.roi-sources li { font-size: 15px; line-height: 1.6; color: #4A5568; padding: 12px 0; border-top: 1px solid #E2E8F0; }
.roi-sources li strong { color: var(--bb-ink); }

/* --- Rev 2: calibration presets, the band headline, and the honesty furniture -------------
   The page never shows a single number. Three calibrations are computed on every keystroke and
   the headline is the band between them; the moment the reader edits anything the control drops
   into a fourth "Your numbers" state, because a preset that silently stays lit reads as dishonest. */
.roi-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 6px 0;
}

.roi-preset {
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 9px 16px;
    border: 1px solid #CBD5E0;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--bb-gray);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.roi-preset:hover { border-color: var(--bb-blue); color: var(--bb-blue); }

.roi-preset.active {
    background: var(--bb-blue);
    border-color: var(--bb-blue);
    color: #FFFFFF;
}

/* Not a button — you reach this state by editing, not by choosing it. */
.roi-preset.custom {
    cursor: default;
    background: #FEF5E7;
    border-color: var(--bb-orange);
    color: #9C4221;
}

.roi-preset-blurb {
    font-size: 13px;
    line-height: 1.6;
    color: var(--bb-gray);
    margin: 0 0 18px 0;
    min-height: 20px;
}

/* Marks an input no industry body publishes, so we are never mistaken for citing one. */
.roi-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 6px;
    margin-left: 4px;
    border-radius: 4px;
    background: #FEF5E7;
    color: #9C4221;
    cursor: help;
    vertical-align: 1px;
}

/* Percentages the reader should feel free to move get a slider, not a spin box. */
.roi-fs label.rng { grid-template-columns: 1fr 64px; }
.roi-fs label.rng .unit { color: var(--bb-ink); font-weight: 700; text-align: right; }
.roi-fs input[type="range"] {
    grid-column: 1 / -1;
    width: 100%;
    margin: 6px 0 0 0;
    accent-color: var(--bb-blue);
}

.roi-lever-note {
    grid-column: 1 / -1;
    margin: 10px 0 0 0;
    padding: 9px 11px;
    background: #F7FAFC;
    border-left: 3px solid var(--bb-orange);
    border-radius: 0 6px 6px 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--bb-gray);
}

.roi-total-of { font-size: 15px; color: var(--bb-gray); margin: 2px 0 0 0; }
.roi-total-num.sm { font-size: 40px; }
.roi-total-active {
    margin: 12px 0 0 0;
    font-size: 13px;
    color: var(--bb-gray);
    line-height: 1.6;
}
.roi-total-active strong { color: var(--bb-ink); }
.roi-estimate-cal { color: var(--bb-gray); font-weight: 400; }
.roi-band { display: inline-block; margin-top: 4px; font-size: 13px; color: var(--bb-gray); }
.roi-return-band { font-size: 13px; opacity: 0.85; }

.roi-method {
    margin: 16px 0 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--bb-gray);
}
.roi-method a { color: var(--bb-blue); font-weight: 700; text-decoration: none; }
.roi-method a:hover { text-decoration: underline; }

.roi-method-list { list-style: none; padding: 0; margin: 0 0 26px 0; }
.roi-method-list li {
    font-size: 15px;
    line-height: 1.65;
    color: #4A5568;
    padding: 12px 0;
    border-top: 1px solid #E2E8F0;
}
.roi-method-list li strong { color: var(--bb-ink); }
.roi-method-cta { margin: 0 0 18px 0; }

/* A builder will want to take the state of this calculator back to a CFO. */
@media print {
    .dp-nav, .dp-cta, .custom-header, .custom-footer, .roi-preset:not(.active), .dp-btn { display: none !important; }
    .roi-grid { grid-template-columns: 1fr 1fr; }
    .roi-results { position: static; }
    .roi-fs details:not([open]) > *:not(summary) { display: revert; }
    .roi-fs, .roi-results { break-inside: avoid; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 10px; color: #666; }
}

@media (max-width: 992px) {
    .dp-band { margin-top: 24px; }
    .dp-band .word { font-size: 36px; }
    .dp-band .tag { font-size: 18px; }
    .roi-grid { grid-template-columns: 1fr; }
    .roi-results { position: static; }
    .roi-bars li { grid-template-columns: 110px 1fr 80px; font-size: 13px; }
    .roi-fs label { grid-template-columns: 1fr 100px; }
    .roi-fs label .unit { display: none; }
    .roi-total-num { font-size: 40px; }
}