.cmparents {
    --ink: #252a3a;
    --muted: #697183;
    --purple: #6548df;
    --green: #2a9b73;
    --line: #e5e7ef;
    background: #fff;
}
.cmparents * { box-sizing: border-box; }
.cmparents-container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.cmparents-hero {
    padding: 84px 0 76px;
    background:
        radial-gradient(circle at 7% 0%, rgba(101,72,223,.17), transparent 31%),
        radial-gradient(circle at 92% 15%, rgba(42,155,115,.13), transparent 27%),
        #f7f8fc;
}
.cmparents-hero-grid {
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr);
    gap: 54px;
    align-items: center;
}
.cmparents-badge {
    display: inline-flex;
    padding: 7px 11px;
    color: #5c42c5;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
    background: #ece8ff;
    border-radius: 999px;
}
.cmparents h1 {
    max-width: 820px;
    margin: 17px 0 18px;
    color: var(--ink);
    font-size: clamp(43px,5.7vw,70px);
    line-height: 1.02;
    letter-spacing: -.045em;
}
.cmparents-hero p,
.cmparents-benefit-grid p,
.cmparents-access-grid p,
.cmparents-final p {
    color: var(--muted);
    line-height: 1.72;
}
.cmparents-hero > div p,
.cmparents-hero-grid > div > p {
    max-width: 750px;
    margin: 0;
    font-size: 18px;
}
.cmparents-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}
.cmparents-button {
    display: inline-flex;
    min-height: 49px;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    color: #fff;
    font-weight: 900;
    text-decoration: none;
    background: var(--purple);
    border: 1px solid var(--purple);
    border-radius: 13px;
}
.cmparents-button:hover { color: #fff; text-decoration: none; }
.cmparents-button.secondary {
    color: #514185;
    background: #fff;
    border-color: #dcd7f1;
}
.cmparents-card {
    padding: 32px;
    color: #fff;
    background: linear-gradient(145deg,#271b5d,#6548df);
    border-radius: 28px;
    box-shadow: 0 25px 62px rgba(53,37,128,.20);
}
.cmparents-card > span {
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .72;
}
.cmparents-card > strong {
    display: block;
    margin: 14px 0 25px;
    font-size: 31px;
    line-height: 1.12;
}
.cmparents-mini {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px 10px;
    align-items: center;
}
.cmparents-mini i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    font-style: normal;
    font-weight: 950;
    background: rgba(255,255,255,.15);
    border-radius: 10px;
}
.cmparents-mini p { margin: 0; color: rgba(255,255,255,.84); }
.cmparents-benefits { padding: 82px 0; }
.cmparents-heading { max-width: 790px; margin: 0 auto 42px; text-align: center; }
.cmparents-heading > span {
    color: var(--purple);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.cmparents-heading h2,
.cmparents-expect h2 {
    margin: 11px 0 0;
    color: var(--ink);
    font-size: clamp(33px,4vw,49px);
    line-height: 1.08;
    letter-spacing: -.035em;
}
.cmparents-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 17px;
}
.cmparents-benefit-grid article,
.cmparents-access-grid article {
    padding: 27px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 14px 34px rgba(34,38,54,.05);
}
.cmparents-benefit-grid b {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #5c42c5;
    font-size: 11px;
    background: #eeeaff;
    border-radius: 12px;
}
.cmparents-benefit-grid h3,
.cmparents-access-grid h3 {
    margin: 18px 0 9px;
    color: #2c3142;
    font-size: 20px;
}
.cmparents-benefit-grid p,
.cmparents-access-grid p { margin: 0; }
.cmparents-access { padding: 77px 0; background: #f7f8fc; }
.cmparents-access-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px;
}
.cmparents-access-grid article > span {
    display: inline-flex;
    padding: 6px 10px;
    color: #5540b4;
    font-size: 12px;
    font-weight: 950;
    background: #eeeaff;
    border-radius: 999px;
}
.cmparents-access-grid article.free > span {
    color: #187653;
    background: #e2f6ee;
}
.cmparents-access-grid article.premium {
    border-color: #d5cef9;
    box-shadow: 0 18px 42px rgba(101,72,223,.09);
}
.cmparents-access-action { display: flex; justify-content: center; margin-top: 28px; }
.cmparents-expect { padding: 78px 0; }
.cmparents-expect-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 54px;
    align-items: start;
}
.cmparents-expect ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: parent-list;
}
.cmparents-expect li {
    position: relative;
    counter-increment: parent-list;
    margin-bottom: 10px;
    padding: 16px 18px 16px 58px;
    color: #444b5d;
    line-height: 1.55;
    background: #f8f8fc;
    border: 1px solid #e9eaf1;
    border-radius: 15px;
}
.cmparents-expect li::before {
    content: counter(parent-list);
    position: absolute;
    left: 16px;
    top: 13px;
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    color: #fff;
    font-size: 11px;
    font-weight: 950;
    background: var(--purple);
    border-radius: 9px;
}
html[dir="rtl"] .cmparents-expect li {
    padding: 16px 58px 16px 18px;
}
html[dir="rtl"] .cmparents-expect li::before {
    right: 16px;
    left: auto;
}
.cmparents-final { padding: 0 0 84px; }
.cmparents-final-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 39px;
    color: #fff;
    background: linear-gradient(135deg,#271a5d,#6548df);
    border-radius: 28px;
}
.cmparents-final h2 {
    max-width: 790px;
    margin: 13px 0 8px;
    color: #fff;
    font-size: clamp(30px,4vw,45px);
    line-height: 1.08;
}
.cmparents-final p {
    max-width: 740px;
    margin: 0;
    color: rgba(255,255,255,.78);
}
.cmparents-badge.dark { color: #fff; background: rgba(255,255,255,.14); }
.cmparents-button.light {
    flex: 0 0 auto;
    color: #4d35af;
    background: #fff;
    border-color: #fff;
}
html[dir="rtl"] .cmparents { text-align: right; }
@media (max-width: 960px) {
    .cmparents-hero-grid,
    .cmparents-expect-grid { grid-template-columns: 1fr; }
    .cmparents-benefit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .cmparents-access-grid { grid-template-columns: 1fr; }
    .cmparents-final-card { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 640px) {
    .cmparents-container { width: min(100% - 28px,1180px); }
    .cmparents-hero,
    .cmparents-benefits,
    .cmparents-access,
    .cmparents-expect { padding: 58px 0; }
    .cmparents-benefit-grid { grid-template-columns: 1fr; }
    .cmparents-actions { display: grid; }
    .cmparents-button { width: 100%; }
    .cmparents-final-card { padding: 28px 22px; }
}