/* Website Design reuses the established public hero and care components.
   These scoped rules cover the demonstration image and route button contrast. */
body.tws-shell.tws-template-website-design #main-body .tws-design-page .tws-button--primary {
    border-color: var(--tws-action);
    background: var(--tws-action);
    color: var(--tws-text-on-action);
}

body.tws-shell.tws-template-website-design #main-body .tws-design-page .tws-button--primary:hover,
body.tws-shell.tws-template-website-design #main-body .tws-design-page .tws-button--primary:focus {
    border-color: var(--tws-action-hover);
    background: var(--tws-action-hover);
    color: var(--tws-text-on-action);
}

.tws-design-example {
    margin: 0;
}

.tws-design-example img {
    display: block;
    width: 100%;
    height: auto;
    border: .0625rem solid var(--tws-border);
}

.tws-design-example figcaption {
    max-width: 58rem;
    margin-top: var(--tws-space-4);
    color: var(--tws-text-muted);
    font-size: 1rem;
    line-height: 1.55;
}