/*
 * Boston Practical + staging background drop-in
 *
 * Keep Boston Practical as the page style, but let the existing staging
 * background system remain the visual source of truth.
 *
 * This file should be loaded AFTER the inline <style> block in
 * app/templates/style_variants/boston_practical.html.
 */

.boston {
    position: relative !important;
    isolation: auto !important;
    overflow-x: clip !important;
    min-height: 100vh;
    background: transparent !important;
    color: #f4f1ea;
}

/*
 * Disable Boston-specific background experiments.
 * This allows the staging background from site.css + staging-polish.css +
 * staging-background-boost.css + desktop-background-flow.css to show through.
 */
.boston::before,
.boston::after {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
    filter: none !important;
}

/*
 * These are readability surfaces only. They do not create or replace
 * the site background artwork.
 */
.boston .bos-block,
.boston .bos-step {
    background: rgba(8, 16, 24, 0.34) !important;
}

.boston .bos-diagnostic {
    background: rgba(8, 16, 24, 0.24) !important;
}

.boston .bos-picker {
    background: rgba(8, 16, 24, 0.62) !important;
    backdrop-filter: blur(6px);
}

.boston .bos-panels {
    background: rgba(255, 255, 255, 0.024) !important;
}

.boston .bos-mini,
.boston .bos-proof-card {
    background: rgba(8, 16, 24, 0.46) !important;
}

.boston .bos-proof-card:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

/*
 * ht3 first-viewport polish.
 * This keeps the newer ht3 flow, but pulls the visual rhythm back toward the
 * stronger ht2 typography: less Arial-default, less extreme tracking, and a
 * first screen that feels intentional instead of squeezed.
 */
.boston {
    --bos-font-body: "Aptos", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --bos-font-display: "Bahnschrift", "Aptos Display", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --bos-display-tracking: -0.024em;
    --bos-display-tracking-tight: -0.032em;
    --bos-display-line: 0.94;
    font-family: var(--bos-font-body) !important;
    text-rendering: geometricPrecision;
}

.boston h1,
.boston h2,
.boston h3,
.boston .bos-mark,
.boston .bos-choice-card strong {
    font-family: var(--bos-font-display) !important;
    font-kerning: normal;
    font-feature-settings: normal;
}

.boston .bos-first-screen {
    min-height: calc(100svh - 10px) !important;
    grid-template-rows: auto minmax(0, 0.86fr) auto !important;
}

.boston .bos-head {
    padding: clamp(12px, 1.8vh, 19px) 0 !important;
}

.boston .bos-mark {
    letter-spacing: 0.155em !important;
}

.boston .bos-links a[href*="style-lab"],
.boston .bos-links a[href*="/style-lab"] {
    display: none !important;
}

.boston .bos-hero {
    display: flex;
    align-items: center;
    padding: clamp(16px, 3vh, 34px) 0 clamp(12px, 2.2vh, 22px) !important;
}

.boston .bos-hero-grid {
    grid-template-columns: 0.54fr 1.46fr !important;
    gap: clamp(22px, 4vw, 52px) !important;
    align-items: center !important;
}

.boston .bos-side {
    background: rgba(8, 16, 24, 0.20);
    padding: 14px 0 14px 18px !important;
    font-size: clamp(0.9rem, 1vw, 0.98rem) !important;
}

.boston .bos h1,
.boston h1 {
    font-size: clamp(3.6rem, 9.1vw, 8.2rem) !important;
    line-height: var(--bos-display-line) !important;
    letter-spacing: var(--bos-display-tracking-tight) !important;
    max-width: 900px;
}

.boston h1 span {
    color: #ff8a3d !important;
}

.boston h2,
.boston .bos-contact h2,
.boston .bos-cta-strip h2 {
    line-height: 0.96 !important;
    letter-spacing: var(--bos-display-tracking) !important;
}

.boston h3 {
    line-height: 1.02 !important;
    letter-spacing: -0.018em !important;
}

.boston .bos-lede {
    max-width: 760px !important;
    margin-top: 16px !important;
    font-size: clamp(0.98rem, 1.15vw, 1.08rem) !important;
    line-height: 1.5 !important;
}

.boston .bos-signal-row {
    gap: 8px 14px !important;
    margin-top: 13px !important;
}

.boston .bos-signal {
    letter-spacing: 0.085em !important;
}

.boston .bos-actions {
    margin-top: 18px !important;
}

.boston .bos-start-panel {
    padding: clamp(12px, 2vh, 22px) 0 clamp(16px, 2.6vh, 30px) !important;
}

