.cases-v3 {
    overflow-x: hidden;
}

.cases-v3-hero-panel,
.cases-v3-trust aside {
    display: grid;
    gap: 20px;
    min-width: 0;
    padding: 28px;
    border-left: 2px solid var(--oxide);
    background: rgba(245, 242, 236, 0.055);
}

.cases-v3-hero-panel .home-v3-panel-label {
    color: var(--silver);
}

.cases-v3-hero-rail {
    display: grid;
    grid-template-columns: 14px 1fr 14px 1fr 14px;
    gap: 10px;
    align-items: center;
}

.cases-v3-hero-rail span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--oxide);
    box-shadow: 0 0 0 6px rgba(47, 111, 119, 0.18);
}

.cases-v3-hero-rail span.is-risk {
    background: var(--warning);
    box-shadow: 0 0 0 6px rgba(160, 106, 59, 0.18);
}

.cases-v3-hero-rail i {
    height: 1px;
    background: rgba(215, 226, 229, 0.22);
}

.cases-v3-hero-states {
    display: grid;
    gap: 2px;
}

.cases-v3-hero-states article {
    display: grid;
    gap: 7px;
    padding: 16px;
    background: rgba(215, 226, 229, 0.065);
}

.cases-v3-hero-states span,
.cases-v3-pattern-flow span,
.cases-v3-pattern-card header small,
.cases-v3-published-card > span {
    color: var(--oxide);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.cases-v3-hero-states strong {
    color: var(--ivory);
    font-size: 17px;
}

.cases-v3-hero-panel > p {
    margin: 0;
    padding-top: 18px;
    border-top: 1px solid rgba(215, 226, 229, 0.14);
    color: var(--silver);
    font-size: 13px;
    line-height: 1.65;
}

.cases-v3-context {
    background: var(--ivory);
}

.cases-v3-context-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    background: rgba(22, 35, 52, 0.1);
}

.cases-v3-context-grid article {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 210px;
    padding: 26px;
    border-top: 2px solid var(--oxide);
    background: #d7e2e5;
}

.cases-v3-context-grid article.is-dark {
    background: var(--ink);
}

.cases-v3-context-grid span,
.cases-v3-method-rail article > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(47, 111, 119, 0.35);
    border-radius: 50%;
    color: var(--oxide);
    font-size: 11px;
    font-weight: 700;
}

.cases-v3-context-grid h3,
.cases-v3-published-card h3,
.cases-v3-pattern-card h3,
.cases-v3-method-rail h3 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(20px, 1.8vw, 25px);
    line-height: 1.14;
}

.cases-v3-context-grid p,
.cases-v3-published-card p,
.cases-v3-pattern-flow p,
.cases-v3-method-rail p {
    margin: 0;
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.65;
}

.cases-v3-context-grid .is-dark h3 {
    color: var(--ivory);
}

.cases-v3-context-grid .is-dark p {
    color: var(--silver);
}

.cases-v3-published {
    background: #d7e2e5;
}

.cases-v3-published-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    background: rgba(22, 35, 52, 0.1);
}

.cases-v3-published-card {
    display: grid;
    align-content: start;
    gap: 16px;
    min-height: 260px;
    padding: 26px;
    border-top: 2px solid var(--oxide);
    background: var(--ivory);
}

.cases-v3-published-card h3 a {
    color: inherit;
    text-decoration: none;
}

.cases-v3-patterns {
    background:
        linear-gradient(rgba(22, 35, 52, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22, 35, 52, 0.03) 1px, transparent 1px),
        #eef0ed;
    background-size: 48px 48px;
}

.cases-v3-pattern-list {
    display: grid;
    gap: 12px;
}

.cases-v3-pattern-card {
    display: grid;
    gap: 22px;
    padding: 28px;
    border-top: 2px solid var(--oxide);
    background: rgba(245, 242, 236, 0.94);
}

.cases-v3-pattern-card header {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.cases-v3-pattern-card header > span {
    color: var(--oxide);
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
}

.cases-v3-pattern-card header div {
    display: grid;
    gap: 10px;
}

.cases-v3-pattern-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
}

.cases-v3-pattern-flow section {
    position: relative;
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    padding: 18px;
    background: rgba(215, 226, 229, 0.45);
}

.cases-v3-pattern-flow > i {
    display: none;
}

.cases-v3-pattern-flow section + i + section::before {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(100% + 8px);
    width: 18px;
    height: 1px;
    background: var(--oxide);
}

.cases-v3-link {
    justify-self: start;
    color: var(--oxide);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.cases-v3-link::after {
    content: " →";
}

.cases-v3-method {
    background:
        linear-gradient(rgba(215, 226, 229, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(215, 226, 229, 0.035) 1px, transparent 1px),
        var(--ink);
    background-size: 48px 48px;
}

.cases-v3-method-rail {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    background: rgba(215, 226, 229, 0.13);
}

.cases-v3-method-rail article {
    display: grid;
    align-content: start;
    gap: 14px;
    min-height: 245px;
    padding: 22px;
    background: rgba(245, 242, 236, 0.055);
}

.cases-v3-method-rail article > span {
    border-color: rgba(155, 199, 202, 0.35);
    color: #9bc7ca;
}

.cases-v3-method-rail h3 {
    color: var(--ivory);
    font-size: 18px;
}

.cases-v3-method-rail p {
    color: var(--silver);
    font-size: 13px;
}

.cases-v3-trust {
    background: #d7e2e5;
}

.cases-v3-trust-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
    gap: clamp(48px, 7vw, 90px);
    align-items: start;
}

.cases-v3-trust .home-v3-section-head {
    margin: 0;
}

.cases-v3-trust aside {
    gap: 2px;
    border-left-color: var(--warning);
    background: var(--ink);
}

.cases-v3-trust aside .home-v3-panel-label {
    margin-bottom: 16px;
    color: var(--silver);
}

.cases-v3-trust aside p {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(215, 226, 229, 0.09);
    color: var(--ivory);
    font-size: 14px;
    line-height: 1.5;
}

.cases-v3-trust aside strong {
    color: #9bc7ca;
    font-size: 11px;
    letter-spacing: 0.1em;
}

@media (max-width: 1050px) {
    .cases-v3-method-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .cases-v3-context-grid,
    .cases-v3-published-grid,
    .cases-v3-pattern-flow,
    .cases-v3-trust-grid {
        grid-template-columns: 1fr;
    }

    .cases-v3-pattern-flow section + i + section::before {
        display: none;
    }

    .cases-v3-method-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .cases-v3-hero-panel,
    .cases-v3-pattern-card,
    .cases-v3-trust aside {
        padding: 22px 20px;
    }

    .cases-v3-pattern-card header {
        grid-template-columns: 1fr;
    }

    .cases-v3-context-grid article,
    .cases-v3-published-card,
    .cases-v3-method-rail article {
        min-height: 0;
    }

    .cases-v3-method-rail {
        grid-template-columns: 1fr;
    }
}