/*
 * Education CRM landing page (/crm-for-education/ and /en/crm-for-education/).
 *
 * Follows the house landing-page style of tutoring.css and ai-for-education.css:
 * the blue/teal palette, 28px cards on soft blue shadows, centred section
 * titles, the gradient accent band, the gradient primary button and the
 * 136/118/108 hero rhythm that clears the fixed navbar. The eyebrow and the
 * tinted "ours" column come from advantages.css. Keep them in step: where a value
 * here differs it should be because the content differs, not by accident.
 *
 * Screenshots are real product captures already cropped and framed with a
 * browser bar; this file only adds the glow panel, radius and shadow around
 * them, so the images stay responsive and language-specific.
 *
 * Fonts come from the shared typography custom properties; never hard-code a
 * family.
 */

.crm-page {
    background:
        radial-gradient(circle at top left, rgba(72, 128, 255, 0.22), transparent 38%),
        linear-gradient(180deg, #f4f8ff 0%, #ffffff 48%, #f7fbff 100%);
    color: #14233f;
    /* `clip` rather than `hidden`: contains the gradient bleed without turning
       this box into a scroll container for everything inside it. */
    overflow-x: clip;
}

.crm-page .container {
    max-width: 1200px;
}

.crm-page__hero,
.crm-page__section {
    position: relative;
}

/* In-page anchors ("See how it works") land below the fixed navbar. */
.crm-page__section[id] {
    scroll-margin-top: 72px;
}

/* ---------------------------------------------------------------- headings */

.crm-page__title,
.crm-page__section-title,
.crm-page__card-title,
.crm-page__step-title,
.crm-page__institution-title {
    color: #182845;
    font-family: var(--font-heading);
}

.crm-page__lead,
.crm-page__intro-text,
.crm-page__card-text,
.crm-page__step-text,
.crm-page__institution-text,
.crm-page__faq-answer {
    color: #4b5b79;
    font-family: var(--font-body);
}

.crm-page__card-text a,
.crm-page__step-text a,
.crm-page__checks a,
.crm-page__institution-text a,
.crm-page__faq-answer a {
    color: #2f6bd8;
    text-decoration: underline;
    text-decoration-color: rgba(47, 107, 216, 0.35);
    text-underline-offset: 3px;
}

.crm-page__card-text a:hover,
.crm-page__step-text a:hover,
.crm-page__checks a:hover,
.crm-page__institution-text a:hover,
.crm-page__faq-answer a:hover {
    color: #1d4fae;
    text-decoration-color: currentColor;
}

.crm-page__section-title {
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.08;
    margin: 0 auto 20px;
    max-width: 820px;
    text-align: center;
}

.crm-page__section-title--light {
    color: #ffffff;
}

/* Sections without an intro paragraph still need the same gap before content. */
.crm-page__section-title + .crm-page__institutions,
.crm-page__section-title + .crm-page__faq-list {
    margin-top: 44px;
}

.crm-page__intro-text {
    font-size: 18px;
    line-height: 1.8;
    margin: 0 auto 44px;
    max-width: 760px;
    text-align: center;
}

.crm-page__eyebrow {
    color: #2f6bd8;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.14em;
    margin: 0 0 18px;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------- hero */

.crm-page__hero {
    padding: 136px 0 84px;
}

.crm-page__hero-grid {
    align-items: center;
    display: grid;
    gap: 32px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

.crm-page__hero-copy {
    max-width: 580px;
}

.crm-page__title {
    /* Capped below the tutoring hero: the Ukrainian headline is a third longer. */
    font-size: clamp(40px, 4.6vw, 58px);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
    margin: 0 0 24px;
}

.crm-page__title em {
    background: linear-gradient(135deg, #5677ea 0%, #1ac6aa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: normal;
}

.crm-page__lead {
    font-size: 18px;
    line-height: 1.75;
    margin: 0 0 32px;
}

.crm-page__hero-visual {
    position: relative;
}

/* ------------------------------------------------------------- screenshots */

/*
 * A framed product capture. The glow sits on the wrapper (::before) so the image
 * itself keeps a plain box: no filter, crisp text at every zoom level.
 */
.crm-page__hero-visual,
.crm-page__step-visual {
    isolation: isolate;
    position: relative;
}

.crm-page__step-visual::before {
    background:
        radial-gradient(circle at 30% 20%, rgba(86, 119, 234, 0.28) 0%, transparent 60%),
        radial-gradient(circle at 80% 90%, rgba(26, 198, 170, 0.24) 0%, transparent 58%);
    border-radius: 40px;
    content: '';
    filter: blur(8px);
    inset: -7% -6%;
    position: absolute;
    z-index: -1;
}

/* The capture already carries its browser frame, edge line and rounded corners. */
.crm-page__shot {
    background: transparent;
    border: 0;
    border-radius: 14px;
    box-shadow:
        0 2px 6px rgba(30, 54, 101, 0.06),
        0 28px 70px rgba(31, 70, 140, 0.2);
    display: block;
    /* The markup carries width/height attributes to reserve space and avoid
       layout shift; without `height: auto` the height attribute wins and the
       image renders at its full intrinsic height. */
    height: auto;
    max-width: 100%;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    width: 100%;
}

/* A tall capture (the student dashboard) would dwarf its text column at full width. */
.crm-page__shot--portrait {
    margin: 0 auto;
    max-width: 540px;
}

/*
 * The hero is an illustration cut out on a transparent background: the white
 * circle and the cards float on the hero gradient, and the cards carry their own
 * soft shadows, so the image gets no frame, radius or shadow of its own.
 */
.crm-page__hero-image {
    display: block;
    height: auto;
    margin-left: auto;
    max-width: 100%;
    width: 100%;
}

/*
 * Sized so the artwork is about as tall as the headline block beside it. The
 * image has a transparent margin around the circle and cards, so on wide screens
 * it may run a little past the container edge without looking cropped.
 */
@media (min-width: 1200px) {
    .crm-page__hero-visual {
        margin-right: -40px;
    }
}

.crm-page__step-visual:hover .crm-page__shot {
    box-shadow:
        0 2px 6px rgba(30, 54, 101, 0.06),
        0 34px 80px rgba(31, 70, 140, 0.26);
    transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
    .crm-page__shot,
    .crm-page__step-visual:hover .crm-page__shot {
        transform: none;
        transition: none;
    }
}

/* ---------------------------------------------------------------- buttons */

.crm-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.crm-page__button {
    align-items: center;
    border-radius: 16px;
    border: 1px solid transparent;
    box-shadow: 0 18px 45px rgba(38, 74, 153, 0.18);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    min-width: 200px;
    padding: 18px 28px;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.crm-page__button:hover,
.crm-page__button:focus {
    box-shadow: 0 24px 45px rgba(38, 74, 153, 0.22);
    text-decoration: none;
    transform: translateY(-2px);
}

.crm-page__button--primary {
    background: linear-gradient(135deg, #18c7a3 0%, #17b78f 100%);
    color: #ffffff;
}

.crm-page__button--primary:hover,
.crm-page__button--primary:focus {
    color: #ffffff;
}

.crm-page__button--secondary {
    background: #ffffff;
    border-color: #b9c8f2;
    color: #20365d;
}

.crm-page__button--secondary:hover,
.crm-page__button--secondary:focus {
    color: #20365d;
}

/* ------------------------------------------------------------ check lists */

.crm-page__checks {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.crm-page__checks li {
    color: #38537c;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    padding-left: 30px;
    position: relative;
}

.crm-page__checks li::before {
    align-items: center;
    background: rgba(23, 183, 143, 0.14);
    border-radius: 999px;
    color: #0f9f7c;
    content: '\2713';
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    height: 20px;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 3px;
    width: 20px;
}

.crm-page__checks--hero {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-top: 28px;
}

.crm-page__checks--hero li {
    font-size: 14px;
}

/* ---------------------------------------------------------------- sections */

.crm-page__section {
    padding: 88px 0;
}

.crm-page__section--accent {
    background: linear-gradient(90deg, #5677ea 0%, #1ac6aa 100%);
}

.crm-page__section--soft {
    background:
        radial-gradient(circle at top left, rgba(72, 128, 255, 0.18), transparent 36%),
        linear-gradient(180deg, #edf4ff 0%, #ffffff 100%);
}

/* -------------------------------------------------------- shared card shell */

.crm-page__card,
.crm-page__institution,
.crm-page__compare,
.crm-page__faq-item {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(185, 202, 240, 0.72);
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(30, 54, 101, 0.12);
}

.crm-page__card-icon {
    align-items: center;
    background: linear-gradient(135deg, rgba(86, 119, 234, 0.16) 0%, rgba(26, 198, 170, 0.16) 100%);
    border-radius: 18px;
    color: #2f6bd8;
    display: inline-flex;
    font-size: 22px;
    height: 56px;
    justify-content: center;
    width: 56px;
}

/* ---------------------------------------------------------- capabilities */

.crm-page__capability-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.crm-page__card {
    padding: 30px 28px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.crm-page__card:hover {
    box-shadow: 0 30px 70px rgba(30, 54, 101, 0.16);
    transform: translateY(-3px);
}

.crm-page__card-title {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 22px 0 12px;
}

.crm-page__card-text {
    font-size: 15px;
    line-height: 1.72;
    margin: 0;
}

/* ------------------------------------------------------------ journey band */

.crm-page__journey {
    background: linear-gradient(90deg, #5677ea 0%, #1ac6aa 100%);
    padding: 56px 0;
}

.crm-page__journey-list {
    counter-reset: none;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.crm-page__journey-step {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    text-align: center;
}

/* The connector runs from the centre of one bubble to the next. */
.crm-page__journey-step:not(:last-child)::after {
    background: rgba(255, 255, 255, 0.45);
    content: '';
    height: 2px;
    left: calc(50% + 30px);
    position: absolute;
    right: calc(-50% + 30px);
    top: 21px;
}

.crm-page__journey-number {
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 800;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.crm-page__journey-label {
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

/* ------------------------------------------------------------ step rows */

.crm-page__steps {
    display: grid;
    gap: 96px;
}

/* The mockups carry a lot of detail, so the image takes the larger share. */
.crm-page__step {
    align-items: center;
    display: grid;
    gap: 56px;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
}

.crm-page__step--reverse {
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
}

.crm-page__step--reverse .crm-page__step-copy {
    order: 2;
}

.crm-page__step--reverse .crm-page__step-visual {
    order: 1;
}

.crm-page__step-label {
    background: linear-gradient(135deg, #5677ea 0%, #1ac6aa 100%);
    border-radius: 999px;
    color: #ffffff;
    display: inline-block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    margin-bottom: 18px;
    padding: 6px 14px;
    text-transform: uppercase;
}

.crm-page__step-title {
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0 0 16px;
}

.crm-page__step-text {
    font-size: 17px;
    line-height: 1.75;
    margin: 0 0 22px;
}

/* ------------------------------------------------------------ comparison */

.crm-page__compare {
    margin: 0 auto;
    max-width: 1000px;
    overflow: hidden;
}

.crm-page__compare-table {
    border-collapse: collapse;
    font-family: var(--font-body);
    width: 100%;
}

.crm-page__compare-table th,
.crm-page__compare-table td {
    border-bottom: 1px solid rgba(185, 202, 240, 0.5);
    font-size: 15px;
    line-height: 1.55;
    padding: 20px 24px;
    text-align: left;
    vertical-align: top;
}

.crm-page__compare-table tbody tr:last-child th,
.crm-page__compare-table tbody tr:last-child td {
    border-bottom: 0;
}

.crm-page__compare-table tbody th {
    color: #182845;
    font-weight: 800;
    width: 22%;
}

.crm-page__compare-head {
    color: #5b6c8a;
    font-size: 12px !important;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.crm-page__compare-head--ours {
    color: #0f9f7c;
}

.crm-page__compare-table th:nth-child(3),
.crm-page__compare-table td:nth-child(3) {
    background: rgba(23, 183, 143, 0.07);
}

.crm-page__compare-cell {
    padding-left: 50px !important;
    position: relative;
}

.crm-page__compare-cell::before {
    font-size: 15px;
    font-weight: 900;
    left: 24px;
    position: absolute;
    top: 20px;
}

.crm-page__compare-cell--no {
    color: #5b6c8a;
}

.crm-page__compare-cell--no::before {
    color: #e0564b;
    content: '\2715';
}

.crm-page__compare-cell--yes {
    color: #182845;
    font-weight: 600;
}

.crm-page__compare-cell--yes::before {
    color: #0f9f7c;
    content: '\2713';
}

/* ------------------------------------------------------------ institutions */

.crm-page__institutions {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.crm-page__institution {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 30px 22px;
    text-align: center;
}

.crm-page__institution-title {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.35;
    margin: 18px 0 8px;
    /* The Zoho SalesIQ widget injects a stylesheet that sets text-align on bare
       headings; declare it so the title centres regardless. */
    text-align: center;
}

.crm-page__institution-text {
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
}

/* ------------------------------------------------------------------- FAQ */

.crm-page__faq-list {
    display: grid;
    gap: 16px;
    margin: 0 auto;
    max-width: 920px;
}

.crm-page__faq-item {
    overflow: hidden;
}

.crm-page__faq-question {
    color: #20365d;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    list-style: none;
    padding: 24px 72px 24px 28px;
    position: relative;
}

.crm-page__faq-question::-webkit-details-marker {
    display: none;
}

.crm-page__faq-question::after {
    color: #5687ff;
    content: '+';
    font-size: 28px;
    font-weight: 400;
    position: absolute;
    right: 28px;
    top: 18px;
}

.crm-page__faq-item[open] .crm-page__faq-question::after {
    content: '\2212';
}

.crm-page__faq-answer {
    font-size: 15px;
    line-height: 1.75;
    margin: 0;
    padding: 0 28px 24px;
}

/* ------------------------------------------------------------------- CTA */

.crm-page__cta-grid {
    align-items: center;
    display: grid;
    gap: 56px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
}

.crm-page__cta-copy .crm-page__section-title {
    margin-left: 0;
    text-align: left;
}

.crm-page__cta-text {
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-body);
    font-size: 19px;
    line-height: 1.7;
    margin: 0;
    max-width: 520px;
}

.crm-page__cta-form .leads-form-block {
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(20, 35, 63, 0.25);
    padding: 28px;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1199px) {
    .crm-page__hero-grid,
    .crm-page__step,
    .crm-page__step--reverse,
    .crm-page__cta-grid {
        grid-template-columns: 1fr;
    }

    .crm-page__hero-copy {
        max-width: none;
    }

    .crm-page__hero-visual,
    .crm-page__step-visual {
        margin: 0 auto;
        max-width: 760px;
        width: 100%;
    }

    .crm-page__hero-image {
        margin: 0 auto;
        max-width: 600px;
    }

    .crm-page__step--reverse .crm-page__step-copy,
    .crm-page__step--reverse .crm-page__step-visual {
        order: initial;
    }

    .crm-page__steps {
        gap: 72px;
    }

    .crm-page__step {
        gap: 36px;
    }

    .crm-page__capability-grid,
    .crm-page__institutions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-page__cta-form {
        margin: 0 auto;
        max-width: 560px;
        width: 100%;
    }
}

@media (max-width: 991px) {
    .crm-page__hero {
        padding-top: 118px;
    }

    .crm-page__section {
        padding: 72px 0;
    }

    .crm-page__journey-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        row-gap: 28px;
    }

    /* Four per row: no connector out of the last bubble of a row. */
    .crm-page__journey-step:nth-child(4)::after {
        display: none;
    }
}

@media (max-width: 767px) {
    .crm-page__hero {
        padding: 108px 0 56px;
    }

    .crm-page__section {
        padding: 56px 0;
    }

    .crm-page__title {
        font-size: 40px;
    }

    .crm-page__lead,
    .crm-page__intro-text,
    .crm-page__step-text,
    .crm-page__cta-text {
        font-size: 16px;
    }

    .crm-page__actions {
        flex-direction: column;
    }

    .crm-page__button {
        min-width: 0;
        width: 100%;
    }

    .crm-page__checks--hero {
        display: grid;
    }

    .crm-page__capability-grid,
    .crm-page__institutions {
        grid-template-columns: 1fr;
    }

    .crm-page__card,
    .crm-page__institution {
        padding: 24px 20px;
    }

    .crm-page__shot {
        border-radius: 12px;
    }

    .crm-page__journey {
        padding: 40px 0;
    }

    .crm-page__journey-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .crm-page__journey-number {
        font-size: 15px;
        height: 38px;
        width: 38px;
    }

    .crm-page__journey-label {
        font-size: 13px;
    }

    .crm-page__journey-step:not(:last-child)::after {
        left: calc(50% + 24px);
        right: calc(-50% + 24px);
        top: 18px;
    }

    /* The comparison table becomes one card per aspect. */
    .crm-page__compare-table thead {
        display: none;
    }

    .crm-page__compare-table,
    .crm-page__compare-table tbody,
    .crm-page__compare-table tr,
    .crm-page__compare-table th,
    .crm-page__compare-table td {
        display: block;
        width: 100% !important;
    }

    .crm-page__compare-table tbody tr {
        border-bottom: 1px solid rgba(185, 202, 240, 0.7);
    }

    .crm-page__compare-table tbody tr:last-child {
        border-bottom: 0;
    }

    .crm-page__compare-table th,
    .crm-page__compare-table td {
        border-bottom: 0;
        padding: 14px 20px;
    }

    .crm-page__compare-table tbody th {
        padding-top: 20px;
    }

    .crm-page__compare-cell {
        padding-left: 46px !important;
    }

    .crm-page__compare-cell::before {
        left: 20px;
        top: 14px;
    }

    .crm-page__compare-cell::after {
        color: #8a99b3;
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.12em;
        margin-top: 4px;
        text-transform: uppercase;
    }

    .crm-page__compare-table tbody tr td:last-child {
        padding-bottom: 20px;
    }

    .crm-page__faq-question {
        font-size: 16px;
        padding: 20px 56px 20px 20px;
    }

    .crm-page__faq-question::after {
        right: 20px;
        top: 14px;
    }

    .crm-page__faq-answer {
        padding: 0 20px 20px;
    }

    .crm-page__cta-copy .crm-page__section-title {
        text-align: center;
    }

    .crm-page__cta-text {
        margin: 0 auto;
        text-align: center;
    }

    .crm-page__cta-form .leads-form-block {
        padding: 20px;
    }
}