.boston .bos-start-heading {
    grid-template-columns: 0.34fr 0.66fr !important;
    gap: clamp(18px, 3vw, 34px) !important;
    align-items: end !important;
    margin-bottom: 14px !important;
}

.boston .bos-start-heading h2 {
    font-size: clamp(1.82rem, 3.4vw, 3.28rem) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.022em !important;
}

.boston .bos-start-heading .bos-section-text {
    max-width: 620px !important;
    font-size: 0.94rem !important;
    line-height: 1.45 !important;
}

.boston .bos-choice-grid {
    gap: 0;
}

.boston .bos-start-panel .bos-choice-card {
    min-height: clamp(132px, 18vh, 172px) !important;
    padding: clamp(14px, 2vh, 20px) !important;
}

.boston .bos-start-panel .bos-choice-card::before {
    width: 38px !important;
    height: 4px !important;
    margin-bottom: 12px !important;
}

.boston .bos-start-panel .bos-choice-card h3 {
    margin-bottom: 8px !important;
    font-size: clamp(1.06rem, 1.48vw, 1.35rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.012em !important;
}

.boston .bos-start-panel .bos-choice-card p {
    font-size: clamp(0.82rem, 0.88vw, 0.92rem) !important;
    line-height: 1.38 !important;
}

.boston .bos-start-panel .bos-choice-action {
    padding-top: 12px !important;
    font-size: 0.64rem !important;
    letter-spacing: 0.09em !important;
}

.boston .bos-project-site {
    cursor: default;
}

.boston .bos-project-site .bos-card-action {
    color: #2d8f8b !important;
}

/*
 * ht3 flowchart pass.
 * The first viewport already offers four choices. This deepens the next section
 * so those choices become an actual decision map: situation -> lane -> first
 * move -> output.
 */
.boston #paths {
    position: relative;
    padding-top: clamp(50px, 6vw, 82px) !important;
}

.boston #paths .bos-section-heading {
    align-items: end !important;
    margin-bottom: 22px !important;
}

.boston #paths .bos-section-heading::before {
    content: "Flow chart / after the first click";
    grid-column: 1 / -1;
    display: inline-flex;
    width: fit-content;
    margin-bottom: 4px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 138, 61, 0.34);
    background: rgba(255, 138, 61, 0.08);
    color: #ff8a3d;
    font-family: var(--bos-font-display);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.boston #paths .bos-section-heading h2 {
    position: relative;
}

.boston #paths .bos-section-heading h2::after {
    content: "Situation → lane → first move → useful output";
    display: block;
    margin-top: 12px;
    color: #cfc7bc;
    font-family: var(--bos-font-body);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.35;
    text-transform: uppercase;
}

.boston #paths .bos-section-text {
    max-width: 760px !important;
}

.boston .bos-path-grid {
    position: relative;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin-top: 28px !important;
    border: 0 !important;
}

.boston .bos-path-grid::before {
    content: "";
    position: absolute;
    top: 44px;
    left: 9%;
    right: 9%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 138, 61, 0.18), rgba(255, 138, 61, 0.72), rgba(45, 143, 139, 0.68), rgba(255, 255, 255, 0.22));
    z-index: 0;
}

.boston .bos-path-grid .bos-card {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 390px !important;
    flex-direction: column;
    padding: 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: rgba(8, 16, 24, 0.54) !important;
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.boston .bos-path-grid .bos-card::before {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 16px;
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, var(--path-accent, #ff8a3d) 48%, rgba(255, 255, 255, 0.18));
    background: color-mix(in srgb, var(--path-accent, #ff8a3d) 14%, transparent);
    color: var(--path-accent, #ff8a3d);
    font-family: var(--bos-font-display);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.boston .bos-path-grid .bos-card::after {
    display: block;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    color: #f4f1ea;
    font-family: var(--bos-font-display);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.10em;
    line-height: 1.35;
    text-transform: uppercase;
}

.boston #solve {
    --path-accent: #ff8a3d;
    border-left: 5px solid var(--path-accent) !important;
}

.boston #solve::before {
    content: "01 / Solutions Engineering";
}

.boston #solve::after {
    content: "Output: isolate cause, reduce risk, choose a fix path";
}

.boston #opportunity {
    --path-accent: #7dff9b;
    border-left: 5px solid var(--path-accent) !important;
    background: linear-gradient(135deg, rgba(125, 255, 155, 0.08), rgba(8, 16, 24, 0.56) 54%, rgba(45, 143, 139, 0.11)) !important;
}

.boston #opportunity::before {
    content: "02 / Opportunity Engineering";
}

.boston #opportunity::after {
    content: "Output: map leverage, shape the idea, prototype the better path";
}

