.ad-design-page {
    --design-ink: #173555;
    --design-muted: #48637e;
    --design-accent: #1669b8;
    --design-line: #d6e5f3;
    padding-block: 24px 60px;
}

.ad-design-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(20px, 4vw, 62px);
    padding: clamp(20px, 4vw, 50px);
    border: 1px solid var(--design-line);
    border-radius: 30px;
    background: linear-gradient(130deg, #f8fcff 22%, #e6f1ff 100%);
}

.ad-design-intro { align-self: center; min-width: 0; }
.ad-design-kicker, .ad-design-actions, .ad-design-toc > strong { display: flex; align-items: center; gap: 10px; }
.ad-design-kicker { font-size: 12px; font-weight: 700; color: var(--design-accent); }
.ad-design-kicker .dana-ui-icon { width: 23px; height: 23px; }
.ad-design-hero h1 {
    margin: 16px 0;
    color: var(--design-ink);
    font-size: clamp(30px, 4.4vw, 57px);
    line-height: 1.38;
    text-wrap: balance;
}
.ad-design-hero h1 span { display: block; margin-block-start: 6px; color: var(--design-accent); font-size: .57em; line-height: 1.65; }
.ad-design-hero p { margin: 0; color: var(--design-muted); line-height: 2.1; font-size: clamp(13px, 1.25vw, 16px); }
.ad-design-actions { flex-wrap: wrap; margin-block-start: 22px; }
.ad-design-actions .btn { gap: 8px; justify-content: center; min-height: 44px; }
.ad-design-actions .dana-ui-icon { width: 19px; height: 19px; }

.ad-design-visual {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: center;
    justify-items: center;
    min-width: 0;
    min-height: 310px;
    margin: 0;
    padding: 16px;
    border: 1px solid #c7def5;
    border-radius: 23px;
    background:
        linear-gradient(#1965a91b 1px, transparent 1px) center / 24px 24px,
        linear-gradient(90deg, #1965a91b 1px, transparent 1px) center / 24px 24px,
        radial-gradient(ellipse at center, #f5faff, #d4e8ff);
}
.ad-design-visual figcaption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 16px;
    width: 100%;
    font-size: 10px;
    font-weight: 700;
    color: #275884;
}
.ad-design-visual img { width: min(88%, 306px); height: auto; margin: 5px 0 0; filter: drop-shadow(0 18px 19px #19477624); }
.ad-design-visual-label {
    position: absolute;
    inset: auto auto 14px 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid #c5dcf1;
    border-radius: 10px;
    background: #f8fcff;
    color: var(--design-ink);
    font-size: 10px;
    font-weight: 700;
}
.ad-design-visual-label .dana-ui-icon { width: 17px; height: 17px; }

.ad-design-layout { display: grid; grid-template-columns: minmax(190px, 234px) minmax(0, 1fr); align-items: start; gap: 24px; margin-block-start: 27px; }
.ad-design-toc, .ad-design-content > section { border: 1px solid var(--design-line); border-radius: 21px; background: #f9fcff; }
.ad-design-toc { position: sticky; top: 181px; padding: 15px; }
.ad-design-toc > strong { margin-block-end: 8px; color: var(--design-ink); font-size: 14px; }
.ad-design-toc ol { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.ad-design-toc a { display: flex; align-items: center; min-height: 42px; padding: 8px 10px; border-radius: 10px; color: var(--design-accent); font-size: 12px; line-height: 1.7; }
.ad-design-toc a:hover, .ad-design-toc a:focus-visible { background: #e8f3ff; }
.ad-design-page :is(a, summary):focus-visible { outline: 2px solid #207bcf; outline-offset: 3px; }

.ad-design-content { display: grid; min-width: 0; gap: 16px; }
.ad-design-content > section { padding: clamp(18px, 3vw, 31px); scroll-margin-top: 184px; }
.ad-design-content h2 { margin: 8px 0 12px; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.6; color: var(--design-ink); }
.ad-design-content h3 { margin: 0 0 7px; color: var(--design-ink); font-size: 15px; line-height: 1.7; }
.ad-design-content p { margin: 0; color: var(--design-muted); font-size: 14px; line-height: 2.15; }
.ad-design-chips, .ad-design-steps, .ad-design-checklist { list-style: none; margin: 15px 0 0; padding: 0; }
.ad-design-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ad-design-chips li { padding: 6px 10px; border-radius: 8px; background: #e8f3ff; color: var(--design-accent); font-size: 11px; }
.ad-design-systems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ad-design-systems > div { padding: 15px; border: 1px solid var(--design-line); border-radius: 14px; background: #eef6ff; }
.ad-design-systems p { font-size: 12px; }
.ad-design-icon, .ad-design-steps li > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #dcecff; color: #155e9f; font-weight: 700; }
.ad-design-icon { margin-block-end: 10px; }
.ad-design-icon .dana-ui-icon { width: 22px; height: 22px; }
.ad-design-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 13px; padding: 11px 0; }
.ad-design-steps li + li { border-block-start: 1px solid var(--design-line); }
.ad-design-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ad-design-checklist li { padding: 10px 12px; border-inline-start: 3px solid #78abe4; border-radius: 8px; background: #edf5ff; color: var(--design-ink); font-size: 12px; line-height: 1.9; }

.ad-design-faq { display: grid; gap: 8px; }
.ad-design-faq details { border: 1px solid var(--design-line); border-radius: 12px; background: #f4f9ff; }
.ad-design-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 45px; padding: 9px 12px; list-style: none; cursor: pointer; color: var(--design-ink); font-size: 13px; font-weight: 700; line-height: 1.8; }
.ad-design-faq summary::-webkit-details-marker { display: none; }
.ad-design-faq summary .dana-ui-icon { flex: none; }
.ad-design-faq details[open] summary .dana-ui-icon { transform: rotate(180deg); }
.ad-design-faq details p { padding: 0 12px 13px; font-size: 13px; }

@media (max-width: 991px) {
    .ad-design-layout { grid-template-columns: minmax(0, 1fr); gap: 15px; }
    .ad-design-toc { position: static; }
    .ad-design-toc ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .ad-design-toc a { background: #edf5ff; }
    .ad-design-content > section { scroll-margin-top: 145px; }
}

@media (max-width: 639px) {
    .ad-design-page { padding-block: 15px 36px; }
    .ad-design-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; border-radius: 21px; padding: 16px; }
    .ad-design-hero h1 { margin-block: 12px; }
    .ad-design-actions { gap: 7px; margin-block-start: 16px; }
    .ad-design-actions .btn { padding-inline: 9px; font-size: 11px; }
    .ad-design-visual { min-height: 0; padding: 12px; border-radius: 15px; }
    .ad-design-visual img { width: min(72%, 220px); }
    .ad-design-visual-label { inset-block-end: 9px; inset-inline-end: 9px; }
    .ad-design-layout { margin-block-start: 16px; }
    .ad-design-toc ol, .ad-design-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ad-design-toc a { font-size: 11px; min-height: 44px; }
    .ad-design-content > section { border-radius: 16px; }
    .ad-design-content p { font-size: 13px; }
    .ad-design-systems { grid-template-columns: minmax(0, 1fr); }
    .ad-design-systems > div { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
    .ad-design-systems .ad-design-icon { grid-row: span 2; margin: 0; }
    .ad-design-systems h3 { margin: 0; }
    .ad-design-checklist li { padding: 8px; font-size: 11px; }
}