.cv-voice-design-guide {
    --vd-ink: #102b4f;
    --vd-muted: #586b86;
    --vd-line: #d6e4f4;
    --vd-blue: #1769e9;
    --vd-purple: #6755d9;
    --vd-yellow: #ffd95a;
    width: min(100%, 1240px);
    margin: clamp(54px, 7vw, 104px) auto 0;
    color: var(--vd-ink);
}

.cv-voice-design-guide,
.cv-voice-design-guide * { box-sizing: border-box; }

.cv-voice-design-guide p,
.cv-voice-design-guide li,
.cv-voice-design-guide dd,
.cv-voice-design-guide td,
.cv-voice-design-guide th { overflow-wrap: anywhere; }

.cv-voice-design-guide a:focus-visible,
.cv-voice-design-guide summary:focus-visible,
.cv-voice-design-table-wrap:focus-visible {
    outline: 3px solid #74aaff;
    outline-offset: 4px;
}

.cv-voice-design-guide__lead {
    padding: clamp(30px, 5vw, 68px);
    color: #fff;
    border-radius: clamp(28px, 4vw, 48px);
    background:
        radial-gradient(circle at 84% 5%, rgba(255, 217, 90, .26), transparent 28%),
        radial-gradient(circle at 12% 86%, rgba(115, 184, 255, .2), transparent 32%),
        linear-gradient(135deg, #102b55, #243c80 55%, #6043a6);
    box-shadow: 0 30px 68px rgba(31, 52, 104, .22);
}

.cv-voice-design-guide__lead > div { width: min(100%, 910px); }
.cv-voice-design-guide__lead h2,
.cv-voice-design-story h2,
.cv-voice-design-examples h2,
.cv-voice-design-workflow h2,
.cv-voice-design-use-cases h2,
.cv-voice-design-compare h2,
.cv-voice-design-faq h2,
.cv-voice-design-cta h2 {
    margin: 7px 0 14px;
    color: inherit;
    font-size: clamp(30px, 3.45vw, 54px);
    line-height: 1.04;
    letter-spacing: -.04em;
}

.cv-voice-design-guide__lead > div > p:last-child {
    max-width: 850px;
    margin: 0;
    color: #d9e6fb;
    font-size: clamp(16px, 1.45vw, 20px);
    line-height: 1.72;
}

.cv-voice-design-guide__kicker {
    margin: 0;
    color: #2c72d8;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .095em;
    line-height: 1.4;
    text-transform: uppercase;
}

.cv-voice-design-guide__lead .cv-voice-design-guide__kicker { color: #ffe37d; }
.cv-voice-design-guide__lead dl {
    margin: clamp(28px, 4vw, 48px) 0 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.cv-voice-design-guide__lead dl > div {
    min-width: 0;
    padding: 17px;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 18px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
}

.cv-voice-design-guide__lead dt {
    margin-bottom: 5px;
    color: #aac8f2;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cv-voice-design-guide__lead dd { margin: 0; color: #fff; font-weight: 800; line-height: 1.4; }
.cv-voice-design-guide__jump {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cv-voice-design-guide__jump a {
    min-height: 39px;
    padding: 9px 13px;
    display: inline-flex;
    align-items: center;
    color: #f7fbff;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.cv-voice-design-guide__jump a:hover { background: rgba(255, 255, 255, .17); }
.cv-voice-design-story {
    margin-top: clamp(42px, 6vw, 84px);
    padding: clamp(24px, 3.5vw, 50px);
    display: grid;
    grid-template-columns: minmax(0, .93fr) minmax(420px, 1.07fr);
    grid-template-areas: "copy visual";
    align-items: center;
    gap: clamp(30px, 5vw, 74px);
    border: 1px solid var(--vd-line);
    border-radius: clamp(28px, 4vw, 46px);
    background: linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(244, 249, 255, .93));
    box-shadow: 0 22px 55px rgba(42, 70, 120, .09);
    scroll-margin-top: 88px;
}

.cv-voice-design-story--reverse { grid-template-areas: "visual copy"; }
.cv-voice-design-story__copy { min-width: 0; grid-area: copy; }
.cv-voice-design-story__visual { min-width: 0; grid-area: visual; }
.cv-voice-design-story h2 { color: var(--vd-ink); font-size: clamp(29px, 3vw, 46px); }
.cv-voice-design-story__copy > p:not(.cv-voice-design-guide__kicker):not(.cv-voice-design-story__formula) {
    margin: 0 0 17px;
    color: var(--vd-muted);
    font-size: 16px;
    line-height: 1.72;
}

.cv-voice-design-story__points {
    margin: 22px 0;
    padding: 0;
    display: grid;
    gap: 11px;
    list-style: none;
    counter-reset: vd-points;
}

ol.cv-voice-design-story__points li { counter-increment: vd-points; }
.cv-voice-design-story__points li {
    min-width: 0;
    padding: 13px 15px;
    color: #425d7d;
    border-left: 4px solid #83b7ff;
    border-radius: 0 14px 14px 0;
    background: #eef6ff;
    line-height: 1.58;
}

ol.cv-voice-design-story__points li::before {
    content: counter(vd-points, decimal-leading-zero);
    margin-right: 9px;
    color: var(--vd-blue);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
}

.cv-voice-design-story__formula {
    margin: 20px 0;
    padding: 16px;
    color: #314e70;
    border: 1px solid #c9dcf4;
    border-radius: 16px;
    background: #fff;
    line-height: 1.65;
}

.cv-voice-design-story__formula mark {
    margin-right: 7px;
    padding: 3px 7px;
    color: #5c4700;
    border-radius: 7px;
    background: var(--vd-yellow);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.cv-voice-design-story__formula code { color: #273f80; font-size: 13px; font-weight: 800; white-space: normal; }
.cv-voice-design-story aside {
    margin-top: 18px;
    padding: 16px 17px;
    color: #4e4a25;
    border: 1px solid #f0d36d;
    border-radius: 16px;
    background: #fff9d9;
    line-height: 1.62;
}

.cv-voice-design-attributes { margin: 22px 0 0; display: grid; gap: 10px; }
.cv-voice-design-attributes > div {
    padding: 12px 14px;
    display: grid;
    grid-template-columns: minmax(115px, .38fr) minmax(0, 1fr);
    gap: 14px;
    border: 1px solid #dce7f4;
    border-radius: 14px;
    background: #fff;
}

.cv-voice-design-attributes dt { color: #1f579e; font-weight: 900; }
.cv-voice-design-attributes dd { margin: 0; color: var(--vd-muted); line-height: 1.55; }
.cv-voice-design-story__visual--pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 13px; }
.cv-voice-design-story__visual figure,
.cv-voice-design-workflow figure,
.cv-voice-design-use-cases figure {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid #dbe7f5;
    border-radius: 20px;
    background: #eef4fa;
    box-shadow: 0 13px 28px rgba(33, 60, 106, .1);
}

.cv-voice-design-story__visual img,
.cv-voice-design-workflow img,
.cv-voice-design-use-cases img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

.cv-voice-design-story__visual--pair img { aspect-ratio: 4 / 3; object-fit: cover; }
.cv-voice-design-story__visual--contain img { object-fit: contain; }
.cv-voice-design-story__visual figcaption,
.cv-voice-design-workflow figcaption,
.cv-voice-design-use-cases figcaption {
    padding: 10px 12px;
    color: #4e627c;
    background: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.45;
}

.cv-voice-design-story__visual--characters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cv-voice-design-story__visual--characters figure:nth-child(1),
.cv-voice-design-story__visual--characters figure:nth-child(4) { transform: translateY(-10px); }
.cv-voice-design-story__visual--characters img { aspect-ratio: 16 / 9; object-fit: cover; }

.cv-voice-design-examples,
.cv-voice-design-workflow,
.cv-voice-design-use-cases,
.cv-voice-design-compare,
.cv-voice-design-faq {
    margin-top: clamp(52px, 7vw, 96px);
    scroll-margin-top: 88px;
}

.cv-voice-design-examples > header,
.cv-voice-design-workflow > header,
.cv-voice-design-use-cases > header,
.cv-voice-design-compare > header,
.cv-voice-design-faq > header { width: min(100%, 850px); margin-bottom: 24px; }
.cv-voice-design-examples > header > p:last-child,
.cv-voice-design-workflow > header > p:last-child,
.cv-voice-design-use-cases > header > p:last-child,
.cv-voice-design-compare > header > p:last-child {
    margin: 0;
    color: var(--vd-muted);
    font-size: 16px;
    line-height: 1.7;
}

.cv-voice-design-examples > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cv-voice-design-examples article {
    min-width: 0;
    padding: 23px;
    border: 1px solid var(--vd-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(38, 65, 112, .08);
}

.cv-voice-design-examples article:nth-child(2) { transform: translateY(18px); }
.cv-voice-design-examples h3 { margin: 0 0 14px; font-size: 21px; }
.cv-voice-design-examples article > p { margin: 0 0 6px; color: #3465a6; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.cv-voice-design-examples pre {
    margin: 0 0 18px;
    padding: 15px;
    color: #ddebff;
    border-radius: 15px;
    background: #112846;
    font: inherit;
    white-space: pre-wrap;
}

.cv-voice-design-examples code { color: inherit; font-size: 13px; line-height: 1.65; }
.cv-voice-design-examples dl { margin: 0; display: grid; gap: 5px; }
.cv-voice-design-examples dt { margin-top: 8px; color: #183e72; font-weight: 900; }
.cv-voice-design-examples dd { margin: 0; color: var(--vd-muted); line-height: 1.55; }

.cv-voice-design-workflow > ol {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
}

.cv-voice-design-workflow > ol > li {
    min-width: 0;
    padding: 13px 13px 20px;
    border: 1px solid var(--vd-line);
    border-radius: 23px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(38, 65, 112, .07);
}

.cv-voice-design-workflow figure { border-radius: 15px; box-shadow: none; }
.cv-voice-design-workflow figure img { aspect-ratio: 21 / 13; object-fit: cover; }
.cv-voice-design-workflow figure figcaption { color: var(--vd-blue); font-size: 10px; text-transform: uppercase; }
.cv-voice-design-workflow h3 { margin: 17px 5px 8px; font-size: 18px; }
.cv-voice-design-workflow li > p { margin: 0 5px; color: var(--vd-muted); font-size: 14px; line-height: 1.58; }
.cv-voice-design-workflow__finish {
    aspect-ratio: 21 / 13;
    display: grid;
    grid-template-columns: auto auto;
    place-content: center;
    align-items: center;
    gap: 12px;
    color: #fff;
    border-radius: 15px;
    background: linear-gradient(135deg, #1769e9, #6851dd);
}

.cv-voice-design-workflow__finish span { font-size: 42px; font-weight: 950; }
.cv-voice-design-workflow__finish .cv-icon { width: 30px; height: 30px; }
.cv-voice-design-use-cases > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cv-voice-design-use-cases article {
    min-width: 0;
    padding: 13px;
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    grid-template-areas: "media title" "media copy";
    align-items: start;
    gap: 3px 18px;
    border: 1px solid var(--vd-line);
    border-radius: 24px;
    background: #fff;
}

.cv-voice-design-use-cases figure { grid-area: media; border-radius: 16px; box-shadow: none; }
.cv-voice-design-use-cases figure img { aspect-ratio: 424 / 260; object-fit: cover; }
.cv-voice-design-use-cases figure figcaption { padding: 7px 9px; font-size: 9px; }
.cv-voice-design-use-cases h3 { grid-area: title; margin: 9px 0 7px; font-size: 19px; }
.cv-voice-design-use-cases article > p { grid-area: copy; margin: 0; color: var(--vd-muted); font-size: 14px; line-height: 1.58; }

.cv-voice-design-compare {
    padding: clamp(24px, 4vw, 50px);
    border-radius: 32px;
    background: #eef6ff;
}

.cv-voice-design-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #cbdff5;
    border-radius: 20px;
    background: #fff;
}

.cv-voice-design-compare table { width: 100%; min-width: 760px; border-collapse: collapse; text-align: left; }
.cv-voice-design-compare caption { padding: 14px 17px; color: #37587f; font-size: 12px; font-weight: 900; text-align: left; }
.cv-voice-design-compare th,
.cv-voice-design-compare td { padding: 14px 16px; border-top: 1px solid #e2ebf6; line-height: 1.5; }
.cv-voice-design-compare thead th { color: #fff; border-top: 0; background: #183c70; font-size: 13px; }
.cv-voice-design-compare tbody th { color: #244b78; background: #f7fbff; font-size: 13px; }
.cv-voice-design-compare tbody td { color: var(--vd-muted); font-size: 13px; }

.cv-voice-design-faq > div { display: grid; gap: 9px; }
.cv-voice-design-faq details {
    border: 1px solid var(--vd-line);
    border-radius: 18px;
    background: #fff;
    transition: border-color .2s ease, background-color .2s ease;
}

.cv-voice-design-faq details[open] { border-color: #ebc948; background: #fff9d9; }
.cv-voice-design-faq summary {
    min-height: 58px;
    padding: 15px 52px 15px 18px;
    display: flex;
    align-items: center;
    color: #173d6a;
    font-weight: 900;
    line-height: 1.4;
    cursor: pointer;
    position: relative;
    list-style: none;
}

.cv-voice-design-faq summary::-webkit-details-marker { display: none; }
.cv-voice-design-faq summary::after {
    content: "+";
    position: absolute;
    right: 17px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: var(--vd-blue);
    font-size: 18px;
}

.cv-voice-design-faq details[open] summary::after { content: "−"; color: #5e4800; background: var(--vd-yellow); }
.cv-voice-design-faq details p { margin: 0; padding: 0 18px 18px; color: var(--vd-muted); line-height: 1.7; }

.cv-voice-design-guide__footer { margin-top: clamp(58px, 8vw, 108px); }
.cv-voice-design-cta {
    padding: clamp(28px, 5vw, 62px);
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(270px, .75fr);
    align-items: center;
    gap: clamp(28px, 5vw, 70px);
    color: #fff;
    border-radius: clamp(28px, 4vw, 46px);
    background: linear-gradient(135deg, #102c57, #235da8 58%, #6650d6);
    box-shadow: 0 24px 58px rgba(25, 52, 103, .2);
}

.cv-voice-design-cta .cv-voice-design-guide__kicker { color: #ffe37d; }
.cv-voice-design-cta h2 { font-size: clamp(29px, 3vw, 46px); }
.cv-voice-design-cta p:not(.cv-voice-design-guide__kicker) { margin: 0 0 21px; color: #d9e6fa; font-size: 16px; line-height: 1.7; }
.cv-voice-design-cta aside {
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 23px;
    background: rgba(255, 255, 255, .09);
}

.cv-voice-design-cta aside strong { color: #ffe37d; }
.cv-voice-design-cta ul { margin: 13px 0 0; padding-left: 20px; display: grid; gap: 7px; color: #eff5ff; }
.cv-voice-design-sources {
    margin-top: 20px;
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid var(--vd-line);
    border-radius: 24px;
    background: #fff;
}

.cv-voice-design-sources h2 { margin: 0 0 10px; font-size: 24px; }
.cv-voice-design-sources h3 { margin: 22px 0 8px; font-size: 17px; }
.cv-voice-design-sources p,
.cv-voice-design-sources li { color: var(--vd-muted); font-size: 13px; line-height: 1.7; }
.cv-voice-design-sources ul { margin: 13px 0 0; padding-left: 20px; }
.cv-voice-design-sources a { color: #145fc8; font-weight: 800; text-underline-offset: 3px; }

@media (max-width: 1050px) {
    .cv-voice-design-guide__lead dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cv-voice-design-story,
    .cv-voice-design-story--reverse {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "visual" "copy";
    }
    .cv-voice-design-story__visual { width: min(100%, 780px); margin-inline: auto; }
    .cv-voice-design-examples > div { grid-template-columns: minmax(0, 1fr); }
    .cv-voice-design-examples article:nth-child(2) { transform: none; }
    .cv-voice-design-workflow > ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cv-voice-design-use-cases article { grid-template-columns: 160px minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .cv-voice-design-guide { margin-top: 48px; }
    .cv-voice-design-guide__lead,
    .cv-voice-design-story,
    .cv-voice-design-compare,
    .cv-voice-design-cta { border-radius: 25px; }
    .cv-voice-design-guide__lead dl,
    .cv-voice-design-workflow > ol,
    .cv-voice-design-use-cases > div { grid-template-columns: minmax(0, 1fr); }
    .cv-voice-design-story__visual--pair { grid-template-columns: minmax(0, 1fr); }
    .cv-voice-design-story__visual--pair img { aspect-ratio: auto; object-fit: contain; }
    .cv-voice-design-story__visual--characters figure:nth-child(1),
    .cv-voice-design-story__visual--characters figure:nth-child(4) { transform: none; }
    .cv-voice-design-attributes > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .cv-voice-design-use-cases article {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "media" "title" "copy";
    }
    .cv-voice-design-use-cases figure { width: 100%; }
    .cv-voice-design-cta { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 430px) {
    .cv-voice-design-guide__lead,
    .cv-voice-design-story,
    .cv-voice-design-compare,
    .cv-voice-design-cta,
    .cv-voice-design-sources { padding: 22px 17px; }
    .cv-voice-design-guide__lead h2,
    .cv-voice-design-story h2,
    .cv-voice-design-examples h2,
    .cv-voice-design-workflow h2,
    .cv-voice-design-use-cases h2,
    .cv-voice-design-compare h2,
    .cv-voice-design-faq h2,
    .cv-voice-design-cta h2 { font-size: 29px; }
    .cv-voice-design-story__visual--characters { grid-template-columns: minmax(0, 1fr); }
    .cv-voice-design-guide__jump { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cv-voice-design-guide__jump a { justify-content: center; text-align: center; }
    .cv-voice-design-examples article { padding: 19px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .cv-voice-design-faq details { transition: none; }
}