.boston #not-sure {
    --path-accent: #2d8f8b;
    border-left: 5px solid var(--path-accent) !important;
}

.boston #not-sure::before {
    content: "03 / Discovery";
}

.boston #not-sure::after {
    content: "Output: name the work before choosing the solution";
}

.boston .bos-path-grid .bos-card-label {
    display: none !important;
}

.boston .bos-path-grid .bos-card h3 {
    margin-bottom: 12px !important;
    font-size: clamp(1.55rem, 2.4vw, 2.35rem) !important;
    line-height: 0.98 !important;
}

.boston .bos-path-grid .bos-card p {
    margin-bottom: 18px !important;
    color: #d8d1c7 !important;
}

.boston .bos-path-grid .bos-details {
    margin-top: auto !important;
    padding-top: 14px !important;
}

.boston .bos-path-grid .bos-details summary {
    color: var(--path-accent, #ff8a3d) !important;
}

.boston .bos-path-grid .bos-details li {
    margin-top: 6px;
}

.boston #paths::after {
    content: "The point is not to force every request into a ticket. The point is to find the right first move: fix, shape, clarify, prototype, or pause.";
    display: block;
    margin-top: 20px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 138, 61, 0.26);
    background: linear-gradient(135deg, rgba(255, 138, 61, 0.10), rgba(8, 16, 24, 0.34) 58%, rgba(45, 143, 139, 0.08));
    color: #d8d1c7;
    font-size: 0.98rem;
    line-height: 1.5;
}

@media (max-width: 1080px) {
    .boston .bos-first-screen {
        min-height: auto !important;
    }

    .boston .bos h1,
    .boston h1 {
        font-size: clamp(3.2rem, 10vw, 6.9rem) !important;
    }

    .boston .bos-path-grid::before {
        left: 6%;
        right: 6%;
    }
}

@media (max-width: 850px) {
    .boston {
        overflow-x: hidden !important;
        --bos-display-tracking: -0.014em;
        --bos-display-tracking-tight: -0.018em;
    }

    .boston .bos-head,
    .boston .bos-hero-grid,
    .boston .bos-start-heading {
        grid-template-columns: 1fr !important;
    }

    .boston .bos-hero {
        padding: 22px 0 18px !important;
    }

    .boston .bos-side {
        display: block !important;
        max-width: none !important;
        padding: 11px 0 11px 16px !important;
    }

    .boston .bos h1,
    .boston h1 {
        font-size: clamp(3.05rem, 16vw, 5.35rem) !important;
        line-height: 0.98 !important;
    }

    .boston .bos-lede {
        margin-top: 14px !important;
        font-size: 0.96rem !important;
    }

    .boston .bos-start-heading {
        gap: 10px !important;
    }

    .boston .bos-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .boston .bos-path-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .boston .bos-path-grid::before {
        top: 0;
        bottom: 0;
        left: 22px;
        right: auto;
        width: 1px;
        height: auto;
    }

    .boston .bos-path-grid .bos-card {
        min-height: unset !important;
    }

    .boston .bos-picker,
    .boston .bos-mini,
    .boston .bos-proof-card,
    .boston .bos-block,
    .boston .bos-step {
        background: rgba(8, 16, 24, 0.58) !important;
    }

    .boston .bos-diagnostic {
        background: rgba(8, 16, 24, 0.32) !important;
    }
}

@media (max-width: 520px) {
    .boston .bos h1,
    .boston h1 {
        font-size: clamp(2.72rem, 15vw, 4.45rem) !important;
    }

    .boston .bos-side,
    .boston .bos-signal-row,
    .boston .bos-actions {
        display: none !important;
    }

    .boston .bos-start-heading h2 {
        font-size: clamp(1.52rem, 8vw, 2.2rem) !important;
    }

    .boston .bos-start-heading .bos-section-text {
        display: block !important;
        font-size: 0.86rem !important;
    }

    .boston .bos-start-panel .bos-choice-card {
        min-height: 118px !important;
        padding: 12px !important;
    }

    .boston .bos-start-panel .bos-choice-card p {
        display: none !important;
    }

    .boston #paths .bos-section-heading h2::after {
        font-size: 0.7rem;
    }
}