.about-redesign {
    --about-blue: #0861ed;
    --about-ink: #11203a;
    --about-muted: #53647e;
    color: var(--about-ink);
    background: #fff;
    font-family: var(--doku-font-ui);
}
.about-redesign *, .about-redesign *::before, .about-redesign *::after { box-sizing: border-box; }
.about-redesign a { text-decoration: none; }
.about-redesign button { font: inherit; cursor: pointer; }
.about-wrap { width: min(100% - 96px, 1440px); margin-inline: auto; }
.about-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border: 1px solid #dbeafd;
    border-radius: 999px;
    background: #eaf3ff;
    color: #0861ed;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.about-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 53px;
    padding: 0 25px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.about-button:hover { transform: translateY(-2px); }
.about-button:focus-visible { outline: 3px solid #91bdff; outline-offset: 2px; }
.about-button-primary { border: 1px solid #0861ed; background: #0861ed; color: #fff !important; box-shadow: 0 7px 17px rgba(8,97,237,.17); }
.about-button-primary:hover { background: #0552d0; box-shadow: 0 10px 20px rgba(8,97,237,.2); }
.about-button-light { border: 1px solid #dce8fa; background: rgba(255,255,255,.95); color: #152742 !important; }
.about-button-light:hover { background: #fff; box-shadow: 0 8px 18px rgba(20,65,130,.08); }
.about-button-light i { color: #12233d; font-size: 20px; }
.about-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 550px;
    background: linear-gradient(110deg, #fff, #f5faff 55%, #e9f3ff);
}
.about-hero-art {
    position: absolute;
    z-index: -1;
    inset: 0 0 0 35%;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.86) 8%, rgba(255,255,255,0) 29%), url('/images/home/hero-devices.png') center / cover no-repeat;
}
.about-hero-inner { display: flex; align-items: center; min-height: 550px; }
.about-hero-copy { width: min(575px, 48%); padding: 55px 0; }
.about-hero h1 {
    margin: 19px 0 18px;
    color: #101e37;
    font-size: var(--doku-display-size);
    line-height: 1.15;
    letter-spacing: -.045em;
    font-weight: 800;
}
.about-hero h1 span, .about-numbers h2 span { color: #0861ed; }
.about-hero p { max-width: 540px; margin: 0; color: #526178; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.48; }
.about-hero-actions { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 28px; }
.about-highlights { border-block: 1px solid #e6eef9; background: #fff; }
.about-highlights-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); padding-block: 23px; }
.about-highlight { display: flex; align-items: flex-start; gap: 13px; min-width: 0; padding: 0 20px; border-right: 1px solid #e3ebf7; }
.about-highlight:first-child { padding-left: 0; }
.about-highlight:last-child { padding-right: 0; border: 0; }
.about-highlight-icon, .about-card-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(145deg, #eff6ff, #dfeeff);
    color: #0861ed;
}
.about-highlight-icon { width: 50px; height: 50px; font-size: 22px; }
.about-highlight strong { display: block; margin: 3px 0 3px; font-size: 14px; line-height: 1.25; font-weight: 800; }
.about-highlight small { display: block; color: #53647e; font-size: 12px; line-height: 1.35; }
.about-numbers { padding: 78px 0; background: linear-gradient(120deg, #f8fbff, #fff); }
.about-numbers-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); align-items: center; gap: clamp(50px, 9vw, 155px); }
.about-numbers-copy h2, .about-section-heading h2 {
    margin: 16px 0 12px;
    color: #12203a;
    font-size: var(--doku-section-size);
    line-height: 1.1;
    letter-spacing: -.035em;
    font-weight: 800;
}
.about-numbers-copy p, .about-section-heading p { max-width: 740px; margin: 0; color: #53647e; font-size: 18px; line-height: 1.48; }
.about-numbers-copy p { max-width: 510px; }
.about-metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }
.about-metric {
    display: flex;
    align-items: center;
    gap: 17px;
    min-height: 122px;
    padding: 19px 22px;
    border: 1px solid #dfeafa;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 9px 24px rgba(35,83,145,.055);
}
.about-metric-icon { flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-size: 22px; }
.about-tone-blue { color: #0861ed; background: #e6f1ff; }
.about-tone-green { color: #08a35b; background: #e1faeb; }
.about-tone-violet { color: #713ef0; background: #eee8ff; }
.about-tone-orange { color: #f56a20; background: #fff0e7; }
.about-metric strong { display: block; color: #12203a; font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.about-metric b { display: block; margin-top: 6px; font-size: 13px; line-height: 1.2; }
.about-metric small { display: block; color: #66758d; font-size: 12px; line-height: 1.2; }
.about-workflow, .about-outcomes, .about-steps-section, .about-audience, .about-reasons { padding: 76px 0; }
.about-workflow { border-top: 1px solid #edf3fa; background: linear-gradient(125deg, #f7fbff, #fff 55%, #f6faff); }
.about-section-heading { margin-bottom: 31px; }
.about-section-heading h2 { margin-bottom: 10px; }
.about-screen-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.about-screen-card, .about-audience-card {
    overflow: hidden;
    min-width: 0;
    border: 1px solid #dfe9f8;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 12px 31px rgba(35,83,145,.055);
}
.about-screen-image { height: 218px; overflow: hidden; background: #edf5ff; }
.about-screen-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.about-screen-caption, .about-audience-caption { display: flex; align-items: flex-start; gap: 14px; min-height: 128px; padding: 18px; }
.about-card-icon { width: 42px; height: 42px; font-size: 19px; }
.about-screen-caption h3, .about-audience-caption h3 { margin: 2px 0 7px; color: #182740; font-size: 17px; line-height: 1.28; font-weight: 800; }
.about-screen-caption p, .about-audience-caption p { margin: 0; color: #53647e; font-size: 14px; line-height: 1.4; }
.about-outcomes { background: #fff; }
.about-outcome-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.about-outcome-card {
    min-height: 220px;
    padding: 28px;
    border: 1px solid #dfeafa;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 31px rgba(35,83,145,.045);
}
.about-outcome-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 13px; background: #e7f2ff; color: #0861ed; font-size: 25px; }
.about-outcome-card h3 { max-width: 280px; margin: 23px 0 9px; font-size: 19px; line-height: 1.2; font-weight: 800; }
.about-outcome-card p { max-width: 340px; margin: 0; color: #53647e; font-size: 15px; line-height: 1.45; }
.about-steps-section { background: linear-gradient(125deg, #f9fcff, #fff); border-block: 1px solid #edf3fb; }
.about-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.about-step { min-width: 0; }
.about-step-heading { display: flex; align-items: flex-start; gap: 16px; min-height: 132px; }
.about-step-heading > span { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #0861ed; color: #fff; font-size: 17px; font-weight: 800; }
.about-step h3 { margin: 2px 0 8px; font-size: 17px; line-height: 1.25; font-weight: 800; }
.about-step p { max-width: 355px; margin: 0; color: #53647e; font-size: 14px; line-height: 1.42; }
.about-step-demo { height: 205px; border: 1px solid #dfeafa; border-radius: 13px; background: #fff; box-shadow: 0 12px 27px rgba(35,83,145,.045); }
.about-step-list, .about-step-stack { display: flex; flex-direction: column; padding: 18px; }
.about-step-demo > strong { display: block; margin-bottom: 13px; color: #172741; font-size: 13px; }
.about-step-list > span { display: flex; align-items: center; gap: 11px; padding: 9px 3px; border-top: 1px solid #edf2fa; color: #30415d; font-size: 13px; }
.about-step-list > span i, .about-step-stack > span i { width: 20px; color: #0861ed; font-size: 17px; }
.about-step-list > span:nth-of-type(2) i { color: #09a562; }
.about-step-list > span:nth-of-type(3) i { color: #e94d54; }
.about-step-stack > span { display: grid; grid-template-columns: 25px 1fr; column-gap: 8px; padding: 6px 3px; border-top: 1px solid #edf2fa; }
.about-step-stack > span i { grid-row: span 2; align-self: center; }
.about-step-stack b { color: #2a3d5a; font-size: 12px; }
.about-step-stack small { color: #8391a5; font-size: 11px; }
.about-step-preview { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; }
.about-step-preview > div { position: relative; width: 62%; height: 100%; padding: 16px 13px; border: 1px solid #e2e9f5; border-radius: 7px; box-shadow: 0 5px 12px rgba(31,69,122,.08); }
.about-step-preview > div b { display: block; margin-bottom: 14px; color: #283955; font-size: 10px; }
.about-step-preview > div span { display: block; width: 100%; height: 3px; margin: 8px 0; border-radius: 9px; background: #d9e3f1; }
.about-step-preview > div span.short { width: 60%; }
.about-step-preview > div i { position: absolute; bottom: 18px; right: 20px; color: #8db9f6; font-size: 25px; }
.about-step-preview > small { color: #1763dd; font-size: 11px; white-space: nowrap; }
.about-step-preview > small i { margin-right: 4px; }
.about-audience { background: #fff; }
.about-audience-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; }
.about-audience-photo { height: 155px; background-repeat: no-repeat; background-color: #eaf3ff; }
.about-audience-photo-woman, .about-audience-photo-man, .about-audience-photo-team { background-image: url('/images/home/audience-panels.png'); background-size: 400% auto; }
.about-audience-photo-woman { background-position: 33.333% 40%; }
.about-audience-photo-man { background-position: 0% 42%; }
.about-audience-photo-team { background-position: 66.666% 41%; }
.about-audience-photo-paper { background-image: url('/images/about/paper-stack.png'); background-size: cover; background-position: center 46%; }
.about-audience-caption { min-height: 142px; padding: 15px 13px 19px; gap: 10px; }
.about-audience-caption .about-card-icon { width: 38px; height: 38px; border-radius: 10px; font-size: 17px; }
.about-audience-caption h3 { font-size: 14px; }
.about-audience-caption p { font-size: 12px; }
.about-reasons { padding-top: 24px; background: #fff; }
.about-reasons-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; }
.about-reason-card { min-height: 172px; padding: 23px; border: 1px solid #e0eaf8; border-radius: 15px; background: #fff; box-shadow: 0 10px 28px rgba(35,83,145,.04); }
.about-reason-card > i { color: #0861ed; font-size: 26px; }
.about-reason-card h3 { margin: 17px 0 7px; font-size: 16px; line-height: 1.25; font-weight: 800; }
.about-reason-card p { margin: 0; color: #53647e; font-size: 13px; line-height: 1.38; }
.about-final { padding: 10px 0 78px; background: #fff; }
.about-final-panel { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 345px; overflow: hidden; border: 1px solid #d9eaff; border-radius: 20px; background: linear-gradient(115deg, #eaf4ff, #f5faff); }
.about-final-art { position: absolute; z-index: -1; inset: 0 0 0 47%; background: linear-gradient(90deg, #eaf4ff, rgba(234,244,255,0) 36%), url('/images/home/hero-devices.png') 58% center / cover no-repeat; }
.about-final-copy { width: 55%; padding: 38px 42px; }
.about-final h2 { max-width: 650px; margin: 0 0 12px; color: #14233e; font-size: clamp(27px, 2.55vw, 37px); line-height: 1.13; letter-spacing: -.03em; font-weight: 800; }
.about-final p { margin: 0; color: #53647e; font-size: 16px; line-height: 1.45; }
.about-final-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.about-final .about-button { min-height: 48px; font-size: 14px; }

@media (max-width: 1280px) {
    .about-wrap { width: min(100% - 56px, 1440px); }
    .about-hero-copy { width: 51%; }
    .about-highlight { padding-inline: 12px; gap: 10px; }
    .about-numbers-layout { gap: 50px; }
}
@media (max-width: 1020px) {
    .about-hero-art { left: 42%; opacity: .7; }
    .about-hero-copy { width: 61%; }
    .about-highlights-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 0; }
    .about-highlight:nth-child(2) { border-right: 0; }
    .about-numbers-layout { grid-template-columns: 1fr; gap: 28px; }
    .about-numbers-copy { max-width: 650px; }
    .about-screen-grid, .about-outcome-grid { gap: 12px; }
    .about-screen-image { height: 180px; }
    .about-audience-grid, .about-reasons-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767px) {
    .about-wrap { width: min(100% - 36px, 560px); }
    .about-hero { min-height: 0; }
    .about-hero-inner { display: block; min-height: 0; padding-top: 36px; padding-bottom: 285px; }
    .about-hero-copy { width: 100%; padding: 0; }
    .about-hero h1 { font-size: var(--doku-display-size); }
    .about-hero p { max-width: 530px; font-size: 17px; }
    .about-hero-art { inset: auto 0 0; height: 315px; opacity: 1; background-position: 58% center; }
    .about-hero-actions { margin-top: 22px; gap: 10px; }
    .about-button { min-height: 48px; padding-inline: 18px; font-size: 14px; }
    .about-highlights-grid { padding-block: 16px; }
    .about-highlight { padding: 11px 7px; }
    .about-highlight:nth-child(odd) { padding-left: 0; }
    .about-highlight-icon { width: 42px; height: 42px; font-size: 19px; }
    .about-numbers, .about-workflow, .about-outcomes, .about-steps-section, .about-audience, .about-reasons { padding-block: 52px; }
    .about-section-heading { margin-bottom: 24px; }
    .about-section-heading p, .about-numbers-copy p { font-size: 16px; }
    .about-screen-grid, .about-outcome-grid, .about-steps { grid-template-columns: 1fr; }
    .about-screen-image { height: 230px; }
    .about-outcome-card { min-height: 0; }
    .about-step-heading { min-height: 0; margin-bottom: 18px; }
    .about-step-demo { height: 190px; }
    .about-final { padding-bottom: 52px; }
    .about-final-panel { display: block; min-height: 0; padding-bottom: 245px; }
    .about-final-copy { width: 100%; padding: 30px 26px 0; }
    .about-final-art { inset: auto 0 0; height: 245px; background-position: 58% center; }
}
@media (max-width: 480px) {
    .about-hero-inner { padding-bottom: 230px; }
    .about-hero-art { height: 255px; }
    .about-hero-actions, .about-final-actions { flex-direction: column; }
    .about-hero-actions .about-button, .about-final-actions .about-button { width: 100%; }
    .about-highlights-grid { grid-template-columns: 1fr; gap: 0; }
    .about-highlight, .about-highlight:nth-child(2) { border-right: 0; border-bottom: 1px solid #edf3fa; padding: 12px 0; }
    .about-highlight:last-child { border-bottom: 0; }
    .about-metrics { gap: 9px; }
    .about-metric { display: block; min-height: 154px; padding: 15px; }
    .about-metric-icon { width: 42px; height: 42px; margin-bottom: 10px; font-size: 18px; }
    .about-metric strong { font-size: 25px; }
    .about-audience-grid, .about-reasons-grid { grid-template-columns: 1fr; }
    .about-audience-photo { height: 190px; }
    .about-screen-image { height: 185px; }
    .about-final-panel { padding-bottom: 205px; }
    .about-final-art { height: 205px; }